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 })
<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>