1 files changed, 113 insertions, 0 deletions
diff --git a/html/rogue/js/debug.js b/html/rogue/js/debug.js
new file mode 100644
index 0000000..f2e0b02
--- /dev/null
+++ b/html/rogue/js/debug.js
@@ -0,0 +1,113 @@
+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 = 30;
+        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, 162, 0, 1)';
+            ctx.lineWidth = 2;
+            ctx.strokeRect(
+                state.canvas.width/2 - deadzoneX,
+                state.canvas.height/2 - deadzoneY,
+                deadzoneX * 2,
+                deadzoneY * 2
+            );
+
+            // Draw a small cross at the center of the camera deadzone
+            const centerX = state.canvas.width / 2;
+            const centerY = state.canvas.height / 2;
+            const crossSize = 10; // Size of the cross arms
+
+            ctx.beginPath();
+            ctx.moveTo(centerX - crossSize, centerY);
+            ctx.lineTo(centerX + crossSize, centerY);
+            ctx.moveTo(centerX, centerY - crossSize);
+            ctx.lineTo(centerX, centerY + crossSize);
+            ctx.stroke();
+        }
+        
+        // Restore context state
+        ctx.restore();
+    }
+}; 
\ No newline at end of file