@cuemath/leap 2.9.7-rj-0 → 2.9.7-rj-2
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.
- package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js +51 -51
- package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js.map +1 -1
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js +33 -33
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map +1 -1
- package/dist/features/circle-games/games/tutorial/tutorial.js +25 -19
- package/dist/features/circle-games/games/tutorial/tutorial.js.map +1 -1
- package/dist/features/journey/comps/coachmark/coachmark.js +20 -19
- package/dist/features/journey/comps/coachmark/coachmark.js.map +1 -1
- package/dist/features/journey/use-journey/constants.js +2 -4
- package/dist/features/journey/use-journey/constants.js.map +1 -1
- package/dist/features/journey/use-journey/journey-styled.js +3 -4
- package/dist/features/journey/use-journey/journey-styled.js.map +1 -1
- package/dist/features/ui/constants/z-index.js +2 -1
- package/dist/features/ui/constants/z-index.js.map +1 -1
- package/dist/features/ui/theme/breakpoints.js +7 -0
- package/dist/features/ui/theme/breakpoints.js.map +1 -0
- package/dist/features/ui/theme/get-theme.js +20 -18
- package/dist/features/ui/theme/get-theme.js.map +1 -1
- package/dist/index.d.ts +7 -5
- package/dist/index.js +133 -135
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/features/hooks/use-breakpoint/constants.js +0 -7
- package/dist/features/hooks/use-breakpoint/constants.js.map +0 -1
- package/dist/features/hooks/use-breakpoint/use-breakpoint.js +0 -16
- package/dist/features/hooks/use-breakpoint/use-breakpoint.js.map +0 -1
@@ -1,34 +1,34 @@
|
|
1
1
|
import { jsx as t, Fragment as L } from "react/jsx-runtime";
|
2
|
-
import { useRef as O, useCallback as g, useMemo as
|
2
|
+
import { useRef as O, useCallback as g, useMemo as ae, useEffect as de } from "react";
|
3
3
|
import ee from "../../../../../assets/line-icons/icons/carat-right.js";
|
4
4
|
import { PLATFORM_EVENTS_STUDENT as te } from "../../../../analytics-events/platform-events-student.js";
|
5
|
-
import { useBreakpoint as de } from "../../../../hooks/use-breakpoint/use-breakpoint.js";
|
6
5
|
import { JOURNEY_ID_STUDENT as se } from "../../../../journey/journey-id/journey-id-student.js";
|
7
6
|
import { IndicatorType as c } from "../../../../journey/use-journey/constants.js";
|
8
7
|
import { useJourney as me } from "../../../../journey/use-journey/use-journey.js";
|
9
|
-
import
|
8
|
+
import ne from "../../../../ui/buttons/icon-button/icon-button.js";
|
10
9
|
import { useUIContext as he } from "../../../../ui/context/context.js";
|
11
10
|
import R from "../../../../ui/layout/flex-view.js";
|
12
11
|
import a from "../../../../ui/text/text.js";
|
12
|
+
import { getTheme as ue } from "../../../../ui/theme/get-theme.js";
|
13
13
|
import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as E } from "../../../enum/circle-onboarding-steps.js";
|
14
|
-
import { useCircleSounds as
|
15
|
-
import { SegmentedGameCard as
|
16
|
-
import { GAME_LAUNCHER_ANALYTICS_EVENTS as
|
17
|
-
import { GO_TO_NEXT_SLIDE_AFTER_MS as
|
18
|
-
import { ProjectType as
|
19
|
-
const
|
20
|
-
carouselRefs:
|
14
|
+
import { useCircleSounds as Te } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
|
15
|
+
import { SegmentedGameCard as ge } from "../../comps/segmented-game-card/segmented-game-card.js";
|
16
|
+
import { GAME_LAUNCHER_ANALYTICS_EVENTS as re } from "../../game-launcher-analytics-events.js";
|
17
|
+
import { GO_TO_NEXT_SLIDE_AFTER_MS as Ee, SHOW_LABEL_HIGHLIGHT_AFTER_MS as pe, SHOW_NUDGE_AFTER_MS as Ie, SLIDE_TO_LESSON_MS as _e } from "./constants.js";
|
18
|
+
import { ProjectType as Ce } from "../../../games/web-view/enums/project-type-enum.js";
|
19
|
+
const Ve = ({
|
20
|
+
carouselRefs: r,
|
21
21
|
onSegmentClick: y,
|
22
22
|
onJourneyComplete: S
|
23
23
|
}) => {
|
24
|
-
const o = se.CIRCLE_ACTIVITIES_INTRO_JOURNEY, {
|
24
|
+
const o = se.CIRCLE_ACTIVITIES_INTRO_JOURNEY, { breakpoints: oe } = ue(), p = window.innerWidth <= oe.MOBILE, i = O(null), n = O(null), l = O(null), I = O([]), { playButtonSound: b } = Te(), { nextCoachmark: d, setJourney: N, endJourney: P } = me(), { onEvent: _ } = he(), H = g(
|
25
25
|
(e) => {
|
26
26
|
_(te.ONBOARDING_STEP_VIEWED, {
|
27
27
|
step: e
|
28
28
|
});
|
29
29
|
},
|
30
30
|
[_]
|
31
|
-
),
|
31
|
+
), w = g(
|
32
32
|
(e) => {
|
33
33
|
_(te.ONBOARDING_STEP_COMPLETED, {
|
34
34
|
step: e
|
@@ -38,33 +38,33 @@ const ve = ({
|
|
38
38
|
), s = g(
|
39
39
|
(e, C, f, A = !1) => {
|
40
40
|
var h, u;
|
41
|
-
A || (
|
41
|
+
A || (b(), (u = r.current) == null || u.goToIndex(((h = r.current) == null ? void 0 : h.currentIndex) + 1), d(o, !1, Ee)), H(e);
|
42
42
|
const m = setTimeout(() => {
|
43
43
|
clearTimeout(m), C.startLabelAnimation(f);
|
44
|
-
},
|
45
|
-
I.current.push(m), d(o, !0,
|
44
|
+
}, pe);
|
45
|
+
I.current.push(m), d(o, !0, Ie);
|
46
46
|
},
|
47
|
-
[
|
48
|
-
),
|
47
|
+
[r, o, d, b, H]
|
48
|
+
), k = g(
|
49
49
|
(e) => {
|
50
|
-
y(e,
|
50
|
+
y(e, Ce.PUZZLE), w(E.PUZZLE_ACTIVITY), P(o), S(o);
|
51
51
|
},
|
52
|
-
[P, o, S, y,
|
53
|
-
),
|
52
|
+
[P, o, S, y, w]
|
53
|
+
), G = g(
|
54
54
|
(e, C) => {
|
55
|
-
var
|
56
|
-
if (!((
|
55
|
+
var Y, B, v, V, x, D, M, W, J, X, $, F, Z, j, K, q, Q, z;
|
56
|
+
if (!((Y = r == null ? void 0 : r.current) != null && Y.nextBtnRef.current) || !((B = n == null ? void 0 : n.current) != null && B.segmentedCardWrapperRef.current) || !((v = i == null ? void 0 : i.current) != null && v.labelRef.current) || !((V = n == null ? void 0 : n.current) != null && V.labelRef.current) || !e)
|
57
57
|
return;
|
58
58
|
const f = ((M = (D = (x = l.current) == null ? void 0 : x.labelRef) == null ? void 0 : D.current) == null ? void 0 : M.getBoundingClientRect()) || {
|
59
59
|
height: 0,
|
60
60
|
width: 0
|
61
|
-
}, A = ((X = (
|
61
|
+
}, A = ((X = (J = (W = i.current) == null ? void 0 : W.labelRef) == null ? void 0 : J.current) == null ? void 0 : X.getBoundingClientRect()) || {
|
62
62
|
height: 0,
|
63
63
|
width: 0
|
64
|
-
}, m = ((Z = (F = ($ =
|
64
|
+
}, m = ((Z = (F = ($ = n.current) == null ? void 0 : $.labelRef) == null ? void 0 : F.current) == null ? void 0 : Z.getBoundingClientRect()) || {
|
65
65
|
height: 0,
|
66
66
|
width: 0
|
67
|
-
}, h = ((q = (K = (j =
|
67
|
+
}, h = ((q = (K = (j = n.current) == null ? void 0 : j.segmentedCardWrapperRef) == null ? void 0 : K.current) == null ? void 0 : q.getBoundingClientRect()) || {
|
68
68
|
height: 0,
|
69
69
|
width: 0
|
70
70
|
};
|
@@ -85,11 +85,11 @@ const ve = ({
|
|
85
85
|
}
|
86
86
|
},
|
87
87
|
{
|
88
|
-
originalElementToHighlightRef: (Q =
|
88
|
+
originalElementToHighlightRef: (Q = r.current) == null ? void 0 : Q.nextBtnRef,
|
89
89
|
isActive: !1,
|
90
90
|
type: c.NUDGE,
|
91
91
|
elementToHighlight: /* @__PURE__ */ t(
|
92
|
-
|
92
|
+
ne,
|
93
93
|
{
|
94
94
|
renderAs: "secondary",
|
95
95
|
Icon: ee,
|
@@ -98,7 +98,7 @@ const ve = ({
|
|
98
98
|
i.current,
|
99
99
|
"ORANGE_4"
|
100
100
|
),
|
101
|
-
analyticsLabel:
|
101
|
+
analyticsLabel: re.JOURNEY_NEXT_ACTIVITY
|
102
102
|
}
|
103
103
|
),
|
104
104
|
indicator: {
|
@@ -109,7 +109,7 @@ const ve = ({
|
|
109
109
|
}
|
110
110
|
}
|
111
111
|
]);
|
112
|
-
const
|
112
|
+
const le = [
|
113
113
|
{
|
114
114
|
originalElementToHighlightRef: i.current.labelRef,
|
115
115
|
isActive: !1,
|
@@ -125,20 +125,20 @@ const ve = ({
|
|
125
125
|
}
|
126
126
|
},
|
127
127
|
{
|
128
|
-
originalElementToHighlightRef:
|
128
|
+
originalElementToHighlightRef: r.current.nextBtnRef,
|
129
129
|
isActive: !1,
|
130
130
|
type: c.NUDGE,
|
131
131
|
elementToHighlight: /* @__PURE__ */ t(
|
132
|
-
|
132
|
+
ne,
|
133
133
|
{
|
134
134
|
renderAs: "secondary",
|
135
135
|
Icon: ee,
|
136
136
|
onClick: () => s(
|
137
137
|
E.PUZZLE_ACTIVITY,
|
138
|
-
|
138
|
+
n.current,
|
139
139
|
"PURPLE_4"
|
140
140
|
),
|
141
|
-
analyticsLabel:
|
141
|
+
analyticsLabel: re.JOURNEY_NEXT_ACTIVITY
|
142
142
|
}
|
143
143
|
),
|
144
144
|
indicator: {
|
@@ -148,9 +148,9 @@ const ve = ({
|
|
148
148
|
nudgePointerY: 0
|
149
149
|
}
|
150
150
|
}
|
151
|
-
],
|
151
|
+
], ce = [
|
152
152
|
{
|
153
|
-
originalElementToHighlightRef:
|
153
|
+
originalElementToHighlightRef: n.current.labelRef,
|
154
154
|
isActive: !1,
|
155
155
|
type: c.TOOLTIP,
|
156
156
|
elementToHighlight: /* @__PURE__ */ t(L, {}),
|
@@ -164,11 +164,11 @@ const ve = ({
|
|
164
164
|
}
|
165
165
|
},
|
166
166
|
{
|
167
|
-
originalElementToHighlightRef:
|
167
|
+
originalElementToHighlightRef: n.current.segmentedCardWrapperRef,
|
168
168
|
isActive: !1,
|
169
169
|
type: c.NUDGE,
|
170
170
|
elementToHighlight: /* @__PURE__ */ t(
|
171
|
-
|
171
|
+
ge,
|
172
172
|
{
|
173
173
|
label: "",
|
174
174
|
value: e.data.filter((T) => T.solved).length,
|
@@ -179,7 +179,7 @@ const ve = ({
|
|
179
179
|
name: "",
|
180
180
|
// We dont want to show the name of the puzzle in onboarding
|
181
181
|
isCompleted: T.solved,
|
182
|
-
onPress: () =>
|
182
|
+
onPress: () => k(T)
|
183
183
|
}))
|
184
184
|
}
|
185
185
|
),
|
@@ -191,27 +191,27 @@ const ve = ({
|
|
191
191
|
}
|
192
192
|
}
|
193
193
|
];
|
194
|
-
|
195
|
-
const
|
196
|
-
clearTimeout(
|
197
|
-
},
|
198
|
-
I.current.push(
|
194
|
+
N(o, [...u, ...le, ...ce]), (z = r.current) == null || z.goToIndex(0);
|
195
|
+
const U = setTimeout(() => {
|
196
|
+
clearTimeout(U), d(o);
|
197
|
+
}, _e);
|
198
|
+
I.current.push(U), C && l.current ? s(E.SKILL_ACTIVITY, l.current, "BLUE_4", !0) : s(E.GAMES_ACTIVITY, i.current, "ORANGE_4", !0);
|
199
199
|
},
|
200
|
-
[
|
201
|
-
),
|
200
|
+
[r, p, N, o, s, k, d]
|
201
|
+
), ie = ae(
|
202
202
|
() => ({
|
203
203
|
gameRefs: i,
|
204
|
-
puzzleRefs:
|
204
|
+
puzzleRefs: n,
|
205
205
|
lessonRefs: l,
|
206
|
-
startJourney:
|
206
|
+
startJourney: G
|
207
207
|
}),
|
208
|
-
[
|
208
|
+
[G]
|
209
209
|
);
|
210
|
-
return
|
210
|
+
return de(() => () => {
|
211
211
|
I.current.forEach((e) => clearTimeout(e)), I.current = [];
|
212
|
-
}, [
|
212
|
+
}, [r]), ie;
|
213
213
|
};
|
214
214
|
export {
|
215
|
-
|
215
|
+
Ve as useGameLauncherJourney
|
216
216
|
};
|
217
217
|
//# sourceMappingURL=use-game-launcher-journey.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"use-game-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.tsx"],"sourcesContent":["import type { ICoachmarkProps } from '../../../../journey/use-journey/journey-context-types';\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type { ISegmentedGameCardRefs } from '../../comps/segmented-game-card/segmented-game-card-types';\nimport type {\n IProject,\n Puzzle,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseGameLauncherJourneyProps } from './use-game-launcher-journey-types';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT as AnalyticsLabel } from '../../../../analytics-events/platform-events-student';\nimport { useBreakpoint } from '../../../../hooks/use-breakpoint/use-breakpoint';\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 { CIRCLE_ONBOARDING_ANALYTICS_STEPS as ActionEvent } from '../../../enum/circle-onboarding-steps';\nimport { ProjectType } from '../../../games/web-view/enums';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { SegmentedGameCard } from '../../comps/segmented-game-card/segmented-game-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n GO_TO_NEXT_SLIDE_AFTER_MS,\n SHOW_LABEL_HIGHLIGHT_AFTER_MS,\n SHOW_NUDGE_AFTER_MS,\n SLIDE_TO_LESSON_MS,\n} from './constants';\n\nexport const useGameLauncherJourney = ({\n carouselRefs,\n onSegmentClick,\n onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n const journeyId = JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY;\n\n const { isMobile } = useBreakpoint();\n\n const gameRefs = useRef<ISegmentedGameCardRefs>(null);\n const puzzleRefs = useRef<ISegmentedGameCardRefs>(null);\n const lessonRefs = useRef<ISegmentedGameCardRefs>(null);\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, endJourney } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const trackEventViewed = useCallback(\n (step: ActionEvent) => {\n trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_VIEWED, {\n step,\n });\n },\n [trackAnalytics],\n );\n const trackEventCompleted = useCallback(\n (step: ActionEvent) => {\n trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_COMPLETED, {\n step,\n });\n },\n [trackAnalytics],\n );\n\n const goToNextCard = useCallback(\n (\n analyticsLabelViewed: ActionEvent,\n refOfNextSlide: ISegmentedGameCardRefs,\n color: TColorNames,\n isFirstSlide: boolean = false,\n ) => {\n if (!isFirstSlide) {\n playButtonSound();\n carouselRefs.current?.goToIndex(carouselRefs.current?.currentIndex + 1);\n nextCoachmark(journeyId, false, GO_TO_NEXT_SLIDE_AFTER_MS);\n }\n\n trackEventViewed(analyticsLabelViewed);\n\n const animateLabelTimer = setTimeout(() => {\n clearTimeout(animateLabelTimer);\n refOfNextSlide.startLabelAnimation(color);\n }, SHOW_LABEL_HIGHLIGHT_AFTER_MS);\n\n timerRefs.current.push(animateLabelTimer); // Store to cleanup later\n\n nextCoachmark(journeyId, true, SHOW_NUDGE_AFTER_MS);\n },\n [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackEventViewed],\n );\n\n const handleEndJourney = useCallback(\n (puzzlesData: Puzzle) => {\n onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n trackEventCompleted(ActionEvent.PUZZLE_ACTIVITY);\n endJourney(journeyId);\n onJourneyComplete(journeyId);\n },\n [endJourney, journeyId, onJourneyComplete, onSegmentClick, trackEventCompleted],\n );\n\n const startJourney = useCallback(\n (puzzlesData: IProject<Puzzle>, isLessonAvailable: boolean) => {\n // If element refs are not available return, this is just for type safety\n if (\n !carouselRefs?.current?.nextBtnRef.current ||\n !puzzleRefs?.current?.segmentedCardWrapperRef.current ||\n !gameRefs?.current?.labelRef.current ||\n !puzzleRefs?.current?.labelRef.current ||\n !puzzlesData\n ) {\n return;\n }\n\n const lessonLabelDims = lessonRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n const gameLabelDims = gameRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n const puzzleLabelDims = puzzleRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n\n const launcherDims =\n puzzleRefs.current?.segmentedCardWrapperRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n\n let lessonSteps: ICoachmarkProps[] = [];\n\n if (isLessonAvailable && lessonRefs.current) {\n lessonSteps = [\n {\n originalElementToHighlightRef: lessonRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'BLUE_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">\n Get faster & stay ahead in school. Practice 3 new skills everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: lessonLabelDims.width / 2,\n tooltipYCoOrdinates: lessonLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={() =>\n goToNextCard(\n ActionEvent.GAMES_ACTIVITY,\n gameRefs.current as ISegmentedGameCardRefs,\n 'ORANGE_4',\n )\n }\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\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 },\n ];\n }\n\n const gameSteps: ICoachmarkProps[] = [\n {\n originalElementToHighlightRef: gameRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'ORANGE_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">\n Train to think deeper & plan ahead. Play 3 new games everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: gameLabelDims.width / 2,\n tooltipYCoOrdinates: gameLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselRefs.current.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={() =>\n goToNextCard(\n ActionEvent.PUZZLE_ACTIVITY,\n puzzleRefs.current as ISegmentedGameCardRefs,\n 'PURPLE_4',\n )\n }\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\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 },\n ];\n\n const puzzleSteps: ICoachmarkProps[] = [\n {\n originalElementToHighlightRef: puzzleRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'PURPLE_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">\n Think in new ways & stay sharp. Solve 3 new puzzles everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: puzzleLabelDims.width / 2,\n tooltipYCoOrdinates: puzzleLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: puzzleRefs.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <SegmentedGameCard\n label={''} // This is intentionally left blank to avoid showing the label\n value={puzzlesData.data.filter(puzzle => puzzle.solved).length}\n maxValue={puzzlesData.data.length}\n initialValue={puzzlesData.initialProgressValue}\n data={puzzlesData.data.map(puzzle => ({\n card: puzzle.cardLottie,\n name: '', // We dont want to show the name of the puzzle in onboarding\n isCompleted: puzzle.solved,\n onPress: () => handleEndJourney(puzzle),\n }))}\n />\n ),\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to solve a puzzle\n </Text>\n ),\n nudgePointerX: launcherDims.width * 0.6,\n nudgePointerY: launcherDims.height * 0.4,\n } as INudgeProps,\n },\n ];\n\n setJourney(journeyId, [...lessonSteps, ...gameSteps, ...puzzleSteps]);\n\n carouselRefs.current?.goToIndex(0); // Always start from 0th Index no matter what the current index is\n\n const delayBeforeStart = setTimeout(() => {\n clearTimeout(delayBeforeStart);\n nextCoachmark(journeyId);\n }, SLIDE_TO_LESSON_MS);\n\n timerRefs.current.push(delayBeforeStart); // Store to cleanup later\n\n if (isLessonAvailable && lessonRefs.current) {\n goToNextCard(ActionEvent.SKILL_ACTIVITY, lessonRefs.current, 'BLUE_4', true);\n } else {\n goToNextCard(ActionEvent.GAMES_ACTIVITY, gameRefs.current, 'ORANGE_4', true);\n }\n },\n [carouselRefs, isMobile, setJourney, journeyId, goToNextCard, handleEndJourney, nextCoachmark],\n );\n\n const data = useMemo(\n () => ({\n gameRefs,\n puzzleRefs,\n lessonRefs,\n startJourney,\n }),\n [startJourney],\n );\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, [carouselRefs]);\n\n return data;\n};\n"],"names":["useGameLauncherJourney","carouselRefs","onSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","isMobile","useBreakpoint","gameRefs","useRef","puzzleRefs","lessonRefs","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","endJourney","useJourney","trackAnalytics","useUIContext","trackEventViewed","useCallback","step","AnalyticsLabel","trackEventCompleted","goToNextCard","analyticsLabelViewed","refOfNextSlide","color","isFirstSlide","_b","_a","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS","handleEndJourney","puzzlesData","ProjectType","ActionEvent","startJourney","isLessonAvailable","_c","_d","lessonLabelDims","_g","_f","_e","gameLabelDims","_j","_i","_h","puzzleLabelDims","_m","_l","_k","launcherDims","_p","_o","_n","lessonSteps","IndicatorType","jsx","Fragment","FlexView","Text","_q","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","gameSteps","puzzleSteps","SegmentedGameCard","puzzle","_r","delayBeforeStart","SLIDE_TO_LESSON_MS","data","useMemo","useEffect","timer"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"use-game-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.tsx"],"sourcesContent":["import type { ICoachmarkProps } from '../../../../journey/use-journey/journey-context-types';\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type { ISegmentedGameCardRefs } from '../../comps/segmented-game-card/segmented-game-card-types';\nimport type {\n IProject,\n Puzzle,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseGameLauncherJourneyProps } from './use-game-launcher-journey-types';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT as AnalyticsLabel } 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 ActionEvent } from '../../../enum/circle-onboarding-steps';\nimport { ProjectType } from '../../../games/web-view/enums';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { SegmentedGameCard } from '../../comps/segmented-game-card/segmented-game-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n GO_TO_NEXT_SLIDE_AFTER_MS,\n SHOW_LABEL_HIGHLIGHT_AFTER_MS,\n SHOW_NUDGE_AFTER_MS,\n SLIDE_TO_LESSON_MS,\n} from './constants';\n\nexport const useGameLauncherJourney = ({\n carouselRefs,\n onSegmentClick,\n onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n const journeyId = JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY;\n\n const { breakpoints } = getTheme();\n const isMobile = window.innerWidth <= breakpoints.MOBILE;\n\n const gameRefs = useRef<ISegmentedGameCardRefs>(null);\n const puzzleRefs = useRef<ISegmentedGameCardRefs>(null);\n const lessonRefs = useRef<ISegmentedGameCardRefs>(null);\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, endJourney } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const trackEventViewed = useCallback(\n (step: ActionEvent) => {\n trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_VIEWED, {\n step,\n });\n },\n [trackAnalytics],\n );\n const trackEventCompleted = useCallback(\n (step: ActionEvent) => {\n trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_COMPLETED, {\n step,\n });\n },\n [trackAnalytics],\n );\n\n const goToNextCard = useCallback(\n (\n analyticsLabelViewed: ActionEvent,\n refOfNextSlide: ISegmentedGameCardRefs,\n color: TColorNames,\n isFirstSlide: boolean = false,\n ) => {\n if (!isFirstSlide) {\n playButtonSound();\n carouselRefs.current?.goToIndex(carouselRefs.current?.currentIndex + 1);\n nextCoachmark(journeyId, false, GO_TO_NEXT_SLIDE_AFTER_MS);\n }\n\n trackEventViewed(analyticsLabelViewed);\n\n const animateLabelTimer = setTimeout(() => {\n clearTimeout(animateLabelTimer);\n refOfNextSlide.startLabelAnimation(color);\n }, SHOW_LABEL_HIGHLIGHT_AFTER_MS);\n\n timerRefs.current.push(animateLabelTimer); // Store to cleanup later\n\n nextCoachmark(journeyId, true, SHOW_NUDGE_AFTER_MS);\n },\n [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackEventViewed],\n );\n\n const handleEndJourney = useCallback(\n (puzzlesData: Puzzle) => {\n onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n trackEventCompleted(ActionEvent.PUZZLE_ACTIVITY);\n endJourney(journeyId);\n onJourneyComplete(journeyId);\n },\n [endJourney, journeyId, onJourneyComplete, onSegmentClick, trackEventCompleted],\n );\n\n const startJourney = useCallback(\n (puzzlesData: IProject<Puzzle>, isLessonAvailable: boolean) => {\n // If element refs are not available return, this is just for type safety\n if (\n !carouselRefs?.current?.nextBtnRef.current ||\n !puzzleRefs?.current?.segmentedCardWrapperRef.current ||\n !gameRefs?.current?.labelRef.current ||\n !puzzleRefs?.current?.labelRef.current ||\n !puzzlesData\n ) {\n return;\n }\n\n const lessonLabelDims = lessonRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n const gameLabelDims = gameRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n const puzzleLabelDims = puzzleRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n\n const launcherDims =\n puzzleRefs.current?.segmentedCardWrapperRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n\n let lessonSteps: ICoachmarkProps[] = [];\n\n if (isLessonAvailable && lessonRefs.current) {\n lessonSteps = [\n {\n originalElementToHighlightRef: lessonRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'BLUE_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">\n Get faster & stay ahead in school. Practice 3 new skills everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: lessonLabelDims.width / 2,\n tooltipYCoOrdinates: lessonLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={() =>\n goToNextCard(\n ActionEvent.GAMES_ACTIVITY,\n gameRefs.current as ISegmentedGameCardRefs,\n 'ORANGE_4',\n )\n }\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\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 },\n ];\n }\n\n const gameSteps: ICoachmarkProps[] = [\n {\n originalElementToHighlightRef: gameRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'ORANGE_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">\n Train to think deeper & plan ahead. Play 3 new games everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: gameLabelDims.width / 2,\n tooltipYCoOrdinates: gameLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselRefs.current.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={() =>\n goToNextCard(\n ActionEvent.PUZZLE_ACTIVITY,\n puzzleRefs.current as ISegmentedGameCardRefs,\n 'PURPLE_4',\n )\n }\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\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 },\n ];\n\n const puzzleSteps: ICoachmarkProps[] = [\n {\n originalElementToHighlightRef: puzzleRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'PURPLE_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">\n Think in new ways & stay sharp. Solve 3 new puzzles everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: puzzleLabelDims.width / 2,\n tooltipYCoOrdinates: puzzleLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: puzzleRefs.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <SegmentedGameCard\n label={''} // This is intentionally left blank to avoid showing the label\n value={puzzlesData.data.filter(puzzle => puzzle.solved).length}\n maxValue={puzzlesData.data.length}\n initialValue={puzzlesData.initialProgressValue}\n data={puzzlesData.data.map(puzzle => ({\n card: puzzle.cardLottie,\n name: '', // We dont want to show the name of the puzzle in onboarding\n isCompleted: puzzle.solved,\n onPress: () => handleEndJourney(puzzle),\n }))}\n />\n ),\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to solve a puzzle\n </Text>\n ),\n nudgePointerX: launcherDims.width * 0.6,\n nudgePointerY: launcherDims.height * 0.4,\n } as INudgeProps,\n },\n ];\n\n setJourney(journeyId, [...lessonSteps, ...gameSteps, ...puzzleSteps]);\n\n carouselRefs.current?.goToIndex(0); // Always start from 0th Index no matter what the current index is\n\n const delayBeforeStart = setTimeout(() => {\n clearTimeout(delayBeforeStart);\n nextCoachmark(journeyId);\n }, SLIDE_TO_LESSON_MS);\n\n timerRefs.current.push(delayBeforeStart); // Store to cleanup later\n\n if (isLessonAvailable && lessonRefs.current) {\n goToNextCard(ActionEvent.SKILL_ACTIVITY, lessonRefs.current, 'BLUE_4', true);\n } else {\n goToNextCard(ActionEvent.GAMES_ACTIVITY, gameRefs.current, 'ORANGE_4', true);\n }\n },\n [carouselRefs, isMobile, setJourney, journeyId, goToNextCard, handleEndJourney, nextCoachmark],\n );\n\n const data = useMemo(\n () => ({\n gameRefs,\n puzzleRefs,\n lessonRefs,\n startJourney,\n }),\n [startJourney],\n );\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, [carouselRefs]);\n\n return data;\n};\n"],"names":["useGameLauncherJourney","carouselRefs","onSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","breakpoints","getTheme","isMobile","gameRefs","useRef","puzzleRefs","lessonRefs","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","endJourney","useJourney","trackAnalytics","useUIContext","trackEventViewed","useCallback","step","AnalyticsLabel","trackEventCompleted","goToNextCard","analyticsLabelViewed","refOfNextSlide","color","isFirstSlide","_b","_a","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS","handleEndJourney","puzzlesData","ProjectType","ActionEvent","startJourney","isLessonAvailable","_c","_d","lessonLabelDims","_g","_f","_e","gameLabelDims","_j","_i","_h","puzzleLabelDims","_m","_l","_k","launcherDims","_p","_o","_n","lessonSteps","IndicatorType","jsx","Fragment","FlexView","Text","_q","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","gameSteps","puzzleSteps","SegmentedGameCard","puzzle","_r","delayBeforeStart","SLIDE_TO_LESSON_MS","data","useMemo","useEffect","timer"],"mappings":"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"}
|
@@ -1,8 +1,7 @@
|
|
1
1
|
import { jsx as r, Fragment as O } from "react/jsx-runtime";
|
2
|
-
import { useRef as R, useCallback as C, useEffect as
|
3
|
-
import
|
4
|
-
import { PLATFORM_EVENTS_STUDENT as
|
5
|
-
import { useBreakpoint as j } from "../../../../hooks/use-breakpoint/use-breakpoint.js";
|
2
|
+
import { useRef as R, useCallback as C, useEffect as K } from "react";
|
3
|
+
import j from "../../../../../assets/line-icons/icons/carat-right.js";
|
4
|
+
import { PLATFORM_EVENTS_STUDENT as M } from "../../../../analytics-events/platform-events-student.js";
|
6
5
|
import { JOURNEY_ID_STUDENT as Z } from "../../../../journey/journey-id/journey-id-student.js";
|
7
6
|
import { IndicatorType as d } from "../../../../journey/use-journey/constants.js";
|
8
7
|
import { useJourney as q } from "../../../../journey/use-journey/use-journey.js";
|
@@ -10,22 +9,23 @@ import z from "../../../../ui/buttons/icon-button/icon-button.js";
|
|
10
9
|
import { useUIContext as Q } from "../../../../ui/context/context.js";
|
11
10
|
import N from "../../../../ui/layout/flex-view.js";
|
12
11
|
import m from "../../../../ui/text/text.js";
|
13
|
-
import {
|
14
|
-
import {
|
15
|
-
import {
|
16
|
-
import {
|
17
|
-
import {
|
18
|
-
import {
|
19
|
-
|
12
|
+
import { getTheme as ee } from "../../../../ui/theme/get-theme.js";
|
13
|
+
import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as v } from "../../../enum/circle-onboarding-steps.js";
|
14
|
+
import { useCircleSounds as te } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
|
15
|
+
import { TablesCard as w } from "../../comps/tables-card/tables-card.js";
|
16
|
+
import { GAME_LAUNCHER_ANALYTICS_EVENTS as re } from "../../game-launcher-analytics-events.js";
|
17
|
+
import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as ne, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as oe, START_ANIMATING_CLONED_ELEM as $, TABLE_CARD_INDEX as x, GO_TO_TABLE_LAUNCHER_DURATION_MS as ie, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as le, PUZZLE_CARD_INDEX as ce, SHOW_INITIAL_COACHMARK_AFTER_MS as F, LESSON_CARD_INDEX as ae, SHOW_INITIAL_TOOLTIP_AFTER_MS as se } from "./constants.js";
|
18
|
+
import { Indicator as de } from "./use-table-launcher-journey-styled.js";
|
19
|
+
const Pe = ({
|
20
20
|
carouselRefs: a,
|
21
21
|
onTableSegmentClick: S,
|
22
22
|
onJourneyComplete: P
|
23
23
|
}) => {
|
24
|
-
const e = Z.CIRCLE_TABLES_INTRO_JOURNEY, {
|
24
|
+
const e = Z.CIRCLE_TABLES_INTRO_JOURNEY, { breakpoints: V } = ee(), T = window.innerWidth <= V.MOBILE, t = R(null), f = R(null), g = R([]), { playButtonSound: H } = te(), { nextCoachmark: l, setJourney: L, addCoachmark: u, endJourney: y } = q(), { onEvent: A } = Q(), I = C(
|
25
25
|
(n) => {
|
26
26
|
var c, o;
|
27
|
-
y(e), n && S(n), A(
|
28
|
-
step:
|
27
|
+
y(e), n && S(n), A(M.ONBOARDING_STEP_COMPLETED, {
|
28
|
+
step: v.TABLES
|
29
29
|
}), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), P(e);
|
30
30
|
},
|
31
31
|
[y, e, P, S, A]
|
@@ -40,7 +40,7 @@ const Se = ({
|
|
40
40
|
isActive: !1,
|
41
41
|
type: d.TOOLTIP,
|
42
42
|
elementToHighlight: /* @__PURE__ */ r(
|
43
|
-
|
43
|
+
w,
|
44
44
|
{
|
45
45
|
ref: f,
|
46
46
|
defaultTable: c,
|
@@ -69,33 +69,33 @@ const Se = ({
|
|
69
69
|
nudgePointerY: i.height * 0.4
|
70
70
|
},
|
71
71
|
elementToHighlight: /* @__PURE__ */ r(O, {})
|
72
|
-
}), l(e, !1,
|
72
|
+
}), l(e, !1, ne), l(e, !0, oe);
|
73
73
|
const s = setTimeout(() => {
|
74
74
|
var _;
|
75
75
|
clearTimeout(s), (_ = f.current) == null || _.startLabelAnimation("YELLOW_4");
|
76
|
-
},
|
76
|
+
}, $);
|
77
77
|
g.current.push(s);
|
78
78
|
},
|
79
79
|
[u, I, T, e, l]
|
80
80
|
), b = C(() => {
|
81
81
|
var o;
|
82
|
-
H(), (o = a.current) == null || o.goToIndex(
|
83
|
-
step:
|
82
|
+
H(), (o = a.current) == null || o.goToIndex(x), l(e, !1, ie), A(M.ONBOARDING_STEP_VIEWED, {
|
83
|
+
step: v.TABLES
|
84
84
|
});
|
85
85
|
const n = setTimeout(() => {
|
86
86
|
var i;
|
87
87
|
clearTimeout(n), (i = t.current) == null || i.setLabelVisiblity(!1), l(e, !0);
|
88
|
-
},
|
88
|
+
}, le);
|
89
89
|
g.current.push(n);
|
90
90
|
const c = setTimeout(() => {
|
91
91
|
var i;
|
92
92
|
clearTimeout(c), (i = f.current) == null || i.startLabelAnimation("YELLOW_4");
|
93
|
-
},
|
93
|
+
}, $);
|
94
94
|
g.current.push(c);
|
95
|
-
}, [a, e, l, H, A]),
|
95
|
+
}, [a, e, l, H, A]), X = C(
|
96
96
|
(n, c = !1) => {
|
97
97
|
var p, _, W, k, B, Y, U, G;
|
98
|
-
const o = (p = a.current) == null ? void 0 : p.indicatorRefs, i = (_ = a.current) == null ? void 0 : _.nextBtnRef, s = o == null ? void 0 : o[
|
98
|
+
const o = (p = a.current) == null ? void 0 : p.indicatorRefs, i = (_ = a.current) == null ? void 0 : _.nextBtnRef, s = o == null ? void 0 : o[x];
|
99
99
|
if (!((W = t.current) != null && W.segmentedCardWrapperRef.current) || !((k = t.current) != null && k.labelRef.current) || !o || !(i != null && i.current) || !s || !s.current)
|
100
100
|
return;
|
101
101
|
const E = t.current.labelRef.current.getBoundingClientRect(), h = (B = t.current) == null ? void 0 : B.segmentedCardWrapperRef.current.getBoundingClientRect();
|
@@ -104,7 +104,7 @@ const Se = ({
|
|
104
104
|
originalElementToHighlightRef: s,
|
105
105
|
isActive: !1,
|
106
106
|
type: d.TOOLTIP,
|
107
|
-
elementToHighlight: /* @__PURE__ */ r(
|
107
|
+
elementToHighlight: /* @__PURE__ */ r(de, { $isActive: !1 }),
|
108
108
|
indicator: {
|
109
109
|
position: "bottom",
|
110
110
|
backgroundColor: "YELLOW_4",
|
@@ -134,7 +134,7 @@ const Se = ({
|
|
134
134
|
},
|
135
135
|
elementToHighlight: /* @__PURE__ */ r(O, {})
|
136
136
|
}
|
137
|
-
]), (G = a.current) == null || G.goToIndex(
|
137
|
+
]), (G = a.current) == null || G.goToIndex(ae), l(e, !1, F), l(e, !0, se)) : (L(e, [
|
138
138
|
{
|
139
139
|
originalElementToHighlightRef: (Y = a.current) == null ? void 0 : Y.nextBtnRef,
|
140
140
|
isActive: !1,
|
@@ -149,13 +149,13 @@ const Se = ({
|
|
149
149
|
z,
|
150
150
|
{
|
151
151
|
renderAs: "secondary",
|
152
|
-
Icon:
|
152
|
+
Icon: j,
|
153
153
|
onClick: b,
|
154
|
-
analyticsLabel:
|
154
|
+
analyticsLabel: re.JOURNEY_NEXT_ACTIVITY
|
155
155
|
}
|
156
156
|
)
|
157
157
|
}
|
158
|
-
]), (U = a.current) == null || U.goToIndex(
|
158
|
+
]), (U = a.current) == null || U.goToIndex(ce), l(e, !1, F)), u(e, {
|
159
159
|
originalElementToHighlightRef: t.current.labelRef,
|
160
160
|
isActive: !1,
|
161
161
|
type: d.TOOLTIP,
|
@@ -179,14 +179,14 @@ const Se = ({
|
|
179
179
|
nudgePointerY: h.height / 2
|
180
180
|
},
|
181
181
|
elementToHighlight: /* @__PURE__ */ r(
|
182
|
-
|
182
|
+
w,
|
183
183
|
{
|
184
184
|
ref: f,
|
185
185
|
label: n.label,
|
186
186
|
data: n.data,
|
187
187
|
onPress: () => {
|
188
188
|
},
|
189
|
-
onPressTableSegment: (
|
189
|
+
onPressTableSegment: (J) => D(n, J)
|
190
190
|
}
|
191
191
|
)
|
192
192
|
});
|
@@ -202,14 +202,14 @@ const Se = ({
|
|
202
202
|
L
|
203
203
|
]
|
204
204
|
);
|
205
|
-
return
|
205
|
+
return K(() => () => {
|
206
206
|
g.current.forEach((n) => clearTimeout(n)), g.current = [];
|
207
207
|
}, [e]), {
|
208
208
|
tableRef: t,
|
209
|
-
startJourney:
|
209
|
+
startJourney: X
|
210
210
|
};
|
211
211
|
};
|
212
212
|
export {
|
213
|
-
|
213
|
+
Pe as useTableLauncherJourney
|
214
214
|
};
|
215
215
|
//# sourceMappingURL=use-table-launcher-journey.js.map
|
@@ -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';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { useBreakpoint } from '../../../../hooks/use-breakpoint/use-breakpoint';\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 { 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 const { isMobile } = useBreakpoint();\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=\"ab2-bold\">Each table has 3 levels—clear them and earn 3 stars!</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],\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=\"ab2-bold\">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=\"ab2-bold\">\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 ],\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","isMobile","useBreakpoint","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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"}
|
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 { breakpoints } = getTheme();\n const isMobile = window.innerWidth <= breakpoints.MOBILE;\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=\"ab2-bold\">Each table has 3 levels—clear them and earn 3 stars!</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],\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=\"ab2-bold\">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=\"ab2-bold\">\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 ],\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","breakpoints","getTheme","isMobile","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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"}
|