@johnmorrisdotca/kazu 1.1.0 → 1.3.0

package/dist/index.d.ts

@@ -35,3 +35,14 @@ export { seededRandom, shuffled, freshKazuSeed, isKazuSeed, KAZU_SEED_MOST } fro
 export type { Random } from "./random.ts";
 export { VERSION } from "./version.ts";
 export * from "./shikaku-entry.ts";
+export * from "./hitori-entry.ts";
+export * from "./nurikabe-entry.ts";
+export * from "./akari-entry.ts";
+export * from "./juosan-entry.ts";
+export * from "./slitherlink-entry.ts";
+export * from "./ripple-entry.ts";
+export * from "./kakuro-entry.ts";
+export * from "./fillomino-entry.ts";
+export * from "./heyawake-entry.ts";
+export * from "./masyu-entry.ts";
+export * from "./yajilin-entry.ts";

package/dist/index.js

@@ -30,3 +30,14 @@ export { boxedLayout, boxOf, KAZU_BOXES, neighbours, regionsAreSound } from "./l
 export { seededRandom, shuffled, freshKazuSeed, isKazuSeed, KAZU_SEED_MOST } from "./random.js";
 export { VERSION } from "./version.js";
 export * from "./shikaku-entry.js";
+export * from "./hitori-entry.js";
+export * from "./nurikabe-entry.js";
+export * from "./akari-entry.js";
+export * from "./juosan-entry.js";
+export * from "./slitherlink-entry.js";
+export * from "./ripple-entry.js";
+export * from "./kakuro-entry.js";
+export * from "./fillomino-entry.js";
+export * from "./heyawake-entry.js";
+export * from "./masyu-entry.js";
+export * from "./yajilin-entry.js";

package/dist/juosan-draw-entry.d.ts

@@ -0,0 +1,2 @@
+export { drawJuosan } from "./juosanDraw.ts";
+export type { JuosanDrawOptions } from "./juosanPlay.types.ts";

package/dist/juosan-draw-entry.js

@@ -0,0 +1 @@
+export { drawJuosan } from "./juosanDraw.js";

package/dist/juosan-entry.d.ts

@@ -0,0 +1,11 @@
+export * from "./juosan.types.ts";
+export * from "./juosan.constants.ts";
+export * from "./juosanBoard.ts";
+export * from "./juosanSolve.ts";
+export * from "./juosanGenerate.ts";
+export * from "./juosanGame.ts";
+export { drawJuosan } from "./juosanDraw.ts";
+export { mountJuosan } from "./juosanMount.ts";
+export { JUOSAN_PLAY_STYLE } from "./juosanStyle.ts";
+export { JUOSAN_STRINGS } from "./juosanStrings.ts";
+export type * from "./juosanPlay.types.ts";

package/dist/juosan-entry.js

@@ -0,0 +1,10 @@
+export * from "./juosan.types.js";
+export * from "./juosan.constants.js";
+export * from "./juosanBoard.js";
+export * from "./juosanSolve.js";
+export * from "./juosanGenerate.js";
+export * from "./juosanGame.js";
+export { drawJuosan } from "./juosanDraw.js";
+export { mountJuosan } from "./juosanMount.js";
+export { JUOSAN_PLAY_STYLE } from "./juosanStyle.js";
+export { JUOSAN_STRINGS } from "./juosanStrings.js";

package/dist/juosan-play-entry.d.ts

@@ -0,0 +1,4 @@
+export { mountJuosan } from "./juosanMount.ts";
+export { JUOSAN_PLAY_STYLE } from "./juosanStyle.ts";
+export { JUOSAN_STRINGS } from "./juosanStrings.ts";
+export type * from "./juosanPlay.types.ts";

package/dist/juosan-play-entry.js

@@ -0,0 +1,3 @@
+export { mountJuosan } from "./juosanMount.js";
+export { JUOSAN_PLAY_STYLE } from "./juosanStyle.js";
+export { JUOSAN_STRINGS } from "./juosanStrings.js";

