@cuemath/leap 3.0.8 → 3.0.10-aa0

package/dist/assets/line-icons/icons/hw.js

@@ -0,0 +1,32 @@
+import { jsxs as o, jsx as H } from "react/jsx-runtime";
+const l = (t) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "10",
+    height: "5",
+    viewBox: "0 0 10 5",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: [
+      /* @__PURE__ */ H(
+        "path",
+        {
+          d: "M0.416504 4.50065H1.24984V2.76851H3.14865V4.50065H3.98198V0.333984H3.14865V1.97089H1.24984V0.333984H0.416504V4.50065Z",
+          fill: "#2B2B2B"
+        }
+      ),
+      /* @__PURE__ */ H(
+        "path",
+        {
+          d: "M4.3634 0.333984L5.43483 4.50065H6.42887L7.14911 1.70303L7.8634 4.50065H8.85745L9.92887 0.333984H9.07768L8.35745 3.2566L7.59554 0.333984H6.69673L5.94078 3.23279L5.21459 0.333984H4.3634Z",
+          fill: "#2B2B2B"
+        }
+      )
+    ]
+  }
+), s = l;
+export {
+  s as default
+};
+//# sourceMappingURL=hw.js.map

package/dist/assets/line-icons/icons/hw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hw.js","sources":["../../../../src/assets/line-icons/icons/hw.tsx"],"sourcesContent":["import React from 'react';\n\nconst HWIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => {\n  return (\n    <svg\n      width=\"10\"\n      height=\"5\"\n      viewBox=\"0 0 10 5\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        d=\"M0.416504 4.50065H1.24984V2.76851H3.14865V4.50065H3.98198V0.333984H3.14865V1.97089H1.24984V0.333984H0.416504V4.50065Z\"\n        fill=\"#2B2B2B\"\n      />\n      <path\n        d=\"M4.3634 0.333984L5.43483 4.50065H6.42887L7.14911 1.70303L7.8634 4.50065H8.85745L9.92887 0.333984H9.07768L8.35745 3.2566L7.59554 0.333984H6.69673L5.94078 3.23279L5.21459 0.333984H4.3634Z\"\n        fill=\"#2B2B2B\"\n      />\n    </svg>\n  );\n};\n\nexport default HWIcon;\n"],"names":["HWIcon","props","jsxs","jsx","HWIcon$1"],"mappings":";AAEA,MAAMA,IAAkD,CAASC,MAE7D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IACL,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MACP;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAAA,GAKNC,IAAeJ;"}

package/dist/features/analytics-events/platform-events-student.js

@@ -1,5 +1,5 @@
 import { PLUGINS as t } from "../../node_modules/@cuemath/analytics-v2/dist/constants.js";
