[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_111":112,"_113":114},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","oromaskevic23","name","milliarder-game","path","frontend/components/DubaiWorld.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/oromaskevic23/milliarder-game/code/frontend/components/DubaiWorld.tsx","extension","id","db691fa0-cb84-4064-87e6-7891fbbf4f4e","DubaiWorld.tsx","fileId","72647134-ab3f-11f1-9497-1607ee4eb77e","parentId","01a07db8-12e1-737f-8f4d-97955a009b88","branchId","242054ff-3ca3-4962-9fd2-94e6539fc3eb","branchVersion",19,"latest",true,"createdAt",["D",1788842684254],"version",1,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n/** Original procedural visual prototype; no imported vehicle, city, or brand assets. */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport * as THREE from \"https://esm.sh/three@0.180.0\";\nimport * as Engine from \"../dubaiEngine.ts\";\nimport {SoftwareWorld} from \"./SoftwareWorld.tsx\";\nimport type { DubaiState } from \"../dubaiEngine.ts\";\n\nexport type DubaiWorldProps = {\n state: DubaiState;\n inputRef: { current: { throttle: number; steer: number; brake: boolean } };\n cameraMode: \"chase\" | \"cockpit\" | \"orbit\";\n onStats?: (stats: { fps: number; chunks: number; drawCalls: number }) => void;\n onReady?: (status: string) => void;\n};\n\ntype ChunkRecord = { group: any; dispose: () => void };\nconst clamp = (n: number, low: number, high: number) => Math.max(low, Math.min(high, n));\n\nfunction windowTexture() {\n const canvas = document.createElement(\"canvas\");\n canvas.width = 128; canvas.height = 256;\n const c = canvas.getContext(\"2d\")!;\n c.fillStyle = \"#243b48\"; c.fillRect(0, 0, 128, 256);\n for (let row = 0; row < 32; row++) for (let col = 0; col < 8; col++) {\n const lit = ((row * 29 + col * 17 + row * col) % 13) < 4;\n c.fillStyle = lit ? [\"#e5c786\", \"#f7ddac\", \"#adbbbd\"][(row + col) % 3] : [\"#638795\", \"#325564\", \"#3b6471\"][(row * 3 + col) % 3];\n c.fillRect(col * 16 + 2, row * 8 + 1, 12, 6);\n c.fillStyle = \"rgba(234,241,237,.12)\"; c.fillRect(col * 16 + 2, row * 8 + 1, 12, 1);\n }\n const tex = new THREE.CanvasTexture(canvas);\n tex.colorSpace = THREE.SRGBColorSpace;\n tex.anisotropy = 2;\n return tex;\n}\n\nexport function DubaiWorld(props: DubaiWorldProps) {\n const hostRef = useRef(null);\n const latest = useRef(props);\n const [failure, setFailure] = useState(\"\");\n latest.current = props;\n\n useEffect(() => {\n const host = hostRef.current;\n if (!host) return;\n let renderer: any;\n try { renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false, powerPreference: \"high-performance\" }); }\n catch { setFailure(\"WebGL недоступен. Включите аппаратное ускорение или откройте игру в браузере с поддержкой WebGL 2.\"); latest.current.onReady?.(\"WEBGL_UNAVAILABLE\"); return; }\n\n renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5));\n renderer.outputColorSpace = THREE.SRGBColorSpace;\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n renderer.toneMappingExposure = 1.12;\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n renderer.domElement.setAttribute(\"aria-label\", \"Трёхмерный открытый район Дубая. Управление WASD, камера C.\");\n renderer.domElement.style.cssText = \"display:block;width:100%;height:100%;outline:none\";\n host.appendChild(renderer.domElement);\n\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(\"#a0bfd0\");\n scene.fog = new THREE.Fog(\"#d6b899\", 310, 1250);\n const camera = new THREE.PerspectiveCamera(60, 1, .1, 8500);\n const first = latest.current.state as any;\n camera.position.set(first.position.x - 11, 8, first.position.z + 15);\n const target = new THREE.Vector3(first.position.x, 1, first.position.z - 7);\n const desired = new THREE.Vector3();\n const look = new THREE.Vector3();\n const transform = new THREE.Object3D();\n const globalGeometry = new Set();\n const globalMaterials = new Set();\n const globalTextures = new Set();\n const glassMaterials = new Set();\n const geom = (g: any) => { globalGeometry.add(g); return g; };\n const material = (p: any) => { const m = new THREE.MeshStandardMaterial(p); globalMaterials.add(m); return m; };\n const box = geom(new THREE.BoxGeometry(1, 1, 1));\n const cylinder = geom(new THREE.CylinderGeometry(1, 1, 1, 8));\n const sphere = geom(new THREE.SphereGeometry(1, 10, 7));\n const windows = windowTexture();\n const asphalt = material({ color: \"#263337\", roughness: .98 });\n const stone = material({ color: \"#c7b79c\", roughness: .91 });\n const glass = material({ color: \"#a5c4cc\", map: windows, roughness: .29, metalness: .5, emissive: \"#b99a62\", emissiveMap: windows, emissiveIntensity: .1 });\n glassMaterials.add(glass);\n const roof = material({ color: \"#baafa0\", metalness: .48, roughness: .35 });\n const dark = material({ color: \"#10191e\", roughness: .8 });\n const palmWood = material({ color: \"#76634a\", roughness: .93 });\n const palmLeaf = material({ color: \"#456858\", roughness: .88, side: THREE.DoubleSide });\n const chrome = material({ color: \"#bfcccd\", metalness: .9, roughness: .2 });\n const cream = material({ color: \"#e7dbc4\", roughness: .55 });\n const lamp = material({ color: \"#fce2a0\", emissive: \"#ffcb65\", emissiveIntensity: .5, roughness: .25 });\n const whiteLine = material({ color: \"#e2d7ad\", roughness: .8 });\n const redLight = material({ color: \"#df2938\", emissive: \"#f81725\", emissiveIntensity: 1.1 });\n const headLight = material({ color: \"#dbf4ff\", emissive: \"#c5ecff\", emissiveIntensity: 1 });\n\n const world = new THREE.Group(); scene.add(world);\n const hemisphere = new THREE.HemisphereLight(\"#d9efff\", \"#bca282\", 2.4); scene.add(hemisphere);\n const sunLight = new THREE.DirectionalLight(\"#ffd4a3\", 3.4);\n sunLight.castShadow = true; sunLight.shadow.mapSize.set(1024, 1024);\n Object.assign(sunLight.shadow.camera, { left: -85, right: 85, top: 85, bottom: -85, near: 1, far: 700 });\n sunLight.shadow.normalBias = .08; sunLight.shadow.bias = -.00012;\n scene.add(sunLight, sunLight.target);\n\n const skyUniforms = { topColor: { value: new THREE.Color(\"#5795b7\") }, horizonColor: { value: new THREE.Color(\"#f1c6a0\") }, bottomColor: { value: new THREE.Color(\"#b6b6ac\") } };\n const skyMaterial = new THREE.ShaderMaterial({ side: THREE.BackSide, depthWrite: false,\n uniforms: skyUniforms,\n vertexShader: \"varying vec3 vDirection; void main(){vDirection=normalize(position);gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}\",\n fragmentShader: \"varying vec3 vDirection;uniform vec3 topColor;uniform vec3 horizonColor;uniform vec3 bottomColor;void main(){float h=vDirection.y;vec3 c=h>0.?mix(horizonColor,topColor,pow(min(h*1.55,1.),.65)):mix(horizonColor,bottomColor,min(-h*3.,1.));gl_FragColor=vec4(c,1.);}\" });\n globalMaterials.add(skyMaterial);\n const sky = new THREE.Mesh(geom(new THREE.SphereGeometry(7500, 24, 12)), skyMaterial); sky.renderOrder = -20; scene.add(sky);\n const sunMat = new THREE.MeshBasicMaterial({ color: \"#fff0bd\", fog: false, depthWrite: false }); globalMaterials.add(sunMat);\n const sunDisc = new THREE.Mesh(sphere, sunMat); sunDisc.scale.setScalar(66); scene.add(sunDisc);\n const sunHaloMat = new THREE.MeshBasicMaterial({ color: \"#ffd499\", fog: false, transparent: true, opacity: .08, depthWrite: false }); globalMaterials.add(sunHaloMat);\n const sunHalo = new THREE.Mesh(sphere, sunHaloMat); sunHalo.scale.setScalar(120); scene.add(sunHalo);\n\n const ground = new THREE.Mesh(geom(new THREE.PlaneGeometry(18000, 18000)), stone);\n ground.rotation.x = -Math.PI / 2; ground.position.y = -.16; ground.receiveShadow = true; world.add(ground);\n const waterUniforms = { time: { value: 0 }, day: { value: 1 }, fogColor: { value: new THREE.Color(\"#c9b49e\") } };\n const waterMat = new THREE.ShaderMaterial({ uniforms: waterUniforms,\n vertexShader: \"varying vec3 vWorld;void main(){vec4 w=modelMatrix*vec4(position,1.);vWorld=w.xyz;gl_Position=projectionMatrix*viewMatrix*w;}\",\n fragmentShader: \"varying vec3 vWorld;uniform float time;uniform float day;uniform vec3 fogColor;void main(){float w=sin(vWorld.x*.073+time*.62)*sin(vWorld.z*.095-time*.36);float s=pow(max(0.,sin(vWorld.x*.042+vWorld.z*.061+time*.55)),24.);vec3 c=mix(vec3(.027,.15,.19),vec3(.15,.39,.44),day*.7+w*.08)+vec3(.65,.48,.25)*s*.17*day;float d=length(vWorld-cameraPosition);c=mix(c,fogColor,smoothstep(450.,2200.,d)*.75);gl_FragColor=vec4(c,1.);}\" });\n globalMaterials.add(waterMat);\n const water = new THREE.Mesh(geom(new THREE.PlaneGeometry(6500, 16000, 1, 1)), waterMat);\n water.rotation.x = -Math.PI / 2; water.position.set(-5050, -.03, 0); world.add(water);\n const coast = new THREE.Mesh(geom(new THREE.BoxGeometry(36, .16, 6300)), cream); coast.position.set(-1783, -.04, 0); world.add(coast);\n\n const instances = (geometry: any, mat: any, items: any[], parent: any, castShadow = false) => {\n if (!items.length) return null;\n const mesh = new THREE.InstancedMesh(geometry, mat, items.length);\n for (let i = 0; i < items.length; i++) {\n const v = items[i]; transform.position.set(v.x, v.y, v.z);\n transform.rotation.set(v.rx || 0, v.ry || 0, v.rz || 0);\n transform.scale.set(v.w, v.h, v.d); transform.updateMatrix(); mesh.setMatrixAt(i, transform.matrix);\n if (v.color) mesh.setColorAt(i, new THREE.Color(v.color));\n }\n mesh.castShadow = castShadow; mesh.receiveShadow = true;\n mesh.instanceMatrix.needsUpdate = true; if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true;\n parent.add(mesh); return mesh;\n };\n\n const chunks = new Map();\n const buildChunk = (cx: number, cz: number): ChunkRecord => {\n const data = Engine.generateChunk(cx, cz) as any;\n const group = new THREE.Group(); group.name = `stream:${cx},${cz}`;\n const g = new THREE.BoxGeometry(1, 1, 1);\n const ownedMaterials = [asphalt.clone(), stone.clone(), glass.clone(), roof.clone(), palmWood.clone(), palmLeaf.clone(), whiteLine.clone(), lamp.clone()];\n const [roadMat, pavingMat, facadeMat, capMat, trunkMat, leafMat, paintMat, bulbMat] = ownedMaterials;\n glassMaterials.add(facadeMat);\n const x = cx * Engine.CHUNK_SIZE, z = cz * Engine.CHUNK_SIZE;\n const roadSurface = new THREE.Mesh(g, roadMat); roadSurface.scale.set(256, .05, 256); roadSurface.position.set(x + 128, -.04, z + 128); roadSurface.receiveShadow = true;\n // Western districts use connected road bridges and raised island plots.\n // Retain every collision building generated by the shared simulation.\n if (x + 256 > -1800) group.add(roadSurface);\n else {\n const bridges: any[] = [];\n for (let i = 0; i < 3; i++) {\n bridges.push({ x: x + i * 128, y: -.006, z: z + 128, w: 36, h: .052, d: 256 });\n bridges.push({ x: x + 128, y: -.006, z: z + i * 128, w: 256, h: .052, d: 36 });\n }\n instances(g, roadMat, bridges, group);\n }\n const paving: any[] = [], bases: any[] = [], towers: any[] = [], caps: any[] = [], markings: any[] = [], trunks: any[] = [], leaves: any[] = [], poles: any[] = [], bulbs: any[] = [];\n for (let ix = 0; ix < 2; ix++) for (let iz = 0; iz < 2; iz++) {\n const bx = x + ix * 128 + 64, bz = z + iz * 128 + 64;\n paving.push({ x: bx, y: .03, z: bz, w: 90, h: .17, d: 90 });\n for (const side of [-1, 1]) {\n for (const off of [-29, 29]) {\n const px = bx + side * 40, pz = bz + off;\n trunks.push({ x: px, y: 3.6, z: pz, w: .37, h: 7.2, d: .37, rz: side * .022 });\n for (let k = 0; k < 5; k++) leaves.push({ x: px, y: 7.25, z: pz, w: .72, h: .18, d: 6.6, ry: k * Math.PI / 5, rz: (k % 2 ? 1 : -1) * .12 });\n }\n poles.push({ x: bx + side * 44, y: 4.3, z: bz + 42, w: .18, h: 8.6, d: .18 });\n poles.push({ x: bx + side * 43, y: 8.5, z: bz + 42, w: 2.3, h: .16, d: .22 });\n bulbs.push({ x: bx + side * 43, y: 8.37, z: bz + 42, w: 1.65, h: .11, d: .37 });\n }\n }\n for (let i = 0; i < 2; i++) for (let j = 0; j < 8; j++) {\n const a = x + i * 128, b = z + j * 32 + 14;\n markings.push({ x: a, y: .027, z: b, w: .18, h: .013, d: 10 });\n const c = x + j * 32 + 14, d = z + i * 128;\n markings.push({ x: c, y: .027, z: d, w: 10, h: .013, d: .18 });\n }\n for (const b of data.buildings) {\n const h = b.height;\n bases.push({ x: b.x, y: 1.15, z: b.z, w: b.width + 2, h: 2.3, d: b.depth + 2 });\n towers.push({ x: b.x, y: h / 2 + .2, z: b.z, w: b.width, h, d: b.depth, color: b.color });\n caps.push({ x: b.x, y: h + .6, z: b.z, w: b.width + .7, h: 1, d: b.depth + .7 });\n if (h > 70) {\n caps.push({ x: b.x, y: h + h * .09, z: b.z, w: b.width * .55, h: h * .17, d: b.depth * .6 });\n caps.push({ x: b.x, y: h * 1.23, z: b.z, w: .55, h: h * .18, d: .55 });\n for (let band = 1; band < 4; band++) caps.push({ x: b.x, y: h * band / 4, z: b.z, w: b.width + .15, h: .32, d: b.depth + .15 });\n }\n }\n instances(g, pavingMat, paving, group); instances(g, pavingMat, bases, group);\n instances(g, facadeMat, towers, group, true); instances(g, capMat, caps, group);\n instances(g, paintMat, markings, group); instances(g, trunkMat, trunks, group);\n instances(g, leafMat, leaves, group); instances(g, capMat, poles, group); instances(g, bulbMat, bulbs, group);\n world.add(group);\n return { group, dispose: () => { world.remove(group); glassMaterials.delete(facadeMat); g.dispose(); ownedMaterials.forEach(m => m.dispose()); group.clear(); } };\n };\n\n // Distant district proxies provide a skyline while detail remains bounded to 25 chunks.\n const horizonItems: any[] = [];\n for (const district of Engine.DISTRICTS as any[]) {\n if (district.x < -1800) continue;\n for (let i = 0; i < 12; i++) {\n const px = district.x + ((i * 197) % 690) - 320, pz = district.z + ((i * 313) % 690) - 320;\n const h = 35 + ((i * 73 + Math.abs(district.x)) % 175);\n horizonItems.push({ x: px, y: h / 2, z: pz, w: 25 + i % 4 * 7, h, d: 29 + i % 3 * 8, color: district.color });\n }\n }\n const horizon = instances(box, glass, horizonItems, world);\n const updateHorizon = (keys: Set) => {\n if (!horizon) return;\n horizonItems.forEach((v, i) => {\n const hidden = keys.has(`${Math.floor(v.x / 256)},${Math.floor(v.z / 256)}`);\n transform.position.set(v.x, v.y, v.z); transform.rotation.set(0, 0, 0);\n transform.scale.set(hidden ? 0 : v.w, hidden ? 0 : v.h, hidden ? 0 : v.d); transform.updateMatrix(); horizon.setMatrixAt(i, transform.matrix);\n }); horizon.instanceMatrix.needsUpdate = true;\n };\n\n const part = (parent: any, geometry: any, mat: any, x: number, y: number, z: number, sx: number, sy: number, sz: number) => {\n const m = new THREE.Mesh(geometry, mat); m.position.set(x, y, z); m.scale.set(sx, sy, sz); m.castShadow = true; m.receiveShadow = true; parent.add(m); return m;\n };\n const car = new THREE.Group(); world.add(car);\n const carPaint = material({ color: \"#c48f58\", metalness: .64, roughness: .22 });\n const carGlass = material({ color: \"#102f3f\", metalness: .65, roughness: .12 });\n const body = part(car, box, carPaint, 0, .76, 0, 2.05, .56, 4.5);\n part(car, box, carPaint, 0, 1.07, -1.36, 1.92, .15, 1.25);\n part(car, box, carPaint, 0, .39, .05, 1.95, .17, 4.6);\n const cabin = part(car, box, carGlass, 0, 1.28, .14, 1.65, .62, 1.93);\n cabin.rotation.x = -.025;\n part(car, box, carPaint, 0, 1.64, .2, 1.61, .07, 1.37);\n part(car, box, dark, 0, .62, -2.28, 1.41, .19, .035);\n part(car, box, chrome, 0, .42, -2.31, 1.78, .045, .06);\n part(car, box, dark, 0, .51, 2.28, 1.67, .25, .06);\n const wheelGeometry = geom(new THREE.CylinderGeometry(.37, .37, .24, 16)); wheelGeometry.rotateZ(Math.PI / 2);\n const rimGeometry = geom(new THREE.CylinderGeometry(.24, .24, .25, 10)); rimGeometry.rotateZ(Math.PI / 2);\n const wheels: any[] = [];\n for (const x of [-1.025, 1.025]) for (const z of [-1.4, 1.43]) {\n const wheel = new THREE.Group(); wheel.position.set(x, .44, z); car.add(wheel);\n part(wheel, wheelGeometry, dark, 0, 0, 0, 1, 1, 1); part(wheel, rimGeometry, chrome, 0, 0, 0, 1, 1, 1); wheels.push(wheel);\n }\n for (const x of [-.71, .71]) {\n part(car, box, headLight, x, .9, -2.264, .56, .075, .026);\n part(car, box, redLight, x, .92, 2.266, .65, .07, .027);\n part(car, box, carPaint, x * 1.37, 1.35, -.57, .2, .13, .28);\n part(car, cylinder, chrome, x, .46, 2.33, .09, .1, .09).rotation.x = Math.PI / 2;\n }\n // Original cockpit details are separate from the chase camera shell.\n const dash = part(car, box, dark, 0, 1.12, -.66, 1.42, .16, .35);\n const cockpitWheel = part(car, geom(new THREE.TorusGeometry(.185, .025, 8, 20)), dark, -.44, 1.37, -.48, 1, 1, 1);\n cockpitWheel.rotation.x = -.2;\n part(car, box, headLight, -.42, 1.27, -.7, .25, .085, .016);\n part(car, box, dark, -.4, .95, .37, .52, .57, .47); part(car, box, dark, .4, .95, .37, .52, .57, .47);\n\n const avatar = new THREE.Group(); world.add(avatar);\n part(avatar, cylinder, material({ color: \"#e6ded0\", roughness: .85 }), 0, 1.09, 0, .26, .81, .22);\n part(avatar, sphere, material({ color: \"#b98364\", roughness: .88 }), 0, 1.67, 0, .2, .24, .2);\n const avatarLegs = [part(avatar, cylinder, dark, -.13, .39, 0, .1, .71, .1), part(avatar, cylinder, dark, .13, .39, 0, .1, .71, .1)];\n\n const trafficCount = 96;\n const trafficBodies = new THREE.InstancedMesh(box, carPaint.clone(), trafficCount); globalMaterials.add(trafficBodies.material);\n trafficBodies.material.color.set(\"#ffffff\");\n const trafficCabins = new THREE.InstancedMesh(box, carGlass, trafficCount);\n const trafficLights = new THREE.InstancedMesh(box, redLight, trafficCount);\n for (const mesh of [trafficBodies, trafficCabins, trafficLights]) { mesh.count = 0; mesh.castShadow = true; mesh.frustumCulled = false; world.add(mesh); }\n const maxNpcs = 192;\n const npcBodyMaterial = material({ color: \"#ffffff\", roughness: .9 });\n const npcHeadMaterial = material({ color: \"#b98766\", roughness: .9 });\n const npcBodies = new THREE.InstancedMesh(cylinder, npcBodyMaterial, maxNpcs);\n const npcHeads = new THREE.InstancedMesh(sphere, npcHeadMaterial, maxNpcs);\n const npcLegs = new THREE.InstancedMesh(cylinder, dark, maxNpcs * 2);\n for (const mesh of [npcBodies, npcHeads, npcLegs]) { mesh.count = 0; mesh.frustumCulled = false; mesh.castShadow = true; world.add(mesh); }\n const npcColors = [\"#e6dfcb\", \"#a5b8bb\", \"#4d647a\", \"#936e62\", \"#889080\", \"#d7ba9c\"];\n\n const markers: { group: any; location: any }[] = [];\n const markerRing = geom(new THREE.RingGeometry(1.6, 1.75, 36));\n for (const location of Engine.LOCATIONS as any[]) {\n const group = new THREE.Group(); group.position.set(location.x, 0, location.z);\n const color = location.type === \"charity\" ? \"#a7dfb4\" : location.type === \"dealer\" ? \"#f0c77c\" : \"#b6d4e0\";\n const markerMat = new THREE.MeshBasicMaterial({ color, side: THREE.DoubleSide, transparent: true, opacity: .68 }); globalMaterials.add(markerMat);\n const ring = new THREE.Mesh(markerRing, markerMat); ring.rotation.x = -Math.PI / 2; ring.position.y = .08; group.add(ring);\n const canvas = document.createElement(\"canvas\"); canvas.width = 512; canvas.height = 112;\n const c = canvas.getContext(\"2d\")!;\n c.fillStyle = \"rgba(12,28,37,.82)\"; c.fillRect(0, 0, 512, 112);\n c.fillStyle = color; c.fillRect(0, 108, 512, 4); c.textAlign = \"center\";\n c.font = \"600 29px system-ui, sans-serif\"; c.fillText(location.name, 256, 49, 478);\n c.font = \"20px system-ui, sans-serif\"; c.fillStyle = \"#b7c4c5\";\n const category: Record = { office: \"ГОРОДСКИЕ ЗАДАНИЯ\", dealer: \"АВТОМОБИЛИ\", charity: \"ПОМОЩЬ ЛЮДЯМ\", property: \"НЕДВИЖИМОСТЬ\", business: \"БИЗНЕС\", marina: \"НАБЕРЕЖНАЯ\", heliport: \"ВЕРТОЛЁТНАЯ ПЛОЩАДКА\", airport: \"АЭРОПОРТ\" };\n c.fillText(category[location.type] || \"ГОРОД\", 256, 83, 478);\n const texture = new THREE.CanvasTexture(canvas); texture.colorSpace = THREE.SRGBColorSpace; globalTextures.add(texture);\n const spriteMat = new THREE.SpriteMaterial({ map: texture, depthTest: true, transparent: true, opacity: .92 }); globalMaterials.add(spriteMat);\n const sign = new THREE.Sprite(spriteMat); sign.position.y = 4.8; sign.scale.set(13.7, 3, 1); group.add(sign);\n world.add(group); markers.push({ group, location });\n }\n\n const interior = new THREE.Group(); scene.add(interior); interior.visible = false;\n part(interior, box, cream, 0, -.15, 0, 17, .22, 16);\n part(interior, box, stone, 0, 2.7, -7.8, 17, 5.5, .35);\n part(interior, box, cream, -8.3, 2.7, 0, .35, 5.5, 16);\n part(interior, box, carGlass, 8.3, 2.7, -2, .2, 5.5, 11);\n part(interior, box, palmWood, 0, 1.08, -3.8, 5.5, .3, 1.65);\n part(interior, box, dark, 0, .45, -3.8, 3.8, 1.1, 1.1);\n part(interior, box, carGlass, 0, 1.7, -3.85, 1.2, .75, .09);\n for (const x of [-4.9, 4.9]) {\n part(interior, box, material({ color: \"#546e70\", roughness: .92 }), x, .63, 1.9, 2.6, .8, 1.25);\n part(interior, box, carGlass, x, 1.2, 2.32, 2.6, .65, .3);\n part(interior, cylinder, cream, x, .41, -.4, .8, .09, .8);\n part(interior, cylinder, chrome, x, .2, -.4, .06, .4, .06);\n }\n const officeLight = new THREE.PointLight(\"#ffebcf\", 50, 22, 2); officeLight.position.set(0, 4, 0); interior.add(officeLight);\n\n const rainCount = 520;\n const rainPositions = new Float32Array(rainCount * 3);\n for (let i = 0; i < rainCount; i++) { rainPositions[i * 3] = ((i * 37) % 110) - 55; rainPositions[i * 3 + 1] = (i * 11) % 45; rainPositions[i * 3 + 2] = ((i * 53) % 110) - 55; }\n const rainGeometry = geom(new THREE.BufferGeometry()); rainGeometry.setAttribute(\"position\", new THREE.BufferAttribute(rainPositions, 3));\n const rainMat = new THREE.PointsMaterial({ color: \"#b1ccd9\", size: .12, transparent: true, opacity: .63, depthWrite: false }); globalMaterials.add(rainMat);\n const rain = new THREE.Points(rainGeometry, rainMat); rain.frustumCulled = false; scene.add(rain);\n\n let frameId = 0, previous = performance.now(), elapsed = 0, frameCount = 0, lastStats = previous, lastTraffic = -1;\n let lastCell = \"\", chunkQueue: string[] = [], activeKeys = new Set();\n let traffic: any[] = [], lastVehicle = \"\", rendered = false, disposed = false, orbitYaw = -.55;\n let dragging = false, pointerX = 0;\n const onPointerDown = (e: PointerEvent) => { if (latest.current.cameraMode !== \"orbit\") return; dragging = true; pointerX = e.clientX; renderer.domElement.setPointerCapture(e.pointerId); };\n const onPointerMove = (e: PointerEvent) => { if (dragging) { orbitYaw += (e.clientX - pointerX) * .008; pointerX = e.clientX; } };\n const onPointerUp = () => { dragging = false; };\n renderer.domElement.addEventListener(\"pointerdown\", onPointerDown); renderer.domElement.addEventListener(\"pointermove\", onPointerMove);\n renderer.domElement.addEventListener(\"pointerup\", onPointerUp); renderer.domElement.addEventListener(\"pointercancel\", onPointerUp);\n const onContextLost = (e: Event) => { e.preventDefault(); setFailure(\"Графический контекст потерян. Сохранённый игровой прогресс остаётся в браузере; перезагрузите страницу.\"); latest.current.onReady?.(\"WEBGL_CONTEXT_LOST\"); };\n renderer.domElement.addEventListener(\"webglcontextlost\", onContextLost);\n const resize = () => { const w = Math.max(host.clientWidth, 1), h = Math.max(host.clientHeight, 1); renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix(); };\n const observer = new ResizeObserver(resize); observer.observe(host); resize();\n\n const setInstance = (mesh: any, i: number, x: number, y: number, z: number, w: number, h: number, d: number, heading = 0, swing = 0) => {\n transform.position.set(x, y, z); transform.rotation.set(swing, -heading, 0); transform.scale.set(w, h, d); transform.updateMatrix(); mesh.setMatrixAt(i, transform.matrix);\n };\n const animate = (now: number) => {\n if (disposed) return;\n frameId = requestAnimationFrame(animate);\n const dt = Math.min((now - previous) / 1000, .06); previous = now; elapsed += dt; frameCount++;\n const { state: raw, cameraMode, inputRef } = latest.current;\n const s = raw as any, p = s.position;\n const cell = `${Math.floor(p.x / 256)},${Math.floor(p.z / 256)}`;\n if (cell !== lastCell) {\n lastCell = cell; activeKeys = new Set(Engine.getChunkKeys(p.x, p.z, 2));\n for (const [key, chunk] of chunks) if (!activeKeys.has(key)) { chunk.dispose(); chunks.delete(key); }\n chunkQueue = [...activeKeys].filter(key => !chunks.has(key)).sort((a, b) => {\n const [ax, az] = a.split(\",\").map(Number), [bx, bz] = b.split(\",\").map(Number);\n return Math.hypot(ax * 256 + 128 - p.x, az * 256 + 128 - p.z) - Math.hypot(bx * 256 + 128 - p.x, bz * 256 + 128 - p.z);\n }); updateHorizon(activeKeys);\n }\n for (let n = 0; n < 2 && chunkQueue.length; n++) { const key = chunkQueue.shift()!; const [cx, cz] = key.split(\",\").map(Number); chunks.set(key, buildChunk(cx, cz)); }\n\n const hour = ((s.clock || 0) % 1440) / 60;\n const solar = Math.sin((hour - 6) / 24 * Math.PI * 2);\n const day = clamp(solar * 1.4 + .12, .025, 1);\n const sunset = clamp(1 - Math.abs(solar) * 3.1, 0, 1) * clamp(day * 3, 0, 1);\n const rainy = s.weather === \"rain\", hazy = s.weather === \"haze\";\n skyUniforms.topColor.value.set(\"#153052\").lerp(new THREE.Color(rainy ? \"#66868f\" : \"#75aec5\"), day);\n skyUniforms.horizonColor.value.set(\"#324459\").lerp(new THREE.Color(rainy ? \"#9baba8\" : \"#cee0dd\"), day).lerp(new THREE.Color(\"#edb17e\"), sunset * .65);\n skyUniforms.bottomColor.value.copy(skyUniforms.horizonColor.value).multiplyScalar(.82);\n scene.fog.color.copy(skyUniforms.horizonColor.value); scene.fog.near = rainy ? 120 : hazy ? 190 : 310; scene.fog.far = rainy ? 620 : hazy ? 840 : 1450;\n hemisphere.intensity = .5 + day * 1.8; sunLight.intensity = (.08 + day * 3.1) * (rainy ? .3 : 1);\n sunLight.color.set(\"#fff2d8\").lerp(new THREE.Color(\"#ffb56e\"), sunset);\n sunLight.position.set(p.x - 160, 65 + Math.max(0, solar) * 250, p.z - 210); sunLight.target.position.set(p.x, 0, p.z);\n for (const mat of glassMaterials) mat.emissiveIntensity = .025 + (1 - day) * .49;\n lamp.emissiveIntensity = .4 + (1 - day) * 2.6;\n waterUniforms.time.value = elapsed; waterUniforms.day.value = day; waterUniforms.fogColor.value.copy(scene.fog.color);\n sky.position.copy(camera.position);\n sunDisc.position.set(camera.position.x - 2450, camera.position.y + solar * 2350, camera.position.z - 3150); sunHalo.position.copy(sunDisc.position);\n sunDisc.visible = sunHalo.visible = !rainy && solar > -.04;\n\n if (lastVehicle !== s.selectedVehicle) {\n lastVehicle = s.selectedVehicle;\n const vehicle = (Engine.VEHICLES as any[]).find(v => v.id === lastVehicle);\n carPaint.color.set(vehicle?.color || \"#c48f58\");\n const cls = String(vehicle?.class || \"\").toLowerCase();\n const tall = cls.includes(\"suv\") || cls.includes(\"off\");\n car.scale.set(1, tall ? 1.35 : 1, cls.includes(\"sedan\") || cls.includes(\"executive\") ? 1.12 : 1);\n }\n car.position.set(p.x, 0, p.z); car.rotation.y = -s.heading;\n car.visible = !!s.driving && !s.interior; avatar.visible = !s.driving && !s.interior;\n avatar.position.set(p.x, 0, p.z); avatar.rotation.y = -s.heading;\n avatarLegs[0].rotation.x = Math.sin(elapsed * 9) * Math.min(Math.abs(s.speed) * .08, .4); avatarLegs[1].rotation.x = -avatarLegs[0].rotation.x;\n redLight.emissiveIntensity = inputRef.current.brake ? 4 : .9;\n cockpitWheel.rotation.z = -inputRef.current.steer * .7;\n wheels.forEach((wheel, i) => { wheel.rotation.x += s.speed * dt / .37; if (i % 2 === 0) wheel.rotation.y = -inputRef.current.steer * .36; });\n const cockpit = cameraMode === \"cockpit\" && s.driving && !s.interior;\n body.visible = cabin.visible = !cockpit; dash.visible = true;\n const sin = Math.sin(s.heading), cos = Math.cos(s.heading);\n interior.visible = !!s.interior;\n for (const marker of markers) marker.group.visible = !s.interior && Math.hypot(marker.location.x - p.x, marker.location.z - p.z) < 135;\n if (s.interior) {\n interior.position.set(p.x, 0, p.z); desired.set(p.x + 7, 5.7, p.z + 10); look.set(p.x, 1.5, p.z - 2.5);\n } else if (cockpit) {\n desired.set(p.x - .38 * cos + .13 * sin, 1.43, p.z - .38 * sin - .13 * cos); look.set(p.x + sin * 60, 1.45, p.z - cos * 60);\n } else if (cameraMode === \"orbit\") {\n desired.set(p.x + Math.sin(orbitYaw) * 23, 12.5, p.z + Math.cos(orbitYaw) * 23); look.set(p.x, 1.25, p.z);\n } else {\n const distance = s.driving ? 9.2 + Math.min(Math.abs(s.speed) * .10, 5) : 5.5;\n desired.set(p.x - sin * distance + cos * .5, s.driving ? 4.3 + Math.min(Math.abs(s.speed) * .023, 1.2) : 3.4, p.z + cos * distance + sin * .5);\n look.set(p.x + sin * 8, s.driving ? 1.3 : 1.4, p.z - cos * 8);\n }\n camera.position.lerp(desired, cockpit ? 1 : 1 - Math.exp(-dt * 5.5));\n target.lerp(look, cockpit ? 1 : 1 - Math.exp(-dt * 7.5)); camera.lookAt(target);\n\n if (elapsed - lastTraffic > .08) {\n traffic = typeof Engine.getTraffic === \"function\" ? Engine.getTraffic(s.clock) as any[] : []; lastTraffic = elapsed;\n }\n const visibleTraffic = traffic.filter(v => Math.abs(v.x - p.x) < 660 && Math.abs(v.z - p.z) < 660).slice(0, trafficCount);\n visibleTraffic.forEach((v, i) => {\n setInstance(trafficBodies, i, v.x, .74, v.z, 1.92, .65, 4.15, v.heading);\n trafficBodies.setColorAt(i, new THREE.Color(v.color || \"#abbabe\"));\n setInstance(trafficCabins, i, v.x, 1.25, v.z, 1.58, .55, 1.9, v.heading);\n setInstance(trafficLights, i, v.x - Math.sin(v.heading) * 2.09, .87, v.z + Math.cos(v.heading) * 2.09, 1.5, .065, .03, v.heading);\n });\n for (const mesh of [trafficBodies, trafficCabins, trafficLights]) { mesh.count = visibleTraffic.length; mesh.instanceMatrix.needsUpdate = true; }\n if (trafficBodies.instanceColor) trafficBodies.instanceColor.needsUpdate = true;\n const npcs = (s.npcs || []).filter((n: any) => Math.abs(n.x - p.x) < 660 && Math.abs(n.z - p.z) < 660).slice(0, maxNpcs);\n npcs.forEach((n: any, i: number) => {\n const swing = Math.sin(elapsed * 5.7 + i) * .20;\n setInstance(npcBodies, i, n.x, 1.12, n.z, .25, .8, .22);\n npcBodies.setColorAt(i, new THREE.Color(npcColors[i % npcColors.length]));\n setInstance(npcHeads, i, n.x, 1.68, n.z, .19, .23, .19);\n setInstance(npcLegs, i * 2, n.x - .12, .43, n.z, .09, .72, .09, 0, swing);\n setInstance(npcLegs, i * 2 + 1, n.x + .12, .43, n.z, .09, .72, .09, 0, -swing);\n });\n npcBodies.count = npcHeads.count = npcs.length; npcLegs.count = npcs.length * 2;\n for (const mesh of [npcBodies, npcHeads, npcLegs]) mesh.instanceMatrix.needsUpdate = true;\n if (npcBodies.instanceColor) npcBodies.instanceColor.needsUpdate = true;\n rain.visible = rainy && !s.interior; rain.position.set(p.x, 0, p.z);\n if (rain.visible) { for (let i = 0; i < rainCount; i++) { rainPositions[i * 3 + 1] -= dt * 24; if (rainPositions[i * 3 + 1] < 0) rainPositions[i * 3 + 1] += 45; } rainGeometry.attributes.position.needsUpdate = true; }\n\n renderer.render(scene, camera);\n if (!rendered && chunks.size > 0) { rendered = true; latest.current.onReady?.(\"WEBGL_READY\"); }\n if (now - lastStats >= 1000) { latest.current.onStats?.({ fps: Math.round(frameCount * 1000 / (now - lastStats)), chunks: chunks.size, drawCalls: renderer.info.render.calls }); lastStats = now; frameCount = 0; }\n };\n frameId = requestAnimationFrame(animate);\n\n return () => {\n disposed = true; cancelAnimationFrame(frameId); observer.disconnect();\n renderer.domElement.removeEventListener(\"pointerdown\", onPointerDown); renderer.domElement.removeEventListener(\"pointermove\", onPointerMove);\n renderer.domElement.removeEventListener(\"pointerup\", onPointerUp); renderer.domElement.removeEventListener(\"pointercancel\", onPointerUp); renderer.domElement.removeEventListener(\"webglcontextlost\", onContextLost);\n for (const chunk of chunks.values()) chunk.dispose(); chunks.clear();\n globalGeometry.forEach(g => g.dispose()); globalMaterials.forEach(m => m.dispose()); globalTextures.forEach(t => t.dispose()); windows.dispose();\n renderer.dispose(); if (renderer.domElement.parentNode === host) host.removeChild(renderer.domElement); scene.clear();\n };\n }, []);\n\n if(failure)return ;\n return

\n {failure &&

{failure}

}\n

;\n}\n","deleted",false,"label",[47,48,24],"frontend","components","9ffa70f9-aba3-4109-8e8d-0fb8a9a9ec93",["D",1788815610474],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Playable vertical slice for Миллиардер game","imageUrl","userId","fe39b163-4b50-466e-82d1-8bd01133e4b6","pinnedFileId","01a07db8-12e1-737f-8f4d-b1244c5546ee","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a03585-eb44-758d-92a4-77db1a9a243c","tursoName","9ffa70f9aba341098e8d0fb8a9a9ec93","tursoHostname","9ffa70f9aba341098e8d0fb8a9a9ec93-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789512044203],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_110":106},"org",{"_9":10,"_103":104,"_105":106,"_59":60,"_107":108,"_109":44},"branch",{"_37":93,"_11":94,"_22":30,"_95":49,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":12,"_102":10},"isOwned",45,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Олександр Ромаскевич","avatar","https://lh3.googleusercontent.com/a/ACg8ocIo1MJ3hDjpQrinMIRok3d2YY1vpHgehs8m2u1_vc7pmFovRGI=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_144":145,"_146":147,"_148":149,"_150":44,"_151":44,"_152":44,"_153":34,"_154":-5,"_155":-7,"_156":-7,"_157":67,"_158":44,"_159":44,"_160":-5,"_161":44,"_162":44,"_163":44,"_164":-5},"ENV",{"_115":116,"_117":118,"_119":94,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141,"_142":143},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]