Tool: Encounter Tables

Previously, I detailed a couple tools for your games: inline dice rolls (and its advanced update) and random tables. That's two great tastes that taste great together. We can combine these two tools to create a new way to present an old idea: the random encounter table.

You can grab the code for this tool at GitHub. I'm not going to break it down here as it basically just combines the JavaScript and CSS from the two older tools.

To use the tool, set up a table just as you did with the original random tables tool. It can use the data-weighted and data-weight custom data attributes if you need them. In the example code here, I included a class scale that uses the CSS transform property to make the rolled entry "pop" a little to draw the eye, but this is optional and dependent on your visual design.

Inside each entry, you can include any number of span elements with the dice-roll class to indicate inline dice rolls as with the original tool. The example code uses the full suite of options from the advanced update.

When the user clicks your table, it randomly selects an entry. If that entry has any inline dice rolls, they are rolled and the result overlayed on the dice notation. (To produce a cleaner experience, clicking a dice notation directly won't roll the dice, but it will trigger a random selection from the table.)

Clicking to select another random entry will clear any inline dice results, as will clicking on the selected entry to clear the table.

And now, I'll leave you with an example encounter table that selects a random Level 1 dungeon encounter for 3.5-edition fantasy: