e159f15600
* wip * wip? * ? * streamingのuser storage updateイベントを監視して更新 * 必要な時以外はストレージを更新しない * fix? * wip * fix * fix
78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
<template>
|
|
<div v-if="game == null"><MkLoading/></div>
|
|
<GameSetting v-else-if="!game.isStarted" :init-game="game" :connection="connection"/>
|
|
<GameBoard v-else :init-game="game" :connection="connection"/>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, markRaw } from 'vue';
|
|
import GameSetting from './game.setting.vue';
|
|
import GameBoard from './game.board.vue';
|
|
import * as os from '@/os';
|
|
import { stream } from '@/stream';
|
|
import * as symbols from '@/symbols';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
GameSetting,
|
|
GameBoard,
|
|
},
|
|
|
|
props: {
|
|
gameId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
[symbols.PAGE_INFO]: {
|
|
title: this.$ts._reversi.reversi,
|
|
icon: 'fas fa-gamepad'
|
|
},
|
|
game: null,
|
|
connection: null,
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
gameId() {
|
|
this.fetch();
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.fetch();
|
|
},
|
|
|
|
beforeUnmount() {
|
|
if (this.connection) {
|
|
this.connection.dispose();
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
fetch() {
|
|
os.api('games/reversi/games/show', {
|
|
gameId: this.gameId
|
|
}).then(game => {
|
|
this.game = game;
|
|
|
|
if (this.connection) {
|
|
this.connection.dispose();
|
|
}
|
|
this.connection = markRaw(stream.useChannel('gamesReversiGame', {
|
|
gameId: this.game.id
|
|
}));
|
|
this.connection.on('started', this.onStarted);
|
|
});
|
|
},
|
|
|
|
onStarted(game) {
|
|
Object.assign(this.game, game);
|
|
},
|
|
}
|
|
});
|
|
</script>
|