"use strict";(self.webpackChunk_genially_view_client=self.webpackChunk_genially_view_client||[]).push([[5086],{91720:(e,t,r)=>{r.d(t,{Z:()=>c});var i=r(45992),n=r(62772),s=r(17588),a=r(97690);const o=e=>({transform:`${e.preTransforms.join(" ")} scale(${e.scale}) rotateX(${e.rotateX}deg) rotateY(${e.rotateY}deg) ${(0,a.Y)(e.rotateZ)}`,transition:e.transitions.join(", "),filter:e.filters.join(" ")});const l=e=>{const[t,r]=(0,s.useState)(null),[n,a]=(0,s.useState)(void 0),[l,d]=(0,s.useState)(void 0),[c,u]=(0,s.useState)(!1),p=(0,s.useRef)(null),m=(0,s.useCallback)((e=>{p.current=e,r(e)}),[]);(0,s.useEffect)((()=>{e&&(a(void 0),d(void 0),u(!1))}),[e]);const g=(0,s.useCallback)((r=>{if(!t||e)return;u(!0);const i=t.getBoundingClientRect(),n=(r.clientX-i.left)/i.width,s=(r.clientY-i.top)/i.height,o={coords:{x:Math.min(Math.max(n,0),1),y:Math.min(Math.max(s,0),1)}};a(o),c||d(o)}),[t,c,e]),f=(0,s.useCallback)((()=>{a(void 0),u(!1)}),[]),{innerCardStyle:h,specialFxLayerStyles:b}=function(e){let{hoveringState:t}=e;const r={scale:1,rotateX:0,rotateY:0,rotateZ:0,preTransforms:[],transitions:[],filters:[]};r.rotateZ+=0;const i=[],n=e=>{var t;return null!==(t=i[e])&&void 0!==t||(i[e]={scale:1,rotateX:0,rotateY:0,rotateZ:0,preTransforms:[],transitions:[],filters:[]}),i[e]},s="perspective(1500px)",a=n(0),l=n(1),d="cubic-bezier(0.89, -0.3, 0.18, 1.37)";r.transitions.push(`transform 400ms ${d}`),a.transitions.push("transform 100ms linear"),l.transitions.push(`filter 400ms ${d}`);const c=e=>`drop-shadow(rgba(0, 15, 51, ${e}) 0px 1px 8px)`;if(t){r.preTransforms.push(s),a.preTransforms.push(s),l.filters.push(c(.3)),r.scale+=.05;const{coords:e}=t,i=20;a.rotateX+=i*-(e.y-.5),a.rotateY+=i*(e.x-.5)}else l.filters.push(c(0));return{specialFxLayerStyles:i.filter((e=>!!e)).map((e=>Object.assign(Object.assign({},o(e)),{top:0,bottom:0,left:0,right:0,width:"100%",height:"100%"}))),innerCardStyle:Object.assign({},o(r))}}({hoveringState:!n&&c?l:n}),v=(e,t)=>0===t.length?e:(0,i.jsx)("div",{style:t[0],children:v(e,t.slice(1))});return{handleMouseEnterOrMove:g,handleMouseLeave:f,innerCardStyle:h,specialFxLayerStyles:b,setCardRef:m,wrapInsideStyledCard:v}};var d=r(11833);const c=e=>{let{title:t,frontImageSrc:r,coverImageSrc:s,fitImages:a,flipped:o,burned:c,onClick:u}=e;const p=Boolean(c),m=Boolean(o),{handleMouseEnterOrMove:g,handleMouseLeave:f,innerCardStyle:h,setCardRef:b,specialFxLayerStyles:v,wrapInsideStyledCard:y}=l(m);return y((0,i.jsxs)(d.Ox,{onMouseMove:g,onMouseEnter:g,onMouseLeave:f,role:"button",style:m?h:{},$burned:p,$flipped:m,ref:b,onClick:e=>{e.stopPropagation(),u&&u()},"aria-label":`Card showing ${m?"front":"back"} side with title: ${t}`,"aria-disabled":p,tabIndex:p?-1:0,$imageSrc:r,$coverImageSrc:s,$fitImages:a,children:[(0,i.jsx)("img",{style:{opacity:m?1:0,position:"absolute",top:0,left:0,width:"100%",height:"100%",transition:`opacity ${d.uD}ms steps(1)`},src:r,alt:"front"}),(0,i.jsx)("img",{style:{opacity:m?0:1,position:"absolute",top:0,left:0,width:"100%",height:"100%",transition:`opacity ${d.uD}ms steps(1)`},src:s,alt:"cover"}),t&&(0,i.jsx)(d.aW,{hidden:!m,children:(0,i.jsx)(n.m_,{text:t,placement:n.m_.Position.TOP,fallbackPlacements:[n.m_.Position.TOP],renderReferencePortalNode:document.querySelector("body"),children:(0,i.jsx)(d.hE,{"data-testid":"card-title",children:t})})})]}),v)}},11833:(e,t,r)=>{r.d(t,{Ox:()=>l,aW:()=>a,hE:()=>o,rl:()=>n,uD:()=>s});var i=r(37577);const n=1e3,s=n/3.4,a=i.Ay.div({display:"flex",justifyContent:"center",alignItems:"center",flexShrink:0,position:"absolute",paddingLeft:"12px",paddingRight:"12px",bottom:0,left:0,userSelect:"none",minHeight:"25%",top:"75%",width:"100%",backgroundColor:"rgba(18,18,18,0.5)"}),o=i.Ay.p({color:"white",fontSize:12,textAlign:"center",fontStyle:"normal",fontWeight:400,lineHeight:"16px",overflow:"hidden",textOverflow:"ellipsis",wordWrap:"break-word",whiteSpace:"nowrap",pointerEvents:"none"}),l=i.Ay.div`
  @keyframes rotate-out {
    0% {
      transform: rotateY(180deg);
    }
    100% {
      transform: rotateY(0deg);
    }
  }

  @keyframes rotate-in {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(180deg);
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    12% {
      transform: scale(1.05, 1.05);
    }
    40% {
      transform: scale(1.05, 1.05);
    }
    100% {
      transform: scale(1);
    }
  }

  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
  height: 100%;

  cursor: ${e=>{let{$flipped:t,$burned:r}=e;return t||r?"default":"pointer"}};

  animation-name: ${e=>{let{$flipped:t}=e;return t?"rotate-out":"rotate-in"}}
    ${e=>{let{$burned:t}=e;return t?",pulse":""}};
  animation-duration: ${n}ms;
  animation-delay: 0ms, ${n}ms;
  animation-iteration-count: 1;
  perspective: 1500px;

  background-image: url(${e=>{let{$flipped:t,$imageSrc:r,$coverImageSrc:i}=e;return t?r:i}});
  transition: background-image ${s}ms steps(1);

  background-size: ${e=>{let{$fitImages:t}=e;return t?"contain":"cover"}};
  background-position: center;
  background-repeat: no-repeat;

  border-radius: ${e=>{let{theme:t}=e;return t.borderRadius.large}};

  /* HACK: We need to set border as important because .genially-embed is reseting our borders in the View */
  border: 1px solid
    ${e=>{let{theme:t,$flipped:r}=e;return r?t.color.border.primary.disabled():t.color.border.primary.default()}} !important;
  outline: 1px white solid;

  filter: ${e=>{let{$flipped:t}=e;return t?"":"drop-shadow(0px 1px 4px rgba(0, 15, 51, 0.2))"}};

  &:hover {
    filter: ${e=>{let{$flipped:t}=e;return t?"":"drop-shadow(rgba(0, 15, 51, 0.3) 0px 1px 8px)"}};
    border-color: ${e=>{let{theme:t,$flipped:r}=e;return r?t.color.border.primary.disabled():t.color.border.primary.hover()}} !important;
  }

  ${a} {
    visibility: ${e=>{let{$flipped:t}=e;return t?"initial":"hidden"}};
    transition: visibility ${s}ms steps(1);
    z-index: 1;
  }

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: ${e=>{let{$burned:t}=e;return t?"0.4":"0"}};
    transition: opacity ${n}ms steps(1);
    transition-delay: ${n}ms;
    background-color: white;
    pointer-events: none;
  }
`},63107:(e,t,r)=>{r.d(t,{V:()=>n,m:()=>s});var i=r(37577);const n=i.Ay.div`
  display: grid;
  grid-template-columns: repeat(${e=>e.totalItems/2}, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  height: 100%;
  gap: 16px;
  padding: 8px;
`,s=i.Ay.canvas({width:"100%",height:"100%",pointerEvents:"none",position:"absolute",top:0,left:0,zIndex:3})},22705:(e,t,r)=>{r.r(t),r.d(t,{geniallyFindThePairViewScript:()=>w});var i=r(45992),n=r(54072),s=r(41381),a=r(17588),o=r(41804),l=r(40671),d=r(99049),c=r(37577),u=r(91720);var p;!function(e){e.FACEDOWN="faceDown",e.FACEUP="faceUp",e.BURNED="burned"}(p||(p={}));const m=e=>`${e}-original`,g=e=>`${e}-pair`;var f=r(11833),h=r(63107);const b=(e,t)=>{const r=e%2===1,i=t%2===1;return r&&!i?1:!r&&i?-1:e-t},v=e=>{let{theme:t,images:r,coverImageSrc:n,fitImages:s,onSuccess:v,onFailure:y}=e;const x=(0,a.useRef)(),{shuffledCards:$,isFaceUp:w,isBurned:S,onPick:j}=((e,t,r,i)=>{const n=(0,a.useMemo)((()=>{const t=e.flatMap((e=>[Object.assign(Object.assign({},e),{id:m(e.id),pairId:g(e.id)}),Object.assign(Object.assign({},e),{id:g(e.id),pairId:m(e.id)})]));for(let e=t.length-1;e>0;e-=1){const r=Math.floor(Math.random()*(e+1));[t[e],t[r]]=[t[r],t[e]]}return t}),[e]),[s,o]=(0,a.useState)((()=>{const e=new Map;return n.forEach((t=>{e.set(t.id,{id:t.id,status:p.FACEDOWN,pairId:t.pairId})})),e})),l=(0,a.useCallback)((e=>{var t;return(null===(t=s.get(e))||void 0===t?void 0:t.status)===p.FACEUP}),[s]),d=(0,a.useCallback)((e=>{var t;return(null===(t=s.get(e))||void 0===t?void 0:t.status)===p.BURNED}),[s]);return{shuffledCards:n,isFaceUp:l,isBurned:d,onPick:e=>{const n=s.get(e);if(n.status!==p.FACEDOWN)return;const a=[...s.values()].filter((e=>e.status===p.FACEUP));if(0===a.length)s.set(n.id,Object.assign(Object.assign({},n),{status:p.FACEUP}));else if(1===a.length){const e=a[0];e.pairId===n.id?(s.set(e.id,Object.assign(Object.assign({},e),{status:p.BURNED})),s.set(n.id,Object.assign(Object.assign({},n),{status:p.BURNED})),t()):(s.set(n.id,Object.assign(Object.assign({},n),{status:p.FACEUP})),r())}else 2===a.length&&(a.forEach((e=>{s.set(e.id,Object.assign(Object.assign({},e),{status:p.FACEDOWN}))})),s.set(n.id,Object.assign(Object.assign({},n),{status:p.FACEUP})));o(new Map(s)),[...s.values()].every((e=>e.status===p.BURNED))&&i()}}})(r,(()=>{setTimeout((()=>{v()}),f.rl)}),(()=>{setTimeout((()=>{y()}),f.rl)}),(()=>{setTimeout((()=>{var e;e=x,o.A.create(e.current,{resize:!0})(Object.assign(Object.assign({},{particleCount:150,startVelocity:20,spread:150,ticks:60,zIndex:0,disableForReducedMotion:!0}),{disableForReducedMotion:!0,shapes:["circle"]}))}),f.rl)})),[C,O]=(0,a.useState)((()=>Array.from({length:$.length},((e,t)=>t))));return(0,a.useEffect)((()=>{const e=setTimeout((()=>{O((e=>[...e].sort(b).reverse()))}),f.rl);return()=>clearTimeout(e)}),[]),(0,i.jsxs)(c.NP,{theme:t,children:[(0,i.jsx)(h.m,{ref:x}),(0,i.jsx)(h.V,{totalItems:$.length,children:(0,i.jsx)(l.N,{children:$.map(((e,t)=>(0,i.jsx)(d.P.div,{layout:!0,style:{order:C[t]},initial:{opacity:0,scale:.7},animate:{opacity:1,scale:1},transition:{type:"spring",ease:"easeInOut",stiffness:300,damping:30},children:(0,i.jsx)(u.Z,{title:e.title,frontImageSrc:e.src,coverImageSrc:n,fitImages:s,flipped:w(e.id)||S(e.id),burned:S(e.id),onClick:()=>j(e.id)})},e.id)))})})]})},y=e=>null!==e,x="https://audios.genial.ly/59e059d30b9c21060cb4c2ec/de8b3efe-c4df-48ff-8bbb-2b3e940663d3.wav",$="https://audios.genial.ly/59e059d30b9c21060cb4c2ec/23fe908b-44e2-4972-981f-d857c429b126.wav",w=(e,t)=>{(0,s.p)({getTargetNodeItem:()=>e.item,initialState:void 0,renderApp:()=>{const{itemList:r,coverImage:s,fitImages:a}=e.config,o=r.map((e=>null===e.image.source?null:{src:e.image.source,title:e.title,id:(0,n.Ak)()})).filter(y);t.preloadAudio(x),t.preloadAudio($);const l=()=>{t.playAudio({source:x})},d=()=>{t.playAudio({source:$})};return()=>(0,i.jsx)(v,{theme:t.theme,images:o,coverImageSrc:String(s.source),fitImages:a,onSuccess:l,onFailure:d})}})(e,t)}},41381:(e,t,r)=>{r.d(t,{p:()=>a});var i=r(70377),n=r(66264),s=r(60708);function a(e){let{getTargetNodeItem:t,renderApp:r,initialState:a}=e,o=!1;const l=[],d=e=>{l.push(e)};return e=>{const c=t(e.config),u=null===c||void 0===c?void 0:c.parentSlide;function p(){if(!c)return;let e=null;if("idOfFreeNode"in c)e=document.getElementById(c.idOfFreeNode);else{const t=document.createElement("div");t.innerHTML=c.source;let r=t.getElementsByClassName("genially-widget-app");r.length||(r=t.getElementsByClassName("genially-widget-gallery"));const{id:i}=r[0];if(!i)return;e=document.getElementById(i)}if(e){const t=n=>{if(o){const s=r({setState:t,onUnmount:d});i.render(s(n),e)}else console.warn('"rerender" was called when the widget was already unmounted. This is a no-op. Did you forget to dispose of an event handler with "onUnmount"?')};o=!0,t(a),l.push((()=>{i.unmountComponentAtNode(e)}))}}function m(){o=!1,l.forEach((e=>{e()})),l.length=0}null===c||void 0===c||c.on(n.q.Mount,(()=>{p()})),null===c||void 0===c||c.on(n.q.Unmount,(()=>{m()})),c&&"isTransversal"in c&&c.isTransversal?p():null===u||void 0===u||u.on(s.m.Entering,(()=>{o||p()})),null===u||void 0===u||u.on(s.m.Exited,(()=>{c&&"isTransversal"in c&&c.isTransversal||o&&m()}))}}}}]);
//# sourceMappingURL=https://s3-static-genially.genially.com/view/static/js/5086.8b927a80.chunk.js.map