@cuemath/leap 3.1.17-aa0 → 3.1.17-hg2

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  onTableSegmentClick,\n  onJourneyComplete,\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 originalTableRef = useRef<ITableCardRef>(null);\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    [endJourney, journeyId, onJourneyComplete, onTableSegmentClick, trackAnalytics],\n  );\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        isActive: false,\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={handleEndJourney}\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        isActive: false,\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    [addCoachmark, handleEndJourney, isMobile, journeyId, nextCoachmark, tooltipTextRenderAs],\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, 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            isActive: false,\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            isActive: false,\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            isActive: false,\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        isActive: false,\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        isActive: false,\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      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    tableRef: originalTableRef,\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","device","getTheme","isMobile","tooltipTextRenderAs","originalTableRef","useRef","highlightedTableRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","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","S.Indicator","_h","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":";;;;;;;;;;;;;;;;;;AA0CO,MAAMA,KAA0B,CAAC;AAAA,EACtC,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AACF,MAA6B;AAC3B,QAAMC,IAAYC,EAAmB,6BAE/B,EAAE,QAAAC,MAAWC,MACbC,IAAWF,MAAW,UACtBG,IAAsBD,IAAW,aAAa,YAE9CE,IAAmBC,EAAsB,IAAI,GAC7CC,IAAsBD,EAAsB,IAAI,GAEhDE,IAAYF,EAAwC,CAAA,CAAE,GAEtD,EAAE,iBAAAG,MAAoBC,MACtB,EAAE,eAAAC,GAAe,YAAAC,GAAY,cAAAC,GAAc,YAAAC,EAAA,IAAeC,KAC1D,EAAE,SAASC,EAAe,IAAIC,GAAa,GAE3CC,IAAmBC;AAAA,IACvB,CAACC,MAAiC;;AAChC,MAAAN,EAAWf,CAAS,GAEhBqB,KACFvB,EAAoBuB,CAAY,GAElCJ,EAAeK,EAAwB,2BAA2B;AAAA,QAChE,MAAMC,EAAO;AAAA,MAAA,CACd,IAGiBC,IAAAlB,KAAA,gBAAAA,EAAA,YAAA,QAAAkB,EAAS,kBAAkB,MAC7CC,IAAAnB,KAAA,gBAAAA,EAAkB,YAAlB,QAAAmB,EAA2B,sBAC3B1B,EAAkBC,CAAS;AAAA,IAC7B;AAAA,IACA,CAACe,GAAYf,GAAWD,GAAmBD,GAAqBmB,CAAc;AAAA,EAAA,GAG1ES,IAA0BN;AAAA,IAC9B,CAACO,GAAuBC,MAA0B;;AAE9C,UAAA,GAACJ,IAAAlB,EAAiB,YAAjB,QAAAkB,EAA0B,wBAAwB,YACnD,GAACC,IAAAnB,EAAiB,YAAjB,QAAAmB,EAA0B,SAAS;AAEpC;AAGF,YAAMI,IAAoBvB,EAAiB,QAAQ,SAAS,QAAQ,yBAC9DwB,KACJC,IAAAzB,EAAiB,YAAjB,gBAAAyB,EAA0B,wBAAwB,QAAQ;AAE5D,MAAAjB,EAAad,GAAW;AAAA,QACtB,+BAA+BM,EAAiB,QAAQ;AAAA,QACxD,UAAU;AAAA,QACV,MAAM0B,EAAc;AAAA,QACpB,oBACE,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAK1B;AAAA,YACL,cAAcoB;AAAA,YACd,OAAOD,EAAa;AAAA,YACpB,MAAMA,EAAa;AAAA,YACnB,SAASR;AAAA,YACT,wBAAwBA;AAAA,UAAA;AAAA,QAC1B;AAAA,QAEF,WAAW;AAAA,UACT,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,OAAO;AAAA,UACP,+BACGgB,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,GAEDf,EAAad,GAAW;AAAA,QACtB,+BAA+BM,EAAiB,QAAQ;AAAA,QACxD,UAAU;AAAA,QACV,MAAM0B,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,GAEazB,EAAAZ,GAAW,IAAOsC,EAAkC,GACpD1B,EAAAZ,GAAW,IAAMuC,EAAgC;AAEzD,YAAAC,IAA6B,WAAW,MAAM;;AAClD,qBAAaA,CAA0B,IACnBhB,IAAAhB,EAAA,YAAA,QAAAgB,EAAS,oBAAoB;AAAA,SAChDiB,CAA2B;AAEpB,MAAAhC,EAAA,QAAQ,KAAK+B,CAA0B;AAAA,IACnD;AAAA,IACA,CAAC1B,GAAcK,GAAkBf,GAAUJ,GAAWY,GAAeP,CAAmB;AAAA,EAAA,GAGpFqC,IAAoBtB,EAAY,MAAM;;AAC1B,IAAAV,MACHc,IAAA3B,EAAA,YAAA,QAAA2B,EAAS,UAAUmB,IAClB/B,EAAAZ,GAAW,IAAO4C,EAAgC,GAEhE3B,EAAeK,EAAwB,wBAAwB;AAAA,MAC7D,MAAMC,EAAO;AAAA,IAAA,CACd;AAEK,UAAAsB,IAAY,WAAW,MAAM;;AACjC,mBAAaA,CAAS,IACLrB,IAAAlB,EAAA,YAAA,QAAAkB,EAAS,kBAAkB,KAC5CZ,EAAcZ,GAAW,EAAI;AAAA,OAC5B8C,EAA+B;AAExB,IAAArC,EAAA,QAAQ,KAAKoC,CAAS;AAE1B,UAAAE,IAAe,WAAW,MAAM;;AACpC,mBAAaA,CAAY,IACLvB,IAAAhB,EAAA,YAAA,QAAAgB,EAAS,oBAAoB;AAAA,OAChDiB,CAA2B;AAEpB,IAAAhC,EAAA,QAAQ,KAAKsC,CAAY;AAAA,EAAA,GAClC,CAAClD,GAAcG,GAAWY,GAAeF,GAAiBO,CAAc,CAAC,GAEtE+B,IAAe5B;AAAA,IACnB,CAAC6B,GAAqBC,IAAoC,OAAU;;AAC5D,YAAAC,KAAiB3B,IAAA3B,EAAa,YAAb,gBAAA2B,EAAsB,eACvC4B,KAAqB3B,IAAA5B,EAAa,YAAb,gBAAA4B,EAAsB,YAC3C4B,IAAqBF,KAAA,gBAAAA,EAAiBR;AAE5C,UACE,GAACZ,IAAAzB,EAAiB,YAAjB,QAAAyB,EAA0B,wBAAwB,YACnD,GAACuB,IAAAhD,EAAiB,YAAjB,QAAAgD,EAA0B,SAAS,YACpC,CAACH,KACD,EAACC,KAAA,QAAAA,EAAoB,YACrB,CAACC,KACD,CAACA,EAAmB;AAEpB;AAGF,YAAME,IAAYjD,EAAiB,QAAQ,SAAS,QAAQ,yBACtDwB,KACJ0B,IAAAlD,EAAiB,YAAjB,gBAAAkD,EAA0B,wBAAwB,QAAQ;AAG5D,MAAKN,KA6BHrC,EAAWb,GAAW;AAAA,QACpB;AAAA,UACE,+BAA+BqD;AAAA,UAC/B,UAAU;AAAA,UACV,MAAMrB,EAAc;AAAA,UACpB,oBAAqB,gBAAAC,EAAAwB,IAAA,EAAY,WAAW,GAAO,CAAA;AAAA,UACnD,WAAW;AAAA,YACT,UAAU;AAAA,YACV,iBAAiB;AAAA,YACjB,OAAO;AAAA,YACP,aACE,gBAAAxB;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,UAC/B,UAAU;AAAA,UACV,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,IACYqB,IAAA7D,EAAA,YAAA,QAAA6D,EAAS,UAAUC,KAClB/C,EAAAZ,GAAW,IAAO4D,CAA+B,GACjDhD,EAAAZ,GAAW,IAAM6D,EAA6B,MAjE5DhD,EAAWb,GAAW;AAAA,QACpB;AAAA,UACE,gCAA+B8D,IAAAjE,EAAa,YAAb,gBAAAiE,EAAsB;AAAA,UACrD,UAAU;AAAA,UACV,MAAM9B,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,YAAC8B;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAMC;AAAA,cACN,SAAStB;AAAA,cACT,gBAAgBuB,GAA+B;AAAA,YAAA;AAAA,UACjD;AAAA,QAEJ;AAAA,MAAA,CACD,IACYC,IAAArE,EAAA,YAAA,QAAAqE,EAAS,UAAUC,KAClBvD,EAAAZ,GAAW,IAAO4D,CAA+B,IA2CjE9C,EAAad,GAAW;AAAA,QACtB,+BAA+BM,EAAiB,QAAQ;AAAA,QACxD,UAAU;AAAA,QACV,MAAM0B,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,GAEDzC,EAAad,GAAW;AAAA,QACtB,+BAA+BM,EAAiB,QAAQ;AAAA,QACxD,UAAU;AAAA,QACV,MAAM0B,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,KAAK1B;AAAA,YACL,OAAOyC,EAAW;AAAA,YAClB,MAAMA,EAAW;AAAA,YACjB,SAAS,MAAM;AAAA,YAAC;AAAA,YAChB,qBAAqB,CAAAmB,MAAa1C,EAAwBuB,GAAYmB,CAAS;AAAA,UAAA;AAAA,QACjF;AAAA,MAAA,CAEH;AAAA,IACH;AAAA,IACA;AAAA,MACEtD;AAAA,MACAjB;AAAA,MACA6C;AAAA,MACAhB;AAAA,MACAtB;AAAA,MACAJ;AAAA,MACAY;AAAA,MACAC;AAAA,MACAR;AAAA,IACF;AAAA,EAAA;AAIF,SAAAgE,EAAU,MACD,MAAM;AACX,IAAA5D,EAAU,QAAQ,QAAQ,CAAS6D,MAAA,aAAaA,CAAK,CAAC,GACtD7D,EAAU,UAAU;EAAC,GAEtB,CAACT,CAAS,CAAC,GAEP;AAAA,IACL,UAAUM;AAAA,IACV,cAAA0C;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';\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  onTableSegmentClick,\n  onJourneyComplete,\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 originalTableRef = useRef<ITableCardRef>(null);\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    [endJourney, journeyId, onJourneyComplete, onTableSegmentClick, trackAnalytics],\n  );\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        isActive: false,\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={handleEndJourney}\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        isActive: false,\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    [addCoachmark, handleEndJourney, isMobile, journeyId, nextCoachmark, tooltipTextRenderAs],\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, 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            isActive: false,\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            isActive: false,\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            isActive: false,\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        isActive: false,\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        isActive: false,\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      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    tableRef: originalTableRef,\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","device","getTheme","isMobile","tooltipTextRenderAs","originalTableRef","useRef","highlightedTableRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","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","S.Indicator","_h","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":"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"}

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';\n\nexport const Tutorial = ({\n  src,\n  title,\n  onCross,\n  showProgress = true,\n  onTutorialPlayedOnce,\n  isJourneyActive,\n}: ITutorialProps) => {\n  const [progress, setProgress] = useState(0);\n  const hasVideoEnded = useRef(false);\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 p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n      if (p >= 90 && !hasVideoEnded.current) {\n        hasVideoEnded.current = true;\n        onTutorialPlayedOnce?.();\n      }\n\n      setProgress(p);\n    },\n    [onTutorialPlayedOnce],\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      <Styled.GameTutorialContainer>\n        <Styled.VideoContainer>\n          <video\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 && (\n        <Styled.VideoProgressWrapper>\n          <Styled.VideoProgressContainer>\n            {progress > 0 && <Styled.VideoProgress $width={progress} />}\n          </Styled.VideoProgressContainer>\n        </Styled.VideoProgressWrapper>\n      )}\n    </Styled.GameTutorialWrapper>\n  );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","progress","setProgress","useState","hasVideoEnded","useRef","device","getTheme","tooltipTextRenderAs","onProgress","useCallback","e","p","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"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;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAgBC,EAAO,EAAK,GAE5B,EAAE,QAAAC,MAAWC,KACbC,IAAsBF,MAAW,WAAW,aAAa,YAEzDG,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,KAAMD,EAAE,OAAO,eAAe,MAAMA,EAAE,OAAO,YAAY,KAAM;AAErE,MAAIC,KAAK,MAAM,CAACR,EAAc,YAC5BA,EAAc,UAAU,IACDL,KAAA,QAAAA,MAGzBG,EAAYU,CAAC;AAAA,IACf;AAAA,IACA,CAACb,CAAoB;AAAA,EAAA;AAIrB,SAAA,gBAAAc,EAACC,GAAA,EACG,UAAA;AAAA,KAAAlB,KAASC,MACT,gBAAAgB,EAACE,GAAA,EACE,UAAA;AAAA,MACCnB,KAAA,gBAAAoB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHrB,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAAmB,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAAStB,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGDG,KACC,gBAAAgB,EAACI,GAAQ,EAAA,KAAI,UACX,UAAC,gBAAAJ,EAAAC,GAAA,EAAK,WAAWT,GAAqB,QAAO,cAAa,QAAO,UAAS,wEAE1E,CAAA,GACF;AAAA,sBAEDa,GAAA,EACC,UAAC,gBAAAL,EAAAM,GAAA,EACC,UAAA,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAArB;AAAA,QACA,cAAcc;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAECX,KACE,gBAAAkB,EAAAO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EACE,UAAWvB,IAAA,uBAAMwB,GAAA,EAAqB,QAAQxB,EAAU,CAAA,EAC3D,CAAA,GACF;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 { getTheme } from '../../../ui/theme/get-theme';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n  src,\n  title,\n  onCross,\n  showProgress = true,\n  onTutorialPlayedOnce,\n  isJourneyActive,\n}: ITutorialProps) => {\n  const [progress, setProgress] = useState(0);\n  const hasVideoEnded = useRef(false);\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 p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n      if (p >= 90 && !hasVideoEnded.current) {\n        hasVideoEnded.current = true;\n        onTutorialPlayedOnce?.();\n      }\n\n      setProgress(p);\n    },\n    [onTutorialPlayedOnce],\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      <Styled.GameTutorialContainer>\n        <Styled.VideoContainer>\n          <video\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 && (\n        <Styled.VideoProgressWrapper>\n          <Styled.VideoProgressContainer>\n            {progress > 0 && <Styled.VideoProgress $width={progress} />}\n          </Styled.VideoProgressContainer>\n        </Styled.VideoProgressWrapper>\n      )}\n    </Styled.GameTutorialWrapper>\n  );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","progress","setProgress","useState","hasVideoEnded","useRef","device","getTheme","tooltipTextRenderAs","onProgress","useCallback","e","p","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"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;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAgBC,EAAO,EAAK,GAE5B,EAAE,QAAAC,EAAO,IAAIC,EAAS,GACtBC,IAAsBF,MAAW,WAAW,aAAa,YAEzDG,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,KAAMD,EAAE,OAAO,eAAe,MAAMA,EAAE,OAAO,YAAY,KAAM;AAErE,MAAIC,KAAK,MAAM,CAACR,EAAc,YAC5BA,EAAc,UAAU,IACDL,KAAA,QAAAA,MAGzBG,EAAYU,CAAC;AAAA,IACf;AAAA,IACA,CAACb,CAAoB;AAAA,EACvB;AAGE,SAAA,gBAAAc,EAACC,GAAA,EACG,UAAA;AAAA,KAAAlB,KAASC,MACT,gBAAAgB,EAACE,GAAA,EACE,UAAA;AAAA,MACCnB,KAAA,gBAAAoB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHrB,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAAmB,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAAStB,EAAS,CAAA,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGDG,KACC,gBAAAgB,EAACI,GAAQ,EAAA,KAAI,UACX,UAAC,gBAAAJ,EAAAC,GAAA,EAAK,WAAWT,GAAqB,QAAO,cAAa,QAAO,UAAS,wEAE1E,CAAA,GACF;AAAA,sBAEDa,GAAA,EACC,UAAC,gBAAAL,EAAAM,GAAA,EACC,UAAA,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAArB;AAAA,QACA,cAAcc;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAECX,KACE,gBAAAkB,EAAAO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EACE,UAAWvB,IAAA,uBAAMwB,GAAA,EAAqB,QAAQxB,EAAA,CAAU,GAC3D,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/features/circle-games/games/web-view/web-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"web-view.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view.tsx"],"sourcesContent":["import type {\n  IInfoMessage,\n  ILessonWebGameProps,\n  IMessageProps,\n  IMultiplayerWebGameProps,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n  ITableWebGameProps,\n  IVibrationPattern,\n  IWebViewProps,\n} from './web-view-types';\nimport type { ForwardedRef } from 'react';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { useUIContext } from '../../../ui/context/context';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport { ALLOWED_ORIGIN } from './constants';\nimport { ProjectType, WebViewEvent } from './enums';\n\nexport const WebView = forwardRef((props: IWebViewProps, ref: ForwardedRef<HTMLIFrameElement>) => {\n  const {\n    baseUrl,\n    projectDetails,\n    playerDetails,\n    onGameLoad,\n    onGamePlayFinish,\n    handleInfoMessage,\n    onBack,\n    parentDomain,\n    ...rest\n  } = props;\n  const webViewRef = useRef<HTMLIFrameElement>(null);\n  const memoizedPlayerDetails = useMemo(() => playerDetails, [playerDetails]);\n  const memoizedProjectDetails = useMemo(() => projectDetails, [projectDetails]);\n\n  let miniGameIdentifier = '';\n  const { onEvent: trackEvent } = useUIContext();\n\n  if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n    miniGameIdentifier = (memoizedProjectDetails as ILessonWebGameProps).miniGameIdentifier;\n  }\n\n  const getProjectDetails = useCallback(() => {\n    const { enableCloseButton = true } = memoizedProjectDetails;\n\n    let payload = {\n      enableCloseButton,\n    } as IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\n\n    if (memoizedProjectDetails.projectType === ProjectType.GAME) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as IMultiplayerWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.PUZZLE) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as IPuzzleWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as ILessonWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.TABLE) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as ITableWebGameProps;\n    }\n\n    return payload;\n  }, [memoizedProjectDetails]);\n\n  const sendGamesData = useCallback(() => {\n    const payload = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.GAME_DATA,\n        payload,\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [getProjectDetails]);\n\n  const setConfig = useCallback(() => {\n    const projectConfig = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.SET_CONFIG,\n        payload: {\n          user: memoizedPlayerDetails,\n          projectConfig,\n          parentDomain,\n        },\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [memoizedPlayerDetails, getProjectDetails, parentDomain]);\n\n  useImperativeHandle(ref, () => webViewRef.current as HTMLIFrameElement, []);\n\n  useEffect(() => {\n    const handleMessage = (e: MessageEvent) => {\n      const data: string = e.data;\n      const parsedData = typeof data === 'string' ? JSON.parse(data) : (data as IMessageProps);\n\n      const { event, payload = null } = parsedData;\n\n      if (event === WebViewEvent.VIBRATE) {\n        const { pattern } = payload as IVibrationPattern;\n\n        if (window.ReactNativeWebView) {\n          window.ReactNativeWebView.postMessage(JSON.stringify(parsedData));\n        } else {\n          window.navigator.vibrate?.(pattern);\n        }\n      }\n\n      if (event === WebViewEvent.GAME_BACK) {\n        onBack?.();\n      }\n\n      if (event === WebViewEvent.HIDE_LOADER) {\n        onGameLoad?.();\n      }\n\n      if (event === WebViewEvent.LOAD_DATA_FROM_APP) {\n        sendGamesData?.();\n      }\n\n      if (event === WebViewEvent.GET_CONFIG) {\n        setConfig();\n      }\n\n      if (event === WebViewEvent.UPDATE_STATS) {\n        onGamePlayFinish?.(payload as IPlayerStats);\n      }\n\n      if (event === WebViewEvent.SHOW_SNACKBAR) {\n        handleInfoMessage?.(payload as IInfoMessage);\n      }\n\n      if (event === WebViewEvent.TRACK_EVENT) {\n        const { eventName, properties } = payload;\n\n        trackEvent(eventName, properties);\n      }\n    };\n\n    window.addEventListener('message', handleMessage);\n\n    return () => {\n      window.removeEventListener('message', handleMessage);\n    };\n  }, [\n    handleInfoMessage,\n    onBack,\n    onGamePlayFinish,\n    onGameLoad,\n    setConfig,\n    sendGamesData,\n    trackEvent,\n  ]);\n\n  const url = playerDetails.isAdmin\n    ? baseUrl\n    : `${baseUrl}/play-game/${memoizedProjectDetails.projectId}/${memoizedProjectDetails.variant}${\n        miniGameIdentifier ? `/${miniGameIdentifier}` : ''\n      }`;\n\n  return (\n    <FlexView $height=\"100%\" $width=\"100%\">\n      <Separator height={window.ReactNativeTopInset || 0} />\n      <iframe {...rest} ref={webViewRef} src={`${url}?version=2`} allow=\"autoplay\" />;\n      <Separator height={window.ReactNativeBottomInset || 0} />\n    </FlexView>\n  );\n});\n"],"names":["WebView","forwardRef","props","ref","baseUrl","projectDetails","playerDetails","onGameLoad","onGamePlayFinish","handleInfoMessage","onBack","parentDomain","rest","webViewRef","useRef","memoizedPlayerDetails","useMemo","memoizedProjectDetails","miniGameIdentifier","trackEvent","useUIContext","ProjectType","getProjectDetails","useCallback","enableCloseButton","payload","sendGamesData","_b","_a","WebViewEvent","ALLOWED_ORIGIN","setConfig","projectConfig","useImperativeHandle","useEffect","handleMessage","data","parsedData","event","pattern","eventName","properties","url","jsxs","FlexView","jsx","Separator"],"mappings":"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"}
+{"version":3,"file":"web-view.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view.tsx"],"sourcesContent":["import type {\n  IInfoMessage,\n  ILessonWebGameProps,\n  IMessageProps,\n  IMultiplayerWebGameProps,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n  ITableWebGameProps,\n  IVibrationPattern,\n  IWebViewProps,\n} from './web-view-types';\nimport type { ForwardedRef } from 'react';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { useUIContext } from '../../../ui/context/context';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport { ALLOWED_ORIGIN } from './constants';\nimport { ProjectType, WebViewEvent } from './enums';\n\nexport const WebView = forwardRef((props: IWebViewProps, ref: ForwardedRef<HTMLIFrameElement>) => {\n  const {\n    baseUrl,\n    projectDetails,\n    playerDetails,\n    onGameLoad,\n    onGamePlayFinish,\n    handleInfoMessage,\n    onBack,\n    parentDomain,\n    ...rest\n  } = props;\n  const webViewRef = useRef<HTMLIFrameElement>(null);\n  const memoizedPlayerDetails = useMemo(() => playerDetails, [playerDetails]);\n  const memoizedProjectDetails = useMemo(() => projectDetails, [projectDetails]);\n\n  let miniGameIdentifier = '';\n  const { onEvent: trackEvent } = useUIContext();\n\n  if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n    miniGameIdentifier = (memoizedProjectDetails as ILessonWebGameProps).miniGameIdentifier;\n  }\n\n  const getProjectDetails = useCallback(() => {\n    const { enableCloseButton = true } = memoizedProjectDetails;\n\n    let payload = {\n      enableCloseButton,\n    } as IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\n\n    if (memoizedProjectDetails.projectType === ProjectType.GAME) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as IMultiplayerWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.PUZZLE) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as IPuzzleWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as ILessonWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.TABLE) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as ITableWebGameProps;\n    }\n\n    return payload;\n  }, [memoizedProjectDetails]);\n\n  const sendGamesData = useCallback(() => {\n    const payload = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.GAME_DATA,\n        payload,\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [getProjectDetails]);\n\n  const setConfig = useCallback(() => {\n    const projectConfig = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.SET_CONFIG,\n        payload: {\n          user: memoizedPlayerDetails,\n          projectConfig,\n          parentDomain,\n        },\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [memoizedPlayerDetails, getProjectDetails, parentDomain]);\n\n  useImperativeHandle(ref, () => webViewRef.current as HTMLIFrameElement, []);\n\n  useEffect(() => {\n    const handleMessage = (e: MessageEvent) => {\n      const data: string = e.data;\n      const parsedData = typeof data === 'string' ? JSON.parse(data) : (data as IMessageProps);\n\n      const { event, payload = null } = parsedData;\n\n      if (event === WebViewEvent.VIBRATE) {\n        const { pattern } = payload as IVibrationPattern;\n\n        if (window.ReactNativeWebView) {\n          window.ReactNativeWebView.postMessage(JSON.stringify(parsedData));\n        } else {\n          window.navigator.vibrate?.(pattern);\n        }\n      }\n\n      if (event === WebViewEvent.GAME_BACK) {\n        onBack?.();\n      }\n\n      if (event === WebViewEvent.HIDE_LOADER) {\n        onGameLoad?.();\n      }\n\n      if (event === WebViewEvent.LOAD_DATA_FROM_APP) {\n        sendGamesData?.();\n      }\n\n      if (event === WebViewEvent.GET_CONFIG) {\n        setConfig();\n      }\n\n      if (event === WebViewEvent.UPDATE_STATS) {\n        onGamePlayFinish?.(payload as IPlayerStats);\n      }\n\n      if (event === WebViewEvent.SHOW_SNACKBAR) {\n        handleInfoMessage?.(payload as IInfoMessage);\n      }\n\n      if (event === WebViewEvent.TRACK_EVENT) {\n        const { eventName, properties } = payload;\n\n        trackEvent(eventName, properties);\n      }\n    };\n\n    window.addEventListener('message', handleMessage);\n\n    return () => {\n      window.removeEventListener('message', handleMessage);\n    };\n  }, [\n    handleInfoMessage,\n    onBack,\n    onGamePlayFinish,\n    onGameLoad,\n    setConfig,\n    sendGamesData,\n    trackEvent,\n  ]);\n\n  const url = playerDetails.isAdmin\n    ? baseUrl\n    : `${baseUrl}/play-game/${memoizedProjectDetails.projectId}/${memoizedProjectDetails.variant}${\n        miniGameIdentifier ? `/${miniGameIdentifier}` : ''\n      }`;\n\n  return (\n    <FlexView $height=\"100%\" $width=\"100%\">\n      <Separator height={window.ReactNativeTopInset || 0} />\n      <iframe {...rest} ref={webViewRef} src={`${url}?version=2`} allow=\"autoplay\" />;\n      <Separator height={window.ReactNativeBottomInset || 0} />\n    </FlexView>\n  );\n});\n"],"names":["WebView","forwardRef","props","ref","baseUrl","projectDetails","playerDetails","onGameLoad","onGamePlayFinish","handleInfoMessage","onBack","parentDomain","rest","webViewRef","useRef","memoizedPlayerDetails","useMemo","memoizedProjectDetails","miniGameIdentifier","trackEvent","useUIContext","ProjectType","getProjectDetails","useCallback","enableCloseButton","payload","sendGamesData","_b","_a","WebViewEvent","ALLOWED_ORIGIN","setConfig","projectConfig","useImperativeHandle","useEffect","handleMessage","data","parsedData","event","pattern","eventName","properties","url","jsxs","FlexView","jsx","Separator"],"mappings":";;;;;;;;AAqBO,MAAMA,IAAUC,EAAW,CAACC,GAAsBC,MAAyC;AAC1F,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDV,GACEW,IAAaC,EAA0B,IAAI,GAC3CC,IAAwBC,EAAQ,MAAMV,GAAe,CAACA,CAAa,CAAC,GACpEW,IAAyBD,EAAQ,MAAMX,GAAgB,CAACA,CAAc,CAAC;AAE7E,MAAIa,IAAqB;AACzB,QAAM,EAAE,SAASC,EAAW,IAAIC,EAAa;AAEzC,EAAAH,EAAuB,gBAAgBI,EAAY,WACrDH,IAAsBD,EAA+C;AAGjE,QAAAK,IAAoBC,EAAY,MAAM;AACpC,UAAA,EAAE,mBAAAC,IAAoB,GAAA,IAASP;AAErC,QAAIQ,IAAU;AAAA,MACZ,mBAAAD;AAAA,IACF;AAEI,WAAAP,EAAuB,gBAAgBI,EAAY,SAC3CI,IAAA;AAAA,MACR,GAAGA;AAAA,MACH,GAAGR;AAAA,IACL,IAGEA,EAAuB,gBAAgBI,EAAY,WAC3CI,IAAA;AAAA,MACR,GAAGA;AAAA,MACH,GAAGR;AAAA,IACL,IAGEA,EAAuB,gBAAgBI,EAAY,WAC3CI,IAAA;AAAA,MACR,GAAGA;AAAA,MACH,GAAGR;AAAA,IACL,IAGEA,EAAuB,gBAAgBI,EAAY,UAC3CI,IAAA;AAAA,MACR,GAAGA;AAAA,MACH,GAAGR;AAAA,IACL,IAGKQ;AAAA,EAAA,GACN,CAACR,CAAsB,CAAC,GAErBS,IAAgBH,EAAY,MAAM;;AACtC,UAAME,IAAUH,EAAkB;AAElC,KAAAK,KAAAC,IAAAf,EAAW,YAAX,gBAAAe,EAAoB,kBAApB,QAAAD,EAAmC;AAAA,MACjC,KAAK,UAAU;AAAA,QACb,OAAOE,EAAa;AAAA,QACpB,SAAAJ;AAAA,MAAA,CACD;AAAA,MACDK;AAAA;AAAA,EACF,GACC,CAACR,CAAiB,CAAC,GAEhBS,IAAYR,EAAY,MAAM;;AAClC,UAAMS,IAAgBV,EAAkB;AAExC,KAAAK,KAAAC,IAAAf,EAAW,YAAX,gBAAAe,EAAoB,kBAApB,QAAAD,EAAmC;AAAA,MACjC,KAAK,UAAU;AAAA,QACb,OAAOE,EAAa;AAAA,QACpB,SAAS;AAAA,UACP,MAAMd;AAAA,UACN,eAAAiB;AAAA,UACA,cAAArB;AAAA,QAAA;AAAA,MACF,CACD;AAAA,MACDmB;AAAA;AAAA,EAED,GAAA,CAACf,GAAuBO,GAAmBX,CAAY,CAAC;AAE3D,EAAAsB,EAAoB9B,GAAK,MAAMU,EAAW,SAA8B,CAAA,CAAE,GAE1EqB,EAAU,MAAM;AACR,UAAAC,IAAgB,CAAC,MAAoB;;AACzC,YAAMC,IAAe,EAAE,MACjBC,IAAa,OAAOD,KAAS,WAAW,KAAK,MAAMA,CAAI,IAAKA,GAE5D,EAAE,OAAAE,GAAO,SAAAb,IAAU,KAAS,IAAAY;AAE9B,UAAAC,MAAUT,EAAa,SAAS;AAC5B,cAAA,EAAE,SAAAU,MAAYd;AAEpB,QAAI,OAAO,qBACT,OAAO,mBAAmB,YAAY,KAAK,UAAUY,CAAU,CAAC,KAEzDV,KAAAC,IAAA,OAAA,WAAU,YAAV,QAAAD,EAAA,KAAAC,GAAoBW;AAAA,MAC7B;AA2BE,UAxBAD,MAAUT,EAAa,cAChBnB,KAAA,QAAAA,MAGP4B,MAAUT,EAAa,gBACZtB,KAAA,QAAAA,MAGX+B,MAAUT,EAAa,uBACTH,KAAA,QAAAA,MAGdY,MAAUT,EAAa,cACfE,EAAA,GAGRO,MAAUT,EAAa,iBACzBrB,KAAA,QAAAA,EAAmBiB,KAGjBa,MAAUT,EAAa,kBACzBpB,KAAA,QAAAA,EAAoBgB,KAGlBa,MAAUT,EAAa,aAAa;AAChC,cAAA,EAAE,WAAAW,GAAW,YAAAC,EAAA,IAAehB;AAElC,QAAAN,EAAWqB,GAAWC,CAAU;AAAA,MAAA;AAAA,IAEpC;AAEO,kBAAA,iBAAiB,WAAWN,CAAa,GAEzC,MAAM;AACJ,aAAA,oBAAoB,WAAWA,CAAa;AAAA,IACrD;AAAA,EAAA,GACC;AAAA,IACD1B;AAAA,IACAC;AAAA,IACAF;AAAA,IACAD;AAAA,IACAwB;AAAA,IACAL;AAAA,IACAP;AAAA,EAAA,CACD;AAED,QAAMuB,IAAMpC,EAAc,UACtBF,IACA,GAAGA,CAAO,cAAca,EAAuB,SAAS,IAAIA,EAAuB,OAAO,GACxFC,IAAqB,IAAIA,CAAkB,KAAK,EAClD;AAEJ,SACG,gBAAAyB,EAAAC,GAAA,EAAS,SAAQ,QAAO,QAAO,QAC9B,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAU,EAAA,QAAQ,OAAO,uBAAuB,GAAG;AAAA,IACpD,gBAAAD,EAAC,UAAQ,EAAA,GAAGjC,GAAM,KAAKC,GAAY,KAAK,GAAG6B,CAAG,cAAc,OAAM,WAAW,CAAA;AAAA,IAAE;AAAA,IAC9E,gBAAAG,EAAAC,GAAA,EAAU,QAAQ,OAAO,0BAA0B,EAAG,CAAA;AAAA,EAAA,GACzD;AAEJ,CAAC;"}

