Hack&Roll 2022

Overview

Project Title: CAPSLOCK
Role: Backend Development
DevPost Link: https://devpost.com/software/capslock
GitHub Project Link: https://github.com/ItzyBitzySpider/CAPSLOCK/
Competition Result: Top 8

Introduction

Just about a week ago, River and I participated in Hack&Roll, the annual Hackathon organised by NUS Hackers. This being my first Hackathon, I didn’t expect to win much.

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 Product

Gameplay

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

Product Improvements

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

Personally

• 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

Technical

• 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)

Conclusion

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.