@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.
- package/dist/assets/lottie/lottie.js +1 -1
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +10 -10
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -1
- package/dist/features/circle-games/game-launcher/game-launcher.js +1 -1
- package/dist/features/circle-games/game-launcher/game-launcher.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +15 -14
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter.js +90 -101
- package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -1
- package/dist/features/post-game-stats/enums/post-game-stats-enum.js +1 -1
- package/dist/features/post-game-stats/enums/post-game-stats-enum.js.map +1 -1
- package/dist/features/post-game-stats/post-game-stats.js +40 -45
- package/dist/features/post-game-stats/post-game-stats.js.map +1 -1
- package/dist/index.d.ts +10 -3
- package/package.json +1 -1
- package/dist/features/post-game-stats/accuracy/accuracy-comps.js +0 -11
- package/dist/features/post-game-stats/accuracy/accuracy-comps.js.map +0 -1
- package/dist/features/post-game-stats/accuracy/accuracy-styled.js +0 -68
- package/dist/features/post-game-stats/accuracy/accuracy-styled.js.map +0 -1
- package/dist/features/post-game-stats/accuracy/accuracy-utils.js +0 -20
- package/dist/features/post-game-stats/accuracy/accuracy-utils.js.map +0 -1
- package/dist/features/post-game-stats/accuracy/accuracy.js +0 -80
- package/dist/features/post-game-stats/accuracy/accuracy.js.map +0 -1
- package/dist/features/post-game-stats/accuracy/constants.js +0 -17
- package/dist/features/post-game-stats/accuracy/constants.js.map +0 -1
- package/dist/features/post-game-stats/clock/clock-styled.js +0 -51
- package/dist/features/post-game-stats/clock/clock-styled.js.map +0 -1
- package/dist/features/post-game-stats/clock/clock-util.js +0 -9
- package/dist/features/post-game-stats/clock/clock-util.js.map +0 -1
- package/dist/features/post-game-stats/clock/clock.js +0 -75
- package/dist/features/post-game-stats/clock/clock.js.map +0 -1
- package/dist/features/post-game-stats/clock/constants.js +0 -16
- 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;"}
|