✌️

src/web/app/common/views/components/othello.vue

@@ -67,6 +67,7 @@ export default Vue.extend({
 	components: {
 		XGameroom
 	},
+	props: ['initGame'],
 	data() {
 		return {
 			game: null,
@@ -80,6 +81,16 @@ export default Vue.extend({
 			connectionId: null
 		};
 	},
+	watch: {
+		game(g) {
+			this.$emit('gamed', g);
+		}
+	},
+	created() {
+		if (this.initGame) {
+			this.game = this.initGame;
+		}
+	},
 	mounted() {
 		this.connection = (this as any).os.streams.othelloStream.getConnection();
 		this.connectionId = (this as any).os.streams.othelloStream.use();
@@ -162,6 +173,7 @@ export default Vue.extend({
 
 .mk-othello
 	color #677f84
+	background #fff
 
 	> .matching
 		> h1

src/web/app/desktop/script.ts

@@ -28,6 +28,7 @@ import MkHomeCustomize from './views/pages/home-customize.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkPost from './views/pages/post.vue';
 import MkSearch from './views/pages/search.vue';
+import MkOthello from './views/pages/othello.vue';
 
 /**
  * init
@@ -80,6 +81,8 @@ init(async (launch) => {
 		{ path: '/i/drive/folder/:folder', component: MkDrive },
 		{ path: '/selectdrive', component: MkSelectDrive },
 		{ path: '/search', component: MkSearch },
+		{ path: '/othello', component: MkOthello },
+		{ path: '/othello/:game', component: MkOthello },
 		{ path: '/:user', component: MkUser },
 		{ path: '/:user/:post', component: MkPost }
 	]);

src/web/app/desktop/views/components/game-window.vue

@@ -1,14 +1,27 @@
 <template>
-<mk-window ref="window" width="500px" height="560px" @closed="$destroy">
+<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
 	<span slot="header" :class="$style.header">%fa:gamepad%オセロ</span>
-	<mk-othello :class="$style.content"/>
+	<mk-othello :class="$style.content" @gamed="g => game = g"/>
 </mk-window>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-export default Vue.extend({
+import { url } from '../../../config';
 
+export default Vue.extend({
+	data() {
+		return {
+			game: null
+		};
+	},
+	computed: {
+		popout(): string {
+			return this.game
+				? `${url}/othello/${this.game.id}`
+				: `${url}/othello`;
+		}
+	}
 });
 </script>
 

src/web/app/desktop/views/pages/othello.vue

@@ -0,0 +1,50 @@
+<template>
+<component :is="ui ? 'mk-ui' : 'div'">
+	<mk-othello v-if="!fetching" :init-game="game" @gamed="onGamed"/>
+</component>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	props: {
+		ui: {
+			default: false
+		}
+	},
+	data() {
+		return {
+			fetching: false,
+			game: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			if (this.$route.params.game == null) return;
+
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('othello/games/show', {
+				game_id: this.$route.params.game
+			}).then(game => {
+				this.game = game;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		},
+		onGamed(game) {
+			history.pushState(null, null, '/othello/' + game.id);
+		}
+	}
+});
+</script>

src/web/app/mobile/script.ts

@@ -69,7 +69,8 @@ init((launch) => {
 		{ path: '/i/drive/file/:file', component: MkDrive },
 		{ path: '/selectdrive', component: MkSelectDrive },
 		{ path: '/search', component: MkSearch },
-		{ path: '/game/othello', component: MkOthello },
+		{ path: '/othello', component: MkOthello },
+		{ path: '/othello/:game', component: MkOthello },
 		{ path: '/:user', component: MkUser },
 		{ path: '/:user/followers', component: MkFollowers },
 		{ path: '/:user/following', component: MkFollowing },

src/web/app/mobile/views/components/ui.nav.vue

@@ -18,7 +18,7 @@
 					<li><router-link to="/">%fa:home%%i18n:mobile.tags.mk-ui-nav.home%%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
-					<li><router-link to="/game/othello">%fa:gamepad%ゲーム%fa:angle-right%</router-link></li>
+					<li><router-link to="/othello">%fa:gamepad%ゲーム%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
 					<li><a :href="chUrl" target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li>

src/web/app/mobile/views/pages/othello.vue

@@ -1,16 +1,50 @@
 <template>
 <mk-ui>
 	<span slot="header">%fa:gamepad%オセロ</span>
-	<mk-othello/>
+	<mk-othello v-if="!fetching" :init-game="game" @gamed="onGamed"/>
 </mk-ui>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
 export default Vue.extend({
+	data() {
+		return {
+			fetching: false,
+			game: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
 	mounted() {
 		document.title = 'Misskey オセロ';
 		document.documentElement.style.background = '#fff';
+	},
+	methods: {
+		fetch() {
+			if (this.$route.params.game == null) return;
+
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('othello/games/show', {
+				game_id: this.$route.params.game
+			}).then(game => {
+				this.game = game;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		},
+		onGamed(game) {
+			history.pushState(null, null, '/othello/' + game.id);
+		}
 	}
 });
 </script>