@cuemath/leap 3.0.7-hg4 → 3.0.7-hg5
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/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.js +40 -24
- 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/leaderboard/comps/banner/banner-styled.js +1 -0
- package/dist/features/circle-games/leaderboard/comps/banner/banner-styled.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/package.json +1 -1
|
@@ -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 { GAME_LAUNCHER_ASSET_PADDING as
|
|
4
|
-
const
|
|
3
|
+
import { GAME_LAUNCHER_ASSET_PADDING as i, delta as p, ASSET_OFFSET_X as r, ASSET_OFFSET_Y as n, ASSET_CONTAINER_SIZE as s } from "./constants.js";
|
|
4
|
+
const h = 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
|
+
`, g = o.div`
|
|
11
|
+
position: relative;
|
|
12
|
+
height: inherit;
|
|
13
|
+
width: inherit;
|
|
14
|
+
border-radius: 50%;
|
|
15
|
+
border: 2px solid #fff;
|
|
16
|
+
`, f = o.div`
|
|
17
|
+
position: absolute;
|
|
18
|
+
height: ${e + i}px;
|
|
19
|
+
width: ${e + i}px;
|
|
20
|
+
border-radius: 50%;
|
|
21
|
+
top: ${-i / 2 - 2}px;
|
|
22
|
+
left: ${-i / 2 - 2}px;
|
|
23
|
+
z-index: 4;
|
|
24
|
+
`, d = o.div`
|
|
11
25
|
height: ${e}px;
|
|
12
26
|
width: ${e}px;
|
|
13
27
|
overflow: hidden;
|
|
@@ -18,17 +32,17 @@ 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
|
+
`, c = o(d)`
|
|
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(d)`
|
|
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
|
+
`, $ = o(d)`
|
|
32
46
|
height: ${e / 2}px;
|
|
33
47
|
width: ${e}px;
|
|
34
48
|
bottom: 0;
|
|
@@ -43,7 +57,7 @@ const g = o.div`
|
|
|
43
57
|
display: flex;
|
|
44
58
|
justify-content: center;
|
|
45
59
|
align-items: center;
|
|
46
|
-
`,
|
|
60
|
+
`, u = o.div`
|
|
47
61
|
flex: 1;
|
|
48
62
|
background: transparent;
|
|
49
63
|
height: ${e / 2 + p}px;
|
|
@@ -73,13 +87,13 @@ const g = o.div`
|
|
|
73
87
|
return "none";
|
|
74
88
|
}
|
|
75
89
|
}};
|
|
76
|
-
`,
|
|
90
|
+
`, w = 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
|
+
`, S = 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
|
+
`, v = o.div`
|
|
108
122
|
position: absolute;
|
|
109
123
|
z-index: 6;
|
|
110
124
|
`;
|
|
111
125
|
export {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
126
|
+
h as CircularProgressLottieContainer,
|
|
127
|
+
v as IconWrapper,
|
|
128
|
+
f as LottieAnmationContainer,
|
|
129
|
+
g as RingContainer,
|
|
130
|
+
w as SegmentAssetContainer,
|
|
131
|
+
$ as SegmentBottom,
|
|
116
132
|
m as SegmentContainer,
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
133
|
+
u as SegmentContentContainer,
|
|
134
|
+
c as SegmentLeft,
|
|
135
|
+
S 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} 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: 2px 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 - 2}px;\n left: ${-GAME_LAUNCHER_ASSET_PADDING / 2 - 2}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","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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner-styled.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner-styled.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nimport { ABSOLUTE_LOTTIE_SIZE, BANNER_HEIGHT } from './constants';\n\nexport const BannerContainer = styled.div<{ topInset?: number }>`\n height: ${({ topInset }) => (topInset || 0) + BANNER_HEIGHT}px;\n width: 100%;\n background: transparent;\n overflow: hidden;\n position: relative; /* Ensure proper positioning for Lottie */\n flex-shrink: 0;\n backdrop-filter: blur(80px);\n user-select: none;\n`;\n\nexport const BannerTextContainer = styled.div`\n flex: 1;\n`;\n\nexport const CountTextWrapper = styled.div<{ topInset?: number }>`\n margin-right: auto;\n margin-top: ${({ topInset }) => (topInset || 0) + 20}px;\n margin-left: 16px;\n`;\n\nexport const SubHeadingTextContainer = styled.div`\n padding: 16px 0 12px 16px;\n width: 100%;\n`;\n\nexport const CircleLottieView = styled.div<{\n topInset: number;\n bgFromTopPosition: number;\n bgFromRightPosition: number;\n}>`\n width: ${ABSOLUTE_LOTTIE_SIZE}px;\n height: ${ABSOLUTE_LOTTIE_SIZE}px;\n position: absolute;\n right: ${({ bgFromRightPosition }) => bgFromRightPosition || -142}px;\n top: ${({ topInset, bgFromTopPosition }) => topInset + (bgFromTopPosition || -155)}px;\n z-index: 1; /* Ensure Lottie is behind text elements if needed */\n pointer-events: none;\n`;\n"],"names":["BannerContainer","styled","topInset","BANNER_HEIGHT","BannerTextContainer","CountTextWrapper","CircleLottieView","ABSOLUTE_LOTTIE_SIZE","bgFromRightPosition","bgFromTopPosition"],"mappings":";;AAIO,MAAMA,IAAkBC,EAAO;AAAA,YAC1B,CAAC,EAAE,UAAAC,EAAgB,OAAAA,KAAY,KAAKC,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhDC,IAAsBH,EAAO;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"banner-styled.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner-styled.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nimport { ABSOLUTE_LOTTIE_SIZE, BANNER_HEIGHT } from './constants';\n\nexport const BannerContainer = styled.div<{ topInset?: number }>`\n height: ${({ topInset }) => (topInset || 0) + BANNER_HEIGHT}px;\n width: 100%;\n background: transparent;\n overflow: hidden;\n position: relative; /* Ensure proper positioning for Lottie */\n flex-shrink: 0;\n backdrop-filter: blur(80px);\n user-select: none;\n`;\n\nexport const BannerTextContainer = styled.div`\n position: relative;\n flex: 1;\n`;\n\nexport const CountTextWrapper = styled.div<{ topInset?: number }>`\n margin-right: auto;\n margin-top: ${({ topInset }) => (topInset || 0) + 20}px;\n margin-left: 16px;\n`;\n\nexport const SubHeadingTextContainer = styled.div`\n padding: 16px 0 12px 16px;\n width: 100%;\n`;\n\nexport const CircleLottieView = styled.div<{\n topInset: number;\n bgFromTopPosition: number;\n bgFromRightPosition: number;\n}>`\n width: ${ABSOLUTE_LOTTIE_SIZE}px;\n height: ${ABSOLUTE_LOTTIE_SIZE}px;\n position: absolute;\n right: ${({ bgFromRightPosition }) => bgFromRightPosition || -142}px;\n top: ${({ topInset, bgFromTopPosition }) => topInset + (bgFromTopPosition || -155)}px;\n z-index: 1; /* Ensure Lottie is behind text elements if needed */\n pointer-events: none;\n`;\n"],"names":["BannerContainer","styled","topInset","BANNER_HEIGHT","BannerTextContainer","CountTextWrapper","CircleLottieView","ABSOLUTE_LOTTIE_SIZE","bgFromRightPosition","bgFromTopPosition"],"mappings":";;AAIO,MAAMA,IAAkBC,EAAO;AAAA,YAC1B,CAAC,EAAE,UAAAC,EAAgB,OAAAA,KAAY,KAAKC,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhDC,IAAsBH,EAAO;AAAA;AAAA;AAAA,GAK7BI,IAAmBJ,EAAO;AAAA;AAAA,gBAEvB,CAAC,EAAE,UAAAC,EAAgB,OAAAA,KAAY,KAAK,EAAE;AAAA;AAAA;AAIfD,EAAO;AAAA;AAAA;AAAA;AAKvC,MAAMK,IAAmBL,EAAO;AAAA,WAK5BM,CAAoB;AAAA,YACnBA,CAAoB;AAAA;AAAA,WAErB,CAAC,EAAE,qBAAAC,EAAoB,MAAMA,KAAuB,IAAI;AAAA,SAC1D,CAAC,EAAE,UAAAN,GAAU,mBAAAO,QAAwBP,KAAYO,KAAqB,KAAK;AAAA;AAAA;AAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"leaderboard-styled.js","sources":["../../../../src/features/circle-games/leaderboard/leaderboard-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ARC_BUTTON_BOTTOM_OFFSET } from '../../ui/arc-button/constants';\nimport FlexView from '../../ui/layout/flex-view';\nimport { BANNER_HEIGHT } from './comps/banner/constants';\n\nexport const Leaderboard = styled.div`\n flex-direction: column;\n overflow: hidden;\n height: 100vh;\n max-height: 100%;\n position: relative;\n`;\n\nexport const LeaderboardContainer = styled.div`\n background: ${({ theme }) => theme.colors.BLACK_1};\n height: 100%;\n position: relative;\n width: 100%;\n`;\n\nexport const BannerWrapper = styled.div`\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 10;\n`;\n\nexport const ItemsWrapper = styled.div`\n background: transparent;\n position: absolute;\n overflow: auto;\n width: 100%;\n flex: 1;\n height: 100%;\n padding-top: ${(window.ReactNativeTopInset || 0) + BANNER_HEIGHT}px;\n padding-bottom: ${ARC_BUTTON_BOTTOM_OFFSET}px;\n`;\n\nexport const TournamentBannerCustContainer = styled.div`\n position: absolute;\n display: flex;\n top:
|
|
1
|
+
{"version":3,"file":"leaderboard-styled.js","sources":["../../../../src/features/circle-games/leaderboard/leaderboard-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ARC_BUTTON_BOTTOM_OFFSET } from '../../ui/arc-button/constants';\nimport FlexView from '../../ui/layout/flex-view';\nimport { BANNER_HEIGHT } from './comps/banner/constants';\n\nexport const Leaderboard = styled.div`\n flex-direction: column;\n overflow: hidden;\n height: 100vh;\n max-height: 100%;\n position: relative;\n`;\n\nexport const LeaderboardContainer = styled.div`\n background: ${({ theme }) => theme.colors.BLACK_1};\n height: 100%;\n position: relative;\n width: 100%;\n`;\n\nexport const BannerWrapper = styled.div`\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 10;\n`;\n\nexport const ItemsWrapper = styled.div`\n background: transparent;\n position: absolute;\n overflow: auto;\n width: 100%;\n flex: 1;\n height: 100%;\n padding-top: ${(window.ReactNativeTopInset || 0) + BANNER_HEIGHT}px;\n padding-bottom: ${ARC_BUTTON_BOTTOM_OFFSET}px;\n`;\n\nexport const TournamentBannerCustContainer = styled.div`\n position: absolute;\n display: flex;\n top: 5px;\n right: -2px;\n width: 200px;\n height: 100%;\n align-items: center;\n justify-content: center;\n`;\n\nexport const ActionButtonWrapper = styled.div`\n position: absolute;\n bottom: 0;\n width: 100%;\n`;\n\nexport const TrophyWrapper = styled.div`\n display: flex;\n justify-content: center;\n width: 150%;\n height: 150%;\n`;\n\nexport const Banner = styled.div`\n background: ${({ theme }) => theme.colors.YELLOW_6};\n min-height: 32px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n`;\n\nexport const InfoContainer = styled(FlexView)`\n padding: 16px;\n`;\n"],"names":["Leaderboard","styled","LeaderboardContainer","theme","BannerWrapper","ItemsWrapper","BANNER_HEIGHT","ARC_BUTTON_BOTTOM_OFFSET","TournamentBannerCustContainer","ActionButtonWrapper","TrophyWrapper","Banner","FlexView"],"mappings":";;;;AAMO,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQrBC,IAAuBD,EAAO;AAAA,gBAC3B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,GAMtCC,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOvBI,IAAeJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOjB,OAAO,uBAAuB,KAAKK,CAAa;AAAA,oBAC9CC,CAAwB;AAAA,GAG/BC,IAAgCP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWvCQ,IAAsBR,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BS,IAAgBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOvBU,IAASV,EAAO;AAAA,gBACb,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvBF,EAAOW,CAAQ;AAAA;AAAA;"}
|