I created this app for one purpose: Track the dice rolls during games of (Settlers of) Catan. If you’re not familiar with Catan, it’s a German-style resource-strategy game. You need resources to buy things and you need to buy things to build things, and generally you need to build things to win. The dice rolls determine what resources you pick up depending on where you decided to ‘settle’. Long story short, there’s an advantage to knowing how frequently a number has come up to help you strategize.
Initially, we had just been writing down our rolls on paper, but it’s not very visually informative. Sure, there is documentation in the form of a long list of numbers, but the most frequent numbers aren’t grouped together. You’d have to scan up and down the list to see which one repeats the most. A total time waster.
Our second solution came as a spreadsheet that documented our dice rolls. I created the spreadsheet with a graph that would automatically graph out the numbers. This worked out well enough, but there was still room for improvement. For one, it meant I always had to pull out my laptop, which took up a lot of room on our makeshift, space-limited game table. Secondly, since I was the one that created the spreadsheet and knew how to work it, I ended up being solely responsible for entering in the data. That meant that after every roll, I would have to find the number, delete the existing count and increment it by 1 so that the graph would update. This required using both the trackpad and the keyboard. When you’re doing it 50-70 times each game, it gets very tedious, not to mention disruptive to your overall game play experience.
The Solution (v1)
I decided that I could probably recreate the functionality the spreadsheet was providing me via a web app. This would give me more flexibility on input and would eliminate having to use my computer since a tablet or phone would do the trick.
Within a few days, I had a web app up and running that achieved exactly what I needed it to. A cross-platform way of tracking our dice rolls with a click of a mouse and automatically displaying that data via a graph. As a bonus, it also tracked which player’s turn was up next.
You can view it here.
The Solution (v2)
For the greater part of a year, my initial weekend project worked perfectly fine. When I decided that I wanted to learn React, I needed a project to work on that would help me learn the concepts and solidify that knowledge. Since I learn best when I apply abstract ideas into concrete concepts, I decided to revisit my dice app. The app fulfilled a need that I (and my fellow Catan players) had a vested interest in; this made learning React and refactoring the app much more rewarding.
You can view the React version here.
There are some other features that I plan to implement into this app, using them as my motivation and playground to learn new skills. Some of those features include:
Software, Tools and Libraries used: