@nano133/nanoterra 0.9.0 → 0.10.0

package/src/shop/panel/pay.ts

@@ -3,12 +3,13 @@
 //
 // 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.
+// `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 { copy, h } from "../../admin/panel/dom.js";
+import { h } from "../../admin/panel/dom.js";
 import { usdText } from "../../looks/look.js";
 import type { PayView } from "../handler.js";
 import { qrSvg } from "./qr.js";
+import { priceLine, shopWords, type ShopWords } from "./words.js";
 
 export const PAY_TIMING = { pollMs: 5000, checkForMs: 2 * 60_000 } as const;
 
@@ -23,6 +24,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; stop(): void };
@@ -37,44 +40,62 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
   let timer: ReturnType<typeof setTimeout> | undefined;
   let clockTimer: ReturnType<typeof setInterval> | undefined;
   let checkingUntil = 0;
+  const w = shopWords(options.words);
+  const test = isTestOrder(order);
 
-  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))}`));
+  /** 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: string) => {
+    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: HTMLElement;
   /** 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: HTMLElement;
-  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."),
+      h("p", { class: "n133s-fine" }, w.testNote),
     );
-    wallet = h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", disabled: true }, "Open wallet (off in test mode)");
+    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("div", { class: "n133s-qr" }, qrSvg(order.uri!, w.qrLabel(order.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."),
+        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! }, "Open wallet");
+    wallet = h("a", { class: "n133s-btn n133s-primary n133s-wide", href: order.uri! }, w.wallet);
   }
 
   const node = h(
@@ -83,17 +104,17 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     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.`),
+      h("p", { class: "n133s-pay-what" }, w.lookLine(options.lookName)),
       amount,
       payArea,
     ),
     h(
       "div",
       { class: "n133s-pay-side" },
-      h("p", { class: "n133s-fine" }, "This order ends in ", left, "."),
+      ends,
       status,
       again,
-      h("p", { class: "n133s-fine n133s-prices" }, `Price in XNO from ${order.prices.join(", ")}. Powered by CoinGecko.`),
+      h("p", { class: "n133s-fine n133s-prices" }, priceLine(w, order.prices)),
       h("div", { class: "n133s-foot" }, wallet),
     ),
   );
@@ -109,7 +130,7 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     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);
@@ -118,7 +139,7 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     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;
@@ -127,13 +148,13 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     }
     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;
     }
@@ -145,13 +166,13 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     try {
       const o = await options.check(order.id);
       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…";
+      if (o.status === "open") 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;
     }
   }
@@ -164,8 +185,8 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     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 };
 }

package/src/shop/panel/style.css

@@ -1,5 +1,5 @@
 /* The Looks key and the shop's sheet (mountShop in ./mount.ts). Every rule is under .n133-shop, so nothing leaks into the game's page.
-   Phone first: every key is 44 px or more (the buy and pay keys 48 px). On a phone held upright the sheet rises from the bottom; on a wide screen it
+   Phone first: text is 16 px (the stamp and the amount bigger), and every key, tab, close key and fold is 48 px or more each way. On a phone held upright the sheet rises from the bottom; on a wide screen it
    stands in the middle; on a phone held sideways the pay sheet puts the QR code beside the words, and the wallet key stays in view.
    Light and dark: mountShop sets data-theme="light" | "dark" on .n133-shop (the game's word, the page's data-n133-theme, or the device's setting).
    To theme it, set the --n133-* custom properties on the element that holds the key (or a parent): --n133-ink, --n133-ink-soft, --n133-paper,
@@ -64,14 +64,14 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  min-width: 44px;
-  min-height: 44px;
-  padding: 0 14px;
+  min-width: 48px;
+  min-height: 48px;
+  padding: 0 16px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--paper);
   color: var(--ink);
-  font: 650 15px/1 var(--font);
+  font: 650 16px/1 var(--font);
   cursor: pointer;
   touch-action: manipulation;
 }
@@ -143,8 +143,8 @@
 .n133-shop .n133s-close {
   display: grid;
   place-items: center;
-  width: 44px;
-  height: 44px;
+  width: 48px;
+  height: 48px;
   border: 0;
   border-radius: 12px;
   background: transparent;
@@ -172,7 +172,7 @@
 
 .n133-shop .n133s-fine {
   color: var(--ink-soft);
-  font-size: 13px;
+  font-size: 16px;
 }
 
 /* ---- keys ---- */
@@ -182,6 +182,7 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
+  min-width: 48px;
   min-height: 48px;
   padding: 0 18px;
   border: 2px solid var(--line);
@@ -227,9 +228,7 @@
 }
 
 .n133-shop .n133s-small {
-  min-height: 44px;
-  padding: 0 12px;
-  font-size: 14px;
+  padding: 0 14px;
 }
 
 /* ---- the looks ---- */
