pull to refresh

src/lib/components/Pages/Encounters.svelte

@@ -8,6 +8,7 @@
   import { db } from '$lib/db';
   import { uiStore } from '$lib/stores/ui';
   import Battle from './Battle.svelte';
+  import PullToRefresh from '../UI/PullToRefresh.svelte';
   
   let encounters: Encounter[] = [];
   let isLoading = true;
@@ -45,6 +46,24 @@
     isLoading = false;
   }
   
+  async function handleRefresh() {
+    isRefreshing = true;
+    try {
+      // Force refresh encounters
+      console.log('Force refreshing encounters...');
+      encounters = await EncounterService.generateEncounters();
+      
+      // Update game state with new refresh time
+      const gameState = await getOrCreateGameState();
+      await db.gameState.update(gameState.id!, {
+        lastEncounterRefresh: new Date()
+      });
+    } catch (error) {
+      console.error('Error refreshing encounters:', error);
+    }
+    isRefreshing = false;
+  }
+  
   async function handleEncounterTap(encounter: Encounter) {
     if (encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId) {
       if (encounter.title === 'Your First Piclet!') {
@@ -329,24 +348,24 @@
   />
 {:else}
 <div class="encounters-page">
-  
-  {#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 Piclets Discovered</h2>
-      <p>To start your adventure, select the Snap logo image:</p>
-      <div class="logo-instruction">
-        <img src="/assets/snap_logo.png" alt="Snap Logo" class="snap-logo-preview" />
-        <p class="instruction-text">↑ Select this image in the scanner</p>
+  <PullToRefresh onRefresh={handleRefresh}>
+    {#if isLoading}
+      <div class="loading">
+        <div class="spinner"></div>
+        <p>Loading encounters...</p>
       </div>
-    </div>
-  {:else}
-    <div class="encounters-list">
+    {:else if encounters.length === 0}
+      <div class="empty-state">
+        <div class="empty-icon">📸</div>
+        <h2>No Piclets Discovered</h2>
+        <p>To start your adventure, select the Snap logo image:</p>
+        <div class="logo-instruction">
+          <img src="/assets/snap_logo.png" alt="Snap Logo" class="snap-logo-preview" />
+          <p class="instruction-text">↑ Select this image in the scanner</p>
+        </div>
+      </div>
+    {:else}
+      <div class="encounters-list">
       {#each encounters as encounter, index (encounter.id)}
         <button
           class="encounter-card"
@@ -396,16 +415,14 @@
       {/each}
     </div>
   {/if}
+  </PullToRefresh>
 </div>
 {/if}
 
 <style>
   .encounters-page {
     height: 100%;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    padding: 1rem;
-    padding-bottom: 5rem;
+    overflow: hidden; /* PullToRefresh handles scrolling */
   }
   
   .loading, .empty-state {
@@ -415,6 +432,7 @@
     justify-content: center;
     height: 60vh;
     text-align: center;
+    padding: 1rem;
   }
   
   .spinner {
@@ -451,6 +469,8 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    padding: 1rem;
+    padding-bottom: 5rem;
   }
   
   .encounter-card {

src/lib/components/UI/PullToRefresh.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  
+  interface Props {
+    onRefresh: () => Promise<void>;
+    threshold?: number;
+    children?: any;
+  }
+  
+  let { onRefresh, threshold = 80, children }: Props = $props();
+  
+  let container: HTMLDivElement;
+  let startY = 0;
+  let currentY = 0;
+  let pulling = $state(false);
+  let releasing = $state(false);
+  let refreshing = $state(false);
+  let pullDistance = $state(0);
+  
+  let pullProgress = $derived(Math.min(pullDistance / threshold, 1));
+  let canRefresh = $derived(pullProgress >= 1 && !refreshing);
+  
+  function handleTouchStart(e: TouchEvent) {
+    if (container.scrollTop !== 0 || refreshing) return;
+    
+    startY = e.touches[0].clientY;
+    pulling = true;
+  }
+  
+  function handleTouchMove(e: TouchEvent) {
+    if (!pulling || refreshing) return;
+    
+    currentY = e.touches[0].clientY;
+    const diff = currentY - startY;
+    
+    if (diff > 0 && container.scrollTop === 0) {
+      e.preventDefault();
+      pullDistance = diff * 0.5; // Add resistance
+    }
+  }
+  
+  async function handleTouchEnd() {
+    if (!pulling) return;
+    
+    pulling = false;
+    
+    if (canRefresh) {
+      releasing = true;
+      refreshing = true;
+      
+      try {
+        await onRefresh();
+      } finally {
+        refreshing = false;
+        setTimeout(() => {
+          releasing = false;
+          pullDistance = 0;
+        }, 300);
+      }
+    } else {
+      releasing = true;
+      setTimeout(() => {
+        releasing = false;
+        pullDistance = 0;
+      }, 300);
+    }
+  }
+  
+  onMount(() => {
+    // Also handle mouse events for desktop testing
+    function handleMouseDown(e: MouseEvent) {
+      if (container.scrollTop !== 0 || refreshing) return;
+      startY = e.clientY;
+      pulling = true;
+    }
+    
+    function handleMouseMove(e: MouseEvent) {
+      if (!pulling || refreshing) return;
+      
+      currentY = e.clientY;
+      const diff = currentY - startY;
+      
+      if (diff > 0 && container.scrollTop === 0) {
+        e.preventDefault();
+        pullDistance = diff * 0.5;
+      }
+    }
+    
+    function handleMouseUp() {
+      handleTouchEnd();
+    }
+    
+    container.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    
+    return () => {
+      container?.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  });
+</script>
+
+<div class="pull-to-refresh-container">
+  <div 
+    class="pull-indicator"
+    class:pulling
+    class:releasing
+    class:refreshing
+    style="transform: translateY({refreshing ? threshold : pullDistance}px)"
+  >
+    <div class="spinner-container" style="transform: rotate({pullProgress * 180}deg)">
+      {#if refreshing}
+        <div class="spinner"></div>
+      {:else}
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" 
+                opacity={pullProgress} />
+        </svg>
+      {/if}
+    </div>
+    <div class="pull-text">
+      {#if refreshing}
+        Refreshing...
+      {:else if canRefresh}
+        Release to refresh
+      {:else}
+        Pull to refresh
+      {/if}
+    </div>
+  </div>
+  
+  <div 
+    bind:this={container}
+    class="content-container"
+    class:pulling
+    on:touchstart={handleTouchStart}
+    on:touchmove={handleTouchMove}
+    on:touchend={handleTouchEnd}
+    style="transform: translateY({refreshing ? threshold : pullDistance}px)"
+  >
+    {@render children?.()}
+  </div>
+</div>
+
+<style>
+  .pull-to-refresh-container {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+  }
+  
+  .content-container {
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    transition: transform 0.3s ease;
+  }
+  
+  .content-container.pulling {
+    transition: none;
+  }
+  
+  .pull-indicator {
+    position: absolute;
+    top: -60px;
+    left: 0;
+    right: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    transition: transform 0.3s ease;
+    z-index: 10;
+  }
+  
+  .pull-indicator.pulling {
+    transition: none;
+  }
+  
+  .spinner-container {
+    transition: transform 0.2s ease;
+  }
+  
+  .spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid #e0e0e0;
+    border-top-color: #007bff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+  
+  .pull-text {
+    font-size: 14px;
+    color: #666;
+    white-space: nowrap;
+  }
+</style>