Display Results

Another module available as part of the __F__antastic __U__ser __I__nterface package available at @3d-dice/fui. 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.

Install

Add the FUI module using

npm install @3d-dice/fui

Setup

Then create a new instance of the roller

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

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)