From cab220d3e22b26f6f1c88da4f8c9a1080abb30ae Mon Sep 17 00:00:00 2001 From: Lucas Winther Date: Thu, 29 Oct 2026 02:23:21 +0100 Subject: [PATCH] docs(design): resume sea-chart round, add missing spike 10 plan Co-Authored-By: Claude Opus 5.5 --- docs/design/002-direction-round-notes.md | 9 +++ .../10-chart-scroll-report.md | 61 +++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 docs/design/002-sea-chart-spikes/10-chart-scroll-report.md diff --git a/docs/design/002-direction-round-notes.md b/docs/design/002-direction-round-notes.md index 6f1706f..0c143a2 100644 --- a/docs/design/002-direction-round-notes.md +++ b/docs/design/002-direction-round-notes.md @@ -116,6 +116,15 @@ This file exists because of that request. It gets updated after every user messa `docker build -t epic-timeline . && docker rm -f epic-timeline-preview && docker run -d --restart unless-stopped -e PORT=3000 -p 10.20.20.2:8099:3000 --name epic-timeline-preview epic-timeline` 5. Ask the user which chart approach reads best. +## 2026-10-29 + +### 8. Resumed + +> "continue." + +- 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. + ## Open questions (in priority order) 1. Which sea-chart approach (08–11) reads best, or which mix? diff --git a/docs/design/002-sea-chart-spikes/10-chart-scroll-report.md b/docs/design/002-sea-chart-spikes/10-chart-scroll-report.md new file mode 100644 index 0000000..4d1e09e --- /dev/null +++ b/docs/design/002-sea-chart-spikes/10-chart-scroll-report.md @@ -0,0 +1,61 @@ +# 10-chart-scroll: progress report (stopped early at coordinator's request) + +## What's done +- Read the round 2 brief, AGENTS.md, DESIGN.md, `docs/design/002-direction-round-notes.md`, the shared contract (`src/data/*.ts`, `src/shared/*.ts`), mockup 01's `main.ts`, and the 01, 03 and 07 screenshots. +- Loaded the `frontend-design` skill. +- Wrote the design plan (below). +- **No code written yet.** `src/mockups/10-chart-scroll/` still holds the original stub, untouched. No server running, no screenshots taken. + +## Design plan (ready to build) +- **Palette:** portolan vellum sea `#e3d6b4`, land `#c9b07a` with a green coastal wash, iron-gall ink `#2b2118`, rhumb red `#a23a2a`, rhumb green `#3f6b5c`. Motif colours re-inked darker for vellum, as in 01's `INK` map, but with distinct values. +- **Type:** Cormorant Garamond for song titles and italic place names; Inter for small UI text. +- **Layout (1440×900):** a top row with a small title on the left and a thin minimap (about 56px) on the right. Below it, a fixed motif legend column on the left, its rows aligned to the thread rows, and the horizontal chart scroller on the right. Then a caption line ("Now passing: …"), then the credits footer. +- **Chart (SVG, all labels as SVG text, scale factor S: 1 by default, about 0.62 in the overlay):** + - Song x positions as in 01: STEP 220, YEAR 600, START 300, width about 4600. + - y 0–44: saga band with brackets and names. + - y 44–400: sea. + - Land masses: Troy's coast along the top edge, and the Cyclops island above the route. + - The storm: a swirl glyph near x 4080. + - Two compass roses (x ≈1350 and ≈3300) with faint radiating rhumb lines. + - Dashed water lines offset around the coasts. + - Coastlines are seeded procedural blobs. + - The route is a dense Catmull-Rom polyline through the ports, with y between 250 and 300. Sampling it gives the ship's y and its tangent, and lets a motif's route segments be sliced out. + - Each port has a title above it (split onto two lines when long, with a vellum halo) and an italic story-time label below. + - Elapsed time ("a year at sea") is written along the route with `textPath`. + - A nautical scale bar at y ≈395 serves as the time axis. + - y 430–620: motif threads with knots at each song's x, and faint meridians running down from each port. +- **Ship:** x = first port + (last − first) × scrollLeft / maxScroll. It rotates with the route tangent. +- **Unrolling:** shaded roller gradients at both edges of the viewport, plus one unroll animation on load (clip from the left, about 900ms). When taking screenshots, use `--virtual-time-budget=3000`. +- **Minimap:** a second SVG with the whole chart's viewBox and `preserveAspectRatio="none"`, showing the land, route and port dots plus a viewport rectangle. Click or drag to jump. +- **Motif select** (legend click or `?motif=`): + - highlight the thread and dim the others; + - give the matching ports a ring in the motif's colour; + - overlay the route segments between appearances in the motif's ink; + - show part names at the knots. +- **Song panel** (`?song=`): a right-hand drawer that stops above the footer. It shows: + - track and saga; + - the title; + - the story time; + - the Odyssey link, or "no direct counterpart"; + - the parts with their singers and motif chips; + - `createAudioSlot` and `createVideoCards`. +- **Overlay** (`?overlay=1`): + - a dark sea-gradient backdrop; + - the same chart in a centred frame at S ≈ 0.62, with the minimap; + - the ship at Survive with the tag "You are here: Survive"; + - clicking a port opens a popover with a "Sail here" button, which animates the ship there. +- **Input:** drag to pan, the vertical mouse wheel scrolls sideways, and the arrow keys step from port to port. + +## What's left +- [ ] Write `src/mockups/10-chart-scroll/main.ts` (plus an optional `chart.ts`) and `style.css`. Keep the HTML stub as it is, with the credits footer and the `credits.css` link. +- [ ] Check that `style.css` is unique (it will be, once written). +- [ ] Build: `bun build src/server.ts --target=bun --production --outdir /tmp/claude-1000/-home-user-epic-the-musical-timeline/fb650f6d-47a0-47e4-8f6b-197d02417f3b/scratchpad/r2-10-chart-scroll`, then serve on port 4110. +- [ ] Take the screenshots `screenshots/10-chart-scroll-{default,motif,song,overlay}.png` and review them. +- [ ] Run `bun test` and `bun run typecheck`. +- [ ] Rewrite this report into the final format the brief asks for: the idea, what works, what doesn't, and the screenshot paths. + +## Known broken bits +- None in code: nothing has been changed. The page at `/mockups/10-chart-scroll/` still shows "Unrolling chart (stub)". + +## Next step to resume +Implement `main.ts` and `style.css` from the design plan above. Start with the geometry, the route sampling and the static chart, then add the ship and minimap, then the motif, song and overlay states. After that, build, screenshot and run the checks.