script.js

// Commander Wars Homepage - Single Page with Smooth Scroll JavaScript

// ===== HAMBURGER MENU =====
const hamburger = document.getElementById('hamburger');
const mainNav = document.getElementById('mainNav');

if (hamburger && mainNav) {
    hamburger.addEventListener('click', () => {
        hamburger.classList.toggle('active');
        mainNav.classList.toggle('active');
    });

    // Close menu when clicking a link
    const navLinks = mainNav.querySelectorAll('a');
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            hamburger.classList.remove('active');
            mainNav.classList.remove('active');
        });
    });

    // Close menu when clicking outside
    document.addEventListener('click', (e) => {
        if (!mainNav.contains(e.target) && !hamburger.contains(e.target)) {
            hamburger.classList.remove('active');
            mainNav.classList.remove('active');
        }
    });
}

// ===== SMOOTH SCROLLING =====
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const targetId = this.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetId);

        if (targetElement) {
            const navHeight = 60; // Height of fixed nav
            const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;

            window.scrollTo({
                top: targetPosition,
                behavior: 'smooth'
            });
        }
    });
});

// ===== ACTIVE NAVIGATION HIGHLIGHTING =====
const sections = document.querySelectorAll('section[id]');
const navLinksAll = document.querySelectorAll('.main-nav a[href^="#"]');

function highlightActiveSection() {
    const scrollPosition = window.scrollY + 100;

    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.offsetHeight;
        const sectionId = section.getAttribute('id');

        if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
            navLinksAll.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === `#${sectionId}`) {
                    link.classList.add('active');
                }
            });
        }
    });
}

window.addEventListener('scroll', highlightActiveSection);
window.addEventListener('load', highlightActiveSection);

// ===== VIDEO AUTOPLAY HANDLING =====
const video = document.querySelector('.video-bg video');

if (video) {
    // Try to autoplay
    video.play().catch(err => {
        console.log('Video autoplay prevented:', err);
        // Add a play button overlay if autoplay fails
        const playButton = document.createElement('button');
        playButton.textContent = '▶ PLAY VIDEO';
        playButton.style.cssText = `
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 100;
            padding: 20px 40px;
            background: #FF0000;
            color: #FFF;
            border: 5px solid #000;
            font-size: 20px;
            font-weight: 900;
            cursor: pointer;
        `;
        playButton.addEventListener('click', () => {
            video.play();
            playButton.remove();
        });
        document.querySelector('.video-bg').appendChild(playButton);
    });
}

// ===== EXTERNAL LINK SAFETY =====
document.querySelectorAll('a[target="_blank"]').forEach(link => {
    link.setAttribute('rel', 'noopener noreferrer');
});

// ===== LAZY LOADING FOR GALLERY =====
if ('IntersectionObserver' in window) {
    const imageObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.classList.add('loaded');
                imageObserver.unobserve(img);
            }
        });
    }, {
        rootMargin: '50px'
    });

    // Observe all lazy images in gallery
    document.querySelectorAll('.gallery-grid img[loading="lazy"]').forEach(img => {
        imageObserver.observe(img);
    });
}

// ===== KONAMI CODE EASTER EGG =====
let konamiCode = [];
const konamiSequence = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];

document.addEventListener('keydown', (e) => {
    konamiCode.push(e.key);
    konamiCode = konamiCode.slice(-10);

    if (konamiCode.join(',') === konamiSequence.join(',')) {
        activateKonamiCode();
    }
});

