@cuemath/leap 2.8.62-rj-0.3 → 2.8.62-rj-0.4

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.
@@ -1,62 +1,73 @@
1
1
  import { jsx as i } from "react/jsx-runtime";
2
- import { memo as O, useRef as g, useCallback as n, useMemo as h, useEffect as x } from "react";
3
- import { LOTTIE as D } from "../../../assets/lottie/lottie.js";
4
- import { JOURNEY_ID_STUDENT as z } from "../../journey/journey-id/journey-id-student.js";
5
- import { useJourney as U } from "../../journey/use-journey/use-journey.js";
6
- import { CircularLoader as Y } from "../../ui/loader/circular-loader/circular-loader.js";
7
- import B from "../../ui/lottie-animation/lottie-animation.js";
8
- import { useCircleSounds as K } from "../hooks/use-circle-sounds/use-circle-sounds.js";
9
- import { CircleSoundKey as u } from "../hooks/use-circle-sounds/use-circle-sounds-enums.js";
10
- import { GAME_LAUNCHER_SIZE as H } from "./comps/card-container/constants.js";
11
- import { Carousel as G } from "./comps/carousel/carousel.js";
12
- import { GAME_LAUNCHER_ASSET_PADDING as Z } from "./comps/segmented-game-card/constants.js";
13
- import { SegmentedGameCard as E } from "./comps/segmented-game-card/segmented-game-card.js";
14
- import { TablesCard as w } from "./comps/tables-card/tables-card.js";
15
- import { GAME_LAUNCHER_ANALYTICS_EVENTS as V } from "./game-launcher-analytics-events.js";
16
- import { useGameLauncherJourney as X } from "./hooks/use-game-launcher-journey/use-game-launcher-journey.js";
17
- import { useTableLauncherJourney as q } from "./hooks/use-table-launcher-journey/use-table-launcher-journey.js";
18
- import { ProjectType as f } from "../games/web-view/enums/project-type-enum.js";
19
- const S = H + Z, pe = O(
20
- ({ onSegmentClick: r, journeyId: m, data: e, isLoading: p, isTutorialOnboardingDone: a, defaultIndex: J = 0 }) => {
21
- const t = g(null), { isJourneyActive: C } = U(), { playSwipSound: L, play: o } = K(), c = n(
2
+ import { memo as x, useRef as D, useCallback as t, useMemo as z, useEffect as U } from "react";
3
+ import { LOTTIE as Y } from "../../../assets/lottie/lottie.js";
4
+ import { JOURNEY_ID_STUDENT as G } from "../../journey/journey-id/journey-id-student.js";
5
+ import { useJourney as B } from "../../journey/use-journey/use-journey.js";
6
+ import { CircularLoader as K } from "../../ui/loader/circular-loader/circular-loader.js";
7
+ import H from "../../ui/lottie-animation/lottie-animation.js";
8
+ import { useCircleSounds as Z } from "../hooks/use-circle-sounds/use-circle-sounds.js";
9
+ import { CircleSoundKey as n } from "../hooks/use-circle-sounds/use-circle-sounds-enums.js";
10
+ import { GAME_LAUNCHER_SIZE as w } from "./comps/card-container/constants.js";
11
+ import { Carousel as V } from "./comps/carousel/carousel.js";
12
+ import { GAME_LAUNCHER_ASSET_PADDING as X } from "./comps/segmented-game-card/constants.js";
13
+ import { SegmentedGameCard as a } from "./comps/segmented-game-card/segmented-game-card.js";
14
+ import { TablesCard as j } from "./comps/tables-card/tables-card.js";
15
+ import { GAME_LAUNCHER_ANALYTICS_EVENTS as S } from "./game-launcher-analytics-events.js";
16
+ import { useGameLauncherJourney as q } from "./hooks/use-game-launcher-journey/use-game-launcher-journey.js";
17
+ import { useTableLauncherJourney as F } from "./hooks/use-table-launcher-journey/use-table-launcher-journey.js";
18
+ import { ProjectType as u } from "../games/web-view/enums/project-type-enum.js";
19
+ const M = w + X, ae = x(
20
+ ({
21
+ onSegmentClick: r,
22
+ journeyId: f,
23
+ data: e,
24
+ isLoading: p,
25
+ isTutorialOnboardingDone: E,
26
+ defaultIndex: J = 0,
27
+ showError: v,
28
+ onJourneyComplete: C
29
+ }) => {
30
+ const m = D(null), { isJourneyActive: L } = B(), { playSwipSound: _, play: o } = Z(), c = t(
22
31
  (l) => {
23
- o(u.GAME_CARD_CLICK), r(l, f.TABLE);
32
+ o(n.GAME_CARD_CLICK), r(l, u.TABLE);
24
33
  },
25
34
  [r, o]
26
- ), _ = n(
35
+ ), A = t(
27
36
  (l) => {
28
- l.status !== "completed" && (o(u.GAME_CARD_CLICK), r(l, f.LESSON));
37
+ l.status !== "completed" && (o(n.GAME_CARD_CLICK), r(l, u.LESSON));
29
38
  },
30
39
  [r, o]
31
- ), A = n(
40
+ ), b = t(
32
41
  (l) => {
33
- o(u.GAME_CARD_CLICK), r(l, f.GAME);
42
+ o(n.GAME_CARD_CLICK), r(l, u.GAME);
34
43
  },
35
44
  [r, o]
36
- ), b = n(
45
+ ), T = t(
37
46
  (l) => {
38
- o(u.GAME_CARD_CLICK), r(l, f.PUZZLE);
47
+ o(n.GAME_CARD_CLICK), r(l, u.PUZZLE);
39
48
  },
40
49
  [r, o]
41
50
  ), {
42
- gameRefs: T,
43
- lessonRefs: y,
44
- puzzleRefs: R,
45
- startJourney: I
46
- } = X({
47
- carouselRefs: t,
48
- onSegmentClick: r
49
- }), { startJourney: P, tableRef: N } = q({
50
- carouselRefs: t,
51
- onTableSegmentClick: c
52
- }), M = h(() => {
51
+ gameRefs: y,
52
+ lessonRefs: R,
53
+ puzzleRefs: I,
54
+ startJourney: P
55
+ } = q({
56
+ carouselRefs: m,
57
+ onSegmentClick: r,
58
+ onJourneyComplete: C
59
+ }), { startJourney: N, tableRef: h } = F({
60
+ carouselRefs: m,
61
+ onTableSegmentClick: c,
62
+ onJourneyComplete: C
63
+ }), O = z(() => {
53
64
  let l = [];
54
65
  return e && (e.lessons && (l = [
55
66
  ...l,
56
67
  /* @__PURE__ */ i(
57
- E,
68
+ a,
58
69
  {
59
- ref: y,
70
+ ref: R,
60
71
  label: e.lessons.label,
61
72
  value: e.lessons.data.filter((s) => s.status === "completed").length,
62
73
  maxValue: e.lessons.data.length,
@@ -65,16 +76,16 @@ const S = H + Z, pe = O(
65
76
  card: s.cardLottie,
66
77
  name: s.name,
67
78
  isCompleted: s.status === "completed",
68
- onPress: () => _(s)
79
+ onPress: () => A(s)
69
80
  }))
70
81
  }
71
82
  )
72
83
  ]), l = [
73
84
  ...l,
74
85
  /* @__PURE__ */ i(
75
- E,
86
+ a,
76
87
  {
77
- ref: T,
88
+ ref: y,
78
89
  label: e.games.label,
79
90
  value: e.games.data.filter((s) => s.isPlayed).length,
80
91
  maxValue: e.games.data.length,
@@ -83,14 +94,14 @@ const S = H + Z, pe = O(
83
94
  card: s.cardLottie,
84
95
  name: s.name,
85
96
  isCompleted: !1,
86
- onPress: () => A(s)
97
+ onPress: () => b(s)
87
98
  }))
88
99
  }
89
100
  ),
90
101
  /* @__PURE__ */ i(
91
- E,
102
+ a,
92
103
  {
93
- ref: R,
104
+ ref: I,
94
105
  label: e.puzzles.label,
95
106
  value: e.puzzles.data.filter((s) => s.solved).length,
96
107
  maxValue: e.puzzles.data.length,
@@ -99,16 +110,16 @@ const S = H + Z, pe = O(
99
110
  card: s.cardLottie,
100
111
  name: s.name,
101
112
  isCompleted: s.solved,
102
- onPress: () => b(s)
113
+ onPress: () => T(s)
103
114
  }))
104
115
  }
105
116
  )
106
117
  ], e.tables && (l = [
107
118
  ...l,
108
119
  /* @__PURE__ */ i(
109
- w,
120
+ j,
110
121
  {
111
- ref: N,
122
+ ref: h,
112
123
  label: e.tables.label,
113
124
  data: e.tables.data,
114
125
  onPress: c,
@@ -118,74 +129,74 @@ const S = H + Z, pe = O(
118
129
  ])), l;
119
130
  }, [
120
131
  e,
121
- T,
122
- R,
123
132
  y,
124
- _,
133
+ I,
134
+ R,
125
135
  A,
126
136
  b,
127
- N,
137
+ T,
138
+ h,
128
139
  c
129
- ]), v = h(
140
+ ]), g = z(
130
141
  () => [
131
142
  /* @__PURE__ */ i(
132
- B,
143
+ H,
133
144
  {
134
- src: D.SLEEPY_BOI,
135
- width: S,
136
- height: S
145
+ src: Y.SLEEPY_BOI,
146
+ width: M,
147
+ height: M
137
148
  }
138
149
  )
139
150
  ],
140
151
  []
141
152
  );
142
- return x(() => {
143
- if (!(p || !e || C)) {
144
- if (e != null && e.puzzles && m === z.CIRCLE_ACTIVITIES_INTRO_JOURNEY) {
145
- I(e == null ? void 0 : e.puzzles, !!(e != null && e.lessons), m);
153
+ return U(() => {
154
+ if (!(p || !e || L)) {
155
+ if (e != null && e.puzzles && f === G.CIRCLE_ACTIVITIES_INTRO_JOURNEY) {
156
+ P(e == null ? void 0 : e.puzzles, !!(e != null && e.lessons));
146
157
  return;
147
158
  }
148
- e != null && e.tables && m === z.CIRCLE_TABLES_INTRO_JOURNEY && P(e == null ? void 0 : e.tables, a);
159
+ e != null && e.tables && f === G.CIRCLE_TABLES_INTRO_JOURNEY && N(e == null ? void 0 : e.tables, E);
149
160
  }
150
161
  }, [
151
162
  e,
152
- C,
163
+ L,
153
164
  p,
154
- a,
155
- m,
156
- I,
157
- P
158
- ]), p ? /* @__PURE__ */ i(Y, {}) : e ? /* @__PURE__ */ i(
159
- G,
165
+ E,
166
+ f,
167
+ P,
168
+ N
169
+ ]), p ? /* @__PURE__ */ i(K, {}) : v ? /* @__PURE__ */ i(
170
+ V,
160
171
  {
161
- ref: t,
162
- items: M,
163
- defaultIndex: J,
164
- onNext: L,
165
- onPrev: L,
172
+ ref: m,
173
+ items: g,
166
174
  analyticsNext: {
167
- analyticsLabel: V.NEXT_ACTIVITY
175
+ analyticsLabel: ""
168
176
  },
169
177
  analyticsPrev: {
170
- analyticsLabel: V.PREV_ACTIVITY
178
+ analyticsLabel: ""
171
179
  }
172
180
  }
173
181
  ) : /* @__PURE__ */ i(
174
- G,
182
+ V,
175
183
  {
176
- ref: t,
177
- items: v,
184
+ ref: m,
185
+ items: O,
186
+ defaultIndex: J,
187
+ onNext: _,
188
+ onPrev: _,
178
189
  analyticsNext: {
179
- analyticsLabel: ""
190
+ analyticsLabel: S.NEXT_ACTIVITY
180
191
  },
181
192
  analyticsPrev: {
182
- analyticsLabel: ""
193
+ analyticsLabel: S.PREV_ACTIVITY
183
194
  }
184
195
  }
185
196
  );
186
197
  }
187
198
  );
188
199
  export {
189
- pe as GameLauncher
200
+ ae as GameLauncher
190
201
  };
191
202
  //# sourceMappingURL=game-launcher.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"game-launcher.js","sources":["../../../../src/features/circle-games/game-launcher/game-launcher.tsx"],"sourcesContent":["import type { ICarouselRefs } from './comps/carousel/carousel-types';\nimport type { ITableDetails } from './comps/tables-card/tables-card-types';\nimport type {\n Game,\n Lesson,\n Puzzle,\n} from './dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IGameLauncherProps } from './game-launcher-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { JOURNEY_ID_STUDENT } from '../../journey/journey-id/journey-id-student';\nimport { useJourney } from '../../journey/use-journey/use-journey';\nimport { CircularLoader } from '../../ui/loader/circular-loader/circular-loader';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { ProjectType } from '../games/web-view/enums';\nimport { useCircleSounds } from '../hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { GAME_LAUNCHER_SIZE } from './comps/card-container/constants';\nimport { Carousel } from './comps/carousel/carousel';\nimport { GAME_LAUNCHER_ASSET_PADDING } from './comps/segmented-game-card/constants';\nimport { SegmentedGameCard } from './comps/segmented-game-card/segmented-game-card';\nimport { TablesCard } from './comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from './game-launcher-analytics-events';\nimport { useGameLauncherJourney } from './hooks/use-game-launcher-journey/use-game-launcher-journey';\nimport { useTableLauncherJourney } from './hooks/use-table-launcher-journey/use-table-launcher-journey';\n\nconst sleepyBoiDimension = GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING;\n\nexport const GameLauncher: FC<IGameLauncherProps> = memo(\n ({ onSegmentClick, journeyId, data, isLoading, isTutorialOnboardingDone, defaultIndex = 0 }) => {\n const carouselRefs = useRef<ICarouselRefs>(null);\n\n const { isJourneyActive } = useJourney();\n\n const { playSwipSound, play } = useCircleSounds();\n\n const onTableSegmentClick = useCallback(\n (table: ITableDetails) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(table, ProjectType.TABLE);\n },\n [onSegmentClick, play],\n );\n\n const handleLessonSegmentClick = useCallback(\n (lesson: Lesson) => {\n if (lesson.status !== 'completed') {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(lesson, ProjectType.LESSON);\n }\n },\n [onSegmentClick, play],\n );\n\n const handleGameSegmentClick = useCallback(\n (game: Game) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(game, ProjectType.GAME);\n },\n [onSegmentClick, play],\n );\n\n const handlePuzzleSegmentClick = useCallback(\n (puzzle: Puzzle) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(puzzle, ProjectType.PUZZLE);\n },\n [onSegmentClick, play],\n );\n\n const {\n gameRefs,\n lessonRefs,\n puzzleRefs,\n startJourney: startLessonPuzzleGamesJourney,\n } = useGameLauncherJourney({\n carouselRefs,\n onSegmentClick,\n });\n\n const { startJourney: startTablesJourney, tableRef } = useTableLauncherJourney({\n carouselRefs,\n onTableSegmentClick,\n });\n\n const items = useMemo(() => {\n let itemTypes: ReactNode[] = [];\n\n if (data) {\n if (data.lessons) {\n itemTypes = [\n ...itemTypes,\n <SegmentedGameCard\n ref={lessonRefs}\n label={data.lessons.label}\n value={data.lessons.data.filter(lesson => lesson.status === 'completed').length}\n maxValue={data.lessons.data.length}\n initialValue={data.lessons.initialProgressValue}\n data={data?.lessons.data.map(lesson => ({\n card: lesson.cardLottie,\n name: lesson.name,\n isCompleted: lesson.status === 'completed',\n onPress: () => handleLessonSegmentClick(lesson),\n }))}\n />,\n ];\n }\n\n itemTypes = [\n ...itemTypes,\n <SegmentedGameCard\n ref={gameRefs}\n label={data.games.label}\n value={data.games.data.filter(game => game.isPlayed).length}\n maxValue={data.games.data.length}\n initialValue={data.games.initialProgressValue}\n data={data.games.data.map(game => ({\n card: game.cardLottie,\n name: game.name,\n isCompleted: false,\n onPress: () => handleGameSegmentClick(game),\n }))}\n />,\n <SegmentedGameCard\n ref={puzzleRefs}\n label={data.puzzles.label}\n value={data.puzzles.data.filter(puzzle => puzzle.solved).length}\n maxValue={data.puzzles.data.length}\n initialValue={data.puzzles.initialProgressValue}\n data={data.puzzles.data.map(puzzle => ({\n card: puzzle.cardLottie,\n name: puzzle.name,\n isCompleted: puzzle.solved,\n onPress: () => handlePuzzleSegmentClick(puzzle),\n }))}\n />,\n ];\n\n if (data.tables) {\n itemTypes = [\n ...itemTypes,\n <TablesCard\n ref={tableRef}\n label={data.tables.label}\n data={data.tables.data}\n onPress={onTableSegmentClick}\n openModesOfTable={data.tables.openModesOfTable}\n />,\n ];\n }\n }\n\n return itemTypes;\n }, [\n data,\n gameRefs,\n puzzleRefs,\n lessonRefs,\n handleLessonSegmentClick,\n handleGameSegmentClick,\n handlePuzzleSegmentClick,\n tableRef,\n onTableSegmentClick,\n ]);\n\n const sleepyBoiItem = useMemo(\n () => [\n <LottieAnimation\n src={LOTTIE.SLEEPY_BOI}\n width={sleepyBoiDimension}\n height={sleepyBoiDimension}\n />,\n ],\n [],\n );\n\n // Start game launcher journey only when isLoading has become false and data is available\n useEffect(() => {\n if (isLoading || !data || isJourneyActive) {\n return;\n }\n\n if (data?.puzzles && journeyId === JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY) {\n startLessonPuzzleGamesJourney(data?.puzzles, !!data?.lessons, journeyId);\n\n return; // CIRCLE_ACTIVITIES_INTRO_JOURNEY has higher priority\n }\n\n if (data?.tables && journeyId === JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY) {\n startTablesJourney(data?.tables, isTutorialOnboardingDone);\n }\n }, [\n data,\n isJourneyActive,\n isLoading,\n isTutorialOnboardingDone,\n journeyId,\n startLessonPuzzleGamesJourney,\n startTablesJourney,\n ]);\n\n if (isLoading) {\n return <CircularLoader />;\n }\n\n if (!data) {\n return (\n <Carousel\n ref={carouselRefs}\n items={sleepyBoiItem}\n analyticsNext={{\n analyticsLabel: '',\n }}\n analyticsPrev={{\n analyticsLabel: '',\n }}\n />\n );\n }\n\n return (\n <Carousel\n ref={carouselRefs}\n items={items}\n defaultIndex={defaultIndex}\n onNext={playSwipSound}\n onPrev={playSwipSound}\n analyticsNext={{\n analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.NEXT_ACTIVITY,\n }}\n analyticsPrev={{\n analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.PREV_ACTIVITY,\n }}\n />\n );\n },\n);\n"],"names":["sleepyBoiDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GameLauncher","memo","onSegmentClick","journeyId","data","isLoading","isTutorialOnboardingDone","defaultIndex","carouselRefs","useRef","isJourneyActive","useJourney","playSwipSound","play","useCircleSounds","onTableSegmentClick","useCallback","table","CircleSoundKey","ProjectType","handleLessonSegmentClick","lesson","handleGameSegmentClick","game","handlePuzzleSegmentClick","puzzle","gameRefs","lessonRefs","puzzleRefs","startLessonPuzzleGamesJourney","useGameLauncherJourney","startTablesJourney","tableRef","useTableLauncherJourney","items","useMemo","itemTypes","jsx","SegmentedGameCard","TablesCard","sleepyBoiItem","LottieAnimation","LOTTIE","useEffect","JOURNEY_ID_STUDENT","CircularLoader","Carousel","GAME_LAUNCHER_ANALYTICS_EVENTS"],"mappings":"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"}
1
+ {"version":3,"file":"game-launcher.js","sources":["../../../../src/features/circle-games/game-launcher/game-launcher.tsx"],"sourcesContent":["import type { ICarouselRefs } from './comps/carousel/carousel-types';\nimport type { ITableDetails } from './comps/tables-card/tables-card-types';\nimport type {\n Game,\n Lesson,\n Puzzle,\n} from './dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IGameLauncherProps } from './game-launcher-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { JOURNEY_ID_STUDENT } from '../../journey/journey-id/journey-id-student';\nimport { useJourney } from '../../journey/use-journey/use-journey';\nimport { CircularLoader } from '../../ui/loader/circular-loader/circular-loader';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { ProjectType } from '../games/web-view/enums';\nimport { useCircleSounds } from '../hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { GAME_LAUNCHER_SIZE } from './comps/card-container/constants';\nimport { Carousel } from './comps/carousel/carousel';\nimport { GAME_LAUNCHER_ASSET_PADDING } from './comps/segmented-game-card/constants';\nimport { SegmentedGameCard } from './comps/segmented-game-card/segmented-game-card';\nimport { TablesCard } from './comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from './game-launcher-analytics-events';\nimport { useGameLauncherJourney } from './hooks/use-game-launcher-journey/use-game-launcher-journey';\nimport { useTableLauncherJourney } from './hooks/use-table-launcher-journey/use-table-launcher-journey';\n\nconst sleepyBoiDimension = GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING;\n\nexport const GameLauncher: FC<IGameLauncherProps> = memo(\n ({\n onSegmentClick,\n journeyId,\n data,\n isLoading,\n isTutorialOnboardingDone,\n defaultIndex = 0,\n showError,\n onJourneyComplete,\n }) => {\n const carouselRefs = useRef<ICarouselRefs>(null);\n\n const { isJourneyActive } = useJourney();\n\n const { playSwipSound, play } = useCircleSounds();\n\n const onTableSegmentClick = useCallback(\n (table: ITableDetails) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(table, ProjectType.TABLE);\n },\n [onSegmentClick, play],\n );\n\n const handleLessonSegmentClick = useCallback(\n (lesson: Lesson) => {\n if (lesson.status !== 'completed') {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(lesson, ProjectType.LESSON);\n }\n },\n [onSegmentClick, play],\n );\n\n const handleGameSegmentClick = useCallback(\n (game: Game) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(game, ProjectType.GAME);\n },\n [onSegmentClick, play],\n );\n\n const handlePuzzleSegmentClick = useCallback(\n (puzzle: Puzzle) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(puzzle, ProjectType.PUZZLE);\n },\n [onSegmentClick, play],\n );\n\n const {\n gameRefs,\n lessonRefs,\n puzzleRefs,\n startJourney: startLessonPuzzleGamesJourney,\n } = useGameLauncherJourney({\n carouselRefs,\n onSegmentClick,\n onJourneyComplete,\n });\n\n const { startJourney: startTablesJourney, tableRef } = useTableLauncherJourney({\n carouselRefs,\n onTableSegmentClick,\n onJourneyComplete,\n });\n\n const items = useMemo(() => {\n let itemTypes: ReactNode[] = [];\n\n if (data) {\n if (data.lessons) {\n itemTypes = [\n ...itemTypes,\n <SegmentedGameCard\n ref={lessonRefs}\n label={data.lessons.label}\n value={data.lessons.data.filter(lesson => lesson.status === 'completed').length}\n maxValue={data.lessons.data.length}\n initialValue={data.lessons.initialProgressValue}\n data={data?.lessons.data.map(lesson => ({\n card: lesson.cardLottie,\n name: lesson.name,\n isCompleted: lesson.status === 'completed',\n onPress: () => handleLessonSegmentClick(lesson),\n }))}\n />,\n ];\n }\n\n itemTypes = [\n ...itemTypes,\n <SegmentedGameCard\n ref={gameRefs}\n label={data.games.label}\n value={data.games.data.filter(game => game.isPlayed).length}\n maxValue={data.games.data.length}\n initialValue={data.games.initialProgressValue}\n data={data.games.data.map(game => ({\n card: game.cardLottie,\n name: game.name,\n isCompleted: false,\n onPress: () => handleGameSegmentClick(game),\n }))}\n />,\n <SegmentedGameCard\n ref={puzzleRefs}\n label={data.puzzles.label}\n value={data.puzzles.data.filter(puzzle => puzzle.solved).length}\n maxValue={data.puzzles.data.length}\n initialValue={data.puzzles.initialProgressValue}\n data={data.puzzles.data.map(puzzle => ({\n card: puzzle.cardLottie,\n name: puzzle.name,\n isCompleted: puzzle.solved,\n onPress: () => handlePuzzleSegmentClick(puzzle),\n }))}\n />,\n ];\n\n if (data.tables) {\n itemTypes = [\n ...itemTypes,\n <TablesCard\n ref={tableRef}\n label={data.tables.label}\n data={data.tables.data}\n onPress={onTableSegmentClick}\n openModesOfTable={data.tables.openModesOfTable}\n />,\n ];\n }\n }\n\n return itemTypes;\n }, [\n data,\n gameRefs,\n puzzleRefs,\n lessonRefs,\n handleLessonSegmentClick,\n handleGameSegmentClick,\n handlePuzzleSegmentClick,\n tableRef,\n onTableSegmentClick,\n ]);\n\n const sleepyBoiItem = useMemo(\n () => [\n <LottieAnimation\n src={LOTTIE.SLEEPY_BOI}\n width={sleepyBoiDimension}\n height={sleepyBoiDimension}\n />,\n ],\n [],\n );\n\n // Start game launcher journey only when isLoading has become false and data is available\n useEffect(() => {\n if (isLoading || !data || isJourneyActive) {\n return;\n }\n\n if (data?.puzzles && journeyId === JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY) {\n startLessonPuzzleGamesJourney(data?.puzzles, !!data?.lessons);\n\n return; // CIRCLE_ACTIVITIES_INTRO_JOURNEY has higher priority\n }\n\n if (data?.tables && journeyId === JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY) {\n startTablesJourney(data?.tables, isTutorialOnboardingDone);\n }\n }, [\n data,\n isJourneyActive,\n isLoading,\n isTutorialOnboardingDone,\n journeyId,\n startLessonPuzzleGamesJourney,\n startTablesJourney,\n ]);\n\n if (isLoading) {\n return <CircularLoader />;\n }\n\n if (showError) {\n return (\n <Carousel\n ref={carouselRefs}\n items={sleepyBoiItem}\n analyticsNext={{\n analyticsLabel: '',\n }}\n analyticsPrev={{\n analyticsLabel: '',\n }}\n />\n );\n }\n\n return (\n <Carousel\n ref={carouselRefs}\n items={items}\n defaultIndex={defaultIndex}\n onNext={playSwipSound}\n onPrev={playSwipSound}\n analyticsNext={{\n analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.NEXT_ACTIVITY,\n }}\n analyticsPrev={{\n analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.PREV_ACTIVITY,\n }}\n />\n );\n },\n);\n"],"names":["sleepyBoiDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GameLauncher","memo","onSegmentClick","journeyId","data","isLoading","isTutorialOnboardingDone","defaultIndex","showError","onJourneyComplete","carouselRefs","useRef","isJourneyActive","useJourney","playSwipSound","play","useCircleSounds","onTableSegmentClick","useCallback","table","CircleSoundKey","ProjectType","handleLessonSegmentClick","lesson","handleGameSegmentClick","game","handlePuzzleSegmentClick","puzzle","gameRefs","lessonRefs","puzzleRefs","startLessonPuzzleGamesJourney","useGameLauncherJourney","startTablesJourney","tableRef","useTableLauncherJourney","items","useMemo","itemTypes","jsx","SegmentedGameCard","TablesCard","sleepyBoiItem","LottieAnimation","LOTTIE","useEffect","JOURNEY_ID_STUDENT","CircularLoader","Carousel","GAME_LAUNCHER_ANALYTICS_EVENTS"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,MAAMA,IAAqBC,IAAqBC,GAEnCC,KAAuCC;AAAA,EAClD,CAAC;AAAA,IACC,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,WAAAC;AAAA,IACA,mBAAAC;AAAA,EAAA,MACI;AACE,UAAAC,IAAeC,EAAsB,IAAI,GAEzC,EAAE,iBAAAC,MAAoBC,KAEtB,EAAE,eAAAC,GAAe,MAAAC,EAAK,IAAIC,EAAgB,GAE1CC,IAAsBC;AAAA,MAC1B,CAACC,MAAyB;AACxB,QAAAJ,EAAKK,EAAe,eAAe,GACpBlB,EAAAiB,GAAOE,EAAY,KAAK;AAAA,MACzC;AAAA,MACA,CAACnB,GAAgBa,CAAI;AAAA,IAAA,GAGjBO,IAA2BJ;AAAA,MAC/B,CAACK,MAAmB;AACd,QAAAA,EAAO,WAAW,gBACpBR,EAAKK,EAAe,eAAe,GACpBlB,EAAAqB,GAAQF,EAAY,MAAM;AAAA,MAE7C;AAAA,MACA,CAACnB,GAAgBa,CAAI;AAAA,IAAA,GAGjBS,IAAyBN;AAAA,MAC7B,CAACO,MAAe;AACd,QAAAV,EAAKK,EAAe,eAAe,GACpBlB,EAAAuB,GAAMJ,EAAY,IAAI;AAAA,MACvC;AAAA,MACA,CAACnB,GAAgBa,CAAI;AAAA,IAAA,GAGjBW,IAA2BR;AAAA,MAC/B,CAACS,MAAmB;AAClB,QAAAZ,EAAKK,EAAe,eAAe,GACpBlB,EAAAyB,GAAQN,EAAY,MAAM;AAAA,MAC3C;AAAA,MACA,CAACnB,GAAgBa,CAAI;AAAA,IAAA,GAGjB;AAAA,MACJ,UAAAa;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAcC;AAAA,QACZC,EAAuB;AAAA,MACzB,cAAAtB;AAAA,MACA,gBAAAR;AAAA,MACA,mBAAAO;AAAA,IAAA,CACD,GAEK,EAAE,cAAcwB,GAAoB,UAAAC,EAAA,IAAaC,EAAwB;AAAA,MAC7E,cAAAzB;AAAA,MACA,qBAAAO;AAAA,MACA,mBAAAR;AAAA,IAAA,CACD,GAEK2B,IAAQC,EAAQ,MAAM;AAC1B,UAAIC,IAAyB,CAAA;AAE7B,aAAIlC,MACEA,EAAK,YACKkC,IAAA;AAAA,QACV,GAAGA;AAAA,QACH,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKX;AAAA,YACL,OAAOzB,EAAK,QAAQ;AAAA,YACpB,OAAOA,EAAK,QAAQ,KAAK,OAAO,CAAUmB,MAAAA,EAAO,WAAW,WAAW,EAAE;AAAA,YACzE,UAAUnB,EAAK,QAAQ,KAAK;AAAA,YAC5B,cAAcA,EAAK,QAAQ;AAAA,YAC3B,MAAMA,KAAA,gBAAAA,EAAM,QAAQ,KAAK,IAAI,CAAWmB,OAAA;AAAA,cACtC,MAAMA,EAAO;AAAA,cACb,MAAMA,EAAO;AAAA,cACb,aAAaA,EAAO,WAAW;AAAA,cAC/B,SAAS,MAAMD,EAAyBC,CAAM;AAAA,YAAA;AAAA,UAC9C;AAAA,QACJ;AAAA,MAAA,IAIQe,IAAA;AAAA,QACV,GAAGA;AAAA,QACH,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKZ;AAAA,YACL,OAAOxB,EAAK,MAAM;AAAA,YAClB,OAAOA,EAAK,MAAM,KAAK,OAAO,CAAQqB,MAAAA,EAAK,QAAQ,EAAE;AAAA,YACrD,UAAUrB,EAAK,MAAM,KAAK;AAAA,YAC1B,cAAcA,EAAK,MAAM;AAAA,YACzB,MAAMA,EAAK,MAAM,KAAK,IAAI,CAASqB,OAAA;AAAA,cACjC,MAAMA,EAAK;AAAA,cACX,MAAMA,EAAK;AAAA,cACX,aAAa;AAAA,cACb,SAAS,MAAMD,EAAuBC,CAAI;AAAA,YAAA,EAC1C;AAAA,UAAA;AAAA,QACJ;AAAA,QACA,gBAAAc;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKV;AAAA,YACL,OAAO1B,EAAK,QAAQ;AAAA,YACpB,OAAOA,EAAK,QAAQ,KAAK,OAAO,CAAUuB,MAAAA,EAAO,MAAM,EAAE;AAAA,YACzD,UAAUvB,EAAK,QAAQ,KAAK;AAAA,YAC5B,cAAcA,EAAK,QAAQ;AAAA,YAC3B,MAAMA,EAAK,QAAQ,KAAK,IAAI,CAAWuB,OAAA;AAAA,cACrC,MAAMA,EAAO;AAAA,cACb,MAAMA,EAAO;AAAA,cACb,aAAaA,EAAO;AAAA,cACpB,SAAS,MAAMD,EAAyBC,CAAM;AAAA,YAAA,EAC9C;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA,GAGEvB,EAAK,WACKkC,IAAA;AAAA,QACV,GAAGA;AAAA,QACH,gBAAAC;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,KAAKP;AAAA,YACL,OAAO9B,EAAK,OAAO;AAAA,YACnB,MAAMA,EAAK,OAAO;AAAA,YAClB,SAASa;AAAA,YACT,kBAAkBb,EAAK,OAAO;AAAA,UAAA;AAAA,QAChC;AAAA,MAAA,KAKCkC;AAAA,IAAA,GACN;AAAA,MACDlC;AAAA,MACAwB;AAAA,MACAE;AAAA,MACAD;AAAA,MACAP;AAAA,MACAE;AAAA,MACAE;AAAA,MACAQ;AAAA,MACAjB;AAAA,IAAA,CACD,GAEKyB,IAAgBL;AAAA,MACpB,MAAM;AAAA,QACJ,gBAAAE;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,KAAKC,EAAO;AAAA,YACZ,OAAO/C;AAAA,YACP,QAAQA;AAAA,UAAA;AAAA,QACV;AAAA,MACF;AAAA,MACA,CAAC;AAAA,IAAA;AA4BH,WAxBAgD,EAAU,MAAM;AACV,UAAA,EAAAxC,KAAa,CAACD,KAAQQ,IAI1B;AAAA,YAAIR,KAAA,QAAAA,EAAM,WAAWD,MAAc2C,EAAmB,iCAAiC;AACrF,UAAAf,EAA8B3B,KAAA,gBAAAA,EAAM,SAAS,CAAC,EAACA,KAAA,QAAAA,EAAM,QAAO;AAE5D;AAAA,QACF;AAEA,QAAIA,KAAA,QAAAA,EAAM,UAAUD,MAAc2C,EAAmB,+BAChCb,EAAA7B,KAAA,gBAAAA,EAAM,QAAQE,CAAwB;AAAA;AAAA,IAC3D,GACC;AAAA,MACDF;AAAA,MACAQ;AAAA,MACAP;AAAA,MACAC;AAAA,MACAH;AAAA,MACA4B;AAAA,MACAE;AAAA,IAAA,CACD,GAEG5B,sBACM0C,GAAe,CAAA,CAAA,IAGrBvC,IAEA,gBAAA+B;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,KAAKtC;AAAA,QACL,OAAOgC;AAAA,QACP,eAAe;AAAA,UACb,gBAAgB;AAAA,QAClB;AAAA,QACA,eAAe;AAAA,UACb,gBAAgB;AAAA,QAClB;AAAA,MAAA;AAAA,IAAA,IAMJ,gBAAAH;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,KAAKtC;AAAA,QACL,OAAA0B;AAAA,QACA,cAAA7B;AAAA,QACA,QAAQO;AAAA,QACR,QAAQA;AAAA,QACR,eAAe;AAAA,UACb,gBAAgBmC,EAA+B;AAAA,QACjD;AAAA,QACA,eAAe;AAAA,UACb,gBAAgBA,EAA+B;AAAA,QACjD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
@@ -1,216 +1,216 @@
1
- import { jsx as t, Fragment as L } from "react/jsx-runtime";
2
- import { useRef as I, useCallback as p, useMemo as oe, useEffect as le } from "react";
3
- import j from "../../../../../assets/line-icons/icons/carat-right.js";
4
- import { PLATFORM_EVENTS_STUDENT as z } from "../../../../analytics-events/platform-events-student.js";
5
- import { IndicatorType as a } from "../../../../journey/use-journey/constants.js";
6
- import { useJourney as ce } from "../../../../journey/use-journey/use-journey.js";
7
- import ee from "../../../../ui/buttons/icon-button/icon-button.js";
8
- import { useUIContext as ae } from "../../../../ui/context/context.js";
9
- import O from "../../../../ui/layout/flex-view.js";
10
- import d from "../../../../ui/text/text.js";
11
- import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as _ } from "../../../enum/circle-onboarding-steps.js";
12
- import { useCircleSounds as de } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
13
- import { SegmentedGameCard as he } from "../../comps/segmented-game-card/segmented-game-card.js";
14
- import { GAME_LAUNCHER_ANALYTICS_EVENTS as te } from "../../game-launcher-analytics-events.js";
15
- import { GO_TO_NEXT_SLIDE_AFTER_MS as se, SHOW_LABEL_HIGHLIGHT_AFTER_MS as me, SHOW_NUDGE_AFTER_MS as ge, SLIDE_TO_LESSON_MS as Te } from "./constants.js";
16
- import { ProjectType as ue } from "../../../games/web-view/enums/project-type-enum.js";
17
- const Ge = ({
1
+ import { jsx as t, Fragment as O } from "react/jsx-runtime";
2
+ import { useRef as A, useCallback as T, useMemo as le, useEffect as ce } from "react";
3
+ import z from "../../../../../assets/line-icons/icons/carat-right.js";
4
+ import { PLATFORM_EVENTS_STUDENT as ee } from "../../../../analytics-events/platform-events-student.js";
5
+ import { JOURNEY_ID_STUDENT as ae } from "../../../../journey/journey-id/journey-id-student.js";
6
+ import { IndicatorType as c } from "../../../../journey/use-journey/constants.js";
7
+ import { useJourney as de } from "../../../../journey/use-journey/use-journey.js";
8
+ import te from "../../../../ui/buttons/icon-button/icon-button.js";
9
+ import { useUIContext as he } from "../../../../ui/context/context.js";
10
+ import L from "../../../../ui/layout/flex-view.js";
11
+ import a from "../../../../ui/text/text.js";
12
+ import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as E } from "../../../enum/circle-onboarding-steps.js";
13
+ import { useCircleSounds as se } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
14
+ import { SegmentedGameCard as me } from "../../comps/segmented-game-card/segmented-game-card.js";
15
+ import { GAME_LAUNCHER_ANALYTICS_EVENTS as re } from "../../game-launcher-analytics-events.js";
16
+ import { GO_TO_NEXT_SLIDE_AFTER_MS as ue, SHOW_LABEL_HIGHLIGHT_AFTER_MS as ge, SHOW_NUDGE_AFTER_MS as Te, SLIDE_TO_LESSON_MS as Ee } from "./constants.js";
17
+ import { ProjectType as pe } from "../../../games/web-view/enums/project-type-enum.js";
18
+ const ke = ({
18
19
  carouselRefs: n,
19
- onSegmentClick: S
20
+ onSegmentClick: R,
21
+ onJourneyComplete: y
20
22
  }) => {
21
- const o = I(null), r = I(null), l = I(null), C = I([]), { playButtonSound: b } = de(), { nextCoachmark: h, setJourney: R, endJourney: N } = ce(), { onEvent: f } = ae(), P = p(
23
+ const i = ae.CIRCLE_ACTIVITIES_INTRO_JOURNEY, o = A(null), r = A(null), l = A(null), p = A([]), { playButtonSound: S } = se(), { nextCoachmark: d, setJourney: N, endJourney: b } = de(), { onEvent: I } = he(), P = T(
22
24
  (e) => {
23
- f(z.ONBOARDING_STEP_VIEWED, {
25
+ I(ee.ONBOARDING_STEP_VIEWED, {
24
26
  step: e
25
27
  });
26
28
  },
27
- [f]
28
- ), y = p(
29
+ [I]
30
+ ), H = T(
29
31
  (e) => {
30
- f(z.ONBOARDING_STEP_COMPLETED, {
32
+ I(ee.ONBOARDING_STEP_COMPLETED, {
31
33
  step: e
32
34
  });
33
35
  },
34
- [f]
35
- ), s = p(
36
- (e, c, i, m, A = !1) => {
37
- var T, u;
38
- A || (b(), (u = n.current) == null || u.goToIndex(((T = n.current) == null ? void 0 : T.currentIndex) + 1), h(m, !1, se)), P(e);
39
- const g = setTimeout(() => {
40
- clearTimeout(g), c.startLabelAnimation(i);
41
- }, me);
42
- C.current.push(g), h(m, !0, ge);
36
+ [I]
37
+ ), h = T(
38
+ (e, _, C, f = !1) => {
39
+ var m, u;
40
+ f || (S(), (u = n.current) == null || u.goToIndex(((m = n.current) == null ? void 0 : m.currentIndex) + 1), d(i, !1, ue)), P(e);
41
+ const s = setTimeout(() => {
42
+ clearTimeout(s), _.startLabelAnimation(C);
43
+ }, ge);
44
+ p.current.push(s), d(i, !0, Te);
43
45
  },
44
- [n, h, b, P]
45
- ), H = p(
46
- (e, c) => {
47
- S(e, ue.PUZZLE), y(_.PUZZLE_ACTIVITY), N(c);
46
+ [n, i, d, S, P]
47
+ ), G = T(
48
+ (e) => {
49
+ R(e, pe.PUZZLE), H(E.PUZZLE_ACTIVITY), b(i), y(i);
48
50
  },
49
- [N, S, y]
50
- ), G = p(
51
- (e, c, i) => {
52
- var w, Y, v, B, U, V, x, D, M, W, X, $, J, F, Z, K, q, Q;
53
- if (!((w = n == null ? void 0 : n.current) != null && w.nextBtnRef.current) || !((Y = r == null ? void 0 : r.current) != null && Y.segmentedCardWrapperRef.current) || !((v = o == null ? void 0 : o.current) != null && v.labelRef.current) || !((B = r == null ? void 0 : r.current) != null && B.labelRef.current) || !e)
51
+ [b, i, y, R, H]
52
+ ), U = T(
53
+ (e, _) => {
54
+ var k, w, v, B, V, x, D, M, J, W, X, $, F, Z, j, K, q, Q;
55
+ if (!((k = n == null ? void 0 : n.current) != null && k.nextBtnRef.current) || !((w = r == null ? void 0 : r.current) != null && w.segmentedCardWrapperRef.current) || !((v = o == null ? void 0 : o.current) != null && v.labelRef.current) || !((B = r == null ? void 0 : r.current) != null && B.labelRef.current) || !e)
54
56
  return;
55
- const m = ((x = (V = (U = l.current) == null ? void 0 : U.labelRef) == null ? void 0 : V.current) == null ? void 0 : x.getBoundingClientRect()) || {
57
+ const C = ((D = (x = (V = l.current) == null ? void 0 : V.labelRef) == null ? void 0 : x.current) == null ? void 0 : D.getBoundingClientRect()) || {
56
58
  height: 0,
57
59
  width: 0
58
- }, A = ((W = (M = (D = o.current) == null ? void 0 : D.labelRef) == null ? void 0 : M.current) == null ? void 0 : W.getBoundingClientRect()) || {
60
+ }, f = ((W = (J = (M = o.current) == null ? void 0 : M.labelRef) == null ? void 0 : J.current) == null ? void 0 : W.getBoundingClientRect()) || {
59
61
  height: 0,
60
62
  width: 0
61
- }, g = ((J = ($ = (X = r.current) == null ? void 0 : X.labelRef) == null ? void 0 : $.current) == null ? void 0 : J.getBoundingClientRect()) || {
63
+ }, s = ((F = ($ = (X = r.current) == null ? void 0 : X.labelRef) == null ? void 0 : $.current) == null ? void 0 : F.getBoundingClientRect()) || {
62
64
  height: 0,
63
65
  width: 0
64
- }, T = ((K = (Z = (F = r.current) == null ? void 0 : F.segmentedCardWrapperRef) == null ? void 0 : Z.current) == null ? void 0 : K.getBoundingClientRect()) || {
66
+ }, m = ((K = (j = (Z = r.current) == null ? void 0 : Z.segmentedCardWrapperRef) == null ? void 0 : j.current) == null ? void 0 : K.getBoundingClientRect()) || {
65
67
  height: 0,
66
68
  width: 0
67
69
  };
68
70
  let u = [];
69
- c && l.current && (u = [
71
+ _ && l.current && (u = [
70
72
  {
71
73
  originalElementToHighlightRef: l.current.labelRef,
72
74
  isActive: !1,
73
- type: a.TOOLTIP,
74
- elementToHighlight: /* @__PURE__ */ t(L, {}),
75
+ type: c.TOOLTIP,
76
+ elementToHighlight: /* @__PURE__ */ t(O, {}),
75
77
  indicator: {
76
78
  position: "right",
77
79
  backgroundColor: "BLUE_4",
78
80
  width: 264,
79
- tooltipItem: /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(d, { $renderAs: "ab2-bold", children: "Get faster & stay ahead in school. Practice 3 new skills everyday." }) }),
80
- tooltipXCoOrdinates: m.width + 50,
81
- tooltipYCoOrdinates: m.height / 2
81
+ tooltipItem: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(a, { $renderAs: "ab2-bold", children: "Get faster & stay ahead in school. Practice 3 new skills everyday." }) }),
82
+ tooltipXCoOrdinates: C.width + 50,
83
+ tooltipYCoOrdinates: C.height / 2
82
84
  }
83
85
  },
84
86
  {
85
87
  originalElementToHighlightRef: (q = n.current) == null ? void 0 : q.nextBtnRef,
86
88
  isActive: !1,
87
- type: a.NUDGE,
89
+ type: c.NUDGE,
88
90
  elementToHighlight: /* @__PURE__ */ t(
89
- ee,
91
+ te,
90
92
  {
91
93
  renderAs: "secondary",
92
- Icon: j,
93
- onClick: () => s(
94
- _.GAMES_ACTIVITY,
94
+ Icon: z,
95
+ onClick: () => h(
96
+ E.GAMES_ACTIVITY,
95
97
  o.current,
96
- "ORANGE_4",
97
- i
98
+ "ORANGE_4"
98
99
  ),
99
- analyticsLabel: te.JOURNEY_NEXT_ACTIVITY
100
+ analyticsLabel: re.JOURNEY_NEXT_ACTIVITY
100
101
  }
101
102
  ),
102
103
  indicator: {
103
104
  nudge: "click",
104
- content: /* @__PURE__ */ t(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
105
+ content: /* @__PURE__ */ t(a, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
105
106
  nudgePointerX: 0,
106
107
  nudgePointerY: 0
107
108
  }
108
109
  }
109
110
  ]);
110
- const ne = [
111
+ const ie = [
111
112
  {
112
113
  originalElementToHighlightRef: o.current.labelRef,
113
114
  isActive: !1,
114
- type: a.TOOLTIP,
115
- elementToHighlight: /* @__PURE__ */ t(L, {}),
115
+ type: c.TOOLTIP,
116
+ elementToHighlight: /* @__PURE__ */ t(O, {}),
116
117
  indicator: {
117
118
  position: "right",
118
119
  backgroundColor: "ORANGE_4",
119
120
  width: 264,
120
- tooltipItem: /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(d, { $renderAs: "ab2-bold", children: "Train to think deeper & plan ahead. Play 3 new games everyday." }) }),
121
- tooltipXCoOrdinates: A.width + 50,
122
- tooltipYCoOrdinates: A.height / 2
121
+ tooltipItem: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(a, { $renderAs: "ab2-bold", children: "Train to think deeper & plan ahead. Play 3 new games everyday." }) }),
122
+ tooltipXCoOrdinates: f.width + 50,
123
+ tooltipYCoOrdinates: f.height / 2
123
124
  }
124
125
  },
125
126
  {
126
127
  originalElementToHighlightRef: n.current.nextBtnRef,
127
128
  isActive: !1,
128
- type: a.NUDGE,
129
+ type: c.NUDGE,
129
130
  elementToHighlight: /* @__PURE__ */ t(
130
- ee,
131
+ te,
131
132
  {
132
133
  renderAs: "secondary",
133
- Icon: j,
134
- onClick: () => s(
135
- _.PUZZLE_ACTIVITY,
134
+ Icon: z,
135
+ onClick: () => h(
136
+ E.PUZZLE_ACTIVITY,
136
137
  r.current,
137
- "PURPLE_4",
138
- i
138
+ "PURPLE_4"
139
139
  ),
140
- analyticsLabel: te.JOURNEY_NEXT_ACTIVITY
140
+ analyticsLabel: re.JOURNEY_NEXT_ACTIVITY
141
141
  }
142
142
  ),
143
143
  indicator: {
144
144
  nudge: "click",
145
- content: /* @__PURE__ */ t(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
145
+ content: /* @__PURE__ */ t(a, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
146
146
  nudgePointerX: 0,
147
147
  nudgePointerY: 0
148
148
  }
149
149
  }
150
- ], ie = [
150
+ ], oe = [
151
151
  {
152
152
  originalElementToHighlightRef: r.current.labelRef,
153
153
  isActive: !1,
154
- type: a.TOOLTIP,
155
- elementToHighlight: /* @__PURE__ */ t(L, {}),
154
+ type: c.TOOLTIP,
155
+ elementToHighlight: /* @__PURE__ */ t(O, {}),
156
156
  indicator: {
157
157
  position: "right",
158
158
  backgroundColor: "PURPLE_4",
159
159
  width: 264,
160
- tooltipItem: /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(d, { $renderAs: "ab2-bold", children: "Think in new ways & stay sharp. Solve 3 new puzzles everyday." }) }),
161
- tooltipXCoOrdinates: g.width + 50,
162
- tooltipYCoOrdinates: g.height / 2
160
+ tooltipItem: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(a, { $renderAs: "ab2-bold", children: "Think in new ways & stay sharp. Solve 3 new puzzles everyday." }) }),
161
+ tooltipXCoOrdinates: s.width + 50,
162
+ tooltipYCoOrdinates: s.height / 2
163
163
  }
164
164
  },
165
165
  {
166
166
  originalElementToHighlightRef: r.current.segmentedCardWrapperRef,
167
167
  isActive: !1,
168
- type: a.NUDGE,
168
+ type: c.NUDGE,
169
169
  elementToHighlight: /* @__PURE__ */ t(
170
- he,
170
+ me,
171
171
  {
172
172
  label: "",
173
- value: e.data.filter((E) => E.solved).length,
173
+ value: e.data.filter((g) => g.solved).length,
174
174
  maxValue: e.data.length,
175
175
  initialValue: e.initialProgressValue,
176
- data: e.data.map((E) => ({
177
- card: E.cardLottie,
176
+ data: e.data.map((g) => ({
177
+ card: g.cardLottie,
178
178
  name: "",
179
179
  // We dont want to show the name of the puzzle in onboarding
180
- isCompleted: E.solved,
181
- onPress: () => H(E, i)
180
+ isCompleted: g.solved,
181
+ onPress: () => G(g)
182
182
  }))
183
183
  }
184
184
  ),
185
185
  indicator: {
186
186
  nudge: "click",
187
- content: /* @__PURE__ */ t(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to solve a puzzle" }),
188
- nudgePointerX: T.width * 0.6,
189
- nudgePointerY: T.height * 0.4
187
+ content: /* @__PURE__ */ t(a, { $renderAs: "ab1", $color: "WHITE", children: "Click to solve a puzzle" }),
188
+ nudgePointerX: m.width * 0.6,
189
+ nudgePointerY: m.height * 0.4
190
190
  }
191
191
  }
192
192
  ];
193
- R(i, [...u, ...ne, ...ie]), (Q = n.current) == null || Q.goToIndex(0);
194
- const k = setTimeout(() => {
195
- clearTimeout(k), h(i);
196
- }, Te);
197
- C.current.push(k), c && l.current ? s(_.SKILL_ACTIVITY, l.current, "BLUE_4", i, !0) : s(_.GAMES_ACTIVITY, o.current, "ORANGE_4", i, !0);
193
+ N(i, [...u, ...ie, ...oe]), (Q = n.current) == null || Q.goToIndex(0);
194
+ const Y = setTimeout(() => {
195
+ clearTimeout(Y), d(i);
196
+ }, Ee);
197
+ p.current.push(Y), _ && l.current ? h(E.SKILL_ACTIVITY, l.current, "BLUE_4", !0) : h(E.GAMES_ACTIVITY, o.current, "ORANGE_4", !0);
198
198
  },
199
- [n, H, s, h, R]
200
- ), re = oe(
199
+ [n, N, i, h, G, d]
200
+ ), ne = le(
201
201
  () => ({
202
202
  gameRefs: o,
203
203
  puzzleRefs: r,
204
204
  lessonRefs: l,
205
- startJourney: G
205
+ startJourney: U
206
206
  }),
207
- [G]
207
+ [U]
208
208
  );
209
- return le(() => () => {
210
- C.current.forEach((e) => clearTimeout(e)), C.current = [];
211
- }, [n]), re;
209
+ return ce(() => () => {
210
+ p.current.forEach((e) => clearTimeout(e)), p.current = [];
211
+ }, [n]), ne;
212
212
  };
213
213
  export {
214
- Ge as useGameLauncherJourney
214
+ ke as useGameLauncherJourney
215
215
  };
216
216
  //# 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 { 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 { 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 { 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}: IUseGameLauncherJourneyProps) => {\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 journeyId: TJourneyId,\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, nextCoachmark, playButtonSound, trackEventViewed],\n );\n\n const handleEndJourney = useCallback(\n (puzzlesData: Puzzle, journeyId: TJourneyId) => {\n onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n trackEventCompleted(ActionEvent.PUZZLE_ACTIVITY);\n endJourney(journeyId);\n },\n [endJourney, onSegmentClick, trackEventCompleted],\n );\n\n const startJourney = useCallback(\n (puzzlesData: IProject<Puzzle>, isLessonAvailable: boolean, journeyId: TJourneyId) => {\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: '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 + 50,\n tooltipYCoOrdinates: lessonLabelDims.height / 2,\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 journeyId,\n )\n }\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\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 + 50,\n tooltipYCoOrdinates: gameLabelDims.height / 2,\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 journeyId,\n )\n }\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\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 + 50,\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: () => handleEndJourney(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 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', journeyId, true);\n } else {\n goToNextCard(ActionEvent.GAMES_ACTIVITY, gameRefs.current, 'ORANGE_4', journeyId, true);\n }\n },\n [carouselRefs, handleEndJourney, goToNextCard, nextCoachmark, setJourney],\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","gameRefs","useRef","puzzleRefs","lessonRefs","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","endJourney","useJourney","trackAnalytics","useUIContext","trackEventViewed","useCallback","step","AnalyticsLabel","trackEventCompleted","goToNextCard","analyticsLabelViewed","refOfNextSlide","color","journeyId","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 { 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 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: '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 + 50,\n tooltipYCoOrdinates: lessonLabelDims.height / 2,\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: (\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 + 50,\n tooltipYCoOrdinates: gameLabelDims.height / 2,\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: (\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 + 50,\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: () => handleEndJourney(puzzle),\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 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, 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","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,46 +1,47 @@
1
1
  import { jsx as r, Fragment as b } from "react/jsx-runtime";
2
- import { useRef as O, useCallback as A, useEffect as J } from "react";
3
- import V from "../../../../../assets/line-icons/icons/carat-right.js";
4
- import { PLATFORM_EVENTS_STUDENT as U } from "../../../../analytics-events/platform-events-student.js";
5
- import { JOURNEY_ID_STUDENT as X } from "../../../../journey/journey-id/journey-id-student.js";
2
+ import { useRef as O, useCallback as A, useEffect as X } from "react";
3
+ import J from "../../../../../assets/line-icons/icons/carat-right.js";
4
+ import { PLATFORM_EVENTS_STUDENT as G } from "../../../../analytics-events/platform-events-student.js";
5
+ import { JOURNEY_ID_STUDENT as K } from "../../../../journey/journey-id/journey-id-student.js";
6
6
  import { IndicatorType as d } from "../../../../journey/use-journey/constants.js";
7
- import { useJourney as K } from "../../../../journey/use-journey/use-journey.js";
8
- import j from "../../../../ui/buttons/icon-button/icon-button.js";
9
- import { useUIContext as Z } from "../../../../ui/context/context.js";
7
+ import { useJourney as j } from "../../../../journey/use-journey/use-journey.js";
8
+ import Z from "../../../../ui/buttons/icon-button/icon-button.js";
9
+ import { useUIContext as q } from "../../../../ui/context/context.js";
10
10
  import R from "../../../../ui/layout/flex-view.js";
11
11
  import m from "../../../../ui/text/text.js";
12
- import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as G } from "../../../enum/circle-onboarding-steps.js";
13
- import { useCircleSounds as q } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
14
- import { TablesCard as v } from "../../comps/tables-card/tables-card.js";
15
- import { GAME_LAUNCHER_ANALYTICS_EVENTS as z } from "../../game-launcher-analytics-events.js";
16
- import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as Q, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as ee, START_ANIMATING_CLONED_ELEM as M, TABLE_CARD_INDEX as $, GO_TO_TABLE_LAUNCHER_DURATION_MS as te, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as re, PUZZLE_CARD_INDEX as ne, SHOW_INITIAL_COACHMARK_AFTER_MS as x, LESSON_CARD_INDEX as oe, SHOW_INITIAL_TOOLTIP_AFTER_MS as ie } from "./constants.js";
17
- import { Indicator as le } from "./use-table-launcher-journey-styled.js";
18
- const be = ({
12
+ import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as v } from "../../../enum/circle-onboarding-steps.js";
13
+ import { useCircleSounds as z } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
14
+ import { TablesCard as M } from "../../comps/tables-card/tables-card.js";
15
+ import { GAME_LAUNCHER_ANALYTICS_EVENTS as Q } from "../../game-launcher-analytics-events.js";
16
+ import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as ee, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as te, START_ANIMATING_CLONED_ELEM as $, TABLE_CARD_INDEX as x, GO_TO_TABLE_LAUNCHER_DURATION_MS as re, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as ne, PUZZLE_CARD_INDEX as oe, SHOW_INITIAL_COACHMARK_AFTER_MS as w, LESSON_CARD_INDEX as ie, SHOW_INITIAL_TOOLTIP_AFTER_MS as le } from "./constants.js";
17
+ import { Indicator as ce } from "./use-table-launcher-journey-styled.js";
18
+ const Oe = ({
19
19
  carouselRefs: a,
20
- onTableSegmentClick: N
20
+ onTableSegmentClick: N,
21
+ onJourneyComplete: S
21
22
  }) => {
22
- const t = X.CIRCLE_TABLES_INTRO_JOURNEY, e = O(null), _ = O(null), T = O([]), { playButtonSound: S } = q(), { nextCoachmark: l, setJourney: C, addCoachmark: u, endJourney: P } = K(), { onEvent: f } = Z(), L = A(
23
+ const e = K.CIRCLE_TABLES_INTRO_JOURNEY, t = O(null), p = O(null), T = O([]), { playButtonSound: P } = z(), { nextCoachmark: l, setJourney: C, addCoachmark: u, endJourney: H } = j(), { onEvent: f } = q(), L = A(
23
24
  (n) => {
24
25
  var c, o;
25
- n && N(n), f(U.ONBOARDING_STEP_COMPLETED, {
26
- step: G.TABLES
27
- }), (c = e == null ? void 0 : e.current) == null || c.setLabelVisiblity(!0), (o = e == null ? void 0 : e.current) == null || o.stopLabelAnimation(), P(t);
26
+ n && N(n), f(G.ONBOARDING_STEP_COMPLETED, {
27
+ step: v.TABLES
28
+ }), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), H(e), S(e);
28
29
  },
29
- [P, t, N, f]
30
- ), H = A(
30
+ [H, e, S, N, f]
31
+ ), y = A(
31
32
  (n, c) => {
32
33
  var g, E, h;
33
- if (!((g = e.current) != null && g.segmentedCardWrapperRef.current) || !((E = e.current) != null && E.labelRef.current))
34
+ if (!((g = t.current) != null && g.segmentedCardWrapperRef.current) || !((E = t.current) != null && E.labelRef.current))
34
35
  return;
35
- const o = e.current.labelRef.current.getBoundingClientRect(), i = (h = e.current) == null ? void 0 : h.segmentedCardWrapperRef.current.getBoundingClientRect();
36
- u(t, {
37
- originalElementToHighlightRef: e.current.segmentedCardWrapperRef,
36
+ const o = t.current.labelRef.current.getBoundingClientRect(), i = (h = t.current) == null ? void 0 : h.segmentedCardWrapperRef.current.getBoundingClientRect();
37
+ u(e, {
38
+ originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
38
39
  isActive: !1,
39
40
  type: d.TOOLTIP,
40
41
  elementToHighlight: /* @__PURE__ */ r(
41
- v,
42
+ M,
42
43
  {
43
- ref: _,
44
+ ref: p,
44
45
  defaultTable: c,
45
46
  label: n.label,
46
47
  data: n.data,
@@ -56,8 +57,8 @@ const be = ({
56
57
  tooltipXCoOrdinates: 0,
57
58
  tooltipYCoOrdinates: o.height * 0.35
58
59
  }
59
- }), u(t, {
60
- originalElementToHighlightRef: e.current.segmentedCardWrapperRef,
60
+ }), u(e, {
61
+ originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
61
62
  isActive: !1,
62
63
  type: d.NUDGE,
63
64
  indicator: {
@@ -67,42 +68,42 @@ const be = ({
67
68
  nudgePointerY: i.height * 0.4
68
69
  },
69
70
  elementToHighlight: /* @__PURE__ */ r(b, {})
70
- }), l(t, !1, Q), l(t, !0, ee);
71
+ }), l(e, !1, ee), l(e, !0, te);
71
72
  const s = setTimeout(() => {
72
- var p;
73
- clearTimeout(s), (p = _.current) == null || p.startLabelAnimation("YELLOW_4");
74
- }, M);
73
+ var _;
74
+ clearTimeout(s), (_ = p.current) == null || _.startLabelAnimation("YELLOW_4");
75
+ }, $);
75
76
  T.current.push(s);
76
77
  },
77
- [u, L, t, l]
78
+ [u, L, e, l]
78
79
  ), I = A(() => {
79
80
  var o;
80
- S(), (o = a.current) == null || o.goToIndex($), l(t, !1, te), f(U.ONBOARDING_STEP_VIEWED, {
81
- step: G.TABLES
81
+ P(), (o = a.current) == null || o.goToIndex(x), l(e, !1, re), f(G.ONBOARDING_STEP_VIEWED, {
82
+ step: v.TABLES
82
83
  });
83
84
  const n = setTimeout(() => {
84
85
  var i;
85
- clearTimeout(n), (i = e.current) == null || i.setLabelVisiblity(!1), l(t, !0);
86
- }, re);
86
+ clearTimeout(n), (i = t.current) == null || i.setLabelVisiblity(!1), l(e, !0);
87
+ }, ne);
87
88
  T.current.push(n);
88
89
  const c = setTimeout(() => {
89
90
  var i;
90
- clearTimeout(c), (i = _.current) == null || i.startLabelAnimation("YELLOW_4");
91
- }, M);
91
+ clearTimeout(c), (i = p.current) == null || i.startLabelAnimation("YELLOW_4");
92
+ }, $);
92
93
  T.current.push(c);
93
- }, [a, t, l, S, f]), w = A(
94
+ }, [a, e, l, P, f]), F = A(
94
95
  (n, c = !1) => {
95
- var h, p, y, D, W, Y, k, B;
96
- const o = (h = a.current) == null ? void 0 : h.indicatorRefs, i = (p = a.current) == null ? void 0 : p.nextBtnRef, s = o == null ? void 0 : o[$];
97
- if (!((y = e.current) != null && y.segmentedCardWrapperRef.current) || !((D = e.current) != null && D.labelRef.current) || !o || !(i != null && i.current) || !s || !s.current)
96
+ var h, _, D, W, Y, k, B, U;
97
+ const o = (h = a.current) == null ? void 0 : h.indicatorRefs, i = (_ = a.current) == null ? void 0 : _.nextBtnRef, s = o == null ? void 0 : o[x];
98
+ if (!((D = t.current) != null && D.segmentedCardWrapperRef.current) || !((W = t.current) != null && W.labelRef.current) || !o || !(i != null && i.current) || !s || !s.current)
98
99
  return;
99
- const g = e.current.labelRef.current.getBoundingClientRect(), E = (W = e.current) == null ? void 0 : W.segmentedCardWrapperRef.current.getBoundingClientRect();
100
- c ? (C(t, [
100
+ const g = t.current.labelRef.current.getBoundingClientRect(), E = (Y = t.current) == null ? void 0 : Y.segmentedCardWrapperRef.current.getBoundingClientRect();
101
+ c ? (C(e, [
101
102
  {
102
103
  originalElementToHighlightRef: s,
103
104
  isActive: !1,
104
105
  type: d.TOOLTIP,
105
- elementToHighlight: /* @__PURE__ */ r(le, { $isActive: !1 }),
106
+ elementToHighlight: /* @__PURE__ */ r(ce, { $isActive: !1 }),
106
107
  indicator: {
107
108
  position: "bottom",
108
109
  backgroundColor: "YELLOW_4",
@@ -132,9 +133,9 @@ const be = ({
132
133
  },
133
134
  elementToHighlight: /* @__PURE__ */ r(b, {})
134
135
  }
135
- ]), (B = a.current) == null || B.goToIndex(oe), l(t, !1, x), l(t, !0, ie)) : (C(t, [
136
+ ]), (U = a.current) == null || U.goToIndex(ie), l(e, !1, w), l(e, !0, le)) : (C(e, [
136
137
  {
137
- originalElementToHighlightRef: (Y = a.current) == null ? void 0 : Y.nextBtnRef,
138
+ originalElementToHighlightRef: (k = a.current) == null ? void 0 : k.nextBtnRef,
138
139
  isActive: !1,
139
140
  type: d.NUDGE,
140
141
  indicator: {
@@ -144,17 +145,17 @@ const be = ({
144
145
  nudgePointerY: 0
145
146
  },
146
147
  elementToHighlight: /* @__PURE__ */ r(
147
- j,
148
+ Z,
148
149
  {
149
150
  renderAs: "secondary",
150
- Icon: V,
151
+ Icon: J,
151
152
  onClick: I,
152
- analyticsLabel: z.JOURNEY_NEXT_ACTIVITY
153
+ analyticsLabel: Q.JOURNEY_NEXT_ACTIVITY
153
154
  }
154
155
  )
155
156
  }
156
- ]), (k = a.current) == null || k.goToIndex(ne), l(t, !1, x)), u(t, {
157
- originalElementToHighlightRef: e.current.labelRef,
157
+ ]), (B = a.current) == null || B.goToIndex(oe), l(e, !1, w)), u(e, {
158
+ originalElementToHighlightRef: t.current.labelRef,
158
159
  isActive: !1,
159
160
  type: d.TOOLTIP,
160
161
  elementToHighlight: /* @__PURE__ */ r(b, {}),
@@ -166,8 +167,8 @@ const be = ({
166
167
  tooltipXCoOrdinates: g.width + 50,
167
168
  tooltipYCoOrdinates: g.height / 2
168
169
  }
169
- }), u(t, {
170
- originalElementToHighlightRef: e.current.segmentedCardWrapperRef,
170
+ }), u(e, {
171
+ originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
171
172
  isActive: !1,
172
173
  type: d.NUDGE,
173
174
  indicator: {
@@ -177,14 +178,14 @@ const be = ({
177
178
  nudgePointerY: E.height / 2
178
179
  },
179
180
  elementToHighlight: /* @__PURE__ */ r(
180
- v,
181
+ M,
181
182
  {
182
- ref: _,
183
+ ref: p,
183
184
  label: n.label,
184
185
  data: n.data,
185
186
  onPress: () => {
186
187
  },
187
- onPressTableSegment: (F) => H(n, F)
188
+ onPressTableSegment: (V) => y(n, V)
188
189
  }
189
190
  )
190
191
  });
@@ -193,20 +194,20 @@ const be = ({
193
194
  u,
194
195
  a,
195
196
  I,
196
- H,
197
- t,
197
+ y,
198
+ e,
198
199
  l,
199
200
  C
200
201
  ]
201
202
  );
202
- return J(() => () => {
203
+ return X(() => () => {
203
204
  T.current.forEach((n) => clearTimeout(n)), T.current = [];
204
- }, [t]), {
205
- tableRef: e,
206
- startJourney: w
205
+ }, [e]), {
206
+ tableRef: t,
207
+ startJourney: F
207
208
  };
208
209
  };
209
210
  export {
210
- be as useTableLauncherJourney
211
+ Oe as useTableLauncherJourney
211
212
  };
212
213
  //# 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 { 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}: IUseTableJourneyProps) => {\n const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\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 // 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 endJourney(journeyId);\n },\n [endJourney, journeyId, 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: 'left',\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: 0,\n tooltipYCoOrdinates: segmentedCardDims.height * 0.35,\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: (\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, 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: (\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: 'right',\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 + 50,\n tooltipYCoOrdinates: labelDims.height / 2,\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: (\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 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","journeyId","JOURNEY_ID_STUDENT","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 { 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 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 // 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 endJourney(journeyId);\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: 'left',\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: 0,\n tooltipYCoOrdinates: segmentedCardDims.height * 0.35,\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: (\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, 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: (\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: 'right',\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 + 50,\n tooltipYCoOrdinates: labelDims.height / 2,\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: (\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 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","originalTableRef","useRef","highlightedTableRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","S.Indicator","_h","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":"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"}
package/dist/index.d.ts CHANGED
@@ -1111,6 +1111,8 @@ declare interface IGameLauncherProps {
1111
1111
  defaultIndex?: number;
1112
1112
  journeyId?: TJourneyId;
1113
1113
  isTutorialOnboardingDone?: boolean;
1114
+ showError?: boolean;
1115
+ onJourneyComplete: (journeyId: TJourneyId) => void;
1114
1116
  }
1115
1117
 
1116
1118
  declare interface IGetArrowTooltipConfig {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cuemath/leap",
3
- "version": "2.8.62-rj-0.3",
3
+ "version": "2.8.62-rj-0.4",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"