[{"_1":2,"_141":-5,"_142":-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,"_56":57,"_58":59,"_60":59,"_61":62,"_63":59,"_64":65,"_66":41,"_67":59,"_68":59,"_69":59,"_70":17,"_71":25,"_72":73,"_74":75,"_76":77,"_78":79,"_80":81,"_99":-5,"_100":17,"_101":102,"_137":31,"_138":139,"_140":17},"id","ed3c486a3f26c24c7959","isMyApp",false,"name","zala-rhythm","description","Keep your anime waifu dancing by catching falling letters to the beat! This hypnotic rhythm game features a stunning 3D anime character who dances with fluid vtoon-shaded perfection as long as you maintain the flow. Miss a letter and watch your waifu freeze mid-pose as your heart breaks along with the combo.","brief","Tap falling letters to keep your anime waifu dancing in this mesmerizing 3D rhythm game!","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/ed3c486a3f26c24c7959/69567_b7fe2dd7.webp","cdnUrl","https://cdn.dev.fun/app/ed3c486a3f26c24c7959/69567","createdAt",["D",1746287726373],"updatedAt",["D",1748104443570],"lastCommitId",["B","69567"],"tier",1,"credits",-7,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":53,"_54":55},"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",231,"forkCount",0,"likeCount","runsCount",238,"downvoteCount","upvoteCount",2,"upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","CxpGDVrX2rA6penHD2zhopPYNMXAtXutizWSktwytZ18","code","import * as THREE from 'three';\nimport { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';\nimport { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';\nimport TWEEN from '@tweenjs/tween.js';\nimport * as CANNON from 'cannon-es';\nlet scene, camera, renderer, labelRenderer;\nlet characterRoot;\nlet danceStage;\nlet gameStarted = false;\nlet gameOver = false;\nlet score = 0;\nlet combo = 0;\nlet lives = 3;\nlet lettersFalling = [];\nlet lastLetterTime = 0;\nlet letterSpawnInterval = 1200;\nlet world;\nlet physicsObjects = [];\nlet characterBody;\nlet floorBody;\nlet characterMaterial;\nlet animationPlaying = false;\nlet music, successSound;\nlet danceAnimations = [];\nlet clock = new THREE.Clock();\nlet mixer;\nlet raycaster, mouse;\nlet controls, orbitControls;\nlet prevTime = performance.now();\nlet totalAssets = 0;\nlet loadedAssets = 0;\nlet assetsLoaded = false;\nlet musicLoaded = false;\nlet modelDragging = false;\nlet modelRotating = false;\nlet modelScaleFactor = 2.5;\nfunction stopGameAndShowGameOver() {\n if (music && music.isPlaying) {\n createRewindEffect(music);\n } else if (window.gameOverSound && window.gameOverSound.buffer) {\n try {\n if (window.gameOverSound.isPlaying) {\n window.gameOverSound.stop();\n }\n window.gameOverSound.play();\n } catch (e) {\n console.warn(\"Could not play game over sound:\", e);\n if (window.audioContext && window.preloadedGameOverBuffer) {\n try {\n const source = window.audioContext.createBufferSource();\n source.buffer = window.preloadedGameOverBuffer;\n source.connect(window.audioContext.destination);\n source.start(0);\n } catch (e) {\n console.warn(\"Could not play game over sound with Web Audio API:\", e);\n }\n }\n }\n }\n if (mixer) {\n mixer._actions.forEach(action => {\n action.paused = true;\n });\n }\n if (window.animState && window.animState.currentAction) {\n window.animState.currentAction.paused = true;\n } else if (danceAnimations.length > 0) {\n danceAnimations.forEach(item => {\n if (item.action) {\n item.action.paused = true;\n } else if (item.isPlaying) {\n item.paused = true;\n }\n });\n }\n convertToBlackAndWhite();\n document.getElementById('finalScoreText').textContent = `Final Score: ${score}`;\n document.getElementById('gameOverPanel').style.display = 'block';\n const gameOverStyle = document.createElement('style');\n gameOverStyle.id = 'game-over-effect';\n gameOverStyle.textContent = `\n body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);\n z-index: 999;\n pointer-events: none;\n animation: fade-in 1s forwards;\n }\n @keyframes fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n `;\n document.head.appendChild(gameOverStyle);\n discoMode.active = false;\n const discoElement = document.getElementById('disco-effect');\n if (discoElement) {\n document.head.removeChild(discoElement);\n }\n}\nfunction initPhysics() {\n world = new CANNON.World({\n gravity: new CANNON.Vec3(0, 0, 0)\n });\n world.defaultContactMaterial.friction = 0.8;\n world.defaultContactMaterial.restitution = 0.01;\n const defaultMaterial = new CANNON.Material('default');\n characterMaterial = new CANNON.Material('character');\n const floorMaterial = new CANNON.Material('floor');\n const characterToFloor = new CANNON.ContactMaterial(characterMaterial, floorMaterial, {\n friction: 0.9,\n restitution: 0.01,\n contactEquationStiffness: 1e8,\n contactEquationRelaxation: 3\n });\n const defaultContactMaterial = new CANNON.ContactMaterial(defaultMaterial, defaultMaterial, {\n friction: 0.8,\n restitution: 0.1\n });\n world.addContactMaterial(characterToFloor);\n world.addContactMaterial(defaultContactMaterial);\n world.defaultMaterial = defaultMaterial;\n}\nfunction init() {\n document.body.style.margin = '0';\n document.body.style.padding = '0';\n document.body.style.overflow = 'hidden';\n document.documentElement.style.overflow = 'hidden';\n const metaViewport = document.createElement('meta');\n metaViewport.name = 'viewport';\n metaViewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';\n document.head.appendChild(metaViewport);\n createLoadingScreen();\n initPhysics();\n const favicon = document.createElement('link');\n favicon.rel = 'icon';\n favicon.type = 'image/png';\n favicon.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAD7klEQVRYCcVXTWwTVxBeZ+11Yjs2JAGShEBIUNRIkQMH4FJVHDhx6K3iyr0/hx4R4lAJLhUHEJdWiFMRt3JCgkNFD4iKilADJCEJJCGJndjxer3v8bzJetNEbVmlVcfSaGbfm5nvm5n3ZkZgm1u5XHZRzpmmqQshRHxr6NWStVpNzRPHcfb8bTQA2rbt7Xy7OI5jO47jxYQQhbW1NQMAkBzHUYJJFkURJQxQpD7Pc4UQIkAAvTHq6z5qGMYOIcQxWjQIgq+WlpYitFkABMCFzQRK0OxUSWuDjouioABBENipS7btfuA4ztsJgiDkcrlfhoeHbzQajQA2EjF7pA0GBwd3V6vVGNEjJ7q/h0MnTpxQh0dGRnDevyQcRzp8+LDiQzAjzioIgulms5nHMJpR20LXdQNkHVYDu/Jlx8bGcpCvZrNZZXO1+x/3MIxoIcATfhDmvYYixn6iUWNvYd4DLBSLxffQvwFLHFH2jDOoRFAZrEwQR3S+HY+yubk5GhkZ+dS27ffwTGW/Y+9BdQ6Gw1D60N7B/iRpFzUE0F60/2yXGiOzPQVCbkG8XcR2GlreBPkKU+cpKSIcgA7Q0NCQ3mg0JqCsT9O0k/C+n2yHfRvBpXYYTYzvwrNS9jdQ87dA/gYqW6O1XQGE0CVK3FFkvA/Bk/AGmAiBZuXzee13jHsB3qDm5hJrPMNYGWVfb6xxXO9YAuEMPptLJF5HPwCQpW3QdQkqYtBR1/ViuVx2/gBZZzQR4IAvQcYXGSaGI4Nw8qnnea/CyXLSBycGTfBFchqRsEqlkuL+FQGSOsGFYRhKUQRd1c34BqINKKXGPtfF7Iw9z93pvhWBxEjFNnpvJ8V2DMf5LIvPn0N+JtdY03/i/HUdw4vkOvZ6S9O0JVTCE1SBpDUIEBMPsUDfzMyMNyDgANfD4+Pj2tzc3AJmNDAUYcH7GsDyPM9QXaMoMsH0N8x/gL7fQOobGDR2gvGQvHRVKkK8gT6JUxOkyGGbAozZxDsHv5MwmgeMAxgX9KK+hpOeQkOEcB7ZTWHdKs7ybIqGfYJhc/C++OjRIxMFyAeJDzD2hy0z9+7da6HUPgMQoMH5+flt3xCpVOoEztJ7YPGSbVv3S6VSmkcpWcQowIqnaVo2lUp9gtdsBDl/UigUjlqW9QVyzB4HI3QpmUyWp6amPBjzsCyIvdlsvgVMGa6ZTLJ0MwK7oL9YLBZTvBiJA9e2O5VKGfhrTmez2Q9BfBtHb+ISWUJ/1vf9Wfb5PnCwkx3vBCBtxGwBSNcG6SdDhDhnRq3D7gAAAABJRU5ErkJggg==';\n document.head.appendChild(favicon);\n scene = new THREE.Scene();\n scene.background = new THREE.Color(0x020208);\n scene.fog = new THREE.Fog(0x08030f, 100, 450);\n camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n camera.position.set(0, 503.3009552, -118.45);\n renderer = new THREE.WebGLRenderer({\n antialias: true,\n powerPreference: \"high-performance\",\n precision: \"highp\"\n });\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n renderer.shadowMap.bias = 0.00005;\n renderer.gammaOutput = true;\n renderer.gammaFactor = 2.2;\n renderer.physicallyCorrectLights = true;\n document.body.appendChild(renderer.domElement);\n labelRenderer = new CSS2DRenderer();\n labelRenderer.setSize(window.innerWidth, window.innerHeight);\n labelRenderer.domElement.style.position = 'absolute';\n labelRenderer.domElement.style.top = '0px';\n labelRenderer.domElement.style.left = '0px';\n document.body.appendChild(labelRenderer.domElement);\n orbitControls = new OrbitControls(camera, renderer.domElement);\n orbitControls.target.set(0, 0, 20);\n orbitControls.minDistance = 20;\n orbitControls.maxDistance = 800;\n orbitControls.minPolarAngle = 0;\n orbitControls.maxPolarAngle = Math.PI;\n orbitControls.enableDamping = true;\n orbitControls.dampingFactor = 0.05;\n orbitControls.rotateSpeed = 0.7;\n orbitControls.panSpeed = 0.7;\n orbitControls.zoomSpeed = 0.7;\n orbitControls.screenSpacePanning = true;\n orbitControls.update();\n controls = orbitControls;\n raycaster = new THREE.Raycaster();\n mouse = new THREE.Vector2();\n const ambientLight = new THREE.AmbientLight(0xfff5fa, 0.20);\n scene.add(ambientLight);\n const directionalLight = new THREE.DirectionalLight(0xe9d1ff, 0.5);\n directionalLight.position.set(0, 10, 10);\n directionalLight.castShadow = true;\n directionalLight.shadow.mapSize.width = 4096;\n directionalLight.shadow.mapSize.height = 4096;\n directionalLight.shadow.camera.near = 0.5;\n directionalLight.shadow.camera.far = 50;\n directionalLight.shadow.bias = -0.0005;\n directionalLight.shadow.normalBias = 0.02;\n directionalLight.shadow.radius = 2;\n directionalLight.shadow.camera.left = -30;\n directionalLight.shadow.camera.right = 30;\n directionalLight.shadow.camera.top = 30;\n directionalLight.shadow.camera.bottom = -30;\n scene.add(directionalLight);\n if (location.hash === '#debug') {\n const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);\n scene.add(cameraHelper);\n }\n const skyboxGeometry = new THREE.BoxGeometry(1000, 1000, 1000);\n const skyboxMaterials = Array(6).fill().map(() => {\n const material = new THREE.MeshBasicMaterial();\n material.side = THREE.BackSide;\n material.color.setHSL(Math.random() * 0.1 + 0.7, 0.85, 0.25);\n return material;\n });\n const skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterials);\n scene.add(skybox);\n const loadingManager = new THREE.LoadingManager();\n totalAssets += 1;\n loadingManager.onProgress = (url, itemsLoaded, itemsTotal) => {\n const percent = Math.round(itemsLoaded / itemsTotal * 100);\n console.log(`Loading: ${percent}% loaded (${url})`);\n updateLoadingProgress(percent, 'Loading stage model...');\n };\n loadingManager.onLoad = () => {\n loadedAssets += 1;\n checkAllAssetsLoaded();\n };\n loadingManager.onError = url => {\n console.error(`Error loading ${url}`);\n loadedAssets += 1;\n checkAllAssetsLoaded();\n updateLoadingProgress(100, 'Error loading stage model, using fallback');\n };\n const gltfLoader = new GLTFLoader(loadingManager);\n console.log(\"Loading stage model...\");\n gltfLoader.load('https://cdn.dev.fun/asset/ed3c486a3f26c24c7959/kda_evelynn_dance_stage_moonlight_edition_5cf4e048.glb', gltf => {\n console.log(\"Stage model loaded successfully:\", gltf);\n danceStage = gltf.scene;\n danceStage.scale.set(30, 30, 30);\n danceStage.position.set(0, -20, 0);\n danceStage.rotation.y = Math.PI / 2;\n console.log(\"Stage model hierarchy:\");\n danceStage.traverse(child => {\n console.log(`- ${child.name} (${child.type})`);\n });\n let floorMesh = null;\n danceStage.traverse(child => {\n if (child.isMesh) {\n child.receiveShadow = true;\n child.castShadow = true;\n if (child.material) {\n child.material.needsUpdate = true;\n }\n if (child.name === \"Plane.006_Floor_0\") {\n floorMesh = child;\n console.log(\"Found floor mesh:\", floorMesh);\n child.material.emissive = new THREE.Color(0x222222);\n if (floorMesh) {\n const floorShape = new CANNON.Box(new CANNON.Vec3(30, 3, 30));\n floorBody = new CANNON.Body({\n mass: 0,\n type: CANNON.Body.STATIC,\n shape: floorShape,\n material: floorMaterial || world.defaultMaterial,\n collisionFilterGroup: 1,\n collisionFilterMask: 1\n });\n const worldPos = new THREE.Vector3();\n floorMesh.getWorldPosition(worldPos);\n floorBody.position.set(worldPos.x, worldPos.y - 0.5, worldPos.z);\n const worldQuaternion = new THREE.Quaternion();\n floorMesh.getWorldQuaternion(worldQuaternion);\n floorBody.quaternion.set(worldQuaternion.x, worldQuaternion.y, worldQuaternion.z, worldQuaternion.w);\n world.addBody(floorBody);\n floorBody.userData = {\n mesh: floorMesh\n };\n physicsObjects.push({\n body: floorBody,\n mesh: floorMesh\n });\n console.log(\"Floor physics body created at position:\", floorBody.position);\n const wallThickness = 3;\n const wallHeight = 10;\n const frontWallShape = new CANNON.Box(new CANNON.Vec3(30, wallHeight, wallThickness));\n const frontWallBody = new CANNON.Body({\n mass: 0,\n type: CANNON.Body.STATIC,\n shape: frontWallShape,\n material: floorMaterial || world.defaultMaterial,\n collisionFilterGroup: 1,\n collisionFilterMask: 1\n });\n frontWallBody.position.set(worldPos.x, worldPos.y + wallHeight, worldPos.z + 15);\n world.addBody(frontWallBody);\n const backWallBody = new CANNON.Body({\n mass: 0,\n type: CANNON.Body.STATIC,\n shape: frontWallShape,\n material: world.defaultMaterial\n });\n backWallBody.position.set(worldPos.x, worldPos.y + wallHeight, worldPos.z - 15);\n world.addBody(backWallBody);\n const sideWallShape = new CANNON.Box(new CANNON.Vec3(wallThickness, wallHeight, 30));\n const leftWallBody = new CANNON.Body({\n mass: 0,\n type: CANNON.Body.STATIC,\n shape: sideWallShape,\n material: world.defaultMaterial\n });\n leftWallBody.position.set(worldPos.x - 15, worldPos.y + wallHeight, worldPos.z);\n world.addBody(leftWallBody);\n const rightWallBody = new CANNON.Body({\n mass: 0,\n type: CANNON.Body.STATIC,\n shape: sideWallShape,\n material: world.defaultMaterial\n });\n rightWallBody.position.set(worldPos.x + 15, worldPos.y + wallHeight, worldPos.z);\n world.addBody(rightWallBody);\n console.log(\"Stage walls created to prevent falling off\");\n }\n }\n }\n });\n scene.add(danceStage);\n console.log(\"Dance stage added to scene\");\n const boundingBox = new THREE.Box3().setFromObject(danceStage);\n focusCameraOnStage(boundingBox);\n if (floorMesh) {\n const worldPosition = new THREE.Vector3();\n floorMesh.getWorldPosition(worldPosition);\n console.log(\"Floor world position:\", worldPosition);\n if (characterRoot) {\n characterRoot.position.set(worldPosition.x, worldPosition.y + 0.5, worldPosition.z);\n console.log(\"Character root positioned at:\", characterRoot.position);\n }\n } else {\n console.warn(\"Could not find floor mesh 'Plane.006_Floor_0'\");\n }\n const purpleSpotlight = new THREE.SpotLight(0xb265d8, 1.2);\n purpleSpotlight.position.set(5, 15, 5);\n purpleSpotlight.angle = Math.PI / 6;\n purpleSpotlight.penumbra = 0.4;\n purpleSpotlight.decay = 1.2;\n purpleSpotlight.distance = 30;\n purpleSpotlight.intensity = 1.0;\n purpleSpotlight.castShadow = true;\n purpleSpotlight.shadow.mapSize.width = 1024;\n purpleSpotlight.shadow.mapSize.height = 1024;\n purpleSpotlight.shadow.bias = -0.0005;\n purpleSpotlight.shadow.camera.near = 1;\n purpleSpotlight.shadow.camera.far = 35;\n purpleSpotlight.shadow.camera.fov = 30;\n scene.add(purpleSpotlight);\n const blueSpotlight = new THREE.SpotLight(0x65a7d8, 1.2);\n blueSpotlight.position.set(-5, 15, 5);\n blueSpotlight.angle = Math.PI / 6;\n blueSpotlight.penumbra = 0.4;\n blueSpotlight.decay = 1.2;\n blueSpotlight.distance = 30;\n blueSpotlight.intensity = 1.0;\n blueSpotlight.castShadow = true;\n blueSpotlight.shadow.mapSize.width = 1024;\n blueSpotlight.shadow.mapSize.height = 1024;\n blueSpotlight.shadow.bias = -0.0005;\n blueSpotlight.shadow.camera.near = 1;\n blueSpotlight.shadow.camera.far = 35;\n blueSpotlight.shadow.camera.fov = 30;\n scene.add(blueSpotlight);\n const backSpotlight = new THREE.SpotLight(0xff55aa, 1);\n backSpotlight.position.set(0, 12, -8);\n backSpotlight.target.position.set(0, 0, 0);\n backSpotlight.angle = Math.PI / 5;\n backSpotlight.penumbra = 0.5;\n backSpotlight.decay = 1.8;\n backSpotlight.distance = 25;\n backSpotlight.intensity = 0.8;\n backSpotlight.castShadow = true;\n backSpotlight.shadow.mapSize.width = 1024;\n backSpotlight.shadow.mapSize.height = 1024;\n backSpotlight.shadow.bias = -0.0005;\n scene.add(backSpotlight);\n scene.add(backSpotlight.target);\n }, xhr => {\n console.log(`Stage loading: ${Math.round(xhr.loaded / xhr.total * 100)}% loaded`);\n }, error => {\n console.error('An error occurred loading the dance stage:', error);\n const errorDiv = document.createElement('div');\n errorDiv.style.position = 'absolute';\n errorDiv.style.top = '10px';\n errorDiv.style.left = '10px';\n errorDiv.style.backgroundColor = 'rgba(255,0,0,0.7)';\n errorDiv.style.color = 'white';\n errorDiv.style.padding = '10px';\n errorDiv.style.borderRadius = '5px';\n errorDiv.style.fontFamily = 'monospace';\n errorDiv.style.zIndex = '1000';\n errorDiv.innerHTML = `Error loading model: ${error.message || 'Unknown error'}`;\n document.body.appendChild(errorDiv);\n const floorGeometry = new THREE.PlaneGeometry(20, 20);\n const floorMaterial = new THREE.MeshStandardMaterial({\n color: 0x1A1A1A,\n metalness: 0.8,\n roughness: 0.2\n });\n const floor = new THREE.Mesh(floorGeometry, floorMaterial);\n floor.rotation.x = -Math.PI / 2;\n floor.position.y = -0.05;\n floor.receiveShadow = true;\n scene.add(floor);\n console.log(\"Fallback floor created\");\n });\n createCharacter();\n createUI();\n loadSounds();\n window.addEventListener('resize', onWindowResize);\n window.addEventListener('mousedown', onMouseDown);\n animate();\n}\nfunction focusCameraOnStage(boundingBox) {\n const center = new THREE.Vector3();\n boundingBox.getCenter(center);\n const size = new THREE.Vector3();\n boundingBox.getSize(size);\n console.log(\"Stage dimensions:\", size);\n console.log(\"Stage center:\", center);\n controls.target.copy(center);\n controls.update();\n console.log(\"Camera focused on stage\");\n camera.lookAt(center);\n controls.target.copy(center);\n controls.update();\n}\nfunction createCharacter() {\n characterRoot = new THREE.Group();\n scene.add(characterRoot);\n modelScaleFactor = 26.47 * 1.25;\n console.log(\"Empty character root created with scale:\", modelScaleFactor);\n const characterLoadingManager = new THREE.LoadingManager();\n characterLoadingManager.onProgress = (url, itemsLoaded, itemsTotal) => {\n const percent = Math.round(itemsLoaded / itemsTotal * 100);\n console.log(`Character loading: ${percent}% loaded (${url})`);\n updateLoadingProgress(percent, 'Loading character model...');\n };\n characterLoadingManager.onError = url => {\n console.error(\"Error loading character model from URL:\", url);\n createFallbackCharacter();\n loadedAssets += 1;\n checkAllAssetsLoaded();\n };\n const gltfLoader = new GLTFLoader(characterLoadingManager);\n totalAssets += 1;\n console.log(\"Loading character model...\");\n gltfLoader.load('https://cdn.dev.fun/asset/ed3c486a3f26c24c7959/zala_dancing (2)_6e8a121c.glb', gltf => {\n console.log(\"Character model loaded successfully\");\n const model = gltf.scene;\n characterRoot.add(model);\n model.traverse(child => {\n if (child.isMesh) {\n if (child.material) {\n child.material.needsUpdate = true;\n child.material.side = THREE.DoubleSide;\n child.castShadow = true;\n child.receiveShadow = true;\n }\n }\n });\n mixer = new THREE.AnimationMixer(model);\n if (gltf.animations && gltf.animations.length > 0) {\n console.log(`Found ${gltf.animations.length} animations in model`);\n console.log(\"Available animations:\");\n gltf.animations.forEach((clip, index) => {\n console.log(`Animation ${index}: ${clip.name}`);\n });\n const animClips = {};\n gltf.animations.forEach(clip => {\n animClips[clip.name] = clip;\n });\n const animationSequence = ['SnakeDance|Hiphop1', 'SnakeDance|Hiphop2', 'SnakeDance|Hiphop3', 'SnakeDance|SnakeDance'];\n animationSequence.forEach(animName => {\n if (!animClips[animName]) {\n console.warn(`Warning: Animation \"${animName}\" not found in model!`);\n } else {\n console.log(`Animation \"${animName}\" found and ready to play.`);\n }\n });\n const bbox = new THREE.Box3().setFromObject(model);\n const size = new THREE.Vector3();\n bbox.getSize(size);\n let floorPosition = new THREE.Vector3(0, 0, 0);\n if (danceStage) {\n danceStage.traverse(child => {\n if (child.isMesh && child.name === \"Plane.006_Floor_0\") {\n child.getWorldPosition(floorPosition);\n }\n });\n }\n const characterHeight = size.y * 0.8;\n const characterRadius = Math.max(size.x, size.z) * 0.3;\n const characterShape = new CANNON.Box(new CANNON.Vec3(characterRadius, characterHeight / 2, characterRadius));\n characterBody = new CANNON.Body({\n mass: 5,\n position: new CANNON.Vec3(floorPosition.x, floorPosition.y + 3.5, floorPosition.z),\n shape: characterShape,\n material: characterMaterial || world.defaultMaterial,\n linearDamping: 0.9,\n angularDamping: 0.9,\n fixedRotation: true,\n collisionFilterGroup: 1,\n collisionFilterMask: 1\n });\n characterBody.angularFactor.set(0, 0, 0);\n characterBody.addEventListener(\"collide\", function (e) {\n if (e.body === floorBody) {\n console.log(\"Character collided with floor at position:\", characterBody.position.y);\n const flashStyle = document.createElement('style');\n flashStyle.id = 'collision-flash';\n flashStyle.textContent = `\n body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 255, 0, 0.1);\n z-index: 1000;\n pointer-events: none;\n animation: flash-fade 0.5s forwards;\n }\n @keyframes flash-fade {\n from { opacity: 1; }\n to { opacity: 0; }\n }\n `;\n document.head.appendChild(flashStyle);\n setTimeout(() => {\n if (document.getElementById('collision-flash')) {\n document.head.removeChild(document.getElementById('collision-flash'));\n }\n }, 500);\n }\n });\n world.addBody(characterBody);\n characterBody.userData = {\n mesh: characterRoot\n };\n physicsObjects.push({\n body: characterBody,\n mesh: characterRoot\n });\n console.log(\"Character physics body created with dimensions:\", size);\n console.log(\"Character positioned on stage at:\", characterBody.position);\n window.animState = {\n currentAnimIndex: 0,\n loopCount: 0,\n maxLoops: 10,\n currentAction: null,\n sequence: animationSequence,\n clips: animClips,\n animationEnabled: true,\n loopsByAnimation: {\n 'SnakeDance|Hiphop2': 2,\n 'SnakeDance|SnakeDance': 2,\n 'SnakeDance|Hiphop3': 8\n }\n };\n window.trackedBones = ['Hips', 'Spine', 'LeftArm', 'RightArm', 'LeftLeg', 'RightLeg', 'Head', 'LeftForeArm', 'RightForeArm'];\n window.pendingTransition = null;\n window.getCurrentPose = function (model) {\n const pose = {};\n model.traverse(node => {\n if (node.isBone && window.trackedBones.some(boneName => node.name.includes(boneName))) {\n pose[node.name] = {\n position: node.position.clone(),\n quaternion: node.quaternion.clone()\n };\n }\n });\n return pose;\n };\n window.getPoseAtTime = function (action, time, mixer) {\n const originalTime = action.time;\n action.time = time;\n mixer.update(0);\n const pose = window.getCurrentPose(action.getRoot());\n action.time = originalTime;\n return pose;\n };\n window.computePoseDistance = function (pose1, pose2) {\n let distance = 0;\n let count = 0;\n for (const boneName in pose1) {\n if (pose2[boneName]) {\n distance += pose1[boneName].position.distanceToSquared(pose2[boneName].position);\n distance += 1 - Math.abs(pose1[boneName].quaternion.dot(pose2[boneName].quaternion));\n count++;\n }\n }\n return count > 0 ? distance / count : Infinity;\n };\n window.findBestPoseMatch = function (currentAction, newAction, mixer) {\n const currentPose = window.getCurrentPose(currentAction.getRoot());\n const targetClip = newAction.getClip();\n let bestTime = 0;\n let minDistance = Infinity;\n const step = targetClip.duration / 20;\n for (let t = 0; t <= targetClip.duration; t += step) {\n const originalTime = newAction.time;\n newAction.time = t;\n mixer.update(0);\n const targetPose = window.getCurrentPose(newAction.getRoot());\n newAction.time = originalTime;\n const distance = window.computePoseDistance(currentPose, targetPose);\n if (distance < minDistance) {\n minDistance = distance;\n bestTime = t;\n }\n }\n return bestTime;\n };\n window.executeSmartTransition = function (currentAction, newAction, duration, mixer) {\n if (!currentAction || !newAction) return;\n try {\n const bestTime = window.findBestPoseMatch(currentAction, newAction, mixer);\n console.log(`Found best transition point at time: ${bestTime.toFixed(2)}s`);\n newAction.enabled = true;\n newAction.time = bestTime;\n newAction.setLoop(THREE.LoopRepeat, Infinity);\n newAction.clampWhenFinished = false;\n newAction.play();\n currentAction.crossFadeTo(newAction, duration, true);\n return newAction;\n } catch (e) {\n console.warn(\"Smart transition failed, using direct transition\", e);\n currentAction.stop();\n newAction.play();\n return newAction;\n }\n };\n const firstClip = animClips[animationSequence[0]];\n if (firstClip) {\n console.log(`Starting first animation: ${animationSequence[0]}`);\n const action = mixer.clipAction(firstClip);\n action.setLoop(THREE.LoopRepeat, Infinity);\n action.clampWhenFinished = false;\n action.play();\n window.animState.currentAction = action;\n mixer.addEventListener('loop', e => {\n if (e.action === window.animState.currentAction) {\n window.animState.loopCount++;\n const currentAnimName = window.animState.sequence[window.animState.currentAnimIndex];\n const maxLoopsForAnimation = window.animState.loopsByAnimation[currentAnimName] || window.animState.maxLoops;\n console.log(`Animation loop completed: ${window.animState.loopCount}/${maxLoopsForAnimation} for ${currentAnimName}`);\n if (window.animState.loopCount >= maxLoopsForAnimation) {\n window.animState.loopCount = 0;\n window.animState.currentAnimIndex = (window.animState.currentAnimIndex + 1) % window.animState.sequence.length;\n const nextAnimName = window.animState.sequence[window.animState.currentAnimIndex];\n console.log(`Switching to animation: ${nextAnimName}`);\n try {\n if (window.animState.clips[nextAnimName]) {\n const currentAction = window.animState.currentAction;\n const newAction = mixer.clipAction(window.animState.clips[nextAnimName]);\n newAction.setLoop(THREE.LoopRepeat, Infinity);\n newAction.clampWhenFinished = false;\n window.animState.currentAction = window.executeSmartTransition(currentAction, newAction, 0.5, mixer);\n setTimeout(() => {\n if (!newAction.isRunning()) {\n console.log(\"Animation failed to start properly, retrying\");\n newAction.reset();\n newAction.play();\n }\n }, 100);\n } else {\n console.warn(`Animation ${nextAnimName} not found in model!`);\n }\n } catch (error) {\n console.error(\"Animation transition error:\", error);\n window.animState.currentAnimIndex = (window.animState.currentAnimIndex + 1) % window.animState.sequence.length;\n }\n }\n }\n });\n animationPlaying = true;\n danceAnimations = [action];\n } else {\n console.warn(`First animation ${animationSequence[0]} not found!`);\n }\n } else {\n console.warn(\"No animations found in the character model\");\n }\n const baseScale = 8;\n const targetScale = baseScale * modelScaleFactor;\n model.scale.set(targetScale, targetScale, targetScale);\n loadedAssets += 1;\n checkAllAssetsLoaded();\n scene.onBeforeRenderObservable = scene.onBeforeRenderObservable || {\n add: fn => scene._onBeforeRenderFunctions.push(fn)\n };\n if (!scene._onBeforeRenderFunctions) scene._onBeforeRenderFunctions = [];\n const cameraDirection = new THREE.Vector3();\n camera.getWorldDirection(cameraDirection);\n const distanceFromCamera = 25;\n const characterPosition = new THREE.Vector3().copy(camera.position).add(cameraDirection.multiplyScalar(distanceFromCamera));\n characterRoot.position.copy(characterPosition);\n model.rotation.y = 0;\n if (danceStage) {\n danceStage.traverse(child => {\n if (child.isMesh && child.name === \"Plane.006_Floor_0\") {\n const worldPosition = new THREE.Vector3();\n child.getWorldPosition(worldPosition);\n const newYPosition = worldPosition.y - 0.5;\n const lowerYPosition = newYPosition - Math.abs(newYPosition) * 0.5;\n characterRoot.position.set(characterPosition.x, lowerYPosition, characterPosition.z);\n console.log(\"Character positioned on dance floor and moved back for letter visibility at:\", characterRoot.position);\n }\n });\n } else {\n characterRoot.position.y = -0.75;\n console.log(\"Character positioned further back from camera at:\", characterRoot.position);\n }\n }, xhr => {\n console.log(`Character loading: ${Math.round(xhr.loaded / xhr.total * 100)}% loaded`);\n updateLoadingProgress(Math.round(xhr.loaded / xhr.total * 100), 'Loading character model...');\n }, error => {\n console.error(\"Error loading character model:\", error);\n createFallbackCharacter();\n loadedAssets += 1;\n checkAllAssetsLoaded();\n });\n setTimeout(() => {\n if (!mixer && characterRoot.children.length === 0) {\n console.log(\"Retrying character model load with different settings...\");\n const retryLoader = new GLTFLoader();\n retryLoader.setCrossOrigin('anonymous');\n retryLoader.load('https://cdn.dev.fun/asset/ed3c486a3f26c24c7959/zala_dancing (2)_6e8a121c.glb', onModelLoaded, xhr => console.log(`Retry loading: ${Math.round(xhr.loaded / xhr.total * 100)}%`), error => console.error(\"Retry loading failed:\", error));\n }\n }, 5000);\n scaleModelBasedOnScreenSize();\n}\nfunction createFallbackCharacter() {\n console.log(\"Creating fallback character\");\n const body = new THREE.Group();\n const headGeometry = new THREE.SphereGeometry(0.5, 16, 16);\n const headMaterial = new THREE.MeshStandardMaterial({\n color: 0xffcccc\n });\n const head = new THREE.Mesh(headGeometry, headMaterial);\n head.position.y = 2;\n body.add(head);\n const torsoGeometry = new THREE.CylinderGeometry(0.5, 0.4, 1.5, 8);\n const torsoMaterial = new THREE.MeshStandardMaterial({\n color: 0xcc88ff\n });\n const torso = new THREE.Mesh(torsoGeometry, torsoMaterial);\n torso.position.y = 0.75;\n body.add(torso);\n const armGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1.2, 8);\n const armMaterial = new THREE.MeshStandardMaterial({\n color: 0xffcccc\n });\n const leftArm = new THREE.Mesh(armGeometry, armMaterial);\n leftArm.position.set(-0.8, 0.8, 0);\n leftArm.rotation.z = Math.PI / 3;\n body.add(leftArm);\n const rightArm = new THREE.Mesh(armGeometry, armMaterial);\n rightArm.position.set(0.8, 0.8, 0);\n rightArm.rotation.z = -Math.PI / 3;\n body.add(rightArm);\n const legGeometry = new THREE.CylinderGeometry(0.25, 0.2, 1.5, 8);\n const legMaterial = new THREE.MeshStandardMaterial({\n color: 0xcc88ff\n });\n const leftLeg = new THREE.Mesh(legGeometry, legMaterial);\n leftLeg.position.set(-0.3, -0.5, 0);\n body.add(leftLeg);\n const rightLeg = new THREE.Mesh(legGeometry, legMaterial);\n rightLeg.position.set(0.3, -0.5, 0);\n body.add(rightLeg);\n body.scale.set(1.5, 1.5, 1.5);\n characterRoot.add(body);\n mixer = new THREE.AnimationMixer(body);\n const danceClip = createFallbackAnimation(body);\n const action = mixer.clipAction(danceClip);\n action.play();\n window.animState = {\n currentAnimIndex: 0,\n loopCount: 0,\n maxLoops: 10,\n currentAction: action,\n sequence: ['fallbackDance'],\n clips: {\n 'fallbackDance': danceClip\n },\n animationEnabled: true\n };\n console.log(\"Fallback character created successfully\");\n}\nfunction createFallbackAnimation(body) {\n const times = [0, 0.5, 1, 1.5, 2];\n const values = [];\n for (let i = 0; i < 5; i++) {\n values.push(0, Math.sin(i * Math.PI) * 0.2, 0);\n }\n const positionKF = new THREE.VectorKeyframeTrack('.position', times, values);\n const rotValues = [];\n for (let i = 0; i < 5; i++) {\n rotValues.push(0, Math.sin(i * Math.PI) * 0.1, Math.cos(i * Math.PI) * 0.1);\n }\n const rotationKF = new THREE.VectorKeyframeTrack('.rotation', times, rotValues);\n return new THREE.AnimationClip('fallbackDance', 2, [positionKF, rotationKF]);\n}\nfunction onModelLoaded(gltf) {\n if (characterRoot.children.length > 0) {\n console.log(\"Model already loaded, ignoring duplicate\");\n return;\n }\n console.log(\"Character model loaded successfully on retry\");\n const model = gltf.scene;\n characterRoot.add(model);\n const pos = {\n x: -0.90,\n y: 443.78,\n z: 46.04\n };\n const rot = {\n x: -180.00,\n y: 0.31,\n z: -180.00\n };\n characterRoot.position.set(pos.x, pos.y, pos.z);\n characterRoot.rotation.set(rot.x * Math.PI / 180, rot.y * Math.PI / 180, rot.z * Math.PI / 180);\n console.log(\"Applied required coordinates to model:\", pos);\n modelScaleFactor = 33.09 * 1.25;\n const materialClones = new Map();\n model.traverse(child => {\n if (child.isMesh) {\n if (child.material) {\n if (!materialClones.has(child.material.uuid)) {\n const materialClone = child.material.clone();\n materialClone.needsUpdate = true;\n materialClones.set(child.material.uuid, materialClone);\n }\n child.material = materialClones.get(child.material.uuid);\n if (child.material.map) {\n child.material.map.anisotropy = 16;\n child.material.map.needsUpdate = true;\n child.material.map.generateMipmaps = true;\n }\n child.material.side = THREE.DoubleSide;\n child.material.needsUpdate = true;\n child.material.skinning = true;\n child.material.morphTargets = true;\n child.material.morphNormals = true;\n child.castShadow = true;\n child.receiveShadow = true;\n child.userData.originalMaterial = child.material;\n }\n }\n });\n mixer = new THREE.AnimationMixer(model);\n if (gltf.animations && gltf.animations.length > 0) {\n console.log(`Found ${gltf.animations.length} animations in model`);\n console.log(\"Available animations:\");\n const animClips = {};\n gltf.animations.forEach((clip, index) => {\n console.log(`Animation ${index}: ${clip.name}`);\n const clonedClip = THREE.AnimationClip.parse(THREE.AnimationClip.toJSON(clip));\n const filteredTracks = [];\n for (const track of clonedClip.tracks) {\n if (!track.name.includes('.material') && (track.name.includes('.position') || track.name.includes('.quaternion') || track.name.includes('.scale') || track.name.includes('.morphTargetInfluences'))) {\n filteredTracks.push(track);\n }\n }\n clonedClip.tracks = filteredTracks;\n animClips[clip.name] = clonedClip;\n });\n const animationSequence = ['SnakeDance|Hiphop1', 'SnakeDance|Hiphop2', 'SnakeDance|Hiphop3', 'SnakeDance|SnakeDance'];\n animationSequence.forEach(animName => {\n if (!animClips[animName]) {\n console.warn(`Warning: Animation \"${animName}\" not found in model!`);\n } else {\n console.log(`Animation \"${animName}\" found and ready to play.`);\n }\n });\n window.animState = {\n currentAnimIndex: 0,\n loopCount: 0,\n maxLoops: 10,\n currentAction: null,\n sequence: animationSequence,\n clips: animClips,\n animationEnabled: true,\n materialLocked: true,\n loopsByAnimation: {\n 'SnakeDance|Hiphop2': 2,\n 'SnakeDance|SnakeDance': 2,\n 'SnakeDance|Hiphop3': 8\n }\n };\n window.originalMaterialStates = new Map();\n model.traverse(child => {\n if (child.isMesh && child.material) {\n window.originalMaterialStates.set(child.uuid, child.material.clone());\n }\n });\n if (!window.trackedBones) {\n window.trackedBones = ['Hips', 'Spine', 'LeftArm', 'RightArm', 'LeftLeg', 'RightLeg', 'Head', 'LeftForeArm', 'RightForeArm'];\n window.getCurrentPose = function (model) {\n const pose = {};\n model.traverse(node => {\n if (node.isBone && window.trackedBones.some(boneName => node.name.includes(boneName))) {\n pose[node.name] = {\n position: node.position.clone(),\n quaternion: node.quaternion.clone()\n };\n }\n });\n return pose;\n };\n window.getPoseAtTime = function (action, time, mixer) {\n const originalTime = action.time;\n action.time = time;\n mixer.update(0);\n const pose = window.getCurrentPose(action.getRoot());\n action.time = originalTime;\n return pose;\n };\n window.computePoseDistance = function (pose1, pose2) {\n let distance = 0;\n let count = 0;\n for (const boneName in pose1) {\n if (pose2[boneName]) {\n distance += pose1[boneName].position.distanceToSquared(pose2[boneName].position);\n distance += 1 - Math.abs(pose1[boneName].quaternion.dot(pose2[boneName].quaternion));\n count++;\n }\n }\n return count > 0 ? distance / count : Infinity;\n };\n window.findBestPoseMatch = function (currentAction, newAction, mixer) {\n const currentPose = window.getCurrentPose(currentAction.getRoot());\n const targetClip = newAction.getClip();\n let bestTime = 0;\n let minDistance = Infinity;\n const step = targetClip.duration / 20;\n for (let t = 0; t <= targetClip.duration; t += step) {\n const originalTime = newAction.time;\n newAction.time = t;\n mixer.update(0);\n const targetPose = window.getCurrentPose(newAction.getRoot());\n newAction.time = originalTime;\n const distance = window.computePoseDistance(currentPose, targetPose);\n if (distance < minDistance) {\n minDistance = distance;\n bestTime = t;\n }\n }\n return bestTime;\n };\n window.executeSmartTransition = function (currentAction, newAction, duration, mixer) {\n if (!currentAction || !newAction) return;\n try {\n const bestTime = window.findBestPoseMatch(currentAction, newAction, mixer);\n console.log(`Found best transition point at time: ${bestTime.toFixed(2)}s`);\n newAction.enabled = true;\n newAction.time = bestTime;\n newAction.setLoop(THREE.LoopRepeat, Infinity);\n newAction.clampWhenFinished = false;\n newAction.play();\n currentAction.crossFadeTo(newAction, duration, true);\n return newAction;\n } catch (e) {\n console.warn(\"Smart transition failed, using direct transition\", e);\n currentAction.stop();\n newAction.play();\n return newAction;\n }\n };\n }\n const firstClip = animClips[animationSequence[0]];\n if (firstClip) {\n console.log(`Starting first animation: ${animationSequence[0]}`);\n const action = mixer.clipAction(firstClip);\n action.setLoop(THREE.LoopRepeat, Infinity);\n action.clampWhenFinished = false;\n action.play();\n window.animState.currentAction = action;\n mixer.addEventListener('loop', e => {\n if (e.action === window.animState.currentAction) {\n window.animState.loopCount++;\n console.log(`Animation loop completed: ${window.animState.loopCount}/${window.animState.maxLoops}`);\n ensureMaterialConsistency(model);\n if (window.animState.loopCount >= window.animState.maxLoops) {\n window.animState.loopCount = 0;\n window.animState.currentAnimIndex = (window.animState.currentAnimIndex + 1) % window.animState.sequence.length;\n const nextAnimName = window.animState.sequence[window.animState.currentAnimIndex];\n console.log(`Switching to animation: ${nextAnimName}`);\n if (window.animState.clips[nextAnimName]) {\n model.traverse(child => {\n if (child.isMesh && child.material) {\n child.material.needsUpdate = true;\n }\n });\n const currentAction = window.animState.currentAction;\n const newAction = mixer.clipAction(window.animState.clips[nextAnimName]);\n newAction.setLoop(THREE.LoopRepeat, Infinity);\n newAction.clampWhenFinished = false;\n window.animState.currentAction = window.executeSmartTransition(currentAction, newAction, 0.5, mixer);\n setTimeout(() => {\n ensureMaterialConsistency(model);\n }, 600);\n } else {\n console.warn(`Animation ${nextAnimName} not found in model!`);\n }\n }\n }\n });\n animationPlaying = true;\n danceAnimations = [action];\n const materialGuardian = setInterval(() => {\n if (window.animState && window.animState.animationEnabled && !gameOver) {\n ensureMaterialConsistency(model);\n } else {\n clearInterval(materialGuardian);\n }\n }, 1000);\n } else {\n console.warn(`First animation ${animationSequence[0]} not found!`);\n }\n } else {\n console.warn(\"No animations found in the character model\");\n }\n window.ensureMaterialConsistency = ensureMaterialConsistency;\n model.scale.set(4, 4, 4);\n scaleModelBasedOnScreenSize();\n loadedAssets += 1;\n checkAllAssetsLoaded();\n}\nfunction ensureMaterialConsistency(model) {\n if (!model || !window.originalMaterialStates) return;\n model.traverse(child => {\n if (child.isMesh && child.material) {\n if (child.material.version === undefined || !child.material.uuid || child.material._listeners === null) {\n if (window.originalMaterialStates.has(child.uuid)) {\n console.log(\"Restoring corrupted material for\", child.name);\n const originalMaterial = window.originalMaterialStates.get(child.uuid).clone();\n child.material = originalMaterial;\n child.material.needsUpdate = true;\n } else if (child.userData.originalMaterial) {\n console.log(\"Restoring material from userData for\", child.name);\n child.material = child.userData.originalMaterial.clone();\n child.material.needsUpdate = true;\n }\n }\n if (child.material.map) {\n child.material.map.needsUpdate = true;\n }\n }\n });\n}\nfunction createUI() {\n const fontLink = document.createElement('link');\n fontLink.rel = 'stylesheet';\n fontLink.href = 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Chakra+Petch:wght@300;400;700&display=swap';\n document.head.appendChild(fontLink);\n if (location.hash === '#debug') {\n const audioDebugPanel = document.createElement('div');\n audioDebugPanel.style.position = 'absolute';\n audioDebugPanel.style.bottom = '10px';\n audioDebugPanel.style.right = '10px';\n audioDebugPanel.style.backgroundColor = 'rgba(0,0,0,0.7)';\n audioDebugPanel.style.padding = '10px';\n audioDebugPanel.style.borderRadius = '5px';\n audioDebugPanel.style.zIndex = '1000';\n const volumeControl = document.createElement('input');\n volumeControl.type = 'range';\n volumeControl.min = '0';\n volumeControl.max = '1';\n volumeControl.step = '0.1';\n volumeControl.value = '0.8';\n volumeControl.addEventListener('input', function () {\n if (music) {\n music.setVolume(parseFloat(this.value));\n volumeLabel.textContent = `Volume: ${Math.round(this.value * 100)}%`;\n }\n });\n const volumeLabel = document.createElement('div');\n volumeLabel.textContent = 'Volume: 80%';\n volumeLabel.style.color = 'white';\n volumeLabel.style.marginBottom = '5px';\n const playButton = document.createElement('button');\n playButton.textContent = 'Play Music';\n playButton.style.margin = '5px';\n playButton.style.padding = '5px 10px';\n playButton.addEventListener('click', function () {\n if (music && music.buffer && !music.isPlaying) {\n music.play();\n }\n });\n const stopButton = document.createElement('button');\n stopButton.textContent = 'Stop Music';\n stopButton.style.margin = '5px';\n stopButton.style.padding = '5px 10px';\n stopButton.addEventListener('click', function () {\n if (music && music.isPlaying) {\n music.stop();\n }\n });\n audioDebugPanel.appendChild(volumeLabel);\n audioDebugPanel.appendChild(volumeControl);\n audioDebugPanel.appendChild(playButton);\n audioDebugPanel.appendChild(stopButton);\n document.body.appendChild(audioDebugPanel);\n }\n const style = document.createElement('style');\n style.textContent = `\n @keyframes shake {\n 0% { transform: translateX(0); }\n 10% { transform: translateX(-5px); }\n 20% { transform: translateX(5px); }\n 30% { transform: translateX(-5px); }\n 40% { transform: translateX(5px); }\n 50% { transform: translateX(-5px); }\n 60% { transform: translateX(5px); }\n 70% { transform: translateX(-5px); }\n 80% { transform: translateX(5px); }\n 90% { transform: translateX(-5px); }\n 100% { transform: translateX(0); }\n }\n @keyframes screenGlow {\n 0% { box-shadow: inset 0 0 50px rgba(0, 255, 255, 0.5), inset 0 0 100px rgba(0, 255, 255, 0.2); }\n 50% { box-shadow: inset 0 0 70px rgba(0, 255, 255, 0.8), inset 0 0 120px rgba(0, 255, 255, 0.5); }\n 100% { box-shadow: inset 0 0 50px rgba(0, 255, 255, 0.5), inset 0 0 100px rgba(0, 255, 255, 0.2); }\n }\n @keyframes neonPulse {\n 0% { text-shadow: 0 0 5px rgba(0, 195, 255, 0.8), 0 0 10px rgba(0, 195, 255, 0.6), 0 0 20px rgba(0, 195, 255, 0.4); }\n 50% { text-shadow: 0 0 10px rgba(0, 195, 255, 1.0), 0 0 20px rgba(0, 195, 255, 0.8), 0 0 30px rgba(0, 195, 255, 0.6); }\n 100% { text-shadow: 0 0 5px rgba(0, 195, 255, 0.8), 0 0 10px rgba(0, 195, 255, 0.6), 0 0 20px rgba(0, 195, 255, 0.4); }\n }\n @keyframes borderGlow {\n 0% { box-shadow: 0 0 5px #00c3ff, 0 0 10px #00c3ff, inset 0 0 5px #00c3ff; }\n 50% { box-shadow: 0 0 15px #ff00ea, 0 0 25px #ff00ea, inset 0 0 15px #ff00ea; }\n 100% { box-shadow: 0 0 5px #00c3ff, 0 0 10px #00c3ff, inset 0 0 5px #00c3ff; }\n }\n @keyframes gradientShift {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n .neon-text {\n font-family: 'Orbitron', sans-serif;\n color: #ffffff;\n text-shadow: 0 0 5px rgba(0, 195, 255, 0.7), 0 0 10px rgba(0, 195, 255, 0.5), 0 0 20px rgba(0, 195, 255, 0.3);\n animation: neonPulse 2s infinite;\n }\n .neon-panel {\n border: 2px solid #00c3ff;\n box-shadow: 0 0 10px #00c3ff, inset 0 0 5px #00c3ff;\n background: linear-gradient(135deg, rgba(15, 15, 35, 0.92) 0%, rgba(35, 3, 60, 0.92) 100%);\n animation: borderGlow 4s infinite;\n }\n .neon-button {\n font-family: 'Orbitron', sans-serif;\n background: linear-gradient(90deg, #ff00ea, #00c3ff, #ff00ea);\n background-size: 200% 200%;\n animation: gradientShift 3s ease infinite;\n color: white;\n text-shadow: 0 0 5px white;\n border: none;\n border-radius: 10px;\n padding: 10px 20px;\n cursor: pointer;\n transition: all 0.3s;\n box-shadow: 0 0 10px rgba(0, 195, 255, 0.7);\n }\n .neon-button:hover {\n box-shadow: 0 0 20px rgba(0, 195, 255, 1);\n transform: scale(1.05);\n }\n .shake-animation {\n animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;\n color: #FF6666 !important;\n font-weight: bold;\n }\n `;\n document.head.appendChild(style);\n const uiContainer = document.createElement('div');\n uiContainer.style.position = 'absolute';\n uiContainer.style.top = '0';\n uiContainer.style.left = '0';\n uiContainer.style.width = '100%';\n uiContainer.style.height = '100%';\n uiContainer.style.pointerEvents = 'none';\n uiContainer.style.zIndex = '10';\n document.body.appendChild(uiContainer);\n const gridContainer = document.createElement('div');\n gridContainer.style.position = 'absolute';\n gridContainer.style.top = '0';\n gridContainer.style.left = '0';\n gridContainer.style.width = '100%';\n gridContainer.style.height = '100%';\n gridContainer.style.pointerEvents = 'none';\n gridContainer.style.zIndex = '5';\n gridContainer.style.display = 'flex';\n gridContainer.style.justifyContent = 'space-around';\n document.body.appendChild(gridContainer);\n let columns = 5;\n if (window.innerWidth < 768) {\n columns = 3;\n }\n for (let i = 0; i < columns; i++) {\n const gridColumn = document.createElement('div');\n gridColumn.style.width = columns === 3 ? '20%' : '15%';\n gridColumn.style.height = '100%';\n gridColumn.style.borderLeft = '1px dotted rgba(255, 255, 255, 0.1)';\n gridColumn.style.borderRight = '1px dotted rgba(255, 255, 255, 0.1)';\n gridColumn.dataset.columnIndex = i;\n gridContainer.appendChild(gridColumn);\n }\n const scorePanel = document.createElement('div');\n scorePanel.style.position = 'absolute';\n scorePanel.style.top = window.innerWidth < 768 ? '10px' : '20px';\n scorePanel.style.right = window.innerWidth < 768 ? '10px' : '20px';\n scorePanel.style.width = window.innerWidth < 768 ? '160px' : '220px';\n scorePanel.style.height = window.innerWidth < 768 ? '70px' : '80px';\n scorePanel.style.backgroundColor = 'rgba(15, 10, 40, 0.7)';\n scorePanel.style.borderRadius = '10px';\n scorePanel.style.border = '2px solid #00c3ff';\n scorePanel.style.padding = window.innerWidth < 768 ? '5px' : '10px';\n scorePanel.style.color = 'white';\n scorePanel.style.fontFamily = \"'Orbitron', sans-serif\";\n scorePanel.classList.add('neon-panel');\n scorePanel.style.textAlign = 'center';\n scorePanel.style.display = 'flex';\n scorePanel.style.flexDirection = 'column';\n scorePanel.style.justifyContent = 'center';\n uiContainer.appendChild(scorePanel);\n const scoreText = document.createElement('div');\n scoreText.id = 'scoreText';\n scoreText.textContent = 'SCORE: 0';\n scoreText.style.fontSize = window.innerWidth < 768 ? '18px' : '24px';\n scoreText.style.marginBottom = window.innerWidth < 768 ? '2px' : '5px';\n scoreText.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n scoreText.classList.add('neon-text');\n scorePanel.appendChild(scoreText);\n const comboText = document.createElement('div');\n comboText.id = 'comboText';\n comboText.textContent = 'STREAK: 0';\n comboText.style.fontSize = window.innerWidth < 768 ? '16px' : '20px';\n comboText.style.color = '#00ffff';\n comboText.style.textShadow = '0 0 10px #00ffff';\n comboText.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n scorePanel.appendChild(comboText);\n const livesPanel = document.createElement('div');\n livesPanel.style.position = 'absolute';\n livesPanel.style.top = window.innerWidth < 768 ? '10px' : '20px';\n livesPanel.style.left = window.innerWidth < 768 ? '10px' : '20px';\n livesPanel.style.width = window.innerWidth < 768 ? '90px' : '120px';\n livesPanel.style.height = window.innerWidth < 768 ? '35px' : '40px';\n livesPanel.style.backgroundColor = 'rgba(15, 10, 40, 0.7)';\n livesPanel.style.borderRadius = '10px';\n livesPanel.style.border = '2px solid #00c3ff';\n livesPanel.style.padding = window.innerWidth < 768 ? '2px' : '5px';\n livesPanel.style.color = 'white';\n livesPanel.style.fontFamily = \"'Orbitron', sans-serif\";\n livesPanel.classList.add('neon-panel');\n livesPanel.style.textAlign = 'center';\n livesPanel.style.display = 'flex';\n livesPanel.style.alignItems = 'center';\n livesPanel.style.justifyContent = 'center';\n uiContainer.appendChild(livesPanel);\n const livesText = document.createElement('div');\n livesText.id = 'livesText';\n livesText.textContent = 'LIVES: 3';\n livesText.style.fontSize = window.innerWidth < 768 ? '16px' : '22px';\n livesText.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n livesText.style.margin = '0';\n livesText.classList.add('neon-text');\n livesPanel.appendChild(livesText);\n const startPanel = document.createElement('div');\n startPanel.id = 'startPanel';\n startPanel.style.position = 'absolute';\n startPanel.style.top = '50%';\n startPanel.style.left = '50%';\n startPanel.style.transform = 'translate(-50%, -50%)';\n startPanel.style.width = window.innerWidth < 768 ? '90%' : '400px';\n startPanel.style.maxWidth = '400px';\n startPanel.style.height = window.innerWidth < 768 ? 'auto' : '300px';\n startPanel.style.backgroundColor = 'rgba(15, 10, 40, 0.9)';\n startPanel.style.borderRadius = window.innerWidth < 768 ? '15px' : '20px';\n startPanel.style.border = '2px solid #00c3ff';\n startPanel.style.padding = window.innerWidth < 768 ? '20px' : '30px';\n startPanel.style.color = 'white';\n startPanel.style.fontFamily = \"'Chakra Petch', sans-serif\";\n startPanel.classList.add('neon-panel');\n startPanel.style.textAlign = 'center';\n startPanel.style.pointerEvents = 'auto';\n startPanel.style.display = 'none';\n uiContainer.appendChild(startPanel);\n const startTitle = document.createElement('h1');\n startTitle.textContent = 'ZALA RHYTHM';\n startTitle.style.fontSize = window.innerWidth < 768 ? '36px' : '48px';\n startTitle.style.marginBottom = window.innerWidth < 768 ? '15px' : '20px';\n startTitle.style.fontFamily = \"'Orbitron', sans-serif\";\n startTitle.style.letterSpacing = window.innerWidth < 768 ? '2px' : '3px';\n startTitle.style.fontWeight = 'bold';\n startTitle.classList.add('neon-text');\n startPanel.appendChild(startTitle);\n const instructionText = document.createElement('p');\n instructionText.textContent = 'TYPE or CLICK the falling letters on the stage!\\nMiss a letter and lose a life...';\n instructionText.style.fontSize = window.innerWidth < 768 ? '16px' : '18px';\n instructionText.style.color = '#00ffff';\n instructionText.style.marginBottom = window.innerWidth < 768 ? '20px' : '30px';\n instructionText.style.whiteSpace = 'pre-line';\n instructionText.style.lineHeight = '1.5';\n instructionText.style.textShadow = '0 0 5px #00ffff';\n startPanel.appendChild(instructionText);\n const startButton = document.createElement('button');\n startButton.textContent = 'START DANCING';\n startButton.style.width = window.innerWidth < 768 ? '80%' : '220px';\n startButton.style.height = window.innerWidth < 768 ? '55px' : '65px';\n startButton.style.fontSize = window.innerWidth < 768 ? '18px' : '22px';\n startButton.style.fontFamily = \"'Orbitron', sans-serif\";\n startButton.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n startButton.style.fontWeight = 'bold';\n startButton.style.cursor = 'pointer';\n startButton.style.borderRadius = window.innerWidth < 768 ? '8px' : '10px';\n startButton.classList.add('neon-button');\n startPanel.appendChild(startButton);\n const gameOverPanel = document.createElement('div');\n gameOverPanel.id = 'gameOverPanel';\n gameOverPanel.style.position = 'absolute';\n gameOverPanel.style.top = '50%';\n gameOverPanel.style.left = '50%';\n gameOverPanel.style.transform = 'translate(-50%, -50%)';\n gameOverPanel.style.width = window.innerWidth < 768 ? '90%' : '400px';\n gameOverPanel.style.maxWidth = '400px';\n gameOverPanel.style.height = window.innerWidth < 768 ? 'auto' : '300px';\n gameOverPanel.style.backgroundColor = 'rgba(15, 10, 40, 0.9)';\n gameOverPanel.style.borderRadius = window.innerWidth < 768 ? '15px' : '20px';\n gameOverPanel.style.border = '2px solid #00c3ff';\n gameOverPanel.style.padding = window.innerWidth < 768 ? '20px' : '30px';\n gameOverPanel.style.color = 'white';\n gameOverPanel.style.fontFamily = \"'Chakra Petch', sans-serif\";\n gameOverPanel.classList.add('neon-panel');\n gameOverPanel.style.textAlign = 'center';\n gameOverPanel.style.pointerEvents = 'auto';\n gameOverPanel.style.display = 'none';\n uiContainer.appendChild(gameOverPanel);\n const gameOverTitle = document.createElement('h1');\n gameOverTitle.textContent = 'GAME OVER';\n gameOverTitle.style.fontSize = window.innerWidth < 768 ? '36px' : '48px';\n gameOverTitle.style.marginBottom = window.innerWidth < 768 ? '15px' : '20px';\n gameOverTitle.style.fontFamily = \"'Orbitron', sans-serif\";\n gameOverTitle.style.letterSpacing = window.innerWidth < 768 ? '2px' : '3px';\n gameOverTitle.style.fontWeight = 'bold';\n gameOverTitle.style.color = '#ff3366';\n gameOverTitle.style.textShadow = '0 0 10px #ff3366, 0 0 20px #ff3366';\n gameOverPanel.appendChild(gameOverTitle);\n const finalScoreText = document.createElement('p');\n finalScoreText.id = 'finalScoreText';\n finalScoreText.textContent = 'Final Score: 0';\n finalScoreText.style.fontSize = window.innerWidth < 768 ? '22px' : '28px';\n finalScoreText.style.color = '#00ffff';\n finalScoreText.style.textShadow = '0 0 10px #00ffff';\n finalScoreText.style.marginBottom = window.innerWidth < 768 ? '20px' : '30px';\n finalScoreText.style.fontFamily = \"'Orbitron', sans-serif\";\n finalScoreText.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n gameOverPanel.appendChild(finalScoreText);\n const restartButton = document.createElement('button');\n restartButton.textContent = 'DANCE AGAIN';\n restartButton.style.width = window.innerWidth < 768 ? '80%' : '220px';\n restartButton.style.height = window.innerWidth < 768 ? '55px' : '65px';\n restartButton.style.fontSize = window.innerWidth < 768 ? '18px' : '22px';\n restartButton.style.fontFamily = \"'Orbitron', sans-serif\";\n restartButton.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n restartButton.style.fontWeight = 'bold';\n restartButton.style.cursor = 'pointer';\n restartButton.style.borderRadius = window.innerWidth < 768 ? '8px' : '10px';\n restartButton.classList.add('neon-button');\n gameOverPanel.appendChild(restartButton);\n startButton.addEventListener('click', startGame);\n restartButton.addEventListener('click', restartGame);\n window.addEventListener('keydown', onKeyDown);\n}\nfunction loadSounds() {\n totalAssets += 4;\n const listener = new THREE.AudioListener();\n camera.add(listener);\n music = new THREE.Audio(listener);\n successSound = new THREE.Audio(listener);\n window.errorSound = new THREE.Audio(listener);\n window.gameOverSound = new THREE.Audio(listener);\n const musicLoader = new THREE.AudioLoader();\n const soundLoader = new THREE.AudioLoader();\n window.AudioContext = window.AudioContext || window.webkitAudioContext;\n if (!window.audioContext) {\n try {\n window.audioContext = new AudioContext();\n console.log(\"Audio context created successfully\");\n } catch (e) {\n console.warn(\"AudioContext could not be created:\", e);\n }\n }\n const unblockAudio = () => {\n if (!window.popSoundPool || !Array.isArray(window.popSoundPool)) return;\n window.popSoundPool.forEach(sound => {\n sound.load();\n const promise = sound.play();\n if (promise !== undefined) {\n promise.then(() => {\n sound.pause();\n sound.currentTime = 0;\n }).catch(e => {});\n }\n });\n document.removeEventListener('click', unblockAudio);\n document.removeEventListener('touchstart', unblockAudio);\n document.removeEventListener('keydown', unblockAudio);\n };\n document.addEventListener('click', unblockAudio);\n document.addEventListener('touchstart', unblockAudio);\n document.addEventListener('keydown', unblockAudio);\n window.AudioContext = window.AudioContext || window.webkitAudioContext;\n if (!window.audioContext) {\n try {\n window.audioContext = new AudioContext();\n console.log(\"Audio context created successfully\");\n } catch (e) {\n console.warn(\"AudioContext could not be created:\", e);\n }\n }\n if (window.audioContext && window.audioContext.state === 'suspended') {\n const resumeAudio = function () {\n window.audioContext.resume().then(() => {\n console.log(\"AudioContext resumed successfully\");\n });\n document.body.removeEventListener('click', resumeAudio);\n document.body.removeEventListener('keydown', resumeAudio);\n document.body.removeEventListener('touchstart', resumeAudio);\n };\n document.body.addEventListener('click', resumeAudio);\n document.body.addEventListener('keydown', resumeAudio);\n document.body.addEventListener('touchstart', resumeAudio);\n console.log(\"Added event listeners to resume audio context\");\n }\n soundLoader.load('https://cdn.dev.fun/asset/ed3c486a3f26c24c7959/record-scratch-1-36354.mp3', function (buffer) {\n window.gameOverSound.setBuffer(buffer);\n window.gameOverSound.setVolume(1.0);\n if (window.audioContext) {\n try {\n window.gameOverSound.play();\n window.gameOverSound.stop();\n window.preloadedGameOverBuffer = buffer;\n console.log(\"Game over sound loaded with optimized immediate playback\");\n } catch (e) {\n console.warn(\"Game over sound preloading optimization failed:\", e);\n }\n }\n loadedAssets += 1;\n checkAllAssetsLoaded();\n console.log(\"Game over sound loaded successfully\");\n }, undefined, function (error) {\n console.error(\"Error loading game over sound:\", error);\n loadedAssets += 1;\n checkAllAssetsLoaded();\n });\n window.correctKeySound = new THREE.Audio(listener);\n soundLoader.load('https://cdn.dev.fun/asset/ed3c486a3f26c24c7959/game-start-317318-[AudioTrimmer.com] (1)_2c970222.mp3', function (buffer) {\n window.correctKeySound.setBuffer(buffer);\n window.correctKeySound.setVolume(1.3);\n if (window.audioContext) {\n try {\n window.correctKeySound.play();\n window.correctKeySound.stop();\n window.preloadedCorrectKeyBuffer = buffer;\n const dummySource = window.audioContext.createBufferSource();\n dummySource.buffer = buffer;\n const dummyGain = window.audioContext.createGain();\n dummyGain.gain.value = 0;\n dummySource.connect(dummyGain);\n dummyGain.connect(window.audioContext.destination);\n dummySource.start(0);\n dummySource.stop(window.audioContext.currentTime + 0.001);\n console.log(\"Success sound loaded with optimized immediate playback\");\n } catch (e) {\n console.warn(\"Sound preloading optimization failed:\", e);\n }\n }\n loadedAssets += 1;\n checkAllAssetsLoaded();\n console.log(\"Success sound loaded and primed for immediate playback\");\n }, undefined, function (error) {\n console.error(\"Error loading success sound:\", error);\n loadedAssets += 1;\n checkAllAssetsLoaded();\n });\n soundLoader.load('https://cdn.dev.fun/asset/ed3c486a3f26c24c7959/bubble-pop-5-323639_218c9389.mp3', function (buffer) {\n successSound.setBuffer(buffer);\n successSound.setVolume(0.85);\n if (window.audioContext) {\n try {\n successSound.play();\n successSound.stop();\n window.preloadedSuccessBuffers = [];\n for (let i = 0; i < 10; i++) {\n window.preloadedSuccessBuffers.push(buffer);\n }\n const dummySource = window.audioContext.createBufferSource();\n dummySource.buffer = buffer;\n const dummyGain = window.audioContext.createGain();\n dummyGain.gain.value = 0;\n dummySource.connect(dummyGain);\n dummyGain.connect(window.audioContext.destination);\n dummySource.start(0);\n dummySource.stop(window.audioContext.currentTime + 0.001);\n console.log(\"Success sound loaded with optimized immediate playback\");\n } catch (e) {\n console.warn(\"Sound preloading optimization failed:\", e);\n }\n }\n loadedAssets += 1;\n checkAllAssetsLoaded();\n console.log(\"Success sound loaded and primed for immediate playback\");\n }, undefined, function (error) {\n console.error(\"Error loading success sound:\", error);\n loadedAssets += 1;\n checkAllAssetsLoaded();\n });\n soundLoader.load('https://cdn.dev.fun/asset/ed3c486a3f26c24c7959/error-10-206498-[AudioTrimmer.com]_d5be820c.mp3', function (buffer) {\n window.errorSound.setBuffer(buffer);\n window.errorSound.setVolume(0.9);\n if (window.audioContext) {\n try {\n window.errorSound.play();\n window.errorSound.stop();\n window.preloadedErrorBuffer = buffer;\n const dummySource = window.audioContext.createBufferSource();\n dummySource.buffer = buffer;\n const dummyGain = window.audioContext.createGain();\n dummyGain.gain.value = 0;\n dummySource.connect(dummyGain);\n dummyGain.connect(window.audioContext.destination);\n dummySource.start(0);\n dummySource.stop(window.audioContext.currentTime + 0.001);\n console.log(\"Error sound loaded and primed for immediate playback\");\n } catch (e) {\n console.warn(\"Sound preloading optimization failed:\", e);\n }\n }\n loadedAssets += 1;\n checkAllAssetsLoaded();\n }, undefined, function (error) {\n console.error(\"Error loading error sound:\", error);\n loadedAssets += 1;\n checkAllAssetsLoaded();\n });\n console.log(\"Loading music file with high priority...\");\n musicLoader.load('https://cdn.dev.fun/asset/ed3c486a3f26c24c7959/SpotiDownloader.com - 愛♡スクリ～ム！ - AiScReam-[AudioTrimmer.com]_de79a1ce.mp3', function (buffer) {\n console.log(\"Music loaded successfully!\");\n music.setBuffer(buffer);\n music.setLoop(true);\n music.setVolume(0.522);\n if (!window.audioContext) {\n try {\n window.audioContext = new AudioContext();\n } catch (e) {\n console.warn(\"AudioContext could not be created:\", e);\n }\n }\n if (window.audioContext) {\n if (window.audioContext.state === 'suspended') {\n window.audioContext.resume().catch(e => console.warn(\"Could not resume audio context:\", e));\n }\n const dummySource = window.audioContext.createBufferSource();\n dummySource.buffer = buffer;\n dummySource.connect(window.audioContext.destination);\n dummySource.disconnect();\n }\n musicLoaded = true;\n loadedAssets += 1;\n checkAllAssetsLoaded();\n updateLoadingProgress(null, \"Music loaded successfully!\");\n }, function (xhr) {\n const percent = Math.round(xhr.loaded / xhr.total * 100);\n console.log(`Music loading: ${percent}% loaded`);\n updateLoadingProgress(percent, 'Loading music...');\n }, function (error) {\n console.error(\"Error loading music:\", error);\n const errorDiv = document.createElement('div');\n errorDiv.style.position = 'absolute';\n errorDiv.style.bottom = '10px';\n errorDiv.style.left = '10px';\n errorDiv.style.backgroundColor = 'rgba(255,0,0,0.7)';\n errorDiv.style.color = 'white';\n errorDiv.style.padding = '10px';\n errorDiv.style.borderRadius = '5px';\n errorDiv.style.fontFamily = 'monospace';\n errorDiv.style.zIndex = '1000';\n errorDiv.innerHTML = `Error loading music: ${error.message || 'Unknown error'}`;\n document.body.appendChild(errorDiv);\n });\n}\nfunction createFallingLetter() {\n const letters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n const randomLetter = letters.charAt(Math.floor(Math.random() * letters.length));\n const letterDistance = 15;\n const cameraDirection = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);\n const letterPos = new THREE.Vector3().copy(camera.position).add(cameraDirection.multiplyScalar(letterDistance));\n const vFOV = THREE.MathUtils.degToRad(camera.fov);\n const visibleHeight = 2 * Math.tan(vFOV / 2) * letterDistance;\n const visibleWidth = visibleHeight * camera.aspect;\n const safeWidth = visibleWidth * 0.8;\n let columns = 5;\n if (window.innerWidth < 768) {\n columns = 3;\n }\n const columnOccupancy = Array(columns).fill(0);\n const LETTER_SIZE = 5.25;\n const MIN_VERTICAL_SPACE = LETTER_SIZE * 1.5;\n lettersFalling.forEach(letter => {\n if (letter.userData.columnIndex < columns) {\n columnOccupancy[letter.userData.columnIndex]++;\n }\n });\n let columnIndex = 0;\n let minOccupancy = columnOccupancy[0];\n for (let i = 1; i < columns; i++) {\n if (columnOccupancy[i] < minOccupancy) {\n minOccupancy = columnOccupancy[i];\n columnIndex = i;\n }\n }\n let highestY = letterPos.y + 50;\n let canPlaceLetter = true;\n lettersFalling.forEach(letter => {\n if (letter.userData.columnIndex === columnIndex) {\n const distance = Math.abs(highestY - letter.position.y);\n if (distance < MIN_VERTICAL_SPACE) {\n canPlaceLetter = false;\n }\n }\n });\n if (!canPlaceLetter) {\n const originalColumn = columnIndex;\n let attempts = 0;\n while (!canPlaceLetter && attempts < columns) {\n columnIndex = (columnIndex + 1) % columns;\n canPlaceLetter = true;\n lettersFalling.forEach(letter => {\n if (letter.userData.columnIndex === columnIndex) {\n const distance = Math.abs(highestY - letter.position.y);\n if (distance < MIN_VERTICAL_SPACE) {\n canPlaceLetter = false;\n }\n }\n });\n attempts++;\n }\n if (!canPlaceLetter) {\n columnIndex = originalColumn;\n highestY += MIN_VERTICAL_SPACE;\n }\n }\n const columnSpacing = safeWidth / columns;\n const xOffset = -safeWidth / 2 + columnSpacing / 2;\n const xPos = xOffset + columnIndex * columnSpacing;\n const canvas = document.createElement('canvas');\n canvas.width = 256;\n canvas.height = 256;\n const context = canvas.getContext('2d');\n context.fillStyle = 'rgba(0, 0, 0, 0)';\n context.fillRect(0, 0, canvas.width, canvas.height);\n const gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 10, canvas.width / 2, canvas.height / 2, canvas.width / 2);\n let baseColor;\n const colorChoice = Math.random();\n if (colorChoice < 0.25) {\n baseColor = {\n r: 255,\n g: 208,\n b: 224\n };\n } else if (colorChoice < 0.5) {\n baseColor = {\n r: 208,\n g: 224,\n b: 255\n };\n } else if (colorChoice < 0.75) {\n baseColor = {\n r: 208,\n g: 255,\n b: 232\n };\n } else {\n baseColor = {\n r: 255,\n g: 248,\n b: 208\n };\n }\n gradient.addColorStop(0, `rgba(${baseColor.r}, ${baseColor.g}, ${baseColor.b}, 1.0)`);\n gradient.addColorStop(0.3, `rgba(${baseColor.r}, ${baseColor.g}, ${baseColor.b}, 0.8)`);\n gradient.addColorStop(1, `rgba(${baseColor.r}, ${baseColor.g}, ${baseColor.b}, 0)`);\n context.fillStyle = gradient;\n context.fillRect(0, 0, canvas.width, canvas.height);\n context.fillStyle = 'white';\n context.font = 'bold 180px Orbitron';\n context.textAlign = 'center';\n context.textBaseline = 'middle';\n context.shadowColor = `rgb(${baseColor.r}, ${baseColor.g}, ${baseColor.b})`;\n context.shadowBlur = 30;\n context.shadowOffsetX = 0;\n context.shadowOffsetY = 0;\n context.fillText(randomLetter, canvas.width / 2, canvas.height / 2);\n context.shadowColor = 'white';\n context.shadowBlur = 10;\n context.fillText(randomLetter, canvas.width / 2, canvas.height / 2);\n const texture = new THREE.CanvasTexture(canvas);\n const letterGeometry = new THREE.PlaneGeometry(LETTER_SIZE, LETTER_SIZE);\n const letterMaterial = new THREE.MeshStandardMaterial({\n map: texture,\n transparent: true,\n opacity: 0.95,\n emissive: new THREE.Color(baseColor.r / 255, baseColor.g / 255, baseColor.b / 255),\n emissiveIntensity: 0.7,\n side: THREE.DoubleSide\n });\n const letter = new THREE.Mesh(letterGeometry, letterMaterial);\n letter.castShadow = true;\n letter.receiveShadow = false;\n const startY = 50;\n letter.position.set(xPos, letterPos.y + startY, letterPos.z);\n letter.userData = {\n isLetter: true,\n letter: randomLetter,\n columnIndex: columnIndex,\n initialZ: letterPos.z,\n baseColor: baseColor,\n visibleWidth: visibleWidth,\n columnCount: columns\n };\n scene.add(letter);\n letter.lookAt(camera.position);\n letter.userData.velocity = new THREE.Vector3(0, -0.1872, 0);\n lettersFalling.push(letter);\n return letter;\n}\nfunction createLetterParticles(position, baseColor) {\n const particleCount = 120;\n const fragmentCount = 15;\n const particleGeometry = new THREE.BufferGeometry();\n const particleColors = baseColor ? [baseColor.r << 16 | baseColor.g << 8 | baseColor.b, 0xff88cc, 0xffffff, baseColor.r << 16 | baseColor.g << 8 | baseColor.b] : [0xff88cc, 0x88ccff, 0xcc88ff, 0xffcc88, 0xff66aa, 0xff00ff];\n const positions = new Float32Array(particleCount * 3);\n const velocities = [];\n const explosionForce = 0.5;\n for (let i = 0; i < particleCount; i++) {\n const i3 = i * 3;\n positions[i3] = position.x + (Math.random() - 0.5) * 0.5;\n positions[i3 + 1] = position.y + (Math.random() - 0.5) * 0.5;\n positions[i3 + 2] = position.z + (Math.random() - 0.5) * 0.5;\n const angle = Math.random() * Math.PI * 2;\n const height = Math.random() * Math.PI;\n const speed = 0.05 + Math.random() * explosionForce;\n velocities.push(Math.sin(angle) * Math.sin(height) * speed, Math.cos(height) * speed, Math.cos(angle) * Math.sin(height) * speed);\n }\n particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n const particleMaterial = new THREE.PointsMaterial({\n color: particleColors[Math.floor(Math.random() * particleColors.length)],\n size: 0.4,\n blending: THREE.AdditiveBlending,\n transparent: true,\n opacity: 0.9\n });\n const particles = new THREE.Points(particleGeometry, particleMaterial);\n scene.add(particles);\n const fragments = [];\n for (let i = 0; i < fragmentCount; i++) {\n const canvas = document.createElement('canvas');\n canvas.width = 128;\n canvas.height = 128;\n const context = canvas.getContext('2d');\n const gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 5, canvas.width / 2, canvas.height / 2, canvas.width / 2);\n const color = baseColor || {\n r: particleColors[Math.floor(Math.random() * particleColors.length)] >> 16 & 0xFF,\n g: particleColors[Math.floor(Math.random() * particleColors.length)] >> 8 & 0xFF,\n b: particleColors[Math.floor(Math.random() * particleColors.length)] & 0xFF\n };\n gradient.addColorStop(0, `rgba(${color.r}, ${color.g}, ${color.b}, 0.9)`);\n gradient.addColorStop(0.6, `rgba(${color.r}, ${color.g}, ${color.b}, 0.5)`);\n gradient.addColorStop(1, `rgba(${color.r}, ${color.g}, ${color.b}, 0)`);\n context.fillStyle = gradient;\n context.fillRect(0, 0, canvas.width, canvas.height);\n const texture = new THREE.CanvasTexture(canvas);\n const fragmentGeometry = new THREE.PlaneGeometry(0.8, 0.8);\n const fragmentMaterial = new THREE.MeshBasicMaterial({\n map: texture,\n transparent: true,\n opacity: 0.9,\n side: THREE.DoubleSide\n });\n const fragment = new THREE.Mesh(fragmentGeometry, fragmentMaterial);\n fragment.position.copy(position);\n fragment.position.x += (Math.random() - 0.5) * 0.8;\n fragment.position.y += (Math.random() - 0.5) * 0.8;\n fragment.position.z += (Math.random() - 0.5) * 0.8;\n fragment.rotation.set(Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2);\n fragment.userData = {\n velocity: new THREE.Vector3((Math.random() - 0.5) * explosionForce * 1.5, Math.random() * explosionForce - explosionForce * 0.3, (Math.random() - 0.5) * explosionForce * 1.5),\n rotationSpeed: new THREE.Vector3((Math.random() - 0.5) * 0.2, (Math.random() - 0.5) * 0.2, (Math.random() - 0.5) * 0.2)\n };\n scene.add(fragment);\n fragments.push(fragment);\n }\n particleSystems.push(particles);\n particles.userData = {\n velocities: velocities,\n fragments: fragments,\n creationTime: Date.now(),\n update: function () {\n const positions = particles.geometry.attributes.position.array;\n for (let i = 0; i < particleCount; i++) {\n const i3 = i * 3;\n positions[i3] += this.velocities[i * 3];\n positions[i3 + 1] += this.velocities[i * 3 + 1];\n positions[i3 + 2] += this.velocities[i * 3 + 2];\n this.velocities[i * 3] *= 0.98;\n this.velocities[i * 3 + 2] *= 0.98;\n }\n particles.geometry.attributes.position.needsUpdate = true;\n for (const fragment of this.fragments) {\n fragment.position.add(fragment.userData.velocity);\n fragment.userData.velocity.multiplyScalar(0.98);\n fragment.rotation.x += fragment.userData.rotationSpeed.x;\n fragment.rotation.y += fragment.userData.rotationSpeed.y;\n fragment.rotation.z += fragment.userData.rotationSpeed.z;\n const age = Date.now() - this.creationTime;\n if (age > 1500) {\n fragment.material.opacity = Math.max(0, 1 - (age - 1500) / 1000);\n }\n }\n const age = Date.now() - this.creationTime;\n if (age > 1500) {\n particles.material.opacity = Math.max(0, 1 - (age - 1500) / 1000);\n }\n if (Date.now() - this.creationTime > 2500) {\n for (const fragment of this.fragments) {\n scene.remove(fragment);\n }\n scene.remove(particles);\n return false;\n }\n return true;\n }\n };\n return particles;\n}\nfunction createLoadingScreen() {\n const loadingContainer = document.createElement('div');\n loadingContainer.id = 'loadingContainer';\n loadingContainer.style.position = 'absolute';\n loadingContainer.style.top = '0';\n loadingContainer.style.left = '0';\n loadingContainer.style.width = '100%';\n loadingContainer.style.height = '100%';\n loadingContainer.style.backgroundColor = 'rgba(3, 3, 18, 0.98)';\n loadingContainer.style.display = 'flex';\n loadingContainer.style.flexDirection = 'column';\n loadingContainer.style.justifyContent = 'center';\n loadingContainer.style.alignItems = 'center';\n loadingContainer.style.zIndex = '1000';\n loadingContainer.style.fontFamily = \"'Orbitron', sans-serif\";\n document.body.appendChild(loadingContainer);\n const preloadAudioElement = document.createElement('audio');\n preloadAudioElement.id = 'preloadAudio';\n preloadAudioElement.preload = 'auto';\n preloadAudioElement.volume = 0;\n preloadAudioElement.style.display = 'none';\n preloadAudioElement.src = 'https://cdn.dev.fun/asset/ed3c486a3f26c24c7959/bubble-pop-5-323639_218c9389.mp3';\n preloadAudioElement.load();\n document.body.appendChild(preloadAudioElement);\n const loadingTitle = document.createElement('h1');\n loadingTitle.textContent = 'ZALA RHYTHM';\n loadingTitle.style.color = '#ffffff';\n loadingTitle.style.fontSize = window.innerWidth < 768 ? '36px' : '48px';\n loadingTitle.style.marginBottom = '40px';\n loadingTitle.style.textShadow = '0 0 10px #00c3ff, 0 0 20px #00c3ff';\n loadingContainer.appendChild(loadingTitle);\n const loadingBarContainer = document.createElement('div');\n loadingBarContainer.style.width = window.innerWidth < 768 ? '80%' : '60%';\n loadingBarContainer.style.maxWidth = '500px';\n loadingBarContainer.style.height = '30px';\n loadingBarContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n loadingBarContainer.style.borderRadius = '15px';\n loadingBarContainer.style.overflow = 'hidden';\n loadingBarContainer.style.border = '2px solid #00c3ff';\n loadingBarContainer.style.boxShadow = '0 0 10px #00c3ff';\n loadingContainer.appendChild(loadingBarContainer);\n const loadingBar = document.createElement('div');\n loadingBar.id = 'loadingBar';\n loadingBar.style.width = '0%';\n loadingBar.style.height = '100%';\n loadingBar.style.background = 'linear-gradient(90deg, #ff00ea, #00c3ff)';\n loadingBar.style.borderRadius = '15px';\n loadingBar.style.transition = 'width 0.3s ease';\n loadingBarContainer.appendChild(loadingBar);\n const loadingText = document.createElement('div');\n loadingText.id = 'loadingText';\n loadingText.textContent = 'Initializing...';\n loadingText.style.color = '#ffffff';\n loadingText.style.marginTop = '20px';\n loadingText.style.fontSize = '18px';\n loadingText.style.textShadow = '0 0 5px #00c3ff';\n loadingContainer.appendChild(loadingText);\n}\nfunction updateLoadingProgress(percent, message) {\n const loadingBar = document.getElementById('loadingBar');\n const loadingText = document.getElementById('loadingText');\n if (percent !== null) {\n loadingBar.style.width = `${percent}%`;\n if (percent > 90) {\n loadingBar.style.backgroundImage = 'linear-gradient(90deg, #ff00ea, #00c3ff, #ff00ea, #00c3ff)';\n loadingBar.style.backgroundSize = '400% 100%';\n loadingBar.style.animation = 'gradientShift 3s ease infinite';\n }\n }\n if (message) {\n if (loadingText.textContent !== message) {\n loadingText.style.opacity = '0';\n setTimeout(() => {\n loadingText.textContent = message;\n loadingText.style.opacity = '1';\n }, 200);\n }\n }\n}\nfunction checkAllAssetsLoaded() {\n console.log(`Assets loaded: ${loadedAssets}/${totalAssets}`);\n const percent = Math.round(loadedAssets / totalAssets * 100);\n updateLoadingProgress(percent, `Loading assets (${loadedAssets}/${totalAssets})...`);\n if (loadedAssets >= totalAssets) {\n assetsLoaded = true;\n updateLoadingProgress(100, 'All assets loaded! Game ready to start...');\n if (!music || !music.buffer) {\n console.warn(\"Music not fully loaded yet, waiting...\");\n setTimeout(checkAllAssetsLoaded, 500);\n return;\n }\n if (!mixer || characterRoot.children.length === 0) {\n console.warn(\"Character model not fully loaded yet, waiting...\");\n setTimeout(checkAllAssetsLoaded, 500);\n return;\n }\n setTimeout(() => {\n const loadingContainer = document.getElementById('loadingContainer');\n if (loadingContainer) {\n loadingContainer.style.opacity = '0';\n loadingContainer.style.transition = 'opacity 0.5s ease';\n setTimeout(() => {\n loadingContainer.style.display = 'none';\n document.getElementById('startPanel').style.display = 'block';\n }, 500);\n }\n }, 800);\n }\n}\nfunction startGame() {\n if (!assetsLoaded || !music || !music.buffer || !mixer) {\n console.warn(\"Assets not fully loaded, waiting before starting game...\");\n const loadingContainer = document.getElementById('loadingContainer');\n if (loadingContainer && loadingContainer.style.display === 'none') {\n loadingContainer.style.display = 'flex';\n loadingContainer.style.opacity = '1';\n updateLoadingProgress(95, 'Finalizing game assets...');\n }\n setTimeout(startGame, 500);\n return;\n }\n scene.traverse(object => {\n if (object.isMesh && object.material) {\n if (Array.isArray(object.material)) {\n object.material.forEach(mat => {\n if (mat.map) {\n mat.map.needsUpdate = true;\n }\n mat.needsUpdate = true;\n });\n } else {\n if (object.material.map) {\n object.material.map.needsUpdate = true;\n }\n object.material.needsUpdate = true;\n }\n }\n });\n document.getElementById('startPanel').style.display = 'none';\n gameStarted = true;\n gameOver = false;\n score = 0;\n combo = 0;\n lives = 3;\n for (const letter of lettersFalling) {\n scene.remove(letter);\n }\n lettersFalling = [];\n if (!window.savedModelOrientation) {\n window.savedModelOrientation = {\n position: {\n x: -0.90,\n y: 443.78,\n z: 46.04\n },\n rotation: {\n x: -180.00,\n y: 0.31,\n z: -180.00\n },\n scale: 16.94 * 1.25\n };\n }\n if (characterRoot && characterBody) {\n const pos = window.savedModelOrientation.position;\n const rot = window.savedModelOrientation.rotation;\n const scale = window.savedModelOrientation.scale;\n characterBody.position.set(pos.x, pos.y, pos.z);\n characterBody.velocity.set(0, 0, 0);\n const quaternion = new CANNON.Quaternion();\n quaternion.setFromEuler(rot.x * Math.PI / 180, rot.y * Math.PI / 180, rot.z * Math.PI / 180, 'XYZ');\n characterBody.quaternion.copy(quaternion);\n modelScaleFactor = scale;\n characterRoot.children.forEach(child => {\n if (child.isGroup || child.isMesh) {\n const baseScale = 4;\n const targetScale = baseScale * modelScaleFactor;\n child.scale.set(targetScale, targetScale, targetScale);\n }\n });\n console.log(\"Character positioned at exact coordinates for game start:\", pos);\n }\n if (window.animState) {\n if (mixer) {\n mixer.stopAllAction();\n }\n window.animState.loopCount = 0;\n window.animState.currentAnimIndex = 0;\n if (characterRoot) {\n characterRoot.traverse(child => {\n if (child.isMesh && child.material) {\n child.material.needsUpdate = true;\n if (child.material.map) {\n child.material.map.needsUpdate = true;\n }\n }\n });\n }\n if (window.originalMaterialStates && characterRoot) {\n ensureMaterialConsistency(characterRoot);\n }\n const firstAnimName = window.animState.sequence[0];\n console.log(`Starting fresh animation sequence with: ${firstAnimName}`);\n if (window.animState.clips[firstAnimName]) {\n const action = mixer.clipAction(window.animState.clips[firstAnimName]);\n action.setLoop(THREE.LoopRepeat, Infinity);\n action.clampWhenFinished = false;\n action.reset();\n action.time = 0;\n mixer.addEventListener('loop', () => {\n if (characterRoot && window.originalMaterialStates) {\n ensureMaterialConsistency(characterRoot);\n }\n });\n action.play();\n window.animState.currentAction = action;\n if (!window.trackedBones) {\n window.trackedBones = ['Hips', 'Spine', 'LeftArm', 'RightArm', 'LeftLeg', 'RightLeg', 'Head'];\n window.getCurrentPose = function (model) {\n const pose = {};\n model.traverse(node => {\n if (node.isBone && window.trackedBones.some(boneName => node.name.includes(boneName))) {\n pose[node.name] = {\n position: node.position.clone(),\n quaternion: node.quaternion.clone()\n };\n }\n });\n return pose;\n };\n window.getPoseAtTime = function (action, time, mixer) {\n const originalTime = action.time;\n action.time = time;\n mixer.update(0);\n const pose = window.getCurrentPose(action.getRoot());\n action.time = originalTime;\n return pose;\n };\n window.computePoseDistance = function (pose1, pose2) {\n let distance = 0;\n let count = 0;\n for (const boneName in pose1) {\n if (pose2[boneName]) {\n distance += pose1[boneName].position.distanceToSquared(pose2[boneName].position);\n distance += 1 - Math.abs(pose1[boneName].quaternion.dot(pose2[boneName].quaternion));\n count++;\n }\n }\n return count > 0 ? distance / count : Infinity;\n };\n window.findBestPoseMatch = function (currentAction, newAction, mixer) {\n const currentPose = window.getCurrentPose(currentAction.getRoot());\n const targetClip = newAction.getClip();\n let bestTime = 0;\n let minDistance = Infinity;\n const step = targetClip.duration / 20;\n for (let t = 0; t <= targetClip.duration; t += step) {\n const originalTime = newAction.time;\n newAction.time = t;\n mixer.update(0);\n const targetPose = window.getCurrentPose(newAction.getRoot());\n newAction.time = originalTime;\n const distance = window.computePoseDistance(currentPose, targetPose);\n if (distance < minDistance) {\n minDistance = distance;\n bestTime = t;\n }\n }\n return bestTime;\n };\n window.executeSmartTransition = function (currentAction, newAction, duration, mixer) {\n if (!currentAction || !newAction) return;\n try {\n const bestTime = window.findBestPoseMatch(currentAction, newAction, mixer);\n console.log(`Found best transition point at time: ${bestTime.toFixed(2)}s`);\n newAction.enabled = true;\n newAction.time = bestTime;\n newAction.setLoop(THREE.LoopRepeat, Infinity);\n newAction.clampWhenFinished = false;\n newAction.play();\n currentAction.crossFadeTo(newAction, duration, true);\n return newAction;\n } catch (e) {\n console.warn(\"Smart transition failed, using direct transition\", e);\n currentAction.stop();\n newAction.play();\n return newAction;\n }\n };\n }\n } else {\n console.warn(`Starting animation ${firstAnimName} not found in model!`);\n }\n } else if (danceAnimations.length > 0) {\n danceAnimations.forEach(item => {\n if (item.action) {\n item.action.reset();\n item.action.paused = false;\n item.action.play();\n } else if (typeof item.play === 'function') {\n item.paused = false;\n item.play();\n }\n });\n }\n animationPlaying = true;\n startDiscoMode();\n if (characterRoot) {\n characterRoot.lookAt(new THREE.Vector3(camera.position.x, characterRoot.position.y, camera.position.z));\n console.log(\"Character oriented toward camera at game start\");\n }\n if (music && music.buffer) {\n try {\n console.log(\"Starting music playback\");\n if (music.isPlaying) {\n music.stop();\n }\n if (window.audioContext && window.audioContext.state === 'suspended') {\n window.audioContext.resume();\n }\n music.offset = 0;\n music.setVolume(0.522);\n try {\n const playPromise = music.play();\n if (playPromise && typeof playPromise.catch === 'function') {\n playPromise.catch(error => {\n console.error(\"Playback prevented by browser:\", error);\n document.body.addEventListener('click', function playOnClick() {\n music.play();\n document.body.removeEventListener('click', playOnClick);\n }, {\n once: true\n });\n });\n }\n } catch (error) {\n console.error(\"Error playing music:\", error);\n }\n } catch (error) {\n console.error(\"Error playing music:\", error);\n }\n } else {\n console.warn(\"Music not fully loaded yet\");\n }\n document.getElementById('scoreText').textContent = `SCORE: ${score}`;\n document.getElementById('comboText').textContent = `STREAK: ${combo}`;\n document.getElementById('livesText').textContent = `LIVES: ${lives}`;\n lastLetterTime = Date.now();\n}\nfunction createRewindEffect(audioElement) {\n console.log(\"Creating rewind backspin effect\");\n const audioContext = audioElement.context;\n if (!audioContext) {\n console.warn(\"Could not access audio context, stopping normally\");\n audioElement.stop();\n return;\n }\n let source;\n try {\n source = audioElement.source;\n if (!source) {\n console.warn(\"Could not access audio source, stopping normally\");\n audioElement.stop();\n return;\n }\n const gainNode = audioContext.createGain();\n source.disconnect();\n source.connect(gainNode);\n gainNode.connect(audioContext.destination);\n const duration = 2000;\n const startTime = audioContext.currentTime;\n const initialPlaybackRate = 1.0;\n const finalPlaybackRate = -0.5;\n function animateRewind() {\n const elapsed = audioContext.currentTime - startTime;\n const progress = Math.min(elapsed / (duration / 1000), 1);\n const currentPlaybackRate = initialPlaybackRate + (finalPlaybackRate - initialPlaybackRate) * progress;\n if (source.playbackRate) {\n source.playbackRate.value = currentPlaybackRate;\n }\n const volumeCurve = Math.cos(progress * Math.PI / 2);\n gainNode.gain.value = Math.max(0, volumeCurve);\n if (progress < 1) {\n requestAnimationFrame(animateRewind);\n } else {\n audioElement.stop();\n if (window.gameOverSound && window.audioContext) {\n try {\n const gameOverSource = window.audioContext.createBufferSource();\n gameOverSource.buffer = window.gameOverSound;\n gameOverSource.connect(window.audioContext.destination);\n gameOverSource.start(0);\n } catch (e) {\n console.warn(\"Could not play game over sound after rewind:\", e);\n }\n }\n }\n }\n requestAnimationFrame(animateRewind);\n } catch (e) {\n console.error(\"Error during rewind effect, stopping audio normally:\", e);\n audioElement.stop();\n }\n}\nfunction restartGame() {\n document.getElementById('gameOverPanel').style.display = 'none';\n gameStarted = true;\n gameOver = false;\n score = 0;\n combo = 0;\n lives = 3;\n for (const letter of lettersFalling) {\n scene.remove(letter);\n }\n lettersFalling = [];\n if (mixer) {\n mixer.stopAllAction();\n mixer.update(0);\n }\n if (window.animState) {\n window.animState.currentAnimIndex = 0;\n window.animState.loopCount = 0;\n if (!window.animState.loopsByAnimation) {\n window.animState.loopsByAnimation = {\n 'SnakeDance|Hiphop2': 2,\n 'SnakeDance|SnakeDance': 2,\n 'SnakeDance|Hiphop3': 8\n };\n }\n const firstAnimName = window.animState.sequence[0];\n console.log(`Fully restarting animation sequence with: ${firstAnimName}`);\n setTimeout(() => {\n if (window.animState.clips[firstAnimName]) {\n const action = mixer.clipAction(window.animState.clips[firstAnimName]);\n action.setLoop(THREE.LoopRepeat, Infinity);\n action.clampWhenFinished = false;\n action.reset();\n action.time = 0;\n action.play();\n window.animState.currentAction = action;\n } else {\n console.warn(`Restart animation ${firstAnimName} not found in model!`);\n }\n }, 50);\n }\n if (blackAndWhiteActive) {\n restoreColors();\n } else {\n danceAnimations.forEach(item => {\n if (item.action) {\n item.action.paused = false;\n item.action.play();\n } else if (typeof item.play === 'function') {\n item.paused = false;\n item.play();\n }\n });\n startDiscoMode();\n }\n animationPlaying = true;\n if (characterRoot) {\n characterRoot.lookAt(new THREE.Vector3(camera.position.x, characterRoot.position.y, camera.position.z));\n console.log(\"Character oriented toward camera at restart\");\n }\n const gameOverEffect = document.getElementById('game-over-effect');\n if (gameOverEffect) {\n document.head.removeChild(gameOverEffect);\n }\n if (music && music.buffer) {\n try {\n console.log(\"Restarting music playback\");\n if (music.isPlaying) {\n music.stop();\n }\n if (window.audioContext && window.audioContext.state === 'suspended') {\n window.audioContext.resume();\n }\n if (music.source && music.source.playbackRate) {\n music.source.playbackRate.value = 1.0;\n }\n music.offset = 0;\n music.setVolume(0.522);\n try {\n const playPromise = music.play();\n if (playPromise && typeof playPromise.catch === 'function') {\n playPromise.catch(error => {\n console.error(\"Restart playback prevented by browser:\", error);\n setTimeout(() => music.play(), 100);\n });\n }\n } catch (error) {\n console.error(\"Error restarting music:\", error);\n }\n } catch (error) {\n console.error(\"Error playing music:\", error);\n }\n }\n document.getElementById('scoreText').textContent = `SCORE: ${score}`;\n document.getElementById('comboText').textContent = `STREAK: ${combo}`;\n document.getElementById('livesText').textContent = `LIVES: ${lives}`;\n lastLetterTime = Date.now();\n}\nfunction onMouseDown(event) {\n if (event.target.closest('#startPanel, #gameOverPanel, button')) return;\n mouse.x = event.clientX / window.innerWidth * 2 - 1;\n mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;\n raycaster.setFromCamera(mouse, camera);\n if (!gameStarted || gameOver) return;\n const letterIntersects = raycaster.intersectObjects(lettersFalling);\n if (letterIntersects.length > 0) {\n const hitObject = letterIntersects[0].object;\n handleLetterHit(hitObject);\n } else {\n combo = 0;\n document.getElementById('comboText').textContent = `STREAK: ${combo}`;\n shakeComboText();\n }\n}\nfunction shakeComboText() {\n const comboText = document.getElementById('comboText');\n comboText.classList.remove('shake-animation');\n void comboText.offsetWidth;\n comboText.classList.add('shake-animation');\n setTimeout(() => {\n comboText.classList.remove('shake-animation');\n }, 500);\n}\nfunction onKeyDown(event) {\n if (!gameStarted || gameOver) return;\n const pressedKey = event.key.toUpperCase();\n let matchFound = false;\n const sortedLetters = [...lettersFalling].sort((a, b) => a.position.y - b.position.y);\n for (const letter of sortedLetters) {\n if (letter.userData.letter === pressedKey) {\n handleLetterHit(letter);\n matchFound = true;\n break;\n }\n }\n if (!matchFound && /^[A-Z]$/i.test(pressedKey)) {\n combo = 0;\n document.getElementById('comboText').textContent = `STREAK: ${combo}`;\n playMissSound();\n }\n}\nfunction playMissSound() {\n if (!window.errorSound || !window.errorSound.buffer) return;\n if (window.errorSound.isPlaying) {\n window.errorSound.stop();\n }\n window.errorSound.play();\n if (window.audioContext && window.preloadedErrorBuffer) {\n try {\n const source = window.audioContext.createBufferSource();\n source.buffer = window.preloadedErrorBuffer;\n source.connect(window.audioContext.destination);\n source.start(0);\n } catch (e) {\n console.warn(\"Could not play error sound with Web Audio API:\", e);\n }\n }\n}\nfunction shakeLivesText() {\n const livesText = document.getElementById('livesText');\n livesText.classList.remove('shake-animation');\n void livesText.offsetWidth;\n livesText.classList.add('shake-animation');\n setTimeout(() => {\n livesText.classList.remove('shake-animation');\n }, 500);\n}\nfunction playCorrectKeySound() {\n if (!window.correctKeySound || !window.correctKeySound.buffer) return;\n if (window.correctKeySound.isPlaying) {\n window.correctKeySound.stop();\n }\n window.correctKeySound.play();\n if (window.audioContext && window.preloadedCorrectKeyBuffer) {\n try {\n const source = window.audioContext.createBufferSource();\n source.buffer = window.preloadedCorrectKeyBuffer;\n source.connect(window.audioContext.destination);\n source.start(0);\n } catch (e) {\n console.warn(\"Could not play correct key sound with Web Audio API:\", e);\n }\n }\n}\nfunction handleLetterHit(hitObject) {\n createLetterParticles(hitObject.position, hitObject.userData.baseColor);\n playCorrectKeySound();\n combo++;\n score += 10 * combo;\n const scoreText = document.getElementById('scoreText');\n scoreText.textContent = `SCORE: ${score}`;\n scoreText.style.textShadow = '0 0 20px #00ffff, 0 0 30px #00ffff';\n setTimeout(() => {\n scoreText.style.textShadow = '';\n }, 300);\n const comboText = document.getElementById('comboText');\n comboText.textContent = `STREAK: ${combo}`;\n if (combo > 50) {\n comboText.style.color = '#ff00ea';\n comboText.style.textShadow = '0 0 10px #ff00ea, 0 0 20px #ff00ea';\n } else if (combo > 25) {\n comboText.style.color = '#ff3366';\n comboText.style.textShadow = '0 0 10px #ff3366, 0 0 20px #ff3366';\n } else if (combo > 10) {\n comboText.style.color = '#ffcc00';\n comboText.style.textShadow = '0 0 10px #ffcc00, 0 0 20px #ffcc00';\n } else {\n comboText.style.color = '#00ffff';\n comboText.style.textShadow = '0 0 10px #00ffff, 0 0 20px #00ffff';\n }\n const index = lettersFalling.indexOf(hitObject);\n if (index > -1) {\n lettersFalling.splice(index, 1);\n scene.remove(hitObject);\n }\n animationPlaying = true;\n if (window.animState && window.animState.currentAction) {\n window.animState.currentAction.paused = false;\n window.animState.currentAction.play();\n } else {\n danceAnimations.forEach(action => {\n action.paused = false;\n action.play();\n });\n }\n}\nfunction onWindowResize() {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n labelRenderer.setSize(window.innerWidth, window.innerHeight);\n updateGridColumns();\n scaleModelBasedOnScreenSize();\n updateLettersPositions();\n updateUIForScreenSize();\n}\nfunction updateUIForScreenSize() {\n const scorePanel = document.getElementById('scoreText').parentElement;\n if (scorePanel) {\n scorePanel.style.top = window.innerWidth < 768 ? '10px' : '20px';\n scorePanel.style.right = window.innerWidth < 768 ? '10px' : '20px';\n scorePanel.style.width = window.innerWidth < 768 ? '160px' : '220px';\n scorePanel.style.height = window.innerWidth < 768 ? '70px' : '80px';\n scorePanel.style.padding = window.innerWidth < 768 ? '5px' : '10px';\n }\n const scoreText = document.getElementById('scoreText');\n if (scoreText) {\n scoreText.style.fontSize = window.innerWidth < 768 ? '18px' : '24px';\n scoreText.style.marginBottom = window.innerWidth < 768 ? '2px' : '5px';\n scoreText.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n }\n const comboText = document.getElementById('comboText');\n if (comboText) {\n comboText.style.fontSize = window.innerWidth < 768 ? '16px' : '20px';\n comboText.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n }\n const livesPanel = document.getElementById('livesText').parentElement;\n if (livesPanel) {\n livesPanel.style.top = window.innerWidth < 768 ? '10px' : '20px';\n livesPanel.style.left = window.innerWidth < 768 ? '10px' : '20px';\n livesPanel.style.width = window.innerWidth < 768 ? '90px' : '120px';\n livesPanel.style.height = window.innerWidth < 768 ? '35px' : '40px';\n livesPanel.style.padding = window.innerWidth < 768 ? '2px' : '5px';\n }\n const livesText = document.getElementById('livesText');\n if (livesText) {\n livesText.style.fontSize = window.innerWidth < 768 ? '16px' : '22px';\n livesText.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n }\n const startPanel = document.getElementById('startPanel');\n if (startPanel) {\n startPanel.style.width = window.innerWidth < 768 ? '90%' : '400px';\n startPanel.style.maxWidth = '400px';\n startPanel.style.height = window.innerWidth < 768 ? 'auto' : '300px';\n startPanel.style.borderRadius = window.innerWidth < 768 ? '15px' : '20px';\n startPanel.style.padding = window.innerWidth < 768 ? '20px' : '30px';\n const startTitle = startPanel.querySelector('h1');\n if (startTitle) {\n startTitle.style.fontSize = window.innerWidth < 768 ? '36px' : '48px';\n startTitle.style.marginBottom = window.innerWidth < 768 ? '15px' : '20px';\n startTitle.style.letterSpacing = window.innerWidth < 768 ? '2px' : '3px';\n }\n const instructionText = startPanel.querySelector('p');\n if (instructionText) {\n instructionText.style.fontSize = window.innerWidth < 768 ? '16px' : '18px';\n instructionText.style.marginBottom = window.innerWidth < 768 ? '20px' : '30px';\n }\n const startButton = startPanel.querySelector('button');\n if (startButton) {\n startButton.style.width = window.innerWidth < 768 ? '80%' : '220px';\n startButton.style.height = window.innerWidth < 768 ? '55px' : '65px';\n startButton.style.fontSize = window.innerWidth < 768 ? '18px' : '22px';\n startButton.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n startButton.style.borderRadius = window.innerWidth < 768 ? '8px' : '10px';\n }\n }\n const gameOverPanel = document.getElementById('gameOverPanel');\n if (gameOverPanel) {\n gameOverPanel.style.width = window.innerWidth < 768 ? '90%' : '400px';\n gameOverPanel.style.maxWidth = '400px';\n gameOverPanel.style.height = window.innerWidth < 768 ? 'auto' : '300px';\n gameOverPanel.style.borderRadius = window.innerWidth < 768 ? '15px' : '20px';\n gameOverPanel.style.padding = window.innerWidth < 768 ? '20px' : '30px';\n const gameOverTitle = gameOverPanel.querySelector('h1');\n if (gameOverTitle) {\n gameOverTitle.style.fontSize = window.innerWidth < 768 ? '36px' : '48px';\n gameOverTitle.style.marginBottom = window.innerWidth < 768 ? '15px' : '20px';\n gameOverTitle.style.letterSpacing = window.innerWidth < 768 ? '2px' : '3px';\n }\n const finalScoreText = document.getElementById('finalScoreText');\n if (finalScoreText) {\n finalScoreText.style.fontSize = window.innerWidth < 768 ? '22px' : '28px';\n finalScoreText.style.marginBottom = window.innerWidth < 768 ? '20px' : '30px';\n finalScoreText.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n }\n const restartButton = gameOverPanel.querySelector('button');\n if (restartButton) {\n restartButton.style.width = window.innerWidth < 768 ? '80%' : '220px';\n restartButton.style.height = window.innerWidth < 768 ? '55px' : '65px';\n restartButton.style.fontSize = window.innerWidth < 768 ? '18px' : '22px';\n restartButton.style.letterSpacing = window.innerWidth < 768 ? '1px' : '2px';\n restartButton.style.borderRadius = window.innerWidth < 768 ? '8px' : '10px';\n }\n }\n}\nfunction updateLettersPositions() {\n if (lettersFalling.length === 0) return;\n const letterDistance = 15;\n const cameraDirection = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);\n const letterPos = new THREE.Vector3().copy(camera.position).add(cameraDirection.multiplyScalar(letterDistance));\n const vFOV = THREE.MathUtils.degToRad(camera.fov);\n const visibleHeight = 2 * Math.tan(vFOV / 2) * letterDistance;\n const visibleWidth = visibleHeight * camera.aspect;\n const safeWidth = visibleWidth * 0.8;\n let columns = 5;\n if (window.innerWidth < 768) {\n columns = 3;\n }\n lettersFalling.forEach(letter => {\n const columnIndex = letter.userData.columnIndex;\n const columnSpacing = safeWidth / columns;\n const xOffset = -safeWidth / 2 + columnSpacing / 2;\n const xPos = xOffset + columnIndex * columnSpacing;\n letter.position.x = xPos;\n letter.position.z = letterPos.z;\n letter.lookAt(camera.position);\n letter.userData.visibleWidth = visibleWidth;\n letter.userData.columnCount = columns;\n });\n}\nfunction scaleModelBasedOnScreenSize() {\n if (characterRoot && characterBody) {\n if (!window.savedModelOrientation) {\n window.savedModelOrientation = {\n position: {\n x: -0.90,\n y: 443.78,\n z: 46.04\n },\n rotation: {\n x: -180.00,\n y: 0.31,\n z: -180.00\n },\n scale: 26.48 * 1.25\n };\n }\n if (window.savedModelOrientation) {\n const pos = window.savedModelOrientation.position;\n const rot = window.savedModelOrientation.rotation;\n characterBody.position.set(pos.x, pos.y, pos.z);\n const quaternion = new CANNON.Quaternion();\n quaternion.setFromEuler(rot.x * Math.PI / 180, rot.y * Math.PI / 180, rot.z * Math.PI / 180, 'XYZ');\n characterBody.quaternion.copy(quaternion);\n modelScaleFactor = window.savedModelOrientation.scale;\n } else {\n let positioned = false;\n if (danceStage) {\n danceStage.traverse(child => {\n if (child.isMesh && child.name === \"Plane.006_Floor_0\" && !positioned) {\n const worldPosition = new THREE.Vector3();\n child.getWorldPosition(worldPosition);\n characterBody.position.set(worldPosition.x, worldPosition.y + 1.5, worldPosition.z);\n characterBody.quaternion.setFromEuler(0, 0, 0);\n positioned = true;\n console.log(\"Character physics body positioned on dance floor at:\", characterBody.position);\n }\n });\n }\n if (!positioned) {\n characterBody.position.set(0, 2, 0);\n characterBody.quaternion.setFromEuler(0, 0, 0);\n console.log(\"Stage not found, using default physics position\");\n }\n modelScaleFactor = 39.93 * 1.25;\n }\n const baseScale = 4;\n const targetScale = baseScale * modelScaleFactor;\n characterRoot.children.forEach(child => {\n if (child.isGroup || child.isMesh) {\n child.scale.set(targetScale, targetScale, targetScale);\n }\n });\n if (characterBody.shapes[0]) {\n const bbox = new THREE.Box3().setFromObject(characterRoot);\n const size = new THREE.Vector3();\n bbox.getSize(size);\n characterBody.shapes[0].halfExtents.set(size.x / 2, size.y / 2, size.z / 2);\n characterBody.updateMassProperties();\n }\n console.log(\"Character repositioned with physics at:\", characterBody.position);\n if (window.animState && window.animState.currentAction && !window.animState.currentAction.isRunning()) {\n console.log(\"Restarting animation after resize\");\n window.animState.currentAction.play();\n }\n }\n}\nfunction updateGridColumns() {\n const gridContainer = document.body.querySelector('div[style*=\"display: flex\"][style*=\"justify-content: space-around\"]');\n if (!gridContainer) return;\n while (gridContainer.firstChild) {\n gridContainer.removeChild(gridContainer.firstChild);\n }\n let columns = 5;\n if (window.innerWidth < 768) {\n columns = 3;\n }\n for (let i = 0; i < columns; i++) {\n const gridColumn = document.createElement('div');\n gridColumn.style.width = columns === 3 ? '20%' : '15%';\n gridColumn.style.height = '100%';\n gridColumn.style.borderLeft = '1px dotted rgba(255, 255, 255, 0.1)';\n gridColumn.style.borderRight = '1px dotted rgba(255, 255, 255, 0.1)';\n gridColumn.dataset.columnIndex = i;\n gridContainer.appendChild(gridColumn);\n }\n}\nlet particleSystems = [];\nlet originalMaterials = new Map();\nlet blackAndWhiteActive = false;\nlet discoMode = {\n active: false,\n startTime: 0,\n bpm: 132,\n baseColors: []\n};\nfunction convertToBlackAndWhite() {\n if (blackAndWhiteActive) return;\n blackAndWhiteActive = true;\n if (scene.background) {\n originalMaterials.set('background', scene.background.clone());\n }\n if (scene.fog && scene.fog.color) {\n originalMaterials.set('fog', scene.fog.color.clone());\n }\n scene.traverse(object => {\n if (object.isLight) {\n if (object.userData.originalColor === undefined && object.color) {\n object.userData.originalColor = object.color.clone();\n const avg = (object.color.r + object.color.g + object.color.b) / 3;\n object.color.setRGB(avg, avg, avg);\n }\n }\n if (object.isMesh && object.material) {\n if (Array.isArray(object.material)) {\n const originalMats = [];\n object.material.forEach((mat, index) => {\n originalMats[index] = mat.clone();\n const color = mat.color;\n if (color) {\n const avg = (color.r + color.g + color.b) / 3;\n color.setRGB(avg, avg, avg);\n }\n if (mat.emissive) {\n const avg = (mat.emissive.r + mat.emissive.g + mat.emissive.b) / 3;\n mat.emissive.setRGB(avg, avg, avg);\n }\n mat.needsUpdate = true;\n });\n originalMaterials.set(object.id, originalMats);\n } else {\n originalMaterials.set(object.id, object.material.clone());\n const color = object.material.color;\n if (color) {\n const avg = (color.r + color.g + color.b) / 3;\n color.setRGB(avg, avg, avg);\n }\n if (object.material.emissive) {\n const avg = (object.material.emissive.r + object.material.emissive.g + object.material.emissive.b) / 3;\n object.material.emissive.setRGB(avg, avg, avg);\n }\n object.material.needsUpdate = true;\n }\n }\n });\n if (scene.background) {\n if (scene.background.isColor) {\n const color = scene.background;\n const avg = (color.r + color.g + color.b) / 3;\n scene.background.setRGB(avg, avg, avg);\n }\n }\n if (scene.fog && scene.fog.color) {\n const color = scene.fog.color;\n const avg = (color.r + color.g + color.b) / 3;\n scene.fog.color.setRGB(avg, avg, avg);\n }\n const grayscaleFilter = document.createElement('style');\n grayscaleFilter.id = 'grayscale-filter';\n grayscaleFilter.textContent = `\n body {\n filter: grayscale(100%);\n transition: filter 1.5s ease;\n }\n \n /* Stop all animations */\n .neon-text, .neon-panel, .neon-button {\n animation: none !important;\n text-shadow: 0 0 5px rgba(150, 150, 150, 0.7), 0 0 10px rgba(150, 150, 150, 0.5) !important;\n box-shadow: 0 0 5px rgba(150, 150, 150, 0.5), 0 0 10px rgba(150, 150, 150, 0.3) !important;\n transition: all 1.5s ease;\n }\n \n #gameOverPanel, #finalScoreText, #gameOverTitle, button {\n filter: grayscale(100%);\n transition: filter 1.5s ease;\n }\n `;\n document.head.appendChild(grayscaleFilter);\n const flashStyle = document.createElement('style');\n flashStyle.id = 'flash-effect';\n flashStyle.textContent = `\n body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: white;\n z-index: 9999;\n pointer-events: none;\n opacity: 0;\n animation: flash-transition 1.5s forwards;\n }\n @keyframes flash-transition {\n 0% { opacity: 0; }\n 10% { opacity: 0.8; }\n 100% { opacity: 0; }\n }\n `;\n document.head.appendChild(flashStyle);\n}\nfunction restoreColors() {\n if (!blackAndWhiteActive) return;\n const transitionStyle = document.createElement('style');\n transitionStyle.id = 'color-transition';\n transitionStyle.textContent = `\n body {\n filter: grayscale(0%) !important;\n transition: filter 1s ease;\n }\n @keyframes color-pulse {\n 0% { filter: saturate(1.0); }\n 50% { filter: saturate(1.8); }\n 100% { filter: saturate(1.0); }\n }\n \n /* Restore animations */\n .neon-text {\n animation: neonPulse 2s infinite !important;\n text-shadow: 0 0 5px rgba(0, 195, 255, 0.7), 0 0 10px rgba(0, 195, 255, 0.5), 0 0 20px rgba(0, 195, 255, 0.3) !important;\n transition: all 0.5s ease;\n }\n .neon-panel {\n animation: borderGlow 4s infinite !important;\n box-shadow: 0 0 10px #00c3ff, inset 0 0 5px #00c3ff !important;\n transition: all 0.5s ease;\n }\n .neon-button {\n animation: gradientShift 3s ease infinite !important;\n box-shadow: 0 0 10px rgba(0, 195, 255, 0.7) !important;\n transition: all 0.5s ease;\n }\n \n #gameOverPanel, #finalScoreText, #gameOverTitle, button {\n filter: grayscale(0%) !important;\n transition: filter 1s ease;\n }\n `;\n document.head.appendChild(transitionStyle);\n const colorFlashStyle = document.createElement('style');\n colorFlashStyle.id = 'color-flash-effect';\n colorFlashStyle.textContent = `\n body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, rgba(255,0,255,0.5), rgba(0,255,255,0.5));\n z-index: 9999;\n pointer-events: none;\n opacity: 0;\n animation: color-flash-transition 1.5s forwards;\n }\n @keyframes color-flash-transition {\n 0% { opacity: 0; }\n 20% { opacity: 0.3; }\n 100% { opacity: 0; }\n }\n `;\n document.head.appendChild(colorFlashStyle);\n setTimeout(() => {\n if (transitionStyle.parentNode) {\n document.head.removeChild(transitionStyle);\n }\n if (colorFlashStyle.parentNode) {\n document.head.removeChild(colorFlashStyle);\n }\n }, 3000);\n scene.traverse(object => {\n if (object.isLight && object.userData.originalColor) {\n object.color.copy(object.userData.originalColor);\n }\n if (object.isMesh && object.material && originalMaterials.has(object.id)) {\n const originalMaterial = originalMaterials.get(object.id);\n if (Array.isArray(object.material) && Array.isArray(originalMaterial)) {\n for (let i = 0; i < object.material.length; i++) {\n if (i < originalMaterial.length) {\n object.material[i].copy(originalMaterial[i]);\n }\n }\n } else if (!Array.isArray(object.material) && !Array.isArray(originalMaterial)) {\n object.material.copy(originalMaterial);\n }\n }\n });\n if (originalMaterials.has('background')) {\n scene.background = originalMaterials.get('background').clone();\n }\n if (scene.fog && originalMaterials.has('fog')) {\n scene.fog.color.copy(originalMaterials.get('fog'));\n }\n const uiFilter = document.getElementById('grayscale-filter');\n if (uiFilter) {\n document.head.removeChild(uiFilter);\n }\n const flashElement = document.getElementById('flash-effect');\n if (flashElement) {\n document.head.removeChild(flashElement);\n }\n blackAndWhiteActive = false;\n if (gameStarted && !gameOver) {\n startDiscoMode();\n }\n}\nfunction startDiscoMode() {\n discoMode.active = true;\n discoMode.startTime = Date.now();\n if (discoMode.baseColors.length === 0) {\n scene.traverse(object => {\n if (object.isMesh && object.material) {\n if (Array.isArray(object.material)) {\n object.material.forEach(mat => {\n if (mat.color) {\n discoMode.baseColors.push({\n id: object.id + '_' + mat.id,\n color: mat.color.clone(),\n material: mat\n });\n }\n if (mat.emissive) {\n discoMode.baseColors.push({\n id: object.id + '_' + mat.id + '_emissive',\n color: mat.emissive.clone(),\n material: mat,\n isEmissive: true\n });\n }\n });\n } else if (object.material.color) {\n discoMode.baseColors.push({\n id: object.id,\n color: object.material.color.clone(),\n material: object.material\n });\n if (object.material.emissive) {\n discoMode.baseColors.push({\n id: object.id + '_emissive',\n color: object.material.emissive.clone(),\n material: object.material,\n isEmissive: true\n });\n }\n }\n }\n });\n }\n const discoCss = document.createElement('style');\n discoCss.id = 'disco-effect';\n discoCss.textContent = `\n @keyframes discoPulse {\n 0% { filter: brightness(1.0) saturate(1.0); }\n 50% { filter: brightness(1.5) saturate(1.5); }\n 100% { filter: brightness(1.0) saturate(1.0); }\n }\n body {\n animation: discoPulse ${60 / discoMode.bpm}s infinite; \n }\n .neon-panel {\n animation: borderGlow ${60 / discoMode.bpm}s infinite, discoPulse ${60 / discoMode.bpm}s infinite !important;\n }\n .neon-text {\n animation: neonPulse ${60 / discoMode.bpm}s infinite !important;\n }\n .neon-button {\n animation: gradientShift 3s ease infinite, discoPulse ${60 / discoMode.bpm}s infinite !important;\n }\n `;\n document.head.appendChild(discoCss);\n}\nfunction updateDiscoEffect() {\n if (!discoMode.active) return;\n const elapsedTime = (Date.now() - discoMode.startTime) / 1000;\n const beatDuration = 60 / discoMode.bpm;\n const beatProgress = elapsedTime % beatDuration / beatDuration;\n const pulse = 0.5 + Math.sin(beatProgress * Math.PI * 2) * 0.5;\n const colorCycle = elapsedTime / 3 % 1;\n discoMode.baseColors.forEach(item => {\n if (!item.material) return;\n const hue = (colorCycle + Math.random() * 0.05) % 1;\n const saturation = 0.8 + pulse * 0.2;\n const lightness = item.isEmissive ? 0.3 + pulse * 0.7 : item.color.getHSL({}).l;\n if (item.isEmissive && item.material.emissive) {\n const intensity = 0.25 + pulse * 0.9;\n item.material.emissive.setHSL(hue, saturation, lightness * intensity);\n } else if (item.material.color) {\n item.material.color.setHSL((item.color.getHSL({}).h + hue * 0.3) % 1, item.color.getHSL({}).s * (0.8 + pulse * 0.2), item.color.getHSL({}).l * (0.9 + pulse * 0.1));\n }\n });\n scene.traverse(object => {\n if (object.isLight) {\n if (object.userData.originalIntensity === undefined) {\n object.userData.originalIntensity = object.intensity;\n }\n const intensityMultiplier = 0.7 + pulse * 0.5;\n object.intensity = object.userData.originalIntensity * intensityMultiplier;\n if (object.castShadow && object.shadow && beatProgress > 0.8) {\n object.shadow.bias = -0.0005 - Math.random() * 0.0003 * pulse;\n if (object.isSpotLight) {\n object.position.x += (Math.random() - 0.5) * 0.25 * pulse;\n object.position.z += (Math.random() - 0.5) * 0.25 * pulse;\n }\n }\n }\n });\n}\nfunction animate() {\n requestAnimationFrame(animate);\n const deltaTime = clock.getDelta();\n const time = performance.now();\n if (world) {\n world.step(1 / 60, deltaTime, 5);\n for (const obj of physicsObjects) {\n if (obj.body && obj.mesh) {\n obj.mesh.position.copy(new THREE.Vector3(obj.body.position.x, obj.body.position.y, obj.body.position.z));\n if (obj.mesh === characterRoot) {\n obj.mesh.quaternion.copy(new THREE.Quaternion(obj.body.quaternion.x, obj.body.quaternion.y, obj.body.quaternion.z, obj.body.quaternion.w));\n }\n }\n }\n if (location.hash === '#debug' && floorBody) {\n if (!window.floorHelper) {\n const geometry = new THREE.BoxGeometry(60, 2, 60);\n const material = new THREE.MeshBasicMaterial({\n color: 0x00ff00,\n wireframe: true,\n transparent: true,\n opacity: 0.3\n });\n window.floorHelper = new THREE.Mesh(geometry, material);\n scene.add(window.floorHelper);\n }\n window.floorHelper.position.copy(new THREE.Vector3(floorBody.position.x, floorBody.position.y, floorBody.position.z));\n window.floorHelper.quaternion.copy(new THREE.Quaternion(floorBody.quaternion.x, floorBody.quaternion.y, floorBody.quaternion.z, floorBody.quaternion.w));\n }\n }\n if (mixer) {\n mixer.update(deltaTime);\n if (window.animState && window.animState.currentAction) {\n if (!window.animState.currentAction.isRunning()) {\n console.log(\"Animation stopped unexpectedly, restarting\");\n window.animState.currentAction.play();\n } else if (window.animState.currentAction.paused) {\n window.animState.currentAction.paused = false;\n }\n }\n }\n if (characterRoot && !modelDragging && !modelRotating && characterBody && characterBody.velocity.length() < 0.1) {\n const targetPos = new THREE.Vector3(camera.position.x, characterRoot.position.y, camera.position.z);\n const direction = new THREE.Vector3().subVectors(targetPos, characterRoot.position).normalize();\n const targetAngle = Math.atan2(direction.x, direction.z);\n if (characterBody) {\n const targetQuaternion = new CANNON.Quaternion();\n targetQuaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), targetAngle);\n characterBody.quaternion.slerp(targetQuaternion, 0.05);\n }\n }\n danceAnimations.forEach(item => {\n if (item.mixer) {\n item.mixer.update(deltaTime);\n }\n });\n orbitControls.update();\n prevTime = time;\n TWEEN.update();\n if (scene._onBeforeRenderFunctions && scene._onBeforeRenderFunctions.length > 0) {\n for (const fn of scene._onBeforeRenderFunctions) {\n fn();\n }\n }\n particleSystems = particleSystems.filter(particles => particles.userData.update());\n if (gameStarted) {\n updateDiscoEffect();\n }\n if (gameStarted && !gameOver) {\n if (window.animState && window.animState.currentAction && window.animState.animationEnabled && !window.animState.currentAction.isRunning()) {\n const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\n if (isMobile) {\n console.log(\"Mobile animation recovery\");\n const currentAnimName = window.animState.sequence[window.animState.currentAnimIndex];\n if (window.animState.clips[currentAnimName]) {\n const action = mixer.clipAction(window.animState.clips[currentAnimName]);\n action.reset();\n action.play();\n window.animState.currentAction = action;\n }\n }\n }\n const currentTime = Date.now();\n if (currentTime - lastLetterTime > letterSpawnInterval) {\n createFallingLetter();\n lastLetterTime = currentTime;\n }\n const cameraDirection = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);\n const letterDistance = 20;\n const letterPos = new THREE.Vector3().copy(camera.position).add(cameraDirection.multiplyScalar(letterDistance));\n const vFOV = THREE.MathUtils.degToRad(camera.fov);\n const visibleHeight = 2 * Math.tan(vFOV / 2) * letterDistance;\n const visibleWidth = visibleHeight * camera.aspect;\n const safeWidth = visibleWidth * 0.8;\n let columns = 5;\n if (window.innerWidth < 768) {\n columns = 3;\n }\n for (let i = lettersFalling.length - 1; i >= 0; i--) {\n const letter = lettersFalling[i];\n letter.position.y += letter.userData.velocity.y;\n const columnIndex = letter.userData.columnIndex;\n const columnSpacing = safeWidth / columns;\n const xOffset = -safeWidth / 2 + columnSpacing / 2;\n const xPos = xOffset + columnIndex * columnSpacing;\n letter.position.x = xPos;\n letter.position.z = letterPos.z;\n letter.lookAt(camera.position);\n const letterScreenPosition = letter.position.clone();\n letterScreenPosition.project(camera);\n if (letterScreenPosition.y < -1.1) {\n combo = 0;\n document.getElementById('comboText').textContent = `STREAK: ${combo}`;\n lives--;\n document.getElementById('livesText').textContent = `LIVES: ${lives}`;\n shakeLivesText();\n if (animationPlaying) {\n if (window.animState && window.animState.currentAction) {\n window.animState.currentAction.timeScale = 0.5;\n } else {\n danceAnimations.forEach(item => {\n if (item.action) {\n item.action.timeScale = 0.5;\n } else if (typeof item.setEffectiveTimeScale === 'function') {\n item.setEffectiveTimeScale(0.5);\n }\n });\n }\n animationPlaying = true;\n if (window.animState && window.animState.currentAction) {\n window.animState.currentAction.timeScale = 0.3;\n setTimeout(() => {\n window.animState.currentAction.timeScale = 1.0;\n }, 1000);\n } else {\n danceAnimations.forEach(item => {\n if (item.action) {\n item.action.timeScale = 0.3;\n } else if (typeof item.setEffectiveTimeScale === 'function') {\n item.setEffectiveTimeScale(0.3);\n }\n });\n setTimeout(() => {\n danceAnimations.forEach(item => {\n if (item.action) {\n item.action.timeScale = 1.0;\n } else if (typeof item.setEffectiveTimeScale === 'function') {\n item.setEffectiveTimeScale(1.0);\n }\n });\n }, 1000);\n }\n animationPlaying = true;\n }\n lettersFalling.splice(i, 1);\n scene.remove(letter);\n playMissSound();\n if (lives <= 0) {\n gameOver = true;\n stopGameAndShowGameOver();\n }\n }\n }\n }\n renderer.render(scene, camera);\n labelRenderer.render(scene, camera);\n}\ninit();","packageJson","{\"dependencies\":{\"@babylonjs/core\":\"6.49.0\",\"@devfunlabs/babylon-sdk\":\"0.2.0\",\"three\":\"0.154.0\",\"socket.io-client\":\"4.7.1\",\"@babylonjs/gui\":\"6.49.0\",\"@babylonjs/loaders\":\"6.49.0\",\"@babylonjs/materials\":\"6.49.0\",\"cannon-es\":\"0.20.0\",\"@tweenjs/tween.js\":\"18.6.4\"}}","appFunctions",[],"token",{"_18":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_72":73},"Z△L△ △I","symbol","ZALA","price",0.00009085,"marketcap",82834,"image","https://pump.mypinata.cloud/ipfs/QmUaDbuzVdFZy4uvH4tNsFq8byXnq2SiCfM1zudfQs1EhZ?img-width=256&img-dpr=2","website","https://dev.fun/p/65b6496d4f06da20c463","twitter","https://x.com/Zala_AI","devCount",22,"appCount",30,"upstreamApp","isLordOfDev","analytics",[103,107,109,111,113,115,117,119,121,123,125,127,129,131,133,134,135,136],{"_104":105,"_106":59},"day","2025-08-09","runCount",{"_104":108,"_106":59},"2025-08-10",{"_104":110,"_106":59},"2025-08-11",{"_104":112,"_106":59},"2025-08-12",{"_104":114,"_106":59},"2025-08-13",{"_104":116,"_106":59},"2025-08-14",{"_104":118,"_106":59},"2025-08-15",{"_104":120,"_106":59},"2025-08-16",{"_104":122,"_106":59},"2025-08-17",{"_104":124,"_106":59},"2025-08-18",{"_104":126,"_106":59},"2025-08-19",{"_104":128,"_106":59},"2025-08-20",{"_104":130,"_106":59},"2025-08-21",{"_104":132,"_106":59},"2025-08-22",{"_104":108,"_106":41},{"_104":122,"_106":41},{"_104":124,"_106":65},{"_104":132,"_106":41},"snapshot","ogImage","https://cdn.dev.fun/og/image/ed3c486a3f26c24c7959/8cf0b150.webp","isDevbase","actionData","errors"]

say something