*

2 files changed, 76 insertions, 9 deletions

diff --git a/html/rogue/js/camera.js b/html/rogue/js/camera.js
index 2cb84d1..05e0f28 100644
--- a/html/rogue/js/camera.js
+++ b/html/rogue/js/camera.js
@@ -4,8 +4,28 @@ const Camera = {
     
     centerOn(hex) {
         const pixelCoord = HexGrid.toPixel(hex);
+        
+        // Calculate desired camera position
         this.x = pixelCoord.x - state.canvas.width / 2;
         this.y = pixelCoord.y - state.canvas.height / 2;
+        
+        // Calculate grid dimensions
+        const gridPixelWidth = Config.hex.GRID_SIZE * Config.hex.WIDTH;
+        const gridPixelHeight = Config.hex.GRID_SIZE * Config.hex.HEIGHT;
+        
+        // Calculate grid bounds (accounting for centered grid)
+        const minX = -gridPixelWidth / 2;
+        const maxX = gridPixelWidth / 2 - state.canvas.width;
+        const minY = -gridPixelHeight / 2;
+        const maxY = gridPixelHeight / 2 - state.canvas.height;
+        
+        // Keep camera within grid bounds
+        this.x = Math.max(minX, Math.min(this.x, maxX));
+        this.y = Math.max(minY, Math.min(this.y, maxY));
+        
+        // Round to prevent sub-pixel rendering
+        this.x = Math.round(this.x);
+        this.y = Math.round(this.y);
     },
 
     smoothFollow(target) {
@@ -16,17 +36,58 @@ const Camera = {
         const centerX = state.canvas.width / 2;
         const centerY = state.canvas.height / 2;
         
+        // Determine if we're on a narrow screen
+        const isNarrowScreen = state.canvas.width <= Config.camera.NARROW_SCREEN_THRESHOLD;
+        
+        // Calculate dynamic deadzones based on screen size
+        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
+        );
+        
         const deltaX = screenX - centerX;
         const deltaY = screenY - centerY;
         
-        if (Math.abs(deltaX) > Config.camera.DEADZONE_X) {
-            const adjustX = deltaX - (deltaX > 0 ? Config.camera.DEADZONE_X : -Config.camera.DEADZONE_X);
-            this.x += Math.round(adjustX * Config.camera.FOLLOW_SPEED);
+        // Use more aggressive follow speed for narrow screens
+        const followSpeed = isNarrowScreen ? 
+            Config.camera.FOLLOW_SPEED * 1.5 : 
+            Config.camera.FOLLOW_SPEED;
+        
+        // Ensure camera moves if player is near screen edges
+        if (Math.abs(deltaX) > deadzoneX) {
+            const adjustX = deltaX - (deltaX > 0 ? deadzoneX : -deadzoneX);
+            this.x += Math.round(adjustX * followSpeed);
         }
         
-        if (Math.abs(deltaY) > Config.camera.DEADZONE_Y) {
-            const adjustY = deltaY - (deltaY > 0 ? Config.camera.DEADZONE_Y : -Config.camera.DEADZONE_Y);
-            this.y += Math.round(adjustY * Config.camera.FOLLOW_SPEED);
+        if (Math.abs(deltaY) > deadzoneY) {
+            const adjustY = deltaY - (deltaY > 0 ? deadzoneY : -deadzoneY);
+            this.y += Math.round(adjustY * followSpeed);
         }
+        
+        // Calculate grid bounds (accounting for centered grid)
+        const gridPixelWidth = Config.hex.GRID_SIZE * Config.hex.WIDTH;
+        const gridPixelHeight = Config.hex.GRID_SIZE * Config.hex.HEIGHT;
+        const minX = -gridPixelWidth / 2;
+        const maxX = gridPixelWidth / 2 - state.canvas.width;
+        const minY = -gridPixelHeight / 2;
+        const maxY = gridPixelHeight / 2 - state.canvas.height;
+        
+        // Keep camera within grid bounds
+        this.x = Math.max(minX, Math.min(this.x, maxX));
+        this.y = Math.max(minY, Math.min(this.y, maxY));
     }
 }; 
\ No newline at end of file
diff --git a/html/rogue/js/config.js b/html/rogue/js/config.js
index cc1a3dc..efe8cbf 100644
--- a/html/rogue/js/config.js
+++ b/html/rogue/js/config.js
@@ -47,9 +47,15 @@ const Config = {
     },
 
     camera: {
-        FOLLOW_SPEED: 0.1, // Camera smoothing factor
-        DEADZONE_X: 200, // Horizontal deadzone in pixels
-        DEADZONE_Y: 150 // Vertical deadzone in pixels
+        FOLLOW_SPEED: 0.1,
+        DEADZONE_RATIO_X: {
+            NARROW: 0.1,
+            WIDE: 0.2
+        },
+        DEADZONE_RATIO_Y: 0.2,
+        MIN_DEADZONE: 30,
+        MAX_DEADZONE: 200,
+        NARROW_SCREEN_THRESHOLD: 600
     },
 
     ui: {