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

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 (98) hide show
  1. package/dist/assets/lottie/lottie.js +0 -12
  2. package/dist/assets/lottie/lottie.js.map +1 -1
  3. package/dist/features/circle-games/game-launcher/comps/segmented-game-card/constants.js +6 -6
  4. package/dist/features/circle-games/game-launcher/comps/segmented-game-card/constants.js.map +1 -1
  5. package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.js +73 -29
  6. package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.js.map +1 -1
  7. package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js +85 -87
  8. package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js.map +1 -1
  9. package/dist/features/circle-games/game-launcher/dal/use-get-circle-home-details-dal/use-get-circle-home-details-dal.js +15 -25
  10. package/dist/features/circle-games/game-launcher/dal/use-get-circle-home-details-dal/use-get-circle-home-details-dal.js.map +1 -1
  11. package/dist/features/circle-games/game-launcher/game-launcher-analytics-events.js +7 -8
  12. package/dist/features/circle-games/game-launcher/game-launcher-analytics-events.js.map +1 -1
  13. package/dist/features/circle-games/game-launcher/game-launcher.js +65 -109
  14. package/dist/features/circle-games/game-launcher/game-launcher.js.map +1 -1
  15. package/dist/features/circle-games/games/web-view/enums/project-ids-enum.js +14 -0
  16. package/dist/features/circle-games/games/web-view/enums/project-ids-enum.js.map +1 -0
  17. package/dist/features/circle-games/games/web-view/enums/project-type-enum.js +1 -1
  18. package/dist/features/circle-games/games/web-view/enums/project-type-enum.js.map +1 -1
  19. package/dist/features/circle-games/games/web-view/web-view-types.js.map +1 -1
  20. package/dist/features/circle-games/games/web-view/web-view.js +82 -69
  21. package/dist/features/circle-games/games/web-view/web-view.js.map +1 -1
  22. package/dist/features/post-game-stats/accuracy/accuracy-styled.js +16 -17
  23. package/dist/features/post-game-stats/accuracy/accuracy-styled.js.map +1 -1
  24. package/dist/features/post-game-stats/clock/clock-styled.js +10 -11
  25. package/dist/features/post-game-stats/clock/clock-styled.js.map +1 -1
  26. package/dist/features/post-game-stats/enums/post-game-stats-enum.js +1 -1
  27. package/dist/features/post-game-stats/enums/post-game-stats-enum.js.map +1 -1
  28. package/dist/features/post-game-stats/points/points.js +27 -33
  29. package/dist/features/post-game-stats/points/points.js.map +1 -1
  30. package/dist/features/post-game-stats/post-game-stats-styled.js +1 -1
  31. package/dist/features/post-game-stats/post-game-stats-styled.js.map +1 -1
  32. package/dist/features/post-game-stats/post-game-stats.js +61 -83
  33. package/dist/features/post-game-stats/post-game-stats.js.map +1 -1
  34. package/dist/features/post-game-stats/streak/streak-styled.js +17 -18
  35. package/dist/features/post-game-stats/streak/streak-styled.js.map +1 -1
  36. package/dist/features/trial-session/comps/trial-circle-game/constants.js.map +1 -1
  37. package/dist/features/trial-session/comps/trial-circle-game/trial-circle-game.js.map +1 -1
  38. package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js +148 -142
  39. package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js.map +1 -1
  40. package/dist/index.d.ts +111 -122
  41. package/dist/index.js +209 -206
  42. package/dist/index.js.map +1 -1
  43. package/package.json +1 -1
  44. package/dist/features/circle-games/game-launcher/comps/card-container/card-container-styled.js +0 -53
  45. package/dist/features/circle-games/game-launcher/comps/card-container/card-container-styled.js.map +0 -1
  46. package/dist/features/circle-games/game-launcher/comps/card-container/card-container.js +0 -24
  47. package/dist/features/circle-games/game-launcher/comps/card-container/card-container.js.map +0 -1
  48. package/dist/features/circle-games/game-launcher/comps/card-container/constants.js +0 -7
  49. package/dist/features/circle-games/game-launcher/comps/card-container/constants.js.map +0 -1
  50. package/dist/features/circle-games/game-launcher/comps/tables-card/constants.js +0 -20
  51. package/dist/features/circle-games/game-launcher/comps/tables-card/constants.js.map +0 -1
  52. package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js +0 -24
  53. package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js.map +0 -1
  54. package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js +0 -48
  55. package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js.map +0 -1
  56. package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star-styled.js +0 -25
  57. package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star-styled.js.map +0 -1
  58. package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js +0 -57
  59. package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js.map +0 -1
  60. package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.js +0 -27
  61. package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.js.map +0 -1
  62. package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js +0 -37
  63. package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js.map +0 -1
  64. package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js +0 -154
  65. package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js.map +0 -1
  66. package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +0 -236
  67. package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +0 -1
  68. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js +0 -17
  69. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map +0 -1
  70. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js +0 -47
  71. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js.map +0 -1
  72. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js +0 -6
  73. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js.map +0 -1
  74. package/dist/features/post-game-stats/digital-meter/constants.js +0 -16
  75. package/dist/features/post-game-stats/digital-meter/constants.js.map +0 -1
  76. package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +0 -87
  77. package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +0 -1
  78. package/dist/features/post-game-stats/digital-meter/digital-meter.js +0 -185
  79. package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +0 -1
  80. package/dist/features/post-game-stats/digital-meter/helper.js +0 -33
  81. package/dist/features/post-game-stats/digital-meter/helper.js.map +0 -1
  82. package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js +0 -29
  83. package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js.map +0 -1
  84. package/dist/features/post-game-stats/number-count-animation/number-count-animation.js +0 -20
  85. package/dist/features/post-game-stats/number-count-animation/number-count-animation.js.map +0 -1
  86. package/dist/static/advance-mode-segment-lottie.51ff6707.json +0 -1
  87. package/dist/static/infinite-button-bg.5909225e.json +0 -1
  88. package/dist/static/infinite-button-symbol.aa31350c.json +0 -1
  89. package/dist/static/point2.7cec6e24.json +0 -1
  90. package/dist/static/point3.f96fe7aa.json +0 -1
  91. package/dist/static/point4.fe04fb83.json +0 -1
  92. package/dist/static/random-mode-segment-lottie.79cf1c07.json +0 -1
  93. package/dist/static/sequence-mode-segment-lottie.11ac49e9.json +0 -1
  94. package/dist/static/table-mode-reveal.b44a82c3.json +0 -1
  95. package/dist/static/table-mode-star.b8a1d762.json +0 -1
  96. package/dist/static/table-segment-star.78e851d6.json +0 -1
  97. package/dist/static/target-achieved-text.053bd142.json +0 -2830
  98. package/dist/static/target-achieved-text.10db8475.json +0 -1
