commit

assets/js/main.js

@@ -41,7 +41,6 @@ const spin = document.querySelector('.spin')
 spin.addEventListener('click', function () {
 	if (saldo < 1000) {
 		alert('Saldo tidak cukup untuk bermain!')
-		return
 	}
 
 	saldo -= 1000
@@ -54,7 +53,7 @@ spin.addEventListener('click', function () {
 	setTimeout(function () {
 		if (firstIndex === secondIndex && secondIndex === thirdIndex) {
 			alert('Selamat, kamu menang!')
-			saldo += 15000
+			saldo += 10000
 			updateSaldo()
 		}
 	}, 300)
@@ -65,7 +64,6 @@ const autoSpin = document.querySelector('.auto')
 autoSpin.addEventListener('click', function () {
 	if (saldo < 1000) {
 		alert('Saldo tidak cukup untuk bermain!')
-		return
 	}
 
 	const interval = setInterval(function () {
@@ -89,7 +87,7 @@ autoSpin.addEventListener('click', function () {
 				secondIndex === thirdIndex
 			) {
 				alert('Selamat, kamu menang!')
-				saldo += 15000
+				saldo += 10000
 				updateSaldo()
 			}
 		}, 300)
@@ -101,3 +99,47 @@ autoSpin.addEventListener('click', function () {
 		clearInterval(interval)
 	})
 })
+
+const tenSpin = document.querySelector('.tenSpin')
+
+tenSpin.addEventListener('click', function () {
+	let spinCount = 0
+
+	const interval = setInterval(function () {
+		if (saldo < 1000) {
+			clearInterval(interval)
+			alert('Saldo tidak cukup untuk bermain!')
+			return
+		}
+
+		saldo -= 1000
+		updateSaldo()
+
+		const firstIndex = spinImage(firstImage)
+		const secondIndex = spinImage(secondImage)
+		const thirdIndex = spinImage(thirdImage)
+
+		setTimeout(function () {
+			if (
+				saldo >= 0 &&
+				firstIndex === secondIndex &&
+				secondIndex === thirdIndex
+			) {
+				alert('Selamat, kamu menang!')
+				saldo += 10000
+				updateSaldo()
+			}
+		}, 300)
+
+		spinCount++
+		if (spinCount >= 10) {
+			clearInterval(interval)
+		}
+	}, 1200)
+
+	const stopSpin = document.querySelector('.stop')
+
+	stopSpin.addEventListener('click', function () {
+		clearInterval(interval)
+	})
+})

index.html

@@ -22,10 +22,10 @@ <h3>Saldo anda sekarang sebesar : <span class="data-saldo">0</span></h3>
 			<div class="spin-container">
 				<p class="btn auto">Auto Spin</p>
 				<p class="btn stop">Stop Spin</p>
-				<p class="btn">Spin 10x</p>
-				<p class="btn">Spin 20x</p>
-				<p class="btn">Spin 50x</p>
-				<p class="btn">Spin 100x</p>
+				<p class="btn tenSpin">Spin 10x</p>
+				<p class="btn twentySpin">Spin 20x</p>
+				<p class="btn fiftySpin">Spin 50x</p>
+				<p class="btn hundredSpin">Spin 100x</p>
 			</div>
 		</section>