help-system.js

// Help System - Educational content and documentation
class HelpSystem {
    constructor() {
        this.helpContent = {
            functions: {
                'move_to': {
                    title: 'move_to(target)',
                    description: 'Moves the unit to a specified target location.',
                    example: 'move_to(materials_source)',
                    details: 'This function moves your crane or robot to a specific location on the factory floor. You can use predefined locations like "materials_source" or coordinate objects.'
                },
                'collect': {
                    title: 'collect()',
                    description: 'Collects resources at the current location.',
                    example: 'collect()',
                    details: 'When your unit is positioned at a resource deposit, this function will collect one unit of that resource and add it to your inventory.'
                },
                'move_up': {
                    title: 'move_up(steps)',
                    description: 'Moves the unit up by the specified number of steps.',
                    example: 'move_up(2)',
                    details: 'Moves your unit upward on the factory grid. The steps parameter is optional and defaults to 1.'
                },
                'move_down': {
                    title: 'move_down(steps)',
                    description: 'Moves the unit down by the specified number of steps.',
                    example: 'move_down(1)',
                    details: 'Moves your unit downward on the factory grid. The steps parameter is optional and defaults to 1.'
                },
                'move_left': {
                    title: 'move_left(steps)',
                    description: 'Moves the unit left by the specified number of steps.',
                    example: 'move_left(3)',
                    details: 'Moves your unit to the left on the factory grid. The steps parameter is optional and defaults to 1.'
                },
                'move_right': {
                    title: 'move_right(steps)',
                    description: 'Moves the unit right by the specified number of steps.',
                    example: 'move_right(1)',
                    details: 'Moves your unit to the right on the factory grid. The steps parameter is optional and defaults to 1.'
                },
                'do_a_flip': {
                    title: 'do_a_flip()',
                    description: 'Makes the unit perform a fun flip animation and gain bonus energy!',
                    example: 'do_a_flip()',
                    details: 'A special function that adds some fun to your factory. Your unit will perform a flip and you\'ll receive 5 bonus energy points!'
                },
                'print': {
                    title: 'print(value)',
                    description: 'Displays a value in the console output.',
                    example: 'print("Hello World!")',
                    details: 'The print function is essential for debugging and displaying information. You can print text, numbers, and variables.'
                },
                'range': {
                    title: 'range(n)',
                    description: 'Creates a sequence of numbers from 0 to n-1.',
                    example: 'for i in range(5):',
                    details: 'Range is commonly used with for loops to repeat actions a specific number of times. range(5) creates [0, 1, 2, 3, 4].'
                }
            },
            concepts: {
                'variables': {
                    title: 'Variables',
                    description: 'Variables store data that can be used later in your program.',
                    example: 'materials_collected = 0\nmaterials_collected = materials_collected + 1',
                    details: 'Variables are containers for storing data values. In Python, you create a variable by assigning a value to it using the = operator. Variable names should be descriptive and follow Python naming conventions (lowercase with underscores).'
                },
                'functions': {
                    title: 'Functions',
                    description: 'Functions are reusable blocks of code that perform specific tasks.',
                    example: 'def collect_materials():\n    move_to(materials_source)\n    collect()',
                    details: 'Functions help organize your code and make it reusable. You define a function using the "def" keyword, followed by the function name and parentheses. The code inside the function should be indented.'
                },
                'loops': {
                    title: 'Loops',
                    description: 'Loops repeat code multiple times automatically.',
                    example: 'for i in range(5):\n    collect()\n    print("Collected material", i+1)',
                    details: 'Loops are essential for automation. The "for" loop repeats code a specific number of times, while "while" loops continue until a condition becomes false. Use loops to avoid repeating the same code.'
                },
                'conditionals': {
                    title: 'Conditionals (If Statements)',
                    description: 'Conditionals execute code only when certain conditions are met.',
                    example: 'if materials > 10:\n    print("Enough materials!")\nelse:\n    collect()',
                    details: 'Conditionals allow your program to make decisions. The "if" statement checks a condition and executes code only if the condition is True. You can also use "else" and "elif" for alternative actions.'
                }
            },
            keywords: {
                'Abstraction': {
                    title: 'Abstraction',
                    description: 'Hiding complex implementation details behind simple interfaces.',
                    details: 'In programming, abstraction means focusing on what something does rather than how it does it. For example, when you call move_to(), you don\'t need to know the complex calculations involved in pathfinding - you just use the simple interface.',
                    realWorld: 'Like using a TV remote - you press buttons without knowing the electronics inside.'
                },
                'Algorithms': {
                    title: 'Algorithms',
                    description: 'Step-by-step procedures for solving problems.',
                    details: 'An algorithm is like a recipe - a set of instructions that tells the computer exactly what to do to solve a problem. In Code Factory, your programs are algorithms for controlling industrial machines.',
                    realWorld: 'Like following a recipe to bake a cake or instructions to assemble furniture.'
                },
                'Artificial Intelligence': {
                    title: 'Artificial Intelligence (AI)',
                    description: 'Computer systems that can perform tasks requiring human-like intelligence.',
                    details: 'AI involves programming computers to make decisions, recognize patterns, and solve problems autonomously. In factories, AI can optimize production, predict maintenance needs, and control robotic systems.',
                    realWorld: 'Voice assistants, recommendation systems, autonomous vehicles, and smart thermostats.'
                },
                'Binary System': {
                    title: 'Binary System',
                    description: 'A number system using only 0s and 1s that computers understand.',
                    details: 'Computers process all information as binary digits (bits). Every number, letter, image, and program is ultimately represented as sequences of 0s and 1s. This is the fundamental language of all digital devices.',
                    realWorld: 'Like Morse code using dots and dashes, but computers use only two symbols.'
                },
                'Boolean Logic': {
                    title: 'Boolean Logic',
                    description: 'Logic system using True/False values for decision making.',
                    details: 'Boolean logic is the foundation of computer decision-making. It uses operators like AND, OR, and NOT to combine true/false conditions. This is essential for creating conditional statements in programs.',
                    realWorld: 'Like asking "Is it raining AND do I have an umbrella?" to decide whether to go outside.'
                },
                'Computational Thinking': {
                    title: 'Computational Thinking',
                    description: 'Problem-solving approach used in programming and computer science.',
                    details: 'Computational thinking involves breaking down complex problems into smaller, manageable parts, recognizing patterns, and creating step-by-step solutions. It\'s the mental process behind effective programming.',
                    realWorld: 'Planning a trip by breaking it into steps: book flight, reserve hotel, plan activities.'
                },
                'Debugging': {
                    title: 'Debugging',
                    description: 'The process of finding and fixing errors in computer programs.',
                    details: 'Debugging is detective work for programmers. It involves identifying why code isn\'t working as expected, tracing through the logic, and making corrections. Good debugging skills are essential for any programmer.',
                    realWorld: 'Like troubleshooting why your car won\'t start by checking different components.'
                },
                'Programming': {
                    title: 'Programming',
                    description: 'Creating instructions for computers to solve problems or perform tasks.',
                    details: 'Programming is the art and science of writing code. It involves translating human ideas into instructions that computers can understand and execute. Python is one of many programming languages available.',
                    realWorld: 'Like writing a detailed instruction manual that someone can follow to complete a task.'
                }
            },
            buildings: {
                'crane': {
                    title: 'Industrial Crane',
                    description: 'A programmable crane for moving materials around the factory.',
                    details: 'Cranes are essential for factory automation. They can be programmed to move materials, sort items, and perform complex sequences of operations. Your first crane is the foundation of your automated factory.'
                },
                'conveyor_belt': {
                    title: 'Conveyor Belt',
                    description: 'Automated material transport system.',
                    details: 'Conveyor belts transport materials automatically between different areas of your factory. They can be programmed to sort materials, control flow rates, and integrate with other machinery.'
                },
                'sorting_machine': {
                    title: 'Sorting Machine',
                    description: 'Automatically sorts materials by type or properties.',
                    details: 'Sorting machines use sensors and programming logic to categorize materials. They\'re essential for quality control and organizing production lines in complex factories.'
                }
            }
        };
        
        this.init();
    }
    
