effect

src/lib/components/Battle/BattleEffects.svelte

@@ -17,24 +17,28 @@
   let flickerInterval: number;
   
   // Particle system configuration
-  const PARTICLES_PER_EFFECT = 5; // Number of emoji particles per effect
-  const SPAWN_RADIUS = 60; // Radius around piclet where particles spawn
+  const PARTICLES_PER_EFFECT = 6; // Number of emoji particles per effect
+  const SPAWN_RADIUS = 80; // Increased radius around piclet where particles spawn
   
   // Generate multiple particles for each effect
   $: particleList = effects.flatMap((effect, effectIndex) => {
     const particles = [];
     for (let i = 0; i < PARTICLES_PER_EFFECT; i++) {
-      // Random spawn position around the piclet
-      const angle = (Math.PI * 2 * i) / PARTICLES_PER_EFFECT + (Math.random() - 0.5) * 0.5;
-      const distance = SPAWN_RADIUS * (0.7 + Math.random() * 0.6); // Vary distance
+      // More varied spawn positions for better coverage
+      const angle = (Math.PI * 2 * i) / PARTICLES_PER_EFFECT + (Math.random() - 0.5) * 1.2;
+      const distance = SPAWN_RADIUS * (0.5 + Math.random() * 0.8); // Wider distance variation
       const x = Math.cos(angle) * distance;
       const y = Math.sin(angle) * distance;
       
-      // Random animation properties
-      const scale = 0.8 + Math.random() * 0.4; // 0.8x to 1.2x size
-      const rotation = Math.random() * 360; // Random initial rotation
-      const duration = effect.duration + (Math.random() - 0.5) * 200; // Vary duration slightly
-      const delay = Math.random() * 100; // Stagger animation starts
+      // Enhanced animation properties for more dynamic effects
+      const scale = 0.6 + Math.random() * 0.6; // 0.6x to 1.2x initial size
+      const rotation = Math.random() * 180; // Reduced initial rotation range
+      const duration = Math.max(effect.duration * 1.8, 1800) + (Math.random() - 0.5) * 400; // Longer base duration
+      const delay = Math.random() * 200; // More staggered animation starts
+      
+      // Additional movement properties for more dynamic motion
+      const moveDistance = 40 + Math.random() * 60; // How far the particle travels
+      const moveAngle = angle + (Math.random() - 0.5) * Math.PI * 0.8; // Movement direction
       
       particles.push({
         id: `${effectIndex}-${i}`,
@@ -45,7 +49,9 @@
         scale,
         rotation,
         duration,
-        delay
+        delay,
+        moveDistance,
+        moveAngle
       });
     }
     return particles;
@@ -108,6 +114,8 @@
         animation-delay: {particle.delay}ms;
         --initial-scale: {particle.scale};
         --initial-rotation: {particle.rotation}deg;
+        --move-x: {Math.cos(particle.moveAngle) * particle.moveDistance}px;
+        --move-y: {Math.sin(particle.moveAngle) * particle.moveDistance}px;
       "
     >
       <span class="effect-emoji">{particle.emoji}</span>
@@ -130,15 +138,15 @@
   .effect-particle {
     position: absolute;
     pointer-events: none;
-    z-index: 5;
+    z-index: 10;
     animation-fill-mode: forwards;
     transform-origin: center center;
   }
   
   .effect-emoji {
-    font-size: 20px;
+    font-size: 24px;
     display: block;
-    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
+    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
     transform: scale(var(--initial-scale, 1)) rotate(var(--initial-rotation, 0deg));
   }
   
@@ -197,23 +205,27 @@
   /* Complex multi-property animations */
   @keyframes statusBurn {
     0% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.3);
+      transform: translate(-50%, -50%) scale(0.2);
       opacity: 0;
     }
-    15% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 45deg)) scale(1.2);
+    10% {
+      transform: translate(-50%, -50%) scale(1.8);
       opacity: 1;
     }
+    25% {
+      transform: translate(calc(-50% + var(--move-x) * 0.3), calc(-50% + var(--move-y) * 0.3)) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 20deg));
+      opacity: 0.95;
+    }
     50% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 180deg)) scale(1.0);
-      opacity: 0.9;
+      transform: translate(calc(-50% + var(--move-x) * 0.6), calc(-50% + var(--move-y) * 0.6)) scale(calc(var(--initial-scale) * 1.3)) rotate(calc(var(--initial-rotation) + 45deg));
+      opacity: 0.8;
     }
-    85% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 315deg)) scale(0.8);
-      opacity: 0.4;
+    75% {
+      transform: translate(calc(-50% + var(--move-x) * 0.9), calc(-50% + var(--move-y) * 0.9)) scale(calc(var(--initial-scale) * 0.7)) rotate(calc(var(--initial-rotation) + 60deg));
+      opacity: 0.5;
     }
     100% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 360deg)) scale(0.5);
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(0.3) rotate(calc(var(--initial-rotation) + 80deg));
       opacity: 0;
     }
   }
