A Pen by Victor Toschi on CodePen.
Created
December 19, 2022 16:54
-
-
Save Khant-Nyar/2fe2f531be2f778aa74fe700b415c897 to your computer and use it in GitHub Desktop.
Slot Machine CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="app"> | |
<div class="doors"> | |
<div class="door"> | |
<div class="boxes"> | |
<!-- <div class="box">?</div> --> | |
</div> | |
</div> | |
<div class="door"> | |
<div class="boxes"> | |
<!-- <div class="box">?</div> --> | |
</div> | |
</div> | |
<div class="door"> | |
<div class="boxes"> | |
<!-- <div class="box">?</div> --> | |
</div> | |
</div> | |
</div> | |
<div class="buttons"> | |
<button id="spinner">Play</button> | |
<button id="reseter">Reset</button> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
const items = [ | |
'🍭', | |
'❌', | |
'⛄️', | |
'🦄', | |
'🍌', | |
'💩', | |
'👻', | |
'😻', | |
'💵', | |
'🤡', | |
'🦖', | |
'🍎', | |
'😂', | |
'🖕', | |
]; | |
const doors = document.querySelectorAll('.door'); | |
document.querySelector('#spinner').addEventListener('click', spin); | |
document.querySelector('#reseter').addEventListener('click', init); | |
function init(firstInit = true, groups = 1, duration = 1) { | |
for (const door of doors) { | |
if (firstInit) { | |
door.dataset.spinned = '0'; | |
} else if (door.dataset.spinned === '1') { | |
return; | |
} | |
const boxes = door.querySelector('.boxes'); | |
const boxesClone = boxes.cloneNode(false); | |
const pool = ['❓']; | |
if (!firstInit) { | |
const arr = []; | |
for (let n = 0; n < (groups > 0 ? groups : 1); n++) { | |
arr.push(...items); | |
} | |
pool.push(...shuffle(arr)); | |
boxesClone.addEventListener( | |
'transitionstart', | |
function () { | |
door.dataset.spinned = '1'; | |
this.querySelectorAll('.box').forEach((box) => { | |
box.style.filter = 'blur(1px)'; | |
}); | |
}, | |
{ once: true } | |
); | |
boxesClone.addEventListener( | |
'transitionend', | |
function () { | |
this.querySelectorAll('.box').forEach((box, index) => { | |
box.style.filter = 'blur(0)'; | |
if (index > 0) this.removeChild(box); | |
}); | |
}, | |
{ once: true } | |
); | |
} | |
for (let i = pool.length - 1; i >= 0; i--) { | |
const box = document.createElement('div'); | |
box.classList.add('box'); | |
box.style.width = door.clientWidth + 'px'; | |
box.style.height = door.clientHeight + 'px'; | |
box.textContent = pool[i]; | |
boxesClone.appendChild(box); | |
} | |
boxesClone.style.transitionDuration = `${duration > 0 ? duration : 1}s`; | |
boxesClone.style.transform = `translateY(-${door.clientHeight * (pool.length - 1)}px)`; | |
door.replaceChild(boxesClone, boxes); | |
} | |
} | |
async function spin() { | |
init(false, 1, 2); | |
for (const door of doors) { | |
const boxes = door.querySelector('.boxes'); | |
const duration = parseInt(boxes.style.transitionDuration); | |
boxes.style.transform = 'translateY(0)'; | |
await new Promise((resolve) => setTimeout(resolve, duration * 100)); | |
} | |
} | |
function shuffle([...arr]) { | |
let m = arr.length; | |
while (m) { | |
const i = Math.floor(Math.random() * m--); | |
[arr[m], arr[i]] = [arr[i], arr[m]]; | |
} | |
return arr; | |
} | |
init(); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
width: 100vw; | |
height: 100vh; | |
margin: 0; | |
padding: 0; | |
} | |
#app { | |
width: 100%; | |
height: 100%; | |
background: #1a2b45; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
} | |
.doors { | |
display: flex; | |
} | |
.door { | |
background: #fafafa; | |
width: 100px; | |
height: 110px; | |
overflow: hidden; | |
border-radius: 5px; | |
margin: 5px; | |
} | |
.boxes { | |
/* transform: translateY(0); */ | |
transition: transform 1s ease-in-out; | |
} | |
.box { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: 3rem; | |
} | |
.buttons { | |
margin: 1rem 0 2rem 0; | |
} | |
button { | |
cursor: pointer; | |
font-size: 1.2rem; | |
margin: 0 0.2rem; | |
border: none; | |
border-radius: 5px; | |
padding: 10px 15px; | |
} | |
.info { | |
position: fixed; | |
bottom: 0; | |
width: 100%; | |
text-align: center; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment