encs

src/lib/components/Pages/Encounters.svelte

@@ -1,32 +1,207 @@
 <script lang="ts">
-  // Placeholder for future implementation
+  import { onMount } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
+  import type { Encounter, GameState } from '$lib/db/schema';
+  import { EncounterType } from '$lib/db/schema';
+  import { EncounterService } from '$lib/db/encounterService';
+  import { getOrCreateGameState, incrementCounter, addProgressPoints } from '$lib/db/gameState';
+  import { db } from '$lib/db';
+  
+  let encounters: Encounter[] = [];
+  let gameState: GameState | null = null;
+  let isLoading = true;
+  let isRefreshing = false;
+  
+  onMount(async () => {
+    await loadEncounters();
+  });
+  
+  async function loadEncounters() {
+    isLoading = true;
+    try {
+      // Load game state
+      gameState = await getOrCreateGameState();
+      
+      // Get current encounters
+      const currentEncounters = await EncounterService.getCurrentEncounters();
+      
+      // Check if we need to refresh encounters
+      if (await EncounterService.shouldRefreshEncounters() || currentEncounters.length === 0) {
+        // Generate new encounters
+        console.log('Generating new encounters...');
+        encounters = await EncounterService.generateEncounters();
+      } else {
+        // Use existing encounters
+        console.log('Using existing encounters:', currentEncounters.length);
+        encounters = currentEncounters;
+      }
+    } catch (error) {
+      console.error('Error loading encounters:', error);
+    }
+    isLoading = false;
+  }
+  
+  async function handleEncounterTap(encounter: Encounter) {
+    if (encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId) {
+      if (encounter.title === 'Your First Piclet!') {
+        // First catch - auto catch without battle
+        try {
+          isLoading = true;
+          const caughtPiclet = await EncounterService.catchWildPiclet(encounter);
+          await incrementCounter('picletsCapured');
+          await addProgressPoints(100);
+          
+          // Show success message
+          alert(`You caught ${caughtPiclet.nickname}!`);
+          
+          // Force refresh encounters
+          await forceEncounterRefresh();
+        } catch (error) {
+          console.error('Error catching piclet:', error);
+        }
+        isLoading = false;
+      } else {
+        // Regular wild encounter - would start battle
+        alert('Battle system coming soon!');
+      }
+    } else if (encounter.type === EncounterType.SHOP) {
+      await handleShopEncounter();
+    } else if (encounter.type === EncounterType.HEALTH_CENTER) {
+      await handleHealthCenterEncounter();
+    } else if (encounter.type === EncounterType.TRAINER_BATTLE) {
+      alert('Trainer battles coming soon!');
+    }
+  }
+  
+  async function handleShopEncounter() {
+    alert('Shop features coming soon!');
+    await forceEncounterRefresh();
+  }
+  
+  async function handleHealthCenterEncounter() {
+    try {
+      // Heal all piclets
+      const piclets = await db.picletInstances.toArray();
+      for (const piclet of piclets) {
+        await db.picletInstances.update(piclet.id!, {
+          currentHp: piclet.maxHp
+        });
+      }
+      
+      alert('All your piclets have been healed to full health!');
+      await forceEncounterRefresh();
+    } catch (error) {
+      console.error('Error at health center:', error);
+    }
+  }
+  
+  async function forceEncounterRefresh() {
+    isRefreshing = true;
+    try {
+      await EncounterService.forceEncounterRefresh();
+      encounters = await EncounterService.generateEncounters();
+      gameState = await getOrCreateGameState();
+    } catch (error) {
+      console.error('Error refreshing encounters:', error);
+    }
+    isRefreshing = false;
+  }
+  
+  function getEncounterIcon(encounter: Encounter): string {
+    switch (encounter.type) {
+      case EncounterType.SHOP:
+        return '🛍️';
+      case EncounterType.HEALTH_CENTER:
+        return '❤️';
+      case EncounterType.TRAINER_BATTLE:
+        return '🏆';
+      case EncounterType.WILD_PICLET:
+      default:
+        return '⚔️';
+    }
+  }
+  
+  function getEncounterColor(encounter: Encounter): string {
+    switch (encounter.type) {
+      case EncounterType.WILD_PICLET:
+        return '#4caf50';
+      case EncounterType.TRAINER_BATTLE:
+        return '#ff9800';
+      case EncounterType.SHOP:
+        return '#2196f3';
+      case EncounterType.HEALTH_CENTER:
+        return '#9c27b0';
+      default:
+        return '#607d8b';
+    }
+  }
 </script>
 
 <div class="encounters-page">
