/**
 * The playable browser build.
 *
 * These tests drive `game.ts` exactly as the page does — take the offered actions, submit one, look
 * at the new position — so "it compiles" is never mistaken for "it plays".
 */

import { describe, it } from 'node:test';
import assert from 'node:assert/strict';
import { turnOf } from '../src/engine/state.ts';
import { execFileSync } from 'node:child_process';
import { existsSync, readFileSync, readdirSync } from 'node:fs';
import { dirname, join, resolve } from 'node:path';
// The REAL one. An earlier test in this file replaces `globalThis.URLSearchParams` with a two-line
// stub, and the dialog needs `set` as well as `get` — reading the global here would hand the page
// whichever stub happened to run last.
import { URLSearchParams as NodeURLSearchParams } from 'node:url';

import { cardDescription, cardName, describeIntent, variantLabel } from '../src/sim/view.ts';
import { variantsFor } from '../src/engine/track.ts';
import { divisionSvg, officeSvg } from '../src/sim/board-svg.ts';
import { ENHANCEMENT_RULES } from '../src/engine/content.ts';
import { facilitiesHtml, timetableHtml } from '../src/web/panels.ts';
import { record, renderHtml } from '../src/sim/replay.ts';
import { snapshot } from '../src/sim/view.ts';
import { createGame as createEngineGame } from '../src/engine/setup.ts';
import {
  overHandLimit,
  actionGroups,
  actionMenu,
  handPlayable,
  currentActor,
  fromSave,
  newGame,
  submit,
  toSave,
  undo,
  view,
} from '../src/web/game.ts';

const root = join(import.meta.dirname, '..');
const dist = join(root, 'dist');

/** Play a whole game by always taking the first offered action. */
function playThrough(seed: number, maxTurns = 20_000) {
  const game = newGame(seed);
  let turns = 0;
  for (; turns < maxTurns; turns++) {
    if (currentActor(game) === null) break;
    const { options, groups } = actionGroups(game);
    if (groups.length === 0 || options.length === 0) break;
    const first = groups[0]!.actions[0]!;
    if (!submit(game, options[first.index]!)) break;
  }
  return { game, turns };
}


/**
 * Force a specific TRACK card into hand and return the `card.play` option that would lay it.
 *
 * Track is drawn from the Home Office deck like everything else, so a test that needs a particular
 * piece has to deal itself one rather than assume the opening hand holds it.
 */
function dealTrack(
  game: ReturnType<typeof newGame>,
  geometry: string,
  hand: string,
  where?: (o: { row: number; col: number }) => boolean,
) {
  for (const [id, card] of game.state.cards) {
    const k = card.kind as { kind: string; geometry?: string; hand?: string };
    if (k.kind !== 'track' || k.geometry !== geometry || k.hand !== hand) continue;
    game.state.decks.hands.set(0, [id]);
    const option = actionGroups(game).options.find(
      (o) => o.type === 'card.play' && o.cardId === id && o.placement !== undefined && (!where || where(o.placement)),
    );
    return { cardId: id, option };
  }
  throw new Error(`no track card: ${geometry}/${hand}`);
}

describe('the browser game plays', () => {
  it('reaches the end of a game through the same calls the page makes', () => {
    const { game, turns } = playThrough(77);
    assert.ok(turns > 50, `only ${turns} decisions — the game stalled`);
    assert.equal(game.state.status, 'finished');
    assert.ok(game.state.outcome !== null, 'a finished game must have an outcome');
  });

  it('never offers an action the engine then refuses', () => {
    // The action list comes from legalActions, which delegates to check — so every button on the
    // page must be accepted. A rejection here means the UI and the rules disagree.
    const game = newGame(21);
    for (let i = 0; i < 300; i++) {
      if (currentActor(game) === null) break;
      const { options, groups } = actionGroups(game);
      if (groups.length === 0) break;
      const pick = groups[groups.length - 1]!.actions[0]!;
      assert.ok(submit(game, options[pick.index]!), 'the engine refused an offered action');
    }
  });

  it('offers every legal action somewhere, dropping none', () => {
    // Grouping is presentation. If a kind is not named in GROUP_ORDER it must still appear, or a
    // legal move becomes unreachable in a way that is very hard to notice.
    const game = newGame(5);
    for (let i = 0; i < 120; i++) {
      if (currentActor(game) === null) break;
      const { options, groups } = actionGroups(game);
      if (options.length === 0) break;
      const shown = new Set(groups.flatMap((g) => g.actions.map((a) => a.index)));
      const kinds = new Set(options.map((o) => o.type));
      const shownKinds = new Set([...shown].map((i2) => options[i2]!.type));
      assert.deepEqual(shownKinds, kinds, 'a kind of legal action was not offered at all');
      submit(game, options[[...shown][0]!]!);
    }
  });

  it('restores a saved game to the same position', () => {
    // A save is the seed plus the intents; replaying them must reproduce the game exactly. That is
    // the payoff of event sourcing, and it is only true while the RNG stays seeded.
    const game = newGame(909);
    for (let i = 0; i < 80; i++) {
      if (currentActor(game) === null) break;
      const { options, groups } = actionGroups(game);
      if (groups.length === 0) break;
      submit(game, options[groups[0]!.actions[0]!.index]!);
    }

    const restored = fromSave(toSave(game));
    assert.equal(restored.state.players[0]!.revenue, game.state.players[0]!.revenue);
    assert.equal(restored.state.clock.day, game.state.clock.day);
    assert.equal(restored.state.clock.stage, game.state.clock.stage);
    assert.equal(restored.state.status, game.state.status);
    assert.deepEqual(view(restored).cells, view(game).cells, 'the board differs after restore');
  });

  it('is deterministic — the same seed deals the same game', () => {
    const a = playThrough(4242).game;
    const b = playThrough(4242).game;
    assert.equal(a.state.players[0]!.revenue, b.state.players[0]!.revenue);
    assert.deepEqual(view(a).cells, view(b).cells);
  });
});

describe('the action menu presents choices the way they are made', () => {
  it('offers a card ONCE, with its locations underneath', () => {
    // A single turn offered 29 track buttons and 7 card buttons in one flat list, with no way to
    // tell which square each referred to. Subject first, location second.
    const game = newGame(555);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);

    const menu = actionMenu(game);
    const items = menu.placeable.flatMap((g) => g.items);
    assert.ok(items.length > 0, 'nothing placeable was offered');

    const keys = items.map((i) => i.subjectKey);
    assert.equal(new Set(keys).size, keys.length, 'the same card appeared as two subjects');
    for (const item of items) {
      const labels = item.spots.map((sp) => sp.label);
      assert.equal(new Set(labels).size, labels.length, `${item.subject} lists a spot twice`);
      assert.ok(item.spots.length > 0, `${item.subject} has nowhere to go but was offered`);
    }
  });

  it('loses no legal action in the reshuffle', () => {
    // Splitting into direct + placeable must not drop anything: every option must still be reachable.
    const game = newGame(88);
    for (let i = 0; i < 120; i++) {
      if (currentActor(game) === null) break;
      const menu = actionMenu(game);
      if (menu.options.length === 0) break;
      const reachable = new Set([
        ...menu.direct.flatMap((g) => g.actions.map((a) => a.index)),
        ...menu.placeable.flatMap((g) => g.items.flatMap((it) => it.spots.map((sp) => sp.index))),
      ]);
      const kinds = new Set(menu.options.map((o) => o.type));
      const shown = new Set([...reachable].map((k) => menu.options[k]!.type));
      assert.deepEqual(shown, kinds, 'a kind of legal action became unreachable');
      submit(game, menu.options[[...reachable][0]!]!);
    }
  });

  it('names the card on top of every Department pile', () => {
    // "Department 2" is unusable information: the whole point of a face-up pile is choosing it on
    // sight, and only the top card may be taken.
    const game = newGame(555);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    // The draw actions are split by SOURCE now — gambling on the deck, taking a named face-up
    // card, and ending the turn are three different decisions — so gather every group that offers
    // one rather than looking for a single group called "Draw".
    const menu = actionMenu(game);
    const draws = menu.direct.filter((g) =>
      g.actions.some((a) => menu.options[a.index]?.type?.startsWith('draw.')),
    );
    assert.ok(draws.length > 0, 'no draw actions are offered at all');
    for (const g of draws) {
      for (const a of g.actions) {
        assert.ok(!/^draw\.|^slot \d+$/.test(a.label), `raw intent name on a button: ${a.label}`);
      }
    }
    assert.ok(
      draws.flatMap((g) => g.actions).some((a) => /from Department \d/.test(a.label)),
      'Department piles are not named',
    );
  });

  it('offers all three Departments for a discard, not one collapsed button', () => {
    // REGRESSION. Every discard described itself as just "discard X", and the action list drops
    // duplicate labels — so three genuinely different choices collapsed into one button and the
    // Department could not be picked at all. Naming the pile, and what the card would bury, is what
    // makes the choice a choice.
    const game = newGame(555);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    submit(game, actionGroups(game).options.find((o) => o.type === 'draw.fromHomeOffice')!);

    const menu = actionMenu(game);
    const discards = menu.direct
      .flatMap((g) => g.actions)
      .filter((a) => menu.options[a.index]?.type === 'card.discard');
    assert.ok(discards.length > 0, 'no discard is offered at all');

    const first = menu.options[discards[0]!.index]!;
    assert.equal(first.type, 'card.discard');
    const forThatCard = discards.filter(
      (a) => (menu.options[a.index] as { cardId?: string }).cardId === (first as { cardId: string }).cardId,
    );
    assert.equal(forThatCard.length, 3, 'all three Departments must be separately choosable');
    for (const slot of [1, 2, 3]) {
      assert.ok(
        forThatCard.some((a) => a.label.includes(`Department ${slot}`)),
        `Department ${slot} is not offered: ${forThatCard.map((a) => a.label).join(' | ')}`,
      );
    }
  });

  it('shows the top card and the depth of the Salvage Yard too', () => {
    // §6.2 sweeps the Salvage Yard back into the deck when it runs out, so watching it fill is the
    // only warning a player gets that the reshuffle is coming.
    const game = newGame(555);
    assert.equal(view(game).salvage.depth, 0, 'nothing is salvaged at setup');
    assert.equal(view(game).salvage.top, '—');
    const spare = game.state.decks.homeOffice.pop()!;
    game.state.decks.salvageYard.push(spare);
    const f = view(game);
    assert.equal(f.salvage.depth, 1);
    assert.equal(f.salvage.top, cardName(game.state, spare), 'the top of the Salvage Yard is not named');
  });

  it('offers BOTH rotations of a turnout, each with the shape it would lay', () => {
    // REGRESSION, and the reason rotating a turnout felt impossible. The action list drops duplicate
    // labels, and `describeIntent` for a card play said only "play X at (0, 1)" — so a turnout's two
    // orientations produced the same label and the second was discarded before the menu ever saw it.
    // The rotation is the entire decision for a turnout, and it could not be made.
    const game = newGame(555);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    dealTrack(game, 'turnout', 'right');

    const spots = actionMenu(game)
      .placeable.flatMap((g) => g.items)
      .flatMap((it) => it.spots)
      .filter((sp) => sp.coord?.row === 0 && sp.coord.col === 1);

    assert.equal(spots.length, 2, 'both rotations must be offered on the same square');
    assert.ok(spots.some((sp) => /turn to the south/.test(sp.label)), 'the south-diverging rotation is missing');
    assert.ok(spots.some((sp) => /turn to the north/.test(sp.label)), 'the north-diverging rotation is missing');

    // And each carries the rails it would actually lay, so the UI can draw it rather than only
    // describe it. Taken from the engine's connections, so a preview cannot promise a shape the
    // placement will not produce.
    const shapes = spots.map((sp) => [...sp.links].sort().join('|')).sort();
    assert.deepEqual(shapes, ['en|ew', 'we|ws'], `the two rotations do not carry distinct shapes: ${shapes.join(' / ')}`);
  });

  it('says how deep a Department pile is, so a discard can be aimed', () => {
    // A discard goes ON TOP, so choosing where to put it is choosing whether to offer a card or to
    // bury one a rival wants. Neither is decidable without seeing what is already stacked up.
    const game = newGame(555);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    assert.deepEqual(view(game).departmentDepth, [1, 1, 1], 'each Department starts one card deep');

    // Bury one, and the count must follow.
    game.state.decks.departments[1]!.push(game.state.decks.hands.get(0)![0]!);
    assert.deepEqual(view(game).departmentDepth, [1, 2, 1], 'the depth does not track the pile');
    const label = describeIntent(game.state, { type: 'draw.fromDepartment', slot: 1 });
    assert.match(label, /1 buried beneath it/, `the buried card is invisible: ${label}`);
  });

  it('never offers a train card a place on the board', () => {
    // A train card goes to the TIMETABLE. Seed 555 offered Extra X15 at six squares with six
    // rotations each — all identical, because the placement was accepted and then ignored.
    const game = newGame(555);
    for (let i = 0; i < 200; i++) {
      if (currentActor(game) === null) break;
      const { options } = actionGroups(game);
      if (options.length === 0) break;
      for (const o of options) {
        if (o.type !== 'card.play') continue;
        const kind = game.state.cards.get(o.cardId)?.kind.kind;
        if (kind === 'timetabledTrain' || kind === 'extraTrain') {
          assert.equal(o.placement, undefined, 'a train card was offered a board square');
        }
      }
      submit(game, options[0]!);
    }
  });

  it('names a track card by its hand, because the hand is what it can meet', () => {
    // Track is drawn from the deck like everything else, so it appears in the hand rather than in a
    // supply panel — and "curve" alone does not say which diagonal its 45° leg lies on, which is the
    // only thing that decides what it can be joined to.
    const game = newGame(31);
    const names = new Set<string>();
    for (const [, card] of game.state.cards) {
      if (card.kind.kind === 'track') names.add(cardName(game.state, card.id));
    }
    assert.ok(names.has('left-hand turnout'), `turnouts are not named by hand: ${[...names].join(', ')}`);
    assert.ok(names.has('right-hand curve'), `curves are not named by hand: ${[...names].join(', ')}`);
    assert.ok(names.has('straight'), 'a straight has no hand and must not claim one');
    assert.ok(![...names].some((n) => /none/.test(n)), 'un-handed pieces should not say "none"');
  });
});

describe('the board shows freight work happening', () => {
  it('moves the load across MEN | AT | WORK on the card itself', () => {
    // Advancing a load changed only the side panel, so the card being worked showed nothing. The
    // load crossing green -> MEN|AT|WORK -> a spotted car IS freight; the printed cards put these
    // squares under the track for exactly this reason.
    const game = newGame(5);
    const area = game.state.officeAreas.get(0)!;
    area.grid.set('-1,0', {
      geometry: { kind: 'facility', facility: 'mineTipple' },
      baseOperationalRail: true, standing: [], modifiers: [], enhancements: [],
      facility: {
        kind: 'freight', subtype: 'mineTipple',
        allows: { outbound: true, inbound: false },
        outboundBox: [{ type: 'hopper', loaded: true }], inboundBox: [],
        capacity: { outbound: 1, inbound: 0 },
        menAtWork: [null, null, null],
        industryTrack: { length: 2, cars: [{ type: 'hopper', loaded: false }] },
        laborers: 3, porters: 0, usedThisStage: { laborers: 0, porters: 0 },
      },
    } as never);

    const filled = (): string[] => {
      const cell = view(game).cells.find((c) => c.row === -1 && c.col === 0)!;
      const svg = officeSvg([cell], 0);
      return [...svg.matchAll(/class="bs-wb (bs-\w+)( bs-occ)?"/g)].map(
        (m) => m[1]!.replace('bs-', '') + (m[2] ? '=FULL' : ''),
      );
    };

    // A Mine Tipple only ships OUT, so it has no red Unloading box at all — only the boxes an
    // industry actually uses are drawn now.
    assert.deepEqual(filled(), ['green=FULL', 'maw', 'maw', 'maw'], 'the waiting load is not drawn');

    game.state.clock.phase = 'loadUnload';
    game.state.clock.currentActor = 0;
    assert.ok(submit(game, { type: 'laborer.startLoad', at: { row: -1, col: 0 } }));
    assert.deepEqual(filled(), ['green', 'maw=FULL', 'maw', 'maw'], 'starting a load is invisible');

    assert.ok(submit(game, { type: 'laborer.advanceLoad', at: { row: -1, col: 0 }, box: 0 }));
    assert.deepEqual(filled(), ['green', 'maw', 'maw=FULL', 'maw'], 'advancing a load is invisible');

    assert.ok(submit(game, { type: 'laborer.advanceLoad', at: { row: -1, col: 0 }, box: 1 }));
    assert.deepEqual(filled(), ['green', 'maw', 'maw', 'maw=FULL'], 'the load did not reach WORK');
  });

  it('draws the pipeline the way the freight actually flows', () => {
    // REPORTED after unloading at a warehouse: "it went W, A, M, and then to the red box at the far
    // right." §9.3 runs loading Green → MEN → AT → WORK → car, and unloading the other way entirely:
    // car → WORK → AT → MEN → red. So green and red BOTH sit beside MEN and the car sits beside
    // WORK — but red was drawn at the far right, which is exactly where the car is, so an unload
    // looked like it ran backwards across the row and landed on the end it came from.
    const game = newGame(5);
    const area = game.state.officeAreas.get(0)!;
    const fac = (kind: string, out: boolean, into: boolean) => ({
      geometry: { kind: 'facility', facility: kind },
      baseOperationalRail: true, standing: [], modifiers: [], enhancements: [],
      facility: {
        kind: 'freight', subtype: kind,
        allows: { outbound: out, inbound: into },
        outboundBox: [], inboundBox: [], capacity: { outbound: out ? 1 : 0, inbound: into ? 1 : 0 },
        menAtWork: [null, null, null], industryTrack: { length: 2, cars: [] },
        laborers: 1, porters: 0, usedThisStage: { laborers: 0, porters: 0 },
      },
    });
    area.grid.set('-1,0', fac('grocersWarehouse', false, true) as never);
    area.grid.set('-1,1', fac('mineTipple', true, false) as never);

    const cells = view(game).cells;
    const order = (row: number, col: number): string[] => {
      const cell = cells.find((c) => c.row === row && c.col === col)!;
      return [...officeSvg([cell], 0).matchAll(/class="bs-wb (bs-\w+)/g)].map((m) => m[1]!.replace('bs-', ''));
    };

    // Receives only: the red box sits BEFORE the sign, which is the end an unload arrives at.
    assert.deepEqual(order(-1, 0), ['red', 'maw', 'maw', 'maw'], 'the red box is not beside MEN');
    // Ships out only: green before the sign, and no red box at all.
    assert.deepEqual(order(-1, 1), ['green', 'maw', 'maw', 'maw'], 'the green box is not beside MEN');
  });

  it('says what an enhancement does, and admits when it does nothing yet', () => {
    // REPORTED from playtesting: an Interlocking on the board is a bare label with no hover text.
    // Writing only the printed effect would be worse than silence for the four that are read by
    // nothing — a player who builds one to hold a train at the Limit watches it not happen with no
    // way to tell a misread card from a bug.
    const game = newGame(5);
    const area = game.state.officeAreas.get(0)!;
    const office = area.grid.get(`${area.officeCoord.row},${area.officeCoord.col}`)!;
    // Interlocking and Telegraph both resolve in play; Overpass is the one card nothing reads.
    office.enhancements = ['interlocking', 'telegraph', 'overpass'];

    const cell = view(game).cells.find((c) => c.row === area.officeCoord.row && c.col === area.officeCoord.col)!;
    const svg = officeSvg([cell], area.runningRow);
    const tip = /class="bs-enh"[^>]*data-tip="([^"]*)"/.exec(svg)?.[1] ?? '';

    assert.match(tip, /Limit Track/, 'the Interlocking does not say what it is meant to do');
    assert.match(tip, /add \+?4/i, 'the Telegraph does not say what it does');
    assert.match(tip, /Railroad Crossing/, 'the Overpass does not say what it is meant to do');

    // Exactly ONE of the three carries the warning, and it is the Overpass. The first version of
    // this test asserted the opposite for Interlocking, which is read at advance.ts:770 — that is
    // how four working cards came to be labelled unimplemented on the board.
    const warned = tip.split('·').filter((part) => /NOT YET IMPLEMENTED/.test(part));
    assert.equal(warned.length, 1, `expected one unimplemented card, got: ${tip}`);
    assert.match(warned[0]!, /Overpass/, 'the warning is on the wrong card');
  });

  it('marks only the enhancements that really are unwired', () => {
    /**
     * The status is data, so it can drift from reality — and it already did. The first version of
     * this test asserted `effect === 'live'` if and only if the rule carried a `dispatchBonus`,
     * which was not a check at all: it restated the very assumption that produced the table, so it
     * passed while four working cards were labelled unimplemented in the UI.
     *
     * So this asserts the SET, keyed to what actually reads each one. A card whose behaviour gets
     * written must be moved here, and the failure message says where to look.
     */
    const by = (e: string): string[] =>
      ENHANCEMENT_RULES.filter((r) => r.effect === e).map((r) => r.key).sort();

    assert.deepEqual(
      by('live'),
      ['absSignals', 'interlocking', 'radio', 'smallYard', 'telegraph', 'telephone', 'yardOffice'],
      'grep the key itself before changing this — interlocking, yardOffice and smallYard are read ' +
        'by key in advance.ts/apply.ts, and absSignals through node.absSignals, not via a helper',
    );
    // Wired and read, but the card that would trigger them is opponent-directed and cut from the
    // solitaire deck (Q6): Derail for Facing Point Locks, Watertower for the Water Column.
    assert.deepEqual(by('dormantSolo'), ['facingPointLocks', 'waterColumn']);
    // Overpass alone has no code path anywhere — it would do nothing even in a multiplayer game.
    assert.deepEqual(by('unbuilt'), ['overpass']);
  });

  it('puts the card just drawn at the FRONT of the hand, and badges it', () => {
    // REPORTED from playtesting. The engine pushes a drawn card onto the END of the hand, and with
    // the row wrapping that put the card you just turned over wherever the eye is least likely to be
    // — among two others that look exactly like it.
    const game = newGame(21);
    const draw = actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw');
    assert.ok(draw, 'this seed does not offer the draw option');
    submit(game, draw!);

    const before = [...(game.state.decks.hands.get(0) ?? [])];
    const take = actionGroups(game).options.find((o) => o.type === 'draw.fromHomeOffice');
    assert.ok(take, 'no draw is on offer');
    submit(game, take!);

    const after = game.state.decks.hands.get(0) ?? [];
    const drawn = after.find((id) => !before.includes(id));
    assert.ok(drawn, 'nothing was actually drawn');

    // The engine still pushes — deliberately, so the bot's hand iteration and every revenue figure
    // measured with it are untouched. The reversal is the display's, in both places that show a hand.
    assert.equal(after[after.length - 1], drawn, 'the engine should still append; only the views reverse');
    assert.equal(actionMenu(game).hand[0]?.cardId, drawn, 'the new card is not first on the play page');
    assert.equal(view(game).hand[0], cardName(game.state, drawn!), 'the new card is not first in the replay frame');
    assert.equal(game.justDrawn, drawn, 'the badge does not know which card is new');

    // The names and their descriptions must reverse together, or the tooltips come off the wrong card.
    const f = view(game);
    assert.deepEqual(
      f.handWhat,
      [...after].reverse().map((id) => cardDescription(game.state, id)),
      'hand and handWhat are out of step',
    );
  });

  it('draws no freight fittings on a Depot, a Station or a Terminal', () => {
    // REPORTED from playtesting: a Depot showed three MEN | AT | WORK boxes. An Office is a Passenger
    // Facility — the sign is printed "For Freight Facilities" (§9.1) and every tier is built with 0
    // Laborers, so the boxes could never be worked. They were drawn because `menAtWork` was a
    // three-slot array of nulls on every facility and this loop had no guard, unlike the green and
    // red rows either side of it. The engine now has no pipeline to draw on a passenger facility.
    const game = newGame(5);
    const area = game.state.officeAreas.get(0)!;

    // Depot 1/1/1, Station 2/2/2, Terminal 3/3/3 (OFFICE_PROFILES). All three carry 0 Laborers and
    // — the point of this test — no MEN | AT | WORK pipeline at all.
    for (const [tier, n] of [['depot', 1], ['station', 2], ['terminal', 3]] as const) {
      area.tier = tier;
      const office = area.grid.get(`${area.officeCoord.row},${area.officeCoord.col}`)!;
      office.facility = {
        kind: 'passenger', subtype: 'office',
        allows: { outbound: true, inbound: true },
        outboundBox: [{ type: 'coach', loaded: true }], inboundBox: [{ type: 'coach', loaded: true }],
        capacity: { outbound: n, inbound: n },
        menAtWork: null,
        industryTrack: { length: 0, cars: [] },
        laborers: 0, porters: n, usedThisStage: { laborers: 0, porters: 0 },
      };

      const cell = view(game).cells.find((c) => c.row === area.officeCoord.row && c.col === area.officeCoord.col)!;
      const svg = officeSvg([cell], area.runningRow);
      const boxes = [...svg.matchAll(/class="bs-wb (bs-\w+)/g)].map((m) => m[1]!.replace('bs-', ''));

      assert.ok(!boxes.includes('maw'), `a ${tier} draws MEN | AT | WORK boxes it has no Laborer to work`);
      assert.ok(boxes.includes('green') && boxes.includes('red'), `a ${tier} should still show passengers waiting and arrived`);
      // And it must not borrow an industry's word for what it does, nor a siding it has no track for.
      assert.match(svg, /BOARDS \+ ALIGHTS/, `a ${tier} is labelled like an industry`);
      assert.doesNotMatch(svg, /SHIPS|RECEIVES/, `a ${tier} is labelled like an industry`);
      assert.equal(
        [...svg.matchAll(/class="bs-slot/g)].length, 0,
        `a ${tier} draws a siding slot, but a passenger facility has no industry track`,
      );
    }
  });

  it('paints inbound boxes red in the side panel, not green', () => {
    // REPORTED from playtesting. The panel's shared box helper used ONE class for every filled box,
    // so the inbound row rendered green while the board SVG on the same screen drew it red — the two
    // views of one card disagreeing about the colour code at the same moment.
    const game = newGame(5);
    const area = game.state.officeAreas.get(0)!;
    area.grid.set('-1,0', {
      geometry: { kind: 'facility', facility: 'grocersWarehouse' },
      baseOperationalRail: true, standing: [], modifiers: [], enhancements: [],
      facility: {
        kind: 'freight', subtype: 'grocersWarehouse',
        allows: { outbound: false, inbound: true },
        outboundBox: [], inboundBox: [{ type: 'boxcar', loaded: true }],
        capacity: { outbound: 0, inbound: 1 },
        menAtWork: [null, null, null], industryTrack: { length: 1, cars: [] },
        laborers: 1, porters: 0, usedThisStage: { laborers: 0, porters: 0 },
      },
    } as never);

    const html = facilitiesHtml(view(game));
    assert.match(html, /class="box r"/, 'a cleared inbound load is not painted red');
    assert.doesNotMatch(html, /class="box f"/, 'the direction-blind box class is still in use');
  });

  it('names where the work has got to, in the tooltip', () => {
    const game = newGame(5);
    const area = game.state.officeAreas.get(0)!;
    area.grid.set('-1,0', {
      geometry: { kind: 'facility', facility: 'mineTipple' },
      baseOperationalRail: true, standing: [], modifiers: [], enhancements: [],
      facility: {
        kind: 'freight', subtype: 'mineTipple',
        allows: { outbound: true, inbound: false },
        outboundBox: [], inboundBox: [],
        capacity: { outbound: 1, inbound: 0 },
        menAtWork: [null, { type: 'hopper', dir: 'out' }, null],
        industryTrack: { length: 2, cars: [] },
        laborers: 2, porters: 0, usedThisStage: { laborers: 0, porters: 0 },
      },
    } as never);
    const cell = view(game).cells.find((c) => c.row === -1 && c.col === 0)!;
    assert.match(cell.what, /a load is on AT/, 'the card does not say where the work has got to');
  });

  it('captions a legal square that already has a card on it', () => {
    /**
     * REPORTED: "it shows on the map where the possible places are. It also looks like my depot is
     * highlighted as well... New squares where I could place my track say PLACE HERE. Limits are
     * also highlighted but do not."
     *
     * Three different acts light up the same blue — building on empty ground, EXTENDING the Running
     * Track at a Limits sign, and ATTACHING an Enhancement to a card already down — and only the
     * first said anything. A blue outline with no words reads as a bug, not as an offer.
     */
    const game = newGame(555);
    const area = game.state.officeAreas.get(0)!;
    const cells = view(game).cells;
    const limits = cells.find((c) => c.kind === 'limits')!;
    const svg = officeSvg(cells, area.runningRow, [], [
      { row: limits.row, col: limits.col, label: 'EXTEND THE RUNNING TRACK HERE' },
    ]);
    assert.match(svg, /EXTEND THE RUNNING TRACK HERE/, 'the Limits sign is offered without a word');
    // And the caption must clear the rail down the middle of the card, where the train is drawn.
    const y = Number(/class="bs-legalcap"[^>]*>(?:<rect x="\d+" y="(\d+)")/.exec(svg)?.[1]);
    assert.ok(y > 48, `the caption at y=${y} prints over the rail`);
  });

  it('says on the card which way an industry runs, and how many workers it has', () => {
    /**
     * TWO REPORTS, ONE CARD.
     *
     * "Should the display be any different for industries that are send-only versus receive-only?
     * At Grocer's Warehouse, which is receive only, and Refinery, which is send only, the men at
     * work boxes, the arrows and the green-red boxes look the same in both." They were different —
     * by the stroke colour of one 13x12px box and the direction of a 10px chevron, which is not a
     * difference a player can see.
     *
     * And: "how do I see the number of laborers in an industry card?" You could not. The number
     * that decides every Cargo phase was in a side panel only.
     */
    const game = newGame(5);
    const industry = (kind: string, out: boolean, into: boolean, laborers: number) => {
      game.state.officeAreas.get(0)!.grid.set('-1,0', {
        geometry: { kind: 'facility', facility: kind },
        baseOperationalRail: true, standing: [], modifiers: [], enhancements: [],
        facility: {
          kind: 'freight', subtype: kind,
          allows: { outbound: out, inbound: into },
          outboundBox: [], inboundBox: [],
          capacity: { outbound: out ? 1 : 0, inbound: into ? 1 : 0 },
          menAtWork: [null, null, null],
          industryTrack: { length: 2, cars: [] },
          laborers, porters: 0, usedThisStage: { laborers: 0, porters: 0 },
        },
      } as never);
      const cell = view(game).cells.find((c) => c.row === -1 && c.col === 0)!;
      return officeSvg([cell], 0);
    };

    const ships = industry('refinery', true, false, 2);
    const receives = industry('grocersWarehouse', false, true, 1);
    assert.match(ships, /SHIPS OUT/, 'a send-only industry does not say so');
    assert.match(receives, /RECEIVES/, 'a receive-only industry does not say so');
    assert.doesNotMatch(ships, /RECEIVES/, 'a send-only industry claims to receive');

    // And the two cards must not be one another with a different tint.
    const strip = (svg: string): string => svg.replace(/(SHIPS OUT|RECEIVES|L \d\/\d)/g, '');
    assert.notEqual(strip(ships), strip(receives), 'the two industries draw identically');

    assert.match(ships, /bs-crewlab[^>]*>L 2\/2</, 'the Laborer count is not on the card');
    assert.match(receives, /bs-crewlab[^>]*>L 1\/1</, 'the Laborer count is not on the card');
  });

  it('shows the Office its Porters, and what a Modifier added', () => {
    // REPORTED: "I added a restaurant. That gave me an extra outbound slot, so I see an extra green
    // box. And it gave me an extra porter that I see no indication of anywhere." Porters were on
    // the view-model and no renderer had ever drawn them.
    const game = newGame(5);
    const area = game.state.officeAreas.get(0)!;
    const office = area.grid.get(`${area.runningRow},0`)!;
    area.tier = 'depot';
    office.facility!.porters = 2;          // a Depot prints 1; a Restaurant beside it adds one
    office.facility!.capacity = { outbound: 2, inbound: 1 };
    office.facility!.allows = { outbound: true, inbound: true };

    const cell = view(game).cells.find((c) => c.kind === 'office')!;
    assert.match(officeSvg([cell], area.runningRow), /bs-crewlab[^>]*>P 2\/2</, 'the card does not show Porters');
    assert.match(cell.what, /2 porters/, 'the tooltip still reads the printed tier, not the Office as it stands');
    assert.match(cell.what, /Modifiers beside it add/, 'nothing says where the extra came from');

    // And the panel must not invent a Modifier that is not there.
    const plain = newGame(5);
    const parea = plain.state.officeAreas.get(0)!;
    parea.tier = 'depot';
    const poffice = parea.grid.get(`${parea.runningRow},0`)!;
    poffice.facility!.porters = 1;
    poffice.facility!.capacity = { outbound: 1, inbound: 1 };
    poffice.facility!.allows = { outbound: true, inbound: true };
    const html = facilitiesHtml(view(plain));
    assert.doesNotMatch(html, /class="added"/, 'a plain Depot is credited with a Modifier it does not have');
  });

  it('keeps the enhancement label clear of the pipeline squares', () => {
    // `overpass` and `facingPointLocks` are placed `onCard`, so they can land on a facility. At its
    // old baseline the label printed straight through the green/MEN|AT|WORK/red row.
    const game = newGame(5);
    const area = game.state.officeAreas.get(0)!;
    area.grid.set('-1,0', {
      geometry: { kind: 'facility', facility: 'mineTipple' },
      baseOperationalRail: true, standing: [], modifiers: [], enhancements: ['overpass'],
      facility: {
        kind: 'freight', subtype: 'mineTipple',
        allows: { outbound: true, inbound: false },
        outboundBox: [], inboundBox: [],
        capacity: { outbound: 1, inbound: 0 },
        menAtWork: [null, null, null],
        industryTrack: { length: 2, cars: [] },
        laborers: 2, porters: 0, usedThisStage: { laborers: 0, porters: 0 },
      },
    } as never);
    const cell = view(game).cells.find((c) => c.row === -1 && c.col === 0)!;
    const svg = officeSvg([cell], 0);

    const enhY = Number(/class="bs-enh" x="\d+" y="(\d+)"/.exec(svg)?.[1]);
    const boxTop = Math.min(
      ...[...svg.matchAll(/class="bs-wb [^"]*" x="\d+" y="(\d+)"/g)].map((m) => Number(m[1])),
    );
    assert.ok(Number.isFinite(enhY) && Number.isFinite(boxTop), 'label or squares are not drawn');
    // 9px text sits roughly 9px above its baseline, so the baseline itself must clear the squares.
    assert.ok(enhY <= boxTop, `enhancement label at y=${enhY} prints over the squares at y=${boxTop}`);
  });
});

describe('the board draws the printed card (docs/tracks.png)', () => {
  /** One card, alone, so the measurements are in card coordinates. */
  const draw = (links: string[]): { x1: number; y1: number; x2: number; y2: number }[] => {
    const cell = {
      row: 0, col: 0, kind: 'trk', label: 'x', running: true, enhancements: [],
      tray: null, cars: [], facility: null, links, what: '',
    };
    const svg = officeSvg([cell] as never, 0);
    return [...svg.matchAll(/<line class="bs-rail" x1="([-\d.]+)" y1="([-\d.]+)" x2="([-\d.]+)" y2="([-\d.]+)"\/>/g)]
      .map((m) => ({ x1: Number(m[1]), y1: Number(m[2]), x2: Number(m[3]), y2: Number(m[4]) }));
  };

  /** Undirected segment angles in degrees, deduplicated. 0 is horizontal. */
  const angles = (links: string[]): number[] => [
    ...new Set(
      draw(links).map((r) => {
        const a = (Math.atan2(r.y2 - r.y1, r.x2 - r.x1) * 180) / Math.PI;
        return Math.round((((a % 180) + 180) % 180) * 10) / 10;
      }),
    ),
  ].sort((a, b) => a - b);

  it('runs the through track dead centre, edge to edge', () => {
    // The measurement from the printed sheet: on every one of its nine rows the east-west rail sits
    // at the card's exact vertical middle. It used to be drawn at 31% down the card, on the belief
    // that the art put it along the top edge.
    const rails = draw(['ew']);
    assert.equal(rails.length, 2, 'a track is two rails');
    const H = 96;
    for (const r of rails) {
      assert.equal(r.y1, r.y2, 'the through track must be level');
      assert.ok(Math.abs(r.y1 - H / 2) <= 3, `through rail at y=${r.y1}, not the card's middle (${H / 2})`);
      assert.deepEqual([Math.min(r.x1, r.x2), Math.max(r.x1, r.x2)], [0, 166], 'it must span the whole card');
    }
  });

  it('leaves at exactly 45°, through the middle of the north or south edge', () => {
    for (const links of [['ne'], ['nw'], ['se'], ['sw'], ['ew', 'ws'], ['ew', 'en']]) {
      const found = angles(links);
      assert.ok(found.includes(0), `${links} has no level run along the centre line`);
      assert.ok(
        found.includes(45) || found.includes(135),
        `${links} draws its leg at ${found.join('/')}° — the card prints 45°`,
      );
      assert.equal(found.length, 2, `${links} draws ${found.join('/')}° — a leg is a run and one 45° angle`);
    }
  });

  it('draws the two diagonals as two different diagonals', () => {
    // The matching rule made visible. `ne` and `sw` lie on one line and `nw` and `se` on the other,
    // so a stacked pair on the same diagonal reads as one unbroken rail and a mismatched pair reads
    // as the V it is. Drawn alike, the picture would claim a join the engine refuses.
    assert.deepEqual(angles(['ne']), angles(['sw']), 'ne and sw must lie on the same diagonal');
    assert.deepEqual(angles(['nw']), angles(['se']), 'nw and se must lie on the same diagonal');
    assert.notDeepEqual(angles(['ne']), angles(['nw']), 'the two diagonals must be distinguishable');
  });

  it('meets the card edge at its midpoint, so abutting cards line up', () => {
    // A leg that met the edge anywhere else would join to nothing, however right its angle.
    const W = 166;
    const H = 96;
    // Only the sloping segments, and only the end of each that lands on the south edge.
    const atEdge = draw(['sw'])
      .filter((r) => r.y1 !== r.y2)
      .map((r) => (Math.abs(r.y1 - H) < Math.abs(r.y2 - H) ? r.x1 : r.x2));
    assert.equal(atEdge.length, 2, 'the leg is two rails');
    const mid = (atEdge[0]! + atEdge[1]!) / 2;
    assert.ok(Math.abs(mid - W / 2) < 0.5, `the leg crosses the south edge at x=${mid}, not the middle (${W / 2})`);
  });
});

describe('board highlighting', () => {
  it('gives every spot a coordinate to highlight, or says it is not on this board', () => {
    const game = newGame(555);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    const items = actionMenu(game).placeable.flatMap((g) => g.items);
    assert.ok(items.length > 0);
    for (const it of items) {
      for (const sp of it.spots) {
        // A spot with no coordinate is a placement out on the Mainline, and it must say so — the
        // board cannot highlight it, so the label is the only thing telling the player where it
        // goes. It used to carry the fake coordinate (-1, node), which is a real district row.
        if (sp.coord === null) {
          assert.equal(typeof sp.node, 'number', `${it.subject} has neither a coordinate nor a node`);
          assert.match(sp.label, /out on the Mainline/, `${it.subject}: no coordinate and no explanation`);
          continue;
        }
        assert.equal(typeof sp.coord.row, 'number', `${it.subject} has a spot with no coordinate`);
        assert.equal(typeof sp.coord.col, 'number', `${it.subject} has a spot with no coordinate`);
        assert.ok(sp.label.includes(`(${sp.coord.row}, ${sp.coord.col})`), 'label and coord disagree');
      }
    }
  });

  it('highlights squares OUTSIDE the current district', () => {
    // The commonest placement is just beyond the existing cards — that is what extending means. A
    // grid sized only to the cards already down would highlight nothing exactly when it matters.
    const game = newGame(555);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);

    /**
     * Open the district first, with a TURNOUT on the Running Track.
     *
     * Every office and industry card is a plain east-west straight and the Office carries no stub,
     * so on the opening board the only legal squares are the two Limits signs — on the Running Track
     * itself, inside the existing bounds, and this test would prove nothing. A turnout is what puts
     * a square OFF the main in reach. The lay flag is then cleared rather than playing out a second
     * turn: the subject here is the drawn canvas, not the turn economy.
     */
    const { option: lay } = dealTrack(game, 'turnout', 'left');
    assert.ok(lay, 'no turnout could be laid — the district can never open');
    assert.ok(submit(game, lay), 'the turnout was refused');
    // A curve of the same hand is what the square below that leg wants; deal one so there is
    // something to highlight there.
    dealTrack(game, 'curved', 'left');

    const cells = view(game).cells;
    const minCol = Math.min(...cells.map((c) => c.col));
    const maxCol = Math.max(...cells.map((c) => c.col));
    const spots = actionMenu(game).placeable.flatMap((g) => g.items).flatMap((i) => i.spots);

    assert.ok(
      spots.some((sp) => sp.coord !== null && (sp.coord.col < minCol || sp.coord.col > maxCol || sp.coord.row < 0)),
      'no legal spot lies outside the current cards — the bounds test would be vacuous',
    );
  });
});

describe('the page explains itself', () => {
  it('says what every card in hand and every face-up slot does', () => {
    // A hand of bare names is unplayable: "Steam Turbines" carries no hint of its effect, and all of
    // this text already existed in the content tables without reaching the screen.
    for (const seed of [555, 430, 7, 99]) {
      const f = view(newGame(seed));
      assert.equal(f.handWhat.length, f.hand.length, 'a hand card has no description slot');
      f.hand.forEach((name, i) => {
        const what = f.handWhat[i]!;
        assert.ok(what.length > 0, `${name} has no description`);
        // camelCase leaking to the screen is the recurring failure here.
        assert.doesNotMatch(what, /[a-z][A-Z]/, `raw camelCase in "${name}": ${what}`);
        assert.doesNotMatch(what, /playerChoicebound|undefined|NaN/, `broken text: ${what}`);
      });
      f.departments.forEach((name, i) => {
        if (name === '—') return;
        assert.ok(f.departmentsWhat[i]!.length > 0, `face-up ${name} has no description`);
      });
    }
  });

  it('says what every card on the BOARD does, in readable words', () => {
    // A played card becomes a cell with a name on it — "turnout", "Freight House", "waiting area" —
    // and the explanation that was visible while it sat in hand disappears exactly when it starts
    // mattering. Play a long way in so every card kind reaches the grid.
    const game = newGame(111);
    for (let i = 0; i < 400; i++) {
      if (currentActor(game) === null) break;
      const { options } = actionGroups(game);
      if (options.length === 0) break;
      const pick = options.find((o) => o.type === 'card.play' && o.placement) ?? options[0]!;
      if (!submit(game, pick)) break;
    }

    const cells = view(game).cells;
    assert.ok(cells.length > 4, 'not enough of the board was built to be a real check');
    for (const c of cells) {
      assert.ok(c.what.length > 0, `(${c.row},${c.col}) ${c.label} has no explanation`);
      // camelCase on the board is the failure that keeps recurring — labels AND descriptions.
      assert.doesNotMatch(c.label, /[a-z][A-Z]/, `raw camelCase label: ${c.label}`);
      assert.doesNotMatch(c.what, /[a-z][A-Z]/, `raw camelCase in "${c.label}": ${c.what}`);
    }
  });

  it('spells out which way a turnout will and will not let a train run', () => {
    // §A.1 is an ABSENT edge, not a one-way street, and it is invisible on a card that just says
    // "turnout". Getting it wrong is how a crew ends up somewhere it cannot leave.
    const game = newGame(3);
    const area = game.state.officeAreas.get(0)!;
    area.grid.set('-1,0', {
      geometry: { kind: 'track', geometry: 'turnout', turnout: { stem: 'e', through: 'w', diverge: 's' } },
      baseOperationalRail: true, standing: [], facility: null, modifiers: [], enhancements: [],
    });
    const cell = view(game).cells.find((c) => c.row === -1 && c.col === 0)!;
    // Said the way a player would ask it: if my train comes in from over there, where can it go?
    // "stem east, through west, diverges south" is three pieces of jargon and a compass reading.
    assert.match(
      cell.what,
      /allows traffic from the east to travel west or turn to the south/,
      `the turnout does not say what it does: ${cell.what}`,
    );
    assert.match(cell.what, /the two roads never join/, 'the missing edge is not spelled out');
  });

  it('describes every card kind in the deck, not just the easy ones', () => {
    // Walk the whole deck rather than one hand: the categories differ, and a missing branch would
    // show as a blank line under a card name only for the seeds that happen to deal it.
    const game = newGame(1);
    const seen = new Set<string>();
    for (const [id, card] of game.state.cards) {
      const what = cardDescription(game.state, id);
      assert.ok(what.length > 0, `${card.kind.kind} has no description`);
      seen.add(card.kind.kind);
    }
    assert.ok(seen.size >= 7, `only ${seen.size} card kinds seen — the deck should hold more`);
  });

  it('marks cards that cannot be played yet, and says why', () => {
    // A Station upgrade drawn at a Whistle Post is dead weight — upgrades are strictly sequential
    // (Gap 3b) — but the hand showed it identically to a playable card, so taking it looked like an
    // action that did nothing.
    const game = newGame(111);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    // A Station upgrade is PUT in hand rather than drawn for. This used to take whatever seed 111
    // happened to deal, which made it luck: the moment deck composition changed it dealt no upgrade
    // and the test failed without anything being wrong.
    const station = [...game.state.cards.entries()].find(
      ([, c]) => c.kind.kind === 'office' && c.kind.tier === 'station',
    );
    assert.ok(station, 'no Station card in the deck');
    game.state.decks.hands.set(0, [station![0]]);

    const f = view(game);
    const playable = handPlayable(game);
    assert.equal(playable.length, f.hand.length, 'a hand card has no playable flag');

    const upgrades = f.hand
      .map((name, i) => ({ name, what: f.handWhat[i]!, can: playable[i]! }))
      .filter((c) => /upgrade/.test(c.name));
    assert.ok(upgrades.length > 0, 'no Office upgrade in hand — the fixture failed to place one');
    for (const u of upgrades) {
      // Only Depot is reachable from a Whistle Post.
      if (/Depot/.test(u.name)) continue;
      assert.equal(u.can, false, `${u.name} should not be playable from a Whistle Post`);
      assert.match(u.what, /requires the Office to be a/, `${u.name} does not say what it needs`);
    }
  });

  it('agrees with the buttons about what is playable', () => {
    // The flag is derived from legalActions, so it must never disagree with the offered actions.
    const game = newGame(7);
    for (let i = 0; i < 60; i++) {
      if (currentActor(game) === null) break;
      const hand = game.state.decks.hands.get(0) ?? [];
      const flags = handPlayable(game);
      const offered = new Set(
        actionGroups(game)
          .options.filter((o) => o.type === 'card.play')
          .map((o) => (o as { cardId: string }).cardId),
      );
      hand.forEach((id, k) => {
        assert.equal(flags[k], offered.has(id), 'playable flag disagrees with the action list');
      });
      const { options } = actionGroups(game);
      if (options.length === 0) break;
      submit(game, options[0]!);
    }
  });

  it('never puts an internal tray id on a BUTTON either', () => {
    // The history check below missed this: `maneuver.redFlags` was labelled "Red Flags on tray3",
    // so the id leaked through the action list rather than the log. Every button, every turn.
    const game = newGame(2345);
    for (let i = 0; i < 400; i++) {
      if (currentActor(game) === null) break;
      const { options } = actionGroups(game);
      if (options.length === 0) break;
      for (const o of options) {
        const label = describeIntent(game.state, o);
        assert.doesNotMatch(label, /\btray\d+\b/, `internal tray id on a button: ${label}`);
      }
      if (!submit(game, options[0]!)) break;
    }
  });

  it('describes the piece it would actually lay, not its mirror image', () => {
    // REGRESSION, and a silent one: the placement was always right and only the words were wrong.
    // `rotationNote` called `variantsFor(geometry)` without the hand, which answers for the LEFT-hand
    // card whatever you are holding — so every right-hand turnout was offered as "stem west, through
    // east, diverges south", the mirror of the card it would lay, and every right-hand curve named
    // the wrong edge. A player aiming a crossover down onto a siding was reading the opposite of
    // what they would get.
    const say: Record<string, string> = { n: 'north', s: 'south', e: 'east', w: 'west' };
    for (const geometry of ['turnout', 'curved', 'sharpCurved'] as const) {
      for (const hand of ['left', 'right'] as const) {
        variantsFor(geometry, hand).forEach((v, variant) => {
          const label = variantLabel(geometry, variant, hand);
          if (v.turnout) {
            assert.equal(
              label.trim(),
              `— allows traffic from the ${say[v.turnout.stem]} to travel ${say[v.turnout.through]} ` +
                `or turn to the ${say[v.turnout.diverge]}`,
              `${geometry}/${hand} v${variant}`,
            );
          } else if (v.arc) {
            const [a, b] = [v.arc[0]!, v.arc[1]!];
            const [side, leg] = a === 'n' || a === 's' ? [b, a] : [a, b];
            assert.equal(
              label.trim(),
              `— carries traffic from the ${say[side!]} round to the ${say[leg!]}`,
              `${geometry}/${hand} v${variant}`,
            );
          }
        });
      }
    }
  });

  it('says what a placement would connect to, so a crossover can be aimed', () => {
    // A turnout laid under a turnout is a crossover, and it is how a siding gets a track running
    // parallel to the Running Track. It was always legal; nothing on screen said which card and
    // which rotation would actually meet the leg coming down.
    const game = newGame(555);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    const { option: first } = dealTrack(game, 'turnout', 'left');
    assert.ok(first && first.type === 'card.play' && first.placement, 'no turnout could be laid');
    assert.ok(submit(game, first), 'the turnout was refused');

    // The crossover needs a second turnout of the SAME hand — the diagonal has to match.
    dealTrack(game, 'turnout', 'left');
    const under = { row: first.placement.row - 1, col: first.placement.col };
    const spots = actionMenu(game)
      .placeable.flatMap((g) => g.items)
      .filter((it) => it.subject.includes('turnout'))
      .flatMap((it) => it.spots)
      .filter((sp) => sp.coord?.row === under.row && sp.coord.col === under.col);

    assert.equal(spots.length, 1, 'exactly one turnout rotation should meet the leg coming down');
    assert.match(spots[0]!.label, /turn to the north/, 'the crossover turnout must point back up');
    assert.match(spots[0]!.label, /joins the track above/, 'the spot must say what it connects to');
  });

  it('never offers to load a caboose', () => {
    // A caboose carries the crew, not freight. "add loaded caboose" appeared because the button was
    // formatted by hand instead of using the labeller that already knew.
    const game = newGame(2345);
    for (let i = 0; i < 400; i++) {
      if (currentActor(game) === null) break;
      const { options } = actionGroups(game);
      if (options.length === 0) break;
      for (const o of options) {
        assert.doesNotMatch(
          describeIntent(game.state, o),
          /(loaded|empty) caboose/,
          'a caboose was described as loaded or empty',
        );
      }
      if (!submit(game, options[0]!)) break;
    }
  });

  it('says an industry on the Running Track does not belong there', () => {
    // It cannot legally BE there any more — the sheet puts every industry on "Straight, Stub (not on
    // Running Track)" and `check` returns ON_RUNNING_TRACK — so this is the card text holding up if
    // one somehow is, not a warning about a placement a player can still make.
    const game = newGame(9);
    const area = game.state.officeAreas.get(0)!;
    const industry = {
      geometry: { kind: 'facility' as const, facility: 'grocersWarehouse' as const },
      baseOperationalRail: true, standing: [], modifiers: [], enhancements: [],
      facility: {
        kind: 'freight' as const, subtype: 'grocersWarehouse',
        allows: { outbound: false, inbound: true },
        outboundBox: [], inboundBox: [], capacity: { outbound: 0, inbound: 1 },
        menAtWork: [null, null, null], industryTrack: { length: 2, cars: [] },
        laborers: 1, porters: 0, usedThisStage: { laborers: 0, porters: 0 },
      },
    };
    area.grid.set(`${area.runningRow},2`, industry as never);
    area.grid.set(`${area.runningRow - 1},0`, JSON.parse(JSON.stringify(industry)) as never);

    const cells = view(game).cells;
    const onRunning = cells.find((c) => c.row === area.runningRow && c.col === 2)!;
    const below = cells.find((c) => c.row === area.runningRow - 1 && c.col === 0)!;

    assert.match(onRunning.what, /RUNNING TRACK/, 'no warning on a Running Track industry');
    assert.match(onRunning.what, /belong on a stub/, 'does not say where an industry belongs');
    assert.doesNotMatch(below.what, /RUNNING TRACK/, 'a Secondary Track industry must not warn');
  });

  it('never puts an internal tray id in front of a player', () => {
    // The §8.1 clearance question read "may tray2 follow tray3 into the next Subdivision?" — the
    // sharpest decision in the game, phrased in internal identifiers.
    const game = newGame(430);
    for (let i = 0; i < 600; i++) {
      if (currentActor(game) === null) break;
      const { options } = actionGroups(game);
      if (options.length === 0) break;
      submit(game, options[0]!);
    }
    for (const line of game.log) {
      assert.doesNotMatch(line.text, /\btray\d+\b/, `internal tray id shown to the player: ${line.text}`);
    }
  });

  it('spells out what each clearance ruling costs', () => {
    const game = newGame(5);
    const s = game.state;
    s.trays.set('tray2', {
      id: 'tray2', trainNumber: 4, trainIsExtra: false, engineAt: 0,
      consist: [], direction: 'east', position: { at: 'mainline', index: 1 }, movesUsed: 0,
    });
    s.trays.set('tray3', {
      id: 'tray3', trainNumber: 7, trainIsExtra: false, engineAt: 0,
      consist: [], direction: 'east', position: { at: 'mainline', index: 1 }, movesUsed: 0,
    });
    s.clock.pendingDecision = { train: 'tray2', occupiedBy: 'tray3' };

    const allow = describeIntent(s, { type: 'mainline.clearance', allow: true });
    const hold = describeIntent(s, { type: 'mainline.clearance', allow: false });
    for (const label of [allow, hold]) {
      assert.match(label, /Train 4/, `the ruling does not name the train: ${label}`);
      assert.doesNotMatch(label, /tray\d/, `internal id on a button: ${label}`);
    }
    // Deliberately NOT asserting that granting clearance mentions a collision: no rear-end is
    // implemented, and promising one would describe a consequence the engine never delivers.
    assert.match(allow, /same Mainline card/, 'granting clearance does not say what happens');
    assert.match(hold, /losing the Stage/, 'holding does not mention the cost');
  });

  it('states the objective and whether you are keeping up', () => {
    const f = view(newGame(430));
    assert.equal(f.objective.target, 20);
    assert.equal(f.objective.days, 5);
    assert.match(f.objective.note, /of 20/);
    assert.match(f.objective.note, /Days? left/);
  });

  it('explains what each Local Operations option spends', () => {
    // The most consequential decision of the Stage, previously labelled "choose switch".
    const game = newGame(555);
    const choices = actionGroups(game)
      .options.filter((o) => o.type === 'localOps.choose')
      .map((o) => describeIntent(game.state, o));
    assert.ok(choices.length > 0);
    for (const c of choices) {
      assert.ok(c.length > 25, `too terse to be an explanation: "${c}"`);
      assert.match(c, /—/, `no explanation after the option name: "${c}"`);
    }
  });

  it('says which way a piece will point, never "rotation 2"', () => {
    const game = newGame(555);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    const track = actionMenu(game)
      .placeable.flatMap((g) => g.items)
      .filter((i) => /straight|curve|turnout/.test(i.subject));
    assert.ok(track.length > 0, 'no track pieces offered');

    for (const item of track) {
      for (const sp of item.spots) {
        assert.doesNotMatch(sp.label, /rotation \d/, `opaque rotation label: ${sp.label}`);
      }
      // A piece with more than one orientation must say which is which, or the spots are ambiguous.
      const perSquare = new Map<string, number>();
      for (const sp of item.spots) {
        if (sp.coord === null) continue;
        const k = `${sp.coord.row},${sp.coord.col}`;
        perSquare.set(k, (perSquare.get(k) ?? 0) + 1);
      }
      if ([...perSquare.values()].some((n) => n > 1)) {
        assert.ok(
          item.spots.some((sp) => /east|west|north|south/.test(sp.label)),
          `${item.subject} offers two orientations on one square without naming them`,
        );
      }
    }
  });
});

describe('replays are saves', () => {
  it('rebuilds the exact position a save describes', () => {
    // A replay is `{seed, history}` — a few hundred bytes — because the engine is deterministic and
    // runs in the browser. Re-submitting the same intents must land on the same board, or a shared
    // replay shows something the player never saw.
    const game = newGame(430);
    for (let i = 0; i < 250; i++) {
      if (currentActor(game) === null) break;
      const { options } = actionGroups(game);
      if (options.length === 0) break;
      if (!submit(game, options[0]!)) break;
    }
    const restored = fromSave(toSave(game));
    assert.equal(restored.state.players[0]!.revenue, game.state.players[0]!.revenue);
    assert.equal(restored.state.clock.day, game.state.clock.day);
    assert.equal(restored.state.clock.stage, game.state.clock.stage);
    assert.deepEqual(view(restored).cells, view(game).cells, 'the rebuilt board differs');
    assert.deepEqual(view(restored).division, view(game).division, 'the rebuilt Division differs');
  });

  it('takes the last action back, and keeps taking', () => {
    /**
     * "Is there a way to remove a card that has been misplayed? In a solitaire game it might be
     * nice to say oops, take that back."
     *
     * The save IS the game, so undo is a replay without the last intent — which means the position
     * it lands on must be EXACTLY the position that was there before, board, Division, clock and
     * revenue. Anything less and undo becomes its own source of divergence.
     */
    const game = newGame(430);
    const marks: { cells: unknown; division: unknown; revenue: number; day: number; stage: number }[] = [];
    const mark = (g: typeof game) => ({
      cells: view(g).cells,
      division: view(g).division,
      revenue: g.state.players[0]!.revenue,
      day: g.state.clock.day,
      stage: g.state.clock.stage,
    });

    for (let i = 0; i < 60; i++) {
      if (currentActor(game) === null) break;
      const { options } = actionGroups(game);
      if (options.length === 0) break;
      marks.push(mark(game));
      if (!submit(game, options[0]!)) break;
    }
    assert.ok(marks.length > 20, 'the game did not get far enough to prove anything');

    // Walk all the way back, checking each step lands on the position it came from.
    let now = game;
    for (let i = marks.length - 1; i >= 0; i--) {
      const back = undo(now);
      assert.ok(back, `undo refused with ${now.history.length} moves still on the clock`);
      now = back;
      assert.deepEqual(mark(now), marks[i], `undo ${marks.length - i} landed somewhere else`);
    }
    assert.equal(now.history.length, 0, 'walking all the way back did not empty the history');
    assert.equal(undo(now), null, 'undo must refuse when there is nothing to take back');
  });

  it('leaves nothing in the log describing a move that was taken back', () => {
    // The history panel is rebuilt with the game, so it cannot be left narrating an action that no
    // longer happened — the single most confusing thing a half-undo could do.
    const game = newGame(202);
    for (let i = 0; i < 30; i++) {
      if (currentActor(game) === null) break;
      const { options } = actionGroups(game);
      if (options.length === 0 || !submit(game, options[0]!)) break;
    }
    const before = game.log.length;
    const back = undo(game)!;
    assert.ok(back.log.length <= before, 'the log grew when a move was taken back');
    assert.deepEqual(back.log, fromSave(toSave(back)).log, 'the rebuilt log is not the replayed log');
  });

  it('stays small enough to email', () => {
    const game = newGame(202);
    for (let i = 0; i < 400; i++) {
      if (currentActor(game) === null) break;
      const { options } = actionGroups(game);
      if (options.length === 0) break;
      if (!submit(game, options[0]!)) break;
    }
    const kb = Buffer.byteLength(JSON.stringify(toSave(game))) / 1024;
    assert.ok(kb < 200, `a save is ${kb.toFixed(0)} KB — too big to be worth sharing as a file`);
  });

  it('publishes every save in public/replays with an index', () => {
    // Static hosting cannot list a directory, so the page needs a manifest or it shows nothing.
    const manifestPath = join(dist, 'replays/manifest.json');
    assert.ok(existsSync(manifestPath), 'no replay manifest was built');
    const manifest = JSON.parse(readFileSync(manifestPath, 'utf8')) as { file: string; title: string }[];
    for (const entry of manifest) {
      assert.ok(existsSync(join(dist, 'replays', entry.file)), `${entry.file} is indexed but not published`);
      assert.ok(entry.title.length > 0, `${entry.file} has no title`);
      const save = JSON.parse(readFileSync(join(dist, 'replays', entry.file), 'utf8')) as Record<string, unknown>;
      assert.equal(typeof save['seed'], 'number', `${entry.file} has no seed`);
      assert.ok(Array.isArray(save['history']), `${entry.file} has no history`);
    }
  });
});

describe('the static build', () => {

  it('builds, and needs nothing but a static host', () => {
    execFileSync('node', ['scripts/build-web.ts'], { cwd: root, stdio: 'pipe' });

    assert.ok(existsSync(join(dist, 'index.html')), 'no index.html');
    assert.ok(existsSync(join(dist, 'web/main.js')), 'no entry script');
    assert.ok(existsSync(join(dist, 'engine/apply.js')), 'the engine did not emit');
  });

  it('emits no import that a browser cannot resolve', () => {
    // Node's type-stripping lets the source import './x.ts'; a browser cannot. The build rewrites
    // those to .js, and nothing may reach for a bare module or a node: builtin.
    const files: string[] = [];
    const walk = (dir: string): void => {
      for (const e of readdirSync(dir, { withFileTypes: true })) {
        if (e.isDirectory()) walk(join(dir, e.name));
        else if (e.name.endsWith('.js')) files.push(join(dir, e.name));
      }
    };
    walk(dist);
    assert.ok(files.length > 5, 'suspiciously few emitted files');

    for (const f of files) {
      const src = readFileSync(f, 'utf8');
      // Anchor to real import/export statements. A loose `from '...'` also matches PROSE — the
      // turnout comment "a train entering a turnout from \"A\"" was read as importing a module
      // called A, which is the kind of false alarm that trains you to ignore a failing test.
      const imports = /^\s*(?:import|export)[^'"\n]*?from\s+['"]([^'"]+)['"]/gm;
      for (const m of src.matchAll(imports)) {
        const spec = m[1]!.split('?')[0]!;
        assert.ok(!spec.endsWith('.ts'), `${f} imports a .ts path: ${spec}`);
        assert.ok(!spec.startsWith('node:'), `${f} imports a Node builtin: ${spec}`);
        assert.ok(spec.startsWith('.') || spec.startsWith('/'), `${f} imports bare module: ${spec}`);
      }
      assert.ok(!/^[^/*]*\bprocess\.\w/m.test(src), `${f} references process`);
      assert.ok(!/\brequire\(/.test(src), `${f} uses require()`);
    }
  });

  it('renders clickable highlights on the board when a card is picked', async () => {
    // The real check: load the EMITTED bundle with a DOM stub, click a card, and confirm the board
    // came back with highlighted squares wired to handlers. Asserting the data has coordinates says
    // nothing about whether the page draws them.
    const els = new Map<string, Record<string, unknown>>();
    const injected: Record<string, unknown>[] = [];
    const make = (): Record<string, unknown> => {
      let html = '';
      // Cache per selector and clear it when innerHTML changes. Returning fresh objects each call
      // would drop the handlers the page assigns — the test would then report "no button" for a
      // page that works perfectly.
      let cache = new Map<string, Record<string, unknown>[]>();
      const found = new Map<string, Record<string, unknown>>();
      // Every element carries a classList. The page folds the district panel by toggling a class on
      // it, and a stub without one throws on load — which is a page that never starts, not a
      // cosmetic gap.
      const ownClasses = new Set<string>();
      // The New Game dialog is a native <dialog>: the page listens for `close` on it at load, and
      // opens it with `showModal`. Without these the page throws before it draws anything — which
      // is a page that never starts, exactly what this stub exists to catch.
      const listeners = new Map<string, ((e?: unknown) => void)[]>();
      const node: Record<string, unknown> = {
        textContent: '', style: {}, dataset: {}, onclick: null, scrollTop: 0, scrollHeight: 0,
        title: '', returnValue: '', open: false,
        addEventListener: (type: string, fn: (e?: unknown) => void) =>
          void listeners.set(type, [...(listeners.get(type) ?? []), fn]),
        showModal() {
          (node as { open: boolean }).open = true;
        },
        close(value?: string) {
          (node as { open: boolean; returnValue: string }).open = false;
          if (value !== undefined) (node as { returnValue: string }).returnValue = value;
          for (const fn of listeners.get('close') ?? []) fn();
        },
        classList: {
          add: (c: string) => void ownClasses.add(c),
          remove: (c: string) => void ownClasses.delete(c),
          contains: (c: string) => ownClasses.has(c),
          toggle: (c: string) => (ownClasses.has(c) ? ownClasses.delete(c) : ownClasses.add(c)),
        },
        classes: ownClasses,
        // The board is SVG now, and highlighting works by finding a card group and adding a class.
        // The stub has to model that much or it cannot see whether highlighting happened at all.
        querySelector(sel: string) {
          const m = /\[data-(cell|ghost)="([^"]+)"\]/.exec(sel);
          if (!m) return null;
          const key = `${m[1]}:${m[2]}`;
          if (!html.includes(`data-${m[1]}="${m[2]}"`)) return null;
          if (!found.has(key)) {
            const classes = new Set<string>();
            found.set(key, {
              onclick: null,
              classList: { add: (c: string) => void classes.add(c), has: (c: string) => classes.has(c) },
              classes,
            });
          }
          return found.get(key);
        },
        highlighted: () => [...found.values()].filter((f) => (f['classes'] as Set<string>).size > 0),
        querySelectorAll(sel: string) {
          const hit = cache.get(sel);
          if (hit) return hit;
          const out: Record<string, unknown>[] = [];
          const re = sel.startsWith('[')
            ? /data-at="([^"]*)"/g
            : new RegExp(`<button class="${sel.split('.')[1]}[^"]*"([^>]*)>`, 'g');
          let m: RegExpExecArray | null;
          while ((m = re.exec(html)) !== null) {
            const data: Record<string, string> = {};
            if (sel.startsWith('[')) data['at'] = m[1]!;
            else {
              const attr = /data-(\w+)="([^"]*)"/g;
              let a: RegExpExecArray | null;
              while ((a = attr.exec(m[1]!)) !== null) data[a[1]!] = a[2]!;
            }
            out.push({ dataset: data, onclick: null });
          }
          cache.set(sel, out);
          return out;
        },
      };
      Object.defineProperty(node, 'innerHTML', {
        get: () => html,
        set: (v: string) => {
          html = v;
          cache = new Map();
        },
      });
      return node;
    };

    // STRICT: only ids that really exist in the served page. The stub used to conjure an element
    // for any id asked for, so a `$('target')` left behind after removing #target from the HTML
    // would pass here and throw on load in a browser — the page would simply never start.
    // `[\w-]` and not `[a-zA-Z]`: a hyphenated id is valid HTML, and the narrower pattern skipped
    // those silently — which would have let a genuinely MISSING `#tc-day` pass this test too.
    const served = new Set(
      [...readFileSync(join(dist, 'play.html'), 'utf8').matchAll(/id="([a-zA-Z][\w-]*)"/g)].map(
        (m) => m[1]!,
      ),
    );
    const g = globalThis as Record<string, unknown>;
    // The page installs a tooltip layer on load, so the stub needs enough DOM to let it.
    g['document'] = {
      getElementById: (id: string) => {
        if (!served.has(id)) return null;
        if (!els.has(id)) els.set(id, make());
        return els.get(id);
      },
      createElement: () => make(),
      addEventListener: () => {},
      body: { appendChild: () => {} },
      // Capture injected stylesheets. The board is SVG styled entirely by class, so a page that
      // renders every card correctly and never loads BOARD_CSS draws them black on black — visibly
      // broken, and invisible to a stub that ignores CSS.
      head: { appendChild: (node: Record<string, unknown>) => void injected.push(node) },
    };
    g['location'] = { search: '?seed=555' };
    const store = new Map<string, string>();
    g['localStorage'] = {
      getItem: (k: string) => store.get(k) ?? null,
      setItem: (k: string, v: string) => void store.set(k, v),
      removeItem: (k: string) => void store.delete(k),
    };
    // No parameter properties — `erasableSyntaxOnly` forbids them, since Node strips types rather
    // than compiling them.
    g['URLSearchParams'] = class {
      search: string;
      constructor(search: string) {
        this.search = search;
      }
      get(k: string): string | null {
        return new RegExp(`${k}=([^&]*)`).exec(this.search)?.[1] ?? null;
      }
    };

    await import(`file://${join(dist, 'web/main.js')}?t=${Date.now()}`);

    const actions = els.get('actions')!;
    const grid = els.get('grid')!;
    const hand = els.get('hand')!;

    // Take the draw option, then pick a card's PLAY verb — the hand is the action surface now, so
    // the subject is chosen on the card rather than in a separate list.
    const clickFirst = (el: Record<string, unknown>, sel: string): boolean => {
      const fn = el['querySelectorAll'] as (s: string) => Record<string, unknown>[];
      const nodes = fn.call(el, sel);
      const target = nodes[0];
      if (!target) return false;
      (target['onclick'] as (() => void) | null)?.();
      return true;
    };

    assert.ok(clickFirst(actions, 'button.act'), 'no action button rendered');
    // Specifically the PLAY verb: a hand usually holds cards that can only be discarded, and
    // discarding highlights the Department piles rather than the board.
    const clickVerb = (el: Record<string, unknown>, verb: string): boolean => {
      const fn = el['querySelectorAll'] as (s: string) => Record<string, unknown>[];
      const target = fn
        .call(el, 'button.cardact')
        .find((n) => (n['dataset'] as Record<string, string>)['verb'] === verb);
      if (!target) return false;
      (target['onclick'] as (() => void) | null)?.();
      return true;
    };
    assert.ok(clickVerb(hand, 'play'), 'no card in hand offers a play verb');

    // Without the board stylesheet every shape is drawn black on a near-black background: the page
    // looks empty even though the markup is perfect.
    const styles = injected.map((n) => String(n['textContent'] ?? '')).join('\n');
    assert.match(styles, /\.bs-card\s*\{/, 'the page never loaded the board styles — cards would be invisible');
    assert.match(styles, /\.bs-rail\s*\{/, 'the page never loaded the rail styles');

    const html = String(grid['innerHTML']);
    // The board draws cards as addressable groups; legality is an added class or a drawn ghost.
    assert.match(html, /data-cell="/, 'the board drew no addressable cards');
    const lit = (grid['highlighted'] as () => unknown[])();
    const ghosts = /data-ghost="/.test(html);
    assert.ok(lit.length > 0 || ghosts, 'picking a card highlighted nothing on the board');
  });

  it('busts the cache on every module, so a deploy cannot half-load', () => {
    // The first real deploy served a fresh index.html against a CACHED main.js: the HTML had
    // dropped an element the old script still asked for, so the page threw `missing element:
    // target` and never started. Filenames never change, so without a version query a static host
    // will happily mix two builds.
    const html = readFileSync(join(dist, 'index.html'), 'utf8');
    const entry = /<script type="module" src="([^"]+)"/.exec(html)?.[1] ?? '';
    assert.match(entry, /\?v=/, 'the entry script is not cache-busted');

    const files: string[] = [];
    const walk = (dir: string): void => {
      for (const e of readdirSync(dir, { withFileTypes: true })) {
        if (e.isDirectory()) walk(join(dir, e.name));
        else if (e.name.endsWith('.js')) files.push(join(dir, e.name));
      }
    };
    walk(dist);

    let checked = 0;
    for (const f of files) {
      const src = readFileSync(f, 'utf8');
      for (const m of src.matchAll(/^\s*(?:import|export)[^'"\n]*?from\s+['"](\.[^'"]+)['"]/gm)) {
        assert.match(m[1]!, /\.js\?v=/, `${f} imports ${m[1]} without a version`);
        checked++;
      }
    }
    assert.ok(checked > 5, `only ${checked} relative imports seen — the check is too weak`);
  });

  it('resolves every busted import to a real file', () => {
    // Appending a query must not break resolution: the path before `?` still has to exist.
    const files: string[] = [];
    const walk = (dir: string): void => {
      for (const e of readdirSync(dir, { withFileTypes: true })) {
        if (e.isDirectory()) walk(join(dir, e.name));
        else if (e.name.endsWith('.js')) files.push(join(dir, e.name));
      }
    };
    walk(dist);
    for (const f of files) {
      const src = readFileSync(f, 'utf8');
      for (const m of src.matchAll(/^\s*(?:import|export)[^'"\n]*?from\s+['"](\.[^'"]+)['"]/gm)) {
        const target = resolve(dirname(f), m[1]!.split('?')[0]!);
        assert.ok(existsSync(target), `${f} imports ${m[1]}, which does not exist`);
      }
    }
  });

  it('renders from the Frame and the Menu, never from GameState', () => {
    /**
     * THE PROPERTY THAT MAKES A REMOTE CLIENT POSSIBLE.
     *
     * `main.ts` used to reach into `game.state` in eleven places — the phase, the outcome, another
     * player's name, the hand count. That is free with the engine in the same process and impossible
     * with a server, where the client holds no state at all: it has neither the deck order nor
     * anyone else's hand, and could not be given them without handing over the game.
     *
     * Everything it needs now lives on `Frame` and `Menu`. This is a cheap guard on a property that
     * is very easy to lose — one `game.state.clock.day` would compile, run, and quietly make the
     * page unable to run against a server. See `docs/architecture/multiplayer.md` §5.
     */
    const src = readFileSync(join(root, 'src/web/main.ts'), 'utf8');
    const reads = [...src.matchAll(/game\.state[.[]/g)];
    assert.equal(
      reads.length, 0,
      `main.ts reaches into game.state ${reads.length} time(s); it must render from Frame + Menu`,
    );
  });

  it('asks only for elements the page actually has', () => {
    // Cheap and total: compare every $('id') in the source against the ids in the served HTML.
    // Getting this wrong does not degrade the page, it stops the game starting at all.
    const src = readFileSync(join(root, 'src/web/main.ts'), 'utf8');
    const asked = new Set([...src.matchAll(/\$\('([a-zA-Z][\w-]*)'\)/g)].map((m) => m[1]!));
    const html = readFileSync(join(dist, 'play.html'), 'utf8');
    const present = new Set([...html.matchAll(/id="([a-zA-Z][\w-]*)"/g)].map((m) => m[1]!));
    // `again` is created by the game-over screen before it is looked up.
    present.add('again');
    for (const id of asked) {
      assert.ok(present.has(id), `main.ts asks for #${id}, which the page does not contain`);
    }
  });

  it('draws the same turn chart on all three screens', () => {
    // A game gets drawn in three places — the playable page, the site's replay viewer and the
    // standalone replay file — and where you are in the Day is the thing a player glances at most
    // often. It lived only in the playable page: a replay reported the Day and phase as two plain
    // strings with none of the violet "you are here" the live game uses, so the same position looked
    // like a different game depending on which screen you were on.
    //
    // ONE renderer, asserted here by source rather than by eye, because three copies of a chart is
    // exactly the kind of thing that drifts quietly.
    for (const f of ['src/web/main.ts', 'src/web/replays.ts', 'src/sim/replay.ts']) {
      const src = readFileSync(join(root, f), 'utf8');
      assert.match(src, /turnChartHtml/, `${f} does not use the shared turn chart`);
      assert.match(src, /TURNCHART_CSS/, `${f} does not ship the shared turn-chart styling`);
    }
    // And no screen may keep a private copy of the phase table.
    for (const f of ['src/web/main.ts', 'src/web/replays.ts', 'src/sim/replay.ts']) {
      const src = readFileSync(join(root, f), 'utf8');
      assert.doesNotMatch(src, /key: 'shiftChange'/, `${f} has its own copy of the phase table`);
    }
  });

  it('puts every verb on the card it belongs to', () => {
    // THE HAND IS THE ACTION SURFACE. A card used to appear twice under two different models: as a
    // subject to play, and as one flat button per Department to discard. For a four-card hand that
    // discard block alone was twelve buttons repeating three choices four times.
    const game = newGame(555);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);

    const menu = actionMenu(game);
    const held = game.state.decks.hands.get(0) ?? [];
    assert.equal(menu.hand.length, held.length, 'every card in hand needs an entry');
    for (const h of menu.hand) {
      assert.ok(h.name.length > 0, 'a hand entry with no name');
      // A verb is only offered when the engine would accept it.
      for (let slot = 0; slot < 3; slot++) {
        const idx = h.discard[slot];
        if (idx === null || idx === undefined) continue;
        const i = menu.options[idx]!;
        assert.equal(i.type, 'card.discard');
        assert.equal((i as { cardId: string }).cardId, h.cardId);
        assert.equal((i as { toSlot: number }).toSlot, slot, 'a discard is keyed to the wrong Department');
      }
      if (h.playNow !== null) {
        const i = menu.options[h.playNow]!;
        assert.equal(i.type, 'card.play');
        assert.equal((i as { placement?: unknown }).placement, undefined, 'playNow must need no square');
      }
      if (h.placeKey !== null) {
        const item = menu.placeable.flatMap((g) => g.items).find((it) => it.subjectKey === h.placeKey);
        assert.ok(item, 'placeKey points at no placeable entry');
        assert.equal(item!.spots.length, h.spots);
      }
    }
  });

  it('previews a track card in hand even when it has nowhere legal to go', () => {
    // REPORTED on a left-hand curve, which showed no preview at all. The shape was read off the
    // card's legal PLACEMENTS, so a card with no legal square had nothing to draw — and that is
    // exactly when a player most wants to see what the piece is.
    const game = newGame(775569289);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    const { cardId } = dealTrack(game, 'curved', 'left');
    const entry = actionMenu(game).hand.find((h) => h.cardId === cardId);
    assert.ok(entry, 'the curve is not in the hand menu');
    assert.deepEqual(entry!.shapes, [['se'], ['nw']], 'both orientations must be previewable');
    assert.equal(entry!.spots, 0, 'this is the case worth guarding: nowhere legal to lay it');
  });

  it('describes a curve as a curve, not as a turnout', () => {
    // REPORTED: the curve read "east-west track with a 45° leg", which is a turnout — a road across
    // the card plus a leg off it. A curve has ONE road and nothing runs past it, which is precisely
    // why it may not be laid in the Running Track.
    const game = newGame(775569289);
    const { cardId } = dealTrack(game, 'curved', 'left');
    const what = cardDescription(game.state, cardId);
    assert.doesNotMatch(what, /east-west track with/, 'a curve is still described as a turnout');
    assert.match(what, /single road/);
    assert.match(what, /no track runs past it/);
    // And a turnout must still say it HAS a road across it.
    const t = dealTrack(game, 'turnout', 'left');
    assert.match(cardDescription(game.state, t.cardId), /east-west track with/);
  });

  it('names the Mainline card a modifier would change, and what it becomes', () => {
    // REPORTED: "Realignment on Mainline card 3" — a raw node index, with no clue which stretch of
    // the Division it meant or what it would do, and no tooltip either, because the action list only
    // attaches one when the label happens to contain an em-dash.
    const game = newGame(775569289);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    // Pin a Mainline card Realignment can actually convert (curves -> plains). Terrain is dealt from
    // the same RNG stream as the cards, so leaving this to the seed makes the test luck rather than
    // a check — it broke the moment the opening deal changed how far that stream had advanced.
    const node = game.state.division.nodes.find((n) => n.kind === 'mainline');
    assert.ok(node && node.kind === 'mainline', 'no Mainline card to realign');
    if (node.kind === 'mainline') { node.card = 'curves'; node.transits = []; }
    for (const [id, c] of game.state.cards) {
      if (c.kind.kind === 'mainlineModifier' && c.kind.key === 'realignment') {
        game.state.decks.hands.set(0, [id]);
        break;
      }
    }
    const menu = actionMenu(game);
    const labels = menu.direct
      .filter((g) => g.title === 'Mainline modifiers')
      .flatMap((g) => g.actions)
      .map((a) => a.label);
    assert.ok(labels.length > 0, 'Realignment was not offered at all');
    for (const l of labels) {
      assert.doesNotMatch(l, /Mainline card \d/, `still naming a raw node index: ${l}`);
      assert.match(l, / — /, `no tooltip half, so the button gets none: ${l}`);
      assert.match(l, /converts it to|nothing here to convert/, `does not say what it does: ${l}`);
    }
  });

  it('never strands the player with a legal move and no way to make it', () => {
    // REGRESSION, and a hard softlock. Moving train make-up onto the Division Yard chips took the
    // "Making up …" group out of the action list, and the PASS option went with it — so a train
    // being made up when the yard held nothing it could take had no control on screen at all.
    // Reported at Stage 10 of seed 775569289, Train 10 waiting at the West Division Point.
    //
    // The invariant is the general one: every option the engine offers must be reachable through
    // SOMETHING the page renders. Menu-level, so it holds for every phase rather than the handful a
    // click-through happens to visit.
    const reachable = (menu: ReturnType<typeof actionMenu>): Set<number> => {
      const out = new Set<number>();
      for (const g of menu.direct) for (const a of g.actions) out.add(a.index);
      for (const g of menu.placeable) for (const it of g.items) for (const sp of it.spots) out.add(sp.index);
      for (const h of menu.hand) {
        if (h.playNow !== null) out.add(h.playNow);
        for (const d of h.discard) if (d !== null && d !== undefined) out.add(d);
      }
      if (menu.makeUp) {
        for (const c of menu.makeUp.cars) out.add(c.index);
        if (menu.makeUp.pass !== null) out.add(menu.makeUp.pass);
      }
      return out;
    };

    for (const seed of [775569289, 555, 430]) {
      const game = newGame(seed);
      for (let i = 0; i < 900 && currentActor(game) !== null; i++) {
        const menu = actionMenu(game);
        if (menu.options.length === 0) break;
        const got = reachable(menu);
        assert.ok(
          got.size > 0,
          `seed ${seed}: ${menu.options.length} legal options and not one of them is on screen ` +
            `(phase ${game.state.clock.phase}, Day ${game.state.clock.day} Stage ${game.state.clock.stage})`,
        );
        const { options } = actionGroups(game);
        if (options.length === 0 || !submit(game, options[0]!)) break;
      }
    }
  });

  it('renders every part of the menu it is given', () => {
    // THE CHECK THAT WOULD HAVE CAUGHT THE SOFTLOCK ABOVE. The option was in the menu all along —
    // `makeUp.pass` was computed correctly and simply never rendered, so the invariant on the menu
    // shape passed while the page stranded the player.
    //
    // Coarse on purpose: it asks only that every field the menu offers is referenced by the page. A
    // field nothing reads is either dead or a control that has gone missing, and both are worth a
    // failing test.
    const src = readFileSync(join(root, 'src/web/main.ts'), 'utf8');
    for (const field of ['makeUp.title', 'makeUp.cars', 'makeUp.pass', 'h.playNow', 'h.discard', 'h.shapes']) {
      assert.match(src, new RegExp(field.replace('.', '\\.')), `main.ts never reads menu ${field}`);
    }
  });

  it('leaves the action list to what is not a card in hand', () => {
    // Measured across a full game of seed 430: the widest action list was 22 buttons, of which up to
    // 12 were the discard cross-product and up to 10 were "add loaded hopper"-style make-up buttons.
    // Both now live on the objects already on screen — the card, and the Division Yard chip.
    const game = newGame(430);
    let worst = 0;
    for (let i = 0; i < 400 && currentActor(game) !== null; i++) {
      const menu = actionMenu(game);
      const shown = menu.direct
        .filter((g) => !/^(Play|Discard) a card from my hand$/.test(g.title) && !/^Making up /.test(g.title))
        .reduce((n, g) => n + g.actions.length, 0);
      worst = Math.max(worst, shown);
      const { options } = actionGroups(game);
      if (options.length === 0 || !submit(game, options[0]!)) break;
    }
    // Raised 8 -> 10 -> 13. The widest group is Switching every time, which is a crew's reachable
    // squares — the list getting longer for a good reason rather than the cross-products this test
    // was written to kill. Re-measured over five seeds (430, 99, 1234, 880009, 202) in all three
    // opening deals: 13 under `threeRandom` and `sixRandom`, 10 under `threeTrackThreeOther`.
    assert.ok(worst <= 13, `the action list still reaches ${worst} buttons`);
  });

  it('makes up ONE train at a time, and names that train', () => {
    // REPORTED: the history said Train 9 was being made up at the East Division Point while the
    // panel above it read "Making up Train 10 — 18 kinds it may take are highlighted". Two trains
    // can be built in the same Stage (a timetabled train plus a Second Section or an Extra), and
    // every option from every tray was collected into one panel titled with whichever tray came
    // first out of the map. Reproduced at seed 99, Day 3 Stage 12: eighteen chips, two trays.
    //
    // The panel must belong to exactly one tray — otherwise clicking a car in the yard couples it
    // to whichever train owns the first matching option, which may not be the one named.
    for (const seed of [99, 430, 270861860]) {
      const game = newGame(seed);
      for (let i = 0; i < 600 && currentActor(game) !== null; i++) {
        const menu = actionMenu(game);
        if (menu.makeUp) {
          const trays = new Set(
            menu.makeUp.cars.map((c) => (menu.options[c.index] as { trayId: string }).trayId),
          );
          if (menu.makeUp.pass !== null) {
            trays.add((menu.options[menu.makeUp.pass] as { trayId: string }).trayId);
          }
          assert.ok(trays.size <= 1, `seed ${seed}: the make-up panel covers ${trays.size} trains at once`);
          for (const t of trays) {
            assert.equal(t, menu.makeUp.trayId, `seed ${seed}: a car belongs to a train the panel does not name`);
          }
          const tray = game.state.trays.get(menu.makeUp.trayId);
          assert.ok(tray, `seed ${seed}: the panel names a tray that does not exist`);
          assert.ok(
            menu.makeUp.title.includes(String(tray.trainNumber)),
            `seed ${seed}: "${menu.makeUp.title}" does not name Train ${tray.trainNumber}`,
          );
        }
        const { options } = actionGroups(game);
        if (options.length === 0 || !submit(game, options[0]!)) break;
      }
    }
  });

  it('keys each make-up car to the yard chip that shows it', () => {
    // Ten buttons reading "add loaded hopper" when the Division Yard is already on screen showing
    // exactly those cars by type and load state. The yard is the surface.
    const game = newGame(430);
    for (let i = 0; i < 400 && currentActor(game) !== null; i++) {
      const menu = actionMenu(game);
      if (menu.makeUp && menu.makeUp.cars.length > 0) {
        for (const car of menu.makeUp.cars) {
          const intent = menu.options[car.index]!;
          assert.equal(intent.type, 'newTrain.placeCar');
          assert.equal((intent as { carType: string }).carType, car.carType);
          assert.equal((intent as { loaded: boolean }).loaded, car.loaded);
        }
        assert.match(menu.makeUp.title, /Making up/, 'the make-up panel does not name the train');
        return;
      }
      const { options } = actionGroups(game);
      if (options.length === 0 || !submit(game, options[0]!)) break;
    }
    assert.fail('no train was ever made up, so this proves nothing');
  });

  it('offers ABS Signals the Mainline, not the Office Area', () => {
    // REPORTED TWICE. First: the card says "any Mainline card" and every option offered was a
    // square in the Office Area, because the candidate list handed grid cells to a check that read
    // the column as a Division node index.
    //
    // Then the fix carried its own bug: a Mainline placement travelled as `{ row: -1, col: node }`,
    // and row −1 is an ORDINARY DISTRICT ROW — the first one below the Running Track. So ABS
    // Signals highlighted whichever district card sat at that column, and a real enhancement laid
    // one row down was described as being out on the Mainline. A Mainline placement now carries a
    // node and no coordinate at all, which is what this asserts.
    const game = newGame(775569289);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    for (const [id, c] of game.state.cards) {
      if (c.kind.kind === 'enhancement' && c.kind.key === 'absSignals') {
        game.state.decks.hands.set(0, [id]);
        break;
      }
    }
    const spots = actionMenu(game).placeable.flatMap((g) => g.items).flatMap((it) => it.spots);
    assert.ok(spots.length > 0, 'ABS Signals was not offered anywhere');
    for (const sp of spots) {
      assert.match(sp.label, /out on the Mainline/, `not a Mainline card: ${sp.label}`);
      assert.equal(sp.coord, null, 'a Mainline placement must not claim a square in the district');
      const node = game.state.division.nodes[sp.node!];
      assert.equal(node?.kind, 'mainline', `spot points at a ${node?.kind}, not a Mainline card`);
    }
  });

  it('draws a train standing on a card, in order, with which way it points', () => {
    // REPORTED: with a train in the station there was no way to see which cars it held or in what
    // order, so the switching game could not be planned at all — "drop 1 car" says nothing when you
    // cannot see what is on the back.
    const game = newGame(555);
    const area = game.state.officeAreas.get(0)!;
    const id = 'crew';
    game.state.trays.set(id, {
      id, trainNumber: 10, trainIsExtra: false, engineAt: 0,
      consist: [
        { type: 'tank', loaded: true },
        { type: 'boxcar', loaded: true },
        { type: 'caboose', loaded: false },
      ],
      direction: 'east', facing: 'e',
      position: { at: 'grid', seat: 0, coord: { row: area.runningRow, col: 0 } }, movesUsed: 0,
    } as never);

    const cell = view(game).cells.find((c) => c.row === area.runningRow && c.col === 0)!;
    assert.ok(cell.train, 'the card carries no train');
    assert.deepEqual(cell.train!.cars, ['loaded tank', 'loaded boxcar', 'caboose'], 'car order is lost');
    assert.equal(cell.train!.engineAt, 0, 'the engine has no place in the train');
    assert.equal(cell.train!.facing, 'e', 'which way it points is not carried');

    const svg = officeSvg([cell], area.runningRow);
    assert.match(svg, /bs-t-eng/, 'the engine is not drawn');
    assert.match(svg, /bs-t-ld/, 'a loaded car is not drawn');
    assert.match(svg, /cab</, 'the caboose is not named on the board');
  });

  it('draws the train the way it stands on the map — nose toward the way it faces', () => {
    /**
     * REPORTED at seed 270861860: Train 10 running EAST arrived at the Whistle Post drawn engine
     * first at the WEST end, with the caboose at the east — which reads as an engine shoving its
     * whole train ahead of it. "I'd expect it to look just like this, except with the engine and
     * caboose reversed so that the engine is the eastmost of the train."
     *
     * `consist` is ordered nose first, and the renderer drew index 0 leftmost whatever the train was
     * doing. A westbound train therefore came out right and an eastbound one came out mirrored.
     */
    const game = newGame(555);
    const area = game.state.officeAreas.get(0)!;
    const order = (facing: 'e' | 'w'): string[] => {
      game.state.trays.set('crew', {
        id: 'crew', trainNumber: 10, trainIsExtra: false, engineAt: 0,
        consist: [
          { type: 'hopper', loaded: true },
          { type: 'hopper', loaded: false },
          { type: 'caboose', loaded: false },
        ],
        direction: facing === 'e' ? 'east' : 'west', facing,
        position: { at: 'grid', seat: 0, coord: { row: area.runningRow, col: 0 } }, movesUsed: 0,
      } as never);
      const cell = view(game).cells.find((c) => c.row === area.runningRow && c.col === 0)!;
      const svg = officeSvg([cell], area.runningRow);
      // The three-letter labels in the order they are drawn, west to east.
      return [...svg.matchAll(/class="bs-tcarlab"[^>]*>([^<]+)</g)].map((m) => m[1]!);
    };

    // Nose first is engine, hopper, hopper, caboose. Running west the engine leads at the west end;
    // running east the same train is drawn the other way round.
    assert.deepEqual(order('w'), ['◀', 'hop', 'hop', 'cab'], 'a westbound train is drawn backwards');
    assert.deepEqual(order('e'), ['cab', 'hop', 'hop', '▶'], 'an eastbound train is not turned round');
  });

  it('shows A/D tracks on the Office card, taken and total', () => {
    // REPORTED: the tooltip said "3 A/D tracks" and the card showed nothing — the number that
    // decides whether the next arrival is an automatic collision (§8.3).
    const game = newGame(555);
    const area = game.state.officeAreas.get(0)!;
    const cell = view(game).cells.find((c) => c.kind === 'office')!;
    assert.ok(cell.ad, 'the Office card carries no A/D count');
    assert.equal(cell.ad!.of, 1, 'a Whistle Post has one A/D track');
    assert.equal(cell.ad!.used, 0);
    assert.match(officeSvg([cell], area.runningRow), /bs-ad/, 'no A/D pips are drawn');
  });

  it('names the cars a drop would set out, and which end they come off', () => {
    // REPORTED: "drop 1 car(s)" — which car? And because a nose drop and a tail drop read
    // identically, the action list's duplicate-label filter discarded one of them outright, so
    // setting out from the front of the train could not be chosen at all.
    const game = newGame(555);
    const area = game.state.officeAreas.get(0)!;
    const id = 'crew';
    game.state.trays.set(id, {
      id, trainNumber: null, trainIsExtra: false, engineAt: 1,
      consist: [{ type: 'boxcar', loaded: true }, { type: 'caboose', loaded: false }],
      direction: 'east', facing: 'e',
      position: { at: 'grid', seat: 0, coord: { row: area.runningRow, col: 1 } }, movesUsed: 0,
    } as never);
    const front = describeIntent(game.state, { type: 'switch.dropCars', trayId: id, count: 1, fromNose: true });
    const back = describeIntent(game.state, { type: 'switch.dropCars', trayId: id, count: 1 });
    assert.match(front, /loaded boxcar/, `the front cut is not named: ${front}`);
    assert.match(front, /off the front/);
    assert.match(back, /caboose/, `the back cut is not named: ${back}`);
    assert.match(back, /off the back/);
    assert.notEqual(front, back, 'the two ends still read identically, so one is dropped from the list');
  });

  it('shows where a played train card landed on the timetable', () => {
    // REPORTED: playing a train card rolls 1D12 for its departure Stage and the card simply left the
    // hand — the answer arrived only as one line in the history panel. The twelve slots have been in
    // the Frame all along and only the standalone replay ever drew them.
    // Playing a train card is the mechanism under test, so it is played directly rather than hoped
    // for over 900 arbitrary choices — which is what this did until the opening deal changed which
    // cards a seed puts in reach.
    const game = newGame(430);
    submit(game, actionGroups(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw')!);
    const train = [...game.state.cards.entries()].find(
      ([, c]) => c.kind.kind === 'timetabledTrain' || c.kind.kind === 'extraTrain',
    );
    assert.ok(train, 'no train card in the deck');
    game.state.decks.hands.set(0, [train![0]]);
    assert.ok(submit(game, { type: 'card.play', cardId: train![0] }), 'the train card was refused');

    const landed = game.scheduled;
    assert.ok(landed !== null, 'no train was ever scheduled');
    const f = view(game);
    assert.ok(f.timetable[landed!] !== null, 'the slot the roll reported is empty');
    // The roll gets a sound, because it is the one die a player rolls and it landed silently.
    assert.ok(game.cues.includes('schedule'), 'scheduling a train made no sound');
    // And the panel flashes the slot that changed, marking the moment rather than the state.
    const html = timetableHtml(f, landed);
    assert.match(html, /tt-slot[^"]*fresh/, 'the new slot is not flagged');
    assert.equal((timetableHtml(f, null).match(/fresh/g) ?? []).length, 0, 'the flash must not persist');
    assert.match(html, new RegExp(`T${f.timetable[landed!]}`), 'the train is not named in its slot');
  });

  it('draws the side panels from one place, on both screens', () => {
    // A replay is the game being WATCHED rather than played, so it should look like the game. The
    // site's viewer had three panels against the play page's eight — no facilities, no blockers, no
    // cards, no yards — which meant it could not answer "why is nothing moving?", the question a
    // replay mostly exists to answer.
    for (const f of ['src/web/main.ts', 'src/web/replays.ts']) {
      const src = readFileSync(join(root, f), 'utf8');
      for (const fn of ['pilesHtml', 'yardHtml', 'blockedHtml', 'facilitiesHtml']) {
        assert.match(src, new RegExp(fn), `${f} does not use the shared ${fn}`);
      }
      assert.match(src, /PANEL_CSS/, `${f} does not ship the shared panel styling`);
    }
    // The HAND is the one panel that differs, and deliberately: on the play page every card carries
    // its own play and discard verbs, while a replay's hand is a read-only row of what was held.
    assert.match(readFileSync(join(root, 'src/web/replays.ts'), 'utf8'), /handHtml/);
    assert.match(readFileSync(join(root, 'src/web/main.ts'), 'utf8'), /button class="cardact/);
    // And the viewer's page must actually have somewhere to put them.
    const html = readFileSync(join(dist, 'replays.html'), 'utf8');
    for (const id of ['vhand', 'vdepts', 'vdivyard', 'vclsyard', 'vblocked', 'vfacs']) {
      assert.match(html, new RegExp(`id="${id}"`), `the replay viewer has no #${id} panel`);
    }
  });

  it('lets a replay change pace while it is playing', () => {
    // The interval is created with whatever the speed select held when play started. Nothing re-read
    // it in the site's viewer, so choosing "extra slow" mid-replay did nothing at all and the pace
    // looked stuck — the standalone replay had always restarted its timer on change.
    for (const [file, id] of [['src/web/replays.ts', 'vspeed'], ['src/sim/replay.ts', 'speed']]) {
      const src = readFileSync(join(root, file!), 'utf8');
      assert.match(
        src,
        new RegExp(`\\$\\('${id}'\\)[^;]*\\.onchange`),
        `${file} never reacts to a speed change`,
      );
    }
  });

  it('offers the same five paces in both replay viewers', () => {
    const standalone = readFileSync(join(root, 'src/sim/replay.ts'), 'utf8');
    const viewer = readFileSync(join(root, 'src/web/replays.html'), 'utf8');
    const paces = (src: string): string[] =>
      [...src.matchAll(/<option value="\d+"[^>]*>([^<]+)<\/option>/g)].map((m) => m[1]!);
    assert.deepEqual(paces(standalone), ['extra slow', 'slow', 'normal', 'fast', 'very fast']);
    assert.deepEqual(paces(viewer), paces(standalone), 'the two replay viewers offer different paces');
  });

  it('gives every phase the engine can be in a pill on the turn chart', () => {
    // The turn chart exists to say where in the Stage you are, so a phase with no pill is a hole
    // exactly when the player most needs it. `Phase` is a closed union in the engine; this fails if
    // one is added and the chart is not.
    const engine = readFileSync(join(root, 'src/engine/state.ts'), 'utf8');
    const decl = /export type Phase =([^;]+);/.exec(engine);
    assert.ok(decl, 'the Phase union moved — this test cannot see it any more');
    const phases = [...decl![1]!.matchAll(/'([a-zA-Z]+)'/g)].map((m) => m[1]!);
    assert.ok(phases.length >= 5, `only found ${phases.length} phases`);

    const src = readFileSync(join(root, 'src/sim/turnchart.ts'), 'utf8');
    for (const p of phases) {
      assert.match(src, new RegExp(`key: '${p}'`), `no turn-chart pill for the ${p} phase`);
    }
    // And every pill must carry a tooltip: an icon alone does not explain a phase.
    const tips = [...src.matchAll(/key: '[a-zA-Z]+',\s*\n\s*label: '[^']+',\s*\n\s*tip: ["']/g)];
    assert.equal(tips.length, phases.length, 'a turn-chart pill has no tooltip');

    const html = readFileSync(join(dist, 'play.html'), 'utf8');
    assert.match(html, /id="turnchart"/, 'the page has no turn chart');
    assert.doesNotMatch(html, /phase: <b id="phase">/, 'the old title-bar phase text is still there');
  });

  it('serves all three pages, each stamped and cache-busted', () => {
    // The splash is the front door now; the game and the replay directory are separate pages.
    for (const [name, entry] of [
      ['index.html', 'splash'],
      ['play.html', 'main'],
      ['replays.html', 'replays'],
    ] as const) {
      const html = readFileSync(join(dist, name), 'utf8');
      assert.match(html, new RegExp(`src="\\./web/${entry}\\.js\\?v=`), `${name} is not cache-busted`);
      assert.doesNotMatch(html, /__BUILD__/, `${name} was published without a build stamp`);
      assert.ok(!/https?:\/\//.test(html.replace(/<!--[\s\S]*?-->/g, '')), `${name} fetches something external`);
    }
    const splash = readFileSync(join(dist, 'index.html'), 'utf8');
    assert.match(splash, /href="\.\/play\.html"/, 'the splash does not link to the game');
    assert.match(splash, /href="\.\/replays\.html"/, 'the splash does not link to the replays');
  });

  it('serves a page that loads the game as a module', () => {
    const html = readFileSync(join(dist, 'play.html'), 'utf8');
    assert.match(html, /<script type="module" src="\.\/web\/main\.js(\?v=[^"]*)?">/);
    assert.ok(!/https?:\/\//.test(html.replace(/<!--[\s\S]*?-->/g, '')), 'page fetches something external');
    for (const id of ['grid', 'division', 'actions', 'log', 'facs', 'hand', 'blocked']) {
      assert.ok(html.includes(`id="${id}"`), `page is missing #${id}`);
    }
  });
});

describe('the Division map shows the whole route', () => {
  const divisionFor = (players: number): string => {
    const s = createEngineGame({
      id: `div-${players}`,
      seed: 7,
      config: {
        mode: players === 1 ? 'solitaire' : 'competitive',
        victory: 'highestAfterDays',
        length: 'standard',
        optionalRules: { reducedVisibility: false, sisterTrains: false, employeeRotation: false, emergencyToolbox: false },
      },
      playerNames: ['A', 'B', 'C', 'D'].slice(0, players),
    });
    return divisionSvg(snapshot(s, [], null).division);
  };

  it('expands each Office into its Running Track, Limits to Limits', () => {
    // The map used to collapse a whole district into one "Office" box, so the track a train
    // actually runs along was invisible on the only view that shows where trains are.
    const s = createEngineGame({
      id: 'div-run',
      seed: 7,
      config: {
        mode: 'solitaire', victory: 'highestAfterDays', length: 'standard',
        optionalRules: { reducedVisibility: false, sisterTrains: false, employeeRotation: false, emergencyToolbox: false },
      },
      playerNames: ['Solitaire'],
    });
    const f = snapshot(s, [], null);
    const office = f.division.find((n) => n.kind === 'office');
    assert.ok(office, 'no Office node in the Division');
    assert.ok(office!.running && office!.running.length >= 3, 'the Office carries no Running Track');
    // The through route runs BETWEEN the Limits, so both ends must be Limits cards (§2.1).
    assert.equal(office!.running![0]!.kind, 'limits', 'the district does not start at a Limits sign');
    assert.equal(office!.running![office!.running!.length - 1]!.kind, 'limits', 'the district does not end at a Limits sign');
    // And the columns must run west to east without a hole.
    const cols = office!.running!.map((c) => c.col);
    for (let i = 1; i < cols.length; i++) {
      assert.ok(cols[i]! > cols[i - 1]!, 'the Running Track is not ordered west to east');
    }
  });

  it('seats 1 to 4 players without overlapping or spilling off the canvas', () => {
    // A row, two facing rows, a horseshoe and a square. The layout is geometry with no visual
    // feedback loop, so this is the only thing standing between a change and an unreadable board.
    for (const players of [1, 2, 3, 4]) {
      const svg = divisionFor(players);
      const vb = /viewBox="0 0 (\d+) (\d+)"/.exec(svg);
      assert.ok(vb, `${players}p produced no viewBox`);
      const W = Number(vb![1]);
      const H = Number(vb![2]);
      const rects = [...svg.matchAll(/class="bs-dcell[^"]*"[^>]*><rect x="([\d.]+)" y="([\d.]+)" width="([\d.]+)" height="([\d.]+)"/g)]
        .map((m) => ({ x: +m[1]!, y: +m[2]!, w: +m[3]!, h: +m[4]! }));
      assert.ok(rects.length >= 5, `${players}p drew only ${rects.length} cells`);
      for (let i = 0; i < rects.length; i++) {
        const a = rects[i]!;
        assert.ok(
          a.x >= 0 && a.y >= 0 && a.x + a.w <= W && a.y + a.h <= H,
          `${players}p: a cell falls outside the canvas`,
        );
        for (let j = i + 1; j < rects.length; j++) {
          const b = rects[j]!;
          const hit = a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
          assert.ok(!hit, `${players}p: two cells overlap`);
        }
      }
    }
  });

  it('draws the Division as a line with two ends, never as a loop', () => {
    // Seating players around a table invites exactly one misreading: that the route joins up. It
    // does not. Both ends are labelled as ends, not as an entrance and an exit: odd trains run west
    // and even run east, so each Division Point is a way on AND a way off.
    for (const players of [1, 2, 3, 4]) {
      const svg = divisionFor(players);
      assert.equal((svg.match(/class="bs-stop"/g) ?? []).length, 2, `${players}p has no pair of buffer stops`);
      assert.match(svg, /west end · in and out/, `${players}p does not label the west end`);
      assert.match(svg, /east end · in and out/, `${players}p does not label the east end`);

      /**
       * AND THE LABELS MUST BE ON THE CANVAS.
       *
       * REPORTED: both were clipped. They hung off the OUTSIDE of the end cells, anchored away from
       * the board, so fitting them meant padding wider than the caption — which the board did not
       * have, and which would have spent that width on two captions rather than on the map. Centred
       * under their own Division Point they cost nothing and cannot be cut off.
       */
      const vb = /viewBox="0 0 (\d+) (\d+)"/.exec(svg);
      const W = Number(vb![1]);
      const ends = [...svg.matchAll(/class="bs-end" x="([\d.]+)" y="([\d.]+)" text-anchor="middle">([^<]+)</g)];
      assert.equal(ends.length, 2, `${players}p: an end label is not centred under its cell`);
      for (const e of ends) {
        const x = Number(e[1]);
        const half = e[3]!.length * 3; // ~6px a character in the 10px monospace this uses
        assert.ok(x - half >= -24 && x + half <= W + 24, `${players}p: "${e[3]}" is clipped at x=${x} of ${W}`);
      }
    }
  });
});

describe('every square the menu offers can actually be clicked (regression)', () => {
  it('draws a target for it, inside the canvas', () => {
    // REGRESSION. Empty squares were drawn by a separate `ghostSvg` and spliced into the SVG after
    // the fact. It sized its origin over cells PLUS spots while `officeSvg` sized itself over cells
    // alone, so the two disagreed the moment a legal square lay outside the played cards — which is
    // every square that would EXTEND the district, i.e. most of them.
    //
    // Seed 555 offered three placements for a straight; the empty square was drawn at y=99 on a
    // canvas 103 tall. The list said three, the board showed two, and the third could not be
    // clicked at all. Ghosts are drawn by `officeSvg` in the same pass now, so there is one origin
    // and one canvas.
    let checked = 0;
    for (const seed of [555, 42, 909, 7, 88, 1234]) {
      const game = newGame(seed);
      const draw = actionMenu(game).options.find((o) => o.type === 'localOps.choose' && o.option === 'draw');
      if (draw) submit(game, draw);

      // Track is drawn from the deck now, so an opening hand often holds nothing placeable at all.
      // Open the district with a turnout, then hold the curve that its 45° leg calls for: that curve
      // is offered a square OFF the Running Track, which is the case that used to draw off-canvas.
      const { option: turnout } = dealTrack(game, 'turnout', 'left');
      if (turnout) submit(game, turnout);
      // Hold BOTH the curve its leg calls for and a straight: the curve is offered the square off
      // the Running Track, the straight the growth points on it. A curve may no longer be laid in
      // the running row at all — it has no east-west road and would dead-end the main — so on its
      // own it now offers a single square and the bounds check would barely exercise anything.
      const curve = dealTrack(game, 'curved', 'left');
      const straight = dealTrack(game, 'straight', 'none');
      game.state.decks.hands.set(0, [curve.cardId, straight.cardId]);

      const menu = actionMenu(game);
      const f = view(game);

      for (const item of menu.placeable.flatMap((g) => g.items)) {
        // Only the spots that ARE on this board: a Mainline placement has no square to draw.
        const onBoard = item.spots.flatMap((sp) => (sp.coord === null ? [] : [sp.coord]));
        const uniq = [...new Map(onBoard.map((c) => [`${c.row},${c.col}`, c])).values()];
        const ghosts = uniq.filter((c) => !f.cells.some((x) => x.row === c.row && x.col === c.col));
        const svg = officeSvg(f.cells, f.runningRow, ghosts);
        const vb = /viewBox="0 0 ([\d.]+) ([\d.]+)"/.exec(svg);
        assert.ok(vb, 'the board produced no viewBox');
        const W = Number(vb![1]);
        const H = Number(vb![2]);

        for (const c of uniq) {
          checked++;
          const key = `${c.row},${c.col}`;
          const isCard = f.cells.some((x) => x.row === c.row && x.col === c.col);
          const target = isCard ? `data-cell="${key}"` : `data-ghost="${key}"`;
          assert.ok(svg.includes(target), `${item.subject}: (${key}) is offered but has no target on the board`);

          // `data-tip` sits between the id and the transform on a real card, so match loosely.
          const m = new RegExp(
            'data-(?:cell|ghost)="' + key + '"[^>]*transform="translate\\((-?[\\d.]+),(-?[\\d.]+)\\)"',
          ).exec(svg);
          assert.ok(m, `${item.subject}: (${key}) has no position`);
          const x = Number(m![1]);
          const y = Number(m![2]);
          assert.ok(
            x >= 0 && y >= 0 && x + 166 <= W + 0.01 && y + 96 <= H + 0.01,
            `${item.subject}: (${key}) is drawn off-canvas at (${x}, ${y}) on ${W}x${H} — a legal move that cannot be clicked`,
          );
        }
      }
    }
    assert.ok(checked >= 12, `only ${checked} squares checked — the test would be vacuous`);
  });
});

describe('the sounds fire on the events they name', () => {
  it('one cue per Stage boundary, the bell replacing the whistle at a Day', () => {
    // The model names WHAT happened and the page decides what it sounds like. Getting this wrong is
    // not a silent failure — it is a whistle every few seconds, or a bell that never rings — so the
    // count is checked against the clock rather than trusted.
    const game = newGame(555);
    const cues: Record<string, number> = {};
    let stageBoundaries = 0;
    let dayBoundaries = 0;

    for (let i = 0; i < 4000; i++) {
      if (currentActor(game) === null) break;
      const { options, groups } = actionGroups(game);
      if (groups.length === 0 || options.length === 0) break;
      const before = { d: game.state.clock.day, s: game.state.clock.stage };
      submit(game, options[groups[0]!.actions[0]!.index]!);
      for (const c of game.cues) cues[c] = (cues[c] ?? 0) + 1;
      game.cues.length = 0;
      if (game.state.clock.day !== before.d) dayBoundaries++;
      if (game.state.clock.stage !== before.s || game.state.clock.day !== before.d) stageBoundaries++;
    }

    assert.ok(stageBoundaries > 20, `only ${stageBoundaries} Stages elapsed — the game did not run`);
    assert.equal(cues['day'] ?? 0, dayBoundaries, 'the Day bell does not match the Days played');
    assert.equal(
      (cues['stage'] ?? 0) + (cues['day'] ?? 0),
      stageBoundaries,
      'Stage boundaries and Stage-or-Day cues disagree — some Stage ended silently, or one sounded twice',
    );
    assert.ok((cues['train'] ?? 0) > 0, 'no train was ever announced');
  });

  it('says nothing at all before the first Stage has ended', () => {
    // A Stage BEGINNING is the previous one ending — except the first, which is the game opening.
    const game = newGame(555);
    assert.deepEqual(game.cues, [], 'the game announced a Stage ending before one had');
  });
});

describe('the hand limit is a limit, not a toll on drawing (regression)', () => {
  it('only blocks the end of a turn when more than three cards are held', () => {
    // REGRESSION. The page set "must play a card" on ANY draw, so a player who had already played
    // two cards and drew back to three was still forced to spend one. §6.2 is a hand LIMIT —
    // "reduce his hand to no more than three cards" — and the engine says the same: `draw.end` is
    // refused with HAND_LIMIT and otherwise allowed.
    const game = newGame(555);
    const hand = game.state.decks.hands.get(0)!;

    hand.length = 0;
    assert.equal(overHandLimit(game), false, 'an empty hand blocked the turn from ending');

    const ids = [...game.state.cards.keys()].slice(0, 5);
    hand.push(...ids.slice(0, 3));
    assert.equal(overHandLimit(game), false, 'three cards is the limit, not over it');

    hand.push(ids[3]!);
    assert.equal(overHandLimit(game), true, 'four cards must be played down');

    // A Red Flag raises the limit by one (§6.2).
    game.state.decks.redFlags.set(0, true);
    assert.equal(overHandLimit(game), false, 'a Red Flag allows a fourth card');
    hand.push(ids[4]!);
    assert.equal(overHandLimit(game), true, 'five cards is over even with a Red Flag');
  });

  it('agrees with the engine about when the turn may end', () => {
    // Two statements of one rule is how they drift. This asserts they cannot.
    const game = newGame(909);
    for (let i = 0; i < 400; i++) {
      if (currentActor(game) === null) break;
      const { options, groups } = actionGroups(game);
      if (groups.length === 0 || options.length === 0) break;
      if (game.state.clock.phase === 'localOps' && turnOf(game.state, 0).option === 'draw') {
        const engineAllows = options.some((o) => o.type === 'draw.end');
        assert.equal(
          engineAllows,
          !overHandLimit(game),
          'the page and the engine disagree about whether the turn may end',
        );
      }
      submit(game, options[groups[0]!.actions[0]!.index]!);
    }
  });
});

describe('a train says what its card calls for', () => {
  it('explains a consist that offers only one kind of car', () => {
    // Reported from playtesting on seed 22222: Extra X22 offered a caboose and nothing else, with
    // no reason given. The rules are right — "Pee-Dee" is a per-diem train whose consist is one
    // caboose and no cars — but the screen never said so, which reads as a broken game.
    const game = newGame(22222);
    const titles = new Set<string>();
    for (let i = 0; i < 3000; i++) {
      if (currentActor(game) === null) break;
      const { options, groups } = actionGroups(game);
      if (groups.length === 0 || options.length === 0) break;
      for (const g of groups) if (g.kind === 'newTrain.') titles.add(g.title);
      submit(game, options[groups[0]!.actions[0]!.index]!);
    }
    assert.ok(titles.size > 0, 'no train was ever made up');
    for (const t of titles) {
      assert.match(t, /its card calls for/, `a train was made up with no consist explained: ${t}`);
      assert.ok(/“[^”]+”/.test(t), `the train is not named: ${t}`);
    }
  });
});

describe('the three places a game is drawn stay in step', () => {
  // A game is drawn on the playable page, in the standalone replay file, and in the website's
  // replay viewer. They had drifted: the viewer offered three speeds where the standalone offered
  // five, and had neither the sound nor the auto-hide the other two grew. Anything a player learns
  // on one screen should hold on the others.

  it('offers the same playback speeds in both replay viewers', () => {
    const site = readFileSync(join(dist, 'replays.html'), 'utf8');
    const standalone = renderHtml(record(880009, 'standard', 600));
    const speeds = (html: string): string[] =>
      [...html.matchAll(/<option value="\d+"[^>]*>([a-z ]+)<\/option>/g)].map((m) => m[1]!.trim());

    const a = speeds(site);
    const b = speeds(standalone);
    assert.ok(a.length >= 5, `the site viewer offers only ${a.length} speeds: ${a.join(', ')}`);
    assert.deepEqual(
      new Set(a),
      new Set(b),
      `the two viewers offer different speeds — site: ${a.join(', ')} / standalone: ${b.join(', ')}`,
    );
    for (const wanted of ['extra slow', 'very fast']) {
      assert.ok(a.includes(wanted), `the site viewer has no "${wanted}" speed`);
    }
  });

  it('offers sound and auto-hide everywhere a game is drawn', () => {
    const pages: [string, string][] = [
      ['play.html', readFileSync(join(dist, 'play.html'), 'utf8')],
      ['replays.html', readFileSync(join(dist, 'replays.html'), 'utf8')],
      ['the standalone replay', renderHtml(record(880009, 'standard', 600))],
    ];
    for (const [name, html] of pages) {
      assert.match(html, /id="v?sound"/, `${name} has no sound control`);
      assert.match(html, /id="v?districttoggle"/, `${name} has no auto-hide control`);
      assert.match(html, /id="v?districtsummary"/, `${name} shows nothing when the district is folded`);
      assert.match(html, /district\.folded/, `${name} has no rule to fold the district away`);
    }
  });

  it('asks the replay viewer for no element its page lacks', () => {
    // The same total check the playable page gets: a `$('vfoo')` left behind after removing #vfoo
    // throws on load, and the page simply never starts.
    const src = readFileSync(join(root, 'src/web/replays.ts'), 'utf8');
    const asked = new Set([...src.matchAll(/\$\('([a-zA-Z][\w-]*)'\)/g)].map((m) => m[1]!));
    const html = readFileSync(join(dist, 'replays.html'), 'utf8');
    const present = new Set([...html.matchAll(/id="([a-zA-Z][\w-]*)"/g)].map((m) => m[1]!));
    for (const id of asked) {
      assert.ok(present.has(id), `replays.ts asks for #${id}, which replays.html does not contain`);
    }
  });
});

describe('every file the build needs is actually in the repo (regression)', () => {
  it('does not gitignore a source page', () => {
    // REGRESSION. `.gitignore` carried `replay*.html` to catch the throwaway files generated at the
    // repo root — unanchored, so it also matched `src/web/replays.html`, which is a SOURCE file.
    // That page had therefore NEVER been committed: a fresh clone was missing it, and the build
    // copies it unconditionally. The pattern is anchored to the root now.
    //
    // Asked of git rather than read out of .gitignore: the question is whether the file survives a
    // clone, and only git can answer that. `check-ignore -q` exits 0 when ignored, 1 when not.
    for (const page of ['src/web/index.html', 'src/web/play.html', 'src/web/replays.html']) {
      let ignored: boolean;
      try {
        execFileSync('git', ['check-ignore', '-q', page], { cwd: root, stdio: 'pipe' });
        ignored = true;
      } catch {
        ignored = false;
      }
      assert.equal(ignored, false, `${page} is gitignored — it would be missing from a fresh clone`);
    }
  });
});

describe('the tray is an engine plus its Rolling Stock', () => {
  it('shows where the engine sits, because it may pull, push, or do both', () => {
    // A Crew Tray is an engine and its cars, and the engine may be PULLING (ahead of everything),
    // PUSHING (behind everything) or in the middle doing both — which decides which end cars couple
    // onto (§A.3) and which way the train can shove.
    //
    // REGRESSION on a dead field: `engineFront` was a boolean written in three places and read in
    // NONE, so the engine had a position the game recorded and never used, and every consist was
    // drawn as an anonymous row of cars. It is an index into the consist now.
    const s = createEngineGame({
      id: 'eng', seed: 1038389,
      config: {
        mode: 'solitaire', victory: 'highestAfterDays', length: 'standard',
        optionalRules: { reducedVisibility: false, sisterTrains: false, employeeRotation: false, emergencyToolbox: false },
      },
      playerNames: ['Solitaire'],
    });

    // A tray built by hand, so every position can be checked rather than hoping one turns up.
    // Trays are created when a train is made up, so a fresh game has none.
    const trayId = s.freeTrays.pop()!;
    const tray = {
      id: trayId,
      trainNumber: 9,
      trainIsExtra: false,
      engineAt: 0,
      consist: [
        { type: 'boxcar', loaded: false },
        { type: 'hopper', loaded: true },
      ],
      direction: 'east',
      position: { at: 'divisionPoint', side: 'west' },
    } as never;
    s.trays.set(trayId, tray);
    const west = s.division.nodes.find((n) => n.kind === 'divisionPoint');
    if (west && west.kind === 'divisionPoint') west.holding.push(trayId);

    const consistFor = (at: number): string[] => {
      (tray as unknown as { engineAt: number }).engineAt = at;
      const f = snapshot(s, [], null);
      for (const node of f.division) {
        for (const t of node.trains.flat()) {
          if (t.consist.includes('ENG')) return t.consist;
        }
      }
      return [];
    };

    assert.equal(consistFor(0)[0], 'ENG', 'an engine at 0 is not drawn pulling');
    assert.equal(consistFor(2)[2], 'ENG', 'an engine behind the cars is not drawn pushing');
    const middle = consistFor(1);
    assert.equal(middle[1], 'ENG', 'an engine between the cars is not drawn in the middle');
    assert.equal(middle.length, 3, 'the engine displaced a car instead of sitting between them');
  });

  it('shows both yards, split loaded and empty', () => {
    // Rolling stock is finite and the Classification Yard returns to service only when the Division
    // Yard is BARE, so watching the Division Yard run down is real information — and neither yard
    // was shown anywhere.
    const s = createEngineGame({
      id: 'yards', seed: 1038389,
      config: {
        mode: 'solitaire', victory: 'highestAfterDays', length: 'standard',
        optionalRules: { reducedVisibility: false, sisterTrains: false, employeeRotation: false, emergencyToolbox: false },
      },
      playerNames: ['Solitaire'],
    });
    const f = snapshot(s, [], null);

    assert.ok(f.yards.divisionTotal > 0, 'the Division Yard is dealt nothing');
    assert.equal(
      f.yards.division.reduce((n, r) => n + r.loaded + r.empty, 0),
      f.yards.divisionTotal,
      'the Division Yard breakdown does not add up to its total',
    );
    assert.equal(
      f.yards.classification.reduce((n, r) => n + r.loaded + r.empty, 0),
      f.yards.classificationTotal,
      'the Classification Yard breakdown does not add up to its total',
    );
    // The page must ask for the elements it fills.
    const html = readFileSync(join(dist, 'play.html'), 'utf8');
    for (const id of ['divyard', 'clsyard', 'divtot', 'clstot']) {
      assert.ok(html.includes(`id="${id}"`), `play.html has no #${id}`);
    }
  });
});

// ---------------------------------------------------------------------------

describe('the New Game dialog', () => {
  /**
   * DRIVEN THROUGH THE EMITTED BUNDLE, like the highlight test above, because the thing that can go
   * wrong here is wiring rather than logic: an id that does not match the HTML, a handler on the
   * wrong element, or a navigation that assigns the search string the page already has and so does
   * nothing at all. None of that is visible to a test of `rulesFromUrl` in isolation.
   *
   * A seed alone stopped naming a game the moment the opening hand and the revenue rates became
   * settings, so what this really pins is that all four ride in the URL and come back out.
   */
  const load = async (search: string) => {
    execFileSync('node', ['scripts/build-web.ts'], { cwd: root, stdio: 'pipe' });

    const served = new Set(
      [...readFileSync(join(dist, 'play.html'), 'utf8').matchAll(/id="([a-zA-Z][\w-]*)"/g)].map((m) => m[1]!),
    );
    const els = new Map<string, Record<string, unknown>>();
    /** Enough of an element for the page to start: the dialog's own API, and a settable `value`. */
    const make = (id: string): Record<string, unknown> => {
      const listeners = new Map<string, (() => void)[]>();
      const radios = ['threeRandom', 'sixRandom', 'threeTrackThreeOther'].map((value) => ({
        value,
        checked: false,
      }));
      let html = '';
      const node: Record<string, unknown> = {
        id, value: '', textContent: '', title: '', returnValue: '', open: false,
        style: {}, dataset: {}, onclick: null, scrollTop: 0, scrollHeight: 0,
        classList: { add: () => {}, remove: () => {}, contains: () => false, toggle: () => {} },
        radios,
        addEventListener: (type: string, fn: () => void) =>
          void listeners.set(type, [...(listeners.get(type) ?? []), fn]),
        showModal: () => void ((node as { open: boolean }).open = true),
        close: () => {
          (node as { open: boolean }).open = false;
          for (const fn of listeners.get('close') ?? []) fn();
        },
        // Only the radio-group selectors the dialog actually uses; anything else is not this
        // element's business and answering it with a guess would hide a typo in the real selector.
        querySelectorAll: (sel: string) => (sel === 'input[name="ng-hand"]' ? radios : []),
        querySelector: (sel: string) =>
          sel === 'input[name="ng-hand"]:checked' ? (radios.find((r) => r.checked) ?? null) : null,
      };
      Object.defineProperty(node, 'innerHTML', { get: () => html, set: (v: string) => void (html = v) });
      return node;
    };

    const g = globalThis as Record<string, unknown>;
    g['document'] = {
      getElementById: (id: string) => {
        if (!served.has(id)) return null;
        if (!els.has(id)) els.set(id, make(id));
        return els.get(id);
      },
      createElement: () => make('style'),
      addEventListener: () => {},
      body: { appendChild: () => {} },
      head: { appendChild: () => {} },
    };
    const nav: { search: string; reloads: number } = { search, reloads: 0 };
    g['location'] = {
      get search() { return nav.search; },
      set search(v: string) { nav.search = v; },
      reload: () => void (nav.reloads += 1),
    };
    const store = new Map<string, string>();
    g['localStorage'] = {
      getItem: (k: string) => store.get(k) ?? null,
      setItem: (k: string, v: string) => void store.set(k, v),
      removeItem: (k: string) => void store.delete(k),
    };
    g['URLSearchParams'] = NodeURLSearchParams;
    g['confirm'] = () => true;

    await import(`file://${join(dist, 'web/main.js')}?t=${Date.now()}-${Math.random()}`);
    return { els, nav };
  };

  it('opens on the rules in play, so a second game can be dealt to compare with the first', async () => {
    // Re-entering four settings for every comparison game is how a comparison silently stops
    // comparing. The seed is the one field that clears: the same seed twice is not a second sample.
    const { els } = await load('?seed=430&hand=sixRandom&passenger=2&freight=3&transit=4');
    (els.get('newgame')!['onclick'] as () => void)();

    const dlg = els.get('newgamedlg')!;
    assert.equal(dlg['open'], true, 'the New game button did not open the dialog');
    assert.equal(els.get('ng-seed')!['value'], '', 'the seed box kept the last game’s seed');
    assert.equal(els.get('ng-passenger')!['value'], '2');
    assert.equal(els.get('ng-freight')!['value'], '3');
    assert.equal(els.get('ng-transit')!['value'], '4');
    const checked = (dlg['radios'] as { value: string; checked: boolean }[]).filter((r) => r.checked);
    assert.deepEqual(checked.map((r) => r.value), ['sixRandom'], 'the opening hand in play was not preselected');
  });

  it('puts the seed and all three settings into the URL when it deals', async () => {
    const { els, nav } = await load('?seed=430');
    (els.get('newgame')!['onclick'] as () => void)();

    const dlg = els.get('newgamedlg')!;
    els.get('ng-seed')!['value'] = '99';
    for (const r of dlg['radios'] as { value: string; checked: boolean }[]) r.checked = r.value === 'threeTrackThreeOther';
    els.get('ng-passenger')!['value'] = '5';
    els.get('ng-freight')!['value'] = '0';
    els.get('ng-transit')!['value'] = '2';
    dlg['returnValue'] = 'deal';
    (dlg['close'] as () => void)();

    assert.equal(nav.search, '?seed=99&hand=threeTrackThreeOther&passenger=5&freight=0&transit=2');
  });

  it('deals nothing on cancel, and nothing on Esc', async () => {
    // Esc closes a <dialog> with an empty returnValue and fires no submit at all, so "not deal" has
    // to be the test rather than "cancel" — the two arrive identically.
    for (const returnValue of ['cancel', '']) {
      const { els, nav } = await load('?seed=430');
      (els.get('newgame')!['onclick'] as () => void)();
      const dlg = els.get('newgamedlg')!;
      dlg['returnValue'] = returnValue;
      (dlg['close'] as () => void)();
      assert.equal(nav.search, '?seed=430', `closing with "${returnValue}" navigated`);
      assert.equal(nav.reloads, 0, `closing with "${returnValue}" reloaded`);
    }
  });

  it('reloads when the answers are the URL the page already has, so a re-deal is not a no-op', async () => {
    // Dealing a random seed, disliking it and dealing again at the same settings produces the same
    // search string — and assigning `location.search` the value it already holds does nothing.
    const url = '?hand=threeRandom&passenger=1&freight=1&transit=0';
    const { els, nav } = await load(url);
    (els.get('newgame')!['onclick'] as () => void)();
    const dlg = els.get('newgamedlg')!;
    dlg['returnValue'] = 'deal';
    (dlg['close'] as () => void)();

    assert.equal(nav.search, url, 'the URL should be unchanged — that is the whole case');
    assert.equal(nav.reloads, 1, 'a re-deal at the same settings did nothing at all');
  });

  it('deals the game the URL describes, and says so in the header', async () => {
    // The other half of the round trip: the dialog wrote those parameters, and this is the page
    // reading them back. Without this the two halves can drift and each still pass its own test.
    const { els } = await load('?seed=430&hand=sixRandom&passenger=4&freight=2&transit=1');
    assert.match(String(els.get('houserules')!['textContent']), /6 cards.*4\/2\/1/);
    assert.match(String(els.get('houserules')!['title']), /six random cards/i);
  });

  it('ignores a seed the browser cannot parse rather than refusing to deal', async () => {
    // Blank and unparseable both plainly mean "surprise me"; an error dialog over a typo in an
    // optional box is not worth writing.
    const { els, nav } = await load('?seed=430');
    (els.get('newgame')!['onclick'] as () => void)();
    const dlg = els.get('newgamedlg')!;
    els.get('ng-seed')!['value'] = 'not a number';
    dlg['returnValue'] = 'deal';
    (dlg['close'] as () => void)();

    assert.equal(nav.search, '?hand=threeRandom&passenger=1&freight=1&transit=0', 'a bad seed was carried into the URL');
  });
});