demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Demo - NeuroCore: Byte Wars</title>
    <link rel="icon" type="image/png" href="/.netlify/images?url=/assets/Logos/NeuroCore Byte Wars Logo.png&w=32&h=32&fit=contain&fm=png&q=90">
    <link rel="stylesheet" href="css/style.css">
    <style>
        .demo-overlay {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(0, 255, 255, 0.5);
            border-radius: 15px;
            padding: 15px 30px;
            z-index: 9999;
            text-align: center;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
        }
        .demo-title {
            color: #00ffff;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
            margin-bottom: 5px;
        }
        .demo-subtitle {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
        }
        .feature-banner {
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, rgba(0, 100, 255, 0.9), rgba(0, 255, 255, 0.9));
            border: 2px solid #00ffff;
            border-radius: 12px;
            padding: 20px 40px;
            z-index: 9998;
            font-size: 20px;
            font-weight: bold;
            color: #001133;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0, 255, 255, 0.5);
            animation: slideUp 0.5s ease-out;
            opacity: 0;
            pointer-events: none;
        }
        .feature-banner.show {
            opacity: 1;
            animation: slideUp 0.5s ease-out, pulse 2s ease-in-out infinite;
        }
        @keyframes slideUp {
            from {
                transform: translateX(-50%) translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateX(-50%) translateY(0);
                opacity: 1;
            }
        }
        @keyframes pulse {
            0%, 100% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(1.05); }
        }
        .controls-hint {
            position: fixed;
            top: 80px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 10px;
            padding: 15px;
            z-index: 9997;
            font-size: 13px;
            color: #aaa;
        }
        .controls-hint div {
            margin: 5px 0;
        }
        .controls-hint strong {
            color: #00ffff;
        }
    </style>
