Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 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> <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> <header><b>{{ blackUser | userName }}</b>(%i18n:common.reversi.black%) vs <b>{{ whiteUser | userName }}</b>(%i18n:common.reversi.white%)</header>
<div style="overflow: hidden"> <div style="overflow: hidden">
@ -258,12 +258,12 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.root root(isDark)
text-align center text-align center
> header > header
padding 8px padding 8px
border-bottom dashed 1px #c4cdd4 border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4
> .board > .board
width calc(100% - 16px) width calc(100% - 16px)
@ -327,16 +327,16 @@ export default Vue.extend({
user-select none user-select none
&.empty &.empty
border solid 2px #eee border solid 2px isDark ? #51595f : #eee
&.empty.can &.empty.can
background #eee background isDark ? #51595f : #eee
&.empty.myTurn &.empty.myTurn
border-color #ddd border-color isDark ? #6a767f : #ddd
&.can &.can
background #eee background isDark ? #51595f : #eee
cursor pointer cursor pointer
&:hover &:hover
@ -350,7 +350,7 @@ export default Vue.extend({
box-shadow 0 0 0 4px rgba($theme-color, 0.7) box-shadow 0 0 0 4px rgba($theme-color, 0.7)
&.isEnded &.isEnded
border-color #ddd border-color isDark ? #6a767f : #ddd
&.none &.none
border-color transparent !important border-color transparent !important
@ -388,4 +388,11 @@ export default Vue.extend({
display inline-block display inline-block
margin 0 8px margin 0 8px
min-width 70px min-width 70px
.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
root(true)
.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
root(false)
</style> </style>

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

@ -17,12 +17,13 @@
</header> </header>
<div> <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('')" <div v-for="(x, i) in game.settings.map.join('')"
:data-none="x == ' '" :data-none="x == ' '"
@click="onPixelClick(i, x)"> @click="onPixelClick(i, x)">
<template v-if="x == 'b'">%fa:circle%</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'">%fa:circle R%</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> </div>
</div> </div>
@ -35,8 +36,8 @@
<div> <div>
<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">%i18n:@random%</form-radio> <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="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] }}{{ game.user2 | userName }}{{ '%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>
</div> </div>
@ -250,7 +251,7 @@ export default Vue.extend({
root(isDark) root(isDark)
text-align center text-align center
background #f9f9f9 background isDark ? #191b22 : #f9f9f9
> header > header
padding 8px padding 8px
@ -266,40 +267,72 @@ root(isDark)
> header > header
> select > select
width 100% width 100%
padding 12px 16px padding 12px 14px
border 1px solid #dcdfe6 background isDark ? #282C37 : #fff
border 1px solid isDark ? #6a707d : #dcdfe6
border-radius 4px 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) transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
&:hover &:hover
border-color #c0c4cc border-color isDark ? #a7aebd : #c0c4cc
&:focus &:focus
&:active &:active
border-color $theme-color 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 .card
max-width 400px max-width 400px
border-radius 4px border-radius 4px
border 1px solid #ebeef5
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
color #303133 color isDark ? #fff : #303133
box-shadow 0 2px 12px 0 rgba(#000, 0.1) box-shadow 0 2px 12px 0 rgba(#000, 0.1)
> header > header
padding 18px 20px padding 18px 20px
border-bottom 1px solid #ebeef5 border-bottom 1px solid isDark ? #1c2023 : #ebeef5
> div > div
padding 20px padding 20px
color isDark ? #fff : #606266
> footer > footer
position sticky position sticky
bottom 0 bottom 0
padding 16px padding 16px
background rgba(255, 255, 255, 0.9) background rgba(isDark ? #191b22 : #fff, 0.9)
border-top solid 1px #c4cdd4 border-top solid 1px isDark ? #606266 : #c4cdd4
> .status > .status
margin 0 0 16px 0 margin 0 0 16px 0
@ -311,29 +344,3 @@ root(isDark)
root(false) root(false)
</style> </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> <template>
<div class="mk-reversi"> <div class="vchtoekanapleubgzioubdtmlkribzfd">
<div v-if="game"> <div v-if="game">
<x-gameroom :game="game"/> <x-gameroom :game="game"/>
</div> </div>
@ -200,9 +200,9 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-reversi root(isDark)
color #677f84 color isDark ? #fff : #677f84
background #fff background isDark ? #191b22 : #fff
> .matching > .matching
> h1 > h1
@ -227,7 +227,7 @@ export default Vue.extend({
text-align center text-align center
font-weight normal font-weight normal
color #fff color #fff
background linear-gradient(to bottom, #8bca3e, #d6cf31) background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31)
& + p & + p
margin 0 margin 0
@ -235,7 +235,7 @@ export default Vue.extend({
margin-bottom 12px margin-bottom 12px
text-align center text-align center
font-size 14px font-size 14px
border-bottom solid 1px #d3d9dc border-bottom solid 1px isDark ? #535f65 : #d3d9dc
> .play > .play
margin 0 auto margin 0 auto
@ -250,14 +250,14 @@ export default Vue.extend({
padding 16px padding 16px
font-size 14px font-size 14px
text-align left text-align left
background #f5f5f5 background isDark ? #282c37 : #f5f5f5
border-radius 8px border-radius 8px
> section > section
margin 0 auto margin 0 auto
padding 0 16px 16px 16px padding 0 16px 16px 16px
max-width 500px max-width 500px
border-top solid 1px #d3d9dc border-top solid 1px isDark ? #535f65 : #d3d9dc
> h2 > h2
margin 0 margin 0
@ -298,8 +298,9 @@ export default Vue.extend({
display block display block
margin 8px 0 margin 8px 0
padding 8px padding 8px
color #677f84 color isDark ? #fff : #677f84
border solid 1px #e1e5e8 background isDark ? #282c37 : #fff
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
border-radius 6px border-radius 6px
cursor pointer cursor pointer
@ -307,14 +308,11 @@ export default Vue.extend({
pointer-events none pointer-events none
user-select none user-select none
&:focus
border-color $theme-color
&:hover &:hover
background #f5f5f5 background isDark ? #313543 : #f5f5f5
&:active &:active
background #eee background isDark ? #1e222b : #eee
> .avatar > .avatar
width 32px width 32px
@ -324,4 +322,11 @@ export default Vue.extend({
> span > span
margin 0 8px margin 0 8px
line-height 32px line-height 32px
.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
root(true)
.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
root(false)
</style> </style>

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

@ -38,18 +38,18 @@ root(isDark)
margin 0 margin 0
padding 12px 20px padding 12px 20px
font-size 14px font-size 14px
border 1px solid #dcdfe6 border 1px solid isDark ? #6d727d : #dcdfe6
border-radius 4px border-radius 4px
outline none outline none
box-shadow none box-shadow none
color #606266 color isDark ? #fff : #606266
transition 0.1s transition 0.1s
&:hover &:hover
&:focus &:focus
color $theme-color color $theme-color
background rgba($theme-color, 0.12) background rgba($theme-color, isDark ? 0.2 : 0.12)
border-color rgba($theme-color, 0.3) border-color rgba($theme-color, isDark ? 0.5 : 0.3)
&:active &:active
color darken($theme-color, 20%) 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 user-select none
&:hover
> .button
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
&.disabled &.disabled
opacity 0.6 opacity 0.6
cursor not-allowed cursor not-allowed
@ -89,7 +93,7 @@ root(isDark)
width 20px width 20px
height 20px height 20px
background none 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% border-radius 100%
transition inherit transition inherit