# Adventure quest map > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The world map of an island adventure game, drawn flat like a modern indie board game: a teal sea with a tiled wave pattern, islands with a wide shallow-water ring, sand, two greens, a range of terracotta peaks with snow caps, forest dots, a river, villages and beacon markers. Eight quest nodes sit on the map in four states (done, active, available, locked). Choosing one draws a dotted trail from your camp to it and fills the right-hand quest panel with its objectives, progress, rewards and next step. The UI chrome is chunky: 2px ink outlines and 4px offset shadows, so it reads as cut-out cardboard over the painted map. The detail worth copying: the dotted trail is revealed through an SVG mask whose stroke animates, so dots stay round and evenly spaced while the trail "walks" out. ## Reference behaviour 1. Initial state: "Beacons of Thornvale" (main story, active) is selected. Its node has a 24px ink ring, a coral pulse ring (2.4s loop), and a cream name tag beside it. A dotted trail runs from the camp tent near Saltmere to the node. 2. Hover a node: its disc grows from r 16 to 19 over 200ms. 3. Click a node, or focus it and press Enter or Space: the ring and name tag move to it, the trail redraws from the camp over 900ms, and the panel swaps to that quest. 4. The panel shows: type pill and state pill, title, region · level · giver, description, objectives (done items ticked and struck through; counted items show "1/3" and a 6px coral bar), rewards (XP, silver, an item in gold), a dark Next step callout when there is one, then the primary button and distance ("3.1 km from camp, about 37 min on foot"). 5. The primary button reads "Tracking" for the active quest, "Track quest" for available ones, "Completed" (disabled) for done, "Locked" (disabled) for locked. A locked quest replaces objectives with "Requires: Beacons of Thornvale" on a tinted strip, and the finale hides its rewards as "?". 6. The filter pill (All, Main story, Side) fades non-matching nodes to opacity .25 and removes them from the tab order and pointer hits; the map never re-lays out. 7. Only the active node pulses. Nothing else loops. ## Structure ``` 1280 × 800 ┌───────────────────────────── map 1fr (SVG 900 × 800, slice) ─────────┬── panel 380 ──┐ │ ┌ The Wayfarer Isles ┐ (All|Main story|Side)│ [MAIN][ACTIVE]│ │ └ Day 23 · 5 of 8 ───┘ │ Beacons of │ │ THE GLASS SEA SALTMERE ✓ EMBERREACH ▲▲ 🔒 │ Thornvale 32px│ │ ✓ ⌂⌂ ~~~river~~~ 🔒 │ meta · desc │ │ (N) ⛺ · · · ○ ▵ ▵ ▵ │ ─ ─ ─ ─ ─ ─ │ │ MIRROWOOD ○ · · · (★) [Beacons of Thornvale] │ OBJECTIVES │ │ THORNVALE ( 🔒 ) │ ☑ ☐ 1/3 ▬ ☐ │ │ ( isle ) · · · · · · · · · · · · · · · · · · · ·( isle ) │ REWARDS 3 up │ │ [● Active ○ Available ● Done ● Locked] HOLLOW ISLES │ NEXT STEP │ │ │ [Tracking] 3.1│ └───────────────────────────────────────────────────────────────────────┴───────────────┘ body: grid minmax(0,1fr) | 380px; the panel has a 3px ink left border ``` - `

` holds one `