fix share log

src/lib/components/Piclets/PicletDetail.svelte

@@ -3,7 +3,6 @@
   import type { PicletInstance } from '$lib/db/schema';
   import { deletePicletInstance } from '$lib/db/piclets';
   import { uiStore } from '$lib/stores/ui';
-  import { downloadPicletCard } from '$lib/services/picletExport';
   import { TYPE_DATA } from '$lib/types/picletTypes';
   import AbilityDisplay from './AbilityDisplay.svelte';
   import MoveDisplay from './MoveDisplay.svelte';
@@ -19,7 +18,6 @@
   
   let { instance, onClose, onDeleted }: Props = $props();
   let selectedTab = $state<'about' | 'abilities'>('about');
-  let isSharing = $state(false);
   
   // Ensure stats are up-to-date with current level and nature
   const updatedInstance = $derived(recalculatePicletStats(instance));
@@ -70,16 +68,8 @@
   }
   
   
-  async function handleShare() {
-    isSharing = true;
-    try {
-      await downloadPicletCard(instance);
-    } catch (err) {
-      console.error('Failed to share piclet:', err);
-      alert('Failed to create shareable image');
-    } finally {
-      isSharing = false;
-    }
+  function handleShare() {
+    console.log("placeholder");
   }
 </script>
 
@@ -106,7 +96,6 @@
             <button 
               class="share-button" 
               onclick={handleShare} 
-              disabled={isSharing}
               aria-label="Share Piclet"
             >
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

src/lib/services/picletExport.ts

@@ -1,233 +0,0 @@
-import type { PicletInstance } from '$lib/db/schema';
-import { embedPicletMetadata } from './picletMetadata';
-
-/**
- * Generates a shareable image of a piclet with embedded metadata
- */
-export async function generateShareableImage(piclet: PicletInstance): Promise<Blob> {
-  // Create canvas
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-  if (!ctx) throw new Error('Could not create canvas context');
-  
-  // Polyfill for roundRect if not available
-  if (!ctx.roundRect) {
-    ctx.roundRect = function(x: number, y: number, width: number, height: number, radius: number) {
-      ctx.beginPath();
-      ctx.moveTo(x + radius, y);
-      ctx.lineTo(x + width - radius, y);
-      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-      ctx.lineTo(x + width, y + height - radius);
-      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-      ctx.lineTo(x + radius, y + height);
-      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-      ctx.lineTo(x, y + radius);
-      ctx.quadraticCurveTo(x, y, x + radius, y);
-      ctx.closePath();
-    };
-  }
-  
-  // Set canvas size - full piclet size plus padding for name and stats
-  const canvasWidth = 1024;
-  const canvasHeight = 1400; // Extra height for name and stats
-  canvas.width = canvasWidth;
-  canvas.height = canvasHeight;
-  
-  // Fill with striped background like battle view
-  ctx.fillStyle = '#f8f9fa';
-  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-  
-  // Create striped pattern
-  const stripeHeight = 10;
-  ctx.fillStyle = 'rgba(76, 175, 80, 0.2)'; // Light green
-  for (let y = 0; y < canvasHeight; y += stripeHeight * 2) {
-    ctx.fillRect(0, y, canvasWidth, stripeHeight);
-  }
-  
-  // Add alternating darker stripes
-  ctx.fillStyle = 'rgba(76, 175, 80, 0.1)'; // Lighter green
-  for (let y = stripeHeight; y < canvasHeight; y += stripeHeight * 2) {
-    ctx.fillRect(0, y, canvasWidth, stripeHeight);
-  }
-  
-  // Load piclet image first
-  const picletImg = await loadImage(piclet.imageData || piclet.imageUrl);
-  const picletSize = 1024; // Full size!
-  const picletX = 0;
-  const picletY = 150; // Leave room for name at top
-  
-  // Load and draw grass platform positioned under the piclet
-  const grassImg = await loadImage('/assets/grass.PNG');
-  const platformSize = 1200; // Larger than piclet for proper positioning
-  const platformX = (canvasWidth - platformSize) / 2;
-  const platformY = picletY + picletSize - 300 - 384; // Platform moved up by 384px
-  ctx.drawImage(grassImg, platformX, platformY, platformSize, platformSize);
-  
-  // Draw piclet on top of platform
-  ctx.drawImage(picletImg, picletX, picletY, picletSize, picletSize);
-  
-  // Add sleek modern text styling
-  const nameText = piclet.nickname || piclet.typeId;
-  
-  // Create gradient for text
-  const gradient = ctx.createLinearGradient(0, 50, 0, 120);
-  gradient.addColorStop(0, '#ffffff');
-  gradient.addColorStop(1, '#e0e0e0');
-  
-  // Modern sleek font with gradient and subtle shadow
-  ctx.font = 'bold 72px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif';
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-  
-  // Subtle shadow for depth
-  ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
-  ctx.shadowBlur = 15;
-  ctx.shadowOffsetX = 0;
-  ctx.shadowOffsetY = 3;
-  
-  // Dark outline for contrast
-  ctx.strokeStyle = '#2c3e50';
-  ctx.lineWidth = 4;
-  ctx.strokeText(nameText.toUpperCase(), canvasWidth / 2, 80);
-  
-  // Fill with gradient
-  ctx.fillStyle = gradient;
-  ctx.fillText(nameText.toUpperCase(), canvasWidth / 2, 80);
-  
-  // Reset shadow
-  ctx.shadowColor = 'transparent';
-  ctx.shadowBlur = 0;
-  ctx.shadowOffsetX = 0;
-  ctx.shadowOffsetY = 0;
-  
-  // Draw base stats in a sleek format
-  const statsY = picletY + picletSize + 50; // Position below piclet
-  const stats = [
-    { label: 'HP', value: piclet.baseHp, color: '#4caf50' },
-    { label: 'ATK', value: piclet.baseAttack, color: '#f44336' },
-    { label: 'DEF', value: piclet.baseDefense, color: '#2196f3' },
-    { label: 'S.ATK', value: piclet.baseFieldAttack, color: '#ff9800' },
-    { label: 'S.DEF', value: piclet.baseFieldDefense, color: '#9c27b0' },
-    { label: 'SPD', value: piclet.baseSpeed, color: '#00bcd4' }
-  ];
-  
-  // Stats container background
-  const containerX = 100;
-  const containerY = statsY - 20;
-  const containerWidth = canvasWidth - 200;
-  const containerHeight = 150;
-  
-  // Draw semi-transparent background using the polyfilled roundRect
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-  ctx.beginPath();
-  (ctx as any).roundRect(containerX, containerY, containerWidth, containerHeight, 20);
-  ctx.fill();
-  
-  // Draw stats bars
-  const barHeight = 16;
-  const barSpacing = 20;
-  const maxStatValue = 255;
-  const barMaxWidth = containerWidth - 240; // Leave room for labels and values
-  
-  stats.forEach((stat, index) => {
-    const y = statsY + (index * barSpacing);
-    
-    // Draw stat label
-    ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif';
-    ctx.fillStyle = '#ffffff';
-    ctx.textAlign = 'left';
-    ctx.fillText(stat.label, containerX + 20, y + 3);
-    
-    // Draw stat value
-    ctx.textAlign = 'right';
-    ctx.fillText(stat.value.toString(), containerX + 100, y + 3);
-    
-    // Draw background bar
-    const barX = containerX + 120;
-    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
-    ctx.beginPath();
-    (ctx as any).roundRect(barX, y - 8, barMaxWidth, barHeight, 8);
-    ctx.fill();
-    
-    // Draw filled bar
-    const fillWidth = (stat.value / maxStatValue) * barMaxWidth;
-    ctx.fillStyle = stat.color;
-    ctx.beginPath();
-    (ctx as any).roundRect(barX, y - 8, fillWidth, barHeight, 8);
-    ctx.fill();
-    
-    // Add shine effect
-    const shineGradient = ctx.createLinearGradient(barX, y - 8, barX, y - 8 + barHeight);
-    shineGradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
-    shineGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.1)');
-    shineGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
-    ctx.fillStyle = shineGradient;
-    ctx.beginPath();
-    (ctx as any).roundRect(barX, y - 8, fillWidth, barHeight / 2, 8);
-    ctx.fill();
-  });
-  
-  // Draw BST (Base Stat Total)
-  const bst = piclet.bst || (piclet.baseHp + piclet.baseAttack + piclet.baseDefense + 
-                             piclet.baseFieldAttack + piclet.baseFieldDefense + piclet.baseSpeed);
-  ctx.font = 'bold 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif';
-  ctx.fillStyle = '#ffd700'; // Gold color
-  ctx.textAlign = 'center';
-  ctx.fillText(`BST: ${bst}`, canvasWidth / 2, containerY + containerHeight - 10);
-  
-  // Load and draw translucent watermark in top-right
-  const logoImg = await loadImage('/assets/snap_logo.png');
-  const logoSize = 120; // Slightly smaller for top placement
-  ctx.globalAlpha = 0.3; // More translucent
-  ctx.drawImage(logoImg, canvasWidth - logoSize - 30, 30, logoSize, logoSize);
-  ctx.globalAlpha = 1.0;
-  
-  // Get the image as blob
-  const blob = await canvasToBlob(canvas);
-  
-  // Embed metadata in the blob
-  return embedPicletMetadata(blob, piclet);
-}
-
-/**
- * Downloads a piclet card image
- */
-export async function downloadPicletCard(piclet: PicletInstance, filename?: string): Promise<void> {
-  const blob = await generateShareableImage(piclet);
-  const url = URL.createObjectURL(blob);
-  
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = filename || `Piclet_${piclet.nickname || piclet.typeId}_Lv${piclet.level}.png`;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  
-  URL.revokeObjectURL(url);
-}
-
-/**
- * Helper to load an image
- */
-function loadImage(src: string): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.onload = () => resolve(img);
-    img.onerror = reject;
-    img.src = src;
-  });
-}
-
-/**
- * Convert canvas to blob
- */
-function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob((blob) => {
-      if (blob) resolve(blob);
-      else reject(new Error('Failed to create blob'));
-    }, 'image/png');
-  });
-}
-