patulio

[patulio]

Starting a dev log

Hello everyone, this will be my first post here, for quite some time now, I we been working on a side project for which I would now try to start a dev blog about.

The project is a digital version of a board game my friend has created which I am building in React.

React is probably not the best tool to use to create a digital board game, but I wanted to try to stretch my web dev skills by applying them to something a bit unconventional.

I would humbly say that I believe that along the way I’ve built some interesting solutions that I’ll be sharing here to both keep myself motivated and hopefully to inspire and teach someone reading these posts something new.

For my first example, I’ll share a piece of the code which is fairly central to my entire setup, the whole game works by a series of reducer actions which modify the global GameState, using just “vanilla” React contexts and reducers for global state management with a small custom TypeScript actions setup around it.

The entire game logic was huge to just directly write in to the reducer, so I first started to extract some helper function outside of it, but it was still quite a mess and returning back to a piece of code after a while was not the most pleasant experience.

The following code example was my solution to try to bring some order in to the codebase, which made it a lot more easier for me to manage.

I created something like a facade pattern, so that my reducer at first glance hides the complexity and cleanly describes what is happening at each step while providing me with an option to more closely examine any of the steps and dive in to its implementation details separately.