JSFiddle - React, Tailwind, and code Playground

HTML

<pre id="output"></pre>
<script>
function log()
{
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML += args.join(" ") + "\n";
}

function orbs2heroes(orbs) {
	var heroes = Math.floor(orbs / 20) * 5;
	var left = orbs - (heroes / 5) * 20;
	if(left >= 5) {
		heroes++;left-=5;
		heroes+=Math.floor(left/4);
	}
	log('Orbs',orbs, 'could get', heroes);
return heroes;
}

function summon(heroes) {
	var ratio = [0.06, 0.36, 0.58];
	var r4share = (0.36) / (0.36+0.58);

	var counter = 0;
	var got = {r5f:0, r5:0, r4:0, r3:0};

	for(var i=0;i<heroes;i++) {
		var roll = Math.random();

		if(roll <= ratio[0]) {
			if(roll < ratio[0]/2) {
				got.r5f++;
			} else {
				got.r5++;
			}
			// reset counter
			counter=0;
			ratio = [0.06, 0.36, 0.58];
			
		} else {
			if(roll > (ratio[0]+ratio[1])) {
				got.r3++;
			} else {
				got.r4++;
			}
			counter += 1;
			if(counter % 5 == 0) {
				ratio[0] += 0.005;
				var left = 1.0 - ratio[0];
				ratio[1] = left * r4share;
				ratio[2] = 1.0 - ratio[0] - ratio[1];
				// log('After',i,'increase to:', ratio[0], ratio[1], ratio[2]);
			}
		}
	}
	return got;
}

function report(got, heroes) {
	log('================');
	log('in',heroes,'heroes');
	log('5-Star:',got.r5f+got.r5, Math.floor((got.r5f+got.r5)/heroes*10000)/100,'%');
	log('  R5F:', got.r5f);
	log('  R5:', got.r5);
	log('R4:', got.r4,Math.floor(got.r4/heroes*10000)/100,'%');
	log('R3:', got.r3,Math.floor(got.r3/heroes*10000)/100,'%');
}

function entry(orbs) {
	var heroes = orbs2heroes(orbs);
	var got = summon(heroes);
	report(got, heroes);
}

entry(7000); // Orbs
// report({r5f:2,r5:3,r4:10,r3:20}, 5*7);
</script>