1 files changed, 43 insertions, 41 deletions

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) {