Lottery spin

by maxell4o

HTML

<div class="button">
    <div class="list"></div>
</div>
<div class="count"></div>

SCSS

body {
    background: #222;
}

.button {
    width: 200px;
    height: 50px;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    &.blur .list-item {
      filter: blur(2px);
    }
}

.count {
    display: inline-block;
    padding: 0 10px;
    color: #fff;
}

.list {
    position: relative;
    display: block;
    flex-direction: column;
    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.175);
    transform-style: preserve-3d;
    height: inherit;
}

.list-item {
    position: absolute;
    height: inherit;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #eee;
    background: #333;
    font-weight: bold;
    transition: filter .25s ease;
}

JavaScript 1.7

let names = Array(50).fill().map((v, i) => i + 1);

$('.list').html(names.map(name => `
	<div class="list-item">${name}</div>
`).join(''));

$('.list .list-item').each((i, item) => {
    let rotateX = (360 / names.length) * i;
    let translateZ = Math.round(($(item).outerHeight() / 2) / Math.tan(Math.PI / names.length))
    $(item).css('transform', `rotateX(${rotateX}deg) translateZ(${translateZ}px)`);
});

let winner = 13;
let rotateX = 0;
let tempDuration = 0;
let duration = 9000;
let interval = null;
let intervalStep = 70;

let checkWinner = (index) => {
    return names.find(v => v == winner) == names[index];
}

let rotate = () => {
    let winIndex = Math.round(rotateX / (360 / names.length) / names.length % 1 * names.length);
    if (tempDuration >= duration && checkWinner(winIndex)) {
        setTimeout(() => {
            $('.button').removeClass('blur');
        }, 300);
        clearInterval(interval);
    }else if(tempDuration > duration*2) {
    	clearInterval(interval);
      console.error('Lottery: Something went wrong!');
    } else {
        rotateX += 360 / names.length;
        tempDuration += intervalStep;
        $('.list').css('transform', `rotateX(-${rotateX}deg)`);
    }
}

$('.button').click(() => {
    $('.button').addClass('blur');
    rotateX = 0;
    tempDuration = 0;
    clearInterval(interval);
    interval = setInterval(rotate, intervalStep);
});