Widget:TestCalc

From Granblue Fantasy Wiki
Jump to navigation Jump to search

<style>

  1. garrison-calculator-ui input[type=number]::-webkit-inner-spin-button {
   opacity: 1;

}

  1. garrison-calculator-ui input[type=number]{
   font-size: 20px;
   width: 80px;

}

  1. gc-ele-rdc {
   font-size: 20px;
   width: 84px;

}


select {

   text-align-last:right;

}

  1. garrison-calculator-ui input,
  2. garrison-calculator-ui .gc-total,
  3. gc-skill-total,
  4. gc-out-simple {
   text-align:right;

}

  1. gc-extra input {
   width:80px;

}

th.gc-hp {

   min-width:90px;

} </style> <style id="gc-show-ele-rdc"> td.gc-ele-rdc, td.gc-ele-ehp, th.gc-ele-rdc-hdr {

    display: none;

} </style>

Weapon Skills
SkillSLAmountTotal
Small Garrison

<img alt="Ws skill guard 1 1.png" src="/images/thumb/b/b7/Ws_skill_guard_1_1.png/80px-Ws_skill_guard_1_1.png" decoding="async" width="80" height="80" srcset="/images/b/b7/Ws_skill_guard_1_1.png 1.5x" data-file-width="90" data-file-height="90">

10<input type="number" value="0" min="0" max="10" onchange="weaponUpdate(this)"></input>0
15<input type="number" value="0" min="0" max="10" onchange="weaponUpdate(this)"></input>0
Medium Garrison

<img alt="Ws skill guard 1 2.png" src="/images/thumb/9/97/Ws_skill_guard_1_2.png/80px-Ws_skill_guard_1_2.png" decoding="async" width="80" height="80" srcset="/images/9/97/Ws_skill_guard_1_2.png 1.5x" data-file-width="90" data-file-height="90">

10<input type="number" value="0" min="0" max="10" onchange="weaponUpdate(this)"></input>0
15<input type="number" value="0" min="0" max="10" onchange="weaponUpdate(this)"></input>0
20<input type="number" value="0" min="0" max="10" onchange="weaponUpdate(this)"></input>0
Big Garrison

<img alt="Ws skill guard 1 3.png" src="/images/thumb/c/ce/Ws_skill_guard_1_3.png/80px-Ws_skill_guard_1_3.png" decoding="async" width="80" height="80" srcset="/images/c/ce/Ws_skill_guard_1_3.png 1.5x" data-file-width="90" data-file-height="90">

10<input type="number" value="0" min="0" max="10" onchange="weaponUpdate(this)"></input>0
15<input type="number" value="0" min="0" max="10" onchange="weaponUpdate(this)"></input>0
20<input type="number" value="0" min="0" max="10" onchange="weaponUpdate(this)"></input>0
Overall0
Extra

<img alt="Ws skill stance 4.png" src="/images/thumb/a/a0/Ws_skill_stance_4.png/25px-Ws_skill_stance_4.png" decoding="async" width="25" height="25" srcset="/images/thumb/a/a0/Ws_skill_stance_4.png/38px-Ws_skill_stance_4.png 1.5x, /images/thumb/a/a0/Ws_skill_stance_4.png/50px-Ws_skill_stance_4.png 2x" data-file-width="90" data-file-height="90">

HP

<input id="gc-max-hp" type="number" step="1000" value="100" min="100" onchange="updateExtra(this)"></input>

<img alt="Status Shield.png" src="/images/thumb/7/75/Status_Shield.png/25px-Status_Shield.png" decoding="async" width="25" height="25" srcset="/images/thumb/7/75/Status_Shield.png/38px-Status_Shield.png 1.5x, /images/thumb/7/75/Status_Shield.png/50px-Status_Shield.png 2x" data-file-width="64" data-file-height="64">

Shield

<input id="gc-shield" type="number" step="100" value="0" min="0" onchange="updateExtra(this)"></input>

<img alt="Status DefenseUp.png" src="/images/thumb/5/56/Status_DefenseUp.png/25px-Status_DefenseUp.png" decoding="async" width="25" height="25" srcset="/images/thumb/5/56/Status_DefenseUp.png/38px-Status_DefenseUp.png 1.5x, /images/thumb/5/56/Status_DefenseUp.png/50px-Status_DefenseUp.png 2x" data-file-width="64" data-file-height="64">

DEF Up <input id="gc-def" type="number" step="5" value="0" min="-99" onchange="updateExtra(this)"></input> %

<img alt="Ws skill damage red 4.png" src="/images/thumb/b/b0/Ws_skill_damage_red_4.png/25px-Ws_skill_damage_red_4.png" decoding="async" width="25" height="25" srcset="/images/thumb/b/b0/Ws_skill_damage_red_4.png/38px-Ws_skill_damage_red_4.png 1.5x, /images/thumb/b/b0/Ws_skill_damage_red_4.png/50px-Ws_skill_damage_red_4.png 2x" data-file-width="86" data-file-height="86">

