github-such-software/wownerogue
1
0
Fork 0
mirror of https://github.com/Such-Software/wownerogue.git synced 2026-10-18 06:41:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor frontend and fix debug mode

Browse Source
This commit is contained in:
jwinterm
2025-05-29 13:40:44 -04:00
parent de3eed792b
commit f02e16272e
28 changed files with 422 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/debug.html
+8 -8
View File
@@ -51,16 +51,16 @@
</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>
<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>
<!-- 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>
<script src="js/core/game.js"></script>
<script src="js/ui/ui.js"></script>
<script src="js/network/socketHandlers.js"></script>
<script src="js/input/inputHandler.js"></script>
<script>
// Capture console messages
html/index.html
+13 -13
View File
@@ -14,23 +14,23 @@
</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>
<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/displayManager.js"></script>
<script src="js/waitingScreenAnimator.js"></script>
<script src="js/screenManager.js"></script>
<script src="js/renderEngine.js"></script>
<script src="js/gameState.js"></script>
<script src="js/game.js"></script>
<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.js"></script>
<script src="js/socketHandlers.js"></script>
<script src="js/inputHandler.js"></script>
<script src="js/ui/ui.js"></script>
<script src="js/network/socketHandlers.js"></script>
<script src="js/input/inputHandler.js"></script>
</head>
<body>
<div class="container">
html/js/game.js → html/js/core/game.js
+1 -22
View File
@@ -3,7 +3,7 @@
if (typeof window !== 'undefined' && !window.socket) {
window.socket = {
emit: function(event, data) {
console.log("[Mock Socket] Would emit:", event, data);
// Mock socket emit - removed debug logging
}
};
}
@@ -16,8 +16,6 @@ var Game = {
_maxLogMessages: 5,
init: function() {
console.log("Game.init called - Modular version");
// Update screen dimensions from options
if (typeof options !== 'undefined') {
this._screenWidth = options.width || 25;
@@ -52,21 +50,16 @@ var Game = {
console.error("Game: Cannot start game, display not ready.");
return false;
}
console.log("Game: startGame called. PlayerData:", playerData, "MapData:", mapData, "InitialVisibleTiles:", initialVisibleTiles);
console.log("🔥 LIGHTING DATA received in startGame:", lightingData);
console.log("🔦 TORCH DATA received in startGame:", torchData);
DisplayManager.clearDisplay();
// Force clear all display caches and artifacts
if (typeof DisplayManager !== 'undefined' && DisplayManager.forceClearToBlack) {
console.log("✅ Force clearing display to prevent artifacts...");
DisplayManager.forceClearToBlack();
}
// Stop the block simulation to prevent welcome screen from interfering
if (typeof ScreenManager !== 'undefined' && ScreenManager.stopBlockSimulation) {
console.log("✅ Stopping block simulation...");
ScreenManager.stopBlockSimulation();
}
@@ -74,7 +67,6 @@ var Game = {
GameState.setGameActive(true);
// Clear any previous game state but preserve what we need for initialization
console.log("✅ Clearing previous game state (but preserving server data)...");
GameState._exploredTiles = {};
// Don't clear _visibleTiles yet - let initializeMap handle it properly
GameState._map = {};
@@ -97,11 +89,9 @@ var Game = {
// Initialize lighting and torch data
if (lightingData) {
GameState._lighting = lightingData;
console.log("🔥 GameState: Lighting data stored with", Object.keys(lightingData).length, "rows");
}
if (torchData) {
GameState._torches = torchData;
console.log("🔦 GameState: Torch data stored with", torchData.length, "torches");
}
// Initialize map and validate player position
@@ -122,7 +112,6 @@ var Game = {
GameState._scheduler.add(GameState._player, true);
console.log("Player coordinates before drawing game screen:", GameState._player.x, GameState._player.y);
if (!GameState._map[GameState._player.y] || GameState._map[GameState._player.y][GameState._player.x] === undefined) {
console.error(`Player position (${GameState._player.x}, ${GameState._player.y}) is STILL invalid before drawing. Map issue?`);
ScreenManager.drawCenteredText(10, "Error: Player invalid for draw!");
@@ -130,7 +119,6 @@ var Game = {
}
this._drawGameScreen();
console.log("Game started successfully and initial screen drawn.");
return true;
} catch (err) {
@@ -155,7 +143,6 @@ var Game = {
// Redraw the game screen if any relevant data changed
if (needsRedraw) {
console.log("Redrawing game screen due to game update.");
this._drawGameScreen();
}
},
@@ -168,14 +155,6 @@ var Game = {
if (!this._ensureDisplay()) return;
const gameState = GameState.getGameStateForRender();
// Debug: Verify lighting data is included in render state
console.log("🎨 _drawGameScreen() passing lighting data:", {
hasLighting: !!gameState.lighting,
lightingKeys: gameState.lighting ? Object.keys(gameState.lighting).length : 0,
hasTorches: !!gameState.torches,
torchCount: gameState.torches ? gameState.torches.length : 0
});
RenderEngine.drawGameScreen(gameState);
},
html/js/gameState.js → html/js/core/gameState.js
+5 -37
View File
@@ -68,7 +68,6 @@ var GameState = {
// Try to initialize from mapData.tiles
if (mapData && mapData.tiles && typeof mapData.tiles === 'object' && Object.keys(mapData.tiles).length > 0) {
console.log("Initializing map from mapData.tiles:", mapData.tiles);
for (var yKey in mapData.tiles) {
const y = parseInt(yKey);
this._map[y] = {};
@@ -78,11 +77,9 @@ var GameState = {
}
}
mapInitialized = true;
console.log("Game map initialized from mapData.tiles:", this._map);
}
// Try array-based mapData
else if (mapData && Array.isArray(mapData) && mapData.length > 0) {
console.warn("Received array-based mapData, attempting to convert.");
for (let y = 0; y < mapData.length; y++) {
this._map[y] = {};
if (mapData[y] && Array.isArray(mapData[y])) {
@@ -92,11 +89,9 @@ var GameState = {
}
}
mapInitialized = true;
console.log("Game map initialized from array-based mapData:", this._map);
}
// Try initialVisibleTiles
else if (initialVisibleTiles && typeof initialVisibleTiles === 'object' && Object.keys(initialVisibleTiles).length > 0) {
console.log("Initializing _visibleTiles from server-sent initialVisibleTiles and inferring _map for FOV.");
this._visibleTiles = JSON.parse(JSON.stringify(initialVisibleTiles)); // Deep copy
for (const yKey in this._visibleTiles) {
@@ -108,8 +103,6 @@ var GameState = {
}
}
mapInitialized = true;
console.log("Game map partially initialized for FOV from initialVisibleTiles:", this._map);
console.log("_visibleTiles set directly from initialVisibleTiles:", this._visibleTiles);
}
// Create default map if nothing worked
@@ -131,7 +124,6 @@ var GameState = {
this._map[this._player.y][this._player.x] = 0; // Force floor
}
}
console.log("Default game map created. Player position:", this._player.x, this._player.y);
}
return mapInitialized;
@@ -150,7 +142,6 @@ var GameState = {
if (tile === 0 || tile === "'1" || tile === "'2") {
this._player.x = x_scan;
this._player.y = y_scan;
console.warn(`Player moved to fallback position: (${this._player.x}, ${this._player.y})`);
foundFallback = true;
break;
}
@@ -191,7 +182,6 @@ var GameState = {
// NOTE: Don't call updateExploredTiles() here on initial game load
// Explored tiles should only be updated when player moves, not on first FOV computation
console.log("Initial FOV computed/processed. Visible tiles count:", Object.keys(this._visibleTiles).reduce((acc, yKey) => acc + Object.keys(this._visibleTiles[yKey]).length, 0));
},
updateExploredTiles: function() {
@@ -207,8 +197,6 @@ var GameState = {
},
updateGameState: function(data) {
console.log("🎲 GameState.updateGameState received data:", data);
if (!this._gameActive) {
console.warn("GameState.updateGameState called, but game is not active. Ignoring update.");
return false;
@@ -255,33 +243,25 @@ var GameState = {
// Update lighting and torch data
if (data.lighting !== undefined) {
console.log("🔥 BEFORE UPDATE: this._lighting has", this._lighting ? Object.keys(this._lighting).length : 0, "rows");
console.log("🔥 NEW DATA: data.lighting has", Object.keys(data.lighting).length, "rows");
console.log("🔥 LIGHTING DATA SAMPLE:", JSON.stringify(data.lighting).substring(0, 200));
this._lighting = data.lighting;
console.log("🔥 AFTER UPDATE: this._lighting has", this._lighting ? Object.keys(this._lighting).length : 0, "rows");
needsRedraw = true;
}
if (data.torches !== undefined) {
this._torches = data.torches;
needsRedraw = true;
console.log("🔦 GameState: Updated torch data with", data.torches.length, "torches");
}
// Update visible tiles (most critical for movement feedback)
if (data.visibleTiles && typeof data.visibleTiles === 'object' && Object.keys(data.visibleTiles).length > 0) {
console.log("Visible tiles updated. Number of rows:", Object.keys(data.visibleTiles).length);
this._visibleTiles = data.visibleTiles;
// Debug log for specific problematic coordinates
if (this._visibleTiles[18] && (this._visibleTiles[18][36] !== undefined || this._visibleTiles[18][35] !== undefined)) {
const clientDebug = `🔍 CLIENT y=18: x=35: ${this._visibleTiles[18][35]}, x=36: ${this._visibleTiles[18][36]}`;
console.log(clientDebug);
if (window.GameDebug) window.GameDebug.updateDebugDisplay(clientDebug);
}
if (this._visibleTiles[16] && (this._visibleTiles[16][36] !== undefined || this._visibleTiles[16][35] !== undefined)) {
const clientDebug = `🔍 CLIENT y=16: x=35: ${this._visibleTiles[16][35]}, x=36: ${this._visibleTiles[16][36]}`;
console.log(clientDebug);
if (window.GameDebug) window.GameDebug.updateDebugDisplay(clientDebug);
}
@@ -313,19 +293,18 @@ var GameState = {
// Move the player
this._player.x = newX;
this._player.y = newY;
console.log("Player moved to:", this._player.x, this._player.y);
// Update visibility and redraw
this.updateExploredTiles();
return true;
} else {
console.log("Move blocked by wall or invalid map data at:", newX, newY);
return false;
}
},
// Debug functions
// Debug functions
debugPrintMap: function(screenWidth, screenHeight) {
// Map debugging - preserve console.log for debug function
console.log("Current game map:");
for (let y = 0; y < screenHeight; y++) {
let row = "";
@@ -341,6 +320,7 @@ var GameState = {
},
debugTileMapping: function() {
// Tile mapping debugging - preserve console.log for debug function
const testValues = [0, 1, undefined, null];
for (const val of testValues) {
const char = (val === 1) ? '#' : "\'";
@@ -357,7 +337,8 @@ var GameState = {
return;
}
console.log("⚠️ LOCAL FOV COMPUTATION (should only be used for testing without server)");
// Warning for local FOV computation (keep for debugging)
// console.log("⚠️ LOCAL FOV COMPUTATION (should only be used for testing without server)");
const oldVisibleTiles = JSON.parse(JSON.stringify(this._visibleTiles));
this._visibleTiles = {};
@@ -376,22 +357,10 @@ var GameState = {
if (!this._exploredTiles[y]) this._exploredTiles[y] = {};
this._exploredTiles[y][x] = this._map[y] && this._map[y][x] !== undefined ? this._map[y][x] : 0;
}.bind(this));
console.log("FOV computed for player at:", this._player.x, this._player.y);
console.log("Visible tiles:", Object.keys(this._visibleTiles).length);
},
// Get game state data for rendering
getGameStateForRender: function() {
// Debug: Log the actual lighting data being returned
console.log("🔍 getGameStateForRender() lighting check:", {
lightingExists: !!this._lighting,
lightingKeys: this._lighting ? Object.keys(this._lighting).length : 0,
lightingRef: this._lighting,
torchExists: !!this._torches,
torchCount: this._torches ? this._torches.length : 0
});
const renderState = {
map: this._map,
player: this._player,
@@ -408,7 +377,6 @@ var GameState = {
torches: this._torches
};
console.log("🔍 getGameStateForRender() RETURNING lighting with", renderState.lighting ? Object.keys(renderState.lighting).length : 0, "keys");
return renderState;
},
html/js/options.js → html/js/core/options.js
View File
html/js/displayManager.js → html/js/display/displayManager.js
View File
html/js/renderEngine.js → html/js/display/renderEngine.js
+3 -3
View File
@@ -120,9 +120,9 @@ var RenderEngine = {
const isCurrentlyVisible = this.isVisible(wx, wy, visibleTiles);
// Added log to inspect lightingAlpha for visible, lit tiles
if (isCurrentlyVisible && lightingAlpha > 0.01) { // Using 0.01 to catch small, non-zero alphas
console.log(`RenderEngine TRACE: Tile (${wx},${wy}), Visible: ${isCurrentlyVisible}, lightingAlpha: ${lightingAlpha.toFixed(3)}, from: ${lighting[wy] ? lighting[wy][wx].toFixed(3) : 'N/A'}`);
}
// if (isCurrentlyVisible && lightingAlpha > 0.01) { // Using 0.01 to catch small, non-zero alphas
// console.log(`RenderEngine TRACE: Tile (${wx},${wy}), Visible: ${isCurrentlyVisible}, lightingAlpha: ${lightingAlpha.toFixed(3)}, from: ${lighting[wy] ? lighting[wy][wx].toFixed(3) : 'N/A'}`);
// }
if (isCurrentlyVisible) {
if (lightingAlpha > 0) {
html/js/screenManager.js → html/js/display/screenManager.js
+6 -14
View File
@@ -115,13 +115,10 @@ var ScreenManager = {
// Hide animation button on welcome screen
this.hideAnimationButton();
// Debug button (shown only in development)
// Debug mode detection (for future use)
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]");
}
},
@@ -135,7 +132,6 @@ var ScreenManager = {
// 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;
@@ -179,7 +175,6 @@ var ScreenManager = {
// Stop block simulation
stopBlockSimulation: function() {
console.log("Stopping block simulation and clearing all intervals...");
if (this._blockTimer) {
clearInterval(this._blockTimer);
this._blockTimer = null;
@@ -238,8 +233,6 @@ var ScreenManager = {
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) {
@@ -286,9 +279,9 @@ var ScreenManager = {
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!");
// Animation button element not found - non-critical warning
// console.warn("❌ Animation button element not found!");
}
},
@@ -303,14 +296,13 @@ var ScreenManager = {
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
// Animation button not found - create or handle missing button
const statusDiv = document.querySelector('.status');
if (statusDiv) {
const existingButtons = statusDiv.querySelectorAll('button');
console.log("Found buttons in status div:", existingButtons.length);
// Check existing buttons for debugging
for (let btn of existingButtons) {
console.log("Button:", btn.id, btn.textContent);
// Button discovery for debugging
}
}
return false;
html/js/waitingScreenAnimator.js → html/js/display/waitingScreenAnimator.js
View File
html/js/inputHandler.js → html/js/input/inputHandler.js
+2 -47
View File
@@ -9,11 +9,9 @@ const InputHandler = {
init: function() {
if (this._initialized) {
console.warn("InputHandler.init() called multiple times - ignoring duplicate call");
return;
}
console.log("InputHandler: Initializing for the first time...");
this.setupChatForm();
this.setupFocusHandlers();
this.setupKeyboardControls();
@@ -30,12 +28,9 @@ const InputHandler = {
// Don't send empty messages
if (!msg) return false;
console.log("📝 SENDING CHAT:", msg);
// If the message is "enter", always send it to server
// The server will handle queueing logic and timing
if (msg.toLowerCase() === 'enter') {
console.log("🔑 'ENTER' COMMAND DETECTED - sending to server");
socket.emit('chat message', msg);
// Show appropriate screen based on current state
@@ -44,12 +39,10 @@ const InputHandler = {
window.location.protocol === 'file:';
if (isDebugMode || ScreenManager.canEnterGame()) {
console.log("✅ Can enter immediately - showing waiting screen");
if (typeof ScreenManager !== 'undefined' && ScreenManager.drawWaitingScreen) {
ScreenManager.drawWaitingScreen();
}
} else {
console.log("⏳ Will be queued - showing queue message");
$('#messages').append($('<li style="color: #ff0;">').text("* You have been added to the queue! Game will start after next block."));
UI.scrollChat();
}
@@ -93,7 +86,6 @@ const InputHandler = {
}
if (moved) {
console.log(`🎹 KEYDOWN: dx=${dx}, dy=${dy}, key=${e.key}, time=${Date.now()}`);
e.preventDefault(); // Prevent page scrolling
// Implement movement throttling to prevent rapid-fire movement
@@ -101,18 +93,15 @@ const InputHandler = {
if (now - self._lastMoveTime >= self._moveCooldown) {
// Send move immediately if enough time has passed
socket.emit('player_move', { dx: dx, dy: dy });
console.log(`✅ EMITTED player_move: dx=${dx}, dy=${dy}`);
self._lastMoveTime = now;
self._pendingMove = null;
} else {
// Queue the move to be sent after cooldown
self._pendingMove = { dx: dx, dy: dy };
const timeToWait = self._moveCooldown - (now - self._lastMoveTime);
console.log(`⏳ QUEUED move: dx=${dx}, dy=${dy}, waiting ${timeToWait}ms`);
setTimeout(() => {
if (self._pendingMove) {
socket.emit('player_move', self._pendingMove);
console.log(`✅ EMITTED queued player_move: dx=${self._pendingMove.dx}, dy=${self._pendingMove.dy}`);
self._lastMoveTime = Date.now();
self._pendingMove = null;
}
@@ -121,47 +110,19 @@ const InputHandler = {
}
} else {
// Game display has focus but game is not active (welcome screen)
// Check for debug key 'D' to start immediately
if (e.key === 'D' || e.key === 'd') {
// Check if we're in debug mode (localhost)
const isDebugMode = window.location.hostname === 'localhost' ||
window.location.hostname === '127.0.0.1' ||
window.location.protocol === 'file:';
if (isDebugMode) {
console.log("🔧 DEBUG: 'D' key pressed - starting game immediately");
e.preventDefault();
// Emit enter command to start game immediately
socket.emit('chat message', 'enter');
// Show waiting screen while game starts
if (typeof ScreenManager !== 'undefined' && ScreenManager.drawWaitingScreen) {
ScreenManager.drawWaitingScreen();
}
// Add debug message to chat
$('#messages').append($('<li style="color: #0f0;">').text("🔧 DEBUG: Starting game immediately..."));
UI.scrollChat();
} else {
console.log("Debug key pressed but not in debug mode");
}
} else if (e.key === 'A' || e.key === 'a') {
// Only handle animation toggle
if (e.key === 'A' || e.key === 'a') {
// Toggle animation on waiting screen
console.log("🎬 'A' key pressed - toggling animation");
e.preventDefault();
if (typeof ScreenManager !== 'undefined') {
ScreenManager.toggleAnimation();
}
} else {
console.log("Game display has focus, but Game is not active.");
}
}
} else if (e.key === 'Enter' && document.activeElement !== $('#chatInput')[0]) {
// If Enter is pressed and chat is not focused
if (typeof Game !== 'undefined' && !Game._gameActive) {
// On welcome screen - start the game
console.log("🔑 Enter key pressed on welcome screen - starting game");
e.preventDefault();
const isDebugMode = window.location.hostname === 'localhost' ||
@@ -171,12 +132,10 @@ const InputHandler = {
socket.emit('chat message', 'enter');
if (isDebugMode || ScreenManager.canEnterGame()) {
console.log("✅ Can enter immediately - showing waiting screen");
if (typeof ScreenManager !== 'undefined' && ScreenManager.drawWaitingScreen) {
ScreenManager.drawWaitingScreen();
}
} else {
console.log("⏳ Will be queued - showing queue message");
$('#messages').append($('<li style="color: #ff0;">').text("* You have been added to the queue! Game will start after next block."));
UI.scrollChat();
}
@@ -196,12 +155,10 @@ const InputHandler = {
setupClickHandlers: function() {
// Add click handling for the HTML START button
$('#startButton').click(function(e) {
console.log("🖱️ START button clicked - auto-starting game");
// Use the new auto_start event for immediate entry
socket.emit('auto_start');
console.log("✅ Auto-start requested - showing waiting screen");
if (typeof ScreenManager !== 'undefined' && ScreenManager.drawWaitingScreen) {
ScreenManager.drawWaitingScreen();
}
@@ -213,7 +170,6 @@ const InputHandler = {
// Add click handling for the animation toggle button
$('#animationToggleButton').click(function(e) {
console.log("🎬 Animation toggle button clicked");
if (typeof ScreenManager !== 'undefined' && ScreenManager.toggleAnimation) {
ScreenManager.toggleAnimation();
@@ -235,7 +191,6 @@ const InputHandler = {
if (toggleButton) {
toggleButton.addEventListener('click', function() {
try {
console.log("Display mode switching is no longer needed - modes are equivalent");
toggleButton.textContent = 'Mode switching disabled';
toggleButton.disabled = true;
} catch (e) {
html/js/jquery-3.4.1.min.js → html/js/lib/jquery-3.4.1.min.js
Vendored
View File
html/js/rot.js → html/js/lib/rot.js
View File
html/js/rot.min.js → html/js/lib/rot.min.js
Vendored
View File
html/js/socketHandlers.js → html/js/network/socketHandlers.js
+1 -56
View File
@@ -6,7 +6,6 @@ const SocketHandlers = {
init: function() {
if (this._initialized) {
console.warn("SocketHandlers.init() called multiple times - ignoring duplicate call");
return;
}
@@ -15,7 +14,6 @@ const SocketHandlers = {
return;
}
console.log("SocketHandlers: Initializing for the first time...");
this.registerEventHandlers();
this._initialized = true;
},
@@ -40,7 +38,6 @@ const SocketHandlers = {
},
onConnect: function() {
console.log("Connected with socket ID:", socket.id);
// Tell server our client ID
socket.emit('register_client', {
@@ -63,7 +60,6 @@ const SocketHandlers = {
onStatusUpdate: function(data) {
// Handle player-specific status updates
console.log("📨 STATUS UPDATE received:", data);
// Display status message with appropriate styling
const statusClass = data.type === 'error' ? 'error' : 'status';
@@ -73,7 +69,6 @@ const SocketHandlers = {
onChatBroadcast: function(data) {
// Handle chat messages broadcast to all players
console.log("💬 CHAT BROADCAST received:", data);
const timestamp = new Date(data.timestamp || Date.now()).toLocaleTimeString();
const chatMsg = `[${timestamp}] ${data.username || 'Anonymous'}: ${data.message}`;
@@ -83,7 +78,6 @@ const SocketHandlers = {
},
onWaitingStatus: function(data) {
console.log("🕒 WAITING STATUS received:", data);
if (data.status === 'waiting') {
$('#messages').append($('<li style="color:#ff0;">').text(data.message));
@@ -97,15 +91,6 @@ const SocketHandlers = {
},
onGameStart: function(data) {
console.log("🎮 Game start received with data:", data);
console.log("🔍 DETAILED DATA CHECK:");
console.log(" - Player:", data?.player);
console.log(" - Map keys:", data?.map ? Object.keys(data.map).length : "NO MAP");
console.log(" - Monster:", data?.monster);
console.log(" - Items:", data?.items);
console.log(" - VisibleTiles keys:", data?.visibleTiles ? Object.keys(data.visibleTiles).length : "NO VISIBLE TILES");
console.log(" - Lighting keys:", data?.lighting ? Object.keys(data.lighting).length : "NO LIGHTING");
console.log(" - Torches:", data?.torches ? data.torches.length : "NO TORCHES (expected - lighting calculated server-side)");
$('#messages').append($('<li class="game-start">').text("Starting game..."));
@@ -122,16 +107,11 @@ const SocketHandlers = {
try {
// Pass all game data including lighting and torches
var success = Game.startGame(data.player, data.map, data.monster, data.items, data.visibleTiles, data.lighting, data.torches);
console.log("Game start result:", success ? "SUCCESS" : "FAILED");
if (!success) {
$('#messages').append($('<li class="error">').text("Game start failed. Check console for details."));
console.log("❌ GAME START FAILED - reverting to welcome screen");
if (typeof Game !== 'undefined' && Game._drawWelcomeScreen) Game._drawWelcomeScreen();
} else {
// Draw the initial game screen - the game draws itself after startGame()
console.log("Game started successfully, initial screen should be drawn");
// Shift focus to the game display area after successful game start
$('#game-display').focus();
UI.updateFocusIndicator();
@@ -144,39 +124,9 @@ const SocketHandlers = {
},
onGameUpdate: function(data) {
// Debug log to see what data we're receiving
console.log("🎮 GAME UPDATE received with keys:", Object.keys(data));
// Debug lighting data specifically
if (data.lighting && Object.keys(data.lighting).length > 0) {
console.log("🔥 GAME UPDATE: lighting data received with", Object.keys(data.lighting).length, "rows");
} else {
console.log("⚠️ GAME UPDATE: NO lighting data in update");
}
// Debug torch data specifically
if (data.torches && data.torches.length > 0) {
console.log("🔦 GAME UPDATE: torch data received with", data.torches.length, "torches");
} else {
console.log("ℹ️ GAME UPDATE: No torch data (expected - lighting calculated server-side)");
}
if (data.visibleTiles) {
const debugMsg = "🔍 SOCKET: Received game update with visibleTiles";
console.log(debugMsg);
if (window.GameDebug) window.GameDebug.updateDebugDisplay(debugMsg);
// Check for specific coordinates that are problematic
if (data.visibleTiles[18] && (data.visibleTiles[18][36] !== undefined || data.visibleTiles[18][35] !== undefined)) {
const coordDebug = `🔍 SOCKET y=18: x=35: ${data.visibleTiles[18][35]}, x=36: ${data.visibleTiles[18][36]}`;
console.log(coordDebug);
if (window.GameDebug) window.GameDebug.updateDebugDisplay(coordDebug);
}
if (data.visibleTiles[16] && (data.visibleTiles[16][36] !== undefined || data.visibleTiles[16][35] !== undefined)) {
const coordDebug = `🔍 SOCKET y=16: x=35: ${data.visibleTiles[16][35]}, x=36: ${data.visibleTiles[16][36]}`;
console.log(coordDebug);
if (window.GameDebug) window.GameDebug.updateDebugDisplay(coordDebug);
}
if (window.GameDebug) window.GameDebug.updateDebugDisplay("SOCKET: Received game update with visibleTiles");
}
if (typeof Game !== 'undefined' && Game._gameActive) {
@@ -185,7 +135,6 @@ const SocketHandlers = {
},
onGameOver: function(data) {
console.log("🎮 GAME OVER received:", data);
// Update game state based on outcome
if (typeof Game !== 'undefined') {
@@ -224,9 +173,7 @@ const SocketHandlers = {
}
// Auto-return to title screen after 30 seconds
console.log("⏰ Setting 30-second timer to return to title screen...");
setTimeout(() => {
console.log("⏰ 30 seconds elapsed - returning to title screen");
$('#messages').append($('<li style="color:#888;">').text("Returning to title screen..."));
UI.scrollChat();
@@ -250,7 +197,6 @@ const SocketHandlers = {
},
onQueueCancelled: function() {
console.log("Queue cancelled, returning to welcome screen");
if (typeof Game !== 'undefined' && Game._drawWelcomeScreen) {
Game._drawWelcomeScreen();
@@ -260,7 +206,6 @@ const SocketHandlers = {
},
onBlockHeight: function(height) {
console.log(`📈 BLOCK HEIGHT: ${height}`);
UI.updateBlockHeight(height);
$('#statusValue').text('Connected');
$('#statusValue').css('color', '#0f0');
html/js/teletype.js → html/js/ui/teletype.js
View File
html/js/ui.js → html/js/ui/ui.js
-3
View File
@@ -21,15 +21,12 @@ const UI = {
if (document.activeElement === gameDisplay[0]) {
gameDisplay.css('outline', '2px solid yellow');
chatInput.css('outline', 'none');
console.log("Focus: Game Display");
} else if (document.activeElement === chatInput[0]) {
chatInput.css('outline', '2px solid cyan');
gameDisplay.css('outline', 'none');
console.log("Focus: Chat Input");
} else {
gameDisplay.css('outline', 'none');
chatInput.css('outline', 'none');
console.log("Focus: None or Other");
}
},