stardance has been extended another month! the new deadline is october 31 :)

You are browsing as a guest. Sign up (or log in) to start making projects!

ARENA: Local Multiplayer Tic-Tac-Toe game

  • 1 Devlogs
  • 7 Total hours

A multiplayer tic-tac toe game with biometric face authentication built using Python, HTML, CSS and JavaScript! NOTE: To actually play a game in the demo link, someone else must be logged in and active in the lobby at the same time to start and play a match!

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Shipwright walkthrough

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Shipwright walkthrough

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Shipwright walkthrough

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Shipwright walkthrough

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Shipwright walkthrough

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Shipwright walkthrough

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Shipwright walkthrough

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Shipwright walkthrough

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Shipwright walkthrough

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Shipwright walkthrough

Ship #1 Changes requested

ARENA is a real-time multiplayer game where your face is your login. No passwords, no typing—just split-second biometric verification computed directly on your device’s GPU.

TECHNICAL HIGHLIGHTS:

🔹 Edge ML Biometrics: Uses face-api.js for zero-latency, client-side 128-d facial encoding.

🔹 Real-Time WebSockets: Live asynchronous matchmaking lobby and instant mid-game disconnect handling.

🔹 FIDE-Standard Elo: Mathematically calculates win probabilities and dynamically updates your global ranking.

🔹 Resilient Microservices: Fully containerized stack (FastAPI, Nginx, MySQL, MongoDB) with automated database retry loops.

HOW TO DEMO:

Because ARENA is a full-stack microservice architecture, it is too heavy for a free cloud host. My GitHub repository is the demo! To experience the magic on your own machine:

Clone the repo and add the .env variables.

Run "docker compose up --build -d" in your terminal.

Go to localhost:5500 in your browser and register your face!

(Want to play with friends on your Wi-Fi? The README has instructions on how to use ngrok to securely tunnel the Nginx proxy to their phones!)

  • 1 devlog
  • 7h
See source code →
Open comments for this post

6h 32m 15s logged

What started as a basic software systems course project just got a massive 6-hour architectural overhaul. I wanted to build ARENA, an identity-verified multiplayer Tic-Tac-Toe game where your face is literally your password.Here is the breakdown of the sprint to get to v1.0.0:The Biometric Overhaul (Moving to the Edge)
Originally, the facial recognition was a heavy, monolithic server-side pipeline. It was a dependency nightmare and crushed the server. I completely ripped it out and migrated to Edge ML using face-api.js. Now, the client browser computes 128-d facial encodings directly on the user’s GPU. Server load dropped to near-zero, and the latency is basically gone.The Microservice Migration
I took the original god file and shattered it into a clean microservice architecture. Containerized the whole thing using Docker Compose. It now features a resilient Python backoff/retry loop so the FastAPI backend waits patiently for the databases to initialize before booting.The Local Network “Final Boss”
This was the hardest part of the overhaul. I wanted users to connect via their phones on the same Wi-Fi. But Chrome strictly blocks webcam access on unencrypted HTTP connections unless it is localhost.The Fix: I set up an Nginx reverse proxy to route frontend and API traffic through a single port. Then, I wrote dynamic JavaScript routing and piped the whole thing through an ngrok tunnel. Now, I can spin up the containers, run the tunnel, and send friends a secure HTTPS link to play against me locally! It was a crazy 6 hours of fighting WebSocket race conditions and Nginx regex bugs, but ARENA is finally production-ready (I hope :) ).

0
0
21

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…