wownerogue/html/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Wowgue - A Wownero Roguelike</title>
    <link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    <!-- First load socket.io -->
    <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
    
    <!-- THEN initialize the socket -->
    <script>
    // Create socket connection BEFORE loading game.js
    window.socket = io();
    </script>
    
    <!-- Only AFTER socket is initialized, load other scripts -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/rot.min.js"></script>
    <script src="js/options.js"></script>
    <script src="js/game.js"></script>
</head>
<body>
    <div class="container">
        <!-- Header area -->
        <header class="banner">
            <div id="staticbanner">
                <span id="banner"></span><span id="bannercursor">|</span>
            </div>
        </header>
        
        <!-- Status area for block height -->
        <div class="status">
            <div id="blockHeight">Block Height: <span id="heightValue">Loading...</span></div>
            <div id="connectionStatus">Status: <span id="statusValue">Connecting...</span></div>
        </div>
        
        <!-- Game display -->
        <div class="rotdis"></div>
        
        <!-- Chat messages area -->
        <div class="chat-container">
            <div id="messageBox">
                <ul id="messages"></ul>
            </div>
        </div>
        
        <!-- Chat input in its own row -->
        <div class="input-container">
            <form id="chatForm" action="">
                <input id="chatInput" autocomplete="off" placeholder="Type a command..." />
                <button type="submit">Send</button>
            </form>
        </div>

        <!-- Footer -->
        <div class="footer">
            Wownero Roguelike v0.1.0 | Use WASD or arrow keys to move
        </div>
    </div>

    <!-- Add teletype JS implementation -->
    <script>
    // Simple teletype implementation
    (function($) {
        $.fn.teletype = function(options) {
            var settings = $.extend({
                text: [],
                typeDelay: 100,
                backDelay: 50,
                pause: 1000,
                loop: true,
                cursor: ''
            }, options);
            
            return this.each(function() {
                var $el = $(this);
                var currentTextIndex = 0;
                var currentCharIndex = 0;
                var isTyping = true;
                
                function type() {
                    var currentText = settings.text[currentTextIndex];
                    
                    if (isTyping) {
                        // Typing forward
                        if (currentCharIndex < currentText.length) {
                            $el.text($el.text() + currentText.charAt(currentCharIndex));
                            currentCharIndex++;
                            setTimeout(type, settings.typeDelay);
                        } else {
                            // Reached end of text, pause before backspacing
                            isTyping = false;
                            setTimeout(type, settings.pause);
                        }
                    } else {
                        // Backspacing
                        if (currentCharIndex > 0) {
                            $el.text($el.text().slice(0, -1));
                            currentCharIndex--;
                            setTimeout(type, settings.backDelay);
                        } else {
                            // Finished backspacing, move to next text
                            isTyping = true;
                            currentTextIndex = (currentTextIndex + 1) % settings.text.length;
                            if (currentTextIndex === 0 && !settings.loop) {
                                // Stop if we've gone through all texts and not looping
                                return;
                            }
                            setTimeout(type, settings.typeDelay);
                        }
                    }
                }
                
                // Start typing
                type();
            });
        };
    })(jQuery);
    
    // Cursor blink effect
    (function($) {
        $.fn.blink = function(options) {
            var settings = $.extend({
                text: ['|', ' '],
                delay: 500
            }, options);
            
            return this.each(function() {
                var $el = $(this);
                var currentIndex = 0;
                
                function blink() {
                    $el.text(settings.text[currentIndex]);
                    currentIndex = (currentIndex + 1) % settings.text.length;
                    setTimeout(blink, settings.delay);
                }
                
                blink();
            });
        };
    })(jQuery);
    </script>
    
    <!-- Initialize teletype animation -->
    <script>
    $(function() {
        $('#banner').teletype({
            text: ["Welcome traveler...", "You have arrived at...", "The Wowngeon"],
            typeDelay: 100,
            backDelay: 50,
            pause: 1500
        });
        
        $('#bannercursor').blink({
            text: ['|', ' '],
            delay: 500
        });
        
        // After animations are complete, set static text
        setTimeout(function() {
            $('#banner, #bannercursor').fadeOut(500, function() {
                $('#staticbanner').text("THE WOWNGEON");
            });
        }, 14000);
    });
    </script>

    <!-- Global scroll helper function -->
    <script>
    function scrollChat() {
        var messageBox = $('#messageBox');
        messageBox.scrollTop(messageBox.prop("scrollHeight"));
    }
    </script>

    <script>
    $(function() {
        // Socket event listeners
        socket.on('connect', function() {
            console.log("Connected with socket ID:", socket.id);
            
            // Tell server our client ID
            socket.emit('register_client', {
                clientId: socket.id,
                userAgent: navigator.userAgent
            });
        });
        
        socket.on('welcome', function(msg) {
            $('#messages').append($('<li>').text("Connected to server!"));
            scrollChat();
        });
        
        socket.on('message', function(msg) {
            $('#messages').append($('<li>').text(msg));
            scrollChat();
        });
        
        // Add or update the game_start handler
        socket.on('game_start', function(data) {
            console.log("🎮 Game start received with data:", data);
            $('#messages').append($('<li class="game-start">').text("Starting game..."));
            
            // Stop waiting screen animation if it's running
            if (typeof Game !== 'undefined') {
                Game.stopWaitingScreen();
            }
            
            if (!data) {
                $('#messages').append($('<li class="error">').text("Error: No game data received"));
                return;
            }
            
            try {
                // Start the game with received data
                var success = Game.startGame(data);
                console.log("Game start result:", success ? "SUCCESS" : "FAILED");
                
                if (!success) {
                    $('#messages').append($('<li class="error">').text("Game start failed - trying ASCII mode"));
                    
                    // Try switching to ASCII mode
                    if (document.getElementById('toggle-mode')) {
                        document.getElementById('toggle-mode').click();
                        setTimeout(function() {
                            Game.startGame(data);
                        }, 100);
                    }
                }
                
                window.focus();
            } catch (err) {
                console.error("Error starting game:", err);
                $('#messages').append($('<li class="error">').text("Error: " + err.message));
            }
        });

        // Game update handler
        socket.on('game_update', function(data) {
            console.log("🎮 GAME UPDATE received:", data);
            
            if (typeof Game !== 'undefined') {
                // Update all entity positions
                Game._player = data.player;
                Game._visibleTiles = data.visibleTiles;
                Game._monster = data.monster;
                Game._entrance = data.entrance;
                Game._exit = data.exit;
                Game._treasure = data.treasure;
                
                // Draw updated screen
                Game._drawGameScreen();
            }
        });

        // Update the chat form submission handler that processes the "enter" command

        $('#chatForm').submit(function(e) {
            e.preventDefault();
            var msg = $('#chatInput').val().trim();
            
            // Don't send empty messages
            if (!msg) return false;
            
            console.log("📝 SENDING CHAT:", msg);
            socket.emit('chat message', msg);
            $('#chatInput').val('');
            
            // If the message is "enter", show the waiting screen
            if (msg.toLowerCase() === 'enter') {
                console.log("🔑 'ENTER' COMMAND DETECTED - expecting game_start response");
                
                // Show waiting screen
                if (typeof Game !== 'undefined') {
                    Game.drawWaitingScreen();
                }
            }
            
            return false;
        });
    });
    </script>

    <!-- Initialize the game when everything is ready -->
    <script>
        $(function() {
            Game.init();
        });
    </script>

    <!-- Block height update script -->
    <script>
    // Function to update block height display
    function updateBlockHeight(height) {
        $('#heightValue').text(height);
    }
    
    // Listen for block updates from server
    socket.on('blockheight', function(height) {
        console.log(`📈 BLOCK HEIGHT: ${height}`);
        updateBlockHeight(height);
        $('#statusValue').text('Connected');
        $('#statusValue').css('color', '#0f0');
    });
    
    // Set a test value if no response
    setTimeout(function() {
        if ($('#heightValue').text() === 'Loading...') {
            updateBlockHeight('---');
            $('#statusValue').text('Waiting...');
            $('#statusValue').css('color', '#ff0');
        }
    }, 5000);
    </script>

    <!-- Add browser detection info -->
