fix enc

src/lib/components/Pages/Encounters.svelte

@@ -60,11 +60,11 @@
   }
   
   async function loadPicletImages() {
-    const wildEncounters = encounters.filter(e => 
-      e.type === EncounterType.WILD_PICLET && e.picletTypeId
+    const picletEncounters = encounters.filter(e => 
+      (e.type === EncounterType.WILD_PICLET || e.type === EncounterType.FIRST_PICLET) && e.picletTypeId
     );
     
-    for (const encounter of wildEncounters) {
+    for (const encounter of picletEncounters) {
       if (!encounter.picletTypeId) continue;
       
       // Find a piclet instance with this typeId
@@ -103,7 +103,10 @@
   }
   
   async function handleEncounterTap(encounter: Encounter) {
-    if (encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId) {
+    if (encounter.type === EncounterType.FIRST_PICLET) {
+      // First piclet encounter - direct catch
+      await handleFirstPicletEncounter(encounter);
+    } else if (encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId) {
       // Regular wild encounter - start battle
       await startBattle(encounter);
     } else if (encounter.type === EncounterType.SHOP) {
@@ -136,6 +139,45 @@
       console.error('Error at health center:', error);
     }
   }
+
+  async function handleFirstPicletEncounter(encounter: Encounter) {
+    try {
+      if (!encounter.picletInstanceId) {
+        throw new Error('No piclet instance specified for first piclet encounter');
+      }
+
+      // Get the specific piclet instance
+      const picletInstance = await db.picletInstances.get(encounter.picletInstanceId);
+      if (!picletInstance) {
+        throw new Error('Piclet instance not found');
+      }
+
+      // Mark the piclet as caught and set it as the first roster piclet
+      await db.picletInstances.update(encounter.picletInstanceId, {
+        caught: true,
+        caughtAt: new Date(),
+        isInRoster: true,
+        rosterPosition: 0
+      });
+
+      // Get the updated piclet instance
+      const caughtPiclet = await db.picletInstances.get(encounter.picletInstanceId);
+      
+      // Show the newly caught piclet detail page
+      newlyCaughtPiclet = caughtPiclet!;
+      showNewlyCaught = true;
+      
+      // Update counters and progress
+      incrementCounter('picletsCapured');
+      addProgressPoints(100);
+      
+      // Force refresh encounters to remove the first piclet encounter
+      await forceEncounterRefresh();
+    } catch (error) {
+      console.error('Error handling first piclet encounter:', error);
+      alert('Something went wrong. Please try again.');
+    }
+  }
   
   async function forceEncounterRefresh() {
     isRefreshing = true;
@@ -157,6 +199,8 @@
         return '❤️';
       case EncounterType.TRAINER_BATTLE:
         return '🏆';
+      case EncounterType.FIRST_PICLET:
+        return '✨';
       case EncounterType.WILD_PICLET:
       default:
         return '⚔️';
@@ -167,6 +211,8 @@
     switch (encounter.type) {
       case EncounterType.WILD_PICLET:
         return '#4caf50';
+      case EncounterType.FIRST_PICLET:
+        return '#ffd700';
       case EncounterType.TRAINER_BATTLE:
         return '#ff9800';
       case EncounterType.SHOP:
@@ -335,11 +381,11 @@
           disabled={isRefreshing}
         >
           <div class="encounter-icon">
-            {#if encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId}
+            {#if (encounter.type === EncounterType.WILD_PICLET || encounter.type === EncounterType.FIRST_PICLET) && encounter.picletTypeId}
               {#if monsterImages.has(encounter.picletTypeId)}
                 <img 
                   src={monsterImages.get(encounter.picletTypeId)}
-                  alt="Wild Piclet"
+                  alt="Piclet"
                 />
               {:else}
                 <div class="fallback-icon">{getEncounterIcon(encounter)}</div>

src/lib/db/encounterService.ts

@@ -112,9 +112,10 @@ export class EncounterService {
     const displayName = latestPiclet.nickname || latestPiclet.typeId.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
     
     return {
-      type: EncounterType.WILD_PICLET,
+      type: EncounterType.FIRST_PICLET,
       title: 'Your First Piclet!',
       description: `A friendly ${displayName} appears! This one seems easy to catch.`,
+      picletInstanceId: latestPiclet.id, // Reference to the specific piclet instance
       picletTypeId: latestPiclet.typeId,
       enemyLevel: 5, // Easy level for first encounter
       createdAt: new Date()