[{"_1":2,"_173":-5,"_174":-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":27,"_28":27,"_29":30,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_5":47,"_59":60,"_61":62,"_63":44,"_64":65,"_66":62,"_67":44,"_68":44,"_69":70,"_71":62,"_72":62,"_73":17,"_74":27,"_75":-5,"_76":77,"_78":79,"_80":81,"_120":-5,"_121":-5,"_122":27,"_123":124,"_162":34,"_163":164,"_165":27,"_166":167},"id","3ca8b25830574602d8ec","isMyApp",false,"projectId","06c8bd68-e2d2-4499-be24-c7a39e515326","name","Fluffy clash ","description","Build the ultimate blockchain army by collecting, trading, and combining rare NFT warriors, buildings, and magical items! Each digital asset has unique powers that can be strategically combined to create unstoppable formations. Watch your collection's value soar as you dominate battles and become the most feared commander in the metaverse!","brief","Collect, trade & combine NFT warriors to build the ultimate blockchain army!","isLive",true,"isPublic","tags",[31,32],"🔥","👑","cover","https://cdn.dev.fun/snapshot/3ca8b25830574602d8ec/103210_36abdfa5.webp","cdnUrl","https://cdn.dev.fun/app/3ca8b25830574602d8ec/103210","createdAt",["D",1757620333905],"updatedAt",["D",1757866099950],"lastCommitId",["B","103210"],"tier",1,"credits",175,{"_14":48,"_49":50,"_51":50,"_52":53,"_54":50,"_55":56,"_57":58},"f5c5cfed-395b-44b0-b788-2207f06ac184","uniqueId","Onaru","username","solanaWallet","DQ483ePfjg1m9SpuYX46wC56F12uRByMjxXUj9oFEMAJ","displayName","bio","Animate what ever ","avatar","https://cdn.dev.fun/avatar/f5c5cfed-395b-44b0-b788-2207f06ac184/be5a0363.webp","commitCount",67,"forkCount",0,"likeCount","runsCount",69,"downvoteCount","upvoteCount","upvoteRate","commentCount",3,"reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect } from 'react';\nimport { useDevapp, UserButton, DevappProvider } from '@devfunlabs/web-sdk';\nimport { Sword, Shield, Castle, Plus, Users, Zap, Star, Crown, Coins, Hammer, Target, Trophy, Gem, Medal, Wifi, MessageCircle, Send, X, User, Edit3, Save } from 'lucide-react';\nimport { io } from 'socket.io-client';\nimport { motion, AnimatePresence } from 'framer-motion';\nexport default function AppWithProvider() {\n return \n \n ;\n}\nfunction App() {\n const {\n devbaseClient,\n userWallet,\n sendTransaction\n } = useDevapp();\n const [activeTab, setActiveTab] = useState('collection');\n const [socket, setSocket] = useState(null);\n const [onlineUsers, setOnlineUsers] = useState(0);\n const [battleNotifications, setBattleNotifications] = useState([]);\n const [chatMessages, setChatMessages] = useState([]);\n const [chatInput, setChatInput] = useState('');\n const [isChatOpen, setIsChatOpen] = useState(false);\n const [toastNotifications, setToastNotifications] = useState([]);\n const [myNfts, setMyNfts] = useState([]);\n const [allNfts, setAllNfts] = useState([]);\n const [myFormations, setMyFormations] = useState([]);\n const [trades, setTrades] = useState([]);\n const [resources, setResources] = useState({\n gold: 0,\n gems: 0\n });\n const [buildings, setBuildings] = useState([]);\n const [battles, setBattles] = useState([]);\n const [rankings, setRankings] = useState([]);\n const [userRanking, setUserRanking] = useState(null);\n const [userProfile, setUserProfile] = useState(null);\n const [loading, setLoading] = useState(false);\n const [isInQueue, setIsInQueue] = useState(false);\n const [matchFound, setMatchFound] = useState(null);\n const [currentGameSession, setCurrentGameSession] = useState(null);\n const [gameSessions, setGameSessions] = useState([]);\n const [queueTimer, setQueueTimer] = useState(0);\n const [gameInProgress, setGameInProgress] = useState(false);\n const [battleInProgress,,] = useState(false);\n const [battleTimer,,] = useState(20);\n const [opponentData, setOpponentData] = useState(null);\n const [gameState, setGameState] = useState({\n players: {},\n battlefield: {\n deployedUnits: {},\n resources: {},\n territories: {}\n },\n turn: null,\n phase: 'preparation',\n timer: 0\n });\n const [selectedAction,,] = useState(null);\n const [selectedUnits, setSelectedUnits] = useState([]);\n const [deploymentPoints, setDeploymentPoints] = useState(3);\n const [battleLog, setBattleLog] = useState([]);\n const [weeklyChallenge, setWeeklyChallenge] = useState(null);\n const [timeUntilReset, setTimeUntilReset] = useState('');\n const [showTradeModal, setShowTradeModal] = useState(false);\n const [selectedNftForTrade, setSelectedNftForTrade] = useState(null);\n const [tradePrice, setTradePrice] = useState('');\n const [inventory, setInventory] = useState([]);\n const [showUpgradeModal, setShowUpgradeModal] = useState(false);\n const [selectedNftForUpgrade, setSelectedNftForUpgrade] = useState(null);\n const [showLevelCompletionModal, setShowLevelCompletionModal] = useState(false);\n const [levelCompletionData, setLevelCompletionData] = useState(null);\n const [selectedNftForLevelBoost, setSelectedNftForLevelBoost] = useState(null);\n const [selectedBoostType, setSelectedBoostType] = useState('');\n const [isUnlockingLevel, setIsUnlockingLevel] = useState(false);\n const sampleNfts = [{\n type: 'warrior',\n name: 'Cyber Guardian',\n rarity: 'epic',\n attack: 85,\n defense: 70,\n element: 'tech',\n price: 1.8,\n image: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/IMG_4986_1089655a.png'\n }, {\n type: 'warrior',\n name: 'Digital Assassin',\n rarity: 'rare',\n attack: 90,\n defense: 60,\n element: 'stealth',\n price: 1.5,\n image: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/IMG_4921_524c1188.png'\n }, {\n type: 'hero',\n name: 'Quantum Lord',\n rarity: 'legendary',\n attack: 100,\n defense: 95,\n element: 'quantum',\n price: 5.0,\n image: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/IMG_2928_3f5cda8d.jpeg'\n }, {\n type: 'warrior',\n name: 'Neon Striker',\n rarity: 'epic',\n attack: 80,\n defense: 75,\n element: 'energy',\n price: 2.0,\n image: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/IMG_4987_3fcb547c.png'\n }, {\n type: 'hero',\n name: 'Chrome Warlord',\n rarity: 'legendary',\n attack: 105,\n defense: 90,\n element: 'metal',\n price: 4.5,\n image: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/IMG_4993_ada5a4d7.png'\n }, {\n type: 'warrior',\n name: 'Shadow Operative',\n rarity: 'rare',\n attack: 75,\n defense: 80,\n element: 'dark',\n price: 1.2,\n image: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/IMG_4584_26cf4bdc.jpeg'\n }, {\n type: 'warrior',\n name: 'Plasma Knight',\n rarity: 'epic',\n attack: 88,\n defense: 82,\n element: 'plasma',\n price: 2.2,\n image: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/IMG_4918_2c09c701.png'\n }];\n useEffect(() => {\n if (devbaseClient && userWallet) {\n loadData();\n loadWeeklyChallenge();\n }\n }, [devbaseClient, userWallet]);\n useEffect(() => {\n const updateTimer = () => {\n if (weeklyChallenge) {\n const endTime = new Date(weeklyChallenge.endTime);\n const now = new Date();\n const timeDiff = endTime - now;\n if (timeDiff > 0) {\n const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));\n const hours = Math.floor(timeDiff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));\n const minutes = Math.floor(timeDiff % (1000 * 60 * 60) / (1000 * 60));\n setTimeUntilReset(`${days}d ${hours}h ${minutes}m`);\n } else {\n setTimeUntilReset('Challenge Ended');\n }\n }\n };\n updateTimer();\n const timer = setInterval(updateTimer, 60000);\n return () => clearInterval(timer);\n }, [weeklyChallenge]);\n useEffect(() => {\n let interval;\n if (isInQueue) {\n interval = setInterval(() => {\n setQueueTimer(prev => prev + 1);\n }, 1000);\n }\n return () => clearInterval(interval);\n }, [isInQueue]);\n useEffect(() => {\n const socketConnection = io('wss://ws.dev.fun/app-3ca8b25830574602d8ec');\n setSocket(socketConnection);\n socketConnection.on('devfun:user_count', count => {\n setOnlineUsers(count);\n });\n socketConnection.on('battle_started', data => {\n const notification = {\n id: Date.now(),\n message: `${data.attacker} started a battle against ${data.defender}!`,\n timestamp: Date.now()\n };\n setBattleNotifications(prev => [...prev.slice(-4), notification]);\n addToastNotification('⚔️ Battle Started!', notification.message, 'info');\n });\n socketConnection.on('battle_completed', data => {\n const notification = {\n id: Date.now(),\n message: `Battle completed! ${data.winner} defeated ${data.loser}`,\n timestamp: Date.now()\n };\n setBattleNotifications(prev => [...prev.slice(-4), notification]);\n addToastNotification('🏆 Battle Finished!', notification.message, 'success');\n });\n socketConnection.on('nft_minted', data => {\n const notification = {\n id: Date.now(),\n message: `${data.player} summoned a new ${data.rarity} ${data.name}!`,\n timestamp: Date.now()\n };\n setBattleNotifications(prev => [...prev.slice(-4), notification]);\n addToastNotification('✨ New NFT Summoned!', notification.message, 'magic');\n });\n socketConnection.on('chat_message', data => {\n setChatMessages(prev => [...prev.slice(-49), data]);\n });\n socketConnection.on('player_joined', data => {\n addToastNotification('👋 Player Joined', `${data.player} entered the battlefield!`, 'info');\n });\n socketConnection.on('trade_completed', data => {\n addToastNotification('💰 Trade Completed', `${data.buyer} bought ${data.nftName} for ${data.price} SOL!`, 'success');\n });\n socketConnection.on('matchmaking_joined', () => {\n setIsInQueue(true);\n setQueueTimer(0);\n });\n socketConnection.on('match_found', data => {\n setMatchFound(data);\n setIsInQueue(false);\n addToastNotification('🎯 Match Found!', `Matched with ${data.opponent.username}!`, 'success');\n });\n socketConnection.on('game_session_created', data => {\n setCurrentGameSession(data);\n addToastNotification('🚀 Game Created!', `Session ${data.id} is ready!`, 'info');\n });\n socketConnection.on('game_session_joined', data => {\n setCurrentGameSession(data);\n setOpponentData(data.players.find(p => p.id !== userWallet));\n addToastNotification('⚔️ Joined Battle!', `Entered session with ${data.opponent?.username}!`, 'info');\n });\n socketConnection.on('game_started', data => {\n setGameInProgress(true);\n setGameState(data.gameState);\n setDeploymentPoints(3);\n setBattleLog([]);\n addToastNotification('🔥 Battle Begins!', 'The cyber war has started!', 'magic');\n });\n socketConnection.on('game_state_updated', data => {\n setGameState(data.gameState);\n if (data.action) {\n setBattleLog(prev => [...prev.slice(-9), {\n id: Date.now(),\n player: data.action.player,\n type: data.action.type,\n message: data.action.message,\n timestamp: Date.now()\n }]);\n }\n });\n socketConnection.on('player_action', data => {\n if (data.type === 'deploy_unit') {\n addToastNotification('⚔️ Unit Deployed!', `${data.player} deployed ${data.unitName}!`, 'info');\n } else if (data.type === 'use_ability') {\n addToastNotification('✨ Ability Used!', `${data.player} used ${data.abilityName}!`, 'magic');\n } else if (data.type === 'collect_resource') {\n addToastNotification('💎 Resource Collected!', `${data.player} collected ${data.resourceType}!`, 'success');\n }\n });\n socketConnection.on('turn_changed', data => {\n setGameState(prev => ({\n ...prev,\n turn: data.currentTurn,\n timer: data.turnTimer\n }));\n const isMyTurn = data.currentTurn === userWallet;\n addToastNotification(isMyTurn ? '🎯 Your Turn!' : '⏳ Opponent\\'s Turn', isMyTurn ? 'Make your move!' : 'Waiting for opponent...', 'info');\n });\n socketConnection.on('game_ended', data => {\n setGameInProgress(false);\n setCurrentGameSession(null);\n setOpponentData(null);\n setGameState({\n players: {},\n battlefield: {\n deployedUnits: {},\n resources: {},\n territories: {}\n },\n turn: null,\n phase: 'preparation',\n timer: 0\n });\n setBattleLog([]);\n const isWinner = data.winner === userWallet;\n addToastNotification(isWinner ? '🏆 Victory!' : '💀 Defeat!', `${isWinner ? 'You won' : 'You lost'} the cyber battle!`, isWinner ? 'success' : 'error');\n });\n socketConnection.on('player_left_session', data => {\n addToastNotification('👋 Player Left', `${data.player} left the session`, 'info');\n if (currentGameSession && data.sessionId === currentGameSession.id) {\n setCurrentGameSession(null);\n setGameInProgress(false);\n setOpponentData(null);\n }\n });\n socketConnection.on('queue_status', data => {\n setQueueTimer(data.timeInQueue);\n });\n return () => {\n socketConnection.disconnect();\n };\n }, []);\n const addToastNotification = (title, message, type = 'info') => {\n const notification = {\n id: Date.now(),\n title,\n message,\n type,\n timestamp: Date.now()\n };\n setToastNotifications(prev => [...prev.slice(-2), notification]);\n setTimeout(() => {\n setToastNotifications(prev => prev.filter(n => n.id !== notification.id));\n }, 5000);\n };\n const sendChatMessage = () => {\n if (!chatInput.trim() || !socket || !userWallet) return;\n const message = {\n id: Date.now(),\n text: chatInput.trim(),\n player: userProfile?.username || userWallet.slice(0, 8) + '...',\n profilePicture: userProfile?.profilePicture || `https://api.dicebear.com/7.x/avataaars/svg?seed=${userWallet}`,\n walletAddress: userWallet,\n timestamp: Date.now()\n };\n socket.emit('chat_message', message);\n setChatInput('');\n };\n const handleKeyPress = e => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n sendChatMessage();\n }\n };\n const loadWeeklyChallenge = async () => {\n if (!devbaseClient) return;\n try {\n const challenges = await devbaseClient.listEntities('weeklyChallenges', {\n status: 'active'\n });\n if (challenges.length > 0) {\n setWeeklyChallenge(challenges[0]);\n }\n } catch (error) {\n console.error('Error loading weekly challenge:', error);\n }\n };\n const loadData = async () => {\n if (!devbaseClient || !userWallet) {\n console.warn('DevbaseClient or userWallet not available');\n return;\n }\n try {\n setLoading(true);\n let nftsData = [];\n let formationsData = [];\n let tradesData = [];\n let resourcesData = [];\n let buildingsData = [];\n let battlesData = [];\n let rankingsData = [];\n let gameSessionsData = [];\n let profilesData = [];\n let allNftsData = [];\n try {\n nftsData = (await devbaseClient.listEntities('nfts', {\n owner: userWallet\n })) || [];\n } catch (error) {\n console.warn('Failed to load NFTs:', error);\n nftsData = [];\n }\n try {\n formationsData = (await devbaseClient.listEntities('formations', {\n owner: userWallet\n })) || [];\n } catch (error) {\n console.warn('Failed to load formations:', error);\n formationsData = [];\n }\n try {\n tradesData = (await devbaseClient.listEntities('trades', {})) || [];\n } catch (error) {\n console.warn('Failed to load trades:', error);\n tradesData = [];\n }\n try {\n resourcesData = (await devbaseClient.listEntities('resources', {\n owner: userWallet\n })) || [];\n } catch (error) {\n console.warn('Failed to load resources:', error);\n resourcesData = [];\n }\n try {\n buildingsData = (await devbaseClient.listEntities('buildings', {\n owner: userWallet\n })) || [];\n } catch (error) {\n console.warn('Failed to load buildings:', error);\n buildingsData = [];\n }\n try {\n battlesData = (await devbaseClient.listEntities('battles', {})) || [];\n } catch (error) {\n console.warn('Failed to load battles:', error);\n battlesData = [];\n }\n try {\n rankingsData = (await devbaseClient.listEntities('rankings', {})) || [];\n } catch (error) {\n console.warn('Failed to load rankings:', error);\n rankingsData = [];\n }\n try {\n gameSessionsData = (await devbaseClient.listEntities('gameSessions', {\n status: 'waiting'\n })) || [];\n } catch (error) {\n console.warn('Failed to load game sessions:', error);\n gameSessionsData = [];\n }\n try {\n profilesData = (await devbaseClient.listEntities('userProfiles', {\n userId: userWallet\n })) || [];\n } catch (error) {\n console.warn('Failed to load profiles:', error);\n profilesData = [];\n }\n try {\n allNftsData = (await devbaseClient.listEntities('nfts', {})) || [];\n } catch (error) {\n console.warn('Failed to load all NFTs:', error);\n allNftsData = [];\n }\n let inventoryData = [];\n try {\n inventoryData = (await devbaseClient.listEntities('inventory', {\n owner: userWallet\n })) || [];\n } catch (error) {\n console.warn('Failed to load inventory:', error);\n inventoryData = [];\n }\n setMyNfts(nftsData);\n setMyFormations(formationsData);\n setTrades(tradesData);\n setBuildings(buildingsData);\n setBattles(battlesData);\n setRankings(rankingsData.sort((a, b) => (b.totalPower || 0) - (a.totalPower || 0)));\n setGameSessions(gameSessionsData);\n setAllNfts(allNftsData);\n setInventory(inventoryData);\n try {\n if (profilesData.length === 0) {\n const newProfile = await devbaseClient.createEntity('userProfiles', {\n userId: userWallet,\n username: userWallet.slice(0, 8) + '...',\n profilePicture: `https://api.dicebear.com/7.x/avataaars/svg?seed=${userWallet}`,\n currentAiLevel: 1\n });\n setUserProfile(newProfile);\n } else {\n const profile = profilesData[0];\n if (profile.currentAiLevel === undefined) {\n const updatedProfile = await devbaseClient.updateEntity('userProfiles', profile.id, {\n currentAiLevel: 1\n });\n setUserProfile(updatedProfile);\n } else {\n setUserProfile(profile);\n }\n }\n } catch (error) {\n console.warn('Failed to handle user profile:', error);\n setUserProfile({\n userId: userWallet,\n username: userWallet.slice(0, 8) + '...',\n profilePicture: `https://api.dicebear.com/7.x/avataaars/svg?seed=${userWallet}`,\n currentAiLevel: 1\n });\n }\n try {\n const existingRanking = rankingsData.find(r => r.userId === userWallet);\n if (!existingRanking) {\n const totalPower = nftsData.reduce((sum, nft) => sum + ((nft.attack || 0) + (nft.defense || 0)), 0);\n const newRanking = await devbaseClient.createEntity('rankings', {\n userId: userWallet,\n wins: 0,\n losses: 0,\n totalPower,\n rank: 0,\n username: profilesData[0]?.username || userWallet.slice(0, 8) + '...'\n });\n setUserRanking(newRanking);\n } else {\n setUserRanking(existingRanking);\n }\n } catch (error) {\n console.warn('Failed to handle user ranking:', error);\n setUserRanking({\n userId: userWallet,\n wins: 0,\n losses: 0,\n totalPower: 0,\n rank: 0,\n username: userWallet.slice(0, 8) + '...'\n });\n }\n try {\n if (resourcesData.length === 0) {\n const newResources = await devbaseClient.createEntity('resources', {\n owner: userWallet,\n gold: 100,\n gems: 20\n });\n setResources(newResources);\n } else {\n setResources(resourcesData[0]);\n }\n } catch (error) {\n console.warn('Failed to handle resources:', error);\n setResources({\n gold: 1000,\n gems: 50\n });\n }\n } catch (error) {\n console.error('Critical error in loadData:', error);\n setMyNfts([]);\n setMyFormations([]);\n setTrades([]);\n setBuildings([]);\n setBattles([]);\n setRankings([]);\n setGameSessions([]);\n setAllNfts([]);\n setResources({\n gold: 100,\n gems: 20\n });\n setUserProfile({\n userId: userWallet,\n username: userWallet.slice(0, 8) + '...',\n profilePicture: `https://api.dicebear.com/7.x/avataaars/svg?seed=${userWallet}`\n });\n setUserRanking({\n userId: userWallet,\n wins: 0,\n losses: 0,\n totalPower: 0,\n rank: 0,\n username: userWallet.slice(0, 8) + '...'\n });\n } finally {\n setLoading(false);\n }\n };\n const updateProfile = async (newUsername, newProfilePicture) => {\n if (!devbaseClient || !userProfile) return;\n try {\n setLoading(true);\n const updatedProfile = await devbaseClient.updateEntity('userProfiles', userProfile.id, {\n username: newUsername,\n profilePicture: newProfilePicture\n });\n setUserProfile(updatedProfile);\n if (userRanking) {\n await devbaseClient.updateEntity('rankings', userRanking.id, {\n username: newUsername\n });\n setUserRanking(prev => ({\n ...prev,\n username: newUsername\n }));\n }\n addToastNotification('✅ Profile Updated!', 'Your profile has been successfully updated!', 'success');\n await loadData();\n } catch (error) {\n console.error('Error updating profile:', error);\n addToastNotification('❌ Error', 'Failed to update profile. Try again!', 'error');\n } finally {\n setLoading(false);\n }\n };\n const joinMatchmaking = async () => {\n if (!userRanking || isInQueue) return;\n if (socket) {\n socket.emit('join_matchmaking', {\n playerId: userWallet,\n playerData: {\n username: userRanking.username,\n totalPower: userRanking.totalPower,\n wins: userRanking.wins,\n losses: userRanking.losses\n }\n });\n }\n };\n const leaveMatchmaking = () => {\n if (socket) {\n socket.emit('leave_matchmaking', {\n playerId: userWallet\n });\n }\n setIsInQueue(false);\n setQueueTimer(0);\n };\n const acceptMatch = async matchData => {\n if (!devbaseClient) return;\n try {\n setLoading(true);\n const gameSession = await devbaseClient.createEntity('gameSessions', {\n host: userWallet,\n opponent: matchData.opponent.id,\n status: 'active',\n hostPower: userRanking?.totalPower || 0,\n opponentPower: matchData.opponent.totalPower,\n gameType: 'ranked'\n });\n setCurrentGameSession(gameSession);\n setMatchFound(null);\n if (socket) {\n socket.emit('accept_match', {\n matchId: matchData.id,\n sessionId: gameSession.id\n });\n }\n } catch (error) {\n console.error('Error accepting match:', error);\n } finally {\n setLoading(false);\n }\n };\n const createPrivateGame = async () => {\n if (!devbaseClient) return;\n try {\n setLoading(true);\n const gameSession = await devbaseClient.createEntity('gameSessions', {\n host: userWallet,\n status: 'waiting',\n hostPower: userRanking?.totalPower || 0,\n gameType: 'private'\n });\n if (socket) {\n socket.emit('create_private_game', {\n sessionId: gameSession.id,\n hostData: {\n id: userWallet,\n username: userRanking?.username || 'Player',\n totalPower: userRanking?.totalPower || 0\n }\n });\n }\n } catch (error) {\n console.error('Error creating private game:', error);\n } finally {\n setLoading(false);\n }\n };\n const joinGameSession = async sessionId => {\n if (!devbaseClient) return;\n try {\n setLoading(true);\n await devbaseClient.updateEntity('gameSessions', sessionId, {\n opponent: userWallet,\n opponentPower: userRanking?.totalPower || 0,\n status: 'active'\n });\n if (socket) {\n socket.emit('join_game_session', {\n sessionId,\n playerData: {\n id: userWallet,\n username: userRanking?.username || 'Player',\n totalPower: userRanking?.totalPower || 0\n }\n });\n }\n await loadData();\n } catch (error) {\n console.error('Error joining game session:', error);\n } finally {\n setLoading(false);\n }\n };\n const leaveGameSession = async () => {\n if (!currentGameSession || !socket) return;\n socket.emit('leave_game_session', {\n sessionId: currentGameSession.id,\n playerId: userWallet\n });\n setCurrentGameSession(null);\n setGameInProgress(false);\n setOpponentData(null);\n try {\n if (currentGameSession.host === userWallet) {\n await devbaseClient.deleteEntity('gameSessions', currentGameSession.id);\n } else {\n await devbaseClient.updateEntity('gameSessions', currentGameSession.id, {\n opponent: null,\n status: 'waiting'\n });\n }\n await loadData();\n } catch (error) {\n console.error('Error leaving game session:', error);\n }\n };\n const startMultiplayerBattle = async () => {\n if (!currentGameSession || !socket) return;\n socket.emit('start_multiplayer_battle', {\n sessionId: currentGameSession.id,\n playerData: {\n formations: myFormations,\n nfts: myNfts,\n totalPower: userRanking?.totalPower || 0\n }\n });\n setGameInProgress(true);\n };\n const executePlayerAction = (actionType, actionData) => {\n if (!socket || !currentGameSession || gameState.turn !== userWallet) return;\n socket.emit('player_action', {\n sessionId: currentGameSession.id,\n playerId: userWallet,\n action: {\n type: actionType,\n data: actionData,\n timestamp: Date.now()\n }\n });\n };\n const deployUnit = (unitId, position) => {\n if (deploymentPoints <= 0) {\n addToastNotification('❌ No Deployment Points', 'You have no deployment points left!', 'error');\n return;\n }\n const unit = myNfts.find(nft => nft.id === unitId);\n if (!unit) return;\n executePlayerAction('deploy_unit', {\n unitId,\n unitName: unit.name,\n position,\n stats: {\n attack: unit.attack,\n defense: unit.defense\n }\n });\n setDeploymentPoints(prev => prev - 1);\n setSelectedUnits(prev => prev.filter(id => id !== unitId));\n };\n const useAbility = (abilityType, targetPosition) => {\n const abilities = {\n 'cyber_strike': {\n name: 'Cyber Strike',\n cost: 1\n },\n 'shield_boost': {\n name: 'Shield Boost',\n cost: 1\n },\n 'resource_drain': {\n name: 'Resource Drain',\n cost: 2\n }\n };\n const ability = abilities[abilityType];\n if (!ability) return;\n executePlayerAction('use_ability', {\n abilityType,\n abilityName: ability.name,\n targetPosition,\n cost: ability.cost\n });\n };\n const collectBattlefieldResource = resourcePosition => {\n executePlayerAction('collect_resource', {\n resourcePosition,\n resourceType: 'energy'\n });\n };\n const endTurn = () => {\n if (gameState.turn !== userWallet) return;\n socket.emit('end_turn', {\n sessionId: currentGameSession.id,\n playerId: userWallet\n });\n };\n const generateRandomNft = async () => {\n if (!devbaseClient || !userWallet || !sendTransaction) return;\n try {\n setLoading(true);\n const {\n Connection,\n PublicKey,\n Transaction,\n SystemProgram\n } = await import('@solana/web3.js');\n const connection = new Connection('https://rpc.dev.fun/3ca8b25830574602d8ec');\n const ownerAddress = await devbaseClient.evalString('$OWNER_ID');\n const transaction = new Transaction().add(SystemProgram.transfer({\n fromPubkey: new PublicKey(userWallet),\n toPubkey: new PublicKey(ownerAddress),\n lamports: 10000000\n }));\n await sendTransaction(transaction, connection);\n const randomNft = sampleNfts[Math.floor(Math.random() * sampleNfts.length)];\n const nftData = {\n name: randomNft.name,\n type: randomNft.type,\n image: randomNft.image,\n owner: userWallet,\n price: randomNft.price,\n attack: randomNft.attack,\n rarity: randomNft.rarity,\n defense: randomNft.defense,\n element: randomNft.element,\n tokenId: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,\n bonusAttack: 0,\n bonusDefense: 0\n };\n await devbaseClient.createEntity('nfts', nftData);\n if (socket) {\n socket.emit('nft_minted', {\n player: userProfile?.username || userWallet.slice(0, 8) + '...',\n name: randomNft.name,\n rarity: randomNft.rarity\n });\n }\n addToastNotification('🎉 Success!', `You summoned ${randomNft.name}!`, 'magic');\n await loadData();\n } catch (error) {\n console.error('Error minting NFT:', error);\n if (error.message?.includes('insufficient funds') || error.message?.includes('insufficient balance')) {\n addToastNotification('❌ Insufficient Funds', 'You need at least 0.01 SOL to summon an NFT!', 'error');\n } else if (error.message?.includes('User rejected')) {\n addToastNotification('❌ Transaction Cancelled', 'Payment was cancelled. NFT not summoned.', 'error');\n } else {\n addToastNotification('❌ Error', 'Failed to summon NFT. Try again!', 'error');\n }\n } finally {\n setLoading(false);\n }\n };\n const createFormation = async (selectedNfts, formationName) => {\n if (!devbaseClient || !userWallet || selectedNfts.length === 0) return;\n const totalAttack = selectedNfts.reduce((sum, nft) => sum + nft.attack, 0);\n const totalDefense = selectedNfts.reduce((sum, nft) => sum + nft.defense, 0);\n const formationData = {\n name: formationName,\n owner: userWallet,\n nftIds: selectedNfts.map(nft => nft.id),\n totalAttack,\n totalDefense,\n powerLevel: Math.floor((totalAttack + totalDefense) / 2)\n };\n try {\n setLoading(true);\n await devbaseClient.createEntity('formations', formationData);\n addToastNotification('⚡ Formation Created!', `${formationName} is ready for battle!`, 'success');\n await loadData();\n } catch (error) {\n console.error('Error creating formation:', error);\n addToastNotification('❌ Error', 'Failed to create formation. Try again!', 'error');\n } finally {\n setLoading(false);\n }\n };\n const createTrade = async (nftId, price) => {\n if (!devbaseClient || !userWallet || !price || price <= 0) return;\n try {\n setLoading(true);\n await devbaseClient.createEntity('trades', {\n nftId,\n seller: userWallet,\n price: parseFloat(price),\n status: 'active'\n });\n addToastNotification('✅ Listed!', 'Your NFT has been listed for trade!', 'success');\n setShowTradeModal(false);\n setSelectedNftForTrade(null);\n setTradePrice('');\n await loadData();\n } catch (error) {\n console.error('Error creating trade:', error);\n addToastNotification('❌ Error', 'Failed to list NFT for trade. Try again!', 'error');\n } finally {\n setLoading(false);\n }\n };\n const cancelTrade = async tradeId => {\n if (!devbaseClient || !userWallet) return;\n try {\n setLoading(true);\n await devbaseClient.updateEntity('trades', tradeId, {\n status: 'cancelled'\n });\n addToastNotification('✅ Cancelled!', 'Your trade listing has been removed!', 'success');\n await loadData();\n } catch (error) {\n console.error('Error cancelling trade:', error);\n addToastNotification('❌ Error', 'Failed to cancel trade. Try again!', 'error');\n } finally {\n setLoading(false);\n }\n };\n const openTradeModal = nft => {\n setSelectedNftForTrade(nft);\n setTradePrice(nft.price?.toString() || '');\n setShowTradeModal(true);\n };\n const openUpgradeModal = nft => {\n setSelectedNftForUpgrade(nft);\n setShowUpgradeModal(true);\n };\n const deleteNft = async nftId => {\n if (!devbaseClient || !userWallet) return;\n if (!confirm('Are you sure you want to permanently destroy this NFT? This action cannot be undone!')) {\n return;\n }\n try {\n setLoading(true);\n await devbaseClient.deleteEntity('nfts', nftId);\n addToastNotification('💥 NFT Destroyed!', 'Your NFT has been permanently removed from the cyber base!', 'success');\n await loadData();\n } catch (error) {\n console.error('Error deleting NFT:', error);\n addToastNotification('❌ Error', 'Failed to delete NFT. Try again!', 'error');\n } finally {\n setLoading(false);\n }\n };\n const upgradeNft = async (nftId, inventoryItemId, upgradeType, upgradeAmount) => {\n if (!devbaseClient || !userWallet) return;\n try {\n setLoading(true);\n const nft = myNfts.find(n => n.id === nftId);\n if (!nft) return;\n const updatedFields = {};\n if (upgradeType === 'attack') {\n updatedFields.bonusAttack = (nft.bonusAttack || 0) + upgradeAmount;\n } else if (upgradeType === 'defense') {\n updatedFields.bonusDefense = (nft.bonusDefense || 0) + upgradeAmount;\n }\n await devbaseClient.updateEntity('nfts', nftId, updatedFields);\n await devbaseClient.deleteEntity('inventory', inventoryItemId);\n addToastNotification('⚡ NFT Upgraded!', `${nft.name} gained +${upgradeAmount} ${upgradeType}!`, 'success');\n setShowUpgradeModal(false);\n setSelectedNftForUpgrade(null);\n await loadData();\n } catch (error) {\n console.error('Error upgrading NFT:', error);\n addToastNotification('❌ Error', 'Failed to upgrade NFT. Try again!', 'error');\n } finally {\n setLoading(false);\n }\n };\n const applyLevelBoost = async () => {\n if (!selectedNftForLevelBoost || !selectedBoostType || !devbaseClient) return;\n try {\n setLoading(true);\n const nft = myNfts.find(n => n.id === selectedNftForLevelBoost);\n if (!nft) return;\n const updatedFields = {};\n if (selectedBoostType === 'attack') {\n updatedFields.bonusAttack = (nft.bonusAttack || 0) + 5;\n } else if (selectedBoostType === 'defense') {\n updatedFields.bonusDefense = (nft.bonusDefense || 0) + 5;\n }\n await devbaseClient.updateEntity('nfts', selectedNftForLevelBoost, updatedFields);\n addToastNotification('🎉 Victory Bonus!', `${nft.name} gained +5 ${selectedBoostType}!`, 'magic');\n setIsUnlockingLevel(true);\n setTimeout(async () => {\n try {\n const newAiLevel = levelCompletionData.nextLevel;\n await devbaseClient.updateEntity('userProfiles', userProfile.id, {\n currentAiLevel: newAiLevel\n });\n addToastNotification('🔓 Level Unlocked!', `AI Level ${newAiLevel} is now available!`, 'magic');\n setShowLevelCompletionModal(false);\n setLevelCompletionData(null);\n setSelectedNftForLevelBoost(null);\n setSelectedBoostType('');\n setIsUnlockingLevel(false);\n await loadData();\n } catch (error) {\n console.error('Error unlocking level:', error);\n addToastNotification('❌ Error', 'Failed to unlock next level. Try again!', 'error');\n setIsUnlockingLevel(false);\n }\n }, 2000);\n } catch (error) {\n console.error('Error applying level boost:', error);\n addToastNotification('❌ Error', 'Failed to apply victory bonus. Try again!', 'error');\n } finally {\n setLoading(false);\n }\n };\n const buildBuilding = async buildingType => {\n if (!devbaseClient || !userWallet) return;\n const costs = {\n cyber_cannon: {\n gold: 800,\n gems: 25\n },\n portal_gun: {\n gold: 1200,\n gems: 40\n },\n quantum_pc: {\n gold: 1000,\n gems: 30\n },\n elixir_synth: {\n gold: 600,\n gems: 15\n },\n neural_tower: {\n gold: 500,\n gems: 12\n },\n holo_wall: {\n gold: 300,\n gems: 8\n }\n };\n const cost = costs[buildingType];\n if (resources.gold < cost.gold || resources.gems < cost.gems) {\n alert('Not enough resources!');\n return;\n }\n try {\n setLoading(true);\n await devbaseClient.createEntity('buildings', {\n owner: userWallet,\n type: buildingType,\n level: 1,\n health: 100\n });\n await devbaseClient.updateEntity('resources', resources.id, {\n gold: resources.gold - cost.gold,\n gems: resources.gems - cost.gems\n });\n await loadData();\n } catch (error) {\n console.error('Error building:', error);\n } finally {\n setLoading(false);\n }\n };\n const getRarityColor = rarity => {\n switch (rarity) {\n case 'legendary':\n return 'from-yellow-400 to-orange-500';\n case 'epic':\n return 'from-purple-400 to-pink-500';\n case 'rare':\n return 'from-blue-400 to-cyan-500';\n default:\n return 'from-gray-400 to-gray-600';\n }\n };\n const getElementIcon = element => {\n switch (element) {\n case 'social':\n return '📱';\n case 'code':\n return '💻';\n case 'chaos':\n return '🎲';\n case 'supreme':\n return '👑';\n case 'dominance':\n return '🔥';\n case 'tech':\n return '⚡';\n case 'laser':\n return '🔴';\n case 'portal':\n return '🌀';\n case 'quantum':\n return '🔬';\n case 'energy':\n return '⚡';\n case 'cyber':\n return '🧠';\n case 'light':\n return '✨';\n default:\n return '⭐';\n }\n };\n const NFTCard = ({\n nft,\n showPrice = false,\n onTrade,\n small = false,\n showUpgrade = false,\n onUpgrade,\n showDelete = false,\n onDelete\n }) => \n

\n {nft.image ? {nft.name}

: {getElementIcon(nft.element)}}\n \n {nft.rarity.toUpperCase()}\n \n

{nft.name}

\n \n \n {(nft.attack || 0) + (nft.bonusAttack || 0)}\n {(nft.bonusAttack || 0) > 0 && +{nft.bonusAttack}}\n \n \n \n {(nft.defense || 0) + (nft.bonusDefense || 0)}\n {(nft.bonusDefense || 0) > 0 && +{nft.bonusDefense}}\n \n

\n {showPrice &&

\n \n \n {nft.price} SOL\n \n {onTrade && onTrade(nft.id, nft.price)} className=\"bg-green-600 hover:bg-green-700 px-3 py-1 rounded text-white text-sm transition-colors\">\n Trade\n }\n

}\n {showUpgrade && onUpgrade && onUpgrade(nft)} className=\"w-full mt-2 bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-white text-sm transition-colors\">\n Upgrade\n }\n {showDelete && onDelete && onDelete(nft.id)} className=\"w-full mt-2 bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-white text-sm transition-colors\">\n Destroy\n }\n

\n ;\n const ProfileManager = () => {\n const [isEditing, setIsEditing] = useState(false);\n const [editUsername, setEditUsername] = useState(userProfile?.username || '');\n const [editProfilePicture, setEditProfilePicture] = useState(userProfile?.profilePicture || '');\n const handleSaveProfile = async () => {\n if (!editUsername.trim()) {\n addToastNotification('❌ Error', 'Username cannot be empty!', 'error');\n return;\n }\n await updateProfile(editUsername.trim(), editProfilePicture.trim() || userProfile?.profilePicture);\n setIsEditing(false);\n };\n const getBaseStrength = () => {\n return buildings.reduce((strength, building) => {\n const buildingStrength = {\n cyber_cannon: 80,\n portal_gun: 95,\n quantum_pc: 60,\n elixir_synth: 70,\n neural_tower: 50,\n holo_wall: 30\n };\n return strength + (buildingStrength[building.type] || 0);\n }, 0);\n };\n return

\n \n My Profile\n

\n {}\n

\n $\"Profile\"$ {\n e.target.src = `https://api.dicebear.com/7.x/avataaars/svg?seed=${userWallet}`;\n }} />\n

\n {userProfile?.username || userWallet.slice(0, 8) + '...'}\n

\n {userWallet.slice(0, 6)}...{userWallet.slice(-4)}\n

\n {}\n {isEditing ?

\n Username\n setEditUsername(e.target.value)} className=\"w-full bg-gray-600 text-white px-4 py-2 rounded-lg\" placeholder=\"Enter username...\" maxLength={20} />\n

\n Profile Picture URL\n setEditProfilePicture(e.target.value)} className=\"w-full bg-gray-600 text-white px-4 py-2 rounded-lg\" placeholder=\"https://example.com/image.jpg\" />\n

Leave empty for auto-generated avatar

\n \n \n Save\n \n {\n setIsEditing(false);\n setEditUsername(userProfile?.username || '');\n setEditProfilePicture(userProfile?.profilePicture || '');\n }} className=\"bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded-lg text-white font-bold\">\n Cancel\n \n