@@ -324,23 +336,27 @@
   
   @keyframes statIncrease {
     0% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.4);
+      transform: translate(-50%, -50%) scale(0.3);
       opacity: 0;
     }
-    25% {
-      transform: translate(-50%, -70%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 90deg)) scale(1.3);
+    15% {
+      transform: translate(-50%, -50%) scale(1.6);
       opacity: 1;
     }
-    50% {
-      transform: translate(-50%, -90%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 180deg)) scale(1.1);
-      opacity: 0.9;
+    30% {
+      transform: translate(calc(-50% + var(--move-x) * 0.2), calc(-50% + var(--move-y) * 0.2 - 20px)) scale(calc(var(--initial-scale) * 1.2)) rotate(calc(var(--initial-rotation) + 15deg));
+      opacity: 0.95;
     }
-    75% {
-      transform: translate(-50%, -110%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 270deg)) scale(0.9);
-      opacity: 0.6;
+    60% {
+      transform: translate(calc(-50% + var(--move-x) * 0.7), calc(-50% + var(--move-y) * 0.7 - 60px)) scale(calc(var(--initial-scale) * 1.0)) rotate(calc(var(--initial-rotation) + 25deg));
+      opacity: 0.7;
+    }
+    85% {
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 90px)) scale(calc(var(--initial-scale) * 0.6)) rotate(calc(var(--initial-rotation) + 35deg));
+      opacity: 0.3;
     }
     100% {
-      transform: translate(-50%, -130%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 360deg)) scale(0.5);
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 120px)) scale(0.2) rotate(calc(var(--initial-rotation) + 45deg));
       opacity: 0;
     }
   }
@@ -370,27 +386,27 @@
   
   @keyframes criticalBurst {
     0% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.2);
+      transform: translate(-50%, -50%) scale(0.1);
       opacity: 0;
     }
-    15% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 45deg)) scale(1.8);
+    8% {
+      transform: translate(-50%, -50%) scale(2.2);
       opacity: 1;
     }
-    30% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 30deg)) scale(1.4);
-      opacity: 0.9;
+    20% {
+      transform: translate(calc(-50% + var(--move-x) * 0.1), calc(-50% + var(--move-y) * 0.1)) scale(calc(var(--initial-scale) * 1.8)) rotate(calc(var(--initial-rotation) + 30deg));
+      opacity: 0.95;
     }
-    50% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 60deg)) scale(1.6);
+    40% {
+      transform: translate(calc(-50% + var(--move-x) * 0.4), calc(-50% + var(--move-y) * 0.4)) scale(calc(var(--initial-scale) * 1.5)) rotate(calc(var(--initial-rotation) + 60deg));
       opacity: 0.8;
     }
     70% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 45deg)) scale(1.2);
-      opacity: 0.5;
+      transform: translate(calc(-50% + var(--move-x) * 0.8), calc(-50% + var(--move-y) * 0.8)) scale(calc(var(--initial-scale) * 1.1)) rotate(calc(var(--initial-rotation) + 90deg));
+      opacity: 0.4;
     }
     100% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 720deg)) scale(0.3);
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(0.2) rotate(calc(var(--initial-rotation) + 120deg));
       opacity: 0;
     }
   }
@@ -420,27 +436,27 @@
   
   @keyframes healRise {
     0% {
-      transform: translate(-50%, -30%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.5);
+      transform: translate(-50%, -30%) scale(0.4);
       opacity: 0;
     }
-    20% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 30deg)) scale(1.3);
+    12% {
+      transform: translate(-50%, -35%) scale(1.5);
       opacity: 1;
     }
-    40% {
-      transform: translate(-50%, -70%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 20deg)) scale(1.1);
-      opacity: 0.9;
+    25% {
+      transform: translate(calc(-50% + var(--move-x) * 0.2), calc(-50% + var(--move-y) * 0.2 - 40px)) scale(calc(var(--initial-scale) * 1.3)) rotate(calc(var(--initial-rotation) + 20deg));
+      opacity: 0.95;
     }
-    60% {
-      transform: translate(-50%, -90%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 15deg)) scale(1.0);
-      opacity: 0.7;
+    50% {
+      transform: translate(calc(-50% + var(--move-x) * 0.5), calc(-50% + var(--move-y) * 0.5 - 70px)) scale(calc(var(--initial-scale) * 1.1)) rotate(calc(var(--initial-rotation) + 30deg));
+      opacity: 0.8;
     }
-    80% {
-      transform: translate(-50%, -110%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 10deg)) scale(0.8);
-      opacity: 0.4;
+    75% {
+      transform: translate(calc(-50% + var(--move-x) * 0.8), calc(-50% + var(--move-y) * 0.8 - 100px)) scale(calc(var(--initial-scale) * 0.8)) rotate(calc(var(--initial-rotation) + 40deg));
+      opacity: 0.5;
     }
     100% {
-      transform: translate(-50%, -130%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.5);
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 130px)) scale(0.3) rotate(calc(var(--initial-rotation) + 50deg));
       opacity: 0;
     }
   }