From 58b3be438a927e684cfe74b98871847152f905b5 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Thu, 6 Dec 2018 10:21:41 +0900
Subject: [PATCH] Resolve #1872 (#3516)

---
 locales/ja-JP.yml                             |  1 +
 .../components/games/reversi/reversi.game.vue | 19 ++++++++++++++++---
 .../app/desktop/views/components/settings.vue |  6 ++++++
 src/client/app/store.ts                       |  1 +
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1f7abd0d3..5c78681b1 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -118,6 +118,7 @@ common:
   my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
   i-like-sushi: "私は(プリンよりむしろ)寿司が好き"
   show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示"
+  use-white-black-reversi-stones: "リバーシに白黒の石を使う"
   use-contrast-reversi-stones: "リバーシのアイコンにコントラストを付ける"
   verified-user: "公式アカウント"
   disable-animated-mfm: "投稿内の動きのあるテキストを無効にする"
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 927337f01..758d02af3 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
@@ -30,8 +30,14 @@
 						: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" :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 }">
+					<template v-if="!$store.state.settings.games.reversi.useWhiteBlackStones">
+						<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 }">
+					</template>
+					<template v-if="$store.state.settings.games.reversi.useWhiteBlackStones">
+						<fa v-if="stone === true" :icon="fasCircle"/>
+						<fa v-if="stone === false" :icon="farCircle"/>
+					</template>
 				</div>
 			</div>
 			<div class="labels-y" v-if="this.$store.state.settings.games.reversi.showBoardLabels">
@@ -74,6 +80,8 @@ import * as CRC32 from 'crc-32';
 import Reversi, { Color } from '../../../../../../../games/reversi/core';
 import { url } from '../../../../../config';
 import { faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
+import { faCircle as fasCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCircle as farCircle } from '@fortawesome/free-regular-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/games/reversi/reversi.game.vue'),
@@ -99,7 +107,7 @@ export default Vue.extend({
 			logs: [],
 			logPos: 0,
 			pollingClock: null,
-			faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight
+			faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight, fasCircle, farCircle
 		};
 	},
 
@@ -412,6 +420,11 @@ export default Vue.extend({
 					&.none
 						border-color transparent !important
 
+					> svg
+						display block
+						width 100%
+						height 100%
+
 					> img
 						display block
 						width 100%
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 4b2345fb2..a6a938960 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -127,6 +127,7 @@
 			</section>
 			<section>
 				<ui-switch v-model="games_reversi_showBoardLabels">{{ $t('@.show-reversi-board-labels') }}</ui-switch>
+				<ui-switch v-model="games_reversi_useWhiteBlackStones">{{ $t('@.use-white-black-reversi-stones') }}</ui-switch>
 				<ui-switch v-model="games_reversi_useContrastStones">{{ $t('@.use-contrast-reversi-stones') }}</ui-switch>
 			</section>
 		</ui-card>
@@ -491,6 +492,11 @@ export default Vue.extend({
 			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.showBoardLabels', value }); }
 		},
 
+		games_reversi_useWhiteBlackStones: {
+			get() { return this.$store.state.settings.games.reversi.useWhiteBlackStones; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.useWhiteBlackStones', value }); }
+		},
+
 		games_reversi_useContrastStones: {
 			get() { return this.$store.state.settings.games.reversi.useContrastStones; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.useContrastStones', value }); }
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 159ed994c..9e27206d6 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -40,6 +40,7 @@ const defaultSettings = {
 	games: {
 		reversi: {
 			showBoardLabels: false,
+			useWhileBlackStones: false,
 			useContrastStones: false
 		}
 	}