@gamelearn/arcade-components 3.18.1 → 3.18.3

package/dist/arcade-components.cjs

@@ -271,5 +271,5 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
           ${l.thinkful?"speech-bubble--italic":""}
       `,children:[jsxRuntimeExports.jsxs("div",{className:`speech-bubble__header ${l.thinkful?"speech-bubble__header--thinking":""}`,children:[l.thinkful?jsxRuntimeExports.jsx("div",{className:"thinking-icon-wrap",children:jsxRuntimeExports.jsx("div",{className:"icon-bubble-thinkful-black"})}):null,l.avatar?jsxRuntimeExports.jsx("div",{className:"speech-bubble__avatar",children:jsxRuntimeExports.jsx("img",{src:o(),alt:l.name})}):null,l.voiceOver?jsxRuntimeExports.jsx("div",{className:"speech-bubble__avatar",children:jsxRuntimeExports.jsx("div",{className:"icon-narrator"})}):null,jsxRuntimeExports.jsxs("div",{className:"speech-bubble__name",children:[jsxRuntimeExports.jsx("span",{children:l.name}),l.thinkful?jsxRuntimeExports.jsxs("span",{children:["[ ",e("emotion.thinking")," ]"]}):null]})]}),l.text?jsxRuntimeExports.jsx("div",{className:"speech-bubble__text",children:HTMLReactParser$1(l.text)}):null]})}const SpeechBubbleComponent$1=React$2.forwardRef(SpeechBubbleComponent);function BubbleWrapper({currentMessage:l,translate:e}){const n=document.querySelector(".screens--container");return jsxRuntimeExports.jsx("group",{children:jsxRuntimeExports.jsx(arcadeThreeCore.HtmlPro,{wrapperClass:"htmlpro-wrap-100-h",onOcclude:()=>null,zIndexRange:[5,5],portal:n?{current:n}:void 0,style:{width:"100vw",height:"100%",position:"static"},calculatePosition:()=>[0,0],children:jsxRuntimeExports.jsx(SpeechBubbleComponent$1,{translate:e,message:l})})})}const cleanStyle={width:"100vw",height:"100%",position:"static"};function DialogDecision(l){const e=document.querySelector(".screens--container");return React$2.useEffect(()=>(l.onMount&&l.onMount(),()=>{l.onUnMount&&l.onUnMount()}),[]),jsxRuntimeExports.jsx(arcadeThreeCore.HtmlPro,{wrapperClass:"htmlpro-wrap-100-h",zIndexRange:[6,6],style:cleanStyle,portal:e?{current:e}:void 0,onOcclude:()=>{},calculatePosition:()=>[0,0],children:jsxRuntimeExports.jsx(DecisionComponent,{inScene:!0,...l})})}const cache={},loader=new GLTFLoader;function useStateMachine(l){const e=fiber.useThree(u=>u.scene),n=React$2.useMemo(()=>{var p;const u={};for(const x of l)if(x.slots)for(const R of x.slots){if(!R.uid)continue;const S=(p=R.character)==null?void 0:p.resource.animations;S&&(u[R.uid]||(u[R.uid]=Object.keys(S).reduce((E,g)=>(E[g]=S[g].url,E),{})))}return u},[l]),t=React$2.useMemo(()=>{const u=new Set;for(const p of l)if(p.slots)for(const x of p.slots)x.uid&&u.add(x.uid);return Array.from(u)},[l]),a=async u=>{const p=n[u];if(!cache[p.talking]){const{animations:R}=await loader.loadAsync(p.talking);R[0].name="talking",cache[p.talking]=R[0]}},o=()=>{t.forEach(u=>{h(u,"idle")})},d=()=>{t.forEach(u=>{const p=e.getObjectByProperty("uid",u);p&&(delete p.userData._active,h(u,"idle"))})},f=async(u,p,x)=>{const R=getCurrentVisible(u,e);if(cache[u]||(cache[u]={}),!R)return new Promise(E=>E(!1));const S=R.userData.animator;if(p){const E=n[u];let g=cache[E.talking],v=p,T=cache[p];if(!T){const{animations:b}=await loader.loadAsync(p);T=cache[p]=b[0]}if(x&&E.talking!==p&&(g?(T=mixWithTalkingClip(g,T),v+="_talking"):a(u).then(()=>{g=cache[E.talking],T=mixWithTalkingClip(g,T),v+="_talking"})),!R.userData._active||R.userData._active!==v){R.userData._active=v;const b=S.register(v,T);return new Promise(_=>{S.mix(v).then(w=>_(w?b:!1))})}}return new Promise(E=>E(!1))},h=async(u,p)=>{const x=getCurrentVisible(u,e);if(cache[u]||(cache[u]={}),!x)return new Promise(S=>S(!1));const R=x.userData.animator;if(p==="idle")return R.mix("idle"),R.getAction("idle");{const S=n[u],E=p.split("_")[0],g=S[E],v=cache[S.talking];if(g){let T=cache[g];if(!T){const{animations:b}=await loader.loadAsync(g);T=cache[g]=b[0]}if(p.includes("talking")&&p!=="talking"&&(T=mixWithTalkingClip(v,T)),!x.userData._active||x.userData._active!==p){x.userData._active=p;const b=R.register(p,T);return new Promise(_=>{R.mix(p).then(w=>_(w?b:!1))})}}}return new Promise(S=>S(!1))};return{startAnimation:h,startAnimationUrl:f,preloadTalking:a,resetActives:o,unmountActives:d}}const characterMs=75,minMs=1400,headSize=2,raycast=new three.Raycaster,animationTarget=new three.Object3D,maxCharacterToSwitch=70;raycast.firstHitOnly=!0;function DialogComponent({keyboardControl:l,emitEvent:e,lines:n,actors:t,edges:a,soundActions:o,zoomInActor:d,autoPlay:f,autoEnd:h,pause:u,progress:p}){var Pt;const x=n.length-1<=(p==null?void 0:p.line)?n.length-1:(p==null?void 0:p.line)||0,[R,S]=React$2.useState(x),[E,g]=React$2.useState(!!f),[v,T]=React$2.useState(!1),[b,_]=React$2.useState(!1),w=fiber.useThree(Ne=>Ne.scene),C=fiber.useThree(Ne=>Ne.camera),{start:P,stop:D}=useTimeout(),N=React$2.useRef([]),k=React$2.useMemo(()=>C.clone(),[]),F=React$2.useRef({pos:[0,0,0],child:null}),M=n[R],U=n[R-1],$=React$2.useRef(!1),B=!!a,{voiceOver:J,decision:re}=M||{},ae=React$2.useRef({}),Q=(Pt=M==null?void 0:M.slots)==null?void 0:Pt.find(Ne=>Ne.talking),K=React$2.useRef(!1),{startAnimation:ne,startAnimationUrl:ue,resetActives:fe,preloadTalking:te,unmountActives:H}=useStateMachine(n),W=React$2.useRef(),V=Object.keys((M==null?void 0:M.audio)||{}).length,z=Object.keys((M==null?void 0:M.voice)||{}).length,q=J||(M==null?void 0:M.type)==="conversationalNarration",ee=re||(M==null?void 0:M.type)==="conversationalDecision",le=(M==null?void 0:M.type)==="conversationalCamera",ce=E&&!ee&&!le,[he,ve]=React$2.useState({text:"",name:"",inScene:!1,thinkful:!1,voiceOver:!1,avatar:"",show:!1}),be=React$2.useMemo(()=>n.reduce((Ne,Je)=>(Je.slots&&Je.slots.filter(wt=>wt.uid).forEach(wt=>{Ne.includes(wt.uid)||Ne.push(wt.uid)}),Ne),[]),[n]),Re=React$2.useCallback(Ne=>e({type:"translate",payload:Ne}),[e]),[Le,Oe]=React$2.useState([]),Ke=React$2.useMemo(()=>Le[Le.length-1],[Le]),St=React$2.useCallback(()=>{const Ne=a.find(ot=>ot.fromId===Ke)||a.find(ot=>ot.toId===Ke),Je=n.find(ot=>ot.id===(Ne==null?void 0:Ne.fromId));return!Ke&&(p==null?void 0:p.line)>=0?{decision:!0}:Je},[a,n,Ke]),it=React$2.useCallback(()=>{if(B){const Je=St();return Je==null?void 0:Je.decision}const Ne=n[R-1]?n[R-1]:{};return R>0&&(Ne==null?void 0:Ne.decision)},[M,B,n,Ke,a]),gt=React$2.useCallback(()=>{if(B){const Je=St();return(Je==null?void 0:Je.type)==="conversationalCamera"}const Ne=n[R-1]?n[R-1]:{};return R>0&&(Ne==null?void 0:Ne.type)==="conversationalCamera"},[M,B,n,Ke,a]),Ge=React$2.useCallback(Ne=>{var ot,wt;const Je=t.find($e=>($e==null?void 0:$e.uid)===(Ne==null?void 0:Ne.uid)?$e:"");return((wt=(ot=Ne==null?void 0:Ne.character)==null?void 0:ot.resource)==null?void 0:wt.url)||(Je==null?void 0:Je.completeUrl)||""},[t]),Me=(Ne=()=>{})=>{if(K.current)K.current&&(K.current=!1);else{C.updateProjectionMatrix(),C.updateMatrixWorld(!0);const Je=F.current.child?F.current.pos:k.position.toArray();if(animationTarget.position.fromArray(Je),F.current.parent){animationTarget.quaternion.equals(C.quaternion)||animationTarget.applyQuaternion(C.quaternion);const ot=F.current.isLeft?-1:1,wt=headSize*ot;animationTarget.translateX(-10*ot+wt),animationTarget.translateY(-2),animationTarget.translateZ(30)}gsapWithCSS.to(C.position,{duration:.9,ease:"power3.easeInOut",onStart:()=>{K.current=!0},onUpdate:()=>{N.current.length&&N.current.forEach(ot=>{const{object:wt}=ot;wt.material.visible=!0})},onComplete:()=>{Ne(),raycast.set(C.getWorldPosition(new three.Vector3(0,0,0)),C.getWorldDirection(new three.Vector3));const ot=raycast.intersectObjects(w.children,!0);N.current=ot.filter(wt=>wt.distance<10),N.current.length&&N.current.forEach(wt=>{const{object:$e}=wt;$e.material.side=0}),K.current=!1,$.current&&e({type:"success"}),F.current.child||C.copy(k)},...animationTarget.position})}},De=React$2.useCallback(()=>{F.current.child=null,F.current.parent=null,d&&Me()},[d]),Ve=(Ne,Je,ot,wt=!1)=>{const $e=Je.includes("seated");ot?ue(Ne,ot.url,Je.includes("talking")).then(Ft=>{Ft&&BASIC_ACTIONS_TYPES_WHITELIST.includes(ot.animationId)&&($.current?ne(Ne,"idle"):ne(Ne,W.current===Ne?"neutral_talking":"neutral"))}):ne(Ne,wt&&!$e?`${Je}-seated`:Je)},ct=()=>{if(!(Q!=null&&Q.emotion)||$.current)return;const{emotion:Ne,uid:Je,animation:ot}=Q,wt=getCurrentVisible(Je,w);if(wt){const{isSeated:$e}=wt;te(Je).then(()=>{Ve(Je,$e&&!Ne.includes("seated")?`${Ne}-seated_talking`:`${Ne}_talking`,ot,$e),ot&&BASIC_ACTIONS_TYPES_WHITELIST.includes(ot.animationId)&&(W.current=Je)})}},dt=()=>{if(!(Q!=null&&Q.uid)||$.current)return;const{emotion:Ne,uid:Je,animation:ot}=Q,wt=getCurrentVisible(Je,w);if(wt){const{isSeated:$e}=wt;W.current===Je?(Ve(Je,"neutral",null,$e),W.current=null):Ve(Je,Ne,ot,$e)}},rt=React$2.useCallback(()=>{$.current=!0,ve({show:!1}),De(),fe(),d||e({type:"success"})},[C,e,De,d]);React$2.useEffect(()=>()=>{ae.current={},H()},[]);const xt=Ne=>{ve({show:!1}),S(Ne),e({type:"notifyProgress",payload:{line:Ne}})},Et=React$2.useCallback((Ne=!0)=>{const Je=Ne?["fromId","toId"]:["toId","fromId"],ot=a.filter(Ft=>Ft[Je[0]]===M.id),wt=ot.length===1?ot[0]:ot.find(Ft=>Ft[Je[1]]===Ke);if(!(wt!=null&&wt[Je[0]])){rt();return}Ne||Oe(Le.slice(0,Le.length-1));const $e=n.findIndex(Ft=>Ft.id===wt[Je[1]]);$e>=0?xt($e):rt()},[M==null?void 0:M.id,e,a,rt,n]),Qe=React$2.useCallback((Ne,Je)=>{const ot=[3,2,1][Ne.id],$e=a.filter(At=>At.fromId===(M==null?void 0:M.id)).find(At=>parseInt(At.fromPointIndex)===ot),Ft=n.findIndex(At=>At.id===($e==null?void 0:$e.toId));Ft>=0?($e==null?void 0:$e.fromId)===($e==null?void 0:$e.toId)?Je():xt(Ft):rt()},[M==null?void 0:M.id,a,rt,n]),Be=React$2.useCallback(()=>{if(ae.current={...Q},_(!1),dt(),B)Et(!1);else if(!it()){const Ne=R-1;ve({show:!1}),S(Ne),e({type:"notifyProgress",payload:{line:Ne}})}},[Et,e,B,U,R,Q]),Xe=React$2.useCallback(Ne=>{if(B){if(Ne){const Je=[3,2,1][Ne.id],wt=a.filter($e=>$e.fromId===M.id).find($e=>parseInt($e.fromPointIndex)===Je);if(wt){const $e=n.findIndex(Ft=>Ft.id===wt.toId);$e>=0&&e({type:"notifyProgress",payload:{line:$e}})}else e({type:"saveNode"})}}else if(R<n.length-1){const Je=R+1;e({type:"notifyProgress",payload:{line:Je}})}else e({type:"saveNode"})},[a,R,n,e,M==null?void 0:M.id,B]),Ye=React$2.useCallback((Ne,Je)=>{if(ae.current={...Q},Oe([...Le,M.id]),_(!1),dt(),B)Ne?Qe(Ne,Je):Et();else if(R<n.length-1){const ot=R+1;xt(ot)}else(h||ee||le)&&rt()},[e,M==null?void 0:M.id,B,ee,le,R,n.length,Qe,Et,rt,Q]),Pe=()=>{g(!1),Be()},Ae=()=>B?M&&M.type!=="conversationalDecision"&&!a.find(Ne=>Ne.fromId===M.id):R===n.length-1,_e=()=>{Ae()?rt():(g(!1),Ye())};React$2.useEffect(()=>{if(B&&!v){const Ne=p==null?void 0:p.line;if(Ne>=0){T(!0),S(Ne);return}const Je=n.filter(ot=>!a.find(wt=>wt.toId===ot.id));if(Je.length){const ot=Je[0],wt=n.indexOf(ot);wt>=0&&(T(!0),S(wt))}}},[a,B,n,v]);const Ie=Ne=>{if(ae.current.uid===Ne.uid||F.current.parent===Ne)return;const Je=new three.Object3D,ot=Ne.getObjectByName("Head_M");ot.updateMatrixWorld(!0),Je.applyMatrix4(ot.matrixWorld),Je.applyQuaternion(C.quaternion);const wt=d?2.5:2,$e=d?1.2:1.5;Je.translateY(wt),Je.translateX($e);const Ft=new three.Vector3;Ft.setFromMatrixPosition(ot.matrixWorld);const xe=Ft.project(C).x<0;F.current={pos:Je.position.toArray(),child:ot,parent:Ne,isLeft:xe}},tt=Ne=>{e({type:"resetZIndexUIContainer",payload:Ne})};React$2.useEffect(()=>{var Ne;if(q)De(),ve({text:M==null?void 0:M.text,name:(M==null?void 0:M.alias)||(M==null?void 0:M.name)||`[ ${Re("storylines.misc.voiceOver")} ]`,inScene:!1,voiceOver:!0,thinkful:!1,top:!1,avatar:Ge(Q),show:!0});else if(!$.current&&!ee&&!le){const Je=M==null?void 0:M.slots.filter($e=>$e.uid&&!$e.talking),ot=[...Je.map($e=>$e.uid)||[],Q==null?void 0:Q.uid];if(be.filter($e=>!ot.includes($e)).forEach($e=>{ne($e,"idle")}),Je.forEach($e=>{const Ft=getCurrentVisible($e.uid,w);if(Ft){const{isSeated:At}=Ft;Ve($e.uid,$e.emotion,$e.animation,At)}}),Q){const $e=getCurrentVisible(Q.uid,w),Ft=t.find(At=>At.uid===Q.uid);$e&&!$.current?setTimeout(()=>{var At,xe;if(Q.uid===$e.uid){Ie($e);const{isSeated:ie,userData:me}=$e,{emotion:Ee,animation:we}=Q;!((At=me._active)!=null&&At.includes("talking"))&&!((xe=me._active)!=null&&xe.includes(Ee))&&Ve(Q.uid,Ee,we,ie);const de=()=>{var Se;ve({text:Q.text,name:Q.alias||((Se=Q.character)==null?void 0:Se.name),inScene:!0,thinkful:Q.emotion.includes("think"),avatar:Ge(Q),show:!0})};d?(K.current=!1,Me(de)):de()}},150):(De(),ve({text:Q.text,name:Q.alias||((Ne=Q.character)==null?void 0:Ne.name)||(Ft==null?void 0:Ft.name),left:!1,top:Q.text.length>maxCharacterToSwitch,inScene:!1,thinkful:Q.emotion.includes("think"),avatar:Ge(Q),show:!0}))}else De(),ve({show:!0})}},[t,M,d,w,Re,Ge,De,ee,q,be]);const Gt=useEkho({audioType:M==null?void 0:M.audioType,volume:M==null?void 0:M.audioVolume,voice:M==null?void 0:M.voice,started:he.show,text:cleanTextOfHtmlTags(he==null?void 0:he.text),audio:M==null?void 0:M.audio,slide:R,soundActions:o,emitEvent:e,pauseTTS:u,onStart:()=>{var Ne;(Ne=Q==null?void 0:Q.emotion)!=null&&Ne.includes("think")||ct()},onError:()=>{dt(),_(!0)},onFinish:()=>{dt(),ce&&!u&&Ye()}});React$2.useEffect(()=>(Gt(),()=>{Gt()}),[R,Gt]),React$2.useEffect(()=>{var Ne;if(((M==null?void 0:M.audioType)==="none"||b)&&(he!=null&&he.show)&&!(Q!=null&&Q.emotion.includes("think"))){ct();const Je=characterMs*(((Ne=he==null?void 0:he.text)==null?void 0:Ne.length)||0);setTimeout(()=>{dt()},Je<minMs?minMs:Je)}},[b,M==null?void 0:M.audioType,Q==null?void 0:Q.emotion,he]),React$2.useEffect(()=>{var Ne;if(ce&&he.show&&((M==null?void 0:M.audioType)==="none"||b)&&!u){const Je=characterMs*(((Ne=he==null?void 0:he.text)==null?void 0:Ne.length)||0);(!Ae()||Ae()&&h)&&P(Ye,Je<minMs?minMs:Je)}return()=>{D()}},[he,Ye,P,h,D,M==null?void 0:M.audioType,ce,V,z,b]);const Dt=React$2.useMemo(()=>R===0||it()||gt(),[R,it,gt]),ke=l({disabled:ee||!he.show,repeat:!1,forward:_e,rewind:Dt?null:Pe});React$2.useEffect(()=>ke(),[ke]);const mt=document.querySelector(".screens--container");if(le)return jsxRuntimeExports.jsx(ChangeCamera,{...M,emitEvent:e,success:!1,onFinish:Ye},`change-camera-${R}`);if(ee){const Ne=M.id?n.filter(ot=>ot.decision).findIndex(ot=>ot.id===M.id)+1:n.filter(ot=>ot.decision).findIndex(ot=>ot===M)+1,Je={...M.payload,decisionNumber:Ne,inheritProps:{slots:[],disableBackground:!0},required:!B,branched:B,onAddPoints:Xe,onFinish:Ye,emitEvent:e,pause:u,soundActions:o,keyboardControl:l,onMount:()=>{De(),tt(!0)},onUnMount:()=>{K.current=!1,tt(!1)}};return jsxRuntimeExports.jsx(DialogDecision,{...Je})}return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[he.text?jsxRuntimeExports.jsx(BubbleWrapper,{translate:Re,currentMessage:he}):null,jsxRuntimeExports.jsx(arcadeThreeCore.HtmlPro,{wrapperClass:"htmlpro-wrap-100-h",style:{width:"100vw",height:"100%",position:"static"},portal:mt?{current:mt}:void 0,zIndexRange:[6,6],onOcclude:()=>{},calculatePosition:()=>[0,0],children:jsxRuntimeExports.jsxs("div",{dir:LangIsRtl()?"rtl":"ltr",className:"dialog-component-controls",children:[jsxRuntimeExports.jsx("button",{type:"button",onClick:Pe,disabled:Dt||!he.show,className:`gat--btn__round ${Dt||!he.show?"disabled":""}`,"aria-label":LangIsRtl()?Re("storylines.misc.forward"):Re("storylines.misc.rewind"),children:jsxRuntimeExports.jsx("span",{className:LangIsRtl()?"icon-next":"icon-back"})}),jsxRuntimeExports.jsx("button",{type:"button",onClick:_e,disabled:!he.show,className:`gat--btn__round 
               ${he.show?"":"disabled"}
