<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):

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

Usage

Include the <script> in your markup:

<script
  type="module"
  src="https://www.unpkg.com/[email protected]/vellum-random-table.js"
></script>

If you host the script as part of your project:

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