-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9cedf20
commit 5c978e6
Showing
1 changed file
with
122 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,130 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>AI Search Algorithms</title> | ||
|
|
||
| <style> | ||
| body, html, #app_div { | ||
| margin: 0; | ||
| padding: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: black; | ||
| } | ||
|
|
||
| #canvas_div { | ||
| height: 90%; | ||
| } | ||
|
|
||
| #options_div { | ||
| height: 10%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| #options_div * { | ||
| font-size: 1em; | ||
| border: 1px; | ||
| } | ||
|
|
||
| #options_div label{ | ||
| color: aquamarine; | ||
| font-size: 1.3em; | ||
| } | ||
|
|
||
| span { | ||
| margin: 3em; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="app_div"> | ||
|
|
||
| <div id="canvas_div"> | ||
| <canvas id="canvas"></canvas> | ||
| </div> | ||
|
|
||
| <div id="options_div"> | ||
|
|
||
| <label for="maze_alg_selection">Maze Creation Algorithm:</label> | ||
| <select name="maze_alg_selection" id="maze_alg_selection"> | ||
| <option value="Iterative Depth First Search">Iterative Depth First Search</option> | ||
| <option value="Randomized Kruskal">Randomized Kruskal</option> | ||
| <option value="Recursive Division">Recursive Division</option> | ||
| </select> | ||
| <button onclick="maze_button_click()">Generate Maze</button> | ||
|
|
||
| <span></span> | ||
|
|
||
| <label for="search_alg_selection">Maze Pathfinding Algorithm:</label> | ||
| <select name="search_alg_selection" id="search_alg_selection"> | ||
| <option value="Depth First Search">Depth First Search</option> | ||
| <option value="Breadth First Search">Breadth First Search</option> | ||
| <option value="A* Search">A* Search</option> | ||
| </select> | ||
| <button onclick="search_button_click()" disabled>Find Path</button> | ||
|
|
||
| </div> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>AI Search Algorithms</title> | ||
|
|
||
| <style> | ||
| body, | ||
| html, | ||
| #app_div { | ||
| margin: 0; | ||
| padding: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: black; | ||
| } | ||
|
|
||
| #canvas_div { | ||
| height: 90%; | ||
| } | ||
|
|
||
| #options_div { | ||
| height: 10%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 1em; | ||
| /* Add space between elements */ | ||
| } | ||
|
|
||
| #options_div label { | ||
| color: aquamarine; | ||
| font-size: 1.3em; | ||
| margin-right: 0.5em; | ||
| /* Space between label and select */ | ||
| } | ||
|
|
||
| #options_div select, | ||
| #options_div button { | ||
| font-size: 1em; | ||
| padding: 0.5em 1em; | ||
| border: 1px solid aquamarine; | ||
| border-radius: 20px; | ||
| /* Rounded corners */ | ||
| background-color: #333; | ||
| color: aquamarine; | ||
| outline: none; | ||
| margin-right: 1em; | ||
| /* Space between select/button pairs */ | ||
| -webkit-appearance: none; | ||
| /* Remove default styling for select on webkit browsers */ | ||
| -moz-appearance: none; | ||
| /* Remove default styling for select on Firefox */ | ||
| appearance: none; | ||
| /* Remove default styling for select on modern browsers */ | ||
| } | ||
|
|
||
| #options_div button { | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| #options_div button:hover { | ||
| background-color: aquamarine; | ||
| color: #333; | ||
| } | ||
|
|
||
| span { | ||
| margin: 3em; | ||
| } | ||
|
|
||
| /* Additional styles to make select box look more like the button */ | ||
| #options_div select { | ||
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="aquamarine" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>'); | ||
| background-repeat: no-repeat; | ||
| background-position: right 0.75em center; | ||
| background-size: 0.65em auto; | ||
| padding-right: 2em; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="app_div"> | ||
|
|
||
| <div id="canvas_div"> | ||
| <canvas id="canvas"></canvas> | ||
| </div> | ||
|
|
||
| <script type="text/javascript" src="utility_calsses/PointClass.js"></script> | ||
| <script type="text/javascript" src="utility_calsses/TileClass.js"></script> | ||
| <script type="text/javascript" src="utility_calsses/TileGridClass.js"></script> | ||
|
|
||
| <script type="text/javascript" src="generation_algorithms/IterativeDepthFirstSearch.js"></script> | ||
| <script type="text/javascript" src="generation_algorithms/RandomizedKruskal.js"></script> | ||
| <script type="text/javascript" src="generation_algorithms/RecursiveDivision.js"></script> | ||
| <div id="options_div"> | ||
|
|
||
| <script type="text/javascript" src="search_algorithms/BreadthFirstSearch.js"></script> | ||
| <script type="text/javascript" src="search_algorithms/DeapthFirstSearch.js"></script> | ||
| <script type="text/javascript" src="search_algorithms/AStarSearch.js"></script> | ||
| <label for="maze_alg_selection">Maze Creation Algorithm:</label> | ||
| <select name="maze_alg_selection" id="maze_alg_selection"> | ||
| <option value="Iterative Depth First Search">Iterative Depth First Search</option> | ||
| <option value="Randomized Kruskal">Randomized Kruskal</option> | ||
| <option value="Recursive Division">Recursive Division</option> | ||
| </select> | ||
| <button onclick="maze_button_click()">Generate Maze</button> | ||
|
|
||
| <span></span> | ||
|
|
||
| <label for="search_alg_selection">Maze Pathfinding Algorithm:</label> | ||
| <select name="search_alg_selection" id="search_alg_selection"> | ||
| <option value="Depth First Search">Depth First Search</option> | ||
| <option value="Breadth First Search">Breadth First Search</option> | ||
| <option value="A* Search">A* Search</option> | ||
| </select> | ||
| <button onclick="search_button_click()" disabled>Find Path</button> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <script type="text/javascript" src="utility_calsses/PointClass.js"></script> | ||
| <script type="text/javascript" src="utility_calsses/TileClass.js"></script> | ||
| <script type="text/javascript" src="utility_calsses/TileGridClass.js"></script> | ||
|
|
||
| <script type="text/javascript" src="generation_algorithms/IterativeDepthFirstSearch.js"></script> | ||
| <script type="text/javascript" src="generation_algorithms/RandomizedKruskal.js"></script> | ||
| <script type="text/javascript" src="generation_algorithms/RecursiveDivision.js"></script> | ||
|
|
||
| <script type="text/javascript" src="search_algorithms/BreadthFirstSearch.js"></script> | ||
| <script type="text/javascript" src="search_algorithms/DeapthFirstSearch.js"></script> | ||
| <script type="text/javascript" src="search_algorithms/AStarSearch.js"></script> | ||
|
|
||
| <script type="text/javascript" src="Main.js"></script> | ||
| </body> | ||
|
|
||
| <script type="text/javascript" src="Main.js"></script> | ||
| </body> | ||
| </html> |