Merge pull request aimacode#55 from Rishav159/test

Added Feature to block/unblock cells by clicking
jarvis2324 · Mar 7, 2017 · db42176 · db42176
2 parents 9aa5d7f + 345f063
commit db42176
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 18 deletions.
diff --git a/3-Solving-Problems-By-Searching/c_breadthFirstSearch.js b/3-Solving-Problems-By-Searching/c_breadthFirstSearch.js
@@ -85,8 +85,39 @@ $(document).ready(function(){
 	var state,lastState;
 	var m_frame = DELAY;
 	var tiles = [];
+	var isBinded = false;
 
+	function clickHandler(){
+		two.unbind('update');
+		tiles = [];
+		m_frame = DELAY;
+		//Block-Unblock the clicked cell
+		//Index attribute of the tag will contain its index in the graph
+		index = this.getAttribute('index');
+		if(index != start && index != end){
+			[x,y] = problem.getIJ(index);
+			if(graph[x][y] == 1){
+				graph[x][y] = 0;
+			}else{
+				graph[x][y] = 1;
+			}
+		}
+		isBinded = false;
+		init();
+	}
 	function updateHandler(frameCount){
+		//We need to check if two has already rendered the tags before attempting
+		//to bind the click event.
+		if(!isBinded && document.getElementById(tiles[0].id)){
+			for(var i=0;i<tiles.length;i++){
+					var elem = document.getElementById(tiles[i].id);
+					//Each path tag will now have index attribute containing its index
+					//in the graph array
+					elem.setAttribute('index',i)
+					elem.addEventListener('click',clickHandler)
+				}
+			isBinded = true;
+		}
 		--m_frame;
 		lastState = state;
 		if(m_frame == 0){
@@ -96,15 +127,9 @@ $(document).ready(function(){
 			interpolate();
 		}
 	};
-	function clickHandler(){
-		two.unbind('update');
-		tiles = [];
-		m_frame = DELAY;
-		init();
-	}
+
 	function init(){
 		canvas = document.getElementById('breadthFirstSearchCanvas');
-		canvas.addEventListener('click',clickHandler,false);
 		canvas.innerHTML = "";
 		w = canvas.offsetWidth, h = 300;
 		two = new Two({width:w , height:h}).appendTo(canvas);
@@ -118,13 +143,15 @@ $(document).ready(function(){
 		two.bind('update',updateHandler).play();
 
 		drawBackground();
+
 	};
 
 	function step(){
 		var isNewState,newState;
 		[isNewState,newState] = bfs.iterate();
 		if(isNewState){
 			state = newState;
+
 		}
 	};
 
@@ -140,9 +167,9 @@ $(document).ready(function(){
 				temp.fill = NONBLOCKING;
 				temp.noStroke();
 				tiles.push(temp);
-
 			}
 		}
+
 		tiles[problem.INITIAL].fill = STARTCOLOR;
 		tiles[problem.END].fill = ENDCOLOR;
 		var backgroundGroup = two.makeGroup(tiles);
@@ -155,8 +182,9 @@ $(document).ready(function(){
 		}
 		if(state == problem.END){
 			tiles[state].fill = FINISHCOLOR;
+
 		}
 	}
-	
+
 	init();
 });
diff --git a/3-Solving-Problems-By-Searching/c_depthFirstSearch.js b/3-Solving-Problems-By-Searching/c_depthFirstSearch.js
@@ -85,8 +85,40 @@ $(document).ready(function(){
 	var state,lastState;
 	var m_frame = DELAY;
 	var tiles = [];
+  var isBinded = false;
+
+	function clickHandler(){
+		two.unbind('update');
+		tiles = [];
+		m_frame = DELAY;
+		//Block-Unblock the clicked cell
+		//Index attribute of the tag will contain its index in the graph
+		index = this.getAttribute('index');
+		if(index != start && index != end){
+			[x,y] = problem.getIJ(index);
+			if(graph[x][y] == 1){
+				graph[x][y] = 0;
+			}else{
+				graph[x][y] = 1;
+			}
+		}
+		isBinded = false;
+		init();
+	};
 
 	function updateHandler(frameCount){
+		//We need to check if two has already rendered the tags before attempting
+		//to bind the click event.
+		if(!isBinded && document.getElementById(tiles[0].id)){
+			for(var i=0;i<tiles.length;i++){
+					var elem = document.getElementById(tiles[i].id);
+					//Each path tag will now have index attribute containing its index
+					//in the graph array
+					elem.setAttribute('index',i)
+					elem.addEventListener('click',clickHandler)
+				}
+			isBinded = true;
+		}
 		--m_frame;
 		lastState = state;
 		if(m_frame == 0){
@@ -96,12 +128,7 @@ $(document).ready(function(){
 			interpolate();
 		}
 	};
-	function clickHandler(){
-		two.unbind('update');
-		tiles = [];
-		m_frame = DELAY;
-		init();
-	}
+
 	function init(){
 		canvas = document.getElementById('depthFirstSearchCanvas');
 		// canvas.addEventListener('click',clickHandler,false);
@@ -134,7 +161,6 @@ $(document).ready(function(){
 		for(var i = 0; i < problem.ROWS; i++){
 			for(var j = 0; j < problem.COLS; j++){
 				var temp = two.makeRectangle(SIZE/2+j*SIZE,SIZE/2+i*SIZE,SIZE,SIZE);
-				console.log(temp._renderer.elem);
 				if(problem.graph[i][j])
 				temp.fill = BLOCKING;
 				else

diff --git a/3-Solving-Problems-By-Searching/index.html b/3-Solving-Problems-By-Searching/index.html
@@ -35,7 +35,7 @@
       <h1>Solving Problems By Searching</h1>
 
       <h2>Breadth First Search</h2>
-      <p>Click on the canvas to restart the simulation</p>
+      <p>Click on the cells to block/unblock the cells and restart the simulation.</p>
       <div class = "canvas" id="breadthFirstSearchCanvas" height="300px">
       </div>
 
@@ -49,7 +49,7 @@ <h2>Uniform Cost Search</h2>
       <pre id="uniformCostSearchCode"></pre>
 
       <h2>Depth First Search</h2>
-      <p>Click on the canvas to restart the simulation</p>
+      <p>Click on the cells to block/unblock the cells and restart the simulation.</p>
       <div class = "canvas" id="depthFirstSearchCanvas" height="300px">
       </div>