@cuemath/leap 2.8.25-rj-5 → 2.8.26

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

@@ -1,71 +1,75 @@
-import { jsxs as N, jsx as u } from "react/jsx-runtime";
-import k from "lottie-web";
-import { memo as v, useState as K, useRef as o, useCallback as f, useEffect as M } from "react";
-import { useCircleSounds as g } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
-import { CircleSoundKey as I } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
-import { delay as R } from "../../utils/utils.js";
-import { Clock as x, ClockLottie as U, ClockTimeSpentLottie as $, TextWrapper as h } from "./clock-styled.js";
-import { getClockTimeSpentFramesToPlay as X } from "./clock-util.js";
-import { CLOCK_TIME_SPENT_FPS as Y, CLOCK as D, CLOCK_INFRAME_LOTTIE_TO_PLAY as j, TIME_LOTTIE_TO_PLAY_IN as w, TEXT_DISAPPEAR_DURATION as H, TEXT_APPEAR_DURATION as W, TIME_SHOWN_HOLD_TIME as b, TEXT_DISAPPEAR_DELAY as q } from "./constants.js";
-const z = () => import("../../../assets/lotties/circle/total-time-lottie.json.js"), B = () => import("../../../assets/lotties/circle/total-time-spent-lottie.json.js"), ot = v(({ show: s, onComplete: i, timeInMs: T, helperText: p }) => {
-  const { play: c } = g(), [d, F] = K(!1), l = o(!1), m = o(0), L = o(null), S = o(null), a = o(), n = o(), E = f(() => {
+import { jsxs as K, jsx as u } from "react/jsx-runtime";
+import I from "lottie-web";
+import { memo as g, useState as h, useRef as o, useCallback as T, useEffect as j } from "react";
+import { LOTTIE as k } from "../../../assets/lottie/lottie.js";
+import { useCircleSounds as x } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
+import { CircleSoundKey as R } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
+import { delay as D } from "../../utils/utils.js";
+import { Clock as U, ClockLottie as $, ClockTimeSpentLottie as w, TextWrapper as X } from "./clock-styled.js";
+import { getClockTimeSpentFramesToPlay as Y } from "./clock-util.js";
+import { CLOCK_TIME_SPENT_FPS as H, CLOCK as N, CLOCK_INFRAME_LOTTIE_TO_PLAY as W, TIME_LOTTIE_TO_PLAY_IN as b, TEXT_DISAPPEAR_DURATION as q, TEXT_APPEAR_DURATION as z, TIME_SHOWN_HOLD_TIME as B, TEXT_DISAPPEAR_DELAY as G } from "./constants.js";
+const it = g(({ show: s, onComplete: i, timeInMs: f, helperText: p }) => {
+  const { play: c } = x(), [L, F] = h(!1), m = o(!1), l = o(0), d = o(null), E = o(null), a = o(), n = o(), _ = T(() => {
     var t, e;
-    const r = X(T);
-    r && (m.current = r, (t = n.current) == null || t.setSpeed(r / Y), (e = n.current) == null || e.playSegments([0, r], !0), l.current = !0);
-  }, [T]), _ = f(async () => {
+    const r = Y(f);
+    r && (l.current = r, (t = n.current) == null || t.setSpeed(r / H), (e = n.current) == null || e.playSegments([0, r], !0), m.current = !0);
+  }, [f]), S = T(async () => {
     var r, t;
-    await R(b), (r = n.current) == null || r.playSegments([m.current, 0], !0), await R(q), F(!0), l.current && ((t = n.current) == null || t.addEventListener("complete", () => {
+    await D(B), (r = n.current) == null || r.playSegments([l.current, 0], !0), await D(G), F(!0), m.current && ((t = n.current) == null || t.addEventListener("complete", () => {
       var e;
-      c(I.CLOCK_OUT), (e = a.current) == null || e.playSegments(D.OUT_FRAMES, !0);
+      c(R.CLOCK_OUT), (e = a.current) == null || e.playSegments(N.OUT_FRAMES, !0);
     }));
-  }, [m, c]), A = f(() => {
+  }, [l, c]), A = T(() => {
     i == null || i();
   }, [i]);
-  return M(() => {
+  return j(() => {
     if (s)
       return (async () => {
-        var C, y, O;
+        var O, C, y;
         const [t, e] = await Promise.all([
-          z(),
-          B()
+          fetch(k.TOTAL_TIME),
+          fetch(k.TOTAL_TIME_SPENT)
+        ]), [M, v] = await Promise.all([
+          t.json(),
+          e.json()
         ]);
-        a.current = k.loadAnimation({
-          container: L.current,
-          animationData: t.default,
+        a.current = I.loadAnimation({
+          container: d.current,
+          animationData: M,
           autoplay: !1,
           loop: !1,
           renderer: "canvas"
-        }), n.current = k.loadAnimation({
-          container: S.current,
-          animationData: e.default,
+        }), n.current = I.loadAnimation({
+          container: E.current,
+          animationData: v,
           autoplay: !1,
           loop: !1,
           renderer: "canvas"
-        }), c(I.CLOCK_IN), (C = a.current) == null || C.playSegments(D.IN_FRAMES, !0), (y = a.current) == null || y.addEventListener("complete", () => {
-          l.current ? A() : E();
-        }), (O = n.current) == null || O.addEventListener("complete", () => {
+        }), c(R.CLOCK_IN), (O = a.current) == null || O.playSegments(N.IN_FRAMES, !0), (C = a.current) == null || C.addEventListener("complete", () => {
+          m.current ? A() : _();
+        }), (y = n.current) == null || y.addEventListener("complete", () => {
           var P;
-          (P = n.current) == null || P.removeEventListener("complete"), _();
+          (P = n.current) == null || P.removeEventListener("complete"), S();
         });
       })(), () => {
         var t, e;
         (t = a.current) == null || t.destroy(), (e = n.current) == null || e.destroy();
       };
-  }, [s, E, A, _, c]), s ? /* @__PURE__ */ N(x, { children: [
-    /* @__PURE__ */ u(U, { ref: L }),
-    /* @__PURE__ */ u($, { ref: S }),
+  }, [s, _, A, S, c]), s ? /* @__PURE__ */ K(U, { children: [
+    /* @__PURE__ */ u($, { ref: d }),
+    /* @__PURE__ */ u(w, { ref: E }),
     p && /* @__PURE__ */ u(
-      h,
+      X,
       {
-        $delay: j + w,
-        $animationType: d ? "fadeout" : "fadein",
-        $duration: d ? H : W,
+        $delay: W + b,
+        $animationType: L ? "fadeout" : "fadein",
+        $duration: L ? q : z,
         children: p
       }
     )
   ] }) : null;
 });
 export {
-  ot as Clock
+  it as Clock
 };
 //# sourceMappingURL=clock.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"clock.js","sources":["../../../../src/features/post-game-stats/clock/clock.tsx"],"sourcesContent":["import type { IClockProps } from './clock-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\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 { delay } from '../../utils/utils';\nimport * as Styled from './clock-styled';\nimport { getClockTimeSpentFramesToPlay } from './clock-util';\nimport {\n  CLOCK,\n  CLOCK_TIME_SPENT_FPS,\n  TIME_SHOWN_HOLD_TIME,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n  CLOCK_INFRAME_LOTTIE_TO_PLAY,\n  TIME_LOTTIE_TO_PLAY_IN,\n} from './constants';\n\nconst totalTimeLottie = () => import('../../../assets/lotties/circle/total-time-lottie.json');\nconst totalTimeSpentLottie = () =>\n  import('../../../assets/lotties/circle/total-time-spent-lottie.json');\n\nexport const Clock: FC<IClockProps> = memo(({ show, onComplete, timeInMs, helperText }) => {\n  const { play } = useCircleSounds();\n  const [fadeOut, setFadeOut] = useState(false);\n  const isClockTimeSpentShown = useRef(false);\n  const framesToPlay = useRef(0);\n\n  const clockLottieContainerRef = useRef<HTMLDivElement>(null);\n  const clockTimeSpentLottieContainerRef = useRef<HTMLDivElement>(null);\n  const clockLottieAnimationRef = useRef<AnimationItem>();\n  const clockTimeSpentLottieAnimationRef = useRef<AnimationItem>();\n\n  const setClockTimeSpentFrames = useCallback(() => {\n    const frames = getClockTimeSpentFramesToPlay(timeInMs);\n\n    if (frames) {\n      framesToPlay.current = frames;\n      // Speed adjustment\n      clockTimeSpentLottieAnimationRef.current?.setSpeed(frames / CLOCK_TIME_SPENT_FPS);\n      clockTimeSpentLottieAnimationRef.current?.playSegments([0, frames], true);\n      isClockTimeSpentShown.current = true;\n    }\n  }, [timeInMs]);\n\n  const onClockTimeSpentExitAnimationFinished = useCallback(async () => {\n    await delay(TIME_SHOWN_HOLD_TIME);\n\n    // Reverse play time spent animation\n    clockTimeSpentLottieAnimationRef.current?.playSegments([framesToPlay.current, 0], true);\n\n    await delay(TEXT_DISAPPEAR_DELAY);\n    setFadeOut(true);\n\n    if (isClockTimeSpentShown.current) {\n      clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n        play(CircleSoundKey.CLOCK_OUT);\n        clockLottieAnimationRef.current?.playSegments(CLOCK.OUT_FRAMES, true);\n      });\n    }\n  }, [framesToPlay, play]);\n\n  const onAnimationEnd = useCallback(() => {\n    onComplete?.();\n  }, [onComplete]);\n\n  // Play entry animation\n  useEffect(() => {\n    if (show) {\n      const loadAnimations = async () => {\n        const [timeLottiePath, timeSpentLottiePath] = await Promise.all([\n          totalTimeLottie(),\n          totalTimeSpentLottie(),\n        ]);\n\n        // Clock Lottie\n        clockLottieAnimationRef.current = Lottie.loadAnimation({\n          container: clockLottieContainerRef.current as Element,\n          animationData: timeLottiePath.default,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        // Clock Time Spent Lottie\n        clockTimeSpentLottieAnimationRef.current = Lottie.loadAnimation({\n          container: clockTimeSpentLottieContainerRef.current as Element,\n          animationData: timeSpentLottiePath.default,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        // Play clock in animation sounds and lottie\n        play(CircleSoundKey.CLOCK_IN);\n        clockLottieAnimationRef.current?.playSegments(CLOCK.IN_FRAMES, true);\n\n        clockLottieAnimationRef.current?.addEventListener('complete', () => {\n          if (!isClockTimeSpentShown.current) {\n            setClockTimeSpentFrames();\n          } else {\n            onAnimationEnd();\n          }\n        });\n\n        // Setup event listener for time spent animation\n        clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n          clockTimeSpentLottieAnimationRef.current?.removeEventListener('complete');\n          onClockTimeSpentExitAnimationFinished();\n        });\n      };\n\n      loadAnimations();\n\n      return () => {\n        clockLottieAnimationRef.current?.destroy();\n        clockTimeSpentLottieAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, setClockTimeSpentFrames, onAnimationEnd, onClockTimeSpentExitAnimationFinished, play]);\n\n  if (show) {\n    return (\n      <Styled.Clock>\n        <Styled.ClockLottie ref={clockLottieContainerRef} />\n        <Styled.ClockTimeSpentLottie ref={clockTimeSpentLottieContainerRef} />\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={CLOCK_INFRAME_LOTTIE_TO_PLAY + TIME_LOTTIE_TO_PLAY_IN}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n      </Styled.Clock>\n    );\n  }\n\n  return null;\n});\n"],"names":["totalTimeLottie","totalTimeSpentLottie","Clock","memo","show","onComplete","timeInMs","helperText","play","useCircleSounds","fadeOut","setFadeOut","useState","isClockTimeSpentShown","useRef","framesToPlay","clockLottieContainerRef","clockTimeSpentLottieContainerRef","clockLottieAnimationRef","clockTimeSpentLottieAnimationRef","setClockTimeSpentFrames","useCallback","frames","getClockTimeSpentFramesToPlay","_a","CLOCK_TIME_SPENT_FPS","_b","onClockTimeSpentExitAnimationFinished","delay","TIME_SHOWN_HOLD_TIME","TEXT_DISAPPEAR_DELAY","CircleSoundKey","CLOCK","onAnimationEnd","useEffect","timeLottiePath","timeSpentLottiePath","Lottie","_c","jsxs","Styled.Clock","jsx","Styled.ClockLottie","Styled.ClockTimeSpentLottie","Styled.TextWrapper","CLOCK_INFRAME_LOTTIE_TO_PLAY","TIME_LOTTIE_TO_PLAY_IN","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION"],"mappings":"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"}
+{"version":3,"file":"clock.js","sources":["../../../../src/features/post-game-stats/clock/clock.tsx"],"sourcesContent":["import type { IClockProps } from './clock-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\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 { delay } from '../../utils/utils';\nimport * as Styled from './clock-styled';\nimport { getClockTimeSpentFramesToPlay } from './clock-util';\nimport {\n  CLOCK,\n  CLOCK_TIME_SPENT_FPS,\n  TIME_SHOWN_HOLD_TIME,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n  CLOCK_INFRAME_LOTTIE_TO_PLAY,\n  TIME_LOTTIE_TO_PLAY_IN,\n} from './constants';\n\nexport const Clock: FC<IClockProps> = memo(({ show, onComplete, timeInMs, helperText }) => {\n  const { play } = useCircleSounds();\n  const [fadeOut, setFadeOut] = useState(false);\n  const isClockTimeSpentShown = useRef(false);\n  const framesToPlay = useRef(0);\n\n  const clockLottieContainerRef = useRef<HTMLDivElement>(null);\n  const clockTimeSpentLottieContainerRef = useRef<HTMLDivElement>(null);\n  const clockLottieAnimationRef = useRef<AnimationItem>();\n  const clockTimeSpentLottieAnimationRef = useRef<AnimationItem>();\n\n  const setClockTimeSpentFrames = useCallback(() => {\n    const frames = getClockTimeSpentFramesToPlay(timeInMs);\n\n    if (frames) {\n      framesToPlay.current = frames;\n      // Speed adjustment\n      clockTimeSpentLottieAnimationRef.current?.setSpeed(frames / CLOCK_TIME_SPENT_FPS);\n      clockTimeSpentLottieAnimationRef.current?.playSegments([0, frames], true);\n      isClockTimeSpentShown.current = true;\n    }\n  }, [timeInMs]);\n\n  const onClockTimeSpentExitAnimationFinished = useCallback(async () => {\n    await delay(TIME_SHOWN_HOLD_TIME);\n\n    // Reverse play time spent animation\n    clockTimeSpentLottieAnimationRef.current?.playSegments([framesToPlay.current, 0], true);\n\n    await delay(TEXT_DISAPPEAR_DELAY);\n    setFadeOut(true);\n\n    if (isClockTimeSpentShown.current) {\n      clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n        play(CircleSoundKey.CLOCK_OUT);\n        clockLottieAnimationRef.current?.playSegments(CLOCK.OUT_FRAMES, true);\n      });\n    }\n  }, [framesToPlay, play]);\n\n  const onAnimationEnd = useCallback(() => {\n    onComplete?.();\n  }, [onComplete]);\n\n  // Play entry animation\n  useEffect(() => {\n    if (show) {\n      const loadAnimations = async () => {\n        const [timeLottiePath, timeSpentLottiePath] = await Promise.all([\n          fetch(LOTTIE.TOTAL_TIME),\n          fetch(LOTTIE.TOTAL_TIME_SPENT),\n        ]);\n        const [timeLottieData, timeSpentLottieData] = await Promise.all([\n          timeLottiePath.json(),\n          timeSpentLottiePath.json(),\n        ]);\n\n        // Clock Lottie\n        clockLottieAnimationRef.current = Lottie.loadAnimation({\n          container: clockLottieContainerRef.current as Element,\n          animationData: timeLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        // Clock Time Spent Lottie\n        clockTimeSpentLottieAnimationRef.current = Lottie.loadAnimation({\n          container: clockTimeSpentLottieContainerRef.current as Element,\n          animationData: timeSpentLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        // Play clock in animation sounds and lottie\n        play(CircleSoundKey.CLOCK_IN);\n        clockLottieAnimationRef.current?.playSegments(CLOCK.IN_FRAMES, true);\n\n        clockLottieAnimationRef.current?.addEventListener('complete', () => {\n          if (!isClockTimeSpentShown.current) {\n            setClockTimeSpentFrames();\n          } else {\n            onAnimationEnd();\n          }\n        });\n\n        // Setup event listener for time spent animation\n        clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n          clockTimeSpentLottieAnimationRef.current?.removeEventListener('complete');\n          onClockTimeSpentExitAnimationFinished();\n        });\n      };\n\n      loadAnimations();\n\n      return () => {\n        clockLottieAnimationRef.current?.destroy();\n        clockTimeSpentLottieAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, setClockTimeSpentFrames, onAnimationEnd, onClockTimeSpentExitAnimationFinished, play]);\n\n  if (show) {\n    return (\n      <Styled.Clock>\n        <Styled.ClockLottie ref={clockLottieContainerRef} />\n        <Styled.ClockTimeSpentLottie ref={clockTimeSpentLottieContainerRef} />\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={CLOCK_INFRAME_LOTTIE_TO_PLAY + TIME_LOTTIE_TO_PLAY_IN}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n      </Styled.Clock>\n    );\n  }\n\n  return null;\n});\n"],"names":["Clock","memo","show","onComplete","timeInMs","helperText","play","useCircleSounds","fadeOut","setFadeOut","useState","isClockTimeSpentShown","useRef","framesToPlay","clockLottieContainerRef","clockTimeSpentLottieContainerRef","clockLottieAnimationRef","clockTimeSpentLottieAnimationRef","setClockTimeSpentFrames","useCallback","frames","getClockTimeSpentFramesToPlay","_a","CLOCK_TIME_SPENT_FPS","_b","onClockTimeSpentExitAnimationFinished","delay","TIME_SHOWN_HOLD_TIME","TEXT_DISAPPEAR_DELAY","CircleSoundKey","CLOCK","onAnimationEnd","useEffect","timeLottiePath","timeSpentLottiePath","LOTTIE","timeLottieData","timeSpentLottieData","Lottie","_c","jsxs","Styled.Clock","jsx","Styled.ClockLottie","Styled.ClockTimeSpentLottie","Styled.TextWrapper","CLOCK_INFRAME_LOTTIE_TO_PLAY","TIME_LOTTIE_TO_PLAY_IN","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION"],"mappings":"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"}

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

@@ -1,49 +1,48 @@
-import { jsx as a } from "react/jsx-runtime";
-import c from "lottie-web";
-import { memo as f, useRef as u, useEffect as d } from "react";
-import { useCircleSounds as A } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
-import { CircleSoundKey as P } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
-import { PointsWrapper as y } from "./points-styled.js";
-const E = {
-  point1: () => import("../../../assets/lotties/circle/1pts.json.js"),
-  point5: () => import("../../../assets/lotties/circle/5pts.json.js"),
-  point10: () => import("../../../assets/lotties/circle/10pts.json.js"),
-  point15: () => import("../../../assets/lotties/circle/15pts.json.js"),
-  point20: () => import("../../../assets/lotties/circle/20pts.json.js"),
-  point25: () => import("../../../assets/lotties/circle/25pts.json.js"),
-  point30: () => import("../../../assets/lotties/circle/30pts.json.js"),
-  point35: () => import("../../../assets/lotties/circle/35pts.json.js"),
-  point40: () => import("../../../assets/lotties/circle/40pts.json.js"),
-  point45: () => import("../../../assets/lotties/circle/45pts.json.js"),
-  point50: () => import("../../../assets/lotties/circle/50pts.json.js"),
-  point60: () => import("../../../assets/lotties/circle/60pts.json.js"),
-  point100: () => import("../../../assets/lotties/circle/100pts.json.js")
-}, x = f((s) => {
-  const { point: o = 0, onReveal: i, onComplete: r, show: n } = s, p = u(null), { play: e } = A();
-  return d(() => {
-    let t = null;
-    if (n && o) {
-      const m = E[`point${o}`];
-      (async () => {
-        if (m) {
-          const l = await m();
-          t = c.loadAnimation({
-            animationData: l.default,
-            container: p.current,
-            loop: !1,
-            autoplay: !0,
-            renderer: "canvas"
-          }), e(P.POINTS_AWARDED), t.addEventListener("complete", r);
-        } else
-          r();
-      })(), i == null || i();
+import { jsx as N } from "react/jsx-runtime";
+import { memo as P, useEffect as T } from "react";
+import { LOTTIE as t } from "../../../assets/lottie/lottie.js";
+import { GAME_LAUNCHER_SIZE as a, GAME_LAUNCHER_ASSET_PADDING as O, GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH as c } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
+import { useCircleSounds as E } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
+import { CircleSoundKey as f } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
+import A from "../../ui/lottie-animation/lottie-animation.js";
+const _ = {
+  point1: t.POINT1,
+  point5: t.POINT5,
+  point10: t.POINT10,
+  point15: t.POINT15,
+  point20: t.POINT20,
+  point25: t.POINT25,
+  point30: t.POINT30,
+  point35: t.POINT35,
+  point40: t.POINT40,
+  point45: t.POINT45,
+  point50: t.POINT50,
+  point60: t.POINT60,
+  point100: t.POINT100
+}, r = a + O - c, l = {
+  loop: !1,
+  autoplay: !0,
+  renderer: "canvas"
+}, d = P((p) => {
+  const { point: m = 0, onReveal: n, onComplete: i, show: e } = p, { play: s } = E(), o = _[`point${m}`], I = {
+    name: "complete",
+    callback: i
+  };
+  return T(() => {
+    o || i(), e && o && (n == null || n());
+  }, [o, i, n, e]), e && o ? /* @__PURE__ */ N(
+    A,
+    {
+      width: r,
+      height: r,
+      src: o,
+      settings: l,
+      eventListener: I,
+      onRender: () => s(f.POINTS_AWARDED)
     }
-    return () => {
-      t == null || t.removeEventListener("complete", r), t == null || t.destroy();
-    };
-  }, [n, o, r, e, i]), n && o ? /* @__PURE__ */ a(y, { ref: p }) : null;
+  ) : null;
 });
 export {
-  x as Points
+  d 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 { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useEffect, useRef } from 'react';\n\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 * as Styled from './points-styled';\n\n// lazy load points lotties\nconst POINTS_MAP: Record<string, () => Promise<{ default: Record<string, unknown> }>> = {\n  point1: () => import('../../../assets/lotties/circle/1pts.json'),\n  point5: () => import('../../../assets/lotties/circle/5pts.json'),\n  point10: () => import('../../../assets/lotties/circle/10pts.json'),\n  point15: () => import('../../../assets/lotties/circle/15pts.json'),\n  point20: () => import('../../../assets/lotties/circle/20pts.json'),\n  point25: () => import('../../../assets/lotties/circle/25pts.json'),\n  point30: () => import('../../../assets/lotties/circle/30pts.json'),\n  point35: () => import('../../../assets/lotties/circle/35pts.json'),\n  point40: () => import('../../../assets/lotties/circle/40pts.json'),\n  point45: () => import('../../../assets/lotties/circle/45pts.json'),\n  point50: () => import('../../../assets/lotties/circle/50pts.json'),\n  point60: () => import('../../../assets/lotties/circle/60pts.json'),\n  point100: () => import('../../../assets/lotties/circle/100pts.json'),\n};\n\nexport const Points: FC<IPointsProps> = memo(props => {\n  const { point = 0, onReveal, onComplete, show } = props;\n  const pointsLottieRef = useRef<HTMLDivElement>(null);\n  const { play } = useCircleSounds();\n\n  useEffect(() => {\n    let animation: AnimationItem | null = null;\n\n    if (show && point) {\n      const lottiePath = POINTS_MAP[`point${point}`];\n\n      const loadAnimation = async () => {\n        if (lottiePath) {\n          const data = await lottiePath();\n\n          animation = Lottie.loadAnimation({\n            animationData: data.default,\n            container: pointsLottieRef.current as Element,\n            loop: false,\n            autoplay: true,\n            renderer: 'canvas',\n          });\n\n          play(CircleSoundKey.POINTS_AWARDED);\n          animation.addEventListener('complete', onComplete);\n        } else {\n          onComplete(); // safe check if point is not found\n        }\n      };\n\n      loadAnimation();\n      onReveal?.();\n    }\n\n    return () => {\n      animation?.removeEventListener('complete', onComplete);\n      animation?.destroy();\n    };\n  }, [show, point, onComplete, play, onReveal]);\n\n  if (show && point) {\n    return <Styled.PointsWrapper ref={pointsLottieRef} />;\n  }\n\n  return null;\n});\n"],"names":["POINTS_MAP","Points","memo","props","point","onReveal","onComplete","show","pointsLottieRef","useRef","play","useCircleSounds","useEffect","animation","lottiePath","data","Lottie","CircleSoundKey","jsx","Styled.PointsWrapper"],"mappings":";;;;;;AAYA,MAAMA,IAAkF;AAAA,EACtF,QAAQ,MAAM,OAAO,6CAA0C;AAAA,EAC/D,QAAQ,MAAM,OAAO,6CAA0C;AAAA,EAC/D,SAAS,MAAM,OAAO,8CAA2C;AAAA,EACjE,SAAS,MAAM,OAAO,8CAA2C;AAAA,EACjE,SAAS,MAAM,OAAO,8CAA2C;AAAA,EACjE,SAAS,MAAM,OAAO,8CAA2C;AAAA,EACjE,SAAS,MAAM,OAAO,8CAA2C;AAAA,EACjE,SAAS,MAAM,OAAO,8CAA2C;AAAA,EACjE,SAAS,MAAM,OAAO,8CAA2C;AAAA,EACjE,SAAS,MAAM,OAAO,8CAA2C;AAAA,EACjE,SAAS,MAAM,OAAO,8CAA2C;AAAA,EACjE,SAAS,MAAM,OAAO,8CAA2C;AAAA,EACjE,UAAU,MAAM,OAAO,+CAA4C;AACrE,GAEaC,IAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,OAAAC,IAAQ,GAAG,UAAAC,GAAU,YAAAC,GAAY,MAAAC,EAAS,IAAAJ,GAC5CK,IAAkBC,EAAuB,IAAI,GAC7C,EAAE,MAAAC,MAASC;AAqCjB,SAnCAC,EAAU,MAAM;AACd,QAAIC,IAAkC;AAEtC,QAAIN,KAAQH,GAAO;AACjB,YAAMU,IAAad,EAAW,QAAQI,CAAK,EAAE;AAqB/B,OAnBQ,YAAY;AAChC,YAAIU,GAAY;AACR,gBAAAC,IAAO,MAAMD;AAEnB,UAAAD,IAAYG,EAAO,cAAc;AAAA,YAC/B,eAAeD,EAAK;AAAA,YACpB,WAAWP,EAAgB;AAAA,YAC3B,MAAM;AAAA,YACN,UAAU;AAAA,YACV,UAAU;AAAA,UAAA,CACX,GAEDE,EAAKO,EAAe,cAAc,GACxBJ,EAAA,iBAAiB,YAAYP,CAAU;AAAA,QAAA;AAEtC,UAAAA;MACb,MAISD,KAAA,QAAAA;AAAA,IACb;AAEA,WAAO,MAAM;AACA,MAAAQ,KAAA,QAAAA,EAAA,oBAAoB,YAAYP,IAC3CO,KAAA,QAAAA,EAAW;AAAA,IAAQ;AAAA,EACrB,GACC,CAACN,GAAMH,GAAOE,GAAYI,GAAML,CAAQ,CAAC,GAExCE,KAAQH,IACF,gBAAAc,EAAAC,GAAA,EAAqB,KAAKX,EAAiB,CAAA,IAG9C;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 {\n  GAME_LAUNCHER_ASSET_PADDING,\n  GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,\n  GAME_LAUNCHER_SIZE,\n} from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\n\nconst POINTS_MAP: Record<string, string> = {\n  point1: LOTTIE.POINT1,\n  point5: LOTTIE.POINT5,\n  point10: LOTTIE.POINT10,\n  point15: LOTTIE.POINT15,\n  point20: LOTTIE.POINT20,\n  point25: LOTTIE.POINT25,\n  point30: LOTTIE.POINT30,\n  point35: LOTTIE.POINT35,\n  point40: LOTTIE.POINT40,\n  point45: LOTTIE.POINT45,\n  point50: LOTTIE.POINT50,\n  point60: LOTTIE.POINT60,\n  point100: LOTTIE.POINT100,\n};\nconst animationDimension =\n  GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH;\nconst animationSettings = {\n  loop: false,\n  autoplay: true,\n  renderer: 'canvas',\n};\n\nexport const Points: FC<IPointsProps> = memo(props => {\n  const { point = 0, onReveal, onComplete, show } = props;\n\n  const { play } = useCircleSounds();\n\n  const animationPath = POINTS_MAP[`point${point}`];\n  const animationEventListener = {\n    name: 'complete' as AnimationEventName,\n    callback: onComplete,\n  };\n\n  useEffect(() => {\n    if (!animationPath) onComplete();\n\n    if (show && animationPath) onReveal?.();\n  }, [animationPath, onComplete, onReveal, show]);\n\n  if (show && animationPath) {\n    return (\n      <LottieAnimation\n        width={animationDimension}\n        height={animationDimension}\n        src={animationPath}\n        settings={animationSettings}\n        eventListener={animationEventListener}\n        onRender={() => play(CircleSoundKey.POINTS_AWARDED)}\n      />\n    );\n  }\n\n  return null;\n});\n"],"names":["POINTS_MAP","LOTTIE","animationDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","animationSettings","Points","memo","props","point","onReveal","onComplete","show","play","useCircleSounds","animationPath","animationEventListener","useEffect","jsx","LottieAnimation","CircleSoundKey"],"mappings":";;;;;;;AAgBA,MAAMA,IAAqC;AAAA,EACzC,QAAQC,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,UAAUA,EAAO;AACnB,GACMC,IACJC,IAAqBC,IAA8BC,GAC/CC,IAAoB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,GAEaC,IAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,OAAAC,IAAQ,GAAG,UAAAC,GAAU,YAAAC,GAAY,MAAAC,EAAS,IAAAJ,GAE5C,EAAE,MAAAK,MAASC,KAEXC,IAAgBhB,EAAW,QAAQU,CAAK,EAAE,GAC1CO,IAAyB;AAAA,IAC7B,MAAM;AAAA,IACN,UAAUL;AAAA,EAAA;AASZ,SANAM,EAAU,MAAM;AACV,IAACF,KAA0BJ,KAE3BC,KAAQG,MAA0BL,KAAA,QAAAA;AAAA,KACrC,CAACK,GAAeJ,GAAYD,GAAUE,CAAI,CAAC,GAE1CA,KAAQG,IAER,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOlB;AAAA,MACP,QAAQA;AAAA,MACR,KAAKc;AAAA,MACL,UAAUV;AAAA,MACV,eAAeW;AAAA,MACf,UAAU,MAAMH,EAAKO,EAAe,cAAc;AAAA,IAAA;AAAA,EAAA,IAKjD;AACT,CAAC;"}

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

@@ -1,34 +1,36 @@
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import k from "lottie-web";
-import { memo as $, useState as p, useRef as E, useCallback as L, useEffect as U } from "react";
-import { useCircleSounds as K } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
+import { memo as P, useState as p, useRef as E, useCallback as $, useEffect as L } from "react";
+import { LOTTIE as K } from "../../../assets/lottie/lottie.js";
+import { useCircleSounds as U } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
 import { CircleSoundKey as I } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
+import { fetchLottie as x } from "../../ui/lottie-animation/helper.js";
 import { delay as l } from "../../utils/utils.js";
-import { TEXT_DISAPPEAR_DELAY as x, OUT_FRAMES as c, STREAK_DISAPPEAR_ANIMATION_DURATION as C, STREAK_APPEAR_ANIMATION_DURATION as b, STREAK_SCROLL_ANIMATION_DURATION as _, STREAK_WAIT_DURATION as R, TEXT_DISAPPEAR_DURATION as w, TEXT_APPEAR_DURATION as F, IN_FRAMES as M } from "./constants.js";
-import { Streak as V, SVGImgContainer as W, StreakLottieView as g, StreakValueWrapper as X, StreakValueContainer as j, StreakValue as y, TextWrapper as H } from "./streak-styled.js";
-const G = () => import("../../../assets/lotties/circle/total-streak-lottie.json.js"), tt = $((O) => {
-  const { currStreak: T, show: s, onReveal: r, onComplete: a, helperText: u } = O, { play: o } = K(), [D, N] = p(0), m = E(null), n = E(), [i, P] = p(!1), S = L(async () => {
-    var A;
+import { TEXT_DISAPPEAR_DELAY as C, OUT_FRAMES as T, STREAK_DISAPPEAR_ANIMATION_DURATION as b, STREAK_APPEAR_ANIMATION_DURATION as w, STREAK_SCROLL_ANIMATION_DURATION as _, STREAK_WAIT_DURATION as R, TEXT_DISAPPEAR_DURATION as F, TEXT_APPEAR_DURATION as M, IN_FRAMES as V } from "./constants.js";
+import { Streak as W, SVGImgContainer as g, StreakLottieView as X, StreakValueWrapper as j, StreakValueContainer as H, StreakValue as O, TextWrapper as G } from "./streak-styled.js";
+const rt = P((y) => {
+  const { currStreak: c, show: A, onReveal: r, onComplete: a, helperText: m } = y, { play: o } = U(), [D, N] = p(0), u = E(null), n = E(), [i, h] = p(!1), S = $(async () => {
+    var s;
     try {
-      await l(x), P(!0), o(I.STREAK_OUT), (A = n.current) == null || A.playSegments(c, !0), await l(
-        (c[1] - c[0]) * 1e3 / 30
+      await l(C), h(!0), o(I.STREAK_OUT), (s = n.current) == null || s.playSegments(T, !0), await l(
+        (T[1] - T[0]) * 1e3 / 30
       ), a == null || a();
     } catch (t) {
       console.log(t);
     }
   }, [a, o]);
-  return U(() => {
-    if (s)
+  return L(() => {
+    if (A)
       return (async () => {
         var d;
-        const h = (await G()).default;
+        const t = await x(K.TOTAL_STREAK);
         n.current = k.loadAnimation({
-          container: m.current,
-          animationData: h,
+          container: u.current,
+          animationData: t,
           autoplay: !1,
           loop: !1,
           renderer: "canvas"
-        }), o(I.STREAK_IN), (d = n.current) == null || d.playSegments(M, !0), r == null || r(), l(R).then(() => {
+        }), o(I.STREAK_IN), (d = n.current) == null || d.playSegments(V, !0), r == null || r(), l(R).then(() => {
           N(1), l(_).then(() => {
             S();
           });
@@ -37,39 +39,39 @@ const G = () => import("../../../assets/lotties/circle/total-streak-lottie.json.
         var t;
         (t = n.current) == null || t.destroy();
       };
-  }, [s, S, o, r]), s ? /* @__PURE__ */ f(V, { children: [
-    /* @__PURE__ */ e(W, {}),
-    /* @__PURE__ */ e(g, { ref: m }),
+  }, [A, S, o, r]), A ? /* @__PURE__ */ f(W, { children: [
+    /* @__PURE__ */ e(g, {}),
+    /* @__PURE__ */ e(X, { ref: u }),
     /* @__PURE__ */ e(
-      X,
+      j,
       {
         $animationType: i ? "fadeout" : "fadein",
-        $duration: i ? C : b,
+        $duration: i ? b : w,
         children: /* @__PURE__ */ f(
-          j,
+          H,
           {
             $translate: D > 0,
             $translateDuration: _,
             children: [
-              /* @__PURE__ */ e(y, { $color: "WHITE", $renderAs: "ab1-bold", children: T }),
-              /* @__PURE__ */ e(y, { $color: "WHITE", $renderAs: "ab1-bold", children: T + 1 })
+              /* @__PURE__ */ e(O, { $color: "WHITE", $renderAs: "ab1-bold", children: c }),
+              /* @__PURE__ */ e(O, { $color: "WHITE", $renderAs: "ab1-bold", children: c + 1 })
             ]
           }
         )
       }
     ),
-    u && /* @__PURE__ */ e(
-      H,
+    m && /* @__PURE__ */ e(
+      G,
       {
         $delay: R,
         $animationType: i ? "fadeout" : "fadein",
-        $duration: i ? w : F,
-        children: u
+        $duration: i ? F : M,
+        children: m
       }
     )
   ] }) : null;
 });
 export {
-  tt as Streak
+  rt as Streak
 };
 //# sourceMappingURL=streak.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"streak.js","sources":["../../../../src/features/post-game-stats/streak/streak.tsx"],"sourcesContent":["import type { IStreakProps } from './streak-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\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 { delay } from '../../utils/utils';\nimport {\n  IN_FRAMES,\n  OUT_FRAMES,\n  STREAK_APPEAR_ANIMATION_DURATION,\n  STREAK_DISAPPEAR_ANIMATION_DURATION,\n  STREAK_SCROLL_ANIMATION_DURATION,\n  STREAK_WAIT_DURATION,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n} from './constants';\nimport * as Styled from './streak-styled';\n\nconst streakLottie = () => import('../../../assets/lotties/circle/total-streak-lottie.json');\n\nexport const Streak: FC<IStreakProps> = memo(props => {\n  const { currStreak, show, onReveal, onComplete, helperText } = props;\n  const { play } = useCircleSounds();\n  const [displayStreak, setDisplayStreak] = useState(0);\n  const lottieContainerRef = useRef<HTMLDivElement>(null);\n  const lottieAnimationRef = useRef<AnimationItem>();\n  const [fadeOut, setFadeout] = useState(false);\n\n  const playExitAnimation = useCallback(async () => {\n    try {\n      await delay(TEXT_DISAPPEAR_DELAY);\n      setFadeout(true);\n      play(CircleSoundKey.STREAK_OUT);\n      lottieAnimationRef.current?.playSegments(OUT_FRAMES, true);\n      const LOTTIE_FPS = 30;\n\n      await delay(\n        (((OUT_FRAMES[1] as unknown as number) - (OUT_FRAMES[0] as unknown as number)) * 1000) /\n          LOTTIE_FPS,\n      );\n      onComplete?.();\n    } catch (err) {\n      /* eslint-disable no-console */\n      console.log(err);\n    }\n  }, [onComplete, play]);\n\n  // play entry animation\n  useEffect(() => {\n    if (show) {\n      const loadAnimation = async () => {\n        const lottiePath = await streakLottie();\n\n        const streakLottieAnimationData = lottiePath.default;\n\n        lottieAnimationRef.current = Lottie.loadAnimation({\n          container: lottieContainerRef.current as Element,\n          animationData: streakLottieAnimationData,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        play(CircleSoundKey.STREAK_IN);\n        lottieAnimationRef.current?.playSegments(IN_FRAMES, true);\n        onReveal?.();\n\n        delay(STREAK_WAIT_DURATION).then(() => {\n          setDisplayStreak(1);\n          delay(STREAK_SCROLL_ANIMATION_DURATION).then(() => {\n            playExitAnimation();\n          });\n        });\n      };\n\n      loadAnimation();\n\n      return () => {\n        lottieAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, playExitAnimation, play, onReveal]);\n\n  if (show) {\n    return (\n      <Styled.Streak>\n        <Styled.SVGImgContainer />\n        <Styled.StreakLottieView ref={lottieContainerRef} />\n\n        <Styled.StreakValueWrapper\n          $animationType={fadeOut ? 'fadeout' : 'fadein'}\n          $duration={\n            fadeOut ? STREAK_DISAPPEAR_ANIMATION_DURATION : STREAK_APPEAR_ANIMATION_DURATION\n          }\n        >\n          <Styled.StreakValueContainer\n            $translate={displayStreak > 0}\n            $translateDuration={STREAK_SCROLL_ANIMATION_DURATION}\n          >\n            <Styled.StreakValue $color=\"WHITE\" $renderAs=\"ab1-bold\">\n              {currStreak}\n            </Styled.StreakValue>\n            <Styled.StreakValue $color=\"WHITE\" $renderAs=\"ab1-bold\">\n              {currStreak + 1}\n            </Styled.StreakValue>\n          </Styled.StreakValueContainer>\n        </Styled.StreakValueWrapper>\n\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={STREAK_WAIT_DURATION}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n      </Styled.Streak>\n    );\n  }\n\n  return null;\n});\n"],"names":["streakLottie","Streak","memo","props","currStreak","show","onReveal","onComplete","helperText","play","useCircleSounds","displayStreak","setDisplayStreak","useState","lottieContainerRef","useRef","lottieAnimationRef","fadeOut","setFadeout","playExitAnimation","useCallback","delay","TEXT_DISAPPEAR_DELAY","CircleSoundKey","_a","OUT_FRAMES","err","useEffect","streakLottieAnimationData","Lottie","IN_FRAMES","STREAK_WAIT_DURATION","STREAK_SCROLL_ANIMATION_DURATION","jsxs","Styled.Streak","jsx","Styled.SVGImgContainer","Styled.StreakLottieView","Styled.StreakValueWrapper","STREAK_DISAPPEAR_ANIMATION_DURATION","STREAK_APPEAR_ANIMATION_DURATION","Styled.StreakValueContainer","Styled.StreakValue","Styled.TextWrapper","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION"],"mappings":";;;;;;;;AAuBA,MAAMA,IAAe,MAAM,OAAO,4DAAyD,GAE9EC,KAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,YAAAC,GAAY,MAAAC,GAAM,UAAAC,GAAU,YAAAC,GAAY,YAAAC,EAAe,IAAAL,GACzD,EAAE,MAAAM,MAASC,KACX,CAACC,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAC9CC,IAAqBC,EAAuB,IAAI,GAChDC,IAAqBD,KACrB,CAACE,GAASC,CAAU,IAAIL,EAAS,EAAK,GAEtCM,IAAoBC,EAAY,YAAY;;AAC5C,QAAA;AACF,YAAMC,EAAMC,CAAoB,GAChCJ,EAAW,EAAI,GACfT,EAAKc,EAAe,UAAU,IACXC,IAAAR,EAAA,YAAA,QAAAQ,EAAS,aAAaC,GAAY,KAG/C,MAAAJ;AAAA,SACDI,EAAW,CAAC,IAA2BA,EAAW,CAAC,KAA2B,MAHhE;AAAA,MAIf,GAESlB,KAAA,QAAAA;AAAA,aACNmB,GAAK;AAEZ,cAAQ,IAAIA,CAAG;AAAA,IACjB;AAAA,EAAA,GACC,CAACnB,GAAYE,CAAI,CAAC;AAsCrB,SAnCAkB,EAAU,MAAM;AACd,QAAItB;AA0BY,cAzBQ,YAAY;;AAGhC,cAAMuB,KAFa,MAAM5B,KAEoB;AAE1B,QAAAgB,EAAA,UAAUa,EAAO,cAAc;AAAA,UAChD,WAAWf,EAAmB;AAAA,UAC9B,eAAec;AAAA,UACf,UAAU;AAAA,UACV,MAAM;AAAA,UACN,UAAU;AAAA,QAAA,CACX,GAEDnB,EAAKc,EAAe,SAAS,IACVC,IAAAR,EAAA,YAAA,QAAAQ,EAAS,aAAaM,GAAW,KACzCxB,KAAA,QAAAA,KAELe,EAAAU,CAAoB,EAAE,KAAK,MAAM;AACrC,UAAAnB,EAAiB,CAAC,GACZS,EAAAW,CAAgC,EAAE,KAAK,MAAM;AAC/B,YAAAb;UAAA,CACnB;AAAA,QAAA,CACF;AAAA,MAAA,MAKI,MAAM;;AACX,SAAAK,IAAAR,EAAmB,YAAnB,QAAAQ,EAA4B;AAAA,MAAQ;AAAA,KAGvC,CAACnB,GAAMc,GAAmBV,GAAMH,CAAQ,CAAC,GAExCD,IAEA,gBAAA4B,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAuB;AAAA,IACvB,gBAAAD,EAAAE,GAAA,EAAwB,KAAKvB,EAAoB,CAAA;AAAA,IAElD,gBAAAqB;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,gBAAgBrB,IAAU,YAAY;AAAA,QACtC,WACEA,IAAUsB,IAAsCC;AAAA,QAGlD,UAAA,gBAAAP;AAAA,UAACQ;AAAAA,UAAA;AAAA,YACC,YAAY9B,IAAgB;AAAA,YAC5B,oBAAoBqB;AAAA,YAEpB,UAAA;AAAA,cAAA,gBAAAG,EAACO,GAAA,EAAmB,QAAO,SAAQ,WAAU,YAC1C,UACHtC,GAAA;AAAA,cACA,gBAAA+B,EAACO,GAAA,EAAmB,QAAO,SAAQ,WAAU,YAC1C,UAAAtC,IAAa,GAChB;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IAECI,KACC,gBAAA2B;AAAA,MAACQ;AAAAA,MAAA;AAAA,QACC,QAAQZ;AAAA,QACR,gBAAgBd,IAAU,YAAY;AAAA,QACtC,WAAWA,IAAU2B,IAA0BC;AAAA,QAE9C,UAAArC;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA,IAIG;AACT,CAAC;"}
+{"version":3,"file":"streak.js","sources":["../../../../src/features/post-game-stats/streak/streak.tsx"],"sourcesContent":["import type { IStreakProps } from './streak-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\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 { fetchLottie } from '../../ui/lottie-animation/helper';\nimport { delay } from '../../utils/utils';\nimport {\n  IN_FRAMES,\n  OUT_FRAMES,\n  STREAK_APPEAR_ANIMATION_DURATION,\n  STREAK_DISAPPEAR_ANIMATION_DURATION,\n  STREAK_SCROLL_ANIMATION_DURATION,\n  STREAK_WAIT_DURATION,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n} from './constants';\nimport * as Styled from './streak-styled';\n\nexport const Streak: FC<IStreakProps> = memo(props => {\n  const { currStreak, show, onReveal, onComplete, helperText } = props;\n  const { play } = useCircleSounds();\n  const [displayStreak, setDisplayStreak] = useState(0);\n  const lottieContainerRef = useRef<HTMLDivElement>(null);\n  const lottieAnimationRef = useRef<AnimationItem>();\n  const [fadeOut, setFadeout] = useState(false);\n\n  const playExitAnimation = useCallback(async () => {\n    try {\n      await delay(TEXT_DISAPPEAR_DELAY);\n      setFadeout(true);\n      play(CircleSoundKey.STREAK_OUT);\n      lottieAnimationRef.current?.playSegments(OUT_FRAMES, true);\n      const LOTTIE_FPS = 30;\n\n      await delay(\n        (((OUT_FRAMES[1] as unknown as number) - (OUT_FRAMES[0] as unknown as number)) * 1000) /\n          LOTTIE_FPS,\n      );\n      onComplete?.();\n    } catch (err) {\n      /* eslint-disable no-console */\n      console.log(err);\n    }\n  }, [onComplete, play]);\n\n  // play entry animation\n  useEffect(() => {\n    if (show) {\n      const loadAnimation = async () => {\n        const streakLottieAnimationData = await fetchLottie(LOTTIE.TOTAL_STREAK);\n\n        lottieAnimationRef.current = Lottie.loadAnimation({\n          container: lottieContainerRef.current as Element,\n          animationData: streakLottieAnimationData,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        play(CircleSoundKey.STREAK_IN);\n        lottieAnimationRef.current?.playSegments(IN_FRAMES, true);\n        onReveal?.();\n\n        delay(STREAK_WAIT_DURATION).then(() => {\n          setDisplayStreak(1);\n          delay(STREAK_SCROLL_ANIMATION_DURATION).then(() => {\n            playExitAnimation();\n          });\n        });\n      };\n\n      loadAnimation();\n\n      return () => {\n        lottieAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, playExitAnimation, play, onReveal]);\n\n  if (show) {\n    return (\n      <Styled.Streak>\n        <Styled.SVGImgContainer />\n        <Styled.StreakLottieView ref={lottieContainerRef} />\n\n        <Styled.StreakValueWrapper\n          $animationType={fadeOut ? 'fadeout' : 'fadein'}\n          $duration={\n            fadeOut ? STREAK_DISAPPEAR_ANIMATION_DURATION : STREAK_APPEAR_ANIMATION_DURATION\n          }\n        >\n          <Styled.StreakValueContainer\n            $translate={displayStreak > 0}\n            $translateDuration={STREAK_SCROLL_ANIMATION_DURATION}\n          >\n            <Styled.StreakValue $color=\"WHITE\" $renderAs=\"ab1-bold\">\n              {currStreak}\n            </Styled.StreakValue>\n            <Styled.StreakValue $color=\"WHITE\" $renderAs=\"ab1-bold\">\n              {currStreak + 1}\n            </Styled.StreakValue>\n          </Styled.StreakValueContainer>\n        </Styled.StreakValueWrapper>\n\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={STREAK_WAIT_DURATION}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n      </Styled.Streak>\n    );\n  }\n\n  return null;\n});\n"],"names":["Streak","memo","props","currStreak","show","onReveal","onComplete","helperText","play","useCircleSounds","displayStreak","setDisplayStreak","useState","lottieContainerRef","useRef","lottieAnimationRef","fadeOut","setFadeout","playExitAnimation","useCallback","delay","TEXT_DISAPPEAR_DELAY","CircleSoundKey","_a","OUT_FRAMES","err","useEffect","streakLottieAnimationData","fetchLottie","LOTTIE","Lottie","IN_FRAMES","STREAK_WAIT_DURATION","STREAK_SCROLL_ANIMATION_DURATION","jsxs","Styled.Streak","jsx","Styled.SVGImgContainer","Styled.StreakLottieView","Styled.StreakValueWrapper","STREAK_DISAPPEAR_ANIMATION_DURATION","STREAK_APPEAR_ANIMATION_DURATION","Styled.StreakValueContainer","Styled.StreakValue","Styled.TextWrapper","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION"],"mappings":";;;;;;;;;;AAyBa,MAAAA,KAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,YAAAC,GAAY,MAAAC,GAAM,UAAAC,GAAU,YAAAC,GAAY,YAAAC,EAAe,IAAAL,GACzD,EAAE,MAAAM,MAASC,KACX,CAACC,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAC9CC,IAAqBC,EAAuB,IAAI,GAChDC,IAAqBD,KACrB,CAACE,GAASC,CAAU,IAAIL,EAAS,EAAK,GAEtCM,IAAoBC,EAAY,YAAY;;AAC5C,QAAA;AACF,YAAMC,EAAMC,CAAoB,GAChCJ,EAAW,EAAI,GACfT,EAAKc,EAAe,UAAU,IACXC,IAAAR,EAAA,YAAA,QAAAQ,EAAS,aAAaC,GAAY,KAG/C,MAAAJ;AAAA,SACDI,EAAW,CAAC,IAA2BA,EAAW,CAAC,KAA2B,MAHhE;AAAA,MAIf,GAESlB,KAAA,QAAAA;AAAA,aACNmB,GAAK;AAEZ,cAAQ,IAAIA,CAAG;AAAA,IACjB;AAAA,EAAA,GACC,CAACnB,GAAYE,CAAI,CAAC;AAoCrB,SAjCAkB,EAAU,MAAM;AACd,QAAItB;AAwBY,cAvBQ,YAAY;;AAChC,cAAMuB,IAA4B,MAAMC,EAAYC,EAAO,YAAY;AAEpD,QAAAd,EAAA,UAAUe,EAAO,cAAc;AAAA,UAChD,WAAWjB,EAAmB;AAAA,UAC9B,eAAec;AAAA,UACf,UAAU;AAAA,UACV,MAAM;AAAA,UACN,UAAU;AAAA,QAAA,CACX,GAEDnB,EAAKc,EAAe,SAAS,IACVC,IAAAR,EAAA,YAAA,QAAAQ,EAAS,aAAaQ,GAAW,KACzC1B,KAAA,QAAAA,KAELe,EAAAY,CAAoB,EAAE,KAAK,MAAM;AACrC,UAAArB,EAAiB,CAAC,GACZS,EAAAa,CAAgC,EAAE,KAAK,MAAM;AAC/B,YAAAf;UAAA,CACnB;AAAA,QAAA,CACF;AAAA,MAAA,MAKI,MAAM;;AACX,SAAAK,IAAAR,EAAmB,YAAnB,QAAAQ,EAA4B;AAAA,MAAQ;AAAA,KAGvC,CAACnB,GAAMc,GAAmBV,GAAMH,CAAQ,CAAC,GAExCD,IAEA,gBAAA8B,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAuB;AAAA,IACvB,gBAAAD,EAAAE,GAAA,EAAwB,KAAKzB,EAAoB,CAAA;AAAA,IAElD,gBAAAuB;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,gBAAgBvB,IAAU,YAAY;AAAA,QACtC,WACEA,IAAUwB,IAAsCC;AAAA,QAGlD,UAAA,gBAAAP;AAAA,UAACQ;AAAAA,UAAA;AAAA,YACC,YAAYhC,IAAgB;AAAA,YAC5B,oBAAoBuB;AAAA,YAEpB,UAAA;AAAA,cAAA,gBAAAG,EAACO,GAAA,EAAmB,QAAO,SAAQ,WAAU,YAC1C,UACHxC,GAAA;AAAA,cACA,gBAAAiC,EAACO,GAAA,EAAmB,QAAO,SAAQ,WAAU,YAC1C,UAAAxC,IAAa,GAChB;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IAECI,KACC,gBAAA6B;AAAA,MAACQ;AAAAA,MAAA;AAAA,QACC,QAAQZ;AAAA,QACR,gBAAgBhB,IAAU,YAAY;AAAA,QACtC,WAAWA,IAAU6B,IAA0BC;AAAA,QAE9C,UAAAvC;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA,IAIG;AACT,CAAC;"}

package/dist/features/trial-session/comps/av-panels/teacher-av-panel/teacher-av-panel.js

@@ -1,87 +1,89 @@
-import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import O from "lottie-web";
-import { memo as S, useRef as u, useState as $, useCallback as d, useEffect as I } from "react";
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import S from "lottie-web";
+import { memo as j, useRef as u, useState as I, useCallback as f, useEffect as $ } from "react";
+import { LOTTIE as y } from "../../../../../assets/lottie/lottie.js";
 import R from "../../../../ui/layout/flex-view.js";
-import j from "../../../../ui/text/text.js";
-import { useTrialSessionContext as B } from "../../../context/use-trial-session-context.js";
-import { EClassTimeAlertLevel as f } from "../../../trial-session-types.js";
-import G from "../../clock/clock.js";
-import X from "../../countdown-progress-bar/countdown-progress-bar.js";
-import { AnimationContainer as H, TextFadeIn as K, ProgressWrapper as q, TimerWrapper as Y, TeacherNameWrapper as z } from "./teacher-av-panel-styled.js";
-const J = () => import("../../../../../assets/lotties/trial-v3/5min-clock.json.js"), Q = () => import("../../../../../assets/lotties/trial-v3/15min-clock.json.js"), ce = S(() => {
+import { fetchLottie as B } from "../../../../ui/lottie-animation/helper.js";
+import G from "../../../../ui/text/text.js";
+import { useTrialSessionContext as K } from "../../../context/use-trial-session-context.js";
+import { EClassTimeAlertLevel as d } from "../../../trial-session-types.js";
+import X from "../../clock/clock.js";
+import H from "../../countdown-progress-bar/countdown-progress-bar.js";
+import { AnimationContainer as q, TextFadeIn as Y, ProgressWrapper as z, TimerWrapper as J, TeacherNameWrapper as Q } from "./teacher-av-panel-styled.js";
+const me = j(() => {
   const {
-    teacherPanel: _,
-    classStartedOn: i,
+    teacherPanel: F,
+    classStartedOn: o,
     isTeacher: c,
     trialHomeData: M,
-    classTimeAlertConfig: b,
-    classDuration: p
-  } = B(), {
+    classTimeAlertConfig: O,
+    classDuration: h
+  } = K(), {
     alertLevel: e,
     isVisible: g,
     onComplete: l
-  } = b ?? {}, h = u(null), o = u(null), [k, A] = $(!1), [F, w] = $(!1), [C, V] = $(0), r = u(null), a = u(null), { teacher: P } = M, { name: E } = P, v = d(
+  } = O ?? {}, p = u(null), a = u(null), [V, C] = I(!1), [b, E] = I(!1), [A, P] = I(0), r = u(null), s = u(null), { teacher: k } = M, { name: w } = k, N = f(
     async (n) => {
-      if (!(!h.current || !n))
+      if (!(!p.current || !n))
         try {
-          const m = (await (n === f.FIVE_MIN ? J() : Q())).default;
-          w(!0);
-          const D = O.loadAnimation({
-            container: h.current,
+          const i = n === d.FIVE_MIN ? y.FIVE_MIN_CLOCK : y.FIFTEEN_MIN_CLOCK, m = await B(i);
+          E(!0);
+          const D = S.loadAnimation({
+            container: p.current,
             renderer: "svg",
             loop: !1,
             autoplay: !1,
             animationData: m
           });
-          o.current = D, o.current.play(), a.current && (a.current.currentTime = 0, a.current.play()), setTimeout(() => A(!0), 233), o.current.addEventListener("complete", () => {
-            var x;
-            (x = o.current) == null || x.destroy(), o.current = null, A(!1), w(!1), l == null || l();
+          a.current = D, a.current.play(), s.current && (s.current.currentTime = 0, s.current.play()), setTimeout(() => C(!0), 233), a.current.addEventListener("complete", () => {
+            var v;
+            (v = a.current) == null || v.destroy(), a.current = null, C(!1), E(!1), l == null || l();
           });
         } catch {
           return null;
         }
     },
     [l]
-  ), N = d(() => {
-    if (!i || !p) return 0;
-    const n = Date.now(), s = new Date(i).getTime();
-    return p - (n - s) / 1e3;
-  }, [p, i]), T = d(() => {
-    const n = N();
-    V(n);
-  }, [N]), L = d(() => {
+  ), L = f(() => {
+    if (!o || !h) return 0;
+    const n = Date.now(), i = new Date(o).getTime();
+    return h - (n - i) / 1e3;
+  }, [h, o]), T = f(() => {
+    const n = L();
+    P(n);
+  }, [L]), _ = f(() => {
     r.current && (clearInterval(r.current), r.current = null), T(), r.current = setInterval(() => {
       T();
     }, 5e3);
   }, [T]);
-  I(() => {
-    e && g && v(e);
-  }, [e, v, g]), I(() => (e && e === f.FIVE_MIN && L(), () => {
+  $(() => {
+    e && g && N(e);
+  }, [e, N, g]), $(() => (e && e === d.FIVE_MIN && _(), () => {
     r.current && (clearInterval(r.current), r.current = null);
-  }), [e, L]), I(() => (e && (async (s) => {
+  }), [e, _]), $(() => (e && (async (i) => {
     const m = new Audio(
-      `https://static.qumath.in/static/intel-student/cmpress/${s === f.FIFTEEN_MIN ? "15-min-reminder" : "5-min-reminder"}.mp3`
+      `https://static.qumath.in/static/intel-student/cmpress/${i === d.FIFTEEN_MIN ? "15-min-reminder" : "5-min-reminder"}.mp3`
     );
-    a.current = m;
+    s.current = m;
   })(e), () => {
-    a.current = null;
+    s.current = null;
   }), [e]);
-  const W = e === f.FIVE_MIN && C > 0 && c;
-  return /* @__PURE__ */ y(R, { $position: "relative", $width: "100%", $height: "100%", children: [
-    _,
-    c && /* @__PURE__ */ y(
-      H,
+  const W = e === d.FIVE_MIN && A > 0 && c;
+  return /* @__PURE__ */ x(R, { $position: "relative", $width: "100%", $height: "100%", children: [
+    F,
+    c && /* @__PURE__ */ x(
+      q,
       {
         $alignItems: "center",
         $justifyContent: "center",
         $background: "BLACK_T_60",
-        $visible: F,
+        $visible: b,
         children: [
-          /* @__PURE__ */ t(R, { ref: h, $width: 80, $height: 80 }),
+          /* @__PURE__ */ t(R, { ref: p, $width: 80, $height: 80 }),
           e && /* @__PURE__ */ t(
-            K,
+            Y,
             {
-              $visible: k,
+              $visible: V,
               $renderAs: "ac3",
               $color: "WHITE",
               className: "fade-in",
@@ -91,21 +93,21 @@ const J = () => import("../../../../../assets/lotties/trial-v3/5min-clock.json.j
         ]
       }
     ),
-    W && /* @__PURE__ */ t(q, { $width: "100%", children: /* @__PURE__ */ t(X, { value: C, maxValue: 300 }) }),
-    i && c && /* @__PURE__ */ t(
-      Y,
+    W && /* @__PURE__ */ t(z, { $width: "100%", children: /* @__PURE__ */ t(H, { value: A, maxValue: 300 }) }),
+    o && c && /* @__PURE__ */ t(
+      J,
       {
         $background: e === "15min" ? "YELLOW_4" : e === "5min" ? "ORANGE_4" : "GREEN_4",
         $gapX: 0.25,
         $gutterX: 0.5,
         $justifyContent: "center",
-        children: /* @__PURE__ */ t(G, { startTime: i, textRenderAs: "ac3", textColor: "BLACK_T_87" })
+        children: /* @__PURE__ */ t(X, { startTime: o, textRenderAs: "ac3", textColor: "BLACK_T_87" })
       }
     ),
-    E && !c && /* @__PURE__ */ t(z, { $gapX: 0.75, $gutterX: 0.75, $width: "100%", children: /* @__PURE__ */ t(j, { $renderAs: "ac3-black", $color: "WHITE", children: E }) })
+    w && !c && /* @__PURE__ */ t(Q, { $gapX: 0.75, $gutterX: 0.75, $width: "100%", children: /* @__PURE__ */ t(G, { $renderAs: "ac3-black", $color: "WHITE", children: w }) })
   ] });
 });
 export {
-  ce as default
+  me as default
 };
 //# sourceMappingURL=teacher-av-panel.js.map