Dice Roller Web Component

This is a dice roller web component. I created this mainly for use with playing table top role playing games online. This can be used just as a simple web dice roller or incorporated into interactive rule books or character sheets.

Usage

Install the dice-roller.js script and add the <dice-roller></dice-roller> to your html. Clicking on the dice makes them roll. You can change the dice and how they are totaled using the attributes. The component can be styled using css variables (I have plans for more styling later). More detailed instructions TBD.

Attributes

1. dice: string comma separated list of dice to roll (i.e.,"6,8,10,6")
2. total: how the total is arrived at
3. modifier: + or - after dice are rolled
4. bonus-die: additional die added after dice are summed up
5. difficulty: number required for success
6. size: visual size of dice

Dice Roller: All Attributes

Powered By The Apocalypse

Forged In The Dark

Agon: Hero

Agon: Strife Player

Installation

Add the dice-roller.js script to your web site, then add the <dice-roller></dice-roller> web component to your html.

CDN

<script src="https://unpkg.com/@colinaut/dice-roller/dist/dice-roller.js"></script>

NPM/PNPM/YARN

npm i @colinaut/dice-roller

pnpm i @colinaut/dice-roller

yarn add @colinaut/dice-roller

Eleventy static site

If you are using Eleventy, and want to install locally rather than rely on the CDN, you can install via NPM/PNPM/YARN and then pass through the js file so that it is included in the output. Then you would just need to add it to the head.

eleventyConfig.addPassthroughCopy({
    "node_modules/@colinaut/dice-roller/dist/dice-roller.js": "js/dice-roller.js",
})

<script src="/js/dice-roller.js"></script>