*

2 files changed, 30 insertions, 26 deletions

diff --git a/html/rogue/js/fow.js b/html/rogue/js/fow.js
index e3a1c15..e5852d3 100644
--- a/html/rogue/js/fow.js
+++ b/html/rogue/js/fow.js
@@ -72,11 +72,12 @@ const FogOfWar = {
     
     // Helper method to draw hex shape
     drawHexShape(ctx, x, y) {
+        const padding = 1; // Add 1 pixel padding to prevent gaps
         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));
+            const xPos = Math.round(x + (HexGrid.SIZE + padding) * Math.cos(angle));
+            const yPos = Math.round(y + (HexGrid.SIZE + padding) * Math.sin(angle));
             if (i === 0) {
                 ctx.moveTo(xPos, yPos);
             } else {
diff --git a/html/rogue/js/game.js b/html/rogue/js/game.js
index f84d670..b57cb6d 100644
--- a/html/rogue/js/game.js
+++ b/html/rogue/js/game.js
@@ -38,33 +38,36 @@ function drawHex(ctx, x, y, hex) {
         return;
     }
     
-    // Only draw hex if it's been revealed
-    if (FogOfWar.isRevealed(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.fillStyle = Config.colors.HEX_FILL;
-        ctx.fill();
-        
-        // Draw border with appropriate color based on visibility
-        if (!FogOfWar.isVisible(hex)) {
-            ctx.strokeStyle = 'rgba(0, 0, 0, 0.25)';
+    // Skip drawing completely if hex hasn't been revealed
+    if (!FogOfWar.isRevealed(hex)) {
+        return;
+    }
+    
+    // Draw the 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.strokeStyle = HexGrid.COLOR;  // Normal grid color
+            ctx.lineTo(xPos, yPos);
         }
-        ctx.lineWidth = 1;
-        ctx.stroke();
     }
+    ctx.closePath();
+
+    ctx.fillStyle = Config.colors.HEX_FILL;
+    ctx.fill();
+    
+    // Draw border with appropriate color based on visibility
+    if (!FogOfWar.isVisible(hex)) {
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.25)';
+    } else {
+        ctx.strokeStyle = HexGrid.COLOR;  // Normal grid color
+    }
+    ctx.lineWidth = 1;
+    ctx.stroke();
 }
 
 function gameLoop(currentTime) {