<div class="container text-white mx-auto w-full max-w-xl mt-10 p-4 rounded-md">
  <h1 class="text-2xl text-center font-bold mb-6">RustCasino Coinflip Verifier</h1>
  
  <label for="serverSeed">Server Seed</label>
  <input id="serverSeed" type='text' class='w-full py-2 px-3 rounded-md mt-1 mb-2' />

  <label for="serverHash">Server Hash</label>
  <input id="serverHash" type='text' class='w-full py-2 px-3 rounded-md mt-1 mb-2' />

  <label for="randomSeed">Random.org Seed</label>
  <input id="randomSeed" type='text' class='w-full py-2 px-3 rounded-md mt-1 mb-2' />
  
  <label for="clientSeed1">Slot 1 Client Seed</label>
  <input id="clientSeed1" type='text' class='w-full py-2 px-3 rounded-md mt-1 mb-2' />
  
  <label for="clientSeed2">Slot 2 Client Seed</label>
  <input id="clientSeed2" type='text' class='w-full py-2 px-3 rounded-md mt-1 mb-2' />

  <div id="verify" class='cursor-pointer text-center p-3 rounded-md mt-3'>
     Verify Game
  </div>
  
  <div id="result" class='mt-3'>
  </div>
</div>
body, input {
  background: #1a1e22;
}

.container {
  background: #22272d;
}

label {
  color: #aaa;
}

#verify {
  background-color: #ef4739;
}
/* global CryptoJS */

import seedrandom from 'https://cdn.skypack.dev/seedrandom@3.0.5'

const result = document.getElementById('result')

const error = message => {
  result.innerHTML = `<div class="text-red-500">${message}</div>`
}

document.getElementById('verify').onclick = () => {
  const serverSeed = document.getElementById('serverSeed').value
  const serverHash = document.getElementById('serverHash').value
  const randomSeed = document.getElementById('randomSeed').value
  const clientSeed1 = document.getElementById('clientSeed1').value
  const clientSeed2 = document.getElementById('clientSeed2').value

  if (!serverSeed) return error('Server seed is required')
  if (!serverHash) return error('Server hash is required')
  if (!randomSeed) return error('Random.org seed is required')
  if (!clientSeed1) return error('Client seed 1 is required')
  if (!clientSeed2) return error('Client seed 2 is required')

  const isHashValid = CryptoJS.SHA256(serverSeed).toString() === serverHash

  let results = ''
    const rollNumber = seedrandom(`${serverSeed}:${clientSeed1}:${clientSeed2}:${randomSeed}`)()
    const percent = Number((rollNumber*100).toFixed(2))
    results += `<div class="text-gray-300">Percentage - ${percent}%</div>`

  result.innerHTML = `<div class="text-center">
    <div class="font-bold my-2 uppercase text-xl">
      ${isHashValid
        ? '<div class="text-green-500">Game is valid</div>'
        : '<div class="text-red-500">Game is invalid</div>'}
    </div>

      ${results}
  </div>`
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js