StreamRoll For Chat

Allows chat to roll 3D dice, modified to their liking. Streamer creates a curated list of dice rolls, allowing potential advanced configurations as well as the basic rolls.

Comment

Inspiration

When attempting to play certain board games on stream, there wasn't an easy way for me to control rolls, display them nicely on stream and keep track of the values of the dice rolled. So I originally built StreamRoll for that purpose. It provides two overlays, a dice rolling overlay and a rolled value list.

I had been asked many times to add further twitch support and this opportunity to focus on both the hackathon and build something my users have been begging for.

What it does

This project had two components, the extension and the updated full stack to accommodate these new features.

Extension

The extension displays the active configurations the streamer has defined on the website. These rolls come in two types, basic and advanced.

Basic rolls are singular die, allowing users to customise the colours and roll it, there are options to add what is known as advantage or disadvantage to the roll (basically adds a second die and you take the greater or lesser of the values). This is done using bits as a mechanism to upgrade the rolls.

Advanced rolls are a premium configuration, allowing streamers to define a combination of dice, their colours and if it is available to subscribers only. These are meant to be more engaging and require a bits redemption to trigger.

StreamRoll.io New Features

Users logging in with a Twitch account will now have a new tab to interact with. This has two new pages of functionality to accompany the new extension.

The first tab contains the table of active dice configurations, streamers can create the basic and advanced rolls here that are then shown on the Extension.

The second page contains the last 10 rolls done by the extension, so if anything does go wrong, or the streamer wants to reroll it, they can do that here.

How we built it

Starting by designing it out in excalidraw, I did a few design sessions with my chat as we built out ideas and structures before honing in on an idea. Taking components of what I already have, what users have asked for and how we could extend them to include elements for the focus of the hackathon.

After we had the idea locked down and roughly designed, the elimination of unknowns began, looking into project structure and how extensions are built. Building a prototype and then building out the API to support these new features. After building it all locally and happy with the tests, it was migrated to the twitch hosted environment for the extension ready for review, and after then release. The backend was already updated with the new features at the testing stage.

Challenges we ran into

Making the locally hosted extension project work in the uploaded environment, some significant changes were required to make this work,

Accomplishments that we're proud of

Creating a new method of interacting with the platform that users wanted. An extension on Twitch has also been a career goal of mine.

What we learned

Twitch Extension structure, React framework,

What's next for StreamRoll For Chat

Outputting roll results to chat, more customisation, further modification for bits. Moderation Features. After learning structure, a discrete starting state will be added, increase its' fidelity and fix the current known issues.

Current Known Issues

Extension is not asking for identity access which is causing issue with using bits and certain callbacks. Not present in test environment so need to resubmit with those settings changed.

Share this project:

Updates