@johnmorrisdotca/kumimoji 1.3.0 → 1.4.0

package/dist/showcase.js

@@ -1,6 +1,6 @@
 import { BASE_KANA, CORNER_FORMS, tileKana } from "./kana.js";
 import { kanaTileCode } from "./tileFace.js";
-import { JAPANESE_TILE_MIX, KUMIMOJI_HANDS, TILE_MIX, kumimojiTileCount, kumimojiWildCount } from "./tiles.constants.js";
+import { JAPANESE_TILE_MIX, KUMIMOJI_HANDS, kumimojiTileCount, kumimojiWildCount, TILE_MIX, } from "./tiles.constants.js";
 /** A language's set as a page shows it: every tile with its count, the total, and which are the rarest and the commonest.
  *
  * @param language - The English or Japanese tile language.
@@ -17,7 +17,12 @@ import { JAPANESE_TILE_MIX, KUMIMOJI_HANDS, TILE_MIX, kumimojiTileCount, kumimoj
 export function mixShown(language) {
     const tiles = language === "english"
         ? Object.entries(TILE_MIX).map(([letter, count]) => ({ code: letter, glyph: letter, forms: "", count }))
-        : [...BASE_KANA].map((kana) => ({ code: kanaTileCode(kana), glyph: kana, forms: CORNER_FORMS[kana] ?? "", count: JAPANESE_TILE_MIX[kana] ?? 0 }));
+        : [...BASE_KANA].map((kana) => ({
+            code: kanaTileCode(kana),
+            glyph: kana,
+            forms: CORNER_FORMS[kana] ?? "",
+            count: JAPANESE_TILE_MIX[kana] ?? 0,
+        }));
     const counts = tiles.map((tile) => tile.count);
     const most = Math.max(...counts);
     const fewest = Math.min(...counts);
@@ -87,7 +92,11 @@ export function lengthRows(hand = KUMIMOJI_HANDS.classic) {
             length,
             tiles,
             doubleTiles: kumimojiTileCount(hand, length, undefined, true),
-            wilds: { easy: kumimojiWildCount(hand, "easy", tiles), medium: kumimojiWildCount(hand, "medium", tiles), hard: kumimojiWildCount(hand, "hard", tiles) },
+            wilds: {
+                easy: kumimojiWildCount(hand, "easy", tiles),
+                medium: kumimojiWildCount(hand, "medium", tiles),
+                hard: kumimojiWildCount(hand, "hard", tiles),
+            },
         };
     });
 }

package/dist/tileWords.js

@@ -51,7 +51,7 @@ export function unpackTileWords(data) {
     }
     const letters = [...Object.keys(TILE_MIX)];
     const assigned = new Map(letters.map((letter) => [letter.toUpperCase(), letter]));
-    const soundOf = (tile) => (tile === "*" ? null : assigned.get(tile) ?? (/^[a-z]$/.test(tile) ? tile : null));
+    const soundOf = (tile) => tile === "*" ? null : (assigned.get(tile) ?? (/^[a-z]$/.test(tile) ? tile : null));
     const isWild = (tile) => tile === "*" || assigned.has(tile);
     return {
         language: "english",
@@ -94,8 +94,12 @@ function unpackJapaneseWords(data) {
             allowed.add([...word].map((tile) => tileFace(tile).glyph).join(""));
     }
     const mix = new Map(Object.entries(JAPANESE_TILE_MIX).map(([face, count]) => [kanaTileCode(face), count]));
-    const isTile = (tile) => tile.length === 1 && tile.codePointAt(0) - KANA_TILE_START >= 0 && tile.codePointAt(0) - KANA_TILE_START < kana.length;
-    const isAssignedWild = (tile) => tile.length === 1 && tile.codePointAt(0) - KANA_WILD_START >= 0 && tile.codePointAt(0) - KANA_WILD_START < kana.length;
+    const isTile = (tile) => tile.length === 1 &&
+        tile.codePointAt(0) - KANA_TILE_START >= 0 &&
+        tile.codePointAt(0) - KANA_TILE_START < kana.length;
+    const isAssignedWild = (tile) => tile.length === 1 &&
+        tile.codePointAt(0) - KANA_WILD_START >= 0 &&
+        tile.codePointAt(0) - KANA_WILD_START < kana.length;
     const isWild = (tile) => tile === "*" || isAssignedWild(tile);
     const soundOf = (tile) => (isTile(tile) || isAssignedWild(tile) ? tileFace(tile).glyph : null);
     const identity = (tile) => (isWild(tile) ? "*" : isTile(tile) ? tileFace(tile).glyph : null);
@@ -196,9 +200,10 @@ export async function loadTileWords(language = "english") {
         return already;
     let words;
     if (typeof window !== "undefined") {
-        words = language === "english"
-            ? unpackTileWords((await import("./words.en.data.js")).TILE_WORDS_EN)
-            : unpackJapaneseWords((await import("./words.ja.data.js")).TILE_WORDS_JA);
+        words =
+            language === "english"
+                ? unpackTileWords((await import("./words.en.data.js")).TILE_WORDS_EN)
+                : unpackJapaneseWords((await import("./words.ja.data.js")).TILE_WORDS_JA);
     }
     else {
         if (fromModule === null)

package/dist/tileWordsModule.d.ts

@@ -1,5 +1,5 @@
-import { type TileWords } from "./tileWords.ts";
 import type { KumimojiLanguage } from "./kumimoji.types.ts";
+import { type TileWords } from "./tileWords.ts";
 /** The list, read from its module: `loadTileWords` for a caller with no browser.
  *
  * @param language - The English or Japanese tile language.

package/dist/tileWordsModule.js

@@ -6,7 +6,9 @@ import { loadTileWords, readTileWordsWith, tileWordsFrom } from "./tileWords.js"
  * page's components never import it, so no page's server function carries the
  * lists for the browser's sake (see `loadTileWords`).
  */
-readTileWordsWith(async (language) => tileWordsFrom(language, language === "english" ? (await import("./words.en.data.js")).TILE_WORDS_EN : (await import("./words.ja.data.js")).TILE_WORDS_JA));
+readTileWordsWith(async (language) => tileWordsFrom(language, language === "english"
+    ? (await import("./words.en.data.js")).TILE_WORDS_EN
+    : (await import("./words.ja.data.js")).TILE_WORDS_JA));
 /** The list, read from its module: `loadTileWords` for a caller with no browser.
  *
  * @param language - The English or Japanese tile language.

package/dist/tiles.constants.js

@@ -21,8 +21,32 @@
  * ```
  */
 export const TILE_MIX = {
-    a: 13, b: 3, c: 3, d: 6, e: 18, f: 3, g: 4, h: 3, i: 12, j: 2, k: 2, l: 5, m: 3,
-    n: 8, o: 11, p: 3, q: 2, r: 9, s: 6, t: 9, u: 6, v: 3, w: 3, x: 2, y: 3, z: 2,
+    a: 13,
+    b: 3,
+    c: 3,
+    d: 6,
+    e: 18,
+    f: 3,
+    g: 4,
+    h: 3,
+    i: 12,
+    j: 2,
+    k: 2,
+    l: 5,
+    m: 3,
+    n: 8,
+    o: 11,
+    p: 3,
+    q: 2,
+    r: 9,
+    s: 6,
+    t: 9,
+    u: 6,
+    v: 3,
+    w: 3,
+    x: 2,
+    y: 3,
+    z: 2,
 };
 /**
  * THE JAPANESE SET: 144 hiragana tiles in 45 kinds (`kana.ts`), as the English
@@ -45,11 +69,51 @@ export const TILE_MIX = {
  * ```
  */
 export const JAPANESE_TILE_MIX = {
-    あ: 2, い: 11, う: 12, え: 1, お: 2, か: 7, き: 6, く: 6, け: 3, こ: 4,
-    さ: 3, し: 10, す: 2, せ: 3, そ: 2, た: 4, ち: 3, つ: 6, て: 2, と: 3,
-    な: 1, に: 1, ぬ: 1, ね: 1, の: 1, は: 2, ひ: 2, ふ: 2, へ: 1, ほ: 1,
-    ま: 2, み: 1, む: 1, め: 1, も: 1, や: 2, ゆ: 4, よ: 6, ら: 1, り: 3,
-    る: 3, れ: 1, ろ: 1, わ: 1, ん: 11,
+    あ: 2,
+    い: 11,
+    う: 12,
+    え: 1,
+    お: 2,
+    か: 7,
+    き: 6,
+    く: 6,
+    け: 3,
+    こ: 4,
+    さ: 3,
+    し: 10,
+    す: 2,
+    せ: 3,
+    そ: 2,
+    た: 4,
+    ち: 3,
+    つ: 6,
+    て: 2,
+    と: 3,
+    な: 1,
+    に: 1,
+    ぬ: 1,
+    ね: 1,
+    の: 1,
+    は: 2,
+    ひ: 2,
+    ふ: 2,
+    へ: 1,
+    ほ: 1,
+    ま: 2,
+    み: 1,
+    む: 1,
+    め: 1,
+    も: 1,
+    や: 2,
+    ゆ: 4,
+    よ: 6,
+    ら: 1,
+    り: 3,
+    る: 3,
+    れ: 1,
+    ろ: 1,
+    わ: 1,
+    ん: 11,
 };
 /** The whole set, counted from the table.
  *
@@ -203,7 +267,7 @@ export const KUMIMOJI_TRADE = { give: 1, take: 3 };
  * console.log(KUMIMOJI_SCORE);
  * ```
  */
