[{"_1":2,"_141":-5,"_142":-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,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65,"_66":65,"_67":65,"_68":65,"_69":65,"_70":65,"_71":17,"_72":17,"_73":74,"_75":76,"_77":78,"_79":80,"_81":82,"_99":-5,"_100":17,"_101":102,"_137":31,"_138":139,"_140":17},"id","b8bb24936a2eb4fe9ec9","isMyApp",false,"name","sparkchain","description","Launch your personal satellite fleet into a mesmerizing global network where each tap propels another orbiter into space! Invite friends to double your deployment speed and watch as Elon himself might just make a surprise appearance.","brief","","isLive",true,"isPublic","tags",[29],"👑","cover","https://cdn.dev.fun/snapshot/b8bb24936a2eb4fe9ec9/55898_071900e4.webp","cdnUrl","https://cdn.dev.fun/app/b8bb24936a2eb4fe9ec9/55898","createdAt",["D",1740773318562],"updatedAt",["D",1745157518705],"lastCommitId",["B","55898"],"tier",1,"credits",120,{"_14":45,"_46":47,"_48":-5,"_49":47,"_50":51,"_52":53,"_54":55},"46c87991-407f-42a0-9a88-9d9c1dee10e8","uniqueId","89sFxq9mLKJLsb8WDzjm3kiXFnQhAQYyJypfRBQexE8a","username","solanaWallet","displayName","89s...E8a","bio","(buidl, buidl)","avatar","/avatar.svg","commitCount",150,"forkCount",2,"likeCount",6,"runsCount",4130,"downvoteCount",0,"upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","G3vhNt2y8njvpnC7P8rECo7zZRjxrDY4ed4HRm9Kpump","code","import React, { useState, useEffect, useRef, useMemo, useCallback, Suspense } from 'react';\nimport { Canvas, useFrame, useThree } from '@react-three/fiber';\nimport { OrbitControls, Stars, Text, useTexture } from '@react-three/drei';\nimport * as THREE from 'three';\nimport { io } from 'socket.io-client';\nimport { StateClient } from '@devfunlabs/state-client';\nimport { Copy, Rocket, Users, Volume2, VolumeX, Gift, Palette, ArrowLeftRight, Star, AlertTriangle, Mail, User, LogIn, UserPlus, LogOut, Coins, Zap, Share2, Check, UserCheck, RefreshCw, ChevronUp, ChevronDown, Clock, BarChart2, DollarSign, PieChart, Activity, Target, Shield, Layers, Send, MessageSquare, UserCog, MapPin, Flag, Calendar, Info, Award, Hash, Settings, Radio } from 'lucide-react';\nimport { ConnectionProvider, WalletProvider } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport { DevfunWalletAdapter } from \"@devfunlabs/wallet-adapter-devfun\";\nimport { WalletAdapterNetwork } from \"@solana/wallet-adapter-base\";\nimport { clusterApiUrl } from \"@solana/web3.js\";\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nconst socket = io('wss://ws.dev.fun/app-b8bb24936a2eb4fe9ec9');\nconst client = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: 'b8bb24936a2eb4fe9ec9'\n});\nconst SPARK_COIN = {\n name: \"SparkCoin\",\n symbol: \"SPARK\",\n decimals: 9,\n baseValue: 0.01,\n valuePerSatellite: 0.005,\n valuePerInvite: 0.002,\n stakingAPY: 12,\n networkMultiplier: 0.001\n};\nconst Earth = ({\n scale = 1,\n userLocation,\n chatLocations = [],\n isSelectionMode = false,\n onLocationSelect = null\n}) => {\n const earthRef = useRef();\n const [hoverPoint, setHoverPoint] = useState(null);\n const [earthTexture, earthBumpMap, earthSpecMap] = useTexture(['https://cdn.jsdelivr.net/gh/mrdoob/three.js@master/examples/textures/planets/earth_atmos_2048.jpg', 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@master/examples/textures/planets/earth_normal_2048.jpg', 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@master/examples/textures/planets/earth_specular_2048.jpg'], textures => {\n console.log('Earth textures loaded successfully');\n }, error => {\n console.error('Failed to load Earth textures:', error);\n });\n const latLngToPosition = useCallback((lat, lng, radius) => {\n const phi = (90 - lat) * (Math.PI / 180);\n const theta = (lng + 180) * (Math.PI / 180);\n const x = -radius * Math.sin(phi) * Math.cos(theta);\n const y = radius * Math.cos(phi);\n const z = radius * Math.sin(phi) * Math.sin(theta);\n return [x, y, z];\n }, []);\n const handleEarthClick = useCallback(event => {\n if (isSelectionMode && onLocationSelect && earthRef.current) {\n event.stopPropagation();\n const intersection = event.intersections.find(i => i.object === earthRef.current);\n if (intersection) {\n const point = intersection.point.clone().normalize();\n const lat = 90 - Math.acos(point.y) * 180 / Math.PI;\n const lng = Math.atan2(point.z, -point.x) * 180 / Math.PI + 180;\n const x = (lng + 180) / 360 * 2 - 1;\n const y = (lat + 90) / 180 * 2 - 1;\n onLocationSelect({\n lat,\n lng,\n x,\n y\n });\n }\n }\n }, [isSelectionMode, onLocationSelect]);\n const handleEarthPointerMove = useCallback(event => {\n if (isSelectionMode && earthRef.current) {\n const intersection = event.intersections.find(i => i.object === earthRef.current);\n if (intersection) {\n const point = intersection.point.clone().normalize();\n const lat = 90 - Math.acos(point.y) * 180 / Math.PI;\n const lng = Math.atan2(point.z, -point.x) * 180 / Math.PI + 180;\n setHoverPoint([...latLngToPosition(lat, lng, scale * 1.01)]);\n } else {\n setHoverPoint(null);\n }\n }\n }, [isSelectionMode, latLngToPosition, scale]);\n return \n \n \n \n \n {isSelectionMode && hoverPoint && \n \n \n \n }\n {}\n {userLocation && \n {}\n {(() => {\n const lng = (userLocation.x + 1) / 2 * 360 - 180;\n const lat = (userLocation.y + 1) / 2 * 180 - 90;\n const position = latLngToPosition(lat, lng, scale * 1.01);\n return \n \n \n \n \n \n ;\n })()}\n }\n {}\n {chatLocations.map((location, index) => {\n if (!location.lat || !location.lng) return null;\n const position = latLngToPosition(location.lat, location.lng, scale * 1.01);\n return \n \n \n 0 ? 2 : 1} />\n \n {location.messageCount > 0 && }\n ;\n })}\n ;\n};\nconst Transmitter = ({\n position,\n intensity = 1.0,\n isActive = false,\n onClick\n}) => {\n const ref = useRef();\n const pulseRef = useRef(0);\n useFrame((state, delta) => {\n if (ref.current && isActive) {\n pulseRef.current += delta * 2;\n const pulse = Math.sin(pulseRef.current) * 0.3 + 0.7;\n ref.current.scale.set(pulse, pulse, pulse);\n }\n });\n return \n \n \n \n \n \n {isActive && \n \n \n }\n ;\n};\nconst SpacecraftCockpit = ({\n color,\n camera,\n inviteCoPilot,\n hasCoPilot = false\n}) => {\n const {\n scene\n } = useThree();\n const cockpitRef = useRef();\n const controlsRef = useRef();\n const coPilotSeatRef = useRef();\n const controlColor = useMemo(() => {\n const colorObj = new THREE.Color(color);\n return colorObj.getStyle();\n }, [color]);\n useFrame(() => {\n if (cockpitRef.current && camera) {\n cockpitRef.current.position.copy(camera.position);\n cockpitRef.current.rotation.copy(camera.rotation);\n const direction = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);\n cockpitRef.current.position.add(direction.multiplyScalar(0.2));\n if (controlsRef.current) {\n const dashDirection = new THREE.Vector3(0, -0.15, -0.4).applyQuaternion(camera.quaternion);\n controlsRef.current.position.copy(camera.position).add(dashDirection);\n controlsRef.current.rotation.copy(camera.rotation);\n }\n }\n });\n useEffect(() => {\n return () => {\n if (cockpitRef.current) {\n scene.remove(cockpitRef.current);\n }\n if (controlsRef.current) {\n scene.remove(controlsRef.current);\n }\n };\n }, [scene]);\n return \n {}\n \n {}\n \n \n \n \n {}\n \n \n \n \n {}\n \n \n \n \n {}\n \n \n \n \n \n \n \n \n \n {}\n \n \n {}\n \n \n \n \n \n \n \n \n \n {}\n {hasCoPilot ? : \n \n \n \n INVITE CO-PILOT\n \n }\n \n \n {}\n \n {}\n \n \n \n \n {}\n \n \n \n \n {}\n \n \n \n \n \n \n \n \n \n \n {}\n \n NAVIGATION SYSTEMS ONLINE\n \n \n PRESS V TO TOGGLE VIEW\n \n \n {}\n \n \n \n \n ;\n};\nimport { useGLTF } from '@react-three/drei';\nconst Satellite = ({\n position,\n orbitRadius,\n orbitSpeed,\n color,\n userId,\n isCurrentUser,\n isConnected,\n isStaked,\n onExitPilotMode\n}) => {\n const ref = useRef();\n const [angle, setAngle] = useState(Math.random() * Math.PI * 2);\n const pulseRef = useRef(0);\n const textRef = useRef();\n const [isPilotMode, setIsPilotMode] = useState(false);\n const [isFirstPersonView, setIsFirstPersonView] = useState(false);\n const {\n scene\n } = useGLTF('https://cdn.dev.fun/asset/b8bb24936a2eb4fe9ec9/3d_satellite_to_replace_our_2d_model_inside_the_game__i_like_sputnik_satellite_for_example__20250406_150006.glb');\n const satelliteModel = useMemo(() => scene.clone(), [scene]);\n const [manualPosition, setManualPosition] = useState({\n x: 0,\n y: 0,\n z: 0\n });\n const [hasCoPilot, setHasCoPilot] = useState(false);\n const [showCoPilotCode, setShowCoPilotCode] = useState(false);\n const [coPilotCode, setCoPilotCode] = useState('');\n const [velocity, setVelocity] = useState({\n x: 0,\n y: 0,\n z: 0\n });\n const [keysPressed, setKeysPressed] = useState({});\n const {\n camera\n } = useThree();\n useEffect(() => {\n if (!isCurrentUser) return;\n const inertiaFactor = 0.92;\n const acceleration = 0.008;\n const maxSpeed = 0.08;\n const handleKeyDown = e => {\n if (!isPilotMode && (e.key === 'p' || e.key === 'P')) {\n setIsPilotMode(true);\n if (ref.current) {\n const {\n x,\n y,\n z\n } = ref.current.position;\n setManualPosition({\n x,\n y,\n z\n });\n setVelocity({\n x: 0,\n y: 0,\n z: 0\n });\n }\n return;\n }\n if (isPilotMode && (e.key === 'v' || e.key === 'V')) {\n setIsFirstPersonView(prev => !prev);\n return;\n }\n if (!isPilotMode) return;\n setKeysPressed(prev => ({\n ...prev,\n [e.key.toLowerCase()]: true\n }));\n };\n const handleKeyUp = e => {\n if (!isPilotMode) return;\n setKeysPressed(prev => {\n const newKeys = {\n ...prev\n };\n delete newKeys[e.key.toLowerCase()];\n return newKeys;\n });\n if (e.key === 'Escape') {\n setIsPilotMode(false);\n setIsFirstPersonView(false);\n setVelocity({\n x: 0,\n y: 0,\n z: 0\n });\n if (onExitPilotMode) {\n const x = manualPosition.x / orbitRadius;\n const y = manualPosition.z / orbitRadius;\n onExitPilotMode({\n x,\n y\n });\n }\n }\n };\n const updateInterval = setInterval(() => {\n if (!isPilotMode) return;\n let newVelocity = {\n ...velocity\n };\n if (keysPressed['w'] || keysPressed['arrowup']) {\n newVelocity.z -= acceleration;\n }\n if (keysPressed['s'] || keysPressed['arrowdown']) {\n newVelocity.z += acceleration;\n }\n if (keysPressed['a'] || keysPressed['arrowleft']) {\n newVelocity.x -= acceleration;\n }\n if (keysPressed['d'] || keysPressed['arrowright']) {\n newVelocity.x += acceleration;\n }\n if (keysPressed[' '] || keysPressed['spacebar']) {\n newVelocity.y += acceleration;\n }\n if (keysPressed['shift']) {\n newVelocity.y -= acceleration;\n }\n newVelocity.x *= inertiaFactor;\n newVelocity.y *= inertiaFactor;\n newVelocity.z *= inertiaFactor;\n newVelocity.x = Math.max(-maxSpeed, Math.min(maxSpeed, newVelocity.x));\n newVelocity.y = Math.max(-maxSpeed, Math.min(maxSpeed, newVelocity.y));\n newVelocity.z = Math.max(-maxSpeed, Math.min(maxSpeed, newVelocity.z));\n setVelocity(newVelocity);\n setManualPosition(prev => ({\n x: prev.x + newVelocity.x,\n y: prev.y + newVelocity.y,\n z: prev.z + newVelocity.z\n }));\n }, 16);\n window.addEventListener('keydown', handleKeyDown);\n window.addEventListener('keyup', handleKeyUp);\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n window.removeEventListener('keyup', handleKeyUp);\n clearInterval(updateInterval);\n };\n }, [isCurrentUser, isPilotMode, manualPosition, orbitRadius, onExitPilotMode, velocity]);\n useEffect(() => {\n if (isCurrentUser && isPilotMode && isFirstPersonView) {\n const code = `${userId.substring(0, 4)}-${Date.now().toString(36).substring(-4)}`;\n setCoPilotCode(code);\n }\n }, [isCurrentUser, isPilotMode, isFirstPersonView, userId]);\n const handleInviteCoPilot = () => {\n setShowCoPilotCode(true);\n setTimeout(() => {\n setHasCoPilot(true);\n setShowCoPilotCode(false);\n }, 5000);\n };\n useFrame((state, delta) => {\n if (isCurrentUser && isPilotMode) {\n if (ref.current) {\n ref.current.position.set(manualPosition.x, manualPosition.y, manualPosition.z);\n if (ref.current.userData.lastPosition) {\n const dx = manualPosition.x - ref.current.userData.lastPosition.x;\n const dy = manualPosition.y - ref.current.userData.lastPosition.y;\n const dz = manualPosition.z - ref.current.userData.lastPosition.z;\n if (Math.abs(dx) > 0.001 || Math.abs(dz) > 0.001) {\n const targetRotationY = Math.atan2(dx, dz);\n const targetRotationX = -Math.atan2(dy, Math.sqrt(dx * dx + dz * dz)) * 0.5;\n ref.current.rotation.y = THREE.MathUtils.lerp(ref.current.rotation.y, targetRotationY, 0.1);\n ref.current.rotation.x = THREE.MathUtils.lerp(ref.current.rotation.x, targetRotationX, 0.1);\n }\n const distanceFromOrigin = Math.sqrt(manualPosition.x * manualPosition.x + manualPosition.y * manualPosition.y + manualPosition.z * manualPosition.z);\n if (distanceFromOrigin > orbitRadius * 3) {\n const factor = 0.99;\n setManualPosition({\n x: manualPosition.x * factor,\n y: manualPosition.y * factor,\n z: manualPosition.z * factor\n });\n }\n }\n ref.current.userData.lastPosition = {\n ...manualPosition\n };\n if (textRef.current) {\n textRef.current.lookAt(state.camera.position);\n }\n if (Math.abs(manualPosition.x - ref.current.userData.lastPosition?.x) > 0.001 || Math.abs(manualPosition.y - ref.current.userData.lastPosition?.y) > 0.001 || Math.abs(manualPosition.z - ref.current.userData.lastPosition?.z) > 0.001) {}\n if (isFirstPersonView && camera) {\n camera.position.copy(ref.current.position);\n const offset = new THREE.Vector3(0, 0.1, 0);\n camera.position.add(offset);\n const lookAtPoint = new THREE.Vector3();\n const direction = new THREE.Vector3(0, 0, -1).applyEuler(ref.current.rotation);\n lookAtPoint.copy(camera.position).add(direction);\n camera.lookAt(lookAtPoint);\n }\n }\n } else {\n setAngle(prev => prev + orbitSpeed);\n const x = Math.cos(angle) * orbitRadius;\n const z = Math.sin(angle) * orbitRadius;\n const y = Math.sin(angle * 0.5) * (orbitRadius * 0.2);\n if (ref.current) {\n ref.current.position.set(x, y, z);\n ref.current.rotation.set(0, 0, 0);\n if (isConnected) {\n pulseRef.current += delta * 2;\n const pulse = Math.sin(pulseRef.current) * 0.3 + 0.7;\n ref.current.scale.set(pulse, pulse, pulse);\n }\n if (textRef.current) {\n textRef.current.lookAt(state.camera.position);\n }\n }\n }\n });\n const size = isConnected ? 0.08 : 0.06;\n const satelliteColor = isStaked ? '#FFD700' : color;\n const intensity = isCurrentUser ? 3.0 : isStaked ? 2.0 : isConnected ? 1.5 : 1.0;\n const [modelLoaded, setModelLoaded] = useState(false);\n useEffect(() => {\n if (satelliteModel) {\n console.log(\"Applying materials to satellite model\");\n try {\n let hasMeshes = false;\n satelliteModel.traverse(child => {\n if (child.isMesh) {\n hasMeshes = true;\n child.material = new THREE.MeshStandardMaterial({\n color: new THREE.Color(satelliteColor),\n emissive: new THREE.Color(satelliteColor),\n emissiveIntensity: intensity / 2,\n transparent: true,\n opacity: 0.9,\n metalness: 0.7,\n roughness: 0.3\n });\n child.material.needsUpdate = true;\n }\n });\n setModelLoaded(hasMeshes);\n } catch (error) {\n console.error(\"Error applying materials to satellite model:\", error);\n setModelLoaded(false);\n }\n } else {\n setModelLoaded(false);\n }\n }, [satelliteModel, satelliteColor, intensity]);\n return \n {}\n {(!isCurrentUser || !isFirstPersonView) && \n {modelLoaded ? : \n {}\n \n \n \n \n \n {}\n \n \n \n \n \n \n \n \n \n \n {}\n \n \n \n \n }\n {}\n \n }\n {}\n {isCurrentUser && !isFirstPersonView && <>\n \n \n \n \n \n {}\n \n \n HELLO EARTH\n \n \n {}\n {isPilotMode && \n \n \n }\n }\n {}\n {isCurrentUser && isPilotMode && isFirstPersonView && }\n {}\n {showCoPilotCode && \n \n \n \n \n \n INVITE CODE\n \n \n {coPilotCode}\n \n }\n {isStaked && \n \n \n }\n ;\n};\nuseGLTF.preload('https://cdn.dev.fun/asset/b8bb24936a2eb4fe9ec9/3d_satellite_to_replace_our_2d_model_inside_the_game__i_like_sputnik_satellite_for_example__20250406_150006.glb');\nconst ConnectionLines = ({\n satellites,\n currentUserId,\n userSatelliteCount\n}) => {\n const linePoints = useMemo(() => {\n const points = [];\n const currentUserSats = satellites.filter(sat => sat.userId === currentUserId);\n const otherUserSats = satellites.filter(sat => sat.userId !== currentUserId);\n if (userSatelliteCount === 1) {\n currentUserSats.forEach(userSat => {\n const maxConnections = Math.min(3, otherUserSats.length);\n for (let i = 0; i < maxConnections; i++) {\n if (otherUserSats[i]) {\n const userPos = [Math.cos(userSat.angle) * userSat.orbitRadius, Math.sin(userSat.angle * 0.5) * (userSat.orbitRadius * 0.2), Math.sin(userSat.angle) * userSat.orbitRadius];\n const otherPos = [Math.cos(otherUserSats[i].angle) * otherUserSats[i].orbitRadius, Math.sin(otherUserSats[i].angle * 0.5) * (otherUserSats[i].orbitRadius * 0.2), Math.sin(otherUserSats[i].angle) * otherUserSats[i].orbitRadius];\n points.push([userPos, otherPos]);\n }\n }\n });\n }\n return points;\n }, [satellites, currentUserId, userSatelliteCount]);\n return <>\n {linePoints.map((points, idx) => \n \n \n \n \n )}\n {}\n {userSatelliteCount > 0 && satellites.filter(sat => sat.userId === currentUserId).slice(0, 1).map((sat, idx) => {\n const satPos = [Math.cos(sat.angle) * sat.orbitRadius, Math.sin(sat.angle * 0.5) * (sat.orbitRadius * 0.2), Math.sin(sat.angle) * sat.orbitRadius];\n const groundPos = [0, -1.5, 0];\n return \n \n \n \n \n ;\n })}\n ;\n};\nconst LocationMarker = ({\n position,\n color,\n onClick,\n hasMessages = false,\n isUserLocation = false,\n hasProfile = false,\n profileName = \"\",\n hoverText = \"\"\n}) => {\n const ref = useRef();\n const tooltipRef = useRef();\n const pulseRef = useRef(0);\n const [showTooltip, setShowTooltip] = useState(false);\n const {\n camera\n } = useThree();\n useFrame((state, delta) => {\n if (ref.current && (hasMessages || hasProfile)) {\n pulseRef.current += delta * 2;\n const pulse = Math.sin(pulseRef.current) * 0.3 + 0.7;\n ref.current.scale.set(pulse, pulse, pulse);\n }\n if (tooltipRef.current && showTooltip) {\n tooltipRef.current.lookAt(camera.position);\n }\n });\n return setShowTooltip(true)} onPointerOut={() => setShowTooltip(false)}>\n \n \n \n \n \n {isUserLocation && }\n {hasProfile && \n \n \n }\n {showTooltip && \n \n \n \n \n \n {hasProfile ? `${profileName || \"User Base\"}` : hoverText || (isUserLocation ? \"Your Base\" : \"Remote Location\")}\n \n }\n ;\n};\nconst MapLayer = ({\n visible,\n userLocation,\n chatLocations = [],\n onLocationClick,\n userProfiles = []\n}) => {\n if (!visible) return null;\n return \n \n {}\n {userLocation && onLocationClick({\n ...userLocation,\n hasProfile: true\n }, true)} isUserLocation={true} hasMessages={chatLocations.some(loc => Math.abs(loc.x - userLocation.x) < 0.05 && Math.abs(loc.y - userLocation.y) < 0.05 && loc.messageCount > 0)} hasProfile={true} profileName=\"Your Base\" hoverText=\"Your Command Base\" />}\n {}\n {chatLocations.map((location, index) => {\n if (userLocation && Math.abs(location.x - userLocation.x) < 0.05 && Math.abs(location.y - userLocation.y) < 0.05) {\n return null;\n }\n const profile = userProfiles.find(p => p.locationId === location.id || p.location && Math.abs(p.location.x - location.x) < 0.05 && Math.abs(p.location.y - location.y) < 0.05);\n return onLocationClick({\n ...location,\n hasProfile: !!profile || location.hasProfile\n }, false)} hasMessages={location.messageCount > 0} hasProfile={!!profile || location.hasProfile} profileName={profile ? profile.displayName : location.profileName || \"\"} hoverText={profile ? `${profile.displayName}'s Base` : location.messageCount > 0 ? \"Active Communications\" : \"Unexplored Location\"} />;\n })}\n ;\n};\nconst planetData = [{\n name: 'Mercury',\n radius: 0.38,\n distance: 5,\n color: '#A9A9A9',\n rotationSpeed: 0.004\n}, {\n name: 'Venus',\n radius: 0.95,\n distance: 7,\n color: '#BDB76B',\n rotationSpeed: 0.0035\n}, {\n name: 'Earth',\n radius: 1,\n distance: 10,\n color: '#1E90FF',\n rotationSpeed: 0.003\n}, {\n name: 'Mars',\n radius: 0.53,\n distance: 15,\n color: '#CD5C5C',\n rotationSpeed: 0.0024\n}, {\n name: 'Jupiter',\n radius: 11.2,\n distance: 25,\n color: '#DEB887',\n rotationSpeed: 0.0013\n}, {\n name: 'Saturn',\n radius: 9.45,\n distance: 40,\n color: '#F4A460',\n rotationSpeed: 0.0009\n}, {\n name: 'Uranus',\n radius: 4.0,\n distance: 60,\n color: '#87CEEB',\n rotationSpeed: 0.0006\n}, {\n name: 'Neptune',\n radius: 3.88,\n distance: 75,\n color: '#4169E1',\n rotationSpeed: 0.0004\n}, {\n name: 'Pluto',\n radius: 0.18,\n distance: 90,\n color: '#A0522D',\n rotationSpeed: 0.0003\n}];\nconst Sun = () => {\n return \n \n \n \n ;\n};\nconst Planet = ({\n radius,\n distance,\n color,\n rotationSpeed,\n name\n}) => {\n const ref = useRef();\n const [angle, setAngle] = useState(Math.random() * Math.PI * 2);\n useFrame((state, delta) => {\n setAngle(prev => prev + rotationSpeed);\n const x = Math.cos(angle) * distance;\n const z = Math.sin(angle) * distance - 150;\n if (ref.current) {\n ref.current.position.set(x, 0, z);\n }\n });\n return <>\n \n \n \n \n {}\n \n \n \n \n ;\n};\nconst SolarSystem = () => {\n return \n \n {planetData.map((planet, index) => )}\n ;\n};\nconst Scene = ({\n satellites,\n currentUserId,\n userSatelliteCount,\n userLocation,\n zoomLevel,\n stakedSatellites,\n chatLocations = [],\n onLocationClick,\n onSaveUserLocation,\n userProfiles = [],\n isLocationSelectionMode = false,\n onLocationSelect = null\n}) => {\n const {\n camera\n } = useThree();\n useEffect(() => {\n if (Array.isArray(satellites) && satellites.length > 0) {\n console.log(\"Satellites in Scene:\", satellites.length, satellites);\n }\n }, [satellites]);\n const handleSaveUserLocation = useCallback(newLocation => {\n if (onSaveUserLocation && newLocation) {\n onSaveUserLocation(newLocation);\n }\n }, [onSaveUserLocation]);\n useEffect(() => {\n try {\n if (!camera) return;\n if (isLocationSelectionMode) {\n camera.position.set(0, 0, 4);\n return;\n }\n if (zoomLevel === 'far') {\n camera.position.set(0, 2, 8);\n } else if (zoomLevel === 'medium') {\n camera.position.set(0, 2, 4);\n } else if (zoomLevel === 'close') {\n camera.position.set(0, 2, 2.5);\n }\n } catch (error) {\n console.error(\"Error updating camera position:\", error);\n try {\n camera.position.set(0, 2, 6);\n } catch (fallbackError) {\n console.error(\"Failed to set fallback camera position:\", fallbackError);\n }\n }\n }, [camera, zoomLevel, isLocationSelectionMode]);\n const connectedSatellites = useMemo(() => {\n const connected = new Set();\n try {\n if (!Array.isArray(satellites) || !currentUserId) {\n return connected;\n }\n if (userSatelliteCount === 1) {\n const userSat = satellites.find(sat => sat && sat.userId === currentUserId);\n if (userSat && userSat.id) {\n connected.add(userSat.id);\n }\n const otherSats = satellites.filter(sat => sat && sat.userId && sat.userId !== currentUserId && sat.id).slice(0, 3).map(sat => sat.id);\n otherSats.forEach(id => {\n if (id) connected.add(id);\n });\n }\n } catch (error) {\n console.error(\"Error determining connected satellites:\", error);\n }\n return connected;\n }, [satellites, currentUserId, userSatelliteCount]);\n const stakedSatelliteIds = useMemo(() => {\n try {\n if (!Array.isArray(stakedSatellites)) {\n return new Set();\n }\n return new Set(stakedSatellites.filter(sat => sat && sat.id).map(sat => sat.id));\n } catch (error) {\n console.error(\"Error creating staked satellite IDs set:\", error);\n return new Set();\n }\n }, [stakedSatellites]);\n const processedChatLocations = useMemo(() => {\n try {\n if (!Array.isArray(chatLocations)) {\n return [];\n }\n return chatLocations.map(location => {\n if (!location) return null;\n try {\n if (location.lat && location.lng) {\n return location;\n } else if (location.x !== undefined && location.y !== undefined) {\n const lng = (location.x + 1) / 2 * 360 - 180;\n const lat = (location.y + 1) / 2 * 180 - 90;\n return {\n ...location,\n lat,\n lng\n };\n } else {\n console.warn(\"Invalid location data:\", location);\n return null;\n }\n } catch (locationError) {\n console.error(\"Error processing chat location:\", locationError, location);\n return null;\n }\n }).filter(Boolean);\n } catch (error) {\n console.error(\"Error processing chat locations:\", error);\n return [];\n }\n }, [chatLocations]);\n try {\n return <>\n \n \n \n {}\n \n {}\n \n {}\n \n {}\n {!isLocationSelectionMode && Array.isArray(satellites) && satellites.length > 0 && console.log(\"Rendering satellites:\", satellites.length, satellites)}\n {}\n {!isLocationSelectionMode && Array.isArray(satellites) && satellites.map((satellite, index) => {\n if (!satellite) return null;\n return ;\n })}\n {}\n {!isLocationSelectionMode && }\n {}\n \n {}\n {!isLocationSelectionMode && userSatelliteCount > 0 && userLocation && \n \n \n }\n ;\n } catch (error) {\n console.error(\"Error rendering Scene component:\", error);\n return <>\n \n \n \n \n \n \n \n ;\n }\n};\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hasError: false,\n error: null,\n errorInfo: null,\n errorCount: 0,\n lastErrorTime: null\n };\n }\n static getDerivedStateFromError(error) {\n return {\n hasError: true,\n error\n };\n }\n componentDidCatch(error, errorInfo) {\n console.error(\"SparkChain Error:\", error, errorInfo);\n console.error(\"Error occurred in component:\", errorInfo?.componentStack);\n const now = Date.now();\n this.setState(prevState => {\n const isRapidError = prevState.lastErrorTime && now - prevState.lastErrorTime < 5000;\n return {\n errorInfo,\n errorCount: prevState.errorCount + 1,\n lastErrorTime: now,\n autoRecover: !isRapidError && prevState.errorCount < 3\n };\n });\n if (this.state.errorCount < 3) {\n setTimeout(() => {\n if (this._isMounted) {\n this.setState({\n hasError: false,\n error: null\n });\n }\n }, 3000);\n }\n }\n componentDidMount() {\n this._isMounted = true;\n }\n componentWillUnmount() {\n this._isMounted = false;\n }\n handleReset = () => {\n this.setState({\n hasError: false,\n error: null,\n errorInfo: null\n });\n try {\n this.forceUpdate();\n } catch (e) {\n console.error(\"Error during recovery, forcing page reload:\", e);\n window.location.reload();\n }\n };\n render() {\n if (this.state.hasError) {\n return

Houston, we have a problem!

Your satellite encountered a temporary issue.

\n Error: {this.state.error?.message || \"Unknown error\"}\n

\n \n \n

\n {this.state.errorCount >= 3 &&

\n Multiple errors detected. A full restart may be needed.\n

}\n

\n {this.state.errorInfo &&

Technical Details

\n                    {this.state.error?.toString()}\n                    {this.state.errorInfo.componentStack}\n

}\n

;\n }\n return this.props.children;\n }\n}\nconst AuthScreen = ({\n onLogin,\n onSignup,\n error\n}) => {\n const [isLogin, setIsLogin] = useState(true);\n const [email, setEmail] = useState('');\n const [username, setUsername] = useState('');\n const [rememberMe, setRememberMe] = useState(true);\n const [isLoading, setIsLoading] = useState(false);\n const [localError, setLocalError] = useState('');\n const logoUrl = \"https://cdn.dev.fun/asset/b8bb24936a2eb4fe9ec9/sparkchain%20gif%20meme_ebfb6e6c.gif\";\n useEffect(() => {\n const savedEmail = localStorage.getItem('sparkchain_user_email');\n if (savedEmail) {\n setEmail(savedEmail);\n setIsLogin(true);\n }\n }, []);\n const displayError = error || localError;\n const handleSubmit = async e => {\n e.preventDefault();\n setLocalError('');\n setIsLoading(true);\n try {\n if (isLogin) {\n await onLogin(email);\n } else {\n await onSignup(email, username);\n }\n } finally {\n setIsLoading(false);\n }\n };\n return

\n $\"SparkChain$ \n

\n SparkChain\n

\n {isLogin ? 'Enter to launch your satellite' : 'Join the global satellite network'}\n

\n {displayError &&

\n {displayError}\n

}\n

\n {isLogin ? 'Email or Nickname' : 'Email'}\n

\n \n setEmail(e.target.value)} required className=\"w-full bg-gray-800 text-white pl-10 pr-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder={isLogin ? \"your@email.com or nickname\" : \"your@email.com\"} autoComplete=\"email\" />\n

