Claude/game animations clean as0 lc

ANIMATION_IDEAS.md

@@ -0,0 +1,286 @@
+# Royal Family - Animation Ideas Brainstorm
+
+This document contains animation ideas organized by complexity, from simple quick-win animations to larger entertainment-focused effects.
+
+## ✅ Already Implemented (Tier 1 - Highest Priority)
+
+These animations are now live in the game:
+
+### Card Movement
+- **Card Flip/Reveal** - Cards flip when drawn from deck (styles.css:1459)
+- **Card Slide from Deck** - Smooth slide animation from deck to hand (styles.css:1476)
+- **Card Slide from Field** - Slide from field pile to hand (styles.css:1492)
+- **Enhanced Card Hover** - Better lift effect on interactive cards (styles.css:1666)
+
+### Combat Feedback
+- **Castle Damage Shake** - Castle shakes when taking damage (styles.css:1526)
+- **Damage Flash** - Red flash overlay on damaged castles (styles.css:1544)
+- **Raid Impact** - Explosion-style effect on raided castles (styles.css:1560)
+- **Fortification Battle** - Clash animation when attacking fortifications (styles.css:1588)
+
+### Phase Transitions
+- **Phase Banners** - Dynamic banners announcing phase changes (styles.css:1601)
+  - Draw Phase: 🎴
+  - Action Phase: ⚔️
+  - Round Start: 🎯
+  - Raid Success: 💥
+  - Assassin Attack: 🗡️
+
+### Special Effects
+- **Royal Entrance** - Flourish animation when bringing royals to power (styles.css:1727)
+- **Alliance Activation** - Beam effect when alliance castle activates (styles.css:1774)
+- **Castle Destruction** - Crumbling effect for destroyed castles (styles.css:1747)
+- **Number Pop** - Stats pop when changing (styles.css:1694)
+
+---
+
+## 🎯 Small & Simple Animations (Quick Wins)
+
+### Card Interactions
+5. **Card Glow Border** - Color-coded glow (red/black) when selected
+6. **Card Shake** - Gentle shake for invalid moves/locked cards (partially implemented)
+
+### Game Actions
+7. **Persuasion Bar Fill** - Animated fill when adding persuasion points
+8. **Threat Counter** - Red flash/pulse when threat points added
+9. **Fortification Build** - Stack animation when soldiers added to fortification
+10. **Squaring Up** - Quick crossfade/cancel animation when points cancel out
+
+### UI Feedback
+11. **Button Press** - Scale down slightly on click (tactile feel)
+12. **Message Banner** - Slide in from top for game messages, fade out
+13. **Turn End Swoosh** - Quick transition effect between turns
+14. **Hand Reorganize** - Cards smoothly reposition when hand changes
+15. **Deck Shuffle** - Brief shuffle animation when deck is created
+
+---
+
+## 🎭 Medium Complexity Animations
+
+### Combat & Conflict
+16. **Battle Clash** - Cards collide in center when attacking fortifications
+17. **Assassination Strike** - Dagger slash across card, then fade out
+18. **Kidnap/Rescue** - Card swoops from one side to another
+19. **Joker Reveal** - Dramatic spin/reveal determining the Age
+
+### Card Movement
+20. **Deal Animation** - Cards fly out from deck to field positions during flop
+21. **Discard Arc** - Cards arc gracefully to field piles
+22. **Hand Fan** - Cards spread out in a fan when added to hand
+23. **Card Return** - Smooth return animation for cancelled actions
+
+### Strategic Actions
+24. **Persuasion Success** - Sparkles/shimmer when persuasion threshold reached
+25. **Fortification Breach** - Crack/shatter effect when fortification destroyed
+26. **Point Counter Tick-Up** - Animated number increment for persuasion/threat
+27. **Chain Reactions** - Visual cascade when squaring up multiple times
+
+---
+
+## 🎪 Large & Entertaining Animations
+
+### Epic Game Moments
+28. **Enhanced Victory Celebration** - Confetti, castle sparkles, royal family cheers
+29. **Dramatic Defeat** - Castle crumbles, screen darkens, sorrowful music cue
+30. **Age Announcement** - Full-screen dramatic reveal: "Age of Oppression" with medieval banner unfurl
+31. **Round Start Fanfare** - Medieval trumpets, cards dramatically dealt
+32. **Critical Hit** - Slow-motion raid impact with particle effects
+33. **Final Blow** - Slow-motion + zoom + impact for game-winning raid
+
+### Character Personality
+34. **Enhanced AI Mood Changes** - Animated emoji transitions with personality effects
+   - Aggressive: Fire/rage effects
+   - Defensive: Shield glow
+   - Chaotic: Random swirls/sparkles
+   - Balanced: Calm aura
+35. **Royal Portraits** - Animated portraits for Kings, Queens, Jacks (winking, nodding)
+36. **Assassin Stealth** - Shadow figure creeps across screen during assassination
+37. **Castle Expressions** - Castles react to damage (worried), fortification (confident)
+
+### Environmental Effects
+38. **Weather System** - Light snow, rain, or sunshine based on game state
+39. **Day/Night Cycle** - Background gradually shifts based on round number
+40. **Battlefield Smoke** - Particles during intense combat sequences
+41. **Magic Sparkles** - Trail effects following cards as they move
+42. **Background Banners** - Animated flags waving for each family color
+
+### Combo & Special Moves
+43. **Multi-Raid Combo** - Lightning effects connecting multiple successful raids
+44. **Perfect Turn** - Golden glow effect for optimal strategic plays
+45. **Comeback Moment** - Dramatic lighting change when losing player makes strong play
+46. **Royal Family Complete** - Special effect when all K, Q, J in one castle
+47. **Field Glow** - Pulsing highlights showing which field pile has best cards
+
+### Interactive Flourishes
+48. **Card Trails** - Motion trails with family colors during movement
+49. **Power Meter** - Charging animation showing attack/defense strength
+50. **Split-Screen Tension** - Show both players' castles side-by-side during crucial moments
+
+### Cinematic Touches
+51. **Camera Shake** - Screen shake on big impacts
+52. **Zoom & Focus** - Camera zooms to important action areas
+53. **Slow-Motion Highlights** - Critical moments play at 0.5x speed
+54. **Replay System** - Animate the last action quickly if requested
+
+### Sound-Synchronized (Visual Cues)
+55. **Card Sounds Visual** - Ripple effect when card dealt/played
+56. **Medieval Bells** - Visual bell swing for round start
+57. **Sword Clash** - Crossed swords appear during battles
+58. **Crown Shine** - Royals have crown that glints periodically
+59. **Castle Bells** - Ringing animation when castle takes damage
+
+---
+
+## 📊 Implementation Priority Tiers
+
+### Priority Tier 2 (Polish & Personality)
+Best next steps after Tier 1:
+- Persuasion bar animated fill (#7)
+- Deal animation for flop (#20)
+- Discard arc animation (#21)
+- Enhanced AI mood animations (#34)
+- Assassination strike effect (#17)
+- Joker reveal drama (#19)
+
+**Estimated effort:** 4-6 hours
+**Impact:** High polish, makes game feel more premium
+
+### Priority Tier 3 (Entertainment Value)
+For maximum fun factor:
+- Environmental effects (#38-42)
+- Combo celebrations (#43-47)
+- Cinematic touches (#51-54)
+- Royal portraits (#35)
+
+**Estimated effort:** 8-12 hours
+**Impact:** Transforms game into entertainment experience
+
+---
+
+## 🛠 Technical Implementation Notes
+
+### CSS Animations (Current Approach)
+- Simple, performant, works on all browsers
+- Easy to maintain and debug
+- Good for transforms, opacity, scale
+- Limited for complex sequences
+
+### Web Animations API (For Complex Effects)
+```javascript
+element.animate([
+  { transform: 'translateX(0px)' },
+  { transform: 'translateX(100px)' }
+], {
+  duration: 500,
+  easing: 'ease-out'
+});
+```
+
+### Canvas for Particle Effects
+For effects like:
+- Confetti
+- Sparkles
+- Smoke
+- Magic trails
+
+### SVG Animations
+For:
+- Shield effects
+- Beam effects
+- Complex paths
+
+### Performance Considerations
+- Keep animations under 500ms for responsiveness
+- Use `transform` and `opacity` for GPU acceleration
+- Avoid animating `width`, `height`, `top`, `left`
+- Consider `will-change` for frequently animated elements
+- Test on mobile devices
+
+---
+
+## 🎨 Animation Timing Guidelines
+
+| Action Type | Duration | Easing |
+|-------------|----------|--------|
+| Card draw | 400-600ms | ease-out |
+| Card discard | 300-400ms | ease-in |
+| Damage shake | 500-800ms | ease |
+| Phase transition | 300-500ms | ease-in-out |
+| Royal entrance | 600-800ms | ease-out |
+| Castle destruction | 1000ms | ease-out |
+| UI feedback | 200-300ms | ease |
+| Celebration | 1500-2000ms | ease-in-out |
+
+---
+
+## 💡 Future Ideas
+
+### Accessibility Options
+- Toggle to reduce motion
+- Speed controls (0.5x, 1x, 2x)
+- Option to disable non-essential animations
+- High contrast mode
+
+### Advanced Features
+- Custom animation themes (medieval, modern, minimal)
+- Player-selectable victory animations
+- Seasonal themes (Halloween, Christmas)
+- Unlockable animation effects
+
+### Educational Animations
+- Tutorial mode with highlighted actions
+- Strategy hints with visual indicators
+- Move preview animations
+- Undo/redo with animation replay
+
+---
+
+## 📝 Notes for Implementation
+
+1. **Start Small**: Implement one animation category at a time
+2. **Test Thoroughly**: Check animations on different screen sizes
+3. **Get Feedback**: Players might find some animations distracting
+4. **Performance First**: Don't sacrifice game responsiveness for flashy effects
+5. **Consistency**: Keep animation style consistent across the game
+6. **Accessibility**: Always provide option to reduce or disable animations
+
+---
+
+## 🚀 Quick Start for Next Animations
+
+To add a new animation:
+
+1. **Define CSS keyframe** in styles.css:
+```css
+@keyframes myAnimation {
+  0% { /* start state */ }
+  100% { /* end state */ }
+}
+```
+
+2. **Create CSS class**:
+```css
+.my-animation {
+  animation: myAnimation 0.5s ease;
+}
+```
+
+3. **Add trigger in ui.js**:
+```javascript
+animateMyAction(element) {
+  element.classList.add('my-animation');
+  setTimeout(() => {
+    element.classList.remove('my-animation');
+  }, 500);
+}
+```
+
+4. **Call from action handler**:
+```javascript
+this.animateMyAction(targetElement);
+```
+
+---
+
+Last Updated: 2026-01-12
+Version: 1.0

game.js

@@ -1147,6 +1147,7 @@ class AIPlayer {
     this.game = game;
     this.playerNumber = playerNumber;
     this.thinkingDelay = 800;
+    this.ui = null; // Will be set by UI if animations are needed
 
     // Mood system
     this.mood = this.randomMood();
@@ -1461,9 +1462,17 @@ class AIPlayer {
     const chosen = this.pickFromSimilarOptions(decentOptions);
 
     if (chosen.type === 'deck') {
-      this.game.drawFromDeck();
+      if (this.ui) {
+        await this.ui.aiDrawFromDeck();
+      } else {
+        this.game.drawFromDeck();
+      }
     } else {
-      this.game.drawFromField(chosen.index);
+      if (this.ui) {
+        await this.ui.aiDrawFromField(chosen.index);
+      } else {
+        this.game.drawFromField(chosen.index);
+      }
     }
   }
 
@@ -1961,7 +1970,24 @@ class AIPlayer {
     }
   }
 
-  executeAction(action) {
+  async executeAction(action) {
+    // Use UI animation wrappers if available
+    if (this.ui) {
+      // For assassinate, we need to set up the target
+      if (action.type === 'assassinate' && action.targets && action.targets.length > 0) {
+        const target = action.targets.reduce((best, t) =>
+          ROYAL_HIERARCHY[t.royal.value] > ROYAL_HIERARCHY[best.royal.value] ? t : best
+        );
+        await this.ui.aiExecuteAction('assassinate', target);
+        return;
+      }
+
+      // For other actions, pass them through
+      await this.ui.aiExecuteAction(action.type, action.castle, action.attackingCastle);
+      return;
+    }
+
+    // Fallback: no UI animations
     switch (action.type) {
       case 'field':
         // Will trigger field-select phase
@@ -1970,7 +1996,7 @@ class AIPlayer {
       case 'assassinate':
         // Pick the highest value royal to kill
         if (action.targets && action.targets.length > 0) {
-          const target = action.targets.reduce((best, t) => 
+          const target = action.targets.reduce((best, t) =>
             ROYAL_HIERARCHY[t.royal.value] > ROYAL_HIERARCHY[best.royal.value] ? t : best
           );
           this.game.executeAction('assassinate', target);
@@ -2038,7 +2064,11 @@ class AIPlayer {
       // Cover assassin if: we're fielding our own royal OR there's a royal we want on field
       if (isOurUsableRoyal || hasDesirableRoyalOnField) {
         this.game.phase = 'action';
-        this.game.executeAction('field', assassinPileIndex);
+        if (this.ui) {
+          await this.ui.aiExecuteAction('field', assassinPileIndex);
+        } else {
+          this.game.executeAction('field', assassinPileIndex);
+        }
         return;
       }
     }
@@ -2069,9 +2099,13 @@ class AIPlayer {
     pileOptions.sort((a, b) => b.coverValue - a.coverValue);
 
     const targetPile = pileOptions[0].index;
-    
+
     this.game.phase = 'action';
-    this.game.executeAction('field', targetPile);
+    if (this.ui) {
+      await this.ui.aiExecuteAction('field', targetPile);
+    } else {
+      this.game.executeAction('field', targetPile);
+    }
   }
 
   // Decide raid choice (damage is already applied when raid starts)