Yanshan Chess Post-2022 Timemax Title Screen Image Editor

async function processImage(originalImg, titleText = "YANSHAN CHESS", copyrightText = "© 2022 TIMEMAX", pushStartText = "PUSH START") {
    // Load a retro 8-bit font via Google Fonts
    const fontName = 'Press Start 2P';
    if (!document.fonts.check(`10px "${fontName}"`)) {
        const style = document.createElement('style');
        style.innerHTML = `@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');`;
        document.head.appendChild(style);
        try {
            await document.fonts.load(`10px "${fontName}"`);
        } catch (e) {
            console.warn("Font loading failed, falling back to fallback fonts.");
        }
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the original image
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // Draw the original base image
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Darken the background slightly to make the bootleg title UI pop out
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, w, h);

    // Utility to draw centered retro text
    const drawRetroText = (text, y, fontSize, useGradient = false, addStroke = true) => {
        ctx.font = `${fontSize}px "${fontName}", "Courier New", monospace`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        if (addStroke) {
            ctx.lineWidth = Math.max(2, fontSize * 0.15);
            ctx.strokeStyle = 'black';
            ctx.strokeText(text, w / 2, y);
        }

        if (useGradient) {
            // Classic retro bootleg gradient (red -> orange -> yellow)
            const gradient = ctx.createLinearGradient(0, y - fontSize / 2, 0, y + fontSize / 2);
            gradient.addColorStop(0, '#ff0000');
            gradient.addColorStop(0.5, '#ff8800');
            gradient.addColorStop(1, '#ffff00');
            ctx.fillStyle = gradient;
        } else {
            ctx.fillStyle = 'white';
        }
        
        ctx.fillText(text, w / 2, y);
    };

    // Calculate dynamic scaling for the UI elements based on image size
    const titleFontSize = Math.min(w / (titleText.length * 0.9), h * 0.12);
    const startFontSize = Math.min(w / (pushStartText.length * 1.5), h * 0.06);
    const copyFontSize = Math.min(w / (copyrightText.length * 1.2), h * 0.04);

    // 1. Draw Title Text
    drawRetroText(titleText, h * 0.3, titleFontSize, true, true);

    // 2. Draw Menu Box typically found in Timemax 2022+ bootleg systems
    const boxW = startFontSize * pushStartText.length * 1.4;
    const boxH = startFontSize * 2.5;
    const boxY = h * 0.65;
    
    // Draw solid blue menu box
    ctx.fillStyle = '#0000AA';
    ctx.fillRect(w / 2 - boxW / 2, boxY - boxH / 2, boxW, boxH);
    
    // Draw white and shaded borders for the menu box
    ctx.strokeStyle = 'white';
    ctx.lineWidth = Math.max(1, h * 0.005);
    ctx.strokeRect(w / 2 - boxW / 2, boxY - boxH / 2, boxW, boxH);
    
    ctx.strokeStyle = '#5555FF';
    ctx.lineWidth = Math.max(1, h * 0.005);
    ctx.strokeRect(w / 2 - boxW / 2 + ctx.lineWidth, boxY - boxH / 2 + ctx.lineWidth, boxW - ctx.lineWidth * 2, boxH - ctx.lineWidth * 2);

    // 3. Draw Push Start Text inside the menu box
    drawRetroText(pushStartText, boxY, startFontSize, false, true);

    // 4. Draw Copyright / Timemax identification at the bottom
    drawRetroText(copyrightText, h * 0.9, copyFontSize, false, true);

    return canvas;
}