\n {!isLogin &&

\n Nickname\n

\n \n setUsername(e.target.value)} required className=\"w-full bg-gray-800 text-white pl-10 pr-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"cosmicexplorer\" autoComplete=\"username\" />\n

}\n {isLogin &&

\n setRememberMe(e.target.checked)} className=\"h-4 w-4 text-blue-600 rounded border-gray-700 bg-gray-800 focus:ring-blue-500\" />\n \n Remember this device\n \n

}\n \n

\n \n

\n By continuing, you agree to SparkChain's Terms of Service and Privacy Policy\n

;\n};\nconst QRCodeDisplay = ({\n value\n}) => {\n const canvasRef = useRef(null);\n useEffect(() => {\n const canvas = canvasRef.current;\n if (canvas) {\n const ctx = canvas.getContext('2d');\n const size = 150;\n const cellSize = size / 25;\n ctx.fillStyle = '#FFFFFF';\n ctx.fillRect(0, 0, size, size);\n ctx.fillStyle = '#000000';\n ctx.fillRect(0, 0, 7 * cellSize, 7 * cellSize);\n ctx.fillStyle = '#FFFFFF';\n ctx.fillRect(cellSize, cellSize, 5 * cellSize, 5 * cellSize);\n ctx.fillStyle = '#000000';\n ctx.fillRect(2 * cellSize, 2 * cellSize, 3 * cellSize, 3 * cellSize);\n ctx.fillStyle = '#000000';\n ctx.fillRect(size - 7 * cellSize, 0, 7 * cellSize, 7 * cellSize);\n ctx.fillStyle = '#FFFFFF';\n ctx.fillRect(size - 6 * cellSize, cellSize, 5 * cellSize, 5 * cellSize);\n ctx.fillStyle = '#000000';\n ctx.fillRect(size - 5 * cellSize, 2 * cellSize, 3 * cellSize, 3 * cellSize);\n ctx.fillStyle = '#000000';\n ctx.fillRect(0, size - 7 * cellSize, 7 * cellSize, 7 * cellSize);\n ctx.fillStyle = '#FFFFFF';\n ctx.fillRect(cellSize, size - 6 * cellSize, 5 * cellSize, 5 * cellSize);\n ctx.fillStyle = '#000000';\n ctx.fillRect(2 * cellSize, size - 5 * cellSize, 3 * cellSize, 3 * cellSize);\n for (let i = 0; i < 25; i++) {\n for (let j = 0; j < 25; j++) {\n if (i < 7 && j < 7 || i < 7 && j > 17 || i > 17 && j < 7) continue;\n if (Math.random() > 0.6) {\n ctx.fillRect(i * cellSize, j * cellSize, cellSize, cellSize);\n }\n }\n }\n ctx.fillStyle = '#FFFFFF';\n ctx.fillRect(9 * cellSize, 9 * cellSize, 7 * cellSize, 7 * cellSize);\n ctx.fillStyle = '#4fc3f7';\n ctx.fillRect(10 * cellSize, 10 * cellSize, 5 * cellSize, 5 * cellSize);\n }\n }, [value]);\n return

;\n};\nconst ReferralTrackingPanel = ({\n invites,\n inviteCount\n}) => {\n return

\n \n Referral Network\n

\n Progress to 2x Speed\n {inviteCount}/5\n

\n {}\n

\n {invites && invites.length > 0 ? invites.map((invite, index) =>

\n {invite.username || invite.id.substring(0, 8)}\n

\n {new Date(invite.joinedAt).toLocaleDateString()}\n

) :

\n No referrals yet. Share your link to grow your network!\n

}\n

;\n};\nconst TransactionHistory = ({\n transactions\n}) => {\n return

\n \n Transaction History\n

\n {transactions && transactions.length > 0 ? transactions.map((tx, index) =>

\n {tx.type === 'stake' && }\n {tx.type === 'unstake' && }\n {tx.type === 'reward' && }\n {tx.type === 'purchase' && }\n

\n {tx.description}\n

{new Date(tx.timestamp).toLocaleString()}

0 ? 'text-green-400' : 'text-red-400'}`}>\n {tx.amount > 0 ? '+' : ''}{tx.amount} SPARK\n

) :

\n No transactions yet. Start using your SparkCoins!\n

}\n

;\n};\nconst TokenStats = ({\n tokenData\n}) => {\n return

\n \n SparkCoin Stats\n

Current Price

\n {tokenData.value} SOL\n

= 0 ? 'text-green-400' : 'text-red-400'} flex items-center`}>\n {tokenData.priceChange >= 0 ? : }\n {Math.abs(tokenData.priceChange).toFixed(2)}%\n

Market Cap

\n {(tokenData.value * tokenData.totalSupply).toFixed(2)} SOL\n

Total Supply

\n {tokenData.totalSupply.toLocaleString()} SPARK\n

Staking APY

\n {tokenData.stakingAPY}% APY\n

;\n};\nconst StakingPanel = ({\n userSatellites,\n stakedSatellites,\n tokenBalance,\n stakingRewards,\n onStake,\n onUnstake,\n onClaimRewards\n}) => {\n const [selectedSatellite, setSelectedSatellite] = useState(null);\n const [showStakeModal, setShowStakeModal] = useState(false);\n const [showUnstakeModal, setShowUnstakeModal] = useState(false);\n const availableSatellites = userSatellites.filter(sat => !stakedSatellites.some(staked => staked.id === sat.id));\n return

\n \n Satellite Staking\n

Staking Rewards

{stakingRewards.toFixed(2)} SPARK

\n \n

Staked Satellite

{stakedSatellites.length} of {userSatellites.length} satellite

\n {stakedSatellites.length > 0 &&

\n Earning {(stakedSatellites.length * 0.5).toFixed(1)} SPARK/day\n

}\n

\n \n \n

\n {}\n

Stake your satellite to earn passive SPARK rewards! Your staked satellite earns 0.5 SPARK per day.

\n {}\n {showStakeModal &&

Stake Satellite

\n Select your satellite to stake. Staked satellite earns SPARK tokens over time.\n

\n {availableSatellites.map(satellite =>

setSelectedSatellite(satellite)} className={`p-3 mb-2 rounded-md cursor-pointer ${selectedSatellite?.id === satellite.id ? 'bg-blue-800' : 'bg-gray-800'}`}>\n

Satellite #{satellite.id.substring(satellite.id.lastIndexOf('_') + 1)}

\n Launched on {new Date(satellite.launchDate).toLocaleDateString()}\n

)}\n

\n \n \n

}\n {}\n {showUnstakeModal &&

Unstake Satellite

\n Select your staked satellite to unstake. You'll stop earning rewards for this satellite.\n

\n {stakedSatellites.map(satellite =>

setSelectedSatellite(satellite)} className={`p-3 mb-2 rounded-md cursor-pointer ${selectedSatellite?.id === satellite.id ? 'bg-blue-800' : 'bg-gray-800'}`}>\n

Satellite #{satellite.id.substring(satellite.id.lastIndexOf('_') + 1)}

\n Staked on {new Date(satellite.stakedAt).toLocaleDateString()}\n

)}\n

\n \n \n

}\n

