5 files changed, 102 insertions, 3 deletions
diff --git a/html/rogue/index.html b/html/rogue/index.html
index 46a49e3..d677431 100644
--- a/html/rogue/index.html
+++ b/html/rogue/index.html
@@ -22,6 +22,7 @@
     <script src="js/config.js"></script>
     <script src="js/hexGrid.js"></script>
     <script src="js/camera.js"></script>
+    <script src="js/fogOfWar.js"></script>
     <script src="js/player.js"></script>
     <script src="js/game.js"></script>
 </body>
diff --git a/html/rogue/js/config.js b/html/rogue/js/config.js
index 66c4916..cabc068 100644
--- a/html/rogue/js/config.js
+++ b/html/rogue/js/config.js
@@ -26,7 +26,8 @@ const Config = {
 
     player: {
         MOVE_SPEED: 0.1,
-        SIZE_RATIO: 1/3 // The player's size relative to the hex size
+        SIZE_RATIO: 1/3,
+        VISION_RANGE: 3 // Number of hexes the player can see
     },
 
     camera: {
diff --git a/html/rogue/js/fogOfWar.js b/html/rogue/js/fogOfWar.js
new file mode 100644
index 0000000..cb11938
--- /dev/null
+++ b/html/rogue/js/fogOfWar.js
@@ -0,0 +1,87 @@
+const FogOfWar = {
+    // Set of revealed hex coordinates (as strings)
+    revealed: new Set(),
+    
+    // Configuration
+    VISION_RANGE: Config.player.VISION_RANGE,
+    
+    // Initialize fog of war
+    init() {
+        this.revealed.clear();
+        this.updateVisibility(player.position);
+    },
+    
+    // Convert hex to string key for Set storage
+    hexToKey(hex) {
+        return `${hex.q},${hex.r}`;
+    },
+    
+    // Check if a hex is currently visible
+    isVisible(hex) {
+        const playerPos = player.getCurrentPosition();
+        const distance = this.getHexDistance(hex, playerPos);
+        return distance <= this.VISION_RANGE;
+    },
+    
+    // Check if a hex has been revealed
+    isRevealed(hex) {
+        return this.revealed.has(this.hexToKey(hex));
+    },
+    
+    // Calculate distance between two hexes
+    getHexDistance(a, b) {
+        return Math.max(
+            Math.abs(a.q - b.q),
+            Math.abs(a.r - b.r),
+            Math.abs((a.q + a.r) - (b.q + b.r))
+        );
+    },
+    
+    // Update visibility based on player position
+    updateVisibility(center) {
+        // Get all hexes within vision range
+        for (let q = -this.VISION_RANGE; q <= this.VISION_RANGE; q++) {
+            for (let r = -this.VISION_RANGE; r <= this.VISION_RANGE; r++) {
+                const hex = {
+                    q: center.q + q,
+                    r: center.r + r
+                };
+                
+                if (this.getHexDistance(center, hex) <= this.VISION_RANGE) {
+                    this.revealed.add(this.hexToKey(hex));
+                }
+            }
+        }
+    },
+    
+    // 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();
+            }
+        });
+    }
+}; 
\ No newline at end of file
diff --git a/html/rogue/js/game.js b/html/rogue/js/game.js
index d5891d7..5ce9f1e 100644
--- a/html/rogue/js/game.js
+++ b/html/rogue/js/game.js
@@ -24,6 +24,7 @@ function init() {
     state.canvas.addEventListener('click', handleClick);
     
     requestAnimationFrame(gameLoop);
+    FogOfWar.init();
 }
 
 function drawHex(ctx, x, y, hex) {
@@ -82,6 +83,13 @@ function gameLoop(currentTime) {
     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
     HexGrid.getViewportHexes().forEach(hex => {
         const pixel = HexGrid.toPixel(hex);
         drawHex(state.ctx, pixel.x, pixel.y, hex);
@@ -89,6 +97,9 @@ function gameLoop(currentTime) {
     
     player.draw(state.ctx, HexGrid.toPixel.bind(HexGrid), Camera, HexGrid.SIZE);
     
+    // Draw fog of war last
+    FogOfWar.draw(state.ctx);
+    
     requestAnimationFrame(gameLoop);
 }
 
diff --git a/html/rogue/js/player.js b/html/rogue/js/player.js
index e35db31..22e57e0 100644
--- a/html/rogue/js/player.js
+++ b/html/rogue/js/player.js
@@ -99,12 +99,11 @@ const player = {
             this.movementProgress += this.moveSpeed;
             
             if (this.movementProgress >= 1) {
-                // Movement to current target complete
                 this.position = this.target;
                 this.target = null;
                 this.movementProgress = 0;
+                this.hasMoved = true;
                 
-                // If there are more points in the path, move to the next one
                 if (this.path.length > 0) {
                     this.target = this.path.shift();
                     this.movementProgress = 0;