@cuemath/leap 3.2.18-mb → 3.2.19-aa0

package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { ITableCardRef, ITableDetails } from '../../comps/tables-card/tables-card-types';\nimport type {\n  ITableInfo,\n  ITables,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseTableJourneyProps } from './use-table-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { getTheme } from '../../../../ui/theme/get-theme';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n  LESSON_CARD_INDEX,\n  PUZZLE_CARD_INDEX,\n  SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n  SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n  TABLE_CARD_INDEX,\n} from './constants';\nimport {\n  GO_TO_TABLE_LAUNCHER_DURATION_MS,\n  SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n  SHOW_INITIAL_COACHMARK_AFTER_MS,\n  SHOW_INITIAL_TOOLTIP_AFTER_MS,\n  START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport * as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n  carouselRefs,\n  originalTableRef,\n  onTableSegmentClick,\n  onJourneyComplete,\n  onNextJourney,\n}: IUseTableJourneyProps) => {\n  const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n\n  const { device } = getTheme();\n  const isMobile = device === 'mobile';\n  const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\n\n  const highlightedTableRef = useRef<ITableCardRef>(null);\n\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, addCoachmark, endJourney } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const handleEndJourney = useCallback(\n    (tableDetails?: ITableDetails) => {\n      endJourney(journeyId);\n      // Only when User clicked on play\n      if (tableDetails) {\n        onTableSegmentClick(tableDetails);\n      }\n      trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n        step: Action.TABLES,\n      });\n\n      // Reset original table card ref label\n      originalTableRef?.current?.setLabelVisiblity(true);\n      originalTableRef?.current?.stopLabelAnimation();\n      onJourneyComplete(journeyId);\n    },\n    [\n      endJourney,\n      journeyId,\n      onJourneyComplete,\n      onTableSegmentClick,\n      originalTableRef,\n      trackAnalytics,\n    ],\n  );\n\n  const handleContinueJourney = useCallback(() => {\n    handleEndJourney();\n    onNextJourney();\n  }, [handleEndJourney, onNextJourney]);\n\n  const handleTableSegmentClick = useCallback(\n    (launcherData: ITables, tableData: ITableInfo) => {\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current\n      ) {\n        return;\n      }\n\n      const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            defaultTable={tableData}\n            label={launcherData.label}\n            data={launcherData.data}\n            onPress={handleEndJourney}\n            onGoBackFromTableLevel={handleContinueJourney}\n          />\n        ),\n        indicator: {\n          position: 'top',\n          backgroundColor: 'YELLOW_4',\n          width: 236,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs={tooltipTextRenderAs}>\n                Each table has 3 levels—clear them and earn 3 stars!\n              </Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: segmentedCardDims.width / 2,\n          tooltipYCoOrdinates: 45,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: !isMobile && (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              Pick a level\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height * 0.4,\n        } as INudgeProps,\n        elementToHighlight: <></>,\n      });\n\n      nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n      nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n      const startAnimationOnLabelAgain = setTimeout(() => {\n        clearTimeout(startAnimationOnLabelAgain);\n        highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n      }, START_ANIMATING_CLONED_ELEM);\n\n      timerRefs.current.push(startAnimationOnLabelAgain);\n    },\n    [\n      addCoachmark,\n      handleContinueJourney,\n      handleEndJourney,\n      isMobile,\n      journeyId,\n      nextCoachmark,\n      originalTableRef,\n      tooltipTextRenderAs,\n    ],\n  );\n\n  const goToTableLauncher = useCallback(() => {\n    playButtonSound();\n    carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n    nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n    trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n      step: Action.TABLES,\n    });\n\n    const showNudge = setTimeout(() => {\n      clearTimeout(showNudge);\n      originalTableRef.current?.setLabelVisiblity(false);\n      nextCoachmark(journeyId, true);\n    }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n    timerRefs.current.push(showNudge);\n\n    const animateLabel = setTimeout(() => {\n      clearTimeout(animateLabel);\n      highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n    }, START_ANIMATING_CLONED_ELEM);\n\n    timerRefs.current.push(animateLabel);\n  }, [carouselRefs, journeyId, nextCoachmark, originalTableRef, playButtonSound, trackAnalytics]);\n\n  const startJourney = useCallback(\n    (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n      const paginationList = carouselRefs.current?.indicatorRefs;\n      const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n      const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current ||\n        !paginationList ||\n        !carouselNextBtnRef?.current ||\n        !tablePaginationRef ||\n        !tablePaginationRef.current\n      ) {\n        return;\n      }\n\n      const labelDims = originalTableRef.current?.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      // TAKE THE USER TO THE TABLE CARD\n      if (!isTutorialOnboardingDone) {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: !isMobile && (\n                <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                  Click to proceed\n                </Text>\n              ),\n              nudgePointerX: 0,\n              nudgePointerY: 0,\n            } as INudgeProps,\n            elementToHighlight: (\n              <IconButton\n                renderAs=\"secondary\"\n                Icon={CaratRightIcon}\n                onClick={goToTableLauncher}\n                analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n              />\n            ),\n          },\n        ]);\n        carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n      } else {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n            type: IndicatorType.TOOLTIP,\n            elementToHighlight: <S.Indicator $isActive={false} />,\n            indicator: {\n              position: 'bottom',\n              backgroundColor: 'YELLOW_4',\n              width: 52,\n              tooltipItem: (\n                <FlexView\n                  $position=\"absolute\"\n                  $flexDirection=\"row\"\n                  style={{ top: 6, left: 8, cursor: 'pointer' }}\n                  onClick={goToTableLauncher}\n                >\n                  <Text $renderAs={tooltipTextRenderAs}>NEW</Text>\n                </FlexView>\n              ),\n              tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n            } as IArrowTooltipProps,\n          },\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: '',\n              nudgePointerY: 20,\n            } as INudgeProps,\n            elementToHighlight: <></>,\n          },\n        ]);\n        carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n        nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n      }\n\n      // SHOW THE USER SELECT A TABLE\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.labelRef,\n\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: <></>,\n        indicator: {\n          position: 'top',\n          backgroundColor: 'YELLOW_4',\n          width: 264,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs={tooltipTextRenderAs}>\n                Get faster at multiplication! Practice everyday and become a Tables champ.\n              </Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: labelDims.width / 2,\n          tooltipYCoOrdinates: labelDims.height + 10,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: !isMobile && (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              {'Pick a table to start'}\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height / 2,\n        } as INudgeProps,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            label={tablesData.label}\n            data={tablesData.data}\n            onPress={() => {}}\n            onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n          />\n        ),\n      });\n    },\n    [\n      addCoachmark,\n      carouselRefs,\n      goToTableLauncher,\n      handleTableSegmentClick,\n      isMobile,\n      journeyId,\n      nextCoachmark,\n      originalTableRef,\n      setJourney,\n      tooltipTextRenderAs,\n    ],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      timerRefs.current.forEach(timer => clearTimeout(timer));\n      timerRefs.current = [];\n    };\n  }, [journeyId]);\n\n  return {\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","originalTableRef","onTableSegmentClick","onJourneyComplete","onNextJourney","journeyId","JOURNEY_ID_STUDENT","device","getTheme","isMobile","tooltipTextRenderAs","highlightedTableRef","useRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleContinueJourney","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","_f","S.Indicator","_i","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_g","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_h","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":";;;;;;;;;;;;;;;;;;AA0CO,MAAMA,KAA0B,CAAC;AAAA,EACtC,cAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AACF,MAA6B;AAC3B,QAAMC,IAAYC,GAAmB,6BAE/B,EAAE,QAAAC,MAAWC,MACbC,IAAWF,MAAW,UACtBG,IAAsBD,IAAW,aAAa,YAE9CE,IAAsBC,EAAsB,IAAI,GAEhDC,IAAYD,EAAwC,CAAA,CAAE,GAEtD,EAAE,iBAAAE,MAAoBC,MACtB,EAAE,eAAAC,GAAe,YAAAC,GAAY,cAAAC,GAAc,YAAAC,EAAA,IAAeC,MAC1D,EAAE,SAASC,EAAe,IAAIC,GAAa,GAE3CC,IAAmBC;AAAA,IACvB,CAACC,MAAiC;;AAChC,MAAAN,EAAWd,CAAS,GAEhBoB,KACFvB,EAAoBuB,CAAY,GAElCJ,EAAeK,EAAwB,2BAA2B;AAAA,QAChE,MAAMC,EAAO;AAAA,MAAA,CACd,IAGiBC,IAAA3B,KAAA,gBAAAA,EAAA,YAAA,QAAA2B,EAAS,kBAAkB,MAC7CC,IAAA5B,KAAA,gBAAAA,EAAkB,YAAlB,QAAA4B,EAA2B,sBAC3B1B,EAAkBE,CAAS;AAAA,IAC7B;AAAA,IACA;AAAA,MACEc;AAAA,MACAd;AAAA,MACAF;AAAA,MACAD;AAAA,MACAD;AAAA,MACAoB;AAAA,IACF;AAAA,EAAA,GAGIS,IAAwBN,EAAY,MAAM;AAC7B,IAAAD,KACHnB;EAAA,GACb,CAACmB,GAAkBnB,CAAa,CAAC,GAE9B2B,IAA0BP;AAAA,IAC9B,CAACQ,GAAuBC,MAA0B;;AAE9C,UAAA,GAACL,IAAA3B,EAAiB,YAAjB,QAAA2B,EAA0B,wBAAwB,YACnD,GAACC,IAAA5B,EAAiB,YAAjB,QAAA4B,EAA0B,SAAS;AAEpC;AAGF,YAAMK,IAAoBjC,EAAiB,QAAQ,SAAS,QAAQ,yBAC9DkC,KACJC,IAAAnC,EAAiB,YAAjB,gBAAAmC,EAA0B,wBAAwB,QAAQ;AAE5D,MAAAlB,EAAab,GAAW;AAAA,QACtB,+BAA+BJ,EAAiB,QAAQ;AAAA,QAExD,MAAMoC,EAAc;AAAA,QACpB,oBACE,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAK5B;AAAA,YACL,cAAcsB;AAAA,YACd,OAAOD,EAAa;AAAA,YACpB,MAAMA,EAAa;AAAA,YACnB,SAAST;AAAA,YACT,wBAAwBO;AAAA,UAAA;AAAA,QAC1B;AAAA,QAEF,WAAW;AAAA,UACT,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,OAAO;AAAA,UACP,+BACGU,GACC,EAAA,UAAA,gBAAAF,EAACG,KAAK,WAAW/B,GAAqB,kEAEtC,EACF,CAAA;AAAA,UAEF,qBAAqBwB,EAAkB,QAAQ;AAAA,UAC/C,qBAAqB;AAAA,QACvB;AAAA,MAAA,CACD,GAEDhB,EAAab,GAAW;AAAA,QACtB,+BAA+BJ,EAAiB,QAAQ;AAAA,QAExD,MAAMoC,EAAc;AAAA,QACpB,WAAW;AAAA,UACT,OAAO;AAAA,UACP,SAAS,CAAC5B,KACR,gBAAA6B,EAACG,KAAK,WAAU,OAAM,QAAO,SAAQ,UAErC,eAAA,CAAA;AAAA,UAEF,eAAeN,EAAc,QAAQ,IAAI;AAAA,UACzC,eAAeA,EAAc,SAAS;AAAA,QACxC;AAAA,QACA,oBAAsB,gBAAAG,EAAAI,GAAA,EAAA;AAAA,MAAA,CACvB,GAEa1B,EAAAX,GAAW,IAAOsC,EAAkC,GACpD3B,EAAAX,GAAW,IAAMuC,EAAgC;AAEzD,YAAAC,IAA6B,WAAW,MAAM;;AAClD,qBAAaA,CAA0B,IACnBjB,IAAAjB,EAAA,YAAA,QAAAiB,EAAS,oBAAoB;AAAA,SAChDkB,CAA2B;AAEpB,MAAAjC,EAAA,QAAQ,KAAKgC,CAA0B;AAAA,IACnD;AAAA,IACA;AAAA,MACE3B;AAAA,MACAY;AAAA,MACAP;AAAA,MACAd;AAAA,MACAJ;AAAA,MACAW;AAAA,MACAf;AAAA,MACAS;AAAA,IACF;AAAA,EAAA,GAGIqC,IAAoBvB,EAAY,MAAM;;AAC1B,IAAAV,MACHc,IAAA5B,EAAA,YAAA,QAAA4B,EAAS,UAAUoB,IAClBhC,EAAAX,GAAW,IAAO4C,EAAgC,GAEhE5B,EAAeK,EAAwB,wBAAwB;AAAA,MAC7D,MAAMC,EAAO;AAAA,IAAA,CACd;AAEK,UAAAuB,IAAY,WAAW,MAAM;;AACjC,mBAAaA,CAAS,IACLtB,IAAA3B,EAAA,YAAA,QAAA2B,EAAS,kBAAkB,KAC5CZ,EAAcX,GAAW,EAAI;AAAA,OAC5B8C,EAA+B;AAExB,IAAAtC,EAAA,QAAQ,KAAKqC,CAAS;AAE1B,UAAAE,IAAe,WAAW,MAAM;;AACpC,mBAAaA,CAAY,IACLxB,IAAAjB,EAAA,YAAA,QAAAiB,EAAS,oBAAoB;AAAA,OAChDkB,CAA2B;AAEpB,IAAAjC,EAAA,QAAQ,KAAKuC,CAAY;AAAA,EAAA,GAClC,CAACpD,GAAcK,GAAWW,GAAef,GAAkBa,GAAiBO,CAAc,CAAC,GAExFgC,IAAe7B;AAAA,IACnB,CAAC8B,GAAqBC,IAAoC,OAAU;;AAC5D,YAAAC,KAAiB5B,IAAA5B,EAAa,YAAb,gBAAA4B,EAAsB,eACvC6B,KAAqB5B,IAAA7B,EAAa,YAAb,gBAAA6B,EAAsB,YAC3C6B,IAAqBF,KAAA,gBAAAA,EAAiBR;AAE5C,UACE,GAACZ,IAAAnC,EAAiB,YAAjB,QAAAmC,EAA0B,wBAAwB,YACnD,GAACuB,IAAA1D,EAAiB,YAAjB,QAAA0D,EAA0B,SAAS,YACpC,CAACH,KACD,EAACC,KAAA,QAAAA,EAAoB,YACrB,CAACC,KACD,CAACA,EAAmB;AAEpB;AAGF,YAAME,KAAYC,IAAA5D,EAAiB,YAAjB,gBAAA4D,EAA0B,SAAS,QAAQ,yBACvD1B,KACJ2B,IAAA7D,EAAiB,YAAjB,gBAAA6D,EAA0B,wBAAwB,QAAQ;AAG5D,MAAKP,KA6BHtC,EAAWZ,GAAW;AAAA,QACpB;AAAA,UACE,+BAA+BqD;AAAA,UAE/B,MAAMrB,EAAc;AAAA,UACpB,oBAAqB,gBAAAC,EAAAyB,IAAA,EAAY,WAAW,GAAO,CAAA;AAAA,UACnD,WAAW;AAAA,YACT,UAAU;AAAA,YACV,iBAAiB;AAAA,YACjB,OAAO;AAAA,YACP,aACE,gBAAAzB;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,gBAAe;AAAA,gBACf,OAAO,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,UAAU;AAAA,gBAC5C,SAASO;AAAA,gBAET,UAAC,gBAAAT,EAAAG,GAAA,EAAK,WAAW/B,GAAqB,UAAG,OAAA;AAAA,cAAA;AAAA,YAC3C;AAAA,YAEF,qBAAqB;AAAA;AAAA,UACvB;AAAA,QACF;AAAA,QACA;AAAA,UACE,+BAA+BgD;AAAA,UAE/B,MAAMrB,EAAc;AAAA,UACpB,WAAW;AAAA,YACT,OAAO;AAAA,YACP,SAAS;AAAA,YACT,eAAe;AAAA,UACjB;AAAA,UACA,oBAAsB,gBAAAC,EAAAI,GAAA,EAAA;AAAA,QACxB;AAAA,MAAA,CACD,IACYsB,IAAAhE,EAAA,YAAA,QAAAgE,EAAS,UAAUC,KAClBjD,EAAAX,GAAW,IAAO6D,CAA+B,GACjDlD,EAAAX,GAAW,IAAM8D,EAA6B,MAjE5DlD,EAAWZ,GAAW;AAAA,QACpB;AAAA,UACE,gCAA+B+D,IAAApE,EAAa,YAAb,gBAAAoE,EAAsB;AAAA,UAErD,MAAM/B,EAAc;AAAA,UACpB,WAAW;AAAA,YACT,OAAO;AAAA,YACP,SAAS,CAAC5B,KACR,gBAAA6B,EAACG,KAAK,WAAU,OAAM,QAAO,SAAQ,UAErC,mBAAA,CAAA;AAAA,YAEF,eAAe;AAAA,YACf,eAAe;AAAA,UACjB;AAAA,UACA,oBACE,gBAAAH;AAAA,YAAC+B;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAMC;AAAA,cACN,SAASvB;AAAA,cACT,gBAAgBwB,GAA+B;AAAA,YAAA;AAAA,UACjD;AAAA,QAEJ;AAAA,MAAA,CACD,IACYC,IAAAxE,EAAA,YAAA,QAAAwE,EAAS,UAAUC,KAClBzD,EAAAX,GAAW,IAAO6D,CAA+B,IA2CjEhD,EAAab,GAAW;AAAA,QACtB,+BAA+BJ,EAAiB,QAAQ;AAAA,QAExD,MAAMoC,EAAc;AAAA,QACpB,oBAAsB,gBAAAC,EAAAI,GAAA,EAAA;AAAA,QACtB,WAAW;AAAA,UACT,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,OAAO;AAAA,UACP,+BACGF,GACC,EAAA,UAAA,gBAAAF,EAACG,KAAK,WAAW/B,GAAqB,wFAEtC,EACF,CAAA;AAAA,UAEF,qBAAqBkD,EAAU,QAAQ;AAAA,UACvC,qBAAqBA,EAAU,SAAS;AAAA,QAC1C;AAAA,MAAA,CACD,GAED1C,EAAab,GAAW;AAAA,QACtB,+BAA+BJ,EAAiB,QAAQ;AAAA,QAExD,MAAMoC,EAAc;AAAA,QACpB,WAAW;AAAA,UACT,OAAO;AAAA,UACP,SAAS,CAAC5B,KACR,gBAAA6B,EAACG,KAAK,WAAU,OAAM,QAAO,SAC1B,UACH,wBAAA,CAAA;AAAA,UAEF,eAAeN,EAAc,QAAQ,IAAI;AAAA,UACzC,eAAeA,EAAc,SAAS;AAAA,QACxC;AAAA,QACA,oBACE,gBAAAG;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAK5B;AAAA,YACL,OAAO2C,EAAW;AAAA,YAClB,MAAMA,EAAW;AAAA,YACjB,SAAS,MAAM;AAAA,YAAC;AAAA,YAChB,qBAAqB,CAAAoB,MAAa3C,EAAwBuB,GAAYoB,CAAS;AAAA,UAAA;AAAA,QACjF;AAAA,MAAA,CAEH;AAAA,IACH;AAAA,IACA;AAAA,MACExD;AAAA,MACAlB;AAAA,MACA+C;AAAA,MACAhB;AAAA,MACAtB;AAAA,MACAJ;AAAA,MACAW;AAAA,MACAf;AAAA,MACAgB;AAAA,MACAP;AAAA,IACF;AAAA,EAAA;AAIF,SAAAiE,EAAU,MACD,MAAM;AACX,IAAA9D,EAAU,QAAQ,QAAQ,CAAS+D,MAAA,aAAaA,CAAK,CAAC,GACtD/D,EAAU,UAAU;EAAC,GAEtB,CAACR,CAAS,CAAC,GAEP;AAAA,IACL,cAAAgD;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"use-table-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { ITableCardRef, ITableDetails } from '../../comps/tables-card/tables-card-types';\nimport type {\n  ITableInfo,\n  ITables,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseTableJourneyProps } from './use-table-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n  LESSON_CARD_INDEX,\n  PUZZLE_CARD_INDEX,\n  SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n  SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n  TABLE_CARD_INDEX,\n} from './constants';\nimport {\n  GO_TO_TABLE_LAUNCHER_DURATION_MS,\n  SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n  SHOW_INITIAL_COACHMARK_AFTER_MS,\n  SHOW_INITIAL_TOOLTIP_AFTER_MS,\n  START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport * as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n  carouselRefs,\n  originalTableRef,\n  onTableSegmentClick,\n  onJourneyComplete,\n  onNextJourney,\n}: IUseTableJourneyProps) => {\n  const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n\n  const { device } = useTheme();\n  const isMobile = device === EDeviceType.MOBILE;\n  const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\n\n  const highlightedTableRef = useRef<ITableCardRef>(null);\n\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, addCoachmark, endJourney } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const handleEndJourney = useCallback(\n    (tableDetails?: ITableDetails) => {\n      endJourney(journeyId);\n      // Only when User clicked on play\n      if (tableDetails) {\n        onTableSegmentClick(tableDetails);\n      }\n      trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n        step: Action.TABLES,\n      });\n\n      // Reset original table card ref label\n      originalTableRef?.current?.setLabelVisiblity(true);\n      originalTableRef?.current?.stopLabelAnimation();\n      onJourneyComplete(journeyId);\n    },\n    [\n      endJourney,\n      journeyId,\n      onJourneyComplete,\n      onTableSegmentClick,\n      originalTableRef,\n      trackAnalytics,\n    ],\n  );\n\n  const handleContinueJourney = useCallback(() => {\n    handleEndJourney();\n    onNextJourney();\n  }, [handleEndJourney, onNextJourney]);\n\n  const handleTableSegmentClick = useCallback(\n    (launcherData: ITables, tableData: ITableInfo) => {\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current\n      ) {\n        return;\n      }\n\n      const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            defaultTable={tableData}\n            label={launcherData.label}\n            data={launcherData.data}\n            onPress={handleEndJourney}\n            onGoBackFromTableLevel={handleContinueJourney}\n          />\n        ),\n        indicator: {\n          position: 'top',\n          backgroundColor: 'YELLOW_4',\n          width: 236,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs={tooltipTextRenderAs}>\n                Each table has 3 levels—clear them and earn 3 stars!\n              </Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: segmentedCardDims.width / 2,\n          tooltipYCoOrdinates: 45,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: !isMobile && (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              Pick a level\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height * 0.4,\n        } as INudgeProps,\n        elementToHighlight: <></>,\n      });\n\n      nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n      nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n      const startAnimationOnLabelAgain = setTimeout(() => {\n        clearTimeout(startAnimationOnLabelAgain);\n        highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n      }, START_ANIMATING_CLONED_ELEM);\n\n      timerRefs.current.push(startAnimationOnLabelAgain);\n    },\n    [\n      addCoachmark,\n      handleContinueJourney,\n      handleEndJourney,\n      isMobile,\n      journeyId,\n      nextCoachmark,\n      originalTableRef,\n      tooltipTextRenderAs,\n    ],\n  );\n\n  const goToTableLauncher = useCallback(() => {\n    playButtonSound();\n    carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n    nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n    trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n      step: Action.TABLES,\n    });\n\n    const showNudge = setTimeout(() => {\n      clearTimeout(showNudge);\n      originalTableRef.current?.setLabelVisiblity(false);\n      nextCoachmark(journeyId, true);\n    }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n    timerRefs.current.push(showNudge);\n\n    const animateLabel = setTimeout(() => {\n      clearTimeout(animateLabel);\n      highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n    }, START_ANIMATING_CLONED_ELEM);\n\n    timerRefs.current.push(animateLabel);\n  }, [carouselRefs, journeyId, nextCoachmark, originalTableRef, playButtonSound, trackAnalytics]);\n\n  const startJourney = useCallback(\n    (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n      const paginationList = carouselRefs.current?.indicatorRefs;\n      const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n      const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current ||\n        !paginationList ||\n        !carouselNextBtnRef?.current ||\n        !tablePaginationRef ||\n        !tablePaginationRef.current\n      ) {\n        return;\n      }\n\n      const labelDims = originalTableRef.current?.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      // TAKE THE USER TO THE TABLE CARD\n      if (!isTutorialOnboardingDone) {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: !isMobile && (\n                <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                  Click to proceed\n                </Text>\n              ),\n              nudgePointerX: 0,\n              nudgePointerY: 0,\n            } as INudgeProps,\n            elementToHighlight: (\n              <IconButton\n                renderAs=\"secondary\"\n                Icon={CaratRightIcon}\n                onClick={goToTableLauncher}\n                analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n              />\n            ),\n          },\n        ]);\n        carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n      } else {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n            type: IndicatorType.TOOLTIP,\n            elementToHighlight: <S.Indicator $isActive={false} />,\n            indicator: {\n              position: 'bottom',\n              backgroundColor: 'YELLOW_4',\n              width: 52,\n              tooltipItem: (\n                <FlexView\n                  $position=\"absolute\"\n                  $flexDirection=\"row\"\n                  style={{ top: 6, left: 8, cursor: 'pointer' }}\n                  onClick={goToTableLauncher}\n                >\n                  <Text $renderAs={tooltipTextRenderAs}>NEW</Text>\n                </FlexView>\n              ),\n              tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n            } as IArrowTooltipProps,\n          },\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: '',\n              nudgePointerY: 20,\n            } as INudgeProps,\n            elementToHighlight: <></>,\n          },\n        ]);\n        carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n        nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n      }\n\n      // SHOW THE USER SELECT A TABLE\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.labelRef,\n\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: <></>,\n        indicator: {\n          position: 'top',\n          backgroundColor: 'YELLOW_4',\n          width: 264,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs={tooltipTextRenderAs}>\n                Get faster at multiplication! Practice everyday and become a Tables champ.\n              </Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: labelDims.width / 2,\n          tooltipYCoOrdinates: labelDims.height + 10,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: !isMobile && (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              {'Pick a table to start'}\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height / 2,\n        } as INudgeProps,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            label={tablesData.label}\n            data={tablesData.data}\n            onPress={() => {}}\n            onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n          />\n        ),\n      });\n    },\n    [\n      addCoachmark,\n      carouselRefs,\n      goToTableLauncher,\n      handleTableSegmentClick,\n      isMobile,\n      journeyId,\n      nextCoachmark,\n      originalTableRef,\n      setJourney,\n      tooltipTextRenderAs,\n    ],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      timerRefs.current.forEach(timer => clearTimeout(timer));\n      timerRefs.current = [];\n    };\n  }, [journeyId]);\n\n  return {\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","originalTableRef","onTableSegmentClick","onJourneyComplete","onNextJourney","journeyId","JOURNEY_ID_STUDENT","device","useTheme","isMobile","EDeviceType","tooltipTextRenderAs","highlightedTableRef","useRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleContinueJourney","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","_f","S.Indicator","_i","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_g","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_h","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":"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"}

package/dist/features/circle-games/games/tutorial/tutorial.js

@@ -1,62 +1,70 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useRef as m, useState as n, useCallback as f } from "react";
-import H from "../../../../assets/line-icons/icons/cross.js";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useRef as m, useState as i, useCallback as f } from "react";
+import C from "../../../../assets/line-icons/icons/cross.js";
 import p from "../../../ui/text/text.js";
