Michcio/lost-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-08-03 15:59:24 +09:00
parent a88942f58a
commit cd6829ca64
5 changed files with 92 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/client/app/common/views/components/games/reversi/reversi.game.vue
View file

@ -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>

89
src/client/app/common/views/components/games/reversi/reversi.room.vue
View file

@ -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,40 +267,72 @@ 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
> div
> .random
padding 32px 0
font-size 64px
color isDark ? #4e5961 : #d8d8d8
> .board
display grid
grid-gap 4px
width 300px
height 300px
margin 0 auto
color isDark ? #fff : #444
> div
background transparent
border solid 2px isDark ? #6a767f : #ddd
border-radius 6px
overflow hidden
cursor pointer
*
pointer-events none
user-select none
width 100%
height 100%
&[data-none]
border-color transparent
.card
max-width 400px
border-radius 4px
border 1px solid #ebeef5
background isDark ? #282C37 : #fff
color #303133
color isDark ? #fff : #303133
box-shadow 0 2px 12px 0 rgba(#000, 0.1)
> header
padding 18px 20px
border-bottom 1px solid #ebeef5
border-bottom 1px solid isDark ? #1c2023 : #ebeef5
> div
padding 20px
color isDark ? #fff : #606266
> footer
position sticky
bottom 0
padding 16px
background rgba(255, 255, 255, 0.9)
border-top solid 1px #c4cdd4
background rgba(isDark ? #191b22 : #fff, 0.9)
border-top solid 1px isDark ? #606266 : #c4cdd4
> .status
margin 0 0 16px 0
@ -311,29 +344,3 @@ root(isDark)
root(false)
</style>
<style lang="stylus" module>
.board
display grid
grid-gap 4px
width 300px
height 300px
margin 0 auto
> div
background transparent
border solid 2px #ddd
border-radius 6px
overflow hidden
cursor pointer
*
pointer-events none
user-select none
width 100%
height 100%
&[data-none]
border-color transparent
</style>

35
src/client/app/common/views/components/games/reversi/reversi.vue
View file

@ -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>

8
src/client/app/common/views/components/ui/form/button.vue
View file

@ -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%)

6
src/client/app/common/views/components/ui/form/radio.vue
View file

@ -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