Widget:BoostCalcForm: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição |
Sem resumo de edição |
||
(13 revisões intermediárias por 2 usuários não estão sendo mostradas) | |||
Linha 1: | Linha 1: | ||
<style> | |||
.mw-body-content { | |||
display: flex; | |||
} | |||
.mw-parser-output { | |||
display: inline-block; | |||
padding: .5rem 2rem; | |||
margin: 0 auto; | |||
border: 30px solid transparent; | |||
border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38; | |||
} | |||
</style> | |||
<form class="boostCalc__form" data-target="calcBoostForm"> | <form class="boostCalc__form" data-target="calcBoostForm"> | ||
<div class="input-group"> | <div class="input-group"> | ||
Linha 23: | Linha 38: | ||
<div class="checkbox-group"> | <div class="checkbox-group"> | ||
<input placeholder=" " type="checkbox" name="specialBoost" id="specialBoostCheckbox"> | <input placeholder=" " type="checkbox" name="specialBoost" id="specialBoostCheckbox"> | ||
<label for="specialBoostCheckbox"> | <label for="specialBoostCheckbox">Marque se você irá usar metal, crystal ou ancient stone!</label> | ||
</div> | </div> | ||
Linha 34: | Linha 49: | ||
<div> | <div> | ||
<img src=" | <img src="https://wiki.pokexgames.com/images/a/a0/Seta-Calculadora.png" alt="Seta"> | ||
</div> | </div> | ||
Linha 45: | Linha 60: | ||
<div class="input-group"> | <div class="input-group"> | ||
<input placeholder=" " name="stonePrice" id="stonePrice" class="boostCalc__input" type="number"> | <input placeholder=" " name="stonePrice" id="stonePrice" step="0.01" class="boostCalc__input" type="number"> | ||
<label class="boostCalc__label" for="stonePrice">Digite o preço da stone (Ex: 8)</label> | <label class="boostCalc__label" for="stonePrice">Digite o preço da stone (Ex: 8)</label> | ||
</div> | </div> | ||
<div class="input-group"> | <div class="input-group"> | ||
<input placeholder=" " name="boostStonePrice" id="boostStonePrice" class="boostCalc__input" type="number"> | <input placeholder=" " name="boostStonePrice" id="boostStonePrice" step="0.01" class="boostCalc__input" type="number"> | ||
<label class="boostCalc__label" for="boostStonePrice">Digite o preço da Boost stone (Ex: 180)</label> | <label class="boostCalc__label" for="boostStonePrice">Digite o preço da Boost stone (Ex: 180)</label> | ||
</div> | </div> | ||
Linha 56: | Linha 71: | ||
<div class="d-flex justify-center align-center flex-column"> | <div class="d-flex justify-center align-center flex-column"> | ||
<button type="submit" class="hover-minimize" style="background:none;border:none;margin-top:1.5rem;cursor:pointer;"> | <button type="submit" class="hover-minimize" style="background:none;border:none;margin-top:1.5rem;cursor:pointer;"> | ||
<img style="border-radius:12px;" src=" | <img style="border-radius:12px;" src="https://wiki.pokexgames.com/images/d/d3/Banner_calculadora.png" alt="Imagem botão calcular boost" /> | ||
</button> | </button> | ||
<a href="javascript:void(0);" data-target="clearForm" class="mt-1"> Limpar campos </a> | <a href="javascript:void(0);" data-target="clearForm" class="mt-1"> Limpar campos </a> | ||
Linha 62: | Linha 77: | ||
</form> | </form> | ||
<div data-target="boostCalc-resultContainer" class="boostCalc__resultContainer d-none"> | <div data-target="boostCalc-resultContainer" class="boostCalc__resultContainer d-none mt-2"> | ||
<h5 class="boostCalc__resultTitle">Resultado</h5> | <h5 class="boostCalc__resultTitle">Resultado</h5> | ||
<h6 data-target="boostCalc-result" class="boostCalc__result"></h6> | <h6 data-target="boostCalc-result" class="boostCalc__result"></h6> | ||
Linha 103: | Linha 118: | ||
responseBoost.push( | responseBoost.push( | ||
{ | { | ||
price: | price: (usedNormalStones * stonePrice) + (usedBoostStones * boostStonePrice), | ||
normal_stones: usedNormalStones, | normal_stones: usedNormalStones, | ||
boost_stones: usedBoostStones, | boost_stones: usedBoostStones, | ||
Linha 147: | Linha 162: | ||
responseBoost.push( | responseBoost.push( | ||
{ | { | ||
price: | price: (usedNormalStones * stonePrice) + (usedBoostStones * boostStonePrice), | ||
normal_stones: usedNormalStones, | normal_stones: usedNormalStones, | ||
boost_stones: usedBoostStones, | boost_stones: usedBoostStones, | ||
Linha 167: | Linha 182: | ||
responseBoost.push( | responseBoost.push( | ||
{ | { | ||
price: | price: (usedNormalStones * stonePrice) + (usedBoostStones * boostStonePrice), | ||
normal_stones: usedNormalStones, | normal_stones: usedNormalStones, | ||
boost_stones: usedBoostStones, | boost_stones: usedBoostStones, | ||
Linha 203: | Linha 218: | ||
Pedras comuns: <span class=""> ${result[result.length - 1].normal_stones} </span> | Pedras comuns: <span class=""> ${result[result.length - 1].normal_stones} </span> | ||
Pedras de boost: <span class=""> ${result[result.length - 1].boost_stones} </span> | Pedras de boost: <span class=""> ${result[result.length - 1].boost_stones} </span> | ||
Custo total: <span class=""> ${result[result.length - 1].price} K </span> | Custo total: <span class=""> ${result[result.length - 1].price >= 1000 ? `${formatNumber(result[result.length - 1].price / 1000)} KK` : `${formatNumber(result[result.length - 1].price)} K`}</span> | ||
`; | `; | ||
} else { | } else { | ||
Linha 210: | Linha 225: | ||
Pedras comuns: <span class=""> ${result[result.length - 1].normal_stones} </span> | Pedras comuns: <span class=""> ${result[result.length - 1].normal_stones} </span> | ||
Pedras de boost: <span class=""> ${result[result.length - 1].boost_stones} </span> | Pedras de boost: <span class=""> ${result[result.length - 1].boost_stones} </span> | ||
Custo total: <span class=""> ${result[result.length - 1].price} K </span> | Custo total: <span class=""> ${result[result.length - 1].price >= 1000 ? `${formatNumber(result[result.length - 1].price / 1000)} KK` : `${formatNumber(result[result.length - 1].price / 1000)} K`}</span> | ||
`; | `; | ||
} | } | ||
console.log("Relação de boost a boost:"); | // console.log("Relação de boost a boost:"); | ||
console.log(result); | // console.log(result); | ||
document.querySelector("[data-target='boostCalc-resultContainer']").classList.remove("d-none"); | document.querySelector("[data-target='boostCalc-resultContainer']").classList.remove("d-none"); | ||
}); | }); | ||
}); | }); | ||
</script> | </script> |
Edição atual tal como às 11h33min de 16 de agosto de 2023
<style> .mw-body-content {
display: flex;
}
.mw-parser-output { display: inline-block;
padding: .5rem 2rem; margin: 0 auto; border: 30px solid transparent; border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
} </style>
<form class="boostCalc__form" data-target="calcBoostForm">
<select name="boostType" class="boostCalc__select" id="boostType"> <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="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> <option value="50">50</option> </select>
<label class="boostCalc__label" for="boostType">Selecione o tipo do boost</label>
<input placeholder=" " type="checkbox" name="specialBoost" id="specialBoostCheckbox"> <label for="specialBoostCheckbox">Marque se você irá usar metal, crystal ou ancient stone!</label>
<input placeholder=" " value="0" name="startBoost" id="startBoost" required class="boostCalc__input" min="0" max="49" type="number"> <label class="boostCalc__label" for="startBoost">Digite o boost atual</label>
<img src="https://wiki.pokexgames.com/images/a/a0/Seta-Calculadora.png" alt="Seta">
<input placeholder=" " value="50" name="endBoost" id="endBoost" required class="boostCalc__input" min="1" max="50" type="number"> <label class="boostCalc__label" for="endBoost">Digite o boost desejado</label>
<input placeholder=" " name="stonePrice" id="stonePrice" step="0.01" class="boostCalc__input" type="number"> <label class="boostCalc__label" for="stonePrice">Digite o preço da stone (Ex: 8)</label>
<input placeholder=" " name="boostStonePrice" id="boostStonePrice" step="0.01" class="boostCalc__input" type="number"> <label class="boostCalc__label" for="boostStonePrice">Digite o preço da Boost stone (Ex: 180)</label>
<button type="submit" class="hover-minimize" style="background:none;border:none;margin-top:1.5rem;cursor:pointer;"> <img style="border-radius:12px;" src="https://wiki.pokexgames.com/images/d/d3/Banner_calculadora.png" alt="Imagem botão calcular boost" /> </button> <a href="javascript:void(0);" data-target="clearForm" class="mt-1"> Limpar campos </a>
</form>
Resultado
<script>
// Função para formatar numeros para o padrão decimal const formatNumber = (number) => Number(number).toLocaleString("pt-BR", { style: "decimal" }); document.querySelector("[data-target='clearForm']").addEventListener("click", function() { document.getElementById("boostType").value = "2"; document.getElementById("specialBoostCheckbox").checked= false; document.getElementById("startBoost").value = "0"; document.getElementById("endBoost").value = "50"; document.getElementById("stonePrice").value = ""; document.getElementById("boostStonePrice").value = ""; document.querySelector("[data-target='boostCalc-resultContainer']").classList.add("d-none"); });
// Função que retorna o calculo de gasto para boostar um pokemon (Forma normal)
function calcNormalBoost(initBoost, endBoost, boostType, stonePrice, boostStonePrice) {
const responseBoost = []; let usedNormalStones = 0; let usedBoostStones = 0; let stonesForBoost = 0;
for (i = 0; i <= initBoost; i++) { if (i % boostType === 0) stonesForBoost++; }
for (i = initBoost + 1; i <= endBoost; i++) { if ((stonesForBoost * stonePrice) < boostStonePrice) { usedNormalStones += stonesForBoost; } else { usedBoostStones++; }
if (i % boostType == 0 && i != initBoost) stonesForBoost++;
responseBoost.push( { price: (usedNormalStones * stonePrice) + (usedBoostStones * boostStonePrice), normal_stones: usedNormalStones, boost_stones: usedBoostStones, boost: i } ); }
return responseBoost;
}
// Função que retorna o calculo de gasto para boostar um pokemon (Exceção) function calcExceptionBoost(initBoost, endBoost, boostType, stonePrice, boostStonePrice) { const responseBoost = []; let usedNormalStones = 0; let usedBoostStones = 0; let stonesForBoost = 1;
for (i = 1; i <= initBoost; i++) { if (i < 10) continue; if (i % boostType === 0) stonesForBoost++; }
for (i = initBoost + 1; i <= endBoost; i++) { if (i < 10) { if (!(i % 2 === 0)) { responseBoost.push( { price: null, necessary_stones: null, boost: i } );
continue; }
if ((stonesForBoost * stonePrice) < boostStonePrice) { usedNormalStones += stonesForBoost; } else { usedBoostStones++; }
responseBoost.push( { price: (usedNormalStones * stonePrice) + (usedBoostStones * boostStonePrice), normal_stones: usedNormalStones, boost_stones: usedBoostStones, boost: i } );
continue; }
if ((stonesForBoost * stonePrice) < boostStonePrice) { usedNormalStones += stonesForBoost; } else { usedBoostStones++; }
if (i % boostType === 0) stonesForBoost++;
responseBoost.push( { price: (usedNormalStones * stonePrice) + (usedBoostStones * boostStonePrice), normal_stones: usedNormalStones, boost_stones: usedBoostStones, boost: i } ); }
return responseBoost; }
document.addEventListener('DOMContentLoaded', function () { const resultArea = document.querySelector("[data-target='boostCalc-result']"); const form = document.querySelector("[data-target='calcBoostForm']");
form.addEventListener("submit", function (e) { e.preventDefault(); let result; const formData = new FormData(form); const boostType = Number(formData.get("boostType")); const specialBoost = formData.get("specialBoost"); const stonePrice = formData.get("stonePrice") ? Number(formData.get("stonePrice")) > 1000 ? Number(formData.get("stonePrice")) / 1000 : Number(formData.get("stonePrice")) : 0; const boostStonePrice = formData.get("boostStonePrice") ? Number(formData.get("boostStonePrice")) > 1000 ? Number(formData.get("boostStonePrice")) / 1000 : Number(formData.get("boostStonePrice")) : 9999999; const startBoost = Number(formData.get("startBoost")); const endBoost = Number(formData.get("endBoost"));
if (startBoost > endBoost) { alert("O boost inicial não pode ser maior do que o final"); return; }
if (specialBoost == "on") { result = calcExceptionBoost(startBoost, endBoost, boostType, stonePrice, boostStonePrice); resultArea.innerHTML = ` Pedras comuns: ${result[result.length - 1].normal_stones} Pedras de boost: ${result[result.length - 1].boost_stones} Custo total: ${result[result.length - 1].price >= 1000 ? `${formatNumber(result[result.length - 1].price / 1000)} KK` : `${formatNumber(result[result.length - 1].price)} K`} `; } else { result = calcNormalBoost(startBoost, endBoost, boostType, stonePrice, boostStonePrice); resultArea.innerHTML = ` Pedras comuns: ${result[result.length - 1].normal_stones} Pedras de boost: ${result[result.length - 1].boost_stones} Custo total: ${result[result.length - 1].price >= 1000 ? `${formatNumber(result[result.length - 1].price / 1000)} KK` : `${formatNumber(result[result.length - 1].price / 1000)} K`} `; } // console.log("Relação de boost a boost:"); // console.log(result); document.querySelector("[data-target='boostCalc-resultContainer']").classList.remove("d-none"); }); });
</script>