Difference between revisions of "Widget:UnitStatsCalculator"
Jump to navigation
Jump to search
imported>Elaeagnifolia |
imported>Elaeagnifolia |
||
| (207 intermediate revisions by 3 users not shown) | |||
| Line 2: | Line 2: | ||
// Constants | // Constants | ||
const MIN_LEVEL = 1; | const MIN_LEVEL = 1; | ||
| − | const | + | const UB_LEVEL_0 = <!--{$0ubLevel}-->; |
| − | const | + | const UB_LEVEL_1 = <!--{$1ubLevel}-->; |
| − | const | + | const UB_LEVEL_2 = <!--{$2ubLevel}-->; |
| − | const | + | const UB_LEVEL_3 = <!--{$3ubLevel}-->; |
| − | const MAX_LEVEL = | + | const MAX_LEVEL = <!--{$maxLevel}-->; |
const MIN_HP = <!--{$minHp}-->; | const MIN_HP = <!--{$minHp}-->; | ||
const MAX_HP = <!--{$maxHp}-->; | const MAX_HP = <!--{$maxHp}-->; | ||
| Line 13: | Line 13: | ||
// Load modules, init, etc. | // Load modules, init, etc. | ||
| − | + | document.addEventListener("DOMContentLoaded", function(event) { | |
| − | + | init(); | |
| − | + | calcStats(); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
}); | }); | ||
// Initialize the empty divs with content | // Initialize the empty divs with content | ||
function init() { | function init() { | ||
| − | document.getElementById("adv-unbind-0-input").innerHTML = '<input type="radio" value=0 name="unbind" oninput="calcStats()" checked=1><label for="adv-unbind-0-input"><img src="/b/be/0_Unbind.png"/></label>'; | + | document.getElementById("adv-unbind-0-input").innerHTML = '<input type="radio" value=0 name="unbind" oninput="calcStats()" checked=1><label for="adv-unbind-0-input"><img src="/images/b/be/0_Unbind.png" style="width:35px; position:relative; bottom:4px;"/></label>'; |
| − | document.getElementById("adv-unbind-1-input").innerHTML = '<input type="radio" value=1 name="unbind" oninput="calcStats()" checked=1><label for="adv-unbind-1-input"> | + | document.getElementById("adv-unbind-1-input").innerHTML = '<input type="radio" value=1 name="unbind" oninput="calcStats()" checked=1><label for="adv-unbind-1-input"><img src="/images/e/ea/1_Unbind.png" style="width:35px; position:relative; bottom:4px;"/></label>'; |
| − | document.getElementById("adv-unbind-2-input").innerHTML = '<input type="radio" value=2 name="unbind" oninput="calcStats()" checked=1><label for="adv-unbind-2-input"> | + | document.getElementById("adv-unbind-2-input").innerHTML = '<input type="radio" value=2 name="unbind" oninput="calcStats()" checked=1><label for="adv-unbind-2-input"><img src="/images/a/ac/2_Unbind.png" style="width:35px; position:relative; bottom:4px;"/></label>'; |
| − | document.getElementById("adv-unbind-3-input").innerHTML = '<input type="radio" value=3 name="unbind" oninput="calcStats()" checked=1><label for="adv-unbind-3-input"> | + | document.getElementById("adv-unbind-3-input").innerHTML = '<input type="radio" value=3 name="unbind" oninput="calcStats()" checked=1><label for="adv-unbind-3-input"><img src="/images/a/a3/3_Unbind.png" style="width:35px; position:relative; bottom:4px;"/></label>'; |
| − | document.getElementById("adv-unbind-4-input").innerHTML = '<input type="radio" value=4 name="unbind" oninput="calcStats()" checked=1><label for="adv-unbind-4-input"> | + | document.getElementById("adv-unbind-4-input").innerHTML = '<input type="radio" value=4 name="unbind" oninput="calcStats()" checked=1><label for="adv-unbind-4-input"><img src="/images/1/1c/4_Unbind.png" style="width:35px; position:relative; bottom:4px;"/></label>'; |
| − | document.getElementById("adv-level-input").innerHTML = '<label for="adv-level-input-field" style="font-weight:bold;">Level</label><input type="number" id="adv-level-input-field" value= | + | document.getElementById("adv-level-input").innerHTML = '<label for="adv-level-input-field" style="font-weight:bold;">Level</label><input type="number" id="adv-level-input-field" value=<!--{$maxLevel}--> min=1 max=<!--{$maxLevel}--> style="width:40px; text-align:center; margin-left:5px;" oninput="calcStats()">'; |
} | } | ||
| Line 44: | Line 38: | ||
switch (unbind) { | switch (unbind) { | ||
case "0": | case "0": | ||
| − | if (level > | + | if (level > UB_LEVEL_0) { |
| − | level = | + | level = UB_LEVEL_0; |
| − | levelInput.value = | + | levelInput.value = UB_LEVEL_0; |
} | } | ||
break; | break; | ||
case "1": | case "1": | ||
| − | if (level > | + | if (level > UB_LEVEL_1) { |
| − | level = | + | level = UB_LEVEL_1; |
| − | levelInput.value = | + | levelInput.value = UB_LEVEL_1; |
} | } | ||
break; | break; | ||
case "2": | case "2": | ||
| − | if (level > | + | if (level > UB_LEVEL_2) { |
| − | level = | + | level = UB_LEVEL_2; |
| − | levelInput.value = | + | levelInput.value = UB_LEVEL_2; |
} | } | ||
break; | break; | ||
case "3": | case "3": | ||
| − | if (level > | + | if (level > UB_LEVEL_3) { |
| − | level = | + | level = UB_LEVEL_3; |
| − | levelInput.value = | + | levelInput.value = UB_LEVEL_3; |
| + | } | ||
| + | break; | ||
| + | case "4": | ||
| + | if (level > MAX_LEVEL) { | ||
| + | level = MAX_LEVEL; | ||
| + | levelInput.value = MAX_LEVEL; | ||
} | } | ||
break; | break; | ||
| Line 118: | Line 118: | ||
function calculateHP(level, unbind) { | function calculateHP(level, unbind) { | ||
var levelDiff = MAX_LEVEL - MIN_LEVEL; | var levelDiff = MAX_LEVEL - MIN_LEVEL; | ||
| − | var steps = (MAX_HP - MIN_HP | + | var steps = (MAX_HP - MIN_HP) / levelDiff; |
var statGain = (level-1) * steps; | var statGain = (level-1) * steps; | ||
| − | return Math.ceil(MIN_HP | + | return Math.ceil(MIN_HP + statGain); |
} | } | ||
| Line 126: | Line 126: | ||
function calculateStr(level, unbind) { | function calculateStr(level, unbind) { | ||
var levelDiff = MAX_LEVEL - MIN_LEVEL; | var levelDiff = MAX_LEVEL - MIN_LEVEL; | ||
| − | var steps = (MAX_STR - MIN_STR | + | var steps = (MAX_STR - MIN_STR) / levelDiff; |
var statGain = (level-1) * steps; | var statGain = (level-1) * steps; | ||
| − | return Math.ceil(MIN_STR | + | return Math.ceil(MIN_STR + statGain); |
} | } | ||
</script> | </script> | ||
<div id="adv-level-input-container" style="display:inline-block; text-align:center;"> | <div id="adv-level-input-container" style="display:inline-block; text-align:center;"> | ||
| − | <form id="adv-unbind-select" style="display:inline;"> | + | <form id="adv-unbind-select" style="display:inline-block; width:180px;"> |
| − | <div id="adv-unbind-input | + | <div id="adv-unbind-0-input" style="display:inline;"></div> |
| − | <div id="adv-unbind-input | + | <div id="adv-unbind-1-input" style="display:inline;"></div> |
| − | <div id="adv-unbind-input | + | <div id="adv-unbind-2-input" style="display:inline;"></div> |
| − | <div id="adv-unbind-input | + | <div id="adv-unbind-3-input" style="display:inline;"></div> |
| − | <div id="adv-unbind-input | + | <div id="adv-unbind-4-input" style="display:inline;"></div> |
</form> | </form> | ||
| − | <div id="adv-level-input" style="display:inline-block; margin-left:0.5em;"></div> | + | <div id="adv-level-input" style="display:inline-block; margin-left:0.5em; position:relative; bottom:1em;"></div> |
<div id="adv-stat-output-container" style="text-align:center; margin-top:4px;"> | <div id="adv-stat-output-container" style="text-align:center; margin-top:4px;"> | ||
| − | <div style="width:100%"> | + | <div style="width:100%" align="center"> |
| − | <div | + | <div style="display:table-cell;width:120px;text-align:right;padding: 3px 8px 3px 0;margin: 0 -6px 0 0;border-right:3px #528e52 solid;font-weight:bold;vertical-align:middle"><div id="adv-hp-label">HP</div></div> |
| − | <div | + | <div style="display:table-cell;width:150px;text-align:left;padding: 3px 0 3px 6px;border: 0px #528e52 solid;vertical-align:middle"><div id="adv-hp" style="display:inline;"><!--{$minHp}--> - <!--{$maxHp}--></div></div> |
</div> | </div> | ||
| − | <div style="width:100%"> | + | <div style="width:100%" align="center"> |
| − | <div | + | <div style="display:table-cell;width:120px;text-align:right;padding: 3px 8px 3px 0;margin: 0 -6px 0 0;border-right:3px #528e52 solid;font-weight:bold;vertical-align:middle"><div id="adv-str-label">Str</div></div> |
| − | <div | + | <div style="display:table-cell;width:150px;text-align:left;padding: 3px 0 3px 6px;border: 0px #528e52 solid;vertical-align:middle"><div id="adv-str" style="display:inline;"><!--{$minStr}--> - <!--{$maxStr}--></div></div> |
</div> | </div> | ||
</div> | </div> | ||
</div></includeonly> | </div></includeonly> | ||