anim

src/lib/components/Battle/BattleEffects.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  export let effects: Array<{type: string, emoji: string, duration: number}> = [];
+  export let flash: boolean = false;
+</script>
+
+<!-- Flash overlay -->
+{#if flash}
+  <div class="flash-overlay" transition:fade={{ duration: 200 }}></div>
+{/if}
+
+<!-- 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>
+  </div>
+{/each}
+
+<style>
+  .flash-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 10;
+    pointer-events: none;
+  }
+  
+  .effect-particle {
+    position: absolute;
+    pointer-events: none;
+    z-index: 5;
+    animation-fill-mode: forwards;
+  }
+  
+  .effect-emoji {
+    font-size: 24px;
+    display: block;
+    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
+  }
+  
+  /* 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;
+  }
+  
+  /* Stat changes */
+  .effect-particle.attackUp,
+  .effect-particle.defenseUp,
+  .effect-particle.speedUp,
+  .effect-particle.accuracyUp {
+    bottom: 30%;
+    left: 50%;
+    animation: statIncrease ease-out;
+  }
+  
+  .effect-particle.attackDown,
+  .effect-particle.defenseDown,
+  .effect-particle.speedDown,
+  .effect-particle.accuracyDown {
+    top: 30%;
+    left: 50%;
+    animation: statDecrease ease-out;
+  }
+  
+  /* Special effects */
+  .effect-particle.critical,
+  .effect-particle.superEffective {
+    top: 10%;
+    left: 50%;
+    animation: criticalEffect ease-out;
+  }
+  
+  .effect-particle.notVeryEffective,
+  .effect-particle.miss {
+    top: 40%;
+    left: 50%;
+    animation: missEffect ease-out;
+  }
+  
+  .effect-particle.heal {
+    bottom: 20%;
+    left: 50%;
+    animation: healEffect ease-out;
+  }
+  
+  /* Animations */
+  @keyframes statusEffect {
+    0% {
+      transform: translate(-50%, 0) scale(0.5);
+      opacity: 0;
+    }
+    20% {
+      transform: translate(-50%, -10px) scale(1.2);
+      opacity: 1;
+    }
+    40% {
+      transform: translate(-50%, -5px) scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: translate(-50%, -20px) scale(0.8);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes statIncrease {
+    0% {
+      transform: translate(-50%, 0) scale(0.5);
+      opacity: 0;
+    }
+    30% {
+      transform: translate(-50%, -30px) scale(1.3);
+      opacity: 1;
+    }
+    70% {
+      transform: translate(-50%, -40px) scale(1.1);
+      opacity: 1;
+    }
+    100% {
+      transform: translate(-50%, -60px) scale(0.7);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes statDecrease {
+    0% {
+      transform: translate(-50%, 0) scale(0.5);
+      opacity: 0;
+    }
+    30% {
+      transform: translate(-50%, 20px) scale(1.3);
+      opacity: 1;
+    }
+    70% {
+      transform: translate(-50%, 30px) scale(1.1);
+      opacity: 1;
+    }
+    100% {
+      transform: translate(-50%, 50px) scale(0.7);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes criticalEffect {
+    0% {
+      transform: translate(-50%, 0) scale(0.3) rotate(-10deg);
+      opacity: 0;
+    }
+    20% {
+      transform: translate(-50%, -20px) scale(1.5) rotate(5deg);
+      opacity: 1;
+    }
+    40% {
+      transform: translate(-50%, -15px) scale(1.3) rotate(-2deg);
+      opacity: 1;
+    }
+    60% {
+      transform: translate(-50%, -25px) scale(1.4) rotate(1deg);
+      opacity: 1;
+    }
+    100% {
+      transform: translate(-50%, -40px) scale(0.8) rotate(0deg);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes missEffect {
+    0% {
+      transform: translate(-50%, 0) scale(1);
+      opacity: 0;
+    }
+    20% {
+      transform: translate(-50%, 0) scale(1.2);
+      opacity: 0.7;
+    }
+    80% {
+      transform: translate(-50%, 0) scale(1.1);
+      opacity: 0.3;
+    }
+    100% {
+      transform: translate(-50%, 0) scale(1);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes healEffect {
+    0% {
+      transform: translate(-50%, 20px) scale(0.5);
+      opacity: 0;
+    }
+    30% {
+      transform: translate(-50%, -10px) scale(1.2);
+      opacity: 1;
+    }
+    70% {
+      transform: translate(-50%, -30px) scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: translate(-50%, -50px) scale(0.6);
+      opacity: 0;
+    }
+  }
+</style>

src/lib/components/Battle/BattleField.svelte

@@ -6,6 +6,7 @@
   import PicletInfo from './PicletInfo.svelte';
   import StatusEffectIndicator from './StatusEffectIndicator.svelte';
   import FieldEffectIndicator from './FieldEffectIndicator.svelte';
+  import BattleEffects from './BattleEffects.svelte';
   
   export let playerPiclet: PicletInstance;
   export let enemyPiclet: PicletInstance;
@@ -13,6 +14,10 @@
   export let enemyHpPercentage: number;
   export let showIntro: boolean = false;
   export let battleState: BattleState | undefined = undefined;
+  export let playerEffects: Array<{type: string, emoji: string, duration: number}> = [];
+  export let enemyEffects: Array<{type: string, emoji: string, duration: number}> = [];
+  export let playerFlash: boolean = false;
+  export let enemyFlash: boolean = false;
   
   // Animation states
   let playerVisible = false;
@@ -96,6 +101,9 @@
                 <StatusEffectIndicator statusEffects={battleState.opponentPiclet.statusEffects.map(effect => ({ type: effect, turnsLeft: 3 }))} />
               </div>
             {/if}
+            
+            <!-- Enemy Battle Effects -->
+            <BattleEffects effects={enemyEffects} flash={enemyFlash} />
           </div>
         {/if}
       </div>
@@ -136,6 +144,9 @@
                 <StatusEffectIndicator statusEffects={battleState.playerPiclet.statusEffects.map(effect => ({ type: effect, turnsLeft: 3 }))} />
               </div>
             {/if}
+            
+            <!-- Player Battle Effects -->
+            <BattleEffects effects={playerEffects} flash={playerFlash} />
           </div>
         {/if}
         

src/lib/components/Battle/PicletInfo.svelte

@@ -7,7 +7,17 @@
   export let isPlayer: boolean;
   
   $: hpColor = hpPercentage > 0.5 ? '#4caf50' : hpPercentage > 0.2 ? '#ffc107' : '#f44336';
-  $: displayHp = Math.ceil(piclet.currentHp * hpPercentage);
+  $: displayHp = Math.ceil(piclet.currentHp);
+  
+  // Track HP changes for animations
+  let previousHp = displayHp;
+  let hpFlash = false;
+  
+  $: if (displayHp !== previousHp) {
+    hpFlash = true;
+    setTimeout(() => hpFlash = false, 300);
+    previousHp = displayHp;
+  }
   
   // Get type emoji (simplified - should map from actual types)
   const typeEmoji = '🔥'; // Default fire type
@@ -33,7 +43,7 @@
     <!-- HP Text (Player only) -->
     {#if isPlayer}
       <div class="hp-text">
-        <span class="hp-values">{displayHp}/{piclet.maxHp} HP</span>
+        <span class="hp-values" class:hp-flash={hpFlash}>{displayHp}/{piclet.maxHp} HP</span>
       </div>
       
       <!-- XP Bar (Player only) -->
@@ -128,6 +138,19 @@
   
   .hp-values {
     font-weight: 600;
+    transition: all 0.2s ease;
+  }
+  
+  .hp-values.hp-flash {
+    color: #ff4444;
+    text-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
+    animation: hpFlash 0.3s ease-in-out;
+  }
+  
+  @keyframes hpFlash {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
   }
   
   /* XP Bar */

src/lib/components/Pages/Battle.svelte

@@ -33,6 +33,12 @@
   let playerHpPercentage = playerPiclet.currentHp / playerPiclet.maxHp;
   let enemyHpPercentage = enemyPiclet.currentHp / enemyPiclet.maxHp;
   
+  // Visual effects state
+  let playerEffects: Array<{type: string, emoji: string, duration: number}> = [];
+  let enemyEffects: Array<{type: string, emoji: string, duration: number}> = [];
+  let playerFlash = false;
+  let enemyFlash = false;
+  
   onMount(() => {
     // Initialize battle engine with converted piclet definitions
     const playerDefinition = picletInstanceToBattleDefinition(playerPiclet);
@@ -120,12 +126,17 @@
       const newLogEntries = logAfter.slice(logBefore.length);
       const result = { log: newLogEntries };
       
-      // Show battle messages with timing
+      // Show battle messages with timing and visual effects
       if (result.log && result.log.length > 0) {
         let messageIndex = 0;
         function showNextBattleMessage() {
           if (messageIndex < result.log.length) {
-            currentMessage = result.log[messageIndex];
+            const message = result.log[messageIndex];
+            currentMessage = message;
+            
+            // Trigger visual effects based on message content
+            triggerVisualEffectsFromMessage(message);
+            
             messageIndex++;
             setTimeout(showNextBattleMessage, 1500);
           } else {
@@ -167,6 +178,105 @@
   }
   
   
+  function triggerVisualEffectsFromMessage(message: string) {
+    const playerName = currentPlayerPiclet.nickname;
+    const enemyName = currentEnemyPiclet.nickname;
+    
+    // Damage effects
+    if (message.includes('took') && message.includes('damage')) {
+      if (message.includes(playerName)) {
+        triggerDamageFlash('player');
+      } else if (message.includes(enemyName)) {
+        triggerDamageFlash('enemy');
+      }
+    }
+    
+    // Critical hit effects
+    if (message.includes('critical hit')) {
+      triggerEffect('both', 'critical', '💥', 1000);
+    }
+    
+    // Effectiveness messages
+    if (message.includes("It's super effective")) {
+      triggerEffect('both', 'superEffective', '⚡', 800);
+    } else if (message.includes("not very effective")) {
+      triggerEffect('both', 'notVeryEffective', '💨', 800);
+    }
+    
+    // Status effects
+    if (message.includes('was burned')) {
+      const target = message.includes(playerName) ? 'player' : 'enemy';
+      triggerEffect(target, 'burn', '🔥', 1200);
+    } else if (message.includes('was poisoned')) {
+      const target = message.includes(playerName) ? 'player' : 'enemy';
+      triggerEffect(target, 'poison', '☠️', 1200);
+    } else if (message.includes('was paralyzed')) {
+      const target = message.includes(playerName) ? 'player' : 'enemy';
+      triggerEffect(target, 'paralyze', '⚡', 1200);
+    } else if (message.includes('fell asleep')) {
+      const target = message.includes(playerName) ? 'player' : 'enemy';
+      triggerEffect(target, 'sleep', '😴', 1200);
+    } else if (message.includes('was frozen')) {
+      const target = message.includes(playerName) ? 'player' : 'enemy';
+      triggerEffect(target, 'freeze', '❄️', 1200);
+    }
+    
+    // Stat changes
+    if (message.includes("'s") && (message.includes('rose') || message.includes('fell'))) {
+      const target = message.includes(playerName) ? 'player' : 'enemy';
+      const isIncrease = message.includes('rose');
+      
+      if (message.includes('attack')) {
+        triggerEffect(target, isIncrease ? 'attackUp' : 'attackDown', isIncrease ? '⚔️' : '🔻', 1000);
+      } else if (message.includes('defense')) {
+        triggerEffect(target, isIncrease ? 'defenseUp' : 'defenseDown', isIncrease ? '🛡️' : '🔻', 1000);
+      } else if (message.includes('speed')) {
+        triggerEffect(target, isIncrease ? 'speedUp' : 'speedDown', isIncrease ? '💨' : '🐌', 1000);
+      } else if (message.includes('accuracy')) {
+        triggerEffect(target, isIncrease ? 'accuracyUp' : 'accuracyDown', isIncrease ? '🎯' : '👁️', 1000);
+      }
+    }
+    
+    // Healing effects
+    if (message.includes('recovered') && message.includes('HP')) {
+      const target = message.includes(playerName) ? 'player' : 'enemy';
+      triggerEffect(target, 'heal', '💚', 1000);
+    }
+    
+    // Miss effects
+    if (message.includes('missed')) {
+      triggerEffect('both', 'miss', '💫', 800);
+    }
+  }
+  
+  function triggerDamageFlash(target: 'player' | 'enemy') {
+    if (target === 'player') {
+      playerFlash = true;
+      setTimeout(() => playerFlash = false, 200);
+    } else {
+      enemyFlash = true;
+      setTimeout(() => enemyFlash = false, 200);
+    }
+  }
+  
+  function triggerEffect(target: 'player' | 'enemy' | 'both', type: string, emoji: string, duration: number) {
+    const effect = { type, emoji, duration };
+    
+    if (target === 'player' || target === 'both') {
+      playerEffects = [...playerEffects, effect];
+      setTimeout(() => {
+        playerEffects = playerEffects.filter(e => e !== effect);
+      }, duration);
+    }
+    
+    if (target === 'enemy' || target === 'both') {
+      enemyEffects = [...enemyEffects, effect];
+      setTimeout(() => {
+        enemyEffects = enemyEffects.filter(e => e !== effect);
+      }, duration);
+    }
+  }
+
   function updateUIFromBattleState() {
     if (!battleState) return;
     
@@ -228,6 +338,10 @@
       {enemyHpPercentage}
       showIntro={battlePhase === 'intro'}
       {battleState}
+      {playerEffects}
+      {enemyEffects}
+      {playerFlash}
+      {enemyFlash}
     />
     
     <BattleControls