@nano133/nanoterra 0.3.2 → 0.4.0

package/src/admin/panel/orders.ts

@@ -0,0 +1,172 @@
+// The Orders tab of /admin: every order of the game (the summary gives the newest 500), a filter by status with its count, a search (a look, a player's or a
+// payer's address, a block), and "Check payments now" when the game gave a check. A row is a card on a phone and a line of a table on a wide screen. A
+// payment that came after its order ran out says what to do: the game holds no key, so the owner sends the amount back by hand.
+
+import type { AdminOrder, AdminSummary } from "../store.js";
+import type { Api } from "./api.js";
+import { ago, copyKey, h, plural, shortAddress } from "./dom.js";
+import { icon } from "./icons.js";
+
+export type OrderFilter = "all" | "open" | "paid" | "expired" | "paid_late";
+
+/** How many orders the list draws at first, and how many more each "Show more" adds. */
+export const ORDERS_PAGE = 20;
+
+export const STATUS_WORDS: Record<string, string> = { open: "Open", paid: "Paid", expired: "Expired", paid_late: "Paid late" };
+const FILTERS: readonly OrderFilter[] = ["all", "paid", "open", "paid_late", "expired"];
+
+const when = (ms: number | null) => (ms ? new Date(ms).toLocaleString() : "");
+/** "A1B2C3D4…E5F6A7" */
+const shortHash = (hash: string) => (hash.length > 16 ? `${hash.slice(0, 8)}…${hash.slice(-6)}` : hash);
+
+/** Whether an order matches a search: its look's name or id, the player's or the payer's address, or its block. Upper or lower case does not matter. Pure. */
+export function orderMatches(o: AdminOrder, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  return [o.look, o.lookId, o.player, o.payer ?? "", o.hash ?? ""].some((v) => v.toLowerCase().includes(q));
+}
+
+/** A status as a coloured badge. */
+export const badge = (status: string) => h("span", { class: `badge badge-${status}` }, STATUS_WORDS[status] ?? status);
+
+/** One order: a card on a phone, a line of the table on a wide screen. `colourOf` gives the look's body colour for its dot, when the game still has the look. */
+export function orderRow(o: AdminOrder, colourOf: (lookId: string) => string | null, compact = false): HTMLElement {
+  const dot = h("span", { class: "look-dot", "aria-hidden": "true" });
+  const c = colourOf(o.lookId);
+  if (c) dot.style.setProperty("--swatch", c);
+  const row = h(
+    "article",
+    { class: `order order-${o.status}${compact ? " is-compact" : ""}` },
+    h("div", { class: "order-look" }, dot, h("strong", {}, o.look)),
+    h("div", { class: "order-status" }, badge(o.status)),
+    h("div", { class: "order-amount" }, h("strong", {}, `${o.xno} XNO`), h("span", { class: "fine" }, `$${o.usd}`)),
+    h("div", { class: "order-player" }, h("span", { class: "fine cell-label" }, "Player "), h("code", { title: o.player }, shortAddress(o.player)), compact ? null : copyKey(o.player, "Copy the player's address", icon("copy", 14))),
+    compact
+      ? h("div", { class: "order-when" }, o.paidAt ? h("span", { title: when(o.paidAt) }, `Paid ${ago(o.paidAt)}`) : h("span", { title: when(o.createdAt) }, `Made ${ago(o.createdAt)}`))
+      : h(
+          "div",
+          { class: "order-when" },
+          h("span", { title: when(o.createdAt) }, `Made ${ago(o.createdAt)}`),
+          o.paidAt ? h("span", { class: "fine", title: when(o.paidAt) }, `Paid ${ago(o.paidAt)}${o.payer && o.payer !== o.player ? ` from ${shortAddress(o.payer)}` : ""}`) : null,
+        ),
+  );
+  if (compact) return row;
+  if (o.status === "paid_late" && o.payer)
+    row.append(h("div", { class: "late-note order-extra" }, icon("back", 16), h("span", {}, "Send this amount back by hand to ", h("code", {}, o.payer), ". The game holds no key, so it cannot send it."), copyKey(o.payer, "Copy the address to send it back to", icon("copy", 14))));
+  if (o.hash) row.append(h("div", { class: "fine order-extra order-hash" }, h("span", {}, "Block "), h("code", { title: o.hash }, shortHash(o.hash)), copyKey(o.hash, "Copy the block hash", icon("copy", 14))));
+  return row;
+}
+
+export type OrdersView = {
+  el: HTMLElement;
+  update(s: AdminSummary): void;
+  /** Shows only one status (a press on a number of the Overview does it). */
+  setFilter(f: OrderFilter): void;
+};
+
+/**
+ * The tab's content, made once: its filter, its search and its check keep their state when the summary is read again. `colourOf` gives a look's body colour;
+ * `onSummary` hears the summary that "Check payments now" answers with (the panel draws it everywhere).
+ */
+export function ordersView(api: Api, colourOf: (lookId: string) => string | null, onSummary: (s: AdminSummary) => void): OrdersView {
+  let s: AdminSummary | null = null;
+  let filter: OrderFilter = "all";
+  let query = "";
+  let shown = ORDERS_PAGE;
+
+  const check = h("button", { class: "btn btn-primary", type: "button" }, icon("refresh", 18), "Check payments now");
+  const checkNote = h("span", { class: "fine", role: "status" });
+  check.addEventListener("click", async () => {
+    check.disabled = true;
+    checkNote.textContent = "Checking…";
+    try {
+      const r = await api.post<{ scan: { scanned: boolean; settled: unknown[]; error?: string }; summary: AdminSummary }>("/check");
+      checkNote.textContent = !r.scan?.scanned ? "The check did not finish. Try again in a moment." : r.scan.settled.length ? `Checked: ${plural(r.scan.settled.length, "payment")} found.` : "Checked: no new payment.";
+      onSummary(r.summary);
+    } catch (e) {
+      checkNote.textContent = e instanceof Error ? e.message : "The check failed.";
+    } finally {
+      check.disabled = false;
+    }
+  });
+
+  const seg = h("div", { class: "seg tabs", role: "group", "aria-label": "Show orders" });
+  const search = h("input", { class: "input search-input", type: "search", placeholder: "Look, address or block", "aria-label": "Search the orders", autocomplete: "off", spellcheck: false });
+  search.addEventListener("input", () => {
+    query = search.value;
+    shown = ORDERS_PAGE;
+    drawList();
+  });
+  const count = h("p", { class: "fine list-count", role: "status", "aria-live": "polite" });
+  const list = h("div", { class: "orders" });
+  // The check key is there only when the game gave a check (the summary's canCheck).
+  const keys = h("div", { class: "card-keys" });
+  const head = h("div", { class: "card-head" }, h("div", { class: "card-title" }, h("h2", {}, "Orders"), h("p", { class: "fine card-sub" }, "Every order your game made, newest first.")), keys);
+  const el = h(
+    "section",
+    { class: "admin-card orders-card" },
+    head,
+    h("div", { class: "toolbar" }, seg, h("label", { class: "search" }, icon("search", 18), search)),
+    count,
+    h("div", { class: "order-table-head", "aria-hidden": "true" }, h("span", {}, "Look"), h("span", {}, "Status"), h("span", {}, "Amount"), h("span", {}, "Player"), h("span", {}, "When")),
+    list,
+  );
+
+  function drawFilter() {
+    if (!s) return;
+    const sum = s;
+    seg.replaceChildren(
+      ...FILTERS.map((key) => {
+        const n = key === "all" ? sum.orders.length : sum.counts[key];
+        return h(
+          "button",
+          {
+            class: `seg-btn tab${filter === key ? " is-on tab-on" : ""}${key === "paid_late" && n > 0 ? " is-alert" : ""}`,
+            type: "button",
+            "aria-pressed": filter === key ? "true" : "false",
+            onclick: () => {
+              filter = key;
+              shown = ORDERS_PAGE;
+              drawFilter();
+              drawList();
+            },
+          },
+          `${key === "all" ? "All" : STATUS_WORDS[key]} (${n})`,
+        );
+      }),
+    );
+  }
+
+  function drawList() {
+    if (!s) return;
+    const rows = s.orders.filter((o) => (filter === "all" || o.status === filter) && orderMatches(o, query));
+    const total = s.orders.filter((o) => filter === "all" || o.status === filter).length;
+    count.textContent = query.trim() ? `${plural(rows.length, "order")} of ${total} match “${query.trim()}”.` : "";
+    count.hidden = !query.trim();
+    list.replaceChildren(...rows.slice(0, shown).map((o) => orderRow(o, colourOf)));
+    if (!rows.length) list.append(h("p", { class: "empty" }, query.trim() ? "No order matches your search." : "No orders here yet."));
+    if (rows.length > shown) {
+      const more = Math.min(ORDERS_PAGE, rows.length - shown);
+      list.append(
+        h("button", { class: "btn more-key", type: "button", onclick: () => ((shown += ORDERS_PAGE), drawList()) }, `Show ${more} more`, rows.length - shown > more ? h("span", { class: "fine" }, `of ${rows.length - shown}`) : null),
+      );
+    }
+  }
+
+  return {
+    el,
+    update(next) {
+      s = next;
+      if (next.canCheck === false) keys.replaceChildren();
+      else if (check.parentNode !== keys) keys.replaceChildren(check, checkNote);
+      drawFilter();
+      drawList();
+    },
+    setFilter(f) {
+      filter = f;
+      shown = ORDERS_PAGE;
+      drawFilter();
+      drawList();
+    },
+  };
+}

