slot machine 🎰

index.pug

.title
	- const slots = ['⚬', 'S', 'L', 'O', 'T', 'S', '⚬']
	- for (let sl = 0; sl < slots.length; sl++)
		span= slots[sl]
		
.slots
	.combs
		- for(let c = 1; c <= 3; c++)
			.comb= 'COMB ' + c
	.lines
	.rings
		- for(let r = 1; r <= 3; r++)
			.ring
				- for(let s = 0; s < 8; s++) 
					.slot(id=s)= s
	.results
		- for(let rs = 1; rs <= 3; rs++)
			.result

button.spin SPIN

script.js

const rings = document.querySelectorAll('.ring'),
		spin  = document.querySelector('.spin'),
		degs  = [0, 45, 90, 135, 180, 225, 270, 315, 360]

window.onload = () => {
	rings.forEach((el, i) => {
		let obj = {},
		 	 arr = obj.arr = []
	
		el.querySelectorAll('.slot').forEach((el) => {
			let id = el.getAttribute('id')
			obj.arr.push(id)
		})
	
		obj.next = arr[arr.length-2]
		obj.curr = arr[arr.length-1]
		obj.prev = arr[0]
		obj.deg = 0
	
		window[`ring${i}`] = obj
	})
	
	update()
}

spin.addEventListener('click', rotate)

function rotate() {
	rings.forEach((el, i) => {
		let obj  = window[`ring${i}`],
			 deg  = obj.deg,
			 curr = obj.curr,
			 arr  = obj.arr,
			 res  = deg - degs[rnd(0, degs.length)] * rnd(1, 30)
		
		el.style.transform = `rotateX(${res}deg)`
		obj.deg = res
		
		let cnt = Math.abs(res - deg) / (360/arr.length),
			 tmp = arr.slice(arr.indexOf(curr)),
			 next, 
			 prev
		
		for (let i = 0; i <= cnt; i++) {
			tmp.push.apply(tmp, arr)
			curr = tmp[i]
			next = tmp[i - 1]
			prev = tmp[i + 1]
		}
		
		obj.curr = curr
		
		if (cnt > 0) {
			obj.next = next
			obj.prev = prev
		}
		
		window[`ring${i}`] = obj			 			 
	})
	
	setTimeout(() => {
		update()
	}, 2825)
}

function update() {
	const results = document.querySelector('.results')
	
	results.innerHTML = ''
	results.insertAdjacentHTML('beforeend', 
			`<div class="result">${ring0.next} ${ring1.curr} ${ring2.prev}</div>
		 	 <div class="result">${ring0.curr} ${ring1.curr} ${ring2.curr}</div>
			 <div class="result">${ring0.prev} ${ring1.curr} ${ring2.next}</div>`)
}

function rnd(min, max) {
  return Math.floor(Math.random() * (max - min)) + min
}

slot-machine.markdown

slot machine 🎰

slot machine prototype

full project on my github: https://github.com/yevhverb/casino-slots (on russian)

A Pen by yevhverb on CodePen.

License.

style.sass

$bg: #1F1F1F
$co: #F1A850
$vm: 10vmin

*
	margin: 0
	padding: 0
	box-sizing: border-box
	font-family: 'Rozha One', serif
	font-size: $vm/2.5
	color: $co * .9
	user-select: none

body, .slots, .rings, .combs, .results, .ring, .slot, .spin
	display: flex
	justify-content: center
	align-items: center
	transform-style: preserve-3d
	
body, .combs, .results
	flex-direction: column

body
	justify-content: space-around
	width: 100%
	height: 100vh
	background: $bg

.slots
	position: relative
	width: $vm * 12
	height: $vm * 5

	> *
		height: 100%

.combs, .results
	width: 20%
	justify-content: space-between

	> *
		font-size: $vm/2.8
		color: $co * .5

.rings
	width: 50%
	perspective: $vm * 25

.ring
	position: relative
	width: calc(100% / 3)
	height: 100%
	transition: 3s ease-in-out
	
.slot
	position: absolute
	width: 100%
	height: 45%
	font-size: $vm*1.5
	background: rgba($bg, .935)
	
	@for $i from 1 through 8
		&:nth-child(#{$i})
			transform: rotateX(45deg * $i) translateZ($vm * 2.7)

.lines
	position: absolute
	top: 50%
	left: 50%
	transform: translate(-50%, -50%) translateZ($vm*5)
	width: 50%
	height: 95%
	background-image: linear-gradient(transparent 49.75%, rgba($co, .15) 49.75%, rgba($co, .15) 50.25%, transparent 50.25%), linear-gradient(to bottom left, transparent 49.75%, rgba($co, .15) 49.75%, rgba($co, .15) 50.25%, transparent 50.25%), linear-gradient(to bottom right, transparent 49.75%, rgba($co, .15) 49.75%, rgba($co, .15) 50.25%, transparent 50.25%)

.title
	width: $vm*12
	position: relative
	margin-bottom: $vm*1.5

	span
		display: block
		position: absolute
		left: 48.5%
		transform-origin: 40% 400%
		font-size: $vm/1.5
		color: $co * .5
		
		@for $i from 1 through 7
			&:nth-child(#{$i})
				transform: rotate(-36deg + (9deg * $i))
		
.spin
	width: $vm*1.4
	height: $vm*1.4
	transform: rotateX(45deg)
	border: $vm/30 solid
		radius: 50%
	font-size: $vm/2.2
	color: $co * .75
	background: transparent
	outline: none
	cursor: pointer
	transition: .3s

	&:hover
		color: $co * .9

	&:active
		color: $co * 1.2

.result
	transform: scale(0)
	opacity: 1
	animation: scale-on .375s ease-in-out forwards

	@for $i from 1 through 3
		&:nth-child(#{$i})
			animation-delay: .1s * $i

@keyframes scale-on
	50%
		transform: scale(1.5)
	100%
		transform: scale(1)

saved