@johnmorrisdotca/kumimoji 1.0.1 → 1.1.0

package/dist/strings.js

@@ -0,0 +1,96 @@
+/**
+ * EVERY WORD KUMIMOJI SHOWS A PERSON, in English and Japanese: the table's
+ * buttons and status lines, and the lines of a game written out as text
+ * (`kumimojiToText`). This is the language of the page, which is not the
+ * language of the tiles: an English page can play kana, and a Japanese page
+ * English letters.
+ *
+ * A page in another language passes its own table, whole or in part:
+ * `{ ...KUMIMOJI_STRINGS.en, draw: "Robar" }`. `{n}`, `{time}` and the other
+ * braces are filled in when a line is shown; a table must keep them.
+ * `docs/strings-ja.md` lists the two languages side by side and is made from
+ * this file.
+ */
+const EN = {
+    dealing: "Dealing…",
+    leftOne: "1 tile left in the bag · {time}",
+    left: "{n} tiles left in the bag · {time}",
+    finished: "Finished in {time}. Every tile laid, every run a word.",
+    tableLabel: "The table",
+    handLabel: "Your hand",
+    emptySquare: "Empty square",
+    wildTile: "{tile}, wild",
+    wildBlank: "Wild, no letter yet",
+    notWords: "Not words: {words}",
+    apart: "Every tile must join the one crossword.",
+    noTiles: "No tiles in hand",
+    giveWild: "Give the wild a letter:",
+    changeWild: "Change the wild's letter:",
+    draw: "Draw",
+    trade: "Trade for three",
+    sort: "Sort",
+    liftAll: "Lift all",
+    newGame: "New game",
+    keep: "Save and load",
+    saveJson: "Save as JSON",
+    saveText: "Save as text",
+    load: "Load a game",
+    loaded: "Game loaded.",
+    loadBad: "That file is not a game of Kumimoji these rules can open.",
+    textTitle: "Kumimoji: {language}, a hand of {hand}, seed {seed}",
+    textEmpty: "(no tiles on the table)",
+    textHand: "Hand: {tiles}",
+    textHandEmpty: "Hand: empty",
+    textLeft: "In the bag: {n}",
+    textTime: "Time: {time}",
+    textFinished: "Finished: every tile laid, every run a word.",
+    english: "English",
+    japanese: "Japanese",
+};
+const JA = {
+    dealing: "配っています…",
+    leftOne: "袋の残り1枚 · {time}",
+    left: "袋の残り{n}枚 · {time}",
+    finished: "{time}で完成しました。すべてのタイルを置き、どの並びも単語になっています。",
+    tableLabel: "テーブル",
+    handLabel: "手札",
+    emptySquare: "空きマス",
+    wildTile: "{tile}（ワイルド）",
+    wildBlank: "ワイルド（文字は未定）",
+    notWords: "単語ではありません: {words}",
+    apart: "すべてのタイルを1つのクロスワードにつなげてください。",
+    noTiles: "手札にタイルはありません",
+    giveWild: "ワイルドの文字を選んでください:",
+    changeWild: "ワイルドの文字を変える:",
+    draw: "1枚引く",
+    trade: "1枚を3枚と交換",
+    sort: "並べ替え",
+    liftAll: "すべて手札に戻す",
+    newGame: "新しいゲーム",
+    keep: "保存と読み込み",
+    saveJson: "JSONで保存",
+    saveText: "テキストで保存",
+    load: "ゲームを読み込む",
+    loaded: "ゲームを読み込みました。",
+    loadBad: "このファイルは、開くことのできる組み文字のゲームではありません。",
+    textTitle: "組み文字: {language}、手札{hand}枚、シード {seed}",
+    textEmpty: "（テーブルにタイルはありません）",
+    textHand: "手札: {tiles}",
+    textHandEmpty: "手札: なし",
+    textLeft: "袋の残り: {n}枚",
+    textTime: "時間: {time}",
+    textFinished: "完成: すべてのタイルを置き、どの並びも単語になっています。",
+    english: "英語",
+    japanese: "日本語",
+};
+/** The table's words in each language it speaks: `KUMIMOJI_STRINGS.en`, `KUMIMOJI_STRINGS.ja`. */
+export const KUMIMOJI_STRINGS = { en: EN, ja: JA };
+/** A line from a table of strings with its braces filled in: `kumimojiSay(strings.left, { n: 12, time: "1:05" })`. A brace with no value is left as it is. */
+export function kumimojiSay(line, values = {}) {
+    return line.replace(/\{(\w+)\}/g, (whole, name) => (name in values ? String(values[name]) : whole));
+}
+/** The table of strings for a locale with a page's own words laid over it. An unknown locale is English. */
+export function kumimojiStrings(locale, own = {}) {
+    const base = typeof locale === "string" && locale.toLowerCase().startsWith("ja") ? JA : EN;
+    return { ...base, ...own };
+}

