*

5 files changed, 81 insertions, 77 deletions

diff --git a/html/rogue/js/camera.js b/html/rogue/js/camera.js
index aaeeea9..2cb84d1 100644
--- a/html/rogue/js/camera.js
+++ b/html/rogue/js/camera.js
@@ -10,25 +10,23 @@ const Camera = {
 
     smoothFollow(target) {
         const targetPixel = HexGrid.toPixel(target);
-        const screenX = targetPixel.x - this.x;
-        const screenY = targetPixel.y - this.y;
+        const screenX = Math.round(targetPixel.x - this.x);
+        const screenY = Math.round(targetPixel.y - this.y);
         
         const centerX = state.canvas.width / 2;
         const centerY = state.canvas.height / 2;
         
-        // Distance from center of the screen
         const deltaX = screenX - centerX;
         const deltaY = screenY - centerY;
         
-        // Only move the camera if the player is outside of the deadzone
         if (Math.abs(deltaX) > Config.camera.DEADZONE_X) {
             const adjustX = deltaX - (deltaX > 0 ? Config.camera.DEADZONE_X : -Config.camera.DEADZONE_X);
-            this.x += adjustX * Config.camera.FOLLOW_SPEED;
+            this.x += Math.round(adjustX * Config.camera.FOLLOW_SPEED);
         }
         
         if (Math.abs(deltaY) > Config.camera.DEADZONE_Y) {
             const adjustY = deltaY - (deltaY > 0 ? Config.camera.DEADZONE_Y : -Config.camera.DEADZONE_Y);
-            this.y += adjustY * Config.camera.FOLLOW_SPEED;
+            this.y += Math.round(adjustY * Config.camera.FOLLOW_SPEED);
         }
     }
 }; 
