fmt

src/lib/components/Battle/BattleField.svelte

@@ -111,14 +111,14 @@
   
   <!-- Player Trainer -->
   {#if playerTrainerVisible}
-    <div class="player-trainer" class:slide-out-left={playerTrainerSlideOut} transition:fade={{ duration: 300 }}>
+    <div class="player-trainer" class:slide-out-left={playerTrainerSlideOut}>
       <img src="/assets/default_trainer.png" alt="Player Trainer" />
     </div>
   {/if}
   
   <!-- Enemy Trainer (only for trainer battles) -->
   {#if !isWildBattle && enemyTrainerVisible}
-    <div class="enemy-trainer" class:slide-out-right={enemyTrainerSlideOut} transition:fade={{ duration: 300 }}>
+    <div class="enemy-trainer" class:slide-out-right={enemyTrainerSlideOut}>
       <img src="/assets/default_trainer.png" alt="Enemy Trainer" />
     </div>
   {/if}
@@ -280,7 +280,7 @@
   .player-trainer img {
     width: 120px;
     height: auto;
-    transform: scaleX(-1); /* Face right */
+    /* Remove horizontal flip - trainer should face naturally */
   }
   
   .player-trainer.slide-out-left {

src/lib/components/Pages/Battle.svelte

@@ -179,7 +179,9 @@
       // Get only the new log entries from this turn
       const logAfter = battleEngine.getLog();
       const newLogEntries = logAfter.slice(logBefore.length);
-      const result = { log: newLogEntries };
+      // Filter out faint messages since we handle them manually for proper sequencing
+      const filteredLogEntries = newLogEntries.filter(message => !message.includes('fainted'));
+      const result = { log: filteredLogEntries };
       
       // Show battle messages with timing and visual effects
       if (result.log && result.log.length > 0) {
@@ -223,7 +225,7 @@
             playerFaint = true;
           }
           
-          // Wait for faint animation, then show win/loss message
+          // Wait for faint message to be displayed, then show win/loss message
           setTimeout(() => {
             const winMessage = battleState.winner === 'player' 
               ? 'You won!'
@@ -234,7 +236,7 @@
             setTimeout(async () => {
               await handleBattleResults(battleState.winner === 'player');
             }, 1500);
-          }, 2000); // Wait for faint animation
+          }, 2500); // Increased wait time to ensure faint message is seen
         } else {
           setTimeout(() => {
             currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;
@@ -469,7 +471,9 @@
       // Get only the new log entries from this turn
       const logAfter = battleEngine.getLog();
       const newLogEntries = logAfter.slice(logBefore.length);
-      const result = { log: newLogEntries };
+      // Filter out faint messages since we handle them manually for proper sequencing
+      const filteredLogEntries = newLogEntries.filter(message => !message.includes('fainted'));
+      const result = { log: filteredLogEntries };
       
       // Show battle messages with timing and visual effects
       if (result.log && result.log.length > 0) {
@@ -513,7 +517,7 @@
             playerFaint = true;
           }
           
-          // Wait for faint animation, then show win/loss message
+          // Wait for faint message to be displayed, then show win/loss message
           setTimeout(() => {
             const winMessage = battleState.winner === 'player' 
               ? 'You won!'
@@ -524,7 +528,7 @@
             setTimeout(async () => {
               await handleBattleResults(battleState.winner === 'player');
             }, 1500);
-          }, 2000); // Wait for faint animation
+          }, 2500); // Increased wait time to ensure faint message is seen
         } else {
           setTimeout(() => {
             currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;