https://github.com/maz01001/dice_stats
DND dice rolls with statistics
https://github.com/maz01001/dice_stats
animations dice dice-roller dnd permalinks rng statistics success-change tools vector-graphics
Last synced: 11 months ago
JSON representation
DND dice rolls with statistics
- Host: GitHub
- URL: https://github.com/maz01001/dice_stats
- Owner: MAZ01001
- License: mit
- Created: 2025-01-17T10:21:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-23T07:41:38.000Z (about 1 year ago)
- Last Synced: 2025-04-23T08:36:47.616Z (about 1 year ago)
- Topics: animations, dice, dice-roller, dnd, permalinks, rng, statistics, success-change, tools, vector-graphics
- Language: JavaScript
- Homepage: https://maz01001.github.io/dice_stats/
- Size: 119 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dice Stats
DND dice rolls and statistics (success chance).
- [Documentation](#documentation "Scroll to section: Documentation")
- [Quick start](#quick-start "Scroll to section: Quick start")
- [Format](#format "Scroll to section: Format")
- [Console DIY](#console-diy "Scroll to section: Console DIY")
- [WIP](#wip "Scroll to section: WIP")
>
## Documentation
Buttons at the bottom of the view box:
Button Description
Add rollAdds a new (dice roll) block; Currently 100 blocks maximum.
Click to remove
Switches between different modes for pointer action:
- Click to remove
- Click on dice to remove them; Double click on the empty dice area to remove the whole block.
- Click to rotate
- Click on dice to roll them (individually); Double click on the block or the dice area within it to roll all dice within that.
- Swipe to rotate
-
Same as Click to rotate, but also moving the mouse over dice rolls them (individually);
For touch start a swipe on a dice graphic and then moving over any dice on the screen rolls them (individually),
to scroll the page by swiping over dice simply start swiping, then tap anywhere with a second finger,
and it should cancel the "dice rolling" and revert back to normal swipe controls.
Source Code Link to this Repository.
Permalink Create a permalink with the current setup (see Quick start).
Roll allRolls all dice on the page at once.
--% Shows the total chance of success for all blocks; is "--%" when not all blocks have dice and not all Value fields are filled in (see below) or there are no blocks to begin with.
Within each block:
Field Description
Name Custom name for this dice roll block (only visual change); Click to edit; Pressing Enter or navigating away from it while it's empty will remove the entire block without further asking.
Value Number input field for comparing with dice roll result; When pressing Enter here, all dice within this block are rolled.
≥ Selection of comparison operator between Value and dice roll result; Currently these are ≥, ≤, >, <, and =.
initially invisible, when two or more dice are present, shows the dice roll result (sum of dice values).
[Dice area]Resizeable area; To revert back to automatic sizing, double-click on the bottom right corner.
--% Shows the chance of success of the condition of this block; is "--%" when Value is not filled in or there are no dice.
Add Adds a new (D20) dice to this block; Currently 48 dice maximum per block.
D20
Select the dice to add with Add; Currently supported dice are:
| Name | Description | Possible results |
| --------------- | ----------------- | -------------------- |
| C | Two sided coin | `{1, 2}` |
| D4 | Four sided dice | `{1, 2, 3, 4}` |
| D6 | Six sided dice | `{1, 2, ..., 6}` |
| D8 | Eight sided dice | `{1, 2, ..., 8}` |
| D10 | Ten sided dice | `{1, 2, ..., 10}` |
| D12 | Twelve sided dice | `{1, 2, ..., 12}` |
| D20 | Twenty sided dice | `{1, 2, ..., 20}` |
| D100 | Ten sided dice | `{10, 20, ..., 100}` |
When dice are rolled they are colored based on success (green ⇔ success, red ⇔ failure, and grey if the Value field of that block is not filled in)
and so is the border of the viewing box (same colors but all blocks need to be successful for it to count as successful).
You can also navigate this page with keyboard-only, touch-only should also work just fine.
The layout changes to a column with rows instead of rows with blocks when the screen width is smaller than its height (usually mobile devices have this ratio).
Scroll [UP](#documentation "Scroll to start of section: Documentation")
| [TOP](#dice-stats "Scroll to top of document: Dice Stats")
## Quick start
Directly loading full dice roll setup from URL hash (#):
-
```text
empty >= { 1 * D20 }
```
-
```text
2 = { 2 * C }
13 >= { 2 * D6 + 1 * D12 }
123 <= { 4 * D100 }
```
-
```text
150 > { 12 * D20 }
15 >= { 2 * D12 }
5 > { 1 * D8 }
roll all dice after loading
```
### Format
The general format is:
`"Name title"` `Value` `Operator` `Dice list`
- `"Name title"` any text within double quotes where `"` is escaped as `""` or `\"` and `\` is escaped as `\\` (can be empty: `""`)
- `Value` any positive (finite) integer (including 0)
- `Operator` one of `GE` `>=` `LE` `<=` `GT` `>` `LT` `<` `EQ` `=` `==` `===` (case insensitive)
- `Dice list` list of `amount` `dice type` with `+` as separator (and at the beginning)
- `Amount` positive integer smaller than 253 (automatically caps at `MAX_DICE`)
- `Dice type` one of `C` `D4` `D6` `D8` `D10` `D12` `D20` `D100` (case insensitive) other dice like `D404` are parsed but ignored
where each box is optional and the whole thing can be repeated with `,` as a separator (yes `,,,` is valid and creates 3 empty boxes)
also, copy-pasting url/format directly on the page loads that setup
and for those that can read regular expressions:
```javascript
/(?!$)(?:"((?:\\.|""|[^\\"])*)")?(?:(?:(\d*)([><]=?|==?=?|[GL][ET]|EQ))?(\+?\d*(?:C+\+?\d*|(?:D\d+)+(?:\+\d*)?)*(?:C+|(?:D\d+)+))?|(\d+)((?:\+\d*)?(?:C+\+?\d*|(?:D\d+)+(?:\+\d*)?)*(?:C+|(?:D\d+)+))?)(?:,|$)/giy
```
Scroll [UP](#quick-start "Scroll to start of section: Quick start")
| [TOP](#dice-stats "Scroll to top of document: Dice Stats")
## Console DIY
Inside the browser dev console, some limits can be adjusted:
| Variable | Description | Default | Limit |
| ---------------------- | -------------------------------------------------------- | ------- | --------------------------------- |
| `Dice.ANIM_TIME` | Animation speed of dice rolls in milliseconds | 1000 | [0,∞[ |
| `Roll.PRINT_PRECISION` | Number of decimal places for percentages (only visually) | 5 | [0..20] |
| `Roll.MAX_DICE` | Maximum amount of dice per block | 48 | [0..90071992547409] |
| `Sheet.MAX_ROLLLS` | Maximum amount of blocks | 100 | [0..253[ |
Also, you can generate a number based on a dice type like so:
```javascript
// with supported dice
Dice.RNG(DiceType.C); //=> random in {1, 2}
Dice.RNG(DiceType.D4); //=> random in {1, 2, 3, 4}
Dice.RNG(DiceType.D6); //=> random in {1, 2, ..., 6}
Dice.RNG(DiceType.D8); //=> random in {1, 2, ..., 8}
Dice.RNG(DiceType.D10); //=> random in {1, 2, ..., 10}
Dice.RNG(DiceType.D12); //=> random in {1, 2, ..., 12}
Dice.RNG(DiceType.D20); //=> random in {1, 2, ..., 20}
Dice.RNG(DiceType.D100); //=> random in {10, 20, ..., 100}
// with custom dice
Dice.RNG(33); //=> random in {1, 2, ..., 33}
Dice.RNG({max: 50, step: 5, faces: 10}); //=> random in {5, 10, 15, ..., 50}
```
The random number generator uses `MurmurHash3` for seeding (on page load) and then `sfc32` for generating random unsigned 32bit integers;
Available by the global `RNG` class (see for more information) or use the same instance the dice use with the global constant `rng`.
```javascript
// (many features of my original RNG class have been removed here since they weren't needed)
rng.val32; // gives a random unsigned 32bit integer
// create a new RNG obj with seed "seed"
const random = new RNG("seed");
random.val32; // 2460423161
```
And access to the probability-calculation function via the `Probability` class:
```javascript
const P = new Probability();
// setup probability for a dice throw with: C, D12, D20, D20, D100, C, D10
P.Setup([DiceType.C, DiceType.D12, DiceType.D20, DiceType.D20, DiceType.D100, DiceType.C, DiceType.D10]);
// or
P.Setup([2, 2, 10, 12, 20, 20, {max: 100, step: 10, faces: 10}]); // (slightly faster in ascending order)
// (creates internal table of length 167 = 1 + 2 + 2 + 10 + 12 + 20 + 20 + 100)
// check what is the chance of "80 >= sum of dice" for a random dice roll
const chance = P.Check(80, (value, diceSum) => value >= diceSum);
// 0.395 → 39.5% for 80 >= sum of dice when rolling given dice (simultaneously)
```
Scroll [UP](#console-diy "Scroll to start of section: Console DIY")
| [TOP](#dice-stats "Scroll to top of document: Dice Stats")
## WIP
- better documentation in JSDoc