Khant-Nyar · December 19, 2022 16:52 · Dec 19, 2022
diff --git a/index.pug b/index.pug
@@ -0,0 +1,20 @@
+.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
diff --git a/script.js b/script.js
@@ -0,0 +1,78 @@
+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
+}
diff --git a/slot-machine.markdown b/slot-machine.markdown
@@ -0,0 +1,9 @@
+slot machine 🎰
+--------------
+slot machine prototype
+
+full project on my github: [https://github.com/yevhverb/casino-slots](https://github.com/yevhverb/casino-slots)  (on russian) 
+
+A [Pen](https://codepen.io/yevhverb/pen/jjyNpG) by [yevhverb](https://codepen.io/yevhverb) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/jjyNpG).
diff --git a/style.sass b/style.sass
@@ -0,0 +1,124 @@
+$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)
No results found