• Mahmoud Aglan's avatar
    feat: redesign domino UX — premium hand tiles, smart auto-fit, cohesive screens · 31a8e2dc
    Mahmoud Aglan authored
    Hand tiles (components/hand.js):
    - Proper PIP_POSITIONS matching board tiles (position-based, not flex-wrap)
    - Dynamic sizing: tiles scale to always fit viewport width
    - Fan layout for 5+ tiles (card-like spread with arc lift)
    - Slide-in animation for newly drawn tiles
    - Premium domino look: gradient bg, 3D pips, edge shine, realistic border
    
    Board (canvas/board.js):
    - Smooth animated auto-pan + auto-zoom when chain exceeds viewport
    - Lerp-based transitions (no jarring jumps on new tiles)
    - Vignette overlay for depth
    - Manual pan updates target state for smooth resume
    
    Tile renderer (canvas/tile-renderer.js):
    - Gradient fill (cream to warm), thicker border, top-edge shine
    - 3D pips with specular highlights
    - Better shadow depth and double-tile accent
    
    Drag proxy (components/drag.js):
    - Matches hand tile visual style (position-based pips)
    - Valid/invalid state with colored borders + glow
    - Spring animation on snap/bounce-back
    
    Room screens (scenes/room.js):
    - Unified design language across menu/bot-picker/target-picker/lobby
    - Floating icon animation, consistent card styles
    - Touch-responsive buttons with spring scale
    
    Game layout (scenes/game.js):
    - Polished opponent bar with avatar border glow
    - Score bar with colored indicators
    - Control buttons with active states and pulse animation
    Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
    31a8e2dc
drag.js 7.14 KB