dan/slightlyComplicatedTicTacToe
1
0
Fork 0
mirror of https://github.com/danbulant/slightlyComplicatedTicTacToe synced 2026-06-20 23:11:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

good visual style

Browse source
This commit is contained in:
Daniel Bulant 2023-01-19 20:44:51 +01:00
parent 50ee193892
commit d30f029627
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
client/src/lib/game.svelte
View file

@ -153,10 +153,10 @@
<main class:disabled={overallState} class="flex flex-wrap min-h-100vh min-w-full items-center">
<div class="board relative">
{#each classes as className, i}
<div class:disabled={containerStates[i]} class:current={currentContainer === i} class:highlighted={highlightedContainer === i} class="squares-container {className}">
<div class:hover={hoveredPiece?.i == i} class:disabled={containerStates[i]} class:current={currentContainer === i} class:highlighted={highlightedContainer === i} class="squares-container {className}">
{#each (new Array(9)) as _, j}
{@const move = moves.find(move => move.i == i && move.j == j)}
<div on:click={() => addMove(i, j)} class="square" class:move class:preview={!move} class:cross={move && move.p==1} class:circle={move && move.p==2} on:mouseover={() => hoveredPiece = { i, j }} on:mouseleave={() => { if(hoveredPiece?.i == i && hoveredPiece.j == j) hoveredPiece = null; }}>
<div on:click={() => addMove(i, j)} class:hover={hoveredPiece?.i == i && hoveredPiece.j == j} class="square" class:move class:preview={!move} class:cross={move && move.p==1} class:circle={move && move.p==2} on:mouseover={() => hoveredPiece = { i, j }} on:mouseleave={() => { if(hoveredPiece?.i == i && hoveredPiece.j == j) hoveredPiece = null; }}>
{#if move}
{#if move.p == 1}
<svg width="16" height="16">
@ -235,7 +235,7 @@
<div class="info min-w-60 px-4 min-h-full">
<div class="moves">
{#each moves as move}
<Move player={move.p} board={move.i} piece={move.j} />
<Move player={move.p} board={move.i} piece={move.j} on:mouseover={() => hoveredPiece = { i: move.i, j: move.j }} on:mouseout={() => { if(hoveredPiece?.j == move.j && hoveredPiece.i == move.i) hoveredPiece = null }} />
{/each}
<Move latest player={currentPlayer} board={hoveredPiece?.i ?? "?"} piece={hoveredPiece?.j ?? "?"} />
</div>
@ -270,6 +270,12 @@
.square {
@apply border-black border-solid border w-6 h-6 p-4 cursor-pointer flex items-center justify-center;
}
.squares-container:not(.current) .square:active {
@apply bg-red-600/10;
}
.squares-container.hover {
@apply opacity-100;
}
.square.preview svg {
@apply hidden opacity-20;
}
@ -282,9 +288,15 @@
.square svg {
@apply w-full h-full;
}
.square:hover {
.square:hover, .square.hover {
@apply bg-black/5;
}
.square.hover.cross {
@apply text-red-500;
}
.square.hover.circle {
@apply text-blue-500;
}
.highlighted {
@apply opacity-75;
}

6
client/src/lib/move.svelte
View file

@ -4,7 +4,7 @@
export var piece: number | "?";
export var latest: boolean = false;
</script>
<div class="move" class:latest>
<div class="move select-none" class:latest on:mouseover on:mouseout>
<span class="player player-{player}">
{#if player == 1}
<svg width="16" height="16">
@ -17,7 +17,7 @@
</svg>
{/if}
</span>
<span class="board flex items-center">B{board}<svg width="16" height="16">
<span class="board flex items-center">B{board == "?" ? "?" : board + 1}<svg width="16" height="16">
<line x1="33%" y1="0" x2="33%" y2="100%" stroke="currentColor" stroke-width="2" />
<line x1="66%" y1="0" x2="66%" y2="100%" stroke="currentColor" stroke-width="2" />
<line x1="0" y1="33%" x2="100%" y2="33%" stroke="currentColor" stroke-width="2" />
@ -27,7 +27,7 @@
<rect x="{[0,33,66][Math.floor(board / 3)]}%" y="{[0,33,66][(board % 3)]}%" width="33%" height="33%" fill="currentColor" stroke="none" />
{/if}
</svg></span>
<span class="piece flex items-center">#{piece}<svg width="16" height="16">
<span class="piece flex items-center">#{piece == "?" ? "?" : piece + 1}<svg width="16" height="16">
<line x1="33%" y1="0" x2="33%" y2="100%" stroke="currentColor" stroke-width="2" />
<line x1="66%" y1="0" x2="66%" y2="100%" stroke="currentColor" stroke-width="2" />
<line x1="0" y1="33%" x2="100%" y2="33%" stroke="currentColor" stroke-width="2" />