@@ -1,7 +1,6 @@
1
1
  const t = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : "/", s = {
2
2
  ACCURACY_METER: `${t}static/accuracy-meter.99585cba.json`,
3
3
  ACCURACY_NEEDLE: `${t}static/accuracy-needle.cd6e63ac.json`,
4
- ADVANCE_MODE_SEGMENT_LOTTIE: `${t}static/advance-mode-segment-lottie.51ff6707.json`,
5
4
  BEGINNER1X: `${t}static/beginner1x.489908a7.json`,
6
5
  BRONZE_1: `${t}static/bronze-1.da4e4b5f.json`,
7
6
  BRONZE_2: `${t}static/bronze-2.97f9c639.json`,
@@ -25,8 +24,6 @@ const t = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : "/", s = {
25
24
  GOLD_1: `${t}static/gold-1.ab2489fe.json`,
26
25
  GOLD_2: `${t}static/gold-2.34045826.json`,
27
26
  GOLD_3: `${t}static/gold-3.d704698b.json`,
28
- INFINITE_BUTTON_BG: `${t}static/infinite-button-bg.5909225e.json`,
29
- INFINITE_BUTTON_SYMBOL: `${t}static/infinite-button-symbol.aa31350c.json`,
30
27
  LEVELUP_RINGS: `${t}static/levelup-rings.b1055283.json`,
31
28
  MEDIUM: `${t}static/medium.94c3829b.json`,
32
29
  NUDGE_TAP: `${t}static/nudge-tap.5cb30093.json`,
@@ -36,19 +33,14 @@ const t = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : "/", s = {
36
33
  POINT1: `${t}static/point1.b53831de.json`,
37
34
  POINT20: `${t}static/point20.c88d776d.json`,
38
35
  POINT25: `${t}static/point25.a18c346a.json`,
39
- POINT2: `${t}static/point2.7cec6e24.json`,
40
36
  POINT30: `${t}static/point30.c5224b0b.json`,
41
37
  POINT35: `${t}static/point35.fad343dd.json`,
42
- POINT3: `${t}static/point3.f96fe7aa.json`,
43
38
  POINT40: `${t}static/point40.10a16f72.json`,
44
39
  POINT45: `${t}static/point45.2ad7561f.json`,
45
- POINT4: `${t}static/point4.fe04fb83.json`,
46
40
  POINT50: `${t}static/point50.5718cb3d.json`,
47
41
  POINT5: `${t}static/point5.da40ed1f.json`,
48
42
  POINT60: `${t}static/point60.17380d9f.json`,
49
43
  PROFICIENT1X: `${t}static/proficient1x.fa6e7b80.json`,
50
- RANDOM_MODE_SEGMENT_LOTTIE: `${t}static/random-mode-segment-lottie.79cf1c07.json`,
51
- SEQUENCE_MODE_SEGMENT_LOTTIE: `${t}static/sequence-mode-segment-lottie.11ac49e9.json`,
52
44
  SILVER_1: `${t}static/silver-1.0396328a.json`,
53
45
  SILVER_2: `${t}static/silver-2.bf50615f.json`,
54
46
  SILVER_3: `${t}static/silver-3.13d66b84.json`,
@@ -56,10 +48,6 @@ const t = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : "/", s = {
56
48
  SPINNER_WHITE: `${t}static/spinner-white.639e0d87.json`,
57
49
  SPLASH_SCREEN: `${t}static/splash-screen.bbf567ce.json`,
58
50
  STAY_CONNECTED_LOTTIE: `${t}static/stay-connected-lottie.111439b3.json`,
59
- TABLE_MODE_REVEAL: `${t}static/table-mode-reveal.b44a82c3.json`,
60
- TABLE_MODE_STAR: `${t}static/table-mode-star.b8a1d762.json`,
61
- TABLE_SEGMENT_STAR: `${t}static/table-segment-star.78e851d6.json`,
62
- TARGET_ACHIEVED_TEXT: `${t}static/target-achieved-text.10db8475.json`,
63
51
  TEACHER_VALIDATION: `${t}static/teacher-validation.7577ecdc.json`,
64
52
  TOTAL_STREAK: `${t}static/total-streak.d5ce7669.json`,
65
53
  TOTAL_TIME: `${t}static/total-time.d979cbb9.json`,
@@ -1 +1 @@
1
- {"version":3,"file":"lottie.js","sources":["../../../src/assets/lottie/lottie.ts"],"sourcesContent":["const PREFIX = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : '/';\n\nconst LOTTIE = {\n ACCURACY_METER: `${PREFIX}static/accuracy-meter.99585cba.json`,\n ACCURACY_NEEDLE: `${PREFIX}static/accuracy-needle.cd6e63ac.json`,\n ADVANCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/advance-mode-segment-lottie.51ff6707.json`,\n BEGINNER1X: `${PREFIX}static/beginner1x.489908a7.json`,\n BRONZE_1: `${PREFIX}static/bronze-1.da4e4b5f.json`,\n BRONZE_2: `${PREFIX}static/bronze-2.97f9c639.json`,\n BRONZE_3: `${PREFIX}static/bronze-3.6a433ebd.json`,\n CIRCULAR_LOADER: `${PREFIX}static/circular-loader.a5a1a0a6.json`,\n CLOCK_30MIN: `${PREFIX}static/clock-30min.eae818b8.json`,\n CLOCK_45MIN: `${PREFIX}static/clock-45min.df8adf51.json`,\n CLOCK_60MIN: `${PREFIX}static/clock-60min.2b48d875.json`,\n CLOCK_90MIN: `${PREFIX}static/clock-90min.3e557ed7.json`,\n COLOR_1: `${PREFIX}static/color-1.45101b9a.json`,\n COLOR_2: `${PREFIX}static/color-2.ccdc7d0a.json`,\n COLOR_3: `${PREFIX}static/color-3.5e8e1422.json`,\n DIFFICULT: `${PREFIX}static/difficult.6846c064.json`,\n EASY: `${PREFIX}static/easy.68242ddd.json`,\n EASY_RESCHEDULING_LOTTIE: `${PREFIX}static/easy-rescheduling-lottie.28026af9.json`,\n ELITE_CIRCLE: `${PREFIX}static/elite-circle.3df58972.json`,\n ERROR_LOTTIE: `${PREFIX}static/error-lottie.b3507a4b.json`,\n FAMILIAR1X: `${PREFIX}static/familiar1x.7c9c7f15.json`,\n FIFTEEN_MIN_CLOCK: `${PREFIX}static/fifteen-min-clock.0af4e303.json`,\n FIVE_MIN_CLOCK: `${PREFIX}static/five-min-clock.6be5cc41.json`,\n GOLD_1: `${PREFIX}static/gold-1.ab2489fe.json`,\n GOLD_2: `${PREFIX}static/gold-2.34045826.json`,\n GOLD_3: `${PREFIX}static/gold-3.d704698b.json`,\n INFINITE_BUTTON_BG: `${PREFIX}static/infinite-button-bg.5909225e.json`,\n INFINITE_BUTTON_SYMBOL: `${PREFIX}static/infinite-button-symbol.aa31350c.json`,\n LEVELUP_RINGS: `${PREFIX}static/levelup-rings.b1055283.json`,\n MEDIUM: `${PREFIX}static/medium.94c3829b.json`,\n NUDGE_TAP: `${PREFIX}static/nudge-tap.5cb30093.json`,\n POINT100: `${PREFIX}static/point100.1df16f82.json`,\n POINT10: `${PREFIX}static/point10.7b5e536d.json`,\n POINT15: `${PREFIX}static/point15.fea00c32.json`,\n POINT1: `${PREFIX}static/point1.b53831de.json`,\n POINT20: `${PREFIX}static/point20.c88d776d.json`,\n POINT25: `${PREFIX}static/point25.a18c346a.json`,\n POINT2: `${PREFIX}static/point2.7cec6e24.json`,\n POINT30: `${PREFIX}static/point30.c5224b0b.json`,\n POINT35: `${PREFIX}static/point35.fad343dd.json`,\n POINT3: `${PREFIX}static/point3.f96fe7aa.json`,\n POINT40: `${PREFIX}static/point40.10a16f72.json`,\n POINT45: `${PREFIX}static/point45.2ad7561f.json`,\n POINT4: `${PREFIX}static/point4.fe04fb83.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 TABLE_MODE_STAR: `${PREFIX}static/table-mode-star.b8a1d762.json`,\n TABLE_SEGMENT_STAR: `${PREFIX}static/table-segment-star.78e851d6.json`,\n TARGET_ACHIEVED_TEXT: `${PREFIX}static/target-achieved-text.10db8475.json`,\n TEACHER_VALIDATION: `${PREFIX}static/teacher-validation.7577ecdc.json`,\n TOTAL_STREAK: `${PREFIX}static/total-streak.d5ce7669.json`,\n TOTAL_TIME: `${PREFIX}static/total-time.d979cbb9.json`,\n TOTAL_TIME_SPENT: `${PREFIX}static/total-time-spent.434005d3.json`,\n TOURNAMENT_RIPPLE: `${PREFIX}static/tournament-ripple.e5c239a5.json`,\n TRACK_PROGRESS_LOTTIE: `${PREFIX}static/track-progress-lottie.422108cf.json`,\n};\n\nexport { LOTTIE };\n"],"names":["PREFIX","LOTTIE"],"mappings":"AAAA,MAAMA,IAAS,OAAO,kBAAkB,OAAO,kBAAkB,KAE3DC,IAAS;AAAA,EACb,gBAAgB,GAAGD,CAAM;AAAA,EACzB,iBAAiB,GAAGA,CAAM;AAAA,EAC1B,6BAA6B,GAAGA,CAAM;AAAA,EACtC,YAAY,GAAGA,CAAM;AAAA,EACrB,UAAU,GAAGA,CAAM;AAAA,EACnB,UAAU,GAAGA,CAAM;AAAA,EACnB,UAAU,GAAGA,CAAM;AAAA,EACnB,iBAAiB,GAAGA,CAAM;AAAA,EAC1B,aAAa,GAAGA,CAAM;AAAA,EACtB,aAAa,GAAGA,CAAM;AAAA,EACtB,aAAa,GAAGA,CAAM;AAAA,EACtB,aAAa,GAAGA,CAAM;AAAA,EACtB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,WAAW,GAAGA,CAAM;AAAA,EACpB,MAAM,GAAGA,CAAM;AAAA,EACf,0BAA0B,GAAGA,CAAM;AAAA,EACnC,cAAc,GAAGA,CAAM;AAAA,EACvB,cAAc,GAAGA,CAAM;AAAA,EACvB,YAAY,GAAGA,CAAM;AAAA,EACrB,mBAAmB,GAAGA,CAAM;AAAA,EAC5B,gBAAgB,GAAGA,CAAM;AAAA,EACzB,QAAQ,GAAGA,CAAM;AAAA,EACjB,QAAQ,GAAGA,CAAM;AAAA,EACjB,QAAQ,GAAGA,CAAM;AAAA,EACjB,oBAAoB,GAAGA,CAAM;AAAA,EAC7B,wBAAwB,GAAGA,CAAM;AAAA,EACjC,eAAe,GAAGA,CAAM;AAAA,EACxB,QAAQ,GAAGA,CAAM;AAAA,EACjB,WAAW,GAAGA,CAAM;AAAA,EACpB,UAAU,GAAGA,CAAM;AAAA,EACnB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,QAAQ,GAAGA,CAAM;AAAA,EACjB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,QAAQ,GAAGA,CAAM;AAAA,EACjB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,QAAQ,GAAGA,CAAM;AAAA,EACjB,SAAS,GAAGA,CAAM;AAAA,EAClB,SAAS,GAAGA,CAAM;AAAA,EAClB,QAAQ,GAAGA,CAAM;AAAA,EACjB,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,iBAAiB,GAAGA,CAAM;AAAA,EAC1B,oBAAoB,GAAGA,CAAM;AAAA,EAC7B,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;"}
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 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 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 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 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,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,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,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,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,11 +1,11 @@
1
- import { GAME_LAUNCHER_SIZE as E } from "../card-container/constants.js";
2
- const t = E * 17.5 / 100, _ = 5, o = Math.ceil(E * 87.5 / 100), R = E / 2 * (37.5 / 100), T = E / 2 * (12.5 / 100), S = Math.PI / 180, c = Math.sin(30 * S) * (E / 2 - _);
1
+ const _ = window.innerHeight > 800 ? 400 : 296, E = _, t = E * 17.5 / 100, A = 5, n = Math.ceil(E * 87.5 / 100), o = E / 2 * (37.5 / 100), R = E / 2 * (12.5 / 100), S = Math.PI / 180, c = Math.sin(30 * S) * (E / 2 - A);
3
2
  export {
4
- o as ASSET_CONTAINER_SIZE,
5
- R as ASSET_OFFSET_X,
6
- T as ASSET_OFFSET_Y,
3
+ n as ASSET_CONTAINER_SIZE,
4
+ o as ASSET_OFFSET_X,
5
+ R as ASSET_OFFSET_Y,
7
6
  t as GAME_LAUNCHER_ASSET_PADDING,
8
- _ as GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,
7
+ A as GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,
8
+ E as GAME_LAUNCHER_SIZE,
9
9
  c as delta
10
10
  };
11
11
  //# sourceMappingURL=constants.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/constants.ts"],"sourcesContent":["import { GAME_LAUNCHER_SIZE } from '../card-container/constants';\n\nexport const GAME_LAUNCHER_ASSET_PADDING = (GAME_LAUNCHER_SIZE * 17.5) / 100;\n\n// to show the stroke of the card below points, this width needs to be reduced\nexport const GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH = 5;\n\n// asset container needs to be 350/400 % of GAME LAUNCHER SIZE\nexport const ASSET_CONTAINER_SIZE = Math.ceil((GAME_LAUNCHER_SIZE * 87.5) / 100);\n\n// ASSET x-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_X = (GAME_LAUNCHER_SIZE / 2) * (37.5 / 100);\n\n// ASSET y-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_Y = (GAME_LAUNCHER_SIZE / 2) * (12.5 / 100);\n\nconst RADIAN = Math.PI / 180;\n// const BORDER_WIDTH = 2;\n\n// delta created by a segment from x axis is 30deg\n// sin30 = delta/(CARD_SIZE/2)\nexport const delta =\n Math.sin(30 * RADIAN) * (GAME_LAUNCHER_SIZE / 2 - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH);\n"],"names":["GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","ASSET_CONTAINER_SIZE","ASSET_OFFSET_X","ASSET_OFFSET_Y","RADIAN","delta"],"mappings":";AAEa,MAAAA,IAA+BC,IAAqB,OAAQ,KAG5DC,IAA2C,GAG3CC,IAAuB,KAAK,KAAMF,IAAqB,OAAQ,GAAG,GAGlEG,IAAkBH,IAAqB,KAAM,OAAO,MAGpDI,IAAkBJ,IAAqB,KAAM,OAAO,MAE3DK,IAAS,KAAK,KAAK,KAKZC,IACX,KAAK,IAAI,KAAKD,CAAM,KAAKL,IAAqB,IAAIC;"}
1
+ {"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/constants.ts"],"sourcesContent":["const CARD_CONTAINER_SIZE = window.innerHeight > 800 ? 400 : 296;\n\nexport const GAME_LAUNCHER_SIZE = CARD_CONTAINER_SIZE;\nexport const GAME_LAUNCHER_ASSET_PADDING = (GAME_LAUNCHER_SIZE * 17.5) / 100;\n\n// to show the stroke of the card below points, this width needs to be reduced\nexport const GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH = 5;\n\n// asset container needs to be 350/400 % of GAME LAUNCHER SIZE\nexport const ASSET_CONTAINER_SIZE = Math.ceil((GAME_LAUNCHER_SIZE * 87.5) / 100);\n\n// ASSET x-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_X = (GAME_LAUNCHER_SIZE / 2) * (37.5 / 100);\n\n// ASSET y-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_Y = (GAME_LAUNCHER_SIZE / 2) * (12.5 / 100);\n\nconst RADIAN = Math.PI / 180;\n// const BORDER_WIDTH = 2;\n\n// delta created by a segment from x axis is 30deg\n// sin30 = delta/(CARD_SIZE/2)\nexport const delta =\n Math.sin(30 * RADIAN) * (GAME_LAUNCHER_SIZE / 2 - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH);\n"],"names":["CARD_CONTAINER_SIZE","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","ASSET_CONTAINER_SIZE","ASSET_OFFSET_X","ASSET_OFFSET_Y","RADIAN","delta"],"mappings":"AAAA,MAAMA,IAAsB,OAAO,cAAc,MAAM,MAAM,KAEhDC,IAAqBD,GACrBE,IAA+BD,IAAqB,OAAQ,KAG5DE,IAA2C,GAG3CC,IAAuB,KAAK,KAAMH,IAAqB,OAAQ,GAAG,GAGlEI,IAAkBJ,IAAqB,KAAM,OAAO,MAGpDK,IAAkBL,IAAqB,KAAM,OAAO,MAE3DM,IAAS,KAAK,KAAK,KAKZC,IACX,KAAK,IAAI,KAAKD,CAAM,KAAKN,IAAqB,IAAIE;"}
@@ -1,11 +1,30 @@
1
1
  import o from "styled-components";
2
- import { GAME_LAUNCHER_SIZE as e } from "../card-container/constants.js";
3
- import { GAME_LAUNCHER_ASSET_PADDING as d, delta as p, ASSET_OFFSET_X as r, ASSET_OFFSET_Y as n, ASSET_CONTAINER_SIZE as i } from "./constants.js";
2
+ import d from "../../../../ui/layout/flex-view.js";
3
+ import p from "../../../../ui/text/text.js";
4
+ import { GAME_LAUNCHER_SIZE as e, GAME_LAUNCHER_ASSET_PADDING as a, delta as l, ASSET_OFFSET_X as n, ASSET_OFFSET_Y as r, ASSET_CONTAINER_SIZE as i } from "./constants.js";
4
5
  const g = o.div`
6
+ position: relative;
7
+ display: flex;
8
+ justify-content: center;
9
+ `, h = o.div`
10
+ position: relative;
11
+ border-radius: ${e}px;
12
+ height: ${e}px;
13
+ width: ${e}px;
14
+ display: flex;
15
+ flex-direction: column;
16
+ justify-content: center;
17
+ align-items: center;
18
+ overflow: hidden;
19
+ align-self: center;
20
+ backdrop-filter: blur(0px);
21
+ -webkit-backdrop-filter: blur(0px);
22
+ flex-shrink: 0;
23
+ `, b = o.div`
5
24
  position: absolute;
6
25
  z-index: 5;
7
- height: ${e + d}px;
8
- width: ${e + d}px;
26
+ height: ${e + a}px;
27
+ width: ${e + a}px;
9
28
  pointer-events: none;
10
29
  `, s = o.div`
11
30
  height: ${e}px;
@@ -18,24 +37,24 @@ const g = o.div`
18
37
  border: 2px solid ${({ theme: t }) => t.colors.WHITE};
19
38
  backdrop-filter: blur(0px);
20
39
  -webkit-backdrop-filter: blur(0px);
21
- `, h = o(s)`
40
+ `, u = o(s)`
22
41
  transform-origin: bottom right;
23
42
  transform: rotate(-32deg) skew(-32deg);
24
43
  translate: -${e / 2}px -${e / 2}px;
25
44
  border-right-width: 1px;
26
- `, c = o(s)`
45
+ `, $ = o(s)`
27
46
  transform-origin: bottom left;
28
47
  transform: rotate(32deg) skew(32deg);
29
48
  translate: ${e / 2}px -${e / 2}px;
30
49
  border-left-width: 1px;
31
- `, f = o(s)`
50
+ `, w = o(s)`
32
51
  height: ${e / 2}px;
33
52
  width: ${e}px;
34
53
  bottom: 0;
35
54
  left: 0;
36
55
  z-index: 1;
37
56
  border: none;
38
- `, m = o.div`
57
+ `, S = o.div`
39
58
  height: inherit;
40
59
  width: inherit;
41
60
  overflow: hidden;
@@ -43,16 +62,16 @@ const g = o.div`
43
62
  display: flex;
44
63
  justify-content: center;
45
64
  align-items: center;
46
- `, b = o.div`
65
+ `, k = o.div`
47
66
  flex: 1;
48
67
  background: transparent;
49
- height: ${e / 2 + p}px;
68
+ height: ${e / 2 + l}px;
50
69
  width: ${e}px;
51
70
  position: absolute;
52
71
  display: flex;
53
72
  justify-content: center;
54
73
  align-items: center;
55
- bottom: ${({ $segmentType: t = "bottom" }) => t === "bottom" ? "unset" : `-${p}px`};
74
+ bottom: ${({ $segmentType: t = "bottom" }) => t === "bottom" ? "unset" : `-${l}px`};
56
75
  transform-origin: ${({ $segmentType: t }) => {
57
76
  switch (t) {
58
77
  case "left":
@@ -73,11 +92,11 @@ const g = o.div`
73
92
  return "none";
74
93
  }
75
94
  }};