: setIsEditing(true)} className=\"w-full bg-purple-600 hover:bg-purple-700 px-4 py-3 rounded-lg text-white font-bold flex items-center justify-center gap-2\">\n \n Edit Profile\n }\n

\n {}\n

Commander Stats

\n {}\n

\n \n Battle Record\n

{userRanking?.wins || 0}

Wins

{userRanking?.losses || 0}

Losses

\n {userRanking && userRanking.wins + userRanking.losses > 0 ? Math.round(userRanking.wins / (userRanking.wins + userRanking.losses) * 100) : 0}%\n

Win Rate

\n {}\n

\n \n Collection\n

{myNfts.length}

NFTs Owned

{myFormations.length}

Formations

\n {}\n

\n \n Base Power\n

{buildings.length}

Buildings

{getBaseStrength()}

Defense Power

\n {}\n

{userRanking?.totalPower || 0}

Total Power Level

\n {}\n

Recent Battle History

\n {battles.filter(battle => battle.attacker === userWallet || battle.defender === userWallet).slice(-5).reverse().map(battle =>

\n \n vs {battle.defender === userWallet ? battle.attacker : battle.defender} - {battle.result === 'won' ? 'Victory!' : 'Defeat'}\n \n +{battle.goldReward} gold\n

)}\n {battles.filter(battle => battle.attacker === userWallet || battle.defender === userWallet).length === 0 &&

\n No battles yet. Start your cyber warfare journey!\n

}\n

