Draw the board as track, split the site into three pages, and fix curve geometry
Adds SVG board rendering shared by the game and the replay, a splash page with a shareable replay directory, hover tooltips for reference detail, and makes curves two-port arcs so sidings and run-arounds can finally be built.
This commit is contained in:
Jesse
+89
-106
@@ -5,6 +5,8 @@
|
||||
* is answered by the engine or by the shared view helpers.
|
||||
*/
|
||||
|
||||
import { BOARD_CSS, divisionSvg, ghostSvg, officeSvg } from '../sim/board-svg.ts';
|
||||
import { TOOLTIP_CSS, installTooltips } from './tooltip.ts';
|
||||
import type { Game } from './game.ts';
|
||||
import {
|
||||
actionMenu,
|
||||
@@ -73,99 +75,46 @@ function render(): void {
|
||||
$('seed').textContent = String(game.seed);
|
||||
|
||||
// -- division
|
||||
$('division').innerHTML = f.division
|
||||
.map(
|
||||
(n) =>
|
||||
`<div class="node ${n.kind === 'office' ? 'office' : ''}">` +
|
||||
`<div class="nm">${esc(n.label)}` +
|
||||
(n.gradeUp
|
||||
? ` <span class="grade">${n.gradeUp === 'east' ? 'climbs E ▲' : '▲ W climbs'}</span>`
|
||||
: '') +
|
||||
`</div>` +
|
||||
(n.modifiers.length ? `<div class="mlmods">${n.modifiers.map(esc).join(' · ')}</div>` : '') +
|
||||
`<div class="regions">` +
|
||||
n.trains
|
||||
.map(
|
||||
(r) =>
|
||||
`<div class="region">` +
|
||||
r
|
||||
.map(
|
||||
(t) =>
|
||||
`<span class="chip">${esc(t.label)}</span>` +
|
||||
`<div class="consist">${t.consist.length ? esc(t.consist.join(', ')) : 'empty'}</div>`,
|
||||
)
|
||||
.join('') +
|
||||
`</div>`,
|
||||
)
|
||||
.join('') +
|
||||
`</div></div>`,
|
||||
)
|
||||
.join('');
|
||||
$('division').innerHTML = divisionSvg(f.division);
|
||||
|
||||
// -- grid
|
||||
// Include the legal squares in the bounds. A placement is usually just OUTSIDE the current
|
||||
// extent — that is what extending the district means — so a grid sized to the existing cards
|
||||
// would highlight nothing at exactly the moment highlighting matters.
|
||||
const spotCoords = [...spotsAt.keys()].map((k) => k.split(',').map(Number));
|
||||
const rows = [...f.cells.map((c) => c.row), ...spotCoords.map((c) => c[0]!)];
|
||||
const cols = [...f.cells.map((c) => c.col), ...spotCoords.map((c) => c[1]!)];
|
||||
const r0 = Math.min(...rows);
|
||||
const r1 = Math.max(...rows);
|
||||
const c0 = Math.min(...cols);
|
||||
const c1 = Math.max(...cols);
|
||||
// -- board. Both renderers are shared with the replay so the two can never draw different
|
||||
// pictures of the same position.
|
||||
const grid = $('grid');
|
||||
grid.style.gridTemplateColumns = `repeat(${c1 - c0 + 1}, minmax(104px, 1fr))`;
|
||||
let cells = '';
|
||||
for (let r = r1; r >= r0; r--) {
|
||||
for (let c = c0; c <= c1; c++) {
|
||||
const cell = f.cells.find((x) => x.row === r && x.col === c);
|
||||
const spots = spotsAt.get(`${r},${c}`);
|
||||
if (!cell) {
|
||||
// An empty square is still a legal destination — render it as a target rather than a gap,
|
||||
// or the most common placement of all would have nothing to click.
|
||||
cells += spots
|
||||
? `<div class="cell ghost legal" data-at="${r},${c}">` +
|
||||
`<div class="nm">place here</div><div class="dim coord">(${r},${c})</div>` +
|
||||
(spots.length > 1 ? `<div class="dim">${spots.length} rotations</div>` : '') +
|
||||
`</div>`
|
||||
: '<div></div>';
|
||||
continue;
|
||||
}
|
||||
// The full explanation goes in `title` so hovering any card says what it does, with a short
|
||||
// version printed on the card itself — a name alone tells a player nothing once it is played.
|
||||
cells +=
|
||||
`<div class="cell ${cell.running ? 'run ' : ''}${cell.kind === 'office' ? 'office ' : ''}` +
|
||||
`${cell.kind === 'modifier' ? 'modifier ' : ''}${spots ? 'legal' : ''}"` +
|
||||
`${spots ? ` data-at="${r},${c}"` : ''} title="${esc(cell.label)} — ${esc(cell.what)}">` +
|
||||
`<div class="nm">${esc(cell.label)}</div>` +
|
||||
`<div class="dim coord">(${r},${c})</div>` +
|
||||
`<div class="dim what">${esc(short(cell.what))}</div>` +
|
||||
(cell.enhancements.length
|
||||
? `<div class="enh">${cell.enhancements.map(esc).join(' · ')}</div>`
|
||||
: '') +
|
||||
(cell.tray ? `<div class="crew">🚂 ${esc(cell.tray)}</div>` : '') +
|
||||
(cell.cars.length ? `<div class="cars">${esc(cell.cars.join(', '))}</div>` : '') +
|
||||
`</div>`;
|
||||
grid.innerHTML = officeSvg(f.cells, f.runningRow);
|
||||
|
||||
// Highlighting rides on top of the drawing: outline the legal squares and make them clickable.
|
||||
for (const [key, list] of spotsAt) {
|
||||
const [gr, gc] = key.split(',').map(Number);
|
||||
const g = grid.querySelector(`g[data-cell="${gr},${gc}"]`);
|
||||
if (g) {
|
||||
g.classList.add('bs-legal');
|
||||
(g as unknown as HTMLElement).onclick = () => pick(key, list);
|
||||
}
|
||||
}
|
||||
// A legal EMPTY square has no card to outline, so draw a target for it.
|
||||
const ghosts = [...spotsAt.entries()].filter(([k]) => !f.cells.some((c) => `${c.row},${c.col}` === k));
|
||||
if (ghosts.length > 0) {
|
||||
const coords = ghosts.map(([k]) => {
|
||||
const [gr, gc] = k.split(',').map(Number);
|
||||
return { row: gr!, col: gc! };
|
||||
});
|
||||
grid.innerHTML = grid.innerHTML.replace('</svg>', ghostSvg(coords, f.cells, f.runningRow) + '</svg>');
|
||||
for (const [key, list] of ghosts) {
|
||||
const g = grid.querySelector(`g[data-ghost="${key}"]`);
|
||||
if (g) (g as unknown as HTMLElement).onclick = () => pick(key, list);
|
||||
}
|
||||
}
|
||||
grid.innerHTML = cells;
|
||||
|
||||
// Clicking a highlighted square plays there. With more than one rotation available it narrows to
|
||||
// that square instead, so the rotation is a second click rather than a guess.
|
||||
for (const el of Array.from(grid.querySelectorAll('[data-at]'))) {
|
||||
const node = el as HTMLElement;
|
||||
node.onclick = () => {
|
||||
const spots = spotsAt.get(node.dataset['at'] ?? '') ?? [];
|
||||
if (spots.length === 1) {
|
||||
const intent = menu.options[spots[0]!.index];
|
||||
if (intent) submit(game, intent);
|
||||
selected = null;
|
||||
pendingAt = null;
|
||||
} else if (spots.length > 1) {
|
||||
pendingAt = node.dataset['at'] ?? null;
|
||||
}
|
||||
render();
|
||||
};
|
||||
function pick(key: string, list: { label: string; index: number }[]): void {
|
||||
if (list.length === 1) {
|
||||
const intent = menu.options[list[0]!.index];
|
||||
if (intent) submit(game, intent);
|
||||
selected = null;
|
||||
pendingAt = null;
|
||||
} else {
|
||||
pendingAt = key;
|
||||
}
|
||||
render();
|
||||
}
|
||||
|
||||
// -- facilities
|
||||
@@ -175,8 +124,8 @@ function render(): void {
|
||||
: f.facilities
|
||||
.map(
|
||||
(x) =>
|
||||
`<div class="fac"><div class="nm">${esc(x.name)}</div>` +
|
||||
`<div class="dim">${esc(x.commodity)} · ${esc(x.flow)} · laborers ${esc(x.laborers)}</div>` +
|
||||
`<div class="fac" data-tip="${esc(x.name)} — ${esc(x.flow)} ${esc(x.commodity)} · laborers ${esc(x.laborers)} · porters ${esc(x.porters)}" tabindex="0">` +
|
||||
`<div class="nm">${esc(x.name)} <span class="dim">${esc(x.commodity)}</span></div>` +
|
||||
`<div class="boxes"><span class="dim">green</span>${boxes(x.green, x.greenCap)}</div>` +
|
||||
`<div class="boxes"><span class="dim">MEN AT WORK</span>` +
|
||||
x.maw
|
||||
@@ -187,21 +136,24 @@ function render(): void {
|
||||
`</div>` +
|
||||
`<div class="boxes"><span class="dim">red</span>${boxes(x.red, x.redCap)}</div>` +
|
||||
`<div class="boxes"><span class="dim">siding</span>${boxes(x.track, x.trackCap)}</div>` +
|
||||
`<div class="fstat ${x.jammed ? 'bad' : x.canFinish ? 'good' : 'idle'}">` +
|
||||
(x.jammed
|
||||
? 'JAMMED — a load is on WORK with no car spotted; the siding is locked'
|
||||
: x.canFinish
|
||||
? 'ready — a matching empty car is spotted'
|
||||
: 'no car spotted — a load started here would jam') +
|
||||
`<div class="fstat ${x.jammed ? 'bad' : x.canFinish ? 'good' : 'idle'}" data-tip="${
|
||||
x.jammed
|
||||
? 'A load is sitting on MEN|AT|WORK with no spotted car to receive it. That locks the industry track, which blocks the very car that would clear it (§9.3).'
|
||||
: x.canFinish
|
||||
? 'A matching empty car is spotted on the siding, so a load worked here can come off onto it.'
|
||||
: 'No matching car is spotted. Starting a load here would park it on WORK and jam the facility.'
|
||||
}">` +
|
||||
(x.jammed ? 'JAMMED' : x.canFinish ? 'ready' : 'no car spotted') +
|
||||
`</div></div>`,
|
||||
)
|
||||
.join('');
|
||||
|
||||
// Name AND effect. A hand of names alone tells a player nothing about what they can do.
|
||||
// Name and status stay on the page; what the card DOES is reference detail, so it hovers.
|
||||
const cardRow = (name: string, why: string, playable: boolean | null): string =>
|
||||
`<div class="handcard${playable === false ? ' unplayable' : ''}"><b>${esc(name)}</b>` +
|
||||
(playable === false ? ' <span class="tag">not playable yet</span>' : '') +
|
||||
(why ? `<div class="dim what">${esc(why)}</div>` : '') +
|
||||
`<div class="handcard${playable === false ? ' unplayable' : ''}"${why ? ` data-tip="${esc(why)}"` : ''} tabindex="0">` +
|
||||
`<b>${esc(name)}</b>` +
|
||||
(playable === false ? ' <span class="tag">not yet</span>' : '') +
|
||||
`</div>`;
|
||||
|
||||
const canPlay = handPlayable(game);
|
||||
@@ -241,12 +193,6 @@ function render(): void {
|
||||
save();
|
||||
}
|
||||
|
||||
/** First clause only — the cards are small, and the full text is on the tooltip. */
|
||||
function short(what: string): string {
|
||||
const head = what.split(' · ')[0] ?? what;
|
||||
return head.length > 64 ? head.slice(0, 61) + '…' : head;
|
||||
}
|
||||
|
||||
function boxes(items: string[], cap: number): string {
|
||||
let out = '';
|
||||
for (let i = 0; i < Math.max(cap, items.length); i++) {
|
||||
@@ -286,11 +232,22 @@ function renderActions(menu: ReturnType<typeof actionMenu>): void {
|
||||
render();
|
||||
};
|
||||
|
||||
// A long label is two things: the action, and why it is offered. Put the first on the button and
|
||||
// the second on the tooltip, or the list crowds out the board.
|
||||
const actionButton = (label: string, index: number): string => {
|
||||
const cut = label.indexOf(' — ');
|
||||
const head = cut > 0 ? label.slice(0, cut) : label;
|
||||
const rest = cut > 0 ? label.slice(cut + 3) : '';
|
||||
return (
|
||||
`<button class="act" data-i="${index}"${rest ? ` data-tip="${esc(rest)}"` : ''}>${esc(head)}</button>`
|
||||
);
|
||||
};
|
||||
|
||||
let html = menu.direct
|
||||
.map(
|
||||
(g) =>
|
||||
`<div class="grp"><h3>${esc(g.title)}</h3>` +
|
||||
g.actions.map((a) => `<button class="act" data-i="${a.index}">${esc(a.label)}</button>`).join('') +
|
||||
g.actions.map((a) => actionButton(a.label, a.index)).join('') +
|
||||
`</div>`,
|
||||
)
|
||||
.join('');
|
||||
@@ -341,6 +298,24 @@ function renderActions(menu: ReturnType<typeof actionMenu>): void {
|
||||
// Saving. localStorage only — nothing leaves the browser.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Write the game out as a file.
|
||||
*
|
||||
* The save IS the replay: a seed and the moves made, which the engine can replay exactly. A few
|
||||
* hundred bytes, so a finished game can be emailed or dropped on the site's replay directory —
|
||||
* where a rendered page would have been megabytes.
|
||||
*/
|
||||
function downloadSave(): void {
|
||||
const data = JSON.stringify(toSave(game), null, 1);
|
||||
const blob = new Blob([data], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `station-master-seed${game.seed}-day${game.state.clock.day}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function save(): void {
|
||||
try {
|
||||
localStorage.setItem(SAVE_KEY, JSON.stringify(toSave(game)));
|
||||
@@ -366,4 +341,12 @@ function clearSave(): void {
|
||||
}
|
||||
}
|
||||
|
||||
const tipStyle = document.createElement('style');
|
||||
tipStyle.textContent = TOOLTIP_CSS;
|
||||
document.head.appendChild(tipStyle);
|
||||
installTooltips();
|
||||
|
||||
const saveBtn = document.getElementById('savefile');
|
||||
if (saveBtn) saveBtn.onclick = downloadSave;
|
||||
|
||||
start();
|
||||
|
||||
Reference in New Issue
Block a user