@nano133/nanoterra 0.1.0 → 0.3.0

package/src/admin/panel/shelfData.ts

@@ -0,0 +1,87 @@
+// The numbers and the words of the Shelf screen in /admin (shelf.ts draws it). Pure: no page, no network. Everything
+// here comes from the game's own database (the admin summary) and from looks.json; nothing is sent anywhere.
+
+import type { LooksDiff } from "../../looks/change.js";
+import { ID_PATTERN, type Look } from "../../looks/look.js";
+
+export type ShelfOrder = { lookId: string; status: string; usd: string };
+export type ShelfPlayer = { looks: { id: string }[] };
+
+/** What one look has done in this game. */
+export type LookStats = {
+  /** Players who own it (a paid order gave it to them). */
+  owners: number;
+  /** Paid orders, and their dollars in cents. */
+  paid: number;
+  paidCents: number;
+  /** Orders that were paid after the order ran out (the money is to be sent back; the look was not given). */
+  late: number;
+};
+
+const none = (): LookStats => ({ owners: 0, paid: 0, paidCents: 0, late: 0 });
+
+/** "0.25" is 25 cents. */
+export const centsOf = (usd: string): number => Math.round(Number(usd) * 100) || 0;
+
+/** The stats for each look id that appears in the orders or in a player's looks. */
+export function shelfStats(orders: readonly ShelfOrder[], players: readonly ShelfPlayer[]): Map<string, LookStats> {
+  const stats = new Map<string, LookStats>();
+  const of = (id: string) => stats.get(id) ?? stats.set(id, none()).get(id)!;
+  for (const o of orders) {
+    if (o.status === "paid") {
+      const s = of(o.lookId);
+      s.paid++;
+      s.paidCents += centsOf(o.usd);
+    } else if (o.status === "paid_late") of(o.lookId).late++;
+  }
+  for (const p of players) for (const l of new Set(p.looks.map((x) => x.id))) of(l).owners++;
+  return stats;
+}
+
+/** Every look id that a player owns. */
+export function ownedIds(players: readonly ShelfPlayer[]): Set<string> {
+  return new Set(players.flatMap((p) => p.looks.map((l) => l.id)));
+}
+
+const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
+
+/** "1 added, 2 changed, 0 removed" */
+export function changeText(d: LooksDiff): string {
+  return `${d.added.length} added, ${d.changed.length} changed, ${d.removed.length} removed`;
+}
+
+/** What to say when a player's money is in a look: "3 sold, $0.75, 3 owners", or "Not sold yet". */
+export function soldText(s: LookStats | undefined): string {
+  if (!s || (!s.paid && !s.owners)) return "Not sold yet";
+  return `${s.paid} sold, $${(s.paidCents / 100).toFixed(2)}, ${plural(s.owners, "owner")}`;
+}
+
+/**
+ * A message to give to an AI assistant that works in the game's repository: the whole new looks.json, what changed, and the rules.
+ * It holds no address, no order and no secret: only the looks, and the ids that players own.
+ */
+export function aiPrompt(text: string, diff: LooksDiff, owned: readonly string[], before: readonly Look[]): string {
+  // Only a real id goes in, written as a JSON string: an id that comes from a database is data, and a message that a person pastes into an AI assistant must not carry a line
+  // that an attacker wrote there.
+  const quote = (ids: readonly string[]) => ids.filter((id) => ID_PATTERN.test(id)).map((id) => JSON.stringify(id)).join(", ");
+  const names = (ls: readonly Look[]) => quote(ls.map((l) => l.id));
+  const ownedOk = owned.filter((id) => ID_PATTERN.test(id));
+  const odd = owned.length - ownedOk.length;
+  const lines = [
+    "Replace looks.json at the top of this game with the text below, then run `npm run check` and push to GitHub. Do not change anything else.",
+    "",
+    `The change: ${changeText(diff)}.`,
+    diff.added.length ? `Added: ${names(diff.added)}.` : "",
+    diff.removed.length ? `Removed: ${names(diff.removed)}.` : "",
+    diff.changed.length ? `Changed: ${names(diff.changed.map((c) => c.after))}.` : "",
+    "",
+    `Looks that players own and that must stay in the file with the same id: ${ownedOk.length ? quote(ownedOk) : "none yet"}${odd ? ` (and ${odd} more with an id that is not a valid look id: do not remove any look)` : ""}.`,
+    `Rules: keep one free look (priceUsd 0), prices in US dollars with at most 2 decimals, never change or remove the id of a look that someone owns, never change the slots of a look that someone owns (slots are words and #rrggbb colours that the game reads, at most 8 on a look), and a look never changes a score or a rule. (The file had ${before.length} looks before.)`,
+    "",
+    "looks.json:",
+    "```json",
+    text.trimEnd(),
+    "```",
+  ];
+  return lines.filter((l, i, a) => l !== "" || a[i - 1] !== "").join("\n");
+}

