https://samgoddard.co.uk/_next/static/chunks/141.eea74e449aa9412d.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[141],{3659:(e,t,n)=>{n.d(t,{b:()=>s});var r=n(5853),l=n(4041),o=n(9193),i=n(7170);function a(e){let{media:t}=e,n=(0,o.nq)(),a=(0,l.useRef)(null),s=(0,l.useSyncExternalStore)(i.p,i.J,()=>!1),c=function(e){let t=(0,l.useCallback)(t=>{if(!e)return()=>{};let n=window.matchMedia(e);return n.addEventListener("change",t),()=>n.removeEventListener("change",t)},[e]);return(0,l.useSyncExternalStore)(t,()=>!e||window.matchMedia(e).matches,()=>!1)}(t),u=function(e){let[t,n]=(0,l.useState)(!1);return(0,l.useEffect)(()=>{var t;let r=null==(t=e.current)?void 0:t.parentElement;if(!r)return;let l=new IntersectionObserver(e=>{let[t]=e;return n(t.isIntersecting)},{rootMargin:"200px"});return l.observe(r),()=>l.disconnect()},[e]),t}(a),d=s&&c&&u;return(0,l.useEffect)(()=>{if(d)return void n.connect();let e=setTimeout(()=>n.disconnect(),1e4);return()=>clearTimeout(e)},[d,n]),(0,l.useEffect)(()=>()=>n.disconnect(),[n]),(0,r.jsx)("span",{ref:a,hidden:!0})}function s(e){let{children:t,media:n,...l}=e;return(0,r.jsxs)(o.bg,{...l,autoConnect:!1,children:[(0,r.jsx)(a,{media:n}),t]})}},5141:(e,t,n)=>{n.r(t),n.d(t,{HeroPaint:()=>p});var r=n(5853),l=n(4041),o=n(9193),i=n(8750),a=n(3659),s=n(4496);let c=n(6065).m,u=Math.min(c,6),d=2*Math.PI;function f(){let e=(0,l.useRef)(null),t=(0,l.useRef)(new Map),n=(0,l.useRef)(()=>{}),i=(0,o.QY)(),a=(0,o.jn)(),s=(0,o.Yy)(),f=(0,l.useRef)(i),p=(0,l.useRef)(a),h=(0,l.useRef)(s);return(0,l.useEffect)(()=>{f.current=i},[i]),(0,l.useEffect)(()=>{p.current=a},[a]),(0,l.useEffect)(()=>{h.current=s},[s]),(0,o.ML)(e=>{let{event:t}=e;"PAINT"!==t.type||document.hidden||n.current(t.points,t.color)}),(0,l.useEffect)(()=>{let r=e.current,l=null==r?void 0:r.parentElement;if(!r||!l)return;let o=r.getContext("2d");if(!o)return;let i=t.current,a=[],s=new Map,m=[],v=0,y=0,x=l.getBoundingClientRect(),g=null,w=null,E=!1,b=e=>{let t=s.get(e);if(void 0===t){t=a.length,s.set(e,t),a.push(e);for(let e=0;e<13;e++)m.push([])}return t},L=()=>{if(!(x=l.getBoundingClientRect()).width||!x.height||x.width===v&&x.height===y)return;v=x.width,y=x.height;let e=Math.min(window.devicePixelRatio||1,2);

