@nano133/nanoterra 0.9.0 → 0.10.0

package/src/player-signin/panel/words.ts

@@ -1,32 +1,210 @@
-// 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.
+// 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.
 
 import type { PasskeyFault } from "@nano133/signin/passkey";
 
 /** What to do next after a fault: stay on the passkey step, or offer the wallet apps. */
 export type FaultWords = { title: string; text: string; next: "stay" | "wallets" };
 
-export function faultWords(code: PasskeyFault, rpId: string): FaultWords {
-  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" };
+/** A fault's words: its title, and its text (a function when it names the game's domain, `rpId`). */
+export type FaultText = { title: string; text: string | ((rpId: string) => string) };
+
+export type PlayerSigninWords = {
+  /** The sheet's title. The option `title` wins over it. */
+  title: string;
+  /** The close key's name for a screen reader. */
+  close: string;
+  /** The first line of the ways. */
+  lead: string;
+  usePasskey: string;
+  /** Under "Use a passkey". */
+  passkeyHint: string;
+  /** Under "Use a passkey" where the browser reports no passkey PRF. */
+  passkeyOff: string;
+  lastUsed: string;
+  /** Before the wallet tiles, after the passkey. */
+  orWallet: string;
+  /** Before the wallet tiles, with no passkey before them. */
+  chooseWallet: string;
+  /** Before the passkey, when it comes last. */
+  orPasskey: string;
+  back: string;
+
+  // ---- the passkey ----
+  passkeyTitle: string;
+  passkeyText: string;
+  useMine: string;
+  makeOne: string;
+  waitingPasskey: string;
+  makingPasskey: string;
+  openingPasskey: string;
+  /** A passkey just made, whose first use gave nothing: one key opens it. */
+  madeTitle: string;
+  madeText: string;
+  openMine: string;
+  spareTitle: string;
+  spareText: string;
+  /** Under the code: keep it secret; how to use it. */
+  spareFine: string;
+  showCode: string;
+  copyCode: string;
+  copied: string;
+  copyFailed: string;
+  later: string;
+  continue: string;
+  signingIn: string;
+  signInFailed: string;
+  /** After a fault that offers the wallet apps. */
+  faultWallets: string;
+  faults: Record<PasskeyFault, FaultText>;
+
+  // ---- a wallet app ----
+  starting: string;
+  startFailed: string;
+  /** The words of a refusal: the server's own (`text`, in English) and its HTTP status (0: no answer). Default: the server's words. */
+  refusal: (text: string, status: number) => string;
+  /** The status while the page waits for a wallet ("Berry Wallet"). */
+  waitingFor: (wallet: string) => string;
+  /** After a sign-in, with the player's short address. */
+  signedInAs: (address: string) => string;
+  /** The key that opens a wallet app on a touch screen. */
+  openApp: (wallet: string) => string;
+  anotherWallet: string;
+  /** Before a link that opens the wallet on this computer. */
+  onComputer: string;
+  /** The link's words: open a wallet ("NanChat", or `aWallet`). */
+  openLink: (wallet: string) => string;
+  aWallet: string;
+  /** With no QR hook, on a screen with a mouse. */
+  openOnPhone: (wallet: string) => string;
+  qrLabel: (wallet: string) => string;
+  /** Only approve a sign-in the player started, on this host. */
+  onlyYours: (host: string) => string;
+  /** After the key that opens the app (`yourWallet` for Berry Wallet, which opens any wallet). */
+  comeBack: (wallet: string) => string;
+  yourWallet: string;
+  /** Under a QR code: scan it with this wallet. */
+  scanWith: (wallet: string) => string;
+  /** Under NanChat's QR code: the phone's camera opens it. */
+  scanCamera: (wallet: string) => string;
+  /** Before Nautilus's code (the code follows, bold). */
+  checkCode: string;
+  tryAgain: string;
+  otherWay: string;
+  expired: string;
+  usedElsewhere: string;
+  tooManyChecks: string;
+};
+
+/** `words` as a game gives it: any of the keys, and any of the faults. */
+export type PlayerSigninWordsOption = Partial<Omit<PlayerSigninWords, "faults">> & { faults?: Partial<Record<PasskeyFault, FaultText>> };
+
+export const PLAYER_SIGNIN_WORDS: PlayerSigninWords = {
+  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?: PlayerSigninWordsOption): PlayerSigninWords {
+  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 as Record<string, FaultText | undefined>)) if (f && code in out.faults) out.faults[code as PasskeyFault] = f;
+    } else (out as Record<string, unknown>)[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: Record<PasskeyFault, FaultWords["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: PasskeyFault, rpId: string, words: PlayerSigninWordsOption = PLAYER_SIGNIN_WORDS): FaultWords {
+  const known: PasskeyFault = 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/src/shop/handler.ts

@@ -15,7 +15,7 @@
 // shows "TEST MODE: DO NOT PAY". A payment to an address nobody holds the key for is lost for good.
 
 import { fail, json, memoryLimiter, readLimited, sameOrigin } from "../admin/http.js";
-import { checkLooks, type Look } from "../looks/look.js";
+import { checkLooks, usdDecimals, type Look } from "../looks/look.js";
 import { payeeOf } from "./address.js";
 import { nanoUri, priceRaw, xnoText } from "./amount.js";
 import { PUBLIC_NODES, type Fetch, type NanoNode, type RpcOptions } from "./nodes.js";
@@ -157,7 +157,7 @@ export function createShopHandler(options: ShopHandlerOptions): ShopHandler {
     const price = priceRaw(look.priceUsd, rate.usd);
     if (!price) return fail(503, "Prices are not available now. Try again later.");
     try {
-      const order = await reserveOrder(store, { player, lookId: look.id, usd: look.priceUsd.toFixed(2), rate: rate.usd, price, visitor, now: at });
+      const order = await reserveOrder(store, { player, lookId: look.id, usd: usdDecimals(look.priceUsd), rate: rate.usd, price, visitor, now: at });
       return json(payView(order, at), 201);
     } catch (e) {
       if (e instanceof ShopBusy) return fail(503, "Many players are paying this price right now. Try again in a minute.");

package/src/shop/panel/index.ts

@@ -4,6 +4,8 @@
 //   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";
@@ -13,3 +15,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/src/shop/panel/looks.ts

@@ -6,8 +6,7 @@
 
 import { h } from "../../admin/panel/dom.js";
 import { OUTFIT, isOutfit, usdText, wearOf, type Look } from "../../looks/look.js";
-
-const HAT_WORDS: Record<string, string> = { cap: "with a cap", beanie: "with a beanie", crown: "with a crown", tophat: "with a top hat" };
+import { shopWords, 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; plain?: string };
@@ -32,10 +31,10 @@ 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>;
 };
 
-const titleCase = (s: string) => s.charAt(0).toUpperCase() + s.slice(1).replace(/-/g, " ");
-
 /** The wear slots of a list, in the order they first show (the outfits first). */
 export function slotsOf(looks: readonly Look[]): string[] {
   const out: string[] = [OUTFIT];
@@ -62,25 +61,26 @@ function swatchOf(look: Look): HTMLElement {
 export function looksView(p: LooksViewOptions): HTMLElement {
   const slots = slotsOf(p.looks);
   const tab = p.tab && slots.includes(p.tab) ? p.tab : slots[0];
-  const words = (slot: string): SlotWords => p.slots?.[slot] ?? (slot === OUTFIT ? { tab: "Outfits" } : { tab: titleCase(slot), plain: `No ${slot.replace(/-/g, " ")}` });
+  const w = shopWords(p.words);
+  const words = (slot: string): SlotWords => 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: HTMLElement, name: string, line: string, action: HTMLElement, worn: boolean) =>
     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) continue;
     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));
   }
 
@@ -88,7 +88,7 @@ export function looksView(p: LooksViewOptions): HTMLElement {
     slots.length > 1
       ? h(
           "div",
-          { class: "n133s-tabs", role: "tablist", "aria-label": "Kinds of looks" },
+          { 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),
           ),
@@ -100,7 +100,7 @@ export function looksView(p: LooksViewOptions): HTMLElement {
     { 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."),
+    h("p", { class: "n133s-fine" }, w.looksNote),
+    p.signedIn ? null : h("p", { class: "n133s-fine" }, w.signInFirst),
   );
 }

package/src/shop/panel/mount.ts

@@ -4,9 +4,14 @@
 //   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";
@@ -15,6 +20,7 @@ import { checkLooks, wearOf, type Look } from "../../looks/look.js";
 import type { PayView } from "../handler.js";
 import { looksView, slotsOf, type SlotWords } from "./looks.js";
 import { payPanel } from "./pay.js";
+import { shopWords, 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. */
@@ -26,6 +32,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. */
@@ -40,8 +56,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. */
@@ -58,7 +76,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;
@@ -75,12 +96,14 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
   let stopPay: (() => void) | null = null;
   let destroyed = false;
   const cleanup: (() => void)[] = [];
+  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);
 
@@ -147,7 +170,7 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
   function showLooks() {
     if (destroyed) return;
     show(
-      options.title ?? "Looks",
+      sheetTitle,
       looksView({
         looks,
         owned: ownedNow(),
@@ -163,9 +186,10 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
               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;
@@ -177,23 +201,31 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
   }
 
   const back = (message: string, extra?: HTMLElement | null) =>
-    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"));
+    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));
 
-  async function buy(look: Look) {
+  /**
+   * `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: Look, game: boolean, ended = false) {
     if (destroyed) return;
     tab = slotsOf(looks).length > 1 ? wearOf(look) : undefined;
-    if (!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."));
+    if (ended || !options.signedIn()) {
+      if (!options.signIn) return show(words.buyTitle(look.name), back(words.signInFirst));
       let ok = false;
       try {
         ok = await options.signIn();
       } 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<PayView>("", { lookId: look.id, turnstile });
@@ -201,18 +233,21 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
       const pay = payPanel(order, {
         lookName: look.name,
         check: (id) => api.post<PayView>(`/${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));
     }
   }
 
@@ -221,7 +256,11 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
     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")) showLooks();