@johnmorrisdotca/kazu 1.0.0 → 1.2.0

package/dist/slitherlinkBoard.d.ts

@@ -0,0 +1,12 @@
+import type { SlitherlinkBoard, SlitherlinkCheck, SlitherlinkProgress } from "./slitherlink.types.ts";
+export declare function isSlitherlinkBoard(value: unknown): value is SlitherlinkBoard;
+export declare function slitherlinkHorizontalCount(board: SlitherlinkBoard): number;
+/** An edge index is horizontal row-major first, then vertical row-major. */
+export declare function slitherlinkEdgeCount(board: SlitherlinkBoard): number;
+export declare function slitherlinkCellEdges(board: SlitherlinkBoard, cell: number): [number, number, number, number] | null;
+export declare function slitherlinkVertexEdges(board: SlitherlinkBoard, vertex: number): number[];
+/** Checks all numbered cells, degree-two vertices, and one connected closed loop. */
+export declare function checkSlitherlink(board: SlitherlinkBoard, edges: readonly number[]): SlitherlinkCheck;
+/** Reports overfilled clues and branched vertices during play without requiring a finished loop. */
+export declare function progressSlitherlink(board: SlitherlinkBoard, edges: readonly number[]): SlitherlinkProgress;
+export declare function edgeVertices(board: SlitherlinkBoard, edge: number): [number, number];

package/dist/slitherlinkBoard.js

