リバーシのラベルを表示できるように
This commit is contained in:
syuilo
parent
ef68e633cf
commit
2c0b137848
5 changed files with 117 additions and 42 deletions
|
|
@ -54,6 +54,7 @@ common:
|
|||
update-available: "Misskeyの新しいバージョンがあります({newer}。現在{current}を利用中)。ページを再度読み込みすると更新が適用されます。"
|
||||
my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
|
||||
i-like-sushi: "私は(プリンよりむしろ)寿司が好き"
|
||||
show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示"
|
||||
|
||||
widgets:
|
||||
analog-clock: "アナログ時計"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ const defaultSettings = {
|
|||
loadRemoteMedia: true,
|
||||
disableViaMobile: false,
|
||||
memo: null,
|
||||
iLikeSushi: false
|
||||
iLikeSushi: false,
|
||||
reversiBoardLabels: false
|
||||
};
|
||||
|
||||
const defaultDeviceSettings = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue