Difference between revisions of "Widget:AdventurerPageStatsCalculator"

From Dragalia Lost Wiki
Jump to navigation Jump to search
imported>Elaeagnifolia
imported>Elaeagnifolia
Line 2: Line 2:
 
// Constants
 
// Constants
 
const MIN_LEVEL = 1;
 
const MIN_LEVEL = 1;
−
const MAX_LEVEL = 80;
+
const MAX_LEVEL = 90;
−
const SPIRAL_MAX_LEVEL = 100;
+
const MIN_BP = 0;
−
const MIN_HP = [<!--{$minHp3}-->,<!--{$minHp4}-->,<!--{$minHp5}-->];
+
const MAX_BP = 99;
−
const MAX_HP = <!--{$maxHp}-->;
+
const MIN_HP = <!--{$minHP}-->;
−
const ADD_MAX_HP = <!--{$addMaxHp1}-->;
+
const HP_COEFF = <!--{$hpCoeff}-->;
−
const MIN_STR = [<!--{$minStr3}-->,<!--{$minStr4}-->,<!--{$minStr5}-->];
+
const MIN_ATK = <!--{$minATK}-->;
−
const MAX_STR = <!--{$maxStr}-->;
+
const ATK_COEFF = <!--{$atkCoeff}-->;
−
const ADD_MAX_STR = <!--{$addMaxAtk1}-->;
+
const MIN_MATK = <!--{$minMATK}-->;
−
const NAT_RARITY = <!--{$rarity}-->;
+
const MATK_COEFF = <!--{$matkCoeff}-->;
−
const HAS_SPIRAL_LIMIT_BREAK = <!--{$maxLimitBreakCount}--> == 5;
+
const MIN_DEF = <!--{$minDEF}-->;
 +
const DEF_COEFF = <!--{$defCoeff}-->;
 +
const MIN_MDEF = <!--{$minMDEF}-->;
 +
const MDEF_COEFF = <!--{$mdefCoeff}-->;
 +
const BONUS_POINT_COEFF = '<!--{$bonusPointCoeff}-->';
  
 
// Load modules, init, etc.
 
// Load modules, init, etc.
 
document.addEventListener("DOMContentLoaded", function(event) {  
 
document.addEventListener("DOMContentLoaded", function(event) {  
 
   init();
 
   init();
−
   calcStats();
+
   //calcStats();
 
});
 
});
  
 
// Initialize the empty divs with content
 
// Initialize the empty divs with content
 
function init() {
 
function init() {
−
   let maxLevel = MAX_LEVEL;
+
   document.getElementById("adv-level-input").innerHTML = '<label id="level-label" for="adv-level-input-field" style="font-weight:bold;">Level</label><input type="number" id="level-number-input" value=' + MIN_LEVEL + ' min=1 max=' + MAX_LEVEL + ' style="width: 50px; margin-left: 0.5em;" oninput="updateLevelInput()"><br/><input type="range" id="adv-level-input-field" list="levels" value=' + MIN_LEVEL + ' min=1 max=' + MAX_LEVEL + ' style="margin-top: 0.5em; width:100%;" oninput="calcStats()">';
−
   if (HAS_SPIRAL_LIMIT_BREAK) {
+
   document.getElementById("bonus-points-input").innerHTML = '<label id="bonus-points-label" for="bonus-points-input-field" style="font-weight:bold;">Bonus Points</label><input type="number" id="bp-number-input" value=0 min=' + MIN_BP + ' max=' + MAX_BP + ' style="width: 50px; margin-left: 0.5em;" oninput="updateBPInput()"><br/><input type="range" id="bonus-points-input-field" list="bonus-points" value=0 min=' + MIN_BP + ' max=' + MAX_BP + ' style="margin-top: 0.5em; width:100%;" oninput="calcStats()">';
−
    maxLevel = SPIRAL_MAX_LEVEL;
+
}
−
  }
+
 
 +
function updateLevelInput() {
 +
var level = document.getElementById('level-number-input').value;
 +
document.getElementById('adv-level-input-field').value = level;
 +
calcStats();
 +
}
  
−
  // Create the rarity radio buttons
+
function updateBPInput() {
−
  if (NAT_RARITY == 3) {
+
var bp = document.getElementById('bp-number-input').value;
−
    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('bonus-points-input-field').value = bp;
−
    document.getElementById("adv-rarity-input-4").innerHTML = '<input type="radio" value=4 name="rarity" oninput="calcStats()"><label for="adv-rarity-input-4">4★</label>';
+
calcStats();
−
  } 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
 
// Calculate the HP and STR stats
 
function calcStats() {
 
function calcStats() {
−
   // Get the level and rarity
+
   // Get the level
 
   let levelInput = document.getElementById('adv-level-input-field');
 
   let levelInput = document.getElementById('adv-level-input-field');
 +
  let bpInput = document.getElementById('bonus-points-input-field');
 
   let level = levelInput.value;
 
   let level = levelInput.value;
−
   let rarity = document.querySelector('input[name = "rarity"]:checked').value;
+
   let bonusPoints = bpInput.value;
 +
  let parsedJSON = JSON.parse(BONUS_POINT_COEFF);
 +
  let bonusPointsCoeff = 0;
 +
 
 +
  if (level > MAX_LEVEL) {
 +
    level = MAX_LEVEL;
 +
    levelInput.value = MAX_LEVEL;
 +
  }
  
−
   // Manually set the level cap if we're dealing with a lower rarity
+
   if (bonusPoints > MAX_BP) {
−
  switch (rarity) {
+
     bonusPoints = MAX_BP;
−
    case "3":
+
     bpInput.value = MAX_BP;
−
      if (level > 60) {
 
−
        level = 60;
 
−
        levelInput.value = "60";
 
−
      }
 
−
      break;
 
−
     case "4":
 
−
      if (level > 70) {
 
−
        level = 70;
 
−
        levelInput.value = "70";
 
−
      }
 
−
      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;
 
−
        }
 
−
      }
 
 
   }
 
   }
−
 
+
 
−
   // Validate the level and rarity before calculating HP and Str
+
   // Validate the level before calculating HP and Str
−
   if(validateLevel(level) && validateRarity(rarity)) {
+
   if(validateLevel(level)) {
−
     if (HAS_SPIRAL_LIMIT_BREAK) {
+
  setLevel(level);
−
      // Level 80+ after Mana Spiral is unlocked has a different calc
+
  setBonusPoints(bonusPoints);
−
      setHP(calculateSpiralHP(level, rarity), level);
+
     setCell(
−
      setStr(calculateSpiralStr(level, rarity), level);
+
    "hp",
−
    } else {
+
    calculateStat(
−
      setHP(calculateHP(level, rarity), level);
+
    MIN_HP,
−
      setStr(calculateStr(level, rarity), level);
+
    HP_COEFF,
−
    }
+
    level,
 +
    getBonusPointCoeff(parsedJSON[bonusPoints], "HP")
 +
    )
 +
);
 +
setCell(
 +
    "atk",
 +
    calculateStat(
 +
    MIN_ATK,
 +
    ATK_COEFF,
 +
    level,
 +
    getBonusPointCoeff(parsedJSON[bonusPoints], "ATK")
 +
    )
 +
);
 +
setCell(
 +
    "matk",
 +
    calculateStat(
 +
    MIN_MATK,
 +
    MATK_COEFF,
 +
    level,
 +
    getBonusPointCoeff(parsedJSON[bonusPoints], "MATK")
 +
    )
 +
);
 +
setCell(
 +
    "def",
 +
    calculateStat(
 +
    MIN_DEF,
 +
    DEF_COEFF,
 +
    level,
 +
    getBonusPointCoeff(parsedJSON[bonusPoints], "DEF")
 +
    )
 +
);
 +
setCell(
 +
    "mdef",
 +
    calculateStat(
 +
    MIN_MDEF,
 +
    MDEF_COEFF,
 +
    level,
 +
    getBonusPointCoeff(parsedJSON[bonusPoints], "MDEF")
 +
    )
 +
);
 
   } else {
 
   } else {
−
     setHP("-");
+
     setCell("hp", "-");
−
     setStr("-");
+
    setCell("atk", "-");
 +
    setCell("matk", "-");
 +
     setCell("def", "-");
 +
    setCell("mdef", "-");
 
   }
 
   }
 +
}
 +
 +
function getBonusPointCoeff(bonusPointValues, stat) {
 +
if (bonusPointValues) {
 +
return bonusPointValues[0][stat];
 +
}
 +
return 0;
 
}
 
}
  
Line 96: Line 134:
 
}
 
}
  
−
// Check if rarity is either 3, 4, or 5
+
//Set cell to specified display value
−
function validateRarity(rarity) {
+
function setCell(stat, value) {  
−
   if(rarity == 3 || rarity == 4 || rarity == 5 || rarity == "3" || rarity == "4" || rarity == "5") {
+
   document.getElementById(stat + "-cell").innerHTML = value;
−
    return true;
 
−
  }
 
−
  return false;
 
 
}
 
}
  
−
// Set the HP value in the display
+
function setLevel(level) {
−
function setHP(value, level) {
+
document.getElementById("level-number-input").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 setBonusPoints(bp) {
−
function setStr(value, level) {
+
document.getElementById("bp-number-input").value = bp;
−
  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
+
// Calculate the stat
−
function calculateHP(level, rarity) {
+
function calculateStat(min, coeff, level, bonusPointCoeff) {
−
   let levelDiff = MAX_LEVEL - MIN_LEVEL;
+
   let initStat = Math.ceil(
−
  let steps = (MAX_HP - MIN_HP[2]) / levelDiff;
+
    (min * coeff * (level-1)) + min
−
  let statGain = (level-1) * steps;
+
   );
−
  return Math.ceil(MIN_HP[rarity-3] + statGain);
+
   let bonusPointStat = Math.floor(initStat * bonusPointCoeff);
−
}
 
−
 
 
−
// Calculate the Str
 
−
function calculateStr(level, rarity) {
 
−
   let levelDiff = MAX_LEVEL - MIN_LEVEL;
 
−
  let steps = (MAX_STR - MIN_STR[2]) / levelDiff;
 
−
   let statGain = (level-1) * steps;
 
−
  return Math.ceil(MIN_STR[rarity-3] + statGain);
 
−
}
 
  
−
// Calculate the HP for Level 80+
+
   return initStat + bonusPointStat;
−
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; width: 100%;">
−
   <form id="adv-rarity-select" style="display:inline;">
+
   <div id="adv-level-input" style="display:inline-block; width:100%;"></div>
−
     <div id="adv-rarity-input-3" style="display:inline;"></div>
+
  <datalist id="levels">
−
     <div id="adv-rarity-input-4" style="display:inline;"></div>
+
    <option value="1" label="1"></option>
−
     <div id="adv-rarity-input-5" style="display:inline;"></div>
+
     <option value="10" label="10"></option>
−
  </form>
+
     <option value="20" label="20"></option>
−
  <div id="adv-level-input" style="display:inline-block; margin-left:0.5em;"></div>
+
     <option value="30" label="30"></option>
−
  <div id="adv-stat-output-container" style="text-align:center; margin-top:4px;">
+
    <option value="40" label="40"></option>
−
     <div style="width:100%" align="center">
+
    <option value="50" label="50"></option>
−
     <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>
+
    <option value="60" label="60"></option>
−
    <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>
+
     <option value="70" label="70"></option>
−
     </div>
+
     <option value="80" label="80"></option>
−
     <div style="width:100%" align="center">
+
    <option value="90" label="90"></option>
−
     <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>
+
  </datalist>
−
     <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 id="bonus-points-input" style="display:inline-block; width:100%;"></div>
−
     </div>
+
  <datalist id="bonus-points">
−
   </div>
+
    <option value="0" label="0"></option>
 +
    <option value="10" label="10"></option>
 +
     <option value="20" label="20"></option>
 +
     <option value="30" label="30"></option>
 +
     <option value="40" label="40"></option>
 +
    <option value="50" label="50"></option>
 +
     <option value="60" label="60"></option>
 +
    <option value="70" label="70"></option>
 +
    <option value="80" label="80"></option>
 +
     <option value="90" label="90"></option>
 +
   </datalist>
 
</div></includeonly>
 
</div></includeonly>

Revision as of 20:15, 5 May 2020

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