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
Part of the stack for Warband Manager includes:
- 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?
Using Firestore means I cannot develop locally, and I always have to a have a development environment in Firestore console, and to be connected to it. This is a bummer if you have multiple developers, since the first thing you have to do is go into Firestore and set up your own project through the user interface, and update its information to source files tracked by git. Not optimal.
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
Another drawback to using vanilla JavaScript and Firestore is that I have so far written zero types and schemas. As the app expands it will be harder and harder to keep track of everything. In practice this would show up as assuming something to be defined in data, when it’s not. Or it being of different type than assumed.
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!
The past few days I’ve been optimizing the app. Turns out React’s new hook useReducer is perfect for optimizations. Previously I was using setState, but this was causing large parts of the warband form to render on each key press when typing.
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.
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
My to-do list includes:
- 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
Summary
Let me know if you are interested in the app. Don’t forget to clap and comment! Cheers!
