1 files changed, 14 insertions, 28 deletions
diff --git a/html/rogue/js/fow.js b/html/rogue/js/fow.js
index e5852d3..7a2914e 100644
--- a/html/rogue/js/fow.js
+++ b/html/rogue/js/fow.js
@@ -53,38 +53,24 @@ const FogOfWar = {
         }
     },
     
+    getFogState(hex) {
+        if (!this.isRevealed(hex)) return Config.fog.states.HIDDEN;
+        if (!this.isVisible(hex)) return Config.fog.states.REVEALED;
+        return Config.fog.states.VISIBLE;
+    },
+    
     // Draw fog of war effect
     draw(ctx) {
         HexGrid.getViewportHexes().forEach(hex => {
-            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)';  // Completely opaque for unrevealed
-                this.drawHexShape(ctx, screenX, screenY);
-            } else if (!this.isVisible(hex)) {
-                ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';  // Semi-transparent for revealed but not visible
-                this.drawHexShape(ctx, screenX, screenY);
+            const fogState = this.getFogState(hex);
+            if (fogState.alpha > 0) {
+                const screen = HexGrid.toScreenCoordinates(hex, Camera);
+                ctx.fillStyle = fogState === Config.fog.states.HIDDEN ? 
+                    Config.colors.FOG.HIDDEN : 
+                    Config.colors.FOG.REVEALED;
+                HexGrid.drawHexPath(ctx, screen.x, screen.y, HexGrid.SIZE, 1);
+                ctx.fill();
             }
         });
-    },
-    
-    // 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 + padding) * Math.cos(angle));
-            const yPos = Math.round(y + (HexGrid.SIZE + padding) * 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