-              ${E&&Ae()?"glowing-animation":""}`,"aria-label":LangIsRtl()?Re("storylines.misc.rewind"):Re("storylines.misc.forward"),children:jsxRuntimeExports.jsx("span",{className:LangIsRtl()?"icon-back":"icon-next"})})]})})]})}const activeCache=arcadeThreeCore.ProgressManager.request("AssetLoader").cache,assetLoader=new arcadeThreeCore.AssetLoader(void 0,activeCache);function Animation({animation:l,loopTimes:e,onAnimationFinish:n,onAnimationSave:t,resource:a,makeDefault:o,emitEvent:d}){const f=fiber.useThree(p=>p.scene),h=React$2.useRef(1),u=React$2.useRef();return React$2.useEffect(()=>{if(!u.current){const p=f.getObjectByProperty("uid",a.uid);if(p&&l&&p.skeletonId===l.skeletonId)if(o)t({uid:a.uid,animation:l.id,index:p.index}),n(l);else{const x=p.userData.animator,R=()=>{x.getAction(l.url).setLoop(three.LoopRepeat,1/0),h.current=1;function E(){h.current>=e&&(x.mix("idle"),n(l),x.removeEventListener("loop",E)),h.current+=1}x.mix(l.url).then(g=>{g&&x.addEventListener("loop",E)})};x.getAction(l.url)?R():assetLoader.load(l.url,S=>{x.register(l.url,S.animations[0]),R()})}else n(l);u.current=l.id}},[f,l.url,e,d,a.uid,o,l,a,n,t]),null}function MultipleAnimation({animations:l=[],enableInteraction:e,emitEvent:n}){const[t,a]=React$2.useState(!1),o=l.length,d=React$2.useRef(0),f=()=>{d.current+=1,d.current>=o&&a(!0)},h=u=>{n({type:"saveAnimation",payload:u})};return React$2.useEffect(()=>{t&&n({type:"success"})},[n,t]),React$2.useEffect(()=>{e&&a(!0)},[e]),l.map(({animation:u,resource:p,...x})=>jsxRuntimeExports.jsx(Animation,{animation:u,resource:p,...x,onAnimationSave:h,onAnimationFinish:f},`${u.id}_${p.uid}`))}function EmailPill({text:l,error:e,handleClick:n}){return jsxRuntimeExports.jsxs("div",{"data-testid":`${e?" pill--error":"pill--ok"}`,className:`email-pill ${e?" email-pill--error":""}`,children:[jsxRuntimeExports.jsx("div",{children:l}),jsxRuntimeExports.jsx("div",{className:"email-pill__delete",children:jsxRuntimeExports.jsx("button",{type:"button",onClick:n,className:"icon-close unset-button","aria-label":"icon click"})})]})}function StepOne({handleContinue:l,handleCancel:e,translate:n,text:t}){const[a,o]=React$2.useState([]),[d,f]=React$2.useState(0),[h,u]=React$2.useState(0),p=React$2.useRef(null),x=(g,v,T)=>{g.stopPropagation(),o(a.filter(b=>b!==a[T])),v.error&&f(d-1),v.isRepeat&&u(h-1)},R=()=>{p.current&&p.current.focus()},S=()=>{[" ",",",";","."].includes(p.current.value)&&(p.current.value="")},E=g=>{const v=p.current.value,T=["Space","Comma","Period","Enter"],b=["Space","Comma","Enter","Tab"];v===""&&(T.includes(g.code)||g.keyCode==="186"||g.key==="Enter"||g.key===" ")?g.preventDefault():p.current.value.length>1&&(b.includes(g.code)||g.type==="blur")&&(g.preventDefault(),/[A-Za-z0-9._%+-]{3,}@[A-Za-z0-9_+-]{2,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})/.test(v)?a.find(w=>w.text===v)?(u(h+1),o([...a,{text:v,error:!0,isRepeat:!0}])):o([...a,{text:v}]):(o([...a,{text:v,error:!0}]),f(d+1)),p.current.value="")};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs("div",{className:"referrals-piece__body",children:[jsxRuntimeExports.jsx("div",{className:"referrals-piece__title",children:n("puzzles.referrals.inviter.titleStep1")}),jsxRuntimeExports.jsx("div",{className:"referrals-piece__subtitle",children:t}),jsxRuntimeExports.jsxs("div",{className:"referrals-piece__form",children:[jsxRuntimeExports.jsxs("div",{className:"referrals-piece__instructions",children:[jsxRuntimeExports.jsx("div",{dir:"auto",children:n("puzzles.referrals.inviter.instructions")}),jsxRuntimeExports.jsx("div",{dir:"auto",children:n("puzzles.referrals.inviter.limit")})]}),jsxRuntimeExports.jsx("div",{className:"referrals-piece__faketextarea",onKeyUp:()=>{},role:"button",tabIndex:"-1",onClick:R,"aria-labelledby":"list of emails",children:jsxRuntimeExports.jsxs("div",{className:"referrals-piece__scrollarea",id:"list of emails",children:[a&&a.map((g,v)=>jsxRuntimeExports.jsx(EmailPill,{text:g.text,error:g.error,handleClick:T=>x(T,g,v),emailPillIndex:v},`${a.indexOf(g)}`)),a.length<=9?jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("input",{id:"email",ref:p,className:"referrals-piece__inputemail",onChange:S,onKeyDown:E,onBlur:E,type:"email",autoComplete:"off"}),jsxRuntimeExports.jsx("label",{className:"referrals-piece__emaillabel",htmlFor:"email",children:jsxRuntimeExports.jsx("span",{children:n("puzzles.referrals.inviter.skipButton")})})]}):null]})}),jsxRuntimeExports.jsxs("div",{dir:LangIsRtl()?"rtl":"auto",className:"referrals-piece__footervalidation",children:[jsxRuntimeExports.jsxs("div",{className:"referrals-piece__errormessage",children:[jsxRuntimeExports.jsx("div",{children:h>0?n("puzzles.referrals.inviter.errorEmailRepeat"):null}),jsxRuntimeExports.jsx("div",{children:d>0?n("puzzles.referrals.inviter.errorMessage"):null})]}),jsxRuntimeExports.jsxs("div",{className:"referrals-piece__counter","data-testid":"pillcounter",children:[a.length,"/10"]})]})]})]}),jsxRuntimeExports.jsxs("div",{className:"referrals-piece__buttons",children:[jsxRuntimeExports.jsx("button",{"data-testid":"cancelButton",className:"gat--btn gat--btn__secondary",type:"button",onClick:e,children:n("puzzles.referrals.inviter.skipButton")}),jsxRuntimeExports.jsx("button",{className:`gat--btn gat--btn__primary ${h>0||d>0||a.length===0?" disabled":""}`,type:"button",disabled:d>0||a.length===0,onClick:()=>l(a),children:n("puzzles.referrals.inviter.inviteButton")})]})]})}function StepTwo({handleFinish:l,translate:e,valid:n,invalid:t}){const[a,o]=React$2.useState(!1),d=()=>{o(!a)},f=n===1?"invitationSend":"invitationsSend",h=t===1?"invitationNotSend":"invitationsNotSend";return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs("div",{className:"referrals-piece__body",dir:"auto",children:[jsxRuntimeExports.jsx("div",{className:"referrals-piece__title",children:e("puzzles.referrals.inviter.titleStep2")}),jsxRuntimeExports.jsxs("ul",{className:"referrals-piece__feedback",children:[!!n.current&&jsxRuntimeExports.jsxs("li",{children:[jsxRuntimeExports.jsx("div",{className:"referrals-piece__feedbackicon icon-check-circle-black color--success"}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("strong",{children:n.current})," ",e(`puzzles.referrals.inviter.${f}`)]})]}),!!t.current&&jsxRuntimeExports.jsxs("li",{children:[jsxRuntimeExports.jsx("div",{className:"referrals-piece__feedbackicon icon-error-circle-black color--error"}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("strong",{children:t.current})," ",e(`puzzles.referrals.inviter.${h}`)]}),jsxRuntimeExports.jsx("button",{className:"un-button",type:"button",onClick:d,children:e("puzzles.referrals.inviter.whyFail")})]})]}),a?jsxRuntimeExports.jsxs("ul",{className:"referrals-piece__failsreasons",children:[jsxRuntimeExports.jsx("li",{children:e("puzzles.referrals.inviter.failReasons1")}),jsxRuntimeExports.jsx("li",{children:e("puzzles.referrals.inviter.failReasons2")}),jsxRuntimeExports.jsx("li",{children:e("puzzles.referrals.inviter.failReasons3")})]}):null]}),jsxRuntimeExports.jsx("div",{className:"referrals-piece__buttons",children:jsxRuntimeExports.jsx("button",{className:"gat--btn gat--btn__primary",type:"button",onClick:l,children:e("puzzles.referrals.inviter.continueButton")})})]})}function ReferralComponent({emitEvent:l,text:e,rewards:n,referrals:t}){const a=R=>l({type:"translate",payload:R}),[o,d]=React$2.useState("step1"),f=React$2.useRef(0),h=React$2.useRef(0),u=async R=>{const S=R.map(g=>g.text),E=await l({type:"sendReferrals",payload:S});f.current=E&&E.data?E.data.valid.length:0,h.current=S.length-f.current,d("step2")};if(!t)return l({type:"success"}),null;const p=()=>{l({type:"success"})},x=()=>{if(f.current){const R=n.map(S=>(S.points*=f.current,S));l({type:"addPoints",complex:!0,finish:!0,payload:R})}else l({type:"success"})};return jsxRuntimeExports.jsx("div",{className:"referrals-piece",children:jsxRuntimeExports.jsxs("div",{className:"referrals-piece__center",children:[o==="step1"&&jsxRuntimeExports.jsx(StepOne,{translate:a,handleContinue:u,handleCancel:p,text:e}),o==="step2"&&jsxRuntimeExports.jsx(StepTwo,{translate:a,handleFinish:x,valid:f,invalid:h})]})})}exports.AnimationComponent=MultipleAnimation;exports.AutoEvaluationComponent=AutoEvaluation;exports.CardsSelectorPuzzleComponent=CardsSelectorPuzzleComponent;exports.CartelComponent=CartelComponent;exports.ChainedImageClickPuzzleComponent=ChainedImageClickPuzzleComponent;exports.ChangeCamera=ChangeCamera;exports.ComicComponent=ComicComponent;exports.ConversationalComponent=ConversationalComponent;exports.ConversationalProComponent=ConversationalProComponent;exports.CrackerPuzzleComponent=CrackerPuzzleComponent;exports.DecisionComponent=DecisionComponent;exports.DialogComponent=DialogComponent;exports.DragItemPuzzleComponent=DragItemPuzzleComponent;exports.FrameImageClickComponent=FrameImageClickComponent;exports.HackerPuzzleComponent=HackerPuzzleComponent;exports.HangedPuzzleComponent=HangedPuzzleComponent;exports.ImageClickPuzzleComponent=ImageClickPuzzleComponent;exports.ImageComponent=ImageComponent;exports.InventoryItem=InventoryItem;exports.KeyboardPuzzleComponent=KeyboardPuzzleComponent;exports.LecturesComponent=LecturesComponent;exports.LoginPuzzleComponent=LoginPuzzleComponent;exports.NoticeComponent=NoticeComponent;exports.PatternComponent=PatternComponent;exports.PdfComponent=PdfComponent;exports.PdfVisor=PdfVisor;exports.ReferralComponent=ReferralComponent;exports.SurveyComponent=SurveyComponent;exports.TerminalPuzzleComponent=TerminalPuzzleComponent;exports.TestComponent=TestComponent;exports.TextClickPuzzleComponent=TextClickPuzzleComponent;exports.UrlComponent=UrlComponent;exports.VideoComponent=VideoComponent;exports.VideoVisor=VideoVisor;exports.WebBuilderPuzzleComponent=WebBuilderPuzzleComponent;exports.WriterPuzzleComponent=WriterPuzzleComponent;
+              ${E&&Ae()?"glowing-animation":""}`,"aria-label":LangIsRtl()?Re("storylines.misc.rewind"):Re("storylines.misc.forward"),children:jsxRuntimeExports.jsx("span",{className:LangIsRtl()?"icon-back":"icon-next"})})]})})]})}const activeCache=arcadeThreeCore.ProgressManager.request("AssetLoader").cache,assetLoader=new arcadeThreeCore.AssetLoader(void 0,activeCache);function Animation({animation:l,loopTimes:e,onAnimationFinish:n,onAnimationSave:t,resource:a,makeDefault:o}){const[d,f]=React$2.useState(!1),h=fiber.useThree(p=>p.scene),u=React$2.useRef(1);return React$2.useEffect(()=>{f(!1)},[a.uid,l==null?void 0:l.url]),React$2.useEffect(()=>{if(!d){const p=h.getObjectByProperty("uid",a.uid);if(p&&l&&l.url&&p.skeletonId===(l==null?void 0:l.skeletonId))if(o)t({uid:a.uid,animation:l==null?void 0:l.id,index:p.index}),n();else{const x=p.userData.animator,R=()=>{x.getAction(l.url).setLoop(three.LoopRepeat,1/0),u.current=1;function E(){u.current>=e&&(x.mix("idle"),n(),x.removeEventListener("loop",E)),u.current+=1}x.mix(l==null?void 0:l.url).then(g=>{g&&x.addEventListener("loop",E)}),f(!0)};x.getAction(l==null?void 0:l.url)?R():assetLoader.load(l==null?void 0:l.url,S=>{x.register(l==null?void 0:l.url,S.animations[0]),R()},void 0,S=>{console.error(`Asset loader failed with: ${l.url}`,S),n()})}else n()}},[h,l==null?void 0:l.url,e,d,a.uid,o,l,a,n,t]),null}function MultipleAnimation({animations:l=[],enableInteraction:e,emitEvent:n}){const t=l.length,a=React$2.useRef(0),o=()=>{a.current+=1,a.current>=t&&e&&n({type:"success"})},d=f=>{n({type:"saveAnimation",payload:f})};return React$2.useEffect(()=>{a.current=0},[l]),React$2.useEffect(()=>{e||n({type:"success"})},[n,e]),l.map(({animation:f,...h},u)=>{var p;return jsxRuntimeExports.jsx(Animation,{animation:f,...h,onAnimationFinish:o,onAnimationSave:d},(f==null?void 0:f.id)||((p=h.resource)==null?void 0:p.uid)||u)})}function EmailPill({text:l,error:e,handleClick:n}){return jsxRuntimeExports.jsxs("div",{"data-testid":`${e?" pill--error":"pill--ok"}`,className:`email-pill ${e?" email-pill--error":""}`,children:[jsxRuntimeExports.jsx("div",{children:l}),jsxRuntimeExports.jsx("div",{className:"email-pill__delete",children:jsxRuntimeExports.jsx("button",{type:"button",onClick:n,className:"icon-close unset-button","aria-label":"icon click"})})]})}function StepOne({handleContinue:l,handleCancel:e,translate:n,text:t}){const[a,o]=React$2.useState([]),[d,f]=React$2.useState(0),[h,u]=React$2.useState(0),p=React$2.useRef(null),x=(g,v,T)=>{g.stopPropagation(),o(a.filter(b=>b!==a[T])),v.error&&f(d-1),v.isRepeat&&u(h-1)},R=()=>{p.current&&p.current.focus()},S=()=>{[" ",",",";","."].includes(p.current.value)&&(p.current.value="")},E=g=>{const v=p.current.value,T=["Space","Comma","Period","Enter"],b=["Space","Comma","Enter","Tab"];v===""&&(T.includes(g.code)||g.keyCode==="186"||g.key==="Enter"||g.key===" ")?g.preventDefault():p.current.value.length>1&&(b.includes(g.code)||g.type==="blur")&&(g.preventDefault(),/[A-Za-z0-9._%+-]{3,}@[A-Za-z0-9_+-]{2,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})/.test(v)?a.find(w=>w.text===v)?(u(h+1),o([...a,{text:v,error:!0,isRepeat:!0}])):o([...a,{text:v}]):(o([...a,{text:v,error:!0}]),f(d+1)),p.current.value="")};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs("div",{className:"referrals-piece__body",children:[jsxRuntimeExports.jsx("div",{className:"referrals-piece__title",children:n("puzzles.referrals.inviter.titleStep1")}),jsxRuntimeExports.jsx("div",{className:"referrals-piece__subtitle",children:t}),jsxRuntimeExports.jsxs("div",{className:"referrals-piece__form",children:[jsxRuntimeExports.jsxs("div",{className:"referrals-piece__instructions",children:[jsxRuntimeExports.jsx("div",{dir:"auto",children:n("puzzles.referrals.inviter.instructions")}),jsxRuntimeExports.jsx("div",{dir:"auto",children:n("puzzles.referrals.inviter.limit")})]}),jsxRuntimeExports.jsx("div",{className:"referrals-piece__faketextarea",onKeyUp:()=>{},role:"button",tabIndex:"-1",onClick:R,"aria-labelledby":"list of emails",children:jsxRuntimeExports.jsxs("div",{className:"referrals-piece__scrollarea",id:"list of emails",children:[a&&a.map((g,v)=>jsxRuntimeExports.jsx(EmailPill,{text:g.text,error:g.error,handleClick:T=>x(T,g,v),emailPillIndex:v},`${a.indexOf(g)}`)),a.length<=9?jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("input",{id:"email",ref:p,className:"referrals-piece__inputemail",onChange:S,onKeyDown:E,onBlur:E,type:"email",autoComplete:"off"}),jsxRuntimeExports.jsx("label",{className:"referrals-piece__emaillabel",htmlFor:"email",children:jsxRuntimeExports.jsx("span",{children:n("puzzles.referrals.inviter.skipButton")})})]}):null]})}),jsxRuntimeExports.jsxs("div",{dir:LangIsRtl()?"rtl":"auto",className:"referrals-piece__footervalidation",children:[jsxRuntimeExports.jsxs("div",{className:"referrals-piece__errormessage",children:[jsxRuntimeExports.jsx("div",{children:h>0?n("puzzles.referrals.inviter.errorEmailRepeat"):null}),jsxRuntimeExports.jsx("div",{children:d>0?n("puzzles.referrals.inviter.errorMessage"):null})]}),jsxRuntimeExports.jsxs("div",{className:"referrals-piece__counter","data-testid":"pillcounter",children:[a.length,"/10"]})]})]})]}),jsxRuntimeExports.jsxs("div",{className:"referrals-piece__buttons",children:[jsxRuntimeExports.jsx("button",{"data-testid":"cancelButton",className:"gat--btn gat--btn__secondary",type:"button",onClick:e,children:n("puzzles.referrals.inviter.skipButton")}),jsxRuntimeExports.jsx("button",{className:`gat--btn gat--btn__primary ${h>0||d>0||a.length===0?" disabled":""}`,type:"button",disabled:d>0||a.length===0,onClick:()=>l(a),children:n("puzzles.referrals.inviter.inviteButton")})]})]})}function StepTwo({handleFinish:l,translate:e,valid:n,invalid:t}){const[a,o]=React$2.useState(!1),d=()=>{o(!a)},f=n===1?"invitationSend":"invitationsSend",h=t===1?"invitationNotSend":"invitationsNotSend";return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs("div",{className:"referrals-piece__body",dir:"auto",children:[jsxRuntimeExports.jsx("div",{className:"referrals-piece__title",children:e("puzzles.referrals.inviter.titleStep2")}),jsxRuntimeExports.jsxs("ul",{className:"referrals-piece__feedback",children:[!!n.current&&jsxRuntimeExports.jsxs("li",{children:[jsxRuntimeExports.jsx("div",{className:"referrals-piece__feedbackicon icon-check-circle-black color--success"}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("strong",{children:n.current})," ",e(`puzzles.referrals.inviter.${f}`)]})]}),!!t.current&&jsxRuntimeExports.jsxs("li",{children:[jsxRuntimeExports.jsx("div",{className:"referrals-piece__feedbackicon icon-error-circle-black color--error"}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("strong",{children:t.current})," ",e(`puzzles.referrals.inviter.${h}`)]}),jsxRuntimeExports.jsx("button",{className:"un-button",type:"button",onClick:d,children:e("puzzles.referrals.inviter.whyFail")})]})]}),a?jsxRuntimeExports.jsxs("ul",{className:"referrals-piece__failsreasons",children:[jsxRuntimeExports.jsx("li",{children:e("puzzles.referrals.inviter.failReasons1")}),jsxRuntimeExports.jsx("li",{children:e("puzzles.referrals.inviter.failReasons2")}),jsxRuntimeExports.jsx("li",{children:e("puzzles.referrals.inviter.failReasons3")})]}):null]}),jsxRuntimeExports.jsx("div",{className:"referrals-piece__buttons",children:jsxRuntimeExports.jsx("button",{className:"gat--btn gat--btn__primary",type:"button",onClick:l,children:e("puzzles.referrals.inviter.continueButton")})})]})}function ReferralComponent({emitEvent:l,text:e,rewards:n,referrals:t}){const a=R=>l({type:"translate",payload:R}),[o,d]=React$2.useState("step1"),f=React$2.useRef(0),h=React$2.useRef(0),u=async R=>{const S=R.map(g=>g.text),E=await l({type:"sendReferrals",payload:S});f.current=E&&E.data?E.data.valid.length:0,h.current=S.length-f.current,d("step2")};if(!t)return l({type:"success"}),null;const p=()=>{l({type:"success"})},x=()=>{if(f.current){const R=n.map(S=>(S.points*=f.current,S));l({type:"addPoints",complex:!0,finish:!0,payload:R})}else l({type:"success"})};return jsxRuntimeExports.jsx("div",{className:"referrals-piece",children:jsxRuntimeExports.jsxs("div",{className:"referrals-piece__center",children:[o==="step1"&&jsxRuntimeExports.jsx(StepOne,{translate:a,handleContinue:u,handleCancel:p,text:e}),o==="step2"&&jsxRuntimeExports.jsx(StepTwo,{translate:a,handleFinish:x,valid:f,invalid:h})]})})}exports.AnimationComponent=MultipleAnimation;exports.AutoEvaluationComponent=AutoEvaluation;exports.CardsSelectorPuzzleComponent=CardsSelectorPuzzleComponent;exports.CartelComponent=CartelComponent;exports.ChainedImageClickPuzzleComponent=ChainedImageClickPuzzleComponent;exports.ChangeCamera=ChangeCamera;exports.ComicComponent=ComicComponent;exports.ConversationalComponent=ConversationalComponent;exports.ConversationalProComponent=ConversationalProComponent;exports.CrackerPuzzleComponent=CrackerPuzzleComponent;exports.DecisionComponent=DecisionComponent;exports.DialogComponent=DialogComponent;exports.DragItemPuzzleComponent=DragItemPuzzleComponent;exports.FrameImageClickComponent=FrameImageClickComponent;exports.HackerPuzzleComponent=HackerPuzzleComponent;exports.HangedPuzzleComponent=HangedPuzzleComponent;exports.ImageClickPuzzleComponent=ImageClickPuzzleComponent;exports.ImageComponent=ImageComponent;exports.InventoryItem=InventoryItem;exports.KeyboardPuzzleComponent=KeyboardPuzzleComponent;exports.LecturesComponent=LecturesComponent;exports.LoginPuzzleComponent=LoginPuzzleComponent;exports.NoticeComponent=NoticeComponent;exports.PatternComponent=PatternComponent;exports.PdfComponent=PdfComponent;exports.PdfVisor=PdfVisor;exports.ReferralComponent=ReferralComponent;exports.SurveyComponent=SurveyComponent;exports.TerminalPuzzleComponent=TerminalPuzzleComponent;exports.TestComponent=TestComponent;exports.TextClickPuzzleComponent=TextClickPuzzleComponent;exports.UrlComponent=UrlComponent;exports.VideoComponent=VideoComponent;exports.VideoVisor=VideoVisor;exports.WebBuilderPuzzleComponent=WebBuilderPuzzleComponent;exports.WriterPuzzleComponent=WriterPuzzleComponent;
 //# sourceMappingURL=arcade-components.cjs.map