fuelcard 1.0.0

package/src/themes/Oscuro.js

@@ -0,0 +1,157 @@
+/**
+ * ╔═══════════════════════════════════════════════════════════════╗
+ * ║              FUELCARD - Oscuro Theme                           ║
+ * ║    Dark 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 Oscuro-styled music card (dark like reference)
+ */
+export const Oscuro = async ({
+    thumbnail,
+    trackName = 'Unknown Track',
+    artistName = 'Unknown Artist',
+    progress = 0,
+    startTime = '0:00',
+    endTime = '0:00',
+    accentColor = '#ff6b00'
+}) => {
+    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');
+
+    // Dark gradient background
+    const bgGradient = ctx.createLinearGradient(0, 0, width, height);
+    bgGradient.addColorStop(0, '#1a1a2e');
+    bgGradient.addColorStop(1, '#0d0d1a');
+
+    ctx.fillStyle = bgGradient;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, width, height, 15);
+    ctx.fill();
+
+    // Accent border
+    ctx.strokeStyle = accentColor;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.roundRect(1, 1, width - 2, height - 2, 14);
+    ctx.stroke();
+
+    // 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 = accentColor;
+        ctx.shadowBlur = 10;
+        ctx.drawImage(thumbImage, thumbX, thumbY, thumbSize, thumbSize);
+        ctx.shadowBlur = 0;
+
+        // Accent border on thumbnail
+        ctx.strokeStyle = accentColor;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.roundRect(thumbX, thumbY, thumbSize, thumbSize, 12);
+        ctx.stroke();
+    } catch (e) {
+        ctx.fillStyle = '#2a2a4a';
+        ctx.beginPath();
+        ctx.roundRect(thumbX, thumbY, thumbSize, thumbSize, 12);
+        ctx.fill();
+
+        ctx.fillStyle = accentColor;
+        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 = '#aaaaaa';
+    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(255,255,255,0.15)';
+    ctx.beginPath();
+    ctx.roundRect(progressX, progressY, progressWidth, progressHeight, 4);
+    ctx.fill();
+
+    if (safeProgress > 0) {
+        ctx.fillStyle = accentColor;
+        ctx.beginPath();
+        ctx.roundRect(progressX, progressY, actualProgress, progressHeight, 4);
+        ctx.fill();
+    }
+
+    // Timestamps
+    ctx.fillStyle = '#888888';
+    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 Oscuro;

package/src/themes/Rosa.js

@@ -0,0 +1,156 @@
+/**
+ * ╔═══════════════════════════════════════════════════════════════╗
+ * ║              FUELCARD - Rosa Theme                             ║
+ * ║    Pink/Magenta 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 Rosa-styled music card (pink/magenta like reference)
+ */
+export const Rosa = 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');
+
+    // Pink/Magenta gradient
+    const bgGradient = ctx.createLinearGradient(0, 0, width, height);
+    bgGradient.addColorStop(0, '#e91e63');
+    bgGradient.addColorStop(1, '#c2185b');
+
+    ctx.fillStyle = bgGradient;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, width, height, 15);
+    ctx.fill();
+
+    // 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.75)';
+    ctx.font = '16px Arial';
+    ctx.fillText(artistName, textX, 55);
+
+    // Progress
+    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 Rosa;

package/test.js

