Fix up breadth first search

Author: A-Georgiou

src/algorithms/pathfinding/BreadthFirstSearch.ts

@@ -1,22 +1,21 @@
 import { Cell } from "../utils/PathfindingUtils";
 
 // Define a function to perform breadth-first search on the maze
-function BreadthFirstSearch(maze: Cell[][], startRow: number, startCol: number, endRow: number, endCol: number): Cell[][] | null {
+export function BreadthFirstSearch(maze: Cell[][], startCell: Cell, endCell: Cell): boolean[][] | null {
     const queue: Cell[] = [];
-    const visited: Cell[][] = [];
+    const visited: boolean[][] = [];
 
     // Initialize the visited array
     for (let row = 0; row < maze.length; row++) {
         visited[row] = [];
         for (let col = 0; col < maze[row].length; col++) {
-            visited[row][col] = new Cell(row, col);
-            visited[row][col].wall = maze[row][col].wall;
+            visited[row][col] = true;
         }
     }
 
     // Add the start cell to the queue
-    queue.push(maze[startRow][startCol]);
-    visited[startRow][startCol].visited = true;
+    queue.push(startCell);
+    visited[startCell.row][startCell.col] = true;
 
     // Perform breadth-first search
     while (queue.length > 0) {
@@ -27,7 +26,7 @@ function BreadthFirstSearch(maze: Cell[][], startRow: number, startCol: number,
         }
 
         // Check if we have reached the end cell
-        if (currentCell.row === endRow && currentCell.col === endCol) {
+        if (currentCell.row === endCell.row && currentCell.col === endCell.col) {
             return visited;
         }
 
@@ -36,9 +35,9 @@ function BreadthFirstSearch(maze: Cell[][], startRow: number, startCol: number,
 
         // Visit each neighbor
         for (const neighbor of neighbors) {
-            if (!visited[neighbor.row][neighbor.col].visited) {
+            if (!visited[neighbor.row][neighbor.col]) {
                 queue.push(neighbor);
-                visited[neighbor.row][neighbor.col].visited = true;
+                visited[neighbor.row][neighbor.col] = true;
             }
         }
     }

src/pages/PathfindingVisualiser.tsx

@@ -3,6 +3,7 @@ import useWindowDimensions from '../utils/useWindowDimensions';
 import '../styles/pathfinding.css';
 import { HiChevronRight } from "react-icons/hi";
 import { Cell } from '../algorithms/utils/PathfindingUtils';
+import { BreadthFirstSearch } from '../algorithms/pathfinding/BreadthFirstSearch.ts';
 
 const PathfindingVisualiser: React.FC = () => {
     const { width = 0, height = 0 } = useWindowDimensions();
@@ -109,30 +110,38 @@ const PathfindingVisualiser: React.FC = () => {
         });
     };
 
+    function triggerBFS(){
+        let visited = BreadthFirstSearch(maze, maze[startNode[0]][startNode[1]], maze[endNode[0]][endNode[1]]);
+        console.log(visited);
+    }
+
     return (
-        <div onMouseUp={handleMouseUp}>
-            {maze.map((row, rowIndex) => (
-                <div key={rowIndex} className="pathfinding-row" id={'row-' + rowIndex}>
-                    {row.map((cell, colIndex) => (
-                        <div
-                            key={colIndex}
-                            onMouseDown={() => handleMouseDown(rowIndex, colIndex)}
-                            onMouseEnter={() => handleMouseEnter(rowIndex, colIndex)}
-                            style={{
-                                width: '26px',
-                                height: '26px',
-                                backgroundColor: cell.start ? 'lightblue' : ( cell.end ? 'lightgreen' :  (cell.wall ? 'black' : 'white')),
-                                border: '.5px solid lightblue',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center'
-                            }}>
-                            {cell.start ? <HiChevronRight style={{color: 'black', fontSize: '26px'}} /> : ''}
-                            {cell.end ? <HiChevronRight style={{color: 'black', fontSize: '26px', transform: 'rotate(180deg)'}} /> : ''}
-                        </div>
-                    ))}
-                </div>
-            ))}
+        <div>
+            <div onMouseUp={handleMouseUp}>
+                {maze.map((row, rowIndex) => (
+                    <div key={rowIndex} className="pathfinding-row" id={'row-' + rowIndex}>
+                        {row.map((cell, colIndex) => (
+                            <div
+                                key={colIndex}
+                                onMouseDown={() => handleMouseDown(rowIndex, colIndex)}
+                                onMouseEnter={() => handleMouseEnter(rowIndex, colIndex)}
+                                style={{
+                                    width: '26px',
+                                    height: '26px',
+                                    backgroundColor: cell.start ? 'lightblue' : ( cell.end ? 'lightgreen' :  ( cell.visited ? 'orange' : (cell.wall ? 'black' : 'white'))),
+                                    border: '.5px solid lightblue',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center'
+                                }}>
+                                {cell.start ? <HiChevronRight style={{color: 'black', fontSize: '26px'}} /> : ''}
+                                {cell.end ? <HiChevronRight style={{color: 'black', fontSize: '26px', transform: 'rotate(180deg)'}} /> : ''}
+                            </div>
+                        ))}
+                    </div>
+                ))}
+            </div>
+            <button onClick={() => triggerBFS()}></button>
         </div>
     );
 };