components/system-map/system-map-html.ts

Functions

Imports

It imports components/system-map/system-map-data.ts, components/system-map/system-map-inside.ts. Imported by components/system-map/system-map-circles.ts, components/system-map/system-map-inside.ts, components/system-map/system-map.ts.

Source

1// The system map's markup: the whole contract as a string, for a server or a static build (system-map.ts).
2
3import { type Cell, EXTERNAL, LOOSE_KINDS, type Layout, type MapContainer, type MapRing, type MapSystem, R, STORE_KINDS, type SystemMapData, type SystemMapOptions, layoutMap } from "./system-map-data.ts";
4import { BOX_H, insideScene, playableFlows } from "./system-map-inside.ts";
5
6// ---------------------------------------------------------------------------------------
7// Rendering.
8
9const RING_NAMES: Record<MapRing, string> = { core: "Runs everything", shared: "Shared parts", used: "What people use" };
10
11export function escapeHtml(s: string): string {
12  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
13}
14
15export function hexPoints(x: number, y: number, r: number): string {
16  return Array.from({ length: 6 }, (_, i) => {
17    const a = (Math.PI / 3) * i;
18    return `${(x + r * Math.cos(a)).toFixed(1)},${(y + r * Math.sin(a)).toFixed(1)}`;
19  }).join(" ");
20}
21
22function tagOf(s: MapSystem): string {
23  return s.private ? "private" : (s.tag ?? "");
24}
25
26function tileSvg(cell: Cell, s: MapSystem | undefined, pressed = false, linked = false): string {
27  const pts = hexPoints(cell.x, cell.y, R - 2.5);
28  if (!s) return `<g class="cap-system-map-tile" data-empty><polygon points="${pts}"/></g>`;
29  const label = escapeHtml(s.short ?? s.name);
30  const tag = tagOf(s);
31  const core = s.ring === "core" && cell.ring === 0;
32  const nameY = core ? cell.y + 5 : tag ? cell.y + 1 : cell.y + 4;
33  const name = `<text class="cap-system-map-name" x="${cell.x}" y="${nameY}">${label}</text>`;
34  // The leading space keeps the two lines apart as words in the tile's text ("Capsomer shared",
35  // matching its name "Capsomer, shared"); SVG drops it when drawing.
36  const sub = tag && !core ? `<text class="cap-system-map-tag" x="${cell.x}" y="${cell.y + 16}"> ${escapeHtml(tag)}</text>` : "";
37  const flags = `${core ? " data-core" : ""}${s.ring === "shared" ? " data-shared" : ""}${s.private ? " data-private" : ""}${pressed ? ` aria-pressed="true"` : linked ? " data-linked" : ""}`;
38  return `<g class="cap-system-map-tile" data-id="${escapeHtml(s.id)}" data-x="${cell.x}" data-y="${cell.y}" data-ring="${cell.ring}"${flags}><polygon points="${pts}"/>${name}${sub}</g>`;
39}
40
41// The lines run in the seams between capsomers and are drawn beneath them, so no line
42// ever crosses a label: each is the shortest walk along the hexagons' sides from a corner
43// of one capsomer to a corner of the other (seat ruling on capsomer#57, 2026-10-10). Among
44// walks of the same length the one nearest the straight line between the two wins. The
45// grid is a few dozen corners, so a plain search does it: no layout engine.
46
47const cornerKey = (x: number, y: number) => `${Math.round(x * 10)},${Math.round(y * 10)}`;
48
49function cornersOf(c: Cell): Array<[number, number]> {
50  return Array.from({ length: 6 }, (_, i) => {
51    const a = (Math.PI / 3) * i;
52    return [Math.round((c.x + R * Math.cos(a)) * 100) / 100, Math.round((c.y + R * Math.sin(a)) * 100) / 100] as [number, number];
53  });
54}
55
56/** The walk along the seams from capsomer `a` to capsomer `b`, as the corners it passes.
57 *  Neighbours share a side, and their line is that side. */
58export function seamRoute(cells: readonly Cell[], a: Cell, b: Cell): Array<[number, number]> {
59  const at = new Map<string, [number, number]>();
60  const next = new Map<string, Set<string>>();
61  for (const c of cells) {
62    const cs = cornersOf(c);
63    cs.forEach(([x, y], i) => {
64      const k = cornerKey(x, y);
65      const [nx, ny] = cs[(i + 1) % 6]!;
66      const nk = cornerKey(nx, ny);
67      at.set(k, [x, y]);
68      at.set(nk, [nx, ny]);
69      if (!next.has(k)) next.set(k, new Set());
70      if (!next.has(nk)) next.set(nk, new Set());
71      next.get(k)!.add(nk);
72      next.get(nk)!.add(k);
73    });
74  }
75  const starts = new Set(cornersOf(a).map(([x, y]) => cornerKey(x, y)));
76  const ends = new Set(cornersOf(b).map(([x, y]) => cornerKey(x, y)));
77  const shared = [...starts].filter((k) => ends.has(k));
78  if (shared.length >= 2) return shared.slice(0, 2).map((k) => at.get(k)!);
79  // How far a side's middle is from the straight line a-b, as a tie-break well under
80  // the cost of a side.
81  const lx = b.x - a.x;
82  const ly = b.y - a.y;
83  const len = Math.hypot(lx, ly) || 1;
84  const off = (p: [number, number], q: [number, number]) => Math.abs(((p[0] + q[0]) / 2 - a.x) * ly - ((p[1] + q[1]) / 2 - a.y) * lx) / len / (R * 100);
85  const cost = new Map<string, number>([...starts].map((k) => [k, 0]));
86  const from = new Map<string, string>();
87  const done = new Set<string>();
88  for (;;) {
89    let here: string | null = null;
90    for (const [k, v] of cost) if (!done.has(k) && (here === null || v < cost.get(here)!)) here = k;
91    if (here === null) return [];
92    if (ends.has(here)) {
93      const walk = [here];
94      while (from.has(walk[0]!)) walk.unshift(from.get(walk[0]!)!);
95      return walk.map((k) => at.get(k)!);
96    }
97    done.add(here);
98    for (const k of next.get(here) ?? []) {
99      if (done.has(k)) continue;
100      const v = cost.get(here)! + 1 + off(at.get(here)!, at.get(k)!);
101      if (v < (cost.get(k) ?? Number.POSITIVE_INFINITY)) {
102        cost.set(k, v);
103        from.set(k, here);
104      }
105    }
106  }
107}
108
109function edgePath(cells: readonly Cell[], a: Cell, b: Cell): string {
110  const f = (n: number) => n.toFixed(1);
111  return seamRoute(cells, a, b)
112    .map(([x, y], i) => `${i ? "L" : "M"}${f(x)},${f(y)}`)
113    .join(" ");
114}
115
116export interface Box {
117  c: MapContainer;
118  x: number;
119  y: number;
120  w: number;
121}
122
123const f1 = (n: number) => Math.round(n * 10) / 10;
124
125function insideSvg(layout: Layout, core: MapSystem | undefined, data: SystemMapData, playable: boolean): string {
126  const containers = core ? (data.containers ?? []).filter((c) => c.system === core.id) : [];
127  if (!core || containers.length === 0) return "";
128  const scene = insideScene(containers, data.relationships ?? [], layout, `Inside ${core.name}`);
129  const wires = scene.wires
130    .map(({ from, to, route }) => {
131      const pts = route.map(([x, y]) => `${f1(x)},${f1(y)}`);
132      return `<path class="cap-system-map-wire" data-from="${escapeHtml(from)}" data-to="${escapeHtml(to)}" data-route="${pts.join(" ")}" d="M${pts.join(" L")}"/>`;
133    })
134    .join("");
135  const rects = scene.boxes
136    .map(({ c, x, y, w }) => {
137      const store = STORE_KINDS.has(c.kind);
138      const flag = store ? " data-store" : c.kind === EXTERNAL ? " data-external" : "";
139      return `<g class="cap-system-map-box" data-id="${escapeHtml(c.id)}" data-x="${x}" data-y="${y}"${flag}><rect x="${f1(x - w / 2)}" y="${f1(y - BOX_H / 2)}" width="${w}" height="${BOX_H}" rx="${store ? 14 : 6}"/><text class="cap-system-map-box-name" x="${x}" y="${f1(y - 1)}">${escapeHtml(c.name)}</text><text class="cap-system-map-box-kind" x="${x}" y="${f1(y + 11)}">${escapeHtml(c.technology ?? c.kind)}</text></g>`;
140    })
141    .join("");
142  const b = scene.boundary;
143  const [vx, vy, vw, vh] = scene.viewBox;
144  return `<svg class="cap-system-map-layer" data-layer="inside" viewBox="${f1(vx)} ${f1(vy)} ${f1(vw)} ${f1(vh)}" aria-hidden="true" focusable="false"><circle class="cap-system-map-boundary" cx="${f1(b.cx)}" cy="${f1(b.cy)}" r="${f1(b.r)}"/><text class="cap-system-map-inside-title" x="${f1(scene.label.textX)}" y="${f1(scene.label.textY)}"${scene.label.squeeze ? ` textLength="${f1(scene.label.squeeze)}" lengthAdjust="spacingAndGlyphs"` : ""}>${escapeHtml(scene.label.text)}</text>${wires}${rects}${playable ? `<circle class="cap-system-map-token" r="6" cx="0" cy="0"/>` : ""}</svg>`;
145}
146
147/**
148 * The whole map as HTML: the head with the view switch, the stage (the core, the inner
149 * rings and the rim as three layers, the lines, and the inside), the detail line, and the
150 * same data as a list, grouped by ring (or by group). Every text is escaped. Delivered with no script,
151 * the drawing is a picture with a label and the list is open.
152 */
153export function systemMapHtml(data: SystemMapData, options: SystemMapOptions = {}): string {
154  const id = options.id ?? "system-map";
155  const label = options.label ?? "System map";
156  const names = { ...RING_NAMES, ...options.ringNames };
157  const h = `h${options.headingLevel ?? 3}`;
158  const layout = layoutMap(data.systems);
159  const byId = new Map(data.systems.map((s) => [s.id, s]));
160  const at = new Map(layout.cells.filter((c) => c.id).map((c) => [c.id!, c]));
161  const vb = layout.viewBox.map((n) => n.toFixed(1)).join(" ");
162  // With circles, every system has an inside of its own, and the one chosen is drawn zoomed
163  // into, its lines on and the systems at their far ends linked, as the script leaves it.
164  const circles = options.circles;
165  const chosen = circles?.chosen && at.has(circles.chosen) ? circles.chosen : undefined;
166  const linked = new Set((data.relationships ?? []).flatMap((l) => (chosen && l.from === chosen ? [l.to] : chosen && l.to === chosen ? [l.from] : [])));
167  const layer = (name: string, cells: Cell[]) =>
168    `<svg class="cap-system-map-layer" data-layer="${name}" viewBox="${vb}" aria-hidden="true" focusable="false">${cells.map((c) => tileSvg(c, c.id ? byId.get(c.id) : undefined, c.id === chosen, linked.has(c.id ?? ""))).join("")}</svg>`;
169  const rim = layout.rings;
170  const coreCells = layout.cells.filter((c) => c.ring === 0);
171  // Grouped, the gaps are not drawn, and every group goes behind the circle inside, as the
172  // rim does: the groups are what people use, whatever ring a cell of theirs is on.
173  const drawn = layout.grouped ? layout.cells.filter((c) => c.id) : layout.cells;
174  const outerCell = (c: Cell) => (layout.grouped ? byId.get(c.id!)?.ring === "used" : c.ring === rim);
175  const innerCells = drawn.filter((c) => c.ring > 0 && !outerCell(c));
176  const rimCells = rim > 0 ? drawn.filter((c) => c.ring > 0 && outerCell(c)) : [];
177  const labels = layout.labels
178    .map((l) => `<text class="cap-system-map-group-label" x="${l.x}" y="${l.y}">${escapeHtml(l.text)}</text>`)
179    .join("");
180  const onMap = new Set(at.keys());
181  const edges = (data.relationships ?? [])
182    .filter((l) => onMap.has(l.from) && onMap.has(l.to) && l.from !== l.to)
183    .map((l) => `<path class="cap-system-map-edge" data-from="${escapeHtml(l.from)}" data-to="${escapeHtml(l.to)}" data-kind="${escapeHtml(l.kind)}"${LOOSE_KINDS.has(l.kind) ? " data-loose" : ""}${chosen && (l.from === chosen || l.to === chosen) ? " data-on" : ""} d="${edgePath(layout.cells, at.get(l.from)!, at.get(l.to)!)}"/>`)
184    .join("");
185  const core = data.systems.find((s) => s.ring === "core");
186  const placed = data.systems.filter((s) => onMap.has(s.id));
187  // The list in the map's own sections: the rings, or, grouped, the core, the shared ring
188  // and each group in turn.
189  const sections: Array<[string, MapSystem[]]> = (["core", "shared", "used"] as const).flatMap((ring) => {
190    const items = placed.filter((s) => s.ring === ring);
191    if (ring !== "used" || !layout.grouped) return [[names[ring], items] as [string, MapSystem[]]];
192    return [...new Set(items.map((s) => s.group ?? ""))].map((g) => [g || names.used, items.filter((s) => (s.group ?? "") === g)] as [string, MapSystem[]]);
193  });
194  const list = sections
195    .map(([title, items]) => {
196      if (items.length === 0) return "";
197      const lis = items
198        .map((s) => {
199          const parts = [`<span class="cap-system-map-item-name">${escapeHtml(s.name)}</span>`];
200          if (tagOf(s)) parts.push(`<span class="cap-system-map-item-tag">${escapeHtml(tagOf(s))}</span>`);
201          if (s.description) parts.push(`<span class="cap-system-map-item-text">${escapeHtml(s.description)}</span>`);
202          if (s.domain) parts.push(`<span class="cap-system-map-item-domain">${escapeHtml(s.domain)}</span>`);
203          if (s.href) parts.push(`<a class="cap-system-map-item-link" href="${escapeHtml(s.href)}">${escapeHtml(options.openLabel ?? "Open")}<span class="cap-sr-only"> ${escapeHtml(s.name)}</span></a>`);
204          return `<li data-id="${escapeHtml(s.id)}">${parts.join(" ")}</li>`;
205        })
206        .join("");
207      return `<section class="cap-system-map-group"><${h} class="cap-system-map-group-name">${escapeHtml(title)}</${h}><ul>${lis}</ul></section>`;
208    })
209    .join("");
210  const caption = options.caption ? `<p class="cap-system-map-caption">${escapeHtml(options.caption)}</p>` : "";
211  // Each flow as an ordered list, step by step: the whole story with no script, and the
212  // steps the script plays (a step's line, the end it moves toward and what it lights).
213  const playable = playableFlows(data, core, layout);
214  const given = circles?.layers ?? {};
215  // The core's circle first: its flows play on it.
216  const insides = circles
217    ? Object.keys(given)
218        .sort((a, b) => Number(b === core?.id) - Number(a === core?.id))
219        .map((k) => (k === chosen ? given[k]!.replace(`data-system="${escapeHtml(k)}"`, (m) => `${m} data-shown`) : given[k]!))
220        .join("")
221    : insideSvg(layout, core, data, playable.length > 0);
222  const enters = circles ? "zooms into it" : `draws its connections${core ? `; on ${escapeHtml(core.name)}, Enter again goes inside` : ""}`;
223  const flows = playable
224    .map((f) => {
225      const steps = f.steps
226        .map((st) => `<li data-from="${escapeHtml(st.from)}" data-to="${escapeHtml(st.to)}" data-toward="${escapeHtml(st.toward)}"${st.lights?.length ? ` data-lights="${escapeHtml(st.lights.join(" "))}"` : ""}>${escapeHtml(st.text)}</li>`)
227        .join("");
228      return `<section class="cap-system-map-flow" data-flow="${escapeHtml(f.id)}"><${h} class="cap-system-map-flow-name">${escapeHtml(f.name)}</${h}>${f.description ? `<p class="cap-system-map-flow-text">${escapeHtml(f.description)}</p>` : ""}<ol>${steps}</ol></section>`;
229    })
230    .join("");
231  return [
232    `<figure class="cap-system-map" data-cap="system-map" data-view="shell" id="${escapeHtml(id)}" aria-labelledby="${escapeHtml(id)}-title"${options.openLabel ? ` data-open-label="${escapeHtml(options.openLabel)}"` : ""}${circles ? ` data-circles${circles.src ? ` data-insides="${escapeHtml(circles.src)}"` : ""}` : ""}${chosen ? ` data-selected data-entered data-zoom="${escapeHtml(chosen)}"` : ""}>`,
233    `<figcaption class="cap-system-map-head"><span class="cap-system-map-title" id="${escapeHtml(id)}-title">${escapeHtml(label)}</span>${caption}`,
234    `<span class="cap-system-map-views" role="group" aria-label="View" data-cap-part="views" hidden><button type="button" class="cap-btn" data-view="shell" aria-pressed="true">Capsid</button><button type="button" class="cap-btn" data-view="plain" aria-pressed="false">Plain map</button>${circles ? `<button type="button" class="cap-btn" data-cap-part="out"${chosen ? "" : " hidden"}>Back to all systems</button>` : ""}</span></figcaption>`,
235    `<div class="cap-system-map-stage" data-cap-part="stage" role="img" aria-label="${escapeHtml(label)}: ${placed.length} systems ${layout.grouped ? "in groups" : "in rings"}. The list below holds the same.">`,
236    // The lines first, so every capsomer and its label is painted over them.
237    `<svg class="cap-system-map-layer" data-layer="edges" viewBox="${vb}" aria-hidden="true" focusable="false">${edges}</svg>`,
238    layer("core", coreCells),
239    innerCells.length ? layer("inner", innerCells) : "",
240    rimCells.length ? layer("rim", rimCells) : "",
241    labels ? `<svg class="cap-system-map-layer" data-layer="labels" viewBox="${vb}" aria-hidden="true" focusable="false">${labels}</svg>` : "",
242    insides,
243    `</div>`,
244    `<div class="cap-system-map-detail" data-cap-part="detail" aria-live="polite" hidden></div>`,
245    `<span id="${escapeHtml(id)}-keys" hidden>Arrow keys move between systems. Enter or Space chooses one and ${enters}. Escape steps back out.${flows ? " Playing a flow, the left and right arrows and the number keys move between its steps." : ""}</span>`,
246    `<details class="cap-system-map-list" data-cap-part="list" open><summary>The same map as a list</summary><div class="cap-system-map-groups">${list}</div></details>`,
247    flows ? `<details class="cap-system-map-flows" data-cap-part="flows" open><summary>Inside ${escapeHtml(core?.name ?? "")}, step by step</summary>${flows}</details>` : "",
248    `</figure>`,
249  ].join("");
250}