@cuemath/leap 2.8.37-rj-beta-0.2 → 2.8.38-guru.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/line-icons/icons/sheet.js +54 -0
- package/dist/assets/line-icons/icons/sheet.js.map +1 -0
- package/dist/assets/lottie/lottie.js +0 -6
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/analytics-events/whitelist-events.js +15 -13
- package/dist/features/analytics-events/whitelist-events.js.map +1 -1
- package/dist/features/circle-games/enum/circle-onboarding-steps.js +1 -1
- package/dist/features/circle-games/enum/circle-onboarding-steps.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 +35 -29
- 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-star/table-star-styled.js +11 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js +16 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js +42 -35
- 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 +212 -252
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -1
- package/dist/features/circle-games/game-launcher/dal/use-get-circle-home-details-dal/use-get-circle-home-details-dal.js +13 -14
- package/dist/features/circle-games/game-launcher/dal/use-get-circle-home-details-dal/use-get-circle-home-details-dal.js.map +1 -1
- package/dist/features/circle-games/game-launcher/game-launcher-analytics-events.js +7 -8
- 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 +69 -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/communication/pub-sub/constants.js +2 -1
- package/dist/features/communication/pub-sub/constants.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/milestone/create/milestone-create-styled.js +11 -9
- package/dist/features/milestone/create/milestone-create-styled.js.map +1 -1
- package/dist/features/milestone/edit/comps/milestone-edit-loader/milestone-edit-loader-styled.js +6 -8
- package/dist/features/milestone/edit/comps/milestone-edit-loader/milestone-edit-loader-styled.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list-container.js +130 -117
- package/dist/features/milestone/milestone-list-container/milestone-list-container.js.map +1 -1
- package/dist/features/milestone/milestone-resources/resources-assign/added-resource-and-filters.js +205 -0
- package/dist/features/milestone/milestone-resources/resources-assign/added-resource-and-filters.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/api/get-resource.js +11 -0
- package/dist/features/milestone/milestone-resources/resources-assign/api/get-resource.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/api/goal-resource-assign.js +9 -0
- package/dist/features/milestone/milestone-resources/resources-assign/api/goal-resource-assign.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/api/lpar-resource-assign.js +9 -0
- package/dist/features/milestone/milestone-resources/resources-assign/api/lpar-resource-assign.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/comps/filter-item/filter-item-styled.js +19 -0
- package/dist/features/milestone/milestone-resources/resources-assign/comps/filter-item/filter-item-styled.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/comps/filter-item/filter-item.js +47 -0
- package/dist/features/milestone/milestone-resources/resources-assign/comps/filter-item/filter-item.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/comps/resource-item/resource-item-styled.js +22 -0
- package/dist/features/milestone/milestone-resources/resources-assign/comps/resource-item/resource-item-styled.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/comps/resource-item/resource-item.js +60 -0
- package/dist/features/milestone/milestone-resources/resources-assign/comps/resource-item/resource-item.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/comps/resource-item/utils.js +6 -0
- package/dist/features/milestone/milestone-resources/resources-assign/comps/resource-item/utils.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/constant.js +6 -0
- package/dist/features/milestone/milestone-resources/resources-assign/constant.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resource-assign-analytics-events.js +19 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resource-assign-analytics-events.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resource-items/no-resource-screen.js +32 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resource-items/no-resource-screen.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resource-items/resource-items-styled.js +19 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resource-items/resource-items-styled.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resource-items/resource-items.js +85 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resource-items/resource-items.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resources-assign-styled.js +65 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resources-assign-styled.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resources-assign.js +233 -0
- package/dist/features/milestone/milestone-resources/resources-assign/resources-assign.js.map +1 -0
- package/dist/features/milestone/milestone-resources/resources-assign/utils.js +12 -0
- package/dist/features/milestone/milestone-resources/resources-assign/utils.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/points/points.js +10 -15
- package/dist/features/post-game-stats/points/points.js.map +1 -1
- package/dist/features/post-game-stats/post-game-stats.js +61 -83
- package/dist/features/post-game-stats/post-game-stats.js.map +1 -1
- package/dist/features/ui/grade-selector/grade-tab.js +15 -15
- package/dist/features/ui/grade-selector/grade-tab.js.map +1 -1
- package/dist/features/ui/inputs/searchable-input/searchable-input-styled.js +28 -0
- package/dist/features/ui/inputs/searchable-input/searchable-input-styled.js.map +1 -0
- package/dist/features/ui/inputs/searchable-input/searchable-input.js +101 -0
- package/dist/features/ui/inputs/searchable-input/searchable-input.js.map +1 -0
- package/dist/features/ui/tab/tab-styled.js +7 -8
- package/dist/features/ui/tab/tab-styled.js.map +1 -1
- package/dist/features/ui/tab/tab.js +36 -31
- package/dist/features/ui/tab/tab.js.map +1 -1
- package/dist/features/ui/theme/tab.js +3 -3
- package/dist/features/ui/theme/tab.js.map +1 -1
- package/dist/index.d.ts +47 -52
- package/dist/index.js +345 -343
- package/dist/index.js.map +1 -1
- 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-mode-star/table-mode-star-styled.js +0 -25
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star-styled.js.map +0 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js +0 -57
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js.map +0 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.js +0 -27
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.js.map +0 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js +0 -37
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js.map +0 -1
- package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/constants.js +0 -9
- 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 -205
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js +0 -17
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js +0 -47
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js +0 -6
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/constants.js +0 -16
- package/dist/features/post-game-stats/digital-meter/constants.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +0 -87
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter.js +0 -185
- package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/helper.js +0 -33
- package/dist/features/post-game-stats/digital-meter/helper.js.map +0 -1
- package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js +0 -29
- package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js.map +0 -1
- package/dist/features/post-game-stats/number-count-animation/number-count-animation.js +0 -20
- package/dist/features/post-game-stats/number-count-animation/number-count-animation.js.map +0 -1
- package/dist/static/point2.7cec6e24.json +0 -1
- package/dist/static/point3.f96fe7aa.json +0 -1
- package/dist/static/point4.fe04fb83.json +0 -1
- package/dist/static/table-mode-star.b8a1d762.json +0 -1
- package/dist/static/table-segment-star.78e851d6.json +0 -1
- package/dist/static/target-achieved-text.053bd142.json +0 -2830
- package/dist/static/target-achieved-text.10db8475.json +0 -1
@@ -1,205 +0,0 @@
|
|
1
|
-
import { jsx as r, Fragment as L } from "react/jsx-runtime";
|
2
|
-
import { useRef as R, useCallback as b } from "react";
|
3
|
-
import x from "../../../../../assets/line-icons/icons/carat-right.js";
|
4
|
-
import { PLATFORM_EVENTS_STUDENT as W } from "../../../../analytics-events/platform-events-student.js";
|
5
|
-
import { JOURNEY_ID_STUDENT as G } from "../../../../journey/journey-id/journey-id-student.js";
|
6
|
-
import { IndicatorType as d } from "../../../../journey/use-journey/constants.js";
|
7
|
-
import { useJourney as w } from "../../../../journey/use-journey/use-journey.js";
|
8
|
-
import J from "../../../../ui/buttons/icon-button/icon-button.js";
|
9
|
-
import { useUIContext as X } from "../../../../ui/context/context.js";
|
10
|
-
import I from "../../../../ui/layout/flex-view.js";
|
11
|
-
import u from "../../../../ui/text/text.js";
|
12
|
-
import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as S } from "../../../enum/circle-onboarding-steps.js";
|
13
|
-
import { useCircleSounds as V } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
|
14
|
-
import { TablesCard as B } from "../../comps/tables-card/tables-card.js";
|
15
|
-
import { GAME_LAUNCHER_ANALYTICS_EVENTS as F } from "../../game-launcher-analytics-events.js";
|
16
|
-
import { TABLE_CARD_INDEX as v, PUZZLE_CARD_INDEX as M } from "./constants.js";
|
17
|
-
import { Indicator as j } from "./use-table-launcher-journey-styled.js";
|
18
|
-
const me = ({
|
19
|
-
carouselRefs: s,
|
20
|
-
onTableSegmentClick: O,
|
21
|
-
onJourneyComplete: _
|
22
|
-
}) => {
|
23
|
-
const e = G.CIRCLE_TABLES_INTRO_JOURNEY, t = R(null), p = R(null), N = R(!1), { playButtonSound: P } = V(), { nextCoachmark: i, setJourney: y, addCoachmark: c } = w(), { onEvent: T } = X(), C = b(
|
24
|
-
(o) => {
|
25
|
-
var l, a;
|
26
|
-
o && O(o), T(W.ONBOARDING_STEP_COMPLETED, {
|
27
|
-
step: S.TABLES
|
28
|
-
}), (l = t == null ? void 0 : t.current) == null || l.setLabelVisiblity(!0), (a = t == null ? void 0 : t.current) == null || a.stopLabelAnimation(), _(e), i(e, !1);
|
29
|
-
},
|
30
|
-
[e, i, _, O, T]
|
31
|
-
), H = b(
|
32
|
-
(o, l) => {
|
33
|
-
var m, g, h;
|
34
|
-
if (!((m = t.current) != null && m.segmentedCardWrapperRef.current) || !((g = t.current) != null && g.labelRef.current))
|
35
|
-
return;
|
36
|
-
const a = t.current.labelRef.current.getBoundingClientRect(), n = (h = t.current) == null ? void 0 : h.segmentedCardWrapperRef.current.getBoundingClientRect();
|
37
|
-
c(e, {
|
38
|
-
originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
|
39
|
-
isActive: !1,
|
40
|
-
type: d.TOOLTIP,
|
41
|
-
elementToHighlight: /* @__PURE__ */ r(
|
42
|
-
B,
|
43
|
-
{
|
44
|
-
ref: p,
|
45
|
-
defaultTable: l,
|
46
|
-
label: o.label,
|
47
|
-
data: o.data,
|
48
|
-
onPress: C,
|
49
|
-
onGoBackFromTableLevel: C
|
50
|
-
}
|
51
|
-
),
|
52
|
-
indicator: {
|
53
|
-
position: "left",
|
54
|
-
backgroundColor: "YELLOW_4",
|
55
|
-
width: 236,
|
56
|
-
tooltipItem: /* @__PURE__ */ r(I, { children: /* @__PURE__ */ r(u, { $renderAs: "ab2-bold", children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
|
57
|
-
tooltipXCoOrdinates: 0,
|
58
|
-
tooltipYCoOrdinates: a.height * 0.35
|
59
|
-
}
|
60
|
-
}), c(e, {
|
61
|
-
originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
|
62
|
-
isActive: !1,
|
63
|
-
type: d.NUDGE,
|
64
|
-
indicator: {
|
65
|
-
nudge: "click",
|
66
|
-
content: /* @__PURE__ */ r(u, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
|
67
|
-
nudgePointerX: n.width / 2 + 50,
|
68
|
-
nudgePointerY: n.height * 0.4
|
69
|
-
},
|
70
|
-
elementToHighlight: /* @__PURE__ */ r(L, {})
|
71
|
-
}), i(e, !1, 100), i(e, !0, 2e3);
|
72
|
-
const E = setTimeout(() => {
|
73
|
-
var f;
|
74
|
-
clearTimeout(E), (f = p.current) == null || f.startLabelAnimation("YELLOW_4");
|
75
|
-
}, 3e3);
|
76
|
-
},
|
77
|
-
[c, C, e, i]
|
78
|
-
), A = b(() => {
|
79
|
-
var a;
|
80
|
-
P(), (a = s.current) == null || a.goToIndex(v), i(e, !1, 1e3), T(W.ONBOARDING_STEP_VIEWED, {
|
81
|
-
step: S.TABLES
|
82
|
-
});
|
83
|
-
const o = setTimeout(() => {
|
84
|
-
var n;
|
85
|
-
clearTimeout(o), (n = t.current) == null || n.setLabelVisiblity(!1), i(e, !0);
|
86
|
-
}, 3e3), l = setTimeout(() => {
|
87
|
-
var n;
|
88
|
-
clearTimeout(l), (n = p.current) == null || n.startLabelAnimation("YELLOW_4");
|
89
|
-
}, 3100);
|
90
|
-
}, [s, e, i, P, T]), U = b(
|
91
|
-
(o) => {
|
92
|
-
var g, h, f, Y, k, D;
|
93
|
-
if (N.current)
|
94
|
-
return;
|
95
|
-
const l = (g = s.current) == null ? void 0 : g.indicatorRefs, a = (h = s.current) == null ? void 0 : h.nextBtnRef, n = l == null ? void 0 : l[v];
|
96
|
-
if (!((f = t.current) != null && f.segmentedCardWrapperRef.current) || !((Y = t.current) != null && Y.labelRef.current) || !l || !(a != null && a.current) || !n || !n.current)
|
97
|
-
return;
|
98
|
-
N.current = !0;
|
99
|
-
const E = t.current.labelRef.current.getBoundingClientRect(), m = (k = t.current) == null ? void 0 : k.segmentedCardWrapperRef.current.getBoundingClientRect();
|
100
|
-
y(e, []), s.current.currentIndex === M ? (c(e, {
|
101
|
-
originalElementToHighlightRef: (D = s.current) == null ? void 0 : D.nextBtnRef,
|
102
|
-
isActive: !1,
|
103
|
-
type: d.NUDGE,
|
104
|
-
indicator: {
|
105
|
-
nudge: "click",
|
106
|
-
content: /* @__PURE__ */ r(u, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
|
107
|
-
nudgePointerX: 0,
|
108
|
-
nudgePointerY: 0
|
109
|
-
},
|
110
|
-
elementToHighlight: /* @__PURE__ */ r(
|
111
|
-
J,
|
112
|
-
{
|
113
|
-
renderAs: "secondary",
|
114
|
-
Icon: x,
|
115
|
-
onClick: A,
|
116
|
-
analyticsLabel: F.JOURNEY_NEXT_ACTIVITY
|
117
|
-
}
|
118
|
-
)
|
119
|
-
}), i(e, !1, 500)) : (c(e, {
|
120
|
-
originalElementToHighlightRef: n,
|
121
|
-
isActive: !1,
|
122
|
-
type: d.TOOLTIP,
|
123
|
-
elementToHighlight: /* @__PURE__ */ r(j, { $isActive: !1 }),
|
124
|
-
indicator: {
|
125
|
-
position: "bottom",
|
126
|
-
backgroundColor: "YELLOW_4",
|
127
|
-
width: 52,
|
128
|
-
tooltipItem: /* @__PURE__ */ r(
|
129
|
-
I,
|
130
|
-
{
|
131
|
-
$position: "absolute",
|
132
|
-
$flexDirection: "row",
|
133
|
-
style: { top: 6, left: 8, cursor: "pointer" },
|
134
|
-
onClick: A,
|
135
|
-
children: /* @__PURE__ */ r(u, { $renderAs: "ab2-bold", children: "NEW" })
|
136
|
-
}
|
137
|
-
),
|
138
|
-
tooltipYCoOrdinates: 14
|
139
|
-
// Need some offset in Y direction from top
|
140
|
-
}
|
141
|
-
}), c(e, {
|
142
|
-
originalElementToHighlightRef: n,
|
143
|
-
isActive: !1,
|
144
|
-
type: d.NUDGE,
|
145
|
-
indicator: {
|
146
|
-
nudge: "click",
|
147
|
-
content: "",
|
148
|
-
nudgePointerY: 20
|
149
|
-
},
|
150
|
-
elementToHighlight: /* @__PURE__ */ r(L, {})
|
151
|
-
}), i(e, !1, 500), i(e, !0, 1500)), c(e, {
|
152
|
-
originalElementToHighlightRef: t.current.labelRef,
|
153
|
-
isActive: !1,
|
154
|
-
type: d.TOOLTIP,
|
155
|
-
elementToHighlight: /* @__PURE__ */ r(L, {}),
|
156
|
-
indicator: {
|
157
|
-
position: "right",
|
158
|
-
backgroundColor: "YELLOW_4",
|
159
|
-
width: 264,
|
160
|
-
tooltipItem: /* @__PURE__ */ r(I, { children: /* @__PURE__ */ r(u, { $renderAs: "ab2-bold", children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
|
161
|
-
tooltipXCoOrdinates: E.width + 50,
|
162
|
-
tooltipYCoOrdinates: E.height / 2
|
163
|
-
}
|
164
|
-
}), c(e, {
|
165
|
-
originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
|
166
|
-
isActive: !1,
|
167
|
-
type: d.NUDGE,
|
168
|
-
indicator: {
|
169
|
-
nudge: "click",
|
170
|
-
content: /* @__PURE__ */ r(u, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
|
171
|
-
nudgePointerX: m.width / 2 + 50,
|
172
|
-
nudgePointerY: m.height / 2
|
173
|
-
},
|
174
|
-
elementToHighlight: /* @__PURE__ */ r(
|
175
|
-
B,
|
176
|
-
{
|
177
|
-
ref: p,
|
178
|
-
label: o.label,
|
179
|
-
data: o.data,
|
180
|
-
onPress: () => {
|
181
|
-
},
|
182
|
-
onPressTableSegment: ($) => H(o, $)
|
183
|
-
}
|
184
|
-
)
|
185
|
-
});
|
186
|
-
},
|
187
|
-
[
|
188
|
-
c,
|
189
|
-
s,
|
190
|
-
A,
|
191
|
-
H,
|
192
|
-
e,
|
193
|
-
i,
|
194
|
-
y
|
195
|
-
]
|
196
|
-
);
|
197
|
-
return {
|
198
|
-
tableRef: t,
|
199
|
-
startJourney: U
|
200
|
-
};
|
201
|
-
};
|
202
|
-
export {
|
203
|
-
me as useTableLauncherJourney
|
204
|
-
};
|
205
|
-
//# sourceMappingURL=use-table-launcher-journey.js.map
|
@@ -1 +0,0 @@
|
|
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, 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 { PUZZLE_CARD_INDEX, TABLE_CARD_INDEX } from './constants';\nimport * as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n carouselRefs,\n onTableSegmentClick,\n onJourneyComplete,\n}: IUseTableJourneyProps) => {\n const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n const originalTableRef = useRef<ITableCardRef>(null);\n const highlightedTableRef = useRef<ITableCardRef>(null);\n const isJourneyInProgress = useRef(false);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, addCoachmark } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const endJourney = 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 onJourneyComplete(journeyId);\n nextCoachmark(journeyId, false);\n },\n [journeyId, nextCoachmark, 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={endJourney}\n onGoBackFromTableLevel={endJourney}\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, 100); // Show coachmark => Each table has 3... and Hide the previous two\n nextCoachmark(journeyId, true, 2000); // Show nudge => Pick a level\n\n const startAnimationOnLabelAgain = setTimeout(() => {\n clearTimeout(startAnimationOnLabelAgain);\n highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n }, 3000);\n },\n [addCoachmark, endJourney, journeyId, nextCoachmark],\n );\n\n const goToTableLauncher = useCallback(() => {\n playButtonSound();\n carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n nextCoachmark(journeyId, false, 1000);\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 }, 3000);\n\n const animateLabel = setTimeout(() => {\n clearTimeout(animateLabel);\n highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n }, 3100);\n }, [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackAnalytics]);\n\n const startJourney = useCallback(\n (tablesData: ITables) => {\n if (isJourneyInProgress.current) {\n return;\n }\n\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 isJourneyInProgress.current = true;\n\n const labelDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n const tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n setJourney(journeyId, []);\n\n // TAKE THE USER TO THE TABLE CARD\n if (carouselRefs.current.currentIndex === PUZZLE_CARD_INDEX) {\n addCoachmark(journeyId, {\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 nextCoachmark(journeyId, false, 500); // Show nudge => Click to proceed\n } else {\n addCoachmark(journeyId, {\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 addCoachmark(journeyId, {\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 nextCoachmark(journeyId, false, 500); // Show Coachmark => NEW\n nextCoachmark(journeyId, true, 1500); // 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 return {\n tableRef: originalTableRef,\n startJourney,\n };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","originalTableRef","useRef","highlightedTableRef","isJourneyInProgress","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","useJourney","trackAnalytics","useUIContext","endJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","startAnimationOnLabelAgain","goToTableLauncher","TABLE_CARD_INDEX","showNudge","animateLabel","startJourney","tablesData","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","PUZZLE_CARD_INDEX","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","S.Indicator","tableInfo"],"mappings":"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"}
|
package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js
DELETED
@@ -1,17 +0,0 @@
|
|
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
DELETED
@@ -1 +0,0 @@
|
|
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;"}
|
@@ -1,47 +0,0 @@
|
|
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
|
@@ -1 +0,0 @@
|
|
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;"}
|
@@ -1 +0,0 @@
|
|
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;"}
|
@@ -1,16 +0,0 @@
|
|
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
|
@@ -1 +0,0 @@
|
|
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;"}
|
@@ -1,87 +0,0 @@
|
|
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
|
@@ -1 +0,0 @@
|
|
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;"}
|
@@ -1,185 +0,0 @@
|
|
1
|
-
import { jsxs as c, jsx as r, Fragment as E } from "react/jsx-runtime";
|
2
|
-
import { memo as M, useState as O, useEffect as W } from "react";
|
3
|
-
import { LOTTIE as y } from "../../../assets/lottie/lottie.js";
|
4
|
-
import { GAME_LAUNCHER_SIZE as i, GAME_LAUNCHER_SIZE_LARGE as l } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
5
|
-
import _ from "../../ui/layout/flex-view.js";
|
6
|
-
import w from "../../ui/lottie-animation/lottie-animation.js";
|
7
|
-
import $ from "../../ui/separator/separator.js";
|
8
|
-
import L from "../../ui/text/text.js";
|
9
|
-
import { NumberCountAnimation as B } from "../number-count-animation/number-count-animation.js";
|
10
|
-
import { AnimatedArc as f } from "./comp/animated-arc/animated-arc.js";
|
11
|
-
import { TARGET_ACHIEVED_DELAY as b, TOTAL_ARC_AVAILABLE as m, BORDER_OFFSET as g, PROGRESS_FILL_DURATION as s, PROGRESS_FILL_DELAY as I, TOTAL_ANIMATION_DURATION as U } from "./constants.js";
|
12
|
-
import { DigitalMeter as u, ContentContainer as P, NumberCountContainer as j, RainboxColorText as R, LineMarking as k, MarkingContainer as C, MarkingText as D, BottomAbsoluteView as N, HelperTextPrimary as Y, HelperTextSecondary as Z } from "./digital-meter-styled.js";
|
13
|
-
const tr = M(
|
14
|
-
({
|
15
|
-
show: T,
|
16
|
-
value: a,
|
17
|
-
maxValue: n,
|
18
|
-
targetValue: o = 0,
|
19
|
-
displayText: S,
|
20
|
-
progressType: d,
|
21
|
-
helperTextPrimary: G,
|
22
|
-
helperTextSecondary: H,
|
23
|
-
onComplete: p
|
24
|
-
}) => {
|
25
|
-
const [h, F] = O(!1);
|
26
|
-
return W(() => {
|
27
|
-
let t, e;
|
28
|
-
const A = !!(o && a >= o);
|
29
|
-
return T && (A && (t = setTimeout(() => {
|
30
|
-
F(!0);
|
31
|
-
}, b * 1e3)), e = setTimeout(() => {
|
32
|
-
p();
|
33
|
-
}, (A ? U : b) * 1e3)), () => {
|
34
|
-
t && clearTimeout(t), e && clearTimeout(e);
|
35
|
-
};
|
36
|
-
}, [T, a, o, p]), T ? /* @__PURE__ */ c(u, { $isTargetAchieved: h, children: [
|
37
|
-
/* @__PURE__ */ r(
|
38
|
-
f,
|
39
|
-
{
|
40
|
-
targetAngle: m,
|
41
|
-
strokeWidth: i === l ? 16 : 12,
|
42
|
-
color: "BLACK_5",
|
43
|
-
radius: (i - g) / 2,
|
44
|
-
duration: 0
|
45
|
-
}
|
46
|
-
),
|
47
|
-
/* @__PURE__ */ r(P, { children: /* @__PURE__ */ c(_, { $flexDirection: "column", $alignItems: "center", children: [
|
48
|
-
/* @__PURE__ */ c(_, { $flexDirection: "row", $alignItems: "flex-end", children: [
|
49
|
-
/* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(
|
50
|
-
R,
|
51
|
-
{
|
52
|
-
$renderAs: i === l ? "ah1" : "ah2",
|
53
|
-
$color: "GREEN_4",
|
54
|
-
$isTargetAchieved: h,
|
55
|
-
children: /* @__PURE__ */ r(
|
56
|
-
B,
|
57
|
-
{
|
58
|
-
initialValue: 0,
|
59
|
-
targetValue: Math.floor(a),
|
60
|
-
durationInSec: s,
|
61
|
-
delayInSec: I
|
62
|
-
}
|
63
|
-
)
|
64
|
-
}
|
65
|
-
) }),
|
66
|
-
d === "stepper" && /* @__PURE__ */ c(
|
67
|
-
L,
|
68
|
-
{
|
69
|
-
$renderAs: i === l ? "ah4" : "ab1",
|
70
|
-
$color: "WHITE",
|
71
|
-
children: [
|
72
|
-
"/",
|
73
|
-
n
|
74
|
-
]
|
75
|
-
}
|
76
|
-
)
|
77
|
-
] }),
|
78
|
-
/* @__PURE__ */ r($, { height: 8 }),
|
79
|
-
/* @__PURE__ */ r(
|
80
|
-
L,
|
81
|
-
{
|
82
|
-
$renderAs: i === l ? "ac3-black" : "ac4-black",
|
83
|
-
$color: "WHITE_T_60",
|
84
|
-
children: S
|
85
|
-
}
|
86
|
-
)
|
87
|
-
] }) }),
|
88
|
-
d === "stepper" && Array.from({ length: a }, (t, e) => {
|
89
|
-
const A = m / n;
|
90
|
-
return /* @__PURE__ */ r(
|
91
|
-
f,
|
92
|
-
{
|
93
|
-
startAngle: A * e,
|
94
|
-
targetAngle: A,
|
95
|
-
strokeWidth: i === l ? 16 : 12,
|
96
|
-
color: "GREEN_4",
|
97
|
-
radius: (i - g) / 2,
|
98
|
-
mode: "fade",
|
99
|
-
duration: s / n,
|
100
|
-
delay: I + s / n * e,
|
101
|
-
playRainbowColors: h
|
102
|
-
},
|
103
|
-
e
|
104
|
-
);
|
105
|
-
}),
|
106
|
-
d === "stepper" && Array.from({ length: n + 1 }, (t, e) => {
|
107
|
-
const A = m / n;
|
108
|
-
return /* @__PURE__ */ c(E, { children: [
|
109
|
-
/* @__PURE__ */ r(k, { $angle: A * e }, e + "linemarking"),
|
110
|
-
/* @__PURE__ */ r(C, { $angle: A * e, children: /* @__PURE__ */ r(D, { $angle: A * e, children: /* @__PURE__ */ r(
|
111
|
-
R,
|
112
|
-
{
|
113
|
-
$renderAs: i === l ? "ac3-black" : "ac4-black",
|
114
|
-
$isTargetAchieved: e === o && h,
|
115
|
-
$color: o && e === o ? "GREEN_4" : "WHITE_T_60",
|
116
|
-
children: e
|
117
|
-
}
|
118
|
-
) }) }, e)
|
119
|
-
] });
|
120
|
-
}),
|
121
|
-
d === "linear" && /* @__PURE__ */ c(E, { children: [
|
122
|
-
/* @__PURE__ */ r(
|
123
|
-
f,
|
124
|
-
{
|
125
|
-
targetAngle: a * m / n,
|
126
|
-
strokeWidth: i === l ? 16 : 12,
|
127
|
-
color: "GREEN_4",
|
128
|
-
radius: (i - g) / 2,
|
129
|
-
duration: s,
|
130
|
-
delay: I,
|
131
|
-
playRainbowColors: h
|
132
|
-
}
|
133
|
-
),
|
134
|
-
/* @__PURE__ */ c(E, { children: [
|
135
|
-
o && /* @__PURE__ */ r(k, { $angle: o * m / n }),
|
136
|
-
Array.from(/* @__PURE__ */ new Set([0, o, n])).map((t, e) => /* @__PURE__ */ r(
|
137
|
-
C,
|
138
|
-
{
|
139
|
-
$angle: t * m / n,
|
140
|
-
children: /* @__PURE__ */ r(D, { $angle: t * m / n, children: /* @__PURE__ */ r(
|
141
|
-
R,
|
142
|
-
{
|
143
|
-
$renderAs: i === l ? "ac3-black" : "ac4-black",
|
144
|
-
$color: o && t === o ? "GREEN_4" : "WHITE_T_60",
|
145
|
-
$isTargetAchieved: a >= t && h && t === o,
|
146
|
-
children: t
|
147
|
-
}
|
148
|
-
) })
|
149
|
-
},
|
150
|
-
e
|
151
|
-
))
|
152
|
-
] })
|
153
|
-
] }),
|
154
|
-
h && /* @__PURE__ */ r(N, { top: i, children: /* @__PURE__ */ r(w, { src: y.TARGET_ACHIEVED_TEXT }) }),
|
155
|
-
!h && /* @__PURE__ */ c(N, { top: i, children: [
|
156
|
-
/* @__PURE__ */ r($, { height: 25 }),
|
157
|
-
/* @__PURE__ */ c(_, { $flexDirection: "column", $alignItems: "center", children: [
|
158
|
-
/* @__PURE__ */ c(
|
159
|
-
Y,
|
160
|
-
{
|
161
|
-
$renderAs: i === l ? "ac3-black" : "ac4-black",
|
162
|
-
$color: "WHITE_T_60",
|
163
|
-
children: [
|
164
|
-
G,
|
165
|
-
/* @__PURE__ */ r($, { height: i * 0.03 })
|
166
|
-
]
|
167
|
-
}
|
168
|
-
),
|
169
|
-
/* @__PURE__ */ r(
|
170
|
-
Z,
|
171
|
-
{
|
172
|
-
$renderAs: i === l ? "ah4" : "ab1",
|
173
|
-
$color: "WHITE",
|
174
|
-
children: H
|
175
|
-
}
|
176
|
-
)
|
177
|
-
] })
|
178
|
-
] })
|
179
|
-
] }) : null;
|
180
|
-
}
|
181
|
-
);
|
182
|
-
export {
|
183
|
-
tr as DigitalMeter
|
184
|
-
};
|
185
|
-
//# sourceMappingURL=digital-meter.js.map
|