@cuemath/leap 2.8.25-link.0 → 2.8.25-link.1

package/dist/features/circle-games/leaderboard/comps/banner/banner.js

@@ -1,40 +1,58 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { memo as d } from "react";
-import h from "../../../../ui/lottie-animation/lottie-animation.js";
-import p from "../../../../ui/separator/separator.js";
-import o from "../../../../ui/text/text.js";
-import { BannerContainer as f, CircleLottieView as x, BannerTextContainer as T, CountTextWrapper as C } from "./banner-styled.js";
-const $ = { renderer: "canvas" }, H = d(
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import p from "lottie-web";
+import { memo as h, useRef as x, useEffect as A } from "react";
+import T from "../../../../ui/separator/separator.js";
+import i from "../../../../ui/text/text.js";
+import { BannerContainer as C, CircleLottieView as $, BannerTextContainer as y, CountTextWrapper as B } from "./banner-styled.js";
+const _ = h(
   ({
-    primaryText: i,
-    secondaryText: t,
-    topInset: e = 0,
-    isLoading: a = !1,
-    lottiePath: m,
-    bgFromTopPosition: c = 0,
-    bgFromRightPosition: s = 0,
-    custEle: l
-  }) => /* @__PURE__ */ n(f, { topInset: e, children: [
-    /* @__PURE__ */ r(
-      x,
-      {
-        topInset: e,
-        bgFromTopPosition: c,
-        bgFromRightPosition: s,
-        children: /* @__PURE__ */ r(h, { src: m, settings: $ })
-      }
-    ),
-    /* @__PURE__ */ n(T, { children: [
-      /* @__PURE__ */ n(C, { topInset: e, children: [
-        /* @__PURE__ */ r(o, { $renderAs: "ac4", $color: "WHITE", children: i }),
-        /* @__PURE__ */ r(p, { height: 4 }),
-        /* @__PURE__ */ r(o, { $renderAs: "ah4", $color: "WHITE", children: a ? "__" : t })
-      ] }),
-      l
-    ] })
-  ] })
+    primaryText: l,
+    secondaryText: c,
+    topInset: n = 0,
+    isLoading: m = !1,
+    lottiePromise: a,
+    bgFromTopPosition: d = 0,
+    bgFromRightPosition: u = 0,
+    custEle: f
+  }) => {
+    const o = x(null);
+    return A(() => {
+      let r = null;
+      return (async () => {
+        const s = (await a()).default;
+        o.current && (r = p.loadAnimation({
+          container: o.current,
+          // Ref to the div
+          renderer: "canvas",
+          loop: !0,
+          autoplay: !0,
+          animationData: s
+        }));
+      })(), () => {
+        r == null || r.destroy();
+      };
+    }, [a]), /* @__PURE__ */ t(C, { topInset: n, children: [
+      /* @__PURE__ */ e(
+        $,
+        {
+          ref: o,
+          topInset: n,
+          bgFromTopPosition: d,
+          bgFromRightPosition: u
+        }
+      ),
+      /* @__PURE__ */ t(y, { children: [
+        /* @__PURE__ */ t(B, { topInset: n, children: [
+          /* @__PURE__ */ e(i, { $renderAs: "ac4", $color: "WHITE", children: l }),
+          /* @__PURE__ */ e(T, { height: 4 }),
+          /* @__PURE__ */ e(i, { $renderAs: "ah4", $color: "WHITE", children: m ? "__" : c })
+        ] }),
+        f
+      ] })
+    ] });
+  }
 );
 export {
-  H as Banner
+  _ as Banner
 };
 //# sourceMappingURL=banner.js.map

