Colonist Random Dice

HTML

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Dice Roll Distribution Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>

  <body>

    <div class="content">
      <h1>Colonist Random Dice</h1>
      <p>You are here because you think the dice are rigged.</p>
      <p class="quote">How did 3 roll far more than 6 in my game?</p>
      <p class="quote">5 never rolled the whole game. Wth!</p>
      <p class="quote">11 rolled 3 times in a row, and the opponent ran away with the game.</p>
      <br>
      <h2>Let's experience it now.</h2>
      <p>
        Colonist's default ranked matchmaking dice rolls are random dice.
        Below is a simulation to test what the distribution would look like given the number of rolls.
      </p>


      <p>1) Try 50, which is the average rolls for a 4-player game of Colonist. See how random the distribution can be.</p>
      <p>2) Try 200, You will start to see better distribution here.</p>
      <p>3) Try 1000, you will see a near-perfect distribution.</p>

      <p>Hit generate multiple times and observe the changes.</p>
    </div>

    <div class="container">
      <h2>Dice Roll Simulation</h1>
        <input type="number" id="numRolls" placeholder="Number of Dice Rolls">
        <button onclick="generateChart()">Generate</button>
    </div>



    <canvas id="diceRollChart"></canvas>

    <div class="content">
    
      <h2>This is normal.</h2>
      
      <p>The randomness you see at 50 rolls is not rigged, It need not follow the expected distribution.</p>
      
      <p class="quote">If every game (short term) had the expected distribution… now THAT would be surprising. Generally speaking, a coin that alternates heads and tails every other flip is far more suspicious than one that has several runs of multiple heads or tails in a row.</p>
      
      <br>
      
      <p>Personally, I've had my fair share of experiences with the dice screwing me over in some games....

CSS

html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
 
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background-color: #f3f3f3;
}

.content {
    width: 90%;
    max-width: 800px; 
    margin: auto;
    padding: 1rem;
}

p, li {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6; 
}

p {
  margin-bottom: 20px;
}

a {
  color: darkorange;
}


.quote {
    font-size: 20px;        
    font-style: italic;     
    color: #555;            
    margin: 20px 0;         
    padding-left: 20px;      
    border-left: 3px solid black; 
    line-height: 1.6;        
}


@media screen and (max-width: 480px) {
    p, li {
        font-size: 16px; 
    }
    
    
    .quote{
      font-size: 18px;
    }
}



input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}


.container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

input[type="number"] {
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background-color: orange;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: darkorange;
}

#diceRollChart {
  width: 100%;
  max-width: 600px;
  margin-top: 20px;
}

JavaScript

function rollDice() {
  const die1 = Math.floor(Math.random() * 6) + 1;
  const die2 = Math.floor(Math.random() * 6) + 1;
  return die1 + die2;
}

function simulateRolls(numRolls) {
  const rollResults = new Array(11).fill(0);
  for (let i = 0; i < numRolls; i++) {
    const roll = rollDice();
    rollResults[roll - 2]++; // 2 is subtracted cuz we cant have a dice sum of 0 or 1
  }
  return rollResults;
}

function generateChart() {
  const labels = [];
  for (let i = 2; i <= 12; i++) {
    labels.push(i);
  }
  
  const numRollsInput = document.getElementById('numRolls');
  const numRolls = parseInt(numRollsInput.value);

  if (isNaN(numRolls) || numRolls <= 0) {
    alert('Please enter a valid number of rolls.');
    return;
  }
  const rollResults = simulateRolls(numRolls);



  if (window.diceRollChartInstance) {
    window.diceRollChartInstance.destroy();
  }

  const ctx = document.getElementById('diceRollChart').getContext('2d');

  window.diceRollChartInstance = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Number of Occurrences',
        data: rollResults,
        backgroundColor: 'rgba(255, 165, 0, 1)',
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
}