fuelcard 1.0.0

package/README.md

@@ -0,0 +1,125 @@
+# Fuelcard 🔥
+
+![Fuelcard Banner](./assets/banner.png)
+
+> **The Most Advanced Discord Music Card Generator**
+> 
+> By **Ramkrishna** & **ZayDocs**
+
+---
+
+## 🚀 Features
+
+- 🎨 **4 Premium Themes** - Fuelex, Classic, Neon, Flame
+- 🦊 **Unique Mascot** - Cyber-fox branding with golden flames
+- ⚡ **High Performance** - Native canvas bindings (@napi-rs/canvas)
+- 🎵 **Universal Compatibility** - Works with DisTube, Riffy, Shoukaku, Erela.js
+- 📦 **Simple API** - Async functions with clean options
+
+---
+
+## 📦 Installation
+
+```bash
+npm install fuelcard
+```
+
+---
+
+## 🎨 Themes
+
+| Theme | Description |
+|-------|-------------|
+| **Fuelex** | Main theme with large mascot on the right |
+| **Classic** | Dark background with orange accents |
+| **Neon** | Glowing cyan/magenta cyberpunk effects |
+| **Flame** | Fire gradient with corner mascot |
+
+---
+
+## 💻 Quick Start
+
+```javascript
+import { Fuelex, Classic, Neon, Flame } from 'fuelcard';
+
+// Generate a Fuelex card (recommended)
+const card = await Fuelex({
+    thumbnail: 'https://...album-art.jpg',
+    trackName: 'Blinding Lights',
+    artistName: 'The Weeknd',
+    progress: 52,
+    startTime: '1:45',
+    endTime: '3:22'
+});
+
+// Use with Discord.js
+import { AttachmentBuilder } from 'discord.js';
+const attachment = new AttachmentBuilder(card, { name: 'now-playing.png' });
+await channel.send({ files: [attachment] });
+```
+
+---
+
+## 🎵 Integration Examples
+
+### DisTube
+```javascript
+client.distube.on('playSong', async (queue, song) => {
+    const card = await Fuelex({
+        thumbnail: song.thumbnail,
+        trackName: song.name,
+        artistName: song.uploader?.name || 'Unknown',
+        progress: 0,
+        startTime: '0:00',
+        endTime: song.formattedDuration
+    });
+    
+    queue.textChannel.send({
+        files: [new AttachmentBuilder(card, { name: 'now-playing.png' })]
+    });
+});
+```
+
+### Riffy / Lavalink
+```javascript
+client.riffy.on('trackStart', async (player, track) => {
+    const card = await Fuelex({
+        thumbnail: track.thumbnail,
+        trackName: track.title,
+        artistName: track.author,
+        progress: 0,
+        startTime: '0:00',
+        endTime: formatTime(track.length)
+    });
+    
+    channel.send({
+        files: [new AttachmentBuilder(card, { name: 'now-playing.png' })]
+    });
+});
+```
+
+---
+
+## ⚙️ Theme Options
+
+### Fuelex Options
+```javascript
+await Fuelex({
+    thumbnail: string | Buffer,      // Album art (required)
+    trackName: string,               // Song title
+    artistName: string,              // Artist name
+    progress: number,                // 0-100
+    startTime: string,               // e.g., '1:45'
+    endTime: string,                 // e.g., '3:22'
+    backgroundColor: string,         // Hex color (default: '#1a1a2e')
+    accentColor: string              // Hex color (default: '#ff6b00')
+});
+```
+
+---
+
+## 📄 License
+
+**Private & Proprietary** - © 2026 Ramkrishna & ZayDocs
+
+This package is closed-source. Unauthorized distribution is prohibited.

package/assets/banner-base.svg

