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

166 lines
3 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-03-08 10:57:57 +02:00
<x-gameroom :game="game"/>
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-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
connectionId: null,
pingClock: null
2018-03-07 04:40:40 +02:00
};
},
2018-03-09 18:48:16 +02:00
watch: {
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.streams.reversiStream.getConnection();
this.connectionId = (this as any).os.streams.reversiStream.use();
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.off('matched', this.onMatched);
(this as any).os.streams.reversiStream.dispose(this.connectionId);
2018-03-11 11:08:26 +02:00
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 => {
this.nav(game, true);
Progress.done();
});
}
},
2018-08-03 16:34:58 +03:00
nav(game, silent) {
2018-08-03 15:30:44 +03:00
this.matching = null;
this.game = game;
2018-08-03 16:34:58 +03:00
if (!silent) {
this.$emit('nav', this.game);
}
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-03-07 10:48:32 +02:00
this.game = game;
}
});
},
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-03-06 18:54:56 +02:00
}
}
});
</script>
2018-03-07 10:48:32 +02:00
<style lang="stylus" scoped>
@import '~const.styl'
2018-08-03 09:59:24 +03:00
root(isDark)
color isDark ? #fff : #677f84
background isDark ? #191b22 : #fff
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
2018-08-03 09:59:24 +03:00
.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
root(true)
.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
root(false)
2018-03-07 10:48:32 +02:00
</style>