@nano133/nanoterra 0.7.0 → 0.8.0

package/src/friends/panel/mount.ts

@@ -32,13 +32,13 @@ export type FriendsMountOptions = {
   /**
    * The player chose to join a friend. "nanoterra": `target` is the friend's https address (the kit has asked the player already) and there is no
    * `friend` (the window sends no name); with no `onJoin` the page goes there. "own": `target` is the `where` of the friend's invite, for the game to
-   * move the player, and `friend` names them (with no `onJoin`, there is no Join key).
+   * move the player, and `friend` names them (with no `onJoin`, there is no Join key and no Invite key: an invite would lead nowhere).
    */
   onJoin?: (target: string, friend?: { name: string }) => void;
   /** The `fetch` to use (default: the page's). */
   fetch?: typeof fetch;
-  /** Asks the player a yes or no question (default: `window.confirm`). */
-  confirm?: (question: string) => boolean;
+  /** Asks the player a yes or no question (default: a question in the panel, with a key for each answer; never a browser dialog). */
+  confirm?: (question: string) => boolean | Promise<boolean>;
 };
 
 export type MountedFriends = {
@@ -60,7 +60,6 @@ export function mountFriends(root: HTMLElement, options: FriendsMountOptions): M
   if (options.mode !== "nanoterra" && options.mode !== "own") return NOTHING;
   const n = ++mounts;
   const origin = (options.origin ?? "https://nano133.com").replace(/\/+$/, "");
-  const ask = options.confirm ?? ((q: string) => window.confirm(q));
   let where = options.where === undefined ? null : whereText(options.where);
   let isOpen = false;
   let destroyed = false;
@@ -73,7 +72,12 @@ export function mountFriends(root: HTMLElement, options: FriendsMountOptions): M
   const title = h("h2", { class: "n133f-title", id: `n133f-title-${n}` }, "Friends");
   const closeKey = h("button", { class: "n133f-close", type: "button", "aria-label": "Close friends" }, icon("close", 20));
   const body = h("div", { class: "n133f-body" });
-  const panel = h("section", { class: `n133f-panel n133f-${options.mode}`, id: `n133f-panel-${n}`, role: "dialog", "aria-labelledby": `n133f-title-${n}`, "data-open": "false" }, h("header", { class: "n133f-head" }, title, closeKey), body);
+  const question = h("p", { class: "n133f-ask-q", id: `n133f-ask-${n}` });
+  const yesKey = h("button", { class: "n133f-btn n133f-primary", type: "button" });
+  const noKey = h("button", { class: "n133f-btn", type: "button" }, "Cancel");
+  const askBox = h("div", { class: "n133f-ask", role: "alertdialog", "aria-labelledby": `n133f-ask-${n}` }, question, h("div", { class: "n133f-ask-keys" }, yesKey, noKey));
+  askBox.hidden = true;
+  const panel = h("section", { class: `n133f-panel n133f-${options.mode}`, id: `n133f-panel-${n}`, role: "dialog", "aria-labelledby": `n133f-title-${n}`, "data-open": "false" }, h("header", { class: "n133f-head" }, title, closeKey), askBox, body);
   const wrap = h("div", { class: "n133-friends" }, key, panel);
   root.append(wrap);
 
@@ -99,6 +103,7 @@ export function mountFriends(root: HTMLElement, options: FriendsMountOptions): M
   };
   const close = () => {
     if (destroyed || !isOpen) return;
+    answer?.(false);
     isOpen = false;
     panel.dataset.open = "false";
     key.setAttribute("aria-expanded", "false");
@@ -107,8 +112,34 @@ export function mountFriends(root: HTMLElement, options: FriendsMountOptions): M
   };
   key.addEventListener("click", () => (isOpen ? close() : open()));
   closeKey.addEventListener("click", close);
+
+  /** The question in the panel: one at a time (a new one answers the old with no), and closing the panel answers no. */
+  let answer: ((yes: boolean) => void) | null = null;
+  const askInPanel = (q: string, yesWord: string) =>
+    new Promise<boolean>((resolve) => {
+      answer?.(false);
+      question.textContent = q;
+      yesKey.textContent = yesWord;
+      askBox.hidden = false;
+      answer = (yes) => {
+        answer = null;
+        askBox.hidden = true;
+        resolve(yes);
+        if (isOpen && !destroyed) closeKey.focus();
+      };
+      open();
+      yesKey.focus();
+    });
+  yesKey.addEventListener("click", () => answer?.(true));
+  noKey.addEventListener("click", () => answer?.(false));
+  const ask = (q: string, yesWord: string): Promise<boolean> => (options.confirm ? Promise.resolve(options.confirm(q)) : askInPanel(q, yesWord));
+  cleanup.push(() => answer?.(false));
+
   const onKey = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && isOpen) close();
