JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<div class="dice">
  <button id="diceRoll">Roll Dice</button>
  <div id="diceRollResult"></div>
</div>

CSS

.dice {
  height: 30px; width: 30px;
  border-radius: 4px;
  overflow: hidden;
  border: 3px solid #000;
  position: relative;
  transition: all ease .3s;
}

.dice.d-1{  animation: mymove1 .5s; animation-iteration-count:1; background: red;}
.dice.d-2{  animation: mymove2 .5s; animation-iteration-count:1; background: blue;}
.dice.d-3{  animation: mymove3 .5s; animation-iteration-count:1; background: orange;}
.dice.d-4{  animation: mymove4 .5s; animation-iteration-count:1; background: black;}
.dice.d-5{  animation: mymove5 .5s; animation-iteration-count:1; background: purple;}
.dice.d-6{  animation: mymove6 .5s; animation-iteration-count:1; background: olive;}

.dice button { height: 30px; width: 30px; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: transparent; z-index: 1; transition: all ease .3s; border: 0}

@keyframes mymove1 {
  0% {transform: rotateX(0deg);}
  10% {transform: rotateX(-60deg);}
  20% {transform: rotateY(-120deg);}
  30% {transform: rotateX(-180deg);}
  40% {transform: rotateY(-240deg);}
  50% {transform: rotateX(-360deg);}
  60% {transform: rotateX(-240deg);}
  70% {transform: rotateY(-180deg);}
  80% {transform: rotateX(-120deg);}
  90% {transform: rotateY(-60deg);}
  100% {transform: rotate(0deg);}
}

@keyframes mymove2 {
  0% {transform: rotateX(0deg);}
  10% {transform: rotateX(-60deg);}
  20% {transform: rotateY(-120deg);}
  30% {transform: rotateX(-180deg);}
  40% {transform: rotateY(-240deg);}
  50% {transform: rotateX(-360deg);}
  60% {transform: rotateX(-240deg);}
  70% {transform: rotateY(-180deg);}
  80% {transform: rotateX(-120deg);}
  90% {transform: rotateY(-60deg);}
  100% {transform: rotate(0deg);}
}

@keyframes mymove3 {
  0% {transform: rotateX(0deg);}
  10% {transform: rotateX(-60deg);}
  20% {transform: rotateY(-120deg);}
  30% {transform: rotateX(-180deg);}
  40% {transform: rotateY(-240deg);}
  50% {transform: rotateX(-360deg);}
  60%...

JavaScript

function dice(values) {
	
	var totalProbabilitySum = 0; 

	for(var i = 0; i < values.length; i++) {
		totalProbabilitySum += values[i][1];
	}

	// Ratio used to map the listed probabilites
	// in the values array to the Math.random() number space.
	var probabilityRatio = 1 / totalProbabilitySum;

	var probabilityMap = [];

	var probabilityIterator = 0.0;

	for(i = 0; i < values.length; i++) {
		values[i][1] *= probabilityRatio;

		var valueRange = [probabilityIterator, probabilityIterator + values[i][1]];
		probabilityIterator = valueRange[1];

		probabilityMap.push({ key: values[i][0], valueRange: valueRange });
	}

	var that = {};
	that.probabilityMap = probabilityMap;
	that.rollDice = function() {
		var random = Math.random();

		for(var i in this.probabilityMap) {
			if(random > this.probabilityMap[i].valueRange[0] && random < this.probabilityMap[i].valueRange[1]) {
				var ret = this.probabilityMap[i].key;

				if(typeof ret == 'object') {
					return Object.assign({}, ret);
				} else {
				  return ret;
				}
			}
		}
	}

	return that;
}

// Demo code
$(document).ready(function() {
  // [value, probability of value]
  var diceValues = [
    [1, 1],
    [2, 1],
    [3, 1],
    [4, 1],
    [5, 1],
    [6, 1]
  ];
  
  var weightedDiceValues = [
    [1, 1],
    [2, 1],
    [3, 1],
    [4, 1],
    [5, 10],
    [6, 10]
  ];
  
  var fairDice = dice(diceValues);
  var weightedDice = dice(weightedDiceValues);
  
  $("#diceRoll").on('click', function() {
    var diceValue = fairDice.rollDice();
    $("#diceRollResult").html(diceValue);
    $("#diceRoll").addClass("active");
    $(".dice").attr("class", "dice d-" + diceValue);
  });
  
});