better anim

src/lib/components/Battle/BattleField.svelte

@@ -41,33 +41,19 @@
   const playerXpPercentage = (playerPiclet.xp / 100) * 100; // Simplified, should use actual XP curve
   
   onMount(() => {
-    if (showIntro) {
-      // Intro animation sequence - show battle participants directly
-      setTimeout(() => {
-        if (!isWildBattle) {
-          enemyTrainerVisible = true;
-        } else {
-          enemyVisible = true;
-        }
-      }, 100);
-      
-      setTimeout(() => {
-        if (!isWildBattle) {
-          playerTrainerVisible = true;
-        } else {
-          playerTrainerVisible = true; // Show player trainer even in wild battles
-        }
-      }, 200);
-    } else {
-      // Skip intro
+    if (!showIntro) {
+      // Skip intro - show everything immediately
       playerVisible = true;
       enemyVisible = true;
     }
+    // For intro mode, trainers will be shown when slide-out is triggered
   });
   
   // Watch for trainer slide-out triggers
   $: if (playerTrainerSlideOut && !playerTrainerSliding) {
     playerTrainerSliding = true;
+    // Show trainer briefly, then slide out
+    playerTrainerVisible = true;
     setTimeout(() => {
       playerTrainerVisible = false;
       // Trigger white flash then show player monster
@@ -81,6 +67,8 @@
   
   $: if (enemyTrainerSlideOut && !enemyTrainerSliding) {
     enemyTrainerSliding = true;
+    // Show trainer briefly, then slide out
+    enemyTrainerVisible = true;
     setTimeout(() => {
       enemyTrainerVisible = false;
       // Trigger white flash then show enemy monster

src/lib/components/Pages/Battle.svelte

@@ -261,7 +261,7 @@
     const playerName = stripBattlePrefix(battleState?.playerPiclet?.definition?.name || '');
     const enemyName = stripBattlePrefix(battleState?.opponentPiclet?.definition?.name || '');
     
-    // Attack lunge effects - trigger when a Piclet uses a move
+    // Attack lunge effects - trigger immediately when a Piclet uses a move
     if (message.includes(' used ')) {
       if (message.includes(playerName)) {
         triggerLungeAnimation('player');
@@ -270,7 +270,7 @@
       }
     }
     
-    // Damage effects
+    // Damage flash effects - trigger when damage is taken
     if (message.includes('took') && message.includes('damage')) {
       if (message.includes(playerName)) {
         triggerDamageFlash('player');
@@ -402,17 +402,19 @@
     currentMessageIndex = 0;
     continueCallback = callback;
     
-    // Show first message
+    // Show first message and trigger its effects
     currentMessage = messageQueue[0];
     waitingForContinue = true;
+    
+    // Trigger visual effects automatically after text appears (with small delay for text animation)
+    setTimeout(() => {
+      triggerVisualEffectsFromMessage(currentMessage);
+    }, 500); // Allow time for typewriter text to complete
   }
   
   function handleContinueTap() {
     if (!waitingForContinue || !messageQueue.length) return;
     
-    // Trigger visual effects for current message
-    triggerVisualEffectsFromMessage(currentMessage);
-    
     currentMessageIndex++;
     
     if (currentMessageIndex >= messageQueue.length) {
@@ -428,6 +430,11 @@
     } else {
       // Show next message
       currentMessage = messageQueue[currentMessageIndex];
+      
+      // Trigger visual effects automatically after text appears
+      setTimeout(() => {
+        triggerVisualEffectsFromMessage(currentMessage);
+      }, 500); // Allow time for typewriter text to complete
     }
   }