glitchcraft/app/app.js

/**
 * Main application logic for GlitchCraft
 * Handles UI interactions and PWA registration
 */

/* global ZalgoGenerator */

// Initialize zalgo generator
const zalgo = new ZalgoGenerator();

// DOM elements
const inputText = document.getElementById('inputText');
const outputText = document.getElementById('outputText');
const intensitySlider = document.getElementById('intensity');
const intensityValue = document.getElementById('intensityValue');
const zalgoModeSelect = document.getElementById('zalgoMode');
const clearBtn = document.getElementById('clearBtn');
const copyNotification = document.getElementById('copyNotification');

/**
 * Update the corrupted text output
 */
function updateOutput() {
    const text = inputText.value;
    const intensity = parseInt(intensitySlider.value);
    const mode = zalgoModeSelect.value;

    if (text) {
        outputText.value = zalgo.generate(text, intensity, mode);
    } else {
        outputText.value = '';
    }
}

/**
 * Copy text to clipboard and show notification
 */
async function copyToClipboard() {
    if (!outputText.value) return;

    try {
        await navigator.clipboard.writeText(outputText.value);

        // Show copy notification
        copyNotification.classList.add('show');
        setTimeout(() => {
            copyNotification.classList.remove('show');
        }, 2000);
    } catch (err) {
        // Fallback for older browsers
        outputText.select();
        document.execCommand('copy');

        // Show copy notification
        copyNotification.classList.add('show');
        setTimeout(() => {
            copyNotification.classList.remove('show');
        }, 2000);
    }
}

/**
 * Clear all text fields
 */
function clearAll() {
    inputText.value = '';
    outputText.value = '';
    inputText.focus();
}

// Event listeners
inputText.addEventListener('input', updateOutput);

intensitySlider.addEventListener('input', () => {
    intensityValue.textContent = intensitySlider.value;
    updateOutput();
});

zalgoModeSelect.addEventListener('change', updateOutput);

outputText.addEventListener('click', copyToClipboard);

clearBtn.addEventListener('click', clearAll);

// Handle keyboard shortcuts
document.addEventListener('keydown', e => {
    // Ctrl/Cmd + K to clear
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        clearAll();
    }

    // Ctrl/Cmd + C when output is focused to copy
    if ((e.ctrlKey || e.metaKey) && e.key === 'c' && document.activeElement === outputText) {
        copyToClipboard();
    }
});

// Register service worker for PWA functionality
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
            .register('sw.js')
            .then(registration => {
                console.log('Service Worker registered successfully:', registration.scope);
            })
            .catch(error => {
                console.log('Service Worker registration failed:', error);
            });
    });
}

// Handle install prompt for PWA
window.addEventListener('beforeinstallprompt', e => {
    // Prevent the mini-infobar from appearing on mobile
    e.preventDefault();
    // Store the event so it can be triggered later if needed
    // Currently not used but kept for potential future install button
    window.deferredPrompt = e;
    console.log('Install prompt ready');
});

// Focus input on load
window.addEventListener('load', () => {
    inputText.focus();
});