@cuemath/leap 2.8.60-as4 → 2.8.60-beta-0.1

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

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

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

@@ -1,89 +1,87 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import Ae, { forwardRef as be, useState as o, useRef as N, useCallback as i, useMemo as z, useImperativeHandle as Ee, useEffect as K, memo as ge } from "react";
+import he, { forwardRef as Ae, useState as o, useRef as p, useCallback as i, useMemo as Z, useImperativeHandle as be, useEffect as z, memo as Ee } from "react";
 import Ne from "../../../../../assets/line-icons/icons/back2.js";
 import { LOTTIE as R } from "../../../../../assets/lottie/lottie.js";
 import pe from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
 import { useUIContext as Ce } from "../../../../ui/context/context.js";
-import Se from "../../../../ui/layout/flex-view.js";
+import ge from "../../../../ui/layout/flex-view.js";
 import w from "../../../../ui/lottie-animation/lottie-animation.js";
-import Ie from "../../../../ui/separator/separator.js";
-import F from "../../../../ui/text/text.js";
+import Se from "../../../../ui/separator/separator.js";
+import K from "../../../../ui/text/text.js";
 import { useCircleSounds as Le } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
 import { GAME_LAUNCHER_ANALYTICS_EVENTS as fe } from "../../game-launcher-analytics-events.js";
 import { CardContainer as ve } from "../card-container/card-container.js";
