Merge pull request #77 from path2finding/feature/timer-and-legend

Adds in a runtime timer and space legend - WIP

Author: Mike Upton

package.json

@@ -19,9 +19,11 @@
     "connected-react-router": "^6.6.1",
     "history": "^4.10.1",
     "lodash": "^4.17.15",
+    "moment": "^2.24.0",
     "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-moment": "^0.9.7",
     "react-redux": "^7.1.3",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",

public/lava.png

@@ -1,5 +1,4 @@
 .Maze {
   height: 90vh !important;
   // Tempt style for debugging
-  border: 1px solid orangered;
 }

src/components/Maze/Maze.scss

@@ -65,7 +65,7 @@ const populateMaze = (props: Props, openSet: Coord[], closedSet: Coord[]) => {
           type={mazeInfo[y][x].type}
           visited={mazeInfo[y][x].visited}
           path={mazeInfo[y][x].path}
-          position={{ x, z: 0, y }}
+          position={{ x: x - mazeSize.x / 2, z: 0, y: y - mazeSize.y / 2 }}
           inOpenSet={includesCoord(openSet, { x, y } as Coord)}
           inClosedSet={includesCoord(closedSet, { x, y } as Coord)}
           key={key}
@@ -335,7 +335,7 @@ const Maze: React.FC<Props> = (props) => {
 
           // If we end up removing the last space we end BFS
           if (queue.length === 0) {
-            handlePauseVisualization();
+            if (isPlaying) handlePauseVisualization();
             return;
           }
         }
@@ -353,7 +353,7 @@ const Maze: React.FC<Props> = (props) => {
           // Update bfsQueue and set curr to visited
           progressBFS(queue, curr, currNeighbors);
         } else {
-          handlePauseVisualization();
+          if (isPlaying) handlePauseVisualization();
           progressBFS([], curr, currNeighbors);
         }
       }
@@ -475,7 +475,7 @@ const Maze: React.FC<Props> = (props) => {
         }
       } else {
         console.log("NO SOLUTION");
-        handlePauseVisualization();
+        if (isPlaying) handlePauseVisualization();
         return;
       }
     }, 100 / currentSpeed);
@@ -556,7 +556,7 @@ const Maze: React.FC<Props> = (props) => {
         }
       } else {
         console.log("NO SOLUTION");
-        handlePauseVisualization();
+        if (isPlaying) handlePauseVisualization();
         return;
       }
     }, 100 / currentSpeed);
@@ -575,7 +575,7 @@ const Maze: React.FC<Props> = (props) => {
       //   top: 10
       // }}
       camera={{
-        position: new Vector3(0, 10, 0),
+        position: new Vector3(0, getMazeSize(mazeInfo).x, 0),
       }}
     >
       <CameraController />