InteractiveREALTIME CLIENT
Game Client
Sign-in and game panels used React, while Three.js rendered the dealer and cards. Server events and game phases drove updates to both the UI and the 3D scene.
From server events to state
The client joined rooms and received game and user events through Socket.IO. I mapped events to XState transitions instead of having each screen interpret them independently, and passed changes from the previous game data to child state machines.
When input is allowed
I managed authentication separately from the waiting, betting, dealing and result phases. Each phase enabled the appropriate panels, timers and inputs. React components subscribed to the state they needed to display.
Animation & Rendering
Switching between clips and IK
IK positioned the hands during dealing, while animation clips handled the other movements. I skipped IK updates during clip playback so the two systems would not control the same bones at once.
Rendering repeated cards
Cards shared geometry and material through InstancedMesh. Per-instance UV regions selected the right card from an atlas, allowing different cards to be drawn through one mesh structure.