@@ -0,0 +1,76 @@
+<svg width="900" height="280" viewBox="0 0 900 280" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Gold gradient -->
+    <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#FFD700"/>
+      <stop offset="50%" style="stop-color:#FFA500"/>
+      <stop offset="100%" style="stop-color:#FF6B00"/>
+    </linearGradient>
+    
+    <!-- Text glow filter -->
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    
+    <!-- Border glow -->
+    <filter id="borderGlow" x="-10%" y="-10%" width="120%" height="120%">
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="900" height="280" rx="20" fill="#0a0a0a"/>
+  
+  <!-- Subtle gradient overlay -->
+  <rect width="900" height="280" rx="20" fill="url(#goldGradient)" opacity="0.05"/>
+  
+  <!-- Gold border -->
+  <rect x="3" y="3" width="894" height="274" rx="18" stroke="url(#goldGradient)" stroke-width="3" fill="none" filter="url(#borderGlow)"/>
+  
+  <!-- Inner subtle border -->
+  <rect x="8" y="8" width="884" height="264" rx="15" stroke="#FFD700" stroke-width="1" fill="none" opacity="0.3"/>
+  
+  <!-- FUELCARD Text -->
+  <text x="50" y="150" font-family="Arial, sans-serif" font-size="90" font-weight="bold" fill="url(#goldGradient)" filter="url(#glow)">
+    FUELCARD
+  </text>
+  
+  <!-- Subtitle -->
+  <text x="55" y="200" font-family="Arial, sans-serif" font-size="24" fill="#888888">
+    The Most Advanced Music Card Generator
+  </text>
+  
+  <!-- Version badge -->
+  <rect x="50" y="220" width="60" height="24" rx="12" fill="url(#goldGradient)" opacity="0.8"/>
+  <text x="80" y="237" font-family="Arial, sans-serif" font-size="12" fill="#0a0a0a" text-anchor="middle" font-weight="bold">v1.0.0</text>
+  
+  <!-- Authors -->
+  <text x="130" y="237" font-family="Arial, sans-serif" font-size="14" fill="#666666">
+    By Ramkrishna &amp; ZayDocs
+  </text>
+  
+  <!-- Decorative flame elements -->
+  <circle cx="520" cy="140" r="3" fill="#FF6B00" opacity="0.6">
+    <animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="540" cy="130" r="2" fill="#FFD700" opacity="0.5">
+    <animate attributeName="opacity" values="0.5;1;0.5" dur="1.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="530" cy="155" r="2.5" fill="#FFA500" opacity="0.7">
+    <animate attributeName="opacity" values="0.7;1;0.7" dur="1.8s" repeatCount="indefinite"/>
+  </circle>
+  
+  <!-- Fire emoji placeholder for animation -->
+  <text x="560" y="180" font-size="40" opacity="0.15">🔥</text>
+  
+  <!-- Mascot area indicator (actual mascot will be embedded) -->
+  <rect x="620" y="20" width="260" height="240" rx="15" fill="none" stroke="#FFD700" stroke-width="1" opacity="0.2" stroke-dasharray="5,5"/>
+</svg>

package/generate-banner.js

@@ -0,0 +1,145 @@
+/**
+ * Generate banner with mascot for README
+ */
+
+import { createCanvas, loadImage } from '@napi-rs/canvas';
+import { cropImage } from 'cropify';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function generateBanner() {
+    console.log('╔═══════════════════════════════════════════════════════════════╗');
+    console.log('║               FUELCARD BANNER GENERATOR                       ║');
+    console.log('╚═══════════════════════════════════════════════════════════════╝');
+    console.log();
+
+    const width = 900;
+    const height = 280;
+
+    const canvas = createCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+
+    // Background
+    ctx.fillStyle = '#0a0a0a';
+    ctx.beginPath();
+    ctx.roundRect(0, 0, width, height, 20);
+    ctx.fill();
+
+    // Gold gradient border
+    const borderGradient = ctx.createLinearGradient(0, 0, width, height);
+    borderGradient.addColorStop(0, '#FFD700');
+    borderGradient.addColorStop(0.5, '#FFA500');
+    borderGradient.addColorStop(1, '#FF6B00');
+
+    // Outer glow effect
+    ctx.shadowColor = '#FFD700';
+    ctx.shadowBlur = 20;
+    ctx.strokeStyle = borderGradient;
+    ctx.lineWidth = 4;
+    ctx.beginPath();
+    ctx.roundRect(3, 3, width - 6, height - 6, 18);
+    ctx.stroke();
+    ctx.shadowBlur = 0;
+
+    // Inner subtle border
+    ctx.strokeStyle = 'rgba(255, 215, 0, 0.3)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.roundRect(10, 10, width - 20, height - 20, 15);
+    ctx.stroke();
+
+    // FUELCARD text with glow
+    ctx.shadowColor = '#FFD700';
+    ctx.shadowBlur = 15;
+    ctx.font = 'bold 85px Arial';
+
+    // Create gradient for text
+    const textGradient = ctx.createLinearGradient(50, 80, 500, 160);
+    textGradient.addColorStop(0, '#FFD700');
+    textGradient.addColorStop(0.5, '#FFA500');
+    textGradient.addColorStop(1, '#FF6B00');
+
+    ctx.fillStyle = textGradient;
+    ctx.fillText('FUELCARD', 50, 145);
+    ctx.shadowBlur = 0;
+
+    // Subtitle
+    ctx.fillStyle = '#888888';
+    ctx.font = '22px Arial';
+    ctx.fillText('The Most Advanced Music Card Generator', 55, 195);
+
+    // Version badge
+    ctx.fillStyle = '#FF6B00';
+    ctx.beginPath();
+    ctx.roundRect(50, 215, 65, 26, 13);
+    ctx.fill();
+
+    ctx.fillStyle = '#0a0a0a';
+    ctx.font = 'bold 13px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText('v1.0.0', 82, 233);
+    ctx.textAlign = 'left';
+
+    // Authors
+    ctx.fillStyle = '#666666';
+    ctx.font = '15px Arial';
+    ctx.fillText('By Ramkrishna & ZayDocs', 130, 233);
+
+    // Load and draw mascot
+    try {
+        const mascotPath = path.join(__dirname, 'assets', 'mascot.png');
+        const mascotImage = await loadImage(mascotPath);
+
+        // Draw mascot large on the right
+        const mascotSize = 250;
+        const mascotX = width - mascotSize - 30;
+        const mascotY = (height - mascotSize) / 2 + 10;
+
+        ctx.drawImage(mascotImage, mascotX, mascotY, mascotSize, mascotSize);
+
+        console.log('✓ Mascot loaded and drawn');
+    } catch (e) {
+        console.log('✗ Mascot not found:', e.message);
+    }
+
+    // Add some flame particles
+    const particles = [
+        { x: 530, y: 130, r: 4, color: '#FF6B00' },
+        { x: 550, y: 120, r: 3, color: '#FFD700' },
+        { x: 540, y: 145, r: 3.5, color: '#FFA500' },
+        { x: 560, y: 135, r: 2.5, color: '#FF6B00' },
+        { x: 545, y: 155, r: 3, color: '#FFD700' },
+    ];
+
+    particles.forEach(p => {
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+        ctx.fillStyle = p.color;
+        ctx.globalAlpha = 0.7;
+        ctx.fill();
+    });
+    ctx.globalAlpha = 1;
+
+    // Save banner
+    const outputPath = path.join(__dirname, 'assets', 'banner.png');
+
+    // Crop with rounded corners
+    const finalImage = await cropImage({
+        imagePath: canvas.toBuffer('image/png'),
+        width: width,
+        height: height,
+        borderRadius: 25
+    });
+
+    fs.writeFileSync(outputPath, finalImage);
+    console.log('✓ Banner saved:', outputPath);
+
+    console.log();
+    console.log('═══════════════════════════════════════════════════════════════');
+}
+
+generateBanner().catch(console.error);

