coding character sheets

Tool: Encounter Tables

Paul Stefko
Jul 11, 2022
A tool for creating clickable tables that process inline dice rolls when selecting an entry.
📕 2 min.

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:

01–031d3 Medium monstrous centipedes (vermin)
04–081d4 dire rats
09–101d4 giant fire beetles (vermin)
11–131d3 Small monstrous scorpions (vermin)
14–161d3 Small monstrous spiders (vermin)
17–201d3 dwarf warriors
21–221d3 elf warriors
23–251 darkmantle
26–281 krenshar
29–301 lemure (devil)
31–401d3+1 goblin warriors
41–501d4+2 kobold warriors
51–561d4 human warrior skeletons
57–621d3 human commoner zombies
63–711d4+1 Tiny viper snakes (animal)
72–801d3 orc warriors
81–851d3 stirges
86–901 spider swarm
91–100Roll on 2nd-level table