@nano133/nanoterra 0.3.2 → 0.4.0

package/dist/admin/panel/orders.d.ts

@@ -0,0 +1,23 @@
+import type { AdminOrder, AdminSummary } from "../store.js";
+import type { Api } from "./api.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 declare const ORDERS_PAGE = 20;
+export declare const STATUS_WORDS: Record<string, string>;
+/** 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 declare function orderMatches(o: AdminOrder, query: string): boolean;
+/** A status as a coloured badge. */
+export declare const badge: (status: string) => HTMLSpanElement;
+/** 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 declare function orderRow(o: AdminOrder, colourOf: (lookId: string) => string | null, compact?: boolean): HTMLElement;
+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 declare function ordersView(api: Api, colourOf: (lookId: string) => string | null, onSummary: (s: AdminSummary) => void): OrdersView;

package/dist/admin/panel/orders.js

@@ -0,0 +1,130 @@
+// 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 { ago, copyKey, h, plural, shortAddress } from "./dom.js";
+import { icon } from "./icons.js";
+/** 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 = { open: "Open", paid: "Paid", expired: "Expired", paid_late: "Paid late" };
+const FILTERS = ["all", "paid", "open", "paid_late", "expired"];
+const when = (ms) => (ms ? new Date(ms).toLocaleString() : "");
+/** "A1B2C3D4…E5F6A7" */
+const shortHash = (hash) => (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, query) {
+    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) => 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, colourOf, compact = false) {
+    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;
+}
+/**
+ * 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, colourOf, onSummary) {
+    let s = null;
+    let filter = "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("/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/dist/admin/panel/overview.d.ts

@@ -0,0 +1,22 @@
+import type { Look } from "../../looks/look.js";
+import type { AdminSummary } from "../store.js";
+import { type GameState } from "../switches.js";
+import { type OrderFilter } from "./orders.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 declare function bestSellers(s: Pick<AdminSummary, "orders" | "players">, looks: readonly Look[], n?: number): BestSeller[];
+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 declare function overviewView(looks: readonly Look[], colourOf: (lookId: string) => string | null, go: (tab: TabId, filter?: OrderFilter) => void): OverviewView;

package/dist/admin/panel/overview.js

@@ -0,0 +1,75 @@
+// 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 { priceText } from "../../looks/ladder.js";
+import { SWITCHES, stateOf } from "../switches.js";
+import { dollars, h, plural } from "./dom.js";
+import { icon } from "./icons.js";
+import { orderRow } from "./orders.js";
+import { shelfStats } from "./shelfData.js";
+/** 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, looks, n = 5) {
+    const names = new Map();
+    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 function overviewView(looks, colourOf, go) {
+    let game = 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, to) => 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"].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/dist/admin/panel/players.d.ts

@@ -0,0 +1,7 @@
+import type { AdminPlayer, AdminSummary } from "../store.js";
+/** Whether a player matches a search: their address or the name or id of a look they own. Pure. */
+export declare function playerMatches(p: AdminPlayer, query: string): boolean;
+export declare function playersView(colourOf: (lookId: string) => string | null): {
+    el: HTMLElement;
+    update(s: AdminSummary): void;
+};

package/dist/admin/panel/players.js

@@ -0,0 +1,61 @@
+// 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 { 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, query) {
+    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) {
+    let n = 0;
+    for (const ch of address.slice(5))
+        n = (n * 31 + ch.charCodeAt(0)) % 360;
+    return n;
+}
+export function playersView(colourOf) {
+    let s = 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();
+        },
+    };
+}

package/dist/admin/panel/shelf.d.ts

@@ -1,5 +1,5 @@
 import { type Look } from "../../looks/look.js";
-import { type ShelfOrder, type ShelfPlayer } from "./shelfData.js";
+import { type LookStats, type ShelfOrder, type ShelfPlayer } from "./shelfData.js";
 export type ShelfData = {
     orders: ShelfOrder[];
     players: ShelfPlayer[];
@@ -14,9 +14,18 @@ export declare function lookPicture(l: Look): Element;
  * `@nano133/nanoterra/character` has `createLookPreview` to make the drawing function.
  */
 export declare function previewPicture(load: () => Promise<(l: Look) => Promise<string | null>>, fallback?: (l: Look) => Element, size?: number): (l: Look) => Element;
+/** The colours the body colour offers in one press (any colour is good: the colour field is next to them). */
+export declare const BODY_COLOURS: readonly ["#4aa8ff", "#3ddc97", "#ffcf5a", "#ff7a3d", "#ff5c8a", "#9b6bff", "#2b2d42", "#f4f1ea"];
+export type ShelfFilter = "all" | "sale" | "free" | "unsold";
+export type ShelfSort = "best" | "price-desc" | "price-asc" | "name" | "file";
+/** Whether a look passes a filter. "Not sold yet": a look for sale that no paid order and no owner has. Pure, for the screen and its tests. */
+export declare function shelfFilter(l: Look, f: ShelfFilter, s: LookStats | undefined): boolean;
+/** The looks in a sort's order (a new list; equal looks keep the file's order). Pure, for the screen and its tests. */
+export declare function shelfSort(ls: readonly Look[], by: ShelfSort, stats: Map<string, LookStats>): Look[];
 /**
  * The screen. `looks` is the game's looks now (its looks.json): the draft starts from them. `update` hands the screen fresh numbers (after the page reloads
- * the summary) and keeps the draft. `picture` draws a look (default: the flat picture above). `repoHelp` is what to tell a game that has no repository set.
+ * the summary) and keeps the draft, the mode, the open card, the filter and the sort. `picture` draws a look (default: the flat picture above). `repoHelp` is
+ * what to tell a game that has no repository set.
  */
 export declare function shelfView(first: ShelfData, looks: readonly Look[], picture?: (l: Look) => Element, repoHelp?: string): {
     el: HTMLElement;