1 files changed, 8 insertions, 20 deletions
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();