GBA style flash

src/lib/components/Battle/BattleEffects.svelte

@@ -1,32 +1,85 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
+  import { onMount } from 'svelte';
 
   export let effects: Array<{type: string, emoji: string, duration: number}> = [];
   export let flash: boolean = false;
+  
+  // GBA-style flicker animation parameters
+  const flickerCount = 19;
+  const frameDelay = 2;
+  const flickerDuration = 600; // milliseconds
+  
+  // Flicker state management
+  let isFlickering = false;
+  let flickerVisible = true;
+  let flickerFrame = 0;
+  let flickerInterval: number;
+  
+  // Watch for flash changes to trigger flicker animation
+  $: if (flash && !isFlickering) {
+    startFlickerAnimation();
+  }
+  
+  function startFlickerAnimation() {
+    isFlickering = true;
+    flickerFrame = 0;
+    
+    // Calculate frame duration based on total duration and frame count
+    const totalFrames = flickerCount * (frameDelay + 1);
+    const frameDuration = flickerDuration / totalFrames;
+    
+    flickerInterval = setInterval(() => {
+      if (flickerFrame >= totalFrames) {
+        // Animation finished, always visible
+        clearInterval(flickerInterval);
+        isFlickering = false;
+        flickerVisible = true;
+        return;
+      }
+      
+      // Toggle visibility every frameDelay frames
+      const flickerCycle = Math.floor(flickerFrame / (frameDelay + 1));
+      flickerVisible = flickerCycle % 2 === 0;
+      
+      flickerFrame++;
+    }, frameDuration);
+  }
+  
+  onMount(() => {
+    return () => {
+      if (flickerInterval) {
+        clearInterval(flickerInterval);
+      }
+    };
+  });
 </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>
+<!-- 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};">
+    <slot />
   </div>
-{/each}
+
+  <!-- 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}
+</div>
 
 <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;
+  .effects-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .effects-container {
+    position: relative;
+    display: inline-block;
+    transition: opacity 0.05s ease;
   }
   
   .effect-particle {

src/lib/components/Battle/BattleField.svelte

@@ -73,15 +73,19 @@
         
         {#if enemyVisible}
           <div class="enemy-piclet-wrapper" class:animate-in={showIntro}>
-            <img 
-              class="piclet-image enemy-image"
-              src={enemyPiclet.imageData || enemyPiclet.imageUrl} 
-              alt={enemyPiclet.nickname}
-              on:error={(e) => {
-                const target = e.currentTarget as HTMLImageElement;
-                target.src = 'https://via.placeholder.com/120x120?text=Piclet';
-              }}
-            />
+            <!-- Enemy Battle Effects wrap the image for flicker animation -->
+            <BattleEffects effects={enemyEffects} flash={enemyFlash}>
+              <img 
+                class="piclet-image enemy-image"
+                src={enemyPiclet.imageData || enemyPiclet.imageUrl} 
+                alt={enemyPiclet.nickname}
+                on:error={(e) => {
+                  const target = e.currentTarget as HTMLImageElement;
+                  target.src = 'https://via.placeholder.com/120x120?text=Piclet';
+                }}
+              />
+            </BattleEffects>
+            
             <img 
               class="platform enemy-platform" 
               src="/assets/grass.PNG" 
@@ -101,9 +105,6 @@
                 <StatusEffectIndicator statusEffects={battleState.opponentPiclet.statusEffects.map(effect => ({ type: effect, turnsLeft: 3 }))} />
               </div>
             {/if}
-            
-            <!-- Enemy Battle Effects -->
-            <BattleEffects effects={enemyEffects} flash={enemyFlash} />
           </div>
         {/if}
       </div>
@@ -116,15 +117,19 @@
       <div class="player-stack" class:intro-animations={showIntro}>
         {#if playerVisible}
           <div class="player-piclet-wrapper" class:animate-in={showIntro}>
-            <img 
-              class="piclet-image player-image"
-              src={playerPiclet.imageData || playerPiclet.imageUrl} 
-              alt={playerPiclet.nickname}
-              on:error={(e) => {
-                const target = e.currentTarget as HTMLImageElement;
-                target.src = 'https://via.placeholder.com/120x120?text=Piclet';
-              }}
-            />
+            <!-- Player Battle Effects wrap the image for flicker animation -->
+            <BattleEffects effects={playerEffects} flash={playerFlash}>
+              <img 
+                class="piclet-image player-image"
+                src={playerPiclet.imageData || playerPiclet.imageUrl} 
+                alt={playerPiclet.nickname}
+                on:error={(e) => {
+                  const target = e.currentTarget as HTMLImageElement;
+                  target.src = 'https://via.placeholder.com/120x120?text=Piclet';
+                }}
+              />
+            </BattleEffects>
+            
             <img 
               class="platform player-platform" 
               src="/assets/grass.PNG" 
@@ -144,9 +149,6 @@
                 <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/Pages/Battle.svelte

@@ -252,10 +252,10 @@
   function triggerDamageFlash(target: 'player' | 'enemy') {
     if (target === 'player') {
       playerFlash = true;
-      setTimeout(() => playerFlash = false, 200);
+      setTimeout(() => playerFlash = false, 600); // Match GBA flicker duration
     } else {
       enemyFlash = true;
-      setTimeout(() => enemyFlash = false, 200);
+      setTimeout(() => enemyFlash = false, 600); // Match GBA flicker duration
     }
   }