JSFiddle - React, Tailwind, and code Playground

by aholdorf

HTML

<div id="div0" class="left outerDice">
<div id="die0" class="dice one">

</div>
<input type="button" id="hold0" value="Hold" disabled>

</div>
<div id="div1" class="left outerDice">
<div id="die1" class="dice two">

</div>
<input type="button" id="hold1" value="Hold" disabled>

</div>
<div id="div2" class="left outerDice">
<div id="die2" class="dice three">

</div>
<input type="button" id="hold2" value="Hold" disabled>

</div>
<div id="div3" class="left outerDice">
<div id="die3" class="dice four">

</div>
<input type="button" id="hold3" value="Hold" disabled>

</div>
<div id="div4" class="left outerDice">
<div id="die4" class="dice five">

</div>
<input type="button" id="hold4" value="Hold" disabled>
</div>
<input type="button" id="rollButton" value="First Roll">

CSS

.dice{
  width: 70px;
  height: 70px;
  border: 1px solid black;
  border-radius: 5px;
  text-align: center;
  margin: 10px;
}

.outerDice input{
  margin-left: 25px;
}

.left{
  float: left;
}
.right{
  float: right;
}
.clear{
  clear: both;
}

#rollButton{
  font-size: 200%;
  padding: 10px;
  margin: 15px;
}

.held{
  background-color: gray;
}

.one{
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4c/Dice.png);
  background-position: -6px -10px;
  background-size: 250px 175px;
}

.two{
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4c/Dice.png);
  background-position: -90px -10px;
  background-size: 250px 175px;
}

.three{
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4c/Dice.png);
  background-position: -174px -10px;
  background-size: 250px 175px;
}

.four{
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4c/Dice.png);
  background-position: -6px -95px;
  background-size: 250px 175px;
}

.five{
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4c/Dice.png);
  background-position: -90px -95px;
  background-size: 250px 175px;
}

.six{
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4c/Dice.png);
  background-position: -174px -95px;
  background-size: 250px 175px;
}

JavaScript

var dice = [1,1,1,1,1];
var held = [false,false,false,false,false];
var roll = 0;
$(".outerDice input").on("click",function(){
	var id=$(this).attr("id").substring(4);
  held[id] = !held[id];
  if(held[id]){
  	$(this).parent().addClass("held");
  }else{
  	$(this).parent().removeClass("held");
  }
});

$(".outerDice div").on("click",function(){
	if(roll != 0){
    var id=$(this).attr("id").substring(3);
    held[id] = !held[id];
    if(held[id]){
      $(this).parent().addClass("held");
    }else{
      $(this).parent().removeClass("held");
    }
  }
});

$("#rollButton").on("click",function(){
	for(var i=0;i<5;i++){
  	if(!held[i]){
      dice[i] = Math.ceil(Math.random()*6);
      $("#die" + i).removeClass("one");
      $("#die" + i).removeClass("two");
      $("#die" + i).removeClass("three");
      $("#die" + i).removeClass("four");
      $("#die" + i).removeClass("five");
      $("#die" + i).removeClass("six");
      if(dice[i] == 1){
      	$("#die" + i).addClass("one");
      }else if(dice[i] == 2){
      	$("#die" + i).addClass("two");
      }else if(dice[i] == 3){
      	$("#die" + i).addClass("three");
      }else if(dice[i] == 4){
      	$("#die" + i).addClass("four");
      }else if(dice[i] == 5){
      	$("#die" + i).addClass("five");
      }else if(dice[i] == 6){
      	$("#die" + i).addClass("six");
      }
    }
  }
  roll++;
  if(roll == 1){
  	$(this).val("Second Roll");
  }else if(roll == 2){
  	$(this).val("Third Roll");
  }
  if(roll == 3){
  	roll = 0;
  	$(this).val("New First Roll");
    for(var i=0;i<5;i++){
      held[i] = false;
    }
    $(".outerDice").removeClass("held");
    $(this).prop('disabled',true);
    setTimeout(
    	function(){
      	$("#rollButton").prop('disabled',false);
      },5000);
  }
  if(roll == 0){
  	$(".outerDice input").prop('disabled', true);
  }else{
  	$(".outerDice input").prop('disabled', false);
  }
  
});