fix encounters image URL

src/lib/components/Pages/Encounters.svelte

@@ -13,6 +13,7 @@
   let encounters: Encounter[] = [];
   let isLoading = true;
   let isRefreshing = false;
+  let monsterImages: Map<string, string> = new Map();
   
   // Battle state
   let showBattle = false;
@@ -41,12 +42,41 @@
         console.log('Using existing encounters:', currentEncounters.length);
         encounters = currentEncounters;
       }
+      
+      // Load monster images for wild piclet encounters
+      await loadMonsterImages();
     } catch (error) {
       console.error('Error loading encounters:', error);
     }
     isLoading = false;
   }
   
+  async function loadMonsterImages() {
+    const wildEncounters = encounters.filter(e => 
+      e.type === EncounterType.WILD_PICLET && e.picletTypeId
+    );
+    
+    for (const encounter of wildEncounters) {
+      if (!encounter.picletTypeId) continue;
+      
+      // Convert picletTypeId to monster name format
+      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 && monster.imageData) {
+        monsterImages.set(encounter.picletTypeId, monster.imageData);
+      }
+    }
+    // Trigger reactive update
+    monsterImages = monsterImages;
+  }
+  
   async function handleRefresh() {
     isRefreshing = true;
     try {
@@ -54,6 +84,9 @@
       console.log('Force refreshing encounters...');
       encounters = await EncounterService.generateEncounters();
       
+      // Load monster images for new encounters
+      await loadMonsterImages();
+      
       // Update game state with new refresh time
       const gameState = await getOrCreateGameState();
       await db.gameState.update(gameState.id!, {
@@ -124,6 +157,7 @@
     try {
       await EncounterService.forceEncounterRefresh();
       encounters = await EncounterService.generateEncounters();
+      await loadMonsterImages();
     } catch (error) {
       console.error('Error refreshing encounters:', error);
     }
@@ -381,27 +415,25 @@
             {#if encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId}
               {#if encounter.title === 'Your First Piclet!'}
                 <div class="piclet-silhouette">
-                  <img 
-                    src={`https://storage.googleapis.com/piclodia/${encounter.picletTypeId}.png`}
-                    alt="Mystery Piclet"
-                    class="silhouette-img"
-                    on:error={(e) => {
-                      e.currentTarget.style.display = 'none';
-                      e.currentTarget.nextElementSibling.style.display = 'block';
-                    }}
-                  />
-                  <div class="silhouette-fallback" style="display: none">?</div>
+                  {#if monsterImages.has(encounter.picletTypeId)}
+                    <img 
+                      src={monsterImages.get(encounter.picletTypeId)}
+                      alt="Mystery Piclet"
+                      class="silhouette-img"
+                    />
+                  {:else}
+                    <div class="silhouette-fallback">?</div>
+                  {/if}
                 </div>
               {:else}
-                <img 
-                  src={`https://storage.googleapis.com/piclodia/${encounter.picletTypeId}.png`}
-                  alt="Wild Piclet"
-                  on:error={(e) => {
-                    e.currentTarget.style.display = 'none';
-                    e.currentTarget.nextElementSibling.style.display = 'block';
-                  }}
-                />
-                <div class="fallback-icon" style="display: none">{getEncounterIcon(encounter)}</div>
+                {#if monsterImages.has(encounter.picletTypeId)}
+                  <img 
+                    src={monsterImages.get(encounter.picletTypeId)}
+                    alt="Wild Piclet"
+                  />
+                {:else}
+                  <div class="fallback-icon">{getEncounterIcon(encounter)}</div>
+                {/if}
               {/if}
             {:else}
               <span class="type-icon">{getEncounterIcon(encounter)}</span>