piece display

src/routes/+layout.svelte

@@ -6,6 +6,6 @@
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
-<div class="flex justify-center items-center min-h-full">
+<div class="flex justify-center items-center gap-4 min-h-full">
   {@render children()}
 </div>

src/routes/+page.svelte

@@ -1,13 +1,23 @@
 <script lang="ts">
-  const board = new Array(8**2);
+  import { Board } from "$lib/chess/utils";
+
+  const board = new Board();
+  let showIndex = $state(false);
 </script>
 
 <div class="grid grid-cols-8 gap-0 border-2">
-  {#each board as info, index}
+  {#each board.board as square, index}
     <div class="h-20 aspect-square flex justify-center items-center
-      {index % 2 === Math.floor(index / 8) % 2 ? 'bg-stone-200 text-stone-800' : 'bg-stone-800 text-stone-200'}
+      {index % 2 === Math.floor(index / 8) % 2 ? 'bg-orange-200 text-stone-800' : 'bg-amber-800 text-stone-200'}
     ">
-      {index}
+      {#if square}<img src="assets/{square}.svg" alt="{square}" class="h-16 aspect-square"/>{/if}
+      {showIndex ? index : ''}
     </div>
   {/each}
+</div>
+<div>
+  <label>
+    show index
+    <input type="checkbox" bind:checked={showIndex} />
+  </label>
 </div>