package/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "fuelcard",
+    "version": "1.0.0",
+    "description": "The most advanced Discord music card generator - stunning visual cards for your music bot",
+    "type": "module",
+    "main": "src/index.js",
+    "scripts": {
+        "test": "node test.js"
+    },
+    "keywords": [
+        "discord",
+        "music",
+        "card",
+        "musicard",
+        "lavalink",
+        "riffy",
+        "distube",
+        "canvas",
+        "image",
+        "generator"
+    ],
+    "author": "Ramkrishna & ZayDocs",
+    "license": "UNLICENSED",
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "dependencies": {
+        "@napi-rs/canvas": "^0.1.83",
+        "cropify": "^2.0.1"
+    }
+}

package/src/index.js

@@ -0,0 +1,25 @@
+/**
+ * ╔═══════════════════════════════════════════════════════════════╗
+ * ║                        FUELCARD                                ║
+ * ║     The Most Advanced Discord Music Card Generator             ║
+ * ║                                                                ║
+ * ║                 By Ramkrishna & ZayDocs                        ║
+ * ╚═══════════════════════════════════════════════════════════════╝
+ * 
+ * @module fuelcard
+ * @private
+ */
+
+// Main themes (like reference cards with mascot)
+export { Fuego } from './themes/Fuego.js';      // Orange/Gold
+export { Aqua } from './themes/Aqua.js';        // Blue/Cyan
+export { Rosa } from './themes/Rosa.js';        // Pink/Magenta
+export { Oscuro } from './themes/Oscuro.js';    // Dark with accent
+
+// Premium themes
+export { Flame } from './themes/Flame.js';      // Fire gradient
+export { Fuelex } from './themes/Fuelex.js';    // Wide with mascot
+
+// Version info
+export const version = '1.0.0';
+export const authors = ['Ramkrishna', 'ZayDocs'];

package/src/themes/Aqua.js