+    if (e.key !== "Escape" || !isOpen) return;
+    // Escape answers an open question first, then closes the panel.
+    if (answer) answer(false);
+    else close();
   };
   document.addEventListener("keydown", onKey);
   cleanup.push(() => document.removeEventListener("keydown", onKey));
@@ -165,9 +196,12 @@ export function mountFriends(root: HTMLElement, options: FriendsMountOptions): M
         frame.style.height = `${room > 0 ? Math.min(m.height, room) : m.height}px`;
       } else if (m.type === "badge") setBadge(m);
       else if (m.type === "join") {
-        if (!ask("Leave this game to join your friend?")) return;
-        if (options.onJoin) options.onJoin(m.url);
-        else window.location.assign(m.url);
+        const url = m.url;
+        void ask("Leave this game to join your friend?", "Join").then((yes) => {
+          if (!yes || destroyed) return;
+          if (options.onJoin) options.onJoin(url);
+          else window.location.assign(url);
+        });
       }
       // "signin": the window needs a tap (Storage Access) inside itself. The panel stays as it is; the kit does nothing else.
     };
@@ -198,7 +232,7 @@ export function mountFriends(root: HTMLElement, options: FriendsMountOptions): M
 }
 
 /** The game's own list in `body`. */
-function ownList(body: HTMLElement, options: FriendsMountOptions, whereNow: () => string | null, setBadge: (n: { requests: number; online: number }) => void, ask: (q: string) => boolean) {
+function ownList(body: HTMLElement, options: FriendsMountOptions, whereNow: () => string | null, setBadge: (n: { requests: number; online: number }) => void, ask: (q: string, yesWord: string) => Promise<boolean>) {
   const api: Api = createApi(options.base ?? "/friends", options.fetch);
   const lease = Array.from(globalThis.crypto.getRandomValues(new Uint8Array(16)), (b) => b.toString(16).padStart(2, "0")).join("");
   const status = h("p", { class: "n133f-status", role: "status", "aria-live": "polite" });
@@ -253,9 +287,9 @@ function ownList(body: HTMLElement, options: FriendsMountOptions, whereNow: () =
     if (p.state === "friend") {
       if (p.invite && options.onJoin) keys.push(btn("Join", () => options.onJoin!(p.invite!.where, { name: p.name }), "n133f-primary"));
       const here = whereNow();
-      if (here) keys.push(btn("Invite", () => void act({ op: "invite", edge: p.edge, where: here }, `Invited ${p.name}.`)));
-      keys.push(btn("Remove", () => ask(`Remove ${p.name} from your friends?`) && void act({ op: "remove", edge: p.edge })));
-      keys.push(btn("Block", () => ask(`Block ${p.name}? They will not see you or be able to ask you again.`) && void act({ op: "block", edge: p.edge }), "n133f-quiet"));
+      if (here && options.onJoin) keys.push(btn("Invite", () => void act({ op: "invite", edge: p.edge, where: here }, `Invited ${p.name}.`)));
+      keys.push(btn("Remove", () => void ask(`Remove ${p.name} from your friends?`, "Remove").then((yes) => (yes ? act({ op: "remove", edge: p.edge }) : undefined))));
+      keys.push(btn("Block", () => void ask(`Block ${p.name}? They will not see you or be able to ask you again.`, "Block").then((yes) => (yes ? act({ op: "block", edge: p.edge }) : undefined)), "n133f-quiet"));
     }
     if (p.state === "outgoing") keys.push(btn("Cancel", () => void act({ op: "decline", edge: p.edge })));
     if (p.state === "blocked") keys.push(btn("Unblock", () => void act({ op: "unblock", edge: p.edge })));

package/src/friends/panel/style.css

@@ -202,6 +202,32 @@
   outline-offset: 2px;
 }
 
+/* The panel's own question (Remove, Block, Join): never a browser dialog. */
+.n133-friends .n133f-ask {
+  flex: 0 0 auto;
+  margin: 12px 16px 0;
+  padding: 12px;
+  border: 1px solid var(--gem-dark);
+  border-radius: 14px;
+  background: var(--paper);
+}
+
+.n133-friends .n133f-ask[hidden] {
+  display: none;
+}
+
+.n133-friends .n133f-ask-q {
+  margin: 0 0 10px;
+  font-weight: 650;
+  overflow-wrap: anywhere;
+}
+
+.n133-friends .n133f-ask-keys {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
 .n133-friends .n133f-status:empty {
   display: none;
 }

package/src/options/common.ts

@@ -0,0 +1,65 @@
+// The settings most games have, ready to opt into by key: `common("masterVolume", "musicVolume", "quality")`. They are plain defs: the game reads them and
+// does what they say (the kit plays no sound and draws no frame). A game changes one by spreading it: `{ ...COMMON_OPTIONS.quality, default: "low" }`.
+// The words and ranges follow nano133's island and Echo Island (Wes, 2026-10-30: Sound effects and Music sliders; the island's Settings rows).
+
+import type { OptionDef, RangeDef } from "./core.js";
+
+const volume = (key: string, label: string, help?: string): RangeDef => ({ kind: "range", key, label, ...(help ? { help } : {}), tab: "basic", group: "Sound", min: 0, max: 100, step: 5, unit: "%", default: 100 });
+
+export const COMMON_OPTIONS = {
+  /** 0 to 100 (%), every sound. A game multiplies it into the others; the square of it is a fair loudness curve (`level ** 2`). */
+  masterVolume: volume("masterVolume", "Volume"),
+  /** 0 to 100 (%), the music only. */
+  musicVolume: volume("musicVolume", "Music"),
+  /** 0 to 100 (%), every sound but the music. */
+  effectsVolume: volume("effectsVolume", "Sound effects"),
+  /** 10 to 100, how fast a drag or the mouse turns the camera; 50 is the game's own speed. */
+  cameraSensitivity: { kind: "range", key: "cameraSensitivity", label: "Camera speed", tab: "basic", group: "Camera", min: 10, max: 100, step: 5, default: 50 },
+  /** Up and down of the camera swapped. */
+  invertLook: { kind: "toggle", key: "invertLook", label: "Invert look", help: "Up and down are swapped", tab: "advanced", group: "Camera", default: false },
+  /** "left" or "right": the side of a touch screen the move stick is on (the camera drag is on the other). Shown on a phone and a tablet only. */
+  stickSide: {
+    kind: "choice",
+    key: "stickSide",
+    label: "Move stick",
+    help: "The side of the screen that moves you",
+    tab: "basic",
+    group: "Controls",
+    choices: [
+      { value: "left", label: "Left" },
+      { value: "right", label: "Right" },
+    ],
+    default: "left",
+    devices: ["phone", "tablet"],
+  },
+  /** Fewer shakes, swings and flashes. On by default when the device asks for less motion. */
+  reducedMotion: { kind: "toggle", key: "reducedMotion", label: "Less motion", help: "Fewer shakes, swings and flashes", tab: "advanced", group: "Comfort", default: { default: false, reducedMotion: true } },
+  /** "low", "medium" or "high": the game decides what each draws. Medium on a phone. */
+  quality: {
+    kind: "choice",
+    key: "quality",
+    label: "Quality",
+    tab: "advanced",
+    group: "Graphics",
+    choices: [
+      { value: "low", label: "Low" },
+      { value: "medium", label: "Medium" },
+      { value: "high", label: "High" },
+    ],
+    default: { phone: "medium", default: "high" },
+  },
+  /** A small frames-a-second counter on the screen. */
+  showFps: { kind: "toggle", key: "showFps", label: "Show frame rate", tab: "advanced", group: "Graphics", default: false },
+} satisfies Record<string, OptionDef>;
+
+export type CommonKey = keyof typeof COMMON_OPTIONS;
+export const COMMON_KEYS = Object.keys(COMMON_OPTIONS) as CommonKey[];
+
+/** The common defs for these keys, in the order given (a copy: change it freely). */
+export function common(...keys: CommonKey[]): OptionDef[] {
+  return keys.map((k) => {
+    const def = COMMON_OPTIONS[k] as OptionDef | undefined;
+    if (!def) throw new TypeError(`common: "${String(k)}" is not a common setting (${COMMON_KEYS.join(", ")})`);
+    return { ...def } as OptionDef;
+  });
+}