<div id="browser-info" style="position: fixed; right: 10px; top: 40px; background: rgba(0,0,0,0.7); color: #0f0; padding: 5px; font-family: monospace; font-size: 12px; z-index: 1000; display: none;">
    <div>Browser: <span id="browser-name">checking...</span></div>
    <div>Display: <span id="display-status">checking...</span></div>
    <button onclick="document.getElementById('browser-info').style.display='none'" style="margin-top: 5px; background: #333; border: 1px solid #666; color: white; font-size: 10px; padding: 2px 4px;">
        Close
    </button>
</div>

<script>
// Check browser and display status
$(function() {
    setTimeout(function() {
        var browserInfo = document.getElementById('browser-info');
        browserInfo.style.display = 'block';
        
        // Detect browser
        var browserName = "Unknown";
        if (navigator.userAgent.indexOf("Firefox") !== -1) {
            browserName = "Firefox";
        } else if (navigator.userAgent.indexOf("Chrome") !== -1) {
            browserName = "Chrome/Chromium";
        } else if (navigator.userAgent.indexOf("Safari") !== -1) {
            browserName = "Safari";
        } else if (navigator.userAgent.indexOf("Edge") !== -1) {
            browserName = "Edge";
        }
        
        document.getElementById('browser-name').textContent = browserName;
        
        // Check display status
        var rotdis = document.querySelector('.rotdis');
        var canvas = rotdis ? rotdis.querySelector('canvas') : null;
        
        if (canvas) {
            document.getElementById('display-status').textContent = 
                "OK (" + canvas.width + "x" + canvas.height + ")";
            document.getElementById('display-status').style.color = "#0f0";
        } else {
            document.getElementById('display-status').textContent = "NOT FOUND";
            document.getElementById('display-status').style.color = "#f00";
        }
        
        // Hide after 10 seconds
        setTimeout(function() {
            browserInfo.style.display = 'none';
        }, 10000);
    }, 2000);
});
</script>

