Genesys Results

This module has most of the same features as Display Results. It takes the final result object as input and creates a modal popup window displaying the final roll result totals.

This module supplies symbols matching the dice face values and colorizes them to match the die that produced them.

note

This module is for use with the Genesys dice theme. The main intention of this module is to function as an example of how to create your own UI interface for the Dice Box.

Install

Add the dice-ui module using

npm install @3d-dice/dice-ui

Setup

Then create a new instance of the roller

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

const Display = new GenesysResults()

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

Styles

All styles are scoped to .genesysResults.

class name	example
die-boost
die-setback
die-ability
die-difficulty
die-challenge
die-proficiency

note

Empty faces with no value are not shown in the results

Tooltips

A simple tooltip has been implemented in this module to help identify the symbols on hover.