@cuemath/leap 2.8.21-rj-9 → 2.8.21-rj-11
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/use-game-launcher-journey/constants.js.map +1 -1
- package/dist/features/circle-games/game-launcher/use-game-launcher-journey/use-game-launcher-journey.js +35 -36
- package/dist/features/circle-games/game-launcher/use-game-launcher-journey/use-game-launcher-journey.js.map +1 -1
- package/dist/features/journey/use-journey/journey-context-provider.js +38 -41
- package/dist/features/journey/use-journey/journey-context-provider.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../../src/features/circle-games/game-launcher/use-game-launcher-journey/constants.ts"],"sourcesContent":["export const GO_TO_NEXT_SLIDE_AFTER_MS = 500;\nexport const SHOW_LABEL_HIGHLIGHT_AFTER_MS = 1500;\nexport const SHOW_NUDGE_AFTER_MS = 3000;\n"],"names":["GO_TO_NEXT_SLIDE_AFTER_MS","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS"],"mappings":"AAAO,MAAMA,IAA4B,KAC5BC,IAAgC,MAChCC,IAAsB;"}
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../../src/features/circle-games/game-launcher/use-game-launcher-journey/constants.ts"],"sourcesContent":["export const GO_TO_NEXT_SLIDE_AFTER_MS = 500;\nexport const SHOW_LABEL_HIGHLIGHT_AFTER_MS = 1500;\nexport const SHOW_NUDGE_AFTER_MS = 3000;\nexport const FIRST_COACHMARK_AFTER_MS = 200;\n"],"names":["GO_TO_NEXT_SLIDE_AFTER_MS","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS"],"mappings":"AAAO,MAAMA,IAA4B,KAC5BC,IAAgC,MAChCC,IAAsB;"}
|
|
@@ -1,51 +1,50 @@
|
|
|
1
|
-
import { jsx as e, Fragment as
|
|
2
|
-
import { useRef as u, useCallback as
|
|
1
|
+
import { jsx as e, Fragment as E } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as u, useCallback as R, useMemo as Q } from "react";
|
|
3
3
|
import V from "../../../../assets/line-icons/icons/next.js";
|
|
4
4
|
import { IndicatorType as s } from "../../../journey/use-journey/constants.js";
|
|
5
5
|
import { useJourney as j } from "../../../journey/use-journey/use-journey.js";
|
|
6
6
|
import Z from "../../../ui/buttons/icon-button/icon-button.js";
|
|
7
|
-
import
|
|
7
|
+
import b from "../../../ui/layout/flex-view.js";
|
|
8
8
|
import d from "../../../ui/text/text.js";
|
|
9
9
|
import { useCircleSounds as z } from "../../hooks/use-circle-sounds/use-circle-sounds.js";
|
|
10
10
|
import { SegmentedGameCard as ee } from "../comps/segmented-game-card/segmented-game-card.js";
|
|
11
11
|
import { GO_TO_NEXT_SLIDE_AFTER_MS as te, SHOW_LABEL_HIGHLIGHT_AFTER_MS as re, SHOW_NUDGE_AFTER_MS as ne } from "./constants.js";
|
|
12
12
|
import { ProjectType as ie } from "../../games/web-view/enums/project-type-enum.js";
|
|
13
13
|
const Ee = ({
|
|
14
|
-
onSegmentClick:
|
|
15
|
-
setCarouselIndex:
|
|
16
|
-
onJourneyComplete:
|
|
14
|
+
onSegmentClick: C,
|
|
15
|
+
setCarouselIndex: L,
|
|
16
|
+
onJourneyComplete: H
|
|
17
17
|
}) => {
|
|
18
|
-
const c = u(null), i = u(null), t = u(null), a = u(null),
|
|
18
|
+
const c = u(null), i = u(null), t = u(null), a = u(null), T = u(!1), { playButtonSound: A } = z(), { nextCoachmark: o, setJourney: O } = j(), h = R(
|
|
19
19
|
(n, l, r, m = !1) => {
|
|
20
|
-
m || (
|
|
20
|
+
m || (A(), L((p) => p + 1), o(r, !1, te));
|
|
21
21
|
const f = setTimeout(() => {
|
|
22
22
|
clearTimeout(f), n.startLabelAnimation(l);
|
|
23
|
-
}, re)
|
|
24
|
-
|
|
25
|
-
}, ne);
|
|
23
|
+
}, re);
|
|
24
|
+
o(r, !0, ne);
|
|
26
25
|
},
|
|
27
|
-
[o,
|
|
28
|
-
),
|
|
26
|
+
[o, A, L]
|
|
27
|
+
), y = R(
|
|
29
28
|
(n, l) => {
|
|
30
|
-
|
|
29
|
+
C(n, ie.PUZZLE), o(l), H(l);
|
|
31
30
|
},
|
|
32
|
-
[o,
|
|
33
|
-
),
|
|
31
|
+
[o, H, C]
|
|
32
|
+
), P = R(
|
|
34
33
|
(n, l, r) => {
|
|
35
|
-
var k, v, G, S, B,
|
|
36
|
-
if (
|
|
34
|
+
var k, v, G, S, B, x, I, N, U, $, W, X, Y, D, F, J, M;
|
|
35
|
+
if (T.current || !((k = c == null ? void 0 : c.current) != null && k.nextBtnRef.current) || !((v = t == null ? void 0 : t.current) != null && v.segmentedCardWrapperRef.current) || !((G = i == null ? void 0 : i.current) != null && G.labelRef.current) || !((S = t == null ? void 0 : t.current) != null && S.labelRef.current) || !n)
|
|
37
36
|
return;
|
|
38
|
-
|
|
39
|
-
const m = ((
|
|
37
|
+
T.current = !0;
|
|
38
|
+
const m = ((I = (x = (B = a.current) == null ? void 0 : B.labelRef) == null ? void 0 : x.current) == null ? void 0 : I.getBoundingClientRect()) || {
|
|
40
39
|
height: 0,
|
|
41
40
|
width: 0
|
|
42
|
-
}, f = (($ = (U = (
|
|
41
|
+
}, f = (($ = (U = (N = i.current) == null ? void 0 : N.labelRef) == null ? void 0 : U.current) == null ? void 0 : $.getBoundingClientRect()) || {
|
|
43
42
|
height: 0,
|
|
44
43
|
width: 0
|
|
45
44
|
}, p = ((Y = (X = (W = t.current) == null ? void 0 : W.labelRef) == null ? void 0 : X.current) == null ? void 0 : Y.getBoundingClientRect()) || {
|
|
46
45
|
height: 0,
|
|
47
46
|
width: 0
|
|
48
|
-
},
|
|
47
|
+
}, _ = ((J = (F = (D = t.current) == null ? void 0 : D.segmentedCardWrapperRef) == null ? void 0 : F.current) == null ? void 0 : J.getBoundingClientRect()) || {
|
|
49
48
|
height: 0,
|
|
50
49
|
width: 0
|
|
51
50
|
};
|
|
@@ -55,12 +54,12 @@ const Ee = ({
|
|
|
55
54
|
originalElementToHighlightRef: a.current.labelRef,
|
|
56
55
|
isActive: !1,
|
|
57
56
|
type: s.TOOLTIP,
|
|
58
|
-
elementToHighlight: /* @__PURE__ */ e(
|
|
57
|
+
elementToHighlight: /* @__PURE__ */ e(E, {}),
|
|
59
58
|
indicator: {
|
|
60
59
|
position: "right",
|
|
61
60
|
backgroundColor: "BLUE_4",
|
|
62
61
|
width: 264,
|
|
63
|
-
tooltipItem: /* @__PURE__ */ e(
|
|
62
|
+
tooltipItem: /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(d, { $renderAs: "ab2-bold", children: "Get faster & stay ahead in school. Practice 3 new skills everyday." }) }),
|
|
64
63
|
tooltipXCoOrdinates: m.width,
|
|
65
64
|
tooltipYCoOrdinates: m.height / 2
|
|
66
65
|
}
|
|
@@ -91,12 +90,12 @@ const Ee = ({
|
|
|
91
90
|
originalElementToHighlightRef: i.current.labelRef,
|
|
92
91
|
isActive: !1,
|
|
93
92
|
type: s.TOOLTIP,
|
|
94
|
-
elementToHighlight: /* @__PURE__ */ e(
|
|
93
|
+
elementToHighlight: /* @__PURE__ */ e(E, {}),
|
|
95
94
|
indicator: {
|
|
96
95
|
position: "right",
|
|
97
96
|
backgroundColor: "ORANGE_4",
|
|
98
97
|
width: 264,
|
|
99
|
-
tooltipItem: /* @__PURE__ */ e(
|
|
98
|
+
tooltipItem: /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(d, { $renderAs: "ab2-bold", children: "Train to think deeper & plan ahead. Play 3 new games everyday." }) }),
|
|
100
99
|
tooltipXCoOrdinates: f.width,
|
|
101
100
|
tooltipYCoOrdinates: f.height / 2
|
|
102
101
|
}
|
|
@@ -126,12 +125,12 @@ const Ee = ({
|
|
|
126
125
|
originalElementToHighlightRef: t.current.labelRef,
|
|
127
126
|
isActive: !1,
|
|
128
127
|
type: s.TOOLTIP,
|
|
129
|
-
elementToHighlight: /* @__PURE__ */ e(
|
|
128
|
+
elementToHighlight: /* @__PURE__ */ e(E, {}),
|
|
130
129
|
indicator: {
|
|
131
130
|
position: "right",
|
|
132
131
|
backgroundColor: "PURPLE_4",
|
|
133
132
|
width: 264,
|
|
134
|
-
tooltipItem: /* @__PURE__ */ e(
|
|
133
|
+
tooltipItem: /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(d, { $renderAs: "ab2-bold", children: "Think in new ways & stay sharp. Solve 3 new puzzles everyday." }) }),
|
|
135
134
|
tooltipXCoOrdinates: p.width,
|
|
136
135
|
tooltipYCoOrdinates: p.height / 2
|
|
137
136
|
}
|
|
@@ -152,21 +151,21 @@ const Ee = ({
|
|
|
152
151
|
name: "",
|
|
153
152
|
// We dont want to show the name of the puzzle in onboarding
|
|
154
153
|
isCompleted: g.solved,
|
|
155
|
-
onPress: () =>
|
|
154
|
+
onPress: () => y(g, r)
|
|
156
155
|
}))
|
|
157
156
|
}
|
|
158
157
|
),
|
|
159
158
|
indicator: {
|
|
160
159
|
nudge: "click",
|
|
161
160
|
content: /* @__PURE__ */ e(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to solve a puzzle" }),
|
|
162
|
-
nudgePointerX:
|
|
163
|
-
nudgePointerY:
|
|
161
|
+
nudgePointerX: _.width * 0.6,
|
|
162
|
+
nudgePointerY: _.height * 0.4
|
|
164
163
|
}
|
|
165
164
|
}
|
|
166
165
|
];
|
|
167
|
-
|
|
166
|
+
O(r, [...w, ...q, ...K]), o(r), l && a.current ? h(a.current, "BLUE_4", r, !0) : h(i.current, "ORANGE_4", r, !0);
|
|
168
167
|
},
|
|
169
|
-
[
|
|
168
|
+
[y, h, o, O]
|
|
170
169
|
);
|
|
171
170
|
return Q(
|
|
172
171
|
() => ({
|
|
@@ -174,10 +173,10 @@ const Ee = ({
|
|
|
174
173
|
puzzleRefs: t,
|
|
175
174
|
lessonRefs: a,
|
|
176
175
|
carouselNextBtnRef: c,
|
|
177
|
-
isJourneyInProgress:
|
|
178
|
-
startJourney:
|
|
176
|
+
isJourneyInProgress: T,
|
|
177
|
+
startJourney: P
|
|
179
178
|
}),
|
|
180
|
-
[
|
|
179
|
+
[P]
|
|
181
180
|
);
|
|
182
181
|
};
|
|
183
182
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-game-launcher-journey.js","sources":["../../../../../src/features/circle-games/game-launcher/use-game-launcher-journey/use-game-launcher-journey.tsx"],"sourcesContent":["import type { TJourneyId } from '../../../journey/journey-id/journey-id-types';\nimport 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 { ICarouselRefs } from '../comps/carousel/carousel-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, useMemo, useRef } from 'react';\n\nimport NextIcon from '../../../../assets/line-icons/icons/next';\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 FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\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 {\n GO_TO_NEXT_SLIDE_AFTER_MS,\n SHOW_LABEL_HIGHLIGHT_AFTER_MS,\n SHOW_NUDGE_AFTER_MS,\n} from './constants';\n\nexport const useGameLauncherJourney = ({\n onSegmentClick,\n setCarouselIndex,\n onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n const carouselNextBtnRef = useRef<ICarouselRefs>(null);\n const gameRefs = useRef<ISegmentedGameCardRefs>(null);\n const puzzleRefs = useRef<ISegmentedGameCardRefs>(null);\n const lessonRefs = useRef<ISegmentedGameCardRefs>(null);\n\n const isJourneyInProgress = useRef(false);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney } = useJourney();\n\n const goToNextCard = useCallback(\n (\n refOfNextSlide: ISegmentedGameCardRefs,\n color: TColorNames,\n journeyId: TJourneyId,\n isFirstSlide: boolean = false,\n ) => {\n if (!isFirstSlide) {\n playButtonSound();\n setCarouselIndex((prev: number) => prev + 1);\n nextCoachmark(journeyId, false, GO_TO_NEXT_SLIDE_AFTER_MS);\n }\n\n const animateLabelTimer = setTimeout(() => {\n clearTimeout(animateLabelTimer);\n refOfNextSlide.startLabelAnimation(color);\n }, SHOW_LABEL_HIGHLIGHT_AFTER_MS);\n\n const showNudgeTimer = setTimeout(() => {\n clearTimeout(showNudgeTimer);\n nextCoachmark(journeyId, true);\n }, SHOW_NUDGE_AFTER_MS);\n },\n [nextCoachmark, playButtonSound, setCarouselIndex],\n );\n\n const endJourney = useCallback(\n (puzzlesData: Puzzle, journeyId: TJourneyId) => {\n onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n nextCoachmark(journeyId);\n onJourneyComplete(journeyId);\n },\n [nextCoachmark, onJourneyComplete, onSegmentClick],\n );\n\n const startJourney = useCallback(\n (puzzlesData: IProject<Puzzle>, isLessonAvailable: boolean, journeyId: TJourneyId) => {\n if (isJourneyInProgress.current) {\n return;\n }\n\n // If element refs are not available return, this is just for type safety\n if (\n !carouselNextBtnRef?.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 isJourneyInProgress.current = true;\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: 'right',\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,\n tooltipYCoOrdinates: lessonLabelDims.height / 2,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselNextBtnRef.current?.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={NextIcon}\n onClick={() =>\n goToNextCard(gameRefs.current as ISegmentedGameCardRefs, 'ORANGE_4', journeyId)\n }\n analyticsLabel=\"HELLO \"\n />\n ),\n indicator: {\n nudge: 'click',\n content: (\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: 'right',\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,\n tooltipYCoOrdinates: gameLabelDims.height / 2,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselNextBtnRef.current.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={NextIcon}\n onClick={() =>\n goToNextCard(puzzleRefs.current as ISegmentedGameCardRefs, 'PURPLE_4', journeyId)\n }\n analyticsLabel=\"HELLO \"\n />\n ),\n indicator: {\n nudge: 'click',\n content: (\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: 'right',\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,\n tooltipYCoOrdinates: puzzleLabelDims.height / 2,\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: () => endJourney(puzzle, journeyId),\n }))}\n />\n ),\n indicator: {\n nudge: 'click',\n content: (\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 nextCoachmark(journeyId, true);\n if (isLessonAvailable && lessonRefs.current) {\n goToNextCard(lessonRefs.current, 'BLUE_4', journeyId, true);\n } else {\n goToNextCard(gameRefs.current, 'ORANGE_4', journeyId, true);\n }\n },\n [endJourney, goToNextCard, nextCoachmark, setJourney],\n );\n\n const data = useMemo(\n () => ({\n gameRefs,\n puzzleRefs,\n lessonRefs,\n carouselNextBtnRef,\n isJourneyInProgress,\n startJourney,\n }),\n [startJourney],\n );\n\n return data;\n};\n"],"names":["useGameLauncherJourney","onSegmentClick","setCarouselIndex","onJourneyComplete","carouselNextBtnRef","useRef","gameRefs","puzzleRefs","lessonRefs","isJourneyInProgress","playButtonSound","useCircleSounds","nextCoachmark","setJourney","useJourney","goToNextCard","useCallback","refOfNextSlide","color","journeyId","isFirstSlide","prev","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","showNudgeTimer","SHOW_NUDGE_AFTER_MS","endJourney","puzzlesData","ProjectType","startJourney","isLessonAvailable","_a","_b","_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","NextIcon","gameSteps","puzzleSteps","SegmentedGameCard","puzzle","useMemo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-game-launcher-journey.js","sources":["../../../../../src/features/circle-games/game-launcher/use-game-launcher-journey/use-game-launcher-journey.tsx"],"sourcesContent":["import type { TJourneyId } from '../../../journey/journey-id/journey-id-types';\nimport 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 { ICarouselRefs } from '../comps/carousel/carousel-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, useMemo, useRef } from 'react';\n\nimport NextIcon from '../../../../assets/line-icons/icons/next';\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 FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\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 {\n GO_TO_NEXT_SLIDE_AFTER_MS,\n SHOW_LABEL_HIGHLIGHT_AFTER_MS,\n SHOW_NUDGE_AFTER_MS,\n} from './constants';\n\nexport const useGameLauncherJourney = ({\n onSegmentClick,\n setCarouselIndex,\n onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n const carouselNextBtnRef = useRef<ICarouselRefs>(null);\n const gameRefs = useRef<ISegmentedGameCardRefs>(null);\n const puzzleRefs = useRef<ISegmentedGameCardRefs>(null);\n const lessonRefs = useRef<ISegmentedGameCardRefs>(null);\n\n const isJourneyInProgress = useRef(false);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney } = useJourney();\n\n const goToNextCard = useCallback(\n (\n refOfNextSlide: ISegmentedGameCardRefs,\n color: TColorNames,\n journeyId: TJourneyId,\n isFirstSlide: boolean = false,\n ) => {\n if (!isFirstSlide) {\n playButtonSound();\n setCarouselIndex((prev: number) => prev + 1);\n nextCoachmark(journeyId, false, GO_TO_NEXT_SLIDE_AFTER_MS);\n }\n\n const animateLabelTimer = setTimeout(() => {\n clearTimeout(animateLabelTimer);\n refOfNextSlide.startLabelAnimation(color);\n }, SHOW_LABEL_HIGHLIGHT_AFTER_MS);\n\n nextCoachmark(journeyId, true, SHOW_NUDGE_AFTER_MS);\n },\n [nextCoachmark, playButtonSound, setCarouselIndex],\n );\n\n const endJourney = useCallback(\n (puzzlesData: Puzzle, journeyId: TJourneyId) => {\n onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n nextCoachmark(journeyId);\n onJourneyComplete(journeyId);\n },\n [nextCoachmark, onJourneyComplete, onSegmentClick],\n );\n\n const startJourney = useCallback(\n (puzzlesData: IProject<Puzzle>, isLessonAvailable: boolean, journeyId: TJourneyId) => {\n if (isJourneyInProgress.current) {\n return;\n }\n\n // If element refs are not available return, this is just for type safety\n if (\n !carouselNextBtnRef?.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 isJourneyInProgress.current = true;\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: 'right',\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,\n tooltipYCoOrdinates: lessonLabelDims.height / 2,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselNextBtnRef.current?.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={NextIcon}\n onClick={() =>\n goToNextCard(gameRefs.current as ISegmentedGameCardRefs, 'ORANGE_4', journeyId)\n }\n analyticsLabel=\"HELLO \"\n />\n ),\n indicator: {\n nudge: 'click',\n content: (\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: 'right',\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,\n tooltipYCoOrdinates: gameLabelDims.height / 2,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselNextBtnRef.current.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={NextIcon}\n onClick={() =>\n goToNextCard(puzzleRefs.current as ISegmentedGameCardRefs, 'PURPLE_4', journeyId)\n }\n analyticsLabel=\"HELLO \"\n />\n ),\n indicator: {\n nudge: 'click',\n content: (\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: 'right',\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,\n tooltipYCoOrdinates: puzzleLabelDims.height / 2,\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: () => endJourney(puzzle, journeyId),\n }))}\n />\n ),\n indicator: {\n nudge: 'click',\n content: (\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 nextCoachmark(journeyId);\n if (isLessonAvailable && lessonRefs.current) {\n goToNextCard(lessonRefs.current, 'BLUE_4', journeyId, true);\n } else {\n goToNextCard(gameRefs.current, 'ORANGE_4', journeyId, true);\n }\n },\n [endJourney, goToNextCard, nextCoachmark, setJourney],\n );\n\n const data = useMemo(\n () => ({\n gameRefs,\n puzzleRefs,\n lessonRefs,\n carouselNextBtnRef,\n isJourneyInProgress,\n startJourney,\n }),\n [startJourney],\n );\n\n return data;\n};\n"],"names":["useGameLauncherJourney","onSegmentClick","setCarouselIndex","onJourneyComplete","carouselNextBtnRef","useRef","gameRefs","puzzleRefs","lessonRefs","isJourneyInProgress","playButtonSound","useCircleSounds","nextCoachmark","setJourney","useJourney","goToNextCard","useCallback","refOfNextSlide","color","journeyId","isFirstSlide","prev","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS","endJourney","puzzlesData","ProjectType","startJourney","isLessonAvailable","_a","_b","_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","NextIcon","gameSteps","puzzleSteps","SegmentedGameCard","puzzle","useMemo"],"mappings":"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"}
|
|
@@ -1,65 +1,62 @@
|
|
|
1
|
-
import { jsxs as v, jsx as
|
|
2
|
-
import { createContext as
|
|
3
|
-
import { Coachmark as
|
|
4
|
-
import { BlurOverlay as
|
|
5
|
-
const
|
|
6
|
-
const [
|
|
1
|
+
import { jsxs as v, jsx as J } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as x, useState as $, useRef as f, useCallback as i, useMemo as p } from "react";
|
|
3
|
+
import { Coachmark as g } from "../comps/coachmark/coachmark.js";
|
|
4
|
+
import { BlurOverlay as A } from "./journey-styled.js";
|
|
5
|
+
const R = x(null), j = ({ children: C }) => {
|
|
6
|
+
const [o, u] = $([]), c = f(-1), r = f(), l = i(
|
|
7
7
|
(e, t) => {
|
|
8
|
-
if (
|
|
8
|
+
if (o.length > 0)
|
|
9
9
|
throw new Error(
|
|
10
10
|
`setJourney: Other Journey is already active, Current Journey: ${r.current}, New Journey Request: ${e}`
|
|
11
11
|
);
|
|
12
|
-
r.current = e,
|
|
12
|
+
r.current = e, c.current = -1, u([...t]);
|
|
13
13
|
},
|
|
14
|
-
[
|
|
15
|
-
),
|
|
16
|
-
r.current = void 0,
|
|
17
|
-
}, []),
|
|
14
|
+
[o.length]
|
|
15
|
+
), h = i(() => {
|
|
16
|
+
r.current = void 0, c.current = -1, u([]);
|
|
17
|
+
}, []), y = i((e, t) => {
|
|
18
18
|
if (!r.current || e !== r.current)
|
|
19
19
|
throw new Error(
|
|
20
20
|
r.current ? "addCoachmark was called before setJourney" : `A Journey is already active, Current Journey: ${r.current}, New Journey Request: ${e}`
|
|
21
21
|
);
|
|
22
|
-
u((
|
|
23
|
-
}, []),
|
|
24
|
-
(e, t = !1,
|
|
22
|
+
u((s) => [...s, t]);
|
|
23
|
+
}, []), d = i(
|
|
24
|
+
(e, t = !1, s = 0) => {
|
|
25
25
|
if (!r.current || e !== r.current)
|
|
26
26
|
throw new Error(
|
|
27
27
|
r.current ? "nextCoachmark was called before setJourney" : `A Journey is already active, Current Journey: ${r.current}, New Journey Request: ${e}`
|
|
28
28
|
);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
s !== 0 && u((n) => n.map((a) => ({ ...a, isActive: !1 })));
|
|
30
|
+
const w = setTimeout(() => {
|
|
31
|
+
clearTimeout(w);
|
|
32
|
+
const n = c.current + 1;
|
|
33
|
+
u((a) => {
|
|
34
|
+
if (n >= a.length || a.length === 0)
|
|
35
|
+
return r.current = void 0, c.current = -1, [];
|
|
36
|
+
c.current = n;
|
|
37
|
+
const m = [...a];
|
|
38
|
+
return m[n].isActive = !0, n > 0 && (m[n - 1].isActive = t), m;
|
|
37
39
|
});
|
|
38
|
-
};
|
|
39
|
-
a === 0 ? C() : i.current = setTimeout(() => {
|
|
40
|
-
C();
|
|
41
|
-
}, a);
|
|
40
|
+
}, s);
|
|
42
41
|
},
|
|
43
42
|
[]
|
|
44
|
-
),
|
|
43
|
+
), k = p(
|
|
45
44
|
() => ({
|
|
46
|
-
nextCoachmark:
|
|
47
|
-
setJourney:
|
|
48
|
-
addCoachmark:
|
|
49
|
-
clearJourney:
|
|
50
|
-
coachmarks:
|
|
45
|
+
nextCoachmark: d,
|
|
46
|
+
setJourney: l,
|
|
47
|
+
addCoachmark: y,
|
|
48
|
+
clearJourney: h,
|
|
49
|
+
coachmarks: o
|
|
51
50
|
}),
|
|
52
|
-
[
|
|
51
|
+
[d, l, y, h, o]
|
|
53
52
|
);
|
|
54
|
-
return
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
n.length > 0 && /* @__PURE__ */ k(E, { children: n.map((e, t) => /* @__PURE__ */ k(A, { coachmark: e }, `coachmark-${t}`)) }),
|
|
58
|
-
w
|
|
53
|
+
return /* @__PURE__ */ v(R.Provider, { value: k, children: [
|
|
54
|
+
o.length > 0 && /* @__PURE__ */ J(A, { children: o.map((e, t) => /* @__PURE__ */ J(g, { coachmark: e }, `coachmark-${t}`)) }),
|
|
55
|
+
C
|
|
59
56
|
] });
|
|
60
57
|
};
|
|
61
58
|
export {
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
R as JourneyContext,
|
|
60
|
+
j as JourneyProvider
|
|
64
61
|
};
|
|
65
62
|
//# sourceMappingURL=journey-context-provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"journey-context-provider.js","sources":["../../../../src/features/journey/use-journey/journey-context-provider.tsx"],"sourcesContent":["import type { TJourneyId } from '../journey-id/journey-id-types';\nimport type { ICoachmarkProps, IJourneyContext } from './journey-context-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { createContext, useCallback,
|
|
1
|
+
{"version":3,"file":"journey-context-provider.js","sources":["../../../../src/features/journey/use-journey/journey-context-provider.tsx"],"sourcesContent":["import type { TJourneyId } from '../journey-id/journey-id-types';\nimport type { ICoachmarkProps, IJourneyContext } from './journey-context-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { createContext, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { Coachmark } from '../comps/coachmark/coachmark';\nimport * as S from './journey-styled';\n\nexport const JourneyContext = createContext<IJourneyContext | null>(null);\n\nexport const JourneyProvider: FC<{ children: ReactNode }> = ({ children }) => {\n const [coachmarkList, setCoachmarkList] = useState<ICoachmarkProps[]>([]);\n const currentIndex = useRef(-1);\n const currentJourneyIdStudent = useRef<TJourneyId | undefined>();\n\n const setJourney = useCallback(\n (id: TJourneyId, coachmarks: ICoachmarkProps[]) => {\n if (coachmarkList.length > 0) {\n throw new Error(\n `setJourney: Other Journey is already active, Current Journey: ${currentJourneyIdStudent.current}, New Journey Request: ${id}`,\n );\n }\n currentJourneyIdStudent.current = id;\n currentIndex.current = -1;\n setCoachmarkList([...coachmarks]);\n },\n [coachmarkList.length],\n );\n\n const clearJourney = useCallback(() => {\n currentJourneyIdStudent.current = undefined;\n currentIndex.current = -1;\n setCoachmarkList([]);\n }, []);\n\n const addCoachmark = useCallback((id: TJourneyId, coachmark: ICoachmarkProps) => {\n if (!currentJourneyIdStudent.current || id !== currentJourneyIdStudent.current) {\n throw new Error(\n currentJourneyIdStudent.current\n ? `addCoachmark was called before setJourney`\n : `A Journey is already active, Current Journey: ${currentJourneyIdStudent.current}, New Journey Request: ${id}`,\n );\n }\n\n setCoachmarkList(prev => [...prev, coachmark]);\n }, []);\n\n const nextCoachmark = useCallback(\n (id: TJourneyId, keepPrevActive: boolean = false, delayInMs: number = 0) => {\n if (!currentJourneyIdStudent.current || id !== currentJourneyIdStudent.current) {\n throw new Error(\n currentJourneyIdStudent.current\n ? `nextCoachmark was called before setJourney`\n : `A Journey is already active, Current Journey: ${currentJourneyIdStudent.current}, New Journey Request: ${id}`,\n );\n }\n\n if (delayInMs !== 0) {\n // If delay is not 0, we will hide all them coachmarks and reveal only after the delay\n setCoachmarkList(prevList => {\n return prevList.map((item: ICoachmarkProps) => {\n return { ...item, isActive: false };\n });\n });\n }\n\n const timer = setTimeout(() => {\n clearTimeout(timer);\n const currIndex = currentIndex.current + 1;\n\n setCoachmarkList(prevList => {\n // Finish onboarding\n if (currIndex >= prevList.length || prevList.length === 0) {\n currentJourneyIdStudent.current = undefined;\n currentIndex.current = -1;\n\n return [];\n }\n\n currentIndex.current = currIndex;\n const updatedCoachmarkList = [...prevList];\n\n (updatedCoachmarkList[currIndex] as ICoachmarkProps).isActive = true;\n\n if (currIndex > 0) {\n (updatedCoachmarkList[currIndex - 1] as ICoachmarkProps).isActive = keepPrevActive;\n }\n\n return updatedCoachmarkList;\n });\n }, delayInMs);\n },\n [],\n );\n\n const memoizedContextValue = useMemo(\n () => ({\n nextCoachmark,\n setJourney,\n addCoachmark,\n clearJourney,\n coachmarks: coachmarkList,\n }),\n [nextCoachmark, setJourney, addCoachmark, clearJourney, coachmarkList],\n );\n\n return (\n <JourneyContext.Provider value={memoizedContextValue}>\n {coachmarkList.length > 0 && (\n <S.BlurOverlay>\n {coachmarkList.map((coachmark, index) => (\n <Coachmark key={`coachmark-${index}`} coachmark={coachmark} />\n ))}\n </S.BlurOverlay>\n )}\n {children}\n </JourneyContext.Provider>\n );\n};\n"],"names":["JourneyContext","createContext","JourneyProvider","children","coachmarkList","setCoachmarkList","useState","currentIndex","useRef","currentJourneyIdStudent","setJourney","useCallback","id","coachmarks","clearJourney","addCoachmark","coachmark","prev","nextCoachmark","keepPrevActive","delayInMs","prevList","item","timer","currIndex","updatedCoachmarkList","memoizedContextValue","useMemo","jsxs","jsx","S.BlurOverlay","index","Coachmark"],"mappings":";;;;AASa,MAAAA,IAAiBC,EAAsC,IAAI,GAE3DC,IAA+C,CAAC,EAAE,UAAAC,QAAe;AAC5E,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA4B,CAAE,CAAA,GAClEC,IAAeC,EAAO,EAAE,GACxBC,IAA0BD,KAE1BE,IAAaC;AAAA,IACjB,CAACC,GAAgBC,MAAkC;AAC7C,UAAAT,EAAc,SAAS;AACzB,cAAM,IAAI;AAAA,UACR,iEAAiEK,EAAwB,OAAO,0BAA0BG,CAAE;AAAA,QAAA;AAGhI,MAAAH,EAAwB,UAAUG,GAClCL,EAAa,UAAU,IACNF,EAAA,CAAC,GAAGQ,CAAU,CAAC;AAAA,IAClC;AAAA,IACA,CAACT,EAAc,MAAM;AAAA,EAAA,GAGjBU,IAAeH,EAAY,MAAM;AACrC,IAAAF,EAAwB,UAAU,QAClCF,EAAa,UAAU,IACvBF,EAAiB,CAAE,CAAA;AAAA,EACrB,GAAG,CAAE,CAAA,GAECU,IAAeJ,EAAY,CAACC,GAAgBI,MAA+B;AAC/E,QAAI,CAACP,EAAwB,WAAWG,MAAOH,EAAwB;AACrE,YAAM,IAAI;AAAA,QACRA,EAAwB,UACpB,8CACA,iDAAiDA,EAAwB,OAAO,0BAA0BG,CAAE;AAAA,MAAA;AAIpH,IAAAP,EAAiB,CAAQY,MAAA,CAAC,GAAGA,GAAMD,CAAS,CAAC;AAAA,EAC/C,GAAG,CAAE,CAAA,GAECE,IAAgBP;AAAA,IACpB,CAACC,GAAgBO,IAA0B,IAAOC,IAAoB,MAAM;AAC1E,UAAI,CAACX,EAAwB,WAAWG,MAAOH,EAAwB;AACrE,cAAM,IAAI;AAAA,UACRA,EAAwB,UACpB,+CACA,iDAAiDA,EAAwB,OAAO,0BAA0BG,CAAE;AAAA,QAAA;AAIpH,MAAIQ,MAAc,KAEhBf,EAAiB,CAAYgB,MACpBA,EAAS,IAAI,CAACC,OACZ,EAAE,GAAGA,GAAM,UAAU,GAAM,EACnC,CACF;AAGG,YAAAC,IAAQ,WAAW,MAAM;AAC7B,qBAAaA,CAAK;AACZ,cAAAC,IAAYjB,EAAa,UAAU;AAEzC,QAAAF,EAAiB,CAAYgB,MAAA;AAE3B,cAAIG,KAAaH,EAAS,UAAUA,EAAS,WAAW;AACtD,mBAAAZ,EAAwB,UAAU,QAClCF,EAAa,UAAU,IAEhB;AAGT,UAAAA,EAAa,UAAUiB;AACjB,gBAAAC,IAAuB,CAAC,GAAGJ,CAAQ;AAExC,iBAAAI,EAAqBD,CAAS,EAAsB,WAAW,IAE5DA,IAAY,MACbC,EAAqBD,IAAY,CAAC,EAAsB,WAAWL,IAG/DM;AAAA,QAAA,CACR;AAAA,SACAL,CAAS;AAAA,IACd;AAAA,IACA,CAAC;AAAA,EAAA,GAGGM,IAAuBC;AAAA,IAC3B,OAAO;AAAA,MACL,eAAAT;AAAA,MACA,YAAAR;AAAA,MACA,cAAAK;AAAA,MACA,cAAAD;AAAA,MACA,YAAYV;AAAA,IAAA;AAAA,IAEd,CAACc,GAAeR,GAAYK,GAAcD,GAAcV,CAAa;AAAA,EAAA;AAGvE,SACG,gBAAAwB,EAAA5B,EAAe,UAAf,EAAwB,OAAO0B,GAC7B,UAAA;AAAA,IAAAtB,EAAc,SAAS,KACtB,gBAAAyB,EAACC,GAAA,EACE,YAAc,IAAI,CAACd,GAAWe,wBAC5BC,GAAqC,EAAA,WAAAhB,EAAA,GAAtB,aAAae,CAAK,EAA0B,CAC7D,GACH;AAAA,IAED5B;AAAA,EACH,EAAA,CAAA;AAEJ;"}
|