better battle

src/lib/components/Battle/BattleField.svelte

@@ -22,25 +22,43 @@
   export let enemyFaint: boolean = false;
   export let playerLunge: boolean = false;
   export let enemyLunge: boolean = false;
+  export let isWildBattle: boolean = true;
+  export let showWhiteFlash: boolean = false;
+  export let playerTrainerVisible: boolean = false;
+  export let enemyTrainerVisible: boolean = false;
+  export let playerTrainerSlideOut: boolean = false;
+  export let enemyTrainerSlideOut: boolean = false;
   
   // Animation states
   let playerVisible = false;
   let enemyVisible = false;
   let trainerVisible = true;
   
+  // Trainer animation states
+  let playerTrainerSliding = false;
+  let enemyTrainerSliding = false;
+  
   // Calculate player XP percentage (0-100% of current level)
   const playerXpPercentage = (playerPiclet.xp / 100) * 100; // Simplified, should use actual XP curve
   
   onMount(() => {
     if (showIntro) {
-      // Intro animation sequence
+      // Intro animation sequence - show trainers first
       setTimeout(() => {
         trainerVisible = false;
-        enemyVisible = true;
+        if (!isWildBattle) {
+          enemyTrainerVisible = true;
+        } else {
+          enemyVisible = true;
+        }
       }, 500);
       
       setTimeout(() => {
-        playerVisible = true;
+        if (!isWildBattle) {
+          playerTrainerVisible = true;
+        } else {
+          playerTrainerVisible = true; // Show player trainer even in wild battles
+        }
       }, 1000);
     } else {
       // Skip intro
@@ -49,9 +67,41 @@
       trainerVisible = false;
     }
   });
+  
+  // Watch for trainer slide-out triggers
+  $: if (playerTrainerSlideOut && !playerTrainerSliding) {
+    playerTrainerSliding = true;
+    setTimeout(() => {
+      playerTrainerVisible = false;
+      // Trigger white flash then show player monster
+      showWhiteFlash = true;
+      setTimeout(() => {
+        showWhiteFlash = false;
+        playerVisible = true;
+      }, 300);
+    }, 600); // Time for slide-out animation
+  }
+  
+  $: if (enemyTrainerSlideOut && !enemyTrainerSliding) {
+    enemyTrainerSliding = true;
+    setTimeout(() => {
+      enemyTrainerVisible = false;
+      // Trigger white flash then show enemy monster
+      showWhiteFlash = true;
+      setTimeout(() => {
+        showWhiteFlash = false;
+        enemyVisible = true;
+      }, 300);
+    }, 600); // Time for slide-out animation
+  }
 </script>
 
 <div class="battle-field">
+  <!-- White flash overlay -->
+  {#if showWhiteFlash}
+    <div class="white-flash" transition:fade={{ duration: 300 }}></div>
+  {/if}
+  
   <!-- Trainer intro image -->
   {#if showIntro && trainerVisible}
     <div class="trainer-intro" transition:fade={{ duration: 300 }}>
@@ -59,6 +109,20 @@
     </div>
   {/if}
   
+  <!-- Player Trainer -->
+  {#if playerTrainerVisible}
+    <div class="player-trainer" class:slide-out-left={playerTrainerSlideOut} transition:fade={{ duration: 300 }}>
+      <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 }}>
+      <img src="/assets/default_trainer.png" alt="Enemy Trainer" />
+    </div>
+  {/if}
+  
   <div class="battle-content">
     <!-- Field Effects Display -->
     {#if battleState?.fieldEffects}
@@ -181,6 +245,16 @@
     );
   }
   
+  .white-flash {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: white;
+    z-index: 50;
+  }
+  
   .trainer-intro {
     position: absolute;
     top: 50%;
@@ -195,6 +269,41 @@
     animation: trainerPulse 0.5s ease-in-out;
   }
   
