diff --git a/docs/design/002-direction-round-notes.md b/docs/design/002-direction-round-notes.md index f966316..6f1706f 100644 --- a/docs/design/002-direction-round-notes.md +++ b/docs/design/002-direction-round-notes.md @@ -91,6 +91,31 @@ jumps there. This file exists because of that request. It gets updated after every user message in this round. +### 7. Paused at the usage limit + +> "we have almost reached usage limit. Make the agents save their work for now, so we can continue +> without losing progress." + +**State when paused (branch `feat/sea-chart-round`, not pushed):** + +| Spike | State | +|---|---| +| 08 | Only `src/mockups/08-chart-logline/geo.ts` is written: chart geography, route and log-line maths. Nothing imports it yet, and it has not been typechecked. `main.ts` and `style.css` are still stubs. | +| 09 | No code yet; the stub is unchanged. The design plan and resume checklist are written. | +| 10 | No code yet; the stub is unchanged. The design plan and resume checklist are written. | +| 11 | Not started. It is still a stub. Idea: an overview chart of the whole sea; clicking an island opens a zoomed inset chart with that saga's songs as ports. | + +- **Brief and per-spike plans:** `docs/design/002-sea-chart-spikes/`. It holds `round2-brief.md` and one `-report.md` per spike, each with a design plan, a what's-left checklist and the next step. Agents should keep writing reports to `.superpowers/brainstorm/`, and the controller copies them into this folder. +- **Preview:** http://10.20.20.2:8099/ still runs the `main` build (01–07). It does not show 08–11 yet. + +**To resume:** +1. Read this file and the brief. +2. Dispatch one agent per spike, at most 3 at a time. Point each at its report file and the brief, and tell it to continue from the checklist. +3. Build 11. +4. Rebuild the preview container from this branch: + `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. + ## 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/08-chart-logline-report.md b/docs/design/002-sea-chart-spikes/08-chart-logline-report.md new file mode 100644 index 0000000..e7b575f --- /dev/null +++ b/docs/design/002-sea-chart-spikes/08-chart-logline-report.md @@ -0,0 +1,72 @@ +# 08 Sea chart + log line: status report (paused at usage limit) + +## What's done +- Read the round-2 brief, AGENTS.md, DESIGN.md, the round notes, the shared contract, and mockup 01's ink approach. Loaded the `frontend-design` skill. +- Design plan (not built yet): + - **Palette:** Admiralty-chart look. Water `#dfe9e6`, buff land `#e8d8a8`, navy ink `#1e2c3b`, chart magenta `#a3195b` for the course, ship and selection, and paper `#fbfbf7` for the log. + - **Motif colours:** darkened with `color-mix` against the ink, with a thin ink casing so the pale Odysseus colour stays readable. + - **Type:** Cormorant Garamond for titles and place names, with sea areas in italic. Inter for small numbers. + - **Layout at 1440×900:** + - 56px header; + - the chart fills the space below it (world 1600×600); + - a 268px log line with a sticky 200px motif legend on the left; + - the credits footer. + - **Detail panel:** 380px, slides over the chart's right edge. +- **`src/mockups/08-chart-logline/geo.ts` is written and complete (not yet compiled or typechecked).** It contains: + - the chart world size; + - the coastlines (Troy, Cicones coast, the Cyclops' island, Goat Island, a rock), drawn as closed Catmull-Rom paths; + - port positions, label offsets and waypoints per song; + - `buildRoute()`, which builds one smooth course split into port-to-port legs, with the years crossed on each leg; + - log line x positions: `LOG.hop` 156 per song plus `LOG.year` 300 per in-story year, giving a total width `LOG_W` of about 2550px; + - `xToIndex()`, which maps a log x position to a fractional song index for scrubbing; + - `yearsLabel()`, and the `rng()` helper for depth soundings. +- `index.html` is untouched (the stub is fine). `main.ts` and `style.css` are still the stubs. + +## What's left +- [ ] `main.ts` chart SVG: + - land with a hachured coast (stroke the same path at widths 30, 18 and 8 under the land fill); + - graticule, compass rose, soundings; + - saga sea-area names in italic, plus the place names Troy, Island of the Cyclopes and Land of the Cicones; + - the route: dashed in full, plus a solid magenta overlay up to the ship, using `stroke-dasharray` from cumulative leg lengths measured by `getTotalLength` on legs appended to the SVG; + - ports as circles with the track number, title labels from `ports[id].label`; + - "1 year at sea" and "2 years at sea" labels on the crossing legs. +- [ ] Ship marker at a fractional index: `getPointAtLength` on the leg, rotated to the tangent. +- [ ] View sync: + - animated `viewBox` `{cx, cy, z}`; + - while scrubbing the log, z≈1.5 centred on the ship; + - after leaving the log, return to the full view after 600ms; + - when a song is selected, focus the port at x≈36% so the panel doesn't cover it. +- [ ] Log line: + - saga brackets and a year ruler; + - the time axis, with wavy "N years at sea" gap labels; + - song buttons (track, title, story label); + - 7 motif lanes (16px apart) with a casing and a line from the first to the last occurrence; + - per-song part boxes, filled where the motif plays, so motifs read at part level; + - a scrub cursor with a year readout; + - a sticky legend of motif buttons. +- [ ] Clicking a chart port selects the song and smooth-scrolls the log line to its x. Clicking a log entry selects the song and focuses the chart on it. +- [ ] Detail panel: + - title, saga and track, story time, Odyssey link; + - parts with singers and motif chips, with the selected motif highlighted; + - `createAudioSlot`, `createVideoCards`, a close button. +- [ ] Motif selection: + - colour the route legs where both songs carry the motif, and dot them where it skips; + - ring the ports that carry it; + - fade the other log lanes. +- [ ] URL state (`?song`, `?motif`, `?overlay=1`) via `replaceState`. +- [ ] `?overlay=1`: + - dark sea gradient backdrop, with the app as a centred ~1180×740 panel; + - title bar reading "You are here: Survive", with the ship fixed at Survive; + - clicking a port opens a popover with a "Sail here" button that animates the ship there; + - the scrub shows a probe ring instead of moving the ship; + - the credits footer stays visible: fixed, light text on dark. +- [ ] `style.css` (unique). It needs the `@fontsource` imports: `cormorant-garamond/latin-{400,500,600,400-italic,500-italic}.css` and `inter/{400,500}.css`. +- [ ] Build to `/r2-08-chart-logline`, serve on port 4108, take the 4 screenshots, and look at them. Use `?overlay=1&song=my-goodbye` for the overlay shot so the popover shows. +- [ ] Run `bun test` and `bun run typecheck`, finalise this report, and reply in the brief's format. + +## Known broken bits +- None at runtime. The page still renders the stub text, because `geo.ts` is not imported anywhere yet. +- The port label offsets in `geo.ts` are first guesses and need tuning against a screenshot. + +## Next step to resume +Write `src/mockups/08-chart-logline/main.ts` against `geo.ts`, following the "What's left" list in order, then `style.css`, then build and screenshot. diff --git a/docs/design/002-sea-chart-spikes/09-chart-transit-report.md b/docs/design/002-sea-chart-spikes/09-chart-transit-report.md new file mode 100644 index 0000000..baf5490 --- /dev/null +++ b/docs/design/002-sea-chart-spikes/09-chart-transit-report.md @@ -0,0 +1,102 @@ +# 09 — Schematic sea chart (`09-chart-transit`): interrupted + +Status: **stopped before any code was written** (the coordinator called a halt for the usage limit). +`src/mockups/09-chart-transit/` is still the untouched stub. No files were left half-edited. + +## What's done + +- I read the brief (`round2-brief.md`), `AGENTS.md`, `docs/design/002-direction-round-notes.md`, the shared contract (`src/data/*.ts`, `src/shared/*.ts`), the layout code for mockups 03 (`map.ts`) and 07 (`route.ts`), and the screenshots for 01, 03 and 07. +- I loaded the `frontend-design` skill and settled the design plan below. It is not built yet. + +## Design plan (settled, ready to build) + +**Look:** this is an Admiralty-chart palette, not cream parchment. +- Deep water `#f4f7f5` is the background. +- Shoal bands `#d3e5ea`. +- Buff land `#ecdca4`. +- Navy chart ink `#1f3346`. +- Chart magenta `#a8326e` marks the ship's course and "you are here". This is the one bold element. +- Fonts are Cormorant Garamond and Inter, both via `@fontsource`: + - Cormorant: upright for land and saga names, italic for sea areas and in-story time. + - Inter: port labels and UI. + +**Schematic layout** (to go in `layout.ts`): +- The x-axis is story time: + - hop 92 between songs; + - +110 per year; + - +50 when the saga changes; + - X0 = 110. +- The rows are octilinear: + - Troy row at y≈290; + - a 45° diagonal down to the Cyclops row at y≈410; + - a long diagonal down to Storm at y≈590. +- The diagonals sit only in the gaps between ports, so every port is on a horizontal. +- Labels are horizontal, centred above each port, and wrap to two lines (max ~88px). +- The `storyTime.label` goes in italic below the lanes, with a year tag wherever the year changes. +- Gaps of a year or more carry an italic note on the course, such as "a year passes". + +**Motif lines:** +- Each motif gets a fixed lane parallel to the course: character themes on the left (north) side, musical motifs on the right (south) side, spaced 10 apart. +- A lane is drawn only over runs of consecutive songs that contain that motif. A single-song run gets a ±30 stub. +- Between runs, a faint dotted lane shows the motif returning. +- Lanes are built as offset polylines with miter joins, plus `roundedPath` (re-implement it locally; don't import from 03). +- Pale data colours are darkened toward a warm dark until they reach about 2.6:1 contrast on the paper. Each line has a paper-coloured casing. +- At each port, a capsule perpendicular to the course spans the lanes present. A port with 2 or more motifs is an interchange and gets a heavier border. + +**Chart layer:** +- A compass rose in the empty top-right, around (1210, 190), with faint rhumb lines radiating across the chart. +- Schematic islands: soft blobs drawn as closed Catmull-Rom curves. + - A Troy blob under the Troy row. + - A Cyclops blob under the Cyclops row. + - A storm cell (dashed rings) at Storm. + - Dashed depth contours, drawn as scaled copies of each blob. + +**Morph slider (schematic ↔ true geography):** +- Sample the course densely by schematic parameter `u`. +- The geo course is a polyline through the songs' lon/lat in an equirectangular projection (lon 11–28.5, lat 35–42, x scaled by cos 38.5°). +- Point = lerp(schematic(u), geo(u), t). Recompute the lanes and ports for every `t`. +- Land crossfades between the schematic blobs and rough Mediterranean polygons: Italy, Sicily, Greece with the Peloponnese, Asia Minor, Crete and Ithaca. I drafted the coordinates in my head; re-derive them. +- Geo positions: + - songs 1–4 near Troy/Ismarus (26.2,40.0 → 24.6,40.3); + - Warrior of the Mind off Cape Malea (22.0,36.0), with via-points so the route avoids Attica; + - the Cyclops songs on Sicily (~15,37.7); + - Storm NW of Sicily (13.0,38.9). +- As `t` rises, the time labels fade out and port labels shrink to track numbers, which shows the trade-off. +- Support `?morph=0..1`. + +**Page:** +- Title cartouche at top-left, morph control at top-centre, motif key at bottom-left. +- The detail drawer is about 400px on the right and pans the chart when the port would be hidden. + - Contents: title, story time, Odyssey link, parts with singers, motif chips, `createAudioSlot`, `createVideoCards`. +- Selecting a motif fades the other lanes and rings the ports where it plays. +- The footer is styled to be always visible. +- URL params: `?song=`, `?motif=`, `?overlay=1`. + +**Overlay (`?overlay=1`):** +- A dimmed CSS-gradient sea backdrop. +- The chart as a compact card, about 1180×650: story-time labels hidden, key as compact chips, slider hidden. +- A magenta ship marker reading "You are here: Survive". +- Clicking a port opens a popover with "Sail here", which animates the ship along `u`. + +## What's left + +- [ ] Write `layout.ts`: schematic trunk, port positions, geo coordinates and polygons, morph sampling, offset lanes, `roundedPath`, blobs. +- [ ] Write `main.ts`: SVG render (static chart layer plus a dynamic layer rebuilt on morph), key, motif select, detail drawer, URL params, overlay mode with Sail here, `mountCredits()`. +- [ ] Write `style.css`. It must stay unique, not byte-identical to any other mockup's. +- [ ] Update the `index.html` title if needed. Keep `