@nano133/nanoterra 0.9.0 → 0.9.3

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

@@ -11,6 +11,8 @@
 //
 // The seed lives in local variables of one sign-in only: never in storage, a log, an error text or an address. The page remembers only the passkeys'
 // ids and the last way (./memo.ts).
+//
+// `words` changes any word of the sheet (./words.ts: PLAYER_SIGNIN_WORDS are the defaults), for a game's own words or language.
 
 import { firstUse, makePasskey, openPasskey, PasskeyError, passkeyFault, passkeySupport, type NewPasskey, type PasskeyScheme, type PasskeySetup } from "@nano133/signin/passkey";
 import { ApiError, createApi } from "../../admin/panel/api.js";
@@ -20,7 +22,7 @@ import { checkScheme } from "../scheme-check.js";
 import { previewHost } from "../host.js";
 import { WAYS, type Way } from "../types.js";
 import { readMemo, rememberLast, rememberMade, rememberOpened } from "./memo.js";
-import { faultWords } from "./words.js";
+import { faultWords, playerSigninWords, type PlayerSigninWordsOption } from "./words.js";
 
 export type SignedIn = { address: string; via: "wallet" | "passkey" };
 
@@ -50,6 +52,8 @@ export type PlayerSigninViewOptions = {
   fetch?: typeof fetch;
   /** A touch screen (one key that opens the app) or not (a QR code). Default: `(pointer: coarse)`. */
   touch?: boolean;
+  /** The game's words for the sheet, over the defaults (PLAYER_SIGNIN_WORDS): `{ lead: "No password.", faults: { cancelled: { ... } } }`. */
+  words?: PlayerSigninWordsOption;
 };
 
 export type PlayerSigninView = {
@@ -102,6 +106,7 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
   const passkeyOn = options.passkey ?? !previewHost(rpId);
   const scheme = passkeyOn ? checkScheme(options.scheme as PasskeyScheme) : null;
   const touch = () => options.touch ?? (typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches);
+  const w = playerSigninWords(options.words);
 
   let stopped = false;
   let timer: ReturnType<typeof setTimeout> | undefined;
@@ -122,7 +127,7 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
     node.toggleAttribute("aria-busy", on);
   };
   const key = (text: string, onclick: () => void, kind: "primary" | "plain" | "quiet" = "plain") => h("button", { class: `n133s-btn n133s-${kind}`, type: "button", onclick }, text);
-  const backKey = () => h("button", { class: "n133s-back", type: "button", onclick: () => showWays() }, icon("back", 18), h("span", {}, "Back"));
+  const backKey = () => h("button", { class: "n133s-back", type: "button", onclick: () => showWays() }, icon("back", 18), h("span", {}, w.back));
   const title = (text: string) => h("h3", { class: "n133s-step", tabindex: "-1" }, text);
   const focusFirst = () => (area.querySelector<HTMLElement>("h3, button:not([disabled])") ?? area).focus?.({ preventScroll: true });
   const setup = (): PasskeySetup => ({ rpId, rpName: options.name, scheme: scheme!, userName: passkeyName(options.name), exclude: readMemo(rpId).ids });
@@ -140,7 +145,7 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
   function done(player: SignedIn) {
     stopWaiting();
     current = null;
-    area.replaceChildren(h("p", { class: "n133s-done" }, icon("check", 22), h("span", {}, `Signed in as ${shortAddress(player.address)}`)));
+    area.replaceChildren(h("p", { class: "n133s-done" }, icon("check", 22), h("span", {}, w.signedInAs(shortAddress(player.address)))));
     say("");
     options.onSignedIn?.(player);
   }
@@ -154,8 +159,8 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
       "button",
       { class: `n133s-pk${off ? " is-off" : ""}`, type: "button", onclick: () => showPasskey() },
       h("span", { class: "n133s-pk-mark" }, keyIcon()),
-      h("span", { class: "n133s-pk-words" }, h("strong", {}, "Use a passkey"), h("small", {}, off ? "Not on this browser" : "Face ID, Touch ID or your device PIN")),
-      last ? h("span", { class: "n133s-last" }, "Last used") : null,
+      h("span", { class: "n133s-pk-words" }, h("strong", {}, w.usePasskey), h("small", {}, off ? w.passkeyOff : w.passkeyHint)),
+      last ? h("span", { class: "n133s-last" }, w.lastUsed) : null,
     );
   }
 