;\n };\n const FormationBuilder = () => {\n const [selectedNfts, setSelectedNfts] = useState([]);\n const [formationName, setFormationName] = useState('');\n const toggleNftSelection = nft => {\n setSelectedNfts(prev => prev.find(n => n.id === nft.id) ? prev.filter(n => n.id !== nft.id) : [...prev, nft]);\n };\n return

\n \n Formation Builder\n

\n setFormationName(e.target.value)} className=\"w-full bg-gray-700 text-white px-4 py-2 rounded-lg mb-4\" />\n

\n {myNfts.map(nft =>

toggleNftSelection(nft)} className={`cursor-pointer ${selectedNfts.find(n => n.id === nft.id) ? 'ring-4 ring-yellow-400' : ''}`}>\n \n

)}\n

\n {selectedNfts.length > 0 &&

Formation Stats:

\n \n \n Total Attack: {selectedNfts.reduce((sum, nft) => sum + nft.attack, 0)}\n \n \n \n Total Defense: {selectedNfts.reduce((sum, nft) => sum + nft.defense, 0)}\n \n \n \n Power Level: {Math.floor(selectedNfts.reduce((sum, nft) => sum + nft.attack + nft.defense, 0) / 2)}\n \n

}\n \n

\n \n My Formations\n

\n {myFormations.map(formation =>

{formation.name}

\n \n \n {formation.totalAttack}\n \n \n \n {formation.totalDefense}\n \n \n \n {formation.powerLevel}\n \n

\n {formation.nftIds.length} NFTs\n

)}\n