package/src/admin/panel/signins.ts

@@ -0,0 +1,68 @@
+// The "Sign-ins" card of /admin: the last admin sign-ins (when, the rough country, a short browser name) and "Sign out everywhere". It shows only what the store gave for a
+// sign-in: the three things of `AdminLogin`. The sign-out is two presses, so that one slip does not end every login.
+
+import type { AdminSummary } from "../store.js";
+import { ApiError, type Api } from "./api.js";
+import { h } from "./dom.js";
+
+/** What the card says about what is kept, unless the game says its own (its retention). */
+export const DEFAULT_LOGINS_NOTE = "For each sign-in only the time, the rough country and a short browser name are kept: no address and no full browser text.";
+
+/** "United States (US)", or "US" when the name is not known, or "unknown country". */
+function countryText(code: string | null): string {
+  if (!code) return "unknown country";
+  try {
+    const name = new Intl.DisplayNames(["en"], { type: "region" }).of(code);
+    return name && name !== code ? `${name} (${code})` : code;
+  } catch {
+    return code;
+  }
+}
+
+/** The card, or null when the store lists no sign-ins and cannot sign out. `done` runs after a sign-out everywhere (the panel loads again and asks for a sign-in). */
+export function signinsCard(s: AdminSummary, api: Api, done: () => void, note: string = DEFAULT_LOGINS_NOTE): HTMLElement | null {
+  if (!s.logins && !s.canSignOutEverywhere) return null;
+  const card = h("section", { class: "admin-card signins", "aria-labelledby": "signins-title" }, h("h2", { id: "signins-title" }, "Sign-ins"));
+  if (s.logins) {
+    card.append(h("p", { class: "fine" }, "The last sign-ins to this admin, newest first. If one is not yours, press Sign out everywhere."));
+    const list = h("ul", { class: "signin-list" });
+    for (const l of s.logins) list.append(h("li", {}, h("strong", {}, new Date(l.at).toLocaleString()), h("span", {}, ` · ${countryText(l.country)} · ${l.browser}`)));
+    if (!s.logins.length) list.append(h("li", { class: "fine" }, "No sign-in is listed yet."));
+    card.append(list, h("p", { class: "fine" }, note));
+  }
+  if (s.canSignOutEverywhere) {
+    const box = h("div", { class: "signout-box" });
+    const status = h("span", { class: "fine", role: "status" });
+    const first = h("button", { class: "btn", type: "button" }, "Sign out everywhere");
+    const confirm = h("div", { class: "signout-confirm" });
+    confirm.hidden = true;
+    const yes = h("button", { class: "btn btn-primary", type: "button" }, "Yes, sign out everywhere");
+    const cancel = h("button", { class: "btn", type: "button" }, "Cancel");
+    confirm.append(h("p", {}, "This ends every admin sign-in, in every browser, this one too. You will sign in again."), yes, " ", cancel);
+    first.addEventListener("click", () => {
+      first.hidden = true;
+      confirm.hidden = false;
+      status.textContent = "";
+    });
+    cancel.addEventListener("click", () => {
+      confirm.hidden = true;
+      first.hidden = false;
+    });
+    yes.addEventListener("click", async () => {
+      yes.disabled = true;
+      cancel.disabled = true;
+      status.textContent = "Signing out…";
+      try {
+        await api.post("/signout-all");
+        done();
+      } catch (e) {
+        status.textContent = e instanceof ApiError ? e.message : "The game's server did not answer. Nothing was changed.";
+        yes.disabled = false;
+        cancel.disabled = false;
+      }
+    });
+    box.append(first, confirm, status);
+    card.append(box);
+  }
+  return card;
+}

