script.js

const canvas = document.getElementById('textCanvas');
const ctx = canvas.getContext('2d');
const textInput = document.getElementById('textInput');
const fontSize = document.getElementById('fontSize');
const textColor = document.getElementById('textColor');
const fontLibrary = document.getElementById('fontLibrary');
const fontFile = document.getElementById('fontFile');
const fileStatus = document.getElementById('fileStatus');

let activeFont = "'Plus Jakarta Sans', sans-serif";

function render(textToDraw, sizeOverride = null) {
    const text = textToDraw;
    const size = sizeOverride || parseInt(fontSize.value);
    
    ctx.font = `${size}px ${activeFont}`;
    const m = ctx.measureText(text);
    
    canvas.width = m.width + 60;
    canvas.height = size * 1.6;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = textColor.value;
    ctx.font = `${size}px ${activeFont}`;
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}

// Update on input
[textInput, fontSize, textColor, fontLibrary].forEach(el => {
    el.addEventListener('input', () => {
        if(el.id === 'fontLibrary' && el.value !== 'custom') activeFont = el.value;
        render(textInput.value);
    });
});

// Font Upload
fontFile.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if(!file) return;
    fileStatus.innerText = "Loaded: " + file.name;
    const reader = new FileReader();
    reader.onload = (ev) => {
        const fontName = "CustomFont";
        const f = new FontFace(fontName, ev.target.result);
        f.load().then(loaded => {
            document.fonts.add(loaded);
            activeFont = fontName;
            fontLibrary.value = 'custom';
            render(textInput.value);
        });
    };
    reader.readAsArrayBuffer(file);
});

// Single Download
document.getElementById('downloadBtn').addEventListener('click', () => {
    const link = document.createElement('a');
    link.download = `font-export-${Date.now()}.png`;
    link.href = canvas.toDataURL();
    link.click();
});

// BULK ZIP DOWNLOAD
document.getElementById('bulkDownloadBtn').addEventListener('click', async () => {
    const zip = new JSZip();
    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?";
    const bar = document.getElementById('progressBox');
    const fill = document.getElementById('progressFill');
    
    bar.style.display = 'block';
    const total = characters.length;

    for (let i = 0; i < total; i++) {
        const char = characters[i];
        render(char, 200); 
        
        const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
        const fileName = `char_${i}_${char.charCodeAt(0)}.png`;
        zip.file(fileName, blob);
        
        fill.style.width = ((i + 1) / total * 100) + '%';
    }

    const content = await zip.generateAsync({type: "blob"});
    const link = document.createElement('a');
    link.href = URL.createObjectURL(content);
    link.download = "font_collection_assets.zip";
    link.click();

    render(textInput.value);
    setTimeout(() => { bar.style.display = 'none'; fill.style.width = '0%'; }, 2000);
});

// Init
document.fonts.ready.then(() => render(textInput.value));