Started updating the main form to have control over how the maze's properties. Search algorithm can now be changed on the fly.

sketch.js

@@ -6,8 +6,7 @@ var maze = {};
 var algo = {};
 
 function setup() {
-	print("hell");
-  var canvas = createCanvas(400, 400);
+  var canvas = createCanvas(500, 500);
   canvas.parent('sketch-holder');
   maze = new Maze(width, height, cellWidth, "Depth");
   frameRate(30);
@@ -23,18 +22,27 @@ function draw() {
   }
   else if (maze.mazeGenDone && algo.frontier == undefined){
 	maze.resetMazeState();
-	algo = new MazeSolver(maze.grid[0], maze.grid[maze.index(7,7)]);
+	//maze.updateMazeDisplay();
+	let selectedAlgo = document.getElementById("searchAlgo").value;
+	if(selectedAlgo == "depthFirst") 
+		algo = new DepthFirstSolver(maze.grid[0], maze.grid[maze.index(7, 7)]);
+	else if(selectedAlgo == "breadthFirst")
+		algo = new BreadthFirstSolver(maze.grid[0], maze.grid[maze.index(7,7)]);
+	//else if(selectedAlgo == "a*")
+
 	print("Maze generation done");
 	frameRate(10);
   }
   else if (maze.mazeGenDone && algo.frontier.length > 0){
-    algo.breadthFirstNextCell(maze);
+    //algo.breadthFirstNextCell(maze);
+    algo.solve(maze);
   }
   else{
   	algo.highlightFinalPath(maze);
   	
-  	
+  	let label = document.getElementById('information').innerHTML = `Maze Finished. Explored ${algo.statesExplored} states to find the answer.`;
   	print("Maze search done");
   	noLoop();
+  	toggleForm(true);
   }
 }