Added algorithm tooltip

Author: luotn

index.html

@@ -94,22 +94,22 @@
                             Select at least 1 algorithm
                         </a>
                     </li>
-                    <li class="list-group-item">
+                    <li class="list-group-item" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Uses priority queue and Manhattan distance.">
                         <input class="form-check-input me-1" type="checkbox" value="" id="AStar"
                             onchange="changeAlgorithm('AStar')">
                         <label class="form-check-label" for="AStar">A* Search</label>
                     </li>
-                    <li class="list-group-item">
+                    <li class="list-group-item" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Uses priority queue and tentative distance.">
                         <input class="form-check-input me-1" type="checkbox" value="" id="Dijkstra"
                             onchange="changeAlgorithm('Dijkstra')">
                         <label class="form-check-label" for="Dijkstra">Dijkstra's Algorithm</label>
                     </li>
-                    <li class="list-group-item">
+                    <li class="list-group-item" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Search all nodes at the present depth first.">
                         <input class="form-check-input me-1" type="checkbox" value="" id="BFS"
                             onchange="changeAlgorithm('BFS')">
                         <label class="form-check-label" for="BFS">Breadth-first Search (BFS)</label>
                     </li>
-                    <li class="list-group-item">
+                    <li class="list-group-item" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Search all nodes with the largest depth first.">
                         <input class="form-check-input me-1" type="checkbox" value="" id="DFS"
                             onchange="changeAlgorithm('DFS')">
                         <label class="form-check-label" for="DFS">Depth-first Search (DFS)</label>

js/grid.js

@@ -83,7 +83,7 @@ class GRID {
     }
 
     taxiCabDistanceToTarget(pos) {
-        return Math.abs(pos[0] - this.target[0]) + Math.abs(pos[1] - this.target[1])
+        return Math.abs(pos[0] - this.target[0]) + Math.abs(pos[1] - this.target[1]) - 1
     }
 
     print() {

js/index.js

@@ -11,6 +11,11 @@ let PositionText
 let Algorithms = []
 
 function init() {
+
+    // Init algorithm tool tips
+    const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+    const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
+
     let gridString = sessionStorage.getItem("grid")
     let algorithmString = sessionStorage.getItem("algorithms")
     let benchmark = JSON.parse(sessionStorage.getItem("benchmark"))
@@ -198,7 +203,7 @@ function addEventListeners() {
         PositionViewer.show()
     })
     gridPreview.addEventListener("mouseleave", function () {
-        PositionViewer.hide() 
+        PositionViewer.hide()
     })
 }