getDare Die

// ==UserScript==
// @name        getDare Die
// @namespace   getdare
// @include     http://www.getdare.com/*
// @version     1
// @grant       none
// ==/UserScript==

if (window !== window.top) {
    return;
}

var die = makeDie();
var dieBox = make('div', {id: 'dieBox'}, [die]);
dieBox.addEventListener('click', die.roll, false);
document.querySelector('body').appendChild(make('div', [
    makeStyle(
        '#dieBox', {
            position: 'fixed',
            right: 0,
            bottom: -180,
            width: 100,
            height: 200,
            backgroundColor: 'rgba(255, 255, 2555, 0.5)',
            borderLeft: '2px solid black',
            borderTop: '2px solid black',
            borderRadius: '10px 0 0',
            transition: 'bottom 1s'
        },
        '#dieBox:hover', {
            bottom: -100,
            transition: 'bottom .5s cubic-bezier(0.3, 2, 0.3, 0.7)'
        },
        '#dieBox .die', {
            position: 'absolute',
            left: 25,
            top: 25,
            width: 50,
            height: 50,
            backgroundColor: 'rgb(255, 255, 255)',
            border: '1px solid black',
            borderRadius: 5,
            pointerEvents: 'none'
        },
        '#dieBox .die .pip', {
            position: 'absolute',
            width: 7,
            height: 7,
            left: 21,
            top: 21,
            backgroundColor: 'rgb(0, 0, 0)',
            borderRadius: 7,
            pointerEvents: 'none',
            display: 'none'
        },
        '#dieBox .die .pip.pipLeft', {
            left: 7
        },
        '#dieBox .die .pip.pipRight', {
            left: 35
        },
        '#dieBox .die .pip.pipTop', {
            top: 7
        },
        '#dieBox .die .pip.pipBottom', {
            top: 35
        }
    ),
    dieBox
]));

function makeDie() {
    var isRolling, rollUntil, value = Math.floor(1 + 6 * Math.random());
    var die, pips = [];
    for (var i = 0; i < 6; ++i) {
        pips[i] = make('div', {className: 'pip'});
    }
    die = make('div', {className: 'die'}, pips);
    updatePips();
    die.roll = startRolling;
    return die;
    function startRolling() {
        rollUntil = Date.now() + 500 + Math.random() * 3000;
        if (!isRolling) {
            keepRolling();
        }
    }
    function keepRolling() {
        isRolling = (Date.now() < rollUntil);
        if (isRolling) {
            rollOnce();
            setTimeout(keepRolling, 100);
        }
    }
    function rollOnce() {
        value = nextValue(value);
        updatePips();
        rotateDie();
    }
    function nextValue(value) {
        return 3.5 + Math.pow(-1, Math.round(Math.random())) * ((Math.round(Math.abs(value - 3.5) + Math.random() + 0.5) % 3) + 0.5);
    }
    function updatePips() {
        var pos = [];
        for (var x = 0; x < 3; ++x) {
            [[], [x], [0, 2], [0, 1, 2]][(x & 1) ? (value & 1) : (value >> 1)].forEach(function(y) {
                pos.push({x: x, y: y});
            });
        }
        pips.forEach(function(pip, i) {
            if (i < value) {
                make(pip, {
                    display: 'block',
                    className: [
                        'pip',
                        ['pipLeft',, 'pipRight'][pos[i].x],
                        ['pipTop',, 'pipBottom'][pos[i].y]
                    ]
                });
            } else {
                make(pip, {
                    display: 'none'
                });
            }
        });
    }
    function rotateDie() {
        make(die, {
            transform: 'rotate(' + Math.floor(Math.random() * 360) + 'deg)'
        });
    }
}

function makeStyle() {
    var styles = make('style');
    styles.type = 'text/css';
    styles.setAttribute('scoped', 'scoped');
    var rules = [];
    for (var i = 0; i < arguments.length; i += 2) {
        var selector = arguments[i],
            rule = arguments[i + 1];
        rules.push([
            hyphenify(selector) + ' {',
                Object.keys(arguments[i + 1]).map(function(key) {
                    var name = hyphenify(key);
                    var value = rule[key];
                    if (typeof value === 'number') {
                        value = value + 'px';
                    }
                    return '    ' + name + ': ' + value + ';';
                }).join('\n'),
            '}'
        ].join('\n'));
    }
    styles.textContent = rules.join('\n');
    return styles;
}

function make(tag, style, children) {
    var node;
    if (typeof tag === 'string') {
        node = document.createElement(tag);
    } else {
        node = tag;
        tag = node.tagName;
    }
    if (style instanceof Array) {
        children = style;
        style = null;
    }
    if (style) {
        Object.keys(style).forEach(function(key) {
            if (key === 'id') {
                this.id = hyphenify(style.id);
            } else if (key === 'className') {
                if (style.className instanceof Array) {
                    this.className = hyphenify(style.className.filter(Boolean).join(' '));
                } else {
                    this.className = hyphenify(style.className);
                }
            } else {
                this.style[key] = style[key];
            }
        }, node);
    }
    if (children) {
        children.forEach(function(child) {
            node.appendChild(child);
        });
    }
    return node;
}

function hyphenify(name) {
    return name.replace(/[A-Z]/g, function(a) {
        return '-' + a.toLowerCase();
    });
}