[{"_1":2,"_137":-5,"_138":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_55":56,"_57":58,"_59":58,"_60":61,"_62":58,"_63":58,"_64":58,"_65":58,"_66":58,"_67":58,"_68":17,"_69":17,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_96":-5,"_97":17,"_98":99,"_133":31,"_134":135,"_136":17},"id","6f4d5b26cb07f7c405bb","isMyApp",false,"name","surf.fun","description","Ride the endless waves of adrenaline as you dash through sun-soaked shores, dodging beach umbrellas and leaping over sandcastles! Keep your toes sand-free and your score sky-high in this addictive coastal runner.","brief","","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/6f4d5b26cb07f7c405bb/34198_06926092.webp","cdnUrl","https://cdn.dev.fun/app/6f4d5b26cb07f7c405bb/34198","createdAt",["D",1741560797346],"updatedAt",["D",1742299504228],"lastCommitId",["B","34198"],"tier",1,"credits",95,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":23,"_53":54},"e1a516b0-7d90-46da-8eeb-58f649cd9eda","uniqueId","fortuneofweb3","username","solanaWallet","DtdnqvRddQspZvRV5SJX2DeqxmLYef7Hqn9LFK9LioJS","displayName","bio","avatar","https://cdn.dev.fun/avatar/e1a516b0-7d90-46da-8eeb-58f649cd9eda/842e7d93.webp","commitCount",21,"forkCount",0,"likeCount","runsCount",55,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import React, { useRef, useState, useEffect, useMemo } from 'react';\nimport { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber';\nimport { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';\nimport { OrbitControls, Text, useAnimations, Stars, Float } from '@react-three/drei';\nimport { Physics, useBox, usePlane } from '@react-three/cannon';\nimport * as THREE from 'three';\n\n// Character Component\nfunction Character({\n position,\n lane,\n isJumping,\n zPosition\n}) {\n const characterRef = useRef();\n const runnerFbx = useLoader(FBXLoader, 'https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/models/fbx/Samba Dancing.fbx');\n const {\n actions\n } = useAnimations(runnerFbx.animations, characterRef);\n useEffect(() => {\n // Play animation\n actions[\"mixamo.com\"].play();\n // Scale and position the model\n if (characterRef.current) {\n characterRef.current.scale.set(0.02, 0.02, 0.02);\n characterRef.current.position.y = 0;\n characterRef.current.rotation.y = Math.PI;\n }\n }, [actions]);\n useFrame(() => {\n if (characterRef.current) {\n // Lerp to target lane position - expanded lane distance\n const targetX = lane * 8; // Increased from 4 to 8 for even wider lanes\n characterRef.current.position.x = THREE.MathUtils.lerp(characterRef.current.position.x, targetX, 0.1);\n\n // Update z position based on player movement\n characterRef.current.position.z = zPosition;\n\n // Handle jumping\n if (isJumping) {\n const jumpHeight = Math.sin(Date.now() * 0.005) * 1.5;\n characterRef.current.position.y = Math.max(0, jumpHeight);\n } else {\n characterRef.current.position.y = THREE.MathUtils.lerp(characterRef.current.position.y, 0, 0.1);\n }\n }\n });\n return ;\n}\n\n// Coin Component\nfunction Coin({\n position,\n onCollect\n}) {\n const [ref, api] = useBox(() => ({\n args: [0.5, 0.5, 0.5],\n position,\n isTrigger: true,\n onCollide,\n collisionFilterGroup: 4,\n collisionFilterMask: 1\n }));\n const [collected, setCollected] = useState(false);\n const [rotation, setRotation] = useState(0);\n function onCollide(e) {\n if (!collected) {\n setCollected(true);\n onCollect();\n }\n }\n useFrame(state => {\n // Rotate coin\n setRotation(prev => prev + 0.05);\n\n // Move coin with the beach\n if (!collected) {\n api.position.set(position[0], position[1], position[2]);\n } else {\n // Move collected coin out of view\n api.position.set(0, -10, 0);\n }\n });\n if (collected) return null;\n return \n \n \n \n \n ;\n}\n\n// Obstacle Component\nfunction Obstacle({\n position,\n type,\n speed,\n onCollide\n}) {\n const [ref, api] = useBox(() => ({\n args: [1, 1, 1],\n position,\n onCollide,\n collisionFilterGroup: 2,\n collisionFilterMask: 1\n }));\n useFrame(() => {\n // Move obstacle toward player\n api.position.set(position[0], position[1], position[2] + speed);\n });\n\n // Debug visibility - log obstacle creation once\n useEffect(() => {\n console.log(`Obstacle created: ${type} at position ${position}`);\n }, []);\n\n // Different obstacle visuals based on type\n const renderObstacle = () => {\n switch (type) {\n case 'umbrella':\n return <>\n \n \n \n \n \n \n \n \n ;\n case 'sandcastle':\n return <>\n \n \n \n \n \n \n \n \n \n \n \n \n ;\n case 'driftwood':\n return \n \n \n ;\n default:\n return \n \n \n ;\n }\n };\n return \n {renderObstacle()}\n ;\n}\n\n// Beach Component with repeating terrain segments\nfunction Beach({\n speed,\n playerPosition\n}) {\n const [segments, setSegments] = useState([]);\n const SEGMENT_LENGTH = 200;\n const SEGMENT_COUNT = 3; // Keep multiple segments to ensure continuous terrain\n\n // Create textures for beach elements\n const sandTexture = useMemo(() => {\n const texture = new THREE.TextureLoader().load('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/terrain/grasslight-big.jpg');\n texture.wrapS = texture.wrapT = THREE.RepeatWrapping;\n texture.repeat.set(10, 5); // Increased tiling for better appearance\n return texture;\n }, []);\n const oceanTexture = useMemo(() => {\n const texture = new THREE.TextureLoader().load('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/water.jpg');\n texture.wrapS = texture.wrapT = THREE.RepeatWrapping;\n texture.repeat.set(10, 5);\n return texture;\n }, []);\n\n // Initialize terrain segments\n useEffect(() => {\n const initialSegments = [];\n for (let i = 0; i < SEGMENT_COUNT; i++) {\n initialSegments.push({\n id: `segment-${i}`,\n position: -i * SEGMENT_LENGTH\n });\n }\n setSegments(initialSegments);\n }, []);\n\n // Move and recycle terrain segments\n useFrame(() => {\n // Scroll textures for additional effect\n if (sandTexture && oceanTexture) {\n sandTexture.offset.y += speed * 0.01;\n oceanTexture.offset.y += speed * 0.015;\n }\n\n // Update segments based on player position\n setSegments(prevSegments => {\n return prevSegments.map(segment => {\n // Calculate distance to player\n const distanceToPlayer = segment.position - playerPosition;\n\n // If segment is behind player by more than its length, move it ahead\n if (distanceToPlayer > SEGMENT_LENGTH) {\n // Find the frontmost segment\n const frontSegment = [...prevSegments].sort((a, b) => a.position - b.position)[0];\n // Position this segment in front\n return {\n ...segment,\n position: frontSegment.position - SEGMENT_LENGTH\n };\n }\n return segment;\n });\n });\n });\n return \n {/* Sky */}\n \n \n \n \n \n {/* Sun */}\n \n \n \n \n \n {/* Terrain segments */}\n {segments.map(segment => \n {/* Sand */}\n \n {/* Increased width from 30 to 50 for wider lanes */}\n \n \n \n {/* Ocean */}\n {/* Adjusted position from 15 to 20 */}\n {/* Increased width */}\n \n \n \n {/* Dunes */}\n {/* Adjusted position from -15 to -20 */}\n \n \n \n )}\n ;\n}\n\n// Camera that follows the player\nfunction FollowCamera({\n playerPosition,\n lane\n}) {\n const {\n camera\n } = useThree();\n useFrame(() => {\n // Smoothly move camera to follow player\n camera.position.z = THREE.MathUtils.lerp(camera.position.z, playerPosition + 5, 0.1);\n // Keep character in the middle of the screen horizontally by adjusting camera x-position\n camera.position.x = THREE.MathUtils.lerp(camera.position.x, lane * 8, 0.1); // Increased from 4 to 8 for wider lanes\n });\n return null;\n}\n\n// Helper function to get random obstacle type\nfunction getRandomObstacleType() {\n const obstacleTypes = ['umbrella', 'sandcastle', 'driftwood'];\n return obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];\n}\n\n// TikTok style emoji particles component\nfunction EmojiParticles({\n isActive\n}) {\n const group = useRef();\n const emojis = ['🔥', '💯', '👑', '⭐', '✨', '💪', '😂', '🙌', '💰', '🏄'];\n const particles = useMemo(() => {\n return Array.from({\n length: 20\n }).map((_, i) => ({\n position: [(Math.random() - 0.5) * 20, Math.random() * 10, (Math.random() - 0.5) * 20],\n scale: Math.random() * 0.5 + 0.5,\n rotation: Math.random() * Math.PI,\n emoji: emojis[Math.floor(Math.random() * emojis.length)]\n }));\n }, []);\n useFrame(({\n clock\n }) => {\n if (group.current && isActive) {\n group.current.children.forEach((child, i) => {\n const t = clock.getElapsedTime() + i;\n child.position.y += Math.sin(t * 2) * 0.02;\n child.rotation.z = Math.sin(t) * 0.2;\n child.scale.setScalar(Math.sin(t) * 0.2 + particles[i].scale);\n });\n }\n });\n if (!isActive) return null;\n return \n {particles.map((particle, i) => \n \n {particle.emoji}\n \n )}\n ;\n}\n\n// Main Game Component\nfunction SurfGame() {\n const [lane, setLane] = useState(0); // -1: left, 0: center, 1: right\n const [isJumping, setIsJumping] = useState(false);\n const [gameOver, setGameOver] = useState(false);\n const [score, setScore] = useState(0);\n const [obstacles, setObstacles] = useState([]);\n const [coins, setCoins] = useState([]);\n const [gameSpeed, setGameSpeed] = useState(0.05); // Start with slower speed\n const [coinsCollected, setCoinsCollected] = useState(0);\n const [isMuted, setIsMuted] = useState(false);\n const [showEmojis, setShowEmojis] = useState(false);\n const gameStartedRef = useRef(false);\n const audioRef = useRef(null);\n\n // Player position state\n const [playerPosition, setPlayerPosition] = useState(0);\n const [distanceTraveled, setDistanceTraveled] = useState(0);\n const lastObstacleRef = useRef(0);\n const lastCoinRef = useRef(0);\n\n // Game controls\n useEffect(() => {\n const handleKeyDown = e => {\n if (gameOver) return;\n if (!gameStartedRef.current) {\n gameStartedRef.current = true;\n }\n switch (e.key) {\n case 'ArrowLeft':\n setLane(prev => Math.max(-1, prev - 1));\n break;\n case 'ArrowRight':\n setLane(prev => Math.min(1, prev + 1));\n break;\n case 'ArrowUp':\n if (!isJumping) {\n setIsJumping(true);\n setTimeout(() => setIsJumping(false), 1000);\n }\n break;\n default:\n break;\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n };\n }, [gameOver, isJumping]);\n\n // Automatic movement and game loop\n useEffect(() => {\n if (gameOver) return; // Always run even if gameStartedRef is false\n const gameLoop = setInterval(() => {\n // Automatic forward movement\n setPlayerPosition(prev => prev - gameSpeed);\n setDistanceTraveled(prev => prev + gameSpeed);\n\n // Calculate score based on distance traveled and coins collected\n setScore(Math.floor(distanceTraveled) + coinsCollected * 10);\n\n // Gradually increase speed as player progresses - reduced acceleration and max speed\n setGameSpeed(prev => Math.min(prev + 0.00005, 0.3));\n }, 16);\n return () => {\n clearInterval(gameLoop);\n };\n }, [gameOver, gameSpeed, distanceTraveled, coinsCollected]);\n\n // Initialize with some obstacles right at the start\n useEffect(() => {\n if (!gameOver && !obstacles.length) {\n // Generate initial obstacles when game starts\n const initialObstacles = [];\n for (let i = 0; i < 5; i++) {\n const lane = Math.floor(Math.random() * 3) - 1; // -1, 0, 1\n initialObstacles.push({\n id: Date.now() + Math.random(),\n type: getRandomObstacleType(),\n position: [lane * 8, 0.5, -30 - i * 15],\n // Increased horizontal spacing (4 to 8) and vertical spacing (8 to 15)\n lane: lane\n });\n }\n setObstacles(initialObstacles);\n }\n }, [gameOver, obstacles.length]);\n\n // Improved obstacle generation with blocking patterns that force players to navigate carefully\n useEffect(() => {\n if (gameOver) return;\n const obstaclePatterns = [\n // Single obstacle in one lane - basic pattern\n () => {\n const lane = Math.floor(Math.random() * 3) - 1; // -1, 0, 1\n return [{\n lane,\n type: getRandomObstacleType(),\n distance: 0\n }];\n },\n // Two obstacles with one lane open - ensures player always has an escape route\n () => {\n const openLane = Math.floor(Math.random() * 3) - 1; // -1, 0, 1\n return [{\n lane: -1,\n type: getRandomObstacleType(),\n skip: openLane === -1\n }, {\n lane: 0,\n type: getRandomObstacleType(),\n skip: openLane === 0\n }, {\n lane: 1,\n type: getRandomObstacleType(),\n skip: openLane === 1\n }];\n },\n // Staggered pattern - forces player to switch lanes while always keeping one lane open\n () => {\n // Select two random lanes for first set of obstacles\n const lanes = [-1, 0, 1];\n const firstOpenLane = Math.floor(Math.random() * 3); // 0, 1, 2 (index in lanes array)\n const firstObstacleLanes = [...lanes];\n firstObstacleLanes.splice(firstOpenLane, 1); // Remove one lane to keep it open\n\n // Select different lane to keep open for second set\n const secondOpenLane = (firstOpenLane + 1 + Math.floor(Math.random() * 2)) % 3;\n const secondObstacleLanes = [...lanes];\n secondObstacleLanes.splice(secondOpenLane, 1); // Remove one lane to keep it open\n\n return [\n // First set of obstacles\n {\n lane: firstObstacleLanes[0],\n distance: 0,\n type: getRandomObstacleType()\n }, {\n lane: firstObstacleLanes[1],\n distance: 0,\n type: getRandomObstacleType()\n },\n // Second set of obstacles - increased vertical spacing\n {\n lane: secondObstacleLanes[0],\n distance: 20,\n // Increased from 12 to 20\n type: getRandomObstacleType()\n }, {\n lane: secondObstacleLanes[1],\n distance: 20,\n // Increased from 12 to 20\n type: getRandomObstacleType()\n }];\n },\n // Alternating lanes pattern - creates a zigzag path with one lane always open\n () => {\n return [\n // First set - left and right lanes blocked\n {\n lane: -1,\n distance: 0,\n type: getRandomObstacleType()\n }, {\n lane: 1,\n distance: 0,\n type: getRandomObstacleType()\n },\n // Second set - middle and right lanes blocked - increased vertical spacing\n {\n lane: 0,\n distance: 15,\n // Increased from 8 to 15\n type: getRandomObstacleType()\n }, {\n lane: 1,\n distance: 15,\n // Increased from 8 to 15\n type: getRandomObstacleType()\n },\n // Third set - left and middle lanes blocked - increased vertical spacing\n {\n lane: -1,\n distance: 30,\n // Increased from 16 to 30\n type: getRandomObstacleType()\n }, {\n lane: 0,\n distance: 30,\n // Increased from 16 to 30\n type: getRandomObstacleType()\n }];\n },\n // Jumpable obstacles in two lanes - forces jumping or lane switch\n () => {\n // Randomly select which two lanes will have sandcastles\n const lanes = [-1, 0, 1];\n const openLaneIndex = Math.floor(Math.random() * 3);\n const openLane = lanes[openLaneIndex];\n lanes.splice(openLaneIndex, 1);\n return [\n // Sandcastles are shorter, can be jumped over\n {\n lane: lanes[0],\n distance: 0,\n type: 'sandcastle'\n }, {\n lane: lanes[1],\n distance: 0,\n type: 'sandcastle'\n }];\n },\n // Narrow passage pattern - creates a corridor in one lane\n () => {\n const passageLane = Math.floor(Math.random() * 3) - 1; // -1, 0, 1\n const leftLane = passageLane === -1 ? 0 : -1;\n const rightLane = passageLane === 1 ? 0 : 1;\n return [\n // First set of obstacles\n {\n lane: leftLane,\n distance: 0,\n type: getRandomObstacleType()\n }, {\n lane: rightLane,\n distance: 0,\n type: getRandomObstacleType()\n },\n // Second set - increased vertical spacing\n {\n lane: leftLane,\n distance: 15,\n // Increased from 8 to 15\n type: getRandomObstacleType()\n }, {\n lane: rightLane,\n distance: 15,\n // Increased from 8 to 15\n type: getRandomObstacleType()\n },\n // Third set - increased vertical spacing\n {\n lane: leftLane,\n distance: 30,\n // Increased from 16 to 30\n type: getRandomObstacleType()\n }, {\n lane: rightLane,\n distance: 30,\n // Increased from 16 to 30\n type: getRandomObstacleType()\n }];\n },\n // Moving wall pattern - forces lane switches with always one lane open\n () => {\n return [\n // First set - left and middle blocked\n {\n lane: -1,\n distance: 0,\n type: getRandomObstacleType()\n }, {\n lane: 0,\n distance: 0,\n type: getRandomObstacleType()\n },\n // Second set - middle and right blocked - increased vertical spacing\n {\n lane: 0,\n distance: 15,\n // Increased from 8 to 15\n type: getRandomObstacleType()\n }, {\n lane: 1,\n distance: 15,\n // Increased from 8 to 15\n type: getRandomObstacleType()\n },\n // Third set - left and right blocked - increased vertical spacing\n {\n lane: -1,\n distance: 30,\n // Increased from 16 to 30\n type: getRandomObstacleType()\n }, {\n lane: 1,\n distance: 30,\n // Increased from 16 to 30\n type: getRandomObstacleType()\n }];\n }];\n\n // Generate new obstacles based on distance traveled - adjusted for more frequent and strategic obstacle placement\n const checkObstacleGeneration = setInterval(() => {\n // Generate obstacles regardless of gameStartedRef to ensure they appear from the beginning\n if (distanceTraveled - lastObstacleRef.current > 8) {\n // Increased from 5 to 8 for more vertical spacing\n // Reduced gap for more frequent obstacles\n // Select a random pattern with weighted probability - increase chance of blocking patterns as score increases\n const patternIndex = Math.min(Math.floor(Math.random() * obstaclePatterns.length * (1 + score / 1000)),\n // Increase difficulty with score\n obstaclePatterns.length - 1);\n const pattern = obstaclePatterns[patternIndex]();\n\n // Create obstacles based on pattern\n const newObstacles = pattern.filter(item => !item.skip).map(item => {\n const extraDistance = item.distance || 0;\n return {\n id: Date.now() + Math.random(),\n type: item.type,\n position: [item.lane * 8, 0.5, playerPosition - 30 - extraDistance],\n // Increased from 4 to 8 for wider lanes and from 20 to 30 for more vertical space\n lane: item.lane\n };\n });\n console.log(\"Spawning obstacles:\", newObstacles.length);\n\n // Add new obstacles to the game\n setObstacles(prev => [...prev, ...newObstacles]);\n\n // Increase obstacle frequency with game progress but ensure there are always obstacles\n const obstacleInterval = Math.max(8 - Math.floor(score / 500), 4); // Increased min gap from 2 to 4, base from 5 to 8\n lastObstacleRef.current = distanceTraveled;\n }\n }, 30); // Even faster obstacle generation check\n return () => {\n clearInterval(checkObstacleGeneration);\n };\n }, [gameOver, distanceTraveled, playerPosition, score]);\n\n // Enhanced coin generation with patterns\n useEffect(() => {\n if (gameOver) return;\n\n // Coin pattern generators\n const coinPatterns = [\n // Single coin\n () => [{\n lane: Math.floor(Math.random() * 3) - 1\n }],\n // Row of coins in one lane\n () => {\n const lane = Math.floor(Math.random() * 3) - 1;\n return [{\n lane,\n distance: 0\n }, {\n lane,\n distance: 8 // Increased from 5 to 8\n }, {\n lane,\n distance: 16 // Increased from 10 to 16\n }];\n },\n // Diagonal pattern\n () => {\n const startLane = Math.floor(Math.random() * 3) - 1;\n const direction = Math.random() > 0.5 ? 1 : -1;\n return [{\n lane: startLane,\n distance: 0\n }, {\n lane: Math.max(-1, Math.min(1, startLane + direction)),\n distance: 12 // Increased from 7 to 12\n }, {\n lane: Math.max(-1, Math.min(1, startLane + direction * 2)),\n distance: 24 // Increased from 14 to 24\n }];\n },\n // Cross pattern\n () => [{\n lane: 0,\n distance: 0\n }, {\n lane: -1,\n distance: 12 // Increased from 7 to 12\n }, {\n lane: 1,\n distance: 12 // Increased from 7 to 12\n }, {\n lane: 0,\n distance: 24 // Increased from 14 to 24\n }],\n // Zigzag pattern\n () => [{\n lane: -1,\n distance: 0\n }, {\n lane: 0,\n distance: 8 // Increased from 5 to 8\n }, {\n lane: 1,\n distance: 16 // Increased from 10 to 16\n }, {\n lane: 0,\n distance: 24 // Increased from 15 to 24\n }, {\n lane: -1,\n distance: 32 // Increased from 20 to 32\n }]];\n const checkCoinGeneration = setInterval(() => {\n // Only generate if game has started\n if (gameStartedRef.current && distanceTraveled - lastCoinRef.current > 12) {\n // Increased from 8 to 12\n // Select a random pattern\n const pattern = coinPatterns[Math.floor(Math.random() * coinPatterns.length)]();\n\n // Create coins based on pattern\n const newCoins = pattern.map(item => {\n const extraDistance = item.distance || 0;\n return {\n id: Date.now() + Math.random(),\n position: [item.lane * 8, 1, playerPosition - 50 - extraDistance],\n // Increased from 4 to 8 for wider lanes, from 40 to 50 for more space\n lane: item.lane\n };\n });\n\n // Add new coins to the game\n setCoins(prev => [...prev, ...newCoins]);\n lastCoinRef.current = distanceTraveled;\n }\n }, 200);\n return () => {\n clearInterval(checkCoinGeneration);\n };\n }, [gameOver, distanceTraveled, playerPosition]);\n\n // Collision detection with obstacles and coins\n useEffect(() => {\n if (gameOver) return;\n const collisionLoop = setInterval(() => {\n // Check obstacle collisions - improved collision detection with more accurate hitbox\n setObstacles(prev => {\n return prev.map(obstacle => {\n // Check for collision based on player's position\n const relativeZ = obstacle.position[2] - playerPosition;\n const collisionRange = 1.8; // Slightly tighter collision detection\n\n // Collision occurs when:\n // - Player is in same lane as obstacle\n // - Player is close enough on Z-axis\n // - Player is not jumping (for standard obstacles) OR obstacle is too tall (for specific types)\n const canJumpOver = obstacle.type === 'sandcastle'; // Sandcastles can be jumped over\n if (relativeZ > -collisionRange && relativeZ < collisionRange && obstacle.lane === lane && (!isJumping || isJumping && !canJumpOver)) {\n console.log(\"Game Over - Collision with \" + obstacle.type);\n setGameOver(true);\n }\n return obstacle;\n }).filter(obstacle => obstacle.position[2] - playerPosition < 40); // Increased from 30 to 40 to keep obstacles longer in memory\n });\n\n // Check coin collection\n setCoins(prev => {\n const updatedCoins = prev.map(coin => {\n // Check if player collected the coin\n const relativeZ = coin.position[2] - playerPosition;\n if (relativeZ > -2 && relativeZ < 2 && coin.lane === lane) {\n // Collect coin\n setCoinsCollected(prevCount => prevCount + 1);\n return {\n ...coin,\n collected: true\n };\n }\n return coin;\n });\n\n // Remove collected coins and coins far behind the player\n return updatedCoins.filter(coin => !coin.collected && coin.position[2] - playerPosition < 10);\n });\n }, 16);\n return () => {\n clearInterval(collisionLoop);\n };\n }, [gameOver, lane, isJumping, playerPosition]);\n\n // Handle collision\n const handleCollision = () => {\n if (!gameOver) {\n console.log(\"Game Over\");\n setGameOver(true);\n }\n };\n\n // Audio setup\n useEffect(() => {\n // Create audio element\n audioRef.current = new Audio('https://archive.org/download/chess-type-beat-loop-1/Chess-Type-Beat-Loop%20%281%29.mp3');\n audioRef.current.loop = true;\n audioRef.current.volume = 0.7;\n return () => {\n if (audioRef.current) {\n audioRef.current.pause();\n audioRef.current = null;\n }\n };\n }, []);\n\n // Handle audio play/pause based on game state\n useEffect(() => {\n if (gameStartedRef.current && !gameOver && audioRef.current) {\n if (!isMuted) {\n audioRef.current.play().catch(e => console.log('Audio playback prevented:', e));\n } else {\n audioRef.current.pause();\n }\n }\n if (gameOver && audioRef.current) {\n audioRef.current.pause();\n }\n }, [gameStartedRef.current, gameOver, isMuted]);\n\n // Periodic emoji effect activation\n useEffect(() => {\n if (gameStartedRef.current && !gameOver) {\n // Randomly trigger emoji burst effects\n const emojiInterval = setInterval(() => {\n if (Math.random() > 0.7) {\n // 30% chance to show emoji burst\n setShowEmojis(true);\n setTimeout(() => setShowEmojis(false), 2000); // Show for 2 seconds\n }\n }, 5000); // Check every 5 seconds\n\n return () => clearInterval(emojiInterval);\n }\n }, [gameStartedRef.current, gameOver]);\n\n // Toggle audio mute\n const toggleMute = () => {\n setIsMuted(!isMuted);\n };\n\n // Restart game\n const restartGame = () => {\n setGameOver(false);\n setScore(0);\n setLane(0);\n setObstacles([]);\n setCoins([]);\n setGameSpeed(0.03); // Reset to slower starting speed\n setPlayerPosition(0);\n setDistanceTraveled(0);\n setCoinsCollected(0);\n lastObstacleRef.current = 0;\n lastCoinRef.current = 0;\n gameStartedRef.current = true; // Start immediately\n\n // Restart audio\n if (audioRef.current && !isMuted) {\n audioRef.current.currentTime = 0;\n audioRef.current.play().catch(e => console.log('Audio playback prevented:', e));\n }\n };\n return

\n {/* Score and Game Over Display */}\n

\n 🏄\n Score: {score}\n

\n 🪙\n {coinsCollected}\n

\n \n {/* TikTok-style floating tags that appear randomly during gameplay */}\n {gameStartedRef.current && !gameOver &&

\n {Math.random() > 0.5 &&

\n 🔥 Fire gameplay!\n

}\n {Math.random() > 0.7 &&

\n 👑 King of the beach!\n

}\n

}\n \n {/* Audio controls */}\n

\n \n

\n \n {gameOver &&

Game Over!

Final Score: {score}

\n \n

}\n \n {!gameStartedRef.current && !gameOver &&

surf.fun

\n 🏄\n Dodge obstacles and ride the waves!\n 🌊\n

\n 🎮Controls:\n

← → Arrow Keys: Switch lanes

↑ Up Arrow: Jump

🔊 TikTok Beats Included! 🔊

\n \n

}\n

\n \n {/* TikTok-style animated elements */}\n {gameStartedRef.current && !gameOver &&

\n {score > 20 && Math.random() > 0.7 &&

\n {[\"SLAY! 💅\", \"ICONIC! ✨\", \"PERIODT! 💯\"][Math.floor(Math.random() * 3)]}\n

}\n {score > 50 && Math.random() > 0.8 &&

\n {[\"NO CAP FR FR 🧢\", \"BUSSIN! 🔥\", \"ON GOD! 🙏\"][Math.floor(Math.random() * 3)]}\n

}\n

}\n \n {/* 3D Game Canvas */}\n

;\n}\n\n// Main App\nexport default function App() {\n return

\n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"react-dom\":\"18.2.0\",\"three\":\"0.162.0\",\"@react-three/fiber\":\"8.15.19\",\"@react-three/drei\":\"9.99.7\",\"@react-three/cannon\":\"6.6.0\"}}","appFunctions",[],"token",{"_18":80,"_81":80,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95,"_70":71},"buidl","symbol","price",0.0009335,"marketcap",933523,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","https://buidl.eco/","twitter","https://x.com/buidldao_","devCount",320,"appCount",2183,"upstreamApp","isLordOfDev","analytics",[100,104,106,108,110,112,114,116,118,120,122,124,126,128,130,131],{"_101":102,"_103":58},"day","2025-08-14","runCount",{"_101":105,"_103":58},"2025-08-15",{"_101":107,"_103":58},"2025-08-16",{"_101":109,"_103":58},"2025-08-17",{"_101":111,"_103":58},"2025-08-18",{"_101":113,"_103":58},"2025-08-19",{"_101":115,"_103":58},"2025-08-20",{"_101":117,"_103":58},"2025-08-21",{"_101":119,"_103":58},"2025-08-22",{"_101":121,"_103":58},"2025-08-23",{"_101":123,"_103":58},"2025-08-24",{"_101":125,"_103":58},"2025-08-25",{"_101":127,"_103":58},"2025-08-26",{"_101":129,"_103":58},"2025-08-27",{"_101":102,"_103":41},{"_101":132,"_103":41},"2025-08-28","snapshot","ogImage","https://cdn.dev.fun/og/image/6f4d5b26cb07f7c405bb/06a059e5.webp","isDevbase","actionData","errors"]

say something