`, 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",{"_241":242,"_243":244},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","01a08512-d669-73d9-b964-732728d6180c","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const mount = useRef(null);\n const [status,setStatus]=useState(\"READY\");\n const [money,setMoney]=useState(500);\n const [character,setCharacter]=useState(\"RANGER\");\n useEffect(()=>{\n let cleanup=()=>{}; let cancelled=false;\n import(\"https://esm.sh/three@0.179.1\").then((THREE)=>{\n if(cancelled||!mount.current)return; const el=mount.current;\n const scene=new THREE.Scene(); scene.background=new THREE.Color(0x8db7d8); scene.fog=new THREE.Fog(0x8db7d8,35,115);\n const camera=new THREE.PerspectiveCamera(62,el.clientWidth/Math.max(1,el.clientHeight),.1,220);\n const renderer=new THREE.WebGLRenderer({antialias:true}); renderer.setPixelRatio(Math.min(devicePixelRatio,2)); renderer.setSize(el.clientWidth,el.clientHeight); renderer.shadowMap.enabled=true; el.appendChild(renderer.domElement);\n scene.add(new THREE.HemisphereLight(0xffffff,0x405060,2.2)); const sun=new THREE.DirectionalLight(0xffffff,3);sun.position.set(20,35,10);sun.castShadow=true;scene.add(sun);\n const ground=new THREE.Mesh(new THREE.PlaneGeometry(180,180),new THREE.MeshStandardMaterial({color:0x587b55,roughness:1}));ground.rotation.x=-Math.PI/2;ground.receiveShadow=true;scene.add(ground);\n scene.add(new THREE.GridHelper(180,60,0x334c35,0x456447));\n for(let i=0;i<32;i++){const s=2+Math.random()*4,h=1.5+Math.random()*4,b=new THREE.Mesh(new THREE.BoxGeometry(s,h,s),new THREE.MeshStandardMaterial({color:i%3===0?0x777777:0x9a7b58}));b.position.set((Math.random()-.5)*90,h/2,(Math.random()-.5)*90);b.castShadow=true;b.receiveShadow=true;scene.add(b)}\n // Original character with outfit, backpack, helmet and weapon.\n const player=new THREE.Group();\n const suitColor=0x244b75;\n const torso=new THREE.Mesh(new THREE.BoxGeometry(.85,1.05,.5),new THREE.MeshStandardMaterial({color:suitColor}));torso.position.y=1.3;torso.castShadow=true;player.add(torso);\n const head=new THREE.Mesh(new THREE.SphereGeometry(.4,18,14),new THREE.MeshStandardMaterial({color:0xd8a47c}));head.position.y=2.15;head.castShadow=true;player.add(head);\n const helmet=new THREE.Mesh(new THREE.SphereGeometry(.46,18,10,0,Math.PI*2,0,Math.PI/2),new THREE.MeshStandardMaterial({color:0x182432,metalness:.3}));helmet.position.y=2.25;player.add(helmet);\n const pack=new THREE.Mesh(new THREE.BoxGeometry(.55,.7,.25),new THREE.MeshStandardMaterial({color:0x182c3d}));pack.position.set(0,1.35,.4);player.add(pack);\n const limbs:any[]=[];\n for(const x of [-.27,.27]){const leg=new THREE.Mesh(new THREE.BoxGeometry(.25,.8,.3),new THREE.MeshStandardMaterial({color:0x1b2633}));leg.position.set(x,.55,0);leg.castShadow=true;player.add(leg);limbs.push(leg)}\n // Detailed original assault-rifle model: receiver, stock, magazine, handguard, barrel, muzzle and sights.\n const gun=new THREE.Group();gun.position.set(.58,1.42,-.55);gun.rotation.y=.08;\n const metal=new THREE.MeshStandardMaterial({color:0x20262d,metalness:.8,roughness:.28});\n const dark=new THREE.MeshStandardMaterial({color:0x11161b,metalness:.35,roughness:.5});\n const receiver=new THREE.Mesh(new THREE.BoxGeometry(.22,.25,.62),metal);receiver.position.z=.05;gun.add(receiver);\n const stock=new THREE.Mesh(new THREE.BoxGeometry(.16,.18,.42),dark);stock.position.z=.48;stock.rotation.x=-.08;gun.add(stock);\n const mag=new THREE.Mesh(new THREE.BoxGeometry(.16,.34,.2),dark);mag.position.set(0,-.24,-.02);mag.rotation.x=-.22;gun.add(mag);\n const handguard=new THREE.Mesh(new THREE.CylinderGeometry(.12,.12,.58,12),dark);handguard.rotation.x=Math.PI/2;handguard.position.z=-.53;gun.add(handguard);\n const barrel=new THREE.Mesh(new THREE.CylinderGeometry(.055,.055,.48,12),metal);barrel.rotation.x=Math.PI/2;barrel.position.z=-1.03;gun.add(barrel);\n const muzzle=new THREE.Mesh(new THREE.CylinderGeometry(.085,.085,.12,12),metal);muzzle.rotation.x=Math.PI/2;muzzle.position.z=-1.32;gun.add(muzzle);\n const sight=new THREE.Mesh(new THREE.BoxGeometry(.09,.12,.18),dark);sight.position.set(0,.2,-.15);gun.add(sight);\n player.add(gun);scene.add(player);player.position.set(0,0,8);\n const rightArm=new THREE.Group();const upperArm=new THREE.Mesh(new THREE.CapsuleGeometry(.12,.48,6,10),new THREE.MeshStandardMaterial({color:suitColor}));upperArm.position.set(.43,1.35,-.05);rightArm.add(upperArm);player.add(rightArm);\n const leftArm=new THREE.Group();const upperArmL=new THREE.Mesh(new THREE.CapsuleGeometry(.12,.48,6,10),new THREE.MeshStandardMaterial({color:suitColor}));upperArmL.position.set(-.43,1.35,-.05);leftArm.add(upperArmL);player.add(leftArm);\n const flash=new THREE.Mesh(new THREE.ConeGeometry(.13,.38,8),new THREE.MeshBasicMaterial({color:0xffd36a}));flash.rotation.x=-Math.PI/2;flash.position.z=-1.43;flash.visible=false;gun.add(flash);\n // Pickups give the player money.\n const coins:any[]=[]; for(let i=0;i<10;i++){const c=new THREE.Mesh(new THREE.CylinderGeometry(.28,.28,.08,18),new THREE.MeshStandardMaterial({color:0xffc928,metalness:.65,roughness:.25}));c.rotation.x=Math.PI/2;c.position.set((Math.random()-.5)*75,.35,(Math.random()-.5)*75);scene.add(c);coins.push(c)}\n const ring=new THREE.Mesh(new THREE.RingGeometry(13,13.25,96),new THREE.MeshBasicMaterial({color:0x55aaff,side:THREE.DoubleSide,transparent:true,opacity:.7}));ring.rotation.x=-Math.PI/2;scene.add(ring);\n let keys:Record={},yaw=0,pitch=.28,last=performance.now();const shots:any[]=[];let joy:any=null,look:any=null;\n const keydown=(e:KeyboardEvent)=>keys[e.key.toLowerCase()]=true,keyUp=(e:KeyboardEvent)=>keys[e.key.toLowerCase()]=false;addEventListener(\"keydown\",keydown);addEventListener(\"keyup\",keyUp);\n const fireShot=()=>{const dir=new THREE.Vector3(0,0,-1).applyEuler(new THREE.Euler(pitch,yaw,0,\"YXZ\"));const m=new THREE.Mesh(new THREE.SphereGeometry(.08,8,8),new THREE.MeshBasicMaterial({color:0xffe28a}));m.position.copy(player.position).add(new THREE.Vector3(0,1.5,0));scene.add(m);shots.push({m,dir,t:0});setStatus(\"FIRING\")};\n const touch={left:null as any,right:null as any};\n const down=(e:PointerEvent)=>{if(e.pointerType!==\"touch\")return;const r=el.getBoundingClientRect(),x=e.clientX-r.left;if(x{if(touch.right?.id===e.pointerId){const dx=e.clientX-touch.right.x,dy=e.clientY-touch.right.y;yaw-=dx*.006;pitch=Math.max(-.45,Math.min(.8,pitch-dy*.004));touch.right.x=e.clientX;touch.right.y=e.clientY}else if(touch.left?.id===e.pointerId){touch.left.x=e.clientX;touch.left.y=e.clientY}};\n const up=(e:PointerEvent)=>{if(touch.left?.id===e.pointerId)touch.left=null;if(touch.right?.id===e.pointerId)touch.right=null};el.addEventListener(\"pointerdown\",down);el.addEventListener(\"pointermove\",move);el.addEventListener(\"pointerup\",up);el.addEventListener(\"pointercancel\",up);\n const fire=document.createElement(\"button\");fire.textContent=\"FIRE\";fire.style.cssText=\"position:absolute;right:22px;bottom:24px;width:82px;height:82px;border-radius:50%;border:2px solid white;background:#d83c3c;color:white;font-weight:900;z-index:5;touch-action:none;box-shadow:0 4px 15px #0008\";el.appendChild(fire);fire.onpointerdown=(e)=>{e.preventDefault();fireShot()};\n const onResize=()=>{camera.aspect=el.clientWidth/Math.max(1,el.clientHeight);camera.updateProjectionMatrix();renderer.setSize(el.clientWidth,el.clientHeight)};addEventListener(\"resize\",onResize);\n const animate=()=>{const now=performance.now(),dt=Math.min(.04,(now-last)/1000);last=now;const speed=7*dt;const forward=new THREE.Vector3(Math.sin(yaw),0,Math.cos(yaw)),right=new THREE.Vector3(Math.cos(yaw),0,-Math.sin(yaw));if(keys.w)player.position.addScaledVector(forward,-speed);if(keys.s)player.position.addScaledVector(forward,speed);if(keys.a)player.position.addScaledVector(right,-speed);if(keys.d)player.position.addScaledVector(right,speed);\n if(touch.left){const dx=touch.left.x-touch.left.sx,dy=touch.left.y-touch.left.sy;const len=Math.min(70,Math.hypot(dx,dy));if(len>5){const nx=dx/Math.max(1,Math.hypot(dx,dy)),ny=dy/Math.max(1,Math.hypot(dx,dy));player.position.addScaledVector(right,nx*speed*(len/45));player.position.addScaledVector(forward,ny*speed*(len/45))}}\n player.rotation.y=yaw;const camOffset=new THREE.Vector3(5*Math.sin(yaw),3.4+pitch*1.5,5*Math.cos(yaw));camera.position.lerp(player.position.clone().add(camOffset),.16);camera.lookAt(player.position.clone().add(new THREE.Vector3(0,1.2,0)));\n coins.forEach((c:any)=>{c.rotation.z+=dt*2;if(c.position.distanceTo(player.position)<1.4){scene.remove(c);coins.splice(coins.indexOf(c),1);setMoney(v=>v+100);setStatus(\"+$100 CASH\")}});\n for(let i=shots.length-1;i>=0;i--){const s=shots[i];s.m.position.addScaledVector(s.dir,35*dt);s.t+=dt;if(s.t>2){scene.remove(s.m);shots.splice(i,1)}} renderer.render(scene,camera);requestAnimationFrame(animate)};animate();\n cleanup=()=>{cancelled=true;removeEventListener(\"keydown\",keydown);removeEventListener(\"keyup\",keyUp);removeEventListener(\"resize\",onResize);el.removeEventListener(\"pointerdown\",down);el.removeEventListener(\"pointermove\",move);el.removeEventListener(\"pointerup\",up);el.removeEventListener(\"pointercancel\",up);el.innerHTML=\"\";renderer.dispose()};\n });return()=>cleanup();\n },[]);\n const buyCharacter=()=>{if(money>=1000){setMoney(m=>m-1000);setCharacter(character===\"RANGER\"?\"SHADOW\":\"RANGER\");setStatus(\"CHARACTER UNLOCKED\") }else setStatus(\"NEED $1000\")};\n return

BATTLEFIELD X • {status}

WASD / left joystick • drag right to aim

❤️ 100 🎯 0
💰 ${money}
👤 {character}

\n \n

;\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const mount = useRef(null);\n const [status,setStatus]=useState(\"READY\");\n const [money,setMoney]=useState(500);\n const [character,setCharacter]=useState(\"RANGER\");\n useEffect(()=>{\n let cleanup=()=>{}; let cancelled=false;\n import(\"https://esm.sh/three@0.179.1\").then((THREE)=>{\n if(cancelled||!mount.current)return; const el=mount.current;\n const scene=new THREE.Scene(); scene.background=new THREE.Color(0x8db7d8); scene.fog=new THREE.Fog(0x8db7d8,35,115);\n const camera=new THREE.PerspectiveCamera(62,el.clientWidth/Math.max(1,el.clientHeight),.1,220);\n const renderer=new THREE.WebGLRenderer({antialias:true}); renderer.setPixelRatio(Math.min(devicePixelRatio,2)); renderer.setSize(el.clientWidth,el.clientHeight); renderer.shadowMap.enabled=true; el.appendChild(renderer.domElement);\n scene.add(new THREE.HemisphereLight(0xffffff,0x405060,2.2)); const sun=new THREE.DirectionalLight(0xffffff,3);sun.position.set(20,35,10);sun.castShadow=true;scene.add(sun);\n const ground=new THREE.Mesh(new THREE.PlaneGeometry(180,180),new THREE.MeshStandardMaterial({color:0x587b55,roughness:1}));ground.rotation.x=-Math.PI/2;ground.receiveShadow=true;scene.add(ground);\n scene.add(new THREE.GridHelper(180,60,0x334c35,0x456447));\n for(let i=0;i<32;i++){const s=2+Math.random()*4,h=1.5+Math.random()*4,b=new THREE.Mesh(new THREE.BoxGeometry(s,h,s),new THREE.MeshStandardMaterial({color:i%3===0?0x777777:0x9a7b58}));b.position.set((Math.random()-.5)*90,h/2,(Math.random()-.5)*90);b.castShadow=true;b.receiveShadow=true;scene.add(b)}\n // Original character with outfit, backpack, helmet and weapon.\n const player=new THREE.Group();\n const suitColor=0x244b75;\n const torso=new THREE.Mesh(new THREE.BoxGeometry(.85,1.05,.5),new THREE.MeshStandardMaterial({color:suitColor}));torso.position.y=1.3;torso.castShadow=true;player.add(torso);\n const head=new THREE.Mesh(new THREE.SphereGeometry(.4,18,14),new THREE.MeshStandardMaterial({color:0xd8a47c}));head.position.y=2.15;head.castShadow=true;player.add(head);\n const helmet=new THREE.Mesh(new THREE.SphereGeometry(.46,18,10,0,Math.PI*2,0,Math.PI/2),new THREE.MeshStandardMaterial({color:0x182432,metalness:.3}));helmet.position.y=2.25;player.add(helmet);\n const pack=new THREE.Mesh(new THREE.BoxGeometry(.55,.7,.25),new THREE.MeshStandardMaterial({color:0x182c3d}));pack.position.set(0,1.35,.4);player.add(pack);\n const limbs:any[]=[];\n for(const x of [-.27,.27]){const leg=new THREE.Mesh(new THREE.BoxGeometry(.25,.8,.3),new THREE.MeshStandardMaterial({color:0x1b2633}));leg.position.set(x,.55,0);leg.castShadow=true;player.add(leg);limbs.push(leg)}\n // Detailed original assault-rifle model: receiver, stock, magazine, handguard, barrel, muzzle and sights.\n const gun=new THREE.Group();gun.position.set(.58,1.42,-.55);gun.rotation.y=.08;\n const metal=new THREE.MeshStandardMaterial({color:0x20262d,metalness:.8,roughness:.28});\n const dark=new THREE.MeshStandardMaterial({color:0x11161b,metalness:.35,roughness:.5});\n const receiver=new THREE.Mesh(new THREE.BoxGeometry(.22,.25,.62),metal);receiver.position.z=.05;gun.add(receiver);\n const stock=new THREE.Mesh(new THREE.BoxGeometry(.16,.18,.42),dark);stock.position.z=.48;stock.rotation.x=-.08;gun.add(stock);\n const mag=new THREE.Mesh(new THREE.BoxGeometry(.16,.34,.2),dark);mag.position.set(0,-.24,-.02);mag.rotation.x=-.22;gun.add(mag);\n const handguard=new THREE.Mesh(new THREE.CylinderGeometry(.12,.12,.58,12),dark);handguard.rotation.x=Math.PI/2;handguard.position.z=-.53;gun.add(handguard);\n const barrel=new THREE.Mesh(new THREE.CylinderGeometry(.055,.055,.48,12),metal);barrel.rotation.x=Math.PI/2;barrel.position.z=-1.03;gun.add(barrel);\n const muzzle=new THREE.Mesh(new THREE.CylinderGeometry(.085,.085,.12,12),metal);muzzle.rotation.x=Math.PI/2;muzzle.position.z=-1.32;gun.add(muzzle);\n const sight=new THREE.Mesh(new THREE.BoxGeometry(.09,.12,.18),dark);sight.position.set(0,.2,-.15);gun.add(sight);\n player.add(gun);scene.add(player);player.position.set(0,0,8);\n const rightArm=new THREE.Group();const upperArm=new THREE.Mesh(new THREE.CapsuleGeometry(.12,.48,6,10),new THREE.MeshStandardMaterial({color:suitColor}));upperArm.position.set(.43,1.35,-.05);rightArm.add(upperArm);player.add(rightArm);\n const leftArm=new THREE.Group();const upperArmL=new THREE.Mesh(new THREE.CapsuleGeometry(.12,.48,6,10),new THREE.MeshStandardMaterial({color:suitColor}));upperArmL.position.set(-.43,1.35,-.05);leftArm.add(upperArmL);player.add(leftArm);\n const flash=new THREE.Mesh(new THREE.ConeGeometry(.13,.38,8),new THREE.MeshBasicMaterial({color:0xffd36a}));flash.rotation.x=-Math.PI/2;flash.position.z=-1.43;flash.visible=false;gun.add(flash);\n // Pickups give the player money.\n const coins:any[]=[]; for(let i=0;i<10;i++){const c=new THREE.Mesh(new THREE.CylinderGeometry(.28,.28,.08,18),new THREE.MeshStandardMaterial({color:0xffc928,metalness:.65,roughness:.25}));c.rotation.x=Math.PI/2;c.position.set((Math.random()-.5)*75,.35,(Math.random()-.5)*75);scene.add(c);coins.push(c)}\n const ring=new THREE.Mesh(new THREE.RingGeometry(13,13.25,96),new THREE.MeshBasicMaterial({color:0x55aaff,side:THREE.DoubleSide,transparent:true,opacity:.7}));ring.rotation.x=-Math.PI/2;scene.add(ring);\n let keys:Record={},yaw=0,pitch=.28,last=performance.now();const shots:any[]=[];let joy:any=null,look:any=null;\n const keydown=(e:KeyboardEvent)=>keys[e.key.toLowerCase()]=true,keyUp=(e:KeyboardEvent)=>keys[e.key.toLowerCase()]=false;addEventListener(\"keydown\",keydown);addEventListener(\"keyup\",keyUp);\n let recoil=0,walkTime=0;\n const fireShot=()=>{const dir=new THREE.Vector3(0,0,-1).applyEuler(new THREE.Euler(pitch,yaw,0,\"YXZ\"));const m=new THREE.Mesh(new THREE.SphereGeometry(.08,8,8),new THREE.MeshBasicMaterial({color:0xffe28a}));m.position.copy(player.position).add(new THREE.Vector3(0,1.5,0));scene.add(m);shots.push({m,dir,t:0});recoil=.16;flash.visible=true;setTimeout(()=>flash.visible=false,65);setStatus(\"FIRING\")};\n const touch={left:null as any,right:null as any};\n const down=(e:PointerEvent)=>{if(e.pointerType!==\"touch\")return;const r=el.getBoundingClientRect(),x=e.clientX-r.left;if(x{if(touch.right?.id===e.pointerId){const dx=e.clientX-touch.right.x,dy=e.clientY-touch.right.y;yaw-=dx*.006;pitch=Math.max(-.45,Math.min(.8,pitch-dy*.004));touch.right.x=e.clientX;touch.right.y=e.clientY}else if(touch.left?.id===e.pointerId){touch.left.x=e.clientX;touch.left.y=e.clientY}};\n const up=(e:PointerEvent)=>{if(touch.left?.id===e.pointerId)touch.left=null;if(touch.right?.id===e.pointerId)touch.right=null};el.addEventListener(\"pointerdown\",down);el.addEventListener(\"pointermove\",move);el.addEventListener(\"pointerup\",up);el.addEventListener(\"pointercancel\",up);\n const fire=document.createElement(\"button\");fire.textContent=\"FIRE\";fire.style.cssText=\"position:absolute;right:22px;bottom:24px;width:82px;height:82px;border-radius:50%;border:2px solid white;background:#d83c3c;color:white;font-weight:900;z-index:5;touch-action:none;box-shadow:0 4px 15px #0008\";el.appendChild(fire);fire.onpointerdown=(e)=>{e.preventDefault();fireShot()};\n const onResize=()=>{camera.aspect=el.clientWidth/Math.max(1,el.clientHeight);camera.updateProjectionMatrix();renderer.setSize(el.clientWidth,el.clientHeight)};addEventListener(\"resize\",onResize);\n const animate=()=>{const now=performance.now(),dt=Math.min(.04,(now-last)/1000);last=now;const speed=7*dt;const forward=new THREE.Vector3(Math.sin(yaw),0,Math.cos(yaw)),right=new THREE.Vector3(Math.cos(yaw),0,-Math.sin(yaw));if(keys.w)player.position.addScaledVector(forward,-speed);if(keys.s)player.position.addScaledVector(forward,speed);if(keys.a)player.position.addScaledVector(right,-speed);if(keys.d)player.position.addScaledVector(right,speed);\n if(touch.left){const dx=touch.left.x-touch.left.sx,dy=touch.left.y-touch.left.sy;const len=Math.min(70,Math.hypot(dx,dy));if(len>5){const nx=dx/Math.max(1,Math.hypot(dx,dy)),ny=dy/Math.max(1,Math.hypot(dx,dy));player.position.addScaledVector(right,nx*speed*(len/45));player.position.addScaledVector(forward,ny*speed*(len/45))}}\n player.rotation.y=yaw;const camOffset=new THREE.Vector3(5*Math.sin(yaw),3.4+pitch*1.5,5*Math.cos(yaw));camera.position.lerp(player.position.clone().add(camOffset),.16);camera.lookAt(player.position.clone().add(new THREE.Vector3(0,1.2,0)));\n coins.forEach((c:any)=>{c.rotation.z+=dt*2;if(c.position.distanceTo(player.position)<1.4){scene.remove(c);coins.splice(coins.indexOf(c),1);setMoney(v=>v+100);setStatus(\"+$100 CASH\")}});\n for(let i=shots.length-1;i>=0;i--){const s=shots[i];s.m.position.addScaledVector(s.dir,35*dt);s.t+=dt;if(s.t>2){scene.remove(s.m);shots.splice(i,1)}} renderer.render(scene,camera);requestAnimationFrame(animate)};animate();\n cleanup=()=>{cancelled=true;removeEventListener(\"keydown\",keydown);removeEventListener(\"keyup\",keyUp);removeEventListener(\"resize\",onResize);el.removeEventListener(\"pointerdown\",down);el.removeEventListener(\"pointermove\",move);el.removeEventListener(\"pointerup\",up);el.removeEventListener(\"pointercancel\",up);el.innerHTML=\"\";renderer.dispose()};\n });return()=>cleanup();\n },[]);\n const buyCharacter=()=>{if(money>=1000){setMoney(m=>m-1000);setCharacter(character===\"RANGER\"?\"SHADOW\":\"RANGER\");setStatus(\"CHARACTER UNLOCKED\") }else setStatus(\"NEED $1000\")};\n return

BATTLEFIELD X • {status}

WASD / left joystick • drag right to aim

❤️ 100 🎯 0
💰 ${money}
👤 {character}

\n \n

;\n}\n","createdAt",["D",1788939224748],"branchVersion","branchId","8e657c2b-ea2d-41e9-8daf-571bb7efa99f","id","7ac2b1fc-3bf6-4590-a8bf-e95239aed13f","mobile-3d-shooter",["D",1788938999309],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","3D mobile battle royale prototype","imageUrl","151b79b1-d995-46cb-bc68-140038ba3959","pinnedFileId","01a08512-d669-73d9-b964-94c2c90fe5fd","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a084fa-dc07-75ed-8eaa-46f0803b8997","tursoName","7ac2b1fc3bf64590a8bfe95239aed13f","tursoHostname","7ac2b1fc3bf64590a8bfe95239aed13f-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789546246980],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",13,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","raziels","handle","displayName","Raziel S","avatar","https://lh3.googleusercontent.com/a/ACg8ocKcQ2GwxzpzNB1V1fPW0uE-PdDqCDeRsoQsatc4PVytFe9O5Q=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":236,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":237,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":238,"_85":239,"_87":240,"_89":25},"tree",[174,181,182,183],"files",[174,175,176,177,178,179,180,181,182,183],"counts",{"_164":64,"_165":139,"_166":64,"_167":168,"_169":170},"contents",[132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":158,"_32":159,"_30":160,"_138":-5,"_42":43,"_41":139,"_140":60,"_39":161,"_13":64,"_34":162,"_36":-5,"_24":25,"_144":-5,"_27":163},{"_44":152,"_32":153,"_30":154,"_138":-5,"_42":43,"_41":139,"_140":60,"_39":155,"_13":64,"_34":20,"_36":156,"_24":25,"_144":-5,"_27":157},{"_44":146,"_32":147,"_30":148,"_138":-5,"_42":43,"_41":139,"_140":60,"_39":149,"_13":64,"_34":20,"_36":150,"_24":25,"_144":-5,"_27":151},{"_44":136,"_32":137,"_30":58,"_138":-5,"_42":43,"_41":139,"_140":60,"_39":141,"_13":64,"_34":142,"_36":143,"_24":25,"_144":-5,"_27":145},"fab50b79-6c5b-489c-a60d-157d0b59a8e1","index.ts","parentId",1,"latest",["D",1788938999309],"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",[137],"c50af9ab-0be7-4ee1-87b9-bc6a9a4fdedc","README.md","01a08512-d669-73d9-b964-923e494004ef",["D",1788938999309],"# 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",[147],"617d9f96-8e2e-4f95-a1ff-40e372d65475","CHANGELOG.md","01a08512-d669-73d9-b964-8fce6fcdbc25",["D",1788938999309],"# 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 · v5