package/src/admin/panel/overview.ts

@@ -0,0 +1,134 @@
+// The Overview tab of /admin: the game at a glance. The best-selling looks with their share of the money, the last five orders, the two game switches as On or
+// Off, and the shelf in numbers; each part has a key to its own tab. A game with no sale yet gets three first steps instead of empty lists.
+
+import type { Look } from "../../looks/look.js";
+import { priceText } from "../../looks/ladder.js";
+import type { AdminSummary } from "../store.js";
+import { SWITCHES, stateOf, type GameState } from "../switches.js";
+import { dollars, h, plural } from "./dom.js";
+import { icon } from "./icons.js";
+import { orderRow, type OrderFilter } from "./orders.js";
+import { shelfStats } from "./shelfData.js";
+import type { TabId } from "./tabs.js";
+
+/** A best seller: a look id, its name, its paid orders and their cents, its owners. */
+export type BestSeller = { id: string; name: string; paid: number; cents: number; owners: number };
+
+/** The looks that sold, best first (by money, then by owners), at most `n`. A look that is no longer in looks.json keeps the name its orders give. Pure. */
+export function bestSellers(s: Pick<AdminSummary, "orders" | "players">, looks: readonly Look[], n = 5): BestSeller[] {
+  const names = new Map<string, string>();
+  for (const o of s.orders) names.set(o.lookId, o.look);
+  for (const l of looks) names.set(l.id, l.name);
+  return [...shelfStats(s.orders, s.players)]
+    .filter(([, st]) => st.paid > 0)
+    .map(([id, st]) => ({ id, name: names.get(id) ?? id, paid: st.paid, cents: st.paidCents, owners: st.owners }))
+    .sort((a, b) => b.cents - a.cents || b.owners - a.owners || a.name.localeCompare(b.name))
+    .slice(0, n);
+}
+
+export type OverviewView = {
+  el: HTMLElement;
+  update(s: AdminSummary): void;
+  /** The two switches as they are now (null: they could not be read). */
+  setGame(state: GameState | null): void;
+};
+
+export function overviewView(looks: readonly Look[], colourOf: (lookId: string) => string | null, go: (tab: TabId, filter?: OrderFilter) => void): OverviewView {
+  let game: GameState | null = null;
+  const sellers = h("section", { class: "admin-card best-card", "aria-labelledby": "n133-best-title" });
+  const recent = h("section", { class: "admin-card recent-card", "aria-labelledby": "n133-recent-title" });
+  const gameBox = h("section", { class: "admin-card glance-card", "aria-labelledby": "n133-glance-game" });
+  const shelfBox = h("section", { class: "admin-card glance-card", "aria-labelledby": "n133-glance-shelf" });
+  const start = h("section", { class: "admin-card start-card", "aria-labelledby": "n133-start-title" });
+  const main = h("div", { class: "overview-main" }, start, sellers, recent);
+  const side = h("div", { class: "overview-side" }, gameBox, shelfBox);
+  const el = h("div", { class: "overview" }, main, side);
+
+  const linkKey = (words: string, to: () => void) => h("button", { class: "btn btn-small btn-quiet link-key", type: "button", onclick: to }, words, h("span", { "aria-hidden": "true" }, "→"));
+
+  function drawGame() {
+    const rows = (["character", "signin"] as const).map((id) => {
+      const on = game ? stateOf(id, game) : null;
+      return h("li", {}, h("span", {}, SWITCHES[id].title), on === null ? h("span", { class: "pill" }, "Unknown") : h("span", { class: `pill ${on ? "pill-on" : "pill-off"}` }, on ? "On" : "Off"));
+    });
+    gameBox.replaceChildren(
+      h("div", { class: "card-head" }, h("h2", { id: "n133-glance-game" }, "Game switches"), linkKey("Change", () => go("settings"))),
+      game ? h("ul", { class: "glance-list" }, ...rows) : h("p", { class: "fine" }, "The two switches could not be read. Reload the page to try again."),
+    );
+  }
+
+  function drawShelf() {
+    const sale = looks.filter((l) => l.priceUsd > 0);
+    const prices = sale.map((l) => l.priceUsd);
+    const range = prices.length ? (Math.min(...prices) === Math.max(...prices) ? priceText(prices[0]) : `${priceText(Math.min(...prices))} to ${priceText(Math.max(...prices))}`) : "none";
+    shelfBox.replaceChildren(
+      h("div", { class: "card-head" }, h("h2", { id: "n133-glance-shelf" }, "Shelf"), linkKey("Open", () => go("cosmetics"))),
+      h(
+        "ul",
+        { class: "glance-list" },
+        h("li", {}, h("span", {}, "Looks"), h("strong", {}, String(looks.length))),
+        h("li", {}, h("span", {}, "For sale"), h("strong", {}, String(sale.length))),
+        h("li", {}, h("span", {}, "Prices"), h("strong", {}, range)),
+      ),
+    );
+  }
+
+  drawGame();
+  drawShelf();
+
+  return {
+    el,
+    setGame(state) {
+      game = state;
+      drawGame();
+    },
+    update(s) {
+      const best = bestSellers(s, looks);
+      const total = best.length ? [...shelfStats(s.orders, s.players).values()].reduce((n, x) => n + x.paidCents, 0) : 0;
+      start.hidden = s.orders.length > 0;
+      start.replaceChildren(
+        h("div", { class: "start-icon", "aria-hidden": "true" }, icon("sparkle", 28)),
+        h("h2", { id: "n133-start-title" }, "No sales yet"),
+        h("p", { class: "fine" }, "When a player buys a look, the money and the order show here. Three things to do first:"),
+        h(
+          "ol",
+          { class: "start-steps" },
+          h("li", {}, h("strong", {}, "Check your looks and prices."), " ", linkKey("Open the shelf", () => go("cosmetics"))),
+          h("li", {}, h("strong", {}, "Choose the two game switches."), " ", linkKey("Open the settings", () => go("settings"))),
+          h("li", {}, h("strong", {}, "Share your game's address"), " with your players."),
+        ),
+      );
+
+      sellers.hidden = !best.length;
+      sellers.replaceChildren(
+        h("div", { class: "card-head" }, h("h2", { id: "n133-best-title" }, "Best sellers"), linkKey("All looks", () => go("cosmetics"))),
+        h(
+          "ol",
+          { class: "best-list" },
+          ...best.map((b, i) => {
+            const share = total ? Math.round((b.cents / total) * 100) : 0;
+            const dot = h("span", { class: "look-dot", "aria-hidden": "true" });
+            const c = colourOf(b.id);
+            if (c) dot.style.setProperty("--swatch", c);
+            const bar = h("div", { class: "share-bar" });
+            bar.style.setProperty("--share", `${share}%`);
+            return h(
+              "li",
+              {},
+              h("span", { class: "best-rank" }, String(i + 1)),
+              dot,
+              h("div", { class: "best-main" }, h("div", { class: "best-top" }, h("strong", {}, b.name), h("span", { class: "best-money" }, dollars(b.cents))), h("div", { class: "share", title: `${share}% of the money from sales` }, bar, h("span", { class: "fine" }, `${plural(b.paid, "sale")} · ${share}%`))),
+            );
+          }),
+        ),
+      );
+
+      const last = s.orders.slice(0, 5);
+      recent.hidden = !last.length;
+      recent.replaceChildren(
+        h("div", { class: "card-head" }, h("h2", { id: "n133-recent-title" }, "Recent orders"), linkKey("See all orders", () => go("orders", "all"))),
+        h("div", { class: "orders is-compact" }, ...last.map((o) => orderRow(o, colourOf, true))),
+      );
+    },
+  };
+}

