src/lib/chess/utils.ts

@@ -5,7 +5,6 @@ import { Piece } from "./types";
 
 export const startFEN = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0";
 const CHAR_TO_PIECE: Record<string, number> = {
-  "-": Piece.EMPTY,
   "K": Piece.WHITE | Piece.KING,
   "Q": Piece.WHITE | Piece.QUEEN,
   "R": Piece.WHITE | Piece.ROOK,
@@ -32,22 +31,13 @@ export class Board {
     halfMove: 0,
     fullMove: 0,
   };
-  
   constructor() {
     this.loadFEN();
   }
 
   loadFEN(fen = startFEN) {
     const [position, turn, castling, enPassant, halfMove, fullMove] = fen.split(" ");
-    this.board.fill(Piece.EMPTY);
     
-    position.split("/").forEach((row, rank) => {
+    
-      let file = 0;
-      row.split("").forEach((char) => {
-        if (!isNaN(parseInt(char))) return file += parseInt(char);
-        this.board[rank * 8 + file] = CHAR_TO_PIECE[char]
-        file++;
-      });
-    });
   }
 }

src/routes/+page.svelte

@@ -2,22 +2,16 @@
   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 boardView as square, 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-orange-200 text-stone-800' : 'bg-amber-800 text-stone-200'}
     ">
-      {#if square}<img src="assets/{square}.svg" alt="p{square}" class="h-18 aspect-square"/>{/if}
+      {#if square}<img src="assets/{square}.svg" alt="p{square}" class="h-16 aspect-square"/>{/if}
       {showIndex ? index : ''}
     </div>
   {/each}
@@ -28,9 +22,7 @@
     <input type="checkbox" bind:checked={showIndex} />
   </label>
   <label class="block">
-    fen (enter to set):
+    fen:
     <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>

src/routes/layout.css

@@ -2,5 +2,3 @@
 
 html, body { @apply h-full; }
 body { @apply bg-gray-900 text-gray-100; }
-
-input, button { @apply bg-stone-200 text-stone-800 px-2 py-1 m-1 rounded; }