From 43d1ed7932bcf7e1cdbc9358d8fbc8819c1aee81 Mon Sep 17 00:00:00 2001
From: satr14 <admin@satr14.my.id>
Date: Sat, 25 Jul 2026 17:10:41 +0700
Subject: [PATCH 1/3] board updating subscriber and listener

---
 src/lib/chess/types.ts  |  3 +++
 src/lib/chess/utils.ts  | 17 +++++++++++++++--
 src/routes/+page.svelte | 18 +++++++++---------
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/lib/chess/types.ts b/src/lib/chess/types.ts
index 44e147d..dde6bce 100644
--- a/src/lib/chess/types.ts
+++ b/src/lib/chess/types.ts
@@ -1,3 +1,6 @@
+import { Game } from "./utils";
+export type GameListener = (board: Game) => void;
+
 export enum Piece {
   EMPTY = 0,
   KING = 1,
diff --git a/src/lib/chess/utils.ts b/src/lib/chess/utils.ts
index 90acea8..e7eb6df 100644
--- a/src/lib/chess/utils.ts
+++ b/src/lib/chess/utils.ts
@@ -1,8 +1,8 @@
-import { CHAR_TO_PIECE, Piece } from "./types";
+import { CHAR_TO_PIECE, Piece, type GameListener } from "./types";
 
 export const startFEN = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0";
 
-export class Board {
+export class Game {
   public board = new Int8Array(8 ** 2);
   public details = {
     whiteTurn: true,
@@ -14,11 +14,22 @@ export class Board {
     halfMove: 0,
     fullMove: 0,
   };
+
+  private listeners = new Set<GameListener>();
   
   constructor() {
     this.loadFEN();
   }
 
+  private notify() {
+    for (const listener of this.listeners) listener(this);
+  }
+
+  subscribe(listener: GameListener): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  
   loadFEN(fen = startFEN) {
     const [position, turn, castling, enPassant, halfMove, fullMove] = fen.split(" ");
     
@@ -43,6 +54,8 @@ export class Board {
 
     this.details.halfMove = parseInt(halfMove);
     this.details.fullMove = parseInt(fullMove);
+
+    this.notify();
   }
 }
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3ac01ec..33c31b5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,20 +1,21 @@
 <script lang="ts">
   import { PIECE_TO_CHAR } from "$lib/chess/types";
-  import { Board, startFEN } from "$lib/chess/utils";
+  import { Game, startFEN } from "$lib/chess/utils";
 
-  const board = new Board();
-
-  let boardView = $state(Array.from(board.board));
   let showIndex = $state(false);
   let fen = $state(startFEN);
 
+  const game = new Game();
+  let board = $state(Array.from(game.board));
+
+  game.subscribe(updateView);
   function updateView() {
-    boardView = Array.from(board.board);
+    board = Array.from(game.board);
   }
 </script>
 
 <div class="grid grid-cols-8 gap-0 border-2">
-  {#each boardView as square, index}
+  {#each board as square, index}
     <div class="h-20 aspect-square relative flex justify-center items-center
       {index % 2 === Math.floor(index / 8) % 2 ? 'bg-orange-200 text-stone-800' : 'bg-amber-800 text-stone-200'}
     ">
@@ -31,10 +32,9 @@
   <label class="block">
     fen (enter to set):
     <input type="text" onkeypress={(e) => e.key === 'Enter' && (() => {
-      board.loadFEN(fen)
-      updateView()
+      game.loadFEN(fen);
     })()} bind:value={fen} />
   </label>
   <button onclick={updateView}>update view</button>
-  <button onclick={() => console.log(board)}>dump game to console</button>
+  <button onclick={() => console.log(game)}>dump game to console</button>
 </div>
\ No newline at end of file

From 7b396243ad6face31f1621d6f90ad7822fd90a77 Mon Sep 17 00:00:00 2001
From: satr14 <admin@satr14.my.id>
Date: Sat, 25 Jul 2026 17:34:29 +0700
Subject: [PATCH 2/3] detail display

---
 src/lib/chess/utils.ts  | 11 ++++++++++-
 src/routes/+page.svelte | 36 +++++++++++++++++++++++++++++++++++-
 src/routes/layout.css   |  6 +++++-
 3 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/lib/chess/utils.ts b/src/lib/chess/utils.ts
index e7eb6df..33a99e3 100644
--- a/src/lib/chess/utils.ts
+++ b/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,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 33c31b5..4c4c825 100644
--- a/src/routes/+page.svelte
+++ b/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} />
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 46b5600..6e343a7 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -3,4 +3,8 @@
 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; }
\ No newline at end of file
+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; }

From 05debd41f1078ade1112f728a1c9e36a6ce5e5a8 Mon Sep 17 00:00:00 2001
From: satr14 <admin@satr14.my.id>
Date: Sat, 25 Jul 2026 17:35:59 +0700
Subject: [PATCH 3/3] show ascii

---
 src/routes/+page.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4c4c825..ea6797a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -29,6 +29,7 @@
   {/each}
 </div>
 <div>
+  <pre>{ascii}</pre>
   <ul>
     {#each Object.entries(game.details).filter(([k]) => k !== "castling") as [key, val]}
       <li>