[{"_1":2,"_127":-5,"_128":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_55":56,"_57":58,"_59":60,"_61":62,"_63":58,"_64":41,"_65":41,"_66":58,"_67":58,"_68":58,"_69":17,"_70":17,"_71":-5,"_72":73,"_74":75,"_76":77,"_86":-5,"_87":-5,"_88":17,"_89":90,"_123":31,"_124":125,"_126":17},"id","a4da9401383449b2f58d","isMyApp",false,"name","cryptomystic","description","Crack open ancient mystery books using $MYST tokens and watch legendary NFT cards burst forth in spectacular animations! Every book opening is a heart-pounding gamble where you might pull a common artifact or strike it rich with a 500+ token Jackpot treasure. Trade your mystical card collection on the built-in marketplace and become the ultimate crypto archaeologist!","brief","Open magical books with crypto tokens, collect rare NFT cards, trade for profit!","isLive",true,"isPublic","tags",[29],"👑","cover","https://cdn.dev.fun/snapshot/a4da9401383449b2f58d/92339_f394bc8d.webp","cdnUrl","https://cdn.dev.fun/app/a4da9401383449b2f58d/92339","createdAt",["D",1753864152631],"updatedAt",["D",1753948473401],"lastCommitId",["B","92339"],"tier",1,"credits",111,{"_14":45,"_46":47,"_48":-5,"_49":47,"_50":51,"_52":-5,"_53":54},"e33757f7-ba77-47e7-8ba8-b52a47253c75","uniqueId","FbirCYiRfy64Bfp8WuMfyx57ifevXWWjWgohnzgCv8gK","username","solanaWallet","displayName","Fbi...8gK","bio","avatar","/avatar.svg","commitCount",112,"forkCount",0,"likeCount",4,"runsCount",89,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect } from 'react';\nimport { useDevapp, UserButton, DevappProvider } from '@devfunlabs/web-sdk';\nimport { Zap, TrendingUp, Package, Trophy, Coins, Sparkles, Crown, Star, X, ChevronLeft, ChevronRight, Gift, User, ShoppingBag, Swords } from 'lucide-react';\nexport default function AppWithProvider() {\n return \n \n ;\n}\nfunction App() {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [currentPage, setCurrentPage] = useState('home');\n const [isOpening, setIsOpening] = useState(false);\n const [lastCard, setLastCard] = useState(null);\n const [myCards, setMyCards] = useState([]);\n const [marketplaceCards, setMarketplaceCards] = useState([]);\n const [stats, setStats] = useState({\n totalOpened: 0,\n totalProfit: 0\n });\n const [showCardReveal, setShowCardReveal] = useState(false);\n const [showListingModal, setShowListingModal] = useState(false);\n const [cardToList, setCardToList] = useState(null);\n const [listingForm, setListingForm] = useState({\n price: '',\n duration: '7'\n });\n const [currentPageNum, setCurrentPageNum] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n const [collectionPageNum, setCollectionPageNum] = useState(1);\n const [collectionTotalPages, setCollectionTotalPages] = useState(1);\n const [userBalance, setUserBalance] = useState(0);\n const [isClaimingAirdrop, setIsClaimingAirdrop] = useState(false);\n const [shopCards, setShopCards] = useState([]);\n const [isBuyingCard, setIsBuyingCard] = useState(false);\n const [showShopConfirmModal, setShowShopConfirmModal] = useState(false);\n const [showShopSuccessModal, setShowShopSuccessModal] = useState(false);\n const [cardToBuy, setCardToBuy] = useState(null);\n const [purchaseQuantity, setPurchaseQuantity] = useState(1);\n const [isWithdrawing, setIsWithdrawing] = useState(false);\n const [currentDeck, setCurrentDeck] = useState([]);\n const [aiDeck, setAiDeck] = useState([]);\n const [, setSelectedCards] = useState([]);\n const [, setIsInBattle] = useState(false);\n const [battleState, setBattleState] = useState(null);\n const [playerSelectedCard, setPlayerSelectedCard] = useState(null);\n const [aiSelectedCard, setAiSelectedCard] = useState(null);\n const [battleResults, setBattleResults] = useState([]);\n const [currentRound, setCurrentRound] = useState(1);\n const [isBattling, setIsBattling] = useState(false);\n const [showRoundResult, setShowRoundResult] = useState(false);\n const [roundWinner, setRoundWinner] = useState(null);\n const [gamePhase, setGamePhase] = useState('deck-building');\n const [showRoundInfo, setShowRoundInfo] = useState(false);\n const [avatarsInTitle, setAvatarsInTitle] = useState(false);\n const [timeLeft, setTimeLeft] = useState(30);\n const [isTimerActive, setIsTimerActive] = useState(false);\n const cardsPerPage = 16;\n const cardTypes = {\n common: {\n name: 'Common Card',\n color: 'from-amber-600 to-amber-800',\n icon: Package,\n emoji: '🟤',\n basePrice: [2, 3, 4, 5]\n },\n rare: {\n name: 'Rare Card',\n color: 'from-blue-500 to-blue-700',\n icon: Star,\n emoji: '🔵',\n basePrice: [8, 10, 12, 15]\n },\n epic: {\n name: 'Epic Card',\n color: 'from-purple-500 to-purple-700',\n icon: Zap,\n emoji: '🟣',\n basePrice: [20, 25, 30, 40]\n },\n legendary: {\n name: 'Legendary Card',\n color: 'from-yellow-400 to-yellow-600',\n icon: Crown,\n emoji: '🟡',\n basePrice: [80, 100, 120, 140]\n },\n jackpot: {\n name: 'Jackpot Card',\n color: 'from-red-500 to-red-700',\n icon: Trophy,\n emoji: '🔴',\n basePrice: [500, 600, 750, 1000]\n }\n };\n useEffect(() => {\n if (userWallet) {\n loadMyCards();\n loadMarketplace(1);\n loadStats();\n loadUserBalance();\n generateShopCards();\n }\n }, [userWallet]);\n useEffect(() => {\n let interval = null;\n if (isTimerActive && timeLeft > 0 && gamePhase === 'battle' && !showRoundResult && !isBattling) {\n interval = setInterval(() => {\n setTimeLeft(time => time - 1);\n }, 1000);\n } else if (timeLeft === 0 && isTimerActive && !playerSelectedCard && !isBattling) {\n const availableCards = currentDeck.filter(card => !battleResults.some(result => result.playerCard?.id === card.id));\n if (availableCards.length > 0) {\n const randomCard = availableCards[Math.floor(Math.random() * availableCards.length)];\n setPlayerSelectedCard(randomCard);\n setIsTimerActive(false);\n setTimeout(() => {\n if (!isBattling) {\n playRound();\n }\n }, 1000);\n }\n } else if (interval) {\n clearInterval(interval);\n }\n return () => clearInterval(interval);\n }, [isTimerActive, timeLeft, gamePhase, showRoundResult, isBattling, playerSelectedCard, currentDeck, battleResults]);\n const loadMyCards = async (page = 1) => {\n try {\n const allCards = await devbaseClient.listEntities('cards', {\n owner: userWallet\n });\n const sortedCards = sortCardsByRarity(allCards);\n const total = Math.ceil(sortedCards.length / cardsPerPage);\n setCollectionTotalPages(total);\n const startIndex = (page - 1) * cardsPerPage;\n const endIndex = startIndex + cardsPerPage;\n const paginatedCards = sortedCards.slice(startIndex, endIndex);\n setMyCards(paginatedCards);\n setCollectionPageNum(page);\n } catch (error) {\n console.error('Error loading cards:', error);\n }\n };\n const sortCardsByRarity = cards => {\n const rarityOrder = {\n 'jackpot': 0,\n 'legendary': 1,\n 'epic': 2,\n 'rare': 3,\n 'common': 4\n };\n return [...cards].sort((a, b) => {\n const aRarity = rarityOrder[a.rarity] ?? 999;\n const bRarity = rarityOrder[b.rarity] ?? 999;\n return aRarity - bRarity;\n });\n };\n const loadMarketplace = async (page = 1) => {\n try {\n const allListings = await devbaseClient.listEntities('marketplace_listings');\n const validListings = allListings.filter(listing => !listing.expiresAt || listing.expiresAt > Date.now());\n const total = Math.ceil(validListings.length / cardsPerPage);\n setTotalPages(total);\n const startIndex = (page - 1) * cardsPerPage;\n const endIndex = startIndex + cardsPerPage;\n const paginatedListings = validListings.slice(startIndex, endIndex);\n setMarketplaceCards(paginatedListings);\n setCurrentPageNum(page);\n } catch (error) {\n console.error('Error loading marketplace:', error);\n }\n };\n const loadStats = async () => {\n try {\n const games = await devbaseClient.listEntities('games', {\n userId: userWallet\n });\n const totalProfit = games.reduce((sum, game) => sum + (game.cardValue - 1), 0);\n setStats({\n totalOpened: games.length,\n totalProfit\n });\n } catch (error) {\n console.error('Error loading stats:', error);\n }\n };\n const loadUserBalance = async () => {\n if (!userWallet) return;\n try {\n const balance = await devbaseClient.evalString(`$FUNC_GET_USER_BALANCE(\"${userWallet}\")`);\n setUserBalance(parseFloat(balance) || 0);\n } catch (error) {\n console.error('Error loading user balance:', error);\n setUserBalance(0);\n }\n };\n const generateShopCards = () => {\n const shopCardList = [];\n Object.entries(cardTypes).forEach(([rarity, type]) => {\n const basePrice = type.basePrice[0];\n const shopPrice = basePrice * 2;\n shopCardList.push({\n id: `shop-${rarity}`,\n rarity,\n name: `${type.name} (Shop)`,\n description: `Buy directly from shop - ${type.name}`,\n price: shopPrice,\n shopItem: true\n });\n });\n setShopCards(shopCardList);\n };\n const claimAirdrop = async () => {\n if (!userWallet) return;\n setIsClaimingAirdrop(true);\n try {\n await devbaseClient.createEntity('airdrops', {\n userId: userWallet\n });\n await devbaseClient.createEntity('balance_ledgers', {\n userId: userWallet,\n amount: 10000,\n source: 'airdrop'\n });\n await loadUserBalance();\n alert('Successfully claimed 10,000 $MYST!');\n } catch (error) {\n console.error('Error claiming airdrop:', error);\n alert('Failed to claim airdrop. Please try again.');\n } finally {\n setIsClaimingAirdrop(false);\n }\n };\n const openBox = async () => {\n if (!userWallet) return;\n setIsOpening(true);\n try {\n const game = await devbaseClient.createEntity('games', {\n userId: userWallet\n });\n const card = await devbaseClient.createEntity('cards', {\n gameId: game.id,\n owner: userWallet\n });\n setLastCard({\n ...card,\n ...game\n });\n setShowCardReveal(true);\n setTimeout(() => {\n setShowCardReveal(false);\n loadMyCards();\n loadStats();\n }, 8000);\n } catch (error) {\n console.error('Error opening box:', error);\n alert('Failed to open box. Please try again.');\n } finally {\n setIsOpening(false);\n }\n };\n const listCard = async (cardId, price, duration) => {\n try {\n const expiresAt = Date.now() + parseInt(duration) * 24 * 60 * 60 * 1000;\n await devbaseClient.createEntity('marketplace_listings', {\n cardId,\n price: parseFloat(price),\n seller: userWallet,\n expiresAt\n });\n loadMyCards();\n loadMarketplace();\n setShowListingModal(false);\n setCardToList(null);\n setListingForm({\n price: '',\n duration: '7'\n });\n } catch (error) {\n console.error('Error listing card:', error);\n alert('Failed to list card');\n }\n };\n const buyCard = async listingId => {\n try {\n const listing = marketplaceCards.find(l => l.id === listingId);\n if (!listing) throw new Error(\"Listing not found\");\n await devbaseClient.createEntity('myst_purchases', {\n listingId,\n buyer: userWallet\n });\n await devbaseClient.createEntity('balance_ledgers', {\n userId: userWallet,\n amount: -listing.price,\n source: 'marketplace_purchase'\n });\n await devbaseClient.createEntity('balance_ledgers', {\n userId: listing.seller,\n amount: listing.price,\n source: 'marketplace_sale'\n });\n await devbaseClient.updateEntity('cards', listing.cardId, {\n owner: userWallet\n });\n await devbaseClient.deleteEntity('marketplace_listings', listingId);\n alert('Card purchased successfully!');\n loadMyCards();\n loadMarketplace();\n loadUserBalance();\n } catch (error) {\n console.error('Error buying card:', error);\n alert(`Failed to buy card. ${error.message}`);\n }\n };\n const showShopConfirmation = async (rarity, price) => {\n await loadUserBalance();\n setCardToBuy({\n rarity,\n price\n });\n setPurchaseQuantity(1);\n setShowShopConfirmModal(true);\n };\n const confirmShopPurchase = async () => {\n if (!cardToBuy) return;\n setIsBuyingCard(true);\n setShowShopConfirmModal(false);\n const totalPrice = cardToBuy.price * purchaseQuantity;\n console.log('Starting shop purchase with data:', {\n rarity: cardToBuy.rarity,\n price: cardToBuy.price,\n quantity: purchaseQuantity,\n totalPrice: totalPrice,\n buyer: userWallet,\n userBalance: userBalance\n });\n try {\n console.log('Step 1: Creating shop_purchases entity...');\n const shopPurchase = await devbaseClient.createEntity('shop_purchases', {\n rarity: cardToBuy.rarity,\n price: totalPrice,\n quantity: purchaseQuantity,\n buyer: userWallet\n });\n console.log('✓ Shop purchase created:', shopPurchase);\n console.log(`Step 2: Creating ${purchaseQuantity} cards...`);\n for (let i = 0; i < purchaseQuantity; i++) {\n console.log(`Creating card ${i + 1}/${purchaseQuantity}...`);\n const shopGame = await devbaseClient.createEntity('shop_games', {\n userId: userWallet,\n cardRarity: cardToBuy.rarity\n });\n console.log(`✓ Shop game ${i + 1} created:`, shopGame);\n const card = await devbaseClient.createEntity('cards', {\n gameId: shopGame.id,\n owner: userWallet,\n rarity: cardToBuy.rarity\n });\n console.log(`✓ Card ${i + 1} created:`, card);\n }\n console.log('Step 3: Updating user balance...');\n await devbaseClient.createEntity('balance_ledgers', {\n userId: userWallet,\n amount: -totalPrice,\n source: 'shop_purchase'\n });\n console.log('✓ Shop purchase completed successfully!');\n await loadUserBalance();\n loadMyCards();\n generateShopCards();\n setShowShopSuccessModal(true);\n } catch (error) {\n console.error('❌ Shop purchase failed at step:', error);\n console.error('Error details:', {\n message: error.message,\n response: error.response?.data,\n status: error.response?.status,\n statusText: error.response?.statusText\n });\n alert(`Failed to buy card from shop. Error: ${error.message}`);\n } finally {\n setIsBuyingCard(false);\n setCardToBuy(null);\n setPurchaseQuantity(1);\n }\n };\n const withdrawBalance = async () => {\n if (!userWallet || userBalance <= 0) return;\n setIsWithdrawing(true);\n try {\n const amountToWithdraw = userBalance;\n await devbaseClient.createEntity('myst_withdrawals', {\n userId: userWallet,\n amount: amountToWithdraw\n });\n await devbaseClient.createEntity('balance_ledgers', {\n userId: userWallet,\n amount: -amountToWithdraw,\n source: 'withdrawal'\n });\n await loadUserBalance();\n alert(`Successfully initiated withdrawal of ${amountToWithdraw.toLocaleString()} $MYST!`);\n } catch (error) {\n console.error('Error withdrawing balance:', error);\n alert('Failed to withdraw balance. Please try again.');\n } finally {\n setIsWithdrawing(false);\n }\n };\n const getCardPower = rarity => {\n const powerRanges = {\n common: [2, 3, 4],\n rare: [5, 6, 7],\n epic: [8, 10, 12],\n legendary: [13, 15, 18],\n jackpot: [25, 28, 30]\n };\n const range = powerRanges[rarity] || powerRanges.common;\n return range[Math.floor(Math.random() * range.length)];\n };\n const generateAiDeck = () => {\n const rarities = Object.keys(cardTypes);\n const deck = [];\n const deckSize = 5;\n for (let i = 0; i < deckSize; i++) {\n const randomRarity = rarities[Math.floor(Math.random() * rarities.length)];\n deck.push({\n id: `ai-card-${i}-${Date.now()}`,\n rarity: randomRarity,\n name: `AI ${cardTypes[randomRarity].name}`,\n value: cardTypes[randomRarity].basePrice[Math.floor(Math.random() * cardTypes[randomRarity].basePrice.length)]\n });\n }\n return deck;\n };\n const startBattle = async () => {\n if (currentDeck.length < 5) {\n alert('You need at least 5 cards in your deck to battle!');\n return;\n }\n try {\n const battle = await devbaseClient.createEntity('battles', {\n playerId: userWallet,\n playerDeck: JSON.stringify(currentDeck.map(card => card.id)),\n status: 'in-progress'\n });\n setAiDeck(generateAiDeck());\n setBattleState(battle);\n setIsInBattle(true);\n setGamePhase('battle');\n setCurrentRound(1);\n setBattleResults([]);\n setShowRoundInfo(true);\n setAvatarsInTitle(false);\n setTimeLeft(30);\n setIsTimerActive(false);\n setTimeout(() => setShowRoundInfo(false), 2000);\n setTimeout(() => {\n setAvatarsInTitle(true);\n setTimeLeft(30);\n setIsTimerActive(true);\n }, 3000);\n } catch (error) {\n console.error('Error starting battle:', error);\n alert('Failed to start battle. Please try again.');\n }\n };\n const selectCardForRound = card => {\n if (playerSelectedCard?.id === card.id) {\n setPlayerSelectedCard(null);\n } else {\n setPlayerSelectedCard(card);\n }\n };\n const playRound = async () => {\n if (!playerSelectedCard) {\n alert('Please select a card to play!');\n return;\n }\n setIsBattling(true);\n setIsTimerActive(false);\n const availableAiCards = aiDeck.filter(card => !battleResults.some(result => result.aiCard?.id === card.id));\n const aiCard = availableAiCards[Math.floor(Math.random() * availableAiCards.length)];\n setAiSelectedCard(aiCard);\n let playerPower = getCardPower(playerSelectedCard.rarity);\n let aiPower = getCardPower(aiCard.rarity);\n if (playerSelectedCard.rarity === 'legendary') playerPower *= 2;\n if (aiCard.rarity === 'legendary') aiPower *= 2;\n if (playerSelectedCard.rarity === 'jackpot') playerPower = 999;\n if (aiCard.rarity === 'jackpot') aiPower = 999;\n const roundWinner = playerPower > aiPower ? 'player' : aiPower > playerPower ? 'ai' : 'tie';\n const roundResult = {\n round: currentRound,\n playerCard: playerSelectedCard,\n aiCard: aiCard,\n playerPower,\n aiPower,\n winner: roundWinner\n };\n setBattleResults(prev => [...prev, roundResult]);\n setRoundWinner(roundWinner);\n setShowRoundResult(true);\n setTimeout(() => {\n setShowRoundResult(false);\n setPlayerSelectedCard(null);\n setAiSelectedCard(null);\n setIsBattling(false);\n if (currentRound >= 5) {\n finishBattle();\n } else {\n setCurrentRound(prev => prev + 1);\n setShowRoundInfo(true);\n setTimeLeft(30);\n setIsTimerActive(false);\n setTimeout(() => setShowRoundInfo(false), 2000);\n setTimeout(() => {\n setAvatarsInTitle(true);\n setTimeLeft(30);\n setIsTimerActive(true);\n }, 3000);\n }\n }, 3000);\n };\n const finishBattle = async () => {\n const playerWins = battleResults.filter(r => r.winner === 'player').length;\n const aiWins = battleResults.filter(r => r.winner === 'ai').length;\n const battleWinner = playerWins > aiWins ? 'player' : 'ai';\n try {\n await devbaseClient.updateEntity('battles', battleState.id, {\n status: 'completed',\n winner: battleWinner,\n playerWins,\n aiWins,\n battleResults: JSON.stringify(battleResults)\n });\n const rewardAmount = battleWinner === 'player' ? 500 : 100;\n await devbaseClient.createEntity('battle_results', {\n battleId: battleState.id,\n playerId: userWallet,\n winner: battleWinner,\n rewardAmount\n });\n await devbaseClient.createEntity('balance_ledgers', {\n userId: userWallet,\n amount: rewardAmount,\n source: 'battle_reward'\n });\n await loadUserBalance();\n setGamePhase('result');\n } catch (error) {\n console.error('Error finishing battle:', error);\n alert('Failed to save battle rewards. Please try again.');\n }\n };\n const resetGame = () => {\n setIsInBattle(false);\n setBattleState(null);\n setPlayerSelectedCard(null);\n setAiSelectedCard(null);\n setBattleResults([]);\n setCurrentRound(1);\n setGamePhase('deck-building');\n setAiDeck([]);\n setCurrentDeck([]);\n setSelectedCards([]);\n setAvatarsInTitle(false);\n setTimeLeft(30);\n setIsTimerActive(false);\n };\n const addToDeck = card => {\n if (currentDeck.length >= 10) {\n alert('Deck is full! Maximum 10 cards allowed.');\n return;\n }\n if (currentDeck.some(deckCard => deckCard.id === card.id)) {\n alert('This card is already in your deck!');\n return;\n }\n setCurrentDeck(prev => [...prev, card]);\n };\n const removeFromDeck = card => {\n setCurrentDeck(prev => prev.filter(deckCard => deckCard.id !== card.id));\n };\n const quickSelectRarest = () => {\n const sortedByRarity = sortCardsByRarity(myCards);\n const rarestFive = sortedByRarity.slice(0, 5);\n setCurrentDeck(rarestFive);\n };\n const getCardImage = rarity => {\n const images = {\n common: 'https://cdn.dev.fun/asset/a4da9401383449b2f58d/common_d78d96d2.jpg',\n rare: 'https://cdn.dev.fun/asset/a4da9401383449b2f58d/rase_d1912b25.jpg',\n epic: 'https://cdn.dev.fun/asset/a4da9401383449b2f58d/epic_d47cbe72.jpg',\n legendary: 'https://cdn.dev.fun/asset/a4da9401383449b2f58d/lg_073c9030.jpg',\n jackpot: 'https://cdn.dev.fun/asset/a4da9401383449b2f58d/jackpot_b1be3e67.jpg'\n };\n return images[rarity] || images.common;\n };\n const sellToExchange = async cardId => {\n try {\n const card = myCards.find(c => c.id === cardId);\n if (!card) throw new Error(\"Card not found\");\n const sellback = await devbaseClient.createEntity('sellbacks', {\n cardId,\n seller: userWallet\n });\n await devbaseClient.createEntity('balance_ledgers', {\n userId: userWallet,\n amount: sellback.sellPrice,\n source: 'sellback'\n });\n await devbaseClient.updateEntity('cards', cardId, {\n owner: 'exchange'\n });\n alert('Card sold to exchange successfully!');\n loadMyCards();\n loadStats();\n loadUserBalance();\n } catch (error) {\n console.error('Error selling to exchange:', error);\n alert('Failed to sell to exchange');\n }\n };\n const CardComponent = ({\n card,\n showActions = false,\n listing = null,\n shopItem = false\n }) => {\n return

\n {shopItem &&

\n SHOP\n

}\n

\n {(showActions || listing || shopItem) &&

\n \n {shopItem ? card.price : listing ? listing.price : card.value || card.cardValue} $MYST\n

\n {showActions && !listing && !shopItem &&

\n \n \n

}\n {listing && }\n {shopItem && }\n

}\n

;\n };\n return

\n {}\n

\n $\"Mystic$ \n

Mystic Box

Ancient Mystery Box

\n {['home', 'collection', 'marketplace', 'shop', 'game', 'profile'].map(page => )}\n {userWallet &&

\n \n {userBalance.toLocaleString()} $MYST\n

}\n \n

\n {}\n {}\n {showShopConfirmModal && cardToBuy &&

Confirm Purchase

\n \n

\n Buy {cardTypes[cardToBuy.rarity]?.name}\n

\n Are you sure you want to purchase this card?\n

\n \n Quantity\n \n {\n const value = Math.max(1, Math.min(10, parseInt(e.target.value) || 1));\n setPurchaseQuantity(value);\n }} className=\"w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500\" placeholder=\"Enter quantity...\" />\n

Maximum 10 cards per purchase

\n \n

\n Card Type:\n {cardTypes[cardToBuy.rarity]?.name}\n

\n Price per Card:\n {cardToBuy.price} $MYST\n

\n Quantity:\n {purchaseQuantity}\n

\n Total Price:\n {(cardToBuy.price * purchaseQuantity).toLocaleString()} $MYST\n

\n Your Balance:\n {userBalance.toLocaleString()} $MYST\n

\n After Purchase:\n = 0 ? 'text-green-400' : 'text-red-400'}`}>\n {(userBalance - cardToBuy.price * purchaseQuantity).toLocaleString()} $MYST\n \n

\n \n \n

}\n {}\n {showShopSuccessModal &&

\n \n

Purchase Successful!

\n 🎉 Your new {purchaseQuantity > 1 ? 'cards have' : 'card has'} been added to your collection!\n

\n ✨ {purchaseQuantity} {purchaseQuantity > 1 ? 'cards' : 'card'} purchased successfully and ready to use!\n

\n \n

}\n {showListingModal && cardToList &&

List Card for Sale

\n \n

\n \n Price ($MYST)\n \n setListingForm(prev => ({\n ...prev,\n price: e.target.value\n }))} className=\"w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500\" placeholder=\"Enter listing price...\" />\n

\n \n Listing Duration\n \n \n

\n \n \n

}\n {}\n {showCardReveal && lastCard &&

\n \n

Box Opened!

You discovered...

\n \n

\n {lastCard.cardValue > 1 ? \n 🎉 Profit: +{lastCard.cardValue - 1} $MYST!\n : \n 📉 Loss: -{1 - lastCard.cardValue} $MYST\n }\n

\n \n

}\n {}\n

\n {}\n {currentPage === 'home' &&

\n 🔮 Open Ancient Boxes\n

\n Crack open mystical boxes and discover legendary NFT cards!\n

\n\n {}\n

\n \n {!userWallet &&

Connect your wallet to enter the battle arena!

}\n

\n\n {}\n

\n \n

{stats.totalOpened}

Boxes Opened

\n \n

= 0 ? 'text-green-400' : 'text-red-400'}`}>\n {stats.totalProfit >= 0 ? '+' : ''}{stats.totalProfit}\n

