btl sys

src/lib/components/Battle/BattleControls.svelte

@@ -93,5 +93,41 @@
     padding: 1rem;
     display: flex;
     flex-direction: column;
+    position: relative;
+  }
+  
+  .tap-continue-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 8px;
+  }
+  
+  .tap-indicator {
+    background: rgba(0, 122, 255, 0.9);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    animation: pulse 2s infinite;
+  }
+  
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 0.9;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.05);
+    }
   }
 </style>

src/lib/components/Pages/Battle.svelte

@@ -220,10 +220,32 @@
             await handleBattleResults(battleState.winner === 'player');
           }, 2500); // Wait time for faint message and animation
         } else {
-          setTimeout(() => {
-            currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;
-            processingTurn = false;
-          }, 1000);
+          // Check if player Piclet switched due to fainting
+          const newPlayerPiclet = battlePicletToInstance(battleState.playerPiclet, currentPlayerPiclet);
+          const playerPicletChanged = currentPlayerPiclet.id !== newPlayerPiclet.id;
+          
+          if (playerPicletChanged) {
+            // Player Piclet fainted and auto-switched - show faint message first
+            const faintedPiclet = currentPlayerPiclet;
+            currentMessage = `${faintedPiclet.nickname} fainted!`;
+            playerFaint = true;
+            
+            // Wait for faint message, then show switch and continue
+            setTimeout(() => {
+              currentMessage = `Go, ${newPlayerPiclet.nickname}!`;
+              // updateUIFromBattleState will handle the white flash transition
+              setTimeout(() => {
+                currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;
+                processingTurn = false;
+              }, 1000);
+            }, 2500);
+          } else {
+            // Normal turn end - no faint or switch
+            setTimeout(() => {
+              currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;
+              processingTurn = false;
+            }, 1000);
+          }
         }
       }
     } catch (error) {
@@ -370,12 +392,65 @@
     }
   }
 
+  function showMessageSequence(messages: string[], callback: () => void) {
+    if (!messages || messages.length === 0) {
+      callback();
+      return;
+    }
+    
+    messageQueue = messages;
+    currentMessageIndex = 0;
+    continueCallback = callback;
+    
+    // Show first message
+    currentMessage = messageQueue[0];
+    waitingForContinue = true;
+  }
+  
+  function handleContinueTap() {
+    if (!waitingForContinue || !messageQueue.length) return;
+    
+    // Trigger visual effects for current message
+    triggerVisualEffectsFromMessage(currentMessage);
+    
+    currentMessageIndex++;
+    
+    if (currentMessageIndex >= messageQueue.length) {
+      // Sequence finished
+      waitingForContinue = false;
+      messageQueue = [];
+      currentMessageIndex = 0;
+      
+      if (continueCallback) {
+        continueCallback();
+        continueCallback = null;
+      }
+    } else {
+      // Show next message
+      currentMessage = messageQueue[currentMessageIndex];
+    }
+  }
+
   function updateUIFromBattleState() {
     if (!battleState) return;
     
-    // Update player piclet state
-    currentPlayerPiclet = battlePicletToInstance(battleState.playerPiclet, currentPlayerPiclet);
-    playerHpPercentage = battleState.playerPiclet.currentHp / battleState.playerPiclet.maxHp;
+    // Check if player Piclet has changed (indicating auto-switch due to fainting)
+    const newPlayerPiclet = battlePicletToInstance(battleState.playerPiclet, currentPlayerPiclet);
+    const playerPicletChanged = currentPlayerPiclet.id !== newPlayerPiclet.id;
+    
+    if (playerPicletChanged) {
+      // Player Piclet auto-switched due to fainting - show transition
+      showWhiteFlash = true;
+      setTimeout(() => {
+        currentPlayerPiclet = newPlayerPiclet;
+        playerHpPercentage = battleState.playerPiclet.currentHp / battleState.playerPiclet.maxHp;
+        showWhiteFlash = false;
+      }, 300);
+    } else {
+      // Normal update without switch
+      currentPlayerPiclet = newPlayerPiclet;
+      playerHpPercentage = battleState.playerPiclet.currentHp / battleState.playerPiclet.maxHp;
+    }
     
     // Update enemy piclet state  
     currentEnemyPiclet = battlePicletToInstance(battleState.opponentPiclet, currentEnemyPiclet);
@@ -605,10 +680,12 @@
       enemyPiclet={currentEnemyPiclet}
       {rosterPiclets}
       {battleState}
+      {waitingForContinue}
       onAction={handleAction}
       onMoveSelect={handleMoveSelect}
       onPicletSelect={handlePicletSelect}
       onBack={handleBack}
+      onContinueTap={handleContinueTap}
     />
   </div>