The Chat Battle Arena

Inspiration

The Arena was inspired by the energy of Twitch chat and the idea that viewers should be able to do more than just watch. We wanted to turn a stream into a live battlefield where the community can visibly affect what happens on screen. PixelWars showed how powerful lightweight viewer-triggered interactions can be, and we expanded that idea into an animated tower battle with custom warriors, tower damage, streamer setup, and streamer-vs-streamer support.

What it does

The Arena is a Twitch extension game where viewers send animated warriors into a live tower battle. Streamers configure their tower and choose solo mode or co-streaming mode. Viewers use the Twitch extension panel to pick warriors like Rookie, Scout, Bruiser, Titan, and Zoniac. Free units can be sent with cooldowns, while premium units demonstrate a Twitch Bits-style purchase flow. When a viewer sends a warrior, the backend broadcasts the attack in real time and the overlay shows the warrior running across the arena, striking the tower, and updating tower health. The project supports solo streamer battles and a streamer-vs-streamer mode where two communities can fight each other by linking friend codes.

How we built it

We built The Arena as a three-part system:

• A FastAPI and Socket.IO backend for sessions, channel linking, attacks, health, and real-time events.
• A Twitch extension frontend with a viewer panel, streamer config wizard, video fullscreen overlay, and video component.
• A standalone browser/OBS overlay fallback for reliable live demos and streamer production setups.

We used Codex throughout the project to plan the architecture, implement features, refactor the codebase, debug CORS and Twitch auth issues, integrate assets, and prepare the final monorepo and documentation. The extension connects to Twitch through Twitch Extensions APIs, using channel identity for streamer sessions and a demo Bits flow for premium warriors.

Challenges we ran into

The biggest challenges were Twitch extension setup, local testing, and making the real-time overlay reliable. We had to handle Twitch iframe behavior, CORS through ngrok, local-vs-production auth modes, extension configuration paths, and the difference between panel extensions, video components, fullscreen overlays, and OBS browser overlays. Another challenge was asset integration. We moved from simple placeholder blocks to animated GIF warriors, custom towers, health bars, and themed arena surfaces. Getting the characters to appear at the right size, walk on the surface, and trigger tower impact at the correct time took several iterations.

Accomplishments that we're proud of

We are proud that the full interaction loop works: a viewer clicks a warrior inside Twitch, the backend receives the event, and the animated warrior appears in the battle overlay in real time. We are also proud of the streamer configuration flow, the custom character catalogue, the demo purchase modal for premium warriors, and the streamer-vs-streamer design. The final project feels like a real Twitch-native community game rather than just a static overlay.

What we learned

We learned how Twitch Extensions work across multiple surfaces: panel, config, video fullscreen, and video component. We also learned the practical differences between building something that works locally and something that behaves correctly inside Twitch iframes. On the engineering side, we learned how important real-time event flow, auth boundaries, CORS configuration, and fallback demo paths are for streamer tools. We also learned that for a Twitch product, the streamer setup experience matters just as much as the viewer interaction.

What's next for The Arena

Next, we want to finish production Twitch Bits support, add more warrior categories, improve streamer-vs-streamer matchmaking, and add richer tower states like damaged, burning, and collapsing animations. We also want to add streamer customization, seasonal arenas, leaderboards, team events, and better analytics so streamers can see which viewers contributed most during a battle. Longer term, The Arena could become a reusable format for community-vs-community events across Twitch.

Built With

• codex
• obs
• openai
• react