Attempting to use Zustand to update global specific cell state

A-Georgiou · A-Georgiou · commit 888d42453125 · 2024-07-16T18:21:12.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.2.1"
+    "react-icons": "^5.2.1",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
diff --git a/src/algorithms/pathfinding/BreadthFirstSearch.ts b/src/algorithms/pathfinding/BreadthFirstSearch.ts
@@ -42,7 +42,7 @@ export async function BreadthFirstSearch(maze: Cell[][], startCell: Cell, endCel
                 maze[neighbor.row][neighbor.col].prev = currentCell;
             }
         }
-        await sleep(10);
+        await sleep(0);
         setMaze([...maze]);
     }
 
diff --git a/src/algorithms/utils/SleepTime.ts b/src/algorithms/utils/SleepTime.ts
@@ -5,8 +5,26 @@ export class SleepTime {
         this.value = value;
     }
 }
-
+/*
 // Sleep function that returns a promise that resolves after a specified time
 export function sleep(ms: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, ms));
-}
+}
+*/
+
+
+// Helper function to wait for a specified duration using requestAnimationFrame
+export const sleep = (ms: number) => {
+    return new Promise<void>(resolve => {
+        const start = performance.now();
+        const frame = () => {
+            const now = performance.now();
+            if (now - start >= ms) {
+                resolve();
+            } else {
+                requestAnimationFrame(frame);
+            }
+        };
+        requestAnimationFrame(frame);
+    });
+};
diff --git a/src/components/MazeGrid.tsx b/src/components/MazeGrid.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import { Cell } from '../algorithms/utils/PathfindingUtils';
 import { HiChevronDoubleRight, HiOutlineFlag } from "react-icons/hi";
+import { useMazeStore } from '../hooks/useMazeStore';
 import '../styles/pathfinding.css';
 
-
 interface MazeGridProps {
-    maze: Cell[][],
-    handleMouseDown: (rowIndex: number, colIndex: number) => void,
-    handleMouseEnter: (rowIndex: number, colIndex: number) => void,
-    handleMouseUp: () => void
+    handleMouseDown: (rowIndex: number, colIndex: number) => void;
+    handleMouseEnter: (rowIndex: number, colIndex: number) => void;
+    handleMouseUp: () => void;
 }
 
