-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
103 lines (98 loc) · 4.31 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
<html>
<head>
<meta charset="utf-8"/>
<title>Maze Generators</title>
<script src="util.js"></script>
<script src="maze.js"></script>
<script src="mazerenderer.js"></script>
<script src="kruskal.js"></script>
<script src="prim.js"></script>
<script src="depthfirstsearch.js"></script>
<script src="ivy.js"></script>
<script src="depthfirstivy.js"></script>
<script src="longestpathfinder.js"></script>
<script src="dijkstra.js"></script>
<style>
.numberTextbox {
width: 30px;
text-align: right;
}
.rowEven {
background-color: #eeeeff;
}
.rowOdd {
background-color: #ffffff;
}
.indent {
padding-left: 2em;
}
fieldset {
margin-top: 1em;
}
</style>
</head>
<body>
<div style="padding-left:375px;">
<div style="overflow-y:auto; position:fixed; top:0; height:100%; margin-left:-375px; left:375px; width:375px;">
<p>See <a href="https://github.com/thejoshwolfe/maze-generator">this project on github</a> for more information.</p>
<fieldset><legend>Maze Generation</legend>
<p>
Topology:<br>
<label><input type="radio" name="topology" id="rectangleTopologyButton" checked>Rectangle</label><br>
<label><input type="radio" name="topology" id="outdoorTopologyButton">Rectangle with Outdoors</label><br>
<label><input type="radio" name="topology" id="cylinderTopologyButton">Cylinder</label><br>
<label><input type="radio" name="topology" id="torusTopologyButton">Torus</label><br>
<label><input type="radio" name="topology" id="mobiusTopologyButton">Möbius</label><br>
</p>
<p>
Size: <input id="sizeXTextbox" class="numberTextbox" value="15">x<input id="sizeYTextbox" class="numberTextbox" value="15">
</p>
<p>
Algorithm:<br>
<label><input type="radio" name="algorithm" id="depthFirstSearchAlgorithmButton" checked>Depth-First Search</label><br>
<label><input type="radio" name="algorithm" id="primAlgorithmButton">Prim</label><br>
<label><input type="radio" name="algorithm" id="kruskalAlgorithmButton">Kruskal</label><br>
<label><input type="radio" name="algorithm" id="ivyAlgorithmButton">Ivy</label><br>
<label><input type="radio" name="algorithm" id="depthFirstIvyAlgorithmButton">Depth-First Ivy</label><br>
</p>
<p>
Data: <input id="mazeSerializationTextbox" placeholder="(copy/paste)" style="width:100px">
</p>
<p>
<button id="generationGoButton">Go</button>
<button id="generationStepButton">Step</button>
<button id="generationBeDoneButton">Be Done</button>
<button id="generationResetButton">Reset</button>
</p>
<label><input type="checkbox" id="generationInteractiveButton">Interactive</label>
</fieldset>
<fieldset><legend>Longest Path</legend>
<button id="longestPathGoButton">Go</button>
<button id="longestPathStepButton">Step</button>
<button id="longestPathBeDoneButton">Be Done</button>
<button id="longestPathResetButton">Reset</button>
</fieldset>
<fieldset><legend>Experimental</legend>
<button id="shaveButton">Shave</button>
<button id="caveInButton">Cave In</button>
<button id="resetExperimentsButton">Reset</button>
</fieldset>
<fieldset><legend>Statistics</legend>
<div class="rowEven">
<label><input id="doorsPerRoomCheckbox" type="checkbox">Doors per room:</label>
<div class="indent"><canvas id="doorsPerRoomCanvas"></canvas></div>
</div>
<div class="rowOdd">
<label><input id="wallsPerVertexCheckbox" type="checkbox">Walls per vertex:</label>
<div class="indent"><canvas id="wallsPerVertexCanvas"></canvas></div>
</div>
</fieldset>
</div>
<div style="overflow-x:auto; overflow-y:auto; width:100%; height:100%;">
<canvas id="mazeCanvas" height=160 width=160></canvas>
<div style="color: #666;">Tip: Shift+Right Click to save or copy image.</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>