@johnmorrisdotca/kumimoji 1.2.2 → 1.3.1

package/dist/element.js

@@ -1,22 +1,12 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _KumimojiTable_instances, _KumimojiTable_table, _KumimojiTable_key, _KumimojiTable_queued, _KumimojiTable_seed, _KumimojiTable_refresh;
 import { kumimojiDailySeed } from "./daily.js";
+import { embedDay } from "./embed-day.js";
 import { KUMIMOJI_HANDS } from "./tiles.constants.js";
 import { mountKumimoji } from "./ui/mount.js";
+import { KUMIMOJI_STYLE } from "./ui/style.js";
 const ElementBase = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
-const oneOf = (value, allowed) => (allowed.includes(value) ? value : undefined);
-const isOn = (value) => value !== null && ["true", "on", "1", "yes"].includes(value.toLowerCase());
+const oneOf = (value, allowed) => allowed.includes(value) ? value : undefined;
+const isOn = (value, fallback = false) => value === null ? fallback : !["false", "off", "no", "0"].includes(value.trim().toLowerCase());
 const HANDS = Object.values(KUMIMOJI_HANDS);
 /**
  * THE `<kumimoji-table>` ELEMENT: a game of Kumimoji alone in a tag, with no
@@ -29,8 +19,7 @@ const HANDS = Object.values(KUMIMOJI_HANDS);
  * <kumimoji-table language="japanese" level="easy" seed="daily"></kumimoji-table>
  * ```
  *
- * Attributes (each is read again when it changes; a change to any but `lang`
- * deals a new game):
+ * Attributes configure the starting game; display, language and control changes preserve play:
  *  - `language`: the tiles, `english` (default) or `japanese` kana.
  *  - `hand`: the opening hand, 3, 7 (default) or 11.
  *  - `level`: how many tiles are wild, `easy` (most), `medium` (default) or `hard` (none).
@@ -42,89 +31,382 @@ const HANDS = Object.values(KUMIMOJI_HANDS);
  * It fires `kumimoji-change` after every change to the game, with the game as it would
  * be saved as `event.detail.saved`, and `kumimoji-finish` when the last tile is laid and every run
  * is a word, with `event.detail` the deal, the play and the time it took. It has the methods
- * `newGame()` and `setGame()`. A table the rules do not offer (a hand of 5, say) draws nothing.
+ * `newGame()` and `setGame()`. Invalid input shows a status and a plain error event.
+ */
+/**
+ * Native table options, checked alongside builder coverage.
+ * @example
+ * ```ts
+ * import { KUMIMOJI_EMBED_OPTION_KEYS } from "@johnmorrisdotca/kumimoji/element";
+ * console.log(KUMIMOJI_EMBED_OPTION_KEYS.includes("saved"));
+ * ```
+ */
+export const KUMIMOJI_EMBED_OPTION_KEYS = Object.keys({
+    language: true,
+    hand: true,
+    level: true,
+    gameLength: true,
+    diagonals: true,
+    seed: true,
+    onFinish: true,
+    onChange: true,
+    locale: true,
+    strings: true,
+    theme: true,
+    keep: true,
+    controls: true,
+    saved: true,
+    onError: true,
+});
+/**
+ * A reflected crossword table with the native table handle and saved-state getter.
+ * @example
+ * ```ts
+ * import { KumimojiTable } from "@johnmorrisdotca/kumimoji/element";
+ * console.log(KumimojiTable.observedAttributes.includes("daily"));
+ * ```
  */
 export class KumimojiTable extends ElementBase {
-    constructor() {
-        super(...arguments);
-        _KumimojiTable_instances.add(this);
-        _KumimojiTable_table.set(this, null);
-        _KumimojiTable_key.set(this, "");
-        _KumimojiTable_queued.set(this, false);
-        _KumimojiTable_seed.set(this, null);
+    static observedAttributes = [
+        "language",
+        "hand",
+        "level",
+        "length",
+        "diagonals",
+        "seed",
+        "lang",
+        "keep",
+        "daily",
+        "controls",
+        "theme",
+        "size",
+        "width",
+        "label",
+    ];
+    #table = null;
+    #key = "";
+    #queued = false;
+    #seed = null;
+    #options = {};
+    #revision = 0;
+    #widthBefore = null;
+    #widthOwned = false;
+    #labelBefore = null;
+    /** Native host options. Callback/presentation changes preserve the current game. */
+    get options() {
+        return this.#options;
+    }
+    set options(value) {
+        this.#options = value ?? {};
+        if (this.isConnected)
+            this.#refresh();
+    }
+    #write(name, value) {
+        if (value === null || value === undefined)
+            this.removeAttribute(name);
+        else
+            this.setAttribute(name, String(value));
     }
     connectedCallback() {
-        __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_refresh).call(this);
+        this.#refresh();
     }
     disconnectedCallback() {
-        __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.destroy();
-        __classPrivateFieldSet(this, _KumimojiTable_table, null, "f");
-        __classPrivateFieldSet(this, _KumimojiTable_key, "", "f");
+        ++this.#revision;
+        this.#table?.destroy();
+        this.#table = null;
+        this.#key = "";
     }
     attributeChangedCallback() {
-        if (!this.isConnected || __classPrivateFieldGet(this, _KumimojiTable_queued, "f"))
+        if (!this.isConnected || this.#queued)
             return;
-        __classPrivateFieldSet(this, _KumimojiTable_queued, true, "f");
+        this.#queued = true;
         queueMicrotask(() => {
-            __classPrivateFieldSet(this, _KumimojiTable_queued, false, "f");
-            __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_refresh).call(this);
+            this.#queued = false;
+            if (this.isConnected)
+                this.#refresh();
         });
     }
     /** The mounted table's handle (`mountKumimoji`), or null while the attributes name no table the rules offer. */
     get table() {
-        return __classPrivateFieldGet(this, _KumimojiTable_table, "f");
+        return this.#table;
     }
     /** The game as it would be saved, or null while there is none (or it is still being dealt). */
     get saved() {
-        return __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.saved() ?? null;
+        return this.#table?.saved() ?? null;
     }
     /** A new game at the same table: see `KumimojiTableHandle.newGame`. */
     newGame(options) {
-        return __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.newGame(options) ?? Promise.resolve();
+        return this.#table?.newGame(options) ?? Promise.resolve();
     }
     /** Put a game on the table: see `KumimojiTableHandle.setGame`. */
     setGame(saved) {
-        return __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.setGame(saved) ?? Promise.resolve();
+        return this.#table?.setGame(saved) ?? Promise.resolve();
+    }
+    /** The `language` attribute, reflected. */
+    get language() {
+        return this.getAttribute("language");
+    }
+    set language(value) {
+        this.#write("language", value);
+    }
+    /** The `hand` attribute, reflected. */
+    get hand() {
+        return this.getAttribute("hand");
+    }
+    set hand(value) {
+        this.#write("hand", value);
+    }
+    /** The `level` attribute, reflected. */
+    get level() {
+        return this.getAttribute("level");
+    }
+    set level(value) {
+        this.#write("level", value);
+    }
+    /** The `length` attribute, reflected. */
+    get length() {
+        return this.getAttribute("length");
+    }
+    set length(value) {
+        this.#write("length", value);
+    }
+    /** The `diagonals` attribute, reflected. */
+    get diagonals() {
+        return this.getAttribute("diagonals");
+    }
+    set diagonals(value) {
+        this.#write("diagonals", value);
+    }
+    /** The `seed` attribute, reflected. */
+    get seed() {
+        return this.getAttribute("seed");
+    }
+    set seed(value) {
+        this.#write("seed", value);
+    }
+    /** The `keep` attribute, reflected. */
+    get keep() {
+        return this.getAttribute("keep");
     }
