https://cdn2.bustle.com/2026/bustle/ComicPage-2d58cfe465.js

1(globalThis.webpackChunk||=[]).push([[5563],{2503(e,t,n){n.d(t,{EX:()=>m,O4:()=>u,WQ:()=>v,cg:()=>g,kA:()=>b,rP:()=>f,z4:()=>y});var i=n(7724),o=n(9565),s=n(4294),r=n(2371),a=Object.defineProperty,l=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,d=(e,t,n)=>t in e?a(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,p=(e,t)=>{for(var n in t||(t={}))c.call(t,n)&&d(e,n,t[n]);if(l)for(var n of l(t))h.call(t,n)&&d(e,n,t[n]);return e};function u(e){return(0,i.Y)(o.A,p({},s.Ay.getAdProps(p({adType:r.m0},e))))}function m(e){return(0,i.Y)(o.A,p({},s.Ay.getAdProps(p({adType:"master"},e))))}function g(e){return(0,i.Y)(o.A,p({},s.Ay.getAdProps(p({adType:"rail"},e))))}function f(e){return(0,i.Y)(o.A,p({},s.Ay.getAdProps(p({adType:r.xI},e))))}function v(e){return(0,i.Y)(o.A,p({},s.Ay.getAdProps(p({adType:"oop"},e))))}function y(e){return(0,i.Y)(o.A,p({},s.Ay.getAdProps(p({adType:"reels"},e))))}function b(e){return(0,i.Y)(o.A,p({},s.Ay.getAdProps(p({adType:r.Ef},e))))}},6163(e,t,n){n.d(t,{A:()=>Y});var i=n(7724),o=n(6528),s=n(9339),r=n(7890),a=n(9898),l=n(5365),c=Object.defineProperty,h=Object.defineProperties,d=Object.getOwnPropertyDescriptors,p=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable,g=(e,t,n)=>t in e?c(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;const f=(0,r.Zl)(),v={facebook:"Share",x:"Post",mailto:"Send via email",copyLink:"Copy link"},y={facebook:[555,655],x:[575,250],mailto:[765,528]},b={copyLink(e){const{url:t}=e||{};return t},facebook(e){const{url:t,quote:n}=e||{},i=(o=((e,t)=>{for(var n in t||(t={}))u.call(t,n)&&g(e,n,t[n]);if(p)for(var n of p(t))m.call(t,n)&&g(e,n,t[n]);return e})({},f),h(o,d({utm_term:"share"})));var o;const s="?"+Object.keys(i).map(e=>`${e}=${i[e]}`).join("&"),r=n?`&quote=${encodeURIComponent(n)}`:"";return"https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(t+s)+r},mailto(e){const{url:t}=e||{};let n="mailto:?to=";return n+=`&subject=${encodeURIComponent(`Check out this cool story on ${o.A.title}!`)}`,n+=`&body=${encodeURIComponent(t)}`,n},x(e){const{url:t,text:n,via:i}=e||{};let o="https://x.com/intent/post?url="+encodeURIComponent(t);return n&&(o+="&text="+encodeURIComponent(n)),i&&(o+="&via="+encodeURIComponent(i)),o}};function w(e){var t;const{className:n,service:o,style:c={},tooltip:h="Copied!"}=e,d=null==(t=b[o])?void 0:t.call(b,e),p="copyLink"===o,[u,m]=(0,s.J0)(!1),g=(e,t,n)=>{e.preventDefault(),e.stopPropagation();const{onClick:i}=this.props;if(p)(0,r.q9)(n),m(!0),setTimeout(()=>m(!1),500);else{const[e,i]=y[t];!function(e,t,n){const i=window.screen,o=i.width/2-t/2,s="width="+t+",height="+n+",top="+(i.height/2-n/2)+",left="+o;window.open(e,"top",s)}(n,e,i)}i&&i()};return(0,i.Y)(a.Ao,{className:(0,l.A)(c.shareButton,n),onClick:e=>g(e,o,d),service:o,title:v[o],url:d,children:u&&p&&(0,i.Y)("div",{className:c.tooltip,children:h})})}const E={shareButton:"HEz",tooltip:"tTo"};var P=Object.defineProperty,C=Object.defineProperties,x=Object.getOwnPropertyDescriptors,A=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,T=(e,t,n)=>t in e?P(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;function Y(e){return(0,i.Y)(w,(t=((e,t)=>{for(var n in t||(t={}))S.call(t,n)&&T(e,n,t[n]);if(A)for(var n of A(t))O.call(t,n)&&T(e,n,t[n]);return e})({},e),C(t,x({style:E,via:"bustle"}))));var t}},6026(e,t,n){n.r(t),n.d(t,{default:()=>v});var i=n(7724),o=n(9339);class s{constructor(){this.events={}}scroll(e,t){let n=!1,i=0;this.addEventListener(e,"scroll",e=>{n||(n=!0,requestAnimationFrame(()=>{n=!1;const o=e.target.scrollTop-i;i=e.target.scrollTop,t(o)}))})}addEventListener(e,t,n){let i=this.events[t];i||(this.events[t]=i=[]),i.push([e,n]),e.addEventListener(t,n)}destroy(){for(const e in this.events)this.events[e].forEach(([t,n])=>{t.removeEventListener(e,n)})}}const r="undefined"!=typeof document&&"webkitOverflowScrolling"in document.createElement("div").style;

1class a{constructor(e){this.backgroundColor=e.captionBackgroundColor,this.captionText=e.captionText,this.index=e.index,this.svg=e.svg,this.parentElement=e.parentElement,this.manager=e.manager,this.element=null,this.captionElement=null,this.isGenerated=!1,this.isActive=!1}generate(){if(this.isGenerated)throw new Error("Panel already generated");this.element=this.explodeSVG(this.svg,this.backgroundColor),this.captionElement=this.generateCaption(),this.svg=null,this.isGenerated=!0}activate(){if(this.isActive)return;this.isGenerated||this.generate();const e=this.manager.panels,t=this.index;let n;t<e.length-1&&(n=e[t+1]),n&&n.isActive?(this.parentElement.insertBefore(this.captionElement,n.element),this.parentElement.insertBefore(this.element,this.captionElement)):(this.parentElement.appendChild(this.element),this.parentElement.appendChild(this.captionElement)),this.isActive=!0}deactivate(){this.placeholderHeight=this.element.getBoundingClientRect().height,this.placeholderHeight+=this.captionElement.getBoundingClientRect().height,this.element.remove(),this.captionElement.remove(),this.isActive=!1}explodeSVG(){const e=this.svg,t=document.createElement("div");for(t.setAttribute("class","exploded-svg");e.firstElementChild;){const n=e.cloneNode();n.appendChild(e.firstElementChild),t.appendChild(n)}return this.applyExplodedCSS(t),t}applyExplodedCSS(e){const t=this.backgroundColor,n=this.width,i=e.style;i.position="relative",i.width=this.width,i.backgroundColor=t,i.margin="0 0";const o=e.querySelectorAll("svg");for(let e=0;e<o.length;e++){const t=o[e].style,i=0===e;t.width=n,t.position=i?"relative":"absolute",t.zIndex=3,t.left=0,t.top=0;const s=-(o.length-1-e)*(100/o.length),a=1.1+-1*s/100;t.transform=r?"translateZ(0) scale(1.2)":`translateZ(${s}px) scale(${a})`}}generateCaption(){const e=this.backgroundColor||"#fff",t=document.createElement("div");t.setAttribute("class","caption-container"),t.style.backgroundColor=e,t.style.position="relative",r?t.style.padding="10vh 5vw":(t.style.padding="20vw 20vw 35vw 20vw",t.style.display="flex",t.style.flexDirection="column",t.style.justifyContent="center"),function(e){const t=function(e){const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}(e);return(299*t.r+587*t.g+114*t.b)/1e3}(e)<128&&(t.style.color="white");const n=document.createElement("p");n.setAttribute("class","caption-wrapper"),t.appendChild(n),n.style.zIndex=5;const i=document.createTextNode(this.captionText||"");return n.appendChild(i),t}}class l{constructor(e){this.element=e.element,this.eventManager=e.eventManager,this.width=e.width,this.height=e.height,this.panels=this.buildPanels(e.manifest.panels),this.eventManager.scroll(this.element,this.handleScroll.bind(this)),this.placeholderElement=this.buildPlaceholderElement(),this.activePanels=[],this.activePanelIndices=[0,0],this.activatePanels(0,3)}buildPanels(e){const{element:t,width:n,height:i}=this;return e.map((e,o)=>{let s={parentElement:t,manager:this,width:n,height:i,index:o};return s=function(e,...t){for(let n=0;n<t.length;n++){const i=t[n];for(const t in i)e[t]=i[t]}return e}(s,e),new a(s)})}handleScroll(e){let[t,n]=this.activePanelIndices;const i=this.activePanels,o=i[i.length-1];e>0&&o.element.getBoundingClientRect().bottom<window.innerHeight&&n<this.panels.length?(n++,t=n-3):e<0&&i[0].element.getBoundingClientRect().bottom>0&&t>0&&(t--,n=t+3),this.activatePanels(t,n)}activatePanels(e,t){const[n,i]=this.activePanelIndices;e===n&&t===i||(this.activePanelIndices=[e,t],this.activePanels.forEach(n=>{(n.index<e||n.index>t)&&n.deactivate()}),this.activePanels=this.panels.slice(e,t),this.activePanels.forEach(e=>{e.activate()}),this.updatePlaceholderHeight(e))}buildPlaceholderElement(){const e=document.createElement("div");return e.classList.add("placeholder"),this.element.appendChild(e),e}updatePlaceholderHeight(e){let t=0;for(let n=0;n<e;n++)t+=this.panels[n].placeholderHeight;this.placeholderElement.style.height=`${t}px`}}function c(e,t){const n=t>0?1:-1,i=Math.abs(t);return function(t){const o=Math.abs(t),s=e,r=Math.log(1),a=(Math.log(i)-r)/(s-0);return Math.exp(r+a*(o-0))*n}}function h(e){return new Promise((t,n)=>{const i=new XMLHttpRequest;i.onreadystatechange=function(){4===i.readyState&&(200===i.status?t(i.responseText,i):n(Error(i.status)))},i.open("GET",e,!0),i.send()})}class d{constructor(e){this.element=e.element,this.manifest=e.manifest,this.height=e.height?`${e.height}px`:"100vh",this.width=e.width?`${e.width}px`:"100vw",this.motionStartX=null,this.motionStartY=null}loadManifest(e){if(!e)throw new Error("You must pass a url to the loadManifest() method.");return function(e){return h(e).then(e=>JSON.parse(e))}(e).then(e=>{this.manifest=e})}

1start(){if(!this.manifest)throw new Error("You must pass a manifest to the Comicz constructor or call loadManifest().");this.eventManager=new s,this.addDeviceMotionListeners(),this.addMouseListeners(),this.applyRootCSS(),this.generateTitleElement(),this.loadPanels()}valuesFromMotion(e){let t=e.gamma,n=e.beta;if(90===Math.abs(window.orientation)){const e=t;t=n,n=e}return window.orientation<0&&(t=-t,n=-n),this.motionStartX=null===this.motionStartX?t:this.motionStartX,this.motionStartY=null===this.motionStartY?n:this.motionStartY,{x:t-this.motionStartX,y:n-this.motionStartY}}addDeviceMotionListeners(){window.addEventListener("deviceorientation",e=>{let{x:t,y:n}=this.valuesFromMotion(e);t/=30,n/=30,t=t<-1?-1:t>1?1:t,n=n<-1?-1:n>1?1:n;const i=t/1,o=n/1;this.applyShift(60*i,60*o)},!0)}addMouseListeners(){window.addEventListener("mousemove",e=>{const t=window.innerWidth,n=window.innerHeight,i=(e.pageX-t/2)/(t/2)*60,o=(e.pageY-n/2)/(n/2)*60;this.applyShift(i,o)})}applyShift(e,t){const n=this.element.querySelectorAll(".exploded-svg");for(let i=0;i<n.length;i++){const o=n[i].querySelectorAll("svg"),s=c(o.length,e),r=c(o.length,t);for(let e=0;e<o.length;e++){const t=o[e];let n=t._oldTransform;n||(n=t._oldTransform=t.style.transform),t.style.transform=n+`translateX(${s(e+1)}px) translateY(${r(e+1)}px)`}}}applyRootCSS(){const e=this.element.style;r?e.webkitOverflowScrolling="touch":e.perspective="100px",e.height=this.height,e.width=this.width,e.overflowX="hidden",e.overflowY="auto"}generateTitleElement(){const{title:e}=this.manifest,t=document.createElement("h1");t.setAttribute("class","comic-title");const n=document.createTextNode(e);t.appendChild(n),this.element.appendChild(t)}loadPanels(){const e=this.manifest.panels;Promise.all(e.map(e=>h(e.url).then(e=>{const t=document.createElement("div");return t.insertAdjacentHTML("afterbegin",e),t.querySelector("svg")}))).then(function(t){t.forEach((t,n)=>{e[n].svg=t})}).then(()=>{this.generatePanels()})}generatePanels(){this.panelManager=new l({width:this.width,height:this.height,eventManager:this.eventManager,element:this.element,manifest:this.manifest})}}const p=e=>e.map(([,e])=>({url:e.image&&(e.image.url||`https://imgix.bustle.com/${e.image.key}`),captionBackgroundColor:e.color,captionText:e.caption}));function u(e){const{title:t,cards:n,onRead:s,children:r}=e,a=(0,o.li)(null),l=(0,o.hb)(()=>{const e=a.current;if(!e)return;const t=e.scrollHeight-(e.scrollTop+e.offsetHeight);s(t)},[]);return(0,o.vJ)(()=>{const e=a.current;if(e)return new d({element:e,manifest:{title:t,panels:p(n)}}).start(),e.addEventListener("scroll",l),()=>e.removeEventListener("scroll",l)},[]),(0,i.Y)("div",{ref:a,children:r})}const m={comicPage:"u3E",attribution:"dJq",sponsor:"ilz",sponsorBy:"fX_",sponsorName:"ea1",author:"L41",attributionTitle:"y-y",attributionName:"JyW",sharing:"PjD"};var g=n(6163),f=n(2503);function v(e){var t;const{model:n}=e,{title:s,bodies:r,url:a,authorConnection:l}=n||{},c=null==(t=null==l?void 0:l.edges)?void 0:t.map(e=>e.node),h=r&&r[1].cards,d=(0,o.li)(null);return(0,i.FD)("div",{className:m.comicPage,children:[(0,i.Y)(u,{title:s,cards:h,onRead:e=>{const t=d.current;t&&(t.style.opacity=e<100?"1":"0")},children:(0,i.FD)("div",{className:m.attribution,children:[(0,i.Y)(f.O4,{style:m}),(0,i.Y)("div",{className:m.attributionTitle,children:"Created by "}),(0,i.Y)("div",{className:m.author,children:c&&c.map(e=>(0,i.Y)("a",{href:e.path,className:m.attributionName,children:e.name},e.path)).reduce((e,t)=>[e," & ",t])})]})}),(0,i.Y)("div",{className:m.sharing,ref:d,children:(0,i.Y)(g.A,{service:"facebook",url:a})})]})}}}]);