RoyalUr.net dice randomness distribution

README.md

RoyalUr.net dice randomness distribution

Code for a CodePen that throws the dice from RoyalUr.net a given number of times and shows how the result matches the expected distribution of randomness.

index.html

<meta property="og:image" content="https://shots.codepen.io/potherca/pen/mdBrvZK-800.jpg"/>

<article>
  <h1>RoyalUr.net dice randomness distribution</h1>
  <hr>
  <p>
    This page throws the dice from <a href="https://royalur.net/">RoyalUr.net</a> a given number of times and shows
    how the result matches the expected distribution of randomness.
  </p>
  <form>
    <input name="iterations" value="10000000" />
    <button>Roll Dice!</button>
  </form>

  <table>
    <caption>Comparison of expected and actual distribution of <span class="iterations"></span> dice throws</caption>

    <thead>
      <tr>
        <th>Value</th>
        <th>Expected</th>
        <th>Actual</th>
        <th>Deviation</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>0</td>
        <td value="0">6.25%</td>
        <td data-value="0"></td>
        <td></td>
      </tr>
      <tr>
        <td>1</td>
        <td value="1">25.00%</td>
        <td data-value="1"></td>
        <td></td>
      </tr>
      <tr>
        <td>2</td>
        <td value="2">37.50%</td>
        <td data-value="2"></td>
        <td></td>
      </tr>
      <tr>
        <td>3</td>
        <td value="3">25.00%</td>
        <td data-value="3"></td>
        <td></td>
      </tr>
      <tr>
        <td>4</td>
        <td value="4">6.25%</td>
        <td data-value="4"></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</article>

script.js

function calculateScores(iterations) {
  const scores = {
    0: 0,
    1: 0,
    2: 0,
    3: 0,
    4: 0
  };

  for (let counter = 0; counter < iterations; counter++) {
    const diceValue = countDiceUp(generateRandomDiceValues());
    scores[diceValue]++;
  }

  return scores;
}

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();

  const resultTable = document.querySelector("table");
  const iterations = parseInt(
    document.querySelector('[name="iterations"]').value,
    10
  );

  resultTable.classList.add("running");
  document.querySelector(".iterations").innerText = iterations;

  const scores = calculateScores(iterations);

  const expected = {
    0: 6.25,
    1: 25.0,
    2: 37.5,
    3: 25.0,
    4: 6.25
  };

  for (const [dieNumber, count] of Object.entries(scores)) {
    const percentage = ((100 / iterations) * count).toFixed(2);
    const deviation = (expected[dieNumber] - percentage).toFixed(2);

    const element = document.querySelector(`[data-value="${dieNumber}"]`);
    const deviationElement = element.nextElementSibling;

    let className;
    if (deviation < 0) {
      className = "minus";
    } else if (deviation > 0) {
      className = "plus";
    } else {
      className = "zero";
    }

    element.innerText = `${percentage}%`;
    deviationElement.innerText = `${deviation}%`;
    deviationElement.className = className;
  }

  resultTable.classList.remove("running");
});

scripts

<script src="https://cdn.jsdelivr.net/combine/gh/Sothatsit/RoyalUrClient@8e70c1f/src/common/utils.min.js,gh/Sothatsit/RoyalUrClient@8e70c1f/src/game/model/dice_model.min.js"></script>

style.css

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap");

a {
  color: inherit;
}

article {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 90%;
  max-width: 90%;
  padding: 0.5em 1.5em;
  margin: 1em auto;
  font-size: 1.4em;
  background-color: #202930;
  box-shadow: 0 0 0.6em 0.3em black;
  color: white;
}

body {
  background: #202930
    url("https://royalur.net/res/wood_background.v1614055952.webp") repeat;
  background-size: 35vmin;
  font-family: Nunito, sans-serif;
  font-size: 1em;
  line-height: 1.6em;
}

button,
input {
  border-radius: 0.15em;
  padding: 0.15em 0.3em;
  margin: 0.3em;
  font-family: Nunito, sans-serif;
  font-size: 2em;
  color: white;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.8);
  transition: background-color 0.1s ease-in-out;
}

button {
  border: 3px solid white;
}

button:hover {
  background-color: #151a1f;
  transition: background-color 0.1s ease-in-out;
}

caption {
  padding: 0.3em;
  caption-side: bottom;
  font-size: 50%;
}

form {
  text-align: center;
}

h1 {
  margin-top: 0.2em;
  margin-bottom: 0.15em;
  font-size: 1.5em;
}

input {
  text-align: right;
  max-width: 6.5em;
}

table {
  table-layout: auto;
  width: 50%;
  border-collapse: collapse;
  margin: auto;
}

td:first-child,
td:last-child {
  font-weight: bold;
}

th,
td {
  border: 1px solid white;
  padding: 0.5em;
  text-align: center;
}

tr:nth-child(odd) td {
  background-color: #151a1f;
}

.minus {
  color: red;
}
.plus {
  color: green;
}
.zero {
  color: lime;
}
.running {
  opacity: 0.35;
}