@cuemath/leap 3.0.7-hg3 → 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/game-launcher/comps/tables-card/table-mode/table-mode.js +13 -11
- 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 +20 -19
- 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 +14 -13
- 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 +136 -137
- 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-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,33 +1,35 @@
|
|
|
1
1
|
import { jsxs as n, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { memo as
|
|
2
|
+
import { memo as s } 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 T 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
|
-
},
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
}, A = {
|
|
16
|
+
renderer: "svg"
|
|
17
|
+
}, u = s(({ tableNumber: d, isStarAchieved: m, type: e, rewardStar: l }) => /* @__PURE__ */ n(a, { $alignItems: "center", children: [
|
|
18
|
+
/* @__PURE__ */ r(M, { isStarAchieved: m, rewardStar: l }),
|
|
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: d
|
|
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,7 +39,7 @@ 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(T, { src: h[e] ?? "", overrideSettings: A })
|
|
41
43
|
}
|
|
42
44
|
) })
|
|
43
45
|
] })
|
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,
|
|
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] ?? ''} overrideSettings={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,UAAA,gBAAAI,EAACQ,KAAgB,KAAKnB,EAAYO,CAAI,KAAK,IAAI,kBAAkBL,GAAU;AAAA,MAAA;AAAA,IAAA,GAE/E;AAAA,EAAA,GACF;AACF,EAAA,CAAA,CAEH;"}
|
|
@@ -1,49 +1,50 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as L, useState as
|
|
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
3
|
import { LOTTIE as E } from "../../../../../../assets/lottie/lottie.js";
|
|
4
4
|
import p from "../../../../../ui/lottie-animation/lottie-animation.js";
|
|
5
|
-
import { STAR_SIZE as
|
|
5
|
+
import { STAR_SIZE as l } from "./constants.js";
|
|
6
6
|
import { StarContainer as _, LottieContainer as d, Circle as h, Path as w } from "./table-mode-star-styled.js";
|
|
7
7
|
const x = {
|
|
8
|
-
loop: !1
|
|
9
|
-
|
|
10
|
-
|
|
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
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
|
-
|
|
24
|
+
}, [t, o]), /* @__PURE__ */ m(_, { children: [
|
|
25
|
+
n && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
|
|
25
26
|
p,
|
|
26
27
|
{
|
|
27
28
|
src: E.TABLE_MODE_STAR,
|
|
28
29
|
settings: x,
|
|
29
|
-
eventListener:
|
|
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__ */
|
|
42
|
+
/* @__PURE__ */ e(h, { cx: "8", cy: "8", r: "8", $fill: s ? "GREEN_6" : "WHITE_T_15" }),
|
|
43
|
+
/* @__PURE__ */ e(
|
|
43
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
|
-
$fill:
|
|
47
|
+
$fill: s ? "GREEN_4" : "WHITE_T_15"
|
|
47
48
|
}
|
|
48
49
|
)
|
|
49
50
|
]
|
|
@@ -52,6 +53,6 @@ const x = {
|
|
|
52
53
|
] });
|
|
53
54
|
});
|
|
54
55
|
export {
|
|
55
|
-
|
|
56
|
+
v as default
|
|
56
57
|
};
|
|
57
58
|
//# sourceMappingURL=table-mode-star.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-mode-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.tsx"],"sourcesContent":["import type { ITableModeStarProps } from './table-mode-star-types';\nimport type { AnimationEventName } from 'lottie-web';\n\nimport React, { memo, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport { STAR_SIZE } from './constants';\nimport * as Styled from './table-mode-star-styled';\n\nconst settings = {\n loop: false,\n};\n\nconst TableModeStar: React.FC<ITableModeStarProps> = memo(({ isStarAchieved, rewardStar }) => {\n const [animateStar, setAnimateStar] = useState(false);\n const [starRewarded, setStarRewarded] = useState(isStarAchieved && !rewardStar);\n\n const onAnimationFinish = useMemo(() => {\n return {\n name: 'complete' as AnimationEventName,\n callback: () => {\n setStarRewarded(true);\n setAnimateStar(false);\n },\n };\n }, []);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n\n if (isStarAchieved && rewardStar) {\n timer = setTimeout(() => {\n setAnimateStar(true);\n }, 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n };\n }, [isStarAchieved, rewardStar]);\n\n return (\n <Styled.StarContainer>\n {animateStar && (\n <Styled.LottieContainer>\n <LottieAnimation\n src={LOTTIE.TABLE_MODE_STAR}\n settings={settings}\n eventListener={onAnimationFinish}\n />\n </Styled.LottieContainer>\n )}\n {!animateStar && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={STAR_SIZE}\n height={STAR_SIZE}\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <Styled.Circle cx=\"8\" cy=\"8\" r=\"8\" $fill={starRewarded ? 'GREEN_6' : 'WHITE_T_15'} />\n <Styled.Path\n 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\"\n $fill={starRewarded ? 'GREEN_4' : 'WHITE_T_15'}\n />\n </svg>\n )}\n </Styled.StarContainer>\n );\n});\n\nexport default TableModeStar;\n"],"names":["settings","TableModeStar","memo","isStarAchieved","rewardStar","animateStar","setAnimateStar","useState","starRewarded","setStarRewarded","onAnimationFinish","useMemo","useEffect","timer","jsxs","Styled.StarContainer","jsx","Styled.LottieContainer","LottieAnimation","LOTTIE","STAR_SIZE","Styled.Circle","Styled.Path"],"mappings":";;;;;;AAUA,MAAMA,IAAW;AAAA,EACf,MAAM;
|
|
1
|
+
{"version":3,"file":"table-mode-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.tsx"],"sourcesContent":["import type { ITableModeStarProps } from './table-mode-star-types';\nimport type { AnimationEventName } from 'lottie-web';\n\nimport React, { memo, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport { STAR_SIZE } from './constants';\nimport * as Styled from './table-mode-star-styled';\n\nconst settings = {\n loop: false,\n renderer: 'canvas',\n};\n\nconst TableModeStar: React.FC<ITableModeStarProps> = memo(({ isStarAchieved, rewardStar }) => {\n const [animateStar, setAnimateStar] = useState(false);\n const [starRewarded, setStarRewarded] = useState(isStarAchieved && !rewardStar);\n\n const onAnimationFinish = useMemo(() => {\n return {\n name: 'complete' as AnimationEventName,\n callback: () => {\n setStarRewarded(true);\n setAnimateStar(false);\n },\n };\n }, []);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n\n if (isStarAchieved && rewardStar) {\n timer = setTimeout(() => {\n setAnimateStar(true);\n }, 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n };\n }, [isStarAchieved, rewardStar]);\n\n return (\n <Styled.StarContainer>\n {animateStar && (\n <Styled.LottieContainer>\n <LottieAnimation\n src={LOTTIE.TABLE_MODE_STAR}\n settings={settings}\n eventListener={onAnimationFinish}\n />\n </Styled.LottieContainer>\n )}\n {!animateStar && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={STAR_SIZE}\n height={STAR_SIZE}\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <Styled.Circle cx=\"8\" cy=\"8\" r=\"8\" $fill={starRewarded ? 'GREEN_6' : 'WHITE_T_15'} />\n <Styled.Path\n 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\"\n $fill={starRewarded ? 'GREEN_4' : 'WHITE_T_15'}\n />\n </svg>\n )}\n </Styled.StarContainer>\n );\n});\n\nexport default TableModeStar;\n"],"names":["settings","TableModeStar","memo","isStarAchieved","rewardStar","animateStar","setAnimateStar","useState","starRewarded","setStarRewarded","onAnimationFinish","useMemo","useEffect","timer","jsxs","Styled.StarContainer","jsx","Styled.LottieContainer","LottieAnimation","LOTTIE","STAR_SIZE","Styled.Circle","Styled.Path"],"mappings":";;;;;;AAUA,MAAMA,IAAW;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAA+CC,EAAK,CAAC,EAAE,gBAAAC,GAAgB,YAAAC,QAAiB;AAC5F,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAcC,CAAe,IAAIF,EAASJ,KAAkB,CAACC,CAAU,GAExEM,IAAoBC,EAAQ,OACzB;AAAA,IACL,MAAM;AAAA,IACN,UAAU,MAAM;AACd,MAAAF,EAAgB,EAAI,GACpBH,EAAe,EAAK;AAAA,IACtB;AAAA,EAAA,IAED,CAAE,CAAA;AAEL,SAAAM,EAAU,MAAM;AACV,QAAAC;AAEJ,WAAIV,KAAkBC,MACpBS,IAAQ,WAAW,MAAM;AACvB,MAAAP,EAAe,EAAI;AAAA,OAClB,GAAI,IAGF,MAAM;AACX,MAAAO,KAAS,aAAaA,CAAK;AAAA,IAAA;AAAA,EAC7B,GACC,CAACV,GAAgBC,CAAU,CAAC,GAG7B,gBAAAU,EAACC,GAAA,EACE,UAAA;AAAA,IACCV,KAAA,gBAAAW,EAACC,GAAA,EACC,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAKC,EAAO;AAAA,QACZ,UAAAnB;AAAA,QACA,eAAeU;AAAA,MAAA;AAAA,IAAA,GAEnB;AAAA,IAED,CAACL,KACA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAOM;AAAA,QACP,QAAQA;AAAA,QACR,SAAQ;AAAA,QACR,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAA,EAAc,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,OAAOb,IAAe,YAAY,aAAc,CAAA;AAAA,UACnF,gBAAAQ;AAAA,YAACM;AAAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,OAAOd,IAAe,YAAY;AAAA,YAAA;AAAA,UACpC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
|
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
import { jsxs as c, jsx as
|
|
2
|
-
import { memo as f, useState as
|
|
1
|
+
import { jsxs as c, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { memo as f, useState as s, useMemo as u, useEffect as T } from "react";
|
|
3
3
|
import { LOTTIE as p } from "../../../../../../assets/lottie/lottie.js";
|
|
4
4
|
import S from "../../../../../ui/lottie-animation/lottie-animation.js";
|
|
5
|
-
import { StarContainer as
|
|
5
|
+
import { StarContainer as d, LottieContainer as E, TableStar as L } from "./table-segment-star-styled.js";
|
|
6
6
|
const A = {
|
|
7
|
-
loop: !1
|
|
7
|
+
loop: !1,
|
|
8
|
+
render: "canvas"
|
|
8
9
|
}, j = f(
|
|
9
|
-
({ isStarAchieved:
|
|
10
|
-
const [n, a] =
|
|
10
|
+
({ isStarAchieved: e, rewardStar: t }) => {
|
|
11
|
+
const [n, a] = s(!1), [i, m] = s(e && !t), l = u(() => ({
|
|
11
12
|
name: "complete",
|
|
12
13
|
callback: () => {
|
|
13
|
-
|
|
14
|
+
m(!0), a(!1);
|
|
14
15
|
}
|
|
15
16
|
}), []);
|
|
16
17
|
return T(() => {
|
|
17
|
-
let
|
|
18
|
-
return
|
|
18
|
+
let r;
|
|
19
|
+
return e && t && (r = setTimeout(() => {
|
|
19
20
|
a(!0);
|
|
20
21
|
}, 1e3)), () => {
|
|
21
|
-
|
|
22
|
+
r && clearTimeout(r);
|
|
22
23
|
};
|
|
23
|
-
}, [
|
|
24
|
-
n && /* @__PURE__ */
|
|
24
|
+
}, [e, t]), /* @__PURE__ */ c(d, { children: [
|
|
25
|
+
n && /* @__PURE__ */ o(E, { children: /* @__PURE__ */ o(
|
|
25
26
|
S,
|
|
26
27
|
{
|
|
27
28
|
src: p.TABLE_SEGMENT_STAR,
|
|
@@ -29,7 +30,7 @@ const A = {
|
|
|
29
30
|
eventListener: l
|
|
30
31
|
}
|
|
31
32
|
) }),
|
|
32
|
-
!n && /* @__PURE__ */
|
|
33
|
+
!n && /* @__PURE__ */ o(L, { $isStarAchieved: i })
|
|
33
34
|
] });
|
|
34
35
|
}
|
|
35
36
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-segment-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.tsx"],"sourcesContent":["import type { ITableSegmentStarProps } from './table-segment-star-types';\nimport type { AnimationEventName } from 'lottie-web';\n\nimport React, { memo, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './table-segment-star-styled';\n\nconst settings = {\n loop: false,\n};\n\nconst TableSegmentStar: React.FC<ITableSegmentStarProps> = memo(\n ({ isStarAchieved, rewardStar }) => {\n const [animateStar, setAnimateStar] = useState(false);\n const [starRewarded, setStarRewarded] = useState(isStarAchieved && !rewardStar);\n\n const onAnimationFinish = useMemo(() => {\n return {\n name: 'complete' as AnimationEventName,\n callback: () => {\n setStarRewarded(true);\n setAnimateStar(false);\n },\n };\n }, []);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n\n if (isStarAchieved && rewardStar) {\n timer = setTimeout(() => {\n setAnimateStar(true);\n }, 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n };\n }, [isStarAchieved, rewardStar]);\n\n return (\n <Styled.StarContainer>\n {animateStar && (\n <Styled.LottieContainer>\n <LottieAnimation\n src={LOTTIE.TABLE_SEGMENT_STAR}\n settings={settings}\n eventListener={onAnimationFinish}\n />\n </Styled.LottieContainer>\n )}\n {!animateStar && <Styled.TableStar $isStarAchieved={starRewarded} />}\n </Styled.StarContainer>\n );\n },\n);\n\nexport default TableSegmentStar;\n"],"names":["settings","TableSegmentStar","memo","isStarAchieved","rewardStar","animateStar","setAnimateStar","useState","starRewarded","setStarRewarded","onAnimationFinish","useMemo","useEffect","timer","jsxs","Styled.StarContainer","jsx","Styled.LottieContainer","LottieAnimation","LOTTIE","Styled.TableStar"],"mappings":";;;;;AASA,MAAMA,IAAW;AAAA,EACf,MAAM;
|
|
1
|
+
{"version":3,"file":"table-segment-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.tsx"],"sourcesContent":["import type { ITableSegmentStarProps } from './table-segment-star-types';\nimport type { AnimationEventName } from 'lottie-web';\n\nimport React, { memo, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './table-segment-star-styled';\n\nconst settings = {\n loop: false,\n render: 'canvas',\n};\n\nconst TableSegmentStar: React.FC<ITableSegmentStarProps> = memo(\n ({ isStarAchieved, rewardStar }) => {\n const [animateStar, setAnimateStar] = useState(false);\n const [starRewarded, setStarRewarded] = useState(isStarAchieved && !rewardStar);\n\n const onAnimationFinish = useMemo(() => {\n return {\n name: 'complete' as AnimationEventName,\n callback: () => {\n setStarRewarded(true);\n setAnimateStar(false);\n },\n };\n }, []);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n\n if (isStarAchieved && rewardStar) {\n timer = setTimeout(() => {\n setAnimateStar(true);\n }, 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n };\n }, [isStarAchieved, rewardStar]);\n\n return (\n <Styled.StarContainer>\n {animateStar && (\n <Styled.LottieContainer>\n <LottieAnimation\n src={LOTTIE.TABLE_SEGMENT_STAR}\n settings={settings}\n eventListener={onAnimationFinish}\n />\n </Styled.LottieContainer>\n )}\n {!animateStar && <Styled.TableStar $isStarAchieved={starRewarded} />}\n </Styled.StarContainer>\n );\n },\n);\n\nexport default TableSegmentStar;\n"],"names":["settings","TableSegmentStar","memo","isStarAchieved","rewardStar","animateStar","setAnimateStar","useState","starRewarded","setStarRewarded","onAnimationFinish","useMemo","useEffect","timer","jsxs","Styled.StarContainer","jsx","Styled.LottieContainer","LottieAnimation","LOTTIE","Styled.TableStar"],"mappings":";;;;;AASA,MAAMA,IAAW;AAAA,EACf,MAAM;AAAA,EACN,QAAQ;AACV,GAEMC,IAAqDC;AAAA,EACzD,CAAC,EAAE,gBAAAC,GAAgB,YAAAC,QAAiB;AAClC,UAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAcC,CAAe,IAAIF,EAASJ,KAAkB,CAACC,CAAU,GAExEM,IAAoBC,EAAQ,OACzB;AAAA,MACL,MAAM;AAAA,MACN,UAAU,MAAM;AACd,QAAAF,EAAgB,EAAI,GACpBH,EAAe,EAAK;AAAA,MACtB;AAAA,IAAA,IAED,CAAE,CAAA;AAEL,WAAAM,EAAU,MAAM;AACV,UAAAC;AAEJ,aAAIV,KAAkBC,MACpBS,IAAQ,WAAW,MAAM;AACvB,QAAAP,EAAe,EAAI;AAAA,SAClB,GAAI,IAGF,MAAM;AACX,QAAAO,KAAS,aAAaA,CAAK;AAAA,MAAA;AAAA,IAC7B,GACC,CAACV,GAAgBC,CAAU,CAAC,GAG7B,gBAAAU,EAACC,GAAA,EACE,UAAA;AAAA,MACCV,KAAA,gBAAAW,EAACC,GAAA,EACC,UAAA,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKC,EAAO;AAAA,UACZ,UAAAnB;AAAA,UACA,eAAeU;AAAA,QAAA;AAAA,MAAA,GAEnB;AAAA,MAED,CAACL,KAAe,gBAAAW,EAACI,GAAA,EAAiB,iBAAiBZ,EAAc,CAAA;AAAA,IACpE,EAAA,CAAA;AAAA,EAEJ;AACF;"}
|