\ No newline at end of file
diff --git a/html/rogue/js/config.js b/html/rogue/js/config.js
index 3bb9d6a..fb7040c 100644
--- a/html/rogue/js/config.js
+++ b/html/rogue/js/config.js
@@ -8,7 +8,7 @@ const Config = {
     
     hex: {
         SIZE: 40, // Size of a single hex
-        GRID_SIZE: 10, // Number of hexes in the grid (width/height)
+        GRID_SIZE: 100, // Number of hexes in the grid (width/height)
         get WIDTH() { // Computed hex width
             return this.SIZE * 2;
         },
diff --git a/html/rogue/js/fow.js b/html/rogue/js/fow.js
index 77f55c0..69a5d61 100644
--- a/html/rogue/js/fow.js
+++ b/html/rogue/js/fow.js
@@ -55,32 +55,35 @@ const FogOfWar = {
     
     // Draw fog of war effect
     draw(ctx) {
-        // Draw fog over unrevealed areas
         HexGrid.getViewportHexes().forEach(hex => {
-            if (!this.isRevealed(hex) || !this.isVisible(hex)) {
-                const pixel = HexGrid.toPixel(hex);
-                const screenX = pixel.x - Camera.x;
-                const screenY = pixel.y - Camera.y;
-                
-                ctx.fillStyle = this.isRevealed(hex) ? 
-                    'rgba(0, 0, 0, 0.5)' :  // Darker fog for unexplored areas
-                    'rgba(0, 0, 0, 0.8)';   // Lighter fog for explored but not visible
-                
-                // Draw fog hex
-                ctx.beginPath();
-                for (let i = 0; i < 6; i++) {
-                    const angle = 2 * Math.PI / 6 * i;
-                    const xPos = screenX + HexGrid.SIZE * Math.cos(angle);
-                    const yPos = screenY + HexGrid.SIZE * Math.sin(angle);
-                    if (i === 0) {
-                        ctx.moveTo(xPos, yPos);
-                    } else {
-                        ctx.lineTo(xPos, yPos);
-                    }
-                }
-                ctx.closePath();
-                ctx.fill();
+            const pixel = HexGrid.toPixel(hex);
+            const screenX = Math.round(pixel.x - Camera.x);
+            const screenY = Math.round(pixel.y - Camera.y);
+            
+            if (!this.isRevealed(hex)) {
+                ctx.fillStyle = 'rgba(0, 0, 0, 1)';
+                this.drawHexShape(ctx, screenX, screenY);
+            } else if (!this.isVisible(hex)) {
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+                this.drawHexShape(ctx, screenX, screenY);
             }
         });
+    },
+    
+    // Helper method to draw hex shape
+    drawHexShape(ctx, x, y) {
+        ctx.beginPath();
+        for (let i = 0; i < 6; i++) {
+            const angle = 2 * Math.PI / 6 * i;
+            const xPos = Math.round(x + HexGrid.SIZE * Math.cos(angle));
+            const yPos = Math.round(y + HexGrid.SIZE * Math.sin(angle));
+            if (i === 0) {
+                ctx.moveTo(xPos, yPos);
+            } else {
+                ctx.lineTo(xPos, yPos);
+            }
+        }
+        ctx.closePath();
+        ctx.fill();
     }
 }; 
\ No newline at end of file
diff --git a/html/rogue/js/game.js b/html/rogue/js/game.js
index 918f8e5..3de54fc 100644
--- a/html/rogue/js/game.js
+++ b/html/rogue/js/game.js
@@ -38,77 +38,79 @@ function drawHex(ctx, x, y, hex) {
         return;
     }
     
-    ctx.beginPath();
-    for (let i = 0; i < 6; i++) {
-        const angle = 2 * Math.PI / 6 * i;
-        const xPos = screenX + HexGrid.SIZE * Math.cos(angle);
-        const yPos = screenY + HexGrid.SIZE * Math.sin(angle);
-        if (i === 0) {
-            ctx.moveTo(xPos, yPos);
-        } else {
-            ctx.lineTo(xPos, yPos);
+    // Only draw hex if it's been revealed or is currently visible
+    if (FogOfWar.isRevealed(hex) || FogOfWar.isVisible(hex)) {
+        ctx.beginPath();
+        for (let i = 0; i < 6; i++) {
+            const angle = 2 * Math.PI / 6 * i;
+            const xPos = screenX + HexGrid.SIZE * Math.cos(angle);
+            const yPos = screenY + HexGrid.SIZE * Math.sin(angle);
+            if (i === 0) {
+                ctx.moveTo(xPos, yPos);
+            } else {
+                ctx.lineTo(xPos, yPos);
+            }
         }
-    }
-    ctx.closePath();
+        ctx.closePath();
 
-    // Fill hex with appropriate color
-    if (HexGrid.isPassable(hex)) {
-        ctx.fillStyle = Config.colors.HEX_FILL;
-    } else {
-        ctx.fillStyle = Config.colors.BACKGROUND;
+        // Fill hex with appropriate color
+        if (HexGrid.isPassable(hex)) {
+            ctx.fillStyle = Config.colors.HEX_FILL;
+        } else {
+            ctx.fillStyle = Config.colors.BACKGROUND;
+        }
+        ctx.fill();
+        
+        // Draw border with appropriate color based on visibility
+        if (!FogOfWar.isRevealed(hex)) {
+            ctx.strokeStyle = 'rgba(0, 0, 0, 1)';  // Match full shadow color
+        } else if (!FogOfWar.isVisible(hex)) {
+            ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+        } else {
+            ctx.strokeStyle = HexGrid.COLOR;  // Normal grid color
+        }
+        ctx.lineWidth = 1;
+        ctx.stroke();
     }
-    ctx.fill();
-    
-    // Draw border
-    ctx.strokeStyle = HexGrid.COLOR;
-    ctx.lineWidth = 1;
-    ctx.stroke();
 }
 
 function gameLoop(currentTime) {
+    requestAnimationFrame(gameLoop);  // Request next frame first
+    
     if (currentTime - lastFrameTime < Config.game.FRAME_TIME) {
-        requestAnimationFrame(gameLoop);
-        return;
+        return;  // Skip frame if too soon
     }
     
-    const deltaTime = currentTime - lastFrameTime;
+    // Ensure consistent time step
+    const deltaTime = Math.min(currentTime - lastFrameTime, Config.game.FRAME_TIME * 2);
     lastFrameTime = currentTime;
 
-    // Clear the entire canvas first
-    state.ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
-    
-    // Then fill with background color
+    // Clear with background
     state.ctx.fillStyle = Config.colors.BACKGROUND;
     state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
     
+    // Round camera position to prevent sub-pixel rendering
+    Camera.x = Math.round(Camera.x);
+    Camera.y = Math.round(Camera.y);
+    
     player.update();
     Camera.smoothFollow(player.getCurrentPosition());
     
-    // Update fog of war when player moves
     if (player.hasMoved) {
         FogOfWar.updateVisibility(player.position);
         player.hasMoved = false;
     }
     
-    // Draw layers in correct order
+    // Draw everything in one pass to prevent flicker
     HexGrid.getViewportHexes().forEach(hex => {
         const pixel = HexGrid.toPixel(hex);
-        drawHex(state.ctx, pixel.x, pixel.y, hex);
+        drawHex(state.ctx, Math.round(pixel.x), Math.round(pixel.y), hex);
     });
     
-    // Draw items
     Items.draw(state.ctx, HexGrid.toPixel.bind(HexGrid), Camera, HexGrid.SIZE);
-    
-    // Draw player
     player.draw(state.ctx, HexGrid.toPixel.bind(HexGrid), Camera, HexGrid.SIZE);
-    
-    // Draw fog of war
     FogOfWar.draw(state.ctx);
-    
-    // Draw inventory UI last
     InventoryUI.draw(state.ctx);
-    
-    requestAnimationFrame(gameLoop);
 }
 
 function handleClick(event) {
diff --git a/html/rogue/js/hex.js b/html/rogue/js/hex.js
index 0d1c2e5..b2e1a82 100644
--- a/html/rogue/js/hex.js
+++ b/html/rogue/js/hex.js
@@ -1,4 +1,5 @@
-// Hex grid utilities and calculations
+// This that witchy shit -- we be hexin!
+
 const HexGrid = {
     get SIZE() { return Config.hex.SIZE },
     get WIDTH() { return Config.hex.WIDTH },
@@ -7,14 +8,14 @@ const HexGrid = {
     COLOR: Config.colors.GRID,
     IMPASSABLE_COLOR: Config.colors.BACKGROUND,
 
-    // Convert hex coordinates to pixel coordinates
+    // hex to pixel
     toPixel(hex) {
         const x = this.SIZE * (3/2 * hex.q);
         const y = this.SIZE * (Math.sqrt(3)/2 * hex.q + Math.sqrt(3) * hex.r);
         return {x, y};
     },
 
-    // Convert pixel coordinates to hex coordinates
+    // pixel to hex
     fromPixel(x, y) {
         const q = (2/3 * x) / this.SIZE;
         const r = (-1/3 * x + Math.sqrt(3)/3 * y) / this.SIZE;
@@ -46,7 +47,7 @@ const HexGrid = {
         return {q: rx, r: rz};
     },
 
-    // Calculate visible hexes
+    // Is this hex in the viewport?
     getViewportHexes() {
         const hexes = [];
         const halfGrid = Math.floor(this.GRID_SIZE / 2);
@@ -59,7 +60,7 @@ const HexGrid = {
         return hexes;
     },
 
-    // Add this method to check if a hex is passable
+    // Check if a hex is passable
     isPassable(hex) {
         const halfGrid = Math.floor(this.GRID_SIZE / 2);
         return Math.abs(hex.q) <= halfGrid && Math.abs(hex.r) <= halfGrid;