view updater

src/routes/+page.svelte

@@ -2,16 +2,22 @@
   import { Board, startFEN } from "$lib/chess/utils";
 
   const board = new Board();
+
+  let boardView = $state(Array.from(board.board));
   let showIndex = $state(false);
   let fen = $state(startFEN);
+
+  function updateView() {
+    boardView = Array.from(board.board);
+  }
 </script>
 
 <div class="grid grid-cols-8 gap-0 border-2">
-  {#each board.board as square, index}
+  {#each boardView as square, index}
     <div class="h-20 aspect-square flex justify-center items-center
       {index % 2 === Math.floor(index / 8) % 2 ? 'bg-orange-200 text-stone-800' : 'bg-amber-800 text-stone-200'}
     ">
-      {#if square}<img src="assets/{square}.svg" alt="p{square}" class="h-16 aspect-square"/>{/if}
+      {#if square}<img src="assets/{square}.svg" alt="p{square}" class="h-18 aspect-square"/>{/if}
       {showIndex ? index : ''}
     </div>
   {/each}
@@ -22,8 +28,9 @@
     <input type="checkbox" bind:checked={showIndex} />
   </label>
   <label class="block">
-    fen:
+    fen (enter to set):
     <input type="text" onkeypress={(e) => e.key === 'Enter' && board.loadFEN(fen)} bind:value={fen} />
   </label>
+  <button onclick={updateView}>update view</button>
   <button onclick={() => console.log(board)}>dump game to console</button>
 </div>