</head>
<body>
    <!-- Demo Mode Overlay -->
    <div class="demo-overlay">
        <div class="demo-title">🎬 AUTO DEMO MODE 🎬</div>
        <div class="demo-subtitle">Recording-Ready • AI Controlled • Press ESC to Exit</div>
    </div>

    <!-- Feature Banner (will be shown dynamically) -->
    <div class="feature-banner" id="featureBanner"></div>

    <!-- Controls Hint -->
    <div class="controls-hint">
        <div><strong>SPACE</strong> - Pause/Resume Demo</div>
        <div><strong>R</strong> - Restart Demo</div>
        <div><strong>ESC</strong> - Exit to Menu</div>
    </div>

    <!-- Game Container -->
    <div id="gameContainer" style="display: block;">
        <canvas id="gameCanvas"></canvas>
        
        <!-- UI Elements (copied from main game) -->
        <div class="ui-container">
            <div class="health-bar">
                <div class="health-fill" id="healthFill"></div>
                <div class="health-text" id="healthText">100 / 100</div>
            </div>
            
            <div class="stats-panel">
                <div class="stat-item">
                    <span class="stat-label">Wave:</span>
                    <span class="stat-value" id="waveNumber">1</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Score:</span>
                    <span class="stat-value" id="scoreDisplay">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Time:</span>
                    <span class="stat-value" id="survivalTime">0:00</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Load all game scripts -->
    <script src="js/input.js"></script>
    <script src="js/bullet.js"></script>
    <script src="js/weapon.js"></script>
    <script src="js/player.js"></script>
    <script src="js/arena.js"></script>
    <script src="js/audio.js"></script>
    <script src="js/difficultyManager.js"></script>
    <script src="js/enemy.js"></script>
    <script src="js/enemyManager.js"></script>
    <script src="js/visualEffects.js"></script>
    <script src="js/upgradeSystem.js"></script>
    <script src="js/modernUI.js"></script>
    <script src="js/ui.js"></script>
    <script src="js/game.js"></script>

    <script>
        // Demo Controller Script
        class DemoController {
            constructor(game) {
                this.game = game;
                this.isPaused = false;
                this.demoSequence = [];
                this.currentStep = 0;
                this.stepTimer = 0;
                this.setupDemoSequence();
                this.setupControls();
                
                console.log('🎬 Demo Mode Initialized');
            }

            setupDemoSequence() {
                // Define the automated demo sequence
                this.demoSequence = [
                    { duration: 2, action: 'intro', banner: '🎮 NEUROCORE: BYTE WARS' },
                    { duration: 3, action: 'move_circle', banner: '⚡ Fast-Paced Action Combat' },
                    { duration: 3, action: 'shoot_all_directions', banner: '🔫 360° Shooting Mechanics' },
                    { duration: 4, action: 'dodge_enemies', banner: '🎯 Dodge & Weave Through Enemies' },
                    { duration: 3, action: 'rapid_fire', banner: '💥 Powerful Weapon System' },
                    { duration: 4, action: 'show_upgrades', banner: '⬆️ Dynamic Upgrade System' },
                    { duration: 3, action: 'visual_effects', banner: '✨ Stunning Visual Effects' },
                    { duration: 4, action: 'wave_combat', banner: '🌊 Intense Wave-Based Gameplay' },
                    { duration: 3, action: 'boss_preview', banner: '👾 Epic Boss Battles' },
                    { duration: 2, action: 'finale', banner: '🏆 DEFEND THE NEURAL NETWORK' }
                ];
            }

            setupControls() {
                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape') {
                        window.location.href = 'index.html?skip-intro=true';
                    } else if (e.key === ' ') {
                        this.isPaused = !this.isPaused;
                        console.log(this.isPaused ? '⏸ Demo Paused' : '▶ Demo Resumed');
                    } else if (e.key === 'r' || e.key === 'R') {
                        this.restartDemo();
                    }
                });
            }

            restartDemo() {
                this.currentStep = 0;
                this.stepTimer = 0;
                console.log('🔄 Demo Restarted');
            }

            showBanner(text) {
                const banner = document.getElementById('featureBanner');
                banner.textContent = text;
                banner.classList.add('show');
                
                setTimeout(() => {
                    banner.classList.remove('show');
                }, 2000);
            }

            update(deltaTime) {
                if (this.isPaused || !this.game.gameStarted || this.game.gameOver) return;

                this.stepTimer += deltaTime;

                const step = this.demoSequence[this.currentStep];
                if (!step) {
                    // Loop back to start
                    this.currentStep = 0;
                    this.stepTimer = 0;
                    return;
                }

                // Check if we need to move to next step
                if (this.stepTimer >= step.duration) {
                    this.currentStep++;
                    this.stepTimer = 0;
                    
                    const nextStep = this.demoSequence[this.currentStep];
                    if (nextStep && nextStep.banner) {
                        this.showBanner(nextStep.banner);
                    }
                }

                // Execute current action
                this.executeAction(step.action, this.stepTimer / step.duration);
            }

            executeAction(action, progress) {
                const player = this.game.player;
                const canvas = this.game.canvas;

                switch (action) {
                    case 'intro':
                        // Stay centered, shoot occasionally
                        if (Math.random() < 0.05) {
                            this.game.inputManager.keys.space = true;
                        }
                        break;

                    case 'move_circle':
                        // Move in a circle
                        const angle = progress * Math.PI * 4;
                        const radius = 100;
                        const targetX = canvas.width / 2 + Math.cos(angle) * radius;
                        const targetY = canvas.height / 2 + Math.sin(angle) * radius;
                        this.moveTowards(player, targetX, targetY);
                        this.shootTowardsMouse(player, angle);
                        break;

                    case 'shoot_all_directions':
                        // Rotate shooting direction
                        const shootAngle = progress * Math.PI * 8;
                        this.shootTowardsMouse(player, shootAngle);
                        this.game.inputManager.keys.space = true;
                        break;

                    case 'dodge_enemies':
                        // Move away from nearest enemy
                        this.dodgeNearestEnemy(player);
                        if (Math.random() < 0.3) {
                            this.game.inputManager.keys.space = true;
                        }
                        break;

                    case 'rapid_fire':
                        // Continuous shooting while moving
                        this.game.inputManager.keys.space = true;
                        const rfAngle = progress * Math.PI * 2;
                        const rfRadius = 150;
                        const rfX = canvas.width / 2 + Math.cos(rfAngle) * rfRadius;
                        const rfY = canvas.height / 2 + Math.sin(rfAngle) * rfRadius;
                        this.moveTowards(player, rfX, rfY);
                        break;

                    case 'show_upgrades':
                        // Trigger upgrade screen if available
                        this.moveRandomly(player);
                        this.game.inputManager.keys.space = true;
                        break;

                    case 'visual_effects':
                        // Create lots of visual effects
                        this.game.inputManager.keys.space = true;
                        this.spiralMovement(player, progress);
                        break;

                    case 'wave_combat':
                        // Aggressive combat
                        this.combatMode(player);
                        break;

                    case 'boss_preview':
                        // Dramatic movement
                        this.dramaticMovement(player, progress);
                        this.game.inputManager.keys.space = true;
                        break;

                    case 'finale':
                        // Center position, final shots
                        this.moveTowards(player, canvas.width / 2, canvas.height / 2);
                        this.game.inputManager.keys.space = true;
                        break;
                }
            }

            moveTowards(player, targetX, targetY) {
                const dx = targetX - player.x;
                const dy = targetY - player.y;
                const dist = Math.sqrt(dx * dx + dy * dy);

                if (dist > 5) {
                    this.game.inputManager.keys.w = dy < 0;
                    this.game.inputManager.keys.s = dy > 0;
                    this.game.inputManager.keys.a = dx < 0;
                    this.game.inputManager.keys.d = dx > 0;
                }
            }

            shootTowardsMouse(player, angle) {
                const distance = 200;
                this.game.inputManager.mouseX = player.x + Math.cos(angle) * distance;
                this.game.inputManager.mouseY = player.y + Math.sin(angle) * distance;
                this.game.inputManager.keys.space = Math.random() < 0.3;
            }

            dodgeNearestEnemy(player) {
                const enemies = this.game.enemyManager?.enemies || [];
                if (enemies.length === 0) {
                    this.moveRandomly(player);
                    return;
                }

                let nearest = enemies[0];
                let minDist = Infinity;

                for (const enemy of enemies) {
                    const dist = Math.hypot(enemy.x - player.x, enemy.y - player.y);
                    if (dist < minDist) {
                        minDist = dist;
                        nearest = enemy;
                    }
                }

                // Move away from nearest enemy
                const awayX = player.x + (player.x - nearest.x) * 2;
                const awayY = player.y + (player.y - nearest.y) * 2;
                this.moveTowards(player, awayX, awayY);

                // Shoot at enemy
                this.game.inputManager.mouseX = nearest.x;
                this.game.inputManager.mouseY = nearest.y;
            }

            moveRandomly(player) {
                const canvas = this.game.canvas;
                const margin = 100;
                const randomX = margin + Math.random() * (canvas.width - margin * 2);
                const randomY = margin + Math.random() * (canvas.height - margin * 2);
                this.moveTowards(player, randomX, randomY);
            }

            spiralMovement(player, progress) {
                const canvas = this.game.canvas;
                const spiralAngle = progress * Math.PI * 6;
                const spiralRadius = 50 + progress * 100;
                const spiralX = canvas.width / 2 + Math.cos(spiralAngle) * spiralRadius;
                const spiralY = canvas.height / 2 + Math.sin(spiralAngle) * spiralRadius;
                this.moveTowards(player, spiralX, spiralY);
            }

            combatMode(player) {
                const enemies = this.game.enemyManager?.enemies || [];
                if (enemies.length > 0) {
                    const target = enemies[Math.floor(Math.random() * enemies.length)];
                    this.game.inputManager.mouseX = target.x;
                    this.game.inputManager.mouseY = target.y;
                    this.game.inputManager.keys.space = true;
                    
                    // Strafe around target
                    const angle = Math.atan2(target.y - player.y, target.x - player.x);
                    const perpAngle = angle + Math.PI / 2;
                    const strafeX = player.x + Math.cos(perpAngle) * 3;
                    const strafeY = player.y + Math.sin(perpAngle) * 3;
                    this.moveTowards(player, strafeX, strafeY);
                } else {
                    this.moveRandomly(player);
                }
            }

            dramaticMovement(player, progress) {
                const canvas = this.game.canvas;
                const waveX = canvas.width / 2 + Math.sin(progress * Math.PI * 4) * 200;
                const waveY = canvas.height / 2 + Math.cos(progress * Math.PI * 3) * 150;
                this.moveTowards(player, waveX, waveY);
            }
        }

        // Initialize game in demo mode
        window.addEventListener('DOMContentLoaded', () => {
            console.log('🎬 Starting Auto Demo Mode...');
            
            // Create game instance
            window.game = new Game();
            
            // Wait for game to initialize, then start demo
            setTimeout(() => {
                // Skip intro and start game directly
                if (game.skipIntroDirectly) {
                    game.skipIntroDirectly();
                }
                
                // Start the game
                setTimeout(() => {
                    if (!game.gameStarted) {
                        game.startGame('medium'); // Start on medium difficulty
                    }
                    
                    // Initialize demo controller
                    window.demoController = new DemoController(game);
                    
                    // Hook into game loop
                    const originalUpdate = game.update.bind(game);
                    game.update = function(deltaTime) {
                        originalUpdate(deltaTime);
                        if (window.demoController) {
                            window.demoController.update(deltaTime);
                        }
                    };
                    
                    console.log('✅ Demo Mode Active - Ready to Record!');
                }, 1000);
            }, 500);
        });
    </script>
</body>
</html>