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
 
(5 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 9: Linha 9:
     margin: 0 auto;
     margin: 0 auto;
     border: 30px solid transparent;
     border: 30px solid transparent;
     border-image: url(http://51.161.108.38/images/3/37/Calculadora-de-Boost.png) 38;
     border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
}
}
</style>
</style>
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 49: Linha 49:
              
              
             <div>
             <div>
                 <img src="http://51.161.108.38/images/a/a0/Seta-Calculadora.png" alt="Seta">
                 <img src="https://wiki.pokexgames.com/images/a/a0/Seta-Calculadora.png" alt="Seta">
             </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 71: 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="http://51.161.108.38/images/d/d3/Banner_calculadora.png" alt="Imagem botão calcular boost" />
<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 118: Linha 118:
         responseBoost.push(
         responseBoost.push(
             {
             {
                 price: formatNumber((usedNormalStones * stonePrice) + (usedBoostStones * boostStonePrice)),
                 price: (usedNormalStones * stonePrice) + (usedBoostStones * boostStonePrice),
                 normal_stones: usedNormalStones,
                 normal_stones: usedNormalStones,
                 boost_stones: usedBoostStones,
                 boost_stones: usedBoostStones,
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>