feat(web): add interactive boards for all four MVP games (#99)

Author: nosam1998

.dependency-cruiser.cjs

@@ -25,6 +25,7 @@ module.exports = {
     },
   ],
   options: {
+    exclude: { path: "(^|/)(dist|node_modules)/" },
     doNotFollow: { path: "node_modules" },
     tsConfig: { fileName: "tsconfig.json" },
     tsPreCompilationDeps: true,

.prettierignore

@@ -0,0 +1 @@
+web/**/dist/

pnpm-lock.yaml

@@ -0,0 +1,104 @@
+import { expect, test } from "@playwright/test";
+const site = "http://127.0.0.1:18081";
+
+async function open(page, request, game, extra = {}) {
+  const response = await request.post("/v1/matches", { data: { game_id: game, seed: 2, include_info: false, ...extra } });
+  expect(response.ok()).toBe(true);
+  const { match_id: id } = await response.json();
+  await page.goto(site + "/#/matches/" + id + "?seat=0&hotseat=1");
+  const board = page.getByRole("group", { name: /interactive board/ });
+  await expect(board).toHaveAttribute("data-ready", "true");
+  await expect(page.getByLabel("Move notation")).toBeEnabled();
+  return { id, board };
+}
+async function ready(page, turn) {
+  await expect(page.locator(".turn-counter")).toHaveText("Turn " + turn);
+  await expect(page.getByLabel("Move notation")).toBeEnabled();
+}
+async function cell(board, col, row, n) {
+  const canvas = board.locator("canvas");
+  const bounds = await canvas.boundingBox();
+  await canvas.click({ position: { x: (40 + (col + .5) * 520 / n) * bounds.width / 600, y: (25 + (row + .5) * 520 / n) * bounds.height / 600 } });
+}
+
+test("Phaser loads on demand and Tic-Tac-Toe supports keyboard and legal-only clicks", async ({ page, request }) => {
+  const loaded = [];
+  page.on("request", request => loaded.push(request.url()));
+  await page.goto(site);
+  await expect(page.getByRole("heading", { name: /A playground/ })).toBeVisible();
+  expect(loaded.some(url => /phaser\.js/.test(url))).toBe(false);
+  const { id, board } = await open(page, request, "tictactoe");
+  await board.focus();
+  await board.press("Enter");
+  await ready(page, 1);
+  const submissions = [];
+  page.on("request", request => { if (request.method() === "POST" && request.url().endsWith("/actions")) submissions.push(request); });
+  await cell(board, 0, 0, 3);
+  await board.press("ArrowDown");
+  await board.press("Enter");
+  await ready(page, 2);
+  expect(submissions).toHaveLength(1);
+  for (const [turn, keys] of [[3, ["ArrowUp", "ArrowRight"]], [4, ["ArrowDown"]], [5, ["ArrowUp", "ArrowRight"]]]) {
+    for (const key of keys) await board.press(key);
+    await board.press("Enter");
+    if (turn < 5) await ready(page, turn);
+  }
+  await expect(page.getByTestId("match-status")).toHaveText("X wins");
+  const final = await (await request.get(`/v1/matches/${id}/state?seat=0`)).json();
+  expect(final.returns).toEqual([1, -1]);
+});
+
+test("Connect Four keyboard columns follow gravity through a full game", async ({ page, request }) => {
+  const { id, board } = await open(page, request, "connect4");
+  for (const [index, key] of ["1", "2", "1", "2", "1", "2", "1"].entries()) {
+    await board.press(key);
+    if (index < 6) await ready(page, index + 1);
+  }
+  await expect(page.getByTestId("match-status")).toHaveText("Red wins");
+  const final = await (await request.get(`/v1/matches/${id}/state?seat=0`)).json();
+  expect(final.observation.json.rows[5].slice(0, 2)).toEqual([0, 1]);
+  expect(final.observation.json.rows[2][0]).toBe(0);
+});
+
+test("chess board uses server promotion choices", async ({ page, request }) => {
+  const { id, board } = await open(page, request, "chess", { start: { position: "7k/P7/8/8/8/8/8/7K w - - 0 1" } });
+  await cell(board, 0, 1, 8);
+  await cell(board, 0, 0, 8);
+  await expect(page.locator(".turn-counter")).toHaveText("Turn 0");
+  await board.press("q");
+  await ready(page, 1);
+  const final = await (await request.get(`/v1/matches/${id}/state?seat=0`)).json();
+  expect(final.observation.json.pieces.a8).toBe("Q");
+});
+
+test("mobile Sudoku protects givens and supports notes and touch digit entry", async ({ page, request }) => {
+  await page.setViewportSize({ width: 360, height: 780 });
+  const { id, board } = await open(page, request, "sudoku", { config: { size: 4 }, start: { position: "123434122143432." } });
+  await cell(board, 0, 0, 4);
+  await board.press("2");
+  await expect(page.locator(".turn-counter")).toHaveText("Turn 0");
+  await cell(board, 3, 3, 4);
+  await board.press("n");
+  await expect(page.getByRole("button", { name: "Notes", exact: true })).toHaveAttribute("aria-pressed", "true");
+  await board.press("1");
+  await ready(page, 1);
+  const noted = await (await request.get(`/v1/matches/${id}/state?seat=0`)).json();
+  expect(noted.observation.json.notes[15]).toBe(1);
+  await page.getByRole("button", { name: "Notes", exact: true }).click();
+  await page.getByRole("button", { name: "1", exact: true }).click();
+  await expect(page.getByTestId("match-status")).toContainText("completed the puzzle");
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+  const bounds = await board.boundingBox();
+  expect(bounds.width).toBeLessThanOrEqual(360);
+});
+
+
+test("renderer loading failures preserve playable text controls", async ({ page, request }) => {
+  await page.route("**/game-kit/src/board-host.tsx*", route => route.abort());
+  const response = await request.post("/v1/matches", { data: { game_id: "tictactoe", include_info: false } });
+  const { match_id: id } = await response.json();
+  await page.goto(site + "/#/matches/" + id + "?seat=0&hotseat=1");
+  await expect(page.getByText("The visual board is unavailable. Use the text board below.")).toBeVisible();
+  await page.getByLabel("Legal move", { exact: true }).selectOption("r2c2");
+  await ready(page, 1);
+});

tests/browser/scenes.spec.mjs

@@ -58,3 +58,20 @@ resignation and draw controls. Engine hints default off and must be allowed
 when creating the match. Retries of an uncertain move reuse its request key,
 turn and seat; mutations never retry automatically. Local mode treats this
 browser as the match owner; seat selection is a view, not authentication.
+
+## Visual boards
+
+Tic-Tac-Toe, Connect Four, chess and Sudoku have Phaser scene packages. The game
+kit loads Phaser and each scene on demand; library and guide pages do not load
+the renderer. Scenes draw only server observations and submit actions from the
+server's legal list. They contain no game rules or network requests.
+
+Click/tap a cell, or focus the board and use arrow keys and Enter. Connect Four
+also accepts column keys 1–7. Chess highlights legal destinations and asks for a
+promotion piece. Sudoku supports notes (N), digit keys and an accessible touch
+keypad; givens cannot be changed. The text board and notation input remain
+available, including when a renderer cannot load.
+
+Add a scene in `packages/game-<id>` using `BoardScene` from `@gfa/game-kit/scene`,
+then add its lazy loader to `packages/game-kit/src/registry.ts`. The site uses
+only the game-kit interface. Unregistered games keep the generic text renderer.

web/README.md

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import type { FormEvent } from "react";
 import { ApiError } from "@gfa/api-client";
 import type { MatchState, Schemas } from "@gfa/api-client";
-import { TextBoard } from "@gfa/game-kit";
+import { GameBoard, TextBoard } from "@gfa/game-kit";
 import { api } from "./api";
 import { Failure, Loading } from "./feedback";
 import { MatchEvents } from "./match-events";
@@ -180,6 +180,15 @@ export function MatchPage({
             </h2>
             <span className="turn-counter">Turn {current.turn}</span>
           </div>
+          <GameBoard
+            gameId={metadata.data.game_id}
+            label={game.data.name}
+            observation={current.observation.json}
+            perspective={seat}
+            legalActions={current.legal_actions.map((action) => action.string)}
+            onAction={submit}
+            disabled={!canAct}
+          />
           <TextBoard
             text={current.observation.text}
             legalActions={current.legal_actions.map((action) => action.string)}

web/apps/site/src/match.tsx

@@ -749,3 +749,42 @@ pre {
     flex-basis: 100%;
   }
 }
+
+.visual-board {
+  width: 100%;
+  max-width: 600px;
+  aspect-ratio: 1;
+  margin: 16px auto;
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  touch-action: manipulation;
+}
+.visual-board canvas {
+  display: block;
+}
+.visual-board:focus-visible {
+  outline: 3px solid var(--accent);
+  outline-offset: 3px;
+}
+.board-instructions {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.65;
+}
+.board-keypad {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
+  gap: 6px;
+}
+.board-keypad button {
+  min-height: 44px;
+  min-width: 0;
+  padding: 6px 2px;
+  font-size: 12px;
+}
+
+.board-keypad button[aria-pressed="true"] {
+  border-color: var(--accent);
+  color: var(--accent);
+}

web/apps/site/src/style.css

@@ -0,0 +1,10 @@
+{
+  "name": "@gfa/game-chess",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "exports": "./src/index.ts",
+  "dependencies": {
+    "@gfa/game-kit": "workspace:*"
+  }
+}