✌️

src/client/app/common/views/components/games/reversi/reversi.vue

@@ -10,7 +10,7 @@
 		</div>
 	</div>
 	<div class="index" v-else>
-		<x-index @go="onGo" @matching="onMatching"/>
+		<x-index @go="nav" @matching="onMatching"/>
 	</div>
 </div>
 </template>
@@ -19,6 +19,7 @@
 import Vue from 'vue';
 import XGameroom from './reversi.gameroom.vue';
 import XIndex from './reversi.index.vue';
+import Progress from '../../../../scripts/loading';
 
 export default Vue.extend({
 	components: {
@@ -26,7 +27,12 @@ export default Vue.extend({
 		XIndex
 	},
 
-	props: ['initGame'],
+	props: {
+		gameId: {
+			type: String,
+			required: false
+		}
+	},
 
 	data() {
 		return {
@@ -39,14 +45,15 @@ export default Vue.extend({
 	},
 
 	watch: {
-		game(g) {
-			this.$emit('gamed', g);
-		}
-	},
-
-	created() {
-		if (this.initGame) {
-			this.game = this.initGame;
+		gameId(id) {
+			console.log(id);
+			Progress.start();
+			(this as any).api('games/reversi/games/show', {
+				gameId: id
+			}).then(game => {
+				this.nav(game, true);
+				Progress.done();
+			});
 		}
 	},
 
@@ -78,9 +85,13 @@ export default Vue.extend({
 	},
 
 	methods: {
-		onGo(game) {
+		nav(game, silent) {
 			this.matching = null;
 			this.game = game;
+
+			if (!silent) {
+				this.$emit('nav', this.game);
+			}
 		},
 
 		onMatching(user) {

src/client/app/desktop/script.ts

@@ -34,7 +34,7 @@ import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
 import MkSearch from './views/pages/search.vue';
 import MkTag from './views/pages/tag.vue';
-import MkReversi from './views/pages/reversi.vue';
+import MkReversi from './views/pages/games/reversi.vue';
 import MkShare from './views/pages/share.vue';
 import MkFollow from '../common/views/pages/follow.vue';
 
@@ -65,8 +65,11 @@ init(async (launch) => {
 			{ path: '/search', component: MkSearch },
 			{ path: '/tags/:tag', component: MkTag },
 			{ path: '/share', component: MkShare },
-			{ path: '/reversi', component: MkReversi },
-			{ path: '/reversi/:game', component: MkReversi },
+			{ path: '/reversi', component: MkReversi,
+				children: [{
+					path: ':game', component: MkReversi
+				}]
+			},
 			{ path: '/@:user', component: MkUser },
 			{ path: '/notes/:note', component: MkNote },
 			{ path: '/authorize-follow', component: MkFollow }

src/client/app/desktop/views/pages/games/reversi.vue

@@ -0,0 +1,22 @@
+<template>
+<component :is="ui ? 'mk-ui' : 'div'">
+	<mk-reversi :game-id="$route.params.game" @nav="nav"/>
+</component>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		ui: {
+			default: false
+		}
+	},
+	methods: {
+		nav(game) {
+			history.pushState(null, null, '/reversi/' + game.id);
+		},
+	}
+});
+</script>

src/client/app/desktop/views/pages/reversi.vue

@@ -1,50 +0,0 @@
-<template>
-<component :is="ui ? 'mk-ui' : 'div'">
-	<mk-reversi 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('games/reversi/games/show', {
-				gameId: this.$route.params.game
-			}).then(game => {
-				this.game = game;
-				this.fetching = false;
-
-				Progress.done();
-			});
-		},
-		onGamed(game) {
-			history.pushState(null, null, '/reversi/' + game.id);
-		}
-	}
-});
-</script>

src/client/app/mobile/script.ts

@@ -35,7 +35,7 @@ import MkFavorites from './views/pages/favorites.vue';
 import MkUserLists from './views/pages/user-lists.vue';
 import MkUserList from './views/pages/user-list.vue';
 import MkSettings from './views/pages/settings.vue';
-import MkReversi from './views/pages/reversi.vue';
+import MkReversi from './views/pages/games/reversi.vue';
 import MkTag from './views/pages/tag.vue';
 import MkShare from './views/pages/share.vue';
 import MkFollow from '../common/views/pages/follow.vue';

src/client/app/mobile/views/pages/games/reversi.vue

@@ -0,0 +1,22 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:gamepad%%i18n:@reversi%</span>
+	<mk-reversi :game-id="$route.params.game" @nav="nav"/>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	mounted() {
+		document.title = '%i18n:common.name% %i18n:@reversi%';
+		document.documentElement.style.background = '#fff';
+	},
+	methods: {
+		nav(game) {
+			history.pushState(null, null, '/reversi/' + game.id);
+		}
+	}
+});
+</script>

src/client/app/mobile/views/pages/reversi.vue

@@ -1,50 +0,0 @@
-<template>
-<mk-ui>
-	<span slot="header">%fa:gamepad%%i18n:@reversi%</span>
-	<mk-reversi 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 = '%i18n:common.name% %i18n:@reversi%';
-		document.documentElement.style.background = '#fff';
-	},
-	methods: {
-		fetch() {
-			if (this.$route.params.game == null) return;
-
-			Progress.start();
-			this.fetching = true;
-
-			(this as any).api('games/reversi/games/show', {
-				gameId: this.$route.params.game
-			}).then(game => {
-				this.game = game;
-				this.fetching = false;
-
-				Progress.done();
-			});
-		},
-		onGamed(game) {
-			history.pushState(null, null, '/reversi/' + game.id);
-		}
-	}
-});
-</script>