@cuemath/leap 2.9.6 → 2.9.7-hg1
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/features/circle-games/games/tutorial/constants.js +2 -2
- package/dist/features/circle-games/games/tutorial/constants.js.map +1 -1
- package/dist/features/circle-games/games/tutorial/tutorial-styled.js +8 -8
- package/dist/features/circle-games/games/tutorial/tutorial-styled.js.map +1 -1
- package/dist/features/circle-games/games/tutorial/tutorial.js.map +1 -1
- package/dist/features/circle-games/leaderboard/comps/banner/banner.js +6 -6
- package/dist/features/circle-games/leaderboard/comps/banner/banner.js.map +1 -1
- package/dist/features/circle-games/leaderboard/comps/navigation-button/navigation-button-styled.js +1 -1
- package/dist/features/circle-games/leaderboard/comps/navigation-button/navigation-button-styled.js.map +1 -1
- package/dist/features/circle-games/leaderboard/comps/navigation-button/navigation-button.js.map +1 -1
- package/dist/features/circle-games/sign-up/comp/circular-steps/circular-steps-styled.js +8 -8
- package/dist/features/circle-games/sign-up/comp/circular-steps/circular-steps-styled.js.map +1 -1
- package/dist/features/circle-games/sign-up/comp/circular-steps/circular-steps.js.map +1 -1
- package/dist/features/ui/arc-button/arc-button.js.map +1 -1
- package/dist/features/ui/arc-button/constants.js +3 -3
- package/dist/features/ui/arc-button/constants.js.map +1 -1
- package/package.json +2 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../../src/features/circle-games/games/tutorial/constants.ts"],"sourcesContent":["export const HEADER_HEIGHT = 64;\n"],"names":["HEADER_HEIGHT"],"mappings":"
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../../src/features/circle-games/games/tutorial/constants.ts"],"sourcesContent":["export const HEADER_HEIGHT = 64 + (window.topInset || 0);\n"],"names":["HEADER_HEIGHT"],"mappings":"AAAa,MAAAA,IAAgB,MAAM,OAAO,YAAY;"}
|
|
@@ -10,7 +10,7 @@ const n = o.div`
|
|
|
10
10
|
width: inherit;
|
|
11
11
|
`, d = o.div`
|
|
12
12
|
height: ${t}px;
|
|
13
|
-
padding-top:
|
|
13
|
+
padding-top: ${(window.topInset || 0) + 24}px;
|
|
14
14
|
width: 100%;
|
|
15
15
|
background: ${({ theme: i }) => i.colors.WHITE_T_03};
|
|
16
16
|
backdrop-filter: blur(40px);
|
|
@@ -19,19 +19,19 @@ const n = o.div`
|
|
|
19
19
|
`, s = o.div`
|
|
20
20
|
position: absolute;
|
|
21
21
|
right: 16px;
|
|
22
|
-
top:
|
|
22
|
+
top: ${(window.topInset || 0) + 22}px;
|
|
23
23
|
z-index: 1;
|
|
24
24
|
&:hover {
|
|
25
25
|
background: ${({ theme: i }) => i.colors.BLACK_4};
|
|
26
26
|
cursor: pointer;
|
|
27
27
|
}
|
|
28
|
-
`,
|
|
28
|
+
`, p = o.div`
|
|
29
29
|
display: flex;
|
|
30
30
|
flex-direction: column;
|
|
31
31
|
/* overflow: hidden; */
|
|
32
32
|
flex-grow: 1;
|
|
33
33
|
position: relative;
|
|
34
|
-
`,
|
|
34
|
+
`, a = o.div`
|
|
35
35
|
width: 100%;
|
|
36
36
|
position: absolute;
|
|
37
37
|
top: 0;
|
|
@@ -42,7 +42,7 @@ const n = o.div`
|
|
|
42
42
|
width: 100%;
|
|
43
43
|
height: 100%;
|
|
44
44
|
}
|
|
45
|
-
`,
|
|
45
|
+
`, l = o.div`
|
|
46
46
|
height: 40px;
|
|
47
47
|
width: 100%;
|
|
48
48
|
position: relative;
|
|
@@ -61,13 +61,13 @@ const n = o.div`
|
|
|
61
61
|
transition: width 0.4s linear;
|
|
62
62
|
`;
|
|
63
63
|
export {
|
|
64
|
-
|
|
64
|
+
p as GameTutorialContainer,
|
|
65
65
|
d as GameTutorialHeader,
|
|
66
66
|
n as GameTutorialWrapper,
|
|
67
67
|
s as HeaderIconContainer,
|
|
68
|
-
|
|
68
|
+
a as VideoContainer,
|
|
69
69
|
c as VideoProgress,
|
|
70
70
|
h as VideoProgressContainer,
|
|
71
|
-
|
|
71
|
+
l as VideoProgressWrapper
|
|
72
72
|
};
|
|
73
73
|
//# sourceMappingURL=tutorial-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorial-styled.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { HEADER_HEIGHT } from './constants';\n\nexport const GameTutorialWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 250px;\n background: ${({ theme }) => theme.colors.BLACK_1};\n position: relative;\n width: inherit;\n`;\n\nexport const GameTutorialHeader = styled.div`\n height: ${HEADER_HEIGHT}px;\n padding-top:
|
|
1
|
+
{"version":3,"file":"tutorial-styled.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { HEADER_HEIGHT } from './constants';\n\nexport const GameTutorialWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 250px;\n background: ${({ theme }) => theme.colors.BLACK_1};\n position: relative;\n width: inherit;\n`;\n\nexport const GameTutorialHeader = styled.div`\n height: ${HEADER_HEIGHT}px;\n padding-top: ${(window.topInset || 0) + 24}px;\n width: 100%;\n background: ${({ theme }) => theme.colors.WHITE_T_03};\n backdrop-filter: blur(40px);\n position: relative;\n flex-shrink: 0;\n`;\n\nexport const HeaderIconContainer = styled.div`\n position: absolute;\n right: 16px;\n top: ${(window.topInset || 0) + 22}px;\n z-index: 1;\n &:hover {\n background: ${({ theme }) => theme.colors.BLACK_4};\n cursor: pointer;\n }\n`;\n\nexport const GameTutorialContainer = styled.div`\n display: flex;\n flex-direction: column;\n /* overflow: hidden; */\n flex-grow: 1;\n position: relative;\n`;\n\nexport const VideoContainer = styled.div`\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n & video {\n width: 100%;\n height: 100%;\n }\n`;\n\nexport const VideoProgressWrapper = styled.div`\n height: 40px;\n width: 100%;\n position: relative;\n display: flex;\n`;\n\nexport const VideoProgressContainer = styled.div`\n height: 2px;\n position: relative;\n width: 100%;\n z-index: 1;\n`;\n\nexport const VideoProgress = styled.div<{ $width: number }>`\n height: inherit;\n background: ${({ theme }) => theme.colors.WHITE};\n position: absolute;\n z-index: 2;\n width: ${({ $width }) => $width || 0}%;\n transition: width 0.4s linear;\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer","VideoProgressWrapper","VideoProgressContainer","VideoProgress","$width"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKtCC,IAAqBF,EAAO;AAAA,YAC7BG,CAAa;AAAA,kBACP,OAAO,YAAY,KAAK,EAAE;AAAA;AAAA,gBAE5B,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAsBJ,EAAO;AAAA;AAAA;AAAA,UAGhC,OAAO,YAAY,KAAK,EAAE;AAAA;AAAA;AAAA,kBAGlB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKxCI,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ/BM,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAaxBO,IAAuBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BQ,IAAyBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCS,IAAgBT,EAAO;AAAA;AAAA,gBAEpB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,WAGtC,CAAC,EAAE,QAAAS,QAAaA,KAAU,CAAC;AAAA;AAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n src,\n title,\n onCross,\n showProgress = true,\n onTutorialPlayedOnce,\n}: ITutorialProps) => {\n const [progress, setProgress] = useState(0);\n const hasVideoEnded = useRef(false);\n\n const onProgress = useCallback(\n (e: ChangeEvent<HTMLVideoElement>) => {\n const p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n if (p >= 90 && !hasVideoEnded.current) {\n hasVideoEnded.current = true;\n onTutorialPlayedOnce?.();\n }\n\n setProgress(p);\n },\n [onTutorialPlayedOnce],\n );\n\n return (\n <Styled.GameTutorialWrapper>\n {(title || onCross) && (\n <Styled.GameTutorialHeader>\n {title && (\n <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n {title}\n </Text>\n )}\n {onCross && (\n <Styled.HeaderIconContainer>\n <CrossIcon color=\"#fff\" onClick={onCross} />\n </Styled.HeaderIconContainer>\n )}\n </Styled.GameTutorialHeader>\n )}\n\n <Styled.GameTutorialContainer>\n <Styled.VideoContainer>\n <video\n loop={true}\n autoPlay={true}\n muted={true}\n src={src}\n onTimeUpdate={onProgress}\n disablePictureInPicture={true}\n itemType=\"video/mp4\"\n playsInline\n />\n </Styled.VideoContainer>\n </Styled.GameTutorialContainer>\n\n {showProgress && (\n <Styled.VideoProgressWrapper>\n <Styled.VideoProgressContainer>\n {progress > 0 && <Styled.VideoProgress $width={progress} />}\n </Styled.VideoProgressContainer>\n </Styled.VideoProgressWrapper>\n )}\n </Styled.GameTutorialWrapper>\n );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","progress","setProgress","useState","hasVideoEnded","useRef","onProgress","useCallback","e","p","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './tutorial-styled';\n\ndeclare global {\n interface Window {\n topInset?: number;\n }\n}\n\nexport const Tutorial = ({\n src,\n title,\n onCross,\n showProgress = true,\n onTutorialPlayedOnce,\n}: ITutorialProps) => {\n const [progress, setProgress] = useState(0);\n const hasVideoEnded = useRef(false);\n\n const onProgress = useCallback(\n (e: ChangeEvent<HTMLVideoElement>) => {\n const p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n if (p >= 90 && !hasVideoEnded.current) {\n hasVideoEnded.current = true;\n onTutorialPlayedOnce?.();\n }\n\n setProgress(p);\n },\n [onTutorialPlayedOnce],\n );\n\n return (\n <Styled.GameTutorialWrapper>\n {(title || onCross) && (\n <Styled.GameTutorialHeader>\n {title && (\n <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n {title}\n </Text>\n )}\n {onCross && (\n <Styled.HeaderIconContainer>\n <CrossIcon color=\"#fff\" onClick={onCross} />\n </Styled.HeaderIconContainer>\n )}\n </Styled.GameTutorialHeader>\n )}\n\n <Styled.GameTutorialContainer>\n <Styled.VideoContainer>\n <video\n loop={true}\n autoPlay={true}\n muted={true}\n src={src}\n onTimeUpdate={onProgress}\n disablePictureInPicture={true}\n itemType=\"video/mp4\"\n playsInline\n />\n </Styled.VideoContainer>\n </Styled.GameTutorialContainer>\n\n {showProgress && (\n <Styled.VideoProgressWrapper>\n <Styled.VideoProgressContainer>\n {progress > 0 && <Styled.VideoProgress $width={progress} />}\n </Styled.VideoProgressContainer>\n </Styled.VideoProgressWrapper>\n )}\n </Styled.GameTutorialWrapper>\n );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","progress","setProgress","useState","hasVideoEnded","useRef","onProgress","useCallback","e","p","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":";;;;;AAeO,MAAMA,IAAW,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,sBAAAC;AACF,MAAsB;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAgBC,EAAO,EAAK,GAE5BC,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,KAAMD,EAAE,OAAO,eAAe,MAAMA,EAAE,OAAO,YAAY,KAAM;AAErE,MAAIC,KAAK,MAAM,CAACL,EAAc,YAC5BA,EAAc,UAAU,IACDJ,KAAA,QAAAA,MAGzBE,EAAYO,CAAC;AAAA,IACf;AAAA,IACA,CAACT,CAAoB;AAAA,EAAA;AAIrB,SAAA,gBAAAU,EAACC,GAAA,EACG,UAAA;AAAA,KAAAd,KAASC,MACT,gBAAAY,EAACE,GAAA,EACE,UAAA;AAAA,MACCf,KAAA,gBAAAgB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHjB,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAAe,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAASlB,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,sBAGDmB,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EACC,UAAA,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAAjB;AAAA,QACA,cAAcU;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAECP,KACE,gBAAAc,EAAAM,GAAA,EACC,UAAA,gBAAAN,EAACO,GAAA,EACE,UAAWnB,IAAA,uBAAMoB,GAAA,EAAqB,QAAQpB,EAAU,CAAA,EAC3D,CAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { jsxs as n, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { memo as
|
|
2
|
+
import { memo as l } from "react";
|
|
3
3
|
import h from "../../../../ui/lottie-animation/lottie-animation.js";
|
|
4
4
|
import p from "../../../../ui/separator/separator.js";
|
|
5
5
|
import o from "../../../../ui/text/text.js";
|
|
6
6
|
import { BannerContainer as f, CircleLottieView as x, BannerTextContainer as T, CountTextWrapper as C } from "./banner-styled.js";
|
|
7
|
-
const $ = { renderer: "canvas" },
|
|
7
|
+
const $ = { renderer: "canvas" }, E = l(
|
|
8
8
|
({
|
|
9
9
|
primaryText: i,
|
|
10
10
|
secondaryText: t,
|
|
11
|
-
topInset: e = 0,
|
|
11
|
+
topInset: e = window.topInset || 0,
|
|
12
12
|
isLoading: a = !1,
|
|
13
13
|
lottiePath: m,
|
|
14
14
|
bgFromTopPosition: c = 0,
|
|
15
15
|
bgFromRightPosition: s = 0,
|
|
16
|
-
custEle:
|
|
16
|
+
custEle: d
|
|
17
17
|
}) => /* @__PURE__ */ n(f, { topInset: e, children: [
|
|
18
18
|
/* @__PURE__ */ r(
|
|
19
19
|
x,
|
|
@@ -30,11 +30,11 @@ const $ = { renderer: "canvas" }, H = d(
|
|
|
30
30
|
/* @__PURE__ */ r(p, { height: 4 }),
|
|
31
31
|
/* @__PURE__ */ r(o, { $renderAs: "ah4", $color: "WHITE", children: a ? "__" : t })
|
|
32
32
|
] }),
|
|
33
|
-
|
|
33
|
+
d
|
|
34
34
|
] })
|
|
35
35
|
] })
|
|
36
36
|
);
|
|
37
37
|
export {
|
|
38
|
-
|
|
38
|
+
E as Banner
|
|
39
39
|
};
|
|
40
40
|
//# sourceMappingURL=banner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner.tsx"],"sourcesContent":["import type { IBannerProps } from './banner-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './banner-styled';\n\nconst animationSettings = { renderer: 'canvas' };\n\nexport const Banner: FC<IBannerProps> = memo(\n ({\n primaryText,\n secondaryText,\n topInset = 0,\n isLoading = false,\n lottiePath,\n bgFromTopPosition = 0,\n bgFromRightPosition = 0,\n custEle,\n }) => (\n <Styled.BannerContainer topInset={topInset}>\n <Styled.CircleLottieView\n topInset={topInset}\n bgFromTopPosition={bgFromTopPosition}\n bgFromRightPosition={bgFromRightPosition}\n >\n <LottieAnimation src={lottiePath} settings={animationSettings} />\n </Styled.CircleLottieView>\n\n <Styled.BannerTextContainer>\n <Styled.CountTextWrapper topInset={topInset}>\n <Text $renderAs=\"ac4\" $color=\"WHITE\">\n {primaryText}\n </Text>\n <Separator height={4} />\n <Text $renderAs=\"ah4\" $color=\"WHITE\">\n {isLoading ? '__' : secondaryText}\n </Text>\n </Styled.CountTextWrapper>\n\n {custEle}\n </Styled.BannerTextContainer>\n </Styled.BannerContainer>\n ),\n);\n"],"names":["animationSettings","Banner","memo","primaryText","secondaryText","topInset","isLoading","lottiePath","bgFromTopPosition","bgFromRightPosition","custEle","jsxs","Styled.BannerContainer","jsx","Styled.CircleLottieView","LottieAnimation","Styled.BannerTextContainer","Styled.CountTextWrapper","Text","Separator"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"banner.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner.tsx"],"sourcesContent":["import type { IBannerProps } from './banner-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './banner-styled';\n\ndeclare global {\n interface Window {\n topInset?: number;\n }\n}\n\nconst animationSettings = { renderer: 'canvas' };\n\nexport const Banner: FC<IBannerProps> = memo(\n ({\n primaryText,\n secondaryText,\n topInset = window.topInset || 0,\n isLoading = false,\n lottiePath,\n bgFromTopPosition = 0,\n bgFromRightPosition = 0,\n custEle,\n }) => (\n <Styled.BannerContainer topInset={topInset}>\n <Styled.CircleLottieView\n topInset={topInset}\n bgFromTopPosition={bgFromTopPosition}\n bgFromRightPosition={bgFromRightPosition}\n >\n <LottieAnimation src={lottiePath} settings={animationSettings} />\n </Styled.CircleLottieView>\n\n <Styled.BannerTextContainer>\n <Styled.CountTextWrapper topInset={topInset}>\n <Text $renderAs=\"ac4\" $color=\"WHITE\">\n {primaryText}\n </Text>\n <Separator height={4} />\n <Text $renderAs=\"ah4\" $color=\"WHITE\">\n {isLoading ? '__' : secondaryText}\n </Text>\n </Styled.CountTextWrapper>\n\n {custEle}\n </Styled.BannerTextContainer>\n </Styled.BannerContainer>\n ),\n);\n"],"names":["animationSettings","Banner","memo","primaryText","secondaryText","topInset","isLoading","lottiePath","bgFromTopPosition","bgFromRightPosition","custEle","jsxs","Styled.BannerContainer","jsx","Styled.CircleLottieView","LottieAnimation","Styled.BannerTextContainer","Styled.CountTextWrapper","Text","Separator"],"mappings":";;;;;;AAgBA,MAAMA,IAAoB,EAAE,UAAU,YAEzBC,IAA2BC;AAAA,EACtC,CAAC;AAAA,IACC,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC,IAAW,OAAO,YAAY;AAAA,IAC9B,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,qBAAAC,IAAsB;AAAA,IACtB,SAAAC;AAAA,EAEA,MAAA,gBAAAC,EAACC,GAAA,EAAuB,UAAAP,GACtB,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,UAAAT;AAAA,QACA,mBAAAG;AAAA,QACA,qBAAAC;AAAA,QAEA,UAAC,gBAAAI,EAAAE,GAAA,EAAgB,KAAKR,GAAY,UAAUP,GAAmB;AAAA,MAAA;AAAA,IACjE;AAAA,IAEA,gBAAAW,EAACK,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAL,EAAAM,GAAA,EAAwB,UAAAZ,GACvB,UAAA;AAAA,QAAA,gBAAAQ,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UACHf,GAAA;AAAA,QACA,gBAAAU,EAACM,GAAU,EAAA,QAAQ,EAAG,CAAA;AAAA,QACtB,gBAAAN,EAACK,KAAK,WAAU,OAAM,QAAO,SAC1B,UAAAZ,IAAY,OAAOF,EACtB,CAAA;AAAA,MAAA,GACF;AAAA,MAECM;AAAA,IAAA,GACH;AAAA,EAAA,GACF;AAEJ;"}
|
package/dist/features/circle-games/leaderboard/comps/navigation-button/navigation-button-styled.js
CHANGED
|
@@ -7,7 +7,7 @@ const i = o.div`
|
|
|
7
7
|
left: ${({ align: t = "left" }) => t === "left" ? "20px" : "unset"};
|
|
8
8
|
right: ${({ align: t = "left" }) => t === "right" ? "20px" : "unset"};
|
|
9
9
|
z-index: 10;
|
|
10
|
-
bottom:
|
|
10
|
+
bottom: ${(window.bottomInset || 0) + 50}px;
|
|
11
11
|
`;
|
|
12
12
|
export {
|
|
13
13
|
n as ExtendedIconButton,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-button-styled.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/navigation-button/navigation-button-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const NavigationActionWrapper = styled.div`\n position: relative;\n width: 100%;\n`;\n\nexport const ExtendedIconButton = styled.div<{ align?: 'left' | 'right' }>`\n position: absolute;\n left: ${({ align = 'left' }) => (align === 'left' ? '20px' : 'unset')};\n right: ${({ align = 'left' }) => (align === 'right' ? '20px' : 'unset')};\n z-index: 10;\n bottom:
|
|
1
|
+
{"version":3,"file":"navigation-button-styled.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/navigation-button/navigation-button-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const NavigationActionWrapper = styled.div`\n position: relative;\n width: 100%;\n`;\n\nexport const ExtendedIconButton = styled.div<{ align?: 'left' | 'right' }>`\n position: absolute;\n left: ${({ align = 'left' }) => (align === 'left' ? '20px' : 'unset')};\n right: ${({ align = 'left' }) => (align === 'right' ? '20px' : 'unset')};\n z-index: 10;\n bottom: ${(window.bottomInset || 0) + 50}px;\n`;\n"],"names":["NavigationActionWrapper","styled","ExtendedIconButton","align"],"mappings":";AAEO,MAAMA,IAA0BC,EAAO;AAAA;AAAA;AAAA,GAKjCC,IAAqBD,EAAO;AAAA;AAAA,UAE/B,CAAC,EAAE,OAAAE,IAAQ,OAAA,MAAcA,MAAU,SAAS,SAAS,OAAQ;AAAA,WAC5D,CAAC,EAAE,OAAAA,IAAQ,OAAA,MAAcA,MAAU,UAAU,SAAS,OAAQ;AAAA;AAAA,aAE5D,OAAO,eAAe,KAAK,EAAE;AAAA;"}
|
package/dist/features/circle-games/leaderboard/comps/navigation-button/navigation-button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-button.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/navigation-button/navigation-button.tsx"],"sourcesContent":["import type { INavigationButtonProps } from './navigation-button-types';\n\nimport React, { memo } from 'react';\n\nimport CrossIcon from '../../../../../assets/line-icons/icons/cross';\nimport LeftIcon from '../../../../../assets/line-icons/icons/left';\nimport RightIcon from '../../../../../assets/line-icons/icons/right';\nimport { ArcButton } from '../../../../ui/arc-button/arc-button';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { LEADERBOARD_ANALYTICS_EVENTS } from '../../leaderboard-analytics-events';\nimport * as Styled from './navigation-button-styled';\n\nexport const NavigationButton: React.FC<INavigationButtonProps> = memo(\n ({ labels, onLeftClick, onRightClick, currIndex, onClose, disableSwipe }) => {\n return (\n <Styled.NavigationActionWrapper>\n <Styled.ExtendedIconButton align=\"left\">\n <IconButton\n Icon={LeftIcon}\n size=\"small\"\n onClick={onLeftClick}\n renderAs=\"secondary\"\n analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.PREV_ON_LEADERBOARD}\n disabled={disableSwipe || currIndex === 0}\n />\n </Styled.ExtendedIconButton>\n {/* Right Navigation IconButton */}\n <Styled.ExtendedIconButton align=\"right\">\n <IconButton\n Icon={RightIcon}\n size=\"small\"\n onClick={onRightClick}\n renderAs=\"secondary\"\n analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.NEXT_ON_LEADERBOARD}\n disabled={disableSwipe || currIndex === labels.length - 1}\n />\n </Styled.ExtendedIconButton>\n\n <ArcButton\n renderAs=\"primary\"\n onClick={onClose}\n analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.LEADERBOARD_CLOSED}\n >\n {/* Left Navigation IconButton */}\n <CrossIcon color=\"WHITE\" />\n </ArcButton>\n </Styled.NavigationActionWrapper>\n );\n },\n);\n"],"names":["NavigationButton","memo","labels","onLeftClick","onRightClick","currIndex","onClose","disableSwipe","jsxs","Styled.NavigationActionWrapper","jsx","Styled.ExtendedIconButton","IconButton","LeftIcon","LEADERBOARD_ANALYTICS_EVENTS","RightIcon","ArcButton","CrossIcon"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"navigation-button.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/navigation-button/navigation-button.tsx"],"sourcesContent":["import type { INavigationButtonProps } from './navigation-button-types';\n\nimport React, { memo } from 'react';\n\nimport CrossIcon from '../../../../../assets/line-icons/icons/cross';\nimport LeftIcon from '../../../../../assets/line-icons/icons/left';\nimport RightIcon from '../../../../../assets/line-icons/icons/right';\nimport { ArcButton } from '../../../../ui/arc-button/arc-button';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { LEADERBOARD_ANALYTICS_EVENTS } from '../../leaderboard-analytics-events';\nimport * as Styled from './navigation-button-styled';\n\ndeclare global {\n interface Window {\n bottomInset?: number;\n }\n}\n\nexport const NavigationButton: React.FC<INavigationButtonProps> = memo(\n ({ labels, onLeftClick, onRightClick, currIndex, onClose, disableSwipe }) => {\n return (\n <Styled.NavigationActionWrapper>\n <Styled.ExtendedIconButton align=\"left\">\n <IconButton\n Icon={LeftIcon}\n size=\"small\"\n onClick={onLeftClick}\n renderAs=\"secondary\"\n analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.PREV_ON_LEADERBOARD}\n disabled={disableSwipe || currIndex === 0}\n />\n </Styled.ExtendedIconButton>\n {/* Right Navigation IconButton */}\n <Styled.ExtendedIconButton align=\"right\">\n <IconButton\n Icon={RightIcon}\n size=\"small\"\n onClick={onRightClick}\n renderAs=\"secondary\"\n analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.NEXT_ON_LEADERBOARD}\n disabled={disableSwipe || currIndex === labels.length - 1}\n />\n </Styled.ExtendedIconButton>\n\n <ArcButton\n renderAs=\"primary\"\n onClick={onClose}\n analyticsLabel={LEADERBOARD_ANALYTICS_EVENTS.LEADERBOARD_CLOSED}\n >\n {/* Left Navigation IconButton */}\n <CrossIcon color=\"WHITE\" />\n </ArcButton>\n </Styled.NavigationActionWrapper>\n );\n },\n);\n"],"names":["NavigationButton","memo","labels","onLeftClick","onRightClick","currIndex","onClose","disableSwipe","jsxs","Styled.NavigationActionWrapper","jsx","Styled.ExtendedIconButton","IconButton","LeftIcon","LEADERBOARD_ANALYTICS_EVENTS","RightIcon","ArcButton","CrossIcon"],"mappings":";;;;;;;;;AAkBO,MAAMA,IAAqDC;AAAA,EAChE,CAAC,EAAE,QAAAC,GAAQ,aAAAC,GAAa,cAAAC,GAAc,WAAAC,GAAW,SAAAC,GAAS,cAAAC,QAEtD,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAA0B,OAAM,QAC/B,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAMC;AAAA,QACN,MAAK;AAAA,QACL,SAASV;AAAA,QACT,UAAS;AAAA,QACT,gBAAgBW,EAA6B;AAAA,QAC7C,UAAUP,KAAgBF,MAAc;AAAA,MAAA;AAAA,IAAA,GAE5C;AAAA,IAEC,gBAAAK,EAAAC,GAAA,EAA0B,OAAM,SAC/B,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAMG;AAAA,QACN,MAAK;AAAA,QACL,SAASX;AAAA,QACT,UAAS;AAAA,QACT,gBAAgBU,EAA6B;AAAA,QAC7C,UAAUP,KAAgBF,MAAcH,EAAO,SAAS;AAAA,MAAA;AAAA,IAAA,GAE5D;AAAA,IAEA,gBAAAQ;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,SAASV;AAAA,QACT,gBAAgBQ,EAA6B;AAAA,QAG7C,UAAA,gBAAAJ,EAACO,GAAU,EAAA,OAAM,QAAQ,CAAA;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,EAAA,CAAA;AAGN;"}
|
|
@@ -59,11 +59,11 @@ const c = i.div`
|
|
|
59
59
|
align-items: center;
|
|
60
60
|
justify-content: center;
|
|
61
61
|
color: ${({ theme: t }) => t.colors.WHITE};
|
|
62
|
-
`,
|
|
62
|
+
`, x = i.div`
|
|
63
63
|
position: absolute;
|
|
64
64
|
transform: translateY(-55px);
|
|
65
65
|
z-index: 3;
|
|
66
|
-
`,
|
|
66
|
+
`, u = i.div`
|
|
67
67
|
position: absolute;
|
|
68
68
|
width: 100%;
|
|
69
69
|
height: 100%;
|
|
@@ -77,10 +77,10 @@ const c = i.div`
|
|
|
77
77
|
align-items: center;
|
|
78
78
|
left: 0;
|
|
79
79
|
right: 0;
|
|
80
|
-
bottom: 0;
|
|
81
|
-
`,
|
|
80
|
+
bottom: ${window.bottomInset || 0}px;
|
|
81
|
+
`, b = i.button`
|
|
82
82
|
position: absolute;
|
|
83
|
-
top:
|
|
83
|
+
top: ${(window.topInset || 0) + 20}px;
|
|
84
84
|
left: 16px;
|
|
85
85
|
outline: none;
|
|
86
86
|
border: none;
|
|
@@ -90,14 +90,14 @@ const c = i.div`
|
|
|
90
90
|
`;
|
|
91
91
|
export {
|
|
92
92
|
d as BackgroundImage,
|
|
93
|
-
|
|
93
|
+
u as CircularProgress,
|
|
94
94
|
h as CircularProgressContainer,
|
|
95
95
|
l as CircularStepsContainer,
|
|
96
96
|
p as CircularStepsWrapper,
|
|
97
97
|
c as CustEleContainer,
|
|
98
98
|
g as CustomDataContainer,
|
|
99
|
-
|
|
99
|
+
x as Label,
|
|
100
100
|
a as ScreenWrapper,
|
|
101
|
-
|
|
101
|
+
b as TransparentIconButton
|
|
102
102
|
};
|
|
103
103
|
//# sourceMappingURL=circular-steps-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"circular-steps-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/circular-steps/circular-steps-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CIRCLE_SIZE_GUTTER, CIRCULAR_STEP_TOP_DISTANCE } from './constants';\n\ninterface ICircularStepsContainerProps {\n width: number;\n height: number;\n}\n\ninterface IBlurGameContainerProps {\n blurType: 'light' | 'dark';\n blurAmount: number;\n}\n\nexport const ScreenWrapper = styled.div<ICircularStepsContainerProps>`\n position: relative;\n width: ${({ width }) => `${width}px`};\n height: ${({ height }) => `${height}px`};\n`;\n\nexport const CircularStepsContainer = styled.div`\n display: flex;\n position: relative;\n height: inherit;\n width: inherit;\n margin: 0px auto;\n`;\n\nexport const CircularStepsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: center;\n width: 100%;\n height: 100%;\n position: relative;\n`;\n\nexport const BackgroundImage = styled.div`\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n bottom: 0px;\n right: 0;\n background-size: contain;\n`;\n\nexport const BlurredContainerWrapper = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n`;\n\nexport const BlurredGameContainer = styled.div<IBlurGameContainerProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ blurType }) =>\n blurType === 'dark' ? 'rgba(0, 0, 0, 0.5)' : ({ theme }) => theme.colors.WHITE};\n backdrop-filter: ${({ blurAmount }) => `blur(${blurAmount}px)`};\n`;\n\nexport const CustEleContainer = styled.div`\n position: relative;\n top: 10px;\n left: 0;\n right: 0;\n z-index: 2;\n margin: 16px;\n`;\n\nexport const CircularProgressContainer = styled.div<{\n isVerticallyCentered?: boolean;\n width: number;\n height: number;\n}>`\n margin-top: ${({ height }) => (height * CIRCULAR_STEP_TOP_DISTANCE) / 100}px;\n width: ${({ width }) => width * CIRCLE_SIZE_GUTTER}px;\n height: ${({ width }) => width * CIRCLE_SIZE_GUTTER}px;\n position: relative;\n overflow: hidden;\n background: ${({ theme }) => theme.colors.BLACK_2};\n border-radius: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const Label = styled.div`\n position: absolute;\n transform: translateY(-55px);\n z-index: 3;\n`;\n\nexport const CircularProgress = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n transform: scale(1.175);\n pointer-events: none;\n`;\n\nexport const CustomDataContainer = styled.div`\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n left: 0;\n right: 0;\n bottom: 0;\n`;\n\nexport const TransparentIconButton = styled.button`\n position: absolute;\n top:
|
|
1
|
+
{"version":3,"file":"circular-steps-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/circular-steps/circular-steps-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CIRCLE_SIZE_GUTTER, CIRCULAR_STEP_TOP_DISTANCE } from './constants';\n\ninterface ICircularStepsContainerProps {\n width: number;\n height: number;\n}\n\ninterface IBlurGameContainerProps {\n blurType: 'light' | 'dark';\n blurAmount: number;\n}\n\nexport const ScreenWrapper = styled.div<ICircularStepsContainerProps>`\n position: relative;\n width: ${({ width }) => `${width}px`};\n height: ${({ height }) => `${height}px`};\n`;\n\nexport const CircularStepsContainer = styled.div`\n display: flex;\n position: relative;\n height: inherit;\n width: inherit;\n margin: 0px auto;\n`;\n\nexport const CircularStepsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: center;\n width: 100%;\n height: 100%;\n position: relative;\n`;\n\nexport const BackgroundImage = styled.div`\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n bottom: 0px;\n right: 0;\n background-size: contain;\n`;\n\nexport const BlurredContainerWrapper = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n`;\n\nexport const BlurredGameContainer = styled.div<IBlurGameContainerProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ blurType }) =>\n blurType === 'dark' ? 'rgba(0, 0, 0, 0.5)' : ({ theme }) => theme.colors.WHITE};\n backdrop-filter: ${({ blurAmount }) => `blur(${blurAmount}px)`};\n`;\n\nexport const CustEleContainer = styled.div`\n position: relative;\n top: 10px;\n left: 0;\n right: 0;\n z-index: 2;\n margin: 16px;\n`;\n\nexport const CircularProgressContainer = styled.div<{\n isVerticallyCentered?: boolean;\n width: number;\n height: number;\n}>`\n margin-top: ${({ height }) => (height * CIRCULAR_STEP_TOP_DISTANCE) / 100}px;\n width: ${({ width }) => width * CIRCLE_SIZE_GUTTER}px;\n height: ${({ width }) => width * CIRCLE_SIZE_GUTTER}px;\n position: relative;\n overflow: hidden;\n background: ${({ theme }) => theme.colors.BLACK_2};\n border-radius: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const Label = styled.div`\n position: absolute;\n transform: translateY(-55px);\n z-index: 3;\n`;\n\nexport const CircularProgress = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n transform: scale(1.175);\n pointer-events: none;\n`;\n\nexport const CustomDataContainer = styled.div`\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n left: 0;\n right: 0;\n bottom: ${window.bottomInset || 0}px;\n`;\n\nexport const TransparentIconButton = styled.button`\n position: absolute;\n top: ${(window.topInset || 0) + 20}px;\n left: 16px;\n outline: none;\n border: none;\n background: transparent;\n cursor: pointer;\n z-index: 1;\n`;\n"],"names":["ScreenWrapper","styled","width","height","CircularStepsContainer","CircularStepsWrapper","BackgroundImage","blurType","theme","blurAmount","CustEleContainer","CircularProgressContainer","CIRCULAR_STEP_TOP_DISTANCE","CIRCLE_SIZE_GUTTER","Label","CircularProgress","CustomDataContainer","TransparentIconButton"],"mappings":";;AAcO,MAAMA,IAAgBC,EAAO;AAAA;AAAA,WAEzB,CAAC,EAAE,OAAAC,EAAY,MAAA,GAAGA,CAAK,IAAI;AAAA,YAC1B,CAAC,EAAE,QAAAC,EAAa,MAAA,GAAGA,CAAM,IAAI;AAAA,GAG5BC,IAAyBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhCI,IAAuBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU9BK,IAAkBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUCA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOVA,EAAO;AAAA;AAAA;AAAA,sBAGrB,CAAC,EAAE,UAAAM,QACrBA,MAAa,SAAS,uBAAuB,CAAC,EAAE,OAAAC,EAAY,MAAAA,EAAM,OAAO,KAAK;AAAA,qBAC7D,CAAC,EAAE,YAAAC,EAAiB,MAAA,QAAQA,CAAU,KAAK;AAAA;AAGzD,MAAMC,IAAmBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS1BU,IAA4BV,EAAO;AAAA,gBAKhC,CAAC,EAAE,QAAAE,EAAA,MAAcA,IAASS,IAA8B,GAAG;AAAA,WAChE,CAAC,EAAE,OAAAV,QAAYA,IAAQW,CAAkB;AAAA,YACxC,CAAC,EAAE,OAAAX,QAAYA,IAAQW,CAAkB;AAAA;AAAA;AAAA,gBAGrC,CAAC,EAAE,OAAAL,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,GAG/BM,IAAQb,EAAO;AAAA;AAAA;AAAA;AAAA,GAMfc,IAAmBd,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS1Be,IAAsBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAO9B,OAAO,eAAe,CAAC;AAAA,GAGtBgB,IAAwBhB,EAAO;AAAA;AAAA,UAElC,OAAO,YAAY,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"circular-steps.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/circular-steps/circular-steps.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { ICircularStepsProps } from './circular-steps-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useRef } from 'react';\n\nimport CircleBackIcon from '../../../../../assets/line-icons/icons/circle-back';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './circular-steps-styled';\nimport { TOTAL_FRAMES } from './constants';\n\nexport const BackgroundImage = ({ img }: { img: React.ReactNode }) => {\n return <Styled.BackgroundImage>{img}</Styled.BackgroundImage>;\n};\n\nconst animationSettings = {\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n};\n\nexport const CircularSteps: FC<ICircularStepsProps> = ({ steps, currentStepIndex, dimensions }) => {\n const { width, height } = dimensions;\n\n const step = steps[currentStepIndex];\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const previousStepIndex = useRef<number>(-1);\n\n const handleBack = () => {\n steps[currentStepIndex]?.onBack?.();\n };\n\n const onLottieRender = useCallback(() => {\n if (animationRef.current && step?.isProgressAnimationRequired) {\n const actualSteps = steps.filter(_step => _step.isProgressAnimationRequired);\n const stepSize = TOTAL_FRAMES / actualSteps.length;\n\n const validPreviousIndex = previousStepIndex.current >= 0 ? previousStepIndex.current : 0;\n\n const fromFrame = Math.round(validPreviousIndex * stepSize + 1);\n const toFrame = Math.round(currentStepIndex * stepSize);\n\n previousStepIndex.current = currentStepIndex;\n animationRef.current.playSegments([fromFrame, toFrame], true);\n }\n }, [currentStepIndex, step?.isProgressAnimationRequired, steps]);\n\n return (\n <>\n {step ? (\n <Styled.ScreenWrapper width={width} height={height}>\n {step.onBack ? (\n <Styled.TransparentIconButton>\n <CircleBackIcon onClick={handleBack} />\n </Styled.TransparentIconButton>\n ) : null}\n {step.background ? <BackgroundImage img={step.background} /> : null}\n <Styled.CircularStepsContainer>\n <Styled.CircularStepsWrapper>\n {step.custEle ? (\n <Styled.CustEleContainer>{step.custEle}</Styled.CustEleContainer>\n ) : null}\n\n {/*circular data container*/}\n {step.custEleInsideStep ? (\n <Styled.CircularProgressContainer width={width} height={height}>\n {step.isProgressAnimationRequired ? (\n <Styled.CircularProgress>\n <LottieAnimation\n ref={animationRef}\n src={LOTTIE.LEVELUP_RINGS}\n settings={animationSettings}\n onRender={onLottieRender}\n />\n </Styled.CircularProgress>\n ) : null}\n\n {step.label ? (\n <Styled.Label>\n <Text $renderAs=\"ab2\" $color=\"WHITE\">\n {step.label}\n </Text>\n </Styled.Label>\n ) : null}\n {step.custEleInsideStep}\n </Styled.CircularProgressContainer>\n ) : null}\n </Styled.CircularStepsWrapper>\n </Styled.CircularStepsContainer>\n {/* custom data container below circle */}\n {step.custEleBelowStep ? (\n <Styled.CustomDataContainer>{step.custEleBelowStep}</Styled.CustomDataContainer>\n ) : null}\n </Styled.ScreenWrapper>\n ) : null}\n </>\n );\n};\n"],"names":["BackgroundImage","img","jsx","Styled.BackgroundImage","animationSettings","CircularSteps","steps","currentStepIndex","dimensions","width","height","step","animationRef","useRef","previousStepIndex","handleBack","_b","_a","onLottieRender","useCallback","actualSteps","_step","stepSize","TOTAL_FRAMES","validPreviousIndex","fromFrame","toFrame","jsxs","Styled.ScreenWrapper","Styled.TransparentIconButton","CircleBackIcon","Styled.CircularStepsContainer","Styled.CircularStepsWrapper","Styled.CustEleContainer","Styled.CircularProgressContainer","Styled.CircularProgress","LottieAnimation","LOTTIE","Styled.Label","Text","Styled.CustomDataContainer"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"circular-steps.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/circular-steps/circular-steps.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { ICircularStepsProps } from './circular-steps-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useRef } from 'react';\n\nimport CircleBackIcon from '../../../../../assets/line-icons/icons/circle-back';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './circular-steps-styled';\nimport { TOTAL_FRAMES } from './constants';\n\ndeclare global {\n interface Window {\n topInset?: number;\n bottomInset?: number;\n }\n}\n\nexport const BackgroundImage = ({ img }: { img: React.ReactNode }) => {\n return <Styled.BackgroundImage>{img}</Styled.BackgroundImage>;\n};\n\nconst animationSettings = {\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n};\n\nexport const CircularSteps: FC<ICircularStepsProps> = ({ steps, currentStepIndex, dimensions }) => {\n const { width, height } = dimensions;\n\n const step = steps[currentStepIndex];\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const previousStepIndex = useRef<number>(-1);\n\n const handleBack = () => {\n steps[currentStepIndex]?.onBack?.();\n };\n\n const onLottieRender = useCallback(() => {\n if (animationRef.current && step?.isProgressAnimationRequired) {\n const actualSteps = steps.filter(_step => _step.isProgressAnimationRequired);\n const stepSize = TOTAL_FRAMES / actualSteps.length;\n\n const validPreviousIndex = previousStepIndex.current >= 0 ? previousStepIndex.current : 0;\n\n const fromFrame = Math.round(validPreviousIndex * stepSize + 1);\n const toFrame = Math.round(currentStepIndex * stepSize);\n\n previousStepIndex.current = currentStepIndex;\n animationRef.current.playSegments([fromFrame, toFrame], true);\n }\n }, [currentStepIndex, step?.isProgressAnimationRequired, steps]);\n\n return (\n <>\n {step ? (\n <Styled.ScreenWrapper width={width} height={height}>\n {step.onBack ? (\n <Styled.TransparentIconButton>\n <CircleBackIcon onClick={handleBack} />\n </Styled.TransparentIconButton>\n ) : null}\n {step.background ? <BackgroundImage img={step.background} /> : null}\n <Styled.CircularStepsContainer>\n <Styled.CircularStepsWrapper>\n {step.custEle ? (\n <Styled.CustEleContainer>{step.custEle}</Styled.CustEleContainer>\n ) : null}\n\n {/*circular data container*/}\n {step.custEleInsideStep ? (\n <Styled.CircularProgressContainer width={width} height={height}>\n {step.isProgressAnimationRequired ? (\n <Styled.CircularProgress>\n <LottieAnimation\n ref={animationRef}\n src={LOTTIE.LEVELUP_RINGS}\n settings={animationSettings}\n onRender={onLottieRender}\n />\n </Styled.CircularProgress>\n ) : null}\n\n {step.label ? (\n <Styled.Label>\n <Text $renderAs=\"ab2\" $color=\"WHITE\">\n {step.label}\n </Text>\n </Styled.Label>\n ) : null}\n {step.custEleInsideStep}\n </Styled.CircularProgressContainer>\n ) : null}\n </Styled.CircularStepsWrapper>\n </Styled.CircularStepsContainer>\n {/* custom data container below circle */}\n {step.custEleBelowStep ? (\n <Styled.CustomDataContainer>{step.custEleBelowStep}</Styled.CustomDataContainer>\n ) : null}\n </Styled.ScreenWrapper>\n ) : null}\n </>\n );\n};\n"],"names":["BackgroundImage","img","jsx","Styled.BackgroundImage","animationSettings","CircularSteps","steps","currentStepIndex","dimensions","width","height","step","animationRef","useRef","previousStepIndex","handleBack","_b","_a","onLottieRender","useCallback","actualSteps","_step","stepSize","TOTAL_FRAMES","validPreviousIndex","fromFrame","toFrame","jsxs","Styled.ScreenWrapper","Styled.TransparentIconButton","CircleBackIcon","Styled.CircularStepsContainer","Styled.CircularStepsWrapper","Styled.CustEleContainer","Styled.CircularProgressContainer","Styled.CircularProgress","LottieAnimation","LOTTIE","Styled.Label","Text","Styled.CustomDataContainer"],"mappings":";;;;;;;;AAoBO,MAAMA,IAAkB,CAAC,EAAE,KAAAC,QACxB,gBAAAC,EAAAC,GAAA,EAAwB,UAAIF,EAAA,CAAA,GAGhCG,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEaC,IAAyC,CAAC,EAAE,OAAAC,GAAO,kBAAAC,GAAkB,YAAAC,QAAiB;AAC3F,QAAA,EAAE,OAAAC,GAAO,QAAAC,EAAW,IAAAF,GAEpBG,IAAOL,EAAMC,CAAgB,GAC7BK,IAAeC,EAAmC,IAAI,GACtDC,IAAoBD,EAAe,EAAE,GAErCE,IAAa,MAAM;;AACjB,KAAAC,KAAAC,IAAAX,EAAAC,CAAgB,MAAhB,gBAAAU,EAAmB,WAAnB,QAAAD,EAAA,KAAAC;AAAA,EAA4B,GAG9BC,IAAiBC,EAAY,MAAM;AACnC,QAAAP,EAAa,YAAWD,KAAA,QAAAA,EAAM,8BAA6B;AAC7D,YAAMS,IAAcd,EAAM,OAAO,CAAAe,MAASA,EAAM,2BAA2B,GACrEC,IAAWC,IAAeH,EAAY,QAEtCI,IAAqBV,EAAkB,WAAW,IAAIA,EAAkB,UAAU,GAElFW,IAAY,KAAK,MAAMD,IAAqBF,IAAW,CAAC,GACxDI,IAAU,KAAK,MAAMnB,IAAmBe,CAAQ;AAEtD,MAAAR,EAAkB,UAAUP,GAC5BK,EAAa,QAAQ,aAAa,CAACa,GAAWC,CAAO,GAAG,EAAI;AAAA,IAC9D;AAAA,KACC,CAACnB,GAAkBI,KAAA,gBAAAA,EAAM,6BAA6BL,CAAK,CAAC;AAE/D,gCAEK,UACCK,IAAA,gBAAAgB,EAACC,GAAA,EAAqB,OAAAnB,GAAc,QAAAC,GACjC,UAAA;AAAA,IAAKC,EAAA,SACH,gBAAAT,EAAA2B,GAAA,EACC,4BAACC,GAAe,EAAA,SAASf,GAAY,EAAA,CACvC,IACE;AAAA,IACHJ,EAAK,aAAa,gBAAAT,EAACF,KAAgB,KAAKW,EAAK,WAAY,CAAA,IAAK;AAAA,sBAC9DoB,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EACE,UAAA;AAAA,MAAArB,EAAK,UACH,gBAAAT,EAAA+B,GAAA,EAAyB,UAAAtB,EAAK,QAAQ,CAAA,IACrC;AAAA,MAGHA,EAAK,oBACJ,gBAAAgB,EAACO,GAAA,EAAiC,OAAAzB,GAAc,QAAAC,GAC7C,UAAA;AAAA,QAAAC,EAAK,8BACJ,gBAAAT,EAACiC,GAAA,EACC,UAAA,gBAAAjC;AAAA,UAACkC;AAAA,UAAA;AAAA,YACC,KAAKxB;AAAA,YACL,KAAKyB,EAAO;AAAA,YACZ,UAAUjC;AAAA,YACV,UAAUc;AAAA,UAAA;AAAA,WAEd,IACE;AAAA,QAEHP,EAAK,QACH,gBAAAT,EAAAoC,GAAA,EACC,UAAA,gBAAApC,EAACqC,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UAAK5B,EAAA,MACR,CAAA,EACF,CAAA,IACE;AAAA,QACHA,EAAK;AAAA,MAAA,EAAA,CACR,IACE;AAAA,IAAA,EAAA,CACN,EACF,CAAA;AAAA,IAECA,EAAK,mBACH,gBAAAT,EAAAsC,GAAA,EAA4B,UAAA7B,EAAK,iBAAiB,CAAA,IACjD;AAAA,EAAA,GACN,IACE,KACN,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arc-button.js","sources":["../../../../src/features/ui/arc-button/arc-button.tsx"],"sourcesContent":["import type { IArcButtonProps } from './arc-button-types';\nimport type { PropsWithChildren } from 'react';\n\nimport { memo, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport useClickHandler from '../hooks/use-click-handler';\nimport * as Styled from './arc-button-styled';\n\nexport const ArcButton = memo(\n forwardRef<HTMLDivElement, PropsWithChildren<IArcButtonProps>>(\n (\n { onClick, renderAs = 'primary', children, analyticsLabel, analyticsProps, disabled },\n ref,\n ) => {\n const { playButtonSound } = useCircleSounds();\n const { handleClick } = useClickHandler({ analyticsLabel, analyticsProps }, onClick);\n\n const buttonRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => buttonRef.current!, [buttonRef]);\n\n const handleOnClick = useCallback(() => {\n playButtonSound();\n handleClick();\n }, [playButtonSound, handleClick]);\n\n return (\n <Styled.ButtonWrapper>\n <Styled.ButtonShape\n ref={buttonRef}\n $renderAs={renderAs}\n onClick={!disabled ? handleOnClick : undefined}\n />\n <Styled.ButtonContentContainer>\n <Styled.ButtonLabelWrapper>{children}</Styled.ButtonLabelWrapper>\n </Styled.ButtonContentContainer>\n </Styled.ButtonWrapper>\n );\n },\n ),\n);\n"],"names":["ArcButton","memo","forwardRef","onClick","renderAs","children","analyticsLabel","analyticsProps","disabled","ref","playButtonSound","useCircleSounds","handleClick","useClickHandler","buttonRef","useRef","useImperativeHandle","handleOnClick","useCallback","jsxs","Styled.ButtonWrapper","jsx","Styled.ButtonShape","Styled.ButtonContentContainer","Styled.ButtonLabelWrapper"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"arc-button.js","sources":["../../../../src/features/ui/arc-button/arc-button.tsx"],"sourcesContent":["import type { IArcButtonProps } from './arc-button-types';\nimport type { PropsWithChildren } from 'react';\n\nimport { memo, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport useClickHandler from '../hooks/use-click-handler';\nimport * as Styled from './arc-button-styled';\n\ndeclare global {\n interface Window {\n bottomInset?: number;\n }\n}\n\nexport const ArcButton = memo(\n forwardRef<HTMLDivElement, PropsWithChildren<IArcButtonProps>>(\n (\n { onClick, renderAs = 'primary', children, analyticsLabel, analyticsProps, disabled },\n ref,\n ) => {\n const { playButtonSound } = useCircleSounds();\n const { handleClick } = useClickHandler({ analyticsLabel, analyticsProps }, onClick);\n\n const buttonRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => buttonRef.current!, [buttonRef]);\n\n const handleOnClick = useCallback(() => {\n playButtonSound();\n handleClick();\n }, [playButtonSound, handleClick]);\n\n return (\n <Styled.ButtonWrapper>\n <Styled.ButtonShape\n ref={buttonRef}\n $renderAs={renderAs}\n onClick={!disabled ? handleOnClick : undefined}\n />\n <Styled.ButtonContentContainer>\n <Styled.ButtonLabelWrapper>{children}</Styled.ButtonLabelWrapper>\n </Styled.ButtonContentContainer>\n </Styled.ButtonWrapper>\n );\n },\n ),\n);\n"],"names":["ArcButton","memo","forwardRef","onClick","renderAs","children","analyticsLabel","analyticsProps","disabled","ref","playButtonSound","useCircleSounds","handleClick","useClickHandler","buttonRef","useRef","useImperativeHandle","handleOnClick","useCallback","jsxs","Styled.ButtonWrapper","jsx","Styled.ButtonShape","Styled.ButtonContentContainer","Styled.ButtonLabelWrapper"],"mappings":";;;;;AAeO,MAAMA,IAAYC;AAAA,EACvBC;AAAA,IACE,CACE,EAAE,SAAAC,GAAS,UAAAC,IAAW,WAAW,UAAAC,GAAU,gBAAAC,GAAgB,gBAAAC,GAAgB,UAAAC,EAAS,GACpFC,MACG;AACG,YAAA,EAAE,iBAAAC,MAAoBC,KACtB,EAAE,aAAAC,MAAgBC,EAAgB,EAAE,gBAAAP,GAAgB,gBAAAC,EAAA,GAAkBJ,CAAO,GAE7EW,IAAYC,EAAuB,IAAI;AAE7C,MAAAC,EAAoBP,GAAK,MAAMK,EAAU,SAAU,CAACA,CAAS,CAAC;AAExD,YAAAG,IAAgBC,EAAY,MAAM;AACtB,QAAAR,KACJE;MAAA,GACX,CAACF,GAAiBE,CAAW,CAAC;AAG/B,aAAA,gBAAAO,EAACC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,KAAKR;AAAA,YACL,WAAWV;AAAA,YACX,SAAUI,IAA2B,SAAhBS;AAAA,UAAgB;AAAA,QACvC;AAAA,QACA,gBAAAI,EAACE,GAAA,EACC,4BAACC,GAAA,EAA2B,UAAAnB,EAAS,CAAA,GACvC;AAAA,MACF,EAAA,CAAA;AAAA,IAEJ;AAAA,EACF;AACF;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const T = 1680,
|
|
1
|
+
const T = 1680, o = 64 + (window.bottomInset || 0), t = 112 + (window.bottomInset || 0);
|
|
2
2
|
export {
|
|
3
3
|
T as ABSOLUTE_ARC_BUTTON_WIDTH,
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
o as ARC_BUTTON_BOTTOM_OFFSET,
|
|
5
|
+
t as ARC_BUTTON_WRAPPER_HEIGHT
|
|
6
6
|
};
|
|
7
7
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../src/features/ui/arc-button/constants.ts"],"sourcesContent":["export const ABSOLUTE_ARC_BUTTON_WIDTH = 1680;\nexport const ARC_BUTTON_BOTTOM_OFFSET = 64;\nexport const ARC_BUTTON_WRAPPER_HEIGHT = 112;\n"],"names":["ABSOLUTE_ARC_BUTTON_WIDTH","ARC_BUTTON_BOTTOM_OFFSET","ARC_BUTTON_WRAPPER_HEIGHT"],"mappings":"AAAO,MAAMA,IAA4B,MAC5BC,IAA2B,
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/features/ui/arc-button/constants.ts"],"sourcesContent":["export const ABSOLUTE_ARC_BUTTON_WIDTH = 1680;\nexport const ARC_BUTTON_BOTTOM_OFFSET = 64 + (window.bottomInset || 0);\nexport const ARC_BUTTON_WRAPPER_HEIGHT = 112 + (window.bottomInset || 0);\n"],"names":["ABSOLUTE_ARC_BUTTON_WIDTH","ARC_BUTTON_BOTTOM_OFFSET","ARC_BUTTON_WRAPPER_HEIGHT"],"mappings":"AAAO,MAAMA,IAA4B,MAC5BC,IAA2B,MAAM,OAAO,eAAe,IACvDC,IAA4B,OAAO,OAAO,eAAe;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cuemath/leap",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.7-hg1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -93,6 +93,4 @@
|
|
|
93
93
|
"vite-plugin-dts": "3.6.4",
|
|
94
94
|
"vite-plugin-svgr": "3.2.0",
|
|
95
95
|
"vite-tsconfig-paths": "^4.2.2"
|
|
96
|
-
}
|
|
97
|
-
"packageManager": "yarn@4.4.1"
|
|
98
|
-
}
|
|
96
|
+
}}
|