@@ -0,0 +1,132 @@
+import { SLITHERLINK_MOST_SIDE } from "./slitherlink.constants.js";
+export function isSlitherlinkBoard(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const board = value;
+    return Number.isInteger(board.width) && board.width >= 2 && board.width <= SLITHERLINK_MOST_SIDE
+        && Number.isInteger(board.height) && board.height >= 2 && board.height <= SLITHERLINK_MOST_SIDE
+        && Array.isArray(board.clues) && board.clues.length === board.width * board.height
+        && board.clues.every(clue => clue === null || Number.isInteger(clue) && clue >= 0 && clue <= 3);
+}
+export function slitherlinkHorizontalCount(board) {
+    return board.width * (board.height + 1);
+}
+/** An edge index is horizontal row-major first, then vertical row-major. */
+export function slitherlinkEdgeCount(board) {
+    return slitherlinkHorizontalCount(board) + (board.width + 1) * board.height;
+}
+export function slitherlinkCellEdges(board, cell) {
+    if (!Number.isInteger(cell) || cell < 0 || cell >= board.width * board.height)
+        return null;
+    const x = cell % board.width;
+    const y = Math.floor(cell / board.width);
+    const horizontal = slitherlinkHorizontalCount(board);
+    const top = y * board.width + x;
+    const bottom = (y + 1) * board.width + x;
+    const left = horizontal + y * (board.width + 1) + x;
+    const right = left + 1;
+    return [top, right, bottom, left];
+}
+export function slitherlinkVertexEdges(board, vertex) {
+    const vertexWidth = board.width + 1;
+    if (!Number.isInteger(vertex) || vertex < 0 || vertex >= vertexWidth * (board.height + 1))
+        return [];
+    const x = vertex % vertexWidth;
+    const y = Math.floor(vertex / vertexWidth);
+    const horizontal = slitherlinkHorizontalCount(board);
+    const edges = [];
+    if (x > 0)
+        edges.push(y * board.width + x - 1);
+    if (x < board.width)
+        edges.push(y * board.width + x);
+    if (y > 0)
+        edges.push(horizontal + (y - 1) * vertexWidth + x);
+    if (y < board.height)
+        edges.push(horizontal + y * vertexWidth + x);
+    return edges;
+}
+function evaluate(board, selected, complete) {
+    if (!isSlitherlinkBoard(board))
+        throw new RangeError("Invalid Slitherlink board");
+    const edgeCount = slitherlinkEdgeCount(board);
+    const errors = selected.filter((edge, index) => !Number.isInteger(edge)
+        || edge < 0 || edge >= edgeCount || selected.indexOf(edge) !== index);
+    const edges = [...new Set(selected.filter(edge => Number.isInteger(edge) && edge >= 0 && edge < edgeCount))];
+    const edgeSet = new Set(edges);
+    const vertexDegrees = Array.from({ length: (board.width + 1) * (board.height + 1) }, (_, vertex) => slitherlinkVertexEdges(board, vertex).filter(edge => edgeSet.has(edge)).length);
+    const vertices = vertexDegrees.flatMap((degree, vertex) => degree > 2 || complete && degree === 1 ? [vertex] : []);
+    const clues = board.clues.flatMap((clue, cell) => {
+        if (clue === null)
+            return [];
+        const count = slitherlinkCellEdges(board, cell).filter(edge => edgeSet.has(edge)).length;
+        return complete ? count !== clue ? [cell] : [] : count > clue ? [cell] : [];
+    });
+    const closed = closedComponents(board, edgeSet);
+    const loops = closed.count;
+    const detachedClosedLoop = loops > 0 && closed.edges !== edges.length;
+    const loopError = complete
+        ? edges.length === 0 || loops !== 1
+        : loops > 1 || detachedClosedLoop;
+    return {
+        ok: !errors.length && !vertices.length && !clues.length && !loopError,
+        errors,
+        clues,
+        vertices,
+        loops,
+    };
+}
+/** Checks all numbered cells, degree-two vertices, and one connected closed loop. */
+export function checkSlitherlink(board, edges) {
+    return evaluate(board, edges, true);
+}
+/** Reports overfilled clues and branched vertices during play without requiring a finished loop. */
+export function progressSlitherlink(board, edges) {
+    const result = evaluate(board, edges, false);
+    return { ok: result.ok, clues: result.clues, vertices: result.vertices, loops: result.loops };
+}
+function closedComponents(board, edges) {
+    if (!edges.size)
+        return { count: 0, edges: 0 };
+    const unseen = new Set(edges);
+    let count = 0;
+    let closedEdges = 0;
+    while (unseen.size) {
+        const first = unseen.values().next().value;
+        const component = new Set([first]);
+        const queue = [first];
+        unseen.delete(first);
+        while (queue.length) {
+            const edge = queue.pop();
+            for (const vertex of edgeVertices(board, edge)) {
+                for (const neighbour of slitherlinkVertexEdges(board, vertex)) {
+                    if (!unseen.has(neighbour))
+                        continue;
+                    unseen.delete(neighbour);
+                    component.add(neighbour);
+                    queue.push(neighbour);
+                }
+            }
+        }
+        const degreeTwo = [...component].every(edge => edgeVertices(board, edge)
+            .every(vertex => slitherlinkVertexEdges(board, vertex).filter(adjacent => component.has(adjacent)).length === 2));
+        if (degreeTwo) {
+            count += 1;
+            closedEdges += component.size;
+        }
+    }
+    return { count, edges: closedEdges };
+}
+export function edgeVertices(board, edge) {
+    const horizontal = slitherlinkHorizontalCount(board);
+    if (edge < horizontal) {
+        const x = edge % board.width;
+        const y = Math.floor(edge / board.width);
+        const left = y * (board.width + 1) + x;
+        return [left, left + 1];
+    }
+    const local = edge - horizontal;
+    const x = local % (board.width + 1);
+    const y = Math.floor(local / (board.width + 1));
+    const top = y * (board.width + 1) + x;
+    return [top, top + board.width + 1];
+}

package/dist/slitherlinkDraw.d.ts

@@ -0,0 +1,4 @@
+import type { SlitherlinkBoard } from "./slitherlink.types.ts";
+import type { SlitherlinkDrawOptions } from "./slitherlinkPlay.types.ts";
+/** Draws public clues and selected loop edges as an SVG board. */
+export declare function drawSlitherlink(board: SlitherlinkBoard, options?: SlitherlinkDrawOptions): string;

