▶

\n \n

\n=======\n

▶

BEGIN VIDEO

\n \n

\n>>>>>>> REPLACE\n```\n\nstyle.css\n```\n<<<<<<< SEARCH\n.yt-play-btn {\n font-size: 4rem;\n color: #fff;\n opacity: 0.8;\n}\n=======\n.yt-play-btn {\n font-size: 4rem;\n color: #fff;\n opacity: 0.8;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n.yt-play-btn:hover {\n transform: scale(1.1);\n}\n\n.yt-actual-play-btn {\n position: absolute;\n z-index: 50;\n background: #f00;\n color: #fff;\n padding: 15px 30px;\n font-weight: bold;\n border-radius: 2px;\n cursor: pointer;\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\n}\n\n.yt-actual-play-btn:hover {\n background: #cc0000;\n}\n>>>>>>> REPLACE\n```\n\nstyle.css\n```\n<<<<<<< SEARCH\n.noob-enemy {\n position: absolute;\n width: 50px;\n height: 50px;\n background-image: url('noob.png');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n cursor: pointer;\n user-select: none;\n filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));\n transition: transform 0.05s linear;\n}\n=======\n.noob-enemy {\n position: absolute;\n width: 50px;\n height: 50px;\n background-image: url('noob.png');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n cursor: pointer;\n user-select: none;\n filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));\n transition: transform 0.05s linear;\n pointer-events: auto;\n}\n\n.noob-enemy.color-1 { filter: hue-rotate(90deg) drop-shadow(0 0 10px rgba(0,0,0,0.5)); }\n.noob-enemy.color-2 { filter: hue-rotate(180deg) drop-shadow(0 0 10px rgba(0,0,0,0.5)); }\n.noob-enemy.color-3 { filter: hue-rotate(270deg) drop-shadow(0 0 10px rgba(0,0,0,0.5)); }\n.noob-enemy.color-4 { filter: invert(1) drop-shadow(0 0 10px rgba(0,0,0,0.5)); }\n\n.noob-pop {\n position: absolute;\n width: 60px;\n height: 60px;\n border: 4px solid #fff;\n border-radius: 50%;\n pointer-events: none;\n animation: popEffect 0.4s ease-out forwards;\n}\n\n@keyframes popEffect {\n 0% { transform: scale(0.5); opacity: 1; border-width: 10px; }\n 100% { transform: scale(2); opacity: 0; border-width: 1px; }\n}\n\n.zoom-into-3d {\n animation: zoomOutEffect 2s cubic-bezier(0.7, 0, 0.3, 1) forwards;\n}\n\n@keyframes zoomOutEffect {\n 0% { transform: scale(1); opacity: 1; filter: blur(0); }\n 100% { transform: scale(3); opacity: 0; filter: blur(10px); }\n}\n>>>>>>> REPLACE\n```\n\nmain.js\n```\n<<<<<<< SEARCH\n startGame() {\n const gameContainer = document.getElementById('game-container');\n const scoreEl = document.getElementById('game-score');\n const hpEl = document.getElementById('game-hp');\n const damageOverlay = document.getElementById('damage-vignette');\n const startHint = document.getElementById('start-hint');\n\nlet score = 0;\n let hp = 100;\n let activeNoobs = [];\n let gameActive = true;\n\n const oofSound = new Audio('oof.mp3');\n\n const spawnNoob = () => {\n if (!gameActive) return;\n\n const noob = document.createElement('div');\n noob.className = 'noob-enemy';\n \n // Random start position\n const startX = Math.random() * 90; // 0-90%\n const startY = Math.random() * 80; // 0-80%\n \n noob.style.left = `${startX}%`;\n noob.style.top = `${startY}%`;\n noob.style.transform = 'scale(0.1)';\n \n let scale = 0.1;\n const speed = 0.005 + Math.random() * 0.01;\n\n const updateNoob = () => {\n if (!noob.parentElement) return;\n \n scale += speed;\n noob.style.transform = `scale(${scale})`;\n\n if (scale >= 2.0) {\n // Hit player\n hp -= 10;\n hpEl.textContent = Math.max(0, hp);\n \n // Visual feedback\n damageOverlay.classList.add('damage-flash');\n setTimeout(() => damageOverlay.classList.remove('damage-flash'), 200);\n \n // Audio feedback\n oofSound.currentTime = 0;\n oofSound.play().catch(() => {});\n\n noob.remove();\n activeNoobs = activeNoobs.filter(n => n !== noob);\n\n if (hp <= 0 && gameActive) {\n gameActive = false;\n alert(`Game Over! Score: ${score}`);\n window.location.reload();\n }\n } else {\n requestAnimationFrame(updateNoob);\n }\n };\n\n noob.addEventListener('mousedown', (e) => {\n e.stopPropagation();\n score += 10;\n scoreEl.textContent = score;\n noob.remove();\n activeNoobs = activeNoobs.filter(n => n !== noob);\n });\n\n gameContainer.appendChild(noob);\n activeNoobs.push(noob);\n requestAnimationFrame(updateNoob);\n\n // Reschedule next spawn\n const nextSpawn = Math.max(200, 1500 - score * 0.5);\n setTimeout(spawnNoob, nextSpawn);\n };\n\n // Start hint removal\n gameContainer.addEventListener('click', () => {\n if (startHint) startHint.remove();\n }, { once: true });\n\n spawnNoob();\n }\n=======\n startGame() {\n const gameContainer = document.getElementById('game-container');\n const scoreEl = document.getElementById('game-score');\n const hpEl = document.getElementById('game-hp');\n const waveEl = document.getElementById('game-wave');\n const damageOverlay = document.getElementById('damage-vignette');\n const startHint = document.getElementById('start-hint');\n const beginVideoBtn = document.getElementById('play-video-btn');\n\nthis.score = 0;\n this.hp = 100;\n this.wave = 1;\n this.noobsInWave = 0;\n this.noobsKilledInWave = 0;\n this.gameActive = true;\n this.isWaveIntermission = false;\n\n const oofSound = new Audio('oof.mp3');\n const popSound = new Audio('noob_pop.mp3');\n const waveSound = new Audio('wave_start.mp3');\n\n const spawnNoob = () => {\n if (!this.gameActive || this.isWaveIntermission) return;\n\n const noob = document.createElement('div');\n noob.className = 'noob-enemy';\n \n // Random color\n const colorType = Math.floor(Math.random() * 6);\n if (colorType > 0 && colorType <= 4) {\n noob.classList.add(`color-${colorType}`);\n }\n\n const startX = Math.random() * 90;\n const startY = Math.random() * 80;\n \n noob.style.left = `${startX}%`;\n noob.style.top = `${startY}%`;\n noob.style.transform = 'scale(0.1)';\n \n let scale = 0.1;\n // Speed increases with wave\n const speed = (0.005 + Math.random() * 0.01) * (1 + this.wave * 0.2);\n\n const updateNoob = () => {\n if (!noob.parentElement || !this.gameActive) return;\n \n scale += speed;\n noob.style.transform = `scale(${scale})`;\n\n if (scale >= 2.0) {\n this.hp -= 10;\n hpEl.textContent = Math.max(0, this.hp);\n damageOverlay.classList.add('damage-flash');\n setTimeout(() => damageOverlay.classList.remove('damage-flash'), 200);\n oofSound.currentTime = 0;\n oofSound.play().catch(() => {});\n noob.remove();\n\n if (this.hp <= 0 && this.gameActive) {\n this.gameActive = false;\n alert(`Game Over! Score: ${this.score}`);\n window.location.reload();\n }\n } else {\n requestAnimationFrame(updateNoob);\n }\n };\n\n noob.addEventListener('mousedown', (e) => {\n if (!this.gameActive) return;\n e.stopPropagation();\n \n // Kill effect\n const pop = document.createElement('div');\n pop.className = 'noob-pop';\n pop.style.left = noob.style.left;\n pop.style.top = noob.style.top;\n gameContainer.appendChild(pop);\n setTimeout(() => pop.remove(), 500);\n\n this.score += 10 * this.wave;\n scoreEl.textContent = this.score;\n this.noobsKilledInWave++;\n noob.remove();\n popSound.currentTime = 0;\n popSound.play().catch(() => {});\n\n // Wave transition\n if (this.noobsKilledInWave >= 10) {\n this.startNextWave();\n }\n });\n\n gameContainer.appendChild(noob);\n requestAnimationFrame(updateNoob);\n\n const nextSpawn = Math.max(150, 1000 - (this.wave * 100));\n this.spawnTimeout = setTimeout(spawnNoob, nextSpawn);\n };\n\n this.startNextWave = () => {\n this.isWaveIntermission = true;\n this.wave++;\n this.noobsKilledInWave = 0;\n \n // Show Begin Video button after Wave 2\n if (this.wave >= 3) {\n beginVideoBtn.classList.remove('hidden');\n }\n\n waveSound.play().catch(() => {});\n \n const banner = document.createElement('div');\n banner.style.cssText = \"position:absolute; color:yellow; font-size:3rem; font-weight:bold; text-shadow: 2px 2px #000; z-index:100;\";\n banner.textContent = `WAVE ${this.wave}`;\n gameContainer.appendChild(banner);\n\n setTimeout(() => {\n banner.remove();\n this.isWaveIntermission = false;\n waveEl.textContent = this.wave;\n spawnNoob();\n }, 2000);\n };\n\n gameContainer.addEventListener('click', () => {\n if (startHint) startHint.remove();\n }, { once: true });\n\n beginVideoBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n this.stopGameAndEnter3D();\n });\n\n spawnNoob();\n }\n\n async stopGameAndEnter3D() {\n this.gameActive = false;\n clearTimeout(this.spawnTimeout);\n \n const ytOverlay = document.getElementById('youtube-site');\n ytOverlay.classList.add('zoom-into-3d');\n \n await new Promise(r => setTimeout(r, 1500));\n ytOverlay.classList.add('hidden');\n \n this.setup3DRoom();\n }\n\n setup3DRoom() {\n // Clear old menu scene objects but keep renderer\n while(this.scene.children.length > 0){ \n this.scene.remove(this.scene.children[0]); \n }\n \n this.scene.background = new THREE.Color(0x111111);\n this.scene.fog = null;\n\n // Lighting for room\n const roomLight = new THREE.PointLight(0xffffff, 1.5, 20);\n roomLight.position.set(0, 5, 2);\n this.scene.add(roomLight);\n this.scene.add(new THREE.AmbientLight(0x404040));\n\n // Create Desk\n const deskGeo = new THREE.BoxGeometry(4, 0.1, 2);\n const deskMat = new THREE.MeshStandardMaterial({ color: 0x4a3728 });\n const desk = new THREE.Mesh(deskGeo, deskMat);\n desk.position.set(0, 1, 0);\n desk.receiveShadow = true;\n this.scene.add(desk);\n\n // Create Monitor\n const monitorBaseGeo = new THREE.BoxGeometry(0.5, 0.1, 0.5);\n const monitorBase = new THREE.Mesh(monitorBaseGeo, deskMat);\n monitorBase.position.set(0, 1.1, -0.5);\n this.scene.add(monitorBase);\n\n const monitorStandGeo = new THREE.CylinderGeometry(0.05, 0.05, 0.5);\n const monitorStand = new THREE.Mesh(monitorStandGeo, deskMat);\n monitorStand.position.set(0, 1.35, -0.5);\n this.scene.add(monitorStand);\n\n const screenFrameGeo = new THREE.BoxGeometry(2, 1.2, 0.1);\n const screenFrame = new THREE.Mesh(screenFrameGeo, new THREE.MeshStandardMaterial({ color: 0x111111 }));\n screenFrame.position.set(0, 1.9, -0.5);\n this.scene.add(screenFrame);\n\n // Screen Content (Fake Video)\n const screenContentGeo = new THREE.PlaneGeometry(1.9, 1.1);\n const screenContentMat = new THREE.MeshBasicMaterial({ \n color: 0xffffff,\n map: new THREE.TextureLoader().load('grass_texture.png') // Placeholder for \"video\"\n });\n const screenContent = new THREE.Mesh(screenContentGeo, screenContentMat);\n screenContent.position.set(0, 1.9, -0.44);\n this.scene.add(screenContent);\n\n // Load Carl sitting in a chair\n this.loadSittingNPC();\n\n // Position Camera behind the player\n this.camera.position.set(0, 2.5, 3);\n this.camera.lookAt(0, 1.8, -0.5);\n }\n\n async loadSittingNPC() {\n const loader = new GLTFLoader();\n try {\n const gltf = await loader.loadAsync('/carl_the_npc.glb');\n const carl = gltf.scene;\n carl.scale.set(0.6, 0.6, 0.6);\n carl.position.set(0, 0.5, 1);\n carl.rotation.y = 0; // Facing monitor\n\n // Add simple chair\n const chairGeo = new THREE.BoxGeometry(0.8, 0.1, 0.8);\n const chairMat = new THREE.MeshStandardMaterial({ color: 0x222222 });\n const chair = new THREE.Mesh(chairGeo, chairMat);\n chair.position.set(0, 0.7, 1);\n this.scene.add(chair);\n\n this.scene.add(carl);\n } catch (e) {\n console.error(e);\n }\n }\n>>>>>>> REPLACE\n```\n\nSummary: I added wave progression, randomized colored noobs, and death particle effects to the shooter game. I also implemented a cinematic transition where clicking \"Begin Video\" zooms the camera into the player's 3D workspace, revealing Carl sitting at a computer desk watching the video in a dark room.","page_description","The page features a 3D animated interface centered around a faux file explorer and a mock YouTube site, themed around a game interaction experience. The…","cursor","eyJpZCI6InpfMjdiOG9fa2tuNXh3MWUxdWRtIn0","token","included",[],"about",{"_188":-5},"parent","routes/browser/layout","actionData","errors"]

3D Animated Menu