@johnmorrisdotca/jirai 0.0.0-stage → 0.2.0

package/src/mount.ts

@@ -0,0 +1,176 @@
+import { activeCells } from "./shape.ts";
+import { hintFor } from "./deduce.ts";
+import { boardModel } from "./draw.ts";
+import { newGame, play, visibleGame, withBoard } from "./game.ts";
+import { MARKS, MOVES, STATUSES } from "./jirai.constants.ts";
+import { validCell } from "./grid.ts";
+import { gameFromProgress, gameProgress } from "./keep.ts";
+import { JIRAI_STYLE } from "./style.ts";
+import { words } from "./strings.ts";
+import type { Board, Game, Move, Settings } from "./jirai.types.ts";
+import type { DrawOptions, JiraiMount, MountOptions } from "./ui.types.ts";
+
+/**
+ * One playable board in any element. The engine owns the rules, this module
+ * owns presses, focus, the clock and the worker. Destroy removes only its own
+ * root, so two mounted boards never take each other's listeners or children.
+ */
+export function mountJirai(host: HTMLElement, options: MountOptions = {}): JiraiMount {
+  const doc = host.ownerDocument;
+  let draw: DrawOptions = { material: "ivory", pieces: "flags", language: "en", ...options };
+  const game = options.progress === undefined ? newGame(options.settings) : gameFromProgress(options.progress);
+  if (game === null) throw new Error("Invalid saved Minesweeper game.");
+  let current: Game = game;
+  let focus = activeCells(game.settings)[0]!, marking = false, hint: number | null = null;
+  let worker: Worker | null = null, pending = false, disposed = false;
+  let started: number | null = null, elapsed = 0;
+  const root = doc.createElement("div"); root.className = "jr-root";
+  const style = doc.createElement("style"); style.textContent = JIRAI_STYLE;
+  const stats = doc.createElement("div"); stats.className = "jr-stats";
+  const scroll = doc.createElement("div"); scroll.className = "jr-scroll";
+  const board = doc.createElement("div"); board.className = "jr-board"; board.setAttribute("role", "group");
+  const status = doc.createElement("p"); status.className = "jr-status"; status.setAttribute("role", "status");
+  const controls = doc.createElement("div"); controls.className = "jr-controls";
+  const help = doc.createElement("p"); help.className = "jr-help";
+  const dialog = doc.createElement("dialog"); dialog.className = "jr-dialog";
+  const close = doc.createElement("button"); close.className = "jr-button jr-close"; close.type = "button";
+  dialog.append(close);
+  scroll.append(board); root.append(style, stats, scroll, status, controls, help); host.append(root, dialog);
+  let lastOpener: HTMLElement | null = null;
+  const leaveDialog = (): void => { root.append(stats, scroll, status, controls, help); lastOpener?.focus(); };
+  dialog.addEventListener("close", leaveDialog);
+  close.addEventListener("click", () => dialog.close());
+  function stopWorker(): void { worker?.terminate(); worker = null; pending = false; }
+  function clock(): number { return elapsed + (started === null ? 0 : Math.floor((Date.now() - started) / 1000)); }
+  function report(next: Game): void {
+    const before = current.status;
+    current = next; hint = null;
+    if (started === null && current.board !== null && current.status === STATUSES.playing) started = Date.now();
+    if (current.status === STATUSES.won || current.status === STATUSES.lost) { elapsed = clock(); started = null; }
+    const detail = structuredClone(current);
+    host.dispatchEvent(new CustomEvent("jirai-change", { detail })); options.onChange?.(detail);
+    if (before !== current.status && (current.status === STATUSES.won || current.status === STATUSES.lost)) {
+      host.dispatchEvent(new CustomEvent("jirai-finish", { detail })); options.onFinish?.(detail);
+    }
+    render();
+  }
+  function failed(error: Error): void { stopWorker(); render(); status.textContent = words(draw.language).error; options.onError?.(error); }
+  function make(move: Move): void {
+    if (disposed || pending) return;
+    if (move.kind === MOVES.reveal && current.board === null && current.marks[move.cell] !== MARKS.flag && validCell(current.settings, move.cell)) {
+      pending = true; render();
+      try {
+        worker = new Worker(new URL("./worker.js", import.meta.url), { type: "module" });
+        worker.onmessage = (event: MessageEvent<{ board?: Board; error?: string }>) => {
+          if (disposed) return;
+          stopWorker();
+          if (event.data.board === undefined) { failed(new Error(event.data.error ?? "Generation failed.")); return; }
+          try { report(play(withBoard(current, event.data.board), move)); } catch (error) { failed(error as Error); }
+        };
+        worker.onerror = () => failed(new Error("The board worker could not load. Serve the package over HTTP, and allow workers in your content security policy."));
+        worker.postMessage({ settings: current.settings, first: move.cell });
+      } catch (error) { failed(error as Error); }
+      return;
+    }
+    try { const next = play(current, move); if (next !== current) report(next); } catch (error) { failed(error as Error); }
+  }
+  function showHint(): void {
+    if (pending || current.status !== STATUSES.playing) return;
+    const result = hintFor(visibleGame(current));
+    const safe = result.safe.find((cell) => current.marks[cell] !== MARKS.open);
+    const mine = result.mines.find((cell) => current.marks[cell] !== MARKS.flag);
+    const highlighted = safe ?? mine ?? null;
+    if (highlighted !== null && !current.helped) report({ ...current, helped: true });
+    hint = highlighted;
+    render();
+    const say = words(draw.language);
+    status.textContent = hint === null ? say.hintNone : `${safe !== undefined ? say.hintSafe : say.hintMine} ${result.reason === "none" ? "" : say[result.reason]}`;
+  }
+  function renderStats(): void {
+    const say = words(draw.language);
+    const values = [[say.mines, current.settings.mines - current.marks.filter((m) => m === MARKS.flag).length], [say.time, `${Math.floor(clock() / 60)}:${String(clock() % 60).padStart(2,"0")}`], [say.moves, current.moves.length]];
+    stats.replaceChildren(...values.map(([label, value]) => {
+      const part = doc.createElement("span"); part.className = "jr-stat";
+      const name = doc.createElement("small"); name.textContent = String(label);
+      const number = doc.createElement("strong"); number.textContent = String(value);
+      part.append(name, number); return part;
+    }));
+  }
+  function render(): void {
+    if (disposed) return;
+    const say = words(draw.language);
+    root.dataset.material = draw.material; root.dataset.grid = current.settings.grid; root.dataset.shape = current.settings.shape ?? "rectangle"; root.lang = draw.language ?? "en";
+    board.setAttribute("aria-label", say.board); board.setAttribute("aria-busy", String(pending));
+    const model = boardModel(current, { ...draw, hint });
+    const active = doc.activeElement instanceof HTMLElement && board.contains(doc.activeElement);
+    board.style.aspectRatio = `${model.width} / ${model.height}`;
+    board.style.minWidth = `${model.width * 27}px`;
+    board.replaceChildren(...model.cells.map((cell) => {
+      const button = doc.createElement("button"); button.type = "button"; button.className = "jr-cell";
+      button.dataset.cell = String(cell.cell); button.dataset.kind = cell.kind; button.dataset.hint = String(cell.hint);
+      button.dataset.number = cell.kind === MARKS.open ? cell.text : "";
+      button.setAttribute("aria-label", cell.label); button.tabIndex = cell.cell === focus ? 0 : -1;
+      button.disabled = pending; button.textContent = cell.text;
+      button.style.left = `${cell.x / model.width * 100}%`; button.style.top = `${cell.y / model.height * 100}%`;
+      button.style.width = `${cell.width / model.width * 100}%`; button.style.height = `${cell.height / model.height * 100}%`;
+      return button;
+    }));
+    if (active) board.querySelector<HTMLButtonElement>(`[data-cell="${focus}"]`)?.focus({ preventScroll: true });
+    renderStats(); status.textContent = pending ? say.checking : say[current.status]; help.textContent = say.help; close.textContent = say.close;
+    controls.replaceChildren();
+    if (options.controls === false) { stats.hidden = true; status.hidden = true; help.hidden = true; return; }
+    const button = (text: string, action: () => void): HTMLButtonElement => {
+      const made = doc.createElement("button"); made.type = "button"; made.className = "jr-button"; made.textContent = text;
+      made.addEventListener("click", action); controls.append(made); return made;
+    };
+    button(say.restart, () => handle.restart());
+    const mark = button(marking ? say.mark : say.reveal, () => { marking = !marking; render(); }); mark.setAttribute("aria-pressed", String(marking));
+    const hinted = button(say.hint, showHint); hinted.disabled = pending || current.status !== STATUSES.playing;
+    if (!dialog.open) button(say.view, () => { lastOpener = doc.activeElement as HTMLElement; dialog.append(stats, scroll, status, controls); dialog.showModal(); render(); });
+  }
+  function cellOf(event: Event): number | null {
+    const target = event.target instanceof Element ? event.target.closest<HTMLButtonElement>("[data-cell]") : null;
+    return target === null ? null : Number(target.dataset.cell);
+  }
+  let hold: ReturnType<typeof setTimeout> | null = null, held = false, origin = { x: 0, y: 0 };
+  const cancelHold = (): void => { if (hold !== null) clearTimeout(hold); hold = null; };
+  board.addEventListener("pointerdown", (event) => {
+    held = false; cancelHold(); const cell = cellOf(event); if (cell === null) return;
+    focus = cell; origin = { x: event.clientX, y: event.clientY };
+    if (event.pointerType !== "mouse") hold = setTimeout(() => { held = true; make({ kind: MOVES.mark, cell }); }, 450);
+  });
+  board.addEventListener("pointermove", (event) => { if (Math.hypot(event.clientX - origin.x, event.clientY - origin.y) > 8) cancelHold(); });
+  board.addEventListener("pointerup", cancelHold); board.addEventListener("pointercancel", cancelHold);
+  board.addEventListener("click", (event) => { const cell = cellOf(event); if (cell !== null && !held) { focus = cell; make({ kind: marking ? MOVES.mark : MOVES.reveal, cell }); } held = false; });
+  board.addEventListener("contextmenu", (event) => { event.preventDefault(); cancelHold(); const cell = cellOf(event); if (cell !== null && !held) { focus = cell; make({ kind: MOVES.mark, cell }); } held = false; });
+  board.addEventListener("keydown", (event) => {
+    const cell = cellOf(event); if (cell === null) return;
+    const x = cell % current.settings.width, y = Math.floor(cell / current.settings.width);
+    const shifts: Record<string, number> = { ArrowLeft: x > 0 ? -1 : 0, ArrowRight: x < current.settings.width - 1 ? 1 : 0, ArrowUp: y > 0 ? -current.settings.width : 0, ArrowDown: y < current.settings.height - 1 ? current.settings.width : 0 };
+    if (event.key in shifts) { event.preventDefault(); const step = shifts[event.key]!;
+      let next = cell + step;
+      while (step !== 0 && next >= 0 && next < current.marks.length && !validCell(current.settings, next)) {
+        if (Math.abs(step) === 1 && Math.floor(next / current.settings.width) !== y) break;
+        next += step;
+      }
+      if (validCell(current.settings, next) && (Math.abs(step) !== 1 || Math.floor(next / current.settings.width) === y)) focus = next;
+      render(); board.querySelector<HTMLButtonElement>(`[data-cell="${focus}"]`)?.focus(); }
+    else if (event.key === " " || event.key.toLowerCase() === "f") { event.preventDefault(); focus = cell; make({ kind: MOVES.mark, cell }); }
+    else if (event.key === "Enter") { event.preventDefault(); focus = cell; make({ kind: MOVES.reveal, cell }); }
+  });
+  const timer = setInterval(() => { if (started !== null && !disposed) renderStats(); }, 1000);
+  const handle: JiraiMount = {
+    game: () => structuredClone(current), progress: () => gameProgress(current), play: (cell, mark = false) => make({ kind: mark ? MOVES.mark : MOVES.reveal, cell }), hint: showHint,
+    restart: () => { if (disposed) return; stopWorker(); elapsed = 0; started = null; report(newGame(current.settings)); },
+    load: (settings: Settings, progress?: string) => {
+      if (disposed) return;
+      const restored = progress === undefined ? newGame(settings) : gameFromProgress(progress);
+      if (restored === null) throw new Error("Invalid saved Minesweeper game.");
+      stopWorker(); elapsed = 0; started = null; focus = activeCells(restored.settings)[0]!; report(restored);
+    },
+    set: (changes) => { draw = { ...draw, ...changes }; render(); },
+    destroy: () => { disposed = true; stopWorker(); cancelHold(); clearInterval(timer); if (dialog.open) dialog.close(); root.remove(); dialog.remove(); },
+  };
+  if (current.status === STATUSES.playing) started = Date.now();
+  render(); return handle;
+}

