Tiny Dice Dungeon - Dice rolls

by gdarussian

HTML

<section>
    <h1>
        Tiny Dice Dungeon - Dice rolls
    </h1>
</section>

<section>
    <h3>Dice:</h3>
    <input id="numNormal16" type="text" value="1" />x Normal 1-6<br />
    <input id="numNormal26" type="text" value="0" />x Normal 2-6<br />
    <input id="numMulti12" type="text" value="0" />x Multiplier 1-2<br />
    <br />
    <input id="btnGo" type="button" value="Go" /><br />
</section>

<section>
    <table id="resultsTable"></table>
</section>
<br />
<div id="divRolls"></div>
<div id="status"></div>

CSS

body {
  margin: 1em;
  font-size: 85%;
  font-family: arial, helvetica, sans-serif;
}
.slider {
  width: 50;
  height: 20;
}
input[type="text"] {
    width: 10px;
    text-align: right;
}
.bad {
  color: red;
}
.good {
  color: green;
}
p {
  font-size: 1em;
  margin: 0 0 .8em 0;
}

#chkMoveMenu {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
.rightAligned {
  position: absolute;
  right: 55px;
}
.rightAligned2 {
  position: absolute;
  right: 30px;
}
html>body {
  font-size: 12px;
}
h1 {
  font-weight: bold;
  font-size: big;
}
th {
  text-align: left;
  padding: 1px 5px 0 0;
  border-bottom: 1px solid gray;
  padding: 3px;
}
td {
    text-align: center;
}

section {
  font-size: 1em;
  border: 3px solid white;
  margin: 10px 0 0 0;
  padding: 5px;
  vertical-align: middle;
  box-shadow: 0px 0px 20px 3px #d3d3d3;
  border-radius:4px;
  background-color:#ffffff;
}

.best {
    background-color: lightcyan;
    font-weight: bold;
}

JavaScript

function $(id) { return document.getElementById(id); }

var NUM_ITERATIONS = 10000;
function DisplayResults(sums)
{
    var table = $("resultsTable");
    
    var bestStop = -1;
    var bestVal = 0;
    for (var i = 0; i < sums.length; i++) 
    {
        if (sums[i] > bestVal) 
        {
            bestVal = sums[i];
            bestStop = i;
        }
    }
    
    for (var i = 0; i < sums.length; i++)
    {
        var row = table.insertRow(-1);
        cell = row.insertCell(-1);
        cell.innerHTML = "" + (i + 1);
        if (i == bestStop) cell.className = "best";
        cell = row.insertCell(-1);
        cell.innerHTML = "" + sums[i];
        if (i == bestStop) cell.className = "best";
        cell = row.insertCell(-1);
        cell.innerHTML = "" + Math.round(sums[i]*10 / NUM_ITERATIONS)/10;
        if (i == bestStop) cell.className = "best";
    }
}

function AddRollSet(cboRolls, rollSet) 
{
    var text = "";
    var maxRolls = 20;
    for (var i = 0; i < maxRolls && i < rollSet.length; i++)
    {
        text += rollSet[i];
        if (i < rollSet.length - 1)
            text += ", ";
    }
    if (rollSet.length > maxRolls)
        text += "...";
    var option = document.createElement("option");
    option.innerHTML = text;
    cboRolls.appendChild(option);
}

function SetupDropdown(rollSets) 
{
    var cboRolls = $("cboRolls");
    rollSets.sort();
    for (var i = 0; i < rollSets.length; i++)
    {
        var set = rollSets[i];
        AddRollSet(cboRolls, set);
    }
}

function ClearPrevResults()
{
    var table = $("resultsTable");
    table.innerHTML = "";
    var row = table.insertRow(-1);
    row.style = "border-bottom: 1px solid gray";
    var cell = document.createElement("th");
    row.appendChild(cell);
    cell.innerHTML = "Stop At";
    cell = cell = document.createElement("th");
    row.appendChild(cell);
    cell.innerHTML = "Sum";
    cell = cell = document.createElement("th");
    row.appendChild(cell);
    cell.innerHTML =...