@cuemath/leap 2.8.37 → 2.8.38-hg1

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

@@ -0,0 +1 @@
+{"version":3,"file":"digital-meter.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter.tsx"],"sourcesContent":["import type { IDigitalMeterProps } from './digital-meter-types';\nimport type { FC } from 'react';\n\nimport { 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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"}

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

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

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

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

package/dist/features/post-game-stats/enums/post-game-stats-enum.js

@@ -1,4 +1,4 @@
-var c = /* @__PURE__ */ ((r) => (r.STREAK = "streak", r.ACCURACY = "accuracy", r.CLOCK = "clock", r.POINT = "point", r))(c || {});
+var c = /* @__PURE__ */ ((r) => (r.STREAK = "streak", r.ACCURACY = "accuracy", r.CLOCK = "clock", r.POINT = "point", r.DIGITAL_METER = "digital-meter", r))(c || {});
 export {
   c as EPostGameStat
 };

package/dist/features/post-game-stats/enums/post-game-stats-enum.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-game-stats-enum.js","sources":["../../../../src/features/post-game-stats/enums/post-game-stats-enum.ts"],"sourcesContent":["export enum EPostGameStat {\n  STREAK = 'streak',\n  ACCURACY = 'accuracy',\n  CLOCK = 'clock',\n  POINT = 'point',\n}\n"],"names":["EPostGameStat"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"post-game-stats-enum.js","sources":["../../../../src/features/post-game-stats/enums/post-game-stats-enum.ts"],"sourcesContent":["export enum EPostGameStat {\n  STREAK = 'streak',\n  ACCURACY = 'accuracy',\n  CLOCK = 'clock',\n  POINT = 'point',\n  DIGITAL_METER = 'digital-meter',\n}\n"],"names":["EPostGameStat"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,gBAAgB,iBALNA,IAAAA,KAAA,CAAA,CAAA;"}

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,16 @@
 import { jsx as N } from "react/jsx-runtime";
 import { memo as P, useEffect as T } from "react";
 import { LOTTIE as o } from "../../../assets/lottie/lottie.js";
