app/util.ts

export function updateBackground(): void {
    const hour = new Date().getHours();
    const background = document.getElementById('bg') as HTMLElement | null;

    if (!background) {
        console.warn("Background element not found, will retry later.");
        setTimeout(updateBackground, 500); // Retry after a delay
        return;
    }

    let color1, color2, color3, color4; // Colors for the radial gradients and background
    let cloudStyle = ''; // Additional style for cloud effects

    if (hour >= 5 && hour < 7) {
        // Dawn
        color1 = 'rgba(255, 140, 0, 0.6)'; // Dark orange (sunrise)
        color2 = 'rgba(135, 206, 250, 0.6)'; // Sky blue (light sky)
        color3 = '#F0E68C'; // Light khaki (morning light)
    } else if (hour >= 7 && hour < 16) {
        // Daylight
        color1 = 'rgba(135, 206, 250, 0.6)'; // Light sky blue (high sky)
        color2 = 'rgba(255, 255, 255, 0.6)'; // White (sun)
        color3 = '#87CEEB'; // Sky blue (clear day)
        cloudStyle = ', radial-gradient(circle at 10% 30%, rgba(255, 255, 255, 0.8), transparent 80%), radial-gradient(circle at 90% 40%, rgba(255, 255, 255, 0.8), transparent 80%)';
    } else if (hour >= 16 && hour < 20) {
        // Dusk
        color1 = 'rgba(250, 128, 114, 0.6)'; // Salmon (sunset)
        color2 = 'rgba(100, 149, 237, 0.6)'; // Cornflower blue (evening sky)
        color3 = '#B0C4DE'; // Light steel blue (twilight)
    } else {
        // Night
        color1 = 'rgba(0, 0, 0, 1)'; // Pure black
        color2 = 'rgba(0, 0, 0, 1)'; // Pure black
        color3 = '#000000'; // Pure black
    }

    // Define color4 for the pseudo-elements
    if (hour >= 6 && hour < 18) {
        // Daytime: lighter color for a subtle effect
        color4 = 'rgba(255, 255, 255, 0.2)';
    } else {
        // Nighttime: darker color for a stronger effect
        color4 = 'rgba(0, 0, 0, 0.1)';
    }

    // Set the background image, color, and cloud effect
    background.style.backgroundImage = 
        `radial-gradient(circle at 50% 20%, ${color1}, transparent 90%), 
         radial-gradient(circle at 50% 80%, ${color2}, transparent 90%)${cloudStyle}`;
    background.style.backgroundColor = color3;

    // Cloud animation
    if (cloudStyle) {
        background.style.animation = 'moveClouds 60s linear infinite';
    } else {
        background.style.animation = 'none';
    }
    // Set the styles for the pseudo-elements
    const beforeElement: any = document.querySelector('.background::before');
    const afterElement: any = document.querySelector('.background::after');

    if (beforeElement && afterElement) {
        beforeElement.style.backgroundImage = `radial-gradient(closest-side, ${color4}, transparent)`;
        afterElement.style.backgroundImage = `radial-gradient(closest-side, ${color4}, transparent)`;
    }
}