function activateKonamiCode() {
    // Create confetti effect
    const colors = ['#FF0000', '#0066FF', '#00CC00', '#FFD700', '#FF00FF'];

    for (let i = 0; i < 50; i++) {
        setTimeout(() => {
            const confetti = document.createElement('div');
            confetti.style.cssText = `
                position: fixed;
                top: -20px;
                left: ${Math.random() * 100}vw;
                width: 15px;
                height: 15px;
                background: ${colors[Math.floor(Math.random() * colors.length)]};
                border: 2px solid #000;
                animation: confettiFall ${2 + Math.random() * 2}s linear forwards;
                pointer-events: none;
                z-index: 10000;
            `;
            document.body.appendChild(confetti);
            setTimeout(() => confetti.remove(), 4000);
        }, i * 50);
    }

    // Add animation if not already present
    if (!document.querySelector('#confetti-style')) {
        const style = document.createElement('style');
        style.id = 'confetti-style';
        style.textContent = `
            @keyframes confettiFall {
                to {
                    transform: translateY(100vh) rotate(${Math.random() * 360}deg);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
    }

    // Show message
    const message = document.createElement('div');
    message.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #FFF;
        border: 8px solid #000;
        box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.8);
        color: #FF0000;
        padding: 40px 60px;
        font-size: 32px;
        font-weight: 900;
        text-align: center;
        z-index: 10001;
    `;
    message.innerHTML = `
        <div style="font-size: 48px; margin-bottom: 10px;">🎮</div>
        COMMANDER WARS<br>FOREVER!
        <div style="font-size: 48px; margin-top: 10px;">🎮</div>
    `;
    document.body.appendChild(message);

    setTimeout(() => {
        message.style.transition = 'opacity 0.5s';
        message.style.opacity = '0';
        setTimeout(() => message.remove(), 500);
    }, 3000);
}

// ===== CONSOLE ART =====
console.log(`%c
╔═══════════════════════════════════════╗
║     COMMANDER WARS HOMEPAGE v3.0      ║
║   Advance Wars 2 Inspired Design      ║
╚═══════════════════════════════════════╝
`, 'color: #FF0000; font-weight: bold; font-size: 14px;');

console.log('%cKeyboard shortcut:', 'color: #0066FF; font-weight: bold;');
console.log('%cTry the Konami Code: ↑↑↓↓←→←→BA', 'color: #00CC00; font-weight: bold;');

// ===== LOAD COMPLETE =====
window.addEventListener('load', () => {
    console.log('%c✓ Commander Wars Homepage Loaded Successfully!', 'color: #00CC00; font-weight: bold; font-size: 16px;');
    console.log('Features: Smooth scroll, hamburger menu, video background, horizontal gallery');
});

// ===== PERFORMANCE: PAUSE VIDEO WHEN TAB NOT VISIBLE =====
document.addEventListener('visibilitychange', () => {
    if (video) {
        if (document.hidden) {
            video.pause();
        } else {
            video.play().catch(err => console.log('Video play prevented'));
        }
    }
});

// ===== ACCESSIBILITY: ANNOUNCE SECTION CHANGES FOR SCREEN READERS =====
const announcer = document.createElement('div');
announcer.setAttribute('aria-live', 'polite');
announcer.setAttribute('aria-atomic', 'true');
announcer.className = 'sr-only';
announcer.style.cssText = `
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
`;
document.body.appendChild(announcer);

let lastSection = '';
window.addEventListener('scroll', () => {
    const scrollPosition = window.scrollY + 150;

    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.offsetHeight;
        const sectionId = section.getAttribute('id');

        if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
            if (sectionId !== lastSection) {
                const sectionName = sectionId.charAt(0).toUpperCase() + sectionId.slice(1);
                announcer.textContent = `${sectionName} section`;
                lastSection = sectionId;
            }
        }
    });
});

// ===== AUTO-SCROLLING HORIZONTAL GALLERY (Desktop & Mobile) =====
const galleryScroll = document.querySelector('.gallery-scroll');
if (galleryScroll && window.innerWidth > 768) {
    let scrollPosition = 0;
    let isAutoScrolling = true;
    let userInteracted = false;
    let lastTime = 0;
    const scrollSpeed = 0.3; // Reduced from 1 to 0.3 pixels per frame

    // Auto-scroll function with speed control
    const autoScroll = (currentTime) => {
        if (!isAutoScrolling || userInteracted) return;

        // Control scroll speed using time delta
        if (!lastTime) lastTime = currentTime;
        const deltaTime = currentTime - lastTime;

        if (deltaTime >= 16) { // ~60fps
            scrollPosition += scrollSpeed;
            galleryScroll.scrollLeft = scrollPosition;

            // Reset to start when reaching the end
            if (scrollPosition >= galleryScroll.scrollWidth - galleryScroll.clientWidth) {
                scrollPosition = 0;
            }

            lastTime = currentTime;
        }

        requestAnimationFrame(autoScroll);
    };

    // Start auto-scrolling
    requestAnimationFrame(autoScroll);

    // Pause on hover
    galleryScroll.addEventListener('mouseenter', () => {
        isAutoScrolling = false;
    });

    // Resume on mouse leave
    galleryScroll.addEventListener('mouseleave', () => {
        if (!userInteracted) {
            isAutoScrolling = true;
            lastTime = 0;
            requestAnimationFrame(autoScroll);
        }
    });

    // Stop auto-scroll permanently if user manually scrolls
    galleryScroll.addEventListener('wheel', () => {
        userInteracted = true;
        isAutoScrolling = false;
    });

    galleryScroll.addEventListener('touchstart', () => {
        userInteracted = true;
        isAutoScrolling = false;
    });
}

// ===== ERROR HANDLING =====
window.addEventListener('error', (e) => {
    console.error('Error detected:', e.message);
});