JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div class="form-container">
    <h2>Conversor de Gold - Aika Online</h2>

    <label for="gold">Quantidade de Gold (máximo 1.000.000.000):</label>
    <input type="text" id="gold" placeholder="Ex: 1.000.000.000" oninput="formatarMascaraComLimite(this)">

    <label for="valorB">Valor do B em Reais:</label>
    <input type="number" id="valorB" placeholder="Ex: 40" step="any">

    <button onclick="converter()">Converter</button>

    <div class="result" id="resultado" style="display:none;"></div>
  </div>

CSS

.form-container {
      background: #1e1e1e;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 10px #000;
      width: 100%;
      max-width: 400px;
    }

    label {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
    }

    input, button {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: none;
      border-radius: 5px;
    }

    input {
      background-color: #333;
      color: #fff;
    }

    button {
      background-color: #00bcd4;
      color: #fff;
      cursor: pointer;
    }

    .result {
      margin-top: 20px;
      padding: 15px;
      background-color: #222;
      border-radius: 8px;
    }

JavaScript

const LIMITE_MAXIMO = 1_000_000_000;

    function formatarGold(input) {
      let valor = input.value.replace(/\D/g, "");
      if (!valor) {
        input.value = "";
        return;
      }

      let numero = parseInt(valor, 10);
      if (numero > LIMITE_MAXIMO) numero = LIMITE_MAXIMO;

      input.value = numero.toLocaleString("pt-BR");
    }

    function formatarMoeda(input) {
      let valor = input.value.replace(/\D/g, "");
      if (valor.length < 3) {
        valor = valor.padStart(3, "0");
      }

      const centavos = valor.slice(-2);
      const reais = valor.slice(0, -2);
      input.value = `R$ ${parseInt(reais, 10).toLocaleString("pt-BR")},${centavos}`;
    }

    function desformatarNumero(valorFormatado) {
      return parseInt(valorFormatado.replace(/\D/g, ""), 10) || 0;
    }

    function desformatarMoeda(valorFormatado) {
      const valorLimpo = valorFormatado.replace(/\D/g, "");
      return parseFloat(valorLimpo) / 100;
    }

    function converter() {
      const gold = desformatarNumero(document.getElementById("gold").value);
      const valorB = desformatarMoeda(document.getElementById("valorB").value);

      if (gold <= 0 || isNaN(valorB)) {
        alert("Preencha todos os campos corretamente.");
        return;
      }

      const totalB = gold / 1_000_000_000;
      const totalKK = gold / 1_000_000;
      const totalReais = totalB * valorB;
      const totalCash = Math.floor(totalKK / 50); // 50KK = 1K cash

      const resultado = document.getElementById("resultado");
      resultado.style.display = "block";
      resultado.innerHTML = `
        <strong>Total em Gold:</strong> ${gold.toLocaleString()}<br>
        <strong>Detectado como:</strong> ${
          gold === 1_000_000_000 ? "B"
          : gold >= 100_000_000 ? "KK"
          : gold >= 500_000 ? "K"
          : "Abaixo de K"
        }<br>
        <strong>Equivalente em Reais:</strong> R$...