https://fossilsketch.org/_next/static/chunks/pages/games/custom_feature_id-ad8e81cd488d3297.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8788],{4693:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/games/custom_feature_id",function(){return r(3821)}])},1191:function(e,t,r){"use strict";r.d(t,{Z:function(){return a}});var n=r(2784),o=r(2589);function a(e){var t=e.activityKey,r=e.classroomId,a=(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=o.S.useMutation(["user.logActivityTime"]).mutate;return(0,n.useEffect)((function(){if(Number.isFinite(r)&&!(r<=0)&&t){a.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-a.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-a.current,i.current=!1),e()):i.current||(a.current=t,i.current=!0)},o=function(){var e=Date.now();i.current&&(s.current+=e-a.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 o;return Boolean(null===(o=navigator.sendBeacon)||void 0===o?void 0:o.call(navigator,"/api/trpc/user.logActivityTime?batch=1",n))}catch(a){return console.error("Beacon failed",a),!1}}(n)&&(u.current+=n)};return document.addEventListener("visibilitychange",n),window.addEventListener("pagehide",o),l.current=window.setInterval(e,5e3),function(){document.removeEventListener("visibilitychange",n),window.removeEventListener("pagehide",o),l.current&&clearInterval(l.current),i.current&&(s.current+=Date.now()-a.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}},3821:function(e,t,r){"use strict";r.r(t);var n=r(865),o=r(6670),a=r(930),i=r(1899),s=r(2322),u=r(2784),c=r(5632),l=r(5117),d=r(8654),f=r(7841),p=r(3575),h=r(7082),v=r(6335),g=r(1783),m=r(1191),y=r(3750),_=r(7973),x=r(2589),w=r(9454),b=r(7293),j=r.n(b);t.default=function(e){var t,r,b,S,C=e.handleLogout,E=(0,c.useRouter)(),M=(0,u.useContext)(_.Z),N=E.query.id,k="string"===typeof N?parseInt(N):0,I=(0,u.useRef)(null),T=(0,u.useRef)(null),Z=x.S.useQuery(["custom_games.getGame",{gameId:k}],{enabled:k>0}),L=Z.data,P=Z.isLoading,D=(0,u.useState)(0),F=D[0],R=D[1],O=(0,u.useState)([]),B=O[0],W=O[1],K=(0,u.useState)([]),A=K[0],J=K[1],X=(0,u.useState)(-1),q=X[0],G=X[1],U=(0,u.useState)({x:0,y:0,visible:!1,checked:""}),z=U[0],Y=U[1],H=(0,u.useState)(!0),Q=H[0],V=H[1],$=(0,u.useState)(-1),ee=$[0],te=$[1],re=(0,u.useState)(3),ne=re[0],oe=re[1],ae=(0,u.useState)(Date.now())[0],ie=(0,u.useState)(!1),se=ie[0],ue=ie[1],ce=(0,u.useState)(""),le=ce[0],de=ce[1],fe=(0,u.useState)("star1.svg"),pe=fe[0],he=fe[1],ve=x.S.useMutation(["custom_games.saveAttempt"]).mutate,ge=null===L||void 0===L||null===(t=L.config)||void 0===t||null===(r=t.levels)||void 0===r?void 0:r[F],me=null!==(S=null===ge||void 0===ge?void 0:ge.features)&&void 0!==S?S:[];(0,u.useEffect)((function(){ge&&(W(Array(me.length).fill("")),J(me.map((function(e){return e.lineColor}))),G(-1),V(!0),te(-1))}),[F,L]),(0,u.useEffect)((function(){if(!(ee<=0)){var e=T.current,t=null===e||void 0===e?void 0:e.getContext("2d");e&&t&&(t.clearRect(0,0,e.width,e.height),t.lineCap="round",t.lineJoin="round",me.forEach((function(e,r){var n;t.strokeStyle=A[r]||e.lineColor;var o=null!==(n=e.lineWidth)&&void 0!==n?n:4;t.lineWidth=Math.max(1.5,o*ee),t.beginPath();var a=e.points;if(a.length>0&&(t.moveTo(a[0].x*ee,a[0].y*ee),a.forEach((function(e){return t.lineTo(e.x*ee,e.y*ee)}))),t.stroke(),a.length>0){var i=a[Math.floor(a.length/2)];t.fillStyle="white",t.font="bold 14px Arial",t.beginPath(),t.arc(i.x*ee,i.y*ee-15,12,0,2*Math.PI),t.fillStyle=A[r]||e.lineColor,t.fill(),t.fillStyle="white",t.fillText("".concat(r+1),i.x*ee-4,i.y*ee-11)}})))}}),[ee,A,me]);var ye,_e=function(e,t,r){var n=Math.pow(r.x-t.x,2)+Math.pow(r.y-t.y,2);

