@nano133/nanoterra 0.7.0 → 0.8.0

package/dist/options/panel/mount.js

@@ -0,0 +1,378 @@
+// The Options key and panel of a game: `mountOptions(element, store, options)`. Plain DOM, no framework, no Three.js. It draws the store's defs (../core.ts)
+// in two tabs, Basic and Advanced, each in its groups, and writes every change to the store at once: there is no Save key. A change from elsewhere (the game
+// sets a value, another view resets one) shows at once too, and a section a module adds later (store.add) is drawn when it comes.
+//
+//   toggle   a switch: the whole row is the key (role="switch").
+//   choice   a row of keys (role="radiogroup", the arrow keys move) for at most 4 short choices, else a drop-down; a def's `display` chooses.
+//   range    a slider with its value and unit beside the label. A slider that a finger or the mouse holds is never drawn again under it.
+//   key      a key binding: the key's name; pressed, it waits for the next key (Escape or Tab stops waiting). A key another binding has is swapped (the store does it).
+//
+// Rows are drawn once and changed in place; the panel never scrolls back to the top on a change (Echo Island's draft, 2026-11-01).
+// "Reset to defaults" asks in the panel (a question and a key for each answer), never in a browser dialog. Escape answers the question first, then closes.
+// The panel is phone first: a sheet from the bottom on a phone held upright, from the right on a wide or sideways screen; every key is 44 px or more.
+// `key: false` draws no key, for a game that opens the panel from its own pause menu (`open()`).
+import { h } from "../../admin/panel/dom.js";
+import { icon } from "../../admin/panel/icons.js";
+import { keyLabel } from "../core.js";
+export const TAB_WORDS = { basic: "Basic", advanced: "Advanced" };
+const TABS = ["basic", "advanced"];
+export const RESET_QUESTION = "Put every option back to its default?";
+/** On a key binding while it waits for its key. */
+export const PRESS_A_KEY = "Press a key";
+/** "80%", "3 s", "50". */
+export const rangeText = (def, v) => `${v}${def.unit ?? ""}`;
+/** Buttons for at most 4 choices of at most 10 characters, else a list; the def's `display` wins. */
+export const choiceDisplay = (def) => def.display ?? (def.choices.length <= 4 && def.choices.every((c) => c.label.length <= 10) ? "buttons" : "list");
+let mounts = 0;
+export function mountOptions(root, store, options = {}) {
+    const n = ++mounts;
+    const id = (part) => `n133o-${n}-${part}`;
+    const title = options.title ?? "Options";
+    let isOpen = false;
+    let destroyed = false;
+    let tab = "basic";
+    let returnTo = null;
+    const cleanup = [];
+    const key = options.key === false
+        ? null
+        : h("button", { class: "n133o-key", type: "button", "aria-expanded": "false", "aria-controls": id("panel"), "aria-haspopup": "dialog" }, icon("gear", 20), h("span", { class: "n133o-key-word" }, title));
+    const closeKey = h("button", { class: "n133o-close", type: "button", "aria-label": `Close ${title.toLowerCase()}` }, icon("close", 20));
+    const tabKeys = Object.fromEntries(TABS.map((t) => [t, h("button", { class: "n133o-tab", type: "button", role: "tab", id: id(`tab-${t}`), "aria-controls": id(`pane-${t}`), "data-tab": t }, TAB_WORDS[t])]));
+    const tabList = h("div", { class: "n133o-tabs", role: "tablist", "aria-label": title }, tabKeys.basic, tabKeys.advanced);
+    const panes = Object.fromEntries(TABS.map((t) => [t, h("div", { class: "n133o-pane", role: "tabpanel", id: id(`pane-${t}`), "aria-labelledby": id(`tab-${t}`), "data-tab": t })]));
+    const body = h("div", { class: "n133o-body" }, panes.basic, panes.advanced);
+    const question = h("p", { class: "n133o-ask-q", id: id("ask") });
+    const yesKey = h("button", { class: "n133o-btn n133o-primary", type: "button" });
+    const noKey = h("button", { class: "n133o-btn", type: "button" }, "Cancel");
+    const askBox = h("div", { class: "n133o-ask", role: "alertdialog", "aria-labelledby": id("ask") }, question, h("div", { class: "n133o-ask-keys" }, yesKey, noKey));
+    askBox.hidden = true;
+    const resetKey = h("button", { class: "n133o-btn n133o-reset", type: "button" }, icon("refresh", 18), "Reset to defaults");
+    const foot = h("footer", { class: "n133o-foot" }, askBox, resetKey);
+    const panel = h("section", { class: "n133o-panel", id: id("panel"), role: "dialog", "aria-modal": "true", "aria-labelledby": id("title"), "data-open": "false" }, h("header", { class: "n133o-head" }, h("h2", { class: "n133o-title", id: id("title") }, title), closeKey), tabList, body, foot);
+    const scrim = h("div", { class: "n133o-scrim", "data-open": "false", "aria-hidden": "true" });
+    const wrap = h("div", { class: "n133-options" }, key, scrim, panel);
+    root.append(wrap);
+    // ---- the rows ----
+    /** Each drawn key's way to show a new value. */
+    let shows = new Map();
+    const textOf = (def, labelTag = "span", forId) => {
+        const label = h(labelTag, { class: "n133o-label", id: id(`l-${def.key}`), for: forId }, def.label);
+        const help = def.help ? h("span", { class: "n133o-help", id: id(`h-${def.key}`) }, def.help) : null;
+        return { label, help, describedBy: help ? id(`h-${def.key}`) : undefined };
+    };
+    function toggleRow(def) {
+        const t = textOf(def);
+        const row = h("button", { class: "n133o-row n133o-toggle", type: "button", role: "switch", "aria-labelledby": id(`l-${def.key}`), "aria-describedby": t.describedBy, "data-key": def.key }, h("span", { class: "n133o-text" }, t.label, t.help), h("span", { class: "n133o-switch", "aria-hidden": "true" }, h("span", { class: "n133o-knob" })));
+        row.addEventListener("click", () => store.set(def.key, !store.get(def.key)));
+        shows.set(def.key, (v) => row.setAttribute("aria-checked", String(v === true)));
+        return row;
+    }
+    function choiceRow(def) {
+        if (choiceDisplay(def) === "list") {
+            const selectId = id(`c-${def.key}`);
+            const t = textOf(def, "label", selectId);
+            const byIndex = def.choices.map((c) => c.value);
+            const select = h("select", { class: "n133o-select", id: selectId, "aria-describedby": t.describedBy }, ...def.choices.map((c, i) => h("option", { value: String(i) }, c.label)));
+            select.addEventListener("change", () => store.set(def.key, byIndex[Number(select.value)]));
+            shows.set(def.key, (v) => (select.value = String(Math.max(0, byIndex.indexOf(v)))));
+            return h("div", { class: "n133o-row n133o-choice", "data-key": def.key }, h("span", { class: "n133o-text" }, t.label, t.help), select);
+        }
+        const t = textOf(def);
+        const keys = def.choices.map((c) => h("button", { class: "n133o-seg-key", type: "button", role: "radio" }, c.label));
+        const group = h("div", { class: "n133o-seg", role: "radiogroup", "aria-labelledby": id(`l-${def.key}`), "aria-describedby": t.describedBy }, ...keys);
+        keys.forEach((k, i) => k.addEventListener("click", () => store.set(def.key, def.choices[i].value)));
+        group.addEventListener("keydown", (e) => {
+            const at = keys.indexOf(document.activeElement);
+            const to = moveKey(e, at, keys.length);
+            if (to === null)
+                return;
+            e.preventDefault();
+            store.set(def.key, def.choices[to].value);
+            keys[to].focus();
+        });
+        shows.set(def.key, (v) => keys.forEach((k, i) => {
+            const on = def.choices[i].value === v;
+            k.setAttribute("aria-checked", String(on));
+            k.tabIndex = on ? 0 : -1;
+        }));
+        return h("div", { class: "n133o-row n133o-choice", "data-key": def.key }, h("span", { class: "n133o-text" }, t.label, t.help), group);
+    }
+    function rangeRow(def) {
+        const inputId = id(`r-${def.key}`);
+        const t = textOf(def, "label", inputId);
+        const value = h("output", { class: "n133o-value", for: inputId, "aria-hidden": "true" });
+        const input = h("input", { class: "n133o-range-input", type: "range", id: inputId, min: def.min, max: def.max, step: def.step, "aria-describedby": t.describedBy });
+        input.addEventListener("input", () => store.set(def.key, Number(input.value)));
+        input.addEventListener("change", () => options.onRangeDone?.(def.key, Number(input.value)));
+        input.addEventListener("pointerdown", () => {
+            held = true;
+            const letGo = () => {
+                held = false;
+                window.removeEventListener("pointerup", letGo);
+                window.removeEventListener("pointercancel", letGo);
+                if (drawLater)
+                    draw();
+            };
+            window.addEventListener("pointerup", letGo);
+            window.addEventListener("pointercancel", letGo);
+        });
+        shows.set(def.key, (v) => {
+            const num = v;
+            if (Number(input.value) !== num)
+                input.value = String(num);
+            value.textContent = rangeText(def, num);
+            input.setAttribute("aria-valuetext", rangeText(def, num));
+            // The filled part of the track, for the stylesheet.
+            input.style.setProperty("--n133o-fill", `${((num - def.min) / (def.max - def.min)) * 100}%`);
+        });
+        return h("div", { class: "n133o-row n133o-range", "data-key": def.key }, h("span", { class: "n133o-text n133o-range-text" }, t.label, value, t.help), input);
+    }
+    /** The binding that waits for its key, and the call that stops it. */
+    let waiting = null;
+    const stopWaiting = () => waiting?.stop();
+    function keyRow(def) {
+        const t = textOf(def);
+        const cap = h("button", { class: "n133o-keycap", type: "button", "aria-describedby": t.describedBy });
+        const show = (v) => {
+            if (waiting?.key === def.key)
+                return;
+            cap.textContent = keyLabel(String(v));
+            cap.setAttribute("aria-label", `${def.label}: ${keyLabel(String(v))}. Press to change`);
+            cap.setAttribute("aria-pressed", "false");
+        };
+        cap.addEventListener("click", () => {
+            if (waiting?.key === def.key)
+                return stopWaiting();
+            stopWaiting();
+            const onKey = (e) => {
+                // Tab stops waiting and moves the focus as usual.
+                if (e.code === "Tab")
+                    return stop();
+                // The capture phase of the window: the game and the panel's Escape never hear this key.
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                stop();
+                if (e.code && e.code !== "Escape")
+                    store.set(def.key, e.code);
+            };
+            const stop = () => {
+                window.removeEventListener("keydown", onKey, true);
+                waiting = null;
+                show(store.get(def.key));
+            };
+            waiting = { key: def.key, stop };
+            window.addEventListener("keydown", onKey, true);
+            cap.textContent = PRESS_A_KEY;
+            cap.setAttribute("aria-label", `${def.label}: ${PRESS_A_KEY.toLowerCase()}. Escape keeps the old key`);
+            cap.setAttribute("aria-pressed", "true");
+        });
+        shows.set(def.key, show);
+        return h("div", { class: "n133o-row n133o-key-row", "data-key": def.key }, h("span", { class: "n133o-text" }, t.label, t.help), cap);
+    }
+    const rowFor = (def) => (def.kind === "toggle" ? toggleRow(def) : def.kind === "choice" ? choiceRow(def) : def.kind === "key" ? keyRow(def) : rangeRow(def));
+    /** A finger or the mouse holds a slider: a new draw waits until it lets go. */
+    let held = false;
+    let drawLater = false;
+    /** Draws both tabs from the store's defs (the ones for this device), in their groups. Keeps the tab and, when it can, the focus. */
+    function draw() {
+        if (held) {
+            drawLater = true;
+            return;
+        }
+        drawLater = false;
+        stopWaiting();
+        const scroll = body.scrollTop;
+        const focusKey = document.activeElement?.closest?.("[data-key]")?.getAttribute("data-key") ?? null;
+        shows = new Map();
+        const shown = store.defs().filter((d) => !d.devices || d.devices.includes(store.device));
+        const has = { basic: false, advanced: false };
+        for (const t of TABS) {
+            const defs = shown.filter((d) => d.tab === t);
+            has[t] = defs.length > 0;
+            const loose = defs.filter((d) => !d.group);
+            const groups = [...new Set(defs.filter((d) => d.group).map((d) => d.group))];
+            const parts = [];
+            if (loose.length)
+                parts.push(h("div", { class: "n133o-rows" }, ...loose.map(rowFor)));
+            for (const g of groups) {
+                const gid = id(`g-${t}-${groups.indexOf(g)}`);
+                parts.push(h("section", { class: "n133o-group", "aria-labelledby": gid }, h("h3", { class: "n133o-group-title", id: gid }, g), h("div", { class: "n133o-rows" }, ...defs.filter((d) => d.group === g).map(rowFor))));
+            }
+            panes[t].replaceChildren(...parts);
+        }
+        // Both tabs when both have rows; one tab alone needs no tab bar.
+        const both = has.basic && has.advanced;
+        tabList.hidden = !both;
+        if (!has[tab])
+            tab = has.basic ? "basic" : "advanced";
+        if (!has.basic && !has.advanced)
+            panes.basic.replaceChildren(h("p", { class: "n133o-empty" }, "No options yet."));
+        for (const t of TABS) {
+            if (both)
+                panes[t].setAttribute("role", "tabpanel");
+            else
+                panes[t].removeAttribute("role");
+        }
+        selectTab(tab, false);
+        body.scrollTop = scroll;
+        for (const [k, show] of shows)
+            show(store.get(k));
+        resetKey.disabled = store.isDefault();
+        // A key is letters, digits, "_", "-" and dots (core.ts checks it), so it goes into the selector as it is.
+        const row = focusKey ? panel.querySelector(`[data-key="${focusKey}"]`) : null;
+        if (row)
+            (row.tagName === "BUTTON" ? row : row.querySelector('button[tabindex="0"], select, input'))?.focus();
+    }
+    function selectTab(t, focus) {
+        const moved = t !== tab;
+        tab = t;
+        for (const x of TABS) {
+            const on = x === t;
+            tabKeys[x].setAttribute("aria-selected", String(on));
+            tabKeys[x].tabIndex = on ? 0 : -1;
+            panes[x].hidden = !on;
+        }
+        if (moved)
+            body.scrollTop = 0;
+        if (focus)
+            tabKeys[t].focus();
+    }
+    for (const t of TABS)
+        tabKeys[t].addEventListener("click", () => selectTab(t, true));
+    tabList.addEventListener("keydown", (e) => {
+        const visible = TABS.filter((t) => !tabKeys[t].hidden);
+        const to = moveKey(e, visible.indexOf(tab), visible.length);
+        if (to === null)
+            return;
+        e.preventDefault();
+        selectTab(visible[to], true);
+    });
+    cleanup.push(store.subscribe((k, v) => {
+        shows.get(k)?.(v);
+        resetKey.disabled = store.isDefault();
+    }));
+    cleanup.push(store.subscribeDefs(draw));
+    draw();
+    // ---- open, close, ask ----
+    const open = () => {
+        if (destroyed || isOpen)
+            return;
+        isOpen = true;
+        returnTo = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
+        panel.dataset.open = scrim.dataset.open = "true";
+        key?.setAttribute("aria-expanded", "true");
+        options.onOpen?.();
+        (tabList.hidden ? closeKey : tabKeys[tab]).focus();
+    };
+    const close = () => {
+        if (destroyed || !isOpen)
+            return;
+        answer?.(false);
+        stopWaiting();
+        isOpen = false;
+        panel.dataset.open = scrim.dataset.open = "false";
+        key?.setAttribute("aria-expanded", "false");
+        options.onClose?.();
+        const back = key ?? (returnTo?.isConnected ? returnTo : null);
+        back?.focus();
+    };
+    key?.addEventListener("click", () => (isOpen ? close() : open()));
+    closeKey.addEventListener("click", close);
+    scrim.addEventListener("click", close);
+    /** The question in the panel: one at a time (a new one answers the old with no), and closing the panel answers no. */
+    let answer = null;
+    const askInPanel = (q, yesWord) => new Promise((resolve) => {
+        answer?.(false);
+        question.textContent = q;
+        yesKey.textContent = yesWord;
+        askBox.hidden = false;
+        resetKey.hidden = true;
+        answer = (yes) => {
+            answer = null;
+            askBox.hidden = true;
+            resetKey.hidden = false;
+            resolve(yes);
+            if (isOpen && !destroyed)
+                resetKey.focus();
+        };
+        open();
+        yesKey.focus();
+    });
+    yesKey.addEventListener("click", () => answer?.(true));
+    noKey.addEventListener("click", () => answer?.(false));
+    const ask = (q, yesWord) => (options.confirm ? Promise.resolve(options.confirm(q)) : askInPanel(q, yesWord));
+    cleanup.push(() => answer?.(false), stopWaiting);
+    resetKey.addEventListener("click", () => {
+        void ask(RESET_QUESTION, "Reset").then((yes) => {
+            if (yes && !destroyed)
+                store.reset();
+        });
+    });
+    const onKey = (e) => {
+        if (!isOpen)
+            return;
+        if (e.key === "Escape") {
+            // Escape answers an open question first, then closes the panel.
+            if (answer)
+                answer(false);
+            else
+                close();
+            return;
+        }
+        if (e.key === "Tab") {
+            // The panel holds the focus while it is open (it covers the game).
+            const all = Array.from(panel.querySelectorAll("button, select, input, [tabindex]")).filter((el) => el.tabIndex >= 0 && !el.disabled && el.closest("[hidden]") === null);
+            if (!all.length)
+                return;
+            const first = all[0];
+            const last = all[all.length - 1];
+            if (e.shiftKey && (document.activeElement === first || !panel.contains(document.activeElement))) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && (document.activeElement === last || !panel.contains(document.activeElement))) {
+                e.preventDefault();
+                first.focus();
+            }
+        }
+    };
+    document.addEventListener("keydown", onKey);
+    cleanup.push(() => document.removeEventListener("keydown", onKey));
+    return {
+        open,
+        close,
+        get isOpen() {
+            return isOpen;
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            if (isOpen)
+                close();
+            destroyed = true;
+            for (const f of cleanup)
+                f();
+            wrap.remove();
+        },
+    };
+}
+/** The arrow keys, Home and End in a row of `count` (wrapping): the new place, or null for another key. */
+function moveKey(e, at, count) {
+    if (count < 1)
+        return null;
+    const from = at < 0 ? 0 : at;
+    switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+            return (from + 1) % count;
+        case "ArrowLeft":
+        case "ArrowUp":
+            return (from - 1 + count) % count;
+        case "Home":
+            return 0;
+        case "End":
+            return count - 1;
+        default:
+            return null;
+    }
+}

