Pathfinder V2

package.json

@@ -9,12 +9,12 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.6.0",
-    "node-sass": "^4.14.1",
     "react": "^16.14.0",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^16.14.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "sass": "^1.48.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -6,7 +6,7 @@ import { Route } from "react-router-dom";
 // Components
 import IndexTable from "./utils/indexTable";
 import WordSearch from "./wordSearchVisualiser/wordSearch";
-import PathFinder from "./PathFinder/PathFinder";
+import PathFinderV2 from "./PathFinderV2/PathFinderV2";
 import SortingVisualiser from "./sortingAlgorithms/sortingVisualiser";
 import BinarySearch from "./searchingAlgorithms/binarySearch/binarySearch";
 import LinearSearch from "./searchingAlgorithms/linearSearch/linearSearch";
@@ -44,7 +44,7 @@ export default class App extends React.Component {
         <Route path="/searching" component={searchCombined} />
         <Route path="/n-queens-problem" component={NQueensProblem} />
         <Route path="/rat-in-a-maze" component={RatInAMazeProblem} />
-        <Route path="/pathfinder" component={PathFinder} />
+        <Route path="/pathfinder" component={PathFinderV2} />
         <Route path="/word-search" component={WordSearch} />
         <Route path="/filling" component={Filling} />
       </div>

src/PathFinder/PathFinder.jsx

@@ -35,6 +35,8 @@ import Legend from "./utils/legend";
 //  Complexity table
 import ComplexityTable from "./utils/complexityTable";
 
+import config from "../utils/config";
+
 //  Stylesheets
 import "./PathFinder.scss";
 
@@ -53,37 +55,39 @@ var SPEED;
 var SCREEN_WIDTH = window.screen.width;
 var ROWS, COLS;
 
+const { rows, cols } = config.pathfinder;
+
 // Adjusting the Grid according to Screen Width
 // For better responsiveness and interactivity.
 if (SCREEN_WIDTH > 1440 && SCREEN_WIDTH <= 2560) {
   // TVs and Large Screen Laptops
-  ROWS = 61;
-  COLS = 61;
+  ROWS = rows || 61;
+  COLS = cols || 61;
   SPEED = 10;
 } else if (SCREEN_WIDTH >= 768 && SCREEN_WIDTH <= 1440) {
   // Laptops & Tablets
-  ROWS = 53;
-  COLS = 53;
+  ROWS = rows || 53;
+  COLS = cols || 53;
   SPEED = 15;
 } else if (SCREEN_WIDTH > 425 && SCREEN_WIDTH <= 767) {
   // IPads and Smaller Laptops
-  ROWS = 47;
-  COLS = 47;
+  ROWS = rows || 47;
+  COLS = cols || 47;
   SPEED = 20;
 } else if (SCREEN_WIDTH >= 320 && SCREEN_WIDTH <= 425) {
   // Mobile Devices
-  ROWS = 37;
-  COLS = 37;
+  ROWS = rows || 37;
+  COLS = cols || 37;
   SPEED = 25;
 } else if (SCREEN_WIDTH >= 120 && SCREEN_WIDTH <= 319) {
   // Mobile Devices with Smaller Screens
-  ROWS = 21;
-  COLS = 21;
+  ROWS = rows || 21;
+  COLS = cols || 21;
   SPEED = 25;
 } else {
   // Default Case
-  ROWS = 41;
-  COLS = 41;
+  ROWS = rows || 41;
+  COLS = cols || 41;
   SPEED = 18;
 }
 

src/PathFinderV2/GridNode/GridNode.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import "./GridNode.scss";
+
+const GridNode = ({
+  row,
+  col,
+  isFinish,
+  isStart,
+  isWall,
+  onNodeClick,
+  onNodeOver,
+  onNodeOut,
+}) => {
+  const extraClassName = isFinish
+    ? "node-finish"
+    : isStart
+    ? "node-start"
+    : isWall
+    ? "node-wall"
+    : "";
+
+  return (
+    <div
+      id={`gridNode-${row}-${col}`}
+      className={`gridNode ${extraClassName} `}
+      onClick={() => onNodeClick(row, col)}
+      onMouseOver={() => onNodeOver(row, col)}
+      onMouseOut={() => onNodeOut(row, col)}
+    ></div>
+  );
+};
+
+export default GridNode;

src/PathFinderV2/GridNode/GridNode.scss

@@ -0,0 +1,24 @@
+:root {
+  --p-grid-item-width: 25px;
+  --p-grid-item-height: 25px;
+}
+
+.gridNode {
+  display: grid;
+  place-content: center;
+  width: var(--p-grid-item-width);
+  height: var(--p-grid-item-height);
+  background-color: #212121;
+}
+
+.node-start {
+  background-color: red;
+}
+
+.grid-plus {
+  background-color: #2c3e50;
+}
+
+.grid-plus-center {
+  background-color: #34495e;
+}

src/PathFinderV2/PathFinderV2.jsx

@@ -0,0 +1,222 @@
+import React from "react";
+
+import { Container, Row, Col, Button, InputGroup, Form } from "react-bootstrap";
+import GridNode from "./GridNode/GridNode";
+
+import {highlightGrid, unHighlightGrid} from "./pathFinderUtils";
+
+import config from "../utils/config";
+
+import "./PathFinderV2.scss";
+
+class PathFinderV2 extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      grid: [],
+      gridRows:
+        config.pathfinder.rows || Math.floor(window.screen.width / 10 / 2.5),
+      gridCols:
+        config.pathfinder.cols || Math.floor(window.screen.height / 10 / 3.2),
+    };
+
+    this.gridBoardRef = React.createRef();
+
+    this.START_NODE_ROW = 1;
+    this.START_NODE_COL = 1;
+    this.FINISH_NODE_ROW = this.state.gridRows - 3;
+    this.FINISH_NODE_COL = this.state.gridCols - 3;
+  }
+
+  componentDidMount() {
+    const { gridRows, gridCols } = this.state;
+
+    const gridBoard = this.gridBoardRef.current;
+    gridBoard.style.setProperty("--p-grid-rows", gridRows);
+    gridBoard.style.setProperty("--p-grid-cols", gridCols);
+
+    console.log(gridRows, gridCols);
+
+    const grid = new Array(gridRows);
+
+    for (let i = 0; i < gridCols; i++) {
+      grid[i] = new Array(gridRows);
+      for (let j = 0; j < gridRows; j++) {
+        grid[i][j] = this.createNode(i, j);
+      }
+    }
+
+    this.setState({ grid });
+  }
+
+  highlightNodes(row, col) {
+    highlightGrid(row, col, this.state.gridRows, this.state.gridCols);
+  }
+
+  unHighlightNodes(row, col) {
+    unHighlightGrid(row, col, this.state.gridRows, this.state.gridCols);
+  }
+
+  createNode(row, col) {
+    return {
+      row,
+      col,
+      isStart: row === this.START_NODE_ROW && col === this.START_NODE_COL,
+      isFinish: row === this.FINISH_NODE_ROW && col === this.FINISH_NODE_COL,
+      distance: Infinity,
+      isVisited: false,
+      isWall: false,
+      previousNode: null,
+      cost: {
+        F: Infinity,
+        G: Infinity,
+        H: Infinity,
+      },
+    };
+  }
+
+  render() {
+    const { grid, gridRows, gridCols } = this.state;
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <div className="btn-group btn-block mt-1">
+              <Button
+                size="sm"
+                disabled={false}
+                variant="danger"
+                onClick={() => null}
+              >
+                Source
+              </Button>
+              <Button
+                size="sm"
+                disabled={false}
+                variant="success"
+                onClick={() => null}
+              >
+                Destination
+              </Button>
+              <Button
+                size="sm"
+                disabled={false}
+                variant="dark"
+                onClick={() => null}
+              >
+                Toggle Wall
+              </Button>
+            </div>
+          </Col>
+          <Col sm={4}>
+            <div className="btn-group btn-block mt-1">
+              <Button
+                size="sm"
+                disabled={false}
+                variant="secondary"
+                onClick={() => null}
+              >
+                Generate
+              </Button>
+              <Button
+                size="sm"
+                disabled={false}
+                variant="danger"
+                onClick={() => null}
+              >
+                Clear Maze
+              </Button>
+              <Button
+                size="sm"
+                disabled={false}
+                variant="primary"
+                onClick={() => null}
+              >
+                Clear Path
+              </Button>
+            </div>
+          </Col>
+          <Col sm={4}>
+            <div className="btn-group btn-block mt-1">
+              <InputGroup>
+                <Form.Control
+                  size="sm"
+                  disabled={false}
+                  id="pathFindingAlgoDropDown"
+                  defaultValue="0"
+                  as="select"
+                >
+                  <option disabled value="0">
+                    Select Algorithm
+                  </option>
+                  <option value="1">Dijkstras</option>
+                  <option value="2">Breadth First Search</option>
+                  <option value="5">Depth First Search</option>
+                  <option value="3">A* Search</option>
+                  <option value="4">Bi-Directional Search</option>
+                </Form.Control>
+                <InputGroup.Append>
+                  <Button
+                    size="sm"
+                    onClick={() => console.log(grid)}
+                    disabled={false}
+                    variant="success"
+                  >
+                    Perform Search
+                  </Button>
+                </InputGroup.Append>
+              </InputGroup>
+            </div>
+          </Col>
+        </Row>
+        <div
+          onMouseOut={() =>
+            // this.unHighlightDiagonals()
+            null
+          }
+          onMouseOver={() =>
+            // this.highlightDiagonals()
+            null
+          }
+          ref={this.gridBoardRef}
+          className="gridBoard"
+        >
+          {grid.map((rows) => {
+            return rows.map((node) => {
+              const { row, col, isStart, isFinish, isWall } = node;
+              return (
+                <GridNode
+                  key={`${row}-${col}`}
+                  col={col}
+                  isFinish={isFinish}
+                  isStart={isStart}
+                  isWall={isWall}
+                  row={row}
+                  onNodeClick={(row, col) =>
+                    // this.handleNodeOperations(
+                    //   row,
+                    //   col,
+                    //   modifyingNodeState
+                    // )
+                    null
+                  }
+                  onNodeOver={(row, col) =>
+                    this.highlightNodes(row, col)
+                    // null
+                  }
+                  onNodeOut={(row, col) =>
+                    this.unHighlightNodes(row, col)
+                    // null
+                  }
+                />
+              );
+            });
+          })}
+        </div>
+      </Container>
+    );
+  }
+}
+
+export default PathFinderV2;

src/PathFinderV2/PathFinderV2.scss

@@ -0,0 +1,12 @@
+:root {
+  --p-grid-cols: 1;
+  --p-grid-rows: 1;
+}
+
+.gridBoard {
+  display: grid;
+  grid-template-columns: repeat(var(--p-grid-rows), 25px);
+  grid-template-rows: repeat(var(--p-grid-cols), 25px);
+  justify-content: center;
+  margin-top: 1rem;
+}