@@ -0,0 +1,129 @@
+/**
+ * ╔═══════════════════════════════════════════════════════════════╗
+ * ║                    FUELCARD - Test Script                      ║
+ * ║              Generate all themes for testing                   ║
+ * ╚═══════════════════════════════════════════════════════════════╝
+ */
+
+import { Fuego, Aqua, Rosa, Oscuro, Classic, Neon, Flame, Fuelex } from './src/index.js';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const outputDir = path.join(__dirname, 'test-output');
+if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+}
+
+const sampleTrack = {
+    thumbnail: 'https://i.scdn.co/image/ab67616d0000b2738863bc11d2aa12b54f5aeb36',
+    trackName: 'Blinding Lights',
+    artistName: 'The Weeknd',
+    startTime: '1:45',
+    endTime: '3:22',
+    progress: 52
+};
+
+async function generateTestCards() {
+    console.log('╔═══════════════════════════════════════════════════════════════╗');
+    console.log('║                    FUELCARD TEST SUITE                        ║');
+    console.log('║               By Ramkrishna & ZayDocs                         ║');
+    console.log('╚═══════════════════════════════════════════════════════════════╝');
+    console.log();
+    console.log('=== NEW THEMES (Like Reference) ===');
+    console.log();
+
+    // Fuego (Orange)
+    console.log('[TEST] Generating Fuego theme (orange)...');
+    try {
+        const card = await Fuego(sampleTrack);
+        fs.writeFileSync(path.join(outputDir, 'fuego-theme.png'), card);
+        console.log('  ✓ Saved: fuego-theme.png');
+    } catch (error) {
+        console.error('  ✗ Error:', error.message);
+    }
+
+    // Aqua (Blue)
+    console.log('[TEST] Generating Aqua theme (blue)...');
+    try {
+        const card = await Aqua(sampleTrack);
+        fs.writeFileSync(path.join(outputDir, 'aqua-theme.png'), card);
+        console.log('  ✓ Saved: aqua-theme.png');
+    } catch (error) {
+        console.error('  ✗ Error:', error.message);
+    }
+
+    // Rosa (Pink)
+    console.log('[TEST] Generating Rosa theme (pink)...');
+    try {
+        const card = await Rosa(sampleTrack);
+        fs.writeFileSync(path.join(outputDir, 'rosa-theme.png'), card);
+        console.log('  ✓ Saved: rosa-theme.png');
+    } catch (error) {
+        console.error('  ✗ Error:', error.message);
+    }
+
+    // Oscuro (Dark)
+    console.log('[TEST] Generating Oscuro theme (dark)...');
+    try {
+        const card = await Oscuro(sampleTrack);
+        fs.writeFileSync(path.join(outputDir, 'oscuro-theme.png'), card);
+        console.log('  ✓ Saved: oscuro-theme.png');
+    } catch (error) {
+        console.error('  ✗ Error:', error.message);
+    }
+
+    console.log();
+    console.log('=== LEGACY THEMES ===');
+    console.log();
+
+    // Fuelex
+    console.log('[TEST] Generating Fuelex theme...');
+    try {
+        const card = await Fuelex({ ...sampleTrack, accentColor: '#ff6b00' });
+        fs.writeFileSync(path.join(outputDir, 'fuelex-theme.png'), card);
+        console.log('  ✓ Saved: fuelex-theme.png');
+    } catch (error) {
+        console.error('  ✗ Error:', error.message);
+    }
+
+    // Classic
+    console.log('[TEST] Generating Classic theme...');
+    try {
+        const card = await Classic(sampleTrack);
+        fs.writeFileSync(path.join(outputDir, 'classic-theme.png'), card);
+        console.log('  ✓ Saved: classic-theme.png');
+    } catch (error) {
+        console.error('  ✗ Error:', error.message);
+    }
+
+    // Neon
+    console.log('[TEST] Generating Neon theme...');
+    try {
+        const card = await Neon({ ...sampleTrack, glowColor: '#00ffff', accentColor: '#ff00ff' });
+        fs.writeFileSync(path.join(outputDir, 'neon-theme.png'), card);
+        console.log('  ✓ Saved: neon-theme.png');
+    } catch (error) {
+        console.error('  ✗ Error:', error.message);
+    }
+
+    // Flame
+    console.log('[TEST] Generating Flame theme...');
+    try {
+        const card = await Flame({ ...sampleTrack, showMascot: true });
+        fs.writeFileSync(path.join(outputDir, 'flame-theme.png'), card);
+        console.log('  ✓ Saved: flame-theme.png');
+    } catch (error) {
+        console.error('  ✗ Error:', error.message);
+    }
+
+    console.log();
+    console.log('═══════════════════════════════════════════════════════════════');
+    console.log('Test complete! Check the test-output folder.');
+    console.log('═══════════════════════════════════════════════════════════════');
+}
+
+generateTestCards().catch(console.error);