;\n };\n const BaseManager = () => {\n const buildingTypes = [{\n type: 'cyber_cannon',\n name: 'Cyber Cannon',\n icon: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/IMG_5031_6db761ae.png',\n cost: {\n gold: 800,\n gems: 25\n },\n description: 'Laser defense system'\n }, {\n type: 'portal_gun',\n name: 'Portal Gun Defense',\n icon: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/ChatGPT Image Sep 12, 2025 at 02_29_33 PM_ce62e0d7.png',\n cost: {\n gold: 1200,\n gems: 40\n },\n description: 'Dimensional warfare'\n }, {\n type: 'quantum_pc',\n name: 'Quantum PC Mine',\n icon: '💻',\n cost: {\n gold: 1000,\n gems: 30\n },\n description: 'Generate quantum gold'\n }, {\n type: 'elixir_synth',\n name: 'Elixir Synthesizer',\n icon: '⚡',\n cost: {\n gold: 600,\n gems: 15\n },\n description: 'Energy collector'\n }, {\n type: 'neural_tower',\n name: 'Neural Tower',\n icon: '🧠',\n cost: {\n gold: 500,\n gems: 12\n },\n description: 'AI defense network'\n }, {\n type: 'holo_wall',\n name: 'Holographic Wall',\n icon: '✨',\n cost: {\n gold: 300,\n gems: 8\n },\n description: 'Light barrier protection'\n }];\n return

\n \n Cyber Base Management\n

\n {buildingTypes.map(building =>

\n {building.icon.startsWith('http') ?

: building.icon}\n

{building.name}

{building.description}

\n \n \n {building.cost.gold}\n \n \n \n {building.cost.gems}\n \n

\n \n

)}\n

My Cyber Base ({buildings.length})

\n {buildings.map(building =>

\n {(() => {\n const buildingType = buildingTypes.find(b => b.type === building.type);\n const icon = buildingType?.icon || '🏢';\n return icon.startsWith('http') ?

: icon;\n })()}\n

{building.type.replace('_', ' ')}

Lv.{building.level}

)}\n

;\n };\n const BattleArena = () => {\n const [selectedFormation, setSelectedFormation] = useState('');\n const [currentOpponent, setCurrentOpponent] = useState(null);\n const [battleInProgress, setBattleInProgress] = useState(false);\n const [battleTimer, setBattleTimer] = useState(20);\n const [, setBattlePhase] = useState('preparation');\n const generateAiOpponents = () => {\n const aiOpponents = [];\n const maxLevel = userProfile?.currentAiLevel || 1;\n for (let level = 1; level <= maxLevel; level++) {\n const basePower = 100 + level * 25;\n const adaptivePower = basePower + Math.floor(Math.random() * 50);\n aiOpponents.push({\n id: `ai_${level}`,\n level: level,\n name: `${getAiName(level)} Lv.${level}`,\n power: adaptivePower,\n reward: Math.floor(100 + level * 50 + level * 10 * Math.random()),\n difficulty: getAiDifficulty(level),\n tactics: getAiTactics(level),\n isUnlocked: true\n });\n }\n if (maxLevel < 40) {\n const nextLevel = maxLevel + 1;\n const basePower = 100 + nextLevel * 25;\n const adaptivePower = basePower + Math.floor(Math.random() * 50);\n aiOpponents.push({\n id: `ai_${nextLevel}`,\n level: nextLevel,\n name: `${getAiName(nextLevel)} Lv.${nextLevel}`,\n power: adaptivePower,\n reward: Math.floor(100 + nextLevel * 50 + nextLevel * 10 * Math.random()),\n difficulty: getAiDifficulty(nextLevel),\n tactics: getAiTactics(nextLevel),\n isUnlocked: false\n });\n }\n return aiOpponents;\n };\n const getAiName = level => {\n const names = ['Cyber Scout', 'Digital Guard', 'Neural Patrol', 'Quantum Soldier', 'Plasma Trooper', 'Cyber Elite', 'Digital Commander', 'Neural Captain', 'Quantum Veteran', 'Plasma Warrior', 'Cyber Specialist', 'Digital Enforcer', 'Neural Operative', 'Quantum Striker', 'Plasma Hunter', 'Cyber Champion', 'Digital Overlord', 'Neural Master', 'Quantum Elite', 'Plasma Lord', 'Cyber Destroyer', 'Digital Titan', 'Neural Dominator', 'Quantum Annihilator', 'Plasma Emperor', 'Cyber Nightmare', 'Digital Apocalypse', 'Neural Void', 'Quantum Devastator', 'Plasma Deity', 'Cyber Transcendent', 'Digital Godlike', 'Neural Omnipotent', 'Quantum Infinite', 'Plasma Eternal', 'Cyber Absolute', 'Digital Supreme', 'Neural Ultimate', 'Quantum Perfect', 'Plasma Divine'];\n return names[Math.min(level - 1, names.length - 1)];\n };\n const getAiDifficulty = level => {\n if (level <= 10) return 'Novice';\n if (level <= 20) return 'Advanced';\n if (level <= 30) return 'Expert';\n return 'Legendary';\n };\n const getAiTactics = level => {\n const tactics = ['Aggressive Rush', 'Defensive Wall', 'Balanced Strike', 'Counter Attack', 'Resource Drain', 'Formation Break', 'Elite Focus', 'Swarm Tactics', 'Precision Strike', 'Chaos Storm'];\n return tactics[Math.floor(level / 4) % tactics.length];\n };\n const opponents = generateAiOpponents();\n useEffect(() => {\n let interval;\n if (battleInProgress && battleTimer > 0) {\n interval = setInterval(() => {\n setBattleTimer(prev => {\n if (prev <= 1) {\n finishBattle();\n return 0;\n }\n return prev - 1;\n });\n }, 1000);\n }\n return () => clearInterval(interval);\n }, [battleInProgress, battleTimer]);\n const finishBattle = async () => {\n setBattlePhase('result');\n setBattleInProgress(false);\n if (!currentOpponent) return;\n const opponent = currentOpponent;\n console.log('Battle with opponent:', opponent);\n const playerPower = myFormations.find(f => f.id === selectedFormation)?.powerLevel || 0;\n const adaptiveFactor = 1 + opponent.level * 0.02;\n const adjustedAiPower = opponent.power * adaptiveFactor;\n const randomFactor = Math.random() * 0.3 - 0.15;\n const finalPlayerPower = playerPower * (1 + randomFactor);\n const finalAiPower = adjustedAiPower * (1 - randomFactor * 0.5);\n const battleResult = finalPlayerPower > finalAiPower ? 'won' : 'lost';\n const goldReward = battleResult === 'won' ? opponent.reward : -5;\n const newGoldAmount = Math.max(0, resources.gold + goldReward);\n const gemReward = battleResult === 'won' ? Math.floor(Math.random() * 5) + 1 : 0;\n const newGemAmount = resources.gems + gemReward;\n try {\n await devbaseClient.createEntity('battles', {\n attacker: userWallet,\n defender: opponent.id,\n result: battleResult,\n goldReward\n });\n await devbaseClient.updateEntity('resources', resources.id, {\n gold: newGoldAmount,\n gems: newGemAmount\n });\n if (userRanking) {\n const newWins = battleResult === 'won' ? userRanking.wins + 1 : userRanking.wins;\n const newLosses = battleResult === 'lost' ? userRanking.losses + 1 : userRanking.losses;\n await devbaseClient.updateEntity('rankings', userRanking.id, {\n wins: newWins,\n losses: newLosses\n });\n }\n if (battleResult === 'won' && userProfile && opponent.level === userProfile.currentAiLevel && opponent.level < 40) {\n console.log('Level completed! Current AI level:', userProfile.currentAiLevel, 'Defeated opponent level:', opponent.level);\n setLevelCompletionData({\n defeatedLevel: opponent.level,\n nextLevel: userProfile.currentAiLevel + 1,\n opponent: opponent\n });\n setShowLevelCompletionModal(true);\n }\n setCurrentOpponent(null);\n const resultMessage = battleResult === 'won' ? `🎉 Victory against ${opponent.name}! Earned ${goldReward} gold!` : `💀 Defeat by ${opponent.name}! Earned ${goldReward} gold for effort.`;\n addToastNotification(battleResult === 'won' ? '🏆 Victory!' : '💀 Defeat!', resultMessage, battleResult === 'won' ? 'success' : 'error');\n if (socket) {\n socket.emit('battle_completed', {\n winner: battleResult === 'won' ? userProfile?.username || userWallet.slice(0, 8) + '...' : opponent.name,\n loser: battleResult === 'won' ? opponent.name : userProfile?.username || userWallet.slice(0, 8) + '...'\n });\n }\n await loadData();\n } catch (error) {\n console.error('Error finishing battle:', error);\n }\n };\n return

\n \n Cyber Battle Arena\n

\n Select Formation:\n \n {resources.gold < 5 &&

⚠️ Insufficient Gold

You need at least 5 gold to battle. Visit Resources to top up!

}\n

\n {opponents.map(opponent =>

{opponent.name}

\n {!opponent.isUnlocked &&

\n 🔒 LOCKED\n

}\n

\n \n Power: {opponent.power}\n

\n Difficulty: {opponent.difficulty}\n

\n \n Reward: {opponent.reward} gold\n

\n {!opponent.isUnlocked &&

\n Defeat Level {opponent.level - 1} to unlock\n

}\n = 5 ? 1.05 : 1\n }} whileTap={{\n scale: opponent.isUnlocked && resources.gold >= 5 ? 0.95 : 1\n }} onClick={() => {\n if (resources.gold < 5) {\n addToastNotification('❌ Insufficient Gold', 'You need at least 5 gold to battle!', 'error');\n return;\n }\n if (opponent.isUnlocked && selectedFormation) {\n setCurrentOpponent({\n ...opponent,\n id: opponent.id,\n level: opponent.level,\n name: opponent.name,\n power: opponent.power,\n reward: opponent.reward,\n difficulty: opponent.difficulty,\n tactics: opponent.tactics,\n isUnlocked: opponent.isUnlocked\n });\n setBattleInProgress(true);\n setBattleTimer(20);\n setBattlePhase('combat');\n if (socket) {\n socket.emit('battle_started', {\n attacker: userProfile?.username || userWallet.slice(0, 8) + '...',\n defender: opponent.name\n });\n }\n }\n }} disabled={!selectedFormation || loading || !opponent.isUnlocked || battleInProgress || resources.gold < 5} className={`w-full ${opponent.isUnlocked && resources.gold >= 5 ? 'bg-red-600 hover:bg-red-700' : 'bg-gray-600 cursor-not-allowed'} disabled:bg-gray-600 px-4 py-2 rounded text-white font-bold transition-colors`}>\n {!opponent.isUnlocked ? '🔒 Locked' : resources.gold < 5 ? '💰 Need 5 Gold' : battleInProgress ? 'Battling...' : loading ? 'Starting...' : 'Attack!'}\n \n

)}\n

