`, 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

✦ TODAY'S FORECAST: 100% CHANCE OF DONUTS ✦ NO TAXES, ONLY SNACKS ✦

\n \n

Made for snack enthusiasts with tiny paws.view source / remix

\n}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\n\nconst W=960,H=540, TILE=32;\ntype Platform={x:number,y:number,w:number,h:number,moving:boolean,axis:\"x\"|\"y\",amp:number,phase:number};\ntype Treat={x:number,y:number,type:number,taken:boolean,moving:boolean,axis:\"x\"|\"y\",amp:number,phase:number};\ntype Barrier={x:number,y:number,w:number,h:number,broken:boolean};\ntype Level={platforms:Platform[],treats:Treat[],spawn:{x:number,y:number},goal:{x:number,y:number}};\ntype Hero={name:string,main:string,accent:string,ears:\"round\"|\"cat\"|\"bunny\"|\"squirrel\",win:string};\nconst HEROES:Hero[]=[\n {name:\"Chiikawa\",main:\"#fffdf5\",accent:\"#f4a6b9\",ears:\"round\",win:\"fu!\"},\n {name:\"Hachiware\",main:\"#fffdf5\",accent:\"#63a8e8\",ears:\"cat\",win:\"hachi!\"},\n {name:\"Usagi\",main:\"#f9e06f\",accent:\"#ef9c55\",ears:\"bunny\",win:\"ya-ha!\"},\n {name:\"Momonga\",main:\"#fffdf8\",accent:\"#8bb9e9\",ears:\"squirrel\",win:\"kapu!\"}\n];\nconst SNACKS=[\"🧁\",\"🍕\",\"🍩\",\"🍦\"];\nconst SAYINGS=[\"wa wa wa!\",\"snack attack!\",\"tiny legs, big quest\",\"yaha!\",\"emotionally prepared-ish\",\"no crumbs left behind\"];\nconst THEMES=[\n {name:\"Pudding Meadow\",sky:[\"#8de3ff\",\"#fff1a8\"],hill:\"#aedb82\",rock:\"#6a4b67\",top:\"#f6d76c\",deco:\"🌼\"},\n {name:\"Peach Soda\",sky:[\"#ff9fc9\",\"#ffe2b8\"],hill:\"#d6a4db\",rock:\"#7c4e78\",top:\"#ffc5db\",deco:\"🍑\"},\n {name:\"Melon Picnic\",sky:[\"#b8f2d0\",\"#f5ffc5\"],hill:\"#77c58b\",rock:\"#47705d\",top:\"#d8f58d\",deco:\"🍈\"},\n {name:\"Blueberry Night\",sky:[\"#354a88\",\"#9f8fe8\"],hill:\"#4f568e\",rock:\"#2d315d\",top:\"#90a8ff\",deco:\"⭐\"},\n {name:\"Strawberry Sky\",sky:[\"#ff7f92\",\"#ffd0c2\"],hill:\"#d95f78\",rock:\"#713f57\",top:\"#ffcad6\",deco:\"🍓\"},\n {name:\"Lemon Moon\",sky:[\"#35405d\",\"#ffe27a\"],hill:\"#8f925e\",rock:\"#55553f\",top:\"#fff09a\",deco:\"🌙\"},\n {name:\"Ramune Coast\",sky:[\"#59cbea\",\"#c8fbff\"],hill:\"#62b7aa\",rock:\"#3c6f79\",top:\"#a9f4e8\",deco:\"🫧\"},\n {name:\"Donut Sunset\",sky:[\"#9858a8\",\"#ffb36b\"],hill:\"#c46f79\",rock:\"#633f60\",top:\"#ffc47c\",deco:\"🍩\"},\n {name:\"Minty Dream\",sky:[\"#a9f4df\",\"#e7d2ff\"],hill:\"#9dcab7\",rock:\"#5d7b76\",top:\"#d7fff2\",deco:\"☁️\"},\n {name:\"Snack Kingdom\",sky:[\"#482b73\",\"#ff7aaa\"],hill:\"#8352a0\",rock:\"#422653\",top:\"#ffd86b\",deco:\"👑\"},\n {name:\"Mochi Morning\",sky:[\"#ffcbdc\",\"#fff8e8\"],hill:\"#d8b9c8\",rock:\"#765b69\",top:\"#ffe7ef\",deco:\"🌸\"},\n {name:\"Soda Pop City\",sky:[\"#58d9ef\",\"#dffbff\"],hill:\"#4bb9c5\",rock:\"#30677d\",top:\"#9af0ff\",deco:\"🥤\"},\n {name:\"Cocoa Canyon\",sky:[\"#d58a62\",\"#ffd7a8\"],hill:\"#a8654c\",rock:\"#603b37\",top:\"#e5a776\",deco:\"🍫\"},\n {name:\"Grape Galaxy\",sky:[\"#241c53\",\"#9b58c7\"],hill:\"#543375\",rock:\"#282047\",top:\"#c58bea\",deco:\"🪐\"},\n {name:\"Cream Puff Cloud\",sky:[\"#b8ddff\",\"#fff6d8\"],hill:\"#c7d6d2\",rock:\"#71818a\",top:\"#fff0bd\",deco:\"🧁\"},\n {name:\"Matcha Mountain\",sky:[\"#b9dc8b\",\"#edf3c0\"],hill:\"#7ba05b\",rock:\"#486443\",top:\"#cce69b\",deco:\"🍵\"},\n {name:\"Candy Comet\",sky:[\"#4c3a8b\",\"#ff75bd\"],hill:\"#78528e\",rock:\"#3b315f\",top:\"#ff9bd0\",deco:\"☄️\"},\n {name:\"Pizza Planet\",sky:[\"#ff9d4f\",\"#ffe181\"],hill:\"#d16b44\",rock:\"#75443b\",top:\"#ffc65d\",deco:\"🍕\"},\n {name:\"Ice Cream Aurora\",sky:[\"#55cbe5\",\"#d391f4\"],hill:\"#75a9bd\",rock:\"#455a78\",top:\"#b8ecff\",deco:\"🍦\"},\n {name:\"Cupquake Castle\",sky:[\"#24164f\",\"#ff4f9b\"],hill:\"#6b347e\",rock:\"#291b45\",top:\"#ffd33d\",deco:\"🏰\"},\n {name:\"Jelly Sunrise\",sky:[\"#ff86b7\",\"#ffe99b\"],hill:\"#cb83a0\",rock:\"#754b67\",top:\"#ffd1e1\",deco:\"🪼\"},\n {name:\"Cookie Factory\",sky:[\"#b7d7e8\",\"#f4d19b\"],hill:\"#b8946c\",rock:\"#6d5145\",top:\"#eac18e\",deco:\"🍪\"},\n {name:\"Kiwi Bounce\",sky:[\"#80dc91\",\"#efffa1\"],hill:\"#66a85c\",rock:\"#3e633f\",top:\"#bfea75\",deco:\"🥝\"},\n {name:\"Cosmic Café\",sky:[\"#211742\",\"#7e64cc\"],hill:\"#4e4380\",rock:\"#262043\",top:\"#a99ce9\",deco:\"☕\"},\n {name:\"Cherry Elevator\",sky:[\"#ff7094\",\"#ffd0d9\"],hill:\"#c65272\",rock:\"#71374d\",top:\"#ff9fb4\",deco:\"🍒\"},\n {name:\"Taffy Transit\",sky:[\"#65cde8\",\"#f8a8e6\"],hill:\"#8e8ac4\",rock:\"#4f527d\",top:\"#ffc0ed\",deco:\"🍬\"},\n {name:\"Pancake Parade\",sky:[\"#f3ad55\",\"#fff0a5\"],hill:\"#bc8251\",rock:\"#6f4d3b\",top:\"#f4c77c\",deco:\"🥞\"},\n {name:\"Frozen Float\",sky:[\"#82dfff\",\"#e6f7ff\"],hill:\"#91bdcf\",rock:\"#4a7083\",top:\"#c7f0ff\",deco:\"❄️\"},\n {name:\"Star Sprinkles\",sky:[\"#31205f\",\"#df68d1\"],hill:\"#67447d\",rock:\"#31244c\",top:\"#f4a4e8\",deco:\"✨\"},\n {name:\"Grand Cupquake\",sky:[\"#180d39\",\"#ff3d87\"],hill:\"#663179\",rock:\"#25143f\",top:\"#ffe04c\",deco:\"🎂\"}\n];\n\nfunction rng(seed:number){return()=>{seed|=0;seed=seed+0x6D2B79F5|0;let t=Math.imul(seed^seed>>>15,1|seed);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296}}\nfunction makeLevel(n:number):Level{\n const r=rng(3049+n*991), p:Platform[]=[{x:-80,y:475,w:460,h:90,moving:false,axis:\"x\",amp:0,phase:0}], t:Treat[]=[];\n // Build the required route from the previous platform edge. These limits stay\n // comfortably inside the player's measured jump envelope: ≤75px gap and\n // ≤57px upward step (the first step is ≤112px above the starting ground).\n let x=0,y=420,prevEnd=380;\n const count=8+n;\n for(let i=0;i20?25:40));\n x=prevEnd+gap;\n const goingUp=r()>.48,delta=goingUp?28+Math.floor(r()*30):24+Math.floor(r()*42);\n y=Math.max(215,Math.min(440,y+(goingUp?-delta:delta)));\n const w=125+Math.floor(r()*56);\n p.push({x,y,w,h:22,moving:n>20,axis:i%3===0?\"y\":\"x\",amp:n>20?14+Math.floor(r()*10):0,phase:r()*Math.PI*2});\n if(i%2===0||r()>.46)t.push({x:x+w/2,y:y-34,type:(i+n)%4,taken:false,moving:n>10&&n<=20,axis:i%2?\"x\":\"y\",amp:n>10&&n<=20?24+Math.floor(r()*30):0,phase:r()*Math.PI*2});\n prevEnd=x+w;\n }\n // Bonus platforms remain reachable directly above their anchor platform.\n // On moving stages they inherit the anchor's motion, preserving that jump.\n for(let i=0;i<3+n/3;i++){const q=p[1+Math.floor(r()*count)];p.push({x:q.x+20,y:Math.max(105,q.y-68-Math.floor(r()*26)),w:95+Math.floor(r()*40),h:18,moving:q.moving,axis:q.axis,amp:q.amp,phase:q.phase})}\n const last=p[count]; return {platforms:p,treats:t,spawn:{x:80,y:410},goal:{x:last.x+last.w-45,y:last.y-68}};\n}\nfunction treatPos(q:Treat,tick:number){const wave=q.moving?Math.sin(tick*.035+q.phase)*q.amp:0;return{x:q.x+(q.axis===\"x\"?wave:0),y:q.y+(q.axis===\"y\"?wave:0)}}\nfunction platformPos(p:Platform,tick:number){const wave=p.moving?Math.sin(tick*.026+p.phase)*p.amp:0;return{x:p.x+(p.axis===\"x\"?wave:0),y:p.y+(p.axis===\"y\"?wave:0)}}\nfunction roundRect(c:CanvasRenderingContext2D,x:number,y:number,w:number,h:number,r:number){\n c.beginPath();c.roundRect(x,y,w,h,r);c.fill();\n}\nfunction drawHero(c:CanvasRenderingContext2D,x:number,y:number,h:Hero,dir:number,air:boolean,tick:number){\n c.save();c.translate(Math.round(x),Math.round(y));c.scale(dir,1);\n const bob=air?0:Math.sin(tick*.18)*1.2;c.translate(0,bob);\n const ink=\"#302d36\";\n // Character-specific ears sit behind the round head.\n c.fillStyle=h.main;\n if(h.name===\"Chiikawa\"){c.beginPath();c.arc(-16,-29,10,0,7);c.arc(16,-29,10,0,7);c.fill()}\n if(h.name===\"Hachiware\"){c.beginPath();c.moveTo(-21,-25);c.lineTo(-15,-47);c.lineTo(-2,-31);c.moveTo(21,-25);c.lineTo(15,-47);c.lineTo(2,-31);c.fill()}\n if(h.name===\"Usagi\"){roundRect(c,-17,-68,12,48,7);roundRect(c,5,-68,12,48,7)}\n if(h.name===\"Momonga\"){c.beginPath();c.arc(-17,-30,12,0,7);c.arc(17,-30,12,0,7);c.fill()}\n // Pear-shaped head and tiny body preserve the original chibi proportions.\n c.beginPath();c.ellipse(0,-18,25,24,0,0,7);c.fill();\n c.fillStyle=h.main;roundRect(c,-17,3,34,30,13);\n // Hachiware's blue cap has a sharp white center blaze.\n if(h.name===\"Hachiware\"){\n c.fillStyle=h.accent;c.beginPath();c.arc(0,-21,25,Math.PI,0);c.lineTo(23,-13);c.lineTo(11,-16);c.lineTo(5,-7);c.lineTo(0,-14);c.lineTo(-5,-7);c.lineTo(-11,-16);c.lineTo(-23,-13);c.closePath();c.fill();\n c.beginPath();c.moveTo(-21,-26);c.lineTo(-15,-47);c.lineTo(-4,-31);c.fill();c.beginPath();c.moveTo(21,-26);c.lineTo(15,-47);c.lineTo(4,-31);c.fill();\n }\n // Usagi's long orange inner ears and little tail.\n if(h.name===\"Usagi\"){\n c.fillStyle=h.accent;roundRect(c,-13,-63,4,36,3);roundRect(c,9,-63,4,36,3);\n c.fillStyle=h.main;c.beginPath();c.arc(-18,20,7,0,7);c.fill();\n }\n // Chiikawa's pale pink round ears.\n if(h.name===\"Chiikawa\"){c.fillStyle=\"#f7b7c5\";c.beginPath();c.arc(-16,-30,5,0,7);c.arc(16,-30,5,0,7);c.fill()}\n // Momonga's blue-lined ears, oversized curled tail, and gliding membrane.\n if(h.name===\"Momonga\"){\n c.fillStyle=h.accent;c.beginPath();c.arc(-17,-30,7,0,7);c.arc(17,-30,7,0,7);c.fill();\n // Layered scallops make Momonga's curled tail read as oversized and fluffy.\n c.beginPath();c.arc(-27,4,12,0,7);c.arc(-38,10,15,0,7);c.arc(-40,24,14,0,7);c.arc(-28,31,13,0,7);c.arc(-20,20,15,0,7);c.fill();\n c.fillStyle=\"#cfe4f7\";c.beginPath();c.arc(-39,8,6,0,7);c.arc(-44,22,6,0,7);c.arc(-30,32,5,0,7);c.fill();\n c.fillStyle=\"#e7f1fb\";c.beginPath();c.moveTo(-15,7);c.lineTo(-31,26);c.lineTo(-8,20);c.fill();\n }\n // Distinctive compact faces.\n c.fillStyle=ink;\n if(h.name===\"Usagi\"){\n c.fillRect(-10,-22,4,7);c.fillRect(7,-22,4,7);\n c.fillRect(-2,-13,4,3);c.fillRect(-6,-10,12,2);\n }else if(h.name===\"Momonga\"){\n c.fillStyle=h.accent;c.fillRect(-12,-23,7,8);c.fillRect(6,-23,7,8);\n c.fillStyle=\"#fff\";c.fillRect(-10,-22,2,3);c.fillRect(8,-22,2,3);\n c.fillStyle=ink;c.fillRect(-2,-13,4,3);c.beginPath();c.arc(1,-9,6,.15,Math.PI-.15);c.stroke();\n }else{\n c.fillRect(-10,-21,4,6);c.fillRect(7,-21,4,6);\n c.fillRect(-2,-14,4,3);c.fillRect(-4,-10,3,2);c.fillRect(2,-10,3,2);\n }\n c.fillStyle=\"#f4a6b9\";c.fillRect(-18,-13,7,3);c.fillRect(12,-13,7,3);\n // Little arms, feet and hero-specific details.\n c.strokeStyle=ink;c.lineWidth=3;c.beginPath();c.moveTo(-14,10);c.lineTo(-21,18);c.moveTo(14,10);c.lineTo(21,18);c.stroke();\n c.fillStyle=ink;c.fillRect(-14,29,10,7);c.fillRect(5,29,10,7);\n if(h.name===\"Chiikawa\"){c.fillStyle=\"#ef7795\";c.fillRect(-5,8,10,5)}\n if(h.name===\"Hachiware\"){c.fillStyle=h.accent;c.fillRect(-7,7,14,4)}\n c.restore();\n}\nfunction blip(a:AudioContext,now:number,f0:number,f1:number,dur:number,vol:number,type:OscillatorType){\n const o=a.createOscillator(),g=a.createGain();o.type=type;o.frequency.setValueAtTime(f0,now);o.frequency.exponentialRampToValueAtTime(f1,now+dur);\n g.gain.setValueAtTime(vol,now);g.gain.exponentialRampToValueAtTime(.001,now+dur);o.connect(g).connect(a.destination);o.start(now);o.stop(now+dur+.02);\n}\nfunction synth(kind:string){\n const AC=(window.AudioContext||(window as any).webkitAudioContext);if(!AC)return;\n const a=(window as any).__snackAudio||((window as any).__snackAudio=new AC());if(a.state===\"suspended\")a.resume();\n const now=a.currentTime;\n if(kind===\"jump\"){ // boing: springy rising slide that wobbles down to settle\n blip(a,now,220,720,.22,.09,\"square\");\n blip(a,now+.08,600,180,.26,.06,\"triangle\");\n }else if(kind===\"get\"){ // chomp: quick descending bite, two munches\n blip(a,now,520,300,.09,.09,\"square\");\n blip(a,now+.09,420,240,.1,.09,\"square\");\n }else if(kind===\"win\"){\n [523,659,784,1047].forEach((f:number,i:number)=>blip(a,now+i*.07,f,f,.11,.055,i%2?\"square\":\"triangle\"));\n }else{ // fall\n blip(a,now,240,120,.3,.06,\"square\");\n blip(a,now+.08,160,90,.3,.06,\"triangle\");\n }\n}\nexport function App(){\n const canvas=useRef(null);\n useEffect(()=>{\n const cv=canvas.current!;const c=cv.getContext(\"2d\",{alpha:false})!;c.imageSmoothingEnabled=false;\n let unlocked=Math.max(1,Math.min(30,Number(localStorage.getItem(\"snackLevel\")||1)));\n let screen:\"menu\"|\"levels\"|\"play\"|\"complete\"|\"endover\"=\"menu\", levelNo=unlocked,hero=0;\n let level=makeLevel(levelNo), keys={left:false,right:false,jump:false,dash:false}, pressed=false,dashPressed=false,cam=0,tick=0,score=0;\n let player={x:80,y:410,vx:0,vy:0,w:34,h:48,ground:false,coyote:0,buffer:0,dir:1};\n let phrase=SAYINGS[0], phraseAt=0,groundOn:Platform|null=null,celebrateAt=0;\n let quality=(\"auto\" as \"auto\"|\"full\"|\"potato\"),autoPotato=false,fpsStart=performance.now(),fpsFrames=0,lastPaint=0;\n try{quality=(localStorage.getItem(\"cupquakeQuality\") as typeof quality)||\"auto\"}catch{}\n const potato=()=>quality===\"potato\"||(quality===\"auto\"&&autoPotato);\n const resize=()=>{cv.width=W;cv.height=H;c.setTransform(1,0,0,1,0,0);c.imageSmoothingEnabled=false};\n resize();addEventListener(\"resize\",resize);\n const skyGradients=THEMES.map(th=>{const g=c.createLinearGradient(0,0,0,H);g.addColorStop(0,th.sky[0]);g.addColorStop(1,th.sky[1]);return g});\n const snackSprites=SNACKS.map(s=>{const el=document.createElement(\"canvas\");el.width=48;el.height=48;const sc=el.getContext(\"2d\")!;sc.font=\"32px serif\";sc.textAlign=\"center\";sc.textBaseline=\"middle\";sc.fillText(s,24,24);return el});\n function reset(){level=makeLevel(levelNo);player={x:level.spawn.x,y:level.spawn.y,vx:0,vy:0,w:34,h:48,ground:false,coyote:0,buffer:0,dir:1};cam=0;score=0;groundOn=null;screen=\"play\"}\n function collide(oldY:number){\n player.ground=false;groundOn=null;\n for(const p of level.platforms){\n const pos=platformPos(p,tick);\n if(player.x+player.w/2>pos.x&&player.x-player.w/2pos.y-3&&oldY<=pos.y+3&&player.vy>=0){\n player.y=pos.y;player.vy=0;player.ground=true;groundOn=p;\n }\n }\n }\n function update(){\n tick++;if(screen!==\"play\")return;\n if(groundOn){const before=platformPos(groundOn,tick-1),now=platformPos(groundOn,tick);player.x+=now.x-before.x;player.y+=now.y-before.y}\n if(tick-phraseAt>240){phrase=SAYINGS[Math.floor(Math.random()*SAYINGS.length)];phraseAt=tick}\n if(keys.left){player.vx=Math.max(player.vx-.68,-6.2);player.dir=-1}\n if(keys.right){player.vx=Math.min(player.vx+.68,6.2);player.dir=1}\n if(!keys.left&&!keys.right)player.vx*=.78;\n if(player.ground)player.coyote=8;else player.coyote=Math.max(0,player.coyote-1);\n if(pressed){player.buffer=9;pressed=false}else player.buffer=Math.max(0,player.buffer-1);\n if(player.buffer&&player.coyote){player.vy=-13.2;player.ground=false;player.coyote=0;player.buffer=0;synth(\"jump\")}\n if(!keys.jump&&player.vy<-4)player.vy+=.72;\n const oldY=player.y;player.vy=Math.min(17,player.vy+.64);player.x+=player.vx;player.y+=player.vy;collide(oldY);\n if(player.y>H+180){synth(\"fall\");player.x=level.spawn.x;player.y=level.spawn.y;player.vx=0;player.vy=0;cam=Math.max(0,player.x-230)}\n for(const q of level.treats){const pos=treatPos(q,tick);if(!q.taken&&Math.hypot(player.x-pos.x,player.y-25-pos.y)<38){q.taken=true;score++;synth(\"get\")}}\n const remaining=level.treats.some(q=>!q.taken);\n if(!remaining&&Math.abs(player.x-level.goal.x)<45&&Math.abs(player.y-25-level.goal.y)<70){screen=\"complete\";synth(\"win\");celebrateAt=tick;unlocked=Math.max(unlocked,Math.min(30,levelNo+1));localStorage.setItem(\"snackLevel\",String(unlocked))}\n cam+=(Math.max(0,player.x-260)-cam)*.08;\n }\n function cloud(x:number,y:number){c.fillStyle=\"#fff\";c.globalAlpha=.75;c.beginPath();c.arc(x,y,22,0,7);c.arc(x+24,y-10,29,0,7);c.arc(x+56,y,22,0,7);c.fill();c.globalAlpha=1}\n function stageLight(){\n const sweep=(cam*.42+tick*.8)%1400-220,hue=(levelNo*31+cam*.045)%360;\n c.save();\n if(potato()){c.globalAlpha=.055;c.fillStyle=`hsl(${hue} 80% 65%)`;c.fillRect(0,0,W,H)}\n else{c.globalCompositeOperation=\"screen\";c.globalAlpha=.2;const glow=c.createRadialGradient(sweep,210,10,sweep,210,360);glow.addColorStop(0,`hsla(${hue},100%,78%,.95)`);glow.addColorStop(1,\"rgba(0,0,0,0)\");c.fillStyle=glow;c.fillRect(0,0,W,H)}\n c.restore();\n }\n function draw(){\n c.clearRect(0,0,W,H);\n const theme=THEMES[levelNo-1];c.fillStyle=skyGradients[levelNo-1];c.fillRect(0,0,W,H);\n cloud(80-(cam*.12)%1100,80);if(!potato()){cloud(520-(cam*.08)%1250,145);cloud(850-(cam*.15)%1400,55)}\n c.font=\"34px serif\";c.globalAlpha=.45;for(let i=0;i<(potato()?3:7);i++)c.fillText(theme.deco,80+i*260-(cam*.04)%150,110+(i%3)*70);c.globalAlpha=1;\n c.fillStyle=theme.hill;c.beginPath();c.moveTo(0,430);for(let x=0;x<=W;x+=80)c.lineTo(x,390+Math.sin((x+cam*.25)*.012)*35);c.lineTo(W,H);c.lineTo(0,H);c.fill();\n if(screen===\"menu\"){drawMenu();requestAnimationFrame(loop);return}\n if(screen===\"levels\"){drawLevels();requestAnimationFrame(loop);return}\n c.save();c.translate(-cam,0);\n for(const p of level.platforms){const pos=platformPos(p,tick);if(pos.x+p.wcam+W+100)continue;c.fillStyle=theme.rock;roundRect(c,pos.x,pos.y,p.w,p.h,8);c.fillStyle=theme.top;c.fillRect(pos.x+5,pos.y,p.w-10,7);c.fillStyle=\"#fff\";c.globalAlpha=.45;for(let z=pos.x+14;zcam+W+80)continue;if(q.moving&&!potato()){c.strokeStyle=\"rgba(255,255,255,.5)\";c.lineWidth=3;c.beginPath();c.arc(pos.x,pos.y-8,24,0,7);c.stroke()}c.drawImage(snackSprites[q.type],pos.x-24,pos.y-30+Math.sin(tick*.1+q.x)*4,48,48)}\n const clear=!level.treats.some(q=>!q.taken);\n c.fillStyle=clear?\"#ff72aa\":\"#aaa\";roundRect(c,level.goal.x-24,level.goal.y-30,48,70,18);c.fillStyle=\"#fff\";c.font=\"24px monospace\";c.textAlign=\"center\";c.fillText(clear?\"★\":\"🔒\",level.goal.x,level.goal.y+12);\n // Physics stores player.y at the soles; render origin is 36px above that contact point.\n drawHero(c,player.x,player.y-36,HEROES[hero],player.dir,!player.ground,tick);c.restore();\n stageLight();\n hud();\n if(screen===\"complete\")overlay();\n requestAnimationFrame(loop);\n }\n function hud(){\n c.fillStyle=\"#35283b\";roundRect(c,18,16,250,68,12);c.fillStyle=\"#fff\";c.font=\"bold 20px monospace\";c.textAlign=\"left\";c.fillText(\"LEVEL \"+levelNo+\" / 30\",34,43);c.fillStyle=\"#ffd66b\";c.fillText(\"SNACKS \"+score+\" / \"+level.treats.length,34,69);\n c.save();c.translate(W-150+Math.sin(tick*.06)*4,45);c.rotate(Math.sin(tick*.05)*.04);c.fillStyle=\"#fff\";roundRect(c,-120,-24,120,48,16);c.fillStyle=\"#e95487\";c.font=\"bold 13px monospace\";c.textAlign=\"center\";c.fillText(phrase,-60,5);c.restore();\n }\n function drawMenu(){\n c.fillStyle=\"rgba(53,40,59,.92)\";roundRect(c,130,44,700,450,26);c.textAlign=\"center\";c.fillStyle=\"#fff\";c.font=\"bold 46px monospace\";c.fillText(\"TINY SNACK QUEST\",480,105);c.fillStyle=\"#ffd66b\";c.font=\"bold 17px monospace\";c.fillText(\"pick a tiny hero • collect every snack • be extremely silly\",480,139);\n HEROES.forEach((h,i)=>{const cx=255+i*150;c.fillStyle=hero===i?\"#ff79ab\":\"#fff\";roundRect(c,cx-65,175,130,150,18);drawHero(c,cx,255,h,1,false,tick);c.fillStyle=\"#35283b\";c.font=\"bold 15px monospace\";c.fillText(h.name,cx,306)});\n c.fillStyle=\"#ffd66b\";roundRect(c,310,357,340,70,15);c.fillStyle=\"#35283b\";c.font=\"bold 25px monospace\";c.fillText(\"START LEVEL \"+levelNo,480,400);c.fillStyle=\"#fff\";c.font=\"14px monospace\";c.fillText(\"keyboard: ← → + space • iPad: touch buttons\",480,462);\n }\n function drawLevels(){\n c.fillStyle=\"rgba(53,40,59,.92)\";roundRect(c,135,25,690,495,25);c.textAlign=\"center\";\n c.fillStyle=\"#fff\";c.font=\"bold 31px monospace\";c.fillText(\"CHOOSE A LEVEL\",480,65);\n c.fillStyle=\"#ffd66b\";c.font=\"11px monospace\";c.fillText(\"11–20: moving snacks • 21–30: moving platforms\",480,91);\n for(let i=0;i<30;i++){\n const col=i%6,row=Math.floor(i/6),x=155+col*109,y=108+row*75,open=i+1<=unlocked,th=THEMES[i];\n c.fillStyle=open?th.top:\"#626262\";roundRect(c,x,y,96,62,10);\n c.fillStyle=open?\"#35283b\":\"#aaa\";c.font=\"bold 20px monospace\";c.fillText(open?String(i+1):\"🔒\",x+48,y+25);\n c.font=\"8px monospace\";c.fillText(open?th.name:\"LOCKED\",x+48,y+41);\n if(i>=10&&i<20&&open){c.fillStyle=\"#e95487\";c.font=\"bold 8px monospace\";c.fillText(\"SNACKS MOVE\",x+48,y+55)}\n if(i>=20&&open){c.fillStyle=\"#4279b8\";c.font=\"bold 8px monospace\";c.fillText(\"STAGE MOVES\",x+48,y+55)}\n }\n c.fillStyle=\"#fff\";c.font=\"11px monospace\";c.fillText(\"replay any unlocked level • progress stays saved\",480,502);\n }\n function overlay(){\n const e=tick-celebrateAt,bounce=Math.abs(Math.sin(e*.12))*24;\n c.fillStyle=\"rgba(53,40,59,.72)\";c.fillRect(0,0,W,H);\n for(let i=0;i<(potato()?8:22);i++){const x=(i*83+e*(1+i%3))%W,y=(i*47+e*2.4)%H;c.fillStyle=[\"#ffd66b\",\"#ff79ab\",\"#79dfff\",\"#fff\"][i%4];c.fillRect(x,y,7,12)}\n c.fillStyle=\"#fff\";roundRect(c,235,88,490,355,25);c.textAlign=\"center\";c.fillStyle=\"#35283b\";c.font=\"bold 34px monospace\";c.fillText(levelNo===30?\"GRAND CUPQUAKE!\":\"LEVEL CLEAR!\",480,145);\n drawHero(c,445,285-bounce,HEROES[hero],Math.sin(e*.16)>0?1:-1,true,tick);\n c.fillStyle=\"#ffdff0\";{const w=HEROES[hero].win,bw=Math.max(90,w.length*21+20),bx=557-bw/2;roundRect(c,bx,190-bounce*.3,bw,68,24);c.fillStyle=\"#e95487\";c.font=\"bold 35px monospace\";c.fillText(w,557,235-bounce*.3)}\n c.fillStyle=\"#ff6e9f\";roundRect(c,330,350,300,62,14);c.fillStyle=\"#fff\";c.font=\"bold 22px monospace\";c.fillText(levelNo===30?\"LEVELS\":\"NEXT LEVEL\",480,390);\n c.fillStyle=\"#35283b\";c.font=\"13px monospace\";c.fillText(\"tiny hero celebration in progress ✦\",480,425);\n }\n function loop(now=performance.now()){\n if(document.hidden){requestAnimationFrame(loop);return}\n fpsFrames++;const elapsed=now-fpsStart;\n if(elapsed>2400){const fps=fpsFrames*1000/elapsed;if(quality===\"auto\"){if(fps<45)autoPotato=true;else if(fps>55)autoPotato=false}fpsFrames=0;fpsStart=now}\n update();\n if(potato()&&now-lastPaint<32){requestAnimationFrame(loop);return}\n lastPaint=now;draw();\n }\n const setKey=(e:KeyboardEvent,on:boolean)=>{if([\"ArrowLeft\",\"a\",\"A\"].includes(e.key))keys.left=on;if([\"ArrowRight\",\"d\",\"D\"].includes(e.key))keys.right=on;if([\" \",\"ArrowUp\",\"w\",\"W\"].includes(e.key)){if(on&&!keys.jump)pressed=true;keys.jump=on}if([\"ArrowLeft\",\"ArrowRight\",\" \",\"ArrowUp\"].includes(e.key))e.preventDefault()};\n const kd=(e:KeyboardEvent)=>setKey(e,true),ku=(e:KeyboardEvent)=>setKey(e,false);addEventListener(\"keydown\",kd);addEventListener(\"keyup\",ku);\n (window as any).__gameNav=(dest:\"menu\"|\"levels\")=>{keys.left=keys.right=keys.jump=false;screen=dest;cam=0};\n (window as any).__setQuality=(next:\"auto\"|\"full\"|\"potato\")=>{quality=next;autoPotato=false;try{localStorage.setItem(\"cupquakeQuality\",next)}catch{}};\n cv.addEventListener(\"pointerdown\",e=>{const r=cv.getBoundingClientRect(),x=(e.clientX-r.left)*W/r.width,y=(e.clientY-r.top)*H/r.height;\n if(screen===\"menu\"){if(y>165&&y<335&&x>180&&x<790)hero=Math.max(0,Math.min(3,Math.floor((x-180)/150)));else if(y>340&&y<445)reset()}\n else if(screen===\"levels\"){\n const col=Math.floor((x-155)/109),row=Math.floor((y-108)/75),chosen=row*6+col+1;\n if(col>=0&&col<6&&row>=0&&row<5&&chosen<=unlocked&&x<=155+col*109+96&&y<=108+row*75+62){levelNo=chosen;reset()}\n }\n else if(screen===\"complete\"){if(levelNo===30)screen=\"levels\";else{levelNo++;reset()}}\n });\n loop();return()=>{removeEventListener(\"resize\",resize);removeEventListener(\"keydown\",kd);removeEventListener(\"keyup\",ku);delete (window as any).__gameNav;delete (window as any).__setQuality}\n },[]);\n function bind(which:\"left\"|\"right\"|\"jump\"){\n return {onPointerDown:(e:any)=>{e.currentTarget.setPointerCapture(e.pointerId);(window as any).__ctl?.(which,true)},onPointerUp:()=>{(window as any).__ctl?.(which,false)},onPointerCancel:()=>{(window as any).__ctl?.(which,false)}}\n }\n // control bridge: independent pointer buttons permit run+jump\n useEffect(()=>{const down=new Set();const fire=(k:string,on:boolean)=>{const ev=new KeyboardEvent(on?\"keydown\":\"keyup\",{key:k===\"left\"?\"ArrowLeft\":k===\"right\"?\"ArrowRight\":\" \"});window.dispatchEvent(ev)};(window as any).__ctl=(k:string,on:boolean)=>{if(on&&!down.has(k)){down.add(k);fire(k,true)}else if(!on&&down.has(k)){down.delete(k);fire(k,false)}};return()=>{delete (window as any).__ctl}},[]);\n return

✦ TODAY'S FORECAST: 100% CHANCE OF DONUTS ✦ NO TAXES, ONLY SNACKS ✦

\n \n

Made for snack enthusiasts with tiny paws.view source / remix

\n}","createdAt",["D",1788108263734],"branchVersion","branchId","5a1dc4ee-ed6b-4a46-aa03-4b40dc568479","id","bf408ecb-875a-43c1-8e3c-4fdabe2c77de","chiikawa-cupcake-quest",["D",1788031242570],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","8-bit snack-collecting platformer","imageUrl","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","01a04ef7-9208-73f3-80b5-7e7390706065","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","bf408ecb875a43c18e3c4fdabe2c77de","tursoHostname","bf408ecb875a43c18e3c4fdabe2c77de-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789510270483],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":56,"_105":106,"_107":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",85,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pchinjr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":247,"_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":248,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":249,"_85":250,"_87":251,"_89":25},"tree",[174,182,183,184],"files",[174,175,176,177,178,179,180,181,182,183,184],"counts",{"_164":64,"_165":138,"_166":64,"_167":168,"_169":170},"contents",[131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":158,"_32":159,"_30":160,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":161,"_13":64,"_34":162,"_36":-5,"_24":25,"_143":-5,"_27":163},{"_44":152,"_32":153,"_30":154,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":155,"_13":64,"_34":20,"_36":156,"_24":25,"_143":-5,"_27":157},{"_44":146,"_32":147,"_30":148,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":149,"_13":64,"_34":20,"_36":150,"_24":25,"_143":-5,"_27":151},{"_44":135,"_32":136,"_30":58,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":140,"_13":64,"_34":141,"_36":142,"_24":25,"_143":144,"_27":145},"ed5ec2da-80f3-452d-84d3-6b330889877d","index.ts","parentId",1,"latest",["D",1788031242570],"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","cupquake",[136],"14850a02-2ec8-4900-96ae-0e9d92fbd2de","README.md","01a04ef7-9208-73f3-80b5-78a115f83e09",["D",1788031242570],"# 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],"d9c43ba9-21fd-4b59-8ef9-a65ca6cf7b46","CHANGELOG.md","01a04ef7-9208-73f3-80b5-74eb1c16c942",["D",1788031242570],"# 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 · v80