download piclets

src/lib/components/Pages/Pictuary.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { getCaughtPiclets, getRosterPiclets, moveToRoster, swapRosterPositions, moveToStorage, getUncaughtPiclets } from '$lib/db/piclets';
   import type { PicletInstance } from '$lib/db/schema';
+  import { db } from '$lib/db/database';
   import PicletCard from '../Piclets/PicletCard.svelte';
   import EmptySlotCard from '../Piclets/EmptySlotCard.svelte';
   import DraggablePicletCard from '../Piclets/DraggablePicletCard.svelte';
@@ -91,6 +92,96 @@
     }
   }
   
+  async function handleBulkDownload() {
+    try {
+      console.log('Starting bulk download of all Piclets...');
+      
+      // Get all piclets (roster + storage + discovered)
+      const allPiclets = [...rosterPiclets, ...storagePiclets, ...discoveredPiclets];
+      
+      if (allPiclets.length === 0) {
+        console.log('No Piclets to export');
+        return;
+      }
+      
+      // Get trainer scan data for all piclets
+      const trainerScanData = await db.trainerScanProgress
+        .where('status').equals('completed')
+        .toArray();
+      
+      // Create a map of piclet ID to trainer data
+      const trainerDataMap = new Map();
+      trainerScanData.forEach(scan => {
+        if (scan.picletInstanceId) {
+          trainerDataMap.set(scan.picletInstanceId, {
+            trainerName: scan.trainerName,
+            imagePath: scan.imagePath,
+            imageIndex: scan.imageIndex,
+            completedAt: scan.completedAt,
+            remoteUrl: scan.remoteUrl
+          });
+        }
+      });
+      
+      // Create export data for each piclet
+      const exportData = {
+        exportInfo: {
+          totalPiclets: allPiclets.length,
+          exportedAt: new Date().toISOString(),
+          exportSource: "Pictuary Game - Bulk Export",
+          version: "1.0"
+        },
+        piclets: allPiclets.map(piclet => {
+          const trainerInfo = trainerDataMap.get(piclet.id!);
+          
+          return {
+            // Core piclet data (same format as individual download)
+            id: piclet.id,
+            typeId: piclet.typeId,
+            nickname: piclet.nickname,
+            primaryType: piclet.primaryType,
+            secondaryType: piclet.secondaryType,
+            baseStats: piclet.baseStats,
+            nature: piclet.nature,
+            specialAbility: piclet.specialAbility,
+            movepool: piclet.movepool,
+            tier: piclet.tier,
+            description: piclet.description,
+            rosterPosition: piclet.rosterPosition,
+            caughtAt: piclet.caughtAt,
+            imageUrl: piclet.imageUrl,
+            imageData: piclet.imageData,
+            
+            // Trainer scanner data (if available)
+            trainerInfo: trainerInfo || null
+          };
+        })
+      };
+      
+      // Create and download JSON file
+      const jsonString = JSON.stringify(exportData, null, 2);
+      const blob = new Blob([jsonString], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      
+      // Create temporary download link
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `pictuary-collection-${Date.now()}.json`;
+      
+      // Trigger download
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      
+      // Clean up the blob URL
+      URL.revokeObjectURL(url);
+      
+      console.log(`Successfully exported ${allPiclets.length} Piclets with trainer data`);
+    } catch (error) {
+      console.error('Failed to export Piclet collection:', error);
+    }
+  }
+  
   onMount(() => {
     loadPiclets();
   });
@@ -226,7 +317,21 @@
       <!-- Discovered Section -->
       {#if discoveredPiclets.length > 0}
         <section class="discovered-section">
-          <h2>Discovered ({discoveredPiclets.length})</h2>
+          <div class="section-header">
+            <h2>Discovered ({discoveredPiclets.length})</h2>
+            <button 
+              class="download-button" 
+              onclick={handleBulkDownload}
+              title="Download all Piclets with trainer data"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                <polyline points="7,10 12,15 17,10"></polyline>
+                <line x1="12" y1="15" x2="12" y2="3"></line>
+              </svg>
+              Download
+            </button>
+          </div>
           <div class="discovered-grid">
             {#each discoveredPiclets as piclet}
               <PicletCard 
@@ -398,6 +503,39 @@
     gap: 12px;
   }
   
+  .download-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: linear-gradient(135deg, #007bff, #0056b3);
+    border: none;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
+  }
+  
+  .download-button:hover {
+    background: linear-gradient(135deg, #0056b3, #004085);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
+  }
+  
+  .download-button:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
+  }
+  
+  .download-button svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2.5;
+  }
+  
   @keyframes spin {
     to { transform: rotate(360deg); }
   }