ads-bit.js

// ADS-Bit - Retro Side View
class ADSBit {
    constructor() {
        this.canvas = document.getElementById('pixel-canvas');
        this.ctx = this.canvas.getContext('2d');

        // Set up responsive canvas sizing
        this.setupResponsiveCanvas();

        this.width = this.canvas.width;
        this.height = this.canvas.height;

        // Receiver location (will be fetched from config API)
        this.receiverLat = 0;
        this.receiverLon = 0;
        this.locationName = 'Loading...';
        this.receivers = [];

        // Flight data
        this.flights = new Map();
        this.aircraftTypes = new Map(); // Cache ICAO -> aircraft type

        // WebSocket
        this.ws = null;
        this.reconnectDelay = 1000;

        // Colors (retro pixel art theme)
        this.colors = {
            skyTop: '#6ca4dc',
            skyBottom: '#b4d4ec',
            cloud: '#ffffff',
            sun: '#fcd444',
            ground: '#d4a868',
            groundDark: '#b8884c',
            dirt: '#a87840',
            antenna: '#c0c0c0',      // Silver/gray antenna
            antennaDark: '#808080',  // Dark gray for shading
            antennaBase: '#4c4c4c',  // Dark base
            antennaRing: '#ffffff',  // White rings
            plane: '#fcfcfc',
            planeTowards: '#54fc54',
            planeAway: '#fc9c54',
            text: '#fcfcfc',
            textShadow: '#000000',
            grid: 'rgba(255, 255, 255, 0.1)',
            cactus: '#54a844',
            cactusDark: '#3c7c30',
            mountain: '#8c7c68',
            mountainSnow: '#fcfcfc',
            rain: 'rgba(120, 160, 200, 0.5)',
            snow: '#fcfcfc'
        };

        // Weather state
        this.weather = {
            condition: 'clear', // clear, cloudy, rain, snow
            description: 'Clear',
            temp: 0,
            sunrise: null,
            sunset: null,
            lastUpdate: 0
        };

        // View direction state (0=North, 90=East, 180=South, 270=West)
        this.viewDirection = 0;
        this.viewDirectionNames = { 0: 'N', 90: 'E', 180: 'S', 270: 'W' };
        this.fieldOfView = 90; // 90 degree field of view

        // Theme for background images (loaded from config)
        this.theme = 'desert';

        // Display preferences (loaded from config)
        this.displayConfig = {
            temperature_unit: 'F',
            show_weather: true,
            show_sidebar: true,
            default_view_direction: 0
        };
        this.siteConfig = {
            title: 'ADS-Bit',
            subtitle: 'Retro Flight Tracker'
        };

        // Hover and selection tracking
        this.mouseX = -1;
        this.mouseY = -1;
        this.hoveredAircraft = null;
        this.selectedAircraftIcao = null; // Selected from sidebar click
        this.visibleAircraftList = []; // For sidebar display
        this.lastSidebarUpdate = 0; // Throttle sidebar updates
        this.lastStatsUpdate = 0; // Throttle stats updates
        this.cachedCountText = '';
        this.cachedRangeText = '';

        // Load aircraft sprite images
        this.aircraftImages = {
            smallProp: new Image(),
            regionalJet: new Image(),
            narrowBody: new Image(),
            wideBody: new Image(),
            heavy: new Image(),
            helicopter: new Image(),
            balloon: new Image(),
            glider: new Image(),
            uav: new Image()
        };

        // Track which images have loaded
        this.aircraftImagesLoaded = {
            smallProp: false,
            regionalJet: false,
            narrowBody: false,
            wideBody: false,
            heavy: false,
            helicopter: false,
            balloon: false,
            glider: false,
            uav: false
        };

        // Load all aircraft images
        Object.keys(this.aircraftImages).forEach(type => {
            this.aircraftImages[type].onload = () => {
                this.aircraftImagesLoaded[type] = true;
                console.log(`${type} sprite loaded`);
            };
            this.aircraftImages[type].onerror = () => {
                console.warn(`Failed to load ${type} sprite`);
            };
            this.aircraftImages[type].src = `images/${type}.png?v=24`;
        });

        // Load environment images (directional backgrounds, base, sun, clouds)
        // Directional background images (loaded after fetching config)
        this.backgroundImages = {
            0: new Image(),    // North
            90: new Image(),   // East
            180: new Image(),  // South
            270: new Image()   // West
        };
        this.backgroundImagesLoaded = { 0: false, 90: false, 180: false, 270: false };

        this.sunImage = new Image();
        this.sunImage.onload = () => {
            this.sunImageLoaded = true;
            console.log('sun.png loaded');
        };
        this.sunImage.onerror = () => {
            console.warn('Failed to load sun.png');
        };
        this.sunImage.src = 'images/sun.png?v=24';

        this.happyCloudImage = new Image();
        this.happyCloudImage.onload = () => {
            this.happyCloudImageLoaded = true;
            console.log('happycloud.png loaded');
        };
        this.happyCloudImage.onerror = () => {
            console.warn('Failed to load happycloud.png');
        };
        this.happyCloudImage.src = 'images/happycloud.png?v=24';

        this.rainCloudImage = new Image();
        this.rainCloudImage.onload = () => {
            this.rainCloudImageLoaded = true;
            console.log('raincloud.png loaded');
        };
        this.rainCloudImage.onerror = () => {
            console.warn('Failed to load raincloud.png');
        };
        this.rainCloudImage.src = 'images/raincloud.png?v=24';

        this.moonSprite = new Image();
        this.moonSprite.onload = () => {
            this.moonSpriteLoaded = true;
            console.log('moon_6_phases.png loaded');
        };
        this.moonSprite.onerror = () => {
            console.warn('Failed to load moon_6_phases.png');
        };
        this.moonSprite.src = 'images/moon_6_phases.png?v=32';

        // Track which environment images have loaded
        this.sunImageLoaded = false;
        this.happyCloudImageLoaded = false;
        this.rainCloudImageLoaded = false;
        this.moonSpriteLoaded = false;

        // Pixel art sprites (kept as fallback and for other elements)
        this.sprites = this.createSprites();

        this.init();
    }

    createSprites() {
        // Define pixel art sprites as 2D arrays (1 = mast, 2 = white ring, 3 = base)
        return {
            // ADS-B Antenna
            antenna: [
                [0,0,1,0,0],     // Top tip
                [0,1,2,1,0],     // Top ring (white)
                [0,0,1,0,0],     // Mast
                [0,0,1,0,0],     // Mast
                [0,1,2,1,0],     // Ring
                [0,0,1,0,0],     // Mast
                [0,0,1,0,0],     // Mast
                [1,1,2,1,1],     // Large ring
                [0,0,1,0,0],     // Mast
                [0,0,1,0,0],     // Mast
                [0,3,3,3,0],     // Base
                [3,3,3,3,3]      // Base platform
            ],
            // Cactus (saguaro style)
            cactus: [
                [0,1,0,0,0,1,0],
                [0,1,0,0,0,1,0],
                [1,1,1,1,1,1,1],
                [0,0,1,1,1,0,0],
                [0,0,1,1,1,0,0],
                [0,0,1,1,1,0,0],
                [0,0,1,1,1,0,0],
                [0,0,1,1,1,0,0]
            ],
            // Mountain (simple peak)
            mountain: [
                [0,0,0,0,0,1,0,0,0,0,0],
                [0,0,0,0,1,1,1,0,0,0,0],
                [0,0,0,1,1,2,1,1,0,0,0],
                [0,0,1,1,1,2,1,1,1,0,0],
                [0,1,1,1,1,1,1,1,1,1,0],
                [1,1,1,1,1,1,1,1,1,1,1]
            ],
            // Aircraft sprites (side view, facing right)
            // Colors: 1=fuselage, 2=windows, 3=wings, 4=tail, 5=engine

            // Small prop plane (Cessna, small GA)
            smallProp: [
                [0,0,0,0,4,4,0,0],      // Tail
                [0,0,0,4,4,1,4,0],      // Tail fin
                [0,0,0,1,1,1,1,0],      // Rear fuselage
                [0,0,1,2,1,1,1,1],      // Fuselage with windows
                [3,3,3,3,3,1,1,1],      // Wings + nose
                [0,0,1,2,1,1,5,1],      // Fuselage with prop
                [0,0,0,1,1,1,1,0],      // Belly
                [0,0,0,0,0,3,0,0]       // Bottom wing
            ],

            // Regional jet (CRJ, ERJ)
            regionalJet: [
                [0,0,0,0,0,4,4,0,0],    // Tail
                [0,0,0,0,4,4,1,4,0],    // Tail fin
                [0,0,0,0,1,1,1,1,0],    // Rear fuselage
                [0,0,0,1,2,2,1,1,1],    // Fuselage with windows
                [0,3,3,3,3,3,3,1,1],    // Wings
                [0,0,0,1,2,2,1,5,1],    // Fuselage + engine
                [0,0,0,0,1,1,1,5,1],    // Belly + engine
                [0,0,0,0,0,0,3,0,0]     // Wing tip
            ],

            // Narrow body (737, A320)
            narrowBody: [
                [0,0,0,0,0,4,4,4,0,0],      // Tall tail
                [0,0,0,0,4,4,1,1,4,0],      // Tail fin
                [0,0,0,0,1,1,1,1,1,0],      // Rear fuselage
                [0,0,0,1,2,2,2,1,1,1],      // Windows
                [0,0,3,3,3,3,3,3,1,1],      // Wings
                [0,0,0,1,2,2,2,1,5,5],      // Lower fuselage + engines
                [0,0,0,0,1,1,1,1,5,5],      // Belly + engines
                [0,0,0,0,0,0,3,3,0,0]       // Wing tip
            ],

            // Wide body (777, 787, A350)
            wideBody: [
                [0,0,0,0,0,0,4,4,4,0,0],    // Tall tail
                [0,0,0,0,0,4,4,1,1,4,0],    // Tail fin
                [0,0,0,0,0,1,1,1,1,1,0],    // Rear fuselage
                [0,0,0,0,1,2,2,2,1,1,1],    // Upper windows
                [0,0,0,3,3,3,3,3,3,1,1],    // Large wings
                [0,0,0,3,3,3,3,3,3,1,1],    // Wing body
                [0,0,0,0,1,2,2,2,5,5,5],    // Lower fuselage + big engines
                [0,0,0,0,0,1,1,1,5,5,5],    // Belly + engines
                [0,0,0,0,0,0,0,3,3,0,0]     // Wing tip
            ],

            // Heavy/jumbo (747, A380)
            heavy: [
                [0,0,0,0,0,0,4,4,4,4,0,0],  // Very tall tail
                [0,0,0,0,0,4,4,1,1,1,4,0],  // Tail fin
                [0,0,0,0,2,2,1,1,1,1,1,0],  // Upper deck with windows!
                [0,0,0,0,1,1,1,1,1,1,1,0],  // Upper fuselage
                [0,0,0,1,2,2,2,2,1,1,1,1],  // Main deck windows
                [0,0,3,3,3,3,3,3,3,1,1,1],  // Massive wings
                [0,0,3,3,3,3,3,3,3,1,1,1],  // Wing body
                [0,0,0,1,2,2,2,2,5,5,5,5],  // Lower deck + huge engines
                [0,0,0,0,1,1,1,1,5,5,5,5],  // Belly + engines
                [0,0,0,0,0,0,0,3,3,3,0,0]   // Wing tips
            ]
        };
    }

