Sharkey/src/web/app/common/views/components/othello.room.vue

199 lines
5.1 KiB
Vue
Raw Normal View History

2018-03-08 10:57:57 +02:00
<template>
<div class="root">
<header><b>{{ game.user1.name }}</b> vs <b>{{ game.user2.name }}</b></header>
<p>ゲームの設定</p>
2018-03-09 11:11:10 +02:00
<el-select class="map" v-model="mapName" placeholder="マップを選択" @change="onMapChange">
2018-03-08 15:11:08 +02:00
<el-option-group v-for="c in mapCategories" :key="c" :label="c">
2018-03-09 11:11:10 +02:00
<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>
2018-03-08 15:11:08 +02:00
</el-option-group>
2018-03-08 10:57:57 +02:00
</el-select>
2018-03-09 11:11:10 +02:00
<div class="board" :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-08 10:57:57 +02:00
:class="{ none: x == ' ' }"
>
<template v-if="x == 'b'">%fa:circle%</template>
<template v-if="x == 'w'">%fa:circle R%</template>
</div>
</div>
<div class="rules">
<mk-switch v-model="game.settings.is_llotheo" @change="onIsLlotheoChange" text="石の少ない方が勝ち(ロセオ)"/>
<div>
<el-radio v-model="game.settings.bw" label="random" @change="onBwChange">ランダム</el-radio>
<el-radio v-model="game.settings.bw" :label="1" @change="onBwChange">{{ game.user1.name }}が先行</el-radio>
<el-radio v-model="game.settings.bw" :label="2" @change="onBwChange">{{ game.user2.name }}が先行</el-radio>
</div>
2018-03-08 10:57:57 +02:00
</div>
2018-03-08 15:11:08 +02:00
<footer>
<p class="status">
<template v-if="isAccepted && isOpAccepted">ゲームは数秒後に開始されます<mk-ellipsis/></template>
<template v-if="isAccepted && !isOpAccepted">相手の準備が完了するのを待っています<mk-ellipsis/></template>
<template v-if="!isAccepted && isOpAccepted">あなたの準備が完了するのを待っています</template>
<template v-if="!isAccepted && !isOpAccepted">準備中<mk-ellipsis/></template>
</p>
<div class="actions">
<el-button @click="exit">キャンセル</el-button>
<el-button type="primary" @click="accept" v-if="!isAccepted">準備完了</el-button>
<el-button type="primary" @click="cancel" v-if="isAccepted">準備続行</el-button>
</div>
</footer>
2018-03-08 10:57:57 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import * as maps from '../../../../../common/othello/maps';
export default Vue.extend({
props: ['game', 'connection'],
data() {
return {
o: null,
isLlotheo: false,
mapName: maps.eighteight.name,
maps: maps
};
},
computed: {
2018-03-08 15:11:08 +02:00
mapCategories(): string[] {
const categories = Object.entries(maps).map(x => x[1].category);
return categories.filter((item, pos) => categories.indexOf(item) == pos);
},
2018-03-08 10:57:57 +02:00
isAccepted(): boolean {
if (this.game.user1_id == (this as any).os.i.id && this.game.user1_accepted) return true;
if (this.game.user2_id == (this as any).os.i.id && this.game.user2_accepted) return true;
return false;
2018-03-08 11:30:28 +02:00
},
isOpAccepted(): boolean {
if (this.game.user1_id != (this as any).os.i.id && this.game.user1_accepted) return true;
if (this.game.user2_id != (this as any).os.i.id && this.game.user2_accepted) return true;
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);
},
beforeDestroy() {
this.connection.off('change-accepts', this.onChangeAccepts);
this.connection.off('update-settings', this.onUpdateSettings);
},
methods: {
exit() {
},
accept() {
this.connection.send({
type: 'accept'
});
},
cancel() {
this.connection.send({
type: 'cancel-accept'
});
},
onChangeAccepts(accepts) {
this.game.user1_accepted = accepts.user1;
this.game.user2_accepted = accepts.user2;
this.$forceUpdate();
},
onUpdateSettings(settings) {
this.game.settings = settings;
2018-03-09 11:46:51 +02:00
this.mapName = Object.entries(maps).find(x => x[1].data.join('') == this.game.settings.map.join(''))[1].name;
2018-03-08 10:57:57 +02:00
},
onMapChange(v) {
2018-03-09 11:11:10 +02:00
this.game.settings.map = Object.entries(maps).find(x => x[1].name == v)[1].data;
2018-03-08 10:57:57 +02:00
this.connection.send({
type: 'update-settings',
settings: this.game.settings
});
this.$forceUpdate();
},
onIsLlotheoChange(v) {
this.connection.send({
type: 'update-settings',
settings: this.game.settings
});
this.$forceUpdate();
},
onBwChange(v) {
this.connection.send({
type: 'update-settings',
settings: this.game.settings
});
this.$forceUpdate();
2018-03-08 10:57:57 +02:00
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.root
text-align center
> header
padding 8px
border-bottom dashed 1px #c4cdd4
2018-03-09 11:11:10 +02:00
> .map
width 300px
2018-03-08 10:57:57 +02:00
> .board
display grid
grid-gap 4px
width 300px
height 300px
margin 16px auto
> div
background transparent
2018-03-08 15:11:08 +02:00
border solid 2px #ddd
2018-03-08 10:57:57 +02:00
border-radius 6px
overflow hidden
*
pointer-events none
user-select none
width 100%
height 100%
&.none
border-color transparent
> .rules
max-width 300px
2018-03-08 15:11:08 +02:00
margin 0 auto 32px auto
> 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>