-export const KUMIMOJI_SCORE = { tile: 10, slowestMsATile: 30000 };
+export const KUMIMOJI_SCORE = { tile: 10, slowestMsATile: 30_000 };
 /**
  * PASS AND PLAY: up to eight people round one device, each with a hand and a
  * table of their own from one shared bag (`party.ts`). John, 2026-09-28: "pass

package/dist/turn.js

@@ -92,7 +92,12 @@ export function unturnPlace(row, col, turn) {
 export function turnArea(area, turn) {
     const a = turnPlace(area.top, area.left, turn);
     const b = turnPlace(area.top + area.rows - 1, area.left + area.cols - 1, turn);
-    return { top: Math.min(a.row, b.row), left: Math.min(a.col, b.col), rows: Math.abs(a.row - b.row) + 1, cols: Math.abs(a.col - b.col) + 1 };
+    return {
+        top: Math.min(a.row, b.row),
+        left: Math.min(a.col, b.col),
+        rows: Math.abs(a.row - b.row) + 1,
+        cols: Math.abs(a.col - b.col) + 1,
+    };
 }
 /**
  * A view the player zoomed or panned, turned a quarter clockwise with the

package/dist/ui/board.js

@@ -55,8 +55,22 @@ export function boardModel(tiles, verdict, glyphOf = (tile) => tileFace(tile).gl
         for (let col = left; col < left + cols; col += 1) {
             const square = squareAt(row, col);
             const tile = tiles.get(square) ?? null;
-            const mark = tile === null || verdict === null ? null : verdict.misspelt.has(square) ? "misspelt" : verdict.apart.has(square) ? "apart" : "sound";
-            squares.push({ square, row, col, tile, glyph: tile === null ? "" : glyphOf(tile), wild: tile !== null && tileFace(tile).wild, mark });
+            const mark = tile === null || verdict === null
+                ? null
+                : verdict.misspelt.has(square)
+                    ? "misspelt"
+                    : verdict.apart.has(square)
+                        ? "apart"
+                        : "sound";
+            squares.push({
+                square,
+                row,
+                col,
+                tile,
+                glyph: tile === null ? "" : glyphOf(tile),
+                wild: tile !== null && tileFace(tile).wild,
+                mark,
+            });
         }
     }
     return { rows, cols, squares };

package/dist/ui/cloth.d.ts

@@ -0,0 +1,72 @@
+/**
+ * THE CLOTHS A TABLE MAY BE LAID IN: the same five the whole family offers, and itsutsu.com's boards:
+ * green, blue, red, black and wood. Each is the felt's colour, its deep edge and the ink written on it.
+ * Given to a table as its `--km-felt` and `--km-accent` variables; `theme` is laid over it.
+ *
+ * @example
+ * ```ts
+ * import { KUMIMOJI_CLOTHS } from "@johnmorrisdotca/kumimoji/ui";
+ * console.log(Object.keys(KUMIMOJI_CLOTHS));
+ * ```
+ */
+export declare const KUMIMOJI_CLOTHS: {
+    readonly green: {
+        readonly felt: "#2f5d4a";
+        readonly deep: "#1f4135";
+        readonly ink: "#f3efe4";
+    };
+    readonly blue: {
+        readonly felt: "#2865a6";
+        readonly deep: "#1a4677";
+        readonly ink: "#f3efe4";
+    };
+    readonly red: {
+        readonly felt: "#a3342e";
+        readonly deep: "#7a231f";
+        readonly ink: "#f3efe4";
+    };
+    readonly black: {
+        readonly felt: "#2f3236";
+        readonly deep: "#1b1d20";
+        readonly ink: "#ece8dc";
+    };
+    readonly wood: {
+        readonly felt: "#e2ba7a";
+        readonly deep: "#c4954f";
+        readonly ink: "#2b1d0e";
+    };
+};
+/** A cloth's name.
+ *
+ * @example
+ * ```ts
+ * import type { Cloth } from "@johnmorrisdotca/kumimoji/ui";
+ * const value: Cloth = "green";
+ * console.log(value);
+ * ```
+ */
+export type Cloth = keyof typeof KUMIMOJI_CLOTHS;
+/** Whether a text names a cloth.
+ *
+ * @param text - Text to parse, validate or format.
+ * @returns Whether a text names a cloth.
+ *
+ * @example
+ * ```ts
+ * import { isCloth } from "@johnmorrisdotca/kumimoji/ui";
+ * console.log(isCloth("green"), isCloth("unknown"));
+ * ```
+ */
+export declare function isCloth(text: unknown): text is Cloth;
+/** A cloth as CSS variables; nothing for a name that is not a cloth, so the defaults stay.
+ *
+ * @param cloth - A built-in cloth name; an unknown name leaves the defaults.
+ * @returns The CSS variables to set on the element, or an empty object.
+ *
+ * @example
+ * ```ts
+ * import { clothVars } from "@johnmorrisdotca/kumimoji/ui";
+ * console.log(clothVars("green"));
+ * ```
+ */
+export declare function clothVars(cloth: string | undefined | null): Record<`--km-${string}`, string>;

