Spaces:

Lashtw
/

Slot

Running

App Files Files Community

Lashtw commited on Dec 15, 2025

Commit

df98cf5

verified ·

1 Parent(s): 360ef24

Update index.html

Browse files

Files changed (1) hide show

index.html +448 -1

index.html CHANGED Viewed

	@@ -1 +1,448 @@
1	- ~~Slot~~ ~~Game~~

+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>幸運抽獎機</title>
+    <!-- Load Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Custom styles for the slot machine effect */
+        .slot-container {
+            position: relative;
+            height: 300px; /* Fixed viewport height */
+            overflow: hidden;
+            background: linear-gradient(135deg, #1f2937, #374151); /* Dark background */
+            border: 4px solid #fcd34d; /* Yellow border */
+            box-shadow: 0 0 20px rgba(252, 211, 77, 0.5);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .slot-track {
+            width: 100%;
+            transform: translateY(0);
+            /* 預設無過渡效果，快速移動由JS控制 */
+        }
+        .slot-item {
+            height: 60px; /* Height of each participant entry */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.875rem; /* text-3xl, 轉動中字體加大 */
+            font-weight: 700; /* font-bold */
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            user-select: none;
+            will-change: transform; /* 提升動畫效能 */
+        }
+        /* Highlight for the winning item */
+        .winner-highlight {
+            background-color: #fcd34d;
+            color: #1f2937;
+            transition: background-color 0.3s;
+        }
+        .slot-indicator-line {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 100%;
+            height: 60px; /* Same height as slot item */
+            border-top: 2px solid #fcd34d;
+            border-bottom: 2px solid #fcd34d;
+            box-shadow: 0 0 15px rgba(252, 211, 77, 0.8);
+            pointer-events: none;
+            z-index: 10;
+            background-color: rgba(255, 255, 255, 0.05); /* Subtle highlight */
+        }
+        .slot-mask {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            /* Gradient mask to fade out items above/below the center */
+            mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
+            background-color: rgba(0, 0, 0, 0.2); /* Dark overlay */
+            pointer-events: none;
+            border-radius: 8px;
+            z-index: 9;
+        }
+        /* Override Tailwind for custom scrollbar aesthetics */
+        textarea::-webkit-scrollbar {
+            width: 8px;
+        }
+        textarea::-webkit-scrollbar-thumb {
+            background-color: #fcd34d;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen p-4 sm:p-8 font-sans">
+    <div id="app" class="max-w-6xl mx-auto">
+        <h1 class="text-4xl font-extrabold text-gray-800 mb-6 text-center">🎁 幸運抽獎機 🎁</h1>
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Left Side: Controls and Participants Input -->
+            <div class="lg:w-1/3 p-6 bg-white shadow-xl rounded-xl border border-gray-200">
+                <h2 class="text-2xl font-semibold mb-4 text-gray-700">1. 參加者名單輸入</h2>
+                <p class="text-sm text-gray-500 mb-3">格式：座號 姓名 (每行一組)</p>
+                <textarea id="participantsInput" rows="10" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500 text-sm font-mono" placeholder="範例：
+1 王小明
+2 李大華
+3 陳美玲
+..."></textarea>
+                <button onclick="loadParticipants()" class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg shadow-md transition duration-200">
+                    載入名單 (共 <span id="participantCount">0</span> 人)
+                </button>
+                <h2 class="text-2xl font-semibold mt-8 mb-4 text-gray-700">2. 抽獎控制</h2>
+                <div id="statusMessage" class="p-3 bg-red-100 text-red-700 rounded-lg text-sm mb-4 hidden"></div>
+                <button id="startButton" onclick="startDraw()" class="w-full bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-3 px-4 rounded-lg shadow-lg transition duration-200 disabled:opacity-50" disabled>
+                    開始抽獎！
+                </button>
+            </div>
+            <!-- Right Side: Slot Machine Display -->
+            <div class="lg:w-2/3 p-6 bg-white shadow-xl rounded-xl">
+                <h2 class="text-2xl font-semibold mb-4 text-gray-700 text-center">幸運拉霸模擬</h2>
+                <div id="slotMachineContainer" class="slot-container rounded-lg">
+                    <div id="slotTrack" class="slot-track">
+                        <!-- 抽獎名單將動態載入並重複以模擬拉霸效果 -->
+                    </div>
+                    <!-- Center indicator line -->
+                    <div class="slot-indicator-line"></div>
+                    <div class="slot-mask"></div>
+                </div>
+                <div id="winnerOutput" class="mt-6 p-4 text-center bg-gray-800 text-white rounded-xl shadow-2xl scale-0 transition-transform duration-500 ease-out">
+                    <p class="text-xl font-bold">🎉 幸運得主 🎉</p>
+                    <p id="winnerResult" class="text-4xl font-extrabold text-amber-400 mt-2">N/A</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const participantsInput = document.getElementById('participantsInput');
+        const participantCountSpan = document.getElementById('participantCount');
+        const startButton = document.getElementById('startButton');
+        const statusMessage = document.getElementById('statusMessage');
+        const winnerOutput = document.getElementById('winnerOutput');
+        const winnerResult = document.getElementById('winnerResult');
+        // Slot Machine elements
+        const slotMachineContainer = document.getElementById('slotMachineContainer');
+        const slotTrack = document.getElementById('slotTrack');
+        let participants = [];
+        let slotItems = []; // Array of all items in the slot track (many repetitions)
+        let cheatingNumber = null;
+        let isDrawing = false;
+        let currentY = 0; // Tracking vertical position for JS animation
+        let animationFrameId = null; // For the requestAnimationFrame loop
+        const itemHeight = 60; // Must match CSS .slot-item height
+        const spinCycles = 30; // Number of times to repeat the list for smooth spinning
+        const fastSpinDuration = 4000; // 快速旋轉階段的時間 (4.0秒)
+        const slowdownDuration = 4000; // 減速到停止的階段時間 (4.0秒)
+        // --- Core Setup & State Management ---
+        /**
+         * Parses the textarea content, prepares slot items, and updates the UI.
+         */
+        function loadParticipants() {
+            participants = [];
+            slotTrack.innerHTML = '';
+            slotItems = [];
+            // Reset UI
+            winnerOutput.classList.remove('scale-100');
+            winnerOutput.classList.add('scale-0');
+            winnerResult.textContent = 'N/A';
+            cheatingNumber = null;
+            // 1. Parsing logic
+            const lines = participantsInput.value.trim().split('\n').filter(line => line.trim() !== '');
+            lines.forEach(line => {
+                const parts = line.trim().split(/\s+/);
+                if (parts.length >= 2) {
+                    const id = parseInt(parts[0], 10);
+                    const name = parts.slice(1).join(' ');
+                    if (!isNaN(id)) {
+                        participants.push({ id, name, display: `${id} - ${name}` });
+                    }
+                }
+            });
+            // 2. Create the repeating slot track items
+            if (participants.length > 0) {
+                // Repeat the list 'spinCycles' times
+                for (let cycle = 0; cycle < spinCycles; cycle++) {
+                    participants.forEach(p => {
+                        const item = createSlotItem(p.id, p.display);
+                        slotTrack.appendChild(item);
+                        slotItems.push({ id: p.id, element: item });
+                    });
+                }
+                // Add the final section (the last repetition is where we stop)
+                participants.forEach(p => {
+                    const item = createSlotItem(p.id, p.display);
+                    slotTrack.appendChild(item);
+                    slotItems.push({ id: p.id, element: item });
+                });
+                participantCountSpan.textContent = participants.length;
+                startButton.disabled = false;
+                statusMessage.classList.add('hidden');
+            } else {
+                startButton.disabled = true;
+                showStatus('請輸入有效的參加者名單。', 'bg-red-100 text-red-700');
+            }
+        }
+        /**
+         * Creates the HTML element for a single slot item.
+         */
+        function createSlotItem(id, displayText) {
+            const item = document.createElement('div');
+            item.className = `slot-item`;
+            item.textContent = displayText;
+            item.setAttribute('data-id', id);
+            return item;
+        }
+        /**
+         * Handles the secret keyboard input for cheating (invisible to users).
+         * @param {KeyboardEvent} event
+         */
+        function handleKeydown(event) {
+            if (isDrawing) return;
+            // Check if the key is a digit (0-9)
+            if (event.key >= '0' && event.key <= '9') {
+                if (!cheatingNumber) cheatingNumber = '';
+                // Max length for input buffer
+                if (cheatingNumber.length < 5) {
+                    cheatingNumber += event.key;
+                    console.log('Secret input buffer:', cheatingNumber);
+                    // No visual feedback is given to maintain secrecy
+                }
+            } else if (event.key === 'Backspace' || event.key === 'Delete') {
+                // Allow backspace to clear the last digit
+                if (cheatingNumber && cheatingNumber.length > 0) {
+                    cheatingNumber = cheatingNumber.slice(0, -1);
+                    console.log('Secret input buffer cleared one digit.');
+                }
+            } else if (event.key === 'Escape') {
+                // Clear the cheating number on Escape
+                cheatingNumber = null;
+                console.log('Secret input cleared.');
+            }
+        }
+        // --- Slot Control Functions ---
+        /**
+         * Animates the slot machine spin using requestAnimationFrame for smoothness.
+         * @param {Object} winnerData - Data about the winner and timing.
+         * @param {number} speed - Vertical speed in pixels per frame (negative value means moving up).
+         */
+        function animateSpin(winnerData, speed) {
+            if (!isDrawing) return;
+            const oneBlockHeight = participants.length * itemHeight;
+            const elapsed = performance.now() - winnerData.startTime;
+            // Phase 1: Fast Spin
+            if (elapsed < fastSpinDuration) {
+                currentY -= speed;
+                // Wrap around
+                if (currentY < -oneBlockHeight) {
+                    currentY += oneBlockHeight;
+                }
+                slotTrack.style.transform = `translateY(${currentY}px)`;
+                animationFrameId = requestAnimationFrame(() => animateSpin(winnerData, speed));
+            } else {
+                // Phase 2: Deceleration Trigger (Stop JS and use CSS transition)
+                if (animationFrameId) cancelAnimationFrame(animationFrameId);
+                // 1. Calculate the final target Y to center the winner
+                const centerOffset = (slotMachineContainer.clientHeight / 2) - (itemHeight / 2);
+                const totalItemsBeforeFinalBlock = participants.length * spinCycles;
+                const targetItemIndex = totalItemsBeforeFinalBlock + winnerData.index;
+                const finalTargetY = -(targetItemIndex * itemHeight) + centerOffset;
+                // 2. Determine the current position's offset within one block
+                let currentOffset = currentY % oneBlockHeight;
+                if (currentOffset > 0) currentOffset -= oneBlockHeight; // Ensure negative offset
+                // 3. Calculate a "snap point": The Y position corresponding to the start of the final block, plus the current offset.
+                const snapPoint = -(totalItemsBeforeFinalBlock * itemHeight) + currentOffset;
+                // 4. Set the transition to none, snap to the alignment point
+                slotTrack.style.transition = 'none';
+                slotTrack.style.transform = `translateY(${snapPoint}px)`;
+                // 5. Apply the smooth deceleration transition to the final position:
+                // Use requestAnimationFrame to ensure the browser processes the 'transition: none' and 'snap' before starting the new transition.
+                requestAnimationFrame(() => {
+                    // Set the slow, smooth transition curve
+                    slotTrack.style.transition = `transform ${slowdownDuration}ms cubic-bezier(0.1, 0.7, 0.1, 1)`;
+                    // Move to the final winning position
+                    slotTrack.style.transform = `translateY(${finalTargetY}px)`;
+                });
+                // 6. Wait for the CSS transition to complete
+                setTimeout(() => {
+                    declareWinner(winnerData.id, winnerData.index, totalItemsBeforeFinalBlock);
+                }, slowdownDuration + 100);
+            }
+        }
+        /**
+         * Starts the drawing process (slot machine spin).
+         */
+        function startDraw() {
+            if (isDrawing || participants.length === 0) return;
+            // Remove previous highlight
+            slotTrack.querySelectorAll('.winner-highlight').forEach(el => el.classList.remove('winner-highlight'));
+            // Reset state and UI
+            isDrawing = true;
+            startButton.disabled = true;
+            startButton.textContent = '抽獎進行中...';
+            winnerOutput.classList.remove('scale-100');
+            winnerOutput.classList.add('scale-0');
+            // Reset position and start JS ANIMATION
+            slotTrack.style.transition = 'none'; // Ensure no CSS transitions interfere
+            currentY = 0;
+            slotTrack.style.transform = 'translateY(0px)';
+            let finalWinnerId = cheatingNumber ? parseInt(cheatingNumber, 10) : null;
+            let winnerIndex = -1;
+            // Cheating logic (finding the target winner)
+            if (finalWinnerId) {
+                winnerIndex = participants.findIndex(p => p.id === finalWinnerId);
+                if (winnerIndex === -1) {
+                    finalWinnerId = null;
+                    showStatus(`⚠️ 錯誤: 指定號碼 ${cheatingNumber} 不存在。執行隨機抽獎。`, 'bg-red-100 text-red-700', fastSpinDuration + slowdownDuration);
+                }
+            }
+            if (!finalWinnerId) {
+                // Random pick
+                const randomIndex = Math.floor(Math.random() * participants.length);
+                finalWinnerId = participants[randomIndex].id;
+                winnerIndex = randomIndex;
+                showStatus(`抽獎進行中...`, 'bg-blue-100 text-blue-700', fastSpinDuration + slowdownDuration);
+            } else {
+                 showStatus(`抽獎進行中...`, 'bg-green-100 text-green-700', fastSpinDuration + slowdownDuration);
+            }
+            const initialSpeed = 150; // Constant speed for the fast spin (pixels per frame)
+            const startTime = performance.now();
+            const winnerData = {
+                id: finalWinnerId,
+                index: winnerIndex,
+                duration: fastSpinDuration,
+                startTime: startTime
+            };
+            animateSpin(winnerData, initialSpeed); // Start the smooth JS spin
+        }
+        /**
+         * Stops the spin animation and snaps to the winner.
+         * @param {number} finalWinnerId - The ID of the winner.
+         * @param {number} winnerIndex - The index of the winner in the participants array (0 to N-1).
+         * @param {number} totalItemsBeforeFinalBlock - The count of items before the final block.
+         */
+        function declareWinner(finalWinnerId, winnerIndex, totalItemsBeforeFinalBlock) {
+            isDrawing = false;
+            const winner = participants.find(p => p.id === finalWinnerId);
+            if (!winner) {
+                winnerResult.textContent = '查無此號碼';
+                winnerOutput.classList.add('scale-100');
+                showStatus('抽獎結果無效，請檢查名單。', 'bg-red-100 text-red-700');
+                return;
+            }
+            // Highlight the winning element in the final block
+            const finalWinnerItem = slotItems[totalItemsBeforeFinalBlock + winnerIndex];
+            if (finalWinnerItem) {
+                finalWinnerItem.element.classList.add('winner-highlight');
+            }
+            // Display winner
+            winnerResult.textContent = `${winner.id} - ${winner.name}`;
+            winnerOutput.classList.add('scale-100');
+            showStatus(`已抽出幸運兒: ${winner.name}`, 'bg-purple-100 text-purple-700', 5000);
+            cheatingNumber = null;
+            startButton.disabled = false;
+            startButton.textContent = '重新抽獎';
+        }
+        /**
+         * Shows a temporary status message.
+         * @param {string} msg - The message to display.
+         * @param {string} className - Tailwind class names for styling.
+         * @param {number} duration - Duration in milliseconds.
+         */
+        function showStatus(msg, className, duration = 3000) {
+            statusMessage.textContent = msg;
+            statusMessage.className = `p-3 rounded-lg text-sm mb-4 ${className}`;
+            statusMessage.classList.remove('hidden');
+            setTimeout(() => {
+                statusMessage.classList.add('hidden');
+            }, duration);
+        }
+        // --- Initialization ---
+        window.onload = () => {
+            // Add initial mock data
+            participantsInput.value = `1 艾倫
+2 貝拉
+3 查理
+4 戴安
+5 艾迪
+6 芬妮
+7 蓋瑞
+8 海倫
+9 伊恩
+10 珍妮
+11 凱文
+12 莉莉`;
+            loadParticipants();
+            document.addEventListener('keydown', handleKeydown);
+        };
+    </script>
+</body>
+</html>