sharkey/src/client/app/common/views/components/games/reversi/reversi.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>