Maze-Solver/index.html at main · Columbium41/Maze-Solver · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="https://github.com/Columbium41">
    <meta name="description" content="A web app that lets users build and test mazes with pathfinding algorithms">
    <meta name="keywords" content="HTML, CSS, JavaScript, Maze, Maze Solver, Maze Visualization, Pathfinding, Pathfinding Visualization, Graph Theory">

    <link rel="stylesheet" href="./src/css/header.css">
    <link rel="stylesheet" href="./src/css/app.css">
    <link rel="stylesheet" href="./src/css/styles.css">
    <link rel="icon" type="png" href="./src/icon.png">

    <script src="./src/js/header.js" defer></script>
    <script type="module" src="./src/js/script.js" defer></script>

    <title>Maze Solver</title>
</head>
<body>
    <noscript>Sorry, your browser does not support JavaScript</noscript>
    <div class="app">
        <div id="maze-settings">
            <div class="top-bar">
                <h2>Maze Settings</h2>
            </div>
            <div id="maze-ui" class="col-flex">
                <div class="ui-container col-flex">
                    <h2>View</h2>
                    <label for="show-grid">show grid lines:
                        <input type="checkbox" class="checkbox" id="show-grid">
                    </label>
                    <label for="visualize-steps">visualize steps:
                        <input type="checkbox" class="checkbox" id="visualize-steps" checked>
                    </label>
                    <label for="visualize-delay-input">
                        <article>delay (20ms):</article>
                        <input type="range" value="20" min="5" max="100" id="visualize-delay-input">
                    </label>
                </div>
                <div class="ui-container row-flex">
                    <h2>Edit</h2>
                    <label for="grid-size-input">
                        <article>Tile Size (30px):</article>
                        <input type="range" value="30" min="10" max="50" id="grid-size-input">
                    </label>
                    <button class="button edit-button green-bg" id="start-button" data-active>Start Block</button>
                    <button class="button edit-button green-bg" id="dest-button">Destination Block</button>
                    <button class="button edit-button green-bg" id="wall-button">Wall</button>
                    <button class="button edit-button green-bg" id="delete-button">Delete</button>
                    <button class="button red-bg" id="delete-all-button">Delete All</button>
                </div>
                <div class="ui-container col-flex">
                    <h2>Run</h2>
                    <select name="selected-generate-algorithm" id="generate-maze-select">
                        <option value="random-prim">Randomized Prim</option>
                        <option value="random-kruskal">Randomized Kruskal</option>
                        <option value="random-dfs">Randomized Depth-First Search</option>
                        <option value="aldous-broder">Aldous-Broder Algorithm</option>
                    </select>
                    <button class="button blue-bg" id="generate-button">Generate Maze</button>
                    <select name="selected-solve-algorithm" id="solve-maze-select">
                        <option value="DFS">Depth-First Search</option>
                        <option value="BFS">Breadth-First Search</option>
                        <option value="BBFS">Bidirectional Search</option>
                        <option value="A-star">A* Search Algorithm</option>
                    </select>
                    <button class="button blue-bg" id="solve-button">Solve Maze</button>
                    <h4 id="path-length">Path Length: N/A</h4>
                </div>
            </div>
        </div>
        <div id="canvas-container">
            <canvas id="canvas">
                Canvas is not supported in your browser.
            </canvas>
        </div>
    </div>
</body>
</html>