npm - @cuemath/leap - Versions diffs - 2.8.37-rj-2 → 2.8.37-rj-beta-0.2 - Mend

@cuemath/leap 2.8.37-rj-2 → 2.8.37-rj-beta-0.2

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

Files changed (40) hide show

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

@@ -1,9 +1,9 @@
 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 { GAME_LAUNCHER_SIZE as r, GAME_LAUNCHER_SIZE_LARGE as s } 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";
+import { CONTENT_CONTAINER_Z_INDEX as l, LINE_MARKING_Z_INDEX as d, NUMBER_MARKING_Z_INDEX as m, TARGET_HELPER_TEXT_APPEAR_DELAY as a, RAINBOW_COLOR_ANIMATION_DURATION as p } from "./constants.js";
+import { rainbowColorAnimation as f } from "./helper.js";
 const g = o.div`
   height: ${r}px;
   width: ${r}px;
@@ -16,12 +16,12 @@ const g = o.div`
   border: 1px solid ${({ theme: t }) => t.colors.WHITE};
   animation: ${({ $isTargetAchieved: t }) => t ? e`100%{transform: scale(1.02)}` : "unset"}
     0.133s ease alternate;
-`, E = o.div`
+`, N = o.div`
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
-  z-index: ${s};
+  z-index: ${l};
   height: 92%;
   width: 92%;
   border-radius: 100%;
@@ -29,7 +29,7 @@ const g = o.div`
 `, b = o.div`
   position: relative;
   flex-grow: 1;
-  bottom: -12px;
+  bottom: ${r === s ? -8 : -6}px;
 `;
 o.div`
   position: absolute;
@@ -45,22 +45,22 @@ const u = o.div`
   transform: rotate(${({ $angle: t }) => -240 + t}deg);
   left: ${r / 2}px;
   top: ${r / 2}px;
-  z-index: ${l};
-`, N = o.div`
-  position: absolute;
-  height: ${r - 32}px;
-  transform: rotate(${({ $angle: t }) => -n + t}deg);
   z-index: ${d};
 `, T = o.div`
-  transform: rotate(${({ $angle: t }) => n - t}deg);
+  position: absolute;
+  height: ${r - r * 0.0625 - 10}px;
+  transform: rotate(${({ $angle: t }) => -n + t}deg);
+  z-index: ${m};
 `, h = o.div`
+  transform: rotate(${({ $angle: t }) => n - t}deg);
+`, C = o.div`
   position: absolute;
   top: 0;
   transform: ${({ top: t }) => `translateY(${t}px)`};
-`, C = o(i)`
+`, R = o(i)`
   animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
     ease-in-out ${a}s forwards;
