@cuemath/leap 2.8.37-rj-2 → 2.8.38-hg1

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

@@ -1,16 +1,16 @@
-import e, { keyframes as c } from "styled-components";
-import l from "../../../../ui/layout/flex-view.js";
-import { GAME_LAUNCHER_SIZE as o, 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 $, TABLE_REVEAL_ANIMATION as n } from "./constants.js";
-const s = 2 * Math.PI * (o / 2), a = 30, g = 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 = e.div`
+import e, { keyframes as s } from "styled-components";
+import d from "../../../../ui/layout/flex-view.js";
+import { GAME_LAUNCHER_SIZE as o } from "../card-container/constants.js";
+import { TABLE_CARD_SHADOW_Z_INDEX as l, TABLE_MODE_CONTAINER_Z_INDEX as p, TABLE_MODE_OVERLAY_Z_INDEX as h, ABSOLUTE_VIEW_Z_INDEX as f, INFINITE_MODE_Z_INDEX as E, TABLE_REVEAL_ANIMATION as n } from "./constants.js";
+const a = 2 * Math.PI * (o / 2), r = 30, m = n.REVEAL_CONTENT[0] / r, $ = (n.REVEAL_CONTENT[1] - n.REVEAL_CONTENT[0]) / r, g = (n.DISAPPEAR_CONTENT[1] - n.DISAPPEAR_CONTENT[0]) / r, c = e.div`
   position: relative;
   height: inherit;
   width: inherit;
-`, I = e(d)`
+`, N = e(c)`
   display: flex;
   align-items: center;
   justify-content: center;
-`, v = e.div`
+`, I = e.div`
   position: absolute;
   height: inherit;
   width: inherit;
@@ -21,7 +21,7 @@ const s = 2 * Math.PI * (o / 2), a = 30, g = n.REVEAL_CONTENT[0] / a, _ = (n.REV
     rgba(13, 13, 13, 0.5) 0%,
     rgba(13, 13, 13, 0) 100%
   );
-  z-index: ${p};
+  z-index: ${l};
   pointer-events: none;
 `, y = e.div`
   display: flex;
@@ -32,11 +32,11 @@ const s = 2 * Math.PI * (o / 2), a = 30, g = n.REVEAL_CONTENT[0] / a, _ = (n.REV
   transform: rotate(${({ $angle: t }) => t}deg);
   transform-origin: 0 50%;
   width: 50%;
-  height: ${({ $totalSegments: t }) => s / t}px;
+  height: ${({ $totalSegments: t }) => a / t}px;
   position: absolute;
   left: ${o / 2}px;
-  top: ${({ $totalSegments: t }) => (o - s / t) / 2}px;
-  padding-right: ${o === r ? 19 : 13}px;
+  top: ${({ $totalSegments: t }) => (o - a / t) / 2}px;
+  padding-right: ${o * 0.0475}px;
   z-index: ${({ $zIndex: t }) => t || 1};
   background-color: ${({ theme: t }) => t.colors.BLACK_1};
   clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
@@ -64,30 +64,24 @@ const s = 2 * Math.PI * (o / 2), a = 30, g = n.REVEAL_CONTENT[0] / a, _ = (n.REV
       background: ${({ theme: t }) => t.colors.WHITE_5};
     }
   }
-`, C = e.div`
-  width: ${o === r ? 10 : 8}px;
-  height: ${o === r ? 10 : 8}px;
-  margin-left: ${o === r ? 12 : 8}px;
-  border-radius: 100%;
-  background-color: ${({ theme: t, $isStarAchieved: i }) => i ? t.colors.GREEN_6 : t.colors.BLACK_5};
-`, L = e(l)`
+`, v = e(d)`
   transform: rotate(${({ $angle: t }) => t}deg);
   width: 16px;
   height: 16px;
   align-items: center;
-`, w = e.div`
+`, C = e.div`
   position: absolute;
-  z-index: ${h};
+  z-index: ${p};
   height: inherit;
   width: inherit;
   top: 0;
   left: 0;
-`, O = e(d)``, D = e.div`
+`, w = e(c)``, L = e.div`
   cursor: pointer;
   & svg {
     color: ${({ theme: t }) => t.colors.WHITE};
   }
-`, R = e.div`
+`, O = e.div`
   position: absolute;
   height: inherit;
   width: inherit;
@@ -95,12 +89,12 @@ const s = 2 * Math.PI * (o / 2), a = 30, g = n.REVEAL_CONTENT[0] / a, _ = (n.REV
   width: ${81.08 * o / 100}px;
   border-radius: 100%;
   transform: ${({ $top: t = "50%", $left: i = "50%" }) => `translate(${i}, ${t})`};
-  z-index: ${E};
+  z-index: ${h};
   cursor: pointer;
   &:hover {
     background-color: ${({ $hoverColor: t }) => t};
   }
-`, S = e.div`
+`, D = e.div`
   position: absolute;
   pointer-events: ${({ $isPointerEventsNone: t = !1 }) => t ? "none" : "auto"};
   top: ${({ $top: t = 0, $valueInPx: i }) => i ? `${t}px` : `${t}%`};
@@ -110,14 +104,14 @@ const s = 2 * Math.PI * (o / 2), a = 30, g = n.REVEAL_CONTENT[0] / a, _ = (n.REV
   display: flex;
   align-items: center;
   justify-content: center;
-`, A = () => c`
+`, _ = () => s`
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
-    `, x = () => c`
+    `, T = () => s`
 from {
     opacity: 1;
 }
@@ -132,30 +126,29 @@ to {
   left: 0;
   opacity: 0;
   z-index: 1;
-  animation: ${({ animation: t }) => t === "fade-in" ? A : x}
-    ${({ animation: t }) => t === "fade-in" ? _ : m}s
-    ${({ animation: t }) => t === "fade-in" ? g : 0}s ease-in-out
+  animation: ${({ animation: t }) => t === "fade-in" ? _ : T}
+    ${({ animation: t }) => t === "fade-in" ? $ : g}s
+    ${({ animation: t }) => t === "fade-in" ? m : 0}s ease-in-out
     forwards;
-`, k = e.div`
+`, R = e.div`
   position: relative;
   height: ${o * 24.5 / 100}px;
   width: ${o * 24.5 / 100}px;
-  z-index: ${$};
+  z-index: ${E};
   cursor: pointer;
 `;
 export {
-  S as AbsoluteView,
+  D 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,
+  c as CardWrapper,
+  L as IconWrapper,
+  R as InfiniteButtonWrapper,
+  O as ModeOverlay,
+  C as TableModeContainer,
+  w as TableModeWrapper,
+  v as TableNumber,
   y as TableSegment,
-  v as TableSegmentCardShadowContainer,
-  I as TableSegmentsWrapper,
-  C as TableStar
+  I as TableSegmentCardShadowContainer,
+  N as TableSegmentsWrapper
 };
 //# sourceMappingURL=tables-card-styled.js.map

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

@@ -1 +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: relative;\n  height: ${(GAME_LAUNCHER_SIZE * 24.5) / 100}px;\n  width: ${(GAME_LAUNCHER_SIZE * 24.5) / 100}px;\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":"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"}
+{"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 } 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 * 0.0475}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 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: relative;\n  height: ${(GAME_LAUNCHER_SIZE * 24.5) / 100}px;\n  width: ${(GAME_LAUNCHER_SIZE * 24.5) / 100}px;\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","$zIndex","theme","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":"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"}

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

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