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`	Load table with pre-rolled result.	`false`
`hideroll`	Hide rolls and just display the results.	`false`
`hidecalc`	Show rolls but hides calculations (i.e. `1 + 4`). Ignore when `hideroll == false`.	`false`

Examples

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

<vellum-random-table select="#result" preroll hideroll>
  <caption>
    Random Encounters
  </caption>
  <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">
  <caption>
    Random Encounters
  </caption>
  <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>
  <caption>
    Random Encounters
  </caption>
  <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>

Installation

Install via npm: npm i vellum-random-table -S.

Usage

Include the <script> in your project:

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