@cuemath/leap 2.8.36-tables-hg2 → 2.8.36-tables-hg4

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.
Files changed (12) hide show
  1. package/dist/assets/lottie/lottie.js +1 -1
  2. package/dist/assets/lottie/lottie.js.map +1 -1
  3. package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +15 -14
  4. package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +1 -1
  5. package/dist/features/post-game-stats/digital-meter/digital-meter.js +85 -96
  6. package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -1
  7. package/dist/features/post-game-stats/enums/post-game-stats-enum.js +1 -1
  8. package/dist/features/post-game-stats/enums/post-game-stats-enum.js.map +1 -1
  9. package/dist/features/post-game-stats/post-game-stats.js +74 -62
  10. package/dist/features/post-game-stats/post-game-stats.js.map +1 -1
  11. package/dist/index.d.ts +10 -3
  12. package/package.json +1 -1
package/dist/assets/lottie/lottie.js CHANGED
@@ -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`,
package/dist/assets/lottie/lottie.js.map CHANGED
@@ -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 TARGET_ACHIEVED_TEXT: `${PREFIX}static/target-achieved-text.053bd142.json`,\n TABLE_MODE_REVEAL: `${PREFIX}static/table-mode-reveal.b44a82c3.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,sBAAsB,GAAGA,CAAM;AAAA,EAC/B,mBAAmB,GAAGA,CAAM;AAAA,EAC5B,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;"}
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;"}
package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js CHANGED
@@ -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 T = o.div`
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
- `, g = o.div`
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
- `, E = o.div`
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
- `, v = o(i)`
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
- `, C = o(i)`
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
- `, I = o.div`
66
+ `;
67
+ o.div`
67
68
  height: 100%;
68
69
  width: 100%;
69
- `, R = o(i)`
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
- g as ContentContainer,
75
- T as DigitalMeter,
76
- v as HelperTextPrimary,
77
- C as HelperTextSecondary,
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
- E as NumberCountContainer,
83
- R as RainboxColorText,
84
- I as TargetAchievedTextLottie
84
+ T as NumberCountContainer,
85
+ I as RainboxColorText
85
86
  };
86
87
  //# sourceMappingURL=digital-meter-styled.js.map
package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map CHANGED
@@ -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","TargetAchievedTextLottie","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,GAG7BE,IAA2BpB,EAAO;AAAA;AAAA;AAAA,GAKlCqB,IAAmBrB,EAAOiB,CAAI;AAAA,eAC5B,CAAC,EAAE,mBAAAd,EAAA,MAAyBA,IAAoBmB,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}
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;"}
package/dist/features/post-game-stats/digital-meter/digital-meter.js CHANGED
@@ -1,163 +1,152 @@
1
- import { jsxs as o, jsx as e, Fragment as T } from "react/jsx-runtime";
2
- import b from "lottie-web";
3
- import { memo as G, useState as O, useRef as W, useEffect as R } from "react";
4
- import { LOTTIE as y } from "../../../assets/lottie/lottie.js";
1
+ import { jsxs as n, jsx as r, Fragment as T } from "react/jsx-runtime";
2
+ import { memo as O, useState as p, useEffect as W } from "react";
3
+ import { LOTTIE as M } from "../../../assets/lottie/lottie.js";
5
4
  import { GAME_LAUNCHER_SIZE as h } from "../../circle-games/game-launcher/comps/card-container/constants.js";
6
5
  import E from "../../ui/layout/flex-view.js";
7
- import M from "../../ui/separator/separator.js";
8
- import L from "../../ui/text/text.js";
9
- import { NumberCountAnimation as F } from "../number-count-animation/number-count-animation.js";
10
- import { AnimatedArc as f } from "./comp/animated-arc/animated-arc.js";
11
- import { TARGET_ACHIEVED_DELAY as w, TOTAL_ANIMATION_DURATION as B, TOTAL_ARC_AVAILABLE as l, BORDER_OFFSET as _, PROGRESS_FILL_DURATION as m, PROGRESS_FILL_DELAY as $ } from "./constants.js";
12
- import { DigitalMeter as P, ContentContainer as U, NumberCountContainer as j, RainboxColorText as g, LineMarking as C, MarkingContainer as D, MarkingText as u, HelperTextWrapper as Y, TargetAchievedTextLottie as K, HelperTextPrimary as X, HelperTextSecondary as Z } from "./digital-meter-styled.js";
13
- const q = () => import(y.TARGET_ACHIEVED_TEXT), cr = G(
6
+ import y from "../../ui/lottie-animation/lottie-animation.js";
7
+ import F from "../../ui/separator/separator.js";
8
+ import R from "../../ui/text/text.js";
9
+ import { NumberCountAnimation as u } from "../number-count-animation/number-count-animation.js";
10
+ import { AnimatedArc as _ } from "./comp/animated-arc/animated-arc.js";
11
+ import { TARGET_ACHIEVED_DELAY as w, TOTAL_ANIMATION_DURATION as B, TOTAL_ARC_AVAILABLE as l, BORDER_OFFSET as $, PROGRESS_FILL_DURATION as m, PROGRESS_FILL_DELAY as f } from "./constants.js";
12
+ import { DigitalMeter as P, ContentContainer as U, NumberCountContainer as j, RainboxColorText as g, LineMarking as L, MarkingContainer as C, MarkingText as D, HelperTextWrapper as Y, HelperTextPrimary as K, HelperTextSecondary as X } from "./digital-meter-styled.js";
13
+ const nr = O(
14
14
  ({
15
- show: s,
16
- value: a,
17
- maxValue: i,
18
- targetValue: c,
15
+ show: S,
16
+ value: A,
17
+ maxValue: t,
18
+ targetValue: o = 0,
19
19
  displayText: H,
20
- progressType: A,
20
+ progressType: d,
21
21
  helperTextPrimary: N,
22
- helperTextSecondary: S,
23
- onComplete: p
22
+ helperTextSecondary: k,
23
+ onComplete: I
24
24
  }) => {
25
- const [n, k] = O(!1), I = W(null);
26
- return R(() => {
27
- let t, r;
28
- return s && (t = setTimeout(() => {
29
- a >= c && k(!0);
30
- }, w * 1e3), r = setTimeout(() => {
31
- p();
25
+ const [c, b] = p(!1), [s, G] = p(S);
26
+ return W(() => {
27
+ let i, e;
28
+ return s && (i = setTimeout(() => {
29
+ A >= o && b(!0);
30
+ }, w * 1e3), e = setTimeout(() => {
31
+ I(), G(!1);
32
32
  }, B * 1e3)), () => {
33
- t && clearTimeout(t), r && clearTimeout(r);
33
+ i && clearTimeout(i), e && clearTimeout(e);
34
34
  };
35
- }, [s, a, c, p]), R(() => {
36
- n && (async () => {
37
- const { default: r } = await q();
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
+ }, [s, A, o, I]), s ? /* @__PURE__ */ n(P, { $isTargetAchieved: c, children: [
36
+ /* @__PURE__ */ r(
37
+ _,
49
38
  {
50
39
  targetAngle: l,
51
40
  strokeWidth: 16,
52
41
  color: "BLACK_5",
53
- radius: (h - _) / 2,
42
+ radius: (h - $) / 2,
54
43
  duration: 0
55
44
  }
56
45
  ),
57
- /* @__PURE__ */ e(U, { children: /* @__PURE__ */ o(E, { $flexDirection: "column", $alignItems: "center", children: [
58
- /* @__PURE__ */ o(E, { $flexDirection: "row", $alignItems: "flex-end", children: [
59
- /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(
46
+ /* @__PURE__ */ r(U, { children: /* @__PURE__ */ n(E, { $flexDirection: "column", $alignItems: "center", children: [
47
+ /* @__PURE__ */ n(E, { $flexDirection: "row", $alignItems: "flex-end", children: [
48
+ /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(
60
49
  g,
61
50
  {
62
51
  $renderAs: "ah1",
63
52
  $color: "GREEN_4",
64
- $isTargetAchieved: n,
65
- children: /* @__PURE__ */ e(
66
- F,
53
+ $isTargetAchieved: c,
54
+ children: /* @__PURE__ */ r(
55
+ u,
67
56
  {
68
57
  initialValue: 0,
69
- targetValue: a,
58
+ targetValue: A,
70
59
  durationInSec: m,
71
- delayInSec: $
60
+ delayInSec: f
72
61
  }
73
62
  )
74
63
  }
75
64
  ) }),
76
- A === "stepper" && /* @__PURE__ */ o(L, { $renderAs: "ac2", $color: "WHITE", children: [
65
+ d === "stepper" && /* @__PURE__ */ n(R, { $renderAs: "ac2", $color: "WHITE", children: [
77
66
  "/",
78
- i
67
+ t
79
68
  ] })
80
69
  ] }),
81
- /* @__PURE__ */ e(M, { height: 8 }),
82
- /* @__PURE__ */ e(L, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: H })
70
+ /* @__PURE__ */ r(F, { height: 8 }),
71
+ /* @__PURE__ */ r(R, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: H })
83
72
  ] }) }),
84
- A === "stepper" && Array.from({ length: a }, (t, r) => {
85
- const d = l / i;
86
- return /* @__PURE__ */ e(
87
- f,
73
+ d === "stepper" && Array.from({ length: A }, (i, e) => {
74
+ const a = l / t;
75
+ return /* @__PURE__ */ r(
76
+ _,
88
77
  {
89
- startAngle: d * r,
90
- targetAngle: d,
78
+ startAngle: a * e,
79
+ targetAngle: a,
91
80
  strokeWidth: 12,
92
81
  color: "GREEN_4",
93
- radius: (h - _) / 2,
82
+ radius: (h - $) / 2,
94
83
  mode: "fade",
95
- duration: m / i,
96
- delay: $ + m / i * r,
97
- playRainbowColors: n
84
+ duration: m / t,
85
+ delay: f + m / t * e,
86
+ playRainbowColors: c
98
87
  },
99
- r
88
+ e
100
89
  );
101
90
  }),
102
- A === "stepper" && Array.from({ length: i + 1 }, (t, r) => {
103
- const d = l / i;
104
- return /* @__PURE__ */ o(T, { children: [
105
- /* @__PURE__ */ e(C, { $angle: d * r }, r + "linemarking"),
106
- /* @__PURE__ */ e(D, { $angle: d * r, children: /* @__PURE__ */ e(u, { $angle: d * r, children: /* @__PURE__ */ e(
91
+ d === "stepper" && Array.from({ length: t + 1 }, (i, e) => {
92
+ const a = l / t;
93
+ return /* @__PURE__ */ n(T, { children: [
94
+ /* @__PURE__ */ r(L, { $angle: a * e }, e + "linemarking"),
95
+ /* @__PURE__ */ r(C, { $angle: a * e, children: /* @__PURE__ */ r(D, { $angle: a * e, children: /* @__PURE__ */ r(
107
96
  g,
108
97
  {
109
98
  $renderAs: "ac4-black",
110
- $isTargetAchieved: r === c && n,
111
- $color: r === c ? "GREEN_4" : "WHITE_T_60",
112
- children: r
99
+ $isTargetAchieved: e === o && c,
100
+ $color: e === o ? "GREEN_4" : "WHITE_T_60",
101
+ children: e
113
102
  }
114
- ) }) }, r)
103
+ ) }) }, e)
115
104
  ] });
116
105
  }),
117
- A === "linear" && /* @__PURE__ */ o(T, { children: [
118
- /* @__PURE__ */ e(
119
- f,
106
+ d === "linear" && /* @__PURE__ */ n(T, { children: [
107
+ /* @__PURE__ */ r(
108
+ _,
120
109
  {
121
- targetAngle: a * l / i,
110
+ targetAngle: A * l / t,
122
111
  strokeWidth: 12,
123
112
  color: "GREEN_4",
124
- radius: (h - _) / 2,
113
+ radius: (h - $) / 2,
125
114
  duration: m,
126
- delay: $,
127
- playRainbowColors: n
115
+ delay: f,
116
+ playRainbowColors: c
128
117
  }
129
118
  ),
130
- /* @__PURE__ */ o(T, { children: [
131
- /* @__PURE__ */ e(C, { $angle: c * l / i }),
132
- Array.from(/* @__PURE__ */ new Set([0, c, i])).map((t, r) => /* @__PURE__ */ e(
133
- D,
119
+ /* @__PURE__ */ n(T, { children: [
120
+ /* @__PURE__ */ r(L, { $angle: o * l / t }),
121
+ Array.from(/* @__PURE__ */ new Set([0, o, t])).map((i, e) => /* @__PURE__ */ r(
122
+ C,
134
123
  {
135
- $angle: t * l / i,
136
- children: /* @__PURE__ */ e(u, { $angle: t * l / i, children: /* @__PURE__ */ e(
124
+ $angle: i * l / t,
125
+ children: /* @__PURE__ */ r(D, { $angle: i * l / t, children: /* @__PURE__ */ r(
137
126
  g,
138
127
  {
139
128
  $renderAs: "ac4-black",
140
- $color: t === c ? "GREEN_4" : "WHITE_T_60",
141
- $isTargetAchieved: a >= t && n && t === c,
142
- children: t
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
- r
135
+ e
147
136
  ))
148
137
  ] })
149
138
  ] }),
150
- /* @__PURE__ */ o(Y, { children: [
151
- n && /* @__PURE__ */ e(K, { ref: I }),
152
- !n && /* @__PURE__ */ o(E, { $flexDirection: "column", $alignItems: "center", children: [
153
- /* @__PURE__ */ e(X, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: N }),
154
- /* @__PURE__ */ e(Z, { $renderAs: "ab1", $color: "WHITE", children: S })
139
+ /* @__PURE__ */ n(Y, { children: [
140
+ c && /* @__PURE__ */ r(y, { src: M.TARGET_ACHIEVED_TEXT }),
141
+ !c && /* @__PURE__ */ n(E, { $flexDirection: "column", $alignItems: "center", children: [
142
+ /* @__PURE__ */ r(K, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: N }),
143
+ /* @__PURE__ */ r(X, { $renderAs: "ab1", $color: "WHITE", children: k })
155
144
  ] })
156
145
  ] })
157
146
  ] }) : null;
158
147
  }
159
148
  );
160
149
  export {
161
- cr as DigitalMeter
150
+ nr as DigitalMeter
162
151
  };
163
152
  //# sourceMappingURL=digital-meter.js.map
package/dist/features/post-game-stats/digital-meter/digital-meter.js.map CHANGED
@@ -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 LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { NumberCountAnimation } from '../number-count-animation/number-count-animation';\nimport { AnimatedArc } from './comp/animated-arc/animated-arc';\nimport {\n BORDER_OFFSET,\n PROGRESS_FILL_DELAY,\n PROGRESS_FILL_DURATION,\n TARGET_ACHIEVED_DELAY,\n TOTAL_ANIMATION_DURATION,\n TOTAL_ARC_AVAILABLE,\n} from './constants';\nimport * as Styled from './digital-meter-styled';\n\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n ({\n show,\n value,\n maxValue,\n targetValue = 0,\n displayText,\n progressType,\n helperTextPrimary,\n helperTextSecondary,\n onComplete,\n }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n const [starAnimation, setStarAnimation] = useState(show);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n\n if (starAnimation) {\n timer = setTimeout(() => {\n if (value >= targetValue) {\n setIsTargetAchieved(true);\n }\n }, TARGET_ACHIEVED_DELAY * 1000);\n\n timerForAnimationComplete = setTimeout(() => {\n onComplete();\n setStarAnimation(false);\n }, TOTAL_ANIMATION_DURATION * 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n };\n }, [starAnimation, value, targetValue, onComplete]);\n\n if (starAnimation) {\n return (\n <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n {/* complete arc area to be filled */}\n <AnimatedArc\n targetAngle={TOTAL_ARC_AVAILABLE}\n strokeWidth={16}\n color=\"BLACK_5\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n duration={0}\n />\n\n {/* center area for the content */}\n <Styled.ContentContainer>\n <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n <FlexView $flexDirection=\"row\" $alignItems=\"flex-end\">\n <Styled.NumberCountContainer>\n <Styled.RainboxColorText\n $renderAs=\"ah1\"\n $color=\"GREEN_4\"\n $isTargetAchieved={isTargetAchieved}\n >\n <NumberCountAnimation\n initialValue={0}\n targetValue={value}\n durationInSec={PROGRESS_FILL_DURATION}\n delayInSec={PROGRESS_FILL_DELAY}\n />\n </Styled.RainboxColorText>\n </Styled.NumberCountContainer>\n {progressType === 'stepper' && (\n <Text $renderAs=\"ac2\" $color=\"WHITE\">\n /{maxValue}\n </Text>\n )}\n </FlexView>\n <Separator height={8} />\n <Text $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n {displayText}\n </Text>\n </FlexView>\n </Styled.ContentContainer>\n\n {/* stepper animation */}\n {progressType === 'stepper' &&\n Array.from({ length: value }, (_, index) => {\n const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n return (\n <AnimatedArc\n key={index}\n startAngle={arcLength * index}\n targetAngle={arcLength}\n strokeWidth={12}\n color=\"GREEN_4\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n mode=\"fade\"\n duration={PROGRESS_FILL_DURATION / maxValue}\n delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n playRainbowColors={isTargetAchieved}\n />\n );\n })}\n\n {/* numbers with markings */}\n {progressType === 'stepper' &&\n Array.from({ length: maxValue + 1 }, (_, index) => {\n const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n return (\n <>\n <Styled.LineMarking key={index + 'linemarking'} $angle={arcLength * index} />\n\n <Styled.MarkingContainer key={index} $angle={arcLength * index}>\n <Styled.MarkingText $angle={arcLength * index}>\n <Styled.RainboxColorText\n $renderAs=\"ac4-black\"\n $isTargetAchieved={index === targetValue && isTargetAchieved}\n $color={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 && <LottieAnimation src={LOTTIE.TARGET_ACHIEVED_TEXT} />}\n {!isTargetAchieved && (\n <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n <Styled.HelperTextPrimary $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n {helperTextPrimary}\n </Styled.HelperTextPrimary>\n <Styled.HelperTextSecondary $renderAs=\"ab1\" $color=\"WHITE\">\n {helperTextSecondary}\n </Styled.HelperTextSecondary>\n </FlexView>\n )}\n </Styled.HelperTextWrapper>\n </Styled.DigitalMeter>\n );\n }\n\n return null;\n },\n);\n"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","isTargetAchieved","setIsTargetAchieved","useState","starAnimation","setStarAnimation","useEffect","timer","timerForAnimationComplete","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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"}
package/dist/features/post-game-stats/enums/post-game-stats-enum.js CHANGED
@@ -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
  };
package/dist/features/post-game-stats/enums/post-game-stats-enum.js.map CHANGED
@@ -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,SAJEA,IAAAA,KAAA,CAAA,CAAA;"}
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;"}
package/dist/features/post-game-stats/post-game-stats.js CHANGED
@@ -1,70 +1,82 @@
1
- import { jsxs as S, jsx as n } from "react/jsx-runtime";
2
- import { memo as C, forwardRef as T, useState as d, useCallback as h, useImperativeHandle as y } from "react";
3
- import { Accuracy as A } from "./accuracy/accuracy.js";
4
- import { Clock as R } from "./clock/clock.js";
5
- import { EPostGameStat as p } from "./enums/post-game-stats-enum.js";
6
- import { Points as k } from "./points/points.js";
7
- import { StatsWrapper as w, BlackBg as I } from "./post-game-stats-styled.js";
8
- import { Streak as P } from "./streak/streak.js";
9
- const b = C(
10
- T(({ stats: e, show: f, onComplete: l }, a) => {
11
- var i, u;
12
- const [r, x] = d(0), t = h(() => {
13
- var o, c;
14
- if ((c = (o = e[r]) == null ? void 0 : o.onComplete) == null || c.call(o), r === e.length - 1) {
15
- l == null || l();
1
+ import { jsx as o, jsxs as y } from "react/jsx-runtime";
2
+ import { memo as c, forwardRef as v, useState as d, useMemo as i, useCallback as u, useImperativeHandle as g } from "react";
3
+ import { Accuracy as C } from "./accuracy/accuracy.js";
4
+ import { Clock as A } from "./clock/clock.js";
5
+ import { DigitalMeter as I } from "./digital-meter/digital-meter.js";
6
+ import { EPostGameStat as l } from "./enums/post-game-stats-enum.js";
7
+ import { Points as P } from "./points/points.js";
8
+ import { StatsWrapper as R, BlackBg as S } from "./post-game-stats-styled.js";
9
+ import { Streak as w } from "./streak/streak.js";
10
+ const K = c(
11
+ v(({ stats: r, show: s, onComplete: p }, h) => {
12
+ const [n, x] = d(0), e = i(() => r[n], [n, r]), m = u(() => {
13
+ var a;
14
+ if ((a = e == null ? void 0 : e.onComplete) == null || a.call(e), n === r.length - 1) {
15
+ p == null || p();
16
16
  return;
17
17
  }
18
- x((v) => v + 1);
19
- }, [r, l, e]), m = h(() => {
20
- var o;
21
- (o = e[r]) != null && o.stopAtEnd || t();
22
- }, [e, r, t]);
23
- return y(a, () => ({
24
- moveToNextAndPlay: t
25
- })), !f || e.length === 0 || r >= e.length ? null : /* @__PURE__ */ S(w, { children: [
26
- /* @__PURE__ */ n(I, {}),
27
- /* @__PURE__ */ n(
28
- k,
29
- {
30
- point: e[r].value,
31
- show: e[r].type === p.POINT,
32
- 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
- onReveal: (u = e[r]) == null ? void 0 : u.onReveal
44
- }
45
- ),
46
- /* @__PURE__ */ n(
47
- A,
48
- {
49
- accuracy: e[r].value,
50
- show: e[r].type === p.ACCURACY,
51
- onComplete: m,
52
- helperText: e[r].helperText
53
- }
54
- ),
55
- /* @__PURE__ */ n(
56
- R,
57
- {
58
- timeInMs: e[r].value,
59
- show: e[r].type === p.CLOCK,
60
- onComplete: m,
61
- helperText: e[r].helperText
62
- }
63
- )
18
+ x((f) => f + 1);
19
+ }, [n, p, r.length, e]), t = u(() => {
20
+ e != null && e.stopAtEnd || m();
21
+ }, [e, m]);
22
+ g(h, () => ({
23
+ moveToNextAndPlay: m
24
+ }));
25
+ const T = i(() => e && e.type === l.POINT ? /* @__PURE__ */ o(
26
+ P,
27
+ {
28
+ point: e.value,
29
+ show: e.type === l.POINT,
30
+ onComplete: t,
31
+ onReveal: e.onReveal
32
+ }
33
+ ) : e && e.type === l.DIGITAL_METER ? /* @__PURE__ */ o(
34
+ I,
35
+ {
36
+ value: e.value,
37
+ maxValue: e.maxValue ?? 1,
38
+ targetValue: e.targetValue,
39
+ displayText: e.displayText ?? "",
40
+ progressType: e.progressType ?? "linear",
41
+ helperTextPrimary: e.helperTextPrimary ?? "",
42
+ helperTextSecondary: e.helperTextSecondary ?? "",
43
+ show: !0,
44
+ onComplete: t
45
+ },
46
+ Date.now()
47
+ ) : e && e.type === l.STREAK ? /* @__PURE__ */ o(
48
+ w,
49
+ {
50
+ currStreak: e.value,
51
+ show: !0,
52
+ onComplete: t,
53
+ helperText: e.helperText,
54
+ onReveal: e.onReveal
55
+ }
56
+ ) : e && e.type === l.ACCURACY ? /* @__PURE__ */ o(
57
+ C,
58
+ {
59
+ accuracy: e.value,
60
+ show: !0,
61
+ onComplete: t,
62
+ helperText: e.helperText
63
+ }
64
+ ) : e && e.type === l.CLOCK ? /* @__PURE__ */ o(
65
+ A,
66
+ {
67
+ timeInMs: e.value,
68
+ show: !0,
69
+ onComplete: t,
70
+ helperText: e.helperText
71
+ }
72
+ ) : null, [e, t]);
73
+ return !s || r.length === 0 || n >= r.length ? null : /* @__PURE__ */ y(R, { children: [
74
+ /* @__PURE__ */ o(S, {}),
75
+ T
64
76
  ] });
65
77
  })
66
78
  );
67
79
  export {
68
- b as PostGameStats
80
+ K as PostGameStats
69
81
  };
70
82
  //# sourceMappingURL=post-game-stats.js.map
package/dist/features/post-game-stats/post-game-stats.js.map CHANGED
@@ -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 { Accuracy } from './accuracy/accuracy';\nimport { Clock } from './clock/clock';\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}\n show={stats[currStatIndex]!.type === EPostGameStat.POINT}\n onComplete={onStatAnimationComplete}\n onReveal={stats[currStatIndex]?.onReveal}\n />\n <Streak\n currStreak={stats[currStatIndex]!.value}\n show={stats[currStatIndex]!.type === EPostGameStat.STREAK}\n onComplete={onStatAnimationComplete}\n helperText={stats[currStatIndex]!.helperText}\n onReveal={stats[currStatIndex]?.onReveal}\n />\n <Accuracy\n accuracy={stats[currStatIndex]!.value}\n show={stats[currStatIndex]!.type === EPostGameStat.ACCURACY}\n onComplete={onStatAnimationComplete}\n helperText={stats[currStatIndex]!.helperText}\n />\n <Clock\n timeInMs={stats[currStatIndex]!.value}\n show={stats[currStatIndex]!.type === EPostGameStat.CLOCK}\n onComplete={onStatAnimationComplete}\n helperText={stats[currStatIndex]!.helperText}\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","Streak","Accuracy","Clock"],"mappings":";;;;;;;;AAWO,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,OAAOlB,EAAMI,CAAa,EAAG;AAAA,UAC7B,MAAMJ,EAAMI,CAAa,EAAG,SAASe,EAAc;AAAA,UACnD,YAAYP;AAAA,UACZ,WAAUF,IAAAV,EAAMI,CAAa,MAAnB,gBAAAM,EAAsB;AAAA,QAAA;AAAA,MAClC;AAAA,MACA,gBAAAM;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,YAAYpB,EAAMI,CAAa,EAAG;AAAA,UAClC,MAAMJ,EAAMI,CAAa,EAAG,SAASe,EAAc;AAAA,UACnD,YAAYP;AAAA,UACZ,YAAYZ,EAAMI,CAAa,EAAG;AAAA,UAClC,WAAUK,IAAAT,EAAMI,CAAa,MAAnB,gBAAAK,EAAsB;AAAA,QAAA;AAAA,MAClC;AAAA,MACA,gBAAAO;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,UAAUrB,EAAMI,CAAa,EAAG;AAAA,UAChC,MAAMJ,EAAMI,CAAa,EAAG,SAASe,EAAc;AAAA,UACnD,YAAYP;AAAA,UACZ,YAAYZ,EAAMI,CAAa,EAAG;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,gBAAAY;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,UAAUtB,EAAMI,CAAa,EAAG;AAAA,UAChC,MAAMJ,EAAMI,CAAa,EAAG,SAASe,EAAc;AAAA,UACnD,YAAYP;AAAA,UACZ,YAAYZ,EAAMI,CAAa,EAAG;AAAA,QAAA;AAAA,MACpC;AAAA,IACF,EAAA,CAAA;AAAA,EAAA,CAEH;AACH;"}
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, useMemo } from 'react';\n\nimport { Accuracy } from './accuracy/accuracy';\nimport { Clock } from './clock/clock';\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 const currStatData = useMemo(() => stats[currStatIndex], [currStatIndex, stats]);\n\n const moveToNextAndPlay = useCallback(() => {\n currStatData?.onComplete?.();\n\n if (currStatIndex === stats.length - 1) {\n onComplete?.();\n\n return;\n }\n setCurrentStatIndex(prev => prev + 1);\n }, [currStatIndex, onComplete, stats.length, currStatData]);\n\n const onStatAnimationComplete = useCallback(() => {\n if (currStatData?.stopAtEnd) {\n return;\n }\n moveToNextAndPlay(); // Autoplay since stopAtEnd is false\n }, [currStatData, moveToNextAndPlay]);\n\n useImperativeHandle(ref, () => ({\n moveToNextAndPlay,\n }));\n\n const currentStat = useMemo(() => {\n if (currStatData && currStatData.type === EPostGameStat.POINT) {\n return (\n <Points\n point={currStatData.value}\n show={currStatData.type === EPostGameStat.POINT}\n onComplete={onStatAnimationComplete}\n onReveal={currStatData.onReveal}\n />\n );\n }\n\n if (currStatData && currStatData.type === EPostGameStat.DIGITAL_METER) {\n return (\n <DigitalMeter\n key={Date.now()}\n value={currStatData.value}\n maxValue={currStatData.maxValue ?? 1}\n targetValue={currStatData.targetValue}\n displayText={currStatData.displayText ?? ''}\n progressType={currStatData.progressType ?? 'linear'}\n helperTextPrimary={currStatData.helperTextPrimary ?? ''}\n helperTextSecondary={currStatData.helperTextSecondary ?? ''}\n show={true}\n onComplete={onStatAnimationComplete}\n />\n );\n }\n\n if (currStatData && currStatData.type === EPostGameStat.STREAK) {\n return (\n <Streak\n currStreak={currStatData.value}\n show={true}\n onComplete={onStatAnimationComplete}\n helperText={currStatData.helperText}\n onReveal={currStatData.onReveal}\n />\n );\n }\n\n if (currStatData && currStatData.type === EPostGameStat.ACCURACY) {\n return (\n <Accuracy\n accuracy={currStatData.value}\n show={true}\n onComplete={onStatAnimationComplete}\n helperText={currStatData.helperText}\n />\n );\n }\n\n if (currStatData && currStatData.type === EPostGameStat.CLOCK) {\n return (\n <Clock\n timeInMs={currStatData.value}\n show={true}\n onComplete={onStatAnimationComplete}\n helperText={currStatData.helperText}\n />\n );\n }\n\n return null;\n }, [currStatData, onStatAnimationComplete]);\n\n if (!show || stats.length === 0 || currStatIndex >= stats.length) {\n return null;\n }\n\n return (\n <Styled.StatsWrapper>\n <Styled.BlackBg />\n\n {currentStat}\n </Styled.StatsWrapper>\n );\n }),\n);\n"],"names":["PostGameStats","memo","forwardRef","stats","show","onComplete","ref","currStatIndex","setCurrentStatIndex","useState","currStatData","useMemo","moveToNextAndPlay","useCallback","_a","prev","onStatAnimationComplete","useImperativeHandle","currentStat","EPostGameStat","jsx","Points","DigitalMeter","Streak","Accuracy","Clock","jsxs","Styled.StatsWrapper","Styled.BlackBg"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAgBC;AAAA,EAC3BC,EAAmD,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,YAAAC,EAAA,GAAcC,MAAQ;AACvF,UAAM,CAACC,GAAeC,CAAmB,IAAIC,EAAS,CAAC,GACjDC,IAAeC,EAAQ,MAAMR,EAAMI,CAAa,GAAG,CAACA,GAAeJ,CAAK,CAAC,GAEzES,IAAoBC,EAAY,MAAM;;AAGtC,WAFJC,IAAAJ,KAAA,gBAAAA,EAAc,eAAd,QAAAI,EAAA,KAAAJ,IAEIH,MAAkBJ,EAAM,SAAS,GAAG;AACzB,QAAAE,KAAA,QAAAA;AAEb;AAAA,MACF;AACoB,MAAAG,EAAA,CAAAO,MAAQA,IAAO,CAAC;AAAA,IAAA,GACnC,CAACR,GAAeF,GAAYF,EAAM,QAAQO,CAAY,CAAC,GAEpDM,IAA0BH,EAAY,MAAM;AAChD,MAAIH,KAAA,QAAAA,EAAc,aAGAE;IAAA,GACjB,CAACF,GAAcE,CAAiB,CAAC;AAEpC,IAAAK,EAAoBX,GAAK,OAAO;AAAA,MAC9B,mBAAAM;AAAA,IACA,EAAA;AAEI,UAAAM,IAAcP,EAAQ,MACtBD,KAAgBA,EAAa,SAASS,EAAc,QAEpD,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAOX,EAAa;AAAA,QACpB,MAAMA,EAAa,SAASS,EAAc;AAAA,QAC1C,YAAYH;AAAA,QACZ,UAAUN,EAAa;AAAA,MAAA;AAAA,IAAA,IAKzBA,KAAgBA,EAAa,SAASS,EAAc,gBAEpD,gBAAAC;AAAA,MAACE;AAAA,MAAA;AAAA,QAEC,OAAOZ,EAAa;AAAA,QACpB,UAAUA,EAAa,YAAY;AAAA,QACnC,aAAaA,EAAa;AAAA,QAC1B,aAAaA,EAAa,eAAe;AAAA,QACzC,cAAcA,EAAa,gBAAgB;AAAA,QAC3C,mBAAmBA,EAAa,qBAAqB;AAAA,QACrD,qBAAqBA,EAAa,uBAAuB;AAAA,QACzD,MAAM;AAAA,QACN,YAAYM;AAAA,MAAA;AAAA,MATP,KAAK,IAAI;AAAA,IAAA,IAchBN,KAAgBA,EAAa,SAASS,EAAc,SAEpD,gBAAAC;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,YAAYb,EAAa;AAAA,QACzB,MAAM;AAAA,QACN,YAAYM;AAAA,QACZ,YAAYN,EAAa;AAAA,QACzB,UAAUA,EAAa;AAAA,MAAA;AAAA,IAAA,IAKzBA,KAAgBA,EAAa,SAASS,EAAc,WAEpD,gBAAAC;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,UAAUd,EAAa;AAAA,QACvB,MAAM;AAAA,QACN,YAAYM;AAAA,QACZ,YAAYN,EAAa;AAAA,MAAA;AAAA,IAAA,IAK3BA,KAAgBA,EAAa,SAASS,EAAc,QAEpD,gBAAAC;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,UAAUf,EAAa;AAAA,QACvB,MAAM;AAAA,QACN,YAAYM;AAAA,QACZ,YAAYN,EAAa;AAAA,MAAA;AAAA,IAAA,IAKxB,MACN,CAACA,GAAcM,CAAuB,CAAC;AAE1C,WAAI,CAACZ,KAAQD,EAAM,WAAW,KAAKI,KAAiBJ,EAAM,SACjD,OAIP,gBAAAuB,EAACC,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAP,EAAAQ,GAAA,EAAe;AAAA,MAEfV;AAAA,IACH,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,6 +1,6 @@
1
1
  {
2
2
  "name": "@cuemath/leap",
3
- "version": "2.8.36-tables-hg2",
3
+ "version": "2.8.36-tables-hg4",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"