Better reversi labels

This commit is contained in:
syuilo 2018-06-24 13:18:22 +09:00
parent 17792716a7
commit e15643ca46
1 changed files with 10 additions and 2 deletions

View File

@ -30,6 +30,12 @@
<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt="">
</div>
</div>
<div class="labels-y" v-if="this.$store.state.settings.reversiBoardLabels">
<div v-for="i in game.settings.map.length">{{ i }}</div>
</div>
</div>
<div class="labels-x" v-if="this.$store.state.settings.reversiBoardLabels">
<span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
</div>
</div>
@ -263,12 +269,12 @@ export default Vue.extend({
height 350px
margin 0 auto
$label-size = 32px
$label-size = 16px
$gap = 4px
> .labels-x
height $label-size
padding-left $label-size
padding 0 $label-size
display flex
> *
@ -276,6 +282,7 @@ export default Vue.extend({
display flex
align-items center
justify-content center
font-size 12px
&:first-child
margin-left -($gap / 2)
@ -296,6 +303,7 @@ export default Vue.extend({
display flex
align-items center
justify-content center
font-size 12px
&:first-child
margin-top -($gap / 2)