natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2018-11-25 05:10:48 +09:00
parent 3b10e93efe
commit a4726e683b
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/client/app/common/views/components/games/reversi/reversi.game.vue
View File

@ -50,15 +50,13 @@
</div>
<div class="player" v-if="game.isEnded">
<div>
<button @click="logPos = 0" :disabled="logPos == 0"><fa icon="angle-double-left"/></button>
<button @click="logPos--" :disabled="logPos == 0"><fa icon="angle-left"/></button>
</div>
<span>{{ logPos }} / {{ logs.length }}</span>
<div>
<button @click="logPos++" :disabled="logPos == logs.length"><fa icon="angle-right"/></button>
<button @click="logPos = logs.length" :disabled="logPos == logs.length"><fa icon="angle-double-right"/></button>
</div>
<ui-horizon-group>
<ui-button @click="logPos = 0" :disabled="logPos == 0"><fa :icon="faAngleDoubleLeft"/></ui-button>
<ui-button @click="logPos--" :disabled="logPos == 0"><fa :icon="faAngleLeft"/></ui-button>
<ui-button @click="logPos++" :disabled="logPos == logs.length"><fa :icon="faAngleRight"/></ui-button>
<ui-button @click="logPos = logs.length" :disabled="logPos == logs.length"><fa :icon="faAngleDoubleRight"/></ui-button>
</ui-horizon-group>
</div>
<div class="info">
@ -75,6 +73,7 @@ import i18n from '../../../../../i18n';
import * as CRC32 from 'crc-32';
import Reversi, { Color } from '../../../../../../../games/reversi/core';
import { url } from '../../../../../config';
import { faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({
i18n: i18n('common/views/components/games/reversi/reversi.game.vue'),
@ -99,7 +98,8 @@ export default Vue.extend({
o: null as Reversi,
logs: [],
logPos: 0,
pollingClock: null
pollingClock: null,
faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight
};
},
@ -449,7 +449,9 @@ export default Vue.extend({
padding-bottom 16px
> .player
padding-bottom 32px
padding 0 16px 32px 16px
margin 0 auto
max-width 500px
> span
display inline-block

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

@ -79,6 +79,10 @@ export default Vue.extend({
*
pointer-events none
user-select none
&:disabled
opacity 0.7
&:focus
&:after
@ -107,30 +111,30 @@ export default Vue.extend({
color var(--text)
background var(--buttonBg)
&:hover
&:not(:disabled):hover
background var(--buttonHoverBg)
&:active
&:not(:disabled):active
background var(--buttonActiveBg)
&.primary
color var(--primaryForeground)
background var(--primary)
&:hover
&:not(:disabled):hover
background var(--primaryLighten5)
&:active
&:not(:disabled):active
background var(--primaryDarken5)
&:not(.fill)
color var(--primary)
background none
&:hover
&:not(:disabled):hover
color var(--primaryDarken5)
&:active
&:not(:disabled):active
background var(--primaryAlpha03)
</style>