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">
    
    <!-- Socket.io -->
    <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
    
    <!-- Initialize socket -->
    <script>
        window.socket = io();
    </script>
    
    <!-- Core libraries -->
    <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/teletype.js"></script>
    
    <!-- Game modules -->
    <script src="js/game.js"></script>
    <script src="js/ui.js"></script>
    <script src="js/socketHandlers.js"></script>
    <script src="js/inputHandler.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 id="game-display" 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>

    <!-- Browser info panel -->
    <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>

    <!-- Mode toggle button -->
    <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>

    <!-- Initialize game when ready -->
    <script>
        $(document).ready(function() {
            console.log("Initializing Game...");
            if (typeof Game !== 'undefined') {
                Game.init();
            } else {
                console.error("Game object not found!");
            }
        });
    </script>
</body>
</html>