Added priorityqueue and refined drawing

Author: JohnKesko

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+.vscode

css/style.css

@@ -37,11 +37,33 @@ body {
 }
 
 .container {
-	display: flex;
-	padding: 10px;
+	display: grid;
+	grid-template-columns: 2fr;
+
+	gap: 20px;
 	justify-content: center;
+	align-items: center;
 }
 
-#visitedNodes {
+/* #message {
 	margin-left: 10px;
+} */
+
+#heuristic-distance {
+	padding: 10px;
+	font-size: 16px;
+}
+
+#grp-box-label {
+	font-size: 18px;
+}
+
+#speed {
+	padding: 10px;
+	font-size: 16px;
+}
+
+.node {
+	padding: 10px;
+	font-size: 16px;
 }

html/index.html

@@ -13,20 +13,41 @@ <h1 class="">A *</h1>
 		</div>
 		<canvas id="canvas" width="1000" height="1000"></canvas>
 		<div class="footer grid">
-			<div class="container">
-				Visited Nodes:
-				<span id="visitedNodes">0</span>
+			<div>
+				<label for="heuristic" id="grp-box-label">Choose heuristic distance h(n):</label>
+				<select name="heuristic" id="heuristic-distance">
+					<option value="diagonal">Diagonal</option>
+					<option value="euclidean">Euclidean</option>
+					<option value="manhattan">Manhattan</option>
+				</select>
 			</div>
 			<div>
-				<button class="std-btn" onclick="startDraw()">Start Draw</button>
-				<button class="std-btn" onclick="stopDrawing()">Stop Draw</button>
-				<button class="std-btn" onclick="resetCanvas()">Reset Canvas</button>
+				<label for="speed">Animation Speed:</label>
+				<input type="number" id="speed" placeholder="Seconds" value="0.25" />
 			</div>
+
 			<div>
-				<button class="std-btn" onclick="startAlgo()">Start Algo</button>
-				<button class="std-btn" onclick="resetAlgo()">Reset Algo</button>
-				<button class="std-btn" onclick="stopAlgo()">Stop</button>
+				<label for="startposition">Start Node Position:</label>
+				<input type="number" id="start-node-x" class="node" value="1" />
+				<input type="number" id="start-node-y" class="node" value="1" />
 			</div>
+			<div>
+				<label for="endposition">End Node Position:</label>
+				<input type="number" id="end-node-x" class="node" value="48" />
+				<input type="number" id="end-node-y" class="node" value="48" />
+			</div>
+			<div>
+				<button class="std-btn" id="randomize-nodes">Randomize Start and End</button>
+			</div>
+			<p id="message">#</p>
+			<div>
+				<button class="std-btn" onclick="startAlgo()">Start A*</button>
+				<button class="std-btn" onclick="resetAlgo()">Reset</button>
+			</div>
+			<!-- <div>
+				<button class="std-btn" onclick="startDraw()">Start Draw</button>
+				<button class="std-btn" onclick="resetCanvas()">Reset Canvas</button>
+			</div> -->
 			<p>@github.com/johnkesko</p>
 		</div>
 		<script type="module" src="/js/main.js"></script>