added breadth first search algorithm

app.js

@@ -16,5 +16,8 @@ $(document).ready(function() {
   } else if (algo == "dfs") {
     $("#nav-algo").append("  " + "Depth First Search");
     $("#current-algo").attr("value", "tree");
+  } else if (algo == "bfs") {
+    $("#nav-algo").append("  " + "Breadth First Search");
+    $("#current-algo").attr("value", "tree");
   }
 });

index.html

@@ -30,7 +30,7 @@
               </a>
               <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                 <a class="dropdown-item" href="index.html?algo=dfs">Depth First Search</a>
-                <a class="dropdown-item" href="#">Breadth First Search</a>
+                <a class="dropdown-item" href="index.html?algo=bfs">Breadth First Search</a>
               </div>
             </li>
             <li class="nav-item">
@@ -74,6 +74,7 @@
     <script src="app.js"></script>
     <script src="js/bellman.js"></script>
     <script src="js/dfs.js"></script>
+    <script src="js/bfs.js"></script>
     <script src="js/tutorial.js"></script>
 
     <div id = "tutorial" class="modal" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">

js/bfs.js

@@ -0,0 +1,93 @@
+$(document).ready(function() {
+  var url = window.location.href;
+  url = new URL(url);
+  var algo = url.searchParams.get("algo");
+  if (algo == "bfs") {
+    $("#start").click(function() {
+      currentSelection = "";
+      if (currentSource != currentDestination && currentRun == 0) {
+        //Run bfs
+        //Find the current Source Node
+        var node = findNode(currentSource);
+        var needVisit = new Array();
+
+        node.edges.forEach(edge => {
+          if (findNode(edge).valid == true) {
+            needVisit.push(edge);
+          }
+        });
+        updateVisit(currentSource);
+
+        var found = false;
+        var visitOrder = new Array();
+        var newNeedVisit = new Array();
+        while (!found && needVisit.length > 0) {
+          var current = needVisit.pop();
+          //visualizeDfsNode(current);
+          visitOrder.push(current);
+          updateVisit(current);
+          if (sameNode(current, currentDestination)) {
+            found = true;
+          }
+          if (hasUnvisitedChildNodes(current)) {
+            findNode(current).edges.forEach(edge => {
+              if (findNode(edge).valid && findNode(edge).visited == false) {
+                newNeedVisit.push(edge);
+              }
+            });
+          }
+          if (needVisit.length == 0) {
+            newNeedVisit = [...new Set(newNeedVisit)];
+            newNeedVisit.forEach(edge => {
+              needVisit.push(edge);
+            });
+            newNeedVisit = new Array();
+          }
+        }
+        currentRun += 1;
+        visualizeDfsNode(visitOrder, found);
+        $("#source").attr("draggable", "false");
+        $("#destination").attr("draggable", "false");
+      }
+    });
+  }
+});
+
+var visualizeDfsNode = async function(nodeList, found) {
+  for (var i = 0; i < nodeList.length; i++) {
+    await updateDfsNodeColor(nodeList[i]);
+  }
+  if (!found) {
+    alert("Destination Not Found");
+  }
+};
+
+var updateDfsNodeColor = function(node) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      //if skyblue or deep skyblue
+      if (
+        findElement(node).css("background-color") == "rgb(135, 206, 235)" ||
+        findElement(node).css("background-color") == "rgb(0, 191, 255)"
+      ) {
+        findElement(node).css("background-color", "deepskyblue");
+      } else {
+        findElement(node).css("background-color", "skyblue");
+      }
+      resolve("done");
+    }, 5);
+  });
+};
+
+var hasUnvisitedChildNodes = function(node) {
+  var count = 0;
+  findNode(node).edges.forEach(edge => {
+    if (findNode(edge).valid && findNode(edge).visited == false) {
+      count += 1;
+    }
+  });
+  if (count > 0) {
+    return true;
+  }
+  return false;
+};