From cbcf3fd7f1dd8a8a6f92d598712c0f6d97e227f9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 3 Aug 2018 22:34:58 +0900
Subject: [PATCH] :v:

---
 locales/ja.yml                                | 12 ++---
 .../components/games/reversi/reversi.vue      | 33 ++++++++----
 src/client/app/desktop/script.ts              |  9 ++--
 .../app/desktop/views/pages/games/reversi.vue | 22 ++++++++
 .../app/desktop/views/pages/reversi.vue       | 50 -------------------
 src/client/app/mobile/script.ts               |  2 +-
 .../app/mobile/views/pages/games/reversi.vue  | 22 ++++++++
 src/client/app/mobile/views/pages/reversi.vue | 50 -------------------
 8 files changed, 79 insertions(+), 121 deletions(-)
 create mode 100644 src/client/app/desktop/views/pages/games/reversi.vue
 delete mode 100644 src/client/app/desktop/views/pages/reversi.vue
 create mode 100644 src/client/app/mobile/views/pages/games/reversi.vue
 delete mode 100644 src/client/app/mobile/views/pages/reversi.vue

diff --git a/locales/ja.yml b/locales/ja.yml
index 9dfff667ae..4cbee25128 100644
--- a/locales/ja.yml
+++ b/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:
diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue
index 4169a5465a..60d46307e8 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/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) {
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 297100e0e0..2526c2b933 100644
--- a/src/client/app/desktop/script.ts
+++ b/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 }
diff --git a/src/client/app/desktop/views/pages/games/reversi.vue b/src/client/app/desktop/views/pages/games/reversi.vue
new file mode 100644
index 0000000000..590bda2d86
--- /dev/null
+++ b/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>
diff --git a/src/client/app/desktop/views/pages/reversi.vue b/src/client/app/desktop/views/pages/reversi.vue
deleted file mode 100644
index b484b81b5d..0000000000
--- a/src/client/app/desktop/views/pages/reversi.vue
+++ /dev/null
@@ -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>
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index cb43f9d520..af885e5007 100644
--- a/src/client/app/mobile/script.ts
+++ b/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';
diff --git a/src/client/app/mobile/views/pages/games/reversi.vue b/src/client/app/mobile/views/pages/games/reversi.vue
new file mode 100644
index 0000000000..7118644ef3
--- /dev/null
+++ b/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>
diff --git a/src/client/app/mobile/views/pages/reversi.vue b/src/client/app/mobile/views/pages/reversi.vue
deleted file mode 100644
index a63f84aba2..0000000000
--- a/src/client/app/mobile/views/pages/reversi.vue
+++ /dev/null
@@ -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>