Total Profit ($MYST)

\n \n

{myCards.length}

Cards Owned

\n {}\n

\n \n \n

\n {!userWallet &&

Connect your wallet to start opening boxes!

}\n

\n {}\n

Card Rarities & Rewards

\n {Object.entries(cardTypes).map(([key, type]) =>

)}\n

}\n {}\n {currentPage === 'collection' &&

Your Collection

\n {myCards.length === 0 ?

\n No cards yet. Open some boxes to start your collection!\n

: <>\n

\n {myCards.map(card => )}\n

\n {collectionTotalPages > 1 &&

\n \n

\n {Array.from({\n length: Math.min(5, collectionTotalPages)\n }, (_, i) => {\n let pageNum;\n if (collectionTotalPages <= 5) {\n pageNum = i + 1;\n } else if (collectionPageNum <= 3) {\n pageNum = i + 1;\n } else if (collectionPageNum >= collectionTotalPages - 2) {\n pageNum = collectionTotalPages - 4 + i;\n } else {\n pageNum = collectionPageNum - 2 + i;\n }\n return ;\n })}\n

\n \n

}\n }\n

}\n {}\n {currentPage === 'marketplace' &&

Marketplace

\n {marketplaceCards.length === 0 ?

\n No cards for sale right now. Check back later!\n

: <>\n

\n {marketplaceCards.map(listing => )}\n

\n {totalPages > 1 &&

\n \n

\n {Array.from({\n length: Math.min(5, totalPages)\n }, (_, i) => {\n let pageNum;\n if (totalPages <= 5) {\n pageNum = i + 1;\n } else if (currentPageNum <= 3) {\n pageNum = i + 1;\n } else if (currentPageNum >= totalPages - 2) {\n pageNum = totalPages - 4 + i;\n } else {\n pageNum = currentPageNum - 2 + i;\n }\n return ;\n })}\n

\n \n

}\n }\n

}\n {}\n {currentPage === 'shop' &&

Mystic Shop

Buy cards directly from the shop at premium prices (2x base value)

\n {shopCards.map(card => )}\n

💡 Shop Benefits

• Instant purchase - no waiting for auctions
• Guaranteed card type selection
• Use your $MYST tokens directly
• Premium pricing reflects convenience

}\n {}\n {currentPage === 'game' &&

\n {!(gamePhase === 'battle') && <>\n

⚔️ Card Battle Arena

Build your deck and battle against AI opponents!

\n }\n

\n\n {gamePhase === 'deck-building' &&

Your Collection

\n {myCards.length === 0 ?

No cards available. Open some boxes first!

\n {myCards.map(card =>

\n \n \n

)}\n

}\n

\n \n

Battle Deck ({currentDeck.length}/10)

\n {currentDeck.length === 0 ?

Add cards to your deck to start battling!

\n {currentDeck.map(card =>

\n \n \n

)}\n

}\n \n

\n \n \n

\n \n

🔮 Battle Rules

How to Play:

• Build a deck of 5-10 cards
• Battle consists of 5 rounds
• Select one card per round
• Higher power wins the round
• Win 3+ rounds to win the battle

Special Effects:

🟤 Common: 2-4 power, no effect
🔵 Rare: 5-7 power, +1 buff next card
🟣 Epic: 8-12 power, block enemy effect
🟡 Legendary: 13-18 power, double power
🔴 Jackpot: 25-30 power, auto-win round

}\n\n {gamePhase === 'battle' &&

\n {}\n

\n\n {}\n {!showRoundResult &&

\n \n {isTimerActive && timeLeft <= 10 && !playerSelectedCard &&

\n ⚠️ Time running out! A card will be auto-selected in {timeLeft} seconds\n

}\n

}\n\n {gamePhase === 'result' &&

Battle Complete!

\n \n

r.winner === 'player').length > battleResults.filter(r => r.winner === 'ai').length ? 'text-green-400' : 'text-red-400'}`}>\n {battleResults.filter(r => r.winner === 'player').length > battleResults.filter(r => r.winner === 'ai').length ? '🏆' : '😞'}\n

\n {battleResults.filter(r => r.winner === 'player').length > battleResults.filter(r => r.winner === 'ai').length ? 'Victory!' : 'Defeat!'}\n

\n Final Score: {battleResults.filter(r => r.winner === 'player').length} - {battleResults.filter(r => r.winner === 'ai').length}\n

\n \n

\n Reward: +{battleResults.filter(r => r.winner === 'player').length > battleResults.filter(r => r.winner === 'ai').length ? '500' : '100'} $MYST\n

\n {battleResults.filter(r => r.winner === 'player').length > battleResults.filter(r => r.winner === 'ai').length ? 'Victory bonus!' : 'Participation reward!'}\n

\n \n \n

}\n

}\n\n {currentPage === 'profile' &&

User Profile

\n \n

Wallet Info

Connected Account

\n Wallet Address:\n

\n {userWallet}\n

\n \n

Balance

Your $MYST Tokens

\n {userBalance.toLocaleString()} $MYST\n

Current Balance

\n \n {userBalance > 0 &&

\n ≈ {(userBalance * 0.001).toFixed(6)} SOL\n

}\n

Account Summary

{stats.totalOpened}

Boxes Opened

{myCards.length}

Cards Owned

= 0 ? 'text-green-400' : 'text-red-400'}`}>\n {stats.totalProfit >= 0 ? '+' : ''}{stats.totalProfit}\n

