@cuemath/leap 2.8.23 → 2.8.24-hg1

package/dist/assets/lotties/circle/tables/table-mode-reveal.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-mode-reveal.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,53 @@
+import t from "styled-components";
+import o from "../../../../ui/layout/flex-view.js";
+import n from "../../../../ui/text/text.js";
+import { GAME_LAUNCHER_SIZE as i } from "./constants.js";
+const p = t.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+`, d = t(o)`
+  position: absolute;
+  top: -28px;
+  display: flex;
+  justify-content: center;
+`, f = t.div`
+  position: relative;
+  border-radius: ${i}px;
+  border: ${({ $strokeColor: e }) => e ? `2px solid ${e}` : "0 solid transparent"};
+  height: ${i}px;
+  width: ${i}px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  align-self: center;
+  backdrop-filter: blur(0px);
+  flex-shrink: 0;
+`, c = t(n)`
+  transition: color 0.5s ease-in-out;
+
+  ${({ $isAnimated: e }) => e && `
+      animation: zoomInOut 1s ease-in-out infinite;
+    `}
+
+  @keyframes zoomInOut {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+`;
+export {
+  c as AnimatedLabel,
+  f as CardContainer,
+  p as CardWrapper,
+  d as ExtendedFlexView
+};
+//# sourceMappingURL=card-container-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-container-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/card-container/card-container-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { GAME_LAUNCHER_SIZE } from './constants';\n\nexport const CardWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n`;\n\nexport const ExtendedFlexView = styled(FlexView)`\n  position: absolute;\n  top: -28px;\n  display: flex;\n  justify-content: center;\n`;\n\nexport const CardContainer = styled.div<{ $strokeColor?: TColorNames }>`\n  position: relative;\n  border-radius: ${GAME_LAUNCHER_SIZE}px;\n  border: ${({ $strokeColor }) =>\n    $strokeColor ? `2px solid ${$strokeColor}` : '0 solid transparent'};\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  flex-shrink: 0;\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":["CardWrapper","styled","ExtendedFlexView","FlexView","CardContainer","GAME_LAUNCHER_SIZE","$strokeColor","AnimatedLabel","Text","$isAnimated"],"mappings":";;;;AAQO,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMrBC,IAAmBD,EAAOE,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAOlCC,IAAgBH,EAAO;AAAA;AAAA,mBAEjBI,CAAkB;AAAA,YACzB,CAAC,EAAE,cAAAC,EAAa,MACxBA,IAAe,aAAaA,CAAY,KAAK,qBAAqB;AAAA,YAC1DD,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWhBE,IAAgBN,EAAOO,CAAI;AAAA;AAAA;AAAA,IAGpC,CAAC,EAAE,aAAAC,QACHA,KACA;AAAA;AAAA,KAEC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,24 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { memo as m, forwardRef as C } from "react";
+import { CardWrapper as f, ExtendedFlexView as p, AnimatedLabel as $, CardContainer as b } from "./card-container-styled.js";
+const x = (e, o) => {
+  const { children: n, strokeColor: a, label: t, isAnimated: i, labelRef: l, labelColor: d, ...s } = e;
+  return /* @__PURE__ */ c(f, { ...s, children: [
+    /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(
+      $,
+      {
+        ref: l,
+        $renderAs: "ac4-black",
+        $align: "center",
+        $color: d,
+        $isAnimated: i,
+        children: t
+      }
+    ) }),
+    /* @__PURE__ */ r(b, { ref: o, $strokeColor: a, children: n })
+  ] });
+}, j = m(C(x));
+export {
+  j as CardContainer
+};
+//# sourceMappingURL=card-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-container.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/card-container/card-container.tsx"],"sourcesContent":["import type { ICardContainerProps } from './card-container-types';\nimport type { ForwardRefRenderFunction } from 'react';\n\nimport { forwardRef, memo } from 'react';\n\nimport * as Styled from './card-container-styled';\n\nconst Container: ForwardRefRenderFunction<HTMLDivElement, ICardContainerProps> = (props, ref) => {\n  const { children, strokeColor, label, isAnimated, labelRef, labelColor, ...rest } = props;\n\n  return (\n    <Styled.CardWrapper {...rest}>\n      <Styled.ExtendedFlexView>\n        <Styled.AnimatedLabel\n          ref={labelRef}\n          $renderAs=\"ac4-black\"\n          $align=\"center\"\n          $color={labelColor}\n          $isAnimated={isAnimated}\n        >\n          {label}\n        </Styled.AnimatedLabel>\n      </Styled.ExtendedFlexView>\n      <Styled.CardContainer ref={ref} $strokeColor={strokeColor}>\n        {children}\n      </Styled.CardContainer>\n    </Styled.CardWrapper>\n  );\n};\n\nexport const CardContainer = memo(forwardRef(Container));\n"],"names":["Container","props","ref","children","strokeColor","label","isAnimated","labelRef","labelColor","rest","jsxs","Styled.CardWrapper","jsx","Styled.ExtendedFlexView","Styled.AnimatedLabel","Styled.CardContainer","CardContainer","memo","forwardRef"],"mappings":";;;AAOA,MAAMA,IAA2E,CAACC,GAAOC,MAAQ;AACzF,QAAA,EAAE,UAAAC,GAAU,aAAAC,GAAa,OAAAC,GAAO,YAAAC,GAAY,UAAAC,GAAU,YAAAC,GAAY,GAAGC,EAAS,IAAAR;AAEpF,SACG,gBAAAS,EAAAC,GAAA,EAAoB,GAAGF,GACtB,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EACC,UAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,KAAKP;AAAA,QACL,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAQC;AAAA,QACR,aAAaF;AAAA,QAEZ,UAAAD;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,sBACCU,GAAA,EAAqB,KAAAb,GAAU,cAAcE,GAC3C,UAAAD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ,GAEaa,IAAgBC,EAAKC,EAAWlB,CAAS,CAAC;"}

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

@@ -0,0 +1,7 @@
+const A = 296, _ = 400, E = window.innerHeight > 800 ? 400 : 296, L = E;
+export {
+  L as GAME_LAUNCHER_SIZE,
+  _ as GAME_LAUNCHER_SIZE_LARGE,
+  A as GAME_LAUNCHER_SIZE_SMALL
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/card-container/constants.ts"],"sourcesContent":["export const GAME_LAUNCHER_SIZE_SMALL = 296;\nexport const GAME_LAUNCHER_SIZE_LARGE = 400;\n\nconst CARD_CONTAINER_SIZE =\n  window.innerHeight > 800 ? GAME_LAUNCHER_SIZE_LARGE : GAME_LAUNCHER_SIZE_SMALL;\n\nexport const GAME_LAUNCHER_SIZE = CARD_CONTAINER_SIZE;\n"],"names":["GAME_LAUNCHER_SIZE_SMALL","GAME_LAUNCHER_SIZE_LARGE","CARD_CONTAINER_SIZE","GAME_LAUNCHER_SIZE"],"mappings":"AAAO,MAAMA,IAA2B,KAC3BC,IAA2B,KAElCC,IACJ,OAAO,cAAc,MAAM,MAA2B,KAE3CC,IAAqBD;"}

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

@@ -1,11 +1,11 @@
-const _ = window.innerHeight > 800 ? 400 : 296, E = _, t = E * 17.5 / 100, A = 5, n = Math.ceil(E * 87.5 / 100), o = E / 2 * (37.5 / 100), R = E / 2 * (12.5 / 100), S = Math.PI / 180, c = Math.sin(30 * S) * (E / 2 - A);
+import { GAME_LAUNCHER_SIZE as E } from "../card-container/constants.js";
+const t = E * 17.5 / 100, _ = 5, o = Math.ceil(E * 87.5 / 100), R = E / 2 * (37.5 / 100), T = E / 2 * (12.5 / 100), S = Math.PI / 180, c = Math.sin(30 * S) * (E / 2 - _);
 export {
-  n as ASSET_CONTAINER_SIZE,
-  o as ASSET_OFFSET_X,
-  R as ASSET_OFFSET_Y,
+  o as ASSET_CONTAINER_SIZE,
+  R as ASSET_OFFSET_X,
+  T as ASSET_OFFSET_Y,
   t as GAME_LAUNCHER_ASSET_PADDING,
-  A as GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,
-  E as GAME_LAUNCHER_SIZE,
+  _ as GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,
   c as delta
 };
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/constants.ts"],"sourcesContent":["const CARD_CONTAINER_SIZE = window.innerHeight > 800 ? 400 : 296;\n\nexport const GAME_LAUNCHER_SIZE = CARD_CONTAINER_SIZE;\nexport const GAME_LAUNCHER_ASSET_PADDING = (GAME_LAUNCHER_SIZE * 17.5) / 100;\n\n// to show the stroke of the card below points, this width needs to be reduced\nexport const GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH = 5;\n\n// asset container needs to be 350/400 % of GAME LAUNCHER SIZE\nexport const ASSET_CONTAINER_SIZE = Math.ceil((GAME_LAUNCHER_SIZE * 87.5) / 100);\n\n// ASSET x-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_X = (GAME_LAUNCHER_SIZE / 2) * (37.5 / 100);\n\n// ASSET y-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_Y = (GAME_LAUNCHER_SIZE / 2) * (12.5 / 100);\n\nconst RADIAN = Math.PI / 180;\n// const BORDER_WIDTH = 2;\n\n// delta created by a segment from x axis is 30deg\n// sin30 = delta/(CARD_SIZE/2)\nexport const delta =\n  Math.sin(30 * RADIAN) * (GAME_LAUNCHER_SIZE / 2 - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH);\n"],"names":["CARD_CONTAINER_SIZE","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","ASSET_CONTAINER_SIZE","ASSET_OFFSET_X","ASSET_OFFSET_Y","RADIAN","delta"],"mappings":"AAAA,MAAMA,IAAsB,OAAO,cAAc,MAAM,MAAM,KAEhDC,IAAqBD,GACrBE,IAA+BD,IAAqB,OAAQ,KAG5DE,IAA2C,GAG3CC,IAAuB,KAAK,KAAMH,IAAqB,OAAQ,GAAG,GAGlEI,IAAkBJ,IAAqB,KAAM,OAAO,MAGpDK,IAAkBL,IAAqB,KAAM,OAAO,MAE3DM,IAAS,KAAK,KAAK,KAKZC,IACX,KAAK,IAAI,KAAKD,CAAM,KAAKN,IAAqB,IAAIE;"}
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/constants.ts"],"sourcesContent":["import { GAME_LAUNCHER_SIZE } from '../card-container/constants';\n\nexport const GAME_LAUNCHER_ASSET_PADDING = (GAME_LAUNCHER_SIZE * 17.5) / 100;\n\n// to show the stroke of the card below points, this width needs to be reduced\nexport const GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH = 5;\n\n// asset container needs to be 350/400 % of GAME LAUNCHER SIZE\nexport const ASSET_CONTAINER_SIZE = Math.ceil((GAME_LAUNCHER_SIZE * 87.5) / 100);\n\n// ASSET x-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_X = (GAME_LAUNCHER_SIZE / 2) * (37.5 / 100);\n\n// ASSET y-axis OFFSET needs to be 37.5 % of 1/2 of GAME LAUNCHER SIZE\nexport const ASSET_OFFSET_Y = (GAME_LAUNCHER_SIZE / 2) * (12.5 / 100);\n\nconst RADIAN = Math.PI / 180;\n// const BORDER_WIDTH = 2;\n\n// delta created by a segment from x axis is 30deg\n// sin30 = delta/(CARD_SIZE/2)\nexport const delta =\n  Math.sin(30 * RADIAN) * (GAME_LAUNCHER_SIZE / 2 - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH);\n"],"names":["GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","ASSET_CONTAINER_SIZE","ASSET_OFFSET_X","ASSET_OFFSET_Y","RADIAN","delta"],"mappings":";AAEa,MAAAA,IAA+BC,IAAqB,OAAQ,KAG5DC,IAA2C,GAG3CC,IAAuB,KAAK,KAAMF,IAAqB,OAAQ,GAAG,GAGlEG,IAAkBH,IAAqB,KAAM,OAAO,MAGpDI,IAAkBJ,IAAqB,KAAM,OAAO,MAE3DK,IAAS,KAAK,KAAK,KAKZC,IACX,KAAK,IAAI,KAAKD,CAAM,KAAKL,IAAqB,IAAIC;"}

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

@@ -1,30 +1,11 @@
 import o from "styled-components";
-import d from "../../../../ui/layout/flex-view.js";
-import p from "../../../../ui/text/text.js";
-import { GAME_LAUNCHER_SIZE as e, GAME_LAUNCHER_ASSET_PADDING as a, delta as l, ASSET_OFFSET_X as n, ASSET_OFFSET_Y as r, ASSET_CONTAINER_SIZE as i } from "./constants.js";
+import { GAME_LAUNCHER_SIZE as e } from "../card-container/constants.js";
+import { GAME_LAUNCHER_ASSET_PADDING as d, delta as p, ASSET_OFFSET_X as r, ASSET_OFFSET_Y as n, ASSET_CONTAINER_SIZE as i } from "./constants.js";
 const g = o.div`
-  position: relative;
-  display: flex;
-  justify-content: center;
-`, h = o.div`
-  position: relative;
-  border-radius: ${e}px;
-  height: ${e}px;
-  width: ${e}px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  align-self: center;
-  backdrop-filter: blur(0px);
-  -webkit-backdrop-filter: blur(0px);
-  flex-shrink: 0;
-`, b = o.div`
   position: absolute;
   z-index: 5;
-  height: ${e + a}px;
-  width: ${e + a}px;
+  height: ${e + d}px;
+  width: ${e + d}px;
   pointer-events: none;
 `, s = o.div`
   height: ${e}px;
@@ -37,24 +18,24 @@ const g = o.div`
   border: 2px solid ${({ theme: t }) => t.colors.WHITE};
   backdrop-filter: blur(0px);
   -webkit-backdrop-filter: blur(0px);
-`, u = o(s)`
+`, h = o(s)`
   transform-origin: bottom right;
   transform: rotate(-32deg) skew(-32deg);
   translate: -${e / 2}px -${e / 2}px;
   border-right-width: 1px;
-`, $ = o(s)`
+`, c = o(s)`
   transform-origin: bottom left;
   transform: rotate(32deg) skew(32deg);
   translate: ${e / 2}px -${e / 2}px;
   border-left-width: 1px;
-`, w = o(s)`
+`, f = o(s)`
   height: ${e / 2}px;
   width: ${e}px;
   bottom: 0;
   left: 0;
   z-index: 1;
   border: none;
-`, S = o.div`
+`, m = o.div`
   height: inherit;
   width: inherit;
   overflow: hidden;
@@ -62,16 +43,16 @@ const g = o.div`
   display: flex;
   justify-content: center;
   align-items: center;
-`, k = o.div`
+`, b = o.div`
   flex: 1;
   background: transparent;
-  height: ${e / 2 + l}px;
+  height: ${e / 2 + p}px;
   width: ${e}px;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  bottom: ${({ $segmentType: t = "bottom" }) => t === "bottom" ? "unset" : `-${l}px`};
+  bottom: ${({ $segmentType: t = "bottom" }) => t === "bottom" ? "unset" : `-${p}px`};
   transform-origin: ${({ $segmentType: t }) => {
   switch (t) {
     case "left":
@@ -92,11 +73,11 @@ const g = o.div`
       return "none";
   }
 }};
-`, v = o.div`
+`, $ = o.div`
   position: absolute;
-  right: ${({ $segmentType: t }) => t === "left" ? `-${n}px` : "unset"};
-  left: ${({ $segmentType: t }) => t === "right" ? `-${n}px` : "unset"};
-  bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${r}px` : `-${r}px`};
+  right: ${({ $segmentType: t }) => t === "left" ? `-${r}px` : "unset"};
+  left: ${({ $segmentType: t }) => t === "right" ? `-${r}px` : "unset"};
+  bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${n}px` : `-${n}px`};
   height: ${i}px;
   width: ${i}px;
   display: flex;
@@ -109,11 +90,11 @@ const g = o.div`
     background: ${({ theme: t }) => t.colors.WHITE_T_15};
     cursor: pointer;
   }
-`, E = o.div`
+`, u = o.div`
   position: absolute;
-  right: ${({ $segmentType: t }) => t === "left" ? `-${n}px` : "unset"};
-  left: ${({ $segmentType: t }) => t === "right" ? `-${n}px` : "unset"};
-  bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${r}px` : `-${r}px`};
+  right: ${({ $segmentType: t }) => t === "left" ? `-${r}px` : "unset"};
+  left: ${({ $segmentType: t }) => t === "right" ? `-${r}px` : "unset"};
+  bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${n}px` : `-${n}px`};
   height: ${i}px;
   width: ${i}px;
   z-index: 5;
@@ -123,44 +104,19 @@ const g = o.div`
   display: flex;
   align-items: center;
   justify-content: center;
-`, y = o.div`
+`, w = o.div`
   position: absolute;
   z-index: 6;
-`, _ = o(d)`
-  z-index: 1;
-  top: -28px;
-`, A = o(p)`
-  transition: color 0.5s ease-in-out;
-
-  ${({ isAnimated: t }) => t && `
-      animation: zoomInOut 1s ease-in-out infinite;
-    `}
-
-  @keyframes zoomInOut {
-    0% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    100% {
-      transform: scale(1);
-    }
-  }
 `;
 export {
-  A as AnimatedLabel,
-  b as CircularProgressLottieContainer,
-  _ as ExtendedFlexView,
-  y as IconWrapper,
-  v as SegmentAssetContainer,
-  w as SegmentBottom,
-  S as SegmentContainer,
-  k as SegmentContentContainer,
-  u as SegmentLeft,
-  E as SegmentOverlay,
-  $ as SegmentRight,
-  g as SegmentedCard,
-  h as SegmentedCardWrapper
+  g as CircularProgressLottieContainer,
+  w as IconWrapper,
+  $ as SegmentAssetContainer,
+  f as SegmentBottom,
+  m as SegmentContainer,
+  b as SegmentContentContainer,
+  h as SegmentLeft,
+  u as SegmentOverlay,
+  c as SegmentRight
 };
 //# sourceMappingURL=segmented-game-card-styled.js.map

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":"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"}