リバーシのラベルを表示できるように

locales/ja.yml

@@ -54,6 +54,7 @@ common:
   update-available: "Misskeyの新しいバージョンがあります({newer}。現在{current}を利用中)。ページを再度読み込みすると更新が適用されます。"
   my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
   i-like-sushi: "私は(プリンよりむしろ)寿司が好き"
+  show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示"
 
   widgets:
     analog-clock: "アナログ時計"

src/client/app/common/views/components/reversi.game.vue

@@ -13,14 +13,23 @@
 		</p>
 	</div>
 
-	<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">
-		<div v-for="(stone, i) in o.board"
+		<div class="labels-x" v-if="this.$store.state.settings.reversiBoardLabels">
-			:class="{ empty: stone == null, none: o.map[i] == 'null', isEnded: game.isEnded, myTurn: !game.isEnded && isMyTurn, can: turnUser ? o.canPut(turnUser.id == blackUser.id, i) : null, prev: o.prevPos == i }"
+			<span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(96 + i) }}</span>
-			@click="set(i)"
+		</div>
-			:title="'[' + (o.transformPosToXy(i)[0] + 1) + ', ' + (o.transformPosToXy(i)[1] + 1) + '] (' + i + ')'"
+		<div class="flex">
-		>
+			<div class="labels-y" v-if="this.$store.state.settings.reversiBoardLabels">
-			<img v-if="stone === true" :src="`${blackUser.avatarUrl}?thumbnail&size=128`" alt="">
+				<div v-for="i in game.settings.map.length">{{ i }}</div>
-			<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt="">
+			</div>
+			<div class="cells" :style="cellsStyle">
+				<div v-for="(stone, i) in o.board"
+						:class="{ empty: stone == null, none: o.map[i] == 'null', isEnded: game.isEnded, myTurn: !game.isEnded && isMyTurn, can: turnUser ? o.canPut(turnUser.id == blackUser.id, i) : null, prev: o.prevPos == i }"
+						@click="set(i)"
+						:title="`${String.fromCharCode(97 + o.transformPosToXy(i)[0])}${o.transformPosToXy(i)[1] + 1}`">
+					<img v-if="stone === true" :src="`${blackUser.avatarUrl}?thumbnail&size=128`" alt="">
+					<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt="">
+				</div>
+			</div>
 		</div>
 	</div>
 
@@ -92,6 +101,12 @@ export default Vue.extend({
 		isMyTurn(): boolean {
 			if (this.turnUser == null) return null;
 			return this.turnUser.id == this.$store.state.i.id;
+		},
+		cellsStyle(): any {
+			return {
+				'grid-template-rows': `repeat(${ this.game.settings.map.length }, 1fr)`,
+				'grid-template-columns': `repeat(${ this.game.settings.map[0].length }, 1fr)`
+			};
 		}
 	},
 
@@ -244,54 +259,97 @@ export default Vue.extend({
 		border-bottom dashed 1px #c4cdd4
 
 	> .board
-		display grid
-		grid-gap 4px
 		width 350px
 		height 350px
 		margin 0 auto
 
-		> div
+		$label-size = 32px
-			background transparent
+		$gap = 4px
-			border-radius 6px
-			overflow hidden
 
-			*
+		> .labels-x
-				pointer-events none
+			height $label-size
-				user-select none
+			padding-left $label-size
+			display flex
 
-			&.empty
+			> *
-				border solid 2px #eee
+				flex 1
+				display flex
+				align-items center
+				justify-content center
 
-			&.empty.can
+				&:first-child
-				background #eee
+					margin-left -($gap / 2)
 
-			&.empty.myTurn
+				&:last-child
-				border-color #ddd
+					margin-right -($gap / 2)
 
-				&.can
+		> .flex
-					background #eee
+			display flex
-					cursor pointer
 
-					&:hover
+			> .labels-y
-						border-color darken($theme-color, 10%)
+				width $label-size
-						background $theme-color
+				display flex
+				flex-direction column
 
-					&:active
+				> *
-						background darken($theme-color, 10%)
+					flex 1
+					display flex
+					align-items center
+					justify-content center
 
-			&.prev
+					&:first-child
-				box-shadow 0 0 0 4px rgba($theme-color, 0.7)
+						margin-top -($gap / 2)
 
-			&.isEnded
+					&:last-child
-				border-color #ddd
+						margin-bottom -($gap / 2)
 
-			&.none
+			> .cells
-				border-color transparent !important
+				flex 1
+				display grid
+				grid-gap $gap
 
-			> img
+				> div
-				display block
+					background transparent
-				width 100%
+					border-radius 6px
-				height 100%
+					overflow hidden
+
+					*
+						pointer-events none
+						user-select none
+
+					&.empty
+						border solid 2px #eee
+
+					&.empty.can
+						background #eee
+
+					&.empty.myTurn
+						border-color #ddd
+
+						&.can
+							background #eee
+							cursor pointer
+
+							&:hover
+								border-color darken($theme-color, 10%)
+								background $theme-color
+
+							&:active
+								background darken($theme-color, 10%)
+
+					&.prev
+						box-shadow 0 0 0 4px rgba($theme-color, 0.7)
+
+					&.isEnded
+						border-color #ddd
+
+					&.none
+						border-color transparent !important
+
+					> img
+						display block
+						width 100%
+						height 100%
 
 	> .graph
 		display grid

src/client/app/desktop/views/components/settings.vue

@@ -54,6 +54,7 @@
 			<mk-switch v-model="$store.state.settings.showMaps" @change="onChangeShowMaps" text="%i18n:@show-maps%">
 				<span>%i18n:@show-maps-desc%</span>
 			</mk-switch>
+			<mk-switch v-model="$store.state.settings.reversiBoardLabels" @change="onChangeReversiBoardLabels" text="%i18n:common.show-reversi-board-labels%"/>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -369,6 +370,12 @@ export default Vue.extend({
 				value: v
 			});
 		},
+		onChangeReversiBoardLabels(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'reversiBoardLabels',
+				value: v
+			});
+		},
 		onChangeGradientWindowHeader(v) {
 			this.$store.dispatch('settings/set', {
 				key: 'gradientWindowHeader',

src/client/app/mobile/views/pages/settings.vue

@@ -13,6 +13,7 @@
 				<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
 				<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
 				<ui-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi">%i18n:common.i-like-sushi%</ui-switch>
+				<ui-switch v-model="$store.state.settings.reversiBoardLabels" @change="onChangeReversiBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
 
 				<div>
 					<div>%i18n:@timeline%</div>
@@ -182,6 +183,13 @@ export default Vue.extend({
 			});
 		},
 
+		onChangeReversiBoardLabels(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'reversiBoardLabels',
+				value: v
+			});
+		},
+
 		onChangeShowReplyTarget(v) {
 			this.$store.dispatch('settings/set', {
 				key: 'showReplyTarget',

src/client/app/store.ts

@@ -19,7 +19,8 @@ const defaultSettings = {
 	loadRemoteMedia: true,
 	disableViaMobile: false,
 	memo: null,
-	iLikeSushi: false
+	iLikeSushi: false,
+	reversiBoardLabels: false
 };
 
 const defaultDeviceSettings = {