script.js

/**
 * Love, Death & Robots Weather Terminal
 * A futuristic weather application with cyberpunk aesthetics
 */

class WeatherApp {
    constructor() {
        // API Configuration - Open-Meteo (free, no API key required)
        this.BASE_URL = 'https://api.open-meteo.com/v1';
        this.GEOCODING_URL = 'https://geocoding-api.open-meteo.com/v1';
        
        // Application state
        this.currentLocation = null;
        this.isDayMode = false;
        
        // DOM elements
        this.elements = {
            loading: document.getElementById('loading'),
            error: document.getElementById('error-container'),
            errorMessage: document.getElementById('error-message'),
            retryBtn: document.getElementById('retry-btn'),
            currentWeather: document.getElementById('current-weather'),
            forecastSection: document.getElementById('forecast-section'),
            forecastGrid: document.getElementById('forecast-grid'),
            citySearch: document.getElementById('city-search'),
            searchBtn: document.getElementById('search-btn'),
            locationBtn: document.getElementById('location-btn'),
            currentLocation: document.getElementById('current-location'),
            modeToggle: document.getElementById('mode-toggle'),
            timeZone: document.getElementById('time-zone'),
            apiKeyInput: document.getElementById('api-key-input'),
            newApiKey: document.getElementById('new-api-key'),
            updateKeyBtn: document.getElementById('update-key-btn'),
            // Digital clock elements
            hourTens: document.getElementById('hour-tens'),
            hourOnes: document.getElementById('hour-ones'),
            minuteTens: document.getElementById('minute-tens'),
            minuteOnes: document.getElementById('minute-ones'),
            secondTens: document.getElementById('second-tens'),
            secondOnes: document.getElementById('second-ones')
        };
        
        // Weather icon mapping for WMO weather codes
        this.weatherIcons = {
            0: 'fas fa-sun', // Clear sky
            1: 'fas fa-cloud-sun', // Mainly clear
            2: 'fas fa-cloud-sun', // Partly cloudy
            3: 'fas fa-cloud', // Overcast
            45: 'fas fa-smog', // Fog
            48: 'fas fa-smog', // Depositing rime fog
            51: 'fas fa-cloud-drizzle', // Light drizzle
            53: 'fas fa-cloud-drizzle', // Moderate drizzle
            55: 'fas fa-cloud-drizzle', // Dense drizzle
            56: 'fas fa-cloud-drizzle', // Light freezing drizzle
            57: 'fas fa-cloud-drizzle', // Dense freezing drizzle
            61: 'fas fa-cloud-rain', // Slight rain
            63: 'fas fa-cloud-rain', // Moderate rain
            65: 'fas fa-cloud-rain', // Heavy rain
            66: 'fas fa-cloud-rain', // Light freezing rain
            67: 'fas fa-cloud-rain', // Heavy freezing rain
            71: 'fas fa-snowflake', // Slight snow fall
            73: 'fas fa-snowflake', // Moderate snow fall
            75: 'fas fa-snowflake', // Heavy snow fall
            77: 'fas fa-snowflake', // Snow grains
            80: 'fas fa-cloud-rain', // Slight rain showers
            81: 'fas fa-cloud-rain', // Moderate rain showers
            82: 'fas fa-cloud-rain', // Violent rain showers
            85: 'fas fa-snowflake', // Slight snow showers
            86: 'fas fa-snowflake', // Heavy snow showers
            95: 'fas fa-bolt', // Thunderstorm
            96: 'fas fa-bolt', // Thunderstorm with slight hail
            99: 'fas fa-bolt' // Thunderstorm with heavy hail
        };

        // Weather descriptions for WMO codes
        this.weatherDescriptions = {
            0: 'Clear sky',
            1: 'Mainly clear',
            2: 'Partly cloudy',
            3: 'Overcast',
            45: 'Fog',
            48: 'Depositing rime fog',
            51: 'Light drizzle',
            53: 'Moderate drizzle',
            55: 'Dense drizzle',
            56: 'Light freezing drizzle',
            57: 'Dense freezing drizzle',
            61: 'Slight rain',
            63: 'Moderate rain',
            65: 'Heavy rain',
            66: 'Light freezing rain',
            67: 'Heavy freezing rain',
            71: 'Slight snow fall',
            73: 'Moderate snow fall',
            75: 'Heavy snow fall',
            77: 'Snow grains',
            80: 'Slight rain showers',
            81: 'Moderate rain showers',
            82: 'Violent rain showers',
            85: 'Slight snow showers',
            86: 'Heavy snow showers',
            95: 'Thunderstorm',
            96: 'Thunderstorm with slight hail',
            99: 'Thunderstorm with heavy hail'
        };
        
        this.init();
    }
    
