LEVELS

src/lib/battle-engine/BattleEngine.ts

@@ -61,8 +61,8 @@ export class BattleEngine {
 
   private initializeRosterStates(roster: PicletDefinition[], level: number): Array<{ currentHp: number; maxHp: number; fainted: boolean; moves: Array<{move: Move; currentPP: number}> }> {
     return roster.map(piclet => {
-      const statMultiplier = 1 + (level - 50) * 0.02;
-      const hp = Math.floor(piclet.baseStats.hp * statMultiplier);
+      // Use pre-calculated HP from definition (already includes level scaling)
+      const hp = piclet.baseStats.hp;
       return {
         currentHp: hp,
         maxHp: hp,
@@ -76,12 +76,12 @@ export class BattleEngine {
   }
 
   private createBattlePiclet(definition: PicletDefinition, level: number): BattlePiclet {
-    const statMultiplier = 1 + (level - 50) * 0.02; // 2% per level above/below 50
-    
+    // Battle engine now uses pre-calculated stats from levelingService
+    // No level scaling needed here - stats already include level and nature effects
     const hp = definition.baseStats.hp;
-    const attack = Math.floor(definition.baseStats.attack * statMultiplier);
-    const defense = Math.floor(definition.baseStats.defense * statMultiplier);
-    const speed = Math.floor(definition.baseStats.speed * statMultiplier);
+    const attack = definition.baseStats.attack;
+    const defense = definition.baseStats.defense;
+    const speed = definition.baseStats.speed;
 
     const piclet: BattlePiclet = {
       definition,

src/lib/components/Battle/PicletInfo.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
   import type { PicletInstance } from '$lib/db/schema';
+  import { getXpProgress, getXpForNextLevel } from '$lib/services/levelingService';
   
   export let piclet: PicletInstance;
   export let hpPercentage: number;
-  export let xpPercentage: number = 0;
+  export let xpPercentage: number = 0; // Legacy prop - will be overridden for players
   export let isPlayer: boolean;
   
+  // Calculate real XP percentage using levelingService
+  $: realXpPercentage = isPlayer ? getXpProgress(piclet.xp, piclet.level) : 0;
+  $: nextLevelXp = isPlayer ? getXpForNextLevel(piclet.level) : 0;
+  
   $: hpColor = hpPercentage > 0.5 ? '#4caf50' : hpPercentage > 0.2 ? '#ffc107' : '#f44336';
   $: displayHp = Math.ceil(piclet.currentHp);
   
@@ -50,9 +55,20 @@
       <div class="xp-bar">
         <div 
           class="xp-fill" 
-          style="width: {xpPercentage}%"
+          style="width: {realXpPercentage}%"
         ></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>
   
@@ -160,12 +176,23 @@
     background: #e0e0e0;
     border-radius: 2px;
     overflow: hidden;
+    margin-bottom: 2px;
   }
   
   .xp-fill {
     height: 100%;
     background: #2196f3;
-    transition: width 0.5s ease;
+    transition: width 0.8s ease;
+  }
+  
+  /* XP Text */
+  .xp-text {
+    font-size: 10px;
+    color: #666;
+  }
+  
+  .xp-progress {
+    font-weight: 500;
   }
   
   /* Triangle Pointer */

src/lib/components/Pages/Battle.svelte

@@ -7,6 +7,8 @@
   import { BattleEngine } from '$lib/battle-engine/BattleEngine';
   import type { BattleState, MoveAction } from '$lib/battle-engine/types';
   import { picletInstanceToBattleDefinition, battlePicletToInstance, stripBattlePrefix } from '$lib/utils/battleConversion';
+  import { calculateBattleXp, processAllLevelUps, getXpProgress } from '$lib/services/levelingService';
+  import { db } from '$lib/db/index';
   import { getEffectivenessText, getEffectivenessColor } from '$lib/types/picletTypes';
   
   export let playerPiclet: PicletInstance;
@@ -41,6 +43,15 @@
   let playerFaint = false;
   let enemyFaint = false;
   
+  // Battle results state
+  let battleResultsVisible = false;
+  let battleResults = {
+    victory: false,
+    xpGained: 0,
+    levelUps: [],
+    newLevel: 0
+  };
+  
   
   onMount(() => {
     // Initialize battle engine with converted piclet definitions
@@ -163,8 +174,10 @@
             ? `${currentEnemyPiclet.nickname} fainted! You won!`
             : `${currentPlayerPiclet.nickname} fainted! You lost!`;
           currentMessage = winMessage;
-          setTimeout(() => {
-            onBattleEnd(battleState.winner === 'player');
+          
+          // Process battle results with XP and level ups
+          setTimeout(async () => {
+            await handleBattleResults(battleState.winner === 'player');
           }, 2000);
         } else {
           setTimeout(() => {
@@ -346,6 +359,61 @@
   function handleBack() {
     battlePhase = 'main';
   }
+  
+  async function handleBattleResults(playerWon: boolean) {
+    if (playerWon) {
+      // 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;
+        
+        // Auto-dismiss after showing results
+        setTimeout(() => {
+          battleResultsVisible = false;
+          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);
+    }
+  }
 </script>
 
 <div class="battle-page" transition:fade={{ duration: 300 }}>
@@ -389,6 +457,45 @@
       onBack={handleBack}
     />
   </div>
+  
+  <!-- Battle Results Overlay -->
+  {#if battleResultsVisible}
+    <div class="battle-results-overlay" transition:fade={{ duration: 300 }}>
+      <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}
+            <div class="level-up" transition:fade={{ duration: 500 }}>
+              <h3>🎉 Level Up! 🎉</h3>
+              <p><strong>{currentPlayerPiclet.nickname}</strong> grew to level <strong>{levelUp.newLevel}</strong>!</p>
+              
+              <div class="stat-changes">
+                {#if levelUp.statChanges.hp > 0}
+                  <div class="stat-change">HP +{levelUp.statChanges.hp}</div>
+                {/if}
+                {#if levelUp.statChanges.attack > 0}
+                  <div class="stat-change">Attack +{levelUp.statChanges.attack}</div>
+                {/if}
+                {#if levelUp.statChanges.defense > 0}
+                  <div class="stat-change">Defense +{levelUp.statChanges.defense}</div>
+                {/if}
+                {#if levelUp.statChanges.speed > 0}
+                  <div class="stat-change">Speed +{levelUp.statChanges.speed}</div>
+                {/if}
+              </div>
+            </div>
+          {/each}
+        {/if}
+      </div>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -456,4 +563,99 @@
     position: relative;
     background: #f8f9fa;
   }
+  
+  /* Battle Results Overlay */
+  .battle-results-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+  }
+  
+  .battle-results-card {
+    background: white;
+    border-radius: 16px;
+    padding: 2rem;
+    max-width: 400px;
+    width: 90%;
+    text-align: center;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  }
+  
+  .battle-results-card h2 {
+    margin: 0 0 1rem 0;
+    font-size: 1.8rem;
+    font-weight: 700;
+    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%);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin: 1rem 0;
+    border: 3px solid #ff6f00;
+    animation: levelUpPulse 0.6s ease-in-out;
+  }
+  
+  .level-up h3 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.4rem;
+    color: #e65100;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+  }
+  
+  .level-up p {
+    margin: 0 0 1rem 0;
+    font-size: 1.2rem;
+    color: #bf360c;
+  }
+  
+  .stat-changes {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+  }
+  
+  .stat-change {
+    background: rgba(76, 175, 80, 0.2);
+    border: 1px solid #4caf50;
+    border-radius: 20px;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #2e7d32;
+  }
+  
+  @keyframes levelUpPulse {
+    0% {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
 </style>

src/lib/services/levelingService.ts

@@ -0,0 +1,274 @@
+/**
+ * Pokemon-style Leveling and Stat Calculation Service
+ * Implements accurate Pokemon stat formulas based on pokemon_stat_calculation.md
+ */
+
+import type { PicletInstance } from '$lib/db/schema';
+
+// Pokemon nature effects: [boosted_stat, lowered_stat] or [null, null] for neutral
+export const NATURES = {
+  'Hardy': [null, null],           // Neutral
+  'Lonely': ['attack', 'defense'],
+  'Brave': ['attack', 'speed'],
+  'Adamant': ['attack', 'sp_attack'],
+  'Naughty': ['attack', 'sp_defense'],
+  'Bold': ['defense', 'attack'],
+  'Docile': [null, null],          // Neutral
+  'Relaxed': ['defense', 'speed'],
+  'Impish': ['defense', 'sp_attack'],
+  'Lax': ['defense', 'sp_defense'],
+  'Timid': ['speed', 'attack'],
+  'Hasty': ['speed', 'defense'],
+  'Serious': [null, null],         // Neutral
+  'Jolly': ['speed', 'sp_attack'],
+  'Naive': ['speed', 'sp_defense'],
+  'Modest': ['sp_attack', 'attack'],
+  'Mild': ['sp_attack', 'defense'],
+  'Quiet': ['sp_attack', 'speed'],
+  'Bashful': [null, null],         // Neutral
+  'Rash': ['sp_attack', 'sp_defense'],
+  'Calm': ['sp_defense', 'attack'],
+  'Gentle': ['sp_defense', 'defense'],
+  'Sassy': ['sp_defense', 'speed'],
+  'Careful': ['sp_defense', 'sp_attack'],
+  'Quirky': [null, null],          // Neutral
+} as const;
+
+export type NatureName = keyof typeof NATURES;
+
+// Experience requirements for Medium Fast growth rate (level³)
+const XP_REQUIREMENTS: number[] = [];
+for (let level = 1; level <= 100; level++) {
+  XP_REQUIREMENTS[level] = level * level * level;
+}
+
+export interface LevelUpInfo {
+  oldLevel: number;
+  newLevel: number;
+  statChanges: {
+    hp: number;
+    attack: number;
+    defense: number;
+    speed: number;
+  };
+}
+
+export interface NatureModifiers {
+  attack: number;
+  defense: number;
+  speed: number;
+}
+
+/**
+ * Calculate HP using Pokemon's HP formula
+ * Formula: floor((2 * base_hp * level) / 100) + level + 10
+ */
+export function calculateHp(baseHp: number, level: number): number {
+  if (level === 1) {
+    return Math.max(1, Math.floor(baseHp / 10) + 11); // Special case for level 1
+  }
+  
+  return Math.floor((2 * baseHp * level) / 100) + level + 10;
+}
+
+/**
+ * Calculate non-HP stat using Pokemon's standard formula
+ * Formula: floor((floor((2 * base_stat * level) / 100) + 5) * nature_modifier)
+ */
+export function calculateStat(baseStat: number, level: number, natureModifier: number = 1.0): number {
+  if (level === 1) {
+    return Math.max(1, Math.floor(baseStat / 10) + 5); // Special case for level 1
+  }
+  
+  const baseValue = Math.floor((2 * baseStat * level) / 100) + 5;
+  return Math.floor(baseValue * natureModifier);
+}
+
+/**
+ * Get nature modifiers for all stats
+ */
+export function getNatureModifiers(nature: string): NatureModifiers {
+  const natureName = nature as NatureName;
+  const [boosted, lowered] = NATURES[natureName] || NATURES['Hardy'];
+  
+  const modifiers: NatureModifiers = {
+    attack: 1.0,
+    defense: 1.0,  
+    speed: 1.0,
+  };
+  
+  if (boosted) {
+    (modifiers as any)[boosted] = 1.1; // +10%
+  }
+  if (lowered) {
+    (modifiers as any)[lowered] = 0.9; // -10%
+  }
+  
+  return modifiers;
+}
+
+/**
+ * Get XP required to reach a specific level
+ */
+export function getXpForLevel(level: number): number {
+  if (level < 1 || level > 100) {
+    throw new Error('Level must be between 1 and 100');
+  }
+  return XP_REQUIREMENTS[level];
+}
+
+/**
+ * Get XP required for next level
+ */
+export function getXpForNextLevel(currentLevel: number): number {
+  if (currentLevel >= 100) return 0; // Max level
+  return getXpForLevel(currentLevel + 1);
+}
+
+/**
+ * Calculate XP progress percentage for current level
+ */
+export function getXpProgress(currentXp: number, currentLevel: number): number {
+  if (currentLevel >= 100) return 100;
+  
+  const currentLevelXp = getXpForLevel(currentLevel);
+  const nextLevelXp = getXpForLevel(currentLevel + 1);
+  const xpIntoLevel = currentXp - currentLevelXp;
+  const xpNeededForLevel = nextLevelXp - currentLevelXp;
+  
+  return Math.min(100, Math.max(0, (xpIntoLevel / xpNeededForLevel) * 100));
+}
+
+/**
+ * Recalculate all stats for a Piclet based on current level and nature
+ */
+export function recalculatePicletStats(instance: PicletInstance): PicletInstance {
+  const natureModifiers = getNatureModifiers(instance.nature);
+  
+  // Calculate new stats
+  const newMaxHp = calculateHp(instance.baseHp, instance.level);
+  const newAttack = calculateStat(instance.baseAttack, instance.level, natureModifiers.attack);
+  const newDefense = calculateStat(instance.baseDefense, instance.level, natureModifiers.defense);
+  const newSpeed = calculateStat(instance.baseSpeed, instance.level, natureModifiers.speed);
+  
+  // Field stats are 80% of main stats (existing logic)
+  const newFieldAttack = Math.floor(newAttack * 0.8);
+  const newFieldDefense = Math.floor(newDefense * 0.8);
+  
+  // Maintain current HP ratio when stats change
+  const hpRatio = instance.maxHp > 0 ? instance.currentHp / instance.maxHp : 1;
+  const newCurrentHp = Math.ceil(newMaxHp * hpRatio);
+  
+  return {
+    ...instance,
+    maxHp: newMaxHp,
+    currentHp: newCurrentHp,
+    attack: newAttack,
+    defense: newDefense,
+    speed: newSpeed,
+    fieldAttack: newFieldAttack,
+    fieldDefense: newFieldDefense
+  };
+}
+
+/**
+ * Process potential level up and return results
+ */
+export function processLevelUp(instance: PicletInstance): {
+  newInstance: PicletInstance;
+  levelUpInfo: LevelUpInfo | null;
+} {
+  const requiredXp = getXpForNextLevel(instance.level);
+  
+  // Check if level up is possible
+  if (instance.level >= 100 || instance.xp < requiredXp) {
+    return { newInstance: instance, levelUpInfo: null };
+  }
+  
+  // Calculate old stats for comparison
+  const oldStats = {
+    hp: instance.maxHp,
+    attack: instance.attack,
+    defense: instance.defense,
+    speed: instance.speed
+  };
+  
+  // Level up the Piclet
+  const leveledUpInstance = {
+    ...instance,
+    level: instance.level + 1
+  };
+  
+  // Recalculate stats with new level
+  const newInstance = recalculatePicletStats(leveledUpInstance);
+  
+  // Heal to full HP on level up (Pokemon tradition)
+  const finalInstance = {
+    ...newInstance,
+    currentHp: newInstance.maxHp
+  };
+  
+  // Calculate stat changes
+  const statChanges = {
+    hp: finalInstance.maxHp - oldStats.hp,
+    attack: finalInstance.attack - oldStats.attack,
+    defense: finalInstance.defense - oldStats.defense,
+    speed: finalInstance.speed - oldStats.speed
+  };
+  
+  const levelUpInfo: LevelUpInfo = {
+    oldLevel: instance.level,
+    newLevel: finalInstance.level,
+    statChanges
+  };
+  
+  return { newInstance: finalInstance, levelUpInfo };
+}
+
+/**
+ * Calculate XP gained from defeating a Piclet in battle
+ * Based on Pokemon formula: (baseExpYield * level) / 7
+ */
+export function calculateBattleXp(defeatedPiclet: PicletInstance, participantCount: number = 1): number {
+  // Use BST as basis for exp yield (common Pokemon approach)
+  const bst = defeatedPiclet.baseHp + defeatedPiclet.baseAttack + defeatedPiclet.baseDefense + 
+             defeatedPiclet.baseSpeed + defeatedPiclet.baseFieldAttack + defeatedPiclet.baseFieldDefense;
+  
+  // Convert BST to exp yield (roughly BST/4, minimum 50)
+  const baseExpYield = Math.max(50, Math.floor(bst / 4));
+  
+  // Pokemon formula
+  const baseXp = Math.floor((baseExpYield * defeatedPiclet.level) / 7);
+  
+  // Divide among participants
+  return Math.max(1, Math.floor(baseXp / participantCount));
+}
+
+/**
+ * Check if a level up should occur and process it recursively
+ * (Handles multiple level ups from large XP gains)
+ */
+export function processAllLevelUps(instance: PicletInstance): {
+  newInstance: PicletInstance;
+  levelUpInfo: LevelUpInfo[];
+} {
+  const levelUps: LevelUpInfo[] = [];
+  let currentInstance = instance;
+  
+  // Process level ups until no more are possible
+  while (currentInstance.level < 100) {
+    const result = processLevelUp(currentInstance);
+    
+    if (result.levelUpInfo) {
+      levelUps.push(result.levelUpInfo);
+      currentInstance = result.newInstance;
+    } else {
+      break;
+    }
+  }
+  
+  return {
+    newInstance: currentInstance,
+    levelUpInfo: levelUps
+  };
+}

src/lib/utils/battleConversion.ts

@@ -6,16 +6,22 @@ import type { PicletInstance, BattleMove } from '$lib/db/schema';
 import type { PicletDefinition, Move, BaseStats, SpecialAbility } from '$lib/battle-engine/types';
 import type { PicletStats, BattleEffect, AbilityTrigger } from '$lib/types';
 import { PicletType, AttackType } from '$lib/types/picletTypes';
+import { recalculatePicletStats } from '$lib/services/levelingService';
 
 /**
  * Convert PicletInstance to PicletDefinition for battle engine use
+ * Uses levelingService to ensure stats are properly calculated for current level
  */
 export function picletInstanceToBattleDefinition(instance: PicletInstance): PicletDefinition {
+  // First ensure stats are up-to-date for current level and nature
+  const updatedInstance = recalculatePicletStats(instance);
+  
+  // Use the calculated stats directly (no need for complex reverse formulas)
   const baseStats: BaseStats = {
-    hp: instance.maxHp,
-    attack: Math.floor((instance.baseAttack - 30) / 1.5), 
-    defense: Math.floor((instance.baseDefense - 30) / 1.5),
-    speed: Math.floor((instance.baseSpeed - 30) / 1.5)
+    hp: updatedInstance.maxHp,        // Pokemon-calculated HP
+    attack: updatedInstance.attack,   // Includes level scaling and nature modifiers
+    defense: updatedInstance.defense, // Includes level scaling and nature modifiers  
+    speed: updatedInstance.speed      // Includes level scaling and nature modifiers
   };
 
   // Convert simple moves to full battle moves