Added furth UI behavior tweaks, removed a script and moved the p5.min.js into the repo.

index.html

@@ -25,14 +25,25 @@
   <script>
   	function updateCanvasWidth(){
   		let w = document.getElementById('canvasWidthTextbox').value;
+  		toggleReuseMazeCheckbox(false);
   		resizeCanvas(w, height);
   	}
   	
   	function updateCanvasHeight(){
   		let h = document.getElementById('canavasHeightTextbox').value;
+  		toggleReuseMazeCheckbox(false);
   		resizeCanvas(width, h);
   	}
   	
+  	function updateCellWidth(){
+  		toggleReuseMazeCheckbox(false);
+  	}
+  	
+  	function toggleReuseMazeCheckbox(enabled){
+  		document.getElementById("reuseMaze").checked = enabled;
+  		document.getElementById("reuseMaze").disabled = !enabled;
+  	}
+  	
   	function toggleForm(enabled){
   		document.getElementById("canvasProperties").disabled = !enabled;
   		document.getElementById("algo").disabled = !enabled;
@@ -41,8 +52,12 @@
   	}
   	
   	function rerun(){
-  		if (!document.getElementById("reuseMaze").checked)
+  		toggleForm(false);
+  		if (!document.getElementById("reuseMaze").checked) {
   			createNewMaze(document.getElementById("cellWidthInput").value);
+  			toggleReuseMazeCheckbox(true);
+		}
+		frameRate(Number(document.getElementById("genFrameRate").value));
   		algo = {};
 	  	maze.resetMazeState();
 		maze.updateMazeDisplay();
@@ -52,8 +67,7 @@
   <script src="maze-solver.js"></script>
   <script src="cell.js"></script>
   <script src="gen-maze.js"></script>
-  <script src="../p5.js"></script>
-  <script src="../addons/p5.sound.min.js"></script>
+  <script src="p5.min.js"></script>
   <script src="sketch.js"></script>
 </head>
 
@@ -81,7 +95,7 @@
 			</fieldset>
 			<fieldset id="misc" disabled="disabled">
 				<legend>Misc.</legend>
-				<label for="cellWidthInput">Cell Width: </label><input type="number" id="cellWidthInput" value="50" />
+				<label for="cellWidthInput">Cell Width: </label><input type="number" id="cellWidthInput" value="50" onchange="updateCellWidth()"/>
 			</fieldset>
 			<button id="runButton" type="button" onClick="rerun()" disabled>Re-run</button>
 		</form>

maze-solver.js

@@ -2,6 +2,9 @@ class MazeSolver {
 	constructor(startingCell, targetCell, searchedColor = [210, 180, 140], finalPathColor = [173, 216, 230]){
 		this.frontier = [];
 		this.explored = [];
+		
+		this.startingCellColor = [255, 0, 0];
+		this.endingCellColor = [0, 0, 255];
 		this.finalPathColor = finalPathColor;
 		this.targetCell = targetCell;
 		this.startingCell = startingCell;
@@ -20,8 +23,16 @@ class MazeSolver {
 	highlightFinalPath(maze){
 		let tmp = this.explored.pop();
 		
+		tmp.color = this.endingCellColor;
+		
+		tmp = tmp.parent;
+		
 		while(tmp != undefined){
 			tmp.color = this.finalPathColor;
+			
+			if(tmp.parent == undefined)
+				tmp.color = this.startingCellColor;
+
 			tmp = tmp.parent;
 		}
 		

sketch.js

@@ -28,7 +28,7 @@ function draw() {
 	maze.resetMazeState();
 	
 	let selectedAlgo = document.getElementById("searchAlgo").value;
-	let solvingFramerate = document.getElementById("solvingFrameRate").value;
+	
 	if(selectedAlgo == "depthFirst") 
 		algo = new DepthFirstSolver(maze.grid[0], maze.grid[maze.index(7, 7)]);
 	else if(selectedAlgo == "breadthFirst")
@@ -36,7 +36,7 @@ function draw() {
 	//else if(selectedAlgo == "a*")
 	
 	print("Maze generation done");
-	frameRate(Number(solvingFramerate));
+	frameRate(Number(document.getElementById("solvingFrameRate").value));
   }
   else if (maze.mazeGenDone && algo.frontier.length > 0){
     algo.solve(maze);