Spaces:

awacke1
/

Slot-Machine-Animal-Safari

Running

App Files Files Community

awacke1 commited on Apr 18, 2023

Commit

2a82fa9

1 Parent(s): 9400106

Update index.html

Browse files

Files changed (1) hide show

index.html +122 -18

index.html CHANGED Viewed

@@ -1,19 +1,123 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animal Emoji Slot Machine</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+        }
+        #slot-machine {
+            display: inline-block;
+            border: 3px solid #ccc;
+            padding: 20px;
+            border-radius: 10px;
+        }
+        .line {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .slot {
+            padding: 0 10px;
+            font-size: 2rem;
+        }
+        button {
+            font-size: 1rem;
+            padding: 10px 20px;
+            margin-top: 20px;
+        }
+        #balance {
+            font-size: 1.25rem;
+            margin-top: 10px;
+        }
+        #history {
+            font-size: 1rem;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Animal Emoji Slot Machine</h1>
+    <div id="slot-machine">
+        <div class="line">
+            <div class="slot" id="slot1-1">🐶</div>
+            <div class="slot" id="slot1-2">🐶</div>
+            <div class="slot" id="slot1-3">🐶</div>
+            <div class="slot" id="slot1-4">🐶</div>
+            <div class="slot" id="slot1-5">🐶</div>
+        </div>
+        <div class="line">
+            <div class="slot" id="slot2-1">🐶</div>
+            <div class="slot" id="slot2-2">🐶</div>
+            <div class="slot" id="slot2-3">🐶</div>
+            <div class="slot" id="slot2-4">🐶</div>
+            <div class="slot" id="slot2-5">🐶</div>
+        </div>
+        <div class="line">
+            <div class="slot" id="slot3-1">🐶</div>
+            <div class="slot" id="slot3-2">🐶</div>
+            <div class="slot" id="slot3-3">🐶</div>
+            <div class="slot" id="slot3-4">🐶</div>
+            <div class="slot" id="slot3-5">🐶</div>
+        </div>
+        <div class="line">
+            <div class="slot" id="slot4-1">🐶</div>
+            <div class="slot" id="slot4-2">🐶</div>
+            <div class="slot" id="slot4-3">🐶</div>
+            <div class="slot" id="slot4-4">🐶</div>
+            <div class="slot" id="slot4-5">🐶</div>
+        </div>
+    </div>
+<button id="spin-btn">Spin</button>
+<div id="balance">Balance: $<span id="balance-amount">10.00</span></div>
+<div id="history"></div>
+<script>
+    function countMatches(line) {
+const counts = {};
+for (const emoji of line) {
+counts[emoji] = (counts[emoji] || 0) + 1;
+}
+return Math.max(...Object.values(counts));
+}
+document.getElementById('spin-btn').addEventListener('click', function () {
+var emojis = ['🐶', '🐱', '🐰', '🦁', '🐯', '🐸', '🐵', '🦊', '🦄', '🦓'];
+var balanceAmount = document.getElementById('balance-amount');
+var history = document.getElementById('history');
+var winAmount = 0;
+// Deduct 50 cents
+var newBalance = parseFloat(balanceAmount.textContent) - 0.50;
+if (newBalance < 0) {
+alert("Insufficient balance.");
+return;
+}
+balanceAmount.textContent = newBalance.toFixed(2);
+for (let row = 1; row <= 4; row++) {
+const line = [];
+for (let col = 1; col <= 5; col++) {
+const emoji = emojis[Math.floor(Math.random() * emojis.length)];
+line.push(emoji);
+document.getElementById(slot${row}-${col}).textContent = emoji;
+}
+const matches = countMatches(line);
+if (matches === 3) {
+winAmount += .25;
+} else if (matches === 4) {
+winAmount += 5;
+} else if (matches === 5) {
+winAmount += 20;
+}
+}
+if (winAmount > 0) {
+newBalance = parseFloat(balanceAmount.textContent) + winAmount;
+balanceAmount.textContent = newBalance.toFixed(2);
+history.innerHTML += '<p>You won $' + winAmount + '! 🎉</p>';
+}
+});
+</script>
+</body>
+</html>