@cuemath/leap 2.8.36-tables-hg5 → 2.8.36-tables-hg7
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/assets/lottie/lottie.js +3 -1
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +10 -10
- 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 +76 -72
- package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -1
- package/dist/features/post-game-stats/points/points.js +14 -12
- package/dist/features/post-game-stats/points/points.js.map +1 -1
- package/dist/features/post-game-stats/post-game-stats.js +75 -65
- package/dist/features/post-game-stats/post-game-stats.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/static/point2.7cec6e24.json +1 -0
- package/dist/static/point3.f96fe7aa.json +1 -0
- package/dist/static/target-achieved-text.10db8475.json +1 -0
- package/package.json +1 -1
|
@@ -36,8 +36,10 @@ const t = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : "/", s = {
|
|
|
36
36
|
POINT1: `${t}static/point1.b53831de.json`,
|
|
37
37
|
POINT20: `${t}static/point20.c88d776d.json`,
|
|
38
38
|
POINT25: `${t}static/point25.a18c346a.json`,
|
|
39
|
+
POINT2: `${t}static/point2.7cec6e24.json`,
|
|
39
40
|
POINT30: `${t}static/point30.c5224b0b.json`,
|
|
40
41
|
POINT35: `${t}static/point35.fad343dd.json`,
|
|
42
|
+
POINT3: `${t}static/point3.f96fe7aa.json`,
|
|
41
43
|
POINT40: `${t}static/point40.10a16f72.json`,
|
|
42
44
|
POINT45: `${t}static/point45.2ad7561f.json`,
|
|
43
45
|
POINT50: `${t}static/point50.5718cb3d.json`,
|
|
@@ -54,7 +56,7 @@ const t = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : "/", s = {
|
|
|
54
56
|
SPLASH_SCREEN: `${t}static/splash-screen.bbf567ce.json`,
|
|
55
57
|
STAY_CONNECTED_LOTTIE: `${t}static/stay-connected-lottie.111439b3.json`,
|
|
56
58
|
TABLE_MODE_REVEAL: `${t}static/table-mode-reveal.b44a82c3.json`,
|
|
57
|
-
TARGET_ACHIEVED_TEXT: `${t}static/target-achieved-text.
|
|
59
|
+
TARGET_ACHIEVED_TEXT: `${t}static/target-achieved-text.10db8475.json`,
|
|
58
60
|
TEACHER_VALIDATION: `${t}static/teacher-validation.7577ecdc.json`,
|
|
59
61
|
TOTAL_STREAK: `${t}static/total-streak.d5ce7669.json`,
|
|
60
62
|
TOTAL_TIME: `${t}static/total-time.d979cbb9.json`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lottie.js","sources":["../../../src/assets/lottie/lottie.ts"],"sourcesContent":["const PREFIX = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : '/';\n\nconst LOTTIE = {\n ACCURACY_METER: `${PREFIX}static/accuracy-meter.99585cba.json`,\n ACCURACY_NEEDLE: `${PREFIX}static/accuracy-needle.cd6e63ac.json`,\n ADVANCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/advance-mode-segment-lottie.51ff6707.json`,\n BEGINNER1X: `${PREFIX}static/beginner1x.489908a7.json`,\n BRONZE_1: `${PREFIX}static/bronze-1.da4e4b5f.json`,\n BRONZE_2: `${PREFIX}static/bronze-2.97f9c639.json`,\n BRONZE_3: `${PREFIX}static/bronze-3.6a433ebd.json`,\n CIRCULAR_LOADER: `${PREFIX}static/circular-loader.a5a1a0a6.json`,\n CLOCK_30MIN: `${PREFIX}static/clock-30min.eae818b8.json`,\n CLOCK_45MIN: `${PREFIX}static/clock-45min.df8adf51.json`,\n CLOCK_60MIN: `${PREFIX}static/clock-60min.2b48d875.json`,\n CLOCK_90MIN: `${PREFIX}static/clock-90min.3e557ed7.json`,\n COLOR_1: `${PREFIX}static/color-1.45101b9a.json`,\n COLOR_2: `${PREFIX}static/color-2.ccdc7d0a.json`,\n COLOR_3: `${PREFIX}static/color-3.5e8e1422.json`,\n DIFFICULT: `${PREFIX}static/difficult.6846c064.json`,\n EASY: `${PREFIX}static/easy.68242ddd.json`,\n EASY_RESCHEDULING_LOTTIE: `${PREFIX}static/easy-rescheduling-lottie.28026af9.json`,\n ELITE_CIRCLE: `${PREFIX}static/elite-circle.3df58972.json`,\n ERROR_LOTTIE: `${PREFIX}static/error-lottie.b3507a4b.json`,\n FAMILIAR1X: `${PREFIX}static/familiar1x.7c9c7f15.json`,\n FIFTEEN_MIN_CLOCK: `${PREFIX}static/fifteen-min-clock.0af4e303.json`,\n FIVE_MIN_CLOCK: `${PREFIX}static/five-min-clock.6be5cc41.json`,\n GOLD_1: `${PREFIX}static/gold-1.ab2489fe.json`,\n GOLD_2: `${PREFIX}static/gold-2.34045826.json`,\n GOLD_3: `${PREFIX}static/gold-3.d704698b.json`,\n INFINITE_BUTTON_BG: `${PREFIX}static/infinite-button-bg.5909225e.json`,\n INFINITE_BUTTON_SYMBOL: `${PREFIX}static/infinite-button-symbol.aa31350c.json`,\n LEVELUP_RINGS: `${PREFIX}static/levelup-rings.b1055283.json`,\n MEDIUM: `${PREFIX}static/medium.94c3829b.json`,\n NUDGE_TAP: `${PREFIX}static/nudge-tap.5cb30093.json`,\n POINT100: `${PREFIX}static/point100.1df16f82.json`,\n POINT10: `${PREFIX}static/point10.7b5e536d.json`,\n POINT15: `${PREFIX}static/point15.fea00c32.json`,\n POINT1: `${PREFIX}static/point1.b53831de.json`,\n POINT20: `${PREFIX}static/point20.c88d776d.json`,\n POINT25: `${PREFIX}static/point25.a18c346a.json`,\n POINT30: `${PREFIX}static/point30.c5224b0b.json`,\n POINT35: `${PREFIX}static/point35.fad343dd.json`,\n POINT40: `${PREFIX}static/point40.10a16f72.json`,\n POINT45: `${PREFIX}static/point45.2ad7561f.json`,\n POINT50: `${PREFIX}static/point50.5718cb3d.json`,\n POINT5: `${PREFIX}static/point5.da40ed1f.json`,\n POINT60: `${PREFIX}static/point60.17380d9f.json`,\n PROFICIENT1X: `${PREFIX}static/proficient1x.fa6e7b80.json`,\n RANDOM_MODE_SEGMENT_LOTTIE: `${PREFIX}static/random-mode-segment-lottie.79cf1c07.json`,\n SEQUENCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/sequence-mode-segment-lottie.11ac49e9.json`,\n SILVER_1: `${PREFIX}static/silver-1.0396328a.json`,\n SILVER_2: `${PREFIX}static/silver-2.bf50615f.json`,\n SILVER_3: `${PREFIX}static/silver-3.13d66b84.json`,\n SLEEPY_BOI: `${PREFIX}static/sleepy-boi.031a1165.json`,\n SPINNER_WHITE: `${PREFIX}static/spinner-white.639e0d87.json`,\n SPLASH_SCREEN: `${PREFIX}static/splash-screen.bbf567ce.json`,\n STAY_CONNECTED_LOTTIE: `${PREFIX}static/stay-connected-lottie.111439b3.json`,\n TABLE_MODE_REVEAL: `${PREFIX}static/table-mode-reveal.b44a82c3.json`,\n TARGET_ACHIEVED_TEXT: `${PREFIX}static/target-achieved-text.
|
|
1
|
+
{"version":3,"file":"lottie.js","sources":["../../../src/assets/lottie/lottie.ts"],"sourcesContent":["const PREFIX = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : '/';\n\nconst LOTTIE = {\n ACCURACY_METER: `${PREFIX}static/accuracy-meter.99585cba.json`,\n ACCURACY_NEEDLE: `${PREFIX}static/accuracy-needle.cd6e63ac.json`,\n ADVANCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/advance-mode-segment-lottie.51ff6707.json`,\n BEGINNER1X: `${PREFIX}static/beginner1x.489908a7.json`,\n BRONZE_1: `${PREFIX}static/bronze-1.da4e4b5f.json`,\n BRONZE_2: `${PREFIX}static/bronze-2.97f9c639.json`,\n BRONZE_3: `${PREFIX}static/bronze-3.6a433ebd.json`,\n CIRCULAR_LOADER: `${PREFIX}static/circular-loader.a5a1a0a6.json`,\n CLOCK_30MIN: `${PREFIX}static/clock-30min.eae818b8.json`,\n CLOCK_45MIN: `${PREFIX}static/clock-45min.df8adf51.json`,\n CLOCK_60MIN: `${PREFIX}static/clock-60min.2b48d875.json`,\n CLOCK_90MIN: `${PREFIX}static/clock-90min.3e557ed7.json`,\n COLOR_1: `${PREFIX}static/color-1.45101b9a.json`,\n COLOR_2: `${PREFIX}static/color-2.ccdc7d0a.json`,\n COLOR_3: `${PREFIX}static/color-3.5e8e1422.json`,\n DIFFICULT: `${PREFIX}static/difficult.6846c064.json`,\n EASY: `${PREFIX}static/easy.68242ddd.json`,\n EASY_RESCHEDULING_LOTTIE: `${PREFIX}static/easy-rescheduling-lottie.28026af9.json`,\n ELITE_CIRCLE: `${PREFIX}static/elite-circle.3df58972.json`,\n ERROR_LOTTIE: `${PREFIX}static/error-lottie.b3507a4b.json`,\n FAMILIAR1X: `${PREFIX}static/familiar1x.7c9c7f15.json`,\n FIFTEEN_MIN_CLOCK: `${PREFIX}static/fifteen-min-clock.0af4e303.json`,\n FIVE_MIN_CLOCK: `${PREFIX}static/five-min-clock.6be5cc41.json`,\n GOLD_1: `${PREFIX}static/gold-1.ab2489fe.json`,\n GOLD_2: `${PREFIX}static/gold-2.34045826.json`,\n GOLD_3: `${PREFIX}static/gold-3.d704698b.json`,\n INFINITE_BUTTON_BG: `${PREFIX}static/infinite-button-bg.5909225e.json`,\n INFINITE_BUTTON_SYMBOL: `${PREFIX}static/infinite-button-symbol.aa31350c.json`,\n LEVELUP_RINGS: `${PREFIX}static/levelup-rings.b1055283.json`,\n MEDIUM: `${PREFIX}static/medium.94c3829b.json`,\n NUDGE_TAP: `${PREFIX}static/nudge-tap.5cb30093.json`,\n POINT100: `${PREFIX}static/point100.1df16f82.json`,\n POINT10: `${PREFIX}static/point10.7b5e536d.json`,\n POINT15: `${PREFIX}static/point15.fea00c32.json`,\n POINT1: `${PREFIX}static/point1.b53831de.json`,\n POINT20: `${PREFIX}static/point20.c88d776d.json`,\n POINT25: `${PREFIX}static/point25.a18c346a.json`,\n POINT2: `${PREFIX}static/point2.7cec6e24.json`,\n POINT30: `${PREFIX}static/point30.c5224b0b.json`,\n POINT35: `${PREFIX}static/point35.fad343dd.json`,\n POINT3: `${PREFIX}static/point3.f96fe7aa.json`,\n POINT40: `${PREFIX}static/point40.10a16f72.json`,\n POINT45: `${PREFIX}static/point45.2ad7561f.json`,\n POINT50: `${PREFIX}static/point50.5718cb3d.json`,\n POINT5: `${PREFIX}static/point5.da40ed1f.json`,\n POINT60: `${PREFIX}static/point60.17380d9f.json`,\n PROFICIENT1X: `${PREFIX}static/proficient1x.fa6e7b80.json`,\n RANDOM_MODE_SEGMENT_LOTTIE: `${PREFIX}static/random-mode-segment-lottie.79cf1c07.json`,\n SEQUENCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/sequence-mode-segment-lottie.11ac49e9.json`,\n SILVER_1: `${PREFIX}static/silver-1.0396328a.json`,\n SILVER_2: `${PREFIX}static/silver-2.bf50615f.json`,\n SILVER_3: `${PREFIX}static/silver-3.13d66b84.json`,\n SLEEPY_BOI: `${PREFIX}static/sleepy-boi.031a1165.json`,\n SPINNER_WHITE: `${PREFIX}static/spinner-white.639e0d87.json`,\n SPLASH_SCREEN: `${PREFIX}static/splash-screen.bbf567ce.json`,\n STAY_CONNECTED_LOTTIE: `${PREFIX}static/stay-connected-lottie.111439b3.json`,\n TABLE_MODE_REVEAL: `${PREFIX}static/table-mode-reveal.b44a82c3.json`,\n TARGET_ACHIEVED_TEXT: `${PREFIX}static/target-achieved-text.10db8475.json`,\n TEACHER_VALIDATION: `${PREFIX}static/teacher-validation.7577ecdc.json`,\n TOTAL_STREAK: `${PREFIX}static/total-streak.d5ce7669.json`,\n TOTAL_TIME: `${PREFIX}static/total-time.d979cbb9.json`,\n TOTAL_TIME_SPENT: `${PREFIX}static/total-time-spent.434005d3.json`,\n TOURNAMENT_RIPPLE: `${PREFIX}static/tournament-ripple.e5c239a5.json`,\n TRACK_PROGRESS_LOTTIE: `${PREFIX}static/track-progress-lottie.422108cf.json`,\n};\n\nexport { LOTTIE };\n"],"names":["PREFIX","LOTTIE"],"mappings":"AAAA,MAAMA,IAAS,OAAO,kBAAkB,OAAO,kBAAkB,KAE3DC,IAAS;AAAA,EACb,gBAAgB,GAAGD,CAAM;AAAA,EACzB,iBAAiB,GAAGA,CAAM;AAAA,EAC1B,6BAA6B,GAAGA,CAAM;AAAA,EACtC,YAAY,GAAGA,CAAM;AAAA,EACrB,UAAU,GAAGA,CAAM;AAAA,EACnB,UAAU,GAAGA,CAAM;AAAA,EACnB,UAAU,GAAGA,CAAM;AAAA,EACnB,iBAAiB,GAAGA,CAAM;AAAA,EAC1B,aAAa,GAAGA,CAAM;AAAA,EACtB,aAAa,GAAGA,CAAM;AAAA,EACtB,aAAa,GAAGA,CAAM;AAAA,EACtB,aAAa,GAAGA,CAAM;AAAA,EACtB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,WAAW,GAAGA,CAAM;AAAA,EACpB,MAAM,GAAGA,CAAM;AAAA,EACf,0BAA0B,GAAGA,CAAM;AAAA,EACnC,cAAc,GAAGA,CAAM;AAAA,EACvB,cAAc,GAAGA,CAAM;AAAA,EACvB,YAAY,GAAGA,CAAM;AAAA,EACrB,mBAAmB,GAAGA,CAAM;AAAA,EAC5B,gBAAgB,GAAGA,CAAM;AAAA,EACzB,QAAQ,GAAGA,CAAM;AAAA,EACjB,QAAQ,GAAGA,CAAM;AAAA,EACjB,QAAQ,GAAGA,CAAM;AAAA,EACjB,oBAAoB,GAAGA,CAAM;AAAA,EAC7B,wBAAwB,GAAGA,CAAM;AAAA,EACjC,eAAe,GAAGA,CAAM;AAAA,EACxB,QAAQ,GAAGA,CAAM;AAAA,EACjB,WAAW,GAAGA,CAAM;AAAA,EACpB,UAAU,GAAGA,CAAM;AAAA,EACnB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,QAAQ,GAAGA,CAAM;AAAA,EACjB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,QAAQ,GAAGA,CAAM;AAAA,EACjB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,QAAQ,GAAGA,CAAM;AAAA,EACjB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,QAAQ,GAAGA,CAAM;AAAA,EACjB,SAAS,GAAGA,CAAM;AAAA,EAClB,cAAc,GAAGA,CAAM;AAAA,EACvB,4BAA4B,GAAGA,CAAM;AAAA,EACrC,8BAA8B,GAAGA,CAAM;AAAA,EACvC,UAAU,GAAGA,CAAM;AAAA,EACnB,UAAU,GAAGA,CAAM;AAAA,EACnB,UAAU,GAAGA,CAAM;AAAA,EACnB,YAAY,GAAGA,CAAM;AAAA,EACrB,eAAe,GAAGA,CAAM;AAAA,EACxB,eAAe,GAAGA,CAAM;AAAA,EACxB,uBAAuB,GAAGA,CAAM;AAAA,EAChC,mBAAmB,GAAGA,CAAM;AAAA,EAC5B,sBAAsB,GAAGA,CAAM;AAAA,EAC/B,oBAAoB,GAAGA,CAAM;AAAA,EAC7B,cAAc,GAAGA,CAAM;AAAA,EACvB,YAAY,GAAGA,CAAM;AAAA,EACrB,kBAAkB,GAAGA,CAAM;AAAA,EAC3B,mBAAmB,GAAGA,CAAM;AAAA,EAC5B,uBAAuB,GAAGA,CAAM;AAClC;"}
|
|
@@ -26,7 +26,7 @@ const g = o.div`
|
|
|
26
26
|
width: 92%;
|
|
27
27
|
border-radius: 100%;
|
|
28
28
|
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
|
29
|
-
`,
|
|
29
|
+
`, b = o.div`
|
|
30
30
|
position: relative;
|
|
31
31
|
flex-grow: 1;
|
|
32
32
|
bottom: -12px;
|
|
@@ -34,7 +34,7 @@ const g = o.div`
|
|
|
34
34
|
o.div`
|
|
35
35
|
position: absolute;
|
|
36
36
|
`;
|
|
37
|
-
const
|
|
37
|
+
const u = o.div`
|
|
38
38
|
width: ${r / 2}px;
|
|
39
39
|
height: 2px;
|
|
40
40
|
position: absolute;
|
|
@@ -46,17 +46,17 @@ const N = o.div`
|
|
|
46
46
|
left: ${r / 2}px;
|
|
47
47
|
top: ${r / 2}px;
|
|
48
48
|
z-index: ${l};
|
|
49
|
-
`,
|
|
49
|
+
`, N = o.div`
|
|
50
50
|
position: absolute;
|
|
51
51
|
height: ${r - 32}px;
|
|
52
52
|
transform: rotate(${({ $angle: t }) => -n + t}deg);
|
|
53
53
|
z-index: ${d};
|
|
54
|
-
`,
|
|
54
|
+
`, T = o.div`
|
|
55
55
|
transform: rotate(${({ $angle: t }) => n - t}deg);
|
|
56
56
|
`, h = o.div`
|
|
57
57
|
position: absolute;
|
|
58
58
|
top: 0;
|
|
59
|
-
transform:
|
|
59
|
+
transform: ${({ top: t }) => `translateY(${t}px)`};
|
|
60
60
|
`, C = o(i)`
|
|
61
61
|
animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
|
|
62
62
|
ease-in-out ${a}s forwards;
|
|
@@ -73,15 +73,15 @@ const I = o(i)`
|
|
|
73
73
|
${m}s ease infinite forwards;
|
|
74
74
|
`;
|
|
75
75
|
export {
|
|
76
|
+
h as BottomAbsoluteView,
|
|
76
77
|
E as ContentContainer,
|
|
77
78
|
g as DigitalMeter,
|
|
78
79
|
C as HelperTextPrimary,
|
|
79
80
|
v as HelperTextSecondary,
|
|
80
|
-
|
|
81
|
-
N as
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
T as NumberCountContainer,
|
|
81
|
+
u as LineMarking,
|
|
82
|
+
N as MarkingContainer,
|
|
83
|
+
T as MarkingText,
|
|
84
|
+
b as NumberCountContainer,
|
|
85
85
|
I as RainboxColorText
|
|
86
86
|
};
|
|
87
87
|
//# sourceMappingURL=digital-meter-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"digital-meter-styled.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport Text from '../../ui/text/text';\nimport { ADJUSTED_START_ANGLE } from './comp/animated-arc/constants';\nimport {\n CONTENT_CONTAINER_Z_INDEX,\n LINE_MARKING_Z_INDEX,\n NUMBER_MARKING_Z_INDEX,\n RAINBOW_COLOR_ANIMATION_DURATION,\n TARGET_HELPER_TEXT_APPEAR_DELAY,\n} from './constants';\nimport { rainbowColorAnimation } from './helper';\n\nexport const DigitalMeter = styled.div<{ $isTargetAchieved: boolean }>`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 100%;\n border: 1px solid ${({ theme }) => theme.colors.WHITE};\n animation: ${({ $isTargetAchieved }) =>\n $isTargetAchieved ? keyframes`100%{transform: scale(1.02)}` : 'unset'}\n 0.133s ease alternate;\n`;\n\nexport const ContentContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n z-index: ${CONTENT_CONTAINER_Z_INDEX};\n height: 92%;\n width: 92%;\n border-radius: 100%;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n`;\n\nexport const NumberCountContainer = styled.div`\n position: relative;\n flex-grow: 1;\n bottom: -12px;\n`;\n\nexport const AbsoluteView = styled.div`\n position: absolute;\n`;\n\nexport const LineMarking = styled.div<{\n $angle: number;\n}>`\n width: ${GAME_LAUNCHER_SIZE / 2}px;\n height: 2px;\n position: absolute;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n transform-style: preserve-3d;\n backface-visibility: hidden;\n transform-origin: left;\n transform: rotate(${({ $angle }) => -240 + $angle}deg);\n left: ${GAME_LAUNCHER_SIZE / 2}px;\n top: ${GAME_LAUNCHER_SIZE / 2}px;\n z-index: ${LINE_MARKING_Z_INDEX};\n`;\n\nexport const MarkingContainer = styled.div<{ $angle: number }>`\n position: absolute;\n height: ${GAME_LAUNCHER_SIZE - 32}px;\n transform: rotate(${({ $angle }) => -ADJUSTED_START_ANGLE + $angle}deg);\n z-index: ${NUMBER_MARKING_Z_INDEX};\n`;\n\nexport const MarkingText = styled.div<{ $angle: number }>`\n transform: rotate(${({ $angle }) => ADJUSTED_START_ANGLE - $angle}deg);\n`;\n\nexport const
|
|
1
|
+
{"version":3,"file":"digital-meter-styled.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport Text from '../../ui/text/text';\nimport { ADJUSTED_START_ANGLE } from './comp/animated-arc/constants';\nimport {\n CONTENT_CONTAINER_Z_INDEX,\n LINE_MARKING_Z_INDEX,\n NUMBER_MARKING_Z_INDEX,\n RAINBOW_COLOR_ANIMATION_DURATION,\n TARGET_HELPER_TEXT_APPEAR_DELAY,\n} from './constants';\nimport { rainbowColorAnimation } from './helper';\n\nexport const DigitalMeter = styled.div<{ $isTargetAchieved: boolean }>`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 100%;\n border: 1px solid ${({ theme }) => theme.colors.WHITE};\n animation: ${({ $isTargetAchieved }) =>\n $isTargetAchieved ? keyframes`100%{transform: scale(1.02)}` : 'unset'}\n 0.133s ease alternate;\n`;\n\nexport const ContentContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n z-index: ${CONTENT_CONTAINER_Z_INDEX};\n height: 92%;\n width: 92%;\n border-radius: 100%;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n`;\n\nexport const NumberCountContainer = styled.div`\n position: relative;\n flex-grow: 1;\n bottom: -12px;\n`;\n\nexport const AbsoluteView = styled.div`\n position: absolute;\n`;\n\nexport const LineMarking = styled.div<{\n $angle: number;\n}>`\n width: ${GAME_LAUNCHER_SIZE / 2}px;\n height: 2px;\n position: absolute;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n transform-style: preserve-3d;\n backface-visibility: hidden;\n transform-origin: left;\n transform: rotate(${({ $angle }) => -240 + $angle}deg);\n left: ${GAME_LAUNCHER_SIZE / 2}px;\n top: ${GAME_LAUNCHER_SIZE / 2}px;\n z-index: ${LINE_MARKING_Z_INDEX};\n`;\n\nexport const MarkingContainer = styled.div<{ $angle: number }>`\n position: absolute;\n height: ${GAME_LAUNCHER_SIZE - 32}px;\n transform: rotate(${({ $angle }) => -ADJUSTED_START_ANGLE + $angle}deg);\n z-index: ${NUMBER_MARKING_Z_INDEX};\n`;\n\nexport const MarkingText = styled.div<{ $angle: number }>`\n transform: rotate(${({ $angle }) => ADJUSTED_START_ANGLE - $angle}deg);\n`;\n\nexport const BottomAbsoluteView = styled.div<{ top: number }>`\n position: absolute;\n top: 0;\n transform: ${({ top }) => `translateY(${top}px)`};\n`;\n\nexport const HelperTextPrimary = styled(Text)`\n animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n ease-in-out ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const HelperTextSecondary = styled(Text)`\n animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n ease ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const TargetAchievedTextLottie = styled.div`\n height: 100%;\n width: 100%;\n`;\n\nexport const RainboxColorText = styled(Text)<{ $isTargetAchieved: boolean }>`\n animation: ${({ $isTargetAchieved }) => ($isTargetAchieved ? rainbowColorAnimation : 'unset')}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["DigitalMeter","styled","GAME_LAUNCHER_SIZE","theme","$isTargetAchieved","keyframes","ContentContainer","CONTENT_CONTAINER_Z_INDEX","NumberCountContainer","LineMarking","$angle","LINE_MARKING_Z_INDEX","MarkingContainer","ADJUSTED_START_ANGLE","NUMBER_MARKING_Z_INDEX","MarkingText","BottomAbsoluteView","top","HelperTextPrimary","Text","TARGET_HELPER_TEXT_APPEAR_DELAY","HelperTextSecondary","RainboxColorText","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;;;AAcO,MAAMA,IAAeC,EAAO;AAAA,YACvBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA,sBACP,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,eACxC,CAAC,EAAE,mBAAAC,QACZA,IAAoBC,kCAA0C,OAAO;AAAA;AAAA,GAI9DC,IAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAK1BM,CAAyB;AAAA;AAAA;AAAA;AAAA,sBAIhB,CAAC,EAAE,OAAAJ,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,GAG5CK,IAAuBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAMfA,EAAO;AAAA;AAAA;AAI5B,MAAMQ,IAAcR,EAAO;AAAA,WAGvBC,IAAqB,CAAC;AAAA;AAAA;AAAA,sBAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAInC,CAAC,EAAE,QAAAO,EAAO,MAAM,OAAOA,CAAM;AAAA,UACzCR,IAAqB,CAAC;AAAA,SACvBA,IAAqB,CAAC;AAAA,aAClBS,CAAoB;AAAA,GAGpBC,IAAmBX,EAAO;AAAA;AAAA,YAE3BC,IAAqB,EAAE;AAAA,sBACb,CAAC,EAAE,QAAAQ,EAAA,MAAa,CAACG,IAAuBH,CAAM;AAAA,aACvDI,CAAsB;AAAA,GAGtBC,IAAcd,EAAO;AAAA,sBACZ,CAAC,EAAE,QAAAS,QAAaG,IAAuBH,CAAM;AAAA,GAGtDM,IAAqBf,EAAO;AAAA;AAAA;AAAA,eAG1B,CAAC,EAAE,KAAAgB,EAAU,MAAA,cAAcA,CAAG,KAAK;AAAA,GAGrCC,IAAoBjB,EAAOkB,CAAI;AAAA,eAC7Bd,iEAAyE;AAAA,kBACtEe,CAA+B;AAAA,GAGpCC,IAAsBpB,EAAOkB,CAAI;AAAA,eAC/Bd,iEAAyE;AAAA,WAC7Ee,CAA+B;AAAA;AAGFnB,EAAO;AAAA;AAAA;AAAA;AAKlC,MAAAqB,IAAmBrB,EAAOkB,CAAI;AAAA,eAC5B,CAAC,EAAE,mBAAAf,EAAA,MAAyBA,IAAoBmB,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}
|
|
@@ -1,99 +1,102 @@
|
|
|
1
|
-
import { jsxs as c, jsx as r, Fragment as
|
|
2
|
-
import { memo as
|
|
3
|
-
import { LOTTIE as
|
|
4
|
-
import { GAME_LAUNCHER_SIZE as
|
|
5
|
-
import
|
|
1
|
+
import { jsxs as c, jsx as r, Fragment as E } from "react/jsx-runtime";
|
|
2
|
+
import { memo as M, useState as O, useEffect as p } from "react";
|
|
3
|
+
import { LOTTIE as W } from "../../../assets/lottie/lottie.js";
|
|
4
|
+
import { GAME_LAUNCHER_SIZE as d } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
|
5
|
+
import a from "../../ui/layout/flex-view.js";
|
|
6
6
|
import y from "../../ui/lottie-animation/lottie-animation.js";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { NumberCountAnimation as
|
|
7
|
+
import R from "../../ui/separator/separator.js";
|
|
8
|
+
import L from "../../ui/text/text.js";
|
|
9
|
+
import { NumberCountAnimation as u } from "../number-count-animation/number-count-animation.js";
|
|
10
10
|
import { AnimatedArc as _ } from "./comp/animated-arc/animated-arc.js";
|
|
11
|
-
import { TARGET_ACHIEVED_DELAY as
|
|
12
|
-
import { DigitalMeter as
|
|
13
|
-
const or =
|
|
11
|
+
import { TARGET_ACHIEVED_DELAY as D, TOTAL_ARC_AVAILABLE as A, BORDER_OFFSET as $, PROGRESS_FILL_DURATION as h, PROGRESS_FILL_DELAY as g, TOTAL_ANIMATION_DURATION as w } from "./constants.js";
|
|
12
|
+
import { DigitalMeter as B, ContentContainer as P, NumberCountContainer as U, RainboxColorText as f, LineMarking as C, MarkingContainer as N, MarkingText as S, BottomAbsoluteView as b, HelperTextPrimary as j, HelperTextSecondary as Y } from "./digital-meter-styled.js";
|
|
13
|
+
const or = M(
|
|
14
14
|
({
|
|
15
|
-
show:
|
|
15
|
+
show: T,
|
|
16
16
|
value: m,
|
|
17
|
-
maxValue:
|
|
17
|
+
maxValue: n,
|
|
18
18
|
targetValue: i = 0,
|
|
19
|
-
displayText:
|
|
20
|
-
progressType:
|
|
21
|
-
helperTextPrimary:
|
|
22
|
-
helperTextSecondary:
|
|
19
|
+
displayText: k,
|
|
20
|
+
progressType: s,
|
|
21
|
+
helperTextPrimary: H,
|
|
22
|
+
helperTextSecondary: F,
|
|
23
23
|
onComplete: I
|
|
24
24
|
}) => {
|
|
25
|
-
const [l,
|
|
26
|
-
return
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
const [l, G] = O(!1);
|
|
26
|
+
return p(() => (console.log("DigitalMeter mounted", m), () => {
|
|
27
|
+
console.log("DigitalMeter unmounted");
|
|
28
|
+
}), []), p(() => {
|
|
29
|
+
let o, e;
|
|
30
|
+
const t = !!(i && m >= i);
|
|
31
|
+
return T && (t && (o = setTimeout(() => {
|
|
32
|
+
G(!0);
|
|
33
|
+
}, D * 1e3)), e = setTimeout(() => {
|
|
34
|
+
I();
|
|
35
|
+
}, (t ? w : D) * 1e3)), () => {
|
|
36
|
+
o && clearTimeout(o), e && clearTimeout(e);
|
|
34
37
|
};
|
|
35
|
-
}, [T, m, i, I]), T ? /* @__PURE__ */ c(
|
|
38
|
+
}, [T, m, i, I]), T ? /* @__PURE__ */ c(B, { $isTargetAchieved: l, children: [
|
|
36
39
|
/* @__PURE__ */ r(
|
|
37
40
|
_,
|
|
38
41
|
{
|
|
39
42
|
targetAngle: A,
|
|
40
43
|
strokeWidth: 16,
|
|
41
44
|
color: "BLACK_5",
|
|
42
|
-
radius: (
|
|
45
|
+
radius: (d - $) / 2,
|
|
43
46
|
duration: 0
|
|
44
47
|
}
|
|
45
48
|
),
|
|
46
|
-
/* @__PURE__ */ r(
|
|
47
|
-
/* @__PURE__ */ c(
|
|
48
|
-
/* @__PURE__ */ r(
|
|
49
|
-
|
|
49
|
+
/* @__PURE__ */ r(P, { children: /* @__PURE__ */ c(a, { $flexDirection: "column", $alignItems: "center", children: [
|
|
50
|
+
/* @__PURE__ */ c(a, { $flexDirection: "row", $alignItems: "flex-end", children: [
|
|
51
|
+
/* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(
|
|
52
|
+
f,
|
|
50
53
|
{
|
|
51
54
|
$renderAs: "ah1",
|
|
52
55
|
$color: "GREEN_4",
|
|
53
56
|
$isTargetAchieved: l,
|
|
54
57
|
children: /* @__PURE__ */ r(
|
|
55
|
-
|
|
58
|
+
u,
|
|
56
59
|
{
|
|
57
60
|
initialValue: 0,
|
|
58
61
|
targetValue: m,
|
|
59
|
-
durationInSec:
|
|
60
|
-
delayInSec:
|
|
62
|
+
durationInSec: h,
|
|
63
|
+
delayInSec: g
|
|
61
64
|
}
|
|
62
65
|
)
|
|
63
66
|
}
|
|
64
67
|
) }),
|
|
65
|
-
|
|
68
|
+
s === "stepper" && /* @__PURE__ */ c(L, { $renderAs: "ac2", $color: "WHITE", children: [
|
|
66
69
|
"/",
|
|
67
|
-
|
|
70
|
+
n
|
|
68
71
|
] })
|
|
69
72
|
] }),
|
|
70
|
-
/* @__PURE__ */ r(
|
|
71
|
-
/* @__PURE__ */ r(
|
|
73
|
+
/* @__PURE__ */ r(R, { height: 8 }),
|
|
74
|
+
/* @__PURE__ */ r(L, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: k })
|
|
72
75
|
] }) }),
|
|
73
|
-
|
|
74
|
-
const
|
|
76
|
+
s === "stepper" && Array.from({ length: m }, (o, e) => {
|
|
77
|
+
const t = A / n;
|
|
75
78
|
return /* @__PURE__ */ r(
|
|
76
79
|
_,
|
|
77
80
|
{
|
|
78
|
-
startAngle:
|
|
79
|
-
targetAngle:
|
|
81
|
+
startAngle: t * e,
|
|
82
|
+
targetAngle: t,
|
|
80
83
|
strokeWidth: 12,
|
|
81
84
|
color: "GREEN_4",
|
|
82
|
-
radius: (
|
|
85
|
+
radius: (d - $) / 2,
|
|
83
86
|
mode: "fade",
|
|
84
|
-
duration:
|
|
85
|
-
delay:
|
|
87
|
+
duration: h / n,
|
|
88
|
+
delay: g + h / n * e,
|
|
86
89
|
playRainbowColors: l
|
|
87
90
|
},
|
|
88
91
|
e
|
|
89
92
|
);
|
|
90
93
|
}),
|
|
91
|
-
|
|
92
|
-
const
|
|
93
|
-
return /* @__PURE__ */ c(
|
|
94
|
-
/* @__PURE__ */ r(C, { $angle:
|
|
95
|
-
/* @__PURE__ */ r(
|
|
96
|
-
|
|
94
|
+
s === "stepper" && Array.from({ length: n + 1 }, (o, e) => {
|
|
95
|
+
const t = A / n;
|
|
96
|
+
return /* @__PURE__ */ c(E, { children: [
|
|
97
|
+
/* @__PURE__ */ r(C, { $angle: t * e }, e + "linemarking"),
|
|
98
|
+
/* @__PURE__ */ r(N, { $angle: t * e, children: /* @__PURE__ */ r(S, { $angle: t * e, children: /* @__PURE__ */ r(
|
|
99
|
+
f,
|
|
97
100
|
{
|
|
98
101
|
$renderAs: "ac4-black",
|
|
99
102
|
$isTargetAchieved: e === i && l,
|
|
@@ -103,32 +106,32 @@ const or = O(
|
|
|
103
106
|
) }) }, e)
|
|
104
107
|
] });
|
|
105
108
|
}),
|
|
106
|
-
|
|
109
|
+
s === "linear" && /* @__PURE__ */ c(E, { children: [
|
|
107
110
|
/* @__PURE__ */ r(
|
|
108
111
|
_,
|
|
109
112
|
{
|
|
110
|
-
targetAngle: m * A /
|
|
113
|
+
targetAngle: m * A / n,
|
|
111
114
|
strokeWidth: 12,
|
|
112
115
|
color: "GREEN_4",
|
|
113
|
-
radius: (
|
|
114
|
-
duration:
|
|
115
|
-
delay:
|
|
116
|
+
radius: (d - $) / 2,
|
|
117
|
+
duration: h,
|
|
118
|
+
delay: g,
|
|
116
119
|
playRainbowColors: l
|
|
117
120
|
}
|
|
118
121
|
),
|
|
119
|
-
/* @__PURE__ */ c(
|
|
120
|
-
i && /* @__PURE__ */ r(C, { $angle: i * A /
|
|
121
|
-
Array.from(/* @__PURE__ */ new Set([0, i,
|
|
122
|
-
|
|
122
|
+
/* @__PURE__ */ c(E, { children: [
|
|
123
|
+
i && /* @__PURE__ */ r(C, { $angle: i * A / n }),
|
|
124
|
+
Array.from(/* @__PURE__ */ new Set([0, i, n])).map((o, e) => /* @__PURE__ */ r(
|
|
125
|
+
N,
|
|
123
126
|
{
|
|
124
|
-
$angle:
|
|
125
|
-
children: /* @__PURE__ */ r(S, { $angle:
|
|
126
|
-
|
|
127
|
+
$angle: o * A / n,
|
|
128
|
+
children: /* @__PURE__ */ r(S, { $angle: o * A / n, children: /* @__PURE__ */ r(
|
|
129
|
+
f,
|
|
127
130
|
{
|
|
128
131
|
$renderAs: "ac4-black",
|
|
129
|
-
$color: i &&
|
|
130
|
-
$isTargetAchieved: m >=
|
|
131
|
-
children:
|
|
132
|
+
$color: i && o === i ? "GREEN_4" : "WHITE_T_60",
|
|
133
|
+
$isTargetAchieved: m >= o && l && o === i,
|
|
134
|
+
children: o
|
|
132
135
|
}
|
|
133
136
|
) })
|
|
134
137
|
},
|
|
@@ -136,11 +139,12 @@ const or = O(
|
|
|
136
139
|
))
|
|
137
140
|
] })
|
|
138
141
|
] }),
|
|
139
|
-
/* @__PURE__ */
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
/* @__PURE__ */ r(
|
|
142
|
+
l && /* @__PURE__ */ r(b, { top: d, children: /* @__PURE__ */ r(y, { src: W.TARGET_ACHIEVED_TEXT }) }),
|
|
143
|
+
!l && /* @__PURE__ */ c(b, { top: d, children: [
|
|
144
|
+
/* @__PURE__ */ r(R, { height: 25 }),
|
|
145
|
+
/* @__PURE__ */ c(a, { $flexDirection: "column", $alignItems: "center", children: [
|
|
146
|
+
/* @__PURE__ */ r(j, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: H }),
|
|
147
|
+
/* @__PURE__ */ r(Y, { $renderAs: "ab1", $color: "WHITE", children: F })
|
|
144
148
|
] })
|
|
145
149
|
] })
|
|
146
150
|
] }) : null;
|
|
@@ -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 { memo, useEffect, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\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 BORDER_OFFSET,\n PROGRESS_FILL_DELAY,\n PROGRESS_FILL_DURATION,\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 }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n const [starAnimation, setStarAnimation] = useState(show);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n let isTargetAchievedFlag = !!(targetValue && value >= targetValue);\n if (starAnimation) {\n if (isTargetAchievedFlag) {\n timer = setTimeout(() => {\n setIsTargetAchieved(true);\n }, TARGET_ACHIEVED_DELAY * 1000);\n }\n\n let timeToFinishAnimation = isTargetAchievedFlag\n ? TOTAL_ANIMATION_DURATION\n : TARGET_ACHIEVED_DELAY;\n timerForAnimationComplete = setTimeout(() => {\n onComplete();\n setStarAnimation(false);\n }, timeToFinishAnimation * 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n };\n }, [starAnimation, value, targetValue, onComplete]);\n\n if (starAnimation) {\n return (\n <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n {/* complete arc area to be filled */}\n <AnimatedArc\n targetAngle={TOTAL_ARC_AVAILABLE}\n strokeWidth={16}\n color=\"BLACK_5\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\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=\"ah1\"\n $color=\"GREEN_4\"\n $isTargetAchieved={isTargetAchieved}\n >\n <NumberCountAnimation\n initialValue={0}\n targetValue={value}\n durationInSec={PROGRESS_FILL_DURATION}\n delayInSec={PROGRESS_FILL_DELAY}\n />\n </Styled.RainboxColorText>\n </Styled.NumberCountContainer>\n {progressType === 'stepper' && (\n <Text $renderAs=\"ac2\" $color=\"WHITE\">\n /{maxValue}\n </Text>\n )}\n </FlexView>\n <Separator height={8} />\n <Text $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\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={12}\n color=\"GREEN_4\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\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 <>\n <Styled.LineMarking key={index + 'linemarking'} $angle={arcLength * index} />\n\n <Styled.MarkingContainer key={index} $angle={arcLength * index}>\n <Styled.MarkingText $angle={arcLength * index}>\n <Styled.RainboxColorText\n $renderAs=\"ac4-black\"\n $isTargetAchieved={index === targetValue && isTargetAchieved}\n $color={targetValue && index === targetValue ? 'GREEN_4' : 'WHITE_T_60'}\n >\n {index}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n </>\n );\n })}\n\n {/* progress of linear */}\n {progressType === 'linear' && (\n <>\n <AnimatedArc\n targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n strokeWidth={12}\n color=\"GREEN_4\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\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=\"ac4-black\"\n $color={targetValue && val === targetValue ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={value >= val && isTargetAchieved && val === targetValue}\n >\n {val}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n ))}\n </>\n </>\n )}\n\n {/* helper text below the animation */}\n <Styled.HelperTextWrapper>\n {isTargetAchieved && <LottieAnimation src={LOTTIE.TARGET_ACHIEVED_TEXT} />}\n {!isTargetAchieved && (\n <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n <Styled.HelperTextPrimary $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n {helperTextPrimary}\n </Styled.HelperTextPrimary>\n <Styled.HelperTextSecondary $renderAs=\"ab1\" $color=\"WHITE\">\n {helperTextSecondary}\n </Styled.HelperTextSecondary>\n </FlexView>\n )}\n </Styled.HelperTextWrapper>\n </Styled.DigitalMeter>\n );\n }\n\n return null;\n },\n);\n"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","isTargetAchieved","setIsTargetAchieved","useState","starAnimation","setStarAnimation","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","GAME_LAUNCHER_SIZE","BORDER_OFFSET","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","Fragment","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","val","Styled.HelperTextWrapper","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 { memo, useEffect, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\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 BORDER_OFFSET,\n PROGRESS_FILL_DELAY,\n PROGRESS_FILL_DURATION,\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 }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n\n useEffect(() => {\n console.log('DigitalMeter mounted', value);\n return () => {\n console.log('DigitalMeter unmounted');\n };\n }, []);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n const isTargetAchievedFlag = !!(targetValue && value >= targetValue);\n\n if (show) {\n if (isTargetAchievedFlag) {\n timer = setTimeout(() => {\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, targetValue, onComplete]);\n\n if (show) {\n return (\n <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n {/* complete arc area to be filled */}\n <AnimatedArc\n targetAngle={TOTAL_ARC_AVAILABLE}\n strokeWidth={16}\n color=\"BLACK_5\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\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=\"ah1\"\n $color=\"GREEN_4\"\n $isTargetAchieved={isTargetAchieved}\n >\n <NumberCountAnimation\n initialValue={0}\n targetValue={value}\n durationInSec={PROGRESS_FILL_DURATION}\n delayInSec={PROGRESS_FILL_DELAY}\n />\n </Styled.RainboxColorText>\n </Styled.NumberCountContainer>\n {progressType === 'stepper' && (\n <Text $renderAs=\"ac2\" $color=\"WHITE\">\n /{maxValue}\n </Text>\n )}\n </FlexView>\n <Separator height={8} />\n <Text $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\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={12}\n color=\"GREEN_4\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\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 <>\n <Styled.LineMarking key={index + 'linemarking'} $angle={arcLength * index} />\n\n <Styled.MarkingContainer key={index} $angle={arcLength * index}>\n <Styled.MarkingText $angle={arcLength * index}>\n <Styled.RainboxColorText\n $renderAs=\"ac4-black\"\n $isTargetAchieved={index === targetValue && isTargetAchieved}\n $color={targetValue && index === targetValue ? 'GREEN_4' : 'WHITE_T_60'}\n >\n {index}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n </>\n );\n })}\n\n {/* progress of linear */}\n {progressType === 'linear' && (\n <>\n <AnimatedArc\n targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n strokeWidth={12}\n color=\"GREEN_4\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\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=\"ac4-black\"\n $color={targetValue && val === targetValue ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={value >= val && isTargetAchieved && val === targetValue}\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 $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n {helperTextPrimary}\n </Styled.HelperTextPrimary>\n <Styled.HelperTextSecondary $renderAs=\"ab1\" $color=\"WHITE\">\n {helperTextSecondary}\n </Styled.HelperTextSecondary>\n </FlexView>\n </Styled.BottomAbsoluteView>\n )}\n </Styled.DigitalMeter>\n );\n }\n\n return null;\n },\n);\n"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","isTargetAchieved","setIsTargetAchieved","useState","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","GAME_LAUNCHER_SIZE","BORDER_OFFSET","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","Fragment","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { memo as
|
|
1
|
+
import { jsx as N } from "react/jsx-runtime";
|
|
2
|
+
import { memo as P, useEffect as T } from "react";
|
|
3
3
|
import { LOTTIE as o } from "../../../assets/lottie/lottie.js";
|
|
4
|
-
import { GAME_LAUNCHER_SIZE as
|
|
4
|
+
import { GAME_LAUNCHER_SIZE as a } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
|
5
5
|
import { GAME_LAUNCHER_ASSET_PADDING as O, GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH as c } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
|
|
6
6
|
import { useCircleSounds as f } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
|
|
7
7
|
import { CircleSoundKey as E } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
|
|
8
8
|
import A from "../../ui/lottie-animation/lottie-animation.js";
|
|
9
9
|
const _ = {
|
|
10
10
|
point1: o.POINT1,
|
|
11
|
+
point2: o.POINT2,
|
|
12
|
+
point3: o.POINT3,
|
|
11
13
|
point5: o.POINT5,
|
|
12
14
|
point10: o.POINT10,
|
|
13
15
|
point15: o.POINT15,
|
|
@@ -20,27 +22,27 @@ const _ = {
|
|
|
20
22
|
point50: o.POINT50,
|
|
21
23
|
point60: o.POINT60,
|
|
22
24
|
point100: o.POINT100
|
|
23
|
-
},
|
|
25
|
+
}, e = a + O - c, l = {
|
|
24
26
|
loop: !1,
|
|
25
27
|
autoplay: !0,
|
|
26
28
|
renderer: "canvas"
|
|
27
|
-
}, G =
|
|
28
|
-
const { point:
|
|
29
|
+
}, G = P((p) => {
|
|
30
|
+
const { point: m = 0, onReveal: n, onComplete: i, show: r } = p, { play: s } = f(), t = _[`point${m}`], I = {
|
|
29
31
|
name: "complete",
|
|
30
32
|
callback: i
|
|
31
33
|
};
|
|
32
|
-
return
|
|
34
|
+
return T(() => {
|
|
33
35
|
if (!t)
|
|
34
|
-
throw i(), new Error(`Animation path not found for
|
|
36
|
+
throw i(), new Error(`Animation path not found for ${t}`);
|
|
35
37
|
r && t && (n == null || n());
|
|
36
|
-
}, [t, i, n, r]), r && t ? /* @__PURE__ */
|
|
38
|
+
}, [t, i, n, r]), r && t ? /* @__PURE__ */ N(
|
|
37
39
|
A,
|
|
38
40
|
{
|
|
39
|
-
width:
|
|
40
|
-
height:
|
|
41
|
+
width: e,
|
|
42
|
+
height: e,
|
|
41
43
|
src: t,
|
|
42
44
|
settings: l,
|
|
43
|
-
eventListener:
|
|
45
|
+
eventListener: I,
|
|
44
46
|
onRender: () => s(E.POINTS_AWARDED)
|
|
45
47
|
}
|
|
46
48
|
) : null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"points.js","sources":["../../../../src/features/post-game-stats/points/points.tsx"],"sourcesContent":["import type { IPointsProps } from './points-types';\nimport type { AnimationEventName } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport { memo, useEffect } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport {\n GAME_LAUNCHER_ASSET_PADDING,\n GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,\n} from '../../circle-games/game-launcher/comps/segmented-game-card/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 LottieAnimation from '../../ui/lottie-animation/lottie-animation';\n\nconst POINTS_MAP: Record<string, string> = {\n point1: LOTTIE.POINT1,\n point5: LOTTIE.POINT5,\n point10: LOTTIE.POINT10,\n point15: LOTTIE.POINT15,\n point20: LOTTIE.POINT20,\n point25: LOTTIE.POINT25,\n point30: LOTTIE.POINT30,\n point35: LOTTIE.POINT35,\n point40: LOTTIE.POINT40,\n point45: LOTTIE.POINT45,\n point50: LOTTIE.POINT50,\n point60: LOTTIE.POINT60,\n point100: LOTTIE.POINT100,\n};\nconst animationDimension =\n GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH;\nconst animationSettings = {\n loop: false,\n autoplay: true,\n renderer: 'canvas',\n};\n\nexport const Points: FC<IPointsProps> = memo(props => {\n const { point = 0, onReveal, onComplete, show } = props;\n\n const { play } = useCircleSounds();\n\n const animationPath = POINTS_MAP[`point${point}`];\n const animationEventListener = {\n name: 'complete' as AnimationEventName,\n callback: onComplete,\n };\n\n useEffect(() => {\n if (!animationPath) {\n onComplete();\n throw new Error(`Animation path not found for
|
|
1
|
+
{"version":3,"file":"points.js","sources":["../../../../src/features/post-game-stats/points/points.tsx"],"sourcesContent":["import type { IPointsProps } from './points-types';\nimport type { AnimationEventName } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport { memo, useEffect } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport {\n GAME_LAUNCHER_ASSET_PADDING,\n GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,\n} from '../../circle-games/game-launcher/comps/segmented-game-card/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 LottieAnimation from '../../ui/lottie-animation/lottie-animation';\n\nconst POINTS_MAP: Record<string, string> = {\n point1: LOTTIE.POINT1,\n point2: LOTTIE.POINT2,\n point3: LOTTIE.POINT3,\n point5: LOTTIE.POINT5,\n point10: LOTTIE.POINT10,\n point15: LOTTIE.POINT15,\n point20: LOTTIE.POINT20,\n point25: LOTTIE.POINT25,\n point30: LOTTIE.POINT30,\n point35: LOTTIE.POINT35,\n point40: LOTTIE.POINT40,\n point45: LOTTIE.POINT45,\n point50: LOTTIE.POINT50,\n point60: LOTTIE.POINT60,\n point100: LOTTIE.POINT100,\n};\nconst animationDimension =\n GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH;\nconst animationSettings = {\n loop: false,\n autoplay: true,\n renderer: 'canvas',\n};\n\nexport const Points: FC<IPointsProps> = memo(props => {\n const { point = 0, onReveal, onComplete, show } = props;\n\n const { play } = useCircleSounds();\n\n const animationPath = POINTS_MAP[`point${point}`];\n const animationEventListener = {\n name: 'complete' as AnimationEventName,\n callback: onComplete,\n };\n\n useEffect(() => {\n if (!animationPath) {\n onComplete();\n throw new Error(`Animation path not found for ${animationPath}`);\n }\n\n if (show && animationPath) onReveal?.();\n }, [animationPath, onComplete, onReveal, show]);\n\n if (show && animationPath) {\n return (\n <LottieAnimation\n width={animationDimension}\n height={animationDimension}\n src={animationPath}\n settings={animationSettings}\n eventListener={animationEventListener}\n onRender={() => play(CircleSoundKey.POINTS_AWARDED)}\n />\n );\n }\n\n return null;\n});\n"],"names":["POINTS_MAP","LOTTIE","animationDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","animationSettings","Points","memo","props","point","onReveal","onComplete","show","play","useCircleSounds","animationPath","animationEventListener","useEffect","jsx","LottieAnimation","CircleSoundKey"],"mappings":";;;;;;;;AAgBA,MAAMA,IAAqC;AAAA,EACzC,QAAQC,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,UAAUA,EAAO;AACnB,GACMC,IACJC,IAAqBC,IAA8BC,GAC/CC,IAAoB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,GAEaC,IAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,OAAAC,IAAQ,GAAG,UAAAC,GAAU,YAAAC,GAAY,MAAAC,EAAS,IAAAJ,GAE5C,EAAE,MAAAK,MAASC,KAEXC,IAAgBhB,EAAW,QAAQU,CAAK,EAAE,GAC1CO,IAAyB;AAAA,IAC7B,MAAM;AAAA,IACN,UAAUL;AAAA,EAAA;AAYZ,SATAM,EAAU,MAAM;AACd,QAAI,CAACF;AACQ,YAAAJ,KACL,IAAI,MAAM,gCAAgCI,CAAa,EAAE;AAG7D,IAAAH,KAAQG,MAA0BL,KAAA,QAAAA;AAAA,KACrC,CAACK,GAAeJ,GAAYD,GAAUE,CAAI,CAAC,GAE1CA,KAAQG,IAER,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOlB;AAAA,MACP,QAAQA;AAAA,MACR,KAAKc;AAAA,MACL,UAAUV;AAAA,MACV,eAAeW;AAAA,MACf,UAAU,MAAMH,EAAKO,EAAe,cAAc;AAAA,IAAA;AAAA,EAAA,IAKjD;AACT,CAAC;"}
|