Roll Probability Calculator
Made for board game players, this mobile-first web app allows users to explore roll sums based on different combinations of multi-sided dice. This allows players to make educated decisions for their next turn.
This single page web app focuses on responsive design and fast calculations. Fully independent after the initial load, there are no additional ajax calls or server side calculations. This makes the app a perfect solution for use over paid data connection.
TECH STACK
- React.js
- Bootstrap
- HTML5 Canvas
// The Problem
What to Roll?
The inspiration for this application came while playing a board game with friends. I found myself in a win/lose situation where I had the choice to roll 4 six-sided dice or a combination of 2 eight-sided and 2 four-sided dice to get a sum of 18 or higher. Both sets of dice use 4 dice and would have a sum range of 4 to 24. I didn't know how to quickly estimate which would give me the best odds of winning. I decided to make a web app to help me with this type of situation in the future.
// The Needs
Aid Gameplay, Not Hinder It
For the web app to be useful, it would need to be optimized for use during gameplay. This meant that the app would need to be accessible from a smartphone, not interrupt the flow of the game, and help the user learn how probability changes as different dice are added.
Mobile First
The UX/UI needs to be optimized for use on the most readily available platform while gathered around a board game: a smartphone.
Speed
No one wants to be "that person" that holds up gameplay every round, so this web app would need to be quick. The dice input needs to be fast and easy for a user to update so that results are calculated within moments.
Educational
The solution should ultimately help users learn how the probability changes based on choice of dice for future rounds of gameplay.
// The Solution
Fast Fingers
Through the use of thoughtful design, a clever equation, and informative graph, a web app was born. This web app only uses HTML, CSS, and JavaScript as a tech stack with no server side reliance. In fact before hosting on this site, I would run it off of a jsfiddle.
// Highlights
- Design - Large buttons and minimal use of form fields lead to an interface that is quick and easy to use with fingers on a smartphone.
- Calculation - Through the use of a custom algorithm, calculating the probability of getting a specified result for any combination of dice is fast, even on a smartphone. (Something I'm quite proud of I might add.)
- Graph - By displaying the probability curve through a graph, the user is able to learn how the probability changes as dice combination changes.
// Hurdles
Design & Calculation
While developing this app I faced two major hurdles. The first was designing a UI that was both intuitive and condensed enough for mobile.
The second hurdle was the calculation of results quickly on a cellphone. Each time a die is added, the number of possible combinations increase exponentially, quickly surpassing the ability of a smartphone to run through every combination. So I had to find another way to calculate.