[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":107,"_108":109},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","pchinjr","name","watermelon-ad-drop","path","frontend/index.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":34,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/pchinjr/watermelon-ad-drop/code/frontend/index.tsx","extension","id","eaeb7572-f9c0-48d8-ae25-1a9c1ea72537","index.tsx","fileId","43411f80-a499-11f1-83a7-1607ee4eb77e","parentId","9f7b7442-66a8-4865-89e5-d2659e84e998","branchId","595b4766-30e6-4963-b8e5-101294236d9e","branchVersion",9,"latest",true,"createdAt",["D",1788113085512],"version",4,"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\";\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","deleted",false,"label",[47,24],"frontend","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","15442e06-a499-11f1-bb0a-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_105":101},"org",{"_9":10,"_99":-5,"_100":101,"_58":59,"_102":103,"_104":44},"branch",{"_37":89,"_11":90,"_22":30,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":12,"_98":10},"isOwned",10,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_139":140,"_141":142,"_143":144,"_145":44,"_146":44,"_147":44,"_148":34,"_149":-5,"_150":-7,"_151":-7,"_152":66,"_153":44,"_154":44,"_155":-5,"_156":44,"_157":44,"_158":44,"_159":-5},"ENV",{"_110":111,"_112":113,"_114":90,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]