package/src/admin/panel/players.ts

@@ -0,0 +1,79 @@
+// The Players tab of /admin: each player who owns a look that a paid order gave them, with the looks as chips, and a search (an address or a look). It shows
+// only what the summary gives: the player's address and their looks.
+
+import type { AdminPlayer, AdminSummary } from "../store.js";
+import { copyKey, h, plural, shortAddress } from "./dom.js";
+import { icon } from "./icons.js";
+
+/** Whether a player matches a search: their address or the name or id of a look they own. Pure. */
+export function playerMatches(p: AdminPlayer, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  return p.player.toLowerCase().includes(q) || p.looks.some((l) => l.name.toLowerCase().includes(q) || l.id.toLowerCase().includes(q));
+}
+
+/** A colour for a player's round mark, from their address: the same address always has the same colour. */
+function hueOf(address: string): number {
+  let n = 0;
+  for (const ch of address.slice(5)) n = (n * 31 + ch.charCodeAt(0)) % 360;
+  return n;
+}
+
+export function playersView(colourOf: (lookId: string) => string | null): { el: HTMLElement; update(s: AdminSummary): void } {
+  let s: AdminSummary | null = null;
+  let query = "";
+  const search = h("input", { class: "input search-input", type: "search", placeholder: "Address or look", "aria-label": "Search the players", autocomplete: "off", spellcheck: false });
+  search.addEventListener("input", () => {
+    query = search.value;
+    draw();
+  });
+  const sub = h("p", { class: "fine card-sub" });
+  const list = h("div", { class: "players" });
+  const tools = h("div", { class: "toolbar" }, h("label", { class: "search" }, icon("search", 18), search));
+  const el = h("section", { class: "admin-card players-card" }, h("div", { class: "card-head" }, h("div", { class: "card-title" }, h("h2", {}, "Players who own a look"), sub)), tools, list);
+
+  function draw() {
+    if (!s) return;
+    const owned = s.players.reduce((n, p) => n + p.looks.length, 0);
+    sub.textContent = s.players.length ? `${plural(s.players.length, "player")} own ${plural(owned, "look")} that a paid order gave them.` : "A player shows here when a paid order gives them a look.";
+    tools.hidden = s.players.length < 2;
+    const rows = s.players.filter((p) => playerMatches(p, query));
+    list.replaceChildren(
+      ...rows.map((p) => {
+        const mark = h("span", { class: "player-mark", "aria-hidden": "true" });
+        mark.style.setProperty("--hue", String(hueOf(p.player)));
+        return h(
+          "article",
+          { class: "player" },
+          mark,
+          h(
+            "div",
+            { class: "player-main" },
+            h("div", { class: "player-id" }, h("code", { title: p.player }, shortAddress(p.player)), copyKey(p.player, "Copy the player's address", icon("copy", 14))),
+            h(
+              "ul",
+              { class: "look-chips", "aria-label": "Looks they own" },
+              ...p.looks.map((l) => {
+                const dot = h("span", { class: "look-dot", "aria-hidden": "true" });
+                const c = colourOf(l.id);
+                if (c) dot.style.setProperty("--swatch", c);
+                return h("li", { class: "look-chip" }, dot, l.name);
+              }),
+            ),
+          ),
+          h("span", { class: "player-count" }, plural(p.looks.length, "look")),
+        );
+      }),
+    );
+    if (!s.players.length) list.append(h("p", { class: "empty" }, "Nobody owns a paid look yet."));
+    else if (!rows.length) list.append(h("p", { class: "empty" }, "No player matches your search."));
+  }
+
+  return {
+    el,
+    update(next) {
+      s = next;
+      draw();
+    },
+  };
+}