Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement othello map editing

Browse Source
This commit is contained in:
syuilo 2018-03-10 12:48:41 +09:00
parent 13b27b15d9
commit 59fbf693ed
2 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/othello/core.ts
View File

@ -69,6 +69,7 @@ export default class Othello {
* 黒石の比率 * 黒石の比率
*/ */
public get blackP() { public get blackP() {
if (this.blackCount == 0 && this.whiteCount == 0) return 0;
return this.blackCount / (this.blackCount + this.whiteCount); return this.blackCount / (this.blackCount + this.whiteCount);
} }
@ -76,6 +77,7 @@ export default class Othello {
* 白石の比率 * 白石の比率
*/ */
public get whiteP() { public get whiteP() {
if (this.blackCount == 0 && this.whiteCount == 0) return 0;
return this.whiteCount / (this.blackCount + this.whiteCount); return this.whiteCount / (this.blackCount + this.whiteCount);
} }

50
src/web/app/common/views/components/othello.room.vue
View File

@ -16,6 +16,7 @@
<div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }"> <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('')" <div v-for="(x, i) in game.settings.map.join('')"
:class="{ none: x == ' ' }" :class="{ none: x == ' ' }"
@click="onPixelClick(i, x)"
> >
<template v-if="x == 'b'">%fa:circle%</template> <template v-if="x == 'b'">%fa:circle%</template>
<template v-if="x == 'w'">%fa:circle R%</template> <template v-if="x == 'w'">%fa:circle R%</template>
@ -23,11 +24,11 @@
</div> </div>
<div class="rules"> <div class="rules">
<mk-switch v-model="game.settings.is_llotheo" @change="onIsLlotheoChange" text="石の少ない方が勝ち(ロセオ)"/> <mk-switch v-model="game.settings.is_llotheo" @change="updateSettings" text="石の少ない方が勝ち(ロセオ)"/>
<div> <div>
<el-radio v-model="game.settings.bw" label="random" @change="onBwChange">ランダム</el-radio> <el-radio v-model="game.settings.bw" label="random" @change="updateSettings">ランダム</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="1" @change="updateSettings">{{ game.user1.name }}が黒</el-radio>
<el-radio v-model="game.settings.bw" :label="2" @change="onBwChange">{{ game.user2.name }}が黒</el-radio> <el-radio v-model="game.settings.bw" :label="2" @change="updateSettings">{{ game.user2.name }}が黒</el-radio>
</div> </div>
</div> </div>
@ -114,34 +115,38 @@ export default Vue.extend({
this.$forceUpdate(); this.$forceUpdate();
}, },
updateSettings() {
this.connection.send({
type: 'update-settings',
settings: this.game.settings
});
},
onUpdateSettings(settings) { onUpdateSettings(settings) {
this.game.settings = settings; this.game.settings = settings;
this.mapName = Object.entries(maps).find(x => x[1].data.join('') == this.game.settings.map.join(''))[1].name; const foundMap = Object.entries(maps).find(x => x[1].data.join('') == this.game.settings.map.join(''));
this.mapName = foundMap ? foundMap[1].name : '-Custom-';
}, },
onMapChange(v) { onMapChange(v) {
this.game.settings.map = Object.entries(maps).find(x => x[1].name == v)[1].data; this.game.settings.map = Object.entries(maps).find(x => x[1].name == v)[1].data;
this.connection.send({
type: 'update-settings',
settings: this.game.settings
});
this.$forceUpdate(); this.$forceUpdate();
this.updateSettings();
}, },
onIsLlotheoChange(v) { onPixelClick(pos, pixel) {
this.connection.send({ const x = pos % this.game.settings.map[0].length;
type: 'update-settings', const y = Math.floor(pos / this.game.settings.map[0].length);
settings: this.game.settings const newPixel =
}); pixel == ' ' ? '-' :
this.$forceUpdate(); pixel == '-' ? 'b' :
}, pixel == 'b' ? 'w' :
' ';
onBwChange(v) { const line = this.game.settings.map[y].split('');
this.connection.send({ line[x] = newPixel;
type: 'update-settings', this.$set(this.game.settings.map, y, line.join(''));
settings: this.game.settings
});
this.$forceUpdate(); this.$forceUpdate();
this.updateSettings();
} }
} }
}); });
@ -172,6 +177,7 @@ export default Vue.extend({
border solid 2px #ddd border solid 2px #ddd
border-radius 6px border-radius 6px
overflow hidden overflow hidden
cursor pointer
* *
pointer-events none pointer-events none