v0.7.0 — four game types, a lobby you can read and leave, and a multiplayer game that makes a sound
The multiplayer set-up, the lobby, the start of a game, and four signals a remote client had never been sent. Reasoning, the preset table and what was verified how: CHANGELOG.md. - Co-op, Competitive, Cutthroat, Solitaire and Custom, on both screens, from one shared block — they had drifted, and each was missing a question the other asked. - A player reads the whole rule set before taking a seat, may leave a lobby or a running game, and keeps a seat across a reload. The host may clear a chair. The browser remembers every game it is in, not just the last one. - The start of a game is drawn: a handoff beat, an announcement, the code and type in the header. - Sound, the timetable flash, announcements and the just-drawn badge now reach a remote client; justDrawn goes to the seat that drew it and nobody else. - Played on StartOS, which found the rest: an Extra belongs to the player who played it, the board never named the Superintendent, bot seats were reported as absent players, and rule section numbers are out of every string a player reads. Also carries the previous session's Heavy Grade documentation work — asked again, answer unchanged. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016JczK5i33ZNSf2PtzZqdhS
This commit is contained in:
Jesse.Markowitz
co-authored by
Claude Opus 5
Claude Opus 5
parent
42adfda390
commit
06db36e5b5
+15
-1
@@ -121,6 +121,14 @@ export type NewGameOptions = {
|
||||
minCombinedRevenue?: number;
|
||||
maxCollisionsPerDay?: number;
|
||||
maxCollisionsTotal?: number;
|
||||
/**
|
||||
* Appendix B's three, added 2026-08-23 when the New Game dialog gained them.
|
||||
*
|
||||
* The lobby has offered these since v0.6.0 and the solitaire dialog could not, which meant a
|
||||
* solitaire game could never be played under Employee Rotation or the Emergency Toolbox at all.
|
||||
* Partial like `houseRules`: a caller names only what it is setting.
|
||||
*/
|
||||
optionalRules?: Partial<GameConfig['optionalRules']>;
|
||||
};
|
||||
|
||||
/** The same config with the New Game dialog's answers in it. */
|
||||
@@ -131,6 +139,7 @@ export function configWith(opts: NewGameOptions): GameConfig {
|
||||
minCombinedRevenue: opts.minCombinedRevenue ?? SOLO_CONFIG.minCombinedRevenue,
|
||||
maxCollisionsPerDay: opts.maxCollisionsPerDay ?? SOLO_CONFIG.maxCollisionsPerDay,
|
||||
maxCollisionsTotal: opts.maxCollisionsTotal ?? SOLO_CONFIG.maxCollisionsTotal,
|
||||
optionalRules: { ...SOLO_CONFIG.optionalRules, ...(opts.optionalRules ?? {}) },
|
||||
houseRules: houseRules(opts.houseRules ? { houseRules: opts.houseRules } : {}),
|
||||
};
|
||||
}
|
||||
@@ -1136,10 +1145,15 @@ function configFor(save: Save, config: GameConfig): GameConfig {
|
||||
*
|
||||
* Returns null when there is nothing to undo, so the caller can leave the button disabled.
|
||||
*/
|
||||
export function undo(game: Game, config: GameConfig = SOLO_CONFIG): Game | null {
|
||||
export function undo(game: Game, config: GameConfig = game.state.config): Game | null {
|
||||
if (game.history.length === 0) return null;
|
||||
// `toSave` first, so the rules this game was dealt under come with it. Rebuilding the save by hand
|
||||
// here dropped them, and undo re-dealt the game under the defaults instead of its own settings.
|
||||
//
|
||||
// THE VICTORY DIALS COME FROM THE GAME ITSELF for the same reason (2026-08-23). `Save` carries only
|
||||
// the house rules, so defaulting this parameter to `SOLO_CONFIG` meant undoing a game dealt over
|
||||
// eight Days replayed it as a five-Day game — the length, the Revenue floor and both collision
|
||||
// caps all quietly reverting to the defaults.
|
||||
return fromSave({ ...toSave(game), history: game.history.slice(0, -1) }, config);
|
||||
}
|
||||
|
||||
|
||||
+519
-135
@@ -1,10 +1,22 @@
|
||||
/**
|
||||
* The lobby screen — Phase 4 of `docs/architecture/multiplayer.md` (§12 steps 17-20).
|
||||
* The lobby screen — Phase 4 of `docs/architecture/multiplayer.md` (§12 steps 17-20), rebuilt
|
||||
* 2026-08-23 (Jesse's cleanup pass).
|
||||
*
|
||||
* Everything in `#lobby` (`play.html`) is owned here: the join-secret gate, creating or joining a
|
||||
* game by code, and the seating screen up to `Lobby.Start`. `main.ts` calls `runLobby` once, at
|
||||
* `start()`, only when there is no stored session to reconnect with — see `main.ts`'s own comment
|
||||
* on why a stored `{token, gameId, seat}` skips this module entirely.
|
||||
* Everything in `#lobby` (`play.html`) is owned here: the join-secret gate, the two doors (join a
|
||||
* game, create one), the read-only preview a player reads BEFORE taking a seat, and the seating
|
||||
* screen up to `Lobby.Start`.
|
||||
*
|
||||
* WHAT CHANGED, and why each one was worth changing:
|
||||
* - JOINING CAME FIRST. It used to be a heading below the whole create form — fifteen fields a
|
||||
* player who was handed a code has no use for.
|
||||
* - A SEAT SURVIVES A RELOAD. The token was held in a closure and only written to `localStorage`
|
||||
* at `Lobby.Start`, so a refresh before the host started orphaned the chair: the player could
|
||||
* not get back and the seat could not be freed. `onSeated` hands it to `main.ts` immediately.
|
||||
* - THERE IS A WAY OUT. `/api/lobby/leave` frees a seat, so a mis-join or a player who wanders off
|
||||
* no longer wedges a table that cannot start until every chair is taken.
|
||||
* - THE STREAM CAN FAIL OUT LOUD. `onmessage` was the only handler; a dropped connection left the
|
||||
* seating screen frozen and silent.
|
||||
* - THE RULES ARE VISIBLE TO EVERYONE, not just the host who typed them.
|
||||
*
|
||||
* MIRRORS SERVER TYPES RATHER THAN IMPORTING THEM, same choice `web/session.ts` already made for
|
||||
* `Push`: this file must never depend on anything under `src/server/`, even at the type level, since
|
||||
@@ -12,12 +24,36 @@
|
||||
*/
|
||||
|
||||
import type { GameConfig, PlayerIndex } from '../engine/state.ts';
|
||||
import { defaultMultiplayerConfig } from './game.ts';
|
||||
import { STARTING_HAND_LABELS, houseRules } from '../engine/content.ts';
|
||||
import type { StartingHand } from '../engine/content.ts';
|
||||
import {
|
||||
closestPreset,
|
||||
configFromSettings,
|
||||
gameTypeLabel,
|
||||
preset,
|
||||
presetSettings,
|
||||
} from './presets.ts';
|
||||
import type { GameType, PresetName } from './presets.ts';
|
||||
import { rulesListHtml, settingsForm } from './settings-form.ts';
|
||||
import { seatLabel } from '../sim/view.ts';
|
||||
|
||||
export type LobbyReady = { token: string; gameId: string; seat: PlayerIndex };
|
||||
export type LobbyReady = { token: string; gameId: string; seat: PlayerIndex; gameCode: string };
|
||||
|
||||
/** What the page must do with a seat this screen takes or gives up. `main.ts` owns the storage; this
|
||||
* module owns the moments. */
|
||||
export type LobbyHandlers = {
|
||||
/** The game has begun — tear this screen down and build a `RemoteSession`. Called at most once. */
|
||||
onReady: (r: LobbyReady) => void;
|
||||
/** A seat is now held. Called before the game starts, so a reload can come back to it. */
|
||||
onSeated: (s: { token: string; gameId: string; gameCode: string }) => void;
|
||||
/** The seat is gone — left, removed, or the lobby closed under us. Forget the stored record. */
|
||||
onLeft: (gameId?: string) => void;
|
||||
/** Every game this browser still holds a seat in — the page owns the storage, this screen only
|
||||
* draws it. */
|
||||
known?: () => { gameId: string; gameCode: string; stage: 'lobby' | 'game' }[];
|
||||
/** Re-enter one of them. */
|
||||
rejoin?: (gameId: string) => void;
|
||||
/** Give one up for good: the token is the only proof of identity, so this cannot be undone. */
|
||||
forget?: (gameId: string) => void;
|
||||
};
|
||||
|
||||
type LobbySeat = { kind: 'human'; token: string; displayName: string } | { kind: 'bot' } | null;
|
||||
type Lobby = {
|
||||
@@ -30,12 +66,46 @@ type Lobby = {
|
||||
createdAt: number;
|
||||
};
|
||||
type LobbyPush = { lobby: Lobby; you: PlayerIndex; started: boolean };
|
||||
type Preview = {
|
||||
gameCode: string;
|
||||
hostName: string;
|
||||
config: GameConfig;
|
||||
players: number;
|
||||
seated: { seat: number; who: string | null; bot: boolean }[];
|
||||
};
|
||||
|
||||
/** Per-origin, same reasoning `lobby-and-sessions.md` §1 gives for the session token itself — a
|
||||
* secret typed at one address means nothing at another. */
|
||||
const SECRET_KEY = 'stationmaster-joinsecret';
|
||||
/** The name is not a credential; it is remembered for the same reason the secret is — nobody should
|
||||
* retype what they typed last time. */
|
||||
const NAME_KEY = 'stationmaster-displayname';
|
||||
|
||||
const $ = <T extends HTMLElement = HTMLElement>(id: string): T => document.getElementById(id) as T;
|
||||
const has = (id: string): boolean => document.getElementById(id) !== null;
|
||||
|
||||
/**
|
||||
* A server code turned into a sentence.
|
||||
*
|
||||
* `LOBBY_FULL` and `BAD_PLAYER_COUNT` used to be printed at the player exactly as the server said
|
||||
* them. The codes are the server's vocabulary, not the table's.
|
||||
*/
|
||||
function explain(code: unknown, fallback: string): string {
|
||||
const messages: Record<string, string> = {
|
||||
LOBBY_FULL: 'That table is already full — every chair is taken.',
|
||||
ALREADY_STARTED: 'That game has already started.',
|
||||
BAD_PLAYER_COUNT: 'That table size cannot start a game — 2 to 4 players.',
|
||||
NOT_HOST: 'Only the host can do that.',
|
||||
NAME_TAKEN: 'Somebody at that table is already using that name — pick another.',
|
||||
'bad or missing secret': 'That join secret was not accepted by this server.',
|
||||
// What a lobby answers once it has become a GAME — most often seen by a host pressing Start
|
||||
// twice, and by a tab left open on a lobby that started somewhere else.
|
||||
'no such lobby': 'That game is no longer waiting to start — it has either begun or been closed.',
|
||||
'no open lobby with that code': 'No game is waiting under that code. Check it, or ask for a new one — a game that has already started cannot be joined.',
|
||||
};
|
||||
const key = typeof code === 'string' ? code : '';
|
||||
return messages[key] ?? (key !== '' ? key : fallback);
|
||||
}
|
||||
|
||||
async function postJson(path: string, body: unknown): Promise<{ status: number; body: Record<string, unknown> }> {
|
||||
const res = await fetch(path, {
|
||||
@@ -46,21 +116,73 @@ async function postJson(path: string, body: unknown): Promise<{ status: number;
|
||||
return { status: res.status, body: (await res.json()) as Record<string, unknown> };
|
||||
}
|
||||
|
||||
async function getJson(path: string): Promise<{ status: number; body: Record<string, unknown> }> {
|
||||
const res = await fetch(path);
|
||||
return { status: res.status, body: (await res.json().catch(() => ({}))) as Record<string, unknown> };
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows `#lobby`, drives it through creating or joining a game and then seating, and calls
|
||||
* `onReady` exactly once — the instant `Lobby.Start` fires, from WHICHEVER browser tab started it.
|
||||
* Never calls back more than once; the caller is expected to tear this screen down (`main.ts` hides
|
||||
* `#lobby` and shows `#gameui`) as its very first action inside `onReady`.
|
||||
* Shows `#lobby` and drives it. `resume` re-enters the seating screen for a browser that already
|
||||
* holds a seat (a reload before the host started) rather than starting at the doors.
|
||||
*/
|
||||
export function runLobby(onReady: (r: LobbyReady) => void): void {
|
||||
export function runLobby(handlers: LobbyHandlers, resume?: { token: string; gameId: string; gameCode: string }): void {
|
||||
// Nothing below exists on a page that is not `play.html` — and `main.ts` is imported by tests that
|
||||
// stub only part of the DOM. Bail rather than throwing through the module's caller.
|
||||
if (!has('lobby') || !has('lb-choice-section')) return;
|
||||
$('lobby').hidden = false;
|
||||
$<HTMLInputElement>('lb-secret').value = localStorage.getItem(SECRET_KEY) ?? '';
|
||||
|
||||
const form = settingsForm('lb-');
|
||||
let source: EventSource | null = null;
|
||||
let done = false;
|
||||
|
||||
function setError(id: string, message: string): void {
|
||||
$(id).textContent = message;
|
||||
/**
|
||||
* THE GAMES THIS BROWSER IS ALREADY IN.
|
||||
*
|
||||
* Rejoining is what the stored token is FOR, and until now the only thing that ever used one was a
|
||||
* bare page load — so a player who left a game, or who joined a second, had no way to get back to
|
||||
* the first. Drawn from the page's own storage (`main.ts`), never from this module.
|
||||
*/
|
||||
function renderKnown(): void {
|
||||
if (!has('lb-known')) return;
|
||||
const games = handlers.known?.() ?? [];
|
||||
$('lb-known').hidden = games.length === 0;
|
||||
if (games.length === 0) return;
|
||||
$('lb-known-list').innerHTML = games
|
||||
.map(
|
||||
(g) =>
|
||||
`<div class="lb-known-row"><span class="code">${escapeHtml(g.gameCode || g.gameId.slice(0, 8))}</span>` +
|
||||
`<span class="dim">${g.stage === 'lobby' ? 'waiting to start' : 'in play'}</span>` +
|
||||
`<button class="lb-rejoin" data-game="${escapeHtml(g.gameId)}">Rejoin</button>` +
|
||||
`<button class="lb-forget ghost" data-game="${escapeHtml(g.gameId)}">Forget</button></div>`,
|
||||
)
|
||||
.join('');
|
||||
for (const btn of Array.from($('lb-known-list').querySelectorAll<HTMLButtonElement>('.lb-rejoin'))) {
|
||||
btn.onclick = () => handlers.rejoin?.(btn.dataset['game'] ?? '');
|
||||
}
|
||||
for (const btn of Array.from($('lb-known-list').querySelectorAll<HTMLButtonElement>('.lb-forget'))) {
|
||||
btn.onclick = () => {
|
||||
// Confirmed, because it is not recoverable from this browser: the token IS the identity
|
||||
// (`lobby-and-sessions.md` §1), and nothing else on this server will accept a claim to that
|
||||
// seat.
|
||||
const code = btn.previousElementSibling?.previousElementSibling?.textContent ?? 'that game';
|
||||
if (!confirm(`Forget ${code}? This browser will not be able to rejoin it — your seat stays in the game, and only whoever runs the server could let you back in.`)) return;
|
||||
handlers.forget?.(btn.dataset['game'] ?? '');
|
||||
renderKnown();
|
||||
};
|
||||
}
|
||||
}
|
||||
renderKnown();
|
||||
|
||||
// -- the join secret ------------------------------------------------------------------------
|
||||
|
||||
function showSecret(saved: boolean): void {
|
||||
$('lb-secret-saved').hidden = !saved;
|
||||
$('lb-secret-ask').hidden = saved;
|
||||
}
|
||||
const storedSecret = localStorage.getItem(SECRET_KEY) ?? '';
|
||||
$<HTMLInputElement>('lb-secret').value = storedSecret;
|
||||
showSecret(storedSecret !== '');
|
||||
$<HTMLButtonElement>('lb-secret-change').onclick = () => showSecret(false);
|
||||
|
||||
function secret(): string {
|
||||
const value = $<HTMLInputElement>('lb-secret').value;
|
||||
@@ -68,25 +190,248 @@ export function runLobby(onReady: (r: LobbyReady) => void): void {
|
||||
return value;
|
||||
}
|
||||
|
||||
/** A rejected secret re-opens the field it is about — the error used to appear a screen away from
|
||||
* the box that caused it. */
|
||||
function secretRejected(status: number): boolean {
|
||||
if (status !== 403) return false;
|
||||
showSecret(false);
|
||||
$<HTMLInputElement>('lb-secret').focus();
|
||||
return true;
|
||||
}
|
||||
|
||||
// -- display name ---------------------------------------------------------------------------
|
||||
|
||||
const nameField = $<HTMLInputElement>('lb-name');
|
||||
nameField.value = localStorage.getItem(NAME_KEY) ?? '';
|
||||
function displayName(): string {
|
||||
const value = nameField.value.trim();
|
||||
if (value !== '') localStorage.setItem(NAME_KEY, value);
|
||||
return value;
|
||||
}
|
||||
|
||||
// -- the two doors --------------------------------------------------------------------------
|
||||
|
||||
function door(which: 'join' | 'create'): void {
|
||||
$('lb-join-panel').hidden = which !== 'join';
|
||||
$('lb-create-panel').hidden = which !== 'create';
|
||||
$('lb-door-join').classList.toggle('active', which === 'join');
|
||||
$('lb-door-create').classList.toggle('active', which === 'create');
|
||||
}
|
||||
$<HTMLButtonElement>('lb-door-join').onclick = () => door('join');
|
||||
$<HTMLButtonElement>('lb-door-create').onclick = () => door('create');
|
||||
|
||||
// -- the create form ------------------------------------------------------------------------
|
||||
|
||||
/** The named type the form is currently measured against — and, for a Custom game, the type it is
|
||||
* scored as. Custom is only ever reached FROM one of these, so there is always an answer. */
|
||||
let base: PresetName = 'coop';
|
||||
let type: GameType = 'coop';
|
||||
/** Once the host types a Revenue floor it is theirs; players and days stop re-deriving it. */
|
||||
let floorTyped = false;
|
||||
|
||||
const players = (): number => Number($<HTMLSelectElement>('lb-players').value) || 4;
|
||||
const days = (): number => {
|
||||
const raw = Number($<HTMLInputElement>('lb-days').value);
|
||||
return Number.isFinite(raw) && raw >= 1 ? Math.round(raw) : 5;
|
||||
};
|
||||
|
||||
function typeRadios(): HTMLInputElement[] {
|
||||
return Array.from(document.querySelectorAll<HTMLInputElement>('input[name="lb-type"]'));
|
||||
}
|
||||
|
||||
/** Reset every rule to a named type. Seed, players and days are parameters, and are left alone. */
|
||||
function selectPreset(name: PresetName): void {
|
||||
base = name;
|
||||
type = name;
|
||||
floorTyped = false;
|
||||
const values = presetSettings(name, players(), days());
|
||||
form.write(values, values);
|
||||
form.setEmployeeRotationAvailable(true);
|
||||
refresh();
|
||||
}
|
||||
|
||||
function refresh(): void {
|
||||
const differing = form.mark(base, players(), days());
|
||||
if (differing.length > 0) type = 'custom';
|
||||
else if (type === 'custom') type = base;
|
||||
for (const r of typeRadios()) r.checked = r.value === type;
|
||||
|
||||
const scoring = preset(base).scoring;
|
||||
const note = $('lb-type-note');
|
||||
if (type === 'custom') {
|
||||
note.textContent =
|
||||
`${gameTypeLabel('custom', scoring)} · ${differing.length} ` +
|
||||
`${differing.length === 1 ? 'setting differs' : 'settings differ'} from ${preset(base).label}.`;
|
||||
note.className = 'ng-note changed-note';
|
||||
// A Custom game is nobody's default: open the block that says how it differs.
|
||||
$<HTMLDetailsElement>('lb-settings').open = true;
|
||||
} else {
|
||||
note.textContent = preset(type as PresetName).blurb;
|
||||
note.className = 'ng-note';
|
||||
}
|
||||
}
|
||||
|
||||
for (const r of typeRadios()) {
|
||||
// Solitaire is on this screen so the two screens read as one list, but there is nothing here to
|
||||
// deal it with — the New Game dialog is where a solitaire game comes from.
|
||||
if (r.value === 'solitaire') markUnavailable(r, 'dealt with the New game button, not here');
|
||||
r.onchange = () => {
|
||||
if (!r.checked) return;
|
||||
if (r.value === 'custom') {
|
||||
// Clicking Custom keeps everything as it stands, and keeps the scoring of the type it came
|
||||
// from (Jesse, 2026-08-23) — it is only ever reached from one of the named types.
|
||||
type = 'custom';
|
||||
refresh();
|
||||
return;
|
||||
}
|
||||
selectPreset(r.value as PresetName);
|
||||
};
|
||||
}
|
||||
|
||||
form.onEdit((key) => {
|
||||
// The floor is derived until somebody sets it; ticking the condition off counts as setting it.
|
||||
if (key === 'minCombinedRevenue') floorTyped = true;
|
||||
type = 'custom';
|
||||
refresh();
|
||||
});
|
||||
|
||||
/** Players and days are parameters, not settings: they re-derive the floor and never make a game
|
||||
* Custom by themselves. */
|
||||
function paramsChanged(): void {
|
||||
if (!floorTyped) {
|
||||
const values = form.read();
|
||||
const want = presetSettings(base, players(), days());
|
||||
form.write({ ...values, minCombinedRevenue: want.minCombinedRevenue }, want);
|
||||
}
|
||||
refresh();
|
||||
}
|
||||
$<HTMLSelectElement>('lb-players').onchange = paramsChanged;
|
||||
$<HTMLInputElement>('lb-days').oninput = paramsChanged;
|
||||
|
||||
selectPreset('coop');
|
||||
door('join');
|
||||
|
||||
// -- creating -------------------------------------------------------------------------------
|
||||
|
||||
$<HTMLButtonElement>('lb-create').onclick = () => {
|
||||
const name = displayName();
|
||||
if (name === '') {
|
||||
$('lb-create-err').textContent = 'Enter a display name first.';
|
||||
return;
|
||||
}
|
||||
const asked = $<HTMLInputElement>('lb-seed').value.trim();
|
||||
// Blank or unparseable both mean "surprise me", which is what leaving the box alone asks for.
|
||||
const seed = asked === '' || !Number.isFinite(Number(asked)) ? null : Math.trunc(Number(asked));
|
||||
const config = configFromSettings(form.read(), preset(base).scoring, days(), preset(base).pvpCards);
|
||||
|
||||
$('lb-create-err').textContent = '';
|
||||
void postJson('/api/lobby/create', {
|
||||
secret: secret(),
|
||||
config,
|
||||
displayName: name,
|
||||
players: players(),
|
||||
seed,
|
||||
}).then(({ status, body }) => {
|
||||
if (status !== 200) {
|
||||
secretRejected(status);
|
||||
$('lb-create-err').textContent = explain(body['error'], 'Could not create the game.');
|
||||
return;
|
||||
}
|
||||
enterSeating(body['gameId'] as string, body['token'] as string, body['gameCode'] as string);
|
||||
});
|
||||
};
|
||||
|
||||
// -- joining --------------------------------------------------------------------------------
|
||||
|
||||
let previewed: Preview | null = null;
|
||||
|
||||
function showPreview(p: Preview): void {
|
||||
previewed = p;
|
||||
$('lb-preview').hidden = false;
|
||||
$('lb-preview-code').textContent = p.gameCode;
|
||||
const near = closestPreset(p.config, p.players, p.config.days);
|
||||
const label = gameTypeLabel(
|
||||
near.differing.length === 0 ? near.name : 'custom',
|
||||
p.config.mode,
|
||||
);
|
||||
$('lb-preview-type').textContent =
|
||||
near.differing.length === 0
|
||||
? label
|
||||
: `${label} · ${near.differing.length} ${near.differing.length === 1 ? 'setting differs' : 'settings differ'} from ${preset(near.name).label}`;
|
||||
const taken = p.seated.filter((s) => s.who !== null || s.bot).length;
|
||||
const names = p.seated
|
||||
.map((s) => (s.bot ? 'a bot' : (s.who ?? 'empty')))
|
||||
.join(', ');
|
||||
$('lb-preview-who').textContent = `Host: ${p.hostName} · ${taken} of ${p.players} seats taken — ${names}`;
|
||||
$('lb-preview-rules').innerHTML = rulesListHtml(p.config, p.players, p.config.days);
|
||||
}
|
||||
|
||||
$<HTMLButtonElement>('lb-look').onclick = () => {
|
||||
const code = $<HTMLInputElement>('lb-code').value.trim().toUpperCase();
|
||||
$('lb-preview').hidden = true;
|
||||
if (code === '') {
|
||||
$('lb-join-err').textContent = 'Enter the game code you were given.';
|
||||
return;
|
||||
}
|
||||
$('lb-join-err').textContent = '';
|
||||
void getJson(
|
||||
`/api/lobby/preview?gameCode=${encodeURIComponent(code)}&secret=${encodeURIComponent(secret())}`,
|
||||
).then(({ status, body }) => {
|
||||
if (status !== 200) {
|
||||
secretRejected(status);
|
||||
$('lb-join-err').textContent = explain(body['error'], 'Could not look up that game.');
|
||||
return;
|
||||
}
|
||||
showPreview(body as unknown as Preview);
|
||||
});
|
||||
};
|
||||
|
||||
$<HTMLButtonElement>('lb-join').onclick = () => {
|
||||
const name = displayName();
|
||||
const code = previewed?.gameCode ?? $<HTMLInputElement>('lb-code').value.trim().toUpperCase();
|
||||
if (name === '') {
|
||||
$('lb-join-err').textContent = 'Enter a display name first.';
|
||||
return;
|
||||
}
|
||||
$('lb-join-err').textContent = '';
|
||||
void postJson('/api/lobby/join', { secret: secret(), gameCode: code, displayName: name }).then(
|
||||
({ status, body }) => {
|
||||
if (status !== 200) {
|
||||
secretRejected(status);
|
||||
$('lb-join-err').textContent = explain(body['error'], 'Could not join that game.');
|
||||
return;
|
||||
}
|
||||
enterSeating(body['gameId'] as string, body['token'] as string, code);
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// -- seating --------------------------------------------------------------------------------
|
||||
|
||||
function renderSeating(lobby: Lobby, you: PlayerIndex, token: string): void {
|
||||
$('lb-gamecode').textContent = lobby.gameCode;
|
||||
const isHost = lobby.hostToken === token;
|
||||
|
||||
let html = '';
|
||||
// Bots are numbered here exactly as `startLobby` numbers them at the moment the game starts, so
|
||||
// the table you set up is the table that appears on the board.
|
||||
let botNumber = 0;
|
||||
for (let seat = 0; seat < lobby.seats.length; seat++) {
|
||||
const occupant = lobby.seats[seat] ?? null;
|
||||
const isYou = occupant?.kind === 'human' && occupant.token === token;
|
||||
const isSeatHost = occupant?.kind === 'human' && occupant.token === lobby.hostToken;
|
||||
if (occupant?.kind === 'bot') botNumber++;
|
||||
const who =
|
||||
occupant === null
|
||||
? '<span class="dim">— waiting —</span>'
|
||||
: occupant.kind === 'bot'
|
||||
? 'Bot'
|
||||
: `${occupant.displayName}${isYou ? ' (you)' : ''}${isSeatHost ? ' — host' : ''}`;
|
||||
? `Bot ${botNumber}`
|
||||
: `${escapeHtml(occupant.displayName)}${isYou ? ' (you)' : ''}${isSeatHost ? ' — host' : ''}`;
|
||||
let action = '';
|
||||
if (isHost) {
|
||||
if (occupant === null) action = `<button class="lb-bot-add" data-seat="${seat}">+ bot</button>`;
|
||||
else if (occupant.kind === 'bot') action = `<button class="lb-bot-remove" data-seat="${seat}">remove bot</button>`;
|
||||
else if (!isYou) action = `<button class="lb-kick" data-seat="${seat}">remove</button>`;
|
||||
}
|
||||
html += `<div class="lb-seat"><span class="dim">Seat ${seatLabel(seat)}</span><span class="who">${who}</span>${action}</div>`;
|
||||
}
|
||||
@@ -94,21 +439,30 @@ export function runLobby(onReady: (r: LobbyReady) => void): void {
|
||||
|
||||
/**
|
||||
* The code is the whole invitation, so it has to leave this screen by some route other than
|
||||
* being read off it and retyped. `navigator.clipboard` is unavailable on an insecure origin
|
||||
* and can be refused outright, so a failure says the code is there to be selected rather than
|
||||
* silently doing nothing.
|
||||
* being read off it and retyped. Two buttons because they are two different acts: the CODE is
|
||||
* what you read aloud on a call and works at whatever address each player reaches the box by;
|
||||
* the LINK is what you paste into a chat, and only works for someone who can reach this address.
|
||||
* Neither carries the join secret — that is the door key, and it travels out of band.
|
||||
*
|
||||
* `navigator.clipboard` is unavailable on an insecure origin and can be refused outright, so a
|
||||
* failure says the code is there to be selected rather than silently doing nothing.
|
||||
*/
|
||||
const copyBtn = $<HTMLButtonElement>('lb-copy');
|
||||
copyBtn.onclick = () => {
|
||||
const say = (m: string): void => {
|
||||
$('lb-copied').textContent = m;
|
||||
setTimeout(() => ($('lb-copied').textContent = ''), 4000);
|
||||
};
|
||||
const say = (m: string): void => {
|
||||
$('lb-copied').textContent = m;
|
||||
setTimeout(() => ($('lb-copied').textContent = ''), 4000);
|
||||
};
|
||||
const copy = (text: string, ok: string): void => {
|
||||
void navigator.clipboard
|
||||
?.writeText(lobby.gameCode)
|
||||
.then(() => say('Copied.'))
|
||||
?.writeText(text)
|
||||
.then(() => say(ok))
|
||||
.catch(() => say('Could not copy — select the code above instead.'));
|
||||
};
|
||||
$<HTMLButtonElement>('lb-copy').onclick = () => copy(lobby.gameCode, 'Code copied.');
|
||||
$<HTMLButtonElement>('lb-copylink').onclick = () =>
|
||||
copy(
|
||||
`${location.origin}${location.pathname}?lobby&code=${encodeURIComponent(lobby.gameCode)}`,
|
||||
'Invite link copied — the join secret is not in it.',
|
||||
);
|
||||
|
||||
for (const btn of Array.from($('lb-seats').querySelectorAll<HTMLButtonElement>('.lb-bot-add'))) {
|
||||
btn.onclick = () => void postJson('/api/lobby/bot', { token, seat: Number(btn.dataset['seat']), filled: true });
|
||||
@@ -116,135 +470,165 @@ export function runLobby(onReady: (r: LobbyReady) => void): void {
|
||||
for (const btn of Array.from($('lb-seats').querySelectorAll<HTMLButtonElement>('.lb-bot-remove'))) {
|
||||
btn.onclick = () => void postJson('/api/lobby/bot', { token, seat: Number(btn.dataset['seat']), filled: false });
|
||||
}
|
||||
for (const btn of Array.from($('lb-seats').querySelectorAll<HTMLButtonElement>('.lb-kick'))) {
|
||||
btn.onclick = () => {
|
||||
void postJson('/api/lobby/leave', { token, seat: Number(btn.dataset['seat']) }).then(({ status, body }) => {
|
||||
if (status !== 200) $('lb-start-note').textContent = explain(body['error'], 'Could not clear that seat.');
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// What everyone at the table is about to play — the host chose it, and until now nobody else
|
||||
// could see any of it.
|
||||
const near = closestPreset(lobby.config, lobby.seats.length, lobby.config.days);
|
||||
const label = gameTypeLabel(near.differing.length === 0 ? near.name : 'custom', lobby.config.mode);
|
||||
$('lb-seating-type').textContent =
|
||||
near.differing.length === 0
|
||||
? label
|
||||
: `${label} · ${near.differing.length} ${near.differing.length === 1 ? 'setting differs' : 'settings differ'} from ${preset(near.name).label}`;
|
||||
$('lb-seating-rules').innerHTML = rulesListHtml(lobby.config, lobby.seats.length, lobby.config.days);
|
||||
|
||||
const waiting = lobby.seats.filter((s) => s === null).length;
|
||||
const startBtn = $<HTMLButtonElement>('lb-start');
|
||||
startBtn.hidden = !isHost;
|
||||
startBtn.disabled = waiting > 0;
|
||||
$('lb-start-note').textContent = isHost
|
||||
? waiting === 0
|
||||
? ''
|
||||
: `Waiting on ${waiting} more ${waiting === 1 ? 'player' : 'players'} — add a bot to any empty chair to start now.`
|
||||
: 'Waiting for the host to start the game.';
|
||||
startBtn.textContent = 'Start game';
|
||||
$('lb-start-note').textContent = '';
|
||||
const waitNote = $('lb-stream-note');
|
||||
if (waitNote.dataset['reason'] !== 'stream') {
|
||||
waitNote.hidden = waiting === 0 && isHost;
|
||||
waitNote.textContent = isHost
|
||||
? waiting === 0
|
||||
? ''
|
||||
: `Waiting on ${waiting} more ${waiting === 1 ? 'player' : 'players'} — add a bot to any empty chair to start now.`
|
||||
: 'Waiting for the host to start the game.';
|
||||
waitNote.hidden = waitNote.textContent === '';
|
||||
}
|
||||
startBtn.onclick = () => {
|
||||
// No busy state used to mean a second press posted a second start, whose 409 landed on screen
|
||||
// as a raw code.
|
||||
startBtn.disabled = true;
|
||||
startBtn.textContent = 'Starting…';
|
||||
void postJson('/api/lobby/start', { token }).then(({ status, body }) => {
|
||||
if (status !== 200) setError('lb-start-note', String(body['error'] ?? 'could not start'));
|
||||
if (status !== 200) {
|
||||
startBtn.disabled = false;
|
||||
startBtn.textContent = 'Start game';
|
||||
$('lb-start-note').textContent = explain(body['error'], 'Could not start the game.');
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function enterSeating(gameId: string, token: string): void {
|
||||
function streamNote(message: string): void {
|
||||
const el = $('lb-stream-note');
|
||||
el.dataset['reason'] = message === '' ? '' : 'stream';
|
||||
el.textContent = message;
|
||||
el.hidden = message === '';
|
||||
}
|
||||
|
||||
function enterSeating(gameId: string, token: string, gameCode: string): void {
|
||||
handlers.onSeated({ token, gameId, gameCode });
|
||||
$('lb-choice-section').hidden = true;
|
||||
$('lb-seating-section').hidden = false;
|
||||
|
||||
$<HTMLButtonElement>('lb-leave').onclick = () => {
|
||||
void postJson('/api/lobby/leave', { token }).then(() => {
|
||||
source?.close();
|
||||
handlers.onLeft(gameId);
|
||||
$('lb-seating-section').hidden = true;
|
||||
$('lb-choice-section').hidden = false;
|
||||
renderKnown();
|
||||
notice('');
|
||||
});
|
||||
};
|
||||
|
||||
source = new EventSource(`/api/lobby/stream?token=${encodeURIComponent(token)}`);
|
||||
source.onmessage = (ev: MessageEvent<string>) => {
|
||||
streamNote('');
|
||||
const push = JSON.parse(ev.data) as LobbyPush;
|
||||
if (push.started) {
|
||||
source?.close();
|
||||
onReady({ token, gameId, seat: push.you });
|
||||
if (done) return;
|
||||
done = true;
|
||||
handlers.onReady({ token, gameId, seat: push.you, gameCode: push.lobby.gameCode });
|
||||
return;
|
||||
}
|
||||
renderSeating(push.lobby, push.you, token);
|
||||
};
|
||||
}
|
||||
|
||||
const chosenMode = (): 'competitive' | 'coop' =>
|
||||
($('lb-choice-section').querySelector<HTMLInputElement>('input[name="lb-mode"]:checked')?.value ??
|
||||
'competitive') as 'competitive' | 'coop';
|
||||
const chosenPlayers = (): number => Number($<HTMLSelectElement>('lb-players').value) || 4;
|
||||
const num = (id: string): number => Number($<HTMLInputElement>(id).value);
|
||||
|
||||
/**
|
||||
* Mode and table size only move the DEFAULTS, exactly as the solitaire dialog's own presets do —
|
||||
* every field stays editable afterwards, so "Co-op, 3 players" is a starting point rather than a
|
||||
* fixed ruleset. Re-running this on a change is also what keeps the combined-Revenue floor
|
||||
* honest: it is derived from the player count, and the count is a control on this form.
|
||||
*/
|
||||
function applyDefaults(): void {
|
||||
const c = defaultMultiplayerConfig(chosenMode(), chosenPlayers());
|
||||
const rules = houseRules(c);
|
||||
$<HTMLInputElement>('lb-days').value = String(c.days);
|
||||
$<HTMLInputElement>('lb-minrev').value = String(c.minCombinedRevenue);
|
||||
$<HTMLInputElement>('lb-colday').value = String(c.maxCollisionsPerDay);
|
||||
$<HTMLInputElement>('lb-coltotal').value = String(c.maxCollisionsTotal);
|
||||
$<HTMLInputElement>('lb-passenger').value = String(rules.revenue.passengerPerCoach);
|
||||
$<HTMLInputElement>('lb-freight').value = String(rules.revenue.freightPerLoad);
|
||||
$<HTMLInputElement>('lb-transit').value = String(rules.revenue.trainPerTransit);
|
||||
// Co-op has no valid target for the opponent-directed cards, so the toggle is forced off rather
|
||||
// than merely defaulted off — the same rule `buildDeck` applies.
|
||||
const pvp = $<HTMLInputElement>('lb-pvp');
|
||||
pvp.checked = c.pvpCardsAllowed;
|
||||
pvp.disabled = chosenMode() !== 'competitive';
|
||||
}
|
||||
for (const input of Array.from(
|
||||
$('lb-choice-section').querySelectorAll<HTMLInputElement>('input[name="lb-mode"]'),
|
||||
)) {
|
||||
input.onchange = applyDefaults;
|
||||
}
|
||||
$<HTMLSelectElement>('lb-players').onchange = applyDefaults;
|
||||
applyDefaults();
|
||||
|
||||
$<HTMLButtonElement>('lb-create').onclick = () => {
|
||||
const displayName = $<HTMLInputElement>('lb-name').value.trim();
|
||||
const mode = chosenMode();
|
||||
if (displayName === '') {
|
||||
setError('lb-create-err', 'enter a display name first');
|
||||
return;
|
||||
}
|
||||
const players = chosenPlayers();
|
||||
const hand = $('lb-settings').querySelector<HTMLInputElement>('input[name="lb-hand"]:checked')?.value;
|
||||
// Blank or unparseable both mean "surprise me", which is what leaving the box alone asks for.
|
||||
const asked = $<HTMLInputElement>('lb-seed').value.trim();
|
||||
const seed = asked === '' || !Number.isFinite(Number(asked)) ? null : Math.trunc(Number(asked));
|
||||
|
||||
const config: GameConfig = {
|
||||
...defaultMultiplayerConfig(mode, players),
|
||||
days: Math.max(1, Math.round(num('lb-days')) || 5),
|
||||
minCombinedRevenue: Math.max(0, Math.round(num('lb-minrev')) || 0),
|
||||
maxCollisionsPerDay: Math.max(0, Math.round(num('lb-colday')) || 0),
|
||||
maxCollisionsTotal: Math.max(0, Math.round(num('lb-coltotal')) || 0),
|
||||
pvpCardsAllowed: $<HTMLInputElement>('lb-pvp').checked && mode === 'competitive',
|
||||
optionalRules: {
|
||||
reducedVisibility: $<HTMLInputElement>('lb-visibility').checked,
|
||||
employeeRotation: $<HTMLInputElement>('lb-rotation').checked,
|
||||
emergencyToolbox: $<HTMLInputElement>('lb-toolbox').checked,
|
||||
},
|
||||
houseRules: {
|
||||
...(STARTING_HAND_LABELS.some((o) => o.value === hand) ? { startingHand: hand as StartingHand } : {}),
|
||||
revenue: {
|
||||
passengerPerCoach: num('lb-passenger'),
|
||||
freightPerLoad: num('lb-freight'),
|
||||
trainPerTransit: num('lb-transit'),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
void postJson('/api/lobby/create', { secret: secret(), config, displayName, players, seed }).then(
|
||||
({ status, body }) => {
|
||||
if (status !== 200) {
|
||||
setError('lb-create-err', String(body['error'] ?? 'could not create the game'));
|
||||
/**
|
||||
* A DEAD LOBBY AND A BLIP LOOK IDENTICAL HERE, so ask — the same shape `session.ts` already uses
|
||||
* for the game stream, which the lobby never got.
|
||||
*
|
||||
* Three answers matter. The game may have STARTED while we were disconnected (the `started` push
|
||||
* is sent once and then the connection closes, so a drop at the wrong moment loses it) —
|
||||
* `/api/session` knows, and we go straight in. The lobby may still be there, in which case
|
||||
* `EventSource` is already retrying and the note is all that is needed. Or it is gone, and
|
||||
* sitting on a frozen seating screen is the one thing that must not happen.
|
||||
*/
|
||||
source.onerror = () => {
|
||||
if (done) return;
|
||||
streamNote('Connection lost — retrying. You can leave and rejoin if this does not clear.');
|
||||
void getJson(`/api/session?token=${encodeURIComponent(token)}`).then(({ status, body }) => {
|
||||
if (done) return;
|
||||
if (status === 200) {
|
||||
done = true;
|
||||
source?.close();
|
||||
handlers.onReady({ token, gameId, seat: body['player'] as PlayerIndex, gameCode });
|
||||
return;
|
||||
}
|
||||
setError('lb-create-err', '');
|
||||
enterSeating(body['gameId'] as string, body['token'] as string);
|
||||
},
|
||||
);
|
||||
};
|
||||
void getJson(
|
||||
`/api/lobby/preview?gameCode=${encodeURIComponent(gameCode)}&secret=${encodeURIComponent(secret())}`,
|
||||
).then(({ status: lobbyStatus }) => {
|
||||
if (done || lobbyStatus === 200) return;
|
||||
source?.close();
|
||||
handlers.onLeft(gameId);
|
||||
$('lb-seating-section').hidden = true;
|
||||
$('lb-choice-section').hidden = false;
|
||||
renderKnown();
|
||||
streamNote('');
|
||||
notice('That game is no longer waiting on this server — it was ended, or the last player left.');
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
$<HTMLButtonElement>('lb-join').onclick = () => {
|
||||
const displayName = $<HTMLInputElement>('lb-name').value.trim();
|
||||
const gameCode = $<HTMLInputElement>('lb-code').value.trim();
|
||||
if (displayName === '' || gameCode === '') {
|
||||
setError('lb-join-err', 'enter a display name and a game code');
|
||||
return;
|
||||
}
|
||||
void postJson('/api/lobby/join', { secret: secret(), gameCode, displayName }).then(({ status, body }) => {
|
||||
if (status !== 200) {
|
||||
setError('lb-join-err', String(body['error'] ?? 'could not join that game'));
|
||||
return;
|
||||
}
|
||||
setError('lb-join-err', '');
|
||||
enterSeating(body['gameId'] as string, body['token'] as string);
|
||||
});
|
||||
};
|
||||
if (resume) enterSeating(resume.gameId, resume.token, resume.gameCode);
|
||||
}
|
||||
|
||||
/** The lobby-wide message slot: why you are looking at this screen, when it was not your own click. */
|
||||
export function notice(message: string): void {
|
||||
const el = document.getElementById('lb-notice');
|
||||
if (!el) return;
|
||||
el.textContent = message;
|
||||
el.hidden = message === '';
|
||||
}
|
||||
|
||||
/** Prefills the code from an invite link and opens the join door on it. */
|
||||
export function prefillCode(code: string): void {
|
||||
const field = document.getElementById('lb-code') as HTMLInputElement | null;
|
||||
if (field) field.value = code.toUpperCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* A CHOICE THAT CANNOT BE TAKEN HAS TO SAY SO.
|
||||
*
|
||||
* Reported by Jesse 2026-08-23: "solitaire is disabled, but really hard to tell." A bare `disabled`
|
||||
* on a radio leaves the whole row at full strength — the dot simply refuses the click, which reads
|
||||
* as a broken control rather than an unavailable one. Dims the row and says why, once.
|
||||
*/
|
||||
function markUnavailable(radio: HTMLInputElement, why: string): void {
|
||||
radio.disabled = true;
|
||||
const row = radio.closest('label');
|
||||
if (!row) return;
|
||||
row.classList.add('disabled');
|
||||
if (row.querySelector('.lb-why')) return;
|
||||
const note = document.createElement('span');
|
||||
note.className = 'lb-why';
|
||||
note.textContent = ` — ${why}`;
|
||||
row.querySelector('span')?.appendChild(note);
|
||||
}
|
||||
|
||||
function escapeHtml(s: string): string {
|
||||
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
+537
-107
@@ -14,12 +14,9 @@ import { PANEL_CSS, blockedHtml, facilitiesHtml, pilesHtml, timetableHtml, yardH
|
||||
import { TOOLTIP_CSS, installTooltips } from './tooltip.ts';
|
||||
import { playCue } from './sound.ts';
|
||||
import {
|
||||
DEFAULT_MAX_COLLISIONS_PER_DAY,
|
||||
DEFAULT_MAX_COLLISIONS_TOTAL,
|
||||
MOVES_PER_LOCAL_OPS,
|
||||
EXTRA_START_LABELS,
|
||||
STARTING_HAND_LABELS,
|
||||
collectiveRevenueFloor,
|
||||
houseRules,
|
||||
} from '../engine/content.ts';
|
||||
import type { ExtraStartRule, HouseRuleOverrides, HouseRules, RevenueRules, StartingHand } from '../engine/content.ts';
|
||||
@@ -27,8 +24,19 @@ import type { NewGameOptions } from './game.ts';
|
||||
import type { LocalSession, Session } from './session.ts';
|
||||
import { createLocalSession, createRemoteSession } from './session.ts';
|
||||
import type { PlayerIndex } from '../engine/state.ts';
|
||||
import { runLobby } from './lobby.ts';
|
||||
import { notice, prefillCode, runLobby } from './lobby.ts';
|
||||
import type { LobbyReady } from './lobby.ts';
|
||||
import {
|
||||
closestPreset,
|
||||
configFromFrame,
|
||||
gameTypeLabel,
|
||||
preset,
|
||||
presetOf,
|
||||
presetSettings,
|
||||
settingsOf,
|
||||
} from './presets.ts';
|
||||
import type { GameType, PresetName } from './presets.ts';
|
||||
import { settingsForm } from './settings-form.ts';
|
||||
|
||||
const SAVE_KEY = 'station-master.save.v1';
|
||||
const SETTINGS_KEY = 'station-master.settings.v1';
|
||||
@@ -227,7 +235,11 @@ function piecePreview(links: string[], label: string): string {
|
||||
*/
|
||||
function renderTurnChart(f: Frame): void {
|
||||
const actorName = f.actor === null ? null : (f.players[f.actor]?.name ?? null);
|
||||
$('turnchart').innerHTML = turnChartHtml(f, actorName);
|
||||
// Named only at a table with more than one seat: in solitaire the Fedora is always yours, and a
|
||||
// chip that can never change is a chip to read past.
|
||||
const superName =
|
||||
f.players.length > 1 ? (f.players.find((p) => p.index === f.superintendent)?.name ?? null) : null;
|
||||
$('turnchart').innerHTML = turnChartHtml(f, actorName, superName);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -271,6 +283,19 @@ const VICTORY_PARAMS = {
|
||||
coltotal: 'maxCollisionsTotal',
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Appendix B's three, in the URL like everything else the dialog asks (2026-08-23).
|
||||
*
|
||||
* The dialog navigates to a URL and `start()` reads the game back out of it, so a setting missing
|
||||
* from here is a setting the dialog silently discards — which is exactly what happened to these
|
||||
* three for as long as only the lobby offered them.
|
||||
*/
|
||||
const OPTIONAL_PARAMS = {
|
||||
vis: 'reducedVisibility',
|
||||
rot: 'employeeRotation',
|
||||
tool: 'emergencyToolbox',
|
||||
} as const;
|
||||
|
||||
function gameOptionsFromUrl(params: URLSearchParams): NewGameOptions {
|
||||
const rules: HouseRuleOverrides = {};
|
||||
const hand = params.get('hand');
|
||||
@@ -296,9 +321,52 @@ function gameOptionsFromUrl(params: URLSearchParams): NewGameOptions {
|
||||
options[key] = Math.max(0, Math.round(Number(raw)));
|
||||
}
|
||||
}
|
||||
const optional: Partial<NonNullable<NewGameOptions['optionalRules']>> = {};
|
||||
for (const [param, key] of Object.entries(OPTIONAL_PARAMS)) {
|
||||
const raw = params.get(param);
|
||||
// Present and not "0" means on: `?rot=1` and `?rot` alike, since a bare flag reads as ''.
|
||||
if (raw !== null) optional[key] = raw !== '0';
|
||||
}
|
||||
if (Object.keys(optional).length > 0) options.optionalRules = optional;
|
||||
return options;
|
||||
}
|
||||
|
||||
/**
|
||||
* THE SOLITAIRE GAME TYPE'S RULES, under whatever the URL actually named.
|
||||
*
|
||||
* `SOLO_CONFIG` is the ENGINE's fallback and stays where it is — every engine test and every sim run
|
||||
* is measured against it, and moving it would silently re-deal all of them. What a PLAYER is dealt
|
||||
* when they open the page is a different question, and its answer is the Solitaire game type
|
||||
* (`presets.ts`) — which since 2026-08-23 opens with six cards, like every other type, so that the
|
||||
* New Game dialog and the lobby agree about what "Solitaire" means.
|
||||
*/
|
||||
function solitaireDefaults(options: NewGameOptions): NewGameOptions {
|
||||
const days = options.days ?? 5;
|
||||
const p = presetSettings('solitaire', 1, days);
|
||||
const revenue = options.houseRules?.revenue ?? {};
|
||||
return {
|
||||
days,
|
||||
minCombinedRevenue: options.minCombinedRevenue ?? p.minCombinedRevenue,
|
||||
maxCollisionsPerDay: options.maxCollisionsPerDay ?? p.maxCollisionsPerDay,
|
||||
maxCollisionsTotal: options.maxCollisionsTotal ?? p.maxCollisionsTotal,
|
||||
optionalRules: {
|
||||
reducedVisibility: options.optionalRules?.reducedVisibility ?? p.reducedVisibility,
|
||||
// One player, so there is nobody to rotate with whatever a hand-edited URL says.
|
||||
employeeRotation: false,
|
||||
emergencyToolbox: options.optionalRules?.emergencyToolbox ?? p.emergencyToolbox,
|
||||
},
|
||||
houseRules: {
|
||||
startingHand: options.houseRules?.startingHand ?? p.startingHand,
|
||||
extraStart: options.houseRules?.extraStart ?? p.extraStart,
|
||||
revenue: {
|
||||
passengerPerCoach: revenue.passengerPerCoach ?? p.passengerPerCoach,
|
||||
freightPerLoad: revenue.freightPerLoad ?? p.freightPerLoad,
|
||||
trainPerTransit: revenue.trainPerTransit ?? p.trainPerTransit,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function rulesToUrl(rules: HouseRules, options: NewGameOptions, seed: string): string {
|
||||
const params = new URLSearchParams();
|
||||
if (seed !== '') params.set('seed', seed);
|
||||
@@ -311,18 +379,212 @@ function rulesToUrl(rules: HouseRules, options: NewGameOptions, seed: string): s
|
||||
const value = options[key];
|
||||
if (value !== undefined) params.set(param, String(value));
|
||||
}
|
||||
for (const [param, key] of Object.entries(OPTIONAL_PARAMS)) {
|
||||
// Only the ones that are ON: a URL that spells out three `=0`s says nothing extra and is three
|
||||
// parameters longer.
|
||||
if (options.optionalRules?.[key] === true) params.set(param, '1');
|
||||
}
|
||||
return `?${params}`;
|
||||
}
|
||||
|
||||
function loadRemote(): LobbyReady | null {
|
||||
/**
|
||||
* WHAT THIS BROWSER REMEMBERS ABOUT A MULTIPLAYER GAME, and when.
|
||||
*
|
||||
* It used to be written only at `Lobby.Start`, which meant a refresh while SEATED — before the host
|
||||
* started — orphaned the chair: the token existed nowhere else, so the player could not return and
|
||||
* the seat could not be freed, and a table that needs every chair filled could no longer start.
|
||||
* The record is written the moment a seat is taken, and `stage` says how far it got.
|
||||
*/
|
||||
type RemoteRecord = {
|
||||
token: string;
|
||||
gameId: string;
|
||||
gameCode: string;
|
||||
/** Only known once the game exists; a lobby-stage record has no seat yet. */
|
||||
seat?: PlayerIndex;
|
||||
stage: 'lobby' | 'game';
|
||||
};
|
||||
|
||||
/**
|
||||
* EVERY multiplayer game this browser holds a seat in, and which was last played.
|
||||
*
|
||||
* It used to be ONE record under one key, so joining a second game overwrote the first — and since
|
||||
* the token IS the identity (`lobby-and-sessions.md` §1), that seat was then locked out for good.
|
||||
* `TODO.md` had it as "a second, nearer limit" under the lost-token item; Jesse hit it from the
|
||||
* other side, asking how to leave a game and play a different one later.
|
||||
*/
|
||||
type RemoteStore = { games: Record<string, RemoteRecord>; last: string | null };
|
||||
|
||||
function readStore(): RemoteStore {
|
||||
try {
|
||||
const raw = localStorage.getItem(REMOTE_KEY);
|
||||
return raw ? (JSON.parse(raw) as LobbyReady) : null;
|
||||
if (!raw) return { games: {}, last: null };
|
||||
const parsed = JSON.parse(raw) as Partial<RemoteStore> & Partial<RemoteRecord>;
|
||||
// The single-record shape written before 2026-08-23 — carried across rather than dropped, so an
|
||||
// update does not throw away the game somebody is in the middle of.
|
||||
if (typeof parsed.token === 'string' && typeof parsed.gameId === 'string') {
|
||||
const one: RemoteRecord = {
|
||||
token: parsed.token,
|
||||
gameId: parsed.gameId,
|
||||
gameCode: parsed.gameCode ?? '',
|
||||
...(parsed.seat === undefined ? {} : { seat: parsed.seat }),
|
||||
stage: parsed.stage ?? 'game',
|
||||
};
|
||||
return { games: { [one.gameId]: one }, last: one.gameId };
|
||||
}
|
||||
const games = parsed.games ?? {};
|
||||
return { games, last: parsed.last ?? null };
|
||||
} catch {
|
||||
return null;
|
||||
return { games: {}, last: null };
|
||||
}
|
||||
}
|
||||
|
||||
function writeStore(store: RemoteStore): void {
|
||||
try {
|
||||
localStorage.setItem(REMOTE_KEY, JSON.stringify(store));
|
||||
} catch {
|
||||
// A full or disabled localStorage must not take the game down with it — the session in memory
|
||||
// keeps working, it simply will not survive a reload.
|
||||
}
|
||||
}
|
||||
|
||||
/** The game to re-enter on a bare page load: the one most recently played. */
|
||||
function loadRemote(): RemoteRecord | null {
|
||||
const store = readStore();
|
||||
return store.last === null ? null : (store.games[store.last] ?? null);
|
||||
}
|
||||
|
||||
function saveRemote(record: RemoteRecord): void {
|
||||
const store = readStore();
|
||||
store.games[record.gameId] = record;
|
||||
store.last = record.gameId;
|
||||
writeStore(store);
|
||||
}
|
||||
|
||||
/** Deliberate, and the one irreversible thing on the lobby screen: the token is the only proof of
|
||||
* who you are, so forgetting it gives up the seat with no way back from this browser. */
|
||||
function forgetRemote(gameId: string): void {
|
||||
const store = readStore();
|
||||
delete store.games[gameId];
|
||||
if (store.last === gameId) store.last = null;
|
||||
writeStore(store);
|
||||
}
|
||||
|
||||
function knownRemote(): RemoteRecord[] {
|
||||
return Object.values(readStore().games);
|
||||
}
|
||||
|
||||
/** The handlers the lobby drives this page through — one place, since four callers open a lobby.
|
||||
* Storage lives here rather than in `lobby.ts`, which owns the screen and not the browser. */
|
||||
const lobbyHandlers = {
|
||||
onReady: (ready: LobbyReady): void => beginRemote(ready),
|
||||
onSeated: (s: { token: string; gameId: string; gameCode: string }): void =>
|
||||
saveRemote({ ...s, stage: 'lobby' }),
|
||||
onLeft: (gameId?: string): void => {
|
||||
const target = gameId ?? readStore().last;
|
||||
if (target !== null && target !== undefined) forgetRemote(target);
|
||||
},
|
||||
known: (): { gameId: string; gameCode: string; stage: 'lobby' | 'game' }[] =>
|
||||
knownRemote().map((r) => ({ gameId: r.gameId, gameCode: r.gameCode, stage: r.stage })),
|
||||
forget: (gameId: string): void => forgetRemote(gameId),
|
||||
rejoin: (gameId: string): void => {
|
||||
const record = readStore().games[gameId];
|
||||
if (!record) return;
|
||||
if (record.stage === 'game' && record.seat !== undefined) {
|
||||
beginRemote({ ...record, seat: record.seat });
|
||||
return;
|
||||
}
|
||||
// Still seated in a lobby that had not started: the stream puts us back on the seating screen,
|
||||
// and its own probe handles a game that began while we were away.
|
||||
showScreen('lobby');
|
||||
runLobby(lobbyHandlers, { token: record.token, gameId: record.gameId, gameCode: record.gameCode });
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* THE GAME CODE THIS PAGE IS IN, once it is in one.
|
||||
*
|
||||
* It ended at the lobby door before 2026-08-23 — `LobbyReady` carried the token, the game id and the
|
||||
* seat, and the code (the only one of the four a person can read out) was dropped. A seated player
|
||||
* could not say which game they were in, match it against the administrator's Games in Progress
|
||||
* list, or pass it to a latecomer. Empty in solitaire, where there is no code.
|
||||
*/
|
||||
let gameCode = '';
|
||||
|
||||
/** How long the handoff curtain holds, so the start of a game is a moment rather than a snap. */
|
||||
const HANDOFF_BEAT_MS = 1500;
|
||||
/** How long to wait before saying the board has not arrived. */
|
||||
const HANDOFF_STALL_MS = 8000;
|
||||
let handoffOpenedAt = 0;
|
||||
let handoffStall: number | null = null;
|
||||
let firstFrameSeen = false;
|
||||
|
||||
function setText(id: string, text: string): void {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = text;
|
||||
}
|
||||
|
||||
/** The curtain between `Lobby.Start` and the first Frame — see `#handoff` in `play.html`. */
|
||||
function openHandoff(): void {
|
||||
const el = document.getElementById('handoff');
|
||||
if (!el) return;
|
||||
firstFrameSeen = false;
|
||||
handoffOpenedAt = Date.now();
|
||||
el.classList.add('shown');
|
||||
setText('handoff-title', 'Dealing the railroad…');
|
||||
setText('handoff-note', 'Laying out the Division and rolling for seats.');
|
||||
if (handoffStall !== null) clearTimeout(handoffStall);
|
||||
handoffStall = window.setTimeout(() => {
|
||||
if (firstFrameSeen) return;
|
||||
setText('handoff-title', 'Still waiting for the server');
|
||||
setText(
|
||||
'handoff-note',
|
||||
'The game exists, but its board has not arrived yet. It will appear as soon as the server sends it.',
|
||||
);
|
||||
}, HANDOFF_STALL_MS);
|
||||
}
|
||||
|
||||
function closeHandoff(): void {
|
||||
document.getElementById('handoff')?.classList.remove('shown');
|
||||
if (handoffStall !== null) clearTimeout(handoffStall);
|
||||
handoffStall = null;
|
||||
}
|
||||
|
||||
/** Flash a one-line announcement over the board. Shared by the session's own announcements and by
|
||||
* the "the game has begun" line, which comes from the page rather than from an event. */
|
||||
function flashAnnounce(text: string): void {
|
||||
const el = document.getElementById('announce');
|
||||
if (!el) return;
|
||||
el.textContent = text;
|
||||
el.className = 'shown';
|
||||
window.setTimeout(() => {
|
||||
if (el.textContent === text) el.className = '';
|
||||
}, 4200);
|
||||
}
|
||||
|
||||
/**
|
||||
* THE FIRST FRAME OF A MULTIPLAYER GAME — the one moment nobody had ever seen drawn.
|
||||
*
|
||||
* The board simply appeared, mid-Local-Operations, with a log already several bot turns deep and
|
||||
* nothing saying this was the game just set up. `#phasenote` cannot help: it announces a CHANGE of
|
||||
* phase, and there is no previous phase to have changed from.
|
||||
*/
|
||||
function noteFirstFrame(f: Frame): void {
|
||||
if (firstFrameSeen || isLocal(session)) return;
|
||||
firstFrameSeen = true;
|
||||
const held = Date.now() - handoffOpenedAt;
|
||||
const config = configFromFrame(f);
|
||||
const type = gameTypeLabel(presetOf(config, f.players.length, f.days), f.mode);
|
||||
window.setTimeout(
|
||||
() => {
|
||||
closeHandoff();
|
||||
flashAnnounce(
|
||||
`The game has begun — ${type} · ${f.players.length} players · Day ${f.day}, Stage ${f.stage}`,
|
||||
);
|
||||
},
|
||||
Math.max(0, HANDOFF_BEAT_MS - held),
|
||||
);
|
||||
}
|
||||
|
||||
/** Toggles the two mutually-exclusive top-level screens `play.html` defines — `#lobby` (Phase 4)
|
||||
* and `#gameui` (the board, whether local or remote). Both start `hidden` in the markup so neither
|
||||
* ever flashes before `start()` decides which one this load actually needs. */
|
||||
@@ -338,12 +600,14 @@ function showScreen(which: 'lobby' | 'gameui'): void {
|
||||
* so it is always written back here before anything else happens.
|
||||
*/
|
||||
function beginRemote(ready: LobbyReady): void {
|
||||
localStorage.setItem(REMOTE_KEY, JSON.stringify(ready));
|
||||
saveRemote({ token: ready.token, gameId: ready.gameId, gameCode: ready.gameCode, seat: ready.seat, stage: 'game' });
|
||||
gameCode = ready.gameCode;
|
||||
showScreen('gameui');
|
||||
// Nothing can be drawn until the first push arrives, and a page showing nothing at all is
|
||||
// indistinguishable from a page that is broken — which is exactly what a dead session used to
|
||||
// look like, forever.
|
||||
$('presence').textContent = '… connecting to the game';
|
||||
// look like, forever. This is its own state now rather than a borrowed line in the DISCONNECT
|
||||
// banner (`#presence`), and it holds a beat so the game visibly begins.
|
||||
openHandoff();
|
||||
session = createRemoteSession(ready.token, ready.seat, abandonRemote);
|
||||
applyCapabilities();
|
||||
// A LocalSession has data the instant it is constructed; a RemoteSession does not — its first
|
||||
@@ -366,16 +630,19 @@ function beginRemote(ready: LobbyReady): void {
|
||||
* Forgetting the token is what makes the next load land in the lobby instead of repeating it.
|
||||
*/
|
||||
function abandonRemote(): void {
|
||||
localStorage.removeItem(REMOTE_KEY);
|
||||
// That one game is gone; any OTHER game this browser is in is untouched.
|
||||
const store = readStore();
|
||||
if (store.last !== null) forgetRemote(store.last);
|
||||
closeHandoff();
|
||||
showScreen('lobby');
|
||||
$('presence').textContent = '';
|
||||
runLobby(beginRemote);
|
||||
const note = document.getElementById('lb-create-err');
|
||||
if (note) {
|
||||
note.textContent =
|
||||
'That game is no longer on this server — it was either ended by whoever runs it, or the ' +
|
||||
'service was updated, which does not carry games in progress across. Create or join a new one.';
|
||||
}
|
||||
runLobby(lobbyHandlers);
|
||||
// The lobby's own notice slot, not the create form's error line: the player may well have been a
|
||||
// joiner, and with the two doors that line is behind a panel they are not looking at.
|
||||
notice(
|
||||
'That game is no longer on this server — it was either ended by whoever runs it, or the ' +
|
||||
'service was updated, which does not carry games in progress across. Create or join a new one.',
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -388,21 +655,44 @@ function abandonRemote(): void {
|
||||
function start(): void {
|
||||
const params = new URLSearchParams(location.search);
|
||||
|
||||
/**
|
||||
* ASKING FOR THE LOBBY BEATS RESUMING A GAME.
|
||||
*
|
||||
* The splash's "Play multiplayer" door and an invite link both land here with `?lobby`, and both
|
||||
* mean "I want to pick a game" — but a remembered session used to be checked first, so anyone
|
||||
* already in a game was dropped straight back into it and could never reach the lobby from the
|
||||
* door at all. A BARE load still resumes, which is the common case and the one D11 is about.
|
||||
*/
|
||||
const invited = params.get('code');
|
||||
if (params.get('lobby') !== null || invited !== null) {
|
||||
showScreen('lobby');
|
||||
if (invited !== null && invited !== '') prefillCode(invited);
|
||||
runLobby(lobbyHandlers);
|
||||
return;
|
||||
}
|
||||
|
||||
// Entered without checking it still exists — deliberately. Verifying up front would mean an
|
||||
// await before anything renders on the common path, where the game IS still there; instead the
|
||||
// session reports a dead game through `abandonRemote`, which lands in the lobby.
|
||||
const remembered = loadRemote();
|
||||
if (remembered) {
|
||||
beginRemote(remembered);
|
||||
if (remembered && remembered.stage === 'game' && remembered.seat !== undefined) {
|
||||
beginRemote({ ...remembered, seat: remembered.seat });
|
||||
return;
|
||||
}
|
||||
|
||||
// The splash's "Play multiplayer" door (index.html) lands here — straight into the lobby,
|
||||
// rather than dealing a solitaire game first and leaving the player to find the in-game
|
||||
// Multiplayer button themselves.
|
||||
if (params.get('lobby') !== null) {
|
||||
/**
|
||||
* A SEAT TAKEN BUT NOT YET PLAYING — this browser reloaded while the lobby was still seating.
|
||||
*
|
||||
* The lobby stream answers all three cases from here without another route: it pushes the seating
|
||||
* screen if the lobby is still open, and its `onerror` probe finds either a game that started
|
||||
* while we were away (straight in) or a lobby that is gone (back to the doors, with a reason).
|
||||
*/
|
||||
if (remembered) {
|
||||
showScreen('lobby');
|
||||
runLobby(beginRemote);
|
||||
runLobby(lobbyHandlers, {
|
||||
token: remembered.token,
|
||||
gameId: remembered.gameId,
|
||||
gameCode: remembered.gameCode,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -410,7 +700,7 @@ function start(): void {
|
||||
const requested = params.get('seed');
|
||||
// A seed in the URL makes a game shareable and reproducible: same link, same deal.
|
||||
const seed = requested !== null ? Number(requested) || 1 : Math.floor(Math.random() * 1e9);
|
||||
const local = createLocalSession(seed, gameOptionsFromUrl(params));
|
||||
const local = createLocalSession(seed, solitaireDefaults(gameOptionsFromUrl(params)));
|
||||
session = local;
|
||||
|
||||
// A saved game carries its OWN rules and re-deals itself under them, whatever the URL says — see
|
||||
@@ -445,6 +735,8 @@ function applyCapabilities(): void {
|
||||
// Creating or joining ANOTHER multiplayer game from inside a running one is not a thing this
|
||||
// page offers — same reasoning as `newgame`, and the same capability answers both.
|
||||
hide('multiplayer', c.newGame);
|
||||
// The mirror of the three above: leaving a game is the one control that only a REMOTE session has.
|
||||
hide('leavegame', !c.newGame);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -489,16 +781,67 @@ function renderSeatingChain(f: Frame): void {
|
||||
* collapses the banner rather than leaving a reassuring "all connected" line nobody needs to read.
|
||||
*/
|
||||
function renderPresence(f: Frame): void {
|
||||
const away = session
|
||||
.presence()
|
||||
.filter((p) => !p.connected)
|
||||
.map((p) => f.players.find((pl) => pl.index === p.seat)?.name ?? `Seat ${seatLabel(p.seat)}`);
|
||||
$('presence').textContent = away.length === 0 ? '' : `⚠ waiting on ${away.join(', ')} — disconnected`;
|
||||
const name = (seat: PlayerIndex): string =>
|
||||
f.players.find((pl) => pl.index === seat)?.name ?? `Seat ${seatLabel(seat)}`;
|
||||
const presence = session.presence();
|
||||
/**
|
||||
* TWO DIFFERENT ABSENCES, and they call for two different things from the table.
|
||||
*
|
||||
* A seat the server has never heard from has not opened the game yet — somebody needs to send them
|
||||
* the link. A seat that WAS here and dropped will probably be back. The server reports both from
|
||||
* `/api/stream`'s connect push (2026-08-23); before that a client learnt of a seat only when it
|
||||
* disconnected AFTER you connected, so a table where two people had not shown up yet said nothing
|
||||
* at all.
|
||||
*/
|
||||
const dropped = presence.filter((p) => p.seen && !p.connected).map((p) => name(p.seat));
|
||||
const never = presence.filter((p) => !p.seen).map((p) => name(p.seat));
|
||||
const parts: string[] = [];
|
||||
if (dropped.length > 0) parts.push(`${dropped.join(', ')} — disconnected`);
|
||||
if (never.length > 0) parts.push(`${never.join(', ')} — not here yet`);
|
||||
$('presence').textContent = parts.length === 0 ? '' : `⚠ waiting on ${parts.join(' · ')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* WHICH GAME THIS IS, in the header: its code and its type.
|
||||
*
|
||||
* Neither used to be anywhere on the board. The code ended at the lobby door, and the type was never
|
||||
* on the Frame at all — so a player could read what a load paid but not whether they were in a Co-op
|
||||
* game or a Cutthroat one, which is the difference between helping the table and racing it.
|
||||
*/
|
||||
function renderGameIdentity(f: Frame): void {
|
||||
const codeEl = document.getElementById('gamecode');
|
||||
if (codeEl) codeEl.textContent = gameCode === '' ? '' : `game ${gameCode}`;
|
||||
|
||||
const el = document.getElementById('gametype');
|
||||
if (!el) return;
|
||||
const config = configFromFrame(f);
|
||||
const players = f.players.length;
|
||||
const type = presetOf(config, players, f.days);
|
||||
const near = closestPreset(config, players, f.days);
|
||||
el.textContent = gameTypeLabel(type, f.mode);
|
||||
el.title =
|
||||
type === 'custom'
|
||||
? `A custom game, scored as ${preset(near.name).scoring === 'coop' ? 'Co-op' : 'Competitive'}. ` +
|
||||
`${near.differing.length} ${near.differing.length === 1 ? 'setting differs' : 'settings differ'} ` +
|
||||
`from ${preset(near.name).label}.\n\n${rulesSummary(f)}`
|
||||
: `${preset(type).blurb}\n\n${rulesSummary(f)}`;
|
||||
}
|
||||
|
||||
/** The victory conditions in force, spelled out for the header's tooltip. */
|
||||
function rulesSummary(f: Frame): string {
|
||||
const off = (n: number): string => (n === 0 ? 'off' : String(n));
|
||||
return (
|
||||
`Days: ${f.days}\n` +
|
||||
`Combined Revenue floor: ${off(f.minCombinedRevenue)}\n` +
|
||||
`Collisions in one Day that end the game: ${off(f.maxCollisionsPerDay)}\n` +
|
||||
`Collisions in the whole game that end it: ${off(f.maxCollisionsTotal)}`
|
||||
);
|
||||
}
|
||||
|
||||
function render(): void {
|
||||
const f = session.view();
|
||||
const menu = session.menu();
|
||||
noteFirstFrame(f);
|
||||
|
||||
// Which squares the selected card or track piece may go on. Highlighting them is what turns the
|
||||
// coordinate list into a board: you pick the thing, then click where it goes.
|
||||
@@ -535,6 +878,7 @@ function render(): void {
|
||||
// The seed is never sent to a remote client at all (it would leak every future shuffle and roll,
|
||||
// `multiplayer.md` §7) — `RemoteSession` has no `.seed()` because there is nothing to return.
|
||||
$('seed').textContent = isLocal(session) ? String(session.seed()) : `Seat ${seatLabel(session.seat())}`;
|
||||
renderGameIdentity(f);
|
||||
renderHouseRules(f.houseRules);
|
||||
|
||||
// -- division
|
||||
@@ -809,10 +1153,20 @@ function render(): void {
|
||||
|
||||
// -- log
|
||||
const log = $('log');
|
||||
log.innerHTML = session.lines()
|
||||
.slice(-60)
|
||||
.map((l) => `<div class="line t-${l.tone}">${esc(l.text)}</div>`)
|
||||
.join('');
|
||||
const allLines = session.lines();
|
||||
const shownLines = allLines.slice(-60);
|
||||
/**
|
||||
* WHERE THE GAME BEGAN. In a multiplayer game the bots move the instant the host presses Start, so
|
||||
* by the time the board paints the log already has several turns in it and nothing says which of
|
||||
* them are yours to have missed. Only drawn while the whole log is on screen: past sixty lines the
|
||||
* top of the panel is no longer the start of the game, and a marker claiming otherwise would lie.
|
||||
*/
|
||||
const startMarker =
|
||||
!isLocal(session) && allLines.length === shownLines.length
|
||||
? '<div class="line t-phase">— the game began —</div>'
|
||||
: '';
|
||||
log.innerHTML =
|
||||
startMarker + shownLines.map((l) => `<div class="line t-${l.tone}">${esc(l.text)}</div>`).join('');
|
||||
log.scrollTop = log.scrollHeight;
|
||||
|
||||
/**
|
||||
@@ -837,14 +1191,7 @@ function render(): void {
|
||||
* out loud rather than left in the log. Drained, so it shows once and does not re-fire on a redraw.
|
||||
*/
|
||||
const announcement = session.takeAnnouncement();
|
||||
if (announcement) {
|
||||
const el = $('announce');
|
||||
el.textContent = announcement;
|
||||
el.className = 'shown';
|
||||
window.setTimeout(() => {
|
||||
if (el.textContent === announcement) el.className = '';
|
||||
}, 4200);
|
||||
}
|
||||
if (announcement) flashAnnounce(announcement);
|
||||
|
||||
renderDistrict(f);
|
||||
renderActions(menu, f, justSet);
|
||||
@@ -1074,13 +1421,13 @@ function renderActions(
|
||||
*/
|
||||
const scheduledNote =
|
||||
justSet !== null && f.timetable[justSet] != null
|
||||
? `<div class="scheduled" data-tip="§7 — the Stage is rolled on 1D12 when the card is played; if that Stage is taken the train works down the column to the next free one. From now on it runs at this time every Day.">` +
|
||||
? `<div class="scheduled" data-tip="The Stage is rolled on 1D12 when the card is played; if that Stage is taken the train works down the column to the next free one. From now on it runs at this time every Day.">` +
|
||||
`Train ${f.timetable[justSet]} is scheduled to depart at Stage ${justSet + 1} — see the Timetable</div>`
|
||||
: '';
|
||||
|
||||
const movesNote =
|
||||
f.movesLeft !== null
|
||||
? `<div class="moves${f.movesLeft === 0 ? ' spent' : ''}" data-tip="§6.1 — six Moves a turn. A Move runs any distance in one direction; changing direction costs another, which is why a run-around has to be planned inside the count.">` +
|
||||
? `<div class="moves${f.movesLeft === 0 ? ' spent' : ''}" data-tip="Six Moves a turn. A Move runs any distance in one direction; changing direction costs another, which is why a run-around has to be planned inside the count.">` +
|
||||
`${f.movesLeft} of ${MOVES_PER_LOCAL_OPS} Moves left</div>`
|
||||
: '';
|
||||
|
||||
@@ -1163,7 +1510,7 @@ function renderActions(
|
||||
? `Click a car in the Division Yard below to add it — ${addable} kind${addable === 1 ? '' : 's'} it may take are highlighted there.`
|
||||
: menu.makeUp.pass !== null
|
||||
? 'The Division Yard is bare, so there is nothing to add. Send the train out as it stands.'
|
||||
: 'Nothing in the Division Yard may join this train, and §7 does not allow passing while the yard holds cars.') +
|
||||
: 'Nothing in the Division Yard may join this train, and passing is not allowed while the yard holds cars.') +
|
||||
`</div>` +
|
||||
/**
|
||||
* WHICH ORDER TO ADD THEM IN, when the order is what decides whether the train can work.
|
||||
@@ -1177,7 +1524,7 @@ function renderActions(
|
||||
? `<div class="makeup-advice ${menu.makeUp.advice.tone}">${esc(menu.makeUp.advice.text)}</div>`
|
||||
: '') +
|
||||
(menu.makeUp.pass !== null
|
||||
? `<button class="act" data-i="${menu.makeUp.pass}" data-tip="§8.2 — a train may depart with FEWER cars than its card lists, but never with the wrong ones. This sends it out as it stands.">no more cars — send it out</button>`
|
||||
? `<button class="act" data-i="${menu.makeUp.pass}" data-tip="A train may depart with FEWER cars than its card lists, but never with the wrong ones. This sends it out as it stands.">no more cars — send it out</button>`
|
||||
: '') +
|
||||
`</div>`;
|
||||
}
|
||||
@@ -1237,11 +1584,11 @@ function renderActions(
|
||||
*/
|
||||
const stuck = f.handDiscardable.length > 0 && f.handDiscardable.every((d) => !d);
|
||||
const tip = stuck
|
||||
? '§6.2 — you may not end a turn holding more than three cards, and a TRAIN CARD IS NEVER ' +
|
||||
? 'You may not end a turn holding more than three cards, and a TRAIN CARD IS NEVER ' +
|
||||
'DISCARDED. Every card you hold is a train, so the only way on is to play one onto the ' +
|
||||
'timetable. A train may be held for as many Stages and Days as you like; it just cannot be ' +
|
||||
'thrown away.'
|
||||
: '§6.2 — you may not end a turn holding more than three cards (four with a Red Flag). Play ' +
|
||||
: 'You may not end a turn holding more than three cards (four with a Red Flag). Play ' +
|
||||
'one onto the board, or discard one face-up to a Department slot. A train card is never ' +
|
||||
'discardable and can only be played.';
|
||||
html +=
|
||||
@@ -1356,7 +1703,35 @@ if (multiplayerBtn) {
|
||||
const started = f.status === 'active' && (f.day > 1 || f.stage > 1);
|
||||
if (started && !confirm(`Leave this game (seed ${session.seed()}, Day ${f.day}) for multiplayer?`)) return;
|
||||
showScreen('lobby');
|
||||
runLobby(beginRemote);
|
||||
runLobby(lobbyHandlers);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* LEAVE A RUNNING GAME — back to the lobby, seat and token kept.
|
||||
*
|
||||
* Reported by Jesse 2026-08-23: a player who has to go had no way out at all. The page re-entered
|
||||
* the same game on every load, and the only thing that ever let go of a session was the game itself
|
||||
* being destroyed. Leaving does NOT give up the seat: `lobby-and-sessions.md` §5 keeps it and the
|
||||
* table waits, which is the design — nothing moves on an absent player's behalf. The token is kept
|
||||
* too, so the game can be re-entered from "Games you are in"; forgetting it is a separate, deliberate
|
||||
* act on that list, because the token is the only proof of who you are.
|
||||
*/
|
||||
const leaveBtn = document.getElementById('leavegame');
|
||||
if (leaveBtn) {
|
||||
leaveBtn.onclick = () => {
|
||||
if (isLocal(session)) return;
|
||||
const f = session.view();
|
||||
const code = gameCode === '' ? 'this game' : gameCode;
|
||||
if (!confirm(`Leave ${code} (Day ${f.day}, Stage ${f.stage})? Your seat is kept and the game waits for you.`)) return;
|
||||
// Stop listening before leaving the screen, so the table sees the seat go quiet rather than
|
||||
// being told somebody is present who is not.
|
||||
session.close?.();
|
||||
closeHandoff();
|
||||
showScreen('lobby');
|
||||
$('presence').textContent = '';
|
||||
runLobby(lobbyHandlers);
|
||||
notice(`You left ${code}. It is still yours — rejoin it under "Games you are in" whenever you like.`);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1364,38 +1739,99 @@ const newBtn = document.getElementById('newgame');
|
||||
const dlg = document.getElementById('newgamedlg') as HTMLDialogElement | null;
|
||||
if (newBtn && dlg) {
|
||||
const field = <T extends HTMLElement>(id: string): T => document.getElementById(id) as T;
|
||||
type Mode = 'solitaire' | 'competitive' | 'coop';
|
||||
const ngForm = settingsForm('ng-');
|
||||
|
||||
/**
|
||||
* PICKING A TYPE JUST SETS THE FIELDS BELOW TO THAT TYPE'S DEFAULTS (Jesse's design, 2026-08-20) —
|
||||
* every number stays editable afterward, so "Competitive" isn't a fixed ruleset, it's a starting
|
||||
* point. `players = 4` for Competitive/Co-op is a nominal stand-in: there's no lobby yet to ask who
|
||||
* is actually seated (Phase 4), so this is a suggestion a real seat count will replace.
|
||||
* THE SAME FIVE GAME TYPES THE LOBBY OFFERS, and the same shared rules block under them.
|
||||
*
|
||||
* Only Solitaire can be dealt today — Deal disables itself for the other two, with a note, rather
|
||||
* than pretending a click would do something (`RemoteSession` is Phase 2).
|
||||
* The dialog used to carry its own copy of the questions and its own idea of the defaults, which
|
||||
* is how it ended up with "where an Extra may start" that the lobby did not have and none of the
|
||||
* three optional rules that it did. Both screens now read `presets.ts` and drive their block
|
||||
* through `settings-form.ts`; only Solitaire can actually be DEALT here, so the three multiplayer
|
||||
* types are shown disabled rather than hidden — what this screen offers and what the lobby offers
|
||||
* should read as one list, not two.
|
||||
*/
|
||||
function applyModePreset(mode: Mode): void {
|
||||
const days = 5;
|
||||
const players = mode === 'solitaire' ? 1 : 4;
|
||||
field<HTMLInputElement>('ng-days').value = String(days);
|
||||
field<HTMLInputElement>('ng-minrev').value = String(collectiveRevenueFloor(players, days));
|
||||
field<HTMLInputElement>('ng-colday').value = String(DEFAULT_MAX_COLLISIONS_PER_DAY);
|
||||
field<HTMLInputElement>('ng-coltotal').value = String(DEFAULT_MAX_COLLISIONS_TOTAL);
|
||||
let ngBase: PresetName = 'solitaire';
|
||||
let ngType: GameType = 'solitaire';
|
||||
/** As in the lobby: the floor is derived from the length until the player sets one themselves. */
|
||||
let ngFloorTyped = false;
|
||||
|
||||
// No valid target for these cards in Solitaire or Co-op — forced off, not merely defaulted off.
|
||||
const pvp = field<HTMLInputElement>('ng-pvp');
|
||||
pvp.checked = mode === 'competitive';
|
||||
pvp.disabled = mode !== 'competitive';
|
||||
const ngDays = (): number => {
|
||||
const raw = Number(field<HTMLInputElement>('ng-days').value);
|
||||
return Number.isFinite(raw) && raw >= 1 ? Math.round(raw) : 5;
|
||||
};
|
||||
|
||||
field<HTMLButtonElement>('ng-deal').disabled = mode !== 'solitaire';
|
||||
field<HTMLElement>('ng-multiplayer-note').style.visibility = mode === 'solitaire' ? 'hidden' : 'visible';
|
||||
const ngTypeRadios = (): HTMLInputElement[] =>
|
||||
Array.from(dlg.querySelectorAll<HTMLInputElement>('input[name="ng-type"]'));
|
||||
|
||||
function ngRefresh(): void {
|
||||
const differing = ngForm.mark(ngBase, 1, ngDays());
|
||||
if (differing.length > 0) ngType = 'custom';
|
||||
else if (ngType === 'custom') ngType = ngBase;
|
||||
for (const r of ngTypeRadios()) r.checked = r.value === ngType;
|
||||
const note = field<HTMLElement>('ng-type-note');
|
||||
note.textContent =
|
||||
ngType === 'custom'
|
||||
? `${gameTypeLabel('custom', preset(ngBase).scoring)} · ${differing.length} ` +
|
||||
`${differing.length === 1 ? 'setting differs' : 'settings differ'} from ${preset(ngBase).label}.`
|
||||
: preset(ngType as PresetName).blurb;
|
||||
}
|
||||
|
||||
for (const input of dlg.querySelectorAll<HTMLInputElement>('input[name="ng-mode"]')) {
|
||||
input.onchange = () => applyModePreset(input.value as Mode);
|
||||
function ngSelectPreset(name: PresetName): void {
|
||||
ngBase = name;
|
||||
ngType = name;
|
||||
ngFloorTyped = false;
|
||||
const values = presetSettings(name, 1, ngDays());
|
||||
ngForm.write(values, values);
|
||||
ngRefresh();
|
||||
}
|
||||
|
||||
for (const r of ngTypeRadios()) {
|
||||
// Nothing here can deal a multiplayer game: a `LocalSession` runs the engine in this browser and
|
||||
// a table needs a server. The lobby is the door, and the row says so rather than just refusing
|
||||
// the click (Jesse, 2026-08-23 — a disabled radio that looks enabled reads as a broken one).
|
||||
if (r.value !== 'solitaire' && r.value !== 'custom') {
|
||||
r.disabled = true;
|
||||
const row = r.closest('label');
|
||||
if (row && !row.querySelector('.lb-why')) {
|
||||
row.classList.add('disabled');
|
||||
const note = document.createElement('span');
|
||||
note.className = 'lb-why';
|
||||
note.textContent = ' — use the Multiplayer button; a table needs a server';
|
||||
row.querySelector('span')?.appendChild(note);
|
||||
}
|
||||
}
|
||||
r.onchange = () => {
|
||||
if (!r.checked) return;
|
||||
if (r.value === 'custom') {
|
||||
ngType = 'custom';
|
||||
ngRefresh();
|
||||
return;
|
||||
}
|
||||
ngSelectPreset(r.value as PresetName);
|
||||
};
|
||||
}
|
||||
|
||||
ngForm.onEdit((key) => {
|
||||
if (key === 'minCombinedRevenue') ngFloorTyped = true;
|
||||
ngType = 'custom';
|
||||
ngRefresh();
|
||||
});
|
||||
|
||||
// Days is a parameter, not a rule: it re-derives the floor and never makes a game Custom by itself.
|
||||
field<HTMLInputElement>('ng-days').oninput = () => {
|
||||
if (!ngFloorTyped) {
|
||||
const values = ngForm.read();
|
||||
const want = presetSettings(ngBase, 1, ngDays());
|
||||
ngForm.write({ ...values, minCombinedRevenue: want.minCombinedRevenue }, want);
|
||||
}
|
||||
ngRefresh();
|
||||
};
|
||||
|
||||
// "Everyone moves one chair left" has no meaning at a table of one — disabled with the rest of the
|
||||
// block still visible, so the two screens read the same.
|
||||
ngForm.setEmployeeRotationAvailable(false);
|
||||
|
||||
/**
|
||||
* ASK FOR ALL OF IT, rather than documenting URL parameters in the title bar.
|
||||
*
|
||||
@@ -1405,8 +1841,9 @@ if (newBtn && dlg) {
|
||||
*
|
||||
* The dialog OPENS ON THE RULES IN PLAY rather than on the defaults: dealing a second game to
|
||||
* compare against the first is the common case, and re-entering settings each time is how a
|
||||
* comparison silently stops comparing. Mode always reopens on Solitaire — it's the only one a
|
||||
* previous session could actually have been, since Deal is disabled for the other two.
|
||||
* comparison silently stops comparing. Which TYPE that is comes out of the comparison — a game
|
||||
* dealt at the Solitaire defaults reopens on Solitaire, and one that was tuned reopens on Custom
|
||||
* with every changed field marked.
|
||||
*/
|
||||
newBtn.onclick = () => {
|
||||
// The button itself is hidden for a session that cannot deal (`applyCapabilities`), but the
|
||||
@@ -1420,26 +1857,15 @@ if (newBtn && dlg) {
|
||||
const started = f.status === 'active' && (day > 1 || f.stage > 1);
|
||||
if (started && !confirm(`Forget this game (seed ${local.seed()}, Day ${day}) and deal a new one?`)) return;
|
||||
|
||||
const current = f.houseRules;
|
||||
field<HTMLInputElement>('ng-seed').value = '';
|
||||
for (const input of dlg.querySelectorAll<HTMLInputElement>('input[name="ng-mode"]')) {
|
||||
input.checked = input.value === 'solitaire';
|
||||
}
|
||||
applyModePreset('solitaire');
|
||||
for (const input of dlg.querySelectorAll<HTMLInputElement>('input[name="ng-hand"]')) {
|
||||
input.checked = input.value === current.startingHand;
|
||||
}
|
||||
for (const input of dlg.querySelectorAll<HTMLInputElement>('input[name="ng-extra"]')) {
|
||||
input.checked = input.value === current.extraStart;
|
||||
}
|
||||
field<HTMLInputElement>('ng-passenger').value = String(current.revenue.passengerPerCoach);
|
||||
field<HTMLInputElement>('ng-freight').value = String(current.revenue.freightPerLoad);
|
||||
field<HTMLInputElement>('ng-transit').value = String(current.revenue.trainPerTransit);
|
||||
// Overwrite the preset with the actual rules in play — solitaire is the only real session today.
|
||||
field<HTMLInputElement>('ng-days').value = String(f.days);
|
||||
field<HTMLInputElement>('ng-minrev').value = String(f.minCombinedRevenue);
|
||||
field<HTMLInputElement>('ng-colday').value = String(f.maxCollisionsPerDay);
|
||||
field<HTMLInputElement>('ng-coltotal').value = String(f.maxCollisionsTotal);
|
||||
ngBase = 'solitaire';
|
||||
ngType = 'solitaire';
|
||||
ngFloorTyped = false;
|
||||
// The rules actually in play, then the comparison decides what to call them.
|
||||
ngForm.write(settingsOf(configFromFrame(f)), presetSettings('solitaire', 1, f.days));
|
||||
ngForm.setEmployeeRotationAvailable(false);
|
||||
ngRefresh();
|
||||
dlg.showModal();
|
||||
};
|
||||
|
||||
@@ -1449,8 +1875,6 @@ if (newBtn && dlg) {
|
||||
*
|
||||
* The answers go into the URL and the page navigates, which is the same path `?seed=` already
|
||||
* took: `start()` reads them back, so there is exactly one place that turns a URL into a game.
|
||||
* Deal is disabled whenever the mode radio isn't Solitaire, so this never actually runs for the
|
||||
* other two — nothing here needs to branch on mode.
|
||||
*/
|
||||
dlg.addEventListener('close', () => {
|
||||
if (dlg.returnValue !== 'deal') return;
|
||||
@@ -1459,24 +1883,30 @@ if (newBtn && dlg) {
|
||||
// A seed the browser cannot parse is not a reason to refuse to deal — blank and unparseable
|
||||
// both mean "surprise me", which is what leaving the box alone plainly asks for.
|
||||
const seed = asked === '' || !Number.isFinite(Number(asked)) ? '' : String(Math.trunc(Number(asked)));
|
||||
const picked = dlg.querySelector<HTMLInputElement>('input[name="ng-hand"]:checked')?.value;
|
||||
const extra = dlg.querySelector<HTMLInputElement>('input[name="ng-extra"]:checked')?.value;
|
||||
const settings = ngForm.read();
|
||||
const rules = houseRules({
|
||||
houseRules: {
|
||||
...(STARTING_HAND_LABELS.some((o) => o.value === picked) ? { startingHand: picked as StartingHand } : {}),
|
||||
...(EXTRA_START_LABELS.some((o) => o.value === extra) ? { extraStart: extra as ExtraStartRule } : {}),
|
||||
startingHand: settings.startingHand,
|
||||
extraStart: settings.extraStart,
|
||||
revenue: {
|
||||
passengerPerCoach: Number(field<HTMLInputElement>('ng-passenger').value),
|
||||
freightPerLoad: Number(field<HTMLInputElement>('ng-freight').value),
|
||||
trainPerTransit: Number(field<HTMLInputElement>('ng-transit').value),
|
||||
passengerPerCoach: settings.passengerPerCoach,
|
||||
freightPerLoad: settings.freightPerLoad,
|
||||
trainPerTransit: settings.trainPerTransit,
|
||||
},
|
||||
},
|
||||
});
|
||||
const victory: NewGameOptions = {
|
||||
days: Math.max(1, Math.round(Number(field<HTMLInputElement>('ng-days').value)) || 5),
|
||||
minCombinedRevenue: Math.max(0, Math.round(Number(field<HTMLInputElement>('ng-minrev').value)) || 0),
|
||||
maxCollisionsPerDay: Math.max(0, Math.round(Number(field<HTMLInputElement>('ng-colday').value)) || 0),
|
||||
maxCollisionsTotal: Math.max(0, Math.round(Number(field<HTMLInputElement>('ng-coltotal').value)) || 0),
|
||||
days: Math.max(1, ngDays()),
|
||||
minCombinedRevenue: settings.minCombinedRevenue,
|
||||
maxCollisionsPerDay: settings.maxCollisionsPerDay,
|
||||
maxCollisionsTotal: settings.maxCollisionsTotal,
|
||||
optionalRules: {
|
||||
reducedVisibility: settings.reducedVisibility,
|
||||
// Never on at a table of one, whatever the box says — the control is disabled for the same
|
||||
// reason, and this is the half that reaches the engine.
|
||||
employeeRotation: false,
|
||||
emergencyToolbox: settings.emergencyToolbox,
|
||||
},
|
||||
};
|
||||
|
||||
clearSave();
|
||||
|
||||
+2
-2
@@ -34,7 +34,7 @@ export function handHtml(f: Frame, canPlay: (boolean | null)[] = []): string {
|
||||
// §6.2 (Gitea#6) — say so on the card itself. A player who cannot discard a train needs to read
|
||||
// that on the train, not deduce it from a button that is not there.
|
||||
const held = 'You may hold this for as many Stages and Days as you like — but a train card is ' +
|
||||
'never discarded (§6.2). The only way it leaves your hand is onto the timetable.';
|
||||
'never discarded. The only way it leaves your hand is onto the timetable.';
|
||||
return f.hand.length
|
||||
? f.hand
|
||||
.map((h, i) => {
|
||||
@@ -291,7 +291,7 @@ export function facilitiesHtml(f: Frame): string {
|
||||
: '') +
|
||||
`<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).'
|
||||
? '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.'
|
||||
: 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.'
|
||||
|
||||
+470
-129
@@ -80,7 +80,22 @@ main{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;padding:14p
|
||||
@media(max-width:1100px){main{grid-template-columns:1fr}}
|
||||
section{background:var(--panel);border:1px solid var(--line);border-radius:7px;
|
||||
padding:10px 12px;margin-bottom:12px}
|
||||
#lobby{max-width:640px;margin:0 auto;padding:14px}
|
||||
#lobby{max-width:1040px;margin:0 auto;padding:14px}
|
||||
/* The create form is two short lists, not one long one: what game this is on the left, what its
|
||||
rules are on the right. Collapses to one column where there is no room for two. */
|
||||
.lb-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start}
|
||||
@media(max-width:860px){.lb-two{grid-template-columns:1fr;gap:0}}
|
||||
.lb-col{min-width:0}
|
||||
.lb-span{grid-column:1/-1;min-width:0}
|
||||
/* The rules in as many columns as the width allows — one in the New Game dialog, which is narrow. */
|
||||
.set-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:0 26px;align-items:start}
|
||||
.set-group{min-width:0;break-inside:avoid}
|
||||
.set-group h3:first-child{margin-top:4px}
|
||||
/* A DISABLED CHOICE HAS TO LOOK DISABLED. Reported by Jesse: Solitaire is not selectable in the
|
||||
lobby and nothing on it said so — a radio that silently refuses reads as a broken radio. */
|
||||
.ng-radio.disabled{opacity:.45;cursor:not-allowed}
|
||||
.ng-radio.disabled:hover{background:none}
|
||||
.lb-why{color:#e0b060;font-size:11px}
|
||||
#lobby h2{margin-top:0}
|
||||
#lobby h3{margin-bottom:2px}
|
||||
.lb-seat{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}
|
||||
@@ -227,6 +242,57 @@ h3.actions-hd{font-size:13px;text-transform:none;letter-spacing:.01em;color:#cfe
|
||||
ul.blocked{list-style:none;margin:0;padding:0;font-size:12px}
|
||||
ul.blocked li{padding:2px 0}
|
||||
.sev-warn{color:#e0b060}.sev-stop{color:#e58080}
|
||||
/* THE RULES BLOCK, shared by the lobby and the New Game dialog (`settings-form.ts`).
|
||||
`.changed` is the one signal that says "this game is not the type it claims" — amber, the palette's
|
||||
attention colour, never red: a changed rule is a choice, not an error. */
|
||||
.set-row{padding:3px 0}
|
||||
.set-row.changed{border-left:3px solid #e0b060;padding-left:9px;margin-left:-12px;
|
||||
background:rgba(224,176,96,.08);border-radius:0 4px 4px 0}
|
||||
.set-hint{display:block;font-size:11px;color:var(--dim);margin:2px 0 0}
|
||||
/* The line under the type radios when a game is no longer the type it started as. */
|
||||
.changed-note{color:#e0b060}
|
||||
.set-row.changed .set-hint{color:#e0b060}
|
||||
.set-row.unavailable{opacity:.5}
|
||||
.ng-gate{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:3px 0}
|
||||
.ng-gate input[type=checkbox]{flex:none}
|
||||
.gate-num{width:82px}
|
||||
.ng-gate input:disabled{opacity:.45}
|
||||
.lb-params{display:flex;gap:14px;flex-wrap:wrap;align-items:end;margin:8px 0}
|
||||
.lb-params .ng-num{flex:1 1 150px}
|
||||
/* An error a player must not scroll past. The grey `.dim` line this replaced was routinely missed —
|
||||
it looked like the note above it. Red is the palette's `.sev-stop`. */
|
||||
.lb-error{color:#e58080;font-size:14px;font-weight:600;margin:8px 0;padding:8px 11px;
|
||||
border-left:3px solid #e58080;background:rgba(229,128,128,.12);border-radius:0 5px 5px 0;
|
||||
empty-cells:hide}
|
||||
.lb-error:empty{display:none}
|
||||
.lb-warn{color:#e0b060;font-size:13px;margin:8px 0}
|
||||
.lb-doors{display:flex;gap:9px;margin:14px 0 12px}
|
||||
.lb-door{flex:1;background:#222831;color:var(--fg);border:1px solid var(--line);border-radius:7px;
|
||||
padding:9px 12px;cursor:pointer;font:inherit;font-size:14px}
|
||||
.lb-door:hover{border-color:#4d6fa8}
|
||||
.lb-door.active{background:#2f3a4b;border-color:#6f8fc8;color:#cfe0f5;font-weight:600}
|
||||
.lb-saved{display:flex;align-items:center;gap:10px}
|
||||
.lb-known-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
|
||||
.lb-known-row:last-child{border-bottom:none}
|
||||
.lb-known-row .code{font-weight:700;letter-spacing:.06em;color:#f2e6cf;flex:1}
|
||||
.lb-type{font-size:15px;font-weight:600;color:#cfe0f5;margin:2px 0 8px}
|
||||
.lb-preview-head{background:#1e242c;border:1px solid var(--line);border-radius:7px;padding:10px 12px;margin:0 0 10px}
|
||||
/* The read-only rule set — what a joining player reads before sitting down, and what the seating
|
||||
screen keeps showing afterwards. Generated, never a form: nobody but the host may change these. */
|
||||
.rules-list{border:1px solid var(--line);border-radius:7px;background:#171c23;padding:4px 12px;margin:0 0 12px}
|
||||
.rules-list dl{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:2px 14px;margin:8px 0}
|
||||
.rules-list dt{color:var(--dim);font-size:12px}
|
||||
.rules-list dd{margin:0;font-size:13px}
|
||||
.rules-list dd.changed{color:#e0b060}
|
||||
.rules-list h4{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin:10px 0 0}
|
||||
/* THE HANDOFF. Between the host pressing Start and the first Frame arriving there is nothing to
|
||||
draw — and a blank board is what a broken game looks like too. */
|
||||
#handoff{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
|
||||
background:rgba(18,21,26,.94);text-align:center;padding:20px}
|
||||
#handoff.shown{display:flex}
|
||||
#handoff .hand-inner{max-width:460px}
|
||||
#handoff h2{font-size:15px;text-transform:none;letter-spacing:.01em;color:#cfe0f5}
|
||||
#handoff .hand-note{color:var(--dim);font-size:13px;margin-top:8px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -234,102 +300,251 @@ ul.blocked li{padding:2px 0}
|
||||
<!-- THE LOBBY (Phase 4) — shown instead of the game UI whenever there is no game yet to play: no
|
||||
stored session token, or a token whose game hasn't started. `lobby.ts` owns everything in here;
|
||||
`main.ts` only decides whether THIS div or `#gameui` below is the one currently visible.
|
||||
`#newgamedlg` at the very end of the body is solitaire-only and untouched by any of this. -->
|
||||
`#newgamedlg` at the very end of the body is solitaire-only, and asks the same questions through
|
||||
the same shared module (`settings-form.ts`) — the two blocks are generated from one template. -->
|
||||
<div id="lobby" hidden>
|
||||
<header><b><a href="./index.html" class="home">Station Master</a></b> — <span class="dim">Multiplayer</span></header>
|
||||
|
||||
<!-- Whatever brought the player here when it was not their own click: a game that was ended under
|
||||
them, or a lobby that closed. Never a field-level error — those sit with their fields. -->
|
||||
<p class="lb-error" id="lb-notice" role="alert" hidden></p>
|
||||
|
||||
<section id="lb-secret-section">
|
||||
<h2>Join secret</h2>
|
||||
<p class="ng-note">Whoever is running this server gave you a secret out of band (a chat message, not a public page). It is kept in this browser only, never shown back, and sent with every lobby request.</p>
|
||||
<label class="ng-num"><span>Join secret</span><input id="lb-secret" type="password" autocomplete="off"></label>
|
||||
<!-- Saved: one line, not a password field asking to be filled in again. `lobby.ts` swaps these
|
||||
two, and re-opens the ask automatically when the server answers 403. -->
|
||||
<div id="lb-secret-saved" class="lb-saved" hidden>
|
||||
<span class="dim">Join secret · saved in this browser</span>
|
||||
<button id="lb-secret-change" class="ghost" type="button">Change</button>
|
||||
</div>
|
||||
<div id="lb-secret-ask">
|
||||
<p class="ng-note">Whoever is running this server gave you a secret out of band (a chat message, not a public page). It is kept in this browser only, never shown back, and sent with every lobby request.</p>
|
||||
<label class="ng-num"><span>Join secret</span><input id="lb-secret" type="password" autocomplete="off"></label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- EVERY GAME THIS BROWSER IS IN. `localStorage` used to hold exactly ONE multiplayer session, so
|
||||
joining a second silently overwrote the first and locked that seat out for good. Keyed by game
|
||||
now, and this is where they are picked between — and forgotten deliberately rather than by
|
||||
accident. -->
|
||||
<section id="lb-known" hidden>
|
||||
<h2>Games you are in</h2>
|
||||
<p class="ng-note">This browser holds a seat in these. Rejoining needs the token kept here, so
|
||||
<b>Forget</b> is the one thing that cannot be undone from this screen.</p>
|
||||
<div id="lb-known-list"></div>
|
||||
</section>
|
||||
|
||||
<section id="lb-choice-section">
|
||||
<h2>Create or join a game</h2>
|
||||
<label class="ng-num"><span>Your display name</span><input id="lb-name" type="text" autocomplete="off" maxlength="40"></label>
|
||||
|
||||
<h3>Create a new game</h3>
|
||||
<p class="ng-note">You become the host — you choose the mode and, once everyone's seated, start the game. 2 to 4 players.</p>
|
||||
<label class="ng-radio"><input type="radio" name="lb-mode" value="competitive" checked>
|
||||
<span><b>Competitive</b><br><span class="dim">Highest Revenue wins, unless the table misses the combined minimum — then everyone loses.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-mode" value="coop">
|
||||
<span><b>Co-op</b><br><span class="dim">Everyone's Revenue counts as one table score, against the same kind of combined minimum.</span></span></label>
|
||||
<label class="ng-num"><span>Players at the table</span>
|
||||
<select id="lb-players">
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
</select></label>
|
||||
<details id="lb-settings">
|
||||
<summary>Game settings</summary>
|
||||
<p class="ng-note">The same dials the solitaire New Game dialog has. Picking a mode or a table
|
||||
size sets them to that game's defaults; every one stays yours to change. They are fixed when
|
||||
the game is created and cannot be changed once it starts.</p>
|
||||
<!-- TWO DOORS, one panel at a time. Joining used to be a heading at the BOTTOM of the create
|
||||
form: someone sent a code had to scroll past fifteen fields they had no use for. -->
|
||||
<div class="lb-doors">
|
||||
<button id="lb-door-join" class="lb-door active" type="button">Join a game</button>
|
||||
<button id="lb-door-create" class="lb-door" type="button">Create a game</button>
|
||||
</div>
|
||||
|
||||
<h3>Seed</h3>
|
||||
<section id="lb-join-panel">
|
||||
<h2>Join a game</h2>
|
||||
<p class="ng-note">Ask whoever created the game for its code. You will see the whole rule set
|
||||
before you take a seat.</p>
|
||||
<label class="ng-num"><span>Game code</span><input id="lb-code" type="text" autocomplete="off" placeholder="RAIL-1234"></label>
|
||||
<button id="lb-look" type="button">Look up game</button>
|
||||
<p class="lb-error" id="lb-join-err" role="alert"></p>
|
||||
|
||||
<!-- Filled by `/api/lobby/preview` — the config, who is seated, and nothing else. The SEED is
|
||||
never in that response: it decides every shuffle in the game. -->
|
||||
<div id="lb-preview" hidden>
|
||||
<h3>Before you sit down</h3>
|
||||
<div class="lb-preview-head">
|
||||
<div class="lb-invite-code" id="lb-preview-code"></div>
|
||||
<div id="lb-preview-type" class="lb-type"></div>
|
||||
<div id="lb-preview-who" class="dim"></div>
|
||||
</div>
|
||||
<div id="lb-preview-rules" class="rules-list"></div>
|
||||
<button id="lb-join" type="button">Join this game</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="lb-create-panel" hidden>
|
||||
<h2>Create a new game</h2>
|
||||
<p class="ng-note">You become the host — you choose the game type and, once everyone is seated, start the game. 2 to 4 players.</p>
|
||||
|
||||
<!-- TWO COLUMNS WHERE THERE IS ROOM. One 640px-wide column made this form a very long scroll
|
||||
for what is really two short lists: what game this is, and what its rules are. -->
|
||||
<div class="lb-two">
|
||||
<div class="lb-col">
|
||||
|
||||
<!-- THE PARAMETERS, above the type. Changing one of these does NOT make the game Custom: the
|
||||
types are formulas in the table size and the length, so the Revenue floor re-derives and
|
||||
"Co-op, 3 players, 8 days" is still Co-op. -->
|
||||
<div class="lb-params">
|
||||
<label class="ng-num"><span>Seed</span>
|
||||
<input id="lb-seed" type="text" inputmode="numeric" autocomplete="off" placeholder="blank for a random seed"></label>
|
||||
<label class="ng-num"><span>Players at the table</span>
|
||||
<select id="lb-players">
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
</select></label>
|
||||
<label class="ng-num"><span>Days</span>
|
||||
<input id="lb-days" type="number" min="1" max="20" step="1" value="5"></label>
|
||||
</div>
|
||||
<p class="ng-note">The same seed and the same settings always deal the same railroad, so a game
|
||||
can be shared, compared or replayed. Leave it blank for a random one.</p>
|
||||
<input id="lb-seed" type="text" inputmode="numeric" autocomplete="off" placeholder="blank for a random seed">
|
||||
<!-- WITH THE TABLE SIZE IT IS ABOUT, not below the rules block — reported by Jesse, who found
|
||||
it separated from the control it explains by fifteen settings. -->
|
||||
<p class="ng-note">Every chair has to be taken before the game can start — by a person or by a
|
||||
bot. Pick the size of the table now; it cannot change once the game is created.</p>
|
||||
</div>
|
||||
|
||||
<div class="lb-col">
|
||||
<h3>Game type</h3>
|
||||
<div class="set-row" id="lb-type-row">
|
||||
<label class="ng-radio"><input type="radio" name="lb-type" value="solitaire">
|
||||
<span><b>Solitaire</b><br><span class="dim">One railroad, one player. The whole Division is yours to run.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-type" value="coop" checked>
|
||||
<span><b>Co-op</b><br><span class="dim">Everyone’s Revenue is one table score. You win together or lose together.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-type" value="competitive">
|
||||
<span><b>Competitive</b><br><span class="dim">Highest Revenue wins — unless the table misses its combined minimum, and then everyone loses.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-type" value="cutthroat">
|
||||
<span><b>Cutthroat</b><br><span class="dim">Highest Revenue wins, and nothing is shared — the only way everyone loses is three collisions in one Day.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-type" value="custom">
|
||||
<span><b>Custom</b><br><span class="dim">Whatever you set below. Selected for you the moment you change a rule; it is scored as the type you started from.</span></span></label>
|
||||
</div>
|
||||
|
||||
<p class="ng-note" id="lb-type-note"></p>
|
||||
</div>
|
||||
|
||||
<!-- FULL WIDTH WHEN IT OPENS. Reported by Jesse: opened inside the right-hand column it made a
|
||||
very long scroll with the left column standing empty beside it. It is a grid child of its
|
||||
own now, spanning both, and its five groups flow into as many columns as fit. -->
|
||||
<details id="lb-settings" class="lb-span">
|
||||
<summary>Game settings</summary>
|
||||
<p class="ng-note">Every rule the game type sets, and every one of them yours to change.
|
||||
Changing any of them selects <b>Custom</b>, which keeps the scoring of the type you
|
||||
started from; clicking a type again resets all of them back to it. They are fixed when the
|
||||
game is created and cannot be changed once it starts.</p>
|
||||
<div class="set-groups">
|
||||
|
||||
<div class="set-group">
|
||||
<h3>Starting hand</h3>
|
||||
<p class="ng-note">What each player is dealt before the first turn. The hand limit is three
|
||||
either way — deal six and the first turn is spent choosing which of them to keep.</p>
|
||||
<label class="ng-radio"><input type="radio" name="lb-hand" value="threeRandom" checked>
|
||||
<span>Three random cards</span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-hand" value="sixRandom">
|
||||
<span>Six random cards</span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-hand" value="threeTrackThreeOther">
|
||||
<span>Three track and three other</span></label>
|
||||
<div class="set-row" id="lb-hand-row">
|
||||
<label class="ng-radio"><input type="radio" name="lb-hand" value="threeRandom">
|
||||
<span><b>Three random cards</b><br><span class="dim">The original rule. At the hand limit already, and no guarantee of track.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-hand" value="sixRandom" checked>
|
||||
<span><b>Six random cards</b><br><span class="dim">Twice the choice, still no guaranteed track — the first turn is a discard.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-hand" value="threeTrackThreeOther">
|
||||
<span><b>Three random track and three random non-track cards</b><br><span class="dim">Dealt from two piles, so the district you can build is dealt rather than waited for.</span></span></label>
|
||||
<span class="set-hint" id="lb-hand-hint"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<h3>Where an Extra may start</h3>
|
||||
<p class="ng-note">The player who plays an Extra Train card chooses where its Crew Tray goes,
|
||||
and the place decides which way it runs — a Division Point sends it away from itself; in the
|
||||
middle of the railroad the player picks east or west. The Division Points and the Interchange
|
||||
belong to nobody and are always available. Starting one inside a district is the part that
|
||||
favours a seat, so it is set here. An Office must be a Control Point whatever this says: a
|
||||
Whistle Post never qualifies.</p>
|
||||
<div class="set-row" id="lb-extra-row">
|
||||
<label class="ng-radio"><input type="radio" name="lb-extra" value="divisionPointsOnly">
|
||||
<span><b>Division Points and the Interchange only</b><br><span class="dim">The strictest reading. Every Extra begins on shared ground.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-extra" value="ownOffice">
|
||||
<span><b>Also the playing player’s own Control Point</b><br><span class="dim">You may start one at home, but not in somebody else’s district.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="lb-extra" value="anyOffice">
|
||||
<span><b>Also any player’s Control Point</b><br><span class="dim">The most permissive — an Extra may be planted in another player’s district.</span></span></label>
|
||||
<span class="set-hint" id="lb-extra-hint"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<h3>Revenue</h3>
|
||||
<p class="ng-note">What each piece of work pays, 0 to 5. Zero switches an economy off so the
|
||||
others can be read.</p>
|
||||
<label class="ng-num"><span>Passenger revenue per coach</span>
|
||||
<input id="lb-passenger" type="number" min="0" max="5" step="1" value="1"></label>
|
||||
<label class="ng-num"><span>Freight revenue per load</span>
|
||||
<input id="lb-freight" type="number" min="0" max="5" step="1" value="1"></label>
|
||||
<label class="ng-num"><span>Train revenue per transit</span>
|
||||
<input id="lb-transit" type="number" min="0" max="5" step="1" value="0"></label>
|
||||
<p class="ng-note">What each piece of work pays, 0 to 5. A coach pays when it is boarded and
|
||||
again when it is detrained; a load pays when it is made up and again when it is broken. Zero
|
||||
switches an economy off so the others can be read.</p>
|
||||
<div class="set-row" id="lb-passenger-row">
|
||||
<label class="ng-num"><span>Passenger revenue per coach</span>
|
||||
<input id="lb-passenger" type="number" min="0" max="5" step="1" value="1"></label>
|
||||
<span class="set-hint" id="lb-passenger-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="lb-freight-row">
|
||||
<label class="ng-num"><span>Freight revenue per load</span>
|
||||
<input id="lb-freight" type="number" min="0" max="5" step="1" value="1"></label>
|
||||
<span class="set-hint" id="lb-freight-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="lb-transit-row">
|
||||
<label class="ng-num"><span>Train revenue per transit</span>
|
||||
<input id="lb-transit" type="number" min="0" max="5" step="1" value="0"></label>
|
||||
<span class="set-hint" id="lb-transit-hint"></span>
|
||||
</div>
|
||||
<p class="ng-note">A transit pays every player, once, when a train runs off the end of the
|
||||
Division — the one thing nobody has to work for.</p>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<h3>Victory conditions</h3>
|
||||
<p class="ng-note">How long the game runs, and the ways it can end. 0 turns any of these off.
|
||||
The combined-Revenue default is sized for the table you chose above.</p>
|
||||
<label class="ng-num"><span>Days</span>
|
||||
<input id="lb-days" type="number" min="1" max="20" step="1" value="5"></label>
|
||||
<label class="ng-num"><span>Minimum combined Revenue to avoid a loss</span>
|
||||
<input id="lb-minrev" type="number" min="0" step="1" value="60"></label>
|
||||
<label class="ng-num"><span>Collisions in one Day that end the game</span>
|
||||
<input id="lb-colday" type="number" min="0" step="1" value="3"></label>
|
||||
<label class="ng-num"><span>Collisions across the whole game that end it</span>
|
||||
<input id="lb-coltotal" type="number" min="0" step="1" value="5"></label>
|
||||
<label class="ng-num"><span>Allow the opponent-directed cards</span>
|
||||
<input id="lb-pvp" type="checkbox"></label>
|
||||
<p class="ng-note" id="lb-pvp-note">Not yet built (<code>TODO.md</code>) — this has no effect
|
||||
either way until then.</p>
|
||||
<p class="ng-note">The ways this game can end badly. Each one is switched on or off in its own
|
||||
right; how long the game runs is set above, with the table size.</p>
|
||||
<div class="set-row" id="lb-minrev-row">
|
||||
<label class="ng-gate"><input type="checkbox" id="lb-minrev-on" checked>
|
||||
<span>Everyone loses if combined Revenue at the end is under</span>
|
||||
<input id="lb-minrev" type="number" min="0" step="1" class="gate-num"></label>
|
||||
<span class="set-hint" id="lb-minrev-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="lb-colday-row">
|
||||
<label class="ng-gate"><input type="checkbox" id="lb-colday-on" checked>
|
||||
<span>The game ends and everyone loses if collisions in one Day reach</span>
|
||||
<input id="lb-colday" type="number" min="0" step="1" class="gate-num"></label>
|
||||
<span class="set-hint" id="lb-colday-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="lb-coltotal-row">
|
||||
<label class="ng-gate"><input type="checkbox" id="lb-coltotal-on" checked>
|
||||
<span>The game ends and everyone loses after this many collisions in the whole game</span>
|
||||
<input id="lb-coltotal" type="number" min="0" step="1" class="gate-num"></label>
|
||||
<span class="set-hint" id="lb-coltotal-hint"></span>
|
||||
</div>
|
||||
<p class="ng-note">The opponent-directed cards — Derail, Watertower, Hobo Jungle and the
|
||||
nineteen others, along with the seven that answer them — are not implemented yet, so no game
|
||||
type deals them whatever else is set here.</p>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<h3>Optional rules</h3>
|
||||
<p class="ng-note">Appendix B. Off by default; each one changes how the game plays.</p>
|
||||
<label class="ng-num"><span>Reduced Visibility — five switching Moves instead of six in the
|
||||
night Stages (1–3 and 11–12)</span>
|
||||
<input id="lb-visibility" type="checkbox"></label>
|
||||
<label class="ng-num"><span>Employee Rotation — at the end of each Day everyone moves one chair
|
||||
left and takes over the next station up the line. Your Revenue and the Fedora go with you;
|
||||
the district stays where it is</span>
|
||||
<input id="lb-rotation" type="checkbox"></label>
|
||||
<label class="ng-num"><span>Emergency Toolbox — everyone starts holding a Red Flag, so a hand of
|
||||
four; play or discard down to three on the first turn</span>
|
||||
<input id="lb-toolbox" type="checkbox"></label>
|
||||
</details>
|
||||
<p class="ng-note">Every chair has to be taken before the game can start — by a person or by a
|
||||
bot. Pick the size of the table now; it cannot change once the game is created.</p>
|
||||
<button id="lb-create">Create game</button>
|
||||
<p class="dim" id="lb-create-err" role="alert"></p>
|
||||
<p class="ng-note">Off in every game type; each one changes how the game plays.</p>
|
||||
<div class="set-row" id="lb-visibility-row">
|
||||
<label class="ng-num"><span>Reduced Visibility — five switching Moves instead of six in the
|
||||
night Stages (1–3 and 11–12)</span>
|
||||
<input id="lb-visibility" type="checkbox"></label>
|
||||
<span class="set-hint" id="lb-visibility-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="lb-rotation-row">
|
||||
<label class="ng-num"><span>Employee Rotation — at the end of each Day everyone moves one
|
||||
chair left and takes over the next station up the line. Your Revenue and the Fedora go with
|
||||
you; the district stays where it is</span>
|
||||
<input id="lb-rotation" type="checkbox"></label>
|
||||
<span class="set-hint" id="lb-rotation-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="lb-toolbox-row">
|
||||
<label class="ng-num"><span>Emergency Toolbox — everyone starts holding a Red Flag, so a hand
|
||||
of four; play or discard down to three on the first turn</span>
|
||||
<input id="lb-toolbox" type="checkbox"></label>
|
||||
<span class="set-hint" id="lb-toolbox-hint"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Join a game</h3>
|
||||
<p class="ng-note">Ask whoever created the game for its code.</p>
|
||||
<label class="ng-num"><span>Game code</span><input id="lb-code" type="text" autocomplete="off" placeholder="RAIL-1234"></label>
|
||||
<button id="lb-join">Join game</button>
|
||||
<p class="dim" id="lb-join-err" role="alert"></p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="lb-span">
|
||||
<button id="lb-create" type="button">Create game</button>
|
||||
<p class="lb-error" id="lb-create-err" role="alert"></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Shown once created or joined, in place of the choice above, until the host starts the game. -->
|
||||
@@ -337,20 +552,28 @@ ul.blocked li{padding:2px 0}
|
||||
<h2>Seating</h2>
|
||||
<div class="lb-invite">
|
||||
<div>
|
||||
<div class="lb-invite-label">Send this code to your players</div>
|
||||
<div class="lb-invite-label">Send this to your players</div>
|
||||
<div class="lb-invite-code" id="lb-gamecode"></div>
|
||||
</div>
|
||||
<button id="lb-copy" class="ghost">Copy</button>
|
||||
<button id="lb-copy" class="ghost" type="button">Copy code</button>
|
||||
<button id="lb-copylink" class="ghost" type="button">Copy invite link</button>
|
||||
<span class="ng-note" id="lb-copied"></span>
|
||||
</div>
|
||||
<p class="ng-note">They enter it under <b>Join a game</b>, along with the same join secret you used.</p>
|
||||
<p class="ng-note">The host may fill an empty seat with a bot, and starts the game once every
|
||||
seat is either a player or a bot. <b>These chairs are not the running order</b> — who sits
|
||||
where along the Division is decided by a D12 roll when the game starts (§4.4), and the map
|
||||
shows the result.</p>
|
||||
<p class="ng-note">They enter the code under <b>Join a game</b>, along with the same join secret
|
||||
you used — the link carries the code, never the secret.</p>
|
||||
<p class="ng-note">The host may fill an empty seat with a bot or clear an occupied one, and
|
||||
starts the game once every seat is either a player or a bot. <b>These chairs are not the
|
||||
running order</b> — who sits where along the Division is decided by a D12 roll when the game
|
||||
starts, and the map shows the result.</p>
|
||||
<div id="lb-seats"></div>
|
||||
<p class="lb-warn" id="lb-stream-note" role="status" hidden></p>
|
||||
<button id="lb-start" disabled>Start game</button>
|
||||
<p class="dim" id="lb-start-note"></p>
|
||||
<button id="lb-leave" class="ghost" type="button">Leave</button>
|
||||
<p class="lb-error" id="lb-start-note" role="alert"></p>
|
||||
|
||||
<h3>The game you are in</h3>
|
||||
<div id="lb-seating-type" class="lb-type"></div>
|
||||
<div id="lb-seating-rules" class="rules-list"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -363,6 +586,14 @@ ul.blocked li{padding:2px 0}
|
||||
engine's guess at what your score ought to be were noise on the one line that must not wrap. -->
|
||||
<span id="objective" class="pace">—</span>
|
||||
<span class="dim">seed <span id="seed">—</span></span>
|
||||
<!-- THE GAME CODE SURVIVES THE LOBBY. It used to end at `Lobby.Start` — the code was never carried
|
||||
into `LobbyReady` — so a seated player could not say which game they were in, could not match
|
||||
it against the administrator's Games in Progress list, and could not pass it to a latecomer.
|
||||
Empty (and collapsed) in solitaire, where there is no code. -->
|
||||
<span class="dim" id="gamecode" title="The code this game was created under. The administrator's Games in Progress list uses it, and it is how you say which game you mean."></span>
|
||||
<!-- Co-op, Competitive, Cutthroat or Custom, derived from the config the Frame carries
|
||||
(`presets.ts`). A Cutthroat game used to look exactly like a Co-op one from the board. -->
|
||||
<span class="dim" id="gametype" title=""></span>
|
||||
<!-- WHICH RULES THIS GAME IS BEING PLAYED UNDER. The settings are chosen when the game is dealt
|
||||
and then never mentioned again, which makes a playtest note ("scored 4") unreadable a week
|
||||
later: at 0 revenue per transit that is a different game from the same seed at 5. Short enough
|
||||
@@ -379,6 +610,12 @@ ul.blocked li{padding:2px 0}
|
||||
<button id="savefile" title="Download this game as a save file you can replay or share">Save replay</button>
|
||||
<button id="newgame" title="Deal a fresh game. You choose the seed, the opening hand and what the three economies pay. Undo steps back one action at a time; this throws the whole game away, so download the replay first if you want to keep it.">New game</button>
|
||||
<button id="multiplayer" title="Create or join a Competitive or Co-op game on this server, with other players.">Multiplayer</button>
|
||||
<!-- LEAVING A RUNNING GAME. Reported by Jesse 2026-08-23: "if I'm a player in the middle of the
|
||||
game and I need to leave, how do I leave the game, clear the token from my browser so I can
|
||||
play a different game later?" There was no way at all — the page rejoined the same game on
|
||||
every load and nothing let go of it. This keeps your seat — the table waits for you — and
|
||||
your token, and puts you back at the lobby, which lists every game this browser is in. -->
|
||||
<button id="leavegame" hidden title="Go back to the lobby. Your seat is kept and the game waits for you — the lobby lists it under Games you are in, so you can come back or hand the browser to a different game.">Leave game</button>
|
||||
<a class="home" href="./replays.html" style="font-size:12px">replays</a>
|
||||
<span class="dim build" title="what is actually deployed">__BUILD__</span>
|
||||
</header>
|
||||
@@ -471,60 +708,152 @@ ul.blocked li{padding:2px 0}
|
||||
<form method="dialog" id="newgameform">
|
||||
<h2 class="big" id="ng-title">New game</h2>
|
||||
|
||||
<!-- THE SAME BLOCK THE LOBBY USES, same shared module, same order — the two screens are one
|
||||
design. Only Solitaire can be dealt here; the multiplayer types are shown disabled rather
|
||||
than hidden, so what this screen offers and what the lobby offers read as one list. -->
|
||||
<div class="lb-params">
|
||||
<label class="ng-num"><span>Seed</span>
|
||||
<input id="ng-seed" type="text" inputmode="numeric" autocomplete="off" placeholder="blank for a random seed"></label>
|
||||
<label class="ng-num"><span>Days</span>
|
||||
<input id="ng-days" type="number" min="1" max="20" step="1" value="5"></label>
|
||||
</div>
|
||||
<p class="ng-note">The same seed and the same settings always deal the same railroad, so a game
|
||||
can be shared, compared or replayed. Leave it blank for a random one.</p>
|
||||
|
||||
<h3>Game type</h3>
|
||||
<p class="ng-note">Picking a type just sets the fields below to that type's defaults — every number stays yours to change afterward. Solitaire is the only type that can be dealt today; Competitive and Co-op need a server (coming soon).</p>
|
||||
<label class="ng-radio"><input type="radio" name="ng-mode" value="solitaire" checked>
|
||||
<span><b>Solitaire</b><br><span class="dim">One railroad, one player. Everything below is real today.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-mode" value="competitive">
|
||||
<span><b>Competitive</b><br><span class="dim">Highest Revenue wins, unless the table misses the combined minimum — then everyone loses.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-mode" value="coop">
|
||||
<span><b>Co-op</b><br><span class="dim">Everyone's Revenue counts as one table score, against the same kind of combined minimum.</span></span></label>
|
||||
<div class="set-row" id="ng-type-row">
|
||||
<label class="ng-radio"><input type="radio" name="ng-type" value="solitaire">
|
||||
<span><b>Solitaire</b><br><span class="dim">One railroad, one player. The whole Division is yours to run.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-type" value="coop" checked>
|
||||
<span><b>Co-op</b><br><span class="dim">Everyone’s Revenue is one table score. You win together or lose together.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-type" value="competitive">
|
||||
<span><b>Competitive</b><br><span class="dim">Highest Revenue wins — unless the table misses its combined minimum, and then everyone loses.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-type" value="cutthroat">
|
||||
<span><b>Cutthroat</b><br><span class="dim">Highest Revenue wins, and nothing is shared — the only way everyone loses is three collisions in one Day.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-type" value="custom">
|
||||
<span><b>Custom</b><br><span class="dim">Whatever you set below. Selected for you the moment you change a rule; it is scored as the type you started from.</span></span></label>
|
||||
</div>
|
||||
|
||||
<h3>Seed</h3>
|
||||
<p class="ng-note">The same seed and the same settings always deal the same railroad, so a game can be shared, compared or replayed. Leave it blank for a random one.</p>
|
||||
<input id="ng-seed" type="text" inputmode="numeric" autocomplete="off" placeholder="blank for a random seed">
|
||||
<p class="ng-note" id="ng-type-note"></p>
|
||||
|
||||
<h3>Starting hand</h3>
|
||||
<p class="ng-note">What each player is dealt before the first turn. The hand limit is three either way — deal six and the first turn is spent choosing which of them to keep.</p>
|
||||
<label class="ng-radio"><input type="radio" name="ng-hand" value="threeRandom" checked>
|
||||
<span><b>Three random cards</b><br><span class="dim">The original rule. At the hand limit already, and no guarantee of track.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-hand" value="sixRandom">
|
||||
<span><b>Six random cards</b><br><span class="dim">Twice the choice, still no guaranteed track — the first turn is a discard.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-hand" value="threeTrackThreeOther">
|
||||
<span><b>Three random track and three random non-track cards</b><br><span class="dim">Dealt from two piles, so the district you can build is dealt rather than waited for.</span></span></label>
|
||||
<details id="ng-settings" open>
|
||||
<summary>Game settings</summary>
|
||||
<p class="ng-note">Every rule the game type sets, and every one of them yours to change.
|
||||
Changing any of them selects <b>Custom</b>; clicking a type again resets all of them back
|
||||
to it.</p>
|
||||
<div class="set-groups">
|
||||
|
||||
<h3>Where an Extra may start</h3>
|
||||
<p class="ng-note">The player who plays an Extra Train card chooses where its Crew Tray goes, and the place decides which way it runs — a Division Point sends it away from itself; in the middle of the railroad the player picks east or west. The Division Points and the Interchange belong to nobody and are always available. Starting one inside a district is the part that favours a seat, so it is set here. An Office must be a Control Point whatever this says: a Whistle Post never qualifies.</p>
|
||||
<label class="ng-radio"><input type="radio" name="ng-extra" value="divisionPointsOnly">
|
||||
<span><b>Division Points and the Interchange only</b><br><span class="dim">The strictest reading of §7. Every Extra begins on shared ground.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-extra" value="ownOffice">
|
||||
<span><b>Also the playing player’s own Control Point</b><br><span class="dim">You may start one at home, but not in somebody else’s district.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-extra" value="anyOffice" checked>
|
||||
<span><b>Also any player’s Control Point</b><br><span class="dim">The most permissive, and what the game did before this setting existed.</span></span></label>
|
||||
<div class="set-group">
|
||||
<h3>Starting hand</h3>
|
||||
<p class="ng-note">What each player is dealt before the first turn. The hand limit is three
|
||||
either way — deal six and the first turn is spent choosing which of them to keep.</p>
|
||||
<div class="set-row" id="ng-hand-row">
|
||||
<label class="ng-radio"><input type="radio" name="ng-hand" value="threeRandom">
|
||||
<span><b>Three random cards</b><br><span class="dim">The original rule. At the hand limit already, and no guarantee of track.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-hand" value="sixRandom" checked>
|
||||
<span><b>Six random cards</b><br><span class="dim">Twice the choice, still no guaranteed track — the first turn is a discard.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-hand" value="threeTrackThreeOther">
|
||||
<span><b>Three random track and three random non-track cards</b><br><span class="dim">Dealt from two piles, so the district you can build is dealt rather than waited for.</span></span></label>
|
||||
<span class="set-hint" id="ng-hand-hint"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Revenue</h3>
|
||||
<p class="ng-note">What each piece of work pays, 0 to 5. A coach pays when it is boarded and again when it is detrained; a load pays when it is made up and again when it is broken. Zero switches an economy off so the others can be read.</p>
|
||||
<label class="ng-num"><span>Passenger revenue per coach</span>
|
||||
<input id="ng-passenger" type="number" min="0" max="5" step="1" value="1"></label>
|
||||
<label class="ng-num"><span>Freight revenue per load</span>
|
||||
<input id="ng-freight" type="number" min="0" max="5" step="1" value="1"></label>
|
||||
<label class="ng-num"><span>Train revenue per transit</span>
|
||||
<input id="ng-transit" type="number" min="0" max="5" step="1" value="0"></label>
|
||||
<p class="ng-note">A transit pays every player, once, when a train runs off the end of the Division — the one thing nobody has to work for. It defaults to 0 for that reason.</p>
|
||||
<div class="set-group">
|
||||
<h3>Where an Extra may start</h3>
|
||||
<p class="ng-note">The player who plays an Extra Train card chooses where its Crew Tray goes,
|
||||
and the place decides which way it runs — a Division Point sends it away from itself; in the
|
||||
middle of the railroad the player picks east or west. The Division Points and the Interchange
|
||||
belong to nobody and are always available. Starting one inside a district is the part that
|
||||
favours a seat, so it is set here. An Office must be a Control Point whatever this says: a
|
||||
Whistle Post never qualifies.</p>
|
||||
<div class="set-row" id="ng-extra-row">
|
||||
<label class="ng-radio"><input type="radio" name="ng-extra" value="divisionPointsOnly">
|
||||
<span><b>Division Points and the Interchange only</b><br><span class="dim">The strictest reading. Every Extra begins on shared ground.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-extra" value="ownOffice">
|
||||
<span><b>Also the playing player’s own Control Point</b><br><span class="dim">You may start one at home, but not in somebody else’s district.</span></span></label>
|
||||
<label class="ng-radio"><input type="radio" name="ng-extra" value="anyOffice">
|
||||
<span><b>Also any player’s Control Point</b><br><span class="dim">The most permissive — an Extra may be planted in another player’s district.</span></span></label>
|
||||
<span class="set-hint" id="ng-extra-hint"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Victory conditions</h3>
|
||||
<p class="ng-note">How long the game runs, and the ways it can end. 0 turns any of these off. The combined-Revenue suggestion updates for Competitive/Co-op — it assumes a 4-player table until there's a lobby to ask who's actually seated.</p>
|
||||
<label class="ng-num"><span>Days</span>
|
||||
<input id="ng-days" type="number" min="1" max="20" step="1" value="5"></label>
|
||||
<label class="ng-num"><span>Minimum combined Revenue to avoid a loss</span>
|
||||
<input id="ng-minrev" type="number" min="0" step="1" value="15"></label>
|
||||
<label class="ng-num"><span>Collisions in one Day that end the game</span>
|
||||
<input id="ng-colday" type="number" min="0" step="1" value="3"></label>
|
||||
<label class="ng-num"><span>Collisions across the whole game that end it</span>
|
||||
<input id="ng-coltotal" type="number" min="0" step="1" value="5"></label>
|
||||
<label class="ng-num"><span>Allow the opponent-directed cards</span>
|
||||
<input id="ng-pvp" type="checkbox"></label>
|
||||
<p class="ng-note" id="ng-pvp-note">Not yet built (<code>TODO.md</code>) — this has no effect either way until then.</p>
|
||||
<div class="set-group">
|
||||
<h3>Revenue</h3>
|
||||
<p class="ng-note">What each piece of work pays, 0 to 5. A coach pays when it is boarded and
|
||||
again when it is detrained; a load pays when it is made up and again when it is broken. Zero
|
||||
switches an economy off so the others can be read.</p>
|
||||
<div class="set-row" id="ng-passenger-row">
|
||||
<label class="ng-num"><span>Passenger revenue per coach</span>
|
||||
<input id="ng-passenger" type="number" min="0" max="5" step="1" value="1"></label>
|
||||
<span class="set-hint" id="ng-passenger-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="ng-freight-row">
|
||||
<label class="ng-num"><span>Freight revenue per load</span>
|
||||
<input id="ng-freight" type="number" min="0" max="5" step="1" value="1"></label>
|
||||
<span class="set-hint" id="ng-freight-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="ng-transit-row">
|
||||
<label class="ng-num"><span>Train revenue per transit</span>
|
||||
<input id="ng-transit" type="number" min="0" max="5" step="1" value="0"></label>
|
||||
<span class="set-hint" id="ng-transit-hint"></span>
|
||||
</div>
|
||||
<p class="ng-note">A transit pays every player, once, when a train runs off the end of the
|
||||
Division — the one thing nobody has to work for.</p>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<h3>Victory conditions</h3>
|
||||
<p class="ng-note">The ways this game can end badly. Each one is switched on or off in its own
|
||||
right; how long the game runs is set above, with the table size.</p>
|
||||
<div class="set-row" id="ng-minrev-row">
|
||||
<label class="ng-gate"><input type="checkbox" id="ng-minrev-on" checked>
|
||||
<span>Everyone loses if combined Revenue at the end is under</span>
|
||||
<input id="ng-minrev" type="number" min="0" step="1" class="gate-num"></label>
|
||||
<span class="set-hint" id="ng-minrev-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="ng-colday-row">
|
||||
<label class="ng-gate"><input type="checkbox" id="ng-colday-on" checked>
|
||||
<span>The game ends and everyone loses if collisions in one Day reach</span>
|
||||
<input id="ng-colday" type="number" min="0" step="1" class="gate-num"></label>
|
||||
<span class="set-hint" id="ng-colday-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="ng-coltotal-row">
|
||||
<label class="ng-gate"><input type="checkbox" id="ng-coltotal-on" checked>
|
||||
<span>The game ends and everyone loses after this many collisions in the whole game</span>
|
||||
<input id="ng-coltotal" type="number" min="0" step="1" class="gate-num"></label>
|
||||
<span class="set-hint" id="ng-coltotal-hint"></span>
|
||||
</div>
|
||||
<p class="ng-note">The opponent-directed cards — Derail, Watertower, Hobo Jungle and the
|
||||
nineteen others, along with the seven that answer them — are not implemented yet, so no game
|
||||
type deals them whatever else is set here.</p>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<h3>Optional rules</h3>
|
||||
<p class="ng-note">Off in every game type; each one changes how the game plays.</p>
|
||||
<div class="set-row" id="ng-visibility-row">
|
||||
<label class="ng-num"><span>Reduced Visibility — five switching Moves instead of six in the
|
||||
night Stages (1–3 and 11–12)</span>
|
||||
<input id="ng-visibility" type="checkbox"></label>
|
||||
<span class="set-hint" id="ng-visibility-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="ng-rotation-row">
|
||||
<label class="ng-num"><span>Employee Rotation — at the end of each Day everyone moves one
|
||||
chair left and takes over the next station up the line. Your Revenue and the Fedora go with
|
||||
you; the district stays where it is</span>
|
||||
<input id="ng-rotation" type="checkbox"></label>
|
||||
<span class="set-hint" id="ng-rotation-hint"></span>
|
||||
</div>
|
||||
<div class="set-row" id="ng-toolbox-row">
|
||||
<label class="ng-num"><span>Emergency Toolbox — everyone starts holding a Red Flag, so a hand
|
||||
of four; play or discard down to three on the first turn</span>
|
||||
<input id="ng-toolbox" type="checkbox"></label>
|
||||
<span class="set-hint" id="ng-toolbox-hint"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<menu class="ng-buttons">
|
||||
<span class="ng-note" id="ng-multiplayer-note" style="margin:0 auto 0 0">Use the <b>Multiplayer</b> button instead — it creates or joins a game on this server.</span>
|
||||
@@ -534,6 +863,18 @@ ul.blocked li{padding:2px 0}
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<!-- THE HANDOFF, between `Lobby.Start` and the first Frame.
|
||||
`beginRemote` used to write "… connecting to the game" into `#presence` — the DISCONNECT banner,
|
||||
whose job is `⚠ waiting on Alice`. It worked only because the first render overwrote it, and it
|
||||
had nothing to say when the first push never came. This is its own state: it opens on the way
|
||||
into a game, holds a deliberate beat so the game visibly begins, and closes on the first Frame. -->
|
||||
<div id="handoff">
|
||||
<div class="hand-inner">
|
||||
<h2 id="handoff-title">Dealing the railroad…</h2>
|
||||
<div id="handoff-note" class="hand-note"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="./web/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,351 @@
|
||||
/**
|
||||
* THE FOUR GAME TYPES, and what "Custom" means.
|
||||
*
|
||||
* Jesse's design, 2026-08-23. A game type is not a mode and not a ruleset — it is a NAMED SET OF
|
||||
* DEFAULTS that the host may then edit. Editing any of them selects `custom`, which keeps the
|
||||
* values and inherits the scoring of the type it was edited away from; clicking a named type again
|
||||
* resets every rule back to it.
|
||||
*
|
||||
* WHY THIS FILE EXISTS RATHER THAN A CONSTANT IN EACH SCREEN. The lobby (`lobby.ts`) and the
|
||||
* solitaire New Game dialog (`main.ts`) ask the same questions, and they had already drifted apart
|
||||
* before this was written: the dialog had "where an Extra may start" and no optional rules, the
|
||||
* lobby had the optional rules and no Extra rule — so a multiplayer game silently played the most
|
||||
* permissive Extra rule and nobody was ever asked. One description of the defaults, imported by
|
||||
* both, is what stops that happening a third time.
|
||||
*
|
||||
* PARAMETERS ARE NOT SETTINGS. Seed, player count and Day count sit ABOVE the type radios on both
|
||||
* screens and never select `custom`: the presets are formulas in players and days, so "Co-op, 3
|
||||
* players, 8 days" is still Co-op and its Revenue floor re-derives. Everything below the radios is
|
||||
* a rule, and changing one is what makes a game Custom.
|
||||
*/
|
||||
|
||||
import {
|
||||
DEFAULT_MAX_COLLISIONS_PER_DAY,
|
||||
DEFAULT_MAX_COLLISIONS_TOTAL,
|
||||
collectiveRevenueFloor,
|
||||
houseRules,
|
||||
} from '../engine/content.ts';
|
||||
import type { ExtraStartRule, RevenueRules, StartingHand } from '../engine/content.ts';
|
||||
import type { GameConfig, GameMode } from '../engine/state.ts';
|
||||
|
||||
export type PresetName = 'solitaire' | 'coop' | 'competitive' | 'cutthroat';
|
||||
/** What the radio group answers: one of the four named types, or the state of having edited one. */
|
||||
export type GameType = PresetName | 'custom';
|
||||
|
||||
/**
|
||||
* Every rule a game type sets, flattened to one value per control.
|
||||
*
|
||||
* Flat rather than shaped like `GameConfig` because this is what the FORM compares against: each key
|
||||
* is one field on screen, so "which fields differ from the preset" is a key-by-key comparison rather
|
||||
* than a walk through nested objects. `configFromSettings` puts the shape back.
|
||||
*/
|
||||
export type Settings = {
|
||||
startingHand: StartingHand;
|
||||
extraStart: ExtraStartRule;
|
||||
passengerPerCoach: number;
|
||||
freightPerLoad: number;
|
||||
trainPerTransit: number;
|
||||
/** 0 means the condition is off — the engine's convention (`state.ts`). The form draws a checkbox. */
|
||||
minCombinedRevenue: number;
|
||||
maxCollisionsPerDay: number;
|
||||
maxCollisionsTotal: number;
|
||||
reducedVisibility: boolean;
|
||||
employeeRotation: boolean;
|
||||
emergencyToolbox: boolean;
|
||||
};
|
||||
|
||||
export const SETTING_KEYS: readonly (keyof Settings)[] = [
|
||||
'startingHand',
|
||||
'extraStart',
|
||||
'passengerPerCoach',
|
||||
'freightPerLoad',
|
||||
'trainPerTransit',
|
||||
'minCombinedRevenue',
|
||||
'maxCollisionsPerDay',
|
||||
'maxCollisionsTotal',
|
||||
'reducedVisibility',
|
||||
'employeeRotation',
|
||||
'emergencyToolbox',
|
||||
];
|
||||
|
||||
export type Preset = {
|
||||
name: PresetName;
|
||||
label: string;
|
||||
/** One line under the radio, saying what winning and losing mean in this type. */
|
||||
blurb: string;
|
||||
/** The engine mode this type is scored under — what a `custom` game inherits. */
|
||||
scoring: GameMode;
|
||||
/**
|
||||
* Whether the 22 opponent-directed cards would be dealt, once they exist. Not a form control any
|
||||
* more: it is a property of the type (`TODO.md` — the cards are unbuilt, so `buildDeck` holds them
|
||||
* out regardless, and a checkbox that cannot do anything is worse than a sentence saying so).
|
||||
*/
|
||||
pvpCards: boolean;
|
||||
/**
|
||||
* The Revenue floor this type asks for, as a function of the table and the length. Co-op keeps the
|
||||
* engine's own `collectiveRevenueFloor` (3 per player per Day); Competitive asks two thirds of it,
|
||||
* because a table racing each other is not also pulling in one direction; Cutthroat asks nothing.
|
||||
*/
|
||||
revenueFloor: (players: number, days: number) => number;
|
||||
rules: Omit<Settings, 'minCombinedRevenue'>;
|
||||
};
|
||||
|
||||
const NO_OPTIONAL_RULES = {
|
||||
reducedVisibility: false,
|
||||
employeeRotation: false,
|
||||
emergencyToolbox: false,
|
||||
} as const;
|
||||
|
||||
/** Every type deals six now (Jesse, 2026-08-23) — the hand limit is three, so the first turn is a
|
||||
* discard whichever three you keep. Solitaire moved with the rest so the two screens agree. */
|
||||
const SIX: StartingHand = 'sixRandom';
|
||||
|
||||
export const PRESETS: readonly Preset[] = [
|
||||
{
|
||||
name: 'solitaire',
|
||||
label: 'Solitaire',
|
||||
blurb: 'One railroad, one player. The whole Division is yours to run.',
|
||||
scoring: 'solitaire',
|
||||
pvpCards: false,
|
||||
revenueFloor: (players, days) => collectiveRevenueFloor(players, days),
|
||||
rules: {
|
||||
startingHand: SIX,
|
||||
// Nobody else's district exists, so "any Control Point" and "your own" are the same rule.
|
||||
extraStart: 'anyOffice',
|
||||
passengerPerCoach: 1,
|
||||
freightPerLoad: 1,
|
||||
trainPerTransit: 0,
|
||||
maxCollisionsPerDay: DEFAULT_MAX_COLLISIONS_PER_DAY,
|
||||
maxCollisionsTotal: DEFAULT_MAX_COLLISIONS_TOTAL,
|
||||
...NO_OPTIONAL_RULES,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'coop',
|
||||
label: 'Co-op',
|
||||
blurb: 'Everyone’s Revenue is one table score. You win together or lose together.',
|
||||
scoring: 'coop',
|
||||
// Never, even once the cards are built: there is no opponent to point them at when the table is
|
||||
// one side.
|
||||
pvpCards: false,
|
||||
revenueFloor: (players, days) => collectiveRevenueFloor(players, days),
|
||||
rules: {
|
||||
startingHand: SIX,
|
||||
extraStart: 'ownOffice',
|
||||
passengerPerCoach: 1,
|
||||
freightPerLoad: 1,
|
||||
// The one economy that pays every player at once, for work nobody had to do — which is the
|
||||
// co-operative one, so it is the type that switches it on.
|
||||
trainPerTransit: 1,
|
||||
maxCollisionsPerDay: DEFAULT_MAX_COLLISIONS_PER_DAY,
|
||||
maxCollisionsTotal: DEFAULT_MAX_COLLISIONS_TOTAL,
|
||||
...NO_OPTIONAL_RULES,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'competitive',
|
||||
label: 'Competitive',
|
||||
blurb: 'Highest Revenue wins — unless the table misses its combined minimum, and then everyone loses.',
|
||||
scoring: 'competitive',
|
||||
pvpCards: true,
|
||||
revenueFloor: (players, days) => 2 * players * days,
|
||||
rules: {
|
||||
startingHand: SIX,
|
||||
extraStart: 'ownOffice',
|
||||
passengerPerCoach: 1,
|
||||
freightPerLoad: 1,
|
||||
trainPerTransit: 0,
|
||||
maxCollisionsPerDay: DEFAULT_MAX_COLLISIONS_PER_DAY,
|
||||
maxCollisionsTotal: DEFAULT_MAX_COLLISIONS_TOTAL,
|
||||
...NO_OPTIONAL_RULES,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'cutthroat',
|
||||
label: 'Cutthroat',
|
||||
blurb: 'Highest Revenue wins, and nothing is shared — the only way everyone loses is three collisions in one Day.',
|
||||
scoring: 'competitive',
|
||||
pvpCards: true,
|
||||
// Off. Cutthroat has no collective obligation of any kind.
|
||||
revenueFloor: () => 0,
|
||||
rules: {
|
||||
startingHand: SIX,
|
||||
// The one type that lets you plant an Extra in somebody else's district.
|
||||
extraStart: 'anyOffice',
|
||||
passengerPerCoach: 1,
|
||||
freightPerLoad: 1,
|
||||
trainPerTransit: 0,
|
||||
maxCollisionsPerDay: DEFAULT_MAX_COLLISIONS_PER_DAY,
|
||||
// Off, with the per-Day check left standing: a table can bleed collisions all game, but three
|
||||
// in one Day still ends it.
|
||||
maxCollisionsTotal: 0,
|
||||
...NO_OPTIONAL_RULES,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export function preset(name: PresetName): Preset {
|
||||
const found = PRESETS.find((p) => p.name === name);
|
||||
if (!found) throw new Error(`no such preset: ${name}`);
|
||||
return found;
|
||||
}
|
||||
|
||||
/** Every rule a named type sets, at the table size and length the form currently shows. */
|
||||
export function presetSettings(name: PresetName, players: number, days: number): Settings {
|
||||
const p = preset(name);
|
||||
return { ...p.rules, minCombinedRevenue: p.revenueFloor(players, days) };
|
||||
}
|
||||
|
||||
/** The settings a config is actually carrying — the other half of every comparison below. */
|
||||
export function settingsOf(config: GameConfig): Settings {
|
||||
const rules = houseRules(config);
|
||||
return {
|
||||
startingHand: rules.startingHand,
|
||||
extraStart: rules.extraStart,
|
||||
passengerPerCoach: rules.revenue.passengerPerCoach,
|
||||
freightPerLoad: rules.revenue.freightPerLoad,
|
||||
trainPerTransit: rules.revenue.trainPerTransit,
|
||||
minCombinedRevenue: config.minCombinedRevenue,
|
||||
maxCollisionsPerDay: config.maxCollisionsPerDay,
|
||||
maxCollisionsTotal: config.maxCollisionsTotal,
|
||||
reducedVisibility: config.optionalRules.reducedVisibility,
|
||||
employeeRotation: config.optionalRules.employeeRotation,
|
||||
emergencyToolbox: config.optionalRules.emergencyToolbox,
|
||||
};
|
||||
}
|
||||
|
||||
/** Which controls differ from a named type — what the form paints amber and counts in its summary. */
|
||||
export function differencesFrom(
|
||||
name: PresetName,
|
||||
settings: Settings,
|
||||
players: number,
|
||||
days: number,
|
||||
): (keyof Settings)[] {
|
||||
const want = presetSettings(name, players, days);
|
||||
return SETTING_KEYS.filter((k) => settings[k] !== want[k]);
|
||||
}
|
||||
|
||||
/**
|
||||
* WHICH TYPE IS THIS, derived rather than stored.
|
||||
*
|
||||
* Nothing writes a type name into `GameConfig` — a saved game is its numbers, and a name in the save
|
||||
* would be one more thing that can disagree with them. So the screens ask this instead, which means
|
||||
* a hand-tuned game that happens to match Competitive exactly reads as Competitive, and that is the
|
||||
* honest answer: it IS one.
|
||||
*
|
||||
* `mode` is part of the comparison, so a Co-op game whose dials happen to equal Competitive's is
|
||||
* still not Competitive.
|
||||
*/
|
||||
export function presetOf(config: GameConfig, players: number, days: number): GameType {
|
||||
const settings = settingsOf(config);
|
||||
const match = PRESETS.find(
|
||||
(p) => p.scoring === config.mode && differencesFrom(p.name, settings, players, days).length === 0,
|
||||
);
|
||||
return match?.name ?? 'custom';
|
||||
}
|
||||
|
||||
/**
|
||||
* A `Frame`'s copy of the config, as a `GameConfig` the functions above can read.
|
||||
*
|
||||
* The page has a Frame, never a `GameState` — a remote client holds no game — and the Frame carries
|
||||
* every field these comparisons need. Structurally typed rather than importing `Frame` so this
|
||||
* module stays free of `sim/view.ts`.
|
||||
*/
|
||||
export function configFromFrame(f: {
|
||||
mode: GameMode;
|
||||
days: number;
|
||||
minCombinedRevenue: number;
|
||||
maxCollisionsPerDay: number;
|
||||
maxCollisionsTotal: number;
|
||||
optionalRules: GameConfig['optionalRules'];
|
||||
houseRules: { startingHand: StartingHand; extraStart: ExtraStartRule; revenue: RevenueRules };
|
||||
}): GameConfig {
|
||||
return {
|
||||
mode: f.mode,
|
||||
days: f.days,
|
||||
minCombinedRevenue: f.minCombinedRevenue,
|
||||
maxCollisionsPerDay: f.maxCollisionsPerDay,
|
||||
maxCollisionsTotal: f.maxCollisionsTotal,
|
||||
// Never shown from a Frame — the cards are unbuilt, and the type carries the answer.
|
||||
pvpCardsAllowed: false,
|
||||
optionalRules: f.optionalRules,
|
||||
houseRules: {
|
||||
startingHand: f.houseRules.startingHand,
|
||||
extraStart: f.houseRules.extraStart,
|
||||
revenue: f.houseRules.revenue,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* The named type a config is NEAREST to, for a screen that has to describe someone else's game.
|
||||
*
|
||||
* The create form always knows which type was clicked, so it compares against that. A join preview
|
||||
* and the seating screen do not — they are handed a finished config and nothing else — and "Custom"
|
||||
* on its own tells a player nothing about what they are joining. Comparing against the same-scoring
|
||||
* type with the fewest differences answers the question they actually have: how far from a normal
|
||||
* game is this, and which normal game?
|
||||
*/
|
||||
export function closestPreset(
|
||||
config: GameConfig,
|
||||
players: number,
|
||||
days: number,
|
||||
): { name: PresetName; differing: (keyof Settings)[] } {
|
||||
const settings = settingsOf(config);
|
||||
const candidates = PRESETS.filter((p) => p.scoring === config.mode);
|
||||
const scored = (candidates.length > 0 ? candidates : PRESETS).map((p) => ({
|
||||
name: p.name,
|
||||
differing: differencesFrom(p.name, settings, players, days),
|
||||
}));
|
||||
return scored.reduce((best, c) => (c.differing.length < best.differing.length ? c : best));
|
||||
}
|
||||
|
||||
/**
|
||||
* The label a screen shows for the current state of the form — including what a Custom game is being
|
||||
* scored as, which is the one thing a player cannot see from the dials.
|
||||
*/
|
||||
export function gameTypeLabel(type: GameType, scoring: GameMode): string {
|
||||
if (type !== 'custom') return preset(type).label;
|
||||
const named = PRESETS.find((p) => p.scoring === scoring && p.name !== 'cutthroat');
|
||||
return `Custom — scored as ${named?.label ?? scoring}`;
|
||||
}
|
||||
|
||||
/** Assembles the config a form's answers describe. `players` reaches the caller separately: it sizes
|
||||
* the lobby's seat array rather than being part of the rules. */
|
||||
export function configFromSettings(
|
||||
settings: Settings,
|
||||
scoring: GameMode,
|
||||
days: number,
|
||||
pvpCards: boolean,
|
||||
): GameConfig {
|
||||
return {
|
||||
mode: scoring,
|
||||
days,
|
||||
minCombinedRevenue: settings.minCombinedRevenue,
|
||||
maxCollisionsPerDay: settings.maxCollisionsPerDay,
|
||||
maxCollisionsTotal: settings.maxCollisionsTotal,
|
||||
// Inert until the cards are built (`setup.ts`'s `buildDeck` ANDs it with `cardsImplemented`),
|
||||
// and no longer a control on any screen — it is a property of the game type.
|
||||
pvpCardsAllowed: pvpCards,
|
||||
optionalRules: {
|
||||
reducedVisibility: settings.reducedVisibility,
|
||||
employeeRotation: settings.employeeRotation,
|
||||
emergencyToolbox: settings.emergencyToolbox,
|
||||
},
|
||||
houseRules: {
|
||||
startingHand: settings.startingHand,
|
||||
extraStart: settings.extraStart,
|
||||
revenue: {
|
||||
passengerPerCoach: settings.passengerPerCoach,
|
||||
freightPerLoad: settings.freightPerLoad,
|
||||
trainPerTransit: settings.trainPerTransit,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/** The whole config a named type produces, with nothing edited. */
|
||||
export function configFromPreset(name: PresetName, players: number, days: number): GameConfig {
|
||||
const p = preset(name);
|
||||
return configFromSettings(presetSettings(name, players, days), p.scoring, days, p.pvpCards);
|
||||
}
|
||||
+4
-1
@@ -117,7 +117,10 @@ function show(i: number): void {
|
||||
// A replay carries the seat names in the frame's own lines rather than a player table, so the
|
||||
// solitaire seat is named directly; a multi-player replay reports the index it has.
|
||||
const actorName = f.actor === null ? null : `Player ${f.actor + 1}`;
|
||||
$('turnchart').innerHTML = turnChartHtml(f, actorName);
|
||||
// A replay of a multi-player game gets the Fedora too — it is the answer to "why is it asking
|
||||
// THEM", which a replay raises exactly as a live game does.
|
||||
const superName = f.players.length > 1 ? `Player ${f.superintendent + 1}` : null;
|
||||
$('turnchart').innerHTML = turnChartHtml(f, actorName, superName);
|
||||
$('vrev').textContent = String(f.revenue);
|
||||
$('vpos').textContent = `${at} / ${steps.length - 1}`;
|
||||
($('vscrub') as HTMLInputElement).value = String(at);
|
||||
|
||||
+74
-10
@@ -99,9 +99,23 @@ export type Session = {
|
||||
* the seat and waits; this is what lets the page say why, instead of going quiet with no
|
||||
* explanation. Reflects the last presence push for each seat the server has ever mentioned, not
|
||||
* only the ones currently disconnected — a seat that reconnects updates its own entry rather than
|
||||
* disappearing, so the page can tell "never heard from" apart from "was here, then left."
|
||||
* disappearing.
|
||||
*
|
||||
* `seen` is what separates the two absences the page must not conflate: a seat that has connected
|
||||
* at some point and dropped, against one that has never opened the game at all. The server now
|
||||
* reports every other seat on connect (2026-08-23), so this is answerable at the moment a game
|
||||
* starts — which is exactly when "is everyone here?" is the question.
|
||||
*/
|
||||
presence(): { seat: PlayerIndex; connected: boolean }[];
|
||||
presence(): { seat: PlayerIndex; connected: boolean; seen: boolean }[];
|
||||
/**
|
||||
* Stop listening, for good.
|
||||
*
|
||||
* Only a remote session has anything to close, and only one caller needs it: a player LEAVING a
|
||||
* running game (2026-08-23). Without it the page went back to the lobby with its `EventSource`
|
||||
* still open, so the server — and therefore every other seat — went on reporting them as present
|
||||
* at a table they had walked away from.
|
||||
*/
|
||||
close?(): void;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -205,7 +219,24 @@ type Push = {
|
||||
frame?: FrameDelta;
|
||||
menu: Menu | null;
|
||||
lines: { text: string; tone: string }[];
|
||||
presence?: { seat: PlayerIndex; connected: boolean };
|
||||
/** One entry for a change; every other seat at once on the connect push. */
|
||||
presence?: { seat: PlayerIndex; connected: boolean; seen: boolean }[];
|
||||
/**
|
||||
* THE FOUR TRANSIENT SIGNALS, added 2026-08-23.
|
||||
*
|
||||
* A remote session used to return nothing for any of them, so multiplayer had no sound at all, no
|
||||
* timetable flash when the D12 filled a slot, no announcement when a completed run paid the table,
|
||||
* and no highlight on the card you had just drawn — four things solitaire has had all along, and
|
||||
* most of why a multiplayer game felt inert.
|
||||
*
|
||||
* `cues` and `announcement` are SHARED events (a collision anywhere, the Stage bell, a train
|
||||
* leaving the Division) and reach every seat; `justDrawn` is the recipient's own card and nobody
|
||||
* else's — `test/redaction.test.ts` covers exactly that.
|
||||
*/
|
||||
cues?: string[];
|
||||
scheduled?: number | null;
|
||||
announcement?: string | null;
|
||||
justDrawn?: string | null;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -239,7 +270,11 @@ export function createRemoteSession(
|
||||
let frame: Frame | null = null;
|
||||
let menu: Menu | null = null;
|
||||
let lines: { text: string; tone: string }[] = [];
|
||||
const presence = new Map<PlayerIndex, boolean>();
|
||||
const presence = new Map<PlayerIndex, { connected: boolean; seen: boolean }>();
|
||||
let cues: string[] = [];
|
||||
let scheduled: number | null = null;
|
||||
let announcement: string | null = null;
|
||||
let justDrawnCard: string | null = null;
|
||||
let nextSeq = 1;
|
||||
const listeners = new Set<() => void>();
|
||||
const changed = (): void => {
|
||||
@@ -282,7 +317,14 @@ export function createRemoteSession(
|
||||
menu = push.menu;
|
||||
}
|
||||
lines = [...lines, ...push.lines];
|
||||
if (push.presence) presence.set(push.presence.seat, push.presence.connected);
|
||||
for (const p of push.presence ?? []) presence.set(p.seat, { connected: p.connected, seen: p.seen });
|
||||
// Accumulated rather than replaced: two pushes can arrive between two renders, and a cue that
|
||||
// was earned is a cue that should be heard.
|
||||
if (push.cues) cues = [...cues, ...push.cues];
|
||||
if (push.scheduled !== undefined && push.scheduled !== null) scheduled = push.scheduled;
|
||||
if (push.announcement !== undefined && push.announcement !== null) announcement = push.announcement;
|
||||
// Persists until another draw replaces it, matching the local session's own `justDrawn`.
|
||||
if (push.justDrawn !== undefined) justDrawnCard = push.justDrawn;
|
||||
changed();
|
||||
};
|
||||
|
||||
@@ -317,10 +359,32 @@ export function createRemoteSession(
|
||||
capabilities: { undo: false, saveLocal: false, newGame: false },
|
||||
|
||||
lines: () => lines,
|
||||
takeCues: () => [],
|
||||
takeScheduled: () => null,
|
||||
takeAnnouncement: () => null,
|
||||
justDrawn: () => null,
|
||||
presence: () => [...presence].map(([s, connected]) => ({ seat: s, connected })),
|
||||
// Draining, exactly as the local session's are: each of these marks a moment, so it plays once
|
||||
// and is gone by the next render rather than re-firing on every redraw.
|
||||
takeCues: () => {
|
||||
const out = cues;
|
||||
cues = [];
|
||||
return out;
|
||||
},
|
||||
takeScheduled: () => {
|
||||
const out = scheduled;
|
||||
scheduled = null;
|
||||
return out;
|
||||
},
|
||||
takeAnnouncement: () => {
|
||||
const out = announcement;
|
||||
announcement = null;
|
||||
return out;
|
||||
},
|
||||
justDrawn: () => justDrawnCard,
|
||||
presence: () => [...presence].map(([seat, p]) => ({ seat, connected: p.connected, seen: p.seen })),
|
||||
close() {
|
||||
// `reportedGone` first: closing the stream fires `onerror`, and this is a deliberate exit, not
|
||||
// a game that vanished — `onGone` must not be called and land the page in "that game is no
|
||||
// longer on this server".
|
||||
reportedGone = true;
|
||||
source.close();
|
||||
listeners.clear();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,353 @@
|
||||
/**
|
||||
* THE RULES BLOCK, driven identically on both screens.
|
||||
*
|
||||
* The lobby (`lobby.ts`) and the solitaire New Game dialog (`main.ts`) ask the same eleven questions.
|
||||
* They used to ask them in two hand-written copies and had already drifted — the dialog had "where
|
||||
* an Extra may start" and no optional rules, the lobby the reverse — so this module owns reading,
|
||||
* writing, comparing and annotating the block, and each screen supplies only the id prefix its
|
||||
* markup uses (`lb-` or `ng-`).
|
||||
*
|
||||
* THE MARKUP ITSELF STAYS STATIC IN `play.html`, deliberately. Generating it here would be less
|
||||
* duplication, but `test/web.test.ts` drives the emitted bundle against a hand-built DOM stub with
|
||||
* no HTML parser in it (there is no jsdom in this project, and adding one to test a form is a poor
|
||||
* trade), and the ids in that stub come from scanning the real `play.html`. A test in the same suite
|
||||
* asserts both screens carry every key below, which is the drift guard the shared markup would have
|
||||
* been.
|
||||
*/
|
||||
|
||||
import { REVENUE_MAX, REVENUE_MIN } from '../engine/content.ts';
|
||||
import type { ExtraStartRule, StartingHand } from '../engine/content.ts';
|
||||
import { closestPreset, differencesFrom, presetOf, presetSettings, settingsOf } from './presets.ts';
|
||||
import type { PresetName, Settings } from './presets.ts';
|
||||
import type { GameConfig } from '../engine/state.ts';
|
||||
|
||||
/**
|
||||
* How each rule is asked on screen.
|
||||
*
|
||||
* `gated` is the pair introduced 2026-08-23: a checkbox that says whether the condition applies at
|
||||
* all, plus the number it applies at. The engine's convention is that `0` switches these off, which
|
||||
* is exact but unreadable — a Cutthroat game showed two zeroes and left the player to know the
|
||||
* convention. Unchecked still WRITES 0, so nothing under this changed.
|
||||
*/
|
||||
type Field =
|
||||
| { key: keyof Settings; kind: 'radio'; id: string }
|
||||
| { key: keyof Settings; kind: 'number'; id: string }
|
||||
| { key: keyof Settings; kind: 'checkbox'; id: string }
|
||||
| { key: keyof Settings; kind: 'gated'; id: string };
|
||||
|
||||
export const FIELDS: readonly Field[] = [
|
||||
{ key: 'startingHand', kind: 'radio', id: 'hand' },
|
||||
{ key: 'extraStart', kind: 'radio', id: 'extra' },
|
||||
{ key: 'passengerPerCoach', kind: 'number', id: 'passenger' },
|
||||
{ key: 'freightPerLoad', kind: 'number', id: 'freight' },
|
||||
{ key: 'trainPerTransit', kind: 'number', id: 'transit' },
|
||||
{ key: 'minCombinedRevenue', kind: 'gated', id: 'minrev' },
|
||||
{ key: 'maxCollisionsPerDay', kind: 'gated', id: 'colday' },
|
||||
{ key: 'maxCollisionsTotal', kind: 'gated', id: 'coltotal' },
|
||||
{ key: 'reducedVisibility', kind: 'checkbox', id: 'visibility' },
|
||||
{ key: 'employeeRotation', kind: 'checkbox', id: 'rotation' },
|
||||
{ key: 'emergencyToolbox', kind: 'checkbox', id: 'toolbox' },
|
||||
];
|
||||
|
||||
/**
|
||||
* What `play.html` must contain for a screen to be able to ask all eleven questions — the exact
|
||||
* attribute text, so `test/web.test.ts` can assert it against the built page.
|
||||
*
|
||||
* THIS IS THE DRIFT GUARD. The two blocks are generated from one template today; this is what says
|
||||
* so tomorrow, when someone edits one of them by hand.
|
||||
*/
|
||||
export function fieldSelectors(prefix: string): string[] {
|
||||
const out: string[] = [];
|
||||
for (const f of FIELDS) {
|
||||
// A radio group is addressed by NAME — there is no one element carrying the field's id.
|
||||
out.push(f.kind === 'radio' ? `name="${prefix}${f.id}"` : `id="${prefix}${f.id}"`);
|
||||
if (f.kind === 'gated') out.push(`id="${prefix}${f.id}-on"`);
|
||||
out.push(`id="${prefix}${f.id}-row"`, `id="${prefix}${f.id}-hint"`);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/** The label each field goes under in the read-only view below. */
|
||||
const FIELD_LABELS: Record<keyof Settings, string> = {
|
||||
startingHand: 'Starting hand',
|
||||
extraStart: 'An Extra may start at',
|
||||
passengerPerCoach: 'Passenger per coach',
|
||||
freightPerLoad: 'Freight per load',
|
||||
trainPerTransit: 'Train per transit',
|
||||
minCombinedRevenue: 'Combined Revenue floor',
|
||||
maxCollisionsPerDay: 'Collisions in one Day',
|
||||
maxCollisionsTotal: 'Collisions in the game',
|
||||
reducedVisibility: 'Reduced Visibility',
|
||||
employeeRotation: 'Employee Rotation',
|
||||
emergencyToolbox: 'Emergency Toolbox',
|
||||
};
|
||||
|
||||
const esc = (s: string): string =>
|
||||
s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
|
||||
/**
|
||||
* THE WHOLE RULE SET, READ-ONLY — what a player weighing a join reads before taking a seat, and what
|
||||
* the seating screen keeps showing afterwards.
|
||||
*
|
||||
* Generated rather than a fourth copy of the form: nobody may change these, so form controls would
|
||||
* be a lie, and a `<dl>` says "this is what you are joining" in a third of the space. Fields that
|
||||
* differ from the nearest named type are amber here for the same reason they are amber in the form —
|
||||
* a non-standard game should never be a surprise.
|
||||
*/
|
||||
export function rulesListHtml(config: GameConfig, players: number, days: number): string {
|
||||
const settings = settingsOf(config);
|
||||
const type = presetOf(config, players, days);
|
||||
const near = closestPreset(config, players, days);
|
||||
const differing = type === 'custom' ? near.differing : [];
|
||||
|
||||
const rows = (keys: (keyof Settings)[]): string =>
|
||||
keys
|
||||
.map((k) => {
|
||||
const changed = differing.includes(k) ? ' class="changed"' : '';
|
||||
return `<dt>${esc(FIELD_LABELS[k])}</dt><dd${changed}>${esc(describe(k, settings[k]))}</dd>`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
const head =
|
||||
`<dl><dt>Players</dt><dd>${players}</dd><dt>Days</dt><dd>${days}</dd>` +
|
||||
`<dt>Opponent-directed cards</dt><dd>not implemented yet</dd></dl>`;
|
||||
|
||||
return (
|
||||
head +
|
||||
`<h4>Opening</h4><dl>${rows(['startingHand', 'extraStart'])}</dl>` +
|
||||
`<h4>Revenue</h4><dl>${rows(['passengerPerCoach', 'freightPerLoad', 'trainPerTransit'])}</dl>` +
|
||||
`<h4>Victory conditions</h4><dl>${rows(['minCombinedRevenue', 'maxCollisionsPerDay', 'maxCollisionsTotal'])}</dl>` +
|
||||
`<h4>Optional rules</h4><dl>${rows(['reducedVisibility', 'employeeRotation', 'emergencyToolbox'])}</dl>`
|
||||
);
|
||||
}
|
||||
|
||||
/** What a value looks like beside its label — "Co-op default: 75", "Co-op default: six random cards". */
|
||||
function describe(key: keyof Settings, value: Settings[keyof Settings]): string {
|
||||
if (typeof value === 'boolean') return value ? 'on' : 'off';
|
||||
if (key === 'startingHand') {
|
||||
const words: Record<StartingHand, string> = {
|
||||
threeRandom: 'three random',
|
||||
sixRandom: 'six random',
|
||||
threeTrackThreeOther: 'three track and three other',
|
||||
};
|
||||
return words[value as StartingHand];
|
||||
}
|
||||
if (key === 'extraStart') {
|
||||
const words: Record<ExtraStartRule, string> = {
|
||||
divisionPointsOnly: 'Division Points only',
|
||||
ownOffice: 'your own Control Point',
|
||||
anyOffice: 'any Control Point',
|
||||
};
|
||||
return words[value as ExtraStartRule];
|
||||
}
|
||||
// A victory condition at 0 is not "0" on screen, it is a condition that does not apply.
|
||||
if (value === 0 && (key === 'minCombinedRevenue' || key === 'maxCollisionsPerDay' || key === 'maxCollisionsTotal')) {
|
||||
return 'off';
|
||||
}
|
||||
return String(value);
|
||||
}
|
||||
|
||||
export type SettingsForm = {
|
||||
read(): Settings;
|
||||
/** `suggestions` fills the placeholder of a switched-off condition, so ticking it back on has a
|
||||
* number to offer rather than an empty box. */
|
||||
write(values: Settings, suggestions: Settings): void;
|
||||
/**
|
||||
* Paint the block against a named type: every field that differs goes amber and every field gets
|
||||
* its "<Type> default: x" hint. Returns what differs, for the summary line the screen draws.
|
||||
*/
|
||||
mark(name: PresetName, players: number, days: number): (keyof Settings)[];
|
||||
/** Custom with no named baseline to compare against — clears the paint rather than lying. */
|
||||
clearMarks(): void;
|
||||
/** Called whenever the player changes any rule; the screen answers by selecting Custom. */
|
||||
onEdit(fn: (key: keyof Settings) => void): void;
|
||||
/** Read-only for the join preview and the seating screen: shown in full, changeable by nobody. */
|
||||
setEditable(on: boolean): void;
|
||||
/** Employee Rotation is meaningless at one player — disabled with a note rather than hidden, so
|
||||
* the two screens still read the same. */
|
||||
setEmployeeRotationAvailable(on: boolean): void;
|
||||
};
|
||||
|
||||
const $ = <T extends HTMLElement = HTMLElement>(id: string): T | null =>
|
||||
document.getElementById(id) as T | null;
|
||||
|
||||
export function settingsForm(prefix: string): SettingsForm {
|
||||
const el = <T extends HTMLElement = HTMLElement>(id: string): T | null => $<T>(`${prefix}${id}`);
|
||||
const radios = (name: string): HTMLInputElement[] =>
|
||||
Array.from(document.querySelectorAll<HTMLInputElement>(`input[name="${prefix}${name}"]`));
|
||||
const checkedRadio = (name: string): string | null =>
|
||||
radios(name).find((r) => r.checked)?.value ?? null;
|
||||
|
||||
let editHandler: ((key: keyof Settings) => void) | null = null;
|
||||
let editable = true;
|
||||
|
||||
function num(id: string, fallback: number): number {
|
||||
const raw = el<HTMLInputElement>(id)?.value ?? '';
|
||||
return raw.trim() === '' || !Number.isFinite(Number(raw)) ? fallback : Math.round(Number(raw));
|
||||
}
|
||||
|
||||
function readGated(id: string): number {
|
||||
// Unchecked IS zero — the engine's "off". The number in the box is kept so re-ticking restores it.
|
||||
if (el<HTMLInputElement>(`${id}-on`)?.checked !== true) return 0;
|
||||
return Math.max(0, num(id, 0));
|
||||
}
|
||||
|
||||
function read(): Settings {
|
||||
return {
|
||||
startingHand: (checkedRadio('hand') ?? 'sixRandom') as StartingHand,
|
||||
extraStart: (checkedRadio('extra') ?? 'anyOffice') as ExtraStartRule,
|
||||
passengerPerCoach: clampRevenue(num('passenger', 1)),
|
||||
freightPerLoad: clampRevenue(num('freight', 1)),
|
||||
trainPerTransit: clampRevenue(num('transit', 0)),
|
||||
minCombinedRevenue: readGated('minrev'),
|
||||
maxCollisionsPerDay: readGated('colday'),
|
||||
maxCollisionsTotal: readGated('coltotal'),
|
||||
reducedVisibility: el<HTMLInputElement>('visibility')?.checked === true,
|
||||
employeeRotation: el<HTMLInputElement>('rotation')?.checked === true,
|
||||
emergencyToolbox: el<HTMLInputElement>('toolbox')?.checked === true,
|
||||
};
|
||||
}
|
||||
|
||||
function write(values: Settings, suggestions: Settings): void {
|
||||
for (const r of radios('hand')) r.checked = r.value === values.startingHand;
|
||||
for (const r of radios('extra')) r.checked = r.value === values.extraStart;
|
||||
setNumber('passenger', values.passengerPerCoach);
|
||||
setNumber('freight', values.freightPerLoad);
|
||||
setNumber('transit', values.trainPerTransit);
|
||||
writeGated('minrev', values.minCombinedRevenue, suggestions.minCombinedRevenue);
|
||||
writeGated('colday', values.maxCollisionsPerDay, suggestions.maxCollisionsPerDay);
|
||||
writeGated('coltotal', values.maxCollisionsTotal, suggestions.maxCollisionsTotal);
|
||||
setChecked('visibility', values.reducedVisibility);
|
||||
setChecked('rotation', values.employeeRotation);
|
||||
setChecked('toolbox', values.emergencyToolbox);
|
||||
}
|
||||
|
||||
function setNumber(id: string, value: number): void {
|
||||
const input = el<HTMLInputElement>(id);
|
||||
if (input) input.value = String(value);
|
||||
}
|
||||
|
||||
function setChecked(id: string, on: boolean): void {
|
||||
const input = el<HTMLInputElement>(id);
|
||||
if (input) input.checked = on;
|
||||
}
|
||||
|
||||
function writeGated(id: string, value: number, suggestion: number): void {
|
||||
const box = el<HTMLInputElement>(`${id}-on`);
|
||||
const input = el<HTMLInputElement>(id);
|
||||
if (box) box.checked = value > 0;
|
||||
if (input) {
|
||||
// A switched-off condition shows an empty box with the suggestion as its placeholder, rather
|
||||
// than a `0` the player has to decode.
|
||||
input.value = value > 0 ? String(value) : '';
|
||||
input.placeholder = String(suggestion);
|
||||
input.disabled = !editable || value === 0;
|
||||
}
|
||||
}
|
||||
|
||||
function mark(name: PresetName, players: number, days: number): (keyof Settings)[] {
|
||||
const want = presetSettings(name, players, days);
|
||||
const differing = differencesFrom(name, read(), players, days);
|
||||
const label = presetLabelOf(name);
|
||||
for (const f of FIELDS) {
|
||||
const row = el(`${f.id}-row`);
|
||||
const hint = el(`${f.id}-hint`);
|
||||
const off = differing.includes(f.key);
|
||||
row?.classList.toggle('changed', off);
|
||||
if (hint) hint.textContent = `${label} default: ${describe(f.key, want[f.key])}`;
|
||||
}
|
||||
return differing;
|
||||
}
|
||||
|
||||
function clearMarks(): void {
|
||||
for (const f of FIELDS) {
|
||||
el(`${f.id}-row`)?.classList.remove('changed');
|
||||
const hint = el(`${f.id}-hint`);
|
||||
if (hint) hint.textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
function setEditable(on: boolean): void {
|
||||
editable = on;
|
||||
for (const f of FIELDS) {
|
||||
if (f.kind === 'radio') {
|
||||
for (const r of radios(f.id)) r.disabled = !on;
|
||||
continue;
|
||||
}
|
||||
const input = el<HTMLInputElement>(f.id);
|
||||
if (input) {
|
||||
// A gated number stays disabled when its own condition is off, whatever the block's state.
|
||||
const gatedOff = f.kind === 'gated' && el<HTMLInputElement>(`${f.id}-on`)?.checked !== true;
|
||||
input.disabled = !on || gatedOff;
|
||||
}
|
||||
if (f.kind === 'gated') {
|
||||
const box = el<HTMLInputElement>(`${f.id}-on`);
|
||||
if (box) box.disabled = !on;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setEmployeeRotationAvailable(on: boolean): void {
|
||||
const input = el<HTMLInputElement>('rotation');
|
||||
if (input) {
|
||||
input.disabled = !on || !editable;
|
||||
if (!on) input.checked = false;
|
||||
}
|
||||
el('rotation-row')?.classList.toggle('unavailable', !on);
|
||||
}
|
||||
|
||||
/** One change handler for every control — the screens all answer it the same way (select Custom). */
|
||||
for (const f of FIELDS) {
|
||||
const fire = (): void => editHandler?.(f.key);
|
||||
if (f.kind === 'radio') {
|
||||
for (const r of radios(f.id)) r.onchange = fire;
|
||||
continue;
|
||||
}
|
||||
const input = el<HTMLInputElement>(f.id);
|
||||
if (input) {
|
||||
input.oninput = fire;
|
||||
input.onchange = fire;
|
||||
}
|
||||
if (f.kind === 'gated') {
|
||||
const box = el<HTMLInputElement>(`${f.id}-on`);
|
||||
if (box) {
|
||||
box.onchange = () => {
|
||||
const number = el<HTMLInputElement>(f.id);
|
||||
if (number) {
|
||||
number.disabled = !box.checked || !editable;
|
||||
// Ticking a condition back on with an empty box takes the suggestion showing in it,
|
||||
// so "on" never means "on, at zero".
|
||||
if (box.checked && number.value.trim() === '') number.value = number.placeholder;
|
||||
}
|
||||
fire();
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
read,
|
||||
write,
|
||||
mark,
|
||||
clearMarks,
|
||||
onEdit: (fn) => void (editHandler = fn),
|
||||
setEditable,
|
||||
setEmployeeRotationAvailable,
|
||||
};
|
||||
}
|
||||
|
||||
function clampRevenue(n: number): number {
|
||||
return Math.max(REVENUE_MIN, Math.min(REVENUE_MAX, n));
|
||||
}
|
||||
|
||||
/** Kept local rather than imported from `presets.ts`'s `preset()`, which would drag the whole table
|
||||
* in for one word — and this is the only place a hint needs it. */
|
||||
function presetLabelOf(name: PresetName): string {
|
||||
const labels: Record<PresetName, string> = {
|
||||
solitaire: 'Solitaire',
|
||||
coop: 'Co-op',
|
||||
competitive: 'Competitive',
|
||||
cutthroat: 'Cutthroat',
|
||||
};
|
||||
return labels[name];
|
||||
}
|
||||
Reference in New Issue
Block a user