package/dist/ui/cloth.js

@@ -0,0 +1,49 @@
+/**
+ * THE CLOTHS A TABLE MAY BE LAID IN: the same five the whole family offers, and itsutsu.com's boards:
+ * green, blue, red, black and wood. Each is the felt's colour, its deep edge and the ink written on it.
+ * Given to a table as its `--km-felt` and `--km-accent` variables; `theme` is laid over it.
+ *
+ * @example
+ * ```ts
+ * import { KUMIMOJI_CLOTHS } from "@johnmorrisdotca/kumimoji/ui";
+ * console.log(Object.keys(KUMIMOJI_CLOTHS));
+ * ```
+ */
+export const KUMIMOJI_CLOTHS = {
+    green: { felt: "#2f5d4a", deep: "#1f4135", ink: "#f3efe4" },
+    blue: { felt: "#2865a6", deep: "#1a4677", ink: "#f3efe4" },
+    red: { felt: "#a3342e", deep: "#7a231f", ink: "#f3efe4" },
+    black: { felt: "#2f3236", deep: "#1b1d20", ink: "#ece8dc" },
+    wood: { felt: "#e2ba7a", deep: "#c4954f", ink: "#2b1d0e" },
+};
+/** Whether a text names a cloth.
+ *
+ * @param text - Text to parse, validate or format.
+ * @returns Whether a text names a cloth.
+ *
+ * @example
+ * ```ts
+ * import { isCloth } from "@johnmorrisdotca/kumimoji/ui";
+ * console.log(isCloth("green"), isCloth("unknown"));
+ * ```
+ */
+export function isCloth(text) {
+    return typeof text === "string" && Object.hasOwn(KUMIMOJI_CLOTHS, text);
+}
+/** A cloth as CSS variables; nothing for a name that is not a cloth, so the defaults stay.
+ *
+ * @param cloth - A built-in cloth name; an unknown name leaves the defaults.
+ * @returns The CSS variables to set on the element, or an empty object.
+ *
+ * @example
+ * ```ts
+ * import { clothVars } from "@johnmorrisdotca/kumimoji/ui";
+ * console.log(clothVars("green"));
+ * ```
+ */
+export function clothVars(cloth) {
+    if (!isCloth(cloth))
+        return {};
+    const { felt, ink } = KUMIMOJI_CLOTHS[cloth];
+    return { "--km-felt": felt, "--km-accent": felt, "--km-accent-ink": ink };
+}

