Widget:UnitStatsCalculator

 // Constants const MIN_LEVEL = 1; const UB_LEVEL_0 = ; const UB_LEVEL_1 = ; const UB_LEVEL_2 = ; const UB_LEVEL_3 = ; const MAX_LEVEL = ; const MIN_HP = ; const MAX_HP = ; const MIN_STR = ; const MAX_STR = ;

// Load modules, init, etc. document.addEventListener("DOMContentLoaded", function(event) {  init;  calcStats; });

// Initialize the empty divs with content function init { document.getElementById("adv-unbind-0-input").innerHTML = ' '; document.getElementById("adv-unbind-1-input").innerHTML = ' '; document.getElementById("adv-unbind-2-input").innerHTML = ' '; document.getElementById("adv-unbind-3-input").innerHTML = ' '; document.getElementById("adv-unbind-4-input").innerHTML = ' '; document.getElementById("adv-level-input").innerHTML = '<label for="adv-level-input-field" style="font-weight:bold;">Level <input type="number" id="adv-level-input-field" value= min=1 max= style="width:40px; text-align:center; margin-left:5px;" oninput="calcStats">'; }

// Calculate the HP and STR stats function calcStats { // Get the level and Unbind var levelInput = document.getElementById('adv-level-input-field'); var level = levelInput.value; var unbind = document.querySelector('input[name = "unbind"]:checked').value;

// Manually set the level cap if we're dealing with a lower unbind switch (unbind) { case "0": if (level > UB_LEVEL_0) { level = UB_LEVEL_0; levelInput.value = UB_LEVEL_0; }     break; case "1": if (level > UB_LEVEL_1) { level = UB_LEVEL_1; levelInput.value = UB_LEVEL_1; }     break; case "2": if (level > UB_LEVEL_2) { level = UB_LEVEL_2; levelInput.value = UB_LEVEL_2; }     break; case "3": if (level > UB_LEVEL_3) { level = UB_LEVEL_3; levelInput.value = UB_LEVEL_3; }     break; case "4": if (level > MAX_LEVEL) { level = MAX_LEVEL; levelInput.value = MAX_LEVEL; }     break; } // Validate the level and unbind before calculating HP and Str if(validateLevel(level) && validateUnbind(unbind)) { setHP(calculateHP(level, unbind), level) setStr(calculateStr(level, unbind), level) } else { setHP("-"); setStr("-"); } }

// Check if level is a number we can calculate with function validateLevel(value) { if(isNaN(value) || value == "") { return false; } return true; }

// Check if unbind is either 0, 1, 2, 3, 4 function validateUnbind(unbind) { if(unbind == 0 || unbind == 1 || unbind == 2 || unbind == 3 || unbind == 4) { return true; } return false; }

// Set the HP value in the display function setHP(value, level) { if (value != "-") { document.getElementById("adv-hp-label").innerHTML = "Level " + level + " HP" } else { document.getElementById("adv-hp-label").innerHTML = "HP" } document.getElementById("adv-hp").innerHTML = value; }

// Set the Str value in the display function setStr(value, level) { if (value != "-") { document.getElementById("adv-str-label").innerHTML = "Level " + level + " Str" } else { document.getElementById("adv-str-label").innerHTML = "Str" } document.getElementById("adv-str").innerHTML = value; }

// Calculate the HP function calculateHP(level, unbind) { var levelDiff = MAX_LEVEL - MIN_LEVEL; var steps = (MAX_HP - MIN_HP) / levelDiff; var statGain = (level-1) * steps; return Math.ceil(MIN_HP + statGain); }

// Calculate the Str function calculateStr(level, unbind) { var levelDiff = MAX_LEVEL - MIN_LEVEL; var steps = (MAX_STR - MIN_STR) / levelDiff; var statGain = (level-1) * steps; return Math.ceil(MIN_STR + statGain); } <form id="adv-unbind-select" style="display:inline-block; width:180px;"> <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"> HP     <div style="display:table-cell;width:150px;text-align:left;padding: 3px 0 3px 6px;border: 0px #528e52 solid;vertical-align:middle"> - <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"> Str <div style="display:table-cell;width:150px;text-align:left;padding: 3px 0 3px 6px;border: 0px #528e52 solid;vertical-align:middle"> -