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

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}を利用中)。ページを再度読み込みすると更新が適用されます。"
my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
i-like-sushi: "私は(プリンよりむしろ)寿司が好き"
show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示"
widgets:
analog-clock: "アナログ時計"

View File

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

View File

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

View File

@ -13,6 +13,7 @@
<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>
<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) {
this.$store.dispatch('settings/set', {
key: 'showReplyTarget',

View File

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