Try it out

You can play pocket mages here.

Inspiration

After seeing the Mystery Stack, our team got together and started brainstorming what we could build. The night before the hackathon, we'd been playing Jackbox, and it stuck with us how much fun a game is when everyone's in the same room, on their own phone, trash-talking each other. We wanted to capture that party-game energy.

With Halloween right around the corner, the idea clicked: what if you could be a wizard and duel your friends, using nothing but your phone? And so Pocket Mages was born.

What it does

Pocket Mages is a 2v2 wizard duel where your phone is your wand. There are no attack buttons. You cast spells by physically moving your phone.

Spell Type Gesture
Bolt Attack Thrust the phone forward like a jab
Ward Defend Draw a circle in the air
Empower Buff Lift the phone upward in one smooth sweep
Hex Debuff Shake side to side in a zigzag

Win by knocking out both enemy wizards across a best-of-3 match, and enjoy your bragging rights on the stats screen.

How it works

1. Join with a room code. One player creates a room and gets a short four-letter code. The other three players type in the code on their phones, pick a team, and ready up. No app install and no account needed, just a browser.

2. Hold, cast, release. To cast, you hold a big button on your screen, wave your phone, and let go. While you hold it, the phone records its accelerometer and gyroscope readings. When you release, that short burst of motion data is sent to our server.

3. The server figures out your spell. Our Python FastAPI server cleans up the motion data and looks for each spell's signature. A thrust is one sharp spike of acceleration, a circle is a smooth rotation across two axes, a lift is one steady upward tilt, and a zigzag is rapid back-and-forth turning. Sloppy gestures fizzle, so clean casting pays off.

4. The server runs the duel. The server is the referee. It tracks every wizard's health, mana, cooldowns, and active effects, and it applies spells and decides who wins. Because it's the single source of truth, all four phones always agree on what happened.

5. Real-time everything. Phones talk to the server over WebSockets, so a cast shows up on every screen almost instantly.

6. One command to run it. The whole project runs in Docker. A single docker compose up --build starts the game server and a secure HTTPS tunnel. Phone motion sensors only work on secure pages, so the tunnel gives everyone a link they can open from anywhere.

How we built it

  • Backend: Python, FastAPI, WebSockets, NumPy for motion processing
  • Frontend: a mobile web page using the browser's devicemotion sensor events
  • Infrastructure: Docker and Docker Compose, with a Cloudflare tunnel for HTTPS

Challenges we ran into

  • Making gestures feel reliable. Every person waves a phone differently, so we built debug and recording tools to see our sensor data and tune each spell's thresholds.
  • iPhone vs. Android. The two platforms report motion differently and iOS requires explicit permission, so we had to normalize the data and design a smooth permission flow.
  • Motion sensors need HTTPS. That ruled out simply serving the game over the local network, which is why we added the tunnel.
  • Keeping four players in sync. We needed rooms, reconnects, and a server that stays in charge of the game state.

What we learned

We learned how much goes into turning raw sensor data into something that feels like magic. We also got hands-on with real-time multiplayer design, authoritative game servers, and containerizing a project so it runs the same on every machine.

Built With

Share this project:

Updates

Submission history