A ROOFTOP DUEL

GORILLAS!

view source

PLAYER 1

{scores[0]}

{status}

PLAYER 2

{scores[1]}

\n}","/** @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=()=>{game.current=makeCity(scores);setTurn(game.current.turn);setStatus(\"New skyline — aim your banana\")};\n const reset=()=>{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;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 victim=g.players.findIndex(p=>(s.x-p.x)**2+(s.y-(p.y-2))**2<25**2);\n if(victim>=0){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){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.x<-30||s.x>W+30||s.y>H+30){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}","createdAt",["D",1787699000914],"branchVersion","branchId","41aa9144-c14b-4f1e-8ba4-728076e86dac","id","a7a70754-8005-4903-9527-f0c9695ebe0a","gorillas",["D",1787698390645],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A rooftop artillery game inspired by QBasic Gorillas","imageUrl","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","01a03b20-a6d3-75fa-9493-09e9c401ee0e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","a7a70754800549039527f0c9695ebe0a","tursoHostname","a7a70754800549039527f0c9695ebe0a-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789525843977],"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",12,"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":237,"_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":238,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":239,"_85":240,"_87":241,"_89":25},"tree",[174,181,182,183],"files",[174,175,176,177,178,179,180,181,182,183],"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":145,"_32":146,"_30":147,"_137":-5,"_42":43,"_41":148,"_139":25,"_39":149,"_13":138,"_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":-5,"_27":144},"94ccd1ab-36ce-4a14-b65b-4d88f338eeb9","index.ts","parentId",1,"latest",["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","label",[136],"7795a38c-7fa8-41f2-906c-c1c6dca4a67f","README.md","01a03b20-a6d3-75fa-9493-075138a1630f",4,["D",1787698463539],"# 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. Buildings take damage where shots land. Each hit scores a point and generates a new city.\n\n## Controls\n\n- Angle: 5–85 degrees\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",[146],"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

GORILLAS!

PLAYER {current}: AIM

GORILLAS!

PLAYER {current}: AIM

Diff · v5