-
Notifications
You must be signed in to change notification settings - Fork 0
/
mobile_creatures.html
160 lines (160 loc) · 7.31 KB
/
mobile_creatures.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!-- Created by Nicole Walter -->
<html>
<head>
<meta name = "viewport" content = "width=device-width, minimum-scale=1.0, maximum-scale = 1.0, user-scalable = no">
<title>D&D Utility Tool</title>
<link rel="shortcut icon" type="image/png" href="favicon.png?">
<style>
p {
margin: 5px;
}
body { margin:0; }
input[type=text], input[type=number], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button {
background-color:Gainsboro;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
}
</style>
</head>
<body onresize="resize_canvas()">
<script type="text/javascript" src="js/resize.js" ></script>
<script src="js/functionality.js" type="text/javascript"></script>
<header>
<h2 style="text-align:center">Creatures and Combat</h2>
</header>
<form>
<label for="crname"> Creature Name:</label>
<input type="text" id="crname" name="crname" value="" size="15">
<br>
<label for="minxp"> Minimum XP:</label>
<input type="number" id="minxp" name="minxp" min="0" size="4">
<br>
<label for="maxxp"> Maximum XP:</label>
<input type="number" id="maxxp" name="maxxp" size="4">
<br>
<label for="book"> Book:</label>
<select name="book" id="book" multiple>
<option value="">Any</option>
<option value="Tome of Beasts">Tome of Beasts</option>
<option value="Monster Manual">Monster Manual</option>
<option value="Volo's Guide to Monsters">Volo's Guide to Monsters</option>
<option value="Mordenkainen's Tome of Foes">Mordenkainen's Tome of Foes</option>
</select>
<br>
<label for="alignment"> Alignment:</label>
<select name="Alignment" id="alignment" multiple>
<option value="">Any</option>
<option value="lawful good">Lawful Good</option>
<option value="neutral good">Neutral Good</option>
<option value="chaotic good">Chaotic Good</option>
<option value="lawful neutral">Lawful Neutral</option>
<option value="neutral">Neutral</option>
<option value="chaotic neutral">Chaotic Neutral</option>
<option value="lawful evil">Lawful Evil</option>
<option value="neutral evil">Neutral Evil</option>
<option value="chaotic evil">Chaotic Evil</option>
<option value="unaligned">Unaligned</option>
</select>
<br>
<label for="environment"> Environment:</label>
<select name="environment" id="environment" multiple>
<option value="">Any</option>
<option value="Aquatic">Aquatic</option>
<option value="Arctic">Arctic</option>
<option value="Cave">Cave</option>
<option value="Coast">Coast</option>
<option value="Desert">Desert</option>
<option value="Forest">Forest</option>
<option value="Grassland">Grassland</option>
<option value="Mountain">Mountain</option>
<option value="Planar">Planar</option>
<option value="Ruins">Ruins</option>
<option value="Swamp">Swamp</option>
<option value="Underground">Underground</option>
<option value="Urban">Urban</option>
</select>
<br>
<label for="creaturetype"> Type:</label>
<select name="creaturetype" id="creaturetype" multiple>
<option value="">Any</option>
<option value="Aberration">Aberration</option>
<option value="Beast">Beast</option>
<option value="Celestial">Celestial</option>
<option value="Construct">Construct</option>
<option value="Dragon">Dragon</option>
<option value="Elemental">Elemental</option>
<option value="Fey">Fey</option>
<option value="Fiend">Fiend</option>
<option value="Giant">Giant</option>
<option value="Humanoid">Humanoid</option>
<option value="Monstrosity">Monstrosity</option>
<option value="Ooze">Ooze</option>
<option value="Plant">Plant</option>
<option value="Undead">Undead</option>
</select>
<br>
<label for="size"> Size:</label>
<select name="Size" id="size" multiple>
<option value="">Any</option>
<option value="Tiny">Tiny</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Huge">Huge</option>
<option value="Gargantuan">Gargantuan</option>
</select>
</form>
<button class="button" onclick="creatureSearch()">Search</button>
<p class="creatureDisplay" style="height:500px;border:1px solid #ccc;font-size:14px;overflow:auto;" id="creatures"></p>
<button onclick="sortAlphabeticallyAscending()">Sort A-Z</button>
<button onclick="sortAlphabeticallyDescending()">Sort Z-A</button>
<button onclick="sortXP(false)">Sort Top XP</button>
<button onclick="sortXP(true)">Sort Low XP</button>
<p style="font-size:14px;" id="totalEncounterXP"></p>
<button class="button" onclick="generateEncounter()">Generate Combat Encounter</button>
<label for="encounterxp"> XP Budget to use for your encounter:</label>
<input type="number" id="encounterxp" name="encounterxp" min="0" size="2">
<header>
<h2 style="text-align:center">Calculate XP Budget</h2>
</header>
<form>
<label for="numchar"> Number of Characters:</label>
<input type="number" id="numchar" name="numchar" value="" min=1 max=99>
<label for="level"> Average Character Level:</label>
<input type="number" id="level" name="level" value="" min=1 max=20>
<label for="difficulty"> Difficulty of Encounter:</label>
<select name="difficulty" id="difficulty">
<option value="Easy">Easy</option>
<option value="Medium">Medium</option>
<option value="Hard">Hard</option>
<option value="Deadly">Deadly</option>
</select>
</form>
<button class="button" onclick="calculateXP()"> Calculate XP</button>
<p style="display:inline-block;font-size:14px;" id="xpbudget"></p>
<header>
<h2 style="text-align:center">Treasure Hoard</h2>
</header>
<form>
<label for="treasurexp"> XP Budget for Loot:</label>
<input type="number" id="treasurexp" name="treasurexp" value="" min=0>
</form>
<button class="button" onclick="generateTreasure()">Generate Treasure</button>
<button class="button" onclick="clearTreasure()">Clear</button>
<p style="font-size:14px;" class="treasureDisplay" id="treasure"></p>
</body>
</html>