Jesse
9f3b92d08e
Eight play reports and one design that had been written up and not built. The
through-line is switching: what a card can hold, which end of a train a cut comes
off, which way a train meets cars standing on the line, and what the board and the
log say about all of it.
TRACK ORDER FOR STANDING CARS, AND THE CUT ON YOUR OWN CARD
Two reports turned out to be one root cause. `TrackCard.standing` claimed "in track
order (§A.3)" and had no defined orientation at all, while `CrewTray.consist` does
(nose first, relative to facing) — so every transfer between them was a conversion
nothing performed. §A.3 says what it should be: cars occupy the track "in the same
order they originally held, left-to-right". Left-to-right is west-to-east, and that
is now the defined orientation of `standing` and of an industry track through
`carsOn`. It is the board's orientation, not the train's, so it does not change when
a different train touches the card.
- Setting out is batch-invariant. Four cars at once, four singles and two pairs
parked three different orders, one of them physically impossible. Successive
cuts off the same end stack up towards the engine, so the insertion point is the
train's own place in the row.
- Approaching a cut from either end now mirrors. `couples` is built nearest-first
along the direction of travel and reverses onto the nose, so the farthest car met
ends up nose-most — which is what makes a run-around worth its Move.
- A train no longer drives through its own cut. The walk began at the neighbour of
the start square and never read the start card, so a crew could set cars out and
pull straight away from them. Coupling is mandatory (§A.4) and your own square is
no exception; the cut counts against the four-car limit. Setting out off the end
you are not leaving by still works.
`CrewTray.standingWest` records where a train stands among the cars on its card — a
train may set out off both ends on one square, so which side a cut is on is not
recoverable from the array alone.
On the board, the cut is drawn split at the train — west cars left, east cars right,
engine in the gap — and each car's tooltip says whether it stands ahead of or behind
the engine. The history says which end a cut came off, and a move's button separates
"takes your own boxcar back off this card" from cars found standing on the line.
Decided: taking your own cut back on the square you are standing on is UNDOING the
drop. It is exempt from trains 3/4's per-location freight budget, X13's "drop but not
pick up" and X22's "empties only", and it refunds the budget the drop spent.
Otherwise a legal-looking drop becomes silently one-way.
Measured, 200 paired seeds, developer bot: -0.55 revenue (t = -3.63), freight revenue
1.11 -> 0.56. That cost is the bot's, not the rule's — its trains run engine-first,
so at a stub industry it sets a car out between itself and the only way out, and the
correct play is §A.5's facing-point move, which is the cross-turn planning TODO.md
already records as out of reach of any bot. Filtering self-recoupling moves out of its
options took recoupling from 625 of 1,029 set-outs to 101 of 677, and all 101 that
remain are that case. Read the number as a bot measurement, not a balance one.
THE SUPERINTENDENT'S RULING NAMES THE TRAINS IT IS ABOUT
Reported: the Superintendent could not tell which train he was clearing. The heading
asks the question now — "may Train 6 follow Train 4 onto the same Mainline card?" —
and the trains moved to the FRONT of each button, because the button splits its label
at the first em-dash and showed only the head.
AN INDUSTRY TRACK HOLDS FOUR CARS, LIKE EVERY OTHER CARD
Reported at undo 188: "we wanted to drop two cars, but were only allowed to drop one."
An industry track was built as long as its box count, so a one-box industry had room
for one car. Box count is how much WORK an industry can hold, not how much RAIL it
has. Ordinary track was the other exception, unbounded; both are gone and every card
holds four.
THE FREIGHT AGENT MAY STAGE A LOAD BEFORE THE CAR IS THERE
§6.3 asks nothing of the industry track — the empty car belongs to §9.3's Load the
car, which is the Laborer's action. The gate now lives only there, so cargo can wait
on the dock while the car to ship it in is still being switched in. Nothing can jam:
a load in a green box is waiting, not stuck.
THE TRUCK DOCK UNLOADS, AND BRINGS NOBODY
+1 inbound, no Laborer. It printed +1 outbound and +1 Laborer, which made it a
longer-host-list copy of Forklifts. Beside Packing Sheds it now does nothing at all,
and the hand tooltip says so before it is played.
Also in this release, from the days before: Mainline card tooltips computed from the
crossing rule; an Extra starts from the Division Point its number sends it to; a
modifier's suppressed grant comes back when a Whistle Post is upgraded; the Oil
Refinery and the Grocer's Warehouse ship as well as receive, per the card reference;
and the dormant defences name the attack they answer. `.claude/` is now gitignored —
it holds Claude Code's worktrees, i.e. a second checkout of this repository.
570 tests, typecheck clean. The three published replays were re-recorded twice —
legality changed, so bot play changed. Full detail in CHANGELOG.md.
401 lines
23 KiB
TypeScript
401 lines
23 KiB
TypeScript
/**
|
|
* The side panels a game is read from — cards, yards, blockers, facilities.
|
|
*
|
|
* SHARED between the playable page and the site's replay viewer, for the same reason the board
|
|
* renderers are: a replay is the game being WATCHED rather than played, so it should look like the
|
|
* game. The viewer had three panels against the play page's eight — no facilities, no blockers, no
|
|
* cards, no yards — which meant a replay could not answer "why is nothing moving?", the question a
|
|
* replay mostly exists to answer.
|
|
*
|
|
* Each function returns HTML rather than writing to the DOM, so the two pages can keep their own
|
|
* element ids and their own layout while drawing the same contents.
|
|
*/
|
|
|
|
import type { Frame } from '../sim/view.ts';
|
|
|
|
const esc = (s: string): string =>
|
|
String(s).replace(/[&<>"]/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"' })[c] ?? c);
|
|
|
|
/**
|
|
* A card, drawn as a card.
|
|
*
|
|
* `playable === false` crosshatches it: "not yet playable" had to be read, where a hatch is seen.
|
|
* The tooltip still explains WHY, which a hatch cannot. A replay passes null throughout — nothing
|
|
* there is playable, because nothing there is being played.
|
|
*/
|
|
export function cardRow(name: string, why: string, playable: boolean | null): string {
|
|
return (
|
|
`<div class="handcard${playable === false ? ' unplayable' : ''}"${why ? ` data-tip="${esc(why)}"` : ''} tabindex="0">` +
|
|
`<b>${esc(name)}</b></div>`
|
|
);
|
|
}
|
|
|
|
export function handHtml(f: Frame, canPlay: (boolean | null)[] = []): string {
|
|
return f.hand.length
|
|
? f.hand.map((h, i) => cardRow(h, f.handWhat[i] ?? '', canPlay[i] ?? null)).join('')
|
|
: '<span class="dim">empty</span>';
|
|
}
|
|
|
|
/**
|
|
* The three Department piles and the Salvage Yard, each with its top card and its depth.
|
|
*
|
|
* Only the top card may ever be drawn, so the depth is a count and not a hint: everything below it
|
|
* is out of reach, and choosing where to discard is choosing what to put there.
|
|
*/
|
|
export function pilesHtml(f: Frame): string {
|
|
const pile = (label: string, top: string, depth: number, why: string, extra = '', slot = -1): string => {
|
|
const tip = [why, extra].filter(Boolean).join(' · ');
|
|
// A Department is a DROP TARGET for a discard. The attribute is always emitted; only the play
|
|
// page binds a click to it, and only while a card is waiting to be discarded — so the replay
|
|
// viewer draws exactly the same markup and nothing there is clickable.
|
|
const target = slot >= 0 ? ` data-dept="${slot}"` : '';
|
|
return (
|
|
`<div class="handcard"${target}${tip ? ` data-tip="${esc(tip)}"` : ''} tabindex="0">` +
|
|
`<div class="pilehd"><span>${esc(label)}</span><span class="depth">${depth}</span></div>` +
|
|
`<b>${esc(top)}</b></div>`
|
|
);
|
|
};
|
|
return (
|
|
f.departments
|
|
.map((d, i) => {
|
|
const depth = f.departmentDepth[i] ?? 0;
|
|
const under = depth - 1;
|
|
return pile(
|
|
`Dept ${i + 1}`,
|
|
d,
|
|
depth,
|
|
f.departmentsWhat[i] ?? '',
|
|
under > 0 ? `${under} card${under === 1 ? '' : 's'} buried beneath it and out of reach` : '',
|
|
i,
|
|
);
|
|
})
|
|
.join('') +
|
|
pile(
|
|
'Salvage',
|
|
f.salvage.top,
|
|
f.salvage.depth,
|
|
'',
|
|
'Played cards that did not stay on the board. Swept back into the Home Office deck, with the Departments, when the deck runs out.',
|
|
)
|
|
);
|
|
}
|
|
|
|
/** One yard, by car type. Loaded and empty are separate numbers because they do different jobs. */
|
|
export function yardHtml(rows: { type: string; loaded: number; empty: number }[]): string {
|
|
return rows.length === 0
|
|
? '<span class="dim">empty</span>'
|
|
: rows
|
|
.map(
|
|
(r) =>
|
|
`<span class="stock" data-tip="${esc(r.type)} — ${r.loaded} loaded, ${r.empty} empty">` +
|
|
`<b>${esc(r.type)}</b> ` +
|
|
// Each count is its own target: making up a train is choosing a car OF A TYPE AND A LOAD
|
|
// STATE, which is exactly what these two numbers already distinguish.
|
|
`<span class="ld" data-car="${esc(r.type)}" data-loaded="1">${r.loaded}</span>/` +
|
|
`<span class="mt" data-car="${esc(r.type)}" data-loaded="0">${r.empty}</span></span>`,
|
|
)
|
|
.join('');
|
|
}
|
|
|
|
/**
|
|
* THE TIMETABLE: twelve Stages of a Day, and which train is due out at each.
|
|
*
|
|
* Playing a train card rolls 1D12 for a slot, and the roll landed nowhere a player could see — the
|
|
* card was gone and the answer to "so when does it run?" was one line of history. The Frame has
|
|
* carried the twelve slots all along and only the standalone replay ever drew them.
|
|
*
|
|
* `justSet` is the slot filled by the roll being reported this frame, so it can be flashed. It marks
|
|
* the moment rather than the state: the highlight is gone by the next render, which is what makes it
|
|
* read as "that just happened" rather than "this is special".
|
|
*/
|
|
export function timetableHtml(f: Frame, justSet: number | null): string {
|
|
const slots = f.timetable
|
|
.map((t, k) => {
|
|
const stage = k + 1;
|
|
const cls = [
|
|
t !== null ? 'due' : '',
|
|
stage === f.stage ? 'now' : '',
|
|
stage < f.stage ? 'past' : '',
|
|
k === justSet ? 'fresh' : '',
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
/**
|
|
* THE CARD ITSELF, not just the number.
|
|
*
|
|
* A train card is played once and then lives only as a number in a Timetable slot — but what
|
|
* it prints is what decides whether the train can be switched, worked by Porters, or loaded at
|
|
* all. Reported from play: "once a train card's been played, how would I see that particular
|
|
* train card again?" This is where the player already looks for that train.
|
|
*/
|
|
const tip =
|
|
t !== null
|
|
? `Train ${t} departs at Stage ${stage}. A train's NUMBER is its seniority and direction — odd runs west, even runs east — and the Stage it leaves is set by the 1D12 roll made when its card was played, so Train 8 at Stage 6 is normal.` +
|
|
(f.timetableWhat[k] ? `\n\nITS CARD — ${f.timetableWhat[k]}` : '')
|
|
: `Stage ${stage} — no train due out.`;
|
|
return (
|
|
`<div class="tt-slot ${cls}" data-tip="${esc(tip)}" tabindex="0">` +
|
|
`<span class="tt-s">${stage}</span>` +
|
|
`<span class="tt-t">${t !== null ? `T${t}` : '·'}</span></div>`
|
|
);
|
|
})
|
|
.join('');
|
|
return `<div class="tt">${slots}</div>`;
|
|
}
|
|
|
|
export function blockedHtml(f: Frame): string {
|
|
return f.blocked.length === 0
|
|
? '<li class="dim">nothing blocked</li>'
|
|
: f.blocked
|
|
.map((b) => `<li class="sev-${b.severity}"><b>${esc(b.where)}</b> — ${esc(b.why)}</li>`)
|
|
.join('');
|
|
}
|
|
|
|
/** The load pipeline at each industry: green → MEN | AT | WORK → red, and the cars spotted here. */
|
|
export function facilitiesHtml(f: Frame): string {
|
|
/**
|
|
* One number, with what the card printed and what a Modifier added.
|
|
*
|
|
* `laborers` arrives as "left/total" and the rest as plain totals, so the total is taken from the
|
|
* end either way and compared with the base.
|
|
*/
|
|
const stat = (label: string, shown: string, base: number, why: string): string => {
|
|
const total = Number(shown.split('/').pop() ?? shown);
|
|
const added = Number.isFinite(total) ? total - base : 0;
|
|
const delta = added > 0 ? `<span class="added">+${added}</span>` : '';
|
|
return (
|
|
`<span class="cap" data-tip="${esc(why)}${added > 0 ? ` The card prints ${base}; Modifiers beside it add ${added}.` : ''}">` +
|
|
`<span class="dim">${esc(label)}</span> <b>${esc(shown)}</b>${delta}</span>`
|
|
);
|
|
};
|
|
/**
|
|
* GREEN IS OUTBOUND AND RED IS INBOUND — the caller says which, because this helper cannot know.
|
|
*
|
|
* It used to paint every filled box with one class, so the inbound row rendered GREEN while the
|
|
* board SVG on the same page drew it red. The two disagreed on screen at the same time, which is
|
|
* the one thing a colour code must never do. Reported from playtesting.
|
|
*/
|
|
const boxes = (filled: string[], cap: number, cls: 'g' | 'r' | 's'): string => {
|
|
let h = '';
|
|
for (let i = 0; i < Math.max(cap, filled.length); i++) {
|
|
h += `<span class="box ${i < filled.length ? cls : 'empty'}">${i < filled.length ? esc(filled[i] ?? '') : '·'}</span>`;
|
|
}
|
|
return h || '<span class="dim">—</span>';
|
|
};
|
|
return f.facilities.length === 0
|
|
? '<div class="dim">no facilities yet</div>'
|
|
: f.facilities
|
|
.map(
|
|
(x) =>
|
|
`<div class="fac" data-tip="${esc(x.name)} — ${esc(x.flow)} ${esc(x.commodity)}" tabindex="0">` +
|
|
`<div class="nm">${esc(x.name)} <span class="dim">${esc(x.commodity)}</span></div>` +
|
|
/**
|
|
* THE WORKERS AND THE CAPACITIES, ON THE PANEL RATHER THAN IN A TOOLTIP.
|
|
*
|
|
* Laborers were only ever in the hover text, so "how many actions can I take here this
|
|
* Stage?" — the question that decides every Cargo phase — had to be hunted for. And a
|
|
* Modifier's whole effect is one of these numbers going up, so showing the number alone
|
|
* made an Ice House look like it had done nothing. Each now says what the card prints
|
|
* and what the Modifiers beside it added.
|
|
*/
|
|
`<div class="caps">` +
|
|
/**
|
|
* PORTERS TOO, NOT JUST LABORERS.
|
|
*
|
|
* `porters` has been on the view-model all along and no renderer ever printed it — so a
|
|
* Waiting Area, Restaurant or Hotel beside the Office, whose whole effect is +1 porter
|
|
* and +1 passenger slot, showed exactly half of what it did. Reported: "it gave me an
|
|
* extra porter that I see no indication of anywhere."
|
|
*
|
|
* A facility has one kind of worker or the other: Laborers work freight, Porters work
|
|
* passengers. Showing the row that is always 0/0 would be noise, so each shows its own.
|
|
*/
|
|
(Number(x.laborers.split('/').pop()) > 0 || x.base.laborers > 0
|
|
? stat('laborers', x.laborers, x.base.laborers, 'Actions this facility can take each Stage — one Laborer moves one load one square. Left of the slash is how many are still free this Stage.')
|
|
: '') +
|
|
(Number(x.porters.split('/').pop()) > 0 || x.base.porters > 0
|
|
? stat('porters', x.porters, x.base.porters, 'Passenger work, one action each per Stage: a Porter boards or detrains passengers, and earns the Revenue in a single action. Left of the slash is how many are still free this Stage.')
|
|
: '') +
|
|
(x.allowsOut ? stat('out', String(x.greenCap), x.base.out, 'Green boxes: loads waiting to be worked onto a car.') : '') +
|
|
(x.allowsIn ? stat('in', String(x.redCap), x.base.in, 'Red boxes: loads cleared off an arriving car.') : '') +
|
|
(x.modifiers.length
|
|
? `<span class="mods" data-tip="Modifier cards standing beside this industry, each raising one of the numbers above.">+ ${esc(x.modifiers.join(', '))}</span>`
|
|
: '') +
|
|
/**
|
|
* A GRANT THIS FACILITY CANNOT USE, SAID OUT LOUD.
|
|
*
|
|
* An industry's printed flow is absolute, so an Ice House beside a Grocer's Warehouse
|
|
* gives its Laborer and nothing else. Showing only the numbers made that read as a bug —
|
|
* reported from playtesting as "it added the laborer but not the outbound slot". The
|
|
* number genuinely does not move; what was missing was the reason.
|
|
*/
|
|
(x.suppressed.length
|
|
? `<span class="dead" data-tip="${esc(x.suppressed.join(' · '))}">` +
|
|
`${esc(String(x.suppressed.length))} printed bonus${x.suppressed.length === 1 ? '' : 'es'} unused</span>`
|
|
: '') +
|
|
`</div>` +
|
|
/**
|
|
* IN THE ORDER THE LOAD TRAVELS. §9.3 loads Green → MEN → AT → WORK → the spotted car,
|
|
* and unloads the other way: car → WORK → AT → MEN → red. Labelling the rows by colour
|
|
* alone left a player to work out which direction their industry ran; naming the step
|
|
* says it outright, and an industry that only receives has no green row to puzzle over.
|
|
*/
|
|
(x.allowsOut
|
|
? `<div class="boxes"><span class="dim" data-tip="${
|
|
x.kind === 'passenger'
|
|
? 'Passengers waiting to board. A Porter puts them onto a coach in a single action.'
|
|
: 'Loads waiting to be worked out onto a car. They travel green → MEN → AT → WORK, then onto a spotted empty car.'
|
|
}">${x.kind === 'passenger' ? 'waiting to board' : 'waiting to load'}</span>${boxes(x.green, x.greenCap, 'g')}</div>`
|
|
: '') +
|
|
/**
|
|
* A PASSENGER FACILITY HAS NO SIGN, so the row is not drawn for one.
|
|
*
|
|
* `maw` comes back empty for a Depot, Station or Terminal — the pipeline is a Freight
|
|
* Facility fitting (§9.2 is Porters, with no MEN | AT | WORK step). The row LABEL printed
|
|
* ahead of the loop regardless, so a Depot showed the caption and three empty boxes it
|
|
* has no Laborer to work.
|
|
*/
|
|
(x.maw.length > 0
|
|
? `<div class="boxes"><span class="dim" data-tip="One physical sign, worked in whichever direction this industry runs. Only one load may sit on each of the three boxes.">MEN AT WORK</span>` +
|
|
x.maw.map((m) => `<span class="box ${m ? 'm' : 'empty'}">${m ? esc(m) : '·'}</span>`).join('') +
|
|
`</div>`
|
|
: '') +
|
|
(x.allowsIn
|
|
? `<div class="boxes"><span class="dim" data-tip="${
|
|
x.kind === 'passenger'
|
|
? 'Passengers who have arrived and been detrained by a Porter.'
|
|
: 'Loads that have come off an arriving car and been cleared. They travel car → WORK → AT → MEN, then into a red box — the opposite direction to loading.'
|
|
}">${x.kind === 'passenger' ? 'arrived' : 'cleared inbound'}</span>${boxes(x.red, x.redCap, 'r')}</div>`
|
|
: '') +
|
|
/**
|
|
* THE CARS THAT ARE HERE — NOT A SIDING OF A FIXED LENGTH.
|
|
*
|
|
* This drew one empty box per unit of the industry's capacity and labelled the row
|
|
* "siding", which said two untrue things: that the card prints a siding, and that its
|
|
* length is the box count. It is neither. An industry track is ordinary Operating Rail
|
|
* and holds four cars like every other card, so there is no printed length worth
|
|
* drawing — only what is actually standing there. Passing cap 0 renders the cars alone.
|
|
*/
|
|
(x.track.length > 0
|
|
? `<div class="boxes"><span class="dim" data-tip="Cars standing on this industry's track. A load leaves the sign onto one of these, or an arriving load starts from one. Up to four cars fit here, the same as any Operating track card.">spotted</span>${boxes(x.track, 0, 's')}</div>`
|
|
: '') +
|
|
`<div class="fstat ${x.jammed ? 'bad' : x.canFinish ? 'good' : 'idle'}" data-tip="${
|
|
x.jammed
|
|
? 'A load is sitting on MEN|AT|WORK with no spotted car to receive it. That locks the industry track, which blocks the very car that would clear it (§9.3).'
|
|
: x.canFinish
|
|
? 'A matching empty car is spotted on this industry\'s track, so a load worked here can come off onto it.'
|
|
: 'No matching car is spotted. Starting a load here would park it on WORK and jam the facility.'
|
|
}">` +
|
|
(x.jammed ? 'JAMMED' : x.canFinish ? 'ready' : 'no car spotted') +
|
|
`</div></div>`,
|
|
)
|
|
.join('');
|
|
}
|
|
|
|
/** Styling for all of the above, so the two pages cannot drift apart visually. */
|
|
export const PANEL_CSS = `
|
|
h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#8b94a3;margin:9px 0 4px}
|
|
.cardrow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 2px}
|
|
.handcard{background:#242c36;border:1px solid #2c333d;border-radius:5px;
|
|
padding:5px 8px;font-size:11px;min-width:96px;position:relative}
|
|
.handcard:focus{outline:2px solid #4d6fa8;outline-offset:1px}
|
|
.cardrow.ref .handcard{background:#1c2129;border-style:dashed;border-color:#39424e;color:#b6bec9}
|
|
.handcard.unplayable{color:#7d8794;border-color:#39424e}
|
|
.handcard.unplayable::after{content:"";position:absolute;inset:0;border-radius:5px;pointer-events:none;
|
|
background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(150,160,175,.20) 5px 6px)}
|
|
/* THE CARD JUST DRAWN. It sits first in the row, and this says which one that is — three cards that
|
|
look alike otherwise, with nothing to distinguish the one you turned over. Green is the page's
|
|
"a good thing just happened" colour, as on the timetable. A static badge rather than a flash: the
|
|
hand is rebuilt by innerHTML on every render, which would restart a keyframe each time, and the
|
|
question being answered is "which of these is new" rather than "did something happen". */
|
|
.handcard.fresh{border-color:#8fd6a0;box-shadow:0 0 0 2px rgba(143,214,160,.18)}
|
|
.handcard.fresh::before{content:"NEW";display:block;font-size:9px;letter-spacing:.09em;
|
|
color:#8fd6a0;font-weight:700;margin-bottom:2px}
|
|
/* A pile shows two things: which card is face up on top, and how many are under it. */
|
|
.pilehd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:2px;
|
|
font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#8b94a3}
|
|
.pilehd .depth{font-variant-numeric:tabular-nums;background:#2a3038;border-radius:8px;
|
|
padding:0 6px;color:#cfe0f5}
|
|
/* Rolling stock is finite and the Classification Yard only returns it when the Division Yard is
|
|
bare, so watching the Division Yard run down is real information. */
|
|
.yard{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 6px}
|
|
.stock{background:#1c2129;border:1px solid #39424e;border-radius:4px;padding:2px 7px;font-size:11px}
|
|
.stock b{color:#e6e9ee}
|
|
.stock .ld{color:#8fd6a0}
|
|
.stock .mt{color:#9fb6d8}
|
|
.stock.none{opacity:.4}
|
|
/* A PILE THAT IS WAITING TO BE PICKED, drawn like the board's ghost squares because it is the same
|
|
question: you have chosen a card, now choose where it goes. It was a 2px outline on a small tile
|
|
in a panel the player might not be looking at, and was reported as "a very tiny highlight". Now it
|
|
grows, brightens, says DISCARD HERE outright, and pulses once so the eye finds it. */
|
|
.handcard.target{border:2px dashed #5aa9e6;background:#233246;cursor:pointer;color:#e6e9ee;
|
|
box-shadow:0 0 0 4px rgba(90,169,230,.22);transform:translateY(-2px);
|
|
animation:pick 1.1s ease-out 2}
|
|
.handcard.target:hover{background:#31485f;border-style:solid;box-shadow:0 0 0 6px rgba(90,169,230,.30)}
|
|
.handcard.target::before{content:"DISCARD HERE";display:block;font-size:9px;letter-spacing:.09em;
|
|
color:#8fc4ee;font-weight:700;margin-bottom:2px}
|
|
@keyframes pick{0%{box-shadow:0 0 0 4px rgba(90,169,230,.22)}
|
|
50%{box-shadow:0 0 0 9px rgba(90,169,230,.10)}
|
|
100%{box-shadow:0 0 0 4px rgba(90,169,230,.22)}}
|
|
@media(prefers-reduced-motion:reduce){.handcard.target{animation:none}}
|
|
/* And the piles that are NOT targets step back while a discard is being aimed, so the three that
|
|
are stand out from the Salvage Yard beside them. */
|
|
.cardrow.aiming .handcard:not(.target){opacity:.4}
|
|
.stock .ld.addable,.stock .mt.addable{cursor:pointer;border-radius:3px;padding:0 4px;
|
|
outline:1px solid #5aa9e6;background:rgba(90,169,230,.16)}
|
|
.stock .ld.addable:hover,.stock .mt.addable:hover{background:rgba(90,169,230,.34)}
|
|
/* Twelve Stages across, so a Day is one glance. The current Stage is lit, Stages already gone are
|
|
dimmed, and a slot the die has just filled flashes once. */
|
|
.tt{display:flex;gap:3px;flex-wrap:wrap}
|
|
.tt-slot{flex:1 1 0;min-width:26px;text-align:center;border:1px solid #2c333d;border-radius:4px;
|
|
padding:2px 0;background:#1a1f26;font-size:10px;cursor:help;line-height:1.25}
|
|
.tt-slot .tt-s{display:block;color:#5f6b7a;font-size:9px}
|
|
.tt-slot .tt-t{display:block;color:#5f6b7a;font-variant-numeric:tabular-nums}
|
|
.tt-slot.due{background:#222c38;border-color:#4d6fa8}
|
|
.tt-slot.due .tt-t{color:#cfe0f5;font-weight:700}
|
|
.tt-slot.past{opacity:.45}
|
|
.tt-slot.now{border-color:#b98cf0;box-shadow:0 0 0 2px rgba(150,110,230,.20)}
|
|
.tt-slot.now .tt-s{color:#b98cf0;font-weight:700}
|
|
.tt-slot.fresh{animation:ttflash 1.5s ease-out 1}
|
|
@keyframes ttflash{0%{background:#2f6b47;border-color:#8fd6a0;transform:scale(1.18)}
|
|
100%{background:#222c38;border-color:#4d6fa8;transform:scale(1)}}
|
|
@media(prefers-reduced-motion:reduce){.tt-slot.fresh{animation:none;outline:2px solid #8fd6a0}}
|
|
/* THE KEY TO THE FOUR STATES ABOVE. A slot can be lit blue, ringed violet, dimmed, or flashing
|
|
green, and nothing said which was which — reported as "what do the colours mean?" The green one
|
|
in particular is a MOMENT, not a state: it marks the slot the die just filled and is gone by the
|
|
next render, so without a key it reads as a category of train. */
|
|
.tt-key{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:10px;color:#8b94a3}
|
|
.tt-key span{display:inline-flex;align-items:center;gap:4px}
|
|
.tt-key span::before{content:"";width:9px;height:9px;border-radius:2px;border:1px solid #2c333d;
|
|
background:#1a1f26}
|
|
.tt-key .k-due::before{background:#222c38;border-color:#4d6fa8}
|
|
.tt-key .k-now::before{border-color:#b98cf0;box-shadow:0 0 0 1px rgba(150,110,230,.35)}
|
|
.tt-key .k-past::before{opacity:.45}
|
|
.tt-key .k-fresh::before{background:#2f6b47;border-color:#8fd6a0}
|
|
ul.blocked{margin:0;padding-left:18px}
|
|
.sev-waiting{color:#8b94a3}.sev-risk{color:#e0b060}.sev-stuck{color:#e58080}
|
|
.fac{border-top:1px solid #2c333d;padding:7px 0}
|
|
.fac:first-child{border-top:0}
|
|
.fac .nm{font-size:12px;font-weight:600}
|
|
.caps{display:flex;flex-wrap:wrap;gap:9px;margin-top:3px;font-size:10px;align-items:baseline}
|
|
.cap b{color:#e6e9ee;font-variant-numeric:tabular-nums}
|
|
.cap .added{color:#8fd6a0;margin-left:2px;font-weight:700}
|
|
.caps .mods{color:#c8a04a}
|
|
/* Amber-grey: a fact about the card, not a fault the player caused. */
|
|
.caps .dead{color:#8b94a3;border-bottom:1px dotted #6c7480}
|
|
.boxes{display:flex;gap:3px;align-items:center;margin-top:3px;flex-wrap:wrap}
|
|
.box{display:inline-block;min-width:22px;text-align:center;border-radius:3px;padding:1px 4px;font-size:10px}
|
|
.box.empty{background:#242a32;color:#5a6472}
|
|
/* Green OUT, red IN, matching the board SVG's palette exactly — the panel and the map are the same
|
|
card seen twice, so they may not disagree about which colour means which way. Grey for spotted cars,
|
|
which is a place rather than a direction. */
|
|
.box.g{background:#2f6b3d}
|
|
.box.r{background:#8a4a4a}
|
|
.box.s{background:#3a4450}
|
|
.box.m{background:#8a6d1f}
|
|
.fstat{margin-top:3px;font-size:10px;padding:1px 6px;border-radius:3px;display:inline-block}
|
|
.fstat.good{background:rgba(40,140,60,.28)}
|
|
.fstat.bad{background:rgba(190,50,50,.38);font-weight:700}
|
|
.fstat.idle{opacity:.6}
|
|
`;
|