<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
  </head>
  <body>
<div class="container">
  <h1>Crash Game Verification</h1>

  <div class="input-group">
    <label for="serverSeed">Server Seed (SHA-256):</label>
    <input type="text" id="serverSeed" placeholder="Enter the server seed">
  </div>

  <div class="input-group">
    <label for="clientSeed">Client Seed:</label>
    <input type="text" id="clientSeed" placeholder="Enter the client seed">
  </div>

  <div class="input-group">
    <button id="verifyButton">Verify and Generate Crash point (Multiplier)</button>
  </div>

  <div class="output-group">
    <p><span id="crashPointResult"></span></p>
    <div id="results">
      <!-- Results for each round will be displayed here -->
    </div>
  </div>
</div>
  </body>
</html>
body {
    font-family: Arial, sans-serif;
    background-color: #1c1f26;
    color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background: #262a33;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.input-group {
    margin: 20px 0;
}

.input-group input {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    width: -moz-available;         
    width: -webkit-fill-available; 
    width: fill-available;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #3c3f48;
    background-color: #1c1f26;
    color: #f9f9f9;
}

.input-group button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background: radial-gradient(72.82% 146.43% at 50% 148.1%, #21ED97 5%, rgba(6, 10, 17, 0.00) 100%),#060A11;
    color: white;
    transition: background 0.3s;
}

.input-group button:hover {
    background: radial-gradient(121.82% 162.43% at 50% 151.1%, #21ED97 5%, rgba(6, 10, 17, 0.00) 100%),#060A11;
}

.output-group {
    margin-top: 20px;
}

.output-group p {
    font-size: 16px;
    margin: 10px 0;
}

.output-group span {
    font-weight: bold;
    color: #00a9d4;
}

.output-group .round-result {
    margin-top: 10px;
    background-color: #3c3f48;
    padding: 10px;
    border-radius: 5px;
}

.success{
  color: #21ED97 !important
}
.fail{
  color: red !important
}
function verifyAndGenerate() {
  const serverSeed = document.getElementById("serverSeed").value.trim();
  const clientSeed = document.getElementById("clientSeed").value.trim();
  if (!serverSeed || !clientSeed) {
    alert("Please fill in all fields with valid values.");
    return;
  }
  const hmac = CryptoJS.HmacSHA256(serverSeed, clientSeed);

  const hmacVal = hmac.toString(CryptoJS.enc.Hex);

  const hmacInt = parseInt("0x" + hmacVal, 16);

  let result = 1;
  if (hmacInt % 13 === 0) {
    result = 1;
  } else {
    // Use the most significant 52-bit from the hash to calculate the crash point
    const h = Number.parseInt(hmacVal.slice(0, 52 / 4), 16);
    const e = Math.pow(2, 52);
    result = Math.floor((100 * e - h) / (e - h)) / 100;
  }
  resultantElement = document.getElementById("crashPointResult");
  resultantElement.classList.remove("success", "fail");
  if (result) {
    resultantElement.textContent = `Crash Point is: ${result}`;
    resultantElement.classList.add("success");
  }
}

document
  .getElementById("verifyButton")
  .addEventListener("click", verifyAndGenerate);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.