modify header and add notif for when path not found

Author: TheRaizer

path-finding/src/AlgorithmReducer.js

@@ -1,11 +1,13 @@
 export const ALGO_ACTIONS = {
   IS_SEARCHING: "IS_SEARCHING",
   IS_CREATING_MAZE: "IS_CREATING_MAZE",
+  FOUND_PATH: "FOUND_PATH",
 };
 // this state represents( but does not manage) the state of the algorithms so the header can change accordingly
 export const initialState = {
   isSearching: false,
   isCreatingMaze: false,
+  foundPath: true,
 };
 
 export default function algoReducer(state, action) {
@@ -20,6 +22,8 @@ export default function algoReducer(state, action) {
         ...state,
         isCreatingMaze: action.payload,
       };
+    case ALGO_ACTIONS.FOUND_PATH:
+      return { ...state, foundPath: action.payload };
     default:
       console.error("no matching action types");
   }

path-finding/src/App.js

@@ -1,9 +1,11 @@
 import Grid from "./Grid/Grid";
 import Header from "./Header/Header";
+import Tutorial from "./Tutorial/Tutorial";
 
 function App() {
   return (
     <div className="App">
+      <Tutorial />
       <Header />
       <Grid />
     </div>

path-finding/src/Cell/Cell.js

@@ -80,7 +80,7 @@ export function CellSquareState(props) {
 function CellSquare({ state }) {
   const { cell } = state;
   return (
-    <div
+    <button
       className={`cell ${
         cell.cellType === CELL_TYPES.START || cell.cellType === CELL_TYPES.END
           ? "main"
@@ -92,6 +92,6 @@ function CellSquare({ state }) {
         cellTypeOnMouseDown = cell.cellType;
         determineCellType(cellTypeOnMouseDown, cell);
       }}
-    ></div>
+    ></button>
   );
 }

path-finding/src/Header/Header.js

@@ -4,34 +4,29 @@ import dijkstrasSearch from "../PathFindingAlgos/DijkstrasAlgorithm";
 import breadthFirstSearch from "../PathFindingAlgos/BreadthFirstSearch";
 import bestFirstSearch from "../PathFindingAlgos/BestFirstSearch";
 import startRecursiveDivision from "../MazeAlgos/RecursiveDivision";
+import closeIcon from "./Icons/close-icon.png";
 import { searchVars, pathFind } from "../Search";
 import { gridCl } from "../Grid/Grid";
-import { mazeVars, createMaze } from "../Maze";
-import algoReducer, { initialState } from "../AlgorithmReducer";
+import { createMaze } from "../Maze";
+import algoReducer, { ALGO_ACTIONS, initialState } from "../AlgorithmReducer";
 import { clamp } from "../UtilityFuncs";
 import "./header.css";
 
 function Header() {
+  // this reducer changes state during pathfinding and allows this header to rerender.
   const [state, dispatch] = useReducer(algoReducer, initialState);
 
   const [canCrossDiagonals, setCanCrossDiagonals] = useState(true);
   const [animationInterval, setAnimationInterval] = useState(15);
-  const [missingCell, setMissingCell] = useState(false);
 
   const executePathFinding = (algorithm) => {
     if (gridCl.startCell != null && gridCl.endCell != null) {
       pathFind(canCrossDiagonals, dispatch, algorithm);
-    } else {
-      setMissingCell(true);
     }
   };
-
   return (
     <section className="header">
       <div className="main">
-        <section id="instructions">
-          <button>Tutorial</button>
-        </section>
         <div>
           <div className="input-with-prepending">
             <h5>Animation Interval (ms)</h5>
@@ -42,14 +37,12 @@ function Header() {
                   let interval = clamp(
                     parseFloat(evt.target.value),
                     searchVars.minSearchTime,
-                    searchVars.maxSearchTime
+                    Number.MAX_VALUE
                   );
-                  setAnimationInterval(interval);
                   searchVars.searchAnimationTime = interval;
                 }
+                setAnimationInterval(evt.target.value);
               }}
-              min={searchVars.minSearchTime}
-              max={searchVars.maxSearchTime}
               type="number"
             />
           </div>
@@ -66,14 +59,17 @@ function Header() {
             <span className="slider round"></span>
           </div>
         </div>
-        <button
-          onClick={() => createMaze(startRecursiveDivision, dispatch)}
-          className={
-            state.isSearching || state.isCreatingMaze ? "disabled" : ""
-          }
-        >
-          Create Maze
-        </button>
+        <section>
+          <h4>Create Obstacles</h4>
+          <button
+            onClick={() => createMaze(startRecursiveDivision, dispatch)}
+            className={
+              state.isSearching || state.isCreatingMaze ? "disabled" : ""
+            }
+          >
+            Create Maze
+          </button>
+        </section>
         <section className="algorithms">
           <h4>Pathfinding Algorithms</h4>
           <button
@@ -113,9 +109,7 @@ function Header() {
           <h4>Clearing Options</h4>
           <button
             onClick={() => {
-              if (!searchVars.isSearching && !mazeVars.isCreatingMaze) {
-                gridCl.clearEntireGrid();
-              }
+              gridCl.clearEntireGrid();
             }}
             className={
               state.isSearching || state.isCreatingMaze ? "disabled" : ""
@@ -125,9 +119,7 @@ function Header() {
           </button>
           <button
             onClick={() => {
-              if (!mazeVars.isCreatingMaze && !searchVars.isSearching) {
-                gridCl.clearWalls();
-              }
+              gridCl.clearWalls();
             }}
             className={
               state.isCreatingMaze || searchVars.isSearching ? "disabled" : ""
@@ -137,9 +129,7 @@ function Header() {
           </button>
           <button
             onClick={() => {
-              if (searchVars.isSearching) {
-                searchVars.stopSearch = true;
-              }
+              searchVars.stopSearch = true;
             }}
             type="button"
             className={state.isSearching ? "" : "disabled"}
@@ -148,12 +138,16 @@ function Header() {
           </button>
         </section>
       </div>
-      <div
-        className={`notif ${missingCell ? "appear" : ""}`}
-        onClose={() => setMissingCell(false)}
-      >
+      <div className={`notif ${state.foundPath === true ? "" : "appear"}`}>
         <div>
-          <h4>You are missing a start or end cell</h4>
+          <h4>No path was found!</h4>
+          <button
+            onClick={() => {
+              dispatch({ type: ALGO_ACTIONS.FOUND_PATH, payload: true });
+            }}
+          >
+            <img src={closeIcon} alt="Close" />
+          </button>
         </div>
       </div>
     </section>

path-finding/src/Header/Icons/GitHub-Mark-32px.png

@@ -1,3 +1,7 @@
+.disabled {
+  pointer-events: none;
+}
+
 .header {
   padding-top: 2vh;
   background-color: #a1c4fd;
@@ -14,7 +18,7 @@
 .header > .main {
   display: flex;
   padding-bottom: 2vh;
-
+  align-items: center;
   justify-content: space-around;
 }
 
@@ -25,29 +29,46 @@
 
 .notif {
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
 }
 
 .notif > div {
   display: none;
   justify-content: center;
   align-items: center;
 
+  padding: 10px 30px;
   border-radius: 10px;
+
   background-color: rgb(240, 105, 105);
-  width: 30vw;
-  height: 10%;
+  width: 20vw;
+  min-width: fit-content;
+  height: 5vh;
 }
 
-.notif.appear {
+.notif.appear > div {
   display: flex;
+  position: relative;
+  margin-bottom: 1vh;
 }
 
-#click-instructions > h4 {
-  line-height: 1.6em;
+.notif.appear > div > button {
+  position: absolute;
+  border: none;
+  background: transparent;
+  color: white;
+  top: -5px;
+  right: -30px;
+}
+
+.notif.appear > div > button > img {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
 }
 
 .header button {
+  height: fit-content;
   min-width: 80px;
 
   font-weight: 400;
@@ -115,3 +136,11 @@
   height: 20px;
   width: 20px;
 }
+
+@media only screen and (max-width: 775px) {
+  .header > .main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}

path-finding/src/Header/Icons/Gmail-icon-31px.png

@@ -5,7 +5,6 @@ import { timer } from "./UtilityFuncs";
 export const searchVars = {
   isSearching: false,
   stopSearch: false,
-  maxSearchTime: 3000,
   minSearchTime: 1,
   pathAnimationTime: 10,
   searchAnimationTime: 15,
@@ -24,44 +23,56 @@ export function retracePath(start, end) {
   return path;
 }
 
-/*Starts a given pathfinding algorithm and draws the path if found.
+/*
 
   @param {Function} varDispatch - dispatch function used to change state for the Header component
   @param {Function} searching - the searching algorithm to run
 */
-export async function pathFind(canCrossDiagonals, varDispatch, search) {
+
+/** Starts a given pathfinding algorithm and draws the path if found.
+ *
+ * @param {Boolean} canCrossDiagonals - whether the searching algorithm can cross diagonals.
+ * @param {Function} headerDispatch - dispatch function used to change state for the Header component
+ * @param {Function} search - the searching algorithm to run.
+ * @returns
+ */
+export async function pathFind(canCrossDiagonals, headerDispatch, search) {
   if (searchVars.isSearching || mazeVars.isCreatingMaze) {
     return;
   }
 
   searchVars.isSearching = true;
-  varDispatch({ type: ALGO_ACTIONS.IS_SEARCHING, payload: true });
+  headerDispatch({ type: ALGO_ACTIONS.IS_SEARCHING, payload: true });
 
   // execute promise to search that should resolve a path
   var path = await searching(canCrossDiagonals, search).catch((err) => {
     // if the promise was rejected the log the error
     console.log("error in search");
     console.error(err);
   });
+
+  // no path was found
   if (path == null) {
-    endSearch(varDispatch);
+    endSearch(headerDispatch, false);
     return;
   }
   await drawPath(path).catch((err) => {
     console.error(err);
   });
 
-  endSearch(varDispatch);
+  endSearch(headerDispatch, true);
 }
 
-/*Ends the searching algorithm and resets state.
-
-@param {Function} varDispatch - dispatch function used to change state for the Header component
-*/
-function endSearch(varDispatch) {
+/** Ends the searching algorithm and resets state.
+ *
+ * @param {Function} headerDispatch - dispatch function used to change state for the Header component
+ * @param {Boolean} foundPath - whether a path was found or not
+ */
+function endSearch(headerDispatch, foundPath) {
   searchVars.isSearching = false;
   searchVars.stopSearch = false;
-  varDispatch({ type: ALGO_ACTIONS.IS_SEARCHING, payload: false });
+  headerDispatch({ type: ALGO_ACTIONS.IS_SEARCHING, payload: false });
+  headerDispatch({ type: ALGO_ACTIONS.FOUND_PATH, payload: foundPath });
 }
 
 async function drawPath(path) {
@@ -81,7 +92,6 @@ function searching(canCrossDiagonals, search) {
         resolve(res);
       })
       .catch((err) => {
-        console.log("Woops");
         reject(err);
       });
   });