f4a626a
@@ -171,7 +171,10 @@
wants one, but the running server never reads it.
  credited for the kill, the way blowing yourself up with your own grenade
  never is.
  A footstep only carries so far, but the bomb's beep and the blast that ends it
  carry across the whole map. The leaderboard is a real SQLite table under
  carry across the whole map. Every row on the board and the match-over card
  both link to that one match's own page at `GET /m/<id>` — the same numbers
  the board already shows, held at an address worth coming back to. The
  leaderboard is a real SQLite table under
  `FORGE_APP_DATA`, also served as plain JSON from `GET /api/leaderboard` for
  the terminal or any other client — with a `guest` flag per row instead of the
  identity it comes from, because a guest's identity is the session cookie that
@@ -673,7 +676,10 @@
projections they feed cost 0.04 ms of a 16.7 ms frame, measured.
  browser may claim, `src/who.ts` verifies the forge's signed identity
  headers, `src/player.ts` turns "who is asking" into who a match is credited
  to, `src/limit.ts` is the rate limit `POST /api/match` stands behind, and
  `src/pages/game.ts` renders the page.
  `src/pages/game.ts` renders the page, and `src/pages/match.ts` renders one
  match's own page at `GET /m/<id>` — the id is a uuid, checked before it ever
  reaches `src/db.ts`'s `matchById`, so a malformed one is a 404 that never
  queries and an unknown one reads the same as a malformed one.
- `src/bundle.ts` bundles the client; `src/server.ts` runs it at start-up and
  serves the result from memory as `/static/app.<hash>.js`, cached for a year.
  `scripts/build.ts` is a thin CLI over the same function, for a file on disk.