package/dist/juosan.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const JUOSAN_MOST_SIDE = 16;
+export declare const JUOSAN_MOST_NODES = 250000;
+export declare const JUOSAN_MOST_ATTEMPTS = 500;
+export declare const JUOSAN_LEVELS: readonly ["easy", "medium", "hard"];

package/dist/juosan.constants.js

@@ -0,0 +1,4 @@
+export const JUOSAN_MOST_SIDE = 16;
+export const JUOSAN_MOST_NODES = 250000;
+export const JUOSAN_MOST_ATTEMPTS = 500;
+export const JUOSAN_LEVELS = ["easy", "medium", "hard"];

package/dist/juosan.types.d.ts

@@ -0,0 +1,33 @@
+/** A territory is a list of zero-based cell indexes and an absolute orientation difference. */
+export type JuosanTerritory = {
+    cells: readonly number[];
+    difference: number | null;
+};
+export type JuosanBoard = {
+    width: number;
+    height: number;
+    territories: readonly JuosanTerritory[];
+};
+export type JuosanMark = 0 | 1 | 2;
+export type JuosanLevel = "easy" | "medium" | "hard";
+export type JuosanPuzzle = JuosanBoard & {
+    seed: number;
+    level: JuosanLevel;
+    solution: readonly JuosanMark[];
+};
+export type JuosanCheck = {
+    ok: boolean;
+    errors: readonly number[];
+};
+export type JuosanSolve = {
+    count: number;
+    solution: readonly JuosanMark[] | null;
+    complete: boolean;
+    nodes: number;
+};
+export type JuosanGame = {
+    board: JuosanBoard;
+    marks: readonly JuosanMark[];
+    history: readonly (readonly JuosanMark[])[];
+    helped: boolean;
+};

package/dist/juosan.types.js

@@ -0,0 +1 @@
+export {};

package/dist/juosanBoard.d.ts

@@ -0,0 +1,7 @@
+import type { JuosanBoard, JuosanCheck, JuosanMark } from "./juosan.types.ts";
+/** Whether territories partition a bounded board and each territory is connected. */
+export declare function isJuosanBoard(value: unknown): value is JuosanBoard;
+/** Returns the index of the territory containing a cell, or -1 when absent. */
+export declare function juosanTerritoryAt(board: JuosanBoard, cell: number): number;
+/** Checks public rules directly, independently of the solver and stored answer. */
+export declare function checkJuosan(board: JuosanBoard, marks: readonly JuosanMark[]): JuosanCheck;

package/dist/juosanBoard.js

