Widget:BoostCalcForm: mudanças entre as edições

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 38: 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">Você irá usar metal, crystal ou ancient stone ?</label>
             <label for="specialBoostCheckbox">Marque se você irá usar metal, crystal ou ancient stone!</label>
         </div>
         </div>


Linha 60: 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 228: Linha 228:
                     `;
                     `;
                 }
                 }
               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>
               <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>