From e15643ca46cf4be4c6fc58694c1f5f3a60bf9bf9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 24 Jun 2018 13:18:22 +0900
Subject: [PATCH] Better reversi labels

---
 .../app/common/views/components/reversi.game.vue     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/client/app/common/views/components/reversi.game.vue b/src/client/app/common/views/components/reversi.game.vue
index b3790f484..94583a76f 100644
--- a/src/client/app/common/views/components/reversi.game.vue
+++ b/src/client/app/common/views/components/reversi.game.vue
@@ -30,6 +30,12 @@
 					<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt="">
 				</div>
 			</div>
+			<div class="labels-y" v-if="this.$store.state.settings.reversiBoardLabels">
+				<div v-for="i in game.settings.map.length">{{ i }}</div>
+			</div>
+		</div>
+		<div class="labels-x" v-if="this.$store.state.settings.reversiBoardLabels">
+			<span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
 		</div>
 	</div>
 
@@ -263,12 +269,12 @@ export default Vue.extend({
 		height 350px
 		margin 0 auto
 
-		$label-size = 32px
+		$label-size = 16px
 		$gap = 4px
 
 		> .labels-x
 			height $label-size
-			padding-left $label-size
+			padding 0 $label-size
 			display flex
 
 			> *
@@ -276,6 +282,7 @@ export default Vue.extend({
 				display flex
 				align-items center
 				justify-content center
+				font-size 12px
 
 				&:first-child
 					margin-left -($gap / 2)
@@ -296,6 +303,7 @@ export default Vue.extend({
 					display flex
 					align-items center
 					justify-content center
+					font-size 12px
 
 					&:first-child
 						margin-top -($gap / 2)