dan/slightlyComplicatedTicTacToe
1
0
Fork 0
mirror of https://github.com/danbulant/slightlyComplicatedTicTacToe synced 2026-07-05 19:20:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

better move display

Browse source
This commit is contained in:
Daniel Bulant 2023-01-19 19:30:42 +01:00
parent fba7bf1c99
commit 50ee193892
1 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
export var player: number; export var player: number;
export var board: number | string; export var board: number | "?";
export var piece: number | string; export var piece: number | "?";
export var latest: boolean = false; export var latest: boolean = false;
</script> </script>
<div class="move" class:latest> <div class="move" class:latest>
@ -17,8 +17,26 @@
</svg> </svg>
{/if} {/if}
</span> </span>
<span class="board">B<b>{board}</b></span> <span class="board flex items-center">B{board}<svg width="16" height="16">
<span class="piece">#<b>{piece}</b></span> <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 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">
<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 x="{[0,33,66][Math.floor(piece / 3)]}%" y="{[0,33,66][(piece % 3)]}%" width="33%" height="33%" fill="currentColor" stroke="none" />
{/if}
</svg></span>
</div> </div>
<style> <style>
@ -30,7 +48,9 @@
} }
.player { .player {
@apply inline-block w-1em h-1em; @apply inline-block w-1em h-1em;
margin-top: -0.225em; }
svg {
margin-top: -0.175em;
} }
.player svg { .player svg {
@apply w-full h-full; @apply w-full h-full;