I combined two ideas into a game and it’s my new favorite thing.

Background

Every time I see my friends play hangman on the whiteboards in the study rooms, it always comes down to everyone guessing a letter person-by-person and arguing who would take the next turn. And sometimes the game would bore on because the person who thought of the word made it too complicated for everyone.

I wanted to solve this by creating a system that encouraged both teamwork and competition, as well as a scoreboard to make things more interesting.

Originally, I wanted to create a game where people would vote a letter, and everyone would see a bar chart with the most-voted letters. And after a fixed timer, the system would choose the letter with the most votes.

I was walking with a friend and mentioned this idea to him who then suggested the idea of having everyone's votes in a donut chart. Instead of choosing the highest-voted letter and arbitrarily break ties, I could have everyone's vote occupy an equal amount of space on the wheel and spin it to have the thrill of randomness.

Implementation

When I developed this project, I did not have much experience in frontend frameworks that I use nowadays. However, all I knew I needed was an Express backend which would handle all the socket.io connections and game logic and just serve static HTML and CSS files to the users. In my opinion, a lot of the code was more-or-less all over the place. However, in the end it really taught me how important modularity is, especially for large projects.

For the frontend, I was able to manage whipping something up super fast with Bootstrap, although it does come with some limitations, especially since I wanted to customize a lot of elements. Nonetheless, I was able to create a responsive layout, so anyone could easily connect on their phone or laptop.

To create the spinning wheel, I used Chart.JS and their built-in doughnut chart. However, I needed to create a custom plugin in order to display the current letter when the wheel was spinning.

const counterPlugin = {
    id: 'counter',
    beforeDraw(chart, args, options) {
        const {ctx, chartArea: {
            top, right, bottom, left, width, height
        }} = chart;
    
        ctx.save();
        
        ctx.font = options.fontSize + 'px ' + options.fontFamily;
        ctx.textAlign = 'center';
        ctx.fillStyle = options.fontColor;
        ctx.fillText(options.chartText, width / 2, top + (height / 2) + (options.fontSize * 0.34));
    }
}

I also decided to leverage some built-in libraries, such as Sweet Alert, which made it easy to create a customizable Toast notification for when users enter the game and notify score changes.

Gameplay

Although I faced some hardships during the development process, I was able to get a result that I was really satisfied with, especially for a beginner-like project.

The Gameplay Cycle:

Here's a short clip of how the game is played:

1. Every player anonymously votes on a letter
2. Every player's letter vote gets added onto the wheel. If two people vote the same letter, the space gets shared.
3. After a fixed timer ends, the wheel spins and the game chooses the letter it lands on.
   1. Players gain points if their letter was chosen and it is in the word.
   2. If a letter is not in the word, then everyone who did not vote the letter gets a point.
   3. Players who don't vote get no points.

Conclusion

Overall, this was actually a more enjoyable experience than I had anticipated. Even though I had done an extensive amount of programming for coursework, this was my first large personal project. Furthermore, it had fueled my excitement for exploring full stack development because I had to be capable of managing both the server and the client.

More importantly, however, was that I had learned how much more convenient having a frontend framework is. Having to manually update the HTML on socket events was very tedious, and without a framework that manages states such as React, I had made sure to mark learning frontend development as the next bullet point in my journey.