908.4d793419.chunk.js

"use strict";(self.webpackChunkacellus=self.webpackChunkacellus||[]).push([[908],{40908:function(e,t,r){r.r(t),r.d(t,{default:function(){return Z}});var i,l,d,m=r(30168),a=r(1413),p=r(29439),n=r(43681),o=r(96091),c=r(5482),y=r(47313),u=r(58467),s=r(65240),g=r(51083),f=r(43370),L=r(99717),x=r(32250),b=r(71681),h=r(40476),F=r(58402),E=r(9533),w=r(46417),v={A:{filled:f.LetterAFilled,empty:f.LetterAEmpty},B:{filled:f.LetterBFilled,empty:f.LetterBEmpty},C:{filled:f.LetterCFilled,empty:f.LetterCEmpty},D:{filled:f.LetterDFilled,empty:f.LetterDEmpty},E:{filled:f.LetterEFilled,empty:f.LetterEEmpty},F:{filled:f.LetterFFilled,empty:f.LetterFEmpty},G:{filled:f.LetterGFilled,empty:f.LetterGEmpty},H:{filled:f.LetterHFilled,empty:f.LetterHEmpty},I:{filled:f.LetterIFilled,empty:f.LetterIEmpty},J:{filled:f.LetterJFilled,empty:f.LetterJEmpty},K:{filled:f.LetterKFilled,empty:f.LetterKEmpty},L:{filled:f.LetterLFilled,empty:f.LetterLEmpty},M:{filled:f.LetterMFilled,empty:f.LetterMEmpty},N:{filled:f.LetterNFilled,empty:f.LetterNEmpty},O:{filled:f.LetterOFilled,empty:f.LetterOEmpty},P:{filled:f.LetterPFilled,empty:f.LetterPEmpty},Q:{filled:f.LetterQFilled,empty:f.LetterQEmpty},R:{filled:f.LetterRFilled,empty:f.LetterREmpty},S:{filled:f.LetterSFilled,empty:f.LetterSEmpty},T:{filled:f.LetterTFilled,empty:f.LetterTEmpty},U:{filled:f.LetterUFilled,empty:f.LetterUEmpty},V:{filled:f.LetterVFilled,empty:f.LetterVEmpty},W:{filled:f.LetterWFilled,empty:f.LetterWEmpty},X:{filled:f.LetterXFilled,empty:f.LetterXEmpty},Y:{filled:f.LetterYFilled,empty:f.LetterYEmpty},Z:{filled:f.LetterZFilled,empty:f.LetterZEmpty},0:{filled:f.Number0Filled,empty:f.Number0Empty},1:{filled:f.Number1Filled,empty:f.Number1Empty},2:{filled:f.Number2Filled,empty:f.Number2Empty},3:{filled:f.Number3Filled,empty:f.Number3Empty},4:{filled:f.Number4Filled,empty:f.Number4Empty},5:{filled:f.Number5Filled,empty:f.Number5Empty},6:{filled:f.Number6Filled,empty:f.Number6Empty},7:{filled:f.Number7Filled,empty:f.Number7Empty},8:{filled:f.Number8Filled,empty:f.Number8Empty},9:{filled:f.Number9Filled,empty:f.Number9Empty}},N=["Letters","Numbers"];function Z(){var e,t=(0,E.kz)().tracingData,r=(0,y.useState)(N[0]),i=(0,p.Z)(r,2),l=i[0],d=i[1],m="Letters"===l?10:0,a="Letters"===l?36:10,n=(0,p.Z)((0,h.useActivity)().gameState,1)[0],o=(0,u.xW)().revalidate,g=(0,y.useRef)(!0);return(0,y.useEffect)((function(){if(n||g.current)return function(){return g.current=!1};o()}),[o,n]),(0,w.jsxs)(F.Z,{title:"Letters"===l?"Select a Letter":"Select a Number",bgImg:f.SpaceBg1,children:[(0,w.jsx)(s.Z,{toggles:N,toggle:l,setToggle:d,textStyles:{paddingLeft:"2rem",paddingRight:"2rem"}}),(0,w.jsx)(S,{maxWidth:!0,children:(0,w.jsxs)(R,{"data-testid":"parent-div",children:[(0,w.jsxs)("h2",{children:["Choose a ","Letters"===l?"letter":"number"," to trace:"]}),(0,w.jsx)(W,{"data-testid":"tracing-boxes",children:null===(e=Object.entries(t))||void 0===e?void 0:e.slice(m,a).map((function(e){var t=(0,p.Z)(e,2),r=t[0];return t[1]?(0,w.jsx)(j,{color:c.W[r.toLowerCase()].color,letter:r},r):(0,w.jsx)(k,{letter:r},r)}))})]})})]})}function C(){var e=(0,h.useActivity)(),t=(0,p.Z)(e.sharedState,2)[1],r=(0,p.Z)(e.gameState,2)[1],i=(0,b.useTrackingContext)().startTracking;return function(e){t((function(t){return(0,a.Z)((0,a.Z)({},t),{},{letter:e})})),r(!0),i()}}function j(e){var t=e.color,r=e.letter,i=C();return(0,w.jsxs)(D,{"data-testid":"card",onClick:function(){return i(r)},color:t,name:r,"aria-label":"Trace "+r,children:[(0,w.jsx)(A,{children:(0,w.jsx)(B,{color:t})}),(0,w.jsx)(T,{src:v[r].filled,alt:"Completed letter "+r})]})}function k(e){var t=e.letter,r=C();return(0,w.jsx)(D,{"data-testid":"card",onClick:function(){return r(t)},name:t,"aria-label":"Trace "+t,children:(0,w.jsx)(T,{src:v[t].empty,alt:"Empty letter "+t})})}var T=n.Z.img({width:"100%"}),S=n.Z.div(i||(i=(0,m.Z)(["\n  ","\n  ","\n"])),g.f,{paddingTop:"var(--spacing)","@media (min-width: 768px)":{padding:"var(--spacing)"}}),R=n.Z.div({display:"flex",flexDirection:"column",gap:"calc(var(--spacing) / 2)","--tw-bg-opacity":"1",backgroundColor:"rgb(162 28 175 / var(--tw-bg-opacity))",paddingLeft:"var(--spacing)",paddingRight:"var(--spacing)",paddingBottom:"var(--spacing)",paddingTop:"calc(var(--spacing) / 2)","--tw-shadow":"5px 5px 20px 0px rgba(76,30,133,0.4)","--tw-shadow-colored":"5px 5px 20px 0px var(--tw-shadow-color)",boxShadow:"var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)","@media (min-width: 768px)":{borderRadius:"1.5rem"}}),W=n.Z.div({display:"grid",gridTemplateColumns:"repeat(2, minmax(0, 1fr))",justifyItems:"center",gap:"1.5rem","@media (min-width: 500px)":{gap:"2.5rem"},"@media (min-width: 640px)":{gridTemplateColumns:"repeat(3, minmax(0, 1fr))"},"@media (min-width: 1024px)":{gridTemplateColumns:"repeat(4, minmax(0, 1fr))"},"@media (min-width: 1280px)":{gap:"4rem"},"@media (min-width: 1536px)":{gridTemplateColumns:"repeat(5, minmax(0, 1fr))"}}),A=n.Z.div({position:"absolute",right:"2rem",top:"2rem",height:"3rem",width:"3rem",borderRadius:"1.5rem","--tw-bg-opacity":"1",backgroundColor:"rgb(250 204 21 / var(--tw-bg-opacity))","@media (min-width: 768px)":{right:"1rem",top:"1rem"},"@media (min-width: 1280px)":{right:"2.5rem",top:"2.5rem"}}),B=(0,n.Z)(o.r)(l||(l=(0,m.Z)(["\n  ","\n  stroke: ",";\n"])),{marginLeft:"auto",marginRight:"auto",marginTop:"0.5rem",marginBottom:"0.5rem",height:"2rem",width:"2rem",strokeWidth:"4px"},(function(e){var t=e.color;return L.xF[t][500]})),D=n.Z.button(d||(d=(0,m.Z)(["\n  ","\n  ","\n  ","\n"])),(function(e){var t=e.color;return t?"background: radial-gradient(".concat(L.xF[t][300],", ").concat(L.xF[t][500],");"):{"--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))"}}),{width:"100%",padding:"1.5rem",textAlign:"center",fontSize:"10rem","--tw-text-opacity":"1",color:"rgb(0 0 0 / var(--tw-text-opacity))","@media (min-width: 500px)":{padding:"2.5rem"},"@media (min-width: 1280px)":{padding:"5rem"}},x.k)}}]);