user card Hand becomes the action surface, the board shows the train, and a reverse stops turning it around, other bug fixes too.

src/sim/replay.ts

@@ -37,6 +37,7 @@ import type { Frame } from './view.ts';
 import type { Decision } from './view.ts';
 import { cardName, describeDecision, snapshot, trainName } from './view.ts';
 import { BOARD_CSS, divisionSvg, officeSvg } from './board-svg.ts';
+import { TURNCHART_CSS, turnChartHtml } from './turnchart.ts';
 import { playCue } from '../web/sound.ts';
 
 // ---------------------------------------------------------------------------
@@ -201,7 +202,9 @@ export function compress(frames: Frame[]): Packed {
       // Identity, not equality: `snapshot` pushes the very same FacilityView object into both the
       // cell and the frame's `facilities`, so this always resolves.
       const fi = c.facility ? f.facilities.indexOf(c.facility) : -1;
-      return [ci, wi, c.enhancements, c.tray, c.cars, fi];
+      // `train` rides whole rather than being interned: it changes almost every frame, so a table
+      // of them would be as long as the frames are and buy nothing.
+      return [ci, wi, c.enhancements, c.tray, c.cars, fi, c.train, c.ad];
     });
     return { ...f, cells } as unknown as Frame;
   });
@@ -235,12 +238,14 @@ export function rehydrateCells(
   facs: unknown[],
 ): unknown[] {
   return packed.map((row) => {
-    const p = row as [number, number, string[], string | null, string[], number];
+    const p = row as [number, number, string[], string | null, string[], number, unknown, unknown];
     const c = cards[p[0]] as [number, number, string, string, boolean, string[]];
     return {
       row: c[0], col: c[1], kind: c[2], label: c[3], running: c[4], links: c[5],
       what: whats[p[1]], enhancements: p[2], tray: p[3], cars: p[4],
       facility: p[5] < 0 ? null : facs[p[5]],
+      train: p[6] ?? null,
+      ad: p[7] ?? null,
     };
   });
 }
@@ -253,6 +258,7 @@ export function renderHtml(rec: Recording): string {
 <title>Station Master — replay seed ${rec.seed}</title>
 <style>
 ${BOARD_CSS}
+${TURNCHART_CSS}
 
 :root{--bg:#14161a;--fg:#e8e6e3;--dim:#8b9199;--line:#2c3138;--panel:#1b1f25;
 --good:#5fd08a;--bad:#ff7a70;--clock:#7fb8ff;--warn:#ffc46b;--green:#2f6b47;--red:#6b3230;--maw:#2a4a6b}
@@ -344,15 +350,17 @@ kbd{background:#2a3038;border:1px solid var(--line);border-radius:3px;padding:0
 <header>
   <h1>Station Master — replay · seed ${rec.seed} · ${rec.length} (target ${target.target} over ${target.days} Days) · ${esc(rec.outcome)}</h1>
   <div class="bar">
-    <span class="big" id="when">—</span>
-    <span>phase <b id="phase">—</b></span>
-    <span class="dim">actor <span id="actor">—</span> · fedora <span id="super">—</span></span>
+    <span class="dim">fedora <span id="super">—</span></span>
     <span>revenue <b class="big" id="rev">0</b></span>
     <span class="dim">deck <span id="deck">0</span></span>
     <span class="dim">frame <span id="fno">0</span>/<span id="ftot">0</span></span>
   </div>
 </header>
 
+<!-- The live game's turn chart, from the same renderer, so where you are in the Day looks the same
+     whether you are playing or watching. -->
+<div id="turnchart"></div>
+
 <div class="wrap">
   <div>
     <section><h2>Division — west to east</h2><div class="div-strip" id="division"></div></section>
@@ -414,6 +422,7 @@ kbd{background:#2a3038;border:1px solid var(--line);border-radius:3px;padding:0
    from the same state, which is the one failure a track diagram exists to prevent. */
 const divisionSvg = ${divisionSvg.toString()};
 const officeSvg = ${officeSvg.toString()};
+const turnChartHtml = ${turnChartHtml.toString()};
 const playCue = ${playCue.toString()};
 
 const PACKED = ${JSON.stringify(compress(rec.frames))};
@@ -458,9 +467,7 @@ function boxes(items, cap, cls) {
 
 function render() {
   const f = FRAMES[i];
-  $('when').textContent = 'Day ' + f.day + ' · Stage ' + f.stage + ' · ' + f.clock;
-  $('phase').textContent = f.phase;
-  $('actor').textContent = f.actor === null ? 'automatic' : 'P' + f.actor;
+  $('turnchart').innerHTML = turnChartHtml(f, f.actor === null ? null : 'Player ' + (f.actor + 1));
   $('super').textContent = 'P' + f.superintendent;
   $('rev').textContent = f.revenue;
   $('rev').className = 'big ' + (f.revenue < 0 ? 't-bad' : f.revenue > 0 ? 't-good' : '');