Ele RdcElemental Reduction
There are many sources of Elemental Reduction but this should only be used for Elemental Reductions from the weapon skills

<select id="gc-ele-rdc" onchange="updateEleRdc(this)"> <optgroup label="Standard"> <option value="0">0</option> </optgroup> <optgroup label="Rose Barrier / Qilin Weapons [10 / 15 / 20]"> <option value="10">10</option> <option value="15">15</option> <option value="17.5">17.5</option> </optgroup> <optgroup label="Rose Bud Weapons [10]"> <option value="20">20</option> </optgroup> <optgroup label="Draconic Weapons [15 / 20]"> <option value="25">25</option> <option value="30">30</option> </optgroup> <optgroup label="Others" style="height:70px;"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> </optgroup> </select> %

<button onclick="generateCharts()">Generate Charts!</button>
Active Summons
Summon 1 Summon 2 Aura

<img style="opacity:1" onclick="summonSelect(this)" data-base-amt="140" alt="Summon m 2040094000.jpg" src="/images/thumb/f/ff/Summon_m_2040094000.jpg/120px-Summon_m_2040094000.jpg" decoding="async" width="120" height="69" srcset="/images/thumb/f/ff/Summon_m_2040094000.jpg/180px-Summon_m_2040094000.jpg 1.5x, /images/thumb/f/ff/Summon_m_2040094000.jpg/240px-Summon_m_2040094000.jpg 2x" data-file-width="280" data-file-height="160">
<img style="opacity:0.3" onclick="summonSelect(this)" data-base-amt="130" alt="Summon m 2040269000.jpg" src="/images/thumb/5/58/Summon_m_2040269000.jpg/120px-Summon_m_2040269000.jpg" decoding="async" width="120" height="69" srcset="/images/thumb/5/58/Summon_m_2040269000.jpg/180px-Summon_m_2040269000.jpg 1.5x, /images/thumb/5/58/Summon_m_2040269000.jpg/240px-Summon_m_2040269000.jpg 2x" data-file-width="280" data-file-height="160">

<img style="opacity:0.3" onclick="summonSelect(this)" data-base-amt="0" alt="Base empty weapon small.png" src="/images/thumb/b/bc/Base_empty_weapon_small.png/120px-Base_empty_weapon_small.png" decoding="async" width="120" height="69" srcset="/images/b/bc/Base_empty_weapon_small.png 1.5x" data-file-width="140" data-file-height="80">

<img style="opacity:1" onclick="summonSelect(this)" data-base-amt="140" alt="Summon m 2040094000.jpg" src="/images/thumb/f/ff/Summon_m_2040094000.jpg/120px-Summon_m_2040094000.jpg" decoding="async" width="120" height="69" srcset="/images/thumb/f/ff/Summon_m_2040094000.jpg/180px-Summon_m_2040094000.jpg 1.5x, /images/thumb/f/ff/Summon_m_2040094000.jpg/240px-Summon_m_2040094000.jpg 2x" data-file-width="280" data-file-height="160">
<img style="opacity:0.3" onclick="summonSelect(this)" data-base-amt="130" alt="Summon m 2040269000.jpg" src="/images/thumb/5/58/Summon_m_2040269000.jpg/120px-Summon_m_2040269000.jpg" decoding="async" width="120" height="69" srcset="/images/thumb/5/58/Summon_m_2040269000.jpg/180px-Summon_m_2040269000.jpg 1.5x, /images/thumb/5/58/Summon_m_2040269000.jpg/240px-Summon_m_2040269000.jpg 2x" data-file-width="280" data-file-height="160">

<img style="opacity:0.3" onclick="summonSelect(this)" data-base-amt="0" alt="Base empty weapon small.png" src="/images/thumb/b/bc/Base_empty_weapon_small.png/120px-Base_empty_weapon_small.png" decoding="async" width="120" height="69" srcset="/images/b/bc/Base_empty_weapon_small.png 1.5x" data-file-width="140" data-file-height="80">
280%
HP DEF RdcReduction
Incoming damage can be reduced by this amount if it does not ignore defense.
+ ERElemental Reduction
Overall Reduction after applying Weapon Elemental Reduction
eHPEffective HP
eHP is what you get if you treat the defense and shield values as HP
+ ERElemental Reduction
Overall eHP after applying Weapon Elemental Reduction
100100%0%0%0%100100
9090%0%0%0%9090
7575%0%0%0%7575
6060%0%0%0%6060
5050%0%0%0%5050
4040%0%0%0%4040
2525%0%0%0%2525
1010%0%0%0%1010
11%0%0%0%11