+  .player-trainer {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    z-index: 10;
+    transition: transform 0.6s ease-in-out;
+  }
+  
+  .player-trainer img {
+    width: 120px;
+    height: auto;
+    transform: scaleX(-1); /* Face right */
+  }
+  
+  .player-trainer.slide-out-left {
+    transform: translateX(-200px);
+  }
+  
+  .enemy-trainer {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 10;
+    transition: transform 0.6s ease-in-out;
+  }
+  
+  .enemy-trainer img {
+    width: 120px;
+    height: auto;
+  }
+  
+  .enemy-trainer.slide-out-right {
+    transform: translateX(200px);
+  }
+  
   @keyframes trainerPulse {
     0% {
       transform: scale(1);

src/lib/components/Pages/Battle.svelte

@@ -31,6 +31,13 @@
   let processingTurn = false;
   let battleEnded = false;
   
+  // Trainer animation states
+  let showWhiteFlash = false;
+  let playerTrainerVisible = false;
+  let enemyTrainerVisible = false;
+  let playerTrainerSlideOut = false;
+  let enemyTrainerSlideOut = false;
+  
   // HP animation states  
   let playerHpPercentage = playerPiclet.currentHp / playerPiclet.maxHp;
   let enemyHpPercentage = enemyPiclet.currentHp / enemyPiclet.maxHp;
@@ -81,11 +88,27 @@
     
     // Start intro sequence
     setTimeout(() => {
-      currentMessage = `Go, ${playerPiclet.nickname}!`;
-      setTimeout(() => {
-        currentMessage = `What will ${playerPiclet.nickname} do?`;
-        battlePhase = 'main';
-      }, 1500);
+      if (!isWildBattle) {
+        // Enemy trainer sends out first
+        currentMessage = `Go, ${enemyPiclet.nickname}!`;
+        enemyTrainerSlideOut = true;
+        setTimeout(() => {
+          currentMessage = `Go, ${playerPiclet.nickname}!`;
+          playerTrainerSlideOut = true;
+          setTimeout(() => {
+            currentMessage = `What will ${playerPiclet.nickname} do?`;
+            battlePhase = 'main';
+          }, 2000); // Wait for trainer slide + flash + monster appear
+        }, 2000); // Wait for enemy trainer sequence
+      } else {
+        // Wild battle - player sends out
+        currentMessage = `Go, ${playerPiclet.nickname}!`;
+        playerTrainerSlideOut = true;
+        setTimeout(() => {
+          currentMessage = `What will ${playerPiclet.nickname} do?`;
+          battlePhase = 'main';
+        }, 2000); // Wait for trainer slide + flash + monster appear
+      }
     }, 2000);
   });
   
@@ -185,13 +208,13 @@
         // Update UI state from battle engine
         updateUIFromBattleState();
         
