InteractiveREALTIME CLIENT
Game Client
Anmeldung und Spielpanels wurden mit React umgesetzt, Dealer und Karten mit Three.js. Serverereignisse und Spielphasen steuerten die Aktualisierung der Oberfläche und der 3D-Szene.
Von Serverereignissen zu Zuständen
Der Client trat über Socket.IO Räumen bei und empfing Spiel- und Benutzerereignisse. Ich habe diese auf XState-Zustandsübergänge abgebildet, damit nicht jeder Bildschirm sie separat interpretieren musste. Änderungen gegenüber dem vorherigen Spielzustand wurden an untergeordnete Zustandsmaschinen weitergegeben.
Wann Eingaben möglich sind
Ich habe den Anmeldestatus getrennt von den Phasen Warten, Setzen, Austeilen und Ergebnis verwaltet. Je nach Phase wurden passende Panels, Timer und Eingaben aktiviert. React-Komponenten abonnierten die Zustände, die sie für ihre Anzeige benötigten.
Animation & Rendering
Wechsel zwischen Clips und IK
Beim Austeilen wurden die Hände per IK positioniert, die übrigen Bewegungen liefen über Animationsclips. Während der Clip-Wiedergabe habe ich IK-Updates ausgesetzt, damit beide Verfahren nicht dieselben Bones gleichzeitig steuern.
Wiederkehrende Karten rendern
Die Karten teilten sich über InstancedMesh Geometrie und Material. Instanzspezifische UV-Bereiche wählten die jeweilige Karte aus einem Atlas. So konnten unterschiedliche Karten mit einer gemeinsamen Mesh-Struktur dargestellt werden.
