✌️

locales/ja.yml

@@ -47,7 +47,7 @@ common:
     day: "日"
     hours: "時"
     minutes: "分"
-  
+
   weekday-short:
     sunday: "日"
     monday: "月"
@@ -151,7 +151,7 @@ common:
     stack-left: "左に重ねる"
     pop-right: "右に出す"
 
-auth/views/form.vue: 
+auth/views/form.vue:
   share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
   account-read: "アカウントの情報を見る。"
@@ -165,7 +165,7 @@ auth/views/form.vue:
   notification-write: "通知を操作する。"
   cancel: "キャンセル"
   accept: "アクセスを許可"
-  
+
 auth/views/index.vue:
   loading: "読み込み中"
   denied: "アプリケーションの連携をキャンセルしました。"
@@ -176,7 +176,7 @@ auth/views/index.vue:
   please-go-back: "アプリケーションに戻って、やっていってください。"
   error: "セッションが存在しません。"
   sign-in: "サインインしてください"
-  
+
 common/views/components/games/reversi/reversi.vue:
   matching:
     waiting-for: "{}を待っています"
@@ -1181,7 +1181,7 @@ mobile/views/pages/widgets/activity.vue:
 
 mobile/views/pages/share.vue:
   share-with: "{}で共有"
-  
+
 mobile/views/pages/messaging.vue:
   messaging: "メッセージ"
 
@@ -1202,7 +1202,7 @@ mobile/views/pages/notifications.vue:
   notifications: "通知"
   read-all: "すべての通知を既読にしますか？"
 
-mobile/views/pages/reversi.vue:
+mobile/views/pages/games/reversi.vue:
   reversi: "リバーシ"
 
 mobile/views/pages/settings/settings.profile.vue:

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>