Trivia Crack Spinner

by trunglt11

HTML

<div id="spinner">
    <div id="spinner-wheel"></div>
    <div id="spinner-button"></div>
</div>

CSS

body {
    background-color: rgb(43, 62, 80);
}
#spinner {
    position:relative;
    height: 300px;
    width: 300px;
}
#spinner-button {
    cursor:pointer;
    z-index:100;
    width:20%;
    height:20%;
    position: absolute;
    left: 40%;
    top: 40%;
    background-image:url('http://quizpop.herokuapp.com/images/spinner.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
#spinner-wheel {
    height:inherit;
    width:inherit;
    z-index:0;
    position:absolute;
    background-image:url('http://quizpop.herokuapp.com/images/wheel.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

JavaScript

app = {
    components: {}
};

app.components.Spinner = function (wheel, button, ops) {
    //set options and defaults
    ops = ops ? ops : {};
    var onStop = ops.onStop ? ops.onStop : function () {};
    var destination = ops.destination;
    var slices = ops.slices;

    var clicker = new app.components.Wheel(button);
    var spinner = new app.components.Wheel(wheel, {
        timeout: 2000,
        onStop: function(degrees){
            clicker.rotate(0);
        },
        onRotate: function (degrees) {
            clicker.rotate((degrees % 360 % (slices * 2)) + (360 - slices));
        }
    });

    this.reset = function () {
        spinner.rotate(0);
    };

    this.setDestination = function (degrees) {
        stopAt = degrees;
    };

    button.addEventListener("click", function () {
        if (!spinner.isAccelerating() && !spinner.isStopping()) {
            spinner.start();

            window.setTimeout(function () {
                spinner.stop(destination);
            }, 4000);
        }
    });

    this.clicker = clicker;
    this.spinner = spinner;
};

app.components.Wheel = function (target, ops) {
    //set options and defaults
    ops = ops ? ops : {};
    var timeout = ops.timeout;
    var acceleration = ops.accelerationDelay ? ops.accelerationDelay : 100;
    var onRotateListener = ops.onRotate ? ops.onRotate : function () {};
    var onStopListener = ops.onStop ? ops.onStop : function () {};
    var increment = ops.increment ? ops.increment : 1;
    var delay = ops.delay ? ops.delay : 10;

    var state = {
        accelerating: false,
        stopping: false,
        destination: null,
        degrees: 0
    };

    var intervals = {
        accelerater: null,
        decelerater: null,
        spinner: []
    };

    var rotate = function (deg) {
        target.style.webkitTransform = 'rotate(' + deg + 'deg)';
        target.style.mozTransform = 'rotate(' + deg + 'deg)';
        target.style.msTransform = 'rotate(' + deg +...