package/src/orthogonal.ts

@@ -0,0 +1,49 @@
+import { deduce } from "./deduce.ts";
+import { newGame, visibleGame } from "./game.ts";
+import { makeBoard } from "./generate.ts";
+import { neighbours, validSettings } from "./grid.ts";
+import { gameFromProgress, gameProgress } from "./keep.ts";
+import type { Board, GenerationOptions, Game, Settings } from "./jirai.types.ts";
+
+/** Identifies the four-neighbour rules and progress-code format. */
+export const ORTHOGONAL_VARIANT = "orthogonal" as const;
+export type OrthogonalSettings = Omit<Settings, "grid">;
+
+/** Starts a game under four-neighbour rules. */
+export function newOrthogonalGame(settings: OrthogonalSettings): Game {
+  return newGame({ ...settings, grid: ORTHOGONAL_VARIANT });
+}
+
+/** Deals a board whose clues count only up, down, left and right. */
+export function makeOrthogonalBoard(
+  settings: OrthogonalSettings,
+  first: number,
+  options?: GenerationOptions,
+): Board {
+  return makeBoard({ ...settings, grid: ORTHOGONAL_VARIANT }, first, options);
+}
+
+/** Returns the adjacent cells under the orthogonal rules. */
+export function orthogonalNeighbours(settings: OrthogonalSettings, cell: number): number[] {
+  const complete = { ...settings, grid: ORTHOGONAL_VARIANT } as Settings;
+  if (!validSettings(complete)) throw new RangeError("Invalid orthogonal settings.");
+  return neighbours(complete, cell);
+}
+
+/** Gives a clue-only deduction; flags remain notes and cannot influence the result. */
+export function orthogonalHint(game: Game) {
+  if (game.settings.grid !== ORTHOGONAL_VARIANT) throw new RangeError("Expected an orthogonal game.");
+  return deduce(visibleGame(game));
+}
+
+/** Encodes an orthogonal game with an explicit variant marker and version 2. */
+export function encodeOrthogonalGame(game: Game): string {
+  if (game.settings.grid !== ORTHOGONAL_VARIANT) throw new RangeError("Expected an orthogonal game.");
+  return gameProgress(game);
+}
+
+/** Restores only version 2 orthogonal progress records. */
+export function decodeOrthogonalGame(code: string): Game | null {
+  const game = gameFromProgress(code);
+  return game?.settings.grid === ORTHOGONAL_VARIANT ? game : null;
+}

