リバーシのラベルを表示できるように

This commit is contained in:
syuilo 2018-06-23 16:55:52 +09:00
parent ef68e633cf
commit 2c0b137848
5 changed files with 117 additions and 42 deletions

View file

@ -54,6 +54,7 @@ common:
update-available: "Misskeyの新しいバージョンがあります({newer}。現在{current}を利用中)。ページを再度読み込みすると更新が適用されます。" update-available: "Misskeyの新しいバージョンがあります({newer}。現在{current}を利用中)。ページを再度読み込みすると更新が適用されます。"
my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。" my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
i-like-sushi: "私は(プリンよりむしろ)寿司が好き" i-like-sushi: "私は(プリンよりむしろ)寿司が好き"
show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示"
widgets: widgets:
analog-clock: "アナログ時計" analog-clock: "アナログ時計"

View file

@ -13,14 +13,23 @@
</p> </p>
</div> </div>
<div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }"> <div class="board">
<div v-for="(stone, i) in o.board" <div class="labels-x" v-if="this.$store.state.settings.reversiBoardLabels">
: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 }" <span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(96 + i) }}</span>
@click="set(i)" </div>
:title="'[' + (o.transformPosToXy(i)[0] + 1) + ', ' + (o.transformPosToXy(i)[1] + 1) + '] (' + i + ')'" <div class="flex">
> <div class="labels-y" v-if="this.$store.state.settings.reversiBoardLabels">
<img v-if="stone === true" :src="`${blackUser.avatarUrl}?thumbnail&size=128`" alt=""> <div v-for="i in game.settings.map.length">{{ i }}</div>
<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt=""> </div>
<div class="cells" :style="cellsStyle">
<div v-for="(stone, i) in o.board"
: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(97 + o.transformPosToXy(i)[0])}${o.transformPosToXy(i)[1] + 1}`">
<img v-if="stone === true" :src="`${blackUser.avatarUrl}?thumbnail&size=128`" alt="">
<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt="">
</div>
</div>
</div> </div>
</div> </div>
@ -92,6 +101,12 @@ export default Vue.extend({
isMyTurn(): boolean { isMyTurn(): boolean {
if (this.turnUser == null) return null; if (this.turnUser == null) return null;
return this.turnUser.id == this.$store.state.i.id; return this.turnUser.id == this.$store.state.i.id;
},
cellsStyle(): any {
return {
'grid-template-rows': `repeat(${ this.game.settings.map.length }, 1fr)`,
'grid-template-columns': `repeat(${ this.game.settings.map[0].length }, 1fr)`
};
} }
}, },
@ -244,54 +259,97 @@ export default Vue.extend({
border-bottom dashed 1px #c4cdd4 border-bottom dashed 1px #c4cdd4
> .board > .board
display grid
grid-gap 4px
width 350px width 350px
height 350px height 350px
margin 0 auto margin 0 auto
> div $label-size = 32px
background transparent $gap = 4px
border-radius 6px
overflow hidden
* > .labels-x
pointer-events none height $label-size
user-select none padding-left $label-size
display flex
&.empty > *
border solid 2px #eee flex 1
display flex
align-items center
justify-content center
&.empty.can &:first-child
background #eee margin-left -($gap / 2)
&.empty.myTurn &:last-child
border-color #ddd margin-right -($gap / 2)
&.can > .flex
background #eee display flex
cursor pointer
&:hover > .labels-y
border-color darken($theme-color, 10%) width $label-size
background $theme-color display flex
flex-direction column
&:active > *
background darken($theme-color, 10%) flex 1
display flex
align-items center
justify-content center
&.prev &:first-child
box-shadow 0 0 0 4px rgba($theme-color, 0.7) margin-top -($gap / 2)
&.isEnded &:last-child
border-color #ddd margin-bottom -($gap / 2)
&.none > .cells
border-color transparent !important flex 1
display grid
grid-gap $gap
> img > div
display block background transparent
width 100% border-radius 6px
height 100% overflow hidden
*
pointer-events none
user-select none
&.empty
border solid 2px #eee
&.empty.can
background #eee
&.empty.myTurn
border-color #ddd
&.can
background #eee
cursor pointer
&:hover
border-color darken($theme-color, 10%)
background $theme-color
&:active
background darken($theme-color, 10%)
&.prev
box-shadow 0 0 0 4px rgba($theme-color, 0.7)
&.isEnded
border-color #ddd
&.none
border-color transparent !important
> img
display block
width 100%
height 100%
> .graph > .graph
display grid display grid

View file

@ -54,6 +54,7 @@
<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%"/>
</section> </section>
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">
@ -369,6 +370,12 @@ export default Vue.extend({
value: v value: v
}); });
}, },
onChangeReversiBoardLabels(v) {
this.$store.dispatch('settings/set', {
key: 'reversiBoardLabels',
value: v
});
},
onChangeGradientWindowHeader(v) { onChangeGradientWindowHeader(v) {
this.$store.dispatch('settings/set', { this.$store.dispatch('settings/set', {
key: 'gradientWindowHeader', key: 'gradientWindowHeader',

View file

@ -13,6 +13,7 @@
<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>
<div> <div>
<div>%i18n:@timeline%</div> <div>%i18n:@timeline%</div>
@ -182,6 +183,13 @@ export default Vue.extend({
}); });
}, },
onChangeReversiBoardLabels(v) {
this.$store.dispatch('settings/set', {
key: 'reversiBoardLabels',
value: v
});
},
onChangeShowReplyTarget(v) { onChangeShowReplyTarget(v) {
this.$store.dispatch('settings/set', { this.$store.dispatch('settings/set', {
key: 'showReplyTarget', key: 'showReplyTarget',

View file

@ -19,7 +19,8 @@ const defaultSettings = {
loadRemoteMedia: true, loadRemoteMedia: true,
disableViaMobile: false, disableViaMobile: false,
memo: null, memo: null,
iLikeSushi: false iLikeSushi: false,
reversiBoardLabels: false
}; };
const defaultDeviceSettings = { const defaultDeviceSettings = {