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/lib/jquery-3.4.1.min.js"></script>
    <script src="js/lib/rot.min.js"></script>
    <script src="js/core/options.js"></script>
    <script src="js/ui/teletype.js"></script>
    
    <!-- Modular game components (order matters for dependencies) -->
    <script src="js/display/displayManager.js"></script>
    <script src="js/display/waitingScreenAnimator.js"></script>
    <script src="js/display/screenManager.js"></script>
    <script src="js/display/renderEngine.js"></script>
    <script src="js/core/gameState.js"></script>
    <script src="js/core/game.js"></script>
    
    <!-- Other modules -->
    <script src="js/ui/ui.js"></script>
    <script src="js/ui/audioAlerts.js"></script>
    <script src="js/network/socketHandlers.js"></script>
    <script src="js/input/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>
            <button id="startButton" style="background: #0a5c0a; color: #ff0; border: 2px solid #0f0; padding: 8px 16px; font-weight: bold; cursor: pointer; margin-top: 5px; display: none;">
                🎮 START GAME
            </button>
            <button id="animationToggleButton" style="background: #5c5c0a; color: #ff0; border: 2px solid #aa0; padding: 6px 12px; font-weight: bold; cursor: pointer; margin-top: 5px; margin-left: 10px; display: none;">
                🎬 DISABLE ANIMATION
            </button>
            <div style="margin-top:6px; font-size:11px; color:#ccc; display:flex; align-items:center; gap:4px;">
                <label style="cursor:pointer; display:flex; align-items:center; gap:4px;">
                    <input type="checkbox" id="audioAlertsToggle" style="cursor:pointer;"> Audio Alerts
                </label>
            </div>
        </div>
        
        <!-- Payment System UI -->
        <div id="payment-ui" class="payment-section" style="display: none; background: rgba(0,50,0,0.9); border: 2px solid #0f0; padding: 10px; margin: 5px; color: #0f0;">
            <div class="payment-header">
                <strong>🎮 Game Mode Selection</strong>
                <button id="close-payment" style="float: right; background: #500; color: #f00; border: 1px solid #f00; padding: 2px 6px;">✕</button>
            </div>
            
            <div class="game-modes" style="margin: 10px 0;">
                <div class="mode-option" data-mode="FREE" style="padding: 8px; margin: 5px 0; border: 1px solid #555; cursor: pointer;">
                    <strong>🆓 FREE PLAY</strong> - No cost, no rewards
                </div>
                <div class="mode-option" data-mode="PAID_SINGLE" style="padding: 8px; margin: 5px 0; border: 1px solid #555; cursor: pointer;">
                    <strong>💰 PAID SINGLE</strong> - 0.005 XMR per game, 2x payout for escape, 3x with treasure
                </div>
                <div class="mode-option" data-mode="PAID_CREDITS" style="padding: 8px; margin: 5px 0; border: 1px solid #555; cursor: pointer;">
                    <strong>🎫 CREDITS PACKAGE</strong> - 0.03 XMR for 10 games, no payouts
                </div>
            </div>
            
            <div id="credits-display" style="margin: 10px 0; display: none;">
                <strong>Credits remaining: <span id="credits-count">0</span></strong>
            </div>
            
            <div id="payment-details" style="display: none; margin: 10px 0;">
                <div><strong>Payment Required:</strong></div>
                <div>Amount: <span id="payment-amount">0</span> XMR</div>
                <div>Address: <input id="payment-address" type="text" readonly style="width: 100%; background: #000; color: #0f0; border: 1px solid #0f0; padding: 5px;"></div>
                <div style="margin: 10px 0;">
                    <button id="copy-address" style="background: #050; color: #0f0; border: 1px solid #0f0; padding: 5px 10px;">📋 Copy Address</button>
                    <button id="check-payment" style="background: #005; color: #0f0; border: 1px solid #0f0; padding: 5px 10px;">🔄 Check Payment</button>
                </div>
                <div id="payment-status" style="margin: 10px 0; font-weight: bold;"></div>
            </div>
        </div>
        
        <!-- Game display -->
        <div id="game-display" class="rotdis"></div>
        
        <!-- Debug display area (hidden in production) -->
        <div id="debug-display" style="display: none; background: rgba(0,0,0,0.8); color: #0f0; font-family: monospace; font-size: 12px; padding: 10px; margin: 5px; border: 1px solid #333; max-height: 200px; overflow-y: auto;">
            <div><strong>Debug Information:</strong></div>
            <div id="debug-content">Ready...</div>
        </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>

    <!-- Initialize game when ready -->
    <script>
        $(document).ready(function() {
            console.log("Document ready - initializing modules...");
            console.log("Socket available:", !!window.socket);
            console.log("Game object available:", typeof Game !== 'undefined');
            console.log("SocketHandlers available:", typeof SocketHandlers !== 'undefined');
            console.log("UI available:", typeof UI !== 'undefined');
            console.log("InputHandler available:", typeof InputHandler !== 'undefined');
            
            // Small delay to ensure all modules are fully loaded
            setTimeout(function() {
                // Initialize Game first
                if (typeof Game !== 'undefined') {
                    console.log("Initializing Game...");
                    const gameInitResult = Game.init();
                    console.log("Game initialization result:", gameInitResult);
                    
                    // Ensure welcome screen is shown after a brief delay
                    setTimeout(function() {
                        if (gameInitResult && typeof ScreenManager !== 'undefined' && ScreenManager.drawWelcomeScreen) {
                            console.log("Ensuring welcome screen is drawn...");
                            ScreenManager.drawWelcomeScreen();
                        }
                    }, 50);
                } else {
                    console.error("Game object not found!");
                }
                
                // Initialize SocketHandlers (CRITICAL for receiving game_start events!)
                if (typeof SocketHandlers !== 'undefined') {
                    console.log("Initializing SocketHandlers...");
                    SocketHandlers.init();
                    if (typeof AudioAlerts !== 'undefined') { AudioAlerts.init(); }
                } else {
                    console.error("SocketHandlers object not found!");
                }
                
                // Initialize InputHandler
                if (typeof InputHandler !== 'undefined') {
                    console.log("Initializing InputHandler...");
                    InputHandler.init();
                } else {
                    console.error("InputHandler object not found!");
                }
            }, 100); // 100ms delay to ensure everything is loaded
        });
    </script>
</body>
</html>