@@ -0,0 +1,156 @@
+/**
+ * ╔═══════════════════════════════════════════════════════════════╗
+ * ║              FUELCARD - Aqua Theme                             ║
+ * ║    Blue/Cyan theme with mascot (like reference cards)          ║
+ * ╚═══════════════════════════════════════════════════════════════╝
+ */
+
+import { createCanvas, loadImage } from '@napi-rs/canvas';
+import { cropImage } from 'cropify';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const MASCOT_PATH = path.join(__dirname, '../../assets/mascot.png');
+
+/**
+ * Generate an Aqua-styled music card (blue/cyan like reference)
+ */
+export const Aqua = async ({
+    thumbnail,
+    trackName = 'Unknown Track',
+    artistName = 'Unknown Artist',
+    progress = 0,
+    startTime = '0:00',
+    endTime = '0:00'
+}) => {
+    const width = 600;
+    const height = 170;
+
+    if (trackName.length > 22) trackName = trackName.substring(0, 19) + '...';
+    if (artistName.length > 28) artistName = artistName.substring(0, 25) + '...';
+
+    const safeProgress = Math.min(Math.max(progress, 0), 100);
+
+    const canvas = createCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+
+    // Blue/Cyan gradient background
+    const bgGradient = ctx.createLinearGradient(0, 0, width, height);
+    bgGradient.addColorStop(0, '#3498db');
+    bgGradient.addColorStop(1, '#2980b9');
+
+    ctx.fillStyle = bgGradient;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, width, height, 15);
+    ctx.fill();
+
+    // Subtle overlay
+    const overlay = ctx.createLinearGradient(0, 0, width, 0);
+    overlay.addColorStop(0, 'rgba(0,0,0,0.05)');
+    overlay.addColorStop(0.6, 'rgba(0,0,0,0)');
+    overlay.addColorStop(1, 'rgba(0,0,0,0.15)');
+    ctx.fillStyle = overlay;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, width, height, 15);
+    ctx.fill();
+
+    // Thumbnail
+    const thumbSize = 100;
+    const thumbX = 20;
+    const thumbY = (height - thumbSize) / 2;
+
+    try {
+        const thumbBuffer = await cropImage({
+            imagePath: thumbnail,
+            width: thumbSize,
+            height: thumbSize,
+            borderRadius: 12
+        });
+        const thumbImage = await loadImage(thumbBuffer);
+
+        ctx.shadowColor = 'rgba(0,0,0,0.3)';
+        ctx.shadowBlur = 10;
+        ctx.shadowOffsetX = 3;
+        ctx.shadowOffsetY = 3;
+        ctx.drawImage(thumbImage, thumbX, thumbY, thumbSize, thumbSize);
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+    } catch (e) {
+        ctx.fillStyle = 'rgba(0,0,0,0.3)';
+        ctx.beginPath();
+        ctx.roundRect(thumbX, thumbY, thumbSize, thumbSize, 12);
+        ctx.fill();
+
+        ctx.fillStyle = '#ffffff';
+        ctx.font = 'bold 40px Arial';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('♪', thumbX + thumbSize / 2, thumbY + thumbSize / 2);
+    }
+
+    // Text
+    const textX = thumbX + thumbSize + 20;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+
+    ctx.fillStyle = '#ffffff';
+    ctx.font = 'bold 22px Arial';
+    ctx.fillText(trackName, textX, 25);
+
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    ctx.font = '16px Arial';
+    ctx.fillText(artistName, textX, 55);
+
+    // Progress bar
+    const progressX = textX;
+    const progressY = 95;
+    const progressWidth = 200;
+    const progressHeight = 8;
+    const actualProgress = (safeProgress / 100) * progressWidth;
+
+    ctx.fillStyle = 'rgba(0,0,0,0.2)';
+    ctx.beginPath();
+    ctx.roundRect(progressX, progressY, progressWidth, progressHeight, 4);
+    ctx.fill();
+
+    if (safeProgress > 0) {
+        ctx.fillStyle = '#ffffff';
+        ctx.beginPath();
+        ctx.roundRect(progressX, progressY, actualProgress, progressHeight, 4);
+        ctx.fill();
+    }
+
+    // Timestamps
+    ctx.fillStyle = 'rgba(255,255,255,0.6)';
+    ctx.font = '12px Arial';
+    ctx.textAlign = 'left';
+    ctx.fillText(startTime, progressX, progressY + 14);
+    ctx.textAlign = 'right';
+    ctx.fillText(endTime, progressX + progressWidth, progressY + 14);
+
+    // Mascot
+    try {
+        const mascotImage = await loadImage(MASCOT_PATH);
+        const mascotHeight = 190;
+        const mascotWidth = 190;
+        const mascotX = width - mascotWidth + 40;
+        const mascotY = height - mascotHeight + 15;
+
+        ctx.drawImage(mascotImage, mascotX, mascotY, mascotWidth, mascotHeight);
+    } catch (e) { }
+
+    const finalImage = await cropImage({
+        imagePath: canvas.toBuffer('image/png'),
+        width: width,
+        height: height,
+        borderRadius: 20
+    });
+
+    return finalImage;
+};
+
+export default Aqua;