-var i = /* @__PURE__ */ ((e) => (e.PAGE_VIEWED = "page_viewed", e.CUSTOM_TEST_SUBMITTED = "custom_test_submitted", e.HOMEWORK_COMPLETED = "homework_completed", e.ACTIVITY_STARTED = "activity_started", e.ACTIVITY_TUTORIAL_SEEN = "activity_tutorial_seen", e.STREAK_ICON_CLICKED = "streak_icon_clicked", e.LEADERBOARD_BUTTON_CLICKED = "leaderboard_button_clicked", e.ONBOARDING_STEP_VIEWED = "onboarding_step_viewed", e.ONBOARDING_STEP_COMPLETED = "onboarding_step_completed", e.COACHMARK_DISMISSED = "coachmark_dismissed", e))(i || {});
+var _ = /* @__PURE__ */ ((e) => (e.PAGE_VIEWED = "page_viewed", e.CUSTOM_TEST_SUBMITTED = "custom_test_submitted", e.HOMEWORK_COMPLETED = "homework_completed", e.ERROR_VIA_AUTO_LOGIN_FROM_CUEMATH_APP = "error_via_auto_login_from_cuemath_app", e.ACTIVITY_STARTED = "activity_started", e.ACTIVITY_TUTORIAL_SEEN = "activity_tutorial_seen", e.STREAK_ICON_CLICKED = "streak_icon_clicked", e.LEADERBOARD_BUTTON_CLICKED = "leaderboard_button_clicked", e.ONBOARDING_STEP_VIEWED = "onboarding_step_viewed", e.ONBOARDING_STEP_COMPLETED = "onboarding_step_completed", e.COACHMARK_DISMISSED = "coachmark_dismissed", e))(_ || {});
 const o = {
   page_viewed: [t.MIXPANEL],
   // circle on leap mixpanel events
@@ -12,7 +12,7 @@ const o = {
   coachmark_dismissed: [t.MIXPANEL]
 };
 export {
-  i as PLATFORM_EVENTS_STUDENT,
+  _ as PLATFORM_EVENTS_STUDENT,
   o as PLATFORM_WHITELIST_EVENTS_STUDENT
 };
 //# sourceMappingURL=platform-events-student.js.map

package/dist/features/analytics-events/platform-events-student.js.map

@@ -1 +1 @@
-{"version":3,"file":"platform-events-student.js","sources":["../../../src/features/analytics-events/platform-events-student.ts"],"sourcesContent":["import { PLUGINS } from '@cuemath/analytics-v2/dist/constants';\n\n/**\n ** Global/Platform specific events that needs to be tracked goes here\n ** Naming convention needs to be snake_case\n */\nexport enum PLATFORM_EVENTS_STUDENT {\n  PAGE_VIEWED = 'page_viewed',\n  CUSTOM_TEST_SUBMITTED = 'custom_test_submitted',\n  HOMEWORK_COMPLETED = 'homework_completed',\n\n  // circle on leap mixpanel events\n  ACTIVITY_STARTED = 'activity_started',\n  ACTIVITY_TUTORIAL_SEEN = 'activity_tutorial_seen',\n  STREAK_ICON_CLICKED = 'streak_icon_clicked',\n  LEADERBOARD_BUTTON_CLICKED = 'leaderboard_button_clicked',\n  ONBOARDING_STEP_VIEWED = 'onboarding_step_viewed',\n  ONBOARDING_STEP_COMPLETED = 'onboarding_step_completed',\n  COACHMARK_DISMISSED = 'coachmark_dismissed',\n}\n\n/**\n ** Events that need to be tracked at particular plugins\n ** Value will be array of strings.\n */\nexport const PLATFORM_WHITELIST_EVENTS_STUDENT = {\n  [PLATFORM_EVENTS_STUDENT.PAGE_VIEWED]: [PLUGINS.MIXPANEL],\n\n  // circle on leap mixpanel events\n  [PLATFORM_EVENTS_STUDENT.ACTIVITY_STARTED]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.ACTIVITY_TUTORIAL_SEEN]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.STREAK_ICON_CLICKED]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.LEADERBOARD_BUTTON_CLICKED]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.COACHMARK_DISMISSED]: [PLUGINS.MIXPANEL],\n};\n"],"names":["PLATFORM_EVENTS_STUDENT","PLATFORM_WHITELIST_EVENTS_STUDENT","PLUGINS"],"mappings":";AAMY,IAAAA,sBAAAA,OACVA,EAAA,cAAc,eACdA,EAAA,wBAAwB,yBACxBA,EAAA,qBAAqB,sBAGrBA,EAAA,mBAAmB,oBACnBA,EAAA,yBAAyB,0BACzBA,EAAA,sBAAsB,uBACtBA,EAAA,6BAA6B,8BAC7BA,EAAA,yBAAyB,0BACzBA,EAAA,4BAA4B,6BAC5BA,EAAA,sBAAsB,uBAZZA,IAAAA,KAAA,CAAA,CAAA;AAmBL,MAAMC,IAAoC;AAAA,EAC9C,aAAsC,CAACC,EAAQ,QAAQ;AAAA;AAAA,EAGvD,kBAA2C,CAACA,EAAQ,QAAQ;AAAA,EAC5D,wBAAiD,CAACA,EAAQ,QAAQ;AAAA,EAClE,qBAA8C,CAACA,EAAQ,QAAQ;AAAA,EAC/D,4BAAqD,CAACA,EAAQ,QAAQ;AAAA,EACtE,wBAAiD,CAACA,EAAQ,QAAQ;AAAA,EAClE,2BAAoD,CAACA,EAAQ,QAAQ;AAAA,EACrE,qBAA8C,CAACA,EAAQ,QAAQ;AAClE;"}
+{"version":3,"file":"platform-events-student.js","sources":["../../../src/features/analytics-events/platform-events-student.ts"],"sourcesContent":["import { PLUGINS } from '@cuemath/analytics-v2/dist/constants';\n\n/**\n ** Global/Platform specific events that needs to be tracked goes here\n ** Naming convention needs to be snake_case\n */\nexport enum PLATFORM_EVENTS_STUDENT {\n  PAGE_VIEWED = 'page_viewed',\n  CUSTOM_TEST_SUBMITTED = 'custom_test_submitted',\n  HOMEWORK_COMPLETED = 'homework_completed',\n  ERROR_VIA_AUTO_LOGIN_FROM_CUEMATH_APP = 'error_via_auto_login_from_cuemath_app',\n\n  // circle on leap mixpanel events\n  ACTIVITY_STARTED = 'activity_started',\n  ACTIVITY_TUTORIAL_SEEN = 'activity_tutorial_seen',\n  STREAK_ICON_CLICKED = 'streak_icon_clicked',\n  LEADERBOARD_BUTTON_CLICKED = 'leaderboard_button_clicked',\n  ONBOARDING_STEP_VIEWED = 'onboarding_step_viewed',\n  ONBOARDING_STEP_COMPLETED = 'onboarding_step_completed',\n  COACHMARK_DISMISSED = 'coachmark_dismissed',\n}\n\n/**\n ** Events that need to be tracked at particular plugins\n ** Value will be array of strings.\n */\nexport const PLATFORM_WHITELIST_EVENTS_STUDENT = {\n  [PLATFORM_EVENTS_STUDENT.PAGE_VIEWED]: [PLUGINS.MIXPANEL],\n\n  // circle on leap mixpanel events\n  [PLATFORM_EVENTS_STUDENT.ACTIVITY_STARTED]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.ACTIVITY_TUTORIAL_SEEN]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.STREAK_ICON_CLICKED]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.LEADERBOARD_BUTTON_CLICKED]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED]: [PLUGINS.MIXPANEL],\n  [PLATFORM_EVENTS_STUDENT.COACHMARK_DISMISSED]: [PLUGINS.MIXPANEL],\n};\n"],"names":["PLATFORM_EVENTS_STUDENT","PLATFORM_WHITELIST_EVENTS_STUDENT","PLUGINS"],"mappings":";AAMY,IAAAA,sBAAAA,OACVA,EAAA,cAAc,eACdA,EAAA,wBAAwB,yBACxBA,EAAA,qBAAqB,sBACrBA,EAAA,wCAAwC,yCAGxCA,EAAA,mBAAmB,oBACnBA,EAAA,yBAAyB,0BACzBA,EAAA,sBAAsB,uBACtBA,EAAA,6BAA6B,8BAC7BA,EAAA,yBAAyB,0BACzBA,EAAA,4BAA4B,6BAC5BA,EAAA,sBAAsB,uBAbZA,IAAAA,KAAA,CAAA,CAAA;AAoBL,MAAMC,IAAoC;AAAA,EAC9C,aAAsC,CAACC,EAAQ,QAAQ;AAAA;AAAA,EAGvD,kBAA2C,CAACA,EAAQ,QAAQ;AAAA,EAC5D,wBAAiD,CAACA,EAAQ,QAAQ;AAAA,EAClE,qBAA8C,CAACA,EAAQ,QAAQ;AAAA,EAC/D,4BAAqD,CAACA,EAAQ,QAAQ;AAAA,EACtE,wBAAiD,CAACA,EAAQ,QAAQ;AAAA,EAClE,2BAAoD,CAACA,EAAQ,QAAQ;AAAA,EACrE,qBAA8C,CAACA,EAAQ,QAAQ;AAClE;"}

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

@@ -1,11 +1,12 @@
 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 A = 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 = 2, n = Math.sin(30 * S) * (E / 2 - _);
 export {
   o as ASSET_CONTAINER_SIZE,
   R as ASSET_OFFSET_X,
   T as ASSET_OFFSET_Y,
-  t as GAME_LAUNCHER_ASSET_PADDING,
+  c as BORDER_WIDTH,
+  A as GAME_LAUNCHER_ASSET_PADDING,
   _ as GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,
-  c as delta
+  n 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":["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\nexport 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","BORDER_WIDTH","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,KAEZC,IAAe,GAIfC,IACX,KAAK,IAAI,KAAKF,CAAM,KAAKL,IAAqB,IAAIC;"}

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

@@ -1,13 +1,27 @@
 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 { BORDER_WIDTH as d, GAME_LAUNCHER_ASSET_PADDING as i, delta as a, ASSET_OFFSET_X as r, ASSET_OFFSET_Y as n, ASSET_CONTAINER_SIZE as s } from "./constants.js";
 const g = o.div`
   position: absolute;
   z-index: 5;
-  height: ${e + d}px;
-  width: ${e + d}px;
+  height: ${e}px;
+  width: ${e}px;
   pointer-events: none;
-`, s = o.div`
+`, f = o.div`
+  position: relative;
+  height: inherit;
+  width: inherit;
+  border-radius: 50%;
+  border: ${d}px solid #fff;
+`, c = o.div`
+  position: absolute;
+  height: ${e + i}px;
+  width: ${e + i}px;
+  border-radius: 50%;
+  top: ${-i / 2 - d}px;
+  left: ${-i / 2 - d}px;
+  z-index: 4;
+`, p = o.div`
   height: ${e}px;
   width: ${e}px;
   overflow: hidden;
@@ -18,24 +32,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)`
+`, $ = o(p)`
   transform-origin: bottom right;
   transform: rotate(-32deg) skew(-32deg);
   translate: -${e / 2}px -${e / 2}px;
   border-right-width: 1px;
-`, c = o(s)`
+`, b = o(p)`
   transform-origin: bottom left;
   transform: rotate(32deg) skew(32deg);
   translate: ${e / 2}px -${e / 2}px;
   border-left-width: 1px;
-`, f = o(s)`
+`, m = o(p)`
   height: ${e / 2}px;
   width: ${e}px;
   bottom: 0;
   left: 0;
   z-index: 1;
   border: none;
-`, m = o.div`
+`, u = o.div`
   height: inherit;
   width: inherit;
   overflow: hidden;
@@ -43,16 +57,16 @@ const g = o.div`
   display: flex;
   justify-content: center;
   align-items: center;
-`, b = o.div`
+`, w = o.div`
   flex: 1;
   background: transparent;
-  height: ${e / 2 + p}px;
+  height: ${e / 2 + a}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" : `-${a}px`};
   transform-origin: ${({ $segmentType: t }) => {
   switch (t) {
     case "left":
@@ -73,13 +87,13 @@ const g = o.div`
       return "none";
   }
 }};
