@cuemath/leap 2.8.36-link.0 → 2.8.36-tables-hg1

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

@@ -0,0 +1,86 @@
+import o, { keyframes as e } from "styled-components";
+import { GAME_LAUNCHER_SIZE as r } from "../../circle-games/game-launcher/comps/card-container/constants.js";
+import i from "../../ui/text/text.js";
+import { ADJUSTED_START_ANGLE as n } from "./comp/animated-arc/constants.js";
+import { CONTENT_CONTAINER_Z_INDEX as s, LINE_MARKING_Z_INDEX as l, NUMBER_MARKING_Z_INDEX as d, TARGET_HELPER_TEXT_APPEAR_DELAY as a, RAINBOW_COLOR_ANIMATION_DURATION as m } from "./constants.js";
+import { rainbowColorAnimation as p } from "./helper.js";
+const T = o.div`
+  height: ${r}px;
+  width: ${r}px;
+  background-color: ${({ theme: t }) => t.colors.BLACK_2};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: 100%;
+  border: 1px solid ${({ theme: t }) => t.colors.WHITE};
+  animation: ${({ $isTargetAchieved: t }) => t ? e`100%{transform: scale(1.02)}` : "unset"}
+    0.133s ease alternate;
+`, g = o.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: ${s};
+  height: 92%;
+  width: 92%;
+  border-radius: 100%;
+  background-color: ${({ theme: t }) => t.colors.BLACK_2};
+`, E = o.div`
+  position: relative;
+  flex-grow: 1;
+  bottom: -12px;
+`;
+o.div`
+  position: absolute;
+`;
+const N = o.div`
+  width: ${r / 2}px;
+  height: 2px;
+  position: absolute;
+  background-color: ${({ theme: t }) => t.colors.BLACK_2};
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  transform-origin: left;
+  transform: rotate(${({ $angle: t }) => -240 + t}deg);
+  left: ${r / 2}px;
+  top: ${r / 2}px;
+  z-index: ${l};
+`, b = o.div`
+  position: absolute;
+  height: ${r - 32}px;
+  transform: rotate(${({ $angle: t }) => -n + t}deg);
+  z-index: ${d};
+`, u = o.div`
+  transform: rotate(${({ $angle: t }) => n - t}deg);
+`, h = o.div`
+  position: absolute;
+  top: 0;
+  transform: translateY(${r + 25}px);
+`, v = o(i)`
+  animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
+    ease-in-out ${a}s forwards;
+`, C = o(i)`
+  animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
+    ease ${a}s forwards;
+`, I = o.div`
+  height: 100%;
+  width: 100%;
+`, R = o(i)`
+  animation: ${({ $isTargetAchieved: t }) => t ? p : "unset"}
+    ${m}s ease infinite forwards;
+`;
+export {
+  g as ContentContainer,
+  T as DigitalMeter,
+  v as HelperTextPrimary,
+  C as HelperTextSecondary,
+  h as HelperTextWrapper,
+  N as LineMarking,
+  b as MarkingContainer,
+  u as MarkingText,
+  E as NumberCountContainer,
+  R as RainboxColorText,
+  I as TargetAchievedTextLottie
+};
+//# sourceMappingURL=digital-meter-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"digital-meter-styled.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport Text from '../../ui/text/text';\nimport { ADJUSTED_START_ANGLE } from './comp/animated-arc/constants';\nimport {\n  CONTENT_CONTAINER_Z_INDEX,\n  LINE_MARKING_Z_INDEX,\n  NUMBER_MARKING_Z_INDEX,\n  RAINBOW_COLOR_ANIMATION_DURATION,\n  TARGET_HELPER_TEXT_APPEAR_DELAY,\n} from './constants';\nimport { rainbowColorAnimation } from './helper';\n\nexport const DigitalMeter = styled.div<{ $isTargetAchieved: boolean }>`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background-color: ${({ theme }) => theme.colors.BLACK_2};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  border-radius: 100%;\n  border: 1px solid ${({ theme }) => theme.colors.WHITE};\n  animation: ${({ $isTargetAchieved }) =>\n      $isTargetAchieved ? keyframes`100%{transform: scale(1.02)}` : 'unset'}\n    0.133s ease alternate;\n`;\n\nexport const ContentContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  z-index: ${CONTENT_CONTAINER_Z_INDEX};\n  height: 92%;\n  width: 92%;\n  border-radius: 100%;\n  background-color: ${({ theme }) => theme.colors.BLACK_2};\n`;\n\nexport const NumberCountContainer = styled.div`\n  position: relative;\n  flex-grow: 1;\n  bottom: -12px;\n`;\n\nexport const AbsoluteView = styled.div`\n  position: absolute;\n`;\n\nexport const LineMarking = styled.div<{\n  $angle: number;\n}>`\n  width: ${GAME_LAUNCHER_SIZE / 2}px;\n  height: 2px;\n  position: absolute;\n  background-color: ${({ theme }) => theme.colors.BLACK_2};\n  transform-style: preserve-3d;\n  backface-visibility: hidden;\n  transform-origin: left;\n  transform: rotate(${({ $angle }) => -240 + $angle}deg);\n  left: ${GAME_LAUNCHER_SIZE / 2}px;\n  top: ${GAME_LAUNCHER_SIZE / 2}px;\n  z-index: ${LINE_MARKING_Z_INDEX};\n`;\n\nexport const MarkingContainer = styled.div<{ $angle: number }>`\n  position: absolute;\n  height: ${GAME_LAUNCHER_SIZE - 32}px;\n  transform: rotate(${({ $angle }) => -ADJUSTED_START_ANGLE + $angle}deg);\n  z-index: ${NUMBER_MARKING_Z_INDEX};\n`;\n\nexport const MarkingText = styled.div<{ $angle: number }>`\n  transform: rotate(${({ $angle }) => ADJUSTED_START_ANGLE - $angle}deg);\n`;\n\nexport const HelperTextWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  transform: translateY(${GAME_LAUNCHER_SIZE + 25}px);\n`;\n\nexport const HelperTextPrimary = styled(Text)`\n  animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n    ease-in-out ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const HelperTextSecondary = styled(Text)`\n  animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n    ease ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const TargetAchievedTextLottie = styled.div`\n  height: 100%;\n  width: 100%;\n`;\n\nexport const RainboxColorText = styled(Text)<{ $isTargetAchieved: boolean }>`\n  animation: ${({ $isTargetAchieved }) => ($isTargetAchieved ? rainbowColorAnimation : 'unset')}\n    ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["DigitalMeter","styled","GAME_LAUNCHER_SIZE","theme","$isTargetAchieved","keyframes","ContentContainer","CONTENT_CONTAINER_Z_INDEX","NumberCountContainer","LineMarking","$angle","LINE_MARKING_Z_INDEX","MarkingContainer","ADJUSTED_START_ANGLE","NUMBER_MARKING_Z_INDEX","MarkingText","HelperTextWrapper","HelperTextPrimary","Text","TARGET_HELPER_TEXT_APPEAR_DELAY","HelperTextSecondary","TargetAchievedTextLottie","RainboxColorText","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;;;AAcO,MAAMA,IAAeC,EAAO;AAAA,YACvBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA,sBACP,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,eACxC,CAAC,EAAE,mBAAAC,QACZA,IAAoBC,kCAA0C,OAAO;AAAA;AAAA,GAI9DC,IAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAK1BM,CAAyB;AAAA;AAAA;AAAA;AAAA,sBAIhB,CAAC,EAAE,OAAAJ,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,GAG5CK,IAAuBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAMfA,EAAO;AAAA;AAAA;AAI5B,MAAMQ,IAAcR,EAAO;AAAA,WAGvBC,IAAqB,CAAC;AAAA;AAAA;AAAA,sBAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAInC,CAAC,EAAE,QAAAO,EAAO,MAAM,OAAOA,CAAM;AAAA,UACzCR,IAAqB,CAAC;AAAA,SACvBA,IAAqB,CAAC;AAAA,aAClBS,CAAoB;AAAA,GAGpBC,IAAmBX,EAAO;AAAA;AAAA,YAE3BC,IAAqB,EAAE;AAAA,sBACb,CAAC,EAAE,QAAAQ,EAAA,MAAa,CAACG,IAAuBH,CAAM;AAAA,aACvDI,CAAsB;AAAA,GAGtBC,IAAcd,EAAO;AAAA,sBACZ,CAAC,EAAE,QAAAS,QAAaG,IAAuBH,CAAM;AAAA,GAGtDM,IAAoBf,EAAO;AAAA;AAAA;AAAA,0BAGdC,IAAqB,EAAE;AAAA,GAGpCe,IAAoBhB,EAAOiB,CAAI;AAAA,eAC7Bb,iEAAyE;AAAA,kBACtEc,CAA+B;AAAA,GAGpCC,IAAsBnB,EAAOiB,CAAI;AAAA,eAC/Bb,iEAAyE;AAAA,WAC7Ec,CAA+B;AAAA,GAG7BE,IAA2BpB,EAAO;AAAA;AAAA;AAAA,GAKlCqB,IAAmBrB,EAAOiB,CAAI;AAAA,eAC5B,CAAC,EAAE,mBAAAd,EAAA,MAAyBA,IAAoBmB,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}

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

@@ -0,0 +1,163 @@
+import { jsxs as o, jsx as e, Fragment as T } from "react/jsx-runtime";
+import b from "lottie-web";
+import { memo as G, useState as O, useRef as W, useEffect as R } from "react";
+import { LOTTIE as y } from "../../../assets/lottie/lottie.js";
+import { GAME_LAUNCHER_SIZE as h } from "../../circle-games/game-launcher/comps/card-container/constants.js";
+import E from "../../ui/layout/flex-view.js";
+import M from "../../ui/separator/separator.js";
+import L from "../../ui/text/text.js";
+import { NumberCountAnimation as F } from "../number-count-animation/number-count-animation.js";
+import { AnimatedArc as f } from "./comp/animated-arc/animated-arc.js";
+import { TARGET_ACHIEVED_DELAY as w, TOTAL_ANIMATION_DURATION as B, TOTAL_ARC_AVAILABLE as l, BORDER_OFFSET as _, PROGRESS_FILL_DURATION as m, PROGRESS_FILL_DELAY as $ } from "./constants.js";
+import { DigitalMeter as P, ContentContainer as U, NumberCountContainer as j, RainboxColorText as g, LineMarking as C, MarkingContainer as D, MarkingText as u, HelperTextWrapper as Y, TargetAchievedTextLottie as K, HelperTextPrimary as X, HelperTextSecondary as Z } from "./digital-meter-styled.js";
+const q = () => import(y.TARGET_ACHIEVED_TEXT), cr = G(
+  ({
+    show: s,
+    value: a,
+    maxValue: i,
+    targetValue: c,
+    displayText: H,
+    progressType: A,
+    helperTextPrimary: N,
+    helperTextSecondary: S,
+    onComplete: p
+  }) => {
+    const [n, k] = O(!1), I = W(null);
+    return R(() => {
+      let t, r;
+      return s && (t = setTimeout(() => {
+        a >= c && k(!0);
+      }, w * 1e3), r = setTimeout(() => {
+        p();
+      }, B * 1e3)), () => {
+        t && clearTimeout(t), r && clearTimeout(r);
+      };
+    }, [s, a, c, p]), R(() => {
+      n && (async () => {
+        const { default: r } = await q();
+        r && b.loadAnimation({
+          container: I.current,
+          renderer: "svg",
+          loop: !0,
+          autoplay: !0,
+          animationData: r
+        });
+      })();
+    }, [n]), s ? /* @__PURE__ */ o(P, { $isTargetAchieved: n, children: [
+      /* @__PURE__ */ e(
+        f,
+        {
+          targetAngle: l,
+          strokeWidth: 16,
+          color: "BLACK_5",
+          radius: (h - _) / 2,
+          duration: 0
+        }
+      ),
+      /* @__PURE__ */ e(U, { children: /* @__PURE__ */ o(E, { $flexDirection: "column", $alignItems: "center", children: [
+        /* @__PURE__ */ o(E, { $flexDirection: "row", $alignItems: "flex-end", children: [
+          /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(
+            g,
+            {
+              $renderAs: "ah1",
+              $color: "GREEN_4",
+              $isTargetAchieved: n,
+              children: /* @__PURE__ */ e(
+                F,
+                {
+                  initialValue: 0,
+                  targetValue: a,
+                  durationInSec: m,
+                  delayInSec: $
+                }
+              )
+            }
+          ) }),
+          A === "stepper" && /* @__PURE__ */ o(L, { $renderAs: "ac2", $color: "WHITE", children: [
+            "/",
+            i
+          ] })
+        ] }),
+        /* @__PURE__ */ e(M, { height: 8 }),
+        /* @__PURE__ */ e(L, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: H })
+      ] }) }),
+      A === "stepper" && Array.from({ length: a }, (t, r) => {
+        const d = l / i;
+        return /* @__PURE__ */ e(
+          f,
+          {
+            startAngle: d * r,
+            targetAngle: d,
+            strokeWidth: 12,
+            color: "GREEN_4",
+            radius: (h - _) / 2,
+            mode: "fade",
+            duration: m / i,
+            delay: $ + m / i * r,
+            playRainbowColors: n
+          },
+          r
+        );
+      }),
+      A === "stepper" && Array.from({ length: i + 1 }, (t, r) => {
+        const d = l / i;
+        return /* @__PURE__ */ o(T, { children: [
+          /* @__PURE__ */ e(C, { $angle: d * r }, r + "linemarking"),
+          /* @__PURE__ */ e(D, { $angle: d * r, children: /* @__PURE__ */ e(u, { $angle: d * r, children: /* @__PURE__ */ e(
+            g,
+            {
+              $renderAs: "ac4-black",
+              $isTargetAchieved: r === c && n,
+              $color: r === c ? "GREEN_4" : "WHITE_T_60",
+              children: r
+            }
+          ) }) }, r)
+        ] });
+      }),
+      A === "linear" && /* @__PURE__ */ o(T, { children: [
+        /* @__PURE__ */ e(
+          f,
+          {
+            targetAngle: a * l / i,
+            strokeWidth: 12,
+            color: "GREEN_4",
+            radius: (h - _) / 2,
+            duration: m,
+            delay: $,
+            playRainbowColors: n
+          }
+        ),
+        /* @__PURE__ */ o(T, { children: [
+          /* @__PURE__ */ e(C, { $angle: c * l / i }),
+          Array.from(/* @__PURE__ */ new Set([0, c, i])).map((t, r) => /* @__PURE__ */ e(
+            D,
+            {
+              $angle: t * l / i,
+              children: /* @__PURE__ */ e(u, { $angle: t * l / i, children: /* @__PURE__ */ e(
+                g,
+                {
+                  $renderAs: "ac4-black",
+                  $color: t === c ? "GREEN_4" : "WHITE_T_60",
+                  $isTargetAchieved: a >= t && n && t === c,
+                  children: t
+                }
+              ) })
+            },
+            r
+          ))
+        ] })
+      ] }),
+      /* @__PURE__ */ o(Y, { children: [
+        n && /* @__PURE__ */ e(K, { ref: I }),
+        !n && /* @__PURE__ */ o(E, { $flexDirection: "column", $alignItems: "center", children: [
+          /* @__PURE__ */ e(X, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: N }),
+          /* @__PURE__ */ e(Z, { $renderAs: "ab1", $color: "WHITE", children: S })
+        ] })
+      ] })
+    ] }) : null;
+  }
+);
+export {
+  cr as DigitalMeter
+};
+//# sourceMappingURL=digital-meter.js.map

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

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

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

