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

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

View file

@ -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",

View file

@ -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

View file

@ -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
});
},

View file

@ -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
});
},

View file

@ -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) {