@cuemath/leap 2.8.60-beta-0.1 → 2.8.60
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/illustrations/illustrations.js +0 -9
- package/dist/assets/illustrations/illustrations.js.map +1 -1
- package/dist/assets/line-icons/icons/closed-eye.js +23 -0
- package/dist/assets/line-icons/icons/closed-eye.js.map +1 -0
- package/dist/features/chapters/chapters-list/chapter-item/chapter-item-styled.js +33 -98
- package/dist/features/chapters/chapters-list/chapter-item/chapter-item-styled.js.map +1 -1
- package/dist/features/chapters/chapters-list/chapter-item/chapter-item.js +47 -76
- package/dist/features/chapters/chapters-list/chapter-item/chapter-item.js.map +1 -1
- package/dist/features/chapters/chapters-list/chapters-list-styled.js +5 -5
- package/dist/features/chapters/chapters-list/chapters-list-styled.js.map +1 -1
- package/dist/features/chapters/chapters-list/chapters-list.js +70 -65
- package/dist/features/chapters/chapters-list/chapters-list.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js +62 -75
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +127 -110
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -1
- package/dist/features/milestone/create/comps/milestone-progress-v2/milestone-progress-v2.js +92 -0
- package/dist/features/milestone/create/comps/milestone-progress-v2/milestone-progress-v2.js.map +1 -0
- package/dist/features/milestone/create/comps/milestone-progress-v2/styled.js +25 -0
- package/dist/features/milestone/create/comps/milestone-progress-v2/styled.js.map +1 -0
- package/dist/features/milestone/edit/comps/edit-milestone-modal/index.js +53 -51
- package/dist/features/milestone/edit/comps/edit-milestone-modal/index.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/api/get-milestones.js +17 -9
- package/dist/features/milestone/milestone-list-container/api/get-milestones.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-list.js +91 -116
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-list.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/context-menu-helper/menu-element-styled.js +13 -0
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/context-menu-helper/menu-element-styled.js.map +1 -0
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/context-menu-helper/menu-element.js +38 -0
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/context-menu-helper/menu-element.js.map +1 -0
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/goals/goal-action-ctas.js +121 -105
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/goals/goal-action-ctas.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-info.js +173 -145
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-info.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs-styled.js +10 -24
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs-styled.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs.js +81 -76
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-utils.js +22 -10
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-utils.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-status.js +53 -0
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-status.js.map +1 -0
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-styled.js +37 -70
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-styled.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget.js +174 -114
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-info.js +25 -0
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-info.js.map +1 -0
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-rank.js +16 -29
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-rank.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-styled.js +23 -19
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-styled.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome.js +35 -23
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list-container.js +36 -34
- package/dist/features/milestone/milestone-list-container/milestone-list-container.js.map +1 -1
- package/dist/features/milestone/milestone-resources/resources-list/resources-list-styled.js +1 -1
- package/dist/features/milestone/milestone-resources/resources-list/resources-list-styled.js.map +1 -1
- package/dist/features/milestone/milestone-resources/resources-list/resources-list.js +78 -96
- package/dist/features/milestone/milestone-resources/resources-list/resources-list.js.map +1 -1
- package/dist/features/milestone/milestone-tests/tests-list/tests-list.js +68 -77
- package/dist/features/milestone/milestone-tests/tests-list/tests-list.js.map +1 -1
- package/dist/features/sheets/sheets-list/sheet-item/reward-n-actions/teacher-actions/teacher-actions-constant.js +3 -4
- package/dist/features/sheets/sheets-list/sheet-item/reward-n-actions/teacher-actions/teacher-actions-constant.js.map +1 -1
- package/dist/features/sheets/utils/is-v3-worksheet.js.map +1 -1
- package/dist/features/ui/arrow-tooltip/arrow-tooltip.js +29 -30
- package/dist/features/ui/arrow-tooltip/arrow-tooltip.js.map +1 -1
- package/dist/features/ui/constants/z-index.js +1 -1
- package/dist/features/ui/constants/z-index.js.map +1 -1
- package/dist/features/ui/context-menu/context-menu-styled.js +14 -28
- package/dist/features/ui/context-menu/context-menu-styled.js.map +1 -1
- package/dist/features/ui/context-menu/context-menu.js +15 -30
- package/dist/features/ui/context-menu/context-menu.js.map +1 -1
- package/dist/features/ui/lottie-animation/lottie-animation.js +39 -24
- package/dist/features/ui/lottie-animation/lottie-animation.js.map +1 -1
- package/dist/features/ui/theme/button.js +102 -17
- package/dist/features/ui/theme/button.js.map +1 -1
- package/dist/index.d.ts +12 -187
- package/dist/index.js +471 -487
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/assets/line-icons/icons/alarm.js +0 -41
- package/dist/assets/line-icons/icons/alarm.js.map +0 -1
- package/dist/assets/line-icons/icons/dart.js +0 -23
- package/dist/assets/line-icons/icons/dart.js.map +0 -1
- package/dist/assets/line-icons/icons/exclamation.js +0 -26
- package/dist/assets/line-icons/icons/exclamation.js.map +0 -1
- package/dist/assets/line-icons/icons/home2.js +0 -25
- package/dist/assets/line-icons/icons/home2.js.map +0 -1
- package/dist/assets/line-icons/icons/important.js +0 -23
- package/dist/assets/line-icons/icons/important.js.map +0 -1
- package/dist/assets/line-icons/icons/puzzle.js +0 -25
- package/dist/assets/line-icons/icons/puzzle.js.map +0 -1
- package/dist/assets/line-icons/icons/recap.js +0 -32
- package/dist/assets/line-icons/icons/recap.js.map +0 -1
- package/dist/assets/line-icons/icons/status.js +0 -41
- package/dist/assets/line-icons/icons/status.js.map +0 -1
- package/dist/assets/line-icons/icons/testtube.js +0 -33
- package/dist/assets/line-icons/icons/testtube.js.map +0 -1
- package/dist/features/chapters-v2/api/chapter.js +0 -10
- package/dist/features/chapters-v2/api/chapter.js.map +0 -1
- package/dist/features/chapters-v2/chapter-details/block-sections/block-section-view.js +0 -112
- package/dist/features/chapters-v2/chapter-details/block-sections/block-section-view.js.map +0 -1
- package/dist/features/chapters-v2/chapter-details/block-sections/block-sections-styled.js +0 -26
- package/dist/features/chapters-v2/chapter-details/block-sections/block-sections-styled.js.map +0 -1
- package/dist/features/chapters-v2/chapter-details/block-sections/block-sections.js +0 -69
- package/dist/features/chapters-v2/chapter-details/block-sections/block-sections.js.map +0 -1
- package/dist/features/chapters-v2/chapter-details/chapter-banner/chapter-banner-styled.js +0 -90
- package/dist/features/chapters-v2/chapter-details/chapter-banner/chapter-banner-styled.js.map +0 -1
- package/dist/features/chapters-v2/chapter-details/chapter-banner/chapter-banner.js +0 -97
- package/dist/features/chapters-v2/chapter-details/chapter-banner/chapter-banner.js.map +0 -1
- package/dist/features/chapters-v2/chapter-details/chapter-details-styled.js +0 -52
- package/dist/features/chapters-v2/chapter-details/chapter-details-styled.js.map +0 -1
- package/dist/features/chapters-v2/chapter-details/chapter-details.js +0 -103
- package/dist/features/chapters-v2/chapter-details/chapter-details.js.map +0 -1
- package/dist/features/chapters-v2/comps/node-card/border-path-animation.js +0 -13
- package/dist/features/chapters-v2/comps/node-card/border-path-animation.js.map +0 -1
- package/dist/features/chapters-v2/comps/node-card/node-card-styled.js +0 -154
- package/dist/features/chapters-v2/comps/node-card/node-card-styled.js.map +0 -1
- package/dist/features/chapters-v2/comps/node-card/node-card-tags.js +0 -12
- package/dist/features/chapters-v2/comps/node-card/node-card-tags.js.map +0 -1
- package/dist/features/chapters-v2/comps/node-card/node-card.js +0 -12
- package/dist/features/chapters-v2/comps/node-card/node-card.js.map +0 -1
- package/dist/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options-styled.js +0 -32
- package/dist/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options-styled.js.map +0 -1
- package/dist/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options.js +0 -31
- package/dist/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options.js.map +0 -1
- package/dist/features/chapters-v2/comps/node-card/student-actions/student-actions.js +0 -160
- package/dist/features/chapters-v2/comps/node-card/student-actions/student-actions.js.map +0 -1
- package/dist/features/chapters-v2/comps/node-card/teacher-actions/teacher-actions.js +0 -184
- package/dist/features/chapters-v2/comps/node-card/teacher-actions/teacher-actions.js.map +0 -1
- package/dist/features/chapters-v2/comps/tag/tag-styled.js +0 -13
- package/dist/features/chapters-v2/comps/tag/tag-styled.js.map +0 -1
- package/dist/features/chapters-v2/comps/tag/tag.js +0 -28
- package/dist/features/chapters-v2/comps/tag/tag.js.map +0 -1
- package/dist/features/chapters-v2/constants/block-constants.js +0 -20
- package/dist/features/chapters-v2/constants/block-constants.js.map +0 -1
- package/dist/features/chapters-v2/constants/node-constants.js +0 -15
- package/dist/features/chapters-v2/constants/node-constants.js.map +0 -1
- package/dist/features/chapters-v2/utils/index.js +0 -40
- package/dist/features/chapters-v2/utils/index.js.map +0 -1
- package/dist/features/chapters-v2/utils/node-card-utils.js +0 -78
- package/dist/features/chapters-v2/utils/node-card-utils.js.map +0 -1
- package/dist/static/chapter-header-bg-2.c8d96894.svg +0 -1
- package/dist/static/node-custom-test-bg.d3b757be.svg +0 -1
- package/dist/static/node-learn-bg.b61f815c.svg +0 -1
- package/dist/static/node-practice-bg.16cbaf2a.svg +0 -1
- package/dist/static/node-project-bg.e6a33e28.svg +0 -1
- package/dist/static/node-puzzle-bg.3422135c.svg +0 -1
- package/dist/static/node-recap-bg.546154e4.svg +0 -1
- package/dist/static/node-test-prep-bg.42c0b9c4.svg +0 -1
- package/dist/static/node-video-bg.3df3f73a.svg +0 -1
@@ -1,87 +1,89 @@
|
|
1
1
|
import { jsx as t, jsxs as a } from "react/jsx-runtime";
|
2
|
-
import
|
2
|
+
import Ae, { forwardRef as be, useState as o, useRef as N, useCallback as i, useMemo as z, useImperativeHandle as Ee, useEffect as K, memo as ge } from "react";
|
3
3
|
import Ne from "../../../../../assets/line-icons/icons/back2.js";
|
4
4
|
import { LOTTIE as R } from "../../../../../assets/lottie/lottie.js";
|
5
5
|
import pe from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
|
6
6
|
import { useUIContext as Ce } from "../../../../ui/context/context.js";
|
7
|
-
import
|
7
|
+
import Se from "../../../../ui/layout/flex-view.js";
|
8
8
|
import w from "../../../../ui/lottie-animation/lottie-animation.js";
|
9
|
-
import
|
10
|
-
import
|
9
|
+
import Ie from "../../../../ui/separator/separator.js";
|
10
|
+
import F from "../../../../ui/text/text.js";
|
11
11
|
import { useCircleSounds as Le } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
|
12
12
|
import { GAME_LAUNCHER_ANALYTICS_EVENTS as fe } from "../../game-launcher-analytics-events.js";
|
13
13
|
import { CardContainer as ve } from "../card-container/card-container.js";
|
14
|
-
import { GAME_LAUNCHER_SIZE as
|
15
|
-
import { TABLE_REVEAL_ANIMATION as
|
16
|
-
import
|
17
|
-
import
|
18
|
-
import { CardWrapper as
|
19
|
-
const
|
14
|
+
import { GAME_LAUNCHER_SIZE as p, GAME_LAUNCHER_SIZE_LARGE as _e } from "../card-container/constants.js";
|
15
|
+
import { TABLE_REVEAL_ANIMATION as C, TABLE_MODE_LABEL_COLOR as Te } from "./constants.js";
|
16
|
+
import He from "./table-mode/table-mode.js";
|
17
|
+
import $e from "./table-segment-star/table-segment-star.js";
|
18
|
+
import { CardWrapper as Re, TableSegmentsWrapper as we, InfiniteButtonWrapper as ye, AbsoluteView as S, TableSegmentCardShadowContainer as We, TableSegment as Be, TableNumber as De, TableModeContainer as Pe, TableModeWrapper as ke, AnimatedView as Ve, ModeOverlay as xe, IconWrapper as Ue } from "./tables-card-styled.js";
|
19
|
+
const y = {
|
20
|
+
renderer: "svg"
|
21
|
+
}, qe = {
|
20
22
|
loop: !1,
|
21
23
|
autoplay: !1,
|
22
|
-
|
23
|
-
},
|
24
|
+
...y
|
25
|
+
}, je = be(
|
24
26
|
({
|
25
|
-
data:
|
26
|
-
label:
|
27
|
+
data: l,
|
28
|
+
label: W,
|
27
29
|
onPress: b,
|
28
30
|
openModesOfTable: r,
|
29
31
|
defaultTable: E,
|
30
|
-
onGoBackFromTableLevel:
|
31
|
-
onPressTableSegment:
|
32
|
-
},
|
33
|
-
var
|
34
|
-
const { onEvent:
|
32
|
+
onGoBackFromTableLevel: g,
|
33
|
+
onPressTableSegment: I
|
34
|
+
}, G) => {
|
35
|
+
var Y;
|
36
|
+
const { onEvent: B } = Ce(), { playButtonSound: m } = Le(), [u, L] = o(!0), [d, h] = o(
|
35
37
|
(r == null ? void 0 : r.tableNumber) ?? null
|
36
|
-
), [
|
37
|
-
stars: ((
|
38
|
+
), [f, D] = o(null), [J, A] = o("WHITE_T_60"), [c, v] = o({
|
39
|
+
stars: ((Y = l.tableList.find((e) => e.tableNumber === (r == null ? void 0 : r.tableNumber))) == null ? void 0 : Y.stars) ?? [],
|
38
40
|
tableNumber: (r == null ? void 0 : r.tableNumber) ?? 0
|
39
|
-
}), [
|
41
|
+
}), [Q, X] = o(!0), [_, P] = o(!1), [k, M] = o("WHITE_T_60"), V = N(null), x = N(null), [U, O] = o((r == null ? void 0 : r.rewardStar) ?? []), [q] = o(!1), T = N(null), H = N(), j = i(
|
40
42
|
(e) => {
|
41
|
-
if (
|
42
|
-
|
43
|
+
if (I) {
|
44
|
+
I(e);
|
43
45
|
return;
|
44
46
|
}
|
45
|
-
m(),
|
47
|
+
m(), L(!0), h(e.tableNumber), v({ ...e }), O([]), B(fe.TABLE_SELECTED, {
|
46
48
|
meta: {
|
47
49
|
table_of: e.tableNumber
|
48
50
|
}
|
49
51
|
});
|
50
52
|
},
|
51
|
-
[
|
52
|
-
),
|
53
|
+
[I, m, B]
|
54
|
+
), ee = i(
|
53
55
|
(e) => {
|
54
|
-
A(_ ?
|
56
|
+
A(_ ? k : "WHITE_T_60"), h(e.tableNumber);
|
55
57
|
},
|
56
|
-
[
|
57
|
-
),
|
58
|
+
[k, _]
|
59
|
+
), te = i(() => {
|
58
60
|
A("WHITE_T_60"), !c.tableNumber && h(null);
|
59
|
-
}, [c.tableNumber]),
|
61
|
+
}, [c.tableNumber]), re = i(() => {
|
60
62
|
var n;
|
61
|
-
|
62
|
-
const e = (
|
63
|
-
(n = T.current) == null || n.playSegments(
|
64
|
-
|
63
|
+
g == null || g(), m(), L(!1), h(null);
|
64
|
+
const e = (C.DISAPPEAR[1] - C.DISAPPEAR[0]) / 30;
|
65
|
+
(n = T.current) == null || n.playSegments(C.DISAPPEAR, !0), H.current = setTimeout(() => {
|
66
|
+
v({ stars: [], tableNumber: 0 });
|
65
67
|
}, e * 1e3);
|
66
|
-
}, [
|
68
|
+
}, [g, m]), ie = i(() => {
|
67
69
|
var e;
|
68
|
-
(e = T.current) == null || e.playSegments(
|
69
|
-
}, []),
|
70
|
+
(e = T.current) == null || e.playSegments(C.REVEAL, !0);
|
71
|
+
}, []), ne = i((e) => {
|
70
72
|
const n = {
|
71
73
|
sequence: 1,
|
72
74
|
random: 2,
|
73
75
|
advance: 3
|
74
76
|
};
|
75
|
-
A(
|
76
|
-
}, []),
|
77
|
-
|
78
|
-
}, []),
|
77
|
+
A(Te[e] ?? "WHITE_T_60"), D(n[e] ?? 0);
|
78
|
+
}, []), oe = i(() => {
|
79
|
+
D(null), A("WHITE_T_60");
|
80
|
+
}, []), s = z(() => c, [c]), se = z(() => [
|
79
81
|
{
|
80
82
|
top: 20,
|
81
83
|
left: 10.5,
|
82
84
|
type: "sequence",
|
83
|
-
tableNumber:
|
84
|
-
isStarAchieved:
|
85
|
+
tableNumber: s.tableNumber,
|
86
|
+
isStarAchieved: s.stars.includes("sequence"),
|
85
87
|
semicirclePosiiionTop: "-19%",
|
86
88
|
semicirclePosiiionLeft: "-43%",
|
87
89
|
semicircleHoverColor: "#B259004D"
|
@@ -90,8 +92,8 @@ const Ue = {
|
|
90
92
|
top: 20,
|
91
93
|
left: 65.5,
|
92
94
|
type: "random",
|
93
|
-
tableNumber:
|
94
|
-
isStarAchieved:
|
95
|
+
tableNumber: s.tableNumber,
|
96
|
+
isStarAchieved: s.stars.includes("random"),
|
95
97
|
semicirclePosiiionTop: "-19%",
|
96
98
|
semicirclePosiiionLeft: "65%",
|
97
99
|
semicircleHoverColor: "#0055CC4D"
|
@@ -100,18 +102,18 @@ const Ue = {
|
|
100
102
|
top: 66,
|
101
103
|
left: 38,
|
102
104
|
type: "advance",
|
103
|
-
tableNumber:
|
104
|
-
isStarAchieved:
|
105
|
+
tableNumber: s.tableNumber,
|
106
|
+
isStarAchieved: s.stars.includes("advance"),
|
105
107
|
semicirclePosiiionTop: "74%",
|
106
108
|
semicirclePosiiionLeft: "11%",
|
107
109
|
semicircleHoverColor: "#A9099C4D"
|
108
110
|
}
|
109
|
-
], [
|
111
|
+
], [s.tableNumber, s.stars]), le = i(() => {
|
110
112
|
b({
|
111
113
|
mode: "infinite",
|
112
|
-
infiniteModeHighScore:
|
114
|
+
infiniteModeHighScore: l.infiniteModeHighScore
|
113
115
|
});
|
114
|
-
}, [b,
|
116
|
+
}, [b, l.infiniteModeHighScore]), ce = i(
|
115
117
|
(e, n) => {
|
116
118
|
b({
|
117
119
|
mode: e,
|
@@ -120,77 +122,91 @@ const Ue = {
|
|
120
122
|
});
|
121
123
|
},
|
122
124
|
[b, c.tableNumber]
|
123
|
-
),
|
124
|
-
A(e),
|
125
|
-
}, []),
|
126
|
-
return
|
127
|
-
labelRef:
|
128
|
-
segmentedCardWrapperRef:
|
129
|
-
startLabelAnimation:
|
130
|
-
stopLabelAnimation:
|
131
|
-
setLabelVisiblity:
|
132
|
-
handleTableSegmentClick:
|
133
|
-
})),
|
125
|
+
), ae = i(() => f ? `${d}× LEVEL${f}` : d ? `${d}× Table` : W, [f, d, W]), me = i((e) => {
|
126
|
+
A(e), M(e), P(!0);
|
127
|
+
}, []), ue = i(() => P(!1), []), de = i((e) => X(e), []);
|
128
|
+
return Ee(G, () => ({
|
129
|
+
labelRef: V,
|
130
|
+
segmentedCardWrapperRef: x,
|
131
|
+
startLabelAnimation: me,
|
132
|
+
stopLabelAnimation: ue,
|
133
|
+
setLabelVisiblity: de,
|
134
|
+
handleTableSegmentClick: j
|
135
|
+
})), K(() => () => {
|
134
136
|
H.current && clearTimeout(H.current);
|
135
|
-
}, []),
|
136
|
-
E && (m(),
|
137
|
+
}, []), K(() => {
|
138
|
+
E && (m(), L(!0), h(E.tableNumber), v({ ...E }));
|
137
139
|
}, [E, m]), /* @__PURE__ */ t(
|
138
140
|
ve,
|
139
141
|
{
|
140
|
-
labelRef:
|
141
|
-
ref:
|
142
|
+
labelRef: V,
|
143
|
+
ref: x,
|
142
144
|
strokeColor: "WHITE",
|
143
|
-
label:
|
144
|
-
labelColor:
|
145
|
+
label: ae(),
|
146
|
+
labelColor: J,
|
145
147
|
isAnimated: _,
|
146
|
-
showLabel:
|
147
|
-
children: /* @__PURE__ */ a(
|
148
|
-
/* @__PURE__ */ a(
|
148
|
+
showLabel: Q,
|
149
|
+
children: /* @__PURE__ */ a(Re, { children: [
|
150
|
+
/* @__PURE__ */ a(we, { children: [
|
149
151
|
/* @__PURE__ */ t(
|
150
152
|
pe,
|
151
153
|
{
|
152
154
|
renderAs: "primary",
|
153
155
|
position: "top",
|
154
|
-
hidden:
|
155
|
-
tooltipItem: /* @__PURE__ */ t(
|
156
|
+
hidden: q,
|
157
|
+
tooltipItem: /* @__PURE__ */ t(F, { $renderAs: "ab3", $color: "WHITE", children: "Coming Soon" }),
|
156
158
|
children: /* @__PURE__ */ a(
|
157
|
-
|
159
|
+
ye,
|
158
160
|
{
|
159
|
-
onClick:
|
161
|
+
onClick: q ? le : void 0,
|
160
162
|
children: [
|
161
|
-
/* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(
|
162
|
-
|
163
|
+
/* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(
|
164
|
+
w,
|
165
|
+
{
|
166
|
+
src: R.INFINITE_BUTTON_BG,
|
167
|
+
settings: y,
|
168
|
+
animateOnIntersect: !0
|
169
|
+
}
|
170
|
+
) }),
|
171
|
+
/* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(
|
172
|
+
w,
|
173
|
+
{
|
174
|
+
src: R.INFINITE_BUTTON_SYMBOL,
|
175
|
+
settings: y,
|
176
|
+
animateOnIntersect: !0
|
177
|
+
}
|
178
|
+
) })
|
163
179
|
]
|
164
180
|
}
|
165
181
|
)
|
166
182
|
}
|
167
183
|
),
|
168
|
-
/* @__PURE__ */ t(
|
169
|
-
|
170
|
-
const
|
184
|
+
/* @__PURE__ */ t(We, {}),
|
185
|
+
l.tableList.map((e, n) => {
|
186
|
+
const he = 360 / l.tableList.length, Z = -(90 + 360 / (2 * l.tableList.length)) + he * (n + 1);
|
171
187
|
return /* @__PURE__ */ t(
|
172
|
-
|
188
|
+
Be,
|
173
189
|
{
|
174
|
-
$angle:
|
175
|
-
$totalSegments:
|
190
|
+
$angle: Z,
|
191
|
+
$totalSegments: l.tableList.length,
|
176
192
|
$zIndex: n + 1,
|
177
|
-
onClick: () =>
|
178
|
-
onMouseOver: () =>
|
179
|
-
onMouseLeave:
|
180
|
-
children: /* @__PURE__ */ a(
|
193
|
+
onClick: () => j(e),
|
194
|
+
onMouseOver: () => ee(e),
|
195
|
+
onMouseLeave: te,
|
196
|
+
children: /* @__PURE__ */ a(Se, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
|
181
197
|
["sequence", "random", "advance"].map(($) => /* @__PURE__ */ t(
|
182
|
-
|
198
|
+
$e,
|
183
199
|
{
|
184
200
|
isStarAchieved: e.stars.includes($),
|
185
|
-
rewardStar: !u && (r == null ? void 0 : r.tableNumber) === e.tableNumber ?
|
201
|
+
rewardStar: !u && (r == null ? void 0 : r.tableNumber) === e.tableNumber ? U.includes($) : void 0
|
186
202
|
},
|
187
203
|
$
|
188
204
|
)),
|
189
|
-
/* @__PURE__ */ t(
|
190
|
-
/* @__PURE__ */ t(
|
191
|
-
|
205
|
+
/* @__PURE__ */ t(Ie, { width: p * 0.055 }),
|
206
|
+
/* @__PURE__ */ t(De, { $angle: -Z, children: /* @__PURE__ */ t(
|
207
|
+
F,
|
192
208
|
{
|
193
|
-
$renderAs:
|
209
|
+
$renderAs: p === _e ? "ac3-black" : "ac4-black",
|
194
210
|
$color: d === e.tableNumber ? "BLACK_1" : "WHITE",
|
195
211
|
children: e.tableNumber
|
196
212
|
}
|
@@ -201,18 +217,18 @@ const Ue = {
|
|
201
217
|
);
|
202
218
|
})
|
203
219
|
] }),
|
204
|
-
c.tableNumber > 0 && /* @__PURE__ */ t(
|
205
|
-
/* @__PURE__ */ a(
|
206
|
-
|
220
|
+
c.tableNumber > 0 && /* @__PURE__ */ t(Pe, { children: /* @__PURE__ */ a(ke, { children: [
|
221
|
+
/* @__PURE__ */ a(Ve, { animation: u ? "fade-in" : "fade-out", children: [
|
222
|
+
se.map((e, n) => /* @__PURE__ */ a(Ae.Fragment, { children: [
|
207
223
|
/* @__PURE__ */ t(
|
208
|
-
|
224
|
+
xe,
|
209
225
|
{
|
210
226
|
$top: e.semicirclePosiiionTop,
|
211
227
|
$left: e.semicirclePosiiionLeft,
|
212
228
|
$hoverColor: e.semicircleHoverColor,
|
213
|
-
onClick: () => u ?
|
214
|
-
onMouseOver: () => u ?
|
215
|
-
onMouseLeave: u ?
|
229
|
+
onClick: () => u ? ce(e.type, e.isStarAchieved) : void 0,
|
230
|
+
onMouseOver: () => u ? ne(e.type) : void 0,
|
231
|
+
onMouseLeave: u ? oe : void 0
|
216
232
|
}
|
217
233
|
),
|
218
234
|
/* @__PURE__ */ t(
|
@@ -222,23 +238,23 @@ const Ue = {
|
|
222
238
|
$left: e.left,
|
223
239
|
$isPointerEventsNone: !0,
|
224
240
|
children: /* @__PURE__ */ t(
|
225
|
-
|
241
|
+
He,
|
226
242
|
{
|
227
243
|
tableNumber: e.tableNumber,
|
228
244
|
isStarAchieved: e.isStarAchieved,
|
229
245
|
type: e.type,
|
230
|
-
rewardStar:
|
246
|
+
rewardStar: U.includes(e.type)
|
231
247
|
}
|
232
248
|
)
|
233
249
|
}
|
234
250
|
)
|
235
251
|
] }, n)),
|
236
|
-
/* @__PURE__ */ t(S, { $top: 50, $left: 50, $alignCenter: !0, children: /* @__PURE__ */ t(
|
252
|
+
/* @__PURE__ */ t(S, { $top: 50, $left: 50, $alignCenter: !0, children: /* @__PURE__ */ t(Ue, { children: /* @__PURE__ */ t(
|
237
253
|
Ne,
|
238
254
|
{
|
239
|
-
onClick:
|
240
|
-
height:
|
241
|
-
width:
|
255
|
+
onClick: re,
|
256
|
+
height: p * 0.1,
|
257
|
+
width: p * 0.1
|
242
258
|
}
|
243
259
|
) }) })
|
244
260
|
] }),
|
@@ -247,8 +263,9 @@ const Ue = {
|
|
247
263
|
{
|
248
264
|
src: R.TABLE_MODE_REVEAL,
|
249
265
|
ref: T,
|
250
|
-
settings:
|
251
|
-
onRender:
|
266
|
+
settings: qe,
|
267
|
+
onRender: ie,
|
268
|
+
animateOnIntersect: !0
|
252
269
|
}
|
253
270
|
)
|
254
271
|
] }) })
|
@@ -256,8 +273,8 @@ const Ue = {
|
|
256
273
|
}
|
257
274
|
);
|
258
275
|
}
|
259
|
-
),
|
276
|
+
), ct = ge(je);
|
260
277
|
export {
|
261
|
-
|
278
|
+
ct as TablesCard
|
262
279
|
};
|
263
280
|
//# sourceMappingURL=tables-card.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"tables-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/tables-card/tables-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type {\n ITableInfo,\n TTableMode,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITableCardRef, ITablesCardProps } from './tables-card-types';\n\nimport React, {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport Back2Icon from '../../../../../assets/line-icons/icons/back2';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport { CardContainer } from '../card-container/card-container';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../card-container/constants';\nimport { TABLE_MODE_LABEL_COLOR, TABLE_REVEAL_ANIMATION } from './constants';\nimport TableMode from './table-mode/table-mode';\nimport TableSegmentStar from './table-segment-star/table-segment-star';\nimport * as Styled from './tables-card-styled';\n\nconst animationSettings = {\n loop: false,\n autoplay: false,\n render: 'svg',\n};\n\nconst TablesCardComponent = forwardRef<ITableCardRef, ITablesCardProps>(\n (\n {\n data,\n label,\n onPress,\n openModesOfTable,\n defaultTable,\n onGoBackFromTableLevel,\n onPressTableSegment,\n },\n ref,\n ) => {\n const { onEvent: trackEvent } = useUIContext();\n const { playButtonSound } = useCircleSounds();\n const [fadeIn, setFadeIn] = useState(true);\n const [highlightedTable, setHighlightedTable] = useState<number | null>(\n openModesOfTable?.tableNumber ?? null,\n );\n const [highlightedLevel, setHighlightedLevel] = useState<number | null>(null);\n const [labelColor, setLabelColor] = useState<TColorNames>('WHITE_T_60');\n const [revealTableModes, setRevealTableModes] = useState<ITableInfo>({\n stars:\n data.tableList.find(table => table.tableNumber === openModesOfTable?.tableNumber)?.stars ??\n [],\n tableNumber: openModesOfTable?.tableNumber ?? 0,\n });\n\n const [showLabel, setShowLabel] = useState(true);\n const [isLabelAnimated, setIsLabelAnimated] = useState(false);\n const [animatedColor, setAniimatedColor] = useState<TColorNames>('WHITE_T_60');\n\n const labelRef = useRef<HTMLDivElement>(null);\n const cardRef = useRef<HTMLDivElement>(null);\n\n const [rewardStar, setRewardStar] = useState(openModesOfTable?.rewardStar ?? []);\n const [enableInfiniteMode] = useState(false);\n\n const revealAnimationRef = useRef<ILottieAnimationRef | null>(null);\n const disappearAnimationTimer = useRef<ReturnType<typeof setTimeout>>();\n\n const handleTableSegmentClick = useCallback(\n (table: ITableInfo) => {\n if (onPressTableSegment) {\n onPressTableSegment(table);\n\n return;\n }\n playButtonSound();\n setFadeIn(true);\n setHighlightedTable(table.tableNumber);\n setRevealTableModes({ ...table });\n setRewardStar([]);\n trackEvent(GAME_LAUNCHER_ANALYTICS_EVENTS.TABLE_SELECTED, {\n meta: {\n table_of: table.tableNumber,\n },\n });\n },\n [onPressTableSegment, playButtonSound, trackEvent],\n );\n\n const handleTableSegmentMouseOver = useCallback(\n (table: ITableInfo) => {\n setLabelColor(isLabelAnimated ? animatedColor : 'WHITE_T_60');\n setHighlightedTable(table.tableNumber);\n },\n [animatedColor, isLabelAnimated],\n );\n\n const handleTableSegmentMouseLeave = useCallback(() => {\n setLabelColor('WHITE_T_60');\n !revealTableModes.tableNumber && setHighlightedTable(null);\n }, [revealTableModes.tableNumber]);\n\n const goBack = useCallback(() => {\n onGoBackFromTableLevel?.();\n playButtonSound();\n setFadeIn(false);\n setHighlightedTable(null);\n const time = (TABLE_REVEAL_ANIMATION.DISAPPEAR[1] - TABLE_REVEAL_ANIMATION.DISAPPEAR[0]) / 30;\n\n revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.DISAPPEAR, true);\n disappearAnimationTimer.current = setTimeout(() => {\n setRevealTableModes({ stars: [], tableNumber: 0 });\n }, time * 1000);\n }, [onGoBackFromTableLevel, playButtonSound]);\n\n const showTableModes = useCallback(() => {\n revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.REVEAL, true);\n }, []);\n\n const handleModeMouseOver = useCallback((type: TTableMode) => {\n const level: Partial<Record<TTableMode, number>> = {\n sequence: 1,\n random: 2,\n advance: 3,\n };\n\n setLabelColor(TABLE_MODE_LABEL_COLOR[type] ?? 'WHITE_T_60');\n setHighlightedLevel(level[type] ?? 0);\n }, []);\n\n const handleModeMouseLeave = useCallback(() => {\n setHighlightedLevel(null);\n setLabelColor('WHITE_T_60');\n }, []);\n\n const revealTableModesMemo = useMemo(() => revealTableModes, [revealTableModes]);\n\n const tableModes = useMemo(() => {\n return [\n {\n top: 20,\n left: 10.5,\n type: 'sequence' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('sequence'),\n semicirclePosiiionTop: '-19%',\n semicirclePosiiionLeft: '-43%',\n semicircleHoverColor: '#B259004D',\n },\n {\n top: 20,\n left: 65.5,\n type: 'random' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('random'),\n semicirclePosiiionTop: '-19%',\n semicirclePosiiionLeft: '65%',\n semicircleHoverColor: '#0055CC4D',\n },\n {\n top: 66,\n left: 38,\n type: 'advance' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('advance'),\n semicirclePosiiionTop: '74%',\n semicirclePosiiionLeft: '11%',\n semicircleHoverColor: '#A9099C4D',\n },\n ];\n }, [revealTableModesMemo.tableNumber, revealTableModesMemo.stars]);\n\n // Disabled infinite mode\n const handleInfiniteModeClick = useCallback(() => {\n onPress({\n mode: 'infinite',\n infiniteModeHighScore: data.infiniteModeHighScore,\n });\n }, [onPress, data.infiniteModeHighScore]);\n\n const handleNormalModeClick = useCallback(\n (mode: TTableMode, isStarRewarded: boolean) => {\n onPress({\n mode,\n tableNumber: revealTableModes.tableNumber,\n isStarRewarded,\n });\n },\n [onPress, revealTableModes.tableNumber],\n );\n\n const getHighlightedText = useCallback(() => {\n if (highlightedLevel) {\n return `${highlightedTable}× LEVEL${highlightedLevel}`;\n }\n\n return highlightedTable ? `${highlightedTable}× Table` : label;\n }, [highlightedLevel, highlightedTable, label]);\n\n const startLabelAnimation = useCallback((color: TColorNames) => {\n setLabelColor(color);\n setAniimatedColor(color);\n setIsLabelAnimated(true);\n }, []);\n\n const stopLabelAnimation = useCallback(() => setIsLabelAnimated(false), []);\n const setLabelVisiblity = useCallback((visible: boolean) => setShowLabel(visible), []);\n\n useImperativeHandle(ref, () => ({\n labelRef: labelRef,\n segmentedCardWrapperRef: cardRef,\n startLabelAnimation,\n stopLabelAnimation,\n setLabelVisiblity,\n handleTableSegmentClick,\n }));\n\n useEffect(() => {\n return () => {\n disappearAnimationTimer.current && clearTimeout(disappearAnimationTimer.current);\n };\n }, []);\n\n // Used in trial journey, to open table levels by default if given in props\n useEffect(() => {\n if (defaultTable) {\n playButtonSound();\n setFadeIn(true);\n setHighlightedTable(defaultTable.tableNumber);\n setRevealTableModes({ ...defaultTable });\n }\n }, [defaultTable, playButtonSound]);\n\n return (\n <CardContainer\n labelRef={labelRef}\n ref={cardRef}\n strokeColor=\"WHITE\"\n label={getHighlightedText()}\n labelColor={labelColor}\n isAnimated={isLabelAnimated}\n showLabel={showLabel}\n >\n <Styled.CardWrapper>\n {/* table selection */}\n <Styled.TableSegmentsWrapper>\n {/* infinite button */}\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"top\"\n hidden={enableInfiniteMode}\n tooltipItem={\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n Coming Soon\n </Text>\n }\n >\n <Styled.InfiniteButtonWrapper\n onClick={enableInfiniteMode ? handleInfiniteModeClick : undefined}\n >\n <Styled.AbsoluteView>\n <LottieAnimation src={LOTTIE.INFINITE_BUTTON_BG} />\n </Styled.AbsoluteView>\n <Styled.AbsoluteView>\n <LottieAnimation src={LOTTIE.INFINITE_BUTTON_SYMBOL} />\n </Styled.AbsoluteView>\n </Styled.InfiniteButtonWrapper>\n </ArrowTooltip>\n\n {/* card shadow */}\n <Styled.TableSegmentCardShadowContainer />\n\n {/* table segments */}\n {data.tableList.map((table, index) => {\n const segmentAngle = 360 / data.tableList.length;\n const startAngle = -(90 + 360 / (2 * data.tableList.length));\n const currentAngle = startAngle + segmentAngle * (index + 1);\n\n return (\n <Styled.TableSegment\n key={index}\n $angle={currentAngle}\n $totalSegments={data.tableList.length}\n $zIndex={index + 1}\n onClick={() => handleTableSegmentClick(table)}\n onMouseOver={() => handleTableSegmentMouseOver(table)}\n onMouseLeave={handleTableSegmentMouseLeave}\n >\n <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n {['sequence', 'random', 'advance'].map(star => (\n <TableSegmentStar\n key={star}\n isStarAchieved={table.stars.includes(star as TTableMode)}\n rewardStar={\n !fadeIn && openModesOfTable?.tableNumber === table.tableNumber\n ? rewardStar.includes(star as TTableMode)\n : undefined\n }\n />\n ))}\n <Separator width={GAME_LAUNCHER_SIZE * 0.055} />\n\n <Styled.TableNumber $angle={-currentAngle}>\n <Text\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE\n ? 'ac3-black'\n : 'ac4-black'\n }\n $color={highlightedTable === table.tableNumber ? 'BLACK_1' : 'WHITE'}\n >\n {table.tableNumber}\n </Text>\n </Styled.TableNumber>\n </FlexView>\n </Styled.TableSegment>\n );\n })}\n </Styled.TableSegmentsWrapper>\n\n {/* table modes */}\n {revealTableModes.tableNumber > 0 && (\n <Styled.TableModeContainer>\n <Styled.TableModeWrapper>\n {/* tables modes with back button */}\n <Styled.AnimatedView animation={fadeIn ? 'fade-in' : 'fade-out'}>\n {tableModes.map((tableMode, index) => (\n <React.Fragment key={index}>\n <Styled.ModeOverlay\n $top={tableMode.semicirclePosiiionTop}\n $left={tableMode.semicirclePosiiionLeft}\n $hoverColor={tableMode.semicircleHoverColor}\n onClick={() =>\n fadeIn\n ? handleNormalModeClick(tableMode.type, tableMode.isStarAchieved)\n : undefined\n }\n onMouseOver={() =>\n fadeIn ? handleModeMouseOver(tableMode.type as TTableMode) : undefined\n }\n onMouseLeave={fadeIn ? handleModeMouseLeave : undefined}\n />\n <Styled.AbsoluteView\n $top={tableMode.top}\n $left={tableMode.left}\n $isPointerEventsNone={true}\n >\n <TableMode\n tableNumber={tableMode.tableNumber}\n isStarAchieved={tableMode.isStarAchieved}\n type={tableMode.type as TTableMode}\n rewardStar={rewardStar.includes(tableMode.type as TTableMode)}\n />\n </Styled.AbsoluteView>\n </React.Fragment>\n ))}\n {/* back button */}\n <Styled.AbsoluteView $top={50} $left={50} $alignCenter={true}>\n <Styled.IconWrapper>\n <Back2Icon\n onClick={goBack}\n height={GAME_LAUNCHER_SIZE * 0.1}\n width={GAME_LAUNCHER_SIZE * 0.1}\n />\n </Styled.IconWrapper>\n </Styled.AbsoluteView>\n </Styled.AnimatedView>\n\n {/* overlay lottie for modes */}\n <LottieAnimation\n src={LOTTIE.TABLE_MODE_REVEAL}\n ref={revealAnimationRef}\n settings={animationSettings}\n onRender={showTableModes}\n />\n </Styled.TableModeWrapper>\n </Styled.TableModeContainer>\n )}\n </Styled.CardWrapper>\n </CardContainer>\n );\n },\n);\n\nexport const TablesCard = memo(TablesCardComponent);\n"],"names":["animationSettings","TablesCardComponent","forwardRef","data","label","onPress","openModesOfTable","defaultTable","onGoBackFromTableLevel","onPressTableSegment","ref","trackEvent","useUIContext","playButtonSound","useCircleSounds","fadeIn","setFadeIn","useState","highlightedTable","setHighlightedTable","highlightedLevel","setHighlightedLevel","labelColor","setLabelColor","revealTableModes","setRevealTableModes","_a","table","showLabel","setShowLabel","isLabelAnimated","setIsLabelAnimated","animatedColor","setAniimatedColor","labelRef","useRef","cardRef","rewardStar","setRewardStar","enableInfiniteMode","revealAnimationRef","disappearAnimationTimer","handleTableSegmentClick","useCallback","GAME_LAUNCHER_ANALYTICS_EVENTS","handleTableSegmentMouseOver","handleTableSegmentMouseLeave","goBack","time","TABLE_REVEAL_ANIMATION","showTableModes","handleModeMouseOver","type","level","TABLE_MODE_LABEL_COLOR","handleModeMouseLeave","revealTableModesMemo","useMemo","tableModes","handleInfiniteModeClick","handleNormalModeClick","mode","isStarRewarded","getHighlightedText","startLabelAnimation","color","stopLabelAnimation","setLabelVisiblity","visible","useImperativeHandle","useEffect","jsx","CardContainer","jsxs","Styled.CardWrapper","Styled.TableSegmentsWrapper","ArrowTooltip","Text","Styled.InfiniteButtonWrapper","Styled.AbsoluteView","LottieAnimation","LOTTIE","Styled.TableSegmentCardShadowContainer","index","segmentAngle","currentAngle","Styled.TableSegment","FlexView","star","TableSegmentStar","Separator","GAME_LAUNCHER_SIZE","Styled.TableNumber","GAME_LAUNCHER_SIZE_LARGE","Styled.TableModeContainer","Styled.TableModeWrapper","Styled.AnimatedView","tableMode","React","Styled.ModeOverlay","TableMode","Styled.IconWrapper","Back2Icon","TablesCard","memo"],"mappings":";;;;;;;;;;;;;;;;;;AAoCA,MAAMA,KAAoB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AACV,GAEMC,KAAsBC;AAAA,EAC1B,CACE;AAAA,IACE,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,qBAAAC;AAAA,KAEFC,MACG;;AACH,UAAM,EAAE,SAASC,EAAW,IAAIC,GAAa,GACvC,EAAE,iBAAAC,MAAoBC,MACtB,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAI,GACnC,CAACC,GAAkBC,CAAmB,IAAIF;AAAA,OAC9CX,KAAA,gBAAAA,EAAkB,gBAAe;AAAA,IAAA,GAE7B,CAACc,GAAkBC,CAAmB,IAAIJ,EAAwB,IAAI,GACtE,CAACK,GAAYC,CAAa,IAAIN,EAAsB,YAAY,GAChE,CAACO,GAAkBC,CAAmB,IAAIR,EAAqB;AAAA,MACnE,SACES,IAAAvB,EAAK,UAAU,KAAK,CAAAwB,MAASA,EAAM,iBAAgBrB,KAAA,gBAAAA,EAAkB,YAAW,MAAhF,gBAAAoB,EAAmF,UACnF,CAAC;AAAA,MACH,cAAapB,KAAA,gBAAAA,EAAkB,gBAAe;AAAA,IAAA,CAC/C,GAEK,CAACsB,GAAWC,CAAY,IAAIZ,EAAS,EAAI,GACzC,CAACa,GAAiBC,CAAkB,IAAId,EAAS,EAAK,GACtD,CAACe,GAAeC,CAAiB,IAAIhB,EAAsB,YAAY,GAEvEiB,IAAWC,EAAuB,IAAI,GACtCC,IAAUD,EAAuB,IAAI,GAErC,CAACE,GAAYC,CAAa,IAAIrB,GAASX,KAAA,gBAAAA,EAAkB,eAAc,CAAA,CAAE,GACzE,CAACiC,CAAkB,IAAItB,EAAS,EAAK,GAErCuB,IAAqBL,EAAmC,IAAI,GAC5DM,IAA0BN,KAE1BO,IAA0BC;AAAA,MAC9B,CAAChB,MAAsB;AACrB,YAAIlB,GAAqB;AACvB,UAAAA,EAAoBkB,CAAK;AAEzB;AAAA,QACF;AACgB,QAAAd,KAChBG,EAAU,EAAI,GACdG,EAAoBQ,EAAM,WAAW,GACjBF,EAAA,EAAE,GAAGE,EAAA,CAAO,GAChCW,EAAc,CAAE,CAAA,GAChB3B,EAAWiC,GAA+B,gBAAgB;AAAA,UACxD,MAAM;AAAA,YACJ,UAAUjB,EAAM;AAAA,UAClB;AAAA,QAAA,CACD;AAAA,MACH;AAAA,MACA,CAAClB,GAAqBI,GAAiBF,CAAU;AAAA,IAAA,GAG7CkC,IAA8BF;AAAA,MAClC,CAAChB,MAAsB;AACP,QAAAJ,EAAAO,IAAkBE,IAAgB,YAAY,GAC5Db,EAAoBQ,EAAM,WAAW;AAAA,MACvC;AAAA,MACA,CAACK,GAAeF,CAAe;AAAA,IAAA,GAG3BgB,KAA+BH,EAAY,MAAM;AACrD,MAAApB,EAAc,YAAY,GACzB,CAAAC,EAAiB,eAAeL,EAAoB,IAAI;AAAA,IAAA,GACxD,CAACK,EAAiB,WAAW,CAAC,GAE3BuB,KAASJ,EAAY,MAAM;;AACN,MAAAnC,KAAA,QAAAA,KACTK,KAChBG,EAAU,EAAK,GACfG,EAAoB,IAAI;AAClB,YAAA6B,KAAQC,EAAuB,UAAU,CAAC,IAAIA,EAAuB,UAAU,CAAC,KAAK;AAE3F,OAAAvB,IAAAc,EAAmB,YAAnB,QAAAd,EAA4B,aAAauB,EAAuB,WAAW,KACnDR,EAAA,UAAU,WAAW,MAAM;AACjD,QAAAhB,EAAoB,EAAE,OAAO,CAAA,GAAI,aAAa,EAAG,CAAA;AAAA,MAAA,GAChDuB,IAAO,GAAI;AAAA,IAAA,GACb,CAACxC,GAAwBK,CAAe,CAAC,GAEtCqC,KAAiBP,EAAY,MAAM;;AACvC,OAAAjB,IAAAc,EAAmB,YAAnB,QAAAd,EAA4B,aAAauB,EAAuB,QAAQ;AAAA,IAC1E,GAAG,CAAE,CAAA,GAECE,KAAsBR,EAAY,CAACS,MAAqB;AAC5D,YAAMC,IAA6C;AAAA,QACjD,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,MAAA;AAGG,MAAA9B,EAAA+B,GAAuBF,CAAI,KAAK,YAAY,GACtC/B,EAAAgC,EAAMD,CAAI,KAAK,CAAC;AAAA,IACtC,GAAG,CAAE,CAAA,GAECG,KAAuBZ,EAAY,MAAM;AAC7C,MAAAtB,EAAoB,IAAI,GACxBE,EAAc,YAAY;AAAA,IAC5B,GAAG,CAAE,CAAA,GAECiC,IAAuBC,EAAQ,MAAMjC,GAAkB,CAACA,CAAgB,CAAC,GAEzEkC,KAAaD,EAAQ,MAClB;AAAA,MACL;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,QACN,aAAaD,EAAqB;AAAA,QAClC,gBAAgBA,EAAqB,MAAM,SAAS,UAAU;AAAA,QAC9D,uBAAuB;AAAA,QACvB,wBAAwB;AAAA,QACxB,sBAAsB;AAAA,MACxB;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,QACN,aAAaA,EAAqB;AAAA,QAClC,gBAAgBA,EAAqB,MAAM,SAAS,QAAQ;AAAA,QAC5D,uBAAuB;AAAA,QACvB,wBAAwB;AAAA,QACxB,sBAAsB;AAAA,MACxB;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,QACN,aAAaA,EAAqB;AAAA,QAClC,gBAAgBA,EAAqB,MAAM,SAAS,SAAS;AAAA,QAC7D,uBAAuB;AAAA,QACvB,wBAAwB;AAAA,QACxB,sBAAsB;AAAA,MACxB;AAAA,IAAA,GAED,CAACA,EAAqB,aAAaA,EAAqB,KAAK,CAAC,GAG3DG,KAA0BhB,EAAY,MAAM;AACxC,MAAAtC,EAAA;AAAA,QACN,MAAM;AAAA,QACN,uBAAuBF,EAAK;AAAA,MAAA,CAC7B;AAAA,IACA,GAAA,CAACE,GAASF,EAAK,qBAAqB,CAAC,GAElCyD,KAAwBjB;AAAA,MAC5B,CAACkB,GAAkBC,MAA4B;AACrC,QAAAzD,EAAA;AAAA,UACN,MAAAwD;AAAA,UACA,aAAarC,EAAiB;AAAA,UAC9B,gBAAAsC;AAAA,QAAA,CACD;AAAA,MACH;AAAA,MACA,CAACzD,GAASmB,EAAiB,WAAW;AAAA,IAAA,GAGlCuC,KAAqBpB,EAAY,MACjCvB,IACK,GAAGF,CAAgB,UAAUE,CAAgB,KAG/CF,IAAmB,GAAGA,CAAgB,YAAYd,GACxD,CAACgB,GAAkBF,GAAkBd,CAAK,CAAC,GAExC4D,KAAsBrB,EAAY,CAACsB,MAAuB;AAC9D,MAAA1C,EAAc0C,CAAK,GACnBhC,EAAkBgC,CAAK,GACvBlC,EAAmB,EAAI;AAAA,IACzB,GAAG,CAAE,CAAA,GAECmC,KAAqBvB,EAAY,MAAMZ,EAAmB,EAAK,GAAG,CAAA,CAAE,GACpEoC,KAAoBxB,EAAY,CAACyB,MAAqBvC,EAAauC,CAAO,GAAG,CAAA,CAAE;AAErF,WAAAC,GAAoB3D,GAAK,OAAO;AAAA,MAC9B,UAAAwB;AAAA,MACA,yBAAyBE;AAAA,MACzB,qBAAA4B;AAAA,MACA,oBAAAE;AAAA,MACA,mBAAAC;AAAA,MACA,yBAAAzB;AAAA,IACA,EAAA,GAEF4B,EAAU,MACD,MAAM;AACa,MAAA7B,EAAA,WAAW,aAAaA,EAAwB,OAAO;AAAA,IAAA,GAEhF,CAAE,CAAA,GAGL6B,EAAU,MAAM;AACd,MAAI/D,MACcM,KAChBG,EAAU,EAAI,GACdG,EAAoBZ,EAAa,WAAW,GACxBkB,EAAA,EAAE,GAAGlB,EAAA,CAAc;AAAA,IACzC,GACC,CAACA,GAAcM,CAAe,CAAC,GAGhC,gBAAA0D;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAAtC;AAAA,QACA,KAAKE;AAAA,QACL,aAAY;AAAA,QACZ,OAAO2B,GAAmB;AAAA,QAC1B,YAAAzC;AAAA,QACA,YAAYQ;AAAA,QACZ,WAAAF;AAAA,QAEA,UAAA,gBAAA6C,EAACC,IAAA,EAEC,UAAA;AAAA,UAAC,gBAAAD,EAAAE,IAAA,EAEC,UAAA;AAAA,YAAA,gBAAAJ;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,UAAS;AAAA,gBACT,QAAQrC;AAAA,gBACR,aACG,gBAAAgC,EAAAM,GAAA,EAAK,WAAU,OAAM,QAAO,SAAQ,UAErC,eAAA;AAAA,gBAGF,UAAA,gBAAAJ;AAAA,kBAACK;AAAAA,kBAAA;AAAA,oBACC,SAASvC,IAAqBoB,KAA0B;AAAA,oBAExD,UAAA;AAAA,sBAAC,gBAAAY,EAAAQ,GAAA,EACC,UAAA,gBAAAR,EAACS,KAAgB,KAAKC,EAAO,mBAAoB,CAAA,GACnD;AAAA,sBACA,gBAAAV,EAACQ,GAAA,EACC,4BAACC,GAAgB,EAAA,KAAKC,EAAO,uBAAwB,CAAA,GACvD;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YACF;AAAA,YAGA,gBAAAV,EAACW,IAAA,EAAuC;AAAA,YAGvC/E,EAAK,UAAU,IAAI,CAACwB,GAAOwD,MAAU;AAC9B,oBAAAC,KAAe,MAAMjF,EAAK,UAAU,QAEpCkF,IADa,EAAE,KAAK,OAAO,IAAIlF,EAAK,UAAU,WAClBiF,MAAgBD,IAAQ;AAGxD,qBAAA,gBAAAZ;AAAA,gBAACe;AAAAA,gBAAA;AAAA,kBAEC,QAAQD;AAAA,kBACR,gBAAgBlF,EAAK,UAAU;AAAA,kBAC/B,SAASgF,IAAQ;AAAA,kBACjB,SAAS,MAAMzC,EAAwBf,CAAK;AAAA,kBAC5C,aAAa,MAAMkB,EAA4BlB,CAAK;AAAA,kBACpD,cAAcmB;AAAA,kBAEd,4BAACyC,IAAS,EAAA,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UACjE,UAAA;AAAA,oBAAA,CAAC,YAAY,UAAU,SAAS,EAAE,IAAI,CACrCC,MAAA,gBAAAjB;AAAA,sBAACkB;AAAA,sBAAA;AAAA,wBAEC,gBAAgB9D,EAAM,MAAM,SAAS6D,CAAkB;AAAA,wBACvD,YACE,CAACzE,MAAUT,KAAA,gBAAAA,EAAkB,iBAAgBqB,EAAM,cAC/CU,EAAW,SAASmD,CAAkB,IACtC;AAAA,sBAAA;AAAA,sBALDA;AAAA,oBAAA,CAQR;AAAA,oBACA,gBAAAjB,EAAAmB,IAAA,EAAU,OAAOC,IAAqB,MAAO,CAAA;AAAA,sCAE7CC,IAAA,EAAmB,QAAQ,CAACP,GAC3B,UAAA,gBAAAd;AAAA,sBAACM;AAAA,sBAAA;AAAA,wBACC,WACEc,MAAuBE,KACnB,cACA;AAAA,wBAEN,QAAQ3E,MAAqBS,EAAM,cAAc,YAAY;AAAA,wBAE5D,UAAMA,EAAA;AAAA,sBAAA;AAAA,oBAAA,GAEX;AAAA,kBAAA,GACF;AAAA,gBAAA;AAAA,gBAlCKwD;AAAA,cAAA;AAAA,YAmCP,CAEH;AAAA,UAAA,GACH;AAAA,UAGC3D,EAAiB,cAAc,KAC7B,gBAAA+C,EAAAuB,IAAA,EACC,UAAA,gBAAArB,EAACsB,IAAA,EAEC,UAAA;AAAA,YAAA,gBAAAtB,EAACuB,IAAA,EAAoB,WAAWjF,IAAS,YAAY,YAClD,UAAA;AAAA,cAAA2C,GAAW,IAAI,CAACuC,GAAWd,MACzB,gBAAAV,EAAAyB,GAAM,UAAN,EACC,UAAA;AAAA,gBAAA,gBAAA3B;AAAA,kBAAC4B;AAAAA,kBAAA;AAAA,oBACC,MAAMF,EAAU;AAAA,oBAChB,OAAOA,EAAU;AAAA,oBACjB,aAAaA,EAAU;AAAA,oBACvB,SAAS,MACPlF,IACI6C,GAAsBqC,EAAU,MAAMA,EAAU,cAAc,IAC9D;AAAA,oBAEN,aAAa,MACXlF,IAASoC,GAAoB8C,EAAU,IAAkB,IAAI;AAAA,oBAE/D,cAAclF,IAASwC,KAAuB;AAAA,kBAAA;AAAA,gBAChD;AAAA,gBACA,gBAAAgB;AAAA,kBAACQ;AAAAA,kBAAA;AAAA,oBACC,MAAMkB,EAAU;AAAA,oBAChB,OAAOA,EAAU;AAAA,oBACjB,sBAAsB;AAAA,oBAEtB,UAAA,gBAAA1B;AAAA,sBAAC6B;AAAA,sBAAA;AAAA,wBACC,aAAaH,EAAU;AAAA,wBACvB,gBAAgBA,EAAU;AAAA,wBAC1B,MAAMA,EAAU;AAAA,wBAChB,YAAY5D,EAAW,SAAS4D,EAAU,IAAkB;AAAA,sBAAA;AAAA,oBAC9D;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA,EAAA,GA1BmBd,CA2BrB,CACD;AAAA,cAEA,gBAAAZ,EAAAQ,GAAA,EAAoB,MAAM,IAAI,OAAO,IAAI,cAAc,IACtD,UAAC,gBAAAR,EAAA8B,IAAA,EACC,UAAA,gBAAA9B;AAAA,gBAAC+B;AAAA,gBAAA;AAAA,kBACC,SAASvD;AAAA,kBACT,QAAQ4C,IAAqB;AAAA,kBAC7B,OAAOA,IAAqB;AAAA,gBAAA;AAAA,iBAEhC,EACF,CAAA;AAAA,YAAA,GACF;AAAA,YAGA,gBAAApB;AAAA,cAACS;AAAA,cAAA;AAAA,gBACC,KAAKC,EAAO;AAAA,gBACZ,KAAKzC;AAAA,gBACL,UAAUxC;AAAA,gBACV,UAAUkD;AAAA,cAAA;AAAA,YACZ;AAAA,UAAA,EAAA,CACF,EACF,CAAA;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF,GAEaqD,KAAaC,GAAKvG,EAAmB;"}
|
1
|
+
{"version":3,"file":"tables-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/tables-card/tables-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type {\n ITableInfo,\n TTableMode,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITableCardRef, ITablesCardProps } from './tables-card-types';\n\nimport React, {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport Back2Icon from '../../../../../assets/line-icons/icons/back2';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport { CardContainer } from '../card-container/card-container';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../card-container/constants';\nimport { TABLE_MODE_LABEL_COLOR, TABLE_REVEAL_ANIMATION } from './constants';\nimport TableMode from './table-mode/table-mode';\nimport TableSegmentStar from './table-segment-star/table-segment-star';\nimport * as Styled from './tables-card-styled';\n\nconst rendererSettings = {\n renderer: 'svg',\n};\n\nconst animationSettings = {\n loop: false,\n autoplay: false,\n ...rendererSettings,\n};\n\nconst TablesCardComponent = forwardRef<ITableCardRef, ITablesCardProps>(\n (\n {\n data,\n label,\n onPress,\n openModesOfTable,\n defaultTable,\n onGoBackFromTableLevel,\n onPressTableSegment,\n },\n ref,\n ) => {\n const { onEvent: trackEvent } = useUIContext();\n const { playButtonSound } = useCircleSounds();\n const [fadeIn, setFadeIn] = useState(true);\n const [highlightedTable, setHighlightedTable] = useState<number | null>(\n openModesOfTable?.tableNumber ?? null,\n );\n const [highlightedLevel, setHighlightedLevel] = useState<number | null>(null);\n const [labelColor, setLabelColor] = useState<TColorNames>('WHITE_T_60');\n const [revealTableModes, setRevealTableModes] = useState<ITableInfo>({\n stars:\n data.tableList.find(table => table.tableNumber === openModesOfTable?.tableNumber)?.stars ??\n [],\n tableNumber: openModesOfTable?.tableNumber ?? 0,\n });\n\n const [showLabel, setShowLabel] = useState(true);\n const [isLabelAnimated, setIsLabelAnimated] = useState(false);\n const [animatedColor, setAniimatedColor] = useState<TColorNames>('WHITE_T_60');\n\n const labelRef = useRef<HTMLDivElement>(null);\n const cardRef = useRef<HTMLDivElement>(null);\n\n const [rewardStar, setRewardStar] = useState(openModesOfTable?.rewardStar ?? []);\n const [enableInfiniteMode] = useState(false);\n\n const revealAnimationRef = useRef<ILottieAnimationRef | null>(null);\n const disappearAnimationTimer = useRef<ReturnType<typeof setTimeout>>();\n\n const handleTableSegmentClick = useCallback(\n (table: ITableInfo) => {\n if (onPressTableSegment) {\n onPressTableSegment(table);\n\n return;\n }\n playButtonSound();\n setFadeIn(true);\n setHighlightedTable(table.tableNumber);\n setRevealTableModes({ ...table });\n setRewardStar([]);\n trackEvent(GAME_LAUNCHER_ANALYTICS_EVENTS.TABLE_SELECTED, {\n meta: {\n table_of: table.tableNumber,\n },\n });\n },\n [onPressTableSegment, playButtonSound, trackEvent],\n );\n\n const handleTableSegmentMouseOver = useCallback(\n (table: ITableInfo) => {\n setLabelColor(isLabelAnimated ? animatedColor : 'WHITE_T_60');\n setHighlightedTable(table.tableNumber);\n },\n [animatedColor, isLabelAnimated],\n );\n\n const handleTableSegmentMouseLeave = useCallback(() => {\n setLabelColor('WHITE_T_60');\n !revealTableModes.tableNumber && setHighlightedTable(null);\n }, [revealTableModes.tableNumber]);\n\n const goBack = useCallback(() => {\n onGoBackFromTableLevel?.();\n playButtonSound();\n setFadeIn(false);\n setHighlightedTable(null);\n const time = (TABLE_REVEAL_ANIMATION.DISAPPEAR[1] - TABLE_REVEAL_ANIMATION.DISAPPEAR[0]) / 30;\n\n revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.DISAPPEAR, true);\n disappearAnimationTimer.current = setTimeout(() => {\n setRevealTableModes({ stars: [], tableNumber: 0 });\n }, time * 1000);\n }, [onGoBackFromTableLevel, playButtonSound]);\n\n const showTableModes = useCallback(() => {\n revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.REVEAL, true);\n }, []);\n\n const handleModeMouseOver = useCallback((type: TTableMode) => {\n const level: Partial<Record<TTableMode, number>> = {\n sequence: 1,\n random: 2,\n advance: 3,\n };\n\n setLabelColor(TABLE_MODE_LABEL_COLOR[type] ?? 'WHITE_T_60');\n setHighlightedLevel(level[type] ?? 0);\n }, []);\n\n const handleModeMouseLeave = useCallback(() => {\n setHighlightedLevel(null);\n setLabelColor('WHITE_T_60');\n }, []);\n\n const revealTableModesMemo = useMemo(() => revealTableModes, [revealTableModes]);\n\n const tableModes = useMemo(() => {\n return [\n {\n top: 20,\n left: 10.5,\n type: 'sequence' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('sequence'),\n semicirclePosiiionTop: '-19%',\n semicirclePosiiionLeft: '-43%',\n semicircleHoverColor: '#B259004D',\n },\n {\n top: 20,\n left: 65.5,\n type: 'random' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('random'),\n semicirclePosiiionTop: '-19%',\n semicirclePosiiionLeft: '65%',\n semicircleHoverColor: '#0055CC4D',\n },\n {\n top: 66,\n left: 38,\n type: 'advance' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('advance'),\n semicirclePosiiionTop: '74%',\n semicirclePosiiionLeft: '11%',\n semicircleHoverColor: '#A9099C4D',\n },\n ];\n }, [revealTableModesMemo.tableNumber, revealTableModesMemo.stars]);\n\n // Disabled infinite mode\n const handleInfiniteModeClick = useCallback(() => {\n onPress({\n mode: 'infinite',\n infiniteModeHighScore: data.infiniteModeHighScore,\n });\n }, [onPress, data.infiniteModeHighScore]);\n\n const handleNormalModeClick = useCallback(\n (mode: TTableMode, isStarRewarded: boolean) => {\n onPress({\n mode,\n tableNumber: revealTableModes.tableNumber,\n isStarRewarded,\n });\n },\n [onPress, revealTableModes.tableNumber],\n );\n\n const getHighlightedText = useCallback(() => {\n if (highlightedLevel) {\n return `${highlightedTable}× LEVEL${highlightedLevel}`;\n }\n\n return highlightedTable ? `${highlightedTable}× Table` : label;\n }, [highlightedLevel, highlightedTable, label]);\n\n const startLabelAnimation = useCallback((color: TColorNames) => {\n setLabelColor(color);\n setAniimatedColor(color);\n setIsLabelAnimated(true);\n }, []);\n\n const stopLabelAnimation = useCallback(() => setIsLabelAnimated(false), []);\n const setLabelVisiblity = useCallback((visible: boolean) => setShowLabel(visible), []);\n\n useImperativeHandle(ref, () => ({\n labelRef: labelRef,\n segmentedCardWrapperRef: cardRef,\n startLabelAnimation,\n stopLabelAnimation,\n setLabelVisiblity,\n handleTableSegmentClick,\n }));\n\n useEffect(() => {\n return () => {\n disappearAnimationTimer.current && clearTimeout(disappearAnimationTimer.current);\n };\n }, []);\n\n // Used in trial journey, to open table levels by default if given in props\n useEffect(() => {\n if (defaultTable) {\n playButtonSound();\n setFadeIn(true);\n setHighlightedTable(defaultTable.tableNumber);\n setRevealTableModes({ ...defaultTable });\n }\n }, [defaultTable, playButtonSound]);\n\n return (\n <CardContainer\n labelRef={labelRef}\n ref={cardRef}\n strokeColor=\"WHITE\"\n label={getHighlightedText()}\n labelColor={labelColor}\n isAnimated={isLabelAnimated}\n showLabel={showLabel}\n >\n <Styled.CardWrapper>\n {/* table selection */}\n <Styled.TableSegmentsWrapper>\n {/* infinite button */}\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"top\"\n hidden={enableInfiniteMode}\n tooltipItem={\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n Coming Soon\n </Text>\n }\n >\n <Styled.InfiniteButtonWrapper\n onClick={enableInfiniteMode ? handleInfiniteModeClick : undefined}\n >\n <Styled.AbsoluteView>\n <LottieAnimation\n src={LOTTIE.INFINITE_BUTTON_BG}\n settings={rendererSettings}\n animateOnIntersect\n />\n </Styled.AbsoluteView>\n <Styled.AbsoluteView>\n <LottieAnimation\n src={LOTTIE.INFINITE_BUTTON_SYMBOL}\n settings={rendererSettings}\n animateOnIntersect\n />\n </Styled.AbsoluteView>\n </Styled.InfiniteButtonWrapper>\n </ArrowTooltip>\n\n {/* card shadow */}\n <Styled.TableSegmentCardShadowContainer />\n\n {/* table segments */}\n {data.tableList.map((table, index) => {\n const segmentAngle = 360 / data.tableList.length;\n const startAngle = -(90 + 360 / (2 * data.tableList.length));\n const currentAngle = startAngle + segmentAngle * (index + 1);\n\n return (\n <Styled.TableSegment\n key={index}\n $angle={currentAngle}\n $totalSegments={data.tableList.length}\n $zIndex={index + 1}\n onClick={() => handleTableSegmentClick(table)}\n onMouseOver={() => handleTableSegmentMouseOver(table)}\n onMouseLeave={handleTableSegmentMouseLeave}\n >\n <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n {['sequence', 'random', 'advance'].map(star => (\n <TableSegmentStar\n key={star}\n isStarAchieved={table.stars.includes(star as TTableMode)}\n rewardStar={\n !fadeIn && openModesOfTable?.tableNumber === table.tableNumber\n ? rewardStar.includes(star as TTableMode)\n : undefined\n }\n />\n ))}\n <Separator width={GAME_LAUNCHER_SIZE * 0.055} />\n\n <Styled.TableNumber $angle={-currentAngle}>\n <Text\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE\n ? 'ac3-black'\n : 'ac4-black'\n }\n $color={highlightedTable === table.tableNumber ? 'BLACK_1' : 'WHITE'}\n >\n {table.tableNumber}\n </Text>\n </Styled.TableNumber>\n </FlexView>\n </Styled.TableSegment>\n );\n })}\n </Styled.TableSegmentsWrapper>\n\n {/* table modes */}\n {revealTableModes.tableNumber > 0 && (\n <Styled.TableModeContainer>\n <Styled.TableModeWrapper>\n {/* tables modes with back button */}\n <Styled.AnimatedView animation={fadeIn ? 'fade-in' : 'fade-out'}>\n {tableModes.map((tableMode, index) => (\n <React.Fragment key={index}>\n <Styled.ModeOverlay\n $top={tableMode.semicirclePosiiionTop}\n $left={tableMode.semicirclePosiiionLeft}\n $hoverColor={tableMode.semicircleHoverColor}\n onClick={() =>\n fadeIn\n ? handleNormalModeClick(tableMode.type, tableMode.isStarAchieved)\n : undefined\n }\n onMouseOver={() =>\n fadeIn ? handleModeMouseOver(tableMode.type as TTableMode) : undefined\n }\n onMouseLeave={fadeIn ? handleModeMouseLeave : undefined}\n />\n <Styled.AbsoluteView\n $top={tableMode.top}\n $left={tableMode.left}\n $isPointerEventsNone={true}\n >\n <TableMode\n tableNumber={tableMode.tableNumber}\n isStarAchieved={tableMode.isStarAchieved}\n type={tableMode.type as TTableMode}\n rewardStar={rewardStar.includes(tableMode.type as TTableMode)}\n />\n </Styled.AbsoluteView>\n </React.Fragment>\n ))}\n {/* back button */}\n <Styled.AbsoluteView $top={50} $left={50} $alignCenter={true}>\n <Styled.IconWrapper>\n <Back2Icon\n onClick={goBack}\n height={GAME_LAUNCHER_SIZE * 0.1}\n width={GAME_LAUNCHER_SIZE * 0.1}\n />\n </Styled.IconWrapper>\n </Styled.AbsoluteView>\n </Styled.AnimatedView>\n\n {/* overlay lottie for modes */}\n <LottieAnimation\n src={LOTTIE.TABLE_MODE_REVEAL}\n ref={revealAnimationRef}\n settings={animationSettings}\n onRender={showTableModes}\n animateOnIntersect\n />\n </Styled.TableModeWrapper>\n </Styled.TableModeContainer>\n )}\n </Styled.CardWrapper>\n </CardContainer>\n );\n },\n);\n\nexport const TablesCard = memo(TablesCardComponent);\n"],"names":["rendererSettings","animationSettings","TablesCardComponent","forwardRef","data","label","onPress","openModesOfTable","defaultTable","onGoBackFromTableLevel","onPressTableSegment","ref","trackEvent","useUIContext","playButtonSound","useCircleSounds","fadeIn","setFadeIn","useState","highlightedTable","setHighlightedTable","highlightedLevel","setHighlightedLevel","labelColor","setLabelColor","revealTableModes","setRevealTableModes","_a","table","showLabel","setShowLabel","isLabelAnimated","setIsLabelAnimated","animatedColor","setAniimatedColor","labelRef","useRef","cardRef","rewardStar","setRewardStar","enableInfiniteMode","revealAnimationRef","disappearAnimationTimer","handleTableSegmentClick","useCallback","GAME_LAUNCHER_ANALYTICS_EVENTS","handleTableSegmentMouseOver","handleTableSegmentMouseLeave","goBack","time","TABLE_REVEAL_ANIMATION","showTableModes","handleModeMouseOver","type","level","TABLE_MODE_LABEL_COLOR","handleModeMouseLeave","revealTableModesMemo","useMemo","tableModes","handleInfiniteModeClick","handleNormalModeClick","mode","isStarRewarded","getHighlightedText","startLabelAnimation","color","stopLabelAnimation","setLabelVisiblity","visible","useImperativeHandle","useEffect","jsx","CardContainer","jsxs","Styled.CardWrapper","Styled.TableSegmentsWrapper","ArrowTooltip","Text","Styled.InfiniteButtonWrapper","Styled.AbsoluteView","LottieAnimation","LOTTIE","Styled.TableSegmentCardShadowContainer","index","segmentAngle","currentAngle","Styled.TableSegment","FlexView","star","TableSegmentStar","Separator","GAME_LAUNCHER_SIZE","Styled.TableNumber","GAME_LAUNCHER_SIZE_LARGE","Styled.TableModeContainer","Styled.TableModeWrapper","Styled.AnimatedView","tableMode","React","Styled.ModeOverlay","TableMode","Styled.IconWrapper","Back2Icon","TablesCard","memo"],"mappings":"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"}
|
@@ -0,0 +1,92 @@
|
|
1
|
+
import { jsx as t, jsxs as c } from "react/jsx-runtime";
|
2
|
+
import { memo as C, Fragment as D } from "react";
|
3
|
+
import { ILLUSTRATIONS as R } from "../../../../../assets/illustrations/illustrations.js";
|
4
|
+
import L from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
|
5
|
+
import $ from "../../../../ui/image/image.js";
|
6
|
+
import a from "../../../../ui/layout/flex-view.js";
|
7
|
+
import x from "../../../../ui/text/text.js";
|
8
|
+
import { getSheetCompletionPercentage as G } from "../milestone-progress/milestone-progress-utils.js";
|
9
|
+
import { Progress as u } from "./styled.js";
|
10
|
+
const {
|
11
|
+
PRACTICED_SHIELD_GREY: T,
|
12
|
+
PRACTICED_SHIELD_GREEN: b,
|
13
|
+
LEARNED_SHIELD_GRAY: N,
|
14
|
+
LEARNED_SHIELD_GREEN: H,
|
15
|
+
MASTERED_SHIELD_GRAY: k,
|
16
|
+
MASTERED_SHIELD_GREEN: y
|
17
|
+
} = R, B = C(
|
18
|
+
({ milestoneId: d, showProgress: e, progressInfo: p }) => {
|
19
|
+
const {
|
20
|
+
familiar_sheets: n = 0,
|
21
|
+
proficient_sheets: m = 0,
|
22
|
+
mastered_sheets: s = 0,
|
23
|
+
total_core_sheets: o = 0
|
24
|
+
} = p || {}, i = o > 0, h = i && n === o, E = i && m === o, S = i && s === o, l = e ? 40 : 20, f = [
|
25
|
+
{
|
26
|
+
imageUrl: h ? H : N,
|
27
|
+
completedSheetsCount: n,
|
28
|
+
key: "milestone-widget-learned-badge-data"
|
29
|
+
},
|
30
|
+
{
|
31
|
+
imageUrl: E ? b : T,
|
32
|
+
completedSheetsCount: m,
|
33
|
+
key: "milestone-widget-practiced-badge-data"
|
34
|
+
},
|
35
|
+
{
|
36
|
+
imageUrl: S ? y : k,
|
37
|
+
completedSheetsCount: s,
|
38
|
+
key: "milestone-widget-mastered-badge-data"
|
39
|
+
}
|
40
|
+
];
|
41
|
+
return /* @__PURE__ */ t(a, { $flexGapX: 2, id: `milestone-progress-${d}`, children: /* @__PURE__ */ t(
|
42
|
+
a,
|
43
|
+
{
|
44
|
+
$flexDirection: "row",
|
45
|
+
$flexGapX: e ? 1.5 : 0.75,
|
46
|
+
$flexWrap: !e,
|
47
|
+
children: f.map((_) => {
|
48
|
+
const { key: g, imageUrl: I, completedSheetsCount: A } = _, r = G(
|
49
|
+
A,
|
50
|
+
o
|
51
|
+
);
|
52
|
+
return /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(
|
53
|
+
L,
|
54
|
+
{
|
55
|
+
position: "bottom",
|
56
|
+
renderAs: "secondary",
|
57
|
+
tooltipItem: `${r}%`,
|
58
|
+
hidden: !e,
|
59
|
+
children: /* @__PURE__ */ c(
|
60
|
+
a,
|
61
|
+
{
|
62
|
+
$flexDirection: e ? "column" : "row",
|
63
|
+
$flexGapX: e ? 0.5 : 0.25,
|
64
|
+
$alignItems: "center",
|
65
|
+
$width: "100%",
|
66
|
+
children: [
|
67
|
+
/* @__PURE__ */ t($, { withLoader: !0, src: I, width: l, height: l }),
|
68
|
+
e ? /* @__PURE__ */ t(u, { $progress: r }) : /* @__PURE__ */ c(
|
69
|
+
x,
|
70
|
+
{
|
71
|
+
$renderAs: "ac4-black",
|
72
|
+
$color: r === 100 ? "GREEN_5" : "BLACK_T_60",
|
73
|
+
children: [
|
74
|
+
r,
|
75
|
+
"%"
|
76
|
+
]
|
77
|
+
}
|
78
|
+
)
|
79
|
+
]
|
80
|
+
}
|
81
|
+
)
|
82
|
+
}
|
83
|
+
) }, g);
|
84
|
+
})
|
85
|
+
}
|
86
|
+
) });
|
87
|
+
}
|
88
|
+
);
|
89
|
+
export {
|
90
|
+
B as default
|
91
|
+
};
|
92
|
+
//# sourceMappingURL=milestone-progress-v2.js.map
|
package/dist/features/milestone/create/comps/milestone-progress-v2/milestone-progress-v2.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"milestone-progress-v2.js","sources":["../../../../../../src/features/milestone/create/comps/milestone-progress-v2/milestone-progress-v2.tsx"],"sourcesContent":["import type { IMileStoneProgressInfoV2Props } from './types';\nimport type { FC } from 'react';\n\nimport { Fragment, memo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { getSheetCompletionPercentage } from '../milestone-progress/milestone-progress-utils';\nimport * as Styled from './styled';\n\nconst {\n PRACTICED_SHIELD_GREY,\n PRACTICED_SHIELD_GREEN,\n LEARNED_SHIELD_GRAY,\n LEARNED_SHIELD_GREEN,\n MASTERED_SHIELD_GRAY,\n MASTERED_SHIELD_GREEN,\n} = ILLUSTRATIONS;\n\nconst MilestoneProgressInfoV2: FC<IMileStoneProgressInfoV2Props> = memo(\n ({ milestoneId, showProgress, progressInfo }) => {\n const {\n familiar_sheets: familiarSheets = 0,\n proficient_sheets: proficientSheets = 0,\n mastered_sheets: masteredSheets = 0,\n total_core_sheets: totalCoreSheets = 0,\n } = progressInfo || {};\n\n const hasCoreSheets = totalCoreSheets > 0;\n\n const hasCompletedLearningSheets = hasCoreSheets && familiarSheets === totalCoreSheets;\n const hasCompletedPracticeSheets = hasCoreSheets && proficientSheets === totalCoreSheets;\n const hasMasteredAllSheets = hasCoreSheets && masteredSheets === totalCoreSheets;\n\n const badgeSize = showProgress ? 40 : 20;\n const badgesInfo = [\n {\n imageUrl: hasCompletedLearningSheets ? LEARNED_SHIELD_GREEN : LEARNED_SHIELD_GRAY,\n completedSheetsCount: familiarSheets,\n key: 'milestone-widget-learned-badge-data',\n },\n {\n imageUrl: hasCompletedPracticeSheets ? PRACTICED_SHIELD_GREEN : PRACTICED_SHIELD_GREY,\n completedSheetsCount: proficientSheets,\n key: 'milestone-widget-practiced-badge-data',\n },\n {\n imageUrl: hasMasteredAllSheets ? MASTERED_SHIELD_GREEN : MASTERED_SHIELD_GRAY,\n completedSheetsCount: masteredSheets,\n key: 'milestone-widget-mastered-badge-data',\n },\n ];\n\n return (\n <FlexView $flexGapX={2} id={`milestone-progress-${milestoneId}`}>\n <FlexView\n $flexDirection=\"row\"\n $flexGapX={showProgress ? 1.5 : 0.75}\n $flexWrap={!showProgress}\n >\n {badgesInfo.map(badgeData => {\n const { key, imageUrl, completedSheetsCount } = badgeData;\n\n const progressPercentage = getSheetCompletionPercentage(\n completedSheetsCount,\n totalCoreSheets,\n );\n\n return (\n <Fragment key={key}>\n <ArrowTooltip\n position=\"bottom\"\n renderAs=\"secondary\"\n tooltipItem={`${progressPercentage}%`}\n hidden={!showProgress}\n >\n <FlexView\n $flexDirection={showProgress ? 'column' : 'row'}\n $flexGapX={showProgress ? 0.5 : 0.25}\n $alignItems=\"center\"\n $width=\"100%\"\n >\n <Image withLoader src={imageUrl} width={badgeSize} height={badgeSize} />\n\n {showProgress ? (\n <Styled.Progress $progress={progressPercentage} />\n ) : (\n <Text\n $renderAs=\"ac4-black\"\n $color={progressPercentage === 100 ? 'GREEN_5' : 'BLACK_T_60'}\n >\n {progressPercentage}%\n </Text>\n )}\n </FlexView>\n </ArrowTooltip>\n </Fragment>\n );\n })}\n </FlexView>\n </FlexView>\n );\n },\n);\n\nexport default MilestoneProgressInfoV2;\n"],"names":["PRACTICED_SHIELD_GREY","PRACTICED_SHIELD_GREEN","LEARNED_SHIELD_GRAY","LEARNED_SHIELD_GREEN","MASTERED_SHIELD_GRAY","MASTERED_SHIELD_GREEN","ILLUSTRATIONS","MilestoneProgressInfoV2","memo","milestoneId","showProgress","progressInfo","familiarSheets","proficientSheets","masteredSheets","totalCoreSheets","hasCoreSheets","hasCompletedLearningSheets","hasCompletedPracticeSheets","hasMasteredAllSheets","badgeSize","badgesInfo","FlexView","jsx","badgeData","key","imageUrl","completedSheetsCount","progressPercentage","getSheetCompletionPercentage","Fragment","ArrowTooltip","jsxs","Image","Styled.Progress","Text"],"mappings":";;;;;;;;;AAaA,MAAM;AAAA,EACJ,uBAAAA;AAAA,EACA,wBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,uBAAAC;AACF,IAAIC,GAEEC,IAA6DC;AAAA,EACjE,CAAC,EAAE,aAAAC,GAAa,cAAAC,GAAc,cAAAC,QAAmB;AACzC,UAAA;AAAA,MACJ,iBAAiBC,IAAiB;AAAA,MAClC,mBAAmBC,IAAmB;AAAA,MACtC,iBAAiBC,IAAiB;AAAA,MAClC,mBAAmBC,IAAkB;AAAA,IAAA,IACnCJ,KAAgB,CAAA,GAEdK,IAAgBD,IAAkB,GAElCE,IAA6BD,KAAiBJ,MAAmBG,GACjEG,IAA6BF,KAAiBH,MAAqBE,GACnEI,IAAuBH,KAAiBF,MAAmBC,GAE3DK,IAAYV,IAAe,KAAK,IAChCW,IAAa;AAAA,MACjB;AAAA,QACE,UAAUJ,IAA6Bd,IAAuBD;AAAA,QAC9D,sBAAsBU;AAAA,QACtB,KAAK;AAAA,MACP;AAAA,MACA;AAAA,QACE,UAAUM,IAA6BjB,IAAyBD;AAAA,QAChE,sBAAsBa;AAAA,QACtB,KAAK;AAAA,MACP;AAAA,MACA;AAAA,QACE,UAAUM,IAAuBd,IAAwBD;AAAA,QACzD,sBAAsBU;AAAA,QACtB,KAAK;AAAA,MACP;AAAA,IAAA;AAGF,6BACGQ,GAAS,EAAA,WAAW,GAAG,IAAI,sBAAsBb,CAAW,IAC3D,UAAA,gBAAAc;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,WAAWZ,IAAe,MAAM;AAAA,QAChC,WAAW,CAACA;AAAA,QAEX,UAAAW,EAAW,IAAI,CAAaG,MAAA;AAC3B,gBAAM,EAAE,KAAAC,GAAK,UAAAC,GAAU,sBAAAC,EAAA,IAAyBH,GAE1CI,IAAqBC;AAAA,YACzBF;AAAA,YACAZ;AAAA,UAAA;AAGF,mCACGe,GACC,EAAA,UAAA,gBAAAP;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,UAAS;AAAA,cACT,aAAa,GAAGH,CAAkB;AAAA,cAClC,QAAQ,CAAClB;AAAA,cAET,UAAA,gBAAAsB;AAAA,gBAACV;AAAA,gBAAA;AAAA,kBACC,gBAAgBZ,IAAe,WAAW;AAAA,kBAC1C,WAAWA,IAAe,MAAM;AAAA,kBAChC,aAAY;AAAA,kBACZ,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAC,gBAAAa,EAAAU,GAAA,EAAM,YAAU,IAAC,KAAKP,GAAU,OAAON,GAAW,QAAQA,EAAW,CAAA;AAAA,oBAErEV,IACE,gBAAAa,EAAAW,GAAA,EAAgB,WAAWN,EAAoB,CAAA,IAEhD,gBAAAI;AAAA,sBAACG;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,QAAQP,MAAuB,MAAM,YAAY;AAAA,wBAEhD,UAAA;AAAA,0BAAAA;AAAA,0BAAmB;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACtB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAEJ;AAAA,YAAA;AAAA,UAAA,KAzBWH,CA2Bf;AAAA,QAAA,CAEH;AAAA,MAAA;AAAA,IAEL,EAAA,CAAA;AAAA,EAEJ;AACF;"}
|