@cuemath/leap 2.8.22 → 2.8.24-hg1

package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.js.map

@@ -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 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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"}
+{"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;"}

package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js

@@ -1,10 +1,11 @@
-import { jsxs as A, jsx as t } from "react/jsx-runtime";
-import R from "lottie-web";
-import { memo as M, forwardRef as v, useRef as f, useState as S, useCallback as u, useImperativeHandle as w, useEffect as b } from "react";
-import F from "../../../../../assets/line-icons/icons/check.js";
-import x from "../../../../../assets/lotties/circle/levelup-rings-lottie.json.js";
-import { fetchLottie as j } from "./fetch-lottie.js";
-import { SegmentedCard as D, ExtendedFlexView as G, AnimatedLabel as B, SegmentedCardWrapper as O, CircularProgressLottieContainer as q, SegmentLeft as z, SegmentRight as J, SegmentBottom as K, SegmentContainer as N, SegmentContentContainer as Q, SegmentAssetContainer as U, SegmentOverlay as X, IconWrapper as Y } from "./segmented-game-card-styled.js";
+import { jsxs as R, jsx as t } from "react/jsx-runtime";
+import L from "lottie-web";
+import { memo as v, forwardRef as w, useRef as u, useState as S, useCallback as c, useImperativeHandle as F, useEffect as I } from "react";
+import $ from "../../../../../assets/line-icons/icons/check.js";
+import j from "../../../../../assets/lotties/circle/levelup-rings-lottie.json.js";
+import { CardContainer as D } from "../card-container/card-container.js";
+import { fetchLottie as G } from "./fetch-lottie.js";
+import { CircularProgressLottieContainer as x, SegmentLeft as B, SegmentRight as O, SegmentBottom as q, SegmentContainer as z, SegmentContentContainer as J, SegmentAssetContainer as K, SegmentOverlay as N, IconWrapper as Q } from "./segmented-game-card-styled.js";
 const T = ({
   segmentType: e,
   isCompleted: i,
@@ -12,13 +13,13 @@ const T = ({
   name: m,
   onMouseEnter: s
 }) => {
-  const c = f(null);
-  b(() => {
+  const d = u(null);
+  I(() => {
     let r = null;
     return (async () => {
-      const p = await j(l);
-      r = R.loadAnimation({
-        container: c.current,
+      const p = await G(l);
+      r = L.loadAnimation({
+        container: d.current,
         renderer: "canvas",
         loop: !0,
         autoplay: !0,
@@ -26,89 +27,90 @@ const T = ({
       });
     })(), () => r == null ? void 0 : r.destroy();
   }, [l]);
-  const d = u(() => s(m), [s, m]);
-  return /* @__PURE__ */ t(N, { children: /* @__PURE__ */ A(Q, { $segmentType: e, onMouseEnter: d, children: [
-    /* @__PURE__ */ t(U, { ref: c, $segmentType: e }),
-    i && /* @__PURE__ */ t(X, { $segmentType: e, children: /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t(F, { color: "#fff", height: 40, width: 40 }) }) })
+  const f = c(() => s(m), [s, m]);
+  return /* @__PURE__ */ t(z, { children: /* @__PURE__ */ R(J, { $segmentType: e, onMouseEnter: f, children: [
+    /* @__PURE__ */ t(K, { ref: d, $segmentType: e }),
+    i && /* @__PURE__ */ t(N, { $segmentType: e, children: /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ t($, { color: "#fff", height: 40, width: 40 }) }) })
   ] }) });
-}, Z = ({ data: e, label: i, initialValue: l = 0, value: m, maxValue: s = 1 }, c) => {
-  const d = f(null), r = f(null), g = f(null), [p, y] = S(i), [L, E] = S(!1), [I, $] = S("WHITE_T_87"), P = p !== i, h = u((n) => {
+}, U = ({ data: e, label: i, initialValue: l = 0, value: m, maxValue: s = 1 }, d) => {
+  const f = u(null), r = u(null), C = u(null), [p, y] = S(i), [A, b] = S(!1), [E, P] = S("WHITE_T_87"), W = p !== i, g = c((n) => {
     y(n);
-  }, []), W = u(() => {
+  }, []), _ = c(() => {
     y(i);
-  }, [i]), C = (n) => {
-    var o, a;
-    (a = (o = e[n]) == null ? void 0 : o.onPress) == null || a.call(o);
-  }, _ = u((n) => {
-    E(!0), $(n);
+  }, [i]), h = c(
+    (n) => {
+      var o, a;
+      (a = (o = e[n]) == null ? void 0 : o.onPress) == null || a.call(o);
+    },
+    [e]
+  ), k = c((n) => {
+    b(!0), P(n);
   }, []);
-  return w(c, () => ({
+  return F(d, () => ({
     labelRef: r,
-    segmentedCardWrapperRef: g,
-    startLabelAnimation: _
-  })), b(() => {
-    const n = R.loadAnimation({
-      container: d.current,
+    segmentedCardWrapperRef: C,
+    startLabelAnimation: k
+  })), I(() => {
+    const n = L.loadAnimation({
+      container: f.current,
       renderer: "canvas",
       autoplay: !1,
       loop: !1,
-      animationData: x
+      animationData: j
     });
     if (s <= 0)
       return;
-    const o = 92, a = o / s, k = Math.min(a * l, o), H = Math.min(a * m + 1, o);
-    return n.playSegments([k, H], !0), () => {
+    const o = 92, a = o / s, H = Math.min(a * l, o), M = Math.min(a * m + 1, o);
+    return n.playSegments([H, M], !0), () => {
       n.destroy();
     };
-  }, [l, m, s]), /* @__PURE__ */ A(D, { children: [
-    /* @__PURE__ */ t(G, { $position: "absolute", children: /* @__PURE__ */ t(
-      B,
-      {
-        ref: r,
-        $renderAs: "ac3",
-        $align: "center",
-        $color: L ? I : P ? "WHITE_T_87" : "WHITE_T_60",
-        isAnimated: L,
-        children: p
-      }
-    ) }),
-    /* @__PURE__ */ A(O, { ref: g, onMouseLeave: W, children: [
-      /* @__PURE__ */ t(q, { ref: d }),
-      /* @__PURE__ */ t(z, { onClick: () => C(0), children: /* @__PURE__ */ t(
-        T,
-        {
-          segmentType: "left",
-          card: e[0].card,
-          name: e[0].name,
-          isCompleted: e[0].isCompleted,
-          onMouseEnter: h
-        }
-      ) }),
-      /* @__PURE__ */ t(J, { onClick: () => C(1), children: /* @__PURE__ */ t(
-        T,
-        {
-          segmentType: "right",
-          card: e[1].card,
-          name: e[1].name,
-          isCompleted: e[1].isCompleted,
-          onMouseEnter: h
-        }
-      ) }),
-      /* @__PURE__ */ t(K, { onClick: () => C(2), children: /* @__PURE__ */ t(
-        T,
-        {
-          segmentType: "bottom",
-          card: e[2].card,
-          name: e[2].name,
-          isCompleted: e[2].isCompleted,
-          onMouseEnter: h
-        }
-      ) })
-    ] })
-  ] });
-}, se = M(v(Z));
+  }, [l, m, s]), /* @__PURE__ */ R(
+    D,
+    {
+      ref: C,
+      labelRef: r,
+      label: p,
+      isAnimated: A,
+      onMouseLeave: _,
+      labelColor: A ? E : W ? "WHITE_T_87" : "WHITE_T_60",
+      children: [
+        /* @__PURE__ */ t(x, { ref: f }),
+        /* @__PURE__ */ t(B, { onClick: () => h(0), children: /* @__PURE__ */ t(
+          T,
+          {
+            segmentType: "left",
+            card: e[0].card,
+            name: e[0].name,
+            isCompleted: e[0].isCompleted,
+            onMouseEnter: g
+          }
+        ) }),
+        /* @__PURE__ */ t(O, { onClick: () => h(1), children: /* @__PURE__ */ t(
+          T,
+          {
+            segmentType: "right",
+            card: e[1].card,
+            name: e[1].name,
+            isCompleted: e[1].isCompleted,
+            onMouseEnter: g
+          }
+        ) }),
+        /* @__PURE__ */ t(q, { onClick: () => h(2), children: /* @__PURE__ */ t(
+          T,
+          {
+            segmentType: "bottom",
+            card: e[2].card,
+            name: e[2].name,
+            isCompleted: e[2].isCompleted,
+            onMouseEnter: g
+          }
+        ) })
+      ]
+    }
+  );
+}, re = v(w(U));
 export {
   T as SegmentContent,
-  se as SegmentedGameCard
+  re as SegmentedGameCard
 };
 //# sourceMappingURL=segmented-game-card.js.map

package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js.map

@@ -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  useRef,\n  useState,\n} from 'react';\n\nimport CheckIcon from '../../../../../assets/line-icons/icons/check';\nimport progressRingLottie from '../../../../../assets/lotties/circle/levelup-rings-lottie.json';\nimport { fetchLottie } from './fetch-lottie';\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 lottieAnimationRef = useRef<HTMLDivElement>(null);\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  useEffect(() => {\n    const animation = Lottie.loadAnimation({\n      container: lottieAnimationRef.current as Element,\n      renderer: 'canvas',\n      autoplay: false,\n      loop: false,\n      animationData: progressRingLottie,\n    });\n\n    // handle progress lottie\n    // total frames in 100% progress are 90 frames\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    animation.playSegments([initialFrameToPlay, finalFrameToPlay], true);\n\n    return () => {\n      animation.destroy();\n    };\n  }, [initialValue, value, maxValue]);\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 ref={lottieAnimationRef} />\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","progressRingLottie","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","Styled.SegmentedCard","Styled.ExtendedFlexView","Styled.AnimatedLabel","Styled.SegmentedCardWrapper","Styled.CircularProgressLottieContainer","Styled.SegmentLeft","Styled.SegmentRight","Styled.SegmentBottom","SegmentedGameCard","memo","forwardRef"],"mappings":"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"}
+{"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  useRef,\n  useState,\n} from 'react';\n\nimport CheckIcon from '../../../../../assets/line-icons/icons/check';\nimport progressRingLottie from '../../../../../assets/lotties/circle/levelup-rings-lottie.json';\nimport { CardContainer } from '../card-container/card-container';\nimport { fetchLottie } from './fetch-lottie';\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 lottieAnimationRef = useRef<HTMLDivElement>(null);\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  useEffect(() => {\n    const animation = Lottie.loadAnimation({\n      container: lottieAnimationRef.current as Element,\n      renderer: 'canvas',\n      autoplay: false,\n      loop: false,\n      animationData: progressRingLottie,\n    });\n\n    // handle progress lottie\n    // total frames in 100% progress are 90 frames\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    animation.playSegments([initialFrameToPlay, finalFrameToPlay], true);\n\n    return () => {\n      animation.destroy();\n    };\n  }, [initialValue, value, maxValue]);\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 ref={lottieAnimationRef} />\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","progressRingLottie","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","CardContainer","Styled.CircularProgressLottieContainer","Styled.SegmentLeft","Styled.SegmentRight","Styled.SegmentBottom","SegmentedGameCard","memo","forwardRef"],"mappings":";;;;;;;;AA0BO,MAAMA,IAAmD,CAAC;AAAA,EAC/D,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AACF,MAAM;AACE,QAAAC,IAAqBC,EAAuB,IAAI;AAEtD,EAAAC,EAAU,MAAM;AACd,QAAIC,IAAkC;AAc3B,YAZQ,YAAY;AACvB,YAAAC,IAAS,MAAMC,EAAYR,CAAI;AAErC,MAAAM,IAAYG,EAAO,cAAc;AAAA,QAC/B,WAAWN,EAAmB;AAAA,QAC9B,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,eAAeI;AAAA,MAAA,CAChB;AAAA,IAAA,MAKI,MACED,KAAA,gBAAAA,EAAW;AAAA,EACpB,GACC,CAACN,CAAI,CAAC;AAEH,QAAAU,IAAmBC,EAAY,MAAMT,EAAaD,CAAI,GAAG,CAACC,GAAcD,CAAI,CAAC;AAGjF,SAAA,gBAAAW,EAACC,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAA+B,cAAcjB,GAAa,cAAcY,GACvE,UAAA;AAAA,IAAA,gBAAAE,EAACI,GAAA,EAA6B,KAAKb,GAAoB,cAAcL,GAAa;AAAA,IACjFC,uBACEkB,GAAA,EAAsB,cAAcnB,GACnC,4BAACoB,GAAA,EACC,UAAC,gBAAAN,EAAAO,GAAA,EAAU,OAAM,QAAO,QAAQ,IAAI,OAAO,GAAA,CAAI,EACjD,CAAA,GACF;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEMC,IAGF,CAAC,EAAE,MAAAC,GAAM,OAAOC,GAAmB,cAAAC,IAAe,GAAG,OAAAC,GAAO,UAAAC,IAAW,EAAE,GAAGC,MAAQ;AAChF,QAAAvB,IAAqBC,EAAuB,IAAI,GAChDuB,IAAWvB,EAAuB,IAAI,GACtCwB,IAAiBxB,EAAuB,IAAI,GAE5C,CAACyB,GAAOC,CAAQ,IAAIC,EAAiBT,CAAiB,GACtD,CAACU,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAeC,CAAgB,IAAIJ,EAAsB,YAAY,GAEtEK,IAAqBP,MAAUP,GAE/BpB,IAAeS,EAAY,CAAC0B,MAAqB;AACrD,IAAAP,EAASO,CAAQ;AAAA,EACnB,GAAG,CAAE,CAAA,GAECC,IAAe3B,EAAY,MAAM;AACrC,IAAAmB,EAASR,CAAiB;AAAA,EAAA,GACzB,CAACA,CAAiB,CAAC,GAEhBiB,IAAiB5B;AAAA,IACrB,CAAC6B,MAAkB;;AACZ,OAAAC,KAAAC,IAAArB,EAAAmB,CAAK,MAAL,gBAAAE,EAAQ,YAAR,QAAAD,EAAA,KAAAC;AAAA,IACP;AAAA,IACA,CAACrB,CAAI;AAAA,EAAA,GAGDsB,IAAsBhC,EAAY,CAACiC,MAAuB;AAC9D,IAAAX,EAAc,EAAI,GAClBE,EAAiBS,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA;AAEL,SAAAC,EAAoBnB,GAAK,OAAO;AAAA,IAC9B,UAAAC;AAAA,IACA,yBAAyBC;AAAA,IACzB,qBAAAe;AAAA,EACA,EAAA,GAEFtC,EAAU,MAAM;AACR,UAAAC,IAAYG,EAAO,cAAc;AAAA,MACrC,WAAWN,EAAmB;AAAA,MAC9B,UAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAe2C;AAAA,IAAA,CAChB;AAID,QAAIrB,KAAY;AACd;AAGF,UAAMsB,IAAc,IACdC,IAAiBD,IAActB,GAE/BwB,IAAqB,KAAK,IAAID,IAAiBzB,GAAcwB,CAAW,GACxEG,IAAmB,KAAK,IAAIF,IAAiBxB,IAAQ,GAAGuB,CAAW;AAEzE,WAAAzC,EAAU,aAAa,CAAC2C,GAAoBC,CAAgB,GAAG,EAAI,GAE5D,MAAM;AACX,MAAA5C,EAAU,QAAQ;AAAA,IAAA;AAAA,EAEnB,GAAA,CAACiB,GAAcC,GAAOC,CAAQ,CAAC,GAGhC,gBAAAX;AAAA,IAACqC;AAAA,IAAA;AAAA,MACC,KAAKvB;AAAA,MACL,UAAAD;AAAA,MACA,OAAAE;AAAA,MACA,YAAAG;AAAA,MACA,cAAAM;AAAA,MACA,YAAYN,IAAaE,IAAgBE,IAAqB,eAAe;AAAA,MAE7E,UAAA;AAAA,QAAA,gBAAAxB,EAACwC,GAAA,EAAuC,KAAKjD,EAAoB,CAAA;AAAA,QAEjE,gBAAAS,EAACyC,GAAA,EAAmB,SAAS,MAAMd,EAAe,CAAC,GACjD,UAAA,gBAAA3B;AAAA,UAACf;AAAA,UAAA;AAAA,YACC,aAAa;AAAA,YACb,MAAMwB,EAAK,CAAC,EAAG;AAAA,YACf,MAAMA,EAAK,CAAC,EAAG;AAAA,YACf,aAAaA,EAAK,CAAC,EAAG;AAAA,YACtB,cAAAnB;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QAGA,gBAAAU,EAAC0C,GAAA,EAAoB,SAAS,MAAMf,EAAe,CAAC,GAClD,UAAA,gBAAA3B;AAAA,UAACf;AAAA,UAAA;AAAA,YACC,aAAa;AAAA,YACb,MAAMwB,EAAK,CAAC,EAAG;AAAA,YACf,MAAMA,EAAK,CAAC,EAAG;AAAA,YACf,aAAaA,EAAK,CAAC,EAAG;AAAA,YACtB,cAAAnB;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QAGA,gBAAAU,EAAC2C,GAAA,EAAqB,SAAS,MAAMhB,EAAe,CAAC,GACnD,UAAA,gBAAA3B;AAAA,UAACf;AAAA,UAAA;AAAA,YACC,aAAa;AAAA,YACb,MAAMwB,EAAK,CAAC,EAAG;AAAA,YACf,MAAMA,EAAK,CAAC,EAAG;AAAA,YACf,aAAaA,EAAK,CAAC,EAAG;AAAA,YACtB,cAAAnB;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEasD,KAAoBC,EAAKC,EAAWtC,CAA0B,CAAC;"}

package/dist/features/circle-games/game-launcher/comps/tables-card/constants.js

@@ -0,0 +1,20 @@
+const _ = {
+  REVEAL: [0, 15],
+  REVEAL_CONTENT: [8, 15],
+  DISAPPEAR_CONTENT: [21, 29],
+  DISAPPEAR: [21, 35]
+}, A = {
+  random: "BLUE_4",
+  sequence: "YELLOW_4",
+  advance: "PURPLE_4"
+}, E = 50, L = E + 1, N = 100, I = 1, O = 2;
+export {
+  O as ABSOLUTE_VIEW_Z_INDEX,
+  L as INFINITE_MODE_Z_INDEX,
+  E as TABLE_CARD_SHADOW_Z_INDEX,
+  N as TABLE_MODE_CONTAINER_Z_INDEX,
+  A as TABLE_MODE_LABEL_COLOR,
+  I as TABLE_MODE_OVERLAY_Z_INDEX,
+  _ as TABLE_REVEAL_ANIMATION
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/circle-games/game-launcher/comps/tables-card/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/tables-card/constants.ts"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type { TTableMode } from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { AnimationSegment } from 'lottie-web';\n\nexport const TABLE_REVEAL_ANIMATION = {\n  REVEAL: [0, 15] as AnimationSegment,\n  REVEAL_CONTENT: [8, 15] as AnimationSegment,\n  DISAPPEAR_CONTENT: [21, 29] as AnimationSegment,\n  DISAPPEAR: [21, 35] as AnimationSegment,\n};\n\nexport const TABLE_MODE_LABEL_COLOR: Partial<Record<TTableMode, TColorNames>> = {\n  random: 'BLUE_4',\n  sequence: 'YELLOW_4',\n  advance: 'PURPLE_4',\n};\n\n// z-index 1 to 20 are for table number arc segments\nexport const TABLE_CARD_SHADOW_Z_INDEX = 50;\nexport const INFINITE_MODE_Z_INDEX = TABLE_CARD_SHADOW_Z_INDEX + 1;\nexport const TABLE_MODE_CONTAINER_Z_INDEX = 100;\n\n// table modes\nexport const TABLE_MODE_OVERLAY_Z_INDEX = 1;\nexport const ABSOLUTE_VIEW_Z_INDEX = 2;\n"],"names":["TABLE_REVEAL_ANIMATION","TABLE_MODE_LABEL_COLOR","TABLE_CARD_SHADOW_Z_INDEX","INFINITE_MODE_Z_INDEX","TABLE_MODE_CONTAINER_Z_INDEX","TABLE_MODE_OVERLAY_Z_INDEX","ABSOLUTE_VIEW_Z_INDEX"],"mappings":"AAIO,MAAMA,IAAyB;AAAA,EACpC,QAAQ,CAAC,GAAG,EAAE;AAAA,EACd,gBAAgB,CAAC,GAAG,EAAE;AAAA,EACtB,mBAAmB,CAAC,IAAI,EAAE;AAAA,EAC1B,WAAW,CAAC,IAAI,EAAE;AACpB,GAEaC,IAAmE;AAAA,EAC9E,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACX,GAGaC,IAA4B,IAC5BC,IAAwBD,IAA4B,GACpDE,IAA+B,KAG/BC,IAA6B,GAC7BC,IAAwB;"}

package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js

@@ -0,0 +1,24 @@
+import e from "styled-components";
+import { GAME_LAUNCHER_SIZE as t } from "../../card-container/constants.js";
+const n = e.div`
+  border: 1px solid ${({ theme: o }) => o.colors.WHITE};
+  border-right-width: ${({ $isBorderRightRequired: o }) => o ? "1px" : "0px"};
+  height: ${t * 8.1 / 100}px;
+  width: ${t * 8.1 / 100}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme: o }) => o.colors.BLACK_1};
+  position: relative;
+`, d = e.div`
+  position: absolute;
+  height: auto;
+  width: ${t * 8.1 / 100}px;
+  right: ${({ $right: o = "0px" }) => o};
+  bottom: ${({ $bottom: o = "unset" }) => o};
+`;
+export {
+  n as ModeContentSquareBlock,
+  d as TableModeLottieContainer
+};
+//# sourceMappingURL=table-mode-styled.js.map

package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-mode-styled.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../card-container/constants';\n\nexport const ModeContentSquareBlock = styled.div<{ $isBorderRightRequired?: boolean }>`\n  border: 1px solid ${({ theme }) => theme.colors.WHITE};\n  border-right-width: ${({ $isBorderRightRequired }) => ($isBorderRightRequired ? '1px' : '0px')};\n  height: ${(GAME_LAUNCHER_SIZE * 8.1) / 100}px;\n  width: ${(GAME_LAUNCHER_SIZE * 8.1) / 100}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ${({ theme }) => theme.colors.BLACK_1};\n  position: relative;\n`;\n\nexport const TableModeLottieContainer = styled.div<{ $bottom?: string; $right?: string }>`\n  position: absolute;\n  height: auto;\n  width: ${(GAME_LAUNCHER_SIZE * 8.1) / 100}px;\n  right: ${({ $right = '0px' }) => $right};\n  bottom: ${({ $bottom = 'unset' }) => $bottom};\n`;\n"],"names":["ModeContentSquareBlock","styled","theme","$isBorderRightRequired","GAME_LAUNCHER_SIZE","TableModeLottieContainer","$right","$bottom"],"mappings":";;AAIO,MAAMA,IAAyBC,EAAO;AAAA,sBACvB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,wBAC/B,CAAC,EAAE,wBAAAC,EAAA,MAA8BA,IAAyB,QAAQ,KAAM;AAAA,YACnFC,IAAqB,MAAO,GAAG;AAAA,WAChCA,IAAqB,MAAO,GAAG;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAI5CG,IAA2BJ,EAAO;AAAA;AAAA;AAAA,WAGnCG,IAAqB,MAAO,GAAG;AAAA,WAChC,CAAC,EAAE,QAAAE,IAAS,MAAA,MAAYA,CAAM;AAAA,YAC7B,CAAC,EAAE,SAAAC,IAAU,QAAA,MAAcA,CAAO;AAAA;"}

package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js

@@ -0,0 +1,83 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import L from "lottie-web";
+import { memo as h, useRef as D, useEffect as p } from "react";
+import s from "../../../../../ui/layout/flex-view.js";
+import u from "../../../../../ui/separator/separator.js";
+import E from "../../../../../ui/text/text.js";
+import { GAME_LAUNCHER_SIZE as r, GAME_LAUNCHER_SIZE_LARGE as t } from "../../card-container/constants.js";
+import { ModeContentSquareBlock as l, TableModeLottieContainer as M } from "./table-mode-styled.js";
+const c = {
+  SEQUENCE_MODE: () => import("../../../../../../assets/lotties/circle/tables/sequence-mode-segment-lottie.json.js"),
+  RANDOM_MODE: () => import("../../../../../../assets/lotties/circle/tables/random-mode-segment-lottie.json.js"),
+  ADVANCE_MODE: () => import("../../../../../../assets/lotties/circle/tables/advance-mode-segment-lottie.json.js")
+}, N = h(({ tableNumber: f, isStarAchieved: A, type: o }) => {
+  const d = D(null);
+  return p(() => {
+    (async () => {
+      const n = {
+        sequence: c.SEQUENCE_MODE,
+        random: c.RANDOM_MODE,
+        advance: c.ADVANCE_MODE
+      }[o], i = await (n == null ? void 0 : n()), m = i == null ? void 0 : i.default;
+      m && L.loadAnimation({
+        container: d.current,
+        renderer: "svg",
+        loop: !0,
+        autoplay: !0,
+        animationData: m
+      });
+    })();
+  }, [o]), /* @__PURE__ */ a(s, { $alignItems: "center", children: [
+    /* @__PURE__ */ a(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: r === t ? 20 : 16,
+        height: r === t ? 20 : 16,
+        viewBox: "0 0 21 21",
+        fill: "none",
+        children: [
+          /* @__PURE__ */ e("circle", { cx: "10.1892", cy: "10.1895", r: "10", fill: "#007038" }),
+          /* @__PURE__ */ e(
+            "path",
+            {
+              d: "M10.1892 2.68945L7.98501 7.15564L3.05628 7.87183L6.62275 11.3483L5.78082 16.2571L10.1892 13.9395L14.5976 16.2571L13.7557 11.3483L17.3221 7.87183L12.3934 7.15564L10.1892 2.68945Z",
+              fill: A ? "#00E573" : "#D6D6D6"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(u, { height: r === t ? 22 : 16 }),
+    /* @__PURE__ */ a(s, { $flexDirection: "row", children: [
+      /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
+        E,
+        {
+          $renderAs: r === t ? "ac3-black" : "ab2-bold",
+          $color: "WHITE",
+          children: f
+        }
+      ) }),
+      /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
+        E,
+        {
+          $renderAs: r === t ? "ac3-black" : "ab2-bold",
+          $color: "WHITE",
+          children: "×"
+        }
+      ) }),
+      /* @__PURE__ */ e(l, { $isBorderRightRequired: o === "advance", children: /* @__PURE__ */ e(
+        M,
+        {
+          ref: d,
+          $bottom: o === "advance" ? "-1px" : "unset",
+          $right: o === "advance" ? "-1px" : "unset"
+        }
+      ) })
+    ] })
+  ] });
+});
+export {
+  N as default
+};
+//# sourceMappingURL=table-mode.js.map

package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-mode.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.tsx"],"sourcesContent":["import type { TTableMode } from '../../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITableModeProps } from './table-mode-types';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useEffect, useRef } from 'react';\n\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport Separator from '../../../../../ui/separator/separator';\nimport Text from '../../../../../ui/text/text';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../../card-container/constants';\nimport * as Styled from './table-mode-styled';\n\nconst LAZY_LOAD_LOTTIE = {\n  SEQUENCE_MODE: () =>\n    import('../../../../../../assets/lotties/circle/tables/sequence-mode-segment-lottie.json'),\n  RANDOM_MODE: () =>\n    import('../../../../../../assets/lotties/circle/tables/random-mode-segment-lottie.json'),\n  ADVANCE_MODE: () =>\n    import('../../../../../../assets/lotties/circle/tables/advance-mode-segment-lottie.json'),\n};\n\nconst TableMode: FC<ITableModeProps> = memo(({ tableNumber, isStarAchieved, type }) => {\n  const tableModeLottieRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const loadAndPlayAnimation = async () => {\n      const lottie: Partial<Record<TTableMode, () => Promise<{ default: unknown }>>> = {\n        sequence: LAZY_LOAD_LOTTIE.SEQUENCE_MODE,\n        random: LAZY_LOAD_LOTTIE.RANDOM_MODE,\n        advance: LAZY_LOAD_LOTTIE.ADVANCE_MODE,\n      };\n      const loadLottie = lottie[type];\n\n      const animationModule = await loadLottie?.();\n      const animationData = animationModule?.default;\n\n      if (animationData) {\n        Lottie.loadAnimation({\n          container: tableModeLottieRef.current as HTMLElement,\n          renderer: 'svg',\n          loop: true,\n          autoplay: true,\n          animationData,\n        });\n      }\n    };\n\n    loadAndPlayAnimation();\n  }, [type]);\n\n  return (\n    <FlexView $alignItems=\"center\">\n      {/* TODO: Need to change this svg usage (only for testing) */}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 20 : 16}\n        height={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 20 : 16}\n        viewBox=\"0 0 21 21\"\n        fill=\"none\"\n      >\n        <circle cx=\"10.1892\" cy=\"10.1895\" r=\"10\" fill={'#007038'} />\n        <path\n          d=\"M10.1892 2.68945L7.98501 7.15564L3.05628 7.87183L6.62275 11.3483L5.78082 16.2571L10.1892 13.9395L14.5976 16.2571L13.7557 11.3483L17.3221 7.87183L12.3934 7.15564L10.1892 2.68945Z\"\n          fill={isStarAchieved ? '#00E573' : '#D6D6D6'}\n        />\n      </svg>\n      <Separator height={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 22 : 16} />\n      <FlexView $flexDirection=\"row\">\n        <Styled.ModeContentSquareBlock>\n          <Text\n            $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n            $color=\"WHITE\"\n          >\n            {tableNumber}\n          </Text>\n        </Styled.ModeContentSquareBlock>\n        <Styled.ModeContentSquareBlock>\n          <Text\n            $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n            $color=\"WHITE\"\n          >\n            ×\n          </Text>\n        </Styled.ModeContentSquareBlock>\n        <Styled.ModeContentSquareBlock $isBorderRightRequired={type === 'advance'}>\n          <Styled.TableModeLottieContainer\n            ref={tableModeLottieRef}\n            $bottom={type === 'advance' ? '-1px' : 'unset'}\n            $right={type === 'advance' ? '-1px' : 'unset'}\n          />\n        </Styled.ModeContentSquareBlock>\n      </FlexView>\n    </FlexView>\n  );\n});\n\nexport default TableMode;\n"],"names":["LAZY_LOAD_LOTTIE","TableMode","memo","tableNumber","isStarAchieved","type","tableModeLottieRef","useRef","useEffect","loadLottie","animationModule","animationData","Lottie","jsxs","FlexView","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","jsx","Separator","Styled.ModeContentSquareBlock","Text","Styled.TableModeLottieContainer"],"mappings":";;;;;;;;AAaA,MAAMA,IAAmB;AAAA,EACvB,eAAe,MACb,OAAO,qFAAkF;AAAA,EAC3F,aAAa,MACX,OAAO,mFAAgF;AAAA,EACzF,cAAc,MACZ,OAAO,oFAAiF;AAC5F,GAEMC,IAAiCC,EAAK,CAAC,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,MAAAC,QAAW;AAC/E,QAAAC,IAAqBC,EAAuB,IAAI;AAEtD,SAAAC,EAAU,MAAM;AAuBO,KAtBQ,YAAY;AAMjC,YAAAC,IAL2E;AAAA,QAC/E,UAAUT,EAAiB;AAAA,QAC3B,QAAQA,EAAiB;AAAA,QACzB,SAASA,EAAiB;AAAA,MAAA,EAEFK,CAAI,GAExBK,IAAkB,OAAMD,KAAA,gBAAAA,MACxBE,IAAgBD,KAAA,gBAAAA,EAAiB;AAEvC,MAAIC,KACFC,EAAO,cAAc;AAAA,QACnB,WAAWN,EAAmB;AAAA,QAC9B,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,eAAAK;AAAA,MAAA,CACD;AAAA,IACH;EAGmB,GACpB,CAACN,CAAI,CAAC,GAGP,gBAAAQ,EAACC,GAAS,EAAA,aAAY,UAEpB,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAOE,MAAuBC,IAA2B,KAAK;AAAA,QAC9D,QAAQD,MAAuBC,IAA2B,KAAK;AAAA,QAC/D,SAAQ;AAAA,QACR,MAAK;AAAA,QAEL,UAAA;AAAA,UAAC,gBAAAC,EAAA,UAAA,EAAO,IAAG,WAAU,IAAG,WAAU,GAAE,MAAK,MAAM,UAAW,CAAA;AAAA,UAC1D,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAMb,IAAiB,YAAY;AAAA,YAAA;AAAA,UACrC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,sBACCc,GAAU,EAAA,QAAQH,MAAuBC,IAA2B,KAAK,IAAI;AAAA,IAC9E,gBAAAH,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,MAAC,gBAAAG,EAAAE,GAAA,EACC,UAAA,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,WAAWL,MAAuBC,IAA2B,cAAc;AAAA,UAC3E,QAAO;AAAA,UAEN,UAAAb;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACA,gBAAAc,EAACE,GAAA,EACC,UAAA,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,WAAWL,MAAuBC,IAA2B,cAAc;AAAA,UAC3E,QAAO;AAAA,UACR,UAAA;AAAA,QAAA;AAAA,MAAA,GAGH;AAAA,wBACCG,GAAA,EAA8B,wBAAwBd,MAAS,WAC9D,UAAA,gBAAAY;AAAA,QAACI;AAAAA,QAAA;AAAA,UACC,KAAKf;AAAA,UACL,SAASD,MAAS,YAAY,SAAS;AAAA,UACvC,QAAQA,MAAS,YAAY,SAAS;AAAA,QAAA;AAAA,MAAA,GAE1C;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js

@@ -0,0 +1,161 @@
+import o, { keyframes as c } from "styled-components";
+import l from "../../../../ui/layout/flex-view.js";
+import { GAME_LAUNCHER_SIZE as e, GAME_LAUNCHER_SIZE_LARGE as r } from "../card-container/constants.js";
+import { TABLE_CARD_SHADOW_Z_INDEX as p, TABLE_MODE_CONTAINER_Z_INDEX as h, TABLE_MODE_OVERLAY_Z_INDEX as E, ABSOLUTE_VIEW_Z_INDEX as f, INFINITE_MODE_Z_INDEX as g, TABLE_REVEAL_ANIMATION as n } from "./constants.js";
+const s = 2 * Math.PI * (e / 2), a = 30, _ = n.REVEAL_CONTENT[0] / a, $ = (n.REVEAL_CONTENT[1] - n.REVEAL_CONTENT[0]) / a, m = (n.DISAPPEAR_CONTENT[1] - n.DISAPPEAR_CONTENT[0]) / a, d = o.div`
+  position: relative;
+  height: inherit;
+  width: inherit;
+`, I = o(d)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, y = o.div`
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  top: 0;
+  left: 0;
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(13, 13, 13, 0.5) 0%,
+    rgba(13, 13, 13, 0) 100%
+  );
+  z-index: ${p};
+  pointer-events: none;
+`, v = o.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  flex: 1;
+  transform: rotate(${({ $angle: t }) => t}deg);
+  transform-origin: 0 50%;
+  width: 50%;
+  height: ${({ $totalSegments: t }) => s / t}px;
+  position: absolute;
+  left: ${e / 2}px;
+  top: ${({ $totalSegments: t }) => (e - s / t) / 2}px;
+  padding-right: ${e === r ? 19 : 13}px;
+  z-index: ${({ $zIndex: t }) => t || 1};
+  background-color: ${({ theme: t }) => t.colors.BLACK_1};
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  &:nth-child(2n) {
+    background-color: ${({ theme: t }) => t.colors.BLACK_3};
+  }
+  &::after {
+    content: '';
+    width: 100%;
+    height: 2px;
+    position: absolute;
+    background: ${({ theme: t }) => t.colors.BLACK_5};
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    transform-origin: left;
+    transform: rotate(${({ $totalSegments: t }) => 360 / (2 * t)}deg);
+    left: 0;
+    z-index: 1;
+  }
+  &:hover {
+    background-color: ${({ theme: t }) => t.colors.WHITE_T_60};
+    color: ${({ theme: t }) => t.colors.BLACK_1};
+    cursor: pointer;
+    &::after {
+      background: ${({ theme: t }) => t.colors.WHITE_5};
+    }
+  }
+`, C = o.div`
+  width: ${e === r ? 10 : 8}px;
+  height: ${e === r ? 10 : 8}px;
+  margin-left: ${e === r ? 12 : 8}px;
+  border-radius: 100%;
+  background-color: ${({ theme: t, $isStarAchieved: i }) => i ? t.colors.GREEN_6 : t.colors.BLACK_5};
+`, L = o(l)`
+  transform: rotate(${({ $angle: t }) => t}deg);
+  width: 16px;
+  height: 16px;
+  align-items: center;
+`, w = o.div`
+  position: absolute;
+  z-index: ${h};
+  height: inherit;
+  width: inherit;
+  top: 0;
+  left: 0;
+`, O = o(d)``, D = o.div`
+  cursor: pointer;
+  & svg {
+    color: ${({ theme: t }) => t.colors.WHITE};
+  }
+`, R = o.div`
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  height: ${81.08 * e / 100}px;
+  width: ${81.08 * e / 100}px;
+  border-radius: 100%;
+  transform: ${({ $top: t = "50%", $left: i = "50%" }) => `translate(${i}, ${t})`};
+  z-index: ${E};
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ $hoverColor: t }) => t};
+  }
+`, S = o.div`
+  position: absolute;
+  pointer-events: ${({ $isPointerEventsNone: t = !1 }) => t ? "none" : "auto"};
+  top: ${({ $top: t = 0, $valueInPx: i }) => i ? `${t}px` : `${t}%`};
+  left: ${({ $left: t = 0, $valueInPx: i }) => i ? `${t}px` : `${t}%`};
+  z-index: ${f};
+  transform: ${({ $alignCenter: t }) => t ? "translate(-50%, -50%)" : "none"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, A = () => c`
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+    `, u = () => c`
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+`, B = o.div`
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  animation: ${({ animation: t }) => t === "fade-in" ? A : u}
+    ${({ animation: t }) => t === "fade-in" ? $ : m}s
+    ${({ animation: t }) => t === "fade-in" ? _ : 0}s ease-in-out
+    forwards;
+`, k = o.div`
+  position: absolute;
+  height: 24.5%;
+  width: 24.5%;
+  z-index: ${g};
+  cursor: pointer;
+`;
+export {
+  S as AbsoluteView,
+  B as AnimatedView,
+  d as CardWrapper,
+  D as IconWrapper,
+  k as InfiniteButtonWrapper,
+  R as ModeOverlay,
+  w as TableModeContainer,
+  O as TableModeWrapper,
+  L as TableNumber,
+  v as TableSegment,
+  y as TableSegmentCardShadowContainer,
+  I as TableSegmentsWrapper,
+  C as TableStar
+};
+//# sourceMappingURL=tables-card-styled.js.map