HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

🎨

Browse source
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>
<div class="player" v-if="game.isEnded"> <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> <span>{{ logPos }} / {{ logs.length }}</span>
<div> <ui-horizon-group>
<button @click="logPos++" :disabled="logPos == logs.length"><fa icon="angle-right"/></button> <ui-button @click="logPos = 0" :disabled="logPos == 0"><fa :icon="faAngleDoubleLeft"/></ui-button>
<button @click="logPos = logs.length" :disabled="logPos == logs.length"><fa icon="angle-double-right"/></button> <ui-button @click="logPos--" :disabled="logPos == 0"><fa :icon="faAngleLeft"/></ui-button>
</div> <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>
<div class="info"> <div class="info">
@ -75,6 +73,7 @@ import i18n from '../../../../../i18n';
import * as CRC32 from 'crc-32'; import * as CRC32 from 'crc-32';
import Reversi, { Color } from '../../../../../../../games/reversi/core'; import Reversi, { Color } from '../../../../../../../games/reversi/core';
import { url } from '../../../../../config'; import { url } from '../../../../../config';
import { faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('common/views/components/games/reversi/reversi.game.vue'), i18n: i18n('common/views/components/games/reversi/reversi.game.vue'),
@ -99,7 +98,8 @@ export default Vue.extend({
o: null as Reversi, o: null as Reversi,
logs: [], logs: [],
logPos: 0, logPos: 0,
pollingClock: null pollingClock: null,
faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight
}; };
}, },
@ -449,7 +449,9 @@ export default Vue.extend({
padding-bottom 16px padding-bottom 16px
> .player > .player
padding-bottom 32px padding 0 16px 32px 16px
margin 0 auto
max-width 500px
> span > span
display inline-block 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 pointer-events none
user-select none
&:disabled
opacity 0.7
&:focus &:focus
&:after &:after
@ -107,30 +111,30 @@ export default Vue.extend({
color var(--text) color var(--text)
background var(--buttonBg) background var(--buttonBg)
&:hover &:not(:disabled):hover
background var(--buttonHoverBg) background var(--buttonHoverBg)
&:active &:not(:disabled):active
background var(--buttonActiveBg) background var(--buttonActiveBg)
&.primary &.primary
color var(--primaryForeground) color var(--primaryForeground)
background var(--primary) background var(--primary)
&:hover &:not(:disabled):hover
background var(--primaryLighten5) background var(--primaryLighten5)
&:active &:not(:disabled):active
background var(--primaryDarken5) background var(--primaryDarken5)
&:not(.fill) &:not(.fill)
color var(--primary) color var(--primary)
background none background none
&:hover &:not(:disabled):hover
color var(--primaryDarken5) color var(--primaryDarken5)
&:active &:not(:disabled):active
background var(--primaryAlpha03) background var(--primaryAlpha03)
</style> </style>