[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_185":186,"_187":188},"routes/_app.x.$handle.$name",{"_98":97,"_32":46,"_106":88,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":60,"_124":-5,"_125":-5,"_126":127},"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":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",6,"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/index.tsx","latestPath","fileId","43411f80-a499-11f1-83a7-1607ee4eb77e","name","index.tsx","fileType","script","content","import React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport Matter from \"https://esm.sh/matter-js@0.20.0\";\n\ntype Ad = { image: Blob; audio: Blob; name: string };\nconst FRUITS = [\n { r: 15, color: \"#ef4444\", label: \"🍒\" }, { r: 20, color: \"#f97316\", label: \"🍓\" },\n { r: 27, color: \"#facc15\", label: \"🍊\" }, { r: 35, color: \"#a3e635\", label: \"🍎\" },\n { r: 45, color: \"#84cc16\", label: \"🍐\" }, { r: 57, color: \"#22c55e\", label: \"🍑\" },\n { r: 72, color: \"#16a34a\", label: \"🍈\" }, { r: 91, color: \"#15803d\", label: \"🍉\" },\n];\n\nconst openDB = () => new Promise((resolve, reject) => {\n const q = indexedDB.open(\"melon-break\", 1);\n q.onupgradeneeded = () => q.result.createObjectStore(\"ads\");\n q.onsuccess = () => resolve(q.result); q.onerror = () => reject(q.error);\n});\nasync function saveAd(ad: Ad) { const db=await openDB(); const tx=db.transaction(\"ads\",\"readwrite\"); tx.objectStore(\"ads\").put(ad,\"current\"); return new Promise(r=>tx.oncomplete=()=>r(true)); }\nasync function loadAd(): Promise { const db=await openDB(); const q=db.transaction(\"ads\").objectStore(\"ads\").get(\"current\"); return new Promise(r=>{q.onsuccess=()=>r(q.result||null);q.onerror=()=>r(null)}); }\n\nfunction AdStudio({onReady}:{onReady:(a:Ad)=>void}) {\n const canvas=useRef(null); const [audio,setAudio]=useState(null);\n const [recording,setRecording]=useState(false); const [status,setStatus]=useState(\"Draw an ad or upload a picture.\");\n const [color,setColor]=useState(\"#ef4444\"); const [size,setSize]=useState(12); const [dirty,setDirty]=useState(false);\n const recorder=useRef(null); const chunks=useRef([]); const drawing=useRef(false);\n useEffect(()=>{ const c=canvas.current!,x=c.getContext(\"2d\")!; x.fillStyle=\"#fff7ed\";x.fillRect(0,0,c.width,c.height);x.fillStyle=\"#14532d\";x.font=\"bold 36px sans-serif\";x.textAlign=\"center\";x.fillText(\"YOUR AD HERE\",c.width/2,95);x.font=\"20px sans-serif\";x.fillText(\"draw something delightful ✦\",c.width/2,140);},[]);\n const point=(e:React.PointerEvent)=>{const r=canvas.current!.getBoundingClientRect();return{x:(e.clientX-r.left)*canvas.current!.width/r.width,y:(e.clientY-r.top)*canvas.current!.height/r.height}};\n const down=(e:React.PointerEvent)=>{drawing.current=true;canvas.current!.setPointerCapture(e.pointerId);const p=point(e);const x=canvas.current!.getContext(\"2d\")!;x.beginPath();x.moveTo(p.x,p.y);setDirty(true)};\n const move=(e:React.PointerEvent)=>{if(!drawing.current)return;const p=point(e),x=canvas.current!.getContext(\"2d\")!;x.lineCap=\"round\";x.lineJoin=\"round\";x.strokeStyle=color;x.lineWidth=size;x.lineTo(p.x,p.y);x.stroke()};\n const upload=(f?:File)=>{if(!f)return;const img=new Image();img.onload=()=>{const c=canvas.current!,x=c.getContext(\"2d\")!;x.fillStyle=\"#fff\";x.fillRect(0,0,c.width,c.height);const s=Math.max(c.width/img.width,c.height/img.height),w=img.width*s,h=img.height*s;x.drawImage(img,(c.width-w)/2,(c.height-h)/2,w,h);URL.revokeObjectURL(img.src);setDirty(true)};img.src=URL.createObjectURL(f)};\n const addText=()=>{const t=prompt(\"What should your ad say?\");if(!t)return;const x=canvas.current!.getContext(\"2d\")!;x.fillStyle=color;x.font=\"bold 36px sans-serif\";x.textAlign=\"center\";x.fillText(t,canvas.current!.width/2,canvas.current!.height-38);setDirty(true)};\n const record=async()=>{if(recording){recorder.current?.stop();return}try{const stream=await navigator.mediaDevices.getUserMedia({audio:true});chunks.current=[];const mr=new MediaRecorder(stream);recorder.current=mr;mr.ondataavailable=e=>chunks.current.push(e.data);mr.onstop=()=>{const b=new Blob(chunks.current,{type:mr.mimeType});setAudio(b);setRecording(false);setStatus(\"Voiceover saved!\");stream.getTracks().forEach(t=>t.stop())};mr.start();setRecording(true);setStatus(\"Recording… tap again to stop.\")}catch{setStatus(\"Microphone permission is needed for the voiceover.\")}};\n const finish=()=>canvas.current!.toBlob(async image=>{if(!image||!audio){setStatus(\"Record a voiceover before saving.\");return}const ad={image,audio,name:\"My homemade ad\"};await saveAd(ad);onReady(ad)},\"image/png\");\n return