-        // Check for battle end
+        // Check for battle end - but handle faint message sequence properly
         if (battleState.winner) {
           battleEnded = true;
-          const winMessage = battleState.winner === 'player' 
-            ? `${currentEnemyPiclet.nickname} fainted! You won!`
-            : `${currentPlayerPiclet.nickname} fainted! You lost!`;
-          currentMessage = winMessage;
+          const defeatedPiclet = battleState.winner === 'player' ? currentEnemyPiclet : currentPlayerPiclet;
+          
+          // First show the faint message and trigger animation
+          currentMessage = `${defeatedPiclet.nickname} fainted!`;
           
           // Trigger faint animation for the defeated Piclet
           if (battleState.winner === 'player') {
@@ -200,10 +223,18 @@
             playerFaint = true;
           }
           
-          // Process battle results with XP and level ups
-          setTimeout(async () => {
-            await handleBattleResults(battleState.winner === 'player');
-          }, 2000);
+          // Wait for faint animation, then show win/loss message
+          setTimeout(() => {
+            const winMessage = battleState.winner === 'player' 
+              ? 'You won!'
+              : 'You lost!';
+            currentMessage = winMessage;
+            
+            // Process battle results with XP and level ups
+            setTimeout(async () => {
+              await handleBattleResults(battleState.winner === 'player');
+            }, 1500);
+          }, 2000); // Wait for faint animation
         } else {
           setTimeout(() => {
             currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;
@@ -303,14 +334,8 @@
       triggerEffect('both', 'miss', '💫', 800);
     }
     
-    // Faint effects
-    if (message.includes('fainted')) {
-      if (message.includes(playerInternalName)) {
-        triggerFaintAnimation('player');
-      } else if (message.includes(enemyInternalName)) {
-        triggerFaintAnimation('enemy');
-      }
-    }
+    // Faint effects - only trigger when we see the faint message from battle log
+    // Don't trigger here since we handle it in finalizeTurn for proper sequencing
   }
   
   function triggerDamageFlash(target: 'player' | 'enemy') {
@@ -387,10 +412,16 @@
       return;
     }
     
-    // Update display immediately before processing the turn
-    currentPlayerPiclet = piclet;
-    playerHpPercentage = piclet.currentHp / piclet.maxHp;
+    // Show the switch message and trigger white flash animation
     currentMessage = `Go, ${piclet.nickname}!`;
+    showWhiteFlash = true;
+    
+    // After flash, update display
+    setTimeout(() => {
+      currentPlayerPiclet = piclet;
+      playerHpPercentage = piclet.currentHp / piclet.maxHp;
+      showWhiteFlash = false;
+    }, 300);
     
     const switchAction: SwitchAction = {
       type: 'switch',
@@ -467,13 +498,13 @@
         // Update UI state from battle engine
         updateUIFromBattleState();
         
-        // Check for battle end
+        // Check for battle end - but handle faint message sequence properly
         if (battleState.winner) {
           battleEnded = true;
-          const winMessage = battleState.winner === 'player' 
-            ? `${currentEnemyPiclet.nickname} fainted! You won!`
-            : `${currentPlayerPiclet.nickname} fainted! You lost!`;
-          currentMessage = winMessage;
+          const defeatedPiclet = battleState.winner === 'player' ? currentEnemyPiclet : currentPlayerPiclet;
+          
+          // First show the faint message and trigger animation
+          currentMessage = `${defeatedPiclet.nickname} fainted!`;
           
           // Trigger faint animation for the defeated Piclet
           if (battleState.winner === 'player') {
@@ -482,10 +513,18 @@
             playerFaint = true;
           }
           
-          // Process battle results with XP and level ups
-          setTimeout(async () => {
-            await handleBattleResults(battleState.winner === 'player');
-          }, 2000);
+          // Wait for faint animation, then show win/loss message
+          setTimeout(() => {
+            const winMessage = battleState.winner === 'player' 
+              ? 'You won!'
+              : 'You lost!';
+            currentMessage = winMessage;
+            
+            // Process battle results with XP and level ups
+            setTimeout(async () => {
+              await handleBattleResults(battleState.winner === 'player');
+            }, 1500);
+          }, 2000); // Wait for faint animation
         } else {
           setTimeout(() => {
             currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;
@@ -586,6 +625,12 @@
       {enemyFaint}
       {playerLunge}
       {enemyLunge}
+      {isWildBattle}
+      {showWhiteFlash}
+      {playerTrainerVisible}
+      {enemyTrainerVisible}
+      {playerTrainerSlideOut}
+      {enemyTrainerSlideOut}
     />
     
     <BattleControls

src/lib/components/PicletGenerator/PicletGenerator.svelte

@@ -215,11 +215,11 @@ Format your response exactly as follows:
         "conversation_id": "",
       };
       
-      // Create default settings based on qwen.html with max thinking tokens
+      // Create default settings based on qwen.html with minimal thinking tokens
       const defaultSettings = {
         "model": "qwen3-235b-a22b",
         "sys_prompt": "You are a creative monster designer specializing in transforming everyday objects into imaginative Pokémon-style creatures. Follow the exact format provided and create detailed, engaging descriptions that bring these monsters to life.",
-        "thinking_budget": 38
+        "thinking_budget": 3
       };
       
       // Create thinking button state
@@ -312,11 +312,11 @@ Create a concise visual description (1-3 sentences, max 100 words). Focus only o
         "conversation_id": "",
       };
       
-      // Create default settings based on qwen.html
+      // Create default settings based on qwen.html with minimal thinking tokens
       const defaultSettings = {
         "model": "qwen3-235b-a22b",
         "sys_prompt": "You are an expert at creating concise visual descriptions for image generation. Extract ONLY visual appearance details and describe them in 1-2 sentences (max 50 words). Focus on colors, shape, eyes, limbs, and distinctive features. Omit all non-visual information like abilities, personality, or backstory.",
-        "thinking_budget": 38
+        "thinking_budget": 3
       };
       
       // Create thinking button state
@@ -676,11 +676,11 @@ Write your response within \`\`\`json\`\`\``;
         "conversation_id": "",
       };
       
-      // Create default settings based on qwen.html
+      // Create default settings based on qwen.html with minimal thinking tokens
       const defaultSettings = {
         "model": "qwen3-235b-a22b",
         "sys_prompt": "You are a game designer specializing in monster stats and abilities. You must ONLY output valid JSON that matches the provided schema exactly. Do not include any text before or after the JSON. Do not include null values in your JSON response. Your entire response should be wrapped in a ```json``` code block.",
-        "thinking_budget": 38
+        "thinking_budget": 3
       };
       
       // Create thinking button state