Display Results

Another module available as part of the @3d-dice/dice-ui package. This module takes the final result object as input and creates a modal popup window displaying the final roll results and the final value of that roll.

This module will also apply styles based on different roll properties such as crit-success, crit-failure, die-dropped, die-rerolled, and die-exploded.

If the roll had a specified target number for success then this module will display either a green checkmark for success, a red x for failure and a gray minus for null (neither success or failure). It will also display the sum total of successes.

This module now supports string values and an array of string values. This is useful if the dice faces represent symbols or text (e.g.: "Left, Right, Center" or "Genesys").

Install

Add the dice-ui module using

npm install @3d-dice/dice-ui

Setup

Then create a new instance of the roller

import { DisplayResults } from '@3d-dice/dice-ui'

const Display = new DisplayResults()

Config

The constructor only accepts one argument which is a CSS selector where this component should be injected into the DOM.

Option	type	default	Description
target	string :dom node selector	document.body	The target DOM node to inject the display results into

Methods

Method	Arguments	Description
showResults	rollResults :object	Takes roll results as input and generates a popup display
clear	none	hides the popup display with a CSS transition effect

Example

const results = {
  count: {
    type: "number",
    value: 2,
    success: null,
    successes: 0,
    failures: 0,
    valid: true,
    order: 0
  },
  die: {
    type: "number",
    value: 20,
    success: null,
    successes: 0,
    failures: 0,
    valid: true,
    order: 0
  },
  rolls: [
      {
      critical: null,
      die: 20,
      matched: false,
      order: 0,
      roll: 19,
      success: null,
      successes: 0,
      failures: 0,
      type: "roll",
      valid: false,
      value: 19,
      drop: true
    },
    {
      critical: "success",
      die: 20,
      matched: false,
      order: 1,
      roll: 20,
      success: null,
      successes: 0,
      failures: 0,
      type: "roll",
      valid: true,
      value: 20
    }
  ],
  success: null,
  successes: 0,
  failures: 0,
  type: "die",
  valid: true,
  value: 20,
  order: 0,
  matched: false
}

Display.showResults(results)

Styles

class name	example
crit-success	20
crit-failure	1
die-dropped	2
die-rerolled	1
die-exploded	6
success
failure
null

Examples

4d6! (exploding roll)

10d10>7 (targeted success roll)

2d20kh (advantage roll - keep highest)

2d10ro<2 (reroll once 2s or less)