package/dist/options/reflect.d.ts

@@ -0,0 +1,5 @@
+import type { OptionsStore } from "./core.js";
+/** The attribute that holds a key's value: "reducedMotion" gives "data-n133-opt-reduced-motion". */
+export declare const optionAttribute: (key: string) => string;
+/** Keeps each key's value on `target` (default: the page's <html>) as it changes. Returns the call that stops and takes the attributes off. */
+export declare function reflectOptions(store: OptionsStore, keys: readonly string[], target?: Element | null): () => void;

package/dist/options/reflect.js

@@ -0,0 +1,27 @@
+// Settings the page's CSS needs too: `reflectOptions(store, ["reducedMotion"])` keeps `data-n133-opt-reduced-motion="true" | "false"` on the page's <html>,
+// so a stylesheet can calm every animation of the game's own HUD:
+//
+//   html[data-n133-opt-reduced-motion="true"] .my-hud * { animation: none !important; transition: none !important; }
+//
+// Echo Island set a class on its root for its "Less motion" (2026-11-01); this is the kit's one way. The attribute's name is "data-n133-opt-" and the key in
+// kebab case ("emotes.show" gives data-n133-opt-emotes-show); its value is the setting's value as text.
+/** The attribute that holds a key's value: "reducedMotion" gives "data-n133-opt-reduced-motion". */
+export const optionAttribute = (key) => `data-n133-opt-${key.replace(/\./g, "-").replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`;
+/** Keeps each key's value on `target` (default: the page's <html>) as it changes. Returns the call that stops and takes the attributes off. */
+export function reflectOptions(store, keys, target = globalThis.document?.documentElement ?? null) {
+    if (!target)
+        return () => { };
+    for (const k of keys) {
+        store.get(k); // an unknown key throws here, at once
+        target.setAttribute(optionAttribute(k), String(store.get(k)));
+    }
+    const off = store.subscribe((k, v) => {
+        if (keys.includes(k))
+            target.setAttribute(optionAttribute(k), String(v));
+    });
+    return () => {
+        off();
+        for (const k of keys)
+            target.removeAttribute(optionAttribute(k));
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nano133/nanoterra",
-  "version": "0.7.0",
-  "description": "Nanoterra for a creator's game, in one package: the player's sign-in ticket, the player's character (a toon body on the island's skeleton), the looks ladder, the admin and the friends list.",
+  "version": "0.8.0",
+  "description": "Nanoterra for a creator's game, in one package: the player's sign-in ticket, the player's character (a toon body on the island's skeleton), the looks ladder, the admin, the friends list and an options menu.",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,7 +25,15 @@
     "./friends/d1.sql": "./src/friends/adapters/d1.sql",
     "./friends/firestore": { "types": "./dist/friends/adapters/firestore.d.ts", "import": "./dist/friends/adapters/firestore.js" },
     "./friends/panel": { "types": "./dist/friends/panel/index.d.ts", "import": "./dist/friends/panel/index.js" },
-    "./friends/style.css": "./src/friends/panel/style.css"
+    "./friends/style.css": "./src/friends/panel/style.css",
+    "./options": { "types": "./dist/options/index.d.ts", "import": "./dist/options/index.js" },
+    "./options/panel": { "types": "./dist/options/panel/index.d.ts", "import": "./dist/options/panel/index.js" },
+    "./options/style.css": "./src/options/panel/style.css",
+    "./emotes": { "types": "./dist/emotes/index.d.ts", "import": "./dist/emotes/index.js" },
+    "./emotes/player": { "types": "./dist/emotes/player.d.ts", "import": "./dist/emotes/player.js" },
+    "./emotes/wheel": { "types": "./dist/emotes/panel/index.d.ts", "import": "./dist/emotes/panel/index.js" },
+    "./emotes/style.css": "./src/emotes/panel/style.css",
+    "./emotes/icons.webp": "./src/emotes/icons.webp"
   },
   "sideEffects": false,
   "files": ["dist", "src", "README.md", "CHANGELOG.md", "LICENSE", "ai"],
@@ -53,5 +61,5 @@
   },
   "homepage": "https://nano133.com/build/nanoterra",
   "license": "MIT",
