Gloomhaven Monster Tracker

It's been years since I presented at DrupalCon Global on migrating paragraphs into layout builder. But I remember well that that was also my first time doing Drupal Trivia, I believe. And it was Hilmar, The Drupal Viking, who ran it from his study.

If you've never seen it, it's a sight to behold. The room is literally floor to ceiling covered in board games. Every bookshelf is lined with well-organized games. And then, someone had to ask. "Well, which one's your favorite, Hilmar?"

And he replied, and I felt pretty certain that whatever he said I was going to have to own. So within a year I received Gloomhaven as a Christmas gift.

Described that day by Hilmar as "a great game if you especially like all the battle part of D&D, and less so about the story." I've found that to be largely true, as we've been playing in my game group about weekly for over a year now. (OK, yeah, so sometimes it takes a while to find the right group...!). I often describe it to non-gamers as "the board game version of D&D," and that seems to land OK.

The mechanics of the game, as goes the mechanics of D&D battle, can be fairly complicated. But mostly, there's a lot of tracking of things that needs to be done. Players each play one character, and are generally fine at keeping track of their own stuff easily. But all the "monsters" or enemies you are fighting have their own health (hit points) to track, as well as various conditions that may befall them (being "poisoned" or "wounded," for example). This led to some creative mechanisms for tracking those conditions, especially the hit points.

We prefer the idea that hit points tick down, but generally with the game as it is designed, they tick up, until you do "10 damage," say, and then the enemy is removed from the game. We found early on that we instead would put 10 tokens on the card for the monster, and then slowly remove them as they took damage. This gave us better visibility on which enemies we should target.

But all those chits and tokens were hard to keep track of, just physically on the small cards that are meant to hold the monster information. And, as the game progresses, you have even bigger and bigger numbers to hit (maybe 20 instead of 10, for example).

Behold, My Gloomhaven Monster Tracker

So, like any good tech nerd, I assumed there was a good digital solution out there that could solve my problems. But, while there are a number of good tools that are out there, none of them fit quite right with the vision that me and my game group defined. The X-Haven Assistant is a really amazing, but very robust tool for our needs. You can track everything in that, and that wasn't what we wanted. We just wanted to replace the monster cards in a way that we could project on a screen or big monitor so that everyone had access to the information they needed.

So, me and Warp AI got to work, after a UI/UX planning session with some members of my game group (one of whom is also a software developer). What was born out of that was a fairly robust, client-side-only monster tracker for Gloomhaven.

The Technology

The Monster Tracker is built using SvelteKit. I'm pretty bullish on Svelte, although I've been told recently at NEDCamp that modern React is way easier to understand than it used to be, which was my primary reason for choosing Svelte as my own personal favorite JS Framework.

Nonetheless, SvelteKit was what I knew so I decided to get started in that. I wanted to see how to use Warp AI, but I certainly wanted to do it on something low-stakes. I can't lie, I was impressed. I spent a couple evenings putting this tracker together, and then a few additional fixes we came up with later (like tracking of bosses and allies/objects, small tweaks to make the screen fit more on it, and those kinds of things). As I caught things the agent was doing incorrectly multiple times, I created rules for it. As I found it creating its own regressions, I added tests which I could then run, or instruct it to run to check its work.

Even as I, the developer, would walk through the code, I could understand what the issues were, and was able to have the agent fix them using my prescribed method. It was a rapid cycle of how I work with new developers--break the idea down into small chunks, give them one chunk to focus on at a time, then slowly add more until you have a full application. Check the work at each small increment, and encourage testing and writing tests as you go.

I sincerely hope that some other people find this tracker useful! I don't have any way to know if anyone else is using it, but maybe if I get some issues some day or some forks, I'll know people have tried.

Here's a link to the project on Github.