Skip to main content
Version: 0.6

Dice Picker

This is a simple UI module aimed at making picking dice simple and easy. I put this module together mostly to make setting up simple rolls on mobile devices easy. Just tap away at the dice you want to roll. It's very similar in nature to Advanced Roller.

Dice Picker Screenshot


Add the FUI module using

npm install @3d-dice/fui


Then create a new instace of the picker

import { DicePicker } from '@3d-dice/fui'

const dicePicker = new DicePicker()

Config Options

The DicePicker only has one argument which is a config object

targetstring :dom node selectordocument.bodyThe target DOM node to inject the roller into
onSubmitfunctionnoopcallback triggered on form submit, after notation has been parsed
onClearfunctionnoopcallback triggered when form reset event is triggered
onRerollfunctionnoopcallback triggered when FDP returns reroll results
onResultsfunctionnoopcallback triggered when there are no reRoll results and the final result object has been parsed by FDP


submitFormevent :event - form submitTake the submit event and passes the input notation to FDP. Calls onSubmit callback with results.
clearnoneClears the current notation and any values stored in FDP. Calls the onClear callback
setNotationnotation :objectSet the default values for tossing, sort of like placeholder values
handleResultsresults :objectPasses roll results object to FDP to check for rerolls. Gets the final parsed results from FDP. Calls onResults callback

There's currently nothing in Dice Picker that would trigger rerolls. Most of the code in this module was copied from the Advanced Roller

With the exception of setNotation these methods and callbacks operate the same as the Advanced Roller.

setNotation example:

d4: {
count: 2
d6: {
count: 2
d8: {
count: 2
d10: {
count: 2
d12: {
count: 2
d20: {
count: 2
d100: {
count: 1

Screenshot with notation set: Set Notation