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; // Colors for the radial gradients and background

    if (hour >= 6 && hour < 8) {
        // Early morning
        color1 = 'rgba(173, 216, 230, 0.3)';
        color2 = 'rgba(135, 206, 250, 0.3)';
        color3 = '#B0E0E6'; // Powder blue
    } else if (hour >= 8 && hour < 10) {
        // Mid-morning
        color1 = 'rgba(240, 230, 140, 0.3)';
        color2 = 'rgba(238, 232, 170, 0.3)';
        color3 = '#F0E68C'; // Khaki
    } else if (hour >= 10 && hour < 12) {
        // Late morning
        color1 = 'rgba(250, 250, 210, 0.3)';
        color2 = 'rgba(255, 255, 224, 0.3)';
        color3 = '#FFFACD'; // Lemon chiffon
    } else if (hour >= 12 && hour < 14) {
        // Early afternoon
        color1 = 'rgba(255, 182, 193, 0.3)';
        color2 = 'rgba(255, 192, 203, 0.3)';
        color3 = '#FFB6C1'; // Light pink
    } else if (hour >= 14 && hour < 16) {
        // Mid-afternoon
        color1 = 'rgba(255, 160, 122, 0.3)';
        color2 = 'rgba(255, 127, 80, 0.3)';
        color3 = '#FFA07A'; // Light salmon
    } else if (hour >= 16 && hour < 18) {
        // Late afternoon to early evening
        color1 = 'rgba(255, 99, 71, 0.3)';
        color2 = 'rgba(255, 69, 0, 0.3)';
        color3 = '#FF4500'; // Orange red
    } else {
        // Night
        color1 = 'black';
        color2 = 'black';
        color3 = '#000080'; // Navy blue for a slightly softer night effect
    }

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