なんかもうめっちゃ変えた

2 files changed, 15 insertions, 7 deletions

diff --git a/src/web/app/common/views/components/othello.game.vue b/src/web/app/common/views/components/othello.game.vue
index ffda68c8db..248528ed41 100644
--- a/src/web/app/common/views/components/othello.game.vue
+++ b/src/web/app/common/views/components/othello.game.vue
@@ -10,9 +10,9 @@
 		<template v-else>引き分け</template>
 	</p>
 
-	<div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.size }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map.size }, 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="(stone, i) in o.board"
-			:class="{ empty: stone == null, none: o.map.data[i] == ' ', isEnded: game.is_ended, myTurn: !game.is_ended && isMyTurn, can: turnUser ? o.canPut(turnUser.id == blackUser.id ? 'black' : 'white', i) : null, prev: o.prevPos == i }"
+			:class="{ empty: stone == null, none: o.map[i] == 'null', isEnded: game.is_ended, myTurn: !game.is_ended && isMyTurn, can: turnUser ? o.canPut(turnUser.id == blackUser.id ? 'black' : 'white', i) : null, prev: o.prevPos == i }"
 			@click="set(i)"
 		>
 			<img v-if="stone == 'black'" :src="`${blackUser.avatar_url}?thumbnail&size=128`" alt="">
@@ -106,6 +106,8 @@ export default Vue.extend({
 			this.o.put(log.color, log.pos);
 		});
 
+		console.log(this.o);
+
 		this.logs = this.game.logs;
 		this.logPos = this.logs.length;
 	},
diff --git a/src/web/app/common/views/components/othello.room.vue b/src/web/app/common/views/components/othello.room.vue
index bcae37b227..0fcca85485 100644
--- a/src/web/app/common/views/components/othello.room.vue
+++ b/src/web/app/common/views/components/othello.room.vue
@@ -4,14 +4,17 @@
 
 	<p>ゲームの設定</p>
 
-	<el-select v-model="mapName" placeholder="マップを選択" @change="onMapChange">
+	<el-select class="map" v-model="mapName" placeholder="マップを選択" @change="onMapChange">
 		<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"/>
+			<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 class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.size }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map.size }, 1fr)` }">
-		<div v-for="(x, i) in game.settings.map.data"
+	<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 == ' ' }"
 		>
 			<template v-if="x == 'b'">%fa:circle%</template>
@@ -112,7 +115,7 @@ export default Vue.extend({
 		},
 
 		onMapChange(v) {
-			this.game.settings.map = Object.entries(maps).find(x => x[1].name == v)[1];
+			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
@@ -141,6 +144,9 @@ export default Vue.extend({
 		padding 8px
 		border-bottom dashed 1px #c4cdd4
 
+	> .map
+		width 300px
+
 	> .board
 		display grid
 		grid-gap 4px