faint

src/lib/components/Battle/BattleEffects.svelte

@@ -4,11 +4,12 @@
 
   export let effects: Array<{type: string, emoji: string, duration: number}> = [];
   export let flash: boolean = false;
+  export let faint: boolean = false;
   
-  // GBA-style flicker animation parameters
+  // GBA-style flicker animation parameters (matching original Snaplings timing)
   const flickerCount = 19;
   const frameDelay = 2;
-  const flickerDuration = 600; // milliseconds
+  const flickerDuration = 1000; // milliseconds - matches Snaplings original
   
   // Flicker state management
   let isFlickering = false;
@@ -16,6 +17,11 @@
   let flickerFrame = 0;
   let flickerInterval: number;
   
+  // Faint animation state management
+  let isFainting = false;
+  let faintProgress = 0;
+  let faintAnimationId: number;
+  
   // Particle system configuration
   const PARTICLES_PER_EFFECT = 6; // Number of emoji particles per effect
   const SPAWN_RADIUS = 80; // Increased radius around piclet where particles spawn
@@ -62,6 +68,11 @@
     startFlickerAnimation();
   }
   
+  // Watch for faint changes to trigger faint animation
+  $: if (faint && !isFainting) {
+    startFaintAnimation();
+  }
+  
   function startFlickerAnimation() {
     isFlickering = true;
     flickerFrame = 0;
@@ -87,19 +98,60 @@
     }, frameDuration);
   }
   
+  function startFaintAnimation() {
+    isFainting = true;
+    faintProgress = 0;
+    
+    const faintDuration = 1200; // milliseconds - matches Snaplings original
+    const startTime = performance.now();
+    
+    function updateFaintAnimation(currentTime: number) {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / faintDuration, 1);
+      
+      // Use easeIn curve for acceleration as it falls away
+      faintProgress = progress * progress;
+      
+      if (progress < 1) {
+        faintAnimationId = requestAnimationFrame(updateFaintAnimation);
+      } else {
+        // Animation completed
+        isFainting = false;
+        faintProgress = 1; // Keep final state
+      }
+    }
+    
+    faintAnimationId = requestAnimationFrame(updateFaintAnimation);
+  }
+  
   onMount(() => {
     return () => {
       if (flickerInterval) {
         clearInterval(flickerInterval);
       }
+      if (faintAnimationId) {
+        cancelAnimationFrame(faintAnimationId);
+      }
     };
   });
 </script>
 
 <!-- Effects wrapper with relative positioning for particles -->
 <div class="effects-wrapper">
-  <!-- GBA-style flicker effect -->
-  <div class="effects-container" style="opacity: {(flash && isFlickering) ? (flickerVisible ? 1 : 0) : 1};">
+  <!-- GBA-style flicker effect with faint animation -->
+  <div 
+    class="effects-container" 
+    class:is-fainting={faint}
+    style="
+      opacity: {(flash && isFlickering) ? (flickerVisible ? 1 : 0) : (faint && faintProgress >= 1 ? 0 : 1)};
+      {faint ? `
+        transform: 
+          scale(1, ${Math.max(0, 1 - faintProgress)})
+          matrix(1, 0, ${-faintProgress * 0.5}, 1, 0, 0);
+        transform-origin: bottom center;
+      ` : ''}
+    "
+  >
     <slot />
   </div>
 

src/lib/components/Battle/BattleField.svelte

@@ -18,6 +18,8 @@
   export let enemyEffects: Array<{type: string, emoji: string, duration: number}> = [];
   export let playerFlash: boolean = false;
   export let enemyFlash: boolean = false;
+  export let playerFaint: boolean = false;
+  export let enemyFaint: boolean = false;
   
   // Animation states
   let playerVisible = false;
@@ -74,7 +76,7 @@
         {#if enemyVisible}
           <div class="enemy-piclet-wrapper" class:animate-in={showIntro}>
             <!-- Enemy Battle Effects wrap the image for flicker animation -->
-            <BattleEffects effects={enemyEffects} flash={enemyFlash}>
+            <BattleEffects effects={enemyEffects} flash={enemyFlash} faint={enemyFaint}>
               <img 
                 class="piclet-image enemy-image"
                 src={enemyPiclet.imageData || enemyPiclet.imageUrl} 
@@ -118,7 +120,7 @@
         {#if playerVisible}
           <div class="player-piclet-wrapper" class:animate-in={showIntro}>
             <!-- Player Battle Effects wrap the image for flicker animation -->
-            <BattleEffects effects={playerEffects} flash={playerFlash}>
+            <BattleEffects effects={playerEffects} flash={playerFlash} faint={playerFaint}>
               <img 
                 class="piclet-image player-image"
                 src={playerPiclet.imageData || playerPiclet.imageUrl} 

src/lib/components/Pages/Battle.svelte

@@ -38,6 +38,8 @@
   let enemyEffects: Array<{type: string, emoji: string, duration: number}> = [];
   let playerFlash = false;
   let enemyFlash = false;
+  let playerFaint = false;
+  let enemyFaint = false;
   
   onMount(() => {
     // Initialize battle engine with converted piclet definitions
@@ -253,15 +255,34 @@
     if (message.includes('missed')) {
       triggerEffect('both', 'miss', '💫', 800);
     }
+    
+    // Faint effects
+    if (message.includes('fainted')) {
+      if (message.includes(playerName)) {
+        triggerFaintAnimation('player');
+      } else if (message.includes(enemyName)) {
+        triggerFaintAnimation('enemy');
+      }
+    }
   }
   
   function triggerDamageFlash(target: 'player' | 'enemy') {
     if (target === 'player') {
       playerFlash = true;
-      setTimeout(() => playerFlash = false, 600); // Match GBA flicker duration
+      setTimeout(() => playerFlash = false, 1000); // Match original Snaplings flicker duration
     } else {
       enemyFlash = true;
-      setTimeout(() => enemyFlash = false, 600); // Match GBA flicker duration
+      setTimeout(() => enemyFlash = false, 1000); // Match original Snaplings flicker duration
+    }
+  }
+  
+  function triggerFaintAnimation(target: 'player' | 'enemy') {
+    if (target === 'player') {
+      playerFaint = true;
+      // Don't reset - faint animation should persist until battle ends
+    } else {
+      enemyFaint = true;
+      // Don't reset - faint animation should persist until battle ends
     }
   }
   
@@ -348,6 +369,8 @@
       {enemyEffects}
       {playerFlash}
       {enemyFlash}
+      {playerFaint}
+      {enemyFaint}
     />
     
     <BattleControls