From 014d170e6ab009c0c7fa2b5c1148d20067cf49a1 Mon Sep 17 00:00:00 2001
From: satr14 <admin@satr14.my.id>
Date: Sat, 25 Jul 2026 09:23:44 +0700
Subject: [PATCH] piece display

---
 src/lib/chess/types.ts                 | 12 +++++++
 src/lib/chess/utils.ts                 | 48 ++++++++++++++++++++++++++
 src/routes/+layout.svelte              |  2 +-
 src/routes/+page.svelte                | 18 +++++++---
 static/assets/{queen-w.svg => 10.svg}  |  0
 static/assets/{rook-w.svg => 11.svg}   |  0
 static/assets/{bishop-w.svg => 12.svg} |  0
 static/assets/{knight-w.svg => 13.svg} |  0
 static/assets/{pawn-w.svg => 14.svg}   |  0
 static/assets/{king-b.svg => 17.svg}   |  0
 static/assets/{queen-b.svg => 18.svg}  |  0
 static/assets/{rook-b.svg => 19.svg}   |  0
 static/assets/{bishop-b.svg => 20.svg} |  0
 static/assets/{knight-b.svg => 21.svg} |  0
 static/assets/{pawn-b.svg => 22.svg}   |  0
 static/assets/{king-w.svg => 9.svg}    |  0
 16 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/chess/types.ts
 create mode 100644 src/lib/chess/utils.ts
 rename static/assets/{queen-w.svg => 10.svg} (100%)
 rename static/assets/{rook-w.svg => 11.svg} (100%)
 rename static/assets/{bishop-w.svg => 12.svg} (100%)
 rename static/assets/{knight-w.svg => 13.svg} (100%)
 rename static/assets/{pawn-w.svg => 14.svg} (100%)
 rename static/assets/{king-b.svg => 17.svg} (100%)
 rename static/assets/{queen-b.svg => 18.svg} (100%)
 rename static/assets/{rook-b.svg => 19.svg} (100%)
 rename static/assets/{bishop-b.svg => 20.svg} (100%)
 rename static/assets/{knight-b.svg => 21.svg} (100%)
 rename static/assets/{pawn-b.svg => 22.svg} (100%)
 rename static/assets/{king-w.svg => 9.svg} (100%)

diff --git a/src/lib/chess/types.ts b/src/lib/chess/types.ts
new file mode 100644
index 0000000..1abd471
--- /dev/null
+++ b/src/lib/chess/types.ts
@@ -0,0 +1,12 @@
+export enum Piece {
+  EMPTY = 0,
+  KING = 1,
+  QUEEN = 2,
+  ROOK = 3,
+  BISHOP = 4,
+  KNIGHT = 5,
+  PAWN = 6,
+
+  WHITE = 8,
+  BLACK = 16,
+}
\ No newline at end of file
diff --git a/src/lib/chess/utils.ts b/src/lib/chess/utils.ts
new file mode 100644
index 0000000..ca00f08
--- /dev/null
+++ b/src/lib/chess/utils.ts
@@ -0,0 +1,48 @@
+import { Piece } from "./types";
+
+// export function fen2array(fen: string): Int8Array<ArrayBuffer> {
+// }
+
+
+export class Board {
+  public board: Int8Array;
+  constructor() {
+    const board = new Int8Array(8**2);
+    board[0] = Piece.WHITE | Piece.ROOK;
+    board[1] = Piece.WHITE | Piece.KNIGHT;
+    board[2] = Piece.WHITE | Piece.BISHOP;
+    board[3] = Piece.WHITE | Piece.QUEEN;
+    board[4] = Piece.WHITE | Piece.KING;
+    board[5] = Piece.WHITE | Piece.BISHOP;
+    board[6] = Piece.WHITE | Piece.KNIGHT;
+    board[7] = Piece.WHITE | Piece.ROOK;
+    board[8] = Piece.WHITE | Piece.PAWN;
+    board[9] = Piece.WHITE | Piece.PAWN;
+    board[10] = Piece.WHITE | Piece.PAWN;
+    board[11] = Piece.WHITE | Piece.PAWN;
+    board[12] = Piece.WHITE | Piece.PAWN;
+    board[13] = Piece.WHITE | Piece.PAWN;
+    board[14] = Piece.WHITE | Piece.PAWN;
+    board[15] = Piece.WHITE | Piece.PAWN;
+
+    board[48] = Piece.BLACK | Piece.PAWN;
+    board[49] = Piece.BLACK | Piece.PAWN;
+    board[50] = Piece.BLACK | Piece.PAWN;
+    board[51] = Piece.BLACK | Piece.PAWN;
+    board[52] = Piece.BLACK | Piece.PAWN;
+    board[53] = Piece.BLACK | Piece.PAWN;
+    board[54] = Piece.BLACK | Piece.PAWN;
+    board[55] = Piece.BLACK | Piece.PAWN;
+    board[56] = Piece.BLACK | Piece.ROOK;
+    board[57] = Piece.BLACK | Piece.KNIGHT;
+    board[58] = Piece.BLACK | Piece.BISHOP;
+    board[59] = Piece.BLACK | Piece.QUEEN;
+    board[60] = Piece.BLACK | Piece.KING;
+    board[61] = Piece.BLACK | Piece.BISHOP;
+    board[62] = Piece.BLACK | Piece.KNIGHT;
+    board[63] = Piece.BLACK | Piece.ROOK;
+
+    this.board = board;
+    return this;
+  }
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0806ab6..501967e 100644
--- a/src/routes/+layout.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5a17237..4225948 100644
--- a/src/routes/+page.svelte
+++ b/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>
\ No newline at end of file
diff --git a/static/assets/queen-w.svg b/static/assets/10.svg
similarity index 100%
rename from static/assets/queen-w.svg
rename to static/assets/10.svg
diff --git a/static/assets/rook-w.svg b/static/assets/11.svg
similarity index 100%
rename from static/assets/rook-w.svg
rename to static/assets/11.svg
diff --git a/static/assets/bishop-w.svg b/static/assets/12.svg
similarity index 100%
rename from static/assets/bishop-w.svg
rename to static/assets/12.svg
diff --git a/static/assets/knight-w.svg b/static/assets/13.svg
similarity index 100%
rename from static/assets/knight-w.svg
rename to static/assets/13.svg
diff --git a/static/assets/pawn-w.svg b/static/assets/14.svg
similarity index 100%
rename from static/assets/pawn-w.svg
rename to static/assets/14.svg
diff --git a/static/assets/king-b.svg b/static/assets/17.svg
similarity index 100%
rename from static/assets/king-b.svg
rename to static/assets/17.svg
diff --git a/static/assets/queen-b.svg b/static/assets/18.svg
similarity index 100%
rename from static/assets/queen-b.svg
rename to static/assets/18.svg
diff --git a/static/assets/rook-b.svg b/static/assets/19.svg
similarity index 100%
rename from static/assets/rook-b.svg
rename to static/assets/19.svg
diff --git a/static/assets/bishop-b.svg b/static/assets/20.svg
similarity index 100%
rename from static/assets/bishop-b.svg
rename to static/assets/20.svg
diff --git a/static/assets/knight-b.svg b/static/assets/21.svg
similarity index 100%
rename from static/assets/knight-b.svg
rename to static/assets/21.svg
diff --git a/static/assets/pawn-b.svg b/static/assets/22.svg
similarity index 100%
rename from static/assets/pawn-b.svg
rename to static/assets/22.svg
diff --git a/static/assets/king-w.svg b/static/assets/9.svg
similarity index 100%
rename from static/assets/king-w.svg
rename to static/assets/9.svg