JSFiddle - React, Tailwind, and code Playground

by amarcrypto

HTML

<!doctype html>
<html>

  <head>
    <title>Dice Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

    </script>
    <script src="dice.js"></script>
    <script src="diceLS.js"></script>
  </head>

  <body>
    <h1>Fun Dice Rolls</h1>
    <input type="number" id="setDiceSetSize" value="1" id="DiceSize">
    <input type="button" id="setDiceSetSizeButton" value="Set Bet Amount" />
        <input type="number" id="setBalance" value="100" id="Balance">
    <input type="button" id="setBalanceButton" value="Set Balance" />
        <input type="number" id="setChance" value="50" id="DiceSize">
    <input type="button" id="setChanceButton" value="Set Winning Chance %" />
    <br>
    <input type="number" id="setDiceSetSides" value="2" id="DiceSides">
    <input type="button" id="setDiceSetSidesButton" value=" Set Multiply on Loss" />
    <p> <input type="button" id="rollButton" value="Start Rolls" /> </p>
    <p> <input type="button" id="RollAverageButton" value="Stop Rolls" /> </p>
    <p><input type="button" id="diceResetButton" value="Reset Stats" /> </p>
    <p id="outcome"> </p>
  </body>
</html>

JavaScript

//
// Example use:
//   dice = new DiceSet();
//
//   dice.roll() --> simulates roll and returns array of individual dice results
//   dice.numRolls() --> number of times the set of dice has been rolled
//   dice.getAverage() --> average totals from the sets
//   dice.history --> an array of totals from the set rolls
//
//   dice.reset() --> resets history of dice rolls
//
//   dice.setNumSides(8) --> configure for 8-sided DiceSet
//   dice.setDiceSetSize(4) --> roll 4 dice with each set


class DiceSet {
  constructor() {
    this.sides = 100;
    this.quantity = 1;
    this.history = [];
    this.runningTotal = 0;
  }

  singleRoll() {
    return Math.floor(Math.random() * this.sides);
  }

  setNumSides(numSides) {
    this.sides = numSides;
    this.reset();
  }

  setDiceSetSize(numDice) {
    this.quantity = numDice;
    this.reset();
  }

  reset() {
    this.history = [];
    this.runningTotal = 0;
  }

  numRolls() {
    return this.history.length;
  }

  getAverage() {
    return this.runningTotal / this.history.length;
  }

  roll() {
    var total, same, rollSet, i;
    same = true;
    rollSet = [];
    rollSet[0] = this.singleRoll();
    total = rollSet[0];
    for (i = 1; i < this.quantity; i++) {
      rollSet[i] = this.singleRoll();
      total += rollSet[i];
      if (rollSet[i] !== rollSet[i - 1]) {
        same = false;
      }
    }
    this.history.push(total);
    this.runningTotal += total;
    return rollSet;
  }
}

numbers = [
  "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50"
]

$(function() {
  //var dice;
  // For creating a new Diceset
  dice = new DiceSet();


  $("#rollButton").click(function() {
    //var dice, outcomeList, message;
    outcomeList = dice.roll();
    console.log(outcomeList);

...