https://friends-website-nu.vercel.app/_next/static/chunks/app/page…?dpl=dpl_EFib5EQuEsjp8XYezsG2YhMtwRSP

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[974],{1402:(e,t,r)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),!function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{default:function(){return v},handleClientScriptLoad:function(){return m},initScriptLoader:function(){return p}});let n=r(8140),a=r(9417),i=r(5155),o=n._(r(7650)),l=a._(r(2115)),s=r(2073),c=r(4681),d=r(4853),u=r(9001),h=new Map,f=new Set,g=e=>{let{src:t,id:r,onLoad:n=()=>{},onReady:a=null,dangerouslySetInnerHTML:i,children:l="",strategy:s="afterInteractive",onError:d,stylesheets:u}=e,g=r||t;if(g&&f.has(g))return;if(h.has(t)){f.add(g),h.get(t).then(n,d);return}let m=()=>{a&&a(),f.add(g)},p=document.createElement("script"),w=new Promise((e,t)=>{p.addEventListener("load",function(t){e(),n&&n.call(this,t),m()}),p.addEventListener("error",function(e){t(e)})}).catch(function(e){d&&d(e)});i?(p.innerHTML=i.__html||"",m()):l?(p.textContent="string"==typeof l?l:Array.isArray(l)?l.join(""):"",m()):t&&(p.src=t,h.set(t,w)),(0,c.setAttributesFromProps)(p,e),"worker"===s&&p.setAttribute("type","text/partytown"),p.setAttribute("data-nscript",s),u&&(e=>{if(o.default.preinit)return e.forEach(e=>{o.default.preinit(e,{as:"style"})});{let t=document.head;e.forEach(e=>{let r=document.createElement("link");r.type="text/css",r.rel="stylesheet",r.href=e,t.appendChild(r)})}})(u),document.body.appendChild(p)};function m(e){let{strategy:t="afterInteractive"}=e;"lazyOnload"===t?window.addEventListener("load",()=>{(0,d.requestIdleCallback)(()=>g(e))}):g(e)}function p(e){e.forEach(m),[...document.querySelectorAll('[data-nscript="beforeInteractive"]'),...document.querySelectorAll('[data-nscript="beforePageRender"]')].forEach(e=>{let t=e.id||e.getAttribute("src");f.add(t)})}function w(e){let{id:t,src:r="",onLoad:n=()=>{},onReady:a=null,strategy:c="afterInteractive",onError:h,stylesheets:m,...p}=e,{updateScripts:w,scripts:v,getIsSsr:x,appDir:b,nonce:y}=(0,l.useContext)(s.HeadManagerContext);y=p.nonce||y;let j=(0,l.useRef)(!1);(0,l.useEffect)(()=>{let e=t||r;j.current||(a&&e&&f.has(e)&&a(),j.current=!0)},[a,t,r]);let M=(0,l.useRef)(!1);if((0,l.useEffect)(()=>{if(!M.current){if("afterInteractive"===c)g(e);else"lazyOnload"===c&&("complete"===document.readyState?(0,d.requestIdleCallback)(()=>g(e)):window.addEventListener("load",()=>{(0,d.requestIdleCallback)(()=>g(e))}));M.current=!0}},[e,c]),("beforeInteractive"===c||"worker"===c)&&(w?(v[c]=(v[c]||[]).concat([{id:t,src:r,onLoad:n,onReady:a,onError:h,...p,nonce:y}]),w(v)):x&&x()?f.add(t||r):x&&!x()&&g({...e,nonce:y})),b){if(m&&m.forEach(e=>{o.default.preinit(e,{as:"style"})}),"beforeInteractive"===c)if(!r)return p.dangerouslySetInnerHTML&&(p.children=p.dangerouslySetInnerHTML.__html,delete p.dangerouslySetInnerHTML),(0,i.jsx)("script",{nonce:y,dangerouslySetInnerHTML:{__html:"(self.__next_s=self.__next_s||[]).push("+(0,u.htmlEscapeJsonString)(JSON.stringify([0,{...p,id:t}]))+")"}});else return o.default.preload(r,p.integrity?{as:"script",integrity:p.integrity,nonce:y,crossOrigin:p.crossOrigin}:{as:"script",nonce:y,crossOrigin:p.crossOrigin}),(0,i.jsx)("script",{nonce:y,dangerouslySetInnerHTML:{__html:"(self.__next_s=self.__next_s||[]).push("+(0,u.htmlEscapeJsonString)(JSON.stringify([r,{...p,id:t}]))+")"}});"afterInteractive"===c&&r&&o.default.preload(r,p.integrity?{as:"script",integrity:p.integrity,nonce:y,crossOrigin:p.crossOrigin}:{as:"script",nonce:y,crossOrigin:p.crossOrigin})}return null}Object.defineProperty(w,"__nextScript",{value:!0});let v=w;("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},1717:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>x});var n=r(5155),a=r(5239),i=r(2115);let o=(0,i.forwardRef)(function(e,t){let{color:a="#ff2d2d",radius:o=14,density:l=40,className:s,cursorImage:c="/spray-big.png"}=e,d=(0,i.useRef)(null),u=(0,i.useRef)(null),h=(0,i.useRef)(null),f=(0,i.useRef)(null),g=(0,i.useRef)(!1),m=(0,i.useRef)({x:0,y:0}),p=(0,i.useRef)({x:0,y:0}),w=(0,i.useRef)(null),v=(0,i.useRef)(null),x=(0,i.useRef)({x:0,y:0,time:0}),b=(0,i.useRef)(null),y=e=>{let t=e.replace("#","");return{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16)}},j=()=>{let e=d.current;if(!e)return;let t=window.devicePixelRatio||1,r=Math.max(1,Math.round(e.clientWidth)),n=Math.max(1,Math.round(e.clientHeight)),a=r*t,i=n*t;if(e.width!==a||e.height!==i){var o,l;e.width=a,e.height=i;let r=e.getContext("2d");r.setTransform(1,0,0,1,0,0),r.scale(t,t),null==(l=h.current)||null==(o=l.resetDrips)||o.call(l)}};(0,i.useEffect)(()=>{let e=d.current;j();let t=new ResizeObserver(()=>{j()});t.observe(e),e.parentElement&&t.observe(e.parentElement);let r=()=>j();

1return window.addEventListener("resize",r),w.current=new Audio("/spray.mp3"),w.current.loop=!0,w.current.volume=.15,v.current=new Audio("/can.mp3"),v.current.volume=.2,()=>{var e,n;t.disconnect(),window.removeEventListener("resize",r),null==(e=w.current)||e.pause(),w.current=null,null==(n=v.current)||n.pause(),v.current=null,b.current&&clearTimeout(b.current)}},[]),(0,i.useEffect)(()=>{let e=()=>{};return(async()=>{let[{Drawer:t},{Spray:n}]=await Promise.all([r.e(521).then(r.t.bind(r,9521,23)),r.e(36).then(r.t.bind(r,5036,23))]);if(!d.current)return;let i=new t(d.current),s=y(a),c=new n({canvas:d.current,color:{r:s.r,g:s.g,b:s.b},size:Math.max(1,o),splatterAmount:Math.max(8,Math.round(.4*l)),splatterRadius:Math.max(6,1.5*o),dripper:!0,dripThreshold:146,dripSpeed:1.55,dripLength:105});u.current=i,h.current=c;let j=e=>{var t,r;if(!d.current)return;let n=d.current.getBoundingClientRect(),a=e.clientX-n.left,i=e.clientY-n.top;g.current=!0,null==(t=w.current)||t.play().catch(()=>{}),m.current={x:a,y:i},p.current={x:a,y:i},x.current={x:a,y:i,time:performance.now()},null==(r=h.current)||r.draw(u.current,{x:a,y:i}),k()},M=e=>{let t,r;if(!d.current)return;let n=d.current.getBoundingClientRect(),a="function"==typeof e.getCoalescedEvents?e.getCoalescedEvents():null;if(a&&a.length){let e=a[a.length-1];t=e.clientX-n.left,r=e.clientY-n.top}else t=e.clientX-n.left,r=e.clientY-n.top;if(m.current={x:t,y:r},!g.current){let e=performance.now(),n=e-x.current.time;n>0&&Math.hypot(t-x.current.x,r-x.current.y)/n>6&&v.current&&(v.current.paused&&(v.current.currentTime=0,v.current.play().catch(()=>{})),b.current&&clearTimeout(b.current),b.current=setTimeout(()=>{var e;null==(e=v.current)||e.pause(),v.current&&(v.current.currentTime=0)},500)),x.current={x:t,y:r,time:e}}},E=()=>{var e;g.current=!1,null==(e=w.current)||e.pause(),w.current&&(w.current.currentTime=0)};function k(){if(!h.current||!u.current)return;let e=!1;if(g.current){let t=m.current,r=p.current,n=t.x-r.x,a=t.y-r.y,i=Math.hypot(n,a);if(i>0){let o=Math.ceil(i/2.5);for(let t=1;t<=o;t++){let i=r.x+n*t/o,l=r.y+a*t/o;e=h.current.draw(u.current,{x:i,y:l})||e}p.current={x:t.x,y:t.y}}else e=h.current.draw(u.current,t)||e}else e=h.current.draw(u.current)||e;g.current||e?f.current=requestAnimationFrame(k):f.current=null}d.current.addEventListener("pointerdown",j),window.addEventListener("pointermove",M),window.addEventListener("pointerup",E),window.addEventListener("pointercancel",E),k(),e=()=>{var e;f.current&&cancelAnimationFrame(f.current),null==(e=d.current)||e.removeEventListener("pointerdown",j),window.removeEventListener("pointermove",M),window.removeEventListener("pointerup",E),window.removeEventListener("pointercancel",E)}})(),()=>e()},[a,o,l]);let M=async e=>{var t,r;let n=d.current,a=null!=(t=null==e?void 0:e.format)?t:"image/png";if(null==e?void 0:e.fillGreenBackground){let t=document.createElement("canvas");t.width=n.width,t.height=n.height;let i=t.getContext("2d");return i.fillStyle=null!=(r=e.bgColor)?r:"#00FF22",i.fillRect(0,0,t.width,t.height),i.drawImage(n,0,0),new Promise((e,r)=>t.toBlob(t=>t?e(t):r(Error("toBlob failed")),a))}return new Promise((e,t)=>n.toBlob(r=>r?e(r):t(Error("toBlob failed")),a,.7))},E=async e=>{var t;let r=null!=(t=e.format)?t:"image/png",n=d.current,a=document.createElement("canvas");a.width=n.width,a.height=n.height;let i=a.getContext("2d"),o=await new Promise((t,r)=>{let n=new Image;n.crossOrigin="anonymous",n.onload=()=>t(n),n.onerror=r,n.src=e.baseImageSrc});return i.drawImage(o,0,0,a.width,a.height),i.drawImage(n,0,0),new Promise((e,t)=>a.toBlob(r=>r?e(r):t(Error("toBlob failed")),r,.7))},k=async e=>{var t,r,n,a,i;let o=null!=(t=e.format)?t:"image/png",l=null!=(r=e.chromaColor)?r:"#00FF22",s=null!=(n=e.tolerance)?n:80,c=null!=(a=e.fit)?a:"top-fill",u=null!=(i=e.fillColor)?i:"#FFFFFF",h=d.current,f=window.devicePixelRatio||1,g=h.getBoundingClientRect(),m=Math.max(1,g.width),p=Math.max(1,g.height),w=document.createElement("canvas");w.width=Math.max(1,Math.round(m*f)),w.height=Math.max(1,Math.round(p*f));let v=w.getContext("2d");v.setTransform(1,0,0,1,0,0),v.scale(f,f);let x=await new Promise((t,r)=>{let n=new Image;n.crossOrigin="anonymous",n.onload=()=>t(n),n.onerror=r,n.src=e.visibleBase.src}),b=e.visibleBase.rectCss.x,j=e.visibleBase.rectCss.y,M=e.visibleBase.rectCss.width,E=e.visibleBase.rectCss.height,k=x.naturalWi

1dth||x.width,C=x.naturalHeight||x.height,N=Math.min(M/k,E/C),S=k*N,I=C*N,R=(M-S)*.5,_=(E-I)*.5,L=b-g.left+R,P=j-g.top+_;v.drawImage(x,L,P,S,I),v.drawImage(h,0,0,m,p);let O=await new Promise((t,r)=>{let n=new Image;n.crossOrigin="anonymous",n.onload=()=>t(n),n.onerror=r,n.src=e.bgImageSrc}),F=document.createElement("canvas"),z=O.naturalWidth||O.width,A=O.naturalHeight||O.height;F.width=z,F.height=A;let B=F.getContext("2d");B.drawImage(O,0,0,z,A);let T=w.width,H=w.height,D=document.createElement("canvas");D.width=z,D.height=A;let W=D.getContext("2d");if(W.clearRect(0,0,z,A),e.targetNatRect)W.drawImage(w,0,0,T,H,e.targetNatRect.x,e.targetNatRect.y,e.targetNatRect.width,e.targetNatRect.height);else{let e=z,t=A,r=0,n=0;if("fill"===c)e=z,t=A;else if("top-fill"===c){let a=z/T*1.15;e=Math.round(T*a),t=Math.round(H*a),r=Math.floor((z-e)/2),n=0}else{let a="contain"===c?Math.min(z/T,A/H):Math.max(z/T,A/H);e=Math.round(T*a),t=Math.round(H*a),r=Math.floor((z-e)/2),n=Math.floor((A-t)/2)}"top-fill"===c&&(W.fillStyle=u,W.fillRect(0,0,z,A)),W.drawImage(w,0,0,T,H,r,n,e,t)}let q=B.getImageData(0,0,z,A),V=q.data,G=W.getImageData(0,0,z,A).data,J=y(l),$=0,X=0,Y=z,K=A;e.targetNatRect&&($=Math.max(0,e.targetNatRect.x-4),X=Math.max(0,e.targetNatRect.y-4),Y=Math.min(z,e.targetNatRect.x+e.targetNatRect.width+4)-$,K=Math.min(A,e.targetNatRect.y+e.targetNatRect.height+4)-X);for(let e=0;e<A;e++)for(let t=0;t<z;t++){let r=(e*z+t)*4;if(!(t>=$&&t<$+Y&&e>=X&&e<X+K))continue;let n=V[r],a=V[r+1],i=V[r+2];Math.hypot(n-J.r,a-J.g,i-J.b)<=s&&(V[r]=G[r],V[r+1]=G[r+1],V[r+2]=G[r+2],V[r+3]=G[r+3])}return B.putImageData(q,0,0),new Promise((e,t)=>F.toBlob(r=>r?e(r):t(Error("toBlob failed")),o,.7))},C=()=>{var e,t;let r=d.current;if(!r)return;let n=r.getContext("2d");n&&(n.clearRect(0,0,r.width,r.height),null==(t=h.current)||null==(e=t.resetDrips)||e.call(t))};return(0,i.useImperativeHandle)(t,()=>({exportOverlayBlob:M,exportCompositeBlob:E,exportChromaKeyFromVisible:k,clearCanvas:C})),(0,n.jsx)("div",{className:s,style:{width:"100%",height:"100%",overflow:"hidden"},children:(0,n.jsx)("canvas",{ref:d,style:{touchAction:"none",display:"block",width:"100%",height:"100%",background:"transparent",cursor:"url('".concat(c,"') 32 32, crosshair")},"aria-label":"Spray paint canvas"})})});var l=r(63),s=r(1834),c=r(4269);function d(e){let{className:t,type:r,...a}=e;return(0,n.jsx)("input",{type:r,"data-slot":"input",className:(0,c.cn)("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm","focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",t),...a})}var u=r(3998),h=r(7138);async function f(e){let{blob:t,username:r,color:n,mime:a="image/png"}=e,i=new FormData,o=new File([t],"artwork.".concat("image/webp"===a?"webp":"png"),{type:a});i.append("file",o),i.append("username",r),i.append("color",n);let l=await fetch("/api/save-artwork",{method:"POST",body:i});if(!l.ok){let e=await l.text().catch(()=>"");throw Error("Supabase save failed: ".concat(l.status," ").concat(e))}return l.json()}var g=r(8720),m=r(1402),p=r.n(m);function w(){var e;null==(e=window.AppdropFollowWidget)||e.bind(document)}function v(){return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:"fixed left-1/2 top-4 z-40 -translate-x-1/2 md:top-6",children:(0,n.jsx)("div",{"data-appdrop-follow-widget":!0,"data-appdrop-creator":"marcgmbh","data-appdrop-creator-name":"Marc","data-appdrop-source":"vandalizefriend"})}),(0,n.jsx)(p(),{src:"https://www.appdrop.com/appdrop-follow-widget.js",strategy:"afterInteractive",onLoad:w,onReady:w})]})}function x(){let[e,t]=(0,i.useState)("#ff2d2d"),[r,c]=(0,i.useState)(!1),[m,p]=(0,i.useState)(!1),[w,x]=(0,i.useState)(!1),[b,y]=(0,i.useState)(!1),[j,M]=(0,i.useState)(""),[E,k]=(0,i.useState)({left:0,top:0,width:0,height:0}),[C,N]=(0,i.useState)(!1),[S,I]=(0,i.useState)(!1),[R,_]=(0,i.useState)("cover"),[L,P]=(0,i.useState)(1),[O,F]=(0,i.useState)(!1),z=(0,i.useRef)(null),A=(0,i.useRef)(null),B=(0,i.useRef)(null),T=(0,i.useRef)(null),H=(0,l.useRouter)(),D=async()=>{let e=document.createElement("img");e.src="/bg.png",await new Promise(t=>{e.onload=t});let t=document.createElement("canvas");t.width=e.width,t.height=e.height;let r=t.getContext("2d");r.drawImage(e,0,0);let n=r.getImageData(0,0,t.width,t.height).data,a=t.width,i=t.height,o=0,l=0;for(let e=0;e<t.height;e++)for(let r=0;r<t.width;r++){let s=(e*t.width+r)*4,c=n[s],d=n[s+1],u=n[s+2];d>

1200&&c<100&&u<100&&(a=Math.min(a,r),i=Math.min(i,e),o=Math.max(o,r),l=Math.max(l,e))}return a>=t.width||i>=t.height?null:{x:a,y:i,width:o-a+1,height:l-i+1,natW:e.width,natH:e.height}},W=async()=>{var e,t;let r=B.current;if(!r)return;let n=r.getBoundingClientRect(),a=n.width||(null==(e=window.visualViewport)?void 0:e.width)||window.innerWidth,i=n.height||(null==(t=window.visualViewport)?void 0:t.height)||window.innerHeight,o=await D();if(!o||o.width<=0||o.height<=0)return void console.warn("Green screen not detected");T.current={x:o.x,y:o.y,width:o.width,height:o.height};let l=Math.max(a/o.natW,i/o.natH),s=Math.min(a/o.natW,i/o.natH),c=o.width*l>a||o.height*l>i;_(c?"contain":"cover");let d=c?1.7:1;P(d);let u=(c?s:l)*d,h=o.natW*u,f=o.natH*u,g=(a-h)/2;c&&(g+=.03*a),k({left:Math.round(g+o.x*u),top:Math.round((i-f)/2+o.y*u),width:Math.round(o.width*u),height:Math.round(o.height*u)})};(0,i.useEffect)(()=>{let e=()=>{F(window.innerWidth<768)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),(0,i.useEffect)(()=>{var e;let t=()=>W();return W(),window.addEventListener("resize",t),window.addEventListener("orientationchange",t),null==(e=window.visualViewport)||e.addEventListener("resize",t),()=>{var e;window.removeEventListener("resize",t),window.removeEventListener("orientationchange",t),null==(e=window.visualViewport)||e.removeEventListener("resize",t)}},[]);let q=["#ff2d2d","#2dff2d","#ff8c2d","#000000"],V=async function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"top-fill",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";if(z.current&&A.current&&T.current){c(!0);try{let n=A.current.getBoundingClientRect(),a=await z.current.exportOverlayBlob({format:"image/png"}),i=await z.current.exportCompositeBlob({baseImageSrc:"/friend.png",format:"image/png"}),o=await z.current.exportChromaKeyFromVisible({bgImageSrc:"/bg.png",visibleBase:{src:"/friend.png",rectCss:{x:n.left,y:n.top,width:n.width,height:n.height}},targetNatRect:T.current,fit:t,fillColor:"#FFFFFF",chromaColor:"#00FF22",tolerance:200,format:"image/png"});p(!0);let l=new FormData;l.append("file",o,"artwork.png");let s=await fetch("/api/moderate-image",{method:"POST",body:l});if(!s.ok)throw p(!1),Error("Moderation check failed");let d=await s.json();if(p(!1),console.log("Moderation result:",d),!d.safe){let e=d.reason||"Image contains inappropriate content";g.oR.error(e),c(!1);return}let u="";try{let t=await f({blob:o,username:r.trim(),color:e,mime:"image/png"});if(console.log("Saved to Supabase:",t),!(u=t.id))throw Error("No ID returned from upload")}catch(e){console.error("Supabase upload failed:",e),alert("Failed to upload to Supabase. Redirecting to gallery."),H.push("/gallery");return}await (0,h.hk)({id:"".concat(Date.now(),"-").concat(Math.random().toString(36).slice(2,8)),overlayBlob:a,compositeBlob:i,chromaKeyBlob:o,createdAt:new Date().toISOString(),color:e,username:r.trim()||"Anonymous"}),H.push("/artwork?id=".concat(u))}catch(e){console.error("Error saving artwork:",e),alert("Failed to save artwork. Please try again.")}finally{c(!1)}}},G=async()=>{x(!1),await V("cover",j),M("")};return(0,n.jsxs)("div",{className:"fixed inset-0",children:[(0,n.jsx)(v,{}),(0,n.jsxs)("div",{ref:B,className:"relative w-full h-full",style:{opacity:C&&S?1:0,transition:"opacity 0.2s"},children:[(0,n.jsx)(a.default,{src:"/bg.png",alt:"Subway poster background",fill:!0,priority:!0,sizes:"100vw",className:"pointer-events-none",style:{objectFit:R,objectPosition:"contain"===R?"46% center":"center",transform:1!==L?"scale(".concat(L,")"):void 0,transformOrigin:"contain"===R?"46% center":"center"},onLoad:()=>N(!0)}),(0,n.jsxs)("div",{ref:A,className:"absolute pointer-events-none",style:{left:E.left,top:E.top,width:E.width,height:E.height},children:[(0,n.jsx)(a.default,{src:"/friend.png",alt:"Friend",fill:!0,priority:!0,style:{objectFit:"cover",pointerEvents:"none",inset:"0px",scale:1.01},className:"z-0",onLoad:()=>I(!0)}),(0,n.jsx)(o,{ref:z,radius:O?2:5,density:O?100:90,color:e,cursorImage:"#ff2d2d"===e?"/red-cursor.png":"#2dff2d"===e?"/green-cursor.png":"#ff8c2d"===e?"/orange-cursor.png":"/black-cursor.png",className:"absolute inset-0 z-10 pointer-events-auto"},"".concat(Math.round(E.left),"-").concat(Math.round(E.top),"-").concat(Math.round(E.width),"x").concat(Math.round(E.height)))]})]}),(0,n.jsxs)("div",{className:"absolute md:top-1/2 md:-translate-y-1/2 md:left-4 md:flex-col bottom-4 left-4 flex flex-row md:animate-in md:slide-in-from-left duration-700",children:[q.map((r,a)=>{let i="#ff2d2d"===r?"red":"#2dff2d"===r?"green":"#ff8c2d"===r?"orange":"black";return(0,n.jsx)("button",{onClick:()=>t(r),className:"w-12 h-12 md:w-14 md:h-14 hover:scale-110 transition-transform ".concat(e===r?"scale-125":""," ").concat(a>0?"ml-2 md:ml-0 md:mt-3":""),style:{animation:"slideInFromLeft 0.7s ease-out ".concat(.1*a,"s both")},"aria-label":"Select ".concat(r," color"),children:(0,n.jsx)("img",{src:"/".concat(i,".png"),alt:"".concat(i," spray can"),className:"w-full h-full object-contain"})},r)}),(0,n.jsx)("button",{onClick:()=>y(!0),className:"w-12 h-12 md:w-14 md:h-14 ml-4 md:ml-0 md:mt-6 hover:scale-110 transition-transform flex items-center justify-center",style:{animation:"slideInFromLeft 0.7s ease-out ".concat(.1*q.length,"s both")},"aria-label":"Reset canvas",children:(0,n.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:"stroke-white md:stroke-black",children:[(0,n.jsx)("path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}),(0,n.jsx)("path",{d:"M21 3v5h-5"}),(0,n.jsx)("path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}),(0,n.jsx)("path",{d:"M3 21v-5h5"})]})})]}),(0,n.jsx)("div",{className:"absolute bottom-2  right-4 md:top-1/2 md:-translate-y-1/2 md:bottom-auto md:right-4",style:{animation:"slideInFromRight 0.7s ease-out both"},children:(0,n.jsxs)(s.lG,{open:w,onOpenChange:x,children:[(0,n.jsx)(s.zM,{asChild:!0,children:(0,n.jsx)("button",{disabled:r,className:"hover:scale-110 transition-transform disabled:opacity-50",children:(0,n.jsx)("img",{src:"/exit.png",alt:"Exit",className:"w-16 h-16 md:w-24 md:h-24 object-contain"})})}),(0,n.jsxs)(s.Cf,{className:"sm:max-w-[425px]",children:[(0,n.jsx)(s.c7,{children:(0,n.jsx)(s.L3,{children:"Sign the wall. What's your @?"})}),(0,n.jsx)("div",{className:"grid gap-4 py-4",children:(0,n.jsx)("div",{className:"grid grid-cols-4 items-center gap-4",children:(0,n.jsx)(d,{id:"username",value:j,onChange:e=>M(e.target.value),placeholder:"marcgmbh",className:"col-span-3",onKeyDown:e=>{"Enter"===e.key&&G()}})})}),(0,n.jsxs)(s.Es,{children:[(0,n.jsx)(u.$,{type:"button",variant:"outline",onClick:()=>x(!1),className:"text-black",children:"Cancel"}),(0,n.jsx)(u.$,{onClick:G,disabled:r||m,style:{backgroundColor:"#015826"},className:"text-gray-900 hover:opacity-90 text-white cursor-pointer",children:m?"Checking...":r?"Publishing...":"Post It"})]})]})]})}),(0,n.jsx)(s.lG,{open:b,onOpenChange:y,children:(0,n.jsxs)(s.Cf,{className:"sm:max-w-[425px]",children:[(0,n.jsxs)(s.c7,{children:[(0,n.jsx)(s.L3,{children:"Reset Canvas"}),(0,n.jsx)(s.rr,{children:"Are you sure? This will delete your current progress."})]}),(0,n.jsxs)(s.Es,{children:[(0,n.jsx)(u.$,{type:"button",variant:"outline",onClick:()=>y(!1),className:"text-black cursor-pointer",children:"Cancel"}),(0,n.jsx)(u.$,{onClick:()=>{var e;null==(e=z.current)||e.clearCanvas(),y(!1)},variant:"destructive",children:"Yes"})]})]})}),(m||r)&&(0,n.jsx)("div",{className:"fixed inset-0 z-50 flex items-center justify-center",style:{backgroundColor:"rgba(0, 0, 0, 0.2)"},children:(0,n.jsxs)("div",{className:"flex flex-col items-center gap-4",children:[(0,n.jsxs)("svg",{className:"animate-spin h-12 w-12 text-white",xmlns:"http://www.w3.more im org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[(0,n.jsx)("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),(0,n.jsx)("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),(0,n.jsx)("p",{className:"text-white text-xl",children:"Publishing"})]})})]})}},1834:(e,t,r)=>{"use strict";r.d(t,{Cf:()=>u,Es:()=>f,L3:()=>g,c7:()=>h,lG:()=>l,rr:()=>m,zM:()=>s});var n=r(5155);r(2115);

1var a=r(6405),i=r(5229),o=r(4269);function l(e){let{...t}=e;return(0,n.jsx)(a.bL,{"data-slot":"dialog",...t})}function s(e){let{...t}=e;return(0,n.jsx)(a.l9,{"data-slot":"dialog-trigger",...t})}function c(e){let{...t}=e;return(0,n.jsx)(a.ZL,{"data-slot":"dialog-portal",...t})}function d(e){let{className:t,...r}=e;return(0,n.jsx)(a.hJ,{"data-slot":"dialog-overlay",className:(0,o.cn)("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",t),...r})}function u(e){let{className:t,children:r,showCloseButton:l=!0,...s}=e;return(0,n.jsxs)(c,{"data-slot":"dialog-portal",children:[(0,n.jsx)(d,{}),(0,n.jsxs)(a.UC,{"data-slot":"dialog-content",className:(0,o.cn)("bg-black text-white font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:max-w-lg",t),...s,children:[r,l&&(0,n.jsxs)(a.bm,{"data-slot":"dialog-close",className:"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",children:[(0,n.jsx)(i.A,{}),(0,n.jsx)("span",{className:"sr-only",children:"Close"})]})]})]})}function h(e){let{className:t,...r}=e;return(0,n.jsx)("div",{"data-slot":"dialog-header",className:(0,o.cn)("flex flex-col gap-2 text-center sm:text-left",t),...r})}function f(e){let{className:t,...r}=e;return(0,n.jsx)("div",{"data-slot":"dialog-footer",className:(0,o.cn)("flex flex-col-reverse gap-2 sm:flex-row sm:justify-start",t),...r})}function g(e){let{className:t,...r}=e;return(0,n.jsx)(a.hE,{"data-slot":"dialog-title",className:(0,o.cn)("text-lg leading-none font-semibold",t),...r})}function m(e){let{className:t,...r}=e;return(0,n.jsx)(a.VY,{"data-slot":"dialog-description",className:(0,o.cn)("text-muted-foreground text-sm",t),...r})}},3998:(e,t,r)=>{"use strict";r.d(t,{$:()=>s});var n=r(5155);r(2115);var a=r(2467),i=r(3101),o=r(4269);let l=(0,i.F)("inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 has-[>svg]:px-3",sm:"h-8 gap-1.5 px-3 has-[>svg]:px-2.5",lg:"h-10 px-6 has-[>svg]:px-4",icon:"size-9"}},defaultVariants:{variant:"default",size:"default"}});function s(e){let{className:t,variant:r,size:i,asChild:s=!1,...c}=e,d=s?a.DX:"button";return(0,n.jsx)(d,{"data-slot":"button",className:(0,o.cn)(l({variant:r,size:i,className:t})),...c})}},4269:(e,t,r)=>{"use strict";r.d(t,{cn:()=>i});var n=r(2821),a=r(5889);function i(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return(0,a.QP)((0,n.$)(t))}},4853:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),!function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{cancelIdleCallback:function(){return n},requestIdleCallback:function(){return r}});let r="undefined"!=typeof self&&self.requestIdleCallback&&self.requestIdleCallback.bind(window)||function(e){let t=Date.now();return self.setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-t))}})},1)},n="undefined"!=typeof self&&self.cancelIdleCallback&&self.cancelIdleCallback.bind(window)||function(e){return clearTimeout(e)};("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esMo

1dule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},7138:(e,t,r)=>{"use strict";r.d(t,{Uj:()=>i,hk:()=>a,vS:()=>o});let n=()=>new Promise((e,t)=>{let r=indexedDB.open("SprayPaintApp",1);r.onerror=()=>t(r.error),r.onsuccess=()=>e(r.result),r.onupgradeneeded=()=>{let e=r.result;e.objectStoreNames.contains("images")||e.createObjectStore("images",{keyPath:"id"})}}),a=async e=>{let t=(await n()).transaction(["images"],"readwrite").objectStore("images");await t.add(e)},i=async()=>{let e=await n();return new Promise((t,r)=>{let n=e.transaction(["images"],"readonly").objectStore("images").getAll();n.onsuccess=()=>t(n.result),n.onerror=()=>r(n.error)})},o=async e=>{let t=await n();return new Promise((r,n)=>{let a=t.transaction(["images"],"readwrite").objectStore("images").delete(e);a.onsuccess=()=>r(),a.onerror=()=>n(a.error)})}},7676:(e,t,r)=>{Promise.resolve().then(r.bind(r,1717))},9001:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),!function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{ESCAPE_REGEX:function(){return n},htmlEscapeAttributeString:function(){return l},htmlEscapeJsonString:function(){return o}});let r={"&":"\\u0026",">":"\\u003e","<":"\\u003c","\u2028":"\\u2028","\u2029":"\\u2029"},n=/[&><\u2028\u2029]/g,a={"&":"&amp;",'"':"&quot;","'":"&#39;","<":"&lt;",">":"&gt;"},i=/[&"'<>]/g;function o(e){return e.replace(n,e=>r[e])}function l(e){return e.replace(i,e=>a[e])}}},e=>{e.O(0,[239,914,720,441,255,358],()=>e(e.s=7676)),_N_E=e.O()}]);