Merge pull request #9 from jannomeister/develop

release: v0.3.0

package.json

@@ -1,15 +1,15 @@
 {
   "homepage": "https://jannomeister.github.io/pathfinder",
   "name": "test-algorithm",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/lab": "^4.0.0-alpha.56",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "bootstrap": "^4.5.2",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.3.0",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"
   },

src/PathFindingVisualizer/Board/Board.css

@@ -1,5 +1,5 @@
 table {
   width: 100%;
   border-spacing: 0;
-  outline: 1px solid grey;
+  outline: 1px solid #364F6B;
 }

src/PathFindingVisualizer/Board/Board.js

@@ -1,38 +1,34 @@
 import React from 'react';
 import Node from '../Node/Node';
 
-import Grid from '@material-ui/core/Grid';
-
 import './Board.css';
 
-const Board = ({ nodes, onClick }) => {
-  return (
-    <Grid item xs={12}>
-      <table cellSpacing="0" cellPadding="0">
-        <tbody>
-          {nodes.map((row, rowIdx) => (
-            <tr key={rowIdx}>
-              {row.map(({isStart, isFinish, isWall}, nodeIdx) => (
-                <Node
-                  key={nodeIdx}
-                  row={rowIdx}
-                  col={nodeIdx}
-                  isStart={isStart}
-                  isFinish={isFinish}
-                  isWall={isWall}
-                  onClick={onClick}
-                  // onClick={(row, col) => onClick(row, col)}
-                  // onMouseDown={(row, col) => onMouseDown(row, col)}
-                  // onMouseEnter={(row, col) => onMouseEnter(row, col)}
-                  // onMouseUp={onMouseUp}
-                />
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </Grid>
-  )
-}
+const Board = ({ nodes, onClick }) => (
+  <div style={{ padding: 10 }}>
+    <table cellSpacing="0" cellPadding="0">
+      <tbody>
+        {nodes.map((row, rowIdx) => (
+          <tr key={rowIdx}>
+            {row.map(({isStart, isFinish, isWall}, nodeIdx) => (
+              <Node
+                key={nodeIdx}
+                row={rowIdx}
+                col={nodeIdx}
+                isStart={isStart}
+                isFinish={isFinish}
+                isWall={isWall}
+                onClick={onClick}
+                // onClick={(row, col) => onClick(row, col)}
+                // onMouseDown={(row, col) => onMouseDown(row, col)}
+                // onMouseEnter={(row, col) => onMouseEnter(row, col)}
+                // onMouseUp={onMouseUp}
+              />
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+)
 
 export default Board;

src/PathFindingVisualizer/Control/Control.js

@@ -1,23 +1,22 @@
 import React, { useState } from 'react';
+import Legend from './Legend/Legend';
 import DiagonalOption from './DiagonalOption/DiagonalOption';
 import Heuristic from './Heuristic/Heuristic';
 
-// import FormControl from '@material-ui/core/FormControl';
-// import InputLabel from '@material-ui/core/InputLabel';
-// import Select from '@material-ui/core/Select';
-// import MenuItem from '@material-ui/core/MenuItem';
-import Grid from '@material-ui/core/Grid';
-import Alert from '@material-ui/lab/Alert';
-// import Button from '@material-ui/core/Button';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import FormControl from 'react-bootstrap/FormControl';
+import Container from 'react-bootstrap/Container';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
 
 import './Control.css';
 
-const Control = ({ start, finish, hasMaze, visualize, generateMaze, reset }) => {
+const Control = ({ start, finish, hasMaze, visualize, generateMaze, clearPath, reset }) => {
   const [algorithm, setAlgorithm] = useState("");
   const [heuristic, setHeuristic] = useState("manhattan");
   const [isDiagonal, setIsDiagonal] = useState(false);
   const canVisualize = !start || !finish ? true : false;
-  const canGenerate = !start || !finish ? true : false;
+  const canGenerate = hasMaze || !start || !finish ? false : true;
 
   const onVisualize = e => {
     e.preventDefault();
@@ -27,38 +26,56 @@ const Control = ({ start, finish, hasMaze, visualize, generateMaze, reset }) =>
   }
 
   return (
-    <Grid item xs={12}>
-      <div>
-        { !algorithm && <Alert severity="warning">Please select an algorithm</Alert> }
-        <form>
-          <select value={algorithm} onChange={e => setAlgorithm(e.target.value)}>
-            <option value="">none</option>
+    <div style={{ padding: 10 }}>
+      <Legend />
+
+      <Form>
+        <ButtonGroup style={{ marginBottom: 10 }}>
+          <Button variant="outline-secondary" disabled={!canGenerate} onClick={generateMaze}>
+            Generate Maze
+          </Button>
+          <Button variant="outline-secondary" disabled={!hasMaze} onClick={clearPath}>
+            Clear Path
+          </Button>
+          <Button variant="outline-secondary"
+            onClick={() => {
+              setAlgorithm("");
+              setHeuristic("manhattan");
+              setIsDiagonal(false);
+              reset(); 
+            }}
+          >
+            Reset
+          </Button>
+        </ButtonGroup>
+
+        <Container style={{ marginBottom: 10 }}>
+          <FormControl
+            as="select"
+            size="sm"
+            value={algorithm}
+            onChange={e => setAlgorithm(e.target.value)}
+          >
+            <option value="">Select Algorithm</option>
             <option value="dijkstra">Dijkstra</option>
             <option value="astar">A star</option>
             <option value="BFS">Breadth First Search</option>
-          </select>
+          </FormControl>
+        </Container>
 
-          <button disabled={canVisualize} onClick={onVisualize}>Visualize</button>
+        {algorithm === "astar" && (
+          <Heuristic heuristic={heuristic} onChange={e => setHeuristic(e.target.value)} />
+        )}
 
-          {algorithm === "astar" && (
-            <DiagonalOption isDiagonal={isDiagonal} onChange={e => setIsDiagonal(e.target.checked)} />
-          )}
+        {algorithm === "astar" && (
+          <DiagonalOption isDiagonal={isDiagonal} onChange={e => setIsDiagonal(e.target.checked)} />
+        )}
 
-          {algorithm === "astar" && (
-            <Heuristic heuristic={heuristic} onChange={e => setHeuristic(e.target.value)} />
-          )}
-        </form>
-      </div>
-      <div>
-        <button disabled={canGenerate} onClick={generateMaze}>Generate Maze</button>
-        <button
-          onClick={() => {
-            setAlgorithm("");
-            reset();
-          }}
-        >Reset</button>
-      </div>
-    </Grid>
+        <Button variant="outline-success" disabled={canVisualize} onClick={onVisualize}>
+          Visualize
+        </Button>
+      </Form>
+    </div>
   )
 }
 

src/PathFindingVisualizer/Control/DiagonalOption/DiagonalOption.js

@@ -1,20 +1,18 @@
 import React from 'react';
+import Form from 'react-bootstrap/Form';
 
 import './DiagonalOption.css';
 
 const DiagonalOption = ({ isDiagonal, onChange }) => {
   return (
-    <div className="container">
-      <label>
-        <input
-          name="isDiagonal"
-          type="checkbox"
-          checked={isDiagonal}
-          onChange={onChange}
-        />
-        Enable Diagonal Search?
-      </label>
-    </div>
+    <Form.Group controlId="formBasicCheckbox">
+      <Form.Check
+        type="checkbox"
+        checked={isDiagonal} 
+        onChange={onChange}
+        label="Enable Diagonal Search"
+      />
+    </Form.Group>
   )
 }
 

src/PathFindingVisualizer/Control/Heuristic/Heuristic.js

@@ -1,70 +1,25 @@
 import React from 'react';
+import FormControl from 'react-bootstrap/FormControl';
+import Container from 'react-bootstrap/Container';
 
 import './Heuristic.css';
 
 const Heuristic = ({ heuristic, onChange }) => {
   return (
-    <div className="container">
-      <div>
-        <label>
-          <input
-            type="radio"
-            value="manhattan"
-            checked={heuristic === "manhattan"}
-            onChange={onChange}
-          />
-          Manhattan Distance
-        </label>
-      </div>
-
-      <div>
-        <label>
-          <input
-            type="radio"
-            value="diagonalChebyshev"
-            checked={heuristic === "diagonalChebyshev"}
-            onChange={onChange}
-          />
-          Chebyshev Distance
-        </label>
-      </div>
-
-      <div>
-        <label>
-          <input
-            type="radio"
-            value="diagonalOctile"
-            checked={heuristic === "diagonalOctile"}
-            onChange={onChange}
-          />
-          Octile Distance
-        </label>
-      </div>
-
-      <div>
-        <label>
-          <input
-            type="radio"
-            value="euclidean"
-            checked={heuristic === "euclidean"}
-            onChange={onChange}
-          />
-          Euclidean Distance
-        </label>
-      </div>
-
-      <div>
-        <label>
-          <input
-            type="radio"
-            value="euclideanSquared"
-            checked={heuristic === "euclideanSquared"}
-            onChange={onChange}
-          />
-          Euclidean (Squared) Distance
-        </label>
-      </div>
-    </div>
+    <Container style={{ marginBottom: 10 }}>
+      <FormControl
+        as="select"
+        size="sm"
+        value={heuristic}
+        onChange={onChange}
+      >
+        <option value="manhattan">Manhattan</option>
+        <option value="diagonalChebyshev">Chebyshev Distance</option>
+        <option value="diagonalOctile">Octile Distance</option>
+        <option value="euclidean">Euclidean Distance</option>
+        <option value="euclideanSquared">Euclidean (Squared) Distance</option>
+      </FormControl>
+    </Container>
   )
 }
 

src/PathFindingVisualizer/Control/Legend/Legend.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+
+import './Legend.css';
+
+const Legend = () => (
+  <Container style={{ marginBottom: 10, borderBottom: '1px solid grey', paddingBottom: 10 }}>
+    <Row style={{ marginBottom: 5 }}>
+      <Col xs={6}>
+        <img src={require("../../../assets/start.png")} style={{ marginRight: 2 }} alt="" width={20} height={20} />
+        <span>Starting Node</span>
+      </Col>
+      <Col xs={6}>
+        <img src={require("../../../assets/finish.png")} style={{ marginRight: 2 }} alt="" width={20} height={20} />
+        <span>Finish Node</span>
+      </Col>
+    </Row>
+    <Row>
+      <Col xs={6}>
+        <div style={{ width: 20, height: 20, marginRight: 3, backgroundColor: '#364F6B', display: 'inline-block', verticalAlign: 'sub' }}></div>
+        <span>Wall Node</span>
+      </Col>
+      <Col xs={6}>
+        <div style={{ width: 19, height: 19, marginRight: 3, outline: '1px solid #3FC1C9', display: 'inline-block', verticalAlign: 'sub' }}></div>
+        <span>Path Node</span>
+      </Col>
+    </Row>
+    <Row>
+      <Col xs={6}>
+        <div style={{ width: 20, height: 20, marginRight: 3, backgroundColor: 'rgba(0, 190, 218, 0.75)', display: 'inline-block', verticalAlign: 'sub' }}></div>
+        <span>Visited Node</span>
+      </Col>
+      <Col xs={6}>
+        <div style={{ width: 20, height: 20, marginRight: 3, backgroundColor: '#FC5185', display: 'inline-block', verticalAlign: 'sub' }}></div>
+        <span>Shortest Path</span>
+      </Col>
+    </Row>
+  </Container>
+)
+
+export default Legend