0 Fork 0

Files

T

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2026-10-29 02:31:33 +01:00

08 Sea chart + log line: report

Status: done. Not committed.

The screen is split in two:

Top two thirds: an Admiralty-style chart that shows where. It has buff land with hachure and shallow-water bands, soundings, a graticule and a compass rose. The course is drawn in chart magenta, and songs are numbered ports.
Bottom third: a horizontal log line in the style of 01 that shows when. Gap length tracks in-story years (156px per song plus 300px per year). Years at sea are drawn as a magenta swell with a "1 year at sea" label. The year boundaries are marked "year 0/1/2/3" along the top. Seven motif lanes run underneath.

The two halves are synced:

Hovering or dragging along the log moves the ship along the course, and the chart zooms to 1.5× around the ship. The cursor shows a readout such as "year 1, Warrior of the Mind" or "year 2, at sea". 600ms after you leave the log, the chart eases back out.
Clicking a port selects the song and smooth-scrolls the log to it.
Clicking a log entry selects the song and focuses the chart on that port. The port sits at about 36% of the chart width, so the 380px detail panel doesn't cover it.

Motifs are selected from a sticky legend or from the chips in the detail panel.

Course legs where both songs carry the motif turn solid in the motif's colour. Legs where the motif skips a port are dotted.
Ports that carry the motif get a ring, and the rest fade.
The other lanes in the log fade.
Each lane shows one box per part, filled where the motif plays, so motifs read at part level.

Overlay (?overlay=1): the same chart and log sit in a compact 1180×740 panel over a dark sea gradient, under a "You are here: Survive" bar.

Clicking a port opens a popover beside it, with the port, title, the time ahead or back, and a Sail here button. The button animates the ship along the course and updates "You are here".
Scrubbing the log shows a dashed probe ring instead of moving the ship.
The credits are fixed at the bottom of the viewport.

URL state is kept in ?song, ?motif and ?overlay via replaceState.

What works

Where and when are both readable at a glance, with no hunting. The chart shows all 10 port titles and the saga sea-areas. The log shows every title, story label, saga bracket and year boundary.
Scrubbing is the strongest part. It plays the voyage back like a film strip, and the long swell between Open Arms and Warrior of the Mind physically shows the lost year.
Motifs read well on both halves. For example, Warrior of the Mind is solid only on Warrior→Polyphemus and dotted elsewhere.
The overlay proves that one chart serves both uses. I verified "Sail here" from Survive to My Goodbye end to end.
Every sync path was verified in headless Chrome over CDP:
- log scrub → chart viewBox and ship;
- port click → ?song=, log scrollLeft, and the detail panel;
- overlay port → popover → sail.

The log is a scroll strip, so only about 6 of the 10 songs are visible at once. "When" is never in full view the way "where" is. A minimap or a squeeze-to-fit mode would help.
Saga bracket names scroll under the sticky legend and get clipped (for example "…Cyclops Saga" in the overlay). They should stick to the left edge.
Labels on steep course legs are hard to read. The "1 year at sea" label on the chart follows the leg, so it reads at a steep angle.
The ship rides offset away from each port's label, so at Survive it sits on the island's shore band.
The overlay has no idea of 3D camera context. It is a gradient stand-in only.
Desktop 1440×900 only. Nothing is responsive.
The port label offsets in geo.ts are hand-tuned. Real data with more songs would need a label-placement pass.

screenshots/08-chart-logline-default.png
screenshots/08-chart-logline-motif.png (?motif=warrior)
screenshots/08-chart-logline-song.png (?song=polyphemus)
screenshots/08-chart-logline-overlay.png (?overlay=1&song=my-goodbye)
screenshots/08-chart-logline-scrub.png (extra: mid-scrub, chart zoomed onto the ship)

bun run typecheck: passes.
bun test: 41 pass and 1 fail. The failure is registry has 7 mockups in tests/server.test.ts. It already fails at HEAD, because commit 52feed5 grew the registry to 11 without updating the test. That is outside this spike's folder.
Build: a scratch outdir build of the real tree succeeds.
- Midway through, the build failed with "Multiple files share the same output path" because spikes 09, 10 and 11 had identical in-progress CSS.
- While that was happening, I built from a scratch copy, adding a marker rule to their CSS in the copy only.
- That collision has since cleared.