diff options
Diffstat (limited to 'src/web/app/common')
24 files changed, 626 insertions, 142 deletions
diff --git a/src/web/app/common/mios.ts b/src/web/app/common/mios.ts index cbb4400a73..3690d3171d 100644 --- a/src/web/app/common/mios.ts +++ b/src/web/app/common/mios.ts @@ -4,11 +4,12 @@ import * as merge from 'object-assign-deep'; import { host, apiUrl, swPublickey, version, lang, googleMapsApiKey } from '../config'; import Progress from './scripts/loading'; -import HomeStreamManager from './scripts/streaming/home-stream-manager'; -import DriveStreamManager from './scripts/streaming/drive-stream-manager'; -import ServerStreamManager from './scripts/streaming/server-stream-manager'; -import RequestsStreamManager from './scripts/streaming/requests-stream-manager'; -import MessagingIndexStreamManager from './scripts/streaming/messaging-index-stream-manager'; +import { HomeStreamManager } from './scripts/streaming/home'; +import { DriveStreamManager } from './scripts/streaming/drive'; +import { ServerStreamManager } from './scripts/streaming/server'; +import { RequestsStreamManager } from './scripts/streaming/requests'; +import { MessagingIndexStreamManager } from './scripts/streaming/messaging-index'; +import { OthelloStreamManager } from './scripts/streaming/othello'; import Err from '../common/views/components/connect-failed.vue'; @@ -117,11 +118,13 @@ export default class MiOS extends EventEmitter { serverStream: ServerStreamManager; requestsStream: RequestsStreamManager; messagingIndexStream: MessagingIndexStreamManager; + othelloStream: OthelloStreamManager; } = { driveStream: null, serverStream: null, requestsStream: null, - messagingIndexStream: null + messagingIndexStream: null, + othelloStream: null }; /** @@ -169,6 +172,7 @@ export default class MiOS extends EventEmitter { // Init other stream manager this.streams.driveStream = new DriveStreamManager(this.i); this.streams.messagingIndexStream = new MessagingIndexStreamManager(this.i); + this.streams.othelloStream = new OthelloStreamManager(this.i); }); if (this.debug) { diff --git a/src/web/app/common/scripts/streaming/channel-stream.ts b/src/web/app/common/scripts/streaming/channel.ts index 434b108b9e..434b108b9e 100644 --- a/src/web/app/common/scripts/streaming/channel-stream.ts +++ b/src/web/app/common/scripts/streaming/channel.ts diff --git a/src/web/app/common/scripts/streaming/drive-stream-manager.ts b/src/web/app/common/scripts/streaming/drive-stream-manager.ts deleted file mode 100644 index 8acdd7cbba..0000000000 --- a/src/web/app/common/scripts/streaming/drive-stream-manager.ts +++ /dev/null @@ -1,20 +0,0 @@ -import StreamManager from './stream-manager'; -import Connection from './drive-stream'; - -export default class DriveStreamManager extends StreamManager<Connection> { - private me; - - constructor(me) { - super(); - - this.me = me; - } - - public getConnection() { - if (this.connection == null) { - this.connection = new Connection(this.me); - } - - return this.connection; - } -} diff --git a/src/web/app/common/scripts/streaming/drive-stream.ts b/src/web/app/common/scripts/streaming/drive-stream.ts deleted file mode 100644 index 0da3f12554..0000000000 --- a/src/web/app/common/scripts/streaming/drive-stream.ts +++ /dev/null @@ -1,12 +0,0 @@ -import Stream from './stream'; - -/** - * Drive stream connection - */ -export default class Connection extends Stream { - constructor(me) { - super('drive', { - i: me.token - }); - } -} diff --git a/src/web/app/common/scripts/streaming/drive.ts b/src/web/app/common/scripts/streaming/drive.ts new file mode 100644 index 0000000000..5805e58033 --- /dev/null +++ b/src/web/app/common/scripts/streaming/drive.ts @@ -0,0 +1,31 @@ +import Stream from './stream'; +import StreamManager from './stream-manager'; + +/** + * Drive stream connection + */ +export class DriveStream extends Stream { + constructor(me) { + super('drive', { + i: me.token + }); + } +} + +export class DriveStreamManager extends StreamManager<DriveStream> { + private me; + + constructor(me) { + super(); + + this.me = me; + } + + public getConnection() { + if (this.connection == null) { + this.connection = new DriveStream(this.me); + } + + return this.connection; + } +} diff --git a/src/web/app/common/scripts/streaming/home-stream-manager.ts b/src/web/app/common/scripts/streaming/home-stream-manager.ts deleted file mode 100644 index ab56d5a73a..0000000000 --- a/src/web/app/common/scripts/streaming/home-stream-manager.ts +++ /dev/null @@ -1,23 +0,0 @@ -import StreamManager from './stream-manager'; -import Connection from './home-stream'; -import MiOS from '../../mios'; - -export default class HomeStreamManager extends StreamManager<Connection> { - private me; - private os: MiOS; - - constructor(os: MiOS, me) { - super(); - - this.me = me; - this.os = os; - } - - public getConnection() { - if (this.connection == null) { - this.connection = new Connection(this.os, this.me); - } - - return this.connection; - } -} diff --git a/src/web/app/common/scripts/streaming/home-stream.ts b/src/web/app/common/scripts/streaming/home.ts index 3516705e22..1f110bfd3b 100644 --- a/src/web/app/common/scripts/streaming/home-stream.ts +++ b/src/web/app/common/scripts/streaming/home.ts @@ -1,12 +1,13 @@ import * as merge from 'object-assign-deep'; import Stream from './stream'; +import StreamManager from './stream-manager'; import MiOS from '../../mios'; /** * Home stream connection */ -export default class Connection extends Stream { +export class HomeStream extends Stream { constructor(os: MiOS, me) { super('', { i: me.token @@ -34,3 +35,23 @@ export default class Connection extends Stream { }); } } + +export class HomeStreamManager extends StreamManager<HomeStream> { + private me; + private os: MiOS; + + constructor(os: MiOS, me) { + super(); + + this.me = me; + this.os = os; + } + + public getConnection() { + if (this.connection == null) { + this.connection = new HomeStream(this.os, this.me); + } + + return this.connection; + } +} diff --git a/src/web/app/common/scripts/streaming/messaging-index-stream-manager.ts b/src/web/app/common/scripts/streaming/messaging-index-stream-manager.ts deleted file mode 100644 index 0f08b01481..0000000000 --- a/src/web/app/common/scripts/streaming/messaging-index-stream-manager.ts +++ /dev/null @@ -1,20 +0,0 @@ -import StreamManager from './stream-manager'; -import Connection from './messaging-index-stream'; - -export default class MessagingIndexStreamManager extends StreamManager<Connection> { - private me; - - constructor(me) { - super(); - - this.me = me; - } - - public getConnection() { - if (this.connection == null) { - this.connection = new Connection(this.me); - } - - return this.connection; - } -} diff --git a/src/web/app/common/scripts/streaming/messaging-index-stream.ts b/src/web/app/common/scripts/streaming/messaging-index-stream.ts deleted file mode 100644 index 8015c840b4..0000000000 --- a/src/web/app/common/scripts/streaming/messaging-index-stream.ts +++ /dev/null @@ -1,12 +0,0 @@ -import Stream from './stream'; - -/** - * Messaging index stream connection - */ -export default class Connection extends Stream { - constructor(me) { - super('messaging-index', { - i: me.token - }); - } -} diff --git a/src/web/app/common/scripts/streaming/messaging-index.ts b/src/web/app/common/scripts/streaming/messaging-index.ts new file mode 100644 index 0000000000..69758416dc --- /dev/null +++ b/src/web/app/common/scripts/streaming/messaging-index.ts @@ -0,0 +1,31 @@ +import Stream from './stream'; +import StreamManager from './stream-manager'; + +/** + * Messaging index stream connection + */ +export class MessagingIndexStream extends Stream { + constructor(me) { + super('messaging-index', { + i: me.token + }); + } +} + +export class MessagingIndexStreamManager extends StreamManager<MessagingIndexStream> { + private me; + + constructor(me) { + super(); + + this.me = me; + } + + public getConnection() { + if (this.connection == null) { + this.connection = new MessagingIndexStream(this.me); + } + + return this.connection; + } +} diff --git a/src/web/app/common/scripts/streaming/messaging-stream.ts b/src/web/app/common/scripts/streaming/messaging.ts index 68dfc5ec09..1fff2286b3 100644 --- a/src/web/app/common/scripts/streaming/messaging-stream.ts +++ b/src/web/app/common/scripts/streaming/messaging.ts @@ -3,7 +3,7 @@ import Stream from './stream'; /** * Messaging stream connection */ -export default class Connection extends Stream { +export class MessagingStream extends Stream { constructor(me, otherparty) { super('messaging', { i: me.token, diff --git a/src/web/app/common/scripts/streaming/othello-game.ts b/src/web/app/common/scripts/streaming/othello-game.ts new file mode 100644 index 0000000000..51a435541a --- /dev/null +++ b/src/web/app/common/scripts/streaming/othello-game.ts @@ -0,0 +1,10 @@ +import Stream from './stream'; + +export class OthelloGameStream extends Stream { + constructor(me, game) { + super('othello-game', { + i: me.token, + game: game.id + }); + } +} diff --git a/src/web/app/common/scripts/streaming/othello.ts b/src/web/app/common/scripts/streaming/othello.ts new file mode 100644 index 0000000000..febc5d498a --- /dev/null +++ b/src/web/app/common/scripts/streaming/othello.ts @@ -0,0 +1,28 @@ +import StreamManager from './stream-manager'; +import Stream from './stream'; + +export class OthelloStream extends Stream { + constructor(me) { + super('othello', { + i: me.token + }); + } +} + +export class OthelloStreamManager extends StreamManager<OthelloStream> { + private me; + + constructor(me) { + super(); + + this.me = me; + } + + public getConnection() { + if (this.connection == null) { + this.connection = new OthelloStream(this.me); + } + + return this.connection; + } +} diff --git a/src/web/app/common/scripts/streaming/requests-stream-manager.ts b/src/web/app/common/scripts/streaming/requests-stream-manager.ts deleted file mode 100644 index 44db913e78..0000000000 --- a/src/web/app/common/scripts/streaming/requests-stream-manager.ts +++ /dev/null @@ -1,12 +0,0 @@ -import StreamManager from './stream-manager'; -import Connection from './requests-stream'; - -export default class RequestsStreamManager extends StreamManager<Connection> { - public getConnection() { - if (this.connection == null) { - this.connection = new Connection(); - } - - return this.connection; - } -} diff --git a/src/web/app/common/scripts/streaming/requests-stream.ts b/src/web/app/common/scripts/streaming/requests-stream.ts deleted file mode 100644 index 22ecea6c07..0000000000 --- a/src/web/app/common/scripts/streaming/requests-stream.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Stream from './stream'; - -/** - * Requests stream connection - */ -export default class Connection extends Stream { - constructor() { - super('requests'); - } -} diff --git a/src/web/app/common/scripts/streaming/requests.ts b/src/web/app/common/scripts/streaming/requests.ts new file mode 100644 index 0000000000..5d199a0742 --- /dev/null +++ b/src/web/app/common/scripts/streaming/requests.ts @@ -0,0 +1,21 @@ +import Stream from './stream'; +import StreamManager from './stream-manager'; + +/** + * Requests stream connection + */ +export class RequestsStream extends Stream { + constructor() { + super('requests'); + } +} + +export class RequestsStreamManager extends StreamManager<RequestsStream> { + public getConnection() { + if (this.connection == null) { + this.connection = new RequestsStream(); + } + + return this.connection; + } +} diff --git a/src/web/app/common/scripts/streaming/server-stream-manager.ts b/src/web/app/common/scripts/streaming/server-stream-manager.ts deleted file mode 100644 index a170daebb9..0000000000 --- a/src/web/app/common/scripts/streaming/server-stream-manager.ts +++ /dev/null @@ -1,12 +0,0 @@ -import StreamManager from './stream-manager'; -import Connection from './server-stream'; - -export default class ServerStreamManager extends StreamManager<Connection> { - public getConnection() { - if (this.connection == null) { - this.connection = new Connection(); - } - - return this.connection; - } -} diff --git a/src/web/app/common/scripts/streaming/server-stream.ts b/src/web/app/common/scripts/streaming/server-stream.ts deleted file mode 100644 index b9e0684465..0000000000 --- a/src/web/app/common/scripts/streaming/server-stream.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Stream from './stream'; - -/** - * Server stream connection - */ -export default class Connection extends Stream { - constructor() { - super('server'); - } -} diff --git a/src/web/app/common/scripts/streaming/server.ts b/src/web/app/common/scripts/streaming/server.ts new file mode 100644 index 0000000000..b12198d2fd --- /dev/null +++ b/src/web/app/common/scripts/streaming/server.ts @@ -0,0 +1,21 @@ +import Stream from './stream'; +import StreamManager from './stream-manager'; + +/** + * Server stream connection + */ +export class ServerStream extends Stream { + constructor() { + super('server'); + } +} + +export class ServerStreamManager extends StreamManager<ServerStream> { + public getConnection() { + if (this.connection == null) { + this.connection = new ServerStream(); + } + + return this.connection; + } +} diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts index 5274920228..98fc2352f2 100644 --- a/src/web/app/common/views/components/index.ts +++ b/src/web/app/common/views/components/index.ts @@ -21,6 +21,7 @@ import urlPreview from './url-preview.vue'; import twitterSetting from './twitter-setting.vue'; import fileTypeIcon from './file-type-icon.vue'; import Switch from './switch.vue'; +import Othello from './othello.vue'; Vue.component('mk-signin', signin); Vue.component('mk-signup', signup); @@ -43,3 +44,4 @@ Vue.component('mk-url-preview', urlPreview); Vue.component('mk-twitter-setting', twitterSetting); Vue.component('mk-file-type-icon', fileTypeIcon); Vue.component('mk-switch', Switch); +Vue.component('mk-othello', Othello); diff --git a/src/web/app/common/views/components/messaging-room.vue b/src/web/app/common/views/components/messaging-room.vue index 637fa9cd60..547e9494e5 100644 --- a/src/web/app/common/views/components/messaging-room.vue +++ b/src/web/app/common/views/components/messaging-room.vue @@ -26,7 +26,7 @@ <script lang="ts"> import Vue from 'vue'; -import MessagingStreamConnection from '../../scripts/streaming/messaging-stream'; +import { MessagingStream } from '../../scripts/streaming/messaging'; import XMessage from './messaging-room.message.vue'; import XForm from './messaging-room.form.vue'; import { url } from '../../../config'; @@ -66,7 +66,7 @@ export default Vue.extend({ }, mounted() { - this.connection = new MessagingStreamConnection((this as any).os.i, this.user.id); + this.connection = new MessagingStream((this as any).os.i, this.user.id); this.connection.on('message', this.onMessage); this.connection.on('read', this.onRead); diff --git a/src/web/app/common/views/components/messaging.vue b/src/web/app/common/views/components/messaging.vue index a94a996685..db60e9259a 100644 --- a/src/web/app/common/views/components/messaging.vue +++ b/src/web/app/common/views/components/messaging.vue @@ -89,7 +89,7 @@ export default Vue.extend({ beforeDestroy() { this.connection.off('message', this.onMessage); this.connection.off('read', this.onRead); - (this as any).os.stream.dispose(this.connectionId); + (this as any).os.streams.messagingIndexStream.dispose(this.connectionId); }, methods: { isMe(message) { diff --git a/src/web/app/common/views/components/othello.game.vue b/src/web/app/common/views/components/othello.game.vue new file mode 100644 index 0000000000..b7c23e704e --- /dev/null +++ b/src/web/app/common/views/components/othello.game.vue @@ -0,0 +1,171 @@ +<template> +<div class="root"> + <header><b>{{ game.black_user.name }}</b>(黒) vs <b>{{ game.white_user.name }}</b>(白)</header> + <p class="turn" v-if="!iAmPlayer && !isEnded">{{ turn.name }}のターンです<mk-ellipsis/></p> + <p class="turn" v-if="iAmPlayer && !isEnded">{{ isMyTurn ? 'あなたのターンです' : '相手のターンです' }}<mk-ellipsis v-if="!isMyTurn"/></p> + <p class="result" v-if="isEnded"> + <template v-if="winner"><b>{{ winner.name }}</b>の勝ち</template> + <template v-else>引き分け</template> + </p> + <div> + <div v-for="(stone, i) in o.board" + :class="{ empty: stone == null, myTurn: isMyTurn, can: o.canReverse(turn.id == game.black_user.id ? 'black' : 'white', i) }" + @click="set(i)" + > + <img v-if="stone == 'black'" :src="`${game.black_user.avatar_url}?thumbnail&size=64`" alt=""> + <img v-if="stone == 'white'" :src="`${game.white_user.avatar_url}?thumbnail&size=64`" alt=""> + </div> + </div> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import { OthelloGameStream } from '../../scripts/streaming/othello-game'; +import Othello from '../../../../../common/othello'; + +export default Vue.extend({ + props: ['game'], + data() { + return { + o: new Othello(), + turn: null, + isMyTurn: null, + isEnded: false, + winner: null, + connection: null + }; + }, + computed: { + iAmPlayer(): boolean { + return this.game.black_user_id == (this as any).os.i.id || this.game.white_user_id == (this as any).os.i.id; + }, + myColor(): string { + return this.game.black_user_id == (this as any).os.i.id ? 'black' : 'white'; + }, + opColor(): string { + return this.myColor == 'black' ? 'white' : 'black'; + } + }, + created() { + this.game.logs.forEach(log => { + this.o.set(log.color, log.pos); + }); + + this.turn = this.game.turn_user_id == this.game.black_user_id ? this.game.black_user : this.game.white_user; + this.isMyTurn = this.game.turn_user_id == (this as any).os.i.id; + this.isEnded = this.game.is_ended; + this.winner = this.game.winner; + }, + mounted() { + this.connection = new OthelloGameStream((this as any).os.i, this.game); + this.connection.on('set', this.onSet); + }, + beforeDestroy() { + this.connection.off('set', this.onSet); + this.connection.close(); + }, + methods: { + set(pos) { + if (!this.isMyTurn) return; + if (!this.o.canReverse(this.myColor, pos)) return; + this.o.set(this.myColor, pos); + if (this.o.getPattern(this.opColor).length > 0) { + this.isMyTurn = !this.isMyTurn; + this.turn = this.myColor == 'black' ? this.game.white_user : this.game.black_user; + } else if (this.o.getPattern(this.myColor).length == 0) { + this.isEnded = true; + const blackCount = this.o.board.filter(s => s == 'black').length; + const whiteCount = this.o.board.filter(s => s == 'white').length; + this.winner = blackCount == whiteCount ? null : blackCount > whiteCount ? this.game.black_user : this.game.white_user; + } + this.connection.send({ + type: 'set', + pos + }); + this.$forceUpdate(); + }, + onSet(x) { + this.o.set(x.color, x.pos); + if (this.o.getPattern('black').length == 0 && this.o.getPattern('white').length == 0) { + this.isEnded = true; + const blackCount = this.o.board.filter(s => s == 'black').length; + const whiteCount = this.o.board.filter(s => s == 'white').length; + this.winner = blackCount == whiteCount ? null : blackCount > whiteCount ? this.game.black_user : this.game.white_user; + } else { + if (this.iAmPlayer && this.o.getPattern(this.myColor).length > 0) { + this.isMyTurn = true; + } + + if (x.color == 'black' && this.o.getPattern('white').length > 0) { + this.turn = this.game.white_user; + } + if (x.color == 'black' && this.o.getPattern('white').length == 0) { + this.turn = this.game.black_user; + } + if (x.color == 'white' && this.o.getPattern('black').length > 0) { + this.turn = this.game.black_user; + } + if (x.color == 'white' && this.o.getPattern('black').length == 0) { + this.turn = this.game.white_user; + } + } + this.$forceUpdate(); + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +.root + text-align center + + > header + padding 8px + border-bottom dashed 1px #c4cdd4 + + > div + display grid + grid-template-rows repeat(8, 1fr) + grid-template-columns repeat(8, 1fr) + grid-gap 4px + width 300px + height 300px + margin 0 auto + + > div + background transparent + border-radius 6px + overflow hidden + + * + pointer-events none + user-select none + + &.empty + border solid 2px #f5f5f5 + + &.empty.can + background #f5f5f5 + + &.empty.myTurn + border-color #eee + + &.can + background #eee + cursor pointer + + &:hover + border-color darken($theme-color, 10%) + background $theme-color + + &:active + background darken($theme-color, 10%) + + > img + display block + width 100% + height 100% +</style> diff --git a/src/web/app/common/views/components/othello.vue b/src/web/app/common/views/components/othello.vue new file mode 100644 index 0000000000..326a8d80cc --- /dev/null +++ b/src/web/app/common/views/components/othello.vue @@ -0,0 +1,275 @@ +<template> +<div class="mk-othello"> + <div v-if="game"> + <x-game :game="game"/> + </div> + <div class="matching" v-else-if="matching"> + <h1><b>{{ matching.name }}</b>を待っています<mk-ellipsis/></h1> + <div class="cancel"> + <el-button round @click="cancel">キャンセル</el-button> + </div> + </div> + <div class="index" v-else> + <h1>Misskey %fa:circle%thell%fa:circle R%</h1> + <p>他のMisskeyユーザーとオセロで対戦しよう</p> + <div class="play"> + <el-button round>フリーマッチ(準備中)</el-button> + <el-button type="primary" round @click="match">指名</el-button> + <details> + <summary>遊び方</summary> + <div> + <p>オセロは、相手と交互に石をボードに置いてゆき、相手の石を挟んでひっくり返しながら、最終的に残った石が多い方が勝ちというボードゲームです。</p> + <dl> + <dt><b>フリーマッチ</b></dt> + <dd>ランダムなユーザーと対戦するモードです。</dd> + <dt><b>指名</b></dt> + <dd>指定したユーザーと対戦するモードです。</dd> + </dl> + </div> + </details> + </div> + <section v-if="invitations.length > 0"> + <h2>対局の招待があります！:</h2> + <div class="invitation" v-for="i in invitations" tabindex="-1" @click="accept(i)"> + <img :src="`${i.parent.avatar_url}?thumbnail&size=32`" alt=""> + <span class="name"><b>{{ i.parent.name }}</b></span> + <span class="username">@{{ i.parent.username }}</span> + <mk-time :time="i.created_at"/> + </div> + </section> + <section v-if="myGames.length > 0"> + <h2>自分の対局</h2> + <div class="game" v-for="g in myGames" tabindex="-1" @click="game = g"> + <img :src="`${g.black_user.avatar_url}?thumbnail&size=32`" alt=""> + <img :src="`${g.white_user.avatar_url}?thumbnail&size=32`" alt=""> + <span><b>{{ g.black_user.name }}</b> vs <b>{{ g.white_user.name }}</b></span> + <span class="state">{{ g.is_ended ? '終了' : '進行中' }}</span> + </div> + </section> + <section v-if="games.length > 0"> + <h2>みんなの対局</h2> + <div class="game" v-for="g in games" tabindex="-1" @click="game = g"> + <img :src="`${g.black_user.avatar_url}?thumbnail&size=32`" alt=""> + <img :src="`${g.white_user.avatar_url}?thumbnail&size=32`" alt=""> + <span><b>{{ g.black_user.name }}</b> vs <b>{{ g.white_user.name }}</b></span> + <span class="state">{{ g.is_ended ? '終了' : '進行中' }}</span> + </div> + </section> + </div> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import XGame from './othello.game.vue'; + +export default Vue.extend({ + components: { + XGame + }, + data() { + return { + game: null, + games: [], + gamesFetching: true, + gamesMoreFetching: false, + myGames: [], + matching: null, + invitations: [], + connection: null, + connectionId: null + }; + }, + mounted() { + this.connection = (this as any).os.streams.othelloStream.getConnection(); + this.connectionId = (this as any).os.streams.othelloStream.use(); + + this.connection.on('matched', this.onMatched); + this.connection.on('invited', this.onInvited); + + (this as any).api('othello/games', { + my: true + }).then(games => { + this.myGames = games; + }); + + (this as any).api('othello/games').then(games => { + this.games = games; + this.gamesFetching = false; + }); + + (this as any).api('othello/invitations').then(invitations => { + this.invitations = this.invitations.concat(invitations); + }); + }, + beforeDestroy() { + this.connection.off('matched', this.onMatched); + this.connection.off('invited', this.onInvited); + (this as any).os.streams.othelloStream.dispose(this.connectionId); + }, + methods: { + match() { + (this as any).apis.input({ + title: 'ユーザー名を入力してください' + }).then(username => { + (this as any).api('users/show', { + username + }).then(user => { + (this as any).api('othello/match', { + user_id: user.id + }).then(res => { + if (res == null) { + this.matching = user; + } else { + this.game = res; + } + }); + }); + }); + }, + cancel() { + this.matching = null; + (this as any).api('othello/match/cancel'); + }, + accept(invitation) { + (this as any).api('othello/match', { + user_id: invitation.parent.id + }).then(game => { + if (game) { + this.game = game; + } + }); + }, + onMatched(game) { + this.game = game; + }, + onInvited(invite) { + this.invitations.unshift(invite); + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +.mk-othello + color #677f84 + + > .matching + > h1 + margin 0 + padding 24px + font-size 20px + text-align center + font-weight normal + + > .cancel + margin 0 auto + padding 24px 0 0 0 + max-width 200px + text-align center + border-top dashed 1px #c4cdd4 + + > .index + > h1 + margin 0 + padding 24px + font-size 24px + text-align center + font-weight normal + color #fff + background linear-gradient(to bottom, #8bca3e, #d6cf31) + + & + p + margin 0 + padding 12px + margin-bottom 12px + text-align center + font-size 14px + border-bottom solid 1px #d3d9dc + + > .play + margin 0 auto + padding 0 16px + max-width 500px + text-align center + + > details + margin 8px 0 + + > div + padding 16px + font-size 14px + text-align left + background #f5f5f5 + border-radius 8px + + > section + margin 0 auto + padding 0 16px 16px 16px + max-width 500px + border-top solid 1px #d3d9dc + + > h2 + margin 0 + padding 16px 0 8px 0 + font-size 16px + font-weight bold + + .invitation + margin 8px 0 + padding 8px + border solid 1px #e1e5e8 + border-radius 6px + cursor pointer + + * + pointer-events none + user-select none + + &:focus + border-color $theme-color + + &:hover + background #f5f5f5 + + &:active + background #eee + + > img + vertical-align bottom + border-radius 100% + + > span + margin 0 8px + line-height 32px + + .game + margin 8px 0 + padding 8px + border solid 1px #e1e5e8 + border-radius 6px + cursor pointer + + * + pointer-events none + user-select none + + &:focus + border-color $theme-color + + &:hover + background #f5f5f5 + + &:active + background #eee + + > img + vertical-align bottom + border-radius 100% + + > span + margin 0 8px + line-height 32px +</style> |