Inspired by our team’s love for typing (particularly River’s addiction to TypeRacer), we decided to create a multiplayer (1-vs-1) interactive typing game - CAPSLOCK - named after what we think is the most useless key on the keyboard.
The game has 2 game modes - Elimination and Attack&Defense.
In Elimination, both players are given a shared board of 20 words. They are given 60s to type as many words on the board as they can. Typing a word successfully removes it from the board and points are added based on word length. However, this can lead to ultimate chaos as players try to waste their opponent’s time by typing a word they think the other person is typing faster.
In Attack&Defense, players are given a text field and 3 lives. They must then submit English words. Players can attack by submitting a word that has not appeared before. The word is added to the opponent’s list of words and he/she is given 10s to defend. This is done by typing a word on the player’s own list. This game mode trains both typing speed and vocabulary.
How we made it
CAPSLOCK uses React on the frontend and node.js for the backend. TailwindCSS was used for the frontend as well but I shall leave it to River’s blog post to cover that.
I wrote the node.js backend which primarily consisted of web socket connections using the socket.io library. Other relatively “complex” algorithms in the code were word generation and English dictionary checking without reading the entire file into memory. This process is detailed in the GitHub backend README
In terms of application feature wise, we thought of a couple of enhancements:
- More game modes
- More players sharing the same board for Elimination mode
- Thematic (e.g. Sports) word generation for Attack&Defense
What I’ve Learnt
- I love coding backend applications
- I have a love hate relationship with js
- socket.io is really powerful (From simple event listeners to seamless room support, middle ware support and Redis distributed computing adapter)
- I can code for about 24h straight with just a 1h nap
- I have amazing coding synergy with River
- Learnt a lot about js intricacies (e.g. Maps vs object initialization)
- Deeper understanding of web sockets using socket.io library
- A little bit of react syntax (enough to roughly understand)
This was a really enjoyable Hackathon experience and I hope to participate in more of such Hackathons. It certainly helped me rekindle my passion for programming as I did not have much motivation to code on my own without much purpose other than “interest”. Hack&Roll 2022 was truly a fantastic first Hackathon experience (especially because we actually won) and I look forward to participating in future Hackathons.