package/dist/ui/draw.d.ts

@@ -0,0 +1,62 @@
+import type { GridVerdict } from "../grid.ts";
+import { type TilePlay } from "../play.ts";
+import { type KumimojiLocale, type KumimojiStrings } from "../strings.ts";
+import type { TileWords } from "../tileWords.ts";
+/** What is picked up: a tile in the hand, or one on the table. */
+export type Held = {
+    from: "hand";
+    at: number;
+} | {
+    from: "table";
+    square: string;
+} | null;
+export declare function node<K extends keyof HTMLElementTagNameMap>(name: K, className?: string, text?: string): HTMLElementTagNameMap[K];
+export declare function button(text: string, onClick: () => void, primary?: boolean, testId?: string): HTMLButtonElement;
+/** The game as the drawing reads it, shared with the mount so a move and a redraw see the same table. */
+export type TableSession = {
+    play: TilePlay | null;
+    finishedAt: number | null;
+    started: number;
+    words: TileWords | null;
+    held: Held;
+    onSquare: string | null;
+    onHand: number;
+    say: KumimojiStrings;
+    locale: KumimojiLocale;
+    note: string;
+    destroyed: boolean;
+};
+/** The elements the mount built once; a redraw fills them and never replaces them. */
+export type TableParts = {
+    root: HTMLElement;
+    status: HTMLElement;
+    board: HTMLElement;
+    notes: HTMLElement;
+    hand: HTMLElement;
+    picker: HTMLElement;
+    controls: HTMLElement;
+    keepTitle: HTMLElement;
+    saveJson: HTMLButtonElement;
+    saveText: HTMLButtonElement;
+    load: HTMLButtonElement;
+    keepNote: HTMLElement;
+};
+/** What a button does to the game. The mount owns the rules; the drawing only asks. */
+export type TableActions = {
+    verdictOf: (now: TilePlay) => GridVerdict;
+    change: (next: TilePlay) => void;
+    newGame: () => void;
+};
+/**
+ * Draw the table from the session and the elements the mount built: the status
+ * line, the board, the hand, the wild-tile picker, the play buttons and the
+ * save labels, then put the keyboard focus back on the control it was on.
+ * @param session - The game, the words and what is held, shared with the mount.
+ * @param parts - The elements the drawing fills.
+ * @param actions - How a button changes the game or starts another.
+ * @returns The redraw, and the status line alone for the clock.
+ */
+export declare function tableDrawing(session: TableSession, parts: TableParts, actions: TableActions): {
+    render: () => void;
+    renderStatus: () => void;
+};