@@ -0,0 +1,102 @@
+import { JUOSAN_MOST_SIDE } from "./juosan.constants.js";
+/** Whether territories partition a bounded board and each territory is connected. */
+export function isJuosanBoard(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const board = value;
+    if (!Number.isInteger(board.width) ||
+        board.width < 2 ||
+        board.width > JUOSAN_MOST_SIDE ||
+        !Number.isInteger(board.height) ||
+        board.height < 2 ||
+        board.height > JUOSAN_MOST_SIDE ||
+        !Array.isArray(board.territories)) {
+        return false;
+    }
+    const cellCount = board.width * board.height;
+    const occupied = new Set();
+    for (const territory of board.territories) {
+        if (!territory ||
+            !Array.isArray(territory.cells) ||
+            territory.cells.length === 0 ||
+            !(territory.difference === null ||
+                (Number.isInteger(territory.difference) &&
+                    territory.difference >= 0 &&
+                    territory.difference <= territory.cells.length))) {
+            return false;
+        }
+        for (const cell of territory.cells) {
+            if (!Number.isInteger(cell) ||
+                cell < 0 ||
+                cell >= cellCount ||
+                occupied.has(cell)) {
+                return false;
+            }
+            occupied.add(cell);
+        }
+        const members = new Set(territory.cells);
+        const reached = new Set([territory.cells[0]]);
+        const queue = [territory.cells[0]];
+        while (queue.length > 0) {
+            const cell = queue.pop();
+            const x = cell % board.width;
+            const y = Math.floor(cell / board.width);
+            const neighbors = [
+                x > 0 ? cell - 1 : -1,
+                x + 1 < board.width ? cell + 1 : -1,
+                y > 0 ? cell - board.width : -1,
+                y + 1 < board.height ? cell + board.width : -1,
+            ];
+            for (const neighbor of neighbors) {
+                if (members.has(neighbor) && !reached.has(neighbor)) {
+                    reached.add(neighbor);
+                    queue.push(neighbor);
+                }
+            }
+        }
+        if (reached.size !== members.size)
+            return false;
+    }
+    return occupied.size === cellCount;
+}
+/** Returns the index of the territory containing a cell, or -1 when absent. */
+export function juosanTerritoryAt(board, cell) {
+    return board.territories.findIndex(territory => territory.cells.includes(cell));
+}
+/** Checks public rules directly, independently of the solver and stored answer. */
+export function checkJuosan(board, marks) {
+    if (!isJuosanBoard(board))
+        throw new RangeError("Invalid Juosan board");
+    if (!Array.isArray(marks) ||
+        marks.length !== board.width * board.height ||
+        marks.some(mark => mark !== 1 && mark !== 2)) {
+        return { ok: false, errors: [-1] };
+    }
+    const errors = [];
+    board.territories.forEach((territory, index) => {
+        if (territory.difference === null)
+            return;
+        const horizontal = territory.cells.filter(cell => marks[cell] === 1).length;
+        const vertical = territory.cells.length - horizontal;
+        if (Math.abs(horizontal - vertical) !== territory.difference)
+            errors.push(index);
+    });
+    for (let y = 0; y < board.height; y += 1) {
+        for (let x = 0; x < board.width; x += 1) {
+            const cell = y * board.width + x;
+            if (x + 2 < board.width &&
+                marks[cell] === 2 &&
+                marks[cell + 1] === 2 &&
+                marks[cell + 2] === 2) {
+                errors.push(-2);
+            }
+            if (y + 2 < board.height &&
+                marks[cell] === 1 &&
+                marks[cell + board.width] === 1 &&
+                marks[cell + 2 * board.width] === 1) {
+                errors.push(-3);
+            }
+        }
+    }
+    return { ok: errors.length === 0, errors: [...new Set(errors)] };
+}

package/dist/juosanDraw.d.ts

@@ -0,0 +1,4 @@
+import type { JuosanBoard } from "./juosan.types.ts";
+import type { JuosanDrawOptions } from "./juosanPlay.types.ts";
+/** Draws a public Juosan board as an SVG string. */
+export declare function drawJuosan(board: JuosanBoard, options?: JuosanDrawOptions): string;

package/dist/juosanDraw.js

