@nano133/nanoterra 0.9.0 → 0.9.3

package/dist/player-signin/panel/words.js

@@ -1,26 +1,111 @@
-// The sheet's words for each passkey fault, in plain English. The fault codes are @nano133/signin's (PasskeyFault). A fault never names a seed or a
-// key, and never tells the player to delete a passkey.
-export function faultWords(code, rpId) {
-    switch (code) {
-        case "cancelled":
-            return { title: "No passkey was used", text: "No passkey was used.", next: "stay" };
-        case "no-prf":
-            return { title: "Not on this device yet", text: "This device's passkeys cannot sign in to games yet. Use a wallet app, or a passkey on another device.", next: "wallets" };
-        case "unsupported":
-            return { title: "No passkeys here", text: "This browser has no passkeys. Use a wallet app.", next: "wallets" };
-        case "other-form":
-            return { title: "Not this password manager", text: "Your password manager answered in a way this game cannot read. In the device's sheet, choose its own passkeys (iCloud Keychain or Google Password Manager), or use a wallet app.", next: "wallets" };
-        case "not-a-purse":
-            return { title: "Not this game's passkey", text: "That passkey is not one of this game's. Choose another one, or make one.", next: "stay" };
-        case "wrong-host":
-            return { title: "Wrong address", text: `Passkeys for this game work only on ${rpId}.`, next: "wallets" };
-        case "exists":
-            return { title: "You have a passkey", text: "This device has your passkey already. Use it.", next: "stay" };
-        case "unstable":
-            return { title: "Not on this device", text: "This device gave two different answers for one passkey, so it cannot sign in here. Use a wallet app.", next: "wallets" };
-        case "other-passkey":
-            return { title: "Another passkey", text: "That is another passkey. Choose the one you just made: its name has today's date.", next: "stay" };
-        default:
-            return { title: "That did not work", text: "The passkey did not work. Try again.", next: "stay" };
+// Every word of the sign-in sheet, and its words for each passkey fault, in plain English. A game gives `words` to `mountPlayerSignin` (or to
+// `signInView`) with the keys it wants to change, in its own words or language; the rest stay these. A text with a value in it is a function of that
+// value. The wallets' names (Berry Wallet, NanChat, Nautilus) are names, not words: they stay.
+//
+// The fault codes are @nano133/signin's (PasskeyFault). A fault never names a seed or a key, and never tells the player to delete a passkey. No
+// sentence has more than 10 words.
+export const PLAYER_SIGNIN_WORDS = {
+    title: "Sign in",
+    close: "Close",
+    lead: "No password and no payment.",
+    usePasskey: "Use a passkey",
+    passkeyHint: "Face ID, Touch ID or your device PIN",
+    passkeyOff: "Not on this browser",
+    lastUsed: "Last used",
+    orWallet: "Or a wallet app",
+    chooseWallet: "Choose your wallet",
+    orPasskey: "Or a passkey",
+    back: "Back",
+    passkeyTitle: "Passkey",
+    passkeyText: "Face ID, Touch ID or your device PIN. The passkey stays on your device. The game never sees it.",
+    useMine: "Use my passkey",
+    makeOne: "Make a passkey",
+    waitingPasskey: "Waiting for your passkey…",
+    makingPasskey: "Making your passkey…",
+    openingPasskey: "Opening your passkey…",
+    madeTitle: "Your passkey is made",
+    madeText: "Press the key to open it.",
+    openMine: "Open my passkey",
+    spareTitle: "Keep a spare key",
+    spareText: "Your looks belong to this passkey. If you lose it, this code brings them back.",
+    spareFine: "Keep it secret. Anyone with it can sign in as you. Import it as a seed in Nautilus or another wallet. Then sign in with that wallet.",
+    showCode: "Show my code",
+    copyCode: "Copy the code",
+    copied: "Copied",
+    copyFailed: "Copy failed: write it down",
+    later: "Later",
+    continue: "Continue",
+    signingIn: "Signing in…",
+    signInFailed: "Sign-in did not work. Try again.",
+    faultWallets: "Sign in with a wallet app",
+    faults: {
+        cancelled: { title: "No passkey was used", text: "No passkey was used." },
+        "no-prf": { title: "Not on this device yet", text: "This device's passkeys cannot sign in to games yet. Use a wallet app, or a passkey on another device." },
+        unsupported: { title: "No passkeys here", text: "This browser has no passkeys. Use a wallet app." },
+        "other-form": { title: "Not this password manager", text: "This game cannot read your password manager's answer. Choose iCloud Keychain or Google Password Manager instead. Or use a wallet app." },
+        "not-a-purse": { title: "Not this game's passkey", text: "That passkey is not one of this game's. Choose another one, or make one." },
+        "wrong-host": { title: "Wrong address", text: (rpId) => `Passkeys for this game work only on ${rpId}.` },
+        exists: { title: "You have a passkey", text: "This device has your passkey already. Use it." },
+        unstable: { title: "Not on this device", text: "This device gave two answers for one passkey. It cannot sign in here. Use a wallet app." },
+        "other-passkey": { title: "Another passkey", text: "That is another passkey. Choose the one you just made. Its name has today's date." },
+        failed: { title: "That did not work", text: "The passkey did not work. Try again." },
+    },
+    starting: "Starting…",
+    startFailed: "Sign-in did not start. Try again.",
+    refusal: (text) => text,
+    waitingFor: (wallet) => `Waiting for ${wallet}…`,
+    signedInAs: (address) => `Signed in as ${address}`,
+    openApp: (wallet) => `Open ${wallet}`,
+    anotherWallet: "Another wallet",
+    onComputer: "On this computer: ",
+    openLink: (wallet) => `open ${wallet}`,
+    aWallet: "a wallet",
+    openOnPhone: (wallet) => `Open this page on your phone to use ${wallet}.`,
+    qrLabel: (wallet) => `QR code to sign in with ${wallet}`,
+    onlyYours: (host) => `Only approve a sign-in you started yourself, on ${host}.`,
+    comeBack: (wallet) => `Approve the sign-in in ${wallet}. Then come back to this page.`,
+    yourWallet: "your wallet",
+    scanWith: (wallet) => `Scan this with ${wallet} on your phone. Then approve the sign-in.`,
+    scanCamera: (wallet) => `Scan this with your phone's camera to open ${wallet}. Then approve the sign-in.`,
+    checkCode: "Check that Nautilus shows this code: ",
+    tryAgain: "Try again",
+    otherWay: "Choose another way",
+    expired: "This sign-in expired.",
+    usedElsewhere: "This sign-in was used in another browser. Start again.",
+    tooManyChecks: "Too many checks. Waiting a moment…",
+};
+/** The game's words over the defaults; its faults over the default faults. A key it leaves out, or gives as undefined, keeps its default. */
+export function playerSigninWords(over) {
+    const out = { ...PLAYER_SIGNIN_WORDS, faults: { ...PLAYER_SIGNIN_WORDS.faults } };
+    for (const [k, v] of Object.entries(over ?? {})) {
+        if (v === undefined || !(k in PLAYER_SIGNIN_WORDS))
+            continue;
+        if (k === "faults") {
+            for (const [code, f] of Object.entries(v))
+                if (f && code in out.faults)
+                    out.faults[code] = f;
+        }
+        else
+            out[k] = v;
     }
+    return out;
+}
+/** What happens after each fault: the passkey step again, or the wallet apps. Not words: the sheet's steps. */
+const NEXT = {
+    cancelled: "stay",
+    "no-prf": "wallets",
+    unsupported: "wallets",
+    "other-form": "wallets",
+    "not-a-purse": "stay",
+    "wrong-host": "wallets",
+    exists: "stay",
+    unstable: "wallets",
+    "other-passkey": "stay",
+    failed: "stay",
+};
+/** A fault's title, text and next step, in the game's words (default: PLAYER_SIGNIN_WORDS). An unknown code gets the words of "failed". */
+export function faultWords(code, rpId, words = PLAYER_SIGNIN_WORDS) {
+    const known = code in NEXT ? code : "failed";
+    const f = words.faults?.[known] ?? PLAYER_SIGNIN_WORDS.faults[known];
+    return { title: f.title, text: typeof f.text === "function" ? f.text(rpId) : f.text, next: NEXT[known] };
 }

package/dist/shop/panel/index.d.ts

@@ -5,3 +5,5 @@ export type { LooksViewOptions, SlotWords } from "./looks.js";
 export { PAY_TIMING, isTestOrder, payPanel } from "./pay.js";
 export type { PayOptions, PayPanel } from "./pay.js";
 export { qrModules, qrSvg, qrVersionFor } from "./qr.js";
+export { COINGECKO_CREDIT, SHOP_WORDS, priceLine, shopWords } from "./words.js";
+export type { ShopWords } from "./words.js";

package/dist/shop/panel/index.js

@@ -4,8 +4,11 @@
 //   import "@nano133/nanoterra/shop/style.css";
 //   const shop = mountShop(document.getElementById("shop")!, { looks, owned: () => me.owned, signedIn: () => !!me.address, signIn, worn, wear, onOwned });
 //
+// Every word of the two sheets can be the game's own: `mountShop(el, { ..., words: { sendExactly: "Pay exactly" } })` (ShopWords; SHOP_WORDS are the defaults).
+//
 // The server part is "@nano133/nanoterra/shop" (the handler and the stores): it must not load this one.
 export { mountShop } from "./mount.js";
 export { looksView, slotsOf } from "./looks.js";
 export { PAY_TIMING, isTestOrder, payPanel } from "./pay.js";
 export { qrModules, qrSvg, qrVersionFor } from "./qr.js";
+export { COINGECKO_CREDIT, SHOP_WORDS, priceLine, shopWords } from "./words.js";

package/dist/shop/panel/looks.d.ts

@@ -1,4 +1,5 @@
 import { type Look } from "../../looks/look.js";
+import { type ShopWords } from "./words.js";
 /** A tab's words: its key's word, and its plain choice's name (an item slot's: "Plain shovel", "No charm"). */
 export type SlotWords = {
     tab: string;
@@ -24,6 +25,8 @@ export type LooksViewOptions = {
     tab?: string;
     /** A tab was chosen: the sheet draws again with it. */
     onTab?: (slot: string) => void;
+    /** The game's words (./words.ts): the keys it leaves out keep the defaults. */
+    words?: Partial<ShopWords>;
 };
 /** The wear slots of a list, in the order they first show (the outfits first). */
 export declare function slotsOf(looks: readonly Look[]): string[];

package/dist/shop/panel/looks.js

@@ -5,8 +5,7 @@
 // with `takeOff`, each item tab starts with its plain choice (free, "No charm").
 import { h } from "../../admin/panel/dom.js";
 import { OUTFIT, isOutfit, usdText, wearOf } from "../../looks/look.js";
-const HAT_WORDS = { cap: "with a cap", beanie: "with a beanie", crown: "with a crown", tophat: "with a top hat" };
-const titleCase = (s) => s.charAt(0).toUpperCase() + s.slice(1).replace(/-/g, " ");
+import { shopWords } from "./words.js";
 /** The wear slots of a list, in the order they first show (the outfits first). */
 export function slotsOf(looks) {
     const out = [OUTFIT];
@@ -34,13 +33,14 @@ function swatchOf(look) {
 export function looksView(p) {
     const slots = slotsOf(p.looks);
     const tab = p.tab && slots.includes(p.tab) ? p.tab : slots[0];
-    const words = (slot) => p.slots?.[slot] ?? (slot === OUTFIT ? { tab: "Outfits" } : { tab: titleCase(slot), plain: `No ${slot.replace(/-/g, " ")}` });
+    const w = shopWords(p.words);
+    const words = (slot) => p.slots?.[slot] ?? (slot === OUTFIT ? { tab: w.outfits } : { tab: w.slotTab(slot), plain: w.slotPlain(slot) });
     const list = h("ul", { class: "n133s-looks" });
     const row = (pic, name, line, action, worn) => h("li", { class: `n133s-look${worn ? " n133s-look-worn" : ""}` }, pic, h("span", { class: "n133s-look-text" }, h("strong", {}, name), h("small", {}, line)), action);
     if (tab !== OUTFIT && p.takeOff) {
         const plain = p.plainWorn ? p.plainWorn(tab) : !p.looks.some((l) => wearOf(l) === tab && p.worn(l));
-        const action = h("button", { class: `n133s-btn${plain ? "" : " n133s-primary"}`, type: "button", disabled: plain, onclick: () => p.takeOff(tab) }, plain ? "Wearing" : "Wear");
-        list.append(row(h("span", { class: "n133s-swatch n133s-swatch-plain", "aria-hidden": "true" }), words(tab).plain ?? `No ${tab}`, "free", action, plain));
+        const action = h("button", { class: `n133s-btn${plain ? "" : " n133s-primary"}`, type: "button", disabled: plain, onclick: () => p.takeOff(tab) }, plain ? w.wearing : w.wear);
+        list.append(row(h("span", { class: "n133s-swatch n133s-swatch-plain", "aria-hidden": "true" }), words(tab).plain ?? w.slotPlain(tab), w.free, action, plain));
     }
     for (const look of p.looks) {
         if (wearOf(look) !== tab)
@@ -48,14 +48,14 @@ export function looksView(p) {
         const mine = look.priceUsd === 0 || p.owned.has(look.id);
         const worn = p.worn(look);
         const action = mine
-            ? h("button", { class: `n133s-btn${worn ? "" : " n133s-primary"}`, type: "button", disabled: worn, onclick: () => p.wear(look) }, worn ? "Wearing" : "Wear")
-            : h("button", { class: "n133s-btn n133s-buy", type: "button", onclick: () => p.buy(look) }, `Buy ${usdText(look.priceUsd)}`);
-        const what = isOutfit(look) ? (look.change.hat ? HAT_WORDS[look.change.hat] : "colour only") : tab.replace(/-/g, " ");
-        const state = mine ? (look.priceUsd === 0 ? " · free" : " · yours") : "";
+            ? h("button", { class: `n133s-btn${worn ? "" : " n133s-primary"}`, type: "button", disabled: worn, onclick: () => p.wear(look) }, worn ? w.wearing : w.wear)
+            : h("button", { class: "n133s-btn n133s-buy", type: "button", onclick: () => p.buy(look) }, w.buy(usdText(look.priceUsd)));
+        const what = isOutfit(look) ? w.outfitLine(look.change.hat ?? null) : w.itemLine(tab);
+        const state = mine ? ` · ${look.priceUsd === 0 ? w.free : w.yours}` : "";
         list.append(row(p.picture?.(look) ?? swatchOf(look), look.name, `${what}${state}`, action, worn));
     }
     const tabs = slots.length > 1
-        ? h("div", { class: "n133s-tabs", role: "tablist", "aria-label": "Kinds of looks" }, ...slots.map((s) => h("button", { class: "n133s-tab", type: "button", role: "tab", "aria-selected": s === tab ? "true" : "false", onclick: () => p.onTab?.(s) }, words(s).tab)))
+        ? h("div", { class: "n133s-tabs", role: "tablist", "aria-label": w.kinds }, ...slots.map((s) => h("button", { class: "n133s-tab", type: "button", role: "tab", "aria-selected": s === tab ? "true" : "false", onclick: () => p.onTab?.(s) }, words(s).tab)))
         : null;
-    return h("div", { class: "n133s-looks-view" }, tabs, list, h("p", { class: "n133s-fine" }, "A look changes how your character looks. It never changes a score. You pay in Nano (XNO), straight to the game's creator."), p.signedIn ? null : h("p", { class: "n133s-fine" }, "To buy a look, sign in with Nano first: your looks belong to your Nano address."));
+    return h("div", { class: "n133s-looks-view" }, tabs, list, h("p", { class: "n133s-fine" }, w.looksNote), p.signedIn ? null : h("p", { class: "n133s-fine" }, w.signInFirst));
 }

package/dist/shop/panel/mount.d.ts

@@ -1,5 +1,6 @@
 import { type Look } from "../../looks/look.js";
 import { type SlotWords } from "./looks.js";
+import { type ShopWords } from "./words.js";
 export type ShopMountOptions = {
     /** The game's looks (looks.json as it was read). The server decides every price; these are for the list. */
     looks: unknown;
@@ -10,6 +11,16 @@ export type ShopMountOptions = {
     signedIn(): boolean;
     /** The game's sign-in: true when a player is signed in after it. With none, Buy asks the player to sign in and stops. */
     signIn?: () => Promise<boolean>;
+    /**
+     * The game's own Buy (`buy(lookId)`) asked for a sign-in, and the player closed it without signing in: the game shows its own looks sheet again.
+     * The kit's list does not open then (the kit's sheet closes if it was open). A Buy in the kit's own list goes back to that list, as before.
+     */
+    onSignInCancel?: (lookId: string, look: Look) => void;
+    /**
+     * The server refused an order with 401: the player's session ended, though `signedIn()` said yes. The game marks the player signed out. The sheet's
+     * "Sign in" key then calls `signIn()` without asking `signedIn()` first, so a stale "yes" cannot post the same refused order again.
+     */
+    onSessionEnd?: () => void;
     /** Whether the player wears this look now. */
     worn(look: Look): boolean;
     /** Wear a look the player owns. */
@@ -24,8 +35,10 @@ export type ShopMountOptions = {
     picture?: (look: Look) => HTMLElement | null;
     /** Words for the tabs of the wear slots. */
     slots?: Record<string, SlotWords>;
-    /** The sheet's title. Default "Looks". */
+    /** The sheet's title. Default: `words.title` ("Looks"). */
     title?: string;
+    /** The game's words for the two sheets, over the defaults (SHOP_WORDS): `{ buyTitle: (look) => look, sendExactly: "Pay exactly" }`. */
+    words?: Partial<ShopWords>;
     /** Draw the Looks key. Default true; false: the game calls `open()` from its own key. */
     key?: boolean;
     /** "light", "dark", or "device" (the default): the page's `data-n133-theme` when it has one, else the device's setting. */
@@ -41,7 +54,10 @@ export type MountedShop = {
     /** Opens the sheet on the looks. */
     open(): void;
     close(): void;
-    /** Opens the sheet on Buy for one look (the game's own "Buy" elsewhere). */
+    /**
+     * Opens the sheet on Buy for one look (the game's own "Buy" elsewhere), on the next frame: close the game's own <dialog> first. A sign-in closed
+     * without a sign-in calls `onSignInCancel` and opens nothing.
+     */
     buy(lookId: string): void;
     /** Draws the looks again (after the player signed in, or wore something). */
     refresh(): void;

package/dist/shop/panel/mount.js

@@ -4,15 +4,21 @@
 //   owned()      the looks the player owns (the game's GET /api/me gives them)    signedIn()  whether a player is signed in
 //   signIn()     the game's own sign-in (the kit's sign-in path, or the game's): true when the player is signed in after it. The shop draws no sign-in.
 //   worn/wear    what the player wears; `onOwned(lookId)` when a paid order gave a look (wear it)
+//   onSignInCancel(lookId)  the game's own Buy (`buy(lookId)`) asked for a sign-in and the player closed it: the game shows its own sheet again
 //
-// `key: false` draws no key: the game opens the sheet from its own key with `open()`, as the options panel allows. The sheet is a <dialog>: it rises from
-// the bottom on a phone held upright and stands in the middle on a wide screen; on a phone held sideways the pay sheet puts the QR code beside the words.
+// `key: false` draws no key: the game opens the sheet from its own key with `open()`, as the options panel allows. `buy(lookId)` starts on the next frame:
+// a game's own <dialog> that closed just before has had its `close` event by then (Chromium fires it at the frame), so its handler cannot take the focus.
+// The sheet is a <dialog>: it rises from the bottom on a phone held upright and stands in the middle on a wide screen; on a phone held sideways the pay
+// sheet puts the QR code beside the words. Phone first: text 16 px, every key 48 px or more each way.
+//
+// `words` changes any word of the two sheets (./words.ts: SHOP_WORDS are the defaults), for a game's own words or language.
 import { ApiError, createApi } from "../../admin/panel/api.js";
 import { h, releaseFocus } from "../../admin/panel/dom.js";
 import { icon } from "../../admin/panel/icons.js";
 import { checkLooks, wearOf } from "../../looks/look.js";
 import { looksView, slotsOf } from "./looks.js";
 import { payPanel } from "./pay.js";
+import { shopWords } from "./words.js";
 export function mountShop(root, options) {
     const looks = checkLooks(options.looks);
     const api = createApi(options.base ?? "/api/orders", options.fetch);
@@ -21,11 +27,13 @@ export function mountShop(root, options) {
     let stopPay = null;
     let destroyed = false;
     const cleanup = [];
+    const words = shopWords(options.words);
+    const sheetTitle = options.title ?? words.title;
     const title = h("h2", { class: "n133s-title", tabindex: "-1" });
-    const closeKey = h("button", { class: "n133s-close", type: "button", "aria-label": "Close" }, icon("close", 20));
+    const closeKey = h("button", { class: "n133s-close", type: "button", "aria-label": words.close }, icon("close", 20));
     const body = h("div", { class: "n133s-body" });
-    const dialog = h("dialog", { class: "n133s-sheet", "aria-label": options.title ?? "Looks" }, h("header", { class: "n133s-head" }, title, closeKey), body);
-    const key = options.key === false ? null : h("button", { class: "n133s-key", type: "button", "aria-haspopup": "dialog" }, icon("shirt", 20), h("span", { class: "n133s-key-word" }, options.title ?? "Looks"));
+    const dialog = h("dialog", { class: "n133s-sheet", "aria-label": sheetTitle }, h("header", { class: "n133s-head" }, title, closeKey), body);
+    const key = options.key === false ? null : h("button", { class: "n133s-key", type: "button", "aria-haspopup": "dialog" }, icon("shirt", 20), h("span", { class: "n133s-key-word" }, sheetTitle));
     const wrap = h("div", { class: "n133-shop" }, key, dialog);
     root.append(wrap);
     // The theme: the game's word, or the page's (data-n133-theme), or the device's setting.
@@ -96,7 +104,7 @@ export function mountShop(root, options) {
     function showLooks() {
         if (destroyed)
             return;
-        show(options.title ?? "Looks", looksView({
+        show(sheetTitle, looksView({
             looks,
             owned: ownedNow(),
             signedIn: options.signedIn(),
@@ -111,9 +119,10 @@ export function mountShop(root, options) {
                     showLooks();
                 }
                 : undefined,
-            buy: (l) => void buy(l),
+            buy: (l) => void buy(l, false),
             picture: options.picture,
             slots: options.slots,
+            words,
             tab,
             onTab: (s) => {
                 tab = s;
@@ -122,14 +131,18 @@ export function mountShop(root, options) {
             },
         }));
     }
-    const back = (message, extra) => h("div", { class: "n133s-message" }, h("p", { class: "n133s-status" }, message), extra ?? null, h("button", { class: "n133s-btn n133s-wide", type: "button", onclick: () => showLooks() }, "Back to looks"));
-    async function buy(look) {
+    const back = (message, extra) => h("div", { class: "n133s-message" }, h("p", { class: "n133s-status" }, message), extra ?? null, h("button", { class: "n133s-btn n133s-wide", type: "button", onclick: () => showLooks() }, words.back));
+    /**
+     * `game`: the game's own Buy started it (`buy(lookId)`), not the kit's list: a closed sign-in goes back to the game, not to the list.
+     * `ended`: the server said the session ended (401): sign in again whatever `signedIn()` says.
+     */
+    async function buy(look, game, ended = false) {
         if (destroyed)
             return;
         tab = slotsOf(looks).length > 1 ? wearOf(look) : undefined;
-        if (!options.signedIn()) {
+        if (ended || !options.signedIn()) {
             if (!options.signIn)
-                return show(`Buy ${look.name}`, back("To buy a look, sign in with Nano first: your looks belong to your Nano address."));
+                return show(words.buyTitle(look.name), back(words.signInFirst));
             let ok = false;
             try {
                 ok = await options.signIn();
@@ -137,11 +150,15 @@ export function mountShop(root, options) {
             catch {
                 ok = false;
             }
-            if (!ok || !options.signedIn())
-                return showLooks();
+            if (!ok || !options.signedIn()) {
+                if (!game)
+                    return showLooks();
+                close();
+                return options.onSignInCancel?.(look.id, look);
+            }
         }
         const box = h("div", { class: "n133s-turnstile", hidden: true });
-        show(`Buy ${look.name}`, h("div", {}, h("p", { class: "n133s-status" }, "Making your order…"), box));
+        show(words.buyTitle(look.name), h("div", {}, h("p", { class: "n133s-status" }, words.making), box));
         try {
             const turnstile = options.personCheck ? await options.personCheck(box) : null;
             const order = await api.post("", { lookId: look.id, turnstile });
@@ -150,19 +167,23 @@ export function mountShop(root, options) {
             const pay = payPanel(order, {
                 lookName: look.name,
                 check: (id) => api.post(`/${id}/check`),
-                errorText: (e) => (e instanceof ApiError ? e.message : null),
+                errorText: (e) => (e instanceof ApiError ? words.refusal(e.message, e.status) : null),
+                words,
                 onPaid: () => {
                     bought.add(look.id);
                     options.onOwned?.(look.id, look);
                 },
             });
-            show(`Buy ${look.name}`, pay.node);
+            show(words.buyTitle(look.name), pay.node);
             stopPay = pay.stop;
         }
         catch (e) {
-            const message = e instanceof ApiError ? e.message : e instanceof Error && e.message ? e.message : "The order did not start. Try again.";
-            const again = e instanceof ApiError && e.status === 401 && options.signIn ? h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", onclick: () => void buy(look) }, "Sign in") : null;
-            show(`Buy ${look.name}`, back(message, again));
+            const message = e instanceof ApiError ? words.refusal(e.message, e.status) : e instanceof Error && e.message ? words.refusal(e.message, 0) : words.orderFailed;
+            const gone = e instanceof ApiError && e.status === 401;
+            if (gone)
+                options.onSessionEnd?.();
+            const again = gone && options.signIn ? h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", onclick: () => void buy(look, game, true) }, words.signIn) : null;
+            show(words.buyTitle(look.name), back(message, again));
         }
     }
     return {
@@ -170,8 +191,14 @@ export function mountShop(root, options) {
         close,
         buy(lookId) {
             const look = looks.find((l) => l.id === lookId);
-            if (look)
-                void buy(look);
+            // On the next frame (rAF; a hidden page has none): a <dialog> of the game's that closed just before has had its `close` event by then.
+            if (!look)
+                return;
+            const go = () => void buy(look, true);
+            if (typeof requestAnimationFrame === "function" && !globalThis.document?.hidden)
+                requestAnimationFrame(go);
+            else
+                setTimeout(go, 0);
         },
         refresh() {
             if (isOpen() && body.querySelector(".n133s-looks-view"))

package/dist/shop/panel/pay.d.ts

@@ -1,4 +1,5 @@
 import type { PayView } from "../handler.js";
+import { type ShopWords } from "./words.js";
 export declare const PAY_TIMING: {
     readonly pollMs: 5000;
     readonly checkForMs: number;
@@ -14,6 +15,8 @@ export type PayOptions = {
     errorText?(e: unknown): string | null;
     /** The time now in ms (a test gives its own). */
     now?: () => number;
+    /** The game's words (./words.ts): the keys it leaves out keep the defaults. */
+    words?: Partial<ShopWords>;
 };
 export type PayPanel = {
     node: HTMLElement;

package/dist/shop/panel/pay.js

@@ -3,10 +3,11 @@
 //
 // TEST MODE: the server sends no address and no link, and this sheet shows a large "TEST MODE: DO NOT PAY" stamp where the QR code would be, with the
 // wallet key off. Never change that: a payment to an address that nobody holds the key for is lost for good. The sheet decides it from the ORDER (its
-// `test`, a missing `uri` or a missing `address`), never from a setting of the page.
-import { copy, h } from "../../admin/panel/dom.js";
+// `test`, a missing `uri` or a missing `address`), never from a setting of the page. The stamp's words are not among the game's words (./words.ts).
+import { h } from "../../admin/panel/dom.js";
 import { usdText } from "../../looks/look.js";
 import { qrSvg } from "./qr.js";
+import { priceLine, shopWords } from "./words.js";
 export const PAY_TIMING = { pollMs: 5000, checkForMs: 2 * 60_000 };
 /** True when this order must show the test stamp: the server said test mode, or it sent no address or no link. */
 export const isTestOrder = (o) => o.test || !o.uri || !o.address;
@@ -17,27 +18,40 @@ export function payPanel(start, options) {
     let timer;
     let clockTimer;
     let checkingUntil = 0;
-    const status = h("p", { class: "n133s-status", role: "status", "aria-live": "polite" });
-    const again = h("button", { class: "n133s-btn n133s-wide", type: "button", hidden: true }, "Check again");
-    const left = h("span", { class: "n133s-time-left" });
-    const amount = h("div", { class: "n133s-amount" }, h("strong", {}, `${order.xno} XNO`), h("span", {}, ` = ${usdText(Number(order.usd))}`));
+    const w = shopWords(options.words);
+    const test = isTestOrder(order);
+    /** The order's state. In test mode nothing is checked, so it has nothing to say and takes no room. */
+    const status = h("p", { class: "n133s-status", role: "status", "aria-live": "polite", hidden: test });
+    const again = h("button", { class: "n133s-btn n133s-wide", type: "button", hidden: true }, w.checkAgain);
+    /** The time left, live only: in test mode nothing is paid, so nothing waits for the end. */
+    const ends = h("p", { class: "n133s-fine n133s-time-left", hidden: test });
+    const amount = h("div", { class: "n133s-amount" }, test ? null : h("span", { class: "n133s-exact" }, w.sendExactly), h("strong", {}, w.amount(order.xno)), h("span", {}, w.usd(usdText(Number(order.usd)))));
+    const copyKey = (value) => {
+        const key = h("button", { class: "n133s-btn n133s-small", type: "button" }, w.copy);
+        key.addEventListener("click", async () => {
+            try {
+                await navigator.clipboard.writeText(value);
+                key.textContent = w.copied;
+            }
+            catch {
+                key.textContent = w.copyFailed;
+            }
+            setTimeout(() => (key.textContent = w.copy), 1500);
+        });
+        return key;
+    };
     let payArea;
     /** The main key (the wallet link; off in test mode): it stands in a foot that stays in view, so a phone on its side never hides it. */
     let wallet;
-    const test = isTestOrder(order);
     if (test) {
-        payArea = h("div", { class: "n133s-test-pay" }, h("div", { class: "n133s-qr n133s-qr-blocked", "aria-hidden": "true" }, h("div", { class: "n133s-qr-fake" })), h("div", { class: "n133s-stamp", role: "alert" }, h("span", {}, "TEST MODE:"), " ", h("span", {}, "DO NOT PAY")), h("p", { class: "n133s-fine" }, "This game is in test mode, so nothing can be paid here. To sell for real, the creator sets their own receive address and turns test mode off."));
-        wallet = h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", disabled: true }, "Open wallet (off in test mode)");
+        payArea = h("div", { class: "n133s-test-pay" }, h("div", { class: "n133s-qr n133s-qr-blocked", "aria-hidden": "true" }, h("div", { class: "n133s-qr-fake" })), h("div", { class: "n133s-stamp", role: "alert" }, h("span", {}, "TEST MODE:"), " ", h("span", {}, "DO NOT PAY")), h("p", { class: "n133s-fine" }, w.testNote));
+        wallet = h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", disabled: true }, w.walletOff);
     }
     else {
-        const copyAmount = h("button", { class: "n133s-btn n133s-small", type: "button" }, "Copy");
-        copyAmount.addEventListener("click", () => copy(order.xno, copyAmount));
-        const copyAddress = h("button", { class: "n133s-btn n133s-small", type: "button" }, "Copy");
-        copyAddress.addEventListener("click", () => copy(order.address, copyAddress));
-        payArea = h("div", { class: "n133s-live-pay" }, h("div", { class: "n133s-qr" }, qrSvg(order.uri, `QR code to pay ${order.xno} XNO`)), h("details", { class: "n133s-by-hand" }, h("summary", {}, "Enter it by hand"), h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, "Amount"), h("code", {}, `${order.xno} XNO`), copyAmount), h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, "To"), h("code", { class: "n133s-address" }, order.address), copyAddress), h("p", { class: "n133s-fine" }, "Send exactly this amount, with every digit. Another amount does not match this order.")));
-        wallet = h("a", { class: "n133s-btn n133s-primary n133s-wide", href: order.uri }, "Open wallet");
+        payArea = h("div", { class: "n133s-live-pay" }, h("div", { class: "n133s-qr" }, qrSvg(order.uri, w.qrLabel(order.xno))), h("details", { class: "n133s-by-hand" }, h("summary", {}, w.byHand), h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, w.amountLabel), h("code", {}, w.amount(order.xno)), copyKey(order.xno)), h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, w.toLabel), h("code", { class: "n133s-address" }, order.address), copyKey(order.address)), h("p", { class: "n133s-fine" }, w.byHandNote)));
+        wallet = h("a", { class: "n133s-btn n133s-primary n133s-wide", href: order.uri }, w.wallet);
     }
-    const node = h("div", { class: `n133s-pay${test ? " n133s-is-test" : ""}` }, h("div", { class: "n133s-pay-main" }, h("p", { class: "n133s-pay-what" }, `${options.lookName}: a look for your character. It changes how you look, not how you play.`), amount, payArea), h("div", { class: "n133s-pay-side" }, h("p", { class: "n133s-fine" }, "This order ends in ", left, "."), status, again, h("p", { class: "n133s-fine n133s-prices" }, `Price in XNO from ${order.prices.join(", ")}. Powered by CoinGecko.`), h("div", { class: "n133s-foot" }, wallet)));
+    const node = h("div", { class: `n133s-pay${test ? " n133s-is-test" : ""}` }, h("div", { class: "n133s-pay-main" }, h("p", { class: "n133s-pay-what" }, w.lookLine(options.lookName)), amount, payArea), h("div", { class: "n133s-pay-side" }, ends, status, again, h("p", { class: "n133s-fine n133s-prices" }, priceLine(w, order.prices)), h("div", { class: "n133s-foot" }, wallet)));
     const stop = () => {
         stopped = true;
         if (timer)
@@ -50,7 +64,7 @@ export function payPanel(start, options) {
         const ms = Math.max(0, order.expiresAt - now());
         const m = Math.floor(ms / 60_000);
         const s = Math.floor((ms % 60_000) / 1000);
-        left.textContent = `${m}:${String(s).padStart(2, "0")}`;
+        ends.textContent = w.endsIn(`${m}:${String(s).padStart(2, "0")}`);
     };
     tick();
     clockTimer = setInterval(tick, 1000);
@@ -58,7 +72,7 @@ export function payPanel(start, options) {
         order = o;
         if (o.status === "paid") {
             stop();
-            payArea.replaceChildren(h("div", { class: "n133s-paid" }, h("strong", {}, "Paid. Thank you!"), h("p", {}, `${options.lookName} is yours now.`)));
+            payArea.replaceChildren(h("div", { class: "n133s-paid" }, h("strong", {}, w.paid), h("p", {}, w.paidLine(options.lookName))));
             wallet.hidden = true;
             status.textContent = "";
             again.hidden = true;
@@ -67,13 +81,13 @@ export function payPanel(start, options) {
         }
         if (o.status === "paid_late") {
             stop();
-            status.textContent = "This payment came after the order ended. The look was not given. The creator sees it and can send it back.";
+            status.textContent = w.paidLate;
             again.hidden = true;
             return true;
         }
         if (o.status === "expired") {
             stop();
-            status.textContent = "This order ended. If you already paid, wait here: a payment sent in time still counts.";
+            status.textContent = w.expired;
             again.hidden = false;
             return false;
         }
@@ -87,15 +101,15 @@ export function payPanel(start, options) {
             if (show(o))
                 return;
             if (o.status === "open")
-                status.textContent = test ? "Test mode: the game does not wait for a payment." : "Waiting for your payment…";
+                status.textContent = test ? "" : w.waiting;
         }
         catch (e) {
-            status.textContent = options.errorText?.(e) ?? "No connection. Trying again…";
+            status.textContent = options.errorText?.(e) ?? w.noConnection;
         }
         if (now() < checkingUntil)
             timer = setTimeout(poll, PAY_TIMING.pollMs);
         else if (!stopped) {
-            status.textContent = "Still waiting. Already paid? Press Check again.";
+            status.textContent = w.stillWaiting;
             again.hidden = false;
         }
     }
@@ -107,9 +121,8 @@ export function payPanel(start, options) {
         void poll();
     }
     again.addEventListener("click", startChecking);
+    // Test mode makes no checks: nothing can be paid, so nothing is waited for.
     if (!test)
         startChecking();
-    else
-        status.textContent = "Test mode: the game does not wait for a payment.";
     return { node, stop };
 }