76
- `, $ = o.div`
95
+ `, v = o.div`
77
96
  position: absolute;
78
- right: ${({ $segmentType: t }) => t === "left" ? `-${r}px` : "unset"};
79
- left: ${({ $segmentType: t }) => t === "right" ? `-${r}px` : "unset"};
80
- bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${n}px` : `-${n}px`};
97
+ right: ${({ $segmentType: t }) => t === "left" ? `-${n}px` : "unset"};
98
+ left: ${({ $segmentType: t }) => t === "right" ? `-${n}px` : "unset"};
99
+ bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${r}px` : `-${r}px`};
81
100
  height: ${i}px;
82
101
  width: ${i}px;
83
102
  display: flex;
@@ -90,11 +109,11 @@ const g = o.div`
90
109
  background: ${({ theme: t }) => t.colors.WHITE_T_15};
91
110
  cursor: pointer;
92
111
  }
93
- `, u = o.div`
112
+ `, E = o.div`
94
113
  position: absolute;
95
- right: ${({ $segmentType: t }) => t === "left" ? `-${r}px` : "unset"};
96
- left: ${({ $segmentType: t }) => t === "right" ? `-${r}px` : "unset"};
97
- bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${n}px` : `-${n}px`};
114
+ right: ${({ $segmentType: t }) => t === "left" ? `-${n}px` : "unset"};
115
+ left: ${({ $segmentType: t }) => t === "right" ? `-${n}px` : "unset"};
116
+ bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${r}px` : `-${r}px`};
98
117
  height: ${i}px;
99
118
  width: ${i}px;
100
119
  z-index: 5;
@@ -104,19 +123,44 @@ const g = o.div`
104
123
  display: flex;
