Inspiration

I wanted a Twitch chat contribution to have a visible consequence: one placed bumper or rotated ramp can change whether a ball reaches its goal. That became Chain Reaction Live, a shared physics workshop where viewers build a machine, the streamer tests it, and everyone can inspect and repair what went wrong.

A failed attempt gives the group something concrete to work with: the recorded route, the parts the ball touched, and a limited number of changes before another run.

What it does

The game follows five stages:

  1. Build: The host opens a challenge. Viewers place ramps, bumpers, and springs through Twitch commands such as !place bumper A4.
  2. Run: The streamer launches the machine. Construction is locked while the ball moves.
  3. Inspect: Recorded replay shows the actual trajectory and part contacts from that attempt.
  4. Repair: Chat gets three accepted edits before the next attempt. A command such as !rotate C3 can change the route.
  5. Resolve: The game shows a clear result and credits accepted contributors. The host can hide participant names.

The MVP includes three handcrafted challenges: Find the Cup, Cross the Gap, and Bring It Back. Each has a verified legal solution. Six added parts, three attempts, and a five-second cooldown between accepted viewer edits keep rounds bounded. Viewers participate through their existing Twitch chat; watching requires no game commands.

How I built it with OpenAI Codex

I worked with OpenAI Codex to turn the product requirements into the TypeScript game-state machine, command validation, physics simulation, Twitch integration, replay, and browser interface. Codex also helped review edge cases, develop verification fixtures, and debug the real chat connection.

A Node.js service owns the shared board and ordered command queue. Matter.js advances the simulation at a fixed 60 steps per second. Each attempt saves its board, ball frames, and contact events. The browser uses HTML Canvas, CSS, and WebSockets to display that state, with Vite handling the frontend build.

Twitch EventSub receives chat messages, and the Send Chat Message API returns game acknowledgments. OBS broadcasts the local browser view, so participants can interact through the Twitch stream from another device.

Challenges I faced

  • Keeping live chat connected: An overly strict health deadline caused repeated reconnections. Codex helped diagnose the timer; adding two seconds of network and event-loop grace restored stable delivery. I verified the change with real Twitch commands.
  • Making physics fair: Collision geometry and the goal check needed to agree. I tested both failing starter layouts and known legal repairs for all three challenges.
  • Keeping replay faithful after edits: Every replay retains its original board and recorded frames, so later repairs do not rewrite the previous attempt.
  • Getting the broadcast view working: OBS initially showed a black browser-source preview. Disabling its browser-source hardware acceleration restored rendering, followed by a real broadcast check.

Accomplishments

The recorded demo shows a complete real Twitch build → failure → replay → repair → success sequence. It also previews the other two challenge layouts and shows Codex build history.

The local suite passed 44 tests covering game rules, physics, replay, transport, and integration fixtures. Targeted recovery checks exercised a real Twitch socket reconnect, browser resynchronization, and an isolated server restart; token expiry and duplicate delivery also had controlled fixture checks.

The broadcast demo used one tester operating broadcaster and participant accounts. Independent community playtesting is the next validation step.

What I learned

Live-stream delay makes clear phases, visible acknowledgments, and recorded replay central to the experience. A small physics puzzle also needs verified solutions and understandable failure cases. The board, remaining resources, and outcome must be readable while the action is happening.

What's next

I plan to test the existing three challenges with independent groups and use their observations to improve instructions and round pacing. The current MVP runs one Twitch channel per session and keeps game state in memory; a server restart starts a fresh lobby.

Built With

Share this project:

Updates

Submission history