-import { GAME_LAUNCHER_SIZE as p, GAME_LAUNCHER_SIZE_LARGE as _e } from "../card-container/constants.js";
-import { TABLE_REVEAL_ANIMATION as C, TABLE_MODE_LABEL_COLOR as Te } from "./constants.js";
-import He from "./table-mode/table-mode.js";
-import $e from "./table-segment-star/table-segment-star.js";
-import { CardWrapper as Re, TableSegmentsWrapper as we, InfiniteButtonWrapper as ye, AbsoluteView as S, TableSegmentCardShadowContainer as We, TableSegment as Be, TableNumber as De, TableModeContainer as Pe, TableModeWrapper as ke, AnimatedView as Ve, ModeOverlay as xe, IconWrapper as Ue } from "./tables-card-styled.js";
-const y = {
-  renderer: "svg"
-}, qe = {
+import { GAME_LAUNCHER_SIZE as C, GAME_LAUNCHER_SIZE_LARGE as Ie } from "../card-container/constants.js";
+import { TABLE_REVEAL_ANIMATION as g, TABLE_MODE_LABEL_COLOR as _e } from "./constants.js";
+import Te from "./table-mode/table-mode.js";
+import He from "./table-segment-star/table-segment-star.js";
+import { CardWrapper as $e, TableSegmentsWrapper as Re, InfiniteButtonWrapper as we, AbsoluteView as S, TableSegmentCardShadowContainer as ye, TableSegment as We, TableNumber as Be, TableModeContainer as De, TableModeWrapper as Pe, AnimatedView as ke, ModeOverlay as Ve, IconWrapper as xe } from "./tables-card-styled.js";
+const Ue = {
   loop: !1,
   autoplay: !1,
-  ...y
-}, je = be(
+  render: "svg"
+}, qe = Ae(
   ({
-    data: l,
-    label: W,
+    data: s,
+    label: y,
     onPress: b,
     openModesOfTable: r,
     defaultTable: E,
-    onGoBackFromTableLevel: g,
-    onPressTableSegment: I
-  }, G) => {
-    var Y;
-    const { onEvent: B } = Ce(), { playButtonSound: m } = Le(), [u, L] = o(!0), [d, h] = o(
+    onGoBackFromTableLevel: N,
+    onPressTableSegment: L
+  }, F) => {
+    var j;
+    const { onEvent: W } = Ce(), { playButtonSound: m } = Le(), [u, f] = o(!0), [d, h] = o(
       (r == null ? void 0 : r.tableNumber) ?? null
-    ), [f, D] = o(null), [J, A] = o("WHITE_T_60"), [c, v] = o({
-      stars: ((Y = l.tableList.find((e) => e.tableNumber === (r == null ? void 0 : r.tableNumber))) == null ? void 0 : Y.stars) ?? [],
+    ), [v, B] = o(null), [G, A] = o("WHITE_T_60"), [c, I] = o({
+      stars: ((j = s.tableList.find((e) => e.tableNumber === (r == null ? void 0 : r.tableNumber))) == null ? void 0 : j.stars) ?? [],
       tableNumber: (r == null ? void 0 : r.tableNumber) ?? 0
-    }), [Q, X] = o(!0), [_, P] = o(!1), [k, M] = o("WHITE_T_60"), V = N(null), x = N(null), [U, O] = o((r == null ? void 0 : r.rewardStar) ?? []), [q] = o(!1), T = N(null), H = N(), j = i(
+    }), [J, Q] = o(!0), [_, D] = o(!1), [P, X] = o("WHITE_T_60"), k = p(null), V = p(null), [x, M] = o((r == null ? void 0 : r.rewardStar) ?? []), [U] = o(!1), T = p(null), H = p(), q = i(
       (e) => {
-        if (I) {
-          I(e);
+        if (L) {
+          L(e);
           return;
         }
-        m(), L(!0), h(e.tableNumber), v({ ...e }), O([]), B(fe.TABLE_SELECTED, {
+        m(), f(!0), h(e.tableNumber), I({ ...e }), M([]), W(fe.TABLE_SELECTED, {
           meta: {
             table_of: e.tableNumber
           }
         });
       },
-      [I, m, B]
-    ), ee = i(
+      [L, m, W]
+    ), O = i(
       (e) => {
-        A(_ ? k : "WHITE_T_60"), h(e.tableNumber);
+        A(_ ? P : "WHITE_T_60"), h(e.tableNumber);
       },
-      [k, _]
-    ), te = i(() => {
+      [P, _]
+    ), ee = i(() => {
       A("WHITE_T_60"), !c.tableNumber && h(null);
-    }, [c.tableNumber]), re = i(() => {
+    }, [c.tableNumber]), te = i(() => {
       var n;
-      g == null || g(), m(), L(!1), h(null);
-      const e = (C.DISAPPEAR[1] - C.DISAPPEAR[0]) / 30;
-      (n = T.current) == null || n.playSegments(C.DISAPPEAR, !0), H.current = setTimeout(() => {
-        v({ stars: [], tableNumber: 0 });
+      N == null || N(), m(), f(!1), h(null);
+      const e = (g.DISAPPEAR[1] - g.DISAPPEAR[0]) / 30;
+      (n = T.current) == null || n.playSegments(g.DISAPPEAR, !0), H.current = setTimeout(() => {
+        I({ stars: [], tableNumber: 0 });
       }, e * 1e3);
-    }, [g, m]), ie = i(() => {
+    }, [N, m]), re = i(() => {
       var e;
-      (e = T.current) == null || e.playSegments(C.REVEAL, !0);
-    }, []), ne = i((e) => {
+      (e = T.current) == null || e.playSegments(g.REVEAL, !0);
+    }, []), ie = i((e) => {
       const n = {
         sequence: 1,
         random: 2,
         advance: 3
       };
-      A(Te[e] ?? "WHITE_T_60"), D(n[e] ?? 0);
-    }, []), oe = i(() => {
-      D(null), A("WHITE_T_60");
-    }, []), s = z(() => c, [c]), se = z(() => [
+      A(_e[e] ?? "WHITE_T_60"), B(n[e] ?? 0);
+    }, []), ne = i(() => {
+      B(null), A("WHITE_T_60");
+    }, []), l = Z(() => c, [c]), oe = Z(() => [
       {
         top: 20,
         left: 10.5,
         type: "sequence",
-        tableNumber: s.tableNumber,
-        isStarAchieved: s.stars.includes("sequence"),
+        tableNumber: l.tableNumber,
+        isStarAchieved: l.stars.includes("sequence"),
         semicirclePosiiionTop: "-19%",
         semicirclePosiiionLeft: "-43%",
         semicircleHoverColor: "#B259004D"
@@ -92,8 +90,8 @@ const y = {
         top: 20,
         left: 65.5,
         type: "random",
-        tableNumber: s.tableNumber,
-        isStarAchieved: s.stars.includes("random"),
+        tableNumber: l.tableNumber,
+        isStarAchieved: l.stars.includes("random"),
         semicirclePosiiionTop: "-19%",
         semicirclePosiiionLeft: "65%",
         semicircleHoverColor: "#0055CC4D"
@@ -102,18 +100,18 @@ const y = {
         top: 66,
         left: 38,
         type: "advance",
-        tableNumber: s.tableNumber,
-        isStarAchieved: s.stars.includes("advance"),
+        tableNumber: l.tableNumber,
+        isStarAchieved: l.stars.includes("advance"),
         semicirclePosiiionTop: "74%",
         semicirclePosiiionLeft: "11%",
         semicircleHoverColor: "#A9099C4D"
       }
-    ], [s.tableNumber, s.stars]), le = i(() => {
+    ], [l.tableNumber, l.stars]), le = i(() => {
       b({
         mode: "infinite",
-        infiniteModeHighScore: l.infiniteModeHighScore
+        infiniteModeHighScore: s.infiniteModeHighScore
       });
-    }, [b, l.infiniteModeHighScore]), ce = i(
+    }, [b, s.infiniteModeHighScore]), se = i(
       (e, n) => {
         b({
           mode: e,
@@ -122,91 +120,77 @@ const y = {
         });
       },
       [b, c.tableNumber]
-    ), ae = i(() => f ? `${d}× LEVEL${f}` : d ? `${d}× Table` : W, [f, d, W]), me = i((e) => {
-      A(e), M(e), P(!0);
-    }, []), ue = i(() => P(!1), []), de = i((e) => X(e), []);
-    return Ee(G, () => ({
-      labelRef: V,
-      segmentedCardWrapperRef: x,
-      startLabelAnimation: me,
-      stopLabelAnimation: ue,
-      setLabelVisiblity: de,
-      handleTableSegmentClick: j
-    })), K(() => () => {
+    ), ce = i(() => v ? `${d}× LEVEL${v}` : d ? `${d}× Table` : y, [v, d, y]), ae = i((e) => {
+      A(e), X(e), D(!0);
+    }, []), me = i(() => D(!1), []), ue = i((e) => Q(e), []);
+    return be(F, () => ({
+      labelRef: k,
+      segmentedCardWrapperRef: V,
+      startLabelAnimation: ae,
+      stopLabelAnimation: me,
+      setLabelVisiblity: ue,
+      handleTableSegmentClick: q
+    })), z(() => () => {
       H.current && clearTimeout(H.current);
-    }, []), K(() => {
-      E && (m(), L(!0), h(E.tableNumber), v({ ...E }));
+    }, []), z(() => {
+      E && (m(), f(!0), h(E.tableNumber), I({ ...E }));
     }, [E, m]), /* @__PURE__ */ t(
       ve,
       {
-        labelRef: V,
-        ref: x,
+        labelRef: k,
+        ref: V,
         strokeColor: "WHITE",
-        label: ae(),
-        labelColor: J,
+        label: ce(),
+        labelColor: G,
         isAnimated: _,
-        showLabel: Q,
-        children: /* @__PURE__ */ a(Re, { children: [
-          /* @__PURE__ */ a(we, { children: [
+        showLabel: J,
+        children: /* @__PURE__ */ a($e, { children: [
+          /* @__PURE__ */ a(Re, { children: [
             /* @__PURE__ */ t(
               pe,
               {
                 renderAs: "primary",
                 position: "top",
-                hidden: q,
-                tooltipItem: /* @__PURE__ */ t(F, { $renderAs: "ab3", $color: "WHITE", children: "Coming Soon" }),
+                hidden: U,
+                tooltipItem: /* @__PURE__ */ t(K, { $renderAs: "ab3", $color: "WHITE", children: "Coming Soon" }),
                 children: /* @__PURE__ */ a(
-                  ye,
+                  we,
                   {
-                    onClick: q ? le : void 0,
+                    onClick: U ? le : void 0,
                     children: [
-                      /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(
-                        w,
-                        {
-                          src: R.INFINITE_BUTTON_BG,
-                          settings: y,
-                          animateOnIntersect: !0
-                        }
-                      ) }),
-                      /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(
-                        w,
-                        {
-                          src: R.INFINITE_BUTTON_SYMBOL,
-                          settings: y,
-                          animateOnIntersect: !0
-                        }
-                      ) })
+                      /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(w, { src: R.INFINITE_BUTTON_BG }) }),
+                      /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(w, { src: R.INFINITE_BUTTON_SYMBOL }) })
                     ]
                   }
                 )
               }
             ),
-            /* @__PURE__ */ t(We, {}),
-            l.tableList.map((e, n) => {
-              const he = 360 / l.tableList.length, Z = -(90 + 360 / (2 * l.tableList.length)) + he * (n + 1);
+            /* @__PURE__ */ t(ye, {}),
+            s.tableList.map((e, n) => {
+              const de = 360 / s.tableList.length, Y = -(90 + 360 / (2 * s.tableList.length)) + de * (n + 1);
               return /* @__PURE__ */ t(
-                Be,
+                We,
                 {
-                  $angle: Z,
-                  $totalSegments: l.tableList.length,
+                  $angle: Y,
+                  $totalSegments: s.tableList.length,
                   $zIndex: n + 1,
-                  onClick: () => j(e),
-                  onMouseOver: () => ee(e),
-                  onMouseLeave: te,
-                  children: /* @__PURE__ */ a(Se, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
+                  onClick: () => q(e),
+                  onMouseOver: () => O(e),
+                  onMouseLeave: ee,
+                  children: /* @__PURE__ */ a(ge, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
                     ["sequence", "random", "advance"].map(($) => /* @__PURE__ */ t(
-                      $e,
+                      He,
                       {
                         isStarAchieved: e.stars.includes($),
-                        rewardStar: !u && (r == null ? void 0 : r.tableNumber) === e.tableNumber ? U.includes($) : void 0
+                        rewardStar: !u && (r == null ? void 0 : r.tableNumber) === e.tableNumber ? x.includes($) : void 0
                       },
                       $
                     )),
-                    /* @__PURE__ */ t(Ie, { width: p * 0.055 }),
-                    /* @__PURE__ */ t(De, { $angle: -Z, children: /* @__PURE__ */ t(
-                      F,
+                    /* @__PURE__ */ t(Se, { width: C * 0.055 }),
+                    /* @__PURE__ */ t(Be, { $angle: -Y, children: /* @__PURE__ */ t(
+                      K,
                       {
-                        $renderAs: p === _e ? "ac3-black" : "ac4-black",
+                        $renderAs: C === Ie ? "ac3-black" : "ac4-black",
                         $color: d === e.tableNumber ? "BLACK_1" : "WHITE",
                         children: e.tableNumber
                       }
@@ -217,18 +201,18 @@ const y = {
               );
             })
           ] }),
-          c.tableNumber > 0 && /* @__PURE__ */ t(Pe, { children: /* @__PURE__ */ a(ke, { children: [
-            /* @__PURE__ */ a(Ve, { animation: u ? "fade-in" : "fade-out", children: [
-              se.map((e, n) => /* @__PURE__ */ a(Ae.Fragment, { children: [
+          c.tableNumber > 0 && /* @__PURE__ */ t(De, { children: /* @__PURE__ */ a(Pe, { children: [
+            /* @__PURE__ */ a(ke, { animation: u ? "fade-in" : "fade-out", children: [
+              oe.map((e, n) => /* @__PURE__ */ a(he.Fragment, { children: [
                 /* @__PURE__ */ t(
-                  xe,
+                  Ve,
                   {
                     $top: e.semicirclePosiiionTop,
                     $left: e.semicirclePosiiionLeft,
                     $hoverColor: e.semicircleHoverColor,
-                    onClick: () => u ? ce(e.type, e.isStarAchieved) : void 0,
-                    onMouseOver: () => u ? ne(e.type) : void 0,
-                    onMouseLeave: u ? oe : void 0
+                    onClick: () => u ? se(e.type, e.isStarAchieved) : void 0,
+                    onMouseOver: () => u ? ie(e.type) : void 0,
+                    onMouseLeave: u ? ne : void 0
                   }
                 ),
                 /* @__PURE__ */ t(
@@ -238,23 +222,23 @@ const y = {
                     $left: e.left,
                     $isPointerEventsNone: !0,
                     children: /* @__PURE__ */ t(
-                      He,
+                      Te,
                       {
                         tableNumber: e.tableNumber,
                         isStarAchieved: e.isStarAchieved,
                         type: e.type,
-                        rewardStar: U.includes(e.type)
+                        rewardStar: x.includes(e.type)
                       }
                     )
                   }
                 )
               ] }, n)),
-              /* @__PURE__ */ t(S, { $top: 50, $left: 50, $alignCenter: !0, children: /* @__PURE__ */ t(Ue, { children: /* @__PURE__ */ t(
+              /* @__PURE__ */ t(S, { $top: 50, $left: 50, $alignCenter: !0, children: /* @__PURE__ */ t(xe, { children: /* @__PURE__ */ t(
                 Ne,
                 {
-                  onClick: re,
-                  height: p * 0.1,
-                  width: p * 0.1
+                  onClick: te,
+                  height: C * 0.1,
+                  width: C * 0.1
                 }
               ) }) })
             ] }),
@@ -263,9 +247,8 @@ const y = {
               {
                 src: R.TABLE_MODE_REVEAL,
                 ref: T,
-                settings: qe,
-                onRender: ie,
-                animateOnIntersect: !0
+                settings: Ue,
+                onRender: re
               }
             )
           ] }) })
@@ -273,8 +256,8 @@ const y = {
       }
     );
   }
-), ct = ge(je);
+), st = Ee(qe);
 export {
-  ct as TablesCard
+  st as TablesCard
 };
 //# sourceMappingURL=tables-card.js.map