@cuemath/leap 2.9.5-j10 → 2.9.5-j12
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/auth/comps/auth-page-layout/auth-page-layout-styles.js +1 -1
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout-styles.js.map +1 -1
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js +74 -59
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js.map +1 -1
- package/dist/features/auth/signup/custom-input/student-password/student-password.js +1 -1
- package/dist/features/auth/signup/custom-input/student-password/student-password.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/constants.js +10 -9
- package/dist/features/post-game-stats/digital-meter/constants.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +15 -16
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter.js +88 -86
- package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/helper.js +3 -13
- package/dist/features/post-game-stats/digital-meter/helper.js.map +1 -1
- package/dist/features/ui/animated-arc/animated-arc-constants.js +5 -0
- package/dist/features/ui/animated-arc/animated-arc-constants.js.map +1 -0
- package/dist/features/ui/animated-arc/animated-arc-helpers.js +14 -0
- package/dist/features/ui/animated-arc/animated-arc-helpers.js.map +1 -0
- package/dist/features/ui/animated-arc/animated-arc-styled.js +33 -0
- package/dist/features/ui/animated-arc/animated-arc-styled.js.map +1 -0
- package/dist/features/ui/animated-arc/animated-arc.js +49 -0
- package/dist/features/ui/animated-arc/animated-arc.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/node_modules/query-string/base.js +1 -1
- package/dist/node_modules/query-string/node_modules/decode-uri-component/index.js.map +1 -0
- package/dist/node_modules/uuid/dist/esm-browser/regex.js +5 -0
- package/dist/node_modules/uuid/dist/esm-browser/regex.js.map +1 -0
- package/dist/node_modules/uuid/dist/esm-browser/rng.js +2 -3
- package/dist/node_modules/uuid/dist/esm-browser/rng.js.map +1 -1
- package/dist/node_modules/uuid/dist/esm-browser/stringify.js +10 -6
- package/dist/node_modules/uuid/dist/esm-browser/stringify.js.map +1 -1
- package/dist/node_modules/uuid/dist/esm-browser/v4.js +9 -12
- package/dist/node_modules/uuid/dist/esm-browser/v4.js.map +1 -1
- package/dist/node_modules/uuid/dist/esm-browser/validate.js +8 -0
- package/dist/node_modules/uuid/dist/esm-browser/validate.js.map +1 -0
- package/package.json +1 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js +0 -17
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js +0 -50
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js +0 -6
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js.map +0 -1
- package/dist/node_modules/decode-uri-component/index.js.map +0 -1
- package/dist/node_modules/uuid/dist/esm-browser/native.js +0 -7
- package/dist/node_modules/uuid/dist/esm-browser/native.js.map +0 -1
- /package/dist/node_modules/{decode-uri-component → query-string/node_modules/decode-uri-component}/index.js +0 -0
@@ -1,154 +1,156 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import
|
3
|
-
import { LOTTIE as
|
1
|
+
import { jsxs as o, jsx as r, Fragment as k } from "react/jsx-runtime";
|
2
|
+
import w, { memo as Y, useState as B, useCallback as K, useEffect as P } from "react";
|
3
|
+
import { LOTTIE as j } from "../../../assets/lottie/lottie.js";
|
4
4
|
import { GAME_LAUNCHER_SIZE as c, GAME_LAUNCHER_SIZE_LARGE as d } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
5
|
-
import { useCircleSounds as
|
5
|
+
import { useCircleSounds as Z } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
|
6
6
|
import { CircleSoundKey as m } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
|
7
|
-
import
|
8
|
-
import
|
9
|
-
import
|
10
|
-
import
|
11
|
-
import
|
12
|
-
import {
|
13
|
-
import { TARGET_ACHIEVED_DELAY as
|
14
|
-
import { DigitalMeter as
|
15
|
-
const
|
7
|
+
import { AnimatedArc as I } from "../../ui/animated-arc/animated-arc.js";
|
8
|
+
import $ from "../../ui/layout/flex-view.js";
|
9
|
+
import X from "../../ui/lottie-animation/lottie-animation.js";
|
10
|
+
import g from "../../ui/separator/separator.js";
|
11
|
+
import D from "../../ui/text/text.js";
|
12
|
+
import { NumberCountAnimation as q } from "../number-count-animation/number-count-animation.js";
|
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
|
+
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 Er = Y(
|
16
16
|
({
|
17
|
-
show:
|
17
|
+
show: R,
|
18
18
|
value: T,
|
19
|
-
maxValue:
|
20
|
-
targetValue:
|
21
|
-
displayText:
|
19
|
+
maxValue: n,
|
20
|
+
targetValue: t = 0,
|
21
|
+
displayText: F,
|
22
22
|
progressType: s,
|
23
|
-
helperTextPrimary:
|
24
|
-
helperTextSecondary:
|
23
|
+
helperTextPrimary: W,
|
24
|
+
helperTextSecondary: y,
|
25
25
|
onComplete: S,
|
26
26
|
actAsTimer: a
|
27
27
|
}) => {
|
28
|
-
const [
|
29
|
-
(i) =>
|
30
|
-
[
|
28
|
+
const [l, U] = B(!1), { play: E } = Z(), _ = K(
|
29
|
+
(i) => t ? a ? i <= t : i >= t : !1,
|
30
|
+
[t, a]
|
31
31
|
);
|
32
|
-
return
|
32
|
+
return P(() => {
|
33
33
|
let i, e;
|
34
|
-
const
|
35
|
-
return
|
36
|
-
E(a ? m.TIME_TARGET : m.ACCURACY_TARGET),
|
37
|
-
},
|
34
|
+
const A = _(T);
|
35
|
+
return R && (E(a ? m.TIME_INTRO : m.ACCURACY_INTRO), E(m.METER_FILL), A && (i = setTimeout(() => {
|
36
|
+
E(a ? m.TIME_TARGET : m.ACCURACY_TARGET), U(!0);
|
37
|
+
}, G * 1e3)), e = setTimeout(() => {
|
38
38
|
S();
|
39
|
-
}, (
|
39
|
+
}, (A ? z : G) * 1e3)), () => {
|
40
40
|
i && clearTimeout(i), e && clearTimeout(e);
|
41
41
|
};
|
42
|
-
}, [
|
42
|
+
}, [R, T, S, _, a, E]), R ? /* @__PURE__ */ o(J, { $isTargetAchieved: l, children: [
|
43
43
|
/* @__PURE__ */ r(
|
44
|
-
|
44
|
+
I,
|
45
45
|
{
|
46
46
|
targetAngle: h,
|
47
47
|
strokeWidth: C,
|
48
48
|
color: "BLACK_5",
|
49
|
-
radius:
|
50
|
-
duration: 0
|
49
|
+
radius: L,
|
50
|
+
duration: 0,
|
51
|
+
startAngle: -p
|
51
52
|
}
|
52
53
|
),
|
53
|
-
/* @__PURE__ */ r(
|
54
|
-
/* @__PURE__ */
|
55
|
-
/* @__PURE__ */ r(
|
56
|
-
|
54
|
+
/* @__PURE__ */ r(Q, { children: /* @__PURE__ */ o($, { $flexDirection: "column", $alignItems: "center", children: [
|
55
|
+
/* @__PURE__ */ o($, { $flexDirection: "row", $alignItems: "flex-end", children: [
|
56
|
+
/* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(
|
57
|
+
N,
|
57
58
|
{
|
58
59
|
$renderAs: c === d ? "ah1" : "ah2",
|
59
60
|
$color: "GREEN_4",
|
60
|
-
$isTargetAchieved:
|
61
|
+
$isTargetAchieved: l,
|
61
62
|
children: /* @__PURE__ */ r(
|
62
|
-
|
63
|
+
q,
|
63
64
|
{
|
64
65
|
initialValue: 0,
|
65
66
|
targetValue: Math.floor(T),
|
66
67
|
durationInSec: f,
|
67
|
-
delayInSec:
|
68
|
+
delayInSec: b
|
68
69
|
}
|
69
70
|
)
|
70
71
|
}
|
71
72
|
) }),
|
72
|
-
s === "stepper" && /* @__PURE__ */
|
73
|
-
|
73
|
+
s === "stepper" && /* @__PURE__ */ o(
|
74
|
+
D,
|
74
75
|
{
|
75
76
|
$renderAs: c === d ? "ah4" : "ab1",
|
76
77
|
$color: "WHITE",
|
77
78
|
children: [
|
78
79
|
"/",
|
79
|
-
|
80
|
+
n
|
80
81
|
]
|
81
82
|
}
|
82
83
|
)
|
83
84
|
] }),
|
84
|
-
/* @__PURE__ */ r(
|
85
|
+
/* @__PURE__ */ r(g, { height: 8 }),
|
85
86
|
/* @__PURE__ */ r(
|
86
|
-
|
87
|
+
D,
|
87
88
|
{
|
88
89
|
$renderAs: c === d ? "ac3-black" : "ac4-black",
|
89
90
|
$color: "WHITE_T_60",
|
90
|
-
children:
|
91
|
+
children: F
|
91
92
|
}
|
92
93
|
)
|
93
94
|
] }) }),
|
94
95
|
s === "stepper" && Array.from({ length: T }, (i, e) => {
|
95
|
-
const
|
96
|
+
const A = h / n;
|
96
97
|
return /* @__PURE__ */ r(
|
97
|
-
|
98
|
+
I,
|
98
99
|
{
|
99
|
-
startAngle:
|
100
|
-
targetAngle:
|
100
|
+
startAngle: -p + A * e,
|
101
|
+
targetAngle: A,
|
101
102
|
strokeWidth: C,
|
102
103
|
color: "GREEN_4",
|
103
|
-
radius:
|
104
|
+
radius: L,
|
104
105
|
mode: "fade",
|
105
|
-
duration: f /
|
106
|
-
delay:
|
107
|
-
|
106
|
+
duration: f / n,
|
107
|
+
delay: b + f / n * e,
|
108
|
+
showAnimatedRainbowArc: l
|
108
109
|
},
|
109
110
|
e
|
110
111
|
);
|
111
112
|
}),
|
112
|
-
s === "stepper" && Array.from({ length:
|
113
|
-
const
|
114
|
-
return /* @__PURE__ */
|
115
|
-
/* @__PURE__ */ r(
|
116
|
-
/* @__PURE__ */ r(H, { $angle:
|
117
|
-
|
113
|
+
s === "stepper" && Array.from({ length: n + 1 }, (i, e) => {
|
114
|
+
const A = h / n;
|
115
|
+
return /* @__PURE__ */ o(w.Fragment, { children: [
|
116
|
+
/* @__PURE__ */ r(M, { $angle: A * e }),
|
117
|
+
/* @__PURE__ */ r(H, { $angle: A * e, children: /* @__PURE__ */ r(u, { $angle: A * e, children: /* @__PURE__ */ r(
|
118
|
+
N,
|
118
119
|
{
|
119
120
|
$renderAs: c === d ? "ac3-black" : "ac4-black",
|
120
|
-
$color:
|
121
|
-
$isTargetAchieved:
|
121
|
+
$color: t && t === e ? "GREEN_4" : "WHITE_T_60",
|
122
|
+
$isTargetAchieved: t === e && _(e) && l,
|
122
123
|
children: e
|
123
124
|
}
|
124
125
|
) }) }, e)
|
125
126
|
] }, e);
|
126
127
|
}),
|
127
|
-
s === "linear" && /* @__PURE__ */
|
128
|
+
s === "linear" && /* @__PURE__ */ o(k, { children: [
|
128
129
|
/* @__PURE__ */ r(
|
129
|
-
|
130
|
+
I,
|
130
131
|
{
|
131
|
-
targetAngle: T * h /
|
132
|
+
targetAngle: T * h / n,
|
132
133
|
strokeWidth: C,
|
133
134
|
color: "GREEN_4",
|
134
|
-
radius:
|
135
|
+
radius: L,
|
135
136
|
duration: f,
|
136
|
-
delay:
|
137
|
-
|
137
|
+
delay: b,
|
138
|
+
showAnimatedRainbowArc: l,
|
139
|
+
startAngle: -p
|
138
140
|
}
|
139
141
|
),
|
140
|
-
/* @__PURE__ */
|
141
|
-
|
142
|
-
Array.from(/* @__PURE__ */ new Set([0,
|
142
|
+
/* @__PURE__ */ o(k, { children: [
|
143
|
+
t && /* @__PURE__ */ r(M, { $angle: t * h / n }),
|
144
|
+
Array.from(/* @__PURE__ */ new Set([0, t, n])).map((i, e) => /* @__PURE__ */ r(
|
143
145
|
H,
|
144
146
|
{
|
145
|
-
$angle: i * h /
|
146
|
-
children: /* @__PURE__ */ r(
|
147
|
-
|
147
|
+
$angle: i * h / n,
|
148
|
+
children: /* @__PURE__ */ r(u, { $angle: i * h / n, children: /* @__PURE__ */ r(
|
149
|
+
N,
|
148
150
|
{
|
149
151
|
$renderAs: c === d ? "ac3-black" : "ac4-black",
|
150
|
-
$color:
|
151
|
-
$isTargetAchieved:
|
152
|
+
$color: t && t === i ? "GREEN_4" : "WHITE_T_60",
|
153
|
+
$isTargetAchieved: t === i && l && _(i),
|
152
154
|
children: i
|
153
155
|
}
|
154
156
|
) })
|
@@ -157,27 +159,27 @@ const sr = w(
|
|
157
159
|
))
|
158
160
|
] })
|
159
161
|
] }),
|
160
|
-
|
161
|
-
!
|
162
|
-
/* @__PURE__ */ r(
|
163
|
-
/* @__PURE__ */
|
164
|
-
/* @__PURE__ */
|
165
|
-
|
162
|
+
l && /* @__PURE__ */ r(O, { top: c, children: /* @__PURE__ */ r(X, { src: j.TARGET_ACHIEVED_TEXT }) }),
|
163
|
+
!l && /* @__PURE__ */ o(O, { top: c, children: [
|
164
|
+
/* @__PURE__ */ r(g, { height: 25 }),
|
165
|
+
/* @__PURE__ */ o($, { $flexDirection: "column", $alignItems: "center", children: [
|
166
|
+
/* @__PURE__ */ o(
|
167
|
+
x,
|
166
168
|
{
|
167
169
|
$renderAs: c === d ? "ac3-black" : "ac4-black",
|
168
170
|
$color: "WHITE_T_60",
|
169
171
|
children: [
|
170
|
-
|
171
|
-
/* @__PURE__ */ r(
|
172
|
+
W,
|
173
|
+
/* @__PURE__ */ r(g, { height: c * 0.03 })
|
172
174
|
]
|
173
175
|
}
|
174
176
|
),
|
175
177
|
/* @__PURE__ */ r(
|
176
|
-
|
178
|
+
V,
|
177
179
|
{
|
178
180
|
$renderAs: c === d ? "ah4" : "ab1",
|
179
181
|
$color: "WHITE",
|
180
|
-
children:
|
182
|
+
children: y
|
181
183
|
}
|
182
184
|
)
|
183
185
|
] })
|
@@ -186,6 +188,6 @@ const sr = w(
|
|
186
188
|
}
|
187
189
|
);
|
188
190
|
export {
|
189
|
-
|
191
|
+
Er as DigitalMeter
|
190
192
|
};
|
191
193
|
//# 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 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 { AnimatedArc } from './comp/animated-arc/animated-arc';\nimport {\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 />\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={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 playRainbowColors={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 playRainbowColors={isTargetAchieved}\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","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\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,14 +1,5 @@
|
|
1
|
-
import { keyframes as
|
2
|
-
const
|
3
|
-
const t = (n - 90) * (Math.PI / 180);
|
4
|
-
return {
|
5
|
-
x: r + o * Math.cos(t),
|
6
|
-
y: F + o * Math.sin(t)
|
7
|
-
};
|
8
|
-
}, $ = (r, F, o, n, t) => {
|
9
|
-
const e = n + t, s = a(r, F, o, n), c = a(r, F, o, e), l = t > 180 ? 1 : 0;
|
10
|
-
return `M ${s.x} ${s.y} A ${o} ${o} 0 ${l} 1 ${c.x} ${c.y}`;
|
11
|
-
}, k = C`
|
1
|
+
import { keyframes as o } from "styled-components";
|
2
|
+
const r = o`
|
12
3
|
0% {
|
13
4
|
stroke: #FFB700;
|
14
5
|
color: #FFB700;
|
@@ -27,7 +18,6 @@ const a = (r, F, o, n) => {
|
|
27
18
|
}
|
28
19
|
`;
|
29
20
|
export {
|
30
|
-
|
31
|
-
k as rainbowColorAnimation
|
21
|
+
r as rainbowColorAnimation
|
32
22
|
};
|
33
23
|
//# sourceMappingURL=helper.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"helper.js","sources":["../../../../src/features/post-game-stats/digital-meter/helper.ts"],"sourcesContent":["import { keyframes } from 'styled-components';\n\nconst polarToCartesian = (cx: number, cy: number, r: number, angleDeg: number) => {\n const angleRad = (angleDeg - 90) * (Math.PI / 180);\n\n return {\n x: cx + r * Math.cos(angleRad),\n y: cy + r * Math.sin(angleRad),\n };\n};\n\nexport const describeArc = (\n cx: number,\n cy: number,\n r: number,\n startAngle: number,\n sweepAngle: number,\n) => {\n const endAngle = startAngle + sweepAngle;\n const start = polarToCartesian(cx, cy, r, startAngle);\n const end = polarToCartesian(cx, cy, r, endAngle);\n const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n\n return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n};\n\nexport const rainbowColorAnimation = keyframes`\n 0% {\n stroke: #FFB700;\n color: #FFB700;\n }\n 33% {\n stroke: #FF884C;\n color: #FF884C;\n }\n 66% {\n stroke: #FF80F4;\n color: #FF80F4;\n }\n 100% {\n stroke: #33CCFF;\n color: #33CCFF;\n }\n`;\n"],"names":["
|
1
|
+
{"version":3,"file":"helper.js","sources":["../../../../src/features/post-game-stats/digital-meter/helper.ts"],"sourcesContent":["import { keyframes } from 'styled-components';\n\nconst polarToCartesian = (cx: number, cy: number, r: number, angleDeg: number) => {\n const angleRad = (angleDeg - 90) * (Math.PI / 180);\n\n return {\n x: cx + r * Math.cos(angleRad),\n y: cy + r * Math.sin(angleRad),\n };\n};\n\nexport const describeArc = (\n cx: number,\n cy: number,\n r: number,\n startAngle: number,\n sweepAngle: number,\n) => {\n const endAngle = startAngle + sweepAngle;\n const start = polarToCartesian(cx, cy, r, startAngle);\n const end = polarToCartesian(cx, cy, r, endAngle);\n const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n\n return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n};\n\nexport const rainbowColorAnimation = keyframes`\n 0% {\n stroke: #FFB700;\n color: #FFB700;\n }\n 33% {\n stroke: #FF884C;\n color: #FF884C;\n }\n 66% {\n stroke: #FF80F4;\n color: #FF80F4;\n }\n 100% {\n stroke: #33CCFF;\n color: #33CCFF;\n }\n`;\n"],"names":["rainbowColorAnimation","keyframes"],"mappings":";AA0BO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"animated-arc-constants.js","sources":["../../../../src/features/ui/animated-arc/animated-arc-constants.ts"],"sourcesContent":["export const RAINBOW_COLOR_ANIMATION_DURATION = 43 / 30; // 43 frames;\n"],"names":["RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":"AAAO,MAAMA,IAAmC;"}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
const r = (o, a, t, s) => {
|
2
|
+
const n = (s - 90) * (Math.PI / 180);
|
3
|
+
return {
|
4
|
+
x: o + t * Math.cos(n),
|
5
|
+
y: a + t * Math.sin(n)
|
6
|
+
};
|
7
|
+
}, M = (o, a, t, s, n) => {
|
8
|
+
const $ = s + n, c = r(o, a, t, s), e = r(o, a, t, $), d = n > 180 ? 1 : 0;
|
9
|
+
return `M ${c.x} ${c.y} A ${t} ${t} 0 ${d} 1 ${e.x} ${e.y}`;
|
10
|
+
};
|
11
|
+
export {
|
12
|
+
M as describeArc
|
13
|
+
};
|
14
|
+
//# sourceMappingURL=animated-arc-helpers.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"animated-arc-helpers.js","sources":["../../../../src/features/ui/animated-arc/animated-arc-helpers.ts"],"sourcesContent":["const polarToCartesian = (cx: number, cy: number, r: number, angleDeg: number) => {\n const angleRad = (angleDeg - 90) * (Math.PI / 180);\n\n return {\n x: cx + r * Math.cos(angleRad),\n y: cy + r * Math.sin(angleRad),\n };\n};\n\nexport const describeArc = (\n cx: number,\n cy: number,\n r: number,\n startAngle: number,\n sweepAngle: number,\n) => {\n const endAngle = startAngle + sweepAngle;\n const start = polarToCartesian(cx, cy, r, startAngle);\n const end = polarToCartesian(cx, cy, r, endAngle);\n const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n\n return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n};\n"],"names":["polarToCartesian","cx","cy","r","angleDeg","angleRad","describeArc","startAngle","sweepAngle","endAngle","start","end","largeArcFlag"],"mappings":"AAAA,MAAMA,IAAmB,CAACC,GAAYC,GAAYC,GAAWC,MAAqB;AAChF,QAAMC,KAAYD,IAAW,OAAO,KAAK,KAAK;AAEvC,SAAA;AAAA,IACL,GAAGH,IAAKE,IAAI,KAAK,IAAIE,CAAQ;AAAA,IAC7B,GAAGH,IAAKC,IAAI,KAAK,IAAIE,CAAQ;AAAA,EAAA;AAEjC,GAEaC,IAAc,CACzBL,GACAC,GACAC,GACAI,GACAC,MACG;AACH,QAAMC,IAAWF,IAAaC,GACxBE,IAAQV,EAAiBC,GAAIC,GAAIC,GAAGI,CAAU,GAC9CI,IAAMX,EAAiBC,GAAIC,GAAIC,GAAGM,CAAQ,GAC1CG,IAAeJ,IAAa,MAAM,IAAI;AAE5C,SAAO,KAAKE,EAAM,CAAC,IAAIA,EAAM,CAAC,MAAMP,CAAC,IAAIA,CAAC,MAAMS,CAAY,MAAMD,EAAI,CAAC,IAAIA,EAAI,CAAC;AAClF;"}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import r, { keyframes as e } from "styled-components";
|
2
|
+
import { RAINBOW_COLOR_ANIMATION_DURATION as n } from "./animated-arc-constants.js";
|
3
|
+
const s = e`
|
4
|
+
0% {
|
5
|
+
stroke: #FFB700;
|
6
|
+
color: #FFB700;
|
7
|
+
}
|
8
|
+
33% {
|
9
|
+
stroke: #FF884C;
|
10
|
+
color: #FF884C;
|
11
|
+
}
|
12
|
+
66% {
|
13
|
+
stroke: #FF80F4;
|
14
|
+
color: #FF80F4;
|
15
|
+
}
|
16
|
+
100% {
|
17
|
+
stroke: #33CCFF;
|
18
|
+
color: #33CCFF;
|
19
|
+
}
|
20
|
+
`, a = r.svg`
|
21
|
+
position: absolute;
|
22
|
+
z-index: 1;
|
23
|
+
pointer-events: none;
|
24
|
+
`, c = r.path`
|
25
|
+
stroke: ${({ theme: o, stroke: t }) => o.colors[t]};
|
26
|
+
animation: ${({ $showAnimatedRainbowArc: o }) => o ? s : "undefined"}
|
27
|
+
${n}s ease infinite forwards;
|
28
|
+
`;
|
29
|
+
export {
|
30
|
+
c as Path,
|
31
|
+
a as Svg
|
32
|
+
};
|
33
|
+
//# sourceMappingURL=animated-arc-styled.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"animated-arc-styled.js","sources":["../../../../src/features/ui/animated-arc/animated-arc-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../types';\n\nimport styled, { keyframes } from 'styled-components';\n\nimport { RAINBOW_COLOR_ANIMATION_DURATION } from './animated-arc-constants';\n\nconst rainbowColorAnimation = keyframes`\n 0% {\n stroke: #FFB700;\n color: #FFB700;\n }\n 33% {\n stroke: #FF884C;\n color: #FF884C;\n }\n 66% {\n stroke: #FF80F4;\n color: #FF80F4;\n }\n 100% {\n stroke: #33CCFF;\n color: #33CCFF;\n }\n`;\n\nexport const Svg = styled.svg`\n position: absolute;\n z-index: 1;\n pointer-events: none;\n`;\n\nexport const Path = styled.path<{ stroke: TColorNames; $showAnimatedRainbowArc: boolean }>`\n stroke: ${({ theme, stroke }) => theme.colors[stroke]};\n animation: ${({ $showAnimatedRainbowArc }) =>\n $showAnimatedRainbowArc ? rainbowColorAnimation : 'undefined'}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["rainbowColorAnimation","keyframes","Svg","styled","Path","theme","stroke","$showAnimatedRainbowArc","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;AAMA,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBjBC,IAAMC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAOD,EAAO;AAAA,YACf,CAAC,EAAE,OAAAE,GAAO,QAAAC,EAAA,MAAaD,EAAM,OAAOC,CAAM,CAAC;AAAA,eACxC,CAAC,EAAE,yBAAAC,EAAA,MACZA,IAA0BP,IAAwB,WAAW;AAAA,MAC7DQ,CAAgC;AAAA;"}
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import { jsx as p } from "react/jsx-runtime";
|
2
|
+
import { useRef as u, useMemo as g, useLayoutEffect as w } from "react";
|
3
|
+
import { describeArc as R } from "./animated-arc-helpers.js";
|
4
|
+
import { Svg as k, Path as A } from "./animated-arc-styled.js";
|
5
|
+
const L = ({
|
6
|
+
radius: e,
|
7
|
+
strokeWidth: i,
|
8
|
+
color: y,
|
9
|
+
targetAngle: a,
|
10
|
+
startAngle: c = 0,
|
11
|
+
duration: o = 2,
|
12
|
+
mode: s = "draw",
|
13
|
+
delay: n = 0,
|
14
|
+
showAnimatedRainbowArc: $ = !1
|
15
|
+
}) => {
|
16
|
+
const f = u(null), r = e, h = e - i / 2, l = g(
|
17
|
+
() => R(r, r, h, c, a),
|
18
|
+
[a, c, h, r]
|
19
|
+
);
|
20
|
+
return w(() => {
|
21
|
+
const t = f.current;
|
22
|
+
if (t) {
|
23
|
+
if (s === "draw") {
|
24
|
+
const m = t.getTotalLength();
|
25
|
+
t.style.strokeDasharray = `${m}`, t.style.strokeDashoffset = `${m}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
|
26
|
+
t.style.transition = `stroke-dashoffset ${o}s linear ${n}s`, t.style.strokeDashoffset = "0";
|
27
|
+
});
|
28
|
+
}
|
29
|
+
s === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
|
30
|
+
t.style.transition = `opacity ${o} ease-in-out ${n}s`, t.style.opacity = "1";
|
31
|
+
}));
|
32
|
+
}
|
33
|
+
}, [l, s, o, n]), /* @__PURE__ */ p(k, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ p(
|
34
|
+
A,
|
35
|
+
{
|
36
|
+
ref: f,
|
37
|
+
d: l,
|
38
|
+
fill: "none",
|
39
|
+
stroke: y,
|
40
|
+
strokeWidth: i,
|
41
|
+
strokeLinecap: "butt",
|
42
|
+
$showAnimatedRainbowArc: $
|
43
|
+
}
|
44
|
+
) });
|
45
|
+
};
|
46
|
+
export {
|
47
|
+
L as AnimatedArc
|
48
|
+
};
|
49
|
+
//# sourceMappingURL=animated-arc.js.map
|
@@ -0,0 +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\nexport const 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"],"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"],"mappings":";;;;AAOO,MAAMA,IAA2C,CAAC;AAAA,EACvD,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,gBAAgBE,CAAK,KAChEU,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;"}
|
package/dist/index.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import b from "
|
1
|
+
import b from "./node_modules/decode-uri-component/index.js";
|
2
2
|
import l from "../split-on-first/index.js";
|
3
3
|
import { includeKeys as N } from "../filter-obj/index.js";
|
4
4
|
const j = (r) => r == null, A = (r) => encodeURIComponent(r).replace(/[!'()*]/g, (e) => `%${e.charCodeAt(0).toString(16).toUpperCase()}`), u = Symbol("encodeFragmentIdentifier");
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../node_modules/query-string/node_modules/decode-uri-component/index.js"],"sourcesContent":["const token = '%[a-f0-9]{2}';\nconst singleMatcher = new RegExp('(' + token + ')|([^%]+?)', 'gi');\nconst multiMatcher = new RegExp('(' + token + ')+', 'gi');\n\nfunction decodeComponents(components, split) {\n\ttry {\n\t\t// Try to decode the entire string first\n\t\treturn [decodeURIComponent(components.join(''))];\n\t} catch {\n\t\t// Do nothing\n\t}\n\n\tif (components.length === 1) {\n\t\treturn components;\n\t}\n\n\tsplit = split || 1;\n\n\t// Split the array in 2 parts\n\tconst left = components.slice(0, split);\n\tconst right = components.slice(split);\n\n\treturn Array.prototype.concat.call([], decodeComponents(left), decodeComponents(right));\n}\n\nfunction decode(input) {\n\ttry {\n\t\treturn decodeURIComponent(input);\n\t} catch {\n\t\tlet tokens = input.match(singleMatcher) || [];\n\n\t\tfor (let i = 1; i < tokens.length; i++) {\n\t\t\tinput = decodeComponents(tokens, i).join('');\n\n\t\t\ttokens = input.match(singleMatcher) || [];\n\t\t}\n\n\t\treturn input;\n\t}\n}\n\nfunction customDecodeURIComponent(input) {\n\t// Keep track of all the replacements and prefill the map with the `BOM`\n\tconst replaceMap = {\n\t\t'%FE%FF': '\\uFFFD\\uFFFD',\n\t\t'%FF%FE': '\\uFFFD\\uFFFD',\n\t};\n\n\tlet match = multiMatcher.exec(input);\n\twhile (match) {\n\t\ttry {\n\t\t\t// Decode as big chunks as possible\n\t\t\treplaceMap[match[0]] = decodeURIComponent(match[0]);\n\t\t} catch {\n\t\t\tconst result = decode(match[0]);\n\n\t\t\tif (result !== match[0]) {\n\t\t\t\treplaceMap[match[0]] = result;\n\t\t\t}\n\t\t}\n\n\t\tmatch = multiMatcher.exec(input);\n\t}\n\n\t// Add `%C2` at the end of the map to make sure it does not replace the combinator before everything else\n\treplaceMap['%C2'] = '\\uFFFD';\n\n\tconst entries = Object.keys(replaceMap);\n\n\tfor (const key of entries) {\n\t\t// Replace all decoded components\n\t\tinput = input.replace(new RegExp(key, 'g'), replaceMap[key]);\n\t}\n\n\treturn input;\n}\n\nexport default function decodeUriComponent(encodedURI) {\n\tif (typeof encodedURI !== 'string') {\n\t\tthrow new TypeError('Expected `encodedURI` to be of type `string`, got `' + typeof encodedURI + '`');\n\t}\n\n\ttry {\n\t\t// Try the built in decoder first\n\t\treturn decodeURIComponent(encodedURI);\n\t} catch {\n\t\t// Fallback to a more advanced decoder\n\t\treturn customDecodeURIComponent(encodedURI);\n\t}\n}\n"],"names":["token","singleMatcher","multiMatcher","decodeComponents","components","split","left","right","decode","input","tokens","i","customDecodeURIComponent","replaceMap","match","result","entries","key","decodeUriComponent","encodedURI"],"mappings":"AAAA,MAAMA,IAAQ,gBACRC,IAAgB,IAAI,OAAO,MAAMD,IAAQ,cAAc,IAAI,GAC3DE,IAAe,IAAI,OAAO,MAAMF,IAAQ,MAAM,IAAI;AAExD,SAASG,EAAiBC,GAAYC,GAAO;AAC5C,MAAI;AAEH,WAAO,CAAC,mBAAmBD,EAAW,KAAK,EAAE,CAAC,CAAC;AAAA,EACjD,QAAS;AAAA,EAEP;AAED,MAAIA,EAAW,WAAW;AACzB,WAAOA;AAGR,EAAAC,IAAQA,KAAS;AAGjB,QAAMC,IAAOF,EAAW,MAAM,GAAGC,CAAK,GAChCE,IAAQH,EAAW,MAAMC,CAAK;AAEpC,SAAO,MAAM,UAAU,OAAO,KAAK,CAAA,GAAIF,EAAiBG,CAAI,GAAGH,EAAiBI,CAAK,CAAC;AACvF;AAEA,SAASC,EAAOC,GAAO;AACtB,MAAI;AACH,WAAO,mBAAmBA,CAAK;AAAA,EACjC,QAAS;AACP,QAAIC,IAASD,EAAM,MAAMR,CAAa,KAAK,CAAA;AAE3C,aAASU,IAAI,GAAGA,IAAID,EAAO,QAAQC;AAClC,MAAAF,IAAQN,EAAiBO,GAAQC,CAAC,EAAE,KAAK,EAAE,GAE3CD,IAASD,EAAM,MAAMR,CAAa,KAAK,CAAA;AAGxC,WAAOQ;AAAA,EACP;AACF;AAEA,SAASG,EAAyBH,GAAO;AAExC,QAAMI,IAAa;AAAA,IAClB,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAEC,MAAIC,IAAQZ,EAAa,KAAKO,CAAK;AACnC,SAAOK,KAAO;AACb,QAAI;AAEH,MAAAD,EAAWC,EAAM,CAAC,CAAC,IAAI,mBAAmBA,EAAM,CAAC,CAAC;AAAA,IACrD,QAAU;AACP,YAAMC,IAASP,EAAOM,EAAM,CAAC,CAAC;AAE9B,MAAIC,MAAWD,EAAM,CAAC,MACrBD,EAAWC,EAAM,CAAC,CAAC,IAAIC;AAAA,IAExB;AAED,IAAAD,IAAQZ,EAAa,KAAKO,CAAK;AAAA,EAC/B;AAGD,EAAAI,EAAW,KAAK,IAAI;AAEpB,QAAMG,IAAU,OAAO,KAAKH,CAAU;AAEtC,aAAWI,KAAOD;AAEjB,IAAAP,IAAQA,EAAM,QAAQ,IAAI,OAAOQ,GAAK,GAAG,GAAGJ,EAAWI,CAAG,CAAC;AAG5D,SAAOR;AACR;AAEe,SAASS,EAAmBC,GAAY;AACtD,MAAI,OAAOA,KAAe;AACzB,UAAM,IAAI,UAAU,wDAAwD,OAAOA,IAAa,GAAG;AAGpG,MAAI;AAEH,WAAO,mBAAmBA,CAAU;AAAA,EACtC,QAAS;AAEP,WAAOP,EAAyBO,CAAU;AAAA,EAC1C;AACF;","x_google_ignoreList":[0]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"regex.js","sources":["../../../../../node_modules/uuid/dist/esm-browser/regex.js"],"sourcesContent":["export default /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;"],"names":["REGEX"],"mappings":"AAAA,MAAAA,IAAe;","x_google_ignoreList":[0]}
|
@@ -1,7 +1,6 @@
|
|
1
|
-
|
2
|
-
const e = new Uint8Array(16);
|
1
|
+
var t, e = new Uint8Array(16);
|
3
2
|
function o() {
|
4
|
-
if (!t && (t = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !t))
|
3
|
+
if (!t && (t = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto < "u" && typeof msCrypto.getRandomValues == "function" && msCrypto.getRandomValues.bind(msCrypto), !t))
|
5
4
|
throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
|
6
5
|
return t(e);
|
7
6
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"rng.js","sources":["../../../../../node_modules/uuid/dist/esm-browser/rng.js"],"sourcesContent":["// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\
|
1
|
+
{"version":3,"file":"rng.js","sources":["../../../../../node_modules/uuid/dist/esm-browser/rng.js"],"sourcesContent":["// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\nvar getRandomValues;\nvar rnds8 = new Uint8Array(16);\nexport default function rng() {\n // lazy load so that environments that need to polyfill have a chance to do so\n if (!getRandomValues) {\n // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation. Also,\n // find the complete implementation of crypto (msCrypto) on IE11.\n getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);\n\n if (!getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n }\n\n return getRandomValues(rnds8);\n}"],"names":["getRandomValues","rnds8","rng"],"mappings":"AAGA,IAAIA,GACAC,IAAQ,IAAI,WAAW,EAAE;AACd,SAASC,IAAM;AAE5B,MAAI,CAACF,MAGHA,IAAkB,OAAO,SAAW,OAAe,OAAO,mBAAmB,OAAO,gBAAgB,KAAK,MAAM,KAAK,OAAO,WAAa,OAAe,OAAO,SAAS,mBAAoB,cAAc,SAAS,gBAAgB,KAAK,QAAQ,GAE3O,CAACA;AACH,UAAM,IAAI,MAAM,0GAA0G;AAI9H,SAAOA,EAAgBC,CAAK;AAC9B;","x_google_ignoreList":[0]}
|
@@ -1,10 +1,14 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
1
|
+
import s from "./validate.js";
|
2
|
+
var t = [];
|
3
|
+
for (var n = 0; n < 256; ++n)
|
4
|
+
t.push((n + 256).toString(16).substr(1));
|
5
|
+
function f(e) {
|
6
|
+
var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, o = (t[e[i + 0]] + t[e[i + 1]] + t[e[i + 2]] + t[e[i + 3]] + "-" + t[e[i + 4]] + t[e[i + 5]] + "-" + t[e[i + 6]] + t[e[i + 7]] + "-" + t[e[i + 8]] + t[e[i + 9]] + "-" + t[e[i + 10]] + t[e[i + 11]] + t[e[i + 12]] + t[e[i + 13]] + t[e[i + 14]] + t[e[i + 15]]).toLowerCase();
|
7
|
+
if (!s(o))
|
8
|
+
throw TypeError("Stringified UUID is invalid");
|
9
|
+
return o;
|
6
10
|
}
|
7
11
|
export {
|
8
|
-
|
12
|
+
f as default
|
9
13
|
};
|
10
14
|
//# sourceMappingURL=stringify.js.map
|