@@ -0,0 +1,33 @@
+import { keyframes as C } from "styled-components";
+const a = (r, F, o, n) => {
+  const t = (n - 90) * (Math.PI / 180);
+  return {
+    x: r + o * Math.cos(t),
+    y: F + o * Math.sin(t)
+  };
+}, $ = (r, F, o, n, t) => {
+  const e = n + t, s = a(r, F, o, n), c = a(r, F, o, e), l = t > 180 ? 1 : 0;
+  return `M ${s.x} ${s.y} A ${o} ${o} 0 ${l} 1 ${c.x} ${c.y}`;
+}, k = C`
+  0% {
+    stroke: #FFB700;
+    color: #FFB700;
+  }
+  33% {
+    stroke: #FF884C;
+    color: #FF884C;
+  }
+  66% {
+    stroke: #FF80F4;
+    color: #FF80F4;
+  }
+  100% {
+    stroke: #33CCFF;
+    color: #33CCFF;
+  }
+`;
+export {
+  $ as describeArc,
+  k as rainbowColorAnimation
+};
+//# sourceMappingURL=helper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sources":["../../../../src/features/post-game-stats/digital-meter/helper.ts"],"sourcesContent":["import { keyframes } from 'styled-components';\n\nconst polarToCartesian = (cx: number, cy: number, r: number, angleDeg: number) => {\n  const angleRad = (angleDeg - 90) * (Math.PI / 180);\n\n  return {\n    x: cx + r * Math.cos(angleRad),\n    y: cy + r * Math.sin(angleRad),\n  };\n};\n\nexport const describeArc = (\n  cx: number,\n  cy: number,\n  r: number,\n  startAngle: number,\n  sweepAngle: number,\n) => {\n  const endAngle = startAngle + sweepAngle;\n  const start = polarToCartesian(cx, cy, r, startAngle);\n  const end = polarToCartesian(cx, cy, r, endAngle);\n  const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n\n  return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n};\n\nexport const rainbowColorAnimation = keyframes`\n  0% {\n    stroke: #FFB700;\n    color: #FFB700;\n  }\n  33% {\n    stroke: #FF884C;\n    color: #FF884C;\n  }\n  66% {\n    stroke: #FF80F4;\n    color: #FF80F4;\n  }\n  100% {\n    stroke: #33CCFF;\n    color: #33CCFF;\n  }\n`;\n"],"names":["polarToCartesian","cx","cy","r","angleDeg","angleRad","describeArc","startAngle","sweepAngle","endAngle","start","end","largeArcFlag","rainbowColorAnimation","keyframes"],"mappings":";AAEA,MAAMA,IAAmB,CAACC,GAAYC,GAAYC,GAAWC,MAAqB;AAChF,QAAMC,KAAYD,IAAW,OAAO,KAAK,KAAK;AAEvC,SAAA;AAAA,IACL,GAAGH,IAAKE,IAAI,KAAK,IAAIE,CAAQ;AAAA,IAC7B,GAAGH,IAAKC,IAAI,KAAK,IAAIE,CAAQ;AAAA,EAAA;AAEjC,GAEaC,IAAc,CACzBL,GACAC,GACAC,GACAI,GACAC,MACG;AACH,QAAMC,IAAWF,IAAaC,GACxBE,IAAQV,EAAiBC,GAAIC,GAAIC,GAAGI,CAAU,GAC9CI,IAAMX,EAAiBC,GAAIC,GAAIC,GAAGM,CAAQ,GAC1CG,IAAeJ,IAAa,MAAM,IAAI;AAE5C,SAAO,KAAKE,EAAM,CAAC,IAAIA,EAAM,CAAC,MAAMP,CAAC,IAAIA,CAAC,MAAMS,CAAY,MAAMD,EAAI,CAAC,IAAIA,EAAI,CAAC;AAClF,GAEaE,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js

