<!DOCTYPE html>
<html lang="es-ES">
	<head>
		<Title>XMAS 2024 Slot Machine by s4ur0n</Title>
		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Pacifico">
		<link rel="icon" href="favicon.ico" type="image/x-icon">
		<style>
			html, body {
			    height:100%;
			    font-family: 'Pacifico', serif;
			    font-size: 170%;
			    color: #9ACD32;
			} 

			body {
			    background-image: url('logo.webp');
			    background-size: auto 100%;
			    height: 100%;
			    background-position: center;
			    background-repeat: no-repeat;
			    background-size: cover;
			}
		</style>
		
		<script>
			function DoSpin() {
				//All three slot’s images should be randomly selected and displayed on the page.
				//If all three images match, alert the user of a win.
				
				var cookie = parseInt(document.getElementsByName('cookie')[0].value);
				var bet = parseInt(document.getElementsByName('bet')[0].value);
				var slotImages = ["santa.png", "grinch.png", "s4ur0n.png", "tree.png"];
				
				if (cookie > 0 && bet > 0) {
					document.getElementsByName('cookie')[0].value = cookie - bet;
					
					var slotImage1 = Math.floor((Math.random() * 4));
					var slotImage2 = Math.floor((Math.random() * 4));
					var slotImage3 = Math.floor((Math.random() * 4));
				
					document.getElementById('SlotImage1').src = slotImages[slotImage1];
					document.getElementById('SlotImage2').src = slotImages[slotImage2];
					document.getElementById('SlotImage3').src = slotImages[slotImage3];
			
					CheckWinner(slotImage1,slotImage2,slotImage3,cookie,bet);
				}
				else {
					//out of cookies
					alert('You lose. Enter more cookies to keep playing.');
				}	
			}
			
			function CheckWinner(x,y,z,cookie,bet) {
				if (x == y && x == z) {
					document.getElementsByName('cookie')[0].value = 2 * cookie + (2 * bet);
					var cookie = parseInt(document.getElementsByName('cookie')[0].value);
					let win = new Audio('winner.wav');
					win.play();
					if (cookie > 0) {
						if (cookie < 1337) {
							alert('YOU WIN! But you don\'t have enough cookies... Try or bet again');
						} else {
							alert('Congrats!!! Try the next level of the CTF at https://xmas2024.s4ur0n.com/L3v3l-2_XMAS2024-c4rd.png');
						}
					}
				}
			}
			
			function checkBet() {
				var bet = parseInt(document.getElementsByName('bet')[0].value);
				var cookies = parseInt(document.getElementsByName('cookie')[0].value);
				
				//check if the user entered a valid numerical bet
				if (isNaN(bet)){
					//bet is not a number
					alert('Please enter bet as a numerical value.');
				}
				else {
					if (bet <= 0){
						// bet too low
						alert('Your bet is too low.');
					}
					else{
						if (bet > cookies) {
							//bet too large
							alert('You do not have enough cookies to place a bet this large.');
							location.reload(true);
						}		
					}
				}
			}
			
			function checkCookie() {
				var cookie = parseInt(document.getElementsByName('cookie')[0].value)
				//check if the user entered a valid numerical value for cookie
				if (isNaN(cookie)){
					//cookie is not a number
					alert('Please enter your cookies as a numerical value.');
				}
				else {
					if (cookie <= 0){
						// cookie entered was too low
						alert('Please add a valid amount of cookies to play the game.');
					}
					if (cookie > 2) {
						alert('OMG! You are so greedy ;) It\'s Christmas and it\'s time to share your cookies');
					}
				}
			}

		</script>	
	</head>
	
	<body>
		<table align="center">
			<tr><td>&nbsp;</td></tr>
			<tr> 
				<td style="background: black; opacity: 0.85;"><img id="SlotImage1" src="ball.png" alt="Slot Image #1" style="Width:200px; Height:200px; animation: 2s animation;"></td>
				<td style="background: black; opacity: 0.85;"><img id="SlotImage2" src="ball.png" alt="Slot Image #2" style="Width:200px; Height:200px;"></td>
				<td style="background: black; opacity: 0.85;"><img id="SlotImage3" src="ball.png" alt="Slot Image #3" style="Width:200px; Height:200px;"></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			<tr>
			<tr>
				<td></td>
				<td><input type="button" onclick="DoSpin()" value="Click to play"></td>
				<td></td>
			</tr>
			<tr>
				<td>Cookies:</td>
				<td><input type="text" onchange="checkCookie()" style="width: 100px" name="cookie" value="1"></td>
				<td></td>
			</tr>
			<tr>
				<td>Bet:</td>
				<td><input type="text" onchange="checkBet()" style="width: 100px" name="bet" value="1"></td>
				<td></td>
			</tr>
		</table>
		<center><h4>Get three images that match! You will need at least 1337 cookies</h4>
			<audio controls autoplay loop>
    			<source src="jingle.mp3" type="audio/mp3">
			</audio>
		</center>
	</body>
</html>