Write Your Own D&D Encounter Tables in JavaScript for Dungeon Masters

Introduction to Clickable Encounter Tables + an Example

Here is a snippet that could potentially be of use for any dungeon masters. After this walkthrough, you will understand how the script works and adapt it for your own games.

The full example is here:

https://codepen.io/mongo0se/pen/JjOvgZg

Snippet Walkthrough

The meat and potatoes is the JavaScript function rollOnTable:


function rollOnTable() {
 
 // create a list of all table rows 
 var trs = document.getElementById("encounters").getElementsByTagName("tr");

 // pick a random number that is within the range of the number of table rows
 var rand = Math.floor( Math.random() * trs.length );
  
 // set all rows to white background (not highlighted). 
 // - this is in case we roll again on the table. Otherwise we would keep highlighting 
 //   rows at random and it would be unclear what the result would be.
 var trsList = Array.prototype.slice.call(trs);
 trsList.forEach((element) => { element.style.backgroundColor = "white"; })
 
 // highlight new row
 trs[rand].style.backgroundColor = "lightblue";
}

In a nutshell, all that happens is that you run this function first on page load, and then again on a button press.

The table (as shown in the codepen.io example) can be styled to fit. I included the dice roll number to make it printable, to give the option.

Further Uses Beyond Encounter Tables + Flavour Text

If you are still reading at this point, you probably already realize that the uses far exceed encounter tables. You could create a table for weather, loot or flavour text.

For flavour text, I would suggest an adaption of my date night generator: https://codepen.io/mongo0se/pen/oNwBxvz.

This snippet uses jQuery instead of vanilla JavaScript, like the last snippet. You could of course drop this dependency and apply the same logic. I have no reason to use jQuery here, it was purely out of habit.

For example, the 3 arrays that contain pieces of date idea strings:


var item=[
  "A broadsword",
  "A silk mask",
  "A withered hand" 
];
  
var itemAction=[
  " shimmers into existence",
  " glows menacingly",
  " emits an eldritch whispering from many low voices",
];
	
var itemSuffix=[
  ". ",
  ". ",
  " in the hand of a giant sprinting towards you.",
  " on an ornate wooden plinth."
];

In Closing: Write Your Own Clickable Encounter Tables

I hope these snippets find use in a session somewhere, or at the very least get your creative juices flowing.

Take it easy, and if you can’ take it easy, then take it any way you can.