@cuemath/leap 2.8.36-tables-hg8 → 2.8.36-tables-hg10

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

@@ -1,62 +1,67 @@
-import { jsx as r, jsxs as a, Fragment as Z } from "react/jsx-runtime";
-import { memo as z, useState as s, useRef as k, useCallback as i, useMemo as y, useEffect as K } from "react";
-import Y from "../../../../../assets/line-icons/icons/back2.js";
+import { jsx as r, jsxs as l, Fragment as Z } from "react/jsx-runtime";
+import { memo as z, useState as a, useRef as B, useCallback as o, useMemo as R, useEffect as K } from "react";
+import J from "../../../../../assets/line-icons/icons/back2.js";
 import { LOTTIE as C } from "../../../../../assets/lottie/lottie.js";
-import J from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
-import Q from "../../../../ui/layout/flex-view.js";
-import E from "../../../../ui/lottie-animation/lottie-animation.js";
-import X from "../../../../ui/separator/separator.js";
-import B from "../../../../ui/text/text.js";
-import { useCircleSounds as ee } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
-import { CardContainer as re } from "../card-container/card-container.js";
+import Q from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
+import X from "../../../../ui/layout/flex-view.js";
+import N from "../../../../ui/lottie-animation/lottie-animation.js";
+import ee from "../../../../ui/separator/separator.js";
+import k from "../../../../ui/text/text.js";
+import { useCircleSounds as re } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { CardContainer as te } from "../card-container/card-container.js";
 import { GAME_LAUNCHER_SIZE as h, GAME_LAUNCHER_SIZE_LARGE as T } from "../card-container/constants.js";