package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js

@@ -1,8 +1,8 @@
-import { useCallback as a, useRef as C, useEffect as T } from "react";
-import { CircleSoundKeyMapper as A, SWIPE_SOUND_ORDER as E } from "./constants.js";
+import { useCallback as s, useRef as C, useEffect as A } from "react";
+import { CircleSoundKeyMapper as O, SWIPE_SOUND_ORDER as S } from "./constants.js";
 import { CircleSoundKey as e } from "./use-circle-sounds-enums.js";
-let I = 0;
-const r = {
+let d = 0;
+const o = {
   [e.BACKGROUND]: null,
   [e.BACKGROUND_RUSHHOUR]: null,
   [e.TUTORIAL]: null,
@@ -26,93 +26,98 @@ const r = {
   [e.TIME_INTRO]: null,
   [e.TIME_TARGET]: null,
   [e.METER_FILL]: null
-}, f = {}, D = () => {
-  const c = a((n) => {
-    if (!r[n]) {
-      const l = new Audio(A[n]);
-      r[n] = l;
+}, I = {}, G = () => {
+  const c = s((n) => {
+    if (!o[n]) {
+      const l = new Audio(O[n]);
+      o[n] = l;
     }
-  }, []), v = C(/* @__PURE__ */ new Set()), o = C({}), p = a(() => {
-    document.visibilityState === "hidden" ? Object.keys(r).forEach((n) => {
-      const l = r[n];
-      l && !l.paused && (l.pause(), v.current.add(n));
-    }) : document.visibilityState === "visible" && (v.current.forEach((n) => {
-      const l = r[n];
+  }, []), f = C(/* @__PURE__ */ new Set()), r = C({}), p = s(() => {
+    document.visibilityState === "hidden" ? Object.keys(o).forEach((n) => {
+      const l = o[n];
+      l && !l.paused && (l.pause(), f.current.add(n));
+    }) : document.visibilityState === "visible" && (f.current.forEach((n) => {
+      const l = o[n];
       l == null || l.play();
-    }), v.current.clear());
+    }), f.current.clear());
   }, []);
-  T(() => {
+  A(() => {
     document.addEventListener("visibilitychange", p);
-    const n = o.current;
+    const n = r.current;
     return () => {
       document.removeEventListener("visibilitychange", p);
       for (const l of Object.values(n))
         l != null && clearInterval(l);
     };
   }, [p]);
-  const S = a(() => {
+  const _ = s(() => {
     var l;
-    E.forEach((u) => {
+    S.forEach((u) => {
       c(u);
     });
-    const n = E[I] || e.SWIPE_01;
-    I < E.length - 1 ? I++ : I = 0, (l = r[n]) == null || l.play();
-  }, [c]), m = a(() => {
+    const n = S[d] || e.SWIPE_01;
+    d < S.length - 1 ? d++ : d = 0, (l = o[n]) == null || l.play();
+  }, [c]), m = s(() => {
     var l;
-    return c(e.TOGGLE), (l = r[e.TOGGLE]) == null ? void 0 : l.play();
-  }, [c]), _ = a(
+    return c(e.TOGGLE), (l = o[e.TOGGLE]) == null ? void 0 : l.play();
+  }, [c]), R = s(
     (n, l = !0, u = !1) => {
       c(n);
-      const t = r[n];
+      const t = o[n];
       if (!t) return;
-      if (o.current[n] && clearInterval(o.current[n]), !t.paused && t.currentTime > 0 && !t.ended)
+      if (r.current[n] && clearInterval(r.current[n]), !t.paused && t.currentTime > 0 && !t.ended)
         return t;
       if (t.loop = u, l) {
         t.volume = 1;
-        const d = t.play();
-        f[n] = d;
+        const a = t.play();
+        a && (I[n] = a);
         return;
       }
       t.volume = 0;
-      const s = t.play();
-      f[n] = s;
-      const i = setInterval(() => {
+      const i = t.play();
+      I[n] = i;
+      const E = setInterval(() => {
         if (!t) {
-          clearInterval(i);
+          clearInterval(E);
           return;
         }
-        const d = t.volume || 0;
-        d < 1 ? t.volume = Math.min(d + 0.1, 1) : clearInterval(i);
+        const a = t.volume || 0;
+        a < 1 ? t.volume = Math.min(a + 0.1, 1) : clearInterval(E);
       }, 100);
-      return o.current[n] = i, t;
+      return r.current[n] = E, t;
     },
     [c]
-  ), R = a((n, l = !0) => {
-    var t;
-    const u = r[n];
-    f[n] !== void 0 && ((t = f[n]) == null || t.then(() => {
-      if (!u) return;
-      if (o.current[n] && clearInterval(o.current[n]), l) {
-        u.pause();
+  ), v = s((n, l) => {
+    const u = o[n];
+    if (!u) return;
+    if (r.current[n] && clearInterval(r.current[n]), l) {
+      u.pause();
+      return;
+    }
+    const t = setInterval(() => {
+      let i = u.volume || 0;
+      i - 0.1 <= 0 ? (u.volume = 0, u.pause(), clearInterval(t)) : (i = i - 0.1, u.volume = i);
+    }, 100);
+    r.current[n] = t;
+  }, []), T = s(
+    (n, l = !0) => {
+      var u;
+      if (I[n] !== void 0) {
+        (u = I[n]) == null || u.then(() => {
+          v(n, l);
+        }).catch((t) => {
+          console.log("sound not playing", t);
+        });
         return;
       }
-      const s = setInterval(() => {
-        if (!u) {
-          clearInterval(s);
-          return;
-        }
-        const i = u.volume || 0;
-        i - 0.1 <= 0 ? (u.volume = 0, u.pause(), clearInterval(s)) : u.volume = i - 0.1;
-      }, 100);
-      o.current[n] = s;
-    }).catch((s) => {
-      console.log("sound not playing", s);
-    }));
-  }, []);
-  return { playSwipSound: S, play: _, stop: R, playButtonSound: m };
+      v(n, l);
+    },
+    [v]
+  );
+  return { playSwipSound: _, play: R, stop: T, playButtonSound: m };
 };
 export {
-  r as soundMapper,
-  D as useCircleSounds
+  o as soundMapper,
+  G as useCircleSounds
 };
 //# sourceMappingURL=use-circle-sounds.js.map

package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-circle-sounds.js","sources":["../../../../../src/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.ts"],"sourcesContent":["import type { TimeoutMap } from './use-circle-sound-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { CircleSoundKeyMapper, SWIPE_SOUND_ORDER } from './constants';\nimport { CircleSoundKey } from './use-circle-sounds-enums';\n\nlet swipeSoundIndex = 0;\n\nexport const soundMapper: Record<keyof typeof CircleSoundKeyMapper, null | HTMLAudioElement> = {\n  [CircleSoundKey.BACKGROUND]: null,\n  [CircleSoundKey.BACKGROUND_RUSHHOUR]: null,\n  [CircleSoundKey.TUTORIAL]: null,\n  [CircleSoundKey.SWIPE_01]: null,\n  [CircleSoundKey.SWIPE_02]: null,\n  [CircleSoundKey.SWIPE_03]: null,\n  [CircleSoundKey.SWIPE_04]: null,\n  [CircleSoundKey.SWIPE_DOWN]: null,\n  [CircleSoundKey.TOGGLE]: null,\n  [CircleSoundKey.POINTS_AWARDED]: null,\n  [CircleSoundKey.POINTS_ADDED]: null,\n  [CircleSoundKey.GAME_CARD_CLICK]: null,\n  [CircleSoundKey.CLOCK_IN]: null,\n  [CircleSoundKey.CLOCK_OUT]: null,\n  [CircleSoundKey.ACCURACY_IN]: null,\n  [CircleSoundKey.ACCURACY_OUT]: null,\n  [CircleSoundKey.STREAK_IN]: null,\n  [CircleSoundKey.STREAK_OUT]: null,\n  [CircleSoundKey.ACCURACY_INTRO]: null,\n  [CircleSoundKey.ACCURACY_TARGET]: null,\n  [CircleSoundKey.TIME_INTRO]: null,\n  [CircleSoundKey.TIME_TARGET]: null,\n  [CircleSoundKey.METER_FILL]: null,\n};\n\nconst soundInstancePromise: Partial<Record<keyof typeof CircleSoundKeyMapper, Promise<void>>> = {};\n\nexport const useCircleSounds = () => {\n  const loadSound = useCallback((key: CircleSoundKey) => {\n    if (!soundMapper[key]) {\n      const loadedSound = new Audio(CircleSoundKeyMapper[key]);\n\n      soundMapper[key] = loadedSound;\n    }\n  }, []);\n\n  const pausedSoundsRef = useRef<Set<CircleSoundKey>>(new Set());\n  const timeoutRefs = useRef<TimeoutMap>({});\n\n  const handleVisibilityChange = useCallback(() => {\n    if (document.visibilityState === 'hidden') {\n      (Object.keys(soundMapper) as CircleSoundKey[]).forEach(key => {\n        const sound = soundMapper[key];\n\n        if (sound && !sound.paused) {\n          sound.pause();\n          pausedSoundsRef.current.add(key);\n        }\n      });\n    } else if (document.visibilityState === 'visible') {\n      pausedSoundsRef.current.forEach(key => {\n        const sound = soundMapper[key];\n\n        sound?.play();\n      });\n      pausedSoundsRef.current.clear();\n    }\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    const timeouts = timeoutRefs.current;\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      for (const id of Object.values(timeouts)) {\n        if (id != null) clearInterval(id);\n      }\n    };\n  }, [handleVisibilityChange]);\n\n  const playSwipSound = useCallback(() => {\n    SWIPE_SOUND_ORDER.forEach(key => {\n      loadSound(key);\n    });\n\n    const key = SWIPE_SOUND_ORDER[swipeSoundIndex] || CircleSoundKey.SWIPE_01;\n\n    if (swipeSoundIndex < SWIPE_SOUND_ORDER.length - 1) {\n      swipeSoundIndex++;\n    } else {\n      swipeSoundIndex = 0;\n    }\n    soundMapper[key]?.play();\n  }, [loadSound]);\n\n  const playButtonSound = useCallback(() => {\n    loadSound(CircleSoundKey.TOGGLE);\n    const sound = soundMapper[CircleSoundKey.TOGGLE]?.play();\n\n    return sound;\n  }, [loadSound]);\n\n  const play = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true, loop = false) => {\n      loadSound(key);\n      const soundInstance = soundMapper[key];\n\n      if (!soundInstance) return;\n\n      if (timeoutRefs.current[key]) {\n        clearInterval(timeoutRefs.current[key]);\n      }\n\n      if (!soundInstance.paused && soundInstance.currentTime > 0 && !soundInstance.ended) {\n        return soundInstance;\n      }\n\n      soundInstance.loop = loop;\n      if (immediately) {\n        soundInstance.volume = 1;\n        const promise = soundInstance.play();\n\n        soundInstancePromise[key] = promise;\n\n        return;\n      }\n\n      soundInstance.volume = 0;\n      const promise = soundInstance.play();\n\n      soundInstancePromise[key] = promise;\n\n      const intervalId = setInterval(() => {\n        if (!soundInstance) {\n          clearInterval(intervalId);\n\n          return;\n        }\n\n        const vol = soundInstance.volume || 0;\n\n        if (vol < 1) {\n          soundInstance.volume = Math.min(vol + 0.1, 1);\n        } else {\n          clearInterval(intervalId);\n        }\n      }, 100);\n\n      timeoutRefs.current[key] = intervalId;\n\n      return soundInstance;\n    },\n    [loadSound],\n  );\n\n  const stop = useCallback((key: CircleSoundKey, immediately: boolean = true) => {\n    const soundInstance = soundMapper[key];\n\n    if (soundInstancePromise[key] !== undefined) {\n      soundInstancePromise[key]\n        ?.then(() => {\n          if (!soundInstance) return;\n\n          if (timeoutRefs.current[key]) {\n            clearInterval(timeoutRefs.current[key]);\n          }\n\n          if (immediately) {\n            soundInstance.pause();\n\n            return;\n          }\n\n          const intervalId = setInterval(() => {\n            if (!soundInstance) {\n              clearInterval(intervalId);\n\n              return;\n            }\n\n            const vol = soundInstance.volume || 0;\n\n            if (vol - 0.1 <= 0) {\n              soundInstance.volume = 0;\n              soundInstance.pause();\n              clearInterval(intervalId);\n            } else {\n              soundInstance.volume = vol - 0.1;\n            }\n          }, 100);\n\n          timeoutRefs.current[key] = intervalId;\n        })\n        .catch(err => {\n          // eslint-disable-next-line no-console\n          console.log('sound not playing', err);\n        });\n    }\n  }, []);\n\n  return { playSwipSound, play, stop, playButtonSound };\n};\n"],"names":["swipeSoundIndex","soundMapper","CircleSoundKey","soundInstancePromise","useCircleSounds","loadSound","useCallback","key","loadedSound","CircleSoundKeyMapper","pausedSoundsRef","useRef","timeoutRefs","handleVisibilityChange","sound","useEffect","timeouts","id","playSwipSound","SWIPE_SOUND_ORDER","_a","playButtonSound","play","immediately","loop","soundInstance","promise","intervalId","vol","stop","err"],"mappings":"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"}
+{"version":3,"file":"use-circle-sounds.js","sources":["../../../../../src/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.ts"],"sourcesContent":["import type { TimeoutMap } from './use-circle-sound-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { CircleSoundKeyMapper, SWIPE_SOUND_ORDER } from './constants';\nimport { CircleSoundKey } from './use-circle-sounds-enums';\n\nlet swipeSoundIndex = 0;\n\nexport const soundMapper: Record<keyof typeof CircleSoundKeyMapper, null | HTMLAudioElement> = {\n  [CircleSoundKey.BACKGROUND]: null,\n  [CircleSoundKey.BACKGROUND_RUSHHOUR]: null,\n  [CircleSoundKey.TUTORIAL]: null,\n  [CircleSoundKey.SWIPE_01]: null,\n  [CircleSoundKey.SWIPE_02]: null,\n  [CircleSoundKey.SWIPE_03]: null,\n  [CircleSoundKey.SWIPE_04]: null,\n  [CircleSoundKey.SWIPE_DOWN]: null,\n  [CircleSoundKey.TOGGLE]: null,\n  [CircleSoundKey.POINTS_AWARDED]: null,\n  [CircleSoundKey.POINTS_ADDED]: null,\n  [CircleSoundKey.GAME_CARD_CLICK]: null,\n  [CircleSoundKey.CLOCK_IN]: null,\n  [CircleSoundKey.CLOCK_OUT]: null,\n  [CircleSoundKey.ACCURACY_IN]: null,\n  [CircleSoundKey.ACCURACY_OUT]: null,\n  [CircleSoundKey.STREAK_IN]: null,\n  [CircleSoundKey.STREAK_OUT]: null,\n  [CircleSoundKey.ACCURACY_INTRO]: null,\n  [CircleSoundKey.ACCURACY_TARGET]: null,\n  [CircleSoundKey.TIME_INTRO]: null,\n  [CircleSoundKey.TIME_TARGET]: null,\n  [CircleSoundKey.METER_FILL]: null,\n};\n\nconst soundInstancePromise: Partial<Record<keyof typeof CircleSoundKeyMapper, Promise<void>>> = {};\n\nexport const useCircleSounds = () => {\n  const loadSound = useCallback((key: CircleSoundKey) => {\n    if (!soundMapper[key]) {\n      const loadedSound = new Audio(CircleSoundKeyMapper[key]);\n\n      soundMapper[key] = loadedSound;\n    }\n  }, []);\n\n  const pausedSoundsRef = useRef<Set<CircleSoundKey>>(new Set());\n  const timeoutRefs = useRef<TimeoutMap>({});\n\n  const handleVisibilityChange = useCallback(() => {\n    if (document.visibilityState === 'hidden') {\n      (Object.keys(soundMapper) as CircleSoundKey[]).forEach(key => {\n        const sound = soundMapper[key];\n\n        if (sound && !sound.paused) {\n          sound.pause();\n          pausedSoundsRef.current.add(key);\n        }\n      });\n    } else if (document.visibilityState === 'visible') {\n      pausedSoundsRef.current.forEach(key => {\n        const sound = soundMapper[key];\n\n        sound?.play();\n      });\n      pausedSoundsRef.current.clear();\n    }\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    const timeouts = timeoutRefs.current;\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      for (const id of Object.values(timeouts)) {\n        if (id != null) clearInterval(id);\n      }\n    };\n  }, [handleVisibilityChange]);\n\n  const playSwipSound = useCallback(() => {\n    SWIPE_SOUND_ORDER.forEach(key => {\n      loadSound(key);\n    });\n\n    const key = SWIPE_SOUND_ORDER[swipeSoundIndex] || CircleSoundKey.SWIPE_01;\n\n    if (swipeSoundIndex < SWIPE_SOUND_ORDER.length - 1) {\n      swipeSoundIndex++;\n    } else {\n      swipeSoundIndex = 0;\n    }\n    soundMapper[key]?.play();\n  }, [loadSound]);\n\n  const playButtonSound = useCallback(() => {\n    loadSound(CircleSoundKey.TOGGLE);\n    const sound = soundMapper[CircleSoundKey.TOGGLE]?.play();\n\n    return sound;\n  }, [loadSound]);\n\n  const play = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true, loop = false) => {\n      loadSound(key);\n      const soundInstance = soundMapper[key];\n\n      if (!soundInstance) return;\n\n      if (timeoutRefs.current[key]) {\n        clearInterval(timeoutRefs.current[key]);\n      }\n\n      if (!soundInstance.paused && soundInstance.currentTime > 0 && !soundInstance.ended) {\n        return soundInstance;\n      }\n\n      soundInstance.loop = loop;\n      if (immediately) {\n        soundInstance.volume = 1;\n        const promise = soundInstance.play();\n\n        if (promise) {\n          soundInstancePromise[key] = promise;\n        }\n\n        return;\n      }\n\n      soundInstance.volume = 0;\n      const promise = soundInstance.play();\n\n      soundInstancePromise[key] = promise;\n\n      const intervalId = setInterval(() => {\n        if (!soundInstance) {\n          clearInterval(intervalId);\n\n          return;\n        }\n\n        const vol = soundInstance.volume || 0;\n\n        if (vol < 1) {\n          soundInstance.volume = Math.min(vol + 0.1, 1);\n        } else {\n          clearInterval(intervalId);\n        }\n      }, 100);\n\n      timeoutRefs.current[key] = intervalId;\n\n      return soundInstance;\n    },\n    [loadSound],\n  );\n\n  const handleSoundStop = useCallback((key: CircleSoundKey, immediately: boolean) => {\n    const soundInstance = soundMapper[key];\n\n    if (!soundInstance) return;\n\n    if (timeoutRefs.current[key]) {\n      clearInterval(timeoutRefs.current[key]);\n    }\n\n    if (immediately) {\n      soundInstance.pause();\n\n      return;\n    }\n\n    const intervalId = setInterval(() => {\n      let vol = soundInstance.volume || 0;\n\n      if (vol - 0.1 <= 0) {\n        soundInstance.volume = 0;\n        soundInstance.pause();\n\n        clearInterval(intervalId);\n      } else {\n        vol = vol - 0.1;\n        soundInstance.volume = vol;\n      }\n    }, 100);\n\n    timeoutRefs.current[key] = intervalId;\n  }, []);\n\n  const stop = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true) => {\n      // if play returned a promise\n      if (soundInstancePromise[key] !== undefined) {\n        soundInstancePromise[key]\n          ?.then(() => {\n            handleSoundStop(key, immediately);\n          })\n          .catch(err => {\n            // eslint-disable-next-line no-console\n            console.log('sound not playing', err);\n          });\n\n        return;\n      }\n\n      handleSoundStop(key, immediately);\n    },\n    [handleSoundStop],\n  );\n\n  return { playSwipSound, play, stop, playButtonSound };\n};\n"],"names":["swipeSoundIndex","soundMapper","CircleSoundKey","soundInstancePromise","useCircleSounds","loadSound","useCallback","key","loadedSound","CircleSoundKeyMapper","pausedSoundsRef","useRef","timeoutRefs","handleVisibilityChange","sound","useEffect","timeouts","id","playSwipSound","SWIPE_SOUND_ORDER","_a","playButtonSound","play","immediately","loop","soundInstance","promise","intervalId","vol","handleSoundStop","stop","err"],"mappings":"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"}

package/dist/features/circle-games/leaderboard/comps/banner/banner-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner-styled.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner-styled.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nimport { ABSOLUTE_LOTTIE_SIZE, BANNER_HEIGHT } from './constants';\n\nexport const BannerContainer = styled.div<{ topInset?: number }>`\n  height: ${({ topInset }) => (topInset || 0) + BANNER_HEIGHT}px;\n  width: 100%;\n  background: transparent;\n  overflow: hidden;\n  position: relative; /* Ensure proper positioning for Lottie */\n  flex-shrink: 0;\n  backdrop-filter: blur(80px);\n  user-select: none;\n`;\n\nexport const BannerTextContainer = styled.div`\n  flex: 1;\n`;\n\nexport const CountTextWrapper = styled.div<{ topInset?: number }>`\n  margin-right: auto;\n  margin-top: ${({ topInset }) => (topInset || 0) + 20}px;\n  margin-left: 16px;\n`;\n\nexport const SubHeadingTextContainer = styled.div`\n  padding: 16px 0 12px 16px;\n  width: 100%;\n`;\n\nexport const CircleLottieView = styled.div<{\n  topInset: number;\n  bgFromTopPosition: number;\n  bgFromRightPosition: number;\n}>`\n  width: ${ABSOLUTE_LOTTIE_SIZE}px;\n  height: ${ABSOLUTE_LOTTIE_SIZE}px;\n  position: absolute;\n  right: ${({ bgFromRightPosition }) => bgFromRightPosition || -142}px;\n  top: ${({ topInset, bgFromTopPosition }) => topInset + (bgFromTopPosition || -155)}px;\n  z-index: 1; /* Ensure Lottie is behind text elements if needed */\n  pointer-events: none;\n`;\n"],"names":["BannerContainer","styled","topInset","BANNER_HEIGHT","BannerTextContainer","CountTextWrapper","CircleLottieView","ABSOLUTE_LOTTIE_SIZE","bgFromRightPosition","bgFromTopPosition"],"mappings":";;AAIO,MAAMA,IAAkBC,EAAO;AAAA,YAC1B,CAAC,EAAE,UAAAC,EAAgB,OAAAA,KAAY,KAAKC,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhDC,IAAsBH,EAAO;AAAA;AAAA,GAI7BI,IAAmBJ,EAAO;AAAA;AAAA,gBAEvB,CAAC,EAAE,UAAAC,EAAgB,OAAAA,KAAY,KAAK,EAAE;AAAA;AAAA;AAIfD,EAAO;AAAA;AAAA;AAAA;AAKvC,MAAMK,IAAmBL,EAAO;AAAA,WAK5BM,CAAoB;AAAA,YACnBA,CAAoB;AAAA;AAAA,WAErB,CAAC,EAAE,qBAAAC,EAAoB,MAAMA,KAAuB,IAAI;AAAA,SAC1D,CAAC,EAAE,UAAAN,GAAU,mBAAAO,QAAwBP,KAAYO,KAAqB,KAAK;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"banner-styled.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner-styled.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nimport { ABSOLUTE_LOTTIE_SIZE, BANNER_HEIGHT } from './constants';\n\nexport const BannerContainer = styled.div<{ topInset?: number }>`\n  height: ${({ topInset }) => (topInset || 0) + BANNER_HEIGHT}px;\n  width: 100%;\n  background: transparent;\n  overflow: hidden;\n  position: relative; /* Ensure proper positioning for Lottie */\n  flex-shrink: 0;\n  backdrop-filter: blur(80px);\n  user-select: none;\n`;\n\nexport const BannerTextContainer = styled.div`\n  flex: 1;\n`;\n\nexport const CountTextWrapper = styled.div<{ topInset?: number }>`\n  margin-right: auto;\n  margin-top: ${({ topInset }) => (topInset || 0) + 20}px;\n  margin-left: 16px;\n`;\n\nexport const SubHeadingTextContainer = styled.div`\n  padding: 16px 0 12px 16px;\n  width: 100%;\n`;\n\nexport const CircleLottieView = styled.div<{\n  topInset: number;\n  bgFromTopPosition: number;\n  bgFromRightPosition: number;\n}>`\n  width: ${ABSOLUTE_LOTTIE_SIZE}px;\n  height: ${ABSOLUTE_LOTTIE_SIZE}px;\n  position: absolute;\n  right: ${({ bgFromRightPosition }) => bgFromRightPosition || -142}px;\n  top: ${({ topInset, bgFromTopPosition }) => topInset + (bgFromTopPosition || -155)}px;\n  z-index: 1; /* Ensure Lottie is behind text elements if needed */\n  pointer-events: none;\n`;\n"],"names":["BannerContainer","styled","topInset","BANNER_HEIGHT","BannerTextContainer","CountTextWrapper","CircleLottieView","ABSOLUTE_LOTTIE_SIZE","bgFromRightPosition","bgFromTopPosition"],"mappings":";;AAIO,MAAMA,IAAkBC,EAAO;AAAA,YAC1B,CAAC,EAAE,UAAAC,EAAgB,OAAAA,KAAY,KAAKC,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhDC,IAAsBH,EAAO;AAAA;AAAA,GAI7BI,IAAmBJ,EAAO;AAAA;AAAA,gBAEvB,CAAC,EAAE,UAAAC,EAAgB,OAAAA,KAAY,KAAK,EAAE;AAAA;AAAA;AAIfD,EAAO;AAAA;AAAA;AAAA;AAKvC,MAAMK,IAAmBL,EAAO;AAAA,WAK5BM,CAAoB;AAAA,YACnBA,CAAoB;AAAA;AAAA,WAErB,CAAC,EAAE,qBAAAC,QAA0BA,KAAuB,IAAI;AAAA,SAC1D,CAAC,EAAE,UAAAN,GAAU,mBAAAO,QAAwBP,KAAYO,KAAqB,KAAK;AAAA;AAAA;AAAA;"}

package/dist/features/circle-games/leaderboard/comps/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner.tsx"],"sourcesContent":["import type { IBannerProps } from './banner-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './banner-styled';\n\nconst animationSettings = { renderer: 'canvas' };\n\nexport const Banner: FC<IBannerProps> = memo(\n  ({\n    primaryText,\n    secondaryText,\n    topInset = window.ReactNativeTopInset || 0,\n    isLoading = false,\n    lottiePath,\n    bgFromTopPosition = 0,\n    bgFromRightPosition = 0,\n    custEle,\n  }) => (\n    <Styled.BannerContainer topInset={topInset}>\n      <Styled.CircleLottieView\n        topInset={topInset}\n        bgFromTopPosition={bgFromTopPosition}\n        bgFromRightPosition={bgFromRightPosition}\n      >\n        <LottieAnimation src={lottiePath} settings={animationSettings} />\n      </Styled.CircleLottieView>\n\n      <Styled.BannerTextContainer>\n        <Styled.CountTextWrapper topInset={topInset}>\n          <Text $renderAs=\"ac4\" $color=\"WHITE\">\n            {primaryText}\n          </Text>\n          <Separator height={4} />\n          <Text $renderAs=\"ah4\" $color=\"WHITE\">\n            {isLoading ? '__' : secondaryText}\n          </Text>\n        </Styled.CountTextWrapper>\n      </Styled.BannerTextContainer>\n      {custEle}\n    </Styled.BannerContainer>\n  ),\n);\n"],"names":["animationSettings","Banner","memo","primaryText","secondaryText","topInset","isLoading","lottiePath","bgFromTopPosition","bgFromRightPosition","custEle","jsxs","Styled.BannerContainer","jsx","Styled.CircleLottieView","LottieAnimation","Styled.BannerTextContainer","Styled.CountTextWrapper","Text","Separator"],"mappings":";;;;;;AAUA,MAAMA,IAAoB,EAAE,UAAU,YAEzBC,IAA2BC;AAAA,EACtC,CAAC;AAAA,IACC,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC,IAAW,OAAO,uBAAuB;AAAA,IACzC,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,qBAAAC,IAAsB;AAAA,IACtB,SAAAC;AAAA,EAEA,MAAA,gBAAAC,EAACC,GAAA,EAAuB,UAAAP,GACtB,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,UAAAT;AAAA,QACA,mBAAAG;AAAA,QACA,qBAAAC;AAAA,QAEA,UAAC,gBAAAI,EAAAE,GAAA,EAAgB,KAAKR,GAAY,UAAUP,GAAmB;AAAA,MAAA;AAAA,IACjE;AAAA,IAEA,gBAAAa,EAACG,GAAA,EACC,4BAACC,GAAA,EAAwB,UAAAZ,GACvB,UAAA;AAAA,MAAA,gBAAAQ,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UACHf,GAAA;AAAA,MACA,gBAAAU,EAACM,GAAU,EAAA,QAAQ,EAAG,CAAA;AAAA,MACtB,gBAAAN,EAACK,KAAK,WAAU,OAAM,QAAO,SAC1B,UAAAZ,IAAY,OAAOF,EACtB,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,IACCM;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"banner.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner.tsx"],"sourcesContent":["import type { IBannerProps } from './banner-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './banner-styled';\n\nconst animationSettings = { renderer: 'canvas' };\n\nexport const Banner: FC<IBannerProps> = memo(\n  ({\n    primaryText,\n    secondaryText,\n    topInset = window.ReactNativeTopInset || 0,\n    isLoading = false,\n    lottiePath,\n    bgFromTopPosition = 0,\n    bgFromRightPosition = 0,\n    custEle,\n  }) => (\n    <Styled.BannerContainer topInset={topInset}>\n      <Styled.CircleLottieView\n        topInset={topInset}\n        bgFromTopPosition={bgFromTopPosition}\n        bgFromRightPosition={bgFromRightPosition}\n      >\n        <LottieAnimation src={lottiePath} settings={animationSettings} />\n      </Styled.CircleLottieView>\n\n      <Styled.BannerTextContainer>\n        <Styled.CountTextWrapper topInset={topInset}>\n          <Text $renderAs=\"ac4\" $color=\"WHITE\">\n            {primaryText}\n          </Text>\n          <Separator height={4} />\n          <Text $renderAs=\"ah4\" $color=\"WHITE\">\n            {isLoading ? '__' : secondaryText}\n          </Text>\n        </Styled.CountTextWrapper>\n      </Styled.BannerTextContainer>\n      {custEle}\n    </Styled.BannerContainer>\n  ),\n);\n"],"names":["animationSettings","Banner","memo","primaryText","secondaryText","topInset","isLoading","lottiePath","bgFromTopPosition","bgFromRightPosition","custEle","jsxs","Styled.BannerContainer","jsx","Styled.CircleLottieView","LottieAnimation","Styled.BannerTextContainer","Styled.CountTextWrapper","Text","Separator"],"mappings":";;;;;;AAUA,MAAMA,IAAoB,EAAE,UAAU,SAAS,GAElCC,IAA2BC;AAAA,EACtC,CAAC;AAAA,IACC,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC,IAAW,OAAO,uBAAuB;AAAA,IACzC,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,qBAAAC,IAAsB;AAAA,IACtB,SAAAC;AAAA,EAEA,MAAA,gBAAAC,EAACC,GAAA,EAAuB,UAAAP,GACtB,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,UAAAT;AAAA,QACA,mBAAAG;AAAA,QACA,qBAAAC;AAAA,QAEA,UAAC,gBAAAI,EAAAE,GAAA,EAAgB,KAAKR,GAAY,UAAUP,EAAmB,CAAA;AAAA,MAAA;AAAA,IACjE;AAAA,IAEA,gBAAAa,EAACG,GAAA,EACC,4BAACC,GAAA,EAAwB,UAAAZ,GACvB,UAAA;AAAA,MAAA,gBAAAQ,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UACHf,GAAA;AAAA,MACA,gBAAAU,EAACM,GAAU,EAAA,QAAQ,EAAG,CAAA;AAAA,MACtB,gBAAAN,EAACK,KAAK,WAAU,OAAM,QAAO,SAC1B,UAAAZ,IAAY,OAAOF,EACtB,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,IACCM;AAAA,EAAA,EACH,CAAA;AAEJ;"}

package/dist/features/circle-games/leaderboard/comps/leaderboard-item/leaderboard-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"leaderboard-item.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/leaderboard-item/leaderboard-item.tsx"],"sourcesContent":["import type {\n  ILeaderboardPlayerWithPoints,\n  ILeaderboardPlayerWithStreak,\n} from '../../dal/use-get-leaderboard-dal/use-get-leaderboard-dal-types';\nimport type { ILeaderboardItemProps } from './leaderboard-item-types';\n\nimport React, { memo } from 'react';\n\nimport { ELeaderboardType } from '../../enums/leaderboard-type-enum';\nimport { useIntersectionObserver } from '../../hooks/use-intersection-observer/use-intersection-observer.tsx';\nimport { PlayerProgressListItem } from '../progress-list-item/progress-list-item';\nimport * as Styled from './leaderboard-item-styled';\n\nexport const LeaderboardItemWithObserver: React.FC<ILeaderboardItemProps> = memo(\n  ({ player, rank, maxStreakDays, maxPoints, leaderboardType, isActive }) => {\n    const { isVisible, elementRef } = useIntersectionObserver<HTMLDivElement>({\n      threshold: 0.5,\n    });\n\n    const maxValue =\n      leaderboardType === ELeaderboardType.ALL_TIME_STREAK ? maxStreakDays : maxPoints;\n\n    const value =\n      leaderboardType === ELeaderboardType.ALL_TIME_STREAK\n        ? (player as ILeaderboardPlayerWithStreak).streakDays\n        : (player as ILeaderboardPlayerWithPoints).points;\n\n    return (\n      <Styled.AnimatedItem key={player.rank} isVisible={isVisible} ref={elementRef}>\n        <PlayerProgressListItem\n          index={rank}\n          maxValue={maxValue}\n          value={value}\n          isActive={isActive}\n          avatar={player.userAvatar}\n          grade={player.grade}\n          displayText={player.username}\n          displayValueAs={\n            leaderboardType === ELeaderboardType.ALL_TIME_STREAK ? 'streak' : 'points'\n          }\n        />\n      </Styled.AnimatedItem>\n    );\n  },\n);\n"],"names":["LeaderboardItemWithObserver","memo","player","rank","maxStreakDays","maxPoints","leaderboardType","isActive","isVisible","elementRef","useIntersectionObserver","maxValue","ELeaderboardType","value","Styled.AnimatedItem","jsx","PlayerProgressListItem"],"mappings":";;;;;;AAaO,MAAMA,IAA+DC;AAAA,EAC1E,CAAC,EAAE,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,GAAe,WAAAC,GAAW,iBAAAC,GAAiB,UAAAC,QAAe;AACzE,UAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAwC;AAAA,MACxE,WAAW;AAAA,IAAA,CACZ,GAEKC,IACJL,MAAoBM,EAAiB,kBAAkBR,IAAgBC,GAEnEQ,IACJP,MAAoBM,EAAiB,kBAChCV,EAAwC,aACxCA,EAAwC;AAE/C,6BACGY,GAAA,EAAsC,WAAAN,GAAsB,KAAKC,GAChE,UAAA,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAOb;AAAA,QACP,UAAAQ;AAAA,QACA,OAAAE;AAAA,QACA,UAAAN;AAAA,QACA,QAAQL,EAAO;AAAA,QACf,OAAOA,EAAO;AAAA,QACd,aAAaA,EAAO;AAAA,QACpB,gBACEI,MAAoBM,EAAiB,kBAAkB,WAAW;AAAA,MAAA;AAAA,IAAA,KAV9CV,EAAO,IAajC;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"leaderboard-item.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/leaderboard-item/leaderboard-item.tsx"],"sourcesContent":["import type {\n  ILeaderboardPlayerWithPoints,\n  ILeaderboardPlayerWithStreak,\n} from '../../dal/use-get-leaderboard-dal/use-get-leaderboard-dal-types';\nimport type { ILeaderboardItemProps } from './leaderboard-item-types';\n\nimport React, { memo } from 'react';\n\nimport { ELeaderboardType } from '../../enums/leaderboard-type-enum';\nimport { useIntersectionObserver } from '../../hooks/use-intersection-observer/use-intersection-observer.tsx';\nimport { PlayerProgressListItem } from '../progress-list-item/progress-list-item';\nimport * as Styled from './leaderboard-item-styled';\n\nexport const LeaderboardItemWithObserver: React.FC<ILeaderboardItemProps> = memo(\n  ({ player, rank, maxStreakDays, maxPoints, leaderboardType, isActive }) => {\n    const { isVisible, elementRef } = useIntersectionObserver<HTMLDivElement>({\n      threshold: 0.5,\n    });\n\n    const maxValue =\n      leaderboardType === ELeaderboardType.ALL_TIME_STREAK ? maxStreakDays : maxPoints;\n\n    const value =\n      leaderboardType === ELeaderboardType.ALL_TIME_STREAK\n        ? (player as ILeaderboardPlayerWithStreak).streakDays\n        : (player as ILeaderboardPlayerWithPoints).points;\n\n    return (\n      <Styled.AnimatedItem key={player.rank} isVisible={isVisible} ref={elementRef}>\n        <PlayerProgressListItem\n          index={rank}\n          maxValue={maxValue}\n          value={value}\n          isActive={isActive}\n          avatar={player.userAvatar}\n          grade={player.grade}\n          displayText={player.username}\n          displayValueAs={\n            leaderboardType === ELeaderboardType.ALL_TIME_STREAK ? 'streak' : 'points'\n          }\n        />\n      </Styled.AnimatedItem>\n    );\n  },\n);\n"],"names":["LeaderboardItemWithObserver","memo","player","rank","maxStreakDays","maxPoints","leaderboardType","isActive","isVisible","elementRef","useIntersectionObserver","maxValue","ELeaderboardType","value","Styled.AnimatedItem","jsx","PlayerProgressListItem"],"mappings":";;;;;;AAaO,MAAMA,IAA+DC;AAAA,EAC1E,CAAC,EAAE,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,GAAe,WAAAC,GAAW,iBAAAC,GAAiB,UAAAC,QAAe;AACzE,UAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAwC;AAAA,MACxE,WAAW;AAAA,IAAA,CACZ,GAEKC,IACJL,MAAoBM,EAAiB,kBAAkBR,IAAgBC,GAEnEQ,IACJP,MAAoBM,EAAiB,kBAChCV,EAAwC,aACxCA,EAAwC;AAE/C,6BACGY,GAAA,EAAsC,WAAAN,GAAsB,KAAKC,GAChE,UAAA,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAOb;AAAA,QACP,UAAAQ;AAAA,QACA,OAAAE;AAAA,QACA,UAAAN;AAAA,QACA,QAAQL,EAAO;AAAA,QACf,OAAOA,EAAO;AAAA,QACd,aAAaA,EAAO;AAAA,QACpB,gBACEI,MAAoBM,EAAiB,kBAAkB,WAAW;AAAA,MAAA;AAAA,IAAA,EAEtE,GAZwBV,EAAO,IAajC;AAAA,EAAA;AAGN;"}

package/dist/features/circle-games/leaderboard/comps/navigation-button/navigation-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-button.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/navigation-button/navigation-button.tsx"],"sourcesContent":["import type { INavigationButtonProps } from './navigation-button-types';\n\nimport React, { memo } from 'react';\n\nimport CrossIcon from '../../../../../assets/line-icons/icons/cross';\nimport LeftIcon from '../../../../../assets/line-icons/icons/left';\nimport RightIcon from '../../../../../assets/line-icons/icons/right';\nimport { ArcButton } from '../../../../ui/arc-button/arc-button';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { LEADERBOARD_ANALYTICS_EVENTS } from '../../leaderboard-analytics-events';\nimport * as Styled from './navigation-button-styled';\n\nexport const NavigationButton: React.FC<INavigationButtonProps> = memo(\n  ({ labels, onLeftClick, onRightClick, currIndex, onClose, disableSwipe }) => {\n    return (\n      <Styled.NavigationActionWrapper>\n        <Styled.ExtendedIconButton align=\"left\">\n          <IconButton\n            Icon={LeftIcon}\n            size=\"small\"\n            onClick={onLeftClick}\n            renderAs=\"secondary\"\n            analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.PREV_ON_LEADERBOARD}\n            disabled={disableSwipe || currIndex === 0}\n          />\n        </Styled.ExtendedIconButton>\n        {/* Right Navigation IconButton */}\n        <Styled.ExtendedIconButton align=\"right\">\n          <IconButton\n            Icon={RightIcon}\n            size=\"small\"\n            onClick={onRightClick}\n            renderAs=\"secondary\"\n            analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.NEXT_ON_LEADERBOARD}\n            disabled={disableSwipe || currIndex === labels.length - 1}\n          />\n        </Styled.ExtendedIconButton>\n\n        <ArcButton\n          renderAs=\"primary\"\n          onClick={onClose}\n          analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.LEADERBOARD_CLOSED}\n        >\n          {/* Left Navigation IconButton */}\n          <CrossIcon color=\"WHITE\" />\n        </ArcButton>\n      </Styled.NavigationActionWrapper>\n    );\n  },\n);\n"],"names":["NavigationButton","memo","labels","onLeftClick","onRightClick","currIndex","onClose","disableSwipe","jsxs","Styled.NavigationActionWrapper","jsx","Styled.ExtendedIconButton","IconButton","LeftIcon","LEADERBOARD_ANALYTICS_EVENTS","RightIcon","ArcButton","CrossIcon"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAqDC;AAAA,EAChE,CAAC,EAAE,QAAAC,GAAQ,aAAAC,GAAa,cAAAC,GAAc,WAAAC,GAAW,SAAAC,GAAS,cAAAC,QAEtD,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAA0B,OAAM,QAC/B,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAMC;AAAA,QACN,MAAK;AAAA,QACL,SAASV;AAAA,QACT,UAAS;AAAA,QACT,gBAAgBW,EAA6B;AAAA,QAC7C,UAAUP,KAAgBF,MAAc;AAAA,MAAA;AAAA,IAAA,GAE5C;AAAA,IAEC,gBAAAK,EAAAC,GAAA,EAA0B,OAAM,SAC/B,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAMG;AAAA,QACN,MAAK;AAAA,QACL,SAASX;AAAA,QACT,UAAS;AAAA,QACT,gBAAgBU,EAA6B;AAAA,QAC7C,UAAUP,KAAgBF,MAAcH,EAAO,SAAS;AAAA,MAAA;AAAA,IAAA,GAE5D;AAAA,IAEA,gBAAAQ;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,SAASV;AAAA,QACT,gBAAgBQ,EAA6B;AAAA,QAG7C,UAAA,gBAAAJ,EAACO,GAAU,EAAA,OAAM,QAAQ,CAAA;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,EAAA,CAAA;AAGN;"}
+{"version":3,"file":"navigation-button.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/navigation-button/navigation-button.tsx"],"sourcesContent":["import type { INavigationButtonProps } from './navigation-button-types';\n\nimport React, { memo } from 'react';\n\nimport CrossIcon from '../../../../../assets/line-icons/icons/cross';\nimport LeftIcon from '../../../../../assets/line-icons/icons/left';\nimport RightIcon from '../../../../../assets/line-icons/icons/right';\nimport { ArcButton } from '../../../../ui/arc-button/arc-button';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { LEADERBOARD_ANALYTICS_EVENTS } from '../../leaderboard-analytics-events';\nimport * as Styled from './navigation-button-styled';\n\nexport const NavigationButton: React.FC<INavigationButtonProps> = memo(\n  ({ labels, onLeftClick, onRightClick, currIndex, onClose, disableSwipe }) => {\n    return (\n      <Styled.NavigationActionWrapper>\n        <Styled.ExtendedIconButton align=\"left\">\n          <IconButton\n            Icon={LeftIcon}\n            size=\"small\"\n            onClick={onLeftClick}\n            renderAs=\"secondary\"\n            analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.PREV_ON_LEADERBOARD}\n            disabled={disableSwipe || currIndex === 0}\n          />\n        </Styled.ExtendedIconButton>\n        {/* Right Navigation IconButton */}\n        <Styled.ExtendedIconButton align=\"right\">\n          <IconButton\n            Icon={RightIcon}\n            size=\"small\"\n            onClick={onRightClick}\n            renderAs=\"secondary\"\n            analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.NEXT_ON_LEADERBOARD}\n            disabled={disableSwipe || currIndex === labels.length - 1}\n          />\n        </Styled.ExtendedIconButton>\n\n        <ArcButton\n          renderAs=\"primary\"\n          onClick={onClose}\n          analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.LEADERBOARD_CLOSED}\n        >\n          {/* Left Navigation IconButton */}\n          <CrossIcon color=\"WHITE\" />\n        </ArcButton>\n      </Styled.NavigationActionWrapper>\n    );\n  },\n);\n"],"names":["NavigationButton","memo","labels","onLeftClick","onRightClick","currIndex","onClose","disableSwipe","jsxs","Styled.NavigationActionWrapper","jsx","Styled.ExtendedIconButton","IconButton","LeftIcon","LEADERBOARD_ANALYTICS_EVENTS","RightIcon","ArcButton","CrossIcon"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAqDC;AAAA,EAChE,CAAC,EAAE,QAAAC,GAAQ,aAAAC,GAAa,cAAAC,GAAc,WAAAC,GAAW,SAAAC,GAAS,cAAAC,QAEtD,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAA0B,OAAM,QAC/B,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAMC;AAAA,QACN,MAAK;AAAA,QACL,SAASV;AAAA,QACT,UAAS;AAAA,QACT,gBAAgBW,EAA6B;AAAA,QAC7C,UAAUP,KAAgBF,MAAc;AAAA,MAAA;AAAA,IAAA,GAE5C;AAAA,IAEC,gBAAAK,EAAAC,GAAA,EAA0B,OAAM,SAC/B,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAMG;AAAA,QACN,MAAK;AAAA,QACL,SAASX;AAAA,QACT,UAAS;AAAA,QACT,gBAAgBU,EAA6B;AAAA,QAC7C,UAAUP,KAAgBF,MAAcH,EAAO,SAAS;AAAA,MAAA;AAAA,IAAA,GAE5D;AAAA,IAEA,gBAAAQ;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,SAASV;AAAA,QACT,gBAAgBQ,EAA6B;AAAA,QAG7C,UAAA,gBAAAJ,EAACO,GAAU,EAAA,OAAM,QAAQ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC3B,GACF;AAGN;"}

package/dist/features/circle-games/leaderboard/comps/progress-item/progress-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-item.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/progress-item/progress-item.tsx"],"sourcesContent":["import type { ProgressItemProps } from './progress-item-types';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { memo } from 'react';\n\nimport * as Styled from './progress-item-styled';\n\nexport const ProgressItem: FC<PropsWithChildren<ProgressItemProps>> = memo(props => {\n  const { maxValue, value, isActive, children = null } = props;\n\n  return (\n    <Styled.ProgressWrapper>\n      <Styled.Progress value={(value * 100) / maxValue} isActive={isActive} />\n      {children}\n    </Styled.ProgressWrapper>\n  );\n});\n"],"names":["ProgressItem","memo","props","maxValue","value","isActive","children","jsxs","Styled.ProgressWrapper","jsx","Styled.Progress"],"mappings":";;;AAOa,MAAAA,IAAyDC,EAAK,CAASC,MAAA;AAClF,QAAM,EAAE,UAAAC,GAAU,OAAAC,GAAO,UAAAC,GAAU,UAAAC,IAAW,KAAS,IAAAJ;AAGrD,SAAA,gBAAAK,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAgB,OAAQN,IAAQ,MAAOD,GAAU,UAAAE,GAAoB;AAAA,IACrEC;AAAA,EACH,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"progress-item.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/progress-item/progress-item.tsx"],"sourcesContent":["import type { ProgressItemProps } from './progress-item-types';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { memo } from 'react';\n\nimport * as Styled from './progress-item-styled';\n\nexport const ProgressItem: FC<PropsWithChildren<ProgressItemProps>> = memo(props => {\n  const { maxValue, value, isActive, children = null } = props;\n\n  return (\n    <Styled.ProgressWrapper>\n      <Styled.Progress value={(value * 100) / maxValue} isActive={isActive} />\n      {children}\n    </Styled.ProgressWrapper>\n  );\n});\n"],"names":["ProgressItem","memo","props","maxValue","value","isActive","children","jsxs","Styled.ProgressWrapper","jsx","Styled.Progress"],"mappings":";;;AAOa,MAAAA,IAAyDC,EAAK,CAASC,MAAA;AAClF,QAAM,EAAE,UAAAC,GAAU,OAAAC,GAAO,UAAAC,GAAU,UAAAC,IAAW,SAASJ;AAGrD,SAAA,gBAAAK,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAgB,OAAQN,IAAQ,MAAOD,GAAU,UAAAE,GAAoB;AAAA,IACrEC;AAAA,EAAA,GACH;AAEJ,CAAC;"}

package/dist/features/circle-games/leaderboard/comps/progress-list-item/progress-list-item.js

@@ -2,7 +2,7 @@ import { jsxs as t, jsx as r, Fragment as f } from "react/jsx-runtime";
 import { memo as p } from "react";
 import { ReactComponent as b } from "../../../../../assets/illustrations/points-sum.svg.js";
 import I from "../../../../ui/avatar/avatar.js";
-import P from "../../../../ui/streak-icon/streak-icon.js";
+import { StreakIcon as P } from "../../../../ui/streak-icon/streak-icon.js";
 import i from "../../../../ui/text/text.js";
 import { ProgressItem as $ } from "../progress-item/progress-item.js";
 import { WithGrade as g } from "../with-grade/with-grade.js";

package/dist/features/circle-games/leaderboard/comps/progress-list-item/progress-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-list-item.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/progress-list-item/progress-list-item.tsx"],"sourcesContent":["import type { PlayerProgressListItemProps } from './progress-list-item-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { ReactComponent as PointsSumSvg } from '../../../../../assets/illustrations/points-sum.svg';\nimport Avatar from '../../../../ui/avatar/avatar';\nimport StreakIcon from '../../../../ui/streak-icon/streak-icon';\nimport Text from '../../../../ui/text/text';\nimport { ProgressItem } from '../progress-item/progress-item';\nimport { WithGrade } from '../with-grade/with-grade';\nimport * as Styled from './progress-list-item-styled';\n\nexport const PlayerProgressListItem: FC<PlayerProgressListItemProps> = memo(\n  ({\n    maxValue,\n    value,\n    index,\n    isActive,\n    avatar,\n    grade,\n    isTeacher = false,\n    isCuemathProfile = false,\n    displayText,\n    displayValueAs = 'default',\n  }) => {\n    return (\n      <Styled.FlatListElement>\n        {/* rank */}\n        <Styled.RankContainer>\n          <Text $renderAs=\"ab3\" $color=\"WHITE\">\n            {value ? index : ''}\n          </Text>\n        </Styled.RankContainer>\n\n        <Styled.DataContainer>\n          {/* progress */}\n          <ProgressItem maxValue={maxValue} value={value} isActive={isActive}>\n            {/* avatar */}\n            <Styled.AvatarContainer>\n              <Avatar avatar={avatar} size={24} />\n            </Styled.AvatarContainer>\n\n            {/* user info */}\n            <Styled.UserIdentity>\n              <Styled.LeaderboardUsername>\n                <WithGrade grade={grade} isTeacher={isTeacher} isPlusUser={isCuemathProfile}>\n                  <Text $renderAs={isActive ? 'ab2-bold' : 'ab2'} $color=\"WHITE\">\n                    {displayText}\n                  </Text>\n                </WithGrade>\n              </Styled.LeaderboardUsername>\n            </Styled.UserIdentity>\n          </ProgressItem>\n        </Styled.DataContainer>\n\n        {/* value */}\n        <Styled.ValueContainer showPointSymbol={displayValueAs === 'points'}>\n          {displayValueAs !== 'streak' && (\n            <>\n              <Text $renderAs={isActive ? 'ab3-bold' : 'ab3'} $color=\"WHITE\">\n                {value}\n              </Text>\n              {displayValueAs === 'points' && <PointsSumSvg width={20} height={20} />}\n            </>\n          )}\n          {displayValueAs === 'streak' && <StreakIcon value={value} />}\n        </Styled.ValueContainer>\n      </Styled.FlatListElement>\n    );\n  },\n);\n"],"names":["PlayerProgressListItem","memo","maxValue","value","index","isActive","avatar","grade","isTeacher","isCuemathProfile","displayText","displayValueAs","jsxs","Styled.FlatListElement","jsx","Styled.RankContainer","Text","Styled.DataContainer","ProgressItem","Styled.AvatarContainer","Avatar","Styled.UserIdentity","Styled.LeaderboardUsername","WithGrade","Styled.ValueContainer","Fragment","PointsSumSvg","StreakIcon"],"mappings":";;;;;;;;;AAaO,MAAMA,IAA0DC;AAAA,EACrE,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,kBAAAC,IAAmB;AAAA,IACnB,aAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,EAAA,MAGf,gBAAAC,EAACC,GAAA,EAEC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UAAAb,IAAQC,IAAQ,GACnB,CAAA,GACF;AAAA,IAEA,gBAAAU,EAACG,GAAA,EAEC,4BAACC,GAAa,EAAA,UAAAhB,GAAoB,OAAAC,GAAc,UAAAE,GAE9C,UAAA;AAAA,MAAC,gBAAAS,EAAAK,GAAA,EACC,UAAA,gBAAAL,EAACM,KAAO,QAAAd,GAAgB,MAAM,GAAI,CAAA,GACpC;AAAA,MAGA,gBAAAQ,EAACO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EACC,UAAC,gBAAAR,EAAAS,GAAA,EAAU,OAAAhB,GAAc,WAAAC,GAAsB,YAAYC,GACzD,UAAA,gBAAAK,EAACE,GAAK,EAAA,WAAWX,IAAW,aAAa,OAAO,QAAO,SACpD,UAAAK,EAAA,CACH,EACF,CAAA,EAAA,CACF,EACF,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,sBAGCc,GAAA,EAAsB,iBAAiBb,MAAmB,UACxD,UAAA;AAAA,MAAAA,MAAmB,YAEhB,gBAAAC,EAAAa,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAX,EAACE,KAAK,WAAWX,IAAW,aAAa,OAAO,QAAO,SACpD,UACHF,EAAA,CAAA;AAAA,QACCQ,MAAmB,YAAY,gBAAAG,EAACY,KAAa,OAAO,IAAI,QAAQ,IAAI;AAAA,MAAA,GACvE;AAAA,MAEDf,MAAmB,YAAa,gBAAAG,EAAAa,GAAA,EAAW,OAAAxB,EAAc,CAAA;AAAA,IAAA,GAC5D;AAAA,EACF,EAAA,CAAA;AAGN;"}
+{"version":3,"file":"progress-list-item.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/progress-list-item/progress-list-item.tsx"],"sourcesContent":["import type { PlayerProgressListItemProps } from './progress-list-item-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { ReactComponent as PointsSumSvg } from '../../../../../assets/illustrations/points-sum.svg';\nimport Avatar from '../../../../ui/avatar/avatar';\nimport StreakIcon from '../../../../ui/streak-icon/streak-icon';\nimport Text from '../../../../ui/text/text';\nimport { ProgressItem } from '../progress-item/progress-item';\nimport { WithGrade } from '../with-grade/with-grade';\nimport * as Styled from './progress-list-item-styled';\n\nexport const PlayerProgressListItem: FC<PlayerProgressListItemProps> = memo(\n  ({\n    maxValue,\n    value,\n    index,\n    isActive,\n    avatar,\n    grade,\n    isTeacher = false,\n    isCuemathProfile = false,\n    displayText,\n    displayValueAs = 'default',\n  }) => {\n    return (\n      <Styled.FlatListElement>\n        {/* rank */}\n        <Styled.RankContainer>\n          <Text $renderAs=\"ab3\" $color=\"WHITE\">\n            {value ? index : ''}\n          </Text>\n        </Styled.RankContainer>\n\n        <Styled.DataContainer>\n          {/* progress */}\n          <ProgressItem maxValue={maxValue} value={value} isActive={isActive}>\n            {/* avatar */}\n            <Styled.AvatarContainer>\n              <Avatar avatar={avatar} size={24} />\n            </Styled.AvatarContainer>\n\n            {/* user info */}\n            <Styled.UserIdentity>\n              <Styled.LeaderboardUsername>\n                <WithGrade grade={grade} isTeacher={isTeacher} isPlusUser={isCuemathProfile}>\n                  <Text $renderAs={isActive ? 'ab2-bold' : 'ab2'} $color=\"WHITE\">\n                    {displayText}\n                  </Text>\n                </WithGrade>\n              </Styled.LeaderboardUsername>\n            </Styled.UserIdentity>\n          </ProgressItem>\n        </Styled.DataContainer>\n\n        {/* value */}\n        <Styled.ValueContainer showPointSymbol={displayValueAs === 'points'}>\n          {displayValueAs !== 'streak' && (\n            <>\n              <Text $renderAs={isActive ? 'ab3-bold' : 'ab3'} $color=\"WHITE\">\n                {value}\n              </Text>\n              {displayValueAs === 'points' && <PointsSumSvg width={20} height={20} />}\n            </>\n          )}\n          {displayValueAs === 'streak' && <StreakIcon value={value} />}\n        </Styled.ValueContainer>\n      </Styled.FlatListElement>\n    );\n  },\n);\n"],"names":["PlayerProgressListItem","memo","maxValue","value","index","isActive","avatar","grade","isTeacher","isCuemathProfile","displayText","displayValueAs","jsxs","Styled.FlatListElement","jsx","Styled.RankContainer","Text","Styled.DataContainer","ProgressItem","Styled.AvatarContainer","Avatar","Styled.UserIdentity","Styled.LeaderboardUsername","WithGrade","Styled.ValueContainer","Fragment","PointsSumSvg","StreakIcon"],"mappings":";;;;;;;;;AAaO,MAAMA,IAA0DC;AAAA,EACrE,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,kBAAAC,IAAmB;AAAA,IACnB,aAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,EAAA,MAGf,gBAAAC,EAACC,GAAA,EAEC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UAAAb,IAAQC,IAAQ,GACnB,CAAA,GACF;AAAA,IAEA,gBAAAU,EAACG,GAAA,EAEC,4BAACC,GAAa,EAAA,UAAAhB,GAAoB,OAAAC,GAAc,UAAAE,GAE9C,UAAA;AAAA,MAAC,gBAAAS,EAAAK,GAAA,EACC,UAAA,gBAAAL,EAACM,KAAO,QAAAd,GAAgB,MAAM,GAAI,CAAA,GACpC;AAAA,MAGA,gBAAAQ,EAACO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EACC,UAAC,gBAAAR,EAAAS,GAAA,EAAU,OAAAhB,GAAc,WAAAC,GAAsB,YAAYC,GACzD,UAAA,gBAAAK,EAACE,GAAK,EAAA,WAAWX,IAAW,aAAa,OAAO,QAAO,SACpD,UAAAK,EACH,CAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,sBAGCc,GAAA,EAAsB,iBAAiBb,MAAmB,UACxD,UAAA;AAAA,MAAAA,MAAmB,YAEhB,gBAAAC,EAAAa,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAX,EAACE,KAAK,WAAWX,IAAW,aAAa,OAAO,QAAO,SACpD,UACHF,EAAA,CAAA;AAAA,QACCQ,MAAmB,YAAY,gBAAAG,EAACY,KAAa,OAAO,IAAI,QAAQ,GAAI,CAAA;AAAA,MAAA,GACvE;AAAA,MAEDf,MAAmB,YAAa,gBAAAG,EAAAa,GAAA,EAAW,OAAAxB,EAAc,CAAA;AAAA,IAAA,EAC5D,CAAA;AAAA,EAAA,GACF;AAGN;"}

package/dist/features/circle-games/leaderboard/comps/streak-reduction-infobar/streak-reduction-infobar.js.map

@@ -1 +1 @@
-{"version":3,"file":"streak-reduction-infobar.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/streak-reduction-infobar/streak-reduction-infobar.tsx"],"sourcesContent":["import type { IStreakReductionLeaderboard } from './streak-reduction-infobar-types';\n\nimport { useCallback, useState } from 'react';\n\nimport CrossIcon from '../../../../../assets/line-icons/icons/cross';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { InfoBar } from '../../../comps/info-bar/info-bar';\nimport { StreakReductionLocalStorageUtil } from '../../../utils/streak-reduction-localstorage-util';\nimport { STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP } from './streak-reduction-infobar-constants';\n\nexport const StreakReductionInfoBar = ({\n  startTimestampToday,\n  streakReduction,\n}: IStreakReductionLeaderboard) => {\n  const [showInfoBar, setShowInfoBar] = useState(\n    StreakReductionLocalStorageUtil.showStreakReduction(\n      STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP,\n      startTimestampToday,\n    ),\n  );\n\n  const hasStreakReduced = streakReduction > 0;\n\n  const onInfoBarClose = useCallback(() => {\n    StreakReductionLocalStorageUtil.markStreakReductionDismissed(\n      STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP,\n      startTimestampToday,\n    );\n    setShowInfoBar(false);\n  }, [startTimestampToday]);\n\n  if (!showInfoBar) {\n    return null;\n  }\n\n  return (\n    <InfoBar\n      children={\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n          <FlexView>\n            {hasStreakReduced ? (\n              <>\n                <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                  Keep building your streak by completing an activity each day.\n                </Text>\n                <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                  For each day missed, your streak reduces by 1.\n                </Text>\n              </>\n            ) : (\n              <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                Streak saved for the day! Come back tomorrow to keep increasing it.\n              </Text>\n            )}\n          </FlexView>\n\n          <CrossIcon cursor={'pointer'} color=\"WHITE\" onClick={onInfoBarClose} />\n        </FlexView>\n      }\n      hue={hasStreakReduced ? 'YELLOW' : 'GREEN'}\n    />\n  );\n};\n"],"names":["StreakReductionInfoBar","startTimestampToday","streakReduction","showInfoBar","setShowInfoBar","useState","StreakReductionLocalStorageUtil","STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP","hasStreakReduced","onInfoBarClose","useCallback","jsx","InfoBar","FlexView","jsxs","Fragment","Text","CrossIcon"],"mappings":";;;;;;;;AAWO,MAAMA,IAAyB,CAAC;AAAA,EACrC,qBAAAC;AAAA,EACA,iBAAAC;AACF,MAAmC;AAC3B,QAAA,CAACC,GAAaC,CAAc,IAAIC;AAAA,IACpCC,EAAgC;AAAA,MAC9BC;AAAA,MACAN;AAAA,IACF;AAAA,EAAA,GAGIO,IAAmBN,IAAkB,GAErCO,IAAiBC,EAAY,MAAM;AACP,IAAAJ,EAAA;AAAA,MAC9BC;AAAA,MACAN;AAAA,IAAA,GAEFG,EAAe,EAAK;AAAA,EAAA,GACnB,CAACH,CAAmB,CAAC;AAExB,SAAKE,IAKH,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGC,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAgB,iBAClE,UAAA;AAAA,QAAC,gBAAAF,EAAAE,GAAA,EACE,cAEG,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,iEAAA;AAAA,4BACCA,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,kDAAA;AAAA,QACF,EAAA,CAAA,sBAECA,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,iFAE1C,EAEJ,CAAA;AAAA,0BAECC,GAAU,EAAA,QAAQ,WAAW,OAAM,SAAQ,SAASR,GAAgB;AAAA,MAAA,GACvE;AAAA,MAEF,KAAKD,IAAmB,WAAW;AAAA,IAAA;AAAA,EAAA,IA3B9B;AA8BX;"}
+{"version":3,"file":"streak-reduction-infobar.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/streak-reduction-infobar/streak-reduction-infobar.tsx"],"sourcesContent":["import type { IStreakReductionLeaderboard } from './streak-reduction-infobar-types';\n\nimport { useCallback, useState } from 'react';\n\nimport CrossIcon from '../../../../../assets/line-icons/icons/cross';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { InfoBar } from '../../../comps/info-bar/info-bar';\nimport { StreakReductionLocalStorageUtil } from '../../../utils/streak-reduction-localstorage-util';\nimport { STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP } from './streak-reduction-infobar-constants';\n\nexport const StreakReductionInfoBar = ({\n  startTimestampToday,\n  streakReduction,\n}: IStreakReductionLeaderboard) => {\n  const [showInfoBar, setShowInfoBar] = useState(\n    StreakReductionLocalStorageUtil.showStreakReduction(\n      STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP,\n      startTimestampToday,\n    ),\n  );\n\n  const hasStreakReduced = streakReduction > 0;\n\n  const onInfoBarClose = useCallback(() => {\n    StreakReductionLocalStorageUtil.markStreakReductionDismissed(\n      STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP,\n      startTimestampToday,\n    );\n    setShowInfoBar(false);\n  }, [startTimestampToday]);\n\n  if (!showInfoBar) {\n    return null;\n  }\n\n  return (\n    <InfoBar\n      children={\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n          <FlexView>\n            {hasStreakReduced ? (\n              <>\n                <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                  Keep building your streak by completing an activity each day.\n                </Text>\n                <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                  For each day missed, your streak reduces by 1.\n                </Text>\n              </>\n            ) : (\n              <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                Streak saved for the day! Come back tomorrow to keep increasing it.\n              </Text>\n            )}\n          </FlexView>\n\n          <CrossIcon cursor={'pointer'} color=\"WHITE\" onClick={onInfoBarClose} />\n        </FlexView>\n      }\n      hue={hasStreakReduced ? 'YELLOW' : 'GREEN'}\n    />\n  );\n};\n"],"names":["StreakReductionInfoBar","startTimestampToday","streakReduction","showInfoBar","setShowInfoBar","useState","StreakReductionLocalStorageUtil","STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP","hasStreakReduced","onInfoBarClose","useCallback","jsx","InfoBar","FlexView","jsxs","Fragment","Text","CrossIcon"],"mappings":";;;;;;;;AAWO,MAAMA,IAAyB,CAAC;AAAA,EACrC,qBAAAC;AAAA,EACA,iBAAAC;AACF,MAAmC;AAC3B,QAAA,CAACC,GAAaC,CAAc,IAAIC;AAAA,IACpCC,EAAgC;AAAA,MAC9BC;AAAA,MACAN;AAAA,IAAA;AAAA,EAEJ,GAEMO,IAAmBN,IAAkB,GAErCO,IAAiBC,EAAY,MAAM;AACP,IAAAJ,EAAA;AAAA,MAC9BC;AAAA,MACAN;AAAA,IACF,GACAG,EAAe,EAAK;AAAA,EAAA,GACnB,CAACH,CAAmB,CAAC;AAExB,SAAKE,IAKH,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGC,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAgB,iBAClE,UAAA;AAAA,QAAC,gBAAAF,EAAAE,GAAA,EACE,cAEG,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,iEAAA;AAAA,4BACCA,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,iDAAA,CAAA;AAAA,QACF,EAAA,CAAA,sBAECA,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,iFAE1C,EAEJ,CAAA;AAAA,0BAECC,GAAU,EAAA,QAAQ,WAAW,OAAM,SAAQ,SAASR,EAAgB,CAAA;AAAA,MAAA,GACvE;AAAA,MAEF,KAAKD,IAAmB,WAAW;AAAA,IAAA;AAAA,EACrC,IA5BO;AA8BX;"}

package/dist/features/circle-games/leaderboard/comps/timer/timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"timer.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/timer/timer.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport { memo, useEffect, useState } from 'react';\n\ninterface TimerProps {\n  fromTimestamp: number;\n  endTimestamp: number;\n  timeRepresentation?: {\n    dayStr?: string;\n    hourStr?: string;\n  };\n}\n\n// Utility function to calculate remaining time\nconst calculateDuration = (endTimestamp: number, fromTimestamp: number) => {\n  const endDate = new Date(endTimestamp);\n  const currDate = new Date(fromTimestamp);\n\n  const diff = endDate.getTime() - currDate.getTime();\n\n  const days = Math.floor(diff / (1000 * 60 * 60 * 24));\n  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));\n  const seconds = Math.floor((diff % (1000 * 60)) / 1000);\n\n  return { days, hours, minutes, seconds };\n};\n\nconst getRemainingTimeInHMS = (fromTimestamp: number, endTimestamp: number) => {\n  const duration = calculateDuration(endTimestamp, fromTimestamp);\n\n  const days = duration.days;\n  const hours = duration.hours;\n  const minutes = duration.minutes;\n  const seconds = duration.seconds;\n\n  return { days, hours, minutes, seconds };\n};\n\nexport const Timer: FC<TimerProps> = memo(({ fromTimestamp, endTimestamp, timeRepresentation }) => {\n  const { dayStr = 'd', hourStr = 'h' } = timeRepresentation || {};\n  const [timeStr, setTimeStr] = useState('');\n\n  useEffect(() => {\n    const fTime = fromTimestamp >= endTimestamp ? endTimestamp : fromTimestamp;\n    const { days, hours, minutes, seconds } = getRemainingTimeInHMS(fTime, endTimestamp);\n\n    let timeFormat = '';\n\n    if (days >= 1) {\n      timeFormat = `${days} ${dayStr}`;\n    } else {\n      if (hours >= 1) {\n        timeFormat = `${hours} ${hourStr}`;\n      } else {\n        timeFormat = `${minutes < 10 ? `0${minutes}` : minutes} : ${\n          seconds < 10 ? `0${seconds}` : seconds\n        }`;\n      }\n    }\n\n    setTimeStr(`${timeFormat}`);\n  }, [dayStr, endTimestamp, hourStr, fromTimestamp]);\n\n  return <span>{timeStr}</span>;\n});\n"],"names":["calculateDuration","endTimestamp","fromTimestamp","endDate","currDate","diff","days","hours","minutes","seconds","getRemainingTimeInHMS","duration","Timer","memo","timeRepresentation","dayStr","hourStr","timeStr","setTimeStr","useState","useEffect","fTime","timeFormat","jsx"],"mappings":";;AAcA,MAAMA,IAAoB,CAACC,GAAsBC,MAA0B;AACnE,QAAAC,IAAU,IAAI,KAAKF,CAAY,GAC/BG,IAAW,IAAI,KAAKF,CAAa,GAEjCG,IAAOF,EAAQ,QAAQ,IAAIC,EAAS,QAAQ,GAE5CE,IAAO,KAAK,MAAMD,KAAQ,MAAO,KAAK,KAAK,GAAG,GAC9CE,IAAQ,KAAK,MAAOF,KAAQ,MAAO,KAAK,KAAK,OAAQ,MAAO,KAAK,GAAG,GACpEG,IAAU,KAAK,MAAOH,KAAQ,MAAO,KAAK,OAAQ,MAAO,GAAG,GAC5DI,IAAU,KAAK,MAAOJ,KAAQ,MAAO,MAAO,GAAI;AAEtD,SAAO,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,EAAQ;AACzC,GAEMC,IAAwB,CAACR,GAAuBD,MAAyB;AACvE,QAAAU,IAAWX,EAAkBC,GAAcC,CAAa,GAExDI,IAAOK,EAAS,MAChBJ,IAAQI,EAAS,OACjBH,IAAUG,EAAS,SACnBF,IAAUE,EAAS;AAEzB,SAAO,EAAE,MAAAL,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,EAAQ;AACzC,GAEaG,IAAwBC,EAAK,CAAC,EAAE,eAAAX,GAAe,cAAAD,GAAc,oBAAAa,QAAyB;AACjG,QAAM,EAAE,QAAAC,IAAS,KAAK,SAAAC,IAAU,IAAI,IAAIF,KAAsB,IACxD,CAACG,GAASC,CAAU,IAAIC,EAAS,EAAE;AAEzC,SAAAC,EAAU,MAAM;AACR,UAAAC,IAAQnB,KAAiBD,IAAeA,IAAeC,GACvD,EAAE,MAAAI,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,MAAYC,EAAsBW,GAAOpB,CAAY;AAEnF,QAAIqB,IAAa;AAEjB,IAAIhB,KAAQ,IACGgB,IAAA,GAAGhB,CAAI,IAAIS,CAAM,KAE1BR,KAAS,IACEe,IAAA,GAAGf,CAAK,IAAIS,CAAO,KAEhCM,IAAa,GAAGd,IAAU,KAAK,IAAIA,CAAO,KAAKA,CAAO,MACpDC,IAAU,KAAK,IAAIA,CAAO,KAAKA,CACjC,IAIOS,EAAA,GAAGI,CAAU,EAAE;AAAA,KACzB,CAACP,GAAQd,GAAce,GAASd,CAAa,CAAC,GAE1C,gBAAAqB,EAAC,UAAM,UAAQN,EAAA,CAAA;AACxB,CAAC;"}
+{"version":3,"file":"timer.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/timer/timer.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport { memo, useEffect, useState } from 'react';\n\ninterface TimerProps {\n  fromTimestamp: number;\n  endTimestamp: number;\n  timeRepresentation?: {\n    dayStr?: string;\n    hourStr?: string;\n  };\n}\n\n// Utility function to calculate remaining time\nconst calculateDuration = (endTimestamp: number, fromTimestamp: number) => {\n  const endDate = new Date(endTimestamp);\n  const currDate = new Date(fromTimestamp);\n\n  const diff = endDate.getTime() - currDate.getTime();\n\n  const days = Math.floor(diff / (1000 * 60 * 60 * 24));\n  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));\n  const seconds = Math.floor((diff % (1000 * 60)) / 1000);\n\n  return { days, hours, minutes, seconds };\n};\n\nconst getRemainingTimeInHMS = (fromTimestamp: number, endTimestamp: number) => {\n  const duration = calculateDuration(endTimestamp, fromTimestamp);\n\n  const days = duration.days;\n  const hours = duration.hours;\n  const minutes = duration.minutes;\n  const seconds = duration.seconds;\n\n  return { days, hours, minutes, seconds };\n};\n\nexport const Timer: FC<TimerProps> = memo(({ fromTimestamp, endTimestamp, timeRepresentation }) => {\n  const { dayStr = 'd', hourStr = 'h' } = timeRepresentation || {};\n  const [timeStr, setTimeStr] = useState('');\n\n  useEffect(() => {\n    const fTime = fromTimestamp >= endTimestamp ? endTimestamp : fromTimestamp;\n    const { days, hours, minutes, seconds } = getRemainingTimeInHMS(fTime, endTimestamp);\n\n    let timeFormat = '';\n\n    if (days >= 1) {\n      timeFormat = `${days} ${dayStr}`;\n    } else {\n      if (hours >= 1) {\n        timeFormat = `${hours} ${hourStr}`;\n      } else {\n        timeFormat = `${minutes < 10 ? `0${minutes}` : minutes} : ${\n          seconds < 10 ? `0${seconds}` : seconds\n        }`;\n      }\n    }\n\n    setTimeStr(`${timeFormat}`);\n  }, [dayStr, endTimestamp, hourStr, fromTimestamp]);\n\n  return <span>{timeStr}</span>;\n});\n"],"names":["calculateDuration","endTimestamp","fromTimestamp","endDate","currDate","diff","days","hours","minutes","seconds","getRemainingTimeInHMS","duration","Timer","memo","timeRepresentation","dayStr","hourStr","timeStr","setTimeStr","useState","useEffect","fTime","timeFormat","jsx"],"mappings":";;AAcA,MAAMA,IAAoB,CAACC,GAAsBC,MAA0B;AACnE,QAAAC,IAAU,IAAI,KAAKF,CAAY,GAC/BG,IAAW,IAAI,KAAKF,CAAa,GAEjCG,IAAOF,EAAQ,QAAQ,IAAIC,EAAS,QAAQ,GAE5CE,IAAO,KAAK,MAAMD,KAAQ,MAAO,KAAK,KAAK,GAAG,GAC9CE,IAAQ,KAAK,MAAOF,KAAQ,MAAO,KAAK,KAAK,OAAQ,MAAO,KAAK,GAAG,GACpEG,IAAU,KAAK,MAAOH,KAAQ,MAAO,KAAK,OAAQ,MAAO,GAAG,GAC5DI,IAAU,KAAK,MAAOJ,KAAQ,MAAO,MAAO,GAAI;AAEtD,SAAO,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,EAAQ;AACzC,GAEMC,IAAwB,CAACR,GAAuBD,MAAyB;AACvE,QAAAU,IAAWX,EAAkBC,GAAcC,CAAa,GAExDI,IAAOK,EAAS,MAChBJ,IAAQI,EAAS,OACjBH,IAAUG,EAAS,SACnBF,IAAUE,EAAS;AAEzB,SAAO,EAAE,MAAAL,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,EAAQ;AACzC,GAEaG,IAAwBC,EAAK,CAAC,EAAE,eAAAX,GAAe,cAAAD,GAAc,oBAAAa,QAAyB;AACjG,QAAM,EAAE,QAAAC,IAAS,KAAK,SAAAC,IAAU,IAAI,IAAIF,KAAsB,CAAC,GACzD,CAACG,GAASC,CAAU,IAAIC,EAAS,EAAE;AAEzC,SAAAC,EAAU,MAAM;AACR,UAAAC,IAAQnB,KAAiBD,IAAeA,IAAeC,GACvD,EAAE,MAAAI,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,MAAYC,EAAsBW,GAAOpB,CAAY;AAEnF,QAAIqB,IAAa;AAEjB,IAAIhB,KAAQ,IACGgB,IAAA,GAAGhB,CAAI,IAAIS,CAAM,KAE1BR,KAAS,IACEe,IAAA,GAAGf,CAAK,IAAIS,CAAO,KAEhCM,IAAa,GAAGd,IAAU,KAAK,IAAIA,CAAO,KAAKA,CAAO,MACpDC,IAAU,KAAK,IAAIA,CAAO,KAAKA,CACjC,IAIOS,EAAA,GAAGI,CAAU,EAAE;AAAA,KACzB,CAACP,GAAQd,GAAce,GAASd,CAAa,CAAC,GAE1C,gBAAAqB,EAAC,UAAM,UAAQN,EAAA,CAAA;AACxB,CAAC;"}

package/dist/features/circle-games/leaderboard/comps/with-grade/with-grade.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-grade.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/with-grade/with-grade.tsx"],"sourcesContent":["import type { WithGradeProps } from './with-grade-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport Flexview from '../../../../ui/layout/flex-view';\nimport { Superscript } from '../../../../ui/superscript/superscript';\n\nexport const WithGrade: FC<WithGradeProps> = memo(({ children, grade, isTeacher, isPlusUser }) => {\n  const getSuperscript = () => {\n    if (!grade) {\n      return '';\n    }\n\n    if (isTeacher) {\n      return 'Tutor';\n    }\n\n    if (grade !== '13') {\n      return `G${grade}`;\n    }\n\n    if (grade === '13') {\n      return <img src={ILLUSTRATIONS.GRADUATE_HAT} height={14} width={14} />;\n    }\n\n    return grade;\n  };\n\n  return (\n    <Flexview>\n      <Superscript\n        $renderAs=\"ab3\"\n        $color={isPlusUser ? 'GREY_1' : 'WHITE'}\n        supText={getSuperscript()}\n      >\n        {children}\n      </Superscript>\n    </Flexview>\n  );\n});\n"],"names":["WithGrade","memo","children","grade","isTeacher","isPlusUser","Flexview","jsx","Superscript","ILLUSTRATIONS"],"mappings":";;;;;AASa,MAAAA,IAAgCC,EAAK,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,YAAAC,0BAsB5EC,GACC,EAAA,UAAA,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,QAAQH,IAAa,WAAW;AAAA,IAChC,SAxBCF,IAIDC,IACK,UAGLD,MAAU,OACL,IAAIA,CAAK,KAGdA,MAAU,OACL,gBAAAI,EAAC,SAAI,KAAKE,EAAc,cAAc,QAAQ,IAAI,OAAO,GAAI,CAAA,IAG/DN,IAfE;AAAA,IAyBJ,UAAAD;AAAA,EAAA;AAEL,EAAA,CAAA,CAEH;"}
+{"version":3,"file":"with-grade.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/with-grade/with-grade.tsx"],"sourcesContent":["import type { WithGradeProps } from './with-grade-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport Flexview from '../../../../ui/layout/flex-view';\nimport { Superscript } from '../../../../ui/superscript/superscript';\n\nexport const WithGrade: FC<WithGradeProps> = memo(({ children, grade, isTeacher, isPlusUser }) => {\n  const getSuperscript = () => {\n    if (!grade) {\n      return '';\n    }\n\n    if (isTeacher) {\n      return 'Tutor';\n    }\n\n    if (grade !== '13') {\n      return `G${grade}`;\n    }\n\n    if (grade === '13') {\n      return <img src={ILLUSTRATIONS.GRADUATE_HAT} height={14} width={14} />;\n    }\n\n    return grade;\n  };\n\n  return (\n    <Flexview>\n      <Superscript\n        $renderAs=\"ab3\"\n        $color={isPlusUser ? 'GREY_1' : 'WHITE'}\n        supText={getSuperscript()}\n      >\n        {children}\n      </Superscript>\n    </Flexview>\n  );\n});\n"],"names":["WithGrade","memo","children","grade","isTeacher","isPlusUser","Flexview","jsx","Superscript","ILLUSTRATIONS"],"mappings":";;;;;AASa,MAAAA,IAAgCC,EAAK,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,YAAAC,0BAsB5EC,GACC,EAAA,UAAA,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,QAAQH,IAAa,WAAW;AAAA,IAChC,SAxBCF,IAIDC,IACK,UAGLD,MAAU,OACL,IAAIA,CAAK,KAGdA,MAAU,OACL,gBAAAI,EAAC,SAAI,KAAKE,EAAc,cAAc,QAAQ,IAAI,OAAO,IAAI,IAG/DN,IAfE;AAAA,IAyBJ,UAAAD;AAAA,EAAA;AAAA,GAEL,CAEH;"}