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

175 lines
3.2 KiB
Vue
Raw Normal View History

2018-03-06 18:54:56 +02:00
<template>
2018-08-03 09:59:24 +03:00
<div class="vchtoekanapleubgzioubdtmlkribzfd">
2018-03-07 04:40:40 +02:00
<div v-if="game">
2018-08-05 07:40:26 +03:00
<x-gameroom :game="game" :self-nav="selfNav" @go-index="goIndex"/>
2018-03-07 04:40:40 +02:00
</div>
2018-03-07 10:48:32 +02:00
<div class="matching" v-else-if="matching">
2018-08-02 03:52:47 +03:00
<h1>{{ '%i18n:@matching.waiting-for%'.split('{}')[0] }}<b>{{ matching | userName }}</b>{{ '%i18n:@matching.waiting-for%'.split('{}')[1] }}<mk-ellipsis/></h1>
2018-03-07 10:48:32 +02:00
<div class="cancel">
2018-08-02 18:36:29 +03:00
<form-button round @click="cancel">%i18n:@matching.cancel%</form-button>
2018-03-07 10:48:32 +02:00
</div>
2018-03-06 18:54:56 +02:00
</div>
2018-08-03 19:47:57 +03:00
<div v-else-if="gameId">
2018-08-03 19:03:48 +03:00
...
</div>
2018-03-07 10:48:32 +02:00
<div class="index" v-else>
2018-08-03 16:34:58 +03:00
<x-index @go="nav" @matching="onMatching"/>
2018-03-06 18:54:56 +02:00
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-06-17 02:10:54 +03:00
import XGameroom from './reversi.gameroom.vue';
2018-08-03 15:30:44 +03:00
import XIndex from './reversi.index.vue';
2018-08-03 16:34:58 +03:00
import Progress from '../../../../scripts/loading';
2018-03-07 04:40:40 +02:00
2018-03-06 18:54:56 +02:00
export default Vue.extend({
2018-03-07 04:40:40 +02:00
components: {
2018-08-03 15:30:44 +03:00
XGameroom,
XIndex
2018-03-07 04:40:40 +02:00
},
2018-08-03 16:34:58 +03:00
props: {
gameId: {
type: String,
required: false
2018-08-05 07:40:26 +03:00
},
selfNav: {
type: Boolean,
require: false,
default: true
2018-08-03 16:34:58 +03:00
}
},
2018-03-07 04:40:40 +02:00
data() {
return {
game: null,
2018-03-07 10:48:32 +02:00
matching: null,
2018-03-07 04:40:40 +02:00
connection: null,
2018-03-11 11:08:26 +02:00
pingClock: null
2018-03-07 04:40:40 +02:00
};
},
2018-03-09 18:48:16 +02:00
watch: {
2018-08-04 06:35:57 +03:00
game() {
this.$emit('gamed', this.game);
},
2018-08-03 19:03:48 +03:00
gameId() {
this.fetch();
2018-03-09 18:48:16 +02:00
}
},
2018-03-07 04:40:40 +02:00
mounted() {
2018-08-03 19:03:48 +03:00
this.fetch();
if (this.$store.getters.isSignedIn) {
this.connection = (this as any).os.stream.useSharedConnection('gamesReversi');
2018-03-07 04:40:40 +02:00
this.connection.on('matched', this.onMatched);
this.pingClock = setInterval(() => {
if (this.matching) {
this.connection.send({
type: 'ping',
id: this.matching.id
});
}
}, 3000);
}
2018-03-07 04:40:40 +02:00
},
2018-03-07 04:40:40 +02:00
beforeDestroy() {
if (this.connection) {
this.connection.dispose();
clearInterval(this.pingClock);
}
2018-03-07 04:40:40 +02:00
},
2018-03-07 04:40:40 +02:00
methods: {
2018-08-03 19:03:48 +03:00
fetch() {
if (this.gameId == null) {
this.game = null;
} else {
Progress.start();
(this as any).api('games/reversi/games/show', {
gameId: this.gameId
}).then(game => {
2018-08-05 07:40:26 +03:00
this.game = game;
2018-08-03 19:03:48 +03:00
Progress.done();
});
}
},
2018-08-05 07:40:26 +03:00
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
});
}
2018-08-03 16:34:58 +03:00
2018-08-05 07:40:26 +03:00
this.game = game;
} else {
this.$emit('nav', game, actualNav);
2018-08-03 16:34:58 +03:00
}
2018-03-09 11:29:27 +02:00
},
2018-08-03 15:30:44 +03:00
onMatching(user) {
this.matching = user;
2018-03-07 04:40:40 +02:00
},
2018-03-07 10:48:32 +02:00
cancel() {
this.matching = null;
2018-07-07 13:01:33 +03:00
(this as any).api('games/reversi/match/cancel');
2018-03-07 10:48:32 +02:00
},
2018-03-07 10:48:32 +02:00
accept(invitation) {
2018-07-07 13:01:33 +03:00
(this as any).api('games/reversi/match', {
2018-03-29 08:48:47 +03:00
userId: invitation.parent.id
2018-03-07 10:48:32 +02:00
}).then(game => {
if (game) {
2018-03-11 11:08:26 +02:00
this.matching = null;
2018-08-05 07:40:26 +03:00
this.nav(game);
2018-03-07 10:48:32 +02:00
}
});
},
2018-03-07 04:40:40 +02:00
onMatched(game) {
2018-03-11 11:08:26 +02:00
this.matching = null;
2018-03-07 04:40:40 +02:00
this.game = game;
2018-08-05 07:40:26 +03:00
this.nav(game, false);
},
goIndex() {
this.nav(null);
2018-03-06 18:54:56 +02:00
}
}
});
</script>
2018-03-07 10:48:32 +02:00
<style lang="stylus" scoped>
2018-09-28 13:59:19 +03:00
.vchtoekanapleubgzioubdtmlkribzfd
color var(--text)
background var(--bg)
2018-03-07 10:48:32 +02:00
> .matching
> h1
margin 0
padding 24px
font-size 20px
text-align center
font-weight normal
> .cancel
margin 0 auto
padding 24px 0 0 0
max-width 200px
text-align center
border-top dashed 1px #c4cdd4
</style>