1r.width=Math.round(v*e),r.height=Math.round(y*e),r.style.width="".concat(v,"px"),r.style.height="".concat(y,"px"),o.setTransform(e,0,0,e,0,0),E=!0,R()},M=()=>{null===w&&(w=requestAnimationFrame(()=>{w=null,x=l.getBoundingClientRect()}))},A=()=>{let e=performance.now(),t=E;for(let[n,r]of(E=!1,i)){let l=e-r.born;if(l>=6200){i.delete(n),t=!0;continue}let o=Math.max(1,Math.round((l<=5e3?1:1-(l-5e3)/1200)*12));o!==r.step&&(r.step=o,t=!0)}if(t){for(let e of m)e.length=0;for(let e of i.values())m[13*e.colorId+e.step].push(e.x,e.y);o.clearRect(0,0,v,y);for(let e=0;e<m.length;e++){let t=m[e];if(t.length){o.fillStyle=a[e/13|0],o.globalAlpha=e%13/12,o.beginPath();for(let e=0;e<t.length;e+=2)o.moveTo(t[e]+1.5,t[e+1]),o.arc(t[e],t[e+1],1.5,0,d);o.fill()}}o.globalAlpha=1}if(0===i.size){g=null;return}g=requestAnimationFrame(A)},R=()=>{null===g&&(g=requestAnimationFrame(A))},j=(e,t,n,r)=>{let l=Math.max(0,Math.floor((e-6)/c)),o=Math.floor((e+6)/c),a=Math.max(0,Math.floor((t-6)/c)),s=Math.floor((t+6)/c);for(let u=a;u<=s;u++){let a=u*c;if(a>y)break;for(let s=l;s<=o;s++){let l=s*c;if(l>v)break;let o=l-e,d=a-t;if(o*o+d*d>36)continue;let f=i.get(4096*u+s);f?(f.born=r,f.colorId=n,f.step=12):i.set(4096*u+s,{x:l,y:a,colorId:n,born:r,step:12}),E=!0}}R()},k=(e,t,n,r,l,o)=>{let i=n-e,a=r-t,s=Math.max(1,Math.ceil(Math.hypot(i,a)/u));for(let n=1;n<=s;n++)j(e+i*n/s,t+a*n/s,l,o)};n.current=(e,t)=>{if(e.length<2||!v)return;let n=b(t),r=performance.now(),l=e[0]*v,o=e[1]*y;j(l,o,n,r);for(let t=2;t<e.length;t+=2){let i=e[t]*v,a=e[t+1]*y;k(l,o,i,a,n,r),l=i,o=a}};let I=!1,N=0,P=0,C=[],F=0,T=null,S=null,W=()=>{var e,t,n;return null!=(n=null==(t=h.current)||null==(e=t.info)?void 0:e.color)?n:"#60a5fa"},Y=()=>{if(C.length<2)return;p.current({type:"PAINT",points:C,color:W()});let e=C.slice(-2);C=I?e:[],F=performance.now()},q=e=>{0===e.button&&(r.setPointerCapture(e.pointerId),Y(),I=!0,N=e.clientX-x.left,P=e.clientY-x.top,C=[N/v,P/y],F=performance.now(),j(N,P,b(W()),performance.now()))},O=e=>{let t=e.clientX-x.left,n=e.clientY-x.top;"mouse"===e.pointerType&&(T={x:t,y:n},null===S&&(S=requestAnimationFrame(()=>{S=null,T&&(f.current({cursor:T}),T=null)}))),I&&(k(N,P,t,n,b(W()),performance.now()),N=t,P=n,C.push(t/v,n/y),performance.now()-F>120&&Y())},_=()=>{I&&(I=!1,Y())},B=()=>{_(),T=null,null!==S&&(cancelAnimationFrame(S),S=null),f.current({cursor:null})};L(),r.addEventListener("pointerdown",q),r.addEventListener("pointermove",O),r.addEventListener("pointerup",_),r.addEventListener("pointercancel",_),r.addEventListener("pointerleave",B);let X=new ResizeObserver(L);return X.observe(l),window.addEventListener("scroll",M,{passive:!0}),()=>{r.removeEventListener("pointerdown",q),r.removeEventListener("pointermove",O),r.removeEventListener("pointerup",_),r.removeEventListener("pointercancel",_),r.removeEventListener("pointerleave",B),X.disconnect(),window.removeEventListener("scroll",M),null!==g&&cancelAnimationFrame(g),null!==w&&cancelAnimationFrame(w),null!==S&&cancelAnimationFrame(S),i.clear()}},[]),(0,r.jsx)("canvas",{ref:e,className:"absolute inset-0 touch-none select-none",role:"img","aria-label":"Shared drawing canvas over Sam's portrait. Anyone on the page can paint on it."})}function p(e){let{className:t}=e;return(0,r.jsx)(a.b,{id:"hero-paint",initialPresence:{cursor:null},media:"(pointer: fine)",children:(0,r.jsxs)("div",{className:(0,s.cx)(t),children:[(0,r.jsx)(f,{}),(0,r.jsx)(i.WL,{pulse:!1})]})})}},8750:(e,t,n)=>{n.d(t,{B1:()=>s,FQ:()=>c,WL:()=>u});var r=n(5853),l=n(4041),o=n(669),i=n(9193),a=n(3720);function s(e){let{color:t}=e;return(0,r.jsxs)("svg",{width:"15",height:"15",viewBox:"0 0 20 20",fill:"none",className:"-translate-x-[10px] -translate-y-[10px]",children:[(0,r.jsx)("line",{x1:"10",y1:"0",x2:"10",y2:"8",stroke:t,strokeWidth:"2"}),(0,r.jsx)("line",{x1:"10",y1:"12",x2:"10",y2:"20",stroke:t,strokeWidth:"2"}),(0,r.jsx)("line",{x1:"0",y1:"10",x2:"8",y2:"10",stroke:t,strokeWidth:"2"}),(0,r.jsx)("line",{x1:"12",y1:"10",x2:"20",y2:"10",stroke:t,strokeWidth:"2"})]})}function c(e,t,n,r){let l=window.matchMedia("(prefers-reduced-motion: reduce)").matches,o=Math.min(window.devicePixelRatio||1,2),i=t-44,a=n-44,s=document.createElement("canvas");s.className="absolute pointer-events-none",s.width=88*o,s.height=88*o,s.style.width="".concat(88,"px"),s.style.height="".concat(88,"px"),s.style.left="".concat(i,"px"),s.style.top="".concat(a,"px"),e.a

1ppendChild(s);let c=s.getContext("2d");if(!c)return s.remove();c.scale(o,o),c.fillStyle=r;let u=[],d=Math.ceil((t-36)/8),f=Math.floor((t+36)/8),p=Math.ceil((n-36)/8),h=Math.floor((n+36)/8);for(let e=p;e<=h;e++)for(let r=d;r<=f;r++){let l=8*r,o=8*e,s=Math.hypot(l-t,o-n);s<=36&&u.push({x:l-i,y:o-a,d:s})}let m=performance.now(),v=e=>{let t=Math.min((e-m)/600,1),n=(1-(1-t)**3)*36,r=1-t;for(let e of(c.clearRect(0,0,88,88),u)){let t=Math.round((l?Number(e.d<=12):Math.max(0,1-Math.abs(e.d-n)/8))*r*4)/4;t&&(c.globalAlpha=t,c.beginPath(),c.arc(e.x,e.y,1.5,0,2*Math.PI),c.fill())}t<1?requestAnimationFrame(v):s.remove()};requestAnimationFrame(v)}function u(e){let{pulse:t=!0,resolve:n}=e,u=(0,l.useRef)(n);u.current=n;let d=(0,i.nq)(),f=(0,i.UL)(e=>{var t;return null==(t=e.info)?void 0:t.color},o.x7),p=(0,i.Yy)(e=>{var t;return null==(t=e.info)?void 0:t.color}),h=(0,l.useRef)(p);(0,l.useEffect)(()=>{h.current=p},[p]);let m=(0,i.jn)(),v=(0,l.useRef)(m);(0,l.useEffect)(()=>{v.current=m},[m]),(0,i.ML)(e=>{var t;let{event:n}=e,r=null==(t=y.current)?void 0:t.parentElement;"TAP"===n.type&&r&&!document.hidden&&c(r,n.x,n.y,n.color)});let y=(0,l.useRef)(null),x=(0,l.useRef)(new Map),g=(0,l.useRef)(new Map),w=(0,l.useCallback)(e=>t=>{t?x.current.set(e,t):x.current.delete(e)},[]);return(0,l.useEffect)(()=>{let e=y.current,n=null==e?void 0:e.parentElement;if(!e||!n)return;let r=n.getBoundingClientRect(),l=null,o=null,i=()=>{e.style.opacity="0",e.style.display="none"},a=t=>{if("mouse"!==t.pointerType)return i();e.style.transform="translate3d(".concat(t.clientX-r.left,"px, ").concat(t.clientY-r.top,"px, 0)"),e.style.display="block",e.style.opacity="1"},s=(e,l)=>{var o;if(!t)return;let i=e-r.left,a=l-r.top,s=null!=(o=h.current)?o:"#60a5fa";c(n,i,a,s),v.current({type:"TAP",x:i,y:a,color:s})},u=e=>{if("mouse"===e.pointerType){0===e.button&&s(e.clientX,e.clientY);return}o={id:e.pointerId,x:e.clientX,y:e.clientY}},d=e=>{if(!o||o.id!==e.pointerId)return;let t=Math.hypot(e.clientX-o.x,e.clientY-o.y);o=null,t<10&&s(e.clientX,e.clientY)},f=()=>{o=null},p=()=>{null===l&&(l=requestAnimationFrame(()=>{l=null,r=n.getBoundingClientRect()}))};return n.addEventListener("pointermove",a),n.addEventListener("pointerleave",i),n.addEventListener("pointerdown",u),n.addEventListener("pointerup",d),n.addEventListener("pointercancel",f),window.addEventListener("resize",p),window.addEventListener("scroll",p,{passive:!0}),()=>{n.removeEventListener("pointermove",a),n.removeEventListener("pointerleave",i),n.removeEventListener("pointerdown",u),n.removeEventListener("pointerup",d),n.removeEventListener("pointercancel",f),window.removeEventListener("resize",p),window.removeEventListener("scroll",p),null!==l&&cancelAnimationFrame(l)}},[t]),(0,l.useEffect)(()=>d.subscribe("others",e=>{let t=g.current,n=new Set;for(let r of e){n.add(r.connectionId);

1let e=u.current?u.current(r.presence):r.presence.cursor,l=t.get(r.connectionId);if(l||(l={tx:0,ty:0,cx:0,cy:0,visible:!1,seeded:!1},t.set(r.connectionId,l)),!e){l.visible=!1,l.seeded=!1;continue}l.tx=e.x,l.ty=e.y,l.seeded||(l.cx=e.x,l.cy=e.y,l.seeded=!0),l.visible=!0}for(let e of t.keys())n.has(e)||t.delete(e)}),[d]),(0,l.useEffect)(()=>{var e;let t=null==(e=y.current)?void 0:e.parentElement;if(!t)return;let n=performance.now();return(0,a.o)(t,e=>{let t=Math.min(e-n,100);n=e;let r=1-Math.exp(-t/55);for(let[e,t]of g.current){let n=x.current.get(e);if(n){if(!t.visible){n.style.opacity="0";continue}t.cx+=(t.tx-t.cx)*r,t.cy+=(t.ty-t.cy)*r,n.style.transform="translate3d(".concat(t.cx,"px, ").concat(t.cy,"px, 0)"),n.style.opacity="1"}}})},[]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{ref:y,className:"absolute top-0 left-0 pointer-events-none",style:{opacity:0,display:"none",willChange:"transform"},children:(0,r.jsx)(s,{color:null!=p?p:"#60a5fa"})}),f.map(e=>{let[t,n]=e;return(0,r.jsx)("div",{ref:w(t),className:"absolute top-0 left-0 pointer-events-none",style:{opacity:0,willChange:"transform"},children:(0,r.jsx)(s,{color:null!=n?n:"#60a5fa"})},t)})]})}}

