Difference between revisions of "Widget:AdventurerPageStatsCalculator"

From Dragalia Lost Wiki
Jump to navigation Jump to search
imported>Elaeagnifolia
imported>Elaeagnifolia
(Undo revision 81125 by Elaeagnifolia (talk))
 
(297 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<includeonly><script type="text/javascript">const MIN_LEVEL = 1;
+
<includeonly><script type="text/javascript">
 +
// Constants
 +
const MIN_LEVEL = 1;
 
const MAX_LEVEL = 80;
 
const MAX_LEVEL = 80;
−
const MIN_HP = [1,15,30];
+
const SPIRAL_MAX_LEVEL = 100;
−
const MAX_HP = 81;
+
const MIN_HP = [<!--{$minHp3}-->,<!--{$minHp4}-->,<!--{$minHp5}-->];
−
const MIN_STR = [5,30,50];
+
const MAX_HP = <!--{$maxHp}-->;
−
const MAX_STR = 159;
+
const ADD_MAX_HP = <!--{$addMaxHp1}-->;
−
const NAT_RARITY = 3;
+
const MIN_STR = [<!--{$minStr3}-->,<!--{$minStr4}-->,<!--{$minStr5}-->];
−
const PROMO_HP_4 = 27;
+
const MAX_STR = <!--{$maxStr}-->;
−
const PROMO_HP_5 = 16;
+
const ADD_MAX_STR = <!--{$addMaxAtk1}-->;
−
const PROMO_STR_4 = 27;
+
const NAT_RARITY = <!--{$rarity}-->;
−
const PROMO_STR_5 = 16;
+
const HAS_SPIRAL_LIMIT_BREAK = <!--{$maxLimitBreakCount}--> == 5;
  
−
RLQ.push( function() {
+
// Load modules, init, etc.
−
    $.when(
+
document.addEventListener("DOMContentLoaded", function(event) {  
−
        $(document).ready(),
+
  init();
−
        mw.loader.using( ['mediawiki.util'] )
+
  calcStats();
−
    ).then( function() {
 
−
        calcStats();
 
−
        });
 
−
    });
 
 
});
 
});
  
 +
// Initialize the empty divs with content
 +
function init() {
 +
  let maxLevel = MAX_LEVEL;
 +
  if (HAS_SPIRAL_LIMIT_BREAK) {
 +
    maxLevel = SPIRAL_MAX_LEVEL;
 +
  }
 +
 +
  // Create the rarity radio buttons
 +
  if (NAT_RARITY == 3) {
 +
    document.getElementById("adv-rarity-input-3").innerHTML = '<input type="radio" value=3 name="rarity" oninput="calcStats()"><label for="adv-rarity-input-3">3★</label>';
 +
    document.getElementById("adv-rarity-input-4").innerHTML = '<input type="radio" value=4 name="rarity" oninput="calcStats()"><label for="adv-rarity-input-4">4★</label>';
 +
  } else if (NAT_RARITY == 4) {
 +
    document.getElementById("adv-rarity-input-4").innerHTML = '<input type="radio" value=4 name="rarity" oninput="calcStats()"><label for="adv-rarity-input-4">4★</label>';
 +
  }
 +
  document.getElementById("adv-rarity-input-5").innerHTML = '<input type="radio" value=5 name="rarity" oninput="calcStats()" checked=1><label for="adv-rarity-input-5">5★</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=' + maxLevel + ' min=1 max=' + maxLevel + ' style="width:40px; text-align:center; margin-left:5px;" oninput="calcStats()">';
 +
}
 +
 +
// Calculate the HP and STR stats
 
function calcStats() {
 
function calcStats() {
−
   var levelInput = document.getElementById('adv-level-input-field');
+
   // Get the level and rarity
−
   var level = levelInput.value;
+
  let levelInput = document.getElementById('adv-level-input-field');
−
   var rarity = document.querySelector('input[name = "rarity"]:checked').value;
+
   let level = levelInput.value;
 +
   let rarity = document.querySelector('input[name = "rarity"]:checked').value;
 +
 
 +
  // Manually set the level cap if we're dealing with a lower rarity
 
   switch (rarity) {
 
   switch (rarity) {
 
     case "3":
 
     case "3":
−
       level = 60;
+
       if (level > 60) {
−
      levelInput.value = "60";
+
        level = 60;
 +
        levelInput.value = "60";
 +
      }
 
       break;
 
       break;
 
     case "4":
 
     case "4":
−
       level = 70;
+
       if (level > 70) {
−
      levelInput.value = "70";
+
        level = 70;
 +
        levelInput.value = "70";
 +
      }
 
       break;
 
       break;
 +
    case "5":
 +
      if (level > MAX_LEVEL) {
 +
        if (HAS_SPIRAL_LIMIT_BREAK) {
 +
          if (level > SPIRAL_MAX_LEVEL) {
 +
            level = SPIRAL_MAX_LEVEL;
 +
            levelInput.value = SPIRAL_MAX_LEVEL;
 +
          }
 +
        } else {
 +
          level = MAX_LEVEL;
 +
          levelInput.value = MAX_LEVEL;
 +
        }
 +
      }
 
   }
 
   }
 
    
 
    
−
   if(validateLevel(level)) {
+
  // Validate the level and rarity before calculating HP and Str
−
     setHP(calculateHP(level, rarity))
+
   if(validateLevel(level) && validateRarity(rarity)) {
−
    setStr(calculateStr(level, rarity))
+
    if (HAS_SPIRAL_LIMIT_BREAK) {
 +
      // Level 80+ after Mana Spiral is unlocked has a different calc
 +
      setHP(calculateSpiralHP(level, rarity), level);
 +
      setStr(calculateSpiralStr(level, rarity), level);
 +
     } else {
 +
      setHP(calculateHP(level, rarity), level);
 +
      setStr(calculateStr(level, rarity), level);
 +
    }
 
   } else {
 
   } else {
 
     setHP("-");
 
     setHP("-");
Line 45: Line 88:
 
}
 
}
  
 +
// Check if level is a number we can calculate with
 
function validateLevel(value) {
 
function validateLevel(value) {
 
   if(isNaN(value) || value == "") {
 
   if(isNaN(value) || value == "") {
Line 52: Line 96:
 
}
 
}
  
−
function setHP(value) {
+
// Check if rarity is either 3, 4, or 5
 +
function validateRarity(rarity) {
 +
  if(rarity == 3 || rarity == 4 || rarity == 5 || rarity == "3" || rarity == "4" || rarity == "5") {
 +
    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;
 
   document.getElementById("adv-hp").innerHTML = value;
 
}
 
}
  
−
function setStr(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;
 
   document.getElementById("adv-str").innerHTML = value;
 
}
 
}
  
 +
// Calculate the HP
 
function calculateHP(level, rarity) {
 
function calculateHP(level, rarity) {
−
   var levelDiff = MAX_LEVEL - MIN_LEVEL;
+
   let levelDiff = MAX_LEVEL - MIN_LEVEL;
−
   var steps = (MAX_HP - MIN_HP[rarity-3]) / levelDiff;
+
   let steps = (MAX_HP - MIN_HP[2]) / levelDiff;
−
   var statGain = (level-1) * steps;
+
   let statGain = (level-1) * steps;
 
   return Math.ceil(MIN_HP[rarity-3] + statGain);
 
   return Math.ceil(MIN_HP[rarity-3] + statGain);
 
}
 
}
  
 +
// Calculate the Str
 
function calculateStr(level, rarity) {
 
function calculateStr(level, rarity) {
−
   var levelDiff = MAX_LEVEL - MIN_LEVEL;
+
   let levelDiff = MAX_LEVEL - MIN_LEVEL;
−
   var steps = (MAX_STR - MIN_STR[rarity-3]) / levelDiff;
+
   let steps = (MAX_STR - MIN_STR[2]) / levelDiff;
−
   var statGain = (level-1) * steps;
+
   let statGain = (level-1) * steps;
 
   return Math.ceil(MIN_STR[rarity-3] + statGain);
 
   return Math.ceil(MIN_STR[rarity-3] + statGain);
 +
}
 +
 +
// Calculate the HP for Level 80+
 +
function calculateSpiralHP(level, rarity) {
 +
  let levelDiff = SPIRAL_MAX_LEVEL - MAX_LEVEL;
 +
  let steps = (ADD_MAX_HP - MAX_HP) / levelDiff;
 +
  let statGain = (level-80) * steps;
 +
  return Math.ceil(MAX_HP + statGain);
 +
}
 +
 +
// Calculate the Str for Level 80+
 +
function calculateSpiralStr(level, rarity) {
 +
  let levelDiff = SPIRAL_MAX_LEVEL - MAX_LEVEL;
 +
  let steps = (ADD_MAX_STR - MAX_STR) / levelDiff;
 +
  let statGain = (level-80) * steps;
 +
  return Math.ceil(MAX_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-rarity-select" style="display:inline;">
 
   <form id="adv-rarity-select" style="display:inline;">
−
     <input type="radio" id="adv-rarity-input-3" value=3 name="rarity" oninput="calcStats()"><label for="adv-rarity-input-3">3★</label>
+
     <div id="adv-rarity-input-3" style="display:inline;"></div>
−
     <input type="radio" id="adv-rarity-input-4" value=4 name="rarity" oninput="calcStats()"><label for="adv-rarity-input-4">4★</label>
+
     <div id="adv-rarity-input-4" style="display:inline;"></div>
−
     <input type="radio" id="adv-rarity-input-5" value=5 name="rarity" checked=1 oninput="calcStats()"><label for="adv-rarity-input-5">5★</label>
+
     <div id="adv-rarity-input-5" style="display:inline;"></div>
 
   </form>
 
   </form>
−
   <div id="adv-level-input" style="display:inline-block; margin-left:1.5em;">
+
   <div id="adv-level-input" style="display:inline-block; margin-left:0.5em;"></div>
−
    <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()">
 
−
  </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 id="adv-stat-output" style="border: 1px solid gray; padding:4px;">
+
     <div style="width:100%" align="center">
−
      <div style="display:inline"><b>HP</b>: <div id="adv-hp" style="display:inline;"></div></div>
+
    <div class="dt-term" 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">Max 5★ HP: </div></div>
−
      <div style="display:inline; margin-left: 2em;"><b>Str</b>: <div id="adv-str" style="display:inline;"></div></div>
+
    <div class="dd-description" 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;"><!--{$maxHp}--></div></div>
 +
    </div>
 +
    <div style="width:100%" align="center">
 +
    <div class="dt-term" 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">Max 5★ Str:</div></div>
 +
    <div class="dd-description" 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;"><!--{$maxStr}--></div></div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
−
</div>
+
</div></includeonly>

Latest revision as of 20:15, 5 May 2020

Retrieved from "https://dlwiki.cherrymint.live/index.php?title=Widget:AdventurerPageStatsCalculator&oldid=371771"