diff --git a/AGENTS.md b/AGENTS.md index 1d7c4a1..22092c4 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,7 +1,7 @@ # EPIC: The Musical Timeline Unofficial fan site: an interactive timeline of *EPIC: The Musical* songs. Currently 7 design-direction -mockups. Bun 1.3.14 (server, bundler, test runner), TypeScript, three.js (mockups 06/07/13/14/15 only), Docker. +mockups. Bun 1.3.14 (server, bundler, test runner), TypeScript, three.js (mockups 06/07/13–16 only), Docker. `AGENTS.md` is the single source of truth for agents here. `CLAUDE.md` and `GEMINI.md` only point here. Deeper context on demand: `docs/ARCHITECTURE.md`, `docs/DECISIONS.md`, `docs/TODO.md`. @@ -10,7 +10,7 @@ Deeper context on demand: `docs/ARCHITECTURE.md`, `docs/DECISIONS.md`, `docs/TOD Install: `bun install --frozen-lockfile` Dev: `bun run dev` (`PORT` env, default 3000) -Test: `bun test` | Single file: `bun test tests/data.test.ts` | Single case: `bun test -t "registry has 15"` +Test: `bun test` | Single file: `bun test tests/data.test.ts` | Single case: `bun test -t "registry has 16"` Typecheck: `bun run typecheck` Build: `bun run build` | Run the build: `bun run start` Docker: `docker build -t epic-timeline .` then `docker run --rm -p 3000:3000 epic-timeline` diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index a894865..ff03d38 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -62,3 +62,7 @@ persistent side panel. No new dependency. ## 2026-10-30 — three.js allowed in mockup 15 **Decision:** mockup 15 (Voyage, look 2) may use three.js; it iterates on 14. No new dependency. + +## 2026-10-30 — three.js allowed in mockup 16 + +**Decision:** mockup 16 (Voyage, readable) may use three.js; it iterates on 15. No new dependency. diff --git a/docs/PERMISSIONS.md b/docs/PERMISSIONS.md index 71d83ca..7abae8f 100644 --- a/docs/PERMISSIONS.md +++ b/docs/PERMISSIONS.md @@ -22,7 +22,7 @@ or `AGENTS.md` Commands. | `bun install --frozen-lockfile` | worked (no changes) | | `bun test` | worked — 34 pass, 0 fail, 3 files | | `bun test tests/data.test.ts` | worked — 10 pass | -| `bun test -t "registry has 15"` | worked — 1 pass | +| `bun test -t "registry has 16"` | worked — 1 pass | | `bun run typecheck` | worked (`tsc --noEmit`, exit 0) | | `bun run build` | worked — `dist/server.js` + hashed page assets | | `bun run dev` (`PORT=3113`) | worked — `/` and all mockup routes 200, no-slash form 302 | diff --git a/docs/design/002-direction-round-notes.md b/docs/design/002-direction-round-notes.md index ffc35ec..8b92ffa 100644 --- a/docs/design/002-direction-round-notes.md +++ b/docs/design/002-direction-round-notes.md @@ -259,6 +259,29 @@ mockup of the transition. - User asked to compare with 14: "can you open mockup 14 again so i can compare?" (14 is still served unchanged at /mockups/14-voyage-panel/.) +### 16. 14 vs 15 compared + +> "Thanks. First off, 15's font is very hard to read. 15 Accents with the freisa patterns on all the +> menus are very nice though, and the colors on the "between sagas a year at sea" looks nice. The hard +> question is paths A, B and C, cause they all have their strengths. In terms of menu, listen should be +> easier to do, and perhaps closer tied to the lyrics tab." + +- **Fix:** 15's typography is "very hard to read" (the small, wide-tracked Cormorant capitals used for + labels, and small SVG text). Go back to readable labels (14's style) at comfortable sizes. +- **Keep:** the frieze-pattern accents on all menus/panels (15). +- **Keep:** the colours of the "Between sagas · a year at sea" beat (15's beat 2). +- **Paths A/B/C:** undecided, "they all have their strengths". +- **Listen:** should be easier, and tied more closely to the Lyrics tab. +- *(Claude's proposal)* Mockup **16** from 15: + - readable type: Inter for all labels/UI (no wide-tracked small caps), Cormorant only for large titles; + nothing under 13px; + - **Listen + Lyrics as one tab**: a player at the top of the tab (play, scrub bar with part markers), + lyrics by part below; clicking a part jumps there, the current part is highlighted as it plays; + plus a play button always visible in the panel header; + - **paths combined rather than chosen**: C's timeline is the default home and can be collapsed to a + slim bar; when collapsed, A's strip appears in the panel; B's ribbons in the sea are an on/off + switch ("Threads on the sea"). + ## Open questions (in priority order) 1. ~~Which sea-chart approach (08–11) reads best, or which mix?~~ 11's navigation + 10's style (§9). diff --git a/docs/design/002-sea-chart-spikes/16-voyage-readable-brief.md b/docs/design/002-sea-chart-spikes/16-voyage-readable-brief.md new file mode 100644 index 0000000..0e2d7d7 --- /dev/null +++ b/docs/design/002-sea-chart-spikes/16-voyage-readable-brief.md @@ -0,0 +1,74 @@ +# 16 Voyage, readable — iteration brief + +## Why + +The user compared 14 and 15 (verbatim): + +> "Thanks. First off, 15's font is very hard to read. 15 Accents with the freisa patterns on all the +> menus are very nice though, and the colors on the "between sagas a year at sea" looks nice. The hard +> question is paths A, B and C, cause they all have their strengths. In terms of menu, listen should be +> easier to do, and perhaps closer tied to the lyrics tab." + +16 starts from a **copy of 15** (`src/mockups/15-voyage-look2/`). Keep: look 2, the five beats and +transitions, stylised toon/ink 3D, the frieze-pattern accents on every menu/panel/HUD, the colours of +beat 2 ("Between sagas · a year at sea"), placeholders, URL params. + +## 1. Readable type (the top complaint) + +- Stop using small, wide-tracked Cormorant capitals for labels (`.lbl`, tab names, step-dot labels, + "PATHS", panel eyebrows, data-row labels, saga names, frieze-thread labels, timeline labels). +- **Inter** for all UI text and labels: sentence case or modest caps with ≤0.06em tracking, weight + 500–600. **Cormorant** only for large display titles (caption title, panel song title, frieze + inscriptions at ≥19px). +- **Nothing under 13px on screen**, body text in the panel ≥15px, timeline song titles ≥12.5px with + room. Check contrast (≥4.5:1 for text) on parchment. +- Compare against 14's panel, which the user found readable. + +## 2. Listen + Lyrics, together + +- Merge the Lyrics tab and the Listen section into **one tab, "Listen & lyrics"** (About keeps facts, + Odyssey, parts and singers, and Watch). +- At the top of that tab, a **player**: big play/pause button, elapsed / total time, a scrub bar with + **part markers** (Verse 1, Chorus…) you can click. Below it the lyrics, by part with singer labels and + motif chips. Clicking a part's heading jumps the player there. While playing, the **current part is + highlighted** and scrolled into view. +- There are no real audio files. Simulate playback with a timer over a made-up duration per song + (spread part start times across it; use `part.startSec` if present), and say so in a small note + ("Preview player: no audio file yet"). If `song.audio` exists, use a real `