\n \n Battle History\n

\n {battles.slice(-5).reverse().map(battle =>

\n \n vs {battle.defender} - {battle.result === 'won' ? 'Victory!' : 'Defeat'}\n \n +{battle.goldReward} gold\n

)}\n

;\n };\n const topUpGold = async () => {\n if (!devbaseClient || !userWallet || !sendTransaction) return;\n try {\n setLoading(true);\n const {\n Connection,\n PublicKey,\n Transaction,\n SystemProgram\n } = await import('@solana/web3.js');\n const connection = new Connection('https://rpc.dev.fun/3ca8b25830574602d8ec');\n const ownerAddress = await devbaseClient.evalString('$OWNER_ID');\n const transaction = new Transaction().add(SystemProgram.transfer({\n fromPubkey: new PublicKey(userWallet),\n toPubkey: new PublicKey(ownerAddress),\n lamports: 10000000\n }));\n await sendTransaction(transaction, connection);\n await devbaseClient.updateEntity('resources', resources.id, {\n gold: resources.gold + 100,\n gems: resources.gems\n });\n addToastNotification('💰 Gold Added!', 'You received 100 gold!', 'success');\n await loadData();\n } catch (error) {\n console.error('Error topping up gold:', error);\n if (error.message?.includes('insufficient funds') || error.message?.includes('insufficient balance')) {\n addToastNotification('❌ Insufficient Funds', 'You need at least 0.01 SOL to top up!', 'error');\n } else if (error.message?.includes('User rejected')) {\n addToastNotification('❌ Transaction Cancelled', 'Top-up was cancelled.', 'error');\n } else {\n addToastNotification('❌ Error', 'Failed to top up gold. Try again!', 'error');\n }\n } finally {\n setLoading(false);\n }\n };\n const ResourceManager = () =>

