xp

src/lib/components/Battle/PicletInfo.svelte

@@ -8,8 +8,8 @@
   export let isPlayer: boolean;
   
   // Calculate real XP percentage using levelingService
-  $: realXpPercentage = isPlayer ? getXpProgress(piclet.xp, piclet.level) : 0;
-  $: nextLevelXp = isPlayer ? getXpForNextLevel(piclet.level) : 0;
+  $: realXpPercentage = isPlayer ? getXpProgress(piclet.xp, piclet.level, piclet.tier) : 0;
+  $: nextLevelXp = isPlayer ? getXpForNextLevel(piclet.level, piclet.tier) : 0;
   
   $: hpColor = hpPercentage > 0.5 ? '#4caf50' : hpPercentage > 0.2 ? '#ffc107' : '#f44336';
   $: displayHp = Math.ceil(piclet.currentHp);

src/lib/components/Pages/Battle.svelte

@@ -7,7 +7,7 @@
   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 { calculateBattleXp, processAllLevelUps } from '$lib/services/levelingService';
   import { db } from '$lib/db/index';
   import { getEffectivenessText, getEffectivenessColor } from '$lib/types/picletTypes';
   

src/lib/components/Piclets/PicletDetail.svelte

@@ -8,6 +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';
   
   interface Props {
     instance: PicletInstance;
@@ -19,8 +20,15 @@
   let selectedTab = $state<'about' | 'abilities'>('about');
   let isSharing = $state(false);
   
+  // Ensure stats are up-to-date with current level and nature
+  const updatedInstance = $derived(recalculatePicletStats(instance));
+  
   // Convert to battle definition to get enhanced ability data
-  const battleDefinition = $derived(picletInstanceToBattleDefinition(instance));
+  const battleDefinition = $derived(picletInstanceToBattleDefinition(updatedInstance));
+  
+  // XP and level calculations
+  const xpProgress = $derived(getXpProgress(updatedInstance.xp, updatedInstance.level, updatedInstance.tier));
+  const nextLevelXp = $derived(getXpForNextLevel(updatedInstance.level, updatedInstance.tier));
   
   // Type-based styling
   const typeData = $derived(TYPE_DATA[instance.primaryType]);
@@ -93,7 +101,7 @@
                 <path d="M19 12H5m0 0l7 7m-7-7l7-7"></path>
               </svg>
             </button>
-            <h1 class="card-title">{instance.nickname || instance.typeId}</h1>
+            <h1 class="card-title">{updatedInstance.nickname || updatedInstance.typeId}</h1>
             <button 
               class="share-button" 
               onclick={handleShare} 
@@ -114,8 +122,8 @@
           <div class="large-image-section">
             <div class="large-image-container">
               <img 
-                src={instance.imageData || instance.imageUrl} 
-                alt={instance.nickname || instance.typeId}
+                src={updatedInstance.imageData || updatedInstance.imageUrl} 
+                alt={updatedInstance.nickname || updatedInstance.typeId}
                 class="large-piclet-image"
               />
             </div>
@@ -123,6 +131,28 @@
         </div>
       </div>
       
+      <!-- Level and XP Progress -->
+      <div class="level-xp-section">
+        <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>
+          {:else}
+            <span class="xp-label">MAX LEVEL</span>
+          {/if}
+        </div>
+        
+        {#if updatedInstance.level < 100}
+          <div class="xp-progress-bar">
+            <div class="xp-progress-fill" style="width: {xpProgress}%"></div>
+          </div>
+        {/if}
+        
+        <div class="hp-info">
+          <span class="hp-label">HP: {updatedInstance.currentHp}/{updatedInstance.maxHp}</span>
+        </div>
+      </div>
+      
       <!-- Tab Bar -->
       <div class="tab-bar" style="--type-color: {typeColor}">
         <button 
@@ -153,23 +183,23 @@
             <div class="stats-list">
               <div class="stat-row">
                 <span>Attack</span>
-                <span class="stat-value">{instance.attack}</span>
+                <span class="stat-value">{updatedInstance.attack}</span>
               </div>
               <div class="stat-row">
                 <span>Defense</span>
-                <span class="stat-value">{instance.defense}</span>
+                <span class="stat-value">{updatedInstance.defense}</span>
               </div>
               <div class="stat-row">
                 <span>Field Attack</span>
-                <span class="stat-value">{instance.fieldAttack}</span>
+                <span class="stat-value">{updatedInstance.fieldAttack}</span>
               </div>
               <div class="stat-row">
                 <span>Field Defense</span>
-                <span class="stat-value">{instance.fieldDefense}</span>
+                <span class="stat-value">{updatedInstance.fieldDefense}</span>
               </div>
               <div class="stat-row">
                 <span>Speed</span>
-                <span class="stat-value">{instance.speed}</span>
+                <span class="stat-value">{updatedInstance.speed}</span>
               </div>
             </div>
             
@@ -178,11 +208,11 @@
             <div class="stat-summary">
               <div class="summary-item">
                 <span class="summary-label">BST</span>
-                <span class="summary-value">{instance.bst}</span>
+                <span class="summary-value">{updatedInstance.bst}</span>
               </div>
               <div class="summary-item">
                 <span class="summary-label">Tier</span>
-                <span class="summary-value">{instance.tier.toUpperCase()}</span>
+                <span class="summary-value">{updatedInstance.tier.toUpperCase()}</span>
               </div>
             </div>
           </div>
@@ -198,7 +228,7 @@
             
             <h3 class="section-heading">Moves</h3>
             <div class="moves-list">
-              {#each instance.moves as move, index}
+              {#each updatedInstance.moves as move, index}
                 <MoveDisplay 
                   {move}
                   expanded={true}
@@ -496,6 +526,65 @@
     gap: 4px;
   }
   
+  /* Level and XP Section */
+  .level-xp-section {
+    background: white;
+    margin: 0 16px 16px;
+    border-radius: 12px;
+    padding: 16px;
+    border: 0.5px solid #c6c6c8;
+  }
+  
+  .level-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+  
+  .level-label {
+    font-size: 18px;
+    font-weight: 700;
+    color: #1a1a1a;
+  }
+  
+  .xp-label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #8e8e93;
+  }
+  
+  .xp-progress-bar {
+    width: 100%;
+    height: 8px;
+    background: #e5e5ea;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 12px;
+  }
+  
+  .xp-progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #2196f3 0%, #21cbf3 100%);
+    border-radius: 4px;
+    transition: width 0.8s ease;
+  }
+  
+  .hp-info {
+    display: flex;
+    justify-content: center;
+  }
+  
+  .hp-label {
+    font-size: 14px;
+    font-weight: 600;
+    color: #495057;
+    background: rgba(76, 175, 80, 0.1);
+    border: 1px solid #4caf50;
+    border-radius: 16px;
+    padding: 4px 12px;
+  }
+
   @media (min-width: 768px) {
     .detail-page {
       position: relative;

src/lib/services/levelingService.ts

@@ -36,10 +36,31 @@ export const NATURES = {
 
 export type NatureName = keyof typeof NATURES;
 
-// Experience requirements for Medium Fast growth rate (level³)
-const XP_REQUIREMENTS: number[] = [];
+// Growth rate multipliers for different tiers
+const TIER_XP_MULTIPLIERS = {
+  'low': 0.8,        // 20% less XP required (faster leveling)
+  'medium': 1.0,     // Base XP requirements
+  'high': 1.4,       // 40% more XP required (slower leveling)
+  'legendary': 1.8   // 80% more XP required (much slower leveling)
+} as const;
+
+type TierType = keyof typeof TIER_XP_MULTIPLIERS;
+
+/**
+ * Convert string tier to TierType, defaulting to 'medium' for unknown values
+ */
+function normalizeTier(tier: string): TierType {
+  if (tier in TIER_XP_MULTIPLIERS) {
+    return tier as TierType;
+  }
+  return 'medium'; // Default fallback
+}
+
+// Base experience requirements for Medium Fast growth rate (level³)
+// Other tiers will use multipliers of this base
+const BASE_XP_REQUIREMENTS: number[] = [];
 for (let level = 1; level <= 100; level++) {
-  XP_REQUIREMENTS[level] = level * level * level;
+  BASE_XP_REQUIREMENTS[level] = level * level * level;
 }
 
 export interface LevelUpInfo {
@@ -110,29 +131,41 @@ export function getNatureModifiers(nature: string): NatureModifiers {
 /**
  * Get XP required to reach a specific level
  */
-export function getXpForLevel(level: number): number {
+/**
+ * Get XP required for a specific level based on tier
+ */
+export function getXpForLevel(level: number, tier: string = 'medium'): number {
   if (level < 1 || level > 100) {
     throw new Error('Level must be between 1 and 100');
   }
-  return XP_REQUIREMENTS[level];
+  const normalizedTier = normalizeTier(tier);
+  const baseXp = BASE_XP_REQUIREMENTS[level];
+  const multiplier = TIER_XP_MULTIPLIERS[normalizedTier];
+  return Math.floor(baseXp * multiplier);
 }
 
 /**
  * Get XP required for next level
  */
-export function getXpForNextLevel(currentLevel: number): number {
+/**
+ * Get XP required for next level based on tier
+ */
+export function getXpForNextLevel(currentLevel: number, tier: string = 'medium'): number {
   if (currentLevel >= 100) return 0; // Max level
-  return getXpForLevel(currentLevel + 1);
+  return getXpForLevel(currentLevel + 1, tier);
 }
 
 /**
  * Calculate XP progress percentage for current level
  */
-export function getXpProgress(currentXp: number, currentLevel: number): number {
+/**
+ * Get XP progress percentage towards next level based on tier
+ */
+export function getXpProgress(currentXp: number, currentLevel: number, tier: string = 'medium'): number {
   if (currentLevel >= 100) return 100;
   
-  const currentLevelXp = getXpForLevel(currentLevel);
-  const nextLevelXp = getXpForLevel(currentLevel + 1);
+  const currentLevelXp = getXpForLevel(currentLevel, tier);
+  const nextLevelXp = getXpForLevel(currentLevel + 1, tier);
   const xpIntoLevel = currentXp - currentLevelXp;
   const xpNeededForLevel = nextLevelXp - currentLevelXp;
   
@@ -178,7 +211,7 @@ export function processLevelUp(instance: PicletInstance): {
   newInstance: PicletInstance;
   levelUpInfo: LevelUpInfo | null;
 } {
-  const requiredXp = getXpForNextLevel(instance.level);
+  const requiredXp = getXpForNextLevel(instance.level, instance.tier);
   
   // Check if level up is possible
   if (instance.level >= 100 || instance.xp < requiredXp) {