@@ -0,0 +1,29 @@
+import e from "styled-components";
+const r = e.div`
+  @property --num {
+    syntax: '<integer>';
+    initial-value: ${({ $initialValue: n }) => n};
+    inherits: false;
+  }
+
+  counter-set: num var(--num);
+  animation: changeNum ${({ $durationInSec: n = 0 }) => n}s linear
+    ${({ $delayInSec: n = 0 }) => n}s forwards;
+
+  &::after {
+    content: counter(num);
+  }
+
+  @keyframes changeNum {
+    from {
+      --num: ${({ $initialValue: n }) => n};
+    }
+    to {
+      --num: ${({ $targetValue: n }) => n};
+    }
+  }
+`;
+export {
+  r as AnimatedNumberCount
+};
+//# sourceMappingURL=number-count-animation-styled.js.map

package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-count-animation-styled.js","sources":["../../../../src/features/post-game-stats/number-count-animation/number-count-animation-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const AnimatedNumberCount = styled.div<{\n  $initialValue: number;\n  $targetValue: number;\n  $durationInSec?: number;\n  $delayInSec?: number;\n}>`\n  @property --num {\n    syntax: '<integer>';\n    initial-value: ${({ $initialValue }) => $initialValue};\n    inherits: false;\n  }\n\n  counter-set: num var(--num);\n  animation: changeNum ${({ $durationInSec = 0 }) => $durationInSec}s linear\n    ${({ $delayInSec = 0 }) => $delayInSec}s forwards;\n\n  &::after {\n    content: counter(num);\n  }\n\n  @keyframes changeNum {\n    from {\n      --num: ${({ $initialValue }) => $initialValue};\n    }\n    to {\n      --num: ${({ $targetValue }) => $targetValue};\n    }\n  }\n`;\n"],"names":["AnimatedNumberCount","styled","$initialValue","$durationInSec","$delayInSec","$targetValue"],"mappings":";AAEO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA,qBAQrB,CAAC,EAAE,eAAAC,EAAc,MAAMA,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKhC,CAAC,EAAE,gBAAAC,IAAiB,EAAA,MAAQA,CAAc;AAAA,MAC7D,CAAC,EAAE,aAAAC,IAAc,EAAA,MAAQA,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQ3B,CAAC,EAAE,eAAAF,EAAc,MAAMA,CAAa;AAAA;AAAA;AAAA,eAGpC,CAAC,EAAE,cAAAG,EAAa,MAAMA,CAAY;AAAA;AAAA;AAAA;"}