@@ -0,0 +1,49 @@
+import { isJuosanBoard } from "./juosanBoard.js";
+import { juosanWords } from "./juosanStrings.js";
+/** Draws a public Juosan board as an SVG string. */
+export function drawJuosan(board, options = {}) {
+    if (!isJuosanBoard(board))
+        throw new RangeError("Invalid Juosan board");
+    const cellSize = 48;
+    const words = juosanWords(options.language);
+    const palettes = {
+        ivory: ["var(--kz-paper,#fbf8f1)", "var(--kz-ink,#1f2320)", "var(--kz-grid,#cfc6b2)"],
+        wood: ["#e5cda6", "#493e2f", "#bca582"],
+        slate: ["#262a27", "#ece8dc", "#454a44"],
+    };
+    const [paper, ink, grid] = palettes[options.material ?? "ivory"];
+    const territoryByCell = Array(board.width * board.height).fill(-1);
+    board.territories.forEach((territory, index) => {
+        territory.cells.forEach(cell => {
+            territoryByCell[cell] = index;
+        });
+    });
+    const cells = territoryByCell.map((territoryIndex, cell) => {
+        const x = (cell % board.width) * cellSize;
+        const y = Math.floor(cell / board.width) * cellSize;
+        const territory = board.territories[territoryIndex];
+        const mark = options.marks?.[cell] ?? 0;
+        const selected = options.selected === cell;
+        const tile = options.pieces === "tiles"
+            ? `<rect x="${x + 10}" y="${y + 10}" width="28" height="28" rx="6" fill="${paper}" stroke="${grid}"/>`
+            : "";
+        const glyph = mark === 1 ? "—" : mark === 2 ? "|" : "";
+        const clue = territory.cells[0] === cell && territory.difference !== null
+            ? `<text x="${x + 5}" y="${y + 13}" fill="${ink}" font-size="10" font-weight="700" font-family="system-ui,sans-serif">${territory.difference}</text>`
+            : "";
+        const right = cell % board.width + 1 < board.width
+            ? territoryByCell[cell + 1]
+            : -1;
+        const below = cell + board.width < territoryByCell.length
+            ? territoryByCell[cell + board.width]
+            : -1;
+        const rightEdge = right !== territoryIndex
+            ? `<path d="M${x + cellSize} ${y}v${cellSize}" stroke="${ink}" stroke-width="3"/>`
+            : "";
+        const bottomEdge = below !== territoryIndex
+            ? `<path d="M${x} ${y + cellSize}h${cellSize}" stroke="${ink}" stroke-width="3"/>`
+            : "";
+        return `<g data-juosan-cell="${cell}"><rect x="${x}" y="${y}" width="${cellSize}" height="${cellSize}" fill="${selected ? ink : "transparent"}" fill-opacity="${selected ? ".12" : "1"}" stroke="${grid}" stroke-width="1"/>${tile}${clue}<text x="${x + 24}" y="${y + 27}" dominant-baseline="middle" text-anchor="middle" fill="${ink}" font-size="29" font-weight="700" font-family="system-ui,sans-serif">${glyph}</text>${rightEdge}${bottomEdge}</g>`;
+    }).join("");
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 ${board.width * cellSize + 4} ${board.height * cellSize + 4}" role="img" aria-label="${words.title}" style="display:block;width:100%;height:auto;background:${paper}">${cells}<rect width="${board.width * cellSize}" height="${board.height * cellSize}" fill="none" stroke="var(--kz-frame,#a98954)" stroke-width="2"/></svg>`;
+}

package/dist/juosanGame.d.ts

@@ -0,0 +1,20 @@
+import type { JuosanBoard, JuosanGame, JuosanMark } from "./juosan.types.ts";
+/** Starts a game with a copy of its public board and no generated answer. */
+export declare function newJuosan(board: JuosanBoard): JuosanGame;
+/** Writes a mark and records the previous state; invalid or unchanged moves are ignored. */
+export declare function setJuosanMark(game: JuosanGame, cell: number, mark: JuosanMark): JuosanGame;
+/** Restores the preceding mark state, if one exists. */
+export declare function undoJuosan(game: JuosanGame): JuosanGame;
+/** Clears the board while retaining whether the player used a hint. */
+export declare function restartJuosan(game: JuosanGame): JuosanGame;
+/** Whether every cell is filled and the independent checker accepts the board. */
+export declare function juosanFinished(game: JuosanGame): boolean;
+/** Returns one next mark only when the public clues prove a unique answer. */
+export declare function hintJuosan(game: JuosanGame): {
+    cell: number;
+    mark: JuosanMark;
+} | null;
+/** Serializes public clues, placements, and assisted status. */
+export declare function encodeJuosan(game: JuosanGame): string;
+/** Reads a bounded public save; malformed or incompatible data returns null. */
+export declare function decodeJuosan(code: string): JuosanGame | null;

package/dist/juosanGame.js

@@ -0,0 +1,86 @@
+import { checkJuosan, isJuosanBoard } from "./juosanBoard.js";
+import { solveJuosan } from "./juosanSolve.js";
+/** Starts a game with a copy of its public board and no generated answer. */
+export function newJuosan(board) {
+    if (!isJuosanBoard(board))
+        throw new RangeError("Invalid Juosan board");
+    return {
+        board: {
+            width: board.width,
+            height: board.height,
+            territories: board.territories.map(territory => ({
+                cells: [...territory.cells],
+                difference: territory.difference,
+            })),
+        },
+        marks: Array(board.width * board.height).fill(0),
+        history: [],
+        helped: false,
+    };
+}
+/** Writes a mark and records the previous state; invalid or unchanged moves are ignored. */
+export function setJuosanMark(game, cell, mark) {
+    if (!Number.isInteger(cell) ||
+        cell < 0 ||
+        cell >= game.marks.length ||
+        (mark !== 1 && mark !== 2) ||
+        game.marks[cell] === mark) {
+        return game;
+    }
+    const marks = [...game.marks];
+    marks[cell] = mark;
+    return { ...game, marks, history: [...game.history, [...game.marks]] };
+}
+/** Restores the preceding mark state, if one exists. */
+export function undoJuosan(game) {
+    const previous = game.history.at(-1);
+    return previous
+        ? { ...game, marks: [...previous], history: game.history.slice(0, -1) }
+        : game;
+}
+/** Clears the board while retaining whether the player used a hint. */
+export function restartJuosan(game) {
+    return { ...newJuosan(game.board), helped: game.helped };
+}
+/** Whether every cell is filled and the independent checker accepts the board. */
+export function juosanFinished(game) {
+    return (game.marks.every(mark => mark !== 0) &&
+        checkJuosan(game.board, game.marks).ok);
+}
+/** Returns one next mark only when the public clues prove a unique answer. */
+export function hintJuosan(game) {
+    const counted = solveJuosan(game.board, 2);
+    if (!counted.complete || counted.count !== 1 || !counted.solution)
+        return null;
+    const cell = game.marks.findIndex((mark, index) => mark !== counted.solution[index]);
+    return cell < 0 ? null : { cell, mark: counted.solution[cell] };
+}
+/** Serializes public clues, placements, and assisted status. */
+export function encodeJuosan(game) {
+    return JSON.stringify({
+        version: 1,
+        board: game.board,
+        marks: game.marks,
+        helped: game.helped,
+    });
+}
+/** Reads a bounded public save; malformed or incompatible data returns null. */
+export function decodeJuosan(code) {
+    try {
+        if (code.length > 40000)
+            return null;
+        const value = JSON.parse(code);
+        if (value.version !== 1 ||
+            !isJuosanBoard(value.board) ||
+            !Array.isArray(value.marks) ||
+            value.marks.length !== value.board.width * value.board.height ||
+            value.marks.some((mark) => mark !== 0 && mark !== 1 && mark !== 2) ||
+            typeof value.helped !== "boolean") {
+            return null;
+        }
+        return { ...newJuosan(value.board), marks: [...value.marks], helped: value.helped };
+    }
+    catch {
+        return null;
+    }
+}

package/dist/juosanGenerate.d.ts

@@ -0,0 +1,3 @@
+import type { JuosanLevel, JuosanPuzzle } from "./juosan.types.ts";
+/** Makes an original small training puzzle and returns it only after uniqueness is proved. */
+export declare function generateJuosan(width?: number, height?: number, level?: JuosanLevel, seed?: number): JuosanPuzzle;

package/dist/juosanGenerate.js

@@ -0,0 +1,31 @@
+import { JUOSAN_LEVELS, JUOSAN_MOST_NODES } from "./juosan.constants.js";
+import { isJuosanBoard } from "./juosanBoard.js";
+import { solveJuosan } from "./juosanSolve.js";
+import { isKazuSeed } from "./random.js";
+/** Makes an original small training puzzle and returns it only after uniqueness is proved. */
+export function generateJuosan(width = 3, height = 2, level = "medium", seed = 1) {
+    const supported = (width === 3 && height === 2) || (width === 2 && height === 3);
+    if (!isKazuSeed(seed) || !JUOSAN_LEVELS.includes(level) || !supported) {
+        throw new RangeError("Juosan generation currently supports 3 × 2 and 2 × 3 boards");
+    }
+    const mark = width > height ? 1 : 2;
+    const territories = makeTrainingTerritories(width, height, seed);
+    const board = { width, height, territories };
+    if (!isJuosanBoard(board))
+        throw new RangeError("Invalid Juosan board");
+    const counted = solveJuosan(board, 2, JUOSAN_MOST_NODES);
+    if (!counted.complete ||
+        counted.count !== 1 ||
+        !counted.solution ||
+        counted.solution.some(value => value !== mark)) {
+        throw new Error("The generated Juosan did not pass its uniqueness proof");
+    }
+    return { ...board, seed, level, solution: counted.solution };
+}
+function makeTrainingTerritories(width, height, seed) {
+    const split = seed % 2 === 0;
+    const cells = width > height
+        ? (split ? [[0, 1, 2], [3, 4, 5]] : [[0, 1, 2, 3, 4, 5]])
+        : (split ? [[0, 2, 4], [1, 3, 5]] : [[0, 1, 2, 3, 4, 5]]);
+    return cells.map(group => ({ cells: group, difference: group.length }));
+}

package/dist/juosanMount.d.ts

@@ -0,0 +1,3 @@
+import type { JuosanMount, JuosanMountOptions } from "./juosanPlay.types.ts";
+/** Mounts a touch, mouse, and keyboard player into an existing page element. */
+export declare function mountJuosan(host: HTMLElement, initial: JuosanMountOptions): JuosanMount;

package/dist/juosanMount.js

@@ -0,0 +1,206 @@
+import { checkJuosan } from "./juosanBoard.js";
+import { decodeJuosan, encodeJuosan, hintJuosan, juosanFinished, newJuosan, restartJuosan, setJuosanMark, undoJuosan, } from "./juosanGame.js";
+import { drawJuosan } from "./juosanDraw.js";
+import { KAZU_STYLE } from "./style.js";
+import { JUOSAN_PLAY_STYLE } from "./juosanStyle.js";
+import { juosanWords } from "./juosanStrings.js";
+/** Mounts a touch, mouse, and keyboard player into an existing page element. */
+export function mountJuosan(host, initial) {
+    const doc = host.ownerDocument;
+    let options = { ...initial };
+    let game = initial.progress ? decodeJuosan(initial.progress) : null;
+    game ?? (game = newJuosan(initial.board));
+    let selected = 0;
+    let message = "";
+    let finished = juosanFinished(game);
+    let destroyed = false;
+    const root = doc.createElement("div");
+    const style = doc.createElement("style");
+    const board = doc.createElement("div");
+    const status = doc.createElement("p");
+    const tools = doc.createElement("div");
+    const help = doc.createElement("p");
+    root.className = "js-root";
+    style.textContent = KAZU_STYLE.replace(/\.kazu/g, ".js-palette") + JUOSAN_PLAY_STYLE;
+    board.className = "js-board";
+    status.className = "js-status";
+    status.setAttribute("role", "status");
+    tools.className = "js-tools";
+    help.className = "js-help";
+    root.append(style, board, status, tools, help);
+    host.append(root);
+    const copyGame = () => ({
+        ...game,
+        board: {
+            ...game.board,
+            territories: game.board.territories.map(territory => ({
+                ...territory,
+                cells: [...territory.cells],
+            })),
+        },
+        marks: [...game.marks],
+        history: game.history.map(turn => [...turn]),
+    });
+    const words = () => juosanWords(options.language);
+    const addButton = (label, action, disabled = false) => {
+        const button = doc.createElement("button");
+        button.type = "button";
+        button.textContent = label;
+        button.disabled = disabled;
+        button.onclick = action;
+        tools.append(button);
+    };
+    const changed = () => {
+        message = "";
+        const wasFinished = finished;
+        finished = juosanFinished(game);
+        render();
+        options.onChange?.(copyGame());
+        if (finished && !wasFinished)
+            options.onFinish?.(copyGame());
+    };
+    const apply = (mark) => {
+        if (finished)
+            return;
+        if (mark === 0) {
+            if (!game.marks[selected])
+                return;
+            const marks = [...game.marks];
+            marks[selected] = 0;
+            game = { ...game, marks, history: [...game.history, [...game.marks]] };
+        }
+        else {
+            game = setJuosanMark(game, selected, mark);
+        }
+        changed();
+    };
+    const restart = () => {
+        game = restartJuosan(game);
+        finished = false;
+        changed();
+    };
+    const moveSelection = (cell) => {
+        selected = Math.max(0, Math.min(game.marks.length - 1, cell));
+        render();
+        board.querySelector(`[data-cell="${selected}"]`)?.focus();
+    };
+    const onCellKey = (event, cell) => {
+        const step = {
+            ArrowLeft: -1,
+            ArrowRight: 1,
+            ArrowUp: -game.board.width,
+            ArrowDown: game.board.width,
+        }[event.key];
+        if (step !== undefined) {
+            event.preventDefault();
+            moveSelection(cell + step);
+        }
+        else if (event.key.toLowerCase() === "h") {
+            event.preventDefault();
+            selected = cell;
+            apply(1);
+        }
+        else if (event.key.toLowerCase() === "v") {
+            event.preventDefault();
+            selected = cell;
+            apply(2);
+        }
+        else if (event.key === "Delete" || event.key === "Backspace") {
+            event.preventDefault();
+            selected = cell;
+            apply(0);
+        }
+    };
+    const render = () => {
+        if (destroyed)
+            return;
+        const { board: puzzleBoard } = game;
+        const hadFocus = board.contains(doc.activeElement);
+        board.style.aspectRatio = `${puzzleBoard.width}/${puzzleBoard.height}`;
+        board.style.setProperty("--juosan-width", String(puzzleBoard.width));
+        board.style.setProperty("--juosan-height", String(puzzleBoard.height));
+        board.classList.toggle("js-palette", (options.material ?? "ivory") === "ivory");
+        board.innerHTML = drawJuosan(puzzleBoard, {
+            ...options,
+            marks: game.marks,
+            selected,
+        });
+        const cellButtons = doc.createElement("div");
+        cellButtons.className = "js-cells";
+        for (let cell = 0; cell < game.marks.length; cell += 1) {
+            const button = doc.createElement("button");
+            button.type = "button";
+            button.className = "js-cell";
+            button.tabIndex = cell === selected ? 0 : -1;
+            button.dataset.cell = String(cell);
+            button.setAttribute("aria-label", markLabel(cell));
+            button.addEventListener("click", () => {
+                selected = cell;
+                const next = game.marks[cell] === 0 ? 1 : game.marks[cell] === 1 ? 2 : 0;
+                apply(next);
+            });
+            button.addEventListener("keydown", event => onCellKey(event, cell));
+            cellButtons.append(button);
+        }
+        board.append(cellButtons);
+        if (hadFocus)
+            board.querySelector(`[data-cell="${selected}"]`)?.focus();
+        status.textContent = juosanFinished(game)
+            ? game.helped ? words().assisted : words().won
+            : message || words().ready;
+        help.textContent = words().help;
+        tools.replaceChildren();
+        addButton(words().undo, () => {
+            game = undoJuosan(game);
+            finished = juosanFinished(game);
+            changed();
+        }, game.history.length === 0);
+        addButton(words().hint, giveHint, finished);
+        addButton(words().check, checkCurrent);
+        addButton(words().restart, restart);
+    };
+    const markLabel = (cell) => {
+        const mark = game.marks[cell];
+        const kind = mark === 1
+            ? words().horizontal
+            : mark === 2 ? words().vertical : words().blank;
+        const row = Math.floor(cell / game.board.width) + 1;
+        const column = cell % game.board.width + 1;
+        return `${words().row} ${row}, ${words().column} ${column}: ${kind}`;
+    };
+    const giveHint = () => {
+        const hint = hintJuosan(game);
+        if (!hint) {
+            message = words().wrong;
+            render();
+            return;
+        }
+        selected = hint.cell;
+        game = setJuosanMark(game, hint.cell, hint.mark);
+        game = { ...game, helped: true };
+        changed();
+        message = words().hintWhy;
+        render();
+    };
+    const checkCurrent = () => {
+        const complete = game.marks.every(mark => mark !== 0);
+        message = complete && checkJuosan(game.board, game.marks).ok
+            ? words().checked
+            : words().wrong;
+        render();
+    };
+    render();
+    return {
+        game: copyGame,
+        progress: () => encodeJuosan(game),
+        restart,
+        set: (next) => {
+            options = { ...options, ...next };
+            render();
+        },
+        destroy: () => {
+            destroyed = true;
+            root.remove();
+        },
+    };
+}