npm - @cuemath/leap - Versions diffs - 3.2.17-j1 → 3.2.17-mb - Mend

@cuemath/leap 3.2.17-j1 → 3.2.17-mb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (241) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-table-infinite-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-infinite-launcher-journey/use-table-infinite-launcher-journey.tsx"],"sourcesContent":["import type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { IUseInfiniteTableJourneyProps } from './use-table-infinite-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\nimport { useTheme } from 'styled-components';\n\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 { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { INFINITE_MODE_TEXT } from '../../comps/tables-card/constants';\nimport InfiniteButtonCard from '../../comps/tables-card/infinite-button/infinite-mode-launcher-button';\nimport { LESSON_CARD_INDEX, TABLE_CARD_INDEX } 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} from './constants';\nimport * as S from './use-table-infinite-launcher-journey-styled';\n\nconst tooltipItemStyle: React.CSSProperties = {\n top: 6,\n left: 8,\n cursor: 'pointer',\n};\n\nexport const useTableInfiniteLauncherJourney = ({\n carouselRefs,\n originalTableRef,\n onTableInfiniteModeClick,\n onJourneyComplete,\n}: IUseInfiniteTableJourneyProps) => {\n const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INFINTE_JOURNEY;\n\n const { device } = useTheme();\n const isMobile = device === EDeviceType.MOBILE;\n const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\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 endJourney(journeyId);\n // Only when User clicked on play\n onTableInfiniteModeClick();\n\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n step: Action.INFINITE_MODE,\n });\n // Reset original table card ref label\n originalTableRef?.current?.stopLabelAnimation();\n onJourneyComplete(journeyId);\n }, [\n endJourney,\n journeyId,\n onJourneyComplete,\n onTableInfiniteModeClick,\n originalTableRef,\n trackAnalytics,\n ]);\n\n const showToolTipAndNudge = useCallback(\n (dealyToShowToolTip: number, delayToShowNudge: number) => {\n nextCoachmark(journeyId, false, dealyToShowToolTip);\n\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n step: Action.INFINITE_MODE,\n });\n\n const showNudge = setTimeout(() => {\n clearTimeout(showNudge);\n\n originalTableRef.current?.startLabelAnimation('YELLOW_4');\n if (originalTableRef.current && originalTableRef.current.labelRef.current) {\n originalTableRef.current.labelRef.current.innerText = INFINITE_MODE_TEXT;\n }\n nextCoachmark(journeyId, true);\n }, delayToShowNudge);\n\n timerRefs.current.push(showNudge);\n },\n [journeyId, nextCoachmark, originalTableRef, trackAnalytics],\n );\n\n const goToTableLauncher = useCallback(() => {\n playButtonSound();\n carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n showToolTipAndNudge(GO_TO_TABLE_LAUNCHER_DURATION_MS, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n }, [carouselRefs, playButtonSound, showToolTipAndNudge]);\n\n const startJourney = useCallback(() => {\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 tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n // USER ON TABLE CARD\n if (carouselRefs.current?.currentIndex === TABLE_CARD_INDEX) {\n setJourney(journeyId, []);\n showToolTipAndNudge(0, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n } else {\n // USER ON LESSON CARD\n setJourney(journeyId, [\n {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <S.Indicator $isActive={false} />,\n indicator: {\n position: 'bottom',\n backgroundColor: 'YELLOW_4',\n width: 52,\n tooltipItem: (\n <FlexView\n $position=\"absolute\"\n $flexDirection=\"row\"\n style={tooltipItemStyle}\n onClick={goToTableLauncher}\n >\n <Text $renderAs={tooltipTextRenderAs}>NEW</Text>\n </FlexView>\n ),\n tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: '',\n nudgePointerY: 20,\n } as INudgeProps,\n elementToHighlight: <></>,\n },\n ]);\n carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\n nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n }\n\n // SHOW THE USER SELECT INFINITE MODE\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'YELLOW_4',\n width: 260,\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Challenge yourself in Infinity Mode! Break records and climb the leaderboard.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: tableCardDims.width / 2,\n tooltipYCoOrdinates: -(1 * tableCardDims.height) / 3,\n } as IArrowTooltipProps,\n });\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.infiniteButtonRef,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n nudgePointerX: 0,\n nudgePointerY: 10,\n } as INudgeProps,\n elementToHighlight: <InfiniteButtonCard onClick={handleEndJourney} />,\n });\n }, [\n addCoachmark,\n carouselRefs,\n goToTableLauncher,\n handleEndJourney,\n journeyId,\n nextCoachmark,\n originalTableRef,\n setJourney,\n showToolTipAndNudge,\n tooltipTextRenderAs,\n ]);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, [journeyId]);\n\n return {\n startJourney,\n };\n};\n"],"names":["tooltipItemStyle","useTableInfiniteLauncherJourney","carouselRefs","originalTableRef","onTableInfiniteModeClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","device","useTheme","tooltipTextRenderAs","EDeviceType","timerRefs","useRef","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","PLATFORM_EVENTS_STUDENT","Action","_a","showToolTipAndNudge","dealyToShowToolTip","delayToShowNudge","showNudge","INFINITE_MODE_TEXT","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","startJourney","paginationList","carouselNextBtnRef","_b","tablePaginationRef","_c","_d","tableCardDims","_e","_f","IndicatorType","jsx","S.Indicator","FlexView","Text","Fragment","_g","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","InfiniteButtonCard","useEffect","timer"],"mappings":"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"}
1	+ {"version":3,"file":"use-table-infinite-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-infinite-launcher-journey/use-table-infinite-launcher-journey.tsx"],"sourcesContent":["import type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { IUseInfiniteTableJourneyProps } from './use-table-infinite-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\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 { 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 { INFINITE_MODE_TEXT } from '../../comps/tables-card/constants';\nimport InfiniteButtonCard from '../../comps/tables-card/infinite-button/infinite-mode-launcher-button';\nimport { LESSON_CARD_INDEX, TABLE_CARD_INDEX } 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} from './constants';\nimport * as S from './use-table-infinite-launcher-journey-styled';\n\nconst tooltipItemStyle: React.CSSProperties = {\n top: 6,\n left: 8,\n cursor: 'pointer',\n};\n\nexport const useTableInfiniteLauncherJourney = ({\n carouselRefs,\n originalTableRef,\n onTableInfiniteModeClick,\n onJourneyComplete,\n}: IUseInfiniteTableJourneyProps) => {\n const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INFINTE_JOURNEY;\n\n const { device } = getTheme();\n const isMobile = device === 'mobile';\n const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\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 endJourney(journeyId);\n // Only when User clicked on play\n onTableInfiniteModeClick();\n\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n step: Action.INFINITE_MODE,\n });\n // Reset original table card ref label\n originalTableRef?.current?.stopLabelAnimation();\n onJourneyComplete(journeyId);\n }, [\n endJourney,\n journeyId,\n onJourneyComplete,\n onTableInfiniteModeClick,\n originalTableRef,\n trackAnalytics,\n ]);\n\n const showToolTipAndNudge = useCallback(\n (dealyToShowToolTip: number, delayToShowNudge: number) => {\n nextCoachmark(journeyId, false, dealyToShowToolTip);\n\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n step: Action.INFINITE_MODE,\n });\n\n const showNudge = setTimeout(() => {\n clearTimeout(showNudge);\n\n originalTableRef.current?.startLabelAnimation('YELLOW_4');\n if (originalTableRef.current && originalTableRef.current.labelRef.current) {\n originalTableRef.current.labelRef.current.innerText = INFINITE_MODE_TEXT;\n }\n nextCoachmark(journeyId, true);\n }, delayToShowNudge);\n\n timerRefs.current.push(showNudge);\n },\n [journeyId, nextCoachmark, originalTableRef, trackAnalytics],\n );\n\n const goToTableLauncher = useCallback(() => {\n playButtonSound();\n carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n showToolTipAndNudge(GO_TO_TABLE_LAUNCHER_DURATION_MS, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n }, [carouselRefs, playButtonSound, showToolTipAndNudge]);\n\n const startJourney = useCallback(() => {\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 tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n // USER ON TABLE CARD\n if (carouselRefs.current?.currentIndex === TABLE_CARD_INDEX) {\n setJourney(journeyId, []);\n showToolTipAndNudge(0, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n } else {\n // USER ON LESSON CARD\n setJourney(journeyId, [\n {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <S.Indicator $isActive={false} />,\n indicator: {\n position: 'bottom',\n backgroundColor: 'YELLOW_4',\n width: 52,\n tooltipItem: (\n <FlexView\n $position=\"absolute\"\n $flexDirection=\"row\"\n style={tooltipItemStyle}\n onClick={goToTableLauncher}\n >\n <Text $renderAs={tooltipTextRenderAs}>NEW</Text>\n </FlexView>\n ),\n tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: '',\n nudgePointerY: 20,\n } as INudgeProps,\n elementToHighlight: <></>,\n },\n ]);\n carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\n nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n }\n\n // SHOW THE USER SELECT INFINITE MODE\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'YELLOW_4',\n width: 260,\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Challenge yourself in Infinity Mode! Break records and climb the leaderboard.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: tableCardDims.width / 2,\n tooltipYCoOrdinates: -(1 * tableCardDims.height) / 3,\n } as IArrowTooltipProps,\n });\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.infiniteButtonRef,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n nudgePointerX: 0,\n nudgePointerY: 10,\n } as INudgeProps,\n elementToHighlight: <InfiniteButtonCard onClick={handleEndJourney} />,\n });\n }, [\n addCoachmark,\n carouselRefs,\n goToTableLauncher,\n handleEndJourney,\n journeyId,\n nextCoachmark,\n originalTableRef,\n setJourney,\n showToolTipAndNudge,\n tooltipTextRenderAs,\n ]);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, [journeyId]);\n\n return {\n startJourney,\n };\n};\n"],"names":["tooltipItemStyle","useTableInfiniteLauncherJourney","carouselRefs","originalTableRef","onTableInfiniteModeClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","device","getTheme","tooltipTextRenderAs","timerRefs","useRef","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","PLATFORM_EVENTS_STUDENT","Action","_a","showToolTipAndNudge","dealyToShowToolTip","delayToShowNudge","showNudge","INFINITE_MODE_TEXT","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","startJourney","paginationList","carouselNextBtnRef","_b","tablePaginationRef","_c","_d","tableCardDims","_e","_f","IndicatorType","jsx","S.Indicator","FlexView","Text","Fragment","_g","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","InfiniteButtonCard","useEffect","timer"],"mappings":"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"}

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

