xp show

src/lib/components/Battle/PicletInfo.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { PicletInstance } from '$lib/db/schema';
-  import { getXpProgress, getXpForNextLevel } from '$lib/services/levelingService';
+  import { getXpProgress, getXpTowardsNextLevel } from '$lib/services/levelingService';
   
   export let piclet: PicletInstance;
   export let hpPercentage: number;
@@ -9,7 +9,7 @@
   
   // Calculate real XP percentage using levelingService
   $: realXpPercentage = isPlayer ? getXpProgress(piclet.xp, piclet.level, piclet.tier) : 0;
-  $: nextLevelXp = isPlayer ? getXpForNextLevel(piclet.level, piclet.tier) : 0;
+  $: xpTowardsNext = isPlayer ? getXpTowardsNextLevel(piclet.xp, piclet.level, piclet.tier) : { current: 0, needed: 0, percentage: 0 };
   
   $: hpColor = hpPercentage > 0.5 ? '#4caf50' : hpPercentage > 0.2 ? '#ffc107' : '#f44336';
   $: displayHp = Math.ceil(piclet.currentHp);
@@ -55,20 +55,10 @@
       <div class="xp-bar">
         <div 
           class="xp-fill" 
-          style="width: {realXpPercentage}%"
+          style="width: {xpTowardsNext.percentage}%"
         ></div>
       </div>
       
-      <!-- XP Progress Text (Player only) -->
-      {#if piclet.level < 100}
-        <div class="xp-text">
-          <span class="xp-progress">{Math.floor(realXpPercentage)}% to next level</span>
-        </div>
-      {:else}
-        <div class="xp-text">
-          <span class="xp-progress">MAX LEVEL</span>
-        </div>
-      {/if}
     {/if}
   </div>
   
@@ -182,7 +172,7 @@
   .xp-fill {
     height: 100%;
     background: #2196f3;
-    transition: width 0.8s ease;
+    transition: width 1.2s ease-out;
   }
   
   /* XP Text */
@@ -193,6 +183,7 @@
   
   .xp-progress {
     font-weight: 500;
+    transition: all 0.3s ease;
   }
   
   /* Triangle Pointer */

src/lib/components/Pages/Battle.svelte

@@ -365,52 +365,53 @@
       // Calculate XP gained from defeating the enemy
       const xpGained = calculateBattleXp(currentEnemyPiclet, 1);
       
-      // Apply XP to player's Piclet
-      const updatedPlayerPiclet = {
-        ...currentPlayerPiclet,
-        xp: currentPlayerPiclet.xp + xpGained
-      };
-      
-      // Process any level ups
-      const { newInstance, levelUpInfo } = processAllLevelUps(updatedPlayerPiclet);
-      
-      // Save updated Piclet to database
-      if (newInstance.id) {
-        await db.picletInstances.update(newInstance.id, newInstance);
-      }
-      
-      // Update local state
-      currentPlayerPiclet = newInstance;
-      
-      // Prepare battle results for display
-      battleResults = {
-        victory: true,
-        xpGained,
-        levelUps: levelUpInfo,
-        newLevel: newInstance.level
-      };
-      
-      // Show battle results screen
-      if (xpGained > 0 || levelUpInfo.length > 0) {
-        battleResultsVisible = true;
+      if (xpGained > 0) {
+        // Animate XP gain by updating UI first
+        const updatedPlayerPiclet = {
+          ...currentPlayerPiclet,
+          xp: currentPlayerPiclet.xp + xpGained
+        };
+        currentPlayerPiclet = updatedPlayerPiclet;
         
-        // Auto-dismiss after showing results
-        setTimeout(() => {
-          battleResultsVisible = false;
+        // Wait a moment for XP bar animation
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        
+        // Process any level ups
+        const { newInstance, levelUpInfo } = processAllLevelUps(updatedPlayerPiclet);
+        
+        // Save updated Piclet to database
+        if (newInstance.id) {
+          await db.picletInstances.update(newInstance.id, newInstance);
+        }
+        
+        // Update local state with final leveled instance
+        currentPlayerPiclet = newInstance;
+        
+        // Show level up results if any occurred
+        if (levelUpInfo.length > 0) {
+          battleResults = {
+            victory: true,
+            xpGained,
+            levelUps: levelUpInfo,
+            newLevel: newInstance.level
+          };
+          
+          battleResultsVisible = true;
+          
+          // Auto-dismiss after showing level up
+          setTimeout(() => {
+            battleResultsVisible = false;
+            onBattleEnd(true);
+          }, 4000);
+        } else {
+          // No level up, just end battle
           onBattleEnd(true);
-        }, levelUpInfo.length > 0 ? 4000 : 2500);
+        }
       } else {
         onBattleEnd(true);
       }
     } else {
       // Player lost - no XP gained
-      battleResults = {
-        victory: false,
-        xpGained: 0,
-        levelUps: [],
-        newLevel: currentPlayerPiclet.level
-      };
-      
       onBattleEnd(false);
     }
   }
@@ -464,11 +465,6 @@
       <div class="battle-results-card">
         <h2>{battleResults.victory ? 'Victory!' : 'Defeat!'}</h2>
         
-        {#if battleResults.victory && battleResults.xpGained > 0}
-          <div class="xp-gain">
-            <p><strong>{currentPlayerPiclet.nickname}</strong> gained <strong>{battleResults.xpGained} XP</strong>!</p>
-          </div>
-        {/if}
         
         {#if battleResults.levelUps.length > 0}
           {#each battleResults.levelUps as levelUp}
@@ -592,19 +588,6 @@
     color: #1a1a1a;
   }
   
-  .xp-gain {
-    background: #e3f2fd;
-    border-radius: 8px;
-    padding: 1rem;
-    margin: 1rem 0;
-    border: 2px solid #2196f3;
-  }
-  
-  .xp-gain p {
-    margin: 0;
-    color: #1565c0;
-    font-size: 1.1rem;
-  }
   
   .level-up {
     background: linear-gradient(135deg, #fff3e0 0%, #ffcc02 100%);

src/lib/components/Piclets/PicletDetail.svelte

@@ -8,7 +8,7 @@
   import AbilityDisplay from './AbilityDisplay.svelte';
   import MoveDisplay from './MoveDisplay.svelte';
   import { picletInstanceToBattleDefinition } from '$lib/utils/battleConversion';
-  import { recalculatePicletStats, getXpProgress, getXpForNextLevel } from '$lib/services/levelingService';
+  import { recalculatePicletStats, getXpProgress, getXpTowardsNextLevel } from '$lib/services/levelingService';
   
   interface Props {
     instance: PicletInstance;
@@ -28,7 +28,7 @@
   
   // XP and level calculations
   const xpProgress = $derived(getXpProgress(updatedInstance.xp, updatedInstance.level, updatedInstance.tier));
-  const nextLevelXp = $derived(getXpForNextLevel(updatedInstance.level, updatedInstance.tier));
+  const xpTowardsNext = $derived(getXpTowardsNextLevel(updatedInstance.xp, updatedInstance.level, updatedInstance.tier));
   
   // Type-based styling
   const typeData = $derived(TYPE_DATA[instance.primaryType]);
@@ -136,7 +136,7 @@
         <div class="level-info">
           <span class="level-label">Level {updatedInstance.level}</span>
           {#if updatedInstance.level < 100}
-            <span class="xp-label">{Math.floor(xpProgress)}% to next level</span>
+            <span class="xp-label">{xpTowardsNext.current}/{xpTowardsNext.needed} to next level</span>
           {:else}
             <span class="xp-label">MAX LEVEL</span>
           {/if}
@@ -144,7 +144,7 @@
         
         {#if updatedInstance.level < 100}
           <div class="xp-progress-bar">
-            <div class="xp-progress-fill" style="width: {xpProgress}%"></div>
+            <div class="xp-progress-fill" style="width: {xpTowardsNext.percentage}%"></div>
           </div>
         {/if}
         

src/lib/services/levelingService.ts

@@ -172,6 +172,31 @@ export function getXpProgress(currentXp: number, currentLevel: number, tier: str
   return Math.min(100, Math.max(0, (xpIntoLevel / xpNeededForLevel) * 100));
 }
 
+/**
+ * Get current XP towards next level in X/Y format
+ */
+export function getXpTowardsNextLevel(currentXp: number, currentLevel: number, tier: string = 'medium'): {
+  current: number;
+  needed: number;
+  percentage: number;
+} {
+  if (currentLevel >= 100) {
+    return { current: 0, needed: 0, percentage: 100 };
+  }
+  
+  const currentLevelXp = getXpForLevel(currentLevel, tier);
+  const nextLevelXp = getXpForLevel(currentLevel + 1, tier);
+  const xpIntoLevel = Math.max(0, currentXp - currentLevelXp);
+  const xpNeededForLevel = nextLevelXp - currentLevelXp;
+  const percentage = Math.min(100, Math.max(0, (xpIntoLevel / xpNeededForLevel) * 100));
+  
+  return {
+    current: xpIntoLevel,
+    needed: xpNeededForLevel,
+    percentage
+  };
+}
+
 /**
  * Recalculate all stats for a Piclet based on current level and nature
  */