mirror of
https://github.com/Such-Software/wownerogue.git
synced 2026-10-18 06:41:27 +02:00
463 lines
18 KiB
HTML
463 lines
18 KiB
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/teletype.js"></script> <!-- Load teletype.js -->
|
|
<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 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>
|
|
|
|
<!-- Initialize teletype animation -->
|
|
<script>
|
|
$(function() {
|
|
$('#banner').teletype({
|
|
text: ["Welcome traveler...", "You have arrived at...", "The Wowngeon"],
|
|
typeDelay: 100,
|
|
backDelay: 50,
|
|
pause: 1500
|
|
});
|
|
|
|
// $(\'#bannercursor\').blink({ // <<< COMMENT OUT THIS BLOCK
|
|
// 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..."));
|
|
|
|
if (typeof Game !== 'undefined') {
|
|
Game.stopWaitingScreen();
|
|
}
|
|
|
|
if (!data) {
|
|
$('#messages').append($('<li class="error">').text("Error: No game data received from server."));
|
|
if (typeof Game !== 'undefined') Game._drawWelcomeScreen();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Pass player, map, monsters, items, and initialVisibleTiles if available
|
|
var success = Game.startGame(
|
|
data.player,
|
|
data.map,
|
|
data.monsters,
|
|
data.items,
|
|
data.visibleTiles // Pass initial visible tiles from server
|
|
);
|
|
console.log("Game start result:", success ? "SUCCESS" : "FAILED");
|
|
|
|
if (!success) {
|
|
$('#messages').append($('<li class="error">').text("Game start failed. Check console for details."));
|
|
if (typeof Game !== 'undefined') Game._drawWelcomeScreen();
|
|
} else {
|
|
// Shift focus to the game display area after successful game start
|
|
$('#game-display').focus();
|
|
updateFocusIndicator();
|
|
}
|
|
|
|
} 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); // Reduced verbosity
|
|
|
|
if (typeof Game !== 'undefined' && Game._gameActive) { // Ensure game is active
|
|
if (data.player) Game._player = data.player;
|
|
if (data.visibleTiles) {
|
|
Game._visibleTiles = data.visibleTiles;
|
|
Game._updateExploredTiles(); // Update explored based on new visibility
|
|
}
|
|
if (data.monster) Game._monster = data.monster; // Update monster data
|
|
if (data.items) Game._items = data.items; // Update items data
|
|
// Potentially update _entrance, _exit, _treasure if they are part of game_update
|
|
// Game._entrance = data.entrance;
|
|
// Game._exit = data.exit;
|
|
// Game._treasure = data.treasure;
|
|
|
|
Game._drawGameScreen();
|
|
} else {
|
|
// console.log("Game not active or Game undefined, skipping game_update draw.");
|
|
}
|
|
});
|
|
|
|
// 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
|
|
// AND shift focus to game display if game is about to start
|
|
if (msg.toLowerCase() === 'enter') {
|
|
console.log("🔑 'ENTER' COMMAND DETECTED - expecting game_start response");
|
|
|
|
// Show waiting screen
|
|
if (typeof Game !== 'undefined') {
|
|
Game.drawWaitingScreen();
|
|
}
|
|
// Focus will be shifted in the 'game_start' handler after success
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
// Set initial focus to chat input
|
|
$('#chatInput').focus();
|
|
updateFocusIndicator(); // Initial focus indicator update
|
|
|
|
// Add focus/blur listeners for visual indicator
|
|
$('#chatInput').on('focus', updateFocusIndicator).on('blur', updateFocusIndicator);
|
|
$('#game-display').on('focus', updateFocusIndicator).on('blur', updateFocusIndicator);
|
|
|
|
// Keyboard listener for game actions (WASD, Arrow Keys)
|
|
// Ensure this is attached to an element that can receive focus, like the game-display div.
|
|
// The game-display div needs a tabindex attribute to be focusable.
|
|
$('#game-display').attr('tabindex', '-1'); // Make it focusable
|
|
|
|
$(document).on('keydown', function(e) {
|
|
// console.log(`Keydown event: ${e.key}`, "Active element:", document.activeElement, "Game active?:", Game ? Game._gameActive : "Game undefined");
|
|
|
|
if (document.activeElement === $('#game-display')[0]) {
|
|
// console.log("Game display has focus.");
|
|
if (Game && Game._gameActive) {
|
|
// console.log("Game is active. Processing key:", e.key);
|
|
let dx = 0;
|
|
let dy = 0;
|
|
let moved = false;
|
|
|
|
switch(e.key) {
|
|
case 'w': case 'ArrowUp': dy = -1; moved = true; break;
|
|
case 's': case 'ArrowDown': dy = 1; moved = true; break;
|
|
case 'a': case 'ArrowLeft': dx = -1; moved = true; break;
|
|
case 'd': case 'ArrowRight': dx = 1; moved = true; break;
|
|
}
|
|
|
|
if (moved) {
|
|
console.log(`Attempting to move: dx=${dx}, dy=${dy}. Key: ${e.key}`);
|
|
e.preventDefault(); // Prevent page scrolling
|
|
// Emit movement to server instead of directly calling Game.movePlayer
|
|
socket.emit('player_move', { dx: dx, dy: dy });
|
|
console.log(`Emitted player_move: dx=${dx}, dy=${dy}`);
|
|
} else {
|
|
// console.log("Key pressed on game display, but not a movement key:", e.key);
|
|
}
|
|
} else {
|
|
console.log("Game display has focus, but Game is not active. Game object:", Game, "Game._gameActive:", Game ? Game._gameActive : "N/A");
|
|
}
|
|
} else if (e.key === 'Enter' && document.activeElement !== $('#chatInput')[0]) {
|
|
// console.log("Enter pressed, focusing chat input.");
|
|
// If Enter is pressed and chat is not focused, focus chat
|
|
$('#chatInput').focus();
|
|
updateFocusIndicator();
|
|
} else {
|
|
// console.log("Keydown event, but game display not focused or not Enter key for chat focus. Active element:", document.activeElement);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Function to update visual focus indicator
|
|
function updateFocusIndicator() {
|
|
var gameDisplay = $('#game-display');
|
|
var chatInput = $('#chatInput');
|
|
|
|
if (document.activeElement === gameDisplay[0]) {
|
|
gameDisplay.css('outline', '2px solid yellow'); // Or some other visual cue
|
|
chatInput.css('outline', 'none');
|
|
console.log("Focus: Game Display");
|
|
} else if (document.activeElement === chatInput[0]) {
|
|
chatInput.css('outline', '2px solid cyan'); // Or some other visual cue
|
|
gameDisplay.css('outline', 'none');
|
|
console.log("Focus: Chat Input");
|
|
} else {
|
|
gameDisplay.css('outline', 'none');
|
|
chatInput.css('outline', 'none');
|
|
console.log("Focus: None or Other");
|
|
}
|
|
}
|
|
</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 {
|
|
var button = document.getElementById('toggle-mode');
|
|
// Check current mode and toggle accordingly
|
|
if (Game && Game._isTileMode) { // If currently in Tile Mode
|
|
console.log("Switching to ASCII mode...");
|
|
if (typeof Game.switchToAsciiMode === 'function') {
|
|
Game.switchToAsciiMode();
|
|
button.textContent = 'Switch to Tile Mode';
|
|
} else { console.error("Game.switchToAsciiMode is not defined"); }
|
|
} else if (Game) { // If currently in ASCII mode (or Game object exists and not in tile mode)
|
|
console.log("Switching to TILE mode...");
|
|
if (typeof Game.switchToTileMode === 'function') {
|
|
Game.switchToTileMode();
|
|
button.textContent = 'Switch to ASCII Mode';
|
|
} else { console.error("Game.switchToTileMode is not defined"); }
|
|
} else {
|
|
console.error("Game object not available to toggle mode.");
|
|
}
|
|
} catch (e) {
|
|
console.error("Error switching display mode:", e);
|
|
}
|
|
});
|
|
</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>
|