fuelcard 1.0.0

package/src/themes/Flame.js

@@ -0,0 +1,224 @@
+/**
+ * ╔═══════════════════════════════════════════════════════════════╗
+ * ║               FUELCARD - Flame Theme                           ║
+ * ║       Premium theme with Fuelcard mascot                       ║
+ * ╚═══════════════════════════════════════════════════════════════╝
+ */
+
+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);
+
+// Path to mascot image
+const MASCOT_PATH = path.join(__dirname, '../../assets/mascot.png');
+
+/**
+ * @typedef {Object} FlameOptions
+ * @property {string|Buffer} thumbnail - Album art URL or buffer
+ * @property {string} [trackName='Unknown Track'] - Song title
+ * @property {string} [artistName='Unknown Artist'] - Artist name
+ * @property {string} [requester] - Who requested the track
+ * @property {number} [progress=0] - Progress percentage (0-100)
+ * @property {string} [startTime='0:00'] - Current timestamp
+ * @property {string} [endTime='0:00'] - Total duration
+ * @property {boolean} [showMascot=true] - Show the Fuelcard mascot
+ */
+
+/**
+ * Generate a flame-styled music card with optional mascot
+ * @param {FlameOptions} options
+ * @returns {Promise<Buffer>}
+ */
+export const Flame = async ({
+    thumbnail,
+    trackName = 'Unknown Track',
+    artistName = 'Unknown Artist',
+    requester = '',
+    progress = 0,
+    startTime = '0:00',
+    endTime = '0:00',
+    showMascot = true
+}) => {
+    const width = 900;
+    const height = 280;
+
+    // Flame theme colors
+    const primaryColor = '#ff6b00';    // Orange
+    const secondaryColor = '#ffd700';  // Gold
+    const bgColor = '#0a0a0a';
+
+    // Truncate text
+    if (trackName.length > 32) trackName = trackName.substring(0, 29) + '...';
+    if (artistName.length > 35) artistName = artistName.substring(0, 32) + '...';
+    if (requester && requester.length > 20) requester = requester.substring(0, 17) + '...';
+
+    const safeProgress = Math.min(Math.max(progress, 0), 100);
+    const progressWidth = (safeProgress / 100) * 450;
+
+    // Create canvas
+    const canvas = createCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+
+    // Dark background with subtle gradient
+    const gradient = ctx.createLinearGradient(0, 0, width, height);
+    gradient.addColorStop(0, bgColor);
+    gradient.addColorStop(0.5, '#111111');
+    gradient.addColorStop(1, '#0a0a0a');
+
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, width, height, 20);
+    ctx.fill();
+
+    // Flame gradient border
+    const borderGradient = ctx.createLinearGradient(0, 0, width, 0);
+    borderGradient.addColorStop(0, primaryColor);
+    borderGradient.addColorStop(0.5, secondaryColor);
+    borderGradient.addColorStop(1, primaryColor);
+
+    ctx.strokeStyle = borderGradient;
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.roundRect(2, 2, width - 4, height - 4, 19);
+    ctx.stroke();
+
+    // Load and draw thumbnail
+    try {
+        const thumbBuffer = await cropImage({
+            imagePath: thumbnail,
+            width: 200,
+            height: 200,
+            borderRadius: 20
+        });
+        const thumbImage = await loadImage(thumbBuffer);
+
+        // Flame glow effect
+        ctx.shadowColor = primaryColor;
+        ctx.shadowBlur = 20;
+        ctx.fillStyle = primaryColor;
+        ctx.beginPath();
+        ctx.roundRect(30, 40, 200, 200, 20);
+        ctx.fill();
+        ctx.shadowBlur = 0;
+
+        // Draw thumbnail
+        ctx.drawImage(thumbImage, 30, 40, 200, 200);
+
+        // Gold border
+        ctx.strokeStyle = secondaryColor;
+        ctx.lineWidth = 3;
+        ctx.beginPath();
+        ctx.roundRect(30, 40, 200, 200, 20);
+        ctx.stroke();
+    } catch (e) {
+        // Placeholder
+        ctx.fillStyle = '#1a1a1a';
+        ctx.beginPath();
+        ctx.roundRect(30, 40, 200, 200, 20);
+        ctx.fill();
+
+        ctx.fillStyle = primaryColor;
+        ctx.font = 'bold 60px Arial';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('🔥', 130, 140);
+    }
+
+    // Draw mascot if enabled
+    if (showMascot) {
+        try {
+            const mascotImage = await loadImage(MASCOT_PATH);
+            // Draw mascot in bottom right corner
+            ctx.drawImage(mascotImage, width - 140, height - 140, 130, 130);
+        } catch (e) {
+            // Mascot not found, continue without it
+        }
+    }
+
+    // Text content
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+
+    // Track name with flame glow
+    ctx.shadowColor = primaryColor;
+    ctx.shadowBlur = 10;
+    ctx.fillStyle = '#ffffff';
+    ctx.font = 'bold 30px Arial';
+    ctx.fillText(trackName, 280, 45);
+    ctx.shadowBlur = 0;
+
+    // Artist name
+    ctx.fillStyle = '#cccccc';
+    ctx.font = '20px Arial';
+    ctx.fillText(artistName, 280, 85);
+
+    // Requester with gold accent
+    if (requester) {
+        ctx.fillStyle = secondaryColor;
+        ctx.font = '16px Arial';
+        ctx.fillText(`Requested by ${requester}`, 280, 120);
+    }
+
+    // Progress bar
+    const progressY = 175;
+    const progressX = 280;
+    const barWidth = showMascot ? 450 : 520;
+    const actualProgressWidth = (safeProgress / 100) * barWidth;
+
+    // Background
+    ctx.fillStyle = 'rgba(255,255,255,0.12)';
+    ctx.beginPath();
+    ctx.roundRect(progressX, progressY, barWidth, 14, 7);
+    ctx.fill();
+
+    // Flame gradient fill
+    if (safeProgress > 0) {
+        const fillGradient = ctx.createLinearGradient(progressX, 0, progressX + actualProgressWidth, 0);
+        fillGradient.addColorStop(0, primaryColor);
+        fillGradient.addColorStop(1, secondaryColor);
+
+        ctx.fillStyle = fillGradient;
+        ctx.beginPath();
+        ctx.roundRect(progressX, progressY, actualProgressWidth, 14, 7);
+        ctx.fill();
+
+        // Glowing knob
+        ctx.shadowColor = secondaryColor;
+        ctx.shadowBlur = 10;
+        ctx.fillStyle = '#ffffff';
+        ctx.beginPath();
+        ctx.arc(progressX + actualProgressWidth, progressY + 7, 9, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.shadowBlur = 0;
+    }
+
+    // Timestamps
+    ctx.fillStyle = '#888888';
+    ctx.font = '14px Arial';
+    ctx.textAlign = 'left';
+    ctx.fillText(startTime, progressX, progressY + 22);
+    ctx.textAlign = 'right';
+    ctx.fillText(endTime, progressX + barWidth, progressY + 22);
+
+    // Branding
+    ctx.fillStyle = '#444444';
+    ctx.font = '12px Arial';
+    ctx.textAlign = 'right';
+    ctx.fillText('Powered by Fuelcard', width - 20, height - 15);
+
+    // Crop final image
+    const finalImage = await cropImage({
+        imagePath: canvas.toBuffer('image/png'),
+        width: width,
+        height: height,
+        borderRadius: 30
+    });
+
+    return finalImage;
+};
+
+export default Flame;

