*

5 files changed, 82 insertions, 58 deletions

diff --git a/html/rogue/js/config.js b/html/rogue/js/config.js
index 50687ba..d2c0b36 100644
--- a/html/rogue/js/config.js
+++ b/html/rogue/js/config.js
@@ -3,7 +3,23 @@ const Config = {
         BACKGROUND: 'rgba(135, 207, 235, 1)',
         GRID: 'rgba(0, 0, 0, 0.25)',
         PLAYER: 'red',
-        HEX_FILL: '#ffffff'
+        HEX_FILL: '#ffffff',
+        FOG: {
+            HIDDEN: 'rgba(0, 0, 0, 1)',
+            REVEALED: 'rgba(0, 0, 0, 0.5)',
+            GRID_DIM: 'rgba(255, 255, 255, 1)'  // For grid lines in revealed but not visible hexes
+        },
+        UI: {
+            INVENTORY: {
+                BACKGROUND: 'rgba(0, 0, 0, 0.7)',
+                WINDOW: '#ffffff',
+                TEXT: '#000000'
+            }
+        },
+        ITEMS: {
+            COIN: '#FFD700',
+            GEM: '#50C878'
+        }
     },
     
     hex: {
@@ -45,10 +61,7 @@ const Config = {
             ITEM_FONT: '16px Arial',
             ITEM_SPACING: 30,
             TITLE_OFFSET: 20,
-            ITEMS_START_OFFSET: 60,
-            BACKGROUND_COLOR: 'rgba(0, 0, 0, 0.7)',
-            WINDOW_COLOR: '#ffffff',
-            TEXT_COLOR: '#000000'
+            ITEMS_START_OFFSET: 60
         }
     },
     
@@ -57,14 +70,20 @@ const Config = {
         types: {
             COIN: {
                 name: 'Coin',
-                color: '#FFD700',
                 size: 0.2
             },
             GEM: {
                 name: 'Gem',
-                color: '#50C878',
                 size: 0.25
             }
         }
+    },
+
+    fog: {
+        states: {
+            HIDDEN: { alpha: 1.0 },
+            REVEALED: { alpha: 0.5 },
+            VISIBLE: { alpha: 0 }
+        }
     }
 }; 
\ No newline at end of file
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
diff --git a/html/rogue/js/game.js b/html/rogue/js/game.js
index b57cb6d..973c33d 100644
--- a/html/rogue/js/game.js
+++ b/html/rogue/js/game.js
@@ -29,12 +29,10 @@ function init() {
 }
 
 function drawHex(ctx, x, y, hex) {
-    const screenX = x - Camera.x;
-    const screenY = y - Camera.y;
+    const screen = HexGrid.toScreenCoordinates(hex, Camera);
     
-    // Only draw if hex is visible on screen (with some padding)
-    if (screenX < -HexGrid.WIDTH || screenX > state.canvas.width + HexGrid.WIDTH ||
-        screenY < -HexGrid.HEIGHT || screenY > state.canvas.height + HexGrid.HEIGHT) {
+    // Only draw if hex is visible on screen (with padding)
+    if (!HexGrid.isInViewport(screen.x, screen.y, state.canvas)) {
         return;
     }
     
@@ -44,27 +42,17 @@ function drawHex(ctx, x, y, hex) {
     }
     
     // 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.lineTo(xPos, yPos);
-        }
-    }
-    ctx.closePath();
-
+    HexGrid.drawHexPath(ctx, screen.x, screen.y);
+    
+    // Fill hex
     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)';
+        ctx.strokeStyle = Config.colors.FOG.GRID_DIM;
     } else {
-        ctx.strokeStyle = HexGrid.COLOR;  // Normal grid color
+        ctx.strokeStyle = Config.colors.GRID;
     }
     ctx.lineWidth = 1;
     ctx.stroke();
diff --git a/html/rogue/js/hex.js b/html/rogue/js/hex.js
index 817d0a3..ab787f6 100644
--- a/html/rogue/js/hex.js
+++ b/html/rogue/js/hex.js
@@ -64,5 +64,36 @@ const HexGrid = {
     isPassable(hex) {
         const halfGrid = Math.floor(this.GRID_SIZE / 2);
         return Math.abs(hex.q) <= halfGrid && Math.abs(hex.r) <= halfGrid;
+    },
+
+    // Centralized hex drawing function
+    drawHexPath(ctx, x, y, size = this.SIZE, padding = 0) {
+        ctx.beginPath();
+        for (let i = 0; i < 6; i++) {
+            const angle = 2 * Math.PI / 6 * i;
+            const xPos = Math.round(x + (size + padding) * Math.cos(angle));
+            const yPos = Math.round(y + (size + padding) * Math.sin(angle));
+            if (i === 0) {
+                ctx.moveTo(xPos, yPos);
+            } else {
+                ctx.lineTo(xPos, yPos);
+            }
+        }
+        ctx.closePath();
+    },
+
+    toScreenCoordinates(hex, camera) {
+        const pixel = this.toPixel(hex);
+        return {
+            x: Math.round(pixel.x - camera.x),
+            y: Math.round(pixel.y - camera.y)
+        };
+    },
+
+    isInViewport(screenX, screenY, canvas) {
+        return !(screenX < -this.WIDTH || 
+                screenX > canvas.width + this.WIDTH ||
+                screenY < -this.HEIGHT || 
+                screenY > canvas.height + this.HEIGHT);
     }
 }; 
\ No newline at end of file
diff --git a/html/rogue/js/inventory-ui.js b/html/rogue/js/inventory-ui.js
index a5c7c3f..0970e71 100644
--- a/html/rogue/js/inventory-ui.js
+++ b/html/rogue/js/inventory-ui.js
@@ -21,7 +21,7 @@ const InventoryUI = {
         if (!this.isOpen) return;
         
         // Draw semi-transparent background
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+        ctx.fillStyle = Config.colors.UI.INVENTORY.BACKGROUND;
         ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
         
         // Draw inventory window
@@ -32,11 +32,11 @@ const InventoryUI = {
         const y = (state.canvas.height - height) / 2;
         
         // Draw window background
-        ctx.fillStyle = '#ffffff';
+        ctx.fillStyle = Config.colors.UI.INVENTORY.WINDOW;
         ctx.fillRect(x, y, width, height);
         
         // Draw title
-        ctx.fillStyle = '#000000';
+        ctx.fillStyle = Config.colors.UI.INVENTORY.TEXT;
         ctx.font = '20px Arial';
         ctx.fillText('Inventory', x + padding, y + padding + 20);