Building Wits & Wagers Online: A Full-Stack Multiplayer Game
Engineering a real-time party game with sophisticated state management, from concept to playable product in 4 days.
December 29, 2025 · Henry Osterweis
1. The Challenge
My family loves the Wits & Wagers board game but lost ours. Instead of buying a replacement, I built a digital version in 4 days. The original game has players answer numerical trivia questions, then bet on which answer is closest. This creates a unique dynamic: you don't need to know the answer, you need to know who does. Translating this to a digital format meant solving complex problems in real-time synchronization, mobile UX, and game state management.
The original board game
2. Architecture
A Jackbox-style multi-client system: phones as controllers, TV as the shared display. Players join via mobile browser using a room code. The TV displays game progress, animations, and audio. All clients subscribe to real-time database changes, ensuring synchronized state without direct peer-to-peer connections. The architecture handles host privileges, player actions, and spectator views through distinct client roles.
- •Next.js 16 + React 19 for the frontend
- •Supabase (PostgreSQL) for database and real-time subscriptions
- •Deno Edge Functions for server-side game logic
- •Framer Motion for polished animations
- •Tailwind CSS 4 for responsive styling
The architecture diagram
3. Real-Time State Management
PostgreSQL Change Data Capture ensures all clients see the same game state instantly. Every player action writes to the database, triggering real-time broadcasts to subscribed clients. This approach eliminates race conditions and ensures authoritative state. I implemented a 2-second polling fallback for edge cases where WebSocket connections become unreliable, ensuring robust synchronization under all conditions.
4. Game State Machine
Seven distinct phases with automatic transitions and early-advance logic. The game flows through lobby, tutorial, answering, betting, reveal, scoreboard, and finished over 7 rounds. Phase transitions are governed by both timers and player completion status. When all players submit answers early, the game advances immediately rather than waiting for timeout, improving pace without sacrificing reliability.
5. Settlement Logic
110+ lines of PL/pgSQL implementing fair, edge-case-proof payout calculations. The betting system mirrors casino odds: center slots pay 2:1, edges pay 5:1, with special All Too High and Red/Black meta-bets. The settlement function handles ties, determines winning answers closest-without-going-over, awards bonuses to round winners, and implements a Safe Bet refund for players who bet but lose everything. All calculations happen atomically in PostgreSQL to prevent race conditions.
6. Mobile-First UX
Touch-optimized betting board with chip denominations and intuitive placement. The betting interface, the most complex component at 580 lines, implements a roulette-style board where players drag and tap to place $1, $5, $10, and $25 chips. Visual feedback shows odds, current bets, and remaining bankroll. The UX required careful consideration of touch targets, scroll prevention, and responsive scaling across device sizes.
7. Audio & Animation Polish
Custom audio system with background music, voice clips, and smooth transitions. A custom React hook manages audio playback with fade-in/fade-out, volume control, and proper cleanup. Phase transitions feature animated title cards, winner reveals include payout animations, and the final scoreboard triggers confetti. These details transform the technical demo into something that feels like a polished product.
8. Outcome
A fully functional party game that my family now plays instead of the original board game. The project demonstrates full-stack proficiency: PostgreSQL stored procedures, real-time subscriptions, edge functions, responsive React components, animation systems, and mobile UX considerations. Most importantly, it solves a real problem, and it's fun to play.
Want to try it yourself?
Play the game →