fix switch out

src/lib/components/Battle/PicletInfo.svelte

@@ -21,39 +21,48 @@
 </script>
 
 <div class="piclet-info-wrapper {isPlayer ? 'player-info-wrapper' : 'enemy-info-wrapper'}">
-  <div class="piclet-info" style="--type-logo: url('{typeLogoPath}')">
-    <!-- Type Logo Background -->
-    <div class="type-logo-background"></div>
-    
-    <!-- Name Row -->
-    <div class="name-row">
-      <span class="piclet-name">{piclet.nickname}</span>
-      <span class="level-badge">Lv.{piclet.level}</span>
+  <div class="piclet-info">
+    <!-- Type Logo (Foreground) -->
+    <div class="type-logo-container">
+      <img 
+        src={typeLogoPath} 
+        alt={piclet.primaryType}
+        class="type-logo"
+      />
     </div>
     
-    <!-- HP Section -->
-    <div class="stat-row">
-      <div class="stat-label">HP</div>
-      <div class="hp-bar">
-        <div 
-          class="hp-fill" 
-          style="width: {hpPercentage * 100}%; background-color: {hpColor}"
-        ></div>
+    <!-- Content Area -->
+    <div class="content-area">
+      <!-- Name and Level Row -->
+      <div class="header-row">
+        <div class="piclet-name">{piclet.nickname}</div>
+        <div class="level-text">Lv.{piclet.level}</div>
       </div>
-    </div>
-    
-    <!-- XP Section (Player only) -->
-    {#if isPlayer}
+      
+      <!-- HP Section -->
       <div class="stat-row">
-        <div class="stat-label">XP</div>
-        <div class="xp-bar">
+        <div class="stat-label">HP</div>
+        <div class="hp-bar">
           <div 
-            class="xp-fill" 
-            style="width: {xpTowardsNext.percentage}%"
+            class="hp-fill" 
+            style="width: {hpPercentage * 100}%; background-color: {hpColor}"
           ></div>
         </div>
       </div>
-    {/if}
+      
+      <!-- XP Section (Player only) -->
+      {#if isPlayer}
+        <div class="stat-row">
+          <div class="stat-label">XP</div>
+          <div class="xp-bar">
+            <div 
+              class="xp-fill" 
+              style="width: {xpTowardsNext.percentage}%"
+            ></div>
+          </div>
+        </div>
+      {/if}
+    </div>
   </div>
   
   <!-- Triangle Pointer -->
@@ -82,61 +91,68 @@
   .piclet-info {
     background: rgba(255, 255, 255, 0.9);
     border-radius: 8px;
-    padding: 12px;
+    padding: 10px;
     min-width: 160px;
-    position: relative;
-    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
   }
   
-  /* Type Logo Background */
-  .type-logo-background {
-    position: absolute;
-    bottom: -4px;
-    right: 0px;
+  /* Type Logo Container */
+  .type-logo-container {
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+  
+  .type-logo {
     width: 35px;
     height: 35px;
-    background-image: var(--type-logo);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    opacity: 0.12;
-    pointer-events: none;
-    z-index: 1;
+    object-fit: contain;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(4px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
   
-  /* Name Row */
-  .name-row {
+  /* Content Area */
+  .content-area {
+    flex: 1;
+    min-width: 0; /* Allows flex item to shrink below content size */
+  }
+  
+  /* Header Row */
+  .header-row {
     display: flex;
-    align-items: center;
+    align-items: baseline;
     justify-content: space-between;
-    margin-bottom: 8px;
-    position: relative;
-    z-index: 2;
+    margin-bottom: 6px;
+    gap: 8px;
   }
   
   .piclet-name {
     font-weight: 600;
     font-size: 14px;
     color: #1a1a1a;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   
-  .level-badge {
-    background: rgba(142, 142, 147, 0.3);
-    padding: 2px 6px;
-    border-radius: 12px;
+  .level-text {
     font-size: 11px;
-    font-weight: 700;
-    color: #333;
+    font-weight: 600;
+    color: #666;
+    flex-shrink: 0;
   }
   
   /* Stat Rows */
   .stat-row {
     display: flex;
     align-items: center;
-    gap: 8px;
-    margin-bottom: 4px;
-    position: relative;
-    z-index: 2;
+    gap: 6px;
+    margin-bottom: 3px;
   }
   
   .stat-row:last-child {
@@ -144,23 +160,23 @@
   }
   
   .stat-label {
-    font-size: 10px;
+    font-size: 9px;
     font-weight: 600;
     color: #666;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
-    width: 18px;
+    letter-spacing: 0.3px;
+    width: 16px;
     flex-shrink: 0;
   }
   
   /* HP Bar */
   .hp-bar {
-    width: 120px;
-    height: 8px;
+    height: 6px;
     background: #e0e0e0;
-    border-radius: 4px;
+    border-radius: 3px;
     overflow: hidden;
     flex: 1;
+    min-width: 80px;
   }
   
   .hp-fill {
@@ -170,12 +186,12 @@
   
   /* XP Bar */
   .xp-bar {
-    width: 120px;
-    height: 6px;
+    height: 5px;
     background: #e0e0e0;
-    border-radius: 3px;
+    border-radius: 2.5px;
     overflow: hidden;
     flex: 1;
+    min-width: 80px;
   }
   
   .xp-fill {
@@ -208,14 +224,24 @@
     .piclet-info {
       min-width: 140px;
       padding: 8px;
+      gap: 8px;
+    }
+    
+    .type-logo {
+      width: 28px;
+      height: 28px;
     }
     
     .piclet-name {
       font-size: 12px;
     }
     
+    .level-text {
+      font-size: 10px;
+    }
+    
     .hp-bar, .xp-bar {
-      width: 100px;
+      min-width: 60px;
     }
   }
 </style>

src/lib/components/Pages/Battle.svelte

@@ -387,6 +387,11 @@
       return;
     }
     
+    // Update display immediately before processing the turn
+    currentPlayerPiclet = piclet;
+    playerHpPercentage = piclet.currentHp / piclet.maxHp;
+    currentMessage = `Go, ${piclet.nickname}!`;
+    
     const switchAction: SwitchAction = {
       type: 'switch',
       piclet: 'player',
@@ -409,12 +414,26 @@
         moveIndex: enemyMoveIndex
       };
       
-      // Get log entries before action to track new messages
-      const logBefore = battleEngine.getLog();
-      
-      // Execute the turn - switching vs enemy move
-      battleEngine.executeActions(switchAction, enemyAction);
-      battleState = battleEngine.getState();
+      // Allow time for the visual switch to be seen before processing the turn
+      setTimeout(() => {
+        // Get log entries before action to track new messages
+        const logBefore = battleEngine.getLog();
+        
+        // Execute the turn - switching vs enemy move
+        battleEngine.executeActions(switchAction, enemyAction);
+        battleState = battleEngine.getState();
+        
+        processAfterSwitchTurn(logBefore);
+      }, 1000); // 1 second delay to show the switch visually
+    } catch (error) {
+      console.error('Battle engine error:', error);
+      currentMessage = 'Unable to switch Piclets!';
+      processingTurn = false;
+    }
+  }
+  
+  function processAfterSwitchTurn(logBefore: string[]) {
+    try {
       
       // Get only the new log entries from this turn
       const logAfter = battleEngine.getLog();