@cuemath/leap 2.8.36-tables-hg2 → 2.8.36-tables-hg3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/lottie/lottie.js +1 -1
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +15 -14
- 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 +90 -101
- package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -1
- package/dist/features/post-game-stats/enums/post-game-stats-enum.js +1 -1
- package/dist/features/post-game-stats/enums/post-game-stats-enum.js.map +1 -1
- package/dist/features/post-game-stats/post-game-stats.js +40 -45
- package/dist/features/post-game-stats/post-game-stats.js.map +1 -1
- package/dist/index.d.ts +10 -3
- package/package.json +1 -1
- package/dist/features/post-game-stats/accuracy/accuracy-comps.js +0 -11
- package/dist/features/post-game-stats/accuracy/accuracy-comps.js.map +0 -1
- package/dist/features/post-game-stats/accuracy/accuracy-styled.js +0 -68
- package/dist/features/post-game-stats/accuracy/accuracy-styled.js.map +0 -1
- package/dist/features/post-game-stats/accuracy/accuracy-utils.js +0 -20
- package/dist/features/post-game-stats/accuracy/accuracy-utils.js.map +0 -1
- package/dist/features/post-game-stats/accuracy/accuracy.js +0 -80
- package/dist/features/post-game-stats/accuracy/accuracy.js.map +0 -1
- package/dist/features/post-game-stats/accuracy/constants.js +0 -17
- package/dist/features/post-game-stats/accuracy/constants.js.map +0 -1
- package/dist/features/post-game-stats/clock/clock-styled.js +0 -51
- package/dist/features/post-game-stats/clock/clock-styled.js.map +0 -1
- package/dist/features/post-game-stats/clock/clock-util.js +0 -9
- package/dist/features/post-game-stats/clock/clock-util.js.map +0 -1
- package/dist/features/post-game-stats/clock/clock.js +0 -75
- package/dist/features/post-game-stats/clock/clock.js.map +0 -1
- package/dist/features/post-game-stats/clock/constants.js +0 -16
- package/dist/features/post-game-stats/clock/constants.js.map +0 -1
|
@@ -53,8 +53,8 @@ const t = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : "/", s = {
|
|
|
53
53
|
SPINNER_WHITE: `${t}static/spinner-white.639e0d87.json`,
|
|
54
54
|
SPLASH_SCREEN: `${t}static/splash-screen.bbf567ce.json`,
|
|
55
55
|
STAY_CONNECTED_LOTTIE: `${t}static/stay-connected-lottie.111439b3.json`,
|
|
56
|
-
TARGET_ACHIEVED_TEXT: `${t}static/target-achieved-text.053bd142.json`,
|
|
57
56
|
TABLE_MODE_REVEAL: `${t}static/table-mode-reveal.b44a82c3.json`,
|
|
57
|
+
TARGET_ACHIEVED_TEXT: `${t}static/target-achieved-text.053bd142.json`,
|
|
58
58
|
TEACHER_VALIDATION: `${t}static/teacher-validation.7577ecdc.json`,
|
|
59
59
|
TOTAL_STREAK: `${t}static/total-streak.d5ce7669.json`,
|
|
60
60
|
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
|
|
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.053bd142.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,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,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;"}
|
|
@@ -4,7 +4,7 @@ import i from "../../ui/text/text.js";
|
|
|
4
4
|
import { ADJUSTED_START_ANGLE as n } from "./comp/animated-arc/constants.js";
|
|
5
5
|
import { CONTENT_CONTAINER_Z_INDEX as s, LINE_MARKING_Z_INDEX as l, NUMBER_MARKING_Z_INDEX as d, TARGET_HELPER_TEXT_APPEAR_DELAY as a, RAINBOW_COLOR_ANIMATION_DURATION as m } from "./constants.js";
|
|
6
6
|
import { rainbowColorAnimation as p } from "./helper.js";
|
|
7
|
-
const
|
|
7
|
+
const g = o.div`
|
|
8
8
|
height: ${r}px;
|
|
9
9
|
width: ${r}px;
|
|
10
10
|
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
|
@@ -16,7 +16,7 @@ const T = o.div`
|
|
|
16
16
|
border: 1px solid ${({ theme: t }) => t.colors.WHITE};
|
|
17
17
|
animation: ${({ $isTargetAchieved: t }) => t ? e`100%{transform: scale(1.02)}` : "unset"}
|
|
18
18
|
0.133s ease alternate;
|
|
19
|
-
`,
|
|
19
|
+
`, E = o.div`
|
|
20
20
|
display: flex;
|
|
21
21
|
justify-content: center;
|
|
22
22
|
align-items: center;
|
|
@@ -26,7 +26,7 @@ const T = o.div`
|
|
|
26
26
|
width: 92%;
|
|
27
27
|
border-radius: 100%;
|
|
28
28
|
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
|
29
|
-
`,
|
|
29
|
+
`, T = o.div`
|
|
30
30
|
position: relative;
|
|
31
31
|
flex-grow: 1;
|
|
32
32
|
bottom: -12px;
|
|
@@ -57,30 +57,31 @@ const N = o.div`
|
|
|
57
57
|
position: absolute;
|
|
58
58
|
top: 0;
|
|
59
59
|
transform: translateY(${r + 25}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;
|
|
63
|
-
`,
|
|
63
|
+
`, v = o(i)`
|
|
64
64
|
animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
|
|
65
65
|
ease ${a}s forwards;
|
|
66
|
-
|
|
66
|
+
`;
|
|
67
|
+
o.div`
|
|
67
68
|
height: 100%;
|
|
68
69
|
width: 100%;
|
|
69
|
-
|
|
70
|
+
`;
|
|
71
|
+
const I = o(i)`
|
|
70
72
|
animation: ${({ $isTargetAchieved: t }) => t ? p : "unset"}
|
|
71
73
|
${m}s ease infinite forwards;
|
|
72
74
|
`;
|
|
73
75
|
export {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
E as ContentContainer,
|
|
77
|
+
g as DigitalMeter,
|
|
78
|
+
C as HelperTextPrimary,
|
|
79
|
+
v as HelperTextSecondary,
|
|
78
80
|
h as HelperTextWrapper,
|
|
79
81
|
N as LineMarking,
|
|
80
82
|
b as MarkingContainer,
|
|
81
83
|
u as MarkingText,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
I as TargetAchievedTextLottie
|
|
84
|
+
T as NumberCountContainer,
|
|
85
|
+
I as RainboxColorText
|
|
85
86
|
};
|
|
86
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 HelperTextWrapper = styled.div`\n position: absolute;\n top: 0;\n transform: translateY(${GAME_LAUNCHER_SIZE + 25}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","HelperTextWrapper","HelperTextPrimary","Text","TARGET_HELPER_TEXT_APPEAR_DELAY","HelperTextSecondary","
|
|
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 HelperTextWrapper = styled.div`\n position: absolute;\n top: 0;\n transform: translateY(${GAME_LAUNCHER_SIZE + 25}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","HelperTextWrapper","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,IAAoBf,EAAO;AAAA;AAAA;AAAA,0BAGdC,IAAqB,EAAE;AAAA,GAGpCe,IAAoBhB,EAAOiB,CAAI;AAAA,eAC7Bb,iEAAyE;AAAA,kBACtEc,CAA+B;AAAA,GAGpCC,IAAsBnB,EAAOiB,CAAI;AAAA,eAC/Bb,iEAAyE;AAAA,WAC7Ec,CAA+B;AAAA;AAGFlB,EAAO;AAAA;AAAA;AAAA;AAKlC,MAAAoB,IAAmBpB,EAAOiB,CAAI;AAAA,eAC5B,CAAC,EAAE,mBAAAd,EAAA,MAAyBA,IAAoBkB,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}
|
|
@@ -1,163 +1,152 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import b from "
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { GAME_LAUNCHER_SIZE as h } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
|
1
|
+
import { jsxs as n, jsx as r, Fragment as h } from "react/jsx-runtime";
|
|
2
|
+
import { memo as k, useState as b, useEffect as G } from "react";
|
|
3
|
+
import { LOTTIE as O } from "../../../assets/lottie/lottie.js";
|
|
4
|
+
import { GAME_LAUNCHER_SIZE as s } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
|
6
5
|
import E from "../../ui/layout/flex-view.js";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { NumberCountAnimation as
|
|
10
|
-
import { AnimatedArc as
|
|
11
|
-
import { TARGET_ACHIEVED_DELAY as
|
|
12
|
-
import { DigitalMeter as
|
|
13
|
-
|
|
6
|
+
import W from "../../ui/separator/separator.js";
|
|
7
|
+
import p from "../../ui/text/text.js";
|
|
8
|
+
import { NumberCountAnimation as M } from "../number-count-animation/number-count-animation.js";
|
|
9
|
+
import { AnimatedArc as _ } from "./comp/animated-arc/animated-arc.js";
|
|
10
|
+
import { TARGET_ACHIEVED_DELAY as y, TOTAL_ANIMATION_DURATION as F, TOTAL_ARC_AVAILABLE as l, BORDER_OFFSET as $, PROGRESS_FILL_DURATION as T, PROGRESS_FILL_DELAY as f } from "./constants.js";
|
|
11
|
+
import { DigitalMeter as u, ContentContainer as w, NumberCountContainer as B, RainboxColorText as g, LineMarking as R, MarkingContainer as L, MarkingText as C, HelperTextWrapper as P, HelperTextPrimary as U, HelperTextSecondary as j } from "./digital-meter-styled.js";
|
|
12
|
+
import Y from "../../ui/lottie-animation/lottie-animation.js";
|
|
13
|
+
const ir = k(
|
|
14
14
|
({
|
|
15
|
-
show:
|
|
16
|
-
value:
|
|
17
|
-
maxValue:
|
|
18
|
-
targetValue:
|
|
19
|
-
displayText:
|
|
20
|
-
progressType:
|
|
21
|
-
helperTextPrimary:
|
|
22
|
-
helperTextSecondary:
|
|
23
|
-
onComplete:
|
|
15
|
+
show: a,
|
|
16
|
+
value: A,
|
|
17
|
+
maxValue: t,
|
|
18
|
+
targetValue: o = 0,
|
|
19
|
+
displayText: D,
|
|
20
|
+
progressType: m,
|
|
21
|
+
helperTextPrimary: H,
|
|
22
|
+
helperTextSecondary: N,
|
|
23
|
+
onComplete: I
|
|
24
24
|
}) => {
|
|
25
|
-
const [
|
|
26
|
-
return
|
|
27
|
-
let
|
|
28
|
-
return
|
|
29
|
-
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
},
|
|
33
|
-
|
|
25
|
+
const [c, S] = b(!1);
|
|
26
|
+
return G(() => {
|
|
27
|
+
let i, e;
|
|
28
|
+
return a && (i = setTimeout(() => {
|
|
29
|
+
A >= o && S(!0);
|
|
30
|
+
}, y * 1e3), e = setTimeout(() => {
|
|
31
|
+
I();
|
|
32
|
+
}, F * 1e3)), () => {
|
|
33
|
+
i && clearTimeout(i), e && clearTimeout(e);
|
|
34
34
|
};
|
|
35
|
-
}, [
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
r && b.loadAnimation({
|
|
39
|
-
container: I.current,
|
|
40
|
-
renderer: "svg",
|
|
41
|
-
loop: !0,
|
|
42
|
-
autoplay: !0,
|
|
43
|
-
animationData: r
|
|
44
|
-
});
|
|
45
|
-
})();
|
|
46
|
-
}, [n]), s ? /* @__PURE__ */ o(P, { $isTargetAchieved: n, children: [
|
|
47
|
-
/* @__PURE__ */ e(
|
|
48
|
-
f,
|
|
35
|
+
}, [a, A, o, I]), a ? /* @__PURE__ */ n(u, { $isTargetAchieved: c, children: [
|
|
36
|
+
/* @__PURE__ */ r(
|
|
37
|
+
_,
|
|
49
38
|
{
|
|
50
39
|
targetAngle: l,
|
|
51
40
|
strokeWidth: 16,
|
|
52
41
|
color: "BLACK_5",
|
|
53
|
-
radius: (
|
|
42
|
+
radius: (s - $) / 2,
|
|
54
43
|
duration: 0
|
|
55
44
|
}
|
|
56
45
|
),
|
|
57
|
-
/* @__PURE__ */
|
|
58
|
-
/* @__PURE__ */
|
|
59
|
-
/* @__PURE__ */
|
|
46
|
+
/* @__PURE__ */ r(w, { children: /* @__PURE__ */ n(E, { $flexDirection: "column", $alignItems: "center", children: [
|
|
47
|
+
/* @__PURE__ */ n(E, { $flexDirection: "row", $alignItems: "flex-end", children: [
|
|
48
|
+
/* @__PURE__ */ r(B, { children: /* @__PURE__ */ r(
|
|
60
49
|
g,
|
|
61
50
|
{
|
|
62
51
|
$renderAs: "ah1",
|
|
63
52
|
$color: "GREEN_4",
|
|
64
|
-
$isTargetAchieved:
|
|
65
|
-
children: /* @__PURE__ */
|
|
66
|
-
|
|
53
|
+
$isTargetAchieved: c,
|
|
54
|
+
children: /* @__PURE__ */ r(
|
|
55
|
+
M,
|
|
67
56
|
{
|
|
68
57
|
initialValue: 0,
|
|
69
|
-
targetValue:
|
|
70
|
-
durationInSec:
|
|
71
|
-
delayInSec:
|
|
58
|
+
targetValue: A,
|
|
59
|
+
durationInSec: T,
|
|
60
|
+
delayInSec: f
|
|
72
61
|
}
|
|
73
62
|
)
|
|
74
63
|
}
|
|
75
64
|
) }),
|
|
76
|
-
|
|
65
|
+
m === "stepper" && /* @__PURE__ */ n(p, { $renderAs: "ac2", $color: "WHITE", children: [
|
|
77
66
|
"/",
|
|
78
|
-
|
|
67
|
+
t
|
|
79
68
|
] })
|
|
80
69
|
] }),
|
|
81
|
-
/* @__PURE__ */
|
|
82
|
-
/* @__PURE__ */
|
|
70
|
+
/* @__PURE__ */ r(W, { height: 8 }),
|
|
71
|
+
/* @__PURE__ */ r(p, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: D })
|
|
83
72
|
] }) }),
|
|
84
|
-
|
|
85
|
-
const d = l /
|
|
86
|
-
return /* @__PURE__ */
|
|
87
|
-
|
|
73
|
+
m === "stepper" && Array.from({ length: A }, (i, e) => {
|
|
74
|
+
const d = l / t;
|
|
75
|
+
return /* @__PURE__ */ r(
|
|
76
|
+
_,
|
|
88
77
|
{
|
|
89
|
-
startAngle: d *
|
|
78
|
+
startAngle: d * e,
|
|
90
79
|
targetAngle: d,
|
|
91
80
|
strokeWidth: 12,
|
|
92
81
|
color: "GREEN_4",
|
|
93
|
-
radius: (
|
|
82
|
+
radius: (s - $) / 2,
|
|
94
83
|
mode: "fade",
|
|
95
|
-
duration:
|
|
96
|
-
delay:
|
|
97
|
-
playRainbowColors:
|
|
84
|
+
duration: T / t,
|
|
85
|
+
delay: f + T / t * e,
|
|
86
|
+
playRainbowColors: c
|
|
98
87
|
},
|
|
99
|
-
|
|
88
|
+
e
|
|
100
89
|
);
|
|
101
90
|
}),
|
|
102
|
-
|
|
103
|
-
const d = l /
|
|
104
|
-
return /* @__PURE__ */
|
|
105
|
-
/* @__PURE__ */
|
|
106
|
-
/* @__PURE__ */
|
|
91
|
+
m === "stepper" && Array.from({ length: t + 1 }, (i, e) => {
|
|
92
|
+
const d = l / t;
|
|
93
|
+
return /* @__PURE__ */ n(h, { children: [
|
|
94
|
+
/* @__PURE__ */ r(R, { $angle: d * e }, e + "linemarking"),
|
|
95
|
+
/* @__PURE__ */ r(L, { $angle: d * e, children: /* @__PURE__ */ r(C, { $angle: d * e, children: /* @__PURE__ */ r(
|
|
107
96
|
g,
|
|
108
97
|
{
|
|
109
98
|
$renderAs: "ac4-black",
|
|
110
|
-
$isTargetAchieved:
|
|
111
|
-
$color:
|
|
112
|
-
children:
|
|
99
|
+
$isTargetAchieved: e === o && c,
|
|
100
|
+
$color: e === o ? "GREEN_4" : "WHITE_T_60",
|
|
101
|
+
children: e
|
|
113
102
|
}
|
|
114
|
-
) }) },
|
|
103
|
+
) }) }, e)
|
|
115
104
|
] });
|
|
116
105
|
}),
|
|
117
|
-
|
|
118
|
-
/* @__PURE__ */
|
|
119
|
-
|
|
106
|
+
m === "linear" && /* @__PURE__ */ n(h, { children: [
|
|
107
|
+
/* @__PURE__ */ r(
|
|
108
|
+
_,
|
|
120
109
|
{
|
|
121
|
-
targetAngle:
|
|
110
|
+
targetAngle: A * l / t,
|
|
122
111
|
strokeWidth: 12,
|
|
123
112
|
color: "GREEN_4",
|
|
124
|
-
radius: (
|
|
125
|
-
duration:
|
|
126
|
-
delay:
|
|
127
|
-
playRainbowColors:
|
|
113
|
+
radius: (s - $) / 2,
|
|
114
|
+
duration: T,
|
|
115
|
+
delay: f,
|
|
116
|
+
playRainbowColors: c
|
|
128
117
|
}
|
|
129
118
|
),
|
|
130
|
-
/* @__PURE__ */
|
|
131
|
-
/* @__PURE__ */
|
|
132
|
-
Array.from(/* @__PURE__ */ new Set([0,
|
|
133
|
-
|
|
119
|
+
/* @__PURE__ */ n(h, { children: [
|
|
120
|
+
/* @__PURE__ */ r(R, { $angle: o * l / t }),
|
|
121
|
+
Array.from(/* @__PURE__ */ new Set([0, o, t])).map((i, e) => /* @__PURE__ */ r(
|
|
122
|
+
L,
|
|
134
123
|
{
|
|
135
|
-
$angle:
|
|
136
|
-
children: /* @__PURE__ */
|
|
124
|
+
$angle: i * l / t,
|
|
125
|
+
children: /* @__PURE__ */ r(C, { $angle: i * l / t, children: /* @__PURE__ */ r(
|
|
137
126
|
g,
|
|
138
127
|
{
|
|
139
128
|
$renderAs: "ac4-black",
|
|
140
|
-
$color:
|
|
141
|
-
$isTargetAchieved:
|
|
142
|
-
children:
|
|
129
|
+
$color: i === o ? "GREEN_4" : "WHITE_T_60",
|
|
130
|
+
$isTargetAchieved: A >= i && c && i === o,
|
|
131
|
+
children: i
|
|
143
132
|
}
|
|
144
133
|
) })
|
|
145
134
|
},
|
|
146
|
-
|
|
135
|
+
e
|
|
147
136
|
))
|
|
148
137
|
] })
|
|
149
138
|
] }),
|
|
150
|
-
/* @__PURE__ */
|
|
151
|
-
|
|
152
|
-
!
|
|
153
|
-
/* @__PURE__ */
|
|
154
|
-
/* @__PURE__ */
|
|
139
|
+
/* @__PURE__ */ n(P, { children: [
|
|
140
|
+
c && /* @__PURE__ */ r(Y, { src: O.TARGET_ACHIEVED_TEXT }),
|
|
141
|
+
!c && /* @__PURE__ */ n(E, { $flexDirection: "column", $alignItems: "center", children: [
|
|
142
|
+
/* @__PURE__ */ r(U, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: H }),
|
|
143
|
+
/* @__PURE__ */ r(j, { $renderAs: "ab1", $color: "WHITE", children: N })
|
|
155
144
|
] })
|
|
156
145
|
] })
|
|
157
146
|
] }) : null;
|
|
158
147
|
}
|
|
159
148
|
);
|
|
160
149
|
export {
|
|
161
|
-
|
|
150
|
+
ir as DigitalMeter
|
|
162
151
|
};
|
|
163
152
|
//# 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 Lottie from 'lottie-web';\nimport { memo, useEffect, useRef, 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 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\nconst taregetAchieved = () => import(LOTTIE.TARGET_ACHIEVED_TEXT);\n\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n ({\n show,\n value,\n maxValue,\n targetValue,\n displayText,\n progressType,\n helperTextPrimary,\n helperTextSecondary,\n onComplete,\n }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n const targetAchievedLottieContainerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n\n if (show) {\n timer = setTimeout(() => {\n if (value >= targetValue) {\n setIsTargetAchieved(true);\n }\n }, TARGET_ACHIEVED_DELAY * 1000);\n\n timerForAnimationComplete = setTimeout(() => {\n onComplete();\n }, TOTAL_ANIMATION_DURATION * 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n };\n }, [show, value, targetValue, onComplete]);\n\n useEffect(() => {\n if (isTargetAchieved) {\n const loadAnimation = async () => {\n const { default: lottie } = await taregetAchieved();\n\n if (lottie) {\n Lottie.loadAnimation({\n container: targetAchievedLottieContainerRef.current as HTMLDivElement,\n renderer: 'svg',\n loop: true,\n autoplay: true,\n animationData: lottie,\n });\n }\n };\n\n loadAnimation();\n }\n }, [isTargetAchieved]);\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={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 <Styled.LineMarking $angle={(targetValue * TOTAL_ARC_AVAILABLE) / maxValue} />\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={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 && (\n <Styled.TargetAchievedTextLottie ref={targetAchievedLottieContainerRef} />\n )}\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":["taregetAchieved","LOTTIE","DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","isTargetAchieved","setIsTargetAchieved","useState","targetAchievedLottieContainerRef","useRef","useEffect","timer","timerForAnimationComplete","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","lottie","Lottie","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","Styled.TargetAchievedTextLottie","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 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';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\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 let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n\n if (show) {\n timer = setTimeout(() => {\n if (value >= targetValue) {\n setIsTargetAchieved(true);\n }\n }, TARGET_ACHIEVED_DELAY * 1000);\n\n timerForAnimationComplete = setTimeout(() => {\n onComplete();\n }, TOTAL_ANIMATION_DURATION * 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={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 <Styled.LineMarking $angle={(targetValue * TOTAL_ARC_AVAILABLE) / maxValue} />\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={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 && (\n <LottieAnimation src={LOTTIE.TARGET_ACHIEVED_TEXT} />\n )}\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","useEffect","timer","timerForAnimationComplete","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,4 +1,4 @@
|
|
|
1
|
-
var c = /* @__PURE__ */ ((r) => (r.STREAK = "streak", r.ACCURACY = "accuracy", r.CLOCK = "clock", r.POINT = "point", r))(c || {});
|
|
1
|
+
var c = /* @__PURE__ */ ((r) => (r.STREAK = "streak", r.ACCURACY = "accuracy", r.CLOCK = "clock", r.POINT = "point", r.DIGITAL_METER = "digital-meter", r))(c || {});
|
|
2
2
|
export {
|
|
3
3
|
c as EPostGameStat
|
|
4
4
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"post-game-stats-enum.js","sources":["../../../../src/features/post-game-stats/enums/post-game-stats-enum.ts"],"sourcesContent":["export enum EPostGameStat {\n STREAK = 'streak',\n ACCURACY = 'accuracy',\n CLOCK = 'clock',\n POINT = 'point',\n}\n"],"names":["EPostGameStat"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,
|
|
1
|
+
{"version":3,"file":"post-game-stats-enum.js","sources":["../../../../src/features/post-game-stats/enums/post-game-stats-enum.ts"],"sourcesContent":["export enum EPostGameStat {\n STREAK = 'streak',\n ACCURACY = 'accuracy',\n CLOCK = 'clock',\n POINT = 'point',\n DIGITAL_METER = 'digital-meter',\n}\n"],"names":["EPostGameStat"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,gBAAgB,iBALNA,IAAAA,KAAA,CAAA,CAAA;"}
|
|
@@ -1,70 +1,65 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
if ((c = (o = e[r]) == null ? void 0 : o.onComplete) == null || c.call(o), r === e.length - 1) {
|
|
1
|
+
import { jsxs as G, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { memo as j, forwardRef as B, useState as C, useCallback as A, useImperativeHandle as D } from "react";
|
|
3
|
+
import { DigitalMeter as M } from "./digital-meter/digital-meter.js";
|
|
4
|
+
import { EPostGameStat as a } from "./enums/post-game-stats-enum.js";
|
|
5
|
+
import { Points as N } from "./points/points.js";
|
|
6
|
+
import { StatsWrapper as b, BlackBg as H } from "./post-game-stats-styled.js";
|
|
7
|
+
import { Streak as K } from "./streak/streak.js";
|
|
8
|
+
const J = j(
|
|
9
|
+
B(({ stats: e, show: E, onComplete: l }, k) => {
|
|
10
|
+
var i, t, u, x, T, h, f, y, S, c, d, v, g, P, R;
|
|
11
|
+
const [r, w] = C(0), p = A(() => {
|
|
12
|
+
var o, I;
|
|
13
|
+
if ((I = (o = e[r]) == null ? void 0 : o.onComplete) == null || I.call(o), r === e.length - 1) {
|
|
15
14
|
l == null || l();
|
|
16
15
|
return;
|
|
17
16
|
}
|
|
18
|
-
|
|
19
|
-
}, [r, l, e]), m =
|
|
17
|
+
w((V) => V + 1);
|
|
18
|
+
}, [r, l, e]), m = A(() => {
|
|
20
19
|
var o;
|
|
21
|
-
(o = e[r]) != null && o.stopAtEnd ||
|
|
22
|
-
}, [e, r,
|
|
23
|
-
return
|
|
24
|
-
moveToNextAndPlay:
|
|
25
|
-
})), !
|
|
26
|
-
/* @__PURE__ */ n(
|
|
20
|
+
(o = e[r]) != null && o.stopAtEnd || p();
|
|
21
|
+
}, [e, r, p]);
|
|
22
|
+
return D(k, () => ({
|
|
23
|
+
moveToNextAndPlay: p
|
|
24
|
+
})), !E || e.length === 0 || r >= e.length ? null : /* @__PURE__ */ G(b, { children: [
|
|
25
|
+
/* @__PURE__ */ n(H, {}),
|
|
27
26
|
/* @__PURE__ */ n(
|
|
28
|
-
|
|
27
|
+
N,
|
|
29
28
|
{
|
|
30
|
-
point: e[r].value,
|
|
31
|
-
show: e[r].type ===
|
|
29
|
+
point: ((i = e[r]) == null ? void 0 : i.value) ?? 0,
|
|
30
|
+
show: ((t = e[r]) == null ? void 0 : t.type) === a.POINT,
|
|
32
31
|
onComplete: m,
|
|
33
|
-
onReveal: (i = e[r]) == null ? void 0 : i.onReveal
|
|
34
|
-
}
|
|
35
|
-
),
|
|
36
|
-
/* @__PURE__ */ n(
|
|
37
|
-
P,
|
|
38
|
-
{
|
|
39
|
-
currStreak: e[r].value,
|
|
40
|
-
show: e[r].type === p.STREAK,
|
|
41
|
-
onComplete: m,
|
|
42
|
-
helperText: e[r].helperText,
|
|
43
32
|
onReveal: (u = e[r]) == null ? void 0 : u.onReveal
|
|
44
33
|
}
|
|
45
34
|
),
|
|
46
35
|
/* @__PURE__ */ n(
|
|
47
|
-
|
|
36
|
+
K,
|
|
48
37
|
{
|
|
49
|
-
|
|
50
|
-
show: e[r].type ===
|
|
38
|
+
currStreak: ((x = e[r]) == null ? void 0 : x.value) ?? 0,
|
|
39
|
+
show: ((T = e[r]) == null ? void 0 : T.type) === a.STREAK,
|
|
51
40
|
onComplete: m,
|
|
52
|
-
helperText: e[r].helperText
|
|
41
|
+
helperText: (h = e[r]) == null ? void 0 : h.helperText,
|
|
42
|
+
onReveal: (f = e[r]) == null ? void 0 : f.onReveal
|
|
53
43
|
}
|
|
54
44
|
),
|
|
55
45
|
/* @__PURE__ */ n(
|
|
56
|
-
|
|
46
|
+
M,
|
|
57
47
|
{
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
48
|
+
value: ((y = e[r]) == null ? void 0 : y.value) ?? 0,
|
|
49
|
+
maxValue: ((S = e[r]) == null ? void 0 : S.maxValue) ?? 1,
|
|
50
|
+
targetValue: ((c = e[r]) == null ? void 0 : c.targetValue) ?? 0,
|
|
51
|
+
displayText: ((d = e[r]) == null ? void 0 : d.displayText) ?? "",
|
|
52
|
+
progressType: ((v = e[r]) == null ? void 0 : v.progressType) ?? "linear",
|
|
53
|
+
helperTextPrimary: ((g = e[r]) == null ? void 0 : g.helperTextPrimary) ?? "",
|
|
54
|
+
helperTextSecondary: ((P = e[r]) == null ? void 0 : P.helperTextSecondary) ?? "",
|
|
55
|
+
show: ((R = e[r]) == null ? void 0 : R.type) === a.DIGITAL_METER,
|
|
56
|
+
onComplete: m
|
|
62
57
|
}
|
|
63
58
|
)
|
|
64
59
|
] });
|
|
65
60
|
})
|
|
66
61
|
);
|
|
67
62
|
export {
|
|
68
|
-
|
|
63
|
+
J as PostGameStats
|
|
69
64
|
};
|
|
70
65
|
//# sourceMappingURL=post-game-stats.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"post-game-stats.js","sources":["../../../src/features/post-game-stats/post-game-stats.tsx"],"sourcesContent":["import type { IPostGameStatsProps, IPostGameStatsRef } from './post-game-stats-types';\n\nimport { useState, memo, useCallback, forwardRef, useImperativeHandle } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"post-game-stats.js","sources":["../../../src/features/post-game-stats/post-game-stats.tsx"],"sourcesContent":["import type { IPostGameStatsProps, IPostGameStatsRef } from './post-game-stats-types';\n\nimport { useState, memo, useCallback, forwardRef, useImperativeHandle } from 'react';\n\nimport { DigitalMeter } from './digital-meter/digital-meter';\nimport { EPostGameStat } from './enums/post-game-stats-enum';\nimport { Points } from './points/points';\nimport * as Styled from './post-game-stats-styled';\nimport { Streak } from './streak/streak';\n\nexport const PostGameStats = memo(\n forwardRef<IPostGameStatsRef, IPostGameStatsProps>(({ stats, show, onComplete }, ref) => {\n const [currStatIndex, setCurrentStatIndex] = useState(0);\n\n const moveToNextAndPlay = useCallback(() => {\n stats[currStatIndex]?.onComplete?.();\n\n if (currStatIndex === stats.length - 1) {\n onComplete?.();\n\n return;\n }\n setCurrentStatIndex(prev => prev + 1);\n }, [currStatIndex, onComplete, stats]);\n\n const onStatAnimationComplete = useCallback(() => {\n if (stats[currStatIndex]?.stopAtEnd) {\n return;\n }\n moveToNextAndPlay(); // Autoplay since stopAtEnd is false\n }, [stats, currStatIndex, moveToNextAndPlay]);\n\n useImperativeHandle(ref, () => ({\n moveToNextAndPlay,\n }));\n\n if (!show || stats.length === 0 || currStatIndex >= stats.length) {\n return null;\n }\n\n return (\n <Styled.StatsWrapper>\n <Styled.BlackBg />\n <Points\n point={stats[currStatIndex]?.value ?? 0}\n show={stats[currStatIndex]?.type === EPostGameStat.POINT}\n onComplete={onStatAnimationComplete}\n onReveal={stats[currStatIndex]?.onReveal}\n />\n <Streak\n currStreak={stats[currStatIndex]?.value ?? 0}\n show={stats[currStatIndex]!?.type === EPostGameStat.STREAK}\n onComplete={onStatAnimationComplete}\n helperText={stats[currStatIndex]?.helperText}\n onReveal={stats[currStatIndex]?.onReveal}\n />\n <DigitalMeter\n value={stats[currStatIndex]?.value ?? 0}\n maxValue={stats[currStatIndex]?.maxValue ?? 1}\n targetValue={stats[currStatIndex]?.targetValue ?? 0}\n displayText={stats[currStatIndex]?.displayText ?? ''}\n progressType={stats[currStatIndex]?.progressType ?? 'linear'}\n helperTextPrimary={stats[currStatIndex]?.helperTextPrimary ?? ''}\n helperTextSecondary={stats[currStatIndex]?.helperTextSecondary ?? ''}\n show={stats[currStatIndex]?.type === EPostGameStat.DIGITAL_METER}\n onComplete={onStatAnimationComplete}\n />\n </Styled.StatsWrapper>\n );\n }),\n);\n"],"names":["PostGameStats","memo","forwardRef","stats","show","onComplete","ref","currStatIndex","setCurrentStatIndex","useState","moveToNextAndPlay","useCallback","_b","_a","prev","onStatAnimationComplete","useImperativeHandle","jsxs","Styled.StatsWrapper","jsx","Styled.BlackBg","Points","EPostGameStat","_c","Streak","_d","_e","_f","_g","DigitalMeter","_h","_i","_j","_k","_l","_m","_n","_o"],"mappings":";;;;;;;AAUO,MAAMA,IAAgBC;AAAA,EAC3BC,EAAmD,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,YAAAC,EAAA,GAAcC,MAAQ;;AACvF,UAAM,CAACC,GAAeC,CAAmB,IAAIC,EAAS,CAAC,GAEjDC,IAAoBC,EAAY,MAAM;;AAGtC,WAFEC,KAAAC,IAAAV,EAAAI,CAAa,MAAb,gBAAAM,EAAgB,eAAhB,QAAAD,EAAA,KAAAC,IAEFN,MAAkBJ,EAAM,SAAS,GAAG;AACzB,QAAAE,KAAA,QAAAA;AAEb;AAAA,MACF;AACoB,MAAAG,EAAA,CAAAM,MAAQA,IAAO,CAAC;AAAA,IACnC,GAAA,CAACP,GAAeF,GAAYF,CAAK,CAAC,GAE/BY,IAA0BJ,EAAY,MAAM;;AAC5C,OAAAE,IAAAV,EAAMI,CAAa,MAAnB,QAAAM,EAAsB,aAGRH;IACjB,GAAA,CAACP,GAAOI,GAAeG,CAAiB,CAAC;AAM5C,WAJAM,EAAoBV,GAAK,OAAO;AAAA,MAC9B,mBAAAI;AAAA,IACA,EAAA,GAEE,CAACN,KAAQD,EAAM,WAAW,KAAKI,KAAiBJ,EAAM,SACjD,OAIP,gBAAAc,EAACC,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAe;AAAA,MAChB,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAOR,IAAAV,EAAMI,CAAa,MAAnB,gBAAAM,EAAsB,UAAS;AAAA,UACtC,QAAMD,IAAAT,EAAMI,CAAa,MAAnB,gBAAAK,EAAsB,UAASU,EAAc;AAAA,UACnD,YAAYP;AAAA,UACZ,WAAUQ,IAAApB,EAAMI,CAAa,MAAnB,gBAAAgB,EAAsB;AAAA,QAAA;AAAA,MAClC;AAAA,MACA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,cAAYC,IAAAtB,EAAMI,CAAa,MAAnB,gBAAAkB,EAAsB,UAAS;AAAA,UAC3C,QAAMC,IAAAvB,EAAMI,CAAa,MAAnB,gBAAAmB,EAAuB,UAASJ,EAAc;AAAA,UACpD,YAAYP;AAAA,UACZ,aAAYY,IAAAxB,EAAMI,CAAa,MAAnB,gBAAAoB,EAAsB;AAAA,UAClC,WAAUC,IAAAzB,EAAMI,CAAa,MAAnB,gBAAAqB,EAAsB;AAAA,QAAA;AAAA,MAClC;AAAA,MACA,gBAAAT;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,SAAOC,IAAA3B,EAAMI,CAAa,MAAnB,gBAAAuB,EAAsB,UAAS;AAAA,UACtC,YAAUC,IAAA5B,EAAMI,CAAa,MAAnB,gBAAAwB,EAAsB,aAAY;AAAA,UAC5C,eAAaC,IAAA7B,EAAMI,CAAa,MAAnB,gBAAAyB,EAAsB,gBAAe;AAAA,UAClD,eAAaC,IAAA9B,EAAMI,CAAa,MAAnB,gBAAA0B,EAAsB,gBAAe;AAAA,UAClD,gBAAcC,IAAA/B,EAAMI,CAAa,MAAnB,gBAAA2B,EAAsB,iBAAgB;AAAA,UACpD,qBAAmBC,IAAAhC,EAAMI,CAAa,MAAnB,gBAAA4B,EAAsB,sBAAqB;AAAA,UAC9D,uBAAqBC,IAAAjC,EAAMI,CAAa,MAAnB,gBAAA6B,EAAsB,wBAAuB;AAAA,UAClE,QAAMC,IAAAlC,EAAMI,CAAa,MAAnB,gBAAA8B,EAAsB,UAASf,EAAc;AAAA,UACnD,YAAYP;AAAA,QAAA;AAAA,MACd;AAAA,IACF,EAAA,CAAA;AAAA,EAAA,CAEH;AACH;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -298,7 +298,8 @@ export declare enum EPostGameStat {
|
|
|
298
298
|
STREAK = "streak",
|
|
299
299
|
ACCURACY = "accuracy",
|
|
300
300
|
CLOCK = "clock",
|
|
301
|
-
POINT = "point"
|
|
301
|
+
POINT = "point",
|
|
302
|
+
DIGITAL_METER = "digital-meter"
|
|
302
303
|
}
|
|
303
304
|
|
|
304
305
|
export declare const EraserIcon: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
@@ -1010,8 +1011,8 @@ declare interface IDigitalMeterProps {
|
|
|
1010
1011
|
show: boolean;
|
|
1011
1012
|
value: number;
|
|
1012
1013
|
maxValue: number;
|
|
1014
|
+
targetValue?: number;
|
|
1013
1015
|
displayText: string;
|
|
1014
|
-
targetValue: number;
|
|
1015
1016
|
progressType: 'stepper' | 'linear';
|
|
1016
1017
|
helperTextPrimary: string;
|
|
1017
1018
|
helperTextSecondary: string;
|
|
@@ -2093,6 +2094,12 @@ export declare interface IPostGameStat {
|
|
|
2093
2094
|
onComplete?: () => void;
|
|
2094
2095
|
helperText?: ReactNode;
|
|
2095
2096
|
stopAtEnd?: boolean;
|
|
2097
|
+
targetValue?: number;
|
|
2098
|
+
maxValue?: number;
|
|
2099
|
+
helperTextPrimary?: string;
|
|
2100
|
+
helperTextSecondary?: string;
|
|
2101
|
+
progressType?: 'linear' | 'stepper';
|
|
2102
|
+
displayText?: string;
|
|
2096
2103
|
}
|
|
2097
2104
|
|
|
2098
2105
|
export declare interface IPostGameStatsProps {
|
|
@@ -3373,8 +3380,8 @@ export declare const LOTTIE: {
|
|
|
3373
3380
|
SPINNER_WHITE: string;
|
|
3374
3381
|
SPLASH_SCREEN: string;
|
|
3375
3382
|
STAY_CONNECTED_LOTTIE: string;
|
|
3376
|
-
TARGET_ACHIEVED_TEXT: string;
|
|
3377
3383
|
TABLE_MODE_REVEAL: string;
|
|
3384
|
+
TARGET_ACHIEVED_TEXT: string;
|
|
3378
3385
|
TEACHER_VALIDATION: string;
|
|
3379
3386
|
TOTAL_STREAK: string;
|
|
3380
3387
|
TOTAL_TIME: string;
|
package/package.json
CHANGED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import n from "../../ui/text/text.js";
|
|
3
|
-
import { useAnimatedValue as m } from "./accuracy-utils.js";
|
|
4
|
-
const u = ({ accuracy: e, time: r }) => {
|
|
5
|
-
const t = m(0, e, r);
|
|
6
|
-
return /* @__PURE__ */ o(n, { $renderAs: "ah3", $color: "WHITE", children: `${Math.round(t)}%` });
|
|
7
|
-
};
|
|
8
|
-
export {
|
|
9
|
-
u as AnimatedPercentTextInput
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=accuracy-comps.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accuracy-comps.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-comps.tsx"],"sourcesContent":["import type { IAnimatedPercentTextProps } from './accuracy-types';\n\nimport Text from '../../ui/text/text';\nimport { useAnimatedValue } from './accuracy-utils';\n\nexport const AnimatedPercentTextInput = ({ accuracy, time }: IAnimatedPercentTextProps) => {\n const animatedValue = useAnimatedValue(0, accuracy, time);\n\n return <Text $renderAs=\"ah3\" $color=\"WHITE\">{`${Math.round(animatedValue)}%`}</Text>;\n};\n"],"names":["AnimatedPercentTextInput","accuracy","time","animatedValue","useAnimatedValue","jsx","Text"],"mappings":";;;AAKO,MAAMA,IAA2B,CAAC,EAAE,UAAAC,GAAU,MAAAC,QAAsC;AACzF,QAAMC,IAAgBC,EAAiB,GAAGH,GAAUC,CAAI;AAEjD,SAAA,gBAAAG,EAACC,GAAK,EAAA,WAAU,OAAM,QAAO,SAAS,UAAA,GAAG,KAAK,MAAMH,CAAa,CAAC,IAAI,CAAA;AAC/E;"}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import o, { keyframes as r, css as s } from "styled-components";
|
|
2
|
-
import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
|
3
|
-
import { GAME_LAUNCHER_ASSET_PADDING as a } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
|
|
4
|
-
const p = 50 * 84 / 100, c = r`
|
|
5
|
-
0%{
|
|
6
|
-
opacity: 0;
|
|
7
|
-
}
|
|
8
|
-
100%{
|
|
9
|
-
opacity: 1;
|
|
10
|
-
}
|
|
11
|
-
`, d = r`
|
|
12
|
-
0%{
|
|
13
|
-
opacity: 1;
|
|
14
|
-
}
|
|
15
|
-
100%{
|
|
16
|
-
opacity: 0;
|
|
17
|
-
}
|
|
18
|
-
`, m = o.div`
|
|
19
|
-
height: ${t}px;
|
|
20
|
-
width: ${t}px;
|
|
21
|
-
background: transparent;
|
|
22
|
-
display: flex;
|
|
23
|
-
align-items: center;
|
|
24
|
-
justify-content: center;
|
|
25
|
-
position: relative;
|
|
26
|
-
`, $ = o.div`
|
|
27
|
-
height: ${t + a}px;
|
|
28
|
-
width: ${t + a}px;
|
|
29
|
-
position: absolute;
|
|
30
|
-
flex: 1;
|
|
31
|
-
z-index: 1;
|
|
32
|
-
`, y = o.div`
|
|
33
|
-
height: ${t + a}px;
|
|
34
|
-
width: ${t + a}px;
|
|
35
|
-
position: absolute;
|
|
36
|
-
z-index: 2;
|
|
37
|
-
transform: ${({ $translateX: e = 0, $translateY: i = 0, $rotate: n = 0 }) => `translateX(${e}px) translateY(${i}px) rotate(${n}deg)`};
|
|
38
|
-
`, A = o.div`
|
|
39
|
-
height: 100%;
|
|
40
|
-
width: 100%;
|
|
41
|
-
`, h = o.div`
|
|
42
|
-
z-index: 2;
|
|
43
|
-
opacity: 0;
|
|
44
|
-
position: absolute;
|
|
45
|
-
animation: ${({ $animationType: e, $duration: i, $delay: n }) => s`
|
|
46
|
-
${e === "fadein" ? c : d} ${i}ms ${n}ms ease forwards
|
|
47
|
-
`};
|
|
48
|
-
transform: translateY(${(t + p) * 84 / 200 + 25}px);
|
|
49
|
-
`, u = o.div`
|
|
50
|
-
position: absolute;
|
|
51
|
-
z-index: 20;
|
|
52
|
-
display: flex;
|
|
53
|
-
flex-direction: row;
|
|
54
|
-
align-items: flex-end;
|
|
55
|
-
|
|
56
|
-
${({ $animationType: e, $duration: i }) => e && i && s`
|
|
57
|
-
animation: ${e === "fadein" ? c : d} ${i}ms linear forwards;
|
|
58
|
-
`}
|
|
59
|
-
`;
|
|
60
|
-
export {
|
|
61
|
-
m as Accuracy,
|
|
62
|
-
$ as AccuracyMeterLottie,
|
|
63
|
-
A as AccuracyNeedleLottie,
|
|
64
|
-
y as AnimatedAccuracyNeedleContainer,
|
|
65
|
-
u as PercentTextWrapper,
|
|
66
|
-
h as TextWrapper
|
|
67
|
-
};
|
|
68
|
-
//# sourceMappingURL=accuracy-styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accuracy-styled.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n 0%{\n opacity: 0;\n }\n 100%{\n opacity: 1;\n }\n`;\n\nconst fadeOut = keyframes`\n 0%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n`;\n\nexport const Accuracy = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const AccuracyMeterLottie = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n flex: 1;\n z-index: 1;\n`;\n\nexport const AnimatedAccuracyNeedleContainer = styled.div<{\n $translateX?: number;\n $translateY?: number;\n $rotate?: number;\n}>`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 2;\n transform: ${({ $translateX = 0, $translateY = 0, $rotate = 0 }) =>\n `translateX(${$translateX}px) translateY(${$translateY}px) rotate(${$rotate}deg)`};\n`;\n\nexport const AccuracyNeedleLottie = styled.div`\n height: 100%;\n width: 100%;\n`;\n\nexport const TextWrapper = styled.div<{\n $duration: number;\n $delay: number;\n $animationType: 'fadein' | 'fadeout';\n}>`\n z-index: 2;\n opacity: 0;\n position: absolute;\n animation: ${({ $animationType, $duration, $delay }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n `};\n transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n\nexport const PercentTextWrapper = styled.div<{\n $animationType?: 'fadein' | 'fadeout';\n $duration?: number;\n}>`\n position: absolute;\n z-index: 20;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n\n ${({ $animationType, $duration }) =>\n $animationType &&\n $duration &&\n css`\n animation: ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards;\n `}\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Accuracy","styled","GAME_LAUNCHER_SIZE","AccuracyMeterLottie","GAME_LAUNCHER_ASSET_PADDING","AnimatedAccuracyNeedleContainer","$translateX","$translateY","$rotate","AccuracyNeedleLottie","TextWrapper","$animationType","$duration","$delay","css","PercentTextWrapper"],"mappings":";;;AAKA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAAWC,EAAO;AAAA,YACnBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAsBF,EAAO;AAAA,YAC9BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA;AAAA,GAM9CC,IAAkCJ,EAAO;AAAA,YAK1CC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,eAG5C,CAAC,EAAE,aAAAE,IAAc,GAAG,aAAAC,IAAc,GAAG,SAAAC,IAAU,EAAE,MAC5D,cAAcF,CAAW,kBAAkBC,CAAW,cAAcC,CAAO,MAAM;AAAA,GAGxEC,IAAuBR,EAAO;AAAA;AAAA;AAAA,GAK9BS,IAAcT,EAAO;AAAA;AAAA;AAAA;AAAA,eAQnB,CAAC,EAAE,gBAAAU,GAAgB,WAAAC,GAAW,QAAAC,QAAaC;AAAA,MACpDH,MAAmB,WAAWd,IAASE,CAAO,IAAIa,CAAS,MAAMC,CAAM;AAAA,GAC1E;AAAA,2BACyBX,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA,GAGlEmB,IAAqBd,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUrC,CAAC,EAAE,gBAAAU,GAAgB,WAAAC,EAAU,MAC7BD,KACAC,KACAE;AAAA,mBACeH,MAAmB,WAAWd,IAASE,CAAO,IAAIa,CAAS;AAAA,KACzE;AAAA;"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { useState as F, useRef as l, useEffect as A } from "react";
|
|
2
|
-
import { NEEDLE as n } from "./constants.js";
|
|
3
|
-
const P = (e, t, a) => {
|
|
4
|
-
const [c, o] = F(e), r = l(null), s = l(null), u = (i) => {
|
|
5
|
-
s.current || (s.current = i);
|
|
6
|
-
const f = i - s.current, m = Math.min(f / a, 1), E = e + (t - e) * m;
|
|
7
|
-
o(E), m < 1 && (r.current = requestAnimationFrame(u));
|
|
8
|
-
};
|
|
9
|
-
return A(() => (r.current = requestAnimationFrame(u), () => {
|
|
10
|
-
r.current && cancelAnimationFrame(r.current);
|
|
11
|
-
})), c;
|
|
12
|
-
}, T = (e) => {
|
|
13
|
-
const t = n.PERCENT_FRAME[1] - n.PERCENT_FRAME[0], a = t / 100, c = Math.min(Math.ceil(a * e), t);
|
|
14
|
-
return n.IN_FRAMES[1] - n.IN_FRAMES[0] + c;
|
|
15
|
-
};
|
|
16
|
-
export {
|
|
17
|
-
T as getAccuracyFramesToPlay,
|
|
18
|
-
P as useAnimatedValue
|
|
19
|
-
};
|
|
20
|
-
//# sourceMappingURL=accuracy-utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accuracy-utils.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-utils.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\nimport { NEEDLE } from './constants';\n\nexport const useAnimatedValue = (start: number, end: number, duration: number) => {\n const [value, setValue] = useState(start);\n const requestRef = useRef<number | null>(null);\n const startTimeRef = useRef<number | null>(null);\n\n const animate = (timestamp: number) => {\n if (!startTimeRef.current) startTimeRef.current = timestamp;\n\n const elapsedTime = timestamp - startTimeRef.current;\n const progress = Math.min(elapsedTime / duration, 1); // Normalize to 0 - 1\n const newValue = start + (end - start) * progress;\n\n setValue(newValue);\n\n if (progress < 1) {\n requestRef.current = requestAnimationFrame(animate);\n }\n };\n\n useEffect(() => {\n requestRef.current = requestAnimationFrame(animate);\n\n return () => {\n if (requestRef.current) cancelAnimationFrame(requestRef.current);\n };\n });\n\n return value;\n};\n\nexport const getAccuracyFramesToPlay = (accuracy: number) => {\n // 100% = 100 frames\n // 1% = 1 fame\n const totalFrames = NEEDLE.PERCENT_FRAME[1] - NEEDLE.PERCENT_FRAME[0];\n const framesPerPercent = totalFrames / 100;\n\n const framesToPlay = Math.min(Math.ceil(framesPerPercent * accuracy), totalFrames);\n const initialFrames = NEEDLE.IN_FRAMES[1] - NEEDLE.IN_FRAMES[0];\n\n return initialFrames + framesToPlay;\n};\n"],"names":["useAnimatedValue","start","end","duration","value","setValue","useState","requestRef","useRef","startTimeRef","animate","timestamp","elapsedTime","progress","newValue","useEffect","getAccuracyFramesToPlay","accuracy","totalFrames","NEEDLE","framesPerPercent","framesToPlay"],"mappings":";;AAIO,MAAMA,IAAmB,CAACC,GAAeC,GAAaC,MAAqB;AAChF,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASL,CAAK,GAClCM,IAAaC,EAAsB,IAAI,GACvCC,IAAeD,EAAsB,IAAI,GAEzCE,IAAU,CAACC,MAAsB;AACrC,IAAKF,EAAa,YAASA,EAAa,UAAUE;AAE5C,UAAAC,IAAcD,IAAYF,EAAa,SACvCI,IAAW,KAAK,IAAID,IAAcT,GAAU,CAAC,GAC7CW,IAAWb,KAASC,IAAMD,KAASY;AAEzC,IAAAR,EAASS,CAAQ,GAEbD,IAAW,MACFN,EAAA,UAAU,sBAAsBG,CAAO;AAAA,EACpD;AAGF,SAAAK,EAAU,OACGR,EAAA,UAAU,sBAAsBG,CAAO,GAE3C,MAAM;AACX,IAAIH,EAAW,WAA8B,qBAAAA,EAAW,OAAO;AAAA,EAAA,EAElE,GAEMH;AACT,GAEaY,IAA0B,CAACC,MAAqB;AAG3D,QAAMC,IAAcC,EAAO,cAAc,CAAC,IAAIA,EAAO,cAAc,CAAC,GAC9DC,IAAmBF,IAAc,KAEjCG,IAAe,KAAK,IAAI,KAAK,KAAKD,IAAmBH,CAAQ,GAAGC,CAAW;AAGjF,SAFsBC,EAAO,UAAU,CAAC,IAAIA,EAAO,UAAU,CAAC,IAEvCE;AACzB;"}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { jsxs as v, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import I from "lottie-web";
|
|
3
|
-
import { memo as X, useRef as a, useState as d, useCallback as W, useEffect as b } from "react";
|
|
4
|
-
import { LOTTIE as M } from "../../../assets/lottie/lottie.js";
|
|
5
|
-
import { useCircleSounds as k } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
|
|
6
|
-
import { CircleSoundKey as h } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
|
|
7
|
-
import { delay as s } from "../../utils/utils.js";
|
|
8
|
-
import { AnimatedPercentTextInput as H } from "./accuracy-comps.js";
|
|
9
|
-
import { Accuracy as K, AccuracyMeterLottie as q, AnimatedAccuracyNeedleContainer as z, AccuracyNeedleLottie as B, TextWrapper as G, PercentTextWrapper as J } from "./accuracy-styled.js";
|
|
10
|
-
import { getAccuracyFramesToPlay as Q } from "./accuracy-utils.js";
|
|
11
|
-
import { NEEDLE_HOLD_TIME as C, METER as O, TEXT_DISAPPEAR_DELAY as V, TEXT_DISAPPEAR_DURATION as Z, TEXT_APPEAR_DURATION as ee, NEEDLE as F, NEEDLE_LOTTIE_FPS as U } from "./constants.js";
|
|
12
|
-
const Ae = X(({ show: u, onComplete: n, accuracy: l, helperText: E }) => {
|
|
13
|
-
const { play: c } = k(), y = a(null), p = a(null), o = a(), r = a(), [g, w] = d(!0), [m, T] = d(!1), [R, x] = d(!1), $ = a(0), _ = (F.IN_FRAMES[1] - F.IN_FRAMES[0]) / U * 1e3, S = W(async () => {
|
|
14
|
-
var A;
|
|
15
|
-
try {
|
|
16
|
-
await s(C), w(!1), T(!1), c(h.ACCURACY_OUT), (A = o.current) == null || A.playSegments(O.OUT_FRAMES, !0), await s(V), x(!0), n == null || n();
|
|
17
|
-
} catch (e) {
|
|
18
|
-
console.log(e);
|
|
19
|
-
}
|
|
20
|
-
}, [n, c]);
|
|
21
|
-
return b(() => {
|
|
22
|
-
if (u)
|
|
23
|
-
return (async () => {
|
|
24
|
-
var L;
|
|
25
|
-
const [e, i] = await Promise.all([
|
|
26
|
-
fetch(M.ACCURACY_METER),
|
|
27
|
-
fetch(M.ACCURACY_NEEDLE)
|
|
28
|
-
]), [Y, j] = await Promise.all([
|
|
29
|
-
e.json(),
|
|
30
|
-
i.json()
|
|
31
|
-
]);
|
|
32
|
-
o.current = I.loadAnimation({
|
|
33
|
-
container: y.current,
|
|
34
|
-
animationData: Y,
|
|
35
|
-
autoplay: !1,
|
|
36
|
-
loop: !1,
|
|
37
|
-
renderer: "svg"
|
|
38
|
-
}), r.current = I.loadAnimation({
|
|
39
|
-
container: p.current,
|
|
40
|
-
animationData: j,
|
|
41
|
-
autoplay: !1,
|
|
42
|
-
loop: !1,
|
|
43
|
-
renderer: "svg"
|
|
44
|
-
}), c(h.ACCURACY_IN), (L = o.current) == null || L.playSegments(O.IN_FRAMES, !0), s(_).then(() => {
|
|
45
|
-
var D, P, N;
|
|
46
|
-
const f = Q(l);
|
|
47
|
-
$.current = f, (D = r.current) == null || D.setSpeed(f / U), (P = r.current) == null || P.playSegments([0, f], !0), T(!0), (N = r.current) == null || N.addEventListener("complete", () => {
|
|
48
|
-
s(C).then(() => S());
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
})(), () => {
|
|
52
|
-
var e, i;
|
|
53
|
-
(e = o.current) == null || e.destroy(), (i = r.current) == null || i.destroy();
|
|
54
|
-
};
|
|
55
|
-
}, [u, l, _, S, c]), u ? /* @__PURE__ */ v(K, { children: [
|
|
56
|
-
/* @__PURE__ */ t(q, { ref: y }),
|
|
57
|
-
g && /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(B, { ref: p }) }),
|
|
58
|
-
E && /* @__PURE__ */ t(
|
|
59
|
-
G,
|
|
60
|
-
{
|
|
61
|
-
$delay: 1e3,
|
|
62
|
-
$animationType: R ? "fadeout" : "fadein",
|
|
63
|
-
$duration: R ? Z : ee,
|
|
64
|
-
children: E
|
|
65
|
-
}
|
|
66
|
-
),
|
|
67
|
-
m && /* @__PURE__ */ t(
|
|
68
|
-
J,
|
|
69
|
-
{
|
|
70
|
-
$animationType: m ? "fadein" : "fadeout",
|
|
71
|
-
$duration: 200,
|
|
72
|
-
children: /* @__PURE__ */ t(H, { accuracy: Math.round(l), time: 1e3 })
|
|
73
|
-
}
|
|
74
|
-
)
|
|
75
|
-
] }) : null;
|
|
76
|
-
});
|
|
77
|
-
export {
|
|
78
|
-
Ae as Accuracy
|
|
79
|
-
};
|
|
80
|
-
//# sourceMappingURL=accuracy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accuracy.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy.tsx"],"sourcesContent":["import type { IAccuracyProps } from './accuracy-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useEffect, useRef, useState, useCallback } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\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 { delay } from '../../utils/utils';\nimport { AnimatedPercentTextInput } from './accuracy-comps';\nimport * as Styled from './accuracy-styled';\nimport { getAccuracyFramesToPlay } from './accuracy-utils';\nimport {\n METER,\n NEEDLE,\n NEEDLE_HOLD_TIME,\n TEXT_APPEAR_DURATION,\n TEXT_DISAPPEAR_DELAY,\n TEXT_DISAPPEAR_DURATION,\n NEEDLE_LOTTIE_FPS,\n} from './constants';\n\nexport const Accuracy: FC<IAccuracyProps> = memo(({ show, onComplete, accuracy, helperText }) => {\n const { play } = useCircleSounds();\n const accuracyMeterRef = useRef<HTMLDivElement>(null);\n const accuracyNeedleRef = useRef<HTMLDivElement>(null);\n const accuracyMeterAnimationRef = useRef<AnimationItem>();\n const accuracyNeedleAnimationRef = useRef<AnimationItem>();\n\n const [showAccuracy, setShowAccuracy] = useState(true);\n const [showPercent, setShowPercent] = useState(false);\n const [fadeOut, setFadeOut] = useState(false);\n const needleFramesToPlay = useRef(0);\n\n const percentStartAnimationDelayInMs =\n ((NEEDLE.IN_FRAMES[1] - NEEDLE.IN_FRAMES[0]) / NEEDLE_LOTTIE_FPS) * 1000;\n\n const playExitAnimation = useCallback(async () => {\n try {\n await delay(NEEDLE_HOLD_TIME);\n setShowAccuracy(false);\n setShowPercent(false);\n play(CircleSoundKey.ACCURACY_OUT);\n accuracyMeterAnimationRef.current?.playSegments(METER.OUT_FRAMES, true);\n await delay(TEXT_DISAPPEAR_DELAY);\n setFadeOut(true);\n onComplete?.();\n } catch (err) {\n /* eslint-disable no-console */\n console.log(err);\n }\n }, [onComplete, play]);\n\n useEffect(() => {\n if (show) {\n const loadAnimations = async () => {\n const [meterLottie, needleLottie] = await Promise.all([\n fetch(LOTTIE.ACCURACY_METER),\n fetch(LOTTIE.ACCURACY_NEEDLE),\n ]);\n const [meterLottieData, needleLottieData] = await Promise.all([\n meterLottie.json(),\n needleLottie.json(),\n ]);\n\n accuracyMeterAnimationRef.current = Lottie.loadAnimation({\n container: accuracyMeterRef.current as Element,\n animationData: meterLottieData,\n autoplay: false,\n loop: false,\n renderer: 'svg',\n });\n\n accuracyNeedleAnimationRef.current = Lottie.loadAnimation({\n container: accuracyNeedleRef.current as Element,\n animationData: needleLottieData,\n autoplay: false,\n loop: false,\n renderer: 'svg',\n });\n\n play(CircleSoundKey.ACCURACY_IN);\n accuracyMeterAnimationRef.current?.playSegments(METER.IN_FRAMES, true);\n\n delay(percentStartAnimationDelayInMs).then(() => {\n const frames = getAccuracyFramesToPlay(accuracy);\n\n needleFramesToPlay.current = frames;\n accuracyNeedleAnimationRef.current?.setSpeed(frames / NEEDLE_LOTTIE_FPS);\n accuracyNeedleAnimationRef.current?.playSegments([0, frames], true);\n setShowPercent(true);\n\n accuracyNeedleAnimationRef.current?.addEventListener('complete', () => {\n delay(NEEDLE_HOLD_TIME).then(() => playExitAnimation());\n });\n });\n };\n\n loadAnimations();\n\n return () => {\n accuracyMeterAnimationRef.current?.destroy();\n accuracyNeedleAnimationRef.current?.destroy();\n };\n }\n }, [show, accuracy, percentStartAnimationDelayInMs, playExitAnimation, play]);\n\n if (show) {\n return (\n <Styled.Accuracy>\n <Styled.AccuracyMeterLottie ref={accuracyMeterRef} />\n {showAccuracy && (\n <Styled.AnimatedAccuracyNeedleContainer>\n <Styled.AccuracyNeedleLottie ref={accuracyNeedleRef} />\n </Styled.AnimatedAccuracyNeedleContainer>\n )}\n {helperText && (\n <Styled.TextWrapper\n $delay={1000}\n $animationType={fadeOut ? 'fadeout' : 'fadein'}\n $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n >\n {helperText}\n </Styled.TextWrapper>\n )}\n {showPercent && (\n <Styled.PercentTextWrapper\n $animationType={showPercent ? 'fadein' : 'fadeout'}\n $duration={showPercent ? 200 : 200}\n >\n <AnimatedPercentTextInput accuracy={Math.round(accuracy)} time={1000} />\n </Styled.PercentTextWrapper>\n )}\n </Styled.Accuracy>\n );\n }\n\n return null;\n});\n"],"names":["Accuracy","memo","show","onComplete","accuracy","helperText","play","useCircleSounds","accuracyMeterRef","useRef","accuracyNeedleRef","accuracyMeterAnimationRef","accuracyNeedleAnimationRef","showAccuracy","setShowAccuracy","useState","showPercent","setShowPercent","fadeOut","setFadeOut","needleFramesToPlay","percentStartAnimationDelayInMs","NEEDLE","NEEDLE_LOTTIE_FPS","playExitAnimation","useCallback","delay","NEEDLE_HOLD_TIME","CircleSoundKey","_a","METER","TEXT_DISAPPEAR_DELAY","err","useEffect","meterLottie","needleLottie","LOTTIE","meterLottieData","needleLottieData","Lottie","frames","getAccuracyFramesToPlay","_b","_c","jsxs","Styled.Accuracy","jsx","Styled.AccuracyMeterLottie","Styled.AnimatedAccuracyNeedleContainer","Styled.AccuracyNeedleLottie","Styled.TextWrapper","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION","Styled.PercentTextWrapper","AnimatedPercentTextInput"],"mappings":"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"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
const E = 1e3, T = 200, _ = 200, A = 133, R = 30, D = {
|
|
2
|
-
IN_FRAMES: [0, 27],
|
|
3
|
-
OUT_FRAMES: [27, 47]
|
|
4
|
-
}, o = {
|
|
5
|
-
IN_FRAMES: [0, 15],
|
|
6
|
-
PERCENT_FRAME: [15, 115]
|
|
7
|
-
};
|
|
8
|
-
export {
|
|
9
|
-
D as METER,
|
|
10
|
-
o as NEEDLE,
|
|
11
|
-
E as NEEDLE_HOLD_TIME,
|
|
12
|
-
R as NEEDLE_LOTTIE_FPS,
|
|
13
|
-
T as TEXT_APPEAR_DURATION,
|
|
14
|
-
_ as TEXT_DISAPPEAR_DELAY,
|
|
15
|
-
A as TEXT_DISAPPEAR_DURATION
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/accuracy/constants.ts"],"sourcesContent":["export const NEEDLE_HOLD_TIME = 1000;\nexport const TEXT_APPEAR_DURATION = 200;\nexport const TEXT_DISAPPEAR_DELAY = 200;\nexport const TEXT_DISAPPEAR_DURATION = 133;\nexport const NEEDLE_LOTTIE_FPS = 30;\n\nexport const METER: { IN_FRAMES: [number, number]; OUT_FRAMES: [number, number] } = {\n IN_FRAMES: [0, 27],\n OUT_FRAMES: [27, 47],\n};\n\nexport const NEEDLE: { IN_FRAMES: [number, number]; PERCENT_FRAME: [number, number] } = {\n IN_FRAMES: [0, 15],\n PERCENT_FRAME: [15, 115],\n};\n"],"names":["NEEDLE_HOLD_TIME","TEXT_APPEAR_DURATION","TEXT_DISAPPEAR_DELAY","TEXT_DISAPPEAR_DURATION","NEEDLE_LOTTIE_FPS","METER","NEEDLE"],"mappings":"AAAO,MAAMA,IAAmB,KACnBC,IAAuB,KACvBC,IAAuB,KACvBC,IAA0B,KAC1BC,IAAoB,IAEpBC,IAAuE;AAAA,EAClF,WAAW,CAAC,GAAG,EAAE;AAAA,EACjB,YAAY,CAAC,IAAI,EAAE;AACrB,GAEaC,IAA2E;AAAA,EACtF,WAAW,CAAC,GAAG,EAAE;AAAA,EACjB,eAAe,CAAC,IAAI,GAAG;AACzB;"}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import o, { keyframes as e, css as p } from "styled-components";
|
|
2
|
-
import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
|
3
|
-
import { GAME_LAUNCHER_ASSET_PADDING as i } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
|
|
4
|
-
const r = 50 * 84 / 100, c = e`
|
|
5
|
-
0%{
|
|
6
|
-
opacity: 0;
|
|
7
|
-
}
|
|
8
|
-
100%{
|
|
9
|
-
opacity: 1;
|
|
10
|
-
}
|
|
11
|
-
`, d = e`
|
|
12
|
-
0%{
|
|
13
|
-
opacity: 1;
|
|
14
|
-
}
|
|
15
|
-
100%{
|
|
16
|
-
opacity: 0;
|
|
17
|
-
}
|
|
18
|
-
`, f = o.div`
|
|
19
|
-
height: ${t}px;
|
|
20
|
-
width: ${t}px;
|
|
21
|
-
background: transparent;
|
|
22
|
-
display: flex;
|
|
23
|
-
align-items: center;
|
|
24
|
-
justify-content: center;
|
|
25
|
-
position: relative;
|
|
26
|
-
`, $ = o.div`
|
|
27
|
-
height: ${t + i}px;
|
|
28
|
-
width: ${t + i}px;
|
|
29
|
-
position: absolute;
|
|
30
|
-
z-index: 1;
|
|
31
|
-
`, h = o.div`
|
|
32
|
-
height: ${t + i}px;
|
|
33
|
-
width: ${t + i}px;
|
|
34
|
-
position: absolute;
|
|
35
|
-
z-index: 2;
|
|
36
|
-
`, y = o.div`
|
|
37
|
-
z-index: 2;
|
|
38
|
-
opacity: 0;
|
|
39
|
-
position: absolute;
|
|
40
|
-
animation: ${({ $animationType: n, $duration: s, $delay: a }) => p`
|
|
41
|
-
${n === "fadein" ? c : d} ${s}ms ${a}ms ease forwards
|
|
42
|
-
`};
|
|
43
|
-
transform: translateY(${(t + r) * 84 / 200 + 25}px);
|
|
44
|
-
`;
|
|
45
|
-
export {
|
|
46
|
-
f as Clock,
|
|
47
|
-
$ as ClockLottie,
|
|
48
|
-
h as ClockTimeSpentLottie,
|
|
49
|
-
y as TextWrapper
|
|
50
|
-
};
|
|
51
|
-
//# sourceMappingURL=clock-styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"clock-styled.js","sources":["../../../../src/features/post-game-stats/clock/clock-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n 0%{\n opacity: 0;\n }\n 100%{\n opacity: 1;\n }\n`;\n\nconst fadeOut = keyframes`\n 0%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n`;\n\nexport const Clock = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const ClockLottie = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 1;\n`;\n\nexport const ClockTimeSpentLottie = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 2;\n`;\n\nexport const TextWrapper = styled.div<{\n $duration: number;\n $delay: number;\n $animationType: 'fadein' | 'fadeout';\n}>`\n z-index: 2;\n opacity: 0;\n position: absolute;\n animation: ${({ $animationType, $duration, $delay }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n `};\n transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Clock","styled","GAME_LAUNCHER_SIZE","ClockLottie","GAME_LAUNCHER_ASSET_PADDING","ClockTimeSpentLottie","TextWrapper","$animationType","$duration","$delay","css"],"mappings":";;;AAKA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAAQC,EAAO;AAAA,YAChBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAcF,EAAO;AAAA,YACtBC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAK9CC,IAAuBJ,EAAO;AAAA,YAC/BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAK9CE,IAAcL,EAAO;AAAA;AAAA;AAAA;AAAA,eAQnB,CAAC,EAAE,gBAAAM,GAAgB,WAAAC,GAAW,QAAAC,QAAaC;AAAA,MACpDH,MAAmB,WAAWV,IAASE,CAAO,IAAIS,CAAS,MAAMC,CAAM;AAAA,GAC1E;AAAA,2BACyBP,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { CLOCK_TIME_SPENT_FPS as a, CLOCK_TIME_SPENT_DURATION as r } from "./constants.js";
|
|
2
|
-
const T = (t) => {
|
|
3
|
-
const e = a * r, o = e / (60 * 60 * 1e3);
|
|
4
|
-
return Math.min(Math.ceil(o * t), e);
|
|
5
|
-
};
|
|
6
|
-
export {
|
|
7
|
-
T as getClockTimeSpentFramesToPlay
|
|
8
|
-
};
|
|
9
|
-
//# sourceMappingURL=clock-util.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"clock-util.js","sources":["../../../../src/features/post-game-stats/clock/clock-util.ts"],"sourcesContent":["import { CLOCK_TIME_SPENT_FPS, CLOCK_TIME_SPENT_DURATION } from './constants';\n\nexport const getClockTimeSpentFramesToPlay = (timeInMs: number) => {\n // 1 hr = (30 * duration of lottie) frames\n // 60m * 60s * 1000ms = 30 * duration\n // 1ms = (30 * duration) / (60 * 60 * 1000) frames\n const totalFrames = CLOCK_TIME_SPENT_FPS * CLOCK_TIME_SPENT_DURATION; // lottie is of 8s\n\n const framesPerMilliSec = totalFrames / (60 * 60 * 1000);\n\n const framesToPlay = Math.min(Math.ceil(framesPerMilliSec * timeInMs), totalFrames);\n\n return framesToPlay;\n};\n"],"names":["getClockTimeSpentFramesToPlay","timeInMs","totalFrames","CLOCK_TIME_SPENT_FPS","CLOCK_TIME_SPENT_DURATION","framesPerMilliSec"],"mappings":";AAEa,MAAAA,IAAgC,CAACC,MAAqB;AAIjE,QAAMC,IAAcC,IAAuBC,GAErCC,IAAoBH,KAAe,KAAK,KAAK;AAI5C,SAFc,KAAK,IAAI,KAAK,KAAKG,IAAoBJ,CAAQ,GAAGC,CAAW;AAGpF;"}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { jsxs as K, jsx as u } from "react/jsx-runtime";
|
|
2
|
-
import I from "lottie-web";
|
|
3
|
-
import { memo as g, useState as h, useRef as o, useCallback as T, useEffect as j } from "react";
|
|
4
|
-
import { LOTTIE as k } from "../../../assets/lottie/lottie.js";
|
|
5
|
-
import { useCircleSounds as x } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
|
|
6
|
-
import { CircleSoundKey as R } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
|
|
7
|
-
import { delay as D } from "../../utils/utils.js";
|
|
8
|
-
import { Clock as U, ClockLottie as $, ClockTimeSpentLottie as w, TextWrapper as X } from "./clock-styled.js";
|
|
9
|
-
import { getClockTimeSpentFramesToPlay as Y } from "./clock-util.js";
|
|
10
|
-
import { CLOCK_TIME_SPENT_FPS as H, CLOCK as N, CLOCK_INFRAME_LOTTIE_TO_PLAY as W, TIME_LOTTIE_TO_PLAY_IN as b, TEXT_DISAPPEAR_DURATION as q, TEXT_APPEAR_DURATION as z, TIME_SHOWN_HOLD_TIME as B, TEXT_DISAPPEAR_DELAY as G } from "./constants.js";
|
|
11
|
-
const it = g(({ show: s, onComplete: i, timeInMs: f, helperText: p }) => {
|
|
12
|
-
const { play: c } = x(), [L, F] = h(!1), m = o(!1), l = o(0), d = o(null), E = o(null), a = o(), n = o(), _ = T(() => {
|
|
13
|
-
var t, e;
|
|
14
|
-
const r = Y(f);
|
|
15
|
-
r && (l.current = r, (t = n.current) == null || t.setSpeed(r / H), (e = n.current) == null || e.playSegments([0, r], !0), m.current = !0);
|
|
16
|
-
}, [f]), S = T(async () => {
|
|
17
|
-
var r, t;
|
|
18
|
-
await D(B), (r = n.current) == null || r.playSegments([l.current, 0], !0), await D(G), F(!0), m.current && ((t = n.current) == null || t.addEventListener("complete", () => {
|
|
19
|
-
var e;
|
|
20
|
-
c(R.CLOCK_OUT), (e = a.current) == null || e.playSegments(N.OUT_FRAMES, !0);
|
|
21
|
-
}));
|
|
22
|
-
}, [l, c]), A = T(() => {
|
|
23
|
-
i == null || i();
|
|
24
|
-
}, [i]);
|
|
25
|
-
return j(() => {
|
|
26
|
-
if (s)
|
|
27
|
-
return (async () => {
|
|
28
|
-
var O, C, y;
|
|
29
|
-
const [t, e] = await Promise.all([
|
|
30
|
-
fetch(k.TOTAL_TIME),
|
|
31
|
-
fetch(k.TOTAL_TIME_SPENT)
|
|
32
|
-
]), [M, v] = await Promise.all([
|
|
33
|
-
t.json(),
|
|
34
|
-
e.json()
|
|
35
|
-
]);
|
|
36
|
-
a.current = I.loadAnimation({
|
|
37
|
-
container: d.current,
|
|
38
|
-
animationData: M,
|
|
39
|
-
autoplay: !1,
|
|
40
|
-
loop: !1,
|
|
41
|
-
renderer: "canvas"
|
|
42
|
-
}), n.current = I.loadAnimation({
|
|
43
|
-
container: E.current,
|
|
44
|
-
animationData: v,
|
|
45
|
-
autoplay: !1,
|
|
46
|
-
loop: !1,
|
|
47
|
-
renderer: "canvas"
|
|
48
|
-
}), c(R.CLOCK_IN), (O = a.current) == null || O.playSegments(N.IN_FRAMES, !0), (C = a.current) == null || C.addEventListener("complete", () => {
|
|
49
|
-
m.current ? A() : _();
|
|
50
|
-
}), (y = n.current) == null || y.addEventListener("complete", () => {
|
|
51
|
-
var P;
|
|
52
|
-
(P = n.current) == null || P.removeEventListener("complete"), S();
|
|
53
|
-
});
|
|
54
|
-
})(), () => {
|
|
55
|
-
var t, e;
|
|
56
|
-
(t = a.current) == null || t.destroy(), (e = n.current) == null || e.destroy();
|
|
57
|
-
};
|
|
58
|
-
}, [s, _, A, S, c]), s ? /* @__PURE__ */ K(U, { children: [
|
|
59
|
-
/* @__PURE__ */ u($, { ref: d }),
|
|
60
|
-
/* @__PURE__ */ u(w, { ref: E }),
|
|
61
|
-
p && /* @__PURE__ */ u(
|
|
62
|
-
X,
|
|
63
|
-
{
|
|
64
|
-
$delay: W + b,
|
|
65
|
-
$animationType: L ? "fadeout" : "fadein",
|
|
66
|
-
$duration: L ? q : z,
|
|
67
|
-
children: p
|
|
68
|
-
}
|
|
69
|
-
)
|
|
70
|
-
] }) : null;
|
|
71
|
-
});
|
|
72
|
-
export {
|
|
73
|
-
it as Clock
|
|
74
|
-
};
|
|
75
|
-
//# sourceMappingURL=clock.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"clock.js","sources":["../../../../src/features/post-game-stats/clock/clock.tsx"],"sourcesContent":["import type { IClockProps } from './clock-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\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 { delay } from '../../utils/utils';\nimport * as Styled from './clock-styled';\nimport { getClockTimeSpentFramesToPlay } from './clock-util';\nimport {\n CLOCK,\n CLOCK_TIME_SPENT_FPS,\n TIME_SHOWN_HOLD_TIME,\n TEXT_APPEAR_DURATION,\n TEXT_DISAPPEAR_DELAY,\n TEXT_DISAPPEAR_DURATION,\n CLOCK_INFRAME_LOTTIE_TO_PLAY,\n TIME_LOTTIE_TO_PLAY_IN,\n} from './constants';\n\nexport const Clock: FC<IClockProps> = memo(({ show, onComplete, timeInMs, helperText }) => {\n const { play } = useCircleSounds();\n const [fadeOut, setFadeOut] = useState(false);\n const isClockTimeSpentShown = useRef(false);\n const framesToPlay = useRef(0);\n\n const clockLottieContainerRef = useRef<HTMLDivElement>(null);\n const clockTimeSpentLottieContainerRef = useRef<HTMLDivElement>(null);\n const clockLottieAnimationRef = useRef<AnimationItem>();\n const clockTimeSpentLottieAnimationRef = useRef<AnimationItem>();\n\n const setClockTimeSpentFrames = useCallback(() => {\n const frames = getClockTimeSpentFramesToPlay(timeInMs);\n\n if (frames) {\n framesToPlay.current = frames;\n // Speed adjustment\n clockTimeSpentLottieAnimationRef.current?.setSpeed(frames / CLOCK_TIME_SPENT_FPS);\n clockTimeSpentLottieAnimationRef.current?.playSegments([0, frames], true);\n isClockTimeSpentShown.current = true;\n }\n }, [timeInMs]);\n\n const onClockTimeSpentExitAnimationFinished = useCallback(async () => {\n await delay(TIME_SHOWN_HOLD_TIME);\n\n // Reverse play time spent animation\n clockTimeSpentLottieAnimationRef.current?.playSegments([framesToPlay.current, 0], true);\n\n await delay(TEXT_DISAPPEAR_DELAY);\n setFadeOut(true);\n\n if (isClockTimeSpentShown.current) {\n clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n play(CircleSoundKey.CLOCK_OUT);\n clockLottieAnimationRef.current?.playSegments(CLOCK.OUT_FRAMES, true);\n });\n }\n }, [framesToPlay, play]);\n\n const onAnimationEnd = useCallback(() => {\n onComplete?.();\n }, [onComplete]);\n\n // Play entry animation\n useEffect(() => {\n if (show) {\n const loadAnimations = async () => {\n const [timeLottiePath, timeSpentLottiePath] = await Promise.all([\n fetch(LOTTIE.TOTAL_TIME),\n fetch(LOTTIE.TOTAL_TIME_SPENT),\n ]);\n const [timeLottieData, timeSpentLottieData] = await Promise.all([\n timeLottiePath.json(),\n timeSpentLottiePath.json(),\n ]);\n\n // Clock Lottie\n clockLottieAnimationRef.current = Lottie.loadAnimation({\n container: clockLottieContainerRef.current as Element,\n animationData: timeLottieData,\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n });\n\n // Clock Time Spent Lottie\n clockTimeSpentLottieAnimationRef.current = Lottie.loadAnimation({\n container: clockTimeSpentLottieContainerRef.current as Element,\n animationData: timeSpentLottieData,\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n });\n\n // Play clock in animation sounds and lottie\n play(CircleSoundKey.CLOCK_IN);\n clockLottieAnimationRef.current?.playSegments(CLOCK.IN_FRAMES, true);\n\n clockLottieAnimationRef.current?.addEventListener('complete', () => {\n if (!isClockTimeSpentShown.current) {\n setClockTimeSpentFrames();\n } else {\n onAnimationEnd();\n }\n });\n\n // Setup event listener for time spent animation\n clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n clockTimeSpentLottieAnimationRef.current?.removeEventListener('complete');\n onClockTimeSpentExitAnimationFinished();\n });\n };\n\n loadAnimations();\n\n return () => {\n clockLottieAnimationRef.current?.destroy();\n clockTimeSpentLottieAnimationRef.current?.destroy();\n };\n }\n }, [show, setClockTimeSpentFrames, onAnimationEnd, onClockTimeSpentExitAnimationFinished, play]);\n\n if (show) {\n return (\n <Styled.Clock>\n <Styled.ClockLottie ref={clockLottieContainerRef} />\n <Styled.ClockTimeSpentLottie ref={clockTimeSpentLottieContainerRef} />\n {helperText && (\n <Styled.TextWrapper\n $delay={CLOCK_INFRAME_LOTTIE_TO_PLAY + TIME_LOTTIE_TO_PLAY_IN}\n $animationType={fadeOut ? 'fadeout' : 'fadein'}\n $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n >\n {helperText}\n </Styled.TextWrapper>\n )}\n </Styled.Clock>\n );\n }\n\n return null;\n});\n"],"names":["Clock","memo","show","onComplete","timeInMs","helperText","play","useCircleSounds","fadeOut","setFadeOut","useState","isClockTimeSpentShown","useRef","framesToPlay","clockLottieContainerRef","clockTimeSpentLottieContainerRef","clockLottieAnimationRef","clockTimeSpentLottieAnimationRef","setClockTimeSpentFrames","useCallback","frames","getClockTimeSpentFramesToPlay","_a","CLOCK_TIME_SPENT_FPS","_b","onClockTimeSpentExitAnimationFinished","delay","TIME_SHOWN_HOLD_TIME","TEXT_DISAPPEAR_DELAY","CircleSoundKey","CLOCK","onAnimationEnd","useEffect","timeLottiePath","timeSpentLottiePath","LOTTIE","timeLottieData","timeSpentLottieData","Lottie","_c","jsxs","Styled.Clock","jsx","Styled.ClockLottie","Styled.ClockTimeSpentLottie","Styled.TextWrapper","CLOCK_INFRAME_LOTTIE_TO_PLAY","TIME_LOTTIE_TO_PLAY_IN","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION"],"mappings":"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"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
const _ = {
|
|
2
|
-
IN_FRAMES: [0, 27],
|
|
3
|
-
OUT_FRAMES: [27, 34]
|
|
4
|
-
}, T = 30, E = 8, A = (_.IN_FRAMES[1] - _.IN_FRAMES[0]) / T * 1e3, I = 1e3, O = 1e3, N = 200, P = 200, R = 133;
|
|
5
|
-
export {
|
|
6
|
-
_ as CLOCK,
|
|
7
|
-
A as CLOCK_INFRAME_LOTTIE_TO_PLAY,
|
|
8
|
-
E as CLOCK_TIME_SPENT_DURATION,
|
|
9
|
-
T as CLOCK_TIME_SPENT_FPS,
|
|
10
|
-
N as TEXT_APPEAR_DURATION,
|
|
11
|
-
P as TEXT_DISAPPEAR_DELAY,
|
|
12
|
-
R as TEXT_DISAPPEAR_DURATION,
|
|
13
|
-
O as TIME_LOTTIE_TO_PLAY_IN,
|
|
14
|
-
I as TIME_SHOWN_HOLD_TIME
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/clock/constants.ts"],"sourcesContent":["export const CLOCK: { IN_FRAMES: [number, number]; OUT_FRAMES: [number, number] } = {\n IN_FRAMES: [0, 27],\n OUT_FRAMES: [27, 34],\n};\n\nexport const CLOCK_TIME_SPENT_FPS = 30;\nexport const CLOCK_TIME_SPENT_DURATION = 8; // in sec\n\nexport const CLOCK_INFRAME_LOTTIE_TO_PLAY =\n ((CLOCK.IN_FRAMES[1] - CLOCK.IN_FRAMES[0]) / CLOCK_TIME_SPENT_FPS) * 1000;\n\n// in ms\nexport const TIME_SHOWN_HOLD_TIME = 1000;\nexport const TIME_LOTTIE_TO_PLAY_IN = 1000;\nexport const TEXT_APPEAR_DURATION = 200;\nexport const TEXT_DISAPPEAR_DELAY = 200;\nexport const TEXT_DISAPPEAR_DURATION = 133;\n"],"names":["CLOCK","CLOCK_TIME_SPENT_FPS","CLOCK_TIME_SPENT_DURATION","CLOCK_INFRAME_LOTTIE_TO_PLAY","TIME_SHOWN_HOLD_TIME","TIME_LOTTIE_TO_PLAY_IN","TEXT_APPEAR_DURATION","TEXT_DISAPPEAR_DELAY","TEXT_DISAPPEAR_DURATION"],"mappings":"AAAO,MAAMA,IAAuE;AAAA,EAClF,WAAW,CAAC,GAAG,EAAE;AAAA,EACjB,YAAY,CAAC,IAAI,EAAE;AACrB,GAEaC,IAAuB,IACvBC,IAA4B,GAE5BC,KACTH,EAAM,UAAU,CAAC,IAAIA,EAAM,UAAU,CAAC,KAAKC,IAAwB,KAG1DG,IAAuB,KACvBC,IAAyB,KACzBC,IAAuB,KACvBC,IAAuB,KACvBC,IAA0B;"}
|