From 59fbf693ed05082e9dcb1cd3731116d83d9cfc10 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 10 Mar 2018 12:48:41 +0900
Subject: [PATCH] Implement othello map editing

---
 src/common/othello/core.ts                    |  2 +
 .../common/views/components/othello.room.vue  | 50 +++++++++++--------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/common/othello/core.ts b/src/common/othello/core.ts
index 8a0af4d508..62ec34f41c 100644
--- a/src/common/othello/core.ts
+++ b/src/common/othello/core.ts
@@ -69,6 +69,7 @@ export default class Othello {
 	 * 黒石の比率
 	 */
 	public get blackP() {
+		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
 		return this.blackCount / (this.blackCount + this.whiteCount);
 	}
 
@@ -76,6 +77,7 @@ export default class Othello {
 	 * 白石の比率
 	 */
 	public get whiteP() {
+		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
 		return this.whiteCount / (this.blackCount + this.whiteCount);
 	}
 
diff --git a/src/web/app/common/views/components/othello.room.vue b/src/web/app/common/views/components/othello.room.vue
index 41226057b3..6c8ce16531 100644
--- a/src/web/app/common/views/components/othello.room.vue
+++ b/src/web/app/common/views/components/othello.room.vue
@@ -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 v-for="(x, i) in game.settings.map.join('')"
 			:class="{ none: x == ' ' }"
+			@click="onPixelClick(i, x)"
 		>
 			<template v-if="x == 'b'">%fa:circle%</template>
 			<template v-if="x == 'w'">%fa:circle R%</template>
@@ -23,11 +24,11 @@
 	</div>
 
 	<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>
-			<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>
+			<el-radio v-model="game.settings.bw" label="random" @change="updateSettings">ランダム</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="updateSettings">{{ game.user2.name }}が黒</el-radio>
 		</div>
 	</div>
 
@@ -114,34 +115,38 @@ export default Vue.extend({
 			this.$forceUpdate();
 		},
 
+		updateSettings() {
+			this.connection.send({
+				type: 'update-settings',
+				settings: this.game.settings
+			});
+		},
+
 		onUpdateSettings(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) {
 			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.updateSettings();
 		},
 
-		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
-			});
+		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 == ' ' ? '-' :
+				pixel == '-' ? 'b' :
+				pixel == 'b' ? 'w' :
+				' ';
+			const line = this.game.settings.map[y].split('');
+			line[x] = newPixel;
+			this.$set(this.game.settings.map, y, line.join(''));
 			this.$forceUpdate();
+			this.updateSettings();
 		}
 	}
 });
@@ -172,6 +177,7 @@ export default Vue.extend({
 			border solid 2px #ddd
 			border-radius 6px
 			overflow hidden
+			cursor pointer
 
 			*
 				pointer-events none