Hugging Face's logo

Spaces:
namelessai
/
slot-machine
Running

App Files Community
namelessai commited on
Commit
d6c367d
·
verified ·
1 Parent(s): 40b30d4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +627 -19
index.html CHANGED
@@ -1,19 +1,627 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Lucky Spin Slot Machine</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes spin {
11
+ 0% { transform: translateY(0); }
12
+ 100% { transform: translateY(-1000px); }
13
+ }
14
+
15
+ @keyframes bounce {
16
+ 0%, 100% { transform: translateY(0); }
17
+ 50% { transform: translateY(-20px); }
18
+ }
19
+
20
+ @keyframes winPulse {
21
+ 0% { transform: scale(1); }
22
+ 50% { transform: scale(1.1); }
23
+ 100% { transform: scale(1); }
24
+ }
25
+
26
+ .slot-reel {
27
+ height: 100px;
28
+ overflow: hidden;
29
+ position: relative;
30
+ }
31
+
32
+ .slot-item {
33
+ height: 100px;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ font-size: 3rem;
38
+ }
39
+
40
+ .spinning {
41
+ animation: spin 0.1s linear infinite;
42
+ }
43
+
44
+ .win-animation {
45
+ animation: winPulse 0.5s ease infinite;
46
+ }
47
+
48
+ .jackpot {
49
+ animation: bounce 0.5s ease infinite, winPulse 0.5s ease infinite;
50
+ }
51
+
52
+ .machine-body {
53
+ background: linear-gradient(145deg, #d10000, #8a0000);
54
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
55
+ }
56
+
57
+ .lever {
58
+ transition: all 0.3s ease;
59
+ }
60
+
61
+ .lever.pulled {
62
+ transform: rotate(-30deg);
63
+ }
64
+
65
+ .coin {
66
+ transition: all 0.3s ease;
67
+ }
68
+
69
+ .coin.inserted {
70
+ transform: translateY(50px) scale(0);
71
+ }
72
+
73
+ .auto-spin-active {
74
+ background-color: #10b981 !important;
75
+ box-shadow: 0 0 10px #10b981;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
80
+ <div class="relative">
81
+ <!-- Slot Machine -->
82
+ <div class="machine-body rounded-2xl p-8 relative overflow-hidden">
83
+ <!-- Decorative elements -->
84
+ <div class="absolute top-0 left-0 w-full h-4 bg-yellow-400"></div>
85
+ <div class="absolute bottom-0 left-0 w-full h-4 bg-yellow-400"></div>
86
+ <div class="absolute top-4 left-4 right-4 bottom-4 border-4 border-yellow-400 rounded-xl opacity-20"></div>
87
+
88
+ <!-- Machine header -->
89
+ <div class="text-center mb-6">
90
+ <h1 class="text-yellow-400 text-4xl font-bold mb-2">LUCKY SPIN</h1>
91
+ <div class="bg-black bg-opacity-50 rounded-full py-2 px-6 inline-block">
92
+ <span class="text-white font-mono text-xl">SLOT MACHINE</span>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Reels container -->
97
+ <div class="flex justify-center items-center mb-8">
98
+ <!-- Lever -->
99
+ <div class="h-48 w-16 bg-gray-700 rounded-lg mr-4 flex flex-col items-center justify-end relative">
100
+ <div class="w-16 h-8 bg-gray-800 rounded-t-lg"></div>
101
+ <div id="lever" class="lever w-12 h-32 bg-red-700 rounded-t-lg absolute top-0 cursor-pointer z-10"></div>
102
+ </div>
103
+
104
+ <!-- Reels -->
105
+ <div class="flex bg-black bg-opacity-70 rounded-xl p-4">
106
+ <div class="slot-reel w-24 bg-white rounded-lg mx-2 relative overflow-hidden" id="reel1">
107
+ <div class="slot-items" id="items1">
108
+ <div class="slot-item text-red-500">🍒</div>
109
+ <div class="slot-item text-blue-500">🍋</div>
110
+ <div class="slot-item text-purple-500">🍇</div>
111
+ <div class="slot-item text-yellow-500">🍊</div>
112
+ <div class="slot-item text-green-500">🍏</div>
113
+ <div class="slot-item text-red-500">🍓</div>
114
+ <div class="slot-item text-blue-500">🔔</div>
115
+ <div class="slot-item text-yellow-500">💰</div>
116
+ <div class="slot-item text-red-500">🍒</div>
117
+ <div class="slot-item text-blue-500">🍋</div>
118
+ </div>
119
+ </div>
120
+ <div class="slot-reel w-24 bg-white rounded-lg mx-2 relative overflow-hidden" id="reel2">
121
+ <div class="slot-items" id="items2">
122
+ <div class="slot-item text-blue-500">🍋</div>
123
+ <div class="slot-item text-purple-500">🍇</div>
124
+ <div class="slot-item text-yellow-500">🍊</div>
125
+ <div class="slot-item text-green-500">🍏</div>
126
+ <div class="slot-item text-red-500">🍓</div>
127
+ <div class="slot-item text-blue-500">🔔</div>
128
+ <div class="slot-item text-yellow-500">💰</div>
129
+ <div class="slot-item text-red-500">🍒</div>
130
+ <div class="slot-item text-blue-500">🍋</div>
131
+ <div class="slot-item text-purple-500">🍇</div>
132
+ </div>
133
+ </div>
134
+ <div class="slot-reel w-24 bg-white rounded-lg mx-2 relative overflow-hidden" id="reel3">
135
+ <div class="slot-items" id="items3">
136
+ <div class="slot-item text-purple-500">🍇</div>
137
+ <div class="slot-item text-yellow-500">🍊</div>
138
+ <div class="slot-item text-green-500">🍏</div>
139
+ <div class="slot-item text-red-500">🍓</div>
140
+ <div class="slot-item text-blue-500">🔔</div>
141
+ <div class="slot-item text-yellow-500">💰</div>
142
+ <div class="slot-item text-red-500">🍒</div>
143
+ <div class="slot-item text-blue-500">🍋</div>
144
+ <div class="slot-item text-purple-500">🍇</div>
145
+ <div class="slot-item text-yellow-500">🍊</div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Coin slot and controls -->
152
+ <div class="flex justify-between items-center">
153
+ <div class="relative">
154
+ <div class="w-24 h-12 bg-gray-700 rounded-lg flex items-center justify-center">
155
+ <div class="w-16 h-2 bg-gray-800 rounded-full"></div>
156
+ </div>
157
+ <div id="coin" class="coin absolute top-0 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-yellow-400 rounded-full shadow-lg">
158
+ <div class="absolute inset-0 rounded-full bg-yellow-300 opacity-50"></div>
159
+ </div>
160
+ </div>
161
+
162
+ <div class="text-center">
163
+ <div class="bg-black bg-opacity-70 rounded-lg p-3 inline-block">
164
+ <div class="text-white mb-2">CREDIT: <span id="credit" class="text-yellow-400 font-bold">100</span></div>
165
+ <div class="text-white">WIN: <span id="win" class="text-green-400 font-bold">0</span></div>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="flex space-x-2">
170
+ <button id="auto-spin-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed">
171
+ <i class="fas fa-sync-alt mr-2"></i>AUTO
172
+ </button>
173
+ <button id="spin-btn" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-6 rounded-lg shadow-lg transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed">
174
+ SPIN
175
+ </button>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Auto-spin options -->
180
+ <div id="auto-spin-options" class="hidden mt-4 bg-black bg-opacity-50 rounded-lg p-3">
181
+ <div class="flex justify-between items-center mb-2">
182
+ <span class="text-white">Auto-spin count:</span>
183
+ <select id="auto-spin-count" class="bg-gray-700 text-white rounded px-2 py-1">
184
+ <option value="10">10</option>
185
+ <option value="25">25</option>
186
+ <option value="50">50</option>
187
+ <option value="100">100</option>
188
+ <option value="0">Until stop</option>
189
+ </select>
190
+ </div>
191
+ <div class="flex justify-between items-center">
192
+ <span class="text-white">Stop if credit below:</span>
193
+ <select id="auto-spin-limit" class="bg-gray-700 text-white rounded px-2 py-1">
194
+ <option value="10">10</option>
195
+ <option value="25">25</option>
196
+ <option value="50">50</option>
197
+ <option value="100">100</option>
198
+ <option value="0">Never stop</option>
199
+ </select>
200
+ </div>
201
+ <div class="flex justify-center mt-3 space-x-2">
202
+ <button id="start-auto-spin" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
203
+ Start
204
+ </button>
205
+ <button id="stop-auto-spin" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
206
+ Stop
207
+ </button>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Paytable -->
213
+ <div class="mt-8 bg-gray-800 bg-opacity-70 rounded-xl p-6 text-white max-w-md mx-auto">
214
+ <h2 class="text-2xl font-bold text-yellow-400 mb-4 text-center">PAYTABLE</h2>
215
+ <div class="grid grid-cols-2 gap-4">
216
+ <div class="flex items-center">
217
+ <span class="text-3xl mr-2">🍒🍒🍒</span>
218
+ <span class="font-bold">x50</span>
219
+ </div>
220
+ <div class="flex items-center">
221
+ <span class="text-3xl mr-2">💰💰💰</span>
222
+ <span class="font-bold">x100</span>
223
+ </div>
224
+ <div class="flex items-center">
225
+ <span class="text-3xl mr-2">🍇🍇🍇</span>
226
+ <span class="font-bold">x20</span>
227
+ </div>
228
+ <div class="flex items-center">
229
+ <span class="text-3xl mr-2">🔔🔔🔔</span>
230
+ <span class="font-bold">x30</span>
231
+ </div>
232
+ <div class="flex items-center">
233
+ <span class="text-3xl mr-2">🍊🍊🍊</span>
234
+ <span class="font-bold">x15</span>
235
+ </div>
236
+ <div class="flex items-center">
237
+ <span class="text-3xl mr-2">🍏🍏🍏</span>
238
+ <span class="font-bold">x10</span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Win message -->
244
+ <div id="win-message" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-70 z-50 hidden">
245
+ <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 p-8 rounded-xl text-center max-w-md">
246
+ <h2 class="text-4xl font-bold mb-4">YOU WIN!</h2>
247
+ <p id="win-amount" class="text-5xl font-bold mb-6">0</p>
248
+ <button id="close-win" class="bg-black text-white px-6 py-3 rounded-lg font-bold hover:bg-gray-800 transition">COLLECT</button>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Auto-spin status -->
253
+ <div id="auto-spin-status" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-70 text-white px-4 py-2 rounded-lg hidden">
254
+ <span id="auto-spin-countdown">Auto-spin: 10 remaining</span>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Audio elements -->
259
+ <audio id="spinSound" src="https://assets.mixkit.co/sfx/preview/mixkit-slot-machine-spin-1930.mp3" preload="auto"></audio>
260
+ <audio id="winSound" src="https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3" preload="auto"></audio>
261
+ <audio id="coinSound" src="https://assets.mixkit.co/sfx/preview/mixkit-coin-win-notification-919.mp3" preload="auto"></audio>
262
+ <audio id="leverSound" src="https://assets.mixkit.co/sfx/preview/mixkit-retro-arcade-game-lever-1083.mp3" preload="auto"></audio>
263
+ <audio id="jackpotSound" src="https://assets.mixkit.co/sfx/preview/mixkit-emergency-alert-alarm-1007.mp3" preload="auto"></audio>
264
+
265
+ <script>
266
+ document.addEventListener('DOMContentLoaded', function() {
267
+ // Game state
268
+ let credit = 100;
269
+ let winAmount = 0;
270
+ let isSpinning = false;
271
+ let isAutoSpinning = false;
272
+ let autoSpinCount = 0;
273
+ let autoSpinLimit = 0;
274
+ let remainingAutoSpins = 0;
275
+
276
+ // DOM elements
277
+ const spinBtn = document.getElementById('spin-btn');
278
+ const autoSpinBtn = document.getElementById('auto-spin-btn');
279
+ const autoSpinOptions = document.getElementById('auto-spin-options');
280
+ const startAutoSpinBtn = document.getElementById('start-auto-spin');
281
+ const stopAutoSpinBtn = document.getElementById('stop-auto-spin');
282
+ const autoSpinCountSelect = document.getElementById('auto-spin-count');
283
+ const autoSpinLimitSelect = document.getElementById('auto-spin-limit');
284
+ const autoSpinStatus = document.getElementById('auto-spin-status');
285
+ const autoSpinCountdown = document.getElementById('auto-spin-countdown');
286
+ const lever = document.getElementById('lever');
287
+ const coin = document.getElementById('coin');
288
+ const creditDisplay = document.getElementById('credit');
289
+ const winDisplay = document.getElementById('win');
290
+ const winMessage = document.getElementById('win-message');
291
+ const winAmountDisplay = document.getElementById('win-amount');
292
+ const closeWinBtn = document.getElementById('close-win');
293
+ const reels = [document.getElementById('reel1'), document.getElementById('reel2'), document.getElementById('reel3')];
294
+ const items = [document.getElementById('items1'), document.getElementById('items2'), document.getElementById('items3')];
295
+
296
+ // Audio elements
297
+ const spinSound = document.getElementById('spinSound');
298
+ const winSound = document.getElementById('winSound');
299
+ const coinSound = document.getElementById('coinSound');
300
+ const leverSound = document.getElementById('leverSound');
301
+ const jackpotSound = document.getElementById('jackpotSound');
302
+
303
+ // Paytable
304
+ const paytable = {
305
+ '🍒🍒🍒': 50,
306
+ '💰💰💰': 100,
307
+ '🍇🍇🍇': 20,
308
+ '🔔🔔🔔': 30,
309
+ '🍊🍊🍊': 15,
310
+ '🍏🍏🍏': 10
311
+ };
312
+
313
+ // Initialize the game
314
+ function init() {
315
+ // Set initial positions
316
+ items.forEach(item => {
317
+ item.style.transform = 'translateY(0)';
318
+ });
319
+
320
+ updateDisplay();
321
+
322
+ // Event listeners for auto-spin
323
+ autoSpinBtn.addEventListener('click', toggleAutoSpinOptions);
324
+ startAutoSpinBtn.addEventListener('click', startAutoSpin);
325
+ stopAutoSpinBtn.addEventListener('click', stopAutoSpin);
326
+ }
327
+
328
+ // Update display
329
+ function updateDisplay() {
330
+ creditDisplay.textContent = credit;
331
+ winDisplay.textContent = winAmount;
332
+
333
+ // Disable spin button if no credit
334
+ spinBtn.disabled = credit <= 0 || isSpinning;
335
+ autoSpinBtn.disabled = credit <= 0 || isSpinning;
336
+ }
337
+
338
+ // Insert coin animation
339
+ function insertCoin() {
340
+ if (isSpinning) return;
341
+
342
+ coin.classList.add('inserted');
343
+ coinSound.currentTime = 0;
344
+ coinSound.play();
345
+
346
+ setTimeout(() => {
347
+ coin.classList.remove('inserted');
348
+ coin.style.display = 'block';
349
+ }, 300);
350
+ }
351
+
352
+ // Pull lever animation
353
+ function pullLever() {
354
+ lever.classList.add('pulled');
355
+ leverSound.currentTime = 0;
356
+ leverSound.play();
357
+
358
+ setTimeout(() => {
359
+ lever.classList.remove('pulled');
360
+ }, 300);
361
+ }
362
+
363
+ // Toggle auto-spin options
364
+ function toggleAutoSpinOptions() {
365
+ if (autoSpinOptions.classList.contains('hidden')) {
366
+ autoSpinOptions.classList.remove('hidden');
367
+ } else {
368
+ autoSpinOptions.classList.add('hidden');
369
+ }
370
+ }
371
+
372
+ // Start auto-spin
373
+ function startAutoSpin() {
374
+ autoSpinCount = parseInt(autoSpinCountSelect.value);
375
+ autoSpinLimit = parseInt(autoSpinLimitSelect.value);
376
+
377
+ if (autoSpinCount === 0) {
378
+ remainingAutoSpins = Infinity;
379
+ } else {
380
+ remainingAutoSpins = autoSpinCount;
381
+ }
382
+
383
+ isAutoSpinning = true;
384
+ autoSpinBtn.classList.add('auto-spin-active');
385
+ autoSpinOptions.classList.add('hidden');
386
+ autoSpinStatus.classList.remove('hidden');
387
+ updateAutoSpinStatus();
388
+
389
+ // Start the first spin
390
+ if (!isSpinning) {
391
+ spin();
392
+ }
393
+ }
394
+
395
+ // Stop auto-spin
396
+ function stopAutoSpin() {
397
+ isAutoSpinning = false;
398
+ autoSpinBtn.classList.remove('auto-spin-active');
399
+ autoSpinOptions.classList.add('hidden');
400
+ autoSpinStatus.classList.add('hidden');
401
+ }
402
+
403
+ // Update auto-spin status display
404
+ function updateAutoSpinStatus() {
405
+ if (isAutoSpinning) {
406
+ if (remainingAutoSpins === Infinity) {
407
+ autoSpinCountdown.textContent = "Auto-spin: Unlimited";
408
+ } else {
409
+ autoSpinCountdown.textContent = `Auto-spin: ${remainingAutoSpins} remaining`;
410
+ }
411
+ }
412
+ }
413
+
414
+ // Spin the reels
415
+ function spin() {
416
+ if (isSpinning || credit <= 0) return;
417
+
418
+ // Check auto-spin stop conditions
419
+ if (isAutoSpinning) {
420
+ if (autoSpinLimit > 0 && credit < autoSpinLimit) {
421
+ stopAutoSpin();
422
+ return;
423
+ }
424
+
425
+ if (remainingAutoSpins !== Infinity) {
426
+ remainingAutoSpins--;
427
+ updateAutoSpinStatus();
428
+
429
+ if (remainingAutoSpins <= 0) {
430
+ stopAutoSpin();
431
+ }
432
+ }
433
+ }
434
+
435
+ // Deduct credit
436
+ credit--;
437
+ updateDisplay();
438
+
439
+ // Play sounds
440
+ spinSound.currentTime = 0;
441
+ spinSound.play();
442
+
443
+ // Pull lever animation
444
+ pullLever();
445
+ insertCoin();
446
+
447
+ isSpinning = true;
448
+ winAmount = 0;
449
+ updateDisplay();
450
+
451
+ // Start spinning animation
452
+ reels.forEach(reel => {
453
+ reel.querySelector('.slot-items').classList.add('spinning');
454
+ });
455
+
456
+ // Stop reels at different times
457
+ setTimeout(() => stopReel(0), 1000 + Math.random() * 500);
458
+ setTimeout(() => stopReel(1), 1500 + Math.random() * 500);
459
+ setTimeout(() => stopReel(2), 2000 + Math.random() * 500);
460
+ }
461
+
462
+ // Stop a single reel
463
+ function stopReel(reelIndex) {
464
+ const reel = reels[reelIndex];
465
+ const itemsContainer = items[reelIndex];
466
+
467
+ // Remove spinning class
468
+ itemsContainer.classList.remove('spinning');
469
+
470
+ // Calculate random position
471
+ const itemHeight = 100; // height of each item
472
+ const itemCount = itemsContainer.children.length;
473
+ const randomPosition = Math.floor(Math.random() * itemCount) * -itemHeight;
474
+
475
+ // Set final position
476
+ itemsContainer.style.transform = `translateY(${randomPosition}px)`;
477
+
478
+ // If this is the last reel, check for win
479
+ if (reelIndex === 2) {
480
+ setTimeout(checkWin, 500);
481
+ }
482
+ }
483
+
484
+ // Check for winning combination
485
+ function checkWin() {
486
+ isSpinning = false;
487
+
488
+ // Get the symbols from each reel
489
+ const symbols = [];
490
+
491
+ for (let i = 0; i < 3; i++) {
492
+ const itemsContainer = items[i];
493
+ const position = parseInt(itemsContainer.style.transform.split('(')[1].split('px)')[0]);
494
+ const itemIndex = Math.abs(position / 100) % itemsContainer.children.length;
495
+ symbols.push(itemsContainer.children[itemIndex].textContent);
496
+ }
497
+
498
+ // Check for matches
499
+ const combination = symbols.join('');
500
+
501
+ if (paytable[combination]) {
502
+ winAmount = paytable[combination];
503
+
504
+ // Special handling for jackpot
505
+ if (combination === '💰💰💰') {
506
+ jackpotWin();
507
+ } else {
508
+ regularWin();
509
+ }
510
+ } else {
511
+ updateDisplay();
512
+ // If auto-spinning and not showing win message, start next spin
513
+ if (isAutoSpinning && !winMessage.classList.contains('hidden') === false) {
514
+ setTimeout(() => {
515
+ if (credit > 0 && !isSpinning) {
516
+ spin();
517
+ }
518
+ }, 500);
519
+ }
520
+ }
521
+ }
522
+
523
+ // Regular win
524
+ function regularWin() {
525
+ credit += winAmount;
526
+ updateDisplay();
527
+
528
+ // Add win animation to reels
529
+ reels.forEach(reel => {
530
+ reel.classList.add('win-animation');
531
+ });
532
+
533
+ // Play win sound
534
+ winSound.currentTime = 0;
535
+ winSound.play();
536
+
537
+ // Show win message
538
+ winAmountDisplay.textContent = winAmount;
539
+ winMessage.classList.remove('hidden');
540
+
541
+ // Remove animation after delay
542
+ setTimeout(() => {
543
+ reels.forEach(reel => {
544
+ reel.classList.remove('win-animation');
545
+ });
546
+
547
+ // If auto-spinning, continue after win
548
+ if (isAutoSpinning) {
549
+ setTimeout(() => {
550
+ if (credit > 0 && !isSpinning) {
551
+ spin();
552
+ }
553
+ }, 1000);
554
+ }
555
+ }, 2000);
556
+ }
557
+
558
+ // Jackpot win
559
+ function jackpotWin() {
560
+ credit += winAmount;
561
+ updateDisplay();
562
+
563
+ // Add jackpot animation to reels
564
+ reels.forEach(reel => {
565
+ reel.classList.add('jackpot');
566
+ });
567
+
568
+ // Play jackpot sound
569
+ jackpotSound.currentTime = 0;
570
+ jackpotSound.play();
571
+
572
+ // Show win message
573
+ winAmountDisplay.textContent = winAmount;
574
+ winMessage.classList.remove('hidden');
575
+
576
+ // Remove animation after delay
577
+ setTimeout(() => {
578
+ reels.forEach(reel => {
579
+ reel.classList.remove('jackpot');
580
+ });
581
+
582
+ // If auto-spinning, continue after win
583
+ if (isAutoSpinning) {
584
+ setTimeout(() => {
585
+ if (credit > 0 && !isSpinning) {
586
+ spin();
587
+ }
588
+ }, 1000);
589
+ }
590
+ }, 3000);
591
+ }
592
+
593
+ // Event listeners
594
+ spinBtn.addEventListener('click', spin);
595
+
596
+ lever.addEventListener('mousedown', function() {
597
+ if (!isSpinning && credit > 0) {
598
+ pullLever();
599
+ spin();
600
+ }
601
+ });
602
+
603
+ coin.addEventListener('click', insertCoin);
604
+
605
+ closeWinBtn.addEventListener('click', function() {
606
+ winMessage.classList.add('hidden');
607
+ updateDisplay();
608
+
609
+ // If auto-spinning, continue after closing win message
610
+ if (isAutoSpinning && credit > 0 && !isSpinning) {
611
+ setTimeout(spin, 500);
612
+ }
613
+ });
614
+
615
+ // Keyboard support
616
+ document.addEventListener('keydown', function(e) {
617
+ if (e.code === 'Space' && !isSpinning && credit > 0) {
618
+ spin();
619
+ }
620
+ });
621
+
622
+ // Initialize the game
623
+ init();
624
+ });
625
+ </script>
626
+ </body>
627
+ </html>