This commit is contained in:
syuilo 2018-08-05 13:40:26 +09:00
parent b68f74f39c
commit 128a201b9d
6 changed files with 84 additions and 23 deletions

View file

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

View file

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

View file

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

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="vchtoekanapleubgzioubdtmlkribzfd"> <div class="vchtoekanapleubgzioubdtmlkribzfd">
<div v-if="game"> <div v-if="game">
<x-gameroom :game="game"/> <x-gameroom :game="game" :self-nav="selfNav" @go-index="goIndex"/>
</div> </div>
<div class="matching" v-else-if="matching"> <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> <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: { gameId: {
type: String, type: String,
required: false 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', { (this as any).api('games/reversi/games/show', {
gameId: this.gameId gameId: this.gameId
}).then(game => { }).then(game => {
this.nav(game, true); this.game = game;
Progress.done(); Progress.done();
}); });
} }
}, },
nav(game, silent) { async nav(game, actualNav = true) {
this.matching = null; if (this.selfNav) {
this.game = game; //
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.game = game;
this.$emit('nav', this.game); } else {
this.$emit('nav', game, actualNav);
} }
}, },
@ -125,7 +136,8 @@ export default Vue.extend({
}).then(game => { }).then(game => {
if (game) { if (game) {
this.matching = null; this.matching = null;
this.game = game;
this.nav(game);
} }
}); });
}, },
@ -133,6 +145,11 @@ export default Vue.extend({
onMatched(game) { onMatched(game) {
this.matching = null; this.matching = null;
this.game = game; this.game = game;
this.nav(game, false);
},
goIndex() {
this.nav(null);
} }
} }
}); });

View file

@ -1,6 +1,6 @@
<template> <template>
<component :is="ui ? 'mk-ui' : 'div'"> <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> </component>
</template> </template>
@ -14,9 +14,14 @@ export default Vue.extend({
} }
}, },
methods: { methods: {
nav(game) { nav(game, actualNav) {
history.pushState(null, null, '/reversi/' + game.id); 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> </script>

View file

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