Fixed division end of track labels and other minor bugs. Trains now show their information. Play cards now required to get to 3 or less, no other restrictions. auto hide now more prominent. it and sounds now are in replay.

test/replay.test.ts

@@ -231,7 +231,21 @@ describe('replay HTML', () => {
     const els = new Map<string, Record<string, unknown>>();
     const stub = {
       getElementById: (id: string) => {
-        if (!els.has(id)) els.set(id, { textContent: '', innerHTML: '', value: '', style: {}, max: 0 });
+        if (!els.has(id)) {
+          // A faithful-enough element. `classList` matters: the page folds the district panel by
+          // toggling a class, and a stub without one throws — which is a page that never renders,
+          // not a cosmetic gap.
+          const classes = new Set<string>();
+          els.set(id, {
+            textContent: '', innerHTML: '', value: '', style: {}, max: 0, onclick: null,
+            classList: {
+              add: (c: string) => void classes.add(c),
+              remove: (c: string) => void classes.delete(c),
+              contains: (c: string) => classes.has(c),
+            },
+            querySelector: () => null,
+          });
+        }
         return els.get(id);
       },
     };
@@ -287,7 +301,21 @@ describe('replay HTML', () => {
     const els = new Map<string, Record<string, unknown>>();
     const stub = {
       getElementById: (id: string) => {
-        if (!els.has(id)) els.set(id, { textContent: '', innerHTML: '', value: '', style: {}, max: 0 });
+        if (!els.has(id)) {
+          // A faithful-enough element. `classList` matters: the page folds the district panel by
+          // toggling a class, and a stub without one throws — which is a page that never renders,
+          // not a cosmetic gap.
+          const classes = new Set<string>();
+          els.set(id, {
+            textContent: '', innerHTML: '', value: '', style: {}, max: 0, onclick: null,
+            classList: {
+              add: (c: string) => void classes.add(c),
+              remove: (c: string) => void classes.delete(c),
+              contains: (c: string) => classes.has(c),
+            },
+            querySelector: () => null,
+          });
+        }
         return els.get(id);
       },
     };
@@ -350,3 +378,41 @@ describe('the replay wire format is lossless (regression)', () => {
     );
   });
 });
+
+
+describe('the replay behaves like the game it is replaying', () => {
+  it('carries the sounds each frame earned, and the one implementation that plays them', () => {
+    // A replay is for watching a game back, so it should sound and fold like the game. Both use the
+    // SAME functions — `cuesFor` decides what happened, `playCue` decides what it sounds like —
+    // embedded by toString() exactly as the board renderers are. A second copy would drift, and a
+    // replay that sounds different from the game is worse than a replay with no sound.
+    const rec = record(880009, 'standard', 4000);
+    const withCues = rec.frames.filter((f) => (f.cues?.length ?? 0) > 0);
+    assert.ok(withCues.length > 20, `only ${withCues.length} frames carry a cue`);
+
+    const kinds = new Set(withCues.flatMap((f) => f.cues ?? []));
+    assert.ok(kinds.has('stage'), 'no Stage ever sounded');
+    assert.ok(kinds.has('day'), 'no Day ever sounded');
+    assert.ok(kinds.has('train'), 'no train was ever announced');
+
+    // One cue per Stage boundary, the bell replacing the whistle at a Day — the same accounting the
+    // live game is held to.
+    let boundaries = 0;
+    for (let k = 1; k < rec.frames.length; k++) {
+      const a = rec.frames[k - 1]!;
+      const b = rec.frames[k]!;
+      if (a.day !== b.day || a.stage !== b.stage) boundaries++;
+    }
+    const clock = withCues.flatMap((f) => f.cues ?? []).filter((c) => c !== 'train').length;
+    assert.equal(clock, boundaries, 'Stage boundaries and Stage-or-Day cues disagree');
+  });
+
+  it('serves the controls for both, and embeds the player', () => {
+    const html = renderHtml(record(880009, 'standard', 900));
+    for (const id of ['sound', 'districttoggle', 'districtsummary']) {
+      assert.ok(html.includes(`id="${id}"`), `the replay has no #${id}`);
+    }
+    assert.match(html, /const playCue = function/, 'the sound player is referenced but not embedded');
+    assert.match(html, /#district\.folded/, 'nothing folds the district away');
+  });
+});