package/dist/ui/draw.js

@@ -0,0 +1,229 @@
+import { kumimojiClock } from "../export.js";
+import { assignHandTile, draw, liftAll, mayDraw, mayTrade, sortHand, tilesLeft, trade, } from "../play.js";
+import { kumimojiSay } from "../strings.js";
+import { tileFace } from "../tileFace.js";
+import { boardModel } from "./board.js";
+/** What a wild nobody has given a letter yet shows in the hand. */
+const WILD_MARK = "★";
+export function node(name, className, text) {
+    const made = document.createElement(name);
+    if (className !== undefined)
+        made.className = className;
+    if (text !== undefined)
+        made.textContent = text;
+    return made;
+}
+export function button(text, onClick, primary = false, testId) {
+    const made = node("button", primary ? "km-button km-primary" : "km-button", text);
+    made.type = "button";
+    if (testId !== undefined)
+        made.dataset.testid = testId;
+    made.addEventListener("click", onClick);
+    return made;
+}
+/**
+ * Draw the table from the session and the elements the mount built: the status
+ * line, the board, the hand, the wild-tile picker, the play buttons and the
+ * save labels, then put the keyboard focus back on the control it was on.
+ * @param session - The game, the words and what is held, shared with the mount.
+ * @param parts - The elements the drawing fills.
+ * @param actions - How a button changes the game or starts another.
+ * @returns The redraw, and the status line alone for the clock.
+ */
+export function tableDrawing(session, parts, actions) {
+    function renderStatus() {
+        const now = session.play;
+        parts.root.dataset.state = now === null ? "dealing" : session.finishedAt !== null ? "finished" : "playing";
+        if (now === null) {
+            parts.status.textContent = session.say.dealing;
+            return;
+        }
+        const left = tilesLeft(now);
+        parts.root.dataset.left = String(left);
+        const time = kumimojiClock((session.finishedAt ?? Date.now()) - session.started);
+        parts.status.textContent =
+            session.finishedAt !== null
+                ? kumimojiSay(session.say.finished, { time })
+                : kumimojiSay(left === 1 ? session.say.leftOne : session.say.left, { n: left, time });
+    }
+    function renderBoard(verdict) {
+        const playing = session.play;
+        const words = session.words;
+        const model = boardModel(playing.tiles, playing.tiles.size === 0 ? null : verdict, words.glyphOf);
+        const grid = node("div", "km-grid");
+        grid.style.gridTemplateColumns = `repeat(${model.cols}, var(--km-square))`;
+        grid.setAttribute("role", "group");
+        grid.setAttribute("aria-label", session.say.tableLabel);
+        grid.setAttribute("aria-description", session.say.tableKeys);
+        grid.dataset.cols = String(model.cols);
+        const cells = [];
+        for (const square of model.squares) {
+            const cell = node("button", "km-square");
+            cell.type = "button";
+            cell.dataset.square = square.square;
+            if (square.tile !== null) {
+                cell.classList.add("km-tile");
+                if (square.wild)
+                    cell.classList.add("km-wild");
+                if (square.mark !== null)
+                    cell.classList.add(`km-${square.mark}`);
+                cell.textContent = square.glyph;
+                cell.dataset.tile = square.glyph;
+                cell.setAttribute("aria-label", square.wild ? kumimojiSay(session.say.wildTile, { tile: square.glyph }) : square.glyph);
+            }
+            else {
+                cell.setAttribute("aria-label", session.say.emptySquare);
+            }
+            if (session.held?.from === "table" && session.held.square === square.square)
+                cell.classList.add("km-held");
+            cell.tabIndex = -1;
+            cells.push(cell);
+            grid.append(cell);
+        }
+        // The one Tab lands on: where the keyboard was, else a tile, else the middle.
+        const stop = cells.find((cell) => cell.dataset.square === session.onSquare) ??
+            cells.find((cell) => cell.classList.contains("km-tile")) ??
+            cells[Math.floor(cells.length / 2)];
+        if (stop !== undefined) {
+            stop.tabIndex = 0;
+            session.onSquare = stop.dataset.square ?? null;
+        }
+        parts.board.replaceChildren(grid);
+        parts.notes.textContent =
+            verdict.notWords.length > 0
+                ? kumimojiSay(session.say.notWords, { words: verdict.notWords.join(", ") })
+                : verdict.apart.size > 0
+                    ? session.say.apart
+                    : "";
+    }
+    function renderHand() {
+        const playing = session.play;
+        const words = session.words;
+        parts.hand.replaceChildren();
+        parts.hand.setAttribute("aria-label", session.say.handLabel);
+        playing.hand.forEach((tile, at) => {
+            const face = tileFace(tile);
+            const made = node("button", "km-tile km-in-hand");
+            made.type = "button";
+            made.dataset.hand = String(at);
+            made.textContent = face.blank ? WILD_MARK : words.glyphOf(tile);
+            if (face.wild)
+                made.classList.add("km-wild");
+            if (session.held?.from === "hand" && session.held.at === at)
+                made.classList.add("km-held");
+            made.dataset.tile = face.blank ? "*" : words.glyphOf(tile);
+            made.setAttribute("aria-label", face.blank
+                ? session.say.wildBlank
+                : face.wild
+                    ? kumimojiSay(session.say.wildTile, { tile: words.glyphOf(tile) })
+                    : words.glyphOf(tile));
+            made.tabIndex = at === Math.min(session.onHand, playing.hand.length - 1) ? 0 : -1;
+            parts.hand.append(made);
+        });
+        if (playing.hand.length === 0 && session.finishedAt === null)
+            parts.hand.append(node("span", "km-empty", session.say.noTiles));
+    }
+    function renderPicker() {
+        parts.picker.replaceChildren();
+        if (session.held?.from !== "hand" || session.play === null)
+            return;
+        const at = session.held.at;
+        const tile = session.play.hand[at];
+        if (tile === undefined || !tileFace(tile).wild)
+            return;
+        parts.picker.append(node("span", "km-picker-title", tile === "*" ? session.say.giveWild : session.say.changeWild));
+        const words = session.words;
+        for (const sound of words.wildOptions) {
+            const code = words.wildFor(sound);
+            if (code === null)
+                continue;
+            parts.picker.append(button(sound, () => {
+                session.held = { from: "hand", at };
+                actions.change(assignHandTile(session.play, at, code));
+            }));
+        }
+    }
+    function renderControls(verdict) {
+        parts.controls.replaceChildren();
+        if (session.finishedAt !== null) {
+            parts.controls.append(button(session.say.newGame, () => actions.newGame(), true, "km-new"));
+            return;
+        }
+        const now = session.play;
+        const drawButton = button(session.say.draw, () => {
+            session.held = null;
+            actions.change(draw(now));
+        }, true, "km-draw");
+        drawButton.disabled = !mayDraw(now, verdict);
+        const tradeButton = button(session.say.trade, () => {
+            if (session.held?.from !== "hand")
+                return;
+            const at = session.held.at;
+            session.held = null;
+            actions.change(trade(now, at));
+        }, false, "km-trade");
+        tradeButton.disabled = session.held?.from !== "hand" || !mayTrade(now);
+        parts.controls.append(drawButton, tradeButton, button(session.say.sort, () => actions.change(sortHand(now)), false, "km-sort"), button(session.say.liftAll, () => {
+            session.held = null;
+            actions.change(liftAll(now));
+        }, false, "km-lift"), button(session.say.newGame, () => actions.newGame(), false, "km-new"));
+    }
+    function renderKeep() {
+        parts.keepTitle.textContent = session.say.keep;
+        parts.saveJson.textContent = session.say.saveJson;
+        parts.saveText.textContent = session.say.saveText;
+        parts.load.textContent = session.say.load;
+        parts.saveJson.disabled = session.play === null;
+        parts.saveText.disabled = session.play === null;
+        parts.keepNote.textContent = session.note;
+    }
+    /** Where the keyboard is, so that it can be put back after everything is drawn again: the zone, and which of it. */
+    function keyboardAt() {
+        const on = document.activeElement;
+        if (on === null || !parts.root.contains(on))
+            return null;
+        const mark = (zone, id) => id === undefined ? null : { zone, id };
+        if (parts.board.contains(on))
+            return mark("board", on.dataset.square);
+        if (parts.hand.contains(on))
+            return mark("hand", on.dataset.hand);
+        if (parts.controls.contains(on))
+            return mark("controls", on.dataset.testid);
+        if (parts.picker.contains(on))
+            return mark("picker", String([...parts.picker.querySelectorAll("button")].indexOf(on)));
+        return null;
+    }
+    function keyboardBack(at) {
+        if (at === null)
+            return;
+        const zone = { board: parts.board, hand: parts.hand, controls: parts.controls, picker: parts.picker }[at.zone];
+        const found = at.zone === "board"
+            ? zone.querySelector(`[data-square="${at.id}"]`)
+            : at.zone === "hand"
+                ? zone.querySelector(`[data-hand="${at.id}"]`)
+                : at.zone === "controls"
+                    ? zone.querySelector(`[data-testid="${at.id}"]`)
+                    : zone.querySelectorAll("button")[Number(at.id)];
+        // A button that has become disabled cannot hold the focus; the table keeps it rather than dropping it on the page.
+        if (found !== undefined && found !== null && !found.disabled)
+            found.focus({ preventScroll: true });
+    }
+    function render() {
+        if (session.destroyed)
+            return;
+        const where = keyboardAt();
+        parts.root.lang = session.locale;
+        renderStatus();
+        renderKeep();
+        const now = session.play;
+        if (now === null || session.words === null)
+            return;
+        const verdict = actions.verdictOf(now);
+        renderBoard(verdict);
+        renderPicker();
+        renderHand();
+        renderControls(verdict);
+        keyboardBack(where);
+    }
+    return { render, renderStatus };
+}