-import { GAME_LAUNCHER_SIZE as a } from "../../circle-games/game-launcher/comps/card-container/constants.js";
-import { GAME_LAUNCHER_ASSET_PADDING as O, GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH as c } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
+import { GAME_LAUNCHER_SIZE as O } from "../../circle-games/game-launcher/comps/card-container/constants.js";
+import { GAME_LAUNCHER_ASSET_PADDING as a, GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH as c } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
 import { useCircleSounds as f } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
 import { CircleSoundKey as E } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
 import A from "../../ui/lottie-animation/lottie-animation.js";
 const _ = {
   point1: o.POINT1,
+  point2: o.POINT2,
+  point3: o.POINT3,
+  point4: o.POINT4,
   point5: o.POINT5,
   point10: o.POINT10,
   point15: o.POINT15,
@@ -20,22 +23,24 @@ const _ = {
   point50: o.POINT50,
   point60: o.POINT60,
   point100: o.POINT100
-}, r = a + O - c, l = {
+}, e = O + a - c, l = {
   loop: !1,
   autoplay: !0,
   renderer: "canvas"
-}, h = P((p) => {
-  const { point: m = 0, onReveal: n, onComplete: i, show: e } = p, { play: s } = f(), t = _[`point${m}`], I = {
+}, G = P((p) => {
+  const { point: m = 0, onReveal: n, onComplete: i, show: r } = p, { play: s } = f(), t = _[`point${m}`], I = {
     name: "complete",
     callback: i
   };
   return T(() => {
-    t || i(), e && t && (n == null || n());
-  }, [t, i, n, e]), e && t ? /* @__PURE__ */ N(
+    if (!t)
+      throw i(), new Error(`Animation path not found for ${t}`);
+    r && t && (n == null || n());
+  }, [t, i, n, r]), r && t ? /* @__PURE__ */ N(
     A,
     {
-      width: r,
-      height: r,
+      width: e,
+      height: e,
       src: t,
       settings: l,
       eventListener: I,
@@ -44,6 +49,6 @@ const _ = {
   ) : null;
 });
 export {
-  h as Points
+  G as Points
 };
 //# sourceMappingURL=points.js.map

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

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

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

@@ -1,70 +1,92 @@
-import { jsxs as S, jsx as n } from "react/jsx-runtime";
-import { memo as C, forwardRef as T, useState as d, useCallback as h, useImperativeHandle as y } from "react";
-import { Accuracy as A } from "./accuracy/accuracy.js";
-import { Clock as R } from "./clock/clock.js";
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import { memo as c, forwardRef as v, useState as d, useMemo as i, useCallback as a, useImperativeHandle as g } from "react";
+import { Accuracy as C } from "./accuracy/accuracy.js";
+import { Clock as A } from "./clock/clock.js";
+import { DigitalMeter as I } from "./digital-meter/digital-meter.js";
 import { EPostGameStat as p } from "./enums/post-game-stats-enum.js";
-import { Points as k } from "./points/points.js";
-import { StatsWrapper as w, BlackBg as I } from "./post-game-stats-styled.js";
-import { Streak as P } from "./streak/streak.js";
-const b = C(
-  T(({ stats: e, show: f, onComplete: l }, a) => {
-    var i, u;
-    const [r, x] = d(0), t = h(() => {
-      var o, c;
-      if ((c = (o = e[r]) == null ? void 0 : o.onComplete) == null || c.call(o), r === e.length - 1) {
-        l == null || l();
+import { Points as P } from "./points/points.js";
+import { StatsWrapper as R, BlackBg as S } from "./post-game-stats-styled.js";
+import { Streak as k } from "./streak/streak.js";
+const K = c(
+  v(({ stats: o, show: s, onComplete: m }, f) => {
+    const [t, h] = d(0), e = i(() => o[t], [t, o]), u = a(() => {
+      var r;
+      if ((r = e == null ? void 0 : e.onComplete) == null || r.call(e), t === o.length - 1) {
+        m == null || m();
         return;
       }
-      x((v) => v + 1);
-    }, [r, l, e]), m = h(() => {
-      var o;
-      (o = e[r]) != null && o.stopAtEnd || t();
-    }, [e, r, t]);
-    return y(a, () => ({
-      moveToNextAndPlay: t
-    })), !f || e.length === 0 || r >= e.length ? null : /* @__PURE__ */ S(w, { children: [
-      /* @__PURE__ */ n(I, {}),
-      /* @__PURE__ */ n(
-        k,
-        {
-          point: e[r].value,
-          show: e[r].type === p.POINT,
-          onComplete: m,
-          onReveal: (i = e[r]) == null ? void 0 : i.onReveal
-        }
-      ),
-      /* @__PURE__ */ n(
-        P,
-        {
-          currStreak: e[r].value,
-          show: e[r].type === p.STREAK,
-          onComplete: m,
-          helperText: e[r].helperText,
-          onReveal: (u = e[r]) == null ? void 0 : u.onReveal
-        }
-      ),
-      /* @__PURE__ */ n(
-        A,
-        {
-          accuracy: e[r].value,
-          show: e[r].type === p.ACCURACY,
-          onComplete: m,
-          helperText: e[r].helperText
-        }
-      ),
-      /* @__PURE__ */ n(
-        R,
-        {
-          timeInMs: e[r].value,
-          show: e[r].type === p.CLOCK,
-          onComplete: m,
-          helperText: e[r].helperText
-        }
-      )
+      h((T) => T + 1);
+    }, [t, m, o.length, e]), l = a(() => {
+      e != null && e.stopAtEnd || u();
+    }, [e, u]);
+    g(f, () => ({
+      moveToNextAndPlay: u
+    }));
+    const x = i(() => {
+      if (e) {
+        const r = `${e.type}-${t}`;
+        return e.type === p.POINT ? /* @__PURE__ */ n(
+          P,
+          {
+            point: e.value,
+            show: e.type === p.POINT,
+            onComplete: l,
+            onReveal: e.onReveal
+          },
+          r
+        ) : e.type === p.DIGITAL_METER ? /* @__PURE__ */ n(
+          I,
+          {
+            value: e.value,
+            maxValue: e.maxValue ?? 1,
+            targetValue: e.targetValue,
+            displayText: e.displayText ?? "",
+            progressType: e.progressType ?? "linear",
+            helperTextPrimary: e.helperTextPrimary ?? "",
+            helperTextSecondary: e.helperTextSecondary ?? "",
+            show: !0,
+            onComplete: l
+          },
+          r
+        ) : e.type === p.STREAK ? /* @__PURE__ */ n(
+          k,
+          {
+            currStreak: e.value,
+            show: !0,
+            onComplete: l,
+            helperText: e.helperText,
+            onReveal: e.onReveal
+          },
+          r
+        ) : e.type === p.ACCURACY ? /* @__PURE__ */ n(
+          C,
+          {
+            accuracy: e.value,
+            show: !0,
+            onComplete: l,
+            helperText: e.helperText
+          },
+          r
+        ) : e.type === p.CLOCK ? /* @__PURE__ */ n(
+          A,
+          {
+            timeInMs: e.value,
+            show: !0,
+            onComplete: l,
+            helperText: e.helperText
+          },
+          r
+        ) : null;
+      }
+      return null;
+    }, [e, l, t]);
+    return !s || o.length === 0 || t >= o.length ? null : /* @__PURE__ */ y(R, { children: [
+      /* @__PURE__ */ n(S, {}),
+      x
     ] });
   })
 );
 export {
-  b as PostGameStats
+  K as PostGameStats
 };
 //# sourceMappingURL=post-game-stats.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"post-game-stats.js","sources":["../../../src/features/post-game-stats/post-game-stats.tsx"],"sourcesContent":["import type { IPostGameStatsProps, IPostGameStatsRef } from './post-game-stats-types';\n\nimport { useState, memo, useCallback, forwardRef, useImperativeHandle } from 'react';\n\nimport { Accuracy } from './accuracy/accuracy';\nimport { Clock } from './clock/clock';\nimport { EPostGameStat } from './enums/post-game-stats-enum';\nimport { Points } from './points/points';\nimport * as Styled from './post-game-stats-styled';\nimport { Streak } from './streak/streak';\n\nexport const PostGameStats = memo(\n  forwardRef<IPostGameStatsRef, IPostGameStatsProps>(({ stats, show, onComplete }, ref) => {\n    const [currStatIndex, setCurrentStatIndex] = useState(0);\n\n    const moveToNextAndPlay = useCallback(() => {\n      stats[currStatIndex]?.onComplete?.();\n\n      if (currStatIndex === stats.length - 1) {\n        onComplete?.();\n\n        return;\n      }\n      setCurrentStatIndex(prev => prev + 1);\n    }, [currStatIndex, onComplete, stats]);\n\n    const onStatAnimationComplete = useCallback(() => {\n      if (stats[currStatIndex]?.stopAtEnd) {\n        return;\n      }\n      moveToNextAndPlay(); // Autoplay since stopAtEnd is false\n    }, [stats, currStatIndex, moveToNextAndPlay]);\n\n    useImperativeHandle(ref, () => ({\n      moveToNextAndPlay,\n    }));\n\n    if (!show || stats.length === 0 || currStatIndex >= stats.length) {\n      return null;\n    }\n\n    return (\n      <Styled.StatsWrapper>\n        <Styled.BlackBg />\n        <Points\n          point={stats[currStatIndex]!.value}\n          show={stats[currStatIndex]!.type === EPostGameStat.POINT}\n          onComplete={onStatAnimationComplete}\n          onReveal={stats[currStatIndex]?.onReveal}\n        />\n        <Streak\n          currStreak={stats[currStatIndex]!.value}\n          show={stats[currStatIndex]!.type === EPostGameStat.STREAK}\n          onComplete={onStatAnimationComplete}\n          helperText={stats[currStatIndex]!.helperText}\n          onReveal={stats[currStatIndex]?.onReveal}\n        />\n        <Accuracy\n          accuracy={stats[currStatIndex]!.value}\n          show={stats[currStatIndex]!.type === EPostGameStat.ACCURACY}\n          onComplete={onStatAnimationComplete}\n          helperText={stats[currStatIndex]!.helperText}\n        />\n        <Clock\n          timeInMs={stats[currStatIndex]!.value}\n          show={stats[currStatIndex]!.type === EPostGameStat.CLOCK}\n          onComplete={onStatAnimationComplete}\n          helperText={stats[currStatIndex]!.helperText}\n        />\n      </Styled.StatsWrapper>\n    );\n  }),\n);\n"],"names":["PostGameStats","memo","forwardRef","stats","show","onComplete","ref","currStatIndex","setCurrentStatIndex","useState","moveToNextAndPlay","useCallback","_b","_a","prev","onStatAnimationComplete","useImperativeHandle","jsxs","Styled.StatsWrapper","jsx","Styled.BlackBg","Points","EPostGameStat","Streak","Accuracy","Clock"],"mappings":";;;;;;;;AAWO,MAAMA,IAAgBC;AAAA,EAC3BC,EAAmD,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,YAAAC,EAAA,GAAcC,MAAQ;;AACvF,UAAM,CAACC,GAAeC,CAAmB,IAAIC,EAAS,CAAC,GAEjDC,IAAoBC,EAAY,MAAM;;AAGtC,WAFEC,KAAAC,IAAAV,EAAAI,CAAa,MAAb,gBAAAM,EAAgB,eAAhB,QAAAD,EAAA,KAAAC,IAEFN,MAAkBJ,EAAM,SAAS,GAAG;AACzB,QAAAE,KAAA,QAAAA;AAEb;AAAA,MACF;AACoB,MAAAG,EAAA,CAAAM,MAAQA,IAAO,CAAC;AAAA,IACnC,GAAA,CAACP,GAAeF,GAAYF,CAAK,CAAC,GAE/BY,IAA0BJ,EAAY,MAAM;;AAC5C,OAAAE,IAAAV,EAAMI,CAAa,MAAnB,QAAAM,EAAsB,aAGRH;IACjB,GAAA,CAACP,GAAOI,GAAeG,CAAiB,CAAC;AAM5C,WAJAM,EAAoBV,GAAK,OAAO;AAAA,MAC9B,mBAAAI;AAAA,IACA,EAAA,GAEE,CAACN,KAAQD,EAAM,WAAW,KAAKI,KAAiBJ,EAAM,SACjD,OAIP,gBAAAc,EAACC,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAe;AAAA,MAChB,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOlB,EAAMI,CAAa,EAAG;AAAA,UAC7B,MAAMJ,EAAMI,CAAa,EAAG,SAASe,EAAc;AAAA,UACnD,YAAYP;AAAA,UACZ,WAAUF,IAAAV,EAAMI,CAAa,MAAnB,gBAAAM,EAAsB;AAAA,QAAA;AAAA,MAClC;AAAA,MACA,gBAAAM;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,YAAYpB,EAAMI,CAAa,EAAG;AAAA,UAClC,MAAMJ,EAAMI,CAAa,EAAG,SAASe,EAAc;AAAA,UACnD,YAAYP;AAAA,UACZ,YAAYZ,EAAMI,CAAa,EAAG;AAAA,UAClC,WAAUK,IAAAT,EAAMI,CAAa,MAAnB,gBAAAK,EAAsB;AAAA,QAAA;AAAA,MAClC;AAAA,MACA,gBAAAO;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,UAAUrB,EAAMI,CAAa,EAAG;AAAA,UAChC,MAAMJ,EAAMI,CAAa,EAAG,SAASe,EAAc;AAAA,UACnD,YAAYP;AAAA,UACZ,YAAYZ,EAAMI,CAAa,EAAG;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,gBAAAY;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,UAAUtB,EAAMI,CAAa,EAAG;AAAA,UAChC,MAAMJ,EAAMI,CAAa,EAAG,SAASe,EAAc;AAAA,UACnD,YAAYP;AAAA,UACZ,YAAYZ,EAAMI,CAAa,EAAG;AAAA,QAAA;AAAA,MACpC;AAAA,IACF,EAAA,CAAA;AAAA,EAAA,CAEH;AACH;"}
+{"version":3,"file":"post-game-stats.js","sources":["../../../src/features/post-game-stats/post-game-stats.tsx"],"sourcesContent":["import type { IPostGameStatsProps, IPostGameStatsRef } from './post-game-stats-types';\n\nimport { useState, memo, useCallback, forwardRef, useImperativeHandle, useMemo } from 'react';\n\nimport { Accuracy } from './accuracy/accuracy';\nimport { Clock } from './clock/clock';\nimport { DigitalMeter } from './digital-meter/digital-meter';\nimport { EPostGameStat } from './enums/post-game-stats-enum';\nimport { Points } from './points/points';\nimport * as Styled from './post-game-stats-styled';\nimport { Streak } from './streak/streak';\n\nexport const PostGameStats = memo(\n  forwardRef<IPostGameStatsRef, IPostGameStatsProps>(({ stats, show, onComplete }, ref) => {\n    const [currStatIndex, setCurrentStatIndex] = useState(0);\n    const currStatData = useMemo(() => stats[currStatIndex], [currStatIndex, stats]);\n\n    const moveToNextAndPlay = useCallback(() => {\n      currStatData?.onComplete?.();\n\n      if (currStatIndex === stats.length - 1) {\n        onComplete?.();\n\n        return;\n      }\n      setCurrentStatIndex(prev => prev + 1);\n    }, [currStatIndex, onComplete, stats.length, currStatData]);\n\n    const onStatAnimationComplete = useCallback(() => {\n      if (currStatData?.stopAtEnd) {\n        return;\n      }\n      moveToNextAndPlay(); // Autoplay since stopAtEnd is false\n    }, [currStatData, moveToNextAndPlay]);\n\n    useImperativeHandle(ref, () => ({\n      moveToNextAndPlay,\n    }));\n\n    const currentStat = useMemo(() => {\n      if (currStatData) {\n        const key = `${currStatData.type}-${currStatIndex}`;\n\n        if (currStatData.type === EPostGameStat.POINT) {\n          return (\n            <Points\n              key={key}\n              point={currStatData.value}\n              show={currStatData.type === EPostGameStat.POINT}\n              onComplete={onStatAnimationComplete}\n              onReveal={currStatData.onReveal}\n            />\n          );\n        }\n\n        if (currStatData.type === EPostGameStat.DIGITAL_METER) {\n          return (\n            <DigitalMeter\n              key={key}\n              value={currStatData.value}\n              maxValue={currStatData.maxValue ?? 1}\n              targetValue={currStatData.targetValue}\n              displayText={currStatData.displayText ?? ''}\n              progressType={currStatData.progressType ?? 'linear'}\n              helperTextPrimary={currStatData.helperTextPrimary ?? ''}\n              helperTextSecondary={currStatData.helperTextSecondary ?? ''}\n              show={true}\n              onComplete={onStatAnimationComplete}\n            />\n          );\n        }\n\n        if (currStatData.type === EPostGameStat.STREAK) {\n          return (\n            <Streak\n              key={key}\n              currStreak={currStatData.value}\n              show={true}\n              onComplete={onStatAnimationComplete}\n              helperText={currStatData.helperText}\n              onReveal={currStatData.onReveal}\n            />\n          );\n        }\n\n        if (currStatData.type === EPostGameStat.ACCURACY) {\n          return (\n            <Accuracy\n              key={key}\n              accuracy={currStatData.value}\n              show={true}\n              onComplete={onStatAnimationComplete}\n              helperText={currStatData.helperText}\n            />\n          );\n        }\n\n        if (currStatData.type === EPostGameStat.CLOCK) {\n          return (\n            <Clock\n              key={key}\n              timeInMs={currStatData.value}\n              show={true}\n              onComplete={onStatAnimationComplete}\n              helperText={currStatData.helperText}\n            />\n          );\n        }\n\n        return null;\n      }\n\n      return null;\n    }, [currStatData, onStatAnimationComplete, currStatIndex]);\n\n    if (!show || stats.length === 0 || currStatIndex >= stats.length) {\n      return null;\n    }\n\n    return (\n      <Styled.StatsWrapper>\n        <Styled.BlackBg />\n\n        {currentStat}\n      </Styled.StatsWrapper>\n    );\n  }),\n);\n"],"names":["PostGameStats","memo","forwardRef","stats","show","onComplete","ref","currStatIndex","setCurrentStatIndex","useState","currStatData","useMemo","moveToNextAndPlay","useCallback","_a","prev","onStatAnimationComplete","useImperativeHandle","currentStat","key","EPostGameStat","jsx","Points","DigitalMeter","Streak","Accuracy","Clock","jsxs","Styled.StatsWrapper","Styled.BlackBg"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAgBC;AAAA,EAC3BC,EAAmD,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,YAAAC,EAAA,GAAcC,MAAQ;AACvF,UAAM,CAACC,GAAeC,CAAmB,IAAIC,EAAS,CAAC,GACjDC,IAAeC,EAAQ,MAAMR,EAAMI,CAAa,GAAG,CAACA,GAAeJ,CAAK,CAAC,GAEzES,IAAoBC,EAAY,MAAM;;AAGtC,WAFJC,IAAAJ,KAAA,gBAAAA,EAAc,eAAd,QAAAI,EAAA,KAAAJ,IAEIH,MAAkBJ,EAAM,SAAS,GAAG;AACzB,QAAAE,KAAA,QAAAA;AAEb;AAAA,MACF;AACoB,MAAAG,EAAA,CAAAO,MAAQA,IAAO,CAAC;AAAA,IAAA,GACnC,CAACR,GAAeF,GAAYF,EAAM,QAAQO,CAAY,CAAC,GAEpDM,IAA0BH,EAAY,MAAM;AAChD,MAAIH,KAAA,QAAAA,EAAc,aAGAE;IAAA,GACjB,CAACF,GAAcE,CAAiB,CAAC;AAEpC,IAAAK,EAAoBX,GAAK,OAAO;AAAA,MAC9B,mBAAAM;AAAA,IACA,EAAA;AAEI,UAAAM,IAAcP,EAAQ,MAAM;AAChC,UAAID,GAAc;AAChB,cAAMS,IAAM,GAAGT,EAAa,IAAI,IAAIH,CAAa;AAE7C,eAAAG,EAAa,SAASU,EAAc,QAEpC,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YAEC,OAAOZ,EAAa;AAAA,YACpB,MAAMA,EAAa,SAASU,EAAc;AAAA,YAC1C,YAAYJ;AAAA,YACZ,UAAUN,EAAa;AAAA,UAAA;AAAA,UAJlBS;AAAA,QAAA,IASPT,EAAa,SAASU,EAAc,gBAEpC,gBAAAC;AAAA,UAACE;AAAA,UAAA;AAAA,YAEC,OAAOb,EAAa;AAAA,YACpB,UAAUA,EAAa,YAAY;AAAA,YACnC,aAAaA,EAAa;AAAA,YAC1B,aAAaA,EAAa,eAAe;AAAA,YACzC,cAAcA,EAAa,gBAAgB;AAAA,YAC3C,mBAAmBA,EAAa,qBAAqB;AAAA,YACrD,qBAAqBA,EAAa,uBAAuB;AAAA,YACzD,MAAM;AAAA,YACN,YAAYM;AAAA,UAAA;AAAA,UATPG;AAAA,QAAA,IAcPT,EAAa,SAASU,EAAc,SAEpC,gBAAAC;AAAA,UAACG;AAAA,UAAA;AAAA,YAEC,YAAYd,EAAa;AAAA,YACzB,MAAM;AAAA,YACN,YAAYM;AAAA,YACZ,YAAYN,EAAa;AAAA,YACzB,UAAUA,EAAa;AAAA,UAAA;AAAA,UALlBS;AAAA,QAAA,IAUPT,EAAa,SAASU,EAAc,WAEpC,gBAAAC;AAAA,UAACI;AAAA,UAAA;AAAA,YAEC,UAAUf,EAAa;AAAA,YACvB,MAAM;AAAA,YACN,YAAYM;AAAA,YACZ,YAAYN,EAAa;AAAA,UAAA;AAAA,UAJpBS;AAAA,QAAA,IASPT,EAAa,SAASU,EAAc,QAEpC,gBAAAC;AAAA,UAACK;AAAA,UAAA;AAAA,YAEC,UAAUhB,EAAa;AAAA,YACvB,MAAM;AAAA,YACN,YAAYM;AAAA,YACZ,YAAYN,EAAa;AAAA,UAAA;AAAA,UAJpBS;AAAA,QAAA,IASJ;AAAA,MACT;AAEO,aAAA;AAAA,IACN,GAAA,CAACT,GAAcM,GAAyBT,CAAa,CAAC;AAEzD,WAAI,CAACH,KAAQD,EAAM,WAAW,KAAKI,KAAiBJ,EAAM,SACjD,OAIP,gBAAAwB,EAACC,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAP,EAAAQ,GAAA,EAAe;AAAA,MAEfX;AAAA,IACH,EAAA,CAAA;AAAA,EAAA,CAEH;AACH;"}

package/dist/index.d.ts

@@ -253,6 +253,8 @@ export declare const DashArrowIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const DesmosCalculator: FC<IDesmosCalculatorProps>;
 
+export declare const DigitalMeter: FC<IDigitalMeterProps>;
+
 export declare const DownIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const DraftIcon: React.FC<React.SVGProps<SVGSVGElement>>;
@@ -296,7 +298,8 @@ export declare enum EPostGameStat {
     STREAK = "streak",
     ACCURACY = "accuracy",
     CLOCK = "clock",
-    POINT = "point"
+    POINT = "point",
+    DIGITAL_METER = "digital-meter"
 }
 
 export declare const EraserIcon: React.FC<React.SVGProps<SVGSVGElement>>;
@@ -1004,6 +1007,18 @@ declare interface IDesmosCalculatorProps {
     };
 }
 
+declare interface IDigitalMeterProps {
+    show: boolean;
+    value: number;
+    maxValue: number;
+    targetValue?: number;
+    displayText: string;
+    progressType: 'stepper' | 'linear';
+    helperTextPrimary: string;
+    helperTextSecondary: string;
+    onComplete: () => void;
+}
+
 declare interface IEditMilestoneModalProps extends IMilestoneEditProps {
     studentId: string;
     isUsingAlternateCurriculum: boolean;
@@ -1065,7 +1080,7 @@ declare interface IGame extends IBaseProject {
 declare interface IGameLauncherProps {
     onSegmentClick: (projectDetail: Game | Puzzle | Lesson | ITableDetails, projectType: ProjectType) => void;
     isLoading?: boolean;
-    data: IProjects | null;
+    data: IProjectData | null;
     defaultIndex?: number;
     journeyId?: TJourneyId;
     onJourneyComplete: (journeyId: TJourneyId) => void;
@@ -2043,6 +2058,9 @@ export declare interface IPlayerStats {
     errorCode: IStatsToAwardErrorCode;
     outcome: ProjectOutcome;
     value: string;
+    starEligibleTime?: number;
+    starEligibleAccuracy?: number;
+    starRewarded?: boolean;
 }
 
 declare interface IPointerData extends Record<string, unknown> {
@@ -2079,6 +2097,12 @@ export declare interface IPostGameStat {
     onComplete?: () => void;
     helperText?: ReactNode;
     stopAtEnd?: boolean;
+    targetValue?: number;
+    maxValue?: number;
+    helperTextPrimary?: string;
+    helperTextSecondary?: string;
+    progressType?: 'linear' | 'stepper';
+    displayText?: string;
 }
 
 export declare interface IPostGameStatsProps {
@@ -2133,6 +2157,10 @@ export declare interface IProject<T> {
     initialProgressValue?: number;
 }
 
+export declare interface IProjectData extends IProjects {
+    tables?: ITablesData;
+}
+
 export declare interface IProjects {
     games: IProject<Game>;
     puzzles: IProject<Puzzle>;
@@ -2575,6 +2603,7 @@ export declare interface ITableDetails {
     mode: TTableMode;
     tableNumber?: number;
     infiniteModeHighScore?: number;
+    isStarRewarded?: boolean;
 }
 
 export declare interface ITableInfo {
@@ -2587,7 +2616,7 @@ declare interface ITableInfo_2 {
     stars: ('advance' | 'random' | 'sequence')[];
 }
 
-declare interface ITables {
+export declare interface ITables {
     type: ProjectType;
     label: string;
     data: ITable;
@@ -2598,6 +2627,13 @@ declare interface ITables_2 {
     infinite_mode_high_score: number;
 }
 
+export declare interface ITablesData extends ITables {
+    openModesOfTable?: {
+        tableNumber: number;
+        rewardStars?: TTableMode[];
+    };
+}
+
 export declare interface ITableWebGameProps extends IBaseWebGameProps {
     tableNumber: number;
     infiniteModeHighScore?: number;
@@ -3342,10 +3378,13 @@ export declare const LOTTIE: {
     POINT1: string;
     POINT20: string;
     POINT25: string;
+    POINT2: string;
     POINT30: string;
     POINT35: string;
+    POINT3: string;
     POINT40: string;
     POINT45: string;
+    POINT4: string;
     POINT50: string;
     POINT5: string;
     POINT60: string;
@@ -3360,6 +3399,9 @@ export declare const LOTTIE: {
     SPLASH_SCREEN: string;
     STAY_CONNECTED_LOTTIE: string;
     TABLE_MODE_REVEAL: string;
+    TABLE_MODE_STAR: string;
+    TABLE_SEGMENT_STAR: string;
+    TARGET_ACHIEVED_TEXT: string;
     TEACHER_VALIDATION: string;
     TOTAL_STREAK: string;
     TOTAL_TIME: string;