Generated Charts (Requires NVD3JS)

<script type="application/javascript"> const hpMod = [3,2.989701,2.978808,2.967327,2.9552639999999997,2.942625,2.929416,2.9156429999999998,2.901312,2.886429,2.871,2.855031,2.838528,2.821497,2.803944,2.785875,2.767296,2.748213,2.728632,2.708559,2.688,2.666961,2.645448,2.623467,2.601024,2.578125,2.554776,2.530983,2.506752,2.4820889999999998,2.457,2.431491,2.4055679999999997,2.379237,2.3525039999999997,2.325375,2.297856,2.269953,2.241672,2.213019,2.1839999999999997,2.154621,2.1248880000000003,2.0948070000000003,2.064384,2.0336250000000002,2.002536,1.971123,1.939392,1.907349,1.875,1.842351,1.809408,1.776177,1.742664,1.708875,1.6748159999999999,1.6404930000000002,1.6059120000000002,1.5710790000000001,1.536,1.5006810000000002,1.465128,1.429347,1.393344,1.357125,1.3206959999999999,1.284063,1.247232,1.210209,1.1730000000000003,1.1356110000000001,1.0980480000000001,1.0603170000000002,1.022424,0.984375,0.946176,0.9078329999999999,0.8693519999999999,0.8307389999999999,0.7919999999999998,0.7531409999999998,0.7141680000000001,0.6750870000000001,0.6359040000000001,0.5966250000000001,0.5572560000000001,0.517803,0.478272,0.4386689999999999,0.3989999999999999,0.3592709999999999,0.3194879999999998,0.2796569999999998,0.23978400000000022,0.19987500000000016,0.15993600000000013,0.11997300000000011,0.07999200000000008,0.039999000000000035,0], hpPercent = "0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100";

function updateOutput() {

    var dom = document.querySelector('div#garrison-calculator-ui'),
        garMod = parseFloat(dom.querySelector('#gc-skill-total').innerText),
        summon = 1 + (parseInt(dom.querySelector('#gc-summon-total').innerText)/100),
        maxHp  = parseInt(dom.querySelector('input#gc-max-hp').value),
        shield = parseInt(dom.querySelector('input#gc-shield').value),
        defUp  = parseInt(dom.querySelector('input#gc-def').value),
        eleRdc = parseFloat(dom.querySelector('select#gc-ele-rdc').value);
    for (var res of dom.querySelectorAll('table#gc-out-simple .gc-result')) {
         var  hpr = parseInt(res.getAttribute('data-hp')),
              gar = summon * hpMod[hpr] * garMod,
              chp = maxHp*(hpr/100);
         gar = Number.isNaN(gar) ? 0 : Math.min(400,gar);
         res.querySelector('.gc-def').innerText = (gar + defUp).toLocaleString(void 0,{maximumFractionDigits:2}) + '%';
         var er = (10000/(100+gar+defUp));
         res.querySelector('.gc-rdc').innerText = (100-er).toLocaleString(void 0,{maximumFractionDigits:2}) + '%';
         res.querySelector('.gc-ele-rdc').innerText = (100-((er*(100-eleRdc))/100)).toLocaleString(void 0,{maximumFractionDigits:2}) + '%';
         res.querySelector('.gc-hp').innerText = chp.toLocaleString(void 0,{maximumFractionDigits:0});
         res.querySelector('.gc-ehp').innerText = ((chp+shield) * (1+((gar+defUp)/100))).toLocaleString(void 0,{maximumFractionDigits:0});
         res.querySelector('.gc-ele-ehp').innerText = ((chp+shield) * (1+eleRdc/100) * (1+((gar+defUp)/100))).toLocaleString(void 0,{maximumFractionDigits:0});
    }    

}

function updateEleRdc(ele) {

    if (ele.value == 0) {
         document.querySelector('style#gc-show-ele-rdc').innerHTML = `

td.gc-ele-rdc, td.gc-ele-ehp, th.gc-ele-rdc-hdr {

    display: none;

}`;

    } else {
         document.querySelector('style#gc-show-ele-rdc').innerHTML = ;
         updateOutput();
    }

}

function weaponUpdate(ele) {

    var v = Math.max(0,parseInt(ele.value)),
    weaps = 0,
    mods  = 0;
    for (var e of ele.parentNode.parentNode.parentNode.querySelectorAll('input')) {
         weaps += parseInt(e.value);
    }
    v = Math.min(10-(weaps-v),v);
    ele.value = v;
    var boost = parseFloat(ele.parentNode.parentNode.getAttribute('data-base-amt')) * v;
    ele.parentNode.nextElementSibling.innerText = boost.toLocaleString(void 0,{maximumFractionDigits:2});
    for (var e of ele.parentNode.parentNode.parentNode.querySelectorAll('#gc-skill-amount input')) {
         mods  += parseFloat(e.parentNode.nextElementSibling.innerText);
    }
    ele.parentNode.parentNode.parentNode.querySelector('#gc-skill-total').innerText = mods.toLocaleString(void 0,{maximumFractionDigits:2});
    updateOutput();

}

