SKILLISSUE.EXE

We spent 50 years teaching humans how to tolerate broken machines. SkillIssue.exe asks what happens when the machine can no longer tolerate broken humans.

This is an initial team, and this is our first-ever hackathon. We began with a clean slate Vite + React environment.

We have leveraged open-source projects (Matter.js for 2D physics calculations, lucide-react icons, and Tailwind CSS) and memes that programmers commonly use to add humor. The styling of the user interface, the synchronization loop between the DOM and the physics calculations, the auto negotiation game of Bengaluru, and the procedural audio engine (using native Web Audio API oscillators only without any additional audio file) were all built from scratch by us.

The greatest obstacle that we had faced during development was getting the 2D physics simulation from Matter.js to work with React’s DOM. It caused massive amounts of layout thrashing when updating at 60FPS using React’s state in case when UI elements collapse and bounce. We managed to solve this problem by splitting the elements into fixed layers and rendering their CSS transform in a requestAnimationFrame loop, while at the same time placing some invisible placeholders so that the main code editor wouldn’t move. The opposite problem was not easy to conquer as well!