"use strict";(self.webpackChunk_genially_view_client=self.webpackChunk_genially_view_client||[]).push([[5086],{91720:(e,t,i)=>{i.d(t,{Z:()=>c});var n=i(45992),r=i(62772),a=i(17588),s=i(97690);const o=e=>({transform:`${e.preTransforms.join(" ")} scale(${e.scale}) rotateX(${e.rotateX}deg) rotateY(${e.rotateY}deg) ${(0,s.Y)(e.rotateZ)}`,transition:e.transitions.join(", "),filter:e.filters.join(" ")});const l=e=>{const[t,i]=(0,a.useState)(null),[r,s]=(0,a.useState)(void 0),[l,d]=(0,a.useState)(void 0),[c,u]=(0,a.useState)(!1),m=(0,a.useRef)(null),p=(0,a.useCallback)((e=>{m.current=e,i(e)}),[]),f=(0,a.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,o={coords:{x:Math.min(Math.max(r,0),1),y:Math.min(Math.max(a,0),1)}};s(o),c||d(o)}),[t,c,e]),g=(0,a.useCallback)((()=>{s(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)",s=r(0),l=r(1),d="cubic-bezier(0.89, -0.3, 0.18, 1.37)";i.transitions.push(`transform 400ms ${d}`),s.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),s.preTransforms.push(a),l.filters.push(c(.3)),i.scale+=.05;const{coords:e}=t,n=20;s.rotateX+=n*-(e.y-.5),s.rotateY+=n*(e.x-.5)}else l.filters.push(c(0));return{specialFxLayerStyles:n.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(i))}}({hoveringState:!r&&c?l:r}),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:p,wrapInsideStyledCard:v}};var d=i(11833);const c=e=>{let{title:t,frontImageSrc:i,coverImageSrc:a,fitImages:s,flipped:o,burned:c,flipAnimated:u,onClick:m,onAnimationEnd:p}=e;const f=Boolean(c),g=Boolean(o),{handleMouseEnterOrMove:h,handleMouseLeave:b,innerCardStyle:v,setCardRef:y,specialFxLayerStyles:x,wrapInsideStyledCard:A}=l(f);return A((0,n.jsxs)(d.Ox,{onMouseMove:h,onMouseEnter:h,onMouseLeave:b,role:"button",style:f?v:{},$burned:f,$flipped:g,$flipAnimated:u,ref:y,onClick:e=>{e.stopPropagation(),m&&m()},onAnimationEnd:p,"aria-label":`Card showing ${g?"front":"back"} side with title: ${t}`,"aria-disabled":f,tabIndex:f?-1:0,children:[(0,n.jsx)(d.$p,{$visible:g,$imageSrc:i,$fitImages:s,"aria-roledescription":"front-card",children:t&&(0,n.jsx)(d.aW,{hidden:!g,children:(0,n.jsx)(r.m_,{text:t,placement:r.m_.Position.TOP,fallbackPlacements:[r.m_.Position.TOP],renderReferencePortalNode:document.querySelector("body"),children:(0,n.jsx)(d.hE,{children:t})})})}),(0,n.jsx)(d.n$,{$visible:!g,$flipAnimated:u,$imageSrc:a,$fitImages:s,"aria-roledescription":"cover-card"})]}),x)}},11833:(e,t,i)=>{i.d(t,{$p:()=>f,Ox:()=>h,aW:()=>u,hE:()=>m,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)"}),m=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"}),p=n.Ay.div((e=>{let{$visible:t,$imageSrc:i,$fitImages:n}=e;return{width:"100%",height:t?"100%":0,transition:`height ${c}ms steps(1)`,backgroundImage:`url(${i})`,backgroundSize:n?"contain":"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",cursor:"default",[u]:{visibility:t?"initial":"hidden",transition:`visibility ${c}ms steps(1)`}}})),f=p,g=(0,n.Ay)(p)((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:()=>$});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 m;!function(e){e.FACEDOWN="faceDown",e.FACEUP="faceUp",e.BURNED="burned"}(m||(m={}));const p=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,fitImages:a,onSuccess:v,onFailure:y}=e;const x=(0,s.useRef)(),{shuffledCards:A,isFaceUp:$,isBurned:w,isFlipAnimated:C,onPick:S}=((e,t,i,n)=>{const r=(0,s.useMemo)((()=>{const t=e.flatMap((e=>[Object.assign(Object.assign({},e),{id:p(e.id),pairId:f(e.id)}),Object.assign(Object.assign({},e),{id:f(e.id),pairId:p(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:m.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)===m.FACEUP}),[a]),d=(0,s.useCallback)((e=>{var t;return(null===(t=a.get(e))||void 0===t?void 0:t.status)===m.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,onPick:e=>{const r=a.get(e);if(r.status!==m.FACEDOWN)return;const s=[...a.values()].filter((e=>e.status===m.FACEUP));if(0===s.length)a.set(r.id,Object.assign(Object.assign({},r),{status:m.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:m.BURNED,isFlipAnimated:!1})),a.set(r.id,Object.assign(Object.assign({},r),{status:m.BURNED,isFlipAnimated:!0})),t()):(a.set(r.id,Object.assign(Object.assign({},r),{status:m.FACEUP,isFlipAnimated:!0})),i())}else 2===s.length&&(s.forEach((e=>{a.set(e.id,Object.assign(Object.assign({},e),{status:m.FACEDOWN}))})),a.set(r.id,Object.assign(Object.assign({},r),{status:m.FACEUP,isFlipAnimated:!0})));o(new Map(a)),[...a.values()].every((e=>e.status===m.BURNED))&&n()}}})(i,(()=>{setTimeout((()=>{v()}),g.rl)}),(()=>{setTimeout((()=>{y()}),g.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"]}))}),g.rl)})),[j,O]=(0,s.useState)((()=>Array.from({length:A.length},((e,t)=>t))));return(0,s.useEffect)((()=>{const e=setTimeout((()=>{O((e=>[...e].sort(b).reverse()))}),g.rl);return()=>clearTimeout(e)}),[]),(0,n.jsxs)(c.NP,{theme:t,children:[(0,n.jsx)(h.m,{ref:x}),(0,n.jsx)(h.V,{totalItems:A.length,children:(0,n.jsx)(l.N,{children:A.map(((e,t)=>(0,n.jsx)(d.P.div,{layout:!0,style:{order:j[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,fitImages:a,flipped:$(e.id)||w(e.id),burned:w(e.id),flipAnimated:C(e.id),onClick:()=>S(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",$=(e,t)=>{(0,a.p)({getTargetNodeItem:()=>e.item,initialState:void 0,renderApp:()=>{const{itemList:i,coverImage:a,fitImages:s}=e.config,o=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 l=()=>{t.playAudio({source:x})},d=()=>{t.playAudio({source:A})};return()=>(0,n.jsx)(v,{theme:t.theme,images:o,coverImageSrc:String(a.source),fitImages:s,onSuccess:l,onFailure:d})}})(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 m(){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 p(){o=!1,l.forEach((e=>{e()})),l.length=0}null===c||void 0===c||c.on(r.q.Mount,(()=>{m()})),null===c||void 0===c||c.on(r.q.Unmount,(()=>{p()})),c&&"isTransversal"in c&&c.isTransversal?m():null===u||void 0===u||u.on(a.m.Entering,(()=>{o||m()})),null===u||void 0===u||u.on(a.m.Exited,(()=>{c&&"isTransversal"in c&&c.isTransversal||o&&p()}))}}}}]);
//# sourceMappingURL=https://s3-static-genially.genially.com/view/static/js/5086.e3ff7b5f.chunk.js.map