@cuemath/leap 2.8.24-hg1 → 2.8.24-link1

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

@@ -1,11 +1,11 @@
-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 - _);
+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);
 export {
-  o as ASSET_CONTAINER_SIZE,
-  R as ASSET_OFFSET_X,
-  T as ASSET_OFFSET_Y,
+  n as ASSET_CONTAINER_SIZE,
+  o as ASSET_OFFSET_X,
+  R as ASSET_OFFSET_Y,
   t as GAME_LAUNCHER_ASSET_PADDING,
-  _ as GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,
+  A as GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,
+  E as GAME_LAUNCHER_SIZE,
   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":["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;"}
+{"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;"}

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

@@ -1,11 +1,30 @@
 import o from "styled-components";
-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";
+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";
 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 + d}px;
-  width: ${e + d}px;
+  height: ${e + a}px;
+  width: ${e + a}px;
   pointer-events: none;
 `, s = o.div`
   height: ${e}px;
@@ -18,24 +37,24 @@ const g = o.div`
   border: 2px solid ${({ theme: t }) => t.colors.WHITE};
   backdrop-filter: blur(0px);
   -webkit-backdrop-filter: blur(0px);
-`, h = o(s)`
+`, u = o(s)`
   transform-origin: bottom right;
   transform: rotate(-32deg) skew(-32deg);
   translate: -${e / 2}px -${e / 2}px;
   border-right-width: 1px;
-`, c = o(s)`
+`, $ = o(s)`
   transform-origin: bottom left;
   transform: rotate(32deg) skew(32deg);
   translate: ${e / 2}px -${e / 2}px;
   border-left-width: 1px;
-`, f = o(s)`
+`, w = o(s)`
   height: ${e / 2}px;
   width: ${e}px;
   bottom: 0;
   left: 0;
   z-index: 1;
   border: none;
-`, m = o.div`
+`, S = o.div`
   height: inherit;
   width: inherit;
   overflow: hidden;
@@ -43,16 +62,16 @@ const g = o.div`
   display: flex;
   justify-content: center;
   align-items: center;
-`, b = o.div`
+`, k = o.div`
   flex: 1;
   background: transparent;
-  height: ${e / 2 + p}px;
+  height: ${e / 2 + l}px;
   width: ${e}px;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  bottom: ${({ $segmentType: t = "bottom" }) => t === "bottom" ? "unset" : `-${p}px`};
+  bottom: ${({ $segmentType: t = "bottom" }) => t === "bottom" ? "unset" : `-${l}px`};
   transform-origin: ${({ $segmentType: t }) => {
   switch (t) {
     case "left":
@@ -73,11 +92,11 @@ const g = o.div`
       return "none";
   }
 }};
-`, $ = o.div`
+`, v = o.div`
   position: absolute;
-  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`};
+  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`};
   height: ${i}px;
   width: ${i}px;
   display: flex;
@@ -90,11 +109,11 @@ const g = o.div`
     background: ${({ theme: t }) => t.colors.WHITE_T_15};
     cursor: pointer;
   }
-`, u = o.div`
+`, E = o.div`
   position: absolute;
-  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`};
+  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`};
   height: ${i}px;
   width: ${i}px;
   z-index: 5;
@@ -104,19 +123,44 @@ const g = o.div`
   display: flex;
   align-items: center;
   justify-content: center;
-`, w = o.div`
+`, y = 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 {
-  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
+  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
 };
 //# 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 { 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;"}
+{"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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"}

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

@@ -1,11 +1,10 @@
-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";
+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";
 const T = ({
   segmentType: e,
   isCompleted: i,
@@ -13,13 +12,13 @@ const T = ({
   name: m,
   onMouseEnter: s
 }) => {
-  const d = u(null);
-  I(() => {
+  const c = f(null);
+  b(() => {
     let r = null;
     return (async () => {
-      const p = await G(l);
-      r = L.loadAnimation({
-        container: d.current,
+      const p = await j(l);
+      r = R.loadAnimation({
+        container: c.current,
         renderer: "canvas",
         loop: !0,
         autoplay: !0,
@@ -27,90 +26,89 @@ const T = ({
       });
     })(), () => r == null ? void 0 : r.destroy();
   }, [l]);
-  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 }) }) })
+  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 }) }) })
   ] }) });