package/dist/features/post-game-stats/number-count-animation/number-count-animation.js

@@ -0,0 +1,20 @@
+import { jsx as o } from "react/jsx-runtime";
+import { AnimatedNumberCount as i } from "./number-count-animation-styled.js";
+const u = ({
+  initialValue: t,
+  targetValue: e,
+  durationInSec: n,
+  delayInSec: r
+}) => /* @__PURE__ */ o(
+  i,
+  {
+    $initialValue: t,
+    $targetValue: e,
+    $durationInSec: n,
+    $delayInSec: r
+  }
+);
+export {
+  u as NumberCountAnimation
+};
+//# sourceMappingURL=number-count-animation.js.map

package/dist/features/post-game-stats/number-count-animation/number-count-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-count-animation.js","sources":["../../../../src/features/post-game-stats/number-count-animation/number-count-animation.tsx"],"sourcesContent":["import type { INumberCountAnimationProps } from './number-count-animation-types';\nimport type { FC } from 'react';\n\nimport * as Styled from './number-count-animation-styled';\n\nexport const NumberCountAnimation: FC<INumberCountAnimationProps> = ({\n  initialValue,\n  targetValue,\n  durationInSec,\n  delayInSec,\n}) => {\n  return (\n    <Styled.AnimatedNumberCount\n      $initialValue={initialValue}\n      $targetValue={targetValue}\n      $durationInSec={durationInSec}\n      $delayInSec={delayInSec}\n    />\n  );\n};\n"],"names":["NumberCountAnimation","initialValue","targetValue","durationInSec","delayInSec","jsx","Styled.AnimatedNumberCount"],"mappings":";;AAKO,MAAMA,IAAuD,CAAC;AAAA,EACnE,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AACF,MAEI,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,eAAeL;AAAA,IACf,cAAcC;AAAA,IACd,gBAAgBC;AAAA,IAChB,aAAaC;AAAA,EAAA;AAAA;"}

package/dist/features/post-game-stats/points/points.js

@@ -1,48 +1,49 @@
 import { jsx as N } from "react/jsx-runtime";
 import { memo as P, useEffect as T } from "react";