-`, v = o(i)`
+`, I = o(i)`
   animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
     ease ${a}s forwards;
 `;
@@ -68,20 +68,20 @@ o.div`
   height: 100%;
   width: 100%;
 `;
-const I = o(i)`
-  animation: ${({ $isTargetAchieved: t }) => t ? p : "unset"}
-    ${m}s ease infinite forwards;
+const v = o(i)`
+  animation: ${({ $isTargetAchieved: t }) => t ? f : "unset"}
+    ${p}s ease infinite forwards;
 `;
 export {
-  h as BottomAbsoluteView,
-  E as ContentContainer,
+  C as BottomAbsoluteView,
+  N as ContentContainer,
   g as DigitalMeter,
-  C as HelperTextPrimary,
-  v as HelperTextSecondary,
+  R as HelperTextPrimary,
+  I as HelperTextSecondary,
   u as LineMarking,
-  N as MarkingContainer,
-  T as MarkingText,
+  T as MarkingContainer,
+  h as MarkingText,
   b as NumberCountContainer,
-  I as RainboxColorText
+  v as RainboxColorText
 };
 //# sourceMappingURL=digital-meter-styled.js.map

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

	@@ -1 +1 @@
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 BottomAbsoluteView = styled.div<{ top: number }>`\n position: absolute;\n top: 0;\n transform: ${({ top }) => `translateY(${top}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","BottomAbsoluteView","top","HelperTextPrimary","Text","TARGET_HELPER_TEXT_APPEAR_DELAY","HelperTextSecondary","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,~~IAAqBf~~,EAAO;AAAA;AAAA;AAAA,eAG1B,CAAC,EAAE,~~KAAAgB~~,EAAU,MAAA,cAAcA,CAAG,KAAK;AAAA,GAGrCC,~~IAAoBjB~~,~~EAAOkB~~,CAAI;AAAA,~~eAC7Bd~~,iEAAyE;AAAA,~~kBACtEe~~,CAA+B;AAAA,GAGpCC,~~IAAsBpB~~,~~EAAOkB~~,CAAI;AAAA,eAC/Bd,iEAAyE;AAAA,~~WAC7Ee~~,CAA+B;AAAA;~~AAGFnB~~,EAAO;AAAA;AAAA;AAAA;AAKlC,~~MAAAqB~~,~~IAAmBrB~~,~~EAAOkB~~,CAAI;AAAA,eAC5B,CAAC,EAAE,~~mBAAAf~~,EAAA,MAAyBA,~~IAAoBmB~~,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}
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 {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} 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: ${GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? -8 : -6}px;\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 - GAME_LAUNCHER_SIZE * 0.0625 - 10}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 BottomAbsoluteView = styled.div<{ top: number }>`\n position: absolute;\n top: 0;\n transform: ${({ top }) => `translateY(${top}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","GAME_LAUNCHER_SIZE_LARGE","LineMarking","$angle","LINE_MARKING_Z_INDEX","MarkingContainer","ADJUSTED_START_ANGLE","NUMBER_MARKING_Z_INDEX","MarkingText","BottomAbsoluteView","top","HelperTextPrimary","Text","TARGET_HELPER_TEXT_APPEAR_DELAY","HelperTextSecondary","RainboxColorText","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;;;AAiBO,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,YAG/BC,MAAuBO,IAA2B,KAAK,EAAE;AAAA;AAGzCR,EAAO;AAAA;AAAA;AAI5B,MAAMS,IAAcT,EAAO;AAAA,WAGvBC,IAAqB,CAAC;AAAA;AAAA;AAAA,sBAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAInC,CAAC,EAAE,QAAAQ,EAAO,MAAM,OAAOA,CAAM;AAAA,UACzCT,IAAqB,CAAC;AAAA,SACvBA,IAAqB,CAAC;AAAA,aAClBU,CAAoB;AAAA,GAGpBC,IAAmBZ,EAAO;AAAA;AAAA,YAE3BC,IAAqBA,IAAqB,SAAS,EAAE;AAAA,sBAC3C,CAAC,EAAE,QAAAS,EAAA,MAAa,CAACG,IAAuBH,CAAM;AAAA,aACvDI,CAAsB;AAAA,GAGtBC,IAAcf,EAAO;AAAA,sBACZ,CAAC,EAAE,QAAAU,QAAaG,IAAuBH,CAAM;AAAA,GAGtDM,IAAqBhB,EAAO;AAAA;AAAA;AAAA,eAG1B,CAAC,EAAE,KAAAiB,EAAU,MAAA,cAAcA,CAAG,KAAK;AAAA,GAGrCC,IAAoBlB,EAAOmB,CAAI;AAAA,eAC7Bf,iEAAyE;AAAA,kBACtEgB,CAA+B;AAAA,GAGpCC,IAAsBrB,EAAOmB,CAAI;AAAA,eAC/Bf,iEAAyE;AAAA,WAC7EgB,CAA+B;AAAA;AAGFpB,EAAO;AAAA;AAAA;AAAA;AAKlC,MAAAsB,IAAmBtB,EAAOmB,CAAI;AAAA,eAC5B,CAAC,EAAE,mBAAAhB,EAAA,MAAyBA,IAAoBoB,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}

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

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

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

	@@ -1 +1 @@
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 { memo, useEffect, 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 LottieAnimation from '../../ui/lottie-animation/lottie-animation';\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\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n ({\n show,\n value,\n maxValue,\n targetValue = 0,\n displayText,\n progressType,\n helperTextPrimary,\n helperTextSecondary,\n onComplete,\n }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n const isTargetAchievedFlag = !!(targetValue && value >= targetValue);\n\n if (show) {\n if (isTargetAchievedFlag) {\n timer = setTimeout(() => {\n setIsTargetAchieved(true);\n }, TARGET_ACHIEVED_DELAY * 1000);\n }\n\n const timeToFinishAnimation = isTargetAchievedFlag\n ? TOTAL_ANIMATION_DURATION\n : TARGET_ACHIEVED_DELAY;\n\n timerForAnimationComplete = setTimeout(() => {\n onComplete();\n }, timeToFinishAnimation * 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n };\n }, [show, value, targetValue, onComplete]);\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={Math.floor(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={targetValue && 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 {targetValue && (\n <Styled.LineMarking $angle={(targetValue TOTAL_ARC_AVAILABLE) / maxValue} />\n )}\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={targetValue && 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 {isTargetAchieved && (\n <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n <LottieAnimation src={LOTTIE.TARGET_ACHIEVED_TEXT} />\n </Styled.BottomAbsoluteView>\n )}\n {!isTargetAchieved && (\n <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n <Separator height={25} />\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 </Styled.BottomAbsoluteView>\n )}\n </Styled.DigitalMeter>\n );\n }\n\n return null;\n },\n);\n"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","isTargetAchieved","setIsTargetAchieved","useState","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","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.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}
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 { memo, useEffect, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { 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\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n ({\n show,\n value,\n maxValue,\n targetValue = 0,\n displayText,\n progressType,\n helperTextPrimary,\n helperTextSecondary,\n onComplete,\n }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n const isTargetAchievedFlag = !!(targetValue && value >= targetValue);\n\n if (show) {\n if (isTargetAchievedFlag) {\n timer = setTimeout(() => {\n setIsTargetAchieved(true);\n }, TARGET_ACHIEVED_DELAY * 1000);\n }\n\n const timeToFinishAnimation = isTargetAchievedFlag\n ? TOTAL_ANIMATION_DURATION\n : TARGET_ACHIEVED_DELAY;\n\n timerForAnimationComplete = setTimeout(() => {\n onComplete();\n }, timeToFinishAnimation * 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n };\n }, [show, value, targetValue, onComplete]);\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={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 16 : 12}\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={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah1' : 'ah2'}\n $color=\"GREEN_4\"\n $isTargetAchieved={isTargetAchieved}\n >\n <NumberCountAnimation\n initialValue={0}\n targetValue={Math.floor(value)}\n durationInSec={PROGRESS_FILL_DURATION}\n delayInSec={PROGRESS_FILL_DELAY}\n />\n </Styled.RainboxColorText>\n </Styled.NumberCountContainer>\n {progressType === 'stepper' && (\n <Text\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n $color=\"WHITE\"\n >\n /{maxValue}\n </Text>\n )}\n </FlexView>\n <Separator height={8} />\n <Text\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color=\"WHITE_T_60\"\n >\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={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 16 : 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={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE\n ? 'ac3-black'\n : 'ac4-black'\n }\n $isTargetAchieved={index === targetValue && isTargetAchieved}\n $color={targetValue && 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={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 16 : 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 {targetValue && (\n <Styled.LineMarking $angle={(targetValue TOTAL_ARC_AVAILABLE) / maxValue} />\n )}\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={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE\n ? 'ac3-black'\n : 'ac4-black'\n }\n $color={targetValue && 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 {isTargetAchieved && (\n <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n <LottieAnimation src={LOTTIE.TARGET_ACHIEVED_TEXT} />\n </Styled.BottomAbsoluteView>\n )}\n {!isTargetAchieved && (\n <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n <Separator height={25} />\n <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n <Styled.HelperTextPrimary\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color=\"WHITE_T_60\"\n >\n {helperTextPrimary}\n <Separator height={GAME_LAUNCHER_SIZE 0.03} />\n </Styled.HelperTextPrimary>\n <Styled.HelperTextSecondary\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n $color=\"WHITE\"\n >\n {helperTextSecondary}\n </Styled.HelperTextSecondary>\n </FlexView>\n </Styled.BottomAbsoluteView>\n )}\n </Styled.DigitalMeter>\n );\n }\n\n return null;\n },\n);\n"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","isTargetAchieved","setIsTargetAchieved","useState","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","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.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}