\n \n Resource Management\n

\n \n

{resources.gold}

Gold

\n {resources.gold <= 10 && \n {loading ? 'Processing...' : 'Top Up 100 Gold (0.01 SOL)'}\n }\n

\n \n

{resources.gems}

Gems

\n {resources.gold <= 0 ?

\n \n 💰\n \n

Out of Gold!

\n \n You need gold to battle opponents\n

\n \n Each battle risks 5 gold when you lose\n

\n \n Top up to continue your conquest!\n

\n \n {loading ? 'Processing...' : 'Top Up 100 Gold (0.01 SOL)'}\n \n

\n \n

Earn Resources Through Combat!

\n \n Win battles to claim opponent stakes\n

\n \n Risk 5 gold per battle - winner takes rewards\n

\n \n Defeat stronger opponents for bigger rewards\n

\n setActiveTab('battles')} className=\"mt-6 bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 px-8 py-3 rounded-xl text-white font-bold\">\n Start Battling!\n \n

}\n

;\n const Shop = () => {\n const shopItems = [{\n id: 'forbidden_angel',\n name: 'Forbidden Angel',\n description: 'Mythic NFT warrior with divine powers - 75 ATK / 80 DEF',\n price: 0.1,\n currency: 'sol',\n icon: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/Untitled design_40815400.png',\n type: 'mythic_nft',\n rarity: 'mythic',\n attack: 75,\n defense: 80\n }, {\n id: 'architecture_nft',\n name: 'Architecture',\n description: 'Legendary builder NFT - 20 ATK / 90 DEF - \"I build I don\\'t fight\"',\n price: 5000,\n currency: 'gold',\n icon: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/IMG_5046_39bbbc98.png',\n type: 'legendary_nft',\n rarity: 'legendary',\n attack: 20,\n defense: 90\n }, {\n id: 'cool_fluff',\n name: 'Cool Fluff',\n description: 'A surprisingly tough fluff warrior - 25 ATK / 30 DEF',\n price: 70,\n currency: 'gold',\n icon: 'https://cdn.dev.fun/asset/3ca8b25830574602d8ec/IMG_5060_0ad412b4.png',\n type: 'legendary_nft',\n rarity: 'rare',\n attack: 25,\n defense: 30\n }, {\n id: 'power_boost_small',\n name: 'Power Boost Serum',\n description: 'Temporarily increases all NFT stats by 10% for 24 hours',\n price: 500,\n currency: 'gold',\n icon: '⚡',\n type: 'consumable'\n }, {\n id: 'power_boost_large',\n name: 'Mega Power Elixir',\n description: 'Permanently increases one NFT attack by 5 points',\n price: 1500,\n currency: 'gold',\n icon: '🧪',\n type: 'enhancement'\n }, {\n id: 'defense_crystal',\n name: 'Defense Crystal',\n description: 'Permanently increases one NFT defense by 5 points',\n price: 1200,\n currency: 'gold',\n icon: '💎',\n type: 'enhancement'\n }, {\n id: 'premium_pack',\n name: 'Premium NFT Pack',\n description: 'Guaranteed Epic or better NFT with bonus stats',\n price: 0.05,\n currency: 'sol',\n icon: '🎁',\n type: 'pack'\n }, {\n id: 'formation_slot',\n name: 'Formation Slot Expansion',\n description: 'Unlock an additional formation slot',\n price: 100,\n currency: 'gems',\n icon: '📋',\n type: 'upgrade'\n }];\n const events = [{\n id: 'battle_royale',\n name: 'Cyber Battle Royale',\n description: 'Survive 10 consecutive battles to win rare abilities',\n reward: 'Cyber Strike Ability',\n difficulty: 'Hard',\n duration: '3 days',\n participants: 127,\n icon: '⚔️'\n }, {\n id: 'treasure_hunt',\n name: 'Digital Treasure Hunt',\n description: 'Solve puzzles and find hidden NFTs across the metaverse',\n reward: 'Mystery Box + 1000 Gold',\n difficulty: 'Medium',\n duration: '7 days',\n participants: 89,\n icon: '🗺️'\n }, {\n id: 'speed_builder',\n name: 'Speed Builder Challenge',\n description: 'Build the strongest base in under 1 hour',\n reward: 'Quantum Constructor Tool',\n difficulty: 'Easy',\n duration: '1 hour',\n participants: 45,\n icon: '🏗️'\n }];\n const buyItem = async item => {\n if (!devbaseClient || !userWallet) return;\n if (item.currency === 'gold' && resources.gold < item.price) {\n addToastNotification('❌ Insufficient Funds', 'Not enough gold!', 'error');\n return;\n }\n if (item.currency === 'gems' && resources.gems < item.price) {\n addToastNotification('❌ Insufficient Funds', 'Not enough gems!', 'error');\n return;\n }\n if (item.currency === 'sol') {\n try {\n setLoading(true);\n const {\n Connection,\n PublicKey,\n Transaction,\n SystemProgram\n } = await import('@solana/web3.js');\n const connection = new Connection('https://rpc.dev.fun/3ca8b25830574602d8ec');\n const ownerAddress = await devbaseClient.evalString('$OWNER_ID');\n const transaction = new Transaction().add(SystemProgram.transfer({\n fromPubkey: new PublicKey(userWallet),\n toPubkey: new PublicKey(ownerAddress),\n lamports: item.price * 1000000000\n }));\n await sendTransaction(transaction, connection);\n } catch (error) {\n console.error('SOL payment failed:', error);\n addToastNotification('❌ Payment Failed', 'Transaction was cancelled or failed', 'error');\n setLoading(false);\n return;\n }\n }\n try {\n if (item.currency === 'gold') {\n await devbaseClient.updateEntity('resources', resources.id, {\n gold: resources.gold - item.price,\n gems: resources.gems\n });\n } else if (item.currency === 'gems') {\n await devbaseClient.updateEntity('resources', resources.id, {\n gold: resources.gold,\n gems: resources.gems - item.price\n });\n }\n if (item.type === 'mythic_nft' || item.type === 'legendary_nft') {\n const nftData = {\n name: item.name,\n type: item.type === 'mythic_nft' ? 'hero' : 'warrior',\n image: item.icon,\n owner: userWallet,\n price: item.price,\n attack: item.attack,\n rarity: item.rarity,\n defense: item.defense,\n element: item.type === 'mythic_nft' ? 'divine' : 'construct',\n tokenId: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,\n bonusAttack: 0,\n bonusDefense: 0\n };\n await devbaseClient.createEntity('nfts', nftData);\n if (socket) {\n socket.emit('nft_minted', {\n player: userProfile?.username || userWallet.slice(0, 8) + '...',\n name: item.name,\n rarity: item.rarity\n });\n }\n } else if (item.type === 'enhancement' || item.type === 'consumable') {\n await devbaseClient.createEntity('inventory', {\n owner: userWallet,\n itemId: item.id,\n itemName: item.name,\n itemType: item.type,\n quantity: 1,\n upgradeType: item.id.includes('power_boost') || item.id.includes('attack') ? 'attack' : 'defense',\n upgradeAmount: item.id.includes('large') || item.id.includes('crystal') ? 5 : 3\n });\n }\n addToastNotification('🎉 Purchase Successful!', `You bought ${item.name}!`, 'success');\n await loadData();\n } catch (error) {\n console.error('Purchase failed:', error);\n addToastNotification('❌ Error', 'Purchase failed. Try again!', 'error');\n } finally {\n setLoading(false);\n }\n };\n const joinEvent = event => {\n addToastNotification('🎮 Event Joined!', `You joined ${event.name}! Check back for updates.`, 'info');\n };\n return

\n {}\n {weeklyChallenge && \n

\n \n 🎯 Weekly Prize Challenge\n

{timeUntilReset}

Time Remaining

\n {}\n

🏆 Grand Prize

\n \n $\"Forbidden$ \n

\n MYTHIC\n

\n \n

Forbidden Angel

\n \n \n 75 ATK\n \n \n \n 80 DEF\n \n

\n 🌟 ULTRA RARE GIVEAWAY 🌟\n

\n {}\n

\n \n How to Win\n

\n \n Reach #1 on leaderboard\n

\n \n Win battles to gain power\n

\n \n Collect powerful NFTs\n

\n \n Build strong formations\n

Current Leader

\n {rankings.length > 0 ?

\n 👑\n

\n {rankings[0].username}\n {rankings[0].userId === userWallet && ' (You!)'}\n

\n {rankings[0].wins}W - {rankings[0].losses}L\n

{rankings[0].totalPower}

Power

\n No rankings yet. Be the first to claim the throne!\n

}\n {rankings.length > 0 && rankings[0]?.userId === userWallet && \n

🎉 You're winning! Hold your position! 🎉

\n }\n

\n }\n {}\n

\n \n Power Shop\n

\n {shopItems.map(item => \n

\n {item.icon.startsWith('http') ?

\n {item.type === 'mythic_nft' &&

\n MYTHIC\n

}\n {item.type === 'legendary_nft' &&

\n LEGENDARY\n

}\n

: item.icon}\n

{item.name}

{item.description}

\n {(item.type === 'mythic_nft' || item.type === 'legendary_nft') &&

\n \n \n {item.attack} ATK\n \n \n \n {item.defense} DEF\n \n

}\n

\n {item.currency === 'gold' && }\n {item.currency === 'gems' && }\n {item.currency === 'sol' && 💰}\n {item.price} {item.currency.toUpperCase()}\n

\n buyItem(item)} disabled={loading} className=\"w-full bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 disabled:from-gray-600 disabled:to-gray-700 px-4 py-2 rounded-lg text-white font-bold transition-all\">\n {loading ? 'Processing...' : 'Buy Now'}\n \n

\n )}\n

\n {}\n

\n \n Special Events\n

\n {events.map(event => \n

{event.icon}

{event.name}

{event.description}

\n Reward:\n {event.reward}\n

\n Difficulty:\n \n {event.difficulty}\n \n

\n Duration:\n {event.duration}\n

\n Participants:\n {event.participants}\n

\n joinEvent(event)} className=\"w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 px-4 py-2 rounded-lg text-white font-bold transition-all\">\n Join Event\n \n

\n )}\n

;\n };\n const Rankings = () => {\n const getRankIcon = index => {\n if (index === 0) return '🥇';\n if (index === 1) return '🥈';\n if (index === 2) return '🥉';\n return `#${index + 1}`;\n };\n const getRankColor = index => {\n if (index === 0) return 'from-yellow-400 to-orange-500';\n if (index === 1) return 'from-gray-400 to-gray-500';\n if (index === 2) return 'from-orange-400 to-yellow-600';\n return 'from-purple-400 to-blue-500';\n };\n return

\n {}\n {weeklyChallenge && \n

\n \n Weekly Challenge\n

{timeUntilReset}

Until Reset

\n {}\n

Grand Prize

\n $\"Forbidden$ \n

Forbidden Angel

MYTHIC

\n \n \n 75\n \n \n \n 80\n \n

\n {}\n

Challenge Rules

\n \n Reach #1 rank before week ends\n

\n \n Win battles to increase your power\n

\n \n Collect NFTs to boost total power\n

\n \n Build structures for extra strength\n

\n {rankings.length > 0 && rankings[0]?.userId === userWallet && \n

🎉 You're currently #1! 🎉

Hold your position to win!

\n }\n

\n \n Cyber Leaderboards\n

\n {userRanking &&

Your Stats

{userRanking.totalPower}

Total Power

{userRanking.wins}

Wins

{userRanking.losses}

Losses

\n {userRanking.wins + userRanking.losses > 0 ? Math.round(userRanking.wins / (userRanking.wins + userRanking.losses) * 100) : 0}%\n

Win Rate

}\n

Top Cyber Commanders

\n {rankings.slice(0, 10).map((ranking, index) =>

\n {getRankIcon(index)}\n

\n {ranking.username}\n {ranking.userId === userWallet && (You)}\n

\n {ranking.wins}W - {ranking.losses}L\n

{ranking.totalPower}

Power

)}\n

;\n };\n if (!userWallet) {\n return

\n Build the ultimate blockchain army! Collect, trade, and combine rare NFT warriors to dominate the metaverse.\n

\n \n

;\n }\n return

\n {}\n

\n {Array.from({\n length: 20\n }, (_, i) => 0.5 ? 30 : -30, 0],\n opacity: [0.3, 0.8, 0.3]\n }} transition={{\n duration: 3 + Math.random() * 4,\n repeat: Infinity,\n delay: Math.random() * 2\n }} />)}\n

