Difference between revisions of "User:Caledor92/Sandbox3"

From Dragalia Lost Wiki
Jump to navigation Jump to search
>Caledor92
>Caledor92
 
(98 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>{{#ifeq: {{{Lv1|}}} | | | {{#ifeq: {{{Lv1|}}} | 0 | | {{#vardefine:level|1}} }} }}{{#ifeq: {{{Lv2|}}} | | | {{#ifeq: {{{Lv2|}}} | 0 | | {{#vardefine:level|2}} }} }}{{#ifeq: {{{Lv3|}}} | | | {{#ifeq: {{{Lv3|}}} | 0 | | {{#vardefine:level|3}} }} }}{{#ifeq: {{#cargo_query:tables=Adventurers|where=_pageName="{{PAGENAME}}"|default=None}} | None | | {{#vardefine:mightUser|Adventurer}} }}{{#ifeq: {{#var:mightUser}} | Adventurer | {{#vardefine:might1|100}}{{#vardefine:might2|200}}{{#vardefine:might3|300}} | {{#vardefine:might1|50}}{{#vardefine:might2|100}} }}<!--
+
<noinclude>{{doc}}</noinclude><includeonly><script type="text/javascript">
 +
// Constants
 +
const LB_COUNT = <!--{$MaxLimitBreakCount}-->;
 +
const MIN_LEVEL = 1;
 +
const MAX_LEVEL = 80;
 +
const LB_MAX_LEVEL = 100;
 +
const MIN_HP = [<!--{$minHp3}-->,<!--{$minHp4}-->,<!--{$minHp5}-->];
 +
const MAX_HP = <!--{$maxHp}-->;
 +
const MIN_STR = [<!--{$minStr3}-->,<!--{$minStr4}-->,<!--{$minStr5}-->];
 +
const MAX_STR = <!--{$maxStr}-->;
 +
const NAT_RARITY = <!--{$rarity}-->;;
  
// Table Display Code
+
// Load modules, init, etc.
--> {| class="skill-table skill-levels"
+
document.addEventListener("DOMContentLoaded", function(event) {
! <div style="display:contents; position:absolute;margin-top:-4px;margin-left:-8px">{{#ifexist: Media:{{{icon|}}}.png|[[File:{{{icon|}}}.png|30px|link=]]|[[File:Unknown.png|30px|link=]]}}</div> [[{{{PageName|}}}|{{{Name|}}}]]
+
  init();
|-
+
  calcStats();
| style="text-align:center;" | {{#switch:{{#var:level}}
+
});
|1={{#tag:tabber|
 
Lv1=<div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">Lv. 1 SP Cost</span>: {{{Sp|}}}</div>{{#ifeq:{{{SpRegen|}}} | | | <br/><div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">SP Regen</span>: {{{SpRegen|}}} per second</div> }}
 
  
{{{Lv1|}}} (<span style="color:#777;">Might</span>: {{#var:might1}})
+
// Initialize the empty divs with content
{{!}}-{{!}}
+
function init() {
}}
+
  if (NAT_RARITY == 3) {
|2={{#tag:tabber|
+
    document.getElementById("adv-rarity-input-3").innerHTML = '<input type="radio" value=3 name="rarity" oninput="calcStats()"><label for="adv-rarity-input-3">3★</label>';
Lv1=<div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">Lv. 1 SP Cost</span>: {{{Sp|}}}</div>{{#ifeq:{{{SpRegen|}}} | | | <br/><div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">SP Regen</span>: {{{SpRegen|}}} per second</div> }}
+
    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>';
 +
  if (LB_COUNT > 4) {
 +
    document.getElementById("adv-rarity-input-s").innerHTML = '<input type="radio" value=s name="rarity" oninput="calcStats()" checked=1><label for="adv-rarity-input-s">S★</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=100 min=1 max=100 style="width:40px; text-align:center; margin-left:5px;" oninput="calcStats()">';
 +
  } else {
 +
    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()">';
 +
  }
 +
}
  
{{{Lv1|}}} (<span style="color:#777;">Might</span>: {{#var:might1}})
+
// Calculate the HP and STR stats
{{!}}-{{!}}
+
function calcStats() {
Lv2=<div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">Lv. 2 SP Cost</span>: {{{SpLv2|{{{Sp|}}}}}}</div>{{#ifeq:{{{SpRegen|}}} | | | <br/><div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">SP Regen</span>: {{{SpRegen|}}} per second</div> }}
+
  // Get the level and rarity
 +
  var levelInput = document.getElementById('adv-level-input-field');
 +
  var level = levelInput.value;
 +
  var rarity = document.querySelector('input[name = "rarity"]:checked').value;
  
{{{Lv2|}}} (<span style="color:#777;">Might</span>: {{#var:might2}})
+
  // Manually set the level cap if we're dealing with a lower rarity
{{!}}-{{!}}
+
  switch (rarity) {
}}
+
    case "3":
|3={{#tag:tabber|
+
      if (level > 60) {
Lv1=<div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">Lv. 1 SP Cost</span>: {{{Sp|}}}</div>{{#ifeq:{{{SpRegen|}}} | | | <br/><div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">SP Regen</span>: {{{SpRegen|}}} per second</div> }}
+
        level = 60;
 +
        levelInput.value = "60";
 +
      }
 +
      break;
 +
    case "4":
 +
      if (level > 70) {
 +
        level = 70;
 +
        levelInput.value = "70";
 +
      }
 +
      break;
 +
    case "5":
 +
      if (level > MAX_LEVEL) {
 +
        level = MAX_LEVEL;
 +
        levelInput.value = MAX_LEVEL;
 +
      }
 +
      break;
 +
    case "s":
 +
      if (level > LB_MAX_LEVEL) {
 +
        level = LB_MAX_LEVEL;
 +
        levelInput.value = LB_MAX_LEVEL;
 +
      }
 +
  }
 +
 
 +
  // Validate the level and rarity before calculating HP and Str
 +
  if(validateLevel(level) && validateRarity(rarity)) {
 +
    setHP(calculateHP(level, rarity), level)
 +
    setStr(calculateStr(level, rarity), level)
 +
  } else {
 +
    setHP("-");
 +
    setStr("-");
 +
  }
 +
}
  
{{{Lv1|}}} (<span style="color:#777;">Might</span>: {{#var:might1}})
+
// Check if level is a number we can calculate with
{{!}}-{{!}}
+
function validateLevel(value) {
Lv2=<div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">Lv. 2 SP Cost</span>: {{{SpLv2|{{{Sp|}}}}}}</div>{{#ifeq:{{{SpRegen|}}} | | | <br/><div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">SP Regen</span>: {{{SpRegen|}}} per second</div> }}
+
  if(isNaN(value) || value == "") {
 +
    return false;
 +
  }
 +
  return true;
 +
}
  
{{{Lv2|}}} (<span style="color:#777;">Might</span>: {{#var:might2}})
+
// Check if rarity is either 3, 4, or 5
{{!}}-{{!}}
+
function validateRarity(rarity) {
Lv3=<div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">Lv. 3 SP Cost</span>: {{{Sp|{{{Sp|}}}}}}</div>{{#ifeq:{{{SpRegen|}}} | | | <br/><div style="display:inline-block; padding:3px; width: 95%"><span style="color:#777;">SP Regen</span>: {{{SpRegen|}}} per second</div> }}
+
  if(rarity == 3 || rarity == 4 || rarity == 5 || rarity == "3" || rarity == "4" || rarity == "5" || rarity == "s" || rarity == "S") {
 +
    return true;
 +
  }
 +
  return false;
 +
}
  
{{{Lv3|}}} (<span style="color:#777;">Might</span>: {{#var:might3}})
+
// Set the HP value in the display
{{!}}-{{!}}
+
function setHP(value, level) {
}}
+
  if (value != "-") {
|#default=N/A
+
    document.getElementById("adv-hp-label").innerHTML = "Level " + level + " HP"
}}
+
  } else {
|}</includeonly><noinclude>[[Category:Templates]]</noinclude>
+
    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, rarity) {
 +
  var levelDiff = MAX_LEVEL - MIN_LEVEL;
 +
  var steps = (MAX_HP - MIN_HP[2]) / levelDiff;
 +
  var statGain = (level-1) * steps;
 +
  return Math.ceil(MIN_HP[rarity-3] + statGain);
 +
}
 +
 
 +
// Calculate the Str
 +
function calculateStr(level, rarity) {
 +
  var levelDiff = MAX_LEVEL - MIN_LEVEL;
 +
  var steps = (MAX_STR - MIN_STR[2]) / levelDiff;
 +
  var statGain = (level-1) * steps;
 +
  return Math.ceil(MIN_STR[rarity-3] + statGain);
 +
}
 +
</script>
 +
<div id="adv-level-input-container" style="display:inline-block; text-align:center;">
 +
  <form id="adv-rarity-select" style="display:inline;">
 +
    <div id="adv-rarity-input-3" style="display:inline;"></div>
 +
    <div id="adv-rarity-input-4" style="display:inline;"></div>
 +
    <div id="adv-rarity-input-5" style="display:inline;"></div>
 +
    <div id="adv-rarity-input-s" style="display:inline;"></div>
 +
  </form>
 +
  <div id="adv-level-input" style="display:inline-block; margin-left:0.5em;"></div>
 +
  <div id="adv-stat-output-container" style="text-align:center; margin-top:4px;">
 +
    <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-hp-label">Max 5★ HP:</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></includeonly>

Latest revision as of 15:14, 25 December 2019

50px Documentation
Max 5★ HP:
446
Max 5★ Str:
307