JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<pre id=output></pre>
<div name="init" id="init"></div>

JavaScript

var _output = 0, $output = document.getElementById('output');

var probab = 6.25,
dmgincrease = 12,
critmods = 50,
loops = 1000,
minPerc = 0,
maxPerc = 2,
result = new Array(),
guessedAmount = 0,
highestAct = -1,
lowestAct = -1,
actualdmginc = 0;
    
for (i=0;i<=critmods;i++) result[i] = 0;
for (i=0;i<loops;i++) {
  var dmgactivations = 0;
  for (var critmod=0; critmod < critmods; critmod++) {
  	var roll = Math.floor(Math.random()*100+1); 
    if (roll <= probab) {
      dmgactivations++;
    }
  }
  if (dmgactivations > highestAct || highestAct == -1) highestAct = dmgactivations;
  if (dmgactivations < lowestAct || lowestAct == -1) lowestAct = dmgactivations;
  result[dmgactivations]++;
}

guessedAmount = Math.floor(critmods * probab / 100);
var guessedAmount2 = Math.floor(guessedAmount/10)*10;
var guessedDmgMult = 1;
for (var i=0;i<guessedAmount;i++) guessedDmgMult = guessedDmgMult*dmgincrease;
var cHeight = 200, cWidth = 600;
document.getElementById("init").innerHTML = "<canvas id='Canvas' style='position:absolute;left:100px;top:50;' width='" + cWidth + "' height='" + cHeight + "'></canvas>";
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="#fff";
ctx.fillRect(0,0,(4*guessedAmount*(maxPerc-minPerc)),cHeight);
var maxResult = 0;
for (i=0;i<result.length;i++) if (result[i] > maxResult) maxResult = result[i];

$output.textContent+= guessedAmount + " / " + guessedDmgMult + "\n\n";

for (i=0;i<critmods;i++) {
	var height = Math.floor(cHeight*(1-result[i]/maxResult)),
  span = Math.floor(cWidth/critmods);
  ctx.fillStyle="#000";
  ctx.fillRect(span*(i-minPerc*guessedAmount),0,span,height);
  var tenPercent = Math.floor(critmods/10);
  
  if ((i % tenPercent) == 0) {
  	ctx.fillStyle="#0b0";
  	ctx.fillRect(span*(i-minPerc*guessedAmount),0,span/2,cHeight);
  }
  if (i == Math.floor(guessedAmount)) {
  	ctx.fillStyle="#f00";
  	ctx.fillRect(span*(i-minPerc*guessedAmount),0,span/2,cHeight);
  }
}
for...