@cuemath/leap 2.8.36-hg3 → 2.8.36-tables-hg1
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 -0
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +10 -10
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js +17 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js +47 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js +6 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/constants.js +16 -0
- package/dist/features/post-game-stats/digital-meter/constants.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +86 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter.js +163 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/helper.js +33 -0
- package/dist/features/post-game-stats/digital-meter/helper.js.map +1 -0
- package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js +29 -0
- package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js.map +1 -0
- package/dist/features/post-game-stats/number-count-animation/number-count-animation.js +20 -0
- package/dist/features/post-game-stats/number-count-animation/number-count-animation.js.map +1 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +69 -67
- package/dist/index.js.map +1 -1
- package/dist/static/target-achieved-text.053bd142.json +2830 -0
- package/package.json +1 -1
@@ -53,6 +53,7 @@ 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`,
|
56
57
|
TABLE_MODE_REVEAL: `${t}static/table-mode-reveal.b44a82c3.json`,
|
57
58
|
TEACHER_VALIDATION: `${t}static/teacher-validation.7577ecdc.json`,
|
58
59
|
TOTAL_STREAK: `${t}static/total-streak.d5ce7669.json`,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"lottie.js","sources":["../../../src/assets/lottie/lottie.ts"],"sourcesContent":["const PREFIX = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : '/';\n\nconst LOTTIE = {\n ACCURACY_METER: `${PREFIX}static/accuracy-meter.99585cba.json`,\n ACCURACY_NEEDLE: `${PREFIX}static/accuracy-needle.cd6e63ac.json`,\n ADVANCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/advance-mode-segment-lottie.51ff6707.json`,\n BEGINNER1X: `${PREFIX}static/beginner1x.489908a7.json`,\n BRONZE_1: `${PREFIX}static/bronze-1.da4e4b5f.json`,\n BRONZE_2: `${PREFIX}static/bronze-2.97f9c639.json`,\n BRONZE_3: `${PREFIX}static/bronze-3.6a433ebd.json`,\n CIRCULAR_LOADER: `${PREFIX}static/circular-loader.a5a1a0a6.json`,\n CLOCK_30MIN: `${PREFIX}static/clock-30min.eae818b8.json`,\n CLOCK_45MIN: `${PREFIX}static/clock-45min.df8adf51.json`,\n CLOCK_60MIN: `${PREFIX}static/clock-60min.2b48d875.json`,\n CLOCK_90MIN: `${PREFIX}static/clock-90min.3e557ed7.json`,\n COLOR_1: `${PREFIX}static/color-1.45101b9a.json`,\n COLOR_2: `${PREFIX}static/color-2.ccdc7d0a.json`,\n COLOR_3: `${PREFIX}static/color-3.5e8e1422.json`,\n DIFFICULT: `${PREFIX}static/difficult.6846c064.json`,\n EASY: `${PREFIX}static/easy.68242ddd.json`,\n EASY_RESCHEDULING_LOTTIE: `${PREFIX}static/easy-rescheduling-lottie.28026af9.json`,\n ELITE_CIRCLE: `${PREFIX}static/elite-circle.3df58972.json`,\n ERROR_LOTTIE: `${PREFIX}static/error-lottie.b3507a4b.json`,\n FAMILIAR1X: `${PREFIX}static/familiar1x.7c9c7f15.json`,\n FIFTEEN_MIN_CLOCK: `${PREFIX}static/fifteen-min-clock.0af4e303.json`,\n FIVE_MIN_CLOCK: `${PREFIX}static/five-min-clock.6be5cc41.json`,\n GOLD_1: `${PREFIX}static/gold-1.ab2489fe.json`,\n GOLD_2: `${PREFIX}static/gold-2.34045826.json`,\n GOLD_3: `${PREFIX}static/gold-3.d704698b.json`,\n INFINITE_BUTTON_BG: `${PREFIX}static/infinite-button-bg.5909225e.json`,\n INFINITE_BUTTON_SYMBOL: `${PREFIX}static/infinite-button-symbol.aa31350c.json`,\n LEVELUP_RINGS: `${PREFIX}static/levelup-rings.b1055283.json`,\n MEDIUM: `${PREFIX}static/medium.94c3829b.json`,\n NUDGE_TAP: `${PREFIX}static/nudge-tap.5cb30093.json`,\n POINT100: `${PREFIX}static/point100.1df16f82.json`,\n POINT10: `${PREFIX}static/point10.7b5e536d.json`,\n POINT15: `${PREFIX}static/point15.fea00c32.json`,\n POINT1: `${PREFIX}static/point1.b53831de.json`,\n POINT20: `${PREFIX}static/point20.c88d776d.json`,\n POINT25: `${PREFIX}static/point25.a18c346a.json`,\n POINT30: `${PREFIX}static/point30.c5224b0b.json`,\n POINT35: `${PREFIX}static/point35.fad343dd.json`,\n POINT40: `${PREFIX}static/point40.10a16f72.json`,\n POINT45: `${PREFIX}static/point45.2ad7561f.json`,\n POINT50: `${PREFIX}static/point50.5718cb3d.json`,\n POINT5: `${PREFIX}static/point5.da40ed1f.json`,\n POINT60: `${PREFIX}static/point60.17380d9f.json`,\n PROFICIENT1X: `${PREFIX}static/proficient1x.fa6e7b80.json`,\n RANDOM_MODE_SEGMENT_LOTTIE: `${PREFIX}static/random-mode-segment-lottie.79cf1c07.json`,\n SEQUENCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/sequence-mode-segment-lottie.11ac49e9.json`,\n SILVER_1: `${PREFIX}static/silver-1.0396328a.json`,\n SILVER_2: `${PREFIX}static/silver-2.bf50615f.json`,\n SILVER_3: `${PREFIX}static/silver-3.13d66b84.json`,\n SLEEPY_BOI: `${PREFIX}static/sleepy-boi.031a1165.json`,\n SPINNER_WHITE: `${PREFIX}static/spinner-white.639e0d87.json`,\n SPLASH_SCREEN: `${PREFIX}static/splash-screen.bbf567ce.json`,\n STAY_CONNECTED_LOTTIE: `${PREFIX}static/stay-connected-lottie.111439b3.json`,\n TABLE_MODE_REVEAL: `${PREFIX}static/table-mode-reveal.b44a82c3.json`,\n 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,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 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;"}
|
@@ -12,32 +12,32 @@ import { CardContainer as re } from "../card-container/card-container.js";
|
|
12
12
|
import { GAME_LAUNCHER_SIZE as h, GAME_LAUNCHER_SIZE_LARGE as T } from "../card-container/constants.js";
|
13
13
|
import { TABLE_REVEAL_ANIMATION as f, TABLE_MODE_LABEL_COLOR as te } from "./constants.js";
|
14
14
|
import oe from "./table-mode/table-mode.js";
|
15
|
-
import { CardWrapper as ie, TableSegmentsWrapper as ne, InfiniteButtonWrapper as le, AbsoluteView as g, TableSegmentCardShadowContainer as ae, TableSegment as ce, TableStar as se, TableNumber as me, TableModeContainer as
|
15
|
+
import { CardWrapper as ie, TableSegmentsWrapper as ne, InfiniteButtonWrapper as le, AbsoluteView as g, TableSegmentCardShadowContainer as ae, TableSegment as ce, TableStar as se, TableNumber as me, TableModeContainer as ue, TableModeWrapper as de, AnimatedView as be, ModeOverlay as pe, IconWrapper as he } from "./tables-card-styled.js";
|
16
16
|
const Te = {
|
17
17
|
loop: !1,
|
18
18
|
autoplay: !1,
|
19
19
|
render: "svg"
|
20
20
|
}, Be = z(({ data: c, label: L, onPress: n }) => {
|
21
|
-
const { playButtonSound:
|
21
|
+
const { playButtonSound: d } = ee(), [m, I] = s(!0), [u, b] = s(null), [A, S] = s(null), [O, p] = s("WHITE_T_60"), [l, _] = s({
|
22
22
|
stars: [],
|
23
23
|
tableNumber: 0
|
24
|
-
}), [$] = s(!
|
24
|
+
}), [$] = s(!0), v = k(null), N = k(), R = i(
|
25
25
|
(e) => {
|
26
|
-
|
26
|
+
d(), I(!0), b(e.tableNumber), _({ ...e });
|
27
27
|
},
|
28
|
-
[
|
28
|
+
[d]
|
29
29
|
), W = i((e) => {
|
30
30
|
p("WHITE_T_87"), b(e.tableNumber);
|
31
31
|
}, []), w = i(() => {
|
32
32
|
p("WHITE_T_60"), !l.tableNumber && b(null);
|
33
33
|
}, [l.tableNumber]), D = i(() => {
|
34
34
|
var o;
|
35
|
-
|
35
|
+
d(), I(!1), b(null);
|
36
36
|
const e = (f.DISAPPEAR[1] - f.DISAPPEAR[0]) / 30;
|
37
37
|
(o = v.current) == null || o.playSegments(f.DISAPPEAR, !0), N.current = setTimeout(() => {
|
38
38
|
_({ stars: [], tableNumber: 0 });
|
39
39
|
}, e * 1e3);
|
40
|
-
}, [
|
40
|
+
}, [d]), P = i(() => {
|
41
41
|
var e;
|
42
42
|
(e = v.current) == null || e.playSegments(f.REVEAL, !0);
|
43
43
|
}, []), V = i((e) => {
|
@@ -96,7 +96,7 @@ const Te = {
|
|
96
96
|
});
|
97
97
|
},
|
98
98
|
[n, l.tableNumber]
|
99
|
-
), U = i(() => A ? `${
|
99
|
+
), U = i(() => A ? `${u}× LEVEL${A}` : u ? `${u}× Table` : L, [A, u, L]);
|
100
100
|
return K(() => () => {
|
101
101
|
N.current && clearTimeout(N.current);
|
102
102
|
}, []), /* @__PURE__ */ r(
|
@@ -152,7 +152,7 @@ const Te = {
|
|
152
152
|
B,
|
153
153
|
{
|
154
154
|
$renderAs: h === T ? "ac3-black" : "ac4-black",
|
155
|
-
$color:
|
155
|
+
$color: u === e.tableNumber ? "BLACK_1" : "WHITE",
|
156
156
|
children: e.tableNumber
|
157
157
|
}
|
158
158
|
) })
|
@@ -162,7 +162,7 @@ const Te = {
|
|
162
162
|
);
|
163
163
|
})
|
164
164
|
] }),
|
165
|
-
l.tableNumber > 0 && /* @__PURE__ */ r(
|
165
|
+
l.tableNumber > 0 && /* @__PURE__ */ r(ue, { children: /* @__PURE__ */ a(de, { children: [
|
166
166
|
/* @__PURE__ */ a(be, { animation: m ? "fade-in" : "fade-out", children: [
|
167
167
|
x.map((e, o) => /* @__PURE__ */ a(Z, { children: [
|
168
168
|
/* @__PURE__ */ r(
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"tables-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/tables-card/tables-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type {\n ITableInfo,\n TTableMode,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITablesCardProps } from './tables-card-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Back2Icon from '../../../../../assets/line-icons/icons/back2';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\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 { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { CardContainer } from '../card-container/card-container';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../card-container/constants';\nimport { TABLE_MODE_LABEL_COLOR, TABLE_REVEAL_ANIMATION } from './constants';\nimport TableMode from './table-mode/table-mode';\nimport * as Styled from './tables-card-styled';\n\nconst animationSettings = {\n loop: false,\n autoplay: false,\n render: 'svg',\n};\n\nexport const TablesCard: FC<ITablesCardProps> = memo(({ data, label, onPress }) => {\n const { playButtonSound } = useCircleSounds();\n const [fadeIn, setFadeIn] = useState(true);\n const [highlightedTable, setHighlightedTable] = useState<number | null>(null);\n const [highlightedLevel, setHighlightedLevel] = useState<number | null>(null);\n const [labelColor, setLabelColor] = useState<TColorNames>('WHITE_T_60');\n const [revealTableModes, setRevealTableModes] = useState<ITableInfo>({\n stars: [],\n tableNumber: 0,\n });\n const [enableInfiniteMode] = useState(false);\n\n const revealAnimationRef = useRef<ILottieAnimationRef | null>(null);\n const disappearAnimationTimer = useRef<ReturnType<typeof setTimeout>>();\n\n const handleTableSegmentClick = useCallback(\n (table: ITableInfo) => {\n playButtonSound();\n setFadeIn(true);\n setHighlightedTable(table.tableNumber);\n setRevealTableModes({ ...table });\n },\n [playButtonSound],\n );\n\n const handleTableSegmentMouseOver = useCallback((table: ITableInfo) => {\n setLabelColor('WHITE_T_87');\n setHighlightedTable(table.tableNumber);\n }, []);\n\n const handleTableSegmentMouseLeave = useCallback(() => {\n setLabelColor('WHITE_T_60');\n !revealTableModes.tableNumber && setHighlightedTable(null);\n }, [revealTableModes.tableNumber]);\n\n const goBack = useCallback(() => {\n playButtonSound();\n setFadeIn(false);\n setHighlightedTable(null);\n const time = (TABLE_REVEAL_ANIMATION.DISAPPEAR[1] - TABLE_REVEAL_ANIMATION.DISAPPEAR[0]) / 30;\n\n revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.DISAPPEAR, true);\n disappearAnimationTimer.current = setTimeout(() => {\n setRevealTableModes({ stars: [], tableNumber: 0 });\n }, time * 1000);\n }, [playButtonSound]);\n\n const showTableModes = useCallback(() => {\n revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.REVEAL, true);\n }, []);\n\n const handleModeMouseOver = useCallback((type: TTableMode) => {\n const level: Partial<Record<TTableMode, number>> = {\n sequence: 1,\n random: 2,\n advance: 3,\n };\n\n setLabelColor(TABLE_MODE_LABEL_COLOR[type] ?? 'WHITE_T_60');\n setHighlightedLevel(level[type] ?? 0);\n }, []);\n\n const handleModeMouseLeave = useCallback(() => {\n setHighlightedLevel(null);\n setLabelColor('WHITE_T_60');\n }, []);\n\n const revealTableModesMemo = useMemo(() => revealTableModes, [revealTableModes]);\n\n const tableModes = useMemo(() => {\n return [\n {\n top: 20,\n left: 10.5,\n type: 'sequence' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('sequence'),\n onClick: () => onPress({ mode: 'sequence', tableNumber: revealTableModesMemo.tableNumber }),\n semicirclePosiiionTop: '-19%',\n semicirclePosiiionLeft: '-43%',\n semicircleHoverColor: '#B259004D',\n },\n {\n top: 20,\n left: 65.5,\n type: 'random' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('random'),\n onClick: () => onPress({ mode: 'random', tableNumber: revealTableModesMemo.tableNumber }),\n semicirclePosiiionTop: '-19%',\n semicirclePosiiionLeft: '65%',\n semicircleHoverColor: '#0055CC4D',\n },\n {\n top: 66,\n left: 38,\n type: 'advance' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('advance'),\n onClick: () => onPress({ mode: 'advance', tableNumber: revealTableModesMemo.tableNumber }),\n semicirclePosiiionTop: '74%',\n semicirclePosiiionLeft: '11%',\n semicircleHoverColor: '#A9099C4D',\n },\n ];\n }, [revealTableModesMemo.tableNumber, revealTableModesMemo.stars, onPress]);\n\n // Disabled infinite mode\n const handleInfiniteModeClick = useCallback(() => {\n onPress({\n mode: 'infinite',\n infiniteModeHighScore: data.infiniteModeHighScore,\n });\n }, [onPress, data.infiniteModeHighScore]);\n\n const handleNormalModeClick = useCallback(\n (mode: TTableMode) => {\n onPress({\n mode,\n tableNumber: revealTableModes.tableNumber,\n });\n },\n [onPress, revealTableModes.tableNumber],\n );\n\n const getHighlightedText = useCallback(() => {\n if (highlightedLevel) {\n return `${highlightedTable}× LEVEL${highlightedLevel}`;\n }\n\n return highlightedTable ? `${highlightedTable}× Table` : label;\n }, [highlightedLevel, highlightedTable, label]);\n\n useEffect(() => {\n return () => {\n disappearAnimationTimer.current && clearTimeout(disappearAnimationTimer.current);\n };\n }, []);\n\n return (\n <CardContainer\n strokeColor=\"WHITE\"\n label={getHighlightedText()}\n isAnimated={false}\n labelColor={labelColor}\n >\n <Styled.CardWrapper>\n {/* table selection */}\n <Styled.TableSegmentsWrapper>\n {/* infinite button */}\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"top\"\n hidden={enableInfiniteMode}\n tooltipItem={\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n Coming Soon\n </Text>\n }\n >\n <Styled.InfiniteButtonWrapper\n onClick={enableInfiniteMode ? handleInfiniteModeClick : undefined}\n >\n <Styled.AbsoluteView>\n <LottieAnimation src={LOTTIE.INFINITE_BUTTON_BG} />\n </Styled.AbsoluteView>\n <Styled.AbsoluteView>\n <LottieAnimation src={LOTTIE.INFINITE_BUTTON_SYMBOL} />\n </Styled.AbsoluteView>\n </Styled.InfiniteButtonWrapper>\n </ArrowTooltip>\n\n {/* card shadow */}\n <Styled.TableSegmentCardShadowContainer />\n\n {/* table segments */}\n {data.tableList.map((table, index) => {\n const segmentAngle = 360 / data.tableList.length;\n const startAngle = -(90 + 360 / (2 * data.tableList.length));\n const currentAngle = startAngle + segmentAngle * (index + 1);\n\n return (\n <Styled.TableSegment\n key={index}\n $angle={currentAngle}\n $totalSegments={data.tableList.length}\n $zIndex={index + 1}\n onClick={() => handleTableSegmentClick(table)}\n onMouseOver={() => handleTableSegmentMouseOver(table)}\n onMouseLeave={handleTableSegmentMouseLeave}\n >\n <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n {['sequence', 'random', 'advance'].map(star => (\n <Styled.TableStar\n key={star}\n $isStarAchieved={table.stars.includes(star as TTableMode)}\n />\n ))}\n <Separator width={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 22 : 14} />\n\n <Styled.TableNumber $angle={-currentAngle}>\n <Text\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color={highlightedTable === table.tableNumber ? 'BLACK_1' : 'WHITE'}\n >\n {table.tableNumber}\n </Text>\n </Styled.TableNumber>\n </FlexView>\n </Styled.TableSegment>\n );\n })}\n </Styled.TableSegmentsWrapper>\n\n {/* table modes */}\n {revealTableModes.tableNumber > 0 && (\n <Styled.TableModeContainer>\n <Styled.TableModeWrapper>\n {/* tables modes with back button */}\n <Styled.AnimatedView animation={fadeIn ? 'fade-in' : 'fade-out'}>\n {tableModes.map((tableMode, index) => (\n <>\n <Styled.ModeOverlay\n key={index + 'modeoverlay'}\n $top={tableMode.semicirclePosiiionTop}\n $left={tableMode.semicirclePosiiionLeft}\n $hoverColor={tableMode.semicircleHoverColor}\n onClick={() => (fadeIn ? handleNormalModeClick(tableMode.type) : undefined)}\n onMouseOver={() =>\n fadeIn ? handleModeMouseOver(tableMode.type as TTableMode) : undefined\n }\n onMouseLeave={fadeIn ? handleModeMouseLeave : undefined}\n />\n <Styled.AbsoluteView\n key={index + 'modes'}\n $top={tableMode.top}\n $left={tableMode.left}\n onClick={fadeIn ? tableMode.onClick : undefined}\n $isPointerEventsNone={true}\n >\n <TableMode\n tableNumber={tableMode.tableNumber}\n isStarAchieved={tableMode.isStarAchieved}\n type={tableMode.type as TTableMode}\n />\n </Styled.AbsoluteView>\n </>\n ))}\n {/* back button */}\n <Styled.AbsoluteView $top={50} $left={50} $alignCenter={true}>\n <Styled.IconWrapper>\n <Back2Icon\n onClick={goBack}\n height={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 40 : 32}\n width={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 40 : 32}\n />\n </Styled.IconWrapper>\n </Styled.AbsoluteView>\n </Styled.AnimatedView>\n\n {/* overlay lottie for modes */}\n <LottieAnimation\n src={LOTTIE.TABLE_MODE_REVEAL}\n ref={revealAnimationRef}\n settings={animationSettings}\n onRender={showTableModes}\n />\n </Styled.TableModeWrapper>\n </Styled.TableModeContainer>\n )}\n </Styled.CardWrapper>\n </CardContainer>\n );\n});\n"],"names":["animationSettings","TablesCard","memo","data","label","onPress","playButtonSound","useCircleSounds","fadeIn","setFadeIn","useState","highlightedTable","setHighlightedTable","highlightedLevel","setHighlightedLevel","labelColor","setLabelColor","revealTableModes","setRevealTableModes","enableInfiniteMode","revealAnimationRef","useRef","disappearAnimationTimer","handleTableSegmentClick","useCallback","table","handleTableSegmentMouseOver","handleTableSegmentMouseLeave","goBack","time","TABLE_REVEAL_ANIMATION","_a","showTableModes","handleModeMouseOver","type","level","TABLE_MODE_LABEL_COLOR","handleModeMouseLeave","revealTableModesMemo","useMemo","tableModes","handleInfiniteModeClick","handleNormalModeClick","mode","getHighlightedText","useEffect","jsx","CardContainer","jsxs","Styled.CardWrapper","Styled.TableSegmentsWrapper","ArrowTooltip","Text","Styled.InfiniteButtonWrapper","Styled.AbsoluteView","LottieAnimation","LOTTIE","Styled.TableSegmentCardShadowContainer","index","segmentAngle","currentAngle","Styled.TableSegment","FlexView","star","Styled.TableStar","Separator","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","Styled.TableNumber","Styled.TableModeContainer","Styled.TableModeWrapper","Styled.AnimatedView","tableMode","Fragment","Styled.ModeOverlay","TableMode","Styled.IconWrapper","Back2Icon"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAMA,KAAoB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AACV,GAEaC,KAAmCC,EAAK,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,QAAc;AAC3E,QAAA,EAAE,iBAAAC,MAAoBC,MACtB,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAI,GACnC,CAACC,GAAkBC,CAAmB,IAAIF,EAAwB,IAAI,GACtE,CAACG,GAAkBC,CAAmB,IAAIJ,EAAwB,IAAI,GACtE,CAACK,GAAYC,CAAa,IAAIN,EAAsB,YAAY,GAChE,CAACO,GAAkBC,CAAmB,IAAIR,EAAqB;AAAA,IACnE,OAAO,CAAC;AAAA,IACR,aAAa;AAAA,EAAA,CACd,GACK,CAACS,CAAkB,IAAIT,EAAS,EAAK,GAErCU,IAAqBC,EAAmC,IAAI,GAC5DC,IAA0BD,KAE1BE,IAA0BC;AAAA,IAC9B,CAACC,MAAsB;AACL,MAAAnB,KAChBG,EAAU,EAAI,GACdG,EAAoBa,EAAM,WAAW,GACjBP,EAAA,EAAE,GAAGO,EAAA,CAAO;AAAA,IAClC;AAAA,IACA,CAACnB,CAAe;AAAA,EAAA,GAGZoB,IAA8BF,EAAY,CAACC,MAAsB;AACrE,IAAAT,EAAc,YAAY,GAC1BJ,EAAoBa,EAAM,WAAW;AAAA,EACvC,GAAG,CAAE,CAAA,GAECE,IAA+BH,EAAY,MAAM;AACrD,IAAAR,EAAc,YAAY,GACzB,CAAAC,EAAiB,eAAeL,EAAoB,IAAI;AAAA,EAAA,GACxD,CAACK,EAAiB,WAAW,CAAC,GAE3BW,IAASJ,EAAY,MAAM;;AACf,IAAAlB,KAChBG,EAAU,EAAK,GACfG,EAAoB,IAAI;AAClB,UAAAiB,KAAQC,EAAuB,UAAU,CAAC,IAAIA,EAAuB,UAAU,CAAC,KAAK;AAE3F,KAAAC,IAAAX,EAAmB,YAAnB,QAAAW,EAA4B,aAAaD,EAAuB,WAAW,KACnDR,EAAA,UAAU,WAAW,MAAM;AACjD,MAAAJ,EAAoB,EAAE,OAAO,CAAA,GAAI,aAAa,EAAG,CAAA;AAAA,IAAA,GAChDW,IAAO,GAAI;AAAA,EAAA,GACb,CAACvB,CAAe,CAAC,GAEd0B,IAAiBR,EAAY,MAAM;;AACvC,KAAAO,IAAAX,EAAmB,YAAnB,QAAAW,EAA4B,aAAaD,EAAuB,QAAQ;AAAA,EAC1E,GAAG,CAAE,CAAA,GAECG,IAAsBT,EAAY,CAACU,MAAqB;AAC5D,UAAMC,IAA6C;AAAA,MACjD,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAGG,IAAAnB,EAAAoB,GAAuBF,CAAI,KAAK,YAAY,GACtCpB,EAAAqB,EAAMD,CAAI,KAAK,CAAC;AAAA,EACtC,GAAG,CAAE,CAAA,GAECG,IAAuBb,EAAY,MAAM;AAC7C,IAAAV,EAAoB,IAAI,GACxBE,EAAc,YAAY;AAAA,EAC5B,GAAG,CAAE,CAAA,GAECsB,IAAuBC,EAAQ,MAAMtB,GAAkB,CAACA,CAAgB,CAAC,GAEzEuB,IAAaD,EAAQ,MAClB;AAAA,IACL;AAAA,MACE,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAaD,EAAqB;AAAA,MAClC,gBAAgBA,EAAqB,MAAM,SAAS,UAAU;AAAA,MAC9D,SAAS,MAAMjC,EAAQ,EAAE,MAAM,YAAY,aAAaiC,EAAqB,aAAa;AAAA,MAC1F,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,sBAAsB;AAAA,IACxB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAaA,EAAqB;AAAA,MAClC,gBAAgBA,EAAqB,MAAM,SAAS,QAAQ;AAAA,MAC5D,SAAS,MAAMjC,EAAQ,EAAE,MAAM,UAAU,aAAaiC,EAAqB,aAAa;AAAA,MACxF,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,sBAAsB;AAAA,IACxB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAaA,EAAqB;AAAA,MAClC,gBAAgBA,EAAqB,MAAM,SAAS,SAAS;AAAA,MAC7D,SAAS,MAAMjC,EAAQ,EAAE,MAAM,WAAW,aAAaiC,EAAqB,aAAa;AAAA,MACzF,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,sBAAsB;AAAA,IACxB;AAAA,EAAA,GAED,CAACA,EAAqB,aAAaA,EAAqB,OAAOjC,CAAO,CAAC,GAGpEoC,IAA0BjB,EAAY,MAAM;AACxC,IAAAnB,EAAA;AAAA,MACN,MAAM;AAAA,MACN,uBAAuBF,EAAK;AAAA,IAAA,CAC7B;AAAA,EACA,GAAA,CAACE,GAASF,EAAK,qBAAqB,CAAC,GAElCuC,IAAwBlB;AAAA,IAC5B,CAACmB,MAAqB;AACZ,MAAAtC,EAAA;AAAA,QACN,MAAAsC;AAAA,QACA,aAAa1B,EAAiB;AAAA,MAAA,CAC/B;AAAA,IACH;AAAA,IACA,CAACZ,GAASY,EAAiB,WAAW;AAAA,EAAA,GAGlC2B,IAAqBpB,EAAY,MACjCX,IACK,GAAGF,CAAgB,UAAUE,CAAgB,KAG/CF,IAAmB,GAAGA,CAAgB,YAAYP,GACxD,CAACS,GAAkBF,GAAkBP,CAAK,CAAC;AAE9C,SAAAyC,EAAU,MACD,MAAM;AACa,IAAAvB,EAAA,WAAW,aAAaA,EAAwB,OAAO;AAAA,EAAA,GAEhF,CAAE,CAAA,GAGH,gBAAAwB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,OAAOH,EAAmB;AAAA,MAC1B,YAAY;AAAA,MACZ,YAAA7B;AAAA,MAEA,UAAA,gBAAAiC,EAACC,IAAA,EAEC,UAAA;AAAA,QAAC,gBAAAD,EAAAE,IAAA,EAEC,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,UAAS;AAAA,cACT,QAAQhC;AAAA,cACR,aACG,gBAAA2B,EAAAM,GAAA,EAAK,WAAU,OAAM,QAAO,SAAQ,UAErC,eAAA;AAAA,cAGF,UAAA,gBAAAJ;AAAA,gBAACK;AAAAA,gBAAA;AAAA,kBACC,SAASlC,IAAqBsB,IAA0B;AAAA,kBAExD,UAAA;AAAA,oBAAC,gBAAAK,EAAAQ,GAAA,EACC,UAAA,gBAAAR,EAACS,KAAgB,KAAKC,EAAO,mBAAoB,CAAA,GACnD;AAAA,oBACA,gBAAAV,EAACQ,GAAA,EACC,4BAACC,GAAgB,EAAA,KAAKC,EAAO,uBAAwB,CAAA,GACvD;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,UAGA,gBAAAV,EAACW,IAAA,EAAuC;AAAA,UAGvCtD,EAAK,UAAU,IAAI,CAACsB,GAAOiC,MAAU;AAC9B,kBAAAC,IAAe,MAAMxD,EAAK,UAAU,QAEpCyD,IADa,EAAE,KAAK,OAAO,IAAIzD,EAAK,UAAU,WAClBwD,KAAgBD,IAAQ;AAGxD,mBAAA,gBAAAZ;AAAA,cAACe;AAAAA,cAAA;AAAA,gBAEC,QAAQD;AAAA,gBACR,gBAAgBzD,EAAK,UAAU;AAAA,gBAC/B,SAASuD,IAAQ;AAAA,gBACjB,SAAS,MAAMnC,EAAwBE,CAAK;AAAA,gBAC5C,aAAa,MAAMC,EAA4BD,CAAK;AAAA,gBACpD,cAAcE;AAAA,gBAEd,4BAACmC,GAAS,EAAA,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UACjE,UAAA;AAAA,kBAAA,CAAC,YAAY,UAAU,SAAS,EAAE,IAAI,CACrCC,MAAA,gBAAAjB;AAAA,oBAACkB;AAAAA,oBAAA;AAAA,sBAEC,iBAAiBvC,EAAM,MAAM,SAASsC,CAAkB;AAAA,oBAAA;AAAA,oBADnDA;AAAA,kBAAA,CAGR;AAAA,oCACAE,GAAU,EAAA,OAAOC,MAAuBC,IAA2B,KAAK,IAAI;AAAA,oCAE5EC,IAAA,EAAmB,QAAQ,CAACR,GAC3B,UAAA,gBAAAd;AAAA,oBAACM;AAAA,oBAAA;AAAA,sBACC,WACEc,MAAuBC,IAA2B,cAAc;AAAA,sBAElE,QAAQxD,MAAqBc,EAAM,cAAc,YAAY;AAAA,sBAE5D,UAAMA,EAAA;AAAA,oBAAA;AAAA,kBAAA,GAEX;AAAA,gBAAA,GACF;AAAA,cAAA;AAAA,cA3BKiC;AAAA,YAAA;AAAA,UA4BP,CAEH;AAAA,QAAA,GACH;AAAA,QAGCzC,EAAiB,cAAc,KAC7B,gBAAA6B,EAAAuB,IAAA,EACC,UAAA,gBAAArB,EAACsB,IAAA,EAEC,UAAA;AAAA,UAAA,gBAAAtB,EAACuB,IAAA,EAAoB,WAAW/D,IAAS,YAAY,YAClD,UAAA;AAAA,YAAAgC,EAAW,IAAI,CAACgC,GAAWd,MAExB,gBAAAV,EAAAyB,GAAA,EAAA,UAAA;AAAA,cAAA,gBAAA3B;AAAA,gBAAC4B;AAAAA,gBAAA;AAAA,kBAEC,MAAMF,EAAU;AAAA,kBAChB,OAAOA,EAAU;AAAA,kBACjB,aAAaA,EAAU;AAAA,kBACvB,SAAS,MAAOhE,IAASkC,EAAsB8B,EAAU,IAAI,IAAI;AAAA,kBACjE,aAAa,MACXhE,IAASyB,EAAoBuC,EAAU,IAAkB,IAAI;AAAA,kBAE/D,cAAchE,IAAS6B,IAAuB;AAAA,gBAAA;AAAA,gBARzCqB,IAAQ;AAAA,cASf;AAAA,cACA,gBAAAZ;AAAA,gBAACQ;AAAAA,gBAAA;AAAA,kBAEC,MAAMkB,EAAU;AAAA,kBAChB,OAAOA,EAAU;AAAA,kBACjB,SAAShE,IAASgE,EAAU,UAAU;AAAA,kBACtC,sBAAsB;AAAA,kBAEtB,UAAA,gBAAA1B;AAAA,oBAAC6B;AAAA,oBAAA;AAAA,sBACC,aAAaH,EAAU;AAAA,sBACvB,gBAAgBA,EAAU;AAAA,sBAC1B,MAAMA,EAAU;AAAA,oBAAA;AAAA,kBAClB;AAAA,gBAAA;AAAA,gBAVKd,IAAQ;AAAA,cAWf;AAAA,YAAA,EAAA,CACF,CACD;AAAA,YAEA,gBAAAZ,EAAAQ,GAAA,EAAoB,MAAM,IAAI,OAAO,IAAI,cAAc,IACtD,UAAC,gBAAAR,EAAA8B,IAAA,EACC,UAAA,gBAAA9B;AAAA,cAAC+B;AAAA,cAAA;AAAA,gBACC,SAASjD;AAAA,gBACT,QAAQsC,MAAuBC,IAA2B,KAAK;AAAA,gBAC/D,OAAOD,MAAuBC,IAA2B,KAAK;AAAA,cAAA;AAAA,eAElE,EACF,CAAA;AAAA,UAAA,GACF;AAAA,UAGA,gBAAArB;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,KAAKC,EAAO;AAAA,cACZ,KAAKpC;AAAA,cACL,UAAUpB;AAAA,cACV,UAAUgC;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,EAAA,CACF,EACF,CAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
1
|
+
{"version":3,"file":"tables-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/tables-card/tables-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type {\n ITableInfo,\n TTableMode,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITablesCardProps } from './tables-card-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Back2Icon from '../../../../../assets/line-icons/icons/back2';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\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 { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { CardContainer } from '../card-container/card-container';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../card-container/constants';\nimport { TABLE_MODE_LABEL_COLOR, TABLE_REVEAL_ANIMATION } from './constants';\nimport TableMode from './table-mode/table-mode';\nimport * as Styled from './tables-card-styled';\n\nconst animationSettings = {\n loop: false,\n autoplay: false,\n render: 'svg',\n};\n\nexport const TablesCard: FC<ITablesCardProps> = memo(({ data, label, onPress }) => {\n const { playButtonSound } = useCircleSounds();\n const [fadeIn, setFadeIn] = useState(true);\n const [highlightedTable, setHighlightedTable] = useState<number | null>(null);\n const [highlightedLevel, setHighlightedLevel] = useState<number | null>(null);\n const [labelColor, setLabelColor] = useState<TColorNames>('WHITE_T_60');\n const [revealTableModes, setRevealTableModes] = useState<ITableInfo>({\n stars: [],\n tableNumber: 0,\n });\n const [enableInfiniteMode] = useState(true);\n\n const revealAnimationRef = useRef<ILottieAnimationRef | null>(null);\n const disappearAnimationTimer = useRef<ReturnType<typeof setTimeout>>();\n\n const handleTableSegmentClick = useCallback(\n (table: ITableInfo) => {\n playButtonSound();\n setFadeIn(true);\n setHighlightedTable(table.tableNumber);\n setRevealTableModes({ ...table });\n },\n [playButtonSound],\n );\n\n const handleTableSegmentMouseOver = useCallback((table: ITableInfo) => {\n setLabelColor('WHITE_T_87');\n setHighlightedTable(table.tableNumber);\n }, []);\n\n const handleTableSegmentMouseLeave = useCallback(() => {\n setLabelColor('WHITE_T_60');\n !revealTableModes.tableNumber && setHighlightedTable(null);\n }, [revealTableModes.tableNumber]);\n\n const goBack = useCallback(() => {\n playButtonSound();\n setFadeIn(false);\n setHighlightedTable(null);\n const time = (TABLE_REVEAL_ANIMATION.DISAPPEAR[1] - TABLE_REVEAL_ANIMATION.DISAPPEAR[0]) / 30;\n\n revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.DISAPPEAR, true);\n disappearAnimationTimer.current = setTimeout(() => {\n setRevealTableModes({ stars: [], tableNumber: 0 });\n }, time * 1000);\n }, [playButtonSound]);\n\n const showTableModes = useCallback(() => {\n revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.REVEAL, true);\n }, []);\n\n const handleModeMouseOver = useCallback((type: TTableMode) => {\n const level: Partial<Record<TTableMode, number>> = {\n sequence: 1,\n random: 2,\n advance: 3,\n };\n\n setLabelColor(TABLE_MODE_LABEL_COLOR[type] ?? 'WHITE_T_60');\n setHighlightedLevel(level[type] ?? 0);\n }, []);\n\n const handleModeMouseLeave = useCallback(() => {\n setHighlightedLevel(null);\n setLabelColor('WHITE_T_60');\n }, []);\n\n const revealTableModesMemo = useMemo(() => revealTableModes, [revealTableModes]);\n\n const tableModes = useMemo(() => {\n return [\n {\n top: 20,\n left: 10.5,\n type: 'sequence' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('sequence'),\n onClick: () => onPress({ mode: 'sequence', tableNumber: revealTableModesMemo.tableNumber }),\n semicirclePosiiionTop: '-19%',\n semicirclePosiiionLeft: '-43%',\n semicircleHoverColor: '#B259004D',\n },\n {\n top: 20,\n left: 65.5,\n type: 'random' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('random'),\n onClick: () => onPress({ mode: 'random', tableNumber: revealTableModesMemo.tableNumber }),\n semicirclePosiiionTop: '-19%',\n semicirclePosiiionLeft: '65%',\n semicircleHoverColor: '#0055CC4D',\n },\n {\n top: 66,\n left: 38,\n type: 'advance' as TTableMode,\n tableNumber: revealTableModesMemo.tableNumber,\n isStarAchieved: revealTableModesMemo.stars.includes('advance'),\n onClick: () => onPress({ mode: 'advance', tableNumber: revealTableModesMemo.tableNumber }),\n semicirclePosiiionTop: '74%',\n semicirclePosiiionLeft: '11%',\n semicircleHoverColor: '#A9099C4D',\n },\n ];\n }, [revealTableModesMemo.tableNumber, revealTableModesMemo.stars, onPress]);\n\n // Disabled infinite mode\n const handleInfiniteModeClick = useCallback(() => {\n onPress({\n mode: 'infinite',\n infiniteModeHighScore: data.infiniteModeHighScore,\n });\n }, [onPress, data.infiniteModeHighScore]);\n\n const handleNormalModeClick = useCallback(\n (mode: TTableMode) => {\n onPress({\n mode,\n tableNumber: revealTableModes.tableNumber,\n });\n },\n [onPress, revealTableModes.tableNumber],\n );\n\n const getHighlightedText = useCallback(() => {\n if (highlightedLevel) {\n return `${highlightedTable}× LEVEL${highlightedLevel}`;\n }\n\n return highlightedTable ? `${highlightedTable}× Table` : label;\n }, [highlightedLevel, highlightedTable, label]);\n\n useEffect(() => {\n return () => {\n disappearAnimationTimer.current && clearTimeout(disappearAnimationTimer.current);\n };\n }, []);\n\n return (\n <CardContainer\n strokeColor=\"WHITE\"\n label={getHighlightedText()}\n isAnimated={false}\n labelColor={labelColor}\n >\n <Styled.CardWrapper>\n {/* table selection */}\n <Styled.TableSegmentsWrapper>\n {/* infinite button */}\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"top\"\n hidden={enableInfiniteMode}\n tooltipItem={\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n Coming Soon\n </Text>\n }\n >\n <Styled.InfiniteButtonWrapper\n onClick={enableInfiniteMode ? handleInfiniteModeClick : undefined}\n >\n <Styled.AbsoluteView>\n <LottieAnimation src={LOTTIE.INFINITE_BUTTON_BG} />\n </Styled.AbsoluteView>\n <Styled.AbsoluteView>\n <LottieAnimation src={LOTTIE.INFINITE_BUTTON_SYMBOL} />\n </Styled.AbsoluteView>\n </Styled.InfiniteButtonWrapper>\n </ArrowTooltip>\n\n {/* card shadow */}\n <Styled.TableSegmentCardShadowContainer />\n\n {/* table segments */}\n {data.tableList.map((table, index) => {\n const segmentAngle = 360 / data.tableList.length;\n const startAngle = -(90 + 360 / (2 * data.tableList.length));\n const currentAngle = startAngle + segmentAngle * (index + 1);\n\n return (\n <Styled.TableSegment\n key={index}\n $angle={currentAngle}\n $totalSegments={data.tableList.length}\n $zIndex={index + 1}\n onClick={() => handleTableSegmentClick(table)}\n onMouseOver={() => handleTableSegmentMouseOver(table)}\n onMouseLeave={handleTableSegmentMouseLeave}\n >\n <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n {['sequence', 'random', 'advance'].map(star => (\n <Styled.TableStar\n key={star}\n $isStarAchieved={table.stars.includes(star as TTableMode)}\n />\n ))}\n <Separator width={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 22 : 14} />\n\n <Styled.TableNumber $angle={-currentAngle}>\n <Text\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color={highlightedTable === table.tableNumber ? 'BLACK_1' : 'WHITE'}\n >\n {table.tableNumber}\n </Text>\n </Styled.TableNumber>\n </FlexView>\n </Styled.TableSegment>\n );\n })}\n </Styled.TableSegmentsWrapper>\n\n {/* table modes */}\n {revealTableModes.tableNumber > 0 && (\n <Styled.TableModeContainer>\n <Styled.TableModeWrapper>\n {/* tables modes with back button */}\n <Styled.AnimatedView animation={fadeIn ? 'fade-in' : 'fade-out'}>\n {tableModes.map((tableMode, index) => (\n <>\n <Styled.ModeOverlay\n key={index + 'modeoverlay'}\n $top={tableMode.semicirclePosiiionTop}\n $left={tableMode.semicirclePosiiionLeft}\n $hoverColor={tableMode.semicircleHoverColor}\n onClick={() => (fadeIn ? handleNormalModeClick(tableMode.type) : undefined)}\n onMouseOver={() =>\n fadeIn ? handleModeMouseOver(tableMode.type as TTableMode) : undefined\n }\n onMouseLeave={fadeIn ? handleModeMouseLeave : undefined}\n />\n <Styled.AbsoluteView\n key={index + 'modes'}\n $top={tableMode.top}\n $left={tableMode.left}\n onClick={fadeIn ? tableMode.onClick : undefined}\n $isPointerEventsNone={true}\n >\n <TableMode\n tableNumber={tableMode.tableNumber}\n isStarAchieved={tableMode.isStarAchieved}\n type={tableMode.type as TTableMode}\n />\n </Styled.AbsoluteView>\n </>\n ))}\n {/* back button */}\n <Styled.AbsoluteView $top={50} $left={50} $alignCenter={true}>\n <Styled.IconWrapper>\n <Back2Icon\n onClick={goBack}\n height={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 40 : 32}\n width={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 40 : 32}\n />\n </Styled.IconWrapper>\n </Styled.AbsoluteView>\n </Styled.AnimatedView>\n\n {/* overlay lottie for modes */}\n <LottieAnimation\n src={LOTTIE.TABLE_MODE_REVEAL}\n ref={revealAnimationRef}\n settings={animationSettings}\n onRender={showTableModes}\n />\n </Styled.TableModeWrapper>\n </Styled.TableModeContainer>\n )}\n </Styled.CardWrapper>\n </CardContainer>\n );\n});\n"],"names":["animationSettings","TablesCard","memo","data","label","onPress","playButtonSound","useCircleSounds","fadeIn","setFadeIn","useState","highlightedTable","setHighlightedTable","highlightedLevel","setHighlightedLevel","labelColor","setLabelColor","revealTableModes","setRevealTableModes","enableInfiniteMode","revealAnimationRef","useRef","disappearAnimationTimer","handleTableSegmentClick","useCallback","table","handleTableSegmentMouseOver","handleTableSegmentMouseLeave","goBack","time","TABLE_REVEAL_ANIMATION","_a","showTableModes","handleModeMouseOver","type","level","TABLE_MODE_LABEL_COLOR","handleModeMouseLeave","revealTableModesMemo","useMemo","tableModes","handleInfiniteModeClick","handleNormalModeClick","mode","getHighlightedText","useEffect","jsx","CardContainer","jsxs","Styled.CardWrapper","Styled.TableSegmentsWrapper","ArrowTooltip","Text","Styled.InfiniteButtonWrapper","Styled.AbsoluteView","LottieAnimation","LOTTIE","Styled.TableSegmentCardShadowContainer","index","segmentAngle","currentAngle","Styled.TableSegment","FlexView","star","Styled.TableStar","Separator","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","Styled.TableNumber","Styled.TableModeContainer","Styled.TableModeWrapper","Styled.AnimatedView","tableMode","Fragment","Styled.ModeOverlay","TableMode","Styled.IconWrapper","Back2Icon"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAMA,KAAoB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AACV,GAEaC,KAAmCC,EAAK,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,QAAc;AAC3E,QAAA,EAAE,iBAAAC,MAAoBC,MACtB,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAI,GACnC,CAACC,GAAkBC,CAAmB,IAAIF,EAAwB,IAAI,GACtE,CAACG,GAAkBC,CAAmB,IAAIJ,EAAwB,IAAI,GACtE,CAACK,GAAYC,CAAa,IAAIN,EAAsB,YAAY,GAChE,CAACO,GAAkBC,CAAmB,IAAIR,EAAqB;AAAA,IACnE,OAAO,CAAC;AAAA,IACR,aAAa;AAAA,EAAA,CACd,GACK,CAACS,CAAkB,IAAIT,EAAS,EAAI,GAEpCU,IAAqBC,EAAmC,IAAI,GAC5DC,IAA0BD,KAE1BE,IAA0BC;AAAA,IAC9B,CAACC,MAAsB;AACL,MAAAnB,KAChBG,EAAU,EAAI,GACdG,EAAoBa,EAAM,WAAW,GACjBP,EAAA,EAAE,GAAGO,EAAA,CAAO;AAAA,IAClC;AAAA,IACA,CAACnB,CAAe;AAAA,EAAA,GAGZoB,IAA8BF,EAAY,CAACC,MAAsB;AACrE,IAAAT,EAAc,YAAY,GAC1BJ,EAAoBa,EAAM,WAAW;AAAA,EACvC,GAAG,CAAE,CAAA,GAECE,IAA+BH,EAAY,MAAM;AACrD,IAAAR,EAAc,YAAY,GACzB,CAAAC,EAAiB,eAAeL,EAAoB,IAAI;AAAA,EAAA,GACxD,CAACK,EAAiB,WAAW,CAAC,GAE3BW,IAASJ,EAAY,MAAM;;AACf,IAAAlB,KAChBG,EAAU,EAAK,GACfG,EAAoB,IAAI;AAClB,UAAAiB,KAAQC,EAAuB,UAAU,CAAC,IAAIA,EAAuB,UAAU,CAAC,KAAK;AAE3F,KAAAC,IAAAX,EAAmB,YAAnB,QAAAW,EAA4B,aAAaD,EAAuB,WAAW,KACnDR,EAAA,UAAU,WAAW,MAAM;AACjD,MAAAJ,EAAoB,EAAE,OAAO,CAAA,GAAI,aAAa,EAAG,CAAA;AAAA,IAAA,GAChDW,IAAO,GAAI;AAAA,EAAA,GACb,CAACvB,CAAe,CAAC,GAEd0B,IAAiBR,EAAY,MAAM;;AACvC,KAAAO,IAAAX,EAAmB,YAAnB,QAAAW,EAA4B,aAAaD,EAAuB,QAAQ;AAAA,EAC1E,GAAG,CAAE,CAAA,GAECG,IAAsBT,EAAY,CAACU,MAAqB;AAC5D,UAAMC,IAA6C;AAAA,MACjD,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAGG,IAAAnB,EAAAoB,GAAuBF,CAAI,KAAK,YAAY,GACtCpB,EAAAqB,EAAMD,CAAI,KAAK,CAAC;AAAA,EACtC,GAAG,CAAE,CAAA,GAECG,IAAuBb,EAAY,MAAM;AAC7C,IAAAV,EAAoB,IAAI,GACxBE,EAAc,YAAY;AAAA,EAC5B,GAAG,CAAE,CAAA,GAECsB,IAAuBC,EAAQ,MAAMtB,GAAkB,CAACA,CAAgB,CAAC,GAEzEuB,IAAaD,EAAQ,MAClB;AAAA,IACL;AAAA,MACE,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAaD,EAAqB;AAAA,MAClC,gBAAgBA,EAAqB,MAAM,SAAS,UAAU;AAAA,MAC9D,SAAS,MAAMjC,EAAQ,EAAE,MAAM,YAAY,aAAaiC,EAAqB,aAAa;AAAA,MAC1F,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,sBAAsB;AAAA,IACxB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAaA,EAAqB;AAAA,MAClC,gBAAgBA,EAAqB,MAAM,SAAS,QAAQ;AAAA,MAC5D,SAAS,MAAMjC,EAAQ,EAAE,MAAM,UAAU,aAAaiC,EAAqB,aAAa;AAAA,MACxF,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,sBAAsB;AAAA,IACxB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAaA,EAAqB;AAAA,MAClC,gBAAgBA,EAAqB,MAAM,SAAS,SAAS;AAAA,MAC7D,SAAS,MAAMjC,EAAQ,EAAE,MAAM,WAAW,aAAaiC,EAAqB,aAAa;AAAA,MACzF,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,sBAAsB;AAAA,IACxB;AAAA,EAAA,GAED,CAACA,EAAqB,aAAaA,EAAqB,OAAOjC,CAAO,CAAC,GAGpEoC,IAA0BjB,EAAY,MAAM;AACxC,IAAAnB,EAAA;AAAA,MACN,MAAM;AAAA,MACN,uBAAuBF,EAAK;AAAA,IAAA,CAC7B;AAAA,EACA,GAAA,CAACE,GAASF,EAAK,qBAAqB,CAAC,GAElCuC,IAAwBlB;AAAA,IAC5B,CAACmB,MAAqB;AACZ,MAAAtC,EAAA;AAAA,QACN,MAAAsC;AAAA,QACA,aAAa1B,EAAiB;AAAA,MAAA,CAC/B;AAAA,IACH;AAAA,IACA,CAACZ,GAASY,EAAiB,WAAW;AAAA,EAAA,GAGlC2B,IAAqBpB,EAAY,MACjCX,IACK,GAAGF,CAAgB,UAAUE,CAAgB,KAG/CF,IAAmB,GAAGA,CAAgB,YAAYP,GACxD,CAACS,GAAkBF,GAAkBP,CAAK,CAAC;AAE9C,SAAAyC,EAAU,MACD,MAAM;AACa,IAAAvB,EAAA,WAAW,aAAaA,EAAwB,OAAO;AAAA,EAAA,GAEhF,CAAE,CAAA,GAGH,gBAAAwB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,OAAOH,EAAmB;AAAA,MAC1B,YAAY;AAAA,MACZ,YAAA7B;AAAA,MAEA,UAAA,gBAAAiC,EAACC,IAAA,EAEC,UAAA;AAAA,QAAC,gBAAAD,EAAAE,IAAA,EAEC,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,UAAS;AAAA,cACT,QAAQhC;AAAA,cACR,aACG,gBAAA2B,EAAAM,GAAA,EAAK,WAAU,OAAM,QAAO,SAAQ,UAErC,eAAA;AAAA,cAGF,UAAA,gBAAAJ;AAAA,gBAACK;AAAAA,gBAAA;AAAA,kBACC,SAASlC,IAAqBsB,IAA0B;AAAA,kBAExD,UAAA;AAAA,oBAAC,gBAAAK,EAAAQ,GAAA,EACC,UAAA,gBAAAR,EAACS,KAAgB,KAAKC,EAAO,mBAAoB,CAAA,GACnD;AAAA,oBACA,gBAAAV,EAACQ,GAAA,EACC,4BAACC,GAAgB,EAAA,KAAKC,EAAO,uBAAwB,CAAA,GACvD;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,UAGA,gBAAAV,EAACW,IAAA,EAAuC;AAAA,UAGvCtD,EAAK,UAAU,IAAI,CAACsB,GAAOiC,MAAU;AAC9B,kBAAAC,IAAe,MAAMxD,EAAK,UAAU,QAEpCyD,IADa,EAAE,KAAK,OAAO,IAAIzD,EAAK,UAAU,WAClBwD,KAAgBD,IAAQ;AAGxD,mBAAA,gBAAAZ;AAAA,cAACe;AAAAA,cAAA;AAAA,gBAEC,QAAQD;AAAA,gBACR,gBAAgBzD,EAAK,UAAU;AAAA,gBAC/B,SAASuD,IAAQ;AAAA,gBACjB,SAAS,MAAMnC,EAAwBE,CAAK;AAAA,gBAC5C,aAAa,MAAMC,EAA4BD,CAAK;AAAA,gBACpD,cAAcE;AAAA,gBAEd,4BAACmC,GAAS,EAAA,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UACjE,UAAA;AAAA,kBAAA,CAAC,YAAY,UAAU,SAAS,EAAE,IAAI,CACrCC,MAAA,gBAAAjB;AAAA,oBAACkB;AAAAA,oBAAA;AAAA,sBAEC,iBAAiBvC,EAAM,MAAM,SAASsC,CAAkB;AAAA,oBAAA;AAAA,oBADnDA;AAAA,kBAAA,CAGR;AAAA,oCACAE,GAAU,EAAA,OAAOC,MAAuBC,IAA2B,KAAK,IAAI;AAAA,oCAE5EC,IAAA,EAAmB,QAAQ,CAACR,GAC3B,UAAA,gBAAAd;AAAA,oBAACM;AAAA,oBAAA;AAAA,sBACC,WACEc,MAAuBC,IAA2B,cAAc;AAAA,sBAElE,QAAQxD,MAAqBc,EAAM,cAAc,YAAY;AAAA,sBAE5D,UAAMA,EAAA;AAAA,oBAAA;AAAA,kBAAA,GAEX;AAAA,gBAAA,GACF;AAAA,cAAA;AAAA,cA3BKiC;AAAA,YAAA;AAAA,UA4BP,CAEH;AAAA,QAAA,GACH;AAAA,QAGCzC,EAAiB,cAAc,KAC7B,gBAAA6B,EAAAuB,IAAA,EACC,UAAA,gBAAArB,EAACsB,IAAA,EAEC,UAAA;AAAA,UAAA,gBAAAtB,EAACuB,IAAA,EAAoB,WAAW/D,IAAS,YAAY,YAClD,UAAA;AAAA,YAAAgC,EAAW,IAAI,CAACgC,GAAWd,MAExB,gBAAAV,EAAAyB,GAAA,EAAA,UAAA;AAAA,cAAA,gBAAA3B;AAAA,gBAAC4B;AAAAA,gBAAA;AAAA,kBAEC,MAAMF,EAAU;AAAA,kBAChB,OAAOA,EAAU;AAAA,kBACjB,aAAaA,EAAU;AAAA,kBACvB,SAAS,MAAOhE,IAASkC,EAAsB8B,EAAU,IAAI,IAAI;AAAA,kBACjE,aAAa,MACXhE,IAASyB,EAAoBuC,EAAU,IAAkB,IAAI;AAAA,kBAE/D,cAAchE,IAAS6B,IAAuB;AAAA,gBAAA;AAAA,gBARzCqB,IAAQ;AAAA,cASf;AAAA,cACA,gBAAAZ;AAAA,gBAACQ;AAAAA,gBAAA;AAAA,kBAEC,MAAMkB,EAAU;AAAA,kBAChB,OAAOA,EAAU;AAAA,kBACjB,SAAShE,IAASgE,EAAU,UAAU;AAAA,kBACtC,sBAAsB;AAAA,kBAEtB,UAAA,gBAAA1B;AAAA,oBAAC6B;AAAA,oBAAA;AAAA,sBACC,aAAaH,EAAU;AAAA,sBACvB,gBAAgBA,EAAU;AAAA,sBAC1B,MAAMA,EAAU;AAAA,oBAAA;AAAA,kBAClB;AAAA,gBAAA;AAAA,gBAVKd,IAAQ;AAAA,cAWf;AAAA,YAAA,EAAA,CACF,CACD;AAAA,YAEA,gBAAAZ,EAAAQ,GAAA,EAAoB,MAAM,IAAI,OAAO,IAAI,cAAc,IACtD,UAAC,gBAAAR,EAAA8B,IAAA,EACC,UAAA,gBAAA9B;AAAA,cAAC+B;AAAA,cAAA;AAAA,gBACC,SAASjD;AAAA,gBACT,QAAQsC,MAAuBC,IAA2B,KAAK;AAAA,gBAC/D,OAAOD,MAAuBC,IAA2B,KAAK;AAAA,cAAA;AAAA,eAElE,EACF,CAAA;AAAA,UAAA,GACF;AAAA,UAGA,gBAAArB;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,KAAKC,EAAO;AAAA,cACZ,KAAKpC;AAAA,cACL,UAAUpB;AAAA,cACV,UAAUgC;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,EAAA,CACF,EACF,CAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import i from "styled-components";
|
2
|
+
import { RAINBOW_COLOR_ANIMATION_DURATION as r } from "../../constants.js";
|
3
|
+
import { rainbowColorAnimation as n } from "../../helper.js";
|
4
|
+
import { ARC_Z_INDEX as s } from "./constants.js";
|
5
|
+
const p = i.svg`
|
6
|
+
position: absolute;
|
7
|
+
z-index: ${s};
|
8
|
+
`, A = i.path`
|
9
|
+
stroke: ${({ theme: o, stroke: t }) => o.colors[t]};
|
10
|
+
animation: ${({ $playRainbowColors: o }) => o ? n : "undefined"}
|
11
|
+
${r}s ease infinite forwards;
|
12
|
+
`;
|
13
|
+
export {
|
14
|
+
A as Path,
|
15
|
+
p as Svg
|
16
|
+
};
|
17
|
+
//# sourceMappingURL=animated-arc-styled.js.map
|
package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"animated-arc-styled.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\n\nimport styled from 'styled-components';\n\nimport { RAINBOW_COLOR_ANIMATION_DURATION } from '../../constants';\nimport { rainbowColorAnimation } from '../../helper';\nimport { ARC_Z_INDEX } from './constants';\n\nexport const Svg = styled.svg`\n position: absolute;\n z-index: ${ARC_Z_INDEX};\n`;\n\nexport const Path = styled.path<{ stroke: TColorNames; $playRainbowColors: boolean }>`\n stroke: ${({ theme, stroke }) => theme.colors[stroke]};\n animation: ${({ $playRainbowColors }) =>\n $playRainbowColors ? rainbowColorAnimation : 'undefined'}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["Svg","styled","ARC_Z_INDEX","Path","theme","stroke","$playRainbowColors","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;AAQO,MAAMA,IAAMC,EAAO;AAAA;AAAA,aAEbC,CAAW;AAAA,GAGXC,IAAOF,EAAO;AAAA,YACf,CAAC,EAAE,OAAAG,GAAO,QAAAC,EAAA,MAAaD,EAAM,OAAOC,CAAM,CAAC;AAAA,eACxC,CAAC,EAAE,oBAAAC,EAAA,MACZA,IAAqBC,IAAwB,WAAW;AAAA,MACxDC,CAAgC;AAAA;"}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
2
|
+
import { useRef as A, useLayoutEffect as $ } from "react";
|
3
|
+
import { describeArc as R } from "../../helper.js";
|
4
|
+
import { Svg as k, Path as w } from "./animated-arc-styled.js";
|
5
|
+
import { ADJUSTED_START_ANGLE as D } from "./constants.js";
|
6
|
+
const x = ({
|
7
|
+
radius: e,
|
8
|
+
strokeWidth: n,
|
9
|
+
color: h,
|
10
|
+
targetAngle: m,
|
11
|
+
startAngle: p = 0,
|
12
|
+
duration: r = 2,
|
13
|
+
mode: o = "draw",
|
14
|
+
delay: s = 0,
|
15
|
+
playRainbowColors: y = !1
|
16
|
+
}) => {
|
17
|
+
const a = A(null), g = -D + p, i = e, u = e - n / 2, c = R(i, i, u, g, m);
|
18
|
+
return $(() => {
|
19
|
+
const t = a.current;
|
20
|
+
if (t) {
|
21
|
+
if (o === "draw") {
|
22
|
+
const f = t.getTotalLength();
|
23
|
+
t.style.strokeDasharray = `${f}`, t.style.strokeDashoffset = `${f}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
|
24
|
+
t.style.transition = `stroke-dashoffset ${r}s linear ${s}s`, t.style.strokeDashoffset = "0";
|
25
|
+
});
|
26
|
+
}
|
27
|
+
o === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
|
28
|
+
t.style.transition = `opacity 0s ease-in-out ${s}s`, t.style.opacity = "1";
|
29
|
+
}));
|
30
|
+
}
|
31
|
+
}, [c, o, r, s]), /* @__PURE__ */ l(k, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ l(
|
32
|
+
w,
|
33
|
+
{
|
34
|
+
ref: a,
|
35
|
+
d: c,
|
36
|
+
fill: "none",
|
37
|
+
stroke: h,
|
38
|
+
strokeWidth: n,
|
39
|
+
strokeLinecap: "butt",
|
40
|
+
$playRainbowColors: y
|
41
|
+
}
|
42
|
+
) });
|
43
|
+
};
|
44
|
+
export {
|
45
|
+
x as AnimatedArc
|
46
|
+
};
|
47
|
+
//# sourceMappingURL=animated-arc.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"animated-arc.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect } from 'react';\n\nimport { describeArc } from '../../helper';\nimport * as Styled from './animated-arc-styled';\nimport { ADJUSTED_START_ANGLE } from './constants';\n\nexport const AnimatedArc: React.FC<IAnimatedArcProps> = ({\n radius,\n strokeWidth,\n color,\n targetAngle,\n startAngle = 0,\n duration = 2,\n mode = 'draw',\n delay = 0,\n playRainbowColors = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const adjustedStartAngle = -ADJUSTED_START_ANGLE + startAngle;\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = describeArc(center, center, arcRadius, adjustedStartAngle, targetAngle);\n\n useLayoutEffect(() => {\n const path = pathRef.current;\n\n if (!path) return;\n\n if (mode === 'draw') {\n const length = path.getTotalLength();\n\n path.style.strokeDasharray = `${length}`;\n path.style.strokeDashoffset = `${length}`;\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n path.style.strokeDashoffset = '0';\n });\n }\n\n if (mode === 'fade') {\n path.style.opacity = '0';\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `opacity 0s ease-in-out ${delay}s`;\n path.style.opacity = '1';\n });\n }\n }, [arcPath, mode, duration, delay]);\n\n return (\n <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n <Styled.Path\n ref={pathRef}\n d={arcPath}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"butt\"\n $playRainbowColors={playRainbowColors}\n />\n </Styled.Svg>\n );\n};\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","playRainbowColors","pathRef","useRef","adjustedStartAngle","ADJUSTED_START_ANGLE","center","arcRadius","arcPath","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path"],"mappings":";;;;;AAQO,MAAMA,IAA2C,CAAC;AAAA,EACvD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,mBAAAC,IAAoB;AACtB,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAAqB,CAACC,IAAuBR,GAC7CS,IAASb,GACTc,IAAYd,IAASC,IAAc,GACnCc,IAAUC,EAAYH,GAAQA,GAAQC,GAAWH,GAAoBR,CAAW;AAEtF,SAAAc,EAAgB,MAAM;AACpB,UAAMC,IAAOT,EAAQ;AAErB,QAAKS,GAEL;AAAA,UAAIZ,MAAS,QAAQ;AACb,cAAAa,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBb,CAAQ,YAAYE,CAAK,KACtEW,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIZ,MAAS,WACXY,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AACrB,QAAAA,EAAA,MAAM,aAAa,0BAA0BX,CAAK,KACvDW,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACH,GAAST,GAAMD,GAAUE,CAAK,CAAC,qBAGhCa,GAAA,EAAW,OAAO,IAAIpB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAqB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,GAAGM;AAAA,MACH,MAAK;AAAA,MACL,QAAQb;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,oBAAoBO;AAAA,IAAA;AAAA,EAExB,EAAA,CAAA;AAEJ;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/constants.ts"],"sourcesContent":["export const ARC_Z_INDEX = 1;\n\nexport const ADJUSTED_START_ANGLE = 150;\n"],"names":["ARC_Z_INDEX","ADJUSTED_START_ANGLE"],"mappings":"AAAO,MAAMA,IAAc,GAEdC,IAAuB;"}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { ARC_Z_INDEX as _ } from "./comp/animated-arc/constants.js";
|
2
|
+
const I = 300, N = 2, A = _ + 1, E = A + 1, T = E + 1, O = 99 / 30, o = 2 / 30, L = 56 / 30, t = 12 / 30, D = 20 / 30, c = 43 / 30;
|
3
|
+
export {
|
4
|
+
N as BORDER_OFFSET,
|
5
|
+
E as CONTENT_CONTAINER_Z_INDEX,
|
6
|
+
A as LINE_MARKING_Z_INDEX,
|
7
|
+
T as NUMBER_MARKING_Z_INDEX,
|
8
|
+
t as PROGRESS_FILL_DELAY,
|
9
|
+
D as PROGRESS_FILL_DURATION,
|
10
|
+
c as RAINBOW_COLOR_ANIMATION_DURATION,
|
11
|
+
L as TARGET_ACHIEVED_DELAY,
|
12
|
+
o as TARGET_HELPER_TEXT_APPEAR_DELAY,
|
13
|
+
O as TOTAL_ANIMATION_DURATION,
|
14
|
+
I as TOTAL_ARC_AVAILABLE
|
15
|
+
};
|
16
|
+
//# sourceMappingURL=constants.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/digital-meter/constants.ts"],"sourcesContent":["import { ARC_Z_INDEX } from './comp/animated-arc/constants';\n\nexport const TOTAL_ARC_AVAILABLE = 300;\n\nexport const BORDER_OFFSET = 2;\nexport const LINE_MARKING_Z_INDEX = ARC_Z_INDEX + 1;\nexport const CONTENT_CONTAINER_Z_INDEX = LINE_MARKING_Z_INDEX + 1;\nexport const NUMBER_MARKING_Z_INDEX = CONTENT_CONTAINER_Z_INDEX + 1;\n\n// animation details\nexport const TOTAL_ANIMATION_DURATION = 99 / 30; // in 99 frames\nexport const TARGET_HELPER_TEXT_APPEAR_DELAY = 2 / 30; // delay of 2 frames\nexport const TARGET_ACHIEVED_DELAY = 56 / 30; // 56 frames\nexport const PROGRESS_FILL_DELAY = 12 / 30; // delay of 12 frames\nexport const PROGRESS_FILL_DURATION = 20 / 30; // in 20 frames\nexport const RAINBOW_COLOR_ANIMATION_DURATION = 43 / 30; // 43 frames;\n"],"names":["TOTAL_ARC_AVAILABLE","BORDER_OFFSET","LINE_MARKING_Z_INDEX","ARC_Z_INDEX","CONTENT_CONTAINER_Z_INDEX","NUMBER_MARKING_Z_INDEX","TOTAL_ANIMATION_DURATION","TARGET_HELPER_TEXT_APPEAR_DELAY","TARGET_ACHIEVED_DELAY","PROGRESS_FILL_DELAY","PROGRESS_FILL_DURATION","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";AAEO,MAAMA,IAAsB,KAEtBC,IAAgB,GAChBC,IAAuBC,IAAc,GACrCC,IAA4BF,IAAuB,GACnDG,IAAyBD,IAA4B,GAGrDE,IAA2B,KAAK,IAChCC,IAAkC,IAAI,IACtCC,IAAwB,KAAK,IAC7BC,IAAsB,KAAK,IAC3BC,IAAyB,KAAK,IAC9BC,IAAmC,KAAK;"}
|
@@ -0,0 +1,86 @@
|
|
1
|
+
import o, { keyframes as e } from "styled-components";
|
2
|
+
import { GAME_LAUNCHER_SIZE as r } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
3
|
+
import i from "../../ui/text/text.js";
|
4
|
+
import { ADJUSTED_START_ANGLE as n } from "./comp/animated-arc/constants.js";
|
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
|
+
import { rainbowColorAnimation as p } from "./helper.js";
|
7
|
+
const T = o.div`
|
8
|
+
height: ${r}px;
|
9
|
+
width: ${r}px;
|
10
|
+
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
11
|
+
display: flex;
|
12
|
+
align-items: center;
|
13
|
+
justify-content: center;
|
14
|
+
position: relative;
|
15
|
+
border-radius: 100%;
|
16
|
+
border: 1px solid ${({ theme: t }) => t.colors.WHITE};
|
17
|
+
animation: ${({ $isTargetAchieved: t }) => t ? e`100%{transform: scale(1.02)}` : "unset"}
|
18
|
+
0.133s ease alternate;
|
19
|
+
`, g = o.div`
|
20
|
+
display: flex;
|
21
|
+
justify-content: center;
|
22
|
+
align-items: center;
|
23
|
+
position: absolute;
|
24
|
+
z-index: ${s};
|
25
|
+
height: 92%;
|
26
|
+
width: 92%;
|
27
|
+
border-radius: 100%;
|
28
|
+
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
29
|
+
`, E = o.div`
|
30
|
+
position: relative;
|
31
|
+
flex-grow: 1;
|
32
|
+
bottom: -12px;
|
33
|
+
`;
|
34
|
+
o.div`
|
35
|
+
position: absolute;
|
36
|
+
`;
|
37
|
+
const N = o.div`
|
38
|
+
width: ${r / 2}px;
|
39
|
+
height: 2px;
|
40
|
+
position: absolute;
|
41
|
+
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
42
|
+
transform-style: preserve-3d;
|
43
|
+
backface-visibility: hidden;
|
44
|
+
transform-origin: left;
|
45
|
+
transform: rotate(${({ $angle: t }) => -240 + t}deg);
|
46
|
+
left: ${r / 2}px;
|
47
|
+
top: ${r / 2}px;
|
48
|
+
z-index: ${l};
|
49
|
+
`, b = o.div`
|
50
|
+
position: absolute;
|
51
|
+
height: ${r - 32}px;
|
52
|
+
transform: rotate(${({ $angle: t }) => -n + t}deg);
|
53
|
+
z-index: ${d};
|
54
|
+
`, u = o.div`
|
55
|
+
transform: rotate(${({ $angle: t }) => n - t}deg);
|
56
|
+
`, h = o.div`
|
57
|
+
position: absolute;
|
58
|
+
top: 0;
|
59
|
+
transform: translateY(${r + 25}px);
|
60
|
+
`, v = o(i)`
|
61
|
+
animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
|
62
|
+
ease-in-out ${a}s forwards;
|
63
|
+
`, C = o(i)`
|
64
|
+
animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
|
65
|
+
ease ${a}s forwards;
|
66
|
+
`, I = o.div`
|
67
|
+
height: 100%;
|
68
|
+
width: 100%;
|
69
|
+
`, R = o(i)`
|
70
|
+
animation: ${({ $isTargetAchieved: t }) => t ? p : "unset"}
|
71
|
+
${m}s ease infinite forwards;
|
72
|
+
`;
|
73
|
+
export {
|
74
|
+
g as ContentContainer,
|
75
|
+
T as DigitalMeter,
|
76
|
+
v as HelperTextPrimary,
|
77
|
+
C as HelperTextSecondary,
|
78
|
+
h as HelperTextWrapper,
|
79
|
+
N as LineMarking,
|
80
|
+
b as MarkingContainer,
|
81
|
+
u as MarkingText,
|
82
|
+
E as NumberCountContainer,
|
83
|
+
R as RainboxColorText,
|
84
|
+
I as TargetAchievedTextLottie
|
85
|
+
};
|
86
|
+
//# sourceMappingURL=digital-meter-styled.js.map
|
@@ -0,0 +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;"}
|
@@ -0,0 +1,163 @@
|
|
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";
|
5
|
+
import { GAME_LAUNCHER_SIZE as h } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
6
|
+
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(
|
14
|
+
({
|
15
|
+
show: s,
|
16
|
+
value: a,
|
17
|
+
maxValue: i,
|
18
|
+
targetValue: c,
|
19
|
+
displayText: H,
|
20
|
+
progressType: A,
|
21
|
+
helperTextPrimary: N,
|
22
|
+
helperTextSecondary: S,
|
23
|
+
onComplete: p
|
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();
|
32
|
+
}, B * 1e3)), () => {
|
33
|
+
t && clearTimeout(t), r && clearTimeout(r);
|
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,
|
49
|
+
{
|
50
|
+
targetAngle: l,
|
51
|
+
strokeWidth: 16,
|
52
|
+
color: "BLACK_5",
|
53
|
+
radius: (h - _) / 2,
|
54
|
+
duration: 0
|
55
|
+
}
|
56
|
+
),
|
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(
|
60
|
+
g,
|
61
|
+
{
|
62
|
+
$renderAs: "ah1",
|
63
|
+
$color: "GREEN_4",
|
64
|
+
$isTargetAchieved: n,
|
65
|
+
children: /* @__PURE__ */ e(
|
66
|
+
F,
|
67
|
+
{
|
68
|
+
initialValue: 0,
|
69
|
+
targetValue: a,
|
70
|
+
durationInSec: m,
|
71
|
+
delayInSec: $
|
72
|
+
}
|
73
|
+
)
|
74
|
+
}
|
75
|
+
) }),
|
76
|
+
A === "stepper" && /* @__PURE__ */ o(L, { $renderAs: "ac2", $color: "WHITE", children: [
|
77
|
+
"/",
|
78
|
+
i
|
79
|
+
] })
|
80
|
+
] }),
|
81
|
+
/* @__PURE__ */ e(M, { height: 8 }),
|
82
|
+
/* @__PURE__ */ e(L, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: H })
|
83
|
+
] }) }),
|
84
|
+
A === "stepper" && Array.from({ length: a }, (t, r) => {
|
85
|
+
const d = l / i;
|
86
|
+
return /* @__PURE__ */ e(
|
87
|
+
f,
|
88
|
+
{
|
89
|
+
startAngle: d * r,
|
90
|
+
targetAngle: d,
|
91
|
+
strokeWidth: 12,
|
92
|
+
color: "GREEN_4",
|
93
|
+
radius: (h - _) / 2,
|
94
|
+
mode: "fade",
|
95
|
+
duration: m / i,
|
96
|
+
delay: $ + m / i * r,
|
97
|
+
playRainbowColors: n
|
98
|
+
},
|
99
|
+
r
|
100
|
+
);
|
101
|
+
}),
|
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(
|
107
|
+
g,
|
108
|
+
{
|
109
|
+
$renderAs: "ac4-black",
|
110
|
+
$isTargetAchieved: r === c && n,
|
111
|
+
$color: r === c ? "GREEN_4" : "WHITE_T_60",
|
112
|
+
children: r
|
113
|
+
}
|
114
|
+
) }) }, r)
|
115
|
+
] });
|
116
|
+
}),
|
117
|
+
A === "linear" && /* @__PURE__ */ o(T, { children: [
|
118
|
+
/* @__PURE__ */ e(
|
119
|
+
f,
|
120
|
+
{
|
121
|
+
targetAngle: a * l / i,
|
122
|
+
strokeWidth: 12,
|
123
|
+
color: "GREEN_4",
|
124
|
+
radius: (h - _) / 2,
|
125
|
+
duration: m,
|
126
|
+
delay: $,
|
127
|
+
playRainbowColors: n
|
128
|
+
}
|
129
|
+
),
|
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,
|
134
|
+
{
|
135
|
+
$angle: t * l / i,
|
136
|
+
children: /* @__PURE__ */ e(u, { $angle: t * l / i, children: /* @__PURE__ */ e(
|
137
|
+
g,
|
138
|
+
{
|
139
|
+
$renderAs: "ac4-black",
|
140
|
+
$color: t === c ? "GREEN_4" : "WHITE_T_60",
|
141
|
+
$isTargetAchieved: a >= t && n && t === c,
|
142
|
+
children: t
|
143
|
+
}
|
144
|
+
) })
|
145
|
+
},
|
146
|
+
r
|
147
|
+
))
|
148
|
+
] })
|
149
|
+
] }),
|
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 })
|
155
|
+
] })
|
156
|
+
] })
|
157
|
+
] }) : null;
|
158
|
+
}
|
159
|
+
);
|
160
|
+
export {
|
161
|
+
cr as DigitalMeter
|
162
|
+
};
|
163
|
+
//# sourceMappingURL=digital-meter.js.map
|
@@ -0,0 +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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"}
|