105
124
  align-items: center;
106
125
  justify-content: center;
107
- `, w = o.div`
126
+ `, y = o.div`
108
127
  position: absolute;
109
128
  z-index: 6;
129
+ `, _ = o(d)`
130
+ z-index: 1;
131
+ top: -28px;
132
+ `, A = o(p)`
133
+ transition: color 0.5s ease-in-out;
134
+
135
+ ${({ isAnimated: t }) => t && `
136
+ animation: zoomInOut 1s ease-in-out infinite;
137
+ `}
138
+
139
+ @keyframes zoomInOut {
140
+ 0% {
141
+ transform: scale(1);
142
+ }
143
+ 50% {
144
+ transform: scale(1.05);
145
+ }
146
+ 100% {
147
+ transform: scale(1);
148
+ }
149
+ }
110
150
  `;
111
151
  export {
112
- g as CircularProgressLottieContainer,
113
- w as IconWrapper,
114
- $ as SegmentAssetContainer,
115
- f as SegmentBottom,
116
- m as SegmentContainer,
117
- b as SegmentContentContainer,
118
- h as SegmentLeft,
119
- u as SegmentOverlay,
120
- c as SegmentRight
152
+ A as AnimatedLabel,
153
+ b as CircularProgressLottieContainer,
154
+ _ as ExtendedFlexView,
155
+ y as IconWrapper,
156
+ v as SegmentAssetContainer,
157
+ w as SegmentBottom,
158
+ S as SegmentContainer,
159
+ k as SegmentContentContainer,
160
+ u as SegmentLeft,
161
+ E as SegmentOverlay,
162
+ $ as SegmentRight,
163
+ g as SegmentedCard,
164
+ h as SegmentedCardWrapper
121
165
  };
122
166
  //# sourceMappingURL=segmented-game-card-styled.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"segmented-game-card-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.tsx"],"sourcesContent":["import type { TSegment } from './segmented-game-card-types';\n\nimport styled from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../card-container/constants';\nimport {\n ASSET_CONTAINER_SIZE,\n delta,\n ASSET_OFFSET_X,\n ASSET_OFFSET_Y,\n GAME_LAUNCHER_ASSET_PADDING,\n} from './constants';\n\nexport const CircularProgressLottieContainer = styled.div`\n position: absolute;\n z-index: 5;\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n pointer-events: none;\n`;\n\n// might be needed later-----\n// export const SegmentDevider = styled.div<{ angle: number }>`\n// width: ${GAME_LAUNCHER_SIZE / 2}px;\n// height: 2px;\n// position: absolute;\n// background: #fff;\n// transform-origin: left;\n// transform: ${({ angle }) => `rotate(${angle}deg)`};\n// `;\n\nconst Segment = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n overflow: hidden;\n display: flex;\n position: absolute;\n background: ${({ theme }) => theme.colors.BLACK_1};\n z-index: 2;\n border: 2px solid ${({ theme }) => theme.colors.WHITE};\n backdrop-filter: blur(0px);\n -webkit-backdrop-filter: blur(0px);\n`;\n\nexport const SegmentLeft = styled(Segment)<{\n $angle?: number;\n}>`\n transform-origin: bottom right;\n transform: rotate(-32deg) skew(-32deg);\n translate: -${GAME_LAUNCHER_SIZE / 2}px -${GAME_LAUNCHER_SIZE / 2}px;\n border-right-width: 1px;\n`;\n\nexport const SegmentRight = styled(Segment)<{\n $angle?: number;\n}>`\n transform-origin: bottom left;\n transform: rotate(32deg) skew(32deg);\n translate: ${GAME_LAUNCHER_SIZE / 2}px -${GAME_LAUNCHER_SIZE / 2}px;\n border-left-width: 1px;\n`;\n\nexport const SegmentBottom = styled(Segment)<{\n $angle?: number;\n}>`\n height: ${GAME_LAUNCHER_SIZE / 2}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n bottom: 0;\n left: 0;\n z-index: 1;\n border: none;\n`;\n\nexport const SegmentContainer = styled.div`\n height: inherit;\n width: inherit;\n overflow: hidden;\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const SegmentContentContainer = styled.div<{ $segmentType?: TSegment }>`\n flex: 1;\n background: transparent;\n height: ${GAME_LAUNCHER_SIZE / 2 + delta}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n bottom: ${({ $segmentType = 'bottom' }) => ($segmentType === 'bottom' ? 'unset' : `-${delta}px`)};\n transform-origin: ${({ $segmentType }) => {\n switch ($segmentType) {\n case 'left':\n return 'bottom right';\n case 'right':\n return 'bottom left';\n default:\n return 'unset';\n }\n }};\n transform: ${({ $segmentType = 'bottom' }) => {\n switch ($segmentType) {\n case 'left':\n return 'skew(32deg) rotate(32deg)';\n case 'right':\n return 'skew(-32deg) rotate(-32deg)';\n default:\n return 'none';\n }\n }};\n`;\n\nexport const SegmentAssetContainer = styled.div<{\n $segmentType?: TSegment;\n}>`\n position: absolute;\n right: ${({ $segmentType }) => ($segmentType === 'left' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n left: ${({ $segmentType }) => ($segmentType === 'right' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n bottom: ${({ $segmentType }) =>\n $segmentType === 'bottom' ? `-${ASSET_OFFSET_Y}px` : `-${ASSET_OFFSET_Y}px`};\n height: ${ASSET_CONTAINER_SIZE}px;\n width: ${ASSET_CONTAINER_SIZE}px;\n display: flex;\n align-items: center;\n overflow: hidden;\n background-color: transparent;\n z-index: 1;\n flex-shrink: 0;\n &:hover {\n background: ${({ theme }) => theme.colors.WHITE_T_15};\n cursor: pointer;\n }\n`;\n\nexport const SegmentOverlay = styled.div<{ $segmentType?: TSegment }>`\n position: absolute;\n right: ${({ $segmentType }) => ($segmentType === 'left' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n left: ${({ $segmentType }) => ($segmentType === 'right' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n bottom: ${({ $segmentType }) =>\n $segmentType === 'bottom' ? `-${ASSET_OFFSET_Y}px` : `-${ASSET_OFFSET_Y}px`};\n height: ${ASSET_CONTAINER_SIZE}px;\n width: ${ASSET_CONTAINER_SIZE}px;\n z-index: 5;\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n /* pointer-events: none; */\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const IconWrapper = styled.div`\n position: absolute;\n z-index: 6;\n`;\n"],"names":["CircularProgressLottieContainer","styled","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","Segment","theme","SegmentLeft","SegmentRight","SegmentBottom","SegmentContainer","SegmentContentContainer","delta","$segmentType","SegmentAssetContainer","ASSET_OFFSET_X","ASSET_OFFSET_Y","ASSET_CONTAINER_SIZE","SegmentOverlay","IconWrapper"],"mappings":";;;AAaO,MAAMA,IAAkCC,EAAO;AAAA;AAAA;AAAA,YAG1CC,IAAqBC,CAA2B;AAAA,WACjDD,IAAqBC,CAA2B;AAAA;AAAA,GAcrDC,IAAUH,EAAO;AAAA,YACXC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA,gBAIb,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,sBAE7B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,GAK1CC,IAAcL,EAAOG,CAAO;AAAA;AAAA;AAAA,gBAKzBF,IAAqB,CAAC,OAAOA,IAAqB,CAAC;AAAA;AAAA,GAItDK,IAAeN,EAAOG,CAAO;AAAA;AAAA;AAAA,eAK3BF,IAAqB,CAAC,OAAOA,IAAqB,CAAC;AAAA;AAAA,GAIrDM,IAAgBP,EAAOG,CAAO;AAAA,YAG/BF,IAAqB,CAAC;AAAA,WACvBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhBO,IAAmBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU1BS,IAA0BT,EAAO;AAAA;AAAA;AAAA,YAGlCC,IAAqB,IAAIS,CAAK;AAAA,WAC/BT,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKjB,CAAC,EAAE,cAAAU,IAAe,SAAS,MAAOA,MAAiB,WAAW,UAAU,IAAID,CAAK,IAAK;AAAA,sBAC5E,CAAC,EAAE,cAAAC,QAAmB;AACxC,UAAQA,GAAc;AAAA,IACpB,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF,CAAC;AAAA,eACY,CAAC,EAAE,cAAAA,IAAe,eAAe;AAC5C,UAAQA,GAAc;AAAA,IACpB,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF,CAAC;AAAA,GAGUC,IAAwBZ,EAAO;AAAA;AAAA,WAIjC,CAAC,EAAE,cAAAW,EAAa,MAAOA,MAAiB,SAAS,IAAIE,CAAc,OAAO,OAAQ;AAAA,UACnF,CAAC,EAAE,cAAAF,EAAa,MAAOA,MAAiB,UAAU,IAAIE,CAAc,OAAO,OAAQ;AAAA,YACjF,CAAC,EAAE,cAAAF,EAAA,MACXA,MAAiB,WAAW,IAAIG,CAAc,OAAO,IAAIA,CAAc,IAAI;AAAA,YACnEC,CAAoB;AAAA,WACrBA,CAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAQb,CAAC,EAAE,OAAAX,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,GAK3CY,IAAiBhB,EAAO;AAAA;AAAA,WAE1B,CAAC,EAAE,cAAAW,EAAa,MAAOA,MAAiB,SAAS,IAAIE,CAAc,OAAO,OAAQ;AAAA,UACnF,CAAC,EAAE,cAAAF,EAAa,MAAOA,MAAiB,UAAU,IAAIE,CAAc,OAAO,OAAQ;AAAA,YACjF,CAAC,EAAE,cAAAF,EAAA,MACXA,MAAiB,WAAW,IAAIG,CAAc,OAAO,IAAIA,CAAc,IAAI;AAAA,YACnEC,CAAoB;AAAA,WACrBA,CAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUlBE,IAAcjB,EAAO;AAAA;AAAA;AAAA;"}
