forked from rubensayshi/d3-ehp-calculator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
522 lines (511 loc) · 31.8 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
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
<!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>
<ul class="nav pull-right">
<li>
<div class="btn-group">
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-wrench icon-white"></i> Settings <span class="caret"></span></a>
<ul class="dropdown-menu" id="settings">
<li class="divider"></li>
<li class="nav-header">Display as</li>
<li id="display_as_EHP">
<a href="#"><input type="radio" /> EHP (Effective Hit Points)</a>
</li>
<li id="display_as_VITeq">
<a href="#"><input type="radio" /> VITeq (VIT Equivelant)</a>
</li>
<li class="divider"></li>
</ul>
</div>
</li>
<li class="cp">
<button class="btn btn-primary manage_chars"><i class="icon-user icon-white"></i> Manage Characters</button>
</li>
</ul>
</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">Equip & Reset New Item</span></p>
<p>Thanks to some sweet contributions by Scott (Smerchek) there's now a reset and equip button for the new items, making maintaining your character a lot easier!</p>
<p><span class="label label-inverse">Shield block</span></p>
<p><strong>FINALY!</strong> Thanks to some awesome help by <em>Entropy42</em> (diablofans forums) I now have a good solution to calculate EHP from block chance / amount. <br />
Some more work needs to be done on some presets for incoming damage, but the most important part is functional! </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">
<script type="text/template" id="result-row-template">
<tr>
<th><%= title %></th>
<td><input type="text" readonly="true" class="input-small form-inline ehp_<%= key %>" value="" /></td>
<td><input type="text" readonly="true" class="input-small form-inline ehp_<%= key %>_b" value="" /></td>
<td><input type="text" readonly="true" class="input-small form-inline ehp_<%= key %>_d" value="" /></td>
<td><input type="text" readonly="true" class="input-small form-inline ehp_<%= key %>_bnd" value="" /></td>
</tr>
</script>
<script type="text/template" id="itemcompare-result-row-template">
<tr>
<th><%= title %></th>
<td>
<input type="text" readonly="true" class="input-msmall form-inline <%= type %>_<%= key %>" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline <%= type %>_<%= key %> percentage" value="" />
</td>
<td>
<input type="text" readonly="true" class="input-msmall form-inline <%= type %>_<%= key %>_b" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline <%= type %>_<%= key %>_b percentage" value="" />
</td>
<td>
<input type="text" readonly="true" class="input-msmall form-inline <%= type %>_<%= key %>_d" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline <%= type %>_<%= key %>_d percentage" value="" />
</td>
<td>
<input type="text" readonly="true" class="input-msmall form-inline <%= type %>_<%= key %>_bnd" value="" />
<input type="text" readonly="true" class="input-xsmall form-inline <%= type %>_<%= key %>_bnd percentage" value="" />
</td>
</tr>
</script>
<div id="intro-template">
<div class="row-fluid">
<div class="span12">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"> <a href="#character-list" data-toggle="tab">Select or Create a Character</a> </li>
<li> <a href="#intro-ehp" data-toggle="tab">What is EHP?</a> </li>
<li> <a href="#intro-viteq" data-toggle="tab">What is VITeq?</a> </li>
</ul>
</div>
<div class="tab-content">
<div id="character-list" class="tab-pane active well">
<h3>Characters</h3>
<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 id="intro-ehp" class="tab-pane well">
<h3>What does EHP stand for?</h3>
<p>I think originally EHP started as 'Effective Hit Points', over the course of years it has gotten a lot of varations and I tent to use 'Effective Health Pool'. <br />
</p>
<h3>So what is it?</h3>
<p>EHP is how much <em>raw</em> damage you can take before you die.
</p>
<h3>How do you calculate it?</h3>
<p>
So we calculate it by taking your HP and then adding all your damage reduction to it. <br />
Usually this is from multiple sources, such as armor, resistance, skills, passives, etc.
</p>
<h3>Why do you care about EHP?</h3>
<p>
Higher EHP means we can take more damage before you die, which means we can survive longer. <br />
</p>
</div>
<div id="intro-viteq" class="tab-pane well">
<h3>What does VITeq stand for?</h3>
<p>VITeq = VITality EQuivalent
</p>
<h3>So what is it?</h3>
<p>It's how much VIT a stat equals to, for example if the calculator says +10 armor is 3 VITeq then that means that 10 armor gives as much EHP as 3 VIT would give you!
</p>
</div>
</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="#input-character" data-toggle="tab">Input Character Stats</a> </li>
</ul>
</div>
<div class="tab-content">
<div id="input-character">
<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>
</div>
<div id="item-template">
<table id="base_options" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="2" class="title">
<span></span>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="simulation-template">
<div class="row-fluid">
<div class="span12">
<div class="tabbable">
<div class="pull-right"></div>
<ul class="nav nav-tabs">
<li class="active"> <a href="#character" data-toggle="tab">Your Character</a> </li>
<li> <a href="#item-compare" data-toggle="tab">Item Compare</a> </li>
<li> <a href="#stat-weight" data-toggle="tab">Stat Weight</a> </li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane character active" id="character">
<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="#character-ehp" data-toggle="tab">Defensive Results (EHP)</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="character-ehp">
<table class="table table-bordered table-striped table-condensed results">
<thead>
<tr>
<th> </th>
<th>EHP
<br /><small>base</small></th>
<th>EHP
<br /><small>with block</small></th>
<th>EHP
<br /><small>with dodge</small></th>
<th>EHP
<br /><small>with dodge & block</small></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane item-compare" id="item-compare">
<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="#item-compare-ehp" data-toggle="tab">Defensive Results (EHP)</a></li>
<li><a href="#item-compare-viteq" data-toggle="tab">Defensive Results (VITeq)</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="item-compare-ehp">
<table class="table table-bordered table-striped table-condensed results">
<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
<br /><small>base</small></th>
<th>EHP
<br /><small>with block</small></th>
<th>EHP
<br /><small>with dodge</small></th>
<th>EHP
<br /><small>with dodge & block</small></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="tab-pane" id="item-compare-viteq">
<table class="table table-bordered table-striped table-condensed results">
<thead>
<tr>
<th colspan="3">Replacing your 'Current Item' with the 'New Item' will result in the following change in VITeq.</th>
</tr>
<tr>
<th> </th>
<th>VITeq
<br /><small>base</small></th>
<th>VITeq
<br /><small>with block</small></th>
<th>VITeq
<br /><small>with dodge</small></th>
<th>VITeq
<br /><small>with dodge & block</small></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane statweight" id="stat-weight">
<table id="statweight" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th colspan="3">These are the stat weights, based on your current stats.</th>
</tr>
<tr>
<th>Stat</th>
<th>EHP</th>
<th>VIT Equivelant <span class="label label-info auto_tooltip" title="VIT Equivelant is EHP normalized back to VIT.">?</span></th>
<th>%%</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="js/Model/Settings.js" type="text/javascript"></script>
<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>