\n {}\n

\n \n \n \n

\n {}\n \n

\n \n

\n \n \n \n \n \n {onlineUsers}\n online\n \n setIsChatOpen(!isChatOpen)} className=\"flex items-center gap-2 bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg text-white transition-colors\">\n \n Chat\n \n \n

\n {}\n \n {toastNotifications.map(notification => \n

{notification.title}

{notification.message}

\n setToastNotifications(prev => prev.filter(n => n.id !== notification.id))} className=\"text-white hover:text-gray-300 ml-2\">\n \n \n

\n )}\n \n {}\n \n {isChatOpen && \n

\n \n Live Chat\n

\n setIsChatOpen(false)} className=\"text-gray-400 hover:text-white\">\n \n \n

\n \n {chatMessages.map(message => \n

{\n e.target.src = `https://api.dicebear.com/7.x/avataaars/svg?seed=${message.walletAddress || message.player}`;\n }} />\n

\n {message.player}\n {message.walletAddress === userWallet && (You)}\n

{message.text}

\n )}\n \n {chatMessages.length === 0 &&

\n \n

No messages yet. Start the conversation!

}\n

\n setChatInput(e.target.value)} onKeyPress={handleKeyPress} placeholder=\"Type a message...\" className=\"flex-1 bg-gray-700 text-white px-3 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500\" maxLength={200} />\n \n \n \n

\n }\n \n

\n \n {resources.gold}\n

\n \n {resources.gems}\n

\n {battleNotifications.length > 0 &&

Live Updates:

\n {battleNotifications[battleNotifications.length - 1]?.message}\n

}\n

\n \n {[{\n id: 'collection',\n label: 'My Army',\n icon: Castle\n }, {\n id: 'profile',\n label: 'Profile',\n icon: User\n }, {\n id: 'base',\n label: 'Cyber Base',\n icon: Hammer\n }, {\n id: 'formations',\n label: 'Formations',\n icon: Zap\n }, {\n id: 'battles',\n label: 'Battles',\n icon: Target\n }, {\n id: 'arena',\n label: 'Arena',\n icon: Sword\n }, {\n id: 'multiplayer',\n label: 'Multiplayer',\n icon: Users\n }, {\n id: 'rankings',\n label: 'Rankings',\n icon: Medal\n }, {\n id: 'resources',\n label: 'Resources',\n icon: Gem\n }, {\n id: 'shop',\n label: 'Shop & Events',\n icon: Crown\n }, {\n id: 'marketplace',\n label: 'Marketplace',\n icon: Coins\n }, {\n id: 'inventory',\n label: 'Inventory',\n icon: Star\n }, {\n id: 'mint',\n label: 'Summon NFT',\n icon: Plus\n }].map(tab => setActiveTab(tab.id)} whileHover={{\n scale: 1.05,\n y: -2\n }} whileTap={{\n scale: 0.95\n }} className={`flex items-center gap-2 px-6 py-3 rounded-lg font-bold transition-all whitespace-nowrap ${activeTab === tab.id ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}`}>\n \n {tab.label}\n )}\n \n \n {activeTab === 'collection' &&

\n \n My Cyber Army ({myNfts.length})\n

\n \n {myNfts.map((nft, index) => {\n const isListed = trades.find(trade => trade.nftId === nft.id && trade.status === 'active' && trade.seller === userWallet);\n return \n \n {isListed ?

Listed for {isListed.price} SOL

\n cancelTrade(isListed.id)} className=\"w-full bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg text-white font-bold transition-colors\">\n Remove Listing\n \n

: openTradeModal(nft)} className=\"w-full bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg text-white font-bold transition-colors\">\n List for Trade\n }\n ;\n })}\n \n {myNfts.length === 0 && \n \n ⚡\n \n

Your cyber army awaits! Summon your first NFT warrior.

\n }\n

}\n \n {activeTab === 'profile' && }\n {activeTab === 'base' && }\n {activeTab === 'formations' && }\n {activeTab === 'battles' && }\n {activeTab === 'arena' &&

\n \n Battle Arena Status\n

\n {battleInProgress ? \n

\n \n ⚔️\n \n

Battle in Progress!

Cyber warfare is underway...

Battle Timer

\n \n {battleTimer}s\n \n

\n \n

Your Power

{userRanking?.totalPower || 0}

{userProfile?.username}

Enemy Power

AI Opponent

Adaptive AI

\n \n Battle Status\n

\n Phase:\n Combat\n

\n Formations Deployed:\n Active\n

\n Battle Type:\n AI Battle\n

\n \n Battle will conclude automatically when timer reaches zero\n \n

\n : \n

\n \n 🏟️\n \n

Arena is Quiet

No active battles at the moment. Head to the Battles section to start combat!

Ready for Battle

{myFormations.length > 0 ? '✅' : '❌'}

{myFormations.length} Formations

Your Power

{userRanking?.totalPower || 0}

Total Combat Power

Battle Record

{userRanking?.wins || 0}W - {userRanking?.losses || 0}L

Win Rate: {userRanking && userRanking.wins + userRanking.losses > 0 ? Math.round(userRanking.wins / (userRanking.wins + userRanking.losses) * 100) : 0}%

\n setActiveTab('battles')} className=\"bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 px-8 py-4 rounded-xl text-white font-bold text-xl\">\n Enter Battle Arena\n \n

\n }\n

\n \n Recent Arena Activity\n

\n {battles.slice(-3).reverse().map((battle, index) => \n

\n {battle.result === 'won' ? '🏆 Victory!' : '💀 Defeat'} vs {battle.defender}\n

\n Earned {battle.goldReward} gold\n

\n {battle.result === 'won' ? '✅' : '❌'}\n

\n )}\n {battles.length === 0 &&

🗡️

No battle history yet. Start your first combat to see results here!

}\n

}\n {activeTab === 'multiplayer' &&

\n \n Multiplayer Arena\n

\n {}\n {currentGameSession && \n

\n \n Active Game Session\n

You

{userRanking?.username}

Power: {userRanking?.totalPower || 0}

Opponent

\n {opponentData?.username || (currentGameSession.status === 'waiting' ? 'Waiting for player...' : 'Unknown')}\n

\n Power: {currentGameSession.opponentPower || 'N/A'}\n

\n {!gameInProgress && currentGameSession.status === 'active' && \n Start Battle!\n }\n {gameInProgress &&

\n \n ⚔️\n \n

Battle in Progress!

\n Phase: {gameState.phase} | Turn: {gameState.turn === userWallet ? 'Your Turn' : 'Opponent\\'s Turn'}\n

\n {gameState.timer > 0 &&

\n Time left: {gameState.timer}s\n

}\n

\n {}\n

Deploy Units ({deploymentPoints} points)

\n {myNfts.slice(0, 4).map(nft => deployUnit(nft.id, `pos_${Math.random()}`)} disabled={gameState.turn !== userWallet || deploymentPoints <= 0} className=\"bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 p-2 rounded text-white text-xs\">\n {nft.name} ({nft.attack}/{nft.defense})\n )}\n

\n {}\n

Abilities

\n {['cyber_strike', 'shield_boost', 'resource_drain'].map(ability => useAbility(ability, 'center')} disabled={gameState.turn !== userWallet} className=\"w-full bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 p-2 rounded text-white text-xs\">\n {ability.replace('_', ' ').toUpperCase()}\n )}\n

\n {}\n

Actions

\n collectBattlefieldResource('center')} disabled={gameState.turn !== userWallet} className=\"w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-600 p-2 rounded text-white text-xs\">\n Collect Energy\n \n \n End Turn\n \n

\n {}\n

Battle Log

\n {battleLog.map(log =>

\n {log.player.slice(0, 8)}...: {log.message}\n

)}\n

\n {}\n

Battlefield

\n {Array.from({\n length: 25\n }, (_, i) => {\n const position = `pos_${i}`;\n const hasUnit = gameState.battlefield.deployedUnits[position];\n const hasResource = gameState.battlefield.resources[position];\n return {\n if (selectedAction === 'deploy' && selectedUnits.length > 0) {\n deployUnit(selectedUnits[0], position);\n }\n }}>\n {hasUnit && '⚔️'}\n {hasResource && '💎'}\n ;\n })}\n

}\n \n Leave Session\n \n

\n }\n {}\n \n {matchFound && \n \n

🎯

Match Found!

{matchFound.opponent.username}

Power: {matchFound.opponent.totalPower}

\n {matchFound.opponent.wins}W - {matchFound.opponent.losses}L\n

\n acceptMatch(matchFound)} disabled={loading} className=\"flex-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-3 rounded-lg text-white font-bold\">\n Accept\n \n setMatchFound(null)} className=\"flex-1 bg-red-600 hover:bg-red-700 px-4 py-3 rounded-lg text-white font-bold\">\n Decline\n \n

\n \n }\n \n {!currentGameSession && <>\n {}\n

\n \n Ranked Matchmaking\n

\n {!isInQueue ?

\n Find opponents with similar skill levels for ranked battles!\n

\n \n Join Matchmaking\n \n

\n \n 🔍\n \n

Searching for opponent...

Time in queue: {Math.floor(queueTimer / 60)}:{(queueTimer % 60).toString().padStart(2, '0')}

\n \n Leave Queue\n \n

}\n

\n {}\n

\n \n Private Game Sessions\n

\n \n Create Private Game\n \n

Available Sessions

\n {gameSessions.length === 0 ?

\n No active game sessions. Create one to get started!\n

\n {gameSessions.map(session =>

Host: {session.host.slice(0, 8)}...

Power: {session.hostPower}

Type: {session.gameType}

\n \n {session.status.toUpperCase()}\n \n

\n {session.host !== userWallet && session.status === 'waiting' && joinGameSession(session.id)} disabled={loading} className=\"w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded text-white font-bold\">\n Join Session\n }\n {session.host === userWallet &&

\n Your Session - Waiting for opponent\n

}\n

)}\n

}\n

\n }\n

}\n {activeTab === 'rankings' && }\n {activeTab === 'resources' && }\n {activeTab === 'shop' && }\n {activeTab === 'marketplace' &&

\n \n Cyber NFT Marketplace\n

\n \n Marketplace\n

\n {}\n {trades.filter(trade => trade.status === 'active' && trade.seller === userWallet).length > 0 &&

Your Listings

\n {trades.filter(trade => trade.status === 'active' && trade.seller === userWallet).map(trade => {\n const nft = allNfts.find(n => n.id === trade.nftId);\n if (!nft) return null;\n return

\n \n cancelTrade(trade.id)} className=\"w-full bg-red-600 hover:bg-red-700 px-3 py-2 rounded text-white font-bold text-sm transition-colors\">\n Remove Listing\n \n

;\n })}\n

}\n {}\n

