wownerogue/html/js/screenManager.js

// ScreenManager - Handles different screen states and UI drawing
var ScreenManager = {
    defaultFg: "#FFF",
    _currentBlockHeight: 0,
    _blockTimer: null,
    _updateInterval: null,  // Track the update interval separately
    _waitingForBlock: false,

    init: function(screenWidth, screenHeight) {
        this._screenWidth = screenWidth;
        this._screenHeight = screenHeight;
        this._currentBlockHeight = 0;
        this._waitingForBlock = false;
        this._updateInterval = null;  // Initialize update interval tracker
        
        // Initialize the waiting screen animator
        if (typeof WaitingScreenAnimator !== 'undefined') {
            WaitingScreenAnimator.init();
        }
    },

    drawText: function(x, y, text) {
        if (!DisplayManager.ensureDisplay()) return;
        const display = DisplayManager.getDisplay();
        
        for (let i = 0; i < text.length; i++) {
            const char = text[i];
            if (window.options?.tileMap?.hasOwnProperty(char) || char === ' ') {
                display.draw(x + i, y, char, "transparent", "transparent");
            } else {
                display.draw(x + i, y, "?", "transparent", "transparent");
            }
        }
    },

    drawCenteredText: function(y, text) {
        const x = Math.floor((this._screenWidth - text.length) / 2);
        this.drawText(x, y, text);
    },

    drawBorder: function() {
        if (!DisplayManager.ensureDisplay()) return;
        const display = DisplayManager.getDisplay();

        // Use wall tiles (#) for borders - these are guaranteed to exist in tileMap
        const borderChar = "#";  // Wall tile at [64, 32]
        
        // Draw top and bottom borders
        for (var i = 0; i < this._screenWidth; i++) {
            display.draw(i, 0, borderChar, "transparent", "transparent");
            display.draw(i, this._screenHeight - 1, borderChar, "transparent", "transparent");
        }
        
        // Draw left and right borders
        for (var j = 1; j < this._screenHeight - 1; j++) {
            display.draw(0, j, borderChar, "transparent", "transparent");
            display.draw(this._screenWidth - 1, j, borderChar, "transparent", "transparent");
        }
    },

    drawWelcomeScreen: function() {
        if (!DisplayManager.ensureDisplay()) return;
        DisplayManager.clearDisplay();
        
        // Draw the border
        this.drawBorder();
        
        // Draw content
        let y = 3;
        this.drawCenteredText(y, "WOWGUE");
        y += 4;
        
        // Draw instructions
        this.drawCenteredText(y, "Type enter to queue!");
        this.drawCenteredText(y + 1, "Or use START GAME");
        y += 3;
        
        // Draw legend with special tile handling
        const display = DisplayManager.getDisplay();
        const legendItems = [
            { tile: "@2", text: "This is you" },
            { tile: ">", text: " Escape the dungeon" }, 
            { tile: "~", text: " Avoid the monster" },
            { tile: "$M", text: "Secure the bag" }
        ];
        
        const centerX = Math.floor(this._screenWidth / 2) - 10;
        for (let item of legendItems) {
            let x = centerX;
            
            // Draw the special tile
            if (window.options?.tileMap?.hasOwnProperty(item.tile)) {
                display.draw(x, y, item.tile, "transparent", "transparent");
                x += item.tile.length;
            } else {
                display.draw(x, y, "?", "transparent", "transparent");
                x += 1;
            }
            
            // Draw the descriptive text
            this.drawText(x, y, item.text);
            y++;
        }
        
        // Draw current block info
        y += 2;
        this.drawCenteredText(y, `Current Block: ${this._currentBlockHeight}`);
        
        // Control HTML button visibility
        const startButton = document.getElementById('startButton');
        if (startButton) {
            startButton.style.display = 'block';
        }
        
        // Hide animation button on welcome screen
        this.hideAnimationButton();
        
        // Debug button (shown only in development)
        const isDebugMode = window.location.hostname === 'localhost' || 
                           window.location.hostname === '127.0.0.1' || 
                           window.location.protocol === 'file:';
        if (isDebugMode) {
            this.drawCenteredText(this._screenHeight - 3, "[DEBUG: Press D]");
        }
    },




    toggleAnimation: function() {
        if (typeof WaitingScreenAnimator !== 'undefined') {
            WaitingScreenAnimator.toggleAnimation();
        }
    },

    // Start simulated block mining (30 second intervals)
    startBlockSimulation: function() {
        console.log("Starting block simulation...");
        this._currentBlockHeight = Math.floor(Math.random() * 1000000) + 3200000; // Realistic Wownero block height
        this._waitingForBlock = true;
        
        // Update welcome screen every second during mining
        this._updateInterval = setInterval(() => {
            if (this._waitingForBlock && !GameState.isGameActive()) {
                this.drawWelcomeScreen();
            } else {
                if (this._updateInterval) {
                    clearInterval(this._updateInterval);
                    this._updateInterval = null;
                }
            }
        }, 1000);
        
        // Simulate new block every 30 seconds
        this._blockTimer = setInterval(() => {
            if (!GameState.isGameActive()) {  // Only continue if game is not active
                this._currentBlockHeight++;
                this._waitingForBlock = false;
                this.drawWelcomeScreen();
                
                // Show block found message briefly
                setTimeout(() => {
                    if (!DisplayManager.ensureDisplay() || GameState.isGameActive()) return;
                    let y = Math.floor(this._screenHeight / 2);
                    this.drawCenteredText(y, "*** NEW BLOCK FOUND! ***");
                    this.drawCenteredText(y + 1, "You may now enter the dungeon!");
                    
                    // Allow entry for 5 seconds
                    setTimeout(() => {
                        if (!GameState.isGameActive()) {
                            this._waitingForBlock = true;
                            this.drawWelcomeScreen();
                        }
                    }, 5000);
                }, 500);
            }
        }, 30000); // 30 second intervals
    },

    // Stop block simulation
    stopBlockSimulation: function() {
        console.log("Stopping block simulation and clearing all intervals...");
        if (this._blockTimer) {
            clearInterval(this._blockTimer);
            this._blockTimer = null;
        }
        if (this._updateInterval) {
            clearInterval(this._updateInterval);
            this._updateInterval = null;
        }
        this._waitingForBlock = false;
    },

    // Check if player can enter (not waiting for block or debug mode)
    canEnterGame: function() {
        const isDebugMode = window.location.hostname === 'localhost' || 
                           window.location.hostname === '127.0.0.1' || 
                           window.location.protocol === 'file:';
        return !this._waitingForBlock || isDebugMode;
    },

    drawWinScreen: function(hasTreasure) {
        if (!DisplayManager.ensureDisplay()) return;
        DisplayManager.clearDisplay();

        let y = Math.floor(this._screenHeight / 3);
        this.drawCenteredText(y, "CONGRATULATIONS!");
        
        if (hasTreasure) {
            this.drawCenteredText(y + 2, "You escaped with the treasure!");
        } else {
            this.drawCenteredText(y + 2, "You escaped the dungeon!");
        }
        this.drawCenteredText(y + 3, "A true hero of Wownero!");
    },

    drawLoseScreen: function(reason) {
        if (!DisplayManager.ensureDisplay()) return;
        DisplayManager.clearDisplay();

                let y = Math.floor(this._screenHeight / 3);
        this.drawCenteredText(y, "YOU HAVE PERISHED");
        
        if (reason === 'monster') {
            this.drawCenteredText(y + 2, "Slain by a fearsome beast.");
        } else if (reason === 'timeout') {
            this.drawCenteredText(y + 2, "The dungeon claimed you before the next block.");
        } else {
            this.drawCenteredText(y + 2, "Your adventure ends here.");
        }
        this.drawCenteredText(y + 3, "Better luck next time.");
    },

    drawWaitingScreen: function() {
        if (!DisplayManager.ensureDisplay()) return;
        DisplayManager.clearDisplay();
        
        const animationEnabled = (typeof WaitingScreenAnimator !== 'undefined') ? 
            WaitingScreenAnimator.isAnimationEnabled() : false;
        
        console.log("🎬 Drawing waiting screen, animation enabled:", animationEnabled);
        
        // Delegate to WaitingScreenAnimator with proper parameters
        if (typeof WaitingScreenAnimator !== 'undefined') {
            if (animationEnabled) {
                WaitingScreenAnimator.drawAnimatedWaitingScreen(
                    this._screenWidth, 
                    this._screenHeight, 
                    this.drawBorder.bind(this), 
                    this.drawCenteredText.bind(this)
                );
            } else {
                WaitingScreenAnimator.drawStaticWaitingScreen(
                    this._screenWidth, 
                    this._screenHeight, 
                    this.drawBorder.bind(this), 
                    this.drawCenteredText.bind(this)
                );
            }
        } else {
            // Fallback if WaitingScreenAnimator is not available
            this.drawFallbackWaitingScreen();
        }
        
        // Show the animation toggle button
        this.showAnimationButton();
        
        // Start animation loop if not already running
        if (animationEnabled && typeof WaitingScreenAnimator !== 'undefined') {
            WaitingScreenAnimator.startAnimation();
        }
    },

    showAnimationButton: function() {
        // First ensure the button exists
        if (!this.ensureAnimationButton()) {
            console.error("❌ Cannot show animation button - element missing from DOM");
            return;
        }
        
        const animButton = document.getElementById('animationToggleButton');
        if (animButton) {
            animButton.style.display = 'inline-block';
            animButton.style.visibility = 'visible';
            
            const animationEnabled = (typeof WaitingScreenAnimator !== 'undefined') ? 
                WaitingScreenAnimator.isAnimationEnabled() : false;
            animButton.textContent = animationEnabled ? '🎬 DISABLE ANIMATION' : '🎬 ENABLE ANIMATION';
            console.log("✅ Animation button shown:", animButton.textContent);
        } else {
            console.warn("❌ Animation button element not found!");
        }
    },

    hideAnimationButton: function() {
        const animButton = document.getElementById('animationToggleButton');
        if (animButton) {
            animButton.style.display = 'none';
        }
    },

    ensureAnimationButton: function() {
        let animButton = document.getElementById('animationToggleButton');
        
        if (!animButton) {
            console.warn("🔧 Animation button not found, checking if it exists in DOM...");
            // Try to find it by class or create it if missing
            const statusDiv = document.querySelector('.status');
            if (statusDiv) {
                const existingButtons = statusDiv.querySelectorAll('button');
                console.log("Found buttons in status div:", existingButtons.length);
                for (let btn of existingButtons) {
                    console.log("Button:", btn.id, btn.textContent);
                }
            }
            return false;
        }
        
        return true;
    },

    stopWaitingScreen: function() {
        if (typeof WaitingScreenAnimator !== 'undefined') {
            WaitingScreenAnimator.stopAnimation();
        }
        this.hideAnimationButton();
        if (!DisplayManager.ensureDisplay()) return;
        DisplayManager.clearDisplay();
    },

    drawFallbackWaitingScreen: function() {
        this.drawBorder();
        let y = Math.floor(this._screenHeight / 2) - 1;
        this.drawCenteredText(y, "Waiting for next block...");
        this.drawCenteredText(y + 1, "Loading animation module...");
    }
};

// Make it available globally
if (typeof window !== 'undefined') {
    window.ScreenManager = ScreenManager;
}