    init() {
        this.bindEvents();
        this.setupTutorial();
    }
    
    bindEvents() {
        // Help button
        document.getElementById('help-btn').addEventListener('click', () => {
            this.showHelpModal();
        });
        
        // Tutorial button
        document.getElementById('tutorial-btn').addEventListener('click', () => {
            this.showTutorialModal();
        });
        
        // Info button
        document.getElementById('info-btn').addEventListener('click', () => {
            this.showInfoModal();
        });
        
        // Modal close buttons
        document.querySelectorAll('.close-modal').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.target.closest('.modal').style.display = 'none';
            });
        });
        
        // Help tabs
        document.querySelectorAll('.help-tab').forEach(tab => {
            tab.addEventListener('click', (e) => {
                this.switchHelpTab(e.target.getAttribute('data-tab'));
            });
        });
        
        // Tutorial navigation
        document.getElementById('tutorial-next').addEventListener('click', () => {
            this.nextTutorialStep();
        });
        
        document.getElementById('tutorial-prev').addEventListener('click', () => {
            this.previousTutorialStep();
        });
        
        document.getElementById('tutorial-finish').addEventListener('click', () => {
            this.finishTutorial();
        });
        
        // Close modals when clicking outside
        window.addEventListener('click', (e) => {
            if (e.target.classList.contains('modal')) {
                e.target.style.display = 'none';
            }
        });
    }
    
    showHelpModal() {
        const modal = document.getElementById('help-modal');
        modal.style.display = 'block';
        this.switchHelpTab('functions'); // Default to functions tab
    }
    
    showTutorialModal() {
        const modal = document.getElementById('tutorial-modal');
        modal.style.display = 'block';
        this.currentTutorialStep = 1;
        this.updateTutorialDisplay();
    }
    
    showInfoModal() {
        // Create a dynamic info modal showing unlocked content
        const unlocks = window.gameEngine.gameState.unlocks;
        const resources = window.gameEngine.gameState.resources;
        
        let infoContent = '<h3>Current Status</h3>';
        infoContent += '<div class="info-section">';
        infoContent += '<h4>Resources:</h4>';
        Object.keys(resources).forEach(resource => {
            if (window.gameEngine.gameState.unlockedResources.includes(resource)) {
                infoContent += `<p>${resource}: ${resources[resource]}</p>`;
            }
        });
        infoContent += '</div>';
        
        infoContent += '<div class="info-section">';
        infoContent += '<h4>Unlocked Functions:</h4>';
        unlocks.functions.forEach(func => {
            infoContent += `<p>• ${func}()</p>`;
        });
        infoContent += '</div>';
        
        if (unlocks.buildings.length > 0) {
            infoContent += '<div class="info-section">';
            infoContent += '<h4>Unlocked Buildings:</h4>';
            unlocks.buildings.forEach(building => {
                infoContent += `<p>• ${building}</p>`;
            });
            infoContent += '</div>';
        }
        
        // Create temporary modal
        this.showCustomModal('Game Information', infoContent);
    }
    
    switchHelpTab(tabName) {
        // Update tab buttons
        document.querySelectorAll('.help-tab').forEach(tab => {
            tab.classList.remove('active');
        });
        document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
        
        // Update content
        this.displayHelpContent(tabName);
    }
    
    displayHelpContent(category) {
        const contentDiv = document.getElementById('help-content');
        const content = this.helpContent[category];
        
        if (!content) {
            contentDiv.innerHTML = '<p>Content not available.</p>';
            return;
        }
        
        let html = '';
        
        Object.keys(content).forEach(key => {
            const item = content[key];
            
            // Check if item is unlocked (for functions and buildings)
            let isUnlocked = true;
            if (category === 'functions') {
                isUnlocked = window.gameEngine.gameState.unlocks.functions.includes(key);
            } else if (category === 'buildings') {
                isUnlocked = window.gameEngine.gameState.unlocks.buildings.includes(key) || key === 'crane';
            } else if (category === 'concepts') {
                isUnlocked = window.gameEngine.gameState.unlocks.concepts.includes(key);
            }
            
            if (isUnlocked) {
                html += `
                    <div class="help-item" onclick="this.classList.toggle('expanded')">
                        <h3>${item.title}</h3>
                        <p>${item.description}</p>
                        <div class="help-item-detail">
                            <strong>Example:</strong>
                            <pre><code>${item.example || 'No example available'}</code></pre>
                            <p>${item.details}</p>
                            ${item.realWorld ? `<p><strong>Real-world example:</strong> ${item.realWorld}</p>` : ''}
                        </div>
                    </div>
                `;
            }
        });
        
        if (html === '') {
            html = '<p>No unlocked items in this category yet. Keep playing to unlock more!</p>';
        }
        
        contentDiv.innerHTML = html;
    }
    
    setupTutorial() {
        this.currentTutorialStep = 1;
        this.totalTutorialSteps = 3;
    }
    
    updateTutorialDisplay() {
        // Hide all steps
        document.querySelectorAll('.tutorial-step').forEach(step => {
            step.classList.remove('active');
        });
        
        // Show current step
        const currentStep = document.querySelector(`[data-step="${this.currentTutorialStep}"]`);
        if (currentStep) {
            currentStep.classList.add('active');
        }
        
        // Update navigation
        document.getElementById('tutorial-prev').disabled = this.currentTutorialStep === 1;
        document.getElementById('tutorial-next').style.display = 
            this.currentTutorialStep === this.totalTutorialSteps ? 'none' : 'inline-block';
        document.getElementById('tutorial-finish').style.display = 
            this.currentTutorialStep === this.totalTutorialSteps ? 'inline-block' : 'none';
        
        // Update step indicator
        document.getElementById('tutorial-step-indicator').textContent = 
            `${this.currentTutorialStep} / ${this.totalTutorialSteps}`;
    }
    
    nextTutorialStep() {
        if (this.currentTutorialStep < this.totalTutorialSteps) {
            this.currentTutorialStep++;
            this.updateTutorialDisplay();
        }
    }
    
    previousTutorialStep() {
        if (this.currentTutorialStep > 1) {
            this.currentTutorialStep--;
            this.updateTutorialDisplay();
        }
    }
    
    finishTutorial() {
        window.gameEngine.gameState.tutorialCompleted = true;
        document.getElementById('tutorial-modal').style.display = 'none';
        window.gameEngine.showNotification('Tutorial completed! Welcome to Code Factory!');
    }
    
    showCustomModal(title, content) {
        // Create a temporary modal for custom content
        const modal = document.createElement('div');
        modal.className = 'modal';
        modal.style.display = 'block';
        modal.innerHTML = `
            <div class="modal-content">
                <div class="modal-header">
                    <h2>${title}</h2>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    ${content}
                </div>
            </div>
        `;
        
        document.body.appendChild(modal);
        
        // Add close functionality
        modal.querySelector('.close-modal').addEventListener('click', () => {
            modal.remove();
        });
        
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.remove();
            }
        });
    }
    
    // Method to show contextual help based on code analysis
    showContextualHelp(code) {
        const suggestions = [];
        
        // Analyze code and provide suggestions
        if (code.includes('for ') && !code.includes('range')) {
            suggestions.push('Tip: Use range() with for loops for counting iterations.');
        }
        
        if (code.includes('move_') && !code.includes('move_to')) {
            suggestions.push('Tip: Try move_to() for more precise positioning.');
        }
        
        if (code.split('\n').filter(line => line.trim().startsWith('collect')).length > 3) {
            suggestions.push('Tip: Consider using a loop to avoid repeating collect() calls.');
        }
        
        if (suggestions.length > 0) {
            const content = '<h3>Code Suggestions</h3>' + 
                           suggestions.map(s => `<p>• ${s}</p>`).join('');
            this.showCustomModal('Helpful Tips', content);
        }
    }
}

// Initialize help system
window.helpSystem = new HelpSystem();