refactor

Author: sjefvanleeuwen

js/CanvasManager.js

@@ -0,0 +1,52 @@
+class CanvasManager {
+    constructor(canvasId, virtualWidth, virtualHeight) {
+        this.canvas = document.getElementById(canvasId);
+        this.ctx = this.canvas.getContext('2d');
+        this.virtualWidth = virtualWidth;
+        this.virtualHeight = virtualHeight;
+        this.scale = 1;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        
+        this.setupCanvas();
+        this.bindEvents();
+    }
+    
+    setupCanvas() {
+        const displayWidth = window.innerWidth;
+        const displayHeight = window.innerHeight;
+        this.scale = Math.min(displayWidth / this.virtualWidth, displayHeight / this.virtualHeight);
+        this.canvas.width = displayWidth;
+        this.canvas.height = displayHeight;
+        this.offsetX = (displayWidth - (this.virtualWidth * this.scale)) / 2;
+        this.offsetY = (displayHeight - (this.virtualHeight * this.scale)) / 2;
+        this.applyTransform();
+    }
+    
+    applyTransform() {
+        this.ctx.setTransform(this.scale, 0, 0, this.scale, this.offsetX, this.offsetY);
+    }
+    
+    clearScreen() {
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+        this.ctx.fillStyle = '#000000';
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        this.applyTransform();
+    }
+    
+    bindEvents() {
+        let resizeTimeout;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                this.setupCanvas();
+            }, 100);
+        });
+    }
+
+    getContext() {
+        return this.ctx;
+    }
+}
+
+export default CanvasManager;

js/InputManager.js

@@ -0,0 +1,42 @@
+class InputManager {
+    constructor() {
+        this.handlers = new Map();
+        this.currentScreen = null;
+        this.debugHandler = null;
+        
+        window.addEventListener('keydown', (e) => this.handleKeyDown(e));
+    }
+
+    setCurrentScreen(screenName) {
+        this.currentScreen = screenName;
+    }
+
+    registerScreen(screenName, handler) {
+        this.handlers.set(screenName, handler);
+    }
+
+    setDebugHandler(callback) {
+        this.debugHandler = callback;
+    }
+
+    handleKeyDown(e) {
+        // Handle debug toggle
+        if (e.key === 'd' || e.key === 'D') {
+            if (this.debugHandler) {
+                this.debugHandler();
+            }
+            return;
+        }
+
+        // Handle screen-specific input
+        if (this.currentScreen && this.handlers.has(this.currentScreen)) {
+            const handler = this.handlers.get(this.currentScreen);
+            const nextScreen = handler(e.key);
+            if (nextScreen) {
+                return nextScreen;
+            }
+        }
+    }
+}
+
+export default InputManager;

js/PatternFormation.js

@@ -113,6 +113,8 @@ class PatternFormation {
         this.diveCurveIntensity = 0.8; // How much they curve toward player
         this.currentDiveChance = this.baseDiveChance;
         this.currentDiveSpeed = this.diveSpeed;
+
+        this.onPointsScored = options.onPointsScored || (() => {});
     }
 
     applyDifficultyModifiers() {
@@ -453,11 +455,8 @@ class PatternFormation {
                 const pointsMultiplier = this.difficulty * (1 + (this.initialAlienCount - this.aliens.length) * 0.1);
                 const points = Math.floor(this.pointsBase * pointsMultiplier);
 
-                // Add points to game score using window.game
-                if (window.game) {
-                    console.log('Alien destroyed, adding points:', points); // Debug log
-                    window.game.addPoints(points);
-                }
+                // Replace direct call with callback
+                this.onPointsScored(points);
                 return true;
             }
         }