Package Exports

vellum-random-table
vellum-random-table/vellum-random-table.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vellum-random-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`<vellum-random-table>`

Web component for interactive random tables.

Demo

Attribute	Description	Default
`select`	The container/input to display roll results, identified by a CSS selector.
`preroll`	Loads table with pre-rolled result.	`false`
`hideroll`	Hides rolls and just displays the results.	`false`
`hidecalc`	Shows rolls but hides calculations (i.e. `1 + 4`). Ignored when `hideroll == true`.	`false`

Examples

Simple, one-column table (elements are selected at random with equal weight):

<vellum-random-table select="#result" preroll hideroll>
  <table>
    <thead>
      <tr>
        <th>Encounter</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1 wolf</td>
      </tr>
      <tr>
        <td>2 goblins</td>
      </tr>
    </tbody>
  </table>
  <button>Roll</button>
  <input id="result" type="text" />
</vellum-random-table>

Two-column table where items are selected by a dice roll:

<vellum-random-table select="#result">
  <table>
    <thead>
      <tr>
        <th>2d4+1</th>
        <th>Encounter</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>3-5</td>
        <td>1 wolf</td>
      </tr>
      <tr>
        <td>6-8</td>
        <td>2 goblins</td>
      </tr>
      <tr>
        <td>9</td>
        <td>dragon</td>
      </tr>
    </tbody>
  </table>
  <button>Roll</button>
  <input id="result" type="text" />
</vellum-random-table>

Two-column table where items are selected by a d66:

<vellum-random-table select="#result" hidecalc>
  <table>
    <thead>
      <tr>
        <th>d66</th>
        <th>Encounter</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>11-46</td>
        <td>1 wolf</td>
      </tr>
      <tr>
        <td>51-65</td>
        <td>2 goblins</td>
      </tr>
      <tr>
        <td>66</td>
        <td>dragon</td>
      </tr>
    </tbody>
  </table>
  <button>Roll</button>
  <input id="result" type="text" />
</vellum-random-table>

Multi-column table which concatenates results:

<vellum-random-table select="#result" hideroll>
  <caption>
    Spark Table
  </caption>
  <table>
    <thead>
      <tr>
        <th>1d4</th>
        <th>Spark 1</th>
        <th>Spark 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Axe</td>
        <td>Wood</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Sword</td>
        <td>Tavern</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Dagger</td>
        <td>Chest</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Bow</td>
        <td>Castle</td>
      </tr>
    </tbody>
  </table>
  <button>Roll</button>
  <input id="result" type="text" />
</vellum-random-table>

Installation

You have a few options (choose one of these):

Use the script directly via a 3rd party CDN.
Install via npm: npm install vellum-random0table.
Download the source manually from GitHub into your project.

Usage

Include the <script> in your markup:

<script
  type="module"
  src="https://www.unpkg.com/vellum-random-table@1.1.0/vellum-random-table.js"
></script>

If you host the script as part of your project:

<script type="module" src="vellum-random-table.js"></script>