package/dist/tableView.d.ts

@@ -73,6 +73,7 @@ export declare function fitView(area: Area, width: number, height: number, least
 export declare function overflows(area: Area, view: View, width: number, height: number): boolean;
 /** Zoomed by `factor` about the point (px, py) on the screen, which stays over the same spot of the table. */
 export declare function zoomView(view: View, factor: number, px: number, py: number): View;
+/** The view moved by `dx` and `dy` screen pixels. */
 export declare function panView(view: View, dx: number, dy: number): View;
 /**
  * Kept within reach: some of the area always on the screen, so a pan can

package/dist/tableView.js

@@ -91,6 +91,7 @@ export function zoomView(view, factor, px, py) {
     const scale = tile / view.tile;
     return { tile, x: px - (px - view.x) * scale, y: py - (py - view.y) * scale };
 }
+/** The view moved by `dx` and `dy` screen pixels. */
 export function panView(view, dx, dy) {
     return { ...view, x: view.x + dx, y: view.y + dy };
 }

package/dist/tileFace.d.ts

@@ -8,18 +8,22 @@
  * without fetching the dictionary, and `tileWords` reads the same codes.
  */
 export declare const KANA_TILE_START = 57344;
+/** Where the codes of wild tiles given a kana begin: the kana's place in `BASE_KANA` above this. */
 export declare const KANA_WILD_START = 61440;
 /** The code of a base kana's tile, or of a wild given that kana. */
 export declare function kanaTileCode(kana: string, wild?: boolean): string | null;
+/** What a tile shows: what `tileFace` answers. */
 export type TileFaceOf = {
     /** The letter or kana printed on it: 五 on a wild nobody has given one. */
     glyph: string;
     /** The other forms it plays as, small in its corner (`CORNER_FORMS`). */
     forms: string;
+    /** Whether it is a wild tile, given a letter or not. */
     wild: boolean;
     /** A wild with no letter yet. */
     blank: boolean;
 };
+/** What a tile code shows, read without the word list: its letter or kana, its corner forms, and whether it is a wild. */
 export declare function tileFace(tile: string): TileFaceOf;
 /** What a screen reader says for a tile: its letter, or that it is a wild and what it stands for. */
 export declare function tileDescription(tile: string): string;

package/dist/tileFace.js

@@ -9,6 +9,7 @@ import { BASE_KANA, CORNER_FORMS } from "./kana.js";
  * without fetching the dictionary, and `tileWords` reads the same codes.
  */
 export const KANA_TILE_START = 0xe000;
+/** Where the codes of wild tiles given a kana begin: the kana's place in `BASE_KANA` above this. */
 export const KANA_WILD_START = 0xf000;
 const KANA = [...BASE_KANA];
 /** The code of a base kana's tile, or of a wild given that kana. */
@@ -16,6 +17,7 @@ export function kanaTileCode(kana, wild = false) {
     const at = KANA.indexOf(kana);
     return at === -1 ? null : String.fromCodePoint((wild ? KANA_WILD_START : KANA_TILE_START) + at);
 }
+/** What a tile code shows, read without the word list: its letter or kana, its corner forms, and whether it is a wild. */
 export function tileFace(tile) {
     if (tile === "*")
         return { glyph: "五", forms: "", wild: true, blank: true };

package/dist/tileWords.d.ts

@@ -45,6 +45,7 @@ export type TileWords = {
 };
 /** Front-coded words of one length read back (see `scripts/tile-words.mjs`): a shared-prefix character, then the rest. */
 export declare function unpackLength(packed: string, length: number): string[];
+/** The English list read from its packed data: every word, the words by length, the set's mix, and the functions that turn tiles into words. */
 export declare function unpackTileWords(data: Readonly<Record<number, string>>): TileWords;
 /** Used by `tileWordsModule.ts` only: how to read a list where there is no browser. */
 export declare function readTileWordsWith(source: (language: KumimojiLanguage) => Promise<TileWords>): void;
@@ -65,6 +66,7 @@ export declare function tileWordsFrom(language: KumimojiLanguage, data: unknown)
  * server's own checks and the tests import.
  */
 export declare function loadTileWords(language?: KumimojiLanguage): Promise<TileWords>;
+/** The list already loaded, for judging and dealing. Throws where `loadTileWords` has not yet fetched it: a check that cannot read the list must not answer. */
 export declare function tileWords(language?: KumimojiLanguage): TileWords;
 /** Whether the list has been fetched yet, for a page to say "loading" rather than throw. */
 export declare function tileWordsReady(language?: KumimojiLanguage): boolean;

package/dist/tileWords.js

@@ -18,6 +18,7 @@ export function unpackLength(packed, length) {
     }
     return words;
 }
+/** The English list read from its packed data: every word, the words by length, the set's mix, and the functions that turn tiles into words. */
 export function unpackTileWords(data) {
     const byLength = new Map();
     const allowed = new Set();
@@ -152,6 +153,7 @@ export async function loadTileWords(language = "english") {
     loaded.set(language, words);
     return words;
 }
+/** The list already loaded, for judging and dealing. Throws where `loadTileWords` has not yet fetched it: a check that cannot read the list must not answer. */
 export function tileWords(language = "english") {
     const words = loaded.get(language);
     if (words === undefined)

package/dist/ui/board.d.ts

@@ -1,16 +1,22 @@
 import { type GridVerdict, type Tiles } from "../grid.ts";
 /** How a tile on the table stands: part of a sound crossword, in a run that is not a word, or apart from the rest. */
 export type TileMark = "sound" | "misspelt" | "apart";
+/** One square of the board drawn. */
 export type BoardSquare = {
+    /** Its key, `squareAt(row, col)`. */
     square: string;
     row: number;
     col: number;
     /** The tile standing there, or null for an empty square. */
     tile: string | null;
+    /** What is printed on the tile; "" for an empty square. */
     glyph: string;
+    /** Whether the tile is a wild. */
     wild: boolean;
+    /** How the tile stands; null for an empty square, or with no verdict. */
     mark: TileMark | null;
 };
+/** The part of the table to draw: how many rows and columns, and every square, row by row. */
 export type BoardModel = {
     rows: number;
     cols: number;

package/dist/ui/mount.d.ts

@@ -1,10 +1,16 @@
+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";
+/** What `mountKumimoji` may be given. Everything is optional: with nothing, it is a short English game from a hand of seven, with some wild tiles. */
 export type KumimojiTableOptions = {
+    /** The language of the tiles: `"english"` or `"japanese"` kana. English by default. */
     language?: KumimojiLanguage;
     /** The opening hand: 3, 7 or 11 tiles. */
     hand?: number;
+    /** How many of the tiles are wild: `"easy"` the most, `"medium"` some, `"hard"` none. */
     level?: KumimojiLevel;
+    /** How much of the set the bag holds: `"short"`, `"medium"`, or `"full"`, all 144 tiles. */
     gameLength?: KumimojiLength;
     /** Every diagonal run of three or more must be a word too. */
     diagonals?: boolean;
@@ -16,10 +22,32 @@ export type KumimojiTableOptions = {
         play: TilePlay;
         elapsedMs: number;
     }) => void;
+    /** Told after every change to the game, with the game as it would be saved. */
+    onChange?: (saved: KumimojiSaved) => void;
+    /** The language of the table's words, which is not the language of the tiles: `"en"` or `"ja"`. By default the page's own (`<html lang>`), and English for any other. */
+    locale?: KumimojiLocale;
+    /** Words of your own, laid over the locale's: any of `KumimojiStrings`. */
+    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>>;
+    /** Whether the table offers saving and loading. True by default. */
+    keep?: boolean;
 };
+/** The options that make a game, which a new game may change. */
+type GameOptions = Pick<KumimojiTableOptions, "language" | "hand" | "level" | "gameLength" | "diagonals" | "seed">;
+/** What `mountKumimoji` hands back: the game being played, and the ways to change it from outside. */
 export type KumimojiTableHandle = {
+    /** The game as it stands, or null while it is being dealt. */
     play: () => TilePlay | null;
-    newGame: (options?: Omit<KumimojiTableOptions, "onFinish">) => Promise<void>;
+    /** The game as it would be saved (`kumimojiToJSON`), or null while it is being dealt. */
+    saved: () => KumimojiSaved | null;
+    /** A new game at the same table, with any options changed. Resolves when it is dealt. */
+    newGame: (options?: GameOptions) => Promise<void>;
+    /** Put a game on the table: one read back by `kumimojiFromJSON`. Its clock goes on from the time already spent. */
+    setGame: (saved: KumimojiSaved) => Promise<void>;
+    /** Change the language of the table's words, and with it any words of your own. */
+    setLocale: (locale: KumimojiLocale, strings?: Partial<KumimojiStrings>) => void;
+    /** Take the table off the page and stop its clock. */
     destroy: () => void;
 };
 /**
@@ -29,8 +57,10 @@ export type KumimojiTableHandle = {
  * table and then a square to move it, or tap it again to take it back. When
  * the hand is empty and every run is a word, Draw brings the next tile; a
  * tile you cannot use can be traded for three. Use every tile in the bag to
- * finish.
+ * finish. Under the buttons, the game saves as JSON or as text, and a saved
+ * game loads back.
  *
  * The word list is fetched the first time a game in its language is dealt.
  */
 export declare function mountKumimoji(target: HTMLElement, options?: KumimojiTableOptions): KumimojiTableHandle;
+export {};

package/dist/ui/mount.js

@@ -1,12 +1,13 @@
+import { kumimojiClock, kumimojiFromJSON, kumimojiToJSON, kumimojiToText } from "../export.js";
 import { generateKumimoji } from "../generate.js";
 import { judgeWithWords } from "../judge.js";
 import { assignHandTile, deal, draw, isFinished, liftAll, liftToHand, mayDraw, mayTrade, moveOnTable, placeFromHand, sortHand, swapWithHand, tilesLeft, trade } from "../play.js";
+import { kumimojiSay, kumimojiStrings } from "../strings.js";
 import { KUMIMOJI_HANDS } from "../tiles.constants.js";
 import { tileFace } from "../tileFace.js";
 import { loadTileWords } from "../tileWords.js";
 import { boardModel } from "./board.js";
 import { KUMIMOJI_STYLE } from "./style.js";
-/** What is picked up: a tile in the hand, or one on the table. */
 /** What a wild nobody has given a letter yet shows in the hand. */
 const WILD_MARK = "★";
 function node(name, className, text) {
@@ -17,15 +18,22 @@ function node(name, className, text) {
         made.textContent = text;
     return made;
 }
-function button(text, onClick, primary = false) {
+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;
 }
-function clock(ms) {
-    const seconds = Math.floor(ms / 1000);
-    return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+/** Hand a string to the person as a file of that name. */
+function save(name, type, text) {
+    const url = URL.createObjectURL(new Blob([text], { type }));
+    const link = node("a");
+    link.href = url;
+    link.download = name;
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
 }
 /**
  * A GAME OF KUMIMOJI ALONE, IN PLAIN DOM: the bag dealt from a seed, your
@@ -34,12 +42,18 @@ function clock(ms) {
  * table and then a square to move it, or tap it again to take it back. When
  * the hand is empty and every run is a word, Draw brings the next tile; a
  * tile you cannot use can be traded for three. Use every tile in the bag to
- * finish.
+ * finish. Under the buttons, the game saves as JSON or as text, and a saved
+ * game loads back.
  *
  * The word list is fetched the first time a game in its language is dealt.
  */
 export function mountKumimoji(target, options = {}) {
-    let settings = { ...options };
+    let settings = { language: options.language, hand: options.hand, level: options.level, gameLength: options.gameLength, diagonals: options.diagonals, seed: options.seed };
+    const pageLocale = () => (typeof document !== "undefined" && document.documentElement.lang.toLowerCase().startsWith("ja") ? "ja" : "en");
+    let locale = options.locale ?? pageLocale();
+    let own = options.strings ?? {};
+    let say = kumimojiStrings(locale, own);
+    let note = "";
     let words = null;
     let dealt = null;
     let play = null;
@@ -47,18 +61,80 @@ export function mountKumimoji(target, options = {}) {
     let started = 0;
     let finishedAt = null;
     let destroyed = false;
+    // Each deal and each game put on the table takes a number; one that is overtaken while its list loads gives way.
+    let asked = 0;
     const root = node("div", "km-root");
+    root.dataset.testid = "km-root";
+    root.dataset.state = "dealing";
+    for (const [name, value] of Object.entries(options.theme ?? {}))
+        root.style.setProperty(name, value);
     const style = node("style");
     style.textContent = KUMIMOJI_STYLE;
     const status = node("p", "km-status");
+    status.dataset.testid = "km-status";
     status.setAttribute("aria-live", "polite");
     const board = node("div", "km-board");
+    board.dataset.testid = "km-board";
     const notes = node("p", "km-notes");
+    notes.dataset.testid = "km-notes";
     const hand = node("div", "km-hand");
+    hand.dataset.testid = "km-hand";
+    hand.setAttribute("role", "group");
     const picker = node("div", "km-picker");
+    picker.dataset.testid = "km-picker";
     const controls = node("div", "km-controls");
+    controls.dataset.testid = "km-controls";
+    const keep = node("details", "km-keep");
+    keep.dataset.testid = "km-keep";
     root.append(style, status, board, notes, picker, hand, controls);
+    if (options.keep !== false)
+        root.append(keep);
     target.append(root);
+    const savedNow = () => (play === null || dealt === null ? null : { deal: dealt, play, elapsedMs: (finishedAt ?? Date.now()) - started });
+    // The saving and loading are made once, so the fold stays open or shut as the person left it; only their words change.
+    const keepTitle = node("summary", "km-keep-title");
+    const keepNote = node("p", "km-note");
+    keepNote.dataset.testid = "km-note";
+    keepNote.setAttribute("aria-live", "polite");
+    const file = node("input");
+    file.type = "file";
+    file.accept = ".json,application/json";
+    file.hidden = true;
+    file.dataset.testid = "km-file";
+    const read = async (text) => {
+        const loaded = await kumimojiFromJSON(text).catch(() => null);
+        if (destroyed)
+            return;
+        if (loaded === null) {
+            note = say.loadBad;
+            render();
+            return;
+        }
+        await handle.setGame(loaded);
+        note = say.loaded;
+        render();
+    };
+    file.addEventListener("change", () => {
+        const chosen = file.files?.[0];
+        file.value = "";
+        if (chosen === undefined)
+            return;
+        void chosen.text().then(read, () => read(""));
+    });
+    const saveJson = button("", () => {
+        const now = savedNow();
+        if (now !== null)
+            save(`kumimoji-${now.deal.seed}.json`, "application/json", kumimojiToJSON(now));
+    }, false, "km-save-json");
+    const saveText = button("", () => {
+        const now = savedNow();
+        if (now !== null)
+            save(`kumimoji-${now.deal.seed}.txt`, "text/plain", kumimojiToText(now, say));
+    }, false, "km-save-text");
+    const load = button("", () => file.click(), false, "km-load");
+    const keepButtons = node("div", "km-controls");
+    keepButtons.append(saveJson, saveText, load);
+    keep.append(keepTitle, keepButtons, keepNote, file);
     const tick = setInterval(() => {
         if (play !== null && finishedAt === null)
             renderStatus();
@@ -71,6 +147,10 @@ export function mountKumimoji(target, options = {}) {
             finishedAt = Date.now();
             options.onFinish?.({ deal: dealt, play: next, elapsedMs: finishedAt - started });
         }
+        note = "";
+        const now = savedNow();
+        if (now !== null)
+            options.onChange?.(now);
         render();
     };
     const tapSquare = (square) => {
@@ -116,19 +196,22 @@ export function mountKumimoji(target, options = {}) {
             tapHand(Number(at));
     });
     function renderStatus() {
+        root.dataset.state = play === null ? "dealing" : finishedAt !== null ? "finished" : "playing";
         if (play === null) {
-            status.textContent = "Dealing…";
+            status.textContent = say.dealing;
             return;
         }
         const left = tilesLeft(play);
-        const time = clock((finishedAt ?? Date.now()) - started);
-        status.textContent = finishedAt !== null ? `Finished in ${time}. Every tile laid, every run a word.` : `${left} ${left === 1 ? "tile" : "tiles"} left in the bag · ${time}`;
+        root.dataset.left = String(left);
+        const time = kumimojiClock((finishedAt ?? Date.now()) - started);
+        status.textContent = finishedAt !== null ? kumimojiSay(say.finished, { time }) : kumimojiSay(left === 1 ? say.leftOne : say.left, { n: left, time });
     }
     function renderBoard(verdict) {
         const model = boardModel(play.tiles, play.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", "grid");
+        grid.setAttribute("role", "group");
+        grid.setAttribute("aria-label", say.tableLabel);
         for (const square of model.squares) {
             const cell = node("button", "km-square");
             cell.type = "button";
@@ -140,20 +223,22 @@ export function mountKumimoji(target, options = {}) {
                 if (square.mark !== null)
                     cell.classList.add(`km-${square.mark}`);
                 cell.textContent = square.glyph;
-                cell.setAttribute("aria-label", `${square.glyph}${square.wild ? ", wild" : ""}`);
+                cell.dataset.tile = square.glyph;
+                cell.setAttribute("aria-label", square.wild ? kumimojiSay(say.wildTile, { tile: square.glyph }) : square.glyph);
             }
             else {
-                cell.setAttribute("aria-label", "Empty square");
+                cell.setAttribute("aria-label", say.emptySquare);
             }
             if (held?.from === "table" && held.square === square.square)
                 cell.classList.add("km-held");
             grid.append(cell);
         }
         board.replaceChildren(grid);
-        notes.textContent = verdict.notWords.length > 0 ? `Not words: ${verdict.notWords.join(", ")}` : verdict.apart.size > 0 ? "Every tile must join the one crossword." : "";
+        notes.textContent = verdict.notWords.length > 0 ? kumimojiSay(say.notWords, { words: verdict.notWords.join(", ") }) : verdict.apart.size > 0 ? say.apart : "";
     }
     function renderHand() {
         hand.replaceChildren();
+        hand.setAttribute("aria-label", say.handLabel);
         play.hand.forEach((tile, at) => {
             const face = tileFace(tile);
             const made = node("button", "km-tile km-in-hand");
@@ -164,11 +249,12 @@ export function mountKumimoji(target, options = {}) {
                 made.classList.add("km-wild");
             if (held?.from === "hand" && held.at === at)
                 made.classList.add("km-held");
-            made.setAttribute("aria-label", face.blank ? "Wild, no letter yet" : `${words.glyphOf(tile)}${face.wild ? ", wild" : ""}`);
+            made.dataset.tile = face.blank ? "*" : words.glyphOf(tile);
+            made.setAttribute("aria-label", face.blank ? say.wildBlank : face.wild ? kumimojiSay(say.wildTile, { tile: words.glyphOf(tile) }) : words.glyphOf(tile));
             hand.append(made);
         });
         if (play.hand.length === 0 && finishedAt === null)
-            hand.append(node("span", "km-empty", "No tiles in hand"));
+            hand.append(node("span", "km-empty", say.noTiles));
     }
     function renderPicker() {
         picker.replaceChildren();
@@ -178,7 +264,7 @@ export function mountKumimoji(target, options = {}) {
         const tile = play.hand[at];
         if (tile === undefined || !tileFace(tile).wild)
             return;
-        picker.append(node("span", "km-picker-title", tile === "*" ? "Give the wild a letter:" : "Change the wild's letter:"));
+        picker.append(node("span", "km-picker-title", tile === "*" ? say.giveWild : say.changeWild));
         for (const sound of words.wildOptions) {
             const code = words.wildFor(sound);
             if (code === null)
@@ -192,32 +278,43 @@ export function mountKumimoji(target, options = {}) {
     function renderControls(verdict) {
         controls.replaceChildren();
         if (finishedAt !== null) {
-            controls.append(button("New game", () => void handle.newGame(), true));
+            controls.append(button(say.newGame, () => void handle.newGame(), true, "km-new"));
             return;
         }
         const now = play;
-        const drawButton = button("Draw", () => {
+        const drawButton = button(say.draw, () => {
             held = null;
             change(draw(now));
-        }, true);
+        }, true, "km-draw");
         drawButton.disabled = !mayDraw(now, verdict);
-        const tradeButton = button("Trade for three", () => {
+        const tradeButton = button(say.trade, () => {
             if (held?.from !== "hand")
                 return;
             const at = held.at;
             held = null;
             change(trade(now, at));
-        });
+        }, false, "km-trade");
         tradeButton.disabled = held?.from !== "hand" || !mayTrade(now);
-        controls.append(drawButton, tradeButton, button("Sort", () => change(sortHand(now))), button("Lift all", () => {
+        controls.append(drawButton, tradeButton, button(say.sort, () => change(sortHand(now)), false, "km-sort"), button(say.liftAll, () => {
             held = null;
             change(liftAll(now));
-        }), button("New game", () => void handle.newGame()));
+        }, false, "km-lift"), button(say.newGame, () => void handle.newGame(), false, "km-new"));
+    }
+    function renderKeep() {
+        keepTitle.textContent = say.keep;
+        saveJson.textContent = say.saveJson;
+        saveText.textContent = say.saveText;
+        load.textContent = say.load;
+        saveJson.disabled = play === null;
+        saveText.disabled = play === null;
+        keepNote.textContent = note;
     }
     function render() {
         if (destroyed)
             return;
+        root.lang = locale;
         renderStatus();
+        renderKeep();
         if (play === null || words === null)
             return;
         const verdict = verdictOf(play);
@@ -228,20 +325,54 @@ export function mountKumimoji(target, options = {}) {
     }
     const handle = {
         play: () => play,
+        saved: savedNow,
+        setGame: async (saved) => {
+            const mine = ++asked;
+            const language = saved.deal.language;
+            settings = { language, hand: saved.deal.size, level: saved.deal.level, gameLength: saved.deal.gameLength, diagonals: saved.deal.diagonals === true, seed: undefined };
+            const list = await loadTileWords(language);
+            if (destroyed || mine !== asked)
+                return;
+            words = list;
+            root.classList.toggle("km-japanese", language === "japanese");
+            dealt = saved.deal;
+            root.dataset.seed = String(saved.deal.seed);
+            held = null;
+            finishedAt = null;
+            started = Date.now() - saved.elapsedMs;
+            // A game loaded already finished stays finished, at the time it took, and is not announced again.
+            if (isFinished(saved.play, judgeWithWords(saved.play.tiles, words, { diagonals: settings.diagonals === true })))
+                finishedAt = Date.now();
+            play = saved.play;
+            note = "";
+            options.onChange?.(saved);
+            render();
+        },
+        setLocale: (next, strings) => {
+            locale = next;
+            if (strings !== undefined)
+                own = strings;
+            say = kumimojiStrings(locale, own);
+            render();
+        },
         newGame: async (changed = {}) => {
+            const mine = ++asked;
             settings = { ...settings, ...changed, seed: undefined };
             const language = settings.language ?? "english";
             const size = settings.hand ?? KUMIMOJI_HANDS.quick;
             play = null;
             held = null;
             finishedAt = null;
+            note = "";
             render();
-            words = await loadTileWords(language);
-            if (destroyed)
+            const list = await loadTileWords(language);
+            if (destroyed || mine !== asked)
                 return;
+            words = list;
             // A seed deals one game: the next is dealt from a new one unless asked for by seed again.
             const seed = changed.seed ?? Math.floor(Math.random() * 2 ** 31);
             root.classList.toggle("km-japanese", language === "japanese");
+            root.dataset.seed = String(seed);
             dealt = generateKumimoji(size, settings.level ?? "medium", seed, { language, gameLength: settings.gameLength, diagonals: settings.diagonals });
             started = Date.now();
             change(deal(dealt.givens, size));

package/dist/ui/style.d.ts

@@ -1,6 +1,7 @@
 /**
- * The table's own styles, scoped to `.km-root`, every colour a CSS variable
- * so a page can wear it in its own colours. Light and dark follow the
- * reader's system.
+ * The table's own styles, scoped to `.km-root`, every colour and size a CSS
+ * variable so a page can wear it in its own colours (set them on the element
+ * or any ancestor, or pass them as `theme`). Light and dark follow the
+ * reader's system. Everything to be tapped is at least 44px.
  */
-export declare const KUMIMOJI_STYLE = "\n.km-root {\n  --km-square: 36px; --km-felt: #2f5d4a; --km-grid-line: rgba(255,255,255,.12); --km-tile: #f3e6c8; --km-tile-ink: #2a2118;\n  --km-wild: #f6d27a; --km-wrong: #d9534f; --km-apart: #9aa3a0; --km-held: #ffcf3f; --km-ink: #1f2320; --km-panel: #f7f3ea;\n  --km-line: rgba(20,20,20,.35); --km-accent: #2f5d4a; --km-accent-ink: #fff;\n  display: grid; gap: 10px; color: var(--km-ink); font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif; font-size: 15px;\n}\n@media (prefers-color-scheme: dark) {\n  .km-root { --km-felt: #1e3a2f; --km-ink: #ece8dc; --km-panel: #1d201e; --km-line: rgba(255,255,255,.25); --km-accent: #6fb08f; --km-accent-ink: #10150f; }\n}\n.km-status { margin: 0; min-height: 1.4em; font-variant-numeric: tabular-nums; }\n.km-board { background: var(--km-felt); border-radius: 12px; padding: 10px; overflow: auto; max-height: 70vh; }\n.km-grid { display: grid; gap: 2px; width: max-content; margin: 0 auto; }\n.km-square { width: var(--km-square); height: var(--km-square); border: 0; border-radius: 5px; background: var(--km-grid-line); padding: 0; cursor: pointer; }\n.km-tile { display: grid; place-items: center; width: var(--km-square); height: var(--km-square); border-radius: 6px; border: 0; padding: 0;\n  background: var(--km-tile); color: var(--km-tile-ink); font: 700 20px/1 system-ui, sans-serif; text-transform: uppercase;\n  box-shadow: 0 2px 0 rgba(0,0,0,.35); cursor: pointer; }\n.km-japanese .km-tile { font-size: 19px; text-transform: none; }\n.km-wild { background: var(--km-wild); }\n.km-misspelt { box-shadow: 0 0 0 3px var(--km-wrong) inset, 0 2px 0 rgba(0,0,0,.35); }\n.km-apart { opacity: .6; }\n.km-held { outline: 3px solid var(--km-held); outline-offset: 1px; }\n.km-notes { margin: 0; min-height: 1.4em; font-size: 14px; opacity: .8; }\n.km-hand { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; align-items: center; padding: 8px; border-radius: 10px; background: var(--km-panel); }\n.km-empty { opacity: .6; font-size: 14px; }\n.km-picker { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }\n.km-picker:empty { display: none; }\n.km-picker-title { width: 100%; font-size: 14px; }\n.km-picker .km-button { padding: 4px 8px; min-width: 32px; text-transform: uppercase; }\n.km-japanese .km-picker .km-button { text-transform: none; }\n.km-controls { display: flex; flex-wrap: wrap; gap: 8px; }\n.km-button { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--km-line); background: var(--km-panel); color: var(--km-ink); cursor: pointer; }\n.km-button:disabled { opacity: .45; cursor: default; }\n.km-primary { background: var(--km-accent); color: var(--km-accent-ink); border-color: transparent; }\n";
+export declare const KUMIMOJI_STYLE = "\n.km-root {\n  --km-square: 44px; --km-felt: #2f5d4a; --km-grid-line: rgba(255,255,255,.12); --km-tile: #f3e6c8; --km-tile-ink: #2a2118;\n  --km-wild: #f6d27a; --km-wrong: #d9534f; --km-held: #ffcf3f; --km-ink: #1f2320; --km-panel: #f7f3ea;\n  --km-line: rgba(20,20,20,.35); --km-accent: #2f5d4a; --km-accent-ink: #fff;\n  --km-radius: 12px; --km-font: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  display: grid; gap: 10px; min-width: 0; color: var(--km-ink); font-family: var(--km-font); font-size: 15px;\n}\n@media (prefers-color-scheme: dark) {\n  .km-root { --km-felt: #1e3a2f; --km-ink: #ece8dc; --km-panel: #1d201e; --km-line: rgba(255,255,255,.25); --km-accent: #6fb08f; --km-accent-ink: #10150f; }\n}\n.km-root > * { min-width: 0; }\n.km-status { margin: 0; min-height: 1.4em; font-variant-numeric: tabular-nums; }\n.km-board { background: var(--km-felt); border-radius: var(--km-radius); padding: 10px; overflow: auto; max-height: 70vh; }\n.km-grid { display: grid; gap: 2px; width: max-content; margin: 0 auto; }\n.km-square { width: var(--km-square); height: var(--km-square); border: 0; border-radius: 5px; background: var(--km-grid-line); padding: 0; cursor: pointer; touch-action: manipulation; }\n.km-tile { display: grid; place-items: center; width: var(--km-square); height: var(--km-square); border-radius: 6px; border: 0; padding: 0;\n  background: var(--km-tile); color: var(--km-tile-ink); font: 700 calc(var(--km-square) * .55)/1 var(--km-font); text-transform: uppercase;\n  box-shadow: 0 2px 0 rgba(0,0,0,.35); cursor: pointer; touch-action: manipulation; }\n.km-japanese .km-tile { font-size: calc(var(--km-square) * .52); text-transform: none; }\n.km-wild { background: var(--km-wild); }\n.km-misspelt { box-shadow: 0 0 0 3px var(--km-wrong) inset, 0 2px 0 rgba(0,0,0,.35); }\n.km-apart { opacity: .6; }\n.km-held { outline: 3px solid var(--km-held); outline-offset: 1px; }\n.km-square:focus-visible, .km-button:focus-visible, .km-keep-title:focus-visible { outline: 3px solid var(--km-held); outline-offset: 2px; }\n.km-notes { margin: 0; min-height: 1.4em; font-size: 14px; opacity: .8; overflow-wrap: anywhere; }\n.km-hand { display: flex; flex-wrap: wrap; gap: 6px; min-height: calc(var(--km-square) + 16px); align-items: center; padding: 8px; border-radius: 10px; background: var(--km-panel); }\n.km-empty { opacity: .6; font-size: 14px; }\n.km-picker { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }\n.km-picker:empty { display: none; }\n.km-picker-title { width: 100%; font-size: 14px; }\n.km-picker .km-button { padding: 0 8px; text-transform: uppercase; }\n.km-japanese .km-picker .km-button { text-transform: none; }\n.km-controls { display: flex; flex-wrap: wrap; gap: 8px; }\n.km-button { font: inherit; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--km-line); background: var(--km-panel); color: var(--km-ink); cursor: pointer; touch-action: manipulation; }\n.km-button:disabled { opacity: .45; cursor: default; }\n.km-primary { background: var(--km-accent); color: var(--km-accent-ink); border-color: transparent; }\n.km-keep { border-radius: 10px; background: var(--km-panel); padding: 0 10px; }\n.km-keep[open] { padding-bottom: 10px; }\n.km-keep-title { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }\n.km-note { margin: 8px 0 0; min-height: 1.4em; font-size: 13px; }\n";