btl

src/lib/components/Battle/BattleControls.svelte

@@ -16,6 +16,9 @@
   export let onAction: (action: string) => void;
   export let onMoveSelect: (move: any) => void;
   export let onPicletSelect: (piclet: PicletInstance) => void;
+  export let onBack: () => void;
+  export let waitingForContinue: boolean = false;
+  export let onContinueTap: () => void;
   
   // Use the roster passed from parent instead of loading it here
   $: availablePiclets = rosterPiclets;
@@ -29,7 +32,14 @@
   
   <!-- Action Area -->
   <div class="action-area">
-    {#if battlePhase === 'main' && !processingTurn && !battleEnded}
+    {#if waitingForContinue}
+      <!-- Tap to continue overlay -->
+      <div class="tap-continue-overlay" on:click={onContinueTap}>
+        <div class="tap-indicator">
+          <span>Tap to continue</span>
+        </div>
+      </div>
+    {:else if battlePhase === 'main' && !processingTurn && !battleEnded}
       <ActionButtons 
         {isWildBattle}
         {playerPiclet}
@@ -40,6 +50,7 @@
         {onAction}
         {onMoveSelect}
         {onPicletSelect}
+        {onBack}
       />
     {/if}
   </div>

src/lib/components/Pages/Battle.svelte

@@ -38,6 +38,12 @@
   let playerTrainerSlideOut = false;
   let enemyTrainerSlideOut = false;
   
+  // Message progression system
+  let waitingForContinue = false;
+  let messageQueue: string[] = [];
+  let currentMessageIndex = 0;
+  let continueCallback: (() => void) | null = null;
+  
   // HP animation states  
   let playerHpPercentage = playerPiclet.currentHp / playerPiclet.maxHp;
   let enemyHpPercentage = enemyPiclet.currentHp / enemyPiclet.maxHp;
@@ -183,25 +189,9 @@
       const filteredLogEntries = newLogEntries.filter(message => !message.includes('fainted'));
       const result = { log: filteredLogEntries };
       
-      // Show battle messages with timing and visual effects
+      // Show battle messages with tap-to-continue system
       if (result.log && result.log.length > 0) {
-        let messageIndex = 0;
-        function showNextBattleMessage() {
-          if (messageIndex < result.log.length) {
-            const message = result.log[messageIndex];
-            currentMessage = message;
-            
-            // Trigger visual effects based on message content
-            triggerVisualEffectsFromMessage(message);
-            
-            messageIndex++;
-            setTimeout(showNextBattleMessage, 1500);
-          } else {
-            // After all messages, check battle end or continue
-            finalizeTurn();
-          }
-        }
-        showNextBattleMessage();
+        showMessageSequence(result.log, finalizeTurn);
       } else {
         finalizeTurn();
       }
@@ -210,12 +200,12 @@
         // Update UI state from battle engine
         updateUIFromBattleState();
         
-        // Check for battle end - but handle faint message sequence properly
+        // Check for battle end - only show faint message
         if (battleState.winner) {
           battleEnded = true;
           const defeatedPiclet = battleState.winner === 'player' ? currentEnemyPiclet : currentPlayerPiclet;
           
-          // First show the faint message and trigger animation
+          // Show the faint message and trigger animation
           currentMessage = `${defeatedPiclet.nickname} fainted!`;
           
           // Trigger faint animation for the defeated Piclet
@@ -225,18 +215,10 @@
             playerFaint = true;
           }
           
-          // Wait for faint message to be displayed, 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);
-          }, 2500); // Increased wait time to ensure faint message is seen
+          // Wait for faint message, then process battle results
+          setTimeout(async () => {
+            await handleBattleResults(battleState.winner === 'player');
+          }, 2500); // Wait time for faint message and animation
         } else {
           setTimeout(() => {
             currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;
@@ -475,25 +457,9 @@
       const filteredLogEntries = newLogEntries.filter(message => !message.includes('fainted'));
       const result = { log: filteredLogEntries };
       
-      // Show battle messages with timing and visual effects
+      // Show battle messages with tap-to-continue system
       if (result.log && result.log.length > 0) {
-        let messageIndex = 0;
-        function showNextBattleMessage() {
-          if (messageIndex < result.log.length) {
-            const message = result.log[messageIndex];
-            currentMessage = message;
-            
-            // Trigger visual effects based on message content
-            triggerVisualEffectsFromMessage(message);
-            
-            messageIndex++;
-            setTimeout(showNextBattleMessage, 1500);
-          } else {
-            // After all messages, check battle end or continue
-            finalizeSwitchTurn();
-          }
-        }
-        showNextBattleMessage();
+        showMessageSequence(result.log, finalizeSwitchTurn);
       } else {
         finalizeSwitchTurn();
       }
@@ -502,12 +468,12 @@
         // Update UI state from battle engine
         updateUIFromBattleState();
         
-        // Check for battle end - but handle faint message sequence properly
+        // Check for battle end - only show faint message
         if (battleState.winner) {
           battleEnded = true;
           const defeatedPiclet = battleState.winner === 'player' ? currentEnemyPiclet : currentPlayerPiclet;
           
-          // First show the faint message and trigger animation
+          // Show the faint message and trigger animation
           currentMessage = `${defeatedPiclet.nickname} fainted!`;
           
           // Trigger faint animation for the defeated Piclet
@@ -517,18 +483,10 @@
             playerFaint = true;
           }
           
-          // Wait for faint message to be displayed, 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);
-          }, 2500); // Increased wait time to ensure faint message is seen
+          // Wait for faint message, then process battle results
+          setTimeout(async () => {
+            await handleBattleResults(battleState.winner === 'player');
+          }, 2500); // Wait time for faint message and animation
         } else {
           setTimeout(() => {
             currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;