Melon Break presents

Make the commercial break.

Create one tiny ad with a picture and your own voiceover. Then the game unlocks.

;\n}\n\nfunction Game({ad,onEdit}:{ad:Ad,onEdit:()=>void}) {\n const host=useRef(null); const [score,setScore]=useState(0); const [next,setNext]=useState(0); const [over,setOver]=useState(false); const cleanup=useRef(()=>{});\n const start=()=>{setOver(false);setScore(0);if(!host.current)return;host.current.innerHTML=\"\";const W=Math.min(420,window.innerWidth-24),H=Math.min(680,window.innerHeight-150);const engine=Matter.Engine.create();const render=Matter.Render.create({element:host.current,engine,options:{width:W,height:H,wireframes:false,background:\"#fff7ed\"}});const wall=(x:number,y:number,w:number,h:number)=>Matter.Bodies.rectangle(x,y,w,h,{isStatic:true,render:{fillStyle:\"#14532d\"}});Matter.Composite.add(engine.world,[wall(-8,H/2,20,H),wall(W+8,H/2,20,H),wall(W/2,H+8,W,20)]);let current=Math.floor(Math.random()*3),last=0,dead=false;setNext(current);\n const make=(x:number,y:number,l:number)=>Matter.Bodies.circle(x,y,FRUITS[l].r,{restitution:.15,friction:.02,label:String(l),render:{fillStyle:FRUITS[l].color,strokeStyle:\"#fff\",lineWidth:3}});\n const drop=(e:PointerEvent)=>{if(dead||Date.now()-last<350)return;last=Date.now();const r=render.canvas.getBoundingClientRect(),x=Math.max(FRUITS[current].r,Math.min(W-FRUITS[current].r,(e.clientX-r.left)*W/r.width));Matter.Composite.add(engine.world,make(x,35,current));current=Math.floor(Math.random()*3);setNext(current)};\n render.canvas.addEventListener(\"pointerdown\",drop);const pairs=new Set();Matter.Events.on(engine,\"collisionStart\",ev=>{for(const p of ev.pairs){const a=p.bodyA,b=p.bodyB;if(a.label===b.label&&/^\\d$/.test(a.label)){const key=[a.id,b.id].sort().join(\"-\");if(pairs.has(key))continue;pairs.add(key);const l=+a.label;if(ls+(l+1)*10)}}}});\n const runner=Matter.Runner.create();Matter.Runner.run(runner,engine);Matter.Render.run(render);const timer=setInterval(()=>{const bad=Matter.Composite.allBodies(engine.world).filter(b=>!b.isStatic&&b.position.y<82&&b.speed<.7);if(bad.length){dead=true;clearInterval(timer);setTimeout(()=>setOver(true),400)}},800);\n cleanup.current=()=>{clearInterval(timer);render.canvas.removeEventListener(\"pointerdown\",drop);Matter.Render.stop(render);Matter.Runner.stop(runner);Matter.Engine.clear(engine);render.canvas.remove()};};\n useEffect(()=>{start();return()=>cleanup.current()},[]);\n return

Melon Break 🍉

Tap where you want the fruit to drop. Match two to merge.

{score}

\n {over&&{cleanup.current();start()}}/>}

;\n}\n\nfunction AdBreak({ad,score,replay}:{ad:Ad,score:number,replay:()=>void}) {\n const [done,setDone]=useState(false); const image=useRef(URL.createObjectURL(ad.image)); const audio=useRef(URL.createObjectURL(ad.audio));\n useEffect(()=>{const a=new Audio(audio.current);a.onended=()=>setDone(true);a.onerror=()=>setDone(true);a.play().catch(()=>setDone(true));return()=>{a.pause();URL.revokeObjectURL(image.current);URL.revokeObjectURL(audio.current)}},[]);\n return

A commercial made by you

Game over · {score} points

;\n}\n\nfunction App(){const [ad,setAd]=useState(null);const [loading,setLoading]=useState(true);const [editing,setEditing]=useState(false);useEffect(()=>{loadAd().then(a=>{setAd(a);setLoading(false)})},[]);if(loading)return

Loading your fruit stand…

;if(!ad||editing)return {setAd(a);setEditing(false)}}/>;return setEditing(true)}/>}\ncreateRoot(document.getElementById(\"root\")!).render();\n","import React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport Matter from \"https://esm.sh/matter-js@0.20.0\";\n\ntype Ad = { image: Blob; audio: Blob; name: string };\nconst FRUITS = [\n { r: 15, color: \"#ef4444\", label: \"🍒\" }, { r: 20, color: \"#f97316\", label: \"🍓\" },\n { r: 27, color: \"#facc15\", label: \"🍊\" }, { r: 35, color: \"#a3e635\", label: \"🍎\" },\n { r: 45, color: \"#84cc16\", label: \"🍐\" }, { r: 57, color: \"#22c55e\", label: \"🍑\" },\n { r: 72, color: \"#16a34a\", label: \"🍈\" }, { r: 91, color: \"#15803d\", label: \"🍉\" },\n];\n\nconst openDB = () => new Promise((resolve, reject) => {\n const q = indexedDB.open(\"melon-break\", 1);\n q.onupgradeneeded = () => q.result.createObjectStore(\"ads\");\n q.onsuccess = () => resolve(q.result); q.onerror = () => reject(q.error);\n});\nasync function saveAd(ad: Ad) { const db=await openDB(); const tx=db.transaction(\"ads\",\"readwrite\"); tx.objectStore(\"ads\").put(ad,\"current\"); return new Promise(r=>tx.oncomplete=()=>r(true)); }\nasync function loadAd(): Promise { const db=await openDB(); const q=db.transaction(\"ads\").objectStore(\"ads\").get(\"current\"); return new Promise(r=>{q.onsuccess=()=>r(q.result||null);q.onerror=()=>r(null)}); }\n\nfunction AdStudio({onReady}:{onReady:(a:Ad)=>void}) {\n const canvas=useRef(null); const [audio,setAudio]=useState(null);\n const [recording,setRecording]=useState(false); const [status,setStatus]=useState(\"Draw an ad or upload a picture.\");\n const [color,setColor]=useState(\"#ef4444\"); const [size,setSize]=useState(12); const [dirty,setDirty]=useState(false);\n const recorder=useRef(null); const chunks=useRef([]); const drawing=useRef(false);\n useEffect(()=>{ const c=canvas.current!,x=c.getContext(\"2d\")!; x.fillStyle=\"#fff7ed\";x.fillRect(0,0,c.width,c.height);x.fillStyle=\"#14532d\";x.font=\"bold 36px sans-serif\";x.textAlign=\"center\";x.fillText(\"YOUR AD HERE\",c.width/2,95);x.font=\"20px sans-serif\";x.fillText(\"draw something delightful ✦\",c.width/2,140);},[]);\n const point=(e:React.PointerEvent)=>{const r=canvas.current!.getBoundingClientRect();return{x:(e.clientX-r.left)*canvas.current!.width/r.width,y:(e.clientY-r.top)*canvas.current!.height/r.height}};\n const down=(e:React.PointerEvent)=>{drawing.current=true;canvas.current!.setPointerCapture(e.pointerId);const p=point(e);const x=canvas.current!.getContext(\"2d\")!;x.beginPath();x.moveTo(p.x,p.y);setDirty(true)};\n const move=(e:React.PointerEvent)=>{if(!drawing.current)return;const p=point(e),x=canvas.current!.getContext(\"2d\")!;x.lineCap=\"round\";x.lineJoin=\"round\";x.strokeStyle=color;x.lineWidth=size;x.lineTo(p.x,p.y);x.stroke()};\n const upload=(f?:File)=>{if(!f)return;const img=new Image();img.onload=()=>{const c=canvas.current!,x=c.getContext(\"2d\")!;x.fillStyle=\"#fff\";x.fillRect(0,0,c.width,c.height);const s=Math.max(c.width/img.width,c.height/img.height),w=img.width*s,h=img.height*s;x.drawImage(img,(c.width-w)/2,(c.height-h)/2,w,h);URL.revokeObjectURL(img.src);setDirty(true)};img.src=URL.createObjectURL(f)};\n const addText=()=>{const t=prompt(\"What should your ad say?\");if(!t)return;const x=canvas.current!.getContext(\"2d\")!;x.fillStyle=color;x.font=\"bold 36px sans-serif\";x.textAlign=\"center\";x.fillText(t,canvas.current!.width/2,canvas.current!.height-38);setDirty(true)};\n const record=async()=>{if(recording){recorder.current?.stop();return}try{const stream=await navigator.mediaDevices.getUserMedia({audio:true});chunks.current=[];const mr=new MediaRecorder(stream);recorder.current=mr;mr.ondataavailable=e=>chunks.current.push(e.data);mr.onstop=()=>{const b=new Blob(chunks.current,{type:mr.mimeType});setAudio(b);setRecording(false);setStatus(\"Voiceover saved!\");stream.getTracks().forEach(t=>t.stop())};mr.start();setRecording(true);setStatus(\"Recording… tap again to stop.\")}catch{setStatus(\"Microphone permission is needed for the voiceover.\")}};\n const finish=()=>canvas.current!.toBlob(async image=>{if(!image||!audio){setStatus(\"Record a voiceover before saving.\");return}const ad={image,audio,name:\"My homemade ad\"};await saveAd(ad);onReady(ad)},\"image/png\");\n return

Melon Break presents

Make the commercial break.

Create one tiny ad with a picture and your own voiceover. Then the game unlocks.

Melon Break 🍉

Tap where you want the fruit to drop. Match two to merge.

Next drop

{FRUITS[next].label}

{score}

\n {over&&{cleanup.current();start()}}/>}

A commercial made by you

Game over · {score} points

Loading your fruit stand…

;if(!ad||editing)return {setAd(a);setEditing(false)}}/>;return setEditing(true)}/>}\ncreateRoot(document.getElementById(\"root\")!).render();\n","createdAt",["D",1788112367248],"branchVersion","branchId","595b4766-30e6-4963-b8e5-101294236d9e","id","0426f079-e321-4531-bc07-75efda77badc","watermelon-ad-drop",["D",1788111281845],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Make an ad, record it, then play a fruit drop game","imageUrl","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","15442e06-a499-11f1-bb0a-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"isOwned",10,"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":181,"_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":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":182,"_82":183,"_84":184,"_86":25},"tree",[158,161],"files",[158,159,160,161],"counts",{"_148":64,"_149":133,"_150":64,"_151":152,"_153":154},"contents",[128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":141,"_32":142,"_30":143,"_132":-5,"_42":43,"_41":144,"_134":60,"_39":145,"_13":64,"_34":146,"_36":-5,"_24":25,"_138":-5,"_27":147},{"_44":130,"_32":131,"_30":58,"_132":-5,"_42":43,"_41":133,"_134":60,"_39":135,"_13":64,"_34":136,"_36":137,"_24":25,"_138":139,"_27":140},"7e0feeb3-a0dc-4a65-8ecf-80bc3b86a5a8","index.ts","parentId",1,"latest",["D",1788111281883],"http","import { Hono } from \"npm:hono\";\nimport { immutableFileUrl, parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\napp.get(\"/\", (c) => c.html(Root(immutableFileUrl(\"/frontend/index.tsx\"))));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\nexport default app.fetch;","label","adhoc",[131],"94e889de-6baf-4683-8fa1-9c6668099c99","frontend","9f7b7442-66a8-4865-89e5-d2659e84e998",2,["D",1788111353105],"directory",[142],"pulls","branches","forks","envVars",{"_155":64,"_157":64},"connections",{"_155":64,"_156":64},"count","unfilledCount","emptyCount",{"_44":141,"_32":142,"_30":143,"_132":-5,"_42":43,"_41":144,"_134":60,"_39":178,"_13":64,"_34":146,"_36":-5,"_24":25,"_138":-5,"_163":179,"_27":180},{"_44":174,"_32":33,"_30":31,"_132":143,"_42":43,"_41":14,"_134":25,"_39":175,"_13":144,"_34":35,"_36":38,"_24":25,"_138":-5,"_163":176,"_27":177},{"_44":166,"_32":167,"_30":168,"_132":143,"_42":43,"_41":169,"_134":60,"_39":170,"_13":133,"_34":35,"_36":171,"_24":25,"_138":-5,"_163":172,"_27":173},{"_44":130,"_32":131,"_30":58,"_132":-5,"_42":43,"_41":133,"_134":60,"_39":162,"_13":64,"_34":136,"_36":137,"_24":25,"_138":139,"_163":164,"_27":165},["D",1788111281883],"children",[],[131],"8a0bc371-1f05-494a-9189-c2309c1c0af9","root.tsx","3fbb2496-a499-11f1-88a2-1607ee4eb77e",4,["D",1788112220620],"import { html } from \"npm:hono/html\";\n\nexport function Root(entry: string) {\n return html`\n\n\n \n \n \n Melon Break\n \n \n \n\n\n

\n \n\n`;\n}",[],[142,167],"998d9b42-2861-4296-8c70-1e00771b60ec",["D",1788112367248],[],[142,33],["D",1788111353105],[159,160],[142],["D",1788111281845],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"ctx",{"_80":-5,"_125":218,"_219":220,"_221":222,"_223":25,"_224":25,"_225":25,"_226":60,"_227":-5,"_228":-7,"_229":-7,"_230":64,"_231":25,"_232":25,"_233":-5,"_234":25,"_235":25,"_236":25,"_237":-5},"ENV",{"_189":190,"_191":192,"_193":88,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v6