🎨
This commit is contained in:
parent
3b10e93efe
commit
a4726e683b
2 changed files with 22 additions and 16 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue