-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
185 lines (161 loc) · 6.72 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
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hearthstone Completion Simulator</title>
<link rel="icon" href="https://www.shareicon.net/data/256x256/2015/09/21/104684_back_358x534.png">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Volkhov:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Martel:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<style>
.box {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
max-width: 700px;
margin: auto;
background-color: #fff7fb;
border: 2px solid black;
}
.head {
font-family: 'Merriweather', serif;
font-size: 56px;
text-align: left;
background: #5ce4fa;
height: 125px;
border-top: 1px solid black;
border-bottom: 2px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
line-height: 90%;
padding: 10px;
}
#infoHead {
font-size: 48px;
background: #ff9494;
height: 65px;
}
#costHead {
font-size: 48px;
background: lightgreen;
height: 65px;
}
#solutionHead {
font-size: 48px;
background: #c37ff1;
height: 65px;
}
.subhead {
font-size: 16px;
padding: 5px;
background-color: lavender;
border-bottom: 2px solid black;
}
#infoSubhead {
background-color: #ffd3d3;
}
#costSubhead {
background-color: #d4fad4;
}
#solutionSubhead {
background-color: #e3bdff;
}
.expansionGroups {
font-weight: bolder;
}
body {
background-color: seashell;
}
#avgResultsOutput, #avgCostOutput {
font-size: 24px;
text-align: center;
}
#minResultsOutput, #maxResultsOutput {
text-align: center;
}
#top {
border-top: 40px;
background: #f1f1f1;
}
#simulation {
padding: 5px;
}
#discussing {
padding: 10px;
}
.image {
display: block;
margin-left: auto;
margin-right: auto;
}
input[type=number] {
width: 110px;
}
</style>
</head>
<body>
<br>
<div class="box">
<div id="top">
<div class="head">Hearthstone Set Completion Simulator</div>
<div class="subhead">A tool to estimate how many packs you would need to open to complete a card set based on how many cards you already own from the set by running 10000 rounds of pack opening simulations.</div>
</div>
<div id="simulation">
<br>
<form>
<select name="htmlSet" id="htmlSet" required>
<option class="expansionGroups" id="invalid" disabled>Wild Expansions</option>
<option value="Goblins vs Gnomes">Goblins vs Gnomes</option>
<option value="The Grand Tournament">The Grand Tournament</option>
<option value="Whispers of the Old Gods">Whispers of the Old Gods</option>
<option value="Mean Streets of Gadgetzan">Mean Streets of Gadgetzan</option>
<option value="Journey to UnGoro">Journey to Un'Goro</option>
<option value="Knights of the Frozen Throne">Knights of the Frozen Throne</option>
<option value="Kobolds & Catacombs">Kobolds & Catacombs</option>
<option value="The Witchwood">The Witchwood</option>
<option value="The Boomsday Project">The Boomsday Project</option>
<option value="Rastakhan Rumble">Rastakhan's Rumble</option>
<option class="expansionGroups" disabled>Standard Expansions</option>
<option value="Classic Set">Classic Set</option>;
<option value="Rise of Shadows">Rise of Shadows</option>
<option value="Uldum">Saviors of Uldum</option>
<option value="Descent of Dragons">Descent of Dragons</option>
<option value="Ashes of Outland">Ashes of Outland</option>
<option value="Scholomance Academy">Scholomance Academy</option>
<option value="Darkmoon Faire" selected>Darkmoon Faire</option>
</select>
<br><br>
<input type=number min=0 name="commons" id="commons" placeholder="Commons"/>
<input type=number min=0 name="rares" id="rares" placeholder="Rares"/>
<input type=number min=0 name="epics" id="epics" placeholder="Epics"/>
<input type=number min=0 name="legendaries" id="legendaries" placeholder="Legendaries"/>
<br><br>
</form>
<button onclick=completionSim(htmlSet.value,commons.value,rares.value,epics.value,legendaries.value)>Run Simulation</button>
<hr>
<script src="HearthstoneCardPacks.js"></script>
<p id="avgResultsOutput"></p>
<p id="avgCostOutput"></p>
<div id="minResultsOutput"></div>
<div id="maxResultsOutput"></div>
</div>
</div>
<br><br>
<div class="box">
<div id="top">
<div class="head" id="infoHead">Retrieve Your Information</div>
<div id="infoSubhead" class="subhead">
To save yourself the trouble of having to count your collection by hand, you can use HSReplay's collection tracker to run a personalized simulation.
</div>
</div>
<p>
<ol>
<li>Download and install <a href="https://hsreplay.net/downloads/" target="_blank">Hearthstone Deck Tracker</a></li>
<li>Sign in on the Deck Tracker App</li>
<li>Open your collection in game with the Deck Tracker active to sync</li>
<li>View collection info by set on <a href="https://hsreplay.net/collection/mine/" target="_blank">HSReplay's Site</a></li>
</ol>
</p>
</div>
<br><br>
</body>
</html>