@nano133/nanoterra 0.6.1 → 0.7.1

package/src/admin/panel/theme.ts

@@ -0,0 +1,179 @@
+// The panel's light and dark themes. The owner picks Light, Dark or Device (the device's own setting, `prefers-color-scheme`, followed live); Device is the
+// default. The choice is kept in this browser only (localStorage, `n133-admin-theme`): no server call, no admin setting. A private window, or a browser that
+// refuses storage, still works: it reads Device and keeps a choice for the life of the page.
+//
+// The resolved theme is set as data-theme="light" | "dark" on the panel's root (style.css reads it), and as data-n133-theme on the page's <html> while the panel
+// is mounted, so the page around the panel can follow it (README, "Light and dark").
+
+import { h } from "./dom.js";
+import { icon, type IconName } from "./icons.js";
+
+export type ThemeChoice = "device" | "light" | "dark";
+export type Theme = "light" | "dark";
+
+/** The localStorage key of the choice. */
+export const THEME_KEY = "n133-admin-theme";
+export const THEME_CHOICES: readonly ThemeChoice[] = ["device", "light", "dark"];
+const QUERY = "(prefers-color-scheme: dark)";
+
+/** The theme a choice gives: Device follows the device's setting. */
+export const resolveTheme = (choice: ThemeChoice, deviceDark: boolean): Theme => (choice === "device" ? (deviceDark ? "dark" : "light") : choice);
+
+const isChoice = (v: unknown): v is ThemeChoice => typeof v === "string" && (THEME_CHOICES as readonly string[]).includes(v);
+
+type Store = Pick<Storage, "getItem" | "setItem">;
+
+/** The page's localStorage, or null where reading it throws (some private windows, a blocked site). */
+function pageStorage(): Store | null {
+  try {
+    return globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** The kept choice; Device when there is none, it is not a choice, or the storage cannot be read. */
+export function readThemeChoice(storage: Store | null = pageStorage()): ThemeChoice {
+  try {
+    const v = storage?.getItem(THEME_KEY);
+    return isChoice(v) ? v : "device";
+  } catch {
+    return "device";
+  }
+}
+
+export type ThemeOptions = {
+  /** Where the choice is kept (default: the page's localStorage). null keeps it only for the life of the page. */
+  storage?: Store | null;
+  /** The device's setting (default: window.matchMedia). */
+  matchMedia?: ((query: string) => Pick<MediaQueryList, "matches" | "addEventListener" | "removeEventListener">) | null;
+  /** The page's root, which gets data-n133-theme (default: document.documentElement). null sets nothing outside the panel. */
+  host?: HTMLElement | null;
+};
+
+export type ThemeControl = {
+  /** What the owner chose. */
+  readonly choice: ThemeChoice;
+  /** The theme drawn now. */
+  readonly resolved: Theme;
+  /** Picks a theme, keeps it in this browser and draws it. */
+  set(choice: ThemeChoice): void;
+  /** Hears every change of the choice or the drawn theme (the device's setting too). Returns the call that stops it. */
+  onChange(listen: (resolved: Theme, choice: ThemeChoice) => void): () => void;
+  /** Stops following the device and takes data-n133-theme off the page. */
+  destroy(): void;
+};
+
+/** Reads the kept choice and draws it on `root` at once (data-theme), and on the page's <html> (data-n133-theme). */
+export function createTheme(root: HTMLElement, options: ThemeOptions = {}): ThemeControl {
+  const storage = options.storage === undefined ? pageStorage() : options.storage;
+  const host = options.host === undefined ? (globalThis.document?.documentElement ?? null) : options.host;
+  let media: ReturnType<NonNullable<ThemeOptions["matchMedia"]>> | null = null;
+  try {
+    const mm = options.matchMedia === undefined ? (typeof globalThis.matchMedia === "function" ? globalThis.matchMedia.bind(globalThis) : null) : options.matchMedia;
+    media = mm ? mm(QUERY) : null;
+  } catch {
+    media = null;
+  }
+  let choice = readThemeChoice(storage);
+  let resolved: Theme = "light";
+  const listeners = new Set<(resolved: Theme, choice: ThemeChoice) => void>();
+
+  function draw() {
+    resolved = resolveTheme(choice, media?.matches === true);
+    root.setAttribute("data-theme", resolved);
+    host?.setAttribute("data-n133-theme", resolved);
+    for (const l of listeners) l(resolved, choice);
+  }
+  const onDevice = () => {
+    if (choice === "device") draw();
+  };
+  media?.addEventListener?.("change", onDevice);
+  draw();
+
+  return {
+    get choice() {
+      return choice;
+    },
+    get resolved() {
+      return resolved;
+    },
+    set(next) {
+      if (!isChoice(next)) return;
+      choice = next;
+      try {
+        storage?.setItem(THEME_KEY, next);
+      } catch {
+        // A full or refused storage: the choice holds for this page only.
+      }
+      draw();
+    },
+    onChange(listen) {
+      listeners.add(listen);
+      return () => listeners.delete(listen);
+    },
+    destroy() {
+      media?.removeEventListener?.("change", onDevice);
+      listeners.clear();
+      host?.removeAttribute("data-n133-theme");
+    },
+  };
+}
+
+const WORDS: Record<ThemeChoice, string> = { device: "Device", light: "Light", dark: "Dark" };
+const ICONS: Record<ThemeChoice, IconName> = { device: "device", light: "sun", dark: "moon" };
+
+/** "Theme: Dark", or "Theme: Device (dark now)". */
+export const themeLabel = (choice: ThemeChoice, resolved: Theme): string => (choice === "device" ? `Theme: Device (${resolved} now)` : `Theme: ${WORDS[choice]}`);
+
+/**
+ * The theme key: a 44 px round key with the choice's icon (a sun, a moon, a half circle for Device). A press opens a small menu of the three choices, each a
+ * 44 px row with its icon and word; the chosen one is pressed (aria-pressed). A choice, Escape or a press outside closes it.
+ */
+export function themeKey(theme: ThemeControl): HTMLElement {
+  const summary = h("summary", { class: "btn btn-quiet theme-summary" });
+  const rows = THEME_CHOICES.map((c) =>
+    h(
+      "button",
+      {
+        class: "theme-choice",
+        type: "button",
+        "data-choice": c,
+        onclick: () => {
+          theme.set(c);
+          box.open = false;
+          summary.focus();
+        },
+      },
+      icon(ICONS[c], 18),
+      WORDS[c],
+    ),
+  );
+  const menu = h("div", { class: "theme-menu", role: "group", "aria-label": "Theme" }, ...rows);
+  const box = h("details", { class: "theme-key" }, summary, menu);
+
+  const outside = (e: Event) => {
+    if (!box.contains(e.target as Node)) box.open = false;
+  };
+  box.addEventListener("toggle", () => {
+    if (box.open) document.addEventListener("pointerdown", outside, true);
+    else document.removeEventListener("pointerdown", outside, true);
+  });
+  box.addEventListener("keydown", (e) => {
+    if ((e as KeyboardEvent).key === "Escape" && box.open) {
+      box.open = false;
+      summary.focus();
+    }
+  });
+
+  const show = (resolved: Theme, choice: ThemeChoice) => {
+    const label = themeLabel(choice, resolved);
+    summary.replaceChildren(icon(ICONS[choice], 20));
+    summary.title = label;
+    summary.setAttribute("aria-label", label);
+    for (const r of rows) r.setAttribute("aria-pressed", String(r.dataset.choice === choice));
+  };
+  show(theme.resolved, theme.choice);
+  theme.onChange(show);
+  return box;
+}

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