    /**
     * Initialize the application
     */
    async init() {
        // Initialize digit rollers
        this.initializeDigitRollers();
        
        this.setupEventListeners();
        this.updateTime();
        this.detectDayNightMode();
        
        // Update time every second
        setInterval(() => this.updateTime(), 1000);
        
        // Update day/night mode every minute
        setInterval(() => this.detectDayNightMode(), 60000);
        
        // Auto-detect location on load
        this.autoDetectLocation();
    }
    
    /**
     * Initialize digit rollers with numbers 0-9
     */
    initializeDigitRollers() {
        const digitContainers = [
            this.elements.hourTens,
            this.elements.hourOnes,
            this.elements.minuteTens,
            this.elements.minuteOnes,
            this.elements.secondTens,
            this.elements.secondOnes
        ];
        
        digitContainers.forEach(container => {
            const roller = container.querySelector('.digit-roller');
            roller.innerHTML = '';
            
            // Create digit elements 0-9
            for (let i = 0; i <= 9; i++) {
                const digitElement = document.createElement('div');
                digitElement.className = 'digit';
                digitElement.textContent = i;
                roller.appendChild(digitElement);
            }
            
            // Initialize to 0
            roller.setAttribute('data-digit', '0');
        });
    }
    
    /**
     * Setup event listeners
     */
    setupEventListeners() {
        // Search functionality
        this.elements.searchBtn.addEventListener('click', () => this.searchByCity());
        this.elements.citySearch.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') this.searchByCity();
        });
        
        // Location detection
        this.elements.locationBtn.addEventListener('click', () => this.autoDetectLocation());
        
        // Retry button
        this.elements.retryBtn.addEventListener('click', () => this.autoDetectLocation());
        
        // Mode toggle
        this.elements.modeToggle.addEventListener('click', () => this.toggleDayNightMode());
    }
    
    /**
     * Update current time display with rolling digit animation
     */
    updateTime() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        
        // Update each digit with rolling animation
        this.updateDigit(this.elements.hourTens, hours[0]);
        this.updateDigit(this.elements.hourOnes, hours[1]);
        this.updateDigit(this.elements.minuteTens, minutes[0]);
        this.updateDigit(this.elements.minuteOnes, minutes[1]);
        this.updateDigit(this.elements.secondTens, seconds[0]);
        this.updateDigit(this.elements.secondOnes, seconds[1]);
        
        this.elements.timeZone.textContent = timeZone;
    }
    
    /**
     * Update individual digit with rolling animation
     */
    updateDigit(container, newDigit) {
        const roller = container.querySelector('.digit-roller');
        const currentDigit = roller.getAttribute('data-digit');
        
        if (currentDigit !== newDigit) {
            // Add a slight random delay for more natural rolling effect
            const delay = Math.random() * 100;
            
            setTimeout(() => {
                roller.setAttribute('data-digit', newDigit);
                roller.style.transform = `translateY(-${newDigit * 10}%)`;
                
                // Add a subtle glow effect during transition
                container.style.boxShadow = `
                    inset 0 2px 4px hsl(0 0% 0% / 0.3),
                    0 0 20px hsl(var(--neon-cyan) / 0.4)
                `;
                
                // Remove glow after animation
                setTimeout(() => {
                    container.style.boxShadow = `
                        inset 0 2px 4px hsl(0 0% 0% / 0.3),
                        0 0 10px hsl(var(--neon-cyan) / 0.1)
                    `;
                }, 600);
            }, delay);
        }
    }
    
    /**
     * Detect day/night mode based on local time
     */
    detectDayNightMode() {
        const now = new Date();
        const hour = now.getHours();
        
        // Consider day time from 6 AM to 6 PM
        const shouldBeDayMode = hour >= 6 && hour < 18;
        
        if (shouldBeDayMode !== this.isDayMode) {
            this.isDayMode = shouldBeDayMode;
            this.updateDayNightMode();
        }
    }
    
    /**
     * Toggle day/night mode manually
     */
    toggleDayNightMode() {
        this.isDayMode = !this.isDayMode;
        this.updateDayNightMode();
    }
    
    /**
     * Update day/night mode styling
     */
    updateDayNightMode() {
        const body = document.body;
        const modeButton = this.elements.modeToggle;
        
        if (this.isDayMode) {
            body.classList.add('day-mode');
            modeButton.innerHTML = '<i class="fas fa-sun"></i><span>Day Mode</span>';
        } else {
            body.classList.remove('day-mode');
            modeButton.innerHTML = '<i class="fas fa-moon"></i><span>Night Mode</span>';
        }
    }
    
    /**
     * Auto-detect user location
     */
    autoDetectLocation() {
        if (!navigator.geolocation) {
            this.showError('Geolocation is not supported by this browser. Please search for your city manually.');
            return;
        }
        
        this.showLoading('SCANNING COORDINATES...');
        
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const { latitude, longitude } = position.coords;
                this.currentLocation = { lat: latitude, lon: longitude };
                this.fetchWeatherByCoords(latitude, longitude);
            },
            (error) => {
                let message = 'Unable to detect location. ';
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        message += 'Location access denied. Please search manually.';
                        break;
                    case error.POSITION_UNAVAILABLE:
                        message += 'Location information unavailable.';
                        break;
                    case error.TIMEOUT:
                        message += 'Location request timed out.';
                        break;
                    default:
                        message += 'Unknown location error.';
                        break;
                }
                this.showError(message);
            },
            {
                timeout: 10000,
                maximumAge: 300000, // 5 minutes
                enableHighAccuracy: true
            }
        );
    }
    
    /**
     * Search weather by city name
     */
    searchByCity() {
        const cityName = this.elements.citySearch.value.trim();
        
        if (!cityName) {
            this.showError('Please enter a city name.');
            return;
        }
        
        this.showLoading('SCANNING ATMOSPHERE...');
        this.fetchWeatherByCity(cityName);
    }
    
    /**
     * Fetch weather data by coordinates
     */
    async fetchWeatherByCoords(lat, lon) {
        try {
            // Get timezone for the location
            const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            
            // Fetch current weather and forecast from Open-Meteo
            const weatherResponse = await fetch(
                `${this.BASE_URL}/forecast?latitude=${lat}&longitude=${lon}&current=temperature_2m,relative_humidity_2m,apparent_temperature,weather_code,surface_pressure,wind_speed_10m,visibility&daily=temperature_2m_max,temperature_2m_min,weather_code&timezone=${timezone}&forecast_days=10`
            );
            
            if (!weatherResponse.ok) {
                throw new Error(`Weather API error: ${weatherResponse.status}`);
            }
            
            const weatherData = await weatherResponse.json();
            
            // Get location name using reverse geocoding
            const locationResponse = await fetch(
                `${this.GEOCODING_URL}/search?latitude=${lat}&longitude=${lon}&count=1&language=en&format=json`
            );
            
            let locationName = `${lat.toFixed(2)}, ${lon.toFixed(2)}`;
            if (locationResponse.ok) {
                const locationData = await locationResponse.json();
                if (locationData.results && locationData.results.length > 0) {
                    const result = locationData.results[0];
                    locationName = `${result.name || result.admin1 || result.country || 'Unknown Location'}`;
                }
            }
            
            this.displayWeatherData(weatherData, locationName);
            this.elements.currentLocation.textContent = `📍 ${locationName}`;
            
        } catch (error) {
            console.error('Weather fetch error:', error);
            this.showError(`Failed to fetch weather data: ${error.message}`);
        }
    }
    
    /**
     * Fetch weather data by city name
     */
    async fetchWeatherByCity(city) {
        try {
            // First, geocode the city name to get coordinates
            const geocodeResponse = await fetch(
                `${this.GEOCODING_URL}/search?name=${encodeURIComponent(city)}&count=1&language=en&format=json`
            );
            
            if (!geocodeResponse.ok) {
                throw new Error(`Geocoding API error: ${geocodeResponse.status}`);
            }
            
            const geocodeData = await geocodeResponse.json();
            
            if (!geocodeData.results || geocodeData.results.length === 0) {
                throw new Error('City not found. Please check the spelling and try again.');
            }
            
            const location = geocodeData.results[0];
            const lat = location.latitude;
            const lon = location.longitude;
            
            // Store location for future use
            this.currentLocation = { lat, lon };
            
            // Now fetch weather data using coordinates
            this.fetchWeatherByCoords(lat, lon);
            
        } catch (error) {
            console.error('Weather fetch error:', error);
            this.showError(`Failed to fetch weather data: ${error.message}`);
        }
    }
    
    /**
     * Display weather data
     */
    displayWeatherData(weatherData, locationName) {
        this.hideLoading();
        this.hideError();
        
        // Display current weather
        this.displayCurrentWeather(weatherData.current, weatherData.current_units);
        
        // Display forecast
        this.displayForecast(weatherData.daily, weatherData.daily_units);
        
        // Show weather sections
        this.elements.currentWeather.classList.add('active');
        this.elements.forecastSection.classList.add('active');
    }
    
    /**
     * Display current weather
     */
    displayCurrentWeather(current, units) {
        // Temperature
        document.getElementById('current-temp').textContent = Math.round(current.temperature_2m);
        document.getElementById('feels-like').textContent = Math.round(current.apparent_temperature);
        
        // Condition
        const weatherCode = current.weather_code;
        document.getElementById('current-condition').textContent = this.weatherDescriptions[weatherCode] || 'Unknown';
        
        // Weather icon
        const iconClass = this.weatherIcons[weatherCode] || 'fas fa-question';
        document.getElementById('current-icon').className = `weather-icon ${iconClass}`;
        
        // Details
        document.getElementById('humidity').textContent = `${current.relative_humidity_2m}%`;
        document.getElementById('wind-speed').textContent = `${Math.round(current.wind_speed_10m)} km/h`;
        document.getElementById('visibility').textContent = `${(current.visibility / 1000).toFixed(1)} km`;
        document.getElementById('pressure').textContent = `${Math.round(current.surface_pressure)} hPa`;
    }
    
    /**
     * Display 10-day forecast
     */
    displayForecast(daily, units) {
        const forecastGrid = this.elements.forecastGrid;
        forecastGrid.innerHTML = '';
        
        // Create forecast items for 10 days
        for (let i = 0; i < Math.min(daily.time.length, 10); i++) {
            const forecast = {
                date: new Date(daily.time[i]),
                high: Math.round(daily.temperature_2m_max[i]),
                low: Math.round(daily.temperature_2m_min[i]),
                weatherCode: daily.weather_code[i]
            };
            
            const forecastItem = this.createForecastItem(forecast, i);
            forecastGrid.appendChild(forecastItem);
        }
    }
    
    /**
     * Process forecast data to get daily summaries
     */
    processForecastData(forecastList) {
        const dailyData = {};
        
        // Group forecasts by date
        forecastList.forEach(forecast => {
            const date = new Date(forecast.dt * 1000);
            const dateKey = date.toDateString();
            
            if (!dailyData[dateKey]) {
                dailyData[dateKey] = {
                    date: date,
                    temps: [],
                    conditions: [],
                    icons: [],
                    descriptions: []
                };
            }
            
            dailyData[dateKey].temps.push(forecast.main.temp);
            dailyData[dateKey].conditions.push(forecast.weather[0].main);
            dailyData[dateKey].icons.push(forecast.weather[0].icon);
            dailyData[dateKey].descriptions.push(forecast.weather[0].description);
        });
        
        // Convert to array and calculate daily summaries
        const dailyForecasts = Object.values(dailyData).map(day => {
            return {
                date: day.date,
                high: Math.round(Math.max(...day.temps)),
                low: Math.round(Math.min(...day.temps)),
                condition: this.getMostFrequent(day.conditions),
                icon: this.getMostFrequent(day.icons),
                description: this.getMostFrequent(day.descriptions)
            };
        });
        
        // Extend to 10 days by simulating additional days
        while (dailyForecasts.length < 10) {
            const lastForecast = dailyForecasts[dailyForecasts.length - 1];
            const nextDate = new Date(lastForecast.date);
            nextDate.setDate(nextDate.getDate() + 1);
            
            // Simulate weather with slight variations
            const tempVariation = (Math.random() - 0.5) * 6; // ±3°C variation
            dailyForecasts.push({
                date: nextDate,
                high: Math.round(lastForecast.high + tempVariation),
                low: Math.round(lastForecast.low + tempVariation),
                condition: lastForecast.condition,
                icon: lastForecast.icon,
                description: lastForecast.description
            });
        }
        
        return dailyForecasts.slice(0, 10);
    }
    
    /**
     * Get most frequent item from array
     */
    getMostFrequent(arr) {
        return arr.sort((a, b) =>
            arr.filter(v => v === a).length - arr.filter(v => v === b).length
        ).pop();
    }
    
    /**
     * Create forecast item element
     */
    createForecastItem(forecast, index) {
        const item = document.createElement('div');
        item.className = 'forecast-item';
        
        const dateString = index === 0 ? 'Today' : 
                          index === 1 ? 'Tomorrow' : 
                          forecast.date.toLocaleDateString('en-US', { 
                              weekday: 'short', 
                              month: 'short', 
                              day: 'numeric' 
                          });
        
        const iconClass = this.weatherIcons[forecast.weatherCode] || 'fas fa-question';
        const description = this.weatherDescriptions[forecast.weatherCode] || 'Unknown';
        
        item.innerHTML = `
            <div class="forecast-date">${dateString}</div>
            <i class="forecast-icon ${iconClass}"></i>
            <div class="forecast-temps">
                <span class="forecast-high">${forecast.high}°</span>
                <span class="forecast-low">${forecast.low}°</span>
            </div>
            <div class="forecast-desc">${description}</div>
        `;
        
        return item;
    }
    
    /**
     * Show loading state
     */
    showLoading(message = 'SCANNING ATMOSPHERE...') {
        this.elements.loading.querySelector('.loading-text').textContent = message;
        this.elements.loading.classList.add('active');
        this.elements.error.classList.remove('active');
        this.elements.currentWeather.classList.remove('active');
        this.elements.forecastSection.classList.remove('active');
    }
    
    /**
     * Hide loading state
     */
    hideLoading() {
        this.elements.loading.classList.remove('active');
    }
    
    /**
     * Show API key error with input field
     */
    showApiKeyError() {
        this.hideLoading();
        this.elements.currentWeather.classList.remove('active');
        this.elements.forecastSection.classList.remove('active');
        this.elements.errorMessage.textContent = 'API key is invalid or not activated. Enter a new key to continue.';
        this.elements.apiKeyInput.style.display = 'block';
        this.elements.error.classList.add('active');
    }
    
    /**
     * Show error state
     */
    showError(message) {
        this.elements.errorMessage.textContent = message;
        this.elements.error.classList.add('active');
        this.elements.loading.classList.remove('active');
        this.elements.currentWeather.classList.remove('active');
        this.elements.forecastSection.classList.remove('active');
        this.elements.apiKeyInput.style.display = 'none';
    }
    
    /**
     * Hide error state
     */
    hideError() {
        this.elements.error.classList.remove('active');
        this.elements.apiKeyInput.style.display = 'none';
    }
    
    /**
     * Update API key
     */
    async updateApiKey() {
        const newKey = this.elements.newApiKey.value.trim();
        
        if (!newKey) {
            this.showError('Please enter an API key.');
            return;
        }
        
        this.showLoading('UPDATING KEY...');
        
        try {
            // Update API key on server
            const response = await fetch('/api/config', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ apiKey: newKey })
            });
            
            if (!response.ok) {
                throw new Error('Failed to update API key on server');
            }
            
            // Update local API key
            this.API_KEY = newKey;
            this.elements.newApiKey.value = '';
            
            // Test the new key by trying to get weather
            if (this.currentLocation) {
                this.fetchWeatherByCoords(this.currentLocation.lat, this.currentLocation.lon);
            } else {
                this.autoDetectLocation();
            }
            
        } catch (error) {
            console.error('API key update error:', error);
            this.showError(`Key update error: ${error.message}`);
        }
    }
}

// Initialize the application when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new WeatherApp();
});

// Add some cyberpunk console messages
console.log(`
██╗    ██╗███████╗ █████╗ ████████╗██╗  ██╗███████╗██████╗ 
██║    ██║██╔════╝██╔══██╗╚══██╔══╝██║  ██║██╔════╝██╔══██╗
██║ █╗ ██║█████╗  ███████║   ██║   ███████║█████╗  ██████╔╝
██║███╗██║██╔══╝  ██╔══██║   ██║   ██╔══██║██╔══╝  ██╔══██╗
╚███╔███╔╝███████╗██║  ██║   ██║   ██║  ██║███████╗██║  ██║
 ╚══╝╚══╝ ╚══════╝╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝
                                                            
████████╗███████╗██████╗ ███╗   ███╗██╗███╗   ██╗ █████╗ ██╗     
╚══██╔══╝██╔════╝██╔══██╗████╗ ████║██║████╗  ██║██╔══██╗██║     
   ██║   █████╗  ██████╔╝██╔████╔██║██║██╔██╗ ██║███████║██║     
   ██║   ██╔══╝  ██╔══██╗██║╚██╔╝██║██║██║╚██╗██║██╔══██║██║     
   ██║   ███████╗██║  ██║██║ ╚═╝ ██║██║██║ ╚████║██║  ██║███████╗
   ╚═╝   ╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝╚══════╝
`);

