Loading...
View related media
This game is heavily inspired by a physical card game commonly known as SET. The goal of the game is to form a collection of cards that either have all different values for their attributes, or all the same value. It's tough to explain in words, so I urge you to give it a spin, or read the more extensive explanation on the game page itself.
I created this digital variant of the game as a practice for the physical version, but also as a challenge for myself. I started working on this project on new year's eve, and managed to get the first functional verion before the end of the day! In the month after, I refined it and made additions such as gameplay options, accessibility options, statistics tracking and a "how to play" overlay.
I hadn't done much with React and TypeScript outside of my professional career. Seeing how quickly I was able to build a simple game like this really went to show how much I have learned since starting with React and TypeScript. Especially the latter really helped with making the code more readable, and less prone to errors.
The initial game was made within a single day. In the evenings and weekends of the month after, I created the rest of the features.
The game is built entirely with React, meaning the game state is kept entirely within React. Although not exactly what React is created for, it works quite well for a simple game like this: On selection of a card (part of the state), a useEffect is called. There we check how many cards are selected. If there are three selected, we can check if it is a valid combination.
At first I validated the selection when it was made. But since I also had a feature where you can request a hint or reveal a combination, I had to check for valid combinations whenever the field changed. Hence, I simply stored all valid combinations and was able to check if the selected combination was a valid one. This was a nice little optimization!