@cuemath/leap 2.8.35 → 2.8.36-hg1

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

@@ -1 +1 @@
-{"version":3,"file":"segmented-game-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type {\n  IGameCardSegmentContentProps,\n  ISegmentedGameCardProps,\n  ISegmentedGameCardRefs,\n} from './segmented-game-card-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC, ForwardRefRenderFunction } from 'react';\n\nimport Lottie from 'lottie-web';\nimport {\n  forwardRef,\n  memo,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  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 * 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 segmentedCardWrapperRef = useRef<HTMLDivElement>(null);\n\n  const [label, setLabel] = useState<string>(gameCategoryLabel);\n  const [isAnimated, setIsAnimated] = useState(false);\n  const [animatedColor, setAnimatedColor] = useState<TColorNames>('WHITE_T_87');\n\n  const isLabelHighlighted = label !== gameCategoryLabel;\n\n  const onMouseEnter = useCallback((gameName: string) => {\n    setLabel(gameName);\n  }, []);\n\n  const onMouseLeave = useCallback(() => {\n    setLabel(gameCategoryLabel);\n  }, [gameCategoryLabel]);\n\n  const onSegmentPress = (index: number) => {\n    data[index]?.onPress?.();\n  };\n\n  const startLabelAnimation = useCallback((color: TColorNames) => {\n    setIsAnimated(true);\n    setAnimatedColor(color);\n  }, []);\n\n  useImperativeHandle(ref, () => ({\n    labelRef,\n    segmentedCardWrapperRef,\n    startLabelAnimation,\n  }));\n\n  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    <Styled.SegmentedCard>\n      <Styled.ExtendedFlexView $position=\"absolute\">\n        <Styled.AnimatedLabel\n          ref={labelRef}\n          $renderAs=\"ac3\"\n          $align=\"center\"\n          $color={isAnimated ? animatedColor : isLabelHighlighted ? 'WHITE_T_87' : 'WHITE_T_60'}\n          isAnimated={isAnimated}\n        >\n          {label}\n        </Styled.AnimatedLabel>\n      </Styled.ExtendedFlexView>\n      <Styled.SegmentedCardWrapper ref={segmentedCardWrapperRef} onMouseLeave={onMouseLeave}>\n        <Styled.CircularProgressLottieContainer>\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      </Styled.SegmentedCardWrapper>\n    </Styled.SegmentedCard>\n  );\n};\n\nexport const SegmentedGameCard = memo(forwardRef(SegmentedGameCardComponent));\n"],"names":["SegmentContent","segmentType","isCompleted","card","name","onMouseEnter","lottieAnimationRef","useRef","useEffect","animation","lottie","fetchLottie","Lottie","handleMouseEnter","useCallback","jsx","Styled.SegmentContainer","jsxs","Styled.SegmentContentContainer","Styled.SegmentAssetContainer","Styled.SegmentOverlay","Styled.IconWrapper","CheckIcon","SegmentedGameCardComponent","data","gameCategoryLabel","initialValue","value","maxValue","ref","labelRef","segmentedCardWrapperRef","label","setLabel","useState","isAnimated","setIsAnimated","animatedColor","setAnimatedColor","isLabelHighlighted","gameName","onMouseLeave","onSegmentPress","index","_b","_a","startLabelAnimation","color","useImperativeHandle","animationSegments","useMemo","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","levelUpAnimationSettings","Styled.SegmentedCard","Styled.ExtendedFlexView","Styled.AnimatedLabel","Styled.SegmentedCardWrapper","Styled.CircularProgressLottieContainer","LottieAnimation","LOTTIE","Styled.SegmentLeft","Styled.SegmentRight","Styled.SegmentBottom","SegmentedGameCard","memo","forwardRef"],"mappings":";;;;;;;;AA2BO,MAAMA,IAAmD,CAAC;AAAA,EAC/D,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AACF,MAAM;AACE,QAAAC,IAAqBC,EAAuB,IAAI;AAEtD,EAAAC,EAAU,MAAM;AACd,QAAIC,IAAkC;AAc3B,YAZQ,YAAY;AACvB,YAAAC,IAAS,MAAMC,EAAYR,CAAI;AAErC,MAAAM,IAAYG,EAAO,cAAc;AAAA,QAC/B,WAAWN,EAAmB;AAAA,QAC9B,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,eAAeI;AAAA,MAAA,CAChB;AAAA,IAAA,MAKI,MACED,KAAA,gBAAAA,EAAW;AAAA,EACpB,GACC,CAACN,CAAI,CAAC;AAEH,QAAAU,IAAmBC,EAAY,MAAMT,EAAaD,CAAI,GAAG,CAACC,GAAcD,CAAI,CAAC;AAGjF,SAAA,gBAAAW,EAACC,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAA+B,cAAcjB,GAAa,cAAcY,GACvE,UAAA;AAAA,IAAA,gBAAAE,EAACI,GAAA,EAA6B,KAAKb,GAAoB,cAAcL,GAAa;AAAA,IACjFC,uBACEkB,GAAA,EAAsB,cAAcnB,GACnC,4BAACoB,GAAA,EACC,UAAC,gBAAAN,EAAAO,GAAA,EAAU,OAAM,QAAO,QAAQ,IAAI,OAAO,GAAA,CAAI,EACjD,CAAA,GACF;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEMC,KAGF,CAAC,EAAE,MAAAC,GAAM,OAAOC,GAAmB,cAAAC,IAAe,GAAG,OAAAC,GAAO,UAAAC,IAAW,EAAE,GAAGC,MAAQ;AAChF,QAAAC,IAAWvB,EAAuB,IAAI,GACtCwB,IAA0BxB,EAAuB,IAAI,GAErD,CAACyB,GAAOC,CAAQ,IAAIC,EAAiBT,CAAiB,GACtD,CAACU,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAeC,CAAgB,IAAIJ,EAAsB,YAAY,GAEtEK,IAAqBP,MAAUP,GAE/BpB,IAAeS,EAAY,CAAC0B,MAAqB;AACrD,IAAAP,EAASO,CAAQ;AAAA,EACnB,GAAG,CAAE,CAAA,GAECC,IAAe3B,EAAY,MAAM;AACrC,IAAAmB,EAASR,CAAiB;AAAA,EAAA,GACzB,CAACA,CAAiB,CAAC,GAEhBiB,IAAiB,CAACC,MAAkB;;AACnC,KAAAC,KAAAC,IAAArB,EAAAmB,CAAK,MAAL,gBAAAE,EAAQ,YAAR,QAAAD,EAAA,KAAAC;AAAA,EAAkB,GAGnBC,IAAsBhC,EAAY,CAACiC,MAAuB;AAC9D,IAAAX,EAAc,EAAI,GAClBE,EAAiBS,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA;AAEL,EAAAC,EAAoBnB,GAAK,OAAO;AAAA,IAC9B,UAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,qBAAAe;AAAA,EACA,EAAA;AAEI,QAAAG,IAAkDC,EAAQ,MAAM;AACpE,QAAItB,KAAY;AACd;AAGF,UAAMuB,IAAc,IACdC,IAAiBD,IAAcvB,GAE/ByB,IAAqB,KAAK,IAAID,IAAiB1B,GAAcyB,CAAW,GACxEG,IAAmB,KAAK,IAAIF,IAAiBzB,IAAQ,GAAGwB,CAAW;AAElE,WAAA,CAACE,GAAoBC,CAAgB;AAAA,EAC3C,GAAA,CAAC5B,GAAcE,GAAUD,CAAK,CAAC,GAE5B4B,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,gBAAAhC,EAACuC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAzC,EAAC0C,GAAA,EAAwB,WAAU,YACjC,UAAA,gBAAA1C;AAAA,MAAC2C;AAAAA,MAAA;AAAA,QACC,KAAK5B;AAAA,QACL,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAQK,IAAaE,IAAgBE,IAAqB,eAAe;AAAA,QACzE,YAAAJ;AAAA,QAEC,UAAAH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,sBACC2B,GAAA,EAA4B,KAAK5B,GAAyB,cAAAU,GACzD,UAAA;AAAA,MAAC,gBAAA1B,EAAA6C,GAAA,EACC,UAAC,gBAAA7C,EAAA8C,GAAA,EAAgB,KAAKC,EAAO,eAAe,UAAUP,EAAA,CAA0B,EAClF,CAAA;AAAA,MAEA,gBAAAxC,EAACgD,GAAA,EAAmB,SAAS,MAAMrB,EAAe,CAAC,GACjD,UAAA,gBAAA3B;AAAA,QAACf;AAAA,QAAA;AAAA,UACC,aAAa;AAAA,UACb,MAAMwB,EAAK,CAAC,EAAG;AAAA,UACf,MAAMA,EAAK,CAAC,EAAG;AAAA,UACf,aAAaA,EAAK,CAAC,EAAG;AAAA,UACtB,cAAAnB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,MAGA,gBAAAU,EAACiD,GAAA,EAAoB,SAAS,MAAMtB,EAAe,CAAC,GAClD,UAAA,gBAAA3B;AAAA,QAACf;AAAA,QAAA;AAAA,UACC,aAAa;AAAA,UACb,MAAMwB,EAAK,CAAC,EAAG;AAAA,UACf,MAAMA,EAAK,CAAC,EAAG;AAAA,UACf,aAAaA,EAAK,CAAC,EAAG;AAAA,UACtB,cAAAnB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,MAGA,gBAAAU,EAACkD,GAAA,EAAqB,SAAS,MAAMvB,EAAe,CAAC,GACnD,UAAA,gBAAA3B;AAAA,QAACf;AAAA,QAAA;AAAA,UACC,aAAa;AAAA,UACb,MAAMwB,EAAK,CAAC,EAAG;AAAA,UACf,MAAMA,EAAK,CAAC,EAAG;AAAA,UACf,aAAaA,EAAK,CAAC,EAAG;AAAA,UACtB,cAAAnB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEa6D,KAAoBC,EAAKC,EAAW7C,EAA0B,CAAC;"}
+{"version":3,"file":"segmented-game-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type {\n  IGameCardSegmentContentProps,\n  ISegmentedGameCardProps,\n  ISegmentedGameCardRefs,\n} from './segmented-game-card-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC, ForwardRefRenderFunction } from 'react';\n\nimport Lottie from 'lottie-web';\nimport {\n  forwardRef,\n  memo,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  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/constants.js

@@ -0,0 +1,20 @@
+const _ = {
+  REVEAL: [0, 15],
+  REVEAL_CONTENT: [8, 15],
+  DISAPPEAR_CONTENT: [21, 29],
+  DISAPPEAR: [21, 38]
+}, A = {
+  random: "BLUE_4",
+  sequence: "YELLOW_4",
+  advance: "PURPLE_4"
+}, E = 50, L = E + 1, N = 100, I = 1, O = 2;
+export {
+  O as ABSOLUTE_VIEW_Z_INDEX,
+  L as INFINITE_MODE_Z_INDEX,
+  E as TABLE_CARD_SHADOW_Z_INDEX,
+  N as TABLE_MODE_CONTAINER_Z_INDEX,
+  A as TABLE_MODE_LABEL_COLOR,
+  I as TABLE_MODE_OVERLAY_Z_INDEX,
+  _ as TABLE_REVEAL_ANIMATION
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/tables-card/constants.ts"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type { TTableMode } from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { AnimationSegment } from 'lottie-web';\n\nexport const TABLE_REVEAL_ANIMATION = {\n  REVEAL: [0, 15] as AnimationSegment,\n  REVEAL_CONTENT: [8, 15] as AnimationSegment,\n  DISAPPEAR_CONTENT: [21, 29] as AnimationSegment,\n  DISAPPEAR: [21, 38] as AnimationSegment,\n};\n\nexport const TABLE_MODE_LABEL_COLOR: Partial<Record<TTableMode, TColorNames>> = {\n  random: 'BLUE_4',\n  sequence: 'YELLOW_4',\n  advance: 'PURPLE_4',\n};\n\n// z-index 1 to 20 are for table number arc segments\nexport const TABLE_CARD_SHADOW_Z_INDEX = 50;\nexport const INFINITE_MODE_Z_INDEX = TABLE_CARD_SHADOW_Z_INDEX + 1;\nexport const TABLE_MODE_CONTAINER_Z_INDEX = 100;\n\n// table modes\nexport const TABLE_MODE_OVERLAY_Z_INDEX = 1;\nexport const ABSOLUTE_VIEW_Z_INDEX = 2;\n"],"names":["TABLE_REVEAL_ANIMATION","TABLE_MODE_LABEL_COLOR","TABLE_CARD_SHADOW_Z_INDEX","INFINITE_MODE_Z_INDEX","TABLE_MODE_CONTAINER_Z_INDEX","TABLE_MODE_OVERLAY_Z_INDEX","ABSOLUTE_VIEW_Z_INDEX"],"mappings":"AAIO,MAAMA,IAAyB;AAAA,EACpC,QAAQ,CAAC,GAAG,EAAE;AAAA,EACd,gBAAgB,CAAC,GAAG,EAAE;AAAA,EACtB,mBAAmB,CAAC,IAAI,EAAE;AAAA,EAC1B,WAAW,CAAC,IAAI,EAAE;AACpB,GAEaC,IAAmE;AAAA,EAC9E,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACX,GAGaC,IAA4B,IAC5BC,IAAwBD,IAA4B,GACpDE,IAA+B,KAG/BC,IAA6B,GAC7BC,IAAwB;"}

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

@@ -0,0 +1,24 @@
+import e from "styled-components";
+import { GAME_LAUNCHER_SIZE as t } from "../../card-container/constants.js";
+const n = e.div`
+  border: 1px solid ${({ theme: o }) => o.colors.WHITE};
+  border-right-width: ${({ $isBorderRightRequired: o }) => o ? "1px" : "0px"};
+  height: ${t * 8.1 / 100}px;
+  width: ${t * 8.1 / 100}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme: o }) => o.colors.BLACK_1};
+  position: relative;
+`, d = e.div`
+  position: absolute;
+  height: auto;
+  width: ${t * 8.1 / 100}px;
+  right: ${({ $right: o = "0px" }) => o};
+  bottom: ${({ $bottom: o = "unset" }) => o};
+`;
+export {
+  n as ModeContentSquareBlock,
+  d as TableModeLottieContainer
+};
+//# sourceMappingURL=table-mode-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-mode-styled.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../card-container/constants';\n\nexport const ModeContentSquareBlock = styled.div<{ $isBorderRightRequired?: boolean }>`\n  border: 1px solid ${({ theme }) => theme.colors.WHITE};\n  border-right-width: ${({ $isBorderRightRequired }) => ($isBorderRightRequired ? '1px' : '0px')};\n  height: ${(GAME_LAUNCHER_SIZE * 8.1) / 100}px;\n  width: ${(GAME_LAUNCHER_SIZE * 8.1) / 100}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ${({ theme }) => theme.colors.BLACK_1};\n  position: relative;\n`;\n\nexport const TableModeLottieContainer = styled.div<{ $bottom?: string; $right?: string }>`\n  position: absolute;\n  height: auto;\n  width: ${(GAME_LAUNCHER_SIZE * 8.1) / 100}px;\n  right: ${({ $right = '0px' }) => $right};\n  bottom: ${({ $bottom = 'unset' }) => $bottom};\n`;\n"],"names":["ModeContentSquareBlock","styled","theme","$isBorderRightRequired","GAME_LAUNCHER_SIZE","TableModeLottieContainer","$right","$bottom"],"mappings":";;AAIO,MAAMA,IAAyBC,EAAO;AAAA,sBACvB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,wBAC/B,CAAC,EAAE,wBAAAC,EAAA,MAA8BA,IAAyB,QAAQ,KAAM;AAAA,YACnFC,IAAqB,MAAO,GAAG;AAAA,WAChCA,IAAqB,MAAO,GAAG;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAI5CG,IAA2BJ,EAAO;AAAA;AAAA;AAAA,WAGnCG,IAAqB,MAAO,GAAG;AAAA,WAChC,CAAC,EAAE,QAAAE,IAAS,MAAA,MAAYA,CAAM;AAAA,YAC7B,CAAC,EAAE,SAAAC,IAAU,QAAA,MAAcA,CAAO;AAAA;"}

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

@@ -0,0 +1,54 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { memo as T } from "react";
+import { LOTTIE as e } from "../../../../../../assets/lottie/lottie.js";
+import l from "../../../../../ui/layout/flex-view.js";
+import d from "../../../../../ui/lottie-animation/lottie-animation.js";
+import _ from "../../../../../ui/separator/separator.js";
+import m from "../../../../../ui/text/text.js";
+import { GAME_LAUNCHER_SIZE as E, GAME_LAUNCHER_SIZE_LARGE as i } from "../../card-container/constants.js";
+import f from "../table-star/table-star.js";
+import { ModeContentSquareBlock as t, TableModeLottieContainer as s } from "./table-mode-styled.js";
+const I = {
+  sequence: e.SEQUENCE_MODE_SEGMENT_LOTTIE,
+  random: e.RANDOM_MODE_SEGMENT_LOTTIE,
+  advance: e.ADVANCE_MODE_SEGMENT_LOTTIE
+}, G = T(({ tableNumber: c, isStarAchieved: n, type: o }) => /* @__PURE__ */ a(l, { $alignItems: "center", children: [
+  /* @__PURE__ */ r(
+    f,
+    {
+      fill: n ? "GREEN_4" : "WHITE_T_15",
+      bgFill: n ? "GREEN_6" : "WHITE_T_15"
+    }
+  ),
+  /* @__PURE__ */ r(_, { height: E === i ? 22 : 16 }),
+  /* @__PURE__ */ a(l, { $flexDirection: "row", children: [
+    /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(
+      m,
+      {
+        $renderAs: E === i ? "ac3-black" : "ab2-bold",
+        $color: "WHITE",
+        children: c
+      }
+    ) }),
+    /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(
+      m,
+      {
+        $renderAs: E === i ? "ac3-black" : "ab2-bold",
+        $color: "WHITE",
+        children: "×"
+      }
+    ) }),
+    /* @__PURE__ */ r(t, { $isBorderRightRequired: o === "advance", children: /* @__PURE__ */ r(
+      s,
+      {
+        $bottom: o === "advance" ? "-1px" : "unset",
+        $right: o === "advance" ? "-1px" : "unset",
+        children: /* @__PURE__ */ r(d, { src: I[o] ?? "" })
+      }
+    ) })
+  ] })
+] }));
+export {
+  G as default
+};
+//# sourceMappingURL=table-mode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-mode.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.tsx"],"sourcesContent":["import type { TTableMode } from '../../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITableModeProps } from './table-mode-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../../ui/separator/separator';\nimport Text from '../../../../../ui/text/text';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../../card-container/constants';\nimport TableStar from '../table-star/table-star';\nimport * as Styled from './table-mode-styled';\n\nconst LOAD_LOTTIE: Partial<Record<TTableMode, string>> = {\n  sequence: LOTTIE.SEQUENCE_MODE_SEGMENT_LOTTIE,\n  random: LOTTIE.RANDOM_MODE_SEGMENT_LOTTIE,\n  advance: LOTTIE.ADVANCE_MODE_SEGMENT_LOTTIE,\n};\n\nconst TableMode: FC<ITableModeProps> = memo(({ tableNumber, isStarAchieved, type }) => {\n  return (\n    <FlexView $alignItems=\"center\">\n      <TableStar\n        fill={isStarAchieved ? 'GREEN_4' : 'WHITE_T_15'}\n        bgFill={isStarAchieved ? 'GREEN_6' : 'WHITE_T_15'}\n      />\n      <Separator height={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 22 : 16} />\n      <FlexView $flexDirection=\"row\">\n        <Styled.ModeContentSquareBlock>\n          <Text\n            $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n            $color=\"WHITE\"\n          >\n            {tableNumber}\n          </Text>\n        </Styled.ModeContentSquareBlock>\n        <Styled.ModeContentSquareBlock>\n          <Text\n            $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n            $color=\"WHITE\"\n          >\n            ×\n          </Text>\n        </Styled.ModeContentSquareBlock>\n        <Styled.ModeContentSquareBlock $isBorderRightRequired={type === 'advance'}>\n          <Styled.TableModeLottieContainer\n            $bottom={type === 'advance' ? '-1px' : 'unset'}\n            $right={type === 'advance' ? '-1px' : 'unset'}\n          >\n            <LottieAnimation src={LOAD_LOTTIE[type] ?? ''} />\n          </Styled.TableModeLottieContainer>\n        </Styled.ModeContentSquareBlock>\n      </FlexView>\n    </FlexView>\n  );\n});\n\nexport default TableMode;\n"],"names":["LOAD_LOTTIE","LOTTIE","TableMode","memo","tableNumber","isStarAchieved","type","jsxs","FlexView","jsx","TableStar","Separator","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","Styled.ModeContentSquareBlock","Text","Styled.TableModeLottieContainer","LottieAnimation"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAmD;AAAA,EACvD,UAAUC,EAAO;AAAA,EACjB,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAClB,GAEMC,IAAiCC,EAAK,CAAC,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,MAAAC,QAExE,gBAAAC,EAACC,GAAS,EAAA,aAAY,UACpB,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAML,IAAiB,YAAY;AAAA,MACnC,QAAQA,IAAiB,YAAY;AAAA,IAAA;AAAA,EACvC;AAAA,oBACCM,GAAU,EAAA,QAAQC,MAAuBC,IAA2B,KAAK,IAAI;AAAA,EAC9E,gBAAAN,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAC,EAAAK,GAAA,EACC,UAAA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,WAAWH,MAAuBC,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QAEN,UAAAT;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IACA,gBAAAK,EAACK,GAAA,EACC,UAAA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,WAAWH,MAAuBC,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QACR,UAAA;AAAA,MAAA;AAAA,IAAA,GAGH;AAAA,sBACCC,GAAA,EAA8B,wBAAwBR,MAAS,WAC9D,UAAA,gBAAAG;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,SAASV,MAAS,YAAY,SAAS;AAAA,QACvC,QAAQA,MAAS,YAAY,SAAS;AAAA,QAEtC,4BAACW,GAAgB,EAAA,KAAKjB,EAAYM,CAAI,KAAK,IAAI;AAAA,MAAA;AAAA,IAAA,GAEnD;AAAA,EAAA,GACF;AACF,EAAA,CAAA,CAEH;"}

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

@@ -0,0 +1,11 @@
+import c from "styled-components";
+const t = c.circle`
+  fill: ${({ $fill: l, theme: o }) => o.colors[l]};
+`, i = c.path`
+  fill: ${({ $fill: l, theme: o }) => o.colors[l]};
+`;
+export {
+  t as Circle,
+  i as Path
+};
+//# sourceMappingURL=table-star-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-star-styled.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../../ui/types';\n\nimport styled from 'styled-components';\n\nexport const Circle = styled.circle<{ $fill: TColorNames }>`\n  fill: ${({ $fill, theme }) => theme.colors[$fill]};\n`;\n\nexport const Path = styled.path<{ $fill: TColorNames }>`\n  fill: ${({ $fill, theme }) => theme.colors[$fill]};\n`;\n"],"names":["Circle","styled","$fill","theme","Path"],"mappings":";AAIO,MAAMA,IAASC,EAAO;AAAA,UACnB,CAAC,EAAE,OAAAC,GAAO,OAAAC,EAAA,MAAYA,EAAM,OAAOD,CAAK,CAAC;AAAA,GAGtCE,IAAOH,EAAO;AAAA,UACjB,CAAC,EAAE,OAAAC,GAAO,OAAAC,EAAA,MAAYA,EAAM,OAAOD,CAAK,CAAC;AAAA;"}

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

@@ -0,0 +1,16 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { Circle as L, Path as e } from "./table-star-styled.js";
+const f = ({ fill: t, bgFill: l }) => /* @__PURE__ */ i("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+  /* @__PURE__ */ r(L, { cx: "8", cy: "8", r: "8", $fill: l }),
+  /* @__PURE__ */ r(
+    e,
+    {
+      d: "M8 2L6.23664 5.57295L2.29366 6.1459L5.14683 8.92705L4.47329 12.8541L8 11L11.5267 12.8541L10.8532 8.92705L13.7063 6.1459L9.76336 5.57295L8 2Z",
+      $fill: t
+    }
+  )
+] });
+export {
+  f as default
+};
+//# sourceMappingURL=table-star.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.tsx"],"sourcesContent":["import type { ITableStarProps } from './table-star-types';\n\nimport React from 'react';\n\nimport * as Styled from './table-star-styled';\n\nconst TableStar: React.FC<ITableStarProps> = ({ fill, bgFill }) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <Styled.Circle cx=\"8\" cy=\"8\" r=\"8\" $fill={bgFill} />\n      <Styled.Path\n        d=\"M8 2L6.23664 5.57295L2.29366 6.1459L5.14683 8.92705L4.47329 12.8541L8 11L11.5267 12.8541L10.8532 8.92705L13.7063 6.1459L9.76336 5.57295L8 2Z\"\n        $fill={fill}\n      />\n    </svg>\n  );\n};\n\nexport default TableStar;\n"],"names":["TableStar","fill","bgFill","jsxs","jsx","Styled.Circle","Styled.Path"],"mappings":";;AAMA,MAAMA,IAAuC,CAAC,EAAE,MAAAC,GAAM,QAAAC,QAElD,gBAAAC,EAAC,OAAI,EAAA,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACtF,UAAA;AAAA,EAAC,gBAAAC,EAAAC,GAAA,EAAc,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,OAAOH,EAAQ,CAAA;AAAA,EAClD,gBAAAE;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,OAAOL;AAAA,IAAA;AAAA,EACT;AACF,EAAA,CAAA;"}

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