@@ -164,13 +169,13 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
     return h(
       "div",
       { class: "n133s-tiles" },
-      ...ways.map((w) =>
+      ...ways.map((way) =>
         h(
           "button",
-          { class: "n133s-tile", type: "button", onclick: () => choose(w) },
-          h("span", { class: "n133s-mark", "aria-hidden": "true" }, WALLETS[w].mark),
-          h("span", { class: "n133s-name" }, WALLETS[w].name),
-          last === w ? h("span", { class: "n133s-last" }, "Last used") : null,
+          { class: "n133s-tile", type: "button", onclick: () => choose(way) },
+          h("span", { class: "n133s-mark", "aria-hidden": "true" }, WALLETS[way].mark),
+          h("span", { class: "n133s-name" }, WALLETS[way].name),
+          last === way ? h("span", { class: "n133s-last" }, w.lastUsed) : null,
         ),
       ),
     );
@@ -181,8 +186,8 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
     busy(false);
     const pk = passkeyOn ? passkeyTile() : null;
     const first = pk && support !== "no";
-    const walletsPart = ways.length ? [h("p", { class: "n133s-or" }, pk ? "Or a wallet app" : "Choose your wallet"), walletTiles()] : [];
-    fill(h("p", { class: "n133s-lead" }, "No password and no payment."), first ? pk : null, ...walletsPart, !first && pk ? h("p", { class: "n133s-or" }, "Or a passkey") : null, !first ? pk : null);
+    const walletsPart = ways.length ? [h("p", { class: "n133s-or" }, pk ? w.orWallet : w.chooseWallet), walletTiles()] : [];
+    fill(h("p", { class: "n133s-lead" }, w.lead), first ? pk : null, ...walletsPart, !first && pk ? h("p", { class: "n133s-or" }, w.orPasskey) : null, !first ? pk : null);
     say("");
   }
 
