TypeIt
I’ve had this idea for a while to create a game where all you have to do is type words. One at a time, and see how many words you can type in 60 seconds. At baseline, it seems simple. But once I really started to dive in, I found out that it was a bit more challenging than I thought.
The hardest part of creating this game was building the functionality of letters filling in one-by-one as I typed them. Typically you can just create words on a page, but my words had to be 100% interactive. Every letter had to have an event listener, and every letter had to have its own functionality of filling in when it was typed (but only if it was typed after the preceding letter).
To achieve this, I created a word class. A word class would be constructed with a string (the word that should display), a css class that it would be displayed with, a parent class which denoted where on the page it would be inserted when rendered, and then a callback function to run whenever the word was completed. For example, when you finish typing “SCORE” on the home page, the score modal will display.
When a word is constructed, each letter is split and turned into a letter class. The letter class is what holds the functionality of filling in the letter, assigning event listeners and so on.
Once the letter and word functionality was built out, everything started to fall into place. I hit an API to generate the random words for the game which was fun. It means there are a ton of words that I’ve never seen before, but it just makes the game more interesting.
Then there’s the backend. The backend is relatively simple, and just contains the Users, and a user can have many Scores. This was the first time I built out a full-stack app, so rendering in JSON and getting all of the fetch requests to work was super interesting to me.
Overall, building this app was such a good experience for me. Its the first thing I’ve built that “does something” and it felt good to work through the process. It also leaves some room for improvement, like adding in authentication using bcrypt, and possibly creating different levels for the game.