-`, $ = o.div`
+`, S = 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`};
-  height: ${i}px;
-  width: ${i}px;
+  height: ${s}px;
+  width: ${s}px;
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -90,13 +104,13 @@ const g = o.div`
     background: ${({ theme: t }) => t.colors.WHITE_T_15};
     cursor: pointer;
   }
-`, u = 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`};
-  height: ${i}px;
-  width: ${i}px;
+  height: ${s}px;
+  width: ${s}px;
   z-index: 5;
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
@@ -104,19 +118,21 @@ const g = o.div`
   display: flex;
   align-items: center;
   justify-content: center;
-`, w = o.div`
+`, E = o.div`
   position: absolute;
   z-index: 6;
 `;
 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
+  E as IconWrapper,
+  c as LottieAnmationContainer,
+  f as RingContainer,
+  S as SegmentAssetContainer,
+  m as SegmentBottom,
+  u as SegmentContainer,
+  w as SegmentContentContainer,
+  $ as SegmentLeft,
+  v as SegmentOverlay,
+  b 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 { 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 { 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  BORDER_WIDTH,\n} from './constants';\n\nexport const CircularProgressLottieContainer = styled.div`\n  position: absolute;\n  z-index: 5;\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  pointer-events: none;\n`;\n\nexport const RingContainer = styled.div`\n  position: relative;\n  height: inherit;\n  width: inherit;\n  border-radius: 50%;\n  border: ${BORDER_WIDTH}px solid #fff;\n`;\n\nexport const LottieAnmationContainer = styled.div`\n  position: absolute;\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  border-radius: 50%;\n  top: ${-GAME_LAUNCHER_ASSET_PADDING / 2 - BORDER_WIDTH}px;\n  left: ${-GAME_LAUNCHER_ASSET_PADDING / 2 - BORDER_WIDTH}px;\n  z-index: 4;\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","RingContainer","BORDER_WIDTH","LottieAnmationContainer","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":"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"}

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

@@ -1,29 +1,29 @@
-import { jsx as n, jsxs as L } from "react/jsx-runtime";
-import { memo as P, useCallback as m, forwardRef as O, useRef as E, useState as f, useImperativeHandle as F, useMemo as A } from "react";
+import { jsx as e, jsxs as L } from "react/jsx-runtime";
+import { memo as R, useCallback as m, forwardRef as O, useRef as A, useState as C, useImperativeHandle as F, useMemo as E } from "react";
 import G from "../../../../../assets/line-icons/icons/check.js";
 import { LOTTIE as $ } from "../../../../../assets/lottie/lottie.js";
-import R from "../../../../ui/lottie-animation/lottie-animation.js";
+import P from "../../../../ui/lottie-animation/lottie-animation.js";
 import { CardContainer as j } from "../card-container/card-container.js";
