MULTIPLAYER / INTERACTION DESIGN
ALCOHOLFABET
The board is playful. The rules stay consistent.
01 / THE PROBLEM
A playful surface. A deliberate system underneath.
A shared board game needs one trustworthy sequence of turns, whether both players share a screen or join from separate devices. Questions, answers and actions also need to respect each player’s role.
02 / THE APPROACH
How the system fits together.
React presents a tactile SVG board, pieces and question cards. The browser sends action requests to PostgreSQL functions through Supabase; the server validates the move and returns a view appropriate to the viewer. Private Realtime channels notify connected devices when the session changes.
React + SVG → board and turn presentation
Validated action request → Supabase RPC
PostgreSQL → authoritative game state
Role-aware view → safe answer visibility
Private Realtime channel → refreshed session
03 / ENGINEERING DECISIONS
Keep the answer on the right side of the table
Server views control which role can see an answer or judge a response. The client validates the returned shape and rejects responses that expose an answer to a responding player.
Make a turn survive reconnection
State versions and idempotency keys support consistent actions. The session reducer and private channel recover the authoritative view after interruptions, while the motion system follows explicit game phases.
CURRENT SCOPE
The public application includes in-person play; online roles require private player codes. These capabilities were inspected in source. No production game was created or modified during portfolio verification. The installation is an illustration, not a live game session.