@champz-llc/legends-mcp-server 1.3.8 → 1.5.0

package/index.js

@@ -27,13 +27,13 @@ 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 300x300 (maintains aspect ratio) and compress
+    // Resize image to max 200x200 (perfect for chat) and convert to JPEG for smaller size
     const resizedBuffer = await sharp(originalBuffer)
-      .resize(300, 300, {
+      .resize(200, 200, {
         fit: 'inside',
         withoutEnlargement: true
       })
-      .png({ quality: 85, compressionLevel: 9 })
+      .jpeg({ quality: 80, mozjpeg: true }) // JPEG is much smaller than PNG
       .toBuffer();
 
     const base64 = resizedBuffer.toString('base64');
@@ -659,39 +659,50 @@ You can still ask about:
         const stats = data.statistics;
         const claims = data.claims;
 
-        let output = `Legends of Champz - Your Statistics\n\n`;
-        output += `Player: ${displayName}\n`;
-        output += `Wallet: ${data.wallet}\n`;
+        let output = `🍄 **LEGENDS OF CHAMPZ** - Player Stats 🍄\n\n`;
+        output += `👤 **Player:** ${displayName}\n`;
         if (data.basename) {
-          output += `Basename: ${data.basename}\n`;
+          output += `🎯 **Basename:** ${data.basename}\n`;
         }
-        output += `Member since: ${new Date(stats.member_since).toLocaleDateString()}\n\n`;
-
-        output += `📦 Packs & Legends:\n`;
-        output += `  • Total packs opened: ${stats.total_packs_opened}\n`;
-        output += `  • CHAMPZ spent on packs: ${stats.champz_spent_on_packs.toLocaleString()}\n`;
-        output += `  • Legends owned: ${stats.legends_owned}\n`;
-        output += `  • Saved trainer slots: ${stats.saved_trainer_slots}\n\n`;
-
-        output += `⚔️  Battle Statistics:\n`;
-        output += `  • Total battles: ${stats.total_battles}\n`;
-        output += `  • Wins: ${stats.battles_won} (${(stats.win_rate * 100).toFixed(1)}% win rate)\n`;
-        output += `  • Losses: ${stats.battles_lost}\n`;
-        output += `  • Current streak: ${stats.current_win_streak}\n`;
-        output += `  • Best streak: ${stats.best_win_streak}\n\n`;
-
-        output += `👑 Thrones & Guardian:\n`;
-        output += `  • Thrones owned: ${stats.thrones_owned}\n`;
-        output += `  • Times held guardian: ${stats.times_held_guardian}\n`;
-        output += `  • CHAMPZ spent on guardian: ${stats.champz_spent_on_guardian.toLocaleString()}\n\n`;
-
-        output += `💰 Claims History:\n`;
-        output += `  • Total USDC claimed: $${claims.total_usdc_claimed}\n`;
-        output += `  • Total CHAMPZ claimed: ${claims.total_champz_claimed.toLocaleString()}\n`;
-        output += `  • Battle USDC (type 6): ${claims.by_type['6'].count} claims, $${claims.by_type['6'].total_amount}\n`;
-        output += `  • Battle CHAMPZ (type 5): ${claims.by_type['5'].count} claims, ${claims.by_type['5'].total_amount.toLocaleString()} tokens\n`;
-        output += `  • Guardian USDC (type 19): ${claims.by_type['19'].count} claims, $${claims.by_type['19'].total_amount}\n`;
-        output += `  • Guardian CHAMPZ (type 18): ${claims.by_type['18'].count} claims, ${claims.by_type['18'].total_amount.toLocaleString()} tokens\n\n`;
+        output += `📅 **Member Since:** ${new Date(stats.member_since).toLocaleDateString()} - Let's go! 🎮\n\n`;
+
+        output += `━━━━━━━━━━━━━━━━━━━━━━\n`;
+        output += `📦 **PACKS & LEGENDS**\n`;
+        output += `━━━━━━━━━━━━━━━━━━━━━━\n`;
+        output += `  🎲 Packs opened: **${stats.total_packs_opened}** ${stats.total_packs_opened > 50 ? '(Pack master! 🔥)' : ''}\n`;
+        output += `  💎 CHAMPZ spent: **${stats.champz_spent_on_packs.toLocaleString()}** tokens\n`;
+        output += `  🍄 Legends owned: **${stats.legends_owned}** ${stats.legends_owned > 30 ? '(Epic collection! ⭐)' : ''}\n`;
+        output += `  ⭐ Trainer slots: **${stats.saved_trainer_slots}**\n\n`;
+
+        output += `━━━━━━━━━━━━━━━━━━━━━━\n`;
+        output += `⚔️  **BATTLE RECORD**\n`;
+        output += `━━━━━━━━━━━━━━━━━━━━━━\n`;
+        output += `  🎯 Total battles: **${stats.total_battles}** fights!\n`;
+        const winRate = (stats.win_rate * 100).toFixed(1);
+        const winRateEmoji = winRate >= 70 ? '🔥🔥🔥' : winRate >= 60 ? '🔥🔥' : winRate >= 50 ? '🔥' : '💪';
+        output += `  🏆 Wins: **${stats.battles_won}** (${winRate}% win rate ${winRateEmoji})\n`;
+        output += `  💀 Losses: **${stats.battles_lost}**\n`;
+        output += `  ⚡ Current streak: **${stats.current_win_streak}** ${stats.current_win_streak >= 5 ? '(ON FIRE! 🔥)' : ''}\n`;
+        output += `  🌟 Best streak: **${stats.best_win_streak}** ${stats.best_win_streak >= 10 ? '(Legendary! 💎)' : ''}\n\n`;
+
+        output += `━━━━━━━━━━━━━━━━━━━━━━\n`;
+        output += `👑 **THRONES & GUARDIAN**\n`;
+        output += `━━━━━━━━━━━━━━━━━━━━━━\n`;
+        output += `  🏆 Thrones owned: **${stats.thrones_owned}** ${stats.thrones_owned > 0 ? '(Champion! 👑)' : ''}\n`;
+        output += `  🛡️  Times held guardian: **${stats.times_held_guardian}** ${stats.times_held_guardian > 5 ? '(Guardian master! ⚡)' : ''}\n`;
+        output += `  💰 CHAMPZ spent: **${stats.champz_spent_on_guardian.toLocaleString()}** tokens\n\n`;
+
+        output += `━━━━━━━━━━━━━━━━━━━━━━\n`;
+        output += `💵 **REWARDS CLAIMED**\n`;
+        output += `━━━━━━━━━━━━━━━━━━━━━━\n`;
+        const totalUSDC = claims.total_usdc_claimed;
+        const totalCHAMPZ = claims.total_champz_claimed;
+        output += `  💵 Total USDC: **$${totalUSDC}** ${totalUSDC > 50 ? '(Big earner! 💰)' : totalUSDC > 20 ? '(Nice! 🎯)' : ''}\n`;
+        output += `  🍄 Total CHAMPZ: **${totalCHAMPZ.toLocaleString()}** tokens ${totalCHAMPZ > 10000 ? '(Whale alert! 🐋)' : ''}\n`;
+        if (claims.by_type['6'].count > 0 || claims.by_type['19'].count > 0) {
+          output += `  🎉 You're earning rewards - keep battling! ⚔️\n`;
+        }
+        output += `\n`;
 
         // Build content array with text and images
         const content = [
@@ -820,37 +831,214 @@ You can still ask about:
           };
         }
 
-        // Build output
-        let output = `Legend #${legend.legend_id} - ${legend.name}\n\n`;
-        output += `Rarity: ${legend.rarity.toUpperCase()}\n`;
-        output += `Total Power: ${legend.total_power}\n`;
-        output += `ATK: ${legend.attack} | DEF: ${legend.defense} | SPD: ${legend.speed}\n`;
-        output += `Elements: ${legend.elements.join(', ')}\n`;
-        output += `Rolled: ${new Date(legend.rolled_at).toLocaleDateString()}\n`;
-        output += `Saved: ${legend.is_saved ? 'Yes ⭐' : 'No'}\n`;
-
         // Fetch image
         const imageUrl = `https://img.champz.world${legend.image_path}`;
-
-        // Fetch and convert image to base64
         const base64Data = await fetchImageAsBase64(imageUrl);
 
-        const content = [
-          {
-            type: 'text',
-            text: output,
-          },
-        ];
+        // Build HTML card with embedded image
+        const rarityColors = {
+          unique: '#FFD700',
+          legendary: '#FF6B35',
+          epic: '#9D4EDD',
+          rare: '#4EA8DE',
+          common: '#CCCCCC'
+        };
+        const elementEmojis = {
+          fire: '🔥',
+          water: '💧',
+          wind: '🌪️',
+          earth: '🌍',
+          light: '✨',
+          dark: '🌑'
+        };
 
-        if (base64Data) {
-          content.push({
-            type: 'image',
-            data: base64Data,
-            mimeType: 'image/png',
-          });
-        }
+        const elementIcons = legend.elements.map(e => `${elementEmojis[e] || '⭐'} ${e.charAt(0).toUpperCase() + e.slice(1)}`).join(' ');
+        const rarityColor = rarityColors[legend.rarity] || '#9D4EDD';
+        const rarityBadge = legend.rarity.toUpperCase();
+
+        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%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 20px;
+  }
+  .card {
+    background: linear-gradient(145deg, #2a2a3e 0%, #1f1f2e 100%);
+    border-radius: 16px;
+    padding: 24px;
+    max-width: 400px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    border: 2px solid ${rarityColor};
+    position: relative;
+    overflow: hidden;
+  }
+  .card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, ${rarityColor}, transparent);
+  }
+  .header {
+    text-align: center;
+    margin-bottom: 16px;
+    border-bottom: 2px solid rgba(255,255,255,0.1);
+    padding-bottom: 12px;
+  }
+  .rarity-badge {
+    background: ${rarityColor};
+    color: #000;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-weight: bold;
+    font-size: 11px;
+    display: inline-block;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  .legend-id {
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
+  .legend-name {
+    color: ${rarityColor};
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .image-container {
+    text-align: center;
+    margin: 16px 0;
+    background: rgba(0,0,0,0.3);
+    border-radius: 12px;
+    padding: 12px;
+    border: 1px solid rgba(255,255,255,0.1);
+  }
+  .legend-image {
+    max-width: 200px;
+    border-radius: 8px;
+    display: block;
+    margin: 0 auto;
+  }
+  .elements {
+    text-align: center;
+    font-size: 14px;
+    color: #fff;
+    margin: 12px 0;
+    padding: 8px;
+    background: rgba(255,255,255,0.05);
+    border-radius: 8px;
+  }
+  .stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    margin: 16px 0;
+  }
+  .stat {
+    background: rgba(255,255,255,0.05);
+    padding: 12px;
+    border-radius: 8px;
+    border-left: 3px solid ${rarityColor};
+  }
+  .stat-label {
+    color: #aaa;
+    font-size: 12px;
+    margin-bottom: 4px;
+  }
+  .stat-value {
+    color: #fff;
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .power {
+    grid-column: 1 / -1;
+    text-align: center;
+    background: linear-gradient(135deg, rgba(157, 78, 221, 0.2), rgba(77, 144, 254, 0.2));
+    border: 2px solid ${rarityColor};
+  }
+  .power .stat-value {
+    font-size: 24px;
+    color: ${rarityColor};
+  }
+  .footer {
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid rgba(255,255,255,0.1);
+    text-align: center;
+    color: #888;
+    font-size: 12px;
+  }
+  .saved-badge {
+    display: inline-block;
+    background: linear-gradient(135deg, #FFD700, #FFA500);
+    color: #000;
+    padding: 6px 12px;
+    border-radius: 8px;
+    font-weight: bold;
+    margin-top: 8px;
+  }
+</style>
+</head>
+<body>
+  <div class="card">
+    <div class="header">
+      <div class="rarity-badge">${rarityBadge}</div>
+      <div class="legend-id">Legend #${legend.legend_id}</div>
+      <div class="legend-name">🍄 ${legend.name}</div>
+    </div>
+    ${base64Data ? `
+    <div class="image-container">
+      <img src="data:image/jpeg;base64,${base64Data}" alt="${legend.name}" class="legend-image">
+    </div>` : ''}
+    <div class="elements">${elementIcons}</div>
+    <div class="stats">
+      <div class="stat power">
+        <div class="stat-label">⚡ TOTAL POWER</div>
+        <div class="stat-value">${legend.total_power}</div>
+      </div>
+      <div class="stat">
+        <div class="stat-label">⚔️ ATTACK</div>
+        <div class="stat-value">${legend.attack}</div>
+      </div>
+      <div class="stat">
+        <div class="stat-label">🛡️ DEFENSE</div>
+        <div class="stat-value">${legend.defense}</div>
+      </div>
+      <div class="stat">
+        <div class="stat-label">💨 SPEED</div>
+        <div class="stat-value">${legend.speed}</div>
+      </div>
+    </div>
+    <div class="footer">
+      📅 Rolled: ${new Date(legend.rolled_at).toLocaleDateString()}
+      ${legend.is_saved ? '<div class="saved-badge">⭐ SAVED TRAINER</div>' : ''}
+    </div>
+  </div>
+</body>
+</html>`;
 
-        return { content };
+        return {
+          content: [
+            {
+              type: 'text',
+              text: html,
+            },
+          ],
+        };
       } catch (error) {
         return {
           content: [
@@ -898,32 +1086,180 @@ You can still ask about:
           };
         }
 
-        // Build output
-        let output = `Throne #${throne.throne_id} - ${throne.name}\n\n`;
-        output += `Rarity: ${throne.rarity.toUpperCase()}\n`;
-        output += `Earned in Cycle: ${throne.cycle_id}\n`;
-        output += `Earned: ${new Date(throne.earned_at).toLocaleDateString()}\n`;
-
         // Fetch and convert image to base64
         const imageUrl = `https://img.champz.world${throne.image_path}`;
         const base64Data = await fetchImageAsBase64(imageUrl);
 
-        const content = [
-          {
-            type: 'text',
-            text: output,
-          },
-        ];
+        // Build HTML card with embedded image
+        const rarityColors = {
+          legendary: '#FFD700',
+          epic: '#9D4EDD',
+          rare: '#4EA8DE',
+          common: '#CCCCCC'
+        };
 
-        if (base64Data) {
-          content.push({
-            type: 'image',
-            data: base64Data,
-            mimeType: 'image/png',
-          });
-        }
+        const rarityColor = rarityColors[throne.rarity] || '#FFD700';
+        const rarityBadge = throne.rarity.toUpperCase();
+
+        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%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 20px;
+  }
+  .card {
+    background: linear-gradient(145deg, #2a2a3e 0%, #1f1f2e 100%);
+    border-radius: 16px;
+    padding: 24px;
+    max-width: 400px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    border: 2px solid ${rarityColor};
+    position: relative;
+    overflow: hidden;
+  }
+  .card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, ${rarityColor}, transparent);
+  }
+  .header {
+    text-align: center;
+    margin-bottom: 16px;
+    border-bottom: 2px solid rgba(255,255,255,0.1);
+    padding-bottom: 12px;
+  }
+  .rarity-badge {
+    background: ${rarityColor};
+    color: #000;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-weight: bold;
+    font-size: 11px;
+    display: inline-block;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  .throne-id {
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
+  .throne-name {
+    color: ${rarityColor};
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .image-container {
+    text-align: center;
+    margin: 16px 0;
+    background: rgba(0,0,0,0.3);
+    border-radius: 12px;
+    padding: 12px;
+    border: 1px solid rgba(255,255,255,0.1);
+  }
+  .throne-image {
+    max-width: 200px;
+    border-radius: 8px;
+    display: block;
+    margin: 0 auto;
+  }
+  .info {
+    background: rgba(255,255,255,0.05);
+    padding: 16px;
+    border-radius: 8px;
+    border-left: 3px solid ${rarityColor};
+    margin: 16px 0;
+  }
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    padding: 8px 0;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+  }
+  .info-row:last-child {
+    border-bottom: none;
+  }
+  .info-label {
+    color: #aaa;
+    font-size: 14px;
+  }
+  .info-value {
+    font-weight: bold;
+    font-size: 14px;
+  }
+  .trophy-message {
+    text-align: center;
+    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
+    border: 2px solid ${rarityColor};
+    padding: 16px;
+    border-radius: 8px;
+    margin-top: 16px;
+  }
+  .trophy-message .emoji {
+    font-size: 32px;
+    display: block;
+    margin-bottom: 8px;
+  }
+  .trophy-message .text {
+    color: #fff;
+    font-weight: bold;
+    font-size: 14px;
+  }
+</style>
+</head>
+<body>
+  <div class="card">
+    <div class="header">
+      <div class="rarity-badge">${rarityBadge} THRONE</div>
+      <div class="throne-id">Throne #${throne.throne_id}</div>
+      <div class="throne-name">👑 ${throne.name}</div>
+    </div>
+    ${base64Data ? `
+    <div class="image-container">
+      <img src="data:image/jpeg;base64,${base64Data}" alt="${throne.name}" class="throne-image">
+    </div>` : ''}
+    <div class="info">
+      <div class="info-row">
+        <span class="info-label">🎮 Cycle</span>
+        <span class="info-value">#${throne.cycle_id}</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">📅 Date Earned</span>
+        <span class="info-value">${new Date(throne.earned_at).toLocaleDateString()}</span>
+      </div>
+    </div>
+    <div class="trophy-message">
+      <span class="emoji">🏆</span>
+      <span class="text">CHAMPION! You held the Guardian position and won Cycle ${throne.cycle_id}!</span>
+    </div>
+  </div>
+</body>
+</html>`;
 
-        return { content };
+        return {
+          content: [
+            {
+              type: 'text',
+              text: html,
+            },
+          ],
+        };
       } catch (error) {
         return {
           content: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@champz-llc/legends-mcp-server",
-  "version": "1.3.8",
+  "version": "1.5.0",
   "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",