better stats

src/lib/components/Battle/PicletInfo.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { PicletInstance } from '$lib/db/schema';
   import { getXpProgress, getXpTowardsNextLevel } from '$lib/services/levelingService';
+  import { TYPE_DATA } from '$lib/types/picletTypes';
   
   export let piclet: PicletInstance;
   export let hpPercentage: number;
@@ -11,6 +12,11 @@
   $: realXpPercentage = isPlayer ? getXpProgress(piclet.xp, piclet.level, piclet.tier) : 0;
   $: xpTowardsNext = isPlayer ? getXpTowardsNextLevel(piclet.xp, piclet.level, piclet.tier) : { current: 0, needed: 0, percentage: 0 };
   
+  // Type-based styling
+  $: typeData = TYPE_DATA[piclet.primaryType];
+  $: typeColor = typeData.color;
+  $: typeLogoPath = `/classes/${piclet.primaryType}.png`;
+  
   $: hpColor = hpPercentage > 0.5 ? '#4caf50' : hpPercentage > 0.2 ? '#ffc107' : '#f44336';
   $: displayHp = Math.ceil(piclet.currentHp);
   
@@ -23,17 +29,16 @@
     setTimeout(() => hpFlash = false, 300);
     previousHp = displayHp;
   }
-  
-  // Get type emoji (simplified - should map from actual types)
-  const typeEmoji = '🔥'; // Default fire type
 </script>
 
 <div class="piclet-info-wrapper {isPlayer ? 'player-info-wrapper' : 'enemy-info-wrapper'}">
-  <div class="piclet-info">
+  <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="type-emoji">{typeEmoji}</span>
       <span class="level-badge">Lv.{piclet.level}</span>
     </div>
     
@@ -90,25 +95,40 @@
     border-radius: 8px;
     padding: 12px;
     min-width: 160px;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  /* Type Logo Background */
+  .type-logo-background {
+    position: absolute;
+    bottom: 1px;
+    left: 1px;
+    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;
   }
   
   /* Name Row */
   .name-row {
     display: flex;
     align-items: center;
-    gap: 4px;
+    justify-content: space-between;
     margin-bottom: 8px;
+    position: relative;
+    z-index: 2;
   }
   
   .piclet-name {
     font-weight: 600;
     font-size: 14px;
     color: #1a1a1a;
-    flex: 1;
-  }
-  
-  .type-emoji {
-    font-size: 12px;
   }
   
   .level-badge {
@@ -128,6 +148,8 @@
     border-radius: 4px;
     overflow: hidden;
     margin-bottom: 4px;
+    position: relative;
+    z-index: 2;
   }
   
   .hp-fill {
@@ -140,6 +162,8 @@
     font-size: 11px;
     color: #666;
     margin-bottom: 4px;
+    position: relative;
+    z-index: 2;
   }
   
   .hp-values {
@@ -167,6 +191,8 @@
     border-radius: 2px;
     overflow: hidden;
     margin-bottom: 2px;
+    position: relative;
+    z-index: 2;
   }
   
   .xp-fill {
@@ -175,16 +201,6 @@
     transition: width 1.2s ease-out;
   }
   
