Add hideroll attribute

grislyeye · Apr 5, 2024 · 4df797c · 4df797c
1 parent b8affa7
commit 4df797c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -4,17 +4,18 @@ Web component for interactive random tables.
 
 **[Demo](https://grislyeye.github.io/vellum-random-table/)**
 
-| Attribute | Description                                              | Default |
-| --------- | -------------------------------------------------------- | ------- |
-| `select`  | CSS selector for the container/input to display results. |         |
-| `preroll` | Load table with pre-rolled result.                       | `false` |
+| Attribute  | Description                                              | Default |
+| ---------- | -------------------------------------------------------- | ------- |
+| `select`   | CSS selector for the container/input to display results. |         |
+| `preroll`  | Load table with pre-rolled result.                       | `false` |
+| `hideroll` | Display dice roll in parenthesis after roll.             | `false` |
 
 ### Examples
 
 Simple, one-column table (elements are selected at random with equal weight):
 
 ```html
-<vellum-random-table select="#result" preroll>
+<vellum-random-table select="#result" preroll hideroll>
   <caption>
     Random Encounters
   </caption>

diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
   <body>
     <h2>One-column random table</h2>
 
-    <vellum-random-table select="#result" preroll>
+    <vellum-random-table select="#result" preroll hideroll>
       <caption>
         Random Encounters
       </caption>

diff --git a/src/vellum-random-table.ts b/src/vellum-random-table.ts
@@ -22,6 +22,9 @@ export class VellumRandomTable extends LitElement {
   @property({ type: Boolean })
   preroll: boolean = false
 
+  @property({ type: Boolean })
+  hideroll: boolean = false
+
   connectedCallback(): void {
     super.connectedCallback()
 
@@ -78,8 +81,11 @@ export class VellumRandomTable extends LitElement {
 
     if (this.mode == TableMode.FirstColumn) {
       const selection = this.selection(0)
-      const result = selection[Math.floor(Math.random() * selection.length)]
-      this.display(result)
+      const roll = Math.floor(Math.random() * selection.length)
+      const result = selection[roll]
+
+      if (!this.hideroll) this.display(`${result} (${roll + 1})`)
+      else this.display(result)
     } else if (this.mode == TableMode.TwoColumn) {
       const ranges = this.ranges(0)
       const selection = this.selection(1)
@@ -90,7 +96,9 @@ export class VellumRandomTable extends LitElement {
         const index = ranges.findIndex((range) => range.includes(roll))
 
         const result = selection[index]
-        this.display(`${result} (${roll})`)
+
+        if (!this.hideroll) this.display(`${result} (${roll})`)
+        else this.display(result)
       }
     }
   }