Widget:ParagonDegreeCalculator

实现详见模范计算器

<div id="paragonCost" style="display:none">150000</div>
<div>防御塔：<select id="paragon"><option value="150000">飞镖猴</option><option value="250000">回旋镖猴</option><option value="200000">图钉塔</option><option value="400000">猴子潜艇</option><option value="550000">海盗猴</option><option value="900000">王牌飞行员</option><option value="750000">法师猴</option><option value="500000">忍者猴</option><option value="800000">刺钉工厂</option><option value="650000">工程师猴</option></select></div>
<div>难度：<select id="difficulty"><option value="0.85">简单</option><option value="1" selected>普通</option><option value="1.08">困难</option><option value="1.2">不可击破</option></select></div>
<table class="wikitable" style="text-align:center">
<tr><th colspan="2" rowspan="2">项目</th><th colspan="4">输入</th><th rowspan="2">能量</th></tr>
<tr><th>最小值</th><th>输入</th><th>最大值</th><th>输入值</th></tr>
<tr><th rowspan="2">击破数</th><th>击破数</th><td colspan="4"><input id="damageInput" type="number" min="0" value="0" step="1" style="width:100%"></input></td><td id="damagePower" rowspan="2">0</td></tr>
<tr><th>产生金币</th><td colspan="4"><input id="cashGeneratedInput" type="number" min="0" value="0" step="1" style="width:100%"></input></td></tr>
<tr><th rowspan="2">花费数</th><th>花费数</th><td colspan="4"><input id="costInput" type="number" min="0" value="0" step="5" style="width:100%"></input></td><td id="costPower" rowspan="2">0</td></tr>
<tr><th>滑条投入</th><td>0</td><td><div style="display:flex"><input id="costSlider" type="range" min="0" max="472501" step="1" value="0"></input></div></td><td id="maxSliderRange">472501</td><td id="costSliderInput">0</td></tr>
<tr><th colspan="2">5阶数量</th><td>3</td><td><div style="display:flex"><input id="t5Slider" type="range" min="3" max="12" step="1" value="0"></input></div></td><td>12</td><td id="t5SliderInput">3</td><td id="t5Power">0</td></tr>
<tr><th colspan="2">升级数</th><td>0</td><td><div style="display:flex"><input id="upgradeSlider" type="range" min="0" max="100" step="1" value="0"></input></div></td><td>100</td><td id="upgradeSliderInput">0</td><td id="upgradePower">0</td></tr>
<tr><th colspan="2">杰拉尔多的图腾</th><td>0</td><td><div style="display:flex"><input id="totemSlider" type="range" min="0" max="100" step="1" value="0"></input></div></td><td>100</td><td id="totemSliderInput">0</td><td id="totemPower">0</td></tr>
<tr><th colspan="7">计算结果</th></tr>
<tr><th colspan="2">模范能量</th><td id="paragonPower" colspan="5">0</td></tr>
<tr><th colspan="2">模范度</th><td id="paragonDegree" colspan="5">1</td></tr>
<tr><th colspan="2">距离下一模范度所需能量</th><td id="degreeReqNext" colspan="5">2000</td></tr>
</table>
<script>
  const degreeReq = [
    0,
    2000,
    2324,
    2666,
    3027,
    3408,
    3808,
    4228,
    4669,
    5131,
    5615,
    6121,
    6650,
    7203,
    7779,
    8379,
    9004,
    9654,
    10330,
    11032,
    11761,
    12518,
    13302,
    14114,
    14955,
    15825,
    16725,
    17655,
    18616,
    19609,
    20633,
    21689,
    22778,
    23900,
    25056,
    26246,
    27471,
    28732,
    30028,
    31360,
    32729,
    34135,
    35579,
    37061,
    38582,
    40143,
    41743,
    43383,
    45064,
    46786,
    48550,
    50356,
    52205,
    54098,
    56034,
    58014,
    60039,
    62109,
    64225,
    66387,
    68596,
    70853,
    73157,
    75509,
    77910,
    80360,
    82860,
    85410,
    88011,
    90664,
    93368,
    96124,
    98933,
    101795,
    104711,
    107681,
    110706,
    113787,
    116923,
    120115,
    123364,
    126670,
    130034,
    133456,
    136937,
    140478,
    144078,
    147738,
    151459,
    155241,
    159085,
    162991,
    166960,
    170993,
    175089,
    179249,
    183474,
    187764,
    192120,
    200000,
    Infinity
  ]
  let calcDegree=()=>{
    let power = Number(document.getElementById('t5Power').innerText)+Number(document.getElementById('upgradePower').innerText)+Number(document.getElementById('costPower').innerText)+Number(document.getElementById('damagePower').innerText)+Number(document.getElementById('totemPower').innerText)
    power=Math.min(200000,power)
    let degree=1
    for (let i=0;i<=100;i++){
      if (power<degreeReq[i]){
        degree=i
        break
      }
    }
    document.getElementById('paragonPower').innerText=power
    document.getElementById('paragonDegree').innerText=degree
    document.getElementById('degreeReqNext').innerText=(degree==100)?'N/A':(degreeReq[degree]-degreeReq[degree-1])
  }
  let calcDamageInput=()=>{
    document.getElementById('damagePower').innerText=Math.min(90000,(Number(document.getElementById('damageInput').value)+Number(document.getElementById('cashGeneratedInput').value)*4)/180)
    calcDegree()
  }
  let resetParagonCost=()=>{
    let paragonDOM = document.getElementById('paragon')
    let difficultyDOM = document.getElementById('difficulty')
    let baseParagonCost = Number(paragonDOM.options[paragonDOM.selectedIndex].value)
    let multiplier = Number(difficultyDOM.options[difficultyDOM.selectedIndex].value)
    let paragonCost = baseParagonCost*multiplier
    document.getElementById('paragonCost').innerHTML=Math.round(paragonCost)
    document.getElementById('costInput').innerText=0
    document.getElementById('costSlider').value=0
    document.getElementById('costSlider').max=Math.floor(3.15*paragonCost)+1
    document.getElementById('maxSliderRange').innerHTML=Math.floor(3.15*paragonCost)+1
    document.getElementById('costSliderInput').innerHTML=0
  }
  let calcCostInput=()=>{
    let paragonCost = Number(document.getElementById('paragonCost').innerText)
    let powerFromCost = Number(document.getElementById('costInput').value)/(paragonCost/20000)
    let powerFromSlider = Math.ceil(Number(document.getElementById('costSlider').value)/(paragonCost*1.05/20000))
    document.getElementById('costPower').innerText=Math.min(60000,powerFromCost+powerFromSlider)
    calcDegree()
  }
  document.getElementById('t5Slider').oninput=()=>{
    document.getElementById('t5SliderInput').innerText=document.getElementById('t5Slider').value
    document.getElementById('t5Power').innerText=Math.min((Number(document.getElementById('t5Slider').value)-3)*6000,50000)
    calcDegree()
  }
  document.getElementById('upgradeSlider').oninput=()=>{
    document.getElementById('upgradeSliderInput').innerText=document.getElementById('upgradeSlider').value
    document.getElementById('upgradePower').innerText=Number(document.getElementById('upgradeSlider').value)*100
    calcDegree()
  }
  document.getElementById('totemSlider').oninput=()=>{
    document.getElementById('totemSliderInput').innerText=document.getElementById('totemSlider').value
    document.getElementById('totemPower').innerText=Number(document.getElementById('totemSlider').value)*2000
    calcDegree()
  }
  document.getElementById('damageInput').oninput=()=>{
    calcDamageInput()
  }
  document.getElementById('cashGeneratedInput').oninput=()=>{
    calcDamageInput()
  }
  document.getElementById('paragon').onchange=e=>{
    resetParagonCost()
    calcCostInput()
  }
  document.getElementById('difficulty').onchange=e=>{
    resetParagonCost()
    calcCostInput()
  }
  document.getElementById('costInput').oninput=()=>{
    calcCostInput()
  }
  document.getElementById('costSlider').oninput=()=>{
    document.getElementById('costSliderInput').innerText=document.getElementById('costSlider').value
    calcCostInput()
  }
</script>