@@ -1,30 +1,29 @@
 import { jsx as r, Fragment as S } from "react/jsx-runtime";
 import { useRef as w, useCallback as A, useEffect as z } from "react";
-import { useTheme as Q } from "styled-components";
-import tt from "../../../../../assets/line-icons/icons/carat-right.js";
+import Q from "../../../../../assets/line-icons/icons/carat-right.js";
 import { PLATFORM_EVENTS_STUDENT as F } from "../../../../analytics-events/platform-events-student.js";
-import { JOURNEY_ID_STUDENT as et } from "../../../../journey/journey-id/journey-id-student.js";
-import { IndicatorType as m } from "../../../../journey/use-journey/constants.js";
-import { useJourney as rt } from "../../../../journey/use-journey/use-journey.js";
-import nt from "../../../../ui/buttons/icon-button/icon-button.js";
-import { useUIContext as ot } from "../../../../ui/context/context.js";
+import { JOURNEY_ID_STUDENT as tt } from "../../../../journey/journey-id/journey-id-student.js";
+import { IndicatorType as l } from "../../../../journey/use-journey/constants.js";
+import { useJourney as et } from "../../../../journey/use-journey/use-journey.js";
+import rt from "../../../../ui/buttons/icon-button/icon-button.js";
+import { useUIContext as nt } from "../../../../ui/context/context.js";
 import P from "../../../../ui/layout/flex-view.js";
 import E from "../../../../ui/text/text.js";