package/dist/ui/mount.d.ts

@@ -2,6 +2,7 @@ import { type KumimojiSaved } from "../export.ts";
 import type { KumimojiDeal, KumimojiLanguage, KumimojiLength, KumimojiLevel } from "../kumimoji.types.ts";
 import { type TilePlay } from "../play.ts";
 import { type KumimojiLocale, type KumimojiStrings } from "../strings.ts";
+import { type Cloth } from "./cloth.ts";
 /**
  * Optional initial game, presentation, readiness and callback choices.
  * With nothing, it is a short English game from a hand of seven, with some wild tiles.
@@ -39,6 +40,8 @@ export type KumimojiTableOptions = {
     strings?: Partial<KumimojiStrings>;
     /** CSS variables set on the table itself, which win in light and dark alike: `{ "--km-felt": "#23405a" }`. */
     theme?: Readonly<Record<string, string>>;
+    /** The cloth the table is laid in: "green", "blue", "red", "black" or "wood", the family's five. `theme` is laid over it. */
+    cloth?: Cloth;
     /** Whether the table offers saving and loading. True by default. */
     keep?: boolean;
     /** Show native play-action buttons; a host hiding them supplies its own actions. */
@@ -63,7 +66,7 @@ export type KumimojiTableHandle = {
     /** Settles once the initial deal or restored game is ready. */
     readonly ready: Promise<void>;
     /** Change presentation and controls without redealing. */
-    set: (options: Pick<KumimojiTableOptions, "locale" | "strings" | "theme" | "keep" | "controls">) => void;
+    set: (options: Pick<KumimojiTableOptions, "locale" | "strings" | "cloth" | "theme" | "keep" | "controls">) => void;
     /** The game as it stands, or null while it is being dealt. */
     play: () => TilePlay | null;
     /** The game as it would be saved (`kumimojiToJSON`), or null while it is being dealt. */