package/src/themes/Fuego.js

@@ -0,0 +1,155 @@
+/**
+ * ╔═══════════════════════════════════════════════════════════════╗
+ * ║              FUELCARD - Fuego Theme                            ║
+ * ║    Orange/Gold 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 a Fuego-styled music card (orange/gold like reference)
+ */
+export const Fuego = async ({
+    thumbnail,
+    trackName = 'Unknown Track',
+    artistName = 'Unknown Artist',
+    progress = 0,
+    startTime = '0:00',
+    endTime = '0:00'
+}) => {
+    const width = 600;
+    const height = 170;
+
+    // Truncate text
+    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');
+
+    // Solid orange/gold background
+    ctx.fillStyle = '#e67e22';
+    ctx.beginPath();
+    ctx.roundRect(0, 0, width, height, 15);
+    ctx.fill();
+
+    // Subtle gradient overlay
+    const gradient = ctx.createLinearGradient(0, 0, width, 0);
+    gradient.addColorStop(0, 'rgba(0,0,0,0.1)');
+    gradient.addColorStop(0.6, 'rgba(0,0,0,0)');
+    gradient.addColorStop(1, 'rgba(0,0,0,0.2)');
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, width, height, 15);
+    ctx.fill();
+
+    // Load 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);
+
+        // Shadow behind thumbnail
+        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 content
+    const textX = thumbX + thumbSize + 20;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+
+    // Track name (white, bold)
+    ctx.fillStyle = '#ffffff';
+    ctx.font = 'bold 22px Arial';
+    ctx.fillText(trackName, textX, 25);
+
+    // Artist name (darker)
+    ctx.fillStyle = 'rgba(0,0,0,0.6)';
+    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(0,0,0,0.5)';
+    ctx.font = '12px Arial';
+    ctx.fillText(startTime, progressX, progressY + 14);
+    ctx.textAlign = 'right';
+    ctx.fillText(endTime, progressX + progressWidth, progressY + 14);
+
+    // Draw mascot on the right (extending beyond)
+    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 Fuego;