-  /* XP Text */
-  .xp-text {
-    font-size: 10px;
-    color: #666;
-  }
-  
-  .xp-progress {
-    font-weight: 500;
-    transition: all 0.3s ease;
-  }
   
   /* Triangle Pointer */
   .triangle-pointer {

src/lib/components/Pages/Battle.svelte

@@ -5,7 +5,7 @@
   import BattleField from '../Battle/BattleField.svelte';
   import BattleControls from '../Battle/BattleControls.svelte';
   import { BattleEngine } from '$lib/battle-engine/BattleEngine';
-  import type { BattleState, MoveAction } from '$lib/battle-engine/types';
+  import type { BattleState, MoveAction, SwitchAction } from '$lib/battle-engine/types';
   import { picletInstanceToBattleDefinition, battlePicletToInstance, stripBattlePrefix } from '$lib/utils/battleConversion';
   import { calculateBattleXp, processAllLevelUps } from '$lib/services/levelingService';
   import { db } from '$lib/db/index';
@@ -55,10 +55,26 @@
   
   onMount(() => {
     // Initialize battle engine with converted piclet definitions
-    const playerDefinition = picletInstanceToBattleDefinition(playerPiclet);
+    // Convert full roster for switching support
+    const playerRosterDefinitions = rosterPiclets.map(p => picletInstanceToBattleDefinition(p));
     const enemyDefinition = picletInstanceToBattleDefinition(enemyPiclet);
     
-    battleEngine = new BattleEngine(playerDefinition, enemyDefinition, playerPiclet.level, enemyPiclet.level);
+    // Find the starting player piclet index in the roster
+    const startingPlayerIndex = rosterPiclets.findIndex(p => p.id === playerPiclet.id);
+    
+    // Initialize with full rosters (player roster vs single enemy)
+    battleEngine = new BattleEngine(playerRosterDefinitions, enemyDefinition, playerPiclet.level, enemyPiclet.level);
+    
+    // If starting piclet is not the first in roster, switch to it
+    if (startingPlayerIndex > 0) {
+      const initialSwitchAction: SwitchAction = {
+        type: 'switch',
+        piclet: 'player',
+        newPicletIndex: startingPlayerIndex
+      };
+      battleEngine.executeAction(initialSwitchAction, 'player');
+    }
+    
     battleState = battleEngine.getState();
     
     // Start intro sequence
@@ -175,6 +191,13 @@
             : `${currentPlayerPiclet.nickname} fainted! You lost!`;
           currentMessage = winMessage;
           
+          // Trigger faint animation for the defeated Piclet
+          if (battleState.winner === 'player') {
+            enemyFaint = true;
+          } else {
+            playerFaint = true;
+          }
+          
           // Process battle results with XP and level ups
           setTimeout(async () => {
             await handleBattleResults(battleState.winner === 'player');
@@ -333,27 +356,108 @@
     if (!battleEngine) return;
     
     battlePhase = 'main';
-    currentMessage = `Come back, ${currentPlayerPiclet.nickname}!`;
+    processingTurn = true;
     
-    setTimeout(() => {
-      // Convert the selected piclet to battle definition and switch
-      const newPicletDefinition = picletInstanceToBattleDefinition(piclet);
+    // Find the index of the selected piclet in the roster
+    const picletIndex = rosterPiclets.findIndex(p => p.id === piclet.id);
+    if (picletIndex === -1) {
+      console.error('Selected piclet not found in roster');
+      processingTurn = false;
+      return;
+    }
+    
+    const switchAction: SwitchAction = {
+      type: 'switch',
+      piclet: 'player',
+      newPicletIndex: picletIndex
+    };
+    
+    try {
+      // Choose random enemy move (AI continues to act)
+      const availableEnemyMoves = battleState.opponentPiclet.moves.filter(m => m.currentPP > 0);
+      if (availableEnemyMoves.length === 0) {
+        currentMessage = `${currentEnemyPiclet.nickname} has no moves left!`;
+        processingTurn = false;
+        return;
+      }
+      
+      const randomEnemyMove = availableEnemyMoves[Math.floor(Math.random() * availableEnemyMoves.length)];
+      const enemyMoveIndex = battleState.opponentPiclet.moves.indexOf(randomEnemyMove);
+      const enemyAction: MoveAction = {
+        type: 'move', 
+        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();
+      
+      // Get only the new log entries from this turn
+      const logAfter = battleEngine.getLog();
+      const newLogEntries = logAfter.slice(logBefore.length);
+      const result = { log: newLogEntries };
+      
+      // Show battle messages with timing and visual effects
+      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();
+      } else {
+        finalizeSwitchTurn();
+      }
       
-      try {
-        // TODO: Implement switching in battle engine
-        // For now, just update the UI
-        currentPlayerPiclet = piclet;
-        playerHpPercentage = piclet.currentHp / piclet.maxHp;
-        currentMessage = `Go, ${piclet.nickname}!`;
+      function finalizeSwitchTurn() {
+        // Update UI state from battle engine
+        updateUIFromBattleState();
         
-        setTimeout(() => {
-          currentMessage = `What will ${piclet.nickname} do?`;
-        }, 1500);
-      } catch (error) {
-        console.error('Switch error:', error);
-        currentMessage = 'Unable to switch Piclets!';
+        // Check for battle end
+        if (battleState.winner) {
+          battleEnded = true;
+          const winMessage = battleState.winner === 'player' 
+            ? `${currentEnemyPiclet.nickname} fainted! You won!`
+            : `${currentPlayerPiclet.nickname} fainted! You lost!`;
+          currentMessage = winMessage;
+          
+          // Trigger faint animation for the defeated Piclet
+          if (battleState.winner === 'player') {
+            enemyFaint = true;
+          } else {
+            playerFaint = true;
+          }
+          
+          // Process battle results with XP and level ups
+          setTimeout(async () => {
+            await handleBattleResults(battleState.winner === 'player');
+          }, 2000);
+        } else {
+          setTimeout(() => {
+            currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;
+            processingTurn = false;
+          }, 1000);
+        }
       }
-    }, 1500);
+    } catch (error) {
+      console.error('Switch error:', error);
+      currentMessage = 'Unable to switch Piclets!';
+      processingTurn = false;
+    }
   }
   
   function handleBack() {

src/lib/db/piclets.ts

@@ -46,9 +46,20 @@ export async function monsterToPicletInstance(monster: Monster, level: number =
   const baseFieldAttack = Math.floor(baseAttack * 0.8);
   const baseFieldDefense = Math.floor(baseDefense * 0.8);
   
-  // Calculate current stats based on level
-  const calculateStat = (base: number, level: number) => Math.floor((base * level) / 50 + 5);
-  const calculateHp = (base: number, level: number) => Math.floor((base * level) / 50 + level + 10);
+  // Use Pokemon-accurate stat calculations (matching levelingService)
+  const calculateStat = (base: number, level: number) => {
+    if (level === 1) {
+      return Math.max(1, Math.floor(base / 10) + 5);
+    }
+    return Math.floor((2 * base * level) / 100) + 5;
+  };
+  
+  const calculateHp = (base: number, level: number) => {
+    if (level === 1) {
+      return Math.max(1, Math.floor(base / 10) + 11);
+    }
+    return Math.floor((2 * base * level) / 100) + level + 10;
+  };
   
   const maxHp = calculateHp(baseHp, level);