app.js

var wins = 0;
var losses = 0;
var animation = 100;
var running = false;
var pause = false;
var targetLosses = 0;
var easterEgg = null;
var flipHistory = [];
var easterEggs = [
    { audio: new Audio("john-cena_5.mp3"), cssClass: "johnCena" },
    { audio: new Audio("boom_13.mp3"), cssClass: "boom" },
    { audio: new Audio("over-9000.mp3"), cssClass: "over9000" },
    { audio: new Audio("dmx.mp3"), cssClass: "dmx" },
    { audio: new Audio("powerOfGod.mp3"), cssClass: "powerOfGod" },
    { audio: new Audio("huge-bitch.mp3"), cssClass: "hugeBitch" },
    { audio: new Audio("youAreNotPrepared.mp3"), cssClass: "youAreNotPrepared" },
    { audio: new Audio("largerMan.mp3"), cssClass: "largerMan" },
    { audio: new Audio("goBeyond.mp3"), cssClass: "goBeyond" },
    { audio: new Audio("falconPunch.mp3"), cssClass: "falconPunch" },
];

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

function setHtml(id, html) {
    byId(id).innerHTML = html;
}

function clear() {
    setHtml('count', '<b>...</b>');
    setHtml('detailsList', '');
    wins = 0;
    losses = 0;
    running = false;
    flipHistory = [];
    setDetailsVisibility(false);
    byId('detailsToggle').hidden = true;
}

function randomInt(min, max) {
    if (!window.crypto || !window.crypto.getRandomValues) {
        throw new Error('crypto.getRandomValues is required for random flips.');
    }

    var range = max - min + 1;
    var maxUnbiased = Math.floor(0x100000000 / range) * range;
    var values = new Uint32Array(1);
    var value;

    do {
        window.crypto.getRandomValues(values);
        value = values[0];
    } while (value >= maxUnbiased);

    return min + (value % range);
}

function numberInput(id, fallback, min, max) {
    var input = byId(id);
    var value = parseInt(input.value, 10);
    if (isNaN(value)) {
        value = fallback;
    }
    if (typeof min === 'number') {
        value = Math.max(min, value);
    }
    if (typeof max === 'number') {
        value = Math.min(max, value);
    }
    input.value = value;
    return value;
}

function boundsFor(input) {
    return {
        fallback: parseInt(input.getAttribute('value'), 10) || 0,
        min: input.getAttribute('min') === null ? undefined : parseInt(input.getAttribute('min'), 10),
        max: input.getAttribute('max') === null ? undefined : parseInt(input.getAttribute('max'), 10),
    };
}

function stepNumberInput(id, delta) {
    var input = byId(id);
    var bounds = boundsFor(input);
    var current = numberInput(id, bounds.fallback, bounds.min, bounds.max);
    var next = current + delta;
    if (typeof bounds.min === 'number') {
        next = Math.max(bounds.min, next);
    }
    if (typeof bounds.max === 'number') {
        next = Math.min(bounds.max, next);
    }
    input.value = next;
}

function bigOkaunStat(id) {
    return BigInt(numberInput(id, 3, 0)) * (2n ** BigInt(wins));
}

function detailsToggleLabel(isVisible) {
    var count = flipHistory.length ? ' (' + flipHistory.length + ')' : '';
    return (isVisible ? 'Hide flip details' : 'Show flip details') + count;
}

function setDetailsVisibility(isVisible) {
    byId('detailsPanel').hidden = !isVisible;
    byId('detailsToggle').setAttribute('aria-expanded', isVisible ? 'true' : 'false');
    byId('detailsToggle').textContent = detailsToggleLabel(isVisible);
}

function addFlipDetail(result) {
    var isWin = result == 1;
    flipHistory.push(isWin ? 'Win' : 'Loss');
    byId('detailsToggle').hidden = false;
    byId('detailsToggle').textContent = detailsToggleLabel(!byId('detailsPanel').hidden);
    setHtml('detailsList', flipHistory.map(function(outcome, index) {
        var cssClass = outcome === 'Win' ? 'green' : 'red';
        return '<li><span>Flip ' + (index + 1) + '</span><b class="' + cssClass + '">' + outcome + '</b></li>';
    }).join(''));
}

function flip(times) {
    var thumbs = byId('hasThumb').checked ? numberInput('thumbs', 1, 1, 8) : 0;
    var flips = 2 ** thumbs;
    var coinStr = '';

    for (var i = 0; i < flips; i++) {
        coinStr += '<div class="coin"><div class="side-a"></div><div class="side-b"></div></div>';
    }

    setHtml('coins', coinStr);
    document.querySelectorAll('.coin').forEach(function(coin) {
        coin.classList.add(randomInt(0, 1) == 1 ? 'heads' : 'tails');
    });
    setTimeout(function() { showResult(times, thumbs); }, animation);
}

function showResult(times, thumbs) {
    if (pause) {
        pause = false;
        running = false;
        return;
    }

    var result = makeThumbResults(thumbs);

    if (result == 1) {
        wins = wins + 1;
    } else {
        losses = losses + 1;
    }
    addFlipDetail(result);

    setHtml('count', '<b class="green">' + wins + '..</b>');
    setHtml('losses', '<b class="red">' + losses + '..</b>');

    if (times < 0 && losses < targetLosses) {
        flip(times);
    } else if (times > 1) {
        flip(times - 1);
    } else {
        var p = bigOkaunStat('power');
        var t = bigOkaunStat('toughness');
        var okaunInPlay = byId('okaunInPlay').checked;
        var background = byId('background');

        if (p > 40n && okaunInPlay) {
            easterEgg = easterEggs[randomInt(0, easterEggs.length - 1)];
            easterEgg.audio.play();
            background.className = easterEgg.cssClass;

            easterEgg.audio.onended = function() {
                background.className = 'bg';
            };
        }

        var power = okaunInPlay ? ' (' + p + '/' + t + ' Okaun)' : '';
        setHtml('count', '<b class="green">' + wins + ' wins' + power + '</b>');
        setHtml('losses', '<b class="red">' + losses + ' losses </b>');
        running = false;
        pause = false;
    }
}

function makeThumbResults(thumbs) {
    if (thumbs > 0) {
        var a = makeThumbResults(thumbs - 1);
        var b = makeThumbResults(thumbs - 1);
        return b > a ? b : a;
    }

    return randomInt(0, 1);
}

function initflip(flips) {
    var background = byId('background');
    background.className = 'bg';
    if (easterEgg) {
        easterEgg.audio.pause();
        easterEgg.audio.currentTime = 0;
    }

    if (running) {
        pause = true;
        setTimeout(function() { initflip(flips); }, 100);
        return;
    }

    clear();
    running = true;
    pause = false;
    targetLosses = flips < 0 ? numberInput('lossTarget', 1, 1, 100) : 0;

    flip(flips);
}

document.querySelectorAll('.stepper').forEach(function(stepper) {
    stepper.addEventListener('click', function() {
        stepNumberInput(stepper.getAttribute('data-step-for'), parseInt(stepper.getAttribute('data-step'), 10));
    });
});

byId('detailsToggle').addEventListener('click', function() {
    setDetailsVisibility(byId('detailsPanel').hidden);
});

byId('flip-lose').addEventListener('click', function() {
    initflip(-1);
});

byId('flip').addEventListener('click', function() {
    initflip(1);
});

byId('flip2').addEventListener('click', function() {
    initflip(2);
});

byId('flipN').addEventListener('click', function() {
    var times = numberInput('flips', 3, 1, 1000);
    initflip(times);
});