@@ -0,0 +1,161 @@
+import o, { keyframes as c } from "styled-components";
+import l from "../../../../ui/layout/flex-view.js";
+import { GAME_LAUNCHER_SIZE as e, GAME_LAUNCHER_SIZE_LARGE as r } from "../card-container/constants.js";
+import { TABLE_CARD_SHADOW_Z_INDEX as p, TABLE_MODE_CONTAINER_Z_INDEX as h, TABLE_MODE_OVERLAY_Z_INDEX as E, ABSOLUTE_VIEW_Z_INDEX as f, INFINITE_MODE_Z_INDEX as g, TABLE_REVEAL_ANIMATION as n } from "./constants.js";
+const s = 2 * Math.PI * (e / 2), a = 30, _ = n.REVEAL_CONTENT[0] / a, $ = (n.REVEAL_CONTENT[1] - n.REVEAL_CONTENT[0]) / a, m = (n.DISAPPEAR_CONTENT[1] - n.DISAPPEAR_CONTENT[0]) / a, d = o.div`
+  position: relative;
+  height: inherit;
+  width: inherit;
+`, I = o(d)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, y = o.div`
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  top: 0;
+  left: 0;
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(13, 13, 13, 0.5) 0%,
+    rgba(13, 13, 13, 0) 100%
+  );
+  z-index: ${p};
+  pointer-events: none;
+`, v = o.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  flex: 1;
+  transform: rotate(${({ $angle: t }) => t}deg);
+  transform-origin: 0 50%;
+  width: 50%;
+  height: ${({ $totalSegments: t }) => s / t}px;
+  position: absolute;
+  left: ${e / 2}px;
+  top: ${({ $totalSegments: t }) => (e - s / t) / 2}px;
+  padding-right: ${e === r ? 19 : 13}px;
+  z-index: ${({ $zIndex: t }) => t || 1};
+  background-color: ${({ theme: t }) => t.colors.BLACK_1};
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  &:nth-child(2n) {
+    background-color: ${({ theme: t }) => t.colors.BLACK_3};
+  }
+  &::after {
+    content: '';
+    width: 100%;
+    height: 2px;
+    position: absolute;
+    background: ${({ theme: t }) => t.colors.BLACK_5};
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    transform-origin: left;
+    transform: rotate(${({ $totalSegments: t }) => 360 / (2 * t)}deg);
+    left: 0;
+    z-index: 1;
+  }
+  &:hover {
+    background-color: ${({ theme: t }) => t.colors.WHITE_T_60};
+    color: ${({ theme: t }) => t.colors.BLACK_1};
+    cursor: pointer;
+    &::after {
+      background: ${({ theme: t }) => t.colors.WHITE_5};
+    }
+  }
+`, C = o.div`
+  width: ${e === r ? 10 : 8}px;
+  height: ${e === r ? 10 : 8}px;
+  margin-left: ${e === r ? 12 : 8}px;
+  border-radius: 100%;
+  background-color: ${({ theme: t, $isStarAchieved: i }) => i ? t.colors.GREEN_6 : t.colors.BLACK_5};
+`, L = o(l)`
+  transform: rotate(${({ $angle: t }) => t}deg);
+  width: 16px;
+  height: 16px;
+  align-items: center;
+`, w = o.div`
+  position: absolute;
+  z-index: ${h};
+  height: inherit;
+  width: inherit;
+  top: 0;
+  left: 0;
+`, O = o(d)``, D = o.div`
+  cursor: pointer;
+  & svg {
+    color: ${({ theme: t }) => t.colors.WHITE};
+  }
+`, R = o.div`
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  height: ${81.08 * e / 100}px;
+  width: ${81.08 * e / 100}px;
+  border-radius: 100%;
+  transform: ${({ $top: t = "50%", $left: i = "50%" }) => `translate(${i}, ${t})`};
+  z-index: ${E};
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ $hoverColor: t }) => t};
+  }
+`, S = o.div`
+  position: absolute;
+  pointer-events: ${({ $isPointerEventsNone: t = !1 }) => t ? "none" : "auto"};
+  top: ${({ $top: t = 0, $valueInPx: i }) => i ? `${t}px` : `${t}%`};
+  left: ${({ $left: t = 0, $valueInPx: i }) => i ? `${t}px` : `${t}%`};
+  z-index: ${f};
+  transform: ${({ $alignCenter: t }) => t ? "translate(-50%, -50%)" : "none"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, A = () => c`
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+    `, u = () => c`
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+`, B = o.div`
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  animation: ${({ animation: t }) => t === "fade-in" ? A : u}
+    ${({ animation: t }) => t === "fade-in" ? $ : m}s
+    ${({ animation: t }) => t === "fade-in" ? _ : 0}s ease-in-out
+    forwards;
+`, k = o.div`
+  position: absolute;
+  height: 24.5%;
+  width: 24.5%;
+  z-index: ${g};
+  cursor: pointer;
+`;
+export {
+  S as AbsoluteView,
+  B as AnimatedView,
+  d as CardWrapper,
+  D as IconWrapper,
+  k as InfiniteButtonWrapper,
+  R as ModeOverlay,
+  w as TableModeContainer,
+  O as TableModeWrapper,
+  L as TableNumber,
+  v as TableSegment,
+  y as TableSegmentCardShadowContainer,
+  I as TableSegmentsWrapper,
+  C as TableStar
+};
+//# sourceMappingURL=tables-card-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tables-card-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../card-container/constants';\nimport {\n  ABSOLUTE_VIEW_Z_INDEX,\n  INFINITE_MODE_Z_INDEX,\n  TABLE_CARD_SHADOW_Z_INDEX,\n  TABLE_MODE_CONTAINER_Z_INDEX,\n  TABLE_MODE_OVERLAY_Z_INDEX,\n  TABLE_REVEAL_ANIMATION,\n} from './constants';\n\nconst circumference = 2 * Math.PI * (GAME_LAUNCHER_SIZE / 2);\nconst FPS = 30;\n\nconst entryAnimationDelayTime = TABLE_REVEAL_ANIMATION.REVEAL_CONTENT[0] / FPS;\n\nconst entryAnimationTime =\n  (TABLE_REVEAL_ANIMATION.REVEAL_CONTENT[1] - TABLE_REVEAL_ANIMATION.REVEAL_CONTENT[0]) / FPS;\nconst exitAnimationTime =\n  (TABLE_REVEAL_ANIMATION.DISAPPEAR_CONTENT[1] - TABLE_REVEAL_ANIMATION.DISAPPEAR_CONTENT[0]) / FPS;\n\nexport const CardWrapper = styled.div`\n  position: relative;\n  height: inherit;\n  width: inherit;\n`;\n\nexport const TableSegmentsWrapper = styled(CardWrapper)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const TableSegmentCardShadowContainer = styled.div`\n  position: absolute;\n  height: inherit;\n  width: inherit;\n  top: 0;\n  left: 0;\n  background: radial-gradient(\n    50% 50% at 50% 50%,\n    rgba(13, 13, 13, 0.5) 0%,\n    rgba(13, 13, 13, 0) 100%\n  );\n  z-index: ${TABLE_CARD_SHADOW_Z_INDEX};\n  pointer-events: none;\n`;\n\nexport const TableSegment = styled.div<{ $angle: number; $totalSegments: number; $zIndex: number }>`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-end;\n  flex: 1;\n  transform: rotate(${({ $angle }) => $angle}deg);\n  transform-origin: 0 50%;\n  width: 50%;\n  height: ${({ $totalSegments }) => circumference / $totalSegments}px;\n  position: absolute;\n  left: ${GAME_LAUNCHER_SIZE / 2}px;\n  top: ${({ $totalSegments }) => (GAME_LAUNCHER_SIZE - circumference / $totalSegments) / 2}px;\n  padding-right: ${GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 19 : 13}px;\n  z-index: ${({ $zIndex }) => $zIndex || 1};\n  background-color: ${({ theme }) => theme.colors.BLACK_1};\n  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\n  &:nth-child(2n) {\n    background-color: ${({ theme }) => theme.colors.BLACK_3};\n  }\n  &::after {\n    content: '';\n    width: 100%;\n    height: 2px;\n    position: absolute;\n    background: ${({ theme }) => theme.colors.BLACK_5};\n    transform-style: preserve-3d;\n    backface-visibility: hidden;\n    transform-origin: left;\n    transform: rotate(${({ $totalSegments }) => 360 / (2 * $totalSegments)}deg);\n    left: 0;\n    z-index: 1;\n  }\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.WHITE_T_60};\n    color: ${({ theme }) => theme.colors.BLACK_1};\n    cursor: pointer;\n    &::after {\n      background: ${({ theme }) => theme.colors.WHITE_5};\n    }\n  }\n`;\n\nexport const TableStar = styled.div<{ $isStarAchieved: boolean }>`\n  width: ${GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 10 : 8}px;\n  height: ${GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 10 : 8}px;\n  margin-left: ${GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 12 : 8}px;\n  border-radius: 100%;\n  background-color: ${({ theme, $isStarAchieved }) =>\n    $isStarAchieved ? theme.colors.GREEN_6 : theme.colors.BLACK_5};\n`;\n\nexport const TableNumber = styled(FlexView)<{ $angle: number }>`\n  transform: rotate(${({ $angle }) => $angle}deg);\n  width: 16px;\n  height: 16px;\n  align-items: center;\n`;\n\nexport const TableModeContainer = styled.div`\n  position: absolute;\n  z-index: ${TABLE_MODE_CONTAINER_Z_INDEX};\n  height: inherit;\n  width: inherit;\n  top: 0;\n  left: 0;\n`;\n\nexport const TableModeWrapper = styled(CardWrapper)``;\n\nexport const IconWrapper = styled.div`\n  cursor: pointer;\n  & svg {\n    color: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n\nexport const ModeOverlay = styled.div<{ $top?: string; $left?: string; $hoverColor: string }>`\n  position: absolute;\n  height: inherit;\n  width: inherit;\n  height: ${(81.08 * GAME_LAUNCHER_SIZE) / 100}px;\n  width: ${(81.08 * GAME_LAUNCHER_SIZE) / 100}px;\n  border-radius: 100%;\n  transform: ${({ $top = '50%', $left = '50%' }) => `translate(${$left}, ${$top})`};\n  z-index: ${TABLE_MODE_OVERLAY_Z_INDEX};\n  cursor: pointer;\n  &:hover {\n    background-color: ${({ $hoverColor }) => $hoverColor};\n  }\n`;\n\nexport const AbsoluteView = styled.div<{\n  $top?: number;\n  $left?: number;\n  $alignCenter?: boolean;\n  $valueInPx?: boolean;\n  $isPointerEventsNone?: boolean;\n}>`\n  position: absolute;\n  pointer-events: ${({ $isPointerEventsNone = false }) => ($isPointerEventsNone ? 'none' : 'auto')};\n  top: ${({ $top = 0, $valueInPx }) => ($valueInPx ? `${$top}px` : `${$top}%`)};\n  left: ${({ $left = 0, $valueInPx }) => ($valueInPx ? `${$left}px` : `${$left}%`)};\n  z-index: ${ABSOLUTE_VIEW_Z_INDEX};\n  transform: ${({ $alignCenter }) => ($alignCenter ? 'translate(-50%, -50%)' : 'none')};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst fadeIn = () => keyframes`\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n    `;\n\nconst fadeOut = () => keyframes`\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n`;\n\nexport const AnimatedView = styled.div<{ animation: 'fade-in' | 'fade-out' }>`\n  position: absolute;\n  height: inherit;\n  width: inherit;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n  animation: ${({ animation }) => (animation === 'fade-in' ? fadeIn : fadeOut)}\n    ${({ animation }) => (animation === 'fade-in' ? entryAnimationTime : exitAnimationTime)}s\n    ${({ animation }) => (animation === 'fade-in' ? entryAnimationDelayTime : 0)}s ease-in-out\n    forwards;\n`;\n\nexport const InfiniteButtonWrapper = styled.div`\n  position: absolute;\n  height: 24.5%;\n  width: 24.5%;\n  z-index: ${INFINITE_MODE_Z_INDEX};\n  cursor: pointer;\n`;\n"],"names":["circumference","GAME_LAUNCHER_SIZE","FPS","entryAnimationDelayTime","TABLE_REVEAL_ANIMATION","entryAnimationTime","exitAnimationTime","CardWrapper","styled","TableSegmentsWrapper","TableSegmentCardShadowContainer","TABLE_CARD_SHADOW_Z_INDEX","TableSegment","$angle","$totalSegments","GAME_LAUNCHER_SIZE_LARGE","$zIndex","theme","TableStar","$isStarAchieved","TableNumber","FlexView","TableModeContainer","TABLE_MODE_CONTAINER_Z_INDEX","TableModeWrapper","IconWrapper","ModeOverlay","$top","$left","TABLE_MODE_OVERLAY_Z_INDEX","$hoverColor","AbsoluteView","$isPointerEventsNone","$valueInPx","ABSOLUTE_VIEW_Z_INDEX","$alignCenter","fadeIn","keyframes","fadeOut","AnimatedView","animation","InfiniteButtonWrapper","INFINITE_MODE_Z_INDEX"],"mappings":";;;;AAaA,MAAMA,IAAgB,IAAI,KAAK,MAAMC,IAAqB,IACpDC,IAAM,IAENC,IAA0BC,EAAuB,eAAe,CAAC,IAAIF,GAErEG,KACHD,EAAuB,eAAe,CAAC,IAAIA,EAAuB,eAAe,CAAC,KAAKF,GACpFI,KACHF,EAAuB,kBAAkB,CAAC,IAAIA,EAAuB,kBAAkB,CAAC,KAAKF,GAEnFK,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMrBC,IAAuBD,EAAOD,CAAW;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAkCF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWzCG,CAAyB;AAAA;AAAA,GAIzBC,IAAeJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMb,CAAC,EAAE,QAAAK,EAAO,MAAMA,CAAM;AAAA;AAAA;AAAA,YAGhC,CAAC,EAAE,gBAAAC,QAAqBd,IAAgBc,CAAc;AAAA;AAAA,UAExDb,IAAqB,CAAC;AAAA,SACvB,CAAC,EAAE,gBAAAa,SAAsBb,IAAqBD,IAAgBc,KAAkB,CAAC;AAAA,mBACvEb,MAAuBc,IAA2B,KAAK,EAAE;AAAA,aAC/D,CAAC,EAAE,SAAAC,QAAcA,KAAW,CAAC;AAAA,sBACpB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,wBAGjC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOzC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,wBAI7B,CAAC,EAAE,gBAAAH,EAAqB,MAAA,OAAO,IAAIA,EAAe;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKlD,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,aACjD,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,oBAG5B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAK1CC,IAAYV,EAAO;AAAA,WACrBP,MAAuBc,IAA2B,KAAK,CAAC;AAAA,YACvDd,MAAuBc,IAA2B,KAAK,CAAC;AAAA,iBACnDd,MAAuBc,IAA2B,KAAK,CAAC;AAAA;AAAA,sBAEnD,CAAC,EAAE,OAAAE,GAAO,iBAAAE,EAAgB,MAC5CA,IAAkBF,EAAM,OAAO,UAAUA,EAAM,OAAO,OAAO;AAAA,GAGpDG,IAAcZ,EAAOa,CAAQ;AAAA,sBACpB,CAAC,EAAE,QAAAR,EAAO,MAAMA,CAAM;AAAA;AAAA;AAAA;AAAA,GAM/BS,IAAqBd,EAAO;AAAA;AAAA,aAE5Be,CAA4B;AAAA;AAAA;AAAA;AAAA;AAAA,GAO5BC,IAAmBhB,EAAOD,CAAW,KAErCkB,IAAcjB,EAAO;AAAA;AAAA;AAAA,aAGrB,CAAC,EAAE,OAAAS,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAIjCS,IAAclB,EAAO;AAAA;AAAA;AAAA;AAAA,YAIrB,QAAQP,IAAsB,GAAG;AAAA,WAClC,QAAQA,IAAsB,GAAG;AAAA;AAAA,eAE9B,CAAC,EAAE,MAAA0B,IAAO,OAAO,OAAAC,IAAQ,MAAM,MAAM,aAAaA,CAAK,KAAKD,CAAI,GAAG;AAAA,aACrEE,CAA0B;AAAA;AAAA;AAAA,wBAGf,CAAC,EAAE,aAAAC,EAAY,MAAMA,CAAW;AAAA;AAAA,GAI3CC,IAAevB,EAAO;AAAA;AAAA,oBAQf,CAAC,EAAE,sBAAAwB,IAAuB,GAAa,MAAAA,IAAuB,SAAS,MAAO;AAAA,SACzF,CAAC,EAAE,MAAAL,IAAO,GAAG,YAAAM,EAAW,MAAOA,IAAa,GAAGN,CAAI,OAAO,GAAGA,CAAI,GAAI;AAAA,UACpE,CAAC,EAAE,OAAAC,IAAQ,GAAG,YAAAK,EAAW,MAAOA,IAAa,GAAGL,CAAK,OAAO,GAAGA,CAAK,GAAI;AAAA,aACrEM,CAAqB;AAAA,eACnB,CAAC,EAAE,cAAAC,EAAA,MAAoBA,IAAe,0BAA0B,MAAO;AAAA;AAAA;AAAA;AAAA,GAMhFC,IAAS,MAAMC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OASfC,IAAU,MAAMD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTE,IAAe/B,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQpB,CAAC,EAAE,WAAAgC,QAAiBA,MAAc,YAAYJ,IAASE,CAAQ;AAAA,MACxE,CAAC,EAAE,WAAAE,QAAiBA,MAAc,YAAYnC,IAAqBC,CAAkB;AAAA,MACrF,CAAC,EAAE,WAAAkC,QAAiBA,MAAc,YAAYrC,IAA0B,CAAE;AAAA;AAAA,GAInEsC,IAAwBjC,EAAO;AAAA;AAAA;AAAA;AAAA,aAI/BkC,CAAqB;AAAA;AAAA;"}

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

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