Architecture · LikeC4
Agent Tidal Wave
Booth game: guess agent-code magnitude, watch a proportional wave crash, and climb a shared leaderboard
The whole picture
System landscape
The system in context, then opened up into its containers.
Inside each box
Containers & components
Each part decomposed into the components that implement it. Every box links to its source in the interactive explorer.
Game client (static, in-browser) — components
clientContainerStatic HTML/CSS/JS served as-is; runs entirely in the browser, degrades to localStorage with no server
Express service — static host + leaderboard API
serverContainerserver.js — serves the static game AND the shared-leaderboard API on one origin (no CORS); API routes declared before the static handler so /api/* wins
How it runs
Walkthrough flows
Dynamic views — the narrative spine of the system, step by step.
Walkthrough — one play, end to end
playRoundJoining with a valid email gates the first play; afterwards each round auto-records, so a returning player just climbs. The shared board is authoritative when reachable; on any fetch failure the client silently falls back to its local board.
Walkthrough — durable lead capture (optional)
leadCaptureCONFIG-GATED. Active only when data.js config.submitUrl points at the deployed Apps Script. Sent as text/plain + no-cors (a simple request, no preflight); the opaque response is never read, so a real send is never falsely retried. Flaky-wifi failures queue locally and flush on the next load. The local CSV via awExport() is always the backstop.
Explore it live
The figures above are static exports. The interactive explorer lets you pan, zoom, follow relationships, and jump from any box to the source.