add live game UI with board rendering, timers, and SAN move list

app/static/js/main.js

@@ -1,16 +0,0 @@
-import { createWSClient } from "./ws.js";
-import {
-  handleP2Connected,
-  handleGameStarted,
-  handleCodeGameCreated,
-} from "./ws_handlers.js";
-
-function main() {
-  createWSClient({
-    onGameStarted: handleGameStarted,
-    onP2Connected: handleP2Connected,
-    onGameCreated: handleCodeGameCreated,
-  });
-}
-
-main();

app/static/js/play.js

@@ -0,0 +1,9 @@
+import { PlayApp } from "./play/app.js";
+
+function main() {
+  const app = new PlayApp();
+  window.playApp = app;
+  app.installSocket();
+}
+
+main();

app/static/js/play/constants.js

@@ -0,0 +1,29 @@
+export const PIECE_IMAGE_PATHS = {
+  P: "/static/board_pieces/wp.png",
+  N: "/static/board_pieces/wn.png",
+  B: "/static/board_pieces/wb.png",
+  R: "/static/board_pieces/wr.png",
+  Q: "/static/board_pieces/wq.png",
+  K: "/static/board_pieces/wk.png",
+  p: "/static/board_pieces/bp.png",
+  n: "/static/board_pieces/bn.png",
+  b: "/static/board_pieces/bb.png",
+  r: "/static/board_pieces/br.png",
+  q: "/static/board_pieces/bq.png",
+  k: "/static/board_pieces/bk.png",
+};
+
+export const START_COUNTS = {
+  P: 8,
+  N: 2,
+  B: 2,
+  R: 2,
+  Q: 1,
+  K: 1,
+  p: 8,
+  n: 2,
+  b: 2,
+  r: 2,
+  q: 1,
+  k: 1,
+};

app/static/js/play/utils.js

@@ -0,0 +1,32 @@
+export function formatClock(ms) {
+  if (!Number.isFinite(ms) || ms < 0) {
+    return "--:--";
+  }
+
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+}
+
+export function parseFenBoard(fen) {
+  const boardPart = (fen || "").split(" ")[0] || "8/8/8/8/8/8/8/8";
+  const rows = boardPart.split("/");
+  const board = {};
+
+  for (let r = 0; r < 8; r += 1) {
+    let file = 0;
+    for (const fenChar of rows[r]) {
+      const num = Number(fenChar);
+      if (!Number.isNaN(num)) {
+        file += num;
+        continue;
+      }
+      const square = `${"abcdefgh"[file]}${8 - r}`;
+      board[square] = fenChar;
+      file += 1;
+    }
+  }
+
+  return board;
+}