npm - @cuemath/leap - Versions diffs - 2.8.56-hg1 → 2.8.57-hg1 - Mend

@cuemath/leap 2.8.56-hg1 → 2.8.57-hg1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

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

@@ -1,118 +1,105 @@
-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);
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import { memo as A, useCallback as m, forwardRef as O, useRef as I, useState as f, useImperativeHandle as F, useMemo as E } from "react";
+import G from "../../../../../assets/line-icons/icons/check.js";
+import { LOTTIE as $ } from "../../../../../assets/lottie/lottie.js";
+import L 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 V, SegmentLeft as q, SegmentRight as z, SegmentBottom as D } from "./segmented-game-card-styled.js";
+const C = A(
+  ({ segmentType: e, isCompleted: o, card: l, name: i, onMouseEnter: s }) => {
+    const a = m(() => s(i), [s, i]);
+    return /* @__PURE__ */ n(w, { children: /* @__PURE__ */ y(U, { $segmentType: e, onMouseEnter: a, children: [
+      /* @__PURE__ */ n(x, { $segmentType: e, children: /* @__PURE__ */ n(L, { src: l, settings: { loop: !0 }, useVisibilityObserver: !0 }) }),
+      o && /* @__PURE__ */ n(B, { $segmentType: e, children: /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(G, { color: "#fff", height: 40, width: 40 }) }) })
+    ] }) });
+  }
+), J = ({ data: e, label: o, initialValue: l = 0, value: i, maxValue: s = 1 }, a) => {
+  const g = I(null), h = I(null), [u, S] = f(o), [T, P] = f(!1), [R, _] = f("WHITE_T_87"), v = u !== o, d = m((t) => {
+    S(t);
+  }, []), M = m(() => {
+    S(o);
+  }, [o]), p = m(
+    (t) => {
+      var r, c;
+      (c = (r = e[t]) == null ? void 0 : r.onPress) == null || c.call(r);
     },
     [e]
-  ), M = c((n) => {
-    y(!0), P(n);
+  ), W = m((t) => {
+    P(!0), _(t);
   }, []);
   F(a, () => ({
-    labelRef: d,
-    segmentedCardWrapperRef: o,
-    startLabelAnimation: M
+    labelRef: g,
+    segmentedCardWrapperRef: h,
+    startLabelAnimation: W
   }));
-  const A = E(() => {
+  const b = E(() => {
     if (s <= 0)
       return;
-    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(
+    const t = 92, r = t / s, c = Math.min(r * l, t), H = Math.min(r * i + 1, t);
+    return [c, H];
+  }, [l, s, i]), k = E(
     () => ({
       renderer: "canvas",
       autoplay: !0,
       loop: !1,
-      initialSegment: A
+      initialSegment: b
     }),
-    [A]
+    [b]
   );
-  return /* @__PURE__ */ I(
-    x,
+  return /* @__PURE__ */ y(
+    j,
     {
-      ref: o,
-      labelRef: d,
+      ref: h,
+      labelRef: g,
       label: u,
-      isAnimated: L,
-      onMouseLeave: b,
-      labelColor: L ? R : _ ? "WHITE_T_87" : "WHITE_T_60",
+      isAnimated: T,
+      onMouseLeave: M,
+      labelColor: T ? R : v ? "WHITE_T_87" : "WHITE_T_60",
       children: [
-        /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(U, { src: j.LEVELUP_RINGS, settings: W }) }),
-        /* @__PURE__ */ t(D, { onClick: () => g(0), children: /* @__PURE__ */ t(
-          S,
+        /* @__PURE__ */ n(V, { children: /* @__PURE__ */ n(
+          L,
+          {
+            src: $.LEVELUP_RINGS,
+            settings: k,
+            useVisibilityObserver: !0
+          }
+        ) }),
+        /* @__PURE__ */ n(q, { onClick: () => p(0), children: /* @__PURE__ */ n(
+          C,
           {
             segmentType: "left",
             card: e[0].card,
             name: e[0].name,
             isCompleted: e[0].isCompleted,
-            onMouseEnter: C
+            onMouseEnter: d
           }
         ) }),
-        /* @__PURE__ */ t(N, { onClick: () => g(1), children: /* @__PURE__ */ t(
-          S,
+        /* @__PURE__ */ n(z, { onClick: () => p(1), children: /* @__PURE__ */ n(
+          C,
           {
             segmentType: "right",
             card: e[1].card,
             name: e[1].name,
             isCompleted: e[1].isCompleted,
-            onMouseEnter: C
+            onMouseEnter: d
           }
         ) }),
-        /* @__PURE__ */ t(q, { onClick: () => g(2), children: /* @__PURE__ */ t(
-          S,
+        /* @__PURE__ */ n(D, { onClick: () => p(2), children: /* @__PURE__ */ n(
+          C,
           {
             segmentType: "bottom",
             card: e[2].card,
             name: e[2].name,
             isCompleted: e[2].isCompleted,
-            onMouseEnter: C
+            onMouseEnter: d
           }
         ) })
       ]
     }
   );
-}, me = H(w(Y));
+}, te = A(O(J));
 export {
-  S as SegmentContent,
-  me as SegmentedGameCard
+  C as SegmentContent,
+  te as SegmentedGameCard
 };
 //# sourceMappingURL=segmented-game-card.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-game-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type {\n IGameCardSegmentContentProps,\n ISegmentedGameCardProps,\n ISegmentedGameCardRefs,\n} from './segmented-game-card-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC, ForwardRefRenderFunction } from 'react';\n\nimport Lottie from 'lottie-web';\nimport {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n 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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"}
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\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={{ loop: true }} useVisibilityObserver={true} />\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 useVisibilityObserver={true}\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":["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":";;;;;;;AAwBO,MAAMA,IAAiBC;AAAA,EAC5B,CAAC,EAAE,aAAAC,GAAa,aAAAC,GAAa,MAAAC,GAAM,MAAAC,GAAM,cAAAC,QAAiD;AAClF,UAAAC,IAAmBC,EAAY,MAAMF,EAAaD,CAAI,GAAG,CAACC,GAAcD,CAAI,CAAC;AAGjF,WAAA,gBAAAI,EAACC,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAA+B,cAAcV,GAAa,cAAcK,GACvE,UAAA;AAAA,MAAA,gBAAAE,EAACI,GAAA,EAA6B,cAAcX,GAC1C,4BAACY,GAAgB,EAAA,KAAKV,GAAM,UAAU,EAAE,MAAM,GAAQ,GAAA,uBAAuB,GAAM,CAAA,GACrF;AAAA,MAECD,uBACEY,GAAA,EAAsB,cAAcb,GACnC,4BAACc,GAAA,EACC,UAAC,gBAAAP,EAAAQ,GAAA,EAAU,OAAM,QAAO,QAAQ,IAAI,OAAO,GAAA,CAAI,EACjD,CAAA,GACF;AAAA,IAAA,EAEJ,CAAA,EACF,CAAA;AAAA,EAEJ;AACF,GAEMC,IAGF,CAAC,EAAE,MAAAC,GAAM,OAAOC,GAAmB,cAAAC,IAAe,GAAG,OAAAC,GAAO,UAAAC,IAAW,EAAE,GAAGC,MAAQ;AAChF,QAAAC,IAAWC,EAAuB,IAAI,GACtCC,IAAiBD,EAAuB,IAAI,GAE5C,CAACE,GAAOC,CAAQ,IAAIC,EAAiBV,CAAiB,GACtD,CAACW,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAeC,CAAgB,IAAIJ,EAAsB,YAAY,GAEtEK,IAAqBP,MAAUR,GAE/Bd,IAAeE,EAAY,CAAC4B,MAAqB;AACrD,IAAAP,EAASO,CAAQ;AAAA,EACnB,GAAG,CAAE,CAAA,GAECC,IAAe7B,EAAY,MAAM;AACrC,IAAAqB,EAAST,CAAiB;AAAA,EAAA,GACzB,CAACA,CAAiB,CAAC,GAEhBkB,IAAiB9B;AAAA,IACrB,CAAC+B,MAAkB;;AACZ,OAAAC,KAAAC,IAAAtB,EAAAoB,CAAK,MAAL,gBAAAE,EAAQ,YAAR,QAAAD,EAAA,KAAAC;AAAA,IACP;AAAA,IACA,CAACtB,CAAI;AAAA,EAAA,GAGDuB,IAAsBlC,EAAY,CAACmC,MAAuB;AAC9D,IAAAX,EAAc,EAAI,GAClBE,EAAiBS,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA;AAEL,EAAAC,EAAoBpB,GAAK,OAAO;AAAA,IAC9B,UAAAC;AAAA,IACA,yBAAyBE;AAAA,IACzB,qBAAAe;AAAA,EACA,EAAA;AAEI,QAAAG,IAAkDC,EAAQ,MAAM;AACpE,QAAIvB,KAAY;AACd;AAGF,UAAMwB,IAAc,IACdC,IAAiBD,IAAcxB,GAE/B0B,IAAqB,KAAK,IAAID,IAAiB3B,GAAc0B,CAAW,GACxEG,IAAmB,KAAK,IAAIF,IAAiB1B,IAAQ,GAAGyB,CAAW;AAElE,WAAA,CAACE,GAAoBC,CAAgB;AAAA,EAC3C,GAAA,CAAC7B,GAAcE,GAAUD,CAAK,CAAC,GAE5B6B,IAA2BL;AAAA,IAC/B,OAAO;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,gBAAgBD;AAAA,IAAA;AAAA,IAElB,CAACA,CAAiB;AAAA,EAAA;AAIlB,SAAA,gBAAAlC;AAAA,IAACyC;AAAA,IAAA;AAAA,MACC,KAAKzB;AAAA,MACL,UAAAF;AAAA,MACA,OAAAG;AAAA,MACA,YAAAG;AAAA,MACA,cAAAM;AAAA,MACA,YAAYN,IAAaE,IAAgBE,IAAqB,eAAe;AAAA,MAE7E,UAAA;AAAA,QAAC,gBAAA1B,EAAA4C,GAAA,EACC,UAAA,gBAAA5C;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,KAAKwC,EAAO;AAAA,YACZ,UAAUH;AAAA,YACV,uBAAuB;AAAA,UAAA;AAAA,QAAA,GAE3B;AAAA,QAEA,gBAAA1C,EAAC8C,GAAA,EAAmB,SAAS,MAAMjB,EAAe,CAAC,GACjD,UAAA,gBAAA7B;AAAA,UAACT;AAAA,UAAA;AAAA,YACC,aAAa;AAAA,YACb,MAAMmB,EAAK,CAAC,EAAG;AAAA,YACf,MAAMA,EAAK,CAAC,EAAG;AAAA,YACf,aAAaA,EAAK,CAAC,EAAG;AAAA,YACtB,cAAAb;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QAGA,gBAAAG,EAAC+C,GAAA,EAAoB,SAAS,MAAMlB,EAAe,CAAC,GAClD,UAAA,gBAAA7B;AAAA,UAACT;AAAA,UAAA;AAAA,YACC,aAAa;AAAA,YACb,MAAMmB,EAAK,CAAC,EAAG;AAAA,YACf,MAAMA,EAAK,CAAC,EAAG;AAAA,YACf,aAAaA,EAAK,CAAC,EAAG;AAAA,YACtB,cAAAb;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QAGA,gBAAAG,EAACgD,GAAA,EAAqB,SAAS,MAAMnB,EAAe,CAAC,GACnD,UAAA,gBAAA7B;AAAA,UAACT;AAAA,UAAA;AAAA,YACC,aAAa;AAAA,YACb,MAAMmB,EAAK,CAAC,EAAG;AAAA,YACf,MAAMA,EAAK,CAAC,EAAG;AAAA,YACf,aAAaA,EAAK,CAAC,EAAG;AAAA,YACtB,cAAAb;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaoD,KAAoBzD,EAAK0D,EAAWzC,CAA0B,CAAC;"}

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

@@ -1,64 +1,64 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
-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 he, { forwardRef as be, useState as o, useRef as p, useCallback as i, useMemo as Z, useImperativeHandle as Ae, 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 ge from "../../../../ui/layout/flex-view.js";
-import w from "../../../../ui/lottie-animation/lottie-animation.js";
+import y from "../../../../ui/lottie-animation/lottie-animation.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 { useCircleSounds as ve } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { GAME_LAUNCHER_ANALYTICS_EVENTS as Le } from "../../game-launcher-analytics-events.js";
+import { CardContainer as fe } from "../card-container/card-container.js";
 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";
+import { CardWrapper as $e, TableSegmentsWrapper as Re, InfiniteButtonWrapper as ye, AbsoluteView as S, TableSegmentCardShadowContainer as we, TableSegment as We, TableNumber as Ve, TableModeContainer as Be, TableModeWrapper as De, AnimatedView as Pe, ModeOverlay as ke, IconWrapper as xe } from "./tables-card-styled.js";
 const Ue = {
   loop: !1,
   autoplay: !1,
   render: "svg"
-}, qe = Ae(
+}, qe = be(
   ({
     data: s,
-    label: y,
-    onPress: b,
+    label: w,
+    onPress: A,
     openModesOfTable: r,
     defaultTable: E,
     onGoBackFromTableLevel: N,
-    onPressTableSegment: L
+    onPressTableSegment: v
   }, F) => {
     var j;
-    const { onEvent: W } = Ce(), { playButtonSound: m } = Le(), [u, f] = o(!0), [d, h] = o(
+    const { onEvent: W } = Ce(), { playButtonSound: m } = ve(), [u, L] = o(!0), [d, h] = o(
       (r == null ? void 0 : r.tableNumber) ?? null
-    ), [v, B] = o(null), [G, A] = o("WHITE_T_60"), [c, I] = o({
+    ), [f, V] = o(null), [G, b] = 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
-    }), [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(
+    }), [J, Q] = o(!0), [_, B] = o(!1), [D, X] = o("WHITE_T_60"), P = p(null), k = p(null), [x, M] = o((r == null ? void 0 : r.rewardStar) ?? []), [U] = o(!1), T = p(null), H = p(), q = i(
       (e) => {
-        if (L) {
-          L(e);
+        if (v) {
+          v(e);
           return;
         }
-        m(), f(!0), h(e.tableNumber), I({ ...e }), M([]), W(fe.TABLE_SELECTED, {
+        m(), L(!0), h(e.tableNumber), I({ ...e }), M([]), W(Le.TABLE_SELECTED, {
           meta: {
             table_of: e.tableNumber
           }
         });
       },
-      [L, m, W]
+      [v, m, W]
     ), O = i(
       (e) => {
-        A(_ ? P : "WHITE_T_60"), h(e.tableNumber);
+        b(_ ? D : "WHITE_T_60"), h(e.tableNumber);
       },
-      [P, _]
+      [D, _]
     ), ee = i(() => {
-      A("WHITE_T_60"), !c.tableNumber && h(null);
+      b("WHITE_T_60"), !c.tableNumber && h(null);
     }, [c.tableNumber]), te = i(() => {
       var n;
-      N == null || N(), m(), f(!1), h(null);
+      N == null || N(), m(), L(!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 });
@@ -72,9 +72,9 @@ const Ue = {
         random: 2,
         advance: 3
       };
-      A(_e[e] ?? "WHITE_T_60"), B(n[e] ?? 0);
+      b(_e[e] ?? "WHITE_T_60"), V(n[e] ?? 0);
     }, []), ne = i(() => {
-      B(null), A("WHITE_T_60");
+      V(null), b("WHITE_T_60");
     }, []), l = Z(() => c, [c]), oe = Z(() => [
       {
         top: 20,
@@ -107,25 +107,25 @@ const Ue = {
         semicircleHoverColor: "#A9099C4D"
       }
     ], [l.tableNumber, l.stars]), le = i(() => {
-      b({
+      A({
         mode: "infinite",
         infiniteModeHighScore: s.infiniteModeHighScore
       });
-    }, [b, s.infiniteModeHighScore]), se = i(
+    }, [A, s.infiniteModeHighScore]), se = i(
       (e, n) => {
-        b({
+        A({
           mode: e,
           tableNumber: c.tableNumber,
           isStarRewarded: n
         });
       },
-      [b, c.tableNumber]
-    ), 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,
+      [A, c.tableNumber]
+    ), ce = i(() => f ? `${d}× LEVEL${f}` : d ? `${d}× Table` : w, [f, d, w]), ae = i((e) => {
+      b(e), X(e), B(!0);
+    }, []), me = i(() => B(!1), []), ue = i((e) => Q(e), []);
+    return Ae(F, () => ({
+      labelRef: P,
+      segmentedCardWrapperRef: k,
       startLabelAnimation: ae,
       stopLabelAnimation: me,
       setLabelVisiblity: ue,
@@ -133,12 +133,12 @@ const Ue = {
     })), z(() => () => {
       H.current && clearTimeout(H.current);
     }, []), z(() => {
-      E && (m(), f(!0), h(E.tableNumber), I({ ...E }));
+      E && (m(), L(!0), h(E.tableNumber), I({ ...E }));
     }, [E, m]), /* @__PURE__ */ t(
-      ve,
+      fe,
       {
-        labelRef: k,
-        ref: V,
+        labelRef: P,
+        ref: k,
         strokeColor: "WHITE",
         label: ce(),
         labelColor: G,
@@ -154,18 +154,24 @@ const Ue = {
                 hidden: U,
                 tooltipItem: /* @__PURE__ */ t(K, { $renderAs: "ab3", $color: "WHITE", children: "Coming Soon" }),
                 children: /* @__PURE__ */ a(
-                  we,
+                  ye,
                   {
                     onClick: U ? le : void 0,
                     children: [
-                      /* @__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(S, { children: /* @__PURE__ */ t(y, { src: R.INFINITE_BUTTON_BG, useVisibilityObserver: !0 }) }),
+                      /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(
+                        y,
+                        {
+                          src: R.INFINITE_BUTTON_SYMBOL,
+                          useVisibilityObserver: !0
+                        }
+                      ) })
                     ]
                   }
                 )
               }
             ),
-            /* @__PURE__ */ t(ye, {}),
+            /* @__PURE__ */ t(we, {}),
             s.tableList.map((e, n) => {
               const de = 360 / s.tableList.length, Y = -(90 + 360 / (2 * s.tableList.length)) + de * (n + 1);
               return /* @__PURE__ */ t(
@@ -187,7 +193,7 @@ const Ue = {
                       $
                     )),
                     /* @__PURE__ */ t(Se, { width: C * 0.055 }),
-                    /* @__PURE__ */ t(Be, { $angle: -Y, children: /* @__PURE__ */ t(
+                    /* @__PURE__ */ t(Ve, { $angle: -Y, children: /* @__PURE__ */ t(
                       K,
                       {
                         $renderAs: C === Ie ? "ac3-black" : "ac4-black",
@@ -201,11 +207,11 @@ const Ue = {
               );
             })
           ] }),
-          c.tableNumber > 0 && /* @__PURE__ */ t(De, { children: /* @__PURE__ */ a(Pe, { children: [
-            /* @__PURE__ */ a(ke, { animation: u ? "fade-in" : "fade-out", children: [
+          c.tableNumber > 0 && /* @__PURE__ */ t(Be, { children: /* @__PURE__ */ a(De, { children: [
+            /* @__PURE__ */ a(Pe, { animation: u ? "fade-in" : "fade-out", children: [
               oe.map((e, n) => /* @__PURE__ */ a(he.Fragment, { children: [
                 /* @__PURE__ */ t(
-                  Ve,
+                  ke,
                   {
                     $top: e.semicirclePosiiionTop,
                     $left: e.semicirclePosiiionLeft,
@@ -243,12 +249,13 @@ const Ue = {
               ) }) })
             ] }),
             /* @__PURE__ */ t(
-              w,
+              y,
               {
                 src: R.TABLE_MODE_REVEAL,
                 ref: T,
                 settings: Ue,
-                onRender: re
+                onRender: re,
+                useVisibilityObserver: !0
               }
             )
           ] }) })

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

	@@ -1 +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 { ITableCardRef, ITablesCardProps } from './tables-card-types';\n\nimport React, {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} 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 { useUIContext } from '../../../../ui/context/context';\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 { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\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 TableSegmentStar from './table-segment-star/table-segment-star';\nimport * as Styled from './tables-card-styled';\n\nconst animationSettings = {\n loop: false,\n autoplay: false,\n render: 'svg',\n};\n\nconst TablesCardComponent = forwardRef<ITableCardRef, ITablesCardProps>(\n (\n {\n data,\n label,\n onPress,\n openModesOfTable,\n defaultTable,\n onGoBackFromTableLevel,\n onPressTableSegment,\n },\n ref,\n ) => {\n const { onEvent: trackEvent } = useUIContext();\n const { playButtonSound } = useCircleSounds();\n const [fadeIn, setFadeIn] = useState(true);\n const [highlightedTable, setHighlightedTable] = useState<number \| null>(\n openModesOfTable?.tableNumber ?? null,\n );\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 data.tableList.find(table => table.tableNumber === openModesOfTable?.tableNumber)?.stars ??\n [],\n tableNumber: openModesOfTable?.tableNumber ?? 0,\n });\n\n const [showLabel, setShowLabel] = useState(true);\n const [isLabelAnimated, setIsLabelAnimated] = useState(false);\n const [animatedColor, setAniimatedColor] = useState<TColorNames>('WHITE_T_60');\n\n const labelRef = useRef<HTMLDivElement>(null);\n const cardRef = useRef<HTMLDivElement>(null);\n\n const [rewardStar, setRewardStar] = useState(openModesOfTable?.rewardStar ?? []);\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 if (onPressTableSegment) {\n onPressTableSegment(table);\n\n return;\n }\n playButtonSound();\n setFadeIn(true);\n setHighlightedTable(table.tableNumber);\n setRevealTableModes({ ...table });\n setRewardStar([]);\n trackEvent(GAME_LAUNCHER_ANALYTICS_EVENTS.TABLE_SELECTED, {\n meta: {\n table_of: table.tableNumber,\n },\n });\n },\n [onPressTableSegment, playButtonSound, trackEvent],\n );\n\n const handleTableSegmentMouseOver = useCallback(\n (table: ITableInfo) => {\n setLabelColor(isLabelAnimated ? animatedColor : 'WHITE_T_60');\n setHighlightedTable(table.tableNumber);\n },\n [animatedColor, isLabelAnimated],\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 onGoBackFromTableLevel?.();\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 }, [onGoBackFromTableLevel, 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]);\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 const startLabelAnimation = useCallback((color: TColorNames) => {\n setLabelColor(color);\n setAniimatedColor(color);\n setIsLabelAnimated(true);\n }, []);\n\n const stopLabelAnimation = useCallback(() => setIsLabelAnimated(false), []);\n const setLabelVisiblity = useCallback((visible: boolean) => setShowLabel(visible), []);\n\n useImperativeHandle(ref, () => ({\n labelRef: labelRef,\n segmentedCardWrapperRef: cardRef,\n startLabelAnimation,\n stopLabelAnimation,\n setLabelVisiblity,\n handleTableSegmentClick,\n }));\n\n useEffect(() => {\n return () => {\n disappearAnimationTimer.current && clearTimeout(disappearAnimationTimer.current);\n };\n }, []);\n\n // Used in trial journey, to open table levels by default if given in props\n useEffect(() => {\n if (defaultTable) {\n playButtonSound();\n setFadeIn(true);\n setHighlightedTable(defaultTable.tableNumber);\n setRevealTableModes({ ...defaultTable });\n }\n }, [defaultTable, playButtonSound]);\n\n return (\n <CardContainer\n labelRef={labelRef}\n ref={cardRef}\n strokeColor=\"WHITE\"\n label={getHighlightedText()}\n labelColor={labelColor}\n isAnimated={isLabelAnimated}\n showLabel={showLabel}\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 <TableSegmentStar\n key={star}\n isStarAchieved={table.stars.includes(star as TTableMode)}\n rewardStar={\n !fadeIn && openModesOfTable?.tableNumber === table.tableNumber\n ? rewardStar.includes(star as TTableMode)\n : undefined\n }\n />\n ))}\n <Separator width={GAME_LAUNCHER_SIZE * 0.055} />\n\n <Styled.TableNumber $angle={-currentAngle}>\n <Text\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE\n ? 'ac3-black'\n : '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 <React.Fragment key={index}>\n <Styled.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 $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 rewardStar={rewardStar.includes(tableMode.type as TTableMode)}\n />\n </Styled.AbsoluteView>\n </React.Fragment>\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 0.1}\n width={GAME_LAUNCHER_SIZE * 0.1}\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);\n\nexport const TablesCard = memo(TablesCardComponent);\n"],"names":["animationSettings","TablesCardComponent","forwardRef","data","label","onPress","openModesOfTable","defaultTable","onGoBackFromTableLevel","onPressTableSegment","ref","trackEvent","useUIContext","playButtonSound","useCircleSounds","fadeIn","setFadeIn","useState","highlightedTable","setHighlightedTable","highlightedLevel","setHighlightedLevel","labelColor","setLabelColor","revealTableModes","setRevealTableModes","_a","table","showLabel","setShowLabel","isLabelAnimated","setIsLabelAnimated","animatedColor","setAniimatedColor","labelRef","useRef","cardRef","rewardStar","setRewardStar","enableInfiniteMode","revealAnimationRef","disappearAnimationTimer","handleTableSegmentClick","useCallback","GAME_LAUNCHER_ANALYTICS_EVENTS","handleTableSegmentMouseOver","handleTableSegmentMouseLeave","goBack","time","TABLE_REVEAL_ANIMATION","showTableModes","handleModeMouseOver","type","level","TABLE_MODE_LABEL_COLOR","handleModeMouseLeave","revealTableModesMemo","useMemo","tableModes","handleInfiniteModeClick","handleNormalModeClick","mode","isStarRewarded","getHighlightedText","startLabelAnimation","color","stopLabelAnimation","setLabelVisiblity","visible","useImperativeHandle","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","TableSegmentStar","Separator","GAME_LAUNCHER_SIZE","Styled.TableNumber","GAME_LAUNCHER_SIZE_LARGE","Styled.TableModeContainer","Styled.TableModeWrapper","Styled.AnimatedView","tableMode","React","Styled.ModeOverlay","TableMode","Styled.IconWrapper","Back2Icon","TablesCard","memo"],"mappings":"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"}
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 { ITableCardRef, ITablesCardProps } from './tables-card-types';\n\nimport React, {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} 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 { useUIContext } from '../../../../ui/context/context';\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 { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\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 TableSegmentStar from './table-segment-star/table-segment-star';\nimport * as Styled from './tables-card-styled';\n\nconst animationSettings = {\n loop: false,\n autoplay: false,\n render: 'svg',\n};\n\nconst TablesCardComponent = forwardRef<ITableCardRef, ITablesCardProps>(\n (\n {\n data,\n label,\n onPress,\n openModesOfTable,\n defaultTable,\n onGoBackFromTableLevel,\n onPressTableSegment,\n },\n ref,\n ) => {\n const { onEvent: trackEvent } = useUIContext();\n const { playButtonSound } = useCircleSounds();\n const [fadeIn, setFadeIn] = useState(true);\n const [highlightedTable, setHighlightedTable] = useState<number \| null>(\n openModesOfTable?.tableNumber ?? null,\n );\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 data.tableList.find(table => table.tableNumber === openModesOfTable?.tableNumber)?.stars ??\n [],\n tableNumber: openModesOfTable?.tableNumber ?? 0,\n });\n\n const [showLabel, setShowLabel] = useState(true);\n const [isLabelAnimated, setIsLabelAnimated] = useState(false);\n const [animatedColor, setAniimatedColor] = useState<TColorNames>('WHITE_T_60');\n\n const labelRef = useRef<HTMLDivElement>(null);\n const cardRef = useRef<HTMLDivElement>(null);\n\n const [rewardStar, setRewardStar] = useState(openModesOfTable?.rewardStar ?? []);\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 if (onPressTableSegment) {\n onPressTableSegment(table);\n\n return;\n }\n playButtonSound();\n setFadeIn(true);\n setHighlightedTable(table.tableNumber);\n setRevealTableModes({ ...table });\n setRewardStar([]);\n trackEvent(GAME_LAUNCHER_ANALYTICS_EVENTS.TABLE_SELECTED, {\n meta: {\n table_of: table.tableNumber,\n },\n });\n },\n [onPressTableSegment, playButtonSound, trackEvent],\n );\n\n const handleTableSegmentMouseOver = useCallback(\n (table: ITableInfo) => {\n setLabelColor(isLabelAnimated ? animatedColor : 'WHITE_T_60');\n setHighlightedTable(table.tableNumber);\n },\n [animatedColor, isLabelAnimated],\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 onGoBackFromTableLevel?.();\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 }, [onGoBackFromTableLevel, 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]);\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 const startLabelAnimation = useCallback((color: TColorNames) => {\n setLabelColor(color);\n setAniimatedColor(color);\n setIsLabelAnimated(true);\n }, []);\n\n const stopLabelAnimation = useCallback(() => setIsLabelAnimated(false), []);\n const setLabelVisiblity = useCallback((visible: boolean) => setShowLabel(visible), []);\n\n useImperativeHandle(ref, () => ({\n labelRef: labelRef,\n segmentedCardWrapperRef: cardRef,\n startLabelAnimation,\n stopLabelAnimation,\n setLabelVisiblity,\n handleTableSegmentClick,\n }));\n\n useEffect(() => {\n return () => {\n disappearAnimationTimer.current && clearTimeout(disappearAnimationTimer.current);\n };\n }, []);\n\n // Used in trial journey, to open table levels by default if given in props\n useEffect(() => {\n if (defaultTable) {\n playButtonSound();\n setFadeIn(true);\n setHighlightedTable(defaultTable.tableNumber);\n setRevealTableModes({ ...defaultTable });\n }\n }, [defaultTable, playButtonSound]);\n\n return (\n <CardContainer\n labelRef={labelRef}\n ref={cardRef}\n strokeColor=\"WHITE\"\n label={getHighlightedText()}\n labelColor={labelColor}\n isAnimated={isLabelAnimated}\n showLabel={showLabel}\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} useVisibilityObserver={true} />\n </Styled.AbsoluteView>\n <Styled.AbsoluteView>\n <LottieAnimation\n src={LOTTIE.INFINITE_BUTTON_SYMBOL}\n useVisibilityObserver={true}\n />\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 <TableSegmentStar\n key={star}\n isStarAchieved={table.stars.includes(star as TTableMode)}\n rewardStar={\n !fadeIn && openModesOfTable?.tableNumber === table.tableNumber\n ? rewardStar.includes(star as TTableMode)\n : undefined\n }\n />\n ))}\n <Separator width={GAME_LAUNCHER_SIZE * 0.055} />\n\n <Styled.TableNumber $angle={-currentAngle}>\n <Text\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE\n ? 'ac3-black'\n : '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 <React.Fragment key={index}>\n <Styled.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 $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 rewardStar={rewardStar.includes(tableMode.type as TTableMode)}\n />\n </Styled.AbsoluteView>\n </React.Fragment>\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 0.1}\n width={GAME_LAUNCHER_SIZE * 0.1}\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 useVisibilityObserver={true}\n />\n </Styled.TableModeWrapper>\n </Styled.TableModeContainer>\n )}\n </Styled.CardWrapper>\n </CardContainer>\n );\n },\n);\n\nexport const TablesCard = memo(TablesCardComponent);\n"],"names":["animationSettings","TablesCardComponent","forwardRef","data","label","onPress","openModesOfTable","defaultTable","onGoBackFromTableLevel","onPressTableSegment","ref","trackEvent","useUIContext","playButtonSound","useCircleSounds","fadeIn","setFadeIn","useState","highlightedTable","setHighlightedTable","highlightedLevel","setHighlightedLevel","labelColor","setLabelColor","revealTableModes","setRevealTableModes","_a","table","showLabel","setShowLabel","isLabelAnimated","setIsLabelAnimated","animatedColor","setAniimatedColor","labelRef","useRef","cardRef","rewardStar","setRewardStar","enableInfiniteMode","revealAnimationRef","disappearAnimationTimer","handleTableSegmentClick","useCallback","GAME_LAUNCHER_ANALYTICS_EVENTS","handleTableSegmentMouseOver","handleTableSegmentMouseLeave","goBack","time","TABLE_REVEAL_ANIMATION","showTableModes","handleModeMouseOver","type","level","TABLE_MODE_LABEL_COLOR","handleModeMouseLeave","revealTableModesMemo","useMemo","tableModes","handleInfiniteModeClick","handleNormalModeClick","mode","isStarRewarded","getHighlightedText","startLabelAnimation","color","stopLabelAnimation","setLabelVisiblity","visible","useImperativeHandle","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","TableSegmentStar","Separator","GAME_LAUNCHER_SIZE","Styled.TableNumber","GAME_LAUNCHER_SIZE_LARGE","Styled.TableModeContainer","Styled.TableModeWrapper","Styled.AnimatedView","tableMode","React","Styled.ModeOverlay","TableMode","Styled.IconWrapper","Back2Icon","TablesCard","memo"],"mappings":"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"}

package/dist/features/ui/lottie-animation/lottie-animation.js CHANGED Viewed

@@ -1,37 +1,52 @@
-import { jsx as d } from "react/jsx-runtime";
-import p from "lottie-web";
-import { memo as h, forwardRef as L, useRef as m, useImperativeHandle as g, useEffect as v } from "react";
-import w from "../layout/flex-view.js";
-import { fetchLottie as y } from "./helper.js";
-const A = L((s, u) => {
-  const { src: i, width: l = "100%", height: f = "100%", settings: a, eventListener: t, onRender: n } = s, o = m(null), e = m(null);
-  return g(
-    u,
+import { jsx as L } from "react/jsx-runtime";
+import b from "lottie-web";
+import { memo as w, forwardRef as y, useRef as c, useImperativeHandle as A, useEffect as E } from "react";
+import I from "../layout/flex-view.js";
+import { fetchLottie as $ } from "./helper.js";
+const x = y((p, h) => {
+  const {
+    src: s,
+    width: v = "100%",
+    height: g = "100%",
+    settings: u,
+    eventListener: r,
+    onRender: i,
+    useVisibilityObserver: o
+  } = p, n = c(null), e = c(null), a = c(null);
+  return A(
+    h,
     () => ({
-      playSegments: (c, r) => {
-        e.current && e.current.playSegments(c, r);
+      playSegments: (m, t) => {
+        e.current && e.current.playSegments(m, t);
       }
     }),
     []
-  ), v(() => ((async () => {
+  ), E(() => ((async () => {
     try {
-      const r = await y(i);
-      o.current && (e.current = p.loadAnimation({
-        container: o.current,
-        animationData: r,
+      const t = await $(s);
+      n.current && (e.current = b.loadAnimation({
+        container: n.current,
+        animationData: t,
         renderer: "svg",
         loop: !0,
         autoplay: !0,
-        ...a
-      }), n == null || n(), t && e.current.addEventListener(t.name, t.callback));
-    } catch (r) {
-      throw Error(`Error loading Lottie animation: ${r}`);
+        ...u
+      }), o && (a.current = new IntersectionObserver(
+        ([l]) => {
+          var f, d;
+          l && l.isIntersecting ? (f = e.current) == null || f.play() : (d = e.current) == null || d.pause();
+        },
+        { threshold: 0 }
+      ), n.current && a.current.observe(n.current)), i == null || i(), r && e.current.addEventListener(r.name, r.callback));
+    } catch (t) {
+      throw Error(`Error loading Lottie animation: ${t}`);
     }
   })(), () => {
-    e.current && (t && e.current.removeEventListener(t.name, t.callback), e.current.destroy());
-  }), [i, t, n, a]), /* @__PURE__ */ d(w, { ref: o, $width: l, $height: f });
-}), I = h(A);
+    var t;
+    e.current && (r && e.current.removeEventListener(r.name, r.callback), o && ((t = a.current) == null || t.disconnect()), e.current.destroy());
+  }), [s, r, i, o, u]), /* @__PURE__ */ L(I, { ref: n, $width: v, $height: g });
+}), D = w(x);
 export {
-  I as default
+  D as default
 };
 //# sourceMappingURL=lottie-animation.js.map

package/dist/features/ui/lottie-animation/lottie-animation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n const { src, width = '100%', height = '100%', settings, eventListener, onRender } = props;\n\n const container = useRef<HTMLDivElement>(null);\n const animationInstance = useRef<AnimationItem \| null>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n playSegments: (segments: AnimationSegment, forceFlag?: boolean) => {\n if (animationInstance.current) {\n animationInstance.current.playSegments(segments, forceFlag);\n }\n },\n }),\n [],\n );\n\n useEffect(() => {\n const loadAnimation = async () => {\n try {\n const animationData = await fetchLottie(src);\n\n if (container.current) {\n animationInstance.current = lottie.loadAnimation({\n container: container.current,\n animationData,\n renderer: 'svg',\n loop: true,\n autoplay: true,\n ...settings,\n });\n\n onRender?.();\n if (eventListener) {\n animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n }\n }\n } catch (error) {\n throw Error(`Error loading Lottie animation: ${error}`);\n }\n };\n\n loadAnimation();\n\n return () => {\n if (animationInstance.current) {\n if (eventListener) {\n animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n }\n animationInstance.current.destroy();\n }\n };\n }, [src, eventListener, onRender, settings]);\n\n return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","container","useRef","animationInstance","useImperativeHandle","segments","forceFlag","useEffect","animationData","fetchLottie","lottie","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA,~~EAAE~~,KAAAC,~~GAAK~~,OAAAC,IAAQ,~~QAAQ~~,QAAAC,IAAS,~~QAAQ~~,UAAAC,~~GAAU~~,eAAAC,~~GAAe~~,UAAAC,~~EAAa~~,~~IAAAP~~,~~GAE9EQ~~,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI;~~AAE3D~~,~~SAAAE~~;AAAA,~~IACEV~~;AAAA,IACA,OAAO;AAAA,MACL,cAAc,~~CAACW~~,GAA4BC,MAAwB;AACjE,~~QAAIH~~,EAAkB,WACFA,EAAA,QAAQ,~~aAAaE~~,GAAUC,CAAS;AAAA,MAE9D;AAAA,IAAA;AAAA,IAEF,CAAC;AAAA,EAAA,GAGHC,EAAU,QACc,YAAY;AAC5B,QAAA;AACI,YAAAC,IAAgB,MAAMC,~~EAAYd~~,CAAG;AAE3C,~~MAAIM~~,EAAU,YACME,EAAA,~~UAAUO~~,EAAO,cAAc;AAAA,QAC/C,~~WAAWT~~,EAAU;AAAA,QACrB,~~eAAAO~~;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,~~GAAGV~~;AAAA,MAAA,CACJ,~~GAEUE~~,KAAA,QAAAA,KACPD,~~KACFI~~,EAAkB,QAAQ,~~iBAAiBJ~~,EAAc,MAAMA,EAAc,QAAQ;AAAA,~~aAGlFY~~,GAAO;AACR,YAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,IACxD;AAAA,EAAA,MAKK,MAAM;AACX,~~IAAIR~~,EAAkB,~~YAChBJ~~,~~KACFI~~,EAAkB,QAAQ,~~oBAAoBJ~~,EAAc,MAAMA,EAAc,QAAQ,~~GAE1FI~~,EAAkB,QAAQ;EAC5B,IAED,~~CAACR~~,GAAKI,GAAeC,~~GAAUF~~,CAAQ,CAAC,~~qBAEnCc~~,GAAS,EAAA,~~KAAKX~~,GAAW,~~QAAQL~~,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,~~GAEcgB~~,IAAAC,~~EAAKvB~~,CAAe;"}
1	+ {"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n const {\n src,\n width = '100%',\n height = '100%',\n settings,\n eventListener,\n onRender,\n useVisibilityObserver,\n } = props;\n\n const container = useRef<HTMLDivElement>(null);\n const animationInstance = useRef<AnimationItem \| null>(null);\n const intersectionObserver = useRef<IntersectionObserver \| null>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n playSegments: (segments: AnimationSegment, forceFlag?: boolean) => {\n if (animationInstance.current) {\n animationInstance.current.playSegments(segments, forceFlag);\n }\n },\n }),\n [],\n );\n\n useEffect(() => {\n const loadAnimation = async () => {\n try {\n const animationData = await fetchLottie(src);\n\n if (container.current) {\n animationInstance.current = lottie.loadAnimation({\n container: container.current,\n animationData,\n renderer: 'svg',\n loop: true,\n autoplay: true,\n ...settings,\n });\n\n if (useVisibilityObserver) {\n intersectionObserver.current = new IntersectionObserver(\n ([entry]) => {\n if (entry && entry.isIntersecting) {\n animationInstance.current?.play();\n } else {\n animationInstance.current?.pause();\n }\n },\n { threshold: 0 },\n );\n\n if (container.current) {\n intersectionObserver.current.observe(container.current);\n }\n }\n\n onRender?.();\n if (eventListener) {\n animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n }\n }\n } catch (error) {\n throw Error(`Error loading Lottie animation: ${error}`);\n }\n };\n\n loadAnimation();\n\n return () => {\n if (animationInstance.current) {\n if (eventListener) {\n animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n }\n\n if (useVisibilityObserver) {\n intersectionObserver.current?.disconnect();\n }\n animationInstance.current.destroy();\n }\n };\n }, [src, eventListener, onRender, useVisibilityObserver, settings]);\n\n return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","useVisibilityObserver","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","useEffect","animationData","fetchLottie","lottie","entry","_a","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,uBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MAAwB;AACjE,QAAIJ,EAAkB,WACFA,EAAA,QAAQ,aAAaG,GAAUC,CAAS;AAAA,MAE9D;AAAA,IAAA;AAAA,IAEF,CAAC;AAAA,EAAA,GAGHC,EAAU,QACc,YAAY;AAC5B,QAAA;AACI,YAAAC,IAAgB,MAAMC,EAAYhB,CAAG;AAE3C,MAAIO,EAAU,YACME,EAAA,UAAUQ,EAAO,cAAc;AAAA,QAC/C,WAAWV,EAAU;AAAA,QACrB,eAAAQ;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAGZ;AAAA,MAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,QACjC,CAAC,CAACQ,CAAK,MAAM;;AACP,UAAAA,KAASA,EAAM,kBACjBC,IAAAV,EAAkB,YAAlB,QAAAU,EAA2B,UAE3BC,IAAAX,EAAkB,YAAlB,QAAAW,EAA2B;AAAA,QAE/B;AAAA,QACA,EAAE,WAAW,EAAE;AAAA,MAAA,GAGbb,EAAU,WACSG,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAI/CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,aAGlFiB,GAAO;AACR,YAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,IACxD;AAAA,EAAA,MAKK,MAAM;;AACX,IAAIZ,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFa,IAAAT,EAAqB,YAArB,QAAAS,EAA8B,eAEhCV,EAAkB,QAAQ;EAC5B,IAED,CAACT,GAAKI,GAAeC,GAAUC,GAAuBH,CAAQ,CAAC,qBAE1DmB,GAAS,EAAA,KAAKf,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcqB,IAAAC,EAAK5B,CAAe;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "2.8.56-hg1",
+  "version": "2.8.57-hg1",
   "type": "module",
   "files": [
     "dist"