An escape game on the TV, played with phones: keeping 5 screens in sync

In October, an online escape game called Nocturne au musée became available, allowing players to engage with each other via their phones while watching a shared video on a TV screen. Each player received unique documents that others did not have, and communication between players was crucial for progressing through the game. The game was designed in French, but its architecture was universal.

To ensure all players were on the same page, up to five screens needed to display the same game simultaneously. The setup was simple, requiring no installation and a game code for players to join. The game ran entirely in the browser on both the TV and phones, with no accounts required for players.

The game architecture utilized Next.js for the site and API routes, Supabase for the database and real-time updates, Stripe for payments, Cloudflare R2 for video storage, and Three.js for the 3D rooms. The game's core was a server referee that managed the game state, ensuring that no single screen could manipulate the game directly.

When a player entered an action, such as typing a code or turning a dial, the action was sent to an API route. The server then processed the action by reading the full game state, applying the action, and saving the new state with a version number. This process prevented any cheating by comparing versions to ensure only valid actions were accepted.

The game maintained two states: public and private. The server did not broadcast the full state to players. Instead, it derived a public state that included the current room, solved puzzles, the timer, and documents pinned on the investigation board. Private information, such as a player's documents, hints, and assigned tasks, was handled separately, requiring the player's identity to access their information.

This ensured that even if a player's network traffic was monitored, they would only see the information pertinent to their role in the game.

To synchronize video playback across multiple screens, the game used a Playback object that described the video's source, start time, offset, pause state, and playback rate. Each screen calculated where it should be based on the server time, allowing it to catch up if it fell behind or resume playing at the correct point if it was paused.

The timer for the game was also computed by each screen from the server state, accounting for pauses, story sequences, and hint penalties. This approach ensured that every screen displayed the game accurately and fairly for all players.