• Mahmoud Aglan's avatar
    fix: 40 UI/UX improvements — spacing, sounds, feedback, visual polish · 6ec2d6af
    Mahmoud Aglan authored
    Spacing & Layout Fixes:
    - Fixed bottom nav overlapping content (added 24px extra padding)
    - Fixed profile stat grid overflow (4-column grid, 2-col on small mobile)
    - Fixed ludo mobile panel cramped (more padding + margin-bottom)
    - Fixed ludo board wrapper spacing on mobile
    
    Sounds (Ludo):
    - Dice roll sound + haptic vibration on every roll
    - Move sound on piece placement
    - Capture sound + stronger vibration on kills
    - Six rolled special sound
    - Home reached celebration sound
    - Win/lose game end sounds
    - Celebration overlay on human win
    
    Sounds (Chess):
    - Added celebration overlay on chess win
    
    Haptic Feedback:
    - Button ripple tap vibration (5ms)
    - Dice roll vibration (15ms)
    - Capture vibration (30ms)
    - App.vibrate() helper
    
    Visual Improvements:
    - Better avatar placeholder (gradient background)
    - Better empty state (flex column, centered, larger padding)
    - Better input focus glow (3px cyan ring)
    - Better button active states (darker variants)
    - Animated gradient text utility (.text-gradient)
    - Progress bar component
    - Notification dot component
    - Divider with text component
    - Pill selection group component
    - Section divider utility
    - Game result animation (scale-in)
    - Action pulse animation utility
    - Focus-visible outlines for a11y
    - Better list item tap feedback
    - Better card-body padding on mobile (14px)
    - Games Hub subtitle text
    - Proper game-specific icons (domino, backgammon, cards)
    - Stat grid 4-column variant with mobile responsive fallback
    - Gold button shimmer animation
    Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
    6ec2d6af
ludo-game.js 9.41 KB