add stats

src/lib/services/picletExport.ts

@@ -10,9 +10,26 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   const ctx = canvas.getContext('2d');
   if (!ctx) throw new Error('Could not create canvas context');
   
-  // Set canvas size - full piclet size plus padding for name
+  // 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 = 1200; // Extra height for name
+  const canvasHeight = 1400; // Extra height for name and stats
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
   
@@ -83,6 +100,77 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   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
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+  ctx.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.roundRect(barX, y - 8, barMaxWidth, barHeight, 8);
+    ctx.fill();
+    
+    // Draw filled bar
+    const fillWidth = (stat.value / maxStatValue) * barMaxWidth;
+    ctx.fillStyle = stat.color;
+    ctx.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.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
   const logoImg = await loadImage('/assets/snap_logo.png');
   const logoSize = 150;