package/dist/slitherlinkDraw.js

@@ -0,0 +1,51 @@
+import { edgeVertices, isSlitherlinkBoard, } from "./slitherlinkBoard.js";
+import { slitherlinkWords } from "./slitherlinkStrings.js";
+/** Draws public clues and selected loop edges as an SVG board. */
+export function drawSlitherlink(board, options = {}) {
+    if (!isSlitherlinkBoard(board))
+        throw new RangeError("Invalid Slitherlink board");
+    const words = slitherlinkWords(options.language);
+    const size = 48;
+    const colours = {
+        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] = colours[options.material ?? "ivory"];
+    const selected = new Set(options.edges ?? []);
+    const clueText = board.clues.map((clue, cell) => {
+        if (clue === null)
+            return "";
+        const x = (cell % board.width + .5) * size;
+        const y = (Math.floor(cell / board.width) + .53) * size;
+        return `<text x="${x}" y="${y}" dominant-baseline="middle" text-anchor="middle" fill="${ink}" font-size="20" font-weight="700" font-family="system-ui,sans-serif">${clue}</text>`;
+    }).join("");
+    const lines = [...selected].map(edge => {
+        const [a, b] = edgeVertices(board, edge);
+        const x1 = (a % (board.width + 1)) * size;
+        const y1 = Math.floor(a / (board.width + 1)) * size;
+        const x2 = (b % (board.width + 1)) * size;
+        const y2 = Math.floor(b / (board.width + 1)) * size;
+        const bad = options.errors?.includes(edge);
+        const active = options.selected === edge;
+        const colour = bad ? "var(--kz-bad,#b5452c)" : active ? "var(--kz-frame,#a98954)" : ink;
+        return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${colour}" stroke-width="${active ? 6 : 4}" stroke-linecap="round"/>`;
+    }).join("");
+    const dots = Array.from({ length: (board.width + 1) * (board.height + 1) }, (_, vertex) => {
+        const x = (vertex % (board.width + 1)) * size;
+        const y = Math.floor(vertex / (board.width + 1)) * size;
+        return `<circle cx="${x}" cy="${y}" r="3.2" fill="${ink}"/>`;
+    }).join("");
+    const gridLines = [];
+    for (let y = 0; y <= board.height; y += 1) {
+        for (let x = 0; x < board.width; x += 1) {
+            gridLines.push(`<line x1="${x * size}" y1="${y * size}" x2="${(x + 1) * size}" y2="${y * size}" stroke="${grid}" stroke-width="1"/>`);
+        }
+    }
+    for (let y = 0; y < board.height; y += 1) {
+        for (let x = 0; x <= board.width; x += 1) {
+            gridLines.push(`<line x1="${x * size}" y1="${y * size}" x2="${x * size}" y2="${(y + 1) * size}" stroke="${grid}" stroke-width="1"/>`);
+        }
+    }
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 ${board.width * size + 8} ${board.height * size + 8}" role="img" aria-label="${words.title}" style="display:block;width:100%;height:auto;background:${paper}">${gridLines.join("")}${clueText}${lines}${dots}<rect width="${board.width * size}" height="${board.height * size}" fill="none" stroke="var(--kz-frame,#a98954)" stroke-width="2"/></svg>`;
+}

package/dist/slitherlinkGame.d.ts

@@ -0,0 +1,8 @@
+import type { SlitherlinkBoard, SlitherlinkGame } from "./slitherlink.types.ts";
+export declare function newSlitherlink(board: SlitherlinkBoard): SlitherlinkGame;
+export declare function toggleSlitherlink(game: SlitherlinkGame, edge: number): SlitherlinkGame;
+export declare function undoSlitherlink(game: SlitherlinkGame): SlitherlinkGame;
+export declare function slitherlinkFinished(game: SlitherlinkGame): boolean;
+export declare function hintSlitherlink(game: SlitherlinkGame): number | null;
+export declare function encodeSlitherlink(game: SlitherlinkGame): string;
+export declare function decodeSlitherlink(code: string): SlitherlinkGame | null;

package/dist/slitherlinkGame.js

@@ -0,0 +1,63 @@
+import { checkSlitherlink, isSlitherlinkBoard } from "./slitherlinkBoard.js";
+import { solveSlitherlink } from "./slitherlinkSolve.js";
+export function newSlitherlink(board) {
+    if (!isSlitherlinkBoard(board))
+        throw new RangeError("Invalid Slitherlink board");
+    return {
+        board: { width: board.width, height: board.height, clues: [...board.clues] },
+        edges: [],
+        history: [],
+        helped: false,
+    };
+}
+export function toggleSlitherlink(game, edge) {
+    const maximum = (game.board.height + 1) * game.board.width + game.board.height * (game.board.width + 1);
+    if (!Number.isInteger(edge) || edge < 0 || edge >= maximum)
+        return game;
+    const edges = game.edges.includes(edge)
+        ? game.edges.filter(selected => selected !== edge)
+        : [...game.edges, edge];
+    return { ...game, edges, history: [...game.history, [...game.edges]] };
+}
+export function undoSlitherlink(game) {
+    const previous = game.history.at(-1);
+    return previous
+        ? { ...game, edges: [...previous], history: game.history.slice(0, -1) }
+        : game;
+}
+export function slitherlinkFinished(game) {
+    return checkSlitherlink(game.board, game.edges).ok;
+}
+export function hintSlitherlink(game) {
+    const solved = solveSlitherlink(game.board);
+    if (!solved.complete || solved.count !== 1 || !solved.solution)
+        return null;
+    return solved.solution.find(edge => !game.edges.includes(edge))
+        ?? game.edges.find(edge => !solved.solution.includes(edge))
+        ?? null;
+}
+export function encodeSlitherlink(game) {
+    return JSON.stringify({ version: 1, board: game.board, edges: game.edges, helped: game.helped });
+}
+export function decodeSlitherlink(code) {
+    try {
+        if (code.length > 40000)
+            return null;
+        const value = JSON.parse(code);
+        if (value.version !== 1 || !isSlitherlinkBoard(value.board) || !Array.isArray(value.edges)
+            || value.edges.length > (value.board.width + 1) * (value.board.height + 1) * 2
+            || typeof value.helped !== "boolean" || new Set(value.edges).size !== value.edges.length)
+            return null;
+        let game = newSlitherlink(value.board);
+        for (const edge of value.edges) {
+            const next = toggleSlitherlink(game, edge);
+            if (next === game)
+                return null;
+            game = next;
+        }
+        return { ...game, history: [], helped: value.helped };
+    }
+    catch {
+        return null;
+    }
+}

package/dist/slitherlinkGenerate.d.ts

@@ -0,0 +1,3 @@
+import type { SlitherlinkPuzzle } from "./slitherlink.types.ts";
+/** Makes a proved puzzle from a seeded rectangle or L-shaped tile-region loop. */
+export declare function generateSlitherlink(width?: number, height?: number, seed?: number): SlitherlinkPuzzle;

package/dist/slitherlinkGenerate.js

@@ -0,0 +1,101 @@
+import { SLITHERLINK_MOST_SIDE } from "./slitherlink.constants.js";
+import { checkSlitherlink, isSlitherlinkBoard, slitherlinkCellEdges, } from "./slitherlinkBoard.js";
+import { solveSlitherlink } from "./slitherlinkSolve.js";
+import { isKazuSeed, seededRandom } from "./random.js";
+/** Makes a proved puzzle from a seeded rectangle or L-shaped tile-region loop. */
+export function generateSlitherlink(width = 5, height = width, seed = 1) {
+    if (![width, height].every(side => Number.isInteger(side) && side >= 2 && side <= SLITHERLINK_MOST_SIDE)
+        || !isKazuSeed(seed))
+        throw new RangeError("Invalid Slitherlink settings");
+    const random = seededRandom(seed);
+    const useL = width >= 3 && height >= 3 && random() < .5;
+    const region = [];
+    let x0;
+    let y0;
+    let blockWidth;
+    let blockHeight;
+    if (useL) {
+        blockWidth = 2 + Math.floor(random() * (width - 1));
+        blockHeight = 2 + Math.floor(random() * (height - 1));
+        x0 = Math.floor(random() * (width - blockWidth + 1));
+        y0 = Math.floor(random() * (height - blockHeight + 1));
+        for (let y = 0; y < blockHeight; y += 1) {
+            for (let x = 0; x < blockWidth; x += 1) {
+                if (x === 0 || y === 0)
+                    region.push((y0 + y) * width + x0 + x);
+            }
+        }
+    }
+    else {
+        blockWidth = 1 + Math.floor(random() * width);
+        blockHeight = 1 + Math.floor(random() * height);
+        if (blockWidth === 1 && blockHeight === 1)
+            blockWidth = 2;
+        x0 = Math.floor(random() * (width - blockWidth + 1));
+        y0 = Math.floor(random() * (height - blockHeight + 1));
+        for (let y = 0; y < blockHeight; y += 1) {
+            for (let x = 0; x < blockWidth; x += 1)
+                region.push((y0 + y) * width + x0 + x);
+        }
+    }
+    const blank = { width, height, clues: Array(width * height).fill(null) };
+    const regionSet = new Set(region);
+    const edges = new Set();
+    for (const cell of region) {
+        const [top, right, bottom, left] = slitherlinkCellEdges(blank, cell);
+        const x = cell % width;
+        if (!regionSet.has(cell - width))
+            edges.add(top);
+        if (x === width - 1 || !regionSet.has(cell + 1))
+            edges.add(right);
+        if (!regionSet.has(cell + width))
+            edges.add(bottom);
+        if (x === 0 || !regionSet.has(cell - 1))
+            edges.add(left);
+    }
+    let board = {
+        width,
+        height,
+        clues: Array.from({ length: width * height }, (_, cell) => slitherlinkCellEdges(blank, cell).filter(edge => edges.has(edge)).length),
+    };
+    let answer = [...edges];
+    // Seeded axis reflections give each selected shape more than one orientation.
+    const reflectX = random() < .5;
+    const reflectY = random() < .5;
+    if (reflectX || reflectY) {
+        const horizontalCount = width * (height + 1);
+        const mapEdge = (edge) => {
+            if (edge < horizontalCount) {
+                const x = edge % width;
+                const y = Math.floor(edge / width);
+                const nextX = reflectX ? width - 1 - x : x;
+                const nextY = reflectY ? height - y : y;
+                return nextY * width + nextX;
+            }
+            const local = edge - horizontalCount;
+            const x = local % (width + 1);
+            const y = Math.floor(local / (width + 1));
+            const nextX = reflectX ? width - x : x;
+            const nextY = reflectY ? height - 1 - y : y;
+            return horizontalCount + nextY * (width + 1) + nextX;
+        };
+        const reflected = Array(width * height).fill(null);
+        board.clues.forEach((clue, cell) => {
+            const x = cell % width;
+            const y = Math.floor(cell / width);
+            const nextX = reflectX ? width - 1 - x : x;
+            const nextY = reflectY ? height - 1 - y : y;
+            reflected[nextY * width + nextX] = clue;
+        });
+        board = { width, height, clues: reflected };
+        answer = answer.map(mapEdge);
+    }
+    if (!isSlitherlinkBoard(board) || !checkSlitherlink(board, answer).ok) {
+        throw new Error("Unable to construct Slitherlink loop");
+    }
+    const proof = solveSlitherlink(board, { limit: 2 });
+    if (!proof.complete || proof.count !== 1 || !proof.solution) {
+        throw new Error("No uniquely solvable Slitherlink found within the generation budget");
+    }
+    return { ...board, seed, solution: proof.solution };
+}

package/dist/slitherlinkMount.d.ts

@@ -0,0 +1,3 @@
+import type { SlitherlinkMount, SlitherlinkMountOptions } from "./slitherlinkPlay.types.ts";
+/** Mounts an accessible dot-and-edge loop player in the given host element. */
+export declare function mountSlitherlink(host: HTMLElement, initial: SlitherlinkMountOptions): SlitherlinkMount;

package/dist/slitherlinkMount.js

@@ -0,0 +1,267 @@
+import { progressSlitherlink, slitherlinkCellEdges, slitherlinkHorizontalCount, slitherlinkVertexEdges, } from "./slitherlinkBoard.js";
+import { decodeSlitherlink, encodeSlitherlink, hintSlitherlink, newSlitherlink, slitherlinkFinished, toggleSlitherlink, undoSlitherlink, } from "./slitherlinkGame.js";
+import { KAZU_STYLE } from "./style.js";
+import { SLITHERLINK_PLAY_STYLE } from "./slitherlinkStyle.js";
+import { slitherlinkWords } from "./slitherlinkStrings.js";
+/** Mounts an accessible dot-and-edge loop player in the given host element. */
+export function mountSlitherlink(host, initial) {
+    const doc = host.ownerDocument;
+    let options = { ...initial };
+    let game = initial.progress ? decodeSlitherlink(initial.progress) : null;
+    game ?? (game = newSlitherlink(initial.board));
+    const geometry = edgeGeometry(game.board);
+    let selected = 0;
+    let errors = [];
+    let message = "";
+    let finished = slitherlinkFinished(game);
+    let dead = 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 = "sl-root";
+    style.textContent = KAZU_STYLE.replace(/\.kazu/g, ".sl-palette") + SLITHERLINK_PLAY_STYLE;
+    board.className = "sl-board";
+    status.className = "sl-status";
+    status.setAttribute("role", "status");
+    tools.className = "sl-tools";
+    help.className = "sl-help";
+    root.append(style, board, status, tools, help);
+    host.append(root);
+    const copy = () => ({
+        ...game,
+        board: { ...game.board, clues: [...game.board.clues] },
+        edges: [...game.edges],
+        history: game.history.map(turn => [...turn]),
+    });
+    const words = () => slitherlinkWords(options.language);
+    const button = (label, action, disabled = false) => {
+        const control = doc.createElement("button");
+        control.type = "button";
+        control.textContent = label;
+        control.disabled = disabled;
+        control.onclick = action;
+        tools.append(control);
+    };
+    const changed = () => {
+        errors = [];
+        message = "";
+        const won = slitherlinkFinished(game);
+        render();
+        options.onChange?.(copy());
+        root.dispatchEvent(new CustomEvent("slitherlink-change", { detail: copy(), bubbles: true }));
+        if (won && !finished) {
+            options.onFinish?.(copy());
+            root.dispatchEvent(new CustomEvent("slitherlink-finish", { detail: copy(), bubbles: true }));
+        }
+        finished = won;
+    };
+    const toggle = (edge) => {
+        if (finished)
+            return;
+        selected = edge;
+        game = toggleSlitherlink(game, edge);
+        changed();
+    };
+    const restart = () => {
+        game = newSlitherlink(game.board);
+        finished = false;
+        selected = 0;
+        changed();
+    };
+    const render = () => {
+        if (dead)
+            return;
+        const focused = board.contains(doc.activeElement);
+        const w = words();
+        const current = game.board;
+        const selectedEdges = new Set(game.edges);
+        const clues = progressSlitherlink(current, game.edges);
+        board.classList.toggle("sl-palette", (options.material ?? "ivory") === "ivory");
+        const material = options.material ?? "ivory";
+        const palette = {
+            ivory: ["var(--kz-ink,#1f2320)", "var(--kz-grid,#cfc6b2)"],
+            wood: ["#493e2f", "#bca582"],
+            slate: ["#ece8dc", "#454a44"],
+        }[material];
+        board.style.setProperty("--sl-ink", palette[0]);
+        board.style.setProperty("--kz-grid", palette[1]);
+        board.setAttribute("role", "grid");
+        board.setAttribute("aria-label", w.title);
+        board.style.gridTemplateColumns = `repeat(${current.width * 2 + 1}, 1fr)`;
+        board.style.gridTemplateRows = `repeat(${current.height * 2 + 1}, 1fr)`;
+        board.style.aspectRatio = `${current.width * 2 + 1} / ${current.height * 2 + 1}`;
+        board.replaceChildren();
+        for (let cell = 0; cell < current.clues.length; cell += 1) {
+            const clue = current.clues[cell];
+            if (clue === null)
+                continue;
+            const tile = doc.createElement("span");
+            tile.className = "sl-cell";
+            tile.style.gridColumnStart = String((cell % current.width) * 2 + 2);
+            tile.style.gridRowStart = String(Math.floor(cell / current.width) * 2 + 2);
+            tile.textContent = String(clue);
+            tile.setAttribute("aria-hidden", "true");
+            board.append(tile);
+        }
+        for (const point of gridPoints(current)) {
+            const dot = doc.createElement("span");
+            dot.className = "sl-dot";
+            dot.style.gridColumnStart = String(point.x * 2 + 1);
+            dot.style.gridRowStart = String(point.y * 2 + 1);
+            dot.setAttribute("aria-hidden", "true");
+            board.append(dot);
+        }
+        for (const edge of geometry) {
+            const control = doc.createElement("button");
+            const on = selectedEdges.has(edge.id);
+            control.type = "button";
+            control.className = `sl-edge ${edge.orientation}${on ? " on" : ""}${errors.includes(edge.id) ? " error" : ""}`;
+            control.style.gridColumnStart = String(edge.x * 2 + 1);
+            control.style.gridRowStart = String(edge.y * 2 + 1);
+            if (edge.orientation === "horizontal")
+                control.style.gridColumnEnd = "span 3";
+            else
+                control.style.gridRowEnd = "span 3";
+            control.tabIndex = edge.id === selected ? 0 : -1;
+            control.dataset.edge = String(edge.id);
+            control.setAttribute("aria-pressed", String(on));
+            control.setAttribute("aria-label", `${w.edge} ${edge.id + 1}, ${on ? "on" : "off"}`);
+            control.onclick = () => toggle(edge.id);
+            control.onkeydown = event => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    toggle(edge.id);
+                }
+                else if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) {
+                    event.preventDefault();
+                    moveFocus(edge.id, event.key);
+                }
+                else if ((event.key === "Delete" || event.key === "Backspace") && on) {
+                    event.preventDefault();
+                    toggle(edge.id);
+                }
+            };
+            board.append(control);
+        }
+        if (focused)
+            board.querySelector(`[data-edge="${selected}"]`)?.focus();
+        status.textContent = finished ? (game.helped ? w.helped : w.won) : message || w.checked;
+        help.textContent = w.help;
+        tools.replaceChildren();
+        button(w.undo, () => {
+            game = undoSlitherlink(game);
+            finished = slitherlinkFinished(game);
+            changed();
+        }, !game.history.length);
+        button(w.check, () => {
+            errors = progressEdges(current, game.edges, clues.clues, clues.vertices, clues.loops);
+            message = slitherlinkFinished(game) ? w.won : w.wrong;
+            render();
+        });
+        button(w.hint, () => {
+            const edge = hintSlitherlink(game);
+            if (edge === null) {
+                message = w.noHint;
+                render();
+                return;
+            }
+            game = { ...toggleSlitherlink(game, edge), helped: true };
+            changed();
+            message = w.hintWhy;
+            render();
+        }, finished);
+        button(w.restart, restart);
+        button(w.expand, expand);
+    };
+    function moveFocus(edge, direction) {
+        const origin = geometry[edge];
+        const dx = direction === "ArrowLeft" ? -1 : direction === "ArrowRight" ? 1 : 0;
+        const dy = direction === "ArrowUp" ? -1 : direction === "ArrowDown" ? 1 : 0;
+        const candidates = geometry.filter(candidate => {
+            const deltaX = candidate.cx - origin.cx;
+            const deltaY = candidate.cy - origin.cy;
+            return dx ? deltaX * dx > 0 : deltaY * dy > 0;
+        });
+        candidates.sort((a, b) => {
+            const aMajor = dx ? Math.abs(a.cx - origin.cx) : Math.abs(a.cy - origin.cy);
+            const bMajor = dx ? Math.abs(b.cx - origin.cx) : Math.abs(b.cy - origin.cy);
+            if (aMajor !== bMajor)
+                return aMajor - bMajor;
+            const aMinor = dx ? Math.abs(a.cy - origin.cy) : Math.abs(a.cx - origin.cx);
+            const bMinor = dx ? Math.abs(b.cy - origin.cy) : Math.abs(b.cx - origin.cx);
+            return aMinor - bMinor;
+        });
+        const next = candidates[0];
+        if (!next)
+            return;
+        selected = next.id;
+        render();
+    }
+    function expand() {
+        if (root.parentElement !== host)
+            return;
+        const dialog = doc.createElement("dialog");
+        const close = doc.createElement("button");
+        dialog.className = "sl-dialog";
+        close.className = "sl-close";
+        close.textContent = words().close;
+        close.onclick = () => dialog.close();
+        dialog.append(close, root);
+        host.append(dialog);
+        dialog.onclose = () => {
+            host.append(root);
+            dialog.remove();
+        };
+        dialog.showModal();
+    }
+    render();
+    return {
+        game: copy,
+        progress: () => encodeSlitherlink(game),
+        restart,
+        set: (next) => {
+            if (next.language && next.language !== options.language)
+                message = "";
+            options = { ...options, ...next };
+            render();
+        },
+        destroy: () => {
+            dead = true;
+            const dialog = root.closest("dialog");
+            root.remove();
+            dialog?.remove();
+        },
+    };
+}
+function gridPoints(board) {
+    return Array.from({ length: (board.width + 1) * (board.height + 1) }, (_, vertex) => ({
+        x: vertex % (board.width + 1),
+        y: Math.floor(vertex / (board.width + 1)),
+    }));
+}
+function edgeGeometry(board) {
+    const horizontal = slitherlinkHorizontalCount(board);
+    const edges = Array.from({ length: horizontal + board.height * (board.width + 1) }, (_, id) => {
+        if (id < horizontal) {
+            const x = id % board.width;
+            const y = Math.floor(id / board.width);
+            return { id, orientation: "horizontal", x, y, cx: x + .5, cy: y };
+        }
+        const local = id - horizontal;
+        const x = local % (board.width + 1);
+        const y = Math.floor(local / (board.width + 1));
+        return { id, orientation: "vertical", x, y, cx: x, cy: y + .5 };
+    });
+    return edges;
+}
+function progressEdges(board, edges, clueErrors, vertexErrors, loops) {
+    if (loops > 1)
+        return [...edges];
+    const result = new Set();
+    clueErrors.forEach(cell => slitherlinkCellEdges(board, cell)?.forEach(edge => result.add(edge)));
+    vertexErrors.forEach(vertex => slitherlinkVertexEdges(board, vertex).forEach(edge => result.add(edge)));
+    return [...result];
+}