1 files changed, 20 insertions, 21 deletions
diff --git a/html/rogue/js/fow.js b/html/rogue/js/fow.js
index 77f55c0..291c862 100644
--- a/html/rogue/js/fow.js
+++ b/html/rogue/js/fow.js
@@ -53,33 +53,32 @@ 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) {
-        // 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;
+            const fogState = this.getFogState(hex);
+            if (fogState.alpha > 0) {
+                const screen = HexGrid.toScreenCoordinates(hex, Camera);
                 
-                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 fill
+                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();
                 
-                // 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);
-                    }
+                // Draw grid lines only for revealed but not visible hexes
+                if (fogState === Config.fog.states.REVEALED) {
+                    ctx.strokeStyle = Config.colors.FOG.GRID_DIM;
+                    ctx.lineWidth = 1;
+                    ctx.stroke();
                 }
-                ctx.closePath();
-                ctx.fill();
             }
         });
     }