lucasw89/Epic-The-Musical-Timeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mockups): 11 atlas with insets spike; round notes updated

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas Winther
2026-10-29 02:50:33 +01:00
co-authored by Claude Opus 5.5
parent a422234970
commit 65b5aa0d00
5 changed files with 1379 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/002-direction-round-notes.md
+6
View File
@@ -124,6 +124,12 @@ This file exists because of that request. It gets updated after every user messa
- Resumed from section 7. Spikes 08, 09 and 10 were redispatched (3 concurrent), each continuing from its saved report.
- Spike 11 follows when a slot frees.
- **All four spikes are finished and committed on `feat/sea-chart-round`.** Each final report is in `docs/design/002-sea-chart-spikes/<slug>-report.md`.
- 08 Sea chart + log line: a full Admiralty-style chart on top, synced to an editorial log line below.
- 09 Schematic sea chart: an octilinear transit diagram over a faint chart, with a slider that morphs it into rough true geography.
- 10 Unrolling chart: the editorial scroll drawn on a vellum portolan, with a ship marker and a minimap.
- 11 Atlas with insets: an overview of the whole voyage on one screen; each island opens an atlas plate.
- The preview at http://10.20.20.2:8099/ was rebuilt from this branch so the user can compare them.
## Open questions (in priority order)
docs/design/002-sea-chart-spikes/11-chart-atlas-report.md
+60
View File
@@ -0,0 +1,60 @@
# 11-chart-atlas: Atlas with insets (final report)
Status: done. Built into my own outdir, served on port 4111, checked in headless Chrome at 1440×900 and driven with Playwright (clicks, arrow keys, Esc, Sail here). `bun test` (42 pass) and `bun run typecheck` pass. The style.css is unique even with comments stripped. Nothing is committed.
## Navigation idea
Two-level navigation, like a bound atlas: a general chart of the whole voyage, then one inset plate per saga. This mirrors the planned 3D landings.
- **Look.** Slate book cloth around a cool paper plate. The plate has a checkered degree neatline, engraved water-lining around the coasts, and hand-tinted islands (Troy rose, Cyclops' Island sap green, the storm a prussian wash). It deliberately avoids 08's pale Admiralty look, 09's white schematic and 10's brown scroll.
- **General chart (overview).** The whole voyage is on screen at once, with no scrolling: the Troy mainland, Cyclops' Island, and the open sea with its storm spiral, joined by a dashed course with numbered ports.
- Each place has a label block with the place name, saga and plate number, song count and year span ("5 songs, years 0 to 1"), plus a numbered track list. That way every song title can be read from the overview.
- "A year passes" and "two years at sea" are written on the crossings.
- A cartouche reads "The voyage from Troy … Choose an island to open its plate."
- **Motif at overview level.** Islands where the selected motif plays get a halo in the motif colour and a count badge ("Polyphemus plays in 2 of 4"). Places where it never plays dim and get a dashed "… is silent here" badge. Matching ports and track rows are tinted.
- **Inset plates.** Clicking an island animates the SVG viewBox into that island (about 0.5s, skipped under reduced motion), then swaps in its plate.
- Each plate has a title cartouche ("Plate II / Cyclops' Island / The Cyclops Saga, tracks 6 to 9 / Year 1") and a locator key map of the general chart, top right, with the plate's area boxed. Clicking the locator takes you back out.
- The **scale bar is a scale of story time**: alternating bar segments sit under the ports, with year ticks where the year changes and "a year passes" written on the gap.
- Songs are ports on a straight local course, each with its track number, title and italic story time. A new year drops the course by one diagonal step, and the year gap is stretched.
- **Motif lines, transit-style.** Each theme that plays on a plate runs parallel to the course. A line is solid next to the ports where it plays and dotted where it is quiet between them. Dotted stubs follow the course to the plate edge when the theme plays on another plate. A station stem with coloured dots shows which themes play at each port. Selecting a theme thickens its line and dims the other lines and the ports that lack it. The themes panel shows counts as "on this plate / in the whole voyage", and themes absent from the plate are greyed.
- **Navigation.**
- Breadcrumbs ("Aegean › Cyclops' Island") take you back out.
- Prev and next buttons in the header are labelled with the plate ("‹ I. Troy", "III. Open sea and storm ›").
- ←/→ turn plates with a slide; → from the overview opens plate I.
- Esc closes a song, then returns to the Aegean.
- The course runs off the plate edge with "From plate I, Troy" and "Continued on plate III, Open sea and storm", and both notes are clickable.
- **Song detail.** A bottom "slip" with three columns (identity, parts with singers and motif ticks, then theme chips, `createAudioSlot` and `createVideoCards`) slides up over the lower third of the inset. The course and ports stay visible above it.
- **Overlay (`?overlay=1`).**
- The overview sits compact on a wooden captain's table over a dimmed CSS sea.
- The header carries a "You are here | Survive" tag, and a ship marker on the chart reads "You are here: Survive".
- Clicking an island opens its inset inside the table.
- Clicking a port opens a popover with "Sail here" and "Open song". Sailing moves the ship and the tag, and shows "Course set for Storm. In the 3D voyage the ship sails there now."
- **URL state.** `?saga=`, `?song=` (opens its plate and the slip), `?motif=` and `?overlay=1` are supported, and the URL stays in sync as you navigate.
## What works
- **The overview answers "what is in this voyage?" in one look.** It shows three places, ten titles, year spans and the passage of time, with no scrolling and no hunting. This is the strongest part of the spike.
- **Motif selection at two levels.** On the overview you see which sagas a theme touches and how often. On a plate you see exactly which songs, transit-style. The two levels complement each other rather than repeat.
- **The atlas furniture is real wayfinding, not decoration.**
- The locator key map, the breadcrumbs, the "continued on plate" notes and the plate numbers all say where you are and how to move.
- The scale bar doubles as the time axis.
- **Insets map well to 3D landings.** Each plate is the 2D twin of a landing. The overlay reuses the same component with an island click leading to a plate, which is the flow the 3D would need.
- **Legibility.** Port titles on the plates are 23px Cormorant, and story times are 16.5px italic.
## What doesn't
- **Uneven plates.** The Ocean plate holds a single song (Storm), so it is mostly empty sea. Sagas vary a lot in size, and with the full album some plates would hold 6 or more songs. The inset spacing caps out at about 6 ports per plate before titles crowd.
- **Most motif lines read as dotted.** With the sample data, few themes play in consecutive songs, so most of the band is quiet. The half-solid treatment helps, but the band is busier and less striking than mockup 03.
- **The slip covers the island art.** The slip hides the lower half of the plate (the land shape and the scale bar). The course stays visible, but the plate loses its "map" feel while a song is open.
- **Overlay text is small.** On the table the overview's track lists are about 12px: readable but cramped. The plates read fine in the overlay.
- **One collision left.** On the overview, the "a year passes" note brushes the course loop between ports 5 and 6. The decorative geography (seeded blobs) is not accurate.
- **Two clicks to reach any song from the overview** (island, then port). This is the cost of the two-level model. The overview track list could be made directly clickable to skip a step; I did not do that.
- **Zoom transition not seen live.** The zoom was only verified headless (the end state is correct); I did not judge the motion's feel in a real browser.
## Screenshots
- `screenshots/11-chart-atlas-default.png`: the general chart.
- `screenshots/11-chart-atlas-motif.png`: the general chart with `?motif=polyphemus` (halos, counts, the silent badge on Troy).
- `screenshots/11-chart-atlas-song.png`: the Cyclops' Island plate with the Survive slip open.
- `screenshots/11-chart-atlas-overlay.png`: the captain's table, "You are here: Survive".
- Extra:
- `screenshots/11-chart-atlas-inset.png`: plate I, Troy.
- `screenshots/11-chart-atlas-ocean.png`: plate III with `?motif=warrior`.
- `screenshots/11-chart-atlas-overlay-inset.png`: the Cyclops plate inside the overlay.
- `screenshots/11-chart-atlas-overlay-sail.png`: the Sail here popover.
- `screenshots/11-chart-atlas-overlay-sailed.png`: after sailing to Storm.