[{"_1":2,"_155":-5,"_156":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_153":-5,"_144":-7,"_154":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_5":46,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":67,"_69":67,"_70":67,"_71":67,"_72":67,"_73":17,"_74":17,"_75":19,"_76":77,"_78":79,"_80":81,"_82":83,"_103":-5,"_104":17,"_105":106,"_144":33,"_145":146,"_147":17,"_148":149},"id","b8bb24936a2eb4fe9ec9","isMyApp",false,"projectId","G3vhNt2y8njvpnC7P8rECo7zZRjxrDY4ed4HRm9Kpump","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",[31],"👑","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":47,"_48":49,"_50":-5,"_51":49,"_52":53,"_54":55,"_56":57},"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",4149,"downvoteCount",0,"upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","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",{"_20":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":67,"_96":97,"_98":67,"_99":61,"_100":101,"_64":102,"_75":19},"SparkChain","symbol","SPARK","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/","marketcap",7727.9802,"volumeIn24h","price",0.00000682,"priceChangeIn24h","devCount","appCount",9,4359,"upstreamApp","isLordOfDev","analytics",[107,111,113,115,117,119,121,123,125,127,129,131,133,135,137,138,139,140,141,142],{"_108":109,"_110":67},"day","2025-09-24","runCount",{"_108":112,"_110":67},"2025-09-25",{"_108":114,"_110":67},"2025-09-26",{"_108":116,"_110":67},"2025-09-27",{"_108":118,"_110":67},"2025-09-28",{"_108":120,"_110":67},"2025-09-29",{"_108":122,"_110":67},"2025-09-30",{"_108":124,"_110":67},"2025-10-01",{"_108":126,"_110":67},"2025-10-02",{"_108":128,"_110":67},"2025-10-03",{"_108":130,"_110":67},"2025-10-04",{"_108":132,"_110":67},"2025-10-05",{"_108":134,"_110":67},"2025-10-06",{"_108":136,"_110":67},"2025-10-07",{"_108":116,"_110":43},{"_108":120,"_110":43},{"_108":124,"_110":43},{"_108":130,"_110":43},{"_108":136,"_110":43},{"_108":143,"_110":43},"2025-10-08","snapshot","ogImage","https://cdn.dev.fun/og/image/b8bb24936a2eb4fe9ec9/05c8dea0.webp","isDevbase","project",{"_14":19,"_87":88,"_20":84,"_150":151,"_22":152},"oneliner","Mine SPARK, help us build","$$SPARK – Alpha Drop, help us build! $SPARK fuels SparkChain, a live blockchain driving satellite mining in our app. Early stage—mining’s active, invites amp up rates, core net’s solid. Trading, smart contracts, Phase 2? TBD, still coding it. Dive in, hack it, help us build! application created and launched on @dev.fun","commitDetail","livestream","actionData","errors"]
</article></body></html>