glitchcraft/app/create-icons.js

/**
 * Node.js script to generate PWA icons programmatically
 * Run with: node create-icons.js
 * Requires: npm install canvas
 */

/* eslint-env node */
/* eslint-disable no-undef */

const fs = require('fs');
const path = require('path');

// Check if we're in a browser or Node.js environment
const isBrowser = typeof window !== 'undefined';

if (!isBrowser) {
    // Node.js environment - use canvas package
    try {
        const { createCanvas } = require('canvas');

        // Icon sizes needed for PWA
        const sizes = [72, 96, 128, 144, 152, 192, 384, 512];

        // Create icons directory if it doesn't exist
        const iconsDir = path.join(__dirname, 'icons');
        if (!fs.existsSync(iconsDir)) {
            fs.mkdirSync(iconsDir, { recursive: true });
        }

        const createIcon = function (size) {
            const canvas = createCanvas(size, size);
            const ctx = canvas.getContext('2d');

            // Background gradient (solid color fallback for canvas)
            ctx.fillStyle = '#1a1a2e';
            ctx.fillRect(0, 0, size, size);

            // Center circle
            const centerX = size / 2;
            const centerY = size / 2;
            const radius = size * 0.35;

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
            ctx.fillStyle = '#00ff88';
            ctx.fill();

            // Letter "T"
            ctx.font = `bold ${size * 0.4}px Arial`;
            ctx.fillStyle = '#0f0f14';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('T', centerX, centerY);

            return canvas;
        };

        // Generate all icons
        sizes.forEach(size => {
            const canvas = createIcon(size);
            const buffer = canvas.toBuffer('image/png');
            const filename = path.join(iconsDir, `icon-${size}.png`);
            fs.writeFileSync(filename, buffer);
            console.log(`Created ${filename}`);
        });

        console.log('All icons created successfully!');
    } catch (error) {
        console.log('Canvas package not installed. Creating placeholder icons instead...');

        // Fallback: Create placeholder SVG icons
        const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
        const iconsDir = path.join(__dirname, 'icons');

        if (!fs.existsSync(iconsDir)) {
            fs.mkdirSync(iconsDir, { recursive: true });
        }

        sizes.forEach(size => {
            const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
                <rect width="${size}" height="${size}" fill="#1a1a2e"/>
                <circle cx="${size / 2}" cy="${size / 2}" r="${size * 0.35}" fill="#00ff88"/>
                <text x="${size / 2}" y="${size / 2}" font-family="Arial" font-size="${size * 0.4}" font-weight="bold" text-anchor="middle" dominant-baseline="middle" fill="#0f0f14">T</text>
            </svg>`;

            const filename = path.join(iconsDir, `icon-${size}.svg`);
            fs.writeFileSync(filename, svg);
            console.log(`Created ${filename} (SVG placeholder)`);
        });

        console.log('\nNote: SVG placeholders created. For PNG icons, install canvas package:');
        console.log('npm install canvas');
    }
} else {
    console.log('This script should be run in Node.js, not in a browser.');
}