Add comprehensive development guide with architecture, performance, and troubleshooting

documentation/development-guide.md

@@ -121,19 +121,6 @@ const levelDesign = {
 };
 ```
 
-### Visual Design Patterns
-```css
-/* Color scheme consistency */
-:root {
-  --primary-cyan: #00d4ff;
-  --secondary-magenta: #ff00ff;
-  --success-green: #00ff64;
-  --warning-orange: #ff6400;
-  --background-dark: #0a0a0a;
-  --surface-glass: rgba(255, 255, 255, 0.1);
-}
-```
-
 ## Performance Guidelines
 
 ### Target Metrics
@@ -173,30 +160,19 @@ const levelDesign = {
    }
    ```
 
-## Testing Strategy
+2. **Event Handling Optimization**
+   ```javascript
+   // Throttle mouse move events
+   function throttle(func, delay) {
+     let timeoutId;
+     return (...args) => {
+       clearTimeout(timeoutId);
+       timeoutId = setTimeout(() => func(...args), delay);
+     };
+   }
 
-### Manual Testing Checklist
+   const throttledMouseMove = throttle(handleMouseMove, 16); // ~60fps
-```markdown
+   ```
-**Core Functionality:**
-- [ ] Node connections work with mouse
-- [ ] Node connections work with touch
-- [ ] Level progression advances correctly
-- [ ] Score calculation accurate
-- [ ] Timer counts down properly
-- [ ] Game over conditions trigger
-
-**Performance Testing:**
-- [ ] 60fps on Desktop Chrome/Firefox/Safari
-- [ ] 30fps+ on mobile devices
-- [ ] No memory leaks after 10+ levels
-- [ ] Smooth animations during gameplay
-
-**Device Compatibility:**
-- [ ] Desktop: Windows/Mac/Linux browsers
-- [ ] Mobile: iOS Safari, Android Chrome
-- [ ] Tablet: iPad, Android tablets
-- [ ] Various screen sizes and orientations
-```
 
 ## Troubleshooting
 
@@ -234,19 +210,25 @@ function debugFrameTime() {
 - Use `requestAnimationFrame` properly
 - Check for memory leaks
 
-#### Touch Controls Not Working
+### Debug Tools
-**Problem:** Mobile touch events not registering properly
 ```javascript
-// Solution: Prevent default touch behavior
+// Development debug helper
-canvas.addEventListener('touchstart', (e) => {
+if (location.hostname === 'localhost') {
-  e.preventDefault(); // Prevent scrolling
+  window.gameDebug = {
-  // Handle touch
+    state: () => console.table(gameState),
-}, { passive: false });
+    skipLevel: () => showLevelComplete(),
-
+    addTime: (seconds) => gameState.timeLeft += seconds,
-canvas.addEventListener('touchmove', (e) => {
+    setLevel: (level) => {
-  e.preventDefault(); // Prevent scrolling
+      gameState.level = level;
-  // Handle drag
+      generateLevel(level);
-}, { passive: false });
+    },
+    performance: () => {
+      console.log('Nodes:', gameState.nodes.length);
+      console.log('Connections:', gameState.connections.length);
+      console.log('Memory:', performance.memory?.usedJSHeapSize);
+    }
+  };
+}
 ```
 
 ---