+    set keep(value) {
+        this.#write("keep", value);
+    }
+    /** The `daily` attribute, reflected. */
+    get daily() {
+        return this.getAttribute("daily");
+    }
+    set daily(value) {
+        this.#write("daily", value);
+    }
+    /** The `controls` attribute, reflected. */
+    get controls() {
+        return this.getAttribute("controls");
+    }
+    set controls(value) {
+        this.#write("controls", value);
+    }
+    /** The `theme` attribute, reflected. */
+    get theme() {
+        return this.getAttribute("theme");
+    }
+    set theme(value) {
+        this.#write("theme", value);
+    }
+    /** The `size` attribute, reflected. */
+    get size() {
+        return this.getAttribute("size");
+    }
+    set size(value) {
+        this.#write("size", value);
+    }
+    /** The `width` attribute, reflected. */
+    get width() {
+        return this.getAttribute("width");
+    }
+    set width(value) {
+        this.#write("width", value);
+    }
+    /** The `label` attribute, reflected. */
+    get label() {
+        return this.getAttribute("label");
+    }
+    set label(value) {
+        this.#write("label", value);
+    }
+    #frame() {
+        this.style.display = "block";
+        this.style.maxWidth = "100%";
+        const width = Number(this.getAttribute("width"));
+        const size = this.getAttribute("size");
+        const pixels = this.hasAttribute("width") && width > 0 && Number.isFinite(width)
+            ? Math.min(width, 2000)
+            : size === "small"
+                ? 320
+                : size === "medium"
+                    ? 480
+                    : size === "large"
+                        ? 640
+                        : null;
+        if (pixels !== null) {
+            if (!this.#widthOwned)
+                this.#widthBefore = this.style.width;
+            this.#widthOwned = true;
+            this.style.width = `${pixels}px`;
+        }
+        else if (this.#widthOwned) {
+            this.style.width = this.#widthBefore ?? "";
+            this.#widthOwned = false;
+        }
+        const theme = this.getAttribute("theme");
+        this.style.colorScheme = theme === "light" || theme === "dark" ? theme : "light dark";
+        this.setAttribute("data-kumimoji-embed", "");
+        const root = this.getRootNode();
+        const target = typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root : this.ownerDocument.head;
+        if (target.querySelector("style[data-kumimoji-embed-style]") === null) {
+            const style = this.ownerDocument.createElement("style");
+            style.setAttribute("data-kumimoji-embed-style", "");
+            const light = KUMIMOJI_STYLE.match(/\.km-root \{([^}]+)\}/)?.[1] ?? "";
+            const dark = KUMIMOJI_STYLE.match(/@media \(prefers-color-scheme: dark\) \{\s*\.km-root \{([^}]+)\}/)?.[1] ?? "";
+            style.textContent = `[data-kumimoji-embed][theme="light"] .km-root{${light}}[data-kumimoji-embed][theme="dark"] .km-root{${dark}}[data-kumimoji-embed]>.km-root{background:var(--km-panel);padding:12px;border-radius:12px}[data-kumimoji-embed] .km-controls[hidden]{display:none}`;
+            target.append(style);
+        }
+        if (this.hasAttribute("label")) {
+            this.#labelBefore ??= { role: this.getAttribute("role"), label: this.getAttribute("aria-label") };
+            this.setAttribute("role", "group");
+            this.setAttribute("aria-label", this.getAttribute("label"));
+        }
+        else if (this.#labelBefore !== null) {
+            for (const [name, value] of [
+                ["role", this.#labelBefore.role],
+                ["aria-label", this.#labelBefore.label],
+            ]) {
+                if (value === null)
+                    this.removeAttribute(name);
+                else
+                    this.setAttribute(name, value);
+            }
+            this.#labelBefore = null;
+        }
+    }
+    #refresh() {
+        this.#frame();
+        try {
+            const language = oneOf(this.getAttribute("language"), ["english", "japanese"]) ?? this.#options.language;
+            const hand = this.hasAttribute("hand") ? Number(this.getAttribute("hand")) : this.#options.hand;
+            const level = oneOf(this.getAttribute("level"), ["easy", "medium", "hard"]) ?? this.#options.level;
+            const gameLength = oneOf(this.getAttribute("length"), ["short", "medium", "full"]) ?? this.#options.gameLength;
+            const diagonals = isOn(this.getAttribute("diagonals"), this.#options.diagonals ?? false);
+            const seedAttribute = this.getAttribute("seed");
+            const asked = Number(seedAttribute);
+            const day = embedDay(this.hasAttribute("daily") ? this.getAttribute("daily") : seedAttribute === "daily" ? "today" : null);
+            let seed;
+            if (day !== null)
+                seed = kumimojiDailySeed(new Date(`${day}T00:00:00Z`));
+            else if (seedAttribute !== null && Number.isInteger(asked) && asked >= 0 && asked <= 0xffffffff)
+                seed = asked;
+            else if (this.#options.seed !== undefined && this.#options.seed !== null)
+                seed = this.#options.seed;
+            else {
+                let held = this.#seed;
+                if (held === null) {
+                    held = Math.floor(Math.random() * 2 ** 31);
+                    this.#seed = held;
+                }
+                seed = held;
+            }
+            const lang = this.getAttribute("lang");
+            const locale = lang === "en" || lang === "ja"
+                ? lang
+                : (this.#options.locale ??
+                    (this.ownerDocument.documentElement.lang.toLowerCase().startsWith("ja") ? "ja" : "en"));
+            const keep = isOn(this.getAttribute("keep"), this.#options.keep ?? true);
+            const controls = isOn(this.getAttribute("controls"), this.#options.controls ?? true);
+            const key = JSON.stringify([language, hand, level, gameLength, diagonals, seed, day, this.#options.saved]);
+            if (key === this.#key && this.#table !== null) {
+                this.#table.set({ locale, strings: this.#options.strings, theme: this.#options.theme ?? {}, keep, controls });
+                return;
+            }
+            if (hand !== undefined && !HANDS.includes(hand))
+                throw new RangeError("Choose a hand of 3, 7 or 11 tiles.");
+            this.#table?.destroy();
+            this.#table = null;
+            this.#key = "";
+            this.replaceChildren();
+            const revision = ++this.#revision;
+            const table = mountKumimoji(this, {
+                ...this.#options,
+                language,
+                hand,
+                level,
+                gameLength,
+                diagonals,
+                seed,
+                locale,
+                keep,
+                controls,
+                onChange: (saved) => {
+                    this.dispatchEvent(new CustomEvent("kumimoji-change", {
+                        detail: JSON.parse(JSON.stringify({ saved })),
+                        bubbles: true,
+                        composed: true,
+                    }));
+                    this.#options.onChange?.(saved);
+                },
+                onFinish: (result) => {
+                    this.dispatchEvent(new CustomEvent("kumimoji-finish", {
+                        detail: JSON.parse(JSON.stringify(result)),
+                        bubbles: true,
+                        composed: true,
+                    }));
+                    this.#options.onFinish?.(result);
+                },
+                onError: (error) => {
+                    this.dispatchEvent(new CustomEvent("kumimoji-error", { detail: { message: error.message }, bubbles: true, composed: true }));
+                    this.#options.onError?.(error);
+                },
+            });
+            this.#table = table;
+            this.#key = key;
+            void table.ready
+                .then(() => {
+                if (this.isConnected && revision === this.#revision && table.saved() !== null)
+                    this.dispatchEvent(new CustomEvent("kumimoji-load", {
+                        bubbles: true,
+                        composed: true,
+                        detail: { seed: table.saved().deal.seed, day },
+                    }));
+            })
+                .catch(() => {
+                /* The native ready error handler reports the load failure. */
+            });
+        }
+        catch (error) {
+            this.#table?.destroy();
+            this.#table = null;
+            this.#key = "";
+            const message = error instanceof Error ? error.message : String(error);
+            const status = this.ownerDocument.createElement("p");
+            status.setAttribute("role", "status");
+            status.textContent = message;
+            this.replaceChildren(status);
+            this.dispatchEvent(new CustomEvent("kumimoji-error", { detail: { message }, bubbles: true, composed: true }));
+        }
+    }
+}
+/**
+ * Defines the table or a subclass under a custom tag. Server-safe and idempotent.
+ * @param tagName - The tag name; kumimoji-table by default.
+ * @param registry - The page registry, or undefined on a server.
+ * @returns Nothing; existing definitions are left alone.
+ * @example
+ * ```ts
+ * import { defineTable } from "@johnmorrisdotca/kumimoji/element";
+ * defineTable();
+ * console.log(typeof defineTable);
+ * ```
+ */
+export function defineTable(tagName = "kumimoji-table", registry = typeof customElements === "undefined" ? undefined : customElements) {
+    if (registry !== undefined && registry.get(tagName) === undefined)
+        registry.define(tagName, tagName === "kumimoji-table" ? KumimojiTable : class extends KumimojiTable {
+        });
 }
-_KumimojiTable_table = new WeakMap(), _KumimojiTable_key = new WeakMap(), _KumimojiTable_queued = new WeakMap(), _KumimojiTable_seed = new WeakMap(), _KumimojiTable_instances = new WeakSet(), _KumimojiTable_refresh = function _KumimojiTable_refresh() {
-    const language = oneOf(this.getAttribute("language"), ["english", "japanese"]);
-    const handAttribute = this.getAttribute("hand");
-    const hand = handAttribute === null ? undefined : Number(handAttribute);
-    const level = oneOf(this.getAttribute("level"), ["easy", "medium", "hard"]);
-    const gameLength = oneOf(this.getAttribute("length"), ["short", "medium", "full"]);
-    const diagonals = isOn(this.getAttribute("diagonals"));
-    const seedAttribute = this.getAttribute("seed");
-    const asked = Number(seedAttribute);
-    const seed = seedAttribute === "daily"
-        ? kumimojiDailySeed(new Date())
-        : seedAttribute !== null && Number.isInteger(asked) && asked >= 0 && asked <= 0xffffffff
-            ? asked
-            : (__classPrivateFieldSet(this, _KumimojiTable_seed, __classPrivateFieldGet(this, _KumimojiTable_seed, "f") ?? Math.floor(Math.random() * 2 ** 31), "f"));
-    const lang = this.getAttribute("lang");
-    const locale = lang === "en" || lang === "ja" ? lang : undefined;
-    const keep = !["false", "off", "0", "no"].includes((this.getAttribute("keep") ?? "").toLowerCase());
-    const key = JSON.stringify([language, hand, level, gameLength, diagonals, seed, keep]);
-    if (key === __classPrivateFieldGet(this, _KumimojiTable_key, "f") && __classPrivateFieldGet(this, _KumimojiTable_table, "f") !== null) {
-        __classPrivateFieldGet(this, _KumimojiTable_table, "f").setLocale(locale ?? (document.documentElement.lang.toLowerCase().startsWith("ja") ? "ja" : "en"));
-        return;
-    }
-    __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.destroy();
-    __classPrivateFieldSet(this, _KumimojiTable_table, null, "f");
-    __classPrivateFieldSet(this, _KumimojiTable_key, key, "f");
-    if (hand !== undefined && !HANDS.includes(hand))
-        return;
-    __classPrivateFieldSet(this, _KumimojiTable_table, mountKumimoji(this, {
-        language,
-        hand,
-        level,
-        gameLength,
-        diagonals,
-        seed,
-        locale,
-        keep,
-        onChange: (saved) => this.dispatchEvent(new CustomEvent("kumimoji-change", { detail: { saved }, bubbles: true })),
-        onFinish: (result) => this.dispatchEvent(new CustomEvent("kumimoji-finish", { detail: result, bubbles: true })),
-    }), "f");
-};
-KumimojiTable.observedAttributes = ["language", "hand", "level", "length", "diagonals", "seed", "lang", "keep"];

package/dist/embed-day.d.ts

@@ -0,0 +1,4 @@
+/** Shared UTC day parsing for the family's daily embeds. No storage, service or rollover timer. */
+export declare function embedDay(value: string | null | undefined, now?: Date): string | null;
+/** The same day and namespace give the same nonzero 32-bit seed on every machine. */
+export declare function dailySeed(day: string, namespace: string): number;

package/dist/embed-day.js

@@ -0,0 +1,23 @@
+/** Shared UTC day parsing for the family's daily embeds. No storage, service or rollover timer. */
+export function embedDay(value, now = new Date()) {
+    if (value === null || value === undefined || ["off", "false", "no", "0"].includes(value.trim().toLowerCase()))
+        return null;
+    const asked = value.trim().toLowerCase();
+    const day = ["", "today", "on", "true", "1"].includes(asked) ? Number.isNaN(now.getTime()) ? "" : now.toISOString().slice(0, 10) : value.trim();
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(day))
+        throw new RangeError("Use a real UTC date written YYYY-MM-DD.");
+    const time = Date.parse(`${day}T00:00:00Z`);
+    if (!Number.isFinite(time) || new Date(time).toISOString().slice(0, 10) !== day)
+        throw new RangeError("Use a real UTC date written YYYY-MM-DD.");
+    return day;
+}
+/** The same day and namespace give the same nonzero 32-bit seed on every machine. */
+export function dailySeed(day, namespace) {
+    const parsed = embedDay(day);
+    if (parsed === null)
+        throw new RangeError("A daily seed needs a UTC date.");
+    let hash = 2166136261;
+    for (const letter of `${parsed}/${namespace}`)
+        hash = Math.imul(hash ^ letter.charCodeAt(0), 16777619) >>> 0;
+    return hash || 1;
+}