Net Profit

\n {myCards.reduce((sum, card) => sum + (card.value || 0), 0)}\n

Collection Value

}\n

\n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\"}}","appFunctions",[78],{"_14":79,"_34":80,"_36":81,"_18":82,"_83":84,"_85":39},["B","9905"],["D",1753948491010],["D",1753948491010],"$FUNC_GET_USER_BALANCE","body","async function $FUNC_GET_USER_BALANCE(userId) {\n const balance = await $ENTITY('balance_ledgers').sum({ userId: userId }, 'amount');\n return balance || 0;\n }","commitId","token","upstreamApp","isLordOfDev","analytics",[91,95,97,99,101,103,105,107,109,111,113,115,117,119,121,122],{"_92":93,"_94":58},"day","2025-08-10","runCount",{"_92":96,"_94":58},"2025-08-11",{"_92":98,"_94":58},"2025-08-12",{"_92":100,"_94":58},"2025-08-13",{"_92":102,"_94":58},"2025-08-14",{"_92":104,"_94":58},"2025-08-15",{"_92":106,"_94":58},"2025-08-16",{"_92":108,"_94":58},"2025-08-17",{"_92":110,"_94":58},"2025-08-18",{"_92":112,"_94":58},"2025-08-19",{"_92":114,"_94":58},"2025-08-20",{"_92":116,"_94":58},"2025-08-21",{"_92":118,"_94":58},"2025-08-22",{"_92":120,"_94":58},"2025-08-23",{"_92":96,"_94":41},{"_92":114,"_94":41},"snapshot","ogImage","https://cdn.dev.fun/og/image/a4da9401383449b2f58d/b7c7f14f.webp","isDevbase","actionData","errors"]

Confirm Purchase

\n Buy {cardTypes[cardToBuy.rarity]?.name}\n

Purchase Successful!

List Card for Sale

Box Opened!

\n 🔮 Open Ancient Boxes\n

Card Rarities & Rewards

Your Collection

Marketplace

Mystic Shop

💡 Shop Benefits

⚔️ Card Battle Arena

Your Collection

Battle Deck ({currentDeck.length}/10)

🔮 Battle Rules

How to Play:

Special Effects:

Round {currentRound - 1} Result

Battle Complete!

User Profile

Wallet Info

Balance

Account Summary

say something