<!-- Add ASCII Mode button at the top right -->
<button id="toggle-mode" style="position: fixed; right: 10px; top: 10px; z-index: 1000; background: #333; color: white; padding: 5px; border: 1px solid #666; border-radius: 4px;">
    Switch to ASCII Mode
</button>

<script>
document.getElementById('toggle-mode').addEventListener('click', function() {
    try {
        // Check current mode and toggle accordingly
        if (Game.isAsciiMode && Game.isAsciiMode()) {
            console.log("Switching to TILE mode...");
            if (typeof Game.switchToTileMode === 'function') {
                Game.switchToTileMode();
                this.textContent = "Switch to ASCII Mode";
                this.style.background = "#333";
                this.style.color = "white";
            } else {
                console.error("Game.switchToTileMode is not defined");
                this.textContent = "Error: Tile Mode Not Available";
                this.style.background = "#990000";
            }
        } else {
            console.log("Switching to ASCII mode...");
            if (typeof Game.switchToAsciiMode === 'function') {
                Game.switchToAsciiMode();
                this.textContent = "Switch to Tile Mode";
                this.style.background = "#444";
                this.style.color = "#0f0";
            } else {
                console.error("Game.switchToAsciiMode is not defined");
                this.textContent = "Error: ASCII Mode Not Available";
                this.style.background = "#990000";
            }
        }
    } catch (err) {
        console.error("Error switching display mode:", err);
    }
});
</script>

<!-- Replace the queue_cancelled handler -->
<script>
// Handle queue cancellation
socket.on('queue_cancelled', function() {
    console.log("Queue cancelled, returning to welcome screen");
    
    if (typeof Game !== 'undefined') {
        // Try different naming patterns for compatibility
        if (typeof Game._drawWelcomeScreen === 'function') {
            Game._drawWelcomeScreen();
        } else if (typeof Game.drawWelcomeScreen === 'function') {
            Game.drawWelcomeScreen();
        } else {
            console.error("Welcome screen function not found");
        }
    }
});
</script>

<!-- Add this before the closing </body> tag -->
<script>
// Game over handler
socket.on('game_over', function(data) {
    console.log("🎮 GAME OVER received:", data);
    
    // Update game state based on outcome
    if (typeof Game !== 'undefined') {
        if (data.status === 'won') {
            // Show win message
            $('#messages').append($('<li style="color:#0f0; font-weight:bold;">').text(
                data.hasTreasure ? 
                "YOU ESCAPED WITH THE TREASURE! YOU WON!" : 
                "You escaped the dungeon alive!"
            ));
            
            // Draw win screen
            Game.drawWinScreen(data.hasTreasure);
        } else {
            // Show loss message
            const reason = data.reason || "unknown";
            let message = "You died in the dungeon!";
            
            if (reason === 'monster') {
                message = "You were killed by the monster!";
            } else if (reason === 'timeout') {
                message = "You didn't escape before the next block was found!";
            }
            
            $('#messages').append($('<li style="color:#f00; font-weight:bold;">').text(message));
            
            // Draw lose screen
            Game.drawLoseScreen(reason);
        }
        
        // Set game as inactive to prevent further movement
        Game._gameActive = false;
    }
    
    scrollChat();
});
</script>

</body>
</html>