@cuemath/leap 2.8.36-rj-1 → 2.8.36-rj-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/lottie/lottie.js +6 -0
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/card-container/card-container.js +11 -20
- package/dist/features/circle-games/game-launcher/comps/card-container/card-container.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/carousel/carousel.js +47 -53
- package/dist/features/circle-games/game-launcher/comps/carousel/carousel.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js +3 -3
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js +29 -35
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star-styled.js +25 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star-styled.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js +57 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.js +27 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js +37 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js +35 -42
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +135 -144
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -1
- package/dist/features/circle-games/game-launcher/game-launcher-analytics-events.js +8 -7
- package/dist/features/circle-games/game-launcher/game-launcher-analytics-events.js.map +1 -1
- package/dist/features/circle-games/game-launcher/game-launcher.js +71 -80
- package/dist/features/circle-games/game-launcher/game-launcher.js.map +1 -1
- package/dist/features/circle-games/game-launcher/use-game-launcher-journey/constants.js +7 -0
- package/dist/features/circle-games/game-launcher/use-game-launcher-journey/constants.js.map +1 -0
- package/dist/features/circle-games/game-launcher/use-game-launcher-journey/use-game-launcher-journey.js +213 -0
- package/dist/features/circle-games/game-launcher/use-game-launcher-journey/use-game-launcher-journey.js.map +1 -0
- package/dist/features/circle-games/games/web-view/web-view-types.js.map +1 -1
- package/dist/features/journey/journey-id/journey-id-student.js +1 -1
- package/dist/features/journey/journey-id/journey-id-student.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js +17 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js +47 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js +6 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/constants.js +16 -0
- package/dist/features/post-game-stats/digital-meter/constants.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +87 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter.js +185 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/helper.js +33 -0
- package/dist/features/post-game-stats/digital-meter/helper.js.map +1 -0
- package/dist/features/post-game-stats/enums/post-game-stats-enum.js +1 -1
- package/dist/features/post-game-stats/enums/post-game-stats-enum.js.map +1 -1
- package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js +29 -0
- package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js.map +1 -0
- package/dist/features/post-game-stats/number-count-animation/number-count-animation.js +20 -0
- package/dist/features/post-game-stats/number-count-animation/number-count-animation.js.map +1 -0
- package/dist/features/post-game-stats/points/points.js +15 -10
- package/dist/features/post-game-stats/points/points.js.map +1 -1
- package/dist/features/post-game-stats/post-game-stats.js +83 -61
- package/dist/features/post-game-stats/post-game-stats.js.map +1 -1
- package/dist/index.d.ts +45 -4
- package/dist/index.js +69 -67
- package/dist/index.js.map +1 -1
- package/dist/static/point2.7cec6e24.json +1 -0
- package/dist/static/point3.f96fe7aa.json +1 -0
- package/dist/static/point4.fe04fb83.json +1 -0
- package/dist/static/table-mode-star.b8a1d762.json +1 -0
- package/dist/static/table-segment-star.78e851d6.json +1 -0
- package/dist/static/target-achieved-text.053bd142.json +2830 -0
- package/dist/static/target-achieved-text.10db8475.json +1 -0
- package/package.json +1 -1
- package/dist/assets/line-icons/icons/carat-left.js +0 -26
- package/dist/assets/line-icons/icons/carat-left.js.map +0 -1
- package/dist/assets/line-icons/icons/carat-right.js +0 -26
- package/dist/assets/line-icons/icons/carat-right.js.map +0 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js +0 -11
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js.map +0 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js +0 -16
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js.map +0 -1
- package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/constants.js +0 -8
- package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/constants.js.map +0 -1
- package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js +0 -217
- package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js.map +0 -1
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/constants.js +0 -6
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/constants.js.map +0 -1
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey-styled.js +0 -13
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey-styled.js.map +0 -1
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js +0 -197
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map +0 -1
@@ -0,0 +1,213 @@
|
|
1
|
+
import { jsx as e, Fragment as R } from "react/jsx-runtime";
|
2
|
+
import { useRef as u, useCallback as T, useMemo as ne } from "react";
|
3
|
+
import Q from "../../../../assets/line-icons/icons/next.js";
|
4
|
+
import { PLATFORM_EVENTS_STUDENT as j } from "../../../analytics-events/platform-events-student.js";
|
5
|
+
import { IndicatorType as s } from "../../../journey/use-journey/constants.js";
|
6
|
+
import { useJourney as ie } from "../../../journey/use-journey/use-journey.js";
|
7
|
+
import z from "../../../ui/buttons/icon-button/icon-button.js";
|
8
|
+
import { useUIContext as oe } from "../../../ui/context/context.js";
|
9
|
+
import I from "../../../ui/layout/flex-view.js";
|
10
|
+
import d from "../../../ui/text/text.js";
|
11
|
+
import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as E } from "../../enum/circle-onboarding-steps.js";
|
12
|
+
import { useCircleSounds as le } from "../../hooks/use-circle-sounds/use-circle-sounds.js";
|
13
|
+
import { SegmentedGameCard as ce } from "../comps/segmented-game-card/segmented-game-card.js";
|
14
|
+
import { GAME_LAUNCHER_ANALYTICS_EVENTS as ee } from "../game-launcher-analytics-events.js";
|
15
|
+
import { GO_TO_NEXT_SLIDE_AFTER_MS as ae, SHOW_LABEL_HIGHLIGHT_AFTER_MS as se, SHOW_NUDGE_AFTER_MS as de } from "./constants.js";
|
16
|
+
import { ProjectType as he } from "../../games/web-view/enums/project-type-enum.js";
|
17
|
+
const Se = ({
|
18
|
+
onSegmentClick: L,
|
19
|
+
setCarouselIndex: O,
|
20
|
+
onJourneyComplete: b
|
21
|
+
}) => {
|
22
|
+
const c = u(null), i = u(null), r = u(null), a = u(null), C = u(!1), { playButtonSound: P } = le(), { nextCoachmark: o, setJourney: N } = ie(), { onEvent: f } = oe(), S = T(
|
23
|
+
(t) => {
|
24
|
+
f(j.ONBOARDING_STEP_VIEWED, {
|
25
|
+
step: t
|
26
|
+
});
|
27
|
+
},
|
28
|
+
[f]
|
29
|
+
), y = T(
|
30
|
+
(t) => {
|
31
|
+
f(j.ONBOARDING_STEP_COMPLETED, {
|
32
|
+
step: t
|
33
|
+
});
|
34
|
+
},
|
35
|
+
[f]
|
36
|
+
), h = T(
|
37
|
+
(t, l, n, g, p = !1) => {
|
38
|
+
p || (P(), O((_) => _ + 1), o(g, !1, ae)), S(t);
|
39
|
+
const A = setTimeout(() => {
|
40
|
+
clearTimeout(A), l.startLabelAnimation(n);
|
41
|
+
}, se);
|
42
|
+
o(g, !0, de);
|
43
|
+
},
|
44
|
+
[o, P, O, S]
|
45
|
+
), H = T(
|
46
|
+
(t, l) => {
|
47
|
+
L(t, he.PUZZLE), y(E.PUZZLE_ACTIVITY), o(l), b(l);
|
48
|
+
},
|
49
|
+
[o, b, L, y]
|
50
|
+
), G = T(
|
51
|
+
(t, l, n) => {
|
52
|
+
var w, Y, v, U, V, B, D, x, M, W, X, $, J, F, Z, K, q;
|
53
|
+
if (C.current || !((w = c == null ? void 0 : c.current) != null && w.nextBtnRef.current) || !((Y = r == null ? void 0 : r.current) != null && Y.segmentedCardWrapperRef.current) || !((v = i == null ? void 0 : i.current) != null && v.labelRef.current) || !((U = r == null ? void 0 : r.current) != null && U.labelRef.current) || !t)
|
54
|
+
return;
|
55
|
+
C.current = !0;
|
56
|
+
const g = ((D = (B = (V = a.current) == null ? void 0 : V.labelRef) == null ? void 0 : B.current) == null ? void 0 : D.getBoundingClientRect()) || {
|
57
|
+
height: 0,
|
58
|
+
width: 0
|
59
|
+
}, p = ((W = (M = (x = i.current) == null ? void 0 : x.labelRef) == null ? void 0 : M.current) == null ? void 0 : W.getBoundingClientRect()) || {
|
60
|
+
height: 0,
|
61
|
+
width: 0
|
62
|
+
}, A = ((J = ($ = (X = r.current) == null ? void 0 : X.labelRef) == null ? void 0 : $.current) == null ? void 0 : J.getBoundingClientRect()) || {
|
63
|
+
height: 0,
|
64
|
+
width: 0
|
65
|
+
}, _ = ((K = (Z = (F = r.current) == null ? void 0 : F.segmentedCardWrapperRef) == null ? void 0 : Z.current) == null ? void 0 : K.getBoundingClientRect()) || {
|
66
|
+
height: 0,
|
67
|
+
width: 0
|
68
|
+
};
|
69
|
+
let k = [];
|
70
|
+
l && a.current && (k = [
|
71
|
+
{
|
72
|
+
originalElementToHighlightRef: a.current.labelRef,
|
73
|
+
isActive: !1,
|
74
|
+
type: s.TOOLTIP,
|
75
|
+
elementToHighlight: /* @__PURE__ */ e(R, {}),
|
76
|
+
indicator: {
|
77
|
+
position: "right",
|
78
|
+
backgroundColor: "BLUE_4",
|
79
|
+
width: 264,
|
80
|
+
tooltipItem: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(d, { $renderAs: "ab2-bold", children: "Get faster & stay ahead in school. Practice 3 new skills everyday." }) }),
|
81
|
+
tooltipXCoOrdinates: g.width + 50,
|
82
|
+
tooltipYCoOrdinates: g.height / 2
|
83
|
+
}
|
84
|
+
},
|
85
|
+
{
|
86
|
+
originalElementToHighlightRef: (q = c.current) == null ? void 0 : q.nextBtnRef,
|
87
|
+
isActive: !1,
|
88
|
+
type: s.NUDGE,
|
89
|
+
elementToHighlight: /* @__PURE__ */ e(
|
90
|
+
z,
|
91
|
+
{
|
92
|
+
renderAs: "secondary",
|
93
|
+
Icon: Q,
|
94
|
+
onClick: () => h(
|
95
|
+
E.GAMES_ACTIVITY,
|
96
|
+
i.current,
|
97
|
+
"ORANGE_4",
|
98
|
+
n
|
99
|
+
),
|
100
|
+
analyticsLabel: ee.JOURNEY_NEXT_ACTIVITY
|
101
|
+
}
|
102
|
+
),
|
103
|
+
indicator: {
|
104
|
+
nudge: "click",
|
105
|
+
content: /* @__PURE__ */ e(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
|
106
|
+
nudgePointerX: 0,
|
107
|
+
nudgePointerY: 0
|
108
|
+
}
|
109
|
+
}
|
110
|
+
]);
|
111
|
+
const te = [
|
112
|
+
{
|
113
|
+
originalElementToHighlightRef: i.current.labelRef,
|
114
|
+
isActive: !1,
|
115
|
+
type: s.TOOLTIP,
|
116
|
+
elementToHighlight: /* @__PURE__ */ e(R, {}),
|
117
|
+
indicator: {
|
118
|
+
position: "right",
|
119
|
+
backgroundColor: "ORANGE_4",
|
120
|
+
width: 264,
|
121
|
+
tooltipItem: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(d, { $renderAs: "ab2-bold", children: "Train to think deeper & plan ahead. Play 3 new games everyday." }) }),
|
122
|
+
tooltipXCoOrdinates: p.width + 50,
|
123
|
+
tooltipYCoOrdinates: p.height / 2
|
124
|
+
}
|
125
|
+
},
|
126
|
+
{
|
127
|
+
originalElementToHighlightRef: c.current.nextBtnRef,
|
128
|
+
isActive: !1,
|
129
|
+
type: s.NUDGE,
|
130
|
+
elementToHighlight: /* @__PURE__ */ e(
|
131
|
+
z,
|
132
|
+
{
|
133
|
+
renderAs: "secondary",
|
134
|
+
Icon: Q,
|
135
|
+
onClick: () => h(
|
136
|
+
E.PUZZLE_ACTIVITY,
|
137
|
+
r.current,
|
138
|
+
"PURPLE_4",
|
139
|
+
n
|
140
|
+
),
|
141
|
+
analyticsLabel: ee.JOURNEY_NEXT_ACTIVITY
|
142
|
+
}
|
143
|
+
),
|
144
|
+
indicator: {
|
145
|
+
nudge: "click",
|
146
|
+
content: /* @__PURE__ */ e(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
|
147
|
+
nudgePointerX: 0,
|
148
|
+
nudgePointerY: 0
|
149
|
+
}
|
150
|
+
}
|
151
|
+
], re = [
|
152
|
+
{
|
153
|
+
originalElementToHighlightRef: r.current.labelRef,
|
154
|
+
isActive: !1,
|
155
|
+
type: s.TOOLTIP,
|
156
|
+
elementToHighlight: /* @__PURE__ */ e(R, {}),
|
157
|
+
indicator: {
|
158
|
+
position: "right",
|
159
|
+
backgroundColor: "PURPLE_4",
|
160
|
+
width: 264,
|
161
|
+
tooltipItem: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(d, { $renderAs: "ab2-bold", children: "Think in new ways & stay sharp. Solve 3 new puzzles everyday." }) }),
|
162
|
+
tooltipXCoOrdinates: A.width + 50,
|
163
|
+
tooltipYCoOrdinates: A.height / 2
|
164
|
+
}
|
165
|
+
},
|
166
|
+
{
|
167
|
+
originalElementToHighlightRef: r.current.segmentedCardWrapperRef,
|
168
|
+
isActive: !1,
|
169
|
+
type: s.NUDGE,
|
170
|
+
elementToHighlight: /* @__PURE__ */ e(
|
171
|
+
ce,
|
172
|
+
{
|
173
|
+
label: "",
|
174
|
+
value: t.data.filter((m) => m.solved).length,
|
175
|
+
maxValue: t.data.length,
|
176
|
+
initialValue: t.initialProgressValue,
|
177
|
+
data: t.data.map((m) => ({
|
178
|
+
card: m.cardLottie,
|
179
|
+
name: "",
|
180
|
+
// We dont want to show the name of the puzzle in onboarding
|
181
|
+
isCompleted: m.solved,
|
182
|
+
onPress: () => H(m, n)
|
183
|
+
}))
|
184
|
+
}
|
185
|
+
),
|
186
|
+
indicator: {
|
187
|
+
nudge: "click",
|
188
|
+
content: /* @__PURE__ */ e(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to solve a puzzle" }),
|
189
|
+
nudgePointerX: _.width * 0.6,
|
190
|
+
nudgePointerY: _.height * 0.4
|
191
|
+
}
|
192
|
+
}
|
193
|
+
];
|
194
|
+
N(n, [...k, ...te, ...re]), o(n), l && a.current ? h(E.SKILL_ACTIVITY, a.current, "BLUE_4", n, !0) : h(E.GAMES_ACTIVITY, i.current, "ORANGE_4", n, !0);
|
195
|
+
},
|
196
|
+
[H, h, o, N]
|
197
|
+
);
|
198
|
+
return ne(
|
199
|
+
() => ({
|
200
|
+
gameRefs: i,
|
201
|
+
puzzleRefs: r,
|
202
|
+
lessonRefs: a,
|
203
|
+
carouselNextBtnRef: c,
|
204
|
+
isJourneyInProgress: C,
|
205
|
+
startJourney: G
|
206
|
+
}),
|
207
|
+
[G]
|
208
|
+
);
|
209
|
+
};
|
210
|
+
export {
|
211
|
+
Se as useGameLauncherJourney
|
212
|
+
};
|
213
|
+
//# sourceMappingURL=use-game-launcher-journey.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"use-game-launcher-journey.js","sources":["../../../../../src/features/circle-games/game-launcher/use-game-launcher-journey/use-game-launcher-journey.tsx"],"sourcesContent":["import type { TJourneyId } from '../../../journey/journey-id/journey-id-types';\nimport type { ICoachmarkProps } from '../../../journey/use-journey/journey-context-types';\nimport type { IArrowTooltipProps } from '../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../ui/nudge/nudge-types';\nimport type { TColorNames } from '../../../ui/types';\nimport type { ICarouselRefs } from '../comps/carousel/carousel-types';\nimport type { ISegmentedGameCardRefs } from '../comps/segmented-game-card/segmented-game-card-types';\nimport type {\n IProject,\n Puzzle,\n} from '../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseGameLauncherJourneyProps } from './use-game-launcher-journey-types';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport NextIcon from '../../../../assets/line-icons/icons/next';\nimport { 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} from './constants';\n\nexport const useGameLauncherJourney = ({\n onSegmentClick,\n setCarouselIndex,\n onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n const carouselNextBtnRef = useRef<ICarouselRefs>(null);\n const gameRefs = useRef<ISegmentedGameCardRefs>(null);\n const puzzleRefs = useRef<ISegmentedGameCardRefs>(null);\n const lessonRefs = useRef<ISegmentedGameCardRefs>(null);\n\n const isJourneyInProgress = useRef(false);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney } = useJourney();\n 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 setCarouselIndex((prev: number) => prev + 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 nextCoachmark(journeyId, true, SHOW_NUDGE_AFTER_MS);\n },\n [nextCoachmark, playButtonSound, setCarouselIndex, trackEventViewed],\n );\n\n const endJourney = useCallback(\n (puzzlesData: Puzzle, journeyId: TJourneyId) => {\n onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n trackEventCompleted(ActionEvent.PUZZLE_ACTIVITY);\n nextCoachmark(journeyId);\n onJourneyComplete(journeyId);\n },\n [nextCoachmark, onJourneyComplete, onSegmentClick, trackEventCompleted],\n );\n\n const startJourney = useCallback(\n (puzzlesData: IProject<Puzzle>, isLessonAvailable: boolean, journeyId: TJourneyId) => {\n if (isJourneyInProgress.current) {\n return;\n }\n\n // If element refs are not available return, this is just for type safety\n if (\n !carouselNextBtnRef?.current?.nextBtnRef.current ||\n !puzzleRefs?.current?.segmentedCardWrapperRef.current ||\n !gameRefs?.current?.labelRef.current ||\n !puzzleRefs?.current?.labelRef.current ||\n !puzzlesData\n ) {\n return;\n }\n\n isJourneyInProgress.current = true;\n const lessonLabelDims = lessonRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n const gameLabelDims = gameRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n const puzzleLabelDims = puzzleRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n\n const launcherDims =\n puzzleRefs.current?.segmentedCardWrapperRef?.current?.getBoundingClientRect() || {\n height: 0,\n width: 0,\n };\n\n let lessonSteps: ICoachmarkProps[] = [];\n\n if (isLessonAvailable && lessonRefs.current) {\n lessonSteps = [\n {\n originalElementToHighlightRef: lessonRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'right',\n backgroundColor: 'BLUE_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">\n Get faster & stay ahead in school. Practice 3 new skills everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: lessonLabelDims.width + 50,\n tooltipYCoOrdinates: lessonLabelDims.height / 2,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselNextBtnRef.current?.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={NextIcon}\n onClick={() =>\n goToNextCard(\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: carouselNextBtnRef.current.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={NextIcon}\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: () => endJourney(puzzle, journeyId),\n }))}\n />\n ),\n indicator: {\n nudge: 'click',\n content: (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to solve a puzzle\n </Text>\n ),\n nudgePointerX: launcherDims.width * 0.6,\n nudgePointerY: launcherDims.height * 0.4,\n } as INudgeProps,\n },\n ];\n\n setJourney(journeyId, [...lessonSteps, ...gameSteps, ...puzzleSteps]);\n\n nextCoachmark(journeyId);\n if (isLessonAvailable && lessonRefs.current) {\n goToNextCard(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 [endJourney, goToNextCard, nextCoachmark, setJourney],\n );\n\n const data = useMemo(\n () => ({\n gameRefs,\n puzzleRefs,\n lessonRefs,\n carouselNextBtnRef,\n isJourneyInProgress,\n startJourney,\n }),\n [startJourney],\n );\n\n return data;\n};\n"],"names":["useGameLauncherJourney","onSegmentClick","setCarouselIndex","onJourneyComplete","carouselNextBtnRef","useRef","gameRefs","puzzleRefs","lessonRefs","isJourneyInProgress","playButtonSound","useCircleSounds","nextCoachmark","setJourney","useJourney","trackAnalytics","useUIContext","trackEventViewed","useCallback","step","AnalyticsLabel","trackEventCompleted","goToNextCard","analyticsLabelViewed","refOfNextSlide","color","journeyId","isFirstSlide","prev","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS","endJourney","puzzlesData","ProjectType","ActionEvent","startJourney","isLessonAvailable","_a","_b","_c","_d","lessonLabelDims","_g","_f","_e","gameLabelDims","_j","_i","_h","puzzleLabelDims","_m","_l","_k","launcherDims","_p","_o","_n","lessonSteps","IndicatorType","jsx","Fragment","FlexView","Text","_q","IconButton","NextIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","gameSteps","puzzleSteps","SegmentedGameCard","puzzle","useMemo"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"web-view-types.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view-types.ts"],"sourcesContent":["import type { IAvatarLayer } from '../../../ui/avatar/avatar-types';\nimport type { TUserTypes } from '../../../ui/types';\nimport type { WebViewEvent, ProjectOutcome, ProjectType } from './enums';\nimport type { WEBVIEW_ANALYTICS_EVENTS } from './web-view-analytics-events';\nimport type { IframeHTMLAttributes } from 'react';\n\nexport interface IPlayer {\n id: string;\n username: string;\n grade?: string;\n avatar?: IAvatarLayer[] | null;\n playerType: TUserTypes;\n}\n\ninterface ISyncableWebGameProps {\n joinByRoomId?: string;\n enableSync?: boolean; // applicable for all except multiplayer games and tables\n}\n\ninterface IBaseWebGameProps {\n projectId: string;\n variant: string;\n projectType: ProjectType;\n enableCloseButton?: boolean;\n}\n\nexport interface IMultiplayerWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n enablePlayerTurnIndicators?: boolean;\n}\n\nexport interface IPuzzleWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n question: string;\n askHintPermission?: boolean;\n}\n\nexport interface ILessonWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n miniGameIdentifier: string;\n sessionId: string;\n targetQuestions: number;\n}\n\nexport interface ITableWebGameProps extends IBaseWebGameProps {\n tableNumber: number;\n infiniteModeHighScore?: number;\n}\n\nexport interface IVibrationPattern {\n pattern: number[] | number;\n}\n\nexport enum IStatsToAwardErrorCode {\n DEFAULT = 'default',\n SUCCESS = 'success',\n FAIL = 'fail',\n}\n\nexport interface IPlayerStats {\n points: number;\n accuracy: number;\n timeSpent: number;\n streakDays: number;\n streakStatusToday: 'pending' | 'completed';\n errorCode: IStatsToAwardErrorCode;\n outcome: ProjectOutcome;\n value: string;\n}\n\nexport interface IInfoMessage {\n message: string;\n position: 'top' | 'bottom';\n}\n\nexport interface ITrackEvent {\n eventName: typeof WEBVIEW_ANALYTICS_EVENTS;\n properties: Record<string, unknown>;\n}\n\nexport interface IWebViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {\n baseUrl: string;\n projectDetails:\n | IMultiplayerWebGameProps\n | IPuzzleWebGameProps\n | ILessonWebGameProps\n | ITableWebGameProps;\n parentDomain: string;\n playerDetails: IPlayer;\n onBack?: () => void;\n onGameLoad?: () => void;\n onGamePlayFinish?: (playerStats: IPlayerStats) => void;\n handleInfoMessage?: (infoMessage: IInfoMessage) => void;\n}\n\nexport interface IMessageProps {\n event: `${WebViewEvent}`;\n payload: IVibrationPattern | IPlayerStats | IInfoMessage | null;\n}\n"],"names":["IStatsToAwardErrorCode"],"mappings":"AAkDY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA;"}
|
1
|
+
{"version":3,"file":"web-view-types.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view-types.ts"],"sourcesContent":["import type { IAvatarLayer } from '../../../ui/avatar/avatar-types';\nimport type { TUserTypes } from '../../../ui/types';\nimport type { WebViewEvent, ProjectOutcome, ProjectType } from './enums';\nimport type { WEBVIEW_ANALYTICS_EVENTS } from './web-view-analytics-events';\nimport type { IframeHTMLAttributes } from 'react';\n\nexport interface IPlayer {\n id: string;\n username: string;\n grade?: string;\n avatar?: IAvatarLayer[] | null;\n playerType: TUserTypes;\n}\n\ninterface ISyncableWebGameProps {\n joinByRoomId?: string;\n enableSync?: boolean; // applicable for all except multiplayer games and tables\n}\n\ninterface IBaseWebGameProps {\n projectId: string;\n variant: string;\n projectType: ProjectType;\n enableCloseButton?: boolean;\n}\n\nexport interface IMultiplayerWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n enablePlayerTurnIndicators?: boolean;\n}\n\nexport interface IPuzzleWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n question: string;\n askHintPermission?: boolean;\n}\n\nexport interface ILessonWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n miniGameIdentifier: string;\n sessionId: string;\n targetQuestions: number;\n}\n\nexport interface ITableWebGameProps extends IBaseWebGameProps {\n tableNumber: number;\n infiniteModeHighScore?: number;\n}\n\nexport interface IVibrationPattern {\n pattern: number[] | number;\n}\n\nexport enum IStatsToAwardErrorCode {\n DEFAULT = 'default',\n SUCCESS = 'success',\n FAIL = 'fail',\n}\n\nexport interface IPlayerStats {\n points: number;\n accuracy: number;\n timeSpent: number;\n streakDays: number;\n streakStatusToday: 'pending' | 'completed';\n errorCode: IStatsToAwardErrorCode;\n outcome: ProjectOutcome;\n value: string;\n starEligibleTime?: number;\n starEligibleAccuracy?: number;\n starRewarded?: boolean;\n}\n\nexport interface IInfoMessage {\n message: string;\n position: 'top' | 'bottom';\n}\n\nexport interface ITrackEvent {\n eventName: typeof WEBVIEW_ANALYTICS_EVENTS;\n properties: Record<string, unknown>;\n}\n\nexport interface IWebViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {\n baseUrl: string;\n projectDetails:\n | IMultiplayerWebGameProps\n | IPuzzleWebGameProps\n | ILessonWebGameProps\n | ITableWebGameProps;\n parentDomain: string;\n playerDetails: IPlayer;\n onBack?: () => void;\n onGameLoad?: () => void;\n onGamePlayFinish?: (playerStats: IPlayerStats) => void;\n handleInfoMessage?: (infoMessage: IInfoMessage) => void;\n}\n\nexport interface IMessageProps {\n event: `${WebViewEvent}`;\n payload: IVibrationPattern | IPlayerStats | IInfoMessage | null;\n}\n"],"names":["IStatsToAwardErrorCode"],"mappings":"AAkDY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA;"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var E = /* @__PURE__ */ ((R) => (R.CIRCLE_ACTIVITIES_INTRO_JOURNEY = "CIRCLE_ACTIVITIES_INTRO_JOURNEY", R.CIRCLE_LEADERBOARD_INTRO_JOURNEY = "CIRCLE_LEADERBOARD_INTRO_JOURNEY", R.CIRCLE_POINTS_REWARD_JOURNEY = "CIRCLE_POINTS_REWARD_JOURNEY", R.CIRCLE_STREAK_UPDATE_JOURNEY = "CIRCLE_STREAK_UPDATE_JOURNEY", R.CIRCLE_TUTORIAL_JOURNEY = "CIRCLE_TUTORIAL_JOURNEY", R
|
1
|
+
var E = /* @__PURE__ */ ((R) => (R.CIRCLE_ACTIVITIES_INTRO_JOURNEY = "CIRCLE_ACTIVITIES_INTRO_JOURNEY", R.CIRCLE_LEADERBOARD_INTRO_JOURNEY = "CIRCLE_LEADERBOARD_INTRO_JOURNEY", R.CIRCLE_POINTS_REWARD_JOURNEY = "CIRCLE_POINTS_REWARD_JOURNEY", R.CIRCLE_STREAK_UPDATE_JOURNEY = "CIRCLE_STREAK_UPDATE_JOURNEY", R.CIRCLE_TUTORIAL_JOURNEY = "CIRCLE_TUTORIAL_JOURNEY", R))(E || {});
|
2
2
|
export {
|
3
3
|
E as JOURNEY_ID_STUDENT
|
4
4
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n
|
1
|
+
{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BALhBA,IAAAA,KAAA,CAAA,CAAA;"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import i from "styled-components";
|
2
|
+
import { RAINBOW_COLOR_ANIMATION_DURATION as r } from "../../constants.js";
|
3
|
+
import { rainbowColorAnimation as n } from "../../helper.js";
|
4
|
+
import { ARC_Z_INDEX as s } from "./constants.js";
|
5
|
+
const p = i.svg`
|
6
|
+
position: absolute;
|
7
|
+
z-index: ${s};
|
8
|
+
`, A = i.path`
|
9
|
+
stroke: ${({ theme: o, stroke: t }) => o.colors[t]};
|
10
|
+
animation: ${({ $playRainbowColors: o }) => o ? n : "undefined"}
|
11
|
+
${r}s ease infinite forwards;
|
12
|
+
`;
|
13
|
+
export {
|
14
|
+
A as Path,
|
15
|
+
p as Svg
|
16
|
+
};
|
17
|
+
//# sourceMappingURL=animated-arc-styled.js.map
|
package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"animated-arc-styled.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\n\nimport styled from 'styled-components';\n\nimport { RAINBOW_COLOR_ANIMATION_DURATION } from '../../constants';\nimport { rainbowColorAnimation } from '../../helper';\nimport { ARC_Z_INDEX } from './constants';\n\nexport const Svg = styled.svg`\n position: absolute;\n z-index: ${ARC_Z_INDEX};\n`;\n\nexport const Path = styled.path<{ stroke: TColorNames; $playRainbowColors: boolean }>`\n stroke: ${({ theme, stroke }) => theme.colors[stroke]};\n animation: ${({ $playRainbowColors }) =>\n $playRainbowColors ? rainbowColorAnimation : 'undefined'}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["Svg","styled","ARC_Z_INDEX","Path","theme","stroke","$playRainbowColors","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;AAQO,MAAMA,IAAMC,EAAO;AAAA;AAAA,aAEbC,CAAW;AAAA,GAGXC,IAAOF,EAAO;AAAA,YACf,CAAC,EAAE,OAAAG,GAAO,QAAAC,EAAA,MAAaD,EAAM,OAAOC,CAAM,CAAC;AAAA,eACxC,CAAC,EAAE,oBAAAC,EAAA,MACZA,IAAqBC,IAAwB,WAAW;AAAA,MACxDC,CAAgC;AAAA;"}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
2
|
+
import { useRef as A, useLayoutEffect as $ } from "react";
|
3
|
+
import { describeArc as R } from "../../helper.js";
|
4
|
+
import { Svg as k, Path as w } from "./animated-arc-styled.js";
|
5
|
+
import { ADJUSTED_START_ANGLE as D } from "./constants.js";
|
6
|
+
const x = ({
|
7
|
+
radius: e,
|
8
|
+
strokeWidth: n,
|
9
|
+
color: h,
|
10
|
+
targetAngle: m,
|
11
|
+
startAngle: p = 0,
|
12
|
+
duration: r = 2,
|
13
|
+
mode: o = "draw",
|
14
|
+
delay: s = 0,
|
15
|
+
playRainbowColors: y = !1
|
16
|
+
}) => {
|
17
|
+
const a = A(null), g = -D + p, i = e, u = e - n / 2, c = R(i, i, u, g, m);
|
18
|
+
return $(() => {
|
19
|
+
const t = a.current;
|
20
|
+
if (t) {
|
21
|
+
if (o === "draw") {
|
22
|
+
const f = t.getTotalLength();
|
23
|
+
t.style.strokeDasharray = `${f}`, t.style.strokeDashoffset = `${f}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
|
24
|
+
t.style.transition = `stroke-dashoffset ${r}s linear ${s}s`, t.style.strokeDashoffset = "0";
|
25
|
+
});
|
26
|
+
}
|
27
|
+
o === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
|
28
|
+
t.style.transition = `opacity 0s ease-in-out ${s}s`, t.style.opacity = "1";
|
29
|
+
}));
|
30
|
+
}
|
31
|
+
}, [c, o, r, s]), /* @__PURE__ */ l(k, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ l(
|
32
|
+
w,
|
33
|
+
{
|
34
|
+
ref: a,
|
35
|
+
d: c,
|
36
|
+
fill: "none",
|
37
|
+
stroke: h,
|
38
|
+
strokeWidth: n,
|
39
|
+
strokeLinecap: "butt",
|
40
|
+
$playRainbowColors: y
|
41
|
+
}
|
42
|
+
) });
|
43
|
+
};
|
44
|
+
export {
|
45
|
+
x as AnimatedArc
|
46
|
+
};
|
47
|
+
//# sourceMappingURL=animated-arc.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"animated-arc.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect } from 'react';\n\nimport { describeArc } from '../../helper';\nimport * as Styled from './animated-arc-styled';\nimport { ADJUSTED_START_ANGLE } from './constants';\n\nexport const AnimatedArc: React.FC<IAnimatedArcProps> = ({\n radius,\n strokeWidth,\n color,\n targetAngle,\n startAngle = 0,\n duration = 2,\n mode = 'draw',\n delay = 0,\n playRainbowColors = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const adjustedStartAngle = -ADJUSTED_START_ANGLE + startAngle;\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = describeArc(center, center, arcRadius, adjustedStartAngle, targetAngle);\n\n useLayoutEffect(() => {\n const path = pathRef.current;\n\n if (!path) return;\n\n if (mode === 'draw') {\n const length = path.getTotalLength();\n\n path.style.strokeDasharray = `${length}`;\n path.style.strokeDashoffset = `${length}`;\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n path.style.strokeDashoffset = '0';\n });\n }\n\n if (mode === 'fade') {\n path.style.opacity = '0';\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `opacity 0s ease-in-out ${delay}s`;\n path.style.opacity = '1';\n });\n }\n }, [arcPath, mode, duration, delay]);\n\n return (\n <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n <Styled.Path\n ref={pathRef}\n d={arcPath}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"butt\"\n $playRainbowColors={playRainbowColors}\n />\n </Styled.Svg>\n );\n};\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","playRainbowColors","pathRef","useRef","adjustedStartAngle","ADJUSTED_START_ANGLE","center","arcRadius","arcPath","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path"],"mappings":";;;;;AAQO,MAAMA,IAA2C,CAAC;AAAA,EACvD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,mBAAAC,IAAoB;AACtB,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAAqB,CAACC,IAAuBR,GAC7CS,IAASb,GACTc,IAAYd,IAASC,IAAc,GACnCc,IAAUC,EAAYH,GAAQA,GAAQC,GAAWH,GAAoBR,CAAW;AAEtF,SAAAc,EAAgB,MAAM;AACpB,UAAMC,IAAOT,EAAQ;AAErB,QAAKS,GAEL;AAAA,UAAIZ,MAAS,QAAQ;AACb,cAAAa,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBb,CAAQ,YAAYE,CAAK,KACtEW,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIZ,MAAS,WACXY,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AACrB,QAAAA,EAAA,MAAM,aAAa,0BAA0BX,CAAK,KACvDW,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACH,GAAST,GAAMD,GAAUE,CAAK,CAAC,qBAGhCa,GAAA,EAAW,OAAO,IAAIpB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAqB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,GAAGM;AAAA,MACH,MAAK;AAAA,MACL,QAAQb;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,oBAAoBO;AAAA,IAAA;AAAA,EAExB,EAAA,CAAA;AAEJ;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/constants.ts"],"sourcesContent":["export const ARC_Z_INDEX = 1;\n\nexport const ADJUSTED_START_ANGLE = 150;\n"],"names":["ARC_Z_INDEX","ADJUSTED_START_ANGLE"],"mappings":"AAAO,MAAMA,IAAc,GAEdC,IAAuB;"}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { ARC_Z_INDEX as _ } from "./comp/animated-arc/constants.js";
|
2
|
+
const I = 300, N = 2, A = _ + 1, E = A + 1, T = E + 1, O = 99 / 30, o = 2 / 30, L = 56 / 30, t = 12 / 30, D = 20 / 30, c = 43 / 30;
|
3
|
+
export {
|
4
|
+
N as BORDER_OFFSET,
|
5
|
+
E as CONTENT_CONTAINER_Z_INDEX,
|
6
|
+
A as LINE_MARKING_Z_INDEX,
|
7
|
+
T as NUMBER_MARKING_Z_INDEX,
|
8
|
+
t as PROGRESS_FILL_DELAY,
|
9
|
+
D as PROGRESS_FILL_DURATION,
|
10
|
+
c as RAINBOW_COLOR_ANIMATION_DURATION,
|
11
|
+
L as TARGET_ACHIEVED_DELAY,
|
12
|
+
o as TARGET_HELPER_TEXT_APPEAR_DELAY,
|
13
|
+
O as TOTAL_ANIMATION_DURATION,
|
14
|
+
I as TOTAL_ARC_AVAILABLE
|
15
|
+
};
|
16
|
+
//# sourceMappingURL=constants.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/digital-meter/constants.ts"],"sourcesContent":["import { ARC_Z_INDEX } from './comp/animated-arc/constants';\n\nexport const TOTAL_ARC_AVAILABLE = 300;\n\nexport const BORDER_OFFSET = 2;\nexport const LINE_MARKING_Z_INDEX = ARC_Z_INDEX + 1;\nexport const CONTENT_CONTAINER_Z_INDEX = LINE_MARKING_Z_INDEX + 1;\nexport const NUMBER_MARKING_Z_INDEX = CONTENT_CONTAINER_Z_INDEX + 1;\n\n// animation details\nexport const TOTAL_ANIMATION_DURATION = 99 / 30; // in 99 frames\nexport const TARGET_HELPER_TEXT_APPEAR_DELAY = 2 / 30; // delay of 2 frames\nexport const TARGET_ACHIEVED_DELAY = 56 / 30; // 56 frames\nexport const PROGRESS_FILL_DELAY = 12 / 30; // delay of 12 frames\nexport const PROGRESS_FILL_DURATION = 20 / 30; // in 20 frames\nexport const RAINBOW_COLOR_ANIMATION_DURATION = 43 / 30; // 43 frames;\n"],"names":["TOTAL_ARC_AVAILABLE","BORDER_OFFSET","LINE_MARKING_Z_INDEX","ARC_Z_INDEX","CONTENT_CONTAINER_Z_INDEX","NUMBER_MARKING_Z_INDEX","TOTAL_ANIMATION_DURATION","TARGET_HELPER_TEXT_APPEAR_DELAY","TARGET_ACHIEVED_DELAY","PROGRESS_FILL_DELAY","PROGRESS_FILL_DURATION","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";AAEO,MAAMA,IAAsB,KAEtBC,IAAgB,GAChBC,IAAuBC,IAAc,GACrCC,IAA4BF,IAAuB,GACnDG,IAAyBD,IAA4B,GAGrDE,IAA2B,KAAK,IAChCC,IAAkC,IAAI,IACtCC,IAAwB,KAAK,IAC7BC,IAAsB,KAAK,IAC3BC,IAAyB,KAAK,IAC9BC,IAAmC,KAAK;"}
|
@@ -0,0 +1,87 @@
|
|
1
|
+
import o, { keyframes as e } from "styled-components";
|
2
|
+
import { GAME_LAUNCHER_SIZE as r, GAME_LAUNCHER_SIZE_LARGE as s } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
3
|
+
import i from "../../ui/text/text.js";
|
4
|
+
import { ADJUSTED_START_ANGLE as n } from "./comp/animated-arc/constants.js";
|
5
|
+
import { CONTENT_CONTAINER_Z_INDEX as l, LINE_MARKING_Z_INDEX as d, NUMBER_MARKING_Z_INDEX as m, TARGET_HELPER_TEXT_APPEAR_DELAY as a, RAINBOW_COLOR_ANIMATION_DURATION as p } from "./constants.js";
|
6
|
+
import { rainbowColorAnimation as f } from "./helper.js";
|
7
|
+
const g = o.div`
|
8
|
+
height: ${r}px;
|
9
|
+
width: ${r}px;
|
10
|
+
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
11
|
+
display: flex;
|
12
|
+
align-items: center;
|
13
|
+
justify-content: center;
|
14
|
+
position: relative;
|
15
|
+
border-radius: 100%;
|
16
|
+
border: 1px solid ${({ theme: t }) => t.colors.WHITE};
|
17
|
+
animation: ${({ $isTargetAchieved: t }) => t ? e`100%{transform: scale(1.02)}` : "unset"}
|
18
|
+
0.133s ease alternate;
|
19
|
+
`, N = o.div`
|
20
|
+
display: flex;
|
21
|
+
justify-content: center;
|
22
|
+
align-items: center;
|
23
|
+
position: absolute;
|
24
|
+
z-index: ${l};
|
25
|
+
height: 92%;
|
26
|
+
width: 92%;
|
27
|
+
border-radius: 100%;
|
28
|
+
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
29
|
+
`, b = o.div`
|
30
|
+
position: relative;
|
31
|
+
flex-grow: 1;
|
32
|
+
bottom: ${r === s ? -8 : -6}px;
|
33
|
+
`;
|
34
|
+
o.div`
|
35
|
+
position: absolute;
|
36
|
+
`;
|
37
|
+
const u = o.div`
|
38
|
+
width: ${r / 2}px;
|
39
|
+
height: 2px;
|
40
|
+
position: absolute;
|
41
|
+
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
42
|
+
transform-style: preserve-3d;
|
43
|
+
backface-visibility: hidden;
|
44
|
+
transform-origin: left;
|
45
|
+
transform: rotate(${({ $angle: t }) => -240 + t}deg);
|
46
|
+
left: ${r / 2}px;
|
47
|
+
top: ${r / 2}px;
|
48
|
+
z-index: ${d};
|
49
|
+
`, T = o.div`
|
50
|
+
position: absolute;
|
51
|
+
height: ${r - r * 0.0625 - 10}px;
|
52
|
+
transform: rotate(${({ $angle: t }) => -n + t}deg);
|
53
|
+
z-index: ${m};
|
54
|
+
`, h = o.div`
|
55
|
+
transform: rotate(${({ $angle: t }) => n - t}deg);
|
56
|
+
`, C = o.div`
|
57
|
+
position: absolute;
|
58
|
+
top: 0;
|
59
|
+
transform: ${({ top: t }) => `translateY(${t}px)`};
|
60
|
+
`, R = o(i)`
|
61
|
+
animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
|
62
|
+
ease-in-out ${a}s forwards;
|
63
|
+
`, I = o(i)`
|
64
|
+
animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
|
65
|
+
ease ${a}s forwards;
|
66
|
+
`;
|
67
|
+
o.div`
|
68
|
+
height: 100%;
|
69
|
+
width: 100%;
|
70
|
+
`;
|
71
|
+
const v = o(i)`
|
72
|
+
animation: ${({ $isTargetAchieved: t }) => t ? f : "unset"}
|
73
|
+
${p}s ease infinite forwards;
|
74
|
+
`;
|
75
|
+
export {
|
76
|
+
C as BottomAbsoluteView,
|
77
|
+
N as ContentContainer,
|
78
|
+
g as DigitalMeter,
|
79
|
+
R as HelperTextPrimary,
|
80
|
+
I as HelperTextSecondary,
|
81
|
+
u as LineMarking,
|
82
|
+
T as MarkingContainer,
|
83
|
+
h as MarkingText,
|
84
|
+
b as NumberCountContainer,
|
85
|
+
v as RainboxColorText
|
86
|
+
};
|
87
|
+
//# sourceMappingURL=digital-meter-styled.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"digital-meter-styled.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nimport {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport Text from '../../ui/text/text';\nimport { ADJUSTED_START_ANGLE } from './comp/animated-arc/constants';\nimport {\n CONTENT_CONTAINER_Z_INDEX,\n LINE_MARKING_Z_INDEX,\n NUMBER_MARKING_Z_INDEX,\n RAINBOW_COLOR_ANIMATION_DURATION,\n TARGET_HELPER_TEXT_APPEAR_DELAY,\n} from './constants';\nimport { rainbowColorAnimation } from './helper';\n\nexport const DigitalMeter = styled.div<{ $isTargetAchieved: boolean }>`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 100%;\n border: 1px solid ${({ theme }) => theme.colors.WHITE};\n animation: ${({ $isTargetAchieved }) =>\n $isTargetAchieved ? keyframes`100%{transform: scale(1.02)}` : 'unset'}\n 0.133s ease alternate;\n`;\n\nexport const ContentContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n z-index: ${CONTENT_CONTAINER_Z_INDEX};\n height: 92%;\n width: 92%;\n border-radius: 100%;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n`;\n\nexport const NumberCountContainer = styled.div`\n position: relative;\n flex-grow: 1;\n bottom: ${GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? -8 : -6}px;\n`;\n\nexport const AbsoluteView = styled.div`\n position: absolute;\n`;\n\nexport const LineMarking = styled.div<{\n $angle: number;\n}>`\n width: ${GAME_LAUNCHER_SIZE / 2}px;\n height: 2px;\n position: absolute;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n transform-style: preserve-3d;\n backface-visibility: hidden;\n transform-origin: left;\n transform: rotate(${({ $angle }) => -240 + $angle}deg);\n left: ${GAME_LAUNCHER_SIZE / 2}px;\n top: ${GAME_LAUNCHER_SIZE / 2}px;\n z-index: ${LINE_MARKING_Z_INDEX};\n`;\n\nexport const MarkingContainer = styled.div<{ $angle: number }>`\n position: absolute;\n height: ${GAME_LAUNCHER_SIZE - GAME_LAUNCHER_SIZE * 0.0625 - 10}px;\n transform: rotate(${({ $angle }) => -ADJUSTED_START_ANGLE + $angle}deg);\n z-index: ${NUMBER_MARKING_Z_INDEX};\n`;\n\nexport const MarkingText = styled.div<{ $angle: number }>`\n transform: rotate(${({ $angle }) => ADJUSTED_START_ANGLE - $angle}deg);\n`;\n\nexport const BottomAbsoluteView = styled.div<{ top: number }>`\n position: absolute;\n top: 0;\n transform: ${({ top }) => `translateY(${top}px)`};\n`;\n\nexport const HelperTextPrimary = styled(Text)`\n animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n ease-in-out ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const HelperTextSecondary = styled(Text)`\n animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n ease ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const TargetAchievedTextLottie = styled.div`\n height: 100%;\n width: 100%;\n`;\n\nexport const RainboxColorText = styled(Text)<{ $isTargetAchieved: boolean }>`\n animation: ${({ $isTargetAchieved }) => ($isTargetAchieved ? rainbowColorAnimation : 'unset')}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["DigitalMeter","styled","GAME_LAUNCHER_SIZE","theme","$isTargetAchieved","keyframes","ContentContainer","CONTENT_CONTAINER_Z_INDEX","NumberCountContainer","GAME_LAUNCHER_SIZE_LARGE","LineMarking","$angle","LINE_MARKING_Z_INDEX","MarkingContainer","ADJUSTED_START_ANGLE","NUMBER_MARKING_Z_INDEX","MarkingText","BottomAbsoluteView","top","HelperTextPrimary","Text","TARGET_HELPER_TEXT_APPEAR_DELAY","HelperTextSecondary","RainboxColorText","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;;;AAiBO,MAAMA,IAAeC,EAAO;AAAA,YACvBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA,sBACP,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,eACxC,CAAC,EAAE,mBAAAC,QACZA,IAAoBC,kCAA0C,OAAO;AAAA;AAAA,GAI9DC,IAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAK1BM,CAAyB;AAAA;AAAA;AAAA;AAAA,sBAIhB,CAAC,EAAE,OAAAJ,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,GAG5CK,IAAuBP,EAAO;AAAA;AAAA;AAAA,YAG/BC,MAAuBO,IAA2B,KAAK,EAAE;AAAA;AAGzCR,EAAO;AAAA;AAAA;AAI5B,MAAMS,IAAcT,EAAO;AAAA,WAGvBC,IAAqB,CAAC;AAAA;AAAA;AAAA,sBAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAInC,CAAC,EAAE,QAAAQ,EAAO,MAAM,OAAOA,CAAM;AAAA,UACzCT,IAAqB,CAAC;AAAA,SACvBA,IAAqB,CAAC;AAAA,aAClBU,CAAoB;AAAA,GAGpBC,IAAmBZ,EAAO;AAAA;AAAA,YAE3BC,IAAqBA,IAAqB,SAAS,EAAE;AAAA,sBAC3C,CAAC,EAAE,QAAAS,EAAA,MAAa,CAACG,IAAuBH,CAAM;AAAA,aACvDI,CAAsB;AAAA,GAGtBC,IAAcf,EAAO;AAAA,sBACZ,CAAC,EAAE,QAAAU,QAAaG,IAAuBH,CAAM;AAAA,GAGtDM,IAAqBhB,EAAO;AAAA;AAAA;AAAA,eAG1B,CAAC,EAAE,KAAAiB,EAAU,MAAA,cAAcA,CAAG,KAAK;AAAA,GAGrCC,IAAoBlB,EAAOmB,CAAI;AAAA,eAC7Bf,iEAAyE;AAAA,kBACtEgB,CAA+B;AAAA,GAGpCC,IAAsBrB,EAAOmB,CAAI;AAAA,eAC/Bf,iEAAyE;AAAA,WAC7EgB,CAA+B;AAAA;AAGFpB,EAAO;AAAA;AAAA;AAAA;AAKlC,MAAAsB,IAAmBtB,EAAOmB,CAAI;AAAA,eAC5B,CAAC,EAAE,mBAAAhB,EAAA,MAAyBA,IAAoBoB,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}
|