@cuemath/leap 2.8.36-tables-hg1 → 2.8.36-tables-hg3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/assets/lottie/lottie.js +1 -1
  2. package/dist/assets/lottie/lottie.js.map +1 -1
  3. package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +10 -10
  4. package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -1
  5. package/dist/features/circle-games/game-launcher/game-launcher.js +1 -1
  6. package/dist/features/circle-games/game-launcher/game-launcher.js.map +1 -1
  7. package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +15 -14
  8. package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +1 -1
  9. package/dist/features/post-game-stats/digital-meter/digital-meter.js +90 -101
  10. package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -1
  11. package/dist/features/post-game-stats/enums/post-game-stats-enum.js +1 -1
  12. package/dist/features/post-game-stats/enums/post-game-stats-enum.js.map +1 -1
  13. package/dist/features/post-game-stats/post-game-stats.js +40 -45
  14. package/dist/features/post-game-stats/post-game-stats.js.map +1 -1
  15. package/dist/index.d.ts +10 -3
  16. package/package.json +1 -1
  17. package/dist/features/post-game-stats/accuracy/accuracy-comps.js +0 -11
  18. package/dist/features/post-game-stats/accuracy/accuracy-comps.js.map +0 -1
  19. package/dist/features/post-game-stats/accuracy/accuracy-styled.js +0 -68
  20. package/dist/features/post-game-stats/accuracy/accuracy-styled.js.map +0 -1
  21. package/dist/features/post-game-stats/accuracy/accuracy-utils.js +0 -20
  22. package/dist/features/post-game-stats/accuracy/accuracy-utils.js.map +0 -1
  23. package/dist/features/post-game-stats/accuracy/accuracy.js +0 -80
  24. package/dist/features/post-game-stats/accuracy/accuracy.js.map +0 -1
  25. package/dist/features/post-game-stats/accuracy/constants.js +0 -17
  26. package/dist/features/post-game-stats/accuracy/constants.js.map +0 -1
  27. package/dist/features/post-game-stats/clock/clock-styled.js +0 -51
  28. package/dist/features/post-game-stats/clock/clock-styled.js.map +0 -1
  29. package/dist/features/post-game-stats/clock/clock-util.js +0 -9
  30. package/dist/features/post-game-stats/clock/clock-util.js.map +0 -1
  31. package/dist/features/post-game-stats/clock/clock.js +0 -75
  32. package/dist/features/post-game-stats/clock/clock.js.map +0 -1
  33. package/dist/features/post-game-stats/clock/constants.js +0 -16
  34. package/dist/features/post-game-stats/clock/constants.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"accuracy-styled.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n 0%{\n opacity: 0;\n }\n 100%{\n opacity: 1;\n }\n`;\n\nconst fadeOut = keyframes`\n 0%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n`;\n\nexport const Accuracy = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const AccuracyMeterLottie = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n flex: 1;\n z-index: 1;\n`;\n\nexport const AnimatedAccuracyNeedleContainer = styled.div<{\n $translateX?: number;\n $translateY?: number;\n $rotate?: number;\n}>`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 2;\n transform: ${({ $translateX = 0, $translateY = 0, $rotate = 0 }) =>\n `translateX(${$translateX}px) translateY(${$translateY}px) rotate(${$rotate}deg)`};\n`;\n\nexport const AccuracyNeedleLottie = styled.div`\n height: 100%;\n width: 100%;\n`;\n\nexport const TextWrapper = styled.div<{\n $duration: number;\n $delay: number;\n $animationType: 'fadein' | 'fadeout';\n}>`\n z-index: 2;\n opacity: 0;\n position: absolute;\n animation: ${({ $animationType, $duration, $delay }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n `};\n transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n\nexport const PercentTextWrapper = styled.div<{\n $animationType?: 'fadein' | 'fadeout';\n $duration?: number;\n}>`\n position: absolute;\n z-index: 20;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n\n ${({ $animationType, $duration }) =>\n $animationType &&\n $duration &&\n css`\n animation: ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards;\n `}\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Accuracy","styled","GAME_LAUNCHER_SIZE","AccuracyMeterLottie","GAME_LAUNCHER_ASSET_PADDING","AnimatedAccuracyNeedleContainer","$translateX","$translateY","$rotate","AccuracyNeedleLottie","TextWrapper","$animationType","$duration","$delay","css","PercentTextWrapper"],"mappings":";;;AAKA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAAWC,EAAO;AAAA,YACnBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAsBF,EAAO;AAAA,YAC9BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA;AAAA,GAM9CC,IAAkCJ,EAAO;AAAA,YAK1CC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,eAG5C,CAAC,EAAE,aAAAE,IAAc,GAAG,aAAAC,IAAc,GAAG,SAAAC,IAAU,EAAE,MAC5D,cAAcF,CAAW,kBAAkBC,CAAW,cAAcC,CAAO,MAAM;AAAA,GAGxEC,IAAuBR,EAAO;AAAA;AAAA;AAAA,GAK9BS,IAAcT,EAAO;AAAA;AAAA;AAAA;AAAA,eAQnB,CAAC,EAAE,gBAAAU,GAAgB,WAAAC,GAAW,QAAAC,QAAaC;AAAA,MACpDH,MAAmB,WAAWd,IAASE,CAAO,IAAIa,CAAS,MAAMC,CAAM;AAAA,GAC1E;AAAA,2BACyBX,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA,GAGlEmB,IAAqBd,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUrC,CAAC,EAAE,gBAAAU,GAAgB,WAAAC,EAAU,MAC7BD,KACAC,KACAE;AAAA,mBACeH,MAAmB,WAAWd,IAASE,CAAO,IAAIa,CAAS;AAAA,KACzE;AAAA;"}
