@champz-llc/legends-mcp-server 1.6.1 → 1.7.1

package/index.js

@@ -10,7 +10,7 @@ import fetch from 'node-fetch';
 import sharp from 'sharp';
 
 // Helper function to fetch image, resize, and convert to base64
-async function fetchImageAsBase64(imageUrl) {
+async function fetchImageAsBase64(imageUrl, options = {}) {
   try {
     console.error(`[MCP] Fetching image: ${imageUrl}`);
     const response = await fetch(imageUrl);
@@ -27,24 +27,63 @@ async function fetchImageAsBase64(imageUrl) {
     const originalBuffer = Buffer.from(arrayBuffer);
     console.error(`[MCP] Original image size: ${Math.round(originalBuffer.length / 1024)}KB`);
 
-    // Resize image to max 200x200 (perfect for chat) and convert to JPEG for smaller size
-    const resizedBuffer = await sharp(originalBuffer)
-      .resize(200, 200, {
+    // Default options
+    const maxSize = options.maxSize || 300; // Increased from 200 to 300
+    const quality = options.quality || 95; // Increased from 80 to 95
+    const format = options.format || 'jpeg'; // Can override to 'png'
+
+    // Resize image
+    let processor = sharp(originalBuffer)
+      .resize(maxSize, maxSize, {
         fit: 'inside',
         withoutEnlargement: true
-      })
-      .jpeg({ quality: 80, mozjpeg: true }) // JPEG is much smaller than PNG
-      .toBuffer();
+      });
+
+    // Apply format
+    if (format === 'png') {
+      processor = processor.png({ quality, compressionLevel: 6 });
+    } else {
+      processor = processor.jpeg({ quality, mozjpeg: true });
+    }
 
+    const resizedBuffer = await processor.toBuffer();
     const base64 = resizedBuffer.toString('base64');
     console.error(`[MCP] Resized image size: ${Math.round(resizedBuffer.length / 1024)}KB, base64: ${Math.round(base64.length / 1024)}KB`);
-    return base64;
+    return { base64, format };
   } catch (error) {
     console.error(`[MCP] Error processing image ${imageUrl}:`, error.message);
     return null;
   }
 }
 
+// Helper function to fetch token icons (smaller, simpler images)
+async function fetchTokenIcon(iconUrl) {
+  try {
+    console.error(`[MCP] Fetching token icon: ${iconUrl}`);
+    const response = await fetch(iconUrl);
+    if (!response.ok) {
+      console.error(`[MCP] Icon fetch failed: ${response.status}`);
+      return null;
+    }
+
+    const contentType = response.headers.get('content-type');
+    const arrayBuffer = await response.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+
+    // For small icons, keep original or resize to max 64x64, use PNG for transparency
+    const format = contentType?.includes('svg') ? 'png' : 'png';
+    const resizedBuffer = await sharp(buffer)
+      .resize(64, 64, { fit: 'inside', withoutEnlargement: false })
+      .png({ quality: 100 })
+      .toBuffer();
+
+    return resizedBuffer.toString('base64');
+  } catch (error) {
+    console.error(`[MCP] Error fetching token icon:`, error.message);
+    return null;
+  }
+}
+
 // MCP Signature Authentication (optional - for player data access)
 const WALLET = process.env.WALLET;
 const SIGNATURE = process.env.SIGNATURE;
@@ -382,15 +421,231 @@ Last updated: ${new Date(stats.cached_at * 1000).toLocaleString()}`;
           };
         }
 
-        let output = '🍄 Legends of Champz - Claimable Rewards\n\n';
-        output += `${data.message}\n\n`;
-        output += `💰 **Total Claimable:**\n`;
-        if (data.total_champz !== '0.00 CHAMPZ') output += `  🍄 ${data.total_champz}\n`;
-        if (data.total_usdc !== '0.00 USDC') output += `  💵 ${data.total_usdc}\n`;
-        output += `\n📍 Ready to execute on Base L2 (Chain ID: ${data.chain_id})\n`;
+        // Fetch and embed token icons as base64
+        const champzIconBase64 = await fetchTokenIcon('https://img.champz.world/img/icon_small.png');
+        const usdcIconBase64 = await fetchTokenIcon('https://img.champz.world/img/loots/usdc.svg');
+
+        const champzIcon = champzIconBase64 ? `data:image/png;base64,${champzIconBase64}` : '';
+        const usdcIcon = usdcIconBase64 ? `data:image/png;base64,${usdcIconBase64}` : '';
+
+        let claimsHTML = '';
+
+        // CHAMPZ claims
+        if (data.champz_claims.length > 0) {
+          data.champz_claims.forEach((claim, idx) => {
+            const typeIcon = claim.claim_type === 18 ? '👑' : '⚔️';
+            const typeColor = claim.claim_type === 18 ? '#9D4EDD' : '#4EA8DE';
+            claimsHTML += `
+              <div class="claim-card">
+                <div class="claim-header">
+                  <span class="claim-number">#${idx + 1}</span>
+                  <span class="claim-type" style="background: ${typeColor};">${typeIcon} ${claim.claim_type_name}</span>
+                </div>
+                <div class="claim-amount">
+                  <img src="${champzIcon}" alt="CHAMPZ" class="token-icon">
+                  <span class="amount">${claim.amount_human}</span>
+                </div>
+                <div class="claim-footer">
+                  <span class="expires">Expires: ${new Date(claim.expires_at).toLocaleDateString()}</span>
+                </div>
+              </div>
+            `;
+          });
+        }
+
+        // USDC claims
+        if (data.usdc_claims.length > 0) {
+          const champzClaimsCount = data.champz_claims.length;
+          data.usdc_claims.forEach((claim, idx) => {
+            const typeIcon = claim.claim_type === 5 ? '⚔️' : claim.claim_type === 6 ? '👑' : '🤖';
+            const typeColor = claim.claim_type === 5 ? '#4EA8DE' : claim.claim_type === 6 ? '#9D4EDD' : '#FFD700';
+            claimsHTML += `
+              <div class="claim-card">
+                <div class="claim-header">
+                  <span class="claim-number">#${champzClaimsCount + idx + 1}</span>
+                  <span class="claim-type" style="background: ${typeColor};">${typeIcon} ${claim.claim_type_name}</span>
+                </div>
+                <div class="claim-amount">
+                  <img src="${usdcIcon}" alt="USDC" class="token-icon">
+                  <span class="amount">${claim.amount_human}</span>
+                </div>
+                <div class="claim-footer">
+                  <span class="expires">Expires: ${new Date(claim.expires_at).toLocaleDateString()}</span>
+                </div>
+              </div>
+            `;
+          });
+        }
+
+        const html = `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    padding: 20px;
+    min-height: 100vh;
+  }
+  .container {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  .header {
+    text-align: center;
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid rgba(255,255,255,0.1);
+  }
+  .header h1 {
+    color: #fff;
+    font-size: 24px;
+    margin-bottom: 8px;
+  }
+  .header .subtitle {
+    color: #aaa;
+    font-size: 14px;
+  }
+  .claim-card {
+    background: linear-gradient(145deg, #2a2a3e 0%, #1f1f2e 100%);
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 12px;
+    border: 1px solid rgba(255,255,255,0.1);
+    transition: transform 0.2s;
+  }
+  .claim-card:hover {
+    transform: translateY(-2px);
+    border-color: rgba(157, 78, 221, 0.5);
+  }
+  .claim-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+  .claim-number {
+    background: rgba(255,255,255,0.1);
+    color: #fff;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: bold;
+  }
+  .claim-type {
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #fff;
+  }
+  .claim-amount {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+  .token-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.1);
+    padding: 2px;
+  }
+  .amount {
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+  }
+  .claim-footer {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 8px;
+    border-top: 1px solid rgba(255,255,255,0.05);
+  }
+  .expires {
+    color: #888;
+    font-size: 11px;
+  }
+  .summary {
+    background: linear-gradient(135deg, rgba(157, 78, 221, 0.2), rgba(77, 144, 254, 0.2));
+    border: 2px solid #9D4EDD;
+    border-radius: 12px;
+    padding: 16px;
+    margin-top: 16px;
+    text-align: center;
+  }
+  .summary-title {
+    color: #aaa;
+    font-size: 12px;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  .summary-amount {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin: 8px 0;
+  }
+  .summary-amount img {
+    width: 24px;
+    height: 24px;
+  }
+  .summary-amount span {
+    color: #fff;
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .footer-note {
+    text-align: center;
+    color: #888;
+    font-size: 12px;
+    margin-top: 16px;
+    padding: 12px;
+    background: rgba(255,255,255,0.05);
+    border-radius: 8px;
+  }
+</style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>🍄 Claimable Rewards</h1>
+      <div class="subtitle">${data.message}</div>
+    </div>
+
+    ${claimsHTML}
+
+    <div class="summary">
+      <div class="summary-title">Total Claimable</div>
+      ${data.total_champz !== '0 CHAMPZ' ? `
+        <div class="summary-amount">
+          <img src="${champzIcon}" alt="CHAMPZ">
+          <span>${data.total_champz}</span>
+        </div>
+      ` : ''}
+      ${data.total_usdc !== '0.00 USDC' ? `
+        <div class="summary-amount">
+          <img src="${usdcIcon}" alt="USDC">
+          <span>${data.total_usdc}</span>
+        </div>
+      ` : ''}
+    </div>
+
+    <div class="footer-note">
+      📍 Ready to execute on Base L2 (Chain ID: ${data.chain_id})<br>
+      💡 Claims are executed one at a time through Base MCP
+    </div>
+  </div>
+</body>
+</html>`;
 
         return {
-          content: [{ type: 'text', text: output }],
+          content: [{ type: 'text', text: html }],
         };
       } catch (error) {
         return {
@@ -933,9 +1188,11 @@ You can still ask about:
           };
         }
 
-        // Fetch image
+        // Fetch image with higher quality settings
         const imageUrl = `https://img.champz.world${legend.image_path}`;
-        const base64Data = await fetchImageAsBase64(imageUrl);
+        const imageData = await fetchImageAsBase64(imageUrl, { maxSize: 300, quality: 95 });
+        const base64Data = imageData?.base64;
+        const imageFormat = imageData?.format || 'jpeg';
 
         // Build HTML card with embedded image
         const rarityColors = {
@@ -1104,7 +1361,7 @@ You can still ask about:
     </div>
     ${base64Data ? `
     <div class="image-container">
-      <img src="data:image/jpeg;base64,${base64Data}" alt="${legend.name}" class="legend-image">
+      <img src="data:image/${imageFormat};base64,${base64Data}" alt="${legend.name}" class="legend-image">
     </div>` : ''}
     <div class="elements">${elementIcons}</div>
     <div class="stats">
@@ -1188,9 +1445,11 @@ You can still ask about:
           };
         }
 
-        // Fetch and convert image to base64
+        // Fetch and convert image to base64 with higher quality settings
         const imageUrl = `https://img.champz.world${throne.image_path}`;
-        const base64Data = await fetchImageAsBase64(imageUrl);
+        const imageData = await fetchImageAsBase64(imageUrl, { maxSize: 300, quality: 95 });
+        const base64Data = imageData?.base64;
+        const imageFormat = imageData?.format || 'jpeg';
 
         // Build HTML card with embedded image
         const rarityColors = {
@@ -1334,7 +1593,7 @@ You can still ask about:
     </div>
     ${base64Data ? `
     <div class="image-container">
-      <img src="data:image/jpeg;base64,${base64Data}" alt="${throne.name}" class="throne-image">
+      <img src="data:image/${imageFormat};base64,${base64Data}" alt="${throne.name}" class="throne-image">
     </div>` : ''}
     <div class="info">
       <div class="info-row">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@champz-llc/legends-mcp-server",
-  "version": "1.6.1",
+  "version": "1.7.1",
   "description": "MCP server for Legends of Champz - Query game stats, access personal data with signature auth, and claim rewards through Claude Desktop",
   "type": "module",
   "main": "index.js",