function CardDeck() { const [playerHealth, setPlayerHealth] = useState(100); const [enemyHealth, setEnemyHealth] = useState(100); const [selectedCard, setSelectedCard] = useState(null); const [energy, setEnergy] = useState(3); const [playerBlock, setPlayerBlock] = useState(0); const [playerStatus, setPlayerStatus] = useState([]); const [enemyStatus, setEnemyStatus] = useState([]); const [deck, setDeck] = useState([ { id: 1, type: "attack", name: "Cyber Strike", damage: 15, energy: 1, icon: "bolt", color: "#00ff9d", description: "Deal 15 damage", effect: "none" }, { id: 2, type: "defense", name: "Neural Shield", block: 10, energy: 1, icon: "shield-alt", color: "#00ccff", description: "Gain 10 block", effect: "block" }, { id: 3, type: "special", name: "System Overload", damage: 25, energy: 3, icon: "microchip", color: "#ff00cc", description: "Deal 25 damage and apply Stun", effect: "stun" }, { id: 4, type: "attack", name: "Quick Hack", damage: 8, energy: 1, icon: "code", color: "#00ff9d", description: "Deal 8 damage, draw a card", effect: "draw" }, { id: 5, type: "special", name: "Virus Upload", damage: 5, energy: 2, icon: "bug", color: "#ff00cc", description: "Deal 5 damage, apply Poison (3)", effect: "poison" }, { id: 6, type: "defense", name: "Firewall", block: 8, energy: 2, icon: "fire", color: "#00ccff", description: "Gain 8 block, apply Thorns (2)", effect: "thorns" }, { id: 7, type: "special", name: "Memory Leak", energy: 1, icon: "memory", color: "#ff00cc", description: "Enemy loses 1 energy next turn", effect: "energy_down" }, { id: 8, type: "attack", name: "Buffer Overflow", damage: 12, energy: 2, icon: "layer-group", color: "#00ff9d", description: "Deal 12 damage, apply Weak (2)", effect: "weak" } ]); const [hand, setHand] = useState([]); const drawCard = ()=>{ if (deck.length > 0 && hand.length < 5) { const randomIndex = Math.floor(Math.random() * deck.length); const drawnCard = deck[randomIndex]; setHand([ ...hand, drawnCard ]); setDeck(deck.filter((_, index)=>index !== randomIndex)); } }; const applyStatus = (target, status, duration)=>{ const updateStatus = (current)=>{ const existing = current.find((s)=>s.name === status); if (existing) { return current.map((s)=>s.name === status ? { ...s, duration: Math.max(s.duration, duration) } : s); } return [ ...current, { name: status, duration } ]; }; if (target === "player") { setPlayerStatus(updateStatus); } else { setEnemyStatus(updateStatus); } }; const playCard = (card)=>{ if (energy >= card.energy) { setEnergy(energy - card.energy); let damage = card.damage || 0; if (enemyStatus.some((s)=>s.name === "weak")) { damage = Math.floor(damage * 0.75); } if (card.type === "attack") { setEnemyHealth(Math.max(0, enemyHealth - damage)); } else if (card.type === "defense") { setPlayerBlock(Math.min(100, playerBlock + (card.block || 0))); } switch(card.effect){ case "poison": applyStatus("enemy", "poison", 3); break; case "weak": applyStatus("enemy", "weak", 2); break; case "thorns": applyStatus("player", "thorns", 2); break; case "stun": applyStatus("enemy", "stun", 1); break; case "draw": drawCard(); break; case "energy_down": applyStatus("enemy", "energy_down", 1); break; } setHand(hand.filter((c)=>c.id !== card.id)); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] text-white font-orbitron p-4", __source: { fileName: "", lineNumber: 170, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-4 rounded-lg border border-[#333]", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, "Player Health"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#00ff9d]", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, playerHealth), playerBlock > 0 && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#00ccff]", __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }, "Block: ", playerBlock)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-4 rounded-lg border border-[#333]", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, "Enemy Health"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#ff00cc]", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, enemyHealth), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-1", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, enemyStatus.map((status, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-xs px-2 py-1 rounded bg-[#2a2a2a] text-[#ff00cc]", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, status.name, " (", status.duration, ")")))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-4 rounded-lg border border-[#333]", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, "Energy"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#00ccff]", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, energy, "/3"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 mb-8", __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-6 rounded-2xl border border-[#333]", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/enemy-avatar.png", alt: "Enemy character avatar showing a cyberpunk adversary", className: "w-32 h-32 mx-auto rounded-lg mb-4", __source: { fileName: "", lineNumber: 206, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#333] h-4 rounded-full", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ff00cc] h-full rounded-full transition-all duration-300", style: { width: `${enemyHealth}%` }, __source: { fileName: "", lineNumber: 212, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-6 rounded-2xl border border-[#333]", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/player-avatar.png", alt: "Player character avatar showing a cyberpunk protagonist", className: "w-32 h-32 mx-auto rounded-lg mb-4", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#333] h-4 rounded-full", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#00ff9d] h-full rounded-full transition-all duration-300", style: { width: `${playerHealth}%` }, __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-2 justify-center", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, playerStatus.map((status, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-xs px-2 py-1 rounded bg-[#2a2a2a] text-[#00ff9d]", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, status.name, " (", status.duration, ")"))))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-8", __source: { fileName: "", lineNumber: 244, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: drawCard, disabled: hand.length >= 5 || deck.length === 0, className: "px-6 py-3 bg-[#00ccff]/20 border border-[#00ccff] rounded-lg text-lg font-bold hover:bg-[#00ccff]/30 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 245, columnNumber: 11 }, __self: this }, "Draw Card (", deck.length, ")")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 254, columnNumber: 9 }, __self: this }, hand.map((card)=>/*#__PURE__*/ React.createElement("div", { key: card.id, onClick: ()=>playCard(card), className: `w-[200px] bg-[#1a1a1a] p-4 rounded-lg border-2 cursor-pointer transform hover:scale-105 transition-all ${card.type === "attack" ? "border-[#00ff9d]" : card.type === "defense" ? "border-[#00ccff]" : "border-[#ff00cc]"}`, __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, card.name), /*#__PURE__*/ React.createElement("div", { className: "text-[#00ccff]", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, card.energy, "🔋")), /*#__PURE__*/ React.createElement("div", { className: "text-center my-4", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${card.icon} text-4xl`, style: { color: card.color }, __source: { fileName: "", lineNumber: 267, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666] text-center", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, card.description)))))); } function CardDeckStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 285, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 286, columnNumber: 7 }, __self: this }, "Enhanced Card Combat System"), /*#__PURE__*/ React.createElement(CardDeck, { __source: { fileName: "", lineNumber: 287, columnNumber: 7 }, __self: this })); } function NotificationSystem({ notifications = [], onClose }) { const [visibleNotifications, setVisibleNotifications] = useState(notifications); useEffect(()=>{ setVisibleNotifications(notifications); }, [ notifications ]); const removeNotification = (id)=>{ setVisibleNotifications((prev)=>prev.filter((n)=>n.id !== id)); if (onClose) onClose(id); }; return /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 z-50 space-y-4 max-w-sm w-full", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, visibleNotifications.map((notification)=>/*#__PURE__*/ React.createElement("div", { key: notification.id, className: ` p-4 rounded-lg border shadow-lg transform transition-all duration-300 ease-in-out ${notification.type === "success" && "bg-[#1a1a1a] border-[#00ff9d] text-[#00ff9d]"} ${notification.type === "error" && "bg-[#1a1a1a] border-[#ff0066] text-[#ff0066]"} ${notification.type === "info" && "bg-[#1a1a1a] border-[#00ccff] text-[#00ccff]"} ${notification.type === "sticker" && "bg-[#1a1a1a] border-[#ff00cc] text-[#ff00cc]"} ${notification.type === "achievement" && "bg-[#1a1a1a] border-[#ffd700] text-[#ffd700]"} ${notification.type === "social" && "bg-[#1a1a1a] border-[#9d00ff] text-[#9d00ff]"} `, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start gap-3", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, notification.type === "sticker" ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }, notification.emoji), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, notification.message)) : notification.type === "achievement" ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-[#ffd700]/20", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trophy text-2xl", __source: { fileName: "", lineNumber: 39, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }, "Achievement Unlocked!"), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, notification.message), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#ffd700]/60 mt-1", __source: { fileName: "", lineNumber: 44, columnNumber: 21 }, __self: this }, "+", notification.points, " points"))) : notification.type === "social" ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: notification.avatar, alt: "User avatar", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 52, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 60, columnNumber: 23 }, __self: this }, notification.username), " ", notification.message), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#9d00ff]/60", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, notification.time))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-1", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${notification.type === "success" ? "check-circle" : notification.type === "error" ? "exclamation-circle" : "info-circle"}`, __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold", __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this }, notification.title)), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, notification.message))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeNotification(notification.id), className: "text-white/60 hover:text-white", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }))), notification.progress && /*#__PURE__*/ React.createElement("div", { className: "mt-2 w-full bg-white/10 rounded-full h-1", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-current rounded-full h-full transition-all duration-300 ease-in-out", style: { width: `${notification.progress}%` }, __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }))))); } function NotificationSystemStory() { const [notifications, setNotifications] = useState([ { id: 1, type: "achievement", message: "Stack Master - Stack 100 blocks perfectly", points: 500 }, { id: 2, type: "social", username: "BlockMaster42", message: "just beat your high score!", time: "2m ago", avatar: "/default-avatar.png" } ]); const onClose = (id)=>{ setNotifications((prev)=>prev.filter((n)=>n.id !== id)); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] p-4", __source: { fileName: "", lineNumber: 130, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NotificationSystem, { notifications: notifications, onClose: onClose, __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto space-y-4", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setNotifications((prev)=>[ ...prev, { id: Date.now(), type: "achievement", message: "Speed Demon - Complete level in under 30 seconds", points: 300 } ]), className: "w-full px-4 py-2 bg-[#ffd700]/20 border border-[#ffd700] rounded-lg hover:bg-[#ffd700]/30", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, "Add Achievement"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setNotifications((prev)=>[ ...prev, { id: Date.now(), type: "social", username: "StackPro99", message: "challenged you to a match!", time: "just now", avatar: "/default-avatar.png" } ]), className: "w-full px-4 py-2 bg-[#9d00ff]/20 border border-[#9d00ff] rounded-lg hover:bg-[#9d00ff]/30", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, "Add Social"))); } function TransformationSystem() { const [scores, setScores] = useState([]); const [isPlaying, setIsPlaying] = useState(false); const [view, setView] = useState("menu"); const [score, setScore] = useState(0); const [gameSpeed, setGameSpeed] = useState("normal"); const [soundEnabled, setSoundEnabled] = useState(true); const [highScore, setHighScore] = useState(0); const [gamesPlayed, setGamesPlayed] = useState(0); const [walletBalance, setWalletBalance] = useState(1000); const [onlinePlayers, setOnlinePlayers] = useState([ "Player 1", "Player 2" ]); const [gameMode, setGameMode] = useState("classic"); const [timeRemaining, setTimeRemaining] = useState(120); const [dailyProgress, setDailyProgress] = useState(0); const [weeklyProgress, setWeeklyProgress] = useState(0); const [activeGames, setActiveGames] = useState([ { id: 1, players: 2, maxPlayers: 4 }, { id: 2, players: 1, maxPlayers: 4 } ]); const [combo, setCombo] = useState(0); const [powerUps, setPowerUps] = useState([]); const [blockSize, setBlockSize] = useState(50); const [currentTransformation, setCurrentTransformation] = useState(null); const [transformationCooldown, setTransformationCooldown] = useState(0); const [transformationLevel, setTransformationLevel] = useState({}); const [transformationXP, setTransformationXP] = useState({}); const transformations = { bird: { name: "Bird Form", icon: "dove", color: "#00ccff", ability: "Slow Fall", description: "Slows down block falling speed", cooldown: 30, cost: 300, levels: [ { xp: 0, bonus: "20% slower fall" }, { xp: 100, bonus: "40% slower fall" }, { xp: 300, bonus: "60% slower fall + Glide" } ] }, snake: { name: "Snake Form", icon: "snake", color: "#00ff9d", ability: "Perfect Slide", description: "Precise horizontal movement", cooldown: 20, cost: 400, levels: [ { xp: 0, bonus: "20% smaller blocks" }, { xp: 150, bonus: "40% smaller blocks" }, { xp: 400, bonus: "60% smaller blocks + Phase Through" } ] }, monkey: { name: "Monkey Form", icon: "paw", color: "#ff00cc", ability: "Quick Stack", description: "Rapid block placement", cooldown: 25, cost: 500, levels: [ { xp: 0, bonus: "2x combo" }, { xp: 200, bonus: "3x combo" }, { xp: 500, bonus: "4x combo + Double Jump" } ] }, dragon: { name: "Dragon Form", icon: "dragon", color: "#ff4400", ability: "Flame Burst", description: "Burn through obstacles", cooldown: 40, cost: 600, levels: [ { xp: 0, bonus: "Burn 1 block" }, { xp: 250, bonus: "Burn 2 blocks" }, { xp: 600, bonus: "Burn 3 blocks + Fire Shield" } ] }, phoenix: { name: "Phoenix Form", icon: "fire", color: "#ffaa00", ability: "Rebirth", description: "Second chance after failure", cooldown: 60, cost: 800, levels: [ { xp: 0, bonus: "1 revival" }, { xp: 300, bonus: "2 revivals" }, { xp: 800, bonus: "3 revivals + Healing Aura" } ] } }; const getTransformationLevel = (form)=>{ const xp = transformationXP[form] || 0; const levels = transformations[form].levels; for(let i = levels.length - 1; i >= 0; i--){ if (xp >= levels[i].xp) return i; } return 0; }; const handleTransformation = (form)=>{ if (transformationCooldown > 0) return; if (walletBalance >= transformations[form].cost) { setWalletBalance((prev)=>prev - transformations[form].cost); setCurrentTransformation(form); setTransformationCooldown(transformations[form].cooldown); const level = getTransformationLevel(form); applyTransformationEffects(form, level); } }; const applyTransformationEffects = (form, level)=>{ switch(form){ case "bird": setGameSpeed(level === 2 ? "very-slow" : level === 1 ? "slower" : "slow"); break; case "snake": setBlockSize((prev)=>prev * (0.8 - level * 0.2)); break; case "monkey": setCombo((prev)=>prev + (level + 2)); break; case "dragon": setPowerUps((prev)=>[ ...prev, { type: "burn", count: level + 1 } ]); break; case "phoenix": setPowerUps((prev)=>[ ...prev, { type: "revival", count: level + 1 } ]); break; default: break; } setTransformationXP((prev)=>({ ...prev, [form]: (prev[form] || 0) + 10 })); setTimeout(()=>{ resetTransformation(); }, transformations[form].cooldown * 1000); }; const resetTransformation = ()=>{ setCurrentTransformation(null); setGameSpeed("normal"); setBlockSize(50); }; useEffect(()=>{ if (transformationCooldown > 0) { const timer = setInterval(()=>{ setTransformationCooldown((prev)=>prev - 1); }, 1000); return ()=>clearInterval(timer); } }, [ transformationCooldown ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] text-white font-orbitron relative overflow-hidden", __source: { fileName: "", lineNumber: 170, columnNumber: 5 }, __self: this }, isPlaying && /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 z-50 flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, Object.entries(transformations).map(([form, data])=>/*#__PURE__*/ React.createElement("div", { key: form, className: "relative group", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTransformation(form), disabled: transformationCooldown > 0 || walletBalance < data.cost, className: `px-4 py-2 rounded-lg font-bold flex items-center gap-2 ${currentTransformation === form ? `bg-[${data.color}]/20 border border-[${data.color}]` : "bg-[#1a1a1a] border border-[#333]"} ${transformationCooldown > 0 || walletBalance < data.cost ? "opacity-50 cursor-not-allowed" : `hover:bg-[${data.color}]/30`}`, __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${data.icon}`, style: { color: data.color }, __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, data.name), transformationCooldown > 0 && /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 198, columnNumber: 19 }, __self: this }, "(", transformationCooldown, "s)")), /*#__PURE__*/ React.createElement("div", { className: "absolute top-full mt-2 right-0 w-48 bg-[#1a1a1a] rounded-lg border border-[#333] p-4 hidden group-hover:block", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm mb-2", __source: { fileName: "", lineNumber: 202, columnNumber: 17 }, __self: this }, "Level ", getTransformationLevel(form) + 1), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#333] h-2 rounded-full mb-2", __source: { fileName: "", lineNumber: 205, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full rounded-full", style: { width: `${(transformationXP[form] || 0) / 8}%`, backgroundColor: data.color }, __source: { fileName: "", lineNumber: 206, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#666]", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, data.levels[getTransformationLevel(form)].bonus)))))); } function TransformationSystemStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 228, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 229, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 230, columnNumber: 9 }, __self: this }, "Game with Transformations"), /*#__PURE__*/ React.createElement(TransformationSystem, { __source: { fileName: "", lineNumber: 231, columnNumber: 9 }, __self: this }))); } function TutorialOverlay({ onComplete }) { const [activeStep, setActiveStep] = useState(0); const [tutorialVisible, setTutorialVisible] = useState(true); const [completedSteps, setCompletedSteps] = useState(new Set()); const [highlightedElement, setHighlightedElement] = useState(null); const tutorialSteps = [ { target: "#game-modes", title: "Choose Your Mode", content: "Start with Classic mode to learn the basics", position: "right", action: "click", feedback: "Great! You've found the game modes." }, { target: "#marketplace", title: "Customize Your Game", content: "Get power-ups and custom themes", position: "bottom", action: "hover", feedback: "Perfect! These items will help you succeed." }, { target: "#profile", title: "Track Progress", content: "View your stats and achievements", position: "left", action: "click", feedback: "Excellent! Keep track of your journey here." } ]; useEffect(()=>{ const currentStep = tutorialSteps[activeStep]; if (currentStep) { const element = document.querySelector(currentStep.target); if (element) { setHighlightedElement(element); element.scrollIntoView({ behavior: "smooth", block: "center" }); const handleAction = ()=>{ setCompletedSteps((prev)=>new Set([ ...prev, activeStep ])); if (activeStep < tutorialSteps.length - 1) { setActiveStep((prev)=>prev + 1); } else { setTutorialVisible(false); if (onComplete) onComplete(); } }; if (currentStep.action === "click") { element.addEventListener("click", handleAction); } else if (currentStep.action === "hover") { element.addEventListener("mouseenter", handleAction); } return ()=>{ if (currentStep.action === "click") { element.removeEventListener("click", handleAction); } else if (currentStep.action === "hover") { element.removeEventListener("mouseenter", handleAction); } }; } } }, [ activeStep, tutorialSteps ]); const skipTutorial = ()=>{ setTutorialVisible(false); if (onComplete) onComplete(); }; const currentStep = tutorialSteps[activeStep]; const isStepCompleted = completedSteps.has(activeStep); if (!tutorialVisible) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 pointer-events-none", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/50", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }), highlightedElement && /*#__PURE__*/ React.createElement("div", { className: "absolute transition-all duration-300 ease-in-out", style: { top: highlightedElement.offsetTop - 8, left: highlightedElement.offsetLeft - 8, width: highlightedElement.offsetWidth + 16, height: highlightedElement.offsetHeight + 16, boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.75)", borderRadius: "12px", pointerEvents: "none" }, __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 border-2 border-[#00ff9d] rounded-xl animate-pulse", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-8 left-1/2 -translate-x-1/2 pointer-events-auto", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-2xl p-8 border border-[#333] shadow-[0_0_30px_rgba(0,255,157,0.2)] max-w-md w-full", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-[#00ff9d]", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Tutorial"), /*#__PURE__*/ React.createElement("button", { onClick: skipTutorial, className: "text-[#666] hover:text-white", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, currentStep.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, isStepCompleted ? currentStep.feedback : currentStep.content)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, tutorialSteps.map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-2 h-2 rounded-full transition-colors ${completedSteps.has(index) ? "bg-[#00ff9d]" : index === activeStep ? "bg-[#666]" : "bg-[#333]"}`, __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: skipTutorial, className: "px-6 py-2 bg-[#00ff9d]/20 border border-[#00ff9d] rounded-lg font-bold hover:bg-[#00ff9d]/30", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "Skip Tutorial"))))); } function TutorialOverlayStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 149, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, "Interactive Tutorial Overlay"), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(TutorialOverlay, { onComplete: ()=>console.log("Tutorial completed"), __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "game-modes", className: "p-4 bg-gray-800 rounded", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, "Game Modes Section"), /*#__PURE__*/ React.createElement("div", { id: "marketplace", className: "p-4 bg-gray-800 rounded", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, "Marketplace Section"), /*#__PURE__*/ React.createElement("div", { id: "profile", className: "p-4 bg-gray-800 rounded", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, "Profile Section")))); } function ChatPanel() { const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [showEmoteMenu, setShowEmoteMenu] = useState(false); const [showGiftMenu, setShowGiftMenu] = useState(false); const [showUserList, setShowUserList] = useState(false); const onlineUsers = [ { id: 1, name: "BlockMaster", status: "playing", avatar: "🎮" }, { id: 2, name: "StackPro", status: "online", avatar: "🏆" }, { id: 3, name: "CubeKing", status: "away", avatar: "👑" } ]; const stickers = [ { id: 1, emoji: "😊", name: "smile", price: 0 }, { id: 2, emoji: "❤️", name: "heart", price: 0 }, { id: 3, emoji: "😂", name: "laugh", price: 0 }, { id: 4, emoji: "👍", name: "thumbs-up", price: 0 }, { id: 5, emoji: "🎮", name: "game", price: 50 }, { id: 6, emoji: "🏆", name: "trophy", price: 100 }, { id: 7, emoji: "🌟", name: "star", price: 150 }, { id: 8, emoji: "🚀", name: "rocket", price: 200 } ]; const gifts = [ { id: 1, name: "Super Block", icon: "🎁", price: 100, effect: "sparkle" }, { id: 2, name: "Rainbow Trail", icon: "🌈", price: 200, effect: "rainbow" }, { id: 3, name: "Power Boost", icon: "⚡", price: 300, effect: "shake" }, { id: 4, name: "Crystal Crown", icon: "👑", price: 500, effect: "glow" }, { id: 5, name: "Lucky Charm", icon: "🍀", price: 400, effect: "bounce" } ]; const reactions = [ "👍", "❤️", "🎮", "🏆", "⭐" ]; const sendMessage = (content, type = "text")=>{ const newMsg = { id: Date.now(), content, type, sender: "You", timestamp: new Date().toLocaleTimeString(), reactions: {} }; setMessages((prev)=>[ ...prev, newMsg ]); setNewMessage(""); setShowEmoteMenu(false); setShowGiftMenu(false); }; const addReaction = (messageId, reaction)=>{ setMessages((prev)=>prev.map((msg)=>msg.id === messageId ? { ...msg, reactions: { ...msg.reactions, [reaction]: (msg.reactions[reaction] || 0) + 1 } } : msg)); }; return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 w-[360px] bg-[#1a1a1a] rounded-2xl border border-[#333] shadow-[0_0_30px_rgba(0,255,157,0.2)] overflow-hidden", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 border-b border-[#333]", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#00ff9d] font-bold", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Chat"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowUserList(!showUserList), className: `text-[#666] hover:text-[#00ff9d] ${showUserList ? "text-[#00ff9d]" : ""}`, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#666] hover:text-[#00ff9d]", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-[400px] ${showUserList ? "w-2/3" : "w-full"} overflow-y-auto p-4 space-y-4 transition-all duration-300`, __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, messages.map((msg)=>/*#__PURE__*/ React.createElement("div", { key: msg.id, className: `flex flex-col ${msg.sender === "You" ? "items-end" : "items-start"}`, __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] ${msg.sender === "You" ? "bg-[#00ff9d]/20" : "bg-[#2a2a2a]"} rounded-lg p-3 ${msg.type === "gift" ? `animate-${msg.content.effect}` : ""}`, __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, msg.type === "sticker" ? /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, msg.content) : msg.type === "gift" ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 99, columnNumber: 21 }, __self: this }, msg.content.icon), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 100, columnNumber: 21 }, __self: this }, "Sent ", msg.content.name)) : /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, msg.content), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#666] mt-1", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, msg.timestamp)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-1 mt-1", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, Object.entries(msg.reactions).map(([reaction, count])=>/*#__PURE__*/ React.createElement("div", { key: reaction, className: "bg-[#2a2a2a] px-2 py-1 rounded-full text-xs", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }, reaction, " ", count)), /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#666] hover:text-[#00ff9d] text-xs px-2 py-1", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-smile", __source: { fileName: "", lineNumber: 120, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-full left-0 mb-2 bg-[#2a2a2a] p-2 rounded-lg border border-[#333] hidden group-hover:flex gap-1", __source: { fileName: "", lineNumber: 122, columnNumber: 19 }, __self: this }, reactions.map((reaction)=>/*#__PURE__*/ React.createElement("button", { key: reaction, onClick: ()=>addReaction(msg.id, reaction), className: "hover:bg-[#333] p-1 rounded", __source: { fileName: "", lineNumber: 124, columnNumber: 23 }, __self: this }, reaction)))))))), showUserList && /*#__PURE__*/ React.createElement("div", { className: "w-1/3 h-[400px] border-l border-[#333] p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-bold mb-4 text-[#00ff9d]", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "Online Users"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, onlineUsers.map((user)=>/*#__PURE__*/ React.createElement("div", { key: user.id, className: "flex items-center gap-2 hover:bg-[#2a2a2a] p-2 rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 150, columnNumber: 19 }, __self: this }, user.avatar), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-bold", __source: { fileName: "", lineNumber: 152, columnNumber: 21 }, __self: this }, user.name), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#666]", __source: { fileName: "", lineNumber: 153, columnNumber: 21 }, __self: this }, user.status))))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-[#333]", __source: { fileName: "", lineNumber: 162, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-2", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowEmoteMenu(!showEmoteMenu), className: `text-[#666] hover:text-[#00ff9d] ${showEmoteMenu ? "text-[#00ff9d]" : ""}`, __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-smile", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowGiftMenu(!showGiftMenu), className: `text-[#666] hover:text-[#00ff9d] ${showGiftMenu ? "text-[#00ff9d]" : ""}`, __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-gift", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }))), showEmoteMenu && /*#__PURE__*/ React.createElement("div", { className: "mb-2 bg-[#2a2a2a] p-2 rounded-lg border border-[#333] grid grid-cols-4 gap-2", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, stickers.map((sticker)=>/*#__PURE__*/ React.createElement("button", { key: sticker.id, onClick: ()=>sendMessage(sticker.emoji, "sticker"), className: "relative group text-2xl hover:bg-[#333] p-2 rounded", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, sticker.emoji, sticker.price > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-1 bg-[#00ff9d] text-[#1a1a1a] text-xs px-1 rounded-full", __source: { fileName: "", lineNumber: 188, columnNumber: 19 }, __self: this }, sticker.price)))), showGiftMenu && /*#__PURE__*/ React.createElement("div", { className: "mb-2 bg-[#2a2a2a] p-2 rounded-lg border border-[#333] space-y-2", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, gifts.map((gift)=>/*#__PURE__*/ React.createElement("button", { key: gift.id, onClick: ()=>sendMessage(gift, "gift"), className: "w-full flex items-center gap-2 hover:bg-[#333] p-2 rounded", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 205, columnNumber: 17 }, __self: this }, gift.icon), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 206, columnNumber: 17 }, __self: this }, gift.name), /*#__PURE__*/ React.createElement("span", { className: "text-[#00ff9d] ml-auto", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, gift.price)))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 213, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: "Type a message...", className: "flex-1 bg-[#2a2a2a] border border-[#333] rounded-lg px-4 py-2 text-white focus:outline-none focus:border-[#00ff9d]", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>sendMessage(newMessage), disabled: !newMessage.trim(), className: "px-4 py-2 bg-[#00ff9d]/20 border border-[#00ff9d] rounded-lg font-bold hover:bg-[#00ff9d]/30 disabled:opacity-50", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 231, columnNumber: 7 }, __self: this }, ` @keyframes sparkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes rainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } } @keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } `)); } function ChatPanelStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] p-4", __source: { fileName: "", lineNumber: 260, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatPanel, { __source: { fileName: "", lineNumber: 261, columnNumber: 7 }, __self: this })); } function ShopItem({ imageSrc = "/item-placeholder.png", imageAlt = "Product image", name = "Item name", description = "Item description", price = 0, onBuy = ()=>{}, inStock = true, discountPercent = 0, currency = "COINS" }) { const formattedPrice = new Intl.NumberFormat().format(price); const discountedPrice = discountPercent > 0 ? price * (1 - discountPercent / 100) : price; const formattedDiscountPrice = new Intl.NumberFormat().format(discountedPrice); return /*#__PURE__*/ React.createElement("div", { className: "inline-block w-[300px] bg-[#1a1a1a] rounded-2xl border border-[#333] shadow-[0_0_30px_rgba(0,255,157,0.2)] overflow-hidden hover:border-[#00ff9d] transition-colors", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-[200px] overflow-hidden", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: imageAlt, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), discountPercent > 0 && /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 bg-[#ff00cc] text-white px-2 py-1 rounded-lg font-bold", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "-", discountPercent, "%")), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] text-sm mb-4 h-[40px] overflow-hidden", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, discountPercent > 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#ff00cc] font-bold", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, formattedDiscountPrice, " ", currency), /*#__PURE__*/ React.createElement("span", { className: "text-[#666] line-through text-sm", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, formattedPrice, " ", currency)) : /*#__PURE__*/ React.createElement("span", { className: "text-[#00ff9d] font-bold", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, formattedPrice, " ", currency)), /*#__PURE__*/ React.createElement("button", { onClick: onBuy, disabled: !inStock, className: `px-4 py-2 rounded-lg font-bold transition-colors ${inStock ? "bg-[#00ff9d]/20 border border-[#00ff9d] hover:bg-[#00ff9d]/30 text-white" : "bg-[#666]/20 border border-[#666] text-[#666] cursor-not-allowed"}`, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, inStock ? "Buy Now" : "Out of Stock")))); } function ShopItemStory() { const items = [ { imageSrc: "/power-boost.png", imageAlt: "Power boost item showing a glowing energy orb", name: "Power Boost", description: "Increases your block stacking speed by 50% for 30 seconds", price: 1000, inStock: true, discountPercent: 20 }, { imageSrc: "/perfect-placement.png", imageAlt: "Perfect placement power-up showing a target symbol", name: "Perfect Placement", description: "Your next 3 blocks will automatically stack perfectly", price: 2500, inStock: true }, { imageSrc: "/golden-block.png", imageAlt: "Golden block skin showing a shimmering block", name: "Golden Block Skin", description: "Make your blocks shine with this exclusive golden skin", price: 5000, inStock: false } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#0a0a0a] p-8 min-h-screen", __source: { fileName: "", lineNumber: 106, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-6 justify-center", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement(ShopItem, { key: index, ...item, onBuy: ()=>alert(`Buying ${item.name}`), __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this })))); } function TowerDefense({ initialGold = 100, initialLives = 10, initialWave = 1, towerTypes = [ { id: 1, name: "Basic", cost: 50, damage: 10, range: 100, color: "#00ff9d", upgrades: [ { name: "Faster Attack", cost: 30, damageMod: 1.2, rangeMod: 1 }, { name: "Extended Range", cost: 40, damageMod: 1, rangeMod: 1.3 } ] }, { id: 2, name: "Sniper", cost: 100, damage: 25, range: 200, color: "#00ccff", upgrades: [ { name: "Critical Hit", cost: 75, damageMod: 1.5, rangeMod: 1 }, { name: "Eagle Eye", cost: 60, damageMod: 1.2, rangeMod: 1.4 } ] }, { id: 3, name: "Splash", cost: 150, damage: 15, range: 75, color: "#ff00cc", upgrades: [ { name: "Bigger Splash", cost: 80, damageMod: 1.3, rangeMod: 1.2 }, { name: "Chain React", cost: 100, damageMod: 1.4, rangeMod: 1.1 } ] }, { id: 4, name: "Tesla", cost: 200, damage: 20, range: 120, color: "#ffcc00", upgrades: [ { name: "Chain Lightning", cost: 150, damageMod: 1.3, rangeMod: 1.2 }, { name: "Overcharge", cost: 200, damageMod: 1.6, rangeMod: 1 } ] }, { id: 5, name: "Frost", cost: 175, damage: 8, range: 90, color: "#00ffff", upgrades: [ { name: "Deep Freeze", cost: 100, damageMod: 1.2, rangeMod: 1.1 }, { name: "Arctic Storm", cost: 125, damageMod: 1.3, rangeMod: 1.3 } ] } ] }) { const [gold, setGold] = useState(initialGold); const [lives, setLives] = useState(initialLives); const [wave, setWave] = useState(initialWave); const [towers, setTowers] = useState([]); const [enemies, setEnemies] = useState([]); const [selectedTower, setSelectedTower] = useState(null); const [selectedPlacedTower, setSelectedPlacedTower] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const addTower = (position, towerType)=>{ if (gold >= towerType.cost) { setTowers([ ...towers, { ...towerType, position, level: 1, upgrades: [] } ]); setGold(gold - towerType.cost); } }; const upgradeTower = (towerId, upgradeIndex)=>{ const tower = towers[towerId]; const upgrade = tower.upgrades[upgradeIndex]; if (gold >= upgrade.cost) { const newTowers = [ ...towers ]; newTowers[towerId] = { ...tower, damage: tower.damage * upgrade.damageMod, range: tower.range * upgrade.rangeMod, level: tower.level + 1, upgrades: [ ...tower.upgrades, upgradeIndex ] }; setTowers(newTowers); setGold(gold - upgrade.cost); } }; const startWave = ()=>{ setIsPlaying(true); }; const sellTower = (towerId)=>{ const tower = towers[towerId]; const refund = Math.floor(tower.cost * 0.7); const newTowers = towers.filter((_, index)=>index !== towerId); setTowers(newTowers); setGold(gold + refund); setSelectedPlacedTower(null); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] text-white font-orbitron", __source: { fileName: "", lineNumber: 118, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto p-4", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-8", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-4 rounded-lg border border-[#333]", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "Gold"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#00ff9d]", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, gold)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-4 rounded-lg border border-[#333]", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "Lives"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#ff00cc]", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, lives)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-4 rounded-lg border border-[#333]", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, "Wave"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#00ccff]", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, wave))), /*#__PURE__*/ React.createElement("button", { onClick: startWave, className: "px-6 py-3 bg-[#00ff9d]/20 border border-[#00ff9d] rounded-lg text-lg font-bold hover:bg-[#00ff9d]/30", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, isPlaying ? "Wave in Progress" : "Start Wave")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-1 space-y-4", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-2xl p-6 border border-[#333]", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, "Available Towers"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, towerTypes.map((tower)=>/*#__PURE__*/ React.createElement("button", { key: tower.id, onClick: ()=>setSelectedTower(tower), className: `w-full p-4 rounded-lg border ${selectedTower?.id === tower.id ? `border-[${tower.color}]` : "border-[#333]"} hover:border-[${tower.color}]`, __source: { fileName: "", lineNumber: 149, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 158, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 159, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 160, columnNumber: 25 }, __self: this }, tower.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 161, columnNumber: 25 }, __self: this }, tower.cost, " Gold")), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full", style: { backgroundColor: tower.color }, __source: { fileName: "", lineNumber: 165, columnNumber: 23 }, __self: this })))))), selectedPlacedTower !== null && /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-2xl p-6 border border-[#333]", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, "Tower Details"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 180, columnNumber: 21 }, __self: this }, "Level"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 181, columnNumber: 21 }, __self: this }, towers[selectedPlacedTower].level)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 183, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 184, columnNumber: 21 }, __self: this }, "Damage"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 185, columnNumber: 21 }, __self: this }, Math.round(towers[selectedPlacedTower].damage))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 188, columnNumber: 21 }, __self: this }, "Range"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 189, columnNumber: 21 }, __self: this }, Math.round(towers[selectedPlacedTower].range))), towerTypes[towers[selectedPlacedTower].id - 1].upgrades.map((upgrade, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>upgradeTower(selectedPlacedTower, index), disabled: gold < upgrade.cost || towers[selectedPlacedTower].upgrades.includes(index), className: `w-full p-4 rounded-lg border ${gold >= upgrade.cost ? "border-[#00ff9d] hover:bg-[#00ff9d]/10" : "border-[#333] opacity-50"}`, __source: { fileName: "", lineNumber: 193, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 206, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 207, columnNumber: 27 }, __self: this }, upgrade.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 208, columnNumber: 27 }, __self: this }, upgrade.cost, " Gold")))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>sellTower(selectedPlacedTower), className: "w-full p-4 rounded-lg border border-[#ff00cc] hover:bg-[#ff00cc]/10", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 219, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 220, columnNumber: 23 }, __self: this }, "Sell Tower"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 221, columnNumber: 23 }, __self: this }, Math.floor(towers[selectedPlacedTower].cost * 0.7), " ", "Gold")))))), /*#__PURE__*/ React.createElement("div", { className: "col-span-3", __source: { fileName: "", lineNumber: 232, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-2xl p-6 border border-[#333] h-[600px] relative", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, towers.map((tower, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>setSelectedPlacedTower(index), className: `absolute w-8 h-8 rounded-full cursor-pointer ${selectedPlacedTower === index ? "ring-2 ring-white" : ""}`, style: { backgroundColor: tower.color, left: tower.position.x, top: tower.position.y }, __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-[50%] rounded-full border border-dashed opacity-25", style: { borderColor: tower.color }, __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute -top-5 left-1/2 -translate-x-1/2 text-sm font-bold", __source: { fileName: "", lineNumber: 251, columnNumber: 19 }, __self: this }, tower.level))), enemies.map((enemy, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "absolute w-6 h-6 bg-red-500 rounded-full", style: { left: enemy.position.x, top: enemy.position.y }, __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }))))))); } function TowerDefenseStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 276, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 277, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 278, columnNumber: 9 }, __self: this }, "Default Tower Defense"), /*#__PURE__*/ React.createElement(TowerDefense, { __source: { fileName: "", lineNumber: 279, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 282, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 283, columnNumber: 9 }, __self: this }, "Hard Mode"), /*#__PURE__*/ React.createElement(TowerDefense, { initialGold: 50, initialLives: 5, initialWave: 5, __source: { fileName: "", lineNumber: 284, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [selectedCategory, setSelectedCategory] = useState("power-ups"); const [walletBalance, setWalletBalance] = useState(1000); const [inventory, setInventory] = useState([]); const [notification, setNotification] = useState(null); const categories = { "power-ups": [ { id: 1, name: "Time Freeze", price: 100, description: "Slows down block falling speed for 30 seconds", icon: "clock", color: "#00ff9d" }, { id: 2, name: "Perfect Stack", price: 200, description: "Automatically stacks the next block perfectly", icon: "magic", color: "#00ccff" }, { id: 3, name: "Score Multiplier", price: 300, description: "2x points for the next 10 blocks", icon: "star", color: "#ff00cc" }, { id: 10, name: "Shield", price: 250, description: "Protects against one misplaced block", icon: "shield-alt", color: "#00ff9d" } ], themes: [ { id: 4, name: "Neon Dream", price: 500, description: "Vibrant neon colors with glow effects", icon: "paint-brush", color: "#00ff9d" }, { id: 5, name: "Cyberpunk", price: 500, description: "Futuristic design with digital effects", icon: "microchip", color: "#00ccff" }, { id: 6, name: "Minimal", price: 400, description: "Clean, minimalist design", icon: "minus", color: "#ff00cc" }, { id: 11, name: "Retro Wave", price: 600, description: "80s inspired aesthetic with sunset colors", icon: "sun", color: "#ff00cc" } ], special: [ { id: 7, name: "Golden Block", price: 1000, description: "Rare collectible block with special effects", icon: "gem", color: "#00ff9d" }, { id: 8, name: "Custom Trail", price: 800, description: "Unique particle effects for your blocks", icon: "fire", color: "#00ccff" }, { id: 9, name: "Victory Dance", price: 600, description: "Special animation when you win", icon: "music", color: "#ff00cc" }, { id: 12, name: "Rainbow Aura", price: 1200, description: "Color-changing aura around your blocks", icon: "rainbow", color: "#00ff9d" } ], emotes: [ { id: 13, name: "GG", price: 100, description: "Show good sportsmanship", icon: "thumbs-up", color: "#00ff9d" }, { id: 14, name: "Wow!", price: 150, description: "Express amazement", icon: "surprise", color: "#00ccff" }, { id: 15, name: "Nice Try", price: 100, description: "Encourage other players", icon: "heart", color: "#ff00cc" } ], backgrounds: [ { id: 16, name: "Space Station", price: 700, description: "Play among the stars", icon: "space-shuttle", color: "#00ff9d" }, { id: 17, name: "City Lights", price: 600, description: "Urban nightscape background", icon: "city", color: "#00ccff" }, { id: 18, name: "Digital Grid", price: 500, description: "Matrix-style backdrop", icon: "th", color: "#ff00cc" } ], titles: [ { id: 19, name: "Block Master", price: 1000, description: "Show off your stacking expertise", icon: "crown", color: "#00ff9d" }, { id: 20, name: "Speed Demon", price: 800, description: "For the fastest stackers", icon: "bolt", color: "#00ccff" }, { id: 21, name: "Legend", price: 2000, description: "The most prestigious title", icon: "star", color: "#ff00cc" } ], pets: [ { id: 22, name: "Cyber Cat", price: 1500, description: "A digital companion for your stacking journey", icon: "cat", color: "#00ff9d" }, { id: 23, name: "Robo Dog", price: 1500, description: "Loyal mechanical friend", icon: "dog", color: "#00ccff" }, { id: 24, name: "Pixel Dragon", price: 2000, description: "Rare mythical companion", icon: "dragon", color: "#ff00cc" } ] }; const purchaseItem = (item)=>{ if (walletBalance >= item.price) { setWalletBalance((prev)=>prev - item.price); setInventory((prev)=>[ ...prev, { ...item, purchaseDate: new Date() } ]); setNotification(`Successfully purchased ${item.name}!`); setTimeout(()=>setNotification(null), 3000); } }; const isItemOwned = (itemId)=>{ return inventory.some((item)=>item.id === itemId); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] text-white font-orbitron p-4", __source: { fileName: "", lineNumber: 230, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 231, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 232, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#00ff9d]", __source: { fileName: "", lineNumber: 233, columnNumber: 11 }, __self: this }, "Marketplace"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-4 rounded-lg border border-[#333]", __source: { fileName: "", lineNumber: 234, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, "Wallet Balance"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#00ff9d]", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, walletBalance, " COINS"))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-8", __source: { fileName: "", lineNumber: 241, columnNumber: 9 }, __self: this }, Object.keys(categories).map((category)=>/*#__PURE__*/ React.createElement("button", { key: category, onClick: ()=>setSelectedCategory(category), className: `px-6 py-3 rounded-lg text-lg font-bold capitalize ${selectedCategory === category ? "bg-[#00ff9d]/20 border border-[#00ff9d]" : "bg-[#1a1a1a] border border-[#333] hover:border-[#00ff9d]"}`, __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, category))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 258, columnNumber: 9 }, __self: this }, categories[selectedCategory].map((item)=>{ const owned = isItemOwned(item.id); return /*#__PURE__*/ React.createElement("div", { key: item.id, className: "bg-[#1a1a1a] rounded-2xl p-6 border border-[#333] hover:border-[item.color] transition-colors", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 266, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 267, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold", style: { color: item.color }, __source: { fileName: "", lineNumber: 268, columnNumber: 21 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] mt-2", __source: { fileName: "", lineNumber: 274, columnNumber: 21 }, __self: this }, item.description)), /*#__PURE__*/ React.createElement("i", { className: `fas fa-${item.icon} text-3xl`, style: { color: item.color }, __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-6", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold text-[#00ff9d]", __source: { fileName: "", lineNumber: 282, columnNumber: 19 }, __self: this }, item.price, " COINS"), owned ? /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 bg-[#00ff9d]/10 border border-[#00ff9d] rounded-lg font-bold text-[#00ff9d]", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }, "Owned") : /*#__PURE__*/ React.createElement("button", { onClick: ()=>purchaseItem(item), disabled: walletBalance < item.price, className: `px-4 py-2 rounded-lg font-bold ${walletBalance >= item.price ? "bg-[#00ff9d]/20 border border-[#00ff9d] hover:bg-[#00ff9d]/30" : "bg-[#333]/20 border border-[#333] cursor-not-allowed"}`, __source: { fileName: "", lineNumber: 290, columnNumber: 21 }, __self: this }, "Purchase"))); })), notification && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-[#1a1a1a] p-4 rounded-lg border border-[#00ff9d] shadow-lg", __source: { fileName: "", lineNumber: 310, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 311, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-[#00ff9d]", __source: { fileName: "", lineNumber: 312, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 313, columnNumber: 15 }, __self: this }, notification))))); }