[V0_FILE]typescriptreact:file="type-z.tsx" "use client" import React, { useState, useEffect, useRef, useCallback, Suspense, useMemo } from 'react' import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber' import { Text, PointerLockControls, Plane, useGLTF, useTexture, Environment } from '@react-three/drei' import { Vector3, AnimationMixer, LoopRepeat, RepeatWrapping, AudioListener, AudioLoader, LoopOnce, PositionalAudio, MeshBasicMaterial } from 'three' import { GLTFLoader, SkeletonUtils } from 'three-stdlib' import { Volume2, VolumeX, Heart } from 'lucide-react' import { motion } from 'framer-motion' import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" const zombieModels = [ "https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/zombie1.glb", "https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/zombie2.glb", "https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/zombie3.glb", "https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/zombie4.glb", "https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/zombie5.glb" ] const zombieGroans = [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie_groan%20(1)-kd8wzGRW6MtWISCsj4R5X7zjhT9o8n.mp3", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie_groan-WOmuyRptAnOmhV7eYAOjOxNZZmliTc.mp3", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie_groan%20(3)-NfOpeDkdlJ5iu4tNEznAKDunWAFOxT.mp3", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie_groan%20(2)-fgC0HuE0hXyCAfMAzCXghtaK0H9qiN.mp3", ] const zombie5Groans = [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/huge_20_ft_monster_g%20(2)-0vN8lRy7XwI79Z0eyRe1zu04PHcXIs.mp3", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/huge_20_ft_monster_g-uiI58NpCFhzph4uxhPb3OaKORYwjdI.mp3" ] const zombie1Groans = [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/11L-zombie_groan,_female-1726693551582-VWJWk6jasBV5H9Nydu2l9qRoFVSyK1.mp3", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/11L-zombie_groan,_female-1726693554225-eGjO9rEqYwE86Mhz3exwFZuptSeWFF.mp3" ] const TEXTURES = { ground: { color: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Concrete042B_1K-JPG_Color-YXfPxgXAuNN7wBWGALx9ZclqEAzy1H.jpg', normal: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Concrete042B_1K-JPG_NormalGL-7AIHj26mONNr4wu81MtiRVL0pusucf.jpg', roughness: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Concrete042B_1K-JPG_Roughness-VXb2YSnD66pJd0dOm4Z0buSoPiMRMb.jpg', ao: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Concrete042B_1K-JPG_AmbientOcclusion-V5RHeUg8unHUTCiTr8xqMSkvvU36oI.jpg' } } const Zombie = React.memo(({ position, word, currentWord, onDefeat, isActive, modelUrl, onHit, groanUrl, isMuted, listener, gameStarted, gameOver }) => { const group = useRef() const mixerRef = useRef() const walkActionRef = useRef() const hitActionRef = useRef() const audioRef = useRef() const { scene } = useLoader(GLTFLoader, modelUrl) const { animations: walkAnimations } = useLoader(GLTFLoader, modelUrl === zombieModels[3] ? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-run-OtQQVYzoknVK3iUyvEgfsDqq9lNlGq.glb" : modelUrl === zombieModels[4] ? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/monster-walk-Ud0jgDdDuyjqJc7PpJ5w9Z16A6Vgzt.glb" : "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie1-walk2-mxOC2bb3G7PYnBBrvslBU3UJF41Bph.glb") const { animations: hitAnimations } = useLoader(GLTFLoader, "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-punch-GrsZVagThUbQgUdlhtQLoP3aYfJwoq.glb") const clone = useMemo(() => SkeletonUtils.clone(scene), [scene]) const [isHitting, setIsHitting] = useState(false) const { camera } = useThree() const isZombie4 = modelUrl === zombieModels[3] const isZombie5 = modelUrl === zombieModels[4] useEffect(() => { mixerRef.current = new AnimationMixer(clone) const walkClip = walkAnimations[0] const hitClip = hitAnimations[0] if (walkClip) { walkActionRef.current = mixerRef.current.clipAction(walkClip) if (isZombie4) { walkActionRef.current.timeScale = 2.5 } else if (isZombie5) { walkActionRef.current.timeScale = 1.2 } walkActionRef.current.play() } if (hitClip) { hitActionRef.current = mixerRef.current.clipAction(hitClip) hitActionRef.current.setLoop(LoopRepeat, 1) hitActionRef.current.clampWhenFinished = true } clone.traverse((object) => { if (object.isMesh) { object.material = new MeshBasicMaterial({ color: 0xffffff, map: object.material.map, }) object.material.onBeforeCompile = (shader) => { shader.fragmentShader = shader.fragmentShader.replace( '#include ', ` #include vec3 grayscale = vec3(dot(diffuseColor.rgb, vec3(0.299, 0.587, 0.114))); diffuseColor.rgb = grayscale; ` ) } } }) if (isZombie5) { group.current.scale.set(3, 3, 3) } audioRef.current = new PositionalAudio(listener) const audioLoader = new AudioLoader() audioLoader.load(groanUrl, (buffer) => { if (audioRef.current) { audioRef.current.setBuffer(buffer) audioRef.current.setRefDistance(1) audioRef.current.setLoop(true) audioRef.current.setVolume(0.5) if (gameStarted && !isMuted) { audioRef.current.play() } } }) return () => { if (mixerRef.current) { mixerRef.current.stopAllAction() } if (audioRef.current) { audioRef.current.stop() } } }, [clone, walkAnimations, hitAnimations, groanUrl, listener, gameStarted, isMuted, isZombie4, isZombie5]) useEffect(() => { if (audioRef.current && audioRef.current.buffer) { if (gameStarted && !isMuted) { audioRef.current.play() } else { audioRef.current.pause() } } }, [isMuted, gameStarted]) useFrame((state, delta) => { if (group.current && isActive) { if (!isHitting) { const targetPosition = new Vector3(camera.position.x, 0, camera.position.z) const direction = new Vector3().subVectors(targetPosition, group.current.position).normalize() const speed = isZombie4 ? 1.5 : isZombie5 ? 0.7 : 0.5 group.current.position.add(direction.multiplyScalar(delta * speed)) group.current.lookAt(targetPosition) if (group.current.position.distanceTo(targetPosition) < 2) { setIsHitting(true) if (hitActionRef.current) { walkActionRef.current.stop() hitActionRef.current.reset().play() setTimeout(() => { onHit() onDefeat() }, 1000) } } } if (mixerRef.current) { mixerRef.current.update(delta) } } }) if (!isActive) return null return ( {audioRef.current && } {!gameOver && isActive && ( {word.split('').map((letter, index) => ( {letter} ))} )} ) }) function Lighting() { return ( <> ) } function Ground() { const textures = useTexture(TEXTURES.ground, (textures) => { Object.values(textures).forEach(texture => { texture.wrapS = texture.wrapT = RepeatWrapping texture.repeat.set(1000, 1000) }) }) return ( ) } function City() { const { scene } = useGLTF("https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/modern-city.glb") useEffect(() => { scene.traverse((object) => { if (object.isMesh) { object.material = new MeshBasicMaterial({ color: 0xffffff, map: object.material.map, }) object.material.onBeforeCompile = (shader) => { shader.fragmentShader = shader.fragmentShader.replace( '#include ', ` #include vec3 grayscale = vec3(dot(diffuseColor.rgb, vec3(0.299, 0.587, 0.114))); diffuseColor.rgb = grayscale; ` ) } } }) }, [scene]) return } function Game() { const [showCredits, setShowCredits] = useState(false) const [wave, setWave] = useState(0) const [showWaveAnnouncement, setShowWaveAnnouncement] = useState(false) const [cameraTarget, setCameraTarget] = useState(new Vector3(0, 2, 3)) const cameraRef = useRef() const initialCameraPosition = useRef(new Vector3(10, 2, 20)) const targetCameraPosition = useRef(new Vector3(0, 100, 3)) const [zombies, setZombies] = useState([]) const [currentWord, setCurrentWord] = useState('') const [score, setScore] = useState(0) const [lives, setLives] = useState(3) const [gameOver, setGameOver] = useState(false) const [isLocked, setIsLocked] = useState(false) const [isMuted, setIsMuted] = useState(false) const [shouldStartNextRound, setShouldStartNextRound] = useState(false) const [gameStarted, setGameStarted] = useState(true) const [isShaking, setIsShaking] = useState(false) const listenerRef = useRef(new AudioListener()) const bgMusicRef = useRef() const hitSoundRef = useRef() const keyboardClackRef = useRef() const easyWords = ['quixotic', 'zephyr', 'ephemeral', 'ubiquitous', 'serendipity', 'mellifluous', 'eloquent', 'enigma', 'paradox', 'labyrinth'] const mediumWords = ['cacophony', 'surreptitious', 'idiosyncratic', 'obfuscate', 'euphemism', 'juxtapose', 'paradigm', 'quintessential', 'vicissitude', 'zeitgeist'] const hardWords = ['antidisestablishmentarianism', 'floccinaucinihilipilification', 'pneumonoultramicroscopicsilicovolcanoconiosis', 'hippopotomonstrosesquippedaliophobia', 'supercalifragilisticexpialidocious', 'pseudopseudohypoparathyroidism', 'sesquipedalian', 'honorificabilitudinitatibus', 'thyroparathyroidectomized', 'dichlorodifluoromethane'] useEffect(() => { bgMusicRef.current = new window.Audio('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-8khsdtT8va70J2CVLJ2csJzLLRpfZi.mp3') bgMusicRef.current.loop = true bgMusicRef.current.volume = 0.5 hitSoundRef.current = new window.Audio('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/hit-AiBAn95vUukxGrMLuDUiRhvsMiNa41.wav') hitSoundRef.current.volume = 0.5 keyboardClackRef.current = new window.Audio('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/keyboard-dkZBqKdv5zTzXZAJMWawLwlVoHqh8Q.wav') keyboardClackRef.current.volume = 0.5 return () => { if (bgMusicRef.current) { bgMusicRef.current.pause() } } }, []) const spawnZombies = useCallback((count, waveNumber) => { const availableModels = waveNumber === 1 ? zombieModels.slice(0, 4) : zombieModels; return Array(count).fill(null).map(() => ({ id: Date.now() + Math.random(), position: [Math.random() * 40 - 20, 0, Math.random() * 40 - 20], word: easyWords[Math.floor(Math.random() * easyWords.length)], isActive: true, modelUrl: availableModels[Math.floor(Math.random() * availableModels.length)], groanUrl: zombieGroans[Math.floor(Math.random() * zombieGroans.length)] })) }, [easyWords]) const spawnZombiesForWave = useCallback((waveNumber) => { const zombieCount = waveNumber * 5; const zombie5Count = waveNumber >= 2 ? Math.max(1, Math.floor(waveNumber / 2)) : 0; const zombie4Count = waveNumber >= 2 ? Math.max(1, Math.floor(waveNumber / 3)) : 0; const regularZombieCount = zombieCount - zombie5Count - zombie4Count; const spawnRadius = 20; // Adjust this value to change how far zombies spawn from the camera const getRandomPosition = () => { const angle = Math.random() * Math.PI * 2; const radius = Math.random() * spawnRadius + 10; // Spawn between 10 and 30 units away return [ cameraRef.current.position.x + Math.cos(angle) * radius, 0, cameraRef.current.position.z + Math.sin(angle) * radius ]; }; const newZombies = [ ...Array(regularZombieCount).fill().map(() => { const zombieType = Math.floor(Math.random() * 3); return { id: Date.now() + Math.random(), position: getRandomPosition(), word: easyWords[Math.floor(Math.random() * easyWords.length)], isActive: true, modelUrl: zombieModels[zombieType], groanUrl: zombieType === 0 ? zombie1Groans[Math.floor(Math.random() * zombie1Groans.length)] : zombieGroans[Math.floor(Math.random() * zombieGroans.length)] }; }), ...Array(zombie4Count).fill().map(() => ({ id: Date.now() + Math.random(), position: getRandomPosition(), word: mediumWords[Math.floor(Math.random() * mediumWords.length)], isActive: true, modelUrl: zombieModels[3], groanUrl: zombieGroans[Math.floor(Math.random() * zombieGroans.length)] })), ...Array(zombie5Count).fill().map(() => ({ id: Date.now() + Math.random(), position: getRandomPosition(), word: hardWords[Math.floor(Math.random() * hardWords.length)], isActive: true, modelUrl: zombieModels[4], groanUrl: zombie5Groans[Math.floor(Math.random() * zombie5Groans.length)] })) ]; setZombies(newZombies); setShowWaveAnnouncement(true); setTimeout(() => setShowWaveAnnouncement(false), 2000); }, [easyWords, mediumWords, hardWords]); useEffect(() => { if (!shouldStartNextRound || !cameraRef.current) { return } setShouldStartNextRound(false); spawnZombiesForWave(wave + 1); setWave(wave + 1); }, [shouldStartNextRound, spawnZombiesForWave, wave, cameraRef]) useEffect(() => { if (gameStarted && !gameOver) { if (zombies.length === 0) { setShouldStartNextRound(true) } } }, [gameStarted, gameOver, zombies.length]); useEffect(() => { if (gameStarted && !isMuted && bgMusicRef.current) { bgMusicRef.current.play().catch(console.error) } }, [gameStarted, isMuted]) const handleKeyPress = useCallback((e) => { if (gameOver || !gameStarted) return if (e.key.length === 1 && e.key.match(/[a-z]/i)) { setCurrentWord(prev => prev + e.key.toLowerCase()) if (!isMuted && keyboardClackRef.current) { keyboardClackRef.current.currentTime = 0 keyboardClackRef.current.play().catch(console.error) } } else if (e.key === 'Backspace') { setCurrentWord(prev => prev.slice(0, -1)) if (!isMuted && keyboardClackRef.current) { keyboardClackRef.current.currentTime = 0 keyboardClackRef.current.play().catch(console.error) } } }, [gameOver, gameStarted, isMuted]) useEffect(() => { window.addEventListener('keydown', handleKeyPress) return () => window.removeEventListener('keydown', handleKeyPress) }, [handleKeyPress]) useEffect(() => { const handleSpacebar = (e) => { if (e.code === 'Space' && !gameStarted) { setGameStarted(true) if (!isMuted && bgMusicRef.current) { bgMusicRef.current.play().catch(console.error) } } } window.addEventListener('keydown', handleSpacebar) return () => window.removeEventListener('keydown', handleSpacebar) }, [gameStarted, isMuted]) useEffect(() => { setZombies(prev => prev.filter(zombie => { if (zombie.isActive && zombie.word.toLowerCase() === currentWord.toLowerCase()) { setScore(prev => prev + 1) setCurrentWord('') return false } return true })) }, [currentWord]) const handleDefeat = useCallback((zombieId) => { setZombies(prev => prev.filter(z => z.id !== zombieId)) }, []) const handleHit = useCallback(() => { setLives(prev => { const newLives = Math.max(0, prev - 1) if (newLives === 0) { setGameOver(true) } return newLives }) setIsShaking(true) setTimeout(() => setIsShaking(false), 500) if (!isMuted && hitSoundRef.current) { hitSoundRef.current.play().catch(console.error) } }, [isMuted]) const toggleMute = useCallback(() => { setIsMuted(prev => { const newMuted = !prev if (bgMusicRef.current) { if (newMuted) { bgMusicRef.current.pause() } else if (gameStarted) { bgMusicRef.current.play().catch(console.error) } } if (hitSoundRef.current) { hitSoundRef.current.muted = newMuted } if (keyboardClackRef.current) { keyboardClackRef.current.muted = newMuted } return newMuted }) }, [gameStarted]) return (

