detail display

src/lib/chess/utils.ts

@@ -1,4 +1,4 @@
-import { CHAR_TO_PIECE, Piece, type GameListener } from "./types";
+import { CHAR_TO_PIECE, Piece, PIECE_TO_CHAR, type GameListener } from "./types";
 
 export const startFEN = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0";
 
@@ -59,6 +59,15 @@ export class Game {
   }
 }
 
+export function boardToAscii(board: Int8Array): string {
+  let ascii = '';
+  board.forEach((piece, i) => {
+    if (i % 8 === 0 && i !== 0) ascii += '\n';
+    ascii += PIECE_TO_CHAR[piece];
+  });
+  return ascii;
+}
+
 function algebraicToIndex(algebraic: string): number {
   const FILE_TO_INDEX: Record<string, number> = {
     a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7,

src/routes/+page.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
   import { PIECE_TO_CHAR } from "$lib/chess/types";
-  import { Game, startFEN } from "$lib/chess/utils";
+  import { boardToAscii, Game, startFEN } from "$lib/chess/utils";
 
   let showIndex = $state(false);
   let fen = $state(startFEN);
 
   const game = new Game();
   let board = $state(Array.from(game.board));
+  let ascii = $state(boardToAscii(game.board));
+  let details = $state(game.details)
 
   game.subscribe(updateView);
   function updateView() {
     board = Array.from(game.board);
+    ascii = boardToAscii(game.board);
+    details = game.details; 
   }
 </script>
 
@@ -25,6 +29,36 @@
   {/each}
 </div>
 <div>
+  <ul>
+    {#each Object.entries(game.details).filter(([k]) => k !== "castling") as [key, val]}
+      <li>
+        <strong>{key}</strong>:
+        {val.toString()}
+      </li>
+    {/each}
+    <table>
+      <thead>
+        <tr>
+          <th>Castling</th>
+          <th>King</th>
+          <th>Queen</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>White</th>
+          <td>{game.details.castling.white.king}</td>
+          <td>{game.details.castling.white.queen}</td>
+        </tr>
+        <tr>
+          <th>Black</th>
+          <td>{game.details.castling.black.king}</td>
+          <td>{game.details.castling.black.queen}</td>
+        </tr>
+      </tbody>
+    </table>
+  </ul>
+  <hr class="border border-stone-200 my-4">
   <label class="block">
     show index
     <input type="checkbox" bind:checked={showIndex} />

src/routes/layout.css

@@ -4,3 +4,7 @@ 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; }
+
+table { @apply w-full border-collapse; }
+th, td { @apply border border-gray-700 px-2 py-1 text-center }
+th { @apply font-bold; }