@cuemath/leap 2.8.36-tables-hg6 → 2.8.36-tables-hg7

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 (3) hide show
  1. package/dist/features/post-game-stats/digital-meter/digital-meter.js +59 -57
  2. package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -1
  3. package/package.json +1 -1
package/dist/features/post-game-stats/digital-meter/digital-meter.js CHANGED
@@ -1,39 +1,41 @@
1
1
  import { jsxs as c, jsx as r, Fragment as E } from "react/jsx-runtime";
2
- import { memo as G, useState as O, useEffect as W } from "react";
3
- import { LOTTIE as M } from "../../../assets/lottie/lottie.js";
2
+ import { memo as M, useState as O, useEffect as p } from "react";
3
+ import { LOTTIE as W } from "../../../assets/lottie/lottie.js";
4
4
  import { GAME_LAUNCHER_SIZE as d } from "../../circle-games/game-launcher/comps/card-container/constants.js";
5
5
  import a from "../../ui/layout/flex-view.js";
6
6
  import y from "../../ui/lottie-animation/lottie-animation.js";
7
- import p from "../../ui/separator/separator.js";
8
- import R from "../../ui/text/text.js";
9
- import { NumberCountAnimation as w } from "../number-count-animation/number-count-animation.js";
7
+ import R from "../../ui/separator/separator.js";
8
+ import L from "../../ui/text/text.js";
9
+ import { NumberCountAnimation as u } from "../number-count-animation/number-count-animation.js";
10
10
  import { AnimatedArc as _ } from "./comp/animated-arc/animated-arc.js";
