Difference between revisions of "Widget:UnitStatsCalculator"

From Dragalia Lost Wiki
Jump to navigation Jump to search
imported>Elaeagnifolia
imported>Elaeagnifolia
 
(175 intermediate revisions by 3 users not shown)
Line 6: Line 6:
 
const UB_LEVEL_2 = <!--{$2ubLevel}-->;
 
const UB_LEVEL_2 = <!--{$2ubLevel}-->;
 
const UB_LEVEL_3 = <!--{$3ubLevel}-->;
 
const UB_LEVEL_3 = <!--{$3ubLevel}-->;
const MAX_LEVEL = 100;
+
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.
RLQ.push( function() {
+
document.addEventListener("DOMContentLoaded", function(event) {  
    $.when(
+
  init();
        $(document).ready(),
+
  calcStats();
        mw.loader.using( ['mediawiki.util'] )
 
    ).then( function() {
 
        $.when(init()).then(function() {
 
          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="/images/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">1UB</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"><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">2UB</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"><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">3UB</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"><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">4UB</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"><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=80 min=1 max=80 style="width:40px; text-align:center; margin-left:5px;" oninput="calcStats()">';
+
   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 65: Line 59:
 
         level = UB_LEVEL_3;
 
         level = UB_LEVEL_3;
 
         levelInput.value = UB_LEVEL_3;
 
         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[2]) / levelDiff;
+
   var steps = (MAX_HP - MIN_HP) / levelDiff;
 
   var statGain = (level-1) * steps;
 
   var statGain = (level-1) * steps;
   return Math.ceil(MIN_HP[unbind-3] + statGain);
+
   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[2]) / levelDiff;
+
   var steps = (MAX_STR - MIN_STR) / levelDiff;
 
   var statGain = (level-1) * steps;
 
   var statGain = (level-1) * steps;
   return Math.ceil(MIN_STR[unbind-3] + statGain);
+
   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-0-input" style="display:inline;"></div>
 
   <div id="adv-unbind-0-input" style="display:inline;"></div>
 
   <div id="adv-unbind-1-input" style="display:inline;"></div>
 
   <div id="adv-unbind-1-input" style="display:inline;"></div>
Line 139: Line 139:
 
     <div id="adv-unbind-4-input" style="display:inline;"></div>
 
     <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 class="dt-term" style="display:inline-block;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:top"><div id="adv-hp-label"></div></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 class="dd-description" style="display:inline-block;width:150px;text-align:left;padding: 3px 0 3px 6px;border-left: 1px #528e52 solid;vertical-align:top"><div id="adv-hp" style="display:inline;"></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 class="dt-term" style="display:inline-block;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:top"><div id="adv-str-label"></div></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 class="dd-description" style="display:inline-block;width:150px;text-align:left;padding: 3px 0 3px 6px;border-left: 1px #528e52 solid;vertical-align:top"><div id="adv-str" style="display:inline;"></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>

Latest revision as of 16:49, 13 December 2019