@gamelearn/arcade-components 3.8.11 → 3.8.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -271,5 +271,5 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
|
|
|
271
271
|
${o.thinkful?"speech-bubble--italic":""}
|
|
272
272
|
`,children:[jsxRuntimeExports.jsxs("div",{className:`speech-bubble__header ${o.thinkful?"speech-bubble__header--thinking":""}`,children:[o.thinkful?jsxRuntimeExports.jsx("div",{className:"thinking-icon-wrap",children:jsxRuntimeExports.jsx("div",{className:"icon-bubble-thinkful-black"})}):null,o.avatar?jsxRuntimeExports.jsx("div",{className:"speech-bubble__avatar",children:jsxRuntimeExports.jsx("img",{src:a(),alt:o.name})}):null,o.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:o.name}),o.thinkful?jsxRuntimeExports.jsxs("span",{children:["[ ",e("emotion.thinking")," ]"]}):null]})]}),o.text?jsxRuntimeExports.jsx("div",{className:"speech-bubble__text",children:o.text}):null]})}const SpeechBubbleComponent$1=React$2.forwardRef(SpeechBubbleComponent);function BubbleWrapper({currentMessage:o,translate:e}){const r=document.querySelector(".screens--container");return jsxRuntimeExports.jsx("group",{children:jsxRuntimeExports.jsx(arcadeThreeCore.HtmlPro,{wrapperClass:"htmlpro-wrap-100-h",onOcclude:()=>null,zIndexRange:[5,5],portal:r?{current:r}:void 0,style:{width:"100vw",height:"100%",position:"static",outline:"1px solid yellow"},calculatePosition:()=>[0,0],children:jsxRuntimeExports.jsx(SpeechBubbleComponent$1,{translate:e,message:o})})})}const cleanStyle={width:"100vw",height:"100vh",position:"static"};function DialogDecision(o){const e=document.querySelector(".screens--container");return React$2.useEffect(()=>(o.onMount&&o.onMount(),()=>{o.onUnMount&&o.onUnMount()}),[]),jsxRuntimeExports.jsx(arcadeThreeCore.HtmlPro,{zIndexRange:[6,6],style:cleanStyle,portal:e?{current:e}:void 0,onOcclude:()=>{},calculatePosition:()=>[0,0],children:jsxRuntimeExports.jsx(DecisionComponent,{inScene:!0,...o})})}const cache={},loader=new GLTFLoader;function useStateMachine(o){const e=fiber.useThree(c=>c.scene),r=React$2.useMemo(()=>{var h;const c={};for(const y of o)if(y.slots)for(const E of y.slots){if(!E.uid)continue;const g=(h=E.character)==null?void 0:h.resource.animations;g&&(c[E.uid]||(c[E.uid]=Object.keys(g).reduce((_,p)=>(_[p]=g[p].url,_),{})))}return c},[o]),t=React$2.useMemo(()=>{const c=new Set;for(const h of o)if(h.slots)for(const y of h.slots)y.uid&&c.add(y.uid);return Array.from(c)},[o]),n=async c=>{const h=r[c];if(!cache[h.talking]){const{animations:E}=await loader.loadAsync(h.talking);E[0].name="talking",cache[h.talking]=E[0]}},a=()=>{t.forEach(c=>{f(c,"idle")})},l=()=>{t.forEach(c=>{const h=e.getObjectByProperty("uid",c);h&&(delete h.userData._active,f(c,"idle"))})},u=async(c,h,y)=>{const E=getCurrentVisible(c,e);if(cache[c]||(cache[c]={}),!E)return;const{clipAction:g}=E.userData.animation;if(h){const _=r[c],p=cache[_.talking];let x=h,C=cache[h];if(!C){const{animations:R}=await loader.loadAsync(h);C=cache[h]=R[0]}if(y&&_.talking!==h&&(C=mixWithTalkingClip(p,C),x+="_talking"),!E.userData._active||E.userData._active!==x)return E.userData._active=x,g(C,E)}return null},f=async(c,h)=>{const y=getCurrentVisible(c,e);if(cache[c]||(cache[c]={}),!y)return;const{clipAction:E,defaultAnim:g}=y.userData.animation;if(h==="idle")return E(g,y);{const _=r[c],p=h.split("_")[0],x=_[p],C=cache[_.talking];let R=cache[x];if(!R){const{animations:S}=await loader.loadAsync(_[p]);R=cache[_[p]]=S[0]}if(h.includes("talking")&&h!=="talking"&&(R=mixWithTalkingClip(C,R)),!y.userData._active||y.userData._active!==h)return y.userData._active=h,E(R,y)}return null};return{startAnimation:f,startAnimationUrl:u,preloadTalking:n,resetActives:a,unmountActives:l}}const characterMs=75,minMs=1400,headSize=2,raycast=new three.Raycaster,animationTarget=new three.Object3D,maxCharacterToSwitch=70;raycast.firstHitOnly=!0;function DialogComponent({keyboardControl:o,emitEvent:e,lines:r,actors:t,edges:n,soundActions:a,zoomInActor:l,autoPlay:u,autoEnd:f,pause:c,progress:h}){var Wr;const y=(h==null?void 0:h.line)||0,[E,g]=React$2.useState(y),[_,p]=React$2.useState(!!u),[x,C]=React$2.useState(!1),[R,S]=React$2.useState(!1),A=fiber.useThree(Be=>Be.scene),T=fiber.useThree(Be=>Be.camera),{start:P,stop:w}=useTimeout(),O=React$2.useRef([]),k=React$2.useMemo(()=>T.clone(),[]),D=React$2.useRef({pos:[0,0,0],child:null}),F=r[E],U=r[E-1],H=React$2.useRef(!1),W=!!n,{voiceOver:ee,decision:q}=F||{},B=React$2.useRef({}),G=(Wr=F==null?void 0:F.slots)==null?void 0:Wr.find(Be=>Be.talking),I=React$2.useRef(!1),{startAnimation:$,startAnimationUrl:V,resetActives:X,preloadTalking:Q,unmountActives:J}=useStateMachine(r),ie=React$2.useRef(),ne=Object.keys((F==null?void 0:F.audio)||{}).length,Z=Object.keys((F==null?void 0:F.voice)||{}).length,se=ee||(F==null?void 0:F.type)==="conversationalNarration",oe=q||(F==null?void 0:F.type)==="conversationalDecision",de=(F==null?void 0:F.type)==="conversationalCamera",fe=_&&!oe&&!de,[ce,xe]=React$2.useState({text:"",name:"",inScene:!1,thinkful:!1,voiceOver:!1,avatar:"",show:!1}),Oe=React$2.useMemo(()=>r.reduce((Be,Ie)=>(Ie.slots&&Ie.slots.filter(bt=>bt.uid).forEach(bt=>{Be.includes(bt.uid)||Be.push(bt.uid)}),Be),[]),[r]),Te=React$2.useCallback(Be=>e({type:"translate",payload:Be}),[e]),[Ve,Ge]=React$2.useState([]),qe=React$2.useMemo(()=>Ve[Ve.length-1],[Ve]),pt=React$2.useCallback(()=>{const Be=n.find(nt=>nt.fromId===qe)||n.find(nt=>nt.toId===qe),Ie=r.find(nt=>nt.id===(Be==null?void 0:Be.fromId));return!qe&&(h==null?void 0:h.line)>=0?{decision:!0}:Ie},[n,r,qe]),yt=React$2.useCallback(()=>{if(W){const Ie=pt();return Ie==null?void 0:Ie.decision}const Be=r[E-1]?r[E-1]:{};return E>0&&(Be==null?void 0:Be.decision)},[F,W,r,qe,n]),at=React$2.useCallback(()=>{if(W){const Ie=pt();return(Ie==null?void 0:Ie.type)==="conversationalCamera"}const Be=r[E-1]?r[E-1]:{};return E>0&&(Be==null?void 0:Be.type)==="conversationalCamera"},[F,W,r,qe,n]),ht=React$2.useCallback(Be=>{var nt,bt;const Ie=t.find(st=>(st==null?void 0:st.uid)===(Be==null?void 0:Be.uid)?st:"");return((bt=(nt=Be==null?void 0:Be.character)==null?void 0:nt.resource)==null?void 0:bt.url)||(Ie==null?void 0:Ie.completeUrl)||""},[t]),er=(Be=()=>{})=>{if(I.current)I.current&&(I.current=!1);else{T.updateProjectionMatrix(),T.updateMatrixWorld(!0);const Ie=D.current.child?D.current.pos:k.position.toArray();if(animationTarget.position.fromArray(Ie),D.current.parent){animationTarget.quaternion.equals(T.quaternion)||animationTarget.applyQuaternion(T.quaternion);const nt=D.current.isLeft?-1:1,bt=headSize*nt;animationTarget.translateX(-10*nt+bt),animationTarget.translateY(-2),animationTarget.translateZ(30)}gsapWithCSS.to(T.position,{duration:.9,ease:"power3.easeInOut",onStart:()=>{I.current=!0},onUpdate:()=>{O.current.length&&O.current.forEach(nt=>{const{object:bt}=nt;bt.material.visible=!0})},onComplete:()=>{Be(),raycast.set(T.getWorldPosition(new three.Vector3(0,0,0)),T.getWorldDirection(new three.Vector3));const nt=raycast.intersectObjects(A.children,!0);O.current=nt.filter(bt=>bt.distance<10),O.current.length&&O.current.forEach(bt=>{const{object:st}=bt;st.material.side=0}),I.current=!1,H.current&&e({type:"success"}),D.current.child||T.copy(k)},...animationTarget.position})}},Ot=React$2.useCallback(()=>{D.current.child=null,D.current.parent=null,l&&er()},[l]),_t=(Be,Ie,nt,bt=!1)=>{const st=Ie.includes("seated");nt?V(Be,nt.url,Ie.includes("talking")).then(It=>{if(It){const ir=It.setLoop(three.LoopRepeat,1/0).getMixer(),Yr=()=>{H.current?$(Be,"idle").then(()=>{ir.removeEventListener("loop",Yr)}):$(Be,ie.current===Be?"neutral_talking":"neutral").then(()=>{ir.removeEventListener("loop",Yr)})};It&&BASIC_ACTIONS_TYPES_WHITELIST.includes(nt.animationId)?ir.addEventListener("loop",Yr):ir._listeners&&(ir._listeners.loop=[])}}):$(Be,bt&&!st?`${Ie}-seated`:Ie)},kt=()=>{if(!(G!=null&&G.emotion)||H.current)return;const{emotion:Be,uid:Ie,animation:nt}=G,bt=getCurrentVisible(Ie,A);if(bt){const{isSeated:st}=bt;Q(Ie).then(()=>{_t(Ie,st&&!Be.includes("seated")?`${Be}-seated_talking`:`${Be}_talking`,nt,st),nt&&BASIC_ACTIONS_TYPES_WHITELIST.includes(nt.animationId)&&(ie.current=Ie)})}},Ft=()=>{if(!(G!=null&&G.uid)||H.current)return;const{emotion:Be,uid:Ie,animation:nt}=G,bt=getCurrentVisible(Ie,A);if(bt){const{isSeated:st}=bt;ie.current===Ie?(_t(Ie,"neutral",null,st),ie.current=null):_t(Ie,Be,nt,st)}},Ke=React$2.useCallback(()=>{H.current=!0,xe({show:!1}),Ot(),X(),l||e({type:"success"})},[T,e,Ot,l]);React$2.useEffect(()=>()=>{B.current={},J()},[]);const mt=Be=>{xe({show:!1}),g(Be),e({type:"notifyProgress",payload:{line:Be}})},ct=React$2.useCallback((Be=!0)=>{const Ie=Be?["fromId","toId"]:["toId","fromId"],nt=n.filter(It=>It[Ie[0]]===F.id),bt=nt.length===1?nt[0]:nt.find(It=>It[Ie[1]]===qe);if(!(bt!=null&&bt[Ie[0]])){Ke();return}Be||Ge(Ve.slice(0,Ve.length-1));const st=r.findIndex(It=>It.id===bt[Ie[1]]);st>=0?mt(st):Ke()},[F==null?void 0:F.id,e,n,Ke,r]),he=React$2.useCallback((Be,Ie)=>{const nt=[3,2,1][Be.id],st=n.filter(ir=>ir.fromId===(F==null?void 0:F.id)).find(ir=>parseInt(ir.fromPointIndex)===nt),It=r.findIndex(ir=>ir.id===(st==null?void 0:st.toId));It>=0?(st==null?void 0:st.fromId)===(st==null?void 0:st.toId)?Ie():mt(It):Ke()},[F==null?void 0:F.id,n,Ke,r]),pe=React$2.useCallback(()=>{if(B.current={...G},S(!1),Ft(),W)ct(!1);else if(!yt()){const Be=E-1;xe({show:!1}),g(Be),e({type:"notifyProgress",payload:{line:Be}})}},[ct,e,W,U,E,G]),ve=React$2.useCallback(Be=>{if(W){if(Be){const Ie=[3,2,1][Be.id],bt=n.filter(st=>st.fromId===F.id).find(st=>parseInt(st.fromPointIndex)===Ie);if(bt){const st=r.findIndex(It=>It.id===bt.toId);st>=0&&e({type:"notifyProgress",payload:{line:st}})}else e({type:"saveNode"})}}else if(E<r.length-1){const Ie=E+1;e({type:"notifyProgress",payload:{line:Ie}})}else e({type:"saveNode"})},[n,E,r,e,F.id,W]),Ce=React$2.useCallback((Be,Ie)=>{if(B.current={...G},Ge([...Ve,F.id]),S(!1),Ft(),W)Be?he(Be,Ie):ct();else if(E<r.length-1){const nt=E+1;mt(nt)}else(f||oe||de)&&Ke()},[e,F==null?void 0:F.id,W,oe,de,E,r.length,he,ct,Ke,G]),De=()=>{p(!1),pe()},We=()=>W?F&&F.type!=="conversationalDecision"&&!n.find(Be=>Be.fromId===F.id):E===r.length-1,je=()=>{We()?Ke():(p(!1),Ce())};React$2.useEffect(()=>{if(W&&!x){const Be=h==null?void 0:h.line;if(Be>=0){C(!0),g(Be);return}const Ie=r.filter(nt=>!n.find(bt=>bt.toId===nt.id));if(Ie.length){const nt=Ie[0],bt=r.indexOf(nt);bt>=0&&(C(!0),g(bt))}}},[n,W,r,x]);const ze=Be=>{if(B.current.uid===Be.uid||D.current.parent===Be)return;const Ie=new three.Object3D,nt=Be.getObjectByName("Head_M");nt.updateMatrixWorld(!0),Ie.applyMatrix4(nt.matrixWorld),Ie.applyQuaternion(T.quaternion);const bt=l?2.5:2,st=l?1.2:1.5;Ie.translateY(bt),Ie.translateX(st);const It=new three.Vector3;It.setFromMatrixPosition(nt.matrixWorld);const Yr=It.project(T).x<0;D.current={pos:Ie.position.toArray(),child:nt,parent:Be,isLeft:Yr}},jt=Be=>{e({type:"resetZIndexUIContainer",payload:Be})};React$2.useEffect(()=>{var Be;if(se)Ot(),xe({text:F==null?void 0:F.text,name:(F==null?void 0:F.alias)||(F==null?void 0:F.name)||`[ ${Te("storylines.misc.voiceOver")} ]`,inScene:!1,voiceOver:!0,thinkful:!1,top:!1,avatar:ht(G),show:!0});else if(!H.current&&!oe&&!de){const Ie=F==null?void 0:F.slots.filter(st=>st.uid&&!st.talking),nt=[...Ie.map(st=>st.uid)||[],G==null?void 0:G.uid];if(Oe.filter(st=>!nt.includes(st)).forEach(st=>{$(st,"idle")}),Ie.forEach(st=>{const It=getCurrentVisible(st.uid,A);if(It){const{isSeated:ir}=It;_t(st.uid,st.emotion,st.animation,ir)}}),G){const st=getCurrentVisible(G.uid,A),It=t.find(ir=>ir.uid===G.uid);st&&!H.current?setTimeout(()=>{var ir,Yr;if(G.uid===st.uid){ze(st);const{isSeated:$i,userData:ja}=st,{emotion:la,animation:Ui}=G;!((ir=ja._active)!=null&&ir.includes("talking"))&&!((Yr=ja._active)!=null&&Yr.includes(la))&&_t(G.uid,la,Ui,$i);const kr=()=>{var ge;xe({text:G.text,name:G.alias||((ge=G.character)==null?void 0:ge.name),inScene:!0,thinkful:G.emotion.includes("think"),avatar:ht(G),show:!0})};l?(I.current=!1,er(kr)):kr()}},150):(Ot(),xe({text:G.text,name:G.alias||((Be=G.character)==null?void 0:Be.name)||(It==null?void 0:It.name),left:!1,top:G.text.length>maxCharacterToSwitch,inScene:!1,thinkful:G.emotion.includes("think"),avatar:ht(G),show:!0}))}else Ot(),xe({show:!0})}},[t,F,l,A,Te,ht,Ot,oe,se,Oe]);const Mt=useEkho({audioType:F==null?void 0:F.audioType,volume:F==null?void 0:F.audioVolume,voice:F==null?void 0:F.voice,started:ce.show,text:ce==null?void 0:ce.text,audio:F==null?void 0:F.audio,slide:E,soundActions:a,emitEvent:e,pauseTTS:c,onStart:()=>{var Be;(Be=G==null?void 0:G.emotion)!=null&&Be.includes("think")||kt()},onError:()=>{Ft(),S(!0)},onFinish:()=>{Ft(),fe&&!c&&Ce()}});React$2.useEffect(()=>(Mt(),()=>{Mt()}),[E,Mt]),React$2.useEffect(()=>{var Be;if(((F==null?void 0:F.audioType)==="none"||R)&&(ce!=null&&ce.show)&&!(G!=null&&G.emotion.includes("think"))){kt();const Ie=characterMs*(((Be=ce==null?void 0:ce.text)==null?void 0:Be.length)||0);setTimeout(()=>{Ft()},Ie<minMs?minMs:Ie)}},[R,F==null?void 0:F.audioType,G==null?void 0:G.emotion,ce]),React$2.useEffect(()=>{var Be;if(fe&&ce.show&&((F==null?void 0:F.audioType)==="none"||R)&&!c){const Ie=characterMs*(((Be=ce==null?void 0:ce.text)==null?void 0:Be.length)||0);(!We()||We()&&f)&&P(Ce,Ie<minMs?minMs:Ie)}return()=>{w()}},[ce,Ce,P,f,w,F==null?void 0:F.audioType,fe,ne,Z,R]);const dt=React$2.useMemo(()=>E===0||yt()||at(),[E,yt,at]);o(oe||dt||!ce.show?null:De,oe||!ce.show?null:je);const vr=document.querySelector(".screens--container");if(de)return jsxRuntimeExports.jsx(ChangeCamera,{...F,emitEvent:e,success:!1,onFinish:Ce},`change-camera-${E}`);if(oe){const Be=F.id?r.filter(nt=>nt.decision).findIndex(nt=>nt.id===F.id)+1:r.filter(nt=>nt.decision).findIndex(nt=>nt===F)+1,Ie={...F.payload,decisionNumber:Be,inheritProps:{slots:[],disableBackground:!0},required:!W,branched:W,onAddPoints:ve,onFinish:Ce,emitEvent:e,pause:c,soundActions:a,keyboardControl:o,onMount:()=>{Ot(),jt(!0)},onUnMount:()=>{I.current=!1,jt(!1)}};return jsxRuntimeExports.jsx(DialogDecision,{...Ie})}return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[ce.text?jsxRuntimeExports.jsx(BubbleWrapper,{translate:Te,currentMessage:ce}):null,jsxRuntimeExports.jsx(arcadeThreeCore.HtmlPro,{wrapperClass:"htmlpro-wrap-100-h",style:{width:"100vw",height:"100%",position:"static"},portal:vr?{current:vr}: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:De,disabled:dt||!ce.show,className:`gat--btn__round ${dt||!ce.show?"disabled":""}`,"aria-label":LangIsRtl()?Te("storylines.misc.forward"):Te("storylines.misc.rewind"),children:jsxRuntimeExports.jsx("span",{className:LangIsRtl()?"icon-next":"icon-back"})}),jsxRuntimeExports.jsx("button",{type:"button",onClick:je,disabled:!ce.show,className:`gat--btn__round
|
|
273
273
|
${ce.show?"":"disabled"}
|
|
274
|
-
${_&&We()?"glowing-animation":""}`,"aria-label":LangIsRtl()?Te("storylines.misc.rewind"):Te("storylines.misc.forward"),children:jsxRuntimeExports.jsx("span",{className:LangIsRtl()?"icon-back":"icon-next"})})]})})]})}function AnimationComponent({animation:o,loopTimes:e,resource:r,enableInteraction:t,makeDefault:n,emitEvent:a}){const[l,u]=React$2.useState(!1),f=fiber.useThree(
|
|
274
|
+
${_&&We()?"glowing-animation":""}`,"aria-label":LangIsRtl()?Te("storylines.misc.rewind"):Te("storylines.misc.forward"),children:jsxRuntimeExports.jsx("span",{className:LangIsRtl()?"icon-back":"icon-next"})})]})})]})}function AnimationComponent({animation:o,loopTimes:e,resource:r,enableInteraction:t,makeDefault:n,emitEvent:a}){const[l,u]=React$2.useState(!1),f=fiber.useThree(y=>y.scene),c=React$2.useMemo(()=>new GLTFLoader,[]),h=React$2.useRef(0);return React$2.useEffect(()=>{u(!1)},[r.uid,o==null?void 0:o.url]),React$2.useEffect(()=>{if(!l){const y=f.getObjectByProperty("uid",r.uid);if(y&&o&&y.skeletonId===o.skeletonId)if(n)a({type:"saveAnimation",payload:{uid:r.uid,animation:o.id,index:y.index}}),a({type:"success"});else{const E=t;E||a({type:"success"}),c.load(o.url,g=>{const{mixer:_,clipAction:p,defaultAnim:x}=y.userData.animation;p(g.animations[0],y).setLoop(three.LoopRepeat,1/0),h.current=0;function R(){h.current+=1,h.current>=e&&(p(x,y),E&&a({type:"success"}),_.removeEventListener("loop",R))}_._listeners&&(_._listeners.loop=[]),_.addEventListener("loop",R),u(!0)})}else a({type:"success"})}},[f,o==null?void 0:o.url,e,a,l,c,r.uid,n,o,r,t]),null}function EmailPill({text:o,error:e,handleClick:r}){return jsxRuntimeExports.jsxs("div",{"data-testid":`${e?" pill--error":"pill--ok"}`,className:`email-pill ${e?" email-pill--error":""}`,children:[jsxRuntimeExports.jsx("div",{children:o}),jsxRuntimeExports.jsx("div",{className:"email-pill__delete",children:jsxRuntimeExports.jsx("button",{type:"button",onClick:r,className:"icon-close unset-button","aria-label":"icon click"})})]})}function StepOne({handleContinue:o,handleCancel:e,translate:r,text:t}){const[n,a]=React$2.useState([]),[l,u]=React$2.useState(0),[f,c]=React$2.useState(0),h=React$2.useRef(null),y=(p,x,C)=>{p.stopPropagation(),a(n.filter(R=>R!==n[C])),x.error&&u(l-1),x.isRepeat&&c(f-1)},E=()=>{h.current&&h.current.focus()},g=()=>{[" ",",",";","."].includes(h.current.value)&&(h.current.value="")},_=p=>{const x=h.current.value,C=["Space","Comma","Period","Enter"],R=["Space","Comma","Enter","Tab"];x===""&&(C.includes(p.code)||p.keyCode==="186"||p.key==="Enter"||p.key===" ")?p.preventDefault():h.current.value.length>1&&(R.includes(p.code)||p.type==="blur")&&(p.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(x)?n.find(A=>A.text===x)?(c(f+1),a([...n,{text:x,error:!0,isRepeat:!0}])):a([...n,{text:x}]):(a([...n,{text:x,error:!0}]),u(l+1)),h.current.value="")};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs("div",{className:"referrals-piece__body",children:[jsxRuntimeExports.jsx("div",{className:"referrals-piece__title",children:r("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:r("puzzles.referrals.inviter.instructions")}),jsxRuntimeExports.jsx("div",{dir:"auto",children:r("puzzles.referrals.inviter.limit")})]}),jsxRuntimeExports.jsx("div",{className:"referrals-piece__faketextarea",onKeyUp:()=>{},role:"button",tabIndex:"-1",onClick:E,"aria-labelledby":"list of emails",children:jsxRuntimeExports.jsxs("div",{className:"referrals-piece__scrollarea",id:"list of emails",children:[n&&n.map((p,x)=>jsxRuntimeExports.jsx(EmailPill,{text:p.text,error:p.error,handleClick:C=>y(C,p,x),emailPillIndex:x},`${n.indexOf(p)}`)),n.length<=9?jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("input",{id:"email",ref:h,className:"referrals-piece__inputemail",onChange:g,onKeyDown:_,onBlur:_,type:"email",autoComplete:"off"}),jsxRuntimeExports.jsx("label",{className:"referrals-piece__emaillabel",htmlFor:"email",children:jsxRuntimeExports.jsx("span",{children:r("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:f>0?r("puzzles.referrals.inviter.errorEmailRepeat"):null}),jsxRuntimeExports.jsx("div",{children:l>0?r("puzzles.referrals.inviter.errorMessage"):null})]}),jsxRuntimeExports.jsxs("div",{className:"referrals-piece__counter","data-testid":"pillcounter",children:[n.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:r("puzzles.referrals.inviter.skipButton")}),jsxRuntimeExports.jsx("button",{className:`gat--btn gat--btn__primary ${f>0||l>0||n.length===0?" disabled":""}`,type:"button",disabled:l>0||n.length===0,onClick:()=>o(n),children:r("puzzles.referrals.inviter.inviteButton")})]})]})}function StepTwo({handleFinish:o,translate:e,valid:r,invalid:t}){const[n,a]=React$2.useState(!1),l=()=>{a(!n)},u=r===1?"invitationSend":"invitationsSend",f=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:[!!r.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:r.current})," ",e(`puzzles.referrals.inviter.${u}`)]})]}),!!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.${f}`)]}),jsxRuntimeExports.jsx("button",{className:"un-button",type:"button",onClick:l,children:e("puzzles.referrals.inviter.whyFail")})]})]}),n?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:o,children:e("puzzles.referrals.inviter.continueButton")})})]})}function ReferralComponent({emitEvent:o,text:e,rewards:r,referrals:t}){const n=E=>o({type:"translate",payload:E}),[a,l]=React$2.useState("step1"),u=React$2.useRef(0),f=React$2.useRef(0),c=async E=>{const g=E.map(p=>p.text),_=await o({type:"sendReferrals",payload:g});u.current=_&&_.data?_.data.valid.length:0,f.current=g.length-u.current,l("step2")};if(!t)return o({type:"success"}),null;const h=()=>{o({type:"success"})},y=()=>{if(u.current){const E=r.map(g=>(g.points*=u.current,g));o({type:"addPoints",complex:!0,finish:!0,payload:E})}else o({type:"success"})};return jsxRuntimeExports.jsx("div",{className:"referrals-piece",children:jsxRuntimeExports.jsxs("div",{className:"referrals-piece__center",children:[a==="step1"&&jsxRuntimeExports.jsx(StepOne,{translate:n,handleContinue:c,handleCancel:h,text:e}),a==="step2"&&jsxRuntimeExports.jsx(StepTwo,{translate:n,handleFinish:y,valid:u,invalid:f})]})})}exports.AnimationComponent=AnimationComponent;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;
|
|
275
275
|
//# sourceMappingURL=arcade-components.cjs.map
|