11
- 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";
12
- 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";
13
- const nr = G(
11
+ import { TARGET_ACHIEVED_DELAY as D, TOTAL_ARC_AVAILABLE as A, BORDER_OFFSET as $, PROGRESS_FILL_DURATION as h, PROGRESS_FILL_DELAY as g, TOTAL_ANIMATION_DURATION as w } from "./constants.js";
12
+ import { DigitalMeter as B, ContentContainer as P, NumberCountContainer as U, RainboxColorText as f, LineMarking as C, MarkingContainer as N, MarkingText as S, BottomAbsoluteView as b, HelperTextPrimary as j, HelperTextSecondary as Y } from "./digital-meter-styled.js";
13
+ const or = M(
14
14
  ({
15
15
  show: T,
16
16
  value: m,
17
- maxValue: o,
17
+ maxValue: n,
18
18
  targetValue: i = 0,
19
- displayText: b,
20
- progressType: h,
21
- helperTextPrimary: k,
22
- helperTextSecondary: H,
19
+ displayText: k,
20
+ progressType: s,
21
+ helperTextPrimary: H,
22
+ helperTextSecondary: F,
23
23
  onComplete: I
24
24
  }) => {
25
- const [l, F] = O(!1);
26
- return W(() => {
27
- let n, e;
25
+ const [l, G] = O(!1);
26
+ return p(() => (console.log("DigitalMeter mounted", m), () => {
27
+ console.log("DigitalMeter unmounted");
28
+ }), []), p(() => {
29
+ let o, e;
28
30
  const t = !!(i && m >= i);
29
- return T && (t && (n = setTimeout(() => {
30
- F(!0);
31
- }, L * 1e3)), e = setTimeout(() => {
31
+ return T && (t && (o = setTimeout(() => {
32
+ G(!0);
33
+ }, D * 1e3)), e = setTimeout(() => {
32
34
  I();
33
- }, (t ? B : L) * 1e3)), () => {
34
- n && clearTimeout(n), e && clearTimeout(e);
35
+ }, (t ? w : D) * 1e3)), () => {
36
+ o && clearTimeout(o), e && clearTimeout(e);
35
37
  };
36
- }, [T, m, i, I]), T ? /* @__PURE__ */ c(u, { $isTargetAchieved: l, children: [
38
+ }, [T, m, i, I]), T ? /* @__PURE__ */ c(B, { $isTargetAchieved: l, children: [
37
39
  /* @__PURE__ */ r(
38
40
  _,
39
41
  {
@@ -47,32 +49,32 @@ const nr = G(
47
49
  /* @__PURE__ */ r(P, { children: /* @__PURE__ */ c(a, { $flexDirection: "column", $alignItems: "center", children: [
48
50
  /* @__PURE__ */ c(a, { $flexDirection: "row", $alignItems: "flex-end", children: [
49
51
  /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(
50
- g,
52
+ f,
51
53
  {
52
54
  $renderAs: "ah1",
53
55
  $color: "GREEN_4",
54
56
  $isTargetAchieved: l,
55
57
  children: /* @__PURE__ */ r(
56
- w,
58
+ u,
57
59
  {
58
60
  initialValue: 0,
59
61
  targetValue: m,
60
- durationInSec: s,
61
- delayInSec: f
62
+ durationInSec: h,
63
+ delayInSec: g
62
64
  }
63
65
  )
64
66
  }
65
67
  ) }),
66
- h === "stepper" && /* @__PURE__ */ c(R, { $renderAs: "ac2", $color: "WHITE", children: [
68
+ s === "stepper" && /* @__PURE__ */ c(L, { $renderAs: "ac2", $color: "WHITE", children: [
67
69
  "/",
68
- o
70
+ n
69
71
  ] })
70
72
  ] }),
71
- /* @__PURE__ */ r(p, { height: 8 }),
72
- /* @__PURE__ */ r(R, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: b })
73
+ /* @__PURE__ */ r(R, { height: 8 }),
74
+ /* @__PURE__ */ r(L, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: k })
73
75
  ] }) }),
74
- h === "stepper" && Array.from({ length: m }, (n, e) => {
75
- const t = A / o;
76
+ s === "stepper" && Array.from({ length: m }, (o, e) => {
77
+ const t = A / n;
76
78
  return /* @__PURE__ */ r(
77
79
  _,
78
80
  {
@@ -82,19 +84,19 @@ const nr = G(
82
84
  color: "GREEN_4",
83
85
  radius: (d - $) / 2,
84
86
  mode: "fade",
85
- duration: s / o,
86
- delay: f + s / o * e,
87
+ duration: h / n,
88
+ delay: g + h / n * e,
87
89
  playRainbowColors: l
88
90
  },
89
91
  e
90
92
  );
91
93
  }),
92
- h === "stepper" && Array.from({ length: o + 1 }, (n, e) => {
93
- const t = A / o;
94
+ s === "stepper" && Array.from({ length: n + 1 }, (o, e) => {
95
+ const t = A / n;
94
96
  return /* @__PURE__ */ c(E, { children: [
95
97
  /* @__PURE__ */ r(C, { $angle: t * e }, e + "linemarking"),
96
- /* @__PURE__ */ r(D, { $angle: t * e, children: /* @__PURE__ */ r(N, { $angle: t * e, children: /* @__PURE__ */ r(
97
- g,
98
+ /* @__PURE__ */ r(N, { $angle: t * e, children: /* @__PURE__ */ r(S, { $angle: t * e, children: /* @__PURE__ */ r(
99
+ f,
98
100
  {
99
101
  $renderAs: "ac4-black",
100
102
  $isTargetAchieved: e === i && l,
@@ -104,32 +106,32 @@ const nr = G(
104
106
  ) }) }, e)
105
107
  ] });
106
108
  }),
107
- h === "linear" && /* @__PURE__ */ c(E, { children: [
109
+ s === "linear" && /* @__PURE__ */ c(E, { children: [
108
110
  /* @__PURE__ */ r(
109
111
  _,
110
112
  {
111
- targetAngle: m * A / o,
113
+ targetAngle: m * A / n,
112
114
  strokeWidth: 12,
113
115
  color: "GREEN_4",
114
116
  radius: (d - $) / 2,
115
- duration: s,
116
- delay: f,
117
+ duration: h,
118
+ delay: g,
117
119
  playRainbowColors: l
118
120
  }
119
121
  ),
120
122
  /* @__PURE__ */ c(E, { children: [
121
- i && /* @__PURE__ */ r(C, { $angle: i * A / o }),
122
- Array.from(/* @__PURE__ */ new Set([0, i, o])).map((n, e) => /* @__PURE__ */ r(
123
- D,
123
+ i && /* @__PURE__ */ r(C, { $angle: i * A / n }),
124
+ Array.from(/* @__PURE__ */ new Set([0, i, n])).map((o, e) => /* @__PURE__ */ r(
125
+ N,
124
126
  {
125
- $angle: n * A / o,
126
- children: /* @__PURE__ */ r(N, { $angle: n * A / o, children: /* @__PURE__ */ r(
127
- g,
127
+ $angle: o * A / n,
128
+ children: /* @__PURE__ */ r(S, { $angle: o * A / n, children: /* @__PURE__ */ r(
129
+ f,
128
130
  {
129
131
  $renderAs: "ac4-black",
130
- $color: i && n === i ? "GREEN_4" : "WHITE_T_60",
131
- $isTargetAchieved: m >= n && l && n === i,
132
- children: n
132
+ $color: i && o === i ? "GREEN_4" : "WHITE_T_60",
133
+ $isTargetAchieved: m >= o && l && o === i,
134
+ children: o
133
135
  }
134
136
  ) })
135
137
  },
@@ -137,18 +139,18 @@ const nr = G(
137
139
  ))
138
140
  ] })
139
141
  ] }),
140
- l && /* @__PURE__ */ r(S, { top: d, children: /* @__PURE__ */ r(y, { src: M.TARGET_ACHIEVED_TEXT }) }),
141
- !l && /* @__PURE__ */ c(S, { top: d, children: [
142
- /* @__PURE__ */ r(p, { height: 25 }),
142
+ l && /* @__PURE__ */ r(b, { top: d, children: /* @__PURE__ */ r(y, { src: W.TARGET_ACHIEVED_TEXT }) }),
143
+ !l && /* @__PURE__ */ c(b, { top: d, children: [
144
+ /* @__PURE__ */ r(R, { height: 25 }),
143
145
  /* @__PURE__ */ c(a, { $flexDirection: "column", $alignItems: "center", children: [
144
- /* @__PURE__ */ r(j, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: k }),
145
- /* @__PURE__ */ r(Y, { $renderAs: "ab1", $color: "WHITE", children: H })
146
+ /* @__PURE__ */ r(j, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: H }),
147
+ /* @__PURE__ */ r(Y, { $renderAs: "ab1", $color: "WHITE", children: F })
146
148
  ] })
147
149
  ] })
148
150
  ] }) : null;
149
151
  }
150
152
  );
151
153
  export {
152
- nr as DigitalMeter
154
+ or as DigitalMeter
153
155
  };
154
156
  //# sourceMappingURL=digital-meter.js.map
package/dist/features/post-game-stats/digital-meter/digital-meter.js.map CHANGED
@@ -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={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 { 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 console.log('DigitalMeter mounted', value);\n return () => {\n console.log('DigitalMeter unmounted');\n };\n }, []);\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={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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cuemath/leap",
3
- "version": "2.8.36-tables-hg6",
3
+ "version": "2.8.36-tables-hg7",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"