If you’ve been following my blog, its no secret that I like games. And while it is my goal to create something more exciting than a basic board game, I wanted to keep things simple for this project to try some new things out.
For those that don’t wish to read further, you can play the game here! I haven’t added any instructions yet, so if you aren’t familiar with Yahtzee, you might want to brush up on how to play before you dive in.
When I started this project I had a few goals in mind: ReactJS practice, utilize styled components, explore react context for state management. As I was getting closer to completion, I had some roadblocks that shifted what I wanted to learn, and the actual outcomes were much different than I intended.
State Management
Initially, I just used local state on the game component to keep track of everything and passed props where I needed to. This was good for my first iteration, but I knew it wasn’t going to be a final solution. Anytime there is a change in state, the entire tree rendered. This meant that when I clicked a die to lock it in, everything on the page would re-render, even though the only thing that changed was the die. To solve this, I decided to add redux. On a previous project, I was introduced to redux and it was complicated and intimidating. So naturally for this project, I wanted to explore other state options. After looking into it though, redux made sense for this project. Being a bit more simplistic application (and making sure I used the redux toolkit), it was a bit easier to understand how the pieces were working. I do not think I would have used this if the toolkit was not available.
Styles
I decided to add Material UI to my project so that didn’t have to manually style everything. I wanted to deliver the MVP in a way that was presentable, but mainly focus on the functionality. For some of the components that would need a touch up, I found that you could used styled component syntax. This was great, as I was hoping to do some CSS in JS practice and I was curious how this would work. After getting everything wired up, I played a few games and noticed performance issues. It took a bit of tracking down, because the application wasn’t that complicated. After eliminated refresh issues and running timers on my roll dice calculations, I found an issue in MUI v4 around styled components. Needless to say, I tore all of it out and just used stylesheets.
Possible Next Steps:
I would like to enhance this project with some multiplayer, much like I did with Connect 4. Hopefully this will help make it a bit more exciting for people to get into. It would also be useful to add some How to play instructions for beginner users and also add the Yahtzee Bonus category into the game, as it is in the real version of the game. I also would like to explore updating the UI and making it more responsive for mobile/desktop. Right now, its really mobile first, and the experience is ok for both environments, but could be improved.
Breakpoint 