-  "keywords": ["nano", "gltf", "glb", "model check", "xno", "nanoterra", "sign in", "ticket", "character", "avatar", "three", "three.js", "toon", "looks", "cosmetics", "friends", "friends list"]
+  "keywords": ["nano", "gltf", "glb", "model check", "xno", "nanoterra", "sign in", "ticket", "character", "avatar", "three", "three.js", "toon", "looks", "cosmetics", "friends", "friends list", "options", "settings", "options menu", "emotes", "emote wheel"]
 }

package/src/admin/adapters/d1.ts

@@ -1,5 +1,5 @@
 // The admin store for a game on Cloudflare D1, with the tables of the game starter (migrations/0001_init.sql): `meta`, `orders` and `owned`.
-// It writes ONLY the three settings (`setting:character`, `setting:signin`, `setting:friends` in `meta`); everything else it does is a read, except when the game turns the sign-in list on
+// It writes ONLY the four settings (`setting:character`, `setting:signin`, `setting:friends`, `setting:emotes` in `meta`); everything else it does is a read, except when the game turns the sign-in list on
 // (`logins: true`): then the one other write is `DELETE FROM sessions WHERE scope = 'admin'` ("sign out everywhere").
 //
 //   import { createD1Store } from "@nano133/nanoterra/admin/d1";
@@ -21,7 +21,7 @@ export interface D1Like {
   batch(statements: D1StatementLike[]): Promise<unknown[]>;
 }
 
-export const D1_KEYS = { character: "setting:character", signin: "setting:signin", friends: "setting:friends" } as const;
+export const D1_KEYS = { character: "setting:character", signin: "setting:signin", friends: "setting:friends", emotes: "setting:emotes" } as const;
 
 type Row = { id: string; player: string; look_id: string; usd: string; amount: string; status: string; created_at: number; expires_at: number; paid_at: number | null; payer: string | null; hash: string | null };
 
@@ -34,9 +34,9 @@ type Row = { id: string; player: string; look_id: string; usd: string; amount: s
 export function createD1Store(db: D1Like, options: { logins?: boolean } = {}): AdminStore {
   const store: AdminStore = {
     async readSettings() {
-      const rows = (await db.prepare("SELECT key, value FROM meta WHERE key IN (?, ?, ?)").bind(D1_KEYS.character, D1_KEYS.signin, D1_KEYS.friends).all<{ key: string; value: string }>()).results;
+      const rows = (await db.prepare("SELECT key, value FROM meta WHERE key IN (?, ?, ?, ?)").bind(D1_KEYS.character, D1_KEYS.signin, D1_KEYS.friends, D1_KEYS.emotes).all<{ key: string; value: string }>()).results;
       const row = (key: string) => rows.find((r) => r.key === key)?.value;
-      return { character: row(D1_KEYS.character), signin: row(D1_KEYS.signin), friends: row(D1_KEYS.friends) };
+      return { character: row(D1_KEYS.character), signin: row(D1_KEYS.signin), friends: row(D1_KEYS.friends), emotes: row(D1_KEYS.emotes) };
     },
 
     async saveSettings(patch: GamePatch, now: number) {
@@ -46,6 +46,7 @@ export function createD1Store(db: D1Like, options: { logins?: boolean } = {}): A
       if (patch.character) batch.push(write(D1_KEYS.character, patch.character));
       if (patch.signin) batch.push(write(D1_KEYS.signin, patch.signin));
       if (patch.friends) batch.push(write(D1_KEYS.friends, patch.friends));
+      if (patch.emotes) batch.push(write(D1_KEYS.emotes, patch.emotes));
       if (batch.length) await db.batch(batch);
     },
 

package/src/admin/adapters/firestore.ts

@@ -1,8 +1,8 @@
 // The admin store for a game on Firestore (the Admin SDK). The package has no Firebase dependency: the adapter uses the small interface below, which the
-// Admin SDK's `Firestore` fits. It writes ONLY the three settings; everything else it does is a read.
+// Admin SDK's `Firestore` fits. It writes ONLY the four settings; everything else it does is a read.
 //
 // The data model (the names a game must have; only the three collection names can be changed):
-//   meta/{key}          { value: string, at: number }          keys "setting:character", "setting:signin", "setting:friends", "rate" (value is JSON { usd, sources })
+//   meta/{key}          { value: string, at: number }          keys "setting:character", "setting:signin", "setting:friends", "setting:emotes", "rate" (value is JSON { usd, sources })
 //   orders/{id}         { player, lookId, usd, amount, status, createdAt, expiresAt, paidAt, payer, hash }   `amount` is the raw amount as text
 //   owned/{player__lookId}  { player, lookId, orderId, grantedAt }
 //
@@ -33,7 +33,7 @@ export interface FirestoreLike {
 }
 
 export const FIRESTORE_SCAN_LIMIT = 5000;
-export const FIRESTORE_KEYS = { character: "setting:character", signin: "setting:signin", friends: "setting:friends" } as const;
+export const FIRESTORE_KEYS = { character: "setting:character", signin: "setting:signin", friends: "setting:friends", emotes: "setting:emotes" } as const;
 
 const text = (v: unknown, fallback = ""): string => (typeof v === "string" ? v : fallback);
 const num = (v: unknown, fallback = 0): number => (typeof v === "number" && Number.isFinite(v) ? v : fallback);
@@ -49,8 +49,8 @@ export function createFirestoreStore(db: FirestoreLike, collections: { meta?: st
   };
   return {
     async readSettings() {
-      const [character, signin, friends] = await Promise.all([valueOf(FIRESTORE_KEYS.character), valueOf(FIRESTORE_KEYS.signin), valueOf(FIRESTORE_KEYS.friends)]);
-      return { character: character?.value, signin: signin?.value, friends: friends?.value };
+      const [character, signin, friends, emotes] = await Promise.all([valueOf(FIRESTORE_KEYS.character), valueOf(FIRESTORE_KEYS.signin), valueOf(FIRESTORE_KEYS.friends), valueOf(FIRESTORE_KEYS.emotes)]);
+      return { character: character?.value, signin: signin?.value, friends: friends?.value, emotes: emotes?.value };
     },
 
     async saveSettings(patch: GamePatch, now: number) {
@@ -59,6 +59,7 @@ export function createFirestoreStore(db: FirestoreLike, collections: { meta?: st
       if (patch.character) (batch.set(db.collection(meta).doc(FIRESTORE_KEYS.character), { value: patch.character, at: now }), n++);
       if (patch.signin) (batch.set(db.collection(meta).doc(FIRESTORE_KEYS.signin), { value: patch.signin, at: now }), n++);
       if (patch.friends) (batch.set(db.collection(meta).doc(FIRESTORE_KEYS.friends), { value: patch.friends, at: now }), n++);
+      if (patch.emotes) (batch.set(db.collection(meta).doc(FIRESTORE_KEYS.emotes), { value: patch.emotes, at: now }), n++);
       if (n) await batch.commit();
     },
 

package/src/admin/conformance.ts

@@ -97,7 +97,7 @@ async function read(res: Response): Promise<{ status: number; text: string; json
 const REFUSAL_KEYS = new Set(["error", "reason", "signedInAs"]);
 
 /** Words of the game's data that a refusal or an answer to a visitor must never hold. */
-const DATA_WORDS = /"orders"|"players"|"totals"|"counts"|"character"|"signin"|"friends"|"warnings"/;
+const DATA_WORDS = /"orders"|"players"|"totals"|"counts"|"character"|"signin"|"friends"|"emotes"|"warnings"/;
 
 export function adminConformance(host: ConformanceHost): ConformanceCase[] {
   const cases: ConformanceCase[] = [];
@@ -332,7 +332,7 @@ export function adminConformance(host: ConformanceHost): ConformanceCase[] {
 export type StoreHarness = {
   store: AdminStore;
   seed(data: { orders?: OrderRow[]; owned?: { player: string; lookId: string; at: number }[]; rate?: { value: string; at: number } }): Promise<void>;
-  /** Every row that the store could change by mistake, as one text: the orders, the owned looks and the meta rows that are NOT the three settings. Same rows, same text. */
+  /** Every row that the store could change by mistake, as one text: the orders, the owned looks and the meta rows that are NOT the four settings. Same rows, same text. */
   snapshot(): Promise<string>;
   /** Only for a store with `recentLogins` and `signOutEverywhere`: put admin sign-ins in the game's database (the store only reads them). */
   seedLogins?(rows: { at: number; country: string | null; browser: string }[]): Promise<void>;
@@ -358,7 +358,7 @@ export function adminStoreConformance(make: () => Promise<StoreHarness>): Confor
 
   add("a new store has no settings of its own", async ({ store }) => {
     const s = await store.readSettings();
-    check(s.character === undefined && s.signin === undefined && s.friends === undefined, `expected no settings, got ${JSON.stringify(s)}`);
+    check(s.character === undefined && s.signin === undefined && s.friends === undefined && s.emotes === undefined, `expected no settings, got ${JSON.stringify(s)}`);
   });
 
   add("the friends list is kept as its own setting: each of its three words, and a patch of it leaves the other two", async ({ store }) => {
@@ -370,6 +370,15 @@ export function adminStoreConformance(make: () => Promise<StoreHarness>): Confor
     }
   });
 
+  add("the emotes switch is kept as its own setting: off and on, and a patch of it leaves the other three", async ({ store }) => {
+    await store.saveSettings({ signin: "none", character: "own", friends: "off" }, NOW);
+    for (const [i, emotes] of (["off", "on"] as const).entries()) {
+      await store.saveSettings({ emotes }, NOW + 1 + i);
+      const s = await store.readSettings();
+      check(s.emotes === emotes && s.signin === "none" && s.character === "own" && s.friends === "off", `after emotes ${emotes}: ${JSON.stringify(s)}`);
+    }
+  });
+
   add("a patch saves only what it names; the next patch keeps the rest", async ({ store }) => {
     await store.saveSettings({ signin: "none" }, NOW);
     let s = await store.readSettings();
@@ -385,13 +394,13 @@ export function adminStoreConformance(make: () => Promise<StoreHarness>): Confor
   add("an empty patch writes nothing and does not fail", async ({ store }) => {
     await store.saveSettings({}, NOW);
     const s = await store.readSettings();
-    check(s.character === undefined && s.signin === undefined && s.friends === undefined, "an empty patch must save nothing");
+    check(s.character === undefined && s.signin === undefined && s.friends === undefined && s.emotes === undefined, "an empty patch must save nothing");
   });
 
   add("saving changes nothing but the settings: no order, no owned look, no other meta row", async (h) => {
     await h.seed({ orders: [order("1", {}), order("2", { status: "open" })], owned: [{ player: A, lookId: "mint-cap", at: NOW }], rate: { value: JSON.stringify({ usd: 1.2, sources: ["x"] }), at: NOW } });
     const before = await h.snapshot();
-    await h.store.saveSettings({ character: "own", signin: "none", friends: "off" }, NOW + 5);
+    await h.store.saveSettings({ character: "own", signin: "none", friends: "off", emotes: "off" }, NOW + 5);
     check((await h.snapshot()) === before, "the rows of the game changed after saving the settings");
   });
 

package/src/admin/handler.ts

@@ -2,7 +2,7 @@
 //
 //   GET  {base}/summary   the numbers: status, orders, the looks that players own
 //   GET  {base}/game      the game switches
-//   POST {base}/game      a press: { character }, { signin } or { friends } (only the known words)
+//   POST {base}/game      a press: { character }, { signin }, { friends } or { emotes } (only the known words)
 //   POST {base}/check     the payment check, when the game gives one
 //
 // EVERY request under the base goes through `adminAccess` first, before the route is even looked up: a visitor who is not the owner gets 401 or 403
@@ -190,7 +190,7 @@ export function createAdminHandler(options: AdminHandlerOptions): AdminHandler {
   return { routes, basePath: options.basePath ?? "/api/admin", handle };
 }
 
-/** The settings as the game's own routes need them (the listing file, the character, the friends list): the stored words, or the game's defaults. A fault in the store gives the defaults. */
+/** The settings as the game's own routes need them (the listing file, the character, the friends list, the emotes): the stored words, or the game's defaults. A fault in the store gives the defaults. */
 export async function loadGameSettings(store: Pick<AdminStore, "readSettings">, defaults: GameSettings): Promise<GameState> {
   try {
     return mergeSettings(await store.readSettings(), defaults);

package/src/admin/index.ts

@@ -17,5 +17,5 @@ export type { AdminLogin, AdminOrder, AdminPlayer, AdminStatus, AdminStore, Admi
 export { ORDERS_SHOWN, moneyOf, parseRate, shapeOrders, shapePlayers, statusOf, summarize } from "./summary.js";
 export type { OrderRow } from "./summary.js";
 export { RAW_PER_XNO, xnoText } from "./amount.js";
-export { CHARACTER_NEEDS_SIGNIN, CHARACTER_SIGNIN_OFF, DEFAULT_FRIENDS, FRIENDS_CHOICES, FRIENDS_TITLE, REVIEW_LINK, REVIEW_NOTE, SWITCHES, isCharacter, isFriends, isSignin, isSigninChoice, mergeSettings, parsePatch, pressOf, signinOn, stateOf } from "./switches.js";
-export type { Character, Friends, GamePatch, GameSettings, GameState, Signin, SwitchId } from "./switches.js";
+export { CHARACTER_NEEDS_SIGNIN, CHARACTER_SIGNIN_OFF, DEFAULT_EMOTES, DEFAULT_FRIENDS, FRIENDS_CHOICES, FRIENDS_TITLE, REVIEW_LINK, REVIEW_NOTE, SWITCHES, isCharacter, isEmotes, isFriends, isSignin, isSigninChoice, mergeSettings, parsePatch, pressOf, signinOn, stateOf } from "./switches.js";
+export type { Character, Emotes, Friends, GamePatch, GameSettings, GameState, Signin, SwitchId } from "./switches.js";

package/src/admin/memory.ts

@@ -35,12 +35,13 @@ export function createMemoryStore(seed: { orders?: OrderRow[]; owned?: { player:
     pendingAdminRequests: 0,
     pendingGameRequests: 0,
     async readSettings() {
-      return { character: store.rows.get("setting:character"), signin: store.rows.get("setting:signin"), friends: store.rows.get("setting:friends") };
+      return { character: store.rows.get("setting:character"), signin: store.rows.get("setting:signin"), friends: store.rows.get("setting:friends"), emotes: store.rows.get("setting:emotes") };
     },
     async saveSettings(patch: GamePatch) {
       if (patch.character) store.rows.set("setting:character", patch.character);
       if (patch.signin) store.rows.set("setting:signin", patch.signin);
       if (patch.friends) store.rows.set("setting:friends", patch.friends);
+      if (patch.emotes) store.rows.set("setting:emotes", patch.emotes);
       store.writes++;
     },
     async summary(now: number): Promise<StoreSummary> {