package/dist/features/circle-games/leaderboard/comps/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner.tsx"],"sourcesContent":["import type { IBannerProps } from './banner-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './banner-styled';\n\nconst animationSettings = { renderer: 'canvas' };\n\nexport const Banner: FC<IBannerProps> = memo(\n  ({\n    primaryText,\n    secondaryText,\n    topInset = 0,\n    isLoading = false,\n    lottiePath,\n    bgFromTopPosition = 0,\n    bgFromRightPosition = 0,\n    custEle,\n  }) => (\n    <Styled.BannerContainer topInset={topInset}>\n      <Styled.CircleLottieView\n        topInset={topInset}\n        bgFromTopPosition={bgFromTopPosition}\n        bgFromRightPosition={bgFromRightPosition}\n      >\n        <LottieAnimation src={lottiePath} settings={animationSettings} />\n      </Styled.CircleLottieView>\n\n      <Styled.BannerTextContainer>\n        <Styled.CountTextWrapper topInset={topInset}>\n          <Text $renderAs=\"ac4\" $color=\"WHITE\">\n            {primaryText}\n          </Text>\n          <Separator height={4} />\n          <Text $renderAs=\"ah4\" $color=\"WHITE\">\n            {isLoading ? '__' : secondaryText}\n          </Text>\n        </Styled.CountTextWrapper>\n\n        {custEle}\n      </Styled.BannerTextContainer>\n    </Styled.BannerContainer>\n  ),\n);\n"],"names":["animationSettings","Banner","memo","primaryText","secondaryText","topInset","isLoading","lottiePath","bgFromTopPosition","bgFromRightPosition","custEle","jsxs","Styled.BannerContainer","jsx","Styled.CircleLottieView","LottieAnimation","Styled.BannerTextContainer","Styled.CountTextWrapper","Text","Separator"],"mappings":";;;;;;AAUA,MAAMA,IAAoB,EAAE,UAAU,YAEzBC,IAA2BC;AAAA,EACtC,CAAC;AAAA,IACC,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,qBAAAC,IAAsB;AAAA,IACtB,SAAAC;AAAA,EAEA,MAAA,gBAAAC,EAACC,GAAA,EAAuB,UAAAP,GACtB,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,UAAAT;AAAA,QACA,mBAAAG;AAAA,QACA,qBAAAC;AAAA,QAEA,UAAC,gBAAAI,EAAAE,GAAA,EAAgB,KAAKR,GAAY,UAAUP,GAAmB;AAAA,MAAA;AAAA,IACjE;AAAA,IAEA,gBAAAW,EAACK,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAL,EAAAM,GAAA,EAAwB,UAAAZ,GACvB,UAAA;AAAA,QAAA,gBAAAQ,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UACHf,GAAA;AAAA,QACA,gBAAAU,EAACM,GAAU,EAAA,QAAQ,EAAG,CAAA;AAAA,QACtB,gBAAAN,EAACK,KAAK,WAAU,OAAM,QAAO,SAC1B,UAAAZ,IAAY,OAAOF,EACtB,CAAA;AAAA,MAAA,GACF;AAAA,MAECM;AAAA,IAAA,GACH;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"banner.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner.tsx"],"sourcesContent":["import type { IBannerProps } from './banner-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useEffect, useRef } from 'react';\n\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './banner-styled';\n\nexport const Banner: FC<IBannerProps> = memo(\n  ({\n    primaryText,\n    secondaryText,\n    topInset = 0,\n    isLoading = false,\n    lottiePromise,\n    bgFromTopPosition = 0,\n    bgFromRightPosition = 0,\n    custEle,\n  }) => {\n    const lottieAnimationRef = useRef<HTMLDivElement>(null);\n\n    // Initialize Lottie animation\n    useEffect(() => {\n      let animation: AnimationItem | null = null;\n\n      const loadAnimation = async () => {\n        const animationModule = await lottiePromise();\n        const animationData = animationModule.default;\n\n        if (lottieAnimationRef.current) {\n          animation = Lottie.loadAnimation({\n            container: lottieAnimationRef.current, // Ref to the div\n            renderer: 'canvas',\n            loop: true,\n            autoplay: true,\n            animationData: animationData,\n          });\n        }\n      };\n\n      loadAnimation();\n\n      return () => {\n        animation?.destroy();\n      };\n    }, [lottiePromise]);\n\n    return (\n      <Styled.BannerContainer topInset={topInset}>\n        {/* Render Lottie animation */}\n        <Styled.CircleLottieView\n          ref={lottieAnimationRef}\n          topInset={topInset}\n          bgFromTopPosition={bgFromTopPosition}\n          bgFromRightPosition={bgFromRightPosition}\n        />\n\n        <Styled.BannerTextContainer>\n          <Styled.CountTextWrapper topInset={topInset}>\n            <Text $renderAs=\"ac4\" $color=\"WHITE\">\n              {primaryText}\n            </Text>\n            <Separator height={4} />\n            <Text $renderAs=\"ah4\" $color=\"WHITE\">\n              {isLoading ? '__' : secondaryText}\n            </Text>\n          </Styled.CountTextWrapper>\n\n          {custEle}\n        </Styled.BannerTextContainer>\n      </Styled.BannerContainer>\n    );\n  },\n);\n"],"names":["Banner","memo","primaryText","secondaryText","topInset","isLoading","lottiePromise","bgFromTopPosition","bgFromRightPosition","custEle","lottieAnimationRef","useRef","useEffect","animation","animationData","Lottie","jsxs","Styled.BannerContainer","jsx","Styled.CircleLottieView","Styled.BannerTextContainer","Styled.CountTextWrapper","Text","Separator"],"mappings":";;;;;;AAWO,MAAMA,IAA2BC;AAAA,EACtC,CAAC;AAAA,IACC,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,eAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,qBAAAC,IAAsB;AAAA,IACtB,SAAAC;AAAA,EAAA,MACI;AACE,UAAAC,IAAqBC,EAAuB,IAAI;AAGtD,WAAAC,EAAU,MAAM;AACd,UAAIC,IAAkC;AAiBxB,cAfQ,YAAY;AAEhC,cAAMC,KADkB,MAAMR,KACQ;AAEtC,QAAII,EAAmB,YACrBG,IAAYE,EAAO,cAAc;AAAA,UAC/B,WAAWL,EAAmB;AAAA;AAAA,UAC9B,UAAU;AAAA,UACV,MAAM;AAAA,UACN,UAAU;AAAA,UACV,eAAAI;AAAA,QAAA,CACD;AAAA,MACH,MAKK,MAAM;AACX,QAAAD,KAAA,QAAAA,EAAW;AAAA,MAAQ;AAAA,IACrB,GACC,CAACP,CAAa,CAAC,GAGf,gBAAAU,EAAAC,GAAA,EAAuB,UAAAb,GAEtB,UAAA;AAAA,MAAA,gBAAAc;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,KAAKT;AAAA,UACL,UAAAN;AAAA,UACA,mBAAAG;AAAA,UACA,qBAAAC;AAAA,QAAA;AAAA,MACF;AAAA,MAEA,gBAAAQ,EAACI,GAAA,EACC,UAAA;AAAA,QAAC,gBAAAJ,EAAAK,GAAA,EAAwB,UAAAjB,GACvB,UAAA;AAAA,UAAA,gBAAAc,EAACI,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UACHpB,GAAA;AAAA,UACA,gBAAAgB,EAACK,GAAU,EAAA,QAAQ,EAAG,CAAA;AAAA,UACtB,gBAAAL,EAACI,KAAK,WAAU,OAAM,QAAO,SAC1B,UAAAjB,IAAY,OAAOF,EACtB,CAAA;AAAA,QAAA,GACF;AAAA,QAECM;AAAA,MAAA,GACH;AAAA,IACF,EAAA,CAAA;AAAA,EAEJ;AACF;"}

package/dist/features/circle-games/leaderboard/leaderboard.js

@@ -1,21 +1,20 @@
-import { jsx as e, jsxs as T } from "react/jsx-runtime";
-import { useState as c, useEffect as b } from "react";
-import { ILLUSTRATIONS as j } from "../../../assets/illustrations/illustrations.js";
-import { LOTTIE as E } from "../../../assets/lottie/lottie.js";
-import { CircularLoader as v } from "../../ui/loader/circular-loader/circular-loader.js";
-import w from "../../ui/text/text.js";
-import { useCircleSounds as U } from "../hooks/use-circle-sounds/use-circle-sounds.js";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useState as T, useEffect as g } from "react";
+import { ILLUSTRATIONS as $ } from "../../../assets/illustrations/illustrations.js";
+import { CircularLoader as j } from "../../ui/loader/circular-loader/circular-loader.js";
+import v from "../../ui/text/text.js";
+import { useCircleSounds as w } from "../hooks/use-circle-sounds/use-circle-sounds.js";
 import { Banner as d } from "./comps/banner/banner.js";
 import { LeaderboardItemWithObserver as H } from "./comps/leaderboard-item/leaderboard-item.js";
-import { NavigationButton as q } from "./comps/navigation-button/navigation-button.js";
-import { Timer as z } from "./comps/timer/timer.js";
+import { NavigationButton as U } from "./comps/navigation-button/navigation-button.js";
+import { Timer as q } from "./comps/timer/timer.js";
 import { ELeaderboardType as t } from "./enums/leaderboard-type-enum.js";
-import { Leaderboard as G, LeaderboardContainer as J, BannerWrapper as Q, TournamentBannerCustContainer as V, TrophyWrapper as X, ItemsWrapper as Z, Banner as D, ActionButtonWrapper as ee } from "./leaderboard-styled.js";
-import { useTimer as re } from "./hooks/useTimer.js";
-const L = {
-  [t.ALL_TIME_STREAK]: E.ELITE_CIRCLE,
-  [t.ALL_TIME]: E.ELITE_CIRCLE,
-  [t.BI_WEEKLY]: E.TOURNAMENT_RIPPLE
+import { Leaderboard as z, LeaderboardContainer as G, BannerWrapper as J, TournamentBannerCustContainer as Q, TrophyWrapper as V, ItemsWrapper as X, Banner as Z, ActionButtonWrapper as D } from "./leaderboard-styled.js";
+import { useTimer as ee } from "./hooks/useTimer.js";
+const u = {
+  [t.ALL_TIME_STREAK]: () => import("../../../assets/lotties/circle/elite-circle-lottie.json.js"),
+  [t.ALL_TIME]: () => import("../../../assets/lotties/circle/elite-circle-lottie.json.js"),
+  [t.BI_WEEKLY]: () => import("../../../assets/lotties/circle/tournament-ripple-lottie.json.js")
 }, i = [
   {
     name: "TOURNAMENT",
@@ -29,38 +28,38 @@ const L = {
     name: "ALL TIME",
     type: t.ALL_TIME
   }
-], le = ({
+], Ee = ({
   leaderboardData: m,
-  type: u = t.BI_WEEKLY,
-  userId: g,
-  onClose: W,
+  type: E = t.BI_WEEKLY,
+  userId: C,
+  onClose: P,
   isLoading: p
 }) => {
-  var _, A, y, S, R, C, x;
-  const [s, l] = c(
-    i.findIndex((r) => u === r.type)
-  ), [n, K] = c(((_ = m == null ? void 0 : m[u]) == null ? void 0 : _.leaderboardPlayers) || []), [I, M] = c({
+  var f, y, A, S, _, x, B;
+  const [s, l] = T(
+    i.findIndex((r) => E === r.type)
+  ), [n, W] = T(((f = m == null ? void 0 : m[E]) == null ? void 0 : f.leaderboardPlayers) || []), [L, K] = T({
     current: 0,
     end: 0
-  }), [N, h] = re(0), [a, k] = c(!1), O = (A = n == null ? void 0 : n[0]) == null ? void 0 : A.points, Y = ((y = n == null ? void 0 : n[0]) == null ? void 0 : y.streakDays) || 0, { playButtonSound: f } = U(), F = () => {
-    f(), l((r) => r - 1 < 0 ? i.length - 1 : r - 1);
-  }, $ = () => {
-    f(), l((r) => r + 1 === i.length ? 0 : r + 1);
+  }), [M, h] = ee(0), [a, k] = T(!1), N = (y = n == null ? void 0 : n[0]) == null ? void 0 : y.points, Y = ((A = n == null ? void 0 : n[0]) == null ? void 0 : A.streakDays) || 0, { playButtonSound: I } = w(), F = () => {
+    I(), l((r) => r - 1 < 0 ? i.length - 1 : r - 1);
+  }, O = () => {
+    I(), l((r) => r + 1 === i.length ? 0 : r + 1);
   };
-  return b(() => {
+  return g(() => {
     h(0);
-  }, [h]), b(() => {
-    var B;
-    const r = (B = i[s]) == null ? void 0 : B.type, o = r && (m == null ? void 0 : m[r]);
+  }, [h]), g(() => {
+    var R;
+    const r = (R = i[s]) == null ? void 0 : R.type, o = r && (m == null ? void 0 : m[r]);
     if (o) {
-      const P = o.leaderboardPlayers || [];
-      r === t.BI_WEEKLY && (M({
+      const b = o.leaderboardPlayers || [];
+      r === t.BI_WEEKLY && (K({
         current: o.currentTimestamp,
         end: o.endTimestamp
-      }), o.currentTimestamp > o.endTimestamp && (P.splice(10), k(!0))), K([...P]);
+      }), o.currentTimestamp > o.endTimestamp && (b.splice(10), k(!0))), W([...b]);
     }
-  }, [s, m]), /* @__PURE__ */ e(G, { children: /* @__PURE__ */ T(J, { children: [
-    /* @__PURE__ */ T(Q, { children: [
+  }, [s, m]), /* @__PURE__ */ e(z, { children: /* @__PURE__ */ c(G, { children: [
+    /* @__PURE__ */ c(J, { children: [
       ((S = i[s]) == null ? void 0 : S.type) === t.BI_WEEKLY && /* @__PURE__ */ e(
         d,
         {
@@ -68,23 +67,23 @@ const L = {
           bgFromTopPosition: -120,
           bgFromRightPosition: -110,
           primaryText: a ? /* @__PURE__ */ e("span", { children: "New Tournament" }) : /* @__PURE__ */ e("span", { children: "Tournament" }),
-          secondaryText: a ? /* @__PURE__ */ e("span", { children: "Starts Soon" }) : /* @__PURE__ */ T("span", { children: [
+          secondaryText: a ? /* @__PURE__ */ e("span", { children: "Starts Soon" }) : /* @__PURE__ */ c("span", { children: [
             " ",
             /* @__PURE__ */ e(
-              z,
+              q,
               {
-                fromTimestamp: N + I.current,
-                endTimestamp: I.end
+                fromTimestamp: M + L.current,
+                endTimestamp: L.end
               }
             ),
             " ",
             "left"
           ] }),
-          lottiePath: L[t.BI_WEEKLY],
-          custEle: /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e("img", { src: j.TROPHY_CIRCLE }) }) })
+          lottiePromise: u[t.BI_WEEKLY],
+          custEle: /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e("img", { src: $.TROPHY_CIRCLE }) }) })
         }
       ),
-      ((R = i[s]) == null ? void 0 : R.type) === t.ALL_TIME_STREAK && /* @__PURE__ */ e(
+      ((_ = i[s]) == null ? void 0 : _.type) === t.ALL_TIME_STREAK && /* @__PURE__ */ e(
         d,
         {
           isLoading: p,
@@ -92,10 +91,10 @@ const L = {
           bgFromRightPosition: -90,
           primaryText: /* @__PURE__ */ e("span", { children: "Streak Stars" }),
           secondaryText: /* @__PURE__ */ e("span", { children: "Top 50" }),
-          lottiePath: L[t.ALL_TIME_STREAK]
+          lottiePromise: u[t.ALL_TIME_STREAK]
         }
       ),
-      ((C = i[s]) == null ? void 0 : C.type) === t.ALL_TIME && /* @__PURE__ */ e(
+      ((x = i[s]) == null ? void 0 : x.type) === t.ALL_TIME && /* @__PURE__ */ e(
         d,
         {
           isLoading: p,
@@ -103,13 +102,13 @@ const L = {
           bgFromRightPosition: -90,
           primaryText: /* @__PURE__ */ e("span", { children: "Elite Circle" }),
           secondaryText: /* @__PURE__ */ e("span", { children: "Top 50" }),
-          lottiePath: L[t.ALL_TIME]
+          lottiePromise: u[t.ALL_TIME]
         }
       )
     ] }),
-    p && /* @__PURE__ */ e(v, {}),
-    !p && n && /* @__PURE__ */ T(Z, { topInset: 0, children: [
-      a && ((x = i[s]) == null ? void 0 : x.type) === t.BI_WEEKLY && /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(w, { $renderAs: "ab3", $color: "WHITE", children: "Congratulating winners of the last tournament!" }) }),
+    p && /* @__PURE__ */ e(j, {}),
+    !p && n && /* @__PURE__ */ c(X, { topInset: 0, children: [
+      a && ((B = i[s]) == null ? void 0 : B.type) === t.BI_WEEKLY && /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(v, { $renderAs: "ab3", $color: "WHITE", children: "Congratulating winners of the last tournament!" }) }),
       n.map((r) => {
         var o;
         return /* @__PURE__ */ e(
@@ -118,28 +117,28 @@ const L = {
             player: r,
             rank: r.rank,
             maxStreakDays: Y,
-            maxPoints: O,
+            maxPoints: N,
             leaderboardType: (o = i[s]) == null ? void 0 : o.type,
-            isActive: r.userId === g
+            isActive: r.userId === C
           },
           r.rank
         );
       })
     ] }),
-    /* @__PURE__ */ e(ee, { children: /* @__PURE__ */ e(
-      q,
+    /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
+      U,
       {
         labels: Object.values(t),
         onLeftClick: F,
-        onRightClick: $,
+        onRightClick: O,
         currIndex: s,
-        onClose: W,
+        onClose: P,
         disableSwipe: p || n.length === 0
       }
     ) })
   ] }) });
 };
 export {
-  le as Leaderboard
+  Ee as Leaderboard
 };
 //# sourceMappingURL=leaderboard.js.map

package/dist/features/circle-games/leaderboard/leaderboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"leaderboard.js","sources":["../../../../src/features/circle-games/leaderboard/leaderboard.tsx"],"sourcesContent":["import type {\n  ILeaderboardPlayerWithPoints,\n  ILeaderboardPlayerWithStreak,\n} from './dal/use-get-leaderboard-dal/use-get-leaderboard-dal-types';\nimport type { ILeaderboardProps } from './leaderboard-types';\n\nimport { useState, useEffect } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { CircularLoader } from '../../ui/loader/circular-loader/circular-loader';\nimport Text from '../../ui/text/text';\nimport { useCircleSounds } from '../hooks/use-circle-sounds/use-circle-sounds';\nimport { Banner } from './comps/banner/banner';\nimport { LeaderboardItemWithObserver } from './comps/leaderboard-item/leaderboard-item';\nimport { NavigationButton } from './comps/navigation-button/navigation-button';\nimport { Timer } from './comps/timer/timer';\nimport { ELeaderboardType } from './enums/leaderboard-type-enum';\nimport { useTimer } from './hooks';\nimport * as Styled from './leaderboard-styled';\n\nconst BANNER_LOTTIES: Record<ELeaderboardType, string> = {\n  [ELeaderboardType.ALL_TIME_STREAK]: LOTTIE.ELITE_CIRCLE,\n  [ELeaderboardType.ALL_TIME]: LOTTIE.ELITE_CIRCLE,\n  [ELeaderboardType.BI_WEEKLY]: LOTTIE.TOURNAMENT_RIPPLE,\n};\n\nconst leaderboards = [\n  {\n    name: 'TOURNAMENT',\n    type: ELeaderboardType.BI_WEEKLY,\n  },\n  {\n    name: 'STREAK STARS',\n    type: ELeaderboardType.ALL_TIME_STREAK,\n  },\n  {\n    name: 'ALL TIME',\n    type: ELeaderboardType.ALL_TIME,\n  },\n];\n\nexport const Leaderboard = ({\n  leaderboardData,\n  type = ELeaderboardType.BI_WEEKLY,\n  userId,\n  onClose,\n  isLoading,\n}: ILeaderboardProps) => {\n  const [currentLeaderBoardIndex, setCurrentLeaderboardIndex] = useState(\n    leaderboards.findIndex(leaderboard => type === leaderboard.type),\n  );\n\n  const [currLeaderboardData, setCurrLeaderboardData] = useState<\n    (ILeaderboardPlayerWithPoints | ILeaderboardPlayerWithStreak)[] | []\n  >(leaderboardData?.[type]?.leaderboardPlayers || []);\n\n  const [currLeaderboardTimeStamps, setCurrLeaderboardTimeStamps] = useState<{\n    current: number;\n    end: number;\n  }>({\n    current: 0,\n    end: 0,\n  });\n\n  const [time, setTimer] = useTimer(0);\n  const [isTournamentEnded, setIsTournamentEnded] = useState(false);\n  const maxPoints = (currLeaderboardData?.[0] as ILeaderboardPlayerWithPoints)?.points;\n  const maxStreakDays = (currLeaderboardData?.[0] as ILeaderboardPlayerWithStreak)?.streakDays || 0;\n  const { playButtonSound } = useCircleSounds();\n\n  const handlePrevious = () => {\n    playButtonSound();\n    setCurrentLeaderboardIndex(prev => {\n      if (prev - 1 < 0) {\n        return leaderboards.length - 1;\n      }\n\n      return prev - 1;\n    });\n  };\n\n  const handleNext = () => {\n    playButtonSound();\n    setCurrentLeaderboardIndex(prev => {\n      if (prev + 1 === leaderboards.length) {\n        return 0;\n      }\n\n      return prev + 1;\n    });\n  };\n\n  useEffect(() => {\n    setTimer(0);\n  }, [setTimer]);\n\n  useEffect(() => {\n    const currType = leaderboards[currentLeaderBoardIndex]?.type;\n    const currLeaderboard = currType && leaderboardData?.[currType];\n\n    if (currLeaderboard) {\n      const leaderboardList = currLeaderboard.leaderboardPlayers || [];\n\n      if (currType === ELeaderboardType.BI_WEEKLY) {\n        setCurrLeaderboardTimeStamps({\n          current: currLeaderboard.currentTimestamp,\n          end: currLeaderboard.endTimestamp,\n        });\n\n        if (currLeaderboard.currentTimestamp > currLeaderboard.endTimestamp) {\n          leaderboardList.splice(10);\n          setIsTournamentEnded(true);\n        }\n      }\n\n      setCurrLeaderboardData([...leaderboardList]);\n    }\n  }, [currentLeaderBoardIndex, leaderboardData]);\n\n  return (\n    <Styled.Leaderboard>\n      <Styled.LeaderboardContainer>\n        <Styled.BannerWrapper>\n          {/* tournament banner */}\n          {leaderboards[currentLeaderBoardIndex]?.type === ELeaderboardType.BI_WEEKLY && (\n            <Banner\n              isLoading={isLoading || currLeaderboardData.length === 0}\n              bgFromTopPosition={-120}\n              bgFromRightPosition={-110}\n              primaryText={\n                isTournamentEnded ? <span>New Tournament</span> : <span>Tournament</span>\n              }\n              secondaryText={\n                isTournamentEnded ? (\n                  <span>Starts Soon</span>\n                ) : (\n                  <span>\n                    {' '}\n                    <Timer\n                      fromTimestamp={(time as number) + currLeaderboardTimeStamps.current}\n                      endTimestamp={currLeaderboardTimeStamps.end}\n                    />{' '}\n                    {'left'}\n                  </span>\n                )\n              }\n              lottiePath={BANNER_LOTTIES[ELeaderboardType.BI_WEEKLY]}\n              custEle={\n                <Styled.TournamentBannerCustContainer>\n                  <Styled.TrophyWrapper>\n                    <img src={ILLUSTRATIONS.TROPHY_CIRCLE} />\n                  </Styled.TrophyWrapper>\n                </Styled.TournamentBannerCustContainer>\n              }\n            />\n          )}\n\n          {/* top streak banner */}\n          {leaderboards[currentLeaderBoardIndex]?.type === ELeaderboardType.ALL_TIME_STREAK && (\n            <Banner\n              isLoading={isLoading}\n              bgFromTopPosition={-140}\n              bgFromRightPosition={-90}\n              primaryText={<span>Streak Stars</span>}\n              secondaryText={<span>Top 50</span>}\n              lottiePath={BANNER_LOTTIES[ELeaderboardType.ALL_TIME_STREAK]}\n            />\n          )}\n\n          {/* elite circle banner */}\n          {leaderboards[currentLeaderBoardIndex]?.type === ELeaderboardType.ALL_TIME && (\n            <Banner\n              isLoading={isLoading}\n              bgFromTopPosition={-140}\n              bgFromRightPosition={-90}\n              primaryText={<span>Elite Circle</span>}\n              secondaryText={<span>Top 50</span>}\n              lottiePath={BANNER_LOTTIES[ELeaderboardType.ALL_TIME]}\n            />\n          )}\n        </Styled.BannerWrapper>\n\n        {isLoading && <CircularLoader />}\n\n        {!isLoading && currLeaderboardData && (\n          <Styled.ItemsWrapper topInset={0}>\n            {isTournamentEnded &&\n              leaderboards[currentLeaderBoardIndex]?.type === ELeaderboardType.BI_WEEKLY && (\n                <Styled.Banner>\n                  <Text $renderAs=\"ab3\" $color=\"WHITE\">\n                    Congratulating winners of the last tournament!\n                  </Text>\n                </Styled.Banner>\n              )}\n            {currLeaderboardData.map(player => {\n              return (\n                <LeaderboardItemWithObserver\n                  key={player.rank}\n                  player={player}\n                  rank={player.rank}\n                  maxStreakDays={maxStreakDays}\n                  maxPoints={maxPoints}\n                  leaderboardType={leaderboards[currentLeaderBoardIndex]?.type}\n                  isActive={player.userId === userId}\n                />\n              );\n            })}\n          </Styled.ItemsWrapper>\n        )}\n\n        <Styled.ActionButtonWrapper>\n          <NavigationButton\n            labels={Object.values(ELeaderboardType)}\n            onLeftClick={handlePrevious}\n            onRightClick={handleNext}\n            currIndex={currentLeaderBoardIndex}\n            onClose={onClose}\n            disableSwipe={isLoading || currLeaderboardData.length === 0}\n          />\n        </Styled.ActionButtonWrapper>\n      </Styled.LeaderboardContainer>\n    </Styled.Leaderboard>\n  );\n};\n"],"names":["BANNER_LOTTIES","ELeaderboardType","LOTTIE","leaderboards","Leaderboard","leaderboardData","type","userId","onClose","isLoading","currentLeaderBoardIndex","setCurrentLeaderboardIndex","useState","leaderboard","currLeaderboardData","setCurrLeaderboardData","_a","currLeaderboardTimeStamps","setCurrLeaderboardTimeStamps","time","setTimer","useTimer","isTournamentEnded","setIsTournamentEnded","maxPoints","_b","maxStreakDays","_c","playButtonSound","useCircleSounds","handlePrevious","prev","handleNext","useEffect","currType","currLeaderboard","leaderboardList","Styled.Leaderboard","jsxs","Styled.LeaderboardContainer","Styled.BannerWrapper","_d","jsx","Banner","Timer","Styled.TournamentBannerCustContainer","Styled.TrophyWrapper","ILLUSTRATIONS","_e","_f","CircularLoader","Styled.ItemsWrapper","_g","Styled.Banner","Text","player","LeaderboardItemWithObserver","Styled.ActionButtonWrapper","NavigationButton"],"mappings":";;;;;;;;;;;;;;AAqBA,MAAMA,IAAmD;AAAA,EACvD,CAACC,EAAiB,eAAe,GAAGC,EAAO;AAAA,EAC3C,CAACD,EAAiB,QAAQ,GAAGC,EAAO;AAAA,EACpC,CAACD,EAAiB,SAAS,GAAGC,EAAO;AACvC,GAEMC,IAAe;AAAA,EACnB;AAAA,IACE,MAAM;AAAA,IACN,MAAMF,EAAiB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAMA,EAAiB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAMA,EAAiB;AAAA,EACzB;AACF,GAEaG,KAAc,CAAC;AAAA,EAC1B,iBAAAC;AAAA,EACA,MAAAC,IAAOL,EAAiB;AAAA,EACxB,QAAAM;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,MAAyB;;AACjB,QAAA,CAACC,GAAyBC,CAA0B,IAAIC;AAAA,IAC5DT,EAAa,UAAU,CAAeU,MAAAP,MAASO,EAAY,IAAI;AAAA,EAAA,GAG3D,CAACC,GAAqBC,CAAsB,IAAIH,IAEpDI,IAAAX,KAAA,gBAAAA,EAAkBC,OAAlB,gBAAAU,EAAyB,uBAAsB,CAAA,CAAE,GAE7C,CAACC,GAA2BC,CAA4B,IAAIN,EAG/D;AAAA,IACD,SAAS;AAAA,IACT,KAAK;AAAA,EAAA,CACN,GAEK,CAACO,GAAMC,CAAQ,IAAIC,GAAS,CAAC,GAC7B,CAACC,GAAmBC,CAAoB,IAAIX,EAAS,EAAK,GAC1DY,KAAaC,IAAAX,KAAA,gBAAAA,EAAsB,OAAtB,gBAAAW,EAA2D,QACxEC,MAAiBC,IAAAb,KAAA,gBAAAA,EAAsB,OAAtB,gBAAAa,EAA2D,eAAc,GAC1F,EAAE,iBAAAC,MAAoBC,KAEtBC,IAAiB,MAAM;AACX,IAAAF,KAChBjB,EAA2B,CAAQoB,MAC7BA,IAAO,IAAI,IACN5B,EAAa,SAAS,IAGxB4B,IAAO,CACf;AAAA,EAAA,GAGGC,IAAa,MAAM;AACP,IAAAJ,KAChBjB,EAA2B,CAAQoB,MAC7BA,IAAO,MAAM5B,EAAa,SACrB,IAGF4B,IAAO,CACf;AAAA,EAAA;AAGH,SAAAE,EAAU,MAAM;AACd,IAAAb,EAAS,CAAC;AAAA,EAAA,GACT,CAACA,CAAQ,CAAC,GAEba,EAAU,MAAM;;AACR,UAAAC,KAAWlB,IAAAb,EAAaO,CAAuB,MAApC,gBAAAM,EAAuC,MAClDmB,IAAkBD,MAAY7B,KAAA,gBAAAA,EAAkB6B;AAEtD,QAAIC,GAAiB;AACb,YAAAC,IAAkBD,EAAgB,sBAAsB;AAE1D,MAAAD,MAAajC,EAAiB,cACHiB,EAAA;AAAA,QAC3B,SAASiB,EAAgB;AAAA,QACzB,KAAKA,EAAgB;AAAA,MAAA,CACtB,GAEGA,EAAgB,mBAAmBA,EAAgB,iBACrDC,EAAgB,OAAO,EAAE,GACzBb,EAAqB,EAAI,KAINR,EAAA,CAAC,GAAGqB,CAAe,CAAC;AAAA,IAC7C;AAAA,EAAA,GACC,CAAC1B,GAAyBL,CAAe,CAAC,qBAG1CgC,GAAA,EACC,UAAC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAD,EAAAE,GAAA,EAEE,UAAA;AAAA,QAAAC,IAAAtC,EAAaO,CAAuB,MAApC,gBAAA+B,EAAuC,UAASxC,EAAiB,aAChE,gBAAAyC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWlC,KAAaK,EAAoB,WAAW;AAAA,UACvD,mBAAmB;AAAA,UACnB,qBAAqB;AAAA,UACrB,aACEQ,IAAqB,gBAAAoB,EAAA,QAAA,EAAK,4BAAc,IAAU,gBAAAA,EAAC,UAAK,UAAU,aAAA,CAAA;AAAA,UAEpE,eACEpB,IACE,gBAAAoB,EAAC,UAAK,UAAW,cAAA,CAAA,sBAEhB,QACE,EAAA,UAAA;AAAA,YAAA;AAAA,YACD,gBAAAA;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,eAAgBzB,IAAkBF,EAA0B;AAAA,gBAC5D,cAAcA,EAA0B;AAAA,cAAA;AAAA,YAC1C;AAAA,YAAG;AAAA,YACF;AAAA,UAAA,GACH;AAAA,UAGJ,YAAYjB,EAAeC,EAAiB,SAAS;AAAA,UACrD,SACE,gBAAAyC,EAACG,GAAA,EACC,UAAC,gBAAAH,EAAAI,GAAA,EACC,4BAAC,OAAI,EAAA,KAAKC,EAAc,cAAe,CAAA,EACzC,CAAA,GACF;AAAA,QAAA;AAAA,MAEJ;AAAA,QAIDC,IAAA7C,EAAaO,CAAuB,MAApC,gBAAAsC,EAAuC,UAAS/C,EAAiB,mBAChE,gBAAAyC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAAlC;AAAA,UACA,mBAAmB;AAAA,UACnB,qBAAqB;AAAA,UACrB,aAAc,gBAAAiC,EAAA,QAAA,EAAK,UAAY,eAAA,CAAA;AAAA,UAC/B,eAAgB,gBAAAA,EAAA,QAAA,EAAK,UAAM,SAAA,CAAA;AAAA,UAC3B,YAAY1C,EAAeC,EAAiB,eAAe;AAAA,QAAA;AAAA,MAC7D;AAAA,QAIDgD,IAAA9C,EAAaO,CAAuB,MAApC,gBAAAuC,EAAuC,UAAShD,EAAiB,YAChE,gBAAAyC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAAlC;AAAA,UACA,mBAAmB;AAAA,UACnB,qBAAqB;AAAA,UACrB,aAAc,gBAAAiC,EAAA,QAAA,EAAK,UAAY,eAAA,CAAA;AAAA,UAC/B,eAAgB,gBAAAA,EAAA,QAAA,EAAK,UAAM,SAAA,CAAA;AAAA,UAC3B,YAAY1C,EAAeC,EAAiB,QAAQ;AAAA,QAAA;AAAA,MACtD;AAAA,IAAA,GAEJ;AAAA,IAECQ,uBAAcyC,GAAe,EAAA;AAAA,IAE7B,CAACzC,KAAaK,KACb,gBAAAwB,EAACa,GAAA,EAAoB,UAAU,GAC5B,UAAA;AAAA,MAAA7B,OACC8B,IAAAjD,EAAaO,CAAuB,MAApC,gBAAA0C,EAAuC,UAASnD,EAAiB,aAC9D,gBAAAyC,EAAAW,GAAA,EACC,4BAACC,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,2DAErC,CAAA,GACF;AAAA,MAEHxC,EAAoB,IAAI,CAAUyC,MAAA;;AAE/B,eAAA,gBAAAb;AAAA,UAACc;AAAA,UAAA;AAAA,YAEC,QAAAD;AAAA,YACA,MAAMA,EAAO;AAAA,YACb,eAAA7B;AAAA,YACA,WAAAF;AAAA,YACA,kBAAiBR,IAAAb,EAAaO,CAAuB,MAApC,gBAAAM,EAAuC;AAAA,YACxD,UAAUuC,EAAO,WAAWhD;AAAA,UAAA;AAAA,UANvBgD,EAAO;AAAA,QAAA;AAAA,MAOd,CAEH;AAAA,IAAA,GACH;AAAA,IAGF,gBAAAb,EAACe,IAAA,EACC,UAAA,gBAAAf;AAAA,MAACgB;AAAA,MAAA;AAAA,QACC,QAAQ,OAAO,OAAOzD,CAAgB;AAAA,QACtC,aAAa6B;AAAA,QACb,cAAcE;AAAA,QACd,WAAWtB;AAAA,QACX,SAAAF;AAAA,QACA,cAAcC,KAAaK,EAAoB,WAAW;AAAA,MAAA;AAAA,IAAA,GAE9D;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"leaderboard.js","sources":["../../../../src/features/circle-games/leaderboard/leaderboard.tsx"],"sourcesContent":["import type {\n  ILeaderboardPlayerWithPoints,\n  ILeaderboardPlayerWithStreak,\n} from './dal/use-get-leaderboard-dal/use-get-leaderboard-dal-types';\nimport type { ILeaderboardProps } from './leaderboard-types';\n\nimport { useState, useEffect } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport { CircularLoader } from '../../ui/loader/circular-loader/circular-loader';\nimport Text from '../../ui/text/text';\nimport { useCircleSounds } from '../hooks/use-circle-sounds/use-circle-sounds';\nimport { Banner } from './comps/banner/banner';\nimport { LeaderboardItemWithObserver } from './comps/leaderboard-item/leaderboard-item';\nimport { NavigationButton } from './comps/navigation-button/navigation-button';\nimport { Timer } from './comps/timer/timer';\nimport { ELeaderboardType } from './enums/leaderboard-type-enum';\nimport { useTimer } from './hooks';\nimport * as Styled from './leaderboard-styled';\n\n// lazy load banner lotties\nconst BANNER_LOTTIES: Record<ELeaderboardType, () => Promise<Record<string, unknown>>> = {\n  [ELeaderboardType.ALL_TIME_STREAK]: () =>\n    import('../../../assets/lotties/circle/elite-circle-lottie.json'),\n  [ELeaderboardType.ALL_TIME]: () =>\n    import('../../../assets/lotties/circle/elite-circle-lottie.json'),\n  [ELeaderboardType.BI_WEEKLY]: () =>\n    import('../../../assets/lotties/circle/tournament-ripple-lottie.json'),\n};\n\nconst leaderboards = [\n  {\n    name: 'TOURNAMENT',\n    type: ELeaderboardType.BI_WEEKLY,\n  },\n  {\n    name: 'STREAK STARS',\n    type: ELeaderboardType.ALL_TIME_STREAK,\n  },\n  {\n    name: 'ALL TIME',\n    type: ELeaderboardType.ALL_TIME,\n  },\n];\n\nexport const Leaderboard = ({\n  leaderboardData,\n  type = ELeaderboardType.BI_WEEKLY,\n  userId,\n  onClose,\n  isLoading,\n}: ILeaderboardProps) => {\n  const [currentLeaderBoardIndex, setCurrentLeaderboardIndex] = useState(\n    leaderboards.findIndex(leaderboard => type === leaderboard.type),\n  );\n\n  const [currLeaderboardData, setCurrLeaderboardData] = useState<\n    (ILeaderboardPlayerWithPoints | ILeaderboardPlayerWithStreak)[] | []\n  >(leaderboardData?.[type]?.leaderboardPlayers || []);\n\n  const [currLeaderboardTimeStamps, setCurrLeaderboardTimeStamps] = useState<{\n    current: number;\n    end: number;\n  }>({\n    current: 0,\n    end: 0,\n  });\n\n  const [time, setTimer] = useTimer(0);\n  const [isTournamentEnded, setIsTournamentEnded] = useState(false);\n  const maxPoints = (currLeaderboardData?.[0] as ILeaderboardPlayerWithPoints)?.points;\n  const maxStreakDays = (currLeaderboardData?.[0] as ILeaderboardPlayerWithStreak)?.streakDays || 0;\n  const { playButtonSound } = useCircleSounds();\n\n  const handlePrevious = () => {\n    playButtonSound();\n    setCurrentLeaderboardIndex(prev => {\n      if (prev - 1 < 0) {\n        return leaderboards.length - 1;\n      }\n\n      return prev - 1;\n    });\n  };\n\n  const handleNext = () => {\n    playButtonSound();\n    setCurrentLeaderboardIndex(prev => {\n      if (prev + 1 === leaderboards.length) {\n        return 0;\n      }\n\n      return prev + 1;\n    });\n  };\n\n  useEffect(() => {\n    setTimer(0);\n  }, [setTimer]);\n\n  useEffect(() => {\n    const currType = leaderboards[currentLeaderBoardIndex]?.type;\n    const currLeaderboard = currType && leaderboardData?.[currType];\n\n    if (currLeaderboard) {\n      const leaderboardList = currLeaderboard.leaderboardPlayers || [];\n\n      if (currType === ELeaderboardType.BI_WEEKLY) {\n        setCurrLeaderboardTimeStamps({\n          current: currLeaderboard.currentTimestamp,\n          end: currLeaderboard.endTimestamp,\n        });\n\n        if (currLeaderboard.currentTimestamp > currLeaderboard.endTimestamp) {\n          leaderboardList.splice(10);\n          setIsTournamentEnded(true);\n        }\n      }\n\n      setCurrLeaderboardData([...leaderboardList]);\n    }\n  }, [currentLeaderBoardIndex, leaderboardData]);\n\n  return (\n    <Styled.Leaderboard>\n      <Styled.LeaderboardContainer>\n        <Styled.BannerWrapper>\n          {/* tournament banner */}\n          {leaderboards[currentLeaderBoardIndex]?.type === ELeaderboardType.BI_WEEKLY && (\n            <Banner\n              isLoading={isLoading || currLeaderboardData.length === 0}\n              bgFromTopPosition={-120}\n              bgFromRightPosition={-110}\n              primaryText={\n                isTournamentEnded ? <span>New Tournament</span> : <span>Tournament</span>\n              }\n              secondaryText={\n                isTournamentEnded ? (\n                  <span>Starts Soon</span>\n                ) : (\n                  <span>\n                    {' '}\n                    <Timer\n                      fromTimestamp={(time as number) + currLeaderboardTimeStamps.current}\n                      endTimestamp={currLeaderboardTimeStamps.end}\n                    />{' '}\n                    {'left'}\n                  </span>\n                )\n              }\n              lottiePromise={BANNER_LOTTIES[ELeaderboardType.BI_WEEKLY]}\n              custEle={\n                <Styled.TournamentBannerCustContainer>\n                  <Styled.TrophyWrapper>\n                    <img src={ILLUSTRATIONS.TROPHY_CIRCLE} />\n                  </Styled.TrophyWrapper>\n                </Styled.TournamentBannerCustContainer>\n              }\n            />\n          )}\n\n          {/* top streak banner */}\n          {leaderboards[currentLeaderBoardIndex]?.type === ELeaderboardType.ALL_TIME_STREAK && (\n            <Banner\n              isLoading={isLoading}\n              bgFromTopPosition={-140}\n              bgFromRightPosition={-90}\n              primaryText={<span>Streak Stars</span>}\n              secondaryText={<span>Top 50</span>}\n              lottiePromise={BANNER_LOTTIES[ELeaderboardType.ALL_TIME_STREAK]}\n            />\n          )}\n\n          {/* elite circle banner */}\n          {leaderboards[currentLeaderBoardIndex]?.type === ELeaderboardType.ALL_TIME && (\n            <Banner\n              isLoading={isLoading}\n              bgFromTopPosition={-140}\n              bgFromRightPosition={-90}\n              primaryText={<span>Elite Circle</span>}\n              secondaryText={<span>Top 50</span>}\n              lottiePromise={BANNER_LOTTIES[ELeaderboardType.ALL_TIME]}\n            />\n          )}\n        </Styled.BannerWrapper>\n\n        {isLoading && <CircularLoader />}\n\n        {!isLoading && currLeaderboardData && (\n          <Styled.ItemsWrapper topInset={0}>\n            {isTournamentEnded &&\n              leaderboards[currentLeaderBoardIndex]?.type === ELeaderboardType.BI_WEEKLY && (\n                <Styled.Banner>\n                  <Text $renderAs=\"ab3\" $color=\"WHITE\">\n                    Congratulating winners of the last tournament!\n                  </Text>\n                </Styled.Banner>\n              )}\n            {currLeaderboardData.map(player => {\n              return (\n                <LeaderboardItemWithObserver\n                  key={player.rank}\n                  player={player}\n                  rank={player.rank}\n                  maxStreakDays={maxStreakDays}\n                  maxPoints={maxPoints}\n                  leaderboardType={leaderboards[currentLeaderBoardIndex]?.type}\n                  isActive={player.userId === userId}\n                />\n              );\n            })}\n          </Styled.ItemsWrapper>\n        )}\n\n        <Styled.ActionButtonWrapper>\n          <NavigationButton\n            labels={Object.values(ELeaderboardType)}\n            onLeftClick={handlePrevious}\n            onRightClick={handleNext}\n            currIndex={currentLeaderBoardIndex}\n            onClose={onClose}\n            disableSwipe={isLoading || currLeaderboardData.length === 0}\n          />\n        </Styled.ActionButtonWrapper>\n      </Styled.LeaderboardContainer>\n    </Styled.Leaderboard>\n  );\n};\n"],"names":["BANNER_LOTTIES","ELeaderboardType","leaderboards","Leaderboard","leaderboardData","type","userId","onClose","isLoading","currentLeaderBoardIndex","setCurrentLeaderboardIndex","useState","leaderboard","currLeaderboardData","setCurrLeaderboardData","_a","currLeaderboardTimeStamps","setCurrLeaderboardTimeStamps","time","setTimer","useTimer","isTournamentEnded","setIsTournamentEnded","maxPoints","_b","maxStreakDays","_c","playButtonSound","useCircleSounds","handlePrevious","prev","handleNext","useEffect","currType","currLeaderboard","leaderboardList","Styled.Leaderboard","jsxs","Styled.LeaderboardContainer","Styled.BannerWrapper","_d","jsx","Banner","Timer","Styled.TournamentBannerCustContainer","Styled.TrophyWrapper","ILLUSTRATIONS","_e","_f","CircularLoader","Styled.ItemsWrapper","_g","Styled.Banner","Text","player","LeaderboardItemWithObserver","Styled.ActionButtonWrapper","NavigationButton"],"mappings":"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"}

package/dist/features/circle-games/sign-up/comp/circular-steps/circular-steps.js

@@ -1,49 +1,50 @@
-import { jsx as e, Fragment as k, jsxs as c } from "react/jsx-runtime";
-import { useRef as m, useCallback as S } from "react";
-import B from "../../../../../assets/line-icons/icons/circle-back.js";
-import { LOTTIE as R } from "../../../../../assets/lottie/lottie.js";
-import A from "../../../../ui/lottie-animation/lottie-animation.js";
-import I from "../../../../ui/text/text.js";
-import { BackgroundImage as P, ScreenWrapper as b, TransparentIconButton as L, CircularStepsContainer as T, CircularStepsWrapper as q, CustEleContainer as v, CircularProgressContainer as F, CircularProgress as w, Label as M, CustomDataContainer as W } from "./circular-steps-styled.js";
+import { jsx as e, Fragment as E, jsxs as s } from "react/jsx-runtime";
+import R from "lottie-web";
+import { useRef as l, useEffect as g } from "react";
+import S from "../../../../../assets/line-icons/icons/circle-back.js";
+import P from "../../../../../assets/lotties/circle/levelup-rings-lottie.json.js";
+import b from "../../../../ui/text/text.js";
+import { BackgroundImage as I, ScreenWrapper as T, TransparentIconButton as q, CircularStepsContainer as F, CircularStepsWrapper as v, CustEleContainer as y, CircularProgressContainer as L, CircularProgress as w, Label as M, CustomDataContainer as W } from "./circular-steps-styled.js";
 import { TOTAL_FRAMES as $ } from "./constants.js";
-const j = ({ img: n }) => /* @__PURE__ */ e(P, { children: n }), x = {
-  autoplay: !1,
-  loop: !1,
-  renderer: "canvas"
-}, U = ({ steps: n, currentStepIndex: t, dimensions: d }) => {
-  const { width: s, height: u } = d, r = n[t], l = m(null), a = m(-1), g = () => {
-    var o, i;
-    (i = (o = n[t]) == null ? void 0 : o.onBack) == null || i.call(o);
-  }, h = S(() => {
-    if (l.current && (r != null && r.isProgressAnimationRequired)) {
-      const o = n.filter((E) => E.isProgressAnimationRequired), i = $ / o.length, p = a.current >= 0 ? a.current : 0, f = Math.round(p * i + 1), C = Math.round(t * i);
-      a.current = t, l.current.playSegments([f, C], !0);
+const j = ({ img: t }) => /* @__PURE__ */ e(I, { children: t }), K = ({ steps: t, currentStepIndex: i, dimensions: f }) => {
+  const { width: u, height: m } = f, r = t[i], d = l(null), a = l(null), c = l(-1), h = () => {
+    var o, n;
+    (n = (o = t[i]) == null ? void 0 : o.onBack) == null || n.call(o);
+  }, p = (o, n) => {
+    a.current && a.current.playSegments([o, n], !0);
+  };
+  return g(() => ((async () => {
+    a.current = R.loadAnimation({
+      container: d.current,
+      animationData: P,
+      autoplay: !1,
+      loop: !1,
+      renderer: "canvas"
+    });
+  })(), () => {
+    var n;
+    (n = a.current) == null || n.destroy();
+  }), [r == null ? void 0 : r.isProgressAnimationRequired]), g(() => {
+    if (a.current && (r != null && r.isProgressAnimationRequired)) {
+      const o = t.filter((B) => B.isProgressAnimationRequired), n = $ / o.length, C = c.current >= 0 ? c.current : 0, A = Math.round(C * n), k = Math.round(i * n);
+      p(A, k), c.current = i;
     }
-  }, [t, r == null ? void 0 : r.isProgressAnimationRequired, n]);
-  return /* @__PURE__ */ e(k, { children: r ? /* @__PURE__ */ c(b, { width: s, height: u, children: [
-    r.onBack ? /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(B, { onClick: g }) }) : null,
-    r.background ? /* @__PURE__ */ e(j, { img: r.background }) : null,
-    /* @__PURE__ */ e(T, { children: /* @__PURE__ */ c(q, { children: [
-      r.custEle ? /* @__PURE__ */ e(v, { children: r.custEle }) : null,
-      r.custEleInsideStep ? /* @__PURE__ */ c(F, { width: s, height: u, children: [
-        r.isProgressAnimationRequired ? /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
-          A,
-          {
-            ref: l,
-            src: R.LEVELUP_RINGS,
-            settings: x,
-            onRender: h
-          }
-        ) }) : null,
-        r.label ? /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(I, { $renderAs: "ab2", $color: "WHITE", children: r.label }) }) : null,
+  }, [i, r == null ? void 0 : r.isProgressAnimationRequired, t]), /* @__PURE__ */ e(E, { children: r && /* @__PURE__ */ s(T, { width: u, height: m, children: [
+    r.onBack && /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(S, { onClick: h }) }),
+    r.background && /* @__PURE__ */ e(j, { img: r.background }),
+    /* @__PURE__ */ e(F, { children: /* @__PURE__ */ s(v, { children: [
+      r.custEle ? /* @__PURE__ */ e(y, { children: r.custEle }) : null,
+      r.custEleInsideStep && /* @__PURE__ */ s(L, { width: u, height: m, children: [
+        r.isProgressAnimationRequired && /* @__PURE__ */ e(w, { ref: d }),
+        r.label && /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(b, { $renderAs: "ab2", $color: "WHITE", children: r.label }) }),
         r.custEleInsideStep
-      ] }) : null
+      ] })
     ] }) }),
-    r.custEleBelowStep ? /* @__PURE__ */ e(W, { children: r.custEleBelowStep }) : null
-  ] }) : null });
+    r.custEleBelowStep && /* @__PURE__ */ e(W, { children: r.custEleBelowStep })
+  ] }) });
 };
 export {
   j as BackgroundImage,
-  U as CircularSteps
+  K as CircularSteps
 };
 //# sourceMappingURL=circular-steps.js.map

package/dist/features/circle-games/sign-up/comp/circular-steps/circular-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-steps.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/circular-steps/circular-steps.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { ICircularStepsProps } from './circular-steps-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useRef } from 'react';\n\nimport CircleBackIcon from '../../../../../assets/line-icons/icons/circle-back';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './circular-steps-styled';\nimport { TOTAL_FRAMES } from './constants';\n\nexport const BackgroundImage = ({ img }: { img: React.ReactNode }) => {\n  return <Styled.BackgroundImage>{img}</Styled.BackgroundImage>;\n};\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nexport const CircularSteps: FC<ICircularStepsProps> = ({ steps, currentStepIndex, dimensions }) => {\n  const { width, height } = dimensions;\n\n  const step = steps[currentStepIndex];\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n  const previousStepIndex = useRef<number>(-1);\n\n  const handleBack = () => {\n    steps[currentStepIndex]?.onBack?.();\n  };\n\n  const onLottieRender = useCallback(() => {\n    if (animationRef.current && step?.isProgressAnimationRequired) {\n      const actualSteps = steps.filter(_step => _step.isProgressAnimationRequired);\n      const stepSize = TOTAL_FRAMES / actualSteps.length;\n\n      const validPreviousIndex = previousStepIndex.current >= 0 ? previousStepIndex.current : 0;\n\n      const fromFrame = Math.round(validPreviousIndex * stepSize + 1);\n      const toFrame = Math.round(currentStepIndex * stepSize);\n\n      previousStepIndex.current = currentStepIndex;\n      animationRef.current.playSegments([fromFrame, toFrame], true);\n    }\n  }, [currentStepIndex, step?.isProgressAnimationRequired, steps]);\n\n  return (\n    <>\n      {step ? (\n        <Styled.ScreenWrapper width={width} height={height}>\n          {step.onBack ? (\n            <Styled.TransparentIconButton>\n              <CircleBackIcon onClick={handleBack} />\n            </Styled.TransparentIconButton>\n          ) : null}\n          {step.background ? <BackgroundImage img={step.background} /> : null}\n          <Styled.CircularStepsContainer>\n            <Styled.CircularStepsWrapper>\n              {step.custEle ? (\n                <Styled.CustEleContainer>{step.custEle}</Styled.CustEleContainer>\n              ) : null}\n\n              {/*circular data container*/}\n              {step.custEleInsideStep ? (\n                <Styled.CircularProgressContainer width={width} height={height}>\n                  {step.isProgressAnimationRequired ? (\n                    <Styled.CircularProgress>\n                      <LottieAnimation\n                        ref={animationRef}\n                        src={LOTTIE.LEVELUP_RINGS}\n                        settings={animationSettings}\n                        onRender={onLottieRender}\n                      />\n                    </Styled.CircularProgress>\n                  ) : null}\n\n                  {step.label ? (\n                    <Styled.Label>\n                      <Text $renderAs=\"ab2\" $color=\"WHITE\">\n                        {step.label}\n                      </Text>\n                    </Styled.Label>\n                  ) : null}\n                  {step.custEleInsideStep}\n                </Styled.CircularProgressContainer>\n              ) : null}\n            </Styled.CircularStepsWrapper>\n          </Styled.CircularStepsContainer>\n          {/* custom data container below circle */}\n          {step.custEleBelowStep ? (\n            <Styled.CustomDataContainer>{step.custEleBelowStep}</Styled.CustomDataContainer>\n          ) : null}\n        </Styled.ScreenWrapper>\n      ) : null}\n    </>\n  );\n};\n"],"names":["BackgroundImage","img","jsx","Styled.BackgroundImage","animationSettings","CircularSteps","steps","currentStepIndex","dimensions","width","height","step","animationRef","useRef","previousStepIndex","handleBack","_b","_a","onLottieRender","useCallback","actualSteps","_step","stepSize","TOTAL_FRAMES","validPreviousIndex","fromFrame","toFrame","jsxs","Styled.ScreenWrapper","Styled.TransparentIconButton","CircleBackIcon","Styled.CircularStepsContainer","Styled.CircularStepsWrapper","Styled.CustEleContainer","Styled.CircularProgressContainer","Styled.CircularProgress","LottieAnimation","LOTTIE","Styled.Label","Text","Styled.CustomDataContainer"],"mappings":";;;;;;;;AAaO,MAAMA,IAAkB,CAAC,EAAE,KAAAC,QACxB,gBAAAC,EAAAC,GAAA,EAAwB,UAAIF,EAAA,CAAA,GAGhCG,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEaC,IAAyC,CAAC,EAAE,OAAAC,GAAO,kBAAAC,GAAkB,YAAAC,QAAiB;AAC3F,QAAA,EAAE,OAAAC,GAAO,QAAAC,EAAW,IAAAF,GAEpBG,IAAOL,EAAMC,CAAgB,GAC7BK,IAAeC,EAAmC,IAAI,GACtDC,IAAoBD,EAAe,EAAE,GAErCE,IAAa,MAAM;;AACjB,KAAAC,KAAAC,IAAAX,EAAAC,CAAgB,MAAhB,gBAAAU,EAAmB,WAAnB,QAAAD,EAAA,KAAAC;AAAA,EAA4B,GAG9BC,IAAiBC,EAAY,MAAM;AACnC,QAAAP,EAAa,YAAWD,KAAA,QAAAA,EAAM,8BAA6B;AAC7D,YAAMS,IAAcd,EAAM,OAAO,CAAAe,MAASA,EAAM,2BAA2B,GACrEC,IAAWC,IAAeH,EAAY,QAEtCI,IAAqBV,EAAkB,WAAW,IAAIA,EAAkB,UAAU,GAElFW,IAAY,KAAK,MAAMD,IAAqBF,IAAW,CAAC,GACxDI,IAAU,KAAK,MAAMnB,IAAmBe,CAAQ;AAEtD,MAAAR,EAAkB,UAAUP,GAC5BK,EAAa,QAAQ,aAAa,CAACa,GAAWC,CAAO,GAAG,EAAI;AAAA,IAC9D;AAAA,KACC,CAACnB,GAAkBI,KAAA,gBAAAA,EAAM,6BAA6BL,CAAK,CAAC;AAE/D,gCAEK,UACCK,IAAA,gBAAAgB,EAACC,GAAA,EAAqB,OAAAnB,GAAc,QAAAC,GACjC,UAAA;AAAA,IAAKC,EAAA,SACH,gBAAAT,EAAA2B,GAAA,EACC,4BAACC,GAAe,EAAA,SAASf,GAAY,EAAA,CACvC,IACE;AAAA,IACHJ,EAAK,aAAa,gBAAAT,EAACF,KAAgB,KAAKW,EAAK,WAAY,CAAA,IAAK;AAAA,sBAC9DoB,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EACE,UAAA;AAAA,MAAArB,EAAK,UACH,gBAAAT,EAAA+B,GAAA,EAAyB,UAAAtB,EAAK,QAAQ,CAAA,IACrC;AAAA,MAGHA,EAAK,oBACJ,gBAAAgB,EAACO,GAAA,EAAiC,OAAAzB,GAAc,QAAAC,GAC7C,UAAA;AAAA,QAAAC,EAAK,8BACJ,gBAAAT,EAACiC,GAAA,EACC,UAAA,gBAAAjC;AAAA,UAACkC;AAAA,UAAA;AAAA,YACC,KAAKxB;AAAA,YACL,KAAKyB,EAAO;AAAA,YACZ,UAAUjC;AAAA,YACV,UAAUc;AAAA,UAAA;AAAA,WAEd,IACE;AAAA,QAEHP,EAAK,QACH,gBAAAT,EAAAoC,GAAA,EACC,UAAA,gBAAApC,EAACqC,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UAAK5B,EAAA,MACR,CAAA,EACF,CAAA,IACE;AAAA,QACHA,EAAK;AAAA,MAAA,EAAA,CACR,IACE;AAAA,IAAA,EAAA,CACN,EACF,CAAA;AAAA,IAECA,EAAK,mBACH,gBAAAT,EAAAsC,GAAA,EAA4B,UAAA7B,EAAK,iBAAiB,CAAA,IACjD;AAAA,EAAA,GACN,IACE,KACN,CAAA;AAEJ;"}
+{"version":3,"file":"circular-steps.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/circular-steps/circular-steps.tsx"],"sourcesContent":["import type { ICircularStepsProps } from './circular-steps-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { useEffect, useRef } from 'react';\n\nimport CircleBackIcon from '../../../../../assets/line-icons/icons/circle-back';\nimport progressRingLottie from '../../../../../assets/lotties/circle/levelup-rings-lottie.json';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './circular-steps-styled';\nimport { TOTAL_FRAMES } from './constants';\n\nexport const BackgroundImage = ({ img }: { img: React.ReactNode }) => {\n  return <Styled.BackgroundImage>{img}</Styled.BackgroundImage>;\n};\n\nexport const CircularSteps: FC<ICircularStepsProps> = ({ steps, currentStepIndex, dimensions }) => {\n  const { width, height } = dimensions;\n\n  const step = steps[currentStepIndex];\n  const lottieAnimationRef = useRef<HTMLDivElement>(null);\n  const animationRef = useRef<AnimationItem | null>(null);\n  const previousStepIndex = useRef<number>(-1);\n\n  const handleBack = () => {\n    steps[currentStepIndex]?.onBack?.();\n  };\n  const goToFrame = (fromFrame: number, toFrame: number) => {\n    if (animationRef.current) {\n      animationRef.current.playSegments([fromFrame, toFrame], true);\n    }\n  };\n\n  // Load animation\n  useEffect(() => {\n    const loadAnimation = async () => {\n      animationRef.current = Lottie.loadAnimation({\n        container: lottieAnimationRef.current as Element,\n        animationData: progressRingLottie,\n        autoplay: false,\n        loop: false,\n        renderer: 'canvas',\n      });\n    };\n\n    loadAnimation();\n\n    return () => {\n      animationRef.current?.destroy();\n    };\n  }, [step?.isProgressAnimationRequired]);\n\n  useEffect(() => {\n    if (animationRef.current && step?.isProgressAnimationRequired) {\n      const actualSteps = steps.filter(_step => _step.isProgressAnimationRequired);\n      const stepSize = TOTAL_FRAMES / actualSteps.length;\n\n      const validPreviousIndex = previousStepIndex.current >= 0 ? previousStepIndex.current : 0;\n\n      const fromFrame = Math.round(validPreviousIndex * stepSize);\n      const toFrame = Math.round(currentStepIndex * stepSize);\n\n      goToFrame(fromFrame, toFrame);\n      previousStepIndex.current = currentStepIndex;\n    }\n  }, [currentStepIndex, step?.isProgressAnimationRequired, steps]);\n\n  return (\n    <>\n      {step && (\n        <Styled.ScreenWrapper width={width} height={height}>\n          {step.onBack && (\n            <Styled.TransparentIconButton>\n              <CircleBackIcon onClick={handleBack} />\n            </Styled.TransparentIconButton>\n          )}\n          {step.background && <BackgroundImage img={step.background} />}\n          <Styled.CircularStepsContainer>\n            <Styled.CircularStepsWrapper>\n              {step.custEle ? (\n                <Styled.CustEleContainer>{step.custEle}</Styled.CustEleContainer>\n              ) : null}\n\n              {/*circular data container*/}\n              {step.custEleInsideStep && (\n                <Styled.CircularProgressContainer width={width} height={height}>\n                  {step.isProgressAnimationRequired && (\n                    <Styled.CircularProgress ref={lottieAnimationRef} />\n                  )}\n\n                  {step.label && (\n                    <Styled.Label>\n                      <Text $renderAs=\"ab2\" $color=\"WHITE\">\n                        {step.label}\n                      </Text>\n                    </Styled.Label>\n                  )}\n                  {step.custEleInsideStep}\n                </Styled.CircularProgressContainer>\n              )}\n            </Styled.CircularStepsWrapper>\n          </Styled.CircularStepsContainer>\n          {/* custom data container below circle */}\n          {step.custEleBelowStep && (\n            <Styled.CustomDataContainer>{step.custEleBelowStep}</Styled.CustomDataContainer>\n          )}\n        </Styled.ScreenWrapper>\n      )}\n    </>\n  );\n};\n"],"names":["BackgroundImage","img","jsx","Styled.BackgroundImage","CircularSteps","steps","currentStepIndex","dimensions","width","height","step","lottieAnimationRef","useRef","animationRef","previousStepIndex","handleBack","_b","_a","goToFrame","fromFrame","toFrame","useEffect","Lottie","progressRingLottie","actualSteps","_step","stepSize","TOTAL_FRAMES","validPreviousIndex","jsxs","Styled.ScreenWrapper","Styled.TransparentIconButton","CircleBackIcon","Styled.CircularStepsContainer","Styled.CircularStepsWrapper","Styled.CustEleContainer","Styled.CircularProgressContainer","Styled.CircularProgress","Styled.Label","Text","Styled.CustomDataContainer"],"mappings":";;;;;;;;AAaO,MAAMA,IAAkB,CAAC,EAAE,KAAAC,QACxB,gBAAAC,EAAAC,GAAA,EAAwB,UAAIF,EAAA,CAAA,GAGzBG,IAAyC,CAAC,EAAE,OAAAC,GAAO,kBAAAC,GAAkB,YAAAC,QAAiB;AAC3F,QAAA,EAAE,OAAAC,GAAO,QAAAC,EAAW,IAAAF,GAEpBG,IAAOL,EAAMC,CAAgB,GAC7BK,IAAqBC,EAAuB,IAAI,GAChDC,IAAeD,EAA6B,IAAI,GAChDE,IAAoBF,EAAe,EAAE,GAErCG,IAAa,MAAM;;AACjB,KAAAC,KAAAC,IAAAZ,EAAAC,CAAgB,MAAhB,gBAAAW,EAAmB,WAAnB,QAAAD,EAAA,KAAAC;AAAA,EAA4B,GAE9BC,IAAY,CAACC,GAAmBC,MAAoB;AACxD,IAAIP,EAAa,WACfA,EAAa,QAAQ,aAAa,CAACM,GAAWC,CAAO,GAAG,EAAI;AAAA,EAC9D;AAIF,SAAAC,EAAU,QACc,YAAY;AACnB,IAAAR,EAAA,UAAUS,EAAO,cAAc;AAAA,MAC1C,WAAWX,EAAmB;AAAA,MAC9B,eAAeY;AAAA,MACf,UAAU;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,IAAA,CACX;AAAA,EAAA,MAKI,MAAM;;AACX,KAAAN,IAAAJ,EAAa,YAAb,QAAAI,EAAsB;AAAA,EAAQ,IAE/B,CAACP,KAAA,gBAAAA,EAAM,2BAA2B,CAAC,GAEtCW,EAAU,MAAM;AACV,QAAAR,EAAa,YAAWH,KAAA,QAAAA,EAAM,8BAA6B;AAC7D,YAAMc,IAAcnB,EAAM,OAAO,CAAAoB,MAASA,EAAM,2BAA2B,GACrEC,IAAWC,IAAeH,EAAY,QAEtCI,IAAqBd,EAAkB,WAAW,IAAIA,EAAkB,UAAU,GAElFK,IAAY,KAAK,MAAMS,IAAqBF,CAAQ,GACpDN,IAAU,KAAK,MAAMd,IAAmBoB,CAAQ;AAEtD,MAAAR,EAAUC,GAAWC,CAAO,GAC5BN,EAAkB,UAAUR;AAAA,IAC9B;AAAA,KACC,CAACA,GAAkBI,KAAA,gBAAAA,EAAM,6BAA6BL,CAAK,CAAC,0BAI1D,UACCK,KAAA,gBAAAmB,EAACC,GAAA,EAAqB,OAAAtB,GAAc,QAAAC,GACjC,UAAA;AAAA,IAAKC,EAAA,4BACHqB,GAAA,EACC,UAAC,gBAAA7B,EAAA8B,GAAA,EAAe,SAASjB,EAAA,CAAY,EACvC,CAAA;AAAA,IAEDL,EAAK,cAAc,gBAAAR,EAACF,GAAgB,EAAA,KAAKU,EAAK,YAAY;AAAA,sBAC1DuB,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EACE,UAAA;AAAA,MAAAxB,EAAK,UACH,gBAAAR,EAAAiC,GAAA,EAAyB,UAAAzB,EAAK,QAAQ,CAAA,IACrC;AAAA,MAGHA,EAAK,qBACJ,gBAAAmB,EAACO,GAAA,EAAiC,OAAA5B,GAAc,QAAAC,GAC7C,UAAA;AAAA,QAAAC,EAAK,+BACH,gBAAAR,EAAAmC,GAAA,EAAwB,KAAK1B,GAAoB;AAAA,QAGnDD,EAAK,SACH,gBAAAR,EAAAoC,GAAA,EACC,UAAA,gBAAApC,EAACqC,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UAAA7B,EAAK,MACR,CAAA,GACF;AAAA,QAEDA,EAAK;AAAA,MAAA,GACR;AAAA,IAAA,EAAA,CAEJ,EACF,CAAA;AAAA,IAECA,EAAK,oBACJ,gBAAAR,EAACsC,GAAA,EAA4B,YAAK,kBAAiB;AAAA,EAAA,EAEvD,CAAA,EAEJ,CAAA;AAEJ;"}

package/dist/features/circle-games/sign-up/comp/spinner/spinner-styled.js

@@ -1,11 +1,15 @@
-import n from "styled-components";
-const i = n.div`
+import t from "styled-components";
+const p = t.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: ${({ marginY: e, marginX: t }) => `${e}px ${t}px`};
+  margin: ${({ marginY: e, marginX: i }) => `${e}px ${i}px`};
+`, r = t.div`
+  height: ${({ height: e }) => e}px;
+  width: ${({ width: e }) => e}px;
 `;
 export {
-  i as SpinnerWrapper
+  r as Spinner,
+  p as SpinnerWrapper
 };
 //# sourceMappingURL=spinner-styled.js.map

package/dist/features/circle-games/sign-up/comp/spinner/spinner-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/spinner/spinner-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const SpinnerWrapper = styled.div<{ marginY: number; marginX: number }>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: ${({ marginY, marginX }) => `${marginY}px ${marginX}px`};\n`;\n"],"names":["SpinnerWrapper","styled","marginY","marginX"],"mappings":";AAEO,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA,YAIzB,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAc,GAAGD,CAAO,MAAMC,CAAO,IAAI;AAAA;"}
+{"version":3,"file":"spinner-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/spinner/spinner-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const SpinnerWrapper = styled.div<{ marginY: number; marginX: number }>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: ${({ marginY, marginX }) => `${marginY}px ${marginX}px`};\n`;\n\nexport const Spinner = styled.div<{ height: number; width: number }>`\n  height: ${({ height }) => height}px;\n  width: ${({ width }) => width}px;\n`;\n"],"names":["SpinnerWrapper","styled","marginY","marginX","Spinner","height","width"],"mappings":";AAEO,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA,YAIzB,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAc,GAAGD,CAAO,MAAMC,CAAO,IAAI;AAAA,GAGpDC,IAAUH,EAAO;AAAA,YAClB,CAAC,EAAE,QAAAI,EAAO,MAAMA,CAAM;AAAA,WACvB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;"}

package/dist/features/circle-games/sign-up/comp/spinner/spinner.js

@@ -1,9 +1,26 @@
-import { jsx as r } from "react/jsx-runtime";
-import { LOTTIE as t } from "../../../../../assets/lottie/lottie.js";
-import n from "../../../../ui/lottie-animation/lottie-animation.js";
-import { SpinnerWrapper as e } from "./spinner-styled.js";
-const I = ({ height: o = 24, width: i = 24, marginX: m = 0, marginY: p = 0 }) => /* @__PURE__ */ r(e, { marginX: m, marginY: p, children: /* @__PURE__ */ r(n, { src: t.SPINNER_WHITE, height: o, width: i }) });
+import { jsx as o } from "react/jsx-runtime";
+import p from "lottie-web";
+import { useRef as m, useEffect as s } from "react";
+import { SpinnerWrapper as u, Spinner as c } from "./spinner-styled.js";
+const d = () => import("../../../../../assets/lotties/circle/spinner-white.json.js"), M = ({ height: r = 24, width: e = 24, marginX: i = 0, marginY: a = 0 }) => {
+  const t = m(null);
+  return s(() => {
+    let n = null;
+    return (async () => {
+      const l = (await d()).default;
+      n = p.loadAnimation({
+        container: t.current,
+        animationData: l,
+        autoplay: !0,
+        loop: !0,
+        renderer: "canvas"
+      });
+    })(), () => {
+      n == null || n.destroy();
+    };
+  }, []), /* @__PURE__ */ o(u, { marginX: i, marginY: a, children: /* @__PURE__ */ o(c, { ref: t, height: r, width: e }) });
+};
 export {
-  I as Spinner
+  M as Spinner
 };
 //# sourceMappingURL=spinner.js.map

package/dist/features/circle-games/sign-up/comp/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/spinner/spinner.tsx"],"sourcesContent":["import type { TSpinnerProps } from './spinner-types';\n\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './spinner-styled';\n\nexport const Spinner = ({ height = 24, width = 24, marginX = 0, marginY = 0 }: TSpinnerProps) => (\n  <Styled.SpinnerWrapper marginX={marginX} marginY={marginY}>\n    <LottieAnimation src={LOTTIE.SPINNER_WHITE} height={height} width={width} />\n  </Styled.SpinnerWrapper>\n);\n"],"names":["Spinner","height","width","marginX","marginY","Styled.SpinnerWrapper","jsx","LottieAnimation","LOTTIE"],"mappings":";;;;AAMa,MAAAA,IAAU,CAAC,EAAE,QAAAC,IAAS,IAAI,OAAAC,IAAQ,IAAI,SAAAC,IAAU,GAAG,SAAAC,IAAU,EAAE,wBACzEC,GAAA,EAAsB,SAAAF,GAAkB,SAAAC,GACvC,UAAA,gBAAAE,EAACC,GAAgB,EAAA,KAAKC,EAAO,eAAe,QAAAP,GAAgB,OAAAC,EAAc,CAAA,EAC5E,CAAA;"}
+{"version":3,"file":"spinner.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/spinner/spinner.tsx"],"sourcesContent":["import type { TSpinnerProps } from './spinner-types';\nimport type { AnimationItem } from 'lottie-web';\n\nimport Lottie from 'lottie-web';\nimport { useEffect, useRef } from 'react';\n\nimport * as S from './spinner-styled';\n\nconst spinnerWhite = () => import('../../../../../assets/lotties/circle/spinner-white.json');\n\nexport const Spinner = ({ height = 24, width = 24, marginX = 0, marginY = 0 }: TSpinnerProps) => {\n  const lottieContainer = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let animation: AnimationItem | null = null;\n    const loadAnimation = async () => {\n      const animationModule = await spinnerWhite();\n      const animationData = animationModule.default;\n\n      animation = Lottie.loadAnimation({\n        container: lottieContainer.current as Element,\n        animationData: animationData,\n        autoplay: true,\n        loop: true,\n        renderer: 'canvas',\n      });\n    };\n\n    loadAnimation();\n\n    return () => {\n      animation?.destroy();\n    };\n  }, []);\n\n  return (\n    <S.SpinnerWrapper marginX={marginX} marginY={marginY}>\n      <S.Spinner ref={lottieContainer} height={height} width={width} />\n    </S.SpinnerWrapper>\n  );\n};\n"],"names":["spinnerWhite","Spinner","height","width","marginX","marginY","lottieContainer","useRef","useEffect","animation","animationData","Lottie","jsx","S.SpinnerWrapper","S.Spinner"],"mappings":";;;;AAQA,MAAMA,IAAe,MAAM,OAAO,4DAAyD,GAE9EC,IAAU,CAAC,EAAE,QAAAC,IAAS,IAAI,OAAAC,IAAQ,IAAI,SAAAC,IAAU,GAAG,SAAAC,IAAU,QAAuB;AACzF,QAAAC,IAAkBC,EAAuB,IAAI;AAEnD,SAAAC,EAAU,MAAM;AACd,QAAIC,IAAkC;AAcxB,YAbQ,YAAY;AAEhC,YAAMC,KADkB,MAAMV,KACQ;AAEtC,MAAAS,IAAYE,EAAO,cAAc;AAAA,QAC/B,WAAWL,EAAgB;AAAA,QAC3B,eAAAI;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,MAAA,CACX;AAAA,IAAA,MAKI,MAAM;AACX,MAAAD,KAAA,QAAAA,EAAW;AAAA,IAAQ;AAAA,EAEvB,GAAG,CAAE,CAAA,GAGF,gBAAAG,EAAAC,GAAA,EAAiB,SAAAT,GAAkB,SAAAC,GAClC,UAAA,gBAAAO,EAACE,GAAA,EAAU,KAAKR,GAAiB,QAAAJ,GAAgB,OAAAC,EAAc,CAAA,EACjE,CAAA;AAEJ;"}