forked from rubensayshi/d3-ehp-calculator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
453 lines (443 loc) · 27.3 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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]> <!--> <html lang="en-us"> <!--<![endif]-->
<html lang="en">
<head>
<title>Diablo3 Effective Health Pool Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<!-- using different cdns (and some local) to spread the load a bit until I can benchmark things properly -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/vendor/json2.js"></script>
<script src="js/vendor/underscore-min.js"></script>
<script src="js/vendor/backbone-min.js"></script>
<script src="js/vendor/backbone.localStorage-min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<span class="brand" href="#">Diablo 3 EHP Calculator</span>
<div class="pull-right cp">
<button class="btn btn-primary manage_chars"><i class="icon-user icon-white"></i> Manage Characters</button>
</div>
</div>
</div>
</div>
<div id="container" class="container-fluid">
<div class="row-fluid">
<div id="content" class="span9"></div>
<div id="sidebar" class="span3 hidden-phone">
<div class="latest-update">
<h3>Latest Update</h3>
<p><span class="label label-inverse">Ads Suck! (part 2)</span></p>
<p>Yea, like all internet users I hate ads too, but if the revenue can cover hosting and allow me to buy a few items from RMAH then I can spend a lot more time on working on the tool! <br />
<strong>Nonetheless I added a button for returning visitors to disable the ads.</strong>
</p>
<p><span class="label label-inverse">UI improvements</span></p>
<p>The UI should make a bit more sense now and have some extra pointers about what you should do. <br />
It should also behave nicely on most smartphones, though the calculations are heavy for a phone so take it easy on your phone ;)
</p>
</div>
<div class="bugs-and-features">
<h3>Bugs & Features</h3>
If you find something that's not working properly or you got a feature request, <br />
you can report an issue on <a href="https://github.com/rubensayshi/d3-ehp-calculator/issues?state=open">github</a>
or post it in the topic on the forums (<a href="http://www.diablofans.com/topic/43712-diablo3-effective-health-pool-calculator/">diablofans</a>
or <a href="http://eu.battle.net/d3/en/forum/topic/4525923896">battle.net</a>).
</div>
<div id="donatecontainer">
<div id="donate" style="text-align: center;">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="[email protected]">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="D3 EHP Donation">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_SM.gif:NonHostedGuest">
<input style="width: auto;" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
<div id="adcontainer">
<div id="ad">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2423022198923954";
/* sidebar - bottom */
google_ad_slot = "4271138383";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
</div>
</div>
</div>
</div>
<div class="templates">
<div id="intro-template">
<div class="row-fluid">
<div class="span12">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"> <a href="#tab1" data-toggle="tab">Select or Create a Character</a> </li>
</ul>
</div>
<div class="well">
<ul class="character-list well unstyled"></ul>
<button class="btn btn-success add-character"><i class="icon-user icon-white"></i> Add New Character</button>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h3>Welcome <small>to the D3 EHP Calculator</small></h3>
<p>This is an open source effort to provide you with a tool to (easily) calculator your EHP and
to be able to compare which skills and items might provide you with the greatest benefit!
</p>
<p>If you'd like to contribute or provide feedback then my prefered method is through <a href="https://github.com/rubensayshi/d3-ehp-calculator">the github project page</a>.
I'll do my best to merge any pull requests asap and/or discuss issues added there. <br />
<br />
For other discussions or just telling me you like the tool you can use <a href="http://www.diablofans.com/topic/43712-diablo3-effective-health-pool-calculator/">the topic on diablofans.com</a>
</p>
</div>
</div>
</div>
<div id="input-template">
<div class="row-fluid">
<div class="span12 input-character character">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"> <a href="#tab1" data-toggle="tab">Input Character Stats</a> </li>
</ul>
</div>
<p><span class="badge badge-info">1</span> Select your class.</p>
<p><span class="badge badge-info">2</span> Type in the stats for your ingame character screen.</p>
<p><span class="badge badge-info">3</span> Select which passives / buffs you have on <strong><em>ingame</em> at this moment</strong> .</p>
<p><span class="badge badge-success">4</span> Click the 'Create Character' button to go to the next step!</p>
<div id="input-char-alert" class="alert alert-block">
<button class="close" data-dismiss="alert">x</button>
The stats in your ingame character screen already include a lot of your passives and buffs. <br />
Below you put in the stats from your character screen and tick the checkboxes for the passives and buffs you already have on you! <br />
That way we will be able to calculate what your stats are without those passives and we need that for good calculations :-)
</div>
<table id="base_options" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="2">Please fill in your stats as you read them from your character screen.</th>
</tr>
</thead>
<tbody>
<tr>
<th>Your Class</th>
<td>
<select class="your_class"></select>
</td>
</tr>
</tbody>
</table>
<table id="options" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="2">Please select the passives and buffs you have on you RIGHT NOW. <span class="label label-info auto_tooltip" title="you will be able to change skills to see different setups later.">?</span></th>
</tr>
</thead>
<tbody></tbody>
</table>
<table id="shared_options" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="2">Please select the passives and buffs you have on you RIGHT NOW. <span class="label label-info auto_tooltip" title="you will be able to change skills to see different setups later.">?</span></th>
</tr>
</thead>
<tbody></tbody>
</table>
<table class="table table-bordered table-striped table-condensed">
<tfoot>
<tr>
<td colspan="2" class="well" style="text-align: right;">
<button class="btn btn-danger back"><i class="icon-arrow-left icon-white"></i> Cancel / Back</button>
<button class="btn btn-success create-char"><i class="icon-user icon-white"></i> Create Character</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div id="item-template">
<table id="base_options" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="2" class="title"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="simulation-template">
<div class="row-fluid">
<div class="span12">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"> <a href="#tab1" data-toggle="tab">Your Character</a> </li>
<li> <a href="#tab2" data-toggle="tab">Item Compare</a> </li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane character active" id="tab1">
<table id="base_options" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="3">These are your base stats, without any passives or buffs applied.</th>
</tr>
<tr>
<th>Option</th>
<th>Choice</th>
<th>Alternative</th>
</tr>
</thead>
<tbody>
<tr>
<th>Your Class</th>
<td>
<select class="your_class"></select>
</td>
<td></td>
</tr>
</tbody>
</table>
<table id="options" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="3">These are the passive and buffs you can have on.</th>
</tr>
<tr>
<th>Option</th>
<th>Choice</th>
<th>Alternative</th>
</tr>
</thead>
<tbody></tbody>
</table>
<table id="extra_options" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="3">These are the passive and buffs you can have on.</th>
</tr>
<tr>
<th>Option</th>
<th>Choice</th>
<th>Alternative</th>
</tr>
</thead>
<tbody></tbody>
</table>
<table id="shared_options" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="3">These are shared passive and buffs you can have on.</th>
</tr>
<tr>
<th>Option</th>
<th>Choice</th>
<th>Alternative</th>
</tr>
</thead>
<tbody></tbody>
</table>
<table id=buffed_stats" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="3">These are your buffed stats.</th>
</tr>
</thead>
<tbody>
<tr>
<th>Buffed Life</th>
<td><input type="text" readonly="true" class="input-small form-inline life" value="" /></td>
<td></td>
</tr>
<tr>
<th>Buffed Dodge</th>
<td><input type="text" readonly="true" class="input-small form-inline dodge" value="" /></td>
<td></td>
</tr>
<tr>
<th>Buffed Armor</th>
<td><input type="text" readonly="true" class="input-small form-inline armor" value="" /></td>
<td class="armor_reduc"></td>
</tr>
<tr>
<th>Buffed Resistance</th>
<td><input type="text" readonly="true" class="input-small form-inline resist" value="" /></td>
<td class="resist_reduc"></td>
</tr>
</tbody>
</table>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Defensive Results (EHP)</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<table id="results" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th> </th>
<th>EHP without dodge</th>
<th>EHP with dodge <span id="dodge_ehp_explained" class="label label-info">?</span></th>
</tr>
</thead>
<tbody>
<tr>
<th>EHP</th>
<td><input type="text" readonly="true" class="input-small form-inline ehp" value="" /></td>
<td><input type="text" readonly="true" class="input-small form-inline ehp_dodge" value="" /></td>
</tr>
<tr>
<th>EHP melee</th>
<td><input type="text" readonly="true" class="input-small form-inline ehp_melee" value="" /></td>
<td><input type="text" readonly="true" class="input-small form-inline ehp_dodge_melee" value="" /></td>
</tr>
<tr>
<th>EHP ranged</th>
<td><input type="text" readonly="true" class="input-small form-inline ehp_ranged" value="" /></td>
<td><input type="text" readonly="true" class="input-small form-inline ehp_dodge_ranged" value="" /></td>
</tr>
<tr>
<th>EHP magic</th>
<td><input type="text" readonly="true" class="input-small form-inline ehp_magic" value="" /></td>
<td><input type="text" readonly="true" class="input-small form-inline ehp_dodge_magic" value="" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane item-compare" id="tab2">
<p><span class="badge badge-info">1</span> Select which item slot you want to compare.</p>
<p><span class="badge badge-info">2</span> Type in the stats for your current item.</p>
<p><span class="badge badge-info">3</span> And Type in the stats for your new item.</p>
<p><span class="badge badge-success">4</span> Check out the stat changes at the bottom of the screen!</p>
<div id="item-compare-alert" class="alert alert-block">
<button class="close" data-dismiss="alert">x</button>
We only compare stats for the selected slot, so when you switch to a different slot then the stats at the bottom reflect that item change, it won't display all the item changes together.
</div>
<div class="row-fluid">
<div class="span3">
<div class="tabbable">
<ul class="well nav nav-pills nav-stacked slot-list"></ul>
</div>
</div>
<div class="span9">
<div class="tab-content slot-list"></div>
</div>
</div>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Defensive Results (EHP)</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<table id="results" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="3">Replacing your 'Current Item' with the 'New Item' will result in the following change in EHP.</th>
</tr>
<tr>
<th> </th>
<th>EHP without dodge</th>
<th>EHP with dodge <span id="dodge_ehp_explained" class="label label-info">?</span></th>
</tr>
</thead>
<tbody>
<tr>
<th>EHP</th>
<td>
<input type="text" readonly="true" class="input-small form-inline ehp" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline ehp percentage" value="" />
</td>
<td>
<input type="text" readonly="true" class="input-small form-inline ehp_dodge" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline ehp_dodge percentage" value="" />
</td>
</tr>
<tr>
<th>EHP melee</th>
<td>
<input type="text" readonly="true" class="input-small form-inline ehp_melee" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline ehp_melee percentage" value="" />
</td>
<td>
<input type="text" readonly="true" class="input-small form-inline ehp_dodge_melee" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline ehp_dodge_melee percentage" value="" />
</td>
</tr>
<tr>
<th>EHP ranged</th>
<td>
<input type="text" readonly="true" class="input-small form-inline ehp_ranged" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline ehp_ranged percentage" value="" />
</td>
<td>
<input type="text" readonly="true" class="input-small form-inline ehp_dodge_ranged" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline ehp_dodge_ranged percentage" value="" />
</td>
</tr>
<tr>
<th>EHP magic</th>
<td>
<input type="text" readonly="true" class="input-small form-inline ehp_magic" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline ehp_magic percentage" value="" />
</td>
<td>
<input type="text" readonly="true" class="input-small form-inline ehp_dodge_magic" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline ehp_dodge_magic percentage" value="" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/Model/Character.js" type="text/javascript"></script>
<script src="js/Model/Item.js" type="text/javascript"></script>
<script src="js/Model/Barbarian.js" type="text/javascript"></script>
<script src="js/Model/DemonHunter.js" type="text/javascript"></script>
<script src="js/Model/Monk.js" type="text/javascript"></script>
<script src="js/Model/WitchDoctor.js" type="text/javascript"></script>
<script src="js/Model/Wizard.js" type="text/javascript"></script>
<script src="js/Collection/Characters.js" type="text/javascript"></script>
<script src="js/Collection/ItemBag.js" type="text/javascript"></script>
<script src="js/View/MainView.js" type="text/javascript"></script>
<script src="js/View/IntroView.js" type="text/javascript"></script>
<script src="js/View/SimulationView.js" type="text/javascript"></script>
<script src="js/View/InputView.js" type="text/javascript"></script>
<script src="js/View/ItemView.js" type="text/javascript"></script>
<script src="js/gahandler.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/gaq.js" type="text/javascript"></script>
</body>
</html>