style

src/lib/components/Battle/BattleEffects.svelte

@@ -16,6 +16,41 @@
   let flickerFrame = 0;
   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
+  
+  // 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
+      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
+      
+      particles.push({
+        id: `${effectIndex}-${i}`,
+        type: effect.type,
+        emoji: effect.emoji,
+        x,
+        y,
+        scale,
+        rotation,
+        duration,
+        delay
+      });
+    }
+    return particles;
+  });
+  
   // Watch for flash changes to trigger flicker animation
   $: if (flash && !isFlickering) {
     startFlickerAnimation();
@@ -62,10 +97,20 @@
     <slot />
   </div>
 
-  <!-- Particle effects -->
-  {#each effects as effect (effect)}
-    <div class="effect-particle {effect.type}" style="animation-duration: {effect.duration}ms">
-      <span class="effect-emoji">{effect.emoji}</span>
+  <!-- Multi-particle effects -->
+  {#each particleList as particle (particle.id)}
+    <div 
+      class="effect-particle {particle.type}" 
+      style="
+        left: {particle.x}px; 
+        top: {particle.y}px;
+        animation-duration: {particle.duration}ms;
+        animation-delay: {particle.delay}ms;
+        --initial-scale: {particle.scale};
+        --initial-rotation: {particle.rotation}deg;
+      "
+    >
+      <span class="effect-emoji">{particle.emoji}</span>
     </div>
   {/each}
 </div>
@@ -87,180 +132,315 @@
     pointer-events: none;
     z-index: 5;
     animation-fill-mode: forwards;
+    transform-origin: center center;
   }
   
   .effect-emoji {
-    font-size: 24px;
+    font-size: 20px;
     display: block;
-    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
+    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
+    transform: scale(var(--initial-scale, 1)) rotate(var(--initial-rotation, 0deg));
+  }
+  
+  /* Status effects - floating with rotation */
+  .effect-particle.burn {
+    animation: statusBurn ease-in-out;
+  }
+  
+  .effect-particle.poison {
+    animation: statusPoison ease-in-out;
+  }
+  
+  .effect-particle.paralyze {
+    animation: statusParalyze linear;
+  }
+  
+  .effect-particle.sleep {
+    animation: statusSleep ease-in-out;
   }
   
-  /* Damage and status effects */
-  .effect-particle.burn,
-  .effect-particle.poison,
-  .effect-particle.paralyze,
-  .effect-particle.sleep,
   .effect-particle.freeze {
-    top: 20%;
-    left: 50%;
-    animation: statusEffect linear;
+    animation: statusFreeze ease-out;
   }
   
-  /* Stat changes */
+  /* Stat increases - rising with spin */
   .effect-particle.attackUp,
   .effect-particle.defenseUp,
   .effect-particle.speedUp,
   .effect-particle.accuracyUp {
-    bottom: 30%;
-    left: 50%;
     animation: statIncrease ease-out;
   }
   
+  /* Stat decreases - falling with wobble */
   .effect-particle.attackDown,
   .effect-particle.defenseDown,
   .effect-particle.speedDown,
   .effect-particle.accuracyDown {
-    top: 30%;
-    left: 50%;
-    animation: statDecrease ease-out;
+    animation: statDecrease ease-in;
   }
   
   /* Special effects */
   .effect-particle.critical,
   .effect-particle.superEffective {
-    top: 10%;
-    left: 50%;
-    animation: criticalEffect ease-out;
+    animation: criticalBurst ease-out;
   }
   
   .effect-particle.notVeryEffective,
   .effect-particle.miss {
-    top: 40%;
-    left: 50%;
-    animation: missEffect ease-out;
+    animation: missSwirl ease-in-out;
   }
   
   .effect-particle.heal {
-    bottom: 20%;
-    left: 50%;
-    animation: healEffect ease-out;
+    animation: healRise ease-out;
+  }
+  
+  /* Complex multi-property animations */
+  @keyframes statusBurn {
+    0% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.3);
+      opacity: 0;
+    }
+    15% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 45deg)) scale(1.2);
+      opacity: 1;
+    }
+    50% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 180deg)) scale(1.0);
+      opacity: 0.9;
+    }
+    85% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 315deg)) scale(0.8);
+      opacity: 0.4;
+    }
+    100% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 360deg)) scale(0.5);
+      opacity: 0;
+    }
   }
   
-  /* Animations */
-  @keyframes statusEffect {
+  @keyframes statusPoison {
     0% {
-      transform: translate(-50%, 0) scale(0.5);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.4);
       opacity: 0;
     }
     20% {
-      transform: translate(-50%, -10px) scale(1.2);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 30deg)) scale(1.1);
       opacity: 1;
     }
     40% {
-      transform: translate(-50%, -5px) scale(1);
-      opacity: 1;
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 30deg)) scale(0.9);
+      opacity: 0.8;
+    }
+    60% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 20deg)) scale(1.0);
+      opacity: 0.6;
+    }
+    80% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 15deg)) scale(0.7);
+      opacity: 0.3;
     }
     100% {
-      transform: translate(-50%, -20px) scale(0.8);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.5);
       opacity: 0;
     }
   }
   
-  @keyframes statIncrease {
+  @keyframes statusParalyze {
     0% {
-      transform: translate(-50%, 0) scale(0.5);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.2);
       opacity: 0;
     }
-    30% {
-      transform: translate(-50%, -30px) scale(1.3);
+    10% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 10deg)) scale(1.3);
       opacity: 1;
     }
