[{"_1":2,"_120":-5,"_121":-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,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_5":42,"_53":54,"_55":41,"_56":41,"_57":58,"_59":41,"_60":17,"_61":17,"_62":63,"_64":65,"_66":67,"_68":69,"_83":-5,"_84":17,"_85":86,"_117":29,"_118":119},"id","1cfd656735533c96390e","isMyApp",false,"name","rocketrumble","description","Boost, flip, and score in this gravity-defying car soccer extravaganza! Watch as your turbocharged vehicles defy physics while battling for supremacy in the most chaotic sports arena ever rendered in a browser.","isLive",true,"tags",[26,27],"🔥","💰","cover","https://cdn.dev.fun/snapshot/1cfd656735533c96390e/42375_0f564698.webp","cdnUrl","https://cdn.dev.fun/app/1cfd656735533c96390e/42375","createdAt",["D",1743692234103],"updatedAt",["D",1743699121739],"lastCommitId",["B","42375"],"tier",1,"credits",0,{"_14":43,"_44":45,"_46":-5,"_47":45,"_48":49,"_50":-5,"_51":52},"84e72732-6e96-4cff-a3a8-4af6b296eefe","uniqueId","9XBpZcxL9FLDDP4k5jUJbh4rq7szXAcJLM8fxE4qXhtv","username","solanaWallet","displayName","9XB...htv","bio","avatar","/avatar.svg","commitCount",13,"forkCount","likeCount","runsCount",7,"visitorCount","isArchived","isRenamed","contractAddress","7LcjDC8Xeyen4mozEhE4Cg7xW99wYnLmi3MYtnErHWGC","code","import { useRef, useState, useEffect, Suspense } from 'react';\nimport { Canvas, useFrame, useThree } from '@react-three/fiber';\nimport { Physics, useBox, usePlane, useSphere } from '@react-three/cannon';\nimport { Environment, PerspectiveCamera, Trail, Stars, Cloud, Html, Sparkles, OrbitControls } from '@react-three/drei';\nimport { Vector3 } from 'three';\nimport { motion } from 'framer-motion';\nconst BOOST_FORCE = 120;\nconst MOVE_FORCE = 80;\nconst JUMP_FORCE = 50;\nconst FLIP_TORQUE = 30;\nconst GRAVITY = -30;\nconst MAX_BOOST = 100;\nconst BOOST_REGEN = 0.5;\nconst BALL_DENSITY = 1;\nconst CAR_DENSITY = 5;\nconst useGameState = () => {\n const [blueScore, setBlueScore] = useState(0);\n const [orangeScore, setOrangeScore] = useState(0);\n const [timer, setTimer] = useState(180);\n const [gameState, setGameState] = useState('pregame');\n const [countdown, setCountdown] = useState(3);\n const [winner, setWinner] = useState(null);\n const [resetPositions, setResetPositions] = useState(false);\n const startGame = () => {\n setGameState('countdown');\n setCountdown(3);\n setResetPositions(true);\n setTimeout(() => setResetPositions(false), 100);\n const countInterval = setInterval(() => {\n setCountdown(prev => {\n if (prev <= 1) {\n clearInterval(countInterval);\n setGameState('playing');\n return 0;\n }\n return prev - 1;\n });\n }, 1000);\n };\n const goalScored = team => {\n setGameState('goal');\n if (team === 'blue') setBlueScore(prev => prev + 1);else setOrangeScore(prev => prev + 1);\n setResetPositions(true);\n setTimeout(() => setResetPositions(false), 100);\n setTimeout(() => {\n setGameState('countdown');\n setCountdown(3);\n const countInterval = setInterval(() => {\n setCountdown(prev => {\n if (prev <= 1) {\n clearInterval(countInterval);\n setGameState('playing');\n return 0;\n }\n return prev - 1;\n });\n }, 1000);\n }, 3000);\n };\n useEffect(() => {\n if (gameState === 'playing') {\n const interval = setInterval(() => {\n setTimer(prev => {\n if (prev <= 0) {\n clearInterval(interval);\n setGameState('postgame');\n setWinner(blueScore > orangeScore ? 'blue' : blueScore < orangeScore ? 'orange' : 'tie');\n return 0;\n }\n return prev - 1;\n });\n }, 1000);\n return () => clearInterval(interval);\n }\n }, [gameState, blueScore, orangeScore]);\n const formatTime = seconds => {\n const mins = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return `${mins}:${secs < 10 ? '0' : ''}${secs}`;\n };\n return {\n blueScore,\n orangeScore,\n timer: formatTime(timer),\n gameState,\n countdown,\n winner,\n goalScored,\n startGame,\n resetPositions\n };\n};\nconst CameraController = ({\n target\n}) => {\n const {\n camera\n } = useThree();\n const targetRef = useRef(target);\n const initialPositionSet = useRef(false);\n useEffect(() => {\n targetRef.current = target;\n }, [target]);\n useFrame(() => {\n if (!initialPositionSet.current) {\n camera.position.set(0, 20, 30);\n camera.lookAt(0, 0, 0);\n initialPositionSet.current = true;\n }\n if (targetRef.current) {\n const offset = new Vector3(0, 10, -15);\n const position = new Vector3().copy(targetRef.current.position).add(offset);\n camera.position.lerp(position, 0.05);\n camera.lookAt(targetRef.current.position);\n }\n });\n return null;\n};\nconst Ground = () => {\n const [ref] = usePlane(() => ({\n rotation: [-Math.PI / 2, 0, 0],\n position: [0, 0, 0],\n material: {\n friction: 0.1,\n restitution: 0.7\n },\n name: 'ground'\n }));\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};\nconst Walls = () => {\n const [northRef] = useBox(() => ({\n args: [90, 5, 2],\n position: [0, 2.5, 22.5],\n type: 'static',\n material: {\n friction: 0.1,\n restitution: 0.7\n }\n }));\n const [southRef] = useBox(() => ({\n args: [90, 5, 2],\n position: [0, 2.5, -22.5],\n type: 'static',\n material: {\n friction: 0.1,\n restitution: 0.7\n }\n }));\n const [eastTopRef] = useBox(() => ({\n args: [2, 5, 15],\n position: [45, 2.5, -15],\n type: 'static',\n material: {\n friction: 0.1,\n restitution: 0.7\n }\n }));\n const [eastBottomRef] = useBox(() => ({\n args: [2, 5, 15],\n position: [45, 2.5, 15],\n type: 'static',\n material: {\n friction: 0.1,\n restitution: 0.7\n }\n }));\n const [westTopRef] = useBox(() => ({\n args: [2, 5, 15],\n position: [-45, 2.5, -15],\n type: 'static',\n material: {\n friction: 0.1,\n restitution: 0.7\n }\n }));\n const [westBottomRef] = useBox(() => ({\n args: [2, 5, 15],\n position: [-45, 2.5, 15],\n type: 'static',\n material: {\n friction: 0.1,\n restitution: 0.7\n }\n }));\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};\nconst Goals = ({\n onGoalScored\n}) => {\n const [blueGoalRef] = useBox(() => ({\n args: [3, 10, 10],\n position: [-46.5, 5, 0],\n type: 'static',\n isTrigger: true,\n onCollideBegin: e => {\n if (e.body.name === 'ball') {\n onGoalScored('orange');\n }\n }\n }));\n const [orangeGoalRef] = useBox(() => ({\n args: [3, 10, 10],\n position: [46.5, 5, 0],\n type: 'static',\n isTrigger: true,\n onCollideBegin: e => {\n if (e.body.name === 'ball') {\n onGoalScored('blue');\n }\n }\n }));\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 \n ;\n};\nconst BoostPad = ({\n position,\n onCollect\n}) => {\n const [padRef] = useBox(() => ({\n args: [2, 0.5, 2],\n position: [...position, 0.25],\n type: 'static',\n isTrigger: true,\n onCollideBegin: e => {\n if (e.body && (e.body.name === \"car\" || e.body.name === \"ai-car\")) {\n onCollect(e.body.name, position);\n }\n }\n }));\n return \n \n \n \n \n ;\n};\nconst Car = ({\n controls,\n playerColor = \"#3498db\",\n isAI = false,\n ballRef,\n resetPosition,\n name = \"car\"\n}) => {\n const startPosition = playerColor === \"#3498db\" ? [-10, 3, 0] : [10, 3, 0];\n const [carRef, api] = useBox(() => ({\n args: [2.5, 1.5, 4],\n mass: CAR_DENSITY,\n position: startPosition,\n angularDamping: 0.5,\n linearDamping: 0.2,\n material: {\n friction: 0.1,\n restitution: 0.3\n },\n collisionFilters: {\n collisionFilterGroup: 1,\n collisionFilterMask: 1\n },\n collisionEvents: true,\n name: isAI ? \"ai-car\" : \"car\"\n }));\n const [boost, setBoost] = useState(MAX_BOOST);\n const [isOnGround, setIsOnGround] = useState(false);\n const [isJumping, setIsJumping] = useState(false);\n const [isFlipping, setIsFlipping] = useState(false);\n const [showBoost, setShowBoost] = useState(false);\n const [activeKeys, setActiveKeys] = useState({});\n const [carPosition, setCarPosition] = useState(startPosition);\n const [carVelocity, setCarVelocity] = useState([0, 0, 0]);\n const trailRef1 = useRef();\n const trailRef2 = useRef();\n useEffect(() => {\n if (resetPosition) {\n api.position.set(...startPosition);\n api.velocity.set(0, 0, 0);\n api.angularVelocity.set(0, 0, 0);\n api.rotation.set(0, 0, 0);\n }\n }, [resetPosition, api, startPosition]);\n useEffect(() => {\n const handleKeyDown = e => {\n e.preventDefault();\n const key = e.key.toLowerCase();\n if (key === 'arrowup' || key === 'arrowdown' || key === 'arrowleft' || key === 'arrowright') {\n setActiveKeys(prev => ({\n ...prev,\n [key]: true\n }));\n } else {\n setActiveKeys(prev => ({\n ...prev,\n [key]: true\n }));\n }\n };\n const handleKeyUp = e => {\n const key = e.key.toLowerCase();\n if (key === 'arrowup' || key === 'arrowdown' || key === 'arrowleft' || key === 'arrowright') {\n setActiveKeys(prev => ({\n ...prev,\n [key]: false\n }));\n } else {\n setActiveKeys(prev => ({\n ...prev,\n [key]: false\n }));\n }\n };\n window.addEventListener('keydown', handleKeyDown, {\n capture: true\n });\n window.addEventListener('keyup', handleKeyUp, {\n capture: true\n });\n window.focus();\n return () => {\n window.removeEventListener('keydown', handleKeyDown, {\n capture: true\n });\n window.removeEventListener('keyup', handleKeyUp, {\n capture: true\n });\n };\n }, []);\n useEffect(() => {\n let unsubscribeCollision;\n if (api.collisionEvents) {\n unsubscribeCollision = api.collisionEvents.subscribe(e => {\n if (e.type === 'collision') {\n const contactNormal = e.contact.ni;\n if (Math.abs(contactNormal[1]) > 0.7) {\n setIsOnGround(true);\n setTimeout(() => {\n setIsJumping(false);\n }, 100);\n }\n }\n });\n }\n return () => {\n if (unsubscribeCollision) unsubscribeCollision();\n };\n }, [api]);\n useEffect(() => {\n let unsubPosition, unsubVelocity;\n if (api.position) {\n unsubPosition = api.position.subscribe(p => {\n setCarPosition(p);\n });\n }\n if (api.velocity) {\n unsubVelocity = api.velocity.subscribe(v => {\n setCarVelocity(v);\n });\n }\n return () => {\n if (unsubPosition) unsubPosition();\n if (unsubVelocity) unsubVelocity();\n };\n }, [api]);\n useFrame((_, delta) => {\n api.applyLocalForce([0, GRAVITY, 0], [0, 0, 0]);\n if (isOnGround) {\n api.applyLocalForce([0, -10, 0], [0, 0, 0]);\n }\n if (isAI && ballRef && ballRef.current) {\n const ballPosition = ballRef.current.position;\n const direction = [ballPosition.x - carPosition[0], 0, ballPosition.z - carPosition[2]];\n const length = Math.sqrt(direction[0] * direction[0] + direction[2] * direction[2]);\n if (length > 0) {\n direction[0] /= length;\n direction[2] /= length;\n }\n api.applyLocalForce([direction[0] * MOVE_FORCE, 0, direction[2] * MOVE_FORCE], [0, 0, 0]);\n if (length < 10 && Math.random() < 0.01 && isOnGround) {\n api.applyLocalForce([0, JUMP_FORCE, 0], [0, 0, 0]);\n setIsOnGround(false);\n }\n if (length > 15 && boost > 20 && Math.random() < 0.05) {\n api.applyLocalForce([direction[0] * BOOST_FORCE, 0, direction[2] * BOOST_FORCE], [0, 0, 0]);\n setBoost(prev => Math.max(0, prev - 5));\n setShowBoost(true);\n } else {\n setShowBoost(false);\n setBoost(prev => Math.min(MAX_BOOST, prev + BOOST_REGEN * delta));\n }\n }\n if (controls) {\n const {\n w,\n a,\n s,\n d,\n shift,\n ' ': space,\n arrowup,\n arrowdown,\n arrowleft,\n arrowright\n } = activeKeys;\n const forward = w || arrowup;\n const backward = s || arrowdown;\n const left = a || arrowleft;\n const right = d || arrowright;\n if (forward) {\n api.applyLocalForce([0, 0, -MOVE_FORCE], [0, 0, 0]);\n api.applyTorque([0, 0, -MOVE_FORCE * 0.1]);\n }\n if (backward) {\n api.applyLocalForce([0, 0, MOVE_FORCE], [0, 0, 0]);\n api.applyTorque([0, 0, MOVE_FORCE * 0.1]);\n }\n if (left) {\n api.applyLocalForce([-MOVE_FORCE, 0, 0], [0, 0, 0]);\n api.applyTorque([MOVE_FORCE * 0.1, 0, 0]);\n }\n if (right) {\n api.applyLocalForce([MOVE_FORCE, 0, 0], [0, 0, 0]);\n api.applyTorque([-MOVE_FORCE * 0.1, 0, 0]);\n }\n if (shift && boost > 0) {\n const direction = forward ? -1 : backward ? 1 : 0;\n api.applyLocalForce([0, 0, direction * BOOST_FORCE], [0, 0, 0]);\n setBoost(prev => Math.max(0, prev - 1));\n setShowBoost(true);\n } else {\n setShowBoost(false);\n setBoost(prev => Math.min(MAX_BOOST, prev + BOOST_REGEN * delta));\n }\n if ((space || arrowup) && isOnGround && !isJumping) {\n api.applyLocalForce([0, JUMP_FORCE, 0], [0, 0, 0]);\n api.velocity.set(carVelocity[0], carVelocity[1] + 10, carVelocity[2]);\n setIsOnGround(false);\n setIsJumping(true);\n setTimeout(() => {\n setIsJumping(false);\n }, 300);\n }\n if (space && isJumping && !isOnGround && !isFlipping) {\n const direction = [(left ? -1 : 0) + (right ? 1 : 0), 0, (forward ? -1 : 0) + (backward ? 1 : 0)];\n if (direction[0] !== 0 || direction[2] !== 0) {\n api.applyLocalTorque([direction[2] * FLIP_TORQUE, 0, -direction[0] * FLIP_TORQUE]);\n api.applyLocalForce([0, JUMP_FORCE / 2, 0], [0, 0, 0]);\n setIsFlipping(true);\n setTimeout(() => {\n setIsFlipping(false);\n }, 1000);\n }\n }\n }\n });\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 {controls && \n

20 ? 'linear-gradient(to right, #3498db, #f39c12)' : '#e74c3c'\n }}>

