165 lines
3 KiB
Vue
165 lines
3 KiB
Vue
<template>
|
|
<div class="vchtoekanapleubgzioubdtmlkribzfd">
|
|
<div v-if="game">
|
|
<x-gameroom :game="game"/>
|
|
</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>
|
|
<div class="cancel">
|
|
<form-button round @click="cancel">%i18n:@matching.cancel%</form-button>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="gameId">
|
|
...
|
|
</div>
|
|
<div class="index" v-else>
|
|
<x-index @go="nav" @matching="onMatching"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
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: {
|
|
XGameroom,
|
|
XIndex
|
|
},
|
|
|
|
props: {
|
|
gameId: {
|
|
type: String,
|
|
required: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
game: null,
|
|
matching: null,
|
|
connection: null,
|
|
connectionId: null,
|
|
pingClock: null
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
gameId() {
|
|
this.fetch();
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.fetch();
|
|
|
|
if (this.$store.getters.isSignedIn) {
|
|
this.connection = (this as any).os.streams.reversiStream.getConnection();
|
|
this.connectionId = (this as any).os.streams.reversiStream.use();
|
|
|
|
this.connection.on('matched', this.onMatched);
|
|
|
|
this.pingClock = setInterval(() => {
|
|
if (this.matching) {
|
|
this.connection.send({
|
|
type: 'ping',
|
|
id: this.matching.id
|
|
});
|
|
}
|
|
}, 3000);
|
|
}
|
|
},
|
|
|
|
beforeDestroy() {
|
|
if (this.connection) {
|
|
this.connection.off('matched', this.onMatched);
|
|
(this as any).os.streams.reversiStream.dispose(this.connectionId);
|
|
|
|
clearInterval(this.pingClock);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
fetch() {
|
|
if (this.gameId == null) {
|
|
this.game = null;
|
|
} else {
|
|
Progress.start();
|
|
(this as any).api('games/reversi/games/show', {
|
|
gameId: this.gameId
|
|
}).then(game => {
|
|
this.nav(game, true);
|
|
Progress.done();
|
|
});
|
|
}
|
|
},
|
|
|
|
nav(game, silent) {
|
|
this.matching = null;
|
|
this.game = game;
|
|
|
|
if (!silent) {
|
|
this.$emit('nav', this.game);
|
|
}
|
|
},
|
|
|
|
onMatching(user) {
|
|
this.matching = user;
|
|
},
|
|
|
|
cancel() {
|
|
this.matching = null;
|
|
(this as any).api('games/reversi/match/cancel');
|
|
},
|
|
|
|
accept(invitation) {
|
|
(this as any).api('games/reversi/match', {
|
|
userId: invitation.parent.id
|
|
}).then(game => {
|
|
if (game) {
|
|
this.matching = null;
|
|
this.game = game;
|
|
}
|
|
});
|
|
},
|
|
|
|
onMatched(game) {
|
|
this.matching = null;
|
|
this.game = game;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~const.styl'
|
|
|
|
root(isDark)
|
|
color isDark ? #fff : #677f84
|
|
background isDark ? #191b22 : #fff
|
|
|
|
> .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
|
|
|
|
.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
|
|
root(true)
|
|
|
|
.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
|
|
root(false)
|
|
|
|
</style>
|