Walls

src/Algorithms/dijkstra.js

@@ -8,7 +8,9 @@ export function dijkstra(grid, start, finish) {
     sortUnvistedDistance(unvisitedNodes);
     // console.log("1");
     const closestNode = unvisitedNodes.shift();
+    console.log(closestNode, "closestNode");
     // console.log("2");
+    if (closestNode.fence === true) continue;
     if (closestNode.distance === Infinity) return nodesVisited;
     closestNode.visited = true;
     // console.log("3");

src/Grid/Grid.js

@@ -7,8 +7,8 @@ import { Alert } from 'react-bootstrap';
 import Info from './Info/Info';
 import { dijkstra, findShortestPath } from '../Algorithms/dijkstra';
 
-import './Grid.css';
-import './Node/Node.css';
+import "./Grid.css";
+import "./Node/Node.css";
 
 export default class Grid extends Component {
   state = {
@@ -27,6 +27,13 @@ export default class Grid extends Component {
         colIndex: null,
       },
     },
+    fence: {
+      present: [false],
+      gridId: {
+        rowIndex: null,
+        colIndex: null,
+      },
+    },
   };
 
   componentDidMount() {
@@ -41,6 +48,7 @@ export default class Grid extends Component {
       distance: Infinity,
       visited: false,
       pastNode: null,
+      fence: false,
     };
   };
 
@@ -66,13 +74,17 @@ export default class Grid extends Component {
     const { rowIndex, colIndex } = gridId;
     const node = grid[rowIndex][colIndex];
 
-    node[type] = true;
-    this.setState({
-      [type]: {
-        present: true,
-        gridId: gridId,
-      },
-    });
+    if (type === "fence") {
+      node[type] = true;
+    } else {
+      node[type] = true;
+      this.setState({
+        [type]: {
+          present: true,
+          gridId: gridId,
+        },
+      });
+    }
   };
 
   // commented out as it is currently unnecessary, may be useful later
@@ -85,7 +97,6 @@ export default class Grid extends Component {
 
   runDijkstra = () => {
     const { grid, start, finish } = this.state;
-
     const startNode = grid[start.gridId.rowIndex][start.gridId.colIndex];
     const finishNode = grid[finish.gridId.rowIndex][finish.gridId.colIndex];
     const resultOfDijkstra = dijkstra(grid, startNode, finishNode);
@@ -108,12 +119,12 @@ export default class Grid extends Component {
           `node-${node.gridId.colIndex}-${node.gridId.rowIndex}`
         ).className = `Node ${
           node.start
-            ? 'start'
+            ? "start"
             : node.finish
-            ? 'finish'
+            ? "finish"
             : node.visited
-            ? 'visited'
-            : ''
+            ? "visited"
+            : ""
         }`;
       }, 10 * i);
     }
@@ -125,7 +136,7 @@ export default class Grid extends Component {
         const node = nodesInShortestPathOrder[i];
         document.getElementById(
           `node-${node.gridId.colIndex}-${node.gridId.rowIndex}`
-        ).className = 'Node path';
+        ).className = "Node path";
       }, 50 * i);
     }
   };
@@ -138,7 +149,7 @@ export default class Grid extends Component {
         <div className="Column" key={colIndex.toString()}>
           {row.map((node, rowIndex) => (
             <Node
-              key={colIndex.toString() + ' ' + rowIndex.toString()}
+              key={colIndex.toString() + " " + rowIndex.toString()}
               id={`node-${node.gridId.colIndex}-${node.gridId.rowIndex}`}
               gridId={node.gridId}
               gridHasStart={start.present}

src/Grid/Node/Node.css

@@ -20,3 +20,7 @@
 .path {
   background-color: chartreuse;
 }
+
+.fence {
+  background-color: black;
+}

src/Grid/Node/Node.js

@@ -1,45 +1,57 @@
-import React, { Component } from 'react';
-import './Node.css';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import "./Node.css";
+import PropTypes from "prop-types";
 
 export default class Node extends Component {
   state = {
     start: false,
     finish: false,
+    fence: false,
   };
 
   clickHandler = () => {
     const { gridId, gridHasStart, gridHasFinish, nodeFlag } = this.props;
 
     if (gridHasStart && gridHasFinish) {
-      document.getElementById('button').className = 'btn btn-primary big';
+      document.getElementById("button").className = "btn btn-primary big";
     } else {
       if (!gridHasStart) {
-        nodeFlag(gridId, 'start');
+        nodeFlag(gridId, "start");
         this.setState({ start: true });
       } else {
         this.setState({ finish: true });
-        nodeFlag(gridId, 'finish');
+        nodeFlag(gridId, "finish");
       }
-      // if (!gridHasStart) {
-      //   nodeFlag(gridId, 'start');
-      //   this.setState({ start: true });
-      // } else if (gridHasStart && !gridHasFinish) {
-      //   this.setState({ finish: true });
-      //   nodeFlag(gridId, 'finish');
-      // } else {
-      //   this.setState({ start: false, finish: false });
-      //   reset();
-      // }
+    }
+  };
+
+  contextMenuHandler = (e) => {
+    e.preventDefault();
+    console.log("Right click baybee");
+    const { gridId, nodeFlag } = this.props;
+    const { fence } = this.state;
+    if (fence === false) {
+      nodeFlag(gridId, "fence");
+      this.setState({ fence: true });
+    } else {
+      nodeFlag(gridId, "fence");
+      this.setState({ fence: false });
     }
   };
 
   render() {
     return (
       <div
         onClick={this.clickHandler}
+        onContextMenu={this.contextMenuHandler}
         className={`Node ${
-          this.state.start ? 'start' : this.state.finish ? 'finish' : ''
+          this.state.start
+            ? "start"
+            : this.state.finish
+            ? "finish"
+            : this.state.fence
+            ? "fence"
+            : ""
         }`}
         id={this.props.id}
       />

src/Grid/Node/__snapshots__/Node.test.js.snap

@@ -4,5 +4,6 @@ exports[`<Node /> Test that Node renders 1`] = `
 <div
   className="Node "
   onClick={[Function]}
+  onContextMenu={[Function]}
 />
 `;

src/__snapshots__/App.test.js.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<App /> renders 1`] = `
-<div
-  className="App"
->
-  <Grid
-    view={
-      Object {
-        "height": 29.4,
-        "width": 50.2,
-      }
-    }
-  />
-</div>
-`;