*

1 files changed, 28 insertions, 2 deletions

diff --git a/html/life.html b/html/life.html
index 9d2ecf3..7d93a0b 100644
--- a/html/life.html
+++ b/html/life.html
@@ -390,11 +390,37 @@
         let lastRenderTime = 0;
         let isPlaying = false;
 
-        function drawGrid() {
+        canvas.addEventListener('mousemove', handleMouseMove);
+        canvas.addEventListener('mouseout', handleMouseOut);
+
+        let hoveredCell = null; // stores what cell is hovered over
+
+        // Find the cell being hovered hover and and redraw the grid
+        function handleMouseMove(event) {
+            const rect = canvas.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            const gridX = Math.floor(x / cellSize);
+            const gridY = Math.floor(y / cellSize);
+            hoveredCell = { x: gridX, y: gridY };
+            drawGrid(hoveredCell); // Redraw grid with highlighted cell
+        }
+
+        // remove highlight when mouse leaves the cell
+        function handleMouseOut() {
+            hoveredCell = null;
+            drawGrid(); 
+        }
+
+        function drawGrid(hoveredCell = null) {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             for (let x = 0; x < game.rows; x++) {
                 for (let y = 0; y < game.cols; y++) {
-                    ctx.fillStyle = game.grid[x][y] ? '#2d2d2d' : 'beige';
+                    if (hoveredCell && hoveredCell.x === y && hoveredCell.y === x) {
+                        ctx.fillStyle = '#74FFEF';
+                    } else {
+                        ctx.fillStyle = game.grid[x][y] ? '#2d2d2d' : 'beige';
+                    }
                     ctx.fillRect(y * cellSize, x * cellSize, cellSize, cellSize);
                     ctx.strokeStyle = 'lightgrey';
                     ctx.strokeRect(y * cellSize, x * cellSize, cellSize, cellSize);