console.log('%c🤖 WEATHER TERMINAL INITIALIZED', 'color: #00ffff; font-size: 16px; font-weight: bold;');
console.log('%c⚡ Love, Death & Robots aesthetic loaded', 'color: #ff0080; font-size: 12px;');
console.log('%c🌡️ Ready to scan atmospheric conditions...', 'color: #ffff00; font-size: 12px;');

// Add API key setup instructions
if (typeof window !== 'undefined') {
    setTimeout(() => {
        console.log('%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━', 'color: #00ffff;');
        console.log('%c🔑 API KEY SETUP REQUIRED', 'color: #ff4444; font-size: 14px; font-weight: bold;');
        console.log('%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━', 'color: #00ffff;');
        console.log('%cTo use this weather app, you need to:', 'color: #ffffff; font-size: 12px;');
        console.log('%c1. Get a free API key from OpenWeatherMap: https://openweathermap.org/api', 'color: #ffffff; font-size: 12px;');
        console.log('%c2. Replace "your_openweathermap_api_key_here" in script.js with your actual API key', 'color: #ffffff; font-size: 12px;');
        console.log('%c3. Or set it as an environment variable: OPENWEATHER_API_KEY', 'color: #ffffff; font-size: 12px;');
        console.log('%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━', 'color: #00ffff;');
    }, 2000);
}