@cuemath/leap 3.1.41 → 3.1.42

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

@@ -1,80 +1,91 @@
-import { jsxs as j, jsx as t } from "react/jsx-runtime";
-import I from "lottie-web";
-import { memo as X, useRef as a, useState as f, useCallback as W, useEffect as b } from "react";
-import { LOTTIE as M } from "../../../assets/lottie/lottie.js";
-import { useCircleSounds as k } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
-import { CircleSoundKey as h } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
-import { delay as s } from "../../utils/utils.js";
-import { AnimatedPercentTextInput as H } from "./accuracy-comps.js";
-import { Accuracy as K, AccuracyMeterLottie as q, AnimatedAccuracyNeedleContainer as z, AccuracyNeedleLottie as B, TextWrapper as G, PercentTextWrapper as J } from "./accuracy-styled.js";
-import { getAccuracyFramesToPlay as Q } from "./accuracy-utils.js";
-import { NEEDLE_HOLD_TIME as C, METER as O, TEXT_DISAPPEAR_DELAY as V, TEXT_DISAPPEAR_DURATION as Z, TEXT_APPEAR_DURATION as ee, NEEDLE as F, NEEDLE_LOTTIE_FPS as U } from "./constants.js";
-const Ae = X(({ show: u, onComplete: n, accuracy: l, helperText: E }) => {
-  const { play: c } = k(), y = a(null), p = a(null), o = a(void 0), r = a(void 0), [g, w] = f(!0), [m, T] = f(!1), [R, x] = f(!1), $ = a(0), _ = (F.IN_FRAMES[1] - F.IN_FRAMES[0]) / U * 1e3, S = W(async () => {
-    var A;
+import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import x from "lottie-web";
+import { memo as K, useRef as s, useState as T, useCallback as q, useEffect as O } from "react";
+import { LOTTIE as w } from "../../../assets/lottie/lottie.js";
+import { useCircleSounds as z } 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 { delay as d } from "../../utils/utils.js";
+import { AnimatedPercentTextInput as B } from "./accuracy-comps.js";
+import { Accuracy as G, AccuracyMeterLottie as J, AnimatedAccuracyNeedleContainer as Q, AccuracyNeedleLottie as V, TextWrapper as Z, PercentTextWrapper as ee } from "./accuracy-styled.js";
+import { getAccuracyFramesToPlay as te } from "./accuracy-utils.js";
+import { NEEDLE_HOLD_TIME as U, METER as g, TEXT_DISAPPEAR_DELAY as re, TEXT_DISAPPEAR_DURATION as ae, TEXT_APPEAR_DURATION as ne, NEEDLE as v, NEEDLE_LOTTIE_FPS as $ } from "./constants.js";
+const Ee = K(({ show: f, onComplete: u, accuracy: A, helperText: R }) => {
+  const { play: m } = z(), D = s(null), I = s(null), l = s(void 0), a = s(void 0), [Y, j] = T(!0), [p, _] = T(!1), [L, H] = T(!1), X = s(0), n = s([]), P = (v.IN_FRAMES[1] - v.IN_FRAMES[0]) / $ * 1e3, S = q(async () => {
+    var t, o;
     try {
-      await s(C), w(!1), T(!1), c(h.ACCURACY_OUT), (A = o.current) == null || A.playSegments(O.OUT_FRAMES, !0), await s(V), x(!0), n == null || n();
+      const { promise: e, timerId: r } = d(U);
+      n.current.push(r), await e, j(!1), _(!1), m(F.ACCURACY_OUT), (t = l.current) == null || t.playSegments(g.OUT_FRAMES, !0);
+      const { promise: c, timerId: E } = d(re);
+      (o = n.current) == null || o.push(E), await c, H(!0), u == null || u();
     } catch (e) {
       console.log(e);
     }
-  }, [n, c]);
-  return b(() => {
-    if (u)
-      return (async () => {
-        var L;
-        const [e, i] = await Promise.all([
-          fetch(M.ACCURACY_METER),
-          fetch(M.ACCURACY_NEEDLE)
-        ]), [v, Y] = await Promise.all([
-          e.json(),
-          i.json()
-        ]);
-        o.current = I.loadAnimation({
-          container: y.current,
-          animationData: v,
-          autoplay: !1,
-          loop: !1,
-          renderer: "svg"
-        }), r.current = I.loadAnimation({
-          container: p.current,
-          animationData: Y,
-          autoplay: !1,
-          loop: !1,
-          renderer: "svg"
-        }), c(h.ACCURACY_IN), (L = o.current) == null || L.playSegments(O.IN_FRAMES, !0), s(_).then(() => {
-          var D, P, N;
-          const d = Q(l);
-          $.current = d, (D = r.current) == null || D.setSpeed(d / U), (P = r.current) == null || P.playSegments([0, d], !0), T(!0), (N = r.current) == null || N.addEventListener("complete", () => {
-            s(C).then(() => S());
-          });
-        });
-      })(), () => {
-        var e, i;
-        (e = o.current) == null || e.destroy(), (i = r.current) == null || i.destroy();
-      };
-  }, [u, l, _, S, c]), u ? /* @__PURE__ */ j(K, { children: [
-    /* @__PURE__ */ t(q, { ref: y }),
-    g && /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(B, { ref: p }) }),
-    E && /* @__PURE__ */ t(
-      G,
+  }, [u, m]);
+  return O(() => {
+    if (!f)
+      return;
+    const t = async () => {
+      const { promise: e, timerId: r } = d(U);
+      n.current.push(r), await e, S();
+    };
+    return (async () => {
+      var h, N, M, C;
+      const [e, r] = await Promise.all([
+        fetch(w.ACCURACY_METER),
+        fetch(w.ACCURACY_NEEDLE)
+      ]), [c, E] = await Promise.all([
+        e.json(),
+        r.json()
+      ]);
+      l.current = x.loadAnimation({
+        container: D.current,
+        animationData: c,
+        autoplay: !1,
+        loop: !1,
+        renderer: "svg"
+      }), a.current = x.loadAnimation({
+        container: I.current,
+        animationData: E,
+        autoplay: !1,
+        loop: !1,
+        renderer: "svg"
+      }), m(F.ACCURACY_IN), (h = l.current) == null || h.playSegments(g.IN_FRAMES, !0);
+      const { promise: W, timerId: b } = d(P);
+      n.current.push(b), await W;
+      const y = te(A);
+      X.current = y, (N = a.current) == null || N.setSpeed(y / $), (M = a.current) == null || M.playSegments([0, y], !0), _(!0), (C = a.current) == null || C.addEventListener("complete", t);
+    })(), () => {
+      var e, r, c;
+      (e = a.current) == null || e.removeEventListener("complete", t), (r = l.current) == null || r.destroy(), (c = a.current) == null || c.destroy();
+    };
+  }, [f, A, P, S, m]), O(() => {
+    const t = n.current;
+    return () => t == null ? void 0 : t.forEach((o) => {
+      o && clearTimeout(o);
+    });
+  }, [n]), f ? /* @__PURE__ */ k(G, { children: [
+    /* @__PURE__ */ i(J, { ref: D }),
+    Y && /* @__PURE__ */ i(Q, { children: /* @__PURE__ */ i(V, { ref: I }) }),
+    R && /* @__PURE__ */ i(
+      Z,
       {
         $delay: 1e3,
-        $animationType: R ? "fadeout" : "fadein",
-        $duration: R ? Z : ee,
-        children: E
+        $animationType: L ? "fadeout" : "fadein",
+        $duration: L ? ae : ne,
+        children: R
       }
     ),
-    m && /* @__PURE__ */ t(
-      J,
+    p && /* @__PURE__ */ i(
+      ee,
       {
-        $animationType: m ? "fadein" : "fadeout",
+        $animationType: p ? "fadein" : "fadeout",
         $duration: 200,
-        children: /* @__PURE__ */ t(H, { accuracy: Math.round(l), time: 1e3 })
+        children: /* @__PURE__ */ i(B, { accuracy: Math.round(A), time: 1e3 })
       }
     )
   ] }) : null;
 });
 export {
-  Ae as Accuracy
+  Ee as Accuracy
 };
 //# sourceMappingURL=accuracy.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"accuracy.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy.tsx"],"sourcesContent":["import type { IAccuracyProps } from './accuracy-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useEffect, useRef, useState, useCallback } 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 { AnimatedPercentTextInput } from './accuracy-comps';\nimport * as Styled from './accuracy-styled';\nimport { getAccuracyFramesToPlay } from './accuracy-utils';\nimport {\n  METER,\n  NEEDLE,\n  NEEDLE_HOLD_TIME,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n  NEEDLE_LOTTIE_FPS,\n} from './constants';\n\nexport const Accuracy: FC<IAccuracyProps> = memo(({ show, onComplete, accuracy, helperText }) => {\n  const { play } = useCircleSounds();\n  const accuracyMeterRef = useRef<HTMLDivElement>(null);\n  const accuracyNeedleRef = useRef<HTMLDivElement>(null);\n  const accuracyMeterAnimationRef = useRef<AnimationItem>(undefined);\n  const accuracyNeedleAnimationRef = useRef<AnimationItem>(undefined);\n\n  const [showAccuracy, setShowAccuracy] = useState(true);\n  const [showPercent, setShowPercent] = useState(false);\n  const [fadeOut, setFadeOut] = useState(false);\n  const needleFramesToPlay = useRef(0);\n\n  const percentStartAnimationDelayInMs =\n    ((NEEDLE.IN_FRAMES[1] - NEEDLE.IN_FRAMES[0]) / NEEDLE_LOTTIE_FPS) * 1000;\n\n  const playExitAnimation = useCallback(async () => {\n    try {\n      await delay(NEEDLE_HOLD_TIME);\n      setShowAccuracy(false);\n      setShowPercent(false);\n      play(CircleSoundKey.ACCURACY_OUT);\n      accuracyMeterAnimationRef.current?.playSegments(METER.OUT_FRAMES, true);\n      await delay(TEXT_DISAPPEAR_DELAY);\n      setFadeOut(true);\n      onComplete?.();\n    } catch (err) {\n      /* eslint-disable no-console */\n      console.log(err);\n    }\n  }, [onComplete, play]);\n\n  useEffect(() => {\n    if (show) {\n      const loadAnimations = async () => {\n        const [meterLottie, needleLottie] = await Promise.all([\n          fetch(LOTTIE.ACCURACY_METER),\n          fetch(LOTTIE.ACCURACY_NEEDLE),\n        ]);\n        const [meterLottieData, needleLottieData] = await Promise.all([\n          meterLottie.json(),\n          needleLottie.json(),\n        ]);\n\n        accuracyMeterAnimationRef.current = Lottie.loadAnimation({\n          container: accuracyMeterRef.current as Element,\n          animationData: meterLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'svg',\n        });\n\n        accuracyNeedleAnimationRef.current = Lottie.loadAnimation({\n          container: accuracyNeedleRef.current as Element,\n          animationData: needleLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'svg',\n        });\n\n        play(CircleSoundKey.ACCURACY_IN);\n        accuracyMeterAnimationRef.current?.playSegments(METER.IN_FRAMES, true);\n\n        delay(percentStartAnimationDelayInMs).then(() => {\n          const frames = getAccuracyFramesToPlay(accuracy);\n\n          needleFramesToPlay.current = frames;\n          accuracyNeedleAnimationRef.current?.setSpeed(frames / NEEDLE_LOTTIE_FPS);\n          accuracyNeedleAnimationRef.current?.playSegments([0, frames], true);\n          setShowPercent(true);\n\n          accuracyNeedleAnimationRef.current?.addEventListener('complete', () => {\n            delay(NEEDLE_HOLD_TIME).then(() => playExitAnimation());\n          });\n        });\n      };\n\n      loadAnimations();\n\n      return () => {\n        accuracyMeterAnimationRef.current?.destroy();\n        accuracyNeedleAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, accuracy, percentStartAnimationDelayInMs, playExitAnimation, play]);\n\n  if (show) {\n    return (\n      <Styled.Accuracy>\n        <Styled.AccuracyMeterLottie ref={accuracyMeterRef} />\n        {showAccuracy && (\n          <Styled.AnimatedAccuracyNeedleContainer>\n            <Styled.AccuracyNeedleLottie ref={accuracyNeedleRef} />\n          </Styled.AnimatedAccuracyNeedleContainer>\n        )}\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={1000}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n        {showPercent && (\n          <Styled.PercentTextWrapper\n            $animationType={showPercent ? 'fadein' : 'fadeout'}\n            $duration={showPercent ? 200 : 200}\n          >\n            <AnimatedPercentTextInput accuracy={Math.round(accuracy)} time={1000} />\n          </Styled.PercentTextWrapper>\n        )}\n      </Styled.Accuracy>\n    );\n  }\n\n  return null;\n});\n"],"names":["Accuracy","memo","show","onComplete","accuracy","helperText","play","useCircleSounds","accuracyMeterRef","useRef","accuracyNeedleRef","accuracyMeterAnimationRef","accuracyNeedleAnimationRef","showAccuracy","setShowAccuracy","useState","showPercent","setShowPercent","fadeOut","setFadeOut","needleFramesToPlay","percentStartAnimationDelayInMs","NEEDLE","NEEDLE_LOTTIE_FPS","playExitAnimation","useCallback","delay","NEEDLE_HOLD_TIME","CircleSoundKey","_a","METER","TEXT_DISAPPEAR_DELAY","err","useEffect","meterLottie","needleLottie","LOTTIE","meterLottieData","needleLottieData","Lottie","frames","getAccuracyFramesToPlay","_b","_c","jsxs","Styled.Accuracy","jsx","Styled.AccuracyMeterLottie","Styled.AnimatedAccuracyNeedleContainer","Styled.AccuracyNeedleLottie","Styled.TextWrapper","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION","Styled.PercentTextWrapper","AnimatedPercentTextInput"],"mappings":"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"}
+{"version":3,"file":"accuracy.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy.tsx"],"sourcesContent":["import type { IAccuracyProps } from './accuracy-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useEffect, useRef, useState, useCallback } 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 { AnimatedPercentTextInput } from './accuracy-comps';\nimport * as Styled from './accuracy-styled';\nimport { getAccuracyFramesToPlay } from './accuracy-utils';\nimport {\n  METER,\n  NEEDLE,\n  NEEDLE_HOLD_TIME,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n  NEEDLE_LOTTIE_FPS,\n} from './constants';\n\nexport const Accuracy: FC<IAccuracyProps> = memo(({ show, onComplete, accuracy, helperText }) => {\n  const { play } = useCircleSounds();\n  const accuracyMeterRef = useRef<HTMLDivElement>(null);\n  const accuracyNeedleRef = useRef<HTMLDivElement>(null);\n  const accuracyMeterAnimationRef = useRef<AnimationItem>(undefined);\n  const accuracyNeedleAnimationRef = useRef<AnimationItem>(undefined);\n\n  const [showAccuracy, setShowAccuracy] = useState(true);\n  const [showPercent, setShowPercent] = useState(false);\n  const [fadeOut, setFadeOut] = useState(false);\n  const needleFramesToPlay = useRef(0);\n\n  const timerIdsRef = useRef<(ReturnType<typeof setTimeout> | null)[]>([]);\n\n  const percentStartAnimationDelayInMs =\n    ((NEEDLE.IN_FRAMES[1] - NEEDLE.IN_FRAMES[0]) / NEEDLE_LOTTIE_FPS) * 1000;\n\n  const playExitAnimation = useCallback(async () => {\n    try {\n      const { promise: needleHoldPromise, timerId: needleHoldTimeId } = delay(NEEDLE_HOLD_TIME);\n\n      timerIdsRef.current.push(needleHoldTimeId);\n\n      await needleHoldPromise;\n      setShowAccuracy(false);\n      setShowPercent(false);\n      play(CircleSoundKey.ACCURACY_OUT);\n      accuracyMeterAnimationRef.current?.playSegments(METER.OUT_FRAMES, true);\n\n      const { promise: textDisappearDelayPromise, timerId: textDisappearDelayId } =\n        delay(TEXT_DISAPPEAR_DELAY);\n\n      timerIdsRef.current?.push(textDisappearDelayId);\n\n      await textDisappearDelayPromise;\n      setFadeOut(true);\n      onComplete?.();\n    } catch (err) {\n      /* eslint-disable no-console */\n      console.log(err);\n    }\n  }, [onComplete, play]);\n\n  useEffect(() => {\n    if (!show) {\n      return;\n    }\n\n    const handleExitAnimation = async () => {\n      const { promise, timerId } = delay(NEEDLE_HOLD_TIME);\n\n      timerIdsRef.current.push(timerId);\n\n      await promise;\n      playExitAnimation();\n    };\n\n    const loadAnimations = async () => {\n      const [meterLottie, needleLottie] = await Promise.all([\n        fetch(LOTTIE.ACCURACY_METER),\n        fetch(LOTTIE.ACCURACY_NEEDLE),\n      ]);\n      const [meterLottieData, needleLottieData] = await Promise.all([\n        meterLottie.json(),\n        needleLottie.json(),\n      ]);\n\n      accuracyMeterAnimationRef.current = Lottie.loadAnimation({\n        container: accuracyMeterRef.current as Element,\n        animationData: meterLottieData,\n        autoplay: false,\n        loop: false,\n        renderer: 'svg',\n      });\n\n      accuracyNeedleAnimationRef.current = Lottie.loadAnimation({\n        container: accuracyNeedleRef.current as Element,\n        animationData: needleLottieData,\n        autoplay: false,\n        loop: false,\n        renderer: 'svg',\n      });\n\n      play(CircleSoundKey.ACCURACY_IN);\n      accuracyMeterAnimationRef.current?.playSegments(METER.IN_FRAMES, true);\n\n      const { promise, timerId } = delay(percentStartAnimationDelayInMs);\n\n      timerIdsRef.current.push(timerId);\n\n      await promise;\n\n      const frames = getAccuracyFramesToPlay(accuracy);\n\n      needleFramesToPlay.current = frames;\n      accuracyNeedleAnimationRef.current?.setSpeed(frames / NEEDLE_LOTTIE_FPS);\n      accuracyNeedleAnimationRef.current?.playSegments([0, frames], true);\n      setShowPercent(true);\n\n      accuracyNeedleAnimationRef.current?.addEventListener('complete', handleExitAnimation);\n    };\n\n    loadAnimations();\n\n    return () => {\n      accuracyNeedleAnimationRef.current?.removeEventListener('complete', handleExitAnimation);\n      accuracyMeterAnimationRef.current?.destroy();\n      accuracyNeedleAnimationRef.current?.destroy();\n    };\n  }, [show, accuracy, percentStartAnimationDelayInMs, playExitAnimation, play]);\n\n  useEffect(() => {\n    const timerIds = timerIdsRef.current;\n\n    return () =>\n      timerIds?.forEach(timerId => {\n        if (timerId) {\n          clearTimeout(timerId);\n        }\n      });\n  }, [timerIdsRef]);\n\n  if (!show) {\n    return null;\n  }\n\n  return (\n    <Styled.Accuracy>\n      <Styled.AccuracyMeterLottie ref={accuracyMeterRef} />\n      {showAccuracy && (\n        <Styled.AnimatedAccuracyNeedleContainer>\n          <Styled.AccuracyNeedleLottie ref={accuracyNeedleRef} />\n        </Styled.AnimatedAccuracyNeedleContainer>\n      )}\n      {helperText && (\n        <Styled.TextWrapper\n          $delay={1000}\n          $animationType={fadeOut ? 'fadeout' : 'fadein'}\n          $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n        >\n          {helperText}\n        </Styled.TextWrapper>\n      )}\n      {showPercent && (\n        <Styled.PercentTextWrapper\n          $animationType={showPercent ? 'fadein' : 'fadeout'}\n          $duration={showPercent ? 200 : 200}\n        >\n          <AnimatedPercentTextInput accuracy={Math.round(accuracy)} time={1000} />\n        </Styled.PercentTextWrapper>\n      )}\n    </Styled.Accuracy>\n  );\n});\n"],"names":["Accuracy","memo","show","onComplete","accuracy","helperText","play","useCircleSounds","accuracyMeterRef","useRef","accuracyNeedleRef","accuracyMeterAnimationRef","accuracyNeedleAnimationRef","showAccuracy","setShowAccuracy","useState","showPercent","setShowPercent","fadeOut","setFadeOut","needleFramesToPlay","timerIdsRef","percentStartAnimationDelayInMs","NEEDLE","NEEDLE_LOTTIE_FPS","playExitAnimation","useCallback","needleHoldPromise","needleHoldTimeId","delay","NEEDLE_HOLD_TIME","CircleSoundKey","_a","METER","textDisappearDelayPromise","textDisappearDelayId","TEXT_DISAPPEAR_DELAY","_b","err","useEffect","handleExitAnimation","promise","timerId","meterLottie","needleLottie","LOTTIE","meterLottieData","needleLottieData","Lottie","frames","getAccuracyFramesToPlay","_c","_d","timerIds","jsxs","Styled.Accuracy","jsx","Styled.AccuracyMeterLottie","Styled.AnimatedAccuracyNeedleContainer","Styled.AccuracyNeedleLottie","Styled.TextWrapper","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION","Styled.PercentTextWrapper","AnimatedPercentTextInput"],"mappings":"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"}

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

@@ -1,75 +1,98 @@
-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 v, 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(), [d, N] = h(!1), m = o(!1), l = o(0), L = o(null), E = o(null), a = o(void 0), n = o(void 0), _ = T(() => {
-    var t, e;
-    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 () => {
+import { jsxs as j, jsx as A } from "react/jsx-runtime";
+import h from "lottie-web";
+import { memo as H, useState as U, useRef as a, useCallback as m, useEffect as N } from "react";
+import { LOTTIE as F } from "../../../assets/lottie/lottie.js";
+import { useCircleSounds as $ } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
+import { CircleSoundKey as M } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
+import { delay as x } from "../../utils/utils.js";
+import { Clock as w, ClockLottie as X, ClockTimeSpentLottie as Y, TextWrapper as W } from "./clock-styled.js";
+import { getClockTimeSpentFramesToPlay as b } from "./clock-util.js";
+import { CLOCK_TIME_SPENT_FPS as q, CLOCK as K, CLOCK_INFRAME_LOTTIE_TO_PLAY as z, TIME_LOTTIE_TO_PLAY_IN as B, TEXT_DISAPPEAR_DURATION as G, TEXT_APPEAR_DURATION as J, TIME_SHOWN_HOLD_TIME as Q, TEXT_DISAPPEAR_DELAY as V } from "./constants.js";
+const me = H(({ show: T, onComplete: l, timeInMs: _, helperText: C }) => {
+  const { play: u } = $(), [O, g] = U(!1), f = a(!1), d = a(0), y = a(null), I = a(null), c = a(void 0), n = a(void 0), p = a([]), E = m(() => {
     var r, t;
-    await D(B), (r = n.current) == null || r.playSegments([l.current, 0], !0), await D(G), N(!0), m.current && ((t = n.current) == null || t.addEventListener("complete", () => {
-      var e;
-      c(R.CLOCK_OUT), (e = a.current) == null || e.playSegments(v.OUT_FRAMES, !0);
-    }));
-  }, [l, c]), A = T(() => {
-    i == null || i();
-  }, [i]);
-  return j(() => {
-    if (s)
-      return (async () => {
-        var O, C, y;
-        const [t, e] = await Promise.all([
-          fetch(k.TOTAL_TIME),
-          fetch(k.TOTAL_TIME_SPENT)
-        ]), [F, M] = await Promise.all([
-          t.json(),
-          e.json()
-        ]);
-        a.current = I.loadAnimation({
-          container: L.current,
-          animationData: F,
-          autoplay: !1,
-          loop: !1,
-          renderer: "canvas"
-        }), n.current = I.loadAnimation({
-          container: E.current,
-          animationData: M,
-          autoplay: !1,
-          loop: !1,
-          renderer: "canvas"
-        }), c(R.CLOCK_IN), (O = a.current) == null || O.playSegments(v.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"), S();
-        });
-      })(), () => {
-        var t, e;
-        (t = a.current) == null || t.destroy(), (e = n.current) == null || e.destroy();
-      };
-  }, [s, _, A, S, c]), s ? /* @__PURE__ */ K(U, { children: [
-    /* @__PURE__ */ u($, { ref: L }),
-    /* @__PURE__ */ u(w, { ref: E }),
-    p && /* @__PURE__ */ u(
-      X,
+    const e = b(_);
+    e && (d.current = e, (r = n.current) == null || r.setSpeed(e / q), (t = n.current) == null || t.playSegments([0, e], !0), f.current = !0);
+  }, [_]), P = m(() => {
+    var e;
+    u(M.CLOCK_OUT), (e = c.current) == null || e.playSegments(K.OUT_FRAMES, !0);
+  }, [u]), k = m(async () => {
+    var o, i;
+    const { promise: e, timerId: r } = x(Q);
+    p.current.push(r), await e, (o = n.current) == null || o.playSegments([d.current, 0], !0);
+    const { promise: t, timerId: s } = x(V);
+    p.current.push(s), await t, g(!0), f.current && ((i = n.current) == null || i.addEventListener("complete", P));
+  }, [d, P]), L = m(() => {
+    l == null || l();
+  }, [l]), S = m(() => {
+    f.current ? L() : E();
+  }, [L, E]);
+  return N(() => {
+    if (!T)
+      return;
+    const e = () => {
+      var t;
+      (t = n.current) == null || t.removeEventListener("complete"), k();
+    };
+    return (async () => {
+      var D, R, v;
+      const [t, s] = await Promise.all([
+        fetch(F.TOTAL_TIME),
+        fetch(F.TOTAL_TIME_SPENT)
+      ]), [o, i] = await Promise.all([
+        t.json(),
+        s.json()
+      ]);
+      c.current = h.loadAnimation({
+        container: y.current,
+        animationData: o,
+        autoplay: !1,
+        loop: !1,
+        renderer: "canvas"
+      }), n.current = h.loadAnimation({
+        container: I.current,
+        animationData: i,
+        autoplay: !1,
+        loop: !1,
+        renderer: "canvas"
+      }), (D = n.current) == null || D.addEventListener(
+        "complete",
+        e
+      ), u(M.CLOCK_IN), (R = c.current) == null || R.playSegments(K.IN_FRAMES, !0), (v = c.current) == null || v.addEventListener("complete", S);
+    })(), () => {
+      var t, s, o, i;
+      (t = c.current) == null || t.removeEventListener("complete", S), (s = n.current) == null || s.removeEventListener(
+        "complete",
+        e
+      ), (o = n.current) == null || o.destroy(), (i = c.current) == null || i.destroy();
+    };
+  }, [
+    T,
+    E,
+    L,
+    k,
+    u,
+    S
+  ]), N(() => {
+    const e = p.current;
+    return () => e == null ? void 0 : e.forEach((r) => {
+      r && clearTimeout(r);
+    });
+  }, [p]), T ? /* @__PURE__ */ j(w, { children: [
+    /* @__PURE__ */ A(X, { ref: y }),
+    /* @__PURE__ */ A(Y, { ref: I }),
+    C && /* @__PURE__ */ A(
+      W,
       {
-        $delay: W + b,
-        $animationType: d ? "fadeout" : "fadein",
-        $duration: d ? q : z,
-        children: p
+        $delay: z + B,
+        $animationType: O ? "fadeout" : "fadein",
+        $duration: O ? G : J,
+        children: C
       }
     )
   ] }) : null;
 });
 export {
-  it as Clock
+  me 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 { 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>(undefined);\n  const clockTimeSpentLottieAnimationRef = useRef<AnimationItem>(undefined);\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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"}
+{"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>(undefined);\n  const clockTimeSpentLottieAnimationRef = useRef<AnimationItem>(undefined);\n\n  const timerIdsRef = useRef<(ReturnType<typeof setTimeout> | null)[]>([]);\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 handleAniamtionExit = useCallback(() => {\n    play(CircleSoundKey.CLOCK_OUT);\n    clockLottieAnimationRef.current?.playSegments(CLOCK.OUT_FRAMES, true);\n  }, [play]);\n\n  const onClockTimeSpentExitAnimationFinished = useCallback(async () => {\n    const { promise: clockTimeSpentHoldPromise, timerId: clockTimeSpentHoldTimeId } =\n      delay(TIME_SHOWN_HOLD_TIME);\n\n    timerIdsRef.current.push(clockTimeSpentHoldTimeId);\n    await clockTimeSpentHoldPromise;\n\n    // Reverse play time spent animation\n    clockTimeSpentLottieAnimationRef.current?.playSegments([framesToPlay.current, 0], true);\n\n    const { promise: textDisappearDelayPromise, timerId: textDisappearDelayId } =\n      delay(TEXT_DISAPPEAR_DELAY);\n\n    timerIdsRef.current.push(textDisappearDelayId);\n    await textDisappearDelayPromise;\n    setFadeOut(true);\n\n    if (isClockTimeSpentShown.current) {\n      clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', handleAniamtionExit);\n    }\n  }, [framesToPlay, handleAniamtionExit]);\n\n  const onAnimationEnd = useCallback(() => {\n    onComplete?.();\n  }, [onComplete]);\n\n  const handleTimeSpentAnimation = useCallback(() => {\n    if (!isClockTimeSpentShown.current) {\n      setClockTimeSpentFrames();\n    } else {\n      onAnimationEnd();\n    }\n  }, [onAnimationEnd, setClockTimeSpentFrames]);\n\n  // Play entry animation\n  useEffect(() => {\n    if (!show) {\n      return;\n    }\n\n    const handleTimeSpentAnimationComplete = () => {\n      clockTimeSpentLottieAnimationRef.current?.removeEventListener('complete');\n      onClockTimeSpentExitAnimationFinished();\n    };\n\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      // Setup event listener for time spent animation\n      clockTimeSpentLottieAnimationRef.current?.addEventListener(\n        'complete',\n        handleTimeSpentAnimationComplete,\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', handleTimeSpentAnimation);\n    };\n\n    loadAnimations();\n\n    return () => {\n      clockLottieAnimationRef.current?.removeEventListener('complete', handleTimeSpentAnimation);\n      clockTimeSpentLottieAnimationRef.current?.removeEventListener(\n        'complete',\n        handleTimeSpentAnimationComplete,\n      );\n      clockTimeSpentLottieAnimationRef.current?.destroy();\n      clockLottieAnimationRef.current?.destroy();\n    };\n  }, [\n    show,\n    setClockTimeSpentFrames,\n    onAnimationEnd,\n    onClockTimeSpentExitAnimationFinished,\n    play,\n    handleTimeSpentAnimation,\n  ]);\n\n  useEffect(() => {\n    const timerIds = timerIdsRef.current;\n\n    return () =>\n      timerIds?.forEach(timerId => {\n        if (timerId) {\n          clearTimeout(timerId);\n        }\n      });\n  }, [timerIdsRef]);\n\n  if (!show) {\n    return null;\n  }\n\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"],"names":["Clock","memo","show","onComplete","timeInMs","helperText","play","useCircleSounds","fadeOut","setFadeOut","useState","isClockTimeSpentShown","useRef","framesToPlay","clockLottieContainerRef","clockTimeSpentLottieContainerRef","clockLottieAnimationRef","clockTimeSpentLottieAnimationRef","timerIdsRef","setClockTimeSpentFrames","useCallback","frames","getClockTimeSpentFramesToPlay","_a","CLOCK_TIME_SPENT_FPS","_b","handleAniamtionExit","CircleSoundKey","CLOCK","onClockTimeSpentExitAnimationFinished","clockTimeSpentHoldPromise","clockTimeSpentHoldTimeId","delay","TIME_SHOWN_HOLD_TIME","textDisappearDelayPromise","textDisappearDelayId","TEXT_DISAPPEAR_DELAY","onAnimationEnd","handleTimeSpentAnimation","useEffect","handleTimeSpentAnimationComplete","timeLottiePath","timeSpentLottiePath","LOTTIE","timeLottieData","timeSpentLottieData","Lottie","_c","_d","timerIds","timerId","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/score/score.js

@@ -1,79 +1,85 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { memo as q, useState as l, useRef as A, useCallback as w, useMemo as H, useEffect as W } from "react";
-import { LOTTIE as R } from "../../../assets/lottie/lottie.js";
-import { useCircleSounds as j } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
-import { CircleSoundKey as C } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
-import g from "../../ui/lottie-animation/lottie-animation.js";
-import v from "../../ui/text/text.js";
-import { delay as X } from "../../utils/utils.js";
-import { SCORE_DISAPPEAR_ANIMATION_DURATION_HIGH_SCORE as y, SCORE_APPEAR_ANIMATION_DURATION as N, SCORE_DISAPPEAR_ANIMATION_DURATION_YOUR_SCORE as Y } from "./constants.js";
-import { HighScore as B, HighScoreConfetti as K, HighScoreValueWrapper as Q, ScoreText as V, HighScoreTextAnimation as z } from "./score-styled.js";
-const J = {
+import { jsx as o, jsxs as H } from "react/jsx-runtime";
+import { memo as W, useState as f, useRef as S, useCallback as j, useMemo as C, useEffect as g } from "react";
+import { LOTTIE as y } from "../../../assets/lottie/lottie.js";
+import { useCircleSounds as v } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
+import { CircleSoundKey as N } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
+import x from "../../ui/lottie-animation/lottie-animation.js";
+import X from "../../ui/text/text.js";
+import { delay as Y } from "../../utils/utils.js";
+import { SCORE_DISAPPEAR_ANIMATION_DURATION_HIGH_SCORE as F, SCORE_APPEAR_ANIMATION_DURATION as G, SCORE_DISAPPEAR_ANIMATION_DURATION_YOUR_SCORE as B } from "./constants.js";
+import { HighScore as K, HighScoreConfetti as Q, HighScoreValueWrapper as V, ScoreText as z, HighScoreTextAnimation as J } from "./score-styled.js";
+const Z = {
   autoplay: !0,
   loop: !1,
   renderer: "canvas"
-}, Z = {
+}, ee = {
   autoplay: !1,
   loop: !1,
   renderer: "canvas"
-}, ue = q((x) => {
-  const { currentScore: t, highScore: F, show: i, onComplete: o } = x, { play: u } = j(), r = t > F, [G, S] = l(0), [f, D] = l(!1), [M, T] = l(!1), m = A(null), h = A(null), E = w(() => {
-    D(!0), T(!1), o == null || o();
-  }, [o]), L = H(
-    () => /* @__PURE__ */ e(
-      g,
+}, fe = W((D) => {
+  const { currentScore: i, highScore: M, show: c, onComplete: s } = D, { play: m } = v(), n = i > M, [L, T] = f(0), [h, P] = f(!1), [U, E] = f(!1), p = S(null), _ = S(null), a = S([]), I = j(() => {
+    P(!0), E(!1), s == null || s();
+  }, [s]), $ = C(
+    () => /* @__PURE__ */ o(
+      x,
       {
-        ref: m,
-        src: R.HIGH_SCORE_CONFETTI,
-        settings: Z
+        ref: p,
+        src: y.HIGH_SCORE_CONFETTI,
+        settings: ee
       }
     ),
     []
-  ), P = H(
-    () => /* @__PURE__ */ e(
-      g,
+  ), b = C(
+    () => /* @__PURE__ */ o(
+      x,
       {
-        ref: h,
-        src: R.HIGH_SCORE_TEXT,
-        settings: J
+        ref: _,
+        src: y.HIGH_SCORE_TEXT,
+        settings: Z
       }
     ),
     []
   );
-  return W(() => {
-    var I;
-    if (!i) return;
-    let s, a = null, _ = !1;
-    const U = (n) => 1 - Math.pow(1 - n, 2);
-    r && (T(!0), (I = h.current) == null || I.play());
-    const p = (n) => {
-      var O;
-      a === null && (a = n);
-      const b = n - a, c = Math.min(b / N, 1), k = U(c);
-      S(Math.floor(k * t)), c < 1 ? s = requestAnimationFrame(p) : (S(t), $()), !_ && c >= 0.9 && r && ((O = m.current) == null || O.play(), u(r ? C.HIGH_SCORE : C.YOUR_SCORE), _ = !0);
-    }, $ = async () => {
-      await X(
-        r ? y : Y
-      ), E();
+  return g(() => {
+    var R;
+    if (!c) return;
+    let e, r = null, O = !1;
+    const k = (t) => 1 - Math.pow(1 - t, 2);
+    n && (E(!0), (R = _.current) == null || R.play());
+    const d = (t) => {
+      var A;
+      r === null && (r = t);
+      const l = t - r, u = Math.min(l / G, 1), w = k(u);
+      T(Math.floor(w * i)), u < 1 ? e = requestAnimationFrame(d) : (T(i), q()), !O && u >= 0.9 && n && ((A = p.current) == null || A.play(), m(n ? N.HIGH_SCORE : N.YOUR_SCORE), O = !0);
+    }, q = async () => {
+      const { promise: t, timerId: l } = Y(
+        n ? F : B
+      );
+      a.current.push(l), await t, I();
     };
-    return s = requestAnimationFrame(p), () => cancelAnimationFrame(s);
-  }, [t, i, E, r, u]), i ? /* @__PURE__ */ d(B, { children: [
-    /* @__PURE__ */ e(K, { children: L }),
-    /* @__PURE__ */ d(
-      Q,
+    return e = requestAnimationFrame(d), () => cancelAnimationFrame(e);
+  }, [i, c, I, n, m]), g(() => {
+    const e = a.current;
+    return () => e == null ? void 0 : e.forEach((r) => {
+      r && clearTimeout(r);
+    });
+  }, [a]), c ? /* @__PURE__ */ H(K, { children: [
+    /* @__PURE__ */ o(Q, { children: $ }),
+    /* @__PURE__ */ H(
+      V,
       {
-        $animationType: f ? "fadeout" : "fadein",
-        $duration: f ? y : N,
+        $animationType: h ? "fadeout" : "fadein",
+        $duration: h ? F : G,
         children: [
-          /* @__PURE__ */ e(v, { $renderAs: "ah2", $color: "WHITE", children: G }),
-          /* @__PURE__ */ e(V, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: "SCORE" })
+          /* @__PURE__ */ o(X, { $renderAs: "ah2", $color: "WHITE", children: L }),
+          /* @__PURE__ */ o(z, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: "SCORE" })
         ]
       }
     ),
-    /* @__PURE__ */ e(z, { opacity: M ? 1 : 0, children: P })
+    /* @__PURE__ */ o(J, { opacity: U ? 1 : 0, children: b })
   ] }) : null;
 });
 export {
-  ue as Score
+  fe as Score
 };
 //# sourceMappingURL=score.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"score.js","sources":["../../../../src/features/post-game-stats/score/score.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\nimport type { IHighScoreProps } from './score-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, 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 LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Text from '../../ui/text/text';\nimport { delay } from '../../utils/utils';\nimport {\n  SCORE_APPEAR_ANIMATION_DURATION,\n  SCORE_DISAPPEAR_ANIMATION_DURATION_HIGH_SCORE,\n  SCORE_DISAPPEAR_ANIMATION_DURATION_YOUR_SCORE,\n} from './constants';\nimport * as Styled from './score-styled';\n\nconst HIGH_SCORE_TEXT_LOTTIE_SETTINGS = {\n  autoplay: true,\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst HIGH_SCORE_CONFETTI_LOTTIE_SETTINGS = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nexport const Score: FC<IHighScoreProps> = memo(props => {\n  const { currentScore, highScore, show, onComplete } = props;\n\n  const { play } = useCircleSounds();\n\n  const hasUserBrokenCurrentHighScore = currentScore > highScore;\n\n  const [displayScore, setDisplayScore] = useState(0);\n  const [fadeOut, setFadeout] = useState(false);\n  const [displayHighScoreTxt, setDisplayHighScoreText] = useState(false);\n\n  const highScoreConfettiRef = useRef<ILottieAnimationRef>(null);\n  const highScoreTextRef = useRef<ILottieAnimationRef>(null);\n\n  const onEndAnimationFinished = useCallback(() => {\n    setFadeout(true);\n    setDisplayHighScoreText(false);\n    onComplete?.();\n  }, [onComplete]);\n\n  const HighScoreConfettiLottie = useMemo(\n    () => (\n      <LottieAnimation\n        ref={highScoreConfettiRef}\n        src={LOTTIE.HIGH_SCORE_CONFETTI}\n        settings={HIGH_SCORE_CONFETTI_LOTTIE_SETTINGS}\n      />\n    ),\n    [],\n  );\n\n  const HighScoreTextLottie = useMemo(\n    () => (\n      <LottieAnimation\n        ref={highScoreTextRef}\n        src={LOTTIE.HIGH_SCORE_TEXT}\n        settings={HIGH_SCORE_TEXT_LOTTIE_SETTINGS}\n      />\n    ),\n    [],\n  );\n\n  // Animate the score from 0 to the current score\n  useEffect(() => {\n    if (!show) return;\n\n    let animationFrameId: number;\n    let startTime: number | null = null;\n    let hasCrossedFirstQuater = false; // 🔸 Flag to track 50% trigger\n\n    const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 2);\n\n    if (hasUserBrokenCurrentHighScore) {\n      setDisplayHighScoreText(true);\n      highScoreTextRef.current?.play();\n    }\n\n    const animate = (timestamp: number) => {\n      if (startTime === null) startTime = timestamp;\n\n      const elapsed = timestamp - startTime;\n      const progress = Math.min(elapsed / SCORE_APPEAR_ANIMATION_DURATION, 1);\n      const eased = easeOutCubic(progress);\n\n      setDisplayScore(Math.floor(eased * currentScore));\n\n      if (progress < 1) {\n        animationFrameId = requestAnimationFrame(animate);\n      } else {\n        setDisplayScore(currentScore);\n        runExitSequence();\n      }\n\n      if (!hasCrossedFirstQuater && progress >= 0.9 && hasUserBrokenCurrentHighScore) {\n        highScoreConfettiRef.current?.play();\n        play(hasUserBrokenCurrentHighScore ? CircleSoundKey.HIGH_SCORE : CircleSoundKey.YOUR_SCORE);\n        hasCrossedFirstQuater = true;\n      }\n    };\n\n    // ✅ Async function outside animate()\n    const runExitSequence = async () => {\n      await delay(\n        hasUserBrokenCurrentHighScore\n          ? SCORE_DISAPPEAR_ANIMATION_DURATION_HIGH_SCORE\n          : SCORE_DISAPPEAR_ANIMATION_DURATION_YOUR_SCORE,\n      );\n      onEndAnimationFinished();\n    };\n\n    animationFrameId = requestAnimationFrame(animate);\n\n    return () => cancelAnimationFrame(animationFrameId);\n  }, [currentScore, show, onEndAnimationFinished, hasUserBrokenCurrentHighScore, play]);\n  if (!show) return null;\n\n  return (\n    <Styled.HighScore>\n      <Styled.HighScoreConfetti>{HighScoreConfettiLottie}</Styled.HighScoreConfetti>\n\n      <Styled.HighScoreValueWrapper\n        $animationType={fadeOut ? 'fadeout' : 'fadein'}\n        $duration={\n          fadeOut ? SCORE_DISAPPEAR_ANIMATION_DURATION_HIGH_SCORE : SCORE_APPEAR_ANIMATION_DURATION\n        }\n      >\n        <Text $renderAs=\"ah2\" $color=\"WHITE\">\n          {displayScore}\n        </Text>\n        <Styled.ScoreText $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n          SCORE\n        </Styled.ScoreText>\n      </Styled.HighScoreValueWrapper>\n\n      <Styled.HighScoreTextAnimation opacity={displayHighScoreTxt ? 1 : 0}>\n        {HighScoreTextLottie}\n      </Styled.HighScoreTextAnimation>\n    </Styled.HighScore>\n  );\n});\n"],"names":["HIGH_SCORE_TEXT_LOTTIE_SETTINGS","HIGH_SCORE_CONFETTI_LOTTIE_SETTINGS","Score","memo","props","currentScore","highScore","show","onComplete","play","useCircleSounds","hasUserBrokenCurrentHighScore","displayScore","setDisplayScore","useState","fadeOut","setFadeout","displayHighScoreTxt","setDisplayHighScoreText","highScoreConfettiRef","useRef","highScoreTextRef","onEndAnimationFinished","useCallback","HighScoreConfettiLottie","useMemo","jsx","LottieAnimation","LOTTIE","HighScoreTextLottie","useEffect","animationFrameId","startTime","hasCrossedFirstQuater","easeOutCubic","t","_a","animate","timestamp","elapsed","progress","SCORE_APPEAR_ANIMATION_DURATION","eased","runExitSequence","CircleSoundKey","delay","SCORE_DISAPPEAR_ANIMATION_DURATION_HIGH_SCORE","SCORE_DISAPPEAR_ANIMATION_DURATION_YOUR_SCORE","jsxs","Styled.HighScore","Styled.HighScoreConfetti","Styled.HighScoreValueWrapper","Text","Styled.ScoreText","Styled.HighScoreTextAnimation"],"mappings":"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"}
+{"version":3,"file":"score.js","sources":["../../../../src/features/post-game-stats/score/score.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\nimport type { IHighScoreProps } from './score-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, 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 LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Text from '../../ui/text/text';\nimport { delay } from '../../utils/utils';\nimport {\n  SCORE_APPEAR_ANIMATION_DURATION,\n  SCORE_DISAPPEAR_ANIMATION_DURATION_HIGH_SCORE,\n  SCORE_DISAPPEAR_ANIMATION_DURATION_YOUR_SCORE,\n} from './constants';\nimport * as Styled from './score-styled';\n\nconst HIGH_SCORE_TEXT_LOTTIE_SETTINGS = {\n  autoplay: true,\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst HIGH_SCORE_CONFETTI_LOTTIE_SETTINGS = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nexport const Score: FC<IHighScoreProps> = memo(props => {\n  const { currentScore, highScore, show, onComplete } = props;\n\n  const { play } = useCircleSounds();\n\n  const hasUserBrokenCurrentHighScore = currentScore > highScore;\n\n  const [displayScore, setDisplayScore] = useState(0);\n  const [fadeOut, setFadeout] = useState(false);\n  const [displayHighScoreTxt, setDisplayHighScoreText] = useState(false);\n\n  const highScoreConfettiRef = useRef<ILottieAnimationRef>(null);\n  const highScoreTextRef = useRef<ILottieAnimationRef>(null);\n\n  const timerIdsRef = useRef<(ReturnType<typeof setTimeout> | null)[]>([]);\n\n  const onEndAnimationFinished = useCallback(() => {\n    setFadeout(true);\n    setDisplayHighScoreText(false);\n    onComplete?.();\n  }, [onComplete]);\n\n  const HighScoreConfettiLottie = useMemo(\n    () => (\n      <LottieAnimation\n        ref={highScoreConfettiRef}\n        src={LOTTIE.HIGH_SCORE_CONFETTI}\n        settings={HIGH_SCORE_CONFETTI_LOTTIE_SETTINGS}\n      />\n    ),\n    [],\n  );\n\n  const HighScoreTextLottie = useMemo(\n    () => (\n      <LottieAnimation\n        ref={highScoreTextRef}\n        src={LOTTIE.HIGH_SCORE_TEXT}\n        settings={HIGH_SCORE_TEXT_LOTTIE_SETTINGS}\n      />\n    ),\n    [],\n  );\n\n  // Animate the score from 0 to the current score\n  useEffect(() => {\n    if (!show) return;\n\n    let animationFrameId: number;\n    let startTime: number | null = null;\n    let hasCrossedFirstQuater = false; // 🔸 Flag to track 50% trigger\n\n    const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 2);\n\n    if (hasUserBrokenCurrentHighScore) {\n      setDisplayHighScoreText(true);\n      highScoreTextRef.current?.play();\n    }\n\n    const animate = (timestamp: number) => {\n      if (startTime === null) startTime = timestamp;\n\n      const elapsed = timestamp - startTime;\n      const progress = Math.min(elapsed / SCORE_APPEAR_ANIMATION_DURATION, 1);\n      const eased = easeOutCubic(progress);\n\n      setDisplayScore(Math.floor(eased * currentScore));\n\n      if (progress < 1) {\n        animationFrameId = requestAnimationFrame(animate);\n      } else {\n        setDisplayScore(currentScore);\n        runExitSequence();\n      }\n\n      if (!hasCrossedFirstQuater && progress >= 0.9 && hasUserBrokenCurrentHighScore) {\n        highScoreConfettiRef.current?.play();\n        play(hasUserBrokenCurrentHighScore ? CircleSoundKey.HIGH_SCORE : CircleSoundKey.YOUR_SCORE);\n        hasCrossedFirstQuater = true;\n      }\n    };\n\n    // ✅ Async function outside animate()\n    const runExitSequence = async () => {\n      const { promise, timerId } = delay(\n        hasUserBrokenCurrentHighScore\n          ? SCORE_DISAPPEAR_ANIMATION_DURATION_HIGH_SCORE\n          : SCORE_DISAPPEAR_ANIMATION_DURATION_YOUR_SCORE,\n      );\n\n      timerIdsRef.current.push(timerId);\n      await promise;\n      onEndAnimationFinished();\n    };\n\n    animationFrameId = requestAnimationFrame(animate);\n\n    return () => cancelAnimationFrame(animationFrameId);\n  }, [currentScore, show, onEndAnimationFinished, hasUserBrokenCurrentHighScore, play]);\n\n  useEffect(() => {\n    const timerIds = timerIdsRef.current;\n\n    return () =>\n      timerIds?.forEach(timerId => {\n        if (timerId) {\n          clearTimeout(timerId);\n        }\n      });\n  }, [timerIdsRef]);\n\n  if (!show) return null;\n\n  return (\n    <Styled.HighScore>\n      <Styled.HighScoreConfetti>{HighScoreConfettiLottie}</Styled.HighScoreConfetti>\n\n      <Styled.HighScoreValueWrapper\n        $animationType={fadeOut ? 'fadeout' : 'fadein'}\n        $duration={\n          fadeOut ? SCORE_DISAPPEAR_ANIMATION_DURATION_HIGH_SCORE : SCORE_APPEAR_ANIMATION_DURATION\n        }\n      >\n        <Text $renderAs=\"ah2\" $color=\"WHITE\">\n          {displayScore}\n        </Text>\n        <Styled.ScoreText $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n          SCORE\n        </Styled.ScoreText>\n      </Styled.HighScoreValueWrapper>\n\n      <Styled.HighScoreTextAnimation opacity={displayHighScoreTxt ? 1 : 0}>\n        {HighScoreTextLottie}\n      </Styled.HighScoreTextAnimation>\n    </Styled.HighScore>\n  );\n});\n"],"names":["HIGH_SCORE_TEXT_LOTTIE_SETTINGS","HIGH_SCORE_CONFETTI_LOTTIE_SETTINGS","Score","memo","props","currentScore","highScore","show","onComplete","play","useCircleSounds","hasUserBrokenCurrentHighScore","displayScore","setDisplayScore","useState","fadeOut","setFadeout","displayHighScoreTxt","setDisplayHighScoreText","highScoreConfettiRef","useRef","highScoreTextRef","timerIdsRef","onEndAnimationFinished","useCallback","HighScoreConfettiLottie","useMemo","jsx","LottieAnimation","LOTTIE","HighScoreTextLottie","useEffect","animationFrameId","startTime","hasCrossedFirstQuater","easeOutCubic","_a","animate","timestamp","elapsed","progress","SCORE_APPEAR_ANIMATION_DURATION","eased","runExitSequence","CircleSoundKey","promise","timerId","delay","SCORE_DISAPPEAR_ANIMATION_DURATION_HIGH_SCORE","SCORE_DISAPPEAR_ANIMATION_DURATION_YOUR_SCORE","timerIds","jsxs","Styled.HighScore","Styled.HighScoreConfetti","Styled.HighScoreValueWrapper","Text","Styled.ScoreText","Styled.HighScoreTextAnimation"],"mappings":"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"}

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

@@ -1,77 +1,82 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import k from "lottie-web";
-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 { jsxs as D, jsx as a } from "react/jsx-runtime";
+import U from "lottie-web";
+import { memo as w, useState as O, useRef as d, useCallback as W, useEffect as k } from "react";
+import { LOTTIE as C } from "../../../assets/lottie/lottie.js";
+import { useCircleSounds as b } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
+import { CircleSoundKey as y } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
+import { fetchLottie as F } from "../../ui/lottie-animation/helper.js";
 import { delay as l } from "../../utils/utils.js";
-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 v } 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(void 0), [i, h] = p(!1), S = $(async () => {
-    var s;
+import { TEXT_DISAPPEAR_DELAY as M, OUT_FRAMES as S, STREAK_DISAPPEAR_ANIMATION_DURATION as V, STREAK_APPEAR_ANIMATION_DURATION as g, STREAK_SCROLL_ANIMATION_DURATION as P, STREAK_WAIT_DURATION as h, TEXT_DISAPPEAR_DURATION as X, TEXT_APPEAR_DURATION as j, IN_FRAMES as H } from "./constants.js";
+import { Streak as v, SVGImgContainer as G, StreakLottieView as Y, StreakValueWrapper as q, StreakValueContainer as z, StreakValue as N, TextWrapper as B } from "./streak-styled.js";
+const st = w(($) => {
+  const { currStreak: I, show: u, onReveal: o, onComplete: i, helperText: f } = $, { play: n } = b(), [x, L] = O(0), E = d(null), s = d(void 0), [c, K] = O(!1), r = d([]), R = W(async () => {
+    var e;
     try {
-      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();
+      const { promise: t, timerId: A } = l(M);
+      r.current.push(A), await t, K(!0), n(y.STREAK_OUT), (e = s.current) == null || e.playSegments(S, !0);
+      const T = (S[1] - S[0]) * 1e3 / 30, { promise: p, timerId: m } = l(T);
+      r.current.push(m), await p, i == null || i();
     } catch (t) {
       console.log(t);
     }
-  }, [a, o]);
-  return L(() => {
-    if (A)
-      return (async () => {
-        var d;
-        const t = await x(K.TOTAL_STREAK);
-        n.current = k.loadAnimation({
-          container: u.current,
-          animationData: t,
-          autoplay: !1,
-          loop: !1,
-          renderer: "canvas"
-        }), o(I.STREAK_IN), (d = n.current) == null || d.playSegments(V, !0), r == null || r(), l(R).then(() => {
-          N(1), l(_).then(() => {
-            S();
-          });
-        });
-      })(), () => {
-        var t;
-        (t = n.current) == null || t.destroy();
-      };
-  }, [A, S, o, r]), A ? /* @__PURE__ */ f(W, { children: [
-    /* @__PURE__ */ e(g, {}),
-    /* @__PURE__ */ e(X, { ref: u }),
-    /* @__PURE__ */ e(
-      j,
+  }, [i, n]);
+  return k(() => u ? ((async () => {
+    var m;
+    const t = await F(C.TOTAL_STREAK);
+    s.current = U.loadAnimation({
+      container: E.current,
+      animationData: t,
+      autoplay: !1,
+      loop: !1,
+      renderer: "canvas"
+    }), n(y.STREAK_IN), (m = s.current) == null || m.playSegments(H, !0), o == null || o();
+    const { promise: A, timerId: _ } = l(h);
+    r.current.push(_), await A, L(1);
+    const { promise: T, timerId: p } = l(
+      P
+    );
+    r.current.push(p), await T, R();
+  })(), () => {
+    var t;
+    (t = s.current) == null || t.destroy();
+  }) : void 0, [u, R, n, o]), k(() => {
+    const e = r.current;
+    return () => e == null ? void 0 : e.forEach((t) => {
+      t && clearTimeout(t);
+    });
+  }, [r]), u ? /* @__PURE__ */ D(v, { children: [
+    /* @__PURE__ */ a(G, {}),
+    /* @__PURE__ */ a(Y, { ref: E }),
+    /* @__PURE__ */ a(
+      q,
       {
-        $animationType: i ? "fadeout" : "fadein",
-        $duration: i ? b : w,
-        children: /* @__PURE__ */ f(
-          H,
+        $animationType: c ? "fadeout" : "fadein",
+        $duration: c ? V : g,
+        children: /* @__PURE__ */ D(
+          z,
           {
-            $translate: D > 0,
-            $translateDuration: _,
+            $translate: x > 0,
+            $translateDuration: P,
             children: [
-              /* @__PURE__ */ e(O, { $color: "WHITE", $renderAs: "ab1-bold", children: c }),
-              /* @__PURE__ */ e(O, { $color: "WHITE", $renderAs: "ab1-bold", children: c + 1 })
+              /* @__PURE__ */ a(N, { $color: "WHITE", $renderAs: "ab1-bold", children: I }),
+              /* @__PURE__ */ a(N, { $color: "WHITE", $renderAs: "ab1-bold", children: I + 1 })
             ]
           }
         )
       }
     ),
-    m && /* @__PURE__ */ e(
-      v,
+    f && /* @__PURE__ */ a(
+      B,
       {
-        $delay: R,
-        $animationType: i ? "fadeout" : "fadein",
-        $duration: i ? F : M,
-        children: m
+        $delay: h,
+        $animationType: c ? "fadeout" : "fadein",
+        $duration: c ? X : j,
+        children: f
       }
     )
   ] }) : null;
 });
 export {
-  rt as Streak
+  st 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 { 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>(undefined);\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,EAAsB,MAAS,GACpD,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;"}
+{"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>(undefined);\n  const [fadeOut, setFadeout] = useState(false);\n\n  const timerIdsRef = useRef<(ReturnType<typeof setTimeout> | null)[]>([]);\n\n  const playExitAnimation = useCallback(async () => {\n    try {\n      const { promise: textDisappearPromise, timerId: textDisappearTimeId } =\n        delay(TEXT_DISAPPEAR_DELAY);\n\n      timerIdsRef.current.push(textDisappearTimeId);\n      await textDisappearPromise;\n      setFadeout(true);\n      play(CircleSoundKey.STREAK_OUT);\n      lottieAnimationRef.current?.playSegments(OUT_FRAMES, true);\n      const LOTTIE_FPS = 30;\n\n      const exitAnimationDuration =\n        (((OUT_FRAMES[1] as unknown as number) - (OUT_FRAMES[0] as unknown as number)) * 1000) /\n        LOTTIE_FPS;\n      const { promise: exitAnimationPromise, timerId: exitAnimationTimeId } =\n        delay(exitAnimationDuration);\n\n      timerIdsRef.current.push(exitAnimationTimeId);\n      await exitAnimationPromise;\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      return;\n    }\n\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      const { promise: streakWaitPromise, timerId: streakWaitTimeId } = delay(STREAK_WAIT_DURATION);\n\n      timerIdsRef.current.push(streakWaitTimeId);\n      await streakWaitPromise;\n      setDisplayStreak(1);\n\n      const { promise: streakScrollPromise, timerId: streakScrollTimeId } = delay(\n        STREAK_SCROLL_ANIMATION_DURATION,\n      );\n\n      timerIdsRef.current.push(streakScrollTimeId);\n      await streakScrollPromise;\n      playExitAnimation();\n    };\n\n    loadAnimation();\n\n    return () => {\n      lottieAnimationRef.current?.destroy();\n    };\n  }, [show, playExitAnimation, play, onReveal]);\n\n  useEffect(() => {\n    const timerIds = timerIdsRef.current;\n\n    return () =>\n      timerIds?.forEach(timerId => {\n        if (timerId) {\n          clearTimeout(timerId);\n        }\n      });\n  }, [timerIdsRef]);\n\n  if (!show) {\n    return null;\n  }\n\n  return (\n    <Styled.Streak>\n      <Styled.SVGImgContainer />\n      <Styled.StreakLottieView ref={lottieContainerRef} />\n\n      <Styled.StreakValueWrapper\n        $animationType={fadeOut ? 'fadeout' : 'fadein'}\n        $duration={fadeOut ? STREAK_DISAPPEAR_ANIMATION_DURATION : STREAK_APPEAR_ANIMATION_DURATION}\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"],"names":["Streak","memo","props","currStreak","show","onReveal","onComplete","helperText","play","useCircleSounds","displayStreak","setDisplayStreak","useState","lottieContainerRef","useRef","lottieAnimationRef","fadeOut","setFadeout","timerIdsRef","playExitAnimation","useCallback","textDisappearPromise","textDisappearTimeId","delay","TEXT_DISAPPEAR_DELAY","CircleSoundKey","_a","OUT_FRAMES","exitAnimationDuration","exitAnimationPromise","exitAnimationTimeId","err","useEffect","streakLottieAnimationData","fetchLottie","LOTTIE","Lottie","IN_FRAMES","streakWaitPromise","streakWaitTimeId","STREAK_WAIT_DURATION","streakScrollPromise","streakScrollTimeId","STREAK_SCROLL_ANIMATION_DURATION","timerIds","timerId","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,EAAsB,MAAS,GACpD,CAACE,GAASC,CAAU,IAAIL,EAAS,EAAK,GAEtCM,IAAcJ,EAAiD,CAAA,CAAE,GAEjEK,IAAoBC,EAAY,YAAY;;AAC5C,QAAA;AACF,YAAM,EAAE,SAASC,GAAsB,SAASC,MAC9CC,EAAMC,CAAoB;AAEhB,MAAAN,EAAA,QAAQ,KAAKI,CAAmB,GACtC,MAAAD,GACNJ,EAAW,EAAI,GACfT,EAAKiB,EAAe,UAAU,IACXC,IAAAX,EAAA,YAAA,QAAAW,EAAS,aAAaC,GAAY;AAGrD,YAAMC,KACDD,EAAW,CAAC,IAA2BA,EAAW,CAAC,KAA2B,MAHhE,IAKb,EAAE,SAASE,GAAsB,SAASC,MAC9CP,EAAMK,CAAqB;AAEjB,MAAAV,EAAA,QAAQ,KAAKY,CAAmB,GACtC,MAAAD,GACOvB,KAAA,QAAAA;AAAA,aACNyB,GAAK;AAEZ,cAAQ,IAAIA,CAAG;AAAA,IACjB;AAAA,EAAA,GACC,CAACzB,GAAYE,CAAI,CAAC;AAwDrB,SArDAwB,EAAU,MACH5B,MAIiB,YAAY;;AAChC,UAAM6B,IAA4B,MAAMC,EAAYC,EAAO,YAAY;AAEpD,IAAApB,EAAA,UAAUqB,EAAO,cAAc;AAAA,MAChD,WAAWvB,EAAmB;AAAA,MAC9B,eAAeoB;AAAA,MACf,UAAU;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,IAAA,CACX,GAEDzB,EAAKiB,EAAe,SAAS,IACVC,IAAAX,EAAA,YAAA,QAAAW,EAAS,aAAaW,GAAW,KACzChC,KAAA,QAAAA;AAEX,UAAM,EAAE,SAASiC,GAAmB,SAASC,MAAqBhB,EAAMiB,CAAoB;AAEhF,IAAAtB,EAAA,QAAQ,KAAKqB,CAAgB,GACnC,MAAAD,GACN3B,EAAiB,CAAC;AAElB,UAAM,EAAE,SAAS8B,GAAqB,SAASC,EAAuB,IAAAnB;AAAA,MACpEoB;AAAA,IAAA;AAGU,IAAAzB,EAAA,QAAQ,KAAKwB,CAAkB,GACrC,MAAAD,GACYtB;EAAA,MAKb,MAAM;;AACX,KAAAO,IAAAX,EAAmB,YAAnB,QAAAW,EAA4B;AAAA,EAAQ,KApCpC,QAsCD,CAACtB,GAAMe,GAAmBX,GAAMH,CAAQ,CAAC,GAE5C2B,EAAU,MAAM;AACd,UAAMY,IAAW1B,EAAY;AAEtB,WAAA,MACL0B,KAAA,gBAAAA,EAAU,QAAQ,CAAWC,MAAA;AAC3B,MAAIA,KACF,aAAaA,CAAO;AAAA,IACtB;AAAA,EACD,GACF,CAAC3B,CAAW,CAAC,GAEXd,IAKH,gBAAA0C,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAuB;AAAA,IACvB,gBAAAD,EAAAE,GAAA,EAAwB,KAAKrC,EAAoB,CAAA;AAAA,IAElD,gBAAAmC;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,gBAAgBnC,IAAU,YAAY;AAAA,QACtC,WAAWA,IAAUoC,IAAsCC;AAAA,QAE3D,UAAA,gBAAAP;AAAA,UAACQ;AAAAA,UAAA;AAAA,YACC,YAAY5C,IAAgB;AAAA,YAC5B,oBAAoBiC;AAAA,YAEpB,UAAA;AAAA,cAAA,gBAAAK,EAACO,GAAA,EAAmB,QAAO,SAAQ,WAAU,YAC1C,UACHpD,GAAA;AAAA,cACA,gBAAA6C,EAACO,GAAA,EAAmB,QAAO,SAAQ,WAAU,YAC1C,UAAApD,IAAa,GAChB;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IAECI,KACC,gBAAAyC;AAAA,MAACQ;AAAAA,MAAA;AAAA,QACC,QAAQhB;AAAA,QACR,gBAAgBxB,IAAU,YAAY;AAAA,QACtC,WAAWA,IAAUyC,IAA0BC;AAAA,QAE9C,UAAAnD;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA,IAlCO;AAoCX,CAAC;"}

package/dist/features/utils/utils.js

@@ -1,19 +1,22 @@
 import { addYears as s } from "../../node_modules/date-fns/addYears.js";
-const c = (t) => Array.isArray(t) && t.length > 0, i = (t) => {
-  const r = (n) => n.toString().padStart(2, "0"), e = Math.floor(t / 3600), o = Math.floor(t % 3600 / 60), a = t % 60;
-  return e > 0 ? `${r(e)}:${r(o)}:${r(a)}` : `${r(o)}:${r(a)}`;
-}, d = async (t) => await new Promise((r) => {
-  const e = setTimeout(() => {
-    clearTimeout(e), r("resolved");
-  }, t);
-}), l = () => {
-  const r = s(/* @__PURE__ */ new Date(), 1);
-  return Math.floor(r.getTime() / 1e3);
+const i = (r) => Array.isArray(r) && r.length > 0, c = (r) => {
+  const t = (a) => a.toString().padStart(2, "0"), o = Math.floor(r / 3600), e = Math.floor(r % 3600 / 60), n = r % 60;
+  return o > 0 ? `${t(o)}:${t(e)}:${t(n)}` : `${t(e)}:${t(n)}`;
+}, l = (r) => {
+  let t = null;
+  return { promise: new Promise((e) => {
+    t = setTimeout(() => {
+      e("resolved");
+    }, r);
+  }), timerId: t };
+}, p = () => {
+  const t = s(/* @__PURE__ */ new Date(), 1);
+  return Math.floor(t.getTime() / 1e3);
 };
 export {
-  d as delay,
-  l as epochTimestampAfterOneYear,
-  i as formatTimeInHHMMSS,
-  c as isNonEmptyArray
+  l as delay,
+  p as epochTimestampAfterOneYear,
+  c as formatTimeInHHMMSS,
+  i as isNonEmptyArray
 };
 //# sourceMappingURL=utils.js.map

package/dist/features/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/features/utils/utils.ts"],"sourcesContent":["import { addYears } from 'date-fns';\n\nconst isNonEmptyArray = (array: unknown) => {\n  return Array.isArray(array) && array.length > 0;\n};\n\n// format the time in HH:MM:SS\nconst formatTimeInHHMMSS = (seconds: number) => {\n  const pad = (num: number) => num.toString().padStart(2, '0');\n\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = seconds % 60;\n\n  return h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;\n};\n\nconst delay = async (delayInMs: number) => {\n  return await new Promise(res => {\n    const timerId = setTimeout(() => {\n      clearTimeout(timerId);\n      res('resolved');\n    }, delayInMs);\n  });\n};\n\nconst epochTimestampAfterOneYear = () => {\n  const today = new Date();\n  const oneYearLater = addYears(today, 1);\n\n  return Math.floor(oneYearLater.getTime() / 1000);\n};\n\nexport { isNonEmptyArray, formatTimeInHHMMSS, delay, epochTimestampAfterOneYear };\n"],"names":["isNonEmptyArray","array","formatTimeInHHMMSS","seconds","pad","num","h","m","s","delay","delayInMs","res","timerId","epochTimestampAfterOneYear","oneYearLater","addYears"],"mappings":";AAEM,MAAAA,IAAkB,CAACC,MAChB,MAAM,QAAQA,CAAK,KAAKA,EAAM,SAAS,GAI1CC,IAAqB,CAACC,MAAoB;AACxC,QAAAC,IAAM,CAACC,MAAgBA,EAAI,WAAW,SAAS,GAAG,GAAG,GAErDC,IAAI,KAAK,MAAMH,IAAU,IAAI,GAC7BI,IAAI,KAAK,MAAOJ,IAAU,OAAQ,EAAE,GACpCK,IAAIL,IAAU;AAEb,SAAAG,IAAI,IAAI,GAAGF,EAAIE,CAAC,CAAC,IAAIF,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC,KAAK,GAAGJ,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC;AACtE,GAEMC,IAAQ,OAAOC,MACZ,MAAM,IAAI,QAAQ,CAAOC,MAAA;AACxB,QAAAC,IAAU,WAAW,MAAM;AAC/B,iBAAaA,CAAO,GACpBD,EAAI,UAAU;AAAA,KACbD,CAAS;AAAA,CACb,GAGGG,IAA6B,MAAM;AAEjC,QAAAC,IAAeC,sBADH,QACmB,CAAC;AAEtC,SAAO,KAAK,MAAMD,EAAa,YAAY,GAAI;AACjD;"}
+{"version":3,"file":"utils.js","sources":["../../../src/features/utils/utils.ts"],"sourcesContent":["import { addYears } from 'date-fns';\n\nconst isNonEmptyArray = (array: unknown) => {\n  return Array.isArray(array) && array.length > 0;\n};\n\n// format the time in HH:MM:SS\nconst formatTimeInHHMMSS = (seconds: number) => {\n  const pad = (num: number) => num.toString().padStart(2, '0');\n\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = seconds % 60;\n\n  return h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;\n};\n\nconst delay = (delayInMs: number) => {\n  let timerId: ReturnType<typeof setTimeout> | null = null;\n  const promise = new Promise(res => {\n    timerId = setTimeout(() => {\n      res('resolved');\n    }, delayInMs);\n  });\n\n  return { promise, timerId };\n};\n\nconst epochTimestampAfterOneYear = () => {\n  const today = new Date();\n  const oneYearLater = addYears(today, 1);\n\n  return Math.floor(oneYearLater.getTime() / 1000);\n};\n\nexport { isNonEmptyArray, formatTimeInHHMMSS, delay, epochTimestampAfterOneYear };\n"],"names":["isNonEmptyArray","array","formatTimeInHHMMSS","seconds","pad","num","h","m","s","delay","delayInMs","timerId","res","epochTimestampAfterOneYear","oneYearLater","addYears"],"mappings":";AAEM,MAAAA,IAAkB,CAACC,MAChB,MAAM,QAAQA,CAAK,KAAKA,EAAM,SAAS,GAI1CC,IAAqB,CAACC,MAAoB;AACxC,QAAAC,IAAM,CAACC,MAAgBA,EAAI,WAAW,SAAS,GAAG,GAAG,GAErDC,IAAI,KAAK,MAAMH,IAAU,IAAI,GAC7BI,IAAI,KAAK,MAAOJ,IAAU,OAAQ,EAAE,GACpCK,IAAIL,IAAU;AAEb,SAAAG,IAAI,IAAI,GAAGF,EAAIE,CAAC,CAAC,IAAIF,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC,KAAK,GAAGJ,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC;AACtE,GAEMC,IAAQ,CAACC,MAAsB;AACnC,MAAIC,IAAgD;AAO7C,SAAA,EAAE,SANO,IAAI,QAAQ,CAAOC,MAAA;AACjC,IAAAD,IAAU,WAAW,MAAM;AACzB,MAAAC,EAAI,UAAU;AAAA,OACbF,CAAS;AAAA,EAAA,CACb,GAEiB,SAAAC;AACpB,GAEME,IAA6B,MAAM;AAEjC,QAAAC,IAAeC,sBADH,QACmB,CAAC;AAEtC,SAAO,KAAK,MAAMD,EAAa,YAAY,GAAI;AACjD;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.1.41",
+  "version": "3.1.42",
   "type": "module",
   "files": [
     "dist"