-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpathfinding.html
137 lines (125 loc) · 6.47 KB
/
pathfinding.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
137
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{url_for('static', filename='css/pathfinding.css')}}">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@900&display=swap" rel="stylesheet">
<link rel = "icon" href = "{{url_for('static', filename='pathfinder-logo.png')}}" type = "image/x-icon">
<title>Visual Pathfinder | SGP</title>
</head>
<body>
<div id='buffer-space-top'>
<h1 class='page-title'>VISUAL <span>PATHFINDER</span></h1>
</div>
<div id='panel-left'>
<p style='text-align: center;'><button id='calculate-button'><strong>Solve</strong></button></p>
<p style='text-align: center' id='choice-prompt'>|Choose Algorithm|</p>
<div class="custom-select" style="width:160px; padding-left: 3vw; max-width: 75%;">
<select id="algo-choice">
<option value="choose">Algorithm</option>
<!-- <option value="a-star">A<sup>*</sup></option> -->
<option value="breadth-first">Breadth First</option>
<!-- <option value="depth-first">Depth First</option> -->
</select>
</div>
<br><br><br><br><br><br>
<p style='text-align: center' id='choice-prompt'>|Choose Speed|</p>
<p style='margin-top: 2px; margin-bottom: 6px; max-width: 100%; text-align: center; font-size: 12px; color: mediumvioletred; font-style: italic;' id='choice-prompt'>(Currently disabled!)</p>
<div class="custom-select" style="width:160px; padding-left: 3vw; max-width: 75%;">
<select id="speed-choice">
<option value="choose">Speed</option>
<option value="depth-first">Slow</option>
<option value="breadth-first">Medium</option>
<option value="a-star">Fast</option>
</select>
</div>
<br><br><br><br><br><br>
<p style='text-align: center' id='choice-prompt'>|Error Box|</p>
<p style='max-width: 100%; text-align: center; font-size: 12px; color: mediumvioletred; font-style: italic;' id='choice-prompt'>(Any error messages will be displayed here!)</p>
<div id='error-box'></div>
</div>
<script>
var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < selElmnt.length; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
</script>
<div id='grid-holder'></div>
<div id='panel-right'>
<p style="text-align: center;"><button id="reset-button"><strong>Reset</strong></button></p>
</div>
<div id='buffer-space-bottom'></div>
</body>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="{{url_for('static', filename='javascript/main.js')}}"></script>
</footer>
</html>