Better reversi labels
This commit is contained in:
parent
17792716a7
commit
e15643ca46
1 changed files with 10 additions and 2 deletions
|
@ -30,6 +30,12 @@
|
||||||
<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt="">
|
<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt="">
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -263,12 +269,12 @@ export default Vue.extend({
|
||||||
height 350px
|
height 350px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
|
||||||
$label-size = 32px
|
$label-size = 16px
|
||||||
$gap = 4px
|
$gap = 4px
|
||||||
|
|
||||||
> .labels-x
|
> .labels-x
|
||||||
height $label-size
|
height $label-size
|
||||||
padding-left $label-size
|
padding 0 $label-size
|
||||||
display flex
|
display flex
|
||||||
|
|
||||||
> *
|
> *
|
||||||
|
@ -276,6 +282,7 @@ export default Vue.extend({
|
||||||
display flex
|
display flex
|
||||||
align-items center
|
align-items center
|
||||||
justify-content center
|
justify-content center
|
||||||
|
font-size 12px
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
margin-left -($gap / 2)
|
margin-left -($gap / 2)
|
||||||
|
@ -296,6 +303,7 @@ export default Vue.extend({
|
||||||
display flex
|
display flex
|
||||||
align-items center
|
align-items center
|
||||||
justify-content center
|
justify-content center
|
||||||
|
font-size 12px
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
margin-top -($gap / 2)
|
margin-top -($gap / 2)
|
||||||
|
|
Loading…
Reference in a new issue