Three Quick UX Wins: Seat Swapping, Better Turn Indicators, and High-Roller Chips
Just wrapped up a solid coding session adding three user experience improvements to Cardizzle that I've been meaning to tackle.
Blackjack Seat Changing
First up was letting players change seats in blackjack. This was trickier than it sounds because I had to refactor how seats work under the hood. Previously, players were just rendered in join order, but now I've added proper seatIndex tracking to the player state.
The rules are simple: you can only move during the betting phase before you've placed a bet. Empty seats show clickable "Move Here" buttons, and the server validates everything to prevent shenanigans. I also had to update the dealing order logic to respect seat positions instead of join order, which makes way more sense.
Poker Turn Indicator Overhaul
The turn indicator in poker was way too subtle before. Players were missing their turns because the visual cue was basically invisible. So I went all out:
- Brighter glow with a golden secondary halo
- 3px accent ring around the active player
- Bouncing "Your Turn" badge that's visible to everyone (not just the acting player)
- Stronger pulse animation
Now there's no excuse for timing out on your turn.
High-Denomination Chips
Added three new chip denominations: 250 (pink), 500 (slate), and 1000 (gold). The 1K chip gets a special "1K" label since "1000" would be cramped. I also added filtering so high-value chips only appear on tables where the max bet actually makes sense.
The Technical Bits
All the changes required touching both the shared types and the server/client implementations. The seat changing feature needed new socket events and state management. The turn indicator was mostly CSS improvements in the PlayerSeat component. The chips required updates to the denomination arrays and filtering logic.
Everything builds clean and is pushed to the feature branch. Next up I want to test the seat changing with multiple players and maybe add seat selection when you first join a table instead of auto-assigning.
Feels good to knock out three concrete UX improvements in one session. Sometimes the best progress comes from fixing the little things that have been bugging you.