app.js

@@ -151,6 +151,28 @@ function animate() {
 
 animate();
 
+// === DEBUG MODE ===
+let debugMode = false;
+
+document.getElementById('debug-toggle').addEventListener('click', () => {
+  debugMode = !debugMode;
+  document.getElementById('debug-toggle').style.backgroundColor = debugMode
+    ? 'var(--color-text-muted)'
+    : 'var(--color-secondary)';
+  console.log(`Debug mode ${debugMode ? 'enabled' : 'disabled'}`);
+
+  if (debugMode) {
+    // Example: Visualize all collision boxes and light sources
+    // Replace with actual logic when available
+    document.querySelectorAll('.collision-box').forEach(el => el.style.outline = '2px solid red');
+    document.querySelectorAll('.light-source').forEach(el => el.style.outline = '2px dashed yellow');
+  } else {
+    document.querySelectorAll('.collision-box, .light-source').forEach(el => {
+      el.style.outline = 'none';
+    });
+  }
+});
+
 // === WEBSOCKET CLIENT ===
 import { wsClient } from './ws-client.js';
 

index.html

@@ -30,6 +30,9 @@
     <button id="audio-toggle" class="chat-toggle-btn" aria-label="Toggle ambient sound" style="background-color: var(--color-primary); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
       🔊
     </button>
+    <button id="debug-toggle" class="chat-toggle-btn" aria-label="Toggle debug mode" style="background-color: var(--color-secondary); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
+      🔍
+    </button>
     <audio id="ambient-sound" src="ambient.mp3" loop></audio>
   </div>
 

style.css

@@ -55,3 +55,18 @@ canvas {
 #audio-toggle.muted {
   background-color: var(--color-text-muted);
 }
+
+/* === DEBUG MODE === */
+#debug-toggle {
+  margin-left: 8px;
+}
+
+.collision-box {
+  outline: 2px solid red;
+  outline-offset: 2px;
+}
+
+.light-source {
+  outline: 2px dashed yellow;
+  outline-offset: 2px;
+}