#2080 など

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

@@ -1,5 +1,6 @@
 <template>
 <div class="xqnhankfuuilcwvhgsopeqncafzsquya">
+	<button class="go-index" v-if="selfNav" @click="goIndex">%fa:arrow-left%</button>
 	<header><b><router-link :to="blackUser | userPage">{{ blackUser | userName }}</router-link></b>(%i18n:common.reversi.black%) vs <b><router-link :to="whiteUser | userPage">{{ whiteUser | userName }}</router-link></b>(%i18n:common.reversi.white%)</header>
 
 	<div style="overflow: hidden">
@@ -69,7 +70,20 @@ import Reversi, { Color } from '../../../../../../../games/reversi/core';
 import { url } from '../../../../../config';
 
 export default Vue.extend({
-	props: ['initGame', 'connection'],
+	props: {
+		initGame: {
+			type: Object,
+			require: true
+		},
+		connection: {
+			type: Object,
+			require: true
+		},
+		selfNav: {
+			type: Boolean,
+			require: true
+		}
+	},
 
 	data() {
 		return {
@@ -276,6 +290,10 @@ export default Vue.extend({
 			(this as any).api('games/reversi/games/surrender', {
 				gameId: this.game.id
 			});
+		},
+
+		goIndex() {
+			this.$emit('go-index');
 		}
 	}
 });
@@ -287,6 +305,14 @@ export default Vue.extend({
 root(isDark)
 	text-align center
 
+	> .go-index
+		position absolute
+		top 0
+		left 0
+		z-index 1
+		width 42px
+		height 42px
+
 	> header
 		padding 8px
 		border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4

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

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<x-room v-if="!g.isStarted" :game="g" :connection="connection"/>
-	<x-game v-else :init-game="g" :connection="connection"/>
+	<x-game v-else :init-game="g" :connection="connection" :self-nav="selfNav" @go-index="goIndex"/>
 </div>
 </template>
 
@@ -16,7 +16,16 @@ export default Vue.extend({
 		XGame,
 		XRoom
 	},
-	props: ['game'],
+	props: {
+		game: {
+			type: Object,
+			required: true
+		},
+		selfNav: {
+			type: Boolean,
+			require: true
+		}
+	},
 	data() {
 		return {
 			connection: null,
@@ -36,6 +45,9 @@ export default Vue.extend({
 		onStarted(game) {
 			Object.assign(this.g, game);
 			this.$forceUpdate();
+		},
+		goIndex() {
+			this.$emit('go-index');
 		}
 	}
 });

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

@@ -96,11 +96,7 @@ export default Vue.extend({
 
 	methods: {
 		go(game) {
-			(this as any).api('games/reversi/games/show', {
-				gameId: game.id
-			}).then(game => {
-				this.$emit('go', game);
-			});
+			this.$emit('go', game);
 		},
 
 		match() {

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

@@ -1,7 +1,7 @@
 <template>
 <div class="vchtoekanapleubgzioubdtmlkribzfd">
 	<div v-if="game">
-		<x-gameroom :game="game"/>
+		<x-gameroom :game="game" :self-nav="selfNav" @go-index="goIndex"/>
 	</div>
 	<div class="matching" v-else-if="matching">
 		<h1>{{ '%i18n:@matching.waiting-for%'.split('{}')[0] }}<b>{{ matching | userName }}</b>{{ '%i18n:@matching.waiting-for%'.split('{}')[1] }}<mk-ellipsis/></h1>
@@ -34,6 +34,11 @@ export default Vue.extend({
 		gameId: {
 			type: String,
 			required: false
+		},
+		selfNav: {
+			type: Boolean,
+			require: false,
+			default: true
 		}
 	},
 
@@ -95,18 +100,24 @@ export default Vue.extend({
 				(this as any).api('games/reversi/games/show', {
 					gameId: this.gameId
 				}).then(game => {
-					this.nav(game, true);
+					this.game = game;
 					Progress.done();
 				});
 			}
 		},
 
-		nav(game, silent) {
-			this.matching = null;
-			this.game = game;
+		async nav(game, actualNav = true) {
+			if (this.selfNav) {
+				// 受け取ったゲーム情報が省略されたものなら完全な情報を取得する
+				if (game != null && (game.settings == null || game.settings.map == null)) {
+					game = await (this as any).api('games/reversi/games/show', {
+						gameId: game.id
+					});
+				}
 
-			if (!silent) {
-				this.$emit('nav', this.game);
+				this.game = game;
+			} else {
+				this.$emit('nav', game, actualNav);
 			}
 		},
 
@@ -125,7 +136,8 @@ export default Vue.extend({
 			}).then(game => {
 				if (game) {
 					this.matching = null;
-					this.game = game;
+
+					this.nav(game);
 				}
 			});
 		},
@@ -133,6 +145,11 @@ export default Vue.extend({
 		onMatched(game) {
 			this.matching = null;
 			this.game = game;
+			this.nav(game, false);
+		},
+
+		goIndex() {
+			this.nav(null);
 		}
 	}
 });

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

@@ -1,6 +1,6 @@
 <template>
 <component :is="ui ? 'mk-ui' : 'div'">
-	<mk-reversi :game-id="$route.params.game" @nav="nav"/>
+	<mk-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/>
 </component>
 </template>
 
@@ -14,9 +14,14 @@ export default Vue.extend({
 		}
 	},
 	methods: {
-		nav(game) {
-			history.pushState(null, null, '/reversi/' + game.id);
-		},
+		nav(game, actualNav) {
+			if (actualNav) {
+				this.$router.push('/reversi/' + game.id);
+			} else {
+				// TODO: https://github.com/vuejs/vue-router/issues/703
+				this.$router.push('/reversi/' + game.id);
+			}
+		}
 	}
 });
 </script>

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

@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header">%fa:gamepad%%i18n:@reversi%</span>
-	<mk-reversi :game-id="$route.params.game" @nav="nav"/>
+	<mk-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/>
 </mk-ui>
 </template>
 
@@ -14,8 +14,13 @@ export default Vue.extend({
 		document.documentElement.style.background = '#fff';
 	},
 	methods: {
-		nav(game) {
-			history.pushState(null, null, '/reversi/' + game.id);
+		nav(game, actualNav) {
+			if (actualNav) {
+				this.$router.push('/reversi/' + game.id);
+			} else {
+				// TODO: https://github.com/vuejs/vue-router/issues/703
+				this.$router.push('/reversi/' + game.id);
+			}
 		}
 	}
 });