-import { SegmentContainer as w, SegmentContentContainer as U, SegmentAssetContainer as x, SegmentOverlay as B, IconWrapper as N, CircularProgressLottieContainer as q, SegmentLeft as z, SegmentRight as D, SegmentBottom as J } from "./segmented-game-card-styled.js";
-const K = { renderer: "canvas", loop: !0 }, C = P(
-  ({ segmentType: e, isCompleted: o, card: c, name: i, onMouseEnter: s }) => {
-    const a = m(() => s(i), [s, i]);
-    return /* @__PURE__ */ n(w, { children: /* @__PURE__ */ L(U, { $segmentType: e, onMouseEnter: a, children: [
-      /* @__PURE__ */ n(x, { $segmentType: e, children: /* @__PURE__ */ n(R, { src: c, settings: K, animateOnIntersect: !0 }) }),
-      o && /* @__PURE__ */ n(B, { $segmentType: e, children: /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(G, { color: "#fff", height: 40, width: 40 }) }) })
+import { SegmentContainer as w, SegmentContentContainer as U, SegmentAssetContainer as x, SegmentOverlay as B, IconWrapper as N, CircularProgressLottieContainer as q, RingContainer as z, LottieAnmationContainer as D, SegmentLeft as J, SegmentRight as K, SegmentBottom as Q } from "./segmented-game-card-styled.js";
+const X = { renderer: "canvas", loop: !0 }, f = R(
+  ({ segmentType: n, isCompleted: o, card: c, name: s, onMouseEnter: i }) => {
+    const a = m(() => i(s), [i, s]);
+    return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ L(U, { $segmentType: n, onMouseEnter: a, children: [
+      /* @__PURE__ */ e(x, { $segmentType: n, children: /* @__PURE__ */ e(P, { src: c, settings: X, animateOnIntersect: !0 }) }),
+      o && /* @__PURE__ */ e(B, { $segmentType: n, children: /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(G, { color: "#fff", height: 40, width: 40 }) }) })
     ] }) });
   }
-), Q = ({ data: e, label: o, initialValue: c = 0, value: i, maxValue: s = 1 }, a) => {
-  const g = E(null), h = E(null), [u, S] = f(o), [T, _] = f(!1), [b, M] = f("WHITE_T_87"), W = u !== o, d = m((t) => {
+), Y = ({ data: n, label: o, initialValue: c = 0, value: s, maxValue: i = 1 }, a) => {
+  const g = A(null), h = A(null), [u, S] = C(o), [T, _] = C(!1), [b, M] = C("WHITE_T_87"), W = u !== o, d = m((t) => {
     S(t);
   }, []), k = m(() => {
     S(o);
   }, [o]), p = m(
     (t) => {
       var r, l;
-      (l = (r = e[t]) == null ? void 0 : r.onPress) == null || l.call(r);
+      (l = (r = n[t]) == null ? void 0 : r.onPress) == null || l.call(r);
     },
-    [e]
+    [n]
   ), v = m((t) => {
     _(!0), M(t);
   }, []);
@@ -32,12 +32,12 @@ const K = { renderer: "canvas", loop: !0 }, C = P(
     segmentedCardWrapperRef: h,
     startLabelAnimation: v
   }));
-  const I = A(() => {
-    if (s <= 0)
+  const I = E(() => {
+    if (i <= 0)
       return;
-    const t = 92, r = t / s, l = Math.min(r * c, t), H = Math.min(r * i + 1, t);
+    const t = 92, r = t / i, l = Math.min(r * c, t), H = Math.min(r * s + 1, t);
     return [l, H];
-  }, [c, s, i]), y = A(
+  }, [c, i, s]), y = E(
     () => ({
       renderer: "canvas",
       autoplay: !0,
@@ -56,50 +56,50 @@ const K = { renderer: "canvas", loop: !0 }, C = P(
       onMouseLeave: k,
       labelColor: T ? b : W ? "WHITE_T_87" : "WHITE_T_60",
       children: [
-        /* @__PURE__ */ n(q, { children: /* @__PURE__ */ n(
-          R,
+        /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
+          P,
           {
             src: $.LEVELUP_RINGS,
             settings: y,
             animateOnIntersect: !0
           }
-        ) }),
-        /* @__PURE__ */ n(z, { onClick: () => p(0), children: /* @__PURE__ */ n(
-          C,
+        ) }) }) }),
+        /* @__PURE__ */ e(J, { onClick: () => p(0), children: /* @__PURE__ */ e(
+          f,
           {
             segmentType: "left",
-            card: e[0].card,
-            name: e[0].name,
-            isCompleted: e[0].isCompleted,
+            card: n[0].card,
+            name: n[0].name,
+            isCompleted: n[0].isCompleted,
             onMouseEnter: d
           }
         ) }),
-        /* @__PURE__ */ n(D, { onClick: () => p(1), children: /* @__PURE__ */ n(
-          C,
+        /* @__PURE__ */ e(K, { onClick: () => p(1), children: /* @__PURE__ */ e(
+          f,
           {
             segmentType: "right",
-            card: e[1].card,
-            name: e[1].name,
-            isCompleted: e[1].isCompleted,
+            card: n[1].card,
+            name: n[1].name,
+            isCompleted: n[1].isCompleted,
             onMouseEnter: d
           }
         ) }),
-        /* @__PURE__ */ n(J, { onClick: () => p(2), children: /* @__PURE__ */ n(
-          C,
+        /* @__PURE__ */ e(Q, { onClick: () => p(2), children: /* @__PURE__ */ e(
+          f,
           {
             segmentType: "bottom",
-            card: e[2].card,
-            name: e[2].name,
-            isCompleted: e[2].isCompleted,
+            card: n[2].card,
+            name: n[2].name,
+            isCompleted: n[2].isCompleted,
             onMouseEnter: d
           }
         ) })
       ]
     }
   );
-}, re = P(O(Q));
+}, ie = R(O(Y));
 export {
-  C as SegmentContent,
-  re as SegmentedGameCard
+  f as SegmentContent,
+  ie 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 { ForwardRefRenderFunction } from 'react';\n\nimport {\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport CheckIcon from '../../../../../assets/line-icons/icons/check';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport { CardContainer } from '../card-container/card-container';\nimport * as Styled from './segmented-game-card-styled';\n\nconst renderSettings = { renderer: 'canvas', loop: true };\n\nexport const SegmentContent = memo(\n  ({ segmentType, isCompleted, card, name, onMouseEnter }: IGameCardSegmentContentProps) => {\n    const handleMouseEnter = useCallback(() => onMouseEnter(name), [onMouseEnter, name]);\n\n    return (\n      <Styled.SegmentContainer>\n        <Styled.SegmentContentContainer $segmentType={segmentType} onMouseEnter={handleMouseEnter}>\n          <Styled.SegmentAssetContainer $segmentType={segmentType}>\n            <LottieAnimation src={card} settings={renderSettings} animateOnIntersect />\n          </Styled.SegmentAssetContainer>\n\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);\n\nconst SegmentedGameCardComponent: ForwardRefRenderFunction<\n  ISegmentedGameCardRefs,\n  ISegmentedGameCardProps\n> = ({ data, label: gameCategoryLabel, initialValue = 0, value, maxValue = 1 }, ref) => {\n  const labelRef = useRef<HTMLDivElement>(null);\n  const cardWrapperRef = useRef<HTMLDivElement>(null);\n\n  const [label, setLabel] = useState<string>(gameCategoryLabel);\n  const [isAnimated, setIsAnimated] = useState(false);\n  const [animatedColor, setAnimatedColor] = useState<TColorNames>('WHITE_T_87');\n\n  const isLabelHighlighted = label !== gameCategoryLabel;\n\n  const onMouseEnter = useCallback((gameName: string) => {\n    setLabel(gameName);\n  }, []);\n\n  const onMouseLeave = useCallback(() => {\n    setLabel(gameCategoryLabel);\n  }, [gameCategoryLabel]);\n\n  const onSegmentPress = useCallback(\n    (index: number) => {\n      data[index]?.onPress?.();\n    },\n    [data],\n  );\n\n  const startLabelAnimation = useCallback((color: TColorNames) => {\n    setIsAnimated(true);\n    setAnimatedColor(color);\n  }, []);\n\n  useImperativeHandle(ref, () => ({\n    labelRef,\n    segmentedCardWrapperRef: cardWrapperRef,\n    startLabelAnimation,\n  }));\n\n  const animationSegments: [number, number] | undefined = useMemo(() => {\n    if (maxValue <= 0) {\n      return;\n    }\n\n    const totalFrames = 92;\n    const framesPerValue = totalFrames / maxValue;\n\n    const initialFrameToPlay = Math.min(framesPerValue * initialValue, totalFrames);\n    const finalFrameToPlay = Math.min(framesPerValue * value + 1, totalFrames);\n\n    return [initialFrameToPlay, finalFrameToPlay];\n  }, [initialValue, maxValue, value]);\n\n  const levelUpAnimationSettings = useMemo(\n    () => ({\n      renderer: 'canvas',\n      autoplay: true,\n      loop: false,\n      initialSegment: animationSegments,\n    }),\n    [animationSegments],\n  );\n\n  return (\n    <CardContainer\n      ref={cardWrapperRef}\n      labelRef={labelRef}\n      label={label}\n      isAnimated={isAnimated}\n      onMouseLeave={onMouseLeave}\n      labelColor={isAnimated ? animatedColor : isLabelHighlighted ? 'WHITE_T_87' : 'WHITE_T_60'}\n    >\n      <Styled.CircularProgressLottieContainer>\n        <LottieAnimation\n          src={LOTTIE.LEVELUP_RINGS}\n          settings={levelUpAnimationSettings}\n          animateOnIntersect\n        />\n      </Styled.CircularProgressLottieContainer>\n      {/* left segment */}\n      <Styled.SegmentLeft onClick={() => onSegmentPress(0)}>\n        <SegmentContent\n          segmentType={'left'}\n          card={data[0]!.card}\n          name={data[0]!.name}\n          isCompleted={data[0]!.isCompleted}\n          onMouseEnter={onMouseEnter}\n        />\n      </Styled.SegmentLeft>\n\n      {/* right segment */}\n      <Styled.SegmentRight onClick={() => onSegmentPress(1)}>\n        <SegmentContent\n          segmentType={'right'}\n          card={data[1]!.card}\n          name={data[1]!.name}\n          isCompleted={data[1]!.isCompleted}\n          onMouseEnter={onMouseEnter}\n        />\n      </Styled.SegmentRight>\n\n      {/* bottom segment */}\n      <Styled.SegmentBottom onClick={() => onSegmentPress(2)}>\n        <SegmentContent\n          segmentType={'bottom'}\n          card={data[2]!.card}\n          name={data[2]!.name}\n          isCompleted={data[2]!.isCompleted}\n          onMouseEnter={onMouseEnter}\n        />\n      </Styled.SegmentBottom>\n    </CardContainer>\n  );\n};\n\nexport const SegmentedGameCard = memo(forwardRef(SegmentedGameCardComponent));\n"],"names":["renderSettings","SegmentContent","memo","segmentType","isCompleted","card","name","onMouseEnter","handleMouseEnter","useCallback","jsx","Styled.SegmentContainer","jsxs","Styled.SegmentContentContainer","Styled.SegmentAssetContainer","LottieAnimation","Styled.SegmentOverlay","Styled.IconWrapper","CheckIcon","SegmentedGameCardComponent","data","gameCategoryLabel","initialValue","value","maxValue","ref","labelRef","useRef","cardWrapperRef","label","setLabel","useState","isAnimated","setIsAnimated","animatedColor","setAnimatedColor","isLabelHighlighted","gameName","onMouseLeave","onSegmentPress","index","_b","_a","startLabelAnimation","color","useImperativeHandle","animationSegments","useMemo","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","levelUpAnimationSettings","CardContainer","Styled.CircularProgressLottieContainer","LOTTIE","Styled.SegmentLeft","Styled.SegmentRight","Styled.SegmentBottom","SegmentedGameCard","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 { ForwardRefRenderFunction } from 'react';\n\nimport {\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport CheckIcon from '../../../../../assets/line-icons/icons/check';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport { CardContainer } from '../card-container/card-container';\nimport * as Styled from './segmented-game-card-styled';\n\nconst renderSettings = { renderer: 'canvas', loop: true };\n\nexport const SegmentContent = memo(\n  ({ segmentType, isCompleted, card, name, onMouseEnter }: IGameCardSegmentContentProps) => {\n    const handleMouseEnter = useCallback(() => onMouseEnter(name), [onMouseEnter, name]);\n\n    return (\n      <Styled.SegmentContainer>\n        <Styled.SegmentContentContainer $segmentType={segmentType} onMouseEnter={handleMouseEnter}>\n          <Styled.SegmentAssetContainer $segmentType={segmentType}>\n            <LottieAnimation src={card} settings={renderSettings} animateOnIntersect />\n          </Styled.SegmentAssetContainer>\n\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);\n\nconst SegmentedGameCardComponent: ForwardRefRenderFunction<\n  ISegmentedGameCardRefs,\n  ISegmentedGameCardProps\n> = ({ data, label: gameCategoryLabel, initialValue = 0, value, maxValue = 1 }, ref) => {\n  const labelRef = useRef<HTMLDivElement>(null);\n  const cardWrapperRef = useRef<HTMLDivElement>(null);\n\n  const [label, setLabel] = useState<string>(gameCategoryLabel);\n  const [isAnimated, setIsAnimated] = useState(false);\n  const [animatedColor, setAnimatedColor] = useState<TColorNames>('WHITE_T_87');\n\n  const isLabelHighlighted = label !== gameCategoryLabel;\n\n  const onMouseEnter = useCallback((gameName: string) => {\n    setLabel(gameName);\n  }, []);\n\n  const onMouseLeave = useCallback(() => {\n    setLabel(gameCategoryLabel);\n  }, [gameCategoryLabel]);\n\n  const onSegmentPress = useCallback(\n    (index: number) => {\n      data[index]?.onPress?.();\n    },\n    [data],\n  );\n\n  const startLabelAnimation = useCallback((color: TColorNames) => {\n    setIsAnimated(true);\n    setAnimatedColor(color);\n  }, []);\n\n  useImperativeHandle(ref, () => ({\n    labelRef,\n    segmentedCardWrapperRef: cardWrapperRef,\n    startLabelAnimation,\n  }));\n\n  const animationSegments: [number, number] | undefined = useMemo(() => {\n    if (maxValue <= 0) {\n      return;\n    }\n\n    const totalFrames = 92;\n    const framesPerValue = totalFrames / maxValue;\n\n    const initialFrameToPlay = Math.min(framesPerValue * initialValue, totalFrames);\n    const finalFrameToPlay = Math.min(framesPerValue * value + 1, totalFrames);\n\n    return [initialFrameToPlay, finalFrameToPlay];\n  }, [initialValue, maxValue, value]);\n\n  const levelUpAnimationSettings = useMemo(\n    () => ({\n      renderer: 'canvas',\n      autoplay: true,\n      loop: false,\n      initialSegment: animationSegments,\n    }),\n    [animationSegments],\n  );\n\n  return (\n    <CardContainer\n      ref={cardWrapperRef}\n      labelRef={labelRef}\n      label={label}\n      isAnimated={isAnimated}\n      onMouseLeave={onMouseLeave}\n      labelColor={isAnimated ? animatedColor : isLabelHighlighted ? 'WHITE_T_87' : 'WHITE_T_60'}\n    >\n      <Styled.CircularProgressLottieContainer>\n        <Styled.RingContainer>\n          <Styled.LottieAnmationContainer>\n            <LottieAnimation\n              src={LOTTIE.LEVELUP_RINGS}\n              settings={levelUpAnimationSettings}\n              animateOnIntersect\n            />\n          </Styled.LottieAnmationContainer>\n        </Styled.RingContainer>\n      </Styled.CircularProgressLottieContainer>\n      {/* left segment */}\n      <Styled.SegmentLeft onClick={() => onSegmentPress(0)}>\n        <SegmentContent\n          segmentType={'left'}\n          card={data[0]!.card}\n          name={data[0]!.name}\n          isCompleted={data[0]!.isCompleted}\n          onMouseEnter={onMouseEnter}\n        />\n      </Styled.SegmentLeft>\n\n      {/* right segment */}\n      <Styled.SegmentRight onClick={() => onSegmentPress(1)}>\n        <SegmentContent\n          segmentType={'right'}\n          card={data[1]!.card}\n          name={data[1]!.name}\n          isCompleted={data[1]!.isCompleted}\n          onMouseEnter={onMouseEnter}\n        />\n      </Styled.SegmentRight>\n\n      {/* bottom segment */}\n      <Styled.SegmentBottom onClick={() => onSegmentPress(2)}>\n        <SegmentContent\n          segmentType={'bottom'}\n          card={data[2]!.card}\n          name={data[2]!.name}\n          isCompleted={data[2]!.isCompleted}\n          onMouseEnter={onMouseEnter}\n        />\n      </Styled.SegmentBottom>\n    </CardContainer>\n  );\n};\n\nexport const SegmentedGameCard = memo(forwardRef(SegmentedGameCardComponent));\n"],"names":["renderSettings","SegmentContent","memo","segmentType","isCompleted","card","name","onMouseEnter","handleMouseEnter","useCallback","jsx","Styled.SegmentContainer","jsxs","Styled.SegmentContentContainer","Styled.SegmentAssetContainer","LottieAnimation","Styled.SegmentOverlay","Styled.IconWrapper","CheckIcon","SegmentedGameCardComponent","data","gameCategoryLabel","initialValue","value","maxValue","ref","labelRef","useRef","cardWrapperRef","label","setLabel","useState","isAnimated","setIsAnimated","animatedColor","setAnimatedColor","isLabelHighlighted","gameName","onMouseLeave","onSegmentPress","index","_b","_a","startLabelAnimation","color","useImperativeHandle","animationSegments","useMemo","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","levelUpAnimationSettings","CardContainer","Styled.CircularProgressLottieContainer","Styled.RingContainer","Styled.LottieAnmationContainer","LOTTIE","Styled.SegmentLeft","Styled.SegmentRight","Styled.SegmentBottom","SegmentedGameCard","forwardRef"],"mappings":"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"}

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

@@ -2,32 +2,34 @@ import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import { memo as T } from "react";
 import { LOTTIE as o } from "../../../../../../assets/lottie/lottie.js";
 import a from "../../../../../ui/layout/flex-view.js";
-import _ from "../../../../../ui/lottie-animation/lottie-animation.js";
-import s from "../../../../../ui/separator/separator.js";
+import s from "../../../../../ui/lottie-animation/lottie-animation.js";
+import _ from "../../../../../ui/separator/separator.js";
 import E from "../../../../../ui/text/text.js";
-import { GAME_LAUNCHER_SIZE as t, GAME_LAUNCHER_SIZE_LARGE as m } from "../../card-container/constants.js";
+import { GAME_LAUNCHER_SIZE as t, GAME_LAUNCHER_SIZE_LARGE as c } from "../../card-container/constants.js";
 import M from "../table-mode-star/table-mode-star.js";
 import { ModeContentSquareBlock as i, TableModeLottieContainer as f } from "./table-mode-styled.js";
 const h = {
   sequence: o.SEQUENCE_MODE_SEGMENT_LOTTIE,
   random: o.RANDOM_MODE_SEGMENT_LOTTIE,
   advance: o.ADVANCE_MODE_SEGMENT_LOTTIE
-}, u = T(({ tableNumber: c, isStarAchieved: d, type: e, rewardStar: l }) => /* @__PURE__ */ n(a, { $alignItems: "center", children: [
+}, A = {
+  renderer: "svg"
+}, D = T(({ tableNumber: m, isStarAchieved: d, type: e, rewardStar: l }) => /* @__PURE__ */ n(a, { $alignItems: "center", children: [
   /* @__PURE__ */ r(M, { isStarAchieved: d, rewardStar: l }),
-  /* @__PURE__ */ r(s, { height: t * 0.055 }),
+  /* @__PURE__ */ r(_, { height: t * 0.055 }),
   /* @__PURE__ */ n(a, { $flexDirection: "row", children: [
     /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(
       E,
       {
-        $renderAs: t === m ? "ac3-black" : "ab2-bold",
+        $renderAs: t === c ? "ac3-black" : "ab2-bold",
         $color: "WHITE",
-        children: c
+        children: m
       }
     ) }),
     /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(
       E,
       {
-        $renderAs: t === m ? "ac3-black" : "ab2-bold",
+        $renderAs: t === c ? "ac3-black" : "ab2-bold",
         $color: "WHITE",
         children: "×"
       }
@@ -37,12 +39,12 @@ const h = {
       {
         $bottom: e === "advance" ? "-1px" : "unset",
         $right: e === "advance" ? "-1px" : "unset",
-        children: /* @__PURE__ */ r(_, { src: h[e] ?? "" })
+        children: /* @__PURE__ */ r(s, { src: h[e] ?? "", settings: A })
       }
     ) })
   ] })
 ] }));
 export {
-  u as default
+  D as default
 };
 //# sourceMappingURL=table-mode.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-mode.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.tsx"],"sourcesContent":["import type { TTableMode } from '../../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITableModeProps } from './table-mode-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../../ui/separator/separator';\nimport Text from '../../../../../ui/text/text';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../../card-container/constants';\nimport TableStar from '../table-mode-star/table-mode-star';\nimport * as Styled from './table-mode-styled';\n\nconst LOAD_LOTTIE: Partial<Record<TTableMode, string>> = {\n  sequence: LOTTIE.SEQUENCE_MODE_SEGMENT_LOTTIE,\n  random: LOTTIE.RANDOM_MODE_SEGMENT_LOTTIE,\n  advance: LOTTIE.ADVANCE_MODE_SEGMENT_LOTTIE,\n};\n\nconst TableMode: FC<ITableModeProps> = memo(({ tableNumber, isStarAchieved, type, rewardStar }) => {\n  return (\n    <FlexView $alignItems=\"center\">\n      <TableStar isStarAchieved={isStarAchieved} rewardStar={rewardStar} />\n      <Separator height={GAME_LAUNCHER_SIZE * 0.055} />\n      <FlexView $flexDirection=\"row\">\n        <Styled.ModeContentSquareBlock>\n          <Text\n            $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n            $color=\"WHITE\"\n          >\n            {tableNumber}\n          </Text>\n        </Styled.ModeContentSquareBlock>\n        <Styled.ModeContentSquareBlock>\n          <Text\n            $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n            $color=\"WHITE\"\n          >\n            ×\n          </Text>\n        </Styled.ModeContentSquareBlock>\n        <Styled.ModeContentSquareBlock $isBorderRightRequired={type === 'advance'}>\n          <Styled.TableModeLottieContainer\n            $bottom={type === 'advance' ? '-1px' : 'unset'}\n            $right={type === 'advance' ? '-1px' : 'unset'}\n          >\n            <LottieAnimation src={LOAD_LOTTIE[type] ?? ''} />\n          </Styled.TableModeLottieContainer>\n        </Styled.ModeContentSquareBlock>\n      </FlexView>\n    </FlexView>\n  );\n});\n\nexport default TableMode;\n"],"names":["LOAD_LOTTIE","LOTTIE","TableMode","memo","tableNumber","isStarAchieved","type","rewardStar","jsxs","FlexView","jsx","TableStar","Separator","GAME_LAUNCHER_SIZE","Styled.ModeContentSquareBlock","Text","GAME_LAUNCHER_SIZE_LARGE","Styled.TableModeLottieContainer","LottieAnimation"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAmD;AAAA,EACvD,UAAUC,EAAO;AAAA,EACjB,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAClB,GAEMC,IAAiCC,EAAK,CAAC,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,MAAAC,GAAM,YAAAC,QAE9E,gBAAAC,EAACC,GAAS,EAAA,aAAY,UACpB,UAAA;AAAA,EAAC,gBAAAC,EAAAC,GAAA,EAAU,gBAAAN,GAAgC,YAAAE,EAAwB,CAAA;AAAA,EAClE,gBAAAG,EAAAE,GAAA,EAAU,QAAQC,IAAqB,MAAO,CAAA;AAAA,EAC/C,gBAAAL,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAC,EAAAI,GAAA,EACC,UAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,WAAWF,MAAuBG,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QAEN,UAAAZ;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IACA,gBAAAM,EAACI,GAAA,EACC,UAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,WAAWF,MAAuBG,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QACR,UAAA;AAAA,MAAA;AAAA,IAAA,GAGH;AAAA,sBACCF,GAAA,EAA8B,wBAAwBR,MAAS,WAC9D,UAAA,gBAAAI;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,SAASX,MAAS,YAAY,SAAS;AAAA,QACvC,QAAQA,MAAS,YAAY,SAAS;AAAA,QAEtC,4BAACY,GAAgB,EAAA,KAAKlB,EAAYM,CAAI,KAAK,IAAI;AAAA,MAAA;AAAA,IAAA,GAEnD;AAAA,EAAA,GACF;AACF,EAAA,CAAA,CAEH;"}
+{"version":3,"file":"table-mode.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.tsx"],"sourcesContent":["import type { TTableMode } from '../../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITableModeProps } from './table-mode-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../../ui/separator/separator';\nimport Text from '../../../../../ui/text/text';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../../card-container/constants';\nimport TableStar from '../table-mode-star/table-mode-star';\nimport * as Styled from './table-mode-styled';\n\nconst LOAD_LOTTIE: Partial<Record<TTableMode, string>> = {\n  sequence: LOTTIE.SEQUENCE_MODE_SEGMENT_LOTTIE,\n  random: LOTTIE.RANDOM_MODE_SEGMENT_LOTTIE,\n  advance: LOTTIE.ADVANCE_MODE_SEGMENT_LOTTIE,\n};\n\nconst settings = {\n  renderer: 'svg',\n};\n\nconst TableMode: FC<ITableModeProps> = memo(({ tableNumber, isStarAchieved, type, rewardStar }) => {\n  return (\n    <FlexView $alignItems=\"center\">\n      <TableStar isStarAchieved={isStarAchieved} rewardStar={rewardStar} />\n      <Separator height={GAME_LAUNCHER_SIZE * 0.055} />\n      <FlexView $flexDirection=\"row\">\n        <Styled.ModeContentSquareBlock>\n          <Text\n            $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n            $color=\"WHITE\"\n          >\n            {tableNumber}\n          </Text>\n        </Styled.ModeContentSquareBlock>\n        <Styled.ModeContentSquareBlock>\n          <Text\n            $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n            $color=\"WHITE\"\n          >\n            ×\n          </Text>\n        </Styled.ModeContentSquareBlock>\n        <Styled.ModeContentSquareBlock $isBorderRightRequired={type === 'advance'}>\n          <Styled.TableModeLottieContainer\n            $bottom={type === 'advance' ? '-1px' : 'unset'}\n            $right={type === 'advance' ? '-1px' : 'unset'}\n          >\n            <LottieAnimation src={LOAD_LOTTIE[type] ?? ''} settings={settings} />\n          </Styled.TableModeLottieContainer>\n        </Styled.ModeContentSquareBlock>\n      </FlexView>\n    </FlexView>\n  );\n});\n\nexport default TableMode;\n"],"names":["LOAD_LOTTIE","LOTTIE","settings","TableMode","memo","tableNumber","isStarAchieved","type","rewardStar","jsxs","FlexView","jsx","TableStar","Separator","GAME_LAUNCHER_SIZE","Styled.ModeContentSquareBlock","Text","GAME_LAUNCHER_SIZE_LARGE","Styled.TableModeLottieContainer","LottieAnimation"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAmD;AAAA,EACvD,UAAUC,EAAO;AAAA,EACjB,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAClB,GAEMC,IAAW;AAAA,EACf,UAAU;AACZ,GAEMC,IAAiCC,EAAK,CAAC,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,MAAAC,GAAM,YAAAC,QAE9E,gBAAAC,EAACC,GAAS,EAAA,aAAY,UACpB,UAAA;AAAA,EAAC,gBAAAC,EAAAC,GAAA,EAAU,gBAAAN,GAAgC,YAAAE,EAAwB,CAAA;AAAA,EAClE,gBAAAG,EAAAE,GAAA,EAAU,QAAQC,IAAqB,MAAO,CAAA;AAAA,EAC/C,gBAAAL,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAC,EAAAI,GAAA,EACC,UAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,WAAWF,MAAuBG,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QAEN,UAAAZ;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IACA,gBAAAM,EAACI,GAAA,EACC,UAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,WAAWF,MAAuBG,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QACR,UAAA;AAAA,MAAA;AAAA,IAAA,GAGH;AAAA,sBACCF,GAAA,EAA8B,wBAAwBR,MAAS,WAC9D,UAAA,gBAAAI;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,SAASX,MAAS,YAAY,SAAS;AAAA,QACvC,QAAQA,MAAS,YAAY,SAAS;AAAA,QAEtC,4BAACY,GAAgB,EAAA,KAAKnB,EAAYO,CAAI,KAAK,IAAI,UAAAL,GAAoB;AAAA,MAAA;AAAA,IAAA,GAEvE;AAAA,EAAA,GACF;AACF,EAAA,CAAA,CAEH;"}