@cuemath/leap 3.0.10-hg1 → 3.0.10-hg3
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/leaderboard/leaderboard-styled.js +1 -1
- package/dist/features/circle-games/leaderboard/leaderboard-styled.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter.js +49 -40
- package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -1
- package/dist/features/ui/animated-arc/animated-arc.js +7 -7
- package/dist/features/ui/animated-arc/animated-arc.js.map +1 -1
- package/dist/features/ui/lottie-animation/lottie-animation.js +30 -36
- package/dist/features/ui/lottie-animation/lottie-animation.js.map +1 -1
- package/dist/index.d.ts +6 -4
- package/package.json +1 -1
|
@@ -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: ${(window.ReactNativeTopInset || 0) + 5}px;\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,UAG1C,OAAO,uBAAuB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjCQ,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;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
1
|
+
import { jsxs as c, jsx as r, Fragment as k } from "react/jsx-runtime";
|
|
2
|
+
import U, { memo as Y, useState as B, useCallback as K, useEffect as P } from "react";
|
|
3
3
|
import { LOTTIE as j } from "../../../assets/lottie/lottie.js";
|
|
4
|
-
import { GAME_LAUNCHER_SIZE as
|
|
4
|
+
import { GAME_LAUNCHER_SIZE as o, GAME_LAUNCHER_SIZE_LARGE as d } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
|
5
5
|
import { useCircleSounds as Z } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
|
|
6
|
-
import { CircleSoundKey as
|
|
6
|
+
import { CircleSoundKey as T } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
|
|
7
7
|
import I from "../../ui/animated-arc/animated-arc.js";
|
|
8
8
|
import $ from "../../ui/layout/flex-view.js";
|
|
9
9
|
import X from "../../ui/lottie-animation/lottie-animation.js";
|
|
@@ -12,34 +12,36 @@ import D from "../../ui/text/text.js";
|
|
|
12
12
|
import { NumberCountAnimation as q } from "../number-count-animation/number-count-animation.js";
|
|
13
13
|
import { TARGET_ACHIEVED_DELAY as G, TOTAL_ARC_AVAILABLE as h, STROKE_WIDTH as C, ARC_RADIUS as L, ANIMATED_ARC_START_ANGLE as p, PROGRESS_FILL_DURATION as f, PROGRESS_FILL_DELAY as b, TOTAL_ANIMATION_DURATION as z } from "./constants.js";
|
|
14
14
|
import { DigitalMeter as J, ContentContainer as Q, NumberCountContainer as v, RainboxColorText as N, LineMarking as M, MarkingContainer as H, MarkingText as u, BottomAbsoluteView as O, HelperTextPrimary as x, HelperTextSecondary as V } from "./digital-meter-styled.js";
|
|
15
|
-
const
|
|
15
|
+
const rr = {
|
|
16
|
+
renderer: "canvas"
|
|
17
|
+
}, _r = Y(
|
|
16
18
|
({
|
|
17
19
|
show: R,
|
|
18
|
-
value:
|
|
20
|
+
value: a,
|
|
19
21
|
maxValue: n,
|
|
20
22
|
targetValue: t = 0,
|
|
21
23
|
displayText: F,
|
|
22
|
-
progressType:
|
|
24
|
+
progressType: m,
|
|
23
25
|
helperTextPrimary: W,
|
|
24
|
-
helperTextSecondary:
|
|
26
|
+
helperTextSecondary: w,
|
|
25
27
|
onComplete: S,
|
|
26
|
-
actAsTimer:
|
|
28
|
+
actAsTimer: s
|
|
27
29
|
}) => {
|
|
28
|
-
const [l,
|
|
29
|
-
(i) => t ?
|
|
30
|
-
[t,
|
|
30
|
+
const [l, y] = B(!1), { play: E } = Z(), _ = K(
|
|
31
|
+
(i) => t ? s ? i <= t : i >= t : !1,
|
|
32
|
+
[t, s]
|
|
31
33
|
);
|
|
32
34
|
return P(() => {
|
|
33
35
|
let i, e;
|
|
34
|
-
const A = _(
|
|
35
|
-
return R && (E(
|
|
36
|
-
E(
|
|
36
|
+
const A = _(a);
|
|
37
|
+
return R && (E(s ? T.TIME_INTRO : T.ACCURACY_INTRO), E(T.METER_FILL), A && (i = setTimeout(() => {
|
|
38
|
+
E(s ? T.TIME_TARGET : T.ACCURACY_TARGET), y(!0);
|
|
37
39
|
}, G * 1e3)), e = setTimeout(() => {
|
|
38
40
|
S();
|
|
39
41
|
}, (A ? z : G) * 1e3)), () => {
|
|
40
42
|
i && clearTimeout(i), e && clearTimeout(e);
|
|
41
43
|
};
|
|
42
|
-
}, [R,
|
|
44
|
+
}, [R, a, S, _, s, E]), R ? /* @__PURE__ */ c(J, { $isTargetAchieved: l, children: [
|
|
43
45
|
/* @__PURE__ */ r(
|
|
44
46
|
I,
|
|
45
47
|
{
|
|
@@ -51,29 +53,29 @@ const Er = Y(
|
|
|
51
53
|
startAngle: -p
|
|
52
54
|
}
|
|
53
55
|
),
|
|
54
|
-
/* @__PURE__ */ r(Q, { children: /* @__PURE__ */
|
|
55
|
-
/* @__PURE__ */
|
|
56
|
+
/* @__PURE__ */ r(Q, { children: /* @__PURE__ */ c($, { $flexDirection: "column", $alignItems: "center", children: [
|
|
57
|
+
/* @__PURE__ */ c($, { $flexDirection: "row", $alignItems: "flex-end", children: [
|
|
56
58
|
/* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(
|
|
57
59
|
N,
|
|
58
60
|
{
|
|
59
|
-
$renderAs:
|
|
61
|
+
$renderAs: o === d ? "ah1" : "ah2",
|
|
60
62
|
$color: "GREEN_4",
|
|
61
63
|
$isTargetAchieved: l,
|
|
62
64
|
children: /* @__PURE__ */ r(
|
|
63
65
|
q,
|
|
64
66
|
{
|
|
65
67
|
initialValue: 0,
|
|
66
|
-
targetValue: Math.floor(
|
|
68
|
+
targetValue: Math.floor(a),
|
|
67
69
|
durationInSec: f,
|
|
68
70
|
delayInSec: b
|
|
69
71
|
}
|
|
70
72
|
)
|
|
71
73
|
}
|
|
72
74
|
) }),
|
|
73
|
-
|
|
75
|
+
m === "stepper" && /* @__PURE__ */ c(
|
|
74
76
|
D,
|
|
75
77
|
{
|
|
76
|
-
$renderAs:
|
|
78
|
+
$renderAs: o === d ? "ah4" : "ab1",
|
|
77
79
|
$color: "WHITE",
|
|
78
80
|
children: [
|
|
79
81
|
"/",
|
|
@@ -86,13 +88,13 @@ const Er = Y(
|
|
|
86
88
|
/* @__PURE__ */ r(
|
|
87
89
|
D,
|
|
88
90
|
{
|
|
89
|
-
$renderAs:
|
|
91
|
+
$renderAs: o === d ? "ac3-black" : "ac4-black",
|
|
90
92
|
$color: "WHITE_T_60",
|
|
91
93
|
children: F
|
|
92
94
|
}
|
|
93
95
|
)
|
|
94
96
|
] }) }),
|
|
95
|
-
|
|
97
|
+
m === "stepper" && Array.from({ length: a }, (i, e) => {
|
|
96
98
|
const A = h / n;
|
|
97
99
|
return /* @__PURE__ */ r(
|
|
98
100
|
I,
|
|
@@ -110,14 +112,14 @@ const Er = Y(
|
|
|
110
112
|
e
|
|
111
113
|
);
|
|
112
114
|
}),
|
|
113
|
-
|
|
115
|
+
m === "stepper" && Array.from({ length: n + 1 }, (i, e) => {
|
|
114
116
|
const A = h / n;
|
|
115
|
-
return /* @__PURE__ */
|
|
117
|
+
return /* @__PURE__ */ c(U.Fragment, { children: [
|
|
116
118
|
/* @__PURE__ */ r(M, { $angle: A * e }),
|
|
117
119
|
/* @__PURE__ */ r(H, { $angle: A * e, children: /* @__PURE__ */ r(u, { $angle: A * e, children: /* @__PURE__ */ r(
|
|
118
120
|
N,
|
|
119
121
|
{
|
|
120
|
-
$renderAs:
|
|
122
|
+
$renderAs: o === d ? "ac3-black" : "ac4-black",
|
|
121
123
|
$color: t && t === e ? "GREEN_4" : "WHITE_T_60",
|
|
122
124
|
$isTargetAchieved: t === e && _(e) && l,
|
|
123
125
|
children: e
|
|
@@ -125,11 +127,11 @@ const Er = Y(
|
|
|
125
127
|
) }) }, e)
|
|
126
128
|
] }, e);
|
|
127
129
|
}),
|
|
128
|
-
|
|
130
|
+
m === "linear" && /* @__PURE__ */ c(k, { children: [
|
|
129
131
|
/* @__PURE__ */ r(
|
|
130
132
|
I,
|
|
131
133
|
{
|
|
132
|
-
targetAngle:
|
|
134
|
+
targetAngle: a * h / n,
|
|
133
135
|
strokeWidth: C,
|
|
134
136
|
color: "GREEN_4",
|
|
135
137
|
radius: L,
|
|
@@ -139,7 +141,7 @@ const Er = Y(
|
|
|
139
141
|
startAngle: -p
|
|
140
142
|
}
|
|
141
143
|
),
|
|
142
|
-
/* @__PURE__ */
|
|
144
|
+
/* @__PURE__ */ c(k, { children: [
|
|
143
145
|
t && /* @__PURE__ */ r(M, { $angle: t * h / n }),
|
|
144
146
|
Array.from(/* @__PURE__ */ new Set([0, t, n])).map((i, e) => /* @__PURE__ */ r(
|
|
145
147
|
H,
|
|
@@ -148,7 +150,7 @@ const Er = Y(
|
|
|
148
150
|
children: /* @__PURE__ */ r(u, { $angle: i * h / n, children: /* @__PURE__ */ r(
|
|
149
151
|
N,
|
|
150
152
|
{
|
|
151
|
-
$renderAs:
|
|
153
|
+
$renderAs: o === d ? "ac3-black" : "ac4-black",
|
|
152
154
|
$color: t && t === i ? "GREEN_4" : "WHITE_T_60",
|
|
153
155
|
$isTargetAchieved: t === i && l && _(i),
|
|
154
156
|
children: i
|
|
@@ -159,27 +161,34 @@ const Er = Y(
|
|
|
159
161
|
))
|
|
160
162
|
] })
|
|
161
163
|
] }),
|
|
162
|
-
l && /* @__PURE__ */ r(O, { top:
|
|
163
|
-
|
|
164
|
+
l && /* @__PURE__ */ r(O, { top: o, children: /* @__PURE__ */ r(
|
|
165
|
+
X,
|
|
166
|
+
{
|
|
167
|
+
src: j.TARGET_ACHIEVED_TEXT,
|
|
168
|
+
settings: rr,
|
|
169
|
+
width: o * 0.6
|
|
170
|
+
}
|
|
171
|
+
) }),
|
|
172
|
+
!l && /* @__PURE__ */ c(O, { top: o, children: [
|
|
164
173
|
/* @__PURE__ */ r(g, { height: 25 }),
|
|
165
|
-
/* @__PURE__ */
|
|
166
|
-
/* @__PURE__ */
|
|
174
|
+
/* @__PURE__ */ c($, { $flexDirection: "column", $alignItems: "center", children: [
|
|
175
|
+
/* @__PURE__ */ c(
|
|
167
176
|
x,
|
|
168
177
|
{
|
|
169
|
-
$renderAs:
|
|
178
|
+
$renderAs: o === d ? "ac3-black" : "ac4-black",
|
|
170
179
|
$color: "WHITE_T_60",
|
|
171
180
|
children: [
|
|
172
181
|
W,
|
|
173
|
-
/* @__PURE__ */ r(g, { height:
|
|
182
|
+
/* @__PURE__ */ r(g, { height: o * 0.03 })
|
|
174
183
|
]
|
|
175
184
|
}
|
|
176
185
|
),
|
|
177
186
|
/* @__PURE__ */ r(
|
|
178
187
|
V,
|
|
179
188
|
{
|
|
180
|
-
$renderAs:
|
|
189
|
+
$renderAs: o === d ? "ah4" : "ab1",
|
|
181
190
|
$color: "WHITE",
|
|
182
|
-
children:
|
|
191
|
+
children: w
|
|
183
192
|
}
|
|
184
193
|
)
|
|
185
194
|
] })
|
|
@@ -188,6 +197,6 @@ const Er = Y(
|
|
|
188
197
|
}
|
|
189
198
|
);
|
|
190
199
|
export {
|
|
191
|
-
|
|
200
|
+
_r as DigitalMeter
|
|
192
201
|
};
|
|
193
202
|
//# sourceMappingURL=digital-meter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"digital-meter.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter.tsx"],"sourcesContent":["import type { IDigitalMeterProps } from './digital-meter-types';\nimport type { FC } from 'react';\n\nimport React, { memo, useCallback, useEffect, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport AnimatedArc from '../../ui/animated-arc/animated-arc';\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 { NumberCountAnimation } from '../number-count-animation/number-count-animation';\nimport {\n ANIMATED_ARC_START_ANGLE,\n ARC_RADIUS,\n PROGRESS_FILL_DELAY,\n PROGRESS_FILL_DURATION,\n STROKE_WIDTH,\n TARGET_ACHIEVED_DELAY,\n TOTAL_ANIMATION_DURATION,\n TOTAL_ARC_AVAILABLE,\n} from './constants';\nimport * as Styled from './digital-meter-styled';\n\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n ({\n show,\n value,\n maxValue,\n targetValue = 0,\n displayText,\n progressType,\n helperTextPrimary,\n helperTextSecondary,\n onComplete,\n actAsTimer,\n }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n const { play } = useCircleSounds();\n\n const isTargetValueAchieved = useCallback(\n (valueToCompare: number) => {\n if (targetValue) {\n if (actAsTimer) {\n return valueToCompare <= targetValue;\n }\n\n return valueToCompare >= targetValue;\n }\n\n return false;\n },\n [targetValue, actAsTimer],\n );\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n const isTargetAchievedFlag = isTargetValueAchieved(value);\n\n if (show) {\n play(actAsTimer ? CircleSoundKey.TIME_INTRO : CircleSoundKey.ACCURACY_INTRO);\n play(CircleSoundKey.METER_FILL);\n if (isTargetAchievedFlag) {\n timer = setTimeout(() => {\n play(actAsTimer ? CircleSoundKey.TIME_TARGET : CircleSoundKey.ACCURACY_TARGET);\n setIsTargetAchieved(true);\n }, TARGET_ACHIEVED_DELAY * 1000);\n }\n\n const timeToFinishAnimation = isTargetAchievedFlag\n ? TOTAL_ANIMATION_DURATION\n : TARGET_ACHIEVED_DELAY;\n\n timerForAnimationComplete = setTimeout(() => {\n onComplete();\n }, timeToFinishAnimation * 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n };\n }, [show, value, onComplete, isTargetValueAchieved, actAsTimer, play]);\n\n if (!show) return null;\n\n return (\n <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n {/* complete arc area to be filled */}\n <AnimatedArc\n targetAngle={TOTAL_ARC_AVAILABLE}\n strokeWidth={STROKE_WIDTH}\n color=\"BLACK_5\"\n radius={ARC_RADIUS}\n duration={0}\n startAngle={-ANIMATED_ARC_START_ANGLE}\n />\n\n {/* center area for the content */}\n <Styled.ContentContainer>\n <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n <FlexView $flexDirection=\"row\" $alignItems=\"flex-end\">\n <Styled.NumberCountContainer>\n <Styled.RainboxColorText\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah1' : 'ah2'}\n $color=\"GREEN_4\"\n $isTargetAchieved={isTargetAchieved}\n >\n <NumberCountAnimation\n initialValue={0}\n targetValue={Math.floor(value)}\n durationInSec={PROGRESS_FILL_DURATION}\n delayInSec={PROGRESS_FILL_DELAY}\n />\n </Styled.RainboxColorText>\n </Styled.NumberCountContainer>\n {progressType === 'stepper' && (\n <Text\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n $color=\"WHITE\"\n >\n /{maxValue}\n </Text>\n )}\n </FlexView>\n <Separator height={8} />\n <Text\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color=\"WHITE_T_60\"\n >\n {displayText}\n </Text>\n </FlexView>\n </Styled.ContentContainer>\n\n {/* stepper animation */}\n {progressType === 'stepper' &&\n Array.from({ length: value }, (_, index) => {\n const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n return (\n <AnimatedArc\n key={index}\n startAngle={-ANIMATED_ARC_START_ANGLE + arcLength * index}\n targetAngle={arcLength}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\n mode=\"fade\"\n duration={PROGRESS_FILL_DURATION / maxValue}\n delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n showAnimatedRainbowArc={isTargetAchieved}\n />\n );\n })}\n\n {/* numbers with markings */}\n {progressType === 'stepper' &&\n Array.from({ length: maxValue + 1 }, (_, index) => {\n const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n return (\n <React.Fragment key={index}>\n <Styled.LineMarking $angle={arcLength * index} />\n <Styled.MarkingContainer key={index} $angle={arcLength * index}>\n <Styled.MarkingText $angle={arcLength * index}>\n <Styled.RainboxColorText\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === index ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === index && isTargetValueAchieved(index) && isTargetAchieved\n }\n >\n {index}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n </React.Fragment>\n );\n })}\n\n {/* progress of linear */}\n {progressType === 'linear' && (\n <>\n <AnimatedArc\n targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\n duration={PROGRESS_FILL_DURATION}\n delay={PROGRESS_FILL_DELAY}\n showAnimatedRainbowArc={isTargetAchieved}\n startAngle={-ANIMATED_ARC_START_ANGLE}\n />\n <>\n {/* target line marking */}\n {targetValue && (\n <Styled.LineMarking $angle={(targetValue * TOTAL_ARC_AVAILABLE) / maxValue} />\n )}\n\n {/* all markings */}\n {Array.from(new Set([0, targetValue, maxValue])).map((val, index) => (\n <Styled.MarkingContainer\n key={index}\n $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}\n >\n <Styled.MarkingText $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}>\n <Styled.RainboxColorText\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === val ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === val && isTargetAchieved && isTargetValueAchieved(val)\n }\n >\n {val}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n ))}\n </>\n </>\n )}\n\n {/* helper text below the animation */}\n {isTargetAchieved && (\n <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n <LottieAnimation src={LOTTIE.TARGET_ACHIEVED_TEXT} />\n </Styled.BottomAbsoluteView>\n )}\n {!isTargetAchieved && (\n <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n <Separator height={25} />\n <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n <Styled.HelperTextPrimary\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color=\"WHITE_T_60\"\n >\n {helperTextPrimary}\n <Separator height={GAME_LAUNCHER_SIZE * 0.03} />\n </Styled.HelperTextPrimary>\n <Styled.HelperTextSecondary\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n $color=\"WHITE\"\n >\n {helperTextSecondary}\n </Styled.HelperTextSecondary>\n </FlexView>\n </Styled.BottomAbsoluteView>\n )}\n </Styled.DigitalMeter>\n );\n },\n);\n"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","actAsTimer","isTargetAchieved","setIsTargetAchieved","useState","play","useCircleSounds","isTargetValueAchieved","useCallback","valueToCompare","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","CircleSoundKey","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","STROKE_WIDTH","ARC_RADIUS","ANIMATED_ARC_START_ANGLE","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","React","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","Fragment","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"digital-meter.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter.tsx"],"sourcesContent":["import type { IDigitalMeterProps } from './digital-meter-types';\nimport type { FC } from 'react';\n\nimport React, { memo, useCallback, useEffect, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport AnimatedArc from '../../ui/animated-arc/animated-arc';\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 { NumberCountAnimation } from '../number-count-animation/number-count-animation';\nimport {\n ANIMATED_ARC_START_ANGLE,\n ARC_RADIUS,\n PROGRESS_FILL_DELAY,\n PROGRESS_FILL_DURATION,\n STROKE_WIDTH,\n TARGET_ACHIEVED_DELAY,\n TOTAL_ANIMATION_DURATION,\n TOTAL_ARC_AVAILABLE,\n} from './constants';\nimport * as Styled from './digital-meter-styled';\n\nconst settings = {\n renderer: 'canvas',\n};\n\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n ({\n show,\n value,\n maxValue,\n targetValue = 0,\n displayText,\n progressType,\n helperTextPrimary,\n helperTextSecondary,\n onComplete,\n actAsTimer,\n }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n const { play } = useCircleSounds();\n\n const isTargetValueAchieved = useCallback(\n (valueToCompare: number) => {\n if (targetValue) {\n if (actAsTimer) {\n return valueToCompare <= targetValue;\n }\n\n return valueToCompare >= targetValue;\n }\n\n return false;\n },\n [targetValue, actAsTimer],\n );\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n const isTargetAchievedFlag = isTargetValueAchieved(value);\n\n if (show) {\n play(actAsTimer ? CircleSoundKey.TIME_INTRO : CircleSoundKey.ACCURACY_INTRO);\n play(CircleSoundKey.METER_FILL);\n if (isTargetAchievedFlag) {\n timer = setTimeout(() => {\n play(actAsTimer ? CircleSoundKey.TIME_TARGET : CircleSoundKey.ACCURACY_TARGET);\n setIsTargetAchieved(true);\n }, TARGET_ACHIEVED_DELAY * 1000);\n }\n\n const timeToFinishAnimation = isTargetAchievedFlag\n ? TOTAL_ANIMATION_DURATION\n : TARGET_ACHIEVED_DELAY;\n\n timerForAnimationComplete = setTimeout(() => {\n onComplete();\n }, timeToFinishAnimation * 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n };\n }, [show, value, onComplete, isTargetValueAchieved, actAsTimer, play]);\n\n if (!show) return null;\n\n return (\n <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n {/* complete arc area to be filled */}\n <AnimatedArc\n targetAngle={TOTAL_ARC_AVAILABLE}\n strokeWidth={STROKE_WIDTH}\n color=\"BLACK_5\"\n radius={ARC_RADIUS}\n duration={0}\n startAngle={-ANIMATED_ARC_START_ANGLE}\n />\n\n {/* center area for the content */}\n <Styled.ContentContainer>\n <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n <FlexView $flexDirection=\"row\" $alignItems=\"flex-end\">\n <Styled.NumberCountContainer>\n <Styled.RainboxColorText\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah1' : 'ah2'}\n $color=\"GREEN_4\"\n $isTargetAchieved={isTargetAchieved}\n >\n <NumberCountAnimation\n initialValue={0}\n targetValue={Math.floor(value)}\n durationInSec={PROGRESS_FILL_DURATION}\n delayInSec={PROGRESS_FILL_DELAY}\n />\n </Styled.RainboxColorText>\n </Styled.NumberCountContainer>\n {progressType === 'stepper' && (\n <Text\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n $color=\"WHITE\"\n >\n /{maxValue}\n </Text>\n )}\n </FlexView>\n <Separator height={8} />\n <Text\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color=\"WHITE_T_60\"\n >\n {displayText}\n </Text>\n </FlexView>\n </Styled.ContentContainer>\n\n {/* stepper animation */}\n {progressType === 'stepper' &&\n Array.from({ length: value }, (_, index) => {\n const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n return (\n <AnimatedArc\n key={index}\n startAngle={-ANIMATED_ARC_START_ANGLE + arcLength * index}\n targetAngle={arcLength}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\n mode=\"fade\"\n duration={PROGRESS_FILL_DURATION / maxValue}\n delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n showAnimatedRainbowArc={isTargetAchieved}\n />\n );\n })}\n\n {/* numbers with markings */}\n {progressType === 'stepper' &&\n Array.from({ length: maxValue + 1 }, (_, index) => {\n const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n return (\n <React.Fragment key={index}>\n <Styled.LineMarking $angle={arcLength * index} />\n <Styled.MarkingContainer key={index} $angle={arcLength * index}>\n <Styled.MarkingText $angle={arcLength * index}>\n <Styled.RainboxColorText\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === index ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === index && isTargetValueAchieved(index) && isTargetAchieved\n }\n >\n {index}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n </React.Fragment>\n );\n })}\n\n {/* progress of linear */}\n {progressType === 'linear' && (\n <>\n <AnimatedArc\n targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\n duration={PROGRESS_FILL_DURATION}\n delay={PROGRESS_FILL_DELAY}\n showAnimatedRainbowArc={isTargetAchieved}\n startAngle={-ANIMATED_ARC_START_ANGLE}\n />\n <>\n {/* target line marking */}\n {targetValue && (\n <Styled.LineMarking $angle={(targetValue * TOTAL_ARC_AVAILABLE) / maxValue} />\n )}\n\n {/* all markings */}\n {Array.from(new Set([0, targetValue, maxValue])).map((val, index) => (\n <Styled.MarkingContainer\n key={index}\n $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}\n >\n <Styled.MarkingText $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}>\n <Styled.RainboxColorText\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === val ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === val && isTargetAchieved && isTargetValueAchieved(val)\n }\n >\n {val}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n ))}\n </>\n </>\n )}\n\n {/* helper text below the animation */}\n {isTargetAchieved && (\n <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n <LottieAnimation\n src={LOTTIE.TARGET_ACHIEVED_TEXT}\n settings={settings}\n width={GAME_LAUNCHER_SIZE * 0.6}\n />\n </Styled.BottomAbsoluteView>\n )}\n {!isTargetAchieved && (\n <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n <Separator height={25} />\n <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n <Styled.HelperTextPrimary\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color=\"WHITE_T_60\"\n >\n {helperTextPrimary}\n <Separator height={GAME_LAUNCHER_SIZE * 0.03} />\n </Styled.HelperTextPrimary>\n <Styled.HelperTextSecondary\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n $color=\"WHITE\"\n >\n {helperTextSecondary}\n </Styled.HelperTextSecondary>\n </FlexView>\n </Styled.BottomAbsoluteView>\n )}\n </Styled.DigitalMeter>\n );\n },\n);\n"],"names":["settings","DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","actAsTimer","isTargetAchieved","setIsTargetAchieved","useState","play","useCircleSounds","isTargetValueAchieved","useCallback","valueToCompare","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","CircleSoundKey","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","STROKE_WIDTH","ARC_RADIUS","ANIMATED_ARC_START_ANGLE","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","React","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","Fragment","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}
|
|
@@ -8,8 +8,8 @@ const b = ({
|
|
|
8
8
|
color: y,
|
|
9
9
|
targetAngle: a,
|
|
10
10
|
startAngle: c = 0,
|
|
11
|
-
duration:
|
|
12
|
-
mode:
|
|
11
|
+
duration: s = 2,
|
|
12
|
+
mode: o = "draw",
|
|
13
13
|
delay: n = 0,
|
|
14
14
|
showAnimatedRainbowArc: $ = !1
|
|
15
15
|
}) => {
|
|
@@ -20,17 +20,17 @@ const b = ({
|
|
|
20
20
|
return g(() => {
|
|
21
21
|
const t = f.current;
|
|
22
22
|
if (t) {
|
|
23
|
-
if (
|
|
23
|
+
if (o === "draw") {
|
|
24
24
|
const m = t.getTotalLength();
|
|
25
25
|
t.style.strokeDasharray = `${m}`, t.style.strokeDashoffset = `${m}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
|
|
26
|
-
t.style.transition = `stroke-dashoffset ${
|
|
26
|
+
t.style.transition = `stroke-dashoffset ${s}s linear ${n}s`, t.style.strokeDashoffset = "0";
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
|
-
|
|
30
|
-
t.style.transition = `opacity ${
|
|
29
|
+
o === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
|
|
30
|
+
t.style.transition = `opacity ${s}s ease-in-out ${n}s`, t.style.opacity = "1";
|
|
31
31
|
}));
|
|
32
32
|
}
|
|
33
|
-
}, [h,
|
|
33
|
+
}, [h, o, s, n]), /* @__PURE__ */ p(R, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ p(
|
|
34
34
|
k,
|
|
35
35
|
{
|
|
36
36
|
ref: f,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-arc.js","sources":["../../../../src/features/ui/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect, useMemo } from 'react';\n\nimport { describeArc } from './animated-arc-helpers';\nimport * as Styled from './animated-arc-styled';\n\nconst AnimatedArc: React.FC<IAnimatedArcProps> = ({\n radius,\n strokeWidth,\n color,\n targetAngle,\n startAngle = 0,\n duration = 2,\n mode = 'draw',\n delay = 0,\n showAnimatedRainbowArc = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = useMemo(\n () => describeArc(center, center, arcRadius, startAngle, targetAngle),\n [targetAngle, startAngle, arcRadius, center],\n );\n\n useLayoutEffect(() => {\n const path = pathRef.current;\n\n if (!path) return;\n\n if (mode === 'draw') {\n const length = path.getTotalLength();\n\n path.style.strokeDasharray = `${length}`;\n path.style.strokeDashoffset = `${length}`;\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n path.style.strokeDashoffset = '0';\n });\n }\n\n if (mode === 'fade') {\n path.style.opacity = '0';\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `opacity ${duration} ease-in-out ${delay}s`;\n path.style.opacity = '1';\n });\n }\n }, [arcPath, mode, duration, delay]);\n\n return (\n <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n <Styled.Path\n ref={pathRef}\n d={arcPath}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"butt\"\n $showAnimatedRainbowArc={showAnimatedRainbowArc}\n />\n </Styled.Svg>\n );\n};\n\nexport default AnimatedArc;\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","showAnimatedRainbowArc","pathRef","useRef","center","arcRadius","arcPath","useMemo","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path","AnimatedArc$1"],"mappings":";;;;AAOA,MAAMA,IAA2C,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,wBAAAC,IAAyB;AAC3B,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAASX,GACTY,IAAYZ,IAASC,IAAc,GACnCY,IAAUC;AAAA,IACd,MAAMC,EAAYJ,GAAQA,GAAQC,GAAWR,GAAYD,CAAW;AAAA,IACpE,CAACA,GAAaC,GAAYQ,GAAWD,CAAM;AAAA,EAAA;AAG7C,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAAOR,EAAQ;AAErB,QAAKQ,GAEL;AAAA,UAAIX,MAAS,QAAQ;AACb,cAAAY,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBZ,CAAQ,YAAYE,CAAK,KACtEU,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIX,MAAS,WACXW,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,QAAAA,EAAK,MAAM,aAAa,WAAWZ,CAAQ,
|
|
1
|
+
{"version":3,"file":"animated-arc.js","sources":["../../../../src/features/ui/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect, useMemo } from 'react';\n\nimport { describeArc } from './animated-arc-helpers';\nimport * as Styled from './animated-arc-styled';\n\nconst AnimatedArc: React.FC<IAnimatedArcProps> = ({\n radius,\n strokeWidth,\n color,\n targetAngle,\n startAngle = 0,\n duration = 2,\n mode = 'draw',\n delay = 0,\n showAnimatedRainbowArc = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = useMemo(\n () => describeArc(center, center, arcRadius, startAngle, targetAngle),\n [targetAngle, startAngle, arcRadius, center],\n );\n\n useLayoutEffect(() => {\n const path = pathRef.current;\n\n if (!path) return;\n\n if (mode === 'draw') {\n const length = path.getTotalLength();\n\n path.style.strokeDasharray = `${length}`;\n path.style.strokeDashoffset = `${length}`;\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n path.style.strokeDashoffset = '0';\n });\n }\n\n if (mode === 'fade') {\n path.style.opacity = '0';\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;\n path.style.opacity = '1';\n });\n }\n }, [arcPath, mode, duration, delay]);\n\n return (\n <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n <Styled.Path\n ref={pathRef}\n d={arcPath}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"butt\"\n $showAnimatedRainbowArc={showAnimatedRainbowArc}\n />\n </Styled.Svg>\n );\n};\n\nexport default AnimatedArc;\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","showAnimatedRainbowArc","pathRef","useRef","center","arcRadius","arcPath","useMemo","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path","AnimatedArc$1"],"mappings":";;;;AAOA,MAAMA,IAA2C,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,wBAAAC,IAAyB;AAC3B,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAASX,GACTY,IAAYZ,IAASC,IAAc,GACnCY,IAAUC;AAAA,IACd,MAAMC,EAAYJ,GAAQA,GAAQC,GAAWR,GAAYD,CAAW;AAAA,IACpE,CAACA,GAAaC,GAAYQ,GAAWD,CAAM;AAAA,EAAA;AAG7C,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAAOR,EAAQ;AAErB,QAAKQ,GAEL;AAAA,UAAIX,MAAS,QAAQ;AACb,cAAAY,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBZ,CAAQ,YAAYE,CAAK,KACtEU,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIX,MAAS,WACXW,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,QAAAA,EAAK,MAAM,aAAa,WAAWZ,CAAQ,iBAAiBE,CAAK,KACjEU,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACJ,GAASP,GAAMD,GAAUE,CAAK,CAAC,qBAGhCY,GAAA,EAAW,OAAO,IAAInB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAoB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKZ;AAAA,MACL,GAAGI;AAAA,MACH,MAAK;AAAA,MACL,QAAQX;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,yBAAyBO;AAAA,IAAA;AAAA,EAE7B,EAAA,CAAA;AAEJ,GAEAc,IAAevB;"}
|
|
@@ -1,38 +1,32 @@
|
|
|
1
1
|
import { jsx as E } from "react/jsx-runtime";
|
|
2
2
|
import g from "lottie-web";
|
|
3
|
-
import { memo as
|
|
4
|
-
import
|
|
5
|
-
import { fetchLottie as
|
|
6
|
-
const
|
|
3
|
+
import { memo as w, forwardRef as A, useRef as u, useImperativeHandle as b, useEffect as I } from "react";
|
|
4
|
+
import $ from "../layout/flex-view.js";
|
|
5
|
+
import { fetchLottie as x } from "./helper.js";
|
|
6
|
+
const O = A((v, L) => {
|
|
7
7
|
const {
|
|
8
|
-
src:
|
|
8
|
+
src: m,
|
|
9
9
|
width: h = "100%",
|
|
10
|
-
height:
|
|
11
|
-
settings:
|
|
10
|
+
height: y = "100%",
|
|
11
|
+
settings: l,
|
|
12
12
|
eventListener: n,
|
|
13
|
-
onRender:
|
|
14
|
-
animateOnIntersect:
|
|
15
|
-
} = v,
|
|
16
|
-
|
|
17
|
-
...i,
|
|
18
|
-
renderer: window.ReactNativeWebView ? "svg" : (i == null ? void 0 : i.renderer) ?? "svg"
|
|
19
|
-
}),
|
|
20
|
-
[i]
|
|
21
|
-
);
|
|
22
|
-
return $(
|
|
13
|
+
onRender: o,
|
|
14
|
+
animateOnIntersect: c
|
|
15
|
+
} = v, a = u(null), r = u(null), s = u(null);
|
|
16
|
+
return b(
|
|
23
17
|
L,
|
|
24
18
|
() => ({
|
|
25
|
-
playSegments: (t,
|
|
19
|
+
playSegments: (t, i) => {
|
|
26
20
|
var e;
|
|
27
|
-
return (e = r.current) == null ? void 0 : e.playSegments(t,
|
|
21
|
+
return (e = r.current) == null ? void 0 : e.playSegments(t, i);
|
|
28
22
|
},
|
|
29
|
-
addEventListener: (t,
|
|
23
|
+
addEventListener: (t, i) => {
|
|
30
24
|
var e;
|
|
31
|
-
return (e = r.current) == null ? void 0 : e.addEventListener(t,
|
|
25
|
+
return (e = r.current) == null ? void 0 : e.addEventListener(t, i);
|
|
32
26
|
},
|
|
33
|
-
removeEventListener: (t,
|
|
27
|
+
removeEventListener: (t, i) => {
|
|
34
28
|
var e;
|
|
35
|
-
return (e = r.current) == null ? void 0 : e.removeEventListener(t,
|
|
29
|
+
return (e = r.current) == null ? void 0 : e.removeEventListener(t, i);
|
|
36
30
|
},
|
|
37
31
|
play: () => {
|
|
38
32
|
var t;
|
|
@@ -44,35 +38,35 @@ const k = A((v, L) => {
|
|
|
44
38
|
}
|
|
45
39
|
}),
|
|
46
40
|
[]
|
|
47
|
-
),
|
|
41
|
+
), I(() => {
|
|
48
42
|
let t = !1;
|
|
49
43
|
return (async () => {
|
|
50
44
|
try {
|
|
51
|
-
const e = await
|
|
45
|
+
const e = await x(m);
|
|
52
46
|
requestAnimationFrame(() => {
|
|
53
|
-
!
|
|
54
|
-
container:
|
|
47
|
+
!a.current || t || (r.current = g.loadAnimation({
|
|
48
|
+
container: a.current,
|
|
55
49
|
animationData: e,
|
|
56
50
|
loop: !0,
|
|
57
51
|
autoplay: !0,
|
|
58
|
-
...
|
|
59
|
-
}),
|
|
60
|
-
([
|
|
61
|
-
var
|
|
62
|
-
|
|
52
|
+
...l
|
|
53
|
+
}), c && (s.current = new IntersectionObserver(
|
|
54
|
+
([f]) => {
|
|
55
|
+
var d, p;
|
|
56
|
+
f && f.isIntersecting ? (d = r.current) == null || d.play() : (p = r.current) == null || p.pause();
|
|
63
57
|
},
|
|
64
58
|
{ threshold: 0 }
|
|
65
|
-
),
|
|
59
|
+
), s.current.observe(a.current)), o == null || o(), n && r.current.addEventListener(n.name, n.callback));
|
|
66
60
|
});
|
|
67
61
|
} catch (e) {
|
|
68
62
|
throw Error(`Error loading Lottie animation: ${e}`);
|
|
69
63
|
}
|
|
70
64
|
})(), () => {
|
|
71
65
|
var e;
|
|
72
|
-
t = !0, r.current && (n && r.current.removeEventListener(n.name, n.callback),
|
|
66
|
+
t = !0, r.current && (n && r.current.removeEventListener(n.name, n.callback), c && ((e = s.current) == null || e.disconnect()), r.current.destroy());
|
|
73
67
|
};
|
|
74
|
-
}, [
|
|
75
|
-
}), D =
|
|
68
|
+
}, [m, n, o, c, l]), /* @__PURE__ */ E($, { ref: a, $width: h, $height: y });
|
|
69
|
+
}), D = w(O);
|
|
76
70
|
export {
|
|
77
71
|
D as default
|
|
78
72
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment
|
|
1
|
+
{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n const {\n src,\n width = '100%',\n height = '100%',\n settings,\n eventListener,\n onRender,\n animateOnIntersect,\n } = props;\n\n const container = useRef<HTMLDivElement>(null);\n const animationInstance = useRef<AnimationItem | null>(null);\n const intersectionObserver = useRef<IntersectionObserver | null>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n playSegments: (segments: AnimationSegment, forceFlag?: boolean) =>\n animationInstance.current?.playSegments(segments, forceFlag),\n addEventListener: (eventName: string, callback: () => void) =>\n animationInstance.current?.addEventListener(eventName as AnimationEventName, callback),\n removeEventListener: (eventName: string, callback: () => void) =>\n animationInstance.current?.removeEventListener(eventName as AnimationEventName, callback),\n play: () => animationInstance.current?.play(),\n stop: () => animationInstance.current?.stop(),\n }),\n [],\n );\n\n useEffect(() => {\n let destroyed = false;\n\n const loadAnimation = async () => {\n try {\n const animationData = await fetchLottie(src);\n\n // Wait for layout\n // NOTE: Do not remove this as this is needed to fix canvas rendering on first layout.\n requestAnimationFrame(() => {\n if (!container.current || destroyed) return;\n\n animationInstance.current = lottie.loadAnimation({\n container: container.current,\n animationData,\n loop: true,\n autoplay: true,\n ...settings,\n });\n\n if (animateOnIntersect) {\n intersectionObserver.current = new IntersectionObserver(\n ([entry]) => {\n if (entry && entry.isIntersecting) {\n animationInstance.current?.play();\n } else {\n animationInstance.current?.pause();\n }\n },\n { threshold: 0 },\n );\n\n intersectionObserver.current.observe(container.current);\n }\n\n onRender?.();\n if (eventListener) {\n animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n }\n });\n } catch (error) {\n throw Error(`Error loading Lottie animation: ${error}`);\n }\n };\n\n loadAnimation();\n\n return () => {\n destroyed = true;\n if (animationInstance.current) {\n if (eventListener) {\n animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n }\n\n if (animateOnIntersect) {\n intersectionObserver.current?.disconnect();\n }\n animationInstance.current.destroy();\n }\n };\n }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","_a","eventName","callback","useEffect","destroyed","animationData","fetchLottie","lottie","entry","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MACzC;;AAAA,gBAAAC,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,aAAaF,GAAUC;AAAA;AAAA,MACpD,kBAAkB,CAACE,GAAmBC,MACpC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,iBAAiBC,GAAiCC;AAAA;AAAA,MAC/E,qBAAqB,CAACD,GAAmBC,MACvC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,oBAAoBC,GAAiCC;AAAA;AAAA,MAClF,MAAM,MAAM;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,MACvC,MAAM,MAAM;;AAAA,gBAAAA,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,IAAK;AAAA,IAE9C,CAAC;AAAA,EAAA,GAGHG,EAAU,MAAM;AACd,QAAIC,IAAY;AA4CF,YA1CQ,YAAY;AAC5B,UAAA;AACI,cAAAC,IAAgB,MAAMC,EAAYpB,CAAG;AAI3C,8BAAsB,MAAM;AACtB,UAAA,CAACO,EAAU,WAAWW,MAERT,EAAA,UAAUY,EAAO,cAAc;AAAA,YAC/C,WAAWd,EAAU;AAAA,YACrB,eAAAY;AAAA,YACA,MAAM;AAAA,YACN,UAAU;AAAA,YACV,GAAGhB;AAAA,UAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,YACjC,CAAC,CAACY,CAAK,MAAM;;AACP,cAAAA,KAASA,EAAM,kBACjBR,IAAAL,EAAkB,YAAlB,QAAAK,EAA2B,UAE3BS,IAAAd,EAAkB,YAAlB,QAAAc,EAA2B;AAAA,YAE/B;AAAA,YACA,EAAE,WAAW,EAAE;AAAA,UAAA,GAGIb,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAG7CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,QACvF,CACD;AAAA,eACMoB,GAAO;AACR,cAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,MACxD;AAAA,IAAA,MAKK,MAAM;;AACC,MAAAN,IAAA,IACRT,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFQ,IAAAJ,EAAqB,YAArB,QAAAI,EAA8B,eAEhCL,EAAkB,QAAQ;IAC5B;AAAA,EACF,GACC,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDsB,GAAS,EAAA,KAAKlB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcwB,IAAAC,EAAK/B,CAAe;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2925,6 +2925,11 @@ declare interface ITableInfo_2 {
|
|
|
2925
2925
|
stars: ('advance' | 'random' | 'sequence')[];
|
|
2926
2926
|
}
|
|
2927
2927
|
|
|
2928
|
+
declare interface ITableModeState {
|
|
2929
|
+
tableNumber: number;
|
|
2930
|
+
rewardStar?: TTableMode[];
|
|
2931
|
+
}
|
|
2932
|
+
|
|
2928
2933
|
export declare interface ITables {
|
|
2929
2934
|
type: ProjectType;
|
|
2930
2935
|
label: string;
|
|
@@ -2937,10 +2942,7 @@ declare interface ITables_2 {
|
|
|
2937
2942
|
}
|
|
2938
2943
|
|
|
2939
2944
|
export declare interface ITablesData extends ITables {
|
|
2940
|
-
openModesOfTable?:
|
|
2941
|
-
tableNumber: number;
|
|
2942
|
-
rewardStars?: TTableMode[];
|
|
2943
|
-
};
|
|
2945
|
+
openModesOfTable?: ITableModeState;
|
|
2944
2946
|
}
|
|
2945
2947
|
|
|
2946
2948
|
export declare interface ITableWebGameProps extends IBaseWebGameProps {
|