wip
This commit is contained in:
syuilo
parent
a88942f58a
commit
cd6829ca64
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="root">
|
||||
<div class="xqnhankfuuilcwvhgsopeqncafzsquya">
|
||||
<header><b>{{ blackUser | userName }}</b>(%i18n:common.reversi.black%) vs <b>{{ whiteUser | userName }}</b>(%i18n:common.reversi.white%)</header>
|
||||
|
||||
<div style="overflow: hidden">
|
||||
|
|
@ -258,12 +258,12 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.root
|
||||
root(isDark)
|
||||
text-align center
|
||||
|
||||
> header
|
||||
padding 8px
|
||||
border-bottom dashed 1px #c4cdd4
|
||||
border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4
|
||||
|
||||
> .board
|
||||
width calc(100% - 16px)
|
||||
|
|
@ -327,16 +327,16 @@ export default Vue.extend({
|
|||
user-select none
|
||||
|
||||
&.empty
|
||||
border solid 2px #eee
|
||||
border solid 2px isDark ? #51595f : #eee
|
||||
|
||||
&.empty.can
|
||||
background #eee
|
||||
background isDark ? #51595f : #eee
|
||||
|
||||
&.empty.myTurn
|
||||
border-color #ddd
|
||||
border-color isDark ? #6a767f : #ddd
|
||||
|
||||
&.can
|
||||
background #eee
|
||||
background isDark ? #51595f : #eee
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
|
|
@ -350,7 +350,7 @@ export default Vue.extend({
|
|||
box-shadow 0 0 0 4px rgba($theme-color, 0.7)
|
||||
|
||||
&.isEnded
|
||||
border-color #ddd
|
||||
border-color isDark ? #6a767f : #ddd
|
||||
|
||||
&.none
|
||||
border-color transparent !important
|
||||
|
|
@ -388,4 +388,11 @@ export default Vue.extend({
|
|||
display inline-block
|
||||
margin 0 8px
|
||||
min-width 70px
|
||||
|
||||
.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,12 +17,13 @@
|
|||
</header>
|
||||
|
||||
<div>
|
||||
<div :class="$style.board" v-if="game.settings.map != null" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
|
||||
<div class="random" v-if="game.settings.map == null">%fa:dice%</div>
|
||||
<div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
|
||||
<div v-for="(x, i) in game.settings.map.join('')"
|
||||
:data-none="x == ' '"
|
||||
@click="onPixelClick(i, x)">
|
||||
<template v-if="x == 'b'">%fa:circle%</template>
|
||||
<template v-if="x == 'w'">%fa:circle R%</template>
|
||||
<template v-if="x == 'b'"><template v-if="$store.state.device.darkmode">%fa:circle R%</template><template v-else>%fa:circle%</template></template>
|
||||
<template v-if="x == 'w'"><template v-if="$store.state.device.darkmode">%fa:circle%</template><template v-else>%fa:circle R%</template></template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,8 +36,8 @@
|
|||
|
||||
<div>
|
||||
<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">%i18n:@random%</form-radio>
|
||||
<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user1 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
|
||||
<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user2 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
|
||||
<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user1 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
|
||||
<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user2 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -250,7 +251,7 @@ export default Vue.extend({
|
|||
|
||||
root(isDark)
|
||||
text-align center
|
||||
background #f9f9f9
|
||||
background isDark ? #191b22 : #f9f9f9
|
||||
|
||||
> header
|
||||
padding 8px
|
||||
|
|
@ -266,63 +267,38 @@ root(isDark)
|
|||
> header
|
||||
> select
|
||||
width 100%
|
||||
padding 12px 16px
|
||||
border 1px solid #dcdfe6
|
||||
padding 12px 14px
|
||||
background isDark ? #282C37 : #fff
|
||||
border 1px solid isDark ? #6a707d : #dcdfe6
|
||||
border-radius 4px
|
||||
color #606266
|
||||
color isDark ? #fff : #606266
|
||||
cursor pointer
|
||||
transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||
|
||||
&:hover
|
||||
border-color #c0c4cc
|
||||
border-color isDark ? #a7aebd : #c0c4cc
|
||||
|
||||
&:focus
|
||||
&:active
|
||||
border-color $theme-color
|
||||
|
||||
.card
|
||||
max-width 400px
|
||||
border-radius 4px
|
||||
border 1px solid #ebeef5
|
||||
background isDark ? #282C37 : #fff
|
||||
color #303133
|
||||
box-shadow 0 2px 12px 0 rgba(#000, 0.1)
|
||||
|
||||
> header
|
||||
padding 18px 20px
|
||||
border-bottom 1px solid #ebeef5
|
||||
|
||||
> div
|
||||
padding 20px
|
||||
> .random
|
||||
padding 32px 0
|
||||
font-size 64px
|
||||
color isDark ? #4e5961 : #d8d8d8
|
||||
|
||||
> footer
|
||||
position sticky
|
||||
bottom 0
|
||||
padding 16px
|
||||
background rgba(255, 255, 255, 0.9)
|
||||
border-top solid 1px #c4cdd4
|
||||
|
||||
> .status
|
||||
margin 0 0 16px 0
|
||||
|
||||
.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.board
|
||||
> .board
|
||||
display grid
|
||||
grid-gap 4px
|
||||
width 300px
|
||||
height 300px
|
||||
margin 0 auto
|
||||
color isDark ? #fff : #444
|
||||
|
||||
> div
|
||||
background transparent
|
||||
border solid 2px #ddd
|
||||
border solid 2px isDark ? #6a767f : #ddd
|
||||
border-radius 6px
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
|
|
@ -336,4 +312,35 @@ root(isDark)
|
|||
&[data-none]
|
||||
border-color transparent
|
||||
|
||||
.card
|
||||
max-width 400px
|
||||
border-radius 4px
|
||||
background isDark ? #282C37 : #fff
|
||||
color isDark ? #fff : #303133
|
||||
box-shadow 0 2px 12px 0 rgba(#000, 0.1)
|
||||
|
||||
> header
|
||||
padding 18px 20px
|
||||
border-bottom 1px solid isDark ? #1c2023 : #ebeef5
|
||||
|
||||
> div
|
||||
padding 20px
|
||||
color isDark ? #fff : #606266
|
||||
|
||||
> footer
|
||||
position sticky
|
||||
bottom 0
|
||||
padding 16px
|
||||
background rgba(isDark ? #191b22 : #fff, 0.9)
|
||||
border-top solid 1px isDark ? #606266 : #c4cdd4
|
||||
|
||||
> .status
|
||||
margin 0 0 16px 0
|
||||
|
||||
.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mk-reversi">
|
||||
<div class="vchtoekanapleubgzioubdtmlkribzfd">
|
||||
<div v-if="game">
|
||||
<x-gameroom :game="game"/>
|
||||
</div>
|
||||
|
|
@ -200,9 +200,9 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.mk-reversi
|
||||
color #677f84
|
||||
background #fff
|
||||
root(isDark)
|
||||
color isDark ? #fff : #677f84
|
||||
background isDark ? #191b22 : #fff
|
||||
|
||||
> .matching
|
||||
> h1
|
||||
|
|
@ -227,7 +227,7 @@ export default Vue.extend({
|
|||
text-align center
|
||||
font-weight normal
|
||||
color #fff
|
||||
background linear-gradient(to bottom, #8bca3e, #d6cf31)
|
||||
background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31)
|
||||
|
||||
& + p
|
||||
margin 0
|
||||
|
|
@ -235,7 +235,7 @@ export default Vue.extend({
|
|||
margin-bottom 12px
|
||||
text-align center
|
||||
font-size 14px
|
||||
border-bottom solid 1px #d3d9dc
|
||||
border-bottom solid 1px isDark ? #535f65 : #d3d9dc
|
||||
|
||||
> .play
|
||||
margin 0 auto
|
||||
|
|
@ -250,14 +250,14 @@ export default Vue.extend({
|
|||
padding 16px
|
||||
font-size 14px
|
||||
text-align left
|
||||
background #f5f5f5
|
||||
background isDark ? #282c37 : #f5f5f5
|
||||
border-radius 8px
|
||||
|
||||
> section
|
||||
margin 0 auto
|
||||
padding 0 16px 16px 16px
|
||||
max-width 500px
|
||||
border-top solid 1px #d3d9dc
|
||||
border-top solid 1px isDark ? #535f65 : #d3d9dc
|
||||
|
||||
> h2
|
||||
margin 0
|
||||
|
|
@ -298,8 +298,9 @@ export default Vue.extend({
|
|||
display block
|
||||
margin 8px 0
|
||||
padding 8px
|
||||
color #677f84
|
||||
border solid 1px #e1e5e8
|
||||
color isDark ? #fff : #677f84
|
||||
background isDark ? #282c37 : #fff
|
||||
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
|
||||
border-radius 6px
|
||||
cursor pointer
|
||||
|
||||
|
|
@ -307,14 +308,11 @@ export default Vue.extend({
|
|||
pointer-events none
|
||||
user-select none
|
||||
|
||||
&:focus
|
||||
border-color $theme-color
|
||||
|
||||
&:hover
|
||||
background #f5f5f5
|
||||
background isDark ? #313543 : #f5f5f5
|
||||
|
||||
&:active
|
||||
background #eee
|
||||
background isDark ? #1e222b : #eee
|
||||
|
||||
> .avatar
|
||||
width 32px
|
||||
|
|
@ -324,4 +322,11 @@ export default Vue.extend({
|
|||
> span
|
||||
margin 0 8px
|
||||
line-height 32px
|
||||
|
||||
.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,18 +38,18 @@ root(isDark)
|
|||
margin 0
|
||||
padding 12px 20px
|
||||
font-size 14px
|
||||
border 1px solid #dcdfe6
|
||||
border 1px solid isDark ? #6d727d : #dcdfe6
|
||||
border-radius 4px
|
||||
outline none
|
||||
box-shadow none
|
||||
color #606266
|
||||
color isDark ? #fff : #606266
|
||||
transition 0.1s
|
||||
|
||||
&:hover
|
||||
&:focus
|
||||
color $theme-color
|
||||
background rgba($theme-color, 0.12)
|
||||
border-color rgba($theme-color, 0.3)
|
||||
background rgba($theme-color, isDark ? 0.2 : 0.12)
|
||||
border-color rgba($theme-color, isDark ? 0.5 : 0.3)
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 20%)
|
||||
|
|
|
|||
|
|
@ -60,6 +60,10 @@ root(isDark)
|
|||
> *
|
||||
user-select none
|
||||
|
||||
&:hover
|
||||
> .button
|
||||
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
|
||||
&.disabled
|
||||
opacity 0.6
|
||||
cursor not-allowed
|
||||
|
|
@ -89,7 +93,7 @@ root(isDark)
|
|||
width 20px
|
||||
height 20px
|
||||
background none
|
||||
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4)
|
||||
border-radius 100%
|
||||
transition inherit
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue