btl

src/lib/components/Battle/BattleField.svelte

@@ -59,12 +59,15 @@
     />
     
     {#if enemyVisible}
-      <div class="piclet-sprite enemy-sprite" transition:fade={{ duration: 300 }}>
-        <img 
-          src={enemyPiclet.imageUrl} 
-          alt={enemyPiclet.nickname}
-          on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/120x120?text=Piclet'}
-        />
+      <div class="enemy-piclet-container">
+        <div class="piclet-sprite enemy-sprite" transition:fade={{ duration: 300 }}>
+          <img 
+            src={enemyPiclet.imageData || enemyPiclet.imageUrl} 
+            alt={enemyPiclet.nickname}
+            on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/120x120?text=Piclet'}
+          />
+        </div>
+        <div class="battle-platform enemy-platform"></div>
       </div>
     {/if}
   </div>
@@ -72,12 +75,15 @@
   <!-- Player area -->
   <div class="player-area">
     {#if playerVisible}
-      <div class="piclet-sprite player-sprite" transition:fade={{ duration: 300 }}>
-        <img 
-          src={playerPiclet.imageUrl} 
-          alt={playerPiclet.nickname}
-          on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/120x120?text=Piclet'}
-        />
+      <div class="player-piclet-container">
+        <div class="piclet-sprite player-sprite" transition:fade={{ duration: 300 }}>
+          <img 
+            src={playerPiclet.imageData || playerPiclet.imageUrl} 
+            alt={playerPiclet.nickname}
+            on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/120x120?text=Piclet'}
+          />
+        </div>
+        <div class="battle-platform player-platform"></div>
       </div>
     {/if}
     
@@ -91,12 +97,9 @@
 
 <style>
   .battle-field {
-    height: 60vh;
-    min-height: 400px;
+    height: 280px;
     position: relative;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+    background-color: #e8f4f8;
     overflow: hidden;
   }
   
@@ -107,10 +110,11 @@
       45deg,
       transparent,
       transparent 10px,
-      rgba(255, 255, 255, 0.05) 10px,
-      rgba(255, 255, 255, 0.05) 20px
+      rgba(0, 0, 0, 0.02) 10px,
+      rgba(0, 0, 0, 0.02) 20px
     );
     pointer-events: none;
+    z-index: 1;
   }
   
   .trainer-intro {
@@ -172,6 +176,33 @@
     transform: scaleX(-1); /* Mirror player sprite */
   }
   
+  /* Piclet containers with platforms */
+  .enemy-piclet-container,
+  .player-piclet-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .battle-platform {
+    width: 140px;
+    height: 20px;
+    background: #90a4ae;
+    border-radius: 50%;
+    margin-top: -10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    z-index: 2;
+  }
+  
+  .enemy-platform {
+    width: 120px;
+  }
+  
+  .player-platform {
+    width: 140px;
+  }
+  
   @media (max-width: 768px) {
     .battle-field {
       height: 50vh;

src/lib/components/Pages/Battle.svelte

@@ -119,9 +119,9 @@
   }
 </script>
 
-<div class="battle-page">
+<div class="battle-page" transition:fade={{ duration: 300 }}>
   <nav class="battle-nav">
-    <button class="back-button" on:click={() => onBattleEnd('cancelled')}>
+    <button class="back-button" on:click={() => onBattleEnd('cancelled')} style="display: none;">
       ← Back
     </button>
     <h1>{isWildBattle ? 'Wild Battle' : 'Battle'}</h1>
@@ -155,6 +155,9 @@
 
 <style>
   .battle-page {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
     height: 100vh;
     display: flex;
     flex-direction: column;

src/lib/components/Pages/Encounters.svelte

@@ -142,7 +142,6 @@
     try {
       // Get all piclet instances
       const allPiclets = await db.picletInstances.toArray();
-      console.log('All piclets:', allPiclets);
       
       // Filter piclets that have a roster position (0-5)
       const rosterPiclets = allPiclets.filter(p => 
@@ -151,14 +150,12 @@
         p.rosterPosition >= 0 && 
         p.rosterPosition <= 5
       );
-      console.log('Roster piclets:', rosterPiclets);
       
       // Sort by roster position
       rosterPiclets.sort((a, b) => (a.rosterPosition ?? 0) - (b.rosterPosition ?? 0));
       
       // Get healthy piclets
       const healthyPiclets = rosterPiclets.filter(p => p.currentHp > 0);
-      console.log('Healthy piclets:', healthyPiclets);
       
       if (healthyPiclets.length === 0) {
         alert('You need at least one healthy piclet in your roster to battle!');
@@ -167,7 +164,6 @@
       
       // Check if there's at least one piclet in position 0
       const hasPosition0 = rosterPiclets.some(p => p.rosterPosition === 0);
-      console.log('Has position 0:', hasPosition0);
       if (!hasPosition0) {
         alert('You need a piclet in the first roster slot (position 0) to battle!');
         return;
@@ -190,54 +186,111 @@
   async function generateEnemyPiclet(encounter: Encounter): Promise<PicletInstance | null> {
     if (!encounter.picletTypeId || !encounter.enemyLevel) return null;
     
-    // Create a mock enemy piclet instance
+    // Get the discovered monster data for this piclet type
+    const monster = await db.monsters
+      .where('name')
+      .equals(encounter.picletTypeId.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()))
+      .first();
+    
+    if (!monster || !monster.stats) {
+      console.error('Monster not found for typeId:', encounter.picletTypeId);
+      return null;
+    }
+    
+    // Calculate stats based on monster's base stats and encounter level
+    const level = encounter.enemyLevel;
+    const stats = monster.stats;
+    
+    // Calculate base stats from the 0-100 scale
+    const baseHp = Math.floor(stats.HP * 2 + 50);
+    const baseAttack = Math.floor(stats.attack * 1.5 + 30);
+    const baseDefense = Math.floor(stats.defence * 1.5 + 30);
+    const baseSpeed = Math.floor(stats.speed * 1.5 + 30);
+    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);
+    
+    const maxHp = calculateHp(baseHp, level);
+    
+    // Create enemy piclet instance
     const enemyPiclet: PicletInstance = {
       id: -1, // Temporary ID for enemy
       typeId: encounter.picletTypeId,
-      nickname: `Wild Piclet`,
-      primaryTypeString: 'normal',
+      nickname: monster.name,
+      primaryTypeString: 'normal', // Default type
       
-      level: encounter.enemyLevel,
+      level: level,
       xp: 0,
-      currentHp: 20 + (encounter.enemyLevel * 5),
-      maxHp: 20 + (encounter.enemyLevel * 5),
-      attack: 10 + (encounter.enemyLevel * 2),
-      defense: 10 + (encounter.enemyLevel * 2),
-      fieldAttack: 10 + (encounter.enemyLevel * 2),
-      fieldDefense: 10 + (encounter.enemyLevel * 2),
-      speed: 10 + (encounter.enemyLevel * 2),
+      currentHp: maxHp,
+      maxHp: maxHp,
+      attack: calculateStat(baseAttack, level),
+      defense: calculateStat(baseDefense, level),
+      fieldAttack: calculateStat(baseFieldAttack, level),
+      fieldDefense: calculateStat(baseFieldDefense, level),
+      speed: calculateStat(baseSpeed, level),
       
-      baseHp: 20,
-      baseAttack: 10,
-      baseDefense: 10,
-      baseFieldAttack: 10,
-      baseFieldDefense: 10,
-      baseSpeed: 10,
+      baseHp,
+      baseAttack,
+      baseDefense,
+      baseFieldAttack,
+      baseFieldDefense,
+      baseSpeed,
       
       moves: [
         {
-          name: 'Tackle',
+          name: stats.attackActionName,
           type: 'normal',
-          power: 40,
+          power: 50,
+          accuracy: 95,
+          pp: 20,
+          currentPp: 20,
+          description: stats.attackActionDescription
+        },
+        {
+          name: stats.buffActionName,
+          type: 'status',
+          power: 0,
           accuracy: 100,
-          pp: 35,
-          currentPp: 35,
-          description: 'A physical attack'
+          pp: 15,
+          currentPp: 15,
+          description: stats.buffActionDescription
+        },
+        {
+          name: stats.debuffActionName,
+          type: 'status',
+          power: 0,
+          accuracy: 85,
+          pp: 15,
+          currentPp: 15,
+          description: stats.debuffActionDescription
+        },
+        {
+          name: stats.specialActionName,
+          type: 'special',
+          power: 80,
+          accuracy: 90,
+          pp: 5,
+          currentPp: 5,
+          description: stats.specialActionDescription
         }
       ],
       nature: 'hardy',
       
       isInRoster: false,
       caughtAt: new Date(),
-      bst: 60,
-      tier: 'common',
+      bst: baseHp + baseAttack + baseDefense + baseFieldAttack + baseFieldDefense + baseSpeed,
+      tier: stats.rarity > 80 ? 'legendary' : stats.rarity > 60 ? 'rare' : stats.rarity > 40 ? 'uncommon' : 'common',
       role: 'balanced',
-      variance: 1,
+      variance: 0,
       
-      imageUrl: `https://storage.googleapis.com/piclodia/${encounter.picletTypeId}.png`,
-      imageCaption: 'A wild piclet',
-      concept: 'wild',
-      imagePrompt: 'wild piclet'
+      imageUrl: monster.imageUrl,
+      imageData: monster.imageData, // Use the transparent image data
+      imageCaption: monster.imageCaption,
+      concept: monster.concept,
+      imagePrompt: monster.imagePrompt
     };
     
     return enemyPiclet;

src/lib/db/encounterService.ts

@@ -62,7 +62,7 @@ export class EncounterService {
         type: EncounterType.WILD_PICLET,
         title: 'Your First Piclet!',
         description: 'A friendly piclet appears! This one seems easy to catch.',
-        picletTypeId: firstDiscovered.id?.toString() || 'starter-001',
+        picletTypeId: firstDiscovered.name.toLowerCase().replace(/\s+/g, '-'),
         enemyLevel: 5,
         createdAt: new Date()
       });
@@ -126,19 +126,31 @@ export class EncounterService {
     // Get player's average level
     const avgLevel = await this.getPlayerAverageLevel();
     
-    // TODO: When piclet types are available, filter for uncaught piclets
-    // For now, generate placeholder encounters
+    // Get all discovered monsters
+    const discoveredMonsters = await db.monsters.toArray();
+    if (discoveredMonsters.length === 0) return encounters;
+    
+    // Get player's caught piclets to potentially exclude them
+    const caughtPiclets = await db.picletInstances.toArray();
+    const caughtTypeIds = new Set(caughtPiclets.map(p => p.typeId));
+    
+    // Filter for uncaught monsters (optional - you might want to allow catching duplicates)
+    const availableMonsters = discoveredMonsters; // Or filter: .filter(m => !caughtTypeIds.has(m.name.toLowerCase().replace(/\s+/g, '-')))
+    
     const encounterCount = MIN_WILD_ENCOUNTERS + Math.floor(Math.random() * (MAX_WILD_ENCOUNTERS - MIN_WILD_ENCOUNTERS + 1));
     
     for (let i = 0; i < encounterCount; i++) {
+      // Pick a random monster from discovered ones
+      const monster = availableMonsters[Math.floor(Math.random() * availableMonsters.length)];
+      
       const levelVariance = Math.floor(Math.random() * (LEVEL_VARIANCE * 2 + 1)) - LEVEL_VARIANCE;
       const enemyLevel = Math.max(1, avgLevel + levelVariance);
       
       encounters.push({
         type: EncounterType.WILD_PICLET,
-        title: `Wild Piclet Appeared!`,
-        description: `A level ${enemyLevel} piclet blocks your path!`,
-        picletTypeId: `wild-${i + 1}`, // Placeholder ID
+        title: `Wild ${monster.name} Appeared!`,
+        description: `A level ${enemyLevel} ${monster.name} blocks your path!`,
+        picletTypeId: monster.name.toLowerCase().replace(/\s+/g, '-'),
         enemyLevel,
         createdAt: new Date()
       });
@@ -168,68 +180,33 @@ export class EncounterService {
 
   // Catch a wild piclet (for first encounter)
   static async catchWildPiclet(encounter: Encounter): Promise<PicletInstance> {
-    // Get the discovered piclet data
-    const discoveredPiclets = await db.monsters.toArray();
-    const picletData = discoveredPiclets.find(p => p.id?.toString() === encounter.picletTypeId) || discoveredPiclets[0];
-    
-    const newPiclet: Omit<PicletInstance, 'id'> = {
-      typeId: encounter.picletTypeId!,
-      nickname: picletData?.name || 'Starter Piclet',
-      primaryTypeString: 'normal',
-      
-      // Stats based on level
-      level: encounter.enemyLevel || 5,
-      xp: 0,
-      currentHp: 20 + (encounter.enemyLevel || 5) * 4,
-      maxHp: 20 + (encounter.enemyLevel || 5) * 4,
-      attack: 10 + (encounter.enemyLevel || 5) * 2,
-      defense: 10 + (encounter.enemyLevel || 5) * 2,
-      fieldAttack: 10 + (encounter.enemyLevel || 5) * 2,
-      fieldDefense: 10 + (encounter.enemyLevel || 5) * 2,
-      speed: 10 + (encounter.enemyLevel || 5) * 2,
-      
-      // Base stats
-      baseHp: 20,
-      baseAttack: 10,
-      baseDefense: 10,
-      baseFieldAttack: 10,
-      baseFieldDefense: 10,
-      baseSpeed: 10,
-      
-      // Battle moves
-      moves: [
-        {
-          name: 'Tackle',
-          type: 'normal',
-          power: 40,
-          accuracy: 100,
-          pp: 35,
-          currentPp: 35,
-          description: 'A physical attack'
-        }
-      ],
-      nature: 'hardy',
-      
-      // Roster
-      isInRoster: true,
-      rosterPosition: 0,
-      
-      // Metadata
-      caughtAt: new Date(),
-      bst: 60,
-      tier: 'common',
-      role: 'balanced',
-      variance: 1,
-      
-      // Visuals from discovered data
-      imageUrl: picletData?.imageUrl || `https://storage.googleapis.com/piclodia/${encounter.picletTypeId}.png`,
-      imageData: picletData?.imageData,
-      imageCaption: picletData?.imageCaption || 'A friendly starter piclet',
-      concept: picletData?.concept || 'starter',
-      imagePrompt: picletData?.imagePrompt || 'cute starter monster'
-    };
+    if (!encounter.picletTypeId) throw new Error('No piclet type specified');
+    
+    // Import the conversion function
+    const { monsterToPicletInstance } = await import('./piclets');
+    
+    // Get the monster data by name (typeId is the lowercase hyphenated name)
+    const monsterName = encounter.picletTypeId.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+    const monster = await db.monsters
+      .where('name')
+      .equals(monsterName)
+      .first();
+    
+    if (!monster) {
+      throw new Error(`Monster not found: ${monsterName}`);
+    }
+    
+    // Convert monster to piclet instance
+    const picletData = await monsterToPicletInstance(monster, encounter.enemyLevel || 5);
+    
+    // Set roster position 0 if this is the first piclet
+    const existingPiclets = await db.picletInstances.toArray();
+    if (existingPiclets.length === 0) {
+      picletData.rosterPosition = 0;
+    }
     
-    const id = await db.picletInstances.add(newPiclet);
-    return { ...newPiclet, id };
+    // Save the new piclet
+    const id = await db.picletInstances.add(picletData);
+    return { ...picletData, id };
   }
 }