Spaces:

awacke1
/

StreamlitHtmlJavascriptDemo

Sleeping

App Files Files Community

awacke1 commited on Nov 22, 2024

Commit

80aef01

verified ·

1 Parent(s): 797da35

Create app.py

Browse files

Files changed (1) hide show

app.py +292 -0

app.py ADDED Viewed

	@@ -0,0 +1,292 @@

+import streamlit as st
+import streamlit.components.v1 as components
+# Configure the Streamlit page
+st.set_page_config(
+    page_title="Slot Machine Game",
+    page_icon="🎰",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
+# Custom CSS to modify Streamlit's default styling
+st.markdown("""
+    <style>
+        .main > div {
+            padding-top: 1rem;
+        }
+        #root > div:nth-child(1) > div > div > div > div > section > div {
+            padding-top: 0rem;
+        }
+    </style>
+""", unsafe_allow_html=True)
+# Title
+st.title("🎰 Slot Machine")
+# HTML/JavaScript slot machine game
+slot_machine_html = """
+<!DOCTYPE html>
+<html>
+<head>
+    <title>40-Card Slot Machine</title>
+    <style>
+        body { margin: 0; background: #1a1a1a; color: #fff; font-family: Arial, sans-serif; }
+        .game-container {
+            width: 1024px;
+            height: 768px;
+            margin: 0 auto;
+            position: relative;
+            background: #2a2a2a;
+            padding: 20px;
+            border-radius: 10px;
+            border: 2px solid gold;
+            box-sizing: border-box;
+        }
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 5px;
+            margin: 20px 0;
+            height: calc(100% - 120px);
+        }
+        .reel {
+            aspect-ratio: 1;
+            background: #333;
+            border: 2px solid gold;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 32px;
+            position: relative;
+            transition: transform 0.3s;
+        }
+        .controls {
+            text-align: center;
+            margin-top: 20px;
+            position: absolute;
+            bottom: 20px;
+            width: calc(100% - 40px);
+        }
+        .button {
+            background: linear-gradient(45deg, #FFD700, #FFA500);
+            color: #000;
+            padding: 15px 30px;
+            border: none;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 18px;
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+        .button:hover { transform: scale(1.1); }
+        .button:disabled {
+            background: #666;
+            cursor: not-allowed;
+        }
+        #balance, #timer {
+            position: absolute;
+            top: 10px;
+            font-size: 24px;
+            background: #FFD700;
+            color: #000;
+            padding: 10px;
+            border-radius: 5px;
+            z-index: 10;
+        }
+        #balance { left: 10px; }
+        #timer { right: 10px; }
+        @keyframes spin {
+            0% { transform: rotateY(0deg); }
+            100% { transform: rotateY(360deg); }
+        }
+        .spinning {
+            animation: spin 0.5s linear infinite;
+        }
+        .win-line {
+            position: absolute;
+            background: rgba(255, 215, 0, 0.5);
+            z-index: 1;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <div id="balance">$100.00</div>
+        <div id="timer">10</div>
+        <div class="grid-container">
+            <!-- 40 reels will be created by JavaScript -->
+        </div>
+        <div class="controls">
+            <button class="button" onclick="spin()">SPIN ($1)</button>
+        </div>
+    </div>
+    <script>
+        // Previous JavaScript code remains exactly the same
+        let balance = 100;
+        let timer = 10;
+        let timerInterval;
+        let spinning = false;
+        let spinTimeouts = [];
+        const symbols = ['🎰', '💎', '7️⃣', '🎲', '🍀', '👑', '🌟', '🍒'];
+        let currentState = Array(40).fill('');
+        const ROWS = 8;
+        const COLS = 5;
+        // Initialize grid
+        function initializeGrid() {
+            const grid = document.querySelector('.grid-container');
+            grid.innerHTML = '';
+            for (let i = 0; i < ROWS * COLS; i++) {
+                const reel = document.createElement('div');
+                reel.className = 'reel';
+                reel.id = `reel-${i}`;
+                reel.textContent = symbols[Math.floor(Math.random() * symbols.length)];
+                grid.appendChild(reel);
+            }
+        }
+        function updateBalance(amount) {
+            balance += amount;
+            document.getElementById('balance').textContent = `$${balance.toFixed(2)}`;
+        }
+        function spin() {
+            if (spinning || balance < 1) return;
+            updateBalance(-1);
+            spinning = true;
+            resetTimer();
+            document.querySelectorAll('.win-line').forEach(line => line.remove());
+            for (let i = 0; i < ROWS * COLS; i++) {
+                const reel = document.getElementById(`reel-${i}`);
+                reel.classList.add('spinning');
+                const delay = 2000 + Math.random() * 2000;
+                spinTimeouts.push(setTimeout(() => stopReel(i), delay));
+            }
+        }
+        function stopReel(index) {
+            const reel = document.getElementById(`reel-${index}`);
+            const symbol = symbols[Math.floor(Math.random() * symbols.length)];
+            reel.textContent = symbol;
+            reel.classList.remove('spinning');
+            currentState[index] = symbol;
+            const stillSpinning = document.querySelectorAll('.spinning').length;
+            if (stillSpinning === 0) {
+                spinning = false;
+                checkWins();
+            }
+        }
+        function checkWins() {
+            let winningLines = [];
+            for (let row = 0; row < ROWS; row++) {
+                let startIdx = row * COLS;
+                let currentSymbol = currentState[startIdx];
+                let count = 1;
+                for (let col = 1; col < COLS; col++) {
+                    if (currentState[startIdx + col] === currentSymbol) {
+                        count++;
+                    } else {
+                        if (count >= 3) {
+                            winningLines.push({
+                                start: startIdx + col - count,
+                                count: count,
+                                direction: 'horizontal',
+                                row: row
+                            });
+                        }
+                        currentSymbol = currentState[startIdx + col];
+                        count = 1;
+                    }
+                }
+                if (count >= 3) {
+                    winningLines.push({
+                        start: startIdx + COLS - count,
+                        count: count,
+                        direction: 'horizontal',
+                        row: row
+                    });
+                }
+            }
+            let totalWin = 0;
+            winningLines.forEach(line => {
+                const multiplier = line.count - 2;
+                const baseWin = Math.min(multiplier * 10, 100);
+                totalWin += baseWin;
+                showWinLine(line);
+            });
+            if (totalWin > 0) {
+                updateBalance(totalWin);
+                setTimeout(() => {
+                    document.querySelectorAll('.win-line').forEach(line => line.remove());
+                }, 3000);
+            }
+        }
+        function showWinLine(line) {
+            const winLine = document.createElement('div');
+            winLine.className = 'win-line';
+            const firstReel = document.getElementById(`reel-${line.start}`);
+            const reelWidth = firstReel.offsetWidth;
+            const reelHeight = firstReel.offsetHeight;
+            winLine.style.width = `${reelWidth * line.count}px`;
+            winLine.style.height = '4px';
+            winLine.style.top = `${(line.row * reelHeight) + (reelHeight / 2)}px`;
+            winLine.style.left = `${(line.start % COLS) * reelWidth}px`;
+            document.querySelector('.grid-container').appendChild(winLine);
+        }
+        function resetTimer() {
+            clearInterval(timerInterval);
+            timer = 10;
+            document.getElementById('timer').textContent = timer;
+            timerInterval = setInterval(() => {
+                timer--;
+                document.getElementById('timer').textContent = timer;
+                if (timer <= 0) {
+                    resetGame();
+                }
+            }, 1000);
+        }
+        function resetGame() {
+            spinning = false;
+            clearInterval(timerInterval);
+            spinTimeouts.forEach(timeout => clearTimeout(timeout));
+            spinTimeouts = [];
+            document.querySelectorAll('.spinning').forEach(reel => reel.classList.remove('spinning'));
+            document.querySelectorAll('.win-line').forEach(line => line.remove());
+            resetTimer();
+        }
+        // Initialize the game
+        initializeGrid();
+        resetTimer();
+    </script>
+</body>
+</html>
+"""
+# Create the Streamlit component
+components.html(
+    slot_machine_html,
+    height=800,  # Slightly taller than game height to account for padding
+    width=1050,  # Slightly wider than game width to account for padding
+)