download piclet json

src/lib/components/Piclets/PicletDetail.svelte

@@ -68,8 +68,98 @@
   }
   
   
-  function handleShare() {
-    console.log("placeholder");
+  function handleDownloadJSON() {
+    try {
+      // Create comprehensive export data
+      const exportData = {
+        exportVersion: "1.0",
+        exportedAt: new Date().toISOString(),
+        piclet: {
+          name: updatedInstance.nickname || updatedInstance.typeId,
+          typeId: updatedInstance.typeId,
+          imageData: updatedInstance.imageData,
+          stats: {
+            // Core identification
+            id: updatedInstance.id,
+            typeId: updatedInstance.typeId,
+            nickname: updatedInstance.nickname,
+            
+            // Type information
+            primaryType: updatedInstance.primaryType,
+            secondaryType: updatedInstance.secondaryType,
+            
+            // Current stats
+            currentHp: updatedInstance.currentHp,
+            maxHp: updatedInstance.maxHp,
+            level: updatedInstance.level,
+            xp: updatedInstance.xp,
+            attack: updatedInstance.attack,
+            defense: updatedInstance.defense,
+            fieldAttack: updatedInstance.fieldAttack,
+            fieldDefense: updatedInstance.fieldDefense,
+            speed: updatedInstance.speed,
+            
+            // Base stats
+            baseHp: updatedInstance.baseHp,
+            baseAttack: updatedInstance.baseAttack,
+            baseDefense: updatedInstance.baseDefense,
+            baseFieldAttack: updatedInstance.baseFieldAttack,
+            baseFieldDefense: updatedInstance.baseFieldDefense,
+            baseSpeed: updatedInstance.baseSpeed,
+            
+            // Additional properties
+            nature: updatedInstance.nature,
+            tier: updatedInstance.tier,
+            bst: updatedInstance.bst,
+            caught: updatedInstance.caught,
+            caughtAt: updatedInstance.caughtAt,
+            isInRoster: updatedInstance.isInRoster,
+            rosterPosition: updatedInstance.rosterPosition
+          },
+          battleData: {
+            moves: updatedInstance.moves,
+            specialAbility: updatedInstance.specialAbility,
+            specialAbilityUnlockLevel: updatedInstance.specialAbilityUnlockLevel,
+            types: [updatedInstance.primaryType, updatedInstance.secondaryType].filter(Boolean)
+          },
+          generationData: {
+            imageUrl: updatedInstance.imageUrl,
+            imageCaption: updatedInstance.imageCaption || null,
+            concept: updatedInstance.concept || null,
+            imagePrompt: updatedInstance.imagePrompt || null
+          },
+          metadata: {
+            level: updatedInstance.level,
+            tier: updatedInstance.tier,
+            createdAt: updatedInstance.caughtAt || new Date().toISOString(),
+            exportSource: "Pictuary Game"
+          }
+        }
+      };
+      
+      // 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 = `piclet-${(updatedInstance.nickname || updatedInstance.typeId).replace(/[^a-zA-Z0-9-_]/g, '_')}-${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('Piclet JSON exported successfully');
+    } catch (error) {
+      console.error('Failed to export Piclet JSON:', error);
+      alert('Failed to export Piclet data. Please try again.');
+    }
   }
 </script>
 
@@ -94,16 +184,14 @@
             </button>
             <h1 class="card-title">{updatedInstance.nickname || updatedInstance.typeId}</h1>
             <button 
-              class="share-button" 
-              onclick={handleShare} 
-              aria-label="Share Piclet"
+              class="download-button" 
+              onclick={handleDownloadJSON} 
+              aria-label="Download JSON"
             >
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="18" cy="5" r="3"></circle>
-                <circle cx="6" cy="12" r="3"></circle>
-                <circle cx="18" cy="19" r="3"></circle>
-                <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
-                <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+                <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>
             </button>
           </div>
@@ -370,7 +458,7 @@
     background: rgba(255, 255, 255, 0.3);
   }
   
-  .share-button {
+  .download-button {
     background: rgba(255, 255, 255, 0.2);
     border: none;
     color: white;
@@ -383,21 +471,21 @@
     transition: all 0.2s;
   }
   
-  .share-button:hover {
+  .download-button:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: scale(1.05);
   }
   
-  .share-button:active {
+  .download-button:active {
     transform: scale(0.95);
   }
   
-  .share-button:disabled {
+  .download-button:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
   
-  .share-button svg {
+  .download-button svg {
     width: 20px;
     height: 20px;
   }