[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_269":270,"_271":272},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_200":-5,"_20":201,"_22":202,"_203":204,"_205":206,"_26":207,"_24":208,"_209":-5,"_210":-5,"_211":56,"_212":213,"_214":47,"_215":-5,"_216":-5,"_217":218},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","pchinjr","name","gorillas","branchName","main","version","path","frontend/components","project",{"_35":143,"_13":14,"_48":144,"_145":-5,"_146":56,"_147":148,"_149":148,"_150":151,"_152":-5,"_153":154,"_155":80,"_156":47,"_157":-5,"_158":-5,"_159":50,"_160":161,"_162":163,"_164":165,"_166":167,"_168":-5,"_169":170,"_171":170,"_172":173,"_174":173,"_175":173,"_176":170,"_177":170,"_178":179,"_180":181,"_182":183,"_184":56},"tree",[74,75,76,77],"file",{"_35":69,"_42":43,"_38":41,"_13":60,"_53":-5,"_51":70,"_17":50,"_40":71,"_48":72,"_44":45,"_57":-5,"_18":73},"contents",[33,34],"upstream","pull","ahead","behind","envVars",{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":65,"_17":66,"_51":52,"_53":67,"_55":56,"_57":-5,"_18":68},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":58},"id","ef1df85c-8524-4555-85d9-481700f81eaf","Counter.tsx","fileId","01a03b20-a6d3-75fa-9492-eab864d60bed","parentId","01a03b20-a6d3-75fa-9492-ed238f199d3a","branchId","41aa9144-c14b-4f1e-8ba4-728076e86dac","branchVersion",1,"latest",true,"createdAt",["D",1787698390645],0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n","deleted",false,"label",[59,60,37],"frontend","components","f7679b62-0ecb-4383-88ee-3c9f36dd280c","App.tsx","01a03b20-a6d3-75fa-9492-e7cb0156baef",11,["D",1787699298041],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst W=960,H=600,GROUND=560,GRAVITY=115;\ntype Building={x:number,w:number,h:number,color:string,holes:{x:number,y:number,r:number}[]};\ntype Player={x:number,y:number,side:-1|1,score:number};\ntype Game={buildings:Building[],players:[Player,Player],turn:0|1,wind:number,shot:null|{x:number,y:number,vx:number,vy:number},winner:number|null,flash:number};\n\nfunction makeCity(scores:[number,number]=[0,0]):Game{\n const colors=[\"#15aabf\",\"#e8590c\",\"#7950f2\",\"#2f9e44\",\"#d6336c\",\"#1971c2\"];\n const buildings:Building[]=[]; let x=0,i=0;\n while(x{const b=buildings[idx];return{x:b.x+b.w/2,y:GROUND-b.h-18,side,score}};\n return{buildings,players:[perch(1,1,scores[0]),perch(buildings.length-2,-1,scores[1])],turn:Math.random()<.5?0:1,wind:Math.round((Math.random()*20-10)*10)/10,shot:null,winner:null,flash:0};\n}\nfunction hitBuilding(g:Game,x:number,y:number){\n return g.buildings.find(b=>x>=b.x&&x<=b.x+b.w&&y>=GROUND-b.h&&y<=GROUND&&!b.holes.some(q=>(x-q.x)**2+(y-q.y)**2tone(n,name===\"score\"?.14:.09,i*(name===\"score\"?.1:.045),name===\"impact\"?.075:.05,name===\"impact\"?\"sawtooth\":\"square\"));\n}\nfunction drawGorilla(c:CanvasRenderingContext2D,p:Player,active:boolean,throwing:boolean){\n c.save();c.translate(p.x,p.y);c.scale(p.side,1);c.fillStyle=active?\"#ffe066\":\"#ff922b\";\n c.beginPath();c.arc(0,-13,12,0,Math.PI*2);c.fill();c.fillRect(-12,-2,24,18);\n c.lineWidth=7;c.strokeStyle=c.fillStyle;c.lineCap=\"round\";\n c.beginPath();c.moveTo(-7,2);c.lineTo(-18,throwing?-19:13);c.moveTo(7,2);c.lineTo(throwing?24:18,throwing?-27:13);c.moveTo(-7,14);c.lineTo(-12,24);c.moveTo(7,14);c.lineTo(12,24);c.stroke();\n c.fillStyle=\"#111\";c.fillRect(-5,-16,3,3);c.fillRect(3,-16,3,3);c.restore();\n}\nexport function App(){\n const canvas=useRef(null);const game=useRef(makeCity());\n const [turn,setTurn]=useState(game.current.turn);const [angle,setAngle]=useState(45);const [power,setPower]=useState(55);\n const [scores,setScores]=useState<[number,number]>([0,0]);const [status,setStatus]=useState(\"Aim your banana\");\n const sync=()=>{setTurn(game.current.turn);setScores([game.current.players[0].score,game.current.players[1].score])};\n const nextRound=()=>{sfx(\"start\");game.current=makeCity(scores);setTurn(game.current.turn);setStatus(\"New skyline — aim your banana\")};\n const reset=()=>{sfx(\"start\");game.current=makeCity();setAngle(45);setPower(55);setScores([0,0]);setTurn(game.current.turn);setStatus(\"Fresh match\")};\n const fire=()=>{const g=game.current;if(g.shot||g.winner!==null)return;sfx(\"throw\");const p=g.players[g.turn],a=angle*Math.PI/180,s=power*4.2;g.shot={x:p.x+p.side*22,y:p.y-25,vx:Math.cos(a)*s*p.side,vy:-Math.sin(a)*s};setStatus(\"Banana away!\")};\n useEffect(()=>{let raf=0,last=performance.now();const ctx=canvas.current!.getContext(\"2d\")!;\n const frame=(now:number)=>{const dt=Math.min(.025,(now-last)/1000);last=now;const g=game.current;\n if(g.shot){const s=g.shot;s.vx+=g.wind*3*dt;s.vy+=GRAVITY*dt;s.x+=s.vx*dt;s.y+=s.vy*dt;\n const edge=10,bounce=.88;\n if(s.xW-edge){s.x=W-edge;s.vx=-Math.abs(s.vx)*bounce}\n if(s.y(s.x-p.x)**2+(s.y-(p.y-2))**2<25**2);\n if(victim>=0){sfx(\"score\");g.winner=g.turn;g.players[g.turn].score++;g.shot=null;setStatus(`Player ${g.turn+1} scores! 🎉`);sync()}\n else{const b=hitBuilding(g,s.x,s.y);if(b){sfx(\"impact\");b.holes.push({x:s.x,y:s.y,r:22});g.shot=null;g.turn=(1-g.turn) as 0|1;setStatus(`Player ${g.turn+1}'s turn`);sync()}\n else if(s.y>H+30){sfx(\"miss\");g.shot=null;g.turn=(1-g.turn) as 0|1;setStatus(`Player ${g.turn+1}'s turn`);sync()}}}\n const sky=ctx.createLinearGradient(0,0,0,H);sky.addColorStop(0,\"#090d3d\");sky.addColorStop(1,\"#3b2b6f\");ctx.fillStyle=sky;ctx.fillRect(0,0,W,H);\n ctx.fillStyle=\"#fff\";for(let i=0;i<55;i++){const x=(i*173)%W,y=(i*97)%310;ctx.globalAlpha=.35+(i%4)*.15;ctx.fillRect(x,y,2,2)}ctx.globalAlpha=1;\n ctx.fillStyle=\"#fff3bf\";ctx.beginPath();ctx.arc(W/2,80,28,0,Math.PI*2);ctx.fill();\n for(const b of g.buildings){ctx.save();ctx.beginPath();ctx.rect(b.x,GROUND-b.h,b.w,b.h);for(const q of b.holes){ctx.moveTo(q.x+q.r,q.y);ctx.arc(q.x,q.y,q.r,0,Math.PI*2)}ctx.clip(\"evenodd\");ctx.fillStyle=b.color;ctx.fillRect(b.x,GROUND-b.h,b.w,b.h);\n ctx.fillStyle=\"#ffd43b\";for(let yy=GROUND-b.h+22;yy1)ctx.fillRect(xx,yy,8,12);ctx.restore()}\n ctx.fillStyle=\"#11152e\";ctx.fillRect(0,GROUND,W,H-GROUND);g.players.forEach((p,i)=>drawGorilla(ctx,p,i===g.turn,!!g.shot&&i===g.turn));\n if(g.shot){ctx.save();ctx.translate(g.shot.x,g.shot.y);ctx.rotate(now/80);ctx.strokeStyle=\"#ffe066\";ctx.lineWidth=6;ctx.beginPath();ctx.arc(0,0,9,-1.4,1.4);ctx.stroke();ctx.restore()}\n ctx.font=\"bold 18px ui-monospace,monospace\";ctx.fillStyle=\"#fff\";ctx.fillText(`WIND ${g.wind>0?\"→\":g.wind<0?\"←\":\"•\"} ${Math.abs(g.wind).toFixed(1)}`,W/2-66,32);\n raf=requestAnimationFrame(frame)};raf=requestAnimationFrame(frame);return()=>cancelAnimationFrame(raf)},[]);\n const current=turn+1;\n return

A ROOFTOP DUEL

GORILLAS!

view source

PLAYER 1

{scores[0]}

{status}

PLAYER 2

{scores[1]}

\n}",[59,60,62],"46535ebf-d076-40c3-bded-6a72b8b9ce6b","directory","01a03b20-a6d3-75fa-9492-fd33c2cb0bc1",["D",1787698390645],[59,60],{"_35":103,"_13":59,"_38":71,"_40":-5,"_42":43,"_44":45,"_46":47,"_48":104,"_17":50,"_51":70,"_53":-5,"_55":56,"_57":-5,"_84":105,"_18":106},{"_35":96,"_13":97,"_38":98,"_40":-5,"_42":43,"_44":45,"_46":47,"_48":99,"_17":50,"_51":24,"_53":100,"_55":56,"_57":-5,"_84":101,"_18":102},{"_35":87,"_13":88,"_38":89,"_40":-5,"_42":43,"_44":90,"_46":47,"_48":91,"_17":92,"_51":24,"_53":93,"_55":56,"_57":-5,"_84":94,"_18":95},{"_35":78,"_13":79,"_38":80,"_40":-5,"_42":43,"_44":45,"_46":47,"_48":81,"_17":50,"_51":82,"_53":83,"_55":56,"_57":-5,"_84":85,"_18":86},"94ccd1ab-36ce-4a14-b65b-4d88f338eeb9","index.ts","01a03b20-a6d3-75fa-9493-09e9c401ee0e",["D",1787698390645],"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","children",[],[79],"056fff6f-ac77-4a00-b421-74994a1f5ecd","README.md","01a03b20-a6d3-75fa-9493-075138a1630f",12,["D",1787699300614],3,"# Gorillas!\n\nA local two-player rooftop artillery game inspired by the spirit of the 1991 QBasic classic. Built from scratch with React, Canvas, and Hono on Val Town.\n\n## Play\n\nPlayers alternate throwing bananas across a randomly generated skyline. Adjust the angle and power, account for wind, and hit the opposing gorilla. Bananas bounce from the ceiling and side walls, while buildings take damage where shots land. Each hit scores a point and generates a new city.\n\n## Controls\n\n- Angle: 0–90 degrees\n- Chiptune effects: synthesized in-browser for throws, hits, misses, and wins\n- Power: 10–100\n- Throw: launch the banana\n- New match: reset scores and skyline\n\nWorks with mouse, keyboard-assisted range inputs, and touch screens.\n",[],[88],"5330e8d9-b504-452e-93c9-e13699b2b450","CHANGELOG.md","01a03b20-a6d3-75fa-9493-014a2dc0f6ce",["D",1787698390645],"# 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

PLAYER {current}: AIM