function MainComponent() { const [balance, setBalance] = React.useState(1000); const [currentBet, setCurrentBet] = React.useState(10); const [isSpinning, setIsSpinning] = React.useState(false); const [reelGrid, setReelGrid] = React.useState([]); const [winMessage, setWinMessage] = React.useState(""); const [showWinAnimation, setShowWinAnimation] = React.useState(false); // Egyptian themed symbols with beautiful images const SYMBOLS = { A: { image: "https://ucarecdn.com/4fc070d5-7442-4d04-9452-75331c8d640e/-/format/auto/", payout: { 3: 2, 4: 5, 5: 10 } }, K: { image: "https://ucarecdn.com/4acf7f4f-2e17-4264-ba95-bc4fe7716000/-/format/auto/", payout: { 3: 2, 4: 5, 5: 10 } }, Q: { image: "https://ucarecdn.com/a2c0ed06-14e0-4262-9d64-4adbff0b5269/-/format/auto/", payout: { 3: 1, 4: 3, 5: 8 } }, J: { image: "https://ucarecdn.com/5c7c9a24-54a4-47a6-9513-5640ae237429/-/format/auto/", payout: { 3: 1, 4: 3, 5: 8 } }, 10: { image: "https://ucarecdn.com/ff14a2d9-acaf-4d7b-ad0c-48210e8da2dc/-/format/auto/", payout: { 3: 1, 4: 2, 5: 5 } }, ASP: { image: "https://ucarecdn.com/753ec6a7-4393-4724-b9f8-af907ffd885e/-/format/auto/", payout: { 3: 5, 4: 10, 5: 25 } }, EYE: { image: "https://ucarecdn.com/38ccb57d-5364-4043-8667-73d11a45e818/-/format/auto/", payout: { 3: 8, 4: 15, 5: 40 } }, SCARAB: { image: "https://ucarecdn.com/61786563-90ad-43ff-a4bc-fecad3efb26f/-/format/auto/", payout: { 3: 10, 4: 25, 5: 75 } }, PHARAOH: { image: "https://ucarecdn.com/f73583db-85cd-47f1-a123-7154ec3c0a22/-/format/auto/", payout: { 3: 15, 4: 50, 5: 150 } }, CLEOPATRA: { image: "https://ucarecdn.com/4aabd806-4a61-440c-9abc-3ad5a1a97d0b/-/format/auto/", payout: { 3: 20, 4: 100, 5: 500 } } }; const SYMBOL_KEYS = Object.keys(SYMBOLS); const SYMBOL_WEIGHTS = [ 10, 10, 12, 12, 15, 8, 7, 5, 3, 2 ]; const ROWS = 3; const COLS = 5; const getRandomSymbol = React.useCallback(()=>{ const weightedList = []; SYMBOL_KEYS.forEach((key, index)=>{ for(let i = 0; i < SYMBOL_WEIGHTS[index]; i++){ weightedList.push(key); } }); const randomKey = weightedList[Math.floor(Math.random() * weightedList.length)]; return { key: randomKey, ...SYMBOLS[randomKey] }; }, []); const generateInitialGrid = React.useCallback(()=>{ const grid = []; for(let r = 0; r < ROWS; r++){ grid[r] = []; for(let c = 0; c < COLS; c++){ grid[r][c] = getRandomSymbol(); } } return grid; }, [ getRandomSymbol ]); React.useEffect(()=>{ setReelGrid(generateInitialGrid()); }, [ generateInitialGrid ]); const checkWin = React.useCallback((result)=>{ let totalWin = 0; const middleRow = result[Math.floor(ROWS / 2)]; const firstSymbol = middleRow[0]; let streak = 1; for(let i = 1; i < middleRow.length; i++){ if (middleRow[i].key === firstSymbol.key) { streak++; } else { break; } } if (streak >= 3) { totalWin = currentBet * (firstSymbol.payout[streak] || 0); } return totalWin; }, [ currentBet ]); const spin = React.useCallback(()=>{ if (isSpinning || balance < currentBet) return; setIsSpinning(true); setWinMessage(""); setShowWinAnimation(false); setBalance((prev)=>prev - currentBet); // Spinning animation const spinInterval = setInterval(()=>{ setReelGrid(generateInitialGrid()); }, 100); setTimeout(()=>{ clearInterval(spinInterval); const finalResult = generateInitialGrid(); setReelGrid(finalResult); const winnings = checkWin(finalResult); if (winnings > 0) { setBalance((prev)=>prev + winnings); if (winnings >= currentBet * 100) { setWinMessage("🎉 MEGA WIN! 🎉"); } else if (winnings >= currentBet * 20) { setWinMessage("💎 BIG WIN! 💎"); } else { setWinMessage(`🏆 WIN $${winnings}! 🏆`); } setShowWinAnimation(true); setTimeout(()=>setShowWinAnimation(false), 3000); } else { // Show "NO WIN" message for losing spins setWinMessage("Try Again!"); setShowWinAnimation(true); setTimeout(()=>setShowWinAnimation(false), 2000); } setIsSpinning(false); }, 2500); }, [ isSpinning, balance, currentBet, generateInitialGrid, checkWin ]); const changeBet = React.useCallback((amount)=>{ if (isSpinning) return; const newBet = currentBet + amount; if (newBet > 0 && newBet <= balance && newBet <= 100) { setCurrentBet(newBet); } }, [ isSpinning, currentBet, balance ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-purple-900 via-purple-800 to-indigo-900 flex items-center justify-center p-4 font-cinzel relative overflow-hidden", __source: { fileName: "", lineNumber: 173, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 opacity-10", __source: { fileName: "", lineNumber: 175, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-10 left-10 text-6xl", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, "𓂀"), /*#__PURE__*/ React.createElement("div", { className: "absolute top-20 right-20 text-5xl", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, "𓁹"), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-20 left-20 text-7xl", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, "𓋹"), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-10 right-10 text-6xl", __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, "𓊪"), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/4 text-4xl", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, "𓈖"), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/3 right-1/3 text-5xl", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, "𓊽")), showWinAnimation && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", __source: { fileName: "", lineNumber: 186, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `px-8 py-6 rounded-3xl border-4 shadow-2xl transform animate-bounce ${winMessage.includes("MEGA WIN") ? "bg-gradient-to-r from-yellow-400 via-yellow-300 to-yellow-400 text-purple-900 border-yellow-500" : winMessage.includes("BIG WIN") ? "bg-gradient-to-r from-orange-400 via-orange-300 to-orange-400 text-purple-900 border-orange-500" : winMessage.includes("WIN $") ? "bg-gradient-to-r from-green-400 via-green-300 to-green-400 text-purple-900 border-green-500" : "bg-gradient-to-r from-red-400 via-red-300 to-red-400 text-white border-red-500"}`, __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `font-bold text-center font-cinzel tracking-wider drop-shadow-lg ${winMessage.includes("MEGA WIN") ? "text-4xl sm:text-5xl md:text-6xl lg:text-7xl" : winMessage.includes("BIG WIN") ? "text-3xl sm:text-4xl md:text-5xl lg:text-6xl" : winMessage.includes("WIN $") ? "text-2xl sm:text-3xl md:text-4xl lg:text-5xl" : "text-xl sm:text-2xl md:text-3xl lg:text-4xl"}`, __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, winMessage))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-6xl mx-auto flex flex-col gap-8 relative z-10", __source: { fileName: "", lineNumber: 215, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center", __source: { fileName: "", lineNumber: 217, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-cinzel text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-yellow-300 to-yellow-500 tracking-wider drop-shadow-2xl", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }, "Cleopatra's Riches"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-yellow-300 text-lg sm:text-xl opacity-80", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, "✨ Ancient Egyptian Treasures Await ✨")), /*#__PURE__*/ React.createElement("main", { className: "relative", __source: { fileName: "", lineNumber: 227, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-b from-yellow-600 via-yellow-500 to-yellow-600 p-1 rounded-3xl shadow-2xl", __source: { fileName: "", lineNumber: 228, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-b from-purple-900 to-purple-800 p-6 rounded-3xl", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-5 gap-3 sm:gap-4", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, reelGrid.map((row, rowIndex)=>row.map((symbol, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: `${rowIndex}-${colIndex}`, className: `aspect-square bg-gradient-to-b from-amber-900 to-amber-800 rounded-xl border-2 border-yellow-500 shadow-lg overflow-hidden transition-all duration-200 ${isSpinning ? "animate-pulse scale-95 blur-sm" : "hover:scale-105"}`, __source: { fileName: "", lineNumber: 233, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: symbol.image, alt: symbol.key, className: "w-full h-full object-cover rounded-lg", style: { imageRendering: "crisp-edges" }, __source: { fileName: "", lineNumber: 241, columnNumber: 23 }, __self: this }))))))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-yellow-400 to-transparent transform -translate-y-1/2 opacity-60", __source: { fileName: "", lineNumber: 255, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("footer", { className: "bg-gradient-to-r from-purple-900/80 via-purple-800/80 to-purple-900/80 backdrop-blur-lg rounded-3xl p-6 border border-yellow-500/30 shadow-2xl", __source: { fileName: "", lineNumber: 259, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-6 text-white", __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center sm:text-left", __source: { fileName: "", lineNumber: 262, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-yellow-300 text-sm uppercase tracking-widest mb-1", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, "Balance"), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-yellow-400", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, "$", balance.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>changeBet(-10), disabled: isSpinning || currentBet <= 10, className: "bg-gradient-to-b from-yellow-500 to-yellow-600 hover:from-yellow-400 hover:to-yellow-500 disabled:from-gray-600 disabled:to-gray-700 text-purple-900 font-bold rounded-full w-12 h-12 text-2xl shadow-lg transition-all duration-200 hover:scale-110 disabled:scale-100 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 273, columnNumber: 15 }, __self: this }, "-"), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-yellow-300 text-sm uppercase tracking-widest mb-1", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, "Bet"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-yellow-400", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, "$", currentBet)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>changeBet(10), disabled: isSpinning || currentBet >= 100, className: "bg-gradient-to-b from-yellow-500 to-yellow-600 hover:from-yellow-400 hover:to-yellow-500 disabled:from-gray-600 disabled:to-gray-700 text-purple-900 font-bold rounded-full w-12 h-12 text-2xl shadow-lg transition-all duration-200 hover:scale-110 disabled:scale-100 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 288, columnNumber: 15 }, __self: this }, "+")), /*#__PURE__*/ React.createElement("button", { onClick: spin, disabled: isSpinning || balance < currentBet, className: "bg-gradient-to-b from-yellow-500 via-yellow-400 to-yellow-500 hover:from-yellow-400 hover:via-yellow-300 hover:to-yellow-400 disabled:from-gray-600 disabled:to-gray-700 text-purple-900 font-bold uppercase text-2xl px-12 py-4 rounded-2xl shadow-2xl transition-all duration-200 hover:scale-105 hover:shadow-yellow-400/50 disabled:scale-100 disabled:cursor-not-allowed border-2 border-yellow-600 w-full sm:w-auto", __source: { fileName: "", lineNumber: 298, columnNumber: 13 }, __self: this }, isSpinning ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin text-2xl", __source: { fileName: "", lineNumber: 305, columnNumber: 19 }, __self: this }, "⚡"), "SPINNING") : "SPIN"))), /*#__PURE__*/ React.createElement("div", { className: "text-center text-yellow-300/60 text-sm", __source: { fileName: "", lineNumber: 316, columnNumber: 9 }, __self: this }, "Match 3+ symbols on the middle line to win • Higher value symbols pay more")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 322, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap'); .font-cinzel { font-family: 'Cinzel Decorative', cursive; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 3s ease-in-out infinite; } `)); }