npm - @cuemath/leap - Versions diffs - 3.0.9 → 3.0.10-hg2 - Mend

@cuemath/leap 3.0.9 → 3.0.10-hg2

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 (5) hide show

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

@@ -1,9 +1,9 @@
-import { jsxs as o, jsx as r, Fragment as k } from "react/jsx-runtime";
-import w, { memo as Y, useState as B, useCallback as K, useEffect as P } from "react";
+import { jsxs as c, jsx as r, Fragment as k } from "react/jsx-runtime";
+import U, { memo as Y, useState as B, useCallback as K, useEffect as P } from "react";
 import { LOTTIE as j } from "../../../assets/lottie/lottie.js";
-import { GAME_LAUNCHER_SIZE as c, GAME_LAUNCHER_SIZE_LARGE as d } from "../../circle-games/game-launcher/comps/card-container/constants.js";
+import { GAME_LAUNCHER_SIZE as o, GAME_LAUNCHER_SIZE_LARGE as d } from "../../circle-games/game-launcher/comps/card-container/constants.js";
 import { useCircleSounds as Z } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
-import { CircleSoundKey as m } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
+import { CircleSoundKey as T } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
 import I from "../../ui/animated-arc/animated-arc.js";
 import $ from "../../ui/layout/flex-view.js";
 import X from "../../ui/lottie-animation/lottie-animation.js";
@@ -12,34 +12,36 @@ import D from "../../ui/text/text.js";
 import { NumberCountAnimation as q } from "../number-count-animation/number-count-animation.js";
 import { TARGET_ACHIEVED_DELAY as G, TOTAL_ARC_AVAILABLE as h, STROKE_WIDTH as C, ARC_RADIUS as L, ANIMATED_ARC_START_ANGLE as p, PROGRESS_FILL_DURATION as f, PROGRESS_FILL_DELAY as b, TOTAL_ANIMATION_DURATION as z } from "./constants.js";
 import { DigitalMeter as J, ContentContainer as Q, NumberCountContainer as v, RainboxColorText as N, LineMarking as M, MarkingContainer as H, MarkingText as u, BottomAbsoluteView as O, HelperTextPrimary as x, HelperTextSecondary as V } from "./digital-meter-styled.js";
-const Er = Y(
+const rr = {
+  renderer: "canvas"
+}, _r = Y(
   ({
     show: R,
-    value: T,
+    value: a,
     maxValue: n,
     targetValue: t = 0,
     displayText: F,
-    progressType: s,
+    progressType: m,
     helperTextPrimary: W,
-    helperTextSecondary: y,
+    helperTextSecondary: w,
     onComplete: S,
-    actAsTimer: a
+    actAsTimer: s
   }) => {
-    const [l, U] = B(!1), { play: E } = Z(), _ = K(
-      (i) => t ? a ? i <= t : i >= t : !1,
-      [t, a]
+    const [l, y] = B(!1), { play: E } = Z(), _ = K(
+      (i) => t ? s ? i <= t : i >= t : !1,
+      [t, s]
     );
     return P(() => {
       let i, e;
-      const A = _(T);
-      return R && (E(a ? m.TIME_INTRO : m.ACCURACY_INTRO), E(m.METER_FILL), A && (i = setTimeout(() => {
-        E(a ? m.TIME_TARGET : m.ACCURACY_TARGET), U(!0);
+      const A = _(a);
+      return R && (E(s ? T.TIME_INTRO : T.ACCURACY_INTRO), E(T.METER_FILL), A && (i = setTimeout(() => {
+        E(s ? T.TIME_TARGET : T.ACCURACY_TARGET), y(!0);
       }, G * 1e3)), e = setTimeout(() => {
         S();
       }, (A ? z : G) * 1e3)), () => {
         i && clearTimeout(i), e && clearTimeout(e);
       };
-    }, [R, T, S, _, a, E]), R ? /* @__PURE__ */ o(J, { $isTargetAchieved: l, children: [
+    }, [R, a, S, _, s, E]), R ? /* @__PURE__ */ c(J, { $isTargetAchieved: l, children: [
       /* @__PURE__ */ r(
         I,
         {
@@ -51,29 +53,29 @@ const Er = Y(
           startAngle: -p
         }
       ),
-      /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ o($, { $flexDirection: "column", $alignItems: "center", children: [
-        /* @__PURE__ */ o($, { $flexDirection: "row", $alignItems: "flex-end", children: [
+      /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ c($, { $flexDirection: "column", $alignItems: "center", children: [
+        /* @__PURE__ */ c($, { $flexDirection: "row", $alignItems: "flex-end", children: [
           /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(
             N,
             {
-              $renderAs: c === d ? "ah1" : "ah2",
+              $renderAs: o === d ? "ah1" : "ah2",
               $color: "GREEN_4",
               $isTargetAchieved: l,
               children: /* @__PURE__ */ r(
                 q,
                 {
                   initialValue: 0,
-                  targetValue: Math.floor(T),
+                  targetValue: Math.floor(a),
                   durationInSec: f,
                   delayInSec: b
                 }
               )
             }
           ) }),
-          s === "stepper" && /* @__PURE__ */ o(
+          m === "stepper" && /* @__PURE__ */ c(
             D,
             {
-              $renderAs: c === d ? "ah4" : "ab1",
+              $renderAs: o === d ? "ah4" : "ab1",
               $color: "WHITE",
               children: [
                 "/",
@@ -86,13 +88,13 @@ const Er = Y(
         /* @__PURE__ */ r(
           D,
           {
-            $renderAs: c === d ? "ac3-black" : "ac4-black",
+            $renderAs: o === d ? "ac3-black" : "ac4-black",
             $color: "WHITE_T_60",
             children: F
           }
         )
       ] }) }),
-      s === "stepper" && Array.from({ length: T }, (i, e) => {
+      m === "stepper" && Array.from({ length: a }, (i, e) => {
         const A = h / n;
         return /* @__PURE__ */ r(
           I,
@@ -110,14 +112,14 @@ const Er = Y(
           e
         );
       }),
-      s === "stepper" && Array.from({ length: n + 1 }, (i, e) => {
+      m === "stepper" && Array.from({ length: n + 1 }, (i, e) => {
         const A = h / n;
-        return /* @__PURE__ */ o(w.Fragment, { children: [
+        return /* @__PURE__ */ c(U.Fragment, { children: [
           /* @__PURE__ */ r(M, { $angle: A * e }),
           /* @__PURE__ */ r(H, { $angle: A * e, children: /* @__PURE__ */ r(u, { $angle: A * e, children: /* @__PURE__ */ r(
             N,
             {
-              $renderAs: c === d ? "ac3-black" : "ac4-black",
+              $renderAs: o === d ? "ac3-black" : "ac4-black",
               $color: t && t === e ? "GREEN_4" : "WHITE_T_60",
               $isTargetAchieved: t === e && _(e) && l,
               children: e
@@ -125,11 +127,11 @@ const Er = Y(
           ) }) }, e)
         ] }, e);
       }),
-      s === "linear" && /* @__PURE__ */ o(k, { children: [
+      m === "linear" && /* @__PURE__ */ c(k, { children: [
         /* @__PURE__ */ r(
           I,
           {
-            targetAngle: T * h / n,
+            targetAngle: a * h / n,
             strokeWidth: C,
             color: "GREEN_4",
             radius: L,
@@ -139,7 +141,7 @@ const Er = Y(
             startAngle: -p
           }
         ),
-        /* @__PURE__ */ o(k, { children: [
+        /* @__PURE__ */ c(k, { children: [
           t && /* @__PURE__ */ r(M, { $angle: t * h / n }),
           Array.from(/* @__PURE__ */ new Set([0, t, n])).map((i, e) => /* @__PURE__ */ r(
             H,
@@ -148,7 +150,7 @@ const Er = Y(
               children: /* @__PURE__ */ r(u, { $angle: i * h / n, children: /* @__PURE__ */ r(
                 N,
                 {
-                  $renderAs: c === d ? "ac3-black" : "ac4-black",
+                  $renderAs: o === d ? "ac3-black" : "ac4-black",
                   $color: t && t === i ? "GREEN_4" : "WHITE_T_60",
                   $isTargetAchieved: t === i && l && _(i),
                   children: i
@@ -159,27 +161,34 @@ const Er = Y(
           ))
         ] })
       ] }),
-      l && /* @__PURE__ */ r(O, { top: c, children: /* @__PURE__ */ r(X, { src: j.TARGET_ACHIEVED_TEXT }) }),
-      !l && /* @__PURE__ */ o(O, { top: c, children: [
+      l && /* @__PURE__ */ r(O, { top: o, children: /* @__PURE__ */ r(
+        X,
+        {
+          src: j.TARGET_ACHIEVED_TEXT,
+          settings: rr,
+          width: o * 0.6
+        }
+      ) }),
+      !l && /* @__PURE__ */ c(O, { top: o, children: [
         /* @__PURE__ */ r(g, { height: 25 }),
-        /* @__PURE__ */ o($, { $flexDirection: "column", $alignItems: "center", children: [
-          /* @__PURE__ */ o(
+        /* @__PURE__ */ c($, { $flexDirection: "column", $alignItems: "center", children: [
+          /* @__PURE__ */ c(
             x,
             {
-              $renderAs: c === d ? "ac3-black" : "ac4-black",
+              $renderAs: o === d ? "ac3-black" : "ac4-black",
               $color: "WHITE_T_60",
               children: [
                 W,
-                /* @__PURE__ */ r(g, { height: c * 0.03 })
+                /* @__PURE__ */ r(g, { height: o * 0.03 })
               ]
             }
           ),
           /* @__PURE__ */ r(
             V,
             {
-              $renderAs: c === d ? "ah4" : "ab1",
+              $renderAs: o === d ? "ah4" : "ab1",
               $color: "WHITE",
-              children: y
+              children: w
             }
           )
         ] })
@@ -188,6 +197,6 @@ const Er = Y(
   }
 );
 export {
-  Er as DigitalMeter
+  _r 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 React, { memo, useCallback, 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 { 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 AnimatedArc from '../../ui/animated-arc/animated-arc';\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 {\n ANIMATED_ARC_START_ANGLE,\n ARC_RADIUS,\n PROGRESS_FILL_DELAY,\n PROGRESS_FILL_DURATION,\n STROKE_WIDTH,\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 actAsTimer,\n }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n const { play } = useCircleSounds();\n\n const isTargetValueAchieved = useCallback(\n (valueToCompare: number) => {\n if (targetValue) {\n if (actAsTimer) {\n return valueToCompare <= targetValue;\n }\n\n return valueToCompare >= targetValue;\n }\n\n return false;\n },\n [targetValue, actAsTimer],\n );\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n const isTargetAchievedFlag = isTargetValueAchieved(value);\n\n if (show) {\n play(actAsTimer ? CircleSoundKey.TIME_INTRO : CircleSoundKey.ACCURACY_INTRO);\n play(CircleSoundKey.METER_FILL);\n if (isTargetAchievedFlag) {\n timer = setTimeout(() => {\n play(actAsTimer ? CircleSoundKey.TIME_TARGET : CircleSoundKey.ACCURACY_TARGET);\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, onComplete, isTargetValueAchieved, actAsTimer, play]);\n\n if (!show) return null;\n\n return (\n <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n {/* complete arc area to be filled /}\n <AnimatedArc\n targetAngle={TOTAL_ARC_AVAILABLE}\n strokeWidth={STROKE_WIDTH}\n color=\"BLACK_5\"\n radius={ARC_RADIUS}\n duration={0}\n startAngle={-ANIMATED_ARC_START_ANGLE}\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={-ANIMATED_ARC_START_ANGLE + arcLength index}\n targetAngle={arcLength}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\n mode=\"fade\"\n duration={PROGRESS_FILL_DURATION / maxValue}\n delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n showAnimatedRainbowArc={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 <React.Fragment key={index}>\n <Styled.LineMarking $angle={arcLength index} />\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 ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === index ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === index && isTargetValueAchieved(index) && isTargetAchieved\n }\n >\n {index}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n </React.Fragment>\n );\n })}\n\n {/* progress of linear /}\n {progressType === 'linear' && (\n <>\n <AnimatedArc\n targetAngle={(value TOTAL_ARC_AVAILABLE) / maxValue}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\n duration={PROGRESS_FILL_DURATION}\n delay={PROGRESS_FILL_DELAY}\n showAnimatedRainbowArc={isTargetAchieved}\n startAngle={-ANIMATED_ARC_START_ANGLE}\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 ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === val ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === val && isTargetAchieved && isTargetValueAchieved(val)\n }\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"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","actAsTimer","isTargetAchieved","setIsTargetAchieved","useState","play","useCircleSounds","isTargetValueAchieved","useCallback","valueToCompare","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","CircleSoundKey","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","STROKE_WIDTH","ARC_RADIUS","ANIMATED_ARC_START_ANGLE","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","React","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","Fragment","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 React, { memo, useCallback, 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 { 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 AnimatedArc from '../../ui/animated-arc/animated-arc';\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 {\n ANIMATED_ARC_START_ANGLE,\n ARC_RADIUS,\n PROGRESS_FILL_DELAY,\n PROGRESS_FILL_DURATION,\n STROKE_WIDTH,\n TARGET_ACHIEVED_DELAY,\n TOTAL_ANIMATION_DURATION,\n TOTAL_ARC_AVAILABLE,\n} from './constants';\nimport * as Styled from './digital-meter-styled';\n\nconst settings = {\n renderer: 'canvas',\n};\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 actAsTimer,\n }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n const { play } = useCircleSounds();\n\n const isTargetValueAchieved = useCallback(\n (valueToCompare: number) => {\n if (targetValue) {\n if (actAsTimer) {\n return valueToCompare <= targetValue;\n }\n\n return valueToCompare >= targetValue;\n }\n\n return false;\n },\n [targetValue, actAsTimer],\n );\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n const isTargetAchievedFlag = isTargetValueAchieved(value);\n\n if (show) {\n play(actAsTimer ? CircleSoundKey.TIME_INTRO : CircleSoundKey.ACCURACY_INTRO);\n play(CircleSoundKey.METER_FILL);\n if (isTargetAchievedFlag) {\n timer = setTimeout(() => {\n play(actAsTimer ? CircleSoundKey.TIME_TARGET : CircleSoundKey.ACCURACY_TARGET);\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, onComplete, isTargetValueAchieved, actAsTimer, play]);\n\n if (!show) return null;\n\n return (\n <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n {/* complete arc area to be filled /}\n <AnimatedArc\n targetAngle={TOTAL_ARC_AVAILABLE}\n strokeWidth={STROKE_WIDTH}\n color=\"BLACK_5\"\n radius={ARC_RADIUS}\n duration={0}\n startAngle={-ANIMATED_ARC_START_ANGLE}\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={-ANIMATED_ARC_START_ANGLE + arcLength index}\n targetAngle={arcLength}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\n mode=\"fade\"\n duration={PROGRESS_FILL_DURATION / maxValue}\n delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n showAnimatedRainbowArc={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 <React.Fragment key={index}>\n <Styled.LineMarking $angle={arcLength index} />\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 ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === index ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === index && isTargetValueAchieved(index) && isTargetAchieved\n }\n >\n {index}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n </React.Fragment>\n );\n })}\n\n {/* progress of linear /}\n {progressType === 'linear' && (\n <>\n <AnimatedArc\n targetAngle={(value TOTAL_ARC_AVAILABLE) / maxValue}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\n duration={PROGRESS_FILL_DURATION}\n delay={PROGRESS_FILL_DELAY}\n showAnimatedRainbowArc={isTargetAchieved}\n startAngle={-ANIMATED_ARC_START_ANGLE}\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 ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === val ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === val && isTargetAchieved && isTargetValueAchieved(val)\n }\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\n src={LOTTIE.TARGET_ACHIEVED_TEXT}\n settings={settings}\n width={GAME_LAUNCHER_SIZE 0.6}\n />\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"],"names":["settings","DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","actAsTimer","isTargetAchieved","setIsTargetAchieved","useState","play","useCircleSounds","isTargetValueAchieved","useCallback","valueToCompare","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","CircleSoundKey","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","STROKE_WIDTH","ARC_RADIUS","ANIMATED_ARC_START_ANGLE","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","React","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","Fragment","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":";;;;;;;;;;;;;;AA8BA,MAAMA,KAAW;AAAA,EACf,UAAU;AACZ,GAEaC,KAAuCC;AAAA,EAClD,CAAC;AAAA,IACC,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,MACI;AACJ,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxD,EAAE,MAAAC,MAASC,KAEXC,IAAwBC;AAAA,MAC5B,CAACC,MACKd,IACEM,IACKQ,KAAkBd,IAGpBc,KAAkBd,IAGpB;AAAA,MAET,CAACA,GAAaM,CAAU;AAAA,IAAA;AAiCtB,WA9BJS,EAAU,MAAM;AACV,UAAAC,GACAC;AACE,YAAAC,IAAuBN,EAAsBd,CAAK;AAExD,aAAID,MACFa,EAAKJ,IAAaa,EAAe,aAAaA,EAAe,cAAc,GAC3ET,EAAKS,EAAe,UAAU,GAC1BD,MACFF,IAAQ,WAAW,MAAM;AACvB,QAAAN,EAAKJ,IAAaa,EAAe,cAAcA,EAAe,eAAe,GAC7EX,EAAoB,EAAI;AAAA,MAAA,GACvBY,IAAwB,GAAI,IAOjCH,IAA4B,WAAW,MAAM;AAChC,QAAAZ;MAAA,IALiBa,IAC1BG,IACAD,KAIuB,GAAI,IAG1B,MAAM;AACX,QAAAJ,KAAS,aAAaA,CAAK,GAC3BC,KAA6B,aAAaA,CAAyB;AAAA,MAAA;AAAA,IACrE,GACC,CAACpB,GAAMC,GAAOO,GAAYO,GAAuBN,GAAYI,CAAI,CAAC,GAEhEb,IAGF,gBAAAyB,EAAAC,GAAA,EAAoB,mBAAmBhB,GAEtC,UAAA;AAAA,MAAA,gBAAAiB;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAaC;AAAA,UACb,aAAaC;AAAA,UACb,OAAM;AAAA,UACN,QAAQC;AAAA,UACR,UAAU;AAAA,UACV,YAAY,CAACC;AAAA,QAAA;AAAA,MACf;AAAA,MAGA,gBAAAL,EAACM,GAAA,EACC,4BAACC,GAAS,EAAA,gBAAe,UAAS,aAAY,UAC5C,UAAA;AAAA,QAAA,gBAAAT,EAACS,GAAS,EAAA,gBAAe,OAAM,aAAY,YACzC,UAAA;AAAA,UAAC,gBAAAP,EAAAQ,GAAA,EACC,UAAA,gBAAAR;AAAA,YAACS;AAAAA,YAAA;AAAA,cACC,WAAWC,MAAuBC,IAA2B,QAAQ;AAAA,cACrE,QAAO;AAAA,cACP,mBAAmB5B;AAAA,cAEnB,UAAA,gBAAAiB;AAAA,gBAACY;AAAA,gBAAA;AAAA,kBACC,cAAc;AAAA,kBACd,aAAa,KAAK,MAAMtC,CAAK;AAAA,kBAC7B,eAAeuC;AAAA,kBACf,YAAYC;AAAA,gBAAA;AAAA,cACd;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACCpC,MAAiB,aAChB,gBAAAoB;AAAA,YAACiB;AAAA,YAAA;AAAA,cACC,WAAWL,MAAuBC,IAA2B,QAAQ;AAAA,cACrE,QAAO;AAAA,cACR,UAAA;AAAA,gBAAA;AAAA,gBACGpC;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAyB,EAACgB,GAAU,EAAA,QAAQ,EAAG,CAAA;AAAA,QACtB,gBAAAhB;AAAA,UAACe;AAAA,UAAA;AAAA,YACC,WACEL,MAAuBC,IAA2B,cAAc;AAAA,YAElE,QAAO;AAAA,YAEN,UAAAlC;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,EAAA,CACF,EACF,CAAA;AAAA,MAGCC,MAAiB,aAChB,MAAM,KAAK,EAAE,QAAQJ,EAAM,GAAG,CAAC2C,GAAGC,MAAU;AAC1C,cAAMC,IAAYjB,IAAsB3B;AAGtC,eAAA,gBAAAyB;AAAA,UAACC;AAAA,UAAA;AAAA,YAEC,YAAY,CAACI,IAA2Bc,IAAYD;AAAA,YACpD,aAAaC;AAAA,YACb,aAAahB;AAAA,YACb,OAAM;AAAA,YACN,QAAQC;AAAA,YACR,MAAK;AAAA,YACL,UAAUS,IAAyBtC;AAAA,YACnC,OAAOuC,IAAuBD,IAAyBtC,IAAY2C;AAAA,YACnE,wBAAwBnC;AAAA,UAAA;AAAA,UATnBmC;AAAA,QAAA;AAAA,MAUP,CAEH;AAAA,MAGFxC,MAAiB,aAChB,MAAM,KAAK,EAAE,QAAQH,IAAW,EAAE,GAAG,CAAC0C,GAAGC,MAAU;AACjD,cAAMC,IAAYjB,IAAsB3B;AAGtC,eAAA,gBAAAuB,EAACsB,EAAM,UAAN,EACC,UAAA;AAAA,UAAA,gBAAApB,EAACqB,GAAA,EAAmB,QAAQF,IAAYD,EAAO,CAAA;AAAA,UAC9C,gBAAAlB,EAAAsB,GAAA,EAAoC,QAAQH,IAAYD,GACvD,UAAA,gBAAAlB,EAACuB,GAAA,EAAmB,QAAQJ,IAAYD,GACtC,UAAA,gBAAAlB;AAAA,YAACS;AAAAA,YAAA;AAAA,cACC,WACEC,MAAuBC,IAA2B,cAAc;AAAA,cAElE,QAAQnC,KAAeA,MAAgB0C,IAAQ,YAAY;AAAA,cAC3D,mBACE1C,MAAgB0C,KAAS9B,EAAsB8B,CAAK,KAAKnC;AAAA,cAG1D,UAAAmC;AAAA,YAAA;AAAA,UAAA,EAEL,CAAA,KAb4BA,CAc9B;AAAA,QAAA,EAAA,GAhBmBA,CAiBrB;AAAA,MAAA,CAEH;AAAA,MAGFxC,MAAiB,YAEd,gBAAAoB,EAAA0B,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAxB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAc3B,IAAQ4B,IAAuB3B;AAAA,YAC7C,aAAa4B;AAAA,YACb,OAAM;AAAA,YACN,QAAQC;AAAA,YACR,UAAUS;AAAA,YACV,OAAOC;AAAA,YACP,wBAAwB/B;AAAA,YACxB,YAAY,CAACsB;AAAA,UAAA;AAAA,QACf;AAAA,QAGG,gBAAAP,EAAA0B,GAAA,EAAA,UAAA;AAAA,UAAAhD,uBACE6C,GAAA,EAAmB,QAAS7C,IAAc0B,IAAuB3B,GAAU;AAAA,UAI7E,MAAM,KAAS,oBAAA,IAAI,CAAC,GAAGC,GAAaD,CAAQ,CAAC,CAAC,EAAE,IAAI,CAACkD,GAAKP,MACzD,gBAAAlB;AAAA,YAACsB;AAAAA,YAAA;AAAA,cAEC,QAASG,IAAMvB,IAAuB3B;AAAA,cAEtC,4BAACgD,GAAA,EAAmB,QAASE,IAAMvB,IAAuB3B,GACxD,UAAA,gBAAAyB;AAAA,gBAACS;AAAAA,gBAAA;AAAA,kBACC,WACEC,MAAuBC,IAA2B,cAAc;AAAA,kBAElE,QAAQnC,KAAeA,MAAgBiD,IAAM,YAAY;AAAA,kBACzD,mBACEjD,MAAgBiD,KAAO1C,KAAoBK,EAAsBqC,CAAG;AAAA,kBAGrE,UAAAA;AAAA,gBAAA;AAAA,cAAA,GAEL;AAAA,YAAA;AAAA,YAfKP;AAAA,UAAA,CAiBR;AAAA,QAAA,GACH;AAAA,MAAA,GACF;AAAA,MAIDnC,KACE,gBAAAiB,EAAA0B,GAAA,EAA0B,KAAKhB,GAC9B,UAAA,gBAAAV;AAAA,QAAC2B;AAAA,QAAA;AAAA,UACC,KAAKC,EAAO;AAAA,UACZ,UAAA1D;AAAA,UACA,OAAOwC,IAAqB;AAAA,QAAA;AAAA,MAAA,GAEhC;AAAA,MAED,CAAC3B,KACA,gBAAAe,EAAC4B,GAAA,EAA0B,KAAKhB,GAC9B,UAAA;AAAA,QAAC,gBAAAV,EAAAgB,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,QACtB,gBAAAlB,EAAAS,GAAA,EAAS,gBAAe,UAAS,aAAY,UAC5C,UAAA;AAAA,UAAA,gBAAAT;AAAA,YAAC+B;AAAAA,YAAA;AAAA,cACC,WACEnB,MAAuBC,IAA2B,cAAc;AAAA,cAElE,QAAO;AAAA,cAEN,UAAA;AAAA,gBAAAhC;AAAA,gBACA,gBAAAqB,EAAAgB,GAAA,EAAU,QAAQN,IAAqB,KAAM,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAChD;AAAA,UACA,gBAAAV;AAAA,YAAC8B;AAAAA,YAAA;AAAA,cACC,WAAWpB,MAAuBC,IAA2B,QAAQ;AAAA,cACrE,QAAO;AAAA,cAEN,UAAA/B;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,GACF;AAAA,MAAA,GACF;AAAA,IAEJ,EAAA,CAAA,IAjLgB;AAAA,EAmLpB;AACF;"}

package/dist/features/ui/animated-arc/animated-arc.js CHANGED Viewed

@@ -8,8 +8,8 @@ const b = ({
   color: y,
   targetAngle: a,
   startAngle: c = 0,
-  duration: o = 2,
-  mode: s = "draw",
+  duration: s = 2,
+  mode: o = "draw",
   delay: n = 0,
   showAnimatedRainbowArc: $ = !1
 }) => {
@@ -20,17 +20,17 @@ const b = ({
   return g(() => {
     const t = f.current;
     if (t) {
-      if (s === "draw") {
+      if (o === "draw") {
         const m = t.getTotalLength();
         t.style.strokeDasharray = `${m}`, t.style.strokeDashoffset = `${m}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
-          t.style.transition = `stroke-dashoffset ${o}s linear ${n}s`, t.style.strokeDashoffset = "0";
+          t.style.transition = `stroke-dashoffset ${s}s linear ${n}s`, t.style.strokeDashoffset = "0";
         });
       }
-      s === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
-        t.style.transition = `opacity ${o} ease-in-out ${n}s`, t.style.opacity = "1";
+      o === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
+        t.style.transition = `opacity ${s}s ease-in-out ${n}s`, t.style.opacity = "1";
       }));
     }
-  }, [h, s, o, n]), /* @__PURE__ */ p(R, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ p(
+  }, [h, o, s, n]), /* @__PURE__ */ p(R, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ p(
     k,
     {
       ref: f,

package/dist/features/ui/animated-arc/animated-arc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"animated-arc.js","sources":["../../../../src/features/ui/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect, useMemo } from 'react';\n\nimport { describeArc } from './animated-arc-helpers';\nimport * as Styled from './animated-arc-styled';\n\nconst AnimatedArc: React.FC<IAnimatedArcProps> = ({\n radius,\n strokeWidth,\n color,\n targetAngle,\n startAngle = 0,\n duration = 2,\n mode = 'draw',\n delay = 0,\n showAnimatedRainbowArc = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = useMemo(\n () => describeArc(center, center, arcRadius, startAngle, targetAngle),\n [targetAngle, startAngle, arcRadius, center],\n );\n\n useLayoutEffect(() => {\n const path = pathRef.current;\n\n if (!path) return;\n\n if (mode === 'draw') {\n const length = path.getTotalLength();\n\n path.style.strokeDasharray = `${length}`;\n path.style.strokeDashoffset = `${length}`;\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n path.style.strokeDashoffset = '0';\n });\n }\n\n if (mode === 'fade') {\n path.style.opacity = '0';\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `opacity ${duration} ease-in-out ${delay}s`;\n path.style.opacity = '1';\n });\n }\n }, [arcPath, mode, duration, delay]);\n\n return (\n <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n <Styled.Path\n ref={pathRef}\n d={arcPath}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"butt\"\n $showAnimatedRainbowArc={showAnimatedRainbowArc}\n />\n </Styled.Svg>\n );\n};\n\nexport default AnimatedArc;\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","showAnimatedRainbowArc","pathRef","useRef","center","arcRadius","arcPath","useMemo","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path","AnimatedArc$1"],"mappings":";;;;AAOA,MAAMA,IAA2C,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,wBAAAC,IAAyB;AAC3B,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAASX,GACTY,IAAYZ,IAASC,IAAc,GACnCY,IAAUC;AAAA,IACd,MAAMC,EAAYJ,GAAQA,GAAQC,GAAWR,GAAYD,CAAW;AAAA,IACpE,CAACA,GAAaC,GAAYQ,GAAWD,CAAM;AAAA,EAAA;AAG7C,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAAOR,EAAQ;AAErB,QAAKQ,GAEL;AAAA,UAAIX,MAAS,QAAQ;AACb,cAAAY,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBZ,CAAQ,YAAYE,CAAK,KACtEU,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIX,MAAS,WACXW,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,QAAAA,EAAK,MAAM,aAAa,WAAWZ,CAAQ,~~gBAAgBE~~,CAAK,~~KAChEU~~,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACJ,GAASP,GAAMD,GAAUE,CAAK,CAAC,qBAGhCY,GAAA,EAAW,OAAO,IAAInB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAoB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKZ;AAAA,MACL,GAAGI;AAAA,MACH,MAAK;AAAA,MACL,QAAQX;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,yBAAyBO;AAAA,IAAA;AAAA,EAE7B,EAAA,CAAA;AAEJ,GAEAc,IAAevB;"}
1	+ {"version":3,"file":"animated-arc.js","sources":["../../../../src/features/ui/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect, useMemo } from 'react';\n\nimport { describeArc } from './animated-arc-helpers';\nimport * as Styled from './animated-arc-styled';\n\nconst AnimatedArc: React.FC<IAnimatedArcProps> = ({\n radius,\n strokeWidth,\n color,\n targetAngle,\n startAngle = 0,\n duration = 2,\n mode = 'draw',\n delay = 0,\n showAnimatedRainbowArc = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = useMemo(\n () => describeArc(center, center, arcRadius, startAngle, targetAngle),\n [targetAngle, startAngle, arcRadius, center],\n );\n\n useLayoutEffect(() => {\n const path = pathRef.current;\n\n if (!path) return;\n\n if (mode === 'draw') {\n const length = path.getTotalLength();\n\n path.style.strokeDasharray = `${length}`;\n path.style.strokeDashoffset = `${length}`;\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n path.style.strokeDashoffset = '0';\n });\n }\n\n if (mode === 'fade') {\n path.style.opacity = '0';\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;\n path.style.opacity = '1';\n });\n }\n }, [arcPath, mode, duration, delay]);\n\n return (\n <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n <Styled.Path\n ref={pathRef}\n d={arcPath}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"butt\"\n $showAnimatedRainbowArc={showAnimatedRainbowArc}\n />\n </Styled.Svg>\n );\n};\n\nexport default AnimatedArc;\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","showAnimatedRainbowArc","pathRef","useRef","center","arcRadius","arcPath","useMemo","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path","AnimatedArc$1"],"mappings":";;;;AAOA,MAAMA,IAA2C,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,wBAAAC,IAAyB;AAC3B,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAASX,GACTY,IAAYZ,IAASC,IAAc,GACnCY,IAAUC;AAAA,IACd,MAAMC,EAAYJ,GAAQA,GAAQC,GAAWR,GAAYD,CAAW;AAAA,IACpE,CAACA,GAAaC,GAAYQ,GAAWD,CAAM;AAAA,EAAA;AAG7C,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAAOR,EAAQ;AAErB,QAAKQ,GAEL;AAAA,UAAIX,MAAS,QAAQ;AACb,cAAAY,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBZ,CAAQ,YAAYE,CAAK,KACtEU,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIX,MAAS,WACXW,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,QAAAA,EAAK,MAAM,aAAa,WAAWZ,CAAQ,iBAAiBE,CAAK,KACjEU,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACJ,GAASP,GAAMD,GAAUE,CAAK,CAAC,qBAGhCY,GAAA,EAAW,OAAO,IAAInB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAoB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKZ;AAAA,MACL,GAAGI;AAAA,MACH,MAAK;AAAA,MACL,QAAQX;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,yBAAyBO;AAAA,IAAA;AAAA,EAE7B,EAAA,CAAA;AAEJ,GAEAc,IAAevB;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.0.9",
+  "version": "3.0.10-hg2",
   "type": "module",
   "files": [
     "dist"