Available Trades

\n {trades.filter(trade => trade.status === 'active' && trade.seller !== userWallet).map(trade => {\n const nft = allNfts.find(n => n.id === trade.nftId);\n if (!nft) return null;\n return {}} />;\n })}\n

\n {trades.filter(trade => trade.status === 'active' && trade.seller !== userWallet).length === 0 &&

🏪

No active trades at the moment.

List your NFTs for trade in your collection!

}\n

}\n {activeTab === 'mint' &&

✨

Summon Cyber Warriors

\n Discover powerful warriors and legendary heroes in our custom NFT collection!\n

\n \n {loading ? \n Summoning...\n : 'Summon NFT (0.01 SOL)'}\n \n

}\n {}\n \n {showTradeModal && \n \n

List NFT for Trade

\n {selectedNftForTrade &&

\n \n

\n Set Price (SOL)\n setTradePrice(e.target.value)} className=\"w-full bg-gray-700 text-white px-4 py-2 rounded-lg\" placeholder=\"0.001\" />\n

Minimum: 0.001 SOL

\n createTrade(selectedNftForTrade.id, tradePrice)} disabled={loading || !tradePrice || parseFloat(tradePrice) < 0.001} className=\"flex-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded-lg text-white font-bold\">\n {loading ? 'Listing...' : 'List NFT'}\n \n {\n setShowTradeModal(false);\n setSelectedNftForTrade(null);\n setTradePrice('');\n }} className=\"flex-1 bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded-lg text-white font-bold\">\n Cancel\n \n

}\n

\n \n }\n \n {}\n \n {showUpgradeModal && \n \n

Upgrade NFT

\n {selectedNftForUpgrade &&

\n \n

Select Power-Up

\n {inventory.length === 0 ?

No power-ups available.

Buy some from the shop first!

\n {inventory.map(item => upgradeNft(selectedNftForUpgrade.id, item.id, item.upgradeType, item.upgradeAmount)} disabled={loading} className=\"w-full bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 p-3 rounded-lg text-left transition-colors\">\n

{item.itemName}

\n +{item.upgradeAmount} {item.upgradeType}\n

\n {item.upgradeType === 'attack' ? '🧪' : '💎'}\n

\n )}\n

}\n

\n {\n setShowUpgradeModal(false);\n setSelectedNftForUpgrade(null);\n }} className=\"w-full bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded-lg text-white font-bold\">\n Cancel\n \n

}\n

\n \n }\n \n {}\n \n {showLevelCompletionModal && \n \n

\n {isUnlockingLevel ?

\n \n 🔓\n \n \n Unlocking Level {levelCompletionData?.nextLevel}...\n \n

\n \n

Preparing new challenges...

: <>\n

\n \n 🏆\n \n

Level Completed!

\n You defeated {levelCompletionData?.opponent.name}!\n

\n Choose your victory bonus: +5 to any NFT!\n

\n {}\n

Select Boost Type

\n setSelectedBoostType('attack')} className={`flex-1 p-4 rounded-lg border-2 transition-all ${selectedBoostType === 'attack' ? 'border-red-400 bg-red-600 text-white' : 'border-gray-600 bg-gray-700 text-gray-300 hover:border-red-400'}`}>\n

⚔️

Attack +5

Boost damage

\n \n setSelectedBoostType('defense')} className={`flex-1 p-4 rounded-lg border-2 transition-all ${selectedBoostType === 'defense' ? 'border-blue-400 bg-blue-600 text-white' : 'border-gray-600 bg-gray-700 text-gray-300 hover:border-blue-400'}`}>\n

🛡️

Defense +5

Boost protection

\n \n

\n {}\n {selectedBoostType && \n

Choose NFT to Boost

\n {myNfts.map(nft => setSelectedNftForLevelBoost(nft.id)} className={`p-3 rounded-lg border-2 transition-all ${selectedNftForLevelBoost === nft.id ? 'border-yellow-400 bg-yellow-600 bg-opacity-20' : 'border-gray-600 bg-gray-700 hover:border-yellow-400'}`}>\n

\n {nft.image ?

\n {getElementIcon(nft.element)}\n

}\n

{nft.name}

\n ⚔️{(nft.attack || 0) + (nft.bonusAttack || 0)}\n 🛡️{(nft.defense || 0) + (nft.bonusDefense || 0)}\n

\n )}\n

\n }\n

\n \n {loading ? 'Applying...' : 'Apply Boost & Unlock'}\n \n

\n }\n

\n \n }\n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"@devfunlabs/web-sdk\":\"0.5.6\",\"lucide-react\":\"0.441.0\",\"socket.io-client\":\"4.7.1\",\"framer-motion\":\"10.16.4\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\",\"@solana/web3.js\":\"1.95.3\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/wallet-adapter-base\":\"0.9.23\"}}","appFunctions",[82,90,96,102,108,114],{"_14":83,"_37":84,"_39":85,"_20":86,"_87":88,"_89":42},["B","26314"],["D",1757866147412],["D",1757866147412],"$FUNC_CALCULATE_GOLD_REWARD","body","async function $FUNC_CALCULATE_GOLD_REWARD(battleResult) {\n return battleResult === 'won' ? 10 : -5;\n }","commitId",{"_14":91,"_37":92,"_39":93,"_20":94,"_87":95,"_89":42},["B","26315"],["D",1757866147419],["D",1757866147419],"$FUNC_DETERMINE_BATTLE_RESULT","async function $FUNC_DETERMINE_BATTLE_RESULT(attackerId, defenderId) {\n const attackerPower = await $FUNC_GET_USER_TOTAL_POWER(attackerId);\n const defenderPower = await $FUNC_GET_USER_TOTAL_POWER(defenderId);\n\n // Simple win/loss logic based on power, with some randomness\n const randomFactor = Math.random() * 0.2 - 0.1; // -0.1 to +0.1\n const effectiveAttackerPower = attackerPower * (1 + randomFactor);\n const effectiveDefenderPower = defenderPower * (1 - randomFactor);\n\n if (effectiveAttackerPower > effectiveDefenderPower) {\n return 'won';\n } else {\n return 'lost';\n }\n }",{"_14":97,"_37":98,"_39":99,"_20":100,"_87":101,"_89":42},["B","26316"],["D",1757866147421],["D",1757866147421],"$FUNC_GET_CURRENT_WEEK","async function $FUNC_GET_CURRENT_WEEK() {\n const now = new Date();\n const yearStart = new Date(now.getFullYear(), 0, 1);\n const dayOfYear = Math.floor((now - yearStart) / (24 * 60 * 60 * 1000));\n return Math.ceil(dayOfYear / 7);\n }",{"_14":103,"_37":104,"_39":105,"_20":106,"_87":107,"_89":42},["B","26317"],["D",1757866147426],["D",1757866147426],"$FUNC_GET_USER_TOTAL_POWER","async function $FUNC_GET_USER_TOTAL_POWER(userId) {\n const ranking = await $ENTITY('rankings').get({ userId: userId });\n return ranking ? ranking.totalPower : 0;\n }",{"_14":109,"_37":110,"_39":111,"_20":112,"_87":113,"_89":42},["B","26318"],["D",1757866147428],["D",1757866147428],"$FUNC_GET_WEEK_END_TIME","async function $FUNC_GET_WEEK_END_TIME() {\n const now = new Date();\n const dayOfWeek = now.getDay();\n const daysToAdd = dayOfWeek === 0 ? 0 : 7 - dayOfWeek; // Sunday = 6\n const weekEnd = new Date(now);\n weekEnd.setDate(now.getDate() + daysToAdd);\n weekEnd.setHours(23, 59, 59, 999);\n return weekEnd.getTime();\n }",{"_14":115,"_37":116,"_39":117,"_20":118,"_87":119,"_89":42},["B","26319"],["D",1757866147430],["D",1757866147430],"$FUNC_GET_WEEK_START_TIME","async function $FUNC_GET_WEEK_START_TIME() {\n const now = new Date();\n const dayOfWeek = now.getDay();\n const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // Monday = 0\n const weekStart = new Date(now);\n weekStart.setDate(now.getDate() - daysToSubtract);\n weekStart.setHours(0, 0, 0, 0);\n return weekStart.getTime();\n }","token","upstreamApp","isLordOfDev","analytics",[125,129,131,133,135,137,139,141,143,145,147,149,151,153,155,157,159],{"_126":127,"_128":62},"day","2025-08-31","runCount",{"_126":130,"_128":62},"2025-09-01",{"_126":132,"_128":62},"2025-09-02",{"_126":134,"_128":62},"2025-09-03",{"_126":136,"_128":62},"2025-09-04",{"_126":138,"_128":62},"2025-09-05",{"_126":140,"_128":62},"2025-09-06",{"_126":142,"_128":62},"2025-09-07",{"_126":144,"_128":62},"2025-09-08",{"_126":146,"_128":62},"2025-09-09",{"_126":148,"_128":62},"2025-09-10",{"_126":150,"_128":62},"2025-09-11",{"_126":152,"_128":62},"2025-09-12",{"_126":154,"_128":62},"2025-09-13",{"_126":152,"_128":156},12,{"_126":154,"_128":158},16,{"_126":160,"_128":161},"2025-09-14",41,"snapshot","ogImage","https://cdn.dev.fun/og/image/3ca8b25830574602d8ec/d32f4f37.webp","isDevbase","project",{"_14":19,"_168":-5,"_20":169,"_170":171,"_22":172},"image","Fluffy ","oneliner","Sleek, fluffy Web3 sites","Create impossibly sleek one-page landing sites for Web3 projects that somehow manage to be both cutting-edge and adorably fluffy. Watch as your crypto project gets wrapped in silk-smooth animations, cloud-soft gradients, and typography so clean it makes minimalists weep with joy.","actionData","errors"]

say something