    processPlaneImage() {
        // Create an off-screen canvas to process the image
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = this.planeImage.width;
        tempCanvas.height = this.planeImage.height;
        const tempCtx = tempCanvas.getContext('2d');

        // Draw the original image
        tempCtx.drawImage(this.planeImage, 0, 0);

        // Get image data
        const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
        const data = imageData.data;
        const width = tempCanvas.width;
        const height = tempCanvas.height;

        // Flood fill from corners to mark background pixels
        const isBackground = new Uint8Array(width * height);

        const isWhiteish = (r, g, b) => r > 240 && g > 240 && b > 240;

        const floodFill = (startX, startY) => {
            const stack = [[startX, startY]];

            while (stack.length > 0) {
                const [x, y] = stack.pop();

                if (x < 0 || x >= width || y < 0 || y >= height) continue;

                const idx = y * width + x;
                if (isBackground[idx]) continue;

                const pixelIdx = idx * 4;
                const r = data[pixelIdx];
                const g = data[pixelIdx + 1];
                const b = data[pixelIdx + 2];

                if (!isWhiteish(r, g, b)) continue;

                isBackground[idx] = 1;

                // Add neighbors
                stack.push([x + 1, y]);
                stack.push([x - 1, y]);
                stack.push([x, y + 1]);
                stack.push([x, y - 1]);
            }
        };

        // Flood fill from all four corners
        floodFill(0, 0);
        floodFill(width - 1, 0);
        floodFill(0, height - 1);
        floodFill(width - 1, height - 1);

        // Make background pixels transparent
        for (let i = 0; i < isBackground.length; i++) {
            if (isBackground[i]) {
                data[i * 4 + 3] = 0; // Set alpha to 0
            }
        }

        // Put the modified data back
        tempCtx.putImageData(imageData, 0, 0);

        // Create a new image from the processed canvas
        this.processedPlaneImage = new Image();
        this.processedPlaneImage.src = tempCanvas.toDataURL();
        this.processedPlaneImage.onload = () => {
            this.planeImageLoaded = true;
            console.log('Plane image processed and loaded');
        };
    }

    setupResponsiveCanvas() {
        const resizeCanvas = () => {
            const container = this.canvas.parentElement;
            const containerWidth = container.clientWidth;
            const containerHeight = container.clientHeight;

            // Maintain 4:3 aspect ratio (800x600)
            const aspectRatio = 4 / 3;
            let newWidth, newHeight;

            if (containerWidth / containerHeight > aspectRatio) {
                // Container is wider - fit to height
                newHeight = containerHeight;
                newWidth = newHeight * aspectRatio;
            } else {
                // Container is taller - fit to width
                newWidth = containerWidth;
                newHeight = newWidth / aspectRatio;
            }

            // Set canvas internal resolution (1200x900 for larger display)
            this.canvas.width = 1200;
            this.canvas.height = 900;

            // Update stored dimensions
            this.width = 1200;
            this.height = 900;

            // CSS will handle the visual scaling via CSS in HTML
        };

        // Initial resize
        resizeCanvas();

        // Handle window resize and orientation change
        window.addEventListener('resize', resizeCanvas);
        window.addEventListener('orientationchange', () => {
            setTimeout(resizeCanvas, 100);
        });
    }

    async init() {
        // Fetch config (includes theme and location)
        await this.fetchConfig();

        // Load background images based on theme
        this.loadBackgroundImages();

        // Fetch weather
        await this.fetchWeather();

        // Update weather every 10 minutes
        setInterval(() => this.fetchWeather(), 600000);

        // Update date/time display every second
        setInterval(() => this.updateWeatherDisplay(), 1000);

        // Setup view direction controls
        this.setupViewControls();

        // Start rendering loop
        this.render();
        setInterval(() => this.render(), 100); // 10 FPS for retro feel

        // Connect to WebSocket
        this.connectWebSocket();
    }

    setupViewControls() {
        // Keyboard controls
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') {
                this.rotateView(-90);
            } else if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') {
                this.rotateView(90);
            }
        });

        // Click handlers for arrow buttons
        const leftArrow = document.getElementById('view-left');
        const rightArrow = document.getElementById('view-right');

        if (leftArrow) {
            leftArrow.addEventListener('click', () => this.rotateView(-90));
        }
        if (rightArrow) {
            rightArrow.addEventListener('click', () => this.rotateView(90));
        }

        // Mouse tracking for hover labels
        this.canvas.addEventListener('mousemove', (e) => {
            const rect = this.canvas.getBoundingClientRect();
            // Convert mouse position to canvas coordinates
            const scaleX = this.canvas.width / rect.width;
            const scaleY = this.canvas.height / rect.height;
            this.mouseX = (e.clientX - rect.left) * scaleX;
            this.mouseY = (e.clientY - rect.top) * scaleY;
        });

        this.canvas.addEventListener('mouseleave', () => {
            this.mouseX = -1;
            this.mouseY = -1;
            this.hoveredAircraft = null;
        });

        // Click on canvas to deselect
        this.canvas.addEventListener('click', () => {
            this.selectedAircraftIcao = null;
            this.updateAircraftSidebar();
        });

        // Sidebar click handler (delegated)
        const sidebar = document.getElementById('aircraft-sidebar');
        if (sidebar) {
            sidebar.addEventListener('click', (e) => {
                const aircraftEl = e.target.closest('.sidebar-aircraft');
                if (aircraftEl) {
                    const icao = aircraftEl.dataset.icao;
                    // Toggle selection
                    if (this.selectedAircraftIcao === icao) {
                        this.selectedAircraftIcao = null;
                    } else {
                        this.selectedAircraftIcao = icao;
                    }
                    this.updateAircraftSidebar();
                }
            });
        }

        // Update initial compass display
        this.updateCompassDisplay();
    }

    rotateView(degrees) {
        this.viewDirection = (this.viewDirection + degrees + 360) % 360;
        this.updateCompassDisplay();
        console.log(`View direction: ${this.viewDirectionNames[this.viewDirection]} (${this.viewDirection}°)`);
    }

    updateCompassDisplay() {
        const compassEl = document.getElementById('compass-direction');
        if (compassEl) {
            const dirName = this.viewDirectionNames[this.viewDirection];
            const fullNames = { 'N': 'NORTH', 'E': 'EAST', 'S': 'SOUTH', 'W': 'WEST' };
            compassEl.textContent = `VIEWING: ${fullNames[dirName]}`;
        }
    }

    // Check if a bearing falls within the current field of view
    isInFieldOfView(bearing) {
        const halfFov = this.fieldOfView / 2;
        const minAngle = (this.viewDirection - halfFov + 360) % 360;
        const maxAngle = (this.viewDirection + halfFov) % 360;

        // Handle wrap-around at 0/360
        if (minAngle > maxAngle) {
            return bearing >= minAngle || bearing <= maxAngle;
        } else {
            return bearing >= minAngle && bearing <= maxAngle;
        }
    }

    // Get X position based on bearing within field of view
    bearingToX(bearing) {
        const halfFov = this.fieldOfView / 2;

        // Calculate angle difference from view direction
        let angleDiff = bearing - this.viewDirection;

        // Normalize to -180 to 180
        if (angleDiff > 180) angleDiff -= 360;
        if (angleDiff < -180) angleDiff += 360;

        // Map -45 to +45 degrees to screen X (with padding)
        const padding = 60;
        const usableWidth = this.width - (padding * 2);

        // -45° = left edge, +45° = right edge
        const normalizedAngle = (angleDiff + halfFov) / this.fieldOfView;
        return padding + (normalizedAngle * usableWidth);
    }

    async fetchConfig() {
        try {
            const response = await fetch('/api/config');
            const data = await response.json();
            this.theme = data.theme || 'desert';
            this.receiverLat = data.location?.lat || 0;
            this.receiverLon = data.location?.lon || 0;
            this.locationName = data.location?.name || 'My Location';
            this.receivers = data.receivers || [];

            // Apply site config
            if (data.site) {
                this.siteConfig = { ...this.siteConfig, ...data.site };
                const titleEl = document.getElementById('site-title');
                if (titleEl) titleEl.textContent = this.siteConfig.title;
                document.title = `${this.siteConfig.title} - ${this.siteConfig.subtitle}`;
            }

            // Apply display config
            if (data.display) {
                this.displayConfig = { ...this.displayConfig, ...data.display };

                // Apply default view direction
                if (this.displayConfig.default_view_direction) {
                    this.viewDirection = this.displayConfig.default_view_direction;
                }

                // Show/hide sidebar
                const sidebar = document.getElementById('aircraft-sidebar');
                if (sidebar) {
                    sidebar.style.display = this.displayConfig.show_sidebar ? '' : 'none';
                }

                // Show/hide weather bar
                const weatherBar = document.getElementById('weather-info');
                if (weatherBar) {
                    weatherBar.style.display = this.displayConfig.show_weather ? '' : 'none';
                }
            }

            console.log(`Config loaded - Theme: ${this.theme}, Location: ${this.locationName} (${this.receiverLat}, ${this.receiverLon})`);
            console.log(`Receivers: ${this.receivers.join(', ') || 'none'}`);
        } catch (error) {
            console.warn('Could not fetch config, using defaults');
            // Fallback to receiver-location API for backwards compatibility
            await this.fetchReceiverLocation();
        }
    }

    loadBackgroundImages() {
        const directions = [
            { deg: 0, name: 'north' },
            { deg: 90, name: 'east' },
            { deg: 180, name: 'south' },
            { deg: 270, name: 'west' }
        ];
        directions.forEach(dir => {
            this.backgroundImages[dir.deg].onload = () => {
                this.backgroundImagesLoaded[dir.deg] = true;
                console.log(`${this.theme}/${dir.name}.png loaded`);
            };
            this.backgroundImages[dir.deg].onerror = () => {
                console.warn(`Failed to load backgrounds/${this.theme}/${dir.name}.png`);
            };
            this.backgroundImages[dir.deg].src = `backgrounds/${this.theme}/${dir.name}.png?v=1`;
        });
    }

    async fetchReceiverLocation() {
        try {
            // Fetch from same server that serves ADS-Bit
            const response = await fetch('/api/receiver-location');
            const data = await response.json();
            this.receiverLat = data.lat;
            this.receiverLon = data.lon;
            this.locationName = data.name || 'My Location';
            console.log(`Receiver location: ${this.locationName} (${this.receiverLat}, ${this.receiverLon})`);
        } catch (error) {
            console.warn('Could not fetch receiver location, using default');
        }
    }

    async fetchWeather() {
        try {
            // Use Open-Meteo API (free, no API key needed) with daily forecast for sunrise/sunset
            const url = `https://api.open-meteo.com/v1/forecast?latitude=${this.receiverLat}&longitude=${this.receiverLon}&current_weather=true&daily=sunrise,sunset&timezone=auto`;
            const response = await fetch(url);
            const data = await response.json();

            const weatherCode = data.current_weather.weathercode;
            this.weather.temp = data.current_weather.temperature;

            // Get today's sunrise and sunset times
            if (data.daily && data.daily.sunrise && data.daily.sunset) {
                this.weather.sunrise = new Date(data.daily.sunrise[0]);
                this.weather.sunset = new Date(data.daily.sunset[0]);
            }

            // Map weather codes to conditions
            // 0 = clear, 1-3 = partly cloudy, 45-48 = fog, 51-67 = rain, 71-77 = snow, 80-99 = rain/thunderstorm
            if (weatherCode === 0) {
                this.weather.condition = 'clear';
                this.weather.description = 'Clear';
            } else if (weatherCode <= 3) {
                this.weather.condition = 'cloudy';
                this.weather.description = 'Partly Cloudy';
            } else if ((weatherCode >= 51 && weatherCode <= 67) || (weatherCode >= 80 && weatherCode <= 99)) {
                this.weather.condition = 'rain';
                this.weather.description = 'Rainy';
            } else if (weatherCode >= 71 && weatherCode <= 77) {
                this.weather.condition = 'snow';
                this.weather.description = 'Snowy';
            } else {
                this.weather.condition = 'cloudy';
                this.weather.description = 'Cloudy';
            }

            this.weather.lastUpdate = Date.now();
            this.updateWeatherDisplay();
            console.log(`Weather updated: ${this.weather.condition}, ${this.weather.temp}°C`);
        } catch (error) {
            console.warn('Could not fetch weather data', error);
            this.weather.condition = 'clear'; // Default to clear
        }
    }

    updateWeatherDisplay() {
        // Update date/time display
        const now = new Date();
        const options = {
            weekday: 'short',
            month: 'short',
            day: 'numeric',
            hour: 'numeric',
            minute: '2-digit',
            hour12: true
        };
        const dateTimeStr = now.toLocaleString('en-US', options);
        document.getElementById('datetime-display').textContent = `${this.locationName} - ${dateTimeStr}`;

        // Update weather display with configured unit
        let tempDisplay;
        if (this.displayConfig.temperature_unit === 'C') {
            tempDisplay = `${Math.round(this.weather.temp)}°C`;
        } else {
            tempDisplay = `${Math.round((this.weather.temp * 9/5) + 32)}°F`;
        }
        document.getElementById('weather-display').textContent = `${tempDisplay} - ${this.weather.description}`;

        // Update sunrise/sunset times
        if (this.weather.sunrise && this.weather.sunset) {
            const sunriseStr = this.weather.sunrise.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
            const sunsetStr = this.weather.sunset.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
            document.getElementById('sun-times').textContent = `☀ ${sunriseStr} / 🌙 ${sunsetStr}`;
        }
    }

    connectWebSocket() {
        // Dynamically build WebSocket URL based on current page
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const host = window.location.host;
        const wsUrl = `${protocol}//${host}/ws`;

        console.log(`Connecting to WebSocket: ${wsUrl}`);
        this.ws = new WebSocket(wsUrl);

        this.ws.onopen = () => {
            console.log('WebSocket connected');
            const receiverText = this.receivers && this.receivers.length > 0
                ? `CONNECTED: ${this.receivers.join(', ')}`
                : 'CONNECTED';
            document.getElementById('connection-status').textContent = receiverText;
            document.getElementById('connection-status').classList.remove('blink');
            this.reconnectDelay = 1000;
        };

        this.ws.onmessage = (event) => {
            const data = JSON.parse(event.data);
            if (data.type === 'flights') {
                this.updateFlights(data.flights);
            }
        };

        this.ws.onclose = () => {
            console.log('WebSocket disconnected, reconnecting...');
            document.getElementById('connection-status').textContent = 'RECONNECTING...';
            document.getElementById('connection-status').classList.add('blink');
            setTimeout(() => this.connectWebSocket(), this.reconnectDelay);
            this.reconnectDelay = Math.min(this.reconnectDelay * 2, 30000);
        };

        this.ws.onerror = (error) => {
            console.error('WebSocket error:', error);
        };
    }

    updateFlights(flights) {
        this.flights.clear();
        flights.forEach(flight => {
            if (flight.lat && flight.lon && flight.altitude) {
                this.flights.set(flight.icao, flight);
                // Use ADS-B emitter category if available (from dump1090 JSON API),
                // otherwise fall back to heuristics. Re-evaluate when new data arrives.
                const hasEmitterCat = flight.category && flight.category.length >= 2;
                const cached = this.aircraftTypes.get(flight.icao);
                if (hasEmitterCat && (!cached || !cached.fromEmitter)) {
                    // Real ADS-B emitter category arrived - always prefer it
                    this.categorizeFromEmitter(flight);
                } else if (!cached) {
                    // No data yet - use heuristics
                    this.categorizeAircraft(flight);
                } else if (!cached.fromEmitter && (flight.speed > 0 && flight.callsign)) {
                    // Better heuristic data arrived, re-evaluate
                    this.categorizeAircraft(flight);
                }
            }
        });
        // Aircraft count is now updated in drawAircraft() with visible/total format
    }

    categorizeFromEmitter(flight) {
        // Map ADS-B emitter category to sprite type
        // See DO-260B Table 2-75 for full list
        const cat = flight.category;
        let type = 'narrowBody';

        switch (cat) {
            case 'A1': type = 'smallProp'; break;     // Light (< 15,500 lbs)
            case 'A2': type = 'regionalJet'; break;    // Small (15,500 - 75,000 lbs)
            case 'A3': type = 'narrowBody'; break;     // Large (75,000 - 300,000 lbs)
            case 'A4': type = 'narrowBody'; break;     // High vortex large (B757)
            case 'A5':                                  // Heavy (> 300,000 lbs)
                // Distinguish wideBody vs heavy sprite by altitude/speed
                type = ((flight.altitude > 42000) || (flight.speed > 550)) ? 'heavy' : 'wideBody';
                break;
            case 'A6': type = 'narrowBody'; break;     // High performance (> 5g, > 400 kts)
            case 'A7': type = 'helicopter'; break;     // Rotorcraft
            case 'B1': type = 'glider'; break;         // Glider / sailplane
            case 'B2': type = 'balloon'; break;        // Lighter-than-air
            case 'B4': type = 'smallProp'; break;      // Skydiver drop plane
            case 'B6': type = 'uav'; break;            // UAV
            default:   type = 'narrowBody'; break;     // Unknown or surface vehicles
        }

        this.aircraftTypes.set(flight.icao, { type, fromEmitter: true });
    }

    categorizeAircraft(flight) {
        // Heuristic fallback when ADS-B emitter category is not available.
        // Priority: 1. Callsign-based, 2. Altitude/Speed heuristics, 3. Default
        //
        // NOTE: speed=0 or altitude=0 means data not yet received, so we
        // avoid making assumptions from missing data.  The caller should
        // re-categorize once better data arrives.

        let type = 'narrowBody'; // Default

        const callsign = (flight.callsign || '').trim();
        const altitude = flight.altitude || 0;
        const speed = flight.speed || 0;
        const hasSpeed = speed > 0;
        const hasAlt = altitude > 0;

        // --- Callsign-based detection (most reliable) ---
        const airline = callsign.length >= 3 ? callsign.substring(0, 3) : '';

        // Known helicopter operator callsign prefixes
        const heliOperators = ['LFE', 'MED', 'CHP', 'PHI', 'ERA', 'BHS'];
        // Keywords that appear anywhere in helicopter callsigns
        const heliKeywords = ['LIFE', 'MERCY', 'REACH', 'COPTER', 'HELO', 'MEDEVAC', 'CARE'];
        const isHeliCallsign = heliOperators.includes(airline) ||
            heliKeywords.some(kw => callsign.includes(kw));

        const heavyCallsigns = ['CPA', 'UAE', 'ETH', 'QTR', 'SIA', 'KLM', 'AFL', 'BAW', 'AAL', 'DAL', 'UAL', 'FDX', 'UPS'];
        const regionalCallsigns = ['SKW', 'RPA', 'ASH', 'PDT', 'CHQ', 'ENY', 'JIA', 'CPZ'];

        // N-number = US general aviation registration (Cessna, Piper, etc.)
        const isNNumber = callsign.startsWith('N') && callsign.length >= 4 && callsign.length <= 6 && /^N\d/.test(callsign);

        // --- Apply rules ---

        // 1. Helicopter: callsign match
        if (isHeliCallsign) {
            type = 'helicopter';
        }
        // 2. Heavy / Wide body
        else if (heavyCallsigns.includes(airline)) {
            type = (hasAlt && altitude > 42000) || (hasSpeed && speed > 550) ? 'heavy' : 'wideBody';
        }
        else if ((hasAlt && altitude > 42000) || (hasSpeed && speed > 550)) {
            type = 'heavy';
        }
        else if ((hasAlt && altitude > 40000) || (hasSpeed && speed > 500)) {
            type = 'wideBody';
        }
        // 3. N-number = general aviation (small prop unless data says otherwise)
        else if (isNNumber) {
            type = (hasAlt && altitude > 25000) ? 'narrowBody' : 'smallProp';
        }
        // 4. Regional jets
        else if (regionalCallsigns.includes(airline)) {
            type = 'regionalJet';
        }
        // 5. Speed/altitude heuristics (only when we have real data)
        else if (hasSpeed && hasAlt) {
            if (speed < 60 && altitude < 5000) {
                type = 'helicopter';
            } else if (altitude < 18000 && speed < 300) {
                type = (speed < 170 && altitude < 12000) ? 'smallProp' : 'regionalJet';
            } else {
                type = 'narrowBody';
            }
        }
        // 6. Altitude-only heuristic
        else if (hasAlt && !hasSpeed) {
            if (altitude < 10000) {
                type = 'smallProp';
            } else if (altitude < 25000) {
                type = 'regionalJet';
            } else {
                type = 'narrowBody';
            }
        }
        // 7. No useful data yet - stay with default

        this.aircraftTypes.set(flight.icao, { type, fromEmitter: false });
    }

    getAircraftSprite(icao) {
        const cached = this.aircraftTypes.get(icao);
        const category = cached ? cached.type : 'narrowBody';
        return this.sprites[category] || this.sprites.narrowBody;
    }

    // Calculate distance in nautical miles
    calculateDistance(lat1, lon1, lat2, lon2) {
        const R = 3440.065; // Earth radius in nautical miles
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                  Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                  Math.sin(dLon/2) * Math.sin(dLon/2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        return R * c;
    }

    // Calculate bearing from receiver to aircraft
    calculateBearing(lat1, lon1, lat2, lon2) {
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const y = Math.sin(dLon) * Math.cos(lat2 * Math.PI / 180);
        const x = Math.cos(lat1 * Math.PI / 180) * Math.sin(lat2 * Math.PI / 180) -
                  Math.sin(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.cos(dLon);
        const bearing = Math.atan2(y, x) * 180 / Math.PI;
        return (bearing + 360) % 360;
    }

    // Check if plane is flying towards or away from receiver
    isFlyingTowards(flight) {
        const bearingToReceiver = this.calculateBearing(
            flight.lat, flight.lon,
            this.receiverLat, this.receiverLon
        );
        const headingDiff = Math.abs(flight.track - bearingToReceiver);
        const normalizedDiff = headingDiff > 180 ? 360 - headingDiff : headingDiff;
        return normalizedDiff < 90; // Less than 90 degrees = flying towards
    }

    render() {
        // Draw sky gradient
        this.drawSky();

        // Draw clouds
        this.drawClouds();

        // Draw sun
        this.drawSun();

        // Draw moon
        this.drawMoon();

        // Weather is represented by cloud sprites (rain clouds vs happy clouds)
        // No additional weather effects needed

        // Draw ground (directional background) - after celestial bodies so horizon covers low sun/moon
        this.drawGround();

        // Draw grid lines for altitude reference
        this.drawGrid();

        // Calculate auto-scaling
        const scale = this.calculateScale();

        // Draw aircraft on top of everything
        this.drawAircraft(scale);

        // Draw scale indicators
        this.drawScaleIndicators(scale);

        // Draw compass indicators
        this.drawCompassIndicators();
    }

    getSkyColors() {
        // Calculate sun position to determine sky colors
        const now = new Date();

        if (!this.weather.sunrise || !this.weather.sunset) {
            // Default day colors if no sun data
            return { top: this.colors.skyTop, bottom: this.colors.skyBottom };
        }

        const sunrise = this.weather.sunrise.getTime();
        const sunset = this.weather.sunset.getTime();
        const current = now.getTime();

        // Dawn/Dusk transition period (30 minutes)
        const transitionTime = 30 * 60 * 1000;

        // Dawn colors (orange/pink sunrise)
        const dawnTop = '#4c5c8c';
        const dawnBottom = '#dc8c5c';

        // Day colors (bright blue)
        const dayTop = '#6ca4dc';
        const dayBottom = '#b4d4ec';

        // Dusk colors (orange/purple sunset)
        const duskTop = '#6c5c9c';
        const duskBottom = '#dc9c6c';

        // Night colors (dark blue/purple)
        const nightTop = '#1c2c4c';
        const nightBottom = '#2c3c5c';

        // Determine time of day and interpolate colors
        if (current < sunrise - transitionTime) {
            // Night (before dawn)
            return { top: nightTop, bottom: nightBottom };
        } else if (current < sunrise) {
            // Dawn transition
            const progress = (current - (sunrise - transitionTime)) / transitionTime;
            return {
                top: this.interpolateColor(nightTop, dawnTop, progress),
                bottom: this.interpolateColor(nightBottom, dawnBottom, progress)
            };
        } else if (current < sunrise + transitionTime) {
            // Sunrise to day transition
            const progress = (current - sunrise) / transitionTime;
            return {
                top: this.interpolateColor(dawnTop, dayTop, progress),
                bottom: this.interpolateColor(dawnBottom, dayBottom, progress)
            };
        } else if (current < sunset - transitionTime) {
            // Full day
            return { top: dayTop, bottom: dayBottom };
        } else if (current < sunset) {
            // Day to dusk transition
            const progress = (current - (sunset - transitionTime)) / transitionTime;
            return {
                top: this.interpolateColor(dayTop, duskTop, progress),
                bottom: this.interpolateColor(dayBottom, duskBottom, progress)
            };
        } else if (current < sunset + transitionTime) {
            // Dusk to night transition
            const progress = (current - sunset) / transitionTime;
            return {
                top: this.interpolateColor(duskTop, nightTop, progress),
                bottom: this.interpolateColor(duskBottom, nightBottom, progress)
            };
        } else {
            // Night (after dusk)
            return { top: nightTop, bottom: nightBottom };
        }
    }

    interpolateColor(color1, color2, factor) {
        // Interpolate between two hex colors
        const c1 = parseInt(color1.slice(1), 16);
        const c2 = parseInt(color2.slice(1), 16);

        const r1 = (c1 >> 16) & 0xff;
        const g1 = (c1 >> 8) & 0xff;
        const b1 = c1 & 0xff;

        const r2 = (c2 >> 16) & 0xff;
        const g2 = (c2 >> 8) & 0xff;
        const b2 = c2 & 0xff;

        const r = Math.round(r1 + (r2 - r1) * factor);
        const g = Math.round(g1 + (g2 - g1) * factor);
        const b = Math.round(b1 + (b2 - b1) * factor);

        return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
    }

    drawSky() {
        // Sky gradient (SNES style) - adjust based on time of day and weather
        const gradient = this.ctx.createLinearGradient(0, 0, 0, this.height - 60);

        // Get base sky colors based on sun position
        let skyColors = this.getSkyColors();
        let skyTop = skyColors.top;
        let skyBottom = skyColors.bottom;

        // Adjust for weather conditions (darken for rain/snow)
        if (this.weather.condition === 'rain' || this.weather.condition === 'snow') {
            // Darken the sky colors
            skyTop = this.interpolateColor(skyTop, '#4c5c6c', 0.4);
            skyBottom = this.interpolateColor(skyBottom, '#7c8c9c', 0.4);
        } else if (this.weather.condition === 'cloudy') {
            // Slightly darken for cloudy
            skyTop = this.interpolateColor(skyTop, '#5c6c7c', 0.2);
            skyBottom = this.interpolateColor(skyBottom, '#8c9cac', 0.2);
        }

        gradient.addColorStop(0, skyTop);
        gradient.addColorStop(1, skyBottom);
        this.ctx.fillStyle = gradient;
        this.ctx.fillRect(0, 0, this.width, this.height - 60);
    }

    drawClouds() {
        // Choose cloud image based on weather condition
        const isRainy = (this.weather.condition === 'rain' || this.weather.condition === 'snow');
        const cloudImage = isRainy ? this.rainCloudImage : this.happyCloudImage;
        const cloudImageLoaded = isRainy ? this.rainCloudImageLoaded : this.happyCloudImageLoaded;

        // Use PNG images if loaded, otherwise fall back to programmatic rendering
        if (cloudImageLoaded && cloudImage.complete) {
            // Animate clouds moving across screen
            const time = Date.now() / 10000; // Slow cloud movement
            const numClouds = (this.weather.condition === 'cloudy' || isRainy) ? 8 : 4;

            // Calculate proper width/height maintaining aspect ratio (150% scale)
            const cloudHeight = 90;
            const aspectRatio = cloudImage.width / cloudImage.height;
            const cloudWidth = cloudHeight * aspectRatio;

            // Generate random but consistent offsets for each cloud using seeded positions
            for (let i = 0; i < numClouds; i++) {
                // Use cloud index as seed for consistent random positions
                const seed = i * 123.456;
                const xOffset = Math.sin(seed) * 200; // Random horizontal offset
                const yOffset = Math.cos(seed * 1.5) * 60; // Random vertical offset
                const speed = 15 + (Math.sin(seed * 2) * 5); // Varying cloud speeds

                const x = ((i * 180 + xOffset + time * speed) % (this.width + cloudWidth)) - cloudWidth;
                const y = 20 + yOffset + Math.abs(Math.sin(seed * 3) * 80);

                this.ctx.drawImage(cloudImage, x, y, cloudWidth, cloudHeight);
            }
        } else {
            // Fallback to programmatic cloud rendering
            const time = Date.now() / 10000;
            const pixelSize = 4;
            const numClouds = (this.weather.condition === 'cloudy' || isRainy) ? 10 : 5;

            for (let i = 0; i < numClouds; i++) {
                const x = ((i * 100 + time * 20) % (this.width + 100)) - 50;
                const y = 20 + (i % 5) * 15;

                // Darker clouds for rain/snow
                if (isRainy) {
                    this.ctx.fillStyle = '#c4c4c4';
                } else {
                    this.ctx.fillStyle = this.colors.cloud;
                }

                // Cloud shape (simple)
                this.ctx.fillRect(x, y, pixelSize * 3, pixelSize);
                this.ctx.fillRect(x + pixelSize, y - pixelSize, pixelSize * 2, pixelSize);
                this.ctx.fillRect(x - pixelSize, y, pixelSize * 5, pixelSize);
            }
        }
    }

    calculateSunPosition() {
        // Calculate sun's position in the sky using astronomical formulas
        const now = new Date();

        if (!this.weather.sunrise || !this.weather.sunset) {
            // Default position if no sun data
            return { altitude: 45, azimuth: 180 };
        }

        const sunrise = this.weather.sunrise.getTime();
        const sunset = this.weather.sunset.getTime();
        const current = now.getTime();

        // Sun is not visible at night
        if (current < sunrise || current > sunset) {
            return { altitude: -10, azimuth: 0 }; // Below horizon
        }

        // Calculate day progress (0 = sunrise, 0.5 = solar noon, 1 = sunset)
        const dayLength = sunset - sunrise;
        const dayProgress = (current - sunrise) / dayLength;

        // Sun's altitude: peaks at solar noon (around 0.5 day progress)
        // Max altitude varies by season based on receiver latitude
        // Simplified: use parabolic curve peaking at solar noon
        const maxAltitude = 90 - Math.abs(this.receiverLat); // Rough approximation
        const altitude = maxAltitude * Math.sin(dayProgress * Math.PI);

        // Sun's azimuth: rises in east (90°), sets in west (270°)
        // 90° = east, 180° = south, 270° = west
        const azimuth = 90 + (dayProgress * 180); // East to West

        return { altitude, azimuth };
    }

    calculateMoonPhase() {
        // Calculate moon phase based on lunar cycle
        // Returns a value from 0 to 1 representing the moon phase
        // 0 = New Moon, 0.25 = First Quarter, 0.5 = Full Moon, 0.75 = Last Quarter
        const now = new Date();

        // Known new moon: January 11, 2024
        const knownNewMoon = new Date('2024-01-11T11:57:00Z').getTime();
        const lunarCycle = 29.53059 * 24 * 60 * 60 * 1000; // Lunar cycle in milliseconds

        const timeSinceNewMoon = now.getTime() - knownNewMoon;
        const phase = (timeSinceNewMoon % lunarCycle) / lunarCycle;

        return phase;
    }

    calculateMoonPosition() {
        // Calculate moon's position in the sky
        const now = new Date();

        if (!this.weather.sunrise || !this.weather.sunset) {
            return { altitude: 30, azimuth: 180 };
        }

        const sunrise = this.weather.sunrise.getTime();
        const sunset = this.weather.sunset.getTime();
        const current = now.getTime();

        // Moon is roughly 12 hours offset from sun
        // Simplified: moon is highest during night, low during day
        let moonProgress;

        if (current >= sunrise && current <= sunset) {
            // Daytime: moon may be visible, calculate based on day progress
            const dayLength = sunset - sunrise;
            const dayProg = (current - sunrise) / dayLength;
            moonProgress = dayProg + 0.5; // Offset from sun
        } else {
            // Nighttime: moon follows night cycle
            const midnight = new Date(now);
            midnight.setHours(0, 0, 0, 0);
            const nextMidnight = new Date(midnight.getTime() + 24 * 60 * 60 * 1000);

            if (current < sunrise) {
                // Before sunrise
                const nightLength = sunrise - midnight.getTime();
                moonProgress = (current - midnight.getTime()) / nightLength * 0.5;
            } else {
                // After sunset
                const nightLength = nextMidnight.getTime() - sunset;
                moonProgress = 0.5 + ((current - sunset) / nightLength * 0.5);
            }
        }

        // Moon's altitude calculation (visible mostly at night)
        const maxAltitude = 70;
        const altitude = maxAltitude * Math.sin(moonProgress * Math.PI);

        // Moon's azimuth (opposite side from sun generally)
        const azimuth = 90 + (moonProgress * 180);

        return { altitude, azimuth };
    }

    drawSun() {
        // Calculate sun position
        const sunPos = this.calculateSunPosition();

        // Don't draw sun if it's below horizon or not clear weather
        if (sunPos.altitude < 0) {
            return;
        }

        // Only show sun when clear or partly cloudy
        if (this.weather.condition === 'rain' || this.weather.condition === 'snow') {
            return;
        }

        // Check if sun is in current field of view
        if (!this.isInFieldOfView(sunPos.azimuth)) {
            return;
        }

        // Map sun's altitude (0-90°) to Y position in sky
        // 0° = horizon (bottom of sky), 90° = zenith (top of sky)
        const skyHeight = this.height - 60; // Sky area height
        const horizonY = skyHeight; // Bottom of sky
        const zenithY = 20; // Top of sky

        // Convert altitude to Y position (inverted because Y=0 is top)
        const sunY = horizonY - (sunPos.altitude / 90) * (horizonY - zenithY);

        // Map azimuth to X position based on current view direction
        const sunX = this.bearingToX(sunPos.azimuth);

        // Use sun.png if loaded, otherwise fall back to programmatic rendering
        if (this.sunImageLoaded && this.sunImage.complete) {
            // Draw sun.png with opacity based on weather
            const alpha = this.weather.condition === 'cloudy' ? 0.6 : 1.0;
            this.ctx.globalAlpha = alpha;

            // Size the sun image preserving aspect ratio
            const sunHeight = 80;
            const sunAspectRatio = this.sunImage.width / this.sunImage.height;
            const sunWidth = sunHeight * sunAspectRatio;
            this.ctx.drawImage(this.sunImage, sunX - sunWidth / 2, sunY - sunHeight / 2, sunWidth, sunHeight);

            this.ctx.globalAlpha = 1.0; // Reset alpha
        } else {
            // Fallback to programmatic sun rendering
            const pixelSize = 5;
            const alpha = this.weather.condition === 'cloudy' ? 0.6 : 1.0;

            // Outer glow
            this.ctx.fillStyle = `rgba(252, 212, 68, ${alpha * 0.3})`;
            this.ctx.fillRect(sunX - pixelSize * 3, sunY - pixelSize * 3, pixelSize * 6, pixelSize * 6);

            // Inner glow
            this.ctx.fillStyle = `rgba(252, 212, 68, ${alpha * 0.6})`;
            this.ctx.fillRect(sunX - pixelSize * 2, sunY - pixelSize * 2, pixelSize * 4, pixelSize * 4);

            // Sun core
            this.ctx.fillStyle = this.weather.condition === 'cloudy'
                ? 'rgba(252, 212, 68, 0.8)'
                : this.colors.sun;
            this.ctx.fillRect(sunX - pixelSize, sunY - pixelSize, pixelSize * 2, pixelSize * 2);

            // Sun rays (8 directions)
            const rayLength = pixelSize * 2;
            this.ctx.fillStyle = this.weather.condition === 'cloudy'
                ? 'rgba(252, 212, 68, 0.7)'
                : this.colors.sun;

            // Horizontal and vertical rays
            this.ctx.fillRect(sunX - rayLength - pixelSize, sunY - pixelSize / 2, pixelSize, pixelSize);
            this.ctx.fillRect(sunX + rayLength, sunY - pixelSize / 2, pixelSize, pixelSize);
            this.ctx.fillRect(sunX - pixelSize / 2, sunY - rayLength - pixelSize, pixelSize, pixelSize);
            this.ctx.fillRect(sunX - pixelSize / 2, sunY + rayLength, pixelSize, pixelSize);

            // Diagonal rays
            this.ctx.fillRect(sunX - rayLength, sunY - rayLength, pixelSize, pixelSize);
            this.ctx.fillRect(sunX + rayLength - pixelSize, sunY - rayLength, pixelSize, pixelSize);
            this.ctx.fillRect(sunX - rayLength, sunY + rayLength - pixelSize, pixelSize, pixelSize);
            this.ctx.fillRect(sunX + rayLength - pixelSize, sunY + rayLength - pixelSize, pixelSize, pixelSize);
        }
    }

    getMoonSpritePosition(phase) {
        // Map moon phase (0-1) to sprite sheet position (2x3 grid)
        // Row 0: waxing crescent, first quarter, waxing gibbous
        // Row 1: full moon, waning gibbous, last quarter

        if (phase < 0.05 || phase > 0.95) {
            // New moon - don't display
            return null;
        } else if (phase >= 0.05 && phase < 0.20) {
            // Waxing crescent
            return { row: 0, col: 0 };
        } else if (phase >= 0.20 && phase < 0.30) {
            // First quarter
            return { row: 0, col: 1 };
        } else if (phase >= 0.30 && phase < 0.48) {
            // Waxing gibbous
            return { row: 0, col: 2 };
        } else if (phase >= 0.48 && phase <= 0.52) {
            // Full moon
            return { row: 1, col: 0 };
        } else if (phase > 0.52 && phase < 0.70) {
            // Waning gibbous
            return { row: 1, col: 1 };
        } else if (phase >= 0.70 && phase < 0.80) {
            // Last quarter
            return { row: 1, col: 2 };
        } else {
            // Waning crescent (0.80-0.95) - mirror waxing crescent
            return { row: 0, col: 0, mirror: true };
        }
    }

    drawMoon() {
        // Calculate moon position and phase
        const moonPos = this.calculateMoonPosition();
        const phase = this.calculateMoonPhase();

        // Don't draw moon if it's below horizon
        if (moonPos.altitude < 0) {
            return;
        }

        // Moon is more visible at night, less during day
        const sunPos = this.calculateSunPosition();
        const isNight = sunPos.altitude < 0;

        // Only show moon at night or if it's high enough during day
        if (!isNight && moonPos.altitude < 30) {
            return;
        }

        // Check if moon is in current field of view
        if (!this.isInFieldOfView(moonPos.azimuth)) {
            return;
        }

        // Map moon's altitude to Y position
        const skyHeight = this.height - 60;
        const horizonY = skyHeight;
        const zenithY = 20;
        const moonY = horizonY - (moonPos.altitude / 90) * (horizonY - zenithY);

        // Map azimuth to X position based on current view direction
        const moonX = this.bearingToX(moonPos.azimuth);

        // Use sprite sheet if loaded
        if (this.moonSpriteLoaded && this.moonSprite.complete) {
            const spritePos = this.getMoonSpritePosition(phase);

            // Don't draw during new moon
            if (!spritePos) {
                return;
            }

            // Calculate sprite sheet dimensions (2x3 grid)
            const spriteWidth = this.moonSprite.width / 3;  // 3 columns
            const spriteHeight = this.moonSprite.height / 2; // 2 rows

            // Source rectangle (which part of sprite sheet to use)
            const sx = spritePos.col * spriteWidth;
            const sy = spritePos.row * spriteHeight;

            // Destination size (scaled for display, maintaining aspect ratio)
            const spriteAspectRatio = spriteWidth / spriteHeight;
            const targetHeight = 120; // 200% scale (was 60)
            const targetWidth = targetHeight * spriteAspectRatio;
            const destX = moonX - targetWidth / 2;
            const destY = moonY - targetHeight / 2;

            // Moon brightness (brighter at night)
            const alpha = isNight ? 1.0 : 0.6;
            this.ctx.globalAlpha = alpha;

            // Draw moon with optional horizontal flip for waning crescent
            if (spritePos.mirror) {
                this.ctx.save();
                this.ctx.translate(moonX, moonY);
                this.ctx.scale(-1, 1);
                this.ctx.drawImage(
                    this.moonSprite,
                    sx, sy, spriteWidth, spriteHeight,
                    -targetWidth / 2, -targetHeight / 2, targetWidth, targetHeight
                );
                this.ctx.restore();
            } else {
                this.ctx.drawImage(
                    this.moonSprite,
                    sx, sy, spriteWidth, spriteHeight,
                    destX, destY, targetWidth, targetHeight
                );
            }

            this.ctx.globalAlpha = 1.0;
        }
    }

    drawGround() {
        // Use directional background for current view direction
        const bgImage = this.backgroundImages[this.viewDirection];
        const bgLoaded = this.backgroundImagesLoaded[this.viewDirection];

        if (bgLoaded && bgImage && bgImage.complete) {
            const bgAspectRatio = bgImage.width / bgImage.height;
            const bgWidth = this.width;
            const bgHeight = this.width / bgAspectRatio;
            const bgY = this.height - bgHeight;
            const bgX = 0;

            this.ctx.drawImage(bgImage, bgX, bgY, bgWidth, bgHeight);
        }
    }

    drawGrid() {
        this.ctx.strokeStyle = this.colors.grid;
        this.ctx.lineWidth = 1;

        // Horizontal lines every 10,000 feet
        for (let alt = 0; alt <= 50000; alt += 10000) {
            const y = this.height - 60 - (alt / 50000) * (this.height - 100);
            this.ctx.beginPath();
            this.ctx.moveTo(0, y);
            this.ctx.lineTo(this.width, y);
            this.ctx.stroke();
        }
    }

    calculateScale() {
        let minLat = this.receiverLat;
        let maxLat = this.receiverLat;
        let maxAltitude = 0;

        this.flights.forEach(flight => {
            minLat = Math.min(minLat, flight.lat);
            maxLat = Math.max(maxLat, flight.lat);
            maxAltitude = Math.max(maxAltitude, flight.altitude);
        });

        // Add more padding for better horizontal spacing
        // Ensure minimum range of 1.0 degree latitude (about 60 nautical miles)
        const latRange = Math.max((maxLat - minLat) * 2.5, 1.0);

        // Center the view around receiver with extra padding
        const latCenter = (minLat + maxLat) / 2;
        minLat = latCenter - latRange / 2;
        maxLat = latCenter + latRange / 2;

        maxAltitude = Math.max(maxAltitude * 1.2, 10000); // Minimum 10,000 feet

        return {
            latScale: (this.width - 100) / (maxLat - minLat), // Pixels per degree latitude
            altScale: (this.height - 100) / maxAltitude, // Pixels per foot
            minLat,
            maxLat,
            maxAltitude
        };
    }

    drawMountains() {
        const sprite = this.sprites.mountain;
        const spriteHeight = sprite.length;
        const spriteWidth = sprite[0].length;
        const pixelSize = 4;
        const groundY = this.height - 60;
        const mountainY = groundY - (spriteHeight * pixelSize); // Connect to ground

        // Draw multiple mountains across the horizon
        for (let mountainX = -50; mountainX < this.width; mountainX += 120) {
            for (let y = 0; y < spriteHeight; y++) {
                for (let x = 0; x < spriteWidth; x++) {
                    if (sprite[y][x] === 1 || sprite[y][x] === 2) {
                        // Snow caps (value 2)
                        if (sprite[y][x] === 2) {
                            this.ctx.fillStyle = this.colors.mountainSnow;
                        } else {
                            this.ctx.fillStyle = this.colors.mountain;
                        }

                        this.ctx.fillRect(
                            mountainX + x * pixelSize,
                            mountainY + y * pixelSize,
                            pixelSize,
                            pixelSize
                        );
                    }
                }
            }
        }
    }

    drawCacti() {
        const sprite = this.sprites.cactus;
        const spriteHeight = sprite.length;
        const spriteWidth = sprite[0].length;
        const pixelSize = 2;
        const groundY = this.height - 60;

        // Draw cacti at various positions along the ground
        const cactusPositions = [100, 250, 350, 550, 700];

        cactusPositions.forEach(cactusX => {
            for (let y = 0; y < spriteHeight; y++) {
                for (let x = 0; x < spriteWidth; x++) {
                    if (sprite[y][x] === 1) {
                        // Randomize cactus shading slightly
                        this.ctx.fillStyle = (x + y) % 3 === 0 ? this.colors.cactusDark : this.colors.cactus;

                        this.ctx.fillRect(
                            cactusX + x * pixelSize,
                            groundY - spriteHeight * pixelSize + y * pixelSize,
                            pixelSize,
                            pixelSize
                        );
                    }
                }
            }
        });
    }

    drawWeather() {
        if (this.weather.condition === 'rain') {
            this.ctx.fillStyle = this.colors.rain;
            // Draw rain drops
            for (let i = 0; i < 100; i++) {
                const x = Math.random() * this.width;
                const y = (Math.random() * (this.height - 60)) + (Date.now() / 10) % this.height;
                this.ctx.fillRect(x, y % (this.height - 60), 1, 8);
            }
        } else if (this.weather.condition === 'snow') {
            this.ctx.fillStyle = this.colors.snow;
            // Draw snowflakes
            for (let i = 0; i < 50; i++) {
                const x = (Math.random() * this.width + Date.now() / 50) % this.width;
                const y = (Math.random() * (this.height - 60) + Date.now() / 30) % (this.height - 60);
                this.ctx.fillRect(x, y, 3, 3);
            }
        }
    }

    drawHouse(scale) {
        // Position antenna based on receiver latitude
        const antennaX = 50 + (this.receiverLat - scale.minLat) * scale.latScale;
        const antennaY = this.height - 60;
        const pixelSize = 2;

        const sprite = this.sprites.antenna;
        const spriteWidth = sprite[0].length;
        const spriteHeight = sprite.length;

        for (let y = 0; y < spriteHeight; y++) {
            for (let x = 0; x < spriteWidth; x++) {
                const pixel = sprite[y][x];
                if (pixel > 0) {
                    // Choose color based on pixel value
                    if (pixel === 1) {
                        // Mast - silver with subtle shading
                        this.ctx.fillStyle = (x === 1) ? this.colors.antennaDark : this.colors.antenna;
                    } else if (pixel === 2) {
                        // White rings
                        this.ctx.fillStyle = this.colors.antennaRing;
                    } else if (pixel === 3) {
                        // Dark base
                        this.ctx.fillStyle = this.colors.antennaBase;
                    }

                    this.ctx.fillRect(
                        antennaX - (spriteWidth * pixelSize / 2) + x * pixelSize,
                        antennaY - spriteHeight * pixelSize + y * pixelSize,
                        pixelSize,
                        pixelSize
                    );
                }
            }
        }
    }

    getAircraftColor(pixelValue, isFlyingTowards) {
        // Map sprite pixel values to colors
        // 1 = fuselage, 2 = windows, 3 = wings, 4 = tail, 5 = engine
        switch(pixelValue) {
            case 1: // Fuselage - use direction-based color (white or green/orange)
                return isFlyingTowards ? this.colors.planeTowards : this.colors.planeAway;
            case 2: // Windows - light blue/cyan
                return '#54d4fc';
            case 3: // Wings - gray
                return '#a0a0a0';
            case 4: // Tail - red accent
                return '#fc5454';
            case 5: // Engine - dark gray
                return '#606060';
            default:
                return this.colors.plane;
        }
    }

    // Check if two rectangles overlap
    rectsOverlap(r1, r2) {
        return !(r1.right < r2.left || r1.left > r2.right || r1.bottom < r2.top || r1.top > r2.bottom);
    }

    // Find a non-overlapping position for a label
    findLabelPosition(x, baseY, labelWidth, labelHeight, placedLabels) {
        // Try different positions: below, above, left-below, right-below, further below
        const offsets = [
            { dx: 0, dy: 0 },           // Default position
            { dx: 0, dy: -70 },         // Above aircraft
            { dx: 80, dy: 0 },          // Right
            { dx: -80, dy: 0 },         // Left
            { dx: 80, dy: -35 },        // Right-up
            { dx: -80, dy: -35 },       // Left-up
            { dx: 0, dy: 40 },          // Further below
            { dx: 100, dy: -70 },       // Far right-up
            { dx: -100, dy: -70 },      // Far left-up
        ];

        for (const offset of offsets) {
            const testRect = {
                left: x - labelWidth / 2 + offset.dx,
                right: x + labelWidth / 2 + offset.dx,
                top: baseY + offset.dy,
                bottom: baseY + labelHeight + offset.dy
            };

            // Check if this position overlaps with any placed label
            let hasOverlap = false;
            for (const placed of placedLabels) {
                if (this.rectsOverlap(testRect, placed)) {
                    hasOverlap = true;
                    break;
                }
            }

            if (!hasOverlap) {
                return { x: x + offset.dx, y: baseY + offset.dy, rect: testRect };
            }
        }

        // If all positions overlap, return default (will overlap but at least shows)
        return {
            x: x,
            y: baseY,
            rect: {
                left: x - labelWidth / 2,
                right: x + labelWidth / 2,
                top: baseY,
                bottom: baseY + labelHeight
            }
        };
    }

    drawAircraft(scale) {
        let maxRange = 0;
        let visibleCount = 0;
        const aircraftData = []; // Collect aircraft data for hover and sidebar

        // First pass: draw all aircraft and collect data
        this.flights.forEach(flight => {
            // Calculate bearing from receiver to aircraft
            const bearing = this.calculateBearing(
                this.receiverLat, this.receiverLon,
                flight.lat, flight.lon
            );

            // Skip if not in current field of view
            if (!this.isInFieldOfView(bearing)) {
                return;
            }

            visibleCount++;

            // Calculate distance for range display and sprite scaling
            const distance = this.calculateDistance(
                this.receiverLat, this.receiverLon,
                flight.lat, flight.lon
            );
            maxRange = Math.max(maxRange, distance);

            // Calculate distance-based scale factor
            // Close (0-10 NM) = large, Far (100+ NM) = small but still visible
            const minScale = 0.35;  // Minimum 35% size at far distance
            const maxScale = 1.1;   // Maximum 110% size when very close
            const nearDistance = 5;  // Distance (NM) for max scale
            const farDistance = 80;  // Distance (NM) for min scale

            let distanceScale;
            if (distance <= nearDistance) {
                distanceScale = maxScale;
            } else if (distance >= farDistance) {
                distanceScale = minScale;
            } else {
                // Smooth interpolation between near and far
                const t = (distance - nearDistance) / (farDistance - nearDistance);
                distanceScale = maxScale - (t * (maxScale - minScale));
            }

            // X position based on bearing within field of view
            const x = this.bearingToX(bearing);

            // Y position: altitude
            const y = this.height - 60 - (flight.altitude * scale.altScale);

            // Skip if out of bounds
            if (x < 0 || x > this.width || y < 0 || y > this.height - 60) {
                return;
            }

            // Get aircraft category and image
            const cachedType = this.aircraftTypes.get(flight.icao);
            const category = cachedType ? cachedType.type : 'narrowBody';
            const aircraftImage = this.aircraftImages[category];
            const imageLoaded = this.aircraftImagesLoaded[category];

            // Determine if flying left or right relative to viewer
            // Compare aircraft track to view direction
            // If track is to the left of view direction, aircraft appears to fly left
            let trackRelative = flight.track - this.viewDirection;
            if (trackRelative > 180) trackRelative -= 360;
            if (trackRelative < -180) trackRelative += 360;
            const isFacingLeft = trackRelative < 0 || trackRelative > 180;

            // Determine flight direction for color coding
            const isFlyingTowards = this.isFlyingTowards(flight);

            this.ctx.save();

            let spriteHeight = 110; // Default for PNG

            // Use PNG image if loaded, otherwise fall back to sprite array
            if (imageLoaded && aircraftImage) {
                // Apply distance-based scaling to base height
                const baseHeight = 110;
                const targetHeight = baseHeight * distanceScale;
                const imageScale = targetHeight / aircraftImage.height;
                const scaledWidth = aircraftImage.width * imageScale;
                const scaledHeight = aircraftImage.height * imageScale;
                spriteHeight = scaledHeight;

                this.ctx.globalAlpha = 1.0;
                this.ctx.filter = 'none';

                if (isFacingLeft) {
                    this.ctx.translate(x, y);
                    this.ctx.scale(-1, 1);
                    this.ctx.drawImage(aircraftImage, -scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
                } else {
                    this.ctx.drawImage(aircraftImage, x - scaledWidth / 2, y - scaledHeight / 2, scaledWidth, scaledHeight);
                }
            } else {
                // Fallback to sprite array rendering with distance scaling
                const sprite = this.getAircraftSprite(flight.icao);
                const spriteWidth = sprite[0].length;
                const spriteH = sprite.length;
                const basePixelSize = 2;
                const pixelSize = basePixelSize * distanceScale;
                spriteHeight = spriteH * pixelSize;

                for (let row = 0; row < spriteH; row++) {
                    for (let col = 0; col < spriteWidth; col++) {
                        const pixelValue = sprite[row][col];
                        if (pixelValue > 0) {
                            this.ctx.fillStyle = this.getAircraftColor(pixelValue, isFlyingTowards);
                            let drawX, drawY;
                            if (isFacingLeft) {
                                drawX = x + (spriteWidth - 1 - col) * pixelSize - (spriteWidth * pixelSize / 2);
                                drawY = y + row * pixelSize - (spriteH * pixelSize / 2);
                            } else {
                                drawX = x + col * pixelSize - (spriteWidth * pixelSize / 2);
                                drawY = y + row * pixelSize - (spriteH * pixelSize / 2);
                            }
                            this.ctx.fillRect(drawX, drawY, pixelSize, pixelSize);
                        }
                    }
                }
            }

            this.ctx.restore();

            // Calculate sprite width for hover detection
            let spriteWidth = spriteHeight * 1.5; // Approximate aspect ratio

            // Collect data for hover detection and sidebar
            aircraftData.push({
                x,
                y,
                spriteWidth,
                spriteHeight,
                callsign: flight.callsign || flight.icao,
                icao: flight.icao,
                altitude: flight.altitude,
                distance: distance,
                speed: flight.speed || 0
            });
        });

        // Check for hover and draw label for hovered aircraft
        this.hoveredAircraft = null;
        for (const aircraft of aircraftData) {
            // Check if mouse is over this aircraft
            const halfW = aircraft.spriteWidth / 2;
            const halfH = aircraft.spriteHeight / 2;
            if (this.mouseX >= aircraft.x - halfW && this.mouseX <= aircraft.x + halfW &&
                this.mouseY >= aircraft.y - halfH && this.mouseY <= aircraft.y + halfH) {
                this.hoveredAircraft = aircraft;
                break;
            }
        }

        // Find selected aircraft (from sidebar click)
        let selectedAircraft = null;
        if (this.selectedAircraftIcao) {
            selectedAircraft = aircraftData.find(a => a.icao === this.selectedAircraftIcao);
        }

        // Draw highlight box around selected aircraft
        if (selectedAircraft) {
            const aircraft = selectedAircraft;
            const padding = 15;
            const halfW = aircraft.spriteWidth / 2 + padding;
            const halfH = aircraft.spriteHeight / 2 + padding;

            // Animated pulsing border
            const pulse = Math.sin(Date.now() / 200) * 0.3 + 0.7;

            // Draw glowing box around aircraft
            this.ctx.strokeStyle = `rgba(252, 212, 68, ${pulse})`;
            this.ctx.lineWidth = 4;
            this.ctx.strokeRect(aircraft.x - halfW, aircraft.y - halfH, halfW * 2, halfH * 2);

            // Draw corner brackets for extra visibility
            const bracketSize = 15;
            this.ctx.strokeStyle = '#fcd444';
            this.ctx.lineWidth = 3;

            // Top-left
            this.ctx.beginPath();
            this.ctx.moveTo(aircraft.x - halfW, aircraft.y - halfH + bracketSize);
            this.ctx.lineTo(aircraft.x - halfW, aircraft.y - halfH);
            this.ctx.lineTo(aircraft.x - halfW + bracketSize, aircraft.y - halfH);
            this.ctx.stroke();

            // Top-right
            this.ctx.beginPath();
            this.ctx.moveTo(aircraft.x + halfW - bracketSize, aircraft.y - halfH);
            this.ctx.lineTo(aircraft.x + halfW, aircraft.y - halfH);
            this.ctx.lineTo(aircraft.x + halfW, aircraft.y - halfH + bracketSize);
            this.ctx.stroke();

            // Bottom-left
            this.ctx.beginPath();
            this.ctx.moveTo(aircraft.x - halfW, aircraft.y + halfH - bracketSize);
            this.ctx.lineTo(aircraft.x - halfW, aircraft.y + halfH);
            this.ctx.lineTo(aircraft.x - halfW + bracketSize, aircraft.y + halfH);
            this.ctx.stroke();

            // Bottom-right
            this.ctx.beginPath();
            this.ctx.moveTo(aircraft.x + halfW - bracketSize, aircraft.y + halfH);
            this.ctx.lineTo(aircraft.x + halfW, aircraft.y + halfH);
            this.ctx.lineTo(aircraft.x + halfW, aircraft.y + halfH - bracketSize);
            this.ctx.stroke();
        }

        // Draw label for hovered or selected aircraft
        const labelAircraft = this.hoveredAircraft || selectedAircraft;
        if (labelAircraft) {
            const aircraft = labelAircraft;
            this.ctx.font = 'bold 14px "Press Start 2P", "Pixelify Sans", monospace';
            this.ctx.textAlign = 'center';

            const callsign = aircraft.callsign;
            const altText = `FL${Math.round(aircraft.altitude / 100)}`;
            const distText = `${Math.round(aircraft.distance)} NM`;

            // Draw label above the aircraft
            const labelY = aircraft.y - aircraft.spriteHeight / 2 - 10;

            // Draw background box for label
            const labelWidth = Math.max(callsign.length, altText.length, distText.length) * 12 + 16;
            const labelHeight = 52;
            this.ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
            this.ctx.fillRect(aircraft.x - labelWidth / 2, labelY - labelHeight, labelWidth, labelHeight);
            this.ctx.strokeStyle = selectedAircraft && !this.hoveredAircraft ? '#fcd444' : '#5c94fc';
            this.ctx.lineWidth = 2;
            this.ctx.strokeRect(aircraft.x - labelWidth / 2, labelY - labelHeight, labelWidth, labelHeight);

            // Draw text
            this.drawTextWithShadow(callsign, aircraft.x, labelY - 34);
            this.drawTextWithShadow(altText, aircraft.x, labelY - 20);
            this.drawTextWithShadow(distText, aircraft.x, labelY - 6);
        }

        // Update visible aircraft list for sidebar (sorted by distance)
        this.visibleAircraftList = aircraftData.sort((a, b) => a.distance - b.distance);

        // Throttle DOM updates to reduce flashing (update every 500ms)
        const now = Date.now();

        if (now - this.lastSidebarUpdate > 500) {
            this.updateAircraftSidebar();
            this.lastSidebarUpdate = now;
        }

        // Only update stats if values changed (prevents flashing)
        const rangeText = `RANGE: ${Math.round(maxRange)} NM`;
        const countText = `AIRCRAFT: ${visibleCount}/${this.flights.size}`;

        if (this.cachedRangeText !== rangeText) {
            this.cachedRangeText = rangeText;
            const rangeEl = document.getElementById('range-display');
            if (rangeEl) rangeEl.textContent = rangeText;
        }

        if (this.cachedCountText !== countText) {
            this.cachedCountText = countText;
            const countEl = document.getElementById('aircraft-count');
            if (countEl) countEl.textContent = countText;
        }
    }

    updateAircraftSidebar() {
        const sidebar = document.getElementById('aircraft-sidebar');
        if (!sidebar) return;

        // Get or create the list container (preserving the header)
        let listContainer = sidebar.querySelector('.sidebar-list');
        if (!listContainer) {
            listContainer = document.createElement('div');
            listContainer.className = 'sidebar-list';
            sidebar.appendChild(listContainer);
        }

        if (this.visibleAircraftList.length === 0) {
            listContainer.innerHTML = '<div class="sidebar-empty">No aircraft in view</div>';
            return;
        }

        let html = '';
        for (const aircraft of this.visibleAircraftList) {
            const altFL = Math.round(aircraft.altitude / 100);
            const dist = Math.round(aircraft.distance);
            const isSelected = aircraft.icao === this.selectedAircraftIcao;
            const selectedClass = isSelected ? ' selected' : '';
            html += `<div class="sidebar-aircraft${selectedClass}" data-icao="${aircraft.icao}">
                <span class="sidebar-callsign">${aircraft.callsign}</span>
                <span class="sidebar-info">FL${altFL} · ${dist}NM</span>
            </div>`;
        }

        // Only update DOM if content changed (prevents flashing)
        if (listContainer.innerHTML !== html) {
            listContainer.innerHTML = html;
        }
    }

    drawScaleIndicators(scale) {
        this.ctx.font = 'bold 11px "Courier New"';

        // Altitude scale (left side)
        this.ctx.textAlign = 'left';
        for (let alt = 0; alt <= scale.maxAltitude; alt += 10000) {
            const y = this.height - 60 - (alt * scale.altScale);
            if (y > 10 && y < this.height - 70) {
                this.drawTextWithShadow(`${Math.round(alt / 1000)}K`, 5, y + 3);
            }
        }
    }

    drawCompassIndicators() {
        this.ctx.font = 'bold 14px "Press Start 2P", "Pixelify Sans", monospace';
        this.ctx.textAlign = 'center';

        // Calculate left and right edge directions based on current view
        const leftDir = (this.viewDirection - 45 + 360) % 360;
        const rightDir = (this.viewDirection + 45) % 360;
        const centerDir = this.viewDirection;

        // Direction labels
        const dirLabels = { 0: 'N', 45: 'NE', 90: 'E', 135: 'SE', 180: 'S', 225: 'SW', 270: 'W', 315: 'NW' };
        const getDir = (deg) => dirLabels[deg] || dirLabels[Math.round(deg / 45) * 45 % 360] || '';

        // Left edge direction
        this.drawTextWithShadow(getDir(leftDir), 35, this.height - 35);

        // Right edge direction
        this.drawTextWithShadow(getDir(rightDir), this.width - 35, this.height - 35);

        // Current view direction at top center
        const fullNames = { 0: 'NORTH', 90: 'EAST', 180: 'SOUTH', 270: 'WEST' };
        this.ctx.font = 'bold 16px "Press Start 2P", "Pixelify Sans", monospace';
        this.drawTextWithShadow(`◄ ${fullNames[centerDir]} ►`, this.width / 2, 25);

        // Location label at bottom center
        this.ctx.font = 'bold 12px "Press Start 2P", "Pixelify Sans", monospace';
        this.drawTextWithShadow(this.locationName, this.width / 2, this.height - 10);
    }

    drawTextWithShadow(text, x, y) {
        // Shadow
        this.ctx.fillStyle = this.colors.textShadow;
        this.ctx.fillText(text, x + 1, y + 1);
        // Main text
        this.ctx.fillStyle = this.colors.text;
        this.ctx.fillText(text, x, y);
    }
}

// Initialize the app
const app = new ADSBit();