https://fossilsketch.org/_next/static/chunks/pages/games/feature_id-bfd148e66b4a47ae.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1135],{5924:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/games/feature_id",function(){return r(8307)}])},1191:function(e,t,r){"use strict";r.d(t,{Z:function(){return o}});var n=r(2784),a=r(2589);function o(e){var t=e.activityKey,r=e.classroomId,o=(0,n.useRef)(Date.now()),i=(0,n.useRef)(!0),s=(0,n.useRef)(0),u=(0,n.useRef)(0),c=(0,n.useRef)(0),l=(0,n.useRef)(null),d=a.S.useMutation(["user.logActivityTime"]).mutate;return(0,n.useEffect)((function(){if(Number.isFinite(r)&&!(r<=0)&&t){o.current=Date.now(),i.current=!0,s.current=0,u.current=0,c.current=0;var e=function(){var e=function(){var e=Date.now(),t=i.current?e-o.current:0;return Math.floor((s.current+t)/1e3)}()-u.current-c.current;e<=0||(c.current+=e,d({classroomId:r,activityKey:t,seconds:e},{onSuccess:function(){u.current+=e,c.current=Math.max(0,c.current-e)},onError:function(t){console.error("Failed to log activity time",t),c.current=Math.max(0,c.current-e)}}))},n=function(){var t=Date.now();"hidden"===document.visibilityState?(i.current&&(s.current+=t-o.current,i.current=!1),e()):i.current||(o.current=t,i.current=!0)},a=function(){var e=Date.now();i.current&&(s.current+=e-o.current,i.current=!1);var n=Math.floor(s.current/1e3)-u.current-c.current;n>0&&function(e){if(!e||e<=0)return!1;var n=new Blob([JSON.stringify({0:{classroomId:r,activityKey:t,seconds:Math.round(e)}})],{type:"application/json"});try{var a;return Boolean(null===(a=navigator.sendBeacon)||void 0===a?void 0:a.call(navigator,"/api/trpc/user.logActivityTime?batch=1",n))}catch(o){return console.error("Beacon failed",o),!1}}(n)&&(u.current+=n)};return document.addEventListener("visibilitychange",n),window.addEventListener("pagehide",a),l.current=window.setInterval(e,5e3),function(){document.removeEventListener("visibilitychange",n),window.removeEventListener("pagehide",a),l.current&&clearInterval(l.current),i.current&&(s.current+=Date.now()-o.current,i.current=!1);var e=Math.floor(s.current/1e3)-u.current-c.current;e>0&&d({classroomId:r,activityKey:t,seconds:e})}}}),[t,r]),null}},8307:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return w}});var n=r(2322),a=r(7293),o=r.n(a),i=r(1783),s=r(865),u=r(6670),c=r(5117),l=r(8654),d=r(7841),f=r(2784),h=r(5632),g=r(2589),m=r(7973),p=r(3575),y=r(7082),v=r(6335),x=r(3750),_=x.C;function S(e,t,r,n,a,o){var i=a-r,s=o-n;if(0===i&&0===s)return Math.hypot(e-r,t-n);var u=Math.max(0,Math.min(1,((e-r)*i+(t-n)*s)/(i*i+s*s))),c=r+u*i,l=n+u*s;return Math.hypot(e-c,t-l)}function b(e,t,r){if(0===t.length)return 1/0;if(1===t.length)return Math.hypot(e.x-t[0].x*r,e.y-t[0].y*r);for(var n=1/0,a=0;a<t.length-1;a++){var o=t[a].x*r,i=t[a].y*r,s=t[a+1].x*r,u=t[a+1].y*r;n=Math.min(n,S(e.x,e.y,o,i,s,u))}if(t.length>2){var c=t[t.length-1].x*r,l=t[t.length-1].y*r,d=t[0].x*r,f=t[0].y*r;n=Math.min(n,S(e.x,e.y,c,l,d,f))}return n}function M(e,t,r){for(var n=!1,a=0,o=t.length-1;a<t.length;o=a++){var i=t[a].x*r,s=t[a].y*r,u=t[o].x*r,c=t[o].y*r;s>e.y!==c>e.y&&e.x<(u-i)*(e.y-s)/(c-s)+i&&(n=!n)}return n}var C=function(e){var t=e.sediments,r=e.dataList,a=(e.percents,e.setPercents,e.setStepNum,e.stars,e.setStars,e.gameName),i=e.title,S=e.forceOpenEndModal,C=void 0!==S&&S,A=((0,h.useRouter)(),(0,f.useState)(0)),w=A[0],j=A[1],k=(0,f.useState)(r[w]),E=k[0],N=k[1],I=(0,f.useState)(E.boundary),P=I[0],B=I[1],R=(0,f.useState)(E.answers),L=R[0],D=R[1],Z=(0,f.useState)(!1),H=Z[0],T=Z[1],z=(0,f.useState)(Array(E.boundary.length).fill("#CA8500")),O=z[0],Y=z[1],K=(0,f.useState)(Array(E.boundary.length).fill("")),X=K[0],F=K[1],q=(0,f.useState)(-1),V=q[0],W=q[1],G=(0,f.useState)(),Q=G[0],U=G[1],J=(0,f.useRef)(null),$=(0,f.useRef)(null),ee=(0,f.useRef)(null),te=(0,f.useState)(-1),re=te[0],ne=te[1],ae=(0,f.useState)({x:0,y:0,visible:!1,checked:""}),oe=ae[0],ie=ae[1],se=(0,f.useState)(!0),ue=se[0],ce=se[1],le="/morphotype_features/".concat(t[w],".jpg"),de=(0,f.useState)(3),fe=de[0],he=de[1],ge=(JSON.parse(localStorage.getItem("numAttempts")||"{}"),(0,f.useState)(i)),me=ge[0],pe=ge[1],ye=g.S.useMutation(["games.saveUserScore"]).mutate,ve=(0,f.useState)(""),xe=ve[0],_e=ve[1],Se=(0,f.useState)("star1.svg"),be=Se[0],Me=Se[1],Ce=(0,f.useState)(!1),Ae=Ce[0],we=Ce[1];(0,f.useEffect)((function(){C&&(_e((function(e){return e||"Thanks for checking the end screen!"})),Me((function(e){return e||"star3.svg"})),we(!0))}),[C]);var je={0:[["Chambers","Apertures","Maximum Length","Maximum Height"],["Hinge","Maximum Length","AnteriorMargin","Ma

1ximum Height"]],1:[["Anterior Margin","Ventral Margin","Dorsal Margin","Posterior Margin","Alae"],["Anterior Margin","Ventral Margin","Dorsal Margin","Posterior Margin","Alae"],["Anterior Margin","Ventral Margin","Dorsal Margin","Posterior Margin","Alae"],["Anterior Margin","Ventral Margin","Dorsal Margin","Posterior Margin","Alae"]],2:[["Caudal Process","Apertures","MaximumHeight & Length","Alae"]],3:[["Caudal Process","Apertures","Chambers","Alae"]],4:[["Caudal Process","Apertures","Muscle Scars","Alae"]],5:[["Caudal Process","Hinge","Muscle Scars","Alae"]],6:[["Caudal Process","Proloculus","Muscle Scars","Last Chamber"]],7:[["Caudal Process","Costae","Chamber","Alae"]],8:[["Chamber","Hinge","Muscle Scars","Alae"]],9:[["Proloculus","Hinge","Muscle Scars","Costae"]],10:[["Aperture","Suture","Muscle Scars","Alae"],["Caudal Process","Suture","Costae","Aperture"]],11:[["Caudal Process","Suture","Muscle Scars","Costae"]],12:[["Umbilical Side","Spiral Side"],["Umbilical Side","Spiral Side"]]},ke=(0,f.useContext)(m.Z),Ee=function(e,t,r,n){if(W(e),U(X[e]),e<0)ie({x:0,y:0,visible:!1,checked:""});else{var a=function(e,t,r,n){var a=80+46*(e>=0&&je[w]&&je[w][e]?je[w][e].length:5),o=12,i=t+o,s=r-a-o;if(i+260+o>window.innerWidth&&(i=Math.max(o,t-260-o)),s<o){s=r+o;var u=Math.min(n.bottom,window.innerHeight)-o;s+a>u&&(s=Math.max(o,u-a))}return{tipX:i,tipY:s}}(e,t,r,n),o=a.tipX,i=a.tipY;ie({x:o,y:i,visible:!0,checked:X[e]})}};return(0,f.useEffect)((function(){if(-1!=re){var e=$.current;if(e){var t=e.getContext("2d");if(t){t.lineWidth=2,t.clearRect(0,0,e.width,e.height);for(var r=0;r<P.length;r++){t.strokeStyle=O[r];var n=P[r];if(n.length>1){t.beginPath(),t.moveTo(n[0].x*re,n[0].y*re);for(var a=1;a<n.length;a++)t.lineTo(n[a].x*re,n[a].y*re);t.closePath(),t.stroke()}}}}}}),[re,O]),(0,n.jsxs)("div",{className:o().container,style:{height:"100vh"},children:[(0,n.jsx)("div",{className:o().step_select_top,children:(0,n.jsx)("div",{className:o().step_text_container,children:(0,n.jsx)("div",{className:o().step_text,children:me})})}),(0,n.jsx)("div",{className:o().progressBar,children:(0,n.jsx)("div",{style:{height:"1px",backgroundColor:"#CA8500",width:"100%"}})}),(0,n.jsx)(x.Z,{finalMessage:xe,starImg:be,openModal:Ae,setOpenModal:we,surveyConfig:_,gameName:a}),(0,n.jsx)("div",{className:o().image_container,children:(0,n.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"flex-start",width:"100%"},children:(0,n.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",position:"relative"},ref:ee,children:[(0,n.jsx)("img",{src:le,onClick:function(e){if(!(re<=0)){var t=e.currentTarget.getBoundingClientRect(),r=function(e,t,r){for(var n=-1,a=23,o=0;o<t.length;o++){var i=t[o];if(M(e,i,r))return o;var s=b(e,i,r);s<=22&&s<a&&(a=s,n=o)}return n}({x:e.clientX-t.left,y:e.clientY-t.top},P,re);Ee(r,e.clientX,e.clientY,t)}},onLoad:function(e){var t=e.target.width;ne(2.6/(2080/t))},ref:J,style:{maxWidth:"70vw",maxHeight:"40vh",width:"auto",height:"auto",margin:"1% 1% 1% 1%",objectFit:"contain"}}),P.map((function(e,t){for(var r=1e4,a=1e4,i=0,s=0,u=e.map((function(e){return"".concat(e.x*re,"px ").concat(e.y*re,"px")})).join(", "),l=0;l<e.length;l++)r=Math.min(r,e[l].y*re),a=Math.min(a,e[l].x*re),i=Math.max(i,e[l].x*re),s=Math.max(s,e[l].y*re);var d=(a+i)/2,f=r,h=(r+s)/2;return(0,n.jsxs)("div",{children:[H&&(0,n.jsx)("div",{className:o().polygon_overlay,style:{clipPath:"polygon(".concat(u,")"),top:0,left:0},children:(0,n.jsx)(c.x,{style:{position:"absolute",top:h-12,left:d,color:"white"},children:L[t].slice(0,1)})}),-1!=re&&(0,n.jsx)("div",{id:t.toString(),onClick:function(e){return function(e,t){t.stopPropagation();var r=J.current;if(r){var n=r.getBoundingClientRect();Ee(e,t.clientX,t.clientY,n)}}(t,e)},className:o().feature_badge,style:{backgroundColor:"white",top:f-20,left