;\n};\nfunction AppContent() {\n const isMounted = useRef(true);\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [authError, setAuthError] = useState('');\n const [userId, setUserId] = useState('');\n const [userEmail, setUserEmail] = useState('');\n const [username, setUsername] = useState('');\n const [satellites, setSatellites] = useState([]);\n const [userSatelliteCount, setUserSatelliteCount] = useState(0);\n const [, setLaunchSpeed] = useState(1);\n const [inviteCount, setInviteCount] = useState(0);\n const [invites, setInvites] = useState([]);\n const [isLaunching, setIsLaunching] = useState(false);\n const [elonMode, setElonMode] = useState(false);\n const [elonInput, setElonInput] = useState('');\n const [soundEnabled, setSoundEnabled] = useState(false);\n const [userCount, setUserCount] = useState(0);\n const [showInviteModal, setShowInviteModal] = useState(false);\n const [notification, setNotification] = useState(null);\n const [zoomLevel, setZoomLevel] = useState('medium');\n const [userLocation, setUserLocation] = useState(null);\n const [showLocationPrompt, setShowLocationPrompt] = useState(false);\n const [connectionStatus, setConnectionStatus] = useState('');\n const [currentPhase, setCurrentPhase] = useState(1);\n const [showTradeModal, setShowTradeModal] = useState(false);\n const [showCustomizeModal, setShowCustomizeModal] = useState(false);\n const [showTokenModal, setShowTokenModal] = useState(false);\n const [availableUsers, setAvailableUsers] = useState([]);\n const [selectedUser, setSelectedUser] = useState(null);\n const [customColor, setCustomColor] = useState('#4fc3f7');\n const [errorMessage, setErrorMessage] = useState('');\n const [, setWalletConnected] = useState(false);\n const [tokenBalance, setTokenBalance] = useState(0);\n const [tokenValue, setTokenValue] = useState(0);\n const [tokenLaunched, setTokenLaunched] = useState(false);\n const [showReferralStats, setShowReferralStats] = useState(false);\n const [referralLinkCopied, setReferralLinkCopied] = useState(false);\n const [shareOptions, setShareOptions] = useState(false);\n const [inviteLink, setInviteLink] = useState('');\n const [, setPendingInvites] = useState([]);\n const [refreshingInvites, setRefreshingInvites] = useState(false);\n const [showTokenDashboard, setShowTokenDashboard] = useState(false);\n const [tokenTransactions, setTokenTransactions] = useState([]);\n const [tokenStats, setTokenStats] = useState({\n value: 0.01,\n priceChange: 0,\n totalSupply: 1000,\n stakingAPY: 12\n });\n const [stakedSatellites, setStakedSatellites] = useState([]);\n const [stakingRewards, setStakingRewards] = useState(0);\n const [showStakingPanel, setShowStakingPanel] = useState(false);\n const [userSatelliteObjects, setUserSatelliteObjects] = useState([]);\n const [lastRewardClaim, setLastRewardClaim] = useState(null);\n const [tokenNetworkEffect, setTokenNetworkEffect] = useState(1);\n const [chatLocations, setChatLocations] = useState([]);\n const [showChatModal, setShowChatModal] = useState(false);\n const [selectedLocation, setSelectedLocation] = useState(null);\n const [isUserOwnLocation, setIsUserOwnLocation] = useState(false);\n const [chatMessages, setChatMessages] = useState([]);\n const [newMessage, setNewMessage] = useState('');\n const [loadingMessages, setLoadingMessages] = useState(false);\n const [locationMiningValue, setLocationMiningValue] = useState(0);\n const [showLocationSelector, setShowLocationSelector] = useState(false);\n const [selectedMapLocation, setSelectedMapLocation] = useState(null);\n const [showEnterInviteModal, setShowEnterInviteModal] = useState(false);\n const [enteredInviteCode, setEnteredInviteCode] = useState('');\n const [, setIsInitializing] = useState(true);\n const [hasClearedDuplicates, setHasClearedDuplicates] = useState(false);\n const [showOrbitalDuelModal, setShowOrbitalDuelModal] = useState(false);\n const [betAmount, setBetAmount] = useState(1);\n const [gameStarted, setGameStarted] = useState(false);\n const [gameOver, setGameOver] = useState(false);\n const [playerScore, setPlayerScore] = useState(0);\n const [opponentScore, setOpponentScore] = useState(0);\n const [playerPosition, setPlayerPosition] = useState(50);\n const [opponentPosition, setOpponentPosition] = useState(50);\n const [projectiles, setProjectiles] = useState([]);\n const [opponentProjectiles, setOpponentProjectiles] = useState([]);\n const [winner, setWinner] = useState(null);\n const [gameInterval, setGameInterval] = useState(null);\n const [opponentMoveDirection, setOpponentMoveDirection] = useState(1);\n const [showBettingUI, setShowBettingUI] = useState(true);\n const [waitingForOpponent, setWaitingForOpponent] = useState(false);\n const [opponentFound, setOpponentFound] = useState(false);\n const [opponentName, setOpponentName] = useState('');\n const [, setGameId] = useState('');\n const [highStakesEffects, setHighStakesEffects] = useState(false);\n const [isMining, setIsMining] = useState(false);\n const [miningTimeRemaining, setMiningTimeRemaining] = useState(0);\n const [lastMiningConfirmation, setLastMiningConfirmation] = useState(null);\n const [miningReward, setMiningReward] = useState(0);\n const [showMiningCounter, setShowMiningCounter] = useState(false);\n const launchInterval = useRef(null);\n const stakingInterval = useRef(null);\n const audioRef = useRef(null);\n const chatEndRef = useRef(null);\n const miningInterval = useRef(null);\n useEffect(() => {\n isMounted.current = true;\n try {\n useGLTF.preload('https://cdn.dev.fun/asset/b8bb24936a2eb4fe9ec9/3d_satellite_to_replace_our_2d_model_inside_the_game__i_like_sputnik_satellite_for_example__20250406_150006.glb');\n console.log(\"Preloading satellite model\");\n } catch (error) {\n console.error(\"Error preloading satellite model:\", error);\n }\n return () => {\n isMounted.current = false;\n };\n }, []);\n useEffect(() => {\n const checkAuth = async () => {\n const storedUserId = localStorage.getItem('sparkchain_user_id');\n const storedEmail = localStorage.getItem('sparkchain_user_email');\n const storedUsername = localStorage.getItem('sparkchain_username');\n console.log(\"Checking stored authentication:\", storedUserId ? \"ID found\" : \"No ID\", storedEmail ? \"Email found\" : \"No email\");\n if (storedUserId && storedEmail) {\n try {\n console.log(\"Verifying user in database:\", storedUserId);\n const userData = await client.getEntity('users', storedUserId);\n if (userData && userData.email === storedEmail) {\n console.log(\"User verified successfully:\", storedUserId);\n setIsAuthenticated(true);\n setUserId(storedUserId);\n setUserEmail(storedEmail);\n setUsername(storedUsername || 'User');\n if (userData.tokenLaunched) {\n setTokenLaunched(true);\n setTokenBalance(userData.tokenBalance || 0);\n calculateTokenValue(userData.satelliteCount || 0, userData.inviteCount || 0);\n }\n } else {\n console.log(\"Stored user not found or email mismatch, trying to find by email\");\n try {\n const filteredUsers = await client.getEntities('users', {\n email: storedEmail\n });\n let userByEmail = null;\n if (filteredUsers && filteredUsers.length > 0) {\n userByEmail = filteredUsers[0];\n console.log(\"Found user by filtered email query:\", userByEmail.id);\n } else {\n console.log(\"No user found with filtered query, trying full user list\");\n const allUsers = await client.getEntities('users');\n userByEmail = allUsers.find(u => u.email === storedEmail);\n if (userByEmail) {\n console.log(\"Found user by email in full list:\", userByEmail.id);\n }\n }\n if (userByEmail) {\n localStorage.setItem('sparkchain_user_id', userByEmail.id);\n setIsAuthenticated(true);\n setUserId(userByEmail.id);\n setUserEmail(storedEmail);\n setUsername(userByEmail.username || 'User');\n if (userByEmail.tokenLaunched) {\n setTokenLaunched(true);\n setTokenBalance(userByEmail.tokenBalance || 0);\n calculateTokenValue(userByEmail.satelliteCount || 0, userByEmail.inviteCount || 0);\n }\n } else {\n console.log(\"User not found by email, will auto-create account\");\n const newUserId = 'user_' + Date.now().toString() + '_' + Math.random().toString(36).substring(2, 9);\n const username = storedUsername || storedEmail.split('@')[0];\n const newUser = {\n id: newUserId,\n email: storedEmail,\n username: username,\n password: '',\n satelliteCount: 0,\n inviteCount: 0,\n preferences: {\n soundEnabled: false,\n elonMode: false,\n rememberDevice: true\n },\n gameState: {\n isLaunching: false\n },\n createdAt: new Date().toISOString(),\n lastLogin: new Date().toISOString()\n };\n await client.createEntity('users', newUser);\n console.log(\"Auto-created new user account:\", newUserId);\n localStorage.setItem('sparkchain_user_id', newUserId);\n setIsAuthenticated(true);\n setUserId(newUserId);\n setUserEmail(storedEmail);\n setUsername(username);\n setNotification({\n message: `Welcome to SparkChain, ${username}! Account created automatically.`,\n type: \"success\"\n });\n }\n } catch (fallbackError) {\n console.error(\"Error in email fallback lookup:\", fallbackError);\n localStorage.removeItem('sparkchain_user_id');\n localStorage.removeItem('sparkchain_user_email');\n localStorage.removeItem('sparkchain_username');\n }\n }\n } catch (error) {\n console.error(\"Error verifying authentication:\", error);\n localStorage.removeItem('sparkchain_user_id');\n localStorage.removeItem('sparkchain_user_email');\n localStorage.removeItem('sparkchain_username');\n }\n }\n };\n checkAuth();\n }, []);\n const calculateTokenValue = useCallback((satelliteCount, inviteCount) => {\n const networkMultiplier = Math.max(1, Math.log(userCount + 1) * SPARK_COIN.networkMultiplier);\n const value = SPARK_COIN.baseValue + satelliteCount * SPARK_COIN.valuePerSatellite + inviteCount * SPARK_COIN.valuePerInvite;\n const finalValue = value * networkMultiplier;\n setTokenValue(finalValue.toFixed(3));\n setTokenNetworkEffect(networkMultiplier.toFixed(2));\n setTokenStats(prev => ({\n ...prev,\n value: finalValue.toFixed(3),\n priceChange: (finalValue / prev.value - 1) * 100 || 0\n }));\n }, [userCount]);\n const initializeUserWithSparkCoins = async userData => {\n if (!userData.hasInitialCoins) {\n try {\n const initialBalance = 5000;\n await client.updateEntity('users', userData.id, {\n ...userData,\n hasInitialCoins: true,\n tokenBalance: initialBalance,\n tokenLaunched: true,\n tokenInitDate: new Date().toISOString()\n });\n const txId = `tx_${Date.now()}`;\n await client.createEntity('transactions', {\n id: txId,\n userId: userData.id,\n type: 'reward',\n amount: initialBalance,\n description: 'Initial SparkCoin allocation',\n timestamp: new Date().toISOString()\n });\n setTokenLaunched(true);\n setTokenBalance(initialBalance);\n calculateTokenValue(userData.satelliteCount || 0, userData.inviteCount || 0);\n loadTokenTransactions();\n setNotification({\n message: \"Welcome! You've received 5000 SparkCoins to use in the app!\",\n type: \"special\"\n });\n } catch (error) {\n console.error(\"Error initializing user with SparkCoins:\", error);\n }\n }\n };\n const handleLogin = async emailOrNickname => {\n try {\n setAuthError('');\n setAppLoading(true);\n console.log(\"Attempting fast login for:\", emailOrNickname);\n let user = null;\n const isEmail = emailOrNickname.includes('@');\n const optimisticUserId = 'user_' + Date.now().toString() + '_' + Math.random().toString(36).substring(2, 9);\n const optimisticUser = {\n id: optimisticUserId,\n email: isEmail ? emailOrNickname : `${emailOrNickname}@sparkchain.user`,\n username: isEmail ? emailOrNickname.split('@')[0] : emailOrNickname\n };\n setIsAuthenticated(true);\n setUserId(optimisticUser.id);\n setUserEmail(optimisticUser.email);\n setUsername(optimisticUser.username);\n localStorage.setItem('sparkchain_user_id', optimisticUser.id);\n localStorage.setItem('sparkchain_user_email', optimisticUser.email);\n localStorage.setItem('sparkchain_username', optimisticUser.username);\n sessionStorage.setItem('sparkchain_user_id', optimisticUser.id);\n sessionStorage.setItem('sparkchain_user_email', optimisticUser.email);\n sessionStorage.setItem('sparkchain_username', optimisticUser.username);\n try {\n const filteredUsers = await client.getEntities('users', {\n email: emailOrNickname\n });\n if (filteredUsers && filteredUsers.length > 0) {\n user = filteredUsers[0];\n console.log(\"Found user via filtered email query:\", user.id);\n } else {\n try {\n const allUsers = await client.getEntities('users');\n user = allUsers.find(u => u.email === emailOrNickname || u.username === emailOrNickname);\n if (user) {\n console.log(\"Found user via username:\", user.id);\n }\n } catch (queryError) {\n console.error(\"Error with query, proceeding with user creation:\", queryError);\n }\n }\n if (!user) {\n console.log(\"User not found, auto-creating account for:\", emailOrNickname);\n const newUser = {\n id: optimisticUserId,\n email: isEmail ? emailOrNickname : `${emailOrNickname}@sparkchain.user`,\n username: isEmail ? emailOrNickname.split('@')[0] : emailOrNickname,\n satelliteCount: 0,\n inviteCount: 0,\n preferences: {\n soundEnabled: false,\n elonMode: false,\n rememberDevice: true\n },\n gameState: {\n isLaunching: false\n },\n createdAt: new Date().toISOString(),\n lastLogin: new Date().toISOString()\n };\n try {\n await client.createEntity('users', newUser);\n console.log(\"Successfully created new user:\", optimisticUserId);\n user = newUser;\n setTimeout(() => {\n setNotification({\n message: `Welcome to SparkChain, ${newUser.username}! Account created automatically.`,\n type: \"success\"\n });\n }, 1500);\n } catch (createError) {\n console.error(\"Error creating new user:\", createError);\n }\n } else {\n localStorage.setItem('sparkchain_user_id', user.id);\n localStorage.setItem('sparkchain_user_email', user.email);\n localStorage.setItem('sparkchain_username', user.username || 'User');\n sessionStorage.setItem('sparkchain_user_id', user.id);\n sessionStorage.setItem('sparkchain_user_email', user.email);\n sessionStorage.setItem('sparkchain_username', user.username || 'User');\n setUserId(user.id);\n setUserEmail(user.email);\n setUsername(user.username || 'User');\n if (user.tokenLaunched) {\n setTokenLaunched(true);\n setTokenBalance(user.tokenBalance || 0);\n calculateTokenValue(user.satelliteCount || 0, user.inviteCount || 0);\n }\n setTimeout(async () => {\n try {\n await client.updateEntity('users', user.id, {\n ...user,\n lastLogin: new Date().toISOString()\n });\n } catch (updateError) {\n console.error(\"Error updating last login time:\", updateError);\n }\n }, 1000);\n setTimeout(() => {\n setNotification({\n message: `Welcome back, ${user.username || 'Astronaut'}!`,\n type: 'success'\n });\n }, 1500);\n }\n } catch (error) {\n console.error(\"Background verification error:\", error);\n }\n setAppLoading(false);\n } catch (error) {\n console.error(\"Login error:\", error);\n setAuthError('An error occurred during login. Please try again.');\n setAppLoading(false);\n }\n };\n const handleSignup = async (email, username) => {\n try {\n setAuthError('');\n console.log(\"Attempting signup for:\", email);\n let existingUser = null;\n try {\n const filteredUsers = await client.getEntities('users', {\n email\n });\n if (filteredUsers && filteredUsers.length > 0) {\n existingUser = filteredUsers[0];\n }\n } catch (queryError) {\n console.error(\"Error with filtered query during signup:\", queryError);\n const users = await client.getEntities('users');\n existingUser = users.find(u => u.email === email);\n }\n if (existingUser) {\n console.log(\"Signup failed: Email already exists:\", email);\n setAuthError('An account with this email already exists. Please log in.');\n return;\n }\n try {\n const allUsers = await client.getEntities('users');\n const usernameExists = allUsers.some(u => u.username === username);\n if (usernameExists) {\n console.log(\"Signup failed: Username already exists:\", username);\n setAuthError('This nickname is already taken. Please choose another one.');\n return;\n }\n } catch (usernameError) {\n console.error(\"Error checking username:\", usernameError);\n }\n const newUserId = 'user_' + Date.now().toString() + '_' + Math.random().toString(36).substring(2, 9);\n console.log(\"Creating new user with ID:\", newUserId);\n const newUser = {\n id: newUserId,\n email,\n username,\n satelliteCount: 0,\n inviteCount: 0,\n preferences: {\n soundEnabled: false,\n elonMode: false,\n rememberDevice: true\n },\n gameState: {\n isLaunching: false\n },\n createdAt: new Date().toISOString(),\n lastLogin: new Date().toISOString()\n };\n await client.createEntity('users', newUser);\n const verifyUser = await client.getEntity('users', newUserId);\n if (!verifyUser) {\n console.error(\"User creation verification failed. User not found after creation.\");\n throw new Error(\"Failed to create user account. Please try again.\");\n }\n console.log(\"User created successfully:\", newUserId);\n setIsAuthenticated(true);\n setUserId(newUserId);\n setUserEmail(email);\n setUsername(username);\n localStorage.setItem('sparkchain_user_id', newUserId);\n localStorage.setItem('sparkchain_user_email', email);\n localStorage.setItem('sparkchain_username', username);\n sessionStorage.setItem('sparkchain_user_id', newUserId);\n sessionStorage.setItem('sparkchain_user_email', email);\n sessionStorage.setItem('sparkchain_username', username);\n setNotification({\n message: `Welcome to SparkChain, ${username}!`,\n type: 'success'\n });\n setUserLocation({\n x: (Math.random() * 2 - 1) * 0.5,\n y: (Math.random() * 2 - 1) * 0.5\n });\n } catch (error) {\n console.error(\"Signup error:\", error);\n setAuthError('An error occurred during signup. Please try again. Details: ' + error.message);\n }\n };\n const handleLogout = () => {\n setIsAuthenticated(false);\n setUserId('');\n setUserEmail('');\n setUsername('');\n localStorage.removeItem('sparkchain_user_id');\n localStorage.removeItem('sparkchain_user_email');\n localStorage.removeItem('sparkchain_username');\n setSatellites([]);\n setUserSatelliteCount(0);\n setInviteCount(0);\n setIsLaunching(false);\n if (launchInterval.current) {\n clearInterval(launchInterval.current);\n }\n if (stakingInterval.current) {\n clearInterval(stakingInterval.current);\n }\n };\n const inviteCode = useMemo(() => {\n const userPart = userId.substring(userId.lastIndexOf('_') + 1, userId.lastIndexOf('_') + 5);\n const randomPart = Math.random().toString(36).substring(2, 6).toUpperCase();\n return `SPARK-${userPart}-${randomPart}`;\n }, [userId]);\n const updateConnectionStatus = useCallback(count => {\n if (count === 0) {\n setConnectionStatus('No satellite launched yet');\n } else if (count === 1) {\n setConnectionStatus('Your satellite is active! Your personal beacon is online.');\n } else {\n setConnectionStatus(`Your satellite is active! Connected to ${Math.min(count, userCount - 1)} users.`);\n }\n }, [userCount]);\n useEffect(() => {\n if (!isAuthenticated || !userId) return;\n const checkInvite = async () => {\n try {\n let inviteParam = null;\n try {\n inviteParam = sessionStorage.getItem('sparkchain_invite_param');\n if (inviteParam) {\n console.log(\"Found invite parameter in sessionStorage:\", inviteParam);\n }\n } catch (storageError) {\n console.error(\"Cannot access sessionStorage:\", storageError);\n }\n if (inviteParam && inviteParam !== userId) {\n try {\n console.log(\"Processing invite from:\", inviteParam);\n const inviter = await client.getEntity('users', inviteParam);\n if (inviter) {\n const userData = await client.getEntity('users', userId);\n if (userData && userData.preferences && userData.preferences.locationSet) {\n localStorage.setItem('sparkchain_location_set', 'true');\n setLocationSetThisSession(true);\n }\n const referralId = `ref_${Date.now()}`;\n await client.createEntity('referrals', {\n id: referralId,\n inviterId: inviteParam,\n inviterName: inviter.username || 'User',\n inviteeId: userId,\n inviteeName: username,\n status: 'accepted',\n joinedAt: new Date().toISOString()\n });\n await client.updateEntity('users', inviteParam, {\n ...inviter,\n inviteCount: (inviter.inviteCount || 0) + 1\n });\n if (inviter.tokenLaunched) {\n const inviteReward = 50;\n await client.updateEntity('users', inviteParam, {\n ...inviter,\n tokenBalance: (inviter.tokenBalance || 0) + inviteReward\n });\n const txId = `tx_${Date.now()}`;\n await client.createEntity('transactions', {\n id: txId,\n userId: inviteParam,\n type: 'reward',\n amount: inviteReward,\n description: `Referral reward for ${username}`,\n timestamp: new Date().toISOString()\n });\n }\n setNotification({\n message: `You joined through ${inviter.username || 'someone'}'s invite! They get a speed boost!`,\n type: \"success\"\n });\n socket.emit('new_invite', {\n inviterId: inviteParam,\n inviteeId: userId,\n inviteeName: username\n });\n try {\n try {\n sessionStorage.removeItem('sparkchain_invite_param');\n } catch (storageError) {\n console.log(\"Cannot access sessionStorage:\", storageError);\n }\n console.log(\"Skipping URL manipulation in sandboxed environment\");\n } catch (error) {\n console.log(\"Error in post-invite cleanup:\", error);\n }\n } else {\n console.log(\"Inviter not found:\", inviteParam);\n }\n } catch (error) {\n console.error(\"Error processing invite:\", error);\n setErrorMessage(\"Failed to process invite. Please try again.\");\n }\n }\n } catch (e) {\n console.error(\"Error accessing URL parameters:\", e);\n }\n };\n checkInvite();\n }, [userId, isAuthenticated, username]);\n const processInviteCode = async code => {\n try {\n if (!code || code === '') {\n setErrorMessage(\"Please enter a valid invite code.\");\n return;\n }\n const allUsers = await client.getEntities('users');\n const inviter = allUsers.find(user => {\n const userPart = user.id.substring(user.id.lastIndexOf('_') + 1, user.id.lastIndexOf('_') + 5);\n const randomPart = code.split('-')[2];\n const expectedCode = `SPARK-${userPart}-${randomPart}`;\n return code === expectedCode;\n });\n if (!inviter) {\n setErrorMessage(\"Invalid invite code. Please check and try again.\");\n return;\n }\n if (inviter.id === userId) {\n setErrorMessage(\"You cannot use your own invite code.\");\n return;\n }\n sessionStorage.setItem('sparkchain_invite_param', inviter.id);\n console.log(\"Processing invite from code for user:\", inviter.id);\n const referralId = `ref_${Date.now()}`;\n await client.createEntity('referrals', {\n id: referralId,\n inviterId: inviter.id,\n inviterName: inviter.username || 'User',\n inviteeId: userId,\n inviteeName: username,\n status: 'accepted',\n joinedAt: new Date().toISOString()\n });\n await client.updateEntity('users', inviter.id, {\n ...inviter,\n inviteCount: (inviter.inviteCount || 0) + 1\n });\n if (inviter.tokenLaunched) {\n const inviteReward = 50;\n await client.updateEntity('users', inviter.id, {\n ...inviter,\n tokenBalance: (inviter.tokenBalance || 0) + inviteReward\n });\n const txId = `tx_${Date.now()}`;\n await client.createEntity('transactions', {\n id: txId,\n userId: inviter.id,\n type: 'reward',\n amount: inviteReward,\n description: `Referral reward for ${username}`,\n timestamp: new Date().toISOString()\n });\n }\n setNotification({\n message: `You joined through ${inviter.username || 'someone'}'s invite! They get a speed boost!`,\n type: \"success\"\n });\n socket.emit('new_invite', {\n inviterId: inviter.id,\n inviteeId: userId,\n inviteeName: username\n });\n sessionStorage.removeItem('sparkchain_invite_param');\n setShowEnterInviteModal(false);\n return true;\n } catch (error) {\n console.error(\"Error processing invite code:\", error);\n setErrorMessage(\"Failed to process invite code. Please try again.\");\n return false;\n }\n };\n const [locationSetThisSession, setLocationSetThisSession] = useState(false);\n const cleanupDuplicateSatellites = async userId => {\n try {\n console.log(\"Checking for duplicate satellites for user:\", userId);\n const userSatellites = await client.getEntities('satellites', {\n userId\n });\n if (userSatellites && userSatellites.length > 1) {\n console.log(`Found ${userSatellites.length} satellites for user. Cleaning up duplicates...`);\n userSatellites.sort((a, b) => new Date(b.launchDate) - new Date(a.launchDate));\n const satelliteToKeep = userSatellites[0];\n for (let i = 1; i < userSatellites.length; i++) {\n try {\n await client.deleteEntity('satellites', userSatellites[i].id);\n console.log(`Deleted duplicate satellite: ${userSatellites[i].id}`);\n } catch (deleteError) {\n console.error(`Error deleting satellite ${userSatellites[i].id}:`, deleteError);\n }\n }\n const userData = await client.getEntity('users', userId);\n if (userData && userData.satelliteCount !== 1) {\n await client.updateEntity('users', userId, {\n ...userData,\n satelliteCount: 1\n });\n console.log(\"Updated user's satellite count to 1\");\n }\n setUserSatelliteCount(1);\n setSatellites([satelliteToKeep]);\n setUserSatelliteObjects([satelliteToKeep]);\n setNotification({\n message: \"We've fixed a duplicate satellite issue. Your primary satellite has been preserved.\",\n type: \"success\"\n });\n return true;\n } else {\n console.log(\"No duplicate satellites found for user\");\n return false;\n }\n } catch (error) {\n console.error(\"Error cleaning up duplicate satellites:\", error);\n return false;\n }\n };\n useEffect(() => {\n if (!isAuthenticated || !userId) return;\n let isMounted = true;\n const loadUserData = async () => {\n try {\n const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error(\"Database request timed out\")), 10000));\n const userData = await Promise.race([client.getEntity('users', userId), timeoutPromise]);\n try {\n const profiles = await client.getEntities('user_profiles');\n if (profiles && profiles.length > 0) {\n setUserProfiles(profiles);\n }\n } catch (profileError) {\n console.error(\"Error loading user profiles:\", profileError);\n }\n if (userData && userData.miningState) {\n const {\n isMining: wasMining,\n lastMiningConfirmation: lastConfirm,\n miningReward: savedReward,\n lastMiningPrompt\n } = userData.miningState;\n if (wasMining && lastConfirm) {\n const lastConfirmTime = new Date(lastConfirm);\n const now = new Date();\n const diffInSeconds = Math.floor((now - lastConfirmTime) / 1000);\n if (diffInSeconds < 24 * 60 * 60) {\n setIsMining(true);\n setLastMiningConfirmation(lastConfirm);\n setMiningTimeRemaining(24 * 60 * 60 - diffInSeconds);\n setMiningReward(savedReward || 0);\n startMiningInterval();\n setShowMiningCounter(true);\n setTimeout(() => {\n if (isMounted && !document.hidden) {\n setShowMiningCounter(false);\n }\n }, 5000);\n } else {\n const lastPromptTime = lastMiningPrompt ? new Date(lastMiningPrompt) : null;\n const promptDiffInHours = lastPromptTime ? Math.floor((now - lastPromptTime) / (1000 * 60 * 60)) : 24;\n if (!lastPromptTime || promptDiffInHours >= 24) {\n setMiningReward(savedReward || 0);\n setShowMiningModal(true);\n await client.updateEntity('users', userId, {\n ...userData,\n miningState: {\n ...userData.miningState,\n lastMiningPrompt: now.toISOString()\n }\n });\n }\n }\n } else if (!lastMiningConfirmation && !userData.miningState.lastMiningPrompt) {\n setTimeout(() => {\n setShowMiningModal(true);\n client.updateEntity('users', userId, {\n ...userData,\n miningState: {\n ...userData.miningState,\n lastMiningPrompt: new Date().toISOString()\n }\n });\n }, 2000);\n }\n } else if (!localStorage.getItem('sparkchain_has_seen_mining')) {\n setTimeout(() => {\n setShowMiningModal(true);\n localStorage.setItem('sparkchain_has_seen_mining', 'true');\n if (userData) {\n client.updateEntity('users', userId, {\n ...userData,\n miningState: {\n isMining: false,\n lastMiningPrompt: new Date().toISOString()\n }\n });\n }\n }, 2000);\n }\n if (!isMounted) return;\n if (userData) {\n try {\n const userSatellites = await client.getEntities('satellites', {\n userId\n });\n if (!hasClearedDuplicates && userSatellites && userSatellites.length > 1) {\n await cleanupDuplicateSatellites(userId);\n setHasClearedDuplicates(true);\n } else if (userSatellites && userSatellites.length > 0) {\n setSatellites(userSatellites);\n setUserSatelliteObjects(userSatellites);\n }\n } catch (satelliteError) {\n console.error(\"Error loading satellites:\", satelliteError);\n }\n const satelliteCount = userData.satelliteCount || 0;\n setUserSatelliteCount(satelliteCount);\n setInviteCount(userData.inviteCount || 0);\n setLaunchSpeed(userData.inviteCount >= 5 ? 2 : 1);\n setCurrentPhase(satelliteCount >= 1 ? 2 : 1);\n if (!userData.hasInitialCoins) {\n await initializeUserWithSparkCoins(userData);\n } else if (userData.tokenLaunched) {\n setTokenLaunched(true);\n setTokenBalance(userData.tokenBalance || 0);\n calculateTokenValue(satelliteCount, userData.inviteCount || 0);\n try {\n await loadTokenTransactions();\n } catch (txError) {\n console.error(\"Error loading transactions:\", txError);\n }\n try {\n await loadStakedSatellites();\n } catch (stakeError) {\n console.error(\"Error loading staked satellites:\", stakeError);\n }\n setLastRewardClaim(userData.lastRewardClaim || null);\n }\n if (userData.preferences) {\n setSoundEnabled(userData.preferences.soundEnabled ?? false);\n setElonMode(userData.preferences.elonMode ?? false);\n setCustomColor(userData.preferences.customColor || '#4fc3f7');\n setWalletConnected(userData.preferences.walletConnected ?? false);\n const hasPersistedLocation = localStorage.getItem('sparkchain_location_set') === 'true';\n if (userData.preferences.location) {\n const {\n lat,\n lng\n } = userData.preferences.location;\n const x = (lng + 180) / 360 * 2 - 1;\n const y = (lat + 90) / 180 * 2 - 1;\n setUserLocation({\n x,\n y\n });\n setLocationSetThisSession(true);\n localStorage.setItem('sparkchain_location_set', 'true');\n } else if (userData.preferences.userLocation) {\n setUserLocation(userData.preferences.userLocation);\n setLocationSetThisSession(true);\n localStorage.setItem('sparkchain_location_set', 'true');\n } else if (userData.preferences.locationSet) {\n localStorage.setItem('sparkchain_location_set', 'true');\n setLocationSetThisSession(true);\n } else if (hasPersistedLocation) {\n setLocationSetThisSession(true);\n } else {\n setShowLocationSelector(true);\n }\n } else if (localStorage.getItem('sparkchain_location_set') === 'true') {\n setLocationSetThisSession(true);\n } else {\n setShowLocationSelector(true);\n }\n loadChatLocations();\n if (userData.gameState && userData.gameState.isLaunching) {\n setIsLaunching(true);\n const interval = 10000 / (userData.inviteCount >= 5 ? 2 : 1);\n launchInterval.current = setInterval(launchSatellite, interval);\n }\n updateConnectionStatus(satelliteCount);\n loadReferrals();\n } else {\n await client.createEntity('users', {\n id: userId,\n email: userEmail,\n username: username,\n satelliteCount: 0,\n inviteCount: 0,\n tokenLaunched: false,\n tokenBalance: 0,\n preferences: {\n soundEnabled: false,\n elonMode: false,\n walletConnected: false\n },\n gameState: {\n isLaunching: false\n }\n });\n setUserLocation({\n x: (Math.random() * 2 - 1) * 0.5,\n y: (Math.random() * 2 - 1) * 0.5\n });\n }\n const savedSound = localStorage.getItem('sparkchain_sound_enabled');\n if (savedSound !== null) {\n setSoundEnabled(savedSound === 'true');\n }\n setInviteLink(inviteCode);\n console.log(\"Generated invite code:\", inviteCode);\n } catch (error) {\n console.error(\"Error loading user data:\", error);\n }\n };\n loadUserData();\n }, [userId, updateConnectionStatus, isAuthenticated, userEmail, username, calculateTokenValue, hasClearedDuplicates]);\n const loadTokenTransactions = async () => {\n try {\n const transactions = await client.getEntities('transactions', {\n userId\n });\n if (transactions && transactions.length > 0) {\n transactions.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));\n setTokenTransactions(transactions);\n } else {\n setTokenTransactions([]);\n }\n } catch (error) {\n console.error(\"Error loading token transactions:\", error);\n }\n };\n const loadStakedSatellites = async () => {\n try {\n const staked = await client.getEntities('staked_satellites', {\n userId\n });\n if (staked && staked.length > 0) {\n setStakedSatellites(staked);\n calculateStakingRewards(staked);\n } else {\n setStakedSatellites([]);\n setStakingRewards(0);\n }\n } catch (error) {\n console.error(\"Error loading staked satellites:\", error);\n }\n };\n const calculateStakingRewards = staked => {\n if (!staked || staked.length === 0) {\n setStakingRewards(0);\n return;\n }\n let totalRewards = 0;\n const now = new Date();\n staked.forEach(satellite => {\n const stakedAt = new Date(satellite.stakedAt);\n const lastClaim = lastRewardClaim ? new Date(lastRewardClaim) : stakedAt;\n const startTime = lastClaim > stakedAt ? lastClaim : stakedAt;\n const daysStaked = (now - startTime) / (1000 * 60 * 60 * 24);\n const reward = daysStaked * 0.5;\n totalRewards += reward;\n });\n setStakingRewards(totalRewards);\n };\n const loadReferrals = async () => {\n try {\n setRefreshingInvites(true);\n const referrals = await client.getEntities('referrals');\n const userReferrals = referrals.filter(ref => ref.inviterId === userId);\n if (userReferrals && userReferrals.length > 0) {\n userReferrals.sort((a, b) => new Date(b.joinedAt) - new Date(a.joinedAt));\n setInvites(userReferrals);\n } else {\n setInvites([]);\n }\n setPendingInvites([]);\n setRefreshingInvites(false);\n } catch (error) {\n console.error(\"Error loading referrals:\", error);\n setRefreshingInvites(false);\n }\n };\n const [globalChatMessages, setGlobalChatMessages] = useState([]);\n const [globalChatInput, setGlobalChatInput] = useState('');\n useEffect(() => {\n if (!isAuthenticated || !userId) return;\n let isConnected = false;\n let reconnectAttempts = 0;\n const maxReconnectAttempts = 5;\n socket.on('connect', () => {\n console.log('Connected to socket server');\n isConnected = true;\n reconnectAttempts = 0;\n try {\n socket.emit('user_joined', {\n userId\n });\n } catch (emitError) {\n console.error(\"Error emitting user_joined event:\", emitError);\n }\n });\n socket.on('disconnect', () => {\n console.log('Disconnected from socket server');\n isConnected = false;\n setNotification({\n message: \"Connection lost. Attempting to reconnect...\",\n type: \"error\"\n });\n });\n socket.on('reconnect', () => {\n console.log('Reconnected to socket server');\n setNotification({\n message: \"Connection restored!\",\n type: \"success\"\n });\n });\n socket.on('reconnect_error', error => {\n reconnectAttempts++;\n console.error(`Reconnection attempt ${reconnectAttempts} failed:`, error);\n if (reconnectAttempts >= maxReconnectAttempts) {\n setNotification({\n message: \"Unable to connect. Please refresh the page.\",\n type: \"error\"\n });\n }\n });\n socket.on('devfun:user_count', count => {\n setUserCount(count || 0);\n if (tokenLaunched) {\n try {\n calculateTokenValue(userSatelliteCount, inviteCount);\n } catch (valueError) {\n console.error(\"Error calculating token value:\", valueError);\n }\n }\n });\n socket.on('satellite_launched', data => {\n if (data && data.userId !== userId && data.satellite) {\n try {\n addSatellite(data.satellite);\n } catch (addError) {\n console.error(\"Error adding satellite:\", addError);\n }\n }\n });\n socket.on('new_invite', data => {\n if (data.inviterId === userId) {\n loadUserInvites();\n loadReferrals();\n if (data.inviteeName) {\n setNotification({\n message: `${data.inviteeName} joined through your invite link!`,\n type: \"success\"\n });\n }\n }\n });\n socket.on('satellite_trade_request', data => {\n if (data.toUserId === userId) {\n setNotification({\n message: `${data.fromUserName || 'Someone'} wants to trade a satellite with you!`,\n type: \"trade\",\n data: data\n });\n }\n });\n socket.on('satellite_trade_complete', data => {\n if (data.fromUserId === userId || data.toUserId === userId) {\n setNotification({\n message: `Satellite trade completed successfully!`,\n type: \"success\"\n });\n loadUserData();\n }\n });\n socket.on('new_chat_message', data => {\n if (showChatModal && selectedLocation && (selectedLocation.id === data.locationId || Math.abs(selectedLocation.x - data.location?.x) < 0.05 && Math.abs(selectedLocation.y - data.location?.y) < 0.05)) {\n setChatMessages(prev => [...prev, data.message]);\n setTimeout(() => {\n if (chatEndRef.current) {\n chatEndRef.current.scrollIntoView({\n behavior: 'smooth'\n });\n }\n }, 100);\n }\n setChatLocations(prev => prev.map(loc => {\n if (loc.id === data.locationId) {\n return {\n ...loc,\n messageCount: (loc.messageCount || 0) + 1\n };\n }\n return loc;\n }));\n });\n socket.on('new_mining_reply', data => {\n if (data.recipientId === userId) {\n setNotification({\n message: `You received ${data.reward} SPARK from ${data.message.username} as a mining reward!`,\n type: \"success\"\n });\n setTokenBalance(prev => prev + data.reward);\n }\n if (showChatModal && selectedLocation && (selectedLocation.id === data.locationId || Math.abs(selectedLocation.x - data.location?.x) < 0.05 && Math.abs(selectedLocation.y - data.location?.y) < 0.05)) {\n setChatMessages(prev => [...prev, data.message]);\n setChatMessages(prev => prev.map(msg => {\n if (msg.id === data.message.replyTo) {\n return {\n ...msg,\n replyCount: (msg.replyCount || 0) + 1\n };\n }\n return msg;\n }));\n setTimeout(() => {\n if (chatEndRef.current) {\n chatEndRef.current.scrollIntoView({\n behavior: 'smooth'\n });\n }\n }, 100);\n }\n });\n socket.on('global_chat_message', data => {\n if (data && data.message) {\n if (data.message.userId !== userId) {\n setGlobalChatMessages(prev => {\n const newMessage = {\n ...data.message,\n createdAt: Date.now(),\n id: `msg_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,\n visible: true\n };\n return [...prev, newMessage];\n });\n }\n }\n });\n return () => {\n socket.off('connect');\n socket.off('devfun:user_count');\n socket.off('satellite_launched');\n socket.off('new_invite');\n socket.off('satellite_trade_request');\n socket.off('satellite_trade_complete');\n socket.off('new_chat_message');\n socket.off('new_mining_reply');\n socket.off('global_chat_message');\n };\n }, [userId, isAuthenticated, tokenLaunched, userSatelliteCount, inviteCount, calculateTokenValue, showChatModal, selectedLocation]);\n useEffect(() => {\n const interval = setInterval(() => {\n const now = Date.now();\n setGlobalChatMessages(prev => prev.filter(msg => now - msg.createdAt < 60000));\n }, 1000);\n return () => clearInterval(interval);\n }, []);\n const sendGlobalChatMessage = () => {\n if (!globalChatInput.trim() || !userId) return;\n const message = {\n content: globalChatInput.trim(),\n userId,\n username: username || 'User',\n timestamp: new Date().toISOString()\n };\n const newMessage = {\n ...message,\n createdAt: Date.now(),\n id: `msg_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,\n visible: true\n };\n setGlobalChatMessages(prev => [...prev, newMessage]);\n socket.emit('global_chat_message', {\n message\n });\n setGlobalChatInput('');\n };\n useEffect(() => {\n if (!isAuthenticated || !tokenLaunched || stakedSatellites.length === 0) return;\n stakingInterval.current = setInterval(() => {\n calculateStakingRewards(stakedSatellites);\n }, 60000);\n return () => {\n if (stakingInterval.current) {\n clearInterval(stakingInterval.current);\n }\n };\n }, [isAuthenticated, tokenLaunched, stakedSatellites, lastRewardClaim]);\n const loadUserInvites = async () => {\n try {\n const userData = await client.getEntity('users', userId);\n if (userData) {\n setInviteCount(userData.inviteCount || 0);\n setLaunchSpeed(userData.inviteCount >= 5 ? 2 : 1);\n if (tokenLaunched) {\n calculateTokenValue(userData.satelliteCount || 0, userData.inviteCount || 0);\n }\n }\n } catch (error) {\n console.error(\"Error loading user invites:\", error);\n }\n };\n const loadUserData = async () => {\n try {\n const userData = await client.getEntity('users', userId);\n if (userData) {\n setUserSatelliteCount(userData.satelliteCount || 0);\n const userSatellites = await client.getEntities('satellites', {\n userId\n });\n if (userSatellites && userSatellites.length > 0) {\n setSatellites(userSatellites);\n setUserSatelliteObjects(userSatellites);\n }\n if (userData.tokenLaunched) {\n calculateTokenValue(userData.satelliteCount || 0, userData.inviteCount || 0);\n }\n }\n } catch (error) {\n console.error(\"Error loading user data:\", error);\n }\n };\n const addSatellite = useCallback(satellite => {\n if (!satellite || typeof satellite !== 'object') {\n console.error(\"Invalid satellite object:\", satellite);\n return;\n }\n const validatedSatellite = {\n id: satellite.id || `sat_unknown_${Date.now()}`,\n userId: satellite.userId || 'unknown',\n orbitRadius: satellite.orbitRadius || 2 + Math.random() * 0.5,\n orbitSpeed: satellite.orbitSpeed || 0.005 + Math.random() * 0.005,\n color: satellite.color || `hsl(${Math.random() * 360}, 70%, 60%)`,\n angle: satellite.angle || Math.random() * Math.PI * 2,\n launchDate: satellite.launchDate || new Date().toISOString()\n };\n setSatellites(prev => {\n if (prev.some(sat => sat.id === validatedSatellite.id)) {\n return prev;\n }\n return [...prev, validatedSatellite];\n });\n }, []);\n const loadChatLocations = async () => {\n try {\n const locations = await client.getEntities('chat_locations');\n if (locations && locations.length > 0) {\n const locationsWithMessageCount = await Promise.all(locations.map(async location => {\n try {\n const messages = await client.getEntities('chat_messages', {\n locationId: location.id\n });\n return {\n ...location,\n messageCount: messages ? messages.length : 0\n };\n } catch (error) {\n console.error(\"Error getting message count for location:\", error);\n return {\n ...location,\n messageCount: 0\n };\n }\n }));\n setChatLocations(locationsWithMessageCount);\n }\n } catch (error) {\n console.error(\"Error loading chat locations:\", error);\n }\n };\n const requestLocation = useCallback(() => {\n console.log(\"Using map selection in sandbox environment\");\n fallbackToMapSelection();\n setShowLocationPrompt(false);\n }, []);\n const fallbackToMapSelection = () => {\n if (!locationSetThisSession) {\n setNotification({\n message: \"Please select a location on the map for your satellite.\",\n type: \"info\"\n });\n setShowLocationSelector(true);\n } else {\n setNotification({\n message: \"Using your previously selected location.\",\n type: \"info\"\n });\n }\n };\n const registerChatLocation = async (x, y, lat, lng) => {\n try {\n const existingLocation = chatLocations.find(loc => Math.abs(loc.x - x) < 0.05 && Math.abs(loc.y - y) < 0.05);\n if (existingLocation) {\n console.log(\"Location already registered:\", existingLocation.id);\n return;\n }\n const locationId = `loc_${Date.now()}_${userId.substring(0, 5)}`;\n const newLocation = {\n id: locationId,\n x,\n y,\n lat,\n lng,\n createdBy: userId,\n creatorName: username,\n createdAt: new Date().toISOString(),\n messageCount: 0,\n miningValue: 1.0,\n region: getRegionFromCoordinates(lat, lng),\n hasProfile: true,\n profileUserId: userId\n };\n await client.createEntity('chat_locations', newLocation);\n setChatLocations(prev => [...prev, newLocation]);\n console.log(\"Registered new chat location:\", locationId);\n const newProfile = {\n id: `profile_${Date.now()}_${userId}`,\n userId: userId,\n username: username,\n displayName: username,\n bio: \"Space explorer establishing a new cosmic presence\",\n location: {\n x,\n y,\n lat,\n lng\n },\n locationId: locationId,\n favoriteSatelliteColor: customColor || '#4fc3f7',\n joinDate: new Date().toISOString(),\n lastActive: new Date().toISOString(),\n experience: userSatelliteCount > 5 ? \"Experienced\" : \"Beginner\",\n achievements: [],\n status: \"Online\",\n baseEstablished: new Date().toISOString(),\n satelliteCount: userSatelliteCount,\n miningPower: 1.0\n };\n await client.createEntity('user_profiles', newProfile);\n setUserProfiles(prev => [...prev, newProfile]);\n } catch (error) {\n console.error(\"Error registering chat location:\", error);\n }\n };\n const getRegionFromCoordinates = (lat, lng) => {\n if (lat > 41.90 && lat < 41.91 && lng > 12.44 && lng < 12.46) {\n return \"Vatican City\";\n }\n if (lat > 43.90 && lat < 44.00 && lng > 12.40 && lng < 12.51) {\n return \"San Marino\";\n }\n if (lat > 43.72 && lat < 43.75 && lng > 7.40 && lng < 7.44) {\n return \"Monaco\";\n }\n if (lat > 45.4 && lat < 46.9 && lng > 13.3 && lng < 16.6) {\n return \"Slovenia\";\n }\n if (lat > 41.5 && lat < 43.6 && lng > 18.4 && lng < 20.4) {\n return \"Montenegro\";\n }\n if (lat > 49.4 && lat < 50.2 && lng > 5.7 && lng < 6.5) {\n return \"Luxembourg\";\n }\n if (lat > 42.4 && lat < 42.7 && lng > 1.4 && lng < 1.8) {\n return \"Andorra\";\n }\n if (lat > 47.0 && lat < 47.3 && lng > 9.4 && lng < 9.7) {\n return \"Liechtenstein\";\n }\n if (lat > 35.8 && lat < 36.1 && lng > 14.1 && lng < 14.6) {\n return \"Malta\";\n }\n if (lat > 63.0 && lat < 67.0 && lng > -24.0 && lng < -13.0) {\n return \"Iceland\";\n }\n if (lat > -47.0 && lat < -34.0 && lng > 166.0 && lng < 179.0) {\n return \"New Zealand\";\n }\n if (lat > 17.7 && lat < 18.5 && lng > -78.4 && lng < -76.2) {\n return \"Jamaica\";\n }\n if (lat > 18.0 && lat < 23.0 && lng > -160.0 && lng < -154.0) {\n return \"Hawaii\";\n }\n if (lat > -20.0 && lat < -16.0 && lng > 177.0 && lng < 180.0) {\n return \"Fiji\";\n }\n if (lat > 30.0 && lat < 46.0 && lng > 129.0 && lng < 146.0) {\n return \"Japan\";\n }\n if (lat > 33.0 && lat < 39.0 && lng > 124.0 && lng < 131.0) {\n return \"South Korea\";\n }\n if (lat > 1.25 && lat < 1.5 && lng > 103.6 && lng < 104.0) {\n return \"Singapore\";\n }\n if (lat > 29.5 && lat < 33.5 && lng > 34.2 && lng < 35.9) {\n return \"Israel\";\n }\n if (lat > 22.6 && lat < 26.1 && lng > 51.0 && lng < 56.4) {\n return \"United Arab Emirates\";\n }\n if (lat > 24.5 && lat < 26.2 && lng > 50.7 && lng < 51.7) {\n return \"Qatar\";\n }\n if (lat > -25.6 && lat < -11.9 && lng > 43.2 && lng < 50.5) {\n return \"Madagascar\";\n }\n if (lat > -5.0 && lat < -3.0 && lng > 52.0 && lng < 56.0) {\n return \"Seychelles\";\n }\n if (lat > -35.0 && lat < -22.0 && lng > 16.0 && lng < 33.0) {\n return \"South Africa\";\n }\n if (lat > -4.7 && lat < 5.0 && lng > 33.9 && lng < 41.9) {\n return \"Kenya\";\n }\n if (lat > 59.0 && lat < 84.0 && lng > -74.0 && lng < -11.0) {\n return \"Greenland\";\n }\n if (lat > 19.8 && lat < 23.3 && lng > -85.0 && lng < -74.0) {\n return \"Cuba\";\n }\n if (lat > 20.0 && lat < 27.0 && lng > -80.0 && lng < -72.0) {\n return \"Bahamas\";\n }\n if (lat > -56.0 && lat < -17.0 && lng > -76.0 && lng < -66.0) {\n return \"Chile\";\n }\n if (lat > -55.0 && lat < -22.0 && lng > -73.0 && lng < -53.0) {\n return \"Argentina\";\n }\n if (lat > -33.0 && lat < 5.0 && lng > -74.0 && lng < -34.0) {\n return \"Brazil\";\n }\n if (lat > -52.5 && lat < -51.0 && lng > -61.0 && lng < -57.5) {\n return \"Falkland Islands\";\n }\n if (lat > -12.0 && lat < -1.0 && lng > 140.0 && lng < 157.0) {\n return \"Papua New Guinea\";\n }\n if (lat > -12.0 && lat < -5.0 && lng > 155.0 && lng < 170.0) {\n return \"Solomon Islands\";\n }\n if (lat > -9.0 && lat < -5.0 && lng > 176.0 && lng < 180.0) {\n return \"Tuvalu\";\n }\n if (lat < -60.0) {\n return \"Antarctica\";\n }\n if (lat > 35 && lat < 70 && lng > -10 && lng < 40) {\n return \"Europe\";\n }\n if (lat > 25 && lat < 70 && lng > -130 && lng < -60) {\n return \"North America\";\n }\n if (lat > 0 && lat < 70 && lng > 60 && lng < 180) {\n return \"Asia\";\n }\n if (lat > -35 && lat < 35 && lng > -20 && lng < 50) {\n return \"Africa\";\n }\n if (lat > -60 && lat < 15 && lng > -80 && lng < -30) {\n return \"South America\";\n }\n if (lat > -50 && lat < -10 && lng > 110 && lng < 180) {\n return \"Australia\";\n }\n return \"Unknown Region\";\n };\n const handleEarthLocationSelect = location => {\n if (!location) return;\n setSelectedMapLocation(location);\n const region = getRegionFromCoordinates(location.lat, location.lng);\n if (region !== \"Unknown Region\" && region !== \"Europe\" && region !== \"North America\" && region !== \"Asia\" && region !== \"Africa\" && region !== \"South America\" && region !== \"Australia\") {\n setNotification({\n message: `You selected ${region}! ${region === \"Slovenia\" ? \"This location has 3x mining value!\" : \"This is a small country with special features!\"}`,\n type: \"success\"\n });\n } else {\n setNotification({\n message: `Location selected: ${region}`,\n type: \"info\"\n });\n }\n };\n const confirmSelectedLocation = async () => {\n if (!selectedMapLocation) return;\n const {\n x,\n y,\n lat,\n lng\n } = selectedMapLocation;\n setUserLocation({\n x,\n y\n });\n await saveUserPreferences({\n location: {\n lat,\n lng\n },\n locationSet: true,\n userLocation: {\n x,\n y\n }\n });\n setLocationSetThisSession(true);\n localStorage.setItem('sparkchain_location_set', 'true');\n await registerChatLocation(x, y, lat, lng);\n setNotification({\n message: \"Base location set! Your satellite will always launch from here.\",\n type: \"success\"\n });\n setShowLocationSelector(false);\n };\n const [userProfiles, setUserProfiles] = useState([]);\n const [showProfileModal, setShowProfileModal] = useState(false);\n const [selectedProfile, setSelectedProfile] = useState(null);\n const [editingProfile, setEditingProfile] = useState(false);\n const [profileFormData, setProfileFormData] = useState({\n displayName: '',\n bio: '',\n favoriteSatelliteColor: '',\n joinDate: '',\n experience: 'Beginner',\n achievements: [],\n status: 'Online',\n baseEstablished: ''\n });\n const handleLocationClick = async (location, isUserLocation) => {\n if (!location) return;\n if (isLaunching) {\n setNotification({\n message: \"Cannot change location while launching satellites.\",\n type: \"warning\"\n });\n return;\n }\n if (location.hasProfile) {\n const profile = userProfiles.find(p => p.locationId === location.id || Math.abs(p.location.x - location.x) < 0.05 && Math.abs(p.location.y - location.y) < 0.05);\n if (profile) {\n setSelectedProfile(profile);\n setShowProfileModal(true);\n return;\n } else {\n await loadUserProfile(location, isUserLocation);\n return;\n }\n }\n setSelectedLocation(location);\n setIsUserOwnLocation(isUserLocation);\n await loadMessagesForLocation(location);\n calculateLocationMiningValue(location);\n setShowChatModal(true);\n };\n const loadUserProfile = async (location, isUserLocation) => {\n try {\n let locationId;\n if (location.id) {\n locationId = location.id;\n } else {\n const closestLocation = chatLocations.find(loc => Math.abs(loc.x - location.x) < 0.05 && Math.abs(loc.y - location.y) < 0.05);\n if (closestLocation) {\n locationId = closestLocation.id;\n }\n }\n if (!locationId) return;\n const existingProfiles = await client.getEntities('user_profiles', {\n locationId\n });\n if (existingProfiles && existingProfiles.length > 0) {\n setSelectedProfile(existingProfiles[0]);\n setShowProfileModal(true);\n } else if (isUserLocation) {\n const newProfile = {\n id: `profile_${Date.now()}_${userId}`,\n userId: userId,\n username: username,\n displayName: username,\n bio: \"Space explorer establishing a new cosmic presence\",\n location: location,\n locationId: locationId,\n favoriteSatelliteColor: customColor || '#4fc3f7',\n joinDate: new Date().toISOString(),\n lastActive: new Date().toISOString(),\n experience: userSatelliteCount > 5 ? \"Experienced\" : \"Beginner\",\n achievements: [],\n status: \"Online\",\n baseEstablished: new Date().toISOString(),\n satelliteCount: userSatelliteCount,\n miningPower: locationMiningValue.toFixed(1)\n };\n await client.createEntity('user_profiles', newProfile);\n setUserProfiles(prev => [...prev, newProfile]);\n setSelectedProfile(newProfile);\n setShowProfileModal(true);\n if (location.id) {\n const updatedLocation = await client.getEntity('chat_locations', location.id);\n if (updatedLocation) {\n await client.updateEntity('chat_locations', location.id, {\n ...updatedLocation,\n hasProfile: true,\n profileUserId: userId\n });\n }\n }\n }\n } catch (error) {\n console.error(\"Error loading user profile:\", error);\n setErrorMessage(\"Failed to load user profile\");\n }\n };\n const updateUserProfile = async updatedProfile => {\n try {\n await client.updateEntity('user_profiles', selectedProfile.id, updatedProfile);\n setUserProfiles(prev => prev.map(p => p.id === updatedProfile.id ? updatedProfile : p));\n setSelectedProfile(updatedProfile);\n setNotification({\n message: \"Profile updated successfully!\",\n type: \"success\"\n });\n setEditingProfile(false);\n } catch (error) {\n console.error(\"Error updating profile:\", error);\n setErrorMessage(\"Failed to update profile\");\n }\n };\n const loadMessagesForLocation = async location => {\n setLoadingMessages(true);\n setChatMessages([]);\n try {\n let locationId;\n if (location.id) {\n locationId = location.id;\n } else {\n const closestLocation = chatLocations.find(loc => Math.abs(loc.x - location.x) < 0.05 && Math.abs(loc.y - location.y) < 0.05);\n if (closestLocation) {\n locationId = closestLocation.id;\n } else {\n locationId = `loc_${Date.now()}_${userId.substring(0, 5)}`;\n const lng = (location.x + 1) / 2 * 360 - 180;\n const lat = (location.y + 1) / 2 * 180 - 90;\n const newLocation = {\n id: locationId,\n x: location.x,\n y: location.y,\n lat,\n lng,\n createdBy: userId,\n creatorName: username,\n createdAt: new Date().toISOString(),\n messageCount: 0,\n miningValue: 1.0,\n region: getRegionFromCoordinates(lat, lng)\n };\n await client.createEntity('chat_locations', newLocation);\n setChatLocations(prev => [...prev, newLocation]);\n }\n }\n const messages = await client.getEntities('chat_messages', {\n locationId\n });\n if (messages && messages.length > 0) {\n messages.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));\n setChatMessages(messages);\n } else {\n setChatMessages([]);\n }\n } catch (error) {\n console.error(\"Error loading messages:\", error);\n setChatMessages([]);\n }\n setLoadingMessages(false);\n setTimeout(() => {\n if (chatEndRef.current) {\n chatEndRef.current.scrollIntoView({\n behavior: 'smooth'\n });\n }\n }, 100);\n };\n const calculateLocationMiningValue = location => {\n try {\n let value = 1.0;\n const locationData = chatLocations.find(loc => loc.id === location.id || Math.abs(loc.x - location.x) < 0.05 && Math.abs(loc.y - location.y) < 0.05);\n if (locationData) {\n value += Math.min(5, locationData.messageCount * 0.1);\n const region = locationData.region;\n if (region === \"Vatican City\" || region === \"Antarctica\") {\n value *= 4.0;\n } else if (region === \"Tuvalu\") {\n value *= 3.5;\n } else if (region === \"Slovenia\" || region === \"San Marino\" || region === \"Monaco\" || region === \"Seychelles\" || region === \"Falkland Islands\") {\n value *= 3.0;\n } else if (region === \"Fiji\" || region === \"Singapore\" || region === \"Greenland\" || region === \"Solomon Islands\") {\n value *= 2.5;\n } else if (region === \"New Zealand\" || region === \"Hawaii\" || region === \"Madagascar\" || region === \"Africa\" || region === \"South America\" || region === \"Australia\") {\n value *= 2.0;\n } else if (region === \"Asia\" || region === \"Europe\" || region === \"Iceland\" || region === \"Japan\" || region === \"Chile\") {\n value *= 1.5;\n }\n value = Math.min(10.0, value);\n }\n setLocationMiningValue(value);\n } catch (error) {\n console.error(\"Error calculating mining value:\", error);\n setLocationMiningValue(1.0);\n }\n };\n const sendChatMessage = async () => {\n if (!newMessage.trim() || !selectedLocation || !userId) return;\n try {\n let locationId;\n if (selectedLocation.id) {\n locationId = selectedLocation.id;\n } else {\n const closestLocation = chatLocations.find(loc => Math.abs(loc.x - selectedLocation.x) < 0.05 && Math.abs(loc.y - selectedLocation.y) < 0.05);\n if (closestLocation) {\n locationId = closestLocation.id;\n } else {\n console.error(\"No location found for chat message\");\n return;\n }\n }\n const messageId = `msg_${Date.now()}_${userId.substring(0, 5)}`;\n const message = {\n id: messageId,\n locationId,\n userId,\n username: username || 'User',\n content: newMessage.trim(),\n timestamp: new Date().toISOString(),\n replyCount: 0,\n miningReward: 0\n };\n await client.createEntity('chat_messages', message);\n setChatMessages(prev => [...prev, message]);\n setNewMessage('');\n const updatedLocations = chatLocations.map(loc => {\n if (loc.id === locationId) {\n return {\n ...loc,\n messageCount: (loc.messageCount || 0) + 1\n };\n }\n return loc;\n });\n setChatLocations(updatedLocations);\n const location = await client.getEntity('chat_locations', locationId);\n if (location) {\n await client.updateEntity('chat_locations', locationId, {\n ...location,\n messageCount: (location.messageCount || 0) + 1\n });\n }\n calculateLocationMiningValue({\n ...selectedLocation,\n messageCount: (selectedLocation.messageCount || 0) + 1\n });\n setTimeout(() => {\n if (chatEndRef.current) {\n chatEndRef.current.scrollIntoView({\n behavior: 'smooth'\n });\n }\n }, 100);\n socket.emit('new_chat_message', {\n locationId,\n message\n });\n } catch (error) {\n console.error(\"Error sending message:\", error);\n setErrorMessage(\"Failed to send message. Please try again.\");\n }\n };\n const replyWithMining = async originalMessage => {\n if (!newMessage.trim() || !selectedLocation || !userId || !tokenLaunched) return;\n try {\n const miningReward = Math.floor(locationMiningValue * 5);\n if (tokenBalance < miningReward) {\n setErrorMessage(`Not enough SPARK tokens. You need ${miningReward} SPARK to mine here.`);\n return;\n }\n const messageId = `msg_${Date.now()}_${userId.substring(0, 5)}`;\n const message = {\n id: messageId,\n locationId: originalMessage.locationId,\n userId,\n username: username || 'User',\n content: newMessage.trim(),\n timestamp: new Date().toISOString(),\n replyTo: originalMessage.id,\n replyToUser: originalMessage.username,\n miningReward,\n isMiningReply: true\n };\n await client.createEntity('chat_messages', message);\n setChatMessages(prev => [...prev, message]);\n setNewMessage('');\n const updatedMessages = chatMessages.map(msg => {\n if (msg.id === originalMessage.id) {\n return {\n ...msg,\n replyCount: (msg.replyCount || 0) + 1\n };\n }\n return msg;\n });\n setChatMessages(updatedMessages);\n await client.updateEntity('chat_messages', originalMessage.id, {\n ...originalMessage,\n replyCount: (originalMessage.replyCount || 0) + 1\n });\n const newBalance = tokenBalance - miningReward;\n setTokenBalance(newBalance);\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n tokenBalance: newBalance\n });\n }\n const originalAuthor = await client.getEntity('users', originalMessage.userId);\n if (originalAuthor) {\n await client.updateEntity('users', originalMessage.userId, {\n ...originalAuthor,\n tokenBalance: (originalAuthor.tokenBalance || 0) + miningReward\n });\n const txId = `tx_${Date.now()}_reward`;\n await client.createEntity('transactions', {\n id: txId,\n userId: originalMessage.userId,\n type: 'reward',\n amount: miningReward,\n description: `Mining reward from ${username || 'User'}`,\n timestamp: new Date().toISOString()\n });\n }\n const txId = `tx_${Date.now()}_mining`;\n await client.createEntity('transactions', {\n id: txId,\n userId,\n type: 'mining',\n amount: -miningReward,\n description: `Mining reply to ${originalMessage.username}`,\n timestamp: new Date().toISOString()\n });\n loadTokenTransactions();\n setTimeout(() => {\n if (chatEndRef.current) {\n chatEndRef.current.scrollIntoView({\n behavior: 'smooth'\n });\n }\n }, 100);\n setNotification({\n message: `Mining successful! You sent ${miningReward} SPARK to ${originalMessage.username}.`,\n type: \"success\"\n });\n socket.emit('new_mining_reply', {\n locationId: originalMessage.locationId,\n message,\n reward: miningReward,\n recipientId: originalMessage.userId\n });\n } catch (error) {\n console.error(\"Error sending mining reply:\", error);\n setErrorMessage(\"Failed to send mining reply. Please try again.\");\n }\n };\n const launchSatellite = useCallback(async () => {\n try {\n console.log(\"Attempting to launch satellite. Current count:\", userSatelliteCount);\n if (userSatelliteCount >= 1) {\n setIsLaunching(false);\n if (launchInterval.current) {\n clearInterval(launchInterval.current);\n }\n return;\n }\n if (!userLocation) {\n console.log(\"No user location, generating random location\");\n const randomLocation = {\n x: (Math.random() * 2 - 1) * 0.5,\n y: (Math.random() * 2 - 1) * 0.5\n };\n setUserLocation(randomLocation);\n try {\n const lng = (randomLocation.x + 1) / 2 * 360 - 180;\n const lat = (randomLocation.y + 1) / 2 * 180 - 90;\n await saveUserPreferences({\n location: {\n lat,\n lng\n },\n userLocation: randomLocation\n });\n setLocationSetThisSession(true);\n } catch (error) {\n console.error(\"Error saving random location:\", error);\n }\n setNotification({\n message: \"Using a random launch location for your satellite!\",\n type: \"info\"\n });\n }\n const timestamp = Date.now();\n const newSatellite = {\n id: `sat_${userId}_${timestamp}`,\n userId,\n orbitRadius: 2.5 + Math.random() * 0.5,\n orbitSpeed: 0.005 + Math.random() * 0.005,\n color: customColor || `hsl(${Math.random() * 360}, 70%, 60%)`,\n angle: Math.random() * Math.PI * 2,\n launchLocation: {\n ...userLocation\n },\n launchDate: new Date().toISOString()\n };\n console.log(\"Created new satellite:\", newSatellite);\n try {\n console.log(\"Setting satellites state:\", [newSatellite]);\n setSatellites([newSatellite]);\n } catch (addError) {\n console.error(\"Error adding satellite to local state:\", addError);\n }\n try {\n console.log(\"Setting satellite objects state:\", [newSatellite]);\n setUserSatelliteObjects([newSatellite]);\n } catch (objError) {\n console.error(\"Error updating satellite objects:\", objError);\n }\n const newCount = 1;\n setUserSatelliteCount(newCount);\n setCurrentPhase(2);\n setNotification({\n message: \"🎉 Your satellite is now in orbit! You can now customize and stake your satellite!\",\n type: \"special\"\n });\n try {\n updateConnectionStatus(newCount);\n } catch (connError) {\n console.error(\"Error updating connection status:\", connError);\n }\n if (tokenLaunched) {\n try {\n calculateTokenValue(newCount, inviteCount);\n } catch (valueError) {\n console.error(\"Error calculating token value:\", valueError);\n }\n }\n let dbUpdateSuccess = false;\n let retryCount = 0;\n const maxRetries = 3;\n while (!dbUpdateSuccess && retryCount < maxRetries) {\n try {\n const existingSatellites = await client.getEntities('satellites', {\n userId\n });\n if (existingSatellites && existingSatellites.length > 0) {\n for (const sat of existingSatellites) {\n try {\n await client.deleteEntity('satellites', sat.id);\n console.log(`Deleted existing satellite: ${sat.id}`);\n } catch (deleteError) {\n console.error(`Error deleting satellite ${sat.id}:`, deleteError);\n }\n }\n }\n await client.updateEntity('users', userId, {\n satelliteCount: newCount\n });\n await client.createEntity('satellites', {\n ...newSatellite,\n id: newSatellite.id\n });\n dbUpdateSuccess = true;\n } catch (dbError) {\n console.error(`Database update attempt ${retryCount + 1} failed:`, dbError);\n retryCount++;\n if (retryCount >= maxRetries) {\n console.error(\"All database update attempts failed\");\n setNotification({\n message: \"Your satellite launched, but there was an issue saving it. It will sync when connection improves.\",\n type: \"warning\"\n });\n } else {\n await new Promise(resolve => setTimeout(resolve, 1000));\n }\n }\n }\n try {\n socket.emit('satellite_launched', {\n userId,\n satellite: newSatellite\n });\n } catch (socketError) {\n console.error(\"Error emitting satellite launch event:\", socketError);\n }\n if (soundEnabled && audioRef.current) {\n try {\n if (audioRef.current.readyState >= 2) {\n audioRef.current.currentTime = 0;\n audioRef.current.play().catch(e => {\n console.error(\"Audio play error:\", e.message || \"Unknown audio error\");\n });\n } else {\n const handleCanPlay = () => {\n audioRef.current.currentTime = 0;\n audioRef.current.play().catch(e => {\n console.error(\"Audio play error after canplay:\", e.message || \"Unknown audio error\");\n });\n audioRef.current.removeEventListener('canplay', handleCanPlay);\n };\n audioRef.current.addEventListener('canplay', handleCanPlay);\n }\n } catch (audioError) {\n console.error(\"Audio system error:\", audioError.message || \"Unknown audio system error\");\n }\n }\n setIsLaunching(false);\n if (launchInterval.current) {\n clearInterval(launchInterval.current);\n }\n } catch (error) {\n console.error(\"Critical error in launchSatellite:\", error);\n setNotification({\n message: \"There was an issue launching your satellite. Please try again.\",\n type: \"error\"\n });\n setIsLaunching(false);\n if (launchInterval.current) {\n clearInterval(launchInterval.current);\n }\n }\n }, [userId, userSatelliteCount, soundEnabled, userLocation, customColor, updateConnectionStatus, tokenLaunched, calculateTokenValue, inviteCount]);\n const toggleLaunching = async () => {\n if (userSatelliteCount >= 1) {\n setNotification({\n message: \"You can only have one satellite! Your satellite is already in orbit.\",\n type: \"error\"\n });\n return;\n }\n const newLaunchingState = !isLaunching;\n if (newLaunchingState) {\n launchSatellite();\n setIsLaunching(true);\n } else {\n if (launchInterval.current) {\n clearInterval(launchInterval.current);\n }\n setIsLaunching(false);\n }\n try {\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n gameState: {\n ...userData.gameState,\n isLaunching: newLaunchingState\n }\n });\n }\n } catch (error) {\n console.error(\"Error saving game state:\", error);\n }\n };\n const copyInviteLink = () => {\n setNotification({\n message: \"Your invite code is: \" + inviteCode + \" (Copy manually)\",\n type: \"info\"\n });\n setReferralLinkCopied(true);\n setTimeout(() => setReferralLinkCopied(false), 2000);\n console.log(\"Invite code for manual copy:\", inviteCode);\n };\n const shareInviteLink = () => {\n copyInviteLink();\n setNotification({\n message: \"Invite code copied! Share with friends to grow your network!\",\n type: \"success\"\n });\n };\n const saveUserPreferences = async preferences => {\n try {\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n preferences: {\n ...userData.preferences,\n ...preferences\n }\n });\n }\n } catch (error) {\n console.error(\"Error saving user preferences:\", error);\n setErrorMessage(\"Failed to save preferences. Please try again.\");\n setTimeout(() => setErrorMessage(\"\"), 3000);\n }\n };\n const handleSaveUserLocation = useCallback(newLocation => {\n if (!newLocation || !userId) return;\n setUserLocation(newLocation);\n const lng = (newLocation.x + 1) / 2 * 360 - 180;\n const lat = (newLocation.y + 1) / 2 * 180 - 90;\n saveUserPreferences({\n location: {\n lat,\n lng\n },\n userLocation: newLocation,\n locationSet: true\n });\n setLocationSetThisSession(true);\n localStorage.setItem('sparkchain_location_set', 'true');\n registerChatLocation(newLocation.x, newLocation.y, lat, lng);\n setNotification({\n message: \"Location updated! This is now your permanent satellite hub.\",\n type: \"success\"\n });\n }, [userId, registerChatLocation]);\n const loadActiveUsers = async () => {\n try {\n const users = await client.getEntities('users');\n const activeUsers = users.filter(user => user.id !== userId && user.satelliteCount > 0);\n setAvailableUsers(activeUsers);\n } catch (error) {\n console.error(\"Error loading active users:\", error);\n setErrorMessage(\"Failed to load users for trading. Please try again.\");\n }\n };\n const acceptTrade = async tradeData => {\n try {\n const satellite = await client.getEntity('satellites', tradeData.satelliteId);\n if (!satellite) {\n setErrorMessage(\"Satellite not found. Trade cancelled.\");\n return;\n }\n await client.updateEntity('satellites', satellite.id, {\n ...satellite,\n userId: userId,\n tradedAt: new Date().toISOString()\n });\n const fromUser = await client.getEntity('users', tradeData.fromUserId);\n const toUser = await client.getEntity('users', userId);\n if (fromUser) {\n await client.updateEntity('users', tradeData.fromUserId, {\n ...fromUser,\n satelliteCount: 0\n });\n }\n if (toUser) {\n await client.updateEntity('users', userId, {\n ...toUser,\n satelliteCount: 1\n });\n }\n socket.emit('satellite_trade_complete', {\n fromUserId: tradeData.fromUserId,\n toUserId: userId,\n satelliteId: satellite.id\n });\n setUserSatelliteCount(1);\n setSatellites([{\n ...satellite,\n userId\n }]);\n setUserSatelliteObjects([{\n ...satellite,\n userId\n }]);\n setNotification({\n message: \"Trade accepted! You received a new satellite!\",\n type: \"success\"\n });\n } catch (error) {\n console.error(\"Error accepting trade:\", error);\n setErrorMessage(\"Failed to complete trade. Please try again.\");\n }\n };\n const saveCustomColor = async () => {\n try {\n await saveUserPreferences({\n customColor\n });\n const updatedSatellites = satellites.map(satellite => {\n if (satellite.userId === userId) {\n return {\n ...satellite,\n color: customColor\n };\n }\n return satellite;\n });\n setSatellites(updatedSatellites);\n try {\n const userSatellites = await client.getEntities('satellites', {\n userId\n });\n if (userSatellites && userSatellites.length > 0) {\n const satellite = userSatellites[0];\n await client.updateEntity('satellites', satellite.id, {\n ...satellite,\n color: customColor\n });\n setUserSatelliteObjects(prev => prev.map(sat => {\n if (sat.userId === userId) {\n return {\n ...sat,\n color: customColor\n };\n }\n return sat;\n }));\n }\n } catch (dbError) {\n console.error(\"Error updating satellite in database:\", dbError);\n }\n setNotification({\n message: \"Custom color saved! Your satellite is now updated.\",\n type: \"success\"\n });\n setShowCustomizeModal(false);\n } catch (error) {\n console.error(\"Error saving custom color:\", error);\n setErrorMessage(\"Failed to save custom color. Please try again.\");\n }\n };\n const handleKeyDown = e => {\n const newInput = elonInput + e.key.toUpperCase();\n if (newInput.length > 4) {\n setElonInput(newInput.substring(1));\n } else {\n setElonInput(newInput);\n }\n if (newInput.endsWith(\"ELON\")) {\n setElonMode(true);\n saveUserPreferences({\n elonMode: true\n });\n setNotification({\n message: \"Elon Mode Activated! 🚀\",\n type: \"special\"\n });\n setTimeout(() => {\n setNotification(null);\n }, 3000);\n }\n };\n useEffect(() => {\n if (notification) {\n const timer = setTimeout(() => {\n setNotification(null);\n }, 3000);\n return () => clearTimeout(timer);\n }\n }, [notification]);\n useEffect(() => {\n if (!gameStarted || gameOver) return;\n const interval = setInterval(() => {\n setOpponentPosition(prev => {\n if (prev <= 10) setOpponentMoveDirection(1);\n if (prev >= 90) setOpponentMoveDirection(-1);\n const randomFactor = Math.random() * 2 - 1;\n return Math.max(5, Math.min(95, prev + opponentMoveDirection * (2 + randomFactor)));\n });\n if (Math.random() < 0.03) {\n setOpponentProjectiles(prev => [...prev, {\n id: Date.now(),\n x: 85,\n y: opponentPosition,\n direction: -1\n }]);\n }\n setProjectiles(prev => {\n const updatedProjectiles = prev.filter(p => p.x < 100).map(p => ({\n ...p,\n x: p.x + 2\n }));\n const hits = updatedProjectiles.filter(p => p.x >= 85 && p.x <= 95 && Math.abs(p.y - opponentPosition) < 10);\n if (hits.length > 0) {\n const remainingProjectiles = updatedProjectiles.filter(p => !hits.includes(p));\n setPlayerScore(prev => {\n const newScore = prev + 1;\n if (newScore >= 3) {\n handleGameOver('player');\n }\n return newScore;\n });\n return remainingProjectiles;\n }\n return updatedProjectiles;\n });\n setOpponentProjectiles(prev => {\n const updatedProjectiles = prev.filter(p => p.x > 0).map(p => ({\n ...p,\n x: p.x - 2\n }));\n const hits = updatedProjectiles.filter(p => p.x <= 15 && p.x >= 5 && Math.abs(p.y - playerPosition) < 10);\n if (hits.length > 0) {\n const remainingProjectiles = updatedProjectiles.filter(p => !hits.includes(p));\n setOpponentScore(prev => {\n const newScore = prev + 1;\n if (newScore >= 3) {\n handleGameOver('opponent');\n }\n return newScore;\n });\n return remainingProjectiles;\n }\n return updatedProjectiles;\n });\n }, 50);\n setGameInterval(interval);\n return () => {\n clearInterval(interval);\n };\n }, [gameStarted, gameOver, opponentPosition, playerPosition, opponentMoveDirection]);\n useEffect(() => {\n if (!isAuthenticated || !userId) return;\n const saveGameData = async () => {\n try {\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n satelliteCount: userSatelliteCount,\n gameState: {\n ...userData.gameState,\n isLaunching,\n lastSaved: new Date().toISOString()\n }\n });\n }\n } catch (error) {\n console.error(\"Error auto-saving game data:\", error);\n }\n };\n const autoSaveInterval = setInterval(saveGameData, 30000);\n const handleBeforeUnload = () => {\n saveGameData();\n };\n window.addEventListener('beforeunload', handleBeforeUnload);\n return () => {\n if (launchInterval.current) {\n clearInterval(launchInterval.current);\n }\n clearInterval(autoSaveInterval);\n window.removeEventListener('beforeunload', handleBeforeUnload);\n };\n }, [userId, userSatelliteCount, isLaunching, isAuthenticated]);\n const handlePlayerShoot = () => {\n if (!gameStarted || gameOver) return;\n setProjectiles(prev => [...prev, {\n id: Date.now(),\n x: 15,\n y: playerPosition,\n direction: 1\n }]);\n if (soundEnabled && audioRef.current) {\n try {\n audioRef.current.currentTime = 0;\n audioRef.current.play().catch(e => {\n console.error(\"Audio play error:\", e);\n });\n } catch (error) {\n console.error(\"Error playing sound:\", error);\n }\n }\n };\n const handleGameOver = winningPlayer => {\n setGameOver(true);\n setWinner(winningPlayer);\n if (gameInterval) {\n clearInterval(gameInterval);\n }\n if (winningPlayer === 'player') {\n setTokenBalance(prev => prev + betAmount);\n recordGameTransaction(betAmount, 'Orbital Duel victory');\n setNotification({\n message: `Victory! You won ${betAmount} SPARK!`,\n type: \"success\"\n });\n } else {\n setNotification({\n message: `Defeat! You lost ${betAmount} SPARK.`,\n type: \"error\"\n });\n }\n };\n const recordGameTransaction = async (amount, description) => {\n try {\n const txId = `tx_${Date.now()}`;\n await client.createEntity('transactions', {\n id: txId,\n userId,\n type: amount > 0 ? 'reward' : 'game',\n amount: amount,\n description: description,\n timestamp: new Date().toISOString()\n });\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n tokenBalance: tokenBalance\n });\n }\n loadTokenTransactions();\n } catch (error) {\n console.error(\"Error recording game transaction:\", error);\n }\n };\n const startMining = async () => {\n setIsMining(true);\n const now = new Date().toISOString();\n setLastMiningConfirmation(now);\n setMiningTimeRemaining(24 * 60 * 60);\n setMiningReward(0);\n setShowMiningCounter(true);\n startMiningInterval();\n try {\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n miningState: {\n isMining: true,\n lastMiningConfirmation: now,\n miningReward: 0,\n lastMiningPrompt: now\n }\n });\n }\n } catch (error) {\n console.error(\"Error saving mining state:\", error);\n }\n setShowMiningModal(false);\n setNotification({\n message: \"Mining started! You'll earn 1 SPARK per hour.\",\n type: \"success\"\n });\n setTimeout(() => {\n if (!document.hidden) {\n setShowMiningCounter(false);\n }\n }, 10000);\n };\n const continueMining = async () => {\n const now = new Date().toISOString();\n setLastMiningConfirmation(now);\n setMiningTimeRemaining(24 * 60 * 60);\n setMiningReward(0);\n startMiningInterval();\n try {\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n miningState: {\n isMining: true,\n lastMiningConfirmation: now,\n miningReward: 0,\n lastMiningPrompt: now\n }\n });\n }\n } catch (error) {\n console.error(\"Error saving mining state:\", error);\n }\n setShowMiningModal(false);\n setNotification({\n message: \"Mining continued for another 24 hours!\",\n type: \"success\"\n });\n };\n const stopMining = async () => {\n setIsMining(false);\n if (miningInterval.current) {\n clearInterval(miningInterval.current);\n miningInterval.current = null;\n }\n try {\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n miningState: {\n isMining: false,\n lastMiningConfirmation: null,\n miningReward: 0\n }\n });\n }\n } catch (error) {\n console.error(\"Error saving mining state:\", error);\n }\n setShowMiningModal(false);\n setNotification({\n message: \"Mining stopped.\",\n type: \"info\"\n });\n };\n const startMiningInterval = () => {\n if (miningInterval.current) {\n clearInterval(miningInterval.current);\n }\n miningInterval.current = setInterval(async () => {\n setMiningTimeRemaining(prev => {\n if (prev <= 0) {\n setShowMiningModal(true);\n if (miningInterval.current) {\n clearInterval(miningInterval.current);\n miningInterval.current = null;\n }\n return 0;\n }\n if (prev % 3600 === 0 && prev > 0) {\n const newReward = 1;\n setMiningReward(prevReward => {\n const updatedReward = prevReward + newReward;\n try {\n (async () => {\n const userData = client.getEntity('users', userId);\n if (userData) {\n client.updateEntity('users', userId, {\n ...userData,\n miningState: {\n isMining: true,\n lastMiningConfirmation: lastMiningConfirmation,\n miningReward: updatedReward\n }\n });\n }\n })();\n } catch (error) {\n console.error(\"Error saving mining reward:\", error);\n }\n return updatedReward;\n });\n setShowMiningCounter(true);\n setTimeout(() => {\n if (!document.hidden) {\n setShowMiningCounter(false);\n }\n }, 10000);\n setTokenBalance(prevBalance => {\n const newBalance = prevBalance + newReward;\n try {\n (async () => {\n const txId = `tx_mining_${Date.now()}`;\n await client.createEntity('transactions', {\n id: txId,\n userId,\n type: 'mining',\n amount: newReward,\n description: 'Mining reward (1 SPARK/hour)',\n timestamp: new Date().toISOString()\n });\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n tokenBalance: newBalance\n });\n }\n loadTokenTransactions();\n })();\n } catch (error) {\n console.error(\"Error recording mining transaction:\", error);\n }\n return newBalance;\n });\n setNotification({\n message: `Mining reward: +1 SPARK`,\n type: \"success\"\n });\n }\n return prev - 1;\n });\n }, 1000);\n };\n const formatTime = seconds => {\n const hours = Math.floor(seconds / 3600);\n const minutes = Math.floor(seconds % 3600 / 60);\n const secs = seconds % 60;\n return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n };\n const startOrbitalDuel = () => {\n if (tokenBalance < betAmount) {\n setErrorMessage(`Not enough SPARK tokens. You need ${betAmount} SPARK to play.`);\n return;\n }\n setTokenBalance(prev => prev - betAmount);\n setHighStakesEffects(betAmount >= 10);\n setPlayerScore(0);\n setOpponentScore(0);\n setPlayerPosition(50);\n setOpponentPosition(50);\n setProjectiles([]);\n setOpponentProjectiles([]);\n setGameOver(false);\n setWinner(null);\n setShowBettingUI(false);\n setWaitingForOpponent(true);\n setTimeout(() => {\n setWaitingForOpponent(false);\n setOpponentFound(true);\n setOpponentName(`Cosmic-${Math.floor(Math.random() * 1000)}`);\n setGameId(`game_${Date.now()}`);\n setTimeout(() => {\n setGameStarted(true);\n }, 1500);\n }, 2000);\n };\n const resetOrbitalDuel = () => {\n setGameStarted(false);\n setGameOver(false);\n setPlayerScore(0);\n setOpponentScore(0);\n setProjectiles([]);\n setOpponentProjectiles([]);\n setWinner(null);\n setShowBettingUI(true);\n setOpponentFound(false);\n setWaitingForOpponent(false);\n };\n const buyPremiumFeature = async (feature, cost) => {\n try {\n if (tokenBalance < cost) {\n setErrorMessage(`Not enough SparkCoins. You need ${cost} SPARK.`);\n return;\n }\n const newBalance = tokenBalance - cost;\n setTokenBalance(newBalance);\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n tokenBalance: newBalance,\n premiumFeatures: {\n ...(userData.premiumFeatures || {}),\n [feature]: true\n }\n });\n const txId = `tx_${Date.now()}`;\n await client.createEntity('transactions', {\n id: txId,\n userId,\n type: 'purchase',\n amount: -cost,\n description: `Purchased ${feature}`,\n timestamp: new Date().toISOString()\n });\n loadTokenTransactions();\n }\n if (feature === 'speedBoost') {\n setLaunchSpeed(prev => prev * 1.5);\n setNotification({\n message: \"Speed Boost activated! Satellite now launches 50% faster!\",\n type: \"success\"\n });\n } else if (feature === 'premiumSkin') {\n const goldColor = '#FFD700';\n setCustomColor(goldColor);\n await saveUserPreferences({\n customColor: goldColor\n });\n const updatedSatellites = satellites.map(satellite => {\n if (satellite.userId === userId) {\n return {\n ...satellite,\n color: goldColor\n };\n }\n return satellite;\n });\n setSatellites(updatedSatellites);\n try {\n const userSatellites = await client.getEntities('satellites', {\n userId\n });\n if (userSatellites && userSatellites.length > 0) {\n const satellite = userSatellites[0];\n await client.updateEntity('satellites', satellite.id, {\n ...satellite,\n color: goldColor\n });\n setUserSatelliteObjects(prev => prev.map(sat => {\n if (sat.userId === userId) {\n return {\n ...sat,\n color: goldColor\n };\n }\n return sat;\n }));\n }\n } catch (dbError) {\n console.error(\"Error updating satellite in database:\", dbError);\n }\n setNotification({\n message: \"Premium Gold Skin activated and applied to your satellite!\",\n type: \"success\"\n });\n } else if (feature === 'extraConnections') {\n setNotification({\n message: \"Extra network connections activated! Your satellite now connects to more users.\",\n type: \"success\"\n });\n }\n setShowTokenModal(false);\n } catch (error) {\n console.error(\"Error buying premium feature:\", error);\n setErrorMessage(\"Failed to purchase feature. Please try again.\");\n }\n };\n const stakeSatellite = async satellite => {\n try {\n if (!satellite) {\n setErrorMessage(\"No satellite selected for staking.\");\n return;\n }\n const stakedId = `staked_${satellite.id}`;\n const stakedSatellite = {\n id: stakedId,\n satelliteId: satellite.id,\n userId,\n stakedAt: new Date().toISOString(),\n rewards: 0\n };\n await client.createEntity('staked_satellites', stakedSatellite);\n const txId = `tx_${Date.now()}`;\n await client.createEntity('transactions', {\n id: txId,\n userId,\n type: 'stake',\n amount: 0,\n description: `Staked satellite #${satellite.id.substring(satellite.id.lastIndexOf('_') + 1)}`,\n timestamp: new Date().toISOString()\n });\n setStakedSatellites(prev => [...prev, stakedSatellite]);\n loadTokenTransactions();\n setNotification({\n message: \"Satellite staked successfully! You'll now earn SPARK rewards.\",\n type: \"success\"\n });\n } catch (error) {\n console.error(\"Error staking satellite:\", error);\n setErrorMessage(\"Failed to stake satellite. Please try again.\");\n }\n };\n const unstakeSatellite = async stakedSatellite => {\n try {\n if (!stakedSatellite) {\n setErrorMessage(\"No satellite selected for unstaking.\");\n return;\n }\n await client.deleteEntity('staked_satellites', stakedSatellite.id);\n const txId = `tx_${Date.now()}`;\n await client.createEntity('transactions', {\n id: txId,\n userId,\n type: 'unstake',\n amount: 0,\n description: `Unstaked satellite #${stakedSatellite.satelliteId.substring(stakedSatellite.satelliteId.lastIndexOf('_') + 1)}`,\n timestamp: new Date().toISOString()\n });\n setStakedSatellites(prev => prev.filter(s => s.id !== stakedSatellite.id));\n loadTokenTransactions();\n setNotification({\n message: \"Satellite unstaked successfully.\",\n type: \"success\"\n });\n } catch (error) {\n console.error(\"Error unstaking satellite:\", error);\n setErrorMessage(\"Failed to unstake satellite. Please try again.\");\n }\n };\n const claimStakingRewards = async () => {\n try {\n if (stakingRewards <= 0) {\n setErrorMessage(\"No rewards available to claim.\");\n return;\n }\n const newBalance = tokenBalance + stakingRewards;\n setTokenBalance(newBalance);\n const userData = await client.getEntity('users', userId);\n if (userData) {\n await client.updateEntity('users', userId, {\n ...userData,\n tokenBalance: newBalance,\n lastRewardClaim: new Date().toISOString()\n });\n const txId = `tx_${Date.now()}`;\n await client.createEntity('transactions', {\n id: txId,\n userId,\n type: 'reward',\n amount: stakingRewards,\n description: `Claimed staking rewards`,\n timestamp: new Date().toISOString()\n });\n setLastRewardClaim(new Date().toISOString());\n setStakingRewards(0);\n loadTokenTransactions();\n setNotification({\n message: `Claimed ${stakingRewards.toFixed(2)} SPARK tokens from staking!`,\n type: \"success\"\n });\n }\n } catch (error) {\n console.error(\"Error claiming staking rewards:\", error);\n setErrorMessage(\"Failed to claim rewards. Please try again.\");\n }\n };\n useEffect(() => {\n if (!isAuthenticated) {\n const hasPersistedLocation = localStorage.getItem('sparkchain_location_set') === 'true';\n if (hasPersistedLocation) {\n setLocationSetThisSession(true);\n }\n const localUserId = localStorage.getItem('sparkchain_user_id');\n const localEmail = localStorage.getItem('sparkchain_user_email');\n const localUsername = localStorage.getItem('sparkchain_username');\n if (localUserId && localEmail) {\n console.log(\"Fast login: Using cached credentials\");\n setIsAuthenticated(true);\n setUserId(localUserId);\n setUserEmail(localEmail);\n setUsername(localUsername || 'User');\n setTimeout(() => {\n client.getEntity('users', localUserId).then(userData => {\n if (userData && userData.email === localEmail) {\n console.log(\"Background validation successful\");\n if (userData.tokenLaunched) {\n setTokenLaunched(true);\n setTokenBalance(userData.tokenBalance || 0);\n calculateTokenValue(userData.satelliteCount || 0, userData.inviteCount || 0);\n }\n }\n }).catch(error => {\n console.log(\"Background validation error, falling back to session recovery\");\n recoverFromSession();\n });\n }, 100);\n } else {\n recoverFromSession();\n }\n }\n async function recoverFromSession() {\n const sessionUserId = sessionStorage.getItem('sparkchain_user_id');\n const sessionEmail = sessionStorage.getItem('sparkchain_user_email');\n const sessionUsername = sessionStorage.getItem('sparkchain_username');\n if (sessionUserId && sessionEmail) {\n console.log(\"Recovering session from sessionStorage\");\n localStorage.setItem('sparkchain_user_id', sessionUserId);\n localStorage.setItem('sparkchain_user_email', sessionEmail);\n if (sessionUsername) {\n localStorage.setItem('sparkchain_username', sessionUsername);\n }\n setIsAuthenticated(true);\n setUserId(sessionUserId);\n setUserEmail(sessionEmail);\n setUsername(sessionUsername || 'User');\n setTimeout(async () => {\n try {\n const userData = await client.getEntity('users', sessionUserId);\n if (userData && userData.email === sessionEmail) {\n console.log(\"Session recovery successful\");\n if (userData.tokenLaunched) {\n setTokenLaunched(true);\n setTokenBalance(userData.tokenBalance || 0);\n calculateTokenValue(userData.satelliteCount || 0, userData.inviteCount || 0);\n }\n } else {\n console.log(\"Session data found but user not in database, trying to find by email\");\n try {\n const filteredUsers = await client.getEntities('users', {\n email: sessionEmail\n });\n let userByEmail = null;\n if (filteredUsers && filteredUsers.length > 0) {\n userByEmail = filteredUsers[0];\n console.log(\"Found user by email during session recovery:\", userByEmail.id);\n localStorage.setItem('sparkchain_user_id', userByEmail.id);\n sessionStorage.setItem('sparkchain_user_id', userByEmail.id);\n setIsAuthenticated(true);\n setUserId(userByEmail.id);\n setUserEmail(sessionEmail);\n setUsername(sessionUsername || userByEmail.username || 'User');\n if (userByEmail.tokenLaunched) {\n setTokenLaunched(true);\n setTokenBalance(userByEmail.tokenBalance || 0);\n calculateTokenValue(userByEmail.satelliteCount || 0, userByEmail.inviteCount || 0);\n }\n } else {\n console.log(\"User not found by email during session recovery, creating new account\");\n const newUserId = 'user_' + Date.now().toString() + '_' + Math.random().toString(36).substring(2, 9);\n const username = sessionUsername || sessionEmail.split('@')[0];\n const newUser = {\n id: newUserId,\n email: sessionEmail,\n username: username,\n password: '',\n satelliteCount: 0,\n inviteCount: 0,\n preferences: {\n soundEnabled: false,\n elonMode: false,\n rememberDevice: true\n },\n gameState: {\n isLaunching: false\n },\n createdAt: new Date().toISOString(),\n lastLogin: new Date().toISOString()\n };\n await client.createEntity('users', newUser);\n console.log(\"Auto-created new user during session recovery:\", newUserId);\n localStorage.setItem('sparkchain_user_id', newUserId);\n sessionStorage.setItem('sparkchain_user_id', newUserId);\n setIsAuthenticated(true);\n setUserId(newUserId);\n setUserEmail(sessionEmail);\n setUsername(username);\n setNotification({\n message: `Welcome to SparkChain, ${username}! Account restored automatically.`,\n type: \"success\"\n });\n }\n } catch (emailError) {\n console.error(\"Error finding user by email during session recovery:\", emailError);\n sessionStorage.removeItem('sparkchain_user_id');\n sessionStorage.removeItem('sparkchain_user_email');\n sessionStorage.removeItem('sparkchain_username');\n localStorage.removeItem('sparkchain_user_id');\n localStorage.removeItem('sparkchain_user_email');\n localStorage.removeItem('sparkchain_username');\n }\n }\n } catch (error) {\n console.error(\"Error during session recovery:\", error);\n sessionStorage.removeItem('sparkchain_user_id');\n sessionStorage.removeItem('sparkchain_user_email');\n sessionStorage.removeItem('sparkchain_username');\n localStorage.removeItem('sparkchain_user_id');\n localStorage.removeItem('sparkchain_user_email');\n localStorage.removeItem('sparkchain_username');\n }\n }, 100);\n }\n }\n }, [isAuthenticated, calculateTokenValue]);\n const [appLoading, setAppLoading] = useState(true);\n const [showLaserButton, setShowLaserButton] = useState(false);\n const [showMiningModal, setShowMiningModal] = useState(false);\n useEffect(() => {\n const timer = setTimeout(() => {\n if (isMounted.current) {\n setAppLoading(false);\n setIsInitializing(false);\n const hasSetLocation = localStorage.getItem('sparkchain_location_set') === 'true';\n const isFirstLogin = !localStorage.getItem('sparkchain_has_logged_in');\n if (!userLocation && !locationSetThisSession && !hasSetLocation && isFirstLogin) {\n setShowLocationSelector(true);\n localStorage.setItem('sparkchain_has_logged_in', 'true');\n }\n setTimeout(() => {\n setShowLaserButton(true);\n }, 500);\n }\n }, 1500);\n return () => {\n clearTimeout(timer);\n };\n }, [locationSetThisSession, userLocation]);\n useEffect(() => {\n const handleGlobalError = event => {\n console.error(\"Global error caught:\", event.error);\n if (isMounted.current) {\n setErrorMessage(\"An unexpected error occurred. Please try refreshing the page.\");\n setTimeout(() => {\n if (isMounted.current) {\n setErrorMessage(\"\");\n }\n }, 5000);\n }\n event.preventDefault();\n };\n window.addEventListener('error', handleGlobalError);\n return () => window.removeEventListener('error', handleGlobalError);\n }, []);\n if (appLoading) {\n return

\n $\"SparkChain$ \n

\n SparkChain\n

\n Connecting to satellite network...\n

;\n }\n const LaserEyesButton = () => {\n return

\n \n

\n \n LASER EYES MODULE\n

\n {}\n

\n Customize your satellite commander with laser eyes technology\n

\n \n \n

\n \n Devscreener\n

\n {}\n

\n Screen cosmic projects across the satellite network\n

\n \n

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

\n {}\n \n {}\n \n {}\n

\n {}\n {userSatelliteCount > 0 &&

\n Press P to toggle Pilot Mode. Use W/A/S/D or Arrow Keys to move like a drone. SPACE to fly up, SHIFT to fly down. ESC to exit Pilot Mode. Press V to toggle cockpit view.\n

}\n {}\n \n \n

3D Scene Loading...

If this persists, try changing your zoom level

}>\n

\n \n \n \n {}\n

\n {}\n {showProfileModal && selectedProfile &&

\n \n {selectedProfile.userId === userId ? \"Your Base Profile\" : `${selectedProfile.displayName}'s Base`}\n

\n \n

\n {editingProfile ?

\n Display Name\n setProfileFormData({\n ...profileFormData,\n displayName: e.target.value\n })} className=\"w-full bg-gray-700 text-white px-3 py-2 rounded-md\" />\n

\n Favorite Satellite Color\n setProfileFormData({\n ...profileFormData,\n favoriteSatelliteColor: e.target.value\n })} className=\"w-full h-9 bg-gray-700 text-white px-1 py-1 rounded-md\" />\n

\n Bio\n

setProfileFormData({\n                  ...profileFormData,\n                  bio: e.target.value\n                })} className=\"w-full bg-gray-700 text-white px-3 py-2 rounded-md h-24 resize-none\" />\n                    </div>\n                    <div>\n                      <label className=\"block text-blue-300 mb-1 text-sm\">Experience Level</label>\n                      <select value={profileFormData.experience} onChange={e => setProfileFormData({\n                  ...profileFormData,\n                  experience: e.target.value\n                })} className=\"w-full bg-gray-700 text-white px-3 py-2 rounded-md\">\n                        <option value=\"Beginner\">Beginner</option>\n                        <option value=\"Intermediate\">Intermediate</option>\n                        <option value=\"Experienced\">Experienced</option>\n                        <option value=\"Expert\">Expert</option>\n                        <option value=\"Master\">Master</option>\n                      </select>\n                    </div>\n                    <div>\n                      <label className=\"block text-blue-300 mb-1 text-sm\">Status</label>\n                      <select value={profileFormData.status} onChange={e => setProfileFormData({\n                  ...profileFormData,\n                  status: e.target.value\n                })} className=\"w-full bg-gray-700 text-white px-3 py-2 rounded-md\">\n                        <option value=\"Online\">Online</option>\n                        <option value=\"Away\">Away</option>\n                        <option value=\"Busy\">Busy</option>\n                        <option value=\"Offline\">Offline</option>\n                      </select>\n                    </div>\n                  </div>\n                  <div className=\"flex justify-end space-x-3\">\n                    <button onClick={() => setEditingProfile(false)} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                      Cancel\n                    </button>\n                    <button onClick={() => {\n                const updatedProfile = {\n                  ...selectedProfile,\n                  displayName: profileFormData.displayName,\n                  bio: profileFormData.bio,\n                  favoriteSatelliteColor: profileFormData.favoriteSatelliteColor,\n                  experience: profileFormData.experience,\n                  status: profileFormData.status,\n                  lastActive: new Date().toISOString()\n                };\n                updateUserProfile(updatedProfile);\n              }} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md\">\n                      Save Profile\n                    </button>\n                  </div>\n                </div> : <div className=\"flex-1 overflow-y-auto\">\n                  <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n                    {}\n                    <div className=\"bg-gray-800/70 rounded-lg p-4\">\n                      <div className=\"flex flex-col items-center mb-3\">\n                        <div className=\"w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mb-2 relative\">\n                          <User size={40} className=\"text-white\" />\n                          <div className=\"absolute bottom-0 right-0 w-5 h-5 rounded-full bg-green-500 border-2 border-gray-800\"></div>\n                        </div>\n                        <div className=\"text-white font-bold text-lg\">{selectedProfile.displayName}</div>\n                        <div className=\"text-blue-300 text-sm\">{selectedProfile.username}</div>\n                        <div className={`text-xs px-2 py-1 rounded-full mt-2 ${selectedProfile.status === 'Online' ? 'bg-green-700 text-green-100' : selectedProfile.status === 'Away' ? 'bg-yellow-700 text-yellow-100' : selectedProfile.status === 'Busy' ? 'bg-red-700 text-red-100' : 'bg-gray-700 text-gray-100'}`}>\n                          {selectedProfile.status}\n                        </div>\n                      </div>\n                      <div className=\"space-y-2 text-sm\">\n                        <div className=\"flex items-center\">\n                          <MapPin size={14} className=\"text-blue-400 mr-2\" />\n                          <span className=\"text-white\">{selectedProfile.location?.region || getRegionFromCoordinates(selectedProfile.location?.lat || (selectedProfile.location?.y + 1) / 2 * 180 - 90, selectedProfile.location?.lng || (selectedProfile.location?.x + 1) / 2 * 360 - 180)}</span>\n                        </div>\n                        <div className=\"flex items-center\">\n                          <Calendar size={14} className=\"text-blue-400 mr-2\" />\n                          <span className=\"text-white\">Joined {new Date(selectedProfile.joinDate).toLocaleDateString()}</span>\n                        </div>\n                        <div className=\"flex items-center\">\n                          <Flag size={14} className=\"text-blue-400 mr-2\" />\n                          <span className=\"text-white\">Base established {new Date(selectedProfile.baseEstablished).toLocaleDateString()}</span>\n                        </div>\n                        <div className=\"flex items-center\">\n                          <Activity size={14} className=\"text-blue-400 mr-2\" />\n                          <span className=\"text-white\">Last active {new Date(selectedProfile.lastActive).toLocaleTimeString()}</span>\n                        </div>\n                      </div>\n                    </div>\n                    {}\n                    <div className=\"bg-gray-800/70 rounded-lg p-4 md:col-span-2\">\n                      <h3 className=\"text-white font-bold mb-2 flex items-center\">\n                        <Info size={16} className=\"text-blue-400 mr-2\" />\n                        Bio\n                      </h3>\n                      <p className=\"text-blue-200 text-sm mb-4\">{selectedProfile.bio}</p>\n                      <h3 className=\"text-white font-bold mb-2 flex items-center\">\n                        <Award size={16} className=\"text-yellow-400 mr-2\" />\n                        Experience\n                      </h3>\n                      <div className=\"flex space-x-2 mb-4\">\n                        <div className={`text-xs px-3 py-1 rounded-full ${selectedProfile.experience === 'Beginner' ? 'bg-green-800 text-green-100' : 'bg-gray-700 text-gray-300'}`}>\n                          Beginner\n                        </div>\n                        <div className={`text-xs px-3 py-1 rounded-full ${selectedProfile.experience === 'Intermediate' ? 'bg-blue-800 text-blue-100' : 'bg-gray-700 text-gray-300'}`}>\n                          Intermediate\n                        </div>\n                        <div className={`text-xs px-3 py-1 rounded-full ${selectedProfile.experience === 'Experienced' ? 'bg-purple-800 text-purple-100' : 'bg-gray-700 text-gray-300'}`}>\n                          Experienced\n                        </div>\n                        <div className={`text-xs px-3 py-1 rounded-full ${selectedProfile.experience === 'Expert' ? 'bg-yellow-800 text-yellow-100' : 'bg-gray-700 text-gray-300'}`}>\n                          Expert\n                        </div>\n                        <div className={`text-xs px-3 py-1 rounded-full ${selectedProfile.experience === 'Master' ? 'bg-red-800 text-red-100' : 'bg-gray-700 text-gray-300'}`}>\n                          Master\n                        </div>\n                      </div>\n                      <h3 className=\"text-white font-bold mb-2 flex items-center\">\n                        <Hash size={16} className=\"text-blue-400 mr-2\" />\n                        Stats\n                      </h3>\n                      <div className=\"grid grid-cols-2 gap-2 mb-4\">\n                        <div className=\"bg-gray-700/50 p-2 rounded-lg\">\n                          <div className=\"text-xs text-gray-400\">Satellites</div>\n                          <div className=\"text-lg text-white font-bold\">{selectedProfile.satelliteCount || userSatelliteCount}</div>\n                        </div>\n                        <div className=\"bg-gray-700/50 p-2 rounded-lg\">\n                          <div className=\"text-xs text-gray-400\">Mining Power</div>\n                          <div className=\"text-lg text-yellow-400 font-bold\">{selectedProfile.miningPower || locationMiningValue.toFixed(1)}x</div>\n                        </div>\n                      </div>\n                      <h3 className=\"text-white font-bold mb-2 flex items-center\">\n                        <Settings size={16} className=\"text-blue-400 mr-2\" />\n                        Preferences\n                      </h3>\n                      <div className=\"flex space-x-2 mb-2\">\n                        <div className=\"flex items-center bg-gray-700/50 px-3 py-1 rounded-lg\">\n                          <div className=\"w-4 h-4 mr-2 rounded-full\" style={{\n                      backgroundColor: selectedProfile.favoriteSatelliteColor || '#4fc3f7'\n                    }}></div>\n                          <span className=\"text-white text-sm\">Favorite Color</span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  {}\n                  <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n                    <div className=\"bg-gray-800/70 rounded-lg p-4\">\n                      <h3 className=\"text-white font-bold mb-2 flex items-center\">\n                        <Award size={16} className=\"text-yellow-400 mr-2\" />\n                        Achievements\n                      </h3>\n                      {selectedProfile.achievements && selectedProfile.achievements.length > 0 ? <div className=\"space-y-2\">\n                          {selectedProfile.achievements.map((achievement, index) => <div key={index} className=\"bg-gray-700/50 p-2 rounded-lg flex items-center\">\n                              <div className=\"w-8 h-8 rounded-full bg-yellow-600 flex items-center justify-center mr-2\">\n                                <Star size={16} className=\"text-white\" />\n                              </div>\n                              <div>\n                                <div className=\"text-white text-sm\">{achievement.name}</div>\n                                <div className=\"text-gray-400 text-xs\">{achievement.description}</div>\n                              </div>\n                            </div>)}\n                        </div> : <div className=\"text-gray-400 text-sm py-4 text-center\">\n                          No achievements yet\n                        </div>}\n                    </div>\n                    <div className=\"bg-gray-800/70 rounded-lg p-4\">\n                      <h3 className=\"text-white font-bold mb-2 flex items-center\">\n                        <Activity size={16} className=\"text-blue-400 mr-2\" />\n                        Recent Activity\n                      </h3>\n                      <div className=\"space-y-2\">\n                        <div className=\"bg-gray-700/50 p-2 rounded-lg flex items-center\">\n                          <div className=\"w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center mr-2\">\n                            <Rocket size={16} className=\"text-white\" />\n                          </div>\n                          <div>\n                            <div className=\"text-white text-sm\">Launched a satellite</div>\n                            <div className=\"text-gray-400 text-xs\">\n                              {new Date(selectedProfile.baseEstablished).toLocaleDateString()}\n                            </div>\n                          </div>\n                        </div>\n                        <div className=\"bg-gray-700/50 p-2 rounded-lg flex items-center\">\n                          <div className=\"w-8 h-8 rounded-full bg-green-600 flex items-center justify-center mr-2\">\n                            <MapPin size={16} className=\"text-white\" />\n                          </div>\n                          <div>\n                            <div className=\"text-white text-sm\">Established base</div>\n                            <div className=\"text-gray-400 text-xs\">\n                              {new Date(selectedProfile.baseEstablished).toLocaleDateString()}\n                            </div>\n                          </div>\n                        </div>\n                        <div className=\"bg-gray-700/50 p-2 rounded-lg flex items-center\">\n                          <div className=\"w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-2\">\n                            <Radio size={16} className=\"text-white\" />\n                          </div>\n                          <div>\n                            <div className=\"text-white text-sm\">Joined network</div>\n                            <div className=\"text-gray-400 text-xs\">\n                              {new Date(selectedProfile.joinDate).toLocaleDateString()}\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  {}\n                  {selectedProfile.userId === userId && <div className=\"flex justify-end\">\n                      <button onClick={() => {\n                setProfileFormData({\n                  displayName: selectedProfile.displayName,\n                  bio: selectedProfile.bio,\n                  favoriteSatelliteColor: selectedProfile.favoriteSatelliteColor,\n                  experience: selectedProfile.experience,\n                  status: selectedProfile.status\n                });\n                setEditingProfile(true);\n              }} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center\">\n                        <Settings size={16} className=\"mr-2\" />\n                        Edit Profile\n                      </button>\n                    </div>}\n                </div>}\n            </div>\n          </div>}\n        {}\n        <div className=\"absolute bottom-4 left-4 w-80 pointer-events-auto z-5\">\n          <div className=\"bg-gray-900/80 backdrop-blur-sm rounded-lg overflow-hidden\">\n            {}\n            <div className=\"p-2 bg-gray-800/90\">\n              <div className=\"flex items-center\">\n                <input type=\"text\" value={globalChatInput} onChange={e => setGlobalChatInput(e.target.value)} placeholder=\"Type a message...\" className=\"flex-1 bg-gray-700 text-white px-3 py-1 rounded-l-md focus:outline-none text-sm\" onKeyPress={e => {\n                if (e.key === 'Enter') {\n                  sendGlobalChatMessage();\n                }\n              }} />\n                <button onClick={sendGlobalChatMessage} className=\"bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-r-md\">\n                  <Send size={16} />\n                </button>\n              </div>\n              <div className=\"flex justify-between items-center mt-1\">\n                <div className=\"flex items-center text-xs text-gray-400\">\n                  <MessageSquare size={12} className=\"mr-1\" />\n                  <span>Global Chat</span>\n                </div>\n                <div className=\"text-xs text-gray-400\">\n                  {userCount} online\n                </div>\n              </div>\n            </div>\n          </div>\n          {}\n          <div className=\"absolute left-0 bottom-16 w-full pointer-events-none\" style={{\n          zIndex: 4\n        }}>\n            {globalChatMessages.map((msg, index) => {\n            const age = Date.now() - msg.createdAt;\n            const progress = Math.min(1, age / 60000);\n            const bottom = 0;\n            const opacity = 1 - progress;\n            return <div key={msg.id || index} className=\"w-full px-2 py-1 absolute\" style={{\n              bottom: `${bottom + 10}px`,\n              opacity: opacity,\n              transform: `translateY(${-progress * 400}px)`,\n              transition: 'transform 1000ms linear, opacity 1000ms linear'\n            }}>\n                  <div className={`${msg.userId === userId ? 'float-right bg-blue-900/90' : 'float-left bg-gray-800/90'} rounded-lg p-2 max-w-[95%] shadow-md`}>\n                    <div className=\"flex items-center mb-1\">\n                      <span className=\"text-xs font-bold text-white\">{msg.username}</span>\n                    </div>\n                    <p className=\"text-white text-sm break-words\">{msg.content}</p>\n                  </div>\n                </div>;\n          })}\n          </div>\n        </div>\n        {}\n        <div className=\"grid grid-cols-3 items-center p-4 pointer-events-auto\">\n          <div className=\"text-white flex items-center\">\n            <div className=\"w-12 h-12 mr-3 rounded-full overflow-hidden\">\n              <img src=\"https://cdn.dev.fun/asset/b8bb24936a2eb4fe9ec9/sparkchain%20gif%20meme_ebfb6e6c.gif\" alt=\"SparkChain Logo\" className=\"w-full h-full object-cover\" />\n            </div>\n            <div>\n              <h1 className=\"text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent\">\n                SparkChain\n              </h1>\n              <div className=\"flex items-center\">\n                <p className=\"text-xs text-blue-300 mr-2\">\n                  {elonMode ? \"Build with Elon!\" : \"Launch your satellite!\"}\n                </p>\n                <div className=\"px-2 py-0.5 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 text-white text-xs font-bold\">\n                  Phase {currentPhase}\n                </div>\n              </div>\n            </div>\n          </div>\n          {}\n          <div className=\"flex items-center justify-center\">\n            <div className=\"bg-gray-800/50 rounded-full px-3 py-1 flex items-center\">\n              <span className=\"text-white text-sm mr-2 font-mono\">G3vhNt2y8njvpnC7P8rECo7zZRjxrDY4ed4HRm9Kpump</span>\n              <button onClick={() => {\n              navigator.clipboard.writeText(\"G3vhNt2y8njvpnC7P8rECo7zZRjxrDY4ed4HRm9Kpump\").catch(() => {});\n              setNotification({\n                message: \"Contract address copied to clipboard!\",\n                type: \"success\"\n              });\n            }} className=\"p-1 bg-gray-700 hover:bg-gray-600 rounded-full text-white\">\n                <Copy size={14} />\n              </button>\n            </div>\n          </div>\n          <div className=\"flex items-center space-x-2 justify-end\">\n            {}\n            <div className=\"bg-gray-800/50 rounded-full px-3 py-1 flex items-center mr-2\">\n              <User size={16} className=\"text-blue-400 mr-1\" />\n              <span className=\"text-white text-sm\">{username || 'User'}</span>\n            </div>\n            {}\n            <div className=\"flex bg-gray-800/50 rounded-full overflow-hidden mr-2\">\n              <button onClick={() => setZoomLevel('far')} className={`px-2 py-1 text-xs ${zoomLevel === 'far' ? 'bg-blue-600 text-white' : 'text-gray-300'}`}>\n                Far\n              </button>\n              <button onClick={() => setZoomLevel('medium')} className={`px-2 py-1 text-xs ${zoomLevel === 'medium' ? 'bg-blue-600 text-white' : 'text-gray-300'}`}>\n                Medium\n              </button>\n              <button onClick={() => setZoomLevel('close')} className={`px-2 py-1 text-xs ${zoomLevel === 'close' ? 'bg-blue-600 text-white' : 'text-gray-300'}`}>\n                Close\n              </button>\n            </div>\n            <button onClick={() => {\n            const newSoundState = !soundEnabled;\n            setSoundEnabled(newSoundState);\n            localStorage.setItem('sparkchain_sound_enabled', newSoundState.toString());\n            saveUserPreferences({\n              soundEnabled: newSoundState\n            });\n          }} className=\"p-2 rounded-full bg-gray-800/50 text-white hover:bg-gray-700/50 transition-colors\">\n              {soundEnabled ? <Volume2 size={18} /> : <VolumeX size={18} />}\n            </button>\n            <div className=\"flex items-center bg-gray-800/50 rounded-full px-3 py-1\">\n              <Users size={16} className=\"text-blue-400 mr-1\" />\n              <span className=\"text-white text-sm\">{userCount}</span>\n            </div>\n            {}\n            <button onClick={handleLogout} className=\"p-2 rounded-full bg-gray-800/50 text-white hover:bg-gray-700/50 transition-colors\">\n              <LogOut size={18} />\n            </button>\n          </div>\n        </div>\n        {}\n        <div className=\"absolute top-20 left-4 bg-gray-900/70 backdrop-blur-sm rounded-lg p-4 text-white pointer-events-auto\">\n          <div className=\"mb-2\">\n            <span className=\"text-blue-300\">Your Satellite:</span>\n            <span className=\"text-xl font-bold ml-2\">{userSatelliteCount > 0 ? \"Active\" : \"Not Launched\"}</span>\n            {userSatelliteCount === 0 && <div className=\"text-xs text-yellow-300 mt-1\">\n                Launch your satellite to join the network!\n              </div>}\n          </div>\n          <div className=\"mb-2\">\n            <span className=\"text-blue-300\">Invites:</span>\n            <span className=\"text-xl font-bold ml-2\">{inviteCount}/5</span>\n            {inviteCount >= 5 && <span className=\"ml-2 text-xs bg-green-500 text-white px-2 py-0.5 rounded-full\">\n                2x SPEED!\n              </span>}\n          </div>\n          {}\n          <div className=\"mb-2 text-xs text-blue-200 italic\">\n            {connectionStatus}\n          </div>\n          {}\n          {tokenLaunched && <div className=\"mb-3 p-2 bg-yellow-900/30 rounded-md\">\n              <div className=\"flex justify-between items-center\">\n                <span className=\"text-yellow-300\">SPARK Balance:</span>\n                <span className=\"text-xl font-bold text-white\">{tokenBalance.toFixed(0)}</span>\n              </div>\n              <div className=\"flex justify-between items-center text-xs mt-1\">\n                <span className=\"text-yellow-200\">Value:</span>\n                <span className=\"text-white\">{tokenValue} SOL</span>\n              </div>\n              <div className=\"text-xs text-red-300 mt-1 italic\">\n                Test currency only - not real PumpFun token\n              </div>\n              {stakedSatellites.length > 0 && <div className=\"flex justify-between items-center text-xs mt-1\">\n                  <span className=\"text-green-300\">Staking:</span>\n                  <span className=\"text-white\">{stakedSatellites.length} satellite</span>\n                </div>}\n            </div>}\n          <div className=\"flex flex-col space-y-2\">\n            <div className=\"flex space-x-2\">\n              <button onClick={() => setShowInviteModal(true)} className=\"flex-1 bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded-md text-sm flex items-center justify-center transition-colors\">\n                <Users size={14} className=\"mr-1\" />\n                Invite Friends\n              </button>\n              <button onClick={() => setShowEnterInviteModal(true)} className=\"flex-1 bg-purple-600 hover:bg-purple-700 text-white py-1 px-3 rounded-md text-sm flex items-center justify-center transition-colors\">\n                <UserPlus size={14} className=\"mr-1\" />\n                Enter Code\n              </button>\n            </div>\n            {currentPhase >= 2 && <>\n                <button onClick={() => {\n              loadActiveUsers();\n              setShowTradeModal(true);\n            }} className=\"w-full bg-purple-600 hover:bg-purple-700 text-white py-1 px-3 rounded-md text-sm flex items-center justify-center transition-colors\">\n                  <ArrowLeftRight size={14} className=\"mr-1\" />\n                  Trade Satellite\n                </button>\n                <button onClick={() => setShowCustomizeModal(true)} className=\"w-full bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded-md text-sm flex items-center justify-center transition-colors\">\n                  <Palette size={14} className=\"mr-1\" />\n                  Customize Satellite\n                </button>\n                <button onClick={() => {\n              if (userLocation) {\n                handleLocationClick(userLocation, true);\n              } else {\n                setNotification({\n                  message: \"You need to set your location first!\",\n                  type: \"error\"\n                });\n                if (!isLaunching && !userSatelliteCount) {\n                  setShowLocationSelector(true);\n                }\n              }\n            }} className=\"w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded-md text-sm flex items-center justify-center transition-colors\">\n                  <Mail size={14} className=\"mr-1\" />\n                  Satellite Chat\n                </button>\n              </>}\n            <button onClick={() => setShowTokenDashboard(true)} className=\"w-full bg-yellow-600 hover:bg-yellow-700 text-white py-1 px-3 rounded-md text-sm flex items-center justify-center transition-colors\">\n              <Coins size={14} className=\"mr-1\" />\n              SparkCoin Dashboard\n            </button>\n            {tokenLaunched && <button onClick={() => setShowStakingPanel(true)} className=\"w-full bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded-md text-sm flex items-center justify-center transition-colors\">\n                <Shield size={14} className=\"mr-1\" />\n                Stake Satellite\n              </button>}\n          </div>\n        </div>\n        {}\n        <div className=\"absolute bottom-8 left-1/2 transform -translate-x-1/2 pointer-events-auto\">\n          <button onClick={toggleLaunching} disabled={userSatelliteCount >= 1} className={`flex items-center justify-center space-x-2 px-6 py-3 rounded-full text-white font-bold transition-all transform hover:scale-105 \n              ${userSatelliteCount >= 1 ? 'bg-gray-600 cursor-not-allowed' : isLaunching ? 'bg-red-600 hover:bg-red-700' : 'bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700'}`}>\n            <Rocket size={20} className={isLaunching ? 'animate-pulse' : ''} />\n            <span>{userSatelliteCount >= 1 ? 'SATELLITE DEPLOYED' : isLaunching ? 'STOP LAUNCHING' : 'LAUNCH SATELLITE'}</span>\n          </button>\n          <div className=\"text-center mt-2 text-blue-300 text-xs\">\n            {userSatelliteCount >= 1 ? 'You can only have one satellite in orbit' : isLaunching ? 'Preparing for launch...' : 'Tap to launch your satellite'}\n          </div>\n        </div>\n        {}\n        {notification && (notification.type === 'trade' ? <div className=\"absolute top-4 left-1/2 transform -translate-x-1/2 px-4 py-3 rounded-md text-white text-sm animate-fade-in bg-purple-600 max-w-md w-full\">\n              <div className=\"flex justify-between items-center\">\n                <div>{notification.message}</div>\n                <div className=\"flex space-x-2\">\n                  <button onClick={() => {\n              acceptTrade(notification.data);\n              setNotification(null);\n            }} className=\"px-2 py-1 bg-green-500 rounded-sm text-xs\">\n                    Accept\n                  </button>\n                  <button onClick={() => setNotification(null)} className=\"px-2 py-1 bg-red-500 rounded-sm text-xs\">\n                    Decline\n                  </button>\n                </div>\n              </div>\n            </div> : <div className={`absolute top-4 left-1/2 transform -translate-x-1/2 px-4 py-2 rounded-md text-white text-sm animate-fade-in ${notification.type === 'success' ? 'bg-green-600' : notification.type === 'error' ? 'bg-red-600' : notification.type === 'info' ? 'bg-blue-600' : 'bg-purple-600'}`}>\n              {notification.message}\n            </div>)}\n        {}\n        {errorMessage && <div className=\"absolute top-16 left-1/2 transform -translate-x-1/2 px-4 py-2 rounded-md bg-red-600 text-white text-sm flex items-center\">\n            <AlertTriangle size={16} className=\"mr-2\" />\n            {errorMessage}\n          </div>}\n        {}\n        {showLocationPrompt && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50 pointer-events-auto\">\n            <div className=\"bg-gray-900 rounded-lg p-6 max-w-md w-full mx-4\">\n              <h2 className=\"text-xl font-bold text-white mb-4\">Location Access</h2>\n              <p className=\"text-blue-300 mb-4\">\n                SparkChain wants to launch your satellite from your actual location! This creates a more personalized experience.\n              </p>\n              <div className=\"flex justify-between\">\n                <button onClick={() => {\n              setShowLocationPrompt(false);\n              setShowLocationSelector(true);\n            }} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                  Select on Map\n                </button>\n                <button onClick={requestLocation} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md\">\n                  Share My Location\n                </button>\n              </div>\n            </div>\n          </div>}\n        {}\n        {showLocationSelector && <div className=\"pointer-events-auto\">\n            <div className=\"fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-black/80 rounded-lg p-4 text-center max-w-md w-full mx-4\">\n              <h2 className=\"text-xl font-bold text-white mb-2\">Select Your Launch Base</h2>\n              <p className=\"text-blue-300 mb-3\">\n                Click anywhere on Earth to select your permanent satellite launch location\n              </p>\n              <div className=\"flex justify-between mt-4\">\n                <button onClick={() => {\n              setShowLocationSelector(false);\n              const randomX = (Math.random() * 2 - 1) * 0.5;\n              const randomY = (Math.random() * 2 - 1) * 0.5;\n              setUserLocation({\n                x: randomX,\n                y: randomY\n              });\n              localStorage.setItem('sparkchain_location_set', 'true');\n              setLocationSetThisSession(true);\n              setNotification({\n                message: \"Using a random location for your satellite launch!\",\n                type: \"info\"\n              });\n            }} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                  Random Location\n                </button>\n                <button onClick={() => {\n              if (selectedMapLocation) {\n                confirmSelectedLocation();\n              } else {\n                setNotification({\n                  message: \"Please click on Earth first to select a location!\",\n                  type: \"warning\"\n                });\n              }\n            }} disabled={!selectedMapLocation} className={`px-6 py-2 rounded-md text-white flex items-center ${selectedMapLocation ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-600 cursor-not-allowed'}`}>\n                  <span className=\"mr-1\">🚀</span> Set as Base\n                </button>\n              </div>\n            </div>\n            {selectedMapLocation && <div className=\"fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 bg-black/80 text-white px-4 py-2 rounded-lg text-center\">\n              <div className=\"font-bold\">\n                {getRegionFromCoordinates(selectedMapLocation.lat, selectedMapLocation.lng)}\n              </div>\n              <div className=\"text-xs text-blue-300 mt-1\">\n                Mining Value: {(() => {\n              const region = getRegionFromCoordinates(selectedMapLocation.lat, selectedMapLocation.lng);\n              if (region === \"Vatican City\" || region === \"Antarctica\") return \"4.0x\";\n              if (region === \"Tuvalu\") return \"3.5x\";\n              if ([\"Slovenia\", \"San Marino\", \"Monaco\", \"Seychelles\", \"Falkland Islands\"].includes(region)) return \"3.0x\";\n              if ([\"Fiji\", \"Singapore\", \"Greenland\", \"Solomon Islands\"].includes(region)) return \"2.5x\";\n              if ([\"New Zealand\", \"Hawaii\", \"Madagascar\", \"Africa\", \"South America\", \"Australia\"].includes(region)) return \"2.0x\";\n              if ([\"Asia\", \"Europe\", \"Iceland\", \"Japan\", \"Chile\"].includes(region)) return \"1.5x\";\n              return \"1.0x\";\n            })()}\n              </div>\n            </div>}\n          </div>}\n        {}\n        {showChatModal && selectedLocation && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50 pointer-events-auto\">\n            <div className=\"bg-gray-900 rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] flex flex-col\">\n              <div className=\"flex justify-between items-center mb-4\">\n                <h2 className=\"text-xl font-bold text-white flex items-center\">\n                  <Zap size={20} className=\"mr-2 text-yellow-400\" />\n                  {isUserOwnLocation ? \"Your Satellite Transmitter\" : \"Remote Transmitter\"}\n                </h2>\n                <button onClick={() => setShowChatModal(false)} className=\"text-gray-400 hover:text-white\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                  </svg>\n                </button>\n              </div>\n              <div className=\"bg-gray-800/50 rounded-lg p-3 mb-4\">\n                <div className=\"grid grid-cols-2 gap-2 text-sm\">\n                  <div>\n                    <span className=\"text-blue-300\">Region:</span>\n                    <span className=\"text-white ml-2\">\n                      {selectedLocation.region || getRegionFromCoordinates(selectedLocation.lat || (selectedLocation.y + 1) / 2 * 180 - 90, selectedLocation.lng || (selectedLocation.x + 1) / 2 * 360 - 180)}\n                    </span>\n                  </div>\n                  <div>\n                    <span className=\"text-blue-300\">Mining Value:</span>\n                    <span className=\"text-white ml-2\">{locationMiningValue.toFixed(1)}x</span>\n                  </div>\n                  <div>\n                    <span className=\"text-blue-300\">Messages:</span>\n                    <span className=\"text-white ml-2\">{chatMessages.length}</span>\n                  </div>\n                  <div>\n                    <span className=\"text-blue-300\">Mining Reward:</span>\n                    <span className=\"text-white ml-2\">{Math.floor(locationMiningValue * 5)} SPARK per reply</span>\n                  </div>\n                </div>\n              </div>\n              {}\n              <div className=\"flex-1 overflow-y-auto mb-4 bg-gray-800/30 rounded-lg p-4\">\n                {loadingMessages ? <div className=\"flex justify-center items-center h-full\">\n                    <div className=\"animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500\"></div>\n                  </div> : chatMessages.length > 0 ? <div className=\"space-y-4\">\n                    {chatMessages.map(message => <div key={message.id} className={`${message.userId === userId ? 'ml-auto' : ''} max-w-[80%]`}>\n                        <div className={`rounded-lg p-3 ${message.userId === userId ? 'bg-blue-600 text-white' : message.isMiningReply ? 'bg-yellow-700/70 text-white' : 'bg-gray-700 text-white'}`}>\n                          {message.replyTo && <div className=\"text-xs italic mb-1 pb-1 border-b border-gray-500\">\n                              Replying to {message.replyToUser}: {chatMessages.find(m => m.id === message.replyTo)?.content.substring(0, 30) + (chatMessages.find(m => m.id === message.replyTo)?.content.length > 30 ? '...' : '')}\n                            </div>}\n                          <div>{message.content}</div>\n                          {message.miningReward > 0 && <div className=\"mt-1 text-xs flex items-center text-yellow-300\">\n                              <Coins size={12} className=\"mr-1\" />\n                              Mining reward: {message.miningReward} SPARK\n                            </div>}\n                        </div>\n                        <div className=\"flex justify-between text-xs text-gray-400 mt-1\">\n                          <span>{message.username}</span>\n                          <span>{new Date(message.timestamp).toLocaleTimeString()}</span>\n                        </div>\n                        {message.userId !== userId && tokenLaunched && <button onClick={() => {\n                  setNewMessage(`@${message.username} `);\n                  document.getElementById('chat-input').focus();\n                }} className=\"text-xs text-blue-400 hover:text-blue-300 mt-1\">\n                            Reply with mining ({Math.floor(locationMiningValue * 5)} SPARK)\n                          </button>}\n                      </div>)}\n                    <div ref={chatEndRef} />\n                  </div> : <div className=\"text-center text-gray-400 py-8\">\n                    No messages yet. Be the first to transmit from this location!\n                  </div>}\n              </div>\n              {}\n              <div className=\"flex items-center\">\n                <input id=\"chat-input\" type=\"text\" value={newMessage} onChange={e => setNewMessage(e.target.value)} placeholder=\"Type your message...\" className=\"flex-1 bg-gray-800 text-white px-4 py-2 rounded-l-md focus:outline-none\" onKeyPress={e => {\n              if (e.key === 'Enter') {\n                if (newMessage.startsWith('@') && tokenLaunched) {\n                  const username = newMessage.split(' ')[0].substring(1);\n                  const originalMessage = chatMessages.find(m => m.username === username);\n                  if (originalMessage && originalMessage.userId !== userId) {\n                    replyWithMining(originalMessage);\n                  } else {\n                    sendChatMessage();\n                  }\n                } else {\n                  sendChatMessage();\n                }\n              }\n            }} />\n                <button onClick={() => {\n              if (newMessage.startsWith('@') && tokenLaunched) {\n                const username = newMessage.split(' ')[0].substring(1);\n                const originalMessage = chatMessages.find(m => m.username === username);\n                if (originalMessage && originalMessage.userId !== userId) {\n                  replyWithMining(originalMessage);\n                } else {\n                  sendChatMessage();\n                }\n              } else {\n                sendChatMessage();\n              }\n            }} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-md\">\n                  Send\n                </button>\n              </div>\n              {newMessage.startsWith('@') && tokenLaunched && <div className=\"mt-2 text-xs text-yellow-300\">\n                  Mining mode: You will send {Math.floor(locationMiningValue * 5)} SPARK to the user you're replying to.\n                </div>}\n            </div>\n          </div>}\n        {}\n      {showInviteModal && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50 pointer-events-auto\">\n          <div className=\"bg-gray-900 rounded-lg p-6 max-w-md w-full mx-4\">\n            <h2 className=\"text-xl font-bold text-white mb-4 flex items-center\">\n              <Users size={20} className=\"mr-2 text-blue-400\" />\n              Invite Friends\n            </h2>\n            <p className=\"text-blue-300 mb-4\">\n              Share this invite code with friends. For every 5 friends who join, you'll get 2x satellite launch speed!\n              {tokenLaunched && <span className=\"block mt-1 text-yellow-300\">Plus, earn 50 SPARK tokens for each friend who joins!</span>}\n            </p>\n            <div className=\"flex flex-col mb-6\">\n              <div className=\"bg-gray-800 p-4 rounded-lg mb-4\">\n                <div className=\"text-center mb-2 text-xs text-blue-300\">YOUR INVITE CODE</div>\n                <div className=\"text-center text-xl font-mono font-bold text-white tracking-wider bg-gray-700 py-2 rounded-md mb-2\">\n                  {inviteLink}\n                </div>\n                <div className=\"flex justify-center\">\n                  <button onClick={copyInviteLink} className={`${referralLinkCopied ? 'bg-green-600' : 'bg-blue-600 hover:bg-blue-700'} text-white px-4 py-2 rounded-md transition-colors flex items-center`}>\n                    {referralLinkCopied ? <Check size={16} className=\"mr-1\" /> : <Copy size={16} className=\"mr-1\" />}\n                    {referralLinkCopied ? 'Copied!' : 'Copy Code'}\n                  </button>\n                </div>\n              </div>\n              <div className=\"flex justify-between mb-4\">\n                <button onClick={() => setShareOptions(!shareOptions)} className=\"bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md flex items-center\">\n                  <Share2 size={16} className=\"mr-2\" />\n                  Share Options\n                </button>\n                <button onClick={shareInviteLink} className=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md flex items-center\">\n                  <Share2 size={16} className=\"mr-2\" />\n                  Quick Share\n                </button>\n              </div>\n              {shareOptions && <div className=\"bg-gray-800/80 rounded-lg p-4 mb-4\">\n                  <div className=\"flex justify-center mb-4\">\n                    <QRCodeDisplay value={inviteLink} />\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-2\">\n                    <button className=\"bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-md text-sm\">\n                      Share via Email\n                    </button>\n                    <button className=\"bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-md text-sm\">\n                      Share via SMS\n                    </button>\n                    <button className=\"bg-purple-600 hover:bg-purple-700 text-white px-3 py-2 rounded-md text-sm\">\n                      Share to Twitter\n                    </button>\n                    <button className=\"bg-blue-800 hover:bg-blue-900 text-white px-3 py-2 rounded-md text-sm\">\n                      Share to Facebook\n                    </button>\n                  </div>\n                </div>}\n              <button onClick={() => setShowReferralStats(!showReferralStats)} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md flex items-center justify-center\">\n                {showReferralStats ? 'Hide Referral Stats' : 'Show Referral Stats'}\n                <span className=\"ml-2 bg-blue-500 text-white text-xs px-2 py-0.5 rounded-full\">\n                  {inviteCount}\n                </span>\n              </button>\n            </div>\n            {showReferralStats && <div className=\"relative\">\n                <ReferralTrackingPanel invites={invites} inviteCount={inviteCount} />\n                <button onClick={() => {\n              setRefreshingInvites(true);\n              loadReferrals().finally(() => setRefreshingInvites(false));\n            }} className=\"absolute top-6 right-6 p-1 bg-gray-700 hover:bg-gray-600 rounded-full text-white\" disabled={refreshingInvites}>\n                  <RefreshCw size={16} className={refreshingInvites ? 'animate-spin' : ''} />\n                </button>\n              </div>}\n            <div className=\"flex justify-between items-center mt-4\">\n              <div className=\"text-white\">\n                <span className=\"text-blue-300\">Current invites:</span>\n                <span className=\"ml-2 font-bold\">{inviteCount}/5</span>\n                {inviteCount >= 5 && <span className=\"ml-2 text-xs bg-green-500 text-white px-2 py-0.5 rounded-full\">\n                    2x SPEED ACTIVE!\n                  </span>}\n              </div>\n              <button onClick={() => setShowInviteModal(false)} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                Close\n              </button>\n            </div>\n          </div>\n        </div>}\n        {}\n        {showEnterInviteModal && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50 pointer-events-auto\">\n          <div className=\"bg-gray-900 rounded-lg p-6 max-w-md w-full mx-4\">\n            <h2 className=\"text-xl font-bold text-white mb-4 flex items-center\">\n              <UserPlus size={20} className=\"mr-2 text-blue-400\" />\n              Enter Invite Code\n            </h2>\n            <p className=\"text-blue-300 mb-4\">\n              Enter a friend's invite code to join their network. You'll help them get 2x satellite launch speed!\n            </p>\n            <div className=\"mb-6\">\n              <label className=\"block text-white mb-2\">Invite Code</label>\n              <input type=\"text\" value={enteredInviteCode} onChange={e => setEnteredInviteCode(e.target.value.toUpperCase())} placeholder=\"e.g. SPARK-1234-ABCD\" className=\"w-full bg-gray-800 text-white px-4 py-3 rounded-md text-center font-mono tracking-wider\" />\n              {errorMessage && <div className=\"mt-2 text-red-400 text-sm\">{errorMessage}</div>}\n              <div className=\"mt-4 text-xs text-blue-300\">\n                <p>The invite code should be in the format: SPARK-XXXX-XXXX</p>\n                <p>Ask your friend to share their invite code with you.</p>\n              </div>\n            </div>\n            <div className=\"flex justify-between\">\n              <button onClick={() => setShowEnterInviteModal(false)} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                Cancel\n              </button>\n              <button onClick={() => processInviteCode(enteredInviteCode)} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md\">\n                Join Network\n              </button>\n            </div>\n          </div>\n        </div>}\n        {}\n        {elonMode && <div className=\"absolute bottom-32 right-4 bg-black/50 backdrop-blur-sm rounded-lg p-4 text-white pointer-events-auto animate-bounce\">\n            <div className=\"text-center\">\n              <p className=\"text-yellow-400 font-bold\">ELON MODE ACTIVATED!</p>\n              <p className=\"text-sm mt-1\">\"To Mars and beyond! 🚀\"</p>\n            </div>\n          </div>}\n        {}\n        {showTradeModal && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50 pointer-events-auto\">\n            <div className=\"bg-gray-900 rounded-lg p-6 max-w-md w-full mx-4\">\n              <h2 className=\"text-xl font-bold text-white mb-4\">Trade Satellite</h2>\n              <p className=\"text-blue-300 mb-4\">\n                Select a user to trade your satellite with. Trading helps expand your network!\n              </p>\n              {availableUsers.length > 0 ? <div className=\"max-h-60 overflow-y-auto mb-4\">\n                  {availableUsers.map(user => <div key={user.id} onClick={() => setSelectedUser(user)} className={`p-3 mb-2 rounded-md cursor-pointer flex justify-between items-center ${selectedUser?.id === user.id ? 'bg-blue-800' : 'bg-gray-800'}`}>\n                      <div>\n                        <div className=\"text-white\">{user.username || `User-${user.id.substring(0, 5)}`}</div>\n                        <div className=\"text-xs text-blue-300\">Has 1 satellite</div>\n                      </div>\n                      {selectedUser?.id === user.id && <Star size={16} className=\"text-yellow-400\" />}\n                    </div>)}\n                </div> : <div className=\"text-center py-4 text-gray-400\">\n                  No users available for trading\n                </div>}\n              <div className=\"flex justify-between\">\n            <button onClick={() => {\n              setShowLocationSelector(false);\n              const randomX = (Math.random() * 2 - 1) * 0.5;\n              const randomY = (Math.random() * 2 - 1) * 0.5;\n              setUserLocation({\n                x: randomX,\n                y: randomY\n              });\n              setNotification({\n                message: \"Using a random location for your satellite launch!\",\n                type: \"info\"\n              });\n            }} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                  Use Random Location\n                </button>\n                <button onClick={confirmSelectedLocation} disabled={!selectedMapLocation} className={`px-6 py-2 rounded-md text-white flex items-center ${selectedMapLocation ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-600 cursor-not-allowed'}`}>\n                  <span className=\"mr-1\">🚀</span> Launch From Here\n                </button>\n              </div>\n            </div>\n          </div>}\n        {}\n        {showCustomizeModal && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50 pointer-events-auto\">\n            <div className=\"bg-gray-900 rounded-lg p-6 max-w-md w-full mx-4\">\n              <h2 className=\"text-xl font-bold text-white mb-4\">Customize Your Satellite</h2>\n              <p className=\"text-blue-300 mb-4\">\n                Choose a custom color for your satellite. Your satellite will use this color.\n              </p>\n              <div className=\"mb-4\">\n                <label className=\"block text-white mb-2\">Satellite Color</label>\n                <input type=\"color\" value={customColor} onChange={e => setCustomColor(e.target.value)} className=\"w-full h-12 rounded-md cursor-pointer\" />\n              </div>\n              <div className=\"flex justify-between\">\n                <button onClick={() => setShowCustomizeModal(false)} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                  Cancel\n                </button>\n                <button onClick={saveCustomColor} className=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md\">\n                  Save Color\n                </button>\n              </div>\n            </div>\n          </div>}\n        {}\n        <div className=\"absolute bottom-24 right-4 pointer-events-auto z-10\">\n          <button onClick={() => setShowOrbitalDuelModal(true)} className=\"bg-gradient-to-r from-red-500 to-purple-600 p-3 rounded-full shadow-lg hover:shadow-xl transform hover:scale-110 transition-all duration-200 flex items-center justify-center\">\n            <Rocket size={32} className=\"text-white animate-pulse\" />\n          </button>\n          <div className=\"text-xs text-white text-center mt-1 font-bold bg-black/50 px-2 py-1 rounded-full\">\n            ORBITAL DUEL\n          </div>\n        </div>\n        {}\n        {currentPhase >= 2 && <div className=\"absolute bottom-32 right-4 bg-gray-900/70 backdrop-blur-sm rounded-lg p-4 text-white pointer-events-auto max-w-xs\">\n            <div className=\"text-center\">\n              <div className=\"text-lg font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent mb-2\">\n                Phase 2 Rewards\n              </div>\n              <div className=\"flex items-center justify-center mb-2\">\n                <Gift size={16} className=\"text-purple-400 mr-1\" />\n                <span className=\"text-sm\">Cosmic Rewards Unlocked!</span>\n              </div>\n              <div className=\"text-xs text-blue-300 mb-1\">\n                • Custom satellite color\n              </div>\n              <div className=\"text-xs text-blue-300 mb-1\">\n                • Satellite trading system\n              </div>\n              <div className=\"text-xs text-blue-300\">\n                • Enhanced network connections\n              </div>\n            </div>\n          </div>}\n        {}\n        <div className=\"absolute top-20 right-4 bg-yellow-900/70 backdrop-blur-sm rounded-lg p-4 text-white pointer-events-auto max-w-xs\">\n            <div className=\"text-center\">\n              <div className=\"text-lg font-bold bg-gradient-to-r from-yellow-400 to-orange-600 bg-clip-text text-transparent mb-2\">\n                SparkCoin\n              </div>\n              <div className=\"flex items-center justify-center mb-2\">\n                <Coins size={16} className=\"text-yellow-400 mr-1\" />\n                <span className=\"text-sm\">Your Cosmic Currency</span>\n              </div>\n              <div className=\"text-xs text-red-300 mb-2 italic text-center\">\n                Test currency only - not real PumpFun token\n              </div>\n              <div className=\"flex justify-between text-xs text-yellow-300 mb-1\">\n                <span>Balance:</span>\n                <span className=\"font-bold\">{tokenBalance.toFixed(0)} SPARK</span>\n              </div>\n              <div className=\"flex justify-between text-xs text-yellow-300 mb-1\">\n                <span>Value:</span>\n                <span className=\"font-bold\">{tokenValue} SOL</span>\n              </div>\n              <div className=\"flex justify-between text-xs text-yellow-300 mb-1\">\n                <span>Network Size:</span>\n                <span className=\"font-bold\">{userSatelliteCount} satellite</span>\n              </div>\n              <div className=\"flex justify-between text-xs text-yellow-300 mb-3\">\n                <span>Network Effect:</span>\n                <span className=\"font-bold\">{tokenNetworkEffect}x</span>\n              </div>\n              {isMining && <div onClick={() => setShowMiningCounter(!showMiningCounter)} className=\"bg-gray-800/80 rounded-lg p-2 mb-3 cursor-pointer transition-all duration-300 transform hover:scale-105\">\n                  <div className=\"flex items-center justify-between mb-1\">\n                    <div className=\"flex items-center\">\n                      <div className=\"h-2 w-2 bg-green-500 rounded-full mr-2 animate-pulse\"></div>\n                      <span className=\"text-xs text-green-300\">Mining Active</span>\n                    </div>\n                    <span className=\"text-xs font-bold text-yellow-300\">{miningReward} SPARK</span>\n                  </div>\n                  {showMiningCounter && <>\n                      <div className=\"w-full bg-gray-700 rounded-full h-1.5 mb-1\">\n                        <div className=\"bg-gradient-to-r from-green-500 to-blue-500 h-1.5 rounded-full\" style={{\n                  width: `${100 - miningTimeRemaining / (24 * 60 * 60) * 100}%`\n                }}></div>\n                      </div>\n                      <div className=\"flex justify-between text-xs\">\n                        <span className=\"text-blue-300\">Next confirm:</span>\n                        <span className=\"text-white font-mono\">{formatTime(miningTimeRemaining)}</span>\n                      </div>\n                    </>}\n                </div>}\n              <div className=\"flex space-x-2\">\n                <button onClick={() => setShowTokenDashboard(true)} className=\"flex-1 bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-700 hover:to-orange-700 text-white py-1 px-3 rounded-md text-xs flex items-center justify-center transition-colors\">\n                  <BarChart2 size={12} className=\"mr-1\" />\n                  Dashboard\n                </button>\n                <button onClick={() => setShowTokenModal(true)} className=\"flex-1 bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-700 hover:to-orange-700 text-white py-1 px-3 rounded-md text-xs flex items-center justify-center transition-colors\">\n                  <Zap size={12} className=\"mr-1\" />\n                  Use Tokens\n                </button>\n              </div>\n            </div>\n          </div>\n        {}\n        {showTokenDashboard && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50 pointer-events-auto\">\n            <div className=\"bg-gray-900 rounded-lg p-6 max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto\">\n              <h2 className=\"text-xl font-bold text-white mb-4 flex items-center\">\n                <BarChart2 size={20} className=\"mr-2 text-yellow-400\" />\n                SparkCoin Dashboard\n              </h2>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\">\n                <TokenStats tokenData={{\n              value: tokenValue,\n              priceChange: tokenStats.priceChange,\n              totalSupply: tokenStats.totalSupply + userSatelliteCount * 10,\n              stakingAPY: tokenStats.stakingAPY\n            }} />\n                <div className=\"bg-gray-800/80 rounded-lg p-4\">\n                  <h3 className=\"text-yellow-300 font-bold mb-3 flex items-center\">\n                    <PieChart size={16} className=\"mr-2\" />\n                    Network Metrics\n                  </h3>\n                  <div className=\"space-y-3\">\n                    <div className=\"bg-gray-700/50 p-3 rounded-lg\">\n                      <div className=\"flex justify-between items-center\">\n                        <div className=\"flex items-center\">\n                          <Rocket size={16} className=\"text-blue-400 mr-2\" />\n                          <span className=\"text-white\">Satellite</span>\n                        </div>\n                        <span className=\"text-lg font-bold text-white\">{userSatelliteCount}</span>\n                      </div>\n                      <div className=\"text-xs text-blue-300 mt-1\">\n                        Your satellite adds {SPARK_COIN.valuePerSatellite} SOL to token value\n                      </div>\n                    </div>\n                    <div className=\"bg-gray-700/50 p-3 rounded-lg\">\n                      <div className=\"flex justify-between items-center\">\n                        <div className=\"flex items-center\">\n                          <Users size={16} className=\"text-purple-400 mr-2\" />\n                          <span className=\"text-white\">Invites</span>\n                        </div>\n                        <span className=\"text-lg font-bold text-white\">{inviteCount}</span>\n                      </div>\n                      <div className=\"text-xs text-purple-300 mt-1\">\n                        Each invite adds {SPARK_COIN.valuePerInvite} SOL to token value\n                      </div>\n                    </div>\n                    <div className=\"bg-gray-700/50 p-3 rounded-lg\">\n                      <div className=\"flex justify-between items-center\">\n                        <div className=\"flex items-center\">\n                          <Target size={16} className=\"text-green-400 mr-2\" />\n                          <span className=\"text-white\">Network Effect</span>\n                        </div>\n                        <span className=\"text-lg font-bold text-white\">{tokenNetworkEffect}x</span>\n                      </div>\n                      <div className=\"text-xs text-green-300 mt-1\">\n                        Global user count multiplies your token value\n                      </div>\n                    </div>\n                    <div className=\"bg-gray-700/50 p-3 rounded-lg\">\n                      <div className=\"flex justify-between items-center\">\n                        <div className=\"flex items-center\">\n                          <Shield size={16} className=\"text-yellow-400 mr-2\" />\n                          <span className=\"text-white\">Staked Satellite</span>\n                        </div>\n                        <span className=\"text-lg font-bold text-white\">{stakedSatellites.length} / {userSatelliteCount}</span>\n                      </div>\n                      <div className=\"text-xs text-yellow-300 mt-1\">\n                        Earning {(stakedSatellites.length * 0.5).toFixed(1)} SPARK per day\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\">\n                <StakingPanel userSatellites={userSatelliteObjects} stakedSatellites={stakedSatellites} tokenBalance={tokenBalance} stakingRewards={stakingRewards} onStake={stakeSatellite} onUnstake={unstakeSatellite} onClaimRewards={claimStakingRewards} />\n                <TransactionHistory transactions={tokenTransactions} />\n              </div>\n              <div className=\"bg-gray-800/80 rounded-lg p-4 mb-6\">\n                <h3 className=\"text-blue-300 font-bold mb-3 flex items-center\">\n                  <Activity size={16} className=\"mr-2\" />\n                  SPARK Mining Status\n                </h3>\n                {isMining ? <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                    <div className=\"bg-gray-700/50 p-3 rounded-lg\">\n                      <div className=\"flex justify-between items-center\">\n                        <div>\n                          <div className=\"text-xs text-gray-400\">Mining Status</div>\n                          <div className=\"text-lg font-bold text-white flex items-center\">\n                            <span className=\"h-2 w-2 bg-green-500 rounded-full mr-2 animate-pulse\"></span>\n                            Active\n                          </div>\n                        </div>\n                        <div>\n                          <div className=\"text-xs text-gray-400\">Mining Rate</div>\n                          <div className=\"text-lg font-bold text-yellow-400\">1 SPARK/hour</div>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"bg-gray-700/50 p-3 rounded-lg\">\n                      <div className=\"flex justify-between items-center\">\n                        <div>\n                          <div className=\"text-xs text-gray-400\">Next Confirmation</div>\n                          <div className=\"text-lg font-bold text-white\">{formatTime(miningTimeRemaining)}</div>\n                        </div>\n                        <div>\n                          <div className=\"text-xs text-gray-400\">Mined This Session</div>\n                          <div className=\"text-lg font-bold text-yellow-400\">{miningReward} SPARK</div>\n                        </div>\n                      </div>\n                      <div className=\"mt-2 w-full bg-gray-600 rounded-full h-1.5\">\n                        <div className=\"bg-gradient-to-r from-blue-500 to-purple-500 h-1.5 rounded-full transition-all duration-500\" style={{\n                    width: `${100 - miningTimeRemaining / (24 * 60 * 60) * 100}%`\n                  }}></div>\n                      </div>\n                    </div>\n                  </div> : <div className=\"flex flex-col items-center py-4\">\n                    <div className=\"text-gray-400 mb-3\">Mining is currently inactive</div>\n                    <button onClick={() => setShowMiningModal(true)} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center\">\n                      <Activity size={16} className=\"mr-2\" />\n                      Start Mining SPARK\n                    </button>\n                    <div className=\"text-xs text-blue-300 mt-2\">Earn 1 SPARK per hour by confirming daily</div>\n                  </div>}\n              </div>\n              <div className=\"bg-yellow-900/30 rounded-lg p-4 mb-6\">\n                <h3 className=\"text-yellow-300 font-bold mb-2 flex items-center\">\n                  <Zap size={16} className=\"mr-2\" />\n                  Growth Strategies\n                </h3>\n                <div className=\"grid grid-cols-1 md:grid-cols-3 gap-3 text-sm\">\n                  <div className=\"bg-gray-800/50 p-3 rounded-lg\">\n                    <div className=\"flex items-center text-white mb-1\">\n                      <Rocket size={14} className=\"text-blue-400 mr-1\" />\n                      <span>Customize Your Satellite</span>\n                    </div>\n                    <p className=\"text-gray-400 text-xs\">\n                      Make your satellite unique to stand out in the network\n                    </p>\n                  </div>\n                  <div className=\"bg-gray-800/50 p-3 rounded-lg\">\n                    <div className=\"flex items-center text-white mb-1\">\n                      <Users size={14} className=\"text-purple-400 mr-1\" />\n                      <span>Invite More Friends</span>\n                    </div>\n                    <p className=\"text-gray-400 text-xs\">\n                      Each invite earns you 50 SPARK tokens and increases value\n                    </p>\n                  </div>\n                  <div className=\"bg-gray-800/50 p-3 rounded-lg\">\n                    <div className=\"flex items-center text-white mb-1\">\n                      <Shield size={14} className=\"text-yellow-400 mr-1\" />\n                      <span>Stake Your Satellite</span>\n                    </div>\n                    <p className=\"text-gray-400 text-xs\">\n                      Earn passive income of 0.5 SPARK per day with your satellite\n                    </p>\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex justify-between\">\n                <button onClick={() => setShowTokenModal(true)} className=\"bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md flex items-center\">\n                  <Zap size={16} className=\"mr-2\" />\n                  Use SparkCoins\n                </button>\n                <button onClick={() => setShowTokenDashboard(false)} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                  Close Dashboard\n                </button>\n              </div>\n            </div>\n          </div>}\n        {}\n        {showTokenModal && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50 pointer-events-auto\">\n            <div className=\"bg-gray-900 rounded-lg p-6 max-w-md w-full mx-4\">\n              <h2 className=\"text-xl font-bold text-white mb-4\">SparkCoin Store</h2>\n              <p className=\"text-blue-300 mb-4\">\n                Use your SparkCoins to unlock premium features for your satellite!\n              </p>\n              <div className=\"space-y-3 mb-6\">\n                <div className=\"bg-gray-800 rounded-md p-4 hover:bg-gray-700 transition-colors cursor-pointer\" onClick={() => buyPremiumFeature('speedBoost', 200)}>\n                  <div className=\"flex justify-between items-center\">\n                    <div>\n                      <h3 className=\"font-bold text-white\">Speed Boost</h3>\n                      <p className=\"text-xs text-blue-300\">Launch satellite 50% faster</p>\n                    </div>\n                    <div className=\"flex items-center text-yellow-400 text-sm font-bold\">\n                      <Coins size={14} className=\"mr-1\" />\n                      <span>200</span>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"bg-gray-800 rounded-md p-4 hover:bg-gray-700 transition-colors cursor-pointer\" onClick={() => buyPremiumFeature('premiumSkin', 300)}>\n                  <div className=\"flex justify-between items-center\">\n                    <div>\n                      <h3 className=\"font-bold text-white\">Premium Gold Skin</h3>\n                      <p className=\"text-xs text-blue-300\">Exclusive golden satellite</p>\n                    </div>\n                    <div className=\"flex items-center text-yellow-400 text-sm font-bold\">\n                      <Coins size={14} className=\"mr-1\" />\n                      <span>300</span>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"bg-gray-800 rounded-md p-4 hover:bg-gray-700 transition-colors cursor-pointer\" onClick={() => buyPremiumFeature('extraConnections', 500)}>\n                  <div className=\"flex justify-between items-center\">\n                    <div>\n                      <h3 className=\"font-bold text-white\">Extra Connections</h3>\n                      <p className=\"text-xs text-blue-300\">Connect to more users in the network</p>\n                    </div>\n                    <div className=\"flex items-center text-yellow-400 text-sm font-bold\">\n                      <Coins size={14} className=\"mr-1\" />\n                      <span>500</span>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"bg-gray-800 rounded-md p-4 hover:bg-gray-700 transition-colors cursor-pointer\" onClick={() => buyPremiumFeature('stakingBoost', 750)}>\n                  <div className=\"flex justify-between items-center\">\n                    <div>\n                      <h3 className=\"font-bold text-white\">Staking Boost</h3>\n                      <p className=\"text-xs text-blue-300\">Increase staking rewards by 25%</p>\n                    </div>\n                    <div className=\"flex items-center text-yellow-400 text-sm font-bold\">\n                      <Coins size={14} className=\"mr-1\" />\n                      <span>750</span>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"bg-gray-800 rounded-md p-4 hover:bg-gray-700 transition-colors cursor-pointer\" onClick={() => buyPremiumFeature('valueMultiplier', 1000)}>\n                  <div className=\"flex justify-between items-center\">\n                    <div>\n                      <h3 className=\"font-bold text-white\">Value Multiplier</h3>\n                      <p className=\"text-xs text-blue-300\">Increase token value by 10%</p>\n                    </div>\n                    <div className=\"flex items-center text-yellow-400 text-sm font-bold\">\n                      <Coins size={14} className=\"mr-1\" />\n                      <span>1000</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex justify-between items-center mb-4\">\n                <div className=\"text-white\">\n                  <span className=\"text-blue-300\">Your Balance:</span>\n                  <span className=\"ml-2 font-bold\">{tokenBalance.toFixed(0)} SPARK</span>\n                </div>\n                <button onClick={() => setShowTokenModal(false)} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                  Close\n                </button>\n              </div>\n            </div>\n          </div>}\n        {}\n        {showStakingPanel && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50 pointer-events-auto\">\n            <div className=\"bg-gray-900 rounded-lg p-6 max-w-md w-full mx-4\">\n              <h2 className=\"text-xl font-bold text-white mb-4 flex items-center\">\n                <Shield size={20} className=\"mr-2 text-yellow-400\" />\n                Satellite Staking\n              </h2>\n              <p className=\"text-blue-300 mb-4\">\n                Stake your satellite to earn passive SPARK token rewards. Your staked satellite earns 0.5 SPARK per day.\n              </p>\n              <StakingPanel userSatellites={userSatelliteObjects} stakedSatellites={stakedSatellites} tokenBalance={tokenBalance} stakingRewards={stakingRewards} onStake={stakeSatellite} onUnstake={unstakeSatellite} onClaimRewards={claimStakingRewards} />\n              <div className=\"flex justify-end mt-4\">\n                <button onClick={() => setShowStakingPanel(false)} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                  Close\n                </button>\n              </div>\n            </div>\n          </div>}\n        {}\n        {showMiningModal && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50 pointer-events-auto\">\n            <div className=\"bg-gray-900 rounded-lg p-6 max-w-md w-full mx-4\">\n              <h2 className=\"text-xl font-bold text-white mb-4 flex items-center\">\n                <Activity size={20} className=\"mr-2 text-blue-400\" />\n                SPARK Mining\n              </h2>\n              {isMining && miningTimeRemaining <= 0 ? <>\n                  <p className=\"text-blue-300 mb-4\">\n                    Your mining period has ended. Would you like to continue mining SPARK?\n                  </p>\n                  <div className=\"bg-gray-800/50 p-4 rounded-lg mb-4\">\n                    <div className=\"text-center\">\n                      <div className=\"text-yellow-400 text-lg font-bold mb-1\">{miningReward} SPARK</div>\n                      <div className=\"text-gray-400 text-sm\">Mined in the last 24 hours</div>\n                    </div>\n                  </div>\n                  <div className=\"flex justify-between\">\n                    <button onClick={stopMining} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                      Stop Mining\n                    </button>\n                    <button onClick={continueMining} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md\">\n                      Continue Mining\n                    </button>\n                  </div>\n                </> : <>\n                  <p className=\"text-blue-300 mb-4\">\n                    Start mining SPARK coins by confirming your presence every 24 hours. You'll earn 1 SPARK per hour.\n                  </p>\n                  <div className=\"bg-gray-800/50 p-4 rounded-lg mb-4\">\n                    <div className=\"flex items-center\">\n                      <div className=\"w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center mr-3\">\n                        <Activity size={24} className=\"text-white\" />\n                      </div>\n                      <div>\n                        <div className=\"text-white font-bold\">Mining Rate</div>\n                        <div className=\"text-yellow-400\">1 SPARK per hour</div>\n                      </div>\n                    </div>\n                  </div>\n                  <div className=\"bg-yellow-900/30 p-3 rounded-lg text-sm text-yellow-300 mb-4\">\n                    <p>You must confirm your presence every 24 hours to continue mining. Mining will automatically stop if you don't confirm.</p>\n                  </div>\n                  <div className=\"flex justify-between\">\n                    <button onClick={() => setShowMiningModal(false)} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                      Not Now\n                    </button>\n                    <button onClick={startMining} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md\">\n                      Start Mining\n                    </button>\n                  </div>\n                </>}\n            </div>\n          </div>}\n        {}\n        {showOrbitalDuelModal && <div className=\"fixed inset-0 bg-black/80 flex items-center justify-center z-50 pointer-events-auto\">\n            <div className=\"bg-gray-900 rounded-lg p-6 max-w-4xl w-full mx-4\">\n              <div className=\"flex justify-between items-center mb-4\">\n                <h2 className=\"text-xl font-bold text-white flex items-center\">\n                  <Rocket size={20} className=\"mr-2 text-red-400\" />\n                  ORBITAL DUEL\n                </h2>\n                <button onClick={() => {\n              if (gameStarted && !gameOver) {\n                if (window.confirm(\"Forfeit the current game? You'll lose your bet.\")) {\n                  if (gameInterval) clearInterval(gameInterval);\n                  setShowOrbitalDuelModal(false);\n                  resetOrbitalDuel();\n                }\n              } else {\n                setShowOrbitalDuelModal(false);\n                resetOrbitalDuel();\n              }\n            }} className=\"text-gray-400 hover:text-white\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                  </svg>\n                </button>\n              </div>\n              {showBettingUI ? <div className=\"mb-6\">\n                  <p className=\"text-blue-300 mb-4\">\n                    Challenge an opponent to a rocket duel! First to hit the other 3 times wins and takes all the SPARK!\n                  </p>\n                  <div className=\"bg-gray-800/50 rounded-lg p-4 mb-4\">\n                    <h3 className=\"text-white font-bold mb-2\">Select Your Bet</h3>\n                    <div className=\"flex space-x-4 mb-4\">\n                      <button onClick={() => setBetAmount(1)} className={`flex-1 py-3 rounded-lg flex flex-col items-center justify-center ${betAmount === 1 ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-300'}`}>\n                        <span className=\"text-lg font-bold\">1 SPARK</span>\n                        <span className=\"text-xs\">Low Risk</span>\n                      </button>\n                      <button onClick={() => setBetAmount(10)} className={`flex-1 py-3 rounded-lg flex flex-col items-center justify-center ${betAmount === 10 ? 'bg-purple-600 text-white' : 'bg-gray-700 text-gray-300'}`}>\n                        <span className=\"text-lg font-bold\">10 SPARK</span>\n                        <span className=\"text-xs\">High Stakes</span>\n                      </button>\n                    </div>\n                    <div className=\"flex justify-between items-center text-sm\">\n                      <span className=\"text-blue-300\">Your Balance:</span>\n                      <span className=\"text-white font-bold\">{tokenBalance.toFixed(0)} SPARK</span>\n                    </div>\n                  </div>\n                  <div className=\"bg-gray-800/50 rounded-lg p-4 mb-4\">\n                    <h3 className=\"text-white font-bold mb-2\">Game Rules</h3>\n                    <ul className=\"text-sm text-blue-300 space-y-1\">\n                      <li>• Use W/S or Up/Down keys to move your rocket</li>\n                      <li>• Press Space or click to shoot</li>\n                      <li>• First to hit opponent 3 times wins</li>\n                      <li>• Winner takes entire pot ({betAmount * 2} SPARK)</li>\n                    </ul>\n                  </div>\n                  <button onClick={startOrbitalDuel} disabled={tokenBalance < betAmount} className={`w-full py-3 rounded-lg text-white font-bold ${tokenBalance >= betAmount ? 'bg-gradient-to-r from-red-500 to-purple-600 hover:from-red-600 hover:to-purple-700' : 'bg-gray-600 cursor-not-allowed'}`}>\n                    START DUEL ({betAmount} SPARK)\n                  </button>\n                  {tokenBalance < betAmount && <div className=\"text-red-400 text-sm text-center mt-2\">\n                      Not enough SPARK tokens. You need {betAmount} SPARK to play.\n                    </div>}\n                </div> : <div>\n                  {}\n                  <div className=\"relative bg-gray-800 rounded-lg overflow-hidden\" style={{\n              height: '400px'\n            }}>\n                    {}\n                    {!gameStarted && <div className=\"absolute inset-0 bg-black/70 flex flex-col items-center justify-center z-10\">\n                        {waitingForOpponent ? <>\n                            <div className=\"text-xl text-white mb-2\">Finding Opponent...</div>\n                            <div className=\"animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500\"></div>\n                          </> : opponentFound ? <>\n                            <div className=\"text-xl text-white mb-2\">Opponent Found!</div>\n                            <div className=\"text-blue-300 mb-4\">{opponentName}</div>\n                            <div className=\"text-white text-sm\">Game starting in 3...</div>\n                          </> : null}\n                      </div>}\n                    {gameOver && <div className=\"absolute inset-0 bg-black/70 flex flex-col items-center justify-center z-10\">\n                        <div className={`text-2xl font-bold mb-2 ${winner === 'player' ? 'text-green-400' : 'text-red-400'}`}>\n                          {winner === 'player' ? 'VICTORY!' : 'DEFEAT!'}\n                        </div>\n                        <div className=\"text-white mb-4\">\n                          {winner === 'player' ? `You won ${betAmount} SPARK!` : `You lost ${betAmount} SPARK.`}\n                        </div>\n                        <button onClick={resetOrbitalDuel} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md\">\n                          Play Again\n                        </button>\n                      </div>}\n                    {}\n                    <div className=\"absolute inset-0 bg-gray-900 overflow-hidden\">\n                      {}\n                      <div className=\"absolute inset-0\" style={{\n                  backgroundImage: 'radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 2px)',\n                  backgroundSize: '50px 50px',\n                  opacity: 0.3\n                }}></div>\n                      {}\n                      <div className={`absolute left-2 w-10 h-10 transform -translate-y-1/2 transition-all duration-100 ${highStakesEffects ? 'animate-pulse' : ''}`} style={{\n                  top: `${playerPosition}%`\n                }}>\n                        <div className=\"w-full h-full relative\">\n                          <div className=\"absolute inset-0 bg-blue-500 rounded-r-full\"></div>\n                          <div className=\"absolute left-0 top-1/2 transform -translate-y-1/2 w-3 h-3 bg-yellow-400 rounded-full\"></div>\n                          {highStakesEffects && <div className=\"absolute -left-4 top-1/2 transform -translate-y-1/2 w-4 h-1 bg-blue-300 animate-ping\"></div>}\n                        </div>\n                      </div>\n                      {}\n                      <div className={`absolute right-2 w-10 h-10 transform -translate-y-1/2 transition-all duration-100 ${highStakesEffects ? 'animate-pulse' : ''}`} style={{\n                  top: `${opponentPosition}%`\n                }}>\n                        <div className=\"w-full h-full relative\">\n                          <div className=\"absolute inset-0 bg-red-500 rounded-l-full\"></div>\n                          <div className=\"absolute right-0 top-1/2 transform -translate-y-1/2 w-3 h-3 bg-yellow-400 rounded-full\"></div>\n                          {highStakesEffects && <div className=\"absolute -right-4 top-1/2 transform -translate-y-1/2 w-4 h-1 bg-red-300 animate-ping\"></div>}\n                        </div>\n                      </div>\n                      {}\n                      {projectiles.map(projectile => <div key={projectile.id} className={`absolute w-3 h-1 bg-blue-400 rounded-full ${highStakesEffects ? 'shadow-lg shadow-blue-500/50' : ''}`} style={{\n                  left: `${projectile.x}%`,\n                  top: `${projectile.y}%`,\n                  transform: 'translateY(-50%)'\n                }}></div>)}\n                      {}\n                      {opponentProjectiles.map(projectile => <div key={projectile.id} className={`absolute w-3 h-1 bg-red-400 rounded-full ${highStakesEffects ? 'shadow-lg shadow-red-500/50' : ''}`} style={{\n                  left: `${projectile.x}%`,\n                  top: `${projectile.y}%`,\n                  transform: 'translateY(-50%)'\n                }}></div>)}\n                      {}\n                      <div className=\"absolute top-4 left-0 right-0 flex justify-center\">\n                        <div className=\"bg-black/50 rounded-full px-4 py-1 flex items-center space-x-4\">\n                          <div className=\"text-blue-400 font-bold\">{playerScore}</div>\n                          <div className=\"text-white\">vs</div>\n                          <div className=\"text-red-400 font-bold\">{opponentScore}</div>\n                        </div>\n                      </div>\n                      {}\n                      <div className=\"absolute bottom-4 left-0 right-0 flex justify-center\">\n                        <div className=\"bg-black/50 rounded-full px-4 py-1 flex items-center\">\n                          <Coins size={14} className=\"text-yellow-400 mr-2\" />\n                          <span className=\"text-white text-sm\">{betAmount * 2} SPARK pot</span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  {}\n                  <div className=\"mt-4 grid grid-cols-2 gap-4\">\n                    <div>\n                      <div className=\"text-white text-sm mb-2\">Movement Controls:</div>\n                      <div className=\"flex space-x-2\">\n                        <button onMouseDown={() => {\n                    if (!gameStarted || gameOver) return;\n                    const moveInterval = setInterval(() => {\n                      setPlayerPosition(prev => Math.max(5, prev - 5));\n                    }, 50);\n                    return () => clearInterval(moveInterval);\n                  }} onMouseUp={() => {}} onMouseLeave={() => {}} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                          Up (W)\n                        </button>\n                        <button onMouseDown={() => {\n                    if (!gameStarted || gameOver) return;\n                    const moveInterval = setInterval(() => {\n                      setPlayerPosition(prev => Math.min(95, prev + 5));\n                    }, 50);\n                    return () => clearInterval(moveInterval);\n                  }} onMouseUp={() => {}} onMouseLeave={() => {}} className=\"bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md\">\n                          Down (S)\n                        </button>\n                      </div>\n                    </div>\n                    <div>\n                      <div className=\"text-white text-sm mb-2\">Weapon Control:</div>\n                      <button onClick={handlePlayerShoot} disabled={!gameStarted || gameOver} className={`w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md ${!gameStarted || gameOver ? 'opacity-50 cursor-not-allowed' : ''}`}>\n                        FIRE! (Space)\n                      </button>\n                    </div>\n                  </div>\n                  {}\n                  <div className=\"mt-4 text-xs text-center text-blue-300\">\n                    Use W/S or Up/Down arrow keys to move. Press Space to shoot.\n                  </div>\n                </div>}\n            </div>\n          </div>}\n      </div>\n    </div>;\n  useEffect(() => {\n    if (!showOrbitalDuelModal || !gameStarted || gameOver) return;\n    const handleKeyDown = e => {\n      if (e.key === 'w' || e.key === 'W' || e.key === 'ArrowUp') {\n        setPlayerPosition(prev => Math.max(5, prev - 5));\n      } else if (e.key === 's' || e.key === 'S' || e.key === 'ArrowDown') {\n        setPlayerPosition(prev => Math.min(95, prev + 5));\n      }\n      if (e.key === ' ' || e.key === 'Spacebar') {\n        handlePlayerShoot();\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [showOrbitalDuelModal, gameStarted, gameOver]);\n}\nexport default function App() {\n  const [, setLoaded] = useState(false);\n  const [walletError,,] = useState(null);\n  const miningInterval = useRef(null);\n  const network = WalletAdapterNetwork.Mainnet;\n  const endpoint = clusterApiUrl(network);\n  const logoUrl = \"https://cdn.dev.fun/asset/b8bb24936a2eb4fe9ec9/sparkchain%20gif%20meme_ebfb6e6c.gif\";\n  useEffect(() => {\n    setLoaded(true);\n    setTimeout(() => {\n      const isFirstLogin = !localStorage.getItem('sparkchain_has_seen_mining');\n      if (isFirstLogin) {\n        if (typeof setShowMiningModal === 'function') {\n          setShowMiningModal(true);\n          localStorage.setItem('sparkchain_has_seen_mining', 'true');\n        }\n      }\n    }, 2000);\n    return () => {\n      if (miningInterval.current) {\n        clearInterval(miningInterval.current);\n      }\n    };\n  }, []);\n  useEffect(() => {\n    const favicon = document.querySelector(\"link[rel='icon']\") || document.createElement('link');\n    favicon.type = 'image/gif';\n    favicon.rel = 'icon';\n    favicon.href = logoUrl;\n    document.head.appendChild(favicon);\n    const appIcon = document.createElement('link');\n    appIcon.rel = 'mask-icon';\n    appIcon.href = logoUrl;\n    document.head.appendChild(appIcon);\n    const touchIcon = document.createElement('link');\n    touchIcon.rel = 'apple-touch-icon';\n    touchIcon.href = logoUrl;\n    document.head.appendChild(touchIcon);\n    const ogImage = document.createElement('meta');\n    ogImage.setAttribute('property', 'og:image');\n    ogImage.content = logoUrl;\n    document.head.appendChild(ogImage);\n    const ogTitle = document.createElement('meta');\n    ogTitle.setAttribute('property', 'og:title');\n    ogTitle.content = 'SparkChain';\n    document.head.appendChild(ogTitle);\n    const ogDesc = document.createElement('meta');\n    ogDesc.setAttribute('property', 'og:description');\n    ogDesc.content = 'Launch your personal satellite fleet into a mesmerizing global network!';\n    document.head.appendChild(ogDesc);\n    const style = document.createElement('style');\n    style.innerHTML = 'img { pointer-events: none; user-select: none; -webkit-user-drag: none; }';\n    document.head.appendChild(style);\n    return () => {};\n  }, []);\n  return <ErrorBoundary>\n      <ConnectionProvider endpoint={endpoint}>\n        <WalletProvider wallets={[new DevfunWalletAdapter()]} autoConnect>\n          <WalletModalProvider>\n            {walletError && <div className=\"fixed top-0 left-0 right-0 bg-yellow-600 text-white text-center text-sm py-1 z-50\">\n                {walletError}\n              </div>}\n            <AppContent />\n          </WalletModalProvider>\n        </WalletProvider>\n      </ConnectionProvider>\n    </ErrorBoundary>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"@react-three/fiber\":\"8.15.19\",\"@react-three/drei\":\"9.99.7\",\"three\":\"0.162.0\",\"socket.io-client\":\"4.7.1\",\"@devfunlabs/state-client\":\"0.8.1\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@devfunlabs/wallet-adapter-devfun\":\"0.3.0\",\"@solana/web3.js\":\"1.95.3\",\"lucide-react\":\"0.441.0\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\",\"framer-motion\":\"10.16.4\",\"@devfunlabs/web-sdk\":\"0.2.2\",\"zod\":\"3.22.4\",\"ai\":\"4.0.0\"}}","appFunctions",[],"token",{"_18":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95,"_96":59,"_97":98,"_73":74},"SparkChain","symbol","SPARK","price",0.0000075,"marketcap",7287,"image","https://pump.mypinata.cloud/ipfs/QmTHMsVajBmy159JdyZRo2bRFrFMxo3J8ehY53gjHHnCf5?img-width=256&img-dpr=2","website","https://dev.fun/p/b8bb24936a2eb4fe9ec9","twitter","https://x.com/i/communities/1896740782796603766/","devCount","appCount",8,"upstreamApp","isLordOfDev","analytics",[103,107,109,111,113,115,117,119,121,123,125,127,129,131,133,134,135],{"_104":105,"_106":65},"day","2025-08-13","runCount",{"_104":108,"_106":65},"2025-08-14",{"_104":110,"_106":65},"2025-08-15",{"_104":112,"_106":65},"2025-08-16",{"_104":114,"_106":65},"2025-08-17",{"_104":116,"_106":65},"2025-08-18",{"_104":118,"_106":65},"2025-08-19",{"_104":120,"_106":65},"2025-08-20",{"_104":122,"_106":65},"2025-08-21",{"_104":124,"_106":65},"2025-08-22",{"_104":126,"_106":65},"2025-08-23",{"_104":128,"_106":65},"2025-08-24",{"_104":130,"_106":65},"2025-08-25",{"_104":132,"_106":65},"2025-08-26",{"_104":105,"_106":41},{"_104":118,"_106":41},{"_104":136,"_106":41},"2025-08-27","snapshot","ogImage","https://cdn.dev.fun/og/image/b8bb24936a2eb4fe9ec9/d753a6ff.webp","isDevbase","actionData","errors"]
</article></body></html>

say something