package/src/play-entry.ts

@@ -0,0 +1,3 @@
+export { mountJirai } from "./mount.ts";
+export type { JiraiMount, MountOptions } from "./ui.types.ts";
+export { STRINGS } from "./strings.ts";

package/src/random.ts

@@ -0,0 +1,20 @@
+/** Mulberry32, pinned by the replay tests: changing it would change every kept board. */
+export function seededRandom(seed: number): () => number {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+/** Fisher–Yates on a copy. A shuffle never changes the list given. */
+export function shuffled<T>(items: readonly T[], random: () => number): T[] {
+  const out = [...items];
+  for (let i = out.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(random() * (i + 1));
+    [out[i], out[j]] = [out[j]!, out[i]!];
+  }
+  return out;
+}

package/src/react.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+import { mountJirai } from "./mount.ts";
+import type { JiraiProps } from "./react.types.ts";
+
+/** The plain-DOM game as a React component. Options are read on mount; give it a new key to load a new board. */
+export function JiraiBoard({ settings, progress, material, pieces, language, controls, onChange, onFinish, onError, ...element }: JiraiProps) {
+  const host = useRef<HTMLDivElement>(null);
+  const latest = useRef({ onChange, onFinish, onError });
+  useEffect(() => { latest.current = { onChange, onFinish, onError }; });
+  useEffect(() => {
+    if (host.current === null) return;
+    const board = mountJirai(host.current, { settings, progress, material, pieces, language, controls,
+      onChange: (game) => latest.current.onChange?.(game), onFinish: (game) => latest.current.onFinish?.(game), onError: (error) => latest.current.onError?.(error) });
+    return () => board.destroy();
+  }, []);
+  return <div ref={host} {...element} />;
+}

package/src/react.types.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from "react";
+import type { MountOptions } from "./ui.types.ts";
+export type JiraiProps = MountOptions & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onError">;

package/src/shape.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import { activeCell, activeCells } from "./shape.ts";
+import { DEFAULT_SETTINGS, GRIDS } from "./jirai.constants.ts";
+import { neighboursOf, validSettings } from "./grid.ts";
+import { makeBoard, isSolvable } from "./generate.ts";
+import { newGame, play, visibleGame } from "./game.ts";
+import { boardModel } from "./draw.ts";
+import { gameFromProgress, gameProgress } from "./keep.ts";
+import type { Settings } from "./jirai.types.ts";
+
+describe("shaped minefields", () => {
+  for (const shape of ["heart", "star", "hexagon"] as const) for (const grid of [GRIDS.square, GRIDS.orthogonal, GRIDS.hex]) {
+    it(`${shape}/${grid} omits cells and retains reciprocal neighbours and proved deals`, () => {
+      const settings: Settings = { ...DEFAULT_SETTINGS, width: 17, height: 17, mines: 12, shape, grid };
+      for (const outside of [-1, 289, 1.5, NaN]) expect(activeCell(settings, outside)).toBe(false);
+      const cells = activeCells(settings), adjacent = neighboursOf(settings);
+      expect(cells.length).toBeGreaterThan(40); expect(cells.length).toBeLessThan(289);
+      for (const c of cells) for (const n of adjacent[c]!) {
+        expect(activeCell(settings, n)).toBe(true); expect(adjacent[n]).toContain(c);
+      }
+      const first = cells[Math.floor(cells.length / 2)]!;
+      for (let seed = 1; seed <= 12; seed += 1) {
+        const board = makeBoard({ ...settings, seed }, first);
+        expect(board.mines.filter(Boolean)).toHaveLength(12); expect(isSolvable(board)).toBe(true);
+        for (let c = 0; c < 289; c += 1) if (!activeCell(settings, c)) {
+          expect(board.mines[c]).toBe(false); expect(board.clues[c]).toBe(-2); expect(adjacent[c]).toEqual([]);
+        }
+      }
+    });
+  }
+  it("never draws or lets the player act on cut-out cells, and restores the shape", () => {
+    const settings: Settings = { ...DEFAULT_SETTINGS, width: 17, height: 17, shape: "heart", mines: 12 };
+    let game = newGame(settings);
+    const absent = Array.from({ length: 289 }, (_, c) => c).find(c => !activeCell(settings, c))!;
+    expect(play(game, { kind: "reveal", cell: absent })).toBe(game);
+    expect(play(game, { kind: "mark", cell: absent })).toBe(game);
+    expect(visibleGame(game).clues[absent]).toBe(-2);
+    expect(boardModel(game).cells.some(c => c.cell === absent)).toBe(false);
+    game = play(game, { kind: "reveal", cell: activeCells(settings)[50]! });
+    expect(gameFromProgress(gameProgress(game))?.settings.shape).toBe("heart");
+  });
+  it("wins when every active safe cell opens, without requiring absent cells", () => {
+    const settings: Settings = { ...DEFAULT_SETTINGS, width: 9, height: 9, shape: "star", mines: 1, noGuess: false };
+    let game = newGame(settings);
+    const first = activeCells(settings)[10]!;
+    game = play(game, { kind: "reveal", cell: first });
+    for (const c of activeCells(settings)) if (!game.board!.mines[c]) game = play(game, { kind: "reveal", cell: c });
+    expect(game.status).toBe("won");
+  });
+  it("rejects unknown outlines, tiny silhouettes, wrap cut-outs and excess mines", () => {
+    expect(validSettings({ ...DEFAULT_SETTINGS, shape: "toString" })).toBe(false);
+    expect(validSettings({ ...DEFAULT_SETTINGS, width: 5, height: 5, shape: "heart" })).toBe(false);
+    expect(validSettings({ ...DEFAULT_SETTINGS, shape: "heart", grid: "wrap" })).toBe(false);
+    expect(validSettings({ ...DEFAULT_SETTINGS, width: 9, height: 9, shape: "star", mines: 70 })).toBe(false);
+  });
+});

package/src/shape.ts

@@ -0,0 +1,32 @@
+import type { Settings } from "./jirai.types.ts";
+export const SHAPES = ["rectangle", "heart", "star", "hexagon"] as const;
+/** Row-major addresses stay stable; omitted cells have no clue and no neighbours. */
+export function activeCell(settings: Settings, cell: number): boolean {
+  if (!Number.isInteger(cell) || cell < 0 || cell >= settings.width * settings.height) return false;
+  const col = cell % settings.width, row = Math.floor(cell / settings.width);
+  const x = 2 * (col + .5) / settings.width - 1, y = 2 * (row + .5) / settings.height - 1;
+  switch (settings.shape ?? "rectangle") {
+    case "heart": {
+      const hx = x * 1.15, hy = -y * 1.25 + .15;
+      return (hx * hx + hy * hy - 1) ** 3 - hx * hx * hy ** 3 <= 0;
+    }
+    case "star": {
+      // A filled five-point polygon, never a decorative overlay on hidden square cells.
+      const vertices = Array.from({ length: 10 }, (_, i) => {
+        const angle = -Math.PI / 2 + i * Math.PI / 5, radius = i % 2 ? .48 : 1;
+        return [Math.cos(angle) * radius, Math.sin(angle) * radius] as const;
+      });
+      let inside = false;
+      for (let i = 0, j = 9; i < 10; j = i++) {
+        const [xi, yi] = vertices[i]!, [xj, yj] = vertices[j]!;
+        if ((yi > y) !== (yj > y) && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
+      }
+      return inside;
+    }
+    case "hexagon": return settings.grid === "hex" ? Math.abs(x + y) <= 1 : Math.abs(x) <= 1 - .5 * Math.abs(y);
+    default: return true;
+  }
+}
+export function activeCells(settings: Settings): number[] {
+  return Array.from({ length: settings.width * settings.height }, (_, cell) => cell).filter(cell => activeCell(settings, cell));
+}

package/src/strings.ts

@@ -0,0 +1,18 @@
+import type { Language } from "./jirai.types.ts";
+export const STRINGS = {
+  en: {
+    board: "Minesweeper board", covered: "covered", flag: "flagged", question: "uncertain", empty: "empty", mine: "mine", wrong: "incorrect flag",
+    ready: "Open a cell to begin. Your first cell is safe.", playing: "Read the numbers. Open every safe cell.", won: "Every safe cell is open. Well played.", lost: "A mine. Try the same board again, or start another.",
+    checking: "Finding a board that can be solved without guessing…", restart: "Start over", hint: "Hint", reveal: "Open", mark: "Mark", mines: "Mines left", time: "Time", moves: "Moves", clear: "Cleared", view: "Just the board", close: "Close", hintNone: "No certain move proved. This position may need a guess.", hintSafe: "This cell is safe.", hintMine: "This cell contains a mine.", count: "The neighbouring count settles it.", overlap: "Compare the overlapping clues.", total: "The total mine count settles it.", enumeration: "Every consistent arrangement gives the same answer.",
+    help: "Tap to open; right-click or hold to mark. Use the arrows to move, Enter to open, F or Space to mark. Tap an open number to clear its neighbours when the flags match.",
+    error: "A verified board was not found. Try another seed, an opening elsewhere, or fewer mines.",
+  },
+  ja: {
+    board: "地雷の盤", covered: "未開封", flag: "旗", question: "不明", empty: "空き", mine: "地雷", wrong: "間違った旗",
+    ready: "マスを開けて始めます。最初のマスは安全です。", playing: "数字を手がかりに、安全なマスをすべて開けましょう。", won: "安全なマスがすべて開きました。クリア！", lost: "地雷でした。同じ盤で再挑戦できます。",
+    checking: "推測なしで解ける盤を探しています…", restart: "やり直す", hint: "ヒント", reveal: "開く", mark: "印を付ける", mines: "残りの地雷", time: "時間", moves: "手数", clear: "開いたマス", view: "盤だけ", close: "閉じる", hintNone: "確実な手は見つかりませんでした。推測が必要かもしれません。", hintSafe: "このマスは安全です。", hintMine: "このマスには地雷があります。", count: "周囲の数字から確定できます。", overlap: "重なった手がかりを比べましょう。", total: "地雷の総数から確定できます。", enumeration: "可能な配置すべてで同じ答えになります。",
+    help: "タップで開く、右クリックか長押しで印を付けます。矢印キーで移動、Enterで開く、FかSpaceで印を付けます。旗の数が合う数字をタップすると周囲が開きます。",
+    error: "推測なしで解ける盤が見つかりませんでした。別のシード、別の開始マス、または少ない地雷で試してください。",
+  },
+} as const;
+export function words(language: Language = "en"): typeof STRINGS["en"] | typeof STRINGS["ja"] { return STRINGS[language]; }

package/src/style.ts

@@ -0,0 +1,22 @@
+/** Scoped to one mounted board. Its host supplies the font and may override every colour. */
+export const JIRAI_STYLE = `
+.jr-root{--jr-ground:#a98954;--jr-cover:#fbf8f1;--jr-open:#efe8d8;--jr-line:#cfc6b2;--jr-ink:#1f2320;--jr-accent:#2f7a4f;color:var(--jr-ui-ink,var(--jr-ink));font:inherit;position:relative}
+.jr-root[data-material=wood]{--jr-ground:#ae804a;--jr-cover:#e0bb7e;--jr-open:#c69d63;--jr-line:#936e40;--jr-ink:#352c20;background-image:repeating-linear-gradient(4deg,transparent 0 8px,#4b2b0c08 9px 10px)}
+.jr-root[data-material=slate]{--jr-ground:#252e32;--jr-cover:#455359;--jr-open:#303c41;--jr-line:#62747a;--jr-ink:#f3f0e5;--jr-accent:#b7d298}
+.jr-scroll{overflow:auto;padding:12px;border:1px solid var(--jr-line);border-radius:14px;background:var(--jr-ground);overscroll-behavior:contain}
+.jr-board{position:relative;width:100%;min-width:240px;margin:auto;isolation:isolate}
+.jr-cell{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px solid var(--jr-line);border-radius:4px;background:var(--jr-cover);color:var(--jr-ink);font:700 clamp(12px,2vw,22px)/1 ui-monospace,monospace;box-shadow:inset 0 2px 1px #fff7,inset 0 -2px 1px #0001;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;padding:0}
+.jr-root[data-grid=hex] .jr-cell{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border-radius:0}
+.jr-cell[data-kind=open]{background:var(--jr-open);box-shadow:none}
+.jr-cell[data-number="1"]{color:#326ca0}.jr-cell[data-number="2"]{color:#3d763c}.jr-cell[data-number="3"]{color:#a34438}.jr-cell[data-number="4"]{color:#704b97}.jr-cell[data-number="5"]{color:#8c542f}.jr-cell[data-number="6"]{color:#1c777b}
+.jr-root[data-material=slate] .jr-cell[data-kind=open]{color:#e8e6bd}
+.jr-cell[data-kind=flag]{color:var(--jr-accent)}.jr-cell[data-kind=question]{color:#8a702d}
+.jr-cell[data-kind=mine],.jr-cell[data-kind=wrong]{background:#ead4c5;color:#873e32}.jr-cell[data-kind=exploded]{background:#a34d3c;color:white}
+.jr-cell[data-hint=true]{background:#d4e5bc!important;color:#243d24!important;box-shadow:inset 0 0 0 3px #577b3f}
+.jr-cell:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #c0802e;z-index:2}.jr-cell:hover{filter:brightness(.97)}
+.jr-stats{display:flex;gap:18px;flex-wrap:wrap;font-variant-numeric:tabular-nums;margin:0 0 14px}.jr-stat{display:flex;gap:7px;align-items:baseline}.jr-stat small{opacity:.7;font-size:12px}.jr-stat strong{font-size:20px;font-weight:500}
+.jr-status{font-size:14px;line-height:1.5;min-height:1.5em;margin:12px 0}.jr-help{font-size:12px;line-height:1.65;opacity:.7}
+.jr-controls{display:flex;flex-wrap:wrap;gap:8px}.jr-button{font:inherit;font-size:13px;border:1px solid var(--jr-line);border-radius:999px;min-height:44px;padding:0 14px;background:var(--jr-ui-surface,var(--jr-cover));color:var(--jr-ui-ink,var(--jr-ink));border-color:var(--jr-ui-line,var(--jr-line));cursor:pointer}.jr-button:disabled{opacity:.5;cursor:wait}.jr-button[aria-pressed=true]{background:var(--jr-accent);color:white}.jr-button:focus-visible{outline:2px solid var(--jr-accent);outline-offset:3px}
+.jr-dialog{border:0;border-radius:20px;padding:24px;max-width:min(96vw,1000px);width:850px;background:var(--surface,#fbf8f1);color:var(--ink,#1f2320);--jr-ui-ink:var(--ink,#1f2320);--jr-ui-surface:var(--surface,#fbf8f1);--jr-ui-line:var(--rule,#ddd6c6);box-sizing:border-box}.jr-dialog::backdrop{background:#172019bb}.jr-dialog .jr-board{max-height:75vh}.jr-close{float:right;margin-bottom:10px}
+@media(prefers-reduced-motion:no-preference){.jr-cell{transition:background .12s}}
+`;

package/src/ui.types.ts

@@ -0,0 +1,22 @@
+import type { Game, Language, Material, Pieces, Settings } from "./jirai.types.ts";
+export type DrawOptions = { material?: Material; pieces?: Pieces; language?: Language; hint?: number | null };
+export type CellModel = { cell: number; x: number; y: number; width: number; height: number; label: string; text: string; kind: string; hint: boolean };
+export type BoardModel = { width: number; height: number; cells: CellModel[] };
+export type MountOptions = DrawOptions & {
+  settings?: Settings;
+  progress?: string;
+  controls?: boolean;
+  onChange?: (game: Game) => void;
+  onFinish?: (game: Game) => void;
+  onError?: (error: Error) => void;
+};
+export type JiraiMount = {
+  game: () => Game;
+  progress: () => string;
+  play: (cell: number, mark?: boolean) => void;
+  hint: () => void;
+  restart: () => void;
+  load: (settings: Settings, progress?: string) => void;
+  set: (options: DrawOptions) => void;
+  destroy: () => void;
+};

package/src/worker.ts

@@ -0,0 +1,7 @@
+import { makeBoard } from "./generate.ts";
+import type { Settings } from "./jirai.types.ts";
+// A separate entry: importing the engine or renderer never creates a worker.
+self.addEventListener("message", (event: MessageEvent<{ settings: Settings; first: number }>) => {
+  try { self.postMessage({ board: makeBoard(event.data.settings, event.data.first) }); }
+  catch (error) { self.postMessage({ error: error instanceof Error ? error.message : String(error) }); }
+});