-import { LOTTIE as t } from "../../../assets/lottie/lottie.js";
-import { GAME_LAUNCHER_SIZE as a, GAME_LAUNCHER_ASSET_PADDING as O, GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH as c } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
-import { useCircleSounds as E } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
-import { CircleSoundKey as f } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
+import { LOTTIE as o } from "../../../assets/lottie/lottie.js";
+import { GAME_LAUNCHER_SIZE as a } from "../../circle-games/game-launcher/comps/card-container/constants.js";
+import { GAME_LAUNCHER_ASSET_PADDING as O, GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH as c } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
+import { useCircleSounds as f } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
+import { CircleSoundKey as E } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
 import A from "../../ui/lottie-animation/lottie-animation.js";
 const _ = {
-  point1: t.POINT1,
-  point5: t.POINT5,
-  point10: t.POINT10,
-  point15: t.POINT15,
-  point20: t.POINT20,
-  point25: t.POINT25,
-  point30: t.POINT30,
-  point35: t.POINT35,
-  point40: t.POINT40,
-  point45: t.POINT45,
-  point50: t.POINT50,
-  point60: t.POINT60,
-  point100: t.POINT100
+  point1: o.POINT1,
+  point5: o.POINT5,
+  point10: o.POINT10,
+  point15: o.POINT15,
+  point20: o.POINT20,
+  point25: o.POINT25,
+  point30: o.POINT30,
+  point35: o.POINT35,
+  point40: o.POINT40,
+  point45: o.POINT45,
+  point50: o.POINT50,
+  point60: o.POINT60,
+  point100: o.POINT100
 }, r = a + O - c, l = {
   loop: !1,
   autoplay: !0,
   renderer: "canvas"
-}, d = P((p) => {
-  const { point: m = 0, onReveal: n, onComplete: i, show: e } = p, { play: s } = E(), o = _[`point${m}`], I = {
+}, h = P((p) => {
+  const { point: m = 0, onReveal: n, onComplete: i, show: e } = p, { play: s } = f(), t = _[`point${m}`], I = {
     name: "complete",
     callback: i
   };
   return T(() => {
-    o || i(), e && o && (n == null || n());
-  }, [o, i, n, e]), e && o ? /* @__PURE__ */ N(
+    t || i(), e && t && (n == null || n());
+  }, [t, i, n, e]), e && t ? /* @__PURE__ */ N(
     A,
     {
       width: r,
       height: r,
-      src: o,
+      src: t,
       settings: l,
       eventListener: I,
-      onRender: () => s(f.POINTS_AWARDED)
+      onRender: () => s(E.POINTS_AWARDED)
     }
   ) : null;
 });
 export {
-  d as Points
+  h as Points
 };
 //# sourceMappingURL=points.js.map

package/dist/features/post-game-stats/points/points.js.map

@@ -1 +1 @@
-{"version":3,"file":"points.js","sources":["../../../../src/features/post-game-stats/points/points.tsx"],"sourcesContent":["import type { IPointsProps } from './points-types';\nimport type { AnimationEventName } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport { memo, useEffect } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport {\n  GAME_LAUNCHER_ASSET_PADDING,\n  GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,\n  GAME_LAUNCHER_SIZE,\n} from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\n\nconst POINTS_MAP: Record<string, string> = {\n  point1: LOTTIE.POINT1,\n  point5: LOTTIE.POINT5,\n  point10: LOTTIE.POINT10,\n  point15: LOTTIE.POINT15,\n  point20: LOTTIE.POINT20,\n  point25: LOTTIE.POINT25,\n  point30: LOTTIE.POINT30,\n  point35: LOTTIE.POINT35,\n  point40: LOTTIE.POINT40,\n  point45: LOTTIE.POINT45,\n  point50: LOTTIE.POINT50,\n  point60: LOTTIE.POINT60,\n  point100: LOTTIE.POINT100,\n};\nconst animationDimension =\n  GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH;\nconst animationSettings = {\n  loop: false,\n  autoplay: true,\n  renderer: 'canvas',\n};\n\nexport const Points: FC<IPointsProps> = memo(props => {\n  const { point = 0, onReveal, onComplete, show } = props;\n\n  const { play } = useCircleSounds();\n\n  const animationPath = POINTS_MAP[`point${point}`];\n  const animationEventListener = {\n    name: 'complete' as AnimationEventName,\n    callback: onComplete,\n  };\n\n  useEffect(() => {\n    if (!animationPath) onComplete();\n\n    if (show && animationPath) onReveal?.();\n  }, [animationPath, onComplete, onReveal, show]);\n\n  if (show && animationPath) {\n    return (\n      <LottieAnimation\n        width={animationDimension}\n        height={animationDimension}\n        src={animationPath}\n        settings={animationSettings}\n        eventListener={animationEventListener}\n        onRender={() => play(CircleSoundKey.POINTS_AWARDED)}\n      />\n    );\n  }\n\n  return null;\n});\n"],"names":["POINTS_MAP","LOTTIE","animationDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","animationSettings","Points","memo","props","point","onReveal","onComplete","show","play","useCircleSounds","animationPath","animationEventListener","useEffect","jsx","LottieAnimation","CircleSoundKey"],"mappings":";;;;;;;AAgBA,MAAMA,IAAqC;AAAA,EACzC,QAAQC,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,UAAUA,EAAO;AACnB,GACMC,IACJC,IAAqBC,IAA8BC,GAC/CC,IAAoB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,GAEaC,IAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,OAAAC,IAAQ,GAAG,UAAAC,GAAU,YAAAC,GAAY,MAAAC,EAAS,IAAAJ,GAE5C,EAAE,MAAAK,MAASC,KAEXC,IAAgBhB,EAAW,QAAQU,CAAK,EAAE,GAC1CO,IAAyB;AAAA,IAC7B,MAAM;AAAA,IACN,UAAUL;AAAA,EAAA;AASZ,SANAM,EAAU,MAAM;AACV,IAACF,KAA0BJ,KAE3BC,KAAQG,MAA0BL,KAAA,QAAAA;AAAA,KACrC,CAACK,GAAeJ,GAAYD,GAAUE,CAAI,CAAC,GAE1CA,KAAQG,IAER,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOlB;AAAA,MACP,QAAQA;AAAA,MACR,KAAKc;AAAA,MACL,UAAUV;AAAA,MACV,eAAeW;AAAA,MACf,UAAU,MAAMH,EAAKO,EAAe,cAAc;AAAA,IAAA;AAAA,EAAA,IAKjD;AACT,CAAC;"}
+{"version":3,"file":"points.js","sources":["../../../../src/features/post-game-stats/points/points.tsx"],"sourcesContent":["import type { IPointsProps } from './points-types';\nimport type { AnimationEventName } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport { memo, useEffect } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport {\n  GAME_LAUNCHER_ASSET_PADDING,\n  GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,\n} from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\n\nconst POINTS_MAP: Record<string, string> = {\n  point1: LOTTIE.POINT1,\n  point5: LOTTIE.POINT5,\n  point10: LOTTIE.POINT10,\n  point15: LOTTIE.POINT15,\n  point20: LOTTIE.POINT20,\n  point25: LOTTIE.POINT25,\n  point30: LOTTIE.POINT30,\n  point35: LOTTIE.POINT35,\n  point40: LOTTIE.POINT40,\n  point45: LOTTIE.POINT45,\n  point50: LOTTIE.POINT50,\n  point60: LOTTIE.POINT60,\n  point100: LOTTIE.POINT100,\n};\nconst animationDimension =\n  GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH;\nconst animationSettings = {\n  loop: false,\n  autoplay: true,\n  renderer: 'canvas',\n};\n\nexport const Points: FC<IPointsProps> = memo(props => {\n  const { point = 0, onReveal, onComplete, show } = props;\n\n  const { play } = useCircleSounds();\n\n  const animationPath = POINTS_MAP[`point${point}`];\n  const animationEventListener = {\n    name: 'complete' as AnimationEventName,\n    callback: onComplete,\n  };\n\n  useEffect(() => {\n    if (!animationPath) onComplete();\n\n    if (show && animationPath) onReveal?.();\n  }, [animationPath, onComplete, onReveal, show]);\n\n  if (show && animationPath) {\n    return (\n      <LottieAnimation\n        width={animationDimension}\n        height={animationDimension}\n        src={animationPath}\n        settings={animationSettings}\n        eventListener={animationEventListener}\n        onRender={() => play(CircleSoundKey.POINTS_AWARDED)}\n      />\n    );\n  }\n\n  return null;\n});\n"],"names":["POINTS_MAP","LOTTIE","animationDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","animationSettings","Points","memo","props","point","onReveal","onComplete","show","play","useCircleSounds","animationPath","animationEventListener","useEffect","jsx","LottieAnimation","CircleSoundKey"],"mappings":";;;;;;;;AAgBA,MAAMA,IAAqC;AAAA,EACzC,QAAQC,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,UAAUA,EAAO;AACnB,GACMC,IACJC,IAAqBC,IAA8BC,GAC/CC,IAAoB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,GAEaC,IAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,OAAAC,IAAQ,GAAG,UAAAC,GAAU,YAAAC,GAAY,MAAAC,EAAS,IAAAJ,GAE5C,EAAE,MAAAK,MAASC,KAEXC,IAAgBhB,EAAW,QAAQU,CAAK,EAAE,GAC1CO,IAAyB;AAAA,IAC7B,MAAM;AAAA,IACN,UAAUL;AAAA,EAAA;AASZ,SANAM,EAAU,MAAM;AACV,IAACF,KAA0BJ,KAE3BC,KAAQG,MAA0BL,KAAA,QAAAA;AAAA,KACrC,CAACK,GAAeJ,GAAYD,GAAUE,CAAI,CAAC,GAE1CA,KAAQG,IAER,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOlB;AAAA,MACP,QAAQA;AAAA,MACR,KAAKc;AAAA,MACL,UAAUV;AAAA,MACV,eAAeW;AAAA,MACf,UAAU,MAAMH,EAAKO,EAAe,cAAc;AAAA,IAAA;AAAA,EAAA,IAKjD;AACT,CAAC;"}

package/dist/features/post-game-stats/post-game-stats-styled.js

@@ -1,5 +1,5 @@
 import o from "styled-components";
-import { GAME_LAUNCHER_SIZE as t } from "../circle-games/game-launcher/comps/segmented-game-card/constants.js";
+import { GAME_LAUNCHER_SIZE as t } from "../circle-games/game-launcher/comps/card-container/constants.js";
 const n = o.div`
   flex: 1;
   position: absolute;

package/dist/features/post-game-stats/post-game-stats-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-game-stats-styled.js","sources":["../../../src/features/post-game-stats/post-game-stats-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../circle-games/game-launcher/comps/segmented-game-card/constants';\n\nexport const StatsWrapper = styled.div`\n  flex: 1;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 1000;\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  display: flex;\n`;\n\nexport const BlackBg = styled.div`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  border-radius: ${GAME_LAUNCHER_SIZE / 2}px;\n  position: absolute;\n  z-index: -1;\n`;\n"],"names":["StatsWrapper","styled","BlackBg","GAME_LAUNCHER_SIZE","theme"],"mappings":";;AAIO,MAAMA,IAAeC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBtBC,IAAUD,EAAO;AAAA,YAClBE,CAAkB;AAAA,WACnBA,CAAkB;AAAA,gBACb,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,mBAChCD,IAAqB,CAAC;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"post-game-stats-styled.js","sources":["../../../src/features/post-game-stats/post-game-stats-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../circle-games/game-launcher/comps/card-container/constants';\n\nexport const StatsWrapper = styled.div`\n  flex: 1;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 1000;\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  display: flex;\n`;\n\nexport const BlackBg = styled.div`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  border-radius: ${GAME_LAUNCHER_SIZE / 2}px;\n  position: absolute;\n  z-index: -1;\n`;\n"],"names":["StatsWrapper","styled","BlackBg","GAME_LAUNCHER_SIZE","theme"],"mappings":";;AAIO,MAAMA,IAAeC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBtBC,IAAUD,EAAO;AAAA,YAClBE,CAAkB;AAAA,WACnBA,CAAkB;AAAA,gBACb,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,mBAChCD,IAAqB,CAAC;AAAA;AAAA;AAAA;"}

package/dist/features/post-game-stats/streak/streak-styled.js

@@ -1,8 +1,9 @@
 import i, { keyframes as r, css as s } from "styled-components";
-import { GAME_LAUNCHER_SIZE as t, GAME_LAUNCHER_ASSET_PADDING as n } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
+import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
+import { GAME_LAUNCHER_ASSET_PADDING as n } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
 import c from "../../ui/text/text.js";
 import { STREAK_TOP_GREEN_SEGMENT_HEIGHT as o, STREAK_CONTAINER_TOP_OFFSET as x } from "./constants.js";
-const f = 50 * 84 / 100, p = r`
+const m = 50 * 84 / 100, p = r`
   0%{
     opacity: 0;
   }
@@ -16,7 +17,7 @@ const f = 50 * 84 / 100, p = r`
   100%{
     opacity: 0;
   }
-`, g = i.div`
+`, S = i.div`
   height: ${t}px;
   width: ${t}px;
   background: transparent;
@@ -24,18 +25,18 @@ const f = 50 * 84 / 100, p = r`
   justify-content: center;
   align-items: center;
   position: relative;
-`, S = i.div`
+`, u = i.div`
   position: absolute;
   border-radius: ${Math.ceil((t + n) / 2)}px;
   height: ${t + n}px;
   width: ${t + n}px;
   z-index: 0;
-`, u = i.div`
+`, y = i.div`
   height: ${t + n}px;
   width: ${t + n}px;
   position: absolute;
   z-index: 2;
-`, y = i.div`
+`, _ = i.div`
   position: absolute;
   top: ${o}px;
   z-index: 2;
@@ -47,7 +48,7 @@ const f = 50 * 84 / 100, p = r`
   display: flex;
   flex-direction: column;
   align-items: center;
-`, _ = i.div`
+`, A = i.div`
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -55,7 +56,7 @@ const f = 50 * 84 / 100, p = r`
   height: ${(t - o) * 2}px;
   transition: ${({ $translateDuration: e }) => `all ${e}ms linear`};
   transform: ${({ $translate: e }) => e ? "translateY(-100%)" : "translateY(0%)"};
-`, A = i(c)`
+`, T = i(c)`
   font-size: 123px;
   line-height: 123px;
   text-align: center;
@@ -64,21 +65,21 @@ const f = 50 * 84 / 100, p = r`
   display: flex;
   align-items: center;
   justify-content: center;
-`, T = i.div`
+`, k = i.div`
   z-index: 2;
   opacity: 0;
   animation: ${({ $animationType: e, $duration: a, $delay: d }) => s`
     ${e === "fadein" ? p : l} ${a}ms ${d}ms ease forwards
   `};
-  transform: translateY(${(t + f) * 84 / 200 + 25}px);
+  transform: translateY(${(t + m) * 84 / 200 + 25}px);
 `;
 export {
-  S as SVGImgContainer,
-  g as Streak,
-  u as StreakLottieView,
-  A as StreakValue,
-  _ as StreakValueContainer,
-  y as StreakValueWrapper,
-  T as TextWrapper
+  u as SVGImgContainer,
+  S as Streak,
+  y as StreakLottieView,
+  T as StreakValue,
+  A as StreakValueContainer,
+  _ as StreakValueWrapper,
+  k as TextWrapper
 };
 //# sourceMappingURL=streak-styled.js.map

package/dist/features/post-game-stats/streak/streak-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"streak-styled.js","sources":["../../../../src/features/post-game-stats/streak/streak-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport {\n  GAME_LAUNCHER_ASSET_PADDING,\n  GAME_LAUNCHER_SIZE,\n} from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport Text from '../../ui/text/text';\nimport { STREAK_CONTAINER_TOP_OFFSET, STREAK_TOP_GREEN_SEGMENT_HEIGHT } from './constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n  0%{\n    opacity: 0;\n  }\n  100%{\n    opacity: 1;\n  }\n`;\n\nconst fadeOut = keyframes`\n  0%{\n    opacity: 1;\n  }\n  100%{\n    opacity: 0;\n  }\n`;\n\nexport const Streak = styled.div`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background: transparent;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n`;\n\nexport const SVGImgContainer = styled.div`\n  position: absolute;\n  border-radius: ${Math.ceil((GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING) / 2)}px;\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  z-index: 0;\n`;\n\nexport const StreakLottieView = styled.div`\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  position: absolute;\n  z-index: 2;\n`;\n\nexport const StreakValueWrapper = styled.div<{\n  $duration: number;\n  $animationType: 'fadein' | 'fadeout';\n}>`\n  position: absolute;\n  top: ${STREAK_TOP_GREEN_SEGMENT_HEIGHT}px;\n  z-index: 2;\n  height: ${GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT - STREAK_CONTAINER_TOP_OFFSET}px;\n  animation: ${({ $animationType, $duration }) => css`\n    ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards\n  `};\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const StreakValueContainer = styled.div<{\n  $translate: boolean;\n  $translateDuration: number;\n}>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: ${(GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT) * 2}px;\n  transition: ${({ $translateDuration }) => `all ${$translateDuration}ms linear`};\n  transform: ${({ $translate }) => ($translate ? 'translateY(-100%)' : 'translateY(0%)')};\n`;\n\nexport const StreakValue = styled(Text)`\n  font-size: 123px;\n  line-height: 123px;\n  text-align: center;\n  height: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const TextWrapper = styled.div<{\n  $duration: number;\n  $delay: number;\n  $animationType: 'fadein' | 'fadeout';\n}>`\n  z-index: 2;\n  opacity: 0;\n  animation: ${({ $animationType, $duration, $delay }) => css`\n    ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n  `};\n  transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Streak","styled","GAME_LAUNCHER_SIZE","SVGImgContainer","GAME_LAUNCHER_ASSET_PADDING","StreakLottieView","StreakValueWrapper","STREAK_TOP_GREEN_SEGMENT_HEIGHT","STREAK_CONTAINER_TOP_OFFSET","$animationType","$duration","css","StreakValueContainer","$translateDuration","$translate","StreakValue","Text","TextWrapper","$delay"],"mappings":";;;;AASA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAASC,EAAO;AAAA,YACjBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAkBF,EAAO;AAAA;AAAA,mBAEnB,KAAK,MAAMC,IAAqBE,KAA+B,CAAC,CAAC;AAAA,YACxEF,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA,GAI9CC,IAAmBJ,EAAO;AAAA,YAC3BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAK9CE,IAAqBL,EAAO;AAAA;AAAA,SAKhCM,CAA+B;AAAA;AAAA,YAE5BL,IAAqBK,IAAkCC,CAA2B;AAAA,eAC/E,CAAC,EAAE,gBAAAC,GAAgB,WAAAC,EAAA,MAAgBC;AAAA,MAC5CF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS;AAAA,GAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,GAOUE,IAAuBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAQ9BC,IAAqBK,KAAmC,CAAC;AAAA,gBACtD,CAAC,EAAE,oBAAAM,EAAyB,MAAA,OAAOA,CAAkB,WAAW;AAAA,eACjE,CAAC,EAAE,YAAAC,EAAA,MAAkBA,IAAa,sBAAsB,gBAAiB;AAAA,GAG3EC,IAAcd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWzBC,IAAchB,EAAO;AAAA;AAAA;AAAA,eAOnB,CAAC,EAAE,gBAAAQ,GAAgB,WAAAC,GAAW,QAAAQ,QAAaP;AAAA,MACpDF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS,MAAMQ,CAAM;AAAA,GAC1E;AAAA,2BACyBhB,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}
+{"version":3,"file":"streak-styled.js","sources":["../../../../src/features/post-game-stats/streak/streak-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport Text from '../../ui/text/text';\nimport { STREAK_CONTAINER_TOP_OFFSET, STREAK_TOP_GREEN_SEGMENT_HEIGHT } from './constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n  0%{\n    opacity: 0;\n  }\n  100%{\n    opacity: 1;\n  }\n`;\n\nconst fadeOut = keyframes`\n  0%{\n    opacity: 1;\n  }\n  100%{\n    opacity: 0;\n  }\n`;\n\nexport const Streak = styled.div`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background: transparent;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n`;\n\nexport const SVGImgContainer = styled.div`\n  position: absolute;\n  border-radius: ${Math.ceil((GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING) / 2)}px;\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  z-index: 0;\n`;\n\nexport const StreakLottieView = styled.div`\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  position: absolute;\n  z-index: 2;\n`;\n\nexport const StreakValueWrapper = styled.div<{\n  $duration: number;\n  $animationType: 'fadein' | 'fadeout';\n}>`\n  position: absolute;\n  top: ${STREAK_TOP_GREEN_SEGMENT_HEIGHT}px;\n  z-index: 2;\n  height: ${GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT - STREAK_CONTAINER_TOP_OFFSET}px;\n  animation: ${({ $animationType, $duration }) => css`\n    ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards\n  `};\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const StreakValueContainer = styled.div<{\n  $translate: boolean;\n  $translateDuration: number;\n}>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: ${(GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT) * 2}px;\n  transition: ${({ $translateDuration }) => `all ${$translateDuration}ms linear`};\n  transform: ${({ $translate }) => ($translate ? 'translateY(-100%)' : 'translateY(0%)')};\n`;\n\nexport const StreakValue = styled(Text)`\n  font-size: 123px;\n  line-height: 123px;\n  text-align: center;\n  height: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const TextWrapper = styled.div<{\n  $duration: number;\n  $delay: number;\n  $animationType: 'fadein' | 'fadeout';\n}>`\n  z-index: 2;\n  opacity: 0;\n  animation: ${({ $animationType, $duration, $delay }) => css`\n    ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n  `};\n  transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Streak","styled","GAME_LAUNCHER_SIZE","SVGImgContainer","GAME_LAUNCHER_ASSET_PADDING","StreakLottieView","StreakValueWrapper","STREAK_TOP_GREEN_SEGMENT_HEIGHT","STREAK_CONTAINER_TOP_OFFSET","$animationType","$duration","css","StreakValueContainer","$translateDuration","$translate","StreakValue","Text","TextWrapper","$delay"],"mappings":";;;;;AAOA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAASC,EAAO;AAAA,YACjBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAkBF,EAAO;AAAA;AAAA,mBAEnB,KAAK,MAAMC,IAAqBE,KAA+B,CAAC,CAAC;AAAA,YACxEF,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA,GAI9CC,IAAmBJ,EAAO;AAAA,YAC3BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAK9CE,IAAqBL,EAAO;AAAA;AAAA,SAKhCM,CAA+B;AAAA;AAAA,YAE5BL,IAAqBK,IAAkCC,CAA2B;AAAA,eAC/E,CAAC,EAAE,gBAAAC,GAAgB,WAAAC,EAAA,MAAgBC;AAAA,MAC5CF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS;AAAA,GAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,GAOUE,IAAuBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAQ9BC,IAAqBK,KAAmC,CAAC;AAAA,gBACtD,CAAC,EAAE,oBAAAM,EAAyB,MAAA,OAAOA,CAAkB,WAAW;AAAA,eACjE,CAAC,EAAE,YAAAC,EAAA,MAAkBA,IAAa,sBAAsB,gBAAiB;AAAA,GAG3EC,IAAcd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWzBC,IAAchB,EAAO;AAAA;AAAA;AAAA,eAOnB,CAAC,EAAE,gBAAAQ,GAAgB,WAAAC,GAAW,QAAAQ,QAAaP;AAAA,MACpDF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS,MAAMQ,CAAM;AAAA,GAC1E;AAAA,2BACyBhB,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}

package/dist/features/trial-session/comps/trial-circle-game/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../src/features/trial-session/comps/trial-circle-game/constants.ts"],"sourcesContent":["import { ProjectType } from '../../../circle-games/games/web-view/enums';\n\nexport const GAME_CONTAINER_HEIGHT = 530;\nexport const GAME_CONTAINER_WIDTH = 336;\n\nexport const label: Record<ProjectType, string> = {\n  [ProjectType.GAME]: 'Game Time!',\n  [ProjectType.PUZZLE]: 'Puzzle Time!',\n  [ProjectType.LESSON]: 'Mental Math',\n};\n"],"names":["GAME_CONTAINER_HEIGHT","GAME_CONTAINER_WIDTH","ProjectType"],"mappings":";AAEO,MAAMA,IAAwB,KACxBC,IAAuB;AAGjCC,EAAY,OAAZ,IACAA,EAAY,SAAZ,IACAA,EAAY,SAAZ;"}
+{"version":3,"file":"constants.js","sources":["../../../../../src/features/trial-session/comps/trial-circle-game/constants.ts"],"sourcesContent":["import { ProjectType } from '../../../circle-games/games/web-view/enums';\n\nexport const GAME_CONTAINER_HEIGHT = 530;\nexport const GAME_CONTAINER_WIDTH = 336;\n\nexport const label: Omit<Record<ProjectType, string>, 'table'> = {\n  [ProjectType.GAME]: 'Game Time!',\n  [ProjectType.PUZZLE]: 'Puzzle Time!',\n  [ProjectType.LESSON]: 'Mental Math',\n};\n"],"names":["GAME_CONTAINER_HEIGHT","GAME_CONTAINER_WIDTH","ProjectType"],"mappings":";AAEO,MAAMA,IAAwB,KACxBC,IAAuB;AAGjCC,EAAY,OAAZ,IACAA,EAAY,SAAZ,IACAA,EAAY,SAAZ;"}