-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (128 loc) · 6.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!-- TODO: add info overlay -->
<!doctype html>
<html>
<head>
<title>Pathfinding Algorithm Visualizer</title>
<link href="./style.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="assets/icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="tutorial" class="d-none">
<div class="x-out">
<i class="fas fa-times"></i>
</div>
<div class="mt-4 ml-4 mr-4 mb-4 font-small" id="tutorialText">
<div class="text-center">
<h4>About</h4>
</div>
<strong>The Grid: </strong><br>A graph, with each cell representing a node. Each cell is connected to adjacent
cells horizontally and vertically by invisible edges that (by default) cost 1 to traverse.
<br><br><strong>Weights/Walls: </strong><br>Drag or click anywhere on the grid to place or remove weights
or walls.
Use the
dropdown
to
toggle between
the two.
<br><span class="tab">- <strong class="text-danger">Weighted cells: </strong>These cells have edges that cost 10
to traverse.
<br><span class="tab">- <strong class="text-danger">Walled cells: </strong>These cells do not have edges
connecting them to adjacent cells.
<br><br><strong>Simulation Speed: </strong><br>Use the dropdown to toggle between simulation speeds.
"Instant" skips the algorithm steps and immediately draws the path.
<br><br><strong>Themes: </strong><br>Use the rightmost dropdown to toggle between color themes for the
simulation.
</div>
</div>
<div class="container-fluid text-center">
<br>
<h1>Pathfinding Algorithm Visualizer</h1><br>
<div id="info-section" class="d-none">
<span id="currently-visualizing"></span><br>
<span id="steps-taken"> </span>
</div>
<div id="info-section-placeholder">
<span class="text-white"><span class="tab"></span>
<br>
<span class="text-white"><span class="tab"></span>
</div>
<div class="row align-items-center justify-content-between">
<div class="col-7 mb-4">
<label class="invisible">Visualize</label><br>
<button id="run-greedyBFS" class="btn btn-sm btn-dark mb-1">Visualize Greedy BFS</button>
<button id="run-djikstras" class="btn btn-sm btn-dark mr-1 mb-1">Visualize Dijkstra's</button>
<button id="run-astar" class="btn btn-sm btn-dark ml-1 mb-1">Visualize A*</button>
<button id="run-bidirectionalAStar" class="btn btn-sm btn-dark ml-1 mb-1">Visualize Bidirectional
A*</button>
</div>
<div class="row col-5 justify-content-center mb-4">
<label
class="invisible">Sectionakldfjlasdasldfjkakldsjfl;kasdasdkjfaksdjfalsdjfasdfl;ajsasdklfjaldsjfadf</label><br>
<button id="info" class="btn btn-sm btn-dark mr-3 mb-1"><i class="fas fa-info-circle"></i></button>
<div class="mr-3 dropdown mb-1">
<button class=" btn btn-dark btn-sm dropdown-toggle" type="button" id="placingToggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Place Walls
</button>
<div class="dropdown-menu" aria-labelledby="speedToggle">
<span class="placeable dropdown-item">Walls</span>
<span class="placeable dropdown-item">Weights</span>
</div>
</div>
<div class="mr-3 dropdown mb-1">
<button class=" btn btn-dark btn-sm dropdown-toggle" type="button" id="speedToggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Fast
</button>
<div class="dropdown-menu" aria-labelledby="speedToggle">
<span class="speed dropdown-item">Instant</span>
<span class="speed dropdown-item">Fast</span>
<span class="speed dropdown-item">Medium</span>
<span class="speed dropdown-item">Slow</span>
</div>
</div>
<div class="mr-3 dropdown mb-1">
<button class="btn btn-dark btn-sm dropdown-toggle" type="button" id="themesToggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="themesToggle">
<span class="theme dropdown-item">Sunset Blvd.</span>
<span class="theme dropdown-item">Ocean's 11</span>
<span class="theme dropdown-item">Rachel Green</span>
<span class="theme dropdown-item">Chaos Theory</span>
<span class="theme dropdown-item">50 Shades</span>
<span class="theme dropdown-item">Fairy Floss</span>
</div>
</div>
<div class="mr-3 mb-1">
<button id="clear-grid" class="btn btn-sm btn-danger">Clear</button>
</div>
</div>
</div>
</div>
<div id="graph" class="grid"></div>
<div class="mt-4 mb-1 text-center font-italic font-small">(Proof that pathfinding algorithms are beautiful)</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/e6a392354b.js" crossorigin="anonymous"></script>
<script src="./scripts/util.js"></script>
<script src="./scripts/graph.js"></script>
<script src="./scripts/djikstra.js"></script>
<script src="./scripts/greedyBFS.js"></script>
<script src="./scripts/astar.js"></script>
<script src="./scripts/bidirectionalAStar.js"></script>
<script src="./scripts/node.js"></script>
</html>