@@ -692,7 +698,9 @@
on a real pty over the same database: the same standings, the same matches, a
`who` column that says `signed` or `guest` (a terminal has no markup, so the
tag a name cannot fake is a column of its own), and `x` removes one.
<kbd>Tab</kbd> walks the three tabs — the third is the policy card the page
shows, which the tab key could not reach until now.
shows, which the tab key could not reach until now. On the matches tab,
<kbd>Enter</kbd> opens the selected row full-screen — the same fields
`GET /m/<id>` renders — and <kbd>Esc</kbd> goes back.
The forge sets `PORT`, `FORGE_APP_DATA`, `FORGE_APP_ENV` (`production` or
`preview`), `FORGE_APP_URL`, `FORGE_APP_SSH`, `FORGE_APP_COMMIT` and
@@ -92,3 +92,7 @@
test("every selector main.ts runs against the page it did not write matches some
    expect(html).toContain(`<${selector}`);
  }
});
test("the match-over card is pointed at the match that just finished, not the board", () => {
  expect(mainSource).toContain('$<HTMLAnchorElement>("summary-match").href = `/m/${matchId}`;');
});
@@ -757,6 +757,7 @@
function boot(): void {
    $("summary-detail").textContent = summary.detail;
    $("summary-score").textContent = summary.score;
    $("summary-line").textContent = `${summary.name} — ${summary.line}`;
    $<HTMLAnchorElement>("summary-match").href = `/m/${matchId}`;
    // Built once from board — already escaped — never patched frame by frame.
    $("summary-board").innerHTML = finalBoardHtml(board);
    show(summaryPanel, true);
@@ -8,7 +8,7 @@
import { Database } from "bun:sqlite";
import { mkdtempSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { openDatabase, recentMatches, saveMatch, standings } from "./db.ts";
import { matchById, openDatabase, recentMatches, saveMatch, standings } from "./db.ts";
import type { Result } from "./result.ts";
const dir = (): string => mkdtempSync(join(tmpdir(), "db-"));
@@ -167,6 +167,21 @@
test("a match round-trips its state: finished, left, or still live", () => {
  expect(recentMatches(db).find((m) => m.id === live.matchId)?.state).toBe("live");
});
test("a known match is found by its id, with the same numbers recentMatches reads", () => {
  const db = openDatabase(dir());
  const match = result({ kills: 12, damage: 900 });
  expect(saveMatch(db, writer("user:u_1", "ada"), match)).toBe(true);
  const row = matchById(db, match.matchId);
  expect(row?.kills).toBe(12);
  expect(row?.damage).toBe(900);
  expect(row?.map).toBe("de_forge");
});
test("an id nothing was ever saved under is not found", () => {
  const db = openDatabase(dir());
  expect(matchById(db, crypto.randomUUID())).toBe(null);
});
test("a late periodic post cannot undo a leave that already landed", () => {
  const db = openDatabase(dir());
  const w = writer("user:u_1", "ada");
@@ -222,6 +222,19 @@
export const recentMatches = (db: Database, limit = 10): MatchRow[] =>
     FROM match WHERE rounds > 0 ORDER BY updated_at DESC LIMIT ?1`,
  ).all(limit);
/**
 * One match, by the id the browser generated for it — the same row shape as
 * `recentMatches`, so the page and the terminal's detail view read it the
 * same way they read the board. A match with no round played yet is `null`
 * here exactly as it is absent from the board: there is nothing to show.
 */
export const matchById = (db: Database, id: string): MatchRow | null =>
  db.query<MatchRow, [string]>(
    `SELECT id, identity, session, name, map, kills, deaths, headshots, damage, rounds,
            score_mine, score_theirs, finished, walked_out, seconds, updated_at, ${STATE_SQL}
     FROM match WHERE id = ?1 AND rounds > 0`,
  ).get(id);
/**
 * The table people actually look at: one row an identity, best first. The name
 * shown is the one on that identity's most recent match, kept current by
@@ -253,3 +266,7 @@
export const ratio = (kills: number, deaths: number): string =>
export const headshotShare = (headshots: number, kills: number): string =>
  kills === 0 ? "—" : `${Math.round((headshots / kills) * 100)}%`;
/** How long a match took, as minutes:seconds — the one place seconds becomes a clock. */
export const duration = (seconds: number): string =>
  `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
@@ -182,6 +182,15 @@
test("a recent match's row names the map it was played on", () => {
  expect(html).toContain("de_forge");
});
test("a recent match's row links to its own page", () => {
  const stats = openDatabase(mkdtempSync(join(tmpdir(), "game-page-")));
  const writer = { identity: "user:u_link", name: "reyes", guest: false, session: "f".repeat(32) };
  const played = matchResult();
  saveMatch(stats, writer, played);
  const html = statsHtml(stats, player);
  expect(html).toContain(`<a href="/m/${played.matchId}">`);
});
test("the leaderboard table carries the hook and labels a phone-width card layout needs", () => {
  const stats = openDatabase(mkdtempSync(join(tmpdir(), "game-page-")));
  const writer = { identity: "user:u_4", name: "sable", guest: false, session: "e".repeat(32) };
@@ -40,8 +40,8 @@
export function statsHtml(db: Database, player: Player): string {
    m.state === "finished" ? "" : m.state === "abandoned" ? " · abandoned" : " · in progress";
  const feed = recent
    .map(
      (m) => `<li><b>${escape(m.name)}${tag(m.identity)}</b> ${m.score_mine}–${m.score_theirs} ` +
        `<span>${escape(m.map)} · ${m.kills}k ${m.deaths}d · ${m.damage} damage${status(m)}</span> ` +
      (m) => `<li><a href="/m/${escape(m.id)}"><b>${escape(m.name)}${tag(m.identity)}</b> ${m.score_mine}–${m.score_theirs} ` +
        `<span>${escape(m.map)} · ${m.kills}k ${m.deaths}d · ${m.damage} damage${status(m)}</span></a> ` +
        `<time>${escape(m.updated_at)}</time></li>`,
    )
    .join("");
@@ -142,7 +142,7 @@
export function motionControl(id: "motion" | "pause-motion"): string {
  return `<label>Motion<select id="${id}">${options}</select></label>`;
}
const STYLE = `
export const STYLE = `
:root { color-scheme: dark; --bg:#0b0d11; --panel:#141821; --line:#232a36; --text:#e7eaf0; --dim:#9aa4b4; --t:#e2b04a; --ct:#6fa8e8; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif; }
@@ -267,6 +267,8 @@
th, td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--li
th { color:var(--dim); font-weight:500; }
ul.recent { list-style:none; padding:0; margin:0; font-size:.86rem; }
ul.recent li { padding:.35rem 0; border-bottom:1px solid var(--line); display:flex; gap:.5rem; flex-wrap:wrap; }
ul.recent a { color:inherit; text-decoration:none; display:flex; gap:.5rem; flex-wrap:wrap; align-items:baseline; }
ul.recent a:hover, ul.recent a:focus { text-decoration:underline; }
ul.recent span, ul.recent time, .empty, .you { color:var(--dim); }
.you { font-size:.86rem; margin:.2rem 0 .6rem; }
.you b { color:var(--text); }
@@ -416,6 +418,7 @@
export function gamePage(db: Database, options: PageOptions): string {
      <p id="summary-detail"></p>
      <p class="score" id="summary-score"></p>
      <p id="summary-line"></p>
      <p><a id="summary-match" href="/">View this match</a></p>
      <div id="summary-board"></div>
      <div class="row">
        <button type="button" class="primary" id="again">Play again</button>
@@ -0,0 +1,53 @@
/**
 * One match's own page: everything the board already shows about it, held
 * still at an address you can come back to. Nothing here that is not already
 * a column the board reads — no session, no identity string, one id in and
 * one row out.
 */
import { duration, headshotShare, ratio, type MatchRow } from "../db.ts";
import { isGuest } from "../player.ts";
import { escape, STYLE } from "./game.ts";
const STATE_WORD: Record<MatchRow["state"], string> = {
  finished: "finished",
  abandoned: "abandoned",
  live: "in progress",
};
export function matchPage(match: MatchRow): string {
  const tag = isGuest(match.identity) ? ` <span class="tag">guest</span>` : "";
  const title = `${match.name}${isGuest(match.identity) ? " (guest)" : ""} on ${match.map}`;
  const row = (k: string, v: string): string => `<tr><th>${escape(k)}</th><td>${v}</td></tr>`;
  return `<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>cs — ${escape(title)}</title>
<style>${STYLE}</style>
<header>
  <h1><a href="/">cs</a></h1>
</header>
<main>
  <p><a href="/">&larr; Back to the board</a></p>
  <h2>${escape(match.name)}${tag} on ${escape(match.map)}</h2>
  <table>
    <tbody>
      ${row("Score", `${match.score_mine}–${match.score_theirs}`)}
      ${row("State", escape(STATE_WORD[match.state]))}
      ${row("Map", escape(match.map))}
      ${row("Rounds", String(match.rounds))}
      ${row("Kills", String(match.kills))}
      ${row("Deaths", String(match.deaths))}
      ${row("Headshots", `${match.headshots} (${headshotShare(match.headshots, match.kills)})`)}
      ${row("Damage", String(match.damage))}
      ${row("K/D", ratio(match.kills, match.deaths))}
      ${row("Duration", duration(match.seconds))}
      ${row("When", escape(match.updated_at))}
    </tbody>
  </table>
</main>
<footer>cs · <a href="/">back to the leaderboard</a></footer>
</html>
`;
}
@@ -395,6 +395,54 @@
test("the endpoint is rate limited, and one player's flood is their own", async
  expect((await post(result(), "", forge("u_calm", "calm"))).status).toBe(200);
});
test("a known match has its own page, with the same numbers the board shows", async () => {
  const id = crypto.randomUUID();
  await post(result({ matchId: id, map: "de_forge", kills: 17, deaths: 6, headshots: 4, damage: 2100, rounds: 8, scoreMine: 5, scoreTheirs: 3, seconds: 700 }), "", forge("u_m1", "Solo"));
  const response = await fetch(base + "/m/" + id);
  expect(response.status).toBe(200);
  const body = await response.text();
  expect(body).toContain("Solo");
  expect(body).toContain("de_forge");
  expect(body).toContain("17");
  expect(body).toContain("6");
  expect(body).toContain("4");
  expect(body).toContain("2100");
  expect(body).toContain("5–3");
  expect(body).toContain("finished");
});
test("a match page never shows a session id or an identity string", async () => {
  const id = crypto.randomUUID();
  const session = "5".repeat(32);
  await post(result({ matchId: id }), "cs_session=" + session);
  const body = await (await fetch(base + "/m/" + id)).text();
  expect(body).not.toContain(session);
  expect(body).not.toContain("guest:");
  expect(body).toContain("guest");
});
test("an id nothing was ever posted under is a 404, and so is a malformed one", async () => {
  const unknown = await fetch(base + "/m/" + crypto.randomUUID());
  expect(unknown.status).toBe(404);
  for (const bad of ["not-a-uuid", "12345678-1234-1234-1234-12345678901", "../etc/passwd", ""]) {
    const response = await fetch(base + "/m/" + bad);
    expect([bad, response.status]).toEqual([bad, 404]);
  }
});
test("HEAD on a match page answers like GET, under the floor and out of shared caches", async () => {
  const id = crypto.randomUUID();
  await post(result({ matchId: id }), "", forge("u_m2", "Headcheck"));
  const get = await server.fetch(new Request(base + "/m/" + id));
  const head = await server.fetch(new Request(base + "/m/" + id, { method: "HEAD" }));
  expect(head.status).toBe(200);
  expect(await head.arrayBuffer()).toEqual(new ArrayBuffer(0));
  expect(head.headers.get("content-length")).toBe(get.headers.get("content-length"));
  expect(head.headers.get("cache-control")).toBe("private, no-cache");
  expect(head.headers.get("content-security-policy")).toContain("default-src 'self'");
  expect(head.headers.get("x-content-type-options")).toBe("nosniff");
});
test("a guest is limited too, by the session they hold", async () => {
  const cookie = "cs_session=" + "e".repeat(32);
  let last = 200;
@@ -9,9 +9,10 @@
import { join } from "node:path";
import { bundle } from "./bundle.ts";
import { acceptsGzip } from "./compress.ts";
import { openDatabase, saveMatch } from "./db.ts";
import { matchById, openDatabase, saveMatch } from "./db.ts";
import { createLimiter, type Decision } from "./limit.ts";
import { escape, gamePage, leaderboardJson, statsHtml } from "./pages/game.ts";
import { matchPage } from "./pages/match.ts";
import { credit } from "./player.ts";
import { parseResult } from "./result.ts";
import { identityWarning, whoIs, type Who } from "./who.ts";
@@ -120,6 +121,11 @@
async function readBody(request: Request, max = BODY_MAX): Promise<Uint8Array |
  return body;
}
// A match id is a uuid the browser generated with crypto.randomUUID(): the
// one shape /m/<id> is ever allowed to mean. Checked here, before the id
// reaches the database — a malformed one is a 404 that never queries.
const MATCH_ID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
// A session is only ever a name for "the browser that started this match", so
// one browser cannot overwrite another's result. It carries nothing else.
const SESSION_COOKIE = "cs_session";
@@ -230,6 +236,24 @@
export async function serve(): Promise<ReturnType<typeof Bun.serve>> {
          : new Response(JSON.stringify(leaderboardJson(db)), { headers });
      }
      // One match, at the address every row on the board and the match-over
      // card link to. Not found and malformed read the same: a 404, and a
      // malformed id never reaches matchById at all.
      if ((request.method === "GET" || request.method === "HEAD") && url.pathname.startsWith("/m/")) {
        const id = url.pathname.slice("/m/".length);
        const match = MATCH_ID.test(id) ? matchById(db, id) : null;
        if (match === null)
          return html(`<h1>Not found</h1><p><a href="/">Back to ${escape("cs")}</a></p>`, 404, {
            "cache-control": "private, no-cache",
          });
        const headers = {
          "content-type": "text/html; charset=utf-8",
          "cache-control": "private, no-cache",
          ...SECURITY,
        };
        return encoded(request, encoder.encode(matchPage(match)), headers);
      }
      // HEAD is GET without the body: a health check sees the app up.
      if (url.pathname === "/" && (request.method === "GET" || request.method === "HEAD")) {
        // A first visit is given its session here, and the page is rendered
@@ -62,14 +62,14 @@
test("tab walks the three tabs in src/tabs.ts's order and comes back round", ()
test("the cursor is clamped when the list is shorter than the cursor, including across a tab switch", () => {
  const rows = data({ standings: [standing()], matches: [match(), match(), match()] });
  let state: State = { tab: "matches", cursor: 2, note: "" };
  let state: State = { tab: "matches", cursor: 2, note: "", detail: null };
  state = key(state, "j", rows, noRemove);
  expect(state.cursor).toBe(2); // three matches: index 2 is the last one, "j" cannot go past it
  state = key(state, "\t", rows, noRemove);
  expect(state.tab).toBe("policy");
  expect(state.cursor).toBe(0);
  // render() clamps too, independently of key(), for a state built by hand.
  const wide: State = { tab: "standings", cursor: 5, note: "" };
  const wide: State = { tab: "standings", cursor: 5, note: "", detail: null };
  expect(() => render(wide, rows)).not.toThrow();
  const lines = render(wide, rows);
  expect(lines.some((l) => l.includes("tester"))).toBe(true);
@@ -82,7 +82,7 @@
test("x removes the selected match and notes it; x on another tab does nothing",
    removed.push(id);
    return true;
  };
  const state: State = { tab: "matches", cursor: 1, note: "" };
  const state: State = { tab: "matches", cursor: 1, note: "", detail: null };
  const next = key(state, "x", rows, remove);
  expect(removed).toEqual(["b"]);
  expect(next.note).toBe("removed Bob's match");
@@ -90,7 +90,7 @@
test("x removes the selected match and notes it; x on another tab does nothing",
  const failing = key(state, "x", rows, () => false);
  expect(failing.note).toBe("nothing removed");
  const onStandings = key({ tab: "standings", cursor: 0, note: "" }, "x", rows, remove);
  const onStandings = key({ tab: "standings", cursor: 0, note: "", detail: null }, "x", rows, remove);
  expect(removed).toEqual(["b"]); // unchanged: x only removes on the matches tab
  expect(onStandings.note).toBe("");
});
@@ -98,16 +98,16 @@
test("x removes the selected match and notes it; x on another tab does nothing",
test("x past the end of the list removes nothing", () => {
  const rows = data({ matches: [] });
  const remove = () => true;
  const state: State = { tab: "matches", cursor: 0, note: "" };
  const state: State = { tab: "matches", cursor: 0, note: "", detail: null };
  const next = key(state, "x", rows, remove);
  expect(next.note).toBe("");
});
test("an unrecognised key, like q, leaves the tab and cursor exactly as they were", () => {
  const rows = data({ standings: [standing(), standing()] });
  const state: State = { tab: "standings", cursor: 1, note: "stale" };
  const state: State = { tab: "standings", cursor: 1, note: "stale", detail: null };
  const next = key(state, "q", rows, noRemove);
  expect(next).toEqual({ tab: "standings", cursor: 1, note: "" });
  expect(next).toEqual({ tab: "standings", cursor: 1, note: "", detail: null });
});
test("the standings tab renders every row, and says so when there are none", () => {
@@ -181,6 +181,47 @@
test("a C1 control byte, like the 8-bit form of CSI, is stripped too", () => {
  expect(line).not.toContain("\x9b");
});
test("enter opens the selected match on the matches tab, and shows the same numbers the page does", () => {
  const rows = data({
    matches: [match({ id: "target", name: "Vesper", map: "de_dust", kills: 17, deaths: 6, headshots: 4, damage: 2100, rounds: 8, score_mine: 5, score_theirs: 3, seconds: 700 })],
  });
  const state: State = { tab: "matches", cursor: 0, note: "", detail: null };
  const opened = key(state, "\r", rows, noRemove);
  expect(opened.detail).toBe("target");
  const lines = render(opened, rows).join("\n");
  expect(lines).toContain("Vesper");
  expect(lines).toContain("de_dust");
  expect(lines).toContain("5–3");
  expect(lines).toContain("17");
  expect(lines).toContain("6");
  expect(lines).toContain("4");
  expect(lines).toContain("2100");
  expect(lines).toContain("finished");
  expect(lines).toContain("esc back");
});
test("enter does nothing on the standings tab", () => {
  const rows = data();
  const state: State = { tab: "standings", cursor: 0, note: "", detail: null };
  expect(key(state, "\r", rows, noRemove).detail).toBe(null);
});
test("esc closes the detail view and returns to the list, and nothing else does", () => {
  const rows = data({ matches: [match({ id: "target" })] });
  const open: State = { tab: "matches", cursor: 0, note: "", detail: "target" };
  expect(key(open, "j", rows, noRemove)).toEqual(open);
  const closed = key(open, "\x1b", rows, noRemove);
  expect(closed.detail).toBe(null);
  expect(render(closed, rows).join("\n")).toContain("tester");
});
test("opening a match id that has since vanished says so instead of throwing", () => {
  const rows = data({ matches: [] });
  const open: State = { tab: "matches", cursor: 0, note: "", detail: "gone" };
  expect(() => render(open, rows)).not.toThrow();
  expect(render(open, rows).join("\n")).toContain("gone");
});
test("standings and matches say who a row belongs to, guest or signed", () => {
  const rows = data({
    standings: [standing({ identity: "user:1", name: "guest aaaa" }), standing({ identity: "guest:aaaa", name: "guest aaaa" })],
@@ -13,7 +13,7 @@
import type { Database } from "bun:sqlite";
import {
  deleteMatch, headshotShare, matchCount, openDatabase, ratio, recentMatches, standings,
  deleteMatch, duration, headshotShare, matchCount, openDatabase, ratio, recentMatches, standings,
  type MatchRow, type Standing,
} from "./db.ts";
import { isGuest } from "./player.ts";
@@ -21,9 +21,14 @@
import { identityWarning } from "./who.ts";
import { CARD } from "./client/weights.ts";
import { nextTab, TABS, type Tab } from "./tabs.ts";
export type State = { tab: Tab; cursor: number; note: string };
/**
 * `detail` is the id of the match the matches tab is showing full-screen —
 * the same view `/m/<id>` renders — or `null` for the ordinary tab list.
 * Only Enter opens it, from a row on the matches tab, and only Esc closes it.
 */
export type State = { tab: Tab; cursor: number; note: string; detail: string | null };
export const initialState: State = { tab: "standings", cursor: 0, note: "" };
export const initialState: State = { tab: "standings", cursor: 0, note: "", detail: null };
/** Everything a frame needs to draw, read fresh from the database each time. */
export type Data = {
@@ -63,9 +68,14 @@
const clampCursor = (cursor: number, rows: number): number => Math.max(0, Math.m
/** What one keypress does to the state. Reads `data` but never the database itself. */
export function key(state: State, input: string, data: Data, remove: Remove): State {
  // The detail view is a dead end but for Esc: no scrolling one row, no tab
  // switch out from under it — back to the list is the only way out.
  if (state.detail !== null)
    return input === "\x1b" ? { tab: state.tab, cursor: state.cursor, note: "", detail: null } : state;
  let tab = state.tab;
  let cursor = state.cursor;
  let note = "";
  let detail: string | null = null;
  if (input === "j" || input === "\x1b[B") cursor += 1;
  else if (input === "k" || input === "\x1b[A") cursor = Math.max(0, cursor - 1);
  else if (input === "\t") {
@@ -74,13 +84,54 @@
export function key(state: State, input: string, data: Data, remove: Remove): St
  } else if (input === "x" && tab === "matches") {
    const match = data.matches[cursor];
    if (match !== undefined) note = remove(match.id) ? `removed ${match.name}'s match` : "nothing removed";
  } else if ((input === "\r" || input === "\n") && tab === "matches") {
    const match = data.matches[cursor];
    if (match !== undefined) detail = match.id;
  }
  cursor = clampCursor(cursor, rowCount(tab, data));
  return { tab, cursor, note };
  return { tab, cursor, note, detail };
}
// The word for a row's state, unchanged for the detail view — the page and
// the terminal say the same thing.
const stateWord = (m: MatchRow): string =>
  m.state === "finished" ? "finished" : m.state === "abandoned" ? "abandoned" : "in progress";
/**
 * One match, full-screen: the same fields the page at /m/<id> shows, read the
 * same way — `data.matches` is where both this and the page's own query draw
 * their numbers from a row.
 */
function renderDetail(match: MatchRow | undefined): string[] {
  const lines: string[] = [];
  lines.push(`${esc}1mcs${esc}0m  ${esc}2mmatch${esc}0m`);
  lines.push("");
  if (match === undefined) {
    lines.push(`  ${esc}2mthat match is gone${esc}0m`);
  } else {
    const line = (k: string, v: string): string => `  ${esc}2m${pad(k, 12)}${esc}0m${v}`;
    lines.push(`  ${esc}1m${safe(match.name)}${esc}0m ${esc}2m(${who(match.identity)})${esc}0m`);
    lines.push("");
    lines.push(line("map", safe(match.map)));
    lines.push(line("score", `${match.score_mine}–${match.score_theirs}`));
    lines.push(line("state", stateWord(match)));
    lines.push(line("rounds", String(match.rounds)));
    lines.push(line("kills", String(match.kills)));
    lines.push(line("deaths", String(match.deaths)));
    lines.push(line("headshots", `${match.headshots} (${headshotShare(match.headshots, match.kills)})`));
    lines.push(line("damage", String(match.damage)));
    lines.push(line("k/d", ratio(match.kills, match.deaths)));
    lines.push(line("duration", duration(match.seconds)));
    lines.push(line("when", safe(match.updated_at)));
  }
  lines.push("");
  lines.push(`${esc}2mesc back${esc}0m`);
  return lines;
}
/** The screen for a state and a frame of data, one line per row. */
export function render(state: State, data: Data): string[] {
  if (state.detail !== null) return renderDetail(data.matches.find((m) => m.id === state.detail));
  const cursor = clampCursor(state.cursor, rowCount(state.tab, data));
  const lines: string[] = [];
  lines.push(`${esc}1mcs${esc}0m  ${esc}2m${safe(data.where)} · ${data.total} match${data.total === 1 ? "" : "es"}${esc}0m`);
@@ -120,7 +171,7 @@
export function render(state: State, data: Data): string[] {
    });
  }
  lines.push("");
  lines.push(`${esc}2mj/k move · tab switch · x remove a match · r refresh · q quit${esc}0m`);
  lines.push(`${esc}2mj/k move · tab switch · enter open a match · x remove a match · r refresh · q quit${esc}0m`);
  lines.push(data.ssh === undefined
    ? `${esc}2mthe app's terminal is off${esc}0m`
    : `${esc}2mreach this terminal with: ${data.ssh}${esc}0m`);
		@@ -171,7 +171,10 @@ wants one, but the running server never reads it.
171	171	credited for the kill, the way blowing yourself up with your own grenade
172	172	never is.
173	173	A footstep only carries so far, but the bomb's beep and the blast that ends it
174		carry across the whole map. The leaderboard is a real SQLite table under
	174	carry across the whole map. Every row on the board and the match-over card
	175	both link to that one match's own page at `GET /m/<id>` — the same numbers
	176	the board already shows, held at an address worth coming back to. The
	177	leaderboard is a real SQLite table under
175	178	`FORGE_APP_DATA`, also served as plain JSON from `GET /api/leaderboard` for
176	179	the terminal or any other client — with a `guest` flag per row instead of the
177	180	identity it comes from, because a guest's identity is the session cookie that
		@@ -673,7 +676,10 @@ projections they feed cost 0.04 ms of a 16.7 ms frame, measured.
673	676	browser may claim, `src/who.ts` verifies the forge's signed identity
674	677	headers, `src/player.ts` turns "who is asking" into who a match is credited
675	678	to, `src/limit.ts` is the rate limit `POST /api/match` stands behind, and
676		`src/pages/game.ts` renders the page.
	679	`src/pages/game.ts` renders the page, and `src/pages/match.ts` renders one
	680	match's own page at `GET /m/<id>` — the id is a uuid, checked before it ever
	681	reaches `src/db.ts`'s `matchById`, so a malformed one is a 404 that never
	682	queries and an unknown one reads the same as a malformed one.
677	683	- `src/bundle.ts` bundles the client; `src/server.ts` runs it at start-up and
678	684	serves the result from memory as `/static/app.<hash>.js`, cached for a year.
679	685	`scripts/build.ts` is a thin CLI over the same function, for a file on disk.
		@@ -692,7 +698,9 @@ on a real pty over the same database: the same standings, the same matches, a
692	698	`who` column that says `signed` or `guest` (a terminal has no markup, so the
693	699	tag a name cannot fake is a column of its own), and `x` removes one.
694	700	<kbd>Tab</kbd> walks the three tabs — the third is the policy card the page
695		shows, which the tab key could not reach until now.
	701	shows, which the tab key could not reach until now. On the matches tab,
	702	<kbd>Enter</kbd> opens the selected row full-screen — the same fields
	703	`GET /m/<id>` renders — and <kbd>Esc</kbd> goes back.
696	704
697	705	The forge sets `PORT`, `FORGE_APP_DATA`, `FORGE_APP_ENV` (`production` or
698	706	`preview`), `FORGE_APP_URL`, `FORGE_APP_SSH`, `FORGE_APP_COMMIT` and
		@@ -92,3 +92,7 @@ test("every selector main.ts runs against the page it did not write matches some
92	92	expect(html).toContain(`<${selector}`);
93	93	}
94	94	});
	95
	96	test("the match-over card is pointed at the match that just finished, not the board", () => {
	97	expect(mainSource).toContain('$<HTMLAnchorElement>("summary-match").href = `/m/${matchId}`;');
	98	});
		@@ -757,6 +757,7 @@ function boot(): void {
757	757	$("summary-detail").textContent = summary.detail;
758	758	$("summary-score").textContent = summary.score;
759	759	$("summary-line").textContent = `${summary.name} — ${summary.line}`;
	760	$<HTMLAnchorElement>("summary-match").href = `/m/${matchId}`;
760	761	// Built once from board — already escaped — never patched frame by frame.
761	762	$("summary-board").innerHTML = finalBoardHtml(board);
762	763	show(summaryPanel, true);
		@@ -8,7 +8,7 @@ import { Database } from "bun:sqlite";
8	8	import { mkdtempSync } from "node:fs";
9	9	import { tmpdir } from "node:os";
10	10	import { join } from "node:path";
11		import { openDatabase, recentMatches, saveMatch, standings } from "./db.ts";
	11	import { matchById, openDatabase, recentMatches, saveMatch, standings } from "./db.ts";
12	12	import type { Result } from "./result.ts";
13	13
14	14	const dir = (): string => mkdtempSync(join(tmpdir(), "db-"));
		@@ -167,6 +167,21 @@ test("a match round-trips its state: finished, left, or still live", () => {
167	167	expect(recentMatches(db).find((m) => m.id === live.matchId)?.state).toBe("live");
168	168	});
169	169
	170	test("a known match is found by its id, with the same numbers recentMatches reads", () => {
	171	const db = openDatabase(dir());
	172	const match = result({ kills: 12, damage: 900 });
	173	expect(saveMatch(db, writer("user:u_1", "ada"), match)).toBe(true);
	174	const row = matchById(db, match.matchId);
	175	expect(row?.kills).toBe(12);
	176	expect(row?.damage).toBe(900);
	177	expect(row?.map).toBe("de_forge");
	178	});
	179
	180	test("an id nothing was ever saved under is not found", () => {
	181	const db = openDatabase(dir());
	182	expect(matchById(db, crypto.randomUUID())).toBe(null);
	183	});
	184
170	185	test("a late periodic post cannot undo a leave that already landed", () => {
171	186	const db = openDatabase(dir());
172	187	const w = writer("user:u_1", "ada");
		@@ -222,6 +222,19 @@ export const recentMatches = (db: Database, limit = 10): MatchRow[] =>
222	222	FROM match WHERE rounds > 0 ORDER BY updated_at DESC LIMIT ?1`,
223	223	).all(limit);
224	224
	225	/**
	226	* One match, by the id the browser generated for it — the same row shape as
	227	* `recentMatches`, so the page and the terminal's detail view read it the
	228	* same way they read the board. A match with no round played yet is `null`
	229	* here exactly as it is absent from the board: there is nothing to show.
	230	*/
	231	export const matchById = (db: Database, id: string): MatchRow \| null =>
	232	db.query<MatchRow, [string]>(
	233	`SELECT id, identity, session, name, map, kills, deaths, headshots, damage, rounds,
	234	score_mine, score_theirs, finished, walked_out, seconds, updated_at, ${STATE_SQL}
	235	FROM match WHERE id = ?1 AND rounds > 0`,
	236	).get(id);
	237
225	238	/**
226	239	* The table people actually look at: one row an identity, best first. The name
227	240	* shown is the one on that identity's most recent match, kept current by
		@@ -253,3 +266,7 @@ export const ratio = (kills: number, deaths: number): string =>
253	266
254	267	export const headshotShare = (headshots: number, kills: number): string =>
255	268	kills === 0 ? "—" : `${Math.round((headshots / kills) * 100)}%`;
	269
	270	/** How long a match took, as minutes:seconds — the one place seconds becomes a clock. */
	271	export const duration = (seconds: number): string =>
	272	`${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
		@@ -182,6 +182,15 @@ test("a recent match's row names the map it was played on", () => {
182	182	expect(html).toContain("de_forge");
183	183	});
184	184
	185	test("a recent match's row links to its own page", () => {
	186	const stats = openDatabase(mkdtempSync(join(tmpdir(), "game-page-")));
	187	const writer = { identity: "user:u_link", name: "reyes", guest: false, session: "f".repeat(32) };
	188	const played = matchResult();
	189	saveMatch(stats, writer, played);
	190	const html = statsHtml(stats, player);
	191	expect(html).toContain(`<a href="/m/${played.matchId}">`);
	192	});
	193
185	194	test("the leaderboard table carries the hook and labels a phone-width card layout needs", () => {
186	195	const stats = openDatabase(mkdtempSync(join(tmpdir(), "game-page-")));
187	196	const writer = { identity: "user:u_4", name: "sable", guest: false, session: "e".repeat(32) };
		@@ -40,8 +40,8 @@ export function statsHtml(db: Database, player: Player): string {
40	40	m.state === "finished" ? "" : m.state === "abandoned" ? " · abandoned" : " · in progress";
41	41	const feed = recent
42	42	.map(
43		(m) => `<li><b>${escape(m.name)}${tag(m.identity)}</b> ${m.score_mine}–${m.score_theirs} ` +
44		`<span>${escape(m.map)} · ${m.kills}k ${m.deaths}d · ${m.damage} damage${status(m)}</span> ` +
	43	(m) => `<li><a href="/m/${escape(m.id)}"><b>${escape(m.name)}${tag(m.identity)}</b> ${m.score_mine}–${m.score_theirs} ` +
	44	`<span>${escape(m.map)} · ${m.kills}k ${m.deaths}d · ${m.damage} damage${status(m)}</span></a> ` +
45	45	`<time>${escape(m.updated_at)}</time></li>`,
46	46	)
47	47	.join("");
		@@ -142,7 +142,7 @@ export function motionControl(id: "motion" \| "pause-motion"): string {
142	142	return `<label>Motion<select id="${id}">${options}</select></label>`;
143	143	}
144	144
145		const STYLE = `
	145	export const STYLE = `
146	146	:root { color-scheme: dark; --bg:#0b0d11; --panel:#141821; --line:#232a36; --text:#e7eaf0; --dim:#9aa4b4; --t:#e2b04a; --ct:#6fa8e8; }
147	147	* { box-sizing: border-box; }
148	148	body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif; }
		@@ -267,6 +267,8 @@ th, td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--li
267	267	th { color:var(--dim); font-weight:500; }
268	268	ul.recent { list-style:none; padding:0; margin:0; font-size:.86rem; }
269	269	ul.recent li { padding:.35rem 0; border-bottom:1px solid var(--line); display:flex; gap:.5rem; flex-wrap:wrap; }
	270	ul.recent a { color:inherit; text-decoration:none; display:flex; gap:.5rem; flex-wrap:wrap; align-items:baseline; }
	271	ul.recent a:hover, ul.recent a:focus { text-decoration:underline; }
270	272	ul.recent span, ul.recent time, .empty, .you { color:var(--dim); }
271	273	.you { font-size:.86rem; margin:.2rem 0 .6rem; }
272	274	.you b { color:var(--text); }
		@@ -416,6 +418,7 @@ export function gamePage(db: Database, options: PageOptions): string {
416	418	<p id="summary-detail"></p>
417	419	<p class="score" id="summary-score"></p>
418	420	<p id="summary-line"></p>
	421	<p><a id="summary-match" href="/">View this match</a></p>
419	422	<div id="summary-board"></div>
420	423	<div class="row">
421	424	<button type="button" class="primary" id="again">Play again</button>
		@@ -0,0 +1,53 @@
	1	/**
	2	* One match's own page: everything the board already shows about it, held
	3	* still at an address you can come back to. Nothing here that is not already
	4	* a column the board reads — no session, no identity string, one id in and
	5	* one row out.
	6	*/
	7
	8	import { duration, headshotShare, ratio, type MatchRow } from "../db.ts";
	9	import { isGuest } from "../player.ts";
	10	import { escape, STYLE } from "./game.ts";
	11
	12	const STATE_WORD: Record<MatchRow["state"], string> = {
	13	finished: "finished",
	14	abandoned: "abandoned",
	15	live: "in progress",
	16	};
	17
	18	export function matchPage(match: MatchRow): string {
	19	const tag = isGuest(match.identity) ? ` <span class="tag">guest</span>` : "";
	20	const title = `${match.name}${isGuest(match.identity) ? " (guest)" : ""} on ${match.map}`;
	21	const row = (k: string, v: string): string => `<tr><th>${escape(k)}</th><td>${v}</td></tr>`;
	22	return `<!doctype html>
	23	<html lang="en">
	24	<meta charset="utf-8">
	25	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
	26	<title>cs — ${escape(title)}</title>
	27	<style>${STYLE}</style>
	28	<header>
	29	<h1><a href="/">cs</a></h1>
	30	</header>
	31	<main>
	32	<p><a href="/">← Back to the board</a></p>
	33	<h2>${escape(match.name)}${tag} on ${escape(match.map)}</h2>
	34	<table>
	35	<tbody>
	36	${row("Score", `${match.score_mine}–${match.score_theirs}`)}
	37	${row("State", escape(STATE_WORD[match.state]))}
	38	${row("Map", escape(match.map))}
	39	${row("Rounds", String(match.rounds))}
	40	${row("Kills", String(match.kills))}
	41	${row("Deaths", String(match.deaths))}
	42	${row("Headshots", `${match.headshots} (${headshotShare(match.headshots, match.kills)})`)}
	43	${row("Damage", String(match.damage))}
	44	${row("K/D", ratio(match.kills, match.deaths))}
	45	${row("Duration", duration(match.seconds))}
	46	${row("When", escape(match.updated_at))}
	47	</tbody>
	48	</table>
	49	</main>
	50	<footer>cs · <a href="/">back to the leaderboard</a></footer>
	51	</html>
	52	`;
	53	}
		@@ -395,6 +395,54 @@ test("the endpoint is rate limited, and one player's flood is their own", async
395	395	expect((await post(result(), "", forge("u_calm", "calm"))).status).toBe(200);
396	396	});
397	397
	398	test("a known match has its own page, with the same numbers the board shows", async () => {
	399	const id = crypto.randomUUID();
	400	await post(result({ matchId: id, map: "de_forge", kills: 17, deaths: 6, headshots: 4, damage: 2100, rounds: 8, scoreMine: 5, scoreTheirs: 3, seconds: 700 }), "", forge("u_m1", "Solo"));
	401	const response = await fetch(base + "/m/" + id);
	402	expect(response.status).toBe(200);
	403	const body = await response.text();
	404	expect(body).toContain("Solo");
	405	expect(body).toContain("de_forge");
	406	expect(body).toContain("17");
	407	expect(body).toContain("6");
	408	expect(body).toContain("4");
	409	expect(body).toContain("2100");
	410	expect(body).toContain("5–3");
	411	expect(body).toContain("finished");
	412	});
	413
	414	test("a match page never shows a session id or an identity string", async () => {
	415	const id = crypto.randomUUID();
	416	const session = "5".repeat(32);
	417	await post(result({ matchId: id }), "cs_session=" + session);
	418	const body = await (await fetch(base + "/m/" + id)).text();
	419	expect(body).not.toContain(session);
	420	expect(body).not.toContain("guest:");
	421	expect(body).toContain("guest");
	422	});
	423
	424	test("an id nothing was ever posted under is a 404, and so is a malformed one", async () => {
	425	const unknown = await fetch(base + "/m/" + crypto.randomUUID());
	426	expect(unknown.status).toBe(404);
	427	for (const bad of ["not-a-uuid", "12345678-1234-1234-1234-12345678901", "../etc/passwd", ""]) {
	428	const response = await fetch(base + "/m/" + bad);
	429	expect([bad, response.status]).toEqual([bad, 404]);
	430	}
	431	});
	432
	433	test("HEAD on a match page answers like GET, under the floor and out of shared caches", async () => {
	434	const id = crypto.randomUUID();
	435	await post(result({ matchId: id }), "", forge("u_m2", "Headcheck"));
	436	const get = await server.fetch(new Request(base + "/m/" + id));
	437	const head = await server.fetch(new Request(base + "/m/" + id, { method: "HEAD" }));
	438	expect(head.status).toBe(200);
	439	expect(await head.arrayBuffer()).toEqual(new ArrayBuffer(0));
	440	expect(head.headers.get("content-length")).toBe(get.headers.get("content-length"));
	441	expect(head.headers.get("cache-control")).toBe("private, no-cache");
	442	expect(head.headers.get("content-security-policy")).toContain("default-src 'self'");
	443	expect(head.headers.get("x-content-type-options")).toBe("nosniff");
	444	});
	445
398	446	test("a guest is limited too, by the session they hold", async () => {
399	447	const cookie = "cs_session=" + "e".repeat(32);
400	448	let last = 200;
		@@ -9,9 +9,10 @@
9	9	import { join } from "node:path";
10	10	import { bundle } from "./bundle.ts";
11	11	import { acceptsGzip } from "./compress.ts";
12		import { openDatabase, saveMatch } from "./db.ts";
	12	import { matchById, openDatabase, saveMatch } from "./db.ts";
13	13	import { createLimiter, type Decision } from "./limit.ts";
14	14	import { escape, gamePage, leaderboardJson, statsHtml } from "./pages/game.ts";
	15	import { matchPage } from "./pages/match.ts";
15	16	import { credit } from "./player.ts";
16	17	import { parseResult } from "./result.ts";
17	18	import { identityWarning, whoIs, type Who } from "./who.ts";
		@@ -120,6 +121,11 @@ async function readBody(request: Request, max = BODY_MAX): Promise<Uint8Array \|
120	121	return body;
121	122	}
122	123
	124	// A match id is a uuid the browser generated with crypto.randomUUID(): the
	125	// one shape /m/<id> is ever allowed to mean. Checked here, before the id
	126	// reaches the database — a malformed one is a 404 that never queries.
	127	const MATCH_ID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
	128
123	129	// A session is only ever a name for "the browser that started this match", so
124	130	// one browser cannot overwrite another's result. It carries nothing else.
125	131	const SESSION_COOKIE = "cs_session";
		@@ -230,6 +236,24 @@ export async function serve(): Promise<ReturnType<typeof Bun.serve>> {
230	236	: new Response(JSON.stringify(leaderboardJson(db)), { headers });
231	237	}
232	238
	239	// One match, at the address every row on the board and the match-over
	240	// card link to. Not found and malformed read the same: a 404, and a
	241	// malformed id never reaches matchById at all.
	242	if ((request.method === "GET" \|\| request.method === "HEAD") && url.pathname.startsWith("/m/")) {
	243	const id = url.pathname.slice("/m/".length);
	244	const match = MATCH_ID.test(id) ? matchById(db, id) : null;
	245	if (match === null)
	246	return html(`<h1>Not found</h1><p><a href="/">Back to ${escape("cs")}</a></p>`, 404, {
	247	"cache-control": "private, no-cache",
	248	});
	249	const headers = {
	250	"content-type": "text/html; charset=utf-8",
	251	"cache-control": "private, no-cache",
	252	...SECURITY,
	253	};
	254	return encoded(request, encoder.encode(matchPage(match)), headers);
	255	}
	256
233	257	// HEAD is GET without the body: a health check sees the app up.
234	258	if (url.pathname === "/" && (request.method === "GET" \|\| request.method === "HEAD")) {
235	259	// A first visit is given its session here, and the page is rendered