:v:

3 files changed, 38 insertions, 3 deletions

diff --git a/src/web/app/mobile/script.ts b/src/web/app/mobile/script.ts
index 27c18c5ae1..2b57b78ada 100644
--- a/src/web/app/mobile/script.ts
+++ b/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 },
diff --git a/src/web/app/mobile/views/components/ui.nav.vue b/src/web/app/mobile/views/components/ui.nav.vue
index a58225a172..ba35a2783d 100644
--- a/src/web/app/mobile/views/components/ui.nav.vue
+++ b/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>
diff --git a/src/web/app/mobile/views/pages/othello.vue b/src/web/app/mobile/views/pages/othello.vue
index 67f4add07f..b110bf309e 100644
--- a/src/web/app/mobile/views/pages/othello.vue
+++ b/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>