-import { TABLE_REVEAL_ANIMATION as f, TABLE_MODE_LABEL_COLOR as te } from "./constants.js";
-import oe from "./table-mode/table-mode.js";
-import { CardWrapper as ie, TableSegmentsWrapper as ne, InfiniteButtonWrapper as le, AbsoluteView as g, TableSegmentCardShadowContainer as ae, TableSegment as ce, TableStar as se, TableNumber as me, TableModeContainer as de, TableModeWrapper as ue, AnimatedView as be, ModeOverlay as pe, IconWrapper as he } from "./tables-card-styled.js";
-const Te = {
+import { TABLE_REVEAL_ANIMATION as f, TABLE_MODE_LABEL_COLOR as oe } from "./constants.js";
+import ie from "./table-mode/table-mode.js";
+import { CardWrapper as ne, TableSegmentsWrapper as le, InfiniteButtonWrapper as se, AbsoluteView as A, TableSegmentCardShadowContainer as ae, TableSegment as ce, TableStar as me, TableNumber as de, TableModeContainer as ue, TableModeWrapper as be, AnimatedView as pe, ModeOverlay as he, IconWrapper as Te } from "./tables-card-styled.js";
+import { useUIContext as fe } from "../../../../ui/context/context.js";
+import { GAME_LAUNCHER_ANALYTICS_EVENTS as Ae } from "../../game-launcher-analytics-events.js";
+const Ee = {
   loop: !1,
   autoplay: !1,
   render: "svg"
-}, Be = z(({ data: c, label: L, onPress: n }) => {
-  const { playButtonSound: u } = ee(), [m, I] = s(!0), [d, b] = s(null), [A, S] = s(null), [O, p] = s("WHITE_T_60"), [l, _] = s({
+}, De = z(({ data: s, label: L, onPress: c }) => {
+  const { onEvent: y } = fe(), { playButtonSound: d } = re(), [u, S] = a(!0), [m, b] = a(null), [E, I] = a(null), [O, p] = a("WHITE_T_60"), [n, _] = a({
     stars: [],
     tableNumber: 0
-  }), [$] = s(!1), v = k(null), N = k(), R = i(
+  }), [M] = a(!1), g = B(null), v = B(), W = o(
     (e) => {
-      u(), I(!0), b(e.tableNumber), _({ ...e });
+      d(), S(!0), b(e.tableNumber), _({ ...e }), y(Ae.TABLE_SELECTED, {
+        mata: {
+          table_of: e.tableNumber
+        }
+      });
     },
-    [u]
-  ), W = i((e) => {
+    [d]
+  ), P = o((e) => {
     p("WHITE_T_87"), b(e.tableNumber);
-  }, []), w = i(() => {
-    p("WHITE_T_60"), !l.tableNumber && b(null);
-  }, [l.tableNumber]), D = i(() => {
-    var o;
-    u(), I(!1), b(null);
+  }, []), D = o(() => {
+    p("WHITE_T_60"), !n.tableNumber && b(null);
+  }, [n.tableNumber]), w = o(() => {
+    var t;
+    d(), S(!1), b(null);
     const e = (f.DISAPPEAR[1] - f.DISAPPEAR[0]) / 30;
-    (o = v.current) == null || o.playSegments(f.DISAPPEAR, !0), N.current = setTimeout(() => {
+    (t = g.current) == null || t.playSegments(f.DISAPPEAR, !0), v.current = setTimeout(() => {
       _({ stars: [], tableNumber: 0 });
     }, e * 1e3);
-  }, [u]), P = i(() => {
+  }, [d]), V = o(() => {
     var e;
-    (e = v.current) == null || e.playSegments(f.REVEAL, !0);
-  }, []), V = i((e) => {
-    const o = {
+    (e = g.current) == null || e.playSegments(f.REVEAL, !0);
+  }, []), x = o((e) => {
+    const t = {
       sequence: 1,
       random: 2,
       advance: 3
     };
-    p(te[e] ?? "WHITE_T_60"), S(o[e] ?? 0);
-  }, []), q = i(() => {
-    S(null), p("WHITE_T_60");
-  }, []), t = y(() => l, [l]), x = y(() => [
+    p(oe[e] ?? "WHITE_T_60"), I(t[e] ?? 0);
+  }, []), U = o(() => {
+    I(null), p("WHITE_T_60");
+  }, []), i = R(() => n, [n]), F = R(() => [
     {
       top: 20,
       left: 10.5,
       type: "sequence",
-      tableNumber: t.tableNumber,
-      isStarAchieved: t.stars.includes("sequence"),
-      onClick: () => n({ mode: "sequence", tableNumber: t.tableNumber }),
+      tableNumber: i.tableNumber,
+      isStarAchieved: i.stars.includes("sequence"),
       semicirclePosiiionTop: "-19%",
       semicirclePosiiionLeft: "-43%",
       semicircleHoverColor: "#B259004D"
@@ -65,9 +70,8 @@ const Te = {
       top: 20,
       left: 65.5,
       type: "random",
-      tableNumber: t.tableNumber,
-      isStarAchieved: t.stars.includes("random"),
-      onClick: () => n({ mode: "random", tableNumber: t.tableNumber }),
+      tableNumber: i.tableNumber,
+      isStarAchieved: i.stars.includes("random"),
       semicirclePosiiionTop: "-19%",
       semicirclePosiiionLeft: "65%",
       semicircleHoverColor: "#0055CC4D"
@@ -76,116 +80,115 @@ const Te = {
       top: 66,
       left: 38,
       type: "advance",
-      tableNumber: t.tableNumber,
-      isStarAchieved: t.stars.includes("advance"),
-      onClick: () => n({ mode: "advance", tableNumber: t.tableNumber }),
+      tableNumber: i.tableNumber,
+      isStarAchieved: i.stars.includes("advance"),
       semicirclePosiiionTop: "74%",
       semicirclePosiiionLeft: "11%",
       semicircleHoverColor: "#A9099C4D"
     }
-  ], [t.tableNumber, t.stars, n]), F = i(() => {
-    n({
+  ], [i.tableNumber, i.stars, c]), G = o(() => {
+    c({
       mode: "infinite",
-      infiniteModeHighScore: c.infiniteModeHighScore
+      infiniteModeHighScore: s.infiniteModeHighScore
     });
-  }, [n, c.infiniteModeHighScore]), G = i(
-    (e) => {
-      n({
+  }, [c, s.infiniteModeHighScore]), q = o(
+    (e, t) => {
+      c({
         mode: e,
-        tableNumber: l.tableNumber
+        tableNumber: n.tableNumber,
+        isStarRewarded: t
       });
     },
-    [n, l.tableNumber]
-  ), U = i(() => A ? `${d}× LEVEL${A}` : d ? `${d}× Table` : L, [A, d, L]);
+    [c, n.tableNumber]
+  ), j = o(() => E ? `${m}× LEVEL${E}` : m ? `${m}× Table` : L, [E, m, L]);
   return K(() => () => {
-    N.current && clearTimeout(N.current);
+    v.current && clearTimeout(v.current);
   }, []), /* @__PURE__ */ r(
-    re,
+    te,
     {
       strokeColor: "WHITE",
-      label: U(),
+      label: j(),
       isAnimated: !1,
       labelColor: O,
-      children: /* @__PURE__ */ a(ie, { children: [
-        /* @__PURE__ */ a(ne, { children: [
+      children: /* @__PURE__ */ l(ne, { children: [
+        /* @__PURE__ */ l(le, { children: [
           /* @__PURE__ */ r(
-            J,
+            Q,
             {
               renderAs: "primary",
               position: "top",
-              hidden: $,
-              tooltipItem: /* @__PURE__ */ r(B, { $renderAs: "ab3", $color: "WHITE", children: "Coming Soon" }),
-              children: /* @__PURE__ */ a(
-                le,
+              hidden: M,
+              tooltipItem: /* @__PURE__ */ r(k, { $renderAs: "ab3", $color: "WHITE", children: "Coming Soon" }),
+              children: /* @__PURE__ */ l(
+                se,
                 {
-                  onClick: $ ? F : void 0,
+                  onClick: M ? G : void 0,
                   children: [
-                    /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(E, { src: C.INFINITE_BUTTON_BG }) }),
-                    /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(E, { src: C.INFINITE_BUTTON_SYMBOL }) })
+                    /* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(N, { src: C.INFINITE_BUTTON_BG }) }),
+                    /* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(N, { src: C.INFINITE_BUTTON_SYMBOL }) })
                   ]
                 }
               )
             }
           ),
           /* @__PURE__ */ r(ae, {}),
-          c.tableList.map((e, o) => {
-            const j = 360 / c.tableList.length, M = -(90 + 360 / (2 * c.tableList.length)) + j * (o + 1);
+          s.tableList.map((e, t) => {
+            const Y = 360 / s.tableList.length, $ = -(90 + 360 / (2 * s.tableList.length)) + Y * (t + 1);
             return /* @__PURE__ */ r(
               ce,
               {
-                $angle: M,
-                $totalSegments: c.tableList.length,
-                $zIndex: o + 1,
-                onClick: () => R(e),
-                onMouseOver: () => W(e),
-                onMouseLeave: w,
-                children: /* @__PURE__ */ a(Q, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
+                $angle: $,
+                $totalSegments: s.tableList.length,
+                $zIndex: t + 1,
+                onClick: () => W(e),
+                onMouseOver: () => P(e),
+                onMouseLeave: D,
+                children: /* @__PURE__ */ l(X, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
                   ["sequence", "random", "advance"].map((H) => /* @__PURE__ */ r(
-                    se,
+                    me,
                     {
                       $isStarAchieved: e.stars.includes(H)
                     },
                     H
                   )),
-                  /* @__PURE__ */ r(X, { width: h === T ? 22 : 14 }),
-                  /* @__PURE__ */ r(me, { $angle: -M, children: /* @__PURE__ */ r(
-                    B,
+                  /* @__PURE__ */ r(ee, { width: h === T ? 22 : 14 }),
+                  /* @__PURE__ */ r(de, { $angle: -$, children: /* @__PURE__ */ r(
+                    k,
                     {
                       $renderAs: h === T ? "ac3-black" : "ac4-black",
-                      $color: d === e.tableNumber ? "BLACK_1" : "WHITE",
+                      $color: m === e.tableNumber ? "BLACK_1" : "WHITE",
                       children: e.tableNumber
                     }
                   ) })
                 ] })
               },
-              o
+              t
             );
           })
         ] }),
-        l.tableNumber > 0 && /* @__PURE__ */ r(de, { children: /* @__PURE__ */ a(ue, { children: [
-          /* @__PURE__ */ a(be, { animation: m ? "fade-in" : "fade-out", children: [
-            x.map((e, o) => /* @__PURE__ */ a(Z, { children: [
+        n.tableNumber > 0 && /* @__PURE__ */ r(ue, { children: /* @__PURE__ */ l(be, { children: [
+          /* @__PURE__ */ l(pe, { animation: u ? "fade-in" : "fade-out", children: [
+            F.map((e, t) => /* @__PURE__ */ l(Z, { children: [
               /* @__PURE__ */ r(
-                pe,
+                he,
                 {
                   $top: e.semicirclePosiiionTop,
                   $left: e.semicirclePosiiionLeft,
                   $hoverColor: e.semicircleHoverColor,
-                  onClick: () => m ? G(e.type) : void 0,
-                  onMouseOver: () => m ? V(e.type) : void 0,
-                  onMouseLeave: m ? q : void 0
+                  onClick: () => u ? q(e.type, e.isStarAchieved) : void 0,
+                  onMouseOver: () => u ? x(e.type) : void 0,
+                  onMouseLeave: u ? U : void 0
                 },
-                o + "modeoverlay"
+                t + "modeoverlay"
               ),
               /* @__PURE__ */ r(
-                g,
+                A,
                 {
                   $top: e.top,
                   $left: e.left,
-                  onClick: m ? e.onClick : void 0,
                   $isPointerEventsNone: !0,
                   children: /* @__PURE__ */ r(
-                    oe,
+                    ie,
                     {
                       tableNumber: e.tableNumber,
                       isStarAchieved: e.isStarAchieved,
@@ -193,25 +196,25 @@ const Te = {
                     }
                   )
                 },
-                o + "modes"
+                t + "modes"
               )
             ] })),
-            /* @__PURE__ */ r(g, { $top: 50, $left: 50, $alignCenter: !0, children: /* @__PURE__ */ r(he, { children: /* @__PURE__ */ r(
-              Y,
+            /* @__PURE__ */ r(A, { $top: 50, $left: 50, $alignCenter: !0, children: /* @__PURE__ */ r(Te, { children: /* @__PURE__ */ r(
+              J,
               {
-                onClick: D,
+                onClick: w,
                 height: h === T ? 40 : 32,
                 width: h === T ? 40 : 32
               }
             ) }) })
           ] }),
           /* @__PURE__ */ r(
-            E,
+            N,
             {
               src: C.TABLE_MODE_REVEAL,
-              ref: v,
-              settings: Te,
-              onRender: P
+              ref: g,
+              settings: Ee,
+              onRender: V
             }
           )
         ] }) })
@@ -220,6 +223,6 @@ const Te = {
   );
 });
 export {
-  Be as TablesCard
+  De as TablesCard
 };
 //# sourceMappingURL=tables-card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tables-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/tables-card/tables-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type {\n  ITableInfo,\n  TTableMode,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITablesCardProps } from './tables-card-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Back2Icon from '../../../../../assets/line-icons/icons/back2';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\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 { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { CardContainer } from '../card-container/card-container';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../card-container/constants';\nimport { TABLE_MODE_LABEL_COLOR, TABLE_REVEAL_ANIMATION } from './constants';\nimport TableMode from './table-mode/table-mode';\nimport * as Styled from './tables-card-styled';\n\nconst animationSettings = {\n  loop: false,\n  autoplay: false,\n  render: 'svg',\n};\n\nexport const TablesCard: FC<ITablesCardProps> = memo(({ data, label, onPress }) => {\n  const { playButtonSound } = useCircleSounds();\n  const [fadeIn, setFadeIn] = useState(true);\n  const [highlightedTable, setHighlightedTable] = useState<number | null>(null);\n  const [highlightedLevel, setHighlightedLevel] = useState<number | null>(null);\n  const [labelColor, setLabelColor] = useState<TColorNames>('WHITE_T_60');\n  const [revealTableModes, setRevealTableModes] = useState<ITableInfo>({\n    stars: [],\n    tableNumber: 0,\n  });\n  const [enableInfiniteMode] = useState(false);\n\n  const revealAnimationRef = useRef<ILottieAnimationRef | null>(null);\n  const disappearAnimationTimer = useRef<ReturnType<typeof setTimeout>>();\n\n  const handleTableSegmentClick = useCallback(\n    (table: ITableInfo) => {\n      playButtonSound();\n      setFadeIn(true);\n      setHighlightedTable(table.tableNumber);\n      setRevealTableModes({ ...table });\n    },\n    [playButtonSound],\n  );\n\n  const handleTableSegmentMouseOver = useCallback((table: ITableInfo) => {\n    setLabelColor('WHITE_T_87');\n    setHighlightedTable(table.tableNumber);\n  }, []);\n\n  const handleTableSegmentMouseLeave = useCallback(() => {\n    setLabelColor('WHITE_T_60');\n    !revealTableModes.tableNumber && setHighlightedTable(null);\n  }, [revealTableModes.tableNumber]);\n\n  const goBack = useCallback(() => {\n    playButtonSound();\n    setFadeIn(false);\n    setHighlightedTable(null);\n    const time = (TABLE_REVEAL_ANIMATION.DISAPPEAR[1] - TABLE_REVEAL_ANIMATION.DISAPPEAR[0]) / 30;\n\n    revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.DISAPPEAR, true);\n    disappearAnimationTimer.current = setTimeout(() => {\n      setRevealTableModes({ stars: [], tableNumber: 0 });\n    }, time * 1000);\n  }, [playButtonSound]);\n\n  const showTableModes = useCallback(() => {\n    revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.REVEAL, true);\n  }, []);\n\n  const handleModeMouseOver = useCallback((type: TTableMode) => {\n    const level: Partial<Record<TTableMode, number>> = {\n      sequence: 1,\n      random: 2,\n      advance: 3,\n    };\n\n    setLabelColor(TABLE_MODE_LABEL_COLOR[type] ?? 'WHITE_T_60');\n    setHighlightedLevel(level[type] ?? 0);\n  }, []);\n\n  const handleModeMouseLeave = useCallback(() => {\n    setHighlightedLevel(null);\n    setLabelColor('WHITE_T_60');\n  }, []);\n\n  const revealTableModesMemo = useMemo(() => revealTableModes, [revealTableModes]);\n\n  const tableModes = useMemo(() => {\n    return [\n      {\n        top: 20,\n        left: 10.5,\n        type: 'sequence' as TTableMode,\n        tableNumber: revealTableModesMemo.tableNumber,\n        isStarAchieved: revealTableModesMemo.stars.includes('sequence'),\n        onClick: () => onPress({ mode: 'sequence', tableNumber: revealTableModesMemo.tableNumber }),\n        semicirclePosiiionTop: '-19%',\n        semicirclePosiiionLeft: '-43%',\n        semicircleHoverColor: '#B259004D',\n      },\n      {\n        top: 20,\n        left: 65.5,\n        type: 'random' as TTableMode,\n        tableNumber: revealTableModesMemo.tableNumber,\n        isStarAchieved: revealTableModesMemo.stars.includes('random'),\n        onClick: () => onPress({ mode: 'random', tableNumber: revealTableModesMemo.tableNumber }),\n        semicirclePosiiionTop: '-19%',\n        semicirclePosiiionLeft: '65%',\n        semicircleHoverColor: '#0055CC4D',\n      },\n      {\n        top: 66,\n        left: 38,\n        type: 'advance' as TTableMode,\n        tableNumber: revealTableModesMemo.tableNumber,\n        isStarAchieved: revealTableModesMemo.stars.includes('advance'),\n        onClick: () => onPress({ mode: 'advance', tableNumber: revealTableModesMemo.tableNumber }),\n        semicirclePosiiionTop: '74%',\n        semicirclePosiiionLeft: '11%',\n        semicircleHoverColor: '#A9099C4D',\n      },\n    ];\n  }, [revealTableModesMemo.tableNumber, revealTableModesMemo.stars, onPress]);\n\n  // Disabled infinite mode\n  const handleInfiniteModeClick = useCallback(() => {\n    onPress({\n      mode: 'infinite',\n      infiniteModeHighScore: data.infiniteModeHighScore,\n    });\n  }, [onPress, data.infiniteModeHighScore]);\n\n  const handleNormalModeClick = useCallback(\n    (mode: TTableMode) => {\n      onPress({\n        mode,\n        tableNumber: revealTableModes.tableNumber,\n      });\n    },\n    [onPress, revealTableModes.tableNumber],\n  );\n\n  const getHighlightedText = useCallback(() => {\n    if (highlightedLevel) {\n      return `${highlightedTable}× LEVEL${highlightedLevel}`;\n    }\n\n    return highlightedTable ? `${highlightedTable}× Table` : label;\n  }, [highlightedLevel, highlightedTable, label]);\n\n  useEffect(() => {\n    return () => {\n      disappearAnimationTimer.current && clearTimeout(disappearAnimationTimer.current);\n    };\n  }, []);\n\n  return (\n    <CardContainer\n      strokeColor=\"WHITE\"\n      label={getHighlightedText()}\n      isAnimated={false}\n      labelColor={labelColor}\n    >\n      <Styled.CardWrapper>\n        {/* table selection */}\n        <Styled.TableSegmentsWrapper>\n          {/* infinite button */}\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"top\"\n            hidden={enableInfiniteMode}\n            tooltipItem={\n              <Text $renderAs=\"ab3\" $color=\"WHITE\">\n                Coming Soon\n              </Text>\n            }\n          >\n            <Styled.InfiniteButtonWrapper\n              onClick={enableInfiniteMode ? handleInfiniteModeClick : undefined}\n            >\n              <Styled.AbsoluteView>\n                <LottieAnimation src={LOTTIE.INFINITE_BUTTON_BG} />\n              </Styled.AbsoluteView>\n              <Styled.AbsoluteView>\n                <LottieAnimation src={LOTTIE.INFINITE_BUTTON_SYMBOL} />\n              </Styled.AbsoluteView>\n            </Styled.InfiniteButtonWrapper>\n          </ArrowTooltip>\n\n          {/* card shadow */}\n          <Styled.TableSegmentCardShadowContainer />\n\n          {/* table segments */}\n          {data.tableList.map((table, index) => {\n            const segmentAngle = 360 / data.tableList.length;\n            const startAngle = -(90 + 360 / (2 * data.tableList.length));\n            const currentAngle = startAngle + segmentAngle * (index + 1);\n\n            return (\n              <Styled.TableSegment\n                key={index}\n                $angle={currentAngle}\n                $totalSegments={data.tableList.length}\n                $zIndex={index + 1}\n                onClick={() => handleTableSegmentClick(table)}\n                onMouseOver={() => handleTableSegmentMouseOver(table)}\n                onMouseLeave={handleTableSegmentMouseLeave}\n              >\n                <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n                  {['sequence', 'random', 'advance'].map(star => (\n                    <Styled.TableStar\n                      key={star}\n                      $isStarAchieved={table.stars.includes(star as TTableMode)}\n                    />\n                  ))}\n                  <Separator width={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 22 : 14} />\n\n                  <Styled.TableNumber $angle={-currentAngle}>\n                    <Text\n                      $renderAs={\n                        GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n                      }\n                      $color={highlightedTable === table.tableNumber ? 'BLACK_1' : 'WHITE'}\n                    >\n                      {table.tableNumber}\n                    </Text>\n                  </Styled.TableNumber>\n                </FlexView>\n              </Styled.TableSegment>\n            );\n          })}\n        </Styled.TableSegmentsWrapper>\n\n        {/* table modes */}\n        {revealTableModes.tableNumber > 0 && (\n          <Styled.TableModeContainer>\n            <Styled.TableModeWrapper>\n              {/* tables modes with back button */}\n              <Styled.AnimatedView animation={fadeIn ? 'fade-in' : 'fade-out'}>\n                {tableModes.map((tableMode, index) => (\n                  <>\n                    <Styled.ModeOverlay\n                      key={index + 'modeoverlay'}\n                      $top={tableMode.semicirclePosiiionTop}\n                      $left={tableMode.semicirclePosiiionLeft}\n                      $hoverColor={tableMode.semicircleHoverColor}\n                      onClick={() => (fadeIn ? handleNormalModeClick(tableMode.type) : undefined)}\n                      onMouseOver={() =>\n                        fadeIn ? handleModeMouseOver(tableMode.type as TTableMode) : undefined\n                      }\n                      onMouseLeave={fadeIn ? handleModeMouseLeave : undefined}\n                    />\n                    <Styled.AbsoluteView\n                      key={index + 'modes'}\n                      $top={tableMode.top}\n                      $left={tableMode.left}\n                      onClick={fadeIn ? tableMode.onClick : undefined}\n                      $isPointerEventsNone={true}\n                    >\n                      <TableMode\n                        tableNumber={tableMode.tableNumber}\n                        isStarAchieved={tableMode.isStarAchieved}\n                        type={tableMode.type as TTableMode}\n                      />\n                    </Styled.AbsoluteView>\n                  </>\n                ))}\n                {/* back button */}\n                <Styled.AbsoluteView $top={50} $left={50} $alignCenter={true}>\n                  <Styled.IconWrapper>\n                    <Back2Icon\n                      onClick={goBack}\n                      height={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 40 : 32}\n                      width={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 40 : 32}\n                    />\n                  </Styled.IconWrapper>\n                </Styled.AbsoluteView>\n              </Styled.AnimatedView>\n\n              {/* overlay lottie for modes */}\n              <LottieAnimation\n                src={LOTTIE.TABLE_MODE_REVEAL}\n                ref={revealAnimationRef}\n                settings={animationSettings}\n                onRender={showTableModes}\n              />\n            </Styled.TableModeWrapper>\n          </Styled.TableModeContainer>\n        )}\n      </Styled.CardWrapper>\n    </CardContainer>\n  );\n});\n"],"names":["animationSettings","TablesCard","memo","data","label","onPress","playButtonSound","useCircleSounds","fadeIn","setFadeIn","useState","highlightedTable","setHighlightedTable","highlightedLevel","setHighlightedLevel","labelColor","setLabelColor","revealTableModes","setRevealTableModes","enableInfiniteMode","revealAnimationRef","useRef","disappearAnimationTimer","handleTableSegmentClick","useCallback","table","handleTableSegmentMouseOver","handleTableSegmentMouseLeave","goBack","time","TABLE_REVEAL_ANIMATION","_a","showTableModes","handleModeMouseOver","type","level","TABLE_MODE_LABEL_COLOR","handleModeMouseLeave","revealTableModesMemo","useMemo","tableModes","handleInfiniteModeClick","handleNormalModeClick","mode","getHighlightedText","useEffect","jsx","CardContainer","jsxs","Styled.CardWrapper","Styled.TableSegmentsWrapper","ArrowTooltip","Text","Styled.InfiniteButtonWrapper","Styled.AbsoluteView","LottieAnimation","LOTTIE","Styled.TableSegmentCardShadowContainer","index","segmentAngle","currentAngle","Styled.TableSegment","FlexView","star","Styled.TableStar","Separator","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","Styled.TableNumber","Styled.TableModeContainer","Styled.TableModeWrapper","Styled.AnimatedView","tableMode","Fragment","Styled.ModeOverlay","TableMode","Styled.IconWrapper","Back2Icon"],"mappings":"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"}
+{"version":3,"file":"tables-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/tables-card/tables-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type {\n  ITableInfo,\n  TTableMode,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITablesCardProps } from './tables-card-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Back2Icon from '../../../../../assets/line-icons/icons/back2';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\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 { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { CardContainer } from '../card-container/card-container';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../card-container/constants';\nimport { TABLE_MODE_LABEL_COLOR, TABLE_REVEAL_ANIMATION } from './constants';\nimport TableMode from './table-mode/table-mode';\nimport * as Styled from './tables-card-styled';\nimport { useUIContext } from '../../../../ui/context/context';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\n\nconst animationSettings = {\n  loop: false,\n  autoplay: false,\n  render: 'svg',\n};\n\nexport const TablesCard: FC<ITablesCardProps> = memo(({ data, label, onPress }) => {\n  const { onEvent: trackEvent } = useUIContext();\n  const { playButtonSound } = useCircleSounds();\n  const [fadeIn, setFadeIn] = useState(true);\n  const [highlightedTable, setHighlightedTable] = useState<number | null>(null);\n  const [highlightedLevel, setHighlightedLevel] = useState<number | null>(null);\n  const [labelColor, setLabelColor] = useState<TColorNames>('WHITE_T_60');\n  const [revealTableModes, setRevealTableModes] = useState<ITableInfo>({\n    stars: [],\n    tableNumber: 0,\n  });\n  const [enableInfiniteMode] = useState(false);\n\n  const revealAnimationRef = useRef<ILottieAnimationRef | null>(null);\n  const disappearAnimationTimer = useRef<ReturnType<typeof setTimeout>>();\n\n  const handleTableSegmentClick = useCallback(\n    (table: ITableInfo) => {\n      playButtonSound();\n      setFadeIn(true);\n      setHighlightedTable(table.tableNumber);\n      setRevealTableModes({ ...table });\n      trackEvent(GAME_LAUNCHER_ANALYTICS_EVENTS.TABLE_SELECTED, {\n        mata: {\n          table_of: table.tableNumber,\n        },\n      });\n    },\n    [playButtonSound],\n  );\n\n  const handleTableSegmentMouseOver = useCallback((table: ITableInfo) => {\n    setLabelColor('WHITE_T_87');\n    setHighlightedTable(table.tableNumber);\n  }, []);\n\n  const handleTableSegmentMouseLeave = useCallback(() => {\n    setLabelColor('WHITE_T_60');\n    !revealTableModes.tableNumber && setHighlightedTable(null);\n  }, [revealTableModes.tableNumber]);\n\n  const goBack = useCallback(() => {\n    playButtonSound();\n    setFadeIn(false);\n    setHighlightedTable(null);\n    const time = (TABLE_REVEAL_ANIMATION.DISAPPEAR[1] - TABLE_REVEAL_ANIMATION.DISAPPEAR[0]) / 30;\n\n    revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.DISAPPEAR, true);\n    disappearAnimationTimer.current = setTimeout(() => {\n      setRevealTableModes({ stars: [], tableNumber: 0 });\n    }, time * 1000);\n  }, [playButtonSound]);\n\n  const showTableModes = useCallback(() => {\n    revealAnimationRef.current?.playSegments(TABLE_REVEAL_ANIMATION.REVEAL, true);\n  }, []);\n\n  const handleModeMouseOver = useCallback((type: TTableMode) => {\n    const level: Partial<Record<TTableMode, number>> = {\n      sequence: 1,\n      random: 2,\n      advance: 3,\n    };\n\n    setLabelColor(TABLE_MODE_LABEL_COLOR[type] ?? 'WHITE_T_60');\n    setHighlightedLevel(level[type] ?? 0);\n  }, []);\n\n  const handleModeMouseLeave = useCallback(() => {\n    setHighlightedLevel(null);\n    setLabelColor('WHITE_T_60');\n  }, []);\n\n  const revealTableModesMemo = useMemo(() => revealTableModes, [revealTableModes]);\n\n  const tableModes = useMemo(() => {\n    return [\n      {\n        top: 20,\n        left: 10.5,\n        type: 'sequence' as TTableMode,\n        tableNumber: revealTableModesMemo.tableNumber,\n        isStarAchieved: revealTableModesMemo.stars.includes('sequence'),\n        semicirclePosiiionTop: '-19%',\n        semicirclePosiiionLeft: '-43%',\n        semicircleHoverColor: '#B259004D',\n      },\n      {\n        top: 20,\n        left: 65.5,\n        type: 'random' as TTableMode,\n        tableNumber: revealTableModesMemo.tableNumber,\n        isStarAchieved: revealTableModesMemo.stars.includes('random'),\n        semicirclePosiiionTop: '-19%',\n        semicirclePosiiionLeft: '65%',\n        semicircleHoverColor: '#0055CC4D',\n      },\n      {\n        top: 66,\n        left: 38,\n        type: 'advance' as TTableMode,\n        tableNumber: revealTableModesMemo.tableNumber,\n        isStarAchieved: revealTableModesMemo.stars.includes('advance'),\n        semicirclePosiiionTop: '74%',\n        semicirclePosiiionLeft: '11%',\n        semicircleHoverColor: '#A9099C4D',\n      },\n    ];\n  }, [revealTableModesMemo.tableNumber, revealTableModesMemo.stars, onPress]);\n\n  // Disabled infinite mode\n  const handleInfiniteModeClick = useCallback(() => {\n    onPress({\n      mode: 'infinite',\n      infiniteModeHighScore: data.infiniteModeHighScore,\n    });\n  }, [onPress, data.infiniteModeHighScore]);\n\n  const handleNormalModeClick = useCallback(\n    (mode: TTableMode, isStarRewarded: boolean) => {\n      onPress({\n        mode,\n        tableNumber: revealTableModes.tableNumber,\n        isStarRewarded,\n      });\n    },\n    [onPress, revealTableModes.tableNumber],\n  );\n\n  const getHighlightedText = useCallback(() => {\n    if (highlightedLevel) {\n      return `${highlightedTable}× LEVEL${highlightedLevel}`;\n    }\n\n    return highlightedTable ? `${highlightedTable}× Table` : label;\n  }, [highlightedLevel, highlightedTable, label]);\n\n  useEffect(() => {\n    return () => {\n      disappearAnimationTimer.current && clearTimeout(disappearAnimationTimer.current);\n    };\n  }, []);\n\n  return (\n    <CardContainer\n      strokeColor=\"WHITE\"\n      label={getHighlightedText()}\n      isAnimated={false}\n      labelColor={labelColor}\n    >\n      <Styled.CardWrapper>\n        {/* table selection */}\n        <Styled.TableSegmentsWrapper>\n          {/* infinite button */}\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"top\"\n            hidden={enableInfiniteMode}\n            tooltipItem={\n              <Text $renderAs=\"ab3\" $color=\"WHITE\">\n                Coming Soon\n              </Text>\n            }\n          >\n            <Styled.InfiniteButtonWrapper\n              onClick={enableInfiniteMode ? handleInfiniteModeClick : undefined}\n            >\n              <Styled.AbsoluteView>\n                <LottieAnimation src={LOTTIE.INFINITE_BUTTON_BG} />\n              </Styled.AbsoluteView>\n              <Styled.AbsoluteView>\n                <LottieAnimation src={LOTTIE.INFINITE_BUTTON_SYMBOL} />\n              </Styled.AbsoluteView>\n            </Styled.InfiniteButtonWrapper>\n          </ArrowTooltip>\n\n          {/* card shadow */}\n          <Styled.TableSegmentCardShadowContainer />\n\n          {/* table segments */}\n          {data.tableList.map((table, index) => {\n            const segmentAngle = 360 / data.tableList.length;\n            const startAngle = -(90 + 360 / (2 * data.tableList.length));\n            const currentAngle = startAngle + segmentAngle * (index + 1);\n\n            return (\n              <Styled.TableSegment\n                key={index}\n                $angle={currentAngle}\n                $totalSegments={data.tableList.length}\n                $zIndex={index + 1}\n                onClick={() => handleTableSegmentClick(table)}\n                onMouseOver={() => handleTableSegmentMouseOver(table)}\n                onMouseLeave={handleTableSegmentMouseLeave}\n              >\n                <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n                  {['sequence', 'random', 'advance'].map(star => (\n                    <Styled.TableStar\n                      key={star}\n                      $isStarAchieved={table.stars.includes(star as TTableMode)}\n                    />\n                  ))}\n                  <Separator width={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 22 : 14} />\n\n                  <Styled.TableNumber $angle={-currentAngle}>\n                    <Text\n                      $renderAs={\n                        GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n                      }\n                      $color={highlightedTable === table.tableNumber ? 'BLACK_1' : 'WHITE'}\n                    >\n                      {table.tableNumber}\n                    </Text>\n                  </Styled.TableNumber>\n                </FlexView>\n              </Styled.TableSegment>\n            );\n          })}\n        </Styled.TableSegmentsWrapper>\n\n        {/* table modes */}\n        {revealTableModes.tableNumber > 0 && (\n          <Styled.TableModeContainer>\n            <Styled.TableModeWrapper>\n              {/* tables modes with back button */}\n              <Styled.AnimatedView animation={fadeIn ? 'fade-in' : 'fade-out'}>\n                {tableModes.map((tableMode, index) => (\n                  <>\n                    <Styled.ModeOverlay\n                      key={index + 'modeoverlay'}\n                      $top={tableMode.semicirclePosiiionTop}\n                      $left={tableMode.semicirclePosiiionLeft}\n                      $hoverColor={tableMode.semicircleHoverColor}\n                      onClick={() =>\n                        fadeIn\n                          ? handleNormalModeClick(tableMode.type, tableMode.isStarAchieved)\n                          : undefined\n                      }\n                      onMouseOver={() =>\n                        fadeIn ? handleModeMouseOver(tableMode.type as TTableMode) : undefined\n                      }\n                      onMouseLeave={fadeIn ? handleModeMouseLeave : undefined}\n                    />\n                    <Styled.AbsoluteView\n                      key={index + 'modes'}\n                      $top={tableMode.top}\n                      $left={tableMode.left}\n                      $isPointerEventsNone={true}\n                    >\n                      <TableMode\n                        tableNumber={tableMode.tableNumber}\n                        isStarAchieved={tableMode.isStarAchieved}\n                        type={tableMode.type as TTableMode}\n                      />\n                    </Styled.AbsoluteView>\n                  </>\n                ))}\n                {/* back button */}\n                <Styled.AbsoluteView $top={50} $left={50} $alignCenter={true}>\n                  <Styled.IconWrapper>\n                    <Back2Icon\n                      onClick={goBack}\n                      height={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 40 : 32}\n                      width={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 40 : 32}\n                    />\n                  </Styled.IconWrapper>\n                </Styled.AbsoluteView>\n              </Styled.AnimatedView>\n\n              {/* overlay lottie for modes */}\n              <LottieAnimation\n                src={LOTTIE.TABLE_MODE_REVEAL}\n                ref={revealAnimationRef}\n                settings={animationSettings}\n                onRender={showTableModes}\n              />\n            </Styled.TableModeWrapper>\n          </Styled.TableModeContainer>\n        )}\n      </Styled.CardWrapper>\n    </CardContainer>\n  );\n});\n"],"names":["animationSettings","TablesCard","memo","data","label","onPress","trackEvent","useUIContext","playButtonSound","useCircleSounds","fadeIn","setFadeIn","useState","highlightedTable","setHighlightedTable","highlightedLevel","setHighlightedLevel","labelColor","setLabelColor","revealTableModes","setRevealTableModes","enableInfiniteMode","revealAnimationRef","useRef","disappearAnimationTimer","handleTableSegmentClick","useCallback","table","GAME_LAUNCHER_ANALYTICS_EVENTS","handleTableSegmentMouseOver","handleTableSegmentMouseLeave","goBack","time","TABLE_REVEAL_ANIMATION","_a","showTableModes","handleModeMouseOver","type","level","TABLE_MODE_LABEL_COLOR","handleModeMouseLeave","revealTableModesMemo","useMemo","tableModes","handleInfiniteModeClick","handleNormalModeClick","mode","isStarRewarded","getHighlightedText","useEffect","jsx","CardContainer","jsxs","Styled.CardWrapper","Styled.TableSegmentsWrapper","ArrowTooltip","Text","Styled.InfiniteButtonWrapper","Styled.AbsoluteView","LottieAnimation","LOTTIE","Styled.TableSegmentCardShadowContainer","index","segmentAngle","currentAngle","Styled.TableSegment","FlexView","star","Styled.TableStar","Separator","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","Styled.TableNumber","Styled.TableModeContainer","Styled.TableModeWrapper","Styled.AnimatedView","tableMode","Fragment","Styled.ModeOverlay","TableMode","Styled.IconWrapper","Back2Icon"],"mappings":"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"}

package/dist/features/circle-games/game-launcher/game-launcher-analytics-events.js

@@ -1,11 +1,12 @@
-import { PLUGINS as i } from "../../../node_modules/@cuemath/analytics-v2/dist/constants.js";
-var I = /* @__PURE__ */ ((t) => (t.NEXT_ACTIVITY = "next_activity", t.PREV_ACTIVITY = "prev_activity", t.JOURNEY_NEXT_ACTIVITY = "journey_next_activity", t))(I || {});
-const e = {
-  next_activity: [i.MIXPANEL],
-  prev_activity: [i.MIXPANEL]
+import { PLUGINS as e } from "../../../node_modules/@cuemath/analytics-v2/dist/constants.js";
+var i = /* @__PURE__ */ ((t) => (t.NEXT_ACTIVITY = "next_activity", t.PREV_ACTIVITY = "prev_activity", t.JOURNEY_NEXT_ACTIVITY = "journey_next_activity", t.TABLE_SELECTED = "table_selected", t))(i || {});
+const r = {
+  next_activity: [e.MIXPANEL],
+  prev_activity: [e.MIXPANEL],
+  table_selected: [e.MIXPANEL]
 };
 export {
-  I as GAME_LAUNCHER_ANALYTICS_EVENTS,
-  e as GAME_LAUNCHER_ANALYTICS_WHITELIST_EVENTS
+  i as GAME_LAUNCHER_ANALYTICS_EVENTS,
+  r as GAME_LAUNCHER_ANALYTICS_WHITELIST_EVENTS
 };
 //# sourceMappingURL=game-launcher-analytics-events.js.map

package/dist/features/circle-games/game-launcher/game-launcher-analytics-events.js.map

@@ -1 +1 @@
-{"version":3,"file":"game-launcher-analytics-events.js","sources":["../../../../src/features/circle-games/game-launcher/game-launcher-analytics-events.ts"],"sourcesContent":["import { PLUGINS } from '@cuemath/analytics-v2/dist/constants';\n\nexport enum GAME_LAUNCHER_ANALYTICS_EVENTS {\n  NEXT_ACTIVITY = 'next_activity',\n  PREV_ACTIVITY = 'prev_activity',\n  JOURNEY_NEXT_ACTIVITY = 'journey_next_activity',\n}\n\nexport const GAME_LAUNCHER_ANALYTICS_WHITELIST_EVENTS = {\n  [GAME_LAUNCHER_ANALYTICS_EVENTS.NEXT_ACTIVITY]: [PLUGINS.MIXPANEL],\n  [GAME_LAUNCHER_ANALYTICS_EVENTS.PREV_ACTIVITY]: [PLUGINS.MIXPANEL],\n};\n"],"names":["GAME_LAUNCHER_ANALYTICS_EVENTS","GAME_LAUNCHER_ANALYTICS_WHITELIST_EVENTS","PLUGINS"],"mappings":";AAEY,IAAAA,sBAAAA,OACVA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAChBA,EAAA,wBAAwB,yBAHdA,IAAAA,KAAA,CAAA,CAAA;AAML,MAAMC,IAA2C;AAAA,EACrD,eAA+C,CAACC,EAAQ,QAAQ;AAAA,EAChE,eAA+C,CAACA,EAAQ,QAAQ;AACnE;"}
+{"version":3,"file":"game-launcher-analytics-events.js","sources":["../../../../src/features/circle-games/game-launcher/game-launcher-analytics-events.ts"],"sourcesContent":["import { PLUGINS } from '@cuemath/analytics-v2/dist/constants';\n\nexport enum GAME_LAUNCHER_ANALYTICS_EVENTS {\n  NEXT_ACTIVITY = 'next_activity',\n  PREV_ACTIVITY = 'prev_activity',\n  JOURNEY_NEXT_ACTIVITY = 'journey_next_activity',\n  TABLE_SELECTED = 'table_selected',\n}\n\nexport const GAME_LAUNCHER_ANALYTICS_WHITELIST_EVENTS = {\n  [GAME_LAUNCHER_ANALYTICS_EVENTS.NEXT_ACTIVITY]: [PLUGINS.MIXPANEL],\n  [GAME_LAUNCHER_ANALYTICS_EVENTS.PREV_ACTIVITY]: [PLUGINS.MIXPANEL],\n  [GAME_LAUNCHER_ANALYTICS_EVENTS.TABLE_SELECTED]: [PLUGINS.MIXPANEL],\n};\n"],"names":["GAME_LAUNCHER_ANALYTICS_EVENTS","GAME_LAUNCHER_ANALYTICS_WHITELIST_EVENTS","PLUGINS"],"mappings":";AAEY,IAAAA,sBAAAA,OACVA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAChBA,EAAA,wBAAwB,yBACxBA,EAAA,iBAAiB,kBAJPA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAA2C;AAAA,EACrD,eAA+C,CAACC,EAAQ,QAAQ;AAAA,EAChE,eAA+C,CAACA,EAAQ,QAAQ;AAAA,EAChE,gBAAgD,CAACA,EAAQ,QAAQ;AACpE;"}

package/dist/features/post-game-stats/digital-meter/digital-meter.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as r, Fragment as E } from "react/jsx-runtime";
-import { memo as G, useState as O, useEffect as W } from "react";
-import { LOTTIE as M } from "../../../assets/lottie/lottie.js";
+import { memo as G, useState as O, useEffect as M } from "react";
+import { LOTTIE as W } from "../../../assets/lottie/lottie.js";
 import { GAME_LAUNCHER_SIZE as d } from "../../circle-games/game-launcher/comps/card-container/constants.js";
 import a from "../../ui/layout/flex-view.js";
 import y from "../../ui/lottie-animation/lottie-animation.js";
@@ -10,11 +10,11 @@ import { NumberCountAnimation as w } from "../number-count-animation/number-coun
 import { AnimatedArc as _ } from "./comp/animated-arc/animated-arc.js";
 import { TARGET_ACHIEVED_DELAY as L, TOTAL_ARC_AVAILABLE as A, BORDER_OFFSET as $, PROGRESS_FILL_DURATION as s, PROGRESS_FILL_DELAY as f, TOTAL_ANIMATION_DURATION as B } from "./constants.js";
 import { DigitalMeter as u, ContentContainer as P, NumberCountContainer as U, RainboxColorText as g, LineMarking as C, MarkingContainer as D, MarkingText as N, BottomAbsoluteView as S, HelperTextPrimary as j, HelperTextSecondary as Y } from "./digital-meter-styled.js";
-const nr = G(
+const or = G(
   ({
     show: T,
     value: m,
-    maxValue: o,
+    maxValue: n,
     targetValue: i = 0,
     displayText: b,
     progressType: h,
@@ -23,15 +23,15 @@ const nr = G(
     onComplete: I
   }) => {
     const [l, F] = O(!1);
-    return W(() => {
-      let n, e;
+    return M(() => {
+      let o, e;
       const t = !!(i && m >= i);
-      return T && (t && (n = setTimeout(() => {
+      return T && (t && (o = setTimeout(() => {
         F(!0);
       }, L * 1e3)), e = setTimeout(() => {
         I();
       }, (t ? B : L) * 1e3)), () => {
-        n && clearTimeout(n), e && clearTimeout(e);
+        o && clearTimeout(o), e && clearTimeout(e);
       };
     }, [T, m, i, I]), T ? /* @__PURE__ */ c(u, { $isTargetAchieved: l, children: [
       /* @__PURE__ */ r(
@@ -56,7 +56,7 @@ const nr = G(
                 w,
                 {
                   initialValue: 0,
-                  targetValue: m,
+                  targetValue: Math.floor(m),
                   durationInSec: s,
                   delayInSec: f
                 }
@@ -65,14 +65,14 @@ const nr = G(
           ) }),
           h === "stepper" && /* @__PURE__ */ c(R, { $renderAs: "ac2", $color: "WHITE", children: [
             "/",
-            o
+            n
           ] })
         ] }),
         /* @__PURE__ */ r(p, { height: 8 }),
         /* @__PURE__ */ r(R, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: b })
       ] }) }),
-      h === "stepper" && Array.from({ length: m }, (n, e) => {
-        const t = A / o;
+      h === "stepper" && Array.from({ length: m }, (o, e) => {
+        const t = A / n;
         return /* @__PURE__ */ r(
           _,
           {
@@ -82,15 +82,15 @@ const nr = G(
             color: "GREEN_4",
             radius: (d - $) / 2,
             mode: "fade",
-            duration: s / o,
-            delay: f + s / o * e,
+            duration: s / n,
+            delay: f + s / n * e,
             playRainbowColors: l
           },
           e
         );
       }),
-      h === "stepper" && Array.from({ length: o + 1 }, (n, e) => {
-        const t = A / o;
+      h === "stepper" && Array.from({ length: n + 1 }, (o, e) => {
+        const t = A / n;
         return /* @__PURE__ */ c(E, { children: [
           /* @__PURE__ */ r(C, { $angle: t * e }, e + "linemarking"),
           /* @__PURE__ */ r(D, { $angle: t * e, children: /* @__PURE__ */ r(N, { $angle: t * e, children: /* @__PURE__ */ r(
@@ -108,7 +108,7 @@ const nr = G(
         /* @__PURE__ */ r(
           _,
           {
-            targetAngle: m * A / o,
+            targetAngle: m * A / n,
             strokeWidth: 12,
             color: "GREEN_4",
             radius: (d - $) / 2,
@@ -118,18 +118,18 @@ const nr = G(
           }
         ),
         /* @__PURE__ */ c(E, { children: [
-          i && /* @__PURE__ */ r(C, { $angle: i * A / o }),
-          Array.from(/* @__PURE__ */ new Set([0, i, o])).map((n, e) => /* @__PURE__ */ r(
+          i && /* @__PURE__ */ r(C, { $angle: i * A / n }),
+          Array.from(/* @__PURE__ */ new Set([0, i, n])).map((o, e) => /* @__PURE__ */ r(
             D,
             {
-              $angle: n * A / o,
-              children: /* @__PURE__ */ r(N, { $angle: n * A / o, children: /* @__PURE__ */ r(
+              $angle: o * A / n,
+              children: /* @__PURE__ */ r(N, { $angle: o * A / n, children: /* @__PURE__ */ r(
                 g,
                 {
                   $renderAs: "ac4-black",
-                  $color: i && n === i ? "GREEN_4" : "WHITE_T_60",
-                  $isTargetAchieved: m >= n && l && n === i,
-                  children: n
+                  $color: i && o === i ? "GREEN_4" : "WHITE_T_60",
+                  $isTargetAchieved: m >= o && l && o === i,
+                  children: o
                 }
               ) })
             },
@@ -137,7 +137,7 @@ const nr = G(
           ))
         ] })
       ] }),
-      l && /* @__PURE__ */ r(S, { top: d, children: /* @__PURE__ */ r(y, { src: M.TARGET_ACHIEVED_TEXT }) }),
+      l && /* @__PURE__ */ r(S, { top: d, children: /* @__PURE__ */ r(y, { src: W.TARGET_ACHIEVED_TEXT }) }),
       !l && /* @__PURE__ */ c(S, { top: d, children: [
         /* @__PURE__ */ r(p, { height: 25 }),
         /* @__PURE__ */ c(a, { $flexDirection: "column", $alignItems: "center", children: [
@@ -149,6 +149,6 @@ const nr = G(
   }
 );
 export {
-  nr as DigitalMeter
+  or as DigitalMeter
 };
 //# sourceMappingURL=digital-meter.js.map

package/dist/features/post-game-stats/digital-meter/digital-meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"digital-meter.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter.tsx"],"sourcesContent":["import type { IDigitalMeterProps } from './digital-meter-types';\nimport type { FC } from 'react';\n\nimport { memo, useEffect, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\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 { NumberCountAnimation } from '../number-count-animation/number-count-animation';\nimport { AnimatedArc } from './comp/animated-arc/animated-arc';\nimport {\n  BORDER_OFFSET,\n  PROGRESS_FILL_DELAY,\n  PROGRESS_FILL_DURATION,\n  TARGET_ACHIEVED_DELAY,\n  TOTAL_ANIMATION_DURATION,\n  TOTAL_ARC_AVAILABLE,\n} from './constants';\nimport * as Styled from './digital-meter-styled';\n\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n  ({\n    show,\n    value,\n    maxValue,\n    targetValue = 0,\n    displayText,\n    progressType,\n    helperTextPrimary,\n    helperTextSecondary,\n    onComplete,\n  }) => {\n    const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n\n    useEffect(() => {\n      let timer: ReturnType<typeof setTimeout>;\n      let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n      const isTargetAchievedFlag = !!(targetValue && value >= targetValue);\n\n      if (show) {\n        if (isTargetAchievedFlag) {\n          timer = setTimeout(() => {\n            setIsTargetAchieved(true);\n          }, TARGET_ACHIEVED_DELAY * 1000);\n        }\n\n        const timeToFinishAnimation = isTargetAchievedFlag\n          ? TOTAL_ANIMATION_DURATION\n          : TARGET_ACHIEVED_DELAY;\n\n        timerForAnimationComplete = setTimeout(() => {\n          onComplete();\n        }, timeToFinishAnimation * 1000);\n      }\n\n      return () => {\n        timer && clearTimeout(timer);\n        timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n      };\n    }, [show, value, targetValue, onComplete]);\n\n    if (show) {\n      return (\n        <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n          {/* complete arc area to be filled */}\n          <AnimatedArc\n            targetAngle={TOTAL_ARC_AVAILABLE}\n            strokeWidth={16}\n            color=\"BLACK_5\"\n            radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n            duration={0}\n          />\n\n          {/* center area for the content */}\n          <Styled.ContentContainer>\n            <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n              <FlexView $flexDirection=\"row\" $alignItems=\"flex-end\">\n                <Styled.NumberCountContainer>\n                  <Styled.RainboxColorText\n                    $renderAs=\"ah1\"\n                    $color=\"GREEN_4\"\n                    $isTargetAchieved={isTargetAchieved}\n                  >\n                    <NumberCountAnimation\n                      initialValue={0}\n                      targetValue={value}\n                      durationInSec={PROGRESS_FILL_DURATION}\n                      delayInSec={PROGRESS_FILL_DELAY}\n                    />\n                  </Styled.RainboxColorText>\n                </Styled.NumberCountContainer>\n                {progressType === 'stepper' && (\n                  <Text $renderAs=\"ac2\" $color=\"WHITE\">\n                    /{maxValue}\n                  </Text>\n                )}\n              </FlexView>\n              <Separator height={8} />\n              <Text $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n                {displayText}\n              </Text>\n            </FlexView>\n          </Styled.ContentContainer>\n\n          {/* stepper animation */}\n          {progressType === 'stepper' &&\n            Array.from({ length: value }, (_, index) => {\n              const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n              return (\n                <AnimatedArc\n                  key={index}\n                  startAngle={arcLength * index}\n                  targetAngle={arcLength}\n                  strokeWidth={12}\n                  color=\"GREEN_4\"\n                  radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n                  mode=\"fade\"\n                  duration={PROGRESS_FILL_DURATION / maxValue}\n                  delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n                  playRainbowColors={isTargetAchieved}\n                />\n              );\n            })}\n\n          {/* numbers with markings */}\n          {progressType === 'stepper' &&\n            Array.from({ length: maxValue + 1 }, (_, index) => {\n              const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n              return (\n                <>\n                  <Styled.LineMarking key={index + 'linemarking'} $angle={arcLength * index} />\n\n                  <Styled.MarkingContainer key={index} $angle={arcLength * index}>\n                    <Styled.MarkingText $angle={arcLength * index}>\n                      <Styled.RainboxColorText\n                        $renderAs=\"ac4-black\"\n                        $isTargetAchieved={index === targetValue && isTargetAchieved}\n                        $color={targetValue && index === targetValue ? 'GREEN_4' : 'WHITE_T_60'}\n                      >\n                        {index}\n                      </Styled.RainboxColorText>\n                    </Styled.MarkingText>\n                  </Styled.MarkingContainer>\n                </>\n              );\n            })}\n\n          {/* progress of linear */}\n          {progressType === 'linear' && (\n            <>\n              <AnimatedArc\n                targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n                strokeWidth={12}\n                color=\"GREEN_4\"\n                radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n                duration={PROGRESS_FILL_DURATION}\n                delay={PROGRESS_FILL_DELAY}\n                playRainbowColors={isTargetAchieved}\n              />\n              <>\n                {/* target line marking */}\n                {targetValue && (\n                  <Styled.LineMarking $angle={(targetValue * TOTAL_ARC_AVAILABLE) / maxValue} />\n                )}\n\n                {/* all markings */}\n                {Array.from(new Set([0, targetValue, maxValue])).map((val, index) => (\n                  <Styled.MarkingContainer\n                    key={index}\n                    $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}\n                  >\n                    <Styled.MarkingText $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}>\n                      <Styled.RainboxColorText\n                        $renderAs=\"ac4-black\"\n                        $color={targetValue && val === targetValue ? 'GREEN_4' : 'WHITE_T_60'}\n                        $isTargetAchieved={value >= val && isTargetAchieved && val === targetValue}\n                      >\n                        {val}\n                      </Styled.RainboxColorText>\n                    </Styled.MarkingText>\n                  </Styled.MarkingContainer>\n                ))}\n              </>\n            </>\n          )}\n\n          {/* helper text below the animation */}\n          {isTargetAchieved && (\n            <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n              <LottieAnimation src={LOTTIE.TARGET_ACHIEVED_TEXT} />\n            </Styled.BottomAbsoluteView>\n          )}\n          {!isTargetAchieved && (\n            <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n              <Separator height={25} />\n              <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n                <Styled.HelperTextPrimary $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n                  {helperTextPrimary}\n                </Styled.HelperTextPrimary>\n                <Styled.HelperTextSecondary $renderAs=\"ab1\" $color=\"WHITE\">\n                  {helperTextSecondary}\n                </Styled.HelperTextSecondary>\n              </FlexView>\n            </Styled.BottomAbsoluteView>\n          )}\n        </Styled.DigitalMeter>\n      );\n    }\n\n    return null;\n  },\n);\n"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","isTargetAchieved","setIsTargetAchieved","useState","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","GAME_LAUNCHER_SIZE","BORDER_OFFSET","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","Fragment","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}
+{"version":3,"file":"digital-meter.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter.tsx"],"sourcesContent":["import type { IDigitalMeterProps } from './digital-meter-types';\nimport type { FC } from 'react';\n\nimport { memo, useEffect, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\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 { NumberCountAnimation } from '../number-count-animation/number-count-animation';\nimport { AnimatedArc } from './comp/animated-arc/animated-arc';\nimport {\n  BORDER_OFFSET,\n  PROGRESS_FILL_DELAY,\n  PROGRESS_FILL_DURATION,\n  TARGET_ACHIEVED_DELAY,\n  TOTAL_ANIMATION_DURATION,\n  TOTAL_ARC_AVAILABLE,\n} from './constants';\nimport * as Styled from './digital-meter-styled';\n\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n  ({\n    show,\n    value,\n    maxValue,\n    targetValue = 0,\n    displayText,\n    progressType,\n    helperTextPrimary,\n    helperTextSecondary,\n    onComplete,\n  }) => {\n    const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n\n    useEffect(() => {\n      let timer: ReturnType<typeof setTimeout>;\n      let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n      const isTargetAchievedFlag = !!(targetValue && value >= targetValue);\n\n      if (show) {\n        if (isTargetAchievedFlag) {\n          timer = setTimeout(() => {\n            setIsTargetAchieved(true);\n          }, TARGET_ACHIEVED_DELAY * 1000);\n        }\n\n        const timeToFinishAnimation = isTargetAchievedFlag\n          ? TOTAL_ANIMATION_DURATION\n          : TARGET_ACHIEVED_DELAY;\n\n        timerForAnimationComplete = setTimeout(() => {\n          onComplete();\n        }, timeToFinishAnimation * 1000);\n      }\n\n      return () => {\n        timer && clearTimeout(timer);\n        timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n      };\n    }, [show, value, targetValue, onComplete]);\n\n    if (show) {\n      return (\n        <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n          {/* complete arc area to be filled */}\n          <AnimatedArc\n            targetAngle={TOTAL_ARC_AVAILABLE}\n            strokeWidth={16}\n            color=\"BLACK_5\"\n            radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n            duration={0}\n          />\n\n          {/* center area for the content */}\n          <Styled.ContentContainer>\n            <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n              <FlexView $flexDirection=\"row\" $alignItems=\"flex-end\">\n                <Styled.NumberCountContainer>\n                  <Styled.RainboxColorText\n                    $renderAs=\"ah1\"\n                    $color=\"GREEN_4\"\n                    $isTargetAchieved={isTargetAchieved}\n                  >\n                    <NumberCountAnimation\n                      initialValue={0}\n                      targetValue={Math.floor(value)}\n                      durationInSec={PROGRESS_FILL_DURATION}\n                      delayInSec={PROGRESS_FILL_DELAY}\n                    />\n                  </Styled.RainboxColorText>\n                </Styled.NumberCountContainer>\n                {progressType === 'stepper' && (\n                  <Text $renderAs=\"ac2\" $color=\"WHITE\">\n                    /{maxValue}\n                  </Text>\n                )}\n              </FlexView>\n              <Separator height={8} />\n              <Text $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n                {displayText}\n              </Text>\n            </FlexView>\n          </Styled.ContentContainer>\n\n          {/* stepper animation */}\n          {progressType === 'stepper' &&\n            Array.from({ length: value }, (_, index) => {\n              const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n              return (\n                <AnimatedArc\n                  key={index}\n                  startAngle={arcLength * index}\n                  targetAngle={arcLength}\n                  strokeWidth={12}\n                  color=\"GREEN_4\"\n                  radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n                  mode=\"fade\"\n                  duration={PROGRESS_FILL_DURATION / maxValue}\n                  delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n                  playRainbowColors={isTargetAchieved}\n                />\n              );\n            })}\n\n          {/* numbers with markings */}\n          {progressType === 'stepper' &&\n            Array.from({ length: maxValue + 1 }, (_, index) => {\n              const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n              return (\n                <>\n                  <Styled.LineMarking key={index + 'linemarking'} $angle={arcLength * index} />\n\n                  <Styled.MarkingContainer key={index} $angle={arcLength * index}>\n                    <Styled.MarkingText $angle={arcLength * index}>\n                      <Styled.RainboxColorText\n                        $renderAs=\"ac4-black\"\n                        $isTargetAchieved={index === targetValue && isTargetAchieved}\n                        $color={targetValue && index === targetValue ? 'GREEN_4' : 'WHITE_T_60'}\n                      >\n                        {index}\n                      </Styled.RainboxColorText>\n                    </Styled.MarkingText>\n                  </Styled.MarkingContainer>\n                </>\n              );\n            })}\n\n          {/* progress of linear */}\n          {progressType === 'linear' && (\n            <>\n              <AnimatedArc\n                targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n                strokeWidth={12}\n                color=\"GREEN_4\"\n                radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n                duration={PROGRESS_FILL_DURATION}\n                delay={PROGRESS_FILL_DELAY}\n                playRainbowColors={isTargetAchieved}\n              />\n              <>\n                {/* target line marking */}\n                {targetValue && (\n                  <Styled.LineMarking $angle={(targetValue * TOTAL_ARC_AVAILABLE) / maxValue} />\n                )}\n\n                {/* all markings */}\n                {Array.from(new Set([0, targetValue, maxValue])).map((val, index) => (\n                  <Styled.MarkingContainer\n                    key={index}\n                    $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}\n                  >\n                    <Styled.MarkingText $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}>\n                      <Styled.RainboxColorText\n                        $renderAs=\"ac4-black\"\n                        $color={targetValue && val === targetValue ? 'GREEN_4' : 'WHITE_T_60'}\n                        $isTargetAchieved={value >= val && isTargetAchieved && val === targetValue}\n                      >\n                        {val}\n                      </Styled.RainboxColorText>\n                    </Styled.MarkingText>\n                  </Styled.MarkingContainer>\n                ))}\n              </>\n            </>\n          )}\n\n          {/* helper text below the animation */}\n          {isTargetAchieved && (\n            <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n              <LottieAnimation src={LOTTIE.TARGET_ACHIEVED_TEXT} />\n            </Styled.BottomAbsoluteView>\n          )}\n          {!isTargetAchieved && (\n            <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n              <Separator height={25} />\n              <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n                <Styled.HelperTextPrimary $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n                  {helperTextPrimary}\n                </Styled.HelperTextPrimary>\n                <Styled.HelperTextSecondary $renderAs=\"ab1\" $color=\"WHITE\">\n                  {helperTextSecondary}\n                </Styled.HelperTextSecondary>\n              </FlexView>\n            </Styled.BottomAbsoluteView>\n          )}\n        </Styled.DigitalMeter>\n      );\n    }\n\n    return null;\n  },\n);\n"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","isTargetAchieved","setIsTargetAchieved","useState","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","GAME_LAUNCHER_SIZE","BORDER_OFFSET","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","Fragment","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}

package/dist/index.d.ts

@@ -2599,6 +2599,7 @@ export declare interface ITableDetails {
     mode: TTableMode;
     tableNumber?: number;
     infiniteModeHighScore?: number;
+    isStarRewarded?: boolean;
 }
 
 export declare interface ITableInfo {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "2.8.36-tables-hg8",
+  "version": "2.8.36-tables-hg10",
   "type": "module",
   "files": [
     "dist"