BFS algorithm and path drawing added

app/components/App.js

@@ -5,11 +5,15 @@ const Router = ReactRouter.BrowserRouter;
 const Route = ReactRouter.Route;
 const Switch = ReactRouter.Switch;
 const Game = require('./Game');
+const pathFind = require('../utils/BFS');
 // const Settings = require('./Settings');
 // const Results = require('./Results');
 
 function boardReset(lengthX, lengthY) {
+
 	console.log('creating board')
+	console.log('path?');
+	console.log(pathFind);
 	const board = [];
 	for (let i=0; i<lengthY; i++) {
 		board[i] = [];
@@ -44,18 +48,23 @@ class App extends React.Component {
 		this.handleClickOnBoard = this.handleClickOnBoard.bind(this);
 		this.handleStartClick = this.handleStartClick.bind(this);
 		this.handleEndClick = this.handleEndClick.bind(this);
+		this.handleGoClick = this.handleGoClick.bind(this);
 		this.updateStartLocation = this.updateStartLocation.bind(this);
 		this.updateEndLocation = this.updateEndLocation.bind(this);
+		this.updatePath = this.updatePath.bind(this);
 	}
 
 	handleClickOnBoard(x, y) {
 		console.log('trying to update state');
+		const board = this.state.board;
 		if (this.state.startFlag) {
 			this.updateStartLocation(x, y);
 		} else if (this.state.endFlag) {
 			this.updateEndLocation(x, y);
 		} else {
-			const tempBoard = this.state.board;
+			const tempBoard = board.map((row) =>{
+				return row.map((cell)=>Object.assign({}, cell));
+			})
 			tempBoard[y][x].allowed = this.state.board[y][x].allowed ? false : true;
 			console.log(tempBoard)
 			this.setState(() => {
@@ -82,6 +91,28 @@ class App extends React.Component {
 		})
 	}
 
+	handleGoClick() {
+		// console.log('go pressed!')
+		const {start, end, board} = this.state;
+		const boardCopy = board.map((row) =>{
+			return row.map((cell)=>Object.assign({}, cell));
+		})
+		const path = pathFind(boardCopy, start, end);
+		const step = -1;
+		const addSteps = (path, step) => {
+			if (path.length === 0) {
+				return
+			}
+			this.updatePath(path[0],step+1)
+			const timeoutForStepAddition = window.setTimeout(addSteps.bind(null, path.slice(1), step+1), 500)
+		}
+		addSteps(path, step);
+		// async path.map( (step, index) => {
+		// 		console.log('update');
+		// 		await window.setTimeout(this.updatePath.bind(null,step,index), 500)
+		// })
+	}
+
 	updateStartLocation(x, y) {
 		this.setState(() => {
 			return {
@@ -100,6 +131,21 @@ class App extends React.Component {
 		})
 	}
 
+	updatePath(step, stepNum) {
+		const board = this.state.board;
+		const tempBoard = board.map((row) =>{
+			return row.map((cell)=>Object.assign({}, cell));
+		})
+		const [x, y] = step;
+		tempBoard[y][x].stepVisited	= stepNum;
+
+		this.setState(() => {
+			return {
+				board: tempBoard 
+			}
+		})
+	}
+
   render() {
     return (
     <Router>
@@ -112,7 +158,8 @@ class App extends React.Component {
 		    					handleClicks = {{
 		    						handleClickOnBoard: this.handleClickOnBoard,
 		    						handleStartClick: this.handleStartClick,
-		    						handleEndClick: this.handleEndClick
+		    						handleEndClick: this.handleEndClick,
+		    						handleGoClick: this.handleGoClick
 		    					}}
 		    					updateLocations = {{
 		    						updateStartLocation: this.updateStartLocation,

app/components/Game.js

@@ -8,7 +8,7 @@ function Cell(props) {
 
 	const {x, y} = props.cellData;
 	props = props.props;
-	const {board, colorA, colorB, start, end} = props.state;
+	const {board, colorA, colorB, colorC, start, end} = props.state;
 	const lengthY = board.length;
 	// const styles = {
 	// 	cell: {	
@@ -20,7 +20,10 @@ function Cell(props) {
 		<div className = 'cellShell'
 			style = {{'height': (40/lengthY) + 'vh', 'width': (40/lengthY) + 'vh'}}>
 			<div className = 'cell'
-				style = {{'backgroundColor': (board[y][x].allowed ? colorA : colorB)}}
+				style = {{'backgroundColor': 
+											(board[y][x].stepVisited >= 0) ? colorC : (board[y][x].allowed ? colorA : colorB)
+
+								}}
 				onClick = {props.handleClickOnBoard.bind(null, x, y)}
 			>
 				{(start[0] === x) && (start[1] === y) && <div>start</div>}
@@ -155,7 +158,7 @@ function GameButtonsPanel(props) {
 			classes: 'btn success',
 			activated: () => {return false},
 			disabled: () => {return (!disabledCheck(start) || !disabledCheck(end))},
-			onClick: () => {},
+			onClick: props.handleClickOnButtons.handleGoClick,
 		}
 	];
 	console.log('buttons ok') 
@@ -184,7 +187,8 @@ function GameScreen(props) {
 			<GameButtonsPanel state = {props.state} 
 					handleClickOnButtons = {{
 						handleStartClick: props.handleClicks.handleStartClick,
-						handleEndClick: props.handleClicks.handleEndClick
+						handleEndClick: props.handleClicks.handleEndClick,
+						handleGoClick: props.handleClicks.handleGoClick	
 					}}
 			/>
 		</div>

app/utils/BFS.js

@@ -0,0 +1,122 @@
+const pathFind = (field, startP, endP) => {
+	const path = [];
+
+	// tests if the point is inside the tested field				
+	var inField = function (point) {
+		if (point[0]<field.length && point[0] >=0) {
+			if (point[1]<field[0].length && point[1] >=0) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	// tests if the point was already
+	var visited = function (point) {
+		if (field[point[0]][point[1]].stepVisited<0) {
+			return false;
+		}
+		return true;
+	}
+
+	// tests if a certain step is allowed
+	var allowedStep = function (point) {
+		if (field[point[1]][point[0]].allowed) {
+			return true;
+		} else if (!field[point[0]][point[1]].allowed) {
+			return false;	
+		}
+	}
+
+	// tests if the tested point is in fact the ending point of the search
+	var isEndPoint = function(point) {
+		if (point === endP) {
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	// returns the neighbours of a certain point
+	var getNeighbours = function (point) {
+		var neighbours = [];
+		var movementX = [1, -1, 0, 0];
+		var movementY = [0, 0, 1, -1];
+		for (var i=0; i<4; i++) {
+			let neighbour = [];
+			neighbour[0] = point[0] + movementY[i];
+			neighbour[1] = point[1] + movementX[i];
+			neighbours.push(neighbour);
+		}
+		return neighbours;
+	}
+
+	// tests if a certain point can be used (inside the board && allowed to be stepped in && was not visited)
+	var legalPoint = function (point) {
+		if (inField(point)) {
+			if (allowedStep(point)) {
+				if (!visited(point)) {
+					return true;
+				}
+			}
+		}
+		return false;
+	}
+
+	// returns the neighbours that are valid points to be used
+	var legalNeighbours = function (neighbours) {
+		var legal = [];
+		neighbours.forEach(function(neighbour) {
+			if (legalPoint(neighbour)) {
+				legal.push(neighbour);
+			}
+		})
+		return legal;
+	}
+
+	// the BFS algorithm that searches for a path between the 'start' and 'end' points
+	// returns 'true' if a path was found and 'false' if not
+	var pathExists = function() {
+		if (legalPoint(startP) && legalPoint(endP)) {
+			var testingQue = [startP];	
+			field[testingQue[0][0]][testingQue[0][1]].stepVisited = 0;
+			while(testingQue.length>0) {
+				let currStep = testingQue[0];
+				if (currStep[0] === endP[0] && currStep[1] === endP[1]) return true;
+
+				let currStepNum = field[currStep[0]][currStep[1]].stepVisited;
+				let allowedSteps = legalNeighbours(getNeighbours(currStep));
+				allowedSteps.forEach(function(nextStep){
+					field[nextStep[0]][nextStep[1]].stepVisited = currStepNum+1;
+					field[nextStep[0]][nextStep[1]].previous = currStep;
+					testingQue.push(nextStep);
+				})
+				testingQue.shift();
+			}	
+		}
+
+		return false; 
+	}
+
+	// a function that filles the 'path' object with pairs of key = step number : value = the tile location
+	var buildPath = function() {
+		var stepNum = field[endP[0]][endP[1]].stepVisited;
+		var currStep = endP;
+		path[0] = startP;
+		while (stepNum > 0) {
+			path[stepNum] = currStep;
+			stepNum--;
+			currStep=field[currStep[0]][currStep[1]].previous;
+		}
+	}
+
+	if (pathExists()) {
+		buildPath();
+		// gameService.pathExistsFlag = true;
+	}
+
+	return path;
+
+}
+
+module.exports = pathFind;