*

2 files changed, 81 insertions, 78 deletions

diff --git a/html/broughlike/broughlike.js b/html/broughlike/broughlike.js
index 585ae66..87718f3 100644
--- a/html/broughlike/broughlike.js
+++ b/html/broughlike/broughlike.js
@@ -1,14 +1,4 @@
-import { CONFIG, COLORS } from './config.js';
-
-// FIXME: canvas, ctx, and tileSize are all regularly accessed. 
-// I'd like to refactor this to be more modular so that these can all be contained to the CONFIG object or something similar.
-let { ctx, canvas, tileSize } = initializeCanvasContext();
-function initializeCanvasContext() {
-    const canvas = document.getElementById('gameCanvas');
-    const ctx = canvas.getContext('2d');
-    let tileSize = canvas.width / CONFIG.GRID_SIZE;
-    return { ctx, canvas, tileSize };
-}
+import { CONFIG, COLORS, CANVAS } from './config.js';
 
 const DEBUG = false;
 
@@ -331,59 +321,59 @@ function isReachable(startX, startY, targetX, targetY) {
 }
 
 function drawGrid() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = COLORS.grid;
+    CANVAS.ctx.clearRect(0, 0, CANVAS.canvas.width, CANVAS.canvas.height);
+    CANVAS.ctx.lineWidth = 2;
+    CANVAS.ctx.strokeStyle = COLORS.grid;
     for (let row = 0; row < CONFIG.GRID_SIZE; row++) {
         for (let col = 0; col < CONFIG.GRID_SIZE; col++) {
-            ctx.strokeRect(col * tileSize, row * tileSize, tileSize, tileSize);
+            CANVAS.ctx.strokeRect(col * CANVAS.tileSize, row * CANVAS.tileSize, CANVAS.tileSize, CANVAS.tileSize);
         }
     }
 }
 
 function drawExit() {
-    const x = exit.x * tileSize + tileSize / 2;
-    const y = exit.y * tileSize + tileSize / 2;
-    ctx.beginPath();
-    ctx.moveTo(x, y - tileSize / 3);
-    ctx.lineTo(x + tileSize / 3, y + tileSize / 3);
-    ctx.lineTo(x - tileSize / 3, y + tileSize / 3);
-    ctx.closePath();
-    ctx.fillStyle = COLORS.exit;
-    ctx.fill();
+    const x = exit.x * CANVAS.tileSize + CANVAS.tileSize / 2;
+    const y = exit.y * CANVAS.tileSize + CANVAS.tileSize / 2;
+    CANVAS.ctx.beginPath();
+    CANVAS.ctx.moveTo(x, y - CANVAS.tileSize / 3);
+    CANVAS.ctx.lineTo(x + CANVAS.tileSize / 3, y + CANVAS.tileSize / 3);
+    CANVAS.ctx.lineTo(x - CANVAS.tileSize / 3, y + CANVAS.tileSize / 3);
+    CANVAS.ctx.closePath();
+    CANVAS.ctx.fillStyle = COLORS.exit;
+    CANVAS.ctx.fill();
 }
 
 function drawWalls() {
-    ctx.fillStyle = COLORS.walls;
+    CANVAS.ctx.fillStyle = COLORS.walls;
     walls.forEach(wall => {
-        ctx.fillRect(wall.x * tileSize, wall.y * tileSize, tileSize, tileSize);
+        CANVAS.ctx.fillRect(wall.x * CANVAS.tileSize, wall.y * CANVAS.tileSize, CANVAS.tileSize, CANVAS.tileSize);
     });
 }
 
 function drawItems() {
     items.forEach(item => {
-        const x = item.x * tileSize + tileSize / 2;
-        const y = item.y * tileSize + tileSize / 2;
-        ctx.fillStyle = item.type === 'diamond' ? COLORS.diamond : COLORS.pentagon;
-        ctx.beginPath();
+        const x = item.x * CANVAS.tileSize + CANVAS.tileSize / 2;
+        const y = item.y * CANVAS.tileSize + CANVAS.tileSize / 2;
+        CANVAS.ctx.fillStyle = item.type === 'diamond' ? COLORS.diamond : COLORS.pentagon;
+        CANVAS.ctx.beginPath();
         if (item.type === 'diamond') {
-            ctx.moveTo(x, y - tileSize / 4);
-            ctx.lineTo(x + tileSize / 4, y);
-            ctx.lineTo(x, y + tileSize / 4);
-            ctx.lineTo(x - tileSize / 4, y);
+            CANVAS.ctx.moveTo(x, y - CANVAS.tileSize / 4);
+            CANVAS.ctx.lineTo(x + CANVAS.tileSize / 4, y);
+            CANVAS.ctx.lineTo(x, y + CANVAS.tileSize / 4);
+            CANVAS.ctx.lineTo(x - CANVAS.tileSize / 4, y);
         } else {
             const sides = 5;
-            const radius = tileSize / 4;
+            const radius = CANVAS.tileSize / 4;
             for (let i = 0; i < sides; i++) {
                 const angle = (i * 2 * Math.PI) / sides - Math.PI / 2;
                 const pointX = x + radius * Math.cos(angle);
                 const pointY = y + radius * Math.sin(angle);
-                if (i === 0) ctx.moveTo(pointX, pointY);
-                else ctx.lineTo(pointX, pointY);
+                if (i === 0) CANVAS.ctx.moveTo(pointX, pointY);
+                else CANVAS.ctx.lineTo(pointX, pointY);
             }
         }
-        ctx.closePath();
-        ctx.fill();
+        CANVAS.ctx.closePath();
+        CANVAS.ctx.fill();
     });
 }
 
@@ -391,54 +381,54 @@ function drawCharacterBorder(x, y, radius, damageTaken) {
     const dashLength = 5;
     const gapLength = Math.max(1, damageTaken * 2); // More damage, larger gaps
 
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = '#2d2d2d';
-    ctx.setLineDash([dashLength, gapLength]);
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI);
-    ctx.stroke();
-    ctx.setLineDash([]); // Reset to a solid line
+    CANVAS.ctx.lineWidth = 2;
+    CANVAS.ctx.strokeStyle = '#2d2d2d';
+    CANVAS.ctx.setLineDash([dashLength, gapLength]);
+    CANVAS.ctx.beginPath();
+    CANVAS.ctx.arc(x, y, radius, 0, 2 * Math.PI);
+    CANVAS.ctx.stroke();
+    CANVAS.ctx.setLineDash([]); // Reset to a solid line
 }
 
 function drawEnemies() {
     enemies.forEach(enemy => {
-        const x = enemy.x * tileSize + tileSize / 2;
-        const y = enemy.y * tileSize + tileSize / 2;
+        const x = enemy.x * CANVAS.tileSize + CANVAS.tileSize / 2;
+        const y = enemy.y * CANVAS.tileSize + CANVAS.tileSize / 2;
         const opacity = enemy.health / CONFIG.MAX_ENEMY_HEALTH; // Opacity based on health
-        const radius = tileSize / 3;
+        const radius = CANVAS.tileSize / 3;
         const damageTaken = CONFIG.MAX_ENEMY_HEALTH - enemy.health;
 
-        ctx.beginPath();
-        ctx.arc(x, y, radius, 0, 2 * Math.PI);
-        ctx.fillStyle = `${enemy.color}${opacity})`;
-        ctx.fill();
+        CANVAS.ctx.beginPath();
+        CANVAS.ctx.arc(x, y, radius, 0, 2 * Math.PI);
+        CANVAS.ctx.fillStyle = `${enemy.color}${opacity})`;
+        CANVAS.ctx.fill();
 
         drawCharacterBorder(x, y, radius, damageTaken);
     });
 }
 
 function drawPlayer() {
-    const x = player.x * tileSize + tileSize / 2;
-    const y = player.y * tileSize + tileSize / 2;
-    const radius = tileSize / 3;
+    const x = player.x * CANVAS.tileSize + CANVAS.tileSize / 2;
+    const y = player.y * CANVAS.tileSize + CANVAS.tileSize / 2;
+    const radius = CANVAS.tileSize / 3;
     const playerOpacity = player.health / CONFIG.PLAYER_HEALTH; // Opacity based on health
-    ctx.beginPath();
+    CANVAS.ctx.beginPath();
     for (let i = 0; i < 6; i++) {
         const angle = (Math.PI / 3) * i;
         const hexX = x + radius * Math.cos(angle);
         const hexY = y + radius * Math.sin(angle);
         if (i === 0) {
-            ctx.moveTo(hexX, hexY);
+            CANVAS.ctx.moveTo(hexX, hexY);
         } else {
-            ctx.lineTo(hexX, hexY);
+            CANVAS.ctx.lineTo(hexX, hexY);
         }
     }
-    ctx.closePath();
-    ctx.fillStyle = `${COLORS.player}${playerOpacity})`;
-    ctx.fill();
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = '#2d2d2d';
-    ctx.stroke();
+    CANVAS.ctx.closePath();
+    CANVAS.ctx.fillStyle = `${COLORS.player}${playerOpacity})`;
+    CANVAS.ctx.fill();
+    CANVAS.ctx.lineWidth = 2;
+    CANVAS.ctx.strokeStyle = '#2d2d2d';
+    CANVAS.ctx.stroke();
 }
 
 function drawCombatDots() {
@@ -446,11 +436,11 @@ function drawCombatDots() {
         const [cellX, cellY] = key.split(',').map(Number);
         const dots = combatDots[key];
         dots.forEach(dot => {
-            ctx.beginPath();
-            ctx.arc(cellX * tileSize + dot.x, cellY * tileSize + dot.y, 2, 0, Math.PI * 2);
-            ctx.fillStyle = dot.color;
-            ctx.fill();
-            ctx.closePath();
+            CANVAS.ctx.beginPath();
+            CANVAS.ctx.arc(cellX * CANVAS.tileSize + dot.x, cellY * CANVAS.tileSize + dot.y, 2, 0, Math.PI * 2);
+            CANVAS.ctx.fillStyle = dot.color;
+            CANVAS.ctx.fill();
+            CANVAS.ctx.closePath();
         });
     }
 }
@@ -492,8 +482,8 @@ function addCombatDots(x, y, color) {
             }
             for (let i = 0; i < CONFIG.DOTS_PER_HIT; i++) {
                 combatDots[key].push({
-                    x: Math.random() * tileSize,
-                    y: Math.random() * tileSize,
+                    x: Math.random() * CANVAS.tileSize,
+                    y: Math.random() * CANVAS.tileSize,
                     color: color
                 });
             }
@@ -749,13 +739,13 @@ document.addEventListener('keydown', (e) => {
 let touchStartX = 0;
 let touchStartY = 0;
 
-canvas.addEventListener('touchstart', (e) => {
+CANVAS.canvas.addEventListener('touchstart', (e) => {
     e.preventDefault(); // Prevent scrolling on touchstart
     touchStartX = e.touches[0].clientX;
     touchStartY = e.touches[0].clientY;
 });
 
-canvas.addEventListener('touchend', (e) => {
+CANVAS.canvas.addEventListener('touchend', (e) => {
     e.preventDefault(); // Prevent scrolling on touchend
     const touchEndX = e.changedTouches[0].clientX;
     const touchEndY = e.changedTouches[0].clientY;
@@ -782,10 +772,10 @@ canvas.addEventListener('touchend', (e) => {
 }, { passive: false }); // TIL you can use passive set to false to help make preventDefault actually work? Feels like superstition
 
 const resizeCanvas = () => {
-    const rect = canvas.getBoundingClientRect();
-    canvas.width = rect.width;
-    canvas.height = rect.height;
-    tileSize = canvas.width / CONFIG.GRID_SIZE; // Update tile size based on canvas dimensions
+    const rect = CANVAS.canvas.getBoundingClientRect();
+    CANVAS.canvas.width = rect.width;
+    CANVAS.canvas.height = rect.height;
+    CANVAS.tileSize = CANVAS.updateTileSize(); // Update tile size based on canvas dimensions
     render();
 };
 
diff --git a/html/broughlike/config.js b/html/broughlike/config.js
index bd95035..8776b2f 100644
--- a/html/broughlike/config.js
+++ b/html/broughlike/config.js
@@ -30,3 +30,16 @@ export const CONFIG = {
     ITEMS_MAX: 3,
     DOTS_PER_HIT: 7
 };
+
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+const tileSize = canvas.width / CONFIG.GRID_SIZE;
+
+export const CANVAS = {
+    ctx,
+    canvas,
+    tileSize,
+    updateTileSize() {
+        return canvas.width / CONFIG.GRID_SIZE;
+    }
+};