JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<pre id=painted></pre>
<div id="output">

</div>

CSS

body {
  background-color: #222;
}

table, td {
  border: 1px solid;
  padding: 4px;
}

JavaScript

var _painted = 0, $painted = document.getElementById('output').innerHTML;

var atv_min = 4,
atv_max = 16,
armor_min = 11,
armor_max = 24,
runs = 250000,
hits_normal = new Array(),
hits_disadv = new Array(),
comparison_shift = 2;

for (var i=0; i<100; i++) {
	hits_normal[i] = new Array();
  hits_disadv[i] = new Array();
}
for (var i=0; i<100; i++) {
	for (var j=0; j<100; j++) {
  	hits_normal[i][j] = 0;
    hits_disadv[i][j] = 0;
	}
}

for (var run=0; run<runs; run++) {
	var roll1 = Math.floor(Math.random()*20)+1;
  var roll2 = Math.floor(Math.random()*20)+1;
  var roll = (roll1 < roll2 ? roll1 : roll2);
	// Normal
  for (var bonus=atv_min; bonus <=atv_max; bonus++) {
		checkForHitNormal(roll1, bonus);
  	checkForHitDisadv(roll, bonus);
  }
}
var outputToHTML = "";
outputToHTML+="<table><tr><td>Normal</td><td>Shift + " + comparison_shift + "</td></tr>";
outputToHTML+="<td>+n</td>";
for (var armor = armor_min; armor<=armor_max; armor++) {
	outputToHTML+= "<td>" + armor + "</td>";
}
outputToHTML+="</tr>";

for (var bonus=atv_min; bonus <=atv_max; bonus++) {
	outputToHTML+= "<tr><td>+" + bonus + "</td>";
	for (var armor = armor_min; armor<=armor_max; armor++) {
  	var color = valToColorNormal(armor,bonus);
    outputToHTML+= "<td style='background-color:" + color + "'>" + cutToPerc(hits_normal[armor][bonus]/runs) + "</td>";
  }
  outputToHTML+="</tr>";
}
outputToHTML+="<tr><td>Disadv</td><td>No shift</td></tr>";
for (var bonus=atv_min; bonus <=atv_max; bonus++) {
	outputToHTML+= "<tr><td>+" + bonus + "</td>";
	for (var armor = armor_min; armor<=armor_max; armor++) {	
  	var color = valToColorDisadv(armor,bonus);
    outputToHTML+= "<td style='background-color:" + color + "'>" + cutToPerc(hits_disadv[armor][bonus]/runs) + "</td>";
  }
  outputToHTML+="</tr>";
}
outputToHTML+="</table>";

document.getElementById('output').innerHTML = outputToHTML;
function valToColorNormal(armor, bonus) {
	var normal = Math.floor(100*hits_normal[armor+comparison_shift][bonus]/runs);
 ...