mirror of
https://github.com/danbulant/slightlyComplicatedTicTacToe
synced 2026-06-23 16:52:10 +00:00
70 lines
No EOL
2.6 KiB
Svelte
70 lines
No EOL
2.6 KiB
Svelte
<script lang="ts">
|
|
import { fade } from "svelte/transition";
|
|
|
|
export var player: number;
|
|
export var board: number | "?";
|
|
export var piece: number | "?";
|
|
export var latest: boolean = false;
|
|
</script>
|
|
|
|
<div class="move select-none" class:latest on:mouseover on:mouseout on:focus on:blur transition:fade={{ duration: latest ? 0 : 300 }}>
|
|
<span class="player player-{player}">
|
|
{#if player == 1}
|
|
<svg width="16" height="16">
|
|
<line x1="0" y1="0" x2="100%" y2="100%" stroke="currentColor" stroke-width="2" />
|
|
<line x1="100%" y1="0" x2="0" y2="100%" stroke="currentColor" stroke-width="2" />
|
|
</svg>
|
|
{:else}
|
|
<svg width="16" height="16">
|
|
<circle cx="50%" cy="50%" r="45%" stroke="currentColor" stroke-width="2" fill="none" />
|
|
</svg>
|
|
{/if}
|
|
</span>
|
|
<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" />
|
|
<line x1="0" y1="66%" x2="100%" y2="66%" stroke="currentColor" stroke-width="2" />
|
|
|
|
{#if board !== "?"}
|
|
<rect y="{[0,33,66][Math.floor(board / 3)]}%" x="{[0,33,66][(board % 3)]}%" width="33%" height="33%" fill="currentColor" stroke="none" />
|
|
{/if}
|
|
</svg></span>
|
|
<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" />
|
|
<line x1="0" y1="66%" x2="100%" y2="66%" stroke="currentColor" stroke-width="2" />
|
|
|
|
{#if piece !== "?"}
|
|
<rect y="{[0,33,66][Math.floor(piece / 3)]}%" x="{[0,33,66][(piece % 3)]}%" width="33%" height="33%" fill="currentColor" stroke="none" />
|
|
{/if}
|
|
</svg></span>
|
|
</div>
|
|
|
|
<style>
|
|
.move {
|
|
@apply flex gap-2 p-1 items-center leading-none;
|
|
}
|
|
.latest {
|
|
@apply opacity-35;
|
|
}
|
|
:global(.dark) .latest {
|
|
@apply opacity-50;
|
|
}
|
|
.player {
|
|
@apply inline-block w-1em h-1em;
|
|
}
|
|
svg {
|
|
margin-top: -0.175em;
|
|
}
|
|
.player svg {
|
|
@apply w-full h-full;
|
|
}
|
|
.player-1 {
|
|
@apply text-red-500;
|
|
}
|
|
.player-2 {
|
|
@apply text-blue-500;
|
|
}
|
|
</style> |