feat(golf): UX overhaul for casual phone play

[aaylward]

Summary

Modernizes the golf card game UI for casual friends playing on phones. Replaces flat white card rectangles with styled card faces (crosshatch backs, corner pips), simplifies the turn flow from 3 taps to 2 via direct manipulation, and restructures the game-end screen into a two-stage celebration + scores experience.

What Changed

• Card visuals: Face-down cards now have a dark green crosshatch CSS pattern (no more "?"). Face-up cards show corner pips (rank + suit top-left and bottom-right) with a large centered suit symbol, color-coded red/black.
• Floating held card: Drawn card renders as a floating element with a bobbing animation between the piles and player grid, replacing the confusing "highlighted on source pile" pattern.
• Direct-tap swap: Tapping a card while holding a drawn card triggers an immediate swap — no more "select card → click Swap button" flow. Reduces the common action from 3 taps to 2.
• Turn indicator: Contextual banner above the piles ("Your turn — tap a pile to draw", "Tap a card to swap, or discard", "Waiting for X...") replaces the old peek hint.
• Interaction polish: Spring-feel press animation, not-your-turn card grid dimming, subtle green pulse on drawable piles.
• Screen streamlining: Auto-focus room code input, tighter lobby spacing, bigger Start Game button, pulsing "Waiting for players..." text.
• Two-stage game end: Stage 1 is a celebration moment (auto-advances after 3s or tap). Stage 2 shows scores with a prominent "Play Again" button, collapsible room stats via <details>, and subtle text links for secondary actions.
• Mobile polish: Updated card dimensions and grid spacing across all 3 breakpoints (desktop 90×130, tablet 78×112, mobile 64×92).

Testing Done

• TypeScript typecheck (tsc --noEmit) — clean
• ESLint — 0 errors, 0 warnings
• Vite build — successful
• Vitest — 214 tests passing across 19 test files
• Dead CSS audit — removed 5 orphaned classes

Diagram

stateDiagram-v2
    direction LR
    
    state "Before (3 taps)" as before {
        [*] --> TapDrawButton: 1. Tap "Draw Card"
        TapDrawButton --> TapCard: 2. Tap a card
        TapCard --> TapSwapButton: 3. Tap "Swap"
    }
    
    state "After (2 taps)" as after {
        [*] --> TapPile: 1. Tap pile
        TapPile --> TapCardToSwap: 2. Tap card → swaps
    }

Loading

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	muchq	2395cf5	Commit Preview URL Branch Preview URL	Mar 09 2026, 03:52 AM