@@ -245,13 +244,14 @@
 
 .n133-shop .n133s-tab {
   flex: none;
-  min-height: 44px;
-  padding: 0 14px;
+  min-width: 48px;
+  min-height: 48px;
+  padding: 0 16px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--ground);
   color: var(--ink);
-  font: 650 15px/1 var(--font);
+  font: 650 16px/1 var(--font);
   cursor: pointer;
 }
 
@@ -295,7 +295,7 @@
 
 .n133-shop .n133s-look-text small {
   color: var(--ink-soft);
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .n133-shop .n133s-swatch {
@@ -366,6 +366,11 @@
   font-weight: 700;
 }
 
+/* The time left: its digits keep their width while it counts down. */
+.n133-shop .n133s-time-left {
+  font-variant-numeric: tabular-nums;
+}
+
 .n133-shop .n133s-qr {
   display: grid;
   place-items: center;
@@ -429,8 +434,8 @@
 }
 
 .n133-shop .n133s-by-hand summary {
-  min-height: 44px;
-  line-height: 44px;
+  min-height: 48px;
+  line-height: 48px;
   font-weight: 700;
   cursor: pointer;
 }
@@ -443,17 +448,16 @@
 }
 
 .n133-shop .n133s-label {
-  width: 60px;
+  width: 64px;
   flex: none;
   color: var(--ink-soft);
-  font-size: 14px;
 }
 
 .n133-shop .n133s-row code {
   flex: 1;
   min-width: 0;
   word-break: break-all;
-  font-size: 13px;
+  font-size: 16px;
 }
 
 .n133-shop .n133s-paid {

package/src/shop/panel/words.ts

@@ -0,0 +1,172 @@
+// Every word that the shop's sheets show: the looks sheet, Buy and the pay sheet. A game gives `words` to `mountShop` (or to `looksView` and `payPanel`)
+// 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.
+//
+// Two things a game cannot change, because a player's money depends on them: the stamp "TEST MODE: DO NOT PAY" (it is not a key), and the words
+// "Powered by CoinGecko" while CoinGecko is one of the price feeds (CoinGecko's API terms ask for them: `priceLine` adds them when `prices` leaves
+// them out).
+//
+// The defaults are short on purpose (Wes, 2026-11-01: fewer words): the pay sheet shows at most 30 words, and no sentence has more than 10.
+
+import type { Hat } from "../../looks/look.js";
+
+export type ShopWords = {
+  // ---- the looks sheet ----
+  /** The sheet's title, the Looks key's word and the sheet's name for a screen reader. The option `title` wins over it. */
+  title: string;
+  /** The close key's name for a screen reader. */
+  close: string;
+  /** The tabs' name for a screen reader. */
+  kinds: string;
+  /** The outfits' tab. */
+  outfits: string;
+  /** The tab of a wear slot of the game's own ("shovel"). The option `slots` wins over it. */
+  slotTab: (slot: string) => string;
+  /** The plain choice of a wear slot ("No shovel"). The option `slots` wins over it. */
+  slotPlain: (slot: string) => string;
+  /** The line under an outfit: what it changes (its hat, or the colour only). */
+  outfitLine: (hat: Hat | null) => string;
+  /** The line under an item of a wear slot. */
+  itemLine: (slot: string) => string;
+  /** Added to the line of a free look, and the plain choice's line. */
+  free: string;
+  /** Added to the line of a look the player owns. */
+  yours: string;
+  wear: string;
+  wearing: string;
+  /** The Buy key, with the look's price ("$0.25"). */
+  buy: (price: string) => string;
+  /** Under the list. */
+  looksNote: string;
+  /** Under the list and at Buy, while nobody is signed in. */
+  signInFirst: string;
+
+  // ---- Buy ----
+  /** The title of Buy and of the pay sheet. */
+  buyTitle: (look: string) => string;
+  making: string;
+  /** An order that did not start, with no words from the server. */
+  orderFailed: 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 key back to the looks. */
+  back: string;
+  /** The key that signs in again after "Sign in first." (401). */
+  signIn: string;
+
+  // ---- the pay sheet ----
+  /** The line under the title. */
+  lookLine: (look: string) => string;
+  /** The amount in XNO, large ("0.25 XNO"). */
+  amount: (xno: string) => string;
+  /** The amount in dollars, beside it ("= $0.25"). */
+  usd: (usd: string) => string;
+  /** Above the amount, live only: the player must send this exact amount. */
+  sendExactly: string;
+  /** Under the stamp in test mode: nothing can be paid here. */
+  testNote: string;
+  /** The wallet key in test mode, off, with its reason. */
+  walletOff: string;
+  /** The wallet key (live). */
+  wallet: string;
+  /** The QR code's name for a screen reader. */
+  qrLabel: (xno: string) => string;
+  /** The fold with the amount and the address to type by hand. */
+  byHand: string;
+  amountLabel: string;
+  /** The address's label in the fold. */
+  toLabel: string;
+  /** In the fold: another amount does not match the order. */
+  byHandNote: string;
+  copy: string;
+  copied: string;
+  copyFailed: string;
+  /** The time left (live only): the order ends then. */
+  endsIn: (time: string) => string;
+  waiting: string;
+  noConnection: string;
+  stillWaiting: string;
+  checkAgain: string;
+  paid: string;
+  paidLine: (look: string) => string;
+  /** A payment after the order ended: it gives no look, and the creator sends it back. */
+  paidLate: string;
+  /** The order ended: a payment sent in time still counts. */
+  expired: string;
+  /** The price's sources ("CoinGecko", "Kraken", "KuCoin"). "Powered by CoinGecko" is added when CoinGecko is one and the words leave it out. */
+  prices: (sources: readonly string[]) => string;
+};
+
+const HATS: Record<Hat, string> = { cap: "with a cap", beanie: "with a beanie", crown: "with a crown", tophat: "with a top hat" };
+const spaced = (slot: string) => slot.replace(/-/g, " ");
+
+/** CoinGecko's words: its API terms ask for them wherever its price shows. */
+export const COINGECKO_CREDIT = "Powered by CoinGecko";
+
+export const SHOP_WORDS: ShopWords = {
+  title: "Looks",
+  close: "Close",
+  kinds: "Kinds of looks",
+  outfits: "Outfits",
+  slotTab: (slot) => spaced(slot.charAt(0).toUpperCase() + slot.slice(1)),
+  slotPlain: (slot) => `No ${spaced(slot)}`,
+  outfitLine: (hat) => (hat ? HATS[hat] : "colour only"),
+  itemLine: (slot) => spaced(slot),
+  free: "free",
+  yours: "yours",
+  wear: "Wear",
+  wearing: "Wearing",
+  buy: (price) => `Buy ${price}`,
+  looksNote: "Looks never change play. Pay in Nano, straight to the creator.",
+  signInFirst: "Sign in first to buy a look.",
+
+  buyTitle: (look) => `Buy ${look}`,
+  making: "Making your order…",
+  orderFailed: "The order did not start. Try again.",
+  refusal: (text) => text,
+  back: "Back",
+  signIn: "Sign in",
+
+  lookLine: () => "It never changes play.",
+  amount: (xno) => `${xno} XNO`,
+  usd: (usd) => `= ${usd}`,
+  sendExactly: "Send exactly",
+  testNote: "Nothing can be paid here.",
+  walletOff: "Wallet off: test mode",
+  wallet: "Open wallet",
+  qrLabel: (xno) => `QR code to pay ${xno} XNO`,
+  byHand: "Enter by hand",
+  amountLabel: "Amount",
+  toLabel: "To",
+  byHandNote: "Another amount does not match.",
+  copy: "Copy",
+  copied: "Copied",
+  copyFailed: "Copy failed",
+  endsIn: (time) => `Ends in ${time}.`,
+  waiting: "Waiting for payment…",
+  noConnection: "No connection. Trying again…",
+  stillWaiting: "Still waiting. Already paid? Press Check again.",
+  checkAgain: "Check again",
+  paid: "Paid. Thank you!",
+  paidLine: (look) => `${look} is yours.`,
+  paidLate: "Paid after the order ended, so no look. The creator sends it back.",
+  expired: "This order ended. Paid in time? Wait here: it still counts.",
+  prices: (sources) => {
+    const others = sources.filter((s) => s !== "CoinGecko");
+    const credit = sources.includes("CoinGecko") ? ` ${COINGECKO_CREDIT}.` : "";
+    return others.length ? `Price: ${others.join(", ")}.${credit}` : credit.trim();
+  },
+};
+
+/** The game's words over the defaults. A key the game leaves out, or gives as undefined, keeps its default. */
+export function shopWords(over?: Partial<ShopWords>): ShopWords {
+  const out = { ...SHOP_WORDS };
+  for (const [k, v] of Object.entries(over ?? {})) if (v !== undefined && k in SHOP_WORDS) (out as Record<string, unknown>)[k] = v;
+  return out;
+}
+
+/** The price's line: the game's words, with "Powered by CoinGecko" added when CoinGecko is a source and the words leave it out. */
+export function priceLine(words: ShopWords, sources: readonly string[]): string {
+  const line = words.prices(sources).trim();
+  if (!sources.includes("CoinGecko") || line.includes(COINGECKO_CREDIT)) return line;
+  return `${line}${line ? " " : ""}${COINGECKO_CREDIT}.`;
+}