Inspiration
Words on Stream was my main influence. I wanted to make a game with that level of chat interaction, but in a new genre and with its own visual identity.
What it does
Let's the streamer easily host a highly interactive, Twitch-native drawing game.
- Generate a suggestion from a curated list of video games, movies etc or choose your own custom word/phrase
- Chat's guesses are automatically read and reacted to by the drawing game
- EVERY correct guess earns points on the persistent leaderboard
- Streamer can let chat vote for custom modifiers (e.g. "draw with your off-hand only", "draw upside down", etc)
- Guest hosts let streamers give control to their mods to host games during BRB moments or other long-term AFKs like during subathons
How we built it
The app is two HTML pages - a streamer facing dashboard, and a non-interactable browser source for OBS. Communication between the two is handled via Supabase realtime API and edge functions. The streamer logs into the dashboard with the Twitch auth API and gets a unique browser source URL which can be regenerated at anytime in case of an accidental leak.
The drawing element is a custom vanilla JS canvas with basic drawing tools - colours, size, pens, and undo/redo options.
Twitch chat reading is handled via tmi.js. The streamer dashboard uses Twitch chat embed API so they can read and interact with chat with all their native chat features easier whilst on the dashboard doing a drawing.
As a developer in the real world, I was able to use Codex as a pair programmer and graphic design partner, more than using it to vibe out. I wrote a lot of the code by hand, regularly reviewed Codex's output, and asked for certain features/changes using the specific technical implementation I would have otherwise used myself if coding the old fashioned way.
Challenges we ran into
Time was always going to be difficult on this one as a solo dev who started 2 days late. I was able to rely on Codex to get everything done in time.
There was also an odd bug where embedded Twitch chat wouldn't let me type because it was "obscured"... Even though it very much wasn't. It ended up being because it was ON TOP of an element with a CSS backdrop-filter. Codex helped debug this, too.
Accomplishments that we're proud of
I'm proud of the features I was able to produce in the time limit, elevating a simple "draw and guess" game into something uniquely Twitch, with chat voting and guest host abilities.
The app also looks a lot better than anything I could design myself. Codex didn't typically follow its own visual designs (i.e. generated images) very strictly, but fortunately I have been frontend/fullstack for 10+ years now so was able to pick up where it lacked and also direct it very specifically as required.
What we learned
Codex plugging in to Supabase was very nice, it also helped me understand things in my drawing tool that I struggled to implement before such as the logic of a "fill" tool.
I also learned that Supabase's realtime API can handle a lot more requests per second than I thought.
I'm often scared to work with Twitch APIs as auth is always something that goes over my head. I learned on this project that the simple front end auth token allows a lot more than I'd previously realised - like retrieving user profile images, which is another Twitch API this project relies on.
What's next for Chat Draws Conclusions
I'll conduct a more thorough code review and likely re-write some stuff much closer to how I would have written it myself. I will look to get it truly production ready and hopefully share it with some streamers to take for a spin with their communities. General polish with the introduction of sound effects and UI improvements, etc are definitely on the list too.
Built With
- codex
- css
- html
- javascript
- supabase