1if(0===n)return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2));var o=((e.x-t.x)*(r.x-t.x)+(e.y-t.y)*(r.y-t.y))/n;o=Math.max(0,Math.min(1,o));var a=t.x+o*(r.x-t.x),i=t.y+o*(r.y-t.y);return Math.sqrt(Math.pow(e.x-a,2)+Math.pow(e.y-i,2))};return P?(0,s.jsxs)("div",{className:j().background,children:[(0,s.jsx)(g.Z,{handleLogout:C}),(0,s.jsx)("div",{className:j().container,children:(0,s.jsx)(l.x,{color:"white",children:"Loading..."})})]}):L?(0,s.jsxs)("div",{className:j().background,children:[(0,s.jsx)(g.Z,{handleLogout:C}),M.currentClass&&(0,s.jsx)(m.Z,{activityKey:"custom_game_".concat(k),classroomId:parseInt(M.currentClass)}),(0,s.jsxs)("div",{className:j().container,style:{height:"100vh"},children:[(0,s.jsx)("div",{className:j().step_select_top,children:(0,s.jsx)("div",{className:j().step_text_container,children:(0,s.jsx)("div",{className:j().step_text,children:L.config.title})})}),(0,s.jsx)("div",{className:j().progressBar,children:(0,s.jsx)("div",{style:{height:"1px",backgroundColor:"#CA8500",width:"".concat((F+1)/(null!==(ye=null===(b=L.config.levels)||void 0===b?void 0:b.length)&&void 0!==ye?ye:1)*100,"%")}})}),(0,s.jsx)(y.Z,{finalMessage:le,starImg:pe,openModal:se,setOpenModal:ue,surveyConfig:y.C,gameName:"custom_game_".concat(k)}),(0,s.jsx)("div",{className:j().image_container,children:(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"flex-start",width:"100%"},children:(0,s.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",position:"relative"},children:[(null===ge||void 0===ge?void 0:ge.imageSrc)&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("img",{ref:I,src:(0,w.a9)(ge.imageSrc),onClick:function(e){var t=e.currentTarget.getBoundingClientRect(),r=function(e){for(var t=function(t){for(var r=me[t].points.map((function(e){return{x:e.x*ee,y:e.y*ee}})),n=0;n<r.length-1;n++)if(_e(e,r[n],r[n+1])<15)return{v:t}},r=0;r<me.length;r++){var n=t(r);if("object"===(0,i.Z)(n))return n.v}return-1}({x:e.clientX-t.left,y:e.clientY-t.top});G(r),Y({x:e.clientX,y:e.clientY,visible:-1!==r,checked:B[r]||""})},onLoad:function(e){var t=e.target,r=T.current;if(r){r.width=t.width,r.height=t.height;var n=t.width/(t.naturalWidth||t.width);te(n)}},alt:"Fossil",style:{maxWidth:"70vw",maxHeight:"50vh",width:"auto",height:"auto",margin:"1%",objectFit:"contain",cursor:"pointer"}}),(0,s.jsx)("canvas",{ref:T,style:{position:"absolute",top:0,left:0,pointerEvents:"none"}})]}),z.visible&&q>=0&&me[q]&&(0,s.jsx)("div",{style:{position:"fixed",top:z.y,left:z.x,zIndex:100,backgroundColor:"#fff",padding:"12px 14px",borderRadius:10,boxShadow:"0 8px 24px rgba(0,0,0,0.25)",border:"1px solid rgba(0,0,0,0.08)",width:260},children:(0,s.jsx)(d.Y.Group,{label:"Choose the correct feature:",value:z.checked,onChange:function(e){if(-1!==q){var t=(0,a.Z)(B);t[q]=e,W(t),Y((function(t){return(0,o.Z)((0,n.Z)({},t),{checked:e})})),t.every((function(e){return""!==e}))&&V(!1)}},mb:"10px",size:"md",children:me[q].options.map((function(e,t){return(0,s.jsx)(d.Y,{value:e,label:e,style:{marginBottom:6}},t)}))})}),(0,s.jsx)("div",{style:{justifyContent:"center",display:"flex",marginTop:10},children:(0,s.jsx)(f.z,{onClick:function(){var e,t,r,n=[],o=me.map((function(e,t){return e.answer===B[t]?"green":(n.push(t),"red")}));if(J(o),n.length>0)(0,p.c0)({id:"incorrect",message:"".concat(n.length," incorrect answer(s). Try again!"),color:"red",icon:(0,s.jsx)(h.Z,{}),autoClose:2500}),oe((function(e){return Math.max(e-1,1)}));else if(F<(null!==(r=null===L||void 0===L||null===(e=L.config)||void 0===e||null===(t=e.levels)||void 0===t?void 0:t.length)&&void 0!==r?r:1)-1)(0,p.c0)({id:"correct",message:"Correct! Moving to next level.",color:"green",icon:(0,s.jsx)(v.Z,{}),autoClose:2e3}),setTimeout((function(){return R(F+1)}),1500);else{var a=Math.floor((Date.now()-ae)/1e3);3===ne?(he("star3.svg"),de("Perfect! Great job!")):ne>=2?(he("star2.svg"),de("Good job! Room for improvement.")):(he("star1.svg"),de("Keep practicing!")),ue(!0),M.currentClass&&ve({gameId:k,classroomId:parseInt(M.currentClass),score:ne,timeSpentSeconds:a})}},disabled:Q,children:"Submit"})})]})})})]})]}):(0,s.jsxs)("div",{className:j().background,children:[(0,s.jsx)(g.Z,{handleLogout:C}

1),(0,s.jsx)("div",{className:j().container,children:(0,s.jsx)(l.x,{color:"white",children:"Game not found"})})]})}},9454:function(e,t,r){"use strict";r.d(t,{DE:function(){return m},Ix:function(){return u},JF:function(){return p},Kk:function(){return y},NO:function(){return d},a9:function(){return g},ao:function(){return h},h0:function(){return i},yk:function(){return _}});var n=r(8788),o=r(2838),a=r(2970);function i(e,t,r){return s.apply(this,arguments)}function s(){return(s=(0,n.Z)((function(e,t,r){return(0,a.__generator)(this,(function(n){return(0,o.Z)(e,File)?[2,new Promise((function(n,o){var a=new FormData;a.append("image",e),a.append("fossilType",t);var i=new XMLHttpRequest;i.upload.addEventListener("progress",(function(e){if(e.lengthComputable){var t=Math.round(e.loaded/e.total*100);r({percentage:t,status:"uploading"})}})),i.addEventListener("load",(function(){if(i.status>=200&&i.status<300)try{var e=JSON.parse(i.responseText);e.imagePath?(r({percentage:100,status:"success"}),n(e.imagePath)):(r({percentage:100,status:"error",error:"No image path in response"}),o(new Error("No image path in response")))}catch(t){r({percentage:100,status:"error",error:"Failed to parse response"}),o(new Error("Failed to parse response"))}else r({percentage:100,status:"error",error:"Upload failed: ".concat(i.status)}),o(new Error("Upload failed with status ".concat(i.status)))})),i.addEventListener("error",(function(){r({percentage:0,status:"error",error:"Network error"}),o(new Error("Network error"))})),i.open("POST","/api/uploadImage"),i.send(a)}))]:[2]}))}))).apply(this,arguments)}function u(e,t){return c.apply(this,arguments)}function c(){return(c=(0,n.Z)((function(e,t){var r,n,i,s;return(0,a.__generator)(this,(function(a){switch(a.label){case 0:return(0,o.Z)(e,File)?((r=new FormData).append("image",e),r.append("fossilType",t),i={},[4,fetch("/api/uploadImage",(i.method="POST",i.body=r,i))]):[2];case 1:return[4,(n=a.sent()).json().catch((function(){return{}}))];case 2:if(s=a.sent(),!n.ok)throw new Error("string"===typeof s.error?s.error:"Upload failed (".concat(n.status,")"));if(s.imagePath)return[2,s.imagePath];throw new Error("Server did not return an image path")}}))}))).apply(this,arguments)}function l(){var e=window.location,t=e.hostname,r=e.protocol;return"localhost"===t||"127.0.0.1"===t?"".concat(r,"//").concat(t,":8000/api/uploadImage"):"/api/uploadImage"}function d(e,t){return f.apply(this,arguments)}function f(){return(f=(0,n.Z)((function(e,t){return(0,a.__generator)(this,(function(r){if(!(0,o.Z)(e,File))throw new Error("Invalid file");return[2,new Promise((function(r,n){var o=new FormData;o.append("image",e),o.append("fossilType","3D_models");var a=new XMLHttpRequest;a.withCredentials=!0,a.upload.addEventListener("progress",(function(e){if(e.lengthComputable){var r=Math.min(99,Math.round(e.loaded/e.total*100));null===t||void 0===t||t({percentage:r,status:"uploading"})}})),a.addEventListener("load",(function(){var e={};try{e=JSON.parse(a.responseText||"{}")}catch(i){}if(a.status>=200&&a.status<300&&e.imagePath)return null===t||void 0===t||t({percentage:100,status:"success"}),void r(e.imagePath);var o="string"===typeof e.error?e.error:"Upload failed (".concat(a.status||"network",")");null===t||void 0===t||t({percentage:0,status:"error",error:o}),n(new Error(o))})),a.addEventListener("error",(function(){null===t||void 0===t||t({percentage:0,status:"error",error:"Network error"}),n(new Error("Network error during model upload"))})),a.addEventListener("timeout",(function(){n(new Error("Upload timed out"))})),a.open("POST",l()),a.timeout=6e5,null===t||void 0===t||t({percentage:0,status:"uploading"}),a.send(o)}))]}))}))).apply(this,arguments)}function p(e,t){if(!(null===e||void 0===e?void 0:e.trim()))return null;var r=e.trim(),n=r.startsWith("{")||/sketchfab\.com/i.test(r);if(!n&&/\.(glb|gltf)$/i.test(r))return/^https?:\/\//i.test(r)||r.startsWith("/")?r:g(r.startsWith("/")?r.slice(1):r);if(null===t||void 0===t?void 0:t.trim()){var o=t.toLowerCase().replace(/^fossil\s+/,"").trim(),a="trifarina"===o?"trifarina_angulosa":o.replace(/ /g,"_");

1return"https://storage.googleapis.com/fossilsketch/3D_models/".concat(a,".glb")}return null}function h(e,t){return v.apply(this,arguments)}function v(){return(v=(0,n.Z)((function(e,t){var r;return(0,a.__generator)(this,(function(n){switch(n.label){case 0:return""===e?[3,2]:(r={},[4,fetch("/api/deleteImage",(r.method="POST",r.headers={"Content-Type":"application/json"},r.body=JSON.stringify({fileName:e,fossilType:t.toLowerCase()}),r)).then((function(e){return e.json()}))]);case 1:n.sent(),n.label=2;case 2:return[2]}}))}))).apply(this,arguments)}function g(e){if(e.startsWith("http"))return e;return"https://storage.googleapis.com/".concat("fossilsketch","/").concat(e.startsWith("/")?e.substring(1):e)}function m(e){var t=e.toLowerCase();return"foraminifera"===t||"forams"===t||"morphotype"===t||"morphotypes"===t?"foraminifera":"ostracoda"===t?"ostracoda":t}function y(e,t){if(!(null===e||void 0===e?void 0:e.trim()))return null;var r=e.trim();if(/^https?:\/\//i.test(r))return r;if(r.startsWith("/api/uploads/"))return r;var n=m(t),o=r.replaceAll(" ","");return o.includes("/")||(o="".concat(n,"/").concat(o)),"localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname?"/api/uploads/".concat(o):g(o)}function _(e){return x.apply(this,arguments)}function x(){return(x=(0,n.Z)((function(e){var t,r;return(0,a.__generator)(this,(function(n){switch(n.label){case 0:return""===e?[3,2]:(r={},[4,fetch("/api/fetchImageNames",(r.method="POST",r.headers={"Content-Type":"application/json"},r.body=JSON.stringify({folderName:e}),r)).then((function(e){return e.json()}))]);case 1:return(t=n.sent()).imagePaths?[2,t.imagePaths]:[2,[]];case 2:return[2]}}

1))}))).apply(this,arguments)}},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"}},8788:function(e,t,r){"use strict";function n(e,t,r,n,o,a,i){try{var s=e[a](i),u=s.value}catch(c){return void r(c)}s.done?t(u):Promise.resolve(u).then(n,o)}function o(e){return function(){var t=this,r=arguments;return new Promise((function(o,a){var i=e.apply(t,r);function s(e){n(i,o,a,s,u,"next",e)}function u(e){n(i,o,a,s,u,"throw",e)}s(void 0)}))}}r.d(t,{Z:function(){return o}})},2838:function(e,t,r){"use strict";function n(e,t){return null!=t&&"undefined"!==typeof Symbol&&t[Symbol.hasInstance]?!!t[Symbol.hasInstance](e):e instanceof t}r.d(t,{Z:function(){return n}})},1899:function(e,t,r){"use strict";function n(e){return e&&e.constructor===Symbol?"symbol":typeof e}r.d(t,{Z:function(){return n}})}},function(e){e.O(0,[6577,443,134,6943,9774,2888,179],(function(){return t=4693,e(e.s=t);var t}));var t=e.O();_N_E=t}]);