package/src/themes/Fuelex.js

@@ -0,0 +1,212 @@
+/**
+ * ╔═══════════════════════════════════════════════════════════════╗
+ * ║              FUELCARD - Fuelex Theme                           ║
+ * ║    Premium theme with mascot character featured prominently    ║
+ * ╚═══════════════════════════════════════════════════════════════╝
+ */
+
+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);
+
+// Path to mascot image
+const MASCOT_PATH = path.join(__dirname, '../../assets/mascot.png');
+
+/**
+ * @typedef {Object} FuelexOptions
+ * @property {string|Buffer} thumbnail - Album art URL or buffer
+ * @property {string} [trackName='Unknown Track'] - Song title
+ * @property {string} [artistName='Unknown Artist'] - Artist name
+ * @property {number} [progress=0] - Progress percentage (0-100)
+ * @property {string} [startTime='0:00'] - Current timestamp
+ * @property {string} [endTime='0:00'] - Total duration
+ * @property {string} [backgroundColor='#1a1a2e'] - Card background color
+ * @property {string} [accentColor='#ff6b00'] - Accent color
+ */
+
+/**
+ * Generate a Fuelex-styled music card with the mascot character
+ * @param {FuelexOptions} options
+ * @returns {Promise<Buffer>}
+ */
+export const Fuelex = async ({
+    thumbnail,
+    trackName = 'Unknown Track',
+    artistName = 'Unknown Artist',
+    progress = 0,
+    startTime = '0:00',
+    endTime = '0:00',
+    backgroundColor = '#1a1a2e',
+    accentColor = '#ff6b00'
+}) => {
+    // Card dimensions (similar to reference)
+    const width = 900;
+    const height = 200;
+
+    // Truncate text
+    if (trackName.length > 28) trackName = trackName.substring(0, 25) + '...';
+    if (artistName.length > 35) artistName = artistName.substring(0, 32) + '...';
+
+    const safeProgress = Math.min(Math.max(progress, 0), 100);
+
+    // Create canvas
+    const canvas = createCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+
+    // Background gradient (dark with subtle color)
+    const bgGradient = ctx.createLinearGradient(0, 0, width, 0);
+    bgGradient.addColorStop(0, backgroundColor);
+    bgGradient.addColorStop(0.7, '#0d0d1a');
+    bgGradient.addColorStop(1, '#0a0a12');
+
+    ctx.fillStyle = bgGradient;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, width, height, 15);
+    ctx.fill();
+
+    // Accent border
+    const borderGradient = ctx.createLinearGradient(0, 0, width, 0);
+    borderGradient.addColorStop(0, accentColor);
+    borderGradient.addColorStop(0.5, '#ffd700');
+    borderGradient.addColorStop(1, accentColor);
+
+    ctx.strokeStyle = borderGradient;
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.roundRect(2, 2, width - 4, height - 4, 14);
+    ctx.stroke();
+
+    // Load and draw thumbnail on left side
+    const thumbSize = 140;
+    const thumbX = 25;
+    const thumbY = (height - thumbSize) / 2;
+
+    try {
+        const thumbBuffer = await cropImage({
+            imagePath: thumbnail,
+            width: thumbSize,
+            height: thumbSize,
+            borderRadius: 15
+        });
+        const thumbImage = await loadImage(thumbBuffer);
+
+        // Glow effect behind thumbnail
+        ctx.shadowColor = accentColor;
+        ctx.shadowBlur = 15;
+        ctx.drawImage(thumbImage, thumbX, thumbY, thumbSize, thumbSize);
+        ctx.shadowBlur = 0;
+
+        // Border on thumbnail
+        ctx.strokeStyle = accentColor;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.roundRect(thumbX, thumbY, thumbSize, thumbSize, 15);
+        ctx.stroke();
+    } catch (e) {
+        // Placeholder
+        ctx.fillStyle = '#2a2a4e';
+        ctx.beginPath();
+        ctx.roundRect(thumbX, thumbY, thumbSize, thumbSize, 15);
+        ctx.fill();
+
+        ctx.fillStyle = accentColor;
+        ctx.font = 'bold 50px Arial';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('♪', thumbX + thumbSize / 2, thumbY + thumbSize / 2);
+    }
+
+    // Draw mascot on the right side (large and prominent)
+    try {
+        const mascotImage = await loadImage(MASCOT_PATH);
+        const mascotWidth = 220;
+        const mascotHeight = 220;
+        const mascotX = width - mascotWidth + 15;
+        const mascotY = height - mascotHeight + 20;
+
+        ctx.drawImage(mascotImage, mascotX, mascotY, mascotWidth, mascotHeight);
+    } catch (e) {
+        // Mascot not available
+    }
+
+    // Text content (middle area)
+    const textX = thumbX + thumbSize + 25;
+    const textMaxWidth = 380;
+
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+
+    // Track name with glow
+    ctx.shadowColor = accentColor;
+    ctx.shadowBlur = 8;
+    ctx.fillStyle = '#ffffff';
+    ctx.font = 'bold 28px Arial';
+    ctx.fillText(trackName, textX, 30, textMaxWidth);
+    ctx.shadowBlur = 0;
+
+    // Artist name
+    ctx.fillStyle = '#cccccc';
+    ctx.font = '18px Arial';
+    ctx.fillText(artistName, textX, 68, textMaxWidth);
+
+    // Progress bar
+    const progressX = textX;
+    const progressY = 115;
+    const progressWidth = 360;
+    const progressHeight = 10;
+    const actualProgressWidth = (safeProgress / 100) * progressWidth;
+
+    // Background bar
+    ctx.fillStyle = 'rgba(255,255,255,0.15)';
+    ctx.beginPath();
+    ctx.roundRect(progressX, progressY, progressWidth, progressHeight, 5);
+    ctx.fill();
+
+    // Progress fill with gradient
+    if (safeProgress > 0) {
+        const progressGradient = ctx.createLinearGradient(progressX, 0, progressX + actualProgressWidth, 0);
+        progressGradient.addColorStop(0, accentColor);
+        progressGradient.addColorStop(1, '#ffd700');
+
+        ctx.fillStyle = progressGradient;
+        ctx.beginPath();
+        ctx.roundRect(progressX, progressY, actualProgressWidth, progressHeight, 5);
+        ctx.fill();
+
+        // Knob
+        ctx.fillStyle = '#ffffff';
+        ctx.beginPath();
+        ctx.arc(progressX + actualProgressWidth, progressY + progressHeight / 2, 7, 0, Math.PI * 2);
+        ctx.fill();
+    }
+
+    // Timestamps
+    ctx.fillStyle = '#888888';
+    ctx.font = '14px Arial';
+    ctx.textAlign = 'left';
+    ctx.fillText(startTime, progressX, progressY + 18);
+    ctx.textAlign = 'right';
+    ctx.fillText(endTime, progressX + progressWidth, progressY + 18);
+
+    // Fuelex branding
+    ctx.fillStyle = '#555555';
+    ctx.font = 'bold 11px Arial';
+    ctx.textAlign = 'left';
+    ctx.fillText('FUELCARD', textX, height - 22);
+
+    // Crop with rounded corners
+    const finalImage = await cropImage({
+        imagePath: canvas.toBuffer('image/png'),
+        width: width,
+        height: height,
+        borderRadius: 20
+    });
+
+    return finalImage;
+};
+
+export default Fuelex;