@@ -1,20 +0,0 @@
1
- import { useState as F, useRef as l, useEffect as A } from "react";
2
- import { NEEDLE as n } from "./constants.js";
3
- const P = (e, t, a) => {
4
- const [c, o] = F(e), r = l(null), s = l(null), u = (i) => {
5
- s.current || (s.current = i);
6
- const f = i - s.current, m = Math.min(f / a, 1), E = e + (t - e) * m;
7
- o(E), m < 1 && (r.current = requestAnimationFrame(u));
8
- };
9
- return A(() => (r.current = requestAnimationFrame(u), () => {
10
- r.current && cancelAnimationFrame(r.current);
11
- })), c;
12
- }, T = (e) => {
13
- const t = n.PERCENT_FRAME[1] - n.PERCENT_FRAME[0], a = t / 100, c = Math.min(Math.ceil(a * e), t);
14
- return n.IN_FRAMES[1] - n.IN_FRAMES[0] + c;
15
- };
16
- export {
17
- T as getAccuracyFramesToPlay,
18
- P as useAnimatedValue
19
- };
20
- //# sourceMappingURL=accuracy-utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"accuracy-utils.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-utils.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\nimport { NEEDLE } from './constants';\n\nexport const useAnimatedValue = (start: number, end: number, duration: number) => {\n const [value, setValue] = useState(start);\n const requestRef = useRef<number | null>(null);\n const startTimeRef = useRef<number | null>(null);\n\n const animate = (timestamp: number) => {\n if (!startTimeRef.current) startTimeRef.current = timestamp;\n\n const elapsedTime = timestamp - startTimeRef.current;\n const progress = Math.min(elapsedTime / duration, 1); // Normalize to 0 - 1\n const newValue = start + (end - start) * progress;\n\n setValue(newValue);\n\n if (progress < 1) {\n requestRef.current = requestAnimationFrame(animate);\n }\n };\n\n useEffect(() => {\n requestRef.current = requestAnimationFrame(animate);\n\n return () => {\n if (requestRef.current) cancelAnimationFrame(requestRef.current);\n };\n });\n\n return value;\n};\n\nexport const getAccuracyFramesToPlay = (accuracy: number) => {\n // 100% = 100 frames\n // 1% = 1 fame\n const totalFrames = NEEDLE.PERCENT_FRAME[1] - NEEDLE.PERCENT_FRAME[0];\n const framesPerPercent = totalFrames / 100;\n\n const framesToPlay = Math.min(Math.ceil(framesPerPercent * accuracy), totalFrames);\n const initialFrames = NEEDLE.IN_FRAMES[1] - NEEDLE.IN_FRAMES[0];\n\n return initialFrames + framesToPlay;\n};\n"],"names":["useAnimatedValue","start","end","duration","value","setValue","useState","requestRef","useRef","startTimeRef","animate","timestamp","elapsedTime","progress","newValue","useEffect","getAccuracyFramesToPlay","accuracy","totalFrames","NEEDLE","framesPerPercent","framesToPlay"],"mappings":";;AAIO,MAAMA,IAAmB,CAACC,GAAeC,GAAaC,MAAqB;AAChF,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASL,CAAK,GAClCM,IAAaC,EAAsB,IAAI,GACvCC,IAAeD,EAAsB,IAAI,GAEzCE,IAAU,CAACC,MAAsB;AACrC,IAAKF,EAAa,YAASA,EAAa,UAAUE;AAE5C,UAAAC,IAAcD,IAAYF,EAAa,SACvCI,IAAW,KAAK,IAAID,IAAcT,GAAU,CAAC,GAC7CW,IAAWb,KAASC,IAAMD,KAASY;AAEzC,IAAAR,EAASS,CAAQ,GAEbD,IAAW,MACFN,EAAA,UAAU,sBAAsBG,CAAO;AAAA,EACpD;AAGF,SAAAK,EAAU,OACGR,EAAA,UAAU,sBAAsBG,CAAO,GAE3C,MAAM;AACX,IAAIH,EAAW,WAA8B,qBAAAA,EAAW,OAAO;AAAA,EAAA,EAElE,GAEMH;AACT,GAEaY,IAA0B,CAACC,MAAqB;AAG3D,QAAMC,IAAcC,EAAO,cAAc,CAAC,IAAIA,EAAO,cAAc,CAAC,GAC9DC,IAAmBF,IAAc,KAEjCG,IAAe,KAAK,IAAI,KAAK,KAAKD,IAAmBH,CAAQ,GAAGC,CAAW;AAGjF,SAFsBC,EAAO,UAAU,CAAC,IAAIA,EAAO,UAAU,CAAC,IAEvCE;AACzB;"}
@@ -1,80 +0,0 @@
1
- import { jsxs as v, jsx as t } from "react/jsx-runtime";
2
- import I from "lottie-web";
3
- import { memo as X, useRef as a, useState as d, useCallback as W, useEffect as b } from "react";
4
- import { LOTTIE as M } from "../../../assets/lottie/lottie.js";
5
- import { useCircleSounds as k } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
6
- import { CircleSoundKey as h } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
7
- import { delay as s } from "../../utils/utils.js";
8
- import { AnimatedPercentTextInput as H } from "./accuracy-comps.js";
9
- import { Accuracy as K, AccuracyMeterLottie as q, AnimatedAccuracyNeedleContainer as z, AccuracyNeedleLottie as B, TextWrapper as G, PercentTextWrapper as J } from "./accuracy-styled.js";
10
- import { getAccuracyFramesToPlay as Q } from "./accuracy-utils.js";
11
- 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";
12
- const Ae = X(({ show: u, onComplete: n, accuracy: l, helperText: E }) => {
13
- const { play: c } = k(), y = a(null), p = a(null), o = a(), r = a(), [g, w] = d(!0), [m, T] = d(!1), [R, x] = d(!1), $ = a(0), _ = (F.IN_FRAMES[1] - F.IN_FRAMES[0]) / U * 1e3, S = W(async () => {
14
- var A;
15
- try {
16
- 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();
17
- } catch (e) {
18
- console.log(e);
19
- }
20
- }, [n, c]);
21
- return b(() => {
22
- if (u)
23
- return (async () => {
24
- var L;
25
- const [e, i] = await Promise.all([
26
- fetch(M.ACCURACY_METER),
27
- fetch(M.ACCURACY_NEEDLE)
28
- ]), [Y, j] = await Promise.all([
29
- e.json(),
30
- i.json()
31
- ]);
32
- o.current = I.loadAnimation({
33
- container: y.current,
34
- animationData: Y,
35
- autoplay: !1,
36
- loop: !1,
37
- renderer: "svg"
38
- }), r.current = I.loadAnimation({
39
- container: p.current,
40
- animationData: j,
41
- autoplay: !1,
42
- loop: !1,
43
- renderer: "svg"
44
- }), c(h.ACCURACY_IN), (L = o.current) == null || L.playSegments(O.IN_FRAMES, !0), s(_).then(() => {
45
- var D, P, N;
46
- const f = Q(l);
47
- $.current = f, (D = r.current) == null || D.setSpeed(f / U), (P = r.current) == null || P.playSegments([0, f], !0), T(!0), (N = r.current) == null || N.addEventListener("complete", () => {
48
- s(C).then(() => S());
49
- });
50
- });
51
- })(), () => {
52
- var e, i;
53
- (e = o.current) == null || e.destroy(), (i = r.current) == null || i.destroy();
54
- };
55
- }, [u, l, _, S, c]), u ? /* @__PURE__ */ v(K, { children: [
56
- /* @__PURE__ */ t(q, { ref: y }),
57
- g && /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(B, { ref: p }) }),
58
- E && /* @__PURE__ */ t(
59
- G,
60
- {
61
- $delay: 1e3,
62
- $animationType: R ? "fadeout" : "fadein",
63
- $duration: R ? Z : ee,
64
- children: E
65
- }
66
- ),
67
- m && /* @__PURE__ */ t(
68
- J,
69
- {
70
- $animationType: m ? "fadein" : "fadeout",
71
- $duration: 200,
72
- children: /* @__PURE__ */ t(H, { accuracy: Math.round(l), time: 1e3 })
73
- }
74
- )
75
- ] }) : null;
76
- });
77
- export {
78
- Ae as Accuracy
79
- };
80
- //# sourceMappingURL=accuracy.js.map
@@ -1 +0,0 @@
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>();\n const accuracyNeedleAnimationRef = useRef<AnimationItem>();\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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"}
@@ -1,17 +0,0 @@
1
- const E = 1e3, T = 200, _ = 200, A = 133, R = 30, D = {
2
- IN_FRAMES: [0, 27],
3
- OUT_FRAMES: [27, 47]
4
- }, o = {
5
- IN_FRAMES: [0, 15],
6
- PERCENT_FRAME: [15, 115]
7
- };
8
- export {
9
- D as METER,
10
- o as NEEDLE,
11
- E as NEEDLE_HOLD_TIME,
12
- R as NEEDLE_LOTTIE_FPS,
13
- T as TEXT_APPEAR_DURATION,
14
- _ as TEXT_DISAPPEAR_DELAY,
15
- A as TEXT_DISAPPEAR_DURATION
16
- };
17
- //# sourceMappingURL=constants.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/accuracy/constants.ts"],"sourcesContent":["export const NEEDLE_HOLD_TIME = 1000;\nexport const TEXT_APPEAR_DURATION = 200;\nexport const TEXT_DISAPPEAR_DELAY = 200;\nexport const TEXT_DISAPPEAR_DURATION = 133;\nexport const NEEDLE_LOTTIE_FPS = 30;\n\nexport const METER: { IN_FRAMES: [number, number]; OUT_FRAMES: [number, number] } = {\n IN_FRAMES: [0, 27],\n OUT_FRAMES: [27, 47],\n};\n\nexport const NEEDLE: { IN_FRAMES: [number, number]; PERCENT_FRAME: [number, number] } = {\n IN_FRAMES: [0, 15],\n PERCENT_FRAME: [15, 115],\n};\n"],"names":["NEEDLE_HOLD_TIME","TEXT_APPEAR_DURATION","TEXT_DISAPPEAR_DELAY","TEXT_DISAPPEAR_DURATION","NEEDLE_LOTTIE_FPS","METER","NEEDLE"],"mappings":"AAAO,MAAMA,IAAmB,KACnBC,IAAuB,KACvBC,IAAuB,KACvBC,IAA0B,KAC1BC,IAAoB,IAEpBC,IAAuE;AAAA,EAClF,WAAW,CAAC,GAAG,EAAE;AAAA,EACjB,YAAY,CAAC,IAAI,EAAE;AACrB,GAEaC,IAA2E;AAAA,EACtF,WAAW,CAAC,GAAG,EAAE;AAAA,EACjB,eAAe,CAAC,IAAI,GAAG;AACzB;"}
@@ -1,51 +0,0 @@
1
- import o, { keyframes as e, css as p } from "styled-components";
2
- import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
3
- import { GAME_LAUNCHER_ASSET_PADDING as i } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
4
- const r = 50 * 84 / 100, c = e`
5
- 0%{
6
- opacity: 0;
7
- }
8
- 100%{
9
- opacity: 1;
10
- }
11
- `, d = e`
12
- 0%{
13
- opacity: 1;
14
- }
15
- 100%{
16
- opacity: 0;
17
- }
18
- `, f = o.div`
19
- height: ${t}px;
20
- width: ${t}px;
21
- background: transparent;
22
- display: flex;
23
- align-items: center;
24
- justify-content: center;
25
- position: relative;
26
- `, $ = o.div`
27
- height: ${t + i}px;
28
- width: ${t + i}px;
29
- position: absolute;
30
- z-index: 1;
31
- `, h = o.div`
32
- height: ${t + i}px;
33
- width: ${t + i}px;
34
- position: absolute;
35
- z-index: 2;
36
- `, y = o.div`
37
- z-index: 2;
38
- opacity: 0;
39
- position: absolute;
40
- animation: ${({ $animationType: n, $duration: s, $delay: a }) => p`
41
- ${n === "fadein" ? c : d} ${s}ms ${a}ms ease forwards
42
- `};
43
- transform: translateY(${(t + r) * 84 / 200 + 25}px);
44
- `;
45
- export {
46
- f as Clock,
47
- $ as ClockLottie,
48
- h as ClockTimeSpentLottie,
49
- y as TextWrapper
50
- };
51
- //# sourceMappingURL=clock-styled.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"clock-styled.js","sources":["../../../../src/features/post-game-stats/clock/clock-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n 0%{\n opacity: 0;\n }\n 100%{\n opacity: 1;\n }\n`;\n\nconst fadeOut = keyframes`\n 0%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n`;\n\nexport const Clock = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const ClockLottie = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 1;\n`;\n\nexport const ClockTimeSpentLottie = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 2;\n`;\n\nexport const TextWrapper = styled.div<{\n $duration: number;\n $delay: number;\n $animationType: 'fadein' | 'fadeout';\n}>`\n z-index: 2;\n opacity: 0;\n position: absolute;\n animation: ${({ $animationType, $duration, $delay }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n `};\n transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Clock","styled","GAME_LAUNCHER_SIZE","ClockLottie","GAME_LAUNCHER_ASSET_PADDING","ClockTimeSpentLottie","TextWrapper","$animationType","$duration","$delay","css"],"mappings":";;;AAKA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAAQC,EAAO;AAAA,YAChBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAcF,EAAO;AAAA,YACtBC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAK9CC,IAAuBJ,EAAO;AAAA,YAC/BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAK9CE,IAAcL,EAAO;AAAA;AAAA;AAAA;AAAA,eAQnB,CAAC,EAAE,gBAAAM,GAAgB,WAAAC,GAAW,QAAAC,QAAaC;AAAA,MACpDH,MAAmB,WAAWV,IAASE,CAAO,IAAIS,CAAS,MAAMC,CAAM;AAAA,GAC1E;AAAA,2BACyBP,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}
@@ -1,9 +0,0 @@
1
- import { CLOCK_TIME_SPENT_FPS as a, CLOCK_TIME_SPENT_DURATION as r } from "./constants.js";
2
- const T = (t) => {
3
- const e = a * r, o = e / (60 * 60 * 1e3);
4
- return Math.min(Math.ceil(o * t), e);
5
- };
6
- export {
7
- T as getClockTimeSpentFramesToPlay
8
- };
9
- //# sourceMappingURL=clock-util.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"clock-util.js","sources":["../../../../src/features/post-game-stats/clock/clock-util.ts"],"sourcesContent":["import { CLOCK_TIME_SPENT_FPS, CLOCK_TIME_SPENT_DURATION } from './constants';\n\nexport const getClockTimeSpentFramesToPlay = (timeInMs: number) => {\n // 1 hr = (30 * duration of lottie) frames\n // 60m * 60s * 1000ms = 30 * duration\n // 1ms = (30 * duration) / (60 * 60 * 1000) frames\n const totalFrames = CLOCK_TIME_SPENT_FPS * CLOCK_TIME_SPENT_DURATION; // lottie is of 8s\n\n const framesPerMilliSec = totalFrames / (60 * 60 * 1000);\n\n const framesToPlay = Math.min(Math.ceil(framesPerMilliSec * timeInMs), totalFrames);\n\n return framesToPlay;\n};\n"],"names":["getClockTimeSpentFramesToPlay","timeInMs","totalFrames","CLOCK_TIME_SPENT_FPS","CLOCK_TIME_SPENT_DURATION","framesPerMilliSec"],"mappings":";AAEa,MAAAA,IAAgC,CAACC,MAAqB;AAIjE,QAAMC,IAAcC,IAAuBC,GAErCC,IAAoBH,KAAe,KAAK,KAAK;AAI5C,SAFc,KAAK,IAAI,KAAK,KAAKG,IAAoBJ,CAAQ,GAAGC,CAAW;AAGpF;"}
@@ -1,75 +0,0 @@
1
- import { jsxs as K, jsx as u } from "react/jsx-runtime";
2
- import I from "lottie-web";
3
- import { memo as g, useState as h, useRef as o, useCallback as T, useEffect as j } from "react";
4
- import { LOTTIE as k } from "../../../assets/lottie/lottie.js";
5
- import { useCircleSounds as x } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
6
- import { CircleSoundKey as R } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
7
- import { delay as D } from "../../utils/utils.js";
8
- import { Clock as U, ClockLottie as $, ClockTimeSpentLottie as w, TextWrapper as X } from "./clock-styled.js";
9
- import { getClockTimeSpentFramesToPlay as Y } from "./clock-util.js";
10
- 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";
11
- const it = g(({ show: s, onComplete: i, timeInMs: f, helperText: p }) => {
12
- 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(() => {
13
- var t, e;
14
- const r = Y(f);
15
- r && (l.current = r, (t = n.current) == null || t.setSpeed(r / H), (e = n.current) == null || e.playSegments([0, r], !0), m.current = !0);
16
- }, [f]), S = T(async () => {
17
- var r, t;
18
- 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", () => {
19
- var e;
20
- c(R.CLOCK_OUT), (e = a.current) == null || e.playSegments(N.OUT_FRAMES, !0);
21
- }));
22
- }, [l, c]), A = T(() => {
23
- i == null || i();
24
- }, [i]);
25
- return j(() => {
26
- if (s)
27
- return (async () => {
28
- var O, C, y;
29
- const [t, e] = await Promise.all([
30
- fetch(k.TOTAL_TIME),
31
- fetch(k.TOTAL_TIME_SPENT)
32
- ]), [M, v] = await Promise.all([
33
- t.json(),
34
- e.json()
35
- ]);
36
- a.current = I.loadAnimation({
37
- container: d.current,
38
- animationData: M,
39
- autoplay: !1,
40
- loop: !1,
41
- renderer: "canvas"
42
- }), n.current = I.loadAnimation({
43
- container: E.current,
44
- animationData: v,
45
- autoplay: !1,
46
- loop: !1,
47
- renderer: "canvas"
48
- }), c(R.CLOCK_IN), (O = a.current) == null || O.playSegments(N.IN_FRAMES, !0), (C = a.current) == null || C.addEventListener("complete", () => {
49
- m.current ? A() : _();
50
- }), (y = n.current) == null || y.addEventListener("complete", () => {
51
- var P;
52
- (P = n.current) == null || P.removeEventListener("complete"), S();
53
- });
54
- })(), () => {
55
- var t, e;
56
- (t = a.current) == null || t.destroy(), (e = n.current) == null || e.destroy();
57
- };
58
- }, [s, _, A, S, c]), s ? /* @__PURE__ */ K(U, { children: [
59
- /* @__PURE__ */ u($, { ref: d }),
60
- /* @__PURE__ */ u(w, { ref: E }),
61
- p && /* @__PURE__ */ u(
62
- X,
63
- {
64
- $delay: W + b,
65
- $animationType: L ? "fadeout" : "fadein",
66
- $duration: L ? q : z,
67
- children: p
68
- }
69
- )
70
- ] }) : null;
71
- });
72
- export {
73
- it as Clock
74
- };
75
- //# sourceMappingURL=clock.js.map
@@ -1 +0,0 @@
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>();\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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"}
@@ -1,16 +0,0 @@
1
- const _ = {
2
- IN_FRAMES: [0, 27],
3
- OUT_FRAMES: [27, 34]
4
- }, T = 30, E = 8, A = (_.IN_FRAMES[1] - _.IN_FRAMES[0]) / T * 1e3, I = 1e3, O = 1e3, N = 200, P = 200, R = 133;
5
- export {
6
- _ as CLOCK,
7
- A as CLOCK_INFRAME_LOTTIE_TO_PLAY,
8
- E as CLOCK_TIME_SPENT_DURATION,
9
- T as CLOCK_TIME_SPENT_FPS,
10
- N as TEXT_APPEAR_DURATION,
11
- P as TEXT_DISAPPEAR_DELAY,
12
- R as TEXT_DISAPPEAR_DURATION,
13
- O as TIME_LOTTIE_TO_PLAY_IN,
14
- I as TIME_SHOWN_HOLD_TIME
15
- };
16
- //# sourceMappingURL=constants.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/clock/constants.ts"],"sourcesContent":["export const CLOCK: { IN_FRAMES: [number, number]; OUT_FRAMES: [number, number] } = {\n IN_FRAMES: [0, 27],\n OUT_FRAMES: [27, 34],\n};\n\nexport const CLOCK_TIME_SPENT_FPS = 30;\nexport const CLOCK_TIME_SPENT_DURATION = 8; // in sec\n\nexport const CLOCK_INFRAME_LOTTIE_TO_PLAY =\n ((CLOCK.IN_FRAMES[1] - CLOCK.IN_FRAMES[0]) / CLOCK_TIME_SPENT_FPS) * 1000;\n\n// in ms\nexport const TIME_SHOWN_HOLD_TIME = 1000;\nexport const TIME_LOTTIE_TO_PLAY_IN = 1000;\nexport const TEXT_APPEAR_DURATION = 200;\nexport const TEXT_DISAPPEAR_DELAY = 200;\nexport const TEXT_DISAPPEAR_DURATION = 133;\n"],"names":["CLOCK","CLOCK_TIME_SPENT_FPS","CLOCK_TIME_SPENT_DURATION","CLOCK_INFRAME_LOTTIE_TO_PLAY","TIME_SHOWN_HOLD_TIME","TIME_LOTTIE_TO_PLAY_IN","TEXT_APPEAR_DURATION","TEXT_DISAPPEAR_DELAY","TEXT_DISAPPEAR_DURATION"],"mappings":"AAAO,MAAMA,IAAuE;AAAA,EAClF,WAAW,CAAC,GAAG,EAAE;AAAA,EACjB,YAAY,CAAC,IAAI,EAAE;AACrB,GAEaC,IAAuB,IACvBC,IAA4B,GAE5BC,KACTH,EAAM,UAAU,CAAC,IAAIA,EAAM,UAAU,CAAC,KAAKC,IAAwB,KAG1DG,IAAuB,KACvBC,IAAyB,KACzBC,IAAuB,KACvBC,IAAuB,KACvBC,IAA0B;"}