{showWaveAnnouncement && (

Wave {wave}

)}

{Array(Math.max(0, lives)).fill().map((_, i) => ( ))}

{score}

{currentWord}

{gameOver && (

GAME OVER

)}

) } zombieModels.forEach(url => useGLTF.preload(url)) useGLTF.preload("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-stand-up-cToSxc4GDal767iNUgJiLwrnVR0713.glb") useGLTF.preload("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-scream-DIMDtwHV5zr3SiRqXfx23l1cFycYMd.glb") useGLTF.preload("https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/zombie4.glb") useGLTF.preload("https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/zombie5.glb") useGLTF.preload("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie1-walk2-mxOC2bb3G7PYnBBrvslBU3UJF41Bph.glb") useGLTF.preload("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-punch-GrsZVagThUbQgUdlhtQLoP3aYfJwoq.glb") useGLTF.preload("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-run-OtQQVYzoknVK3iUyvEgfsDqq9lNlGq.glb") useGLTF.preload("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/monster-walk-Ud0jgDdDuyjqJc7PpJ5w9Z16A6Vgzt.glb") useGLTF.preload("https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/tiny-city.glb") const CameraController = React.forwardRef(({ initialPosition, targetPosition, gameOver }, ref) => { const { camera } = useThree() useEffect(() => { camera.position.copy(initialPosition) ref.current = camera }, [camera, initialPosition, ref]) useFrame((state, delta) => { if (gameOver) { camera.position.lerp(targetPosition, 0.05) camera.lookAt(0, 0, 0) } }) return null }) const ZombieModel = ({ onHit, stopGroans, hasHit }) => { const gltf = useLoader(GLTFLoader, "https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/zombie2.glb") const standUpAnimation = useLoader(GLTFLoader, "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-stand-up-cToSxc4GDal767iNUgJiLwrnVR0713.glb") const screamAnimation = useLoader(GLTFLoader, "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-scream-DIMDtwHV5zr3SiRqXfx23l1cFycYMd.glb") const runAnimation = useLoader(GLTFLoader, "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-run-OtQQVYzoknVK3iUyvEgfsDqq9lNlGq.glb") const hitAnimation = useLoader(GLTFLoader, "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie-punch-GrsZVagThUbQgUdlhtQLoP3aYfJwoq.glb") const mixerRef = useRef() const zombieRef = useRef() const [currentAnimation, setCurrentAnimation] = useState('standUp') const [zombieVisible, setZombieVisible] = useState(true) const audioRef = useRef(new Audio()) const actionsRef = useRef({}) const [walk, setWalk] = useState(false) const groanSounds = { standUp: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie_groan%20(3)-NfOpeDkdlJ5iu4tNEznAKDunWAFOxT.mp3", run: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie_groan-WOmuyRptAnOmhV7eYAOjOxNZZmliTc.mp3", hit: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zombie_groan%20(2)-fgC0HuE0hXyCAfMAzCXghtaK0H9qiN.mp3" } const playGroan = (animationType) => { if (!stopGroans) { audioRef.current.src = groanSounds[animationType] audioRef.current.play().catch(console.error) } } useEffect(() => { mixerRef.current = new AnimationMixer(gltf.scene) zombieRef.current = gltf.scene actionsRef.current = { standUp: mixerRef.current.clipAction(standUpAnimation.animations[0]), scream: mixerRef.current.clipAction(screamAnimation.animations[0]), run: mixerRef.current.clipAction(runAnimation.animations[0]), hit: mixerRef.current.clipAction(hitAnimation.animations[0]) } Object.values(actionsRef.current).forEach(action => { action.setLoop(LoopOnce) action.clampWhenFinished = true }) actionsRef.current.run.setLoop(LoopRepeat) // Increase animation speeds actionsRef.current.standUp.timeScale = 1.5 actionsRef.current.scream.timeScale = 1.5 actionsRef.current.run.timeScale = 2 actionsRef.current.hit.timeScale = 2 // Apply grayscale shader to all meshes gltf.scene.traverse((child) => { if (child.isMesh) { child.material = new MeshBasicMaterial({ color: 0xffffff, map: child.material.map, }) child.material.onBeforeCompile = (shader) => { shader.fragmentShader = shader.fragmentShader.replace( '#include ', ` #include vec3 grayscale = vec3(dot(diffuseColor.rgb, vec3(0.299, 0.587, 0.114))); diffuseColor.rgb = grayscale; ` ) } } }) const animationSequence = async () => { if (!hasHit) { const fadeTime = 0.5 playGroan('standUp') actionsRef.current.standUp.play() await new Promise(resolve => setTimeout(resolve, standUpAnimation.animations[0].duration * 300)) setCurrentAnimation('run') setTimeout(() => setWalk(true), 250); actionsRef.current.run.reset().play() actionsRef.current.run.crossFadeFrom(actionsRef.current.scream, fadeTime, true) await new Promise(resolve => setTimeout(resolve, 2500)) // Reduced run duration setCurrentAnimation('hit') actionsRef.current.hit.reset().play() actionsRef.current.hit.crossFadeFrom(actionsRef.current.run, fadeTime, true) await new Promise(resolve => setTimeout(resolve, hitAnimation.animations[0].duration * 150)) onHit() setZombieVisible(false) } } animationSequence() return () => { mixerRef.current.stopAllAction() audioRef.current.pause() audioRef.current.src = "" } }, [gltf.scene, standUpAnimation, screamAnimation, runAnimation, hitAnimation, onHit, stopGroans, hasHit]) useEffect(() => { if (stopGroans) { audioRef.current.pause() audioRef.current.src = "" } }, [stopGroans]) useFrame((state, delta) => { if (mixerRef.current) { mixerRef.current.update(delta) } if (zombieRef.current && walk) { zombieRef.current.position.z += delta * 1.5 // Increased speed if (zombieRef.current.position.z >= -1.2) { zombieRef.current.position.z = -1.2 // Stop just before the camera } } }) if (!zombieVisible) return null return // Start further back } const TitleScreen = ({ onZombieHit, hasHit }) => { const { camera } = useThree() const originalPosition = useRef(new Vector3(0, 1, 0)) const spotLightRef = useRef() const bgMusicRef = useRef(new Audio('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/title-XhOtw5KDnieCs0uKjjVNQmtnk54bhS.mp3')) const [stopGroans, setStopGroans] = useState(false) const [hasZombieHit, setHasZombieHit] = useState(false) useEffect(() => { camera.position.copy(originalPosition.current) camera.lookAt(new Vector3(0, 0, -8)) }, [camera]) useEffect(() => { bgMusicRef.current.loop = true bgMusicRef.current.volume = 0.5 return () => { bgMusicRef.current.pause() bgMusicRef.current.currentTime = 0 } }, []) const handleZombieHit = useCallback(() => { if (hasZombieHit) { return } bgMusicRef.current.play().catch(console.error) setStopGroans(true) setHasZombieHit(true) onZombieHit() }, [hasZombieHit, onZombieHit]) useFrame((state, delta) => { if (spotLightRef.current) { spotLightRef.current.position.x = Math.sin(state.clock.elapsedTime * 0.5) * 3 spotLightRef.current.position.z = Math.cos(state.clock.elapsedTime * 0.5) * 3 } }) return ( <> ) } export default function Component() { const [gameStarted, setGameStarted] = useState(false) const [isShaking, setIsShaking] = useState(false) const [showTitle, setShowTitle] = useState(false) const [hasHit, setHasHit] = useState(false) const hitSoundRef = useRef(new Audio('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/hit-AiBAn95vUukxGrMLuDUiRhvsMiNa41.wav')) useEffect(() => { const style = document.createElement('style') style.textContent = ` @font-face { font-family: 'ChainsawCarnage'; src: url('https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/ChainsawCarnage.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GeistMono'; src: url('https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/GeistMono-Regular.ttf'); font-weight: normal; font-style: normal; } ` document.head.appendChild(style) const font = new FontFace('ChainsawCarnage', 'url(https://43fzijkfwg2zmvr5.public.blob.vercel-storage.com/ChainsawCarnage.ttf)') font.load().then(() => { document.fonts.add(font) }) }, []) useEffect(() => { hitSoundRef.current.volume = 0.5 const handleSpacebar = (e) => { if (e.code === 'Space' && !gameStarted && showTitle) { setGameStarted(true) } } window.addEventListener('keydown', handleSpacebar) return () => window.removeEventListener('keydown', handleSpacebar) }, [gameStarted, showTitle]) const handleZombieHit = useCallback(() => { if (!hasHit) { setIsShaking(true) hitSoundRef.current.play().catch(console.error) setTimeout(() => { setIsShaking(false) }, 500) setShowTitle(true) setHasHit(true) } }, [hasHit]) if (!gameStarted) { return (

{showTitle && ( <>

Type-Z

Press spacebar

)}

) } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" import TypeZ from "@/type-z" export default function Home() { return (

) }