`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_307":308,"_309":310},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_108":89,"_26":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":24,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":24},"version",13,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/components/DubaiWorld.tsx","latestPath","fileId","72647134-ab3f-11f1-9497-1607ee4eb77e","name","DubaiWorld.tsx","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 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 return

\n {failure &&

{failure}

}\n

;\n}\n","createdAt",["D",1788842441554],"branchVersion","branchId","242054ff-3ca3-4962-9fd2-94e6539fc3eb","id","9ffa70f9-aba3-4109-8e8d-0fb8a9a9ec93","milliarder-game",["D",1788815610474],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Playable vertical slice for Миллиардер game","imageUrl","fe39b163-4b50-466e-82d1-8bd01133e4b6","pinnedFileId","01a07db8-12e1-737f-8f4d-b1244c5546ee","pinPreview",true,"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",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":54,"_104":105,"_106":24},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"isOwned",45,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","oromaskevic23","handle","displayName","Олександр Ромаскевич","avatar","https://lh3.googleusercontent.com/a/ACg8ocIo1MJ3hDjpQrinMIRok3d2YY1vpHgehs8m2u1_vc7pmFovRGI=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":302,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":303,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":304,"_83":305,"_85":306,"_87":24},"tree",[180,193,194,195,196],"files",[180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196],"counts",{"_170":62,"_171":138,"_172":62,"_173":174,"_175":176},"contents",[130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":164,"_31":165,"_29":166,"_137":-5,"_40":41,"_39":138,"_139":58,"_37":167,"_13":62,"_33":168,"_35":-5,"_23":24,"_143":-5,"_26":169},{"_42":158,"_31":159,"_29":160,"_137":-5,"_40":41,"_39":138,"_139":58,"_37":161,"_13":62,"_33":20,"_35":162,"_23":24,"_143":-5,"_26":163},{"_42":152,"_31":153,"_29":154,"_137":-5,"_40":41,"_39":138,"_139":24,"_37":155,"_13":62,"_33":20,"_35":156,"_23":24,"_143":-5,"_26":157},{"_42":145,"_31":146,"_29":147,"_137":-5,"_40":41,"_39":148,"_139":58,"_37":149,"_13":62,"_33":34,"_35":150,"_23":24,"_143":-5,"_26":151},{"_42":135,"_31":136,"_29":56,"_137":-5,"_40":41,"_39":138,"_139":24,"_37":140,"_13":62,"_33":141,"_35":142,"_23":24,"_143":44,"_26":144},"51af2f9a-ea31-4dc6-a784-06a0a1d2824c","index.ts","parentId",1,"latest",["D",1788815610474],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[136],"b4ebd463-2356-40b1-bfb1-e62cd0c12059","game_engine_tests.ts","609ef6b4-ab02-11f1-9d9d-1607ee4eb77e",8,["D",1788816212411],"import { INITIAL, command, deserialize, helpNearestNpc, move, passiveIncome, serialize, simulateNpcTick } from \"./frontend/gameEngine.ts\";\n\nconst results:{name:string;pass:boolean;detail?:string}[]=[];\nfunction test(name:string,fn:()=>void){try{fn();results.push({name,pass:true})}catch(e){results.push({name,pass:false,detail:String((e as Error).message??e)})}}\nfunction ok(v:any,m=\"assertion failed\"){if(!v)throw new Error(m)}\nfunction eq(a:any,b:any,m=\"not equal\"){if(JSON.stringify(a)!==JSON.stringify(b))throw new Error(`${m}: ${JSON.stringify(a)} != ${JSON.stringify(b)}`)}\nconst clone=()=>structuredClone(INITIAL);\n\ntest(\"initial state uses fictional credits\",()=>{ok(INITIAL.credits===100000);ok(INITIAL.version===1)});\ntest(\"movement changes position deterministically\",()=>{const s=move(clone(),1,0);eq(s.player.x,52)});\ntest(\"movement clamps world bounds\",()=>{let s=clone();s.player.x=95;eq(move(s,1,0).player.x,96)});\ntest(\"business purchase is atomic\",()=>{const s=command(clone(),\"OPEN_BUSINESS\");eq(s.credits,75000);eq(s.businesses,1)});\ntest(\"insufficient funds do not create business\",()=>{let s=clone();s.credits=24999;const n=command(s,\"OPEN_BUSINESS\");eq(n.businesses,0);eq(n.credits,24999)});\ntest(\"property purchase is atomic\",()=>{const s=command(clone(),\"BUY_PROPERTY\");eq(s.properties,1);eq(s.credits,70000)});\ntest(\"vehicle requires ownership\",()=>{const s=command(clone(),\"TOGGLE_VEHICLE\");eq(s.vehicle.active,false)});\ntest(\"owned vehicle toggles and increases movement speed\",()=>{let s=command(clone(),\"BUY_CAR\");s=command(s,\"TOGGLE_VEHICLE\");ok(s.vehicle.active);const n=move(s,1,0);eq(n.player.x,s.player.x+4)});\ntest(\"passive income matches business count\",()=>{let s=clone();s.businesses=3;const n=passiveIncome(s);eq(n.credits,102250)});\ntest(\"help requires proximity\",()=>{const s=helpNearestNpc(clone());eq(s.helped,0)});\ntest(\"nearby NPC help writes memory once\",()=>{let s=clone();s.player={x:72,y:70};s=helpNearestNpc(s);eq(s.helped,1);eq(s.npcs[0].state,\"HELPED\");ok(s.npcs[0].memory.includes(\"PLAYER_HELPED\"));const n=helpNearestNpc(s);eq(n.helped,1)});\ntest(\"helped NPC can progress to thriving\",()=>{let s=clone();s.player={x:72,y:70};s=helpNearestNpc(s);const n=simulateNpcTick(s,12);eq(n.npcs[0].state,\"THRIVING\")});\ntest(\"save round trip preserves state\",()=>{let s=command(clone(),\"OPEN_BUSINESS\");s=move(s,1,-1);eq(deserialize(serialize(s)),s)});\ntest(\"corrupt save fails closed\",()=>{let threw=false;try{deserialize('{\"version\":2,\"credits\":1,\"npcs\":[]}')}catch{threw=true}ok(threw)});\ntest(\"event log is bounded\",()=>{let s=clone();for(let i=0;i<30;i++)s=command(s,\"COMPLETE_CONTRACT\");ok(s.events.length<=20)});\n\nconst passed=results.filter(x=>x.pass).length,failed=results.length-passed;\nconsole.log(JSON.stringify({suite:\"MILLIARDER_GAME_ENGINE\",passed,failed,total:results.length,status:failed===0?\"PASS\":\"FAIL\",results},null,2));\nif(failed)throw new Error(`${failed} tests failed`);\nexport default {passed,failed,total:results.length,results};\n",[146],"026bbebb-31cd-47d2-b6d6-d9461023d18d","README.md","01a07db8-12e1-737f-8f4d-affb8f7bade3",["D",1788815610474],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[153],"ba45aebd-cdf4-4c35-9f88-9861103f4132","CHANGELOG.md","01a07db8-12e1-737f-8f4d-abf751b50929",["D",1788815610474],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

Diff · v13