btr img

src/lib/services/picletExport.ts

@@ -10,9 +10,9 @@ 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 - narrower width to match content, tighter height
-  const canvasWidth = 700;
-  const canvasHeight = 700; // Square format, tighter
+  // Set canvas size - full piclet size plus padding for name
+  const canvasWidth = 1024;
+  const canvasHeight = 1200; // Extra height for name
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
   
@@ -35,37 +35,47 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   
   // Load piclet image first
   const picletImg = await loadImage(piclet.imageData || piclet.imageUrl);
-  const picletSize = 512;
-  const picletX = (canvasWidth - picletSize) / 2;
-  const picletY = 120; // Position piclet closer to top, leaving room for name
+  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 = 1024; // Slightly larger than piclet
+  const platformSize = 1200; // Larger than piclet for proper positioning
   const platformX = (canvasWidth - platformSize) / 2;
-  const platformY = picletY + 512;
+  const platformY = picletY + picletSize - 300; // Platform under piclet
   ctx.drawImage(grassImg, platformX, platformY, platformSize, platformSize);
   
   // Draw piclet on top of platform
   ctx.drawImage(picletImg, picletX, picletY, picletSize, picletSize);
   
-  // Add piclet name with video game font
-  ctx.fillStyle = 'white';
-  ctx.strokeStyle = '#1e3a8a'; // Dark blue outline
-  ctx.lineWidth = 8;
-  // Try to use a more gaming-style font, fallback to Impact
-  ctx.font = 'bold 64px "Press Start 2P", "Courier New", Impact, monospace';
+  // 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.shadowColor = 'rgba(0, 0, 0, 0.8)';
-  ctx.shadowBlur = 10;
-  ctx.shadowOffsetX = 4;
-  ctx.shadowOffsetY = 4;
+  ctx.textBaseline = 'middle';
   
-  const nameText = piclet.nickname || piclet.typeId;
+  // 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);
   
-  // Draw name with outline and shadow
-  ctx.strokeText(nameText, canvasWidth / 2, 80);
-  ctx.fillText(nameText, canvasWidth / 2, 80);
+  // Fill with gradient
+  ctx.fillStyle = gradient;
+  ctx.fillText(nameText.toUpperCase(), canvasWidth / 2, 80);
   
   // Reset shadow
   ctx.shadowColor = 'transparent';
@@ -75,9 +85,9 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   
   // Load and draw translucent watermark
   const logoImg = await loadImage('/assets/snap_logo.png');
-  const logoSize = 120;
+  const logoSize = 150;
   ctx.globalAlpha = 0.3; // More translucent
-  ctx.drawImage(logoImg, canvasWidth - logoSize - 20, canvasHeight - logoSize - 20, logoSize, logoSize);
+  ctx.drawImage(logoImg, canvasWidth - logoSize - 30, canvasHeight - logoSize - 30, logoSize, logoSize);
   ctx.globalAlpha = 1.0;
   
   // Get the image as blob