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

298 lines
8.2 KiB
Vue
Raw Normal View History

2018-03-08 10:57:57 +02:00
<template>
<div class="root">
2018-08-02 03:52:47 +03:00
<header><b>{{ game.user1 | userName }}</b> vs <b>{{ game.user2 | userName }}</b></header>
2018-03-08 10:57:57 +02:00
2018-03-11 00:07:17 +02:00
<div>
2018-08-02 01:36:25 +03:00
<p>%i18n:@settings-of-the-game%</p>
2018-03-11 00:07:17 +02:00
<el-card class="map">
<div slot="header">
2018-08-02 01:36:25 +03:00
<el-select :class="$style.mapSelect" v-model="mapName" placeholder="%i18n:@choose-map%" @change="onMapChange">
<el-option label="%i18n:@random%" :value="null"/>
2018-03-11 00:07:17 +02:00
<el-option-group v-for="c in mapCategories" :key="c" :label="c">
<el-option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name">
<span style="float: left">{{ m.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="m.author">(by <i>{{ m.author }}</i>)</span>
</el-option>
</el-option-group>
</el-select>
</div>
<div :class="$style.board" v-if="game.settings.map != null" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
<div v-for="(x, i) in game.settings.map.join('')"
2018-03-11 16:50:17 +02:00
:data-none="x == ' '"
2018-03-11 00:07:17 +02:00
@click="onPixelClick(i, x)"
>
<template v-if="x == 'b'">%fa:circle%</template>
<template v-if="x == 'w'">%fa:circle R%</template>
</div>
</div>
</el-card>
<el-card class="bw">
<div slot="header">
2018-08-02 01:36:25 +03:00
<span>%i18n:@black-or-white%</span>
2018-03-11 00:07:17 +02:00
</div>
2018-08-02 01:36:25 +03:00
<el-radio v-model="game.settings.bw" label="random" @change="updateSettings">%i18n:@random%</el-radio>
<el-radio v-model="game.settings.bw" :label="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user1.name }}{{ '%i18n:@black-is%'.split('{}')[1] }}</el-radio>
<el-radio v-model="game.settings.bw" :label="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user2.name }}{{ '%i18n:@black-is%'.split('{}')[1] }}</el-radio>
2018-03-11 00:07:17 +02:00
</el-card>
<el-card class="rules">
<div slot="header">
2018-08-02 01:36:25 +03:00
<span>%i18n:@rules%</span>
2018-03-11 00:07:17 +02:00
</div>
2018-08-02 01:36:25 +03:00
<mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="%i18n:@is-llotheo%"/>
<mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="%i18n:@looped-map%"/>
<mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="%i18n:@can-put-everywhere%"/>
2018-03-11 00:07:17 +02:00
</el-card>
<el-card class="bot-form" v-if="form">
<div slot="header">
2018-08-02 01:36:25 +03:00
<span>%i18n:@settings-of-the-bot%</span>
2018-03-11 00:07:17 +02:00
</div>
<el-alert v-for="message in messages"
:title="message.text"
:type="message.type"
:key="message.id"
/>
<template v-for="item in form">
<mk-switch v-if="item.type == 'button'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm($event, item)">{{ item.desc || '' }}</mk-switch>
<el-card v-if="item.type == 'radio'" :key="item.id">
<div slot="header">
<span>{{ item.label }}</span>
</div>
<el-radio v-for="(r, i) in item.items" :key="item.id + ':' + i" v-model="item.value" :label="r.value" @change="onChangeForm($event, item)">{{ r.label }}</el-radio>
</el-card>
<el-card v-if="item.type == 'textbox'" :key="item.id">
<div slot="header">
<span>{{ item.label }}</span>
</div>
<el-input v-model="item.value" @change="onChangeForm($event, item)"/>
</el-card>
</template>
</el-card>
2018-03-08 10:57:57 +02:00
</div>
2018-03-08 15:11:08 +02:00
<footer>
<p class="status">
2018-08-02 01:36:25 +03:00
<template v-if="isAccepted && isOpAccepted">%i18n:@this-gane-is-started-soon%<mk-ellipsis/></template>
<template v-if="isAccepted && !isOpAccepted">%i18n:@waiting-for-other%<mk-ellipsis/></template>
<template v-if="!isAccepted && isOpAccepted">%i18n:@waiting-for-me%</template>
<template v-if="!isAccepted && !isOpAccepted">%i18n:@waiting-for-both%<mk-ellipsis/></template>
2018-03-08 15:11:08 +02:00
</p>
<div class="actions">
2018-08-02 01:36:25 +03:00
<el-button @click="exit">%i18n:@cancel%</el-button>
<el-button type="primary" @click="accept" v-if="!isAccepted">%i18n:@ready%</el-button>
<el-button type="primary" @click="cancel" v-if="isAccepted">%i18n:@cancel-ready%</el-button>
2018-03-08 15:11:08 +02:00
</div>
</footer>
2018-03-08 10:57:57 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-07-11 07:47:01 +03:00
import * as maps from '../../../../../../../games/reversi/maps';
2018-03-08 10:57:57 +02:00
export default Vue.extend({
props: ['game', 'connection'],
data() {
return {
o: null,
isLlotheo: false,
mapName: maps.eighteight.name,
2018-03-11 00:07:17 +02:00
maps: maps,
form: null,
messages: []
2018-03-08 10:57:57 +02:00
};
},
computed: {
2018-03-08 15:11:08 +02:00
mapCategories(): string[] {
2018-07-23 08:04:53 +03:00
const categories = Object.values(maps).map(x => x.category);
2018-03-08 15:11:08 +02:00
return categories.filter((item, pos) => categories.indexOf(item) == pos);
},
2018-03-08 10:57:57 +02:00
isAccepted(): boolean {
2018-05-27 07:49:09 +03:00
if (this.game.user1Id == this.$store.state.i.id && this.game.user1Accepted) return true;
if (this.game.user2Id == this.$store.state.i.id && this.game.user2Accepted) return true;
2018-03-08 10:57:57 +02:00
return false;
2018-03-08 11:30:28 +02:00
},
isOpAccepted(): boolean {
2018-05-27 07:49:09 +03:00
if (this.game.user1Id != this.$store.state.i.id && this.game.user1Accepted) return true;
if (this.game.user2Id != this.$store.state.i.id && this.game.user2Accepted) return true;
2018-03-08 11:30:28 +02:00
return false;
2018-03-08 10:57:57 +02:00
}
},
created() {
this.connection.on('change-accepts', this.onChangeAccepts);
this.connection.on('update-settings', this.onUpdateSettings);
2018-03-11 00:07:17 +02:00
this.connection.on('init-form', this.onInitForm);
this.connection.on('message', this.onMessage);
2018-05-27 07:49:09 +03:00
if (this.game.user1Id != this.$store.state.i.id && this.game.settings.form1) this.form = this.game.settings.form1;
if (this.game.user2Id != this.$store.state.i.id && this.game.settings.form2) this.form = this.game.settings.form2;
2018-03-08 10:57:57 +02:00
},
beforeDestroy() {
this.connection.off('change-accepts', this.onChangeAccepts);
this.connection.off('update-settings', this.onUpdateSettings);
2018-03-11 00:07:17 +02:00
this.connection.off('init-form', this.onInitForm);
this.connection.off('message', this.onMessage);
2018-03-08 10:57:57 +02:00
},
methods: {
exit() {
},
accept() {
this.connection.send({
type: 'accept'
});
},
cancel() {
this.connection.send({
type: 'cancel-accept'
});
},
onChangeAccepts(accepts) {
2018-03-29 08:48:47 +03:00
this.game.user1Accepted = accepts.user1;
this.game.user2Accepted = accepts.user2;
2018-03-08 10:57:57 +02:00
this.$forceUpdate();
},
2018-03-10 05:48:41 +02:00
updateSettings() {
2018-03-08 10:57:57 +02:00
this.connection.send({
type: 'update-settings',
settings: this.game.settings
});
},
2018-03-10 05:48:41 +02:00
onUpdateSettings(settings) {
this.game.settings = settings;
2018-03-10 06:42:26 +02:00
if (this.game.settings.map == null) {
this.mapName = null;
} else {
2018-07-23 08:04:53 +03:00
const found = Object.values(maps).find(x => x.data.join('') == this.game.settings.map.join(''));
this.mapName = found ? found.name : '-Custom-';
2018-03-10 06:42:26 +02:00
}
2018-03-10 05:48:41 +02:00
},
2018-03-11 00:07:17 +02:00
onInitForm(x) {
2018-05-27 07:49:09 +03:00
if (x.userId == this.$store.state.i.id) return;
2018-03-11 00:07:17 +02:00
this.form = x.form;
},
onMessage(x) {
2018-05-27 07:49:09 +03:00
if (x.userId == this.$store.state.i.id) return;
2018-03-11 00:07:17 +02:00
this.messages.unshift(x.message);
},
onChangeForm(v, item) {
this.connection.send({
type: 'update-form',
id: item.id,
value: v
});
},
2018-03-10 05:48:41 +02:00
onMapChange(v) {
2018-03-10 06:42:26 +02:00
if (v == null) {
this.game.settings.map = null;
} else {
2018-07-23 08:04:53 +03:00
this.game.settings.map = Object.values(maps).find(x => x.name == v).data;
2018-03-10 06:42:26 +02:00
}
2018-03-08 10:57:57 +02:00
this.$forceUpdate();
2018-03-10 05:48:41 +02:00
this.updateSettings();
},
2018-03-10 05:48:41 +02:00
onPixelClick(pos, pixel) {
const x = pos % this.game.settings.map[0].length;
const y = Math.floor(pos / this.game.settings.map[0].length);
const newPixel =
pixel == ' ' ? '-' :
2018-07-23 08:04:53 +03:00
pixel == '-' ? 'b' :
pixel == 'b' ? 'w' :
' ';
2018-03-10 05:48:41 +02:00
const line = this.game.settings.map[y].split('');
line[x] = newPixel;
this.$set(this.game.settings.map, y, line.join(''));
this.$forceUpdate();
2018-03-10 05:48:41 +02:00
this.updateSettings();
2018-03-08 10:57:57 +02:00
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.root
text-align center
2018-03-11 00:07:17 +02:00
background #f9f9f9
2018-03-08 10:57:57 +02:00
> header
padding 8px
border-bottom dashed 1px #c4cdd4
2018-03-11 00:07:17 +02:00
> div
padding 0 16px
2018-03-08 10:57:57 +02:00
2018-03-11 00:07:17 +02:00
> .map
> .bw
> .rules
> .bot-form
max-width 400px
margin 0 auto 16px auto
2018-03-08 15:11:08 +02:00
> footer
position sticky
bottom 0
padding 16px
background rgba(255, 255, 255, 0.9)
border-top solid 1px #c4cdd4
2018-03-08 10:57:57 +02:00
2018-03-08 15:11:08 +02:00
> .status
margin 0 0 16px 0
2018-03-08 10:57:57 +02:00
</style>
2018-03-11 00:07:17 +02:00
<style lang="stylus" module>
.mapSelect
width 100%
.board
display grid
grid-gap 4px
width 300px
height 300px
margin 0 auto
> div
background transparent
border solid 2px #ddd
border-radius 6px
overflow hidden
cursor pointer
*
pointer-events none
user-select none
width 100%
height 100%
2018-03-11 16:50:17 +02:00
&[data-none]
2018-03-11 00:07:17 +02:00
border-color transparent
</style>
<style lang="stylus">
.el-alert__content
position initial !important
</style>