[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_201":202,"_203":204},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_153":-5,"_20":154,"_22":155,"_156":157,"_158":159,"_26":160,"_24":161,"_162":-5,"_163":-5,"_164":54,"_165":166,"_167":45,"_168":-5,"_169":-5,"_170":171},"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","watermelon-ad-drop","branchName","main","version","path","frontend/EnhancedAdStudio.tsx","project",{"_33":99,"_13":14,"_46":100,"_101":-5,"_102":54,"_103":104,"_105":104,"_106":107,"_108":-5,"_109":110,"_111":62,"_112":45,"_113":-5,"_114":-5,"_115":64,"_116":117,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":132,"_133":134,"_135":136,"_137":54},"tree",[58,59],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"contents",[],"upstream","pull","ahead","behind","envVars","id","b454e43c-9e54-47eb-b6f3-844322b9780c","EnhancedAdStudio.tsx","fileId","3bce6510-a49d-11f1-b053-1607ee4eb77e","parentId","9f7b7442-66a8-4865-89e5-d2659e84e998","branchId","595b4766-30e6-4963-b8e5-101294236d9e","branchVersion",10,"latest",true,"createdAt",["D",1788113126244],1,"fileType","script","content","import React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype Ad = { image: Blob; audio: Blob; name: string };\ntype Layer = {\n id:string; name:string; type:\"paint\"|\"image\"|\"text\"; visible:boolean; opacity:number;\n canvas?:HTMLCanvasElement; image?:HTMLImageElement; text?:string; color?:string;\n fontSize?:number; x:number; y:number; scale:number;\n};\ntype SnapLayer = Omit & { png?:string };\ntype Snapshot = { layers:SnapLayer[]; active:string };\n\nconst W=640,H=360, uid=()=>crypto.randomUUID();\nconst makeCanvas=()=>{const c=document.createElement(\"canvas\");c.width=W;c.height=H;return c};\nconst loadImage=(src:string)=>new Promise((ok,no)=>{const i=new Image();i.onload=()=>ok(i);i.onerror=no;i.src=src});\nconst fileUrl=(f:Blob)=>new Promise((ok,no)=>{const r=new FileReader();r.onload=()=>ok(String(r.result));r.onerror=no;r.readAsDataURL(f)});\nconst clamp=(n:number,a:number,b:number)=>Math.max(a,Math.min(b,n));\n\nexport function EnhancedAdStudio({onReady}:{onReady:(a:Ad)=>void}) {\n const display=useRef(null),stage=useRef(null);\n const layers=useRef([{id:uid(),name:\"Drawing 1\",type:\"paint\",visible:true,opacity:1,canvas:makeCanvas(),x:0,y:0,scale:1}]);\n const [active,setActive]=useState(layers.current[0].id),[tool,setTool]=useState<\"select\"|\"draw\"|\"erase\"|\"pan\">(\"draw\");\n const [color,setColor]=useState(\"#ef4444\"),[size,setSize]=useState(12),[tick,setTick]=useState(0);\n const [audio,setAudio]=useState(null),[recording,setRecording]=useState(false),[status,setStatus]=useState(\"Build your ad, then record its voiceover.\");\n const recorder=useRef(null),chunks=useRef([]);\n const view=useRef({scale:1,x:0,y:0}); const pointers=useRef(new Map());\n const action=useRef(null),history=useRef([]),future=useRef([]);\n const rerender=()=>setTick(v=>v+1);\n const current=()=>layers.current.find(l=>l.id===active);\n\n const snapshot=():Snapshot=>({active,layers:layers.current.map(l=>({...l,canvas:undefined,image:undefined,png:l.type===\"paint\"?l.canvas!.toDataURL():l.type===\"image\"?l.image!.src:undefined}))});\n const restore=async(s:Snapshot)=>{const rebuilt:Layer[]=[];for(const raw of s.layers){const l:any={...raw};delete l.png;if(raw.type===\"paint\"){l.canvas=makeCanvas();if(raw.png){const i=await loadImage(raw.png);l.canvas.getContext(\"2d\")!.drawImage(i,0,0)}}else if(raw.type===\"image\"&&raw.png)l.image=await loadImage(raw.png);rebuilt.push(l)}layers.current=rebuilt;setActive(s.active);rerender()};\n const remember=()=>{history.current.push(snapshot());if(history.current.length>30)history.current.shift();future.current=[];rerender()};\n const undo=async()=>{const s=history.current.pop();if(!s)return;future.current.push(snapshot());await restore(s)};\n const redo=async()=>{const s=future.current.pop();if(!s)return;history.current.push(snapshot());await restore(s)};\n\n const render=()=>{const c=display.current;if(!c)return;const ctx=c.getContext(\"2d\")!,rect=c.getBoundingClientRect(),dpr=Math.min(devicePixelRatio||1,2);const pw=Math.round(rect.width*dpr),ph=Math.round(rect.height*dpr);if(c.width!==pw||c.height!==ph){c.width=pw;c.height=ph}ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,rect.width,rect.height);ctx.fillStyle=\"#e7e5e4\";ctx.fillRect(0,0,rect.width,rect.height);const v=view.current;ctx.save();ctx.translate(v.x,v.y);ctx.scale(v.scale,v.scale);ctx.fillStyle=\"#fff7ed\";ctx.fillRect(0,0,W,H);for(const l of layers.current){if(!l.visible)continue;ctx.save();ctx.globalAlpha=l.opacity;ctx.translate(l.x,l.y);ctx.scale(l.scale,l.scale);if(l.type===\"paint\")ctx.drawImage(l.canvas!,0,0);else if(l.type===\"image\"){const i=l.image!;const s=Math.max(W/i.width,H/i.height);ctx.drawImage(i,(W-i.width*s)/2,(H-i.height*s)/2,i.width*s,i.height*s)}else{ctx.fillStyle=l.color!;ctx.font=`800 ${l.fontSize}px ui-sans-serif,system-ui`;ctx.textAlign=\"center\";ctx.textBaseline=\"middle\";ctx.fillText(l.text!,0,0)}ctx.restore()}ctx.strokeStyle=\"#14532d\";ctx.lineWidth=3/v.scale;ctx.strokeRect(0,0,W,H);if(current()?.type===\"text\"&&tool===\"select\"){const l=current()!;ctx.save();ctx.translate(l.x,l.y);ctx.scale(l.scale,l.scale);ctx.font=`800 ${l.fontSize}px ui-sans-serif,system-ui`;const m=ctx.measureText(l.text!),bw=m.width+24,bh=l.fontSize!+20;ctx.strokeStyle=\"#2563eb\";ctx.setLineDash([7,5]);ctx.lineWidth=2/v.scale;ctx.strokeRect(-bw/2,-bh/2,bw,bh);ctx.restore()}ctx.restore()};\n useEffect(()=>{const fit=()=>{if(!stage.current)return;const r=stage.current.getBoundingClientRect(),s=Math.min((r.width-24)/W,(r.height-24)/H);view.current={scale:s,x:(r.width-W*s)/2,y:(r.height-H*s)/2};render()};fit();addEventListener(\"resize\",fit);return()=>removeEventListener(\"resize\",fit)},[]);\n useEffect(render,[tick,active,tool,color,size]);\n\n const local=(p:{x:number,y:number})=>{const r=display.current!.getBoundingClientRect(),v=view.current;return{x:(p.x-r.left-v.x)/v.scale,y:(p.y-r.top-v.y)/v.scale}};\n const distance=(a:any,b:any)=>Math.hypot(a.x-b.x,a.y-b.y),mid=(a:any,b:any)=>({x:(a.x+b.x)/2,y:(a.y+b.y)/2});\n const hitText=(p:{x:number,y:number})=>[...layers.current].reverse().find(l=>{if(l.type!==\"text\"||!l.visible)return false;const ctx=display.current!.getContext(\"2d\")!;ctx.font=`800 ${l.fontSize}px sans-serif`;return Math.abs((p.x-l.x)/l.scale){e.preventDefault();display.current!.setPointerCapture(e.pointerId);pointers.current.set(e.pointerId,{x:e.clientX,y:e.clientY});if(pointers.current.size===2){if(action.current?.kind===\"stroke\"){const before=history.current.pop();if(before)restore(before)}const [a,b]=[...pointers.current.values()];action.current={kind:\"gesture\",distance:distance(a,b),mid:mid(a,b),view:{...view.current}};return}\n const p=local({x:e.clientX,y:e.clientY});if(tool===\"pan\"){action.current={kind:\"pan\",start:{x:e.clientX,y:e.clientY},view:{...view.current}};return}\n if(tool===\"select\"){const l=hitText(p);if(l){remember();setActive(l.id);action.current={kind:\"move\",id:l.id,start:p,x:l.x,y:l.y}}return}\n const l=current();if(!l||l.type!==\"paint\"){setStatus(\"Choose a drawing layer to use the brush.\");return}remember();action.current={kind:\"stroke\",last:p,layer:l};};\n const move=(e:React.PointerEvent)=>{if(!pointers.current.has(e.pointerId))return;e.preventDefault();pointers.current.set(e.pointerId,{x:e.clientX,y:e.clientY});const a=action.current;if(!a)return;if(a.kind===\"gesture\"&&pointers.current.size>=2){const [p1,p2]=[...pointers.current.values()],m=mid(p1,p2),scale=clamp(a.view.scale*distance(p1,p2)/a.distance,.35,6);const docX=(a.mid.x-display.current!.getBoundingClientRect().left-a.view.x)/a.view.scale,docY=(a.mid.y-display.current!.getBoundingClientRect().top-a.view.y)/a.view.scale;view.current={scale,x:m.x-display.current!.getBoundingClientRect().left-docX*scale,y:m.y-display.current!.getBoundingClientRect().top-docY*scale};render();return}\n if(a.kind===\"pan\"){view.current.x=a.view.x+e.clientX-a.start.x;view.current.y=a.view.y+e.clientY-a.start.y;render();return}\n const p=local({x:e.clientX,y:e.clientY});if(a.kind===\"move\"){const l=layers.current.find(x=>x.id===a.id)!;l.x=a.x+p.x-a.start.x;l.y=a.y+p.y-a.start.y;render();return}\n if(a.kind===\"stroke\"){const ctx=a.layer.canvas.getContext(\"2d\");ctx.lineCap=\"round\";ctx.lineJoin=\"round\";ctx.lineWidth=size;ctx.strokeStyle=color;ctx.globalCompositeOperation=tool===\"erase\"?\"destination-out\":\"source-over\";ctx.beginPath();ctx.moveTo(a.last.x,a.last.y);ctx.lineTo(p.x,p.y);ctx.stroke();ctx.globalCompositeOperation=\"source-over\";a.last=p;render()}};\n const up=(e:React.PointerEvent)=>{pointers.current.delete(e.pointerId);if(action.current?.kind===\"gesture\"&&pointers.current.size<2)action.current=null;else if(pointers.current.size===0){action.current=null;rerender()}};\n const wheel=(e:React.WheelEvent)=>{e.preventDefault();const r=display.current!.getBoundingClientRect(),v=view.current,f=Math.exp(-e.deltaY*.001),s=clamp(v.scale*f,.35,6),dx=(e.clientX-r.left-v.x)/v.scale,dy=(e.clientY-r.top-v.y)/v.scale;view.current={scale:s,x:e.clientX-r.left-dx*s,y:e.clientY-r.top-dy*s};render()};\n\n const upload=async(f?:File)=>{if(!f)return;remember();const src=await fileUrl(f),image=await loadImage(src),l:Layer={id:uid(),name:f.name||\"Picture\",type:\"image\",visible:true,opacity:1,image,x:0,y:0,scale:1};layers.current.push(l);setActive(l.id);setTool(\"pan\");rerender()};\n const addPaint=()=>{remember();const l:Layer={id:uid(),name:`Drawing ${layers.current.filter(x=>x.type===\"paint\").length+1}`,type:\"paint\",visible:true,opacity:1,canvas:makeCanvas(),x:0,y:0,scale:1};layers.current.push(l);setActive(l.id);setTool(\"draw\");rerender()};\n const addText=()=>{const text=prompt(\"What should your ad say?\");if(!text)return;remember();const l:Layer={id:uid(),name:text.slice(0,18),type:\"text\",visible:true,opacity:1,text,color,fontSize:42,x:W/2,y:H/2,scale:1};layers.current.push(l);setActive(l.id);setTool(\"select\");rerender()};\n const mutate=(fn:()=>void)=>{remember();fn();rerender()};\n const remove=(id:string)=>{if(layers.current.length===1)return;mutate(()=>{layers.current=layers.current.filter(l=>l.id!==id);if(active===id)setActive(layers.current.at(-1)!.id)})};\n const shift=(id:string,d:number)=>mutate(()=>{const i=layers.current.findIndex(l=>l.id===id),j=clamp(i+d,0,layers.current.length-1);[layers.current[i],layers.current[j]]=[layers.current[j],layers.current[i]]});\n const fit=()=>{if(!stage.current)return;const r=stage.current.getBoundingClientRect(),s=Math.min((r.width-24)/W,(r.height-24)/H);view.current={scale:s,x:(r.width-W*s)/2,y:(r.height-H*s)/2};render()};\n\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=()=>{setAudio(new Blob(chunks.current,{type:mr.mimeType}));setRecording(false);setStatus(\"Voiceover saved.\");stream.getTracks().forEach(t=>t.stop())};mr.start();setRecording(true);setStatus(\"Recording… tap again to stop.\")}catch{setStatus(\"Allow microphone access to record the voiceover.\")}};\n const finish=async()=>{if(!audio){setStatus(\"Record a voiceover before saving.\");return}const c=makeCanvas(),ctx=c.getContext(\"2d\")!;ctx.fillStyle=\"#fff7ed\";ctx.fillRect(0,0,W,H);for(const l of layers.current){if(!l.visible)continue;ctx.save();ctx.globalAlpha=l.opacity;ctx.translate(l.x,l.y);ctx.scale(l.scale,l.scale);if(l.type===\"paint\")ctx.drawImage(l.canvas!,0,0);else if(l.type===\"image\"){const i=l.image!,s=Math.max(W/i.width,H/i.height);ctx.drawImage(i,(W-i.width*s)/2,(H-i.height*s)/2,i.width*s,i.height*s)}else{ctx.fillStyle=l.color!;ctx.font=`800 ${l.fontSize}px sans-serif`;ctx.textAlign=\"center\";ctx.textBaseline=\"middle\";ctx.fillText(l.text!,0,0)}ctx.restore()}c.toBlob(image=>image&&onReady({image,audio,name:\"My homemade ad\"}),\"image/png\")};\n\n return

Ad Hoc Studio

\n {([\"select\",\"draw\",\"erase\",\"pan\"] as const).map(t=>)}\n Color{setColor(e.target.value);const l=current();if(l?.type===\"text\")mutate(()=>l.color=e.target.value)}} className=\"block w-full h-7\"/>\n Size {size}setSize(+e.target.value)} className=\"block w-full\"/>\n

Layers

Pictureupload(e.target.files?.[0])} className=\"hidden\"/>

{[...layers.current].reverse().map(l=>

setActive(l.id)} className={`p-2 rounded-xl border-2 ${active===l.id?\"border-blue-500 bg-blue-50\":\"border-stone-200 bg-white\"}`}>

{l.type===\"text\"?\"T \":\"\"}{l.name}

{l.type===\"text\"&&active===l.id&&

mutate(()=>{l.text=e.target.value;l.name=e.target.value.slice(0,18)})} className=\"w-full border rounded p-1\"/>Text sizemutate(()=>l.fontSize=+e.target.value)} className=\"w-full\"/>

}

)}

\n \n

;\n}\n","deleted",false,"label",[57,35],"frontend",{"_33":71,"_13":57,"_36":39,"_38":-5,"_40":41,"_42":72,"_44":45,"_46":73,"_17":64,"_49":74,"_51":-5,"_53":54,"_55":-5,"_68":75,"_18":76},{"_33":60,"_13":61,"_36":62,"_38":-5,"_40":41,"_42":48,"_44":45,"_46":63,"_17":64,"_49":65,"_51":66,"_53":54,"_55":67,"_68":69,"_18":70},"7e0feeb3-a0dc-4a65-8ecf-80bc3b86a5a8","index.ts","15442e06-a499-11f1-bb0a-1607ee4eb77e",["D",1788111281883],0,"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;","adhoc","children",[],[61],"94e889de-6baf-4683-8fa1-9c6668099c99",2,["D",1788111353105],"directory",[77,78,79],[57],{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":96,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":97,"_18":98},{"_33":88,"_13":89,"_36":90,"_38":39,"_40":41,"_42":91,"_44":45,"_46":92,"_17":83,"_49":50,"_51":93,"_53":54,"_55":-5,"_68":94,"_18":95},{"_33":80,"_13":81,"_36":82,"_38":39,"_40":41,"_42":83,"_44":45,"_46":84,"_17":48,"_49":50,"_51":85,"_53":54,"_55":-5,"_68":86,"_18":87},"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}",[],[57,81],"eaeb7572-f9c0-48d8-ae25-1a9c1ea72537","index.tsx","43411f80-a499-11f1-83a7-1607ee4eb77e",9,["D",1788113085512],"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\";\nimport { EnhancedAdStudio } from \"./EnhancedAdStudio.tsx\";\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.

Next drop

{FRUITS[next].label}

{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 {saveAd(a);setAd(a);setEditing(false)}}/>;return setEditing(true)}/>}\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[57,89],["D",1788113126244],[],[57,35],"0426f079-e321-4531-bc07-75efda77badc",["D",1788111281845],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Make an ad, record it, then play a fruit drop game","imageUrl","userId","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_152":148},"org",{"_11":12,"_146":-5,"_147":148,"_109":110,"_149":150,"_151":54},"branch",{"_17":43,"_13":16,"_33":41,"_138":99,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":99,"_13":14,"_46":197,"_101":-5,"_102":54,"_103":104,"_105":104,"_106":107,"_108":-5,"_109":110,"_111":62,"_112":45,"_113":-5,"_114":-5,"_115":64,"_116":117,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":198,"_133":199,"_135":200,"_137":54},[182,186],"files",[182,183,184,185,186],"counts",{"_173":64,"_174":48,"_175":64,"_32":176,"_177":178},[],{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":172},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[57,35],"pulls","branches","forks",{"_179":64,"_181":64},"connections",{"_179":64,"_180":64},"count","unfilledCount","emptyCount",{"_33":71,"_13":57,"_36":39,"_38":-5,"_40":41,"_42":72,"_44":45,"_46":73,"_17":64,"_49":74,"_51":-5,"_53":54,"_55":-5,"_68":195,"_18":196},{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":96,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":193,"_18":194},{"_33":88,"_13":89,"_36":90,"_38":39,"_40":41,"_42":91,"_44":45,"_46":92,"_17":83,"_49":50,"_51":93,"_53":54,"_55":-5,"_68":191,"_18":192},{"_33":80,"_13":81,"_36":82,"_38":39,"_40":41,"_42":83,"_44":45,"_46":84,"_17":48,"_49":50,"_51":85,"_53":54,"_55":-5,"_68":189,"_18":190},{"_33":60,"_13":61,"_36":62,"_38":-5,"_40":41,"_42":48,"_44":45,"_46":63,"_17":64,"_49":65,"_51":66,"_53":54,"_55":67,"_68":187,"_18":188},[],[61],[],[57,81],[],[57,89],[],[57,35],[183,184,185],[57],["D",1788111281845],{"_11":12,"_152":148},{"_11":12,"_146":-5,"_147":148,"_109":110,"_149":150,"_151":54},{"_17":43,"_13":16,"_33":41,"_138":99,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"ctx",{"_131":-5,"_169":234,"_235":236,"_237":238,"_239":54,"_240":54,"_241":54,"_242":45,"_243":-5,"_244":-7,"_245":-7,"_246":64,"_247":54,"_248":54,"_249":-5,"_250":54,"_251":54,"_252":54,"_253":-5},"ENV",{"_205":206,"_207":208,"_209":16,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]