DONE:

- Added psudeocode section to the UI with the aim of providing pseudocode for the search algorithm selected by the user. - Learnt an import React.js concept about "ligting up state". TODO: - Simply add the text for each algorithm's pseudocode where appropriate.
NMPoole · Jun 18, 2022 · 5d3a8be · 5d3a8be
1 parent 8999264
commit 5d3a8be
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 30 deletions.
diff --git a/src/components/MazeSolver.css b/src/components/MazeSolver.css
@@ -1,6 +1,8 @@
 .gridKey {
-    display: table;
-    margin: 10px auto 0;
+    display: flex;
+    margin: 10px auto;
+    justify-content: center;
+    pointer-events: none;
 }
 
 @media (max-width: 1250px) {
@@ -86,30 +88,22 @@
 .keyIcon {
     display: inline-block;
     vertical-align: middle;
+    margin-left: 10px;
 }
 
 .keyLabel {
     display: inline-block;
     margin-left: 5px;
-    vertical-align: center;
 }
 
 .grid {
     font-size: 0;
     pointer-events: unset;
-
-    position: absolute;
-    left: 50%;
-    margin-right: -50%;
-    transform: translate(-50%, 2%);
+    text-align: center;
 }
 
 .grid-visualizing {
     font-size: 0;
     pointer-events: none;
-
-    position: absolute;
-    left: 50%;
-    margin-right: -50%;
-    transform: translate(-50%, 2%);
+    text-align: center;
 }
diff --git a/src/components/MazeSolver.jsx b/src/components/MazeSolver.jsx
@@ -4,6 +4,7 @@ import "./MazeSolver.css";
 // Import components for creating the MazeSolver application.
 import Node from "./Node/Node";
 import NavBar from "./NavBar/NavBar";
+import Pseudocode from "./Pseudocode/Pseudocode";
 
 // Import search algorithms for solving mazes.
 import {randomWalk} from "../search_algorithms/randomWalk"
@@ -46,11 +47,20 @@ class MazeSolver extends Component {
         numColumns: initNumCols,
         speed: 10,
         mazeSpeed: 10,
+        algorithm: "Visualize Algorithm",
     };
 
 
     // UTILITY METHODS:
 
+    updateAlgorithm = (newAlgorithm) => {
+
+        this.setState({
+            algorithm: newAlgorithm
+        })
+
+    }
+
     updateDimensions = () => {
 
         this.setState({
@@ -638,6 +648,9 @@ class MazeSolver extends Component {
                     clearPath={this.clearPath.bind(this)}
                     updateSpeed={this.updateSpeed.bind(this)}
 
+                    algorithm={this.state.algorithm}
+                    updateAlgorithm={this.updateAlgorithm.bind(this)}
+
                 />
 
                 {/* The key for the grid. */}
@@ -779,7 +792,11 @@ class MazeSolver extends Component {
 
                 </div>
 
-                {/* TODO: Add a pseudocode for selected algorithm component. */}
+                {/* Pseudocode for selected algorithm component. */}
+                <Pseudocode
+                    algorithm={this.state.algorithm}
+                    updateAlgorithm={this.updateAlgorithm.bind(this)}
+                />
 
             </React.Fragment>
 

diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
@@ -8,7 +8,6 @@ class NavBar extends Component {
     // ATTRIBUTES (i.e., State):
 
     state = {
-        algorithm: "Visualize Algorithm", // Algorithm for pathfinding.
         maze: "Generate Maze", // Algorithm for maze generation.
         pathState: false, // State of found path.
         mazeState: false, // State of generated maze.
@@ -22,19 +21,20 @@ class NavBar extends Component {
 
         if (this.props.visualizingAlgorithm) return;
 
-        if (selection === this.state.algorithm ||
-            this.state.algorithm === "Visualize Algorithm" || this.state.algorithm === "Select an Algorithm!") {
+        if (selection === this.props.algorithm ||
+            this.props.algorithm === "Visualize Algorithm" ||
+            this.props.algorithm === "Select an Algorithm!") {
 
-            this.setState({algorithm: selection});
+            this.props.updateAlgorithm(selection);
 
         } else if (this.state.pathState) {
 
             this.clearPath();
-            this.setState({algorithm: selection});
+            this.props.updateAlgorithm(selection);
 
         } else {
 
-            this.setState({algorithm: selection});
+            this.props.updateAlgorithm(selection);
 
         }
 
@@ -70,21 +70,21 @@ class NavBar extends Component {
             return;
         }
 
-        if (this.state.algorithm === "Visualize Algorithm" || this.state.algorithm === "Select an Algorithm!") {
+        if (this.props.algorithm === "Visualize Algorithm" || this.props.algorithm === "Select an Algorithm!") {
 
-            this.setState({algorithm: "Select an Algorithm!"});
+            this.props.updateAlgorithm("Select an Algorithm!");
 
         } else {
 
             this.setState({pathState: true});
 
-            if (this.state.algorithm === "Visualize Dijkstra") this.props.visualizeDijkstra();
-            else if (this.state.algorithm === "Visualize A*") this.props.visualizeAStar();
-            else if (this.state.algorithm === "Visualize Greedy BFS") this.props.visualizeGreedyBFS();
-            else if (this.state.algorithm === "Visualize Bidirectional Greedy")  this.props.visualizeBidirectionalGreedySearch();
-            else if (this.state.algorithm === "Visualize Breadth First Search") this.props.visualizeBFS();
-            else if (this.state.algorithm === "Visualize Depth First Search") this.props.visualizeDFS();
-            else if (this.state.algorithm === "Visualize Random Walk") this.props.visualizeRandomWalk();
+            if (this.props.algorithm === "Visualize Dijkstra") this.props.visualizeDijkstra();
+            else if (this.props.algorithm === "Visualize A*") this.props.visualizeAStar();
+            else if (this.props.algorithm === "Visualize Greedy BFS") this.props.visualizeGreedyBFS();
+            else if (this.props.algorithm === "Visualize Bidirectional Greedy")  this.props.visualizeBidirectionalGreedySearch();
+            else if (this.props.algorithm === "Visualize Breadth First Search") this.props.visualizeBFS();
+            else if (this.props.algorithm === "Visualize Depth First Search") this.props.visualizeDFS();
+            else if (this.props.algorithm === "Visualize Random Walk") this.props.visualizeRandomWalk();
 
         }
 
@@ -246,7 +246,7 @@ class NavBar extends Component {
 
                             <button type="button" className="btn btn-success"
                                     onClick={() => this.visualizeAlgorithm()}>
-                                {this.state.algorithm}
+                                {this.props.algorithm}
                             </button>
 
                         </li>

diff --git a/src/components/Pseudocode/Pseudocode.css b/src/components/Pseudocode/Pseudocode.css
@@ -0,0 +1,5 @@
+.pseudocode {
+    margin-top: 10px;
+    margin-left: 20px;
+    text-align: left;
+}
diff --git a/src/components/Pseudocode/Pseudocode.jsx b/src/components/Pseudocode/Pseudocode.jsx
@@ -0,0 +1,107 @@
+import React, { Component } from "react";
+import "./Pseudocode.css";
+
+class Pseudocode extends Component {
+
+
+    // ATTRIBUTES (i.e., State):
+
+    state = {
+        selectedAlgorithm: null
+    }
+
+
+    // METHODS:
+
+    // TODO: Add actual pseudocode text for each search algorithm.
+
+    pseudocodeDijkstra = () => {
+
+        return (
+            "Dijkstra's Algorithm"
+        );
+
+    }
+
+    pseudocodeAStar = () => {
+
+        return (
+            "A* Algorithm"
+        );
+
+    }
+
+    pseudocodeGreedyBFS = () => {
+
+        return (
+            "Greedy Best First Algorithm"
+        );
+
+    }
+
+    pseudocodeBidirGreedy = () => {
+
+        return (
+            "Bidirectional Greedy Algorithm"
+        );
+
+    }
+
+    pseudocodeBFS = () => {
+
+        return (
+            "Breadth First Search Algorithm"
+        );
+
+    }
+
+    pseudocodeDFS = () => {
+
+        return (
+            "Depth First Search Algorithm"
+        );
+
+    }
+
+    pseudocodeRandomWalk = () => {
+
+        return (
+            "Random Walk Algorithm"
+        );
+
+    }
+
+    handlePseudocode = (algorithm) => {
+
+        switch (algorithm) {
+            case "Dijkstra": return this.pseudocodeDijkstra();
+            case "A*": return this.pseudocodeAStar();
+            case "Greedy BFS": return this.pseudocodeGreedyBFS();
+            case "Bidirectional Greedy": return this.pseudocodeBidirGreedy();
+            case "Breadth First Search": return this.pseudocodeBFS();
+            case "Depth First Search": return this.pseudocodeDFS();
+            case "Random Walk": return this.pseudocodeRandomWalk();
+        }
+
+    }
+
+    render() {
+
+        const pseudoAlg =
+            (this.props.algorithm === "Select an Algorithm!" || this.props.algorithm === "Visualize Algorithm") ?
+                "" :
+                this.props.algorithm.replace("Visualize ", "")
+
+        return (
+            <div className="pseudocode">
+                <h4> Search Algorithm Pseudocode {(pseudoAlg === "") ? "" : " - " + pseudoAlg}</h4>
+                <pre>{this.handlePseudocode(pseudoAlg)}</pre>
+            </div>
+        );
+
+    }
+
+
+}
+
+export default Pseudocode;