-import { EDeviceType as it } from "../../../../ui/theme/constants.js";
+import { getTheme as ot } from "../../../../ui/theme/get-theme.js";
 import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as V } from "../../../enum/circle-onboarding-steps.js";
-import { useCircleSounds as ct } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { useCircleSounds as it } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
 import { TablesCard as X } from "../../comps/tables-card/tables-card.js";
-import { GAME_LAUNCHER_ANALYTICS_EVENTS as dt } from "../../game-launcher-analytics-events.js";
-import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as st, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as ut, START_ANIMATING_CLONED_ELEM as v, TABLE_CARD_INDEX as J, GO_TO_TABLE_LAUNCHER_DURATION_MS as mt, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as lt, PUZZLE_CARD_INDEX as at, SHOW_INITIAL_COACHMARK_AFTER_MS as K, LESSON_CARD_INDEX as Et, SHOW_INITIAL_TOOLTIP_AFTER_MS as ht } from "./constants.js";
-import { Indicator as pt } from "./use-table-launcher-journey-styled.js";
-const Yt = ({
+import { GAME_LAUNCHER_ANALYTICS_EVENTS as ct } from "../../game-launcher-analytics-events.js";
+import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as dt, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as st, START_ANIMATING_CLONED_ELEM as J, TABLE_CARD_INDEX as v, GO_TO_TABLE_LAUNCHER_DURATION_MS as ut, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as lt, PUZZLE_CARD_INDEX as mt, SHOW_INITIAL_COACHMARK_AFTER_MS as K, LESSON_CARD_INDEX as at, SHOW_INITIAL_TOOLTIP_AFTER_MS as Et } from "./constants.js";
+import { Indicator as ht } from "./use-table-launcher-journey-styled.js";
+const bt = ({
   carouselRefs: s,
   originalTableRef: t,
   onTableSegmentClick: H,
   onJourneyComplete: y,
   onNextJourney: D
 }) => {
-  const e = et.CIRCLE_TABLES_INTRO_JOURNEY, { device: j } = Q(), l = j === it.MOBILE, h = l ? "ab3-bold" : "ab2-bold", L = w(null), p = w([]), { playButtonSound: W } = ct(), { nextCoachmark: c, setJourney: N, addCoachmark: a, endJourney: R } = rt(), { onEvent: I } = ot(), O = A(
+  const e = tt.CIRCLE_TABLES_INTRO_JOURNEY, { device: j } = ot(), m = j === "mobile", h = m ? "ab3-bold" : "ab2-bold", L = w(null), p = w([]), { playButtonSound: W } = it(), { nextCoachmark: c, setJourney: N, addCoachmark: a, endJourney: R } = et(), { onEvent: I } = nt(), O = A(
     (n) => {
       var d, o;
       R(e), n && H(n), I(F.ONBOARDING_STEP_COMPLETED, {
@@ -41,7 +40,7 @@ const Yt = ({
     ]
   ), b = A(() => {
     O(), D();
-  }, [O, D]), B = A(
+  }, [O, D]), Y = A(
     (n, d) => {
       var _, T, g;
       if (!((_ = t.current) != null && _.segmentedCardWrapperRef.current) || !((T = t.current) != null && T.labelRef.current))
@@ -49,7 +48,7 @@ const Yt = ({
       const o = t.current.labelRef.current.getBoundingClientRect(), i = (g = t.current) == null ? void 0 : g.segmentedCardWrapperRef.current.getBoundingClientRect();
       a(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
-        type: m.TOOLTIP,
+        type: l.TOOLTIP,
         elementToHighlight: /* @__PURE__ */ r(
           X,
           {
@@ -71,26 +70,26 @@ const Yt = ({
         }
       }), a(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
-        type: m.NUDGE,
+        type: l.NUDGE,
         indicator: {
           nudge: "click",
-          content: !l && /* @__PURE__ */ r(E, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
+          content: !m && /* @__PURE__ */ r(E, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
           nudgePointerX: i.width / 2 + 50,
           nudgePointerY: i.height * 0.4
         },
         elementToHighlight: /* @__PURE__ */ r(S, {})
-      }), c(e, !1, st), c(e, !0, ut);
+      }), c(e, !1, dt), c(e, !0, st);
       const u = setTimeout(() => {
         var C;
         clearTimeout(u), (C = L.current) == null || C.startLabelAnimation("YELLOW_4");
-      }, v);
+      }, J);
       p.current.push(u);
     },
     [
       a,
       b,
       O,
-      l,
+      m,
       e,
       c,
       t,
@@ -98,7 +97,7 @@ const Yt = ({
     ]
   ), f = A(() => {
     var o;
-    W(), (o = s.current) == null || o.goToIndex(J), c(e, !1, mt), I(F.ONBOARDING_STEP_VIEWED, {
+    W(), (o = s.current) == null || o.goToIndex(v), c(e, !1, ut), I(F.ONBOARDING_STEP_VIEWED, {
       step: V.TABLES
     });
     const n = setTimeout(() => {
@@ -109,20 +108,20 @@ const Yt = ({
     const d = setTimeout(() => {
       var i;
       clearTimeout(d), (i = L.current) == null || i.startLabelAnimation("YELLOW_4");
-    }, v);
+    }, J);
     p.current.push(d);
   }, [s, e, c, t, W, I]), Z = A(
     (n, d = !1) => {
-      var g, C, Y, k, U, G, M, $, x;
-      const o = (g = s.current) == null ? void 0 : g.indicatorRefs, i = (C = s.current) == null ? void 0 : C.nextBtnRef, u = o == null ? void 0 : o[J];
-      if (!((Y = t.current) != null && Y.segmentedCardWrapperRef.current) || !((k = t.current) != null && k.labelRef.current) || !o || !(i != null && i.current) || !u || !u.current)
+      var g, C, k, B, U, G, M, $, x;
+      const o = (g = s.current) == null ? void 0 : g.indicatorRefs, i = (C = s.current) == null ? void 0 : C.nextBtnRef, u = o == null ? void 0 : o[v];
+      if (!((k = t.current) != null && k.segmentedCardWrapperRef.current) || !((B = t.current) != null && B.labelRef.current) || !o || !(i != null && i.current) || !u || !u.current)
         return;
       const _ = (U = t.current) == null ? void 0 : U.labelRef.current.getBoundingClientRect(), T = (G = t.current) == null ? void 0 : G.segmentedCardWrapperRef.current.getBoundingClientRect();
       d ? (N(e, [
         {
           originalElementToHighlightRef: u,
-          type: m.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ r(pt, { $isActive: !1 }),
+          type: l.TOOLTIP,
+          elementToHighlight: /* @__PURE__ */ r(ht, { $isActive: !1 }),
           indicator: {
             position: "bottom",
             backgroundColor: "YELLOW_4",
@@ -143,7 +142,7 @@ const Yt = ({
         },
         {
           originalElementToHighlightRef: u,
-          type: m.NUDGE,
+          type: l.NUDGE,
           indicator: {
             nudge: "click",
             content: "",
@@ -151,29 +150,29 @@ const Yt = ({
           },
           elementToHighlight: /* @__PURE__ */ r(S, {})
         }
-      ]), (x = s.current) == null || x.goToIndex(Et), c(e, !1, K), c(e, !0, ht)) : (N(e, [
+      ]), (x = s.current) == null || x.goToIndex(at), c(e, !1, K), c(e, !0, Et)) : (N(e, [
         {
           originalElementToHighlightRef: (M = s.current) == null ? void 0 : M.nextBtnRef,
-          type: m.NUDGE,
+          type: l.NUDGE,
           indicator: {
             nudge: "click",
-            content: !l && /* @__PURE__ */ r(E, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
+            content: !m && /* @__PURE__ */ r(E, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
             nudgePointerX: 0,
             nudgePointerY: 0
           },
           elementToHighlight: /* @__PURE__ */ r(
-            nt,
+            rt,
             {
               renderAs: "secondary",
-              Icon: tt,
+              Icon: Q,
               onClick: f,
-              analyticsLabel: dt.JOURNEY_NEXT_ACTIVITY
+              analyticsLabel: ct.JOURNEY_NEXT_ACTIVITY
             }
           )
         }
-      ]), ($ = s.current) == null || $.goToIndex(at), c(e, !1, K)), a(e, {
+      ]), ($ = s.current) == null || $.goToIndex(mt), c(e, !1, K)), a(e, {
         originalElementToHighlightRef: t.current.labelRef,
-        type: m.TOOLTIP,
+        type: l.TOOLTIP,
         elementToHighlight: /* @__PURE__ */ r(S, {}),
         indicator: {
           position: "top",
@@ -185,10 +184,10 @@ const Yt = ({
         }
       }), a(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
-        type: m.NUDGE,
+        type: l.NUDGE,
         indicator: {
           nudge: "click",
-          content: !l && /* @__PURE__ */ r(E, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
+          content: !m && /* @__PURE__ */ r(E, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
           nudgePointerX: T.width / 2 + 50,
           nudgePointerY: T.height / 2
         },
@@ -200,7 +199,7 @@ const Yt = ({
             data: n.data,
             onPress: () => {
             },
-            onPressTableSegment: (q) => B(n, q)
+            onPressTableSegment: (q) => Y(n, q)
           }
         )
       });
@@ -209,8 +208,8 @@ const Yt = ({
       a,
       s,
       f,
-      B,
-      l,
+      Y,
+      m,
       e,
       c,
       t,
@@ -225,6 +224,6 @@ const Yt = ({
   };
 };
 export {
-  Yt as useTableLauncherJourney
+  bt as useTableLauncherJourney
 };
 //# sourceMappingURL=use-table-launcher-journey.js.map

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

	@@ -1 +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';\nimport { useTheme } from 'styled-components';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n LESSON_CARD_INDEX,\n PUZZLE_CARD_INDEX,\n SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n TABLE_CARD_INDEX,\n} from './constants';\nimport {\n GO_TO_TABLE_LAUNCHER_DURATION_MS,\n SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n SHOW_INITIAL_COACHMARK_AFTER_MS,\n SHOW_INITIAL_TOOLTIP_AFTER_MS,\n START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n carouselRefs,\n originalTableRef,\n onTableSegmentClick,\n onJourneyComplete,\n onNextJourney,\n}: IUseTableJourneyProps) => {\n const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n\n const { device } = useTheme();\n const isMobile = device === EDeviceType.MOBILE;\n const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\n\n const highlightedTableRef = useRef<ITableCardRef>(null);\n\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, addCoachmark, endJourney } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const handleEndJourney = useCallback(\n (tableDetails?: ITableDetails) => {\n endJourney(journeyId);\n // Only when User clicked on play\n if (tableDetails) {\n onTableSegmentClick(tableDetails);\n }\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n step: Action.TABLES,\n });\n\n // Reset original table card ref label\n originalTableRef?.current?.setLabelVisiblity(true);\n originalTableRef?.current?.stopLabelAnimation();\n onJourneyComplete(journeyId);\n },\n [\n endJourney,\n journeyId,\n onJourneyComplete,\n onTableSegmentClick,\n originalTableRef,\n trackAnalytics,\n ],\n );\n\n const handleContinueJourney = useCallback(() => {\n handleEndJourney();\n onNextJourney();\n }, [handleEndJourney, onNextJourney]);\n\n const handleTableSegmentClick = useCallback(\n (launcherData: ITables, tableData: ITableInfo) => {\n if (\n !originalTableRef.current?.segmentedCardWrapperRef.current \|\|\n !originalTableRef.current?.labelRef.current\n ) {\n return;\n }\n\n const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n const tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n type: IndicatorType.TOOLTIP,\n elementToHighlight: (\n <TablesCard\n ref={highlightedTableRef}\n defaultTable={tableData}\n label={launcherData.label}\n data={launcherData.data}\n onPress={handleEndJourney}\n onGoBackFromTableLevel={handleContinueJourney}\n />\n ),\n indicator: {\n position: 'top',\n backgroundColor: 'YELLOW_4',\n width: 236,\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Each table has 3 levels—clear them and earn 3 stars!\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: segmentedCardDims.width / 2,\n tooltipYCoOrdinates: 45,\n } as IArrowTooltipProps,\n });\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Pick a level\n </Text>\n ),\n nudgePointerX: tableCardDims.width / 2 + 50,\n nudgePointerY: tableCardDims.height * 0.4,\n } as INudgeProps,\n elementToHighlight: <></>,\n });\n\n nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n const startAnimationOnLabelAgain = setTimeout(() => {\n clearTimeout(startAnimationOnLabelAgain);\n highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n }, START_ANIMATING_CLONED_ELEM);\n\n timerRefs.current.push(startAnimationOnLabelAgain);\n },\n [\n addCoachmark,\n handleContinueJourney,\n handleEndJourney,\n isMobile,\n journeyId,\n nextCoachmark,\n originalTableRef,\n tooltipTextRenderAs,\n ],\n );\n\n const goToTableLauncher = useCallback(() => {\n playButtonSound();\n carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n step: Action.TABLES,\n });\n\n const showNudge = setTimeout(() => {\n clearTimeout(showNudge);\n originalTableRef.current?.setLabelVisiblity(false);\n nextCoachmark(journeyId, true);\n }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n timerRefs.current.push(showNudge);\n\n const animateLabel = setTimeout(() => {\n clearTimeout(animateLabel);\n highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n }, START_ANIMATING_CLONED_ELEM);\n\n timerRefs.current.push(animateLabel);\n }, [carouselRefs, journeyId, nextCoachmark, originalTableRef, playButtonSound, trackAnalytics]);\n\n const startJourney = useCallback(\n (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n const paginationList = carouselRefs.current?.indicatorRefs;\n const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n if (\n !originalTableRef.current?.segmentedCardWrapperRef.current \|\|\n !originalTableRef.current?.labelRef.current \|\|\n !paginationList \|\|\n !carouselNextBtnRef?.current \|\|\n !tablePaginationRef \|\|\n !tablePaginationRef.current\n ) {\n return;\n }\n\n const labelDims = originalTableRef.current?.labelRef.current.getBoundingClientRect();\n const tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n // TAKE THE USER TO THE TABLE CARD\n if (!isTutorialOnboardingDone) {\n setJourney(journeyId, [\n {\n originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to proceed\n </Text>\n ),\n nudgePointerX: 0,\n nudgePointerY: 0,\n } as INudgeProps,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={goToTableLauncher}\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\n },\n ]);\n carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n } else {\n setJourney(journeyId, [\n {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <S.Indicator $isActive={false} />,\n indicator: {\n position: 'bottom',\n backgroundColor: 'YELLOW_4',\n width: 52,\n tooltipItem: (\n <FlexView\n $position=\"absolute\"\n $flexDirection=\"row\"\n style={{ top: 6, left: 8, cursor: 'pointer' }}\n onClick={goToTableLauncher}\n >\n <Text $renderAs={tooltipTextRenderAs}>NEW</Text>\n </FlexView>\n ),\n tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: '',\n nudgePointerY: 20,\n } as INudgeProps,\n elementToHighlight: <></>,\n },\n ]);\n carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\n nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n }\n\n // SHOW THE USER SELECT A TABLE\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.labelRef,\n\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'YELLOW_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Get faster at multiplication! Practice everyday and become a Tables champ.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: labelDims.width / 2,\n tooltipYCoOrdinates: labelDims.height + 10,\n } as IArrowTooltipProps,\n });\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n {'Pick a table to start'}\n </Text>\n ),\n nudgePointerX: tableCardDims.width / 2 + 50,\n nudgePointerY: tableCardDims.height / 2,\n } as INudgeProps,\n elementToHighlight: (\n <TablesCard\n ref={highlightedTableRef}\n label={tablesData.label}\n data={tablesData.data}\n onPress={() => {}}\n onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n />\n ),\n });\n },\n [\n addCoachmark,\n carouselRefs,\n goToTableLauncher,\n handleTableSegmentClick,\n isMobile,\n journeyId,\n nextCoachmark,\n originalTableRef,\n setJourney,\n tooltipTextRenderAs,\n ],\n );\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, [journeyId]);\n\n return {\n startJourney,\n };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","originalTableRef","onTableSegmentClick","onJourneyComplete","onNextJourney","journeyId","JOURNEY_ID_STUDENT","device","useTheme","isMobile","EDeviceType","tooltipTextRenderAs","highlightedTableRef","useRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleContinueJourney","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","_f","S.Indicator","_i","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_g","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_h","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":"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"}
1	+ {"version":3,"file":"use-table-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles /\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { ITableCardRef, ITableDetails } from '../../comps/tables-card/tables-card-types';\nimport type {\n ITableInfo,\n ITables,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseTableJourneyProps } from './use-table-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { getTheme } from '../../../../ui/theme/get-theme';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n LESSON_CARD_INDEX,\n PUZZLE_CARD_INDEX,\n SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n TABLE_CARD_INDEX,\n} from './constants';\nimport {\n GO_TO_TABLE_LAUNCHER_DURATION_MS,\n SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n SHOW_INITIAL_COACHMARK_AFTER_MS,\n SHOW_INITIAL_TOOLTIP_AFTER_MS,\n START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n carouselRefs,\n originalTableRef,\n onTableSegmentClick,\n onJourneyComplete,\n onNextJourney,\n}: IUseTableJourneyProps) => {\n const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n\n const { device } = getTheme();\n const isMobile = device === 'mobile';\n const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\n\n const highlightedTableRef = useRef<ITableCardRef>(null);\n\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, addCoachmark, endJourney } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const handleEndJourney = useCallback(\n (tableDetails?: ITableDetails) => {\n endJourney(journeyId);\n // Only when User clicked on play\n if (tableDetails) {\n onTableSegmentClick(tableDetails);\n }\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n step: Action.TABLES,\n });\n\n // Reset original table card ref label\n originalTableRef?.current?.setLabelVisiblity(true);\n originalTableRef?.current?.stopLabelAnimation();\n onJourneyComplete(journeyId);\n },\n [\n endJourney,\n journeyId,\n onJourneyComplete,\n onTableSegmentClick,\n originalTableRef,\n trackAnalytics,\n ],\n );\n\n const handleContinueJourney = useCallback(() => {\n handleEndJourney();\n onNextJourney();\n }, [handleEndJourney, onNextJourney]);\n\n const handleTableSegmentClick = useCallback(\n (launcherData: ITables, tableData: ITableInfo) => {\n if (\n !originalTableRef.current?.segmentedCardWrapperRef.current \|\|\n !originalTableRef.current?.labelRef.current\n ) {\n return;\n }\n\n const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n const tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n type: IndicatorType.TOOLTIP,\n elementToHighlight: (\n <TablesCard\n ref={highlightedTableRef}\n defaultTable={tableData}\n label={launcherData.label}\n data={launcherData.data}\n onPress={handleEndJourney}\n onGoBackFromTableLevel={handleContinueJourney}\n />\n ),\n indicator: {\n position: 'top',\n backgroundColor: 'YELLOW_4',\n width: 236,\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Each table has 3 levels—clear them and earn 3 stars!\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: segmentedCardDims.width / 2,\n tooltipYCoOrdinates: 45,\n } as IArrowTooltipProps,\n });\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Pick a level\n </Text>\n ),\n nudgePointerX: tableCardDims.width / 2 + 50,\n nudgePointerY: tableCardDims.height * 0.4,\n } as INudgeProps,\n elementToHighlight: <></>,\n });\n\n nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n const startAnimationOnLabelAgain = setTimeout(() => {\n clearTimeout(startAnimationOnLabelAgain);\n highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n }, START_ANIMATING_CLONED_ELEM);\n\n timerRefs.current.push(startAnimationOnLabelAgain);\n },\n [\n addCoachmark,\n handleContinueJourney,\n handleEndJourney,\n isMobile,\n journeyId,\n nextCoachmark,\n originalTableRef,\n tooltipTextRenderAs,\n ],\n );\n\n const goToTableLauncher = useCallback(() => {\n playButtonSound();\n carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n step: Action.TABLES,\n });\n\n const showNudge = setTimeout(() => {\n clearTimeout(showNudge);\n originalTableRef.current?.setLabelVisiblity(false);\n nextCoachmark(journeyId, true);\n }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n timerRefs.current.push(showNudge);\n\n const animateLabel = setTimeout(() => {\n clearTimeout(animateLabel);\n highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n }, START_ANIMATING_CLONED_ELEM);\n\n timerRefs.current.push(animateLabel);\n }, [carouselRefs, journeyId, nextCoachmark, originalTableRef, playButtonSound, trackAnalytics]);\n\n const startJourney = useCallback(\n (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n const paginationList = carouselRefs.current?.indicatorRefs;\n const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n if (\n !originalTableRef.current?.segmentedCardWrapperRef.current \|\|\n !originalTableRef.current?.labelRef.current \|\|\n !paginationList \|\|\n !carouselNextBtnRef?.current \|\|\n !tablePaginationRef \|\|\n !tablePaginationRef.current\n ) {\n return;\n }\n\n const labelDims = originalTableRef.current?.labelRef.current.getBoundingClientRect();\n const tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n // TAKE THE USER TO THE TABLE CARD\n if (!isTutorialOnboardingDone) {\n setJourney(journeyId, [\n {\n originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to proceed\n </Text>\n ),\n nudgePointerX: 0,\n nudgePointerY: 0,\n } as INudgeProps,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={goToTableLauncher}\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\n },\n ]);\n carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n } else {\n setJourney(journeyId, [\n {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <S.Indicator $isActive={false} />,\n indicator: {\n position: 'bottom',\n backgroundColor: 'YELLOW_4',\n width: 52,\n tooltipItem: (\n <FlexView\n $position=\"absolute\"\n $flexDirection=\"row\"\n style={{ top: 6, left: 8, cursor: 'pointer' }}\n onClick={goToTableLauncher}\n >\n <Text $renderAs={tooltipTextRenderAs}>NEW</Text>\n </FlexView>\n ),\n tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: '',\n nudgePointerY: 20,\n } as INudgeProps,\n elementToHighlight: <></>,\n },\n ]);\n carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\n nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n }\n\n // SHOW THE USER SELECT A TABLE\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.labelRef,\n\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'YELLOW_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Get faster at multiplication! Practice everyday and become a Tables champ.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: labelDims.width / 2,\n tooltipYCoOrdinates: labelDims.height + 10,\n } as IArrowTooltipProps,\n });\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n {'Pick a table to start'}\n </Text>\n ),\n nudgePointerX: tableCardDims.width / 2 + 50,\n nudgePointerY: tableCardDims.height / 2,\n } as INudgeProps,\n elementToHighlight: (\n <TablesCard\n ref={highlightedTableRef}\n label={tablesData.label}\n data={tablesData.data}\n onPress={() => {}}\n onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n />\n ),\n });\n },\n [\n addCoachmark,\n carouselRefs,\n goToTableLauncher,\n handleTableSegmentClick,\n isMobile,\n journeyId,\n nextCoachmark,\n originalTableRef,\n setJourney,\n tooltipTextRenderAs,\n ],\n );\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, [journeyId]);\n\n return {\n startJourney,\n };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","originalTableRef","onTableSegmentClick","onJourneyComplete","onNextJourney","journeyId","JOURNEY_ID_STUDENT","device","getTheme","isMobile","tooltipTextRenderAs","highlightedTableRef","useRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleContinueJourney","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","_f","S.Indicator","_i","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_g","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_h","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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