-}, 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) => {
+}, 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) => {
     y(n);
-  }, []), _ = c(() => {
+  }, []), W = u(() => {
     y(i);
-  }, [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);
+  }, [i]), C = (n) => {
+    var o, a;
+    (a = (o = e[n]) == null ? void 0 : o.onPress) == null || a.call(o);
+  }, _ = u((n) => {
+    E(!0), $(n);
   }, []);
-  return F(d, () => ({
+  return w(c, () => ({
     labelRef: r,
-    segmentedCardWrapperRef: C,
-    startLabelAnimation: k
-  })), I(() => {
-    const n = L.loadAnimation({
-      container: f.current,
+    segmentedCardWrapperRef: g,
+    startLabelAnimation: _
+  })), b(() => {
+    const n = R.loadAnimation({
+      container: d.current,
       renderer: "canvas",
       autoplay: !1,
       loop: !1,
-      animationData: j
+      animationData: x
     });
     if (s <= 0)
       return;
-    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), () => {
+    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), () => {
       n.destroy();
     };
-  }, [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));
+  }, [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));
 export {
   T as SegmentContent,
-  re as SegmentedGameCard
+  se 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 { 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;"}
+{"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":";;;;;;;AAyBO,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,IAA0BxB,EAAuB,IAAI,GAErD,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,IAAiB,CAACC,MAAkB;;AACnC,KAAAC,KAAAC,IAAArB,EAAAmB,CAAK,MAAL,gBAAAE,EAAQ,YAAR,QAAAD,EAAA,KAAAC;AAAA,EAAkB,GAGnBC,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,yBAAAC;AAAA,IACA,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,EAACqC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAvC,EAACwC,GAAA,EAAwB,WAAU,YACjC,UAAA,gBAAAxC;AAAA,MAACyC;AAAAA,MAAA;AAAA,QACC,KAAK1B;AAAA,QACL,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAQK,IAAaE,IAAgBE,IAAqB,eAAe;AAAA,QACzE,YAAAJ;AAAA,QAEC,UAAAH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,sBACCyB,GAAA,EAA4B,KAAK1B,GAAyB,cAAAU,GACzD,UAAA;AAAA,MAAA,gBAAA1B,EAAC2C,GAAA,EAAuC,KAAKpD,EAAoB,CAAA;AAAA,MAEjE,gBAAAS,EAAC4C,GAAA,EAAmB,SAAS,MAAMjB,EAAe,CAAC,GACjD,UAAA,gBAAA3B;AAAA,QAACf;AAAA,QAAA;AAAA,UACC,aAAa;AAAA,UACb,MAAMwB,EAAK,CAAC,EAAG;AAAA,UACf,MAAMA,EAAK,CAAC,EAAG;AAAA,UACf,aAAaA,EAAK,CAAC,EAAG;AAAA,UACtB,cAAAnB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,MAGA,gBAAAU,EAAC6C,GAAA,EAAoB,SAAS,MAAMlB,EAAe,CAAC,GAClD,UAAA,gBAAA3B;AAAA,QAACf;AAAA,QAAA;AAAA,UACC,aAAa;AAAA,UACb,MAAMwB,EAAK,CAAC,EAAG;AAAA,UACf,MAAMA,EAAK,CAAC,EAAG;AAAA,UACf,aAAaA,EAAK,CAAC,EAAG;AAAA,UACtB,cAAAnB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,MAGA,gBAAAU,EAAC8C,GAAA,EAAqB,SAAS,MAAMnB,EAAe,CAAC,GACnD,UAAA,gBAAA3B;AAAA,QAACf;AAAA,QAAA;AAAA,UACC,aAAa;AAAA,UACb,MAAMwB,EAAK,CAAC,EAAG;AAAA,UACf,MAAMA,EAAK,CAAC,EAAG;AAAA,UACf,aAAaA,EAAK,CAAC,EAAG;AAAA,UACtB,cAAAnB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEayD,KAAoBC,EAAKC,EAAWzC,CAA0B,CAAC;"}

package/dist/features/circle-games/game-launcher/dal/use-get-circle-home-details-dal/use-get-circle-home-details-dal.js

@@ -1,17 +1,17 @@
-import { useState as p, useCallback as E, useEffect as R } from "react";
-import { useGetCircleHomeAPI as u } from "../../api/get-content-for-today/get-circle-home-api.js";
-import { ProjectType as s } from "../../../games/web-view/enums/project-type-enum.js";
+import { useState as E, useCallback as d, useEffect as p } from "react";
+import { useGetCircleHomeAPI as C } from "../../api/get-content-for-today/get-circle-home-api.js";
+import { ProjectType as i } from "../../../games/web-view/enums/project-type-enum.js";
 const O = (r, o, n) => {
-  const [m, l] = p(null), { data: a, get: c, isProcessed: i, ..._ } = u(), d = E(() => {
-    c("", {
+  const [c, _] = E(null), { data: a, get: m, isProcessed: e, ...l } = C(), R = d(() => {
+    m("", {
       user_id: r,
       country_code: o,
       grade: n
     });
-  }, [c, r, o, n]);
-  return R(() => {
-    let e = null;
-    i && a && (e = {
+  }, [m, r, o, n]);
+  return p(() => {
+    let s = null;
+    e && a && (s = {
       points: a.points,
       streakDays: a.streak_days,
       streakStatus: a.streak_status,
@@ -19,7 +19,7 @@ const O = (r, o, n) => {
       projects: {
         games: {
           label: a.projects.games.label,
-          type: s.GAME,
+          type: i.GAME,
           initialProgressValue: 0,
           data: a.projects.games.data.map((t) => ({
             id: t.id,
@@ -32,7 +32,7 @@ const O = (r, o, n) => {
         },
         puzzles: {
           label: a.projects.puzzles.label,
-          type: s.PUZZLE,
+          type: i.PUZZLE,
           initialProgressValue: 0,
           data: a.projects.puzzles.data.map((t) => ({
             id: t.id,
@@ -58,9 +58,9 @@ const O = (r, o, n) => {
         CIRCLE_STREAK_UPDATE_JOURNEY: a.coachmark_completion.CIRCLE_STREAK_UPDATE_JOURNEY,
         CIRCLE_TUTORIAL_JOURNEY: a.coachmark_completion.CIRCLE_TUTORIAL_JOURNEY
       }
-    }, a.projects.lessons && (e.projects.lessons = {
+    }, a.projects.lessons && (s.projects.lessons = {
       label: a.projects.lessons.label,
-      type: s.LESSON,
+      type: i.LESSON,
       initialProgressValue: 0,
       data: a.projects.lessons.data.map((t) => ({
         id: t.id,
@@ -73,18 +73,8 @@ const O = (r, o, n) => {
         targetQuestions: t.target_questions,
         status: t.status
       }))
-    }), a.projects.tables && (e.projects.tables = {
-      label: a.projects.tables.label,
-      type: s.LESSON,
-      data: {
-        infiniteModeHighScore: a.projects.tables.data.infinite_mode_high_score,
-        tableList: a.projects.tables.data.table_wise_details.map((t) => ({
-          tableNumber: t.table_number,
-          stars: t.stars
-        }))
-      }
-    })), l(e);
-  }, [a, i]), { data: m, isProcessed: i, getCircleHomeDetails: d, ..._ };
+    })), _(s);
+  }, [a, e]), { data: c, isProcessed: e, getCircleHomeDetails: R, ...l };
 };
 export {
   O as useGetCircleHomeDetailsDal

package/dist/features/circle-games/game-launcher/dal/use-get-circle-home-details-dal/use-get-circle-home-details-dal.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-get-circle-home-details-dal.js","sources":["../../../../../../src/features/circle-games/game-launcher/dal/use-get-circle-home-details-dal/use-get-circle-home-details-dal.ts"],"sourcesContent":["import type {\n  ICircleHomeDetails,\n  TStreakStatus,\n  TTableMode,\n} from './use-get-circle-home-dal-types';\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { ProjectType } from '../../../games/web-view/enums';\nimport { useGetCircleHomeAPI } from '../../api/get-content-for-today/get-circle-home-api';\n\nexport const useGetCircleHomeDetailsDal = (\n  userId: string,\n  countryCode: string,\n  grade: string,\n): Omit<ReturnType<typeof useGetCircleHomeAPI>, 'data' | 'get'> & {\n  data: ICircleHomeDetails | null;\n  getCircleHomeDetails: () => void;\n} => {\n  const [contentForToday, setContentForToday] = useState<ICircleHomeDetails | null>(null);\n  const { data, get: getHomeDetails, isProcessed, ...rest } = useGetCircleHomeAPI();\n\n  const getCircleHomeDetails = useCallback(() => {\n    getHomeDetails('', {\n      user_id: userId,\n      country_code: countryCode,\n      grade: grade,\n    });\n  }, [getHomeDetails, userId, countryCode, grade]);\n\n  useEffect(() => {\n    let circleHomeDetails: ICircleHomeDetails | null = null;\n\n    if (isProcessed && data) {\n      circleHomeDetails = {\n        points: data.points,\n        streakDays: data.streak_days,\n        streakStatus: data.streak_status as TStreakStatus,\n        tournamentRank: data.tournament_rank,\n        projects: {\n          games: {\n            label: data.projects.games.label,\n            type: ProjectType.GAME,\n            initialProgressValue: 0,\n            data: data.projects.games.data.map(game => ({\n              id: game.id,\n              name: game.name,\n              cardLottie: game.card,\n              tutorial: game.tutorial,\n              variant: game.variant,\n              isPlayed: game.played,\n            })),\n          },\n          puzzles: {\n            label: data.projects.puzzles.label,\n            type: ProjectType.PUZZLE,\n            initialProgressValue: 0,\n            data: data.projects.puzzles.data.map(puzzle => ({\n              id: puzzle.id,\n              name: puzzle.name,\n              cardLottie: puzzle.card,\n              tutorial: puzzle.tutorial,\n              variant: puzzle.variant,\n              question: puzzle.question,\n              isHintSeen: puzzle.is_hint_seen,\n              solved: puzzle.solved,\n            })),\n          },\n        },\n        timestamps: {\n          startTimestamp: data.timestamps.start_timestamp,\n          endTimestamp: data.timestamps.end_timestamp,\n          current: data.timestamps.current,\n        },\n        coachmarkProgress: {\n          CIRCLE_ACTIVITIES_INTRO_JOURNEY:\n            data.coachmark_completion.CIRCLE_ACTIVITIES_INTRO_JOURNEY,\n          CIRCLE_LEADERBOARD_INTRO_JOURNEY:\n            data.coachmark_completion.CIRCLE_LEADERBOARD_INTRO_JOURNEY,\n          CIRCLE_POINTS_REWARD_JOURNEY: data.coachmark_completion.CIRCLE_POINTS_REWARD_JOURNEY,\n          CIRCLE_STREAK_UPDATE_JOURNEY: data.coachmark_completion.CIRCLE_STREAK_UPDATE_JOURNEY,\n          CIRCLE_TUTORIAL_JOURNEY: data.coachmark_completion.CIRCLE_TUTORIAL_JOURNEY,\n        },\n      };\n\n      if (data.projects.lessons) {\n        circleHomeDetails.projects.lessons = {\n          label: data.projects.lessons.label,\n          type: ProjectType.LESSON,\n          initialProgressValue: 0,\n          data: data.projects.lessons.data.map(lesson => ({\n            id: lesson.id,\n            name: lesson.name,\n            cardLottie: lesson.card,\n            tutorial: lesson.tutorial,\n            variant: lesson.variant,\n            sessionId: lesson.session_id,\n            miniGameIdentifier: lesson.mini_game_identifier,\n            targetQuestions: lesson.target_questions,\n            status: lesson.status,\n          })),\n        };\n      }\n\n      if (data.projects.tables) {\n        circleHomeDetails.projects.tables = {\n          label: data.projects.tables.label,\n          type: ProjectType.LESSON,\n          data: {\n            infiniteModeHighScore: data.projects.tables.data.infinite_mode_high_score,\n            tableList: data.projects.tables.data.table_wise_details.map(table => ({\n              tableNumber: table.table_number,\n              stars: table.stars as TTableMode[],\n            })),\n          },\n        };\n      }\n    }\n    setContentForToday(circleHomeDetails);\n  }, [data, isProcessed]);\n\n  return { data: contentForToday, isProcessed, getCircleHomeDetails, ...rest };\n};\n"],"names":["useGetCircleHomeDetailsDal","userId","countryCode","grade","contentForToday","setContentForToday","useState","data","getHomeDetails","isProcessed","rest","useGetCircleHomeAPI","getCircleHomeDetails","useCallback","useEffect","circleHomeDetails","ProjectType","game","puzzle","lesson","table"],"mappings":"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"}
+{"version":3,"file":"use-get-circle-home-details-dal.js","sources":["../../../../../../src/features/circle-games/game-launcher/dal/use-get-circle-home-details-dal/use-get-circle-home-details-dal.ts"],"sourcesContent":["import type { ICircleHomeDetails, TStreakStatus } from './use-get-circle-home-dal-types';\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { ProjectType } from '../../../games/web-view/enums';\nimport { useGetCircleHomeAPI } from '../../api/get-content-for-today/get-circle-home-api';\n\nexport const useGetCircleHomeDetailsDal = (\n  userId: string,\n  countryCode: string,\n  grade: string,\n): Omit<ReturnType<typeof useGetCircleHomeAPI>, 'data' | 'get'> & {\n  data: ICircleHomeDetails | null;\n  getCircleHomeDetails: () => void;\n} => {\n  const [contentForToday, setContentForToday] = useState<ICircleHomeDetails | null>(null);\n  const { data, get: getHomeDetails, isProcessed, ...rest } = useGetCircleHomeAPI();\n\n  const getCircleHomeDetails = useCallback(() => {\n    getHomeDetails('', {\n      user_id: userId,\n      country_code: countryCode,\n      grade: grade,\n    });\n  }, [getHomeDetails, userId, countryCode, grade]);\n\n  useEffect(() => {\n    let circleHomeDetails: ICircleHomeDetails | null = null;\n\n    if (isProcessed && data) {\n      circleHomeDetails = {\n        points: data.points,\n        streakDays: data.streak_days,\n        streakStatus: data.streak_status as TStreakStatus,\n        tournamentRank: data.tournament_rank,\n        projects: {\n          games: {\n            label: data.projects.games.label,\n            type: ProjectType.GAME,\n            initialProgressValue: 0,\n            data: data.projects.games.data.map(game => ({\n              id: game.id,\n              name: game.name,\n              cardLottie: game.card,\n              tutorial: game.tutorial,\n              variant: game.variant,\n              isPlayed: game.played,\n            })),\n          },\n          puzzles: {\n            label: data.projects.puzzles.label,\n            type: ProjectType.PUZZLE,\n            initialProgressValue: 0,\n            data: data.projects.puzzles.data.map(puzzle => ({\n              id: puzzle.id,\n              name: puzzle.name,\n              cardLottie: puzzle.card,\n              tutorial: puzzle.tutorial,\n              variant: puzzle.variant,\n              question: puzzle.question,\n              isHintSeen: puzzle.is_hint_seen,\n              solved: puzzle.solved,\n            })),\n          },\n        },\n        timestamps: {\n          startTimestamp: data.timestamps.start_timestamp,\n          endTimestamp: data.timestamps.end_timestamp,\n          current: data.timestamps.current,\n        },\n        coachmarkProgress: {\n          CIRCLE_ACTIVITIES_INTRO_JOURNEY:\n            data.coachmark_completion.CIRCLE_ACTIVITIES_INTRO_JOURNEY,\n          CIRCLE_LEADERBOARD_INTRO_JOURNEY:\n            data.coachmark_completion.CIRCLE_LEADERBOARD_INTRO_JOURNEY,\n          CIRCLE_POINTS_REWARD_JOURNEY: data.coachmark_completion.CIRCLE_POINTS_REWARD_JOURNEY,\n          CIRCLE_STREAK_UPDATE_JOURNEY: data.coachmark_completion.CIRCLE_STREAK_UPDATE_JOURNEY,\n          CIRCLE_TUTORIAL_JOURNEY: data.coachmark_completion.CIRCLE_TUTORIAL_JOURNEY,\n        },\n      };\n\n      if (data.projects.lessons) {\n        circleHomeDetails.projects.lessons = {\n          label: data.projects.lessons.label,\n          type: ProjectType.LESSON,\n          initialProgressValue: 0,\n          data: data.projects.lessons.data.map(lesson => ({\n            id: lesson.id,\n            name: lesson.name,\n            cardLottie: lesson.card,\n            tutorial: lesson.tutorial,\n            variant: lesson.variant,\n            sessionId: lesson.session_id,\n            miniGameIdentifier: lesson.mini_game_identifier,\n            targetQuestions: lesson.target_questions,\n            status: lesson.status,\n          })),\n        };\n      }\n    }\n    setContentForToday(circleHomeDetails);\n  }, [data, isProcessed]);\n\n  return { data: contentForToday, isProcessed, getCircleHomeDetails, ...rest };\n};\n"],"names":["useGetCircleHomeDetailsDal","userId","countryCode","grade","contentForToday","setContentForToday","useState","data","getHomeDetails","isProcessed","rest","useGetCircleHomeAPI","getCircleHomeDetails","useCallback","useEffect","circleHomeDetails","ProjectType","game","puzzle","lesson"],"mappings":";;;AAOO,MAAMA,IAA6B,CACxCC,GACAC,GACAC,MAIG;AACH,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAoC,IAAI,GAChF,EAAE,MAAAC,GAAM,KAAKC,GAAgB,aAAAC,GAAa,GAAGC,EAAA,IAASC,KAEtDC,IAAuBC,EAAY,MAAM;AAC7C,IAAAL,EAAe,IAAI;AAAA,MACjB,SAASP;AAAA,MACT,cAAcC;AAAA,MACd,OAAAC;AAAA,IAAA,CACD;AAAA,KACA,CAACK,GAAgBP,GAAQC,GAAaC,CAAK,CAAC;AAE/C,SAAAW,EAAU,MAAM;AACd,QAAIC,IAA+C;AAEnD,IAAIN,KAAeF,MACGQ,IAAA;AAAA,MAClB,QAAQR,EAAK;AAAA,MACb,YAAYA,EAAK;AAAA,MACjB,cAAcA,EAAK;AAAA,MACnB,gBAAgBA,EAAK;AAAA,MACrB,UAAU;AAAA,QACR,OAAO;AAAA,UACL,OAAOA,EAAK,SAAS,MAAM;AAAA,UAC3B,MAAMS,EAAY;AAAA,UAClB,sBAAsB;AAAA,UACtB,MAAMT,EAAK,SAAS,MAAM,KAAK,IAAI,CAASU,OAAA;AAAA,YAC1C,IAAIA,EAAK;AAAA,YACT,MAAMA,EAAK;AAAA,YACX,YAAYA,EAAK;AAAA,YACjB,UAAUA,EAAK;AAAA,YACf,SAASA,EAAK;AAAA,YACd,UAAUA,EAAK;AAAA,UAAA,EACf;AAAA,QACJ;AAAA,QACA,SAAS;AAAA,UACP,OAAOV,EAAK,SAAS,QAAQ;AAAA,UAC7B,MAAMS,EAAY;AAAA,UAClB,sBAAsB;AAAA,UACtB,MAAMT,EAAK,SAAS,QAAQ,KAAK,IAAI,CAAWW,OAAA;AAAA,YAC9C,IAAIA,EAAO;AAAA,YACX,MAAMA,EAAO;AAAA,YACb,YAAYA,EAAO;AAAA,YACnB,UAAUA,EAAO;AAAA,YACjB,SAASA,EAAO;AAAA,YAChB,UAAUA,EAAO;AAAA,YACjB,YAAYA,EAAO;AAAA,YACnB,QAAQA,EAAO;AAAA,UAAA,EACf;AAAA,QACJ;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,gBAAgBX,EAAK,WAAW;AAAA,QAChC,cAAcA,EAAK,WAAW;AAAA,QAC9B,SAASA,EAAK,WAAW;AAAA,MAC3B;AAAA,MACA,mBAAmB;AAAA,QACjB,iCACEA,EAAK,qBAAqB;AAAA,QAC5B,kCACEA,EAAK,qBAAqB;AAAA,QAC5B,8BAA8BA,EAAK,qBAAqB;AAAA,QACxD,8BAA8BA,EAAK,qBAAqB;AAAA,QACxD,yBAAyBA,EAAK,qBAAqB;AAAA,MACrD;AAAA,IAAA,GAGEA,EAAK,SAAS,YAChBQ,EAAkB,SAAS,UAAU;AAAA,MACnC,OAAOR,EAAK,SAAS,QAAQ;AAAA,MAC7B,MAAMS,EAAY;AAAA,MAClB,sBAAsB;AAAA,MACtB,MAAMT,EAAK,SAAS,QAAQ,KAAK,IAAI,CAAWY,OAAA;AAAA,QAC9C,IAAIA,EAAO;AAAA,QACX,MAAMA,EAAO;AAAA,QACb,YAAYA,EAAO;AAAA,QACnB,UAAUA,EAAO;AAAA,QACjB,SAASA,EAAO;AAAA,QAChB,WAAWA,EAAO;AAAA,QAClB,oBAAoBA,EAAO;AAAA,QAC3B,iBAAiBA,EAAO;AAAA,QACxB,QAAQA,EAAO;AAAA,MAAA,EACf;AAAA,IAAA,KAIRd,EAAmBU,CAAiB;AAAA,EAAA,GACnC,CAACR,GAAME,CAAW,CAAC,GAEf,EAAE,MAAML,GAAiB,aAAAK,GAAa,sBAAAG,GAAsB,GAAGF;AACxE;"}

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

@@ -1,11 +1,10 @@
 import i from "styled-components";
-import { GAME_LAUNCHER_SIZE as o } from "./comps/card-container/constants.js";
-import { GAME_LAUNCHER_ASSET_PADDING as t } from "./comps/segmented-game-card/constants.js";
-const m = i.div`
-  height: ${o + t}px;
-  width: ${o + t}px;
+import { GAME_LAUNCHER_SIZE as t, GAME_LAUNCHER_ASSET_PADDING as o } from "./comps/segmented-game-card/constants.js";
+const r = i.div`
+  height: ${t + o}px;
+  width: ${t + o}px;
 `;
 export {
-  m as SleepyBoiLottyContainer
+  r as SleepyBoiLottyContainer
 };
 //# sourceMappingURL=game-launcher-styled.js.map