JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

<div class="container">
    <div class="row">
      <div class="col-md-7 col-md-offset-4">
        <h1 class='align-center'>Ship, Captain & Crew</h1>
		<div class='row' id="game_container" >
			<div class="col-xs-4 col-xs-offset-4" id="device_owner_player_row">
<h2 id='firstPlayerScore'></h2>
			</div>
			
			<div class="clear"></div>
			
			<div id="dice_row" class='row'>
				<div id="dice_center" class='col-xs-4 col-xs-offset-4'>
					<div class="dice game_item" id="dice1"></div>
					<div class="dice game_item" id="dice2"></div>
					<div class="dice game_item" id="dice3"></div>
					<div class="dice game_item" id="dice4"></div>
					<div class="dice game_item" id="dice5"></div>
<button class='roll-button game-item btn btn-primary btn-lg' id='roll_button'>Roll Dice</button>
				</div>
			</div>
		
      </div>
    </div>  
  </div>
<!--			<div class="clear"></div>
<div class='col-xs-4 col-xs-offset-5 cargoButton'>
<button id='reset' class='game-item btn btn-primary btn-lg'>Reset</button>
</div>-->

CSS

/* General Document Styles */
body{
	font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
  background-color: green;
}

.clear{
	clear: both;
}

.container{
	position:absolute;
	top:0;
	left:0;
	background-color: green;
}

#game_container {
	height: 100%;

}

/* Device Owner (current player) Info Styles */
.player_info{
	float: left;
	height: 100%;
}

#device_owner_player_row{
	width: 100%;
	height: 15%;
  padding-top: 25px;
}

#device_owner_player_row h2 {
  color: black;
  font-weight: bold;
  font-size: 2.5em;
}

#device_owner_player_name{
	width: 70%;
}

#device_owner_score{
	width: 30%;

}

.player_info #device_owner_score h1{
	float: right;
}
.player_info h1{
	padding: 0;
	margin: 0;
}

/* Dice Styles */
#dice_row{
	height: 15%;
}

#dice_center{
	width: 100%;
	margin-left: 30%;
	margin-top: 5%;
}

.game_item{
	position: relative;
	float: left;
	margin: 5px;
}

.game-item {
  font-size: 1.5em;
}

.dice{
	width: 5%;
	border-radius: 15px;
	background-image: url("http://www.hloe.co.uk/dice/dice1.png");
	background-repeat: no-repeat;
	background-size: cover;
}

/* Button Styles -- some styles come from dice styles */
#roll_button{
	background-color: #337ab7;
	border-color: #2e6da4;
	border-radius: 10px;
	color: #fff;
	text-align: center;
  margin-left: 50px;
}


.cargoButton {
  margin-top: 50px;
}

.roll-button {
  height: 85px;
  width: 150px;
}

.glowing {
  border: 5px solid blue;
}

/*.jumbotron {
  text-align: center;
  background-color: rgba(250. 250, 250, 0.8);
  width: 400px;
}*/

h1 {
  text-align: center;
  color: black;
}

.dice {
  height: 75px;
  width: 75px;
}

JavaScript

var dice1 = new dice(1);
var dice2 = new dice(2);
var dice3 = new dice(3);
var dice4 = new dice(4);
var dice5 = new dice(5);
var diceArray = [dice1, dice2, dice3, dice4, dice5];
var rollButton = document.getElementById('roll_button');
var cargo = 0;
var numOfRolls = 0;
var cargoButton = document.getElementById('cargo');
var canHaveCargo = false;
var playerScore = document.getElementById('firstPlayerScore');



//dice object
function dice(id){
    this.id = id;
    this.currentRoll = 1;
    this.previousRoll = 1;
    this.isSelected = false;
    this.diceImageUrl = "http://www.hloe.co.uk/dice/dice1.png";
    this.roll = function(){
        this.previousRoll = this.currentRoll;
        this.currentRoll = getRandomRoll(1, 6);
    }
}

//returns an array of all dice that are not currently selected so they can be rolled.
function getRollableDiceList(){
    var tempDiceList = [];
    for(var i = 0; i < diceArray.length; i++){
        if(!diceArray[i].isSelected){
            tempDiceList.push(diceArray[i]);
        }
    }
    return tempDiceList;
}

// gets a random number between min and max (including min and max)
function getRandomRoll(min,max){
    return Math.floor(Math.random() * (max-min + 1) + min);
}

// calls the roll function on each dice
function rollDice(rollableDiceList){
    for(var i = 0; i < rollableDiceList.length; i++){
        rollableDiceList[i].roll();
    }
}

// updates each dice with the new url for the image that corresponds to what their current roll is
function updateDiceImageUrl(){
    for(var i = 0; i < diceArray.length; i++){
        var currentDice = diceArray[i];

        currentDice.diceImageUrl = "http://www.hloe.co.uk/dice/dice" + currentDice.currentRoll + ".png";

        //update div image with img that cooresponds to their current roll
        updateDiceDivImage(currentDice);
    }
}

//Displays the image that matches the roll on each dice
function updateDiceDivImage(currentDice) {
   ...