1:d-12},children:t+1})]},t)})),oe.visible&&(0,n.jsx)("div",{className:"tooltip",id:"radio",style:{zIndex:10,display:"flex",flexDirection:"column",position:"fixed",top:oe.y,left:oe.x,width:"260px",height:"fit-content",backgroundColor:"#ffffff",color:"#1A1B1E",padding:"12px 14px",borderRadius:10,boxShadow:"0 8px 24px rgba(0,0,0,0.25)",border:"1px solid rgba(0,0,0,0.08)"},children:(0,n.jsx)(l.Y.Group,{mb:"10px",size:"md",label:"Choose the correct feature:",styles:{label:{fontSize:14,fontWeight:600,color:"#1A1B1E",marginBottom:8}},onChange:function(e){U(e),function(e){if(void 0!=e&&-1!=V){ie((function(t){return(0,u.Z)((0,s.Z)({},t),{checked:e})}));var t=document.getElementById(V.toString());t&&(t.style.backgroundColor="#CA8500",t.style.color="white"),X[V]=e;for(var r=!0,n=0;n<X.length;n++)if(""==X[n]){r=!1;break}r&&ce(!1)}}(e)},value:Q,children:je[w][V].map((function(e,t){return(0,n.jsx)(l.Y,{value:e,label:e,size:"md",styles:{label:{fontSize:14,lineHeight:1.35,color:"#1A1B1E",fontWeight:500}},style:{marginBottom:6}},t)}))})})]})})}),(0,n.jsx)("div",{style:{display:"flex",justifyContent:"center",padding:"12px 0",position:"relative",zIndex:20},children:(0,n.jsx)(d.z,{onClick:function(){for(var e=[],o=[],i=0;i<L.length;i++)L[i]!=X[i]?(e.push(i),o.push("red")):o.push("green");if(e.length>0){Y(o);for(var s=0;s<e.length;s++){var u=document.getElementById(e[s].toString());u&&(u.style.backgroundColor="red",u.style.color="black")}(0,p.c0)({id:"IncorrectGuess",message:"Incorrect!",disallowClose:!1,autoClose:2500,icon:(0,n.jsx)(y.Z,{}),color:"red"}),he((function(e){return Math.max(e-1,1)}))}else w<t.length-1?((0,p.c0)({id:"CorrectGuess",message:"Correct!",disallowClose:!1,autoClose:2500,icon:(0,n.jsx)(v.Z,{})}),function(){ce(!0),Y(Array(E.boundary.length).fill("#CA8500")),W(-1),U(void 0);for(var e=0;e<L.length;e++){var t=document.getElementById(e.toString());t&&(t.style.backgroundColor="white",t.style.color="black")}ie({x:0,y:0,visible:!1,checked:""}),T(!1)}(),function(){if(w<t.length-1){var e=w+1;j(e),N(r[e]),B(r[e].boundary),D(r[e].answers),F(Array(r[e].boundary.length).fill("")),Y(Array(r[e].boundary.length).fill("#CA8500")),ce(!0),T(!1),e==Object.keys(je).length-1&&pe("Identify sides of Foram by clicking on each side")}}()):(3===fe?(Me("star3.svg"),_e("Perfect! Great job!")):fe>=2&&fe<3?(Me("star2.svg"),_e("Not bad! You can do better")):(Me("star1.svg"),_e("Not bad! You can do better")),we(!0),ye({name:a,classroomId:parseInt(ke.currentClass),score:fe}))},disabled:ue,size:"md",children:"Submit"})})]})},A=r(1191);var w=function(e){var t=e.handleLogout,r=(0,f.useContext)(m.Z),a=(0,f.useState)(),s=a[0],u=a[1],c=(0,f.useState)(""),l=(c[0],c[1]),d=(0,f.useState)(),p=d[0],y=d[1],v=(0,f.useState)([]),x=v[0],_=(v[1],(0,f.useState)(1)),S=_[0],b=_[1],M=(0,f.useState)([0,0,0]),w=M[0],j=M[1],k=(0,f.useState)(3),E=k[0],N=k[1],I=(0,h.useRouter)(),P=I.query.score,B=(0,f.useState)(!1),R=B[0],L=B[1];return g.S.useQuery(["morphotype_features.getAllSediments"],{onSuccess:function(e){y(e)}}),g.S.useQuery(["morphotype_features.getData"],{onSuccess:function(e){u(e)}}),(0,f.useEffect)((function(){if(p){var e=p.filter((function(e){return!x.includes(e)})),t=0===e.length?p[Math.floor(Math.random()*p.length)]:e[Math.floor(Math.random()*e.length)];l(t),l(t)}}),[p]),(0,f.useEffect)((function(){if(I.isReady)if("1"===I.query.skipEnd||Array.isArray(I.query.skipEnd)&&I.query.skipEnd.includes("1")){var e=(r.userEmail||localStorage.getItem("userEmail")||"").toLowerCase();L("[email protected]"===e)}else L(!1)}),[I.isReady,I.query.skipEnd,r.userEmail]),(0,n.jsx)("div",{className:o().background,children:(0,n.jsxs)("div",{children:[(0,n.jsx)(i.Z,{handleLogout:t}),r.currentClass&&(0,n.jsx)(A.Z,{activityKey:"feature_id",classroomId:parseInt(r.currentClass)}),1==S&&s&&(0,n.jsx)(C,{sediments:p,dataList:s,percents:w,setPercents:j,setStepNum:b,stars:E,setStars:N,currScore:Number(P),gameName:"feature_id",title:"Identify features by clicking on the colored lines",forceOpenEndModal:R})]})})}},7293:function(e){e.exports={background:"morphotype_features_background__hxBss",container:"morphotype_features_container__hsd_O",step_select_top:"morphotype_features_step_select_top__2cl_y",step_text:"morphotype_features_step_text__y__T9",step_text_container:"morphotype_features_step_text_container__fczeF",progressBar:"morphotype_features_progressBar__geTiQ",image_container:"morphotype_features_image_container__KDtZV",polygon_overlay:"morphotype_features_polygon_overlay__3IE6_",feature_badge:"morphotype_features_feature_badge__4Lao_",triangle_container:"morphotype_features_triangle_container__KsFMR"}}},function(e){e.O(0,[6577,443,134,6943,9774,2888,179],(function(){return t=5924,e(e.s=t);var t}));var t=e.O();_N_E=t}]);