@cuemath/leap 2.8.40-hg1 → 2.8.40-link.1
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/illustrations/illustrations.js +2 -0
- package/dist/assets/illustrations/illustrations.js.map +1 -1
- package/dist/assets/lottie/lottie.js +0 -6
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/assets/sounds/sounds.js +7 -0
- package/dist/assets/sounds/sounds.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js +3 -3
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js +35 -29
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js +11 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js +16 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js +42 -35
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +212 -223
- 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-analytics-events.js +7 -8
- package/dist/features/circle-games/game-launcher/game-launcher-analytics-events.js.map +1 -1
- package/dist/features/circle-games/game-launcher/game-launcher.js +24 -25
- package/dist/features/circle-games/game-launcher/game-launcher.js.map +1 -1
- package/dist/features/circle-games/games/web-view/web-view-types.js.map +1 -1
- package/dist/features/circle-games/hooks/use-circle-sounds/constants.js +3 -8
- package/dist/features/circle-games/hooks/use-circle-sounds/constants.js.map +1 -1
- package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js +2 -2
- package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js.map +1 -1
- package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js +17 -22
- package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.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/points/points.js +10 -15
- package/dist/features/post-game-stats/points/points.js.map +1 -1
- package/dist/features/post-game-stats/post-game-stats.js +61 -83
- package/dist/features/post-game-stats/post-game-stats.js.map +1 -1
- package/dist/features/talk-meter/helper.js +11 -0
- package/dist/features/talk-meter/helper.js.map +1 -0
- package/dist/features/talk-meter/hooks/use-talk-meter.js +123 -0
- package/dist/features/talk-meter/hooks/use-talk-meter.js.map +1 -0
- package/dist/features/talk-meter/ripple/index.js +62 -0
- package/dist/features/talk-meter/ripple/index.js.map +1 -0
- package/dist/features/talk-meter/talk-meter-styled.js +89 -0
- package/dist/features/talk-meter/talk-meter-styled.js.map +1 -0
- package/dist/features/talk-meter/talk-meter-view/talk-meter-view-styled.js +22 -0
- package/dist/features/talk-meter/talk-meter-view/talk-meter-view-styled.js.map +1 -0
- package/dist/features/talk-meter/talk-meter-view/talk-meter-view.js +101 -0
- package/dist/features/talk-meter/talk-meter-view/talk-meter-view.js.map +1 -0
- package/dist/features/talk-meter/talk-meter.js +75 -0
- package/dist/features/talk-meter/talk-meter.js.map +1 -0
- package/dist/index.d.ts +45 -52
- package/dist/index.js +100 -100
- package/dist/static/female-avatar.b8cd1012.svg +1 -0
- package/dist/static/male-avatar.2febc9eb.svg +1 -0
- package/package.json +2 -3
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star-styled.js +0 -25
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star-styled.js.map +0 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js +0 -57
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js.map +0 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.js +0 -27
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.js.map +0 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js +0 -37
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js +0 -17
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js +0 -47
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js +0 -6
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/constants.js +0 -16
- package/dist/features/post-game-stats/digital-meter/constants.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +0 -87
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/digital-meter.js +0 -191
- package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +0 -1
- package/dist/features/post-game-stats/digital-meter/helper.js +0 -33
- package/dist/features/post-game-stats/digital-meter/helper.js.map +0 -1
- package/dist/features/post-game-stats/number-count-animation/number-count-animation.js +0 -27
- package/dist/features/post-game-stats/number-count-animation/number-count-animation.js.map +0 -1
- package/dist/static/point2.7cec6e24.json +0 -1
- package/dist/static/point3.f96fe7aa.json +0 -1
- package/dist/static/point4.fe04fb83.json +0 -1
- package/dist/static/table-mode-star.b8a1d762.json +0 -1
- package/dist/static/table-segment-star.78e851d6.json +0 -1
- package/dist/static/target-achieved-text.053bd142.json +0 -2830
- package/dist/static/target-achieved-text.10db8475.json +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"table-mode-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.tsx"],"sourcesContent":["import type { ITableModeStarProps } from './table-mode-star-types';\nimport type { AnimationEventName } from 'lottie-web';\n\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport { GAME_LAUNCHER_SIZE } from '../../card-container/constants';\nimport * as Styled from './table-mode-star-styled';\n\nconst settings = {\n loop: false,\n};\n\nconst TableModeStar: React.FC<ITableModeStarProps> = ({ isStarAchieved, rewardStar }) => {\n const [animateStar, setAnimateStar] = useState(false);\n const [starRewarded, setStarRewarded] = useState(isStarAchieved && !rewardStar);\n\n const onAnimationFinish = useMemo(() => {\n return {\n name: 'complete' as AnimationEventName,\n callback: () => {\n setStarRewarded(true);\n setAnimateStar(false);\n },\n };\n }, []);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n\n if (isStarAchieved && rewardStar) {\n timer = setTimeout(() => {\n setAnimateStar(true);\n }, 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n };\n }, [isStarAchieved, rewardStar]);\n\n return (\n <Styled.StarContainer>\n {animateStar && (\n <Styled.LottieContainer>\n <LottieAnimation\n src={LOTTIE.TABLE_MODE_STAR}\n settings={settings}\n eventListener={onAnimationFinish}\n />\n </Styled.LottieContainer>\n )}\n {!animateStar && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={GAME_LAUNCHER_SIZE * 0.05}\n height={GAME_LAUNCHER_SIZE * 0.05}\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <Styled.Circle cx=\"8\" cy=\"8\" r=\"8\" $fill={starRewarded ? 'GREEN_6' : 'WHITE_T_15'} />\n <Styled.Path\n d=\"M8 2L6.23664 5.57295L2.29366 6.1459L5.14683 8.92705L4.47329 12.8541L8 11L11.5267 12.8541L10.8532 8.92705L13.7063 6.1459L9.76336 5.57295L8 2Z\"\n $fill={starRewarded ? 'GREEN_4' : 'WHITE_T_15'}\n />\n </svg>\n )}\n </Styled.StarContainer>\n );\n};\n\nexport default TableModeStar;\n"],"names":["settings","TableModeStar","isStarAchieved","rewardStar","animateStar","setAnimateStar","useState","starRewarded","setStarRewarded","onAnimationFinish","useMemo","useEffect","timer","jsxs","Styled.StarContainer","jsx","Styled.LottieContainer","LottieAnimation","LOTTIE","GAME_LAUNCHER_SIZE","Styled.Circle","Styled.Path"],"mappings":";;;;;;AAUA,MAAMA,IAAW;AAAA,EACf,MAAM;AACR,GAEMC,IAA+C,CAAC,EAAE,gBAAAC,GAAgB,YAAAC,QAAiB;AACvF,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAcC,CAAe,IAAIF,EAASJ,KAAkB,CAACC,CAAU,GAExEM,IAAoBC,EAAQ,OACzB;AAAA,IACL,MAAM;AAAA,IACN,UAAU,MAAM;AACd,MAAAF,EAAgB,EAAI,GACpBH,EAAe,EAAK;AAAA,IACtB;AAAA,EAAA,IAED,CAAE,CAAA;AAEL,SAAAM,EAAU,MAAM;AACV,QAAAC;AAEJ,WAAIV,KAAkBC,MACpBS,IAAQ,WAAW,MAAM;AACvB,MAAAP,EAAe,EAAI;AAAA,OAClB,GAAI,IAGF,MAAM;AACX,MAAAO,KAAS,aAAaA,CAAK;AAAA,IAAA;AAAA,EAC7B,GACC,CAACV,GAAgBC,CAAU,CAAC,GAG7B,gBAAAU,EAACC,GAAA,EACE,UAAA;AAAA,IACCV,KAAA,gBAAAW,EAACC,GAAA,EACC,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAKC,EAAO;AAAA,QACZ,UAAAlB;AAAA,QACA,eAAeS;AAAA,MAAA;AAAA,IAAA,GAEnB;AAAA,IAED,CAACL,KACA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAOM,IAAqB;AAAA,QAC5B,QAAQA,IAAqB;AAAA,QAC7B,SAAQ;AAAA,QACR,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAA,EAAc,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,OAAOb,IAAe,YAAY,aAAc,CAAA;AAAA,UACnF,gBAAAQ;AAAA,YAACM;AAAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,OAAOd,IAAe,YAAY;AAAA,YAAA;AAAA,UACpC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import i from "styled-components";
|
2
|
-
import { GAME_LAUNCHER_SIZE as t } from "../../card-container/constants.js";
|
3
|
-
const s = i.div`
|
4
|
-
position: relative;
|
5
|
-
width: ${t * 0.025}px;
|
6
|
-
height: ${t * 0.025}px;
|
7
|
-
display: flex;
|
8
|
-
align-items: center;
|
9
|
-
justify-content: center;
|
10
|
-
margin-left: ${t * 0.03}px;
|
11
|
-
`, a = i.div`
|
12
|
-
position: absolute;
|
13
|
-
height: ${t * 0.025 * 6.3}px;
|
14
|
-
width: ${t * 0.025 * 6.3}px;
|
15
|
-
`, l = i.div`
|
16
|
-
flex-shrink: 0;
|
17
|
-
width: inherit;
|
18
|
-
height: inherit;
|
19
|
-
border-radius: 100%;
|
20
|
-
background-color: ${({ theme: o, $isStarAchieved: r }) => r ? o.colors.GREEN_6 : o.colors.BLACK_5};
|
21
|
-
`;
|
22
|
-
export {
|
23
|
-
a as LottieContainer,
|
24
|
-
s as StarContainer,
|
25
|
-
l as TableStar
|
26
|
-
};
|
27
|
-
//# sourceMappingURL=table-segment-star-styled.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"table-segment-star-styled.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../card-container/constants';\n\nexport const StarContainer = styled.div`\n position: relative;\n width: ${GAME_LAUNCHER_SIZE * 0.025}px;\n height: ${GAME_LAUNCHER_SIZE * 0.025}px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: ${GAME_LAUNCHER_SIZE * 0.03}px;\n`;\n\nexport const LottieContainer = styled.div`\n position: absolute;\n height: ${GAME_LAUNCHER_SIZE * 0.025 * 6.3}px;\n width: ${GAME_LAUNCHER_SIZE * 0.025 * 6.3}px;\n`;\n\nexport const TableStar = styled.div<{ $isStarAchieved: boolean }>`\n flex-shrink: 0;\n width: inherit;\n height: inherit;\n border-radius: 100%;\n background-color: ${({ theme, $isStarAchieved }) =>\n $isStarAchieved ? theme.colors.GREEN_6 : theme.colors.BLACK_5};\n`;\n"],"names":["StarContainer","styled","GAME_LAUNCHER_SIZE","LottieContainer","TableStar","theme","$isStarAchieved"],"mappings":";;AAIO,MAAMA,IAAgBC,EAAO;AAAA;AAAA,WAEzBC,IAAqB,KAAK;AAAA,YACzBA,IAAqB,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIrBA,IAAqB,IAAI;AAAA,GAG7BC,IAAkBF,EAAO;AAAA;AAAA,YAE1BC,IAAqB,QAAQ,GAAG;AAAA,WACjCA,IAAqB,QAAQ,GAAG;AAAA,GAG9BE,IAAYH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKV,CAAC,EAAE,OAAAI,GAAO,iBAAAC,EAAgB,MAC5CA,IAAkBD,EAAM,OAAO,UAAUA,EAAM,OAAO,OAAO;AAAA;"}
|
@@ -1,37 +0,0 @@
|
|
1
|
-
import { jsxs as c, jsx as r } from "react/jsx-runtime";
|
2
|
-
import { useState as i, useMemo as f, useEffect as u } from "react";
|
3
|
-
import { LOTTIE as T } from "../../../../../../assets/lottie/lottie.js";
|
4
|
-
import p from "../../../../../ui/lottie-animation/lottie-animation.js";
|
5
|
-
import { StarContainer as S, LottieContainer as E, TableStar as L } from "./table-segment-star-styled.js";
|
6
|
-
const d = {
|
7
|
-
loop: !1
|
8
|
-
}, h = ({ isStarAchieved: t, rewardStar: e }) => {
|
9
|
-
const [n, a] = i(!1), [s, m] = i(t && !e), l = f(() => ({
|
10
|
-
name: "complete",
|
11
|
-
callback: () => {
|
12
|
-
m(!0), a(!1);
|
13
|
-
}
|
14
|
-
}), []);
|
15
|
-
return u(() => {
|
16
|
-
let o;
|
17
|
-
return t && e && (o = setTimeout(() => {
|
18
|
-
a(!0);
|
19
|
-
}, 1e3)), () => {
|
20
|
-
o && clearTimeout(o);
|
21
|
-
};
|
22
|
-
}, [t, e]), /* @__PURE__ */ c(S, { children: [
|
23
|
-
n && /* @__PURE__ */ r(E, { children: /* @__PURE__ */ r(
|
24
|
-
p,
|
25
|
-
{
|
26
|
-
src: T.TABLE_SEGMENT_STAR,
|
27
|
-
settings: d,
|
28
|
-
eventListener: l
|
29
|
-
}
|
30
|
-
) }),
|
31
|
-
!n && /* @__PURE__ */ r(L, { $isStarAchieved: s })
|
32
|
-
] });
|
33
|
-
};
|
34
|
-
export {
|
35
|
-
h as default
|
36
|
-
};
|
37
|
-
//# sourceMappingURL=table-segment-star.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"table-segment-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.tsx"],"sourcesContent":["import type { ITableSegmentStarProps } from './table-segment-star-types';\nimport type { AnimationEventName } from 'lottie-web';\n\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './table-segment-star-styled';\n\nconst settings = {\n loop: false,\n};\n\nconst TableSegmentStar: React.FC<ITableSegmentStarProps> = ({ isStarAchieved, rewardStar }) => {\n const [animateStar, setAnimateStar] = useState(false);\n const [starRewarded, setStarRewarded] = useState(isStarAchieved && !rewardStar);\n\n const onAnimationFinish = useMemo(() => {\n return {\n name: 'complete' as AnimationEventName,\n callback: () => {\n setStarRewarded(true);\n setAnimateStar(false);\n },\n };\n }, []);\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n\n if (isStarAchieved && rewardStar) {\n timer = setTimeout(() => {\n setAnimateStar(true);\n }, 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n };\n }, [isStarAchieved, rewardStar]);\n\n return (\n <Styled.StarContainer>\n {animateStar && (\n <Styled.LottieContainer>\n <LottieAnimation\n src={LOTTIE.TABLE_SEGMENT_STAR}\n settings={settings}\n eventListener={onAnimationFinish}\n />\n </Styled.LottieContainer>\n )}\n {!animateStar && <Styled.TableStar $isStarAchieved={starRewarded} />}\n </Styled.StarContainer>\n );\n};\n\nexport default TableSegmentStar;\n"],"names":["settings","TableSegmentStar","isStarAchieved","rewardStar","animateStar","setAnimateStar","useState","starRewarded","setStarRewarded","onAnimationFinish","useMemo","useEffect","timer","jsxs","Styled.StarContainer","jsx","Styled.LottieContainer","LottieAnimation","LOTTIE","Styled.TableStar"],"mappings":";;;;;AASA,MAAMA,IAAW;AAAA,EACf,MAAM;AACR,GAEMC,IAAqD,CAAC,EAAE,gBAAAC,GAAgB,YAAAC,QAAiB;AAC7F,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAcC,CAAe,IAAIF,EAASJ,KAAkB,CAACC,CAAU,GAExEM,IAAoBC,EAAQ,OACzB;AAAA,IACL,MAAM;AAAA,IACN,UAAU,MAAM;AACd,MAAAF,EAAgB,EAAI,GACpBH,EAAe,EAAK;AAAA,IACtB;AAAA,EAAA,IAED,CAAE,CAAA;AAEL,SAAAM,EAAU,MAAM;AACV,QAAAC;AAEJ,WAAIV,KAAkBC,MACpBS,IAAQ,WAAW,MAAM;AACvB,MAAAP,EAAe,EAAI;AAAA,OAClB,GAAI,IAGF,MAAM;AACX,MAAAO,KAAS,aAAaA,CAAK;AAAA,IAAA;AAAA,EAC7B,GACC,CAACV,GAAgBC,CAAU,CAAC,GAG7B,gBAAAU,EAACC,GAAA,EACE,UAAA;AAAA,IACCV,KAAA,gBAAAW,EAACC,GAAA,EACC,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAKC,EAAO;AAAA,QACZ,UAAAlB;AAAA,QACA,eAAeS;AAAA,MAAA;AAAA,IAAA,GAEnB;AAAA,IAED,CAACL,KAAe,gBAAAW,EAACI,GAAA,EAAiB,iBAAiBZ,EAAc,CAAA;AAAA,EACpE,EAAA,CAAA;AAEJ;"}
|
package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
import i from "styled-components";
|
2
|
-
import { RAINBOW_COLOR_ANIMATION_DURATION as r } from "../../constants.js";
|
3
|
-
import { rainbowColorAnimation as n } from "../../helper.js";
|
4
|
-
import { ARC_Z_INDEX as s } from "./constants.js";
|
5
|
-
const p = i.svg`
|
6
|
-
position: absolute;
|
7
|
-
z-index: ${s};
|
8
|
-
`, A = i.path`
|
9
|
-
stroke: ${({ theme: o, stroke: t }) => o.colors[t]};
|
10
|
-
animation: ${({ $playRainbowColors: o }) => o ? n : "undefined"}
|
11
|
-
${r}s ease infinite forwards;
|
12
|
-
`;
|
13
|
-
export {
|
14
|
-
A as Path,
|
15
|
-
p as Svg
|
16
|
-
};
|
17
|
-
//# sourceMappingURL=animated-arc-styled.js.map
|
package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"animated-arc-styled.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\n\nimport styled from 'styled-components';\n\nimport { RAINBOW_COLOR_ANIMATION_DURATION } from '../../constants';\nimport { rainbowColorAnimation } from '../../helper';\nimport { ARC_Z_INDEX } from './constants';\n\nexport const Svg = styled.svg`\n position: absolute;\n z-index: ${ARC_Z_INDEX};\n`;\n\nexport const Path = styled.path<{ stroke: TColorNames; $playRainbowColors: boolean }>`\n stroke: ${({ theme, stroke }) => theme.colors[stroke]};\n animation: ${({ $playRainbowColors }) =>\n $playRainbowColors ? rainbowColorAnimation : 'undefined'}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["Svg","styled","ARC_Z_INDEX","Path","theme","stroke","$playRainbowColors","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;AAQO,MAAMA,IAAMC,EAAO;AAAA;AAAA,aAEbC,CAAW;AAAA,GAGXC,IAAOF,EAAO;AAAA,YACf,CAAC,EAAE,OAAAG,GAAO,QAAAC,EAAA,MAAaD,EAAM,OAAOC,CAAM,CAAC;AAAA,eACxC,CAAC,EAAE,oBAAAC,EAAA,MACZA,IAAqBC,IAAwB,WAAW;AAAA,MACxDC,CAAgC;AAAA;"}
|
@@ -1,47 +0,0 @@
|
|
1
|
-
import { jsx as l } from "react/jsx-runtime";
|
2
|
-
import { useRef as A, useLayoutEffect as $ } from "react";
|
3
|
-
import { describeArc as R } from "../../helper.js";
|
4
|
-
import { Svg as k, Path as w } from "./animated-arc-styled.js";
|
5
|
-
import { ADJUSTED_START_ANGLE as D } from "./constants.js";
|
6
|
-
const x = ({
|
7
|
-
radius: e,
|
8
|
-
strokeWidth: n,
|
9
|
-
color: h,
|
10
|
-
targetAngle: m,
|
11
|
-
startAngle: p = 0,
|
12
|
-
duration: r = 2,
|
13
|
-
mode: o = "draw",
|
14
|
-
delay: s = 0,
|
15
|
-
playRainbowColors: y = !1
|
16
|
-
}) => {
|
17
|
-
const a = A(null), g = -D + p, i = e, u = e - n / 2, c = R(i, i, u, g, m);
|
18
|
-
return $(() => {
|
19
|
-
const t = a.current;
|
20
|
-
if (t) {
|
21
|
-
if (o === "draw") {
|
22
|
-
const f = t.getTotalLength();
|
23
|
-
t.style.strokeDasharray = `${f}`, t.style.strokeDashoffset = `${f}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
|
24
|
-
t.style.transition = `stroke-dashoffset ${r}s linear ${s}s`, t.style.strokeDashoffset = "0";
|
25
|
-
});
|
26
|
-
}
|
27
|
-
o === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
|
28
|
-
t.style.transition = `opacity 0s ease-in-out ${s}s`, t.style.opacity = "1";
|
29
|
-
}));
|
30
|
-
}
|
31
|
-
}, [c, o, r, s]), /* @__PURE__ */ l(k, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ l(
|
32
|
-
w,
|
33
|
-
{
|
34
|
-
ref: a,
|
35
|
-
d: c,
|
36
|
-
fill: "none",
|
37
|
-
stroke: h,
|
38
|
-
strokeWidth: n,
|
39
|
-
strokeLinecap: "butt",
|
40
|
-
$playRainbowColors: y
|
41
|
-
}
|
42
|
-
) });
|
43
|
-
};
|
44
|
-
export {
|
45
|
-
x as AnimatedArc
|
46
|
-
};
|
47
|
-
//# sourceMappingURL=animated-arc.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"animated-arc.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect } from 'react';\n\nimport { describeArc } from '../../helper';\nimport * as Styled from './animated-arc-styled';\nimport { ADJUSTED_START_ANGLE } from './constants';\n\nexport const AnimatedArc: React.FC<IAnimatedArcProps> = ({\n radius,\n strokeWidth,\n color,\n targetAngle,\n startAngle = 0,\n duration = 2,\n mode = 'draw',\n delay = 0,\n playRainbowColors = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const adjustedStartAngle = -ADJUSTED_START_ANGLE + startAngle;\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = describeArc(center, center, arcRadius, adjustedStartAngle, targetAngle);\n\n useLayoutEffect(() => {\n const path = pathRef.current;\n\n if (!path) return;\n\n if (mode === 'draw') {\n const length = path.getTotalLength();\n\n path.style.strokeDasharray = `${length}`;\n path.style.strokeDashoffset = `${length}`;\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n path.style.strokeDashoffset = '0';\n });\n }\n\n if (mode === 'fade') {\n path.style.opacity = '0';\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `opacity 0s ease-in-out ${delay}s`;\n path.style.opacity = '1';\n });\n }\n }, [arcPath, mode, duration, delay]);\n\n return (\n <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n <Styled.Path\n ref={pathRef}\n d={arcPath}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"butt\"\n $playRainbowColors={playRainbowColors}\n />\n </Styled.Svg>\n );\n};\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","playRainbowColors","pathRef","useRef","adjustedStartAngle","ADJUSTED_START_ANGLE","center","arcRadius","arcPath","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path"],"mappings":";;;;;AAQO,MAAMA,IAA2C,CAAC;AAAA,EACvD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,mBAAAC,IAAoB;AACtB,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAAqB,CAACC,IAAuBR,GAC7CS,IAASb,GACTc,IAAYd,IAASC,IAAc,GACnCc,IAAUC,EAAYH,GAAQA,GAAQC,GAAWH,GAAoBR,CAAW;AAEtF,SAAAc,EAAgB,MAAM;AACpB,UAAMC,IAAOT,EAAQ;AAErB,QAAKS,GAEL;AAAA,UAAIZ,MAAS,QAAQ;AACb,cAAAa,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBb,CAAQ,YAAYE,CAAK,KACtEW,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIZ,MAAS,WACXY,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AACrB,QAAAA,EAAA,MAAM,aAAa,0BAA0BX,CAAK,KACvDW,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACH,GAAST,GAAMD,GAAUE,CAAK,CAAC,qBAGhCa,GAAA,EAAW,OAAO,IAAIpB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAqB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,GAAGM;AAAA,MACH,MAAK;AAAA,MACL,QAAQb;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,oBAAoBO;AAAA,IAAA;AAAA,EAExB,EAAA,CAAA;AAEJ;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/constants.ts"],"sourcesContent":["export const ARC_Z_INDEX = 1;\n\nexport const ADJUSTED_START_ANGLE = 150;\n"],"names":["ARC_Z_INDEX","ADJUSTED_START_ANGLE"],"mappings":"AAAO,MAAMA,IAAc,GAEdC,IAAuB;"}
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import { ARC_Z_INDEX as _ } from "./comp/animated-arc/constants.js";
|
2
|
-
const I = 300, N = 2, A = _ + 1, E = A + 1, T = E + 1, O = 3.8, o = 2 / 30, L = 2.37, t = 12 / 30, D = 20 / 30, c = 43 / 30;
|
3
|
-
export {
|
4
|
-
N as BORDER_OFFSET,
|
5
|
-
E as CONTENT_CONTAINER_Z_INDEX,
|
6
|
-
A as LINE_MARKING_Z_INDEX,
|
7
|
-
T as NUMBER_MARKING_Z_INDEX,
|
8
|
-
t as PROGRESS_FILL_DELAY,
|
9
|
-
D as PROGRESS_FILL_DURATION,
|
10
|
-
c as RAINBOW_COLOR_ANIMATION_DURATION,
|
11
|
-
L as TARGET_ACHIEVED_DELAY,
|
12
|
-
o as TARGET_HELPER_TEXT_APPEAR_DELAY,
|
13
|
-
O as TOTAL_ANIMATION_DURATION,
|
14
|
-
I as TOTAL_ARC_AVAILABLE
|
15
|
-
};
|
16
|
-
//# sourceMappingURL=constants.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/digital-meter/constants.ts"],"sourcesContent":["import { ARC_Z_INDEX } from './comp/animated-arc/constants';\n\nexport const TOTAL_ARC_AVAILABLE = 300;\n\nexport const BORDER_OFFSET = 2;\nexport const LINE_MARKING_Z_INDEX = ARC_Z_INDEX + 1;\nexport const CONTENT_CONTAINER_Z_INDEX = LINE_MARKING_Z_INDEX + 1;\nexport const NUMBER_MARKING_Z_INDEX = CONTENT_CONTAINER_Z_INDEX + 1;\n\n// animation details\nexport const TOTAL_ANIMATION_DURATION = 3.8; // in sec\nexport const TARGET_HELPER_TEXT_APPEAR_DELAY = 2 / 30; // delay of 2 frames\nexport const TARGET_ACHIEVED_DELAY = 2.37; // delay of 3 sec\nexport const PROGRESS_FILL_DELAY = 12 / 30; // delay of 12 frames\nexport const PROGRESS_FILL_DURATION = 20 / 30; // in 20 frames\nexport const RAINBOW_COLOR_ANIMATION_DURATION = 43 / 30; // 43 frames;\n"],"names":["TOTAL_ARC_AVAILABLE","BORDER_OFFSET","LINE_MARKING_Z_INDEX","ARC_Z_INDEX","CONTENT_CONTAINER_Z_INDEX","NUMBER_MARKING_Z_INDEX","TOTAL_ANIMATION_DURATION","TARGET_HELPER_TEXT_APPEAR_DELAY","TARGET_ACHIEVED_DELAY","PROGRESS_FILL_DELAY","PROGRESS_FILL_DURATION","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";AAEO,MAAMA,IAAsB,KAEtBC,IAAgB,GAChBC,IAAuBC,IAAc,GACrCC,IAA4BF,IAAuB,GACnDG,IAAyBD,IAA4B,GAGrDE,IAA2B,KAC3BC,IAAkC,IAAI,IACtCC,IAAwB,MACxBC,IAAsB,KAAK,IAC3BC,IAAyB,KAAK,IAC9BC,IAAmC,KAAK;"}
|
@@ -1,87 +0,0 @@
|
|
1
|
-
import o, { keyframes as e } from "styled-components";
|
2
|
-
import { GAME_LAUNCHER_SIZE as r, GAME_LAUNCHER_SIZE_LARGE as s } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
3
|
-
import i from "../../ui/text/text.js";
|
4
|
-
import { ADJUSTED_START_ANGLE as n } from "./comp/animated-arc/constants.js";
|
5
|
-
import { CONTENT_CONTAINER_Z_INDEX as l, LINE_MARKING_Z_INDEX as d, NUMBER_MARKING_Z_INDEX as m, TARGET_HELPER_TEXT_APPEAR_DELAY as a, RAINBOW_COLOR_ANIMATION_DURATION as p } from "./constants.js";
|
6
|
-
import { rainbowColorAnimation as f } from "./helper.js";
|
7
|
-
const g = o.div`
|
8
|
-
height: ${r}px;
|
9
|
-
width: ${r}px;
|
10
|
-
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
11
|
-
display: flex;
|
12
|
-
align-items: center;
|
13
|
-
justify-content: center;
|
14
|
-
position: relative;
|
15
|
-
border-radius: 100%;
|
16
|
-
border: 1px solid ${({ theme: t }) => t.colors.WHITE};
|
17
|
-
animation: ${({ $isTargetAchieved: t }) => t ? e`100%{transform: scale(1.02)}` : "unset"}
|
18
|
-
0.133s ease alternate;
|
19
|
-
`, N = o.div`
|
20
|
-
display: flex;
|
21
|
-
justify-content: center;
|
22
|
-
align-items: center;
|
23
|
-
position: absolute;
|
24
|
-
z-index: ${l};
|
25
|
-
height: 92%;
|
26
|
-
width: 92%;
|
27
|
-
border-radius: 100%;
|
28
|
-
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
29
|
-
`, b = o.div`
|
30
|
-
position: relative;
|
31
|
-
flex-grow: 1;
|
32
|
-
bottom: ${r === s ? -8 : -6}px;
|
33
|
-
`;
|
34
|
-
o.div`
|
35
|
-
position: absolute;
|
36
|
-
`;
|
37
|
-
const u = o.div`
|
38
|
-
width: ${r / 2}px;
|
39
|
-
height: 2px;
|
40
|
-
position: absolute;
|
41
|
-
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
42
|
-
transform-style: preserve-3d;
|
43
|
-
backface-visibility: hidden;
|
44
|
-
transform-origin: left;
|
45
|
-
transform: rotate(${({ $angle: t }) => -240 + t}deg);
|
46
|
-
left: ${r / 2}px;
|
47
|
-
top: ${r / 2}px;
|
48
|
-
z-index: ${d};
|
49
|
-
`, T = o.div`
|
50
|
-
position: absolute;
|
51
|
-
height: ${r - r * 0.0625 - 10}px;
|
52
|
-
transform: rotate(${({ $angle: t }) => -n + t}deg);
|
53
|
-
z-index: ${m};
|
54
|
-
`, h = o.div`
|
55
|
-
transform: rotate(${({ $angle: t }) => n - t}deg);
|
56
|
-
`, C = o.div`
|
57
|
-
position: absolute;
|
58
|
-
top: 0;
|
59
|
-
transform: ${({ top: t }) => `translateY(${t}px)`};
|
60
|
-
`, R = o(i)`
|
61
|
-
animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
|
62
|
-
ease-in-out ${a}s forwards;
|
63
|
-
`, I = o(i)`
|
64
|
-
animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
|
65
|
-
ease ${a}s forwards;
|
66
|
-
`;
|
67
|
-
o.div`
|
68
|
-
height: 100%;
|
69
|
-
width: 100%;
|
70
|
-
`;
|
71
|
-
const v = o(i)`
|
72
|
-
animation: ${({ $isTargetAchieved: t }) => t ? f : "unset"}
|
73
|
-
${p}s ease infinite forwards;
|
74
|
-
`;
|
75
|
-
export {
|
76
|
-
C as BottomAbsoluteView,
|
77
|
-
N as ContentContainer,
|
78
|
-
g as DigitalMeter,
|
79
|
-
R as HelperTextPrimary,
|
80
|
-
I as HelperTextSecondary,
|
81
|
-
u as LineMarking,
|
82
|
-
T as MarkingContainer,
|
83
|
-
h as MarkingText,
|
84
|
-
b as NumberCountContainer,
|
85
|
-
v as RainboxColorText
|
86
|
-
};
|
87
|
-
//# sourceMappingURL=digital-meter-styled.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"digital-meter-styled.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nimport {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport Text from '../../ui/text/text';\nimport { ADJUSTED_START_ANGLE } from './comp/animated-arc/constants';\nimport {\n CONTENT_CONTAINER_Z_INDEX,\n LINE_MARKING_Z_INDEX,\n NUMBER_MARKING_Z_INDEX,\n RAINBOW_COLOR_ANIMATION_DURATION,\n TARGET_HELPER_TEXT_APPEAR_DELAY,\n} from './constants';\nimport { rainbowColorAnimation } from './helper';\n\nexport const DigitalMeter = styled.div<{ $isTargetAchieved: boolean }>`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 100%;\n border: 1px solid ${({ theme }) => theme.colors.WHITE};\n animation: ${({ $isTargetAchieved }) =>\n $isTargetAchieved ? keyframes`100%{transform: scale(1.02)}` : 'unset'}\n 0.133s ease alternate;\n`;\n\nexport const ContentContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n z-index: ${CONTENT_CONTAINER_Z_INDEX};\n height: 92%;\n width: 92%;\n border-radius: 100%;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n`;\n\nexport const NumberCountContainer = styled.div`\n position: relative;\n flex-grow: 1;\n bottom: ${GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? -8 : -6}px;\n`;\n\nexport const AbsoluteView = styled.div`\n position: absolute;\n`;\n\nexport const LineMarking = styled.div<{\n $angle: number;\n}>`\n width: ${GAME_LAUNCHER_SIZE / 2}px;\n height: 2px;\n position: absolute;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n transform-style: preserve-3d;\n backface-visibility: hidden;\n transform-origin: left;\n transform: rotate(${({ $angle }) => -240 + $angle}deg);\n left: ${GAME_LAUNCHER_SIZE / 2}px;\n top: ${GAME_LAUNCHER_SIZE / 2}px;\n z-index: ${LINE_MARKING_Z_INDEX};\n`;\n\nexport const MarkingContainer = styled.div<{ $angle: number }>`\n position: absolute;\n height: ${GAME_LAUNCHER_SIZE - GAME_LAUNCHER_SIZE * 0.0625 - 10}px;\n transform: rotate(${({ $angle }) => -ADJUSTED_START_ANGLE + $angle}deg);\n z-index: ${NUMBER_MARKING_Z_INDEX};\n`;\n\nexport const MarkingText = styled.div<{ $angle: number }>`\n transform: rotate(${({ $angle }) => ADJUSTED_START_ANGLE - $angle}deg);\n`;\n\nexport const BottomAbsoluteView = styled.div<{ top: number }>`\n position: absolute;\n top: 0;\n transform: ${({ top }) => `translateY(${top}px)`};\n`;\n\nexport const HelperTextPrimary = styled(Text)`\n animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n ease-in-out ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const HelperTextSecondary = styled(Text)`\n animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n ease ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const TargetAchievedTextLottie = styled.div`\n height: 100%;\n width: 100%;\n`;\n\nexport const RainboxColorText = styled(Text)<{ $isTargetAchieved: boolean }>`\n animation: ${({ $isTargetAchieved }) => ($isTargetAchieved ? rainbowColorAnimation : 'unset')}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["DigitalMeter","styled","GAME_LAUNCHER_SIZE","theme","$isTargetAchieved","keyframes","ContentContainer","CONTENT_CONTAINER_Z_INDEX","NumberCountContainer","GAME_LAUNCHER_SIZE_LARGE","LineMarking","$angle","LINE_MARKING_Z_INDEX","MarkingContainer","ADJUSTED_START_ANGLE","NUMBER_MARKING_Z_INDEX","MarkingText","BottomAbsoluteView","top","HelperTextPrimary","Text","TARGET_HELPER_TEXT_APPEAR_DELAY","HelperTextSecondary","RainboxColorText","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;;;AAiBO,MAAMA,IAAeC,EAAO;AAAA,YACvBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA,sBACP,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,eACxC,CAAC,EAAE,mBAAAC,QACZA,IAAoBC,kCAA0C,OAAO;AAAA;AAAA,GAI9DC,IAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAK1BM,CAAyB;AAAA;AAAA;AAAA;AAAA,sBAIhB,CAAC,EAAE,OAAAJ,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,GAG5CK,IAAuBP,EAAO;AAAA;AAAA;AAAA,YAG/BC,MAAuBO,IAA2B,KAAK,EAAE;AAAA;AAGzCR,EAAO;AAAA;AAAA;AAI5B,MAAMS,IAAcT,EAAO;AAAA,WAGvBC,IAAqB,CAAC;AAAA;AAAA;AAAA,sBAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAInC,CAAC,EAAE,QAAAQ,EAAO,MAAM,OAAOA,CAAM;AAAA,UACzCT,IAAqB,CAAC;AAAA,SACvBA,IAAqB,CAAC;AAAA,aAClBU,CAAoB;AAAA,GAGpBC,IAAmBZ,EAAO;AAAA;AAAA,YAE3BC,IAAqBA,IAAqB,SAAS,EAAE;AAAA,sBAC3C,CAAC,EAAE,QAAAS,EAAA,MAAa,CAACG,IAAuBH,CAAM;AAAA,aACvDI,CAAsB;AAAA,GAGtBC,IAAcf,EAAO;AAAA,sBACZ,CAAC,EAAE,QAAAU,QAAaG,IAAuBH,CAAM;AAAA,GAGtDM,IAAqBhB,EAAO;AAAA;AAAA;AAAA,eAG1B,CAAC,EAAE,KAAAiB,EAAU,MAAA,cAAcA,CAAG,KAAK;AAAA,GAGrCC,IAAoBlB,EAAOmB,CAAI;AAAA,eAC7Bf,iEAAyE;AAAA,kBACtEgB,CAA+B;AAAA,GAGpCC,IAAsBrB,EAAOmB,CAAI;AAAA,eAC/Bf,iEAAyE;AAAA,WAC7EgB,CAA+B;AAAA;AAGFpB,EAAO;AAAA;AAAA;AAAA;AAKlC,MAAAsB,IAAmBtB,EAAOmB,CAAI;AAAA,eAC5B,CAAC,EAAE,mBAAAhB,EAAA,MAAyBA,IAAoBoB,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}
|
@@ -1,191 +0,0 @@
|
|
1
|
-
import { jsxs as o, jsx as r, Fragment as g } from "react/jsx-runtime";
|
2
|
-
import { memo as W, useState as U, useCallback as w, useEffect as B } from "react";
|
3
|
-
import { LOTTIE as Y } from "../../../assets/lottie/lottie.js";
|
4
|
-
import { GAME_LAUNCHER_SIZE as i, GAME_LAUNCHER_SIZE_LARGE as c } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
5
|
-
import { useCircleSounds as P } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
|
6
|
-
import { CircleSoundKey as E } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
|
7
|
-
import I from "../../ui/layout/flex-view.js";
|
8
|
-
import j from "../../ui/lottie-animation/lottie-animation.js";
|
9
|
-
import R from "../../ui/separator/separator.js";
|
10
|
-
import N from "../../ui/text/text.js";
|
11
|
-
import { NumberCountAnimation as K } from "../number-count-animation/number-count-animation.js";
|
12
|
-
import { AnimatedArc as p } from "./comp/animated-arc/animated-arc.js";
|
13
|
-
import { TARGET_ACHIEVED_DELAY as S, TOTAL_ARC_AVAILABLE as d, BORDER_OFFSET as C, PROGRESS_FILL_DURATION as f, PROGRESS_FILL_DELAY as L, TOTAL_ANIMATION_DURATION as Z } from "./constants.js";
|
14
|
-
import { DigitalMeter as X, ContentContainer as q, NumberCountContainer as z, RainboxColorText as b, LineMarking as G, MarkingContainer as u, MarkingText as D, BottomAbsoluteView as M, HelperTextPrimary as J, HelperTextSecondary as Q } from "./digital-meter-styled.js";
|
15
|
-
const Tr = W(
|
16
|
-
({
|
17
|
-
show: $,
|
18
|
-
value: h,
|
19
|
-
maxValue: n,
|
20
|
-
targetValue: l = 0,
|
21
|
-
displayText: H,
|
22
|
-
progressType: s,
|
23
|
-
helperTextPrimary: O,
|
24
|
-
helperTextSecondary: F,
|
25
|
-
onComplete: k,
|
26
|
-
actAsTimer: m
|
27
|
-
}) => {
|
28
|
-
const [a, y] = U(!1), { play: _ } = P(), T = w(
|
29
|
-
(t) => l ? m ? t <= l : t >= l : !1,
|
30
|
-
[l, m]
|
31
|
-
);
|
32
|
-
return B(() => {
|
33
|
-
let t, e;
|
34
|
-
const A = T(h);
|
35
|
-
return $ && (_(m ? E.TIME_INTRO : E.ACCURACY_INTRO), _(E.METER_FILL), A && (t = setTimeout(() => {
|
36
|
-
_(m ? E.TIME_TARGET : E.ACCURACY_TARGET), y(!0);
|
37
|
-
}, S * 1e3)), e = setTimeout(() => {
|
38
|
-
k();
|
39
|
-
}, (A ? Z : S) * 1e3)), () => {
|
40
|
-
t && clearTimeout(t), e && clearTimeout(e);
|
41
|
-
};
|
42
|
-
}, [$, h, k, T, m, _]), $ ? /* @__PURE__ */ o(X, { $isTargetAchieved: a, children: [
|
43
|
-
/* @__PURE__ */ r(
|
44
|
-
p,
|
45
|
-
{
|
46
|
-
targetAngle: d,
|
47
|
-
strokeWidth: i === c ? 16 : 12,
|
48
|
-
color: "BLACK_5",
|
49
|
-
radius: (i - C) / 2,
|
50
|
-
duration: 0
|
51
|
-
}
|
52
|
-
),
|
53
|
-
/* @__PURE__ */ r(q, { children: /* @__PURE__ */ o(I, { $flexDirection: "column", $alignItems: "center", children: [
|
54
|
-
/* @__PURE__ */ o(I, { $flexDirection: "row", $alignItems: "flex-end", children: [
|
55
|
-
/* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(
|
56
|
-
b,
|
57
|
-
{
|
58
|
-
$renderAs: i === c ? "ah1" : "ah2",
|
59
|
-
$color: "GREEN_4",
|
60
|
-
$isTargetAchieved: a,
|
61
|
-
children: /* @__PURE__ */ r(
|
62
|
-
K,
|
63
|
-
{
|
64
|
-
initialValue: 0,
|
65
|
-
targetValue: Math.floor(h),
|
66
|
-
durationInSec: f,
|
67
|
-
delayInSec: L
|
68
|
-
}
|
69
|
-
)
|
70
|
-
}
|
71
|
-
) }),
|
72
|
-
s === "stepper" && /* @__PURE__ */ o(
|
73
|
-
N,
|
74
|
-
{
|
75
|
-
$renderAs: i === c ? "ah4" : "ab1",
|
76
|
-
$color: "WHITE",
|
77
|
-
children: [
|
78
|
-
"/",
|
79
|
-
n
|
80
|
-
]
|
81
|
-
}
|
82
|
-
)
|
83
|
-
] }),
|
84
|
-
/* @__PURE__ */ r(R, { height: 8 }),
|
85
|
-
/* @__PURE__ */ r(
|
86
|
-
N,
|
87
|
-
{
|
88
|
-
$renderAs: i === c ? "ac3-black" : "ac4-black",
|
89
|
-
$color: "WHITE_T_60",
|
90
|
-
children: H
|
91
|
-
}
|
92
|
-
)
|
93
|
-
] }) }),
|
94
|
-
s === "stepper" && Array.from({ length: h }, (t, e) => {
|
95
|
-
const A = d / n;
|
96
|
-
return /* @__PURE__ */ r(
|
97
|
-
p,
|
98
|
-
{
|
99
|
-
startAngle: A * e,
|
100
|
-
targetAngle: A,
|
101
|
-
strokeWidth: i === c ? 16 : 12,
|
102
|
-
color: "GREEN_4",
|
103
|
-
radius: (i - C) / 2,
|
104
|
-
mode: "fade",
|
105
|
-
duration: f / n,
|
106
|
-
delay: L + f / n * e,
|
107
|
-
playRainbowColors: a
|
108
|
-
},
|
109
|
-
e
|
110
|
-
);
|
111
|
-
}),
|
112
|
-
s === "stepper" && Array.from({ length: n + 1 }, (t, e) => {
|
113
|
-
const A = d / n;
|
114
|
-
return /* @__PURE__ */ o(g, { children: [
|
115
|
-
/* @__PURE__ */ r(G, { $angle: A * e }, e + "linemarking"),
|
116
|
-
/* @__PURE__ */ r(u, { $angle: A * e, children: /* @__PURE__ */ r(D, { $angle: A * e, children: /* @__PURE__ */ r(
|
117
|
-
b,
|
118
|
-
{
|
119
|
-
$renderAs: i === c ? "ac3-black" : "ac4-black",
|
120
|
-
$isTargetAchieved: T(e) && a,
|
121
|
-
$color: l && T(e) ? "GREEN_4" : "WHITE_T_60",
|
122
|
-
children: e
|
123
|
-
}
|
124
|
-
) }) }, e)
|
125
|
-
] });
|
126
|
-
}),
|
127
|
-
s === "linear" && /* @__PURE__ */ o(g, { children: [
|
128
|
-
/* @__PURE__ */ r(
|
129
|
-
p,
|
130
|
-
{
|
131
|
-
targetAngle: h * d / n,
|
132
|
-
strokeWidth: i === c ? 16 : 12,
|
133
|
-
color: "GREEN_4",
|
134
|
-
radius: (i - C) / 2,
|
135
|
-
duration: f,
|
136
|
-
delay: L,
|
137
|
-
playRainbowColors: a
|
138
|
-
}
|
139
|
-
),
|
140
|
-
/* @__PURE__ */ o(g, { children: [
|
141
|
-
l && /* @__PURE__ */ r(G, { $angle: l * d / n }),
|
142
|
-
Array.from(/* @__PURE__ */ new Set([0, l, n])).map((t, e) => /* @__PURE__ */ r(
|
143
|
-
u,
|
144
|
-
{
|
145
|
-
$angle: t * d / n,
|
146
|
-
children: /* @__PURE__ */ r(D, { $angle: t * d / n, children: /* @__PURE__ */ r(
|
147
|
-
b,
|
148
|
-
{
|
149
|
-
$renderAs: i === c ? "ac3-black" : "ac4-black",
|
150
|
-
$color: l && T(t) ? "GREEN_4" : "WHITE_T_60",
|
151
|
-
$isTargetAchieved: h >= t && a && T(t),
|
152
|
-
children: t
|
153
|
-
}
|
154
|
-
) })
|
155
|
-
},
|
156
|
-
e
|
157
|
-
))
|
158
|
-
] })
|
159
|
-
] }),
|
160
|
-
a && /* @__PURE__ */ r(M, { top: i, children: /* @__PURE__ */ r(j, { src: Y.TARGET_ACHIEVED_TEXT }) }),
|
161
|
-
!a && /* @__PURE__ */ o(M, { top: i, children: [
|
162
|
-
/* @__PURE__ */ r(R, { height: 25 }),
|
163
|
-
/* @__PURE__ */ o(I, { $flexDirection: "column", $alignItems: "center", children: [
|
164
|
-
/* @__PURE__ */ o(
|
165
|
-
J,
|
166
|
-
{
|
167
|
-
$renderAs: i === c ? "ac3-black" : "ac4-black",
|
168
|
-
$color: "WHITE_T_60",
|
169
|
-
children: [
|
170
|
-
O,
|
171
|
-
/* @__PURE__ */ r(R, { height: i * 0.03 })
|
172
|
-
]
|
173
|
-
}
|
174
|
-
),
|
175
|
-
/* @__PURE__ */ r(
|
176
|
-
Q,
|
177
|
-
{
|
178
|
-
$renderAs: i === c ? "ah4" : "ab1",
|
179
|
-
$color: "WHITE",
|
180
|
-
children: F
|
181
|
-
}
|
182
|
-
)
|
183
|
-
] })
|
184
|
-
] })
|
185
|
-
] }) : null;
|
186
|
-
}
|
187
|
-
);
|
188
|
-
export {
|
189
|
-
Tr as DigitalMeter
|
190
|
-
};
|
191
|
-
//# sourceMappingURL=digital-meter.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"digital-meter.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter.tsx"],"sourcesContent":["import type { IDigitalMeterProps } from './digital-meter-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { 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 FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { NumberCountAnimation } from '../number-count-animation/number-count-animation';\nimport { AnimatedArc } from './comp/animated-arc/animated-arc';\nimport {\n BORDER_OFFSET,\n PROGRESS_FILL_DELAY,\n PROGRESS_FILL_DURATION,\n TARGET_ACHIEVED_DELAY,\n TOTAL_ANIMATION_DURATION,\n TOTAL_ARC_AVAILABLE,\n} from './constants';\nimport * as Styled from './digital-meter-styled';\n\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n ({\n show,\n value,\n maxValue,\n targetValue = 0,\n displayText,\n progressType,\n helperTextPrimary,\n helperTextSecondary,\n onComplete,\n actAsTimer,\n }) => {\n const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n const { play } = useCircleSounds();\n\n const isTargetValueAchieved = useCallback(\n (valueToCompare: number) => {\n if (targetValue) {\n if (actAsTimer) {\n return valueToCompare <= targetValue;\n }\n\n return valueToCompare >= targetValue;\n }\n\n return false;\n },\n [targetValue, actAsTimer],\n );\n\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n const isTargetAchievedFlag = isTargetValueAchieved(value);\n\n if (show) {\n play(actAsTimer ? CircleSoundKey.TIME_INTRO : CircleSoundKey.ACCURACY_INTRO);\n play(CircleSoundKey.METER_FILL);\n if (isTargetAchievedFlag) {\n timer = setTimeout(() => {\n play(actAsTimer ? CircleSoundKey.TIME_TARGET : CircleSoundKey.ACCURACY_TARGET);\n setIsTargetAchieved(true);\n }, TARGET_ACHIEVED_DELAY * 1000);\n }\n\n const timeToFinishAnimation = isTargetAchievedFlag\n ? TOTAL_ANIMATION_DURATION\n : TARGET_ACHIEVED_DELAY;\n\n timerForAnimationComplete = setTimeout(() => {\n onComplete();\n }, timeToFinishAnimation * 1000);\n }\n\n return () => {\n timer && clearTimeout(timer);\n timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n };\n }, [show, value, onComplete, isTargetValueAchieved, actAsTimer, play]);\n\n if (show) {\n return (\n <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n {/* complete arc area to be filled */}\n <AnimatedArc\n targetAngle={TOTAL_ARC_AVAILABLE}\n strokeWidth={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 16 : 12}\n color=\"BLACK_5\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n duration={0}\n />\n\n {/* center area for the content */}\n <Styled.ContentContainer>\n <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n <FlexView $flexDirection=\"row\" $alignItems=\"flex-end\">\n <Styled.NumberCountContainer>\n <Styled.RainboxColorText\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah1' : 'ah2'}\n $color=\"GREEN_4\"\n $isTargetAchieved={isTargetAchieved}\n >\n <NumberCountAnimation\n initialValue={0}\n targetValue={Math.floor(value)}\n durationInSec={PROGRESS_FILL_DURATION}\n delayInSec={PROGRESS_FILL_DELAY}\n />\n </Styled.RainboxColorText>\n </Styled.NumberCountContainer>\n {progressType === 'stepper' && (\n <Text\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n $color=\"WHITE\"\n >\n /{maxValue}\n </Text>\n )}\n </FlexView>\n <Separator height={8} />\n <Text\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color=\"WHITE_T_60\"\n >\n {displayText}\n </Text>\n </FlexView>\n </Styled.ContentContainer>\n\n {/* stepper animation */}\n {progressType === 'stepper' &&\n Array.from({ length: value }, (_, index) => {\n const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n return (\n <AnimatedArc\n key={index}\n startAngle={arcLength * index}\n targetAngle={arcLength}\n strokeWidth={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 16 : 12}\n color=\"GREEN_4\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n mode=\"fade\"\n duration={PROGRESS_FILL_DURATION / maxValue}\n delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n playRainbowColors={isTargetAchieved}\n />\n );\n })}\n\n {/* numbers with markings */}\n {progressType === 'stepper' &&\n Array.from({ length: maxValue + 1 }, (_, index) => {\n const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n return (\n <>\n <Styled.LineMarking key={index + 'linemarking'} $angle={arcLength * index} />\n <Styled.MarkingContainer key={index} $angle={arcLength * index}>\n <Styled.MarkingText $angle={arcLength * index}>\n <Styled.RainboxColorText\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE\n ? 'ac3-black'\n : 'ac4-black'\n }\n $isTargetAchieved={isTargetValueAchieved(index) && isTargetAchieved}\n $color={\n targetValue && isTargetValueAchieved(index) ? 'GREEN_4' : 'WHITE_T_60'\n }\n >\n {index}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n </>\n );\n })}\n\n {/* progress of linear */}\n {progressType === 'linear' && (\n <>\n <AnimatedArc\n targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n strokeWidth={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 16 : 12}\n color=\"GREEN_4\"\n radius={(GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2}\n duration={PROGRESS_FILL_DURATION}\n delay={PROGRESS_FILL_DELAY}\n playRainbowColors={isTargetAchieved}\n />\n <>\n {/* target line marking */}\n {targetValue && (\n <Styled.LineMarking $angle={(targetValue * TOTAL_ARC_AVAILABLE) / maxValue} />\n )}\n\n {/* all markings */}\n {Array.from(new Set([0, targetValue, maxValue])).map((val, index) => (\n <Styled.MarkingContainer\n key={index}\n $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}\n >\n <Styled.MarkingText $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}>\n <Styled.RainboxColorText\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE\n ? 'ac3-black'\n : 'ac4-black'\n }\n $color={\n targetValue && isTargetValueAchieved(val) ? 'GREEN_4' : 'WHITE_T_60'\n }\n $isTargetAchieved={\n value >= val && isTargetAchieved && isTargetValueAchieved(val)\n }\n >\n {val}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n ))}\n </>\n </>\n )}\n\n {/* helper text below the animation */}\n {isTargetAchieved && (\n <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n <LottieAnimation src={LOTTIE.TARGET_ACHIEVED_TEXT} />\n </Styled.BottomAbsoluteView>\n )}\n {!isTargetAchieved && (\n <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n <Separator height={25} />\n <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n <Styled.HelperTextPrimary\n $renderAs={\n GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n }\n $color=\"WHITE_T_60\"\n >\n {helperTextPrimary}\n <Separator height={GAME_LAUNCHER_SIZE * 0.03} />\n </Styled.HelperTextPrimary>\n <Styled.HelperTextSecondary\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n $color=\"WHITE\"\n >\n {helperTextSecondary}\n </Styled.HelperTextSecondary>\n </FlexView>\n </Styled.BottomAbsoluteView>\n )}\n </Styled.DigitalMeter>\n );\n }\n\n return null;\n },\n);\n"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","actAsTimer","isTargetAchieved","setIsTargetAchieved","useState","play","useCircleSounds","isTargetValueAchieved","useCallback","valueToCompare","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","CircleSoundKey","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","BORDER_OFFSET","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","Fragment","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}
|
@@ -1,33 +0,0 @@
|
|
1
|
-
import { keyframes as C } from "styled-components";
|
2
|
-
const a = (r, F, o, n) => {
|
3
|
-
const t = (n - 90) * (Math.PI / 180);
|
4
|
-
return {
|
5
|
-
x: r + o * Math.cos(t),
|
6
|
-
y: F + o * Math.sin(t)
|
7
|
-
};
|
8
|
-
}, $ = (r, F, o, n, t) => {
|
9
|
-
const e = n + t, s = a(r, F, o, n), c = a(r, F, o, e), l = t > 180 ? 1 : 0;
|
10
|
-
return `M ${s.x} ${s.y} A ${o} ${o} 0 ${l} 1 ${c.x} ${c.y}`;
|
11
|
-
}, k = C`
|
12
|
-
0% {
|
13
|
-
stroke: #FFB700;
|
14
|
-
color: #FFB700;
|
15
|
-
}
|
16
|
-
33% {
|
17
|
-
stroke: #FF884C;
|
18
|
-
color: #FF884C;
|
19
|
-
}
|
20
|
-
66% {
|
21
|
-
stroke: #FF80F4;
|
22
|
-
color: #FF80F4;
|
23
|
-
}
|
24
|
-
100% {
|
25
|
-
stroke: #33CCFF;
|
26
|
-
color: #33CCFF;
|
27
|
-
}
|
28
|
-
`;
|
29
|
-
export {
|
30
|
-
$ as describeArc,
|
31
|
-
k as rainbowColorAnimation
|
32
|
-
};
|
33
|
-
//# sourceMappingURL=helper.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"helper.js","sources":["../../../../src/features/post-game-stats/digital-meter/helper.ts"],"sourcesContent":["import { keyframes } from 'styled-components';\n\nconst polarToCartesian = (cx: number, cy: number, r: number, angleDeg: number) => {\n const angleRad = (angleDeg - 90) * (Math.PI / 180);\n\n return {\n x: cx + r * Math.cos(angleRad),\n y: cy + r * Math.sin(angleRad),\n };\n};\n\nexport const describeArc = (\n cx: number,\n cy: number,\n r: number,\n startAngle: number,\n sweepAngle: number,\n) => {\n const endAngle = startAngle + sweepAngle;\n const start = polarToCartesian(cx, cy, r, startAngle);\n const end = polarToCartesian(cx, cy, r, endAngle);\n const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n\n return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n};\n\nexport const rainbowColorAnimation = keyframes`\n 0% {\n stroke: #FFB700;\n color: #FFB700;\n }\n 33% {\n stroke: #FF884C;\n color: #FF884C;\n }\n 66% {\n stroke: #FF80F4;\n color: #FF80F4;\n }\n 100% {\n stroke: #33CCFF;\n color: #33CCFF;\n }\n`;\n"],"names":["polarToCartesian","cx","cy","r","angleDeg","angleRad","describeArc","startAngle","sweepAngle","endAngle","start","end","largeArcFlag","rainbowColorAnimation","keyframes"],"mappings":";AAEA,MAAMA,IAAmB,CAACC,GAAYC,GAAYC,GAAWC,MAAqB;AAChF,QAAMC,KAAYD,IAAW,OAAO,KAAK,KAAK;AAEvC,SAAA;AAAA,IACL,GAAGH,IAAKE,IAAI,KAAK,IAAIE,CAAQ;AAAA,IAC7B,GAAGH,IAAKC,IAAI,KAAK,IAAIE,CAAQ;AAAA,EAAA;AAEjC,GAEaC,IAAc,CACzBL,GACAC,GACAC,GACAI,GACAC,MACG;AACH,QAAMC,IAAWF,IAAaC,GACxBE,IAAQV,EAAiBC,GAAIC,GAAIC,GAAGI,CAAU,GAC9CI,IAAMX,EAAiBC,GAAIC,GAAIC,GAAGM,CAAQ,GAC1CG,IAAeJ,IAAa,MAAM,IAAI;AAE5C,SAAO,KAAKE,EAAM,CAAC,IAAIA,EAAM,CAAC,MAAMP,CAAC,IAAIA,CAAC,MAAMS,CAAY,MAAMD,EAAI,CAAC,IAAIA,EAAI,CAAC;AAClF,GAEaE,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import { jsx as F } from "react/jsx-runtime";
|
2
|
-
import { useState as d, useEffect as h } from "react";
|
3
|
-
const q = ({
|
4
|
-
initialValue: t,
|
5
|
-
targetValue: o,
|
6
|
-
durationInSec: n = 0,
|
7
|
-
delayInSec: m = 0
|
8
|
-
}) => {
|
9
|
-
const [i, u] = d(t);
|
10
|
-
return h(() => {
|
11
|
-
let e, r;
|
12
|
-
const s = (a) => {
|
13
|
-
e || (e = a);
|
14
|
-
const p = a - e, c = Math.min(p / (n * 1e3), 1), A = Math.floor(t + (o - t) * c);
|
15
|
-
u(A), c < 1 && (r = requestAnimationFrame(s));
|
16
|
-
}, f = setTimeout(() => {
|
17
|
-
r = requestAnimationFrame(s);
|
18
|
-
}, m * 1e3);
|
19
|
-
return () => {
|
20
|
-
clearTimeout(f), cancelAnimationFrame(r);
|
21
|
-
};
|
22
|
-
}, [t, o, n, m]), /* @__PURE__ */ F("div", { children: i });
|
23
|
-
};
|
24
|
-
export {
|
25
|
-
q as NumberCountAnimation
|
26
|
-
};
|
27
|
-
//# sourceMappingURL=number-count-animation.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"number-count-animation.js","sources":["../../../../src/features/post-game-stats/number-count-animation/number-count-animation.tsx"],"sourcesContent":["import type { INumberCountAnimationProps } from './number-count-animation-types';\nimport type { FC } from 'react';\n\nimport { useEffect, useState } from 'react';\n\nexport const NumberCountAnimation: FC<INumberCountAnimationProps> = ({\n initialValue,\n targetValue,\n durationInSec = 0,\n delayInSec = 0,\n}) => {\n const [currentValue, setCurrentValue] = useState(initialValue);\n\n useEffect(() => {\n let startTimestamp: number;\n let animationFrameId: number;\n\n const animate = (timestamp: number) => {\n if (!startTimestamp) {\n startTimestamp = timestamp;\n }\n\n const elapsed = timestamp - startTimestamp;\n const progress = Math.min(elapsed / (durationInSec * 1000), 1);\n const value = Math.floor(initialValue + (targetValue - initialValue) * progress);\n\n setCurrentValue(value);\n\n if (progress < 1) {\n animationFrameId = requestAnimationFrame(animate);\n }\n };\n\n const timeoutId = setTimeout(() => {\n animationFrameId = requestAnimationFrame(animate);\n }, delayInSec * 1000);\n\n return () => {\n clearTimeout(timeoutId);\n cancelAnimationFrame(animationFrameId);\n };\n }, [initialValue, targetValue, durationInSec, delayInSec]);\n\n return <div>{currentValue}</div>;\n};\n"],"names":["NumberCountAnimation","initialValue","targetValue","durationInSec","delayInSec","currentValue","setCurrentValue","useState","useEffect","startTimestamp","animationFrameId","animate","timestamp","elapsed","progress","value","timeoutId","jsx"],"mappings":";;AAKO,MAAMA,IAAuD,CAAC;AAAA,EACnE,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AACf,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASN,CAAY;AAE7D,SAAAO,EAAU,MAAM;AACV,QAAAC,GACAC;AAEE,UAAAC,IAAU,CAACC,MAAsB;AACrC,MAAKH,MACcA,IAAAG;AAGnB,YAAMC,IAAUD,IAAYH,GACtBK,IAAW,KAAK,IAAID,KAAWV,IAAgB,MAAO,CAAC,GACvDY,IAAQ,KAAK,MAAMd,KAAgBC,IAAcD,KAAgBa,CAAQ;AAE/E,MAAAR,EAAgBS,CAAK,GAEjBD,IAAW,MACbJ,IAAmB,sBAAsBC,CAAO;AAAA,IAClD,GAGIK,IAAY,WAAW,MAAM;AACjC,MAAAN,IAAmB,sBAAsBC,CAAO;AAAA,IAAA,GAC/CP,IAAa,GAAI;AAEpB,WAAO,MAAM;AACX,mBAAaY,CAAS,GACtB,qBAAqBN,CAAgB;AAAA,IAAA;AAAA,KAEtC,CAACT,GAAcC,GAAaC,GAAeC,CAAU,CAAC,GAElD,gBAAAa,EAAC,SAAK,UAAaZ,EAAA,CAAA;AAC5B;"}
|