engineering-behind-sht6

Engineering behind The ៦th Stupid Hackathon Thailand

Published on
6 mins read

It's been a month since the SHiT6 event concluded. I just got time to write this article after I did some travel to Singapore, and do home isolation after I tested positive for COVID. Originally, I should publish 2 articles about this event already but I left them abandoned so I decided to merge them into this article.

This will be the story of my contribution to organizing The ៦th Stupid Hackathon Thailand event from preparation, to the finish line.

Pre-hackathon: Ticketing

Before the event could begin, we have to distribute tickets to contestants first. We could just publish all tickets to Eventpop, and let everyone grab them by themselves but what's the fun in that?

So instead of just distributing tickets normally, we also reserve some tickets to be used to create challenges as well. In which, there're multiple challenges made by different people such as.

And Stupid Adventure a text-based adventure game created by me.

The idea came when I'm playing Saints Row IV and came to the part where we play a text-based game to get Kinzie out of the simulation world. This reminded me of the scene in the TV series Mr.Robot as well where Elliot tries to stop a nuclear reactor meltdown by playing a text-based adventure game.

Mr.Robot Season 4 Episode 11: eXit

It let me think that there's not much quite this genre of game left nowadays, and it should be the easiest method to make a game as well.

So I would like to challenge myself to make a text-based adventure game.

And the result is marvelous! I manage to make a game engine to drive a dialog that also provides conditional actions, an inventory system, and adaptive dialog with about 100 lines of code. Everything is type-strict, so the game engine can be reused to make other games in the future as well. Also as an extra challenge, I want to get out of my comfort zone and write the entire front with SolidJS as well.

Stupid Adventure

This project is open-sourced on my GitHub, feel free to dig into the code and try to finish the game by yourself. Let me know how long you finish the game on the first try.

Hackathon: Reward distribution

In the history of entire The Stupid Hackathon Thailand, rewards are not distributed by prizes (1st place, 2nd place). But instead, rewards are being distributed by pure randomization. In this event, we still want to make rewards distribution to be randomized but also have skills involved as well.

This is the challenge that I'm thinking of together with Japan, Wit, P'Thai, and Poom during the hackathon overnight (this means that halfway to the hackathon and we still don't have any system to distribute rewards just yet). We keep thinking hard...until we saw a carpet on the floor.

that carpet on the floor

As a result of brainstorming, we solidify an idea and came up with a throwing game the user will throw an object onto a carpet. Then we will have a reward table 3D overlay onto the carpet, wherever the object stops it will be a reward that the user will get.

After we finalized the idea, I get to work with Japan right away. During development, P'Thai also guides me on the knowledge of matrix3d() which led to creating a never seen technology to calculate 4 coordinates from video feed into a 4x4 homogeneous matrix.

After spending an entire hour failing to create a formula, I decided to just give up on this and hijack jQuery sample code instead. But is it means that I will write jQuery code for the entire project from now on? No way! Remember, jQuery is just an extra JavaScript utility it can be mixed with anything...even React. So as a result, I created a frontend that uses jQuery to manipulate the 3D pane, and React to handle the rest of the rendering (reward table, debugger, etc.), and Japan helped me with creating a backend for distributing rewards and logging.

Stupid Randomizer

Quite impressive, at first P'Thai also thought that I might have over-engineered this stack too much. In my opinion, yes it is too over-engineer using jQuery, and React as frontend already but also using Prisma, and Vercel as backend as well. But it comes in handy when we have edge cases where we have to immediately add more rewards into the pool live on production while the event is playing. So...that's quite something.

And it also lets to this crazy supercut as well

This project is also published on my GitHub repo, feel free to look into my sins.

Conclusion

Even though I as an organizer need to help run the event, I also ended up playing hackathon overnight as well. But it was fun, that's what hackathons are. Creating a solution to a problem during the limited amount of time.