Skip to content

InfectLive turns a phone into the controller for a physical humans-versus-zombies game. The mobile browser client scans QR targets, sends captures to a shared server, and shows your team, score, and captured-target count over the camera view.

I built the React and TypeScript client in July 2023. It is a historical game prototype, with public source for the phone interface and its real-time connection. The illustration explains the interaction without presenting a reconstructed screen as a screenshot.

Highlights

  • Camera-based QR capture
  • Shared game state and live scores
  • A mobile browser client for physical play

A camera as a controller

The game puts the physical world in front of the interface. A player opens the browser client, joins a round, and points the phone's camera at a QR target. The screen stays on the camera feed, with a compact strip for team and score. Humans and zombies have different colours, so your current side is visible without leaving the action.

That choice keeps the interaction direct. There is no separate capture form or text code to transcribe. A detected QR value becomes a target identifier, and the client sends it with the player's identifier to the game server. The phone handles scanning and feedback; the shared state comes back from the server.

One round shared between phones

The client uses a live socket connection to receive the round's players, teams, target ownership, and game-over state. A score change can arrive while the camera remains open. The captured-target counter is calculated from the shared target list, making progress part of the same view as the next scan.

A locally stored player identifier lets the client recognise its player after the interface updates. Join and leave actions tell the server who is participating, while a game identifier keeps unrelated round updates out of the active view. At the end of a round, the interface replaces the camera with a result screen and an option to join another game.

Feedback at scanning speed

Camera scanning can detect the same code repeatedly. The prototype applies a short delay between accepted scan callbacks and briefly displays a full-screen SCANNED acknowledgement. Server notifications appear separately, filtered for the current player. Those are different pieces of feedback: the camera recognised something, then the game responded to the action.

I built the mobile client with React, TypeScript, browser camera scanning, and Socket.IO over a July 2023 weekend. Its original public history preserves the practical work of joining, tracking a player, handling scan results, and showing scores. This page documents that client and the physical-game idea it supports; the original source remains available to explore.