-  <div class="coming-soon">
-    <img 
-      src="https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/encounters_logo.png" 
-      alt="Encounters" 
-      class="page-icon"
-    />
-    <h2>Encounters</h2>
-    <p>Battle trainers and catch wild Piclets!</p>
-    <div class="feature-preview">
-      <div class="preview-card">
-        <h3>⚔️ Battle System</h3>
-        <p>Turn-based combat with your Piclets</p>
-      </div>
-      <div class="preview-card">
-        <h3>🎯 Catch Mechanics</h3>
-        <p>Find and capture new monsters</p>
+  <div class="header">
+    <h1>Encounters</h1>
+    {#if gameState}
+      <div class="progress-bar">
+        <div class="progress-fill" style="width: {(gameState.progressPoints / 1000) * 100}%"></div>
+        <span class="progress-text">{gameState.progressPoints}/1000</span>
       </div>
-      <div class="preview-card">
-        <h3>🏆 Trainer Battles</h3>
-        <p>Challenge other trainers</p>
-      </div>
-    </div>
-    <p class="coming-soon-text">Coming Soon</p>
+    {/if}
   </div>
+  
+  {#if isLoading}
+    <div class="loading">
+      <div class="spinner"></div>
+      <p>Loading encounters...</p>
+    </div>
+  {:else if encounters.length === 0}
+    <div class="empty-state">
+      <div class="empty-icon">🗺️</div>
+      <h2>No Encounters Available</h2>
+      <p>New encounters will appear soon!</p>
+      <button class="refresh-button" on:click={loadEncounters}>
+        Refresh
+      </button>
+    </div>
+  {:else}
+    <div class="encounters-list">
+      {#each encounters as encounter, index (encounter.id)}
+        <button
+          class="encounter-card"
+          style="border-color: {getEncounterColor(encounter)}30"
+          on:click={() => handleEncounterTap(encounter)}
+          in:fly={{ y: 20, delay: index * 50 }}
+          disabled={isRefreshing}
+        >
+          <div class="encounter-icon">
+            {#if encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId}
+              {#if encounter.title === 'Your First Piclet!'}
+                <div class="piclet-silhouette">?</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}
+            {:else}
+              <span class="type-icon">{getEncounterIcon(encounter)}</span>
+            {/if}
+          </div>
+          
+          <div class="encounter-info">
+            <h3>{encounter.title}</h3>
+            <p>{encounter.description}</p>
+          </div>
+          
+          <div class="encounter-arrow">›</div>
+        </button>
+      {/each}
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -34,57 +209,184 @@
     height: 100%;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
-    padding: 2rem 1rem;
+    padding: 1rem;
+    padding-bottom: 5rem;
+  }
+  
+  .header {
+    margin-bottom: 1.5rem;
+  }
+  
+  .header h1 {
+    margin: 0 0 1rem;
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: #1a1a1a;
   }
   
-  .coming-soon {
+  .progress-bar {
+    background: #e0e0e0;
+    height: 24px;
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+  }
+  
+  .progress-fill {
+    background: linear-gradient(90deg, #4caf50, #66bb6a);
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+  
+  .progress-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #333;
+  }
+  
+  .loading, .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 60vh;
     text-align: center;
-    max-width: 400px;
-    margin: 0 auto;
   }
   
-  .page-icon {
-    width: 80px;
-    height: 80px;
+  .spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid #f0f0f0;
+    border-top-color: #4caf50;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
+  }
+  
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+  
+  .empty-icon {
+    font-size: 4rem;
     margin-bottom: 1rem;
-    opacity: 0.8;
   }
   
-  h2 {
+  .empty-state h2 {
     margin: 0 0 0.5rem;
+    font-size: 1.25rem;
     color: #333;
   }
   
-  .feature-preview {
+  .empty-state p {
+    color: #666;
+    font-size: 0.9rem;
+  }
+  
+  .encounters-list {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    margin: 2rem 0;
   }
   
-  .preview-card {
-    background: #f8f9fa;
-    padding: 1.5rem;
+  .encounter-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: #fff;
+    border: 2px solid;
     border-radius: 12px;
+    padding: 1rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    transition: all 0.2s ease;
+    cursor: pointer;
+    width: 100%;
     text-align: left;
   }
   
-  .preview-card h3 {
-    margin: 0 0 0.5rem;
+  .encounter-card:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+  }
+  
+  .encounter-card:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  
+  .encounter-icon {
+    width: 60px;
+    height: 60px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .encounter-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+  
+  .piclet-silhouette {
+    width: 100%;
+    height: 100%;
+    background: #e0e0e0;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    font-weight: bold;
+    color: #999;
+  }
+  
+  .type-icon, .fallback-icon {
+    font-size: 2rem;
+  }
+  
+  .encounter-info {
+    flex: 1;
+  }
+  
+  .encounter-info h3 {
+    margin: 0 0 0.25rem;
     font-size: 1.1rem;
-    color: #333;
+    font-weight: 600;
+    color: #1a1a1a;
   }
   
-  .preview-card p {
+  .encounter-info p {
     margin: 0;
+    font-size: 0.875rem;
     color: #666;
-    font-size: 0.9rem;
   }
   
-  .coming-soon-text {
-    color: #007bff;
+  .encounter-arrow {
+    font-size: 1.5rem;
+    color: #999;
+  }
+  
+  .refresh-button {
+    margin-top: 1rem;
+    padding: 0.75rem 1.5rem;
+    background: #4caf50;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
     font-weight: 600;
-    font-size: 1.2rem;
-    margin-top: 2rem;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+  
+  .refresh-button:hover {
+    background: #45a049;
   }
 </style>

src/lib/db/encounterService.ts

@@ -0,0 +1,192 @@
+import { db } from './index';
+import type { Encounter, PicletInstance } from './schema';
+import { EncounterType } from './schema';
+import { getOrCreateGameState, markEncountersRefreshed } from './gameState';
+
+// Configuration
+const ENCOUNTER_REFRESH_HOURS = 2;
+const MIN_WILD_ENCOUNTERS = 2;
+const MAX_WILD_ENCOUNTERS = 3;
+const LEVEL_VARIANCE = 2;
+
+export class EncounterService {
+  // Check if encounters should be refreshed
+  static async shouldRefreshEncounters(): Promise<boolean> {
+    const state = await getOrCreateGameState();
+    const hoursSinceRefresh = (Date.now() - state.lastEncounterRefresh.getTime()) / (1000 * 60 * 60);
+    return hoursSinceRefresh >= ENCOUNTER_REFRESH_HOURS;
+  }
+
+  // Force encounter refresh
+  static async forceEncounterRefresh(): Promise<void> {
+    await db.encounters.clear();
+    await markEncountersRefreshed();
+  }
+
+  // Get current encounters
+  static async getCurrentEncounters(): Promise<Encounter[]> {
+    return await db.encounters
+      .orderBy('createdAt')
+      .reverse()
+      .toArray();
+  }
+
+  // Clear all encounters
+  static async clearEncounters(): Promise<void> {
+    await db.encounters.clear();
+  }
+
+  // Generate new encounters
+  static async generateEncounters(): Promise<Encounter[]> {
+    const encounters: Omit<Encounter, 'id'>[] = [];
+    
+    // Check if player needs first catch encounter
+    const playerPiclets = await db.picletInstances.toArray();
+    if (playerPiclets.length === 0) {
+      encounters.push(await this.createFirstCatchEncounter());
+    } else {
+      // Generate wild piclet encounters
+      const wildEncounters = await this.generateWildEncounters();
+      encounters.push(...wildEncounters);
+    }
+
+    // Always add shop and health center
+    encounters.push({
+      type: EncounterType.SHOP,
+      title: 'Piclet Shop',
+      description: 'Buy items and supplies for your journey',
+      createdAt: new Date()
+    });
+
+    encounters.push({
+      type: EncounterType.HEALTH_CENTER,
+      title: 'Health Center',
+      description: 'Heal your piclets back to full health',
+      createdAt: new Date()
+    });
+
+    // Clear existing encounters and add new ones
+    await db.encounters.clear();
+    for (const encounter of encounters) {
+      await db.encounters.add(encounter);
+    }
+
+    await markEncountersRefreshed();
+    return await this.getCurrentEncounters();
+  }
+
+  // Create first catch encounter
+  private static async createFirstCatchEncounter(): Promise<Omit<Encounter, 'id'>> {
+    // TODO: Replace with actual piclet data when available
+    // For now, using placeholder data
+    return {
+      type: EncounterType.WILD_PICLET,
+      title: 'Your First Piclet!',
+      description: 'A friendly piclet appears! This one seems easy to catch.',
+      picletTypeId: 'starter-001', // Placeholder ID
+      enemyLevel: 5,
+      createdAt: new Date()
+    };
+  }
+
+  // Generate wild piclet encounters
+  private static async generateWildEncounters(): Promise<Omit<Encounter, 'id'>[]> {
+    const encounters: Omit<Encounter, 'id'>[] = [];
+    
+    // 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
+    const encounterCount = MIN_WILD_ENCOUNTERS + Math.floor(Math.random() * (MAX_WILD_ENCOUNTERS - MIN_WILD_ENCOUNTERS + 1));
+    
+    for (let i = 0; i < encounterCount; i++) {
+      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
+        enemyLevel,
+        createdAt: new Date()
+      });
+    }
+    
+    return encounters;
+  }
+
+  // Get player's average piclet level
+  private static async getPlayerAverageLevel(): Promise<number> {
+    const rosterPiclets = await db.picletInstances
+      .where('isInRoster')
+      .equals(1) // Dexie uses 1 for true in indexed fields
+      .toArray();
+    
+    if (rosterPiclets.length === 0) {
+      const allPiclets = await db.picletInstances.toArray();
+      if (allPiclets.length === 0) return 5; // Default starting level
+      
+      const totalLevel = allPiclets.reduce((sum, p) => sum + p.level, 0);
+      return Math.round(totalLevel / allPiclets.length);
+    }
+    
+    const totalLevel = rosterPiclets.reduce((sum, p) => sum + p.level, 0);
+    return Math.round(totalLevel / rosterPiclets.length);
+  }
+
+  // Catch a wild piclet (for first encounter)
+  static async catchWildPiclet(encounter: Encounter): Promise<PicletInstance> {
+    // TODO: Implement actual piclet catching logic
+    // For now, create a placeholder instance
+    const newPiclet: Omit<PicletInstance, 'id'> = {
+      typeId: encounter.picletTypeId!,
+      nickname: 'Starter Piclet',
+      primaryTypeString: 'normal',
+      
+      // Stats
+      level: encounter.enemyLevel || 5,
+      xp: 0,
+      currentHp: 20,
+      maxHp: 20,
+      attack: 10,
+      defense: 10,
+      fieldAttack: 10,
+      fieldDefense: 10,
+      speed: 10,
+      
+      // Base stats
+      baseHp: 20,
+      baseAttack: 10,
+      baseDefense: 10,
+      baseFieldAttack: 10,
+      baseFieldDefense: 10,
+      baseSpeed: 10,
+      
+      // Battle
+      moves: [],
+      nature: 'hardy',
+      
+      // Roster
+      isInRoster: true,
+      rosterPosition: 0,
+      
+      // Metadata
+      caughtAt: new Date(),
+      bst: 60,
+      tier: 'common',
+      role: 'balanced',
+      variance: 1,
+      
+      // Visuals
+      imageUrl: `https://storage.googleapis.com/piclodia/${encounter.picletTypeId}.png`,
+      imageCaption: 'A friendly starter piclet',
+      concept: 'starter',
+      imagePrompt: 'cute starter monster'
+    };
+    
+    const id = await db.picletInstances.add(newPiclet);
+    return { ...newPiclet, id };
+  }
+}