[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_105":106,"_107":108},"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/EnhancedAdStudio.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/EnhancedAdStudio.tsx","extension","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],"version",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",[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,"_104":100},"org",{"_9":10,"_98":-5,"_99":100,"_58":59,"_101":102,"_103":44},"branch",{"_37":32,"_11":89,"_22":30,"_90":48,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":12,"_97":10},"isOwned","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,"_138":139,"_140":141,"_142":143,"_144":44,"_145":44,"_146":44,"_147":34,"_148":-5,"_149":-7,"_150":-7,"_151":66,"_152":44,"_153":44,"_154":-5,"_155":44,"_156":44,"_157":44,"_158":-5},"ENV",{"_109":110,"_111":112,"_113":89,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137},"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"]