🎲 Dice Roller

A dice roll generator, built with React, Redux, and Three.js.

View the demo at bendmyers.github.io/DiceRoller.

---

How to Run This Project

1. Clone this repository.

2. Install all of the dependencies with npm install.

3. npm start

4. If you're not automatically directed to it, navigate to localhost:3000.

---

Dice Notation

This dice roller uses standard dice notation. Dice notation takes the form A_d_X, where A is the number of dice to roll, and X is the number of faces on the die. For instance, 3d20 will roll three 20-sided dice.

A couple of other enhancements to dice notation are implemented:

• Dice arithmetic: The +, -, *, and / operators can be used to add, subtract, multiply, and divide dice terms and constants. Multiple operations can be strung together as needed. To sum up 3d20 and 5d6 and subtract 5, for instance, you could use 3d20 + 5d6 - 5.

  • Note that, while the order of operations is preserved, parentheses are not implemented in the parser.

• Exploding dice: Exploding dice let the player reroll if a certain value (usually the highest) is rolled. Rinse, wash, and repeat until some non-exploding value is rolled. The end result is the sum of the entire explosion chain. For further explanation about exploding dice, read this AnyDice article about exploding dice.

  • Exploding the highest face: Appending ! after the dice term will cause the dice to explode when the dice's highest face is rolled. Rolling 3d5!, for instance, will roll three 5-sided dice that explode when they roll a 5.

  • Exploding on custom faces: Appending xN, where N is a number, after the dice term will cause the dice to explode when N is rolled. Multiple exploding values can be specified with a comma-separated list. 3d5x2 will roll three 5-sided dice that explode upon rolling a 2. 10d7x2,4 will roll ten 7-sided dice that explode upon rolling a 2 or a 4.

• Reroll lowest: Appending R after the dice term will cause the die to reroll exactly once if it originally rolls a 1. 4d8R will roll four 8-sided dice and, if any die rolls a 1, that die will be rerolled exactly once.

• Keeping and dropping dice: Appending kN, where N is a number, after the dice term will roll all of the dice, and then drop the lowest, keeping only the top N dice. Rolling 11d5k7, for instance, will roll eleven five-sided dice and only keep the seven best dice.

  • Bear in mind that you cannot keep more dice than you roll.

• Chaining roll notation enhancements: Any of the above roll augmentations can be used in conjunction with each other by chaining together the roll notation enhancements in any order. For instance, to roll a hundred 20-sided dice that explode on 3, 5, and 20, reroll 1s, and keep the top 10, we could specify 100d20!x3,5Rk10.

---

Attributions

This project was bootstrapped with Create React App.

For parsing dice notation, this dice roller is indebted to John Mark Hawley's owlbear package.

The binding of React and Three.js was borrowed from, and inspired by, the work of Pierfrancesco Soffritti. His article "How to use plain Three.js in your React apps" and the repository for his personal website were instrumental in getting this project to make use of Three.js.

The pentagonal trapezohedron geometry (used in the d10 and d% Quick Roll buttons) comes from Michael Wulf's threejs-dice package, which in turn borrows from Anton Natarov's 3D dice roller.

The icon font, used for the polyhedron, reroll, and explosion icons, was generated by flaticon.com, under the CC BY 3.0 license. The Flaticon icon creators are Pixel perfect and OCHA.