@@ -191,13 +196,13 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
   function showFault(e: unknown): void {
     busy(false);
     const f = passkeyFault(e);
-    const w = faultWords(f.code, rpId);
-    if (w.next === "stay") return showPasskey(w.text);
+    const fw = faultWords(f.code, rpId, w);
+    if (fw.next === "stay") return showPasskey(fw.text);
     fill(
       backKey(),
-      title(w.title),
-      h("p", { class: "n133s-text n133s-fault", "data-fault": f.code }, w.text),
-      ways.length ? h("p", { class: "n133s-or" }, "Sign in with a wallet app") : null,
+      title(fw.title),
+      h("p", { class: "n133s-text n133s-fault", "data-fault": f.code }, fw.text),
+      ways.length ? h("p", { class: "n133s-or" }, w.faultWallets) : null,
       ways.length ? walletTiles() : null,
     );
     say("");
@@ -212,12 +217,12 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
     if (support === "no") return showFault(new PasskeyError("no-prf"));
     if (!hostFits(location.hostname, rpId)) return showFault({ name: "SecurityError" });
     const known = readMemo(rpId).ids.length > 0;
-    const use = key("Use my passkey", () => void usePasskey(), known ? "primary" : "plain");
-    const make = key("Make a passkey", () => void makeNew(), known ? "plain" : "primary");
+    const use = key(w.useMine, () => void usePasskey(), known ? "primary" : "plain");
+    const make = key(w.makeOne, () => void makeNew(), known ? "plain" : "primary");
     area.replaceChildren(
       backKey(),
-      title("Passkey"),
-      h("p", { class: "n133s-text" }, "Face ID, Touch ID or your device PIN. The passkey stays on your device: the game never sees it."),
+      title(w.passkeyTitle),
+      h("p", { class: "n133s-text" }, w.passkeyText),
       h("div", { class: "n133s-keys" }, known ? use : make, known ? make : use),
     );
     say(note ?? "");
@@ -226,7 +231,7 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
 
   async function usePasskey() {
     busy(true);
-    say("Waiting for your passkey…");
+    say(w.waitingPasskey);
     prompt = new AbortController();
     try {
       const p = await openPasskey(setup(), prompt.signal);
@@ -239,7 +244,7 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
 
   async function makeNew() {
     busy(true);
-    say("Making your passkey…");
+    say(w.makingPasskey);
     prompt = new AbortController();
     let made: NewPasskey;
     try {
@@ -257,7 +262,7 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
   /** The first use of a passkey just made. Where it gives nothing (a browser that allows one prompt per press, a closed sheet), one key finishes it. */
   async function firstOpen(made: NewPasskey, pick: boolean) {
     busy(true);
-    say("Opening your passkey…");
+    say(w.openingPasskey);
     prompt = new AbortController();
     try {
       const p = await firstUse(setup(), made, prompt.signal, pick);
@@ -268,7 +273,7 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
       const f = passkeyFault(e);
       if (f.code !== "cancelled" && f.code !== "failed") return showFault(f);
       busy(false);
-      area.replaceChildren(title("Your passkey is made"), h("p", { class: "n133s-text" }, "Press the key to open it."), h("div", { class: "n133s-keys" }, key("Open my passkey", () => void firstOpen(made, true), "primary")));
+      area.replaceChildren(title(w.madeTitle), h("p", { class: "n133s-text" }, w.madeText), h("div", { class: "n133s-keys" }, key(w.openMine, () => void firstOpen(made, true), "primary")));
       say("");
       focusFirst();
     }
@@ -281,28 +286,28 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
       const code = h("p", { class: "n133s-code", translate: "no" });
       const codeBox = h("div", { class: "n133s-codebox" }, code);
       codeBox.hidden = true;
-      const go = key("Later", () => resolve(), "quiet");
-      const copyBtn = key("Copy the code", async () => {
+      const go = key(w.later, () => resolve(), "quiet");
+      const copyBtn = key(w.copyCode, async () => {
         try {
           await navigator.clipboard.writeText(seed);
-          copyBtn.textContent = "Copied";
+          copyBtn.textContent = w.copied;
         } catch {
-          copyBtn.textContent = "Copy failed: write it down";
+          copyBtn.textContent = w.copyFailed;
         }
       });
       codeBox.append(copyBtn);
-      const show = key("Show my code", () => {
+      const show = key(w.showCode, () => {
         code.textContent = seed.match(/.{1,16}/g)!.join("\n");
         codeBox.hidden = false;
         show.remove();
-        go.textContent = "Continue";
+        go.textContent = w.continue;
         go.className = "n133s-btn n133s-primary";
       }, "primary");
       area.replaceChildren(
-        title("Keep a spare key"),
-        h("p", { class: "n133s-text" }, "Your looks belong to this passkey. If you lose it, this code brings them back."),
+        title(w.spareTitle),
+        h("p", { class: "n133s-text" }, w.spareText),
         codeBox,
-        h("p", { class: "n133s-fine" }, "Keep it secret: whoever has it can sign in as you. To use it, import it as a seed in a Nano wallet such as Nautilus, then sign in with that wallet."),
+        h("p", { class: "n133s-fine" }, w.spareFine),
         h("div", { class: "n133s-keys" }, show, go),
       );
       say("");
@@ -315,7 +320,7 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
     if (fresh && options.spareKey !== false) await spareKey(seed);
     if (stopped) return;
     busy(true);
-    say("Signing in…");
+    say(w.signingIn);
     try {
       const { signinBody } = await import("@nano133/signin/purse");
       const turnstile = await personToken();
@@ -323,7 +328,7 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
       rememberOpened(rpId, credentialId);
       if (!stopped) done({ address: r.address, via: "passkey" });
     } catch (e) {
-      if (!stopped) showPasskey(e instanceof ApiError ? e.message : "Sign-in did not work. Try again.");
+      if (!stopped) showPasskey(e instanceof ApiError ? w.refusal(e.message, e.status) : w.signInFailed);
     }
   }
 
@@ -334,7 +339,7 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
     stopWaiting();
     current = null;
     busy(true);
-    say("Starting…");
+    say(w.starting);
     try {
       const turnstile = await personToken();
       const s = await api.post<Start>(`${base}/start`, { way, ...(turnstile ? { turnstile } : {}) });
@@ -346,14 +351,14 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
     } catch (e) {
       busy(false);
       showWays();
-      say(e instanceof Error ? e.message : "Sign-in did not start. Try again.");
+      say(e instanceof ApiError ? w.refusal(e.message, e.status) : e instanceof Error && e.message ? w.refusal(e.message, 0) : w.startFailed);
     }
   }
 
   function showWallet(s: Start) {
     const name = WALLETS[s.way].name;
     area.replaceChildren(backKey(), title(name), ...walletSteps(s, name));
-    say(`Waiting for ${name}…`);
+    say(w.waitingFor(name));
     focusFirst();
   }
 
@@ -361,44 +366,44 @@ export function signInView(options: PlayerSigninViewOptions): PlayerSigninView {
   function walletSteps(s: Start, name: string): Node[] {
     const open = (text: string, href: string, newTab = false) => h("a", { class: "n133s-btn n133s-primary", href, target: newTab ? "_blank" : undefined, rel: newTab ? "noopener" : undefined }, text);
     const qr = (text: string) => {
-      if (!options.qr) return h("p", { class: "n133s-fine" }, "Open this page on your phone to sign in with ", name, ".");
+      if (!options.qr) return h("p", { class: "n133s-fine" }, w.openOnPhone(name));
       const c = options.qr(text);
-      c.setAttribute("aria-label", `QR code to sign in with ${name}`);
+      c.setAttribute("aria-label", w.qrLabel(name));
       return h("div", { class: "n133s-qr" }, c);
     };
-    const only = h("p", { class: "n133s-fine" }, `Only approve a sign-in that you started yourself, on ${location.host}.`);
-    const comeBack = h("p", { class: "n133s-fine" }, `Approve the sign-in in ${s.way === "berry" ? "your wallet" : name}, then come back to this page.`);
+    const only = h("p", { class: "n133s-fine" }, w.onlyYours(location.host));
+    const comeBack = h("p", { class: "n133s-fine" }, w.comeBack(s.way === "berry" ? w.yourWallet : name));
     if (s.way === "nautilus") {
-      const code = h("p", { class: "n133s-text" }, "Check that Nautilus shows the code ", h("strong", { class: "n133s-signcode" }, s.code ?? ""), ".");
-      return touch() ? [code, open("Open Nautilus", s.link), comeBack] : [qr(s.link), h("p", { class: "n133s-text" }, "Scan this with Nautilus on your phone, then approve the sign-in."), code, only];
+      const code = h("p", { class: "n133s-text" }, w.checkCode, h("strong", { class: "n133s-signcode" }, s.code ?? ""));
+      return touch() ? [code, open(w.openApp(name), s.link), comeBack] : [qr(s.link), h("p", { class: "n133s-text" }, w.scanWith(name)), code, only];
     }
     if (s.way === "nanchat") {
-      const here = h("p", { class: "n133s-fine" }, "On this computer: ", h("a", { href: s.link, target: "_blank", rel: "noopener" }, "open NanChat"), ".");
-      return touch() ? [open("Open NanChat", s.link, true), comeBack, only] : [qr(s.link), h("p", { class: "n133s-text" }, "Scan this with your phone's camera to open NanChat, then approve the sign-in."), only, here];
+      const here = h("p", { class: "n133s-fine" }, w.onComputer, h("a", { href: s.link, target: "_blank", rel: "noopener" }, w.openLink(name)));
+      return touch() ? [open(w.openApp(name), s.link, true), comeBack, only] : [qr(s.link), h("p", { class: "n133s-text" }, w.scanCamera(name)), only, here];
     }
-    const other = h("a", { class: "n133s-btn n133s-plain", href: s.walletLink ?? s.link }, "Another wallet");
-    const here = h("p", { class: "n133s-fine" }, "On this computer: ", h("a", { href: s.walletLink ?? s.link }, "open a wallet"), ".");
-    return touch() ? [open("Open Berry Wallet", s.link), other, comeBack] : [qr(s.link), h("p", { class: "n133s-text" }, "Scan this with Berry Wallet on your phone, then approve the sign-in."), only, here];
+    const other = h("a", { class: "n133s-btn n133s-plain", href: s.walletLink ?? s.link }, w.anotherWallet);
+    const here = h("p", { class: "n133s-fine" }, w.onComputer, h("a", { href: s.walletLink ?? s.link }, w.openLink(w.aWallet)));
+    return touch() ? [open(w.openApp(name), s.link), other, comeBack] : [qr(s.link), h("p", { class: "n133s-text" }, w.scanWith(name)), only, here];
   }
 
   /** The request ended without a sign-in: say why, and offer a new one. */
   function again(s: Start, words: string) {
     current = null;
-    area.replaceChildren(backKey(), title(WALLETS[s.way].name), h("div", { class: "n133s-keys" }, key("Try again", () => void choose(s.way), "primary"), key("Choose another way", () => showWays())));
+    area.replaceChildren(backKey(), title(WALLETS[s.way].name), h("div", { class: "n133s-keys" }, key(w.tryAgain, () => void choose(s.way), "primary"), key(w.otherWay, () => showWays())));
     say(words);
   }
 
   async function poll(s: Start) {
     if (stopped || current !== s) return;
-    if (Date.now() > s.expiresAt + 5000) return again(s, "This sign-in expired.");
+    if (Date.now() > s.expiresAt + 5000) return again(s, w.expired);
     try {
       const r = await api.post<{ status: string; address?: string }>(`${base}/check`, { id: s.id, way: s.way });
       if (stopped || current !== s) return;
       if (r.status === "signedin" && r.address) return done({ address: r.address, via: "wallet" });
-      if (r.status === "elsewhere" || r.status === "used") return again(s, "This sign-in was used in another browser. Start again.");
-      if (r.status === "expired") return again(s, "This sign-in expired.");
+      if (r.status === "elsewhere" || r.status === "used") return again(s, w.usedElsewhere);
+      if (r.status === "expired") return again(s, w.expired);
     } catch (e) {
-      if (e instanceof ApiError && e.status === 429) say("Too many checks. Waiting a moment…");
+      if (e instanceof ApiError && e.status === 429) say(w.tooManyChecks);
     }
     timer = setTimeout(() => void poll(s), 2000);
   }

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/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),
   );
 }