Warband Manager Devlog: Part 1

I have been coding manager tool for a tabletop game Mordheim. Turns out keeping track of your warband is a lot of work that could be automated. Like a proper geek I am making an app to just that.

Because of Covid-19 we have been playing online with Tabletop Simulator, and it has been a blast. Handling 20 units, rolling dice and building maps works well. Sometimes there are issues with placing units on slopes. Hence, we tend to favor flat surfaces. If you want to play Mordheim, or other tabletop games with your friends, it’s worth a try. It even works on Linux.

Tech Stack

  • React
  • React Redux
  • React Redux Saga
  • Date-fns
  • Firestore
  • Material-UI
  • Ramda
  • Testing Library
  • Heroku
  • JSS

So far I have been satisfied with my technology choices. At this point I wish I had used Typescript from the start, and that I would have picked something else than Firestore. My main goal with the stack was to move fast, while making reasonably maintainable code.

Why Firestore?

I’ve also done more reading on Firestore, and apparently there can be performance problems. The whole system is also still in beta. However, it did allow me to set up email and Google sign in a few hours, including resetting password. I wonder if there are alternatives as fast ways of doing this, without Firestore. Or maybe only using Firestore for authentication?

Obviously not having to write backend logic has been awesome so far. Simply directly modifying the database from front-end is definitely fast and efficient. The Firestore rules keep users from screwing up the database for other users, but I am worried that someone will break their own data somehow.

Another challenge is backward compatibility. Since there is no schema, you have to somehow make sure that the newer versions of the frontend take into account older datasets. A warbands data structure will probably have some additions made into it later. Then some Warbands have that data, and some don’t. Basically this means writing checking, and initialization into the frontend, and/or still writing migrations to the Firestore, even though there is no schema.

Typing and schemas

I believe starting to write the app in Typescript would help. I have not been a fan of Typescript, but now that I have been using it for a while, I’m starting to like it. It feels a bit stiff, but it definitely reduces the amount of bugs, and confusion. I regularly find bugs in my vanilla JavaScript code by writing it in Typescript. This is obviously a big deal, and will probably save more time than debugging the code later. Your users will also receive code with fewer bugs.

Optimizing Giant Forms With useReducer!

Since dispatch doesn’t change on each render this allows memoizing the handleHenchmanChange function.

“handleHenchmanChange” function is later on passed to each Henchman component. Since with useReducer it stays the same when henchmen change, only the changed henchman will be rendered, instead of all of them, like previously with setState.

Much faster form with useReducer :-)

Admittedly this means that I am using Redux and useReducer. I guess this can be confusing two have two different system using actions and reducers. I’m honestly trying to move away from Redux, as it typically feels overkill.

Next up

  • Get beta testers
  • Organize collecting feedback
  • Error reporting (Sentry or Bugsnag)
  • Auto filling hero and henchman stats
  • Ask permission to send email about app updates
  • Contact Games Workshop about licensing