Merge pull request #10 from Ba6ySHark/Ba6ySHark-patch-10

Patch 10
Ba6ySHark · Sep 22, 2023 · fb45609 · fb45609
2 parents a01befc + 5b42362
commit fb45609
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 17 deletions.
diff --git a/src/App.css b/src/App.css
@@ -26,7 +26,7 @@ body {
     z-index: 999;
 }
 
-.features--algos {
+.featured--algos {
     display: block;
 }
 
@@ -50,6 +50,46 @@ body {
     position: absolute;
     display: block;
 }
+
+.speed--settings {
+    display: block;
+}
+
+.speed--settings:hover {
+    .speeds--list {
+        position: absolute;
+        display: block;
+        margin: 0;
+    }
+}
+
+.speed--settings h3 {
+    line-height: 50px;
+}
+
+.speeds--list {
+    display: none;
+}
+
+.wall--patterns {
+    display: block;
+}
+
+.wall--patterns:hover {
+    .patterns--list {
+        position: absolute;
+        display: block;
+        margin: 0;
+    }
+}
+
+.wall--patterns h3 {
+    line-height: 50px;
+}
+
+.patterns--list {
+    display: none;
+}
 /* nav section ends here */
 
 .canvas {

diff --git a/src/App.js b/src/App.js
@@ -9,6 +9,8 @@ import dfsAlgorithm from "./algorithms/dfs.js";
 
 export default function App() {
     let [featured_algorithm, setFeaturedAlgorithm] = React.useState("Dijkstra");
+    let [animationSpeed, setAnimationSpeed] = React.useState(25); // in ms (fast by default)
+
     const rows = (window.innerHeight / 20) / (1.5);
     const columns = ((window.screen.width - 150) / 20);
 
@@ -83,7 +85,7 @@ export default function App() {
                 }
                 newList[path_node.row][path_node.column] = newNode;
                 setNodes(newList);
-            }, (25 * i));
+            }, (animationSpeed * i));
         }
     }
 
@@ -92,7 +94,7 @@ export default function App() {
             if (i === path.length) {
                 setTimeout(() => {
                     animatePath(createPath(endNode), nodes, setNodes);
-                }, 25 * i);
+                }, animationSpeed * i);
             }
             else {
                 setTimeout(() => {
@@ -105,7 +107,7 @@ export default function App() {
                     newList[node.row][node.column] = newNode;
                     setNodes(newList);
                     //console.log(newList);
-                }, (25 * i));
+                }, (animationSpeed * i));
             }
         };
     };
@@ -132,8 +134,8 @@ export default function App() {
     }
 
     function visualizeDFS(nodes, setNodes) {
-        const startNode = nodes[8][40];
-        const endNode = nodes[8][10];
+        const startNode = nodes[8][10];
+        const endNode = nodes[8][40];
         const path = dfsAlgorithm(nodes, startNode, endNode);
         animateAlgorithm(path, nodes, endNode, setNodes);
     }
@@ -144,6 +146,21 @@ export default function App() {
         console.log(featured_algorithm);
     };
 
+    function selectAnimationSpeed(value) {
+        if (value === "fast") {
+            setAnimationSpeed(25);
+        }
+        else if (value === "average") {
+            setAnimationSpeed(50);
+        }
+        else if (value === "slow") {
+            setAnimationSpeed(100);
+        }
+        else {
+            console.log("Error: unknown animation speed parameter");
+        }
+    }
+
     function visualizeSelectedAlgorithm() {
         if (featured_algorithm === "Dijkstra") {
             visualizeDijkstra(nodes, setNodes);
@@ -182,6 +199,8 @@ export default function App() {
         <div className="App">
             <NavBar
                 selectAlgorithm={selectAlgorithm}
+                selectAnimationSpeed={selectAnimationSpeed}
+                currentAnimationSpeed={animationSpeed}
                 visualizeSelectedAlgorithm={() => visualizeSelectedAlgorithm()}
                 clearGrid={clearGrid}
                 clearPath={clearPath}

diff --git a/src/algorithms/bfs.js b/src/algorithms/bfs.js
@@ -22,19 +22,19 @@ function getUnvisitedNeighbors(node, list) {
 }
 
 export default function bfsAlgorithm(nodes, startNode, endNode) {
-    startNode.visited = true;
     const queue = [startNode];
     const res = [];
 
     while (queue.length > 0) {
         const current = queue[0];
+        current.isVisited = true;
 
-        if (current == endNode) {
+        if (current === endNode) {
             return res;
         }
 
         const children = getUnvisitedNeighbors(current, nodes);
-        for (let child of children) {
+        for (const child of children) {
             child.isVisited = true;
             child.parent = current;
             queue.push(child);

diff --git a/src/algorithms/dfs.js b/src/algorithms/dfs.js
@@ -35,9 +35,9 @@ export default function dfsAlgorithm(nodes, startNode, endNode) {
         }
 
         const children = getUnvisitedNeighbors(current, nodes);
-        // for (const child of children) {
-        //     child.isVisited = true;
-        // }
+        for (const child of children) {
+            child.parent = current;
+        }
 
         unvisitedStack = children.concat(unvisitedStack);
         visited.push(current);

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -1,4 +1,15 @@
 export default function NavBar(props) {
+    let speed;
+    if (props.currentAnimationSpeed === 25) {
+        speed = "Fast";
+    }
+    else if (props.currentAnimationSpeed === 50) {
+        speed = "Average";
+    }
+    else if (props.currentAnimationSpeed === 100) {
+        speed = "Slow";
+    }
+
     return (
         <div className="nav">
             <h1>PAV</h1>
@@ -14,19 +25,20 @@ export default function NavBar(props) {
             <div className="wall--patterns">
                 <h3>Wall Patterns</h3>
                 <ul className="patterns--list">
-                    <li></li>
+                    <li><button>Random Maze</button></li>
+                    <li><button>Recursive Maze</button></li>
                 </ul>
             </div>
             <button className="test">Add Bomb</button>
             <button onClick={() => props.visualizeSelectedAlgorithm()}>Visualize</button>
             <button onClick={() => props.clearGrid()}>Clear Grid</button>
             <button onClick={() => props.clearPath()}>Clear Path</button>
             <div className="speed--settings">
-                <h3>Speed:</h3>
+                <h3>Speed: {speed}</h3>
                 <ul className="speeds--list">
-                    <li>Fast</li>
-                    <li>Average</li>
-                    <li>Slow</li>
+                    <li><button onClick={() => props.selectAnimationSpeed("fast")}>Fast</button></li>
+                    <li><button onClick={() => props.selectAnimationSpeed("average")}>Average</button></li>
+                    <li><button onClick={() => props.selectAnimationSpeed("slow")}>Slow</button></li>
                 </ul>
             </div>
         </div>