[{"_1":2,"_104":-5,"_105":-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":17,"_23":24,"_26":27,"_28":-5,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_5":39,"_51":52,"_53":54,"_55":54,"_56":57,"_58":54,"_59":17,"_60":17,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":17,"_69":70,"_101":27,"_102":103},"id","695bde2e5a4dec9233fa","isMyApp",false,"name","sniperscape","description","Dominate the urban battlefield in this browser-based 3D sniper showdown where every rooftop becomes your deadly perch and every window your perfect vantage point. Lock, load, and watch your opponents ragdoll dramatically from impossible distances!","isLive","tags",[25],"🔥","cover","https://cdn.dev.fun/snapshot/695bde2e5a4dec9233fa/42400_d63f69e2.webp","cdnUrl","createdAt",["D",1743691333605],"updatedAt",["D",1743711945204],"lastCommitId",["B","42400"],"tier",1,"credits",87,{"_14":40,"_41":42,"_43":42,"_44":45,"_46":42,"_47":48,"_49":50},"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",34,"forkCount",0,"likeCount","runsCount",10,"visitorCount","isArchived","isRenamed","contractAddress","code","import React, { useRef, useState, useEffect, Suspense, useMemo } from \"react\";\nimport { Canvas, useFrame, useThree } from \"@react-three/fiber\";\nimport { Sky, PointerLockControls, Text, Environment, PerspectiveCamera, Billboard, Html, CameraShake } from \"@react-three/drei\";\nimport { Physics, useBox, usePlane } from \"@react-three/cannon\";\nimport { EffectComposer, Bloom, ChromaticAberration, Noise, Vignette } from \"@react-three/postprocessing\";\nimport { BlendFunction } from \"postprocessing\";\nimport * as THREE from \"three\";\nimport { Crosshair } from 'lucide-react';\nconst PLAYER_HEIGHT = 1.8;\nconst PLAYER_RADIUS = 0.4;\nconst GRAVITY = -9.81;\nconst JUMP_FORCE = 4;\nconst MOVE_SPEED = 2.2;\nconst SPRINT_SPEED = 3.5;\nconst ADS_FOV = 20;\nconst NORMAL_FOV = 75;\nconst CROUCH_HEIGHT = 1.0;\nconst RELOAD_TIME = 2500;\nconst MAX_AMMO = 5;\nconst MAX_RESERVE_AMMO = 30;\nconst TEAMS = [\"RED\", \"BLUE\"];\nconst INITIAL_SPAWN_POINTS = [[-22, 1, -22], [22, 1, 22], [-22, 1, 22], [22, 1, -22], [-18, 10, -18], [18, 10, 18], [-18, 10, 18], [18, 10, -18], [-15, 1, 0], [15, 1, 0], [0, 1, 15], [0, 1, -15]];\nconst GameState = {\n LOBBY: \"LOBBY\",\n PLAYING: \"PLAYING\",\n GAME_OVER: \"GAME_OVER\"\n};\nconst PlayerState = {\n IDLE: \"IDLE\",\n RUNNING: \"RUNNING\",\n SPRINTING: \"SPRINTING\",\n CROUCHING: \"CROUCHING\",\n AIMING: \"AIMING\",\n SHOOTING: \"SHOOTING\",\n RELOADING: \"RELOADING\",\n DEAD: \"DEAD\"\n};\nconst GameContext = React.createContext();\nfunction PlayerModel({\n position,\n rotation,\n playerId,\n state,\n team,\n isCurrentPlayer,\n isDead = false\n}) {\n const modelRef = useRef();\n const [headshot] = useState(false);\n const playerMaterial = new THREE.MeshStandardMaterial({\n color: team === \"RED\" ? \"#ff4040\" : \"#4040ff\",\n roughness: 0.7,\n metalness: 0.3\n });\n useEffect(() => {\n if (isDead) {\n if (modelRef.current) {\n modelRef.current.rotation.x = Math.PI / 2;\n }\n }\n }, [isDead]);\n const teamColor = team === \"RED\" ? \"#ff4040\" : \"#4040ff\";\n return \n \n {}\n \n \n \n \n {}\n \n \n \n \n {}\n \n \n \n \n {}\n {!isCurrentPlayer && \n \n \n }\n \n {!isCurrentPlayer && <>\n \n \n {playerId}\n \n {}\n {headshot && isDead && \n {Array(15).fill().map((_, i) => \n \n \n )}\n }\n \n \n

\n \n }\n ;\n}\nfunction WeaponModel({\n isAiming,\n isShooting,\n isReloading\n}) {\n const weaponRef = useRef();\n const scopeRef = useRef();\n const torchRef = useRef();\n const spotLightRef = useRef();\n const {\n playerState\n } = React.useContext(GameContext);\n useEffect(() => {\n if (isReloading) {\n if (weaponRef.current) {\n weaponRef.current.position.y = -0.4;\n setTimeout(() => {\n if (weaponRef.current) {\n weaponRef.current.position.y = -0.3;\n }\n }, 1000);\n }\n return;\n }\n if (isShooting) {\n if (weaponRef.current) {\n weaponRef.current.position.z += 0.05;\n weaponRef.current.rotation.x -= 0.05;\n setTimeout(() => {\n if (weaponRef.current) {\n weaponRef.current.position.z = -0.5;\n weaponRef.current.rotation.x = 0;\n }\n }, 100);\n }\n return;\n }\n if (weaponRef.current) {\n if (isAiming) {\n weaponRef.current.position.x = 0;\n weaponRef.current.position.y = -0.2;\n } else {\n weaponRef.current.position.x = 0.3;\n weaponRef.current.position.y = -0.3;\n }\n }\n }, [isAiming, isShooting, isReloading]);\n useFrame((state, delta) => {\n if (isAiming && weaponRef.current) {\n if (!playerState?.isHoldingBreath) {\n weaponRef.current.position.y += Math.sin(Date.now() * 0.002) * 0.0003;\n weaponRef.current.rotation.z += Math.sin(Date.now() * 0.001) * 0.0001;\n }\n }\n if (spotLightRef.current) {\n const flickerIntensity = 1.2;\n const baseIntensity = 8.0;\n spotLightRef.current.intensity = baseIntensity + Math.sin(Date.now() * 0.01) * flickerIntensity;\n const cameraDirection = new THREE.Vector3(0, 0, -1);\n cameraDirection.applyQuaternion(state.camera.quaternion);\n cameraDirection.multiplyScalar(10);\n if (isAiming) {\n spotLightRef.current.position.y += Math.sin(Date.now() * 0.003) * 0.01;\n } else {\n spotLightRef.current.position.y += Math.sin(Date.now() * 0.006) * 0.03;\n spotLightRef.current.position.x += Math.sin(Date.now() * 0.004) * 0.02;\n }\n const targetPos = new THREE.Vector3();\n targetPos.copy(state.camera.position);\n targetPos.add(cameraDirection);\n spotLightRef.current.target.position.copy(targetPos);\n spotLightRef.current.target.updateMatrixWorld();\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 {}\n \n \n {isAiming && \n {}\n \n \n \n \n {}\n \n \n \n \n {}\n \n \n \n \n {}\n {[0, Math.PI / 2, Math.PI, Math.PI * 3 / 2].map((rotation, i) => \n \n \n )}\n }\n ;\n}\nfunction Building({\n position,\n size,\n rotation = [0, 0, 0],\n floors = 3,\n windows = true,\n damaged = false,\n type = \"modern\"\n}) {\n const [width, height, depth] = size;\n const buildingRef = useRef();\n const getColorByType = type => {\n switch (type) {\n case \"modern\":\n return damaged ? \"#5a5a5a\" : \"#8a8a8a\";\n case \"industrial\":\n return damaged ? \"#4a4036\" : \"#6a5a46\";\n case \"residential\":\n return damaged ? \"#794e4e\" : \"#966b6b\";\n default:\n return \"#7a7a7a\";\n }\n };\n const getWindowType = type => {\n switch (type) {\n case \"modern\":\n return damaged ? \"broken\" : \"large\";\n case \"industrial\":\n return damaged ? \"broken\" : \"small\";\n case \"residential\":\n return damaged ? \"broken\" : \"medium\";\n default:\n return \"medium\";\n }\n };\n const buildingMaterial = new THREE.MeshStandardMaterial({\n color: getColorByType(type),\n roughness: 0.8,\n metalness: 0.2,\n flatShading: damaged\n });\n const roofMaterial = new THREE.MeshStandardMaterial({\n color: \"#3a3a3a\",\n roughness: 0.9,\n metalness: 0.1\n });\n const windowMaterial = new THREE.MeshPhysicalMaterial({\n color: \"#235789\",\n transparent: true,\n transmission: 0.5,\n roughness: 0.05,\n clearcoat: 1.0,\n clearcoatRoughness: 0.1,\n metalness: 0.9,\n reflectivity: 1\n });\n const brokenWindowMaterial = new THREE.MeshPhysicalMaterial({\n color: \"#111111\",\n transparent: true,\n transmission: 0.1,\n roughness: 0.9,\n clearcoat: 0.1,\n metalness: 0.1,\n reflectivity: 0.2\n });\n const [hasRoofAccess] = useState(Math.random() > 0.3);\n const windowType = getWindowType(type);\n const windowConfig = {\n size: windowType === \"large\" ? [1.5, 2] : windowType === \"medium\" ? [1.2, 1.6] : windowType === \"small\" ? [0.8, 1.2] : [1, 1.5],\n spacing: windowType === \"large\" ? 3 : windowType === \"medium\" ? 2.5 : windowType === \"small\" ? 2 : 2,\n offset: windowType === \"large\" ? 2 : windowType === \"medium\" ? 1.8 : windowType === \"small\" ? 1.5 : 2,\n material: windowType === \"broken\" ? brokenWindowMaterial : windowMaterial\n };\n useBox(() => ({\n args: size,\n position,\n rotation,\n type: \"static\",\n mass: 0\n }));\n const roofAccessPosition = useMemo(() => {\n return [width / 4 * (Math.random() > 0.5 ? 1 : -1), height / 2, depth / 4 * (Math.random() > 0.5 ? 1 : -1)];\n }, [width, height, depth]);\n const [damagePoints] = useState(() => {\n if (!damaged) return [];\n return Array(Math.floor(Math.random() * 5) + 3).fill().map(() => ({\n position: [(Math.random() - 0.5) * width * 0.8, (Math.random() - 0.5) * height * 0.8, depth / 2 * (Math.random() > 0.5 ? 1.01 : -1.01)],\n rotation: [0, 0, Math.random() * Math.PI * 2],\n scale: Math.random() * 1.2 + 0.5\n }));\n });\n const sniperPositions = useMemo(() => {\n if (floors < 2) return [];\n return Array(Math.floor(Math.random() * 2) + 1).fill().map(() => {\n const floor = Math.floor(Math.random() * (floors - 1)) + 1;\n const side = Math.floor(Math.random() * 4);\n const offset = Math.random() - 0.5;\n let pos, rot;\n switch (side) {\n case 0:\n pos = [offset * width * 0.6, floor * height / floors - height / 2 + height / (floors * 2), depth / 2];\n rot = [0, 0, 0];\n break;\n case 1:\n pos = [width / 2, floor * height / floors - height / 2 + height / (floors * 2), offset * depth * 0.6];\n rot = [0, Math.PI / 2, 0];\n break;\n case 2:\n pos = [offset * width * 0.6, floor * height / floors - height / 2 + height / (floors * 2), -depth / 2];\n rot = [0, Math.PI, 0];\n break;\n case 3:\n pos = [-width / 2, floor * height / floors - height / 2 + height / (floors * 2), offset * depth * 0.6];\n rot = [0, -Math.PI / 2, 0];\n break;\n }\n return {\n position: pos,\n rotation: rot,\n floor\n };\n });\n }, [floors, width, height, depth]);\n return \n \n \n \n \n {}\n \n \n \n \n {}\n {hasRoofAccess && \n \n \n \n \n \n \n \n \n {}\n \n \n \n \n }\n {}\n {damaged && damagePoints.map((point, i) => \n \n \n \n \n {}\n {Array(3).fill().map((_, j) => \n \n \n )}\n )}\n {}\n {windows && Array(floors).fill().map((_, floor) => \n {}\n {Array(Math.ceil(width / windowConfig.spacing)).fill().map((_, i) => \n \n \n \n \n \n \n \n \n )}\n {}\n {Array(Math.ceil(depth / windowConfig.spacing)).fill().map((_, i) => \n \n \n \n \n \n \n \n \n )}\n )}\n {}\n {sniperPositions.map((pos, i) => \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}\nfunction Prop({\n position,\n type = \"crate\",\n rotation = [0, 0, 0],\n destructible = false\n}) {\n const propRef = useRef();\n const crateMaterial = new THREE.MeshStandardMaterial({\n color: \"#a67c52\",\n roughness: 0.8,\n metalness: 0.1\n });\n const metalMaterial = new THREE.MeshStandardMaterial({\n color: \"#656565\",\n roughness: 0.7,\n metalness: 0.5\n });\n const concreteMaterial = new THREE.MeshStandardMaterial({\n color: \"#909090\",\n roughness: 0.9,\n metalness: 0\n });\n const getPhysicsProps = () => {\n switch (type) {\n case \"crate\":\n return {\n args: [1, 1, 1],\n mass: 0\n };\n case \"barrel\":\n return {\n args: [0.6, 1, 0.6],\n mass: 0\n };\n case \"concrete_barrier\":\n return {\n args: [2, 1, 0.5],\n mass: 0\n };\n case \"sandbags\":\n return {\n args: [2, 0.8, 1],\n mass: 0\n };\n case \"car_destroyed\":\n return {\n args: [4, 1.5, 2],\n mass: 0\n };\n default:\n return {\n args: [1, 1, 1],\n mass: 0\n };\n }\n };\n const {\n args,\n mass\n } = getPhysicsProps();\n useBox(() => ({\n args,\n position,\n rotation,\n mass,\n type: \"static\",\n collisionFilterGroup: 1,\n collisionFilterMask: 1\n }));\n const getScale = () => {\n switch (type) {\n case \"crate\":\n case \"barrel\":\n return [1, 1, 1];\n case \"concrete_barrier\":\n return [1.5, 1.5, 1.5];\n case \"sandbags\":\n return [1.2, 1.2, 1.2];\n case \"car_destroyed\":\n return [1.8, 1.8, 1.8];\n default:\n return [1, 1, 1];\n }\n };\n const renderProp = () => {\n switch (type) {\n case \"crate\":\n return \n \n \n {}\n \n \n \n \n ;\n case \"barrel\":\n return \n \n \n {}\n {[-0.4, 0, 0.4].map((y, i) => \n \n \n )}\n ;\n case \"concrete_barrier\":\n return \n \n \n ;\n case \"sandbags\":\n return \n {[0, 0.3, 0.6].map((y, i) => \n \n \n )}\n ;\n case \"car_destroyed\":\n return \n {}\n \n \n \n \n {}\n \n \n \n \n {}\n {[[-1, 0, -1.5], [1, 0, -1.5], [-1, 0, 1.5], [1, 0, 1.5]].map((pos, i) => \n \n \n )}\n ;\n default:\n return \n \n \n ;\n }\n };\n return \n {renderProp()}\n ;\n}\nfunction Ground() {\n usePlane(() => ({\n rotation: [-Math.PI / 2, 0, 0],\n position: [0, 0, 0],\n type: \"static\",\n name: \"ground\"\n }));\n const groundMaterial = new THREE.MeshStandardMaterial({\n color: \"#3c4a52\",\n roughness: 0.9,\n metalness: 0.2,\n flatShading: false\n });\n const [details] = useState(() => {\n return Array(50).fill().map(() => ({\n position: [(Math.random() - 0.5) * 48, 0.02, (Math.random() - 0.5) * 48],\n rotation: Math.random() * Math.PI * 2,\n scale: Math.random() * 2 + 1,\n type: Math.random() > 0.7 ? 'crack' : Math.random() > 0.5 ? 'stain' : 'debris'\n }));\n });\n return \n \n \n \n \n \n \n \n \n {details.map((detail, i) => detail.type !== 'debris' ? \n {detail.type === 'crack' ? : }\n \n : null)}\n \n \n \n {}\n \n {[[-25, 0.5, 0, 0.2, 3, 50], [25, 0.5, 0, 0.2, 3, 50], [0, 0.5, -25, 50, 3, 0.2], [0, 0.5, 25, 50, 3, 0.2]].map((wall, i) => \n \n \n )}\n \n ;\n}\nfunction PlayerPhysics({\n playerId,\n team\n}) {\n const {\n playerState,\n setPlayerState\n } = React.useContext(GameContext);\n const [, api] = useBox(() => ({\n args: [PLAYER_RADIUS * 2, playerState.isCrouching ? CROUCH_HEIGHT : PLAYER_HEIGHT, PLAYER_RADIUS * 2],\n position: playerState.position,\n mass: 80,\n fixedRotation: true,\n friction: 0.5,\n restitution: 0.1,\n collisionFilterGroup: 1,\n collisionFilterMask: 1,\n onCollide: e => {\n if (e.body.name === \"ground\") {\n setPlayerState(prev => ({\n ...prev,\n canJump: true\n }));\n }\n }\n }));\n useEffect(() => {\n api.position.set(...playerState.position);\n api.velocity.set(playerState.velocity[0], playerState.velocity[1], playerState.velocity[2]);\n }, [api, playerState.position, playerState.velocity]);\n return null;\n}\nfunction PlayerController({\n playerId,\n team\n}) {\n const {\n playerState,\n setPlayerState,\n gameState,\n setKillFeed,\n players\n } = React.useContext(GameContext);\n const controls = useRef();\n const {\n camera\n } = useThree();\n const [moveState, setMoveState] = useState({\n forward: false,\n backward: false,\n left: false,\n right: false,\n jump: false,\n sprint: false\n });\n const [cameraLerpFactor] = useState(0.4);\n const [mouseSensitivity] = useState(0.8);\n const targetRotation = useRef(new THREE.Euler());\n useEffect(() => {\n let breathTimer;\n let recoveryTimer;\n if (playerState.isHoldingBreath) {\n breathTimer = setInterval(() => {\n setPlayerState(prev => ({\n ...prev,\n breathMeter: Math.max(0, prev.breathMeter - 2),\n isHoldingBreath: prev.breathMeter > 0\n }));\n }, 100);\n } else if (playerState.breathMeter < 100 && !recoveryTimer) {\n recoveryTimer = setTimeout(() => {\n const recoveryInterval = setInterval(() => {\n setPlayerState(prev => {\n const newBreathMeter = Math.min(100, prev.breathMeter + 1);\n if (newBreathMeter === 100) {\n clearInterval(recoveryInterval);\n }\n return {\n ...prev,\n breathMeter: newBreathMeter\n };\n });\n }, 50);\n return () => clearInterval(recoveryInterval);\n }, 1000);\n }\n return () => {\n if (breathTimer) clearInterval(breathTimer);\n if (recoveryTimer) clearTimeout(recoveryTimer);\n };\n }, [playerState.isHoldingBreath, playerState.breathMeter, setPlayerState]);\n useEffect(() => {\n const handleKeyDown = e => {\n if (gameState !== GameState.PLAYING) return;\n switch (e.code) {\n case \"KeyW\":\n setMoveState(prev => ({\n ...prev,\n forward: true\n }));\n break;\n case \"KeyS\":\n setMoveState(prev => ({\n ...prev,\n backward: true\n }));\n break;\n case \"KeyA\":\n if (targetRotation.current) {\n targetRotation.current.y += 0.05;\n }\n break;\n case \"KeyD\":\n if (targetRotation.current) {\n targetRotation.current.y -= 0.05;\n }\n break;\n case \"ShiftLeft\":\n case \"ShiftRight\":\n if (playerState.isAiming && playerState.breathMeter > 0) {\n setPlayerState(prev => ({\n ...prev,\n isHoldingBreath: true\n }));\n } else {\n setMoveState(prev => ({\n ...prev,\n sprint: true\n }));\n if (!playerState.isAiming && !playerState.isCrouching) {\n setPlayerState(prev => ({\n ...prev,\n isSprinting: true,\n state: PlayerState.SPRINTING\n }));\n }\n }\n break;\n case \"Space\":\n setMoveState(prev => ({\n ...prev,\n jump: true\n }));\n break;\n case \"ControlLeft\":\n case \"ControlRight\":\n setPlayerState(prev => ({\n ...prev,\n isCrouching: true,\n state: prev.isAiming ? PlayerState.AIMING : PlayerState.CROUCHING\n }));\n break;\n case \"KeyR\":\n if (playerState.ammo < MAX_AMMO && playerState.reserveAmmo > 0 && !playerState.isReloading) {\n setPlayerState(prev => ({\n ...prev,\n isReloading: true,\n state: PlayerState.RELOADING\n }));\n setTimeout(() => {\n const ammoToAdd = Math.min(MAX_AMMO - playerState.ammo, playerState.reserveAmmo);\n setPlayerState(prev => ({\n ...prev,\n ammo: prev.ammo + ammoToAdd,\n reserveAmmo: prev.reserveAmmo - ammoToAdd,\n isReloading: false,\n state: prev.isAiming ? PlayerState.AIMING : prev.isCrouching ? PlayerState.CROUCHING : PlayerState.IDLE\n }));\n }, RELOAD_TIME);\n }\n break;\n default:\n break;\n }\n };\n const handleKeyUp = e => {\n switch (e.code) {\n case \"KeyW\":\n setMoveState(prev => ({\n ...prev,\n forward: false\n }));\n break;\n case \"KeyS\":\n setMoveState(prev => ({\n ...prev,\n backward: false\n }));\n break;\n case \"KeyA\":\n break;\n case \"KeyD\":\n break;\n case \"Space\":\n setMoveState(prev => ({\n ...prev,\n jump: false\n }));\n break;\n case \"ShiftLeft\":\n case \"ShiftRight\":\n setMoveState(prev => ({\n ...prev,\n sprint: false\n }));\n setPlayerState(prev => ({\n ...prev,\n isSprinting: false,\n isHoldingBreath: false,\n state: prev.isAiming ? PlayerState.AIMING : prev.isCrouching ? PlayerState.CROUCHING : moveState.forward || moveState.backward || moveState.left || moveState.right ? PlayerState.RUNNING : PlayerState.IDLE\n }));\n break;\n case \"ControlLeft\":\n case \"ControlRight\":\n setPlayerState(prev => ({\n ...prev,\n isCrouching: false,\n state: prev.isAiming ? PlayerState.AIMING : PlayerState.IDLE\n }));\n break;\n default:\n break;\n }\n };\n const handleMouseDown = e => {\n if (gameState !== GameState.PLAYING) return;\n if (e.button === 0) {\n if (playerState.ammo > 0 && !playerState.isReloading) {\n setPlayerState(prev => ({\n ...prev,\n isShooting: true,\n ammo: prev.ammo - 1,\n state: PlayerState.SHOOTING\n }));\n const recoilAmount = playerState.isAiming ? 0.03 : 0.07;\n const originalRotation = targetRotation.current.clone();\n targetRotation.current.x -= recoilAmount;\n setTimeout(() => {\n targetRotation.current.copy(originalRotation);\n setPlayerState(prev => ({\n ...prev,\n isShooting: false,\n state: prev.isAiming ? PlayerState.AIMING : prev.isCrouching ? PlayerState.CROUCHING : PlayerState.IDLE\n }));\n }, 200);\n } else if (playerState.ammo === 0 && !playerState.isReloading && playerState.reserveAmmo > 0) {\n setPlayerState(prev => ({\n ...prev,\n isReloading: true,\n state: PlayerState.RELOADING\n }));\n setTimeout(() => {\n const ammoToAdd = Math.min(MAX_AMMO, playerState.reserveAmmo);\n setPlayerState(prev => ({\n ...prev,\n ammo: ammoToAdd,\n reserveAmmo: prev.reserveAmmo - ammoToAdd,\n isReloading: false,\n state: prev.isAiming ? PlayerState.AIMING : prev.isCrouching ? PlayerState.CROUCHING : PlayerState.IDLE\n }));\n }, RELOAD_TIME);\n }\n } else if (e.button === 2) {\n setPlayerState(prev => ({\n ...prev,\n isAiming: true,\n state: PlayerState.AIMING\n }));\n const startFov = camera.fov;\n const endFov = ADS_FOV;\n const duration = 200;\n const startTime = Date.now();\n const animateZoom = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n const easing = 1 - (1 - progress) * (1 - progress);\n camera.fov = startFov + (endFov - startFov) * easing;\n camera.updateProjectionMatrix();\n if (progress < 1) {\n requestAnimationFrame(animateZoom);\n }\n };\n animateZoom();\n }\n };\n const handleMouseUp = e => {\n if (e.button === 2) {\n setPlayerState(prev => ({\n ...prev,\n isAiming: false,\n state: prev.isCrouching ? PlayerState.CROUCHING : PlayerState.IDLE\n }));\n const startFov = camera.fov;\n const endFov = NORMAL_FOV;\n const duration = 200;\n const startTime = Date.now();\n const animateZoomOut = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n const easing = 1 - (1 - progress) * (1 - progress);\n camera.fov = startFov + (endFov - startFov) * easing;\n camera.updateProjectionMatrix();\n if (progress < 1) {\n requestAnimationFrame(animateZoomOut);\n }\n };\n animateZoomOut();\n }\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n document.addEventListener(\"keyup\", handleKeyUp);\n document.addEventListener(\"mousedown\", handleMouseDown);\n document.addEventListener(\"mouseup\", handleMouseUp);\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n document.removeEventListener(\"keyup\", handleKeyUp);\n document.removeEventListener(\"mousedown\", handleMouseDown);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [gameState, playerState, setPlayerState, camera, playerId, players, setKillFeed, team, moveState]);\n useEffect(() => {\n if (controls.current) {\n const originalOnChange = controls.current.onChange;\n controls.current.onChange = () => {\n if (originalOnChange) originalOnChange();\n targetRotation.current.copy(camera.rotation);\n };\n if (controls.current.getObject) {\n const controlObject = controls.current.getObject();\n if (controlObject && controlObject.children && controlObject.children.length > 0) {\n const pitchObject = controlObject.children[0];\n if (pitchObject && pitchObject.rotation) {\n const baseSensitivity = mouseSensitivity;\n pitchObject.rotation.sensitivity = playerState.isAiming ? baseSensitivity * 0.4 : baseSensitivity;\n }\n }\n }\n }\n return () => {\n if (controls.current) {\n controls.current.onChange = null;\n }\n };\n }, [camera, controls, mouseSensitivity, playerState.isAiming]);\n useFrame((_, delta) => {\n if (gameState !== GameState.PLAYING || playerState.state === PlayerState.DEAD) return;\n const frontVector = new THREE.Vector3(0, 0, 0);\n const sideVector = new THREE.Vector3(0, 0, 0);\n const direction = new THREE.Vector3(0, 0, 0);\n if (playerState.isAiming) {\n camera.rotation.copy(targetRotation.current);\n } else {\n camera.rotation.x = THREE.MathUtils.lerp(camera.rotation.x, targetRotation.current.x, cameraLerpFactor);\n camera.rotation.y = THREE.MathUtils.lerp(camera.rotation.y, targetRotation.current.y, cameraLerpFactor);\n camera.rotation.z = THREE.MathUtils.lerp(camera.rotation.z, targetRotation.current.z, cameraLerpFactor);\n }\n if (moveState.forward) frontVector.z = -1;\n if (moveState.backward) frontVector.z = 1;\n let currentSpeed = MOVE_SPEED * 0.7;\n if (playerState.isCrouching) {\n currentSpeed = MOVE_SPEED * 0.4;\n } else if (playerState.isSprinting && !playerState.isAiming) {\n currentSpeed = SPRINT_SPEED * 0.8;\n }\n if (playerState.isAiming) {\n currentSpeed *= 0.3;\n }\n direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(currentSpeed).applyEuler(camera.rotation);\n if (direction.length() > 0) {\n const bobIntensity = playerState.isSprinting ? 0.015 : playerState.isCrouching ? 0.003 : 0.008;\n const bobFrequency = playerState.isSprinting ? 15 : playerState.isCrouching ? 4 : 8;\n const bobY = Math.sin(Date.now() / 100 * (direction.length() / currentSpeed) * bobFrequency) * bobIntensity;\n const bobX = Math.cos(Date.now() / 200 * (direction.length() / currentSpeed) * bobFrequency) * bobIntensity * 0.5;\n if (!playerState.isAiming) {\n camera.position.y += bobY;\n camera.rotation.z = bobX;\n } else {\n if (!playerState.isHoldingBreath) {\n camera.rotation.z = Math.sin(Date.now() / 1500) * 0.002;\n } else {\n camera.rotation.z = 0;\n }\n }\n } else {\n camera.rotation.z = THREE.MathUtils.lerp(camera.rotation.z, 0, 0.2);\n }\n const positionLerpFactor = playerState.isAiming ? 0.2 : 0.35;\n const potentialNewX = THREE.MathUtils.lerp(playerState.position[0], playerState.position[0] + direction.x * delta * 10, positionLerpFactor);\n const potentialNewZ = THREE.MathUtils.lerp(playerState.position[2], playerState.position[2] + direction.z * delta * 10, positionLerpFactor);\n const raycaster = new THREE.Raycaster();\n raycaster.far = PLAYER_RADIUS + 0.1;\n const newPosition = [potentialNewX, playerState.position[1], potentialNewZ];\n const isMoving = moveState.forward || moveState.backward || moveState.left || moveState.right;\n let newState = playerState.state;\n if (playerState.isReloading) {\n newState = PlayerState.RELOADING;\n } else if (playerState.isAiming) {\n newState = PlayerState.AIMING;\n } else if (playerState.isCrouching) {\n newState = PlayerState.CROUCHING;\n } else if (playerState.isSprinting && isMoving) {\n newState = PlayerState.SPRINTING;\n } else if (isMoving) {\n newState = PlayerState.RUNNING;\n } else {\n newState = PlayerState.IDLE;\n }\n setPlayerState(prev => ({\n ...prev,\n position: newPosition,\n rotation: [camera.rotation.x, camera.rotation.y, camera.rotation.z],\n velocity: [direction.x, prev.velocity[1], direction.z],\n state: newState\n }));\n if (moveState.jump && playerState.canJump) {\n setPlayerState(prev => ({\n ...prev,\n velocity: [prev.velocity[0], JUMP_FORCE, prev.velocity[2]],\n canJump: false\n }));\n }\n camera.position.set(newPosition[0], newPosition[1] + (playerState.isCrouching ? CROUCH_HEIGHT / 2 : PLAYER_HEIGHT / 2), newPosition[2]);\n });\n return ;\n}\nfunction HUD() {\n const {\n playerState,\n killFeed,\n players,\n gameState\n } = React.useContext(GameContext);\n const [hitMarker, setHitMarker] = useState(false);\n const [hitMarkerHeadshot, setHitMarkerHeadshot] = useState(false);\n const [nightVision, setNightVision] = useState(false);\n const [showScoreboard, setShowScoreboard] = useState(false);\n useEffect(() => {\n const handlePlayerHit = event => {\n setHitMarker(true);\n if (event.detail?.headshot) {\n setHitMarkerHeadshot(true);\n }\n setTimeout(() => {\n setHitMarker(false);\n setHitMarkerHeadshot(false);\n }, 200);\n };\n const handleKeyPress = e => {\n if (e.code === \"KeyN\") {\n setNightVision(prev => !prev);\n }\n if (e.code === \"Tab\") {\n setShowScoreboard(prev => !prev);\n e.preventDefault();\n }\n };\n const handleKeyUp = e => {\n if (e.code === \"Tab\") {\n setShowScoreboard(false);\n }\n };\n document.addEventListener('playerHitTarget', handlePlayerHit);\n document.addEventListener('keydown', handleKeyPress);\n document.addEventListener('keyup', handleKeyUp);\n return () => {\n document.removeEventListener('playerHitTarget', handlePlayerHit);\n document.removeEventListener('keydown', handleKeyPress);\n document.removeEventListener('keyup', handleKeyUp);\n };\n }, []);\n return

\n {nightVision &&

}\n \n {!nightVision &&

}\n \n {}\n {showScoreboard && gameState === GameState.PLAYING &&

SCOREBOARD

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

#	PLAYER	KILLS	DEATHS	K/D
1	{playerState.playerId \|\| \"YOU\"}	{playerState.kills}	{playerState.deaths}	\n {playerState.deaths > 0 ? (playerState.kills / playerState.deaths).toFixed(2) : playerState.kills.toFixed(2)}\n

\n Press TAB to close scoreboard\n

}\n \n {}\n

\n Your torch is essential - approach objects to see them clearly\n

\n \n

\n Press N to toggle night vision mode | TAB for scoreboard\n

\n \n

\n {playerState.isAiming ?

\n {}\n

300m

AWM

\n \n {hitMarker &&

}\n

\n {}\n

\n {playerState.health}HP\n TACTICAL\n

\n {}\n {playerState.isAiming &&

\n {playerState.isHoldingBreath ? \"HOLDING BREATH\" : \"LUNG CAPACITY\"}\n

}\n

\n {}\n

\n {playerState.ammo}\n / {playerState.reserveAmmo}\n

AWM | 7.62mm

\n {}\n

\n KILLS\n {playerState.kills}\n

\n DEATHS\n {playerState.deaths}\n

\n K/D: {playerState.deaths > 0 ? (playerState.kills / playerState.deaths).toFixed(2) : playerState.kills.toFixed(2)}\n

\n {}\n

\n \n

\n {}\n

\n {}\n {Object.entries(players).map(([id, player]) => {\n const isSameTeam = player.team === playerState.team;\n const elevationColor = player.position[1] > 5 ? '#ffffff' : player.position[1] > 2 ? '#cccccc' : '';\n return

;\n })}\n

\n {}\n

\n SNIPER WAREHOUSE DISTRICT\n

\n {}\n

10m

\n {}\n

Ground

Elevated

Rooftop

\n {}\n

\n {killFeed.map((kill, index) =>

\n \n {kill.killer}\n \n \n {kill.headshot && }\n \n {kill.victim}\n \n

)}\n

\n {}\n {playerState.isReloading &&

\n Reloading\n

}\n {}\n {playerState.state === PlayerState.DEAD &&

ELIMINATED

Respawning in 3 seconds...

LAST KILLED BY

\n {playerState.lastKilledBy || \"Unknown Enemy\"}\n

\n {playerState.lastKilledByHeadshot ? \"HEADSHOT\" : \"BODY SHOT\"} • {playerState.lastKilledByDistance || \"25\"}m\n

}\n {}\n

;\n}\nfunction VerticalAccess({\n position,\n rotation = [0, 0, 0],\n height,\n type = \"ladder\"\n}) {\n useBox(() => ({\n args: type === \"ladder\" ? [0.8, height, 0.4] : [2, height, height / 2],\n position,\n rotation,\n type: \"static\"\n }));\n if (type === \"ladder\") {\n return \n \n \n \n \n \n \n \n \n {Array(Math.floor(height / 0.4)).fill().map((_, i) => \n \n \n )}\n ;\n } else {\n return \n {Array(Math.floor(height)).fill().map((_, i) => \n \n \n )}\n {}\n \n \n \n \n \n \n \n \n ;\n }\n}\nfunction SniperPosition({\n position,\n rotation = [0, 0, 0],\n size\n}) {\n useBox(() => ({\n args: [size[0], 1, size[2]],\n position,\n rotation,\n type: \"static\"\n }));\n return \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ;\n}\nfunction GameWorld({\n playerId,\n team\n}) {\n const cameraShakeRef = useRef();\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 \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}\nfunction Game() {\n const [playerId] = useState(`Sniper_${Math.floor(Math.random() * 1000)}`);\n const [team] = useState(TEAMS[Math.floor(Math.random() * TEAMS.length)]);\n const [gameState, setGameState] = useState(GameState.LOBBY);\n const [players, setPlayers] = useState({});\n const [killFeed, setKillFeed] = useState([]);\n const spawnPoint = INITIAL_SPAWN_POINTS[Math.floor(Math.random() * INITIAL_SPAWN_POINTS.length)];\n const [playerState, setPlayerState] = useState({\n position: spawnPoint,\n rotation: [0, 0, 0],\n velocity: [0, 0, 0],\n health: 100,\n ammo: MAX_AMMO,\n reserveAmmo: MAX_RESERVE_AMMO,\n kills: 0,\n deaths: 0,\n team: team,\n state: PlayerState.IDLE,\n isAiming: false,\n isShooting: false,\n isCrouching: false,\n isReloading: false,\n isSprinting: false,\n isHoldingBreath: false,\n breathMeter: 100,\n canJump: true,\n lastKilledBy: null,\n lastKilledByHeadshot: false,\n lastKilledByDistance: null\n });\n useEffect(() => {\n const killFeedInterval = setInterval(() => {\n setKillFeed(prevFeed => {\n const now = Date.now();\n return prevFeed.filter(kill => now - kill.timestamp < 10000);\n });\n }, 1000);\n return () => {\n clearInterval(killFeedInterval);\n };\n }, []);\n const handleStartGame = () => {\n setGameState(GameState.PLAYING);\n };\n if (gameState === GameState.LOBBY) {\n return

\n SNIPERSCAPE\n

\n CALLSIGN: {playerId} | \n FACTION: {team}\n

\n \n

COMBAT MANUAL

\n Move Forward\n

\n Move Backward\n

\n Move Left\n

\n Move Right\n

LMB

\n Fire Weapon\n

RMB

\n Aim Down Sights\n

\n Reload Weapon\n

CTRL

\n Crouch\n

SPACE

\n Jump\n

\n Powered by advanced 3D rendering technology\n

\n NEW! Hold SHIFT while aiming to steady your breath for precise shots!\n

\n NIGHT MODE! Your torch illuminates the darkness. Get close to see details!\n

;\n }\n return \n

\n {}\n \n \n

\n ;\n}\nexport default function App() {\n useEffect(() => {\n const handleContextMenu = e => e.preventDefault();\n document.addEventListener(\"contextmenu\", handleContextMenu);\n return () => {\n document.removeEventListener(\"contextmenu\", handleContextMenu);\n };\n }, []);\n const checkWebGLSupport = () => {\n try {\n const canvas = document.createElement('canvas');\n return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));\n } catch (e) {\n return false;\n }\n };\n const [webGLSupported] = useState(checkWebGLSupport());\n if (!webGLSupported) {\n return

WebGL Not Supported

Your browser or device doesn't support 3D graphics required for SniperScape.

Please try a different browser or update your current one.

;\n }\n return

\n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"react-router-dom\":\"6.18.0\",\"lucide-react\":\"0.441.0\",\"framer-motion\":\"10.16.4\",\"socket.io-client\":\"4.7.1\",\"@react-three/fiber\":\"8.15.19\",\"@react-three/drei\":\"9.99.7\",\"three\":\"0.162.0\",\"recharts\":\"2.8.0\",\"react-dom\":\"18.2.0\",\"@react-three/cannon\":\"6.6.0\",\"@react-three/postprocessing\":\"2.16.2\",\"postprocessing\":\"6.34.3\"}}","token","upstreamApp","isLordOfDev","analytics",[71,75,77,79,81,83,85,87,89,91,93,95,97,99],{"_72":73,"_74":54},"day","2025-03-21","runCount",{"_72":76,"_74":54},"2025-03-22",{"_72":78,"_74":54},"2025-03-23",{"_72":80,"_74":54},"2025-03-24",{"_72":82,"_74":54},"2025-03-25",{"_72":84,"_74":54},"2025-03-26",{"_72":86,"_74":54},"2025-03-27",{"_72":88,"_74":54},"2025-03-28",{"_72":90,"_74":54},"2025-03-29",{"_72":92,"_74":54},"2025-03-30",{"_72":94,"_74":54},"2025-03-31",{"_72":96,"_74":54},"2025-04-01",{"_72":98,"_74":54},"2025-04-02",{"_72":100,"_74":57},"2025-04-03","snapshot","ogImage","https://cdn.dev.fun/og/image/695bde2e5a4dec9233fa/34c591dc.webp","actionData","errors"]