1
+ {"version":3,"file":"segmented-game-card-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.tsx"],"sourcesContent":["import type { TSegment } from './segmented-game-card-types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport {\n GAME_LAUNCHER_SIZE,\n ASSET_CONTAINER_SIZE,\n delta,\n ASSET_OFFSET_X,\n ASSET_OFFSET_Y,\n GAME_LAUNCHER_ASSET_PADDING,\n} from './constants';\n\nexport const SegmentedCard = styled.div`\n position: relative;\n display: flex;\n justify-content: center;\n`;\n\nexport const SegmentedCardWrapper = styled.div`\n position: relative;\n border-radius: ${GAME_LAUNCHER_SIZE}px;\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n align-self: center;\n backdrop-filter: blur(0px);\n -webkit-backdrop-filter: blur(0px);\n flex-shrink: 0;\n`;\n\nexport const CircularProgressLottieContainer = styled.div`\n position: absolute;\n z-index: 5;\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n pointer-events: none;\n`;\n\n// might be needed later-----\n// export const SegmentDevider = styled.div<{ angle: number }>`\n// width: ${GAME_LAUNCHER_SIZE / 2}px;\n// height: 2px;\n// position: absolute;\n// background: #fff;\n// transform-origin: left;\n// transform: ${({ angle }) => `rotate(${angle}deg)`};\n// `;\n\nconst Segment = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n overflow: hidden;\n display: flex;\n position: absolute;\n background: ${({ theme }) => theme.colors.BLACK_1};\n z-index: 2;\n border: 2px solid ${({ theme }) => theme.colors.WHITE};\n backdrop-filter: blur(0px);\n -webkit-backdrop-filter: blur(0px);\n`;\n\nexport const SegmentLeft = styled(Segment)<{\n $angle?: number;\n}>`\n transform-origin: bottom right;\n transform: rotate(-32deg) skew(-32deg);\n translate: -${GAME_LAUNCHER_SIZE / 2}px -${GAME_LAUNCHER_SIZE / 2}px;\n border-right-width: 1px;\n`;\n\nexport const SegmentRight = styled(Segment)<{\n $angle?: number;\n}>`\n transform-origin: bottom left;\n transform: rotate(32deg) skew(32deg);\n translate: ${GAME_LAUNCHER_SIZE / 2}px -${GAME_LAUNCHER_SIZE / 2}px;\n border-left-width: 1px;\n`;\n\nexport const SegmentBottom = styled(Segment)<{\n $angle?: number;\n}>`\n height: ${GAME_LAUNCHER_SIZE / 2}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n bottom: 0;\n left: 0;\n z-index: 1;\n border: none;\n`;\n\nexport const SegmentContainer = styled.div`\n height: inherit;\n width: inherit;\n overflow: hidden;\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const SegmentContentContainer = styled.div<{ $segmentType?: TSegment }>`\n flex: 1;\n background: transparent;\n height: ${GAME_LAUNCHER_SIZE / 2 + delta}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n bottom: ${({ $segmentType = 'bottom' }) => ($segmentType === 'bottom' ? 'unset' : `-${delta}px`)};\n transform-origin: ${({ $segmentType }) => {\n switch ($segmentType) {\n case 'left':\n return 'bottom right';\n case 'right':\n return 'bottom left';\n default:\n return 'unset';\n }\n }};\n transform: ${({ $segmentType = 'bottom' }) => {\n switch ($segmentType) {\n case 'left':\n return 'skew(32deg) rotate(32deg)';\n case 'right':\n return 'skew(-32deg) rotate(-32deg)';\n default:\n return 'none';\n }\n }};\n`;\n\nexport const SegmentAssetContainer = styled.div<{\n $segmentType?: TSegment;\n}>`\n position: absolute;\n right: ${({ $segmentType }) => ($segmentType === 'left' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n left: ${({ $segmentType }) => ($segmentType === 'right' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n bottom: ${({ $segmentType }) =>\n $segmentType === 'bottom' ? `-${ASSET_OFFSET_Y}px` : `-${ASSET_OFFSET_Y}px`};\n height: ${ASSET_CONTAINER_SIZE}px;\n width: ${ASSET_CONTAINER_SIZE}px;\n display: flex;\n align-items: center;\n overflow: hidden;\n background-color: transparent;\n z-index: 1;\n flex-shrink: 0;\n &:hover {\n background: ${({ theme }) => theme.colors.WHITE_T_15};\n cursor: pointer;\n }\n`;\n\nexport const SegmentOverlay = styled.div<{ $segmentType?: TSegment }>`\n position: absolute;\n right: ${({ $segmentType }) => ($segmentType === 'left' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n left: ${({ $segmentType }) => ($segmentType === 'right' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n bottom: ${({ $segmentType }) =>\n $segmentType === 'bottom' ? `-${ASSET_OFFSET_Y}px` : `-${ASSET_OFFSET_Y}px`};\n height: ${ASSET_CONTAINER_SIZE}px;\n width: ${ASSET_CONTAINER_SIZE}px;\n z-index: 5;\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n /* pointer-events: none; */\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const IconWrapper = styled.div`\n position: absolute;\n z-index: 6;\n`;\n\nexport const ExtendedFlexView = styled(FlexView)`\n z-index: 1;\n top: -28px;\n`;\n\nexport const AnimatedLabel = styled(Text)<{ isAnimated: boolean }>`\n transition: color 0.5s ease-in-out;\n\n ${({ isAnimated }) =>\n isAnimated &&\n `\n animation: zoomInOut 1s ease-in-out infinite;\n `}\n\n @keyframes zoomInOut {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.05);\n }\n 100% {\n transform: scale(1);\n }\n }\n`;\n"],"names":["SegmentedCard","styled","SegmentedCardWrapper","GAME_LAUNCHER_SIZE","CircularProgressLottieContainer","GAME_LAUNCHER_ASSET_PADDING","Segment","theme","SegmentLeft","SegmentRight","SegmentBottom","SegmentContainer","SegmentContentContainer","delta","$segmentType","SegmentAssetContainer","ASSET_OFFSET_X","ASSET_OFFSET_Y","ASSET_CONTAINER_SIZE","SegmentOverlay","IconWrapper","ExtendedFlexView","FlexView","AnimatedLabel","Text","isAnimated"],"mappings":"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"}
@@ -1,118 +1,116 @@
1
- import { jsxs as I, jsx as t } from "react/jsx-runtime";
2
- import v from "lottie-web";
3
- import { memo as H, forwardRef as w, useRef as T, useState as h, useCallback as c, useImperativeHandle as F, useMemo as E, useEffect as G } from "react";
4
- import $ from "../../../../../assets/line-icons/icons/check.js";
5
- import { LOTTIE as j } from "../../../../../assets/lottie/lottie.js";
6
- import { fetchLottie as O } from "../../../../ui/lottie-animation/helper.js";
7
- import U from "../../../../ui/lottie-animation/lottie-animation.js";
8
- import { CardContainer as x } from "../card-container/card-container.js";
9
- import { CircularProgressLottieContainer as B, SegmentLeft as D, SegmentRight as N, SegmentBottom as q, SegmentContainer as z, SegmentContentContainer as J, SegmentAssetContainer as K, SegmentOverlay as Q, IconWrapper as X } from "./segmented-game-card-styled.js";
1
+ import { jsxs as T, jsx as e } from "react/jsx-runtime";
2
+ import k from "lottie-web";
3
+ import { memo as v, forwardRef as H, useRef as L, useState as C, useCallback as f, useImperativeHandle as w, useMemo as I, useEffect as F } from "react";
4
+ import x from "../../../../../assets/line-icons/icons/check.js";
5
+ import { LOTTIE as G } from "../../../../../assets/lottie/lottie.js";
6
+ import { fetchLottie as j } from "../../../../ui/lottie-animation/helper.js";
7
+ import O from "../../../../ui/lottie-animation/lottie-animation.js";
8
+ import { SegmentedCard as U, ExtendedFlexView as B, AnimatedLabel as D, SegmentedCardWrapper as N, CircularProgressLottieContainer as q, SegmentLeft as z, SegmentRight as J, SegmentBottom as K, SegmentContainer as Q, SegmentContentContainer as V, SegmentAssetContainer as X, SegmentOverlay as Y, IconWrapper as Z } from "./segmented-game-card-styled.js";
10
9
  const S = ({
11
- segmentType: e,
10
+ segmentType: t,
12
11
  isCompleted: i,
13
12
  card: m,
14
13
  name: l,
15
14
  onMouseEnter: s
16
15
  }) => {
17
- const a = T(null);
18
- G(() => {
16
+ const c = L(null);
17
+ F(() => {
19
18
  let o = null;
20
19
  return (async () => {
21
- const p = await O(m);
22
- o = v.loadAnimation({
23
- container: a.current,
20
+ const d = await j(m);
21
+ o = k.loadAnimation({
22
+ container: c.current,
24
23
  renderer: "canvas",
25
24
  loop: !0,
26
25
  autoplay: !0,
27
- animationData: p
26
+ animationData: d
28
27
  });
29
28
  })(), () => o == null ? void 0 : o.destroy();
30
29
  }, [m]);
31
- const d = c(() => s(l), [s, l]);
32
- return /* @__PURE__ */ t(z, { children: /* @__PURE__ */ I(J, { $segmentType: e, onMouseEnter: d, children: [
33
- /* @__PURE__ */ t(K, { ref: a, $segmentType: e }),
34
- i && /* @__PURE__ */ t(Q, { $segmentType: e, children: /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t($, { color: "#fff", height: 40, width: 40 }) }) })
30
+ const a = f(() => s(l), [s, l]);
31
+ return /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ T(V, { $segmentType: t, onMouseEnter: a, children: [
32
+ /* @__PURE__ */ e(X, { ref: c, $segmentType: t }),
33
+ i && /* @__PURE__ */ e(Y, { $segmentType: t, children: /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(x, { color: "#fff", height: 40, width: 40 }) }) })
35
34
  ] }) });
36
- }, Y = ({ data: e, label: i, initialValue: m = 0, value: l, maxValue: s = 1 }, a) => {
37
- const d = T(null), o = T(null), [u, p] = h(i), [L, y] = h(!1), [R, P] = h("WHITE_T_87"), _ = u !== i, C = c((n) => {
38
- p(n);
39
- }, []), b = c(() => {
40
- p(i);
41
- }, [i]), g = c(
42
- (n) => {
43
- var r, f;
44
- (f = (r = e[n]) == null ? void 0 : r.onPress) == null || f.call(r);
45
- },
46
- [e]
47
- ), M = c((n) => {
35
+ }, ee = ({ data: t, label: i, initialValue: m = 0, value: l, maxValue: s = 1 }, c) => {
36
+ const a = L(null), o = L(null), [u, d] = C(i), [A, y] = C(!1), [b, P] = C("WHITE_T_87"), R = u !== i, g = f((n) => {
37
+ d(n);
38
+ }, []), _ = f(() => {
39
+ d(i);
40
+ }, [i]), h = (n) => {
41
+ var r, p;
42
+ (p = (r = t[n]) == null ? void 0 : r.onPress) == null || p.call(r);
43
+ }, $ = f((n) => {
48
44
  y(!0), P(n);
49
45
  }, []);
50
- F(a, () => ({
51
- labelRef: d,
46
+ w(c, () => ({
47
+ labelRef: a,
52
48
  segmentedCardWrapperRef: o,
53
- startLabelAnimation: M
49
+ startLabelAnimation: $
54
50
  }));
55
- const A = E(() => {
51
+ const E = I(() => {
56
52
  if (s <= 0)
57
53
  return;
58
- const n = 92, r = n / s, f = Math.min(r * m, n), k = Math.min(r * l + 1, n);
59
- return [f, k];
60
- }, [m, s, l]), W = E(
54
+ const n = 92, r = n / s, p = Math.min(r * m, n), W = Math.min(r * l + 1, n);
55
+ return [p, W];
56
+ }, [m, s, l]), M = I(
61
57
  () => ({
62
58
  renderer: "canvas",
63
59
  autoplay: !0,
64
60
  loop: !1,
65
- initialSegment: A
61
+ initialSegment: E
66
62
  }),
67
- [A]
63
+ [E]
68
64
  );
69
- return /* @__PURE__ */ I(
70
- x,
71
- {
72
- ref: o,
73
- labelRef: d,
74
- label: u,
75
- isAnimated: L,
76
- onMouseLeave: b,
77
- labelColor: L ? R : _ ? "WHITE_T_87" : "WHITE_T_60",
78
- children: [
79
- /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(U, { src: j.LEVELUP_RINGS, settings: W }) }),
80
- /* @__PURE__ */ t(D, { onClick: () => g(0), children: /* @__PURE__ */ t(
81
- S,
82
- {
83
- segmentType: "left",
84
- card: e[0].card,
85
- name: e[0].name,
86
- isCompleted: e[0].isCompleted,
87
- onMouseEnter: C
88
- }
89
- ) }),
90
- /* @__PURE__ */ t(N, { onClick: () => g(1), children: /* @__PURE__ */ t(
91
- S,
92
- {
93
- segmentType: "right",
94
- card: e[1].card,
95
- name: e[1].name,
96
- isCompleted: e[1].isCompleted,
97
- onMouseEnter: C
98
- }
99
- ) }),
100
- /* @__PURE__ */ t(q, { onClick: () => g(2), children: /* @__PURE__ */ t(
101
- S,
102
- {
103
- segmentType: "bottom",
104
- card: e[2].card,
105
- name: e[2].name,
106
- isCompleted: e[2].isCompleted,
107
- onMouseEnter: C
108
- }
109
- ) })
110
- ]
111
- }
112
- );
113
- }, me = H(w(Y));
65
+ return /* @__PURE__ */ T(U, { children: [
66
+ /* @__PURE__ */ e(B, { $position: "absolute", children: /* @__PURE__ */ e(
67
+ D,
68
+ {
69
+ ref: a,
70
+ $renderAs: "ac3",
71
+ $align: "center",
72
+ $color: A ? b : R ? "WHITE_T_87" : "WHITE_T_60",
73
+ isAnimated: A,
74
+ children: u
75
+ }
76
+ ) }),
77
+ /* @__PURE__ */ T(N, { ref: o, onMouseLeave: _, children: [
78
+ /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(O, { src: G.LEVELUP_RINGS, settings: M }) }),
79
+ /* @__PURE__ */ e(z, { onClick: () => h(0), children: /* @__PURE__ */ e(
80
+ S,
81
+ {
82
+ segmentType: "left",
83
+ card: t[0].card,
84
+ name: t[0].name,
85
+ isCompleted: t[0].isCompleted,
86
+ onMouseEnter: g
87
+ }
88
+ ) }),
89
+ /* @__PURE__ */ e(J, { onClick: () => h(1), children: /* @__PURE__ */ e(
90
+ S,
91
+ {
92
+ segmentType: "right",
93
+ card: t[1].card,
94
+ name: t[1].name,
95
+ isCompleted: t[1].isCompleted,
96
+ onMouseEnter: g
97
+ }
98
+ ) }),
99
+ /* @__PURE__ */ e(K, { onClick: () => h(2), children: /* @__PURE__ */ e(
100
+ S,
101
+ {
102
+ segmentType: "bottom",
103
+ card: t[2].card,
104
+ name: t[2].name,
105
+ isCompleted: t[2].isCompleted,
106
+ onMouseEnter: g
107
+ }
108
+ ) })
109
+ ] })
110
+ ] });
111
+ }, ce = v(H(ee));
114
112
  export {
115
113
  S as SegmentContent,
116
- me as SegmentedGameCard
114
+ ce as SegmentedGameCard
117
115
  };
118
116
  //# sourceMappingURL=segmented-game-card.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"segmented-game-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type {\n IGameCardSegmentContentProps,\n ISegmentedGameCardProps,\n ISegmentedGameCardRefs,\n} from './segmented-game-card-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC, ForwardRefRenderFunction } from 'react';\n\nimport Lottie from 'lottie-web';\nimport {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport CheckIcon from '../../../../../assets/line-icons/icons/check';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport { fetchLottie } from '../../../../ui/lottie-animation/helper';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport { CardContainer } from '../card-container/card-container';\nimport * as Styled from './segmented-game-card-styled';\n\nexport const SegmentContent: FC<IGameCardSegmentContentProps> = ({\n segmentType,\n isCompleted,\n card,\n name,\n onMouseEnter,\n}) => {\n const lottieAnimationRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n let animation: AnimationItem | null = null;\n\n const loadLottie = async () => {\n const lottie = await fetchLottie(card);\n\n animation = Lottie.loadAnimation({\n container: lottieAnimationRef.current as Element,\n renderer: 'canvas',\n loop: true,\n autoplay: true,\n animationData: lottie,\n });\n };\n\n loadLottie();\n\n return () => {\n return animation?.destroy();\n };\n }, [card]);\n\n const handleMouseEnter = useCallback(() => onMouseEnter(name), [onMouseEnter, name]);\n\n return (\n <Styled.SegmentContainer>\n <Styled.SegmentContentContainer $segmentType={segmentType} onMouseEnter={handleMouseEnter}>\n <Styled.SegmentAssetContainer ref={lottieAnimationRef} $segmentType={segmentType} />\n {isCompleted && (\n <Styled.SegmentOverlay $segmentType={segmentType}>\n <Styled.IconWrapper>\n <CheckIcon color=\"#fff\" height={40} width={40} />\n </Styled.IconWrapper>\n </Styled.SegmentOverlay>\n )}\n </Styled.SegmentContentContainer>\n </Styled.SegmentContainer>\n );\n};\n\nconst SegmentedGameCardComponent: ForwardRefRenderFunction<\n ISegmentedGameCardRefs,\n ISegmentedGameCardProps\n> = ({ data, label: gameCategoryLabel, initialValue = 0, value, maxValue = 1 }, ref) => {\n const labelRef = useRef<HTMLDivElement>(null);\n const cardWrapperRef = useRef<HTMLDivElement>(null);\n\n const [label, setLabel] = useState<string>(gameCategoryLabel);\n const [isAnimated, setIsAnimated] = useState(false);\n const [animatedColor, setAnimatedColor] = useState<TColorNames>('WHITE_T_87');\n\n const isLabelHighlighted = label !== gameCategoryLabel;\n\n const onMouseEnter = useCallback((gameName: string) => {\n setLabel(gameName);\n }, []);\n\n const onMouseLeave = useCallback(() => {\n setLabel(gameCategoryLabel);\n }, [gameCategoryLabel]);\n\n const onSegmentPress = useCallback(\n (index: number) => {\n data[index]?.onPress?.();\n },\n [data],\n );\n\n const startLabelAnimation = useCallback((color: TColorNames) => {\n setIsAnimated(true);\n setAnimatedColor(color);\n }, []);\n\n useImperativeHandle(ref, () => ({\n labelRef,\n segmentedCardWrapperRef: cardWrapperRef,\n startLabelAnimation,\n }));\n\n const animationSegments: [number, number] | undefined = useMemo(() => {\n if (maxValue <= 0) {\n return;\n }\n\n const totalFrames = 92;\n const framesPerValue = totalFrames / maxValue;\n\n const initialFrameToPlay = Math.min(framesPerValue * initialValue, totalFrames);\n const finalFrameToPlay = Math.min(framesPerValue * value + 1, totalFrames);\n\n return [initialFrameToPlay, finalFrameToPlay];\n }, [initialValue, maxValue, value]);\n\n const levelUpAnimationSettings = useMemo(\n () => ({\n renderer: 'canvas',\n autoplay: true,\n loop: false,\n initialSegment: animationSegments,\n }),\n [animationSegments],\n );\n\n return (\n <CardContainer\n ref={cardWrapperRef}\n labelRef={labelRef}\n label={label}\n isAnimated={isAnimated}\n onMouseLeave={onMouseLeave}\n labelColor={isAnimated ? animatedColor : isLabelHighlighted ? 'WHITE_T_87' : 'WHITE_T_60'}\n >\n <Styled.CircularProgressLottieContainer>\n <LottieAnimation src={LOTTIE.LEVELUP_RINGS} settings={levelUpAnimationSettings} />\n </Styled.CircularProgressLottieContainer>\n {/* left segment */}\n <Styled.SegmentLeft onClick={() => onSegmentPress(0)}>\n <SegmentContent\n segmentType={'left'}\n card={data[0]!.card}\n name={data[0]!.name}\n isCompleted={data[0]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentLeft>\n\n {/* right segment */}\n <Styled.SegmentRight onClick={() => onSegmentPress(1)}>\n <SegmentContent\n segmentType={'right'}\n card={data[1]!.card}\n name={data[1]!.name}\n isCompleted={data[1]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentRight>\n\n {/* bottom segment */}\n <Styled.SegmentBottom onClick={() => onSegmentPress(2)}>\n <SegmentContent\n segmentType={'bottom'}\n card={data[2]!.card}\n name={data[2]!.name}\n isCompleted={data[2]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentBottom>\n </CardContainer>\n );\n};\n\nexport const SegmentedGameCard = memo(forwardRef(SegmentedGameCardComponent));\n"],"names":["SegmentContent","segmentType","isCompleted","card","name","onMouseEnter","lottieAnimationRef","useRef","useEffect","animation","lottie","fetchLottie","Lottie","handleMouseEnter","useCallback","jsx","Styled.SegmentContainer","jsxs","Styled.SegmentContentContainer","Styled.SegmentAssetContainer","Styled.SegmentOverlay","Styled.IconWrapper","CheckIcon","SegmentedGameCardComponent","data","gameCategoryLabel","initialValue","value","maxValue","ref","labelRef","cardWrapperRef","label","setLabel","useState","isAnimated","setIsAnimated","animatedColor","setAnimatedColor","isLabelHighlighted","gameName","onMouseLeave","onSegmentPress","index","_b","_a","startLabelAnimation","color","useImperativeHandle","animationSegments","useMemo","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","levelUpAnimationSettings","CardContainer","Styled.CircularProgressLottieContainer","LottieAnimation","LOTTIE","Styled.SegmentLeft","Styled.SegmentRight","Styled.SegmentBottom","SegmentedGameCard","memo","forwardRef"],"mappings":"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"}
1
+ {"version":3,"file":"segmented-game-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type {\n IGameCardSegmentContentProps,\n ISegmentedGameCardProps,\n ISegmentedGameCardRefs,\n} from './segmented-game-card-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC, ForwardRefRenderFunction } from 'react';\n\nimport Lottie from 'lottie-web';\nimport {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport CheckIcon from '../../../../../assets/line-icons/icons/check';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport { fetchLottie } from '../../../../ui/lottie-animation/helper';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './segmented-game-card-styled';\n\nexport const SegmentContent: FC<IGameCardSegmentContentProps> = ({\n segmentType,\n isCompleted,\n card,\n name,\n onMouseEnter,\n}) => {\n const lottieAnimationRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n let animation: AnimationItem | null = null;\n\n const loadLottie = async () => {\n const lottie = await fetchLottie(card);\n\n animation = Lottie.loadAnimation({\n container: lottieAnimationRef.current as Element,\n renderer: 'canvas',\n loop: true,\n autoplay: true,\n animationData: lottie,\n });\n };\n\n loadLottie();\n\n return () => {\n return animation?.destroy();\n };\n }, [card]);\n\n const handleMouseEnter = useCallback(() => onMouseEnter(name), [onMouseEnter, name]);\n\n return (\n <Styled.SegmentContainer>\n <Styled.SegmentContentContainer $segmentType={segmentType} onMouseEnter={handleMouseEnter}>\n <Styled.SegmentAssetContainer ref={lottieAnimationRef} $segmentType={segmentType} />\n {isCompleted && (\n <Styled.SegmentOverlay $segmentType={segmentType}>\n <Styled.IconWrapper>\n <CheckIcon color=\"#fff\" height={40} width={40} />\n </Styled.IconWrapper>\n </Styled.SegmentOverlay>\n )}\n </Styled.SegmentContentContainer>\n </Styled.SegmentContainer>\n );\n};\n\nconst SegmentedGameCardComponent: ForwardRefRenderFunction<\n ISegmentedGameCardRefs,\n ISegmentedGameCardProps\n> = ({ data, label: gameCategoryLabel, initialValue = 0, value, maxValue = 1 }, ref) => {\n const labelRef = useRef<HTMLDivElement>(null);\n const segmentedCardWrapperRef = useRef<HTMLDivElement>(null);\n\n const [label, setLabel] = useState<string>(gameCategoryLabel);\n const [isAnimated, setIsAnimated] = useState(false);\n const [animatedColor, setAnimatedColor] = useState<TColorNames>('WHITE_T_87');\n\n const isLabelHighlighted = label !== gameCategoryLabel;\n\n const onMouseEnter = useCallback((gameName: string) => {\n setLabel(gameName);\n }, []);\n\n const onMouseLeave = useCallback(() => {\n setLabel(gameCategoryLabel);\n }, [gameCategoryLabel]);\n\n const onSegmentPress = (index: number) => {\n data[index]?.onPress?.();\n };\n\n const startLabelAnimation = useCallback((color: TColorNames) => {\n setIsAnimated(true);\n setAnimatedColor(color);\n }, []);\n\n useImperativeHandle(ref, () => ({\n labelRef,\n segmentedCardWrapperRef,\n startLabelAnimation,\n }));\n\n const animationSegments: [number, number] | undefined = useMemo(() => {\n if (maxValue <= 0) {\n return;\n }\n\n const totalFrames = 92;\n const framesPerValue = totalFrames / maxValue;\n\n const initialFrameToPlay = Math.min(framesPerValue * initialValue, totalFrames);\n const finalFrameToPlay = Math.min(framesPerValue * value + 1, totalFrames);\n\n return [initialFrameToPlay, finalFrameToPlay];\n }, [initialValue, maxValue, value]);\n\n const levelUpAnimationSettings = useMemo(\n () => ({\n renderer: 'canvas',\n autoplay: true,\n loop: false,\n initialSegment: animationSegments,\n }),\n [animationSegments],\n );\n\n return (\n <Styled.SegmentedCard>\n <Styled.ExtendedFlexView $position=\"absolute\">\n <Styled.AnimatedLabel\n ref={labelRef}\n $renderAs=\"ac3\"\n $align=\"center\"\n $color={isAnimated ? animatedColor : isLabelHighlighted ? 'WHITE_T_87' : 'WHITE_T_60'}\n isAnimated={isAnimated}\n >\n {label}\n </Styled.AnimatedLabel>\n </Styled.ExtendedFlexView>\n <Styled.SegmentedCardWrapper ref={segmentedCardWrapperRef} onMouseLeave={onMouseLeave}>\n <Styled.CircularProgressLottieContainer>\n <LottieAnimation src={LOTTIE.LEVELUP_RINGS} settings={levelUpAnimationSettings} />\n </Styled.CircularProgressLottieContainer>\n {/* left segment */}\n <Styled.SegmentLeft onClick={() => onSegmentPress(0)}>\n <SegmentContent\n segmentType={'left'}\n card={data[0]!.card}\n name={data[0]!.name}\n isCompleted={data[0]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentLeft>\n\n {/* right segment */}\n <Styled.SegmentRight onClick={() => onSegmentPress(1)}>\n <SegmentContent\n segmentType={'right'}\n card={data[1]!.card}\n name={data[1]!.name}\n isCompleted={data[1]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentRight>\n\n {/* bottom segment */}\n <Styled.SegmentBottom onClick={() => onSegmentPress(2)}>\n <SegmentContent\n segmentType={'bottom'}\n card={data[2]!.card}\n name={data[2]!.name}\n isCompleted={data[2]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentBottom>\n </Styled.SegmentedCardWrapper>\n </Styled.SegmentedCard>\n );\n};\n\nexport const SegmentedGameCard = memo(forwardRef(SegmentedGameCardComponent));\n"],"names":["SegmentContent","segmentType","isCompleted","card","name","onMouseEnter","lottieAnimationRef","useRef","useEffect","animation","lottie","fetchLottie","Lottie","handleMouseEnter","useCallback","jsx","Styled.SegmentContainer","jsxs","Styled.SegmentContentContainer","Styled.SegmentAssetContainer","Styled.SegmentOverlay","Styled.IconWrapper","CheckIcon","SegmentedGameCardComponent","data","gameCategoryLabel","initialValue","value","maxValue","ref","labelRef","segmentedCardWrapperRef","label","setLabel","useState","isAnimated","setIsAnimated","animatedColor","setAnimatedColor","isLabelHighlighted","gameName","onMouseLeave","onSegmentPress","index","_b","_a","startLabelAnimation","color","useImperativeHandle","animationSegments","useMemo","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","levelUpAnimationSettings","Styled.SegmentedCard","Styled.ExtendedFlexView","Styled.AnimatedLabel","Styled.SegmentedCardWrapper","Styled.CircularProgressLottieContainer","LottieAnimation","LOTTIE","Styled.SegmentLeft","Styled.SegmentRight","Styled.SegmentBottom","SegmentedGameCard","memo","forwardRef"],"mappings":"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"}