@cuemath/leap 3.0.8 → 3.0.10-hg1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/features/analytics-events/platform-events-student.js +2 -2
- package/dist/features/analytics-events/platform-events-student.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/constants.js +4 -3
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/constants.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.js +42 -26
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js +39 -39
- 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/table-mode/table-mode.js +12 -10
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js +29 -28
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js +36 -33
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js +29 -25
- 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 +121 -122
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -1
- package/dist/features/circle-games/leaderboard/comps/banner/banner.js +6 -8
- package/dist/features/circle-games/leaderboard/comps/banner/banner.js.map +1 -1
- package/dist/features/circle-games/leaderboard/leaderboard-styled.js +1 -1
- package/dist/features/circle-games/leaderboard/leaderboard-styled.js.map +1 -1
- package/dist/features/ui/error/error.js +1 -1
- package/dist/features/ui/error/error.js.map +1 -1
- package/dist/features/ui/lottie-animation/lottie-animation.js +53 -48
- package/dist/features/ui/lottie-animation/lottie-animation.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PLUGINS as t } from "../../node_modules/@cuemath/analytics-v2/dist/constants.js";
|
|
2
|
-
var
|
|
2
|
+
var _ = /* @__PURE__ */ ((e) => (e.PAGE_VIEWED = "page_viewed", e.CUSTOM_TEST_SUBMITTED = "custom_test_submitted", e.HOMEWORK_COMPLETED = "homework_completed", e.ERROR_VIA_AUTO_LOGIN_FROM_CUEMATH_APP = "error_via_auto_login_from_cuemath_app", e.ACTIVITY_STARTED = "activity_started", e.ACTIVITY_TUTORIAL_SEEN = "activity_tutorial_seen", e.STREAK_ICON_CLICKED = "streak_icon_clicked", e.LEADERBOARD_BUTTON_CLICKED = "leaderboard_button_clicked", e.ONBOARDING_STEP_VIEWED = "onboarding_step_viewed", e.ONBOARDING_STEP_COMPLETED = "onboarding_step_completed", e.COACHMARK_DISMISSED = "coachmark_dismissed", e))(_ || {});
|
|
3
3
|
const o = {
|
|
4
4
|
page_viewed: [t.MIXPANEL],
|
|
5
5
|
// circle on leap mixpanel events
|
|
@@ -12,7 +12,7 @@ const o = {
|
|
|
12
12
|
coachmark_dismissed: [t.MIXPANEL]
|
|
13
13
|
};
|
|
14
14
|
export {
|
|
15
|
-
|
|
15
|
+
_ as PLATFORM_EVENTS_STUDENT,
|
|
16
16
|
o as PLATFORM_WHITELIST_EVENTS_STUDENT
|
|
17
17
|
};
|
|
18
18
|
//# sourceMappingURL=platform-events-student.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"platform-events-student.js","sources":["../../../src/features/analytics-events/platform-events-student.ts"],"sourcesContent":["import { PLUGINS } from '@cuemath/analytics-v2/dist/constants';\n\n/**\n ** Global/Platform specific events that needs to be tracked goes here\n ** Naming convention needs to be snake_case\n */\nexport enum PLATFORM_EVENTS_STUDENT {\n PAGE_VIEWED = 'page_viewed',\n CUSTOM_TEST_SUBMITTED = 'custom_test_submitted',\n HOMEWORK_COMPLETED = 'homework_completed',\n\n // circle on leap mixpanel events\n ACTIVITY_STARTED = 'activity_started',\n ACTIVITY_TUTORIAL_SEEN = 'activity_tutorial_seen',\n STREAK_ICON_CLICKED = 'streak_icon_clicked',\n LEADERBOARD_BUTTON_CLICKED = 'leaderboard_button_clicked',\n ONBOARDING_STEP_VIEWED = 'onboarding_step_viewed',\n ONBOARDING_STEP_COMPLETED = 'onboarding_step_completed',\n COACHMARK_DISMISSED = 'coachmark_dismissed',\n}\n\n/**\n ** Events that need to be tracked at particular plugins\n ** Value will be array of strings.\n */\nexport const PLATFORM_WHITELIST_EVENTS_STUDENT = {\n [PLATFORM_EVENTS_STUDENT.PAGE_VIEWED]: [PLUGINS.MIXPANEL],\n\n // circle on leap mixpanel events\n [PLATFORM_EVENTS_STUDENT.ACTIVITY_STARTED]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.ACTIVITY_TUTORIAL_SEEN]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.STREAK_ICON_CLICKED]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.LEADERBOARD_BUTTON_CLICKED]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.COACHMARK_DISMISSED]: [PLUGINS.MIXPANEL],\n};\n"],"names":["PLATFORM_EVENTS_STUDENT","PLATFORM_WHITELIST_EVENTS_STUDENT","PLUGINS"],"mappings":";AAMY,IAAAA,sBAAAA,OACVA,EAAA,cAAc,eACdA,EAAA,wBAAwB,yBACxBA,EAAA,qBAAqB,
|
|
1
|
+
{"version":3,"file":"platform-events-student.js","sources":["../../../src/features/analytics-events/platform-events-student.ts"],"sourcesContent":["import { PLUGINS } from '@cuemath/analytics-v2/dist/constants';\n\n/**\n ** Global/Platform specific events that needs to be tracked goes here\n ** Naming convention needs to be snake_case\n */\nexport enum PLATFORM_EVENTS_STUDENT {\n PAGE_VIEWED = 'page_viewed',\n CUSTOM_TEST_SUBMITTED = 'custom_test_submitted',\n HOMEWORK_COMPLETED = 'homework_completed',\n ERROR_VIA_AUTO_LOGIN_FROM_CUEMATH_APP = 'error_via_auto_login_from_cuemath_app',\n\n // circle on leap mixpanel events\n ACTIVITY_STARTED = 'activity_started',\n ACTIVITY_TUTORIAL_SEEN = 'activity_tutorial_seen',\n STREAK_ICON_CLICKED = 'streak_icon_clicked',\n LEADERBOARD_BUTTON_CLICKED = 'leaderboard_button_clicked',\n ONBOARDING_STEP_VIEWED = 'onboarding_step_viewed',\n ONBOARDING_STEP_COMPLETED = 'onboarding_step_completed',\n COACHMARK_DISMISSED = 'coachmark_dismissed',\n}\n\n/**\n ** Events that need to be tracked at particular plugins\n ** Value will be array of strings.\n */\nexport const PLATFORM_WHITELIST_EVENTS_STUDENT = {\n [PLATFORM_EVENTS_STUDENT.PAGE_VIEWED]: [PLUGINS.MIXPANEL],\n\n // circle on leap mixpanel events\n [PLATFORM_EVENTS_STUDENT.ACTIVITY_STARTED]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.ACTIVITY_TUTORIAL_SEEN]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.STREAK_ICON_CLICKED]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.LEADERBOARD_BUTTON_CLICKED]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED]: [PLUGINS.MIXPANEL],\n [PLATFORM_EVENTS_STUDENT.COACHMARK_DISMISSED]: [PLUGINS.MIXPANEL],\n};\n"],"names":["PLATFORM_EVENTS_STUDENT","PLATFORM_WHITELIST_EVENTS_STUDENT","PLUGINS"],"mappings":";AAMY,IAAAA,sBAAAA,OACVA,EAAA,cAAc,eACdA,EAAA,wBAAwB,yBACxBA,EAAA,qBAAqB,sBACrBA,EAAA,wCAAwC,yCAGxCA,EAAA,mBAAmB,oBACnBA,EAAA,yBAAyB,0BACzBA,EAAA,sBAAsB,uBACtBA,EAAA,6BAA6B,8BAC7BA,EAAA,yBAAyB,0BACzBA,EAAA,4BAA4B,6BAC5BA,EAAA,sBAAsB,uBAbZA,IAAAA,KAAA,CAAA,CAAA;AAoBL,MAAMC,IAAoC;AAAA,EAC9C,aAAsC,CAACC,EAAQ,QAAQ;AAAA;AAAA,EAGvD,kBAA2C,CAACA,EAAQ,QAAQ;AAAA,EAC5D,wBAAiD,CAACA,EAAQ,QAAQ;AAAA,EAClE,qBAA8C,CAACA,EAAQ,QAAQ;AAAA,EAC/D,4BAAqD,CAACA,EAAQ,QAAQ;AAAA,EACtE,wBAAiD,CAACA,EAAQ,QAAQ;AAAA,EAClE,2BAAoD,CAACA,EAAQ,QAAQ;AAAA,EACrE,qBAA8C,CAACA,EAAQ,QAAQ;AAClE;"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { GAME_LAUNCHER_SIZE as E } from "../card-container/constants.js";
|
|
2
|
-
const
|
|
2
|
+
const A = E * 17.5 / 100, _ = 5, o = Math.ceil(E * 87.5 / 100), R = E / 2 * (37.5 / 100), T = E / 2 * (12.5 / 100), S = Math.PI / 180, c = 2, n = Math.sin(30 * S) * (E / 2 - _);
|
|
3
3
|
export {
|
|
4
4
|
o as ASSET_CONTAINER_SIZE,
|
|
5
5
|
R as ASSET_OFFSET_X,
|
|
6
6
|
T as ASSET_OFFSET_Y,
|
|
7
|
-
|
|
7
|
+
c as BORDER_WIDTH,
|
|
8
|
+
A as GAME_LAUNCHER_ASSET_PADDING,
|
|
8
9
|
_ as GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,
|
|
9
|
-
|
|
10
|
+
n as delta
|
|
10
11
|
};
|
|
11
12
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/constants.ts"],"sourcesContent":["import { GAME_LAUNCHER_SIZE } from '../card-container/constants';\n\nexport const GAME_LAUNCHER_ASSET_PADDING = (GAME_LAUNCHER_SIZE * 17.5) / 100;\n\n// to show the stroke of the card below points, this width needs to be reduced\nexport const GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH = 5;\n\n// asset container needs to be 350/400 % of GAME LAUNCHER SIZE\nexport const ASSET_CONTAINER_SIZE = Math.ceil((GAME_LAUNCHER_SIZE * 87.5) / 100);\n\n// ASSET x-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_X = (GAME_LAUNCHER_SIZE / 2) * (37.5 / 100);\n\n// ASSET y-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_Y = (GAME_LAUNCHER_SIZE / 2) * (12.5 / 100);\n\nconst RADIAN = Math.PI / 180;\n
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/constants.ts"],"sourcesContent":["import { GAME_LAUNCHER_SIZE } from '../card-container/constants';\n\nexport const GAME_LAUNCHER_ASSET_PADDING = (GAME_LAUNCHER_SIZE * 17.5) / 100;\n\n// to show the stroke of the card below points, this width needs to be reduced\nexport const GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH = 5;\n\n// asset container needs to be 350/400 % of GAME LAUNCHER SIZE\nexport const ASSET_CONTAINER_SIZE = Math.ceil((GAME_LAUNCHER_SIZE * 87.5) / 100);\n\n// ASSET x-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_X = (GAME_LAUNCHER_SIZE / 2) * (37.5 / 100);\n\n// ASSET y-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_Y = (GAME_LAUNCHER_SIZE / 2) * (12.5 / 100);\n\nconst RADIAN = Math.PI / 180;\n\nexport const BORDER_WIDTH = 2;\n\n// delta created by a segment from x axis is 30deg\n// sin30 = delta/(CARD_SIZE/2)\nexport const delta =\n Math.sin(30 * RADIAN) * (GAME_LAUNCHER_SIZE / 2 - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH);\n"],"names":["GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","ASSET_CONTAINER_SIZE","ASSET_OFFSET_X","ASSET_OFFSET_Y","RADIAN","BORDER_WIDTH","delta"],"mappings":";AAEa,MAAAA,IAA+BC,IAAqB,OAAQ,KAG5DC,IAA2C,GAG3CC,IAAuB,KAAK,KAAMF,IAAqB,OAAQ,GAAG,GAGlEG,IAAkBH,IAAqB,KAAM,OAAO,MAGpDI,IAAkBJ,IAAqB,KAAM,OAAO,MAE3DK,IAAS,KAAK,KAAK,KAEZC,IAAe,GAIfC,IACX,KAAK,IAAI,KAAKF,CAAM,KAAKL,IAAqB,IAAIC;"}
|
|
@@ -1,13 +1,27 @@
|
|
|
1
1
|
import o from "styled-components";
|
|
2
2
|
import { GAME_LAUNCHER_SIZE as e } from "../card-container/constants.js";
|
|
3
|
-
import {
|
|
3
|
+
import { BORDER_WIDTH as d, GAME_LAUNCHER_ASSET_PADDING as i, delta as a, ASSET_OFFSET_X as r, ASSET_OFFSET_Y as n, ASSET_CONTAINER_SIZE as s } from "./constants.js";
|
|
4
4
|
const g = o.div`
|
|
5
5
|
position: absolute;
|
|
6
6
|
z-index: 5;
|
|
7
|
-
height: ${e
|
|
8
|
-
width: ${e
|
|
7
|
+
height: ${e}px;
|
|
8
|
+
width: ${e}px;
|
|
9
9
|
pointer-events: none;
|
|
10
|
-
`,
|
|
10
|
+
`, f = o.div`
|
|
11
|
+
position: relative;
|
|
12
|
+
height: inherit;
|
|
13
|
+
width: inherit;
|
|
14
|
+
border-radius: 50%;
|
|
15
|
+
border: ${d}px solid #fff;
|
|
16
|
+
`, c = o.div`
|
|
17
|
+
position: absolute;
|
|
18
|
+
height: ${e + i}px;
|
|
19
|
+
width: ${e + i}px;
|
|
20
|
+
border-radius: 50%;
|
|
21
|
+
top: ${-i / 2 - d}px;
|
|
22
|
+
left: ${-i / 2 - d}px;
|
|
23
|
+
z-index: 4;
|
|
24
|
+
`, p = o.div`
|
|
11
25
|
height: ${e}px;
|
|
12
26
|
width: ${e}px;
|
|
13
27
|
overflow: hidden;
|
|
@@ -18,24 +32,24 @@ const g = o.div`
|
|
|
18
32
|
border: 2px solid ${({ theme: t }) => t.colors.WHITE};
|
|
19
33
|
backdrop-filter: blur(0px);
|
|
20
34
|
-webkit-backdrop-filter: blur(0px);
|
|
21
|
-
`,
|
|
35
|
+
`, $ = o(p)`
|
|
22
36
|
transform-origin: bottom right;
|
|
23
37
|
transform: rotate(-32deg) skew(-32deg);
|
|
24
38
|
translate: -${e / 2}px -${e / 2}px;
|
|
25
39
|
border-right-width: 1px;
|
|
26
|
-
`,
|
|
40
|
+
`, b = o(p)`
|
|
27
41
|
transform-origin: bottom left;
|
|
28
42
|
transform: rotate(32deg) skew(32deg);
|
|
29
43
|
translate: ${e / 2}px -${e / 2}px;
|
|
30
44
|
border-left-width: 1px;
|
|
31
|
-
`,
|
|
45
|
+
`, m = o(p)`
|
|
32
46
|
height: ${e / 2}px;
|
|
33
47
|
width: ${e}px;
|
|
34
48
|
bottom: 0;
|
|
35
49
|
left: 0;
|
|
36
50
|
z-index: 1;
|
|
37
51
|
border: none;
|
|
38
|
-
`,
|
|
52
|
+
`, u = o.div`
|
|
39
53
|
height: inherit;
|
|
40
54
|
width: inherit;
|
|
41
55
|
overflow: hidden;
|
|
@@ -43,16 +57,16 @@ const g = o.div`
|
|
|
43
57
|
display: flex;
|
|
44
58
|
justify-content: center;
|
|
45
59
|
align-items: center;
|
|
46
|
-
`,
|
|
60
|
+
`, w = o.div`
|
|
47
61
|
flex: 1;
|
|
48
62
|
background: transparent;
|
|
49
|
-
height: ${e / 2 +
|
|
63
|
+
height: ${e / 2 + a}px;
|
|
50
64
|
width: ${e}px;
|
|
51
65
|
position: absolute;
|
|
52
66
|
display: flex;
|
|
53
67
|
justify-content: center;
|
|
54
68
|
align-items: center;
|
|
55
|
-
bottom: ${({ $segmentType: t = "bottom" }) => t === "bottom" ? "unset" : `-${
|
|
69
|
+
bottom: ${({ $segmentType: t = "bottom" }) => t === "bottom" ? "unset" : `-${a}px`};
|
|
56
70
|
transform-origin: ${({ $segmentType: t }) => {
|
|
57
71
|
switch (t) {
|
|
58
72
|
case "left":
|
|
@@ -73,13 +87,13 @@ const g = o.div`
|
|
|
73
87
|
return "none";
|
|
74
88
|
}
|
|
75
89
|
}};
|
|
76
|
-
`,
|
|
90
|
+
`, S = o.div`
|
|
77
91
|
position: absolute;
|
|
78
92
|
right: ${({ $segmentType: t }) => t === "left" ? `-${r}px` : "unset"};
|
|
79
93
|
left: ${({ $segmentType: t }) => t === "right" ? `-${r}px` : "unset"};
|
|
80
94
|
bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${n}px` : `-${n}px`};
|
|
81
|
-
height: ${
|
|
82
|
-
width: ${
|
|
95
|
+
height: ${s}px;
|
|
96
|
+
width: ${s}px;
|
|
83
97
|
display: flex;
|
|
84
98
|
align-items: center;
|
|
85
99
|
overflow: hidden;
|
|
@@ -90,13 +104,13 @@ const g = o.div`
|
|
|
90
104
|
background: ${({ theme: t }) => t.colors.WHITE_T_15};
|
|
91
105
|
cursor: pointer;
|
|
92
106
|
}
|
|
93
|
-
`,
|
|
107
|
+
`, v = o.div`
|
|
94
108
|
position: absolute;
|
|
95
109
|
right: ${({ $segmentType: t }) => t === "left" ? `-${r}px` : "unset"};
|
|
96
110
|
left: ${({ $segmentType: t }) => t === "right" ? `-${r}px` : "unset"};
|
|
97
111
|
bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${n}px` : `-${n}px`};
|
|
98
|
-
height: ${
|
|
99
|
-
width: ${
|
|
112
|
+
height: ${s}px;
|
|
113
|
+
width: ${s}px;
|
|
100
114
|
z-index: 5;
|
|
101
115
|
backdrop-filter: blur(16px);
|
|
102
116
|
-webkit-backdrop-filter: blur(16px);
|
|
@@ -104,19 +118,21 @@ const g = o.div`
|
|
|
104
118
|
display: flex;
|
|
105
119
|
align-items: center;
|
|
106
120
|
justify-content: center;
|
|
107
|
-
`,
|
|
121
|
+
`, E = o.div`
|
|
108
122
|
position: absolute;
|
|
109
123
|
z-index: 6;
|
|
110
124
|
`;
|
|
111
125
|
export {
|
|
112
126
|
g as CircularProgressLottieContainer,
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
f as
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
127
|
+
E as IconWrapper,
|
|
128
|
+
c as LottieAnmationContainer,
|
|
129
|
+
f as RingContainer,
|
|
130
|
+
S as SegmentAssetContainer,
|
|
131
|
+
m as SegmentBottom,
|
|
132
|
+
u as SegmentContainer,
|
|
133
|
+
w as SegmentContentContainer,
|
|
134
|
+
$ as SegmentLeft,
|
|
135
|
+
v as SegmentOverlay,
|
|
136
|
+
b as SegmentRight
|
|
121
137
|
};
|
|
122
138
|
//# sourceMappingURL=segmented-game-card-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented-game-card-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.tsx"],"sourcesContent":["import type { TSegment } from './segmented-game-card-types';\n\nimport styled from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../card-container/constants';\nimport {\n ASSET_CONTAINER_SIZE,\n delta,\n ASSET_OFFSET_X,\n ASSET_OFFSET_Y,\n GAME_LAUNCHER_ASSET_PADDING,\n} from './constants';\n\nexport const CircularProgressLottieContainer = styled.div`\n position: absolute;\n z-index: 5;\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n
|
|
1
|
+
{"version":3,"file":"segmented-game-card-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.tsx"],"sourcesContent":["import type { TSegment } from './segmented-game-card-types';\n\nimport styled from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../card-container/constants';\nimport {\n ASSET_CONTAINER_SIZE,\n delta,\n ASSET_OFFSET_X,\n ASSET_OFFSET_Y,\n GAME_LAUNCHER_ASSET_PADDING,\n BORDER_WIDTH,\n} from './constants';\n\nexport const CircularProgressLottieContainer = styled.div`\n position: absolute;\n z-index: 5;\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n pointer-events: none;\n`;\n\nexport const RingContainer = styled.div`\n position: relative;\n height: inherit;\n width: inherit;\n border-radius: 50%;\n border: ${BORDER_WIDTH}px solid #fff;\n`;\n\nexport const LottieAnmationContainer = styled.div`\n position: absolute;\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n border-radius: 50%;\n top: ${-GAME_LAUNCHER_ASSET_PADDING / 2 - BORDER_WIDTH}px;\n left: ${-GAME_LAUNCHER_ASSET_PADDING / 2 - BORDER_WIDTH}px;\n z-index: 4;\n`;\n\n// might be needed later-----\n// export const SegmentDevider = styled.div<{ angle: number }>`\n// width: ${GAME_LAUNCHER_SIZE / 2}px;\n// height: 2px;\n// position: absolute;\n// background: #fff;\n// transform-origin: left;\n// transform: ${({ angle }) => `rotate(${angle}deg)`};\n// `;\n\nconst Segment = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n overflow: hidden;\n display: flex;\n position: absolute;\n background: ${({ theme }) => theme.colors.BLACK_1};\n z-index: 2;\n border: 2px solid ${({ theme }) => theme.colors.WHITE};\n backdrop-filter: blur(0px);\n -webkit-backdrop-filter: blur(0px);\n`;\n\nexport const SegmentLeft = styled(Segment)<{\n $angle?: number;\n}>`\n transform-origin: bottom right;\n transform: rotate(-32deg) skew(-32deg);\n translate: -${GAME_LAUNCHER_SIZE / 2}px -${GAME_LAUNCHER_SIZE / 2}px;\n border-right-width: 1px;\n`;\n\nexport const SegmentRight = styled(Segment)<{\n $angle?: number;\n}>`\n transform-origin: bottom left;\n transform: rotate(32deg) skew(32deg);\n translate: ${GAME_LAUNCHER_SIZE / 2}px -${GAME_LAUNCHER_SIZE / 2}px;\n border-left-width: 1px;\n`;\n\nexport const SegmentBottom = styled(Segment)<{\n $angle?: number;\n}>`\n height: ${GAME_LAUNCHER_SIZE / 2}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n bottom: 0;\n left: 0;\n z-index: 1;\n border: none;\n`;\n\nexport const SegmentContainer = styled.div`\n height: inherit;\n width: inherit;\n overflow: hidden;\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const SegmentContentContainer = styled.div<{ $segmentType?: TSegment }>`\n flex: 1;\n background: transparent;\n height: ${GAME_LAUNCHER_SIZE / 2 + delta}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n bottom: ${({ $segmentType = 'bottom' }) => ($segmentType === 'bottom' ? 'unset' : `-${delta}px`)};\n transform-origin: ${({ $segmentType }) => {\n switch ($segmentType) {\n case 'left':\n return 'bottom right';\n case 'right':\n return 'bottom left';\n default:\n return 'unset';\n }\n }};\n transform: ${({ $segmentType = 'bottom' }) => {\n switch ($segmentType) {\n case 'left':\n return 'skew(32deg) rotate(32deg)';\n case 'right':\n return 'skew(-32deg) rotate(-32deg)';\n default:\n return 'none';\n }\n }};\n`;\n\nexport const SegmentAssetContainer = styled.div<{\n $segmentType?: TSegment;\n}>`\n position: absolute;\n right: ${({ $segmentType }) => ($segmentType === 'left' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n left: ${({ $segmentType }) => ($segmentType === 'right' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n bottom: ${({ $segmentType }) =>\n $segmentType === 'bottom' ? `-${ASSET_OFFSET_Y}px` : `-${ASSET_OFFSET_Y}px`};\n height: ${ASSET_CONTAINER_SIZE}px;\n width: ${ASSET_CONTAINER_SIZE}px;\n display: flex;\n align-items: center;\n overflow: hidden;\n background-color: transparent;\n z-index: 1;\n flex-shrink: 0;\n &:hover {\n background: ${({ theme }) => theme.colors.WHITE_T_15};\n cursor: pointer;\n }\n`;\n\nexport const SegmentOverlay = styled.div<{ $segmentType?: TSegment }>`\n position: absolute;\n right: ${({ $segmentType }) => ($segmentType === 'left' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n left: ${({ $segmentType }) => ($segmentType === 'right' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n bottom: ${({ $segmentType }) =>\n $segmentType === 'bottom' ? `-${ASSET_OFFSET_Y}px` : `-${ASSET_OFFSET_Y}px`};\n height: ${ASSET_CONTAINER_SIZE}px;\n width: ${ASSET_CONTAINER_SIZE}px;\n z-index: 5;\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n /* pointer-events: none; */\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const IconWrapper = styled.div`\n position: absolute;\n z-index: 6;\n`;\n"],"names":["CircularProgressLottieContainer","styled","GAME_LAUNCHER_SIZE","RingContainer","BORDER_WIDTH","LottieAnmationContainer","GAME_LAUNCHER_ASSET_PADDING","Segment","theme","SegmentLeft","SegmentRight","SegmentBottom","SegmentContainer","SegmentContentContainer","delta","$segmentType","SegmentAssetContainer","ASSET_OFFSET_X","ASSET_OFFSET_Y","ASSET_CONTAINER_SIZE","SegmentOverlay","IconWrapper"],"mappings":"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"}
|
package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { memo as
|
|
1
|
+
import { jsx as e, jsxs as L } from "react/jsx-runtime";
|
|
2
|
+
import { memo as R, useCallback as m, forwardRef as O, useRef as A, useState as C, useImperativeHandle as F, useMemo as E } from "react";
|
|
3
3
|
import G from "../../../../../assets/line-icons/icons/check.js";
|
|
4
4
|
import { LOTTIE as $ } from "../../../../../assets/lottie/lottie.js";
|
|
5
|
-
import
|
|
5
|
+
import P from "../../../../ui/lottie-animation/lottie-animation.js";
|
|
6
6
|
import { CardContainer as j } from "../card-container/card-container.js";
|
|
7
|
-
import { SegmentContainer as w, SegmentContentContainer as U, SegmentAssetContainer as x, SegmentOverlay as B, IconWrapper as N, CircularProgressLottieContainer as q,
|
|
8
|
-
const
|
|
9
|
-
({ segmentType:
|
|
10
|
-
const a = m(() => s
|
|
11
|
-
return /* @__PURE__ */
|
|
12
|
-
/* @__PURE__ */
|
|
13
|
-
o && /* @__PURE__ */
|
|
7
|
+
import { SegmentContainer as w, SegmentContentContainer as U, SegmentAssetContainer as x, SegmentOverlay as B, IconWrapper as N, CircularProgressLottieContainer as q, RingContainer as z, LottieAnmationContainer as D, SegmentLeft as J, SegmentRight as K, SegmentBottom as Q } from "./segmented-game-card-styled.js";
|
|
8
|
+
const X = { renderer: "canvas", loop: !0 }, f = R(
|
|
9
|
+
({ segmentType: n, isCompleted: o, card: c, name: s, onMouseEnter: i }) => {
|
|
10
|
+
const a = m(() => i(s), [i, s]);
|
|
11
|
+
return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ L(U, { $segmentType: n, onMouseEnter: a, children: [
|
|
12
|
+
/* @__PURE__ */ e(x, { $segmentType: n, children: /* @__PURE__ */ e(P, { src: c, settings: X, animateOnIntersect: !0 }) }),
|
|
13
|
+
o && /* @__PURE__ */ e(B, { $segmentType: n, children: /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(G, { color: "#fff", height: 40, width: 40 }) }) })
|
|
14
14
|
] }) });
|
|
15
15
|
}
|
|
16
|
-
),
|
|
17
|
-
const g =
|
|
16
|
+
), Y = ({ data: n, label: o, initialValue: c = 0, value: s, maxValue: i = 1 }, a) => {
|
|
17
|
+
const g = A(null), h = A(null), [u, S] = C(o), [T, _] = C(!1), [b, M] = C("WHITE_T_87"), W = u !== o, d = m((t) => {
|
|
18
18
|
S(t);
|
|
19
19
|
}, []), k = m(() => {
|
|
20
20
|
S(o);
|
|
21
21
|
}, [o]), p = m(
|
|
22
22
|
(t) => {
|
|
23
23
|
var r, l;
|
|
24
|
-
(l = (r =
|
|
24
|
+
(l = (r = n[t]) == null ? void 0 : r.onPress) == null || l.call(r);
|
|
25
25
|
},
|
|
26
|
-
[
|
|
26
|
+
[n]
|
|
27
27
|
), v = m((t) => {
|
|
28
28
|
_(!0), M(t);
|
|
29
29
|
}, []);
|
|
@@ -32,12 +32,12 @@ const K = { renderer: "canvas", loop: !0 }, C = P(
|
|
|
32
32
|
segmentedCardWrapperRef: h,
|
|
33
33
|
startLabelAnimation: v
|
|
34
34
|
}));
|
|
35
|
-
const I =
|
|
36
|
-
if (
|
|
35
|
+
const I = E(() => {
|
|
36
|
+
if (i <= 0)
|
|
37
37
|
return;
|
|
38
|
-
const t = 92, r = t /
|
|
38
|
+
const t = 92, r = t / i, l = Math.min(r * c, t), H = Math.min(r * s + 1, t);
|
|
39
39
|
return [l, H];
|
|
40
|
-
}, [c,
|
|
40
|
+
}, [c, i, s]), y = E(
|
|
41
41
|
() => ({
|
|
42
42
|
renderer: "canvas",
|
|
43
43
|
autoplay: !0,
|
|
@@ -56,50 +56,50 @@ const K = { renderer: "canvas", loop: !0 }, C = P(
|
|
|
56
56
|
onMouseLeave: k,
|
|
57
57
|
labelColor: T ? b : W ? "WHITE_T_87" : "WHITE_T_60",
|
|
58
58
|
children: [
|
|
59
|
-
/* @__PURE__ */
|
|
60
|
-
|
|
59
|
+
/* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
|
|
60
|
+
P,
|
|
61
61
|
{
|
|
62
62
|
src: $.LEVELUP_RINGS,
|
|
63
63
|
settings: y,
|
|
64
64
|
animateOnIntersect: !0
|
|
65
65
|
}
|
|
66
|
-
) }),
|
|
67
|
-
/* @__PURE__ */
|
|
68
|
-
|
|
66
|
+
) }) }) }),
|
|
67
|
+
/* @__PURE__ */ e(J, { onClick: () => p(0), children: /* @__PURE__ */ e(
|
|
68
|
+
f,
|
|
69
69
|
{
|
|
70
70
|
segmentType: "left",
|
|
71
|
-
card:
|
|
72
|
-
name:
|
|
73
|
-
isCompleted:
|
|
71
|
+
card: n[0].card,
|
|
72
|
+
name: n[0].name,
|
|
73
|
+
isCompleted: n[0].isCompleted,
|
|
74
74
|
onMouseEnter: d
|
|
75
75
|
}
|
|
76
76
|
) }),
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
-
|
|
77
|
+
/* @__PURE__ */ e(K, { onClick: () => p(1), children: /* @__PURE__ */ e(
|
|
78
|
+
f,
|
|
79
79
|
{
|
|
80
80
|
segmentType: "right",
|
|
81
|
-
card:
|
|
82
|
-
name:
|
|
83
|
-
isCompleted:
|
|
81
|
+
card: n[1].card,
|
|
82
|
+
name: n[1].name,
|
|
83
|
+
isCompleted: n[1].isCompleted,
|
|
84
84
|
onMouseEnter: d
|
|
85
85
|
}
|
|
86
86
|
) }),
|
|
87
|
-
/* @__PURE__ */
|
|
88
|
-
|
|
87
|
+
/* @__PURE__ */ e(Q, { onClick: () => p(2), children: /* @__PURE__ */ e(
|
|
88
|
+
f,
|
|
89
89
|
{
|
|
90
90
|
segmentType: "bottom",
|
|
91
|
-
card:
|
|
92
|
-
name:
|
|
93
|
-
isCompleted:
|
|
91
|
+
card: n[2].card,
|
|
92
|
+
name: n[2].name,
|
|
93
|
+
isCompleted: n[2].isCompleted,
|
|
94
94
|
onMouseEnter: d
|
|
95
95
|
}
|
|
96
96
|
) })
|
|
97
97
|
]
|
|
98
98
|
}
|
|
99
99
|
);
|
|
100
|
-
},
|
|
100
|
+
}, ie = R(O(Y));
|
|
101
101
|
export {
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
f as SegmentContent,
|
|
103
|
+
ie as SegmentedGameCard
|
|
104
104
|
};
|
|
105
105
|
//# sourceMappingURL=segmented-game-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented-game-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type {\n IGameCardSegmentContentProps,\n ISegmentedGameCardProps,\n ISegmentedGameCardRefs,\n} from './segmented-game-card-types';\nimport type { ForwardRefRenderFunction } from 'react';\n\nimport {\n forwardRef,\n memo,\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport CheckIcon from '../../../../../assets/line-icons/icons/check';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport { CardContainer } from '../card-container/card-container';\nimport * as Styled from './segmented-game-card-styled';\n\nconst renderSettings = { renderer: 'canvas', loop: true };\n\nexport const SegmentContent = memo(\n ({ segmentType, isCompleted, card, name, onMouseEnter }: IGameCardSegmentContentProps) => {\n const handleMouseEnter = useCallback(() => onMouseEnter(name), [onMouseEnter, name]);\n\n return (\n <Styled.SegmentContainer>\n <Styled.SegmentContentContainer $segmentType={segmentType} onMouseEnter={handleMouseEnter}>\n <Styled.SegmentAssetContainer $segmentType={segmentType}>\n <LottieAnimation src={card} settings={renderSettings} animateOnIntersect />\n </Styled.SegmentAssetContainer>\n\n {isCompleted && (\n <Styled.SegmentOverlay $segmentType={segmentType}>\n <Styled.IconWrapper>\n <CheckIcon color=\"#fff\" height={40} width={40} />\n </Styled.IconWrapper>\n </Styled.SegmentOverlay>\n )}\n </Styled.SegmentContentContainer>\n </Styled.SegmentContainer>\n );\n },\n);\n\nconst SegmentedGameCardComponent: ForwardRefRenderFunction<\n ISegmentedGameCardRefs,\n ISegmentedGameCardProps\n> = ({ data, label: gameCategoryLabel, initialValue = 0, value, maxValue = 1 }, ref) => {\n const labelRef = useRef<HTMLDivElement>(null);\n const cardWrapperRef = useRef<HTMLDivElement>(null);\n\n const [label, setLabel] = useState<string>(gameCategoryLabel);\n const [isAnimated, setIsAnimated] = useState(false);\n const [animatedColor, setAnimatedColor] = useState<TColorNames>('WHITE_T_87');\n\n const isLabelHighlighted = label !== gameCategoryLabel;\n\n const onMouseEnter = useCallback((gameName: string) => {\n setLabel(gameName);\n }, []);\n\n const onMouseLeave = useCallback(() => {\n setLabel(gameCategoryLabel);\n }, [gameCategoryLabel]);\n\n const onSegmentPress = useCallback(\n (index: number) => {\n data[index]?.onPress?.();\n },\n [data],\n );\n\n const startLabelAnimation = useCallback((color: TColorNames) => {\n setIsAnimated(true);\n setAnimatedColor(color);\n }, []);\n\n useImperativeHandle(ref, () => ({\n labelRef,\n segmentedCardWrapperRef: cardWrapperRef,\n startLabelAnimation,\n }));\n\n const animationSegments: [number, number] | undefined = useMemo(() => {\n if (maxValue <= 0) {\n return;\n }\n\n const totalFrames = 92;\n const framesPerValue = totalFrames / maxValue;\n\n const initialFrameToPlay = Math.min(framesPerValue * initialValue, totalFrames);\n const finalFrameToPlay = Math.min(framesPerValue * value + 1, totalFrames);\n\n return [initialFrameToPlay, finalFrameToPlay];\n }, [initialValue, maxValue, value]);\n\n const levelUpAnimationSettings = useMemo(\n () => ({\n renderer: 'canvas',\n autoplay: true,\n loop: false,\n initialSegment: animationSegments,\n }),\n [animationSegments],\n );\n\n return (\n <CardContainer\n ref={cardWrapperRef}\n labelRef={labelRef}\n label={label}\n isAnimated={isAnimated}\n onMouseLeave={onMouseLeave}\n labelColor={isAnimated ? animatedColor : isLabelHighlighted ? 'WHITE_T_87' : 'WHITE_T_60'}\n >\n <Styled.CircularProgressLottieContainer>\n <LottieAnimation\n
|
|
1
|
+
{"version":3,"file":"segmented-game-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type {\n IGameCardSegmentContentProps,\n ISegmentedGameCardProps,\n ISegmentedGameCardRefs,\n} from './segmented-game-card-types';\nimport type { ForwardRefRenderFunction } from 'react';\n\nimport {\n forwardRef,\n memo,\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport CheckIcon from '../../../../../assets/line-icons/icons/check';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport { CardContainer } from '../card-container/card-container';\nimport * as Styled from './segmented-game-card-styled';\n\nconst renderSettings = { renderer: 'canvas', loop: true };\n\nexport const SegmentContent = memo(\n ({ segmentType, isCompleted, card, name, onMouseEnter }: IGameCardSegmentContentProps) => {\n const handleMouseEnter = useCallback(() => onMouseEnter(name), [onMouseEnter, name]);\n\n return (\n <Styled.SegmentContainer>\n <Styled.SegmentContentContainer $segmentType={segmentType} onMouseEnter={handleMouseEnter}>\n <Styled.SegmentAssetContainer $segmentType={segmentType}>\n <LottieAnimation src={card} settings={renderSettings} animateOnIntersect />\n </Styled.SegmentAssetContainer>\n\n {isCompleted && (\n <Styled.SegmentOverlay $segmentType={segmentType}>\n <Styled.IconWrapper>\n <CheckIcon color=\"#fff\" height={40} width={40} />\n </Styled.IconWrapper>\n </Styled.SegmentOverlay>\n )}\n </Styled.SegmentContentContainer>\n </Styled.SegmentContainer>\n );\n },\n);\n\nconst SegmentedGameCardComponent: ForwardRefRenderFunction<\n ISegmentedGameCardRefs,\n ISegmentedGameCardProps\n> = ({ data, label: gameCategoryLabel, initialValue = 0, value, maxValue = 1 }, ref) => {\n const labelRef = useRef<HTMLDivElement>(null);\n const cardWrapperRef = useRef<HTMLDivElement>(null);\n\n const [label, setLabel] = useState<string>(gameCategoryLabel);\n const [isAnimated, setIsAnimated] = useState(false);\n const [animatedColor, setAnimatedColor] = useState<TColorNames>('WHITE_T_87');\n\n const isLabelHighlighted = label !== gameCategoryLabel;\n\n const onMouseEnter = useCallback((gameName: string) => {\n setLabel(gameName);\n }, []);\n\n const onMouseLeave = useCallback(() => {\n setLabel(gameCategoryLabel);\n }, [gameCategoryLabel]);\n\n const onSegmentPress = useCallback(\n (index: number) => {\n data[index]?.onPress?.();\n },\n [data],\n );\n\n const startLabelAnimation = useCallback((color: TColorNames) => {\n setIsAnimated(true);\n setAnimatedColor(color);\n }, []);\n\n useImperativeHandle(ref, () => ({\n labelRef,\n segmentedCardWrapperRef: cardWrapperRef,\n startLabelAnimation,\n }));\n\n const animationSegments: [number, number] | undefined = useMemo(() => {\n if (maxValue <= 0) {\n return;\n }\n\n const totalFrames = 92;\n const framesPerValue = totalFrames / maxValue;\n\n const initialFrameToPlay = Math.min(framesPerValue * initialValue, totalFrames);\n const finalFrameToPlay = Math.min(framesPerValue * value + 1, totalFrames);\n\n return [initialFrameToPlay, finalFrameToPlay];\n }, [initialValue, maxValue, value]);\n\n const levelUpAnimationSettings = useMemo(\n () => ({\n renderer: 'canvas',\n autoplay: true,\n loop: false,\n initialSegment: animationSegments,\n }),\n [animationSegments],\n );\n\n return (\n <CardContainer\n ref={cardWrapperRef}\n labelRef={labelRef}\n label={label}\n isAnimated={isAnimated}\n onMouseLeave={onMouseLeave}\n labelColor={isAnimated ? animatedColor : isLabelHighlighted ? 'WHITE_T_87' : 'WHITE_T_60'}\n >\n <Styled.CircularProgressLottieContainer>\n <Styled.RingContainer>\n <Styled.LottieAnmationContainer>\n <LottieAnimation\n src={LOTTIE.LEVELUP_RINGS}\n settings={levelUpAnimationSettings}\n animateOnIntersect\n />\n </Styled.LottieAnmationContainer>\n </Styled.RingContainer>\n </Styled.CircularProgressLottieContainer>\n {/* left segment */}\n <Styled.SegmentLeft onClick={() => onSegmentPress(0)}>\n <SegmentContent\n segmentType={'left'}\n card={data[0]!.card}\n name={data[0]!.name}\n isCompleted={data[0]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentLeft>\n\n {/* right segment */}\n <Styled.SegmentRight onClick={() => onSegmentPress(1)}>\n <SegmentContent\n segmentType={'right'}\n card={data[1]!.card}\n name={data[1]!.name}\n isCompleted={data[1]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentRight>\n\n {/* bottom segment */}\n <Styled.SegmentBottom onClick={() => onSegmentPress(2)}>\n <SegmentContent\n segmentType={'bottom'}\n card={data[2]!.card}\n name={data[2]!.name}\n isCompleted={data[2]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentBottom>\n </CardContainer>\n );\n};\n\nexport const SegmentedGameCard = memo(forwardRef(SegmentedGameCardComponent));\n"],"names":["renderSettings","SegmentContent","memo","segmentType","isCompleted","card","name","onMouseEnter","handleMouseEnter","useCallback","jsx","Styled.SegmentContainer","jsxs","Styled.SegmentContentContainer","Styled.SegmentAssetContainer","LottieAnimation","Styled.SegmentOverlay","Styled.IconWrapper","CheckIcon","SegmentedGameCardComponent","data","gameCategoryLabel","initialValue","value","maxValue","ref","labelRef","useRef","cardWrapperRef","label","setLabel","useState","isAnimated","setIsAnimated","animatedColor","setAnimatedColor","isLabelHighlighted","gameName","onMouseLeave","onSegmentPress","index","_b","_a","startLabelAnimation","color","useImperativeHandle","animationSegments","useMemo","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","levelUpAnimationSettings","CardContainer","Styled.CircularProgressLottieContainer","Styled.RingContainer","Styled.LottieAnmationContainer","LOTTIE","Styled.SegmentLeft","Styled.SegmentRight","Styled.SegmentBottom","SegmentedGameCard","forwardRef"],"mappings":"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"}
|
|
@@ -2,32 +2,34 @@ import { jsxs as n, jsx as r } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo as T } from "react";
|
|
3
3
|
import { LOTTIE as o } from "../../../../../../assets/lottie/lottie.js";
|
|
4
4
|
import a from "../../../../../ui/layout/flex-view.js";
|
|
5
|
-
import
|
|
6
|
-
import
|
|
5
|
+
import s from "../../../../../ui/lottie-animation/lottie-animation.js";
|
|
6
|
+
import _ from "../../../../../ui/separator/separator.js";
|
|
7
7
|
import E from "../../../../../ui/text/text.js";
|
|
8
|
-
import { GAME_LAUNCHER_SIZE as t, GAME_LAUNCHER_SIZE_LARGE as
|
|
8
|
+
import { GAME_LAUNCHER_SIZE as t, GAME_LAUNCHER_SIZE_LARGE as c } from "../../card-container/constants.js";
|
|
9
9
|
import M from "../table-mode-star/table-mode-star.js";
|
|
10
10
|
import { ModeContentSquareBlock as i, TableModeLottieContainer as f } from "./table-mode-styled.js";
|
|
11
11
|
const h = {
|
|
12
12
|
sequence: o.SEQUENCE_MODE_SEGMENT_LOTTIE,
|
|
13
13
|
random: o.RANDOM_MODE_SEGMENT_LOTTIE,
|
|
14
14
|
advance: o.ADVANCE_MODE_SEGMENT_LOTTIE
|
|
15
|
-
},
|
|
15
|
+
}, A = {
|
|
16
|
+
renderer: "svg"
|
|
17
|
+
}, D = T(({ tableNumber: m, isStarAchieved: d, type: e, rewardStar: l }) => /* @__PURE__ */ n(a, { $alignItems: "center", children: [
|
|
16
18
|
/* @__PURE__ */ r(M, { isStarAchieved: d, rewardStar: l }),
|
|
17
|
-
/* @__PURE__ */ r(
|
|
19
|
+
/* @__PURE__ */ r(_, { height: t * 0.055 }),
|
|
18
20
|
/* @__PURE__ */ n(a, { $flexDirection: "row", children: [
|
|
19
21
|
/* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(
|
|
20
22
|
E,
|
|
21
23
|
{
|
|
22
|
-
$renderAs: t ===
|
|
24
|
+
$renderAs: t === c ? "ac3-black" : "ab2-bold",
|
|
23
25
|
$color: "WHITE",
|
|
24
|
-
children:
|
|
26
|
+
children: m
|
|
25
27
|
}
|
|
26
28
|
) }),
|
|
27
29
|
/* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(
|
|
28
30
|
E,
|
|
29
31
|
{
|
|
30
|
-
$renderAs: t ===
|
|
32
|
+
$renderAs: t === c ? "ac3-black" : "ab2-bold",
|
|
31
33
|
$color: "WHITE",
|
|
32
34
|
children: "×"
|
|
33
35
|
}
|
|
@@ -37,12 +39,12 @@ const h = {
|
|
|
37
39
|
{
|
|
38
40
|
$bottom: e === "advance" ? "-1px" : "unset",
|
|
39
41
|
$right: e === "advance" ? "-1px" : "unset",
|
|
40
|
-
children: /* @__PURE__ */ r(
|
|
42
|
+
children: /* @__PURE__ */ r(s, { src: h[e] ?? "", settings: A })
|
|
41
43
|
}
|
|
42
44
|
) })
|
|
43
45
|
] })
|
|
44
46
|
] }));
|
|
45
47
|
export {
|
|
46
|
-
|
|
48
|
+
D as default
|
|
47
49
|
};
|
|
48
50
|
//# sourceMappingURL=table-mode.js.map
|
package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-mode.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.tsx"],"sourcesContent":["import type { TTableMode } from '../../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITableModeProps } from './table-mode-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\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 { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../../card-container/constants';\nimport TableStar from '../table-mode-star/table-mode-star';\nimport * as Styled from './table-mode-styled';\n\nconst LOAD_LOTTIE: Partial<Record<TTableMode, string>> = {\n sequence: LOTTIE.SEQUENCE_MODE_SEGMENT_LOTTIE,\n random: LOTTIE.RANDOM_MODE_SEGMENT_LOTTIE,\n advance: LOTTIE.ADVANCE_MODE_SEGMENT_LOTTIE,\n};\n\nconst TableMode: FC<ITableModeProps> = memo(({ tableNumber, isStarAchieved, type, rewardStar }) => {\n return (\n <FlexView $alignItems=\"center\">\n <TableStar isStarAchieved={isStarAchieved} rewardStar={rewardStar} />\n <Separator height={GAME_LAUNCHER_SIZE * 0.055} />\n <FlexView $flexDirection=\"row\">\n <Styled.ModeContentSquareBlock>\n <Text\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n $color=\"WHITE\"\n >\n {tableNumber}\n </Text>\n </Styled.ModeContentSquareBlock>\n <Styled.ModeContentSquareBlock>\n <Text\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n $color=\"WHITE\"\n >\n ×\n </Text>\n </Styled.ModeContentSquareBlock>\n <Styled.ModeContentSquareBlock $isBorderRightRequired={type === 'advance'}>\n <Styled.TableModeLottieContainer\n $bottom={type === 'advance' ? '-1px' : 'unset'}\n $right={type === 'advance' ? '-1px' : 'unset'}\n >\n <LottieAnimation src={LOAD_LOTTIE[type] ?? ''} />\n </Styled.TableModeLottieContainer>\n </Styled.ModeContentSquareBlock>\n </FlexView>\n </FlexView>\n );\n});\n\nexport default TableMode;\n"],"names":["LOAD_LOTTIE","LOTTIE","TableMode","memo","tableNumber","isStarAchieved","type","rewardStar","jsxs","FlexView","jsx","TableStar","Separator","GAME_LAUNCHER_SIZE","Styled.ModeContentSquareBlock","Text","GAME_LAUNCHER_SIZE_LARGE","Styled.TableModeLottieContainer","LottieAnimation"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAmD;AAAA,EACvD,UAAUC,EAAO;AAAA,EACjB,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAClB,GAEMC,IAAiCC,EAAK,CAAC,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,MAAAC,GAAM,YAAAC,QAE9E,gBAAAC,EAACC,GAAS,EAAA,aAAY,UACpB,UAAA;AAAA,EAAC,gBAAAC,EAAAC,GAAA,EAAU,gBAAAN,GAAgC,YAAAE,EAAwB,CAAA;AAAA,EAClE,gBAAAG,EAAAE,GAAA,EAAU,QAAQC,IAAqB,MAAO,CAAA;AAAA,EAC/C,gBAAAL,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAC,EAAAI,GAAA,EACC,UAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,WAAWF,MAAuBG,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QAEN,UAAAZ;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IACA,gBAAAM,EAACI,GAAA,EACC,UAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,WAAWF,MAAuBG,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QACR,UAAA;AAAA,MAAA;AAAA,IAAA,GAGH;AAAA,sBACCF,GAAA,EAA8B,wBAAwBR,MAAS,WAC9D,UAAA,gBAAAI;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,SAASX,MAAS,YAAY,SAAS;AAAA,QACvC,QAAQA,MAAS,YAAY,SAAS;AAAA,QAEtC,4BAACY,GAAgB,EAAA,
|
|
1
|
+
{"version":3,"file":"table-mode.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.tsx"],"sourcesContent":["import type { TTableMode } from '../../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITableModeProps } from './table-mode-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\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 { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../../card-container/constants';\nimport TableStar from '../table-mode-star/table-mode-star';\nimport * as Styled from './table-mode-styled';\n\nconst LOAD_LOTTIE: Partial<Record<TTableMode, string>> = {\n sequence: LOTTIE.SEQUENCE_MODE_SEGMENT_LOTTIE,\n random: LOTTIE.RANDOM_MODE_SEGMENT_LOTTIE,\n advance: LOTTIE.ADVANCE_MODE_SEGMENT_LOTTIE,\n};\n\nconst settings = {\n renderer: 'svg',\n};\n\nconst TableMode: FC<ITableModeProps> = memo(({ tableNumber, isStarAchieved, type, rewardStar }) => {\n return (\n <FlexView $alignItems=\"center\">\n <TableStar isStarAchieved={isStarAchieved} rewardStar={rewardStar} />\n <Separator height={GAME_LAUNCHER_SIZE * 0.055} />\n <FlexView $flexDirection=\"row\">\n <Styled.ModeContentSquareBlock>\n <Text\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n $color=\"WHITE\"\n >\n {tableNumber}\n </Text>\n </Styled.ModeContentSquareBlock>\n <Styled.ModeContentSquareBlock>\n <Text\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n $color=\"WHITE\"\n >\n ×\n </Text>\n </Styled.ModeContentSquareBlock>\n <Styled.ModeContentSquareBlock $isBorderRightRequired={type === 'advance'}>\n <Styled.TableModeLottieContainer\n $bottom={type === 'advance' ? '-1px' : 'unset'}\n $right={type === 'advance' ? '-1px' : 'unset'}\n >\n <LottieAnimation src={LOAD_LOTTIE[type] ?? ''} settings={settings} />\n </Styled.TableModeLottieContainer>\n </Styled.ModeContentSquareBlock>\n </FlexView>\n </FlexView>\n );\n});\n\nexport default TableMode;\n"],"names":["LOAD_LOTTIE","LOTTIE","settings","TableMode","memo","tableNumber","isStarAchieved","type","rewardStar","jsxs","FlexView","jsx","TableStar","Separator","GAME_LAUNCHER_SIZE","Styled.ModeContentSquareBlock","Text","GAME_LAUNCHER_SIZE_LARGE","Styled.TableModeLottieContainer","LottieAnimation"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAmD;AAAA,EACvD,UAAUC,EAAO;AAAA,EACjB,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAClB,GAEMC,IAAW;AAAA,EACf,UAAU;AACZ,GAEMC,IAAiCC,EAAK,CAAC,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,MAAAC,GAAM,YAAAC,QAE9E,gBAAAC,EAACC,GAAS,EAAA,aAAY,UACpB,UAAA;AAAA,EAAC,gBAAAC,EAAAC,GAAA,EAAU,gBAAAN,GAAgC,YAAAE,EAAwB,CAAA;AAAA,EAClE,gBAAAG,EAAAE,GAAA,EAAU,QAAQC,IAAqB,MAAO,CAAA;AAAA,EAC/C,gBAAAL,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAC,EAAAI,GAAA,EACC,UAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,WAAWF,MAAuBG,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QAEN,UAAAZ;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IACA,gBAAAM,EAACI,GAAA,EACC,UAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,WAAWF,MAAuBG,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QACR,UAAA;AAAA,MAAA;AAAA,IAAA,GAGH;AAAA,sBACCF,GAAA,EAA8B,wBAAwBR,MAAS,WAC9D,UAAA,gBAAAI;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,SAASX,MAAS,YAAY,SAAS;AAAA,QACvC,QAAQA,MAAS,YAAY,SAAS;AAAA,QAEtC,4BAACY,GAAgB,EAAA,KAAKnB,EAAYO,CAAI,KAAK,IAAI,UAAAL,GAAoB;AAAA,MAAA;AAAA,IAAA,GAEvE;AAAA,EAAA,GACF;AACF,EAAA,CAAA,CAEH;"}
|
|
@@ -1,46 +1,47 @@
|
|
|
1
|
-
import { jsxs as m, jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { LOTTIE as
|
|
4
|
-
import
|
|
5
|
-
import { STAR_SIZE as
|
|
6
|
-
import { StarContainer as
|
|
7
|
-
const
|
|
8
|
-
loop: !1
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { jsxs as m, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { memo as L, useState as a, useMemo as T, useEffect as u } from "react";
|
|
3
|
+
import { LOTTIE as E } from "../../../../../../assets/lottie/lottie.js";
|
|
4
|
+
import p from "../../../../../ui/lottie-animation/lottie-animation.js";
|
|
5
|
+
import { STAR_SIZE as l } from "./constants.js";
|
|
6
|
+
import { StarContainer as _, LottieContainer as d, Circle as h, Path as w } from "./table-mode-star-styled.js";
|
|
7
|
+
const x = {
|
|
8
|
+
loop: !1,
|
|
9
|
+
renderer: "canvas"
|
|
10
|
+
}, v = L(({ isStarAchieved: t, rewardStar: o }) => {
|
|
11
|
+
const [n, i] = a(!1), [s, c] = a(t && !o), f = T(() => ({
|
|
11
12
|
name: "complete",
|
|
12
13
|
callback: () => {
|
|
13
|
-
|
|
14
|
+
c(!0), i(!1);
|
|
14
15
|
}
|
|
15
16
|
}), []);
|
|
16
|
-
return
|
|
17
|
+
return u(() => {
|
|
17
18
|
let r;
|
|
18
|
-
return
|
|
19
|
-
|
|
19
|
+
return t && o && (r = setTimeout(() => {
|
|
20
|
+
i(!0);
|
|
20
21
|
}, 1e3)), () => {
|
|
21
22
|
r && clearTimeout(r);
|
|
22
23
|
};
|
|
23
|
-
}, [
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
}, [t, o]), /* @__PURE__ */ m(_, { children: [
|
|
25
|
+
n && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
|
|
26
|
+
p,
|
|
26
27
|
{
|
|
27
|
-
src:
|
|
28
|
-
settings:
|
|
29
|
-
eventListener:
|
|
28
|
+
src: E.TABLE_MODE_STAR,
|
|
29
|
+
settings: x,
|
|
30
|
+
eventListener: f
|
|
30
31
|
}
|
|
31
32
|
) }),
|
|
32
|
-
!
|
|
33
|
+
!n && /* @__PURE__ */ m(
|
|
33
34
|
"svg",
|
|
34
35
|
{
|
|
35
36
|
xmlns: "http://www.w3.org/2000/svg",
|
|
36
|
-
width:
|
|
37
|
-
height:
|
|
37
|
+
width: l,
|
|
38
|
+
height: l,
|
|
38
39
|
viewBox: "0 0 16 16",
|
|
39
40
|
fill: "none",
|
|
40
41
|
children: [
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
|
|
42
|
+
/* @__PURE__ */ e(h, { cx: "8", cy: "8", r: "8", $fill: s ? "GREEN_6" : "WHITE_T_15" }),
|
|
43
|
+
/* @__PURE__ */ e(
|
|
44
|
+
w,
|
|
44
45
|
{
|
|
45
46
|
d: "M8 2L6.23664 5.57295L2.29366 6.1459L5.14683 8.92705L4.47329 12.8541L8 11L11.5267 12.8541L10.8532 8.92705L13.7063 6.1459L9.76336 5.57295L8 2Z",
|
|
46
47
|
$fill: s ? "GREEN_4" : "WHITE_T_15"
|
|
@@ -50,8 +51,8 @@ const w = {
|
|
|
50
51
|
}
|
|
51
52
|
)
|
|
52
53
|
] });
|
|
53
|
-
};
|
|
54
|
+
});
|
|
54
55
|
export {
|
|
55
|
-
|
|
56
|
+
v as default
|
|
56
57
|
};
|
|
57
58
|
//# sourceMappingURL=table-mode-star.js.map
|