\n \n

\n {activeKeys.w || activeKeys.arrowup ?

↑

}\n

\n {activeKeys.a || activeKeys.arrowleft ?

←

}\n {activeKeys.s || activeKeys.arrowdown ?

↓

}\n {activeKeys.d || activeKeys.arrowright ?

→

}\n

\n {activeKeys[' '] ?

JUMP

}\n {activeKeys.shift ?

BOOST

}\n

\n \n

Position: [{carPosition.map(v => v.toFixed(1)).join(', ')}]

Velocity: [{carVelocity.map(v => v.toFixed(1)).join(', ')}]

OnGround: {isOnGround ? 'Yes' : 'No'}

Keys: {Object.entries(activeKeys).filter(([_, v]) => v).map(([k]) => k).join(', ')}

\n }\n \n {}\n {showBoost && <>\n width}>\n \n \n \n \n \n \n width}>\n \n \n \n \n \n \n \n }\n ;\n};\nconst Ball = ({\n resetPosition\n}) => {\n const [ballRef, api] = useSphere(() => ({\n args: [1.5],\n mass: BALL_DENSITY,\n position: [0, 5, 0],\n linearDamping: 0.2,\n material: {\n friction: 0.1,\n restitution: 0.8\n },\n name: 'ball'\n }));\n useEffect(() => {\n if (resetPosition) {\n api.position.set(0, 5, 0);\n api.velocity.set(0, 0, 0);\n api.angularVelocity.set(0, 0, 0);\n }\n }, [resetPosition, api]);\n return \n width}>\n \n \n \n \n \n \n ;\n};\nconst PreGameScreen = ({\n onStart\n}) => {\n return \n

ROCKET RUMBLE

Boost, flip, and score!

\n \n START GAME\n \n

CONTROLS

W, A, S, D or Arrow Keys — Move

SHIFT — Boost (hold for speed)

SPACE or UP — Jump

SPACE + Direction — Flip (in air)

Click on game area first if controls don't respond!

\n ;\n};\nconst CountdownScreen = ({\n count\n}) => {\n return \n

{count}

\n ;\n};\nconst GoalScreen = ({\n team\n}) => {\n return \n

GOAL!

{team.toUpperCase()} TEAM SCORES

\n ;\n};\nconst PostGameScreen = ({\n winner,\n blueScore,\n orangeScore,\n onRestart\n}) => {\n return \n

GAME OVER

\n {blueScore}\n -\n {orangeScore}\n

\n {winner !== 'tie' ?

\n {winner.toUpperCase()} TEAM WINS!\n

IT'S A TIE!

}\n \n PLAY AGAIN\n \n

\n ;\n};\nconst Scoreboard = ({\n blueScore,\n orangeScore,\n timer\n}) => {\n return \n

{blueScore}

{timer}

{orangeScore}

\n ;\n};\nexport default function App() {\n const ballRef = useRef();\n const carRef = useRef();\n const aiCarRef = useRef();\n const [, setSceneLoaded] = useState(false);\n const [boostPads,,] = useState([[-20, 0, 10], [20, 0, 10], [-20, 0, -10], [20, 0, -10], [0, 0, 15], [0, 0, -15], [-30, 0, 0], [30, 0, 0]]);\n const [visiblePads, setVisiblePads] = useState(new Array(8).fill(true));\n const {\n blueScore,\n orangeScore,\n timer,\n gameState,\n countdown,\n winner,\n goalScored,\n startGame,\n resetPositions\n } = useGameState();\n const handleGoalScored = team => {\n goalScored(team);\n };\n const handleBoostCollected = (carName, position) => {\n const padIndex = boostPads.findIndex(pad => pad[0] === position[0] && pad[1] === position[1] && pad[2] === position[2]);\n if (padIndex !== -1) {\n setVisiblePads(prev => {\n const newPads = [...prev];\n newPads[padIndex] = false;\n return newPads;\n });\n setTimeout(() => {\n setVisiblePads(prev => {\n const newPads = [...prev];\n newPads[padIndex] = true;\n return newPads;\n });\n }, 5000);\n }\n };\n useEffect(() => {\n const loadTimer = setTimeout(() => {\n setSceneLoaded(true);\n }, 1000);\n return () => clearTimeout(loadTimer);\n }, []);\n return

\n \n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"@react-three/fiber\":\"8.15.19\",\"@react-three/drei\":\"9.99.7\",\"three\":\"0.162.0\",\"lucide-react\":\"0.441.0\",\"react-dom\":\"18.2.0\",\"@react-three/cannon\":\"^6.6.0\"}}","token",{"_18":70,"_71":72,"_73":41,"_74":75,"_76":77,"_78":79,"_80":79,"_81":39,"_82":39,"_62":63},"Flavinha's Coin","symbol","EACH","price","marketcap",3322.36719475,"image","https://pump.mypinata.cloud/ipfs/QmamdzbbRFuRLKhmiYpbiNasTgpvjCJk2WKxiateSoCJNg?img-width=256&img-dpr=2","website","","twitter","devCount","appCount","upstreamApp","isLordOfDev","analytics",[87,91,93,95,97,99,101,103,105,107,109,111,113,115],{"_88":89,"_90":41},"day","2025-03-21","runCount",{"_88":92,"_90":41},"2025-03-22",{"_88":94,"_90":41},"2025-03-23",{"_88":96,"_90":41},"2025-03-24",{"_88":98,"_90":41},"2025-03-25",{"_88":100,"_90":41},"2025-03-26",{"_88":102,"_90":41},"2025-03-27",{"_88":104,"_90":41},"2025-03-28",{"_88":106,"_90":41},"2025-03-29",{"_88":108,"_90":41},"2025-03-30",{"_88":110,"_90":41},"2025-03-31",{"_88":112,"_90":41},"2025-04-01",{"_88":114,"_90":41},"2025-04-02",{"_88":116,"_90":58},"2025-04-03","snapshot","ogImage","https://cdn.dev.fun/og/image/1cfd656735533c96390e/cf2bfbf7.webp","actionData","errors"]