@nano133/nanoterra 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.7.1 (2026-10-31)
+
+- **Friends: the panel asks in the panel, never in a browser dialog.** Remove, Block and Join (both modes) showed `window.confirm`; now the question and a key for
+  each answer show at the top of the panel, which opens for it. Escape or closing the panel answers no. The `confirm` option stays, and may return a promise.
+- **Friends, "own": no Invite key without `onJoin`.** A game with no way to join a friend gave an invite that led nowhere.
+
 ## 0.7.0 (2026-10-30)
 
 - **The admin panel has a light and a dark theme** (`/admin/panel`, `/admin/style.css`). A theme key in the top bar (and on the signed-out screen) opens Device,

package/README.md

@@ -812,10 +812,13 @@ for (const c of friendsStoreConformance(async () => ({ store: newEmptyStore(), d
 ```
 
 **The panel in `"own"` mode** reads the view at once, every 20 s while open and every 60 s while closed (for the badge), pulses every 45 s while it has a `where`, and
-sends a leaving pulse when the page goes away. It draws Requests (Accept, Decline), Friends (online and the place, Invite to your `where`, Join an invite when you
+sends a leaving pulse when the page goes away. It draws Requests (Accept, Decline), Friends (online and the place, Invite to your `where` and Join an invite, both only when you
 give `onJoin`, Remove, Block), Sent (Cancel) and Blocked (Unblock), an add-by-name field and the "show friends when I am online" choice. The game's own friends have
 no live connection: only Nanoterra's do.
 
+**Questions.** Remove, Block and (in both modes) Join ask the player first, in the panel itself: the question and a key for each answer; Escape or closing the
+panel answers no. The kit never opens a browser dialog. To ask in your game's own dialog, pass `confirm(question)`, which returns a boolean or a promise of one.
+
 ## Moving from the three old packages
 
 | Before | Now |

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

@@ -12,15 +12,15 @@ 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 = {
     /** Sets where the player is (friends see it). Null: no place. */

package/dist/friends/panel/mount.js

@@ -22,7 +22,6 @@ export function mountFriends(root, options) {
         return NOTHING;
     const n = ++mounts;
     const origin = (options.origin ?? "https://nano133.com").replace(/\/+$/, "");
-    const ask = options.confirm ?? ((q) => window.confirm(q));
     let where = options.where === undefined ? null : whereText(options.where);
     let isOpen = false;
     let destroyed = false;
@@ -34,7 +33,12 @@ export function mountFriends(root, options) {
     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);
     /** The requests (the thing to do) when there are any, else the friends online (another colour). The key's name says both. */
@@ -60,6 +64,7 @@ export function mountFriends(root, options) {
     const close = () => {
         if (destroyed || !isOpen)
             return;
+        answer?.(false);
         isOpen = false;
         panel.dataset.open = "false";
         key.setAttribute("aria-expanded", "false");
@@ -68,8 +73,34 @@ export function mountFriends(root, options) {
     };
     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 = null;
+    const askInPanel = (q, yesWord) => new Promise((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, yesWord) => (options.confirm ? Promise.resolve(options.confirm(q)) : askInPanel(q, yesWord));
+    cleanup.push(() => answer?.(false));
     const onKey = (e) => {
-        if (e.key === "Escape" && isOpen)
+        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);
@@ -132,12 +163,15 @@ export function mountFriends(root, options) {
             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.
         };
@@ -228,10 +262,10 @@ function ownList(body, options, whereNow, setBadge, ask) {
             if (p.invite && options.onJoin)
                 keys.push(btn("Join", () => options.onJoin(p.invite.where, { name: p.name }), "n133f-primary"));
             const here = whereNow();
-            if (here)
+            if (here && options.onJoin)
                 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"));
+            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 })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nano133/nanoterra",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Nanoterra for a creator's game, in one package: the player's sign-in ticket, the player's character (a toon body on the island's skeleton), the looks ladder, the admin and the friends list.",
   "type": "module",
   "main": "dist/index.js",

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;
 }