リバーシのアイコンのコントラストのオプションを追加するなど

4 files changed, 38 insertions, 16 deletions

diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index d8e07c744b..b432a2308d 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -18,11 +18,11 @@
 	</div>
 
 	<div class="board">
-		<div class="labels-x" v-if="this.$store.state.settings.reversiBoardLabels">
+		<div class="labels-x" v-if="this.$store.state.settings.games.reversi.showBoardLabels">
 			<span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
 		</div>
 		<div class="flex">
-			<div class="labels-y" v-if="this.$store.state.settings.reversiBoardLabels">
+			<div class="labels-y" v-if="this.$store.state.settings.games.reversi.showBoardLabels">
 				<div v-for="i in game.settings.map.length">{{ i }}</div>
 			</div>
 			<div class="cells" :style="cellsStyle">
@@ -30,15 +30,15 @@
 						: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(65 + o.transformPosToXy(i)[0])}${o.transformPosToXy(i)[1] + 1}`">
-					<img v-if="stone === true" :src="blackUser.avatarUrl" alt="black">
-					<img v-if="stone === false" :src="whiteUser.avatarUrl" alt="white">
+					<img v-if="stone === true" :src="blackUser.avatarUrl" alt="black" :class="{ contrast: $store.state.settings.games.reversi.useContrastStones }">
+					<img v-if="stone === false" :src="whiteUser.avatarUrl" alt="white" :class="{ contrast: $store.state.settings.games.reversi.useContrastStones }">
 				</div>
 			</div>
-			<div class="labels-y" v-if="this.$store.state.settings.reversiBoardLabels">
+			<div class="labels-y" v-if="this.$store.state.settings.games.reversi.showBoardLabels">
 				<div v-for="i in game.settings.map.length">{{ i }}</div>
 			</div>
 		</div>
-		<div class="labels-x" v-if="this.$store.state.settings.reversiBoardLabels">
+		<div class="labels-x" v-if="this.$store.state.settings.games.reversi.showBoardLabels">
 			<span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
 		</div>
 	</div>
@@ -421,11 +421,12 @@ root(isDark)
 						width 100%
 						height 100%
 
-						&[alt="black"]
-							filter brightness(.5)
+						&.contrast
+							&[alt="black"]
+								filter brightness(.5)
 
-						&[alt="white"]
-							filter brightness(2)
+							&[alt="white"]
+								filter brightness(2)
 
 	> .graph
 		display grid
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 759463981d..df131a1a65 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -56,8 +56,9 @@
 			<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%"/>
 			<mk-switch v-model="$store.state.settings.disableAnimatedMfm" @change="onChangeDisableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/>
+			<mk-switch v-model="$store.state.settings.games.reversi.showBoardLabels" @change="onChangeReversiBoardLabels" text="%i18n:common.show-reversi-board-labels%"/>
+			<mk-switch v-model="$store.state.settings.games.reversi.useContrastStones" @change="onChangeUseContrastReversiStones" text="%i18n:common.use-contrast-reversi-stones%"/>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -376,7 +377,13 @@ export default Vue.extend({
 		},
 		onChangeReversiBoardLabels(v) {
 			this.$store.dispatch('settings/set', {
-				key: 'reversiBoardLabels',
+				key: 'games.reversi.showBoardLabels',
+				value: v
+			});
+		},
+		onChangeUseContrastReversiStones(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'games.reversi.useContrastStones',
 				value: v
 			});
 		},
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 7636a0370a..6b82be099d 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -13,8 +13,9 @@
 				<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>
 				<ui-switch v-model="$store.state.settings.disableAnimatedMfm" @change="onChangeDisableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
+				<ui-switch v-model="$store.state.settings.games.reversi.showBoardLabels" @change="onChangeReversiBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
+				<ui-switch v-model="$store.state.settings.games.reversi.useContrastStones" @change="onChangeUseContrastReversiStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
 
 				<div>
 					<div>%i18n:@timeline%</div>
@@ -189,7 +190,14 @@ export default Vue.extend({
 
 		onChangeReversiBoardLabels(v) {
 			this.$store.dispatch('settings/set', {
-				key: 'reversiBoardLabels',
+				key: 'games.reversi.showBoardLabels',
+				value: v
+			});
+		},
+
+		onChangeUseContrastReversiStones(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'games.reversi.useContrastStones',
 				value: v
 			});
 		},
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 7e2cc3976b..ba91a11f25 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -1,5 +1,6 @@
 import Vuex from 'vuex';
 import createPersistedState from 'vuex-persistedstate';
+import * as nestedProperty from 'nested-property';
 
 import MiOS from './mios';
 import { hostname } from './config';
@@ -22,7 +23,12 @@ const defaultSettings = {
 	disableViaMobile: false,
 	memo: null,
 	iLikeSushi: false,
-	reversiBoardLabels: false
+	games: {
+		reversi: {
+			showBoardLabels: false,
+			useContrastStones: false
+		}
+	}
 };
 
 const defaultDeviceSettings = {
@@ -125,7 +131,7 @@ export default (os: MiOS) => new Vuex.Store({
 
 			mutations: {
 				set(state, x: { key: string; value: any }) {
-					state[x.key] = x.value;
+					nestedProperty.set(state, x.key, x.value);
 				},
 
 				setHome(state, data) {