function summonSelect(ele) {

    for (var e of ele.parentNode.querySelectorAll('img')) {
         e.style.opacity=0.3;
    }
    ele.style.opacity=1;
    ele.parentNode.setAttribute('data-amt',ele.getAttribute('data-base-amt'));
    var amt=0;
    for (var e of ele.parentNode.parentNode.querySelectorAll('.gc-summon')) {
         amt += parseInt(e.getAttribute('data-amt'));
    }
    ele.parentNode.parentNode.querySelector('#gc-summon-total').innerText = amt + '%';
    updateOutput();

}

function updateExtra(ele) {

    ele.value = Math.max(parseInt(ele.getAttribute('min')), parseInt(ele.value));
    updateOutput();

}

function seriesTemplate(type, x, y, disable = false) {

    return `${type} Graph`;

} function seriesBaseHPTemplate(maxHP) {

    return `Base HP Graph`;

}

function chartTemplate(type, data) {

return `

${type} Chart${data}

`;

}

function generateCharts() {

    var dom = document.querySelector('div#garrison-calculator-ui'),
        garMod = parseFloat(dom.querySelector('#gc-skill-total').innerText),
        summon = 1 + (parseInt(dom.querySelector('#gc-summon-total').innerText)/100),
        maxHp  = parseInt(dom.querySelector('input#gc-max-hp').value),
        shield = parseInt(dom.querySelector('input#gc-shield').value),
        defUp  = parseInt(dom.querySelector('input#gc-def').value),
        eleRdc = parseFloat(dom.querySelector('select#gc-ele-rdc').value);
    var x = [], garData = [], defData = [], ehpData = [], shieldData = [], reducData = [], reducDefData = [], allData = [], allEhpData = [];
    for (var i=0;i<101;i++) {
         x.push(parseInt(maxHp*i/100));
         var gar = summon * hpMod[i] * garMod;
         gar = Number.isNaN(gar) ? 0 : Math.min(400,gar);
         garData.push(gar);
         reducDefData.push((100-(10000/(100+gar))).toFixed(3));
         reducData.push((100-(10000/(100+gar+defUp))).toFixed(3));
         defData.push((x[i] * (1+(gar/100))).toFixed(3));
         ehpData.push((x[i] * (1+((gar+defUp)/100))).toFixed(3));
         allData.push((100-(((10000/(100+gar+defUp))*(100-eleRdc))/100).toFixed(3)));
         allEhpData.push(((x[i]) * (1+eleRdc/100) * (1+((gar+defUp)/100))).toFixed(3));
         if (i > 0 )
              shieldData.push(((x[i]+shield) * (1+eleRdc/100) * (1+((gar+defUp)/100))).toFixed(3));
         else
              shieldData.push(0);
    }
    var hps = x.join(',');
    var defSeries = seriesTemplate('DEF (Pure Garrison)', hps, garData.join(','), true)
                  + seriesTemplate('DMG Reduction (Pure Garrison)', hps, reducDefData.join(','));
    if ( defUp > 0 ) { defSeries += seriesTemplate('DMG Reduction (Garrison & DEF)', hps, reducData.join(',')); }
    if ( eleRdc > 0 ) { defSeries += seriesTemplate('DMG Reduction (Garrison & DEF & ER)', hps, allData.join(',')); }
    var defChart = chartTemplate('( % )', defSeries);
    var eHpSeries = seriesTemplate('Pure Garrison', hpPercent, defData.join(','));
    if ( defUp > 0 ) { eHpSeries += seriesTemplate('Garrison & DEF', hpPercent, ehpData.join(',')); }
    if ( eleRdc > 0 ) { eHpSeries += seriesTemplate('Garrison & DEF & ER', hpPercent, allEhpData.join(',')); }
    if ( shield > 0 ) { eHpSeries += seriesTemplate('Garrison & DEF & ER + Shield', hpPercent, shieldData.join(',')); }
    var eHpChart = chartTemplate('Effective HP', eHpSeries + seriesBaseHPTemplate(maxHp));
    var charts = document.querySelector('div#gc-chart-output');
    charts.innerHTML = eHpChart + "
" + defChart;
    RLQ.push(['jquery', function() {
         mw.loader.using('ext.cargo.nvd3', function(require) {
              for (var e of document.querySelectorAll('[data-nvd3-chart]')) {
                   processChartElement(e);
              }
         });
    }]);

}

</script>