-import { getTheme as R } from "../../../ui/theme/get-theme.js";
-import { InfoBar as A } from "../../comps/info-bar/info-bar.js";
-import { GameTutorialWrapper as G, GameTutorialHeader as U, HeaderIconContainer as j, GameTutorialContainer as k, VideoContainer as y } from "./tutorial-styled.js";
-import { VideoProgressBar as B } from "./video-progress-bar/video-progress-bar.js";
-const J = ({
+import { InfoBar as E } from "../../comps/info-bar/info-bar.js";
+import { GameTutorialWrapper as H, GameTutorialHeader as A, HeaderIconContainer as G, GameTutorialContainer as R, VideoContainer as U } from "./tutorial-styled.js";
+import { VideoProgressBar as j } from "./video-progress-bar/video-progress-bar.js";
+const M = ({
   src: h,
-  title: o,
-  onCross: i,
+  title: t,
+  onCross: n,
   showProgress: g = !0,
-  onTutorialPlayedOnce: t,
+  onTutorialPlayedOnce: o,
   isJourneyActive: b
 }) => {
-  const r = m(null), s = m(!1), [T, c] = n(0), [I, W] = n(0), [v, $] = n(null), { device: x } = R(), P = x === "mobile" ? "ab3-bold" : "ab2-bold", V = f(
-    (d) => {
-      const E = d.target.currentTime || 0, a = d.target.duration || 1, u = E / a * 100;
-      u >= 90 && !s.current && (s.current = !0, t == null || t()), c(u), W(a);
+  const e = m(null), s = m(!1), [I, d] = i(0), [W, $] = i(0), [T, v] = i(null), P = f(
+    (c) => {
+      const x = c.target.currentTime || 0, a = c.target.duration || 1, u = x / a * 100;
+      u >= 90 && !s.current && (s.current = !0, o == null || o()), d(u), $(a);
     },
-    [t]
-  ), C = f(() => {
-    r.current && $(r.current.clientWidth);
+    [o]
+  ), V = f(() => {
+    e.current && v(e.current.clientWidth);
   }, []);
-  return /* @__PURE__ */ l(G, { children: [
-    (o || i) && /* @__PURE__ */ l(U, { children: [
-      o && /* @__PURE__ */ e(p, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: o }),
-      i && /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(H, { color: "#fff", onClick: i }) })
+  return /* @__PURE__ */ l(H, { children: [
+    (t || n) && /* @__PURE__ */ l(A, { children: [
+      t && /* @__PURE__ */ r(p, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: t }),
+      n && /* @__PURE__ */ r(G, { children: /* @__PURE__ */ r(C, { color: "#fff", onClick: n }) })
     ] }),
-    b && /* @__PURE__ */ e(A, { hue: "PURPLE", children: /* @__PURE__ */ e(p, { $renderAs: P, $color: "WHITE_T_87", $align: "center", children: "Understanding the rules is always helpful before you begin." }) }),
-    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+    b && /* @__PURE__ */ r(E, { hue: "PURPLE", children: /* @__PURE__ */ r(
+      p,
+      {
+        $renderOnMobileAs: "ab3-bold",
+        $renderAs: "ab2-bold",
+        $color: "WHITE_T_87",
+        $align: "center",
+        children: "Understanding the rules is always helpful before you begin."
+      }
+    ) }),
+    /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(
       "video",
       {
-        ref: r,
-        onPlay: C,
+        ref: e,
+        onPlay: V,
         loop: !0,
         autoPlay: !0,
         muted: !0,
         src: h,
-        onTimeUpdate: V,
+        onTimeUpdate: P,
         disablePictureInPicture: !0,
         itemType: "video/mp4",
         playsInline: !0
       }
     ) }) }),
-    g && r && /* @__PURE__ */ e(
-      B,
+    g && e && /* @__PURE__ */ r(
+      j,
       {
-        ref: r,
-        progress: T,
-        duration: I,
-        setProgress: c,
-        videoWidth: v || 0
+        ref: e,
+        progress: I,
+        duration: W,
+        setProgress: d,
+        videoWidth: T || 0
       }
     )
   ] });
 };
 export {
-  J as Tutorial
+  M as Tutorial
 };
 //# sourceMappingURL=tutorial.js.map

package/dist/features/circle-games/games/tutorial/tutorial.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport { getTheme } from '../../../ui/theme/get-theme';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\nimport { VideoProgressBar } from './video-progress-bar/video-progress-bar';\n\nexport const Tutorial = ({\n  src,\n  title,\n  onCross,\n  showProgress = true,\n  onTutorialPlayedOnce,\n  isJourneyActive,\n}: ITutorialProps) => {\n  const videoRef = useRef<HTMLVideoElement | null>(null);\n  const hasVideoEnded = useRef(false);\n  const [progress, setProgress] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [videoWidth, setVideoWidth] = useState<number | null>(null);\n\n  const { device } = getTheme();\n  const tooltipTextRenderAs = device === 'mobile' ? 'ab3-bold' : 'ab2-bold';\n\n  const onProgress = useCallback(\n    (e: ChangeEvent<HTMLVideoElement>) => {\n      const current = e.target.currentTime || 0;\n      const dur = e.target.duration || 1;\n      const p = (current / dur) * 100;\n\n      if (p >= 90 && !hasVideoEnded.current) {\n        hasVideoEnded.current = true;\n        onTutorialPlayedOnce?.();\n      }\n\n      setProgress(p);\n      setDuration(dur);\n    },\n    [onTutorialPlayedOnce],\n  );\n\n  const onVideoPlay = useCallback(() => {\n    if (videoRef.current) {\n      setVideoWidth(videoRef.current.clientWidth);\n    }\n  }, []);\n\n  return (\n    <Styled.GameTutorialWrapper>\n      {(title || onCross) && (\n        <Styled.GameTutorialHeader>\n          {title && (\n            <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n              {title}\n            </Text>\n          )}\n          {onCross && (\n            <Styled.HeaderIconContainer>\n              <CrossIcon color=\"#fff\" onClick={onCross} />\n            </Styled.HeaderIconContainer>\n          )}\n        </Styled.GameTutorialHeader>\n      )}\n\n      {isJourneyActive && (\n        <InfoBar hue=\"PURPLE\">\n          <Text $renderAs={tooltipTextRenderAs} $color=\"WHITE_T_87\" $align=\"center\">\n            Understanding the rules is always helpful before you begin.\n          </Text>\n        </InfoBar>\n      )}\n\n      <Styled.GameTutorialContainer>\n        <Styled.VideoContainer>\n          <video\n            ref={videoRef}\n            onPlay={onVideoPlay}\n            loop={true}\n            autoPlay={true}\n            muted={true}\n            src={src}\n            onTimeUpdate={onProgress}\n            disablePictureInPicture={true}\n            itemType=\"video/mp4\"\n            playsInline\n          />\n        </Styled.VideoContainer>\n      </Styled.GameTutorialContainer>\n\n      {showProgress && videoRef && (\n        <VideoProgressBar\n          ref={videoRef}\n          progress={progress}\n          duration={duration}\n          setProgress={setProgress}\n          videoWidth={videoWidth || 0}\n        />\n      )}\n    </Styled.GameTutorialWrapper>\n  );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","videoRef","useRef","hasVideoEnded","progress","setProgress","useState","duration","setDuration","videoWidth","setVideoWidth","device","getTheme","tooltipTextRenderAs","onProgress","useCallback","e","current","dur","p","onVideoPlay","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","VideoProgressBar"],"mappings":";;;;;;;;AAYO,MAAMA,IAAW,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,sBAAAC;AAAA,EACA,iBAAAC;AACF,MAAsB;AACd,QAAAC,IAAWC,EAAgC,IAAI,GAC/CC,IAAgBD,EAAO,EAAK,GAC5B,CAACE,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,CAAC,GACpC,CAACG,GAAYC,CAAa,IAAIJ,EAAwB,IAAI,GAE1D,EAAE,QAAAK,MAAWC,KACbC,IAAsBF,MAAW,WAAW,aAAa,YAEzDG,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,IAAUD,EAAE,OAAO,eAAe,GAClCE,IAAMF,EAAE,OAAO,YAAY,GAC3BG,IAAKF,IAAUC,IAAO;AAE5B,MAAIC,KAAK,MAAM,CAAChB,EAAc,YAC5BA,EAAc,UAAU,IACDJ,KAAA,QAAAA,MAGzBM,EAAYc,CAAC,GACbX,EAAYU,CAAG;AAAA,IACjB;AAAA,IACA,CAACnB,CAAoB;AAAA,EAAA,GAGjBqB,IAAcL,EAAY,MAAM;AACpC,IAAId,EAAS,WACGS,EAAAT,EAAS,QAAQ,WAAW;AAAA,EAE9C,GAAG,CAAE,CAAA;AAGH,SAAA,gBAAAoB,EAACC,GAAA,EACG,UAAA;AAAA,KAAA1B,KAASC,MACT,gBAAAwB,EAACE,GAAA,EACE,UAAA;AAAA,MACC3B,KAAA,gBAAA4B,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACH7B,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAA2B,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAAS9B,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGDG,KACC,gBAAAwB,EAACI,GAAQ,EAAA,KAAI,UACX,UAAC,gBAAAJ,EAAAC,GAAA,EAAK,WAAWZ,GAAqB,QAAO,cAAa,QAAO,UAAS,wEAE1E,CAAA,GACF;AAAA,sBAGDgB,GAAA,EACC,UAAC,gBAAAL,EAAAM,GAAA,EACC,UAAA,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKvB;AAAA,QACL,QAAQmB;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAAzB;AAAA,QACA,cAAcmB;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAEChB,KAAgBG,KACf,gBAAAuB;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,KAAK9B;AAAA,QACL,UAAAG;AAAA,QACA,UAAAG;AAAA,QACA,aAAAF;AAAA,QACA,YAAYI,KAAc;AAAA,MAAA;AAAA,IAC5B;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\nimport { VideoProgressBar } from './video-progress-bar/video-progress-bar';\n\nexport const Tutorial = ({\n  src,\n  title,\n  onCross,\n  showProgress = true,\n  onTutorialPlayedOnce,\n  isJourneyActive,\n}: ITutorialProps) => {\n  const videoRef = useRef<HTMLVideoElement | null>(null);\n  const hasVideoEnded = useRef(false);\n  const [progress, setProgress] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [videoWidth, setVideoWidth] = useState<number | null>(null);\n\n  const onProgress = useCallback(\n    (e: ChangeEvent<HTMLVideoElement>) => {\n      const current = e.target.currentTime || 0;\n      const dur = e.target.duration || 1;\n      const p = (current / dur) * 100;\n\n      if (p >= 90 && !hasVideoEnded.current) {\n        hasVideoEnded.current = true;\n        onTutorialPlayedOnce?.();\n      }\n\n      setProgress(p);\n      setDuration(dur);\n    },\n    [onTutorialPlayedOnce],\n  );\n\n  const onVideoPlay = useCallback(() => {\n    if (videoRef.current) {\n      setVideoWidth(videoRef.current.clientWidth);\n    }\n  }, []);\n\n  return (\n    <Styled.GameTutorialWrapper>\n      {(title || onCross) && (\n        <Styled.GameTutorialHeader>\n          {title && (\n            <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n              {title}\n            </Text>\n          )}\n          {onCross && (\n            <Styled.HeaderIconContainer>\n              <CrossIcon color=\"#fff\" onClick={onCross} />\n            </Styled.HeaderIconContainer>\n          )}\n        </Styled.GameTutorialHeader>\n      )}\n\n      {isJourneyActive && (\n        <InfoBar hue=\"PURPLE\">\n          <Text\n            $renderOnMobileAs=\"ab3-bold\"\n            $renderAs=\"ab2-bold\"\n            $color=\"WHITE_T_87\"\n            $align=\"center\"\n          >\n            Understanding the rules is always helpful before you begin.\n          </Text>\n        </InfoBar>\n      )}\n\n      <Styled.GameTutorialContainer>\n        <Styled.VideoContainer>\n          <video\n            ref={videoRef}\n            onPlay={onVideoPlay}\n            loop={true}\n            autoPlay={true}\n            muted={true}\n            src={src}\n            onTimeUpdate={onProgress}\n            disablePictureInPicture={true}\n            itemType=\"video/mp4\"\n            playsInline\n          />\n        </Styled.VideoContainer>\n      </Styled.GameTutorialContainer>\n\n      {showProgress && videoRef && (\n        <VideoProgressBar\n          ref={videoRef}\n          progress={progress}\n          duration={duration}\n          setProgress={setProgress}\n          videoWidth={videoWidth || 0}\n        />\n      )}\n    </Styled.GameTutorialWrapper>\n  );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","videoRef","useRef","hasVideoEnded","progress","setProgress","useState","duration","setDuration","videoWidth","setVideoWidth","onProgress","useCallback","e","current","dur","p","onVideoPlay","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","VideoProgressBar"],"mappings":";;;;;;;AAWO,MAAMA,IAAW,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,sBAAAC;AAAA,EACA,iBAAAC;AACF,MAAsB;AACd,QAAAC,IAAWC,EAAgC,IAAI,GAC/CC,IAAgBD,EAAO,EAAK,GAC5B,CAACE,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,CAAC,GACpC,CAACG,GAAYC,CAAa,IAAIJ,EAAwB,IAAI,GAE1DK,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,IAAUD,EAAE,OAAO,eAAe,GAClCE,IAAMF,EAAE,OAAO,YAAY,GAC3BG,IAAKF,IAAUC,IAAO;AAE5B,MAAIC,KAAK,MAAM,CAACb,EAAc,YAC5BA,EAAc,UAAU,IACDJ,KAAA,QAAAA,MAGzBM,EAAYW,CAAC,GACbR,EAAYO,CAAG;AAAA,IACjB;AAAA,IACA,CAAChB,CAAoB;AAAA,EAAA,GAGjBkB,IAAcL,EAAY,MAAM;AACpC,IAAIX,EAAS,WACGS,EAAAT,EAAS,QAAQ,WAAW;AAAA,EAE9C,GAAG,CAAE,CAAA;AAGH,SAAA,gBAAAiB,EAACC,GAAA,EACG,UAAA;AAAA,KAAAvB,KAASC,MACT,gBAAAqB,EAACE,GAAA,EACE,UAAA;AAAA,MACCxB,KAAA,gBAAAyB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACH1B,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAAwB,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAAS3B,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGDG,KACC,gBAAAqB,EAACI,GAAQ,EAAA,KAAI,UACX,UAAA,gBAAAJ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,mBAAkB;AAAA,QAClB,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAO;AAAA,QACR,UAAA;AAAA,MAAA;AAAA,IAAA,GAGH;AAAA,sBAGDI,GAAA,EACC,UAAC,gBAAAL,EAAAM,GAAA,EACC,UAAA,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,QAAQgB;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAAtB;AAAA,QACA,cAAcgB;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAECb,KAAgBG,KACf,gBAAAoB;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,KAAK3B;AAAA,QACL,UAAAG;AAAA,QACA,UAAAG;AAAA,QACA,aAAAF;AAAA,QACA,YAAYI,KAAc;AAAA,MAAA;AAAA,IAC5B;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input-styled.js

@@ -20,8 +20,8 @@ const a = r.div(({ theme: o }) => {
 `, p = r.div(({ isActive: o, theme: t }) => {
   const { WHITE: e, TRANSPARENT: n, GREY_2: i, WHITE_T_10: s } = t.colors;
   return `
-  height: 45px;
-  width: 45px;
+  width: clamp(30px, 10.5vw, 45px);
+  height: clamp(30px, 10.5vw, 45px);
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"grade-input-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/grade-input/grade-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const GradeInputWrapper = styled.div(({ theme }) => {\n  const { BLACK } = theme.colors;\n\n  return `\n  background: ${BLACK};\n  width: 100%;\n  padding: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  `;\n});\n\nexport const GradeInputContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nexport const GradeRow = styled.div`\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n`;\n\nexport const GradeButton = styled.div<{ isActive: boolean }>(({ isActive, theme }) => {\n  const { WHITE, TRANSPARENT, GREY_2, WHITE_T_10 } = theme.colors;\n\n  return `\n  height: 45px;\n  width: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  border: 1px solid ${WHITE};\n  background-color: ${isActive ? WHITE : TRANSPARENT};\n  cursor: pointer;\n  transition:\n    background-color 0.3s ease,\n    transform 0.2s ease;\n\n  &:hover {\n    transform: scale(1.1);\n    background-color: ${isActive ? GREY_2 : WHITE_T_10};\n  }\n  `;\n});\n\nexport const NextButtonWrapper = styled.div`\n  position: absolute;\n  bottom: 166px;\n  right: 16px;\n  z-index: 1;\n  background: ${({ theme }) => theme.colors.WHITE};\n  border-radius: 100%;\n  height: 40px;\n  width: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.1s linear;\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.BLACK_3};\n    color: ${({ theme }) => theme.colors.WHITE};\n  }\n  &:hover svg {\n    fill: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n"],"names":["GradeInputWrapper","styled","theme","BLACK","GradeInputContainer","GradeRow","GradeButton","isActive","WHITE","TRANSPARENT","GREY_2","WHITE_T_10","NextButtonWrapper"],"mappings":";AAEO,MAAMA,IAAoBC,EAAO,IAAI,CAAC,EAAE,OAAAC,QAAY;AACnD,QAAA,EAAE,OAAAC,EAAM,IAAID,EAAM;AAEjB,SAAA;AAAA,gBACOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB,CAAC,GAEYC,IAAsBH,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BI,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA,GAMlBK,IAAcL,EAAO,IAA2B,CAAC,EAAE,UAAAM,GAAU,OAAAL,QAAY;AACpF,QAAM,EAAE,OAAAM,GAAO,aAAAC,GAAa,QAAAC,GAAQ,YAAAC,MAAeT,EAAM;AAElD,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOaM,CAAK;AAAA,sBACLD,IAAWC,IAAQC,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ5BF,IAAWG,IAASC,CAAU;AAAA;AAAA;AAGtD,CAAC,GAEYC,IAAoBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKxB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAW/B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,aACxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;"}
+{"version":3,"file":"grade-input-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/grade-input/grade-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const GradeInputWrapper = styled.div(({ theme }) => {\n  const { BLACK } = theme.colors;\n\n  return `\n  background: ${BLACK};\n  width: 100%;\n  padding: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  `;\n});\n\nexport const GradeInputContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nexport const GradeRow = styled.div`\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n`;\n\nexport const GradeButton = styled.div<{ isActive: boolean }>(({ isActive, theme }) => {\n  const { WHITE, TRANSPARENT, GREY_2, WHITE_T_10 } = theme.colors;\n\n  return `\n  width: clamp(30px, 10.5vw, 45px);\n  height: clamp(30px, 10.5vw, 45px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  border: 1px solid ${WHITE};\n  background-color: ${isActive ? WHITE : TRANSPARENT};\n  cursor: pointer;\n  transition:\n    background-color 0.3s ease,\n    transform 0.2s ease;\n\n  &:hover {\n    transform: scale(1.1);\n    background-color: ${isActive ? GREY_2 : WHITE_T_10};\n  }\n  `;\n});\n\nexport const NextButtonWrapper = styled.div`\n  position: absolute;\n  bottom: 166px;\n  right: 16px;\n  z-index: 1;\n  background: ${({ theme }) => theme.colors.WHITE};\n  border-radius: 100%;\n  height: 40px;\n  width: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.1s linear;\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.BLACK_3};\n    color: ${({ theme }) => theme.colors.WHITE};\n  }\n  &:hover svg {\n    fill: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n"],"names":["GradeInputWrapper","styled","theme","BLACK","GradeInputContainer","GradeRow","GradeButton","isActive","WHITE","TRANSPARENT","GREY_2","WHITE_T_10","NextButtonWrapper"],"mappings":";AAEO,MAAMA,IAAoBC,EAAO,IAAI,CAAC,EAAE,OAAAC,QAAY;AACnD,QAAA,EAAE,OAAAC,EAAM,IAAID,EAAM;AAEjB,SAAA;AAAA,gBACOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB,CAAC,GAEYC,IAAsBH,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BI,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA,GAMlBK,IAAcL,EAAO,IAA2B,CAAC,EAAE,UAAAM,GAAU,OAAAL,QAAY;AACpF,QAAM,EAAE,OAAAM,GAAO,aAAAC,GAAa,QAAAC,GAAQ,YAAAC,MAAeT,EAAM;AAElD,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOaM,CAAK;AAAA,sBACLD,IAAWC,IAAQC,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ5BF,IAAWG,IAASC,CAAU;AAAA;AAAA;AAGtD,CAAC,GAEYC,IAAoBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKxB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAW/B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,aACxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;"}

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input.js

@@ -12,7 +12,7 @@ const _ = ({ selected: o, grades: s, onSelect: n, onNext: c }) => {
   }, [o]);
   const d = (e) => e === "13", u = (e) => {
     n == null || n(e);
-  }, f = 6, k = s.reduce((e, a, r) => {
+  }, f = 7, k = s.reduce((e, a, r) => {
     var l;
     return r % f === 0 && e.push([]), (l = e[e.length - 1]) == null || l.push(a), e;
   }, []);

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"grade-input.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/grade-input/grade-input.tsx"],"sourcesContent":["import type { Grade, GradeKey, IGradeInputProps } from './grade-input-types';\n\nimport { useEffect, useState } from 'react';\n\nimport Next2Icon from '../../../../../assets/line-icons/icons/next2';\nimport Clickable from '../../../../ui/buttons/clickable/clickable';\nimport Text from '../../../../ui/text/text';\nimport { WithGrade } from '../../../leaderboard/comps/with-grade/with-grade';\nimport * as S from './grade-input-styled';\n\nexport const GradeInput = ({ selected, grades, onSelect, onNext }: IGradeInputProps) => {\n  const [active, setActive] = useState(selected);\n\n  useEffect(() => {\n    setActive(selected);\n  }, [selected]);\n\n  const isOutOfSchool = (gradeKey: GradeKey) => {\n    return gradeKey === ('13' as GradeKey);\n  };\n\n  const handleGrade = (gradeInfo: Grade) => {\n    onSelect?.(gradeInfo);\n  };\n\n  const maxNoOfRows = 6;\n\n  // Group grades into rows\n  const grade2d: Grade[][] = grades.reduce((acc: Grade[][], grade, index) => {\n    if (index % maxNoOfRows === 0) acc.push([]);\n    acc[acc.length - 1]?.push(grade);\n\n    return acc;\n  }, []);\n\n  return (\n    <S.GradeInputWrapper>\n      {selected && (\n        <S.NextButtonWrapper>\n          <Clickable onClick={onNext} analyticsLabel=\"circle_signup_grade_next\" label=\"\">\n            <Next2Icon height={28} width={28} />\n          </Clickable>\n        </S.NextButtonWrapper>\n      )}\n\n      <S.GradeInputContainer>\n        {grade2d.map((row, rowIndex) => (\n          <S.GradeRow key={rowIndex}>\n            {row.map(g => (\n              <S.GradeButton isActive={active === g.key} key={g.key} onClick={() => handleGrade(g)}>\n                {isOutOfSchool(g.key) && (\n                  <WithGrade grade={g.key}>\n                    <Text\n                      $renderAs={active === g.key ? 'ab1-bold' : 'ab1'}\n                      $color={active === g.key ? 'WHITE' : 'BLACK'}\n                    >\n                      {g.label}\n                    </Text>\n                  </WithGrade>\n                )}\n                {!isOutOfSchool(g.key) && (\n                  <Text $renderAs={'ab1'} $color={active === g.key ? 'BLACK' : 'WHITE'}>\n                    {g.label}\n                  </Text>\n                )}\n              </S.GradeButton>\n            ))}\n          </S.GradeRow>\n        ))}\n      </S.GradeInputContainer>\n    </S.GradeInputWrapper>\n  );\n};\n"],"names":["GradeInput","selected","grades","onSelect","onNext","active","setActive","useState","useEffect","isOutOfSchool","gradeKey","handleGrade","gradeInfo","maxNoOfRows","grade2d","acc","grade","index","_a","jsxs","S.GradeInputWrapper","S.NextButtonWrapper","jsx","Clickable","Next2Icon","S.GradeInputContainer","row","rowIndex","S.GradeRow","g","S.GradeButton","WithGrade","Text"],"mappings":";;;;;;;AAUO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,GAAU,QAAAC,QAA+B;AACtF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAASN,CAAQ;AAE7C,EAAAO,EAAU,MAAM;AACd,IAAAF,EAAUL,CAAQ;AAAA,EAAA,GACjB,CAACA,CAAQ,CAAC;AAEP,QAAAQ,IAAgB,CAACC,MACdA,MAAc,MAGjBC,IAAc,CAACC,MAAqB;AACxC,IAAAT,KAAA,QAAAA,EAAWS;AAAA,EAAS,GAGhBC,IAAc,GAGdC,IAAqBZ,EAAO,OAAO,CAACa,GAAgBC,GAAOC,MAAU;;AACzE,WAAIA,IAAQJ,MAAgB,KAAOE,EAAA,KAAK,CAAA,CAAE,IAC1CG,IAAAH,EAAIA,EAAI,SAAS,CAAC,MAAlB,QAAAG,EAAqB,KAAKF,IAEnBD;AAAA,EACT,GAAG,CAAE,CAAA;AAGH,SAAA,gBAAAI,EAACC,GAAA,EACE,UAAA;AAAA,IAAAnB,uBACEoB,GAAA,EACC,UAAC,gBAAAC,EAAAC,GAAA,EAAU,SAASnB,GAAQ,gBAAe,4BAA2B,OAAM,IAC1E,4BAACoB,GAAU,EAAA,QAAQ,IAAI,OAAO,IAAI,GACpC,EACF,CAAA;AAAA,IAGD,gBAAAF,EAAAG,GAAA,EACE,UAAQX,EAAA,IAAI,CAACY,GAAKC,MACjB,gBAAAL,EAACM,GAAA,EACE,UAAAF,EAAI,IAAI,CAAAG,MACN,gBAAAV,EAAAW,GAAA,EAAc,UAAUzB,MAAWwB,EAAE,KAAiB,SAAS,MAAMlB,EAAYkB,CAAC,GAChF,UAAA;AAAA,MAAApB,EAAcoB,EAAE,GAAG,uBACjBE,GAAU,EAAA,OAAOF,EAAE,KAClB,UAAA,gBAAAP;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,WAAW3B,MAAWwB,EAAE,MAAM,aAAa;AAAA,UAC3C,QAAQxB,MAAWwB,EAAE,MAAM,UAAU;AAAA,UAEpC,UAAEA,EAAA;AAAA,QAAA;AAAA,MAAA,GAEP;AAAA,MAED,CAACpB,EAAcoB,EAAE,GAAG,uBAClBG,GAAK,EAAA,WAAW,OAAO,QAAQ3B,MAAWwB,EAAE,MAAM,UAAU,SAC1D,YAAE,OACL;AAAA,IAAA,EAAA,GAd4CA,EAAE,GAgBlD,CACD,EAnBc,GAAAF,CAoBjB,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"grade-input.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/grade-input/grade-input.tsx"],"sourcesContent":["import type { Grade, GradeKey, IGradeInputProps } from './grade-input-types';\n\nimport { useEffect, useState } from 'react';\n\nimport Next2Icon from '../../../../../assets/line-icons/icons/next2';\nimport Clickable from '../../../../ui/buttons/clickable/clickable';\nimport Text from '../../../../ui/text/text';\nimport { WithGrade } from '../../../leaderboard/comps/with-grade/with-grade';\nimport * as S from './grade-input-styled';\n\nexport const GradeInput = ({ selected, grades, onSelect, onNext }: IGradeInputProps) => {\n  const [active, setActive] = useState(selected);\n\n  useEffect(() => {\n    setActive(selected);\n  }, [selected]);\n\n  const isOutOfSchool = (gradeKey: GradeKey) => {\n    return gradeKey === ('13' as GradeKey);\n  };\n\n  const handleGrade = (gradeInfo: Grade) => {\n    onSelect?.(gradeInfo);\n  };\n\n  const maxNoOfRows = 7;\n\n  // Group grades into rows\n  const grade2d: Grade[][] = grades.reduce((acc: Grade[][], grade, index) => {\n    if (index % maxNoOfRows === 0) acc.push([]);\n    acc[acc.length - 1]?.push(grade);\n\n    return acc;\n  }, []);\n\n  return (\n    <S.GradeInputWrapper>\n      {selected && (\n        <S.NextButtonWrapper>\n          <Clickable onClick={onNext} analyticsLabel=\"circle_signup_grade_next\" label=\"\">\n            <Next2Icon height={28} width={28} />\n          </Clickable>\n        </S.NextButtonWrapper>\n      )}\n\n      <S.GradeInputContainer>\n        {grade2d.map((row, rowIndex) => (\n          <S.GradeRow key={rowIndex}>\n            {row.map(g => (\n              <S.GradeButton isActive={active === g.key} key={g.key} onClick={() => handleGrade(g)}>\n                {isOutOfSchool(g.key) && (\n                  <WithGrade grade={g.key}>\n                    <Text\n                      $renderAs={active === g.key ? 'ab1-bold' : 'ab1'}\n                      $color={active === g.key ? 'WHITE' : 'BLACK'}\n                    >\n                      {g.label}\n                    </Text>\n                  </WithGrade>\n                )}\n                {!isOutOfSchool(g.key) && (\n                  <Text $renderAs={'ab1'} $color={active === g.key ? 'BLACK' : 'WHITE'}>\n                    {g.label}\n                  </Text>\n                )}\n              </S.GradeButton>\n            ))}\n          </S.GradeRow>\n        ))}\n      </S.GradeInputContainer>\n    </S.GradeInputWrapper>\n  );\n};\n"],"names":["GradeInput","selected","grades","onSelect","onNext","active","setActive","useState","useEffect","isOutOfSchool","gradeKey","handleGrade","gradeInfo","maxNoOfRows","grade2d","acc","grade","index","_a","jsxs","S.GradeInputWrapper","S.NextButtonWrapper","jsx","Clickable","Next2Icon","S.GradeInputContainer","row","rowIndex","S.GradeRow","g","S.GradeButton","WithGrade","Text"],"mappings":";;;;;;;AAUO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,GAAU,QAAAC,QAA+B;AACtF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAASN,CAAQ;AAE7C,EAAAO,EAAU,MAAM;AACd,IAAAF,EAAUL,CAAQ;AAAA,EAAA,GACjB,CAACA,CAAQ,CAAC;AAEP,QAAAQ,IAAgB,CAACC,MACdA,MAAc,MAGjBC,IAAc,CAACC,MAAqB;AACxC,IAAAT,KAAA,QAAAA,EAAWS;AAAA,EAAS,GAGhBC,IAAc,GAGdC,IAAqBZ,EAAO,OAAO,CAACa,GAAgBC,GAAOC,MAAU;;AACzE,WAAIA,IAAQJ,MAAgB,KAAOE,EAAA,KAAK,CAAA,CAAE,IAC1CG,IAAAH,EAAIA,EAAI,SAAS,CAAC,MAAlB,QAAAG,EAAqB,KAAKF,IAEnBD;AAAA,EACT,GAAG,CAAE,CAAA;AAGH,SAAA,gBAAAI,EAACC,GAAA,EACE,UAAA;AAAA,IAAAnB,uBACEoB,GAAA,EACC,UAAC,gBAAAC,EAAAC,GAAA,EAAU,SAASnB,GAAQ,gBAAe,4BAA2B,OAAM,IAC1E,4BAACoB,GAAU,EAAA,QAAQ,IAAI,OAAO,IAAI,GACpC,EACF,CAAA;AAAA,IAGD,gBAAAF,EAAAG,GAAA,EACE,UAAQX,EAAA,IAAI,CAACY,GAAKC,MACjB,gBAAAL,EAACM,GAAA,EACE,UAAAF,EAAI,IAAI,CAAAG,MACN,gBAAAV,EAAAW,GAAA,EAAc,UAAUzB,MAAWwB,EAAE,KAAiB,SAAS,MAAMlB,EAAYkB,CAAC,GAChF,UAAA;AAAA,MAAApB,EAAcoB,EAAE,GAAG,uBACjBE,GAAU,EAAA,OAAOF,EAAE,KAClB,UAAA,gBAAAP;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,WAAW3B,MAAWwB,EAAE,MAAM,aAAa;AAAA,UAC3C,QAAQxB,MAAWwB,EAAE,MAAM,UAAU;AAAA,UAEpC,UAAEA,EAAA;AAAA,QAAA;AAAA,MAAA,GAEP;AAAA,MAED,CAACpB,EAAcoB,EAAE,GAAG,uBAClBG,GAAK,EAAA,WAAW,OAAO,QAAQ3B,MAAWwB,EAAE,MAAM,UAAU,SAC1D,YAAE,OACL;AAAA,IAAA,EAAA,GAd4CA,EAAE,GAgBlD,CACD,EAnBc,GAAAF,CAoBjB,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/features/circle-games/sign-up/comp/username-input/username-input.js

@@ -1,39 +1,41 @@
 import { jsx as f } from "react/jsx-runtime";
 import { useCallback as l } from "react";
-import { getTheme as g } from "../../../../ui/theme/get-theme.js";
-import { useValidateUsernameDal as h } from "../../dal/validate-username-dal/validate-username-dal.js";
-import { InputWrapper as M } from "../input-wrapper/input-wrapper.js";
-import { USERNAME_MIN_LENGTH as T, ErrorMessage as r, USERNAME_MAX_LENGTH as n } from "./constants.js";
-import { Input as U } from "./username-input-styled.js";
-const D = ({
+import { useTheme as M } from "styled-components";
+import { useValidateUsernameDal as T } from "../../dal/validate-username-dal/validate-username-dal.js";
+import { InputWrapper as U } from "../input-wrapper/input-wrapper.js";
+import { USERNAME_MIN_LENGTH as x, ErrorMessage as r, USERNAME_MAX_LENGTH as n } from "./constants.js";
+import { Input as A } from "./username-input-styled.js";
+const W = ({
   circleUsername: s,
   username: m,
   error: i,
   isEdit: c,
   showSpinner: p,
-  setError: o,
+  setError: a,
   setUsername: u,
-  setShowSpinner: a
+  setShowSpinner: o
 }) => {
-  const E = `Only letters, _ , & digits allowed.
-Upto ${n} characters.`, R = l(
+  const {
+    colors: { RED: R, GREEN_4: g }
+  } = M(), E = `Only letters, _ , & digits allowed.
+Upto ${n} characters.`, d = l(
     (e) => {
       let t = "";
-      a(!1), e ? e.is_valid || (t = r.USERNAME_ALREADY_EXISTS) : t = r.SOMETHING_WENT_WRONG, o(t);
+      o(!1), e ? e.is_valid || (t = r.USERNAME_ALREADY_EXISTS) : t = r.SOMETHING_WENT_WRONG, a(t);
     },
-    [o, a]
-  ), { validateUsernameExists: _ } = h(R), N = l(
+    [a, o]
+  ), { validateUsernameExists: _ } = T(d), N = l(
     (e) => {
-      if (o(""), u(e), !(c && s === e)) {
-        if (e.length < T) {
-          o(r.USERNAME_MIN_LENGTH);
+      if (a(""), u(e), !(c && s === e)) {
+        if (e.length < x) {
+          a(r.USERNAME_MIN_LENGTH);
           return;
         }
-        a(!0), _(e);
+        o(!0), _(e);
       }
     },
-    [s, c, o, a, u, _]
-  ), d = l(
+    [s, c, a, o, u, _]
+  ), h = l(
     (e) => {
       const t = e.target.value;
       !/^[a-z0-9_]*$/.test(t) || t.length > n || N(t);
@@ -41,18 +43,18 @@ Upto ${n} characters.`, R = l(
     [N]
   );
   return /* @__PURE__ */ f(
-    M,
+    U,
     {
       showSpinner: p,
       helperText: m.length >= n ? E : i || E,
       children: /* @__PURE__ */ f(
-        U,
+        A,
         {
           value: m,
-          onChange: d,
+          onChange: h,
           autoFocus: !0,
           placeholder: "loopy_circle",
-          color: i ? g().colors.RED : p ? "" : g().colors.GREEN_4,
+          color: i ? R : p ? "" : g,
           autoCapitalize: "none"
         }
       )
@@ -60,6 +62,6 @@ Upto ${n} characters.`, R = l(
   );
 };
 export {
-  D as UsernameInput
+  W as UsernameInput
 };
 //# sourceMappingURL=username-input.js.map

package/dist/features/circle-games/sign-up/comp/username-input/username-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"username-input.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/username-input/username-input.tsx"],"sourcesContent":["import type { IUsernameAvailabilityData } from '../../api/use-validate-username-api/use-username-availability-get-types';\nimport type { UsernameInputProps } from './username-input.types';\n\nimport { useCallback } from 'react';\n\nimport { getTheme } from '../../../../ui/theme/get-theme';\nimport { useValidateUsernameDal } from '../../dal/validate-username-dal/validate-username-dal';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\nimport { ErrorMessage, USERNAME_MAX_LENGTH, USERNAME_MIN_LENGTH } from './constants';\nimport * as S from './username-input-styled';\n\nexport const UsernameInput = ({\n  circleUsername,\n  username,\n  error,\n  isEdit,\n  showSpinner,\n  setError,\n  setUsername,\n  setShowSpinner,\n}: UsernameInputProps) => {\n  const helperText = `Only letters, _ , & digits allowed.\\nUpto ${USERNAME_MAX_LENGTH} characters.`;\n\n  const handleUsernameValidationResponse = useCallback(\n    (data?: IUsernameAvailabilityData) => {\n      let err = '';\n\n      setShowSpinner(false);\n\n      if (data) {\n        if (!data.is_valid) {\n          err = ErrorMessage.USERNAME_ALREADY_EXISTS;\n        }\n      } else {\n        err = ErrorMessage.SOMETHING_WENT_WRONG;\n      }\n\n      setError(err);\n    },\n    [setError, setShowSpinner],\n  );\n\n  const { validateUsernameExists } = useValidateUsernameDal(handleUsernameValidationResponse);\n\n  const validateUserName = useCallback(\n    (value: string) => {\n      setError('');\n      setUsername(value);\n      if (isEdit && circleUsername === value) return;\n\n      if (value.length < USERNAME_MIN_LENGTH) {\n        setError(ErrorMessage.USERNAME_MIN_LENGTH);\n\n        return;\n      }\n      setShowSpinner(true);\n      validateUsernameExists(value);\n    },\n    [circleUsername, isEdit, setError, setShowSpinner, setUsername, validateUsernameExists],\n  );\n\n  const handleUsernameChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const value = event.target.value;\n      const usernameRegex = /^[a-z0-9_]*$/; // only letters, numbers and underscore\n\n      if (!usernameRegex.test(value) || value.length > USERNAME_MAX_LENGTH) {\n        return;\n      }\n      validateUserName(value);\n    },\n    [validateUserName],\n  );\n\n  return (\n    <InputWrapper\n      showSpinner={showSpinner}\n      helperText={username.length >= USERNAME_MAX_LENGTH ? helperText : error || helperText}\n    >\n      <S.Input\n        value={username}\n        onChange={handleUsernameChange}\n        autoFocus={true}\n        placeholder={'loopy_circle'}\n        color={error ? getTheme().colors.RED : showSpinner ? '' : getTheme().colors.GREEN_4}\n        autoCapitalize=\"none\"\n      />\n    </InputWrapper>\n  );\n};\n"],"names":["UsernameInput","circleUsername","username","error","isEdit","showSpinner","setError","setUsername","setShowSpinner","helperText","USERNAME_MAX_LENGTH","handleUsernameValidationResponse","useCallback","data","err","ErrorMessage","validateUsernameExists","useValidateUsernameDal","validateUserName","value","USERNAME_MIN_LENGTH","handleUsernameChange","event","jsx","InputWrapper","S.Input","getTheme"],"mappings":";;;;;;;AAWO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AACF,MAA0B;AACxB,QAAMC,IAAa;AAAA,OAA6CC,CAAmB,gBAE7EC,IAAmCC;AAAA,IACvC,CAACC,MAAqC;AACpC,UAAIC,IAAM;AAEV,MAAAN,EAAe,EAAK,GAEhBK,IACGA,EAAK,aACRC,IAAMC,EAAa,2BAGrBD,IAAMC,EAAa,sBAGrBT,EAASQ,CAAG;AAAA,IACd;AAAA,IACA,CAACR,GAAUE,CAAc;AAAA,EAAA,GAGrB,EAAE,wBAAAQ,EAAA,IAA2BC,EAAuBN,CAAgC,GAEpFO,IAAmBN;AAAA,IACvB,CAACO,MAAkB;AAGb,UAFJb,EAAS,EAAE,GACXC,EAAYY,CAAK,GACb,EAAAf,KAAUH,MAAmBkB,IAE7B;AAAA,YAAAA,EAAM,SAASC,GAAqB;AACtC,UAAAd,EAASS,EAAa,mBAAmB;AAEzC;AAAA,QACF;AACA,QAAAP,EAAe,EAAI,GACnBQ,EAAuBG,CAAK;AAAA;AAAA,IAC9B;AAAA,IACA,CAAClB,GAAgBG,GAAQE,GAAUE,GAAgBD,GAAaS,CAAsB;AAAA,EAAA,GAGlFK,IAAuBT;AAAA,IAC3B,CAACU,MAA+C;AACxC,YAAAH,IAAQG,EAAM,OAAO;AAG3B,MAAI,CAFkB,eAEH,KAAKH,CAAK,KAAKA,EAAM,SAAST,KAGjDQ,EAAiBC,CAAK;AAAA,IACxB;AAAA,IACA,CAACD,CAAgB;AAAA,EAAA;AAIjB,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAAnB;AAAA,MACA,YAAYH,EAAS,UAAUQ,IAAsBD,IAAaN,KAASM;AAAA,MAE3E,UAAA,gBAAAc;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,OAAOvB;AAAA,UACP,UAAUmB;AAAA,UACV,WAAW;AAAA,UACX,aAAa;AAAA,UACb,OAAOlB,IAAQuB,EAAW,EAAA,OAAO,MAAMrB,IAAc,KAAKqB,IAAW,OAAO;AAAA,UAC5E,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"username-input.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/username-input/username-input.tsx"],"sourcesContent":["import type { IUsernameAvailabilityData } from '../../api/use-validate-username-api/use-username-availability-get-types';\nimport type { UsernameInputProps } from './username-input.types';\n\nimport { useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { useValidateUsernameDal } from '../../dal/validate-username-dal/validate-username-dal';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\nimport { ErrorMessage, USERNAME_MAX_LENGTH, USERNAME_MIN_LENGTH } from './constants';\nimport * as S from './username-input-styled';\n\nexport const UsernameInput = ({\n  circleUsername,\n  username,\n  error,\n  isEdit,\n  showSpinner,\n  setError,\n  setUsername,\n  setShowSpinner,\n}: UsernameInputProps) => {\n  const {\n    colors: { RED, GREEN_4 },\n  } = useTheme();\n  const helperText = `Only letters, _ , & digits allowed.\\nUpto ${USERNAME_MAX_LENGTH} characters.`;\n\n  const handleUsernameValidationResponse = useCallback(\n    (data?: IUsernameAvailabilityData) => {\n      let err = '';\n\n      setShowSpinner(false);\n\n      if (data) {\n        if (!data.is_valid) {\n          err = ErrorMessage.USERNAME_ALREADY_EXISTS;\n        }\n      } else {\n        err = ErrorMessage.SOMETHING_WENT_WRONG;\n      }\n\n      setError(err);\n    },\n    [setError, setShowSpinner],\n  );\n\n  const { validateUsernameExists } = useValidateUsernameDal(handleUsernameValidationResponse);\n\n  const validateUserName = useCallback(\n    (value: string) => {\n      setError('');\n      setUsername(value);\n      if (isEdit && circleUsername === value) return;\n\n      if (value.length < USERNAME_MIN_LENGTH) {\n        setError(ErrorMessage.USERNAME_MIN_LENGTH);\n\n        return;\n      }\n      setShowSpinner(true);\n      validateUsernameExists(value);\n    },\n    [circleUsername, isEdit, setError, setShowSpinner, setUsername, validateUsernameExists],\n  );\n\n  const handleUsernameChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const value = event.target.value;\n      const usernameRegex = /^[a-z0-9_]*$/; // only letters, numbers and underscore\n\n      if (!usernameRegex.test(value) || value.length > USERNAME_MAX_LENGTH) {\n        return;\n      }\n      validateUserName(value);\n    },\n    [validateUserName],\n  );\n\n  return (\n    <InputWrapper\n      showSpinner={showSpinner}\n      helperText={username.length >= USERNAME_MAX_LENGTH ? helperText : error || helperText}\n    >\n      <S.Input\n        value={username}\n        onChange={handleUsernameChange}\n        autoFocus={true}\n        placeholder={'loopy_circle'}\n        color={error ? RED : showSpinner ? '' : GREEN_4}\n        autoCapitalize=\"none\"\n      />\n    </InputWrapper>\n  );\n};\n"],"names":["UsernameInput","circleUsername","username","error","isEdit","showSpinner","setError","setUsername","setShowSpinner","RED","GREEN_4","useTheme","helperText","USERNAME_MAX_LENGTH","handleUsernameValidationResponse","useCallback","data","err","ErrorMessage","validateUsernameExists","useValidateUsernameDal","validateUserName","value","USERNAME_MIN_LENGTH","handleUsernameChange","event","jsx","InputWrapper","S.Input"],"mappings":";;;;;;;AAWO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AACF,MAA0B;AAClB,QAAA;AAAA,IACJ,QAAQ,EAAE,KAAAC,GAAK,SAAAC,EAAQ;AAAA,MACrBC,EAAS,GACPC,IAAa;AAAA,OAA6CC,CAAmB,gBAE7EC,IAAmCC;AAAA,IACvC,CAACC,MAAqC;AACpC,UAAIC,IAAM;AAEV,MAAAT,EAAe,EAAK,GAEhBQ,IACGA,EAAK,aACRC,IAAMC,EAAa,2BAGrBD,IAAMC,EAAa,sBAGrBZ,EAASW,CAAG;AAAA,IACd;AAAA,IACA,CAACX,GAAUE,CAAc;AAAA,EAAA,GAGrB,EAAE,wBAAAW,EAAA,IAA2BC,EAAuBN,CAAgC,GAEpFO,IAAmBN;AAAA,IACvB,CAACO,MAAkB;AAGb,UAFJhB,EAAS,EAAE,GACXC,EAAYe,CAAK,GACb,EAAAlB,KAAUH,MAAmBqB,IAE7B;AAAA,YAAAA,EAAM,SAASC,GAAqB;AACtC,UAAAjB,EAASY,EAAa,mBAAmB;AAEzC;AAAA,QACF;AACA,QAAAV,EAAe,EAAI,GACnBW,EAAuBG,CAAK;AAAA;AAAA,IAC9B;AAAA,IACA,CAACrB,GAAgBG,GAAQE,GAAUE,GAAgBD,GAAaY,CAAsB;AAAA,EAAA,GAGlFK,IAAuBT;AAAA,IAC3B,CAACU,MAA+C;AACxC,YAAAH,IAAQG,EAAM,OAAO;AAG3B,MAAI,CAFkB,eAEH,KAAKH,CAAK,KAAKA,EAAM,SAAST,KAGjDQ,EAAiBC,CAAK;AAAA,IACxB;AAAA,IACA,CAACD,CAAgB;AAAA,EAAA;AAIjB,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAAtB;AAAA,MACA,YAAYH,EAAS,UAAUW,IAAsBD,IAAaT,KAASS;AAAA,MAE3E,UAAA,gBAAAc;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,OAAO1B;AAAA,UACP,UAAUsB;AAAA,UACV,WAAW;AAAA,UACX,aAAa;AAAA,UACb,OAAOrB,IAAQM,IAAMJ,IAAc,KAAKK;AAAA,UACxC,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/features/circle-games/sign-up/constants.js

@@ -1,5 +1,7 @@
 import { State as e } from "./sign-up-types.js";
 const h = [e.ACTIVE, e.PAUSED, e.PAID], i = [e.TRIAL, e.DEMO], p = [
+  { label: "KG", key: "0" },
+  { label: "1", key: "1", sup: "st" },
   { label: "2", key: "2", sup: "nd" },
   { label: "3", key: "3", sup: "rd" },
   { label: "4", key: "4", sup: "th" },
@@ -11,7 +13,7 @@ const h = [e.ACTIVE, e.PAUSED, e.PAID], i = [e.TRIAL, e.DEMO], p = [
   { label: "10", key: "10", sup: "th" },
   { label: "11", key: "11", sup: "th" },
   { label: "12", key: "12", sup: "th" }
-], t = 440, s = 640, n = window.innerWidth / t, a = window.innerHeight / s, l = Math.min(n, a), u = Math.min(s * l, s), b = Math.min(t * l, t);
+], t = 440, s = 640, a = window.innerWidth / t, n = window.innerHeight / s, l = Math.min(a, n), u = Math.min(s * l, s), b = Math.min(t * l, t);
 export {
   s as ACTUAL_HEIGHT,
   t as ACTUAL_WIDTH,

package/dist/features/circle-games/sign-up/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/features/circle-games/sign-up/constants.ts"],"sourcesContent":["import type { Grade } from './comp/grade-input/grade-input-types';\n\nimport { State } from './sign-up-types';\n\nexport const userIsEnrolledCases = [State.ACTIVE, State.PAUSED, State.PAID];\nexport const userIsOnTrialCases = [State.TRIAL, State.DEMO];\n\nexport const GRADES: Grade[] = [\n  { label: '2', key: '2', sup: 'nd' },\n  { label: '3', key: '3', sup: 'rd' },\n  { label: '4', key: '4', sup: 'th' },\n  { label: '5', key: '5', sup: 'th' },\n  { label: '6', key: '6', sup: 'th' },\n  { label: '7', key: '7', sup: 'th' },\n  { label: '8', key: '8', sup: 'th' },\n  { label: '9', key: '9', sup: 'th' },\n  { label: '10', key: '10', sup: 'th' },\n  { label: '11', key: '11', sup: 'th' },\n  { label: '12', key: '12', sup: 'th' },\n];\n\nexport const MIN_HEIGHT_TO_SUPPORT = 540;\nexport const ACTUAL_WIDTH = 440;\nexport const ACTUAL_HEIGHT = 640;\n\nconst widthRatio = window.innerWidth / ACTUAL_WIDTH;\nconst heightRatio = window.innerHeight / ACTUAL_HEIGHT;\nconst ratio = Math.min(widthRatio, heightRatio);\n\nexport const CONTAINER_HEIGHT = Math.min(ACTUAL_HEIGHT * ratio, ACTUAL_HEIGHT);\nexport const CONTAINER_WIDTH = Math.min(ACTUAL_WIDTH * ratio, ACTUAL_WIDTH);\n"],"names":["userIsEnrolledCases","State","userIsOnTrialCases","GRADES","ACTUAL_WIDTH","ACTUAL_HEIGHT","widthRatio","heightRatio","ratio","CONTAINER_HEIGHT","CONTAINER_WIDTH"],"mappings":";AAIO,MAAMA,IAAsB,CAACC,EAAM,QAAQA,EAAM,QAAQA,EAAM,IAAI,GAC7DC,IAAqB,CAACD,EAAM,OAAOA,EAAM,IAAI,GAE7CE,IAAkB;AAAA,EAC7B,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AACtC,GAGaC,IAAe,KACfC,IAAgB,KAEvBC,IAAa,OAAO,aAAaF,GACjCG,IAAc,OAAO,cAAcF,GACnCG,IAAQ,KAAK,IAAIF,GAAYC,CAAW,GAEjCE,IAAmB,KAAK,IAAIJ,IAAgBG,GAAOH,CAAa,GAChEK,IAAkB,KAAK,IAAIN,IAAeI,GAAOJ,CAAY;"}
+{"version":3,"file":"constants.js","sources":["../../../../src/features/circle-games/sign-up/constants.ts"],"sourcesContent":["import type { Grade } from './comp/grade-input/grade-input-types';\n\nimport { State } from './sign-up-types';\n\nexport const userIsEnrolledCases = [State.ACTIVE, State.PAUSED, State.PAID];\nexport const userIsOnTrialCases = [State.TRIAL, State.DEMO];\n\nexport const GRADES: Grade[] = [\n  { label: 'KG', key: '0' },\n  { label: '1', key: '1', sup: 'st' },\n  { label: '2', key: '2', sup: 'nd' },\n  { label: '3', key: '3', sup: 'rd' },\n  { label: '4', key: '4', sup: 'th' },\n  { label: '5', key: '5', sup: 'th' },\n  { label: '6', key: '6', sup: 'th' },\n  { label: '7', key: '7', sup: 'th' },\n  { label: '8', key: '8', sup: 'th' },\n  { label: '9', key: '9', sup: 'th' },\n  { label: '10', key: '10', sup: 'th' },\n  { label: '11', key: '11', sup: 'th' },\n  { label: '12', key: '12', sup: 'th' },\n];\n\nexport const MIN_HEIGHT_TO_SUPPORT = 540;\nexport const ACTUAL_WIDTH = 440;\nexport const ACTUAL_HEIGHT = 640;\n\nconst widthRatio = window.innerWidth / ACTUAL_WIDTH;\nconst heightRatio = window.innerHeight / ACTUAL_HEIGHT;\nconst ratio = Math.min(widthRatio, heightRatio);\n\nexport const CONTAINER_HEIGHT = Math.min(ACTUAL_HEIGHT * ratio, ACTUAL_HEIGHT);\nexport const CONTAINER_WIDTH = Math.min(ACTUAL_WIDTH * ratio, ACTUAL_WIDTH);\n"],"names":["userIsEnrolledCases","State","userIsOnTrialCases","GRADES","ACTUAL_WIDTH","ACTUAL_HEIGHT","widthRatio","heightRatio","ratio","CONTAINER_HEIGHT","CONTAINER_WIDTH"],"mappings":";AAIO,MAAMA,IAAsB,CAACC,EAAM,QAAQA,EAAM,QAAQA,EAAM,IAAI,GAC7DC,IAAqB,CAACD,EAAM,OAAOA,EAAM,IAAI,GAE7CE,IAAkB;AAAA,EAC7B,EAAE,OAAO,MAAM,KAAK,IAAI;AAAA,EACxB,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AACtC,GAGaC,IAAe,KACfC,IAAgB,KAEvBC,IAAa,OAAO,aAAaF,GACjCG,IAAc,OAAO,cAAcF,GACnCG,IAAQ,KAAK,IAAIF,GAAYC,CAAW,GAEjCE,IAAmB,KAAK,IAAIJ,IAAgBG,GAAOH,CAAa,GAChEK,IAAkB,KAAK,IAAIN,IAAeI,GAAOJ,CAAY;"}

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js

@@ -1,72 +1,72 @@
-import { useMessageBrokerChannel as W } from "@cuemath/cue-message-broker";
-import { useMemo as m, useState as $, useRef as j, useCallback as f } from "react";
-const C = (e) => ({
+import { useMessageBrokerChannel as $ } from "@cuemath/cue-message-broker";
+import { useMemo as C, useState as j, useRef as z, useCallback as f } from "react";
+const M = (e) => ({
   userId: e.userId,
   data: e.data,
   height: e.height,
   responseId: e.responseId
-}), z = (e) => {
-  var i, r;
+}), A = (e) => {
+  var a, i;
   const n = {};
   if (!e) return n;
   for (const { message: u } of e) {
-    const t = (i = u.payload) == null ? void 0 : i.eventPayload, a = t == null ? void 0 : t.responseId;
+    const t = (a = u.payload) == null ? void 0 : a.eventPayload, r = t == null ? void 0 : t.responseId;
     if (!(t != null && t.responseId)) continue;
-    const o = C(t);
-    a && n[a] ? (r = n[a]) == null || r.push(o) : n[a] = [o];
+    const c = M(t);
+    r && n[r] ? (i = n[r]) == null || i.push(c) : n[r] = [c];
   }
   return n;
-}, A = (e, n, i, r = "canvas") => {
-  const u = m(
-    () => z(i),
-    [i]
-  ), [t, a] = $(void 0), o = j({}), M = m(
+}, E = (e, n, a, i = "canvas") => {
+  const u = C(
+    () => A(a),
+    [a]
+  ), [t, r] = j(void 0), c = z({}), g = i === "canvas" || e.includes("practice") ? 0 : 24, S = C(
     () => ({
       channelId: e,
-      ttl: r === "canvas" ? 0 : 24,
+      ttl: g,
       logger: n
     }),
-    [e, n, r]
-  ), S = f((k, l) => {
-    o.current = { ...o.current, [k]: l };
-  }, []), b = f(
+    [e, n, g]
+  ), b = f((k, l) => {
+    c.current = { ...c.current, [k]: l };
+  }, []), D = f(
     (k, l) => {
       const h = u;
-      k.forEach((x) => {
+      k.forEach((F) => {
         var I;
-        const { payload: F } = x.message, { eventPayload: s } = F, c = s == null ? void 0 : s.responseId, O = s == null ? void 0 : s.data, v = s == null ? void 0 : s.userId, H = s == null ? void 0 : s.height, g = o.current[c];
-        if (!l && g)
-          g({
-            data: O,
-            height: H,
-            userId: v,
-            responseId: c
+        const { payload: O } = F.message, { eventPayload: s } = O, o = s == null ? void 0 : s.responseId, v = s == null ? void 0 : s.data, H = s == null ? void 0 : s.userId, W = s == null ? void 0 : s.height, p = c.current[o];
+        if (!l && p)
+          p({
+            data: v,
+            height: W,
+            userId: H,
+            responseId: o
           });
         else {
-          const p = C(s);
-          c && h[c] ? (I = h[c]) == null || I.push(p) : h[c] = [p];
+          const m = M(s);
+          o && h[o] ? (I = h[o]) == null || I.push(m) : h[o] = [m];
         }
-      }), a(h);
+      }), r(h);
     },
     [u]
-  ), { publish: D, channelStatus: R, channel: d, channelMetadata: q, setChannelMetadata: B } = W({
-    channelOptions: M,
-    consumerFn: b,
-    metadataRequired: r === "whiteboard"
-  }), w = f(() => {
+  ), { publish: R, channelStatus: q, channel: d, channelMetadata: B, setChannelMetadata: w } = $({
+    channelOptions: S,
+    consumerFn: D,
+    metadataRequired: i === "whiteboard"
+  }), x = f(() => {
     d && d.destroyChannel();
   }, [d]);
   return {
-    publishStrokes: D,
-    channelStatus: R,
-    closeChannel: w,
+    publishStrokes: R,
+    channelStatus: q,
+    closeChannel: x,
     initialStrokesData: t,
-    registerCallback: S,
-    setChannelMetadata: B,
-    channelMetadata: q
+    registerCallback: b,
+    setChannelMetadata: w,
+    channelMetadata: B
   };
-}, J = A;
+}, K = E;
 export {
-  J as default
+  K as default
 };
 //# sourceMappingURL=use-canvas-sync-broker.js.map