diff options
| -rw-r--r-- | locales/ja-JP.yml | 1 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/client/app/common/views/components/games/reversi/reversi.game.vue | 21 | ||||
| -rw-r--r-- | src/client/app/desktop/views/components/settings.vue | 11 | ||||
| -rw-r--r-- | src/client/app/mobile/views/pages/settings.vue | 12 | ||||
| -rw-r--r-- | src/client/app/store.ts | 10 |
6 files changed, 40 insertions, 16 deletions
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index e7bba8506a..dc93c9dddc 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -90,6 +90,7 @@ common: my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。" i-like-sushi: "私は(プリンよりむしろ)寿司が好き" show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示" + use-contrast-reversi-stones: "リバーシのアイコンにコントラストを付ける" verified-user: "公式アカウント" disable-animated-mfm: "投稿内の動きのあるテキストを無効にする" diff --git a/package.json b/package.json index 293b1e5d84..6eda2d581d 100644 --- a/package.json +++ b/package.json @@ -157,6 +157,7 @@ "monk": "6.0.6", "ms": "2.1.1", "nan": "2.10.0", + "nested-property": "0.0.7", "node-sass": "4.9.3", "node-sass-json-importer": "3.3.1", "nprogress": "0.2.0", 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) { |