*

3 files changed, 109 insertions, 3 deletions

diff --git a/html/rogue/index.html b/html/rogue/index.html
index e019a46..47ad50f 100644
--- a/html/rogue/index.html
+++ b/html/rogue/index.html
@@ -26,6 +26,7 @@
     <script src="js/items.js"></script>
     <script src="js/inventory-ui.js"></script>
     <script src="js/player.js"></script>
+    <script src="js/debug.js"></script>
     <script src="js/game.js"></script>
     <script src="js/utils.js"></script>
     <script src="js/state.js"></script>
diff --git a/html/rogue/js/debug.js b/html/rogue/js/debug.js
new file mode 100644
index 0000000..751af4c
--- /dev/null
+++ b/html/rogue/js/debug.js
@@ -0,0 +1,101 @@
+const Debug = {
+    isEnabled: false,
+    lastFrameTime: performance.now(),
+    frameCount: 0,
+    fps: 0,
+    fpsUpdateInterval: 500, // Update FPS display every 500ms
+    lastFpsUpdate: 0,
+    
+    init() {
+        // Add keyboard listener for debug toggle
+        window.addEventListener('keydown', (e) => {
+            if (e.key.toLowerCase() === 'd') {
+                this.isEnabled = !this.isEnabled;
+            }
+        });
+    },
+    
+    update(currentTime) {
+        if (!this.isEnabled) return;
+        
+        this.frameCount++;
+        
+        // Update FPS counter every 500ms
+        if (currentTime - this.lastFpsUpdate >= this.fpsUpdateInterval) {
+            this.fps = Math.round((this.frameCount * 1000) / (currentTime - this.lastFpsUpdate));
+            this.frameCount = 0;
+            this.lastFpsUpdate = currentTime;
+        }
+        
+        this.lastFrameTime = currentTime;
+    },
+    
+    draw(ctx) {
+        if (!this.isEnabled) return;
+        
+        const padding = 10;
+        const lineHeight = 20;
+        let y = padding;
+        
+        // Save context state
+        ctx.save();
+        
+        // Set up debug text style
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+        ctx.fillRect(0, 0, 300, 200);
+        ctx.font = '14px monospace';
+        ctx.fillStyle = '#00FF00';
+        
+        // Display debug information
+        const debugInfo = [
+            `FPS: ${this.fps}`,
+            `Camera: (${Math.round(Camera.x)}, ${Math.round(Camera.y)})`,
+            `Player Hex: (${player.position.q}, ${player.position.r})`,
+            `Screen: ${state.canvas.width}x${state.canvas.height}`,
+            `Inventory Items: ${player.inventory.length}`,
+            `Revealed Hexes: ${FogOfWar.revealed.size}`,
+            `Moving: ${player.target ? 'Yes' : 'No'}`,
+            `Narrow Screen: ${state.canvas.width <= Config.camera.NARROW_SCREEN_THRESHOLD}`
+        ];
+        
+        debugInfo.forEach(info => {
+            ctx.fillText(info, padding, y);
+            y += lineHeight;
+        });
+        
+        // Draw deadzone visualization
+        if (player.target) {
+            const isNarrowScreen = state.canvas.width <= Config.camera.NARROW_SCREEN_THRESHOLD;
+            const deadzoneX = Math.min(
+                Math.max(
+                    state.canvas.width * (
+                        isNarrowScreen ? 
+                        Config.camera.DEADZONE_RATIO_X.NARROW : 
+                        Config.camera.DEADZONE_RATIO_X.WIDE
+                    ),
+                    Config.camera.MIN_DEADZONE
+                ),
+                Config.camera.MAX_DEADZONE
+            );
+            const deadzoneY = Math.min(
+                Math.max(state.canvas.height * Config.camera.DEADZONE_RATIO_Y, 
+                    Config.camera.MIN_DEADZONE
+                ),
+                Config.camera.MAX_DEADZONE
+            );
+            
+            // Draw camera deadzone
+            ctx.strokeStyle = 'rgba(255, 255, 0, 0.5)';
+            ctx.lineWidth = 2;
+            ctx.strokeRect(
+                state.canvas.width/2 - deadzoneX,
+                state.canvas.height/2 - deadzoneY,
+                deadzoneX * 2,
+                deadzoneY * 2
+            );
+        }
+        
+        // Restore context state
+        ctx.restore();
+    }
+}; 
\ No newline at end of file
diff --git a/html/rogue/js/game.js b/html/rogue/js/game.js
index f26e59b..427fab2 100644
--- a/html/rogue/js/game.js
+++ b/html/rogue/js/game.js
@@ -12,6 +12,7 @@ function init() {
     state.ctx = state.canvas.getContext('2d');
     
     player.init();
+    Debug.init();
     
     function resize() {
         state.canvas.width = window.innerWidth;
@@ -56,16 +57,18 @@ function drawHex(ctx, x, y, hex) {
 }
 
 function gameLoop(currentTime) {
-    requestAnimationFrame(gameLoop);  // Request next frame first
+    requestAnimationFrame(gameLoop);
     
     if (currentTime - lastFrameTime < Config.game.FRAME_TIME) {
-        return;  // Skip frame if too soon
+        return;
     }
     
-    // Ensure consistent time step
     const deltaTime = Math.min(currentTime - lastFrameTime, Config.game.FRAME_TIME * 2);
     lastFrameTime = currentTime;
 
+    // Update debug information
+    Debug.update(currentTime);
+
     // Clear with background
     state.ctx.fillStyle = Config.colors.BACKGROUND;
     state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
@@ -92,6 +95,7 @@ function gameLoop(currentTime) {
     player.draw(state.ctx, HexGrid.toPixel.bind(HexGrid), Camera, HexGrid.SIZE);
     FogOfWar.draw(state.ctx);
     InventoryUI.draw(state.ctx);
+    Debug.draw(state.ctx);
 }
 
 function handleClick(event) {