let spinCount = 0;
let [xx, yy] = [1024, 9999]; // [min, max]
let win = ["$60", "$10", "$80", "$30", "$50", "$20", "$70", "$40"];
document.querySelector('.spin').addEventListener('click', spin);
function spin() {
if (spinCount > 3) {
alert("No more spins.");
return false;
}
let deg = Math.floor(Math.random() * (xx - yy)) + yy;
let deg_off = (deg % 360) - 21;
let widx = Math.floor((deg_off / 45));
widx = (0 <= widx) ? widx : 7;
document.getElementById('box').style.transform = `rotate(${deg}deg)`;
let mainbox = document.getElementById('mainbox');
mainbox.classList.remove('animate');
setTimeout(function() {
mainbox.classList.add('animate');
document.getElementById("winnings").textContent
= `Congratulations, you've won ${win[widx]}`;
}, 5000); //5000 = 5 second
spinCount++;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
}
body {
font-family: Open Sans;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
background: rgb(60, 60, 242);
background: linear-gradient(90deg, rgba(60, 60, 242, 1) 0%, rgba(98, 245, 230, 1) 52%, rgba(60, 60, 242, 1) 100%);
background-size: cover;
}
.mainbox {
position: relative;
width: 500px;
height: 500px;
text-align: center;
}
.mainbox:after {
position: absolute;
content: '';
width: 32px;
height: 32px;
background: url('../img/arrow-wheel.png') no-repeat;
background-size: 32px;
right: -30px;
top: 50%;
transform: translateY(-50%);
}
.box {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
border: 10px solid #fff;
overflow: hidden;
transition: all ease 5s;
}
span {
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
}
.span1 {
clip-path: polygon(0 92%, 100% 50%, 0 8%);
background-color: #fffb00;
top: 120px;
left: 0;
}
.span2 {
clip-path: polygon(100% 92%, 0 50%, 100% 8%);
background-color: #ff4fa1;
top: 120px;
right: 0;
}
.span3 {
clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
background-color: #ffaa00;
bottom: 0;
left: 120px;
}
.span4 {
clip-path: polygon(50% 100%, 92% 0, 8% 0);
background-color: #22ff00;
top: 0;
left: 120px;
}
.box1 .span3 b {
transform: translate(-50%, -50%) rotate(-270deg);
}
.box1 .span1 b,
.box2 .span1 b {
transform: translate(-50%, -50%) rotate(185deg);
}
.box2 .span3 b {
transform: translate(-50%, -50%) rotate(90deg);
}
.box1 .span4 b,
.box2 .span4 b {
transform: translate(-50%, -50%) rotate(-85deg);
}
.box2 {
width: 100%;
height: 100%;
transform: rotate(-135deg);
}
span b {
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
border-radius: 50%;
border: 4px solid #fff;
background-color: #001aff;
color: #fff;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 22px;
cursor: pointer;
}
.spin:active {
width: 70px;
height: 70px;
font-size: 20px;
}
.mainbox.animate:after {
animation: animateArrow 0.7s ease infinite;
}
@keyframes animateArrow {
50% {
right: -40px;
}
}
#winnings {
padding: 1em;
font-family: sans-serif;
color: white;
}
.arrow-down {
position: absolute;
right: 50%;
z-index: 9;
}
.arrow-down::before {
position: absolute;
left: -1.35em;
content: "";
border-top: 1em solid red;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
}
<div id="mainbox" class="mainbox">
<div class="arrow-down"></div>
<div id="box" class="box">
<div class="box1">
<span class="span1"><b>$10</b></span>
<span class="span2"><b>$20</b></span>
<span class="span3"><b>$30</b></span>
<span class="span4"><b>$40</b></span>
</div>
<div class="box2">
<span class="span1"><b>$50</b></span>
<span class="span2"><b>$60</b></span>
<span class="span3"><b>$70</b></span>
<span class="span4"><b>$80</b></span>
</div>
</div>
<button class="spin">SPIN</button>
<div id="winnings">Click "SPIN" to initiate.</div>
</div>