App Script 👇

from flask import Flask, request, session, render_template_string, flash

import random

app = Flask(__name__)

app.secret_key = 'your_secret_key_here'  # Change this to a random string

# Slot machine symbols (emojis)

SYMBOLS = ['🍒', '🍋', '🍊', '7️⃣', '🔔']  # Cherry, Lemon, Orange, Seven, Bell

def get_payout(symbols, bet):

   """Calculate payout based on symbol combination."""

   if symbols[0] == symbols[1] == symbols[2]:

       if symbols[0] == '🍒':

           return bet * 5

       elif symbols[0] == '🔔':

           return bet * 3

       elif symbols[0] == '7️⃣':

           return bet * 10

       elif symbols[0] in ['🍋', '🍊']:

           return bet * 2

   elif symbols.count('🍒') == 2 and '🔔' in symbols:

       return bet * 1

   return 0

@app.route('/', methods=['GET', 'POST'])

def slot_machine():

   if 'balance' not in session:

       session['balance'] = 1000

   if 'symbols' not in session:

       session['symbols'] = [random.choice(SYMBOLS) for _ in range(3)]

   if request.method == 'POST':

       bet_str = request.form.get('bet')

       try:

           bet = int(bet_str)

           if bet <= 0 or bet > session['balance']:

               flash('Invalid bet amount!', 'error')

           else:

               session['balance'] -= bet

               new_symbols = [random.choice(SYMBOLS) for _ in range(3)]

               payout = get_payout(new_symbols, bet)

               session['balance'] += payout

               session['symbols'] = new_symbols

               if payout > 0:

                   flash(f'You won {payout} coins!', 'success')

               else:

                   flash('No win this time.', 'info')

               session.modified = True

       except ValueError:

           flash('Invalid bet amount. Enter a number!', 'error')

   # HTML template with optimized, dynamic reels

   template = '''

   <!DOCTYPE html>

   <html>

   <head>

       <title>Slot Machine</title>

       <style>

           body { background: #1a3c34; color: #fff; font-family: Arial, sans-serif;

                 display: flex; flex-direction: column; align-items: center;

                 min-height: 100vh; margin: 0; }

           .slot-machine { display: flex; justify-content: center; margin: 20px 0; }

           .reel-container { width: 120px; height: 120px; overflow: hidden;

                           border: 4px solid #ffd700; border-radius: 10px;

                           background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5);

                           margin: 0 10px; position: relative; }

           .reel { position: absolute; top: 0; width: 100%;

                 transition: top 2s ease-out; }

           .symbol { height: 120px; display: flex; align-items: center;

                    justify-content: center; font-size: 60px; }

           .message-box { margin: 10px 0; padding: 10px; border-radius: 5px;

                        font-weight: bold; text-align: center; width: 300px; }

           .success { background: #28a745; }

           .error { background: #dc3545; }

           .info { background: #17a2b8; }

           .controls { text-align: center; }

           button { padding: 12px 24px; font-size: 18px; background: #ff4500;

                   color: #fff; border: none; border-radius: 5px; cursor: pointer;

                   box-shadow: 0 4px #cc3700; transition: all 0.2s; }

           button:hover { background: #ff5722; }

           button:active { transform: translateY(4px); box-shadow: none; }

       </style>

   </head>

   <body>

       <h1>Slot Machine</h1>

       <p>Balance: {{ balance }} coins</p>

       <div class="slot-machine">

           <div class="reel-container"><div class="reel" id="reel0"></div></div>

           <div class="reel-container"><div class="reel" id="reel1"></div></div>

           <div class="reel-container"><div class="reel" id="reel2"></div></div>

       </div>

       <form method="post" onsubmit="spinReels(event)" class="controls">

           <label for="bet">Bet Amount:</label>

           <input type="number" id="bet" name="bet" min="1" max="{{ balance }}"

                 required style="padding: 5px; font-size: 16px; width: 100px;">

           <button type="submit">Pull the Lever</button>

       </form>

       {% with messages = get_flashed_messages(with_categories=true) %}

           {% if messages %}

               {% for category, message in messages %}

                   <div class="message-box {{ category }}">{{ message }}</div>

               {% endfor %}

           {% endif %}

       {% endwith %}

       <script>

           const SYMBOLS = {{ symbols_list|tojson }};

           const finalSymbols = {{ symbols|tojson }};

           const SYMBOL_HEIGHT = 120;

           const reels = [

               document.getElementById('reel0'),

               document.getElementById('reel1'),

               document.getElementById('reel2')

           ];

           // Generate a random strip of symbols for each reel

           function generateReelSymbols(minLength = 18) {

               const length = minLength + Math.floor(Math.random() * 5); // 18-22 symbols

               const strip = Array.from({ length }, () =>

                   SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)]);

               return strip;

           }

           // Populate reels initially

           const initialStrips = reels.map(() => generateReelSymbols());

           initialStrips.forEach((strip, i) => {

               strip.push(finalSymbols[i]);

               reels[i].innerHTML = strip.map(sym =>

                   `<div class="symbol">${sym}</div>`).join('');

           });

           function spinReels(event) {

               event.preventDefault();

               // Generate new strips with random lengths

               const newStrips = reels.map(() => generateReelSymbols());

               newStrips.forEach((strip, i) => strip.push(finalSymbols[i]));

               const spinDistances = newStrips.map(strip => (strip.length - 1) * SYMBOL_HEIGHT);

               // Animate reels with stagger

               reels.forEach((reel, index) => {

                   reel.style.transition = 'none';

                   reel.style.top = '0';

                   reel.innerHTML = newStrips[index].map(sym =>

                       `<div class="symbol">${sym}</div>`).join('');

                   reel.offsetHeight; // Force reflow

                   reel.style.transition = `top ${2 + index * 0.2}s ease-out`; // Stagger: 2s, 2.2s, 2.4s

                   reel.style.top = `-${spinDistances[index]}px`;

               });

               // Submit after longest animation

               setTimeout(() => {

                   document.querySelector('form').submit();

               }, 2400); // Matches 2.4s for reel 3

           }

       </script>

   </body>

   </html>

   '''

   return render_template_string(template,

                                balance=session['balance'],

                                symbols=session['symbols'],

                                symbols_list=SYMBOLS)

if __name__ == '__main__':

   app.run(debug=True)