Jesse.Markowitz/station-master
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

v0.7.0 — four game types, a lobby you can read and leave, and a multiplayer game that makes a sound

Browse Source 
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
2026-08-23 05:46:42 -04:00
co-authored by Claude Opus 5
parent 42adfda390
commit 06db36e5b5
41 changed files with 4387 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/lobby.ts
+519 -135
View File
@@ -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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}