"use strict";(self.webpackChunk_genially_view_client=self.webpackChunk_genially_view_client||[]).push([[5086],{91720:(e,t,i)=>{i.d(t,{Z:()=>d});var n=i(45992),r=i(17588),a=i(97690);const s=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 o=e=>{const[t,i]=(0,r.useState)(null),[a,o]=(0,r.useState)(void 0),[l,d]=(0,r.useState)(void 0),[c,u]=(0,r.useState)(!1),p=(0,r.useRef)(null),m=(0,r.useCallback)((e=>{p.current=e,i(e)}),[]),f=(0,r.useCallback)((i=>{if(!t||e)return;u(!0);const n=t.getBoundingClientRect(),r=(i.clientX-n.left)/n.width,a=(i.clientY-n.top)/n.height,s={coords:{x:Math.min(Math.max(r,0),1),y:Math.min(Math.max(a,0),1)}};o(s),c||d(s)}),[t,c,e]),g=(0,r.useCallback)((()=>{o(void 0),u(!1)}),[]),{innerCardStyle:h,specialFxLayerStyles:b}=function(e){let{hoveringState:t}=e;const i={scale:1,rotateX:0,rotateY:0,rotateZ:0,preTransforms:[],transitions:[],filters:[]};i.rotateZ+=0;const n=[],r=e=>{var t;return null!==(t=n[e])&&void 0!==t||(n[e]={scale:1,rotateX:0,rotateY:0,rotateZ:0,preTransforms:[],transitions:[],filters:[]}),n[e]},a="perspective(1500px)",o=r(0),l=r(1),d="cubic-bezier(0.89, -0.3, 0.18, 1.37)";i.transitions.push(`transform 400ms ${d}`),o.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){i.preTransforms.push(a),o.preTransforms.push(a),l.filters.push(c(.3)),i.scale+=.05;const{coords:e}=t,n=20;o.rotateX+=n*-(e.y-.5),o.rotateY+=n*(e.x-.5)}else l.filters.push(c(0));return{specialFxLayerStyles:n.filter((e=>!!e)).map((e=>Object.assign(Object.assign({},s(e)),{top:0,bottom:0,left:0,right:0,width:"100%",height:"100%"}))),innerCardStyle:Object.assign({},s(i))}}({hoveringState:!a&&c?l:a}),v=(e,t)=>0===t.length?e:(0,n.jsx)("div",{style:t[0],children:v(e,t.slice(1))});return{handleMouseEnterOrMove:f,handleMouseLeave:g,innerCardStyle:h,specialFxLayerStyles:b,setCardRef:m,wrapInsideStyledCard:v}};var l=i(11833);const d=e=>{let{title:t,frontImageSrc:i,coverImageSrc:r,flipped:a,burned:s,flipAnimated:d,onClick:c,onAnimationEnd:u}=e;const p=Boolean(s),m=Boolean(a),{handleMouseEnterOrMove:f,handleMouseLeave:g,innerCardStyle:h,setCardRef:b,specialFxLayerStyles:v,wrapInsideStyledCard:y}=o(p);return y((0,n.jsxs)(l.Ox,{onMouseMove:f,onMouseEnter:f,onMouseLeave:g,role:"button",style:p?h:{},$burned:p,$flipped:m,$flipAnimated:d,ref:b,onClick:c,onAnimationEnd:u,"aria-label":`Card showing ${m?"front":"back"} side with title: ${t}`,"aria-disabled":p,tabIndex:p?-1:0,children:[(0,n.jsx)(l.$p,{$visible:m,$imageSrc:i,"aria-roledescription":"front-card",children:t&&(0,n.jsx)(l.aW,{hidden:!m,children:(0,n.jsx)(l.hE,{children:t})})}),(0,n.jsx)(l.n$,{$visible:!m,$flipAnimated:d,$imageSrc:r,"aria-roledescription":"cover-card"})]}),v)}},11833:(e,t,i)=>{i.d(t,{$p:()=>f,Ox:()=>h,aW:()=>u,hE:()=>p,n$:()=>g,rl:()=>d});var n=i(37577);const r=(0,n.i7)({"0%":{transform:"rotateY(0)"},"100%":{transform:"rotateY(180deg)"}}),a=(0,n.i7)({"0%":{transform:"rotateY(180deg)"},"100%":{transform:"rotateY(0)"}}),s=(0,n.i7)({"0%":{transform:"rotateY(180deg) scale(1)"},"50%":{transform:"rotateY(0deg) scale(1)"},"62%":{transform:"rotateY(0) scale(1.05, 1.05)"},"72%":{transform:"rotateY(0) scale(1.05, 1.05)"},"100%":{transform:"rotateY(0) scale(1)"}}),o=(0,n.i7)({"0%":{transform:"scale(1)"},"50%":{transform:"scale(1)"},"62%":{transform:"scale(1.05, 1.05)"},"72%":{transform:"scale(1.05, 1.05)"},"100%":{transform:"scale(1)"}}),l=(0,n.i7)({"0%":{opacity:0},"100%":{opacity:.4}}),d=1e3,c=d/3.4,u=n.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)"}),p=n.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"}),m=n.Ay.div((e=>{let{$visible:t,$imageSrc:i}=e;return{width:"100%",height:t?"100%":0,transition:`height ${c}ms steps(1)`,backgroundImage:`url(${i})`,backgroundSize:"cover",backgroundPosition:"center",cursor:"default",[u]:{visibility:t?"initial":"hidden",transition:`visibility ${c}ms steps(1)`}}})),f=m,g=(0,n.Ay)(m)((e=>{let{$visible:t,$flipAnimated:i}=e;return i&&n.AH`
      animation-name: ${t?r:a};
      animation-duration: ${d}ms;
      animation-iteration-count: 1;
    `}),{cursor:"pointer"}),h=n.Ay.div((e=>{let{$flipped:t,$flipAnimated:i}=e;return i&&n.AH`
      animation-name: ${t?a:r};
      animation-duration: ${d}ms;
      animation-iteration-count: 1;
    `}),(e=>{let{$burned:t,$flipAnimated:i}=e;return t&&n.AH`
      animation-name: ${i?s:o};
      animation-duration: ${2*d}ms;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      ${f} {
        &::before {
          animation-name: ${l};
          animation-duration: ${2*d}ms;
          animation-timing-function: steps(1);
          animation-fill-mode: forwards;
        }
      }
    `}),(e=>{let{theme:{color:t,borderRadius:i},$burned:n}=e;return Object.assign(Object.assign({position:"relative",borderRadius:i.large,border:"1px solid",borderColor:t.border.primary.default(),overflow:"hidden",flexShrink:0,width:"100%",height:"100%",filter:"drop-shadow(0px 1px 4px rgba(0, 15, 51, 0.20))",perspective:"1500px","&:hover":{filter:"drop-shadow(rgba(0, 15, 51, 0.3) 0px 1px 8px)",borderColor:t.border.primary.hover()}},n&&{borderColor:t.border.primary.disabled(),filter:"","&:hover":{filter:"",borderColor:t.border.primary.disabled()}}),{[f]:Object.assign({},n&&{"&::before":{content:'""',position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"white",pointerEvents:"none"}})})}))},63107:(e,t,i)=>{i.d(t,{V:()=>r,m:()=>a});var n=i(37577);const r=n.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;
`,a=n.Ay.canvas({width:"100%",height:"100%",pointerEvents:"none",position:"absolute",top:0,left:0,zIndex:3})},22705:(e,t,i)=>{i.r(t),i.d(t,{geniallyFindThePairViewScript:()=>C});var n=i(45992),r=i(54072),a=i(41381),s=i(17588),o=i(41804),l=i(40671),d=i(99049),c=i(37577),u=i(91720);var p;!function(e){e.FACEDOWN="faceDown",e.FACEUP="faceUp",e.BURNED="burned"}(p||(p={}));const m=e=>`${e}-original`,f=e=>`${e}-pair`;var g=i(11833),h=i(63107);const b=(e,t)=>{const i=e%2===1,n=t%2===1;return i&&!n?1:!i&&n?-1:e-t},v=e=>{let{theme:t,images:i,coverImageSrc:r,onSuccess:a,onFailure:v}=e;const y=(0,s.useRef)(),{shuffledCards:x,isFaceUp:A,isBurned:C,isFlipAnimated:$,onClick:w}=((e,t,i,n)=>{const r=(0,s.useMemo)((()=>{const t=e.flatMap((e=>[Object.assign(Object.assign({},e),{id:m(e.id),pairId:f(e.id)}),Object.assign(Object.assign({},e),{id:f(e.id),pairId:m(e.id)})]));for(let e=t.length-1;e>0;e-=1){const i=Math.floor(Math.random()*(e+1));[t[e],t[i]]=[t[i],t[e]]}return t}),[e]),[a,o]=(0,s.useState)((()=>{const e=new Map;return r.forEach((t=>{e.set(t.id,{id:t.id,status:p.FACEDOWN,pairId:t.pairId,isFlipAnimated:!0})})),e})),l=(0,s.useCallback)((e=>{var t;return(null===(t=a.get(e))||void 0===t?void 0:t.status)===p.FACEUP}),[a]),d=(0,s.useCallback)((e=>{var t;return(null===(t=a.get(e))||void 0===t?void 0:t.status)===p.BURNED}),[a]),c=(0,s.useCallback)((e=>{var t;return Boolean(null===(t=a.get(e))||void 0===t?void 0:t.isFlipAnimated)}),[a]);return{shuffledCards:r,isFaceUp:l,isBurned:d,isFlipAnimated:c,onClick:e=>{const r=a.get(e);if(r.status!==p.FACEDOWN)return;const s=[...a.values()].filter((e=>e.status===p.FACEUP));if(0===s.length)a.set(r.id,Object.assign(Object.assign({},r),{status:p.FACEUP,isFlipAnimated:!0}));else if(1===s.length){const e=s[0];e.pairId===r.id?(a.set(e.id,Object.assign(Object.assign({},e),{status:p.BURNED,isFlipAnimated:!1})),a.set(r.id,Object.assign(Object.assign({},r),{status:p.BURNED,isFlipAnimated:!0})),t()):(a.set(r.id,Object.assign(Object.assign({},r),{status:p.FACEUP,isFlipAnimated:!0})),i())}else 2===s.length&&(s.forEach((e=>{a.set(e.id,Object.assign(Object.assign({},e),{status:p.FACEDOWN}))})),a.set(r.id,Object.assign(Object.assign({},r),{status:p.FACEUP,isFlipAnimated:!0})));o(new Map(a)),[...a.values()].every((e=>e.status===p.BURNED))&&n()}}})(i,(()=>{setTimeout((()=>{a()}),g.rl)}),(()=>{setTimeout((()=>{v()}),g.rl)}),(()=>{setTimeout((()=>{var e;e=y,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"]}))}),g.rl)})),[S,j]=(0,s.useState)((()=>Array.from({length:x.length},((e,t)=>t))));return(0,s.useEffect)((()=>{const e=setTimeout((()=>{j((e=>[...e].sort(b).reverse()))}),g.rl);return()=>clearTimeout(e)}),[]),(0,n.jsxs)(c.NP,{theme:t,children:[(0,n.jsx)(h.m,{ref:y}),(0,n.jsx)(h.V,{totalItems:x.length,children:(0,n.jsx)(l.N,{children:x.map(((e,t)=>(0,n.jsx)(d.P.div,{layout:!0,style:{order:S[t]},initial:{opacity:0,scale:.7},animate:{opacity:1,scale:1},transition:{type:"spring",ease:"easeInOut",stiffness:300,damping:30},children:(0,n.jsx)(u.Z,{title:e.title,frontImageSrc:e.src,coverImageSrc:r,flipped:A(e.id)||C(e.id),burned:C(e.id),flipAnimated:$(e.id),onClick:()=>w(e.id)})},e.id)))})})]})},y=e=>null!==e,x="https://audios.genial.ly/59e059d30b9c21060cb4c2ec/de8b3efe-c4df-48ff-8bbb-2b3e940663d3.wav",A="https://audios.genial.ly/59e059d30b9c21060cb4c2ec/23fe908b-44e2-4972-981f-d857c429b126.wav",C=(e,t)=>{(0,a.p)({getTargetNodeItem:()=>e.item,initialState:void 0,renderApp:()=>{const{itemList:i,coverImage:a}=e.config,s=i.map((e=>null===e.image.source?null:{src:e.image.source,title:e.title,id:(0,r.Ak)()})).filter(y);t.preloadAudio(x),t.preloadAudio(A);const o=()=>{t.playAudio({source:x})},l=()=>{t.playAudio({source:A})};return()=>(0,n.jsx)(v,{theme:t.theme,images:s,coverImageSrc:String(a.source),onSuccess:o,onFailure:l})}})(e,t)}},41381:(e,t,i)=>{i.d(t,{p:()=>s});var n=i(70377),r=i(66264),a=i(60708);function s(e){let{getTargetNodeItem:t,renderApp:i,initialState:s}=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 i=t.getElementsByClassName("genially-widget-app");i.length||(i=t.getElementsByClassName("genially-widget-gallery"));const{id:n}=i[0];if(!n)return;e=document.getElementById(n)}if(e){const t=r=>{if(o){const a=i({setState:t,onUnmount:d});n.render(a(r),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(s),l.push((()=>{n.unmountComponentAtNode(e)}))}}function m(){o=!1,l.forEach((e=>{e()})),l.length=0}null===c||void 0===c||c.on(r.q.Mount,(()=>{p()})),null===c||void 0===c||c.on(r.q.Unmount,(()=>{m()})),c&&"isTransversal"in c&&c.isTransversal?p():null===u||void 0===u||u.on(a.m.Entering,(()=>{o||p()})),null===u||void 0===u||u.on(a.m.Exited,(()=>{c&&"isTransversal"in c&&c.isTransversal||o&&m()}))}}}}]);
//# sourceMappingURL=https://s3-static-genially.genially.com/view/static/js/5086.5aba886d.chunk.js.map