1,9193:(e,t,n)=>{n.d(t,{ML:()=>g,QY:()=>d,UL:()=>p,VL:()=>f,X6:()=>h,Yy:()=>v,bg:()=>u,jn:()=>y,nq:()=>m});var r=n(669),l=n(839),o=n(7206),i=n(6380);let a=(0,r.UU)({authEndpoint:async e=>(await fetch("/api/liveblocks-auth",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({room:e,userId:(0,o.W)()})})).json(),throttle:16,backgroundKeepAliveTimeout:3e4}),s=e=>"number"==typeof e&&Number.isFinite(e),c=e=>"string"==typeof e&&i.Y.includes(e),{RoomProvider:u,useUpdateMyPresence:d,useOthers:f,useOthersMapped:p,useOthersListener:h,useRoom:m,useSelf:v,useBroadcastEvent:y,useEventListener:x}=(0,l.hq)(a);function g(e){x(t=>{(function(e){switch(e.type){case"SPAWN_BIRD":case"PLANT_FLOWER":case"GROW_FLOWER":case"LAUNCH_FIREWORK":case"SPAWN_DOLPHIN":return s(e.x)&&s(e.y)&&(void 0===e.color||c(e.color));case"TAP":return s(e.x)&&s(e.y)&&c(e.color);case"PAINT":return Array.isArray(e.points)&&e.points.length<=4096&&e.points.every(s)&&c(e.color);case"KNOCK":return s(e.yaw)&&s(e.pitch)&&(void 0===e.slug||"string"==typeof e.slug&&e.slug.length<=64);default:return!1}})(t.event)&&e(t)})}}}]);