package/src/admin/panel/style.css

@@ -0,0 +1,551 @@
+/* The admin panel's styles (mountAdmin in ./mount.ts). Every rule is under .n133-admin, so nothing leaks into the page that holds the panel and the page's own
+   styles do not reach in by accident. Phone first: every control is at least 40 px high (the order tabs), the rest 44 px or more; one column, two from 640px.
+   To theme it, set the --n133-* custom properties on the element that holds the panel (or on any parent): --n133-ink, --n133-ink-soft, --n133-paper, --n133-line,
+   --n133-gem, --n133-gem-dark, --n133-sea, --n133-radius and --n133-font. */
+
+.n133-admin {
+  --font: var(--n133-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+  --gem: var(--n133-gem, #20c9a6);
+  --gem-dark: var(--n133-gem-dark, #0e8a72);
+  --ink: var(--n133-ink, #16202e);
+  --ink-soft: var(--n133-ink-soft, #4a5568);
+  --line: var(--n133-line, #dbe4ee);
+  --paper: var(--n133-paper, #ffffff);
+  --radius: var(--n133-radius, 18px);
+  --sea: var(--n133-sea, #1f8fc4);
+  box-sizing: border-box;
+  max-width: 900px;
+  margin: 0 auto;
+  color: var(--ink);
+  font-family: var(--font);
+  -webkit-text-size-adjust: 100%;
+}
+
+.n133-admin *,
+.n133-admin *::before,
+.n133-admin *::after {
+  box-sizing: border-box;
+}
+
+.n133-admin [hidden] {
+  display: none !important;
+}
+
+.n133-admin .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 48px;
+  padding: 0 18px;
+  border: 2px solid var(--line);
+  border-radius: 999px;
+  background: var(--paper);
+  color: var(--ink);
+  font: 700 16px/1 var(--font);
+  text-decoration: none;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.n133-admin .btn:focus-visible {
+  outline: 3px solid var(--sea);
+  outline-offset: 2px;
+}
+
+.n133-admin .btn:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.n133-admin .btn-primary {
+  border-color: var(--gem-dark);
+  background: var(--gem);
+  color: #062b23;
+}
+
+.n133-admin .btn-small {
+  min-height: 40px;
+  padding: 0 12px;
+  font-size: 14px;
+}
+
+.n133-admin .fine {
+  color: var(--ink-soft);
+  font-size: 13px;
+}
+
+.n133-admin .admin-card {
+  margin: 12px 0;
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: #fff;
+}
+
+.n133-admin .admin-card h2 {
+  margin: 0 0 10px;
+  font-size: 19px;
+}
+
+.n133-admin .card-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.n133-admin .card-head h2 {
+  margin: 0;
+}
+
+.n133-admin .warnings {
+  border-color: #f2b8c1;
+  background: #fff4f6;
+}
+
+.n133-admin .warnings ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.n133-admin .totals {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.n133-admin .total {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: #fff;
+}
+
+.n133-admin .total span {
+  color: var(--ink-soft);
+  font-size: 14px;
+}
+
+.n133-admin .total strong {
+  font-size: 24px;
+  font-variant-numeric: tabular-nums;
+}
+
+.n133-admin .tabs {
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  padding-bottom: 6px;
+}
+
+.n133-admin .tab {
+  flex: none;
+  min-height: 40px;
+  padding: 0 14px;
+  border: 2px solid var(--line);
+  border-radius: 999px;
+  background: #fff;
+  font: 700 14px/1 var(--font);
+  cursor: pointer;
+}
+
+.n133-admin .tab-on {
+  border-color: var(--ink);
+  background: var(--ink);
+  color: #fff;
+}
+
+.n133-admin .order {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.n133-admin .order-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.n133-admin .order-amount {
+  margin: 4px 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.n133-admin .badge {
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: #eef1f4;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.n133-admin .badge-paid {
+  background: #dcf8ef;
+  color: #0b6d5a;
+}
+
+.n133-admin .badge-open {
+  background: #e3f1ff;
+  color: #134e86;
+}
+
+.n133-admin .badge-paid_late {
+  background: #ffe3e8;
+  color: #a1122a;
+}
+
+.n133-admin .late-note {
+  margin-top: 6px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: #fff4f6;
+  font-size: 14px;
+}
+
+.n133-admin .late-note code,
+.n133-admin .player code,
+.n133-admin .admin-card code {
+  word-break: break-all;
+  font-size: 12px;
+}
+
+.n133-admin .hash {
+  word-break: break-all;
+}
+
+.n133-admin .player {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--line);
+}
+
+/* The Shelf (src/client/shelf.ts): phone first, one column; two from 640px. */
+.n133-admin .shelf-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+@media (min-width: 640px) {
+.n133-admin .shelf-list {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.n133-admin .shelf-card {
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #fbfdff;
+}
+
+.n133-admin .shelf-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.n133-admin .shelf-pic {
+  display: grid;
+  flex: none;
+  width: 68px;
+  height: 76px;
+  place-items: center;
+  border-radius: 12px;
+  background: #e8f3fb;
+}
+
+.n133-admin .shelf-preview {
+  display: grid;
+  place-items: center;
+}
+
+.n133-admin .shelf-preview img {
+  display: block;
+}
+
+.n133-admin .shelf-text {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.n133-admin .shelf-text strong {
+  overflow-wrap: anywhere;
+}
+
+.n133-admin .shelf-price {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.n133-admin .shelf-field {
+  display: grid;
+  gap: 4px;
+  margin-top: 10px;
+}
+
+.n133-admin .shelf-field > span {
+  color: var(--ink-soft);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.n133-admin .shelf-input {
+  width: 100%;
+  min-height: 44px;
+  padding: 0 12px;
+  border: 2px solid var(--line);
+  border-radius: 12px;
+  background: #fff;
+  color: var(--ink);
+  font: 16px/1 var(--font);
+}
+
+.n133-admin .shelf-color {
+  width: 100%;
+  min-height: 44px;
+  padding: 2px;
+  border: 2px solid var(--line);
+  border-radius: 12px;
+  background: #fff;
+}
+
+.n133-admin .shelf-color:disabled {
+  opacity: 0.45;
+}
+
+.n133-admin .shelf-colors {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
+  gap: 8px;
+}
+
+.n133-admin .shelf-ladder {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.n133-admin .chip {
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0 12px;
+  border: 2px solid var(--line);
+  border-radius: 999px;
+  background: #fff;
+  color: var(--ink);
+  font: 700 14px/1 var(--font);
+  cursor: pointer;
+}
+
+.n133-admin .shelf-actions,
+.n133-admin .shelf-add {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.n133-admin .shelf-foot {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.n133-admin .shelf-changes ul,
+.n133-admin .late-note ul {
+  margin: 4px 0 0;
+  padding-left: 20px;
+}
+
+.n133-admin .shelf-file pre {
+  max-height: 320px;
+  margin: 8px 0 0;
+  padding: 12px;
+  overflow: auto;
+  border-radius: 12px;
+  background: #0f172a;
+  color: #e6edf6;
+  font-size: 13px;
+}
+
+/* WebKit draws a select at its own height and ignores min-height: take over the drawing, so it is 44px (a finger) on an iPad too. */
+.n133-admin select.shelf-input {
+  height: 44px;
+  padding-right: 32px;
+  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
+  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px;
+  background-repeat: no-repeat;
+  background-size: 5px 5px, 5px 5px;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+/* The "Game" card: two switches (src/client/gameSwitches.ts). Each is a button of at least 44 px, on a phone first. */
+.n133-admin .game-card .switch-row {
+  display: grid;
+  gap: 6px;
+  padding: 14px 0;
+  border-top: 1px solid var(--line);
+}
+
+.n133-admin .game-card .switch-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.n133-admin .game-card .switch-title {
+  font: 700 16px/1.3 var(--font);
+  flex: 1 1 14rem;
+  min-width: 0;
+}
+
+.n133-admin .game-card .switch-note {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 15px;
+  line-height: 1.45;
+  max-width: 60ch;
+}
+
+.n133-admin .game-card .switch-review {
+  margin: 4px 0 0;
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+}
+
+.n133-admin .game-card .switch-review a {
+  display: inline-block;
+  padding: 10px 0;
+  color: var(--ink);
+  font-weight: 700;
+}
+
+.n133-admin .switch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 96px;
+  min-height: 44px;
+  /* Off: the knob is on the left and the word on the right. On: the word on the left and the knob on the right (the usual switch). */
+  flex-direction: row-reverse;
+  padding: 0 14px 0 6px;
+  border: 2px solid var(--line);
+  border-radius: 999px;
+  background: var(--paper);
+  color: var(--ink);
+  font: 700 14px/1 var(--font);
+  cursor: pointer;
+}
+
+.n133-admin .switch .switch-knob {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--line);
+}
+
+.n133-admin .switch.switch-on {
+  border-color: var(--gem-dark);
+  background: var(--gem);
+  color: #052b23;
+  flex-direction: row;
+  padding: 0 6px 0 14px;
+}
+
+.n133-admin .switch.switch-on .switch-knob {
+  background: var(--paper);
+}
+
+.n133-admin .switch:focus-visible {
+  outline: 3px solid var(--sea);
+  outline-offset: 2px;
+}
+
+.n133-admin .switch:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+/* The slots of a look in the Shelf's editor: a name and a value in a row, and Remove; on a narrow phone Remove goes under them. */
+.n133-admin .shelf-slots-edit {
+  gap: 8px;
+}
+
+.n133-admin .shelf-slot-list {
+  display: grid;
+  gap: 8px;
+}
+
+.n133-admin .shelf-slot {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+@media (max-width: 480px) {
+  .n133-admin .shelf-slot {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .n133-admin .shelf-slot .btn {
+    grid-column: 1 / -1;
+  }
+}
+
+.n133-admin .shelf-slots-edit > .btn {
+  justify-self: start;
+}
+
+.n133-admin .shelf-slots {
+  overflow-wrap: anywhere;
+}
+
+/* The Sign-ins card: a list of the last sign-ins, and the two-step "Sign out everywhere". */
+.n133-admin .signin-list {
+  display: grid;
+  gap: 8px;
+  margin: 8px 0;
+  padding: 0;
+  list-style: none;
+}
+
+.n133-admin .signin-list li {
+  padding: 8px 0;
+  border-bottom: 1px solid var(--line);
+  overflow-wrap: anywhere;
+}
+
+.n133-admin .signout-box {
+  display: grid;
+  gap: 8px;
+  justify-items: start;
+  margin-top: 8px;
+}
+
+.n133-admin .signout-confirm {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 12px;
+  background: #fff4f6;
+}
+
+.n133-admin .signout-confirm p {
+  margin: 0;
+}