-    70% {
-      transform: translate(-50%, -40px) scale(1.1);
+    20% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 10deg)) scale(1.1);
+      opacity: 0.9;
+    }
+    30% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 8deg)) scale(1.2);
+      opacity: 0.8;
+    }
+    40% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 8deg)) scale(1.0);
+      opacity: 0.7;
+    }
+    50% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 5deg)) scale(0.9);
+      opacity: 0.6;
+    }
+    100% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.3);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes statusSleep {
+    0% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.5);
+      opacity: 0;
+    }
+    25% {
+      transform: translate(-50%, -55%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 15deg)) scale(1.1);
       opacity: 1;
     }
+    50% {
+      transform: translate(-50%, -45%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 15deg)) scale(1.0);
+      opacity: 0.9;
+    }
+    75% {
+      transform: translate(-50%, -55%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 10deg)) scale(0.9);
+      opacity: 0.5;
+    }
     100% {
-      transform: translate(-50%, -60px) scale(0.7);
+      transform: translate(-50%, -60%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.4);
       opacity: 0;
     }
   }
   
-  @keyframes statDecrease {
+  @keyframes statusFreeze {
     0% {
-      transform: translate(-50%, 0) scale(0.5);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.3);
       opacity: 0;
     }
     30% {
-      transform: translate(-50%, 20px) scale(1.3);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 5deg)) scale(1.4);
       opacity: 1;
     }
-    70% {
-      transform: translate(-50%, 30px) scale(1.1);
-      opacity: 1;
+    60% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 3deg)) scale(1.2);
+      opacity: 0.8;
+    }
+    90% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 2deg)) scale(0.8);
+      opacity: 0.3;
     }
     100% {
-      transform: translate(-50%, 50px) scale(0.7);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.6);
       opacity: 0;
     }
   }
   
-  @keyframes criticalEffect {
+  @keyframes statIncrease {
     0% {
-      transform: translate(-50%, 0) scale(0.3) rotate(-10deg);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.4);
       opacity: 0;
     }
-    20% {
-      transform: translate(-50%, -20px) scale(1.5) rotate(5deg);
+    25% {
+      transform: translate(-50%, -70%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 90deg)) scale(1.3);
       opacity: 1;
     }
-    40% {
-      transform: translate(-50%, -15px) scale(1.3) rotate(-2deg);
+    50% {
+      transform: translate(-50%, -90%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 180deg)) scale(1.1);
+      opacity: 0.9;
+    }
+    75% {
+      transform: translate(-50%, -110%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 270deg)) scale(0.9);
+      opacity: 0.6;
+    }
+    100% {
+      transform: translate(-50%, -130%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 360deg)) scale(0.5);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes statDecrease {
+    0% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.4);
+      opacity: 0;
+    }
+    25% {
+      transform: translate(-50%, -30%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 30deg)) scale(1.2);
       opacity: 1;
     }
-    60% {
-      transform: translate(-50%, -25px) scale(1.4) rotate(1deg);
+    50% {
+      transform: translate(-50%, -10%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 30deg)) scale(1.0);
+      opacity: 0.8;
+    }
+    75% {
+      transform: translate(-50%, 10%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 20deg)) scale(0.8);
+      opacity: 0.4;
+    }
+    100% {
+      transform: translate(-50%, 30%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 10deg)) scale(0.6);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes criticalBurst {
+    0% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.2);
+      opacity: 0;
+    }
+    15% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 45deg)) scale(1.8);
       opacity: 1;
     }
+    30% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 30deg)) scale(1.4);
+      opacity: 0.9;
+    }
+    50% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 60deg)) scale(1.6);
+      opacity: 0.8;
+    }
+    70% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 45deg)) scale(1.2);
+      opacity: 0.5;
+    }
     100% {
-      transform: translate(-50%, -40px) scale(0.8) rotate(0deg);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 720deg)) scale(0.3);
       opacity: 0;
     }
   }
   
-  @keyframes missEffect {
+  @keyframes missSwirl {
     0% {
-      transform: translate(-50%, 0) scale(1);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.6);
       opacity: 0;
     }
-    20% {
-      transform: translate(-50%, 0) scale(1.2);
+    25% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 90deg)) scale(1.2);
       opacity: 0.7;
     }
-    80% {
-      transform: translate(-50%, 0) scale(1.1);
+    50% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 180deg)) scale(1.0);
+      opacity: 0.5;
+    }
+    75% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 270deg)) scale(0.8);
       opacity: 0.3;
     }
     100% {
-      transform: translate(-50%, 0) scale(1);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 360deg)) scale(0.4);
       opacity: 0;
     }
   }
   
-  @keyframes healEffect {
+  @keyframes healRise {
     0% {
-      transform: translate(-50%, 20px) scale(0.5);
+      transform: translate(-50%, -30%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.5);
       opacity: 0;
     }
-    30% {
-      transform: translate(-50%, -10px) scale(1.2);
+    20% {
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 30deg)) scale(1.3);
       opacity: 1;
     }
-    70% {
-      transform: translate(-50%, -30px) scale(1);
-      opacity: 1;
+    40% {
+      transform: translate(-50%, -70%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 20deg)) scale(1.1);
+      opacity: 0.9;
+    }
+    60% {
+      transform: translate(-50%, -90%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 15deg)) scale(1.0);
+      opacity: 0.7;
+    }
+    80% {
+      transform: translate(-50%, -110%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 10deg)) scale(0.8);
+      opacity: 0.4;
     }
     100% {
-      transform: translate(-50%, -50px) scale(0.6);
+      transform: translate(-50%, -130%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.5);
       opacity: 0;
     }
   }