-const MazeGrid: React.FC<MazeGridProps> = ({ maze, handleMouseDown, handleMouseEnter, handleMouseUp }) => {
+const MazeGrid: React.FC<MazeGridProps> = ({ handleMouseDown, handleMouseEnter, handleMouseUp }) => {
+    const { maze } = useMazeStore();
+
     return (
         <div onMouseUp={handleMouseUp}>
             {maze.map((row, rowIndex) => (
@@ -30,8 +30,8 @@ const MazeGrid: React.FC<MazeGridProps> = ({ maze, handleMouseDown, handleMouseE
                                 alignItems: 'center',
                                 justifyContent: 'center'
                             }}>
-                            {cell.start ? <HiChevronDoubleRight style={{ color: 'black', fontSize: '26px' }} /> : ''}
-                            {cell.end ? <HiOutlineFlag style={{ color: 'black', fontSize: '26px' }} /> : ''}
+                            {cell.start && <HiChevronDoubleRight style={{ color: 'black', fontSize: '26px' }} />}
+                            {cell.end && <HiOutlineFlag style={{ color: 'black', fontSize: '26px' }} />}
                         </div>
                     ))}
                 </div>
@@ -40,4 +40,4 @@ const MazeGrid: React.FC<MazeGridProps> = ({ maze, handleMouseDown, handleMouseE
     );
 };
 
-export default MazeGrid;
+export default MazeGrid;
diff --git a/src/hooks/useMazeStore.ts b/src/hooks/useMazeStore.ts
@@ -0,0 +1,140 @@
+// useMazeStore.ts
+import create from 'zustand';
+import { Cell } from '../algorithms/utils/PathfindingUtils';
+
+interface MazeState {
+    maze: Cell[][];
+    startNode: [number, number];
+    endNode: [number, number];
+    setMaze: (newMaze: Cell[][]) => void;
+    setCell: (row: number, col: number, updates: Partial<Cell>) => void;
+    generateMaze: (width: number, height: number) => void;
+    clearAttribute: (attribute: keyof Cell) => void;
+    clearLatestRun: () => void;
+    populateOptimalPath: (optimalPath: Cell[] | null) => void;
+    setStartPosition: (flatHeight: number, flatWidth: number) => void;
+    setEndPosition: (flatHeight: number, flatWidth: number) => void;
+    drawCell: (row: number, col: number, value: boolean) => void;
+    moveNode: (row: number, col: number, nodeType: 'start' | 'end') => void;
+}
+
+export const useMazeStore = create<MazeState>((set) => ({
+    maze: [],
+    startNode: [0, 0],
+    endNode: [1,1],
+    setMaze: (newMaze) => set({ maze: newMaze }),
+    setCell: (row, col, updates) => {
+        set((state) => {
+            const newMaze = state.maze.map((r, i) =>
+                i === row ? r.map((c, j) => (j === col ? { ...c, ...updates } : c)) : r
+            );
+            return { maze: newMaze };
+        });
+    },
+    generateMaze: (width, height) => {
+        let flatHeight = Math.floor((height - (26 + 64)) / 26);
+        if (flatHeight % 2 === 0) flatHeight += 1;
+        let flatWidth = Math.floor((width - 326) / 26);
+        if (flatWidth % 2 === 0) flatWidth += 1;
+
+        const newMaze = [];
+        for (let i = 0; i < flatHeight; i++) {
+            const row = [];
+            for (let j = 0; j < flatWidth; j++) {
+                row.push(new Cell(i, j));
+            }
+            newMaze.push(row);
+        }
+        set({ maze: newMaze });
+    },
+    clearAttribute: (attribute) => {
+        set((state) => ({
+            maze: state.maze.map((row) =>
+                row.map((cell) => ({ ...cell, [attribute]: false }))
+            ),
+        }));
+    },
+    clearLatestRun: () => {
+        set((state) => {
+            const clearedMaze = state.maze.map((row) =>
+                row.map((cell) => ({ ...cell, visited: false, finalPath: false }))
+            );
+            return { maze: clearedMaze };
+        });
+    },
+    populateOptimalPath: (optimalPath) => {
+        if (!optimalPath) {
+            return;
+        }
+        const delay = 50; // Delay in milliseconds between each update
+        const updateCell = (index: number) => {
+            if (index >= optimalPath.length) {
+                return;
+            }
+
+            set((state) => {
+                const newMaze = state.maze.map((row) =>
+                    row.map((cell) => ({ ...cell }))
+                );
+                newMaze[optimalPath[index].row][optimalPath[index].col].finalPath = true;
+                return { maze: newMaze };
+            });
+
+            // Schedule the next update with delay
+            requestAnimationFrame(() =>
+                setTimeout(() => updateCell(index + 1), delay)
+            );
+        };
+
+        updateCell(0);
+    },
+    setStartPosition: (flatHeight, flatWidth) => {
+        set((state) => {
+            const rowIndex = Math.floor(flatHeight / 2);
+            const colIndex = Math.floor(flatWidth / 4);
+            const newMaze = state.maze.map((row, i) =>
+                i === rowIndex ? row.map((cell, j) => (j === colIndex ? { ...cell, start: true } : cell)) : row
+            );
+            return { maze: newMaze, startNode: [rowIndex, colIndex] };
+        });
+    },
+    setEndPosition: (flatHeight, flatWidth) => {
+        set((state) => {
+            const rowIndex = Math.floor(flatHeight / 2);
+            const colIndex = Math.floor(flatWidth * 3 / 4);
+            const newMaze = state.maze.map((row, i) =>
+                i === rowIndex ? row.map((cell, j) => (j === colIndex ? { ...cell, end: true } : cell)) : row
+            );
+            return { maze: newMaze, endNode: [rowIndex, colIndex] };
+        });
+    },
+    drawCell: (row, col, value) => {
+        set((state) => {
+            const newMaze = state.maze.map((r, i) =>
+                i === row ? r.map((c, j) => (j === col ? { ...c, wall: value } : c)) : r
+            );
+            return { maze: newMaze };
+        });
+    },
+    moveNode: (row, col, nodeType) => {
+        set((state) => {
+            const newMaze = state.maze.map((r, i) =>
+                r.map((c) => {
+                    if (nodeType === 'start' && c.start) {
+                        return { ...c, start: false };
+                    }
+                    if (nodeType === 'end' && c.end) {
+                        return { ...c, end: false };
+                    }
+                    if (i === row && c.col === col) {
+                        return { ...c, [nodeType]: true };
+                    }
+                    return c;
+                })
+            );
+            return nodeType === 'start'
+                ? { maze: newMaze, startNode: [row, col] }
+                : { maze: newMaze, endNode: [row, col] };
+        });
+    },
+}));
diff --git a/src/pages/PathfindingVisualiser.tsx b/src/pages/PathfindingVisualiser.tsx

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ export async function BreadthFirstSearch(maze: Cell[][], startCell: Cell, endCel`
`42`	`42`	`maze[neighbor.row][neighbor.col].prev = currentCell;`
`43`	`43`	`}`
`44`	`44`	`}`
`45`		`- await sleep(10);`
	`45`	`+ await sleep(0);`
`46`	`46`	`setMaze([...maze]);`
`47`	`47`	`}`
`48`	`48`