img

src/lib/components/Piclets/PicletDetail.svelte

@@ -83,6 +83,19 @@
     <div class="content-scroll">
       <!-- Header Card -->
       <div class="header-card">
+        <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">
+            <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8"></path>
+            <polyline points="16 6 12 2 8 6"></polyline>
+            <line x1="12" y1="2" x2="12" y2="15"></line>
+          </svg>
+        </button>
+        
         <div class="header-layout">
           <div class="image-column">
             <div class="image-container">
@@ -242,12 +255,7 @@
           <button class="btn btn-danger" onclick={handleDelete}>Yes, Release</button>
           <button class="btn btn-secondary" onclick={() => showDeleteConfirm = false}>Cancel</button>
         {:else}
-          <div style="display: flex; flex-direction: column; gap: 8px;">
-            <button class="btn btn-primary" onclick={handleShare} disabled={isSharing}>
-              {isSharing ? 'Creating...' : 'Share Piclet'}
-            </button>
-            <button class="btn btn-danger" onclick={() => showDeleteConfirm = true}>Release Piclet</button>
-          </div>
+          <button class="btn btn-danger" onclick={() => showDeleteConfirm = true}>Release Piclet</button>
         {/if}
       </div>
     </div>
@@ -315,6 +323,43 @@
     border-radius: 16px;
     background: linear-gradient(135deg, #636366, #48484a);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    position: relative;
+  }
+  
+  .share-button {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    color: white;
+  }
+  
+  .share-button:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.05);
+  }
+  
+  .share-button:active {
+    transform: scale(0.95);
+  }
+  
+  .share-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .share-button svg {
+    width: 20px;
+    height: 20px;
   }
   
   .header-layout {

src/lib/services/picletExport.ts

@@ -10,49 +10,61 @@ 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 to match original piclet resolution
-  const canvasSize = 1024;
-  canvas.width = canvasSize;
-  canvas.height = canvasSize;
+  // Set canvas size - narrower width to match content
+  const canvasWidth = 700;
+  const canvasHeight = 1536; // Taller to accommodate piclet at bottom
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
   
   // Fill background with solid sky blue
   ctx.fillStyle = '#87CEEB';
-  ctx.fillRect(0, 0, canvasSize, canvasSize);
+  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
   
-  // Load piclet image first to maintain original size
+  // Load piclet image first
   const picletImg = await loadImage(piclet.imageData || piclet.imageUrl);
-  const picletSize = 512; // Display at half the canvas size for better composition
-  const picletX = (canvasSize - picletSize) / 2;
-  const picletY = canvasSize / 2 - picletSize / 2 + 50; // Center with slight offset down
+  const picletSize = 512;
+  const picletX = (canvasWidth - picletSize) / 2;
+  const picletY = canvasHeight - picletSize - 50; // Position near bottom with small margin
   
   // Load and draw grass platform positioned under the piclet
   const grassImg = await loadImage('/assets/grass.PNG');
   const platformSize = picletSize + 100; // Slightly larger than piclet
-  const platformX = (canvasSize - platformSize) / 2;
-  const platformY = picletY + picletSize - 150; // Position so piclet sits on platform
+  const platformX = (canvasWidth - platformSize) / 2;
+  const platformY = picletY + picletSize - 180; // Position so piclet sits on platform
   ctx.drawImage(grassImg, platformX, platformY, platformSize, platformSize);
   
   // Draw piclet on top of platform
   ctx.drawImage(picletImg, picletX, picletY, picletSize, picletSize);
   
-  // Add piclet name only (no level)
+  // Add piclet name with video game font
   ctx.fillStyle = 'white';
-  ctx.strokeStyle = 'black';
-  ctx.lineWidth = 6;
-  ctx.font = 'bold 64px Arial';
+  ctx.strokeStyle = '#1e3a8a'; // Dark blue outline
+  ctx.lineWidth = 8;
+  // Try to use a more gaming-style font, fallback to Impact
+  ctx.font = 'bold 72px "Press Start 2P", "Courier New", Impact, monospace';
   ctx.textAlign = 'center';
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+  ctx.shadowBlur = 10;
+  ctx.shadowOffsetX = 4;
+  ctx.shadowOffsetY = 4;
   
   const nameText = piclet.nickname || piclet.typeId;
   
-  // Draw name with outline
-  ctx.strokeText(nameText, canvasSize / 2, 120);
-  ctx.fillText(nameText, canvasSize / 2, 120);
+  // Draw name with outline and shadow
+  ctx.strokeText(nameText, canvasWidth / 2, 150);
+  ctx.fillText(nameText, canvasWidth / 2, 150);
+  
+  // Reset shadow
+  ctx.shadowColor = 'transparent';
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 0;
   
   // Load and draw translucent watermark
   const logoImg = await loadImage('/assets/snap_logo.png');
-  const logoSize = 150;
+  const logoSize = 120;
   ctx.globalAlpha = 0.3; // More translucent
-  ctx.drawImage(logoImg, canvasSize - logoSize - 30, canvasSize - logoSize - 30, logoSize, logoSize);
+  ctx.drawImage(logoImg, canvasWidth - logoSize - 20, canvasHeight - logoSize - 20, logoSize, logoSize);
   ctx.globalAlpha = 1.0;
   
   // Get the image as blob