Pickaw Draw Emulator

This form allows you to emulate and verify the picked positions list on a Pickaw draw.

by Pickaw

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.3/seedrandom.min.js"></script>
<div class="max-w-xl mx-auto font-sans p-8">

  <h1 class="font-bold">
    This form allows you to emulate and verify the picked positions list on a Pick<u>a</u>w draw:
  </h1>

  <form id="form" class="flex flex-col mt-4">

    <div class="flex flex-wrap items-center my-1">
      <label for="seed" class="mr-4">Seed of the draw:</label><input type="text" id="seed" maxlength="64" class="py-1 px-3 flex-grow rounded border">
    </div>
    <div class="flex flex-wrap items-center my-1">
      <label for="entries_count" class="mr-4">Number of entries:</label><input type="number" id="entries_count" class="py-1 px-3 flex-grow rounded border">
    </div>
    <div class="flex flex-wrap items-center my-1">
      <label for="nb_to_pick" class="mr-4">Number of winners:</label><input type="number" id="nb_to_pick" value="100" class="py-1 px-3 flex-grow rounded border">
    </div>

    <button type="submit" class="mt-4 bg-blue-500 text-white py-1 px-3 rounded">Compute!</button>

  </form>

  <div class="mt-8">
    <b>Results:<span class="ml-2 font-normal text-sm">(random number, position, real position)</span></b>
    <pre id="results" class="text-xs overflow-scroll mt-3 rounded border px-4 py-3" style="max-height: 500px;">Fill the fields to see results.</pre>
  </div>

</div>

JavaScript

let isComputing = false

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

document.querySelector('#form').addEventListener('submit', async (event) => {
  
  event.preventDefault()

  if (isComputing)
    return alert('Already computing, please wait before retrying...')

  let $qs = sel => document.querySelector(sel)
  let resultsElem = $qs('#results')

  let seed = $qs('#seed').value.trim()
  let entriesCount = parseInt($qs('#entries_count').value.trim())
  let nbToPick = parseInt($qs('#nb_to_pick').value.trim() || 100)
  
  if (seed.length !== 16)
  	return alert('Please enter a 16 characters seed.')
    
  if (!!entriesCount.length)
  	return alert('Please enter a number of entries.')
    
  if (!!nbToPick.length)
  	return alert('Please enter a number of winners.')
    
  if (entriesCount < nbToPick)
  	return alert('Please enter a number of entries greater or equal to the number of winners.')

  isComputing = true

  let nbRemainingEntries = entriesCount
  let previousDraws = []
  let rng = new Math.seedrandom(seed)

  resultsElem.innerText = ''

  while (nbRemainingEntries > 0 && previousDraws.length < nbToPick) {

    let randomFloat = rng()
    let drawPos = Math.floor(randomFloat * nbRemainingEntries)
    let actualPos = previousDraws.reduce((ac, cv) => cv <= ac ? ac + 1 : ac, drawPos)
    let insertAt = actualPos - drawPos

    previousDraws.splice(insertAt, 0, actualPos)
    nbRemainingEntries--

    resultsElem.innerText += `${randomFloat}\t\t${drawPos}\t\t${actualPos}\n`

    if (nbRemainingEntries % 10 === 0)
      await sleep(1)

  }

  isComputing = false

})