pathfinding updates

fixed clear function bugs and added maze generation

Author: furkanalk

docs/index.html

@@ -507,6 +507,7 @@ <h3 class="text-xl font-bold mb-2 text-indigo-500">Sorting Race</h3>
         <button id="resetBtn" class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600">Stop</button>
         <button id="clearBtn" class="px-4 py-2 bg-emerald-500 text-white rounded hover:bg-emerald-600">Clear</button>
         <button id="wallBtn"  class="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-800">Wall Mode: Off</button>
+        <button id="mazeBtn"  class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Maze</button>
         <button id="backTest" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">Back</button>
       </div>
 

docs/js/features/pathfinding/grid/grid.js

@@ -1,4 +1,4 @@
-  export const dirs = [
+export const dirs = [
   { dr: -1, dc: 0 }, { dr: 1, dc: 0 },
   { dr:  0, dc:-1 }, { dr: 0, dc: 1 },
 ];
@@ -12,19 +12,20 @@ let gridElement            = null;
 let wallMode               = false;
 let isMouseDown            = false;
 let visualizationCancelled = false;
-  
+
 document.addEventListener('mousedown', () => { if (wallMode) isMouseDown = true; });
 document.addEventListener('mouseup',   () => { isMouseDown = false; });
 
 function gridDelegated(e) {
   const cell = e.target.closest('.node');
   if (!cell) return;
   const [r, c] = cell.dataset.rc.split(',').map(Number);
-  if (e.type === 'click')           handleCellClick(r, c);
+  if (e.type === 'click')           
+    handleCellClick(r, c);
   else if (e.type === 'mouseenter' && wallMode && isMouseDown)
-                                    handleCellClick(r, c);
+    handleCellClick(r, c);
 }
-  
+
 /* SVG */
 const startSVG = `
   <svg viewBox="0 0 24 24">
@@ -73,7 +74,7 @@ export function createGrid({ skipFade = false } = {}) {
   gridElement.style.gridTemplateColumns = `repeat(${cols}, ${size}px)`;
   gridElement.style.gridAutoRows        = `${size}px`;
   gridElement.style.gap                 = `${gap}px`;
-  gridElement.innerHTML = '';              // clear old
+  gridElement.innerHTML = '';
 
   let r = 0;
   function addRow() {
@@ -85,9 +86,7 @@ export function createGrid({ skipFade = false } = {}) {
       frag.appendChild(div);
     }
     gridElement.appendChild(frag);
-    if (++r < rows) {
-      requestAnimationFrame(addRow);
-    }
+    if (++r < rows) requestAnimationFrame(addRow);
   }
   addRow();
 
@@ -105,19 +104,22 @@ export function createGrid({ skipFade = false } = {}) {
 /* CELLS */
 export function handleCellClick(r, c) {
   const cell = gridElement.querySelector(`[data-rc="${r},${c}"]`);
+  if (!cell) return;
 
   if (wallMode) {
     if (!walls[r][c]) {
       walls[r][c] = true;
       cell.classList.remove('node-unvisited', 'fade-in');
       cell.classList.add('wall-fill');
-      cell.addEventListener('animationend', () => {
+      cell.addEventListener('animationend', function handler() {
         cell.classList.remove('wall-fill');
         cell.classList.add('node-wall');
-      }, { once: true });
+        cell.removeEventListener('animationend', handler);
+      });
     } else {
       walls[r][c] = false;
-      cell.className = 'node node-unvisited';
+      cell.classList.remove('node-wall');
+      cell.classList.add('node-unvisited');
     }
     return;
   }
@@ -135,9 +137,14 @@ export const toggleWallMode = () => (wallMode = !wallMode);
 
 export function clearPath() {
   startNode = endNode = null;
+
   gridElement.querySelectorAll('.node').forEach(cell => {
+    // Remove any inserted SVG flags
+    cell.querySelectorAll('svg').forEach(svg => svg.remove());
     const [r, c] = cell.dataset.rc.split(',').map(Number);
-    if (!walls[r][c]) cell.className = 'node node-unvisited';
+    if (!walls[r][c]) {
+      cell.className = 'node node-unvisited';
+    }
   });
 }
 
@@ -153,31 +160,49 @@ export async function visualize(visited, path, speed = 1) {
   visualizationCancelled = false;
   const visitDelay = 45 / speed, pathDelay = 90 / speed;
 
+  // Visit animation
   for (const v of visited) {
     if (visualizationCancelled) return;
     const { row, col } = v;
     if (walls[row][col]) continue;
     const cell = gridElement.querySelector(`[data-rc="${row},${col}"]`);
-    if (!cell || cell.classList.contains('node-start')
-                || cell.classList.contains('node-end')) continue;
-    cell.className = 'node node-visited fill-swell';
+    if (!cell || cell.classList.contains('node-start') || cell.classList.contains('node-end')) continue;
+
+    cell.classList.remove('node-unvisited');
+    cell.classList.add('node-visited', 'fill-swell');
+    cell.addEventListener('animationend', function handler(e) {
+      if (e.animationName === 'circle-fill') {
+        cell.classList.remove('fill-swell');
+        cell.removeEventListener('animationend', handler);
+      }
+    });
+
     await new Promise(r => setTimeout(r, visitDelay));
   }
-  
-  // Insert flags
-  const sc = gridElement.querySelector(`[data-rc="${startNode.row},${startNode.col}"]`);
-  const ec = gridElement.querySelector(`[data-rc="${endNode.row},${endNode.col}"]`);
+
+  // Insert start/end flags
+  const sc = gridElement.querySelector(`[data-rc="${startNode?.row},${startNode?.col}"]`);
+  const ec = gridElement.querySelector(`[data-rc="${endNode?.row},${endNode?.col}"]`);
   if (sc && !sc.querySelector('svg')) sc.insertAdjacentHTML('beforeend', startSVG);
   if (ec && !ec.querySelector('svg')) ec.insertAdjacentHTML('beforeend', endSVG);
 
+  // Path animation
   for (const p of path) {
     if (visualizationCancelled) return;
     const { row, col } = p;
     if (walls[row][col]) continue;
     const cell = gridElement.querySelector(`[data-rc="${row},${col}"]`);
-    if (!cell || cell.classList.contains('node-start')
-                || cell.classList.contains('node-end')) continue;
-    cell.className = 'node node-shortest-path fill-swell-orange pulse';
+    if (!cell || cell.classList.contains('node-start') || cell.classList.contains('node-end')) continue;
+
+    cell.classList.remove('node-visited');
+    cell.classList.add('node-shortest-path', 'fill-swell-orange', 'pulse');
+    cell.addEventListener('animationend', function handler(e) {
+      if (e.animationName === 'circle-fill-orange') {
+        cell.classList.remove('fill-swell-orange', 'pulse');
+        cell.removeEventListener('animationend', handler);
+      }
+    });
+
     await new Promise(r => setTimeout(r, pathDelay));
   }
 
@@ -186,7 +211,55 @@ export async function visualize(visited, path, speed = 1) {
   setTimeout(() => gridElement.classList.remove('shake', 'glow'), 600);
 }
 
-/* LOAD */
+/* MAZE */
+document.addEventListener('DOMContentLoaded', () => {
+  const mazeBtn = document.getElementById('mazeBtn');
+  mazeBtn.addEventListener('click', () => {
+    visualizationCancelled = true;
+    startNode = endNode = null;
+    gridElement.querySelectorAll('svg').forEach(svg => svg.remove());
+
+    walls.forEach(row => row.fill(true));
+
+    const visited = Array.from({ length: rows }, () => Array(cols).fill(false));
+    const stack = [];
+    const start = { r: 0, c: 0 };
+    visited[start.r][start.c] = true;
+    walls[start.r][start.c] = false;
+    stack.push(start);
+
+    while (stack.length) {
+      const cur = stack[stack.length - 1];
+      const neighs = [];
+      for (const { dr, dc } of dirs) {
+        const nr = cur.r + dr * 2, nc = cur.c + dc * 2;
+        if (nr >= 0 && nr < rows && nc >= 0 && nc < cols && !visited[nr][nc]) {
+          neighs.push({ nr, nc, br: cur.r + dr, bc: cur.c + dc });
+        }
+      }
+      if (neighs.length) {
+        const rnd = neighs[Math.floor(Math.random() * neighs.length)];
+        visited[rnd.nr][rnd.nc] = true;
+        walls[rnd.br][rnd.bc] = false;
+        walls[rnd.nr][rnd.nc] = false;
+        stack.push({ r: rnd.nr, c: rnd.nc });
+      } else {
+        stack.pop();
+      }
+    }
+
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const cell = gridElement.querySelector(`[data-rc="${r},${c}"]`);
+        if (!cell) continue;
+        if (walls[r][c]) cell.className = 'node node-wall';
+        else            cell.className = 'node node-unvisited';
+      }
+    }
+  });
+});
+
+/* LOAD & RESIZE */
 window.addEventListener('resize', () => createGrid({ skipFade: true }));
 
 document.addEventListener('DOMContentLoaded', () => {