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

This commit is contained in:
syuilo 2018-08-22 09:10:39 +09:00
parent 2fea3be7c0
commit ef0793311f
6 changed files with 40 additions and 16 deletions

View file

@ -90,6 +90,7 @@ common:
my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。" my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
i-like-sushi: "私は(プリンよりむしろ)寿司が好き" i-like-sushi: "私は(プリンよりむしろ)寿司が好き"
show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示" show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示"
use-contrast-reversi-stones: "リバーシのアイコンにコントラストを付ける"
verified-user: "公式アカウント" verified-user: "公式アカウント"
disable-animated-mfm: "投稿内の動きのあるテキストを無効にする" disable-animated-mfm: "投稿内の動きのあるテキストを無効にする"

View file

@ -157,6 +157,7 @@
"monk": "6.0.6", "monk": "6.0.6",
"ms": "2.1.1", "ms": "2.1.1",
"nan": "2.10.0", "nan": "2.10.0",
"nested-property": "0.0.7",
"node-sass": "4.9.3", "node-sass": "4.9.3",
"node-sass-json-importer": "3.3.1", "node-sass-json-importer": "3.3.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",

View file

@ -18,11 +18,11 @@
</div> </div>
<div class="board"> <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> <span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
</div> </div>
<div class="flex"> <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 v-for="i in game.settings.map.length">{{ i }}</div>
</div> </div>
<div class="cells" :style="cellsStyle"> <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 }" :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)" @click="set(i)"
:title="`${String.fromCharCode(65 + o.transformPosToXy(i)[0])}${o.transformPosToXy(i)[1] + 1}`"> :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 === true" :src="blackUser.avatarUrl" alt="black" :class="{ contrast: $store.state.settings.games.reversi.useContrastStones }">
<img v-if="stone === false" :src="whiteUser.avatarUrl" alt="white"> <img v-if="stone === false" :src="whiteUser.avatarUrl" alt="white" :class="{ contrast: $store.state.settings.games.reversi.useContrastStones }">
</div> </div>
</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 v-for="i in game.settings.map.length">{{ i }}</div>
</div> </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> <span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
</div> </div>
</div> </div>
@ -421,6 +421,7 @@ root(isDark)
width 100% width 100%
height 100% height 100%
&.contrast
&[alt="black"] &[alt="black"]
filter brightness(.5) filter brightness(.5)

View file

@ -56,8 +56,9 @@
<mk-switch v-model="$store.state.settings.showMaps" @change="onChangeShowMaps" text="%i18n:@show-maps%"> <mk-switch v-model="$store.state.settings.showMaps" @change="onChangeShowMaps" text="%i18n:@show-maps%">
<span>%i18n:@show-maps-desc%</span> <span>%i18n:@show-maps-desc%</span>
</mk-switch> </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.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>
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">
@ -376,7 +377,13 @@ export default Vue.extend({
}, },
onChangeReversiBoardLabels(v) { onChangeReversiBoardLabels(v) {
this.$store.dispatch('settings/set', { 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 value: v
}); });
}, },

View file

@ -13,8 +13,9 @@
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch> <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.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.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.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>
<div>%i18n:@timeline%</div> <div>%i18n:@timeline%</div>
@ -189,7 +190,14 @@ export default Vue.extend({
onChangeReversiBoardLabels(v) { onChangeReversiBoardLabels(v) {
this.$store.dispatch('settings/set', { 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 value: v
}); });
}, },

View file

@ -1,5 +1,6 @@
import Vuex from 'vuex'; import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'; import createPersistedState from 'vuex-persistedstate';
import * as nestedProperty from 'nested-property';
import MiOS from './mios'; import MiOS from './mios';
import { hostname } from './config'; import { hostname } from './config';
@ -22,7 +23,12 @@ const defaultSettings = {
disableViaMobile: false, disableViaMobile: false,
memo: null, memo: null,
iLikeSushi: false, iLikeSushi: false,
reversiBoardLabels: false games: {
reversi: {
showBoardLabels: false,
useContrastStones: false
}
}
}; };
const defaultDeviceSettings = { const defaultDeviceSettings = {
@ -125,7 +131,7 @@ export default (os: MiOS) => new Vuex.Store({
mutations: { mutations: {
set(state, x: { key: string; value: any }) { set(state, x: { key: string; value: any }) {
state[x.key] = x.value; nestedProperty.set(state, x.key, x.value);
}, },
setHome(state, data) { setHome(state, data) {