JSFiddle - React, Tailwind, and code Playground

by jcubed111

CSS

body{ 
    background: #1f2227;
    color: #ddd;
    font-family: sans-serif;
}

canvas{
    background: #fff1;
}

JavaScript

const shuffle = arr => {
    for(let i = arr.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
};

function render(name, roller, num=250) {
	const barSize = 1;
    const spacing = 0;
    const height = 50;
    
    const el = document.createElement('div');
    el.innerHTML = name + "<br/>";
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    el.appendChild(canvas);
    document.body.appendChild(el);
    
    canvas.height = height;
    canvas.width = barSize*num + spacing*(num-1);
    
    ctx.fillStyle = '#0af';
    let rolls = Array(num).fill(0).map(i => roller.double());
    //rolls.sort((a, b) => a - b);
    rolls.forEach((v, i) => {
    	ctx.fillRect(
        	i*(barSize + spacing),
            height,
            barSize,
            -Math.round(height*v),
        );
    });
}

class RandBin{
	constructor(size=10) {
    	this.size = size;
        this.bins = [];
    }
    
    reset() {
    	this.bins = Array(this.size).fill(0).map((_, i) => i);
        shuffle(this.bins);
    }
    
    double() {
    	if(this.bins.length == 0) this.reset();
        return (this.bins.pop() + Math.random()) / this.size;
    }
}

render("Random", {double: _ => Math.random()});
render("Binned", new RandBin(5));
render("2 Roll", {double: _ => (Math.random() + Math.random()) / 2});
render("10 Roll", {double: _ => Array(10).fill(0).map(_ => Math.random()).reduce((a, b) => a + b) / 10});