codebuilder-2 — detail.md¶

Last task: chrono-thread (game 15)¶

Files written / modified¶

games/chrono-thread/game.js — new, ~290 lines (IIFE, vanilla JS, no deps)
games/chrono-thread/index.html — replaced empty <script type="module"> stub with <script src="game.js"></script>
manifest.json — set games[14].playable: true

Mechanic implemented¶

Player drags to draw a path (thread) across the canvas; nodes are numbered targets
On release: thread is recorded, pre-analysis runs (160 time-steps) checking all threads together for node visits and head-to-head collisions
Playback auto-starts: all thread heads animate along their paths simultaneously (3.5 s)
After playback: scrub slider lets player review timeline at any position
Win: all nodes visited collectively, zero collisions
Fail: out of allowed threads OR collision detected
"Draw Another Thread" button appears when threads remain and level is not won
6 levels: 3 nodes/2 threads → 8 nodes/5 threads

Design tokens used¶

--color-surface-base, --color-surface-card, --color-border from design-tokens.css
--game-accent-chrono-thread: #F4D03F for live thread, node rings, glow
Ghost threads colored from palette: blue, red, green, purple
Font stack: "Space Grotesk" for node labels via canvas ctx.font fallback

To verify¶

Open games/chrono-thread/index.html in a browser. Draw a path across the nodes; on mouse-up, playback should start and heads should animate. Scrub slider after playback repositions heads. Visiting all nodes without collision shows win panel.