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