Battlesiedler sim of doom

by Marc Chehab

HTML

<div id="attackers" class="box">
  <p># of attackers: 
  <input type="number" id="nrattackers" value="2" size="2"></p>
</div>

<div id="defenders" class="box">
  <p># of defenders: 
  <input type="number" id="nrdefenders" value="2" size="2"></p>
</div>

<div id="turns" class="box">
  <p># of turns: 
  <input type="number" id="nrturns" value="1000" size="6"></p>
</div>
<div class="box">
<button id="run">
Run Forest, run!
</button>
</div>

<div id="output" class="box">
<p>Attacker wins: <span id="winsattacker"></span> (<span id="winsattackerp"></span>)</p>
<p>Defender wins: <span id="winsdefender"></span> (<span id="winsdefenderp"></span>)</p>
</div>

CSS

body {
  background: #20262E;
  padding: 10px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor:
}

input {
  width: 50px;
}

.box {
  border-radius: 4px;
  padding: 20px;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  display: inline-block;
}
#defenders {
  background: blue;
}
#attackers {
  background: red;
}

#turns {
  background: green;
}

#output {
  background: grey;
}

JavaScript

// handle click and add class
$("#run").on("click", function() {
  var nrattackers = $("#nrattackers").val();
  var nrdefenders = $("#nrdefenders").val();
  var nrturns = $("#nrturns").val();

  var winsdefender = 0;
  var winsattacker = 0;

  for (curturn = 1; curturn <= nrturns; curturn++) {
    var curnrattackers = nrattackers;
    var curnrdefenders = nrdefenders;

    while (curnrattackers * curnrdefenders !== 0) {
      // roll dice attacker
      if (curnrattackers == 0) break;
      if (curnrattackers == 1) nrofdice = 1;
      if (curnrattackers == 2) nrofdice = 2;
      if (curnrattackers >= 3) nrofdice = 3;
      var attackdice = Array();
      for (i = 1; i <= nrofdice; i++) {
        attackdice.push(rollDice());
      }
      attackdice.sort(function(a, b){return b - a});
      
      // roll dice defender
      if (curnrdefenders == 0) break;
      if (curnrdefenders == 1) nrofdice = 1;
      if (curnrdefenders >= 2) nrofdice = 2;
      var defencedice = Array();
      for (i = 1; i <= nrofdice; i++) {
        defencedice.push(rollDice());
      }
      defencedice.sort(function(a, b){return b - a});
      
      //compare
      //console.log("attacker: " + JSON.stringify(attackdice));
      //console.log("defender: " + JSON.stringify(defencedice));
      if (attackdice[0]>defencedice[0]) {
      	//console.log("1. defence-1");
      	curnrdefenders--;
      } else {
      	curnrattackers--;
      	//console.log("1. attack-1");
      }
      if (attackdice[1] && defencedice[1]) {
        if (attackdice[1]>defencedice[1]) {
      		//console.log("2. defence-1");
          curnrdefenders--;
        } else {
        	//console.log("2. attack-1");
          curnrattackers--;
        }
      }
      //console.log("a-d: " + curnrattackers + ":" + curnrdefenders);
    }
    if (curnrattackers == 0) {
    	//console.log("DEFENDER WINS");
    	winsdefender++;
    }
    if (curnrdefenders == 0) {
    	//console.log("ATTACKER WINS");
    	winsattacker++;
    }
...