Zombie Dice

by Ryan Allison

HTML

<div class="divOuter">
  <div class="divMenu">
    <span>How many players?</span><br />
    <input type="text" id="txtPlayerCount"><br /><br />
    <a class="btn act-start">Start Game</a>
  </div>
  <div class="divGame" style="display:none;width:100%">
    <div class="divButtons">
      <a id="lnkDrawDice" class="btn act-draw">Draw Dice</a>
      <a id="lnkRollDice" class="btn act-roll">Roll</a>
      <a id="lnkEndTurn" class="btn act-end" style="width:180px;">Bank Points / End Turn</a>
      <a class="btn act-rnd">Random Number</a>
    </div>
    <br />
    <div id="divTable" style="float:left;width:100%; margin-top:20px;">
      <table id="tblMain" style="width:95%; float:left;height:250px">
        <tr>
          <td style="vertical-align:top;">            
            <span>Current Brains</span><br>
            <span id="spnBrains"></span>
          </td>
          <td style="text-align:center;">
            Current Player: <span id="spnCurPlayer">1</span>
            <table id="tblDice" style="margin:auto;">
              <tr>
                <td id="dice1" class="dice"></td>
                <td id="dice2" class="dice"></td>
                <td id="dice3" class="dice"></td>
              </tr>
            </table>
          </td>
          <td style="vertical-align:top;">
            <span>Current Shotguns</span><br>
            <span id="spnGuns"></span>
          </td>
          <td id="tdScores" style="vertical-align:top;">            
          </td>
        </tr>
      </table>
      <span id="spnOutput"></span>
    </div>
  </div>
</div>

CSS

.outer{
  height:100%;
  width:100%;
}

.btn {
  display: block;
  height: 45px;
  line-height: 45px;
  width: 134px;
  background-color: #000;
  color: red;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  float: left;
  margin: 0 10px 0 0;
}

.divButtons, input, .act-start {
  float:left;
}

.divButtons {
  width: 100%;
}

td {
  border: 1px black solid;
}

#tblMain td {
  width:25%
}

.dice {
  width:40px!important;
  height: 40px;
}

.brain {
  background: url("https://www.svgrepo.com/show/40999/brain.svg");
  background-repeat: no-repeat;
}

.feet {
  background: url("https://www.svgrepo.com/show/35735/feet-footprint.svg");
  background-repeat: no-repeat;
}

.bang {
  background: url("https://www.svgrepo.com/show/112412/shotgun.svg");
  background-repeat: no-repeat;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

JavaScript

//["DiceType", DiceHasBeenDrawn]
var allDice = [];
var playerCount = 0;
var playerScores = [0];
var usedDice = 0;
var curHand = [];
var keepers = [];
var curBrains = [];
var curShotguns = [];
var curPlayer = 1;

$(document).ready(function() {
  resetAllDice();
});

$(".act-start").click(function() {
  startGame();
});

function startGame() {
  var cnt = parseInt($("#txtPlayerCount").val());
  if (Number.isInteger(cnt)) {
    playerCount = cnt;
    $(".divMenu").hide();
    $(".divGame").show();
    createTable();
  }
}

function createTable() {
  for (i = 1; i < playerCount + 1; i++) {
    var sb = "Player " + i + ": <span id='spnScore" + i + "'>0</span><br>";
    $("#tdScores").html($("#tdScores").html() + sb);
  }
}

$(".act-draw").click(function() {
  //debugger;
  curHand = [];
  $(".dice").attr("class", "dice");
  for (i = 0; i < keepers.length; i++) {
    curHand.push(keepers[i]);
  }
  while (curHand.length < 3) {
    var newDie = getRandDice();
    if (!newDie) {
    	//Reset all brains to false
    	for (i=0; i < curBrains.length; i++) {
      	
      }
      //newDie = getRandDice();
    }
    curHand.push(newDie);
  }
  for (i = 1; i <= 3; i++) {
    var die = allDice[curHand[i - 1]];
    var diceDisp = $("#dice" + i);

    if (die[0] == "G") {
      diceDisp.addClass("green brain");
    } else if (die[0] == "Y") {
      diceDisp.addClass("yellow feet");
    } else if (die[0] == "R") {
      diceDisp.addClass("red bang");
    }
  }
});

$(".act-roll").click(function() {
  $(".dice").attr("class", "dice");
  for (i = 1; i <= 3; i++) {
    var die = allDice[curHand[i - 1]];
    var diceDisp = $("#dice" + i);
    var color = "";
    if (die[0] == "G") {
    	color = "green";
    } else if (die[0] == "Y") {
      color = "yellow";
    } else if (die[0] == "R") {
      color = "red";
    }
    diceDisp.addClass(color);

    var dieValue = getRandomInt(0, 6);
    if (die[2][dieValue] == "B") {
      diceDisp.addClass("brain");
      curBrains.push(curHand[i...