Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/grislyeye/vellum-random-table
Web component for interactive random tables.
https://github.com/grislyeye/vellum-random-table
lit ttrpg ttrpgs webcomponent
Last synced: 26 days ago
JSON representation
Web component for interactive random tables.
- Host: GitHub
- URL: https://github.com/grislyeye/vellum-random-table
- Owner: grislyeye
- License: mit
- Created: 2022-05-14T10:18:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-30T17:16:31.000Z (about 1 month ago)
- Last Synced: 2024-10-01T03:02:51.093Z (about 1 month ago)
- Topics: lit, ttrpg, ttrpgs, webcomponent
- Language: TypeScript
- Homepage: https://grislyeye.github.io/vellum-random-table/
- Size: 342 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `` [](https://github.com/grislyeye/vellum-random-table/actions/workflows/lint-and-test.yml)
Web component for interactive random tables.
**[Demo](https://grislyeye.github.io/vellum-random-table/)**
| 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):
```html
Encounter
1 wolf
2 goblins
Roll
```
Two-column table where items are selected by a dice roll:
```html
2d4+1
Encounter
3-5
1 wolf
6-8
2 goblins
9
dragon
Roll
```
Two-column table where items are selected by a d66:
```html
d66
Encounter
11-46
1 wolf
51-65
2 goblins
66
dragon
Roll
```
## Installation
You have a few options (choose one of these):
1. Use the script directly via a 3rd party CDN.
2. Install via [npm](https://www.npmjs.com/package/@daviddarnes/mastodon-post): `npm install vellum-random0table`.
3. [Download the source manually from GitHub](https://github.com/grislyeye/vellum-random-table/tags) into your project.
### Usage
Include the `` in your markup:
```html
<script
type="module"
src="https://www.unpkg.com/[email protected]/vellum-random-table.js"
>
```
If you host the script as part of your project:
```html
```