• Mahmoud Aglan's avatar
    feat: Phase 2+3 UI/UX — animations, sounds, interactions, polish · f04a3f66
    Mahmoud Aglan authored
    Phase 2 (P1):
    - Pull-to-refresh on mobile (touch gesture + indicator)
    - Bottom sheet modal system (App.showSheet/hideSheet)
    - Enhanced toasts with icons, progress bar, swipe-to-dismiss
    - Nav sliding active indicator (vertical bar desktop, horizontal mobile)
    - Counter/number animations on profile load
    - Request caching (App.cachedFetch with 30s TTL)
    - Responsive typography scale (clamp-based)
    - Safe area handling for all edges
    - Animated gradient background on Games Hub
    - Elevation/depth system (4 levels)
    - Ludo capture explosion particles
    - Sound feedback system (Web Audio synthesized tones)
    - Win streak fire badge on profile nav
    - Landscape game layout adjustments
    - Gold shimmer sweep on .btn-gold
    
    Phase 3 (P2):
    - 3D dice roll animation (perspective + rotateX/Y)
    - Achievement celebration overlay (confetti + gold title)
    - Gold shimmer effect utility class
    - Clock urgency visual (pulse <30s, shake <10s)
    - Page prefetching for adjacent routes
    - Soft navigation helper (App.navigate with exit animation)
    Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
    f04a3f66
ludo-ui.js 13.5 KB