Devlog 2.01 - Building the Web Version of Gesture Arcade

What I worked on today

Rebuilt the entire Gesture Arcade frontend from Python and Pygame to a fully web-based version using HTML, CSS, and JavaScript! This was a big decision and here’s why I made it…

Why I switched from Python -> Web

• The Python version runs almost perfectly as a desktop app (that’s a lie, I’ve been struggling a bit with one of the games) but cannot be played in a browser!
• Gesture control requires webcam access which Python/Pygame cannot expose over the internet.
• A browser version means -> anyone with a webcam can play instantly!
• An ‘.exe’ limits who can actually try it.
• This also counts as an extended Python version.

So, consider this an improvement on the last version. Here on, I’m going to refine the UI/UX, basic gameplay, better my logs, and finish this in a better error-less manner. Ignore all logs till now, it’s only about to get better!

What I built today

• Retro monospace homepage in HTML/CSS. (Screenshot attached)
• Integrated MediaPipe Hand Landmarker via JavaScript for real-time hand tracking.

Challenges I ran into

• MediaPipe CDN kept returning 404 errors (went through about 4 different CDN links before finding one that worked)
• ‘type=“module”’ was required for the import to work correctly.

What’s Next

• Build Hand Pong in JavaScript using HTML5 Canvas(??)
• Connect hand tracking to paddle movement.
• Add all 4 games one by one.
• Host on GitHub Pages for a live URL.

Tech Stack

• HTML + CSS + JavaScript
• MediaPipe Tasks Vsion 0.10.3.
• Skypack CDN for module imports.