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

Latest revision as of 20:15, 5 May 2020

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