@cuemath/leap 3.0.18-as2 → 3.0.19-as1
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/post-game-stats/streak/constants.js +14 -12
- package/dist/features/post-game-stats/streak/constants.js.map +1 -1
- package/dist/features/post-game-stats/streak/streak-styled.js +15 -15
- package/dist/features/post-game-stats/streak/streak-styled.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
import { GAME_LAUNCHER_SIZE as A } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
|
2
|
+
const R = [15, 27], I = [29, 40], N = 400, O = 2e3, S = 333, o = 400, t = 200, c = 1200, n = 133, T = 50, E = 20, s = A - T - E;
|
|
2
3
|
export {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
o as
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
4
|
+
R as IN_FRAMES,
|
|
5
|
+
I as OUT_FRAMES,
|
|
6
|
+
N as STREAK_APPEAR_ANIMATION_DURATION,
|
|
7
|
+
s as STREAK_CONTAINER_HEIGHT,
|
|
8
|
+
E as STREAK_CONTAINER_TOP_OFFSET,
|
|
9
|
+
S as STREAK_DISAPPEAR_ANIMATION_DURATION,
|
|
10
|
+
o as STREAK_SCROLL_ANIMATION_DURATION,
|
|
11
|
+
T as STREAK_TOP_GREEN_SEGMENT_HEIGHT,
|
|
12
|
+
O as STREAK_WAIT_DURATION,
|
|
13
|
+
t as TEXT_APPEAR_DURATION,
|
|
14
|
+
c as TEXT_DISAPPEAR_DELAY,
|
|
15
|
+
n as TEXT_DISAPPEAR_DURATION
|
|
14
16
|
};
|
|
15
17
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/streak/constants.ts"],"sourcesContent":["import type { AnimationSegment } from 'lottie-web';\n\nexport const IN_FRAMES = [15, 27] as unknown as AnimationSegment[];\nexport const OUT_FRAMES = [29, 40] as unknown as AnimationSegment[];\n\n// streak number durations in ms\nexport const STREAK_APPEAR_ANIMATION_DURATION = 400;\nexport const STREAK_WAIT_DURATION = 2000;\nexport const STREAK_DISAPPEAR_ANIMATION_DURATION = 333;\nexport const STREAK_SCROLL_ANIMATION_DURATION = 400;\n\n// test dureations in ms\nexport const TEXT_APPEAR_DURATION = 200;\nexport const TEXT_DISAPPEAR_DELAY = 1200;\nexport const TEXT_DISAPPEAR_DURATION = 133;\n\nexport const STREAK_TOP_GREEN_SEGMENT_HEIGHT = 50;\nexport const STREAK_CONTAINER_TOP_OFFSET = 20;\n"],"names":["IN_FRAMES","OUT_FRAMES","STREAK_APPEAR_ANIMATION_DURATION","STREAK_WAIT_DURATION","STREAK_DISAPPEAR_ANIMATION_DURATION","STREAK_SCROLL_ANIMATION_DURATION","TEXT_APPEAR_DURATION","TEXT_DISAPPEAR_DELAY","TEXT_DISAPPEAR_DURATION","STREAK_TOP_GREEN_SEGMENT_HEIGHT","STREAK_CONTAINER_TOP_OFFSET"],"mappings":"
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/streak/constants.ts"],"sourcesContent":["import type { AnimationSegment } from 'lottie-web';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\n\nexport const IN_FRAMES = [15, 27] as unknown as AnimationSegment[];\nexport const OUT_FRAMES = [29, 40] as unknown as AnimationSegment[];\n\n// streak number durations in ms\nexport const STREAK_APPEAR_ANIMATION_DURATION = 400;\nexport const STREAK_WAIT_DURATION = 2000;\nexport const STREAK_DISAPPEAR_ANIMATION_DURATION = 333;\nexport const STREAK_SCROLL_ANIMATION_DURATION = 400;\n\n// test dureations in ms\nexport const TEXT_APPEAR_DURATION = 200;\nexport const TEXT_DISAPPEAR_DELAY = 1200;\nexport const TEXT_DISAPPEAR_DURATION = 133;\n\nexport const STREAK_TOP_GREEN_SEGMENT_HEIGHT = 50;\nexport const STREAK_CONTAINER_TOP_OFFSET = 20;\n\nexport const STREAK_CONTAINER_HEIGHT =\n GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT - STREAK_CONTAINER_TOP_OFFSET;\n"],"names":["IN_FRAMES","OUT_FRAMES","STREAK_APPEAR_ANIMATION_DURATION","STREAK_WAIT_DURATION","STREAK_DISAPPEAR_ANIMATION_DURATION","STREAK_SCROLL_ANIMATION_DURATION","TEXT_APPEAR_DURATION","TEXT_DISAPPEAR_DELAY","TEXT_DISAPPEAR_DURATION","STREAK_TOP_GREEN_SEGMENT_HEIGHT","STREAK_CONTAINER_TOP_OFFSET","STREAK_CONTAINER_HEIGHT","GAME_LAUNCHER_SIZE"],"mappings":";AAIa,MAAAA,IAAY,CAAC,IAAI,EAAE,GACnBC,IAAa,CAAC,IAAI,EAAE,GAGpBC,IAAmC,KACnCC,IAAuB,KACvBC,IAAsC,KACtCC,IAAmC,KAGnCC,IAAuB,KACvBC,IAAuB,MACvBC,IAA0B,KAE1BC,IAAkC,IAClCC,IAA8B,IAE9BC,IACXC,IAAqBH,IAAkCC;"}
|
|
@@ -2,7 +2,7 @@ import i, { keyframes as r, css as s } from "styled-components";
|
|
|
2
2
|
import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
|
3
3
|
import { GAME_LAUNCHER_ASSET_PADDING as n } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
|
|
4
4
|
import c from "../../ui/text/text.js";
|
|
5
|
-
import { STREAK_TOP_GREEN_SEGMENT_HEIGHT as
|
|
5
|
+
import { STREAK_TOP_GREEN_SEGMENT_HEIGHT as x, STREAK_CONTAINER_HEIGHT as o } from "./constants.js";
|
|
6
6
|
const m = 50 * 84 / 100, p = r`
|
|
7
7
|
0%{
|
|
8
8
|
opacity: 0;
|
|
@@ -17,7 +17,7 @@ const m = 50 * 84 / 100, p = r`
|
|
|
17
17
|
100%{
|
|
18
18
|
opacity: 0;
|
|
19
19
|
}
|
|
20
|
-
`,
|
|
20
|
+
`, u = i.div`
|
|
21
21
|
height: ${t}px;
|
|
22
22
|
width: ${t}px;
|
|
23
23
|
background: transparent;
|
|
@@ -25,22 +25,22 @@ const m = 50 * 84 / 100, p = r`
|
|
|
25
25
|
justify-content: center;
|
|
26
26
|
align-items: center;
|
|
27
27
|
position: relative;
|
|
28
|
-
`,
|
|
28
|
+
`, y = i.div`
|
|
29
29
|
position: absolute;
|
|
30
30
|
border-radius: ${Math.ceil((t + n) / 2)}px;
|
|
31
31
|
height: ${t + n}px;
|
|
32
32
|
width: ${t + n}px;
|
|
33
33
|
z-index: 0;
|
|
34
|
-
`,
|
|
34
|
+
`, S = i.div`
|
|
35
35
|
height: ${t + n}px;
|
|
36
36
|
width: ${t + n}px;
|
|
37
37
|
position: absolute;
|
|
38
38
|
z-index: 2;
|
|
39
39
|
`, _ = i.div`
|
|
40
40
|
position: absolute;
|
|
41
|
-
top: ${
|
|
41
|
+
top: ${x}px;
|
|
42
42
|
z-index: 2;
|
|
43
|
-
height: ${
|
|
43
|
+
height: ${o}px;
|
|
44
44
|
animation: ${({ $animationType: e, $duration: a }) => s`
|
|
45
45
|
${e === "fadein" ? p : l} ${a}ms linear forwards
|
|
46
46
|
`};
|
|
@@ -53,19 +53,19 @@ const m = 50 * 84 / 100, p = r`
|
|
|
53
53
|
display: flex;
|
|
54
54
|
flex-direction: column;
|
|
55
55
|
align-items: center;
|
|
56
|
-
height: ${
|
|
57
|
-
transition: ${({ $translateDuration: e }) =>
|
|
58
|
-
transform: ${({ $translate: e }) => e ?
|
|
56
|
+
height: ${o * 2}px;
|
|
57
|
+
transition: transform ${({ $translateDuration: e }) => `${e}ms linear`};
|
|
58
|
+
transform: ${({ $translate: e }) => e ? `translateY(-${o}px)` : "translateY(0)"};
|
|
59
59
|
`, T = i(c)`
|
|
60
60
|
font-size: 123px;
|
|
61
61
|
line-height: 123px;
|
|
62
62
|
text-align: center;
|
|
63
|
-
height:
|
|
63
|
+
height: ${o}px;
|
|
64
64
|
flex-shrink: 0;
|
|
65
65
|
display: flex;
|
|
66
66
|
align-items: center;
|
|
67
67
|
justify-content: center;
|
|
68
|
-
`,
|
|
68
|
+
`, G = i.div`
|
|
69
69
|
z-index: 2;
|
|
70
70
|
opacity: 0;
|
|
71
71
|
animation: ${({ $animationType: e, $duration: a, $delay: d }) => s`
|
|
@@ -74,12 +74,12 @@ const m = 50 * 84 / 100, p = r`
|
|
|
74
74
|
transform: translateY(${(t + m) * 84 / 200 + 25}px);
|
|
75
75
|
`;
|
|
76
76
|
export {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
y as SVGImgContainer,
|
|
78
|
+
u as Streak,
|
|
79
|
+
S as StreakLottieView,
|
|
80
80
|
T as StreakValue,
|
|
81
81
|
A as StreakValueContainer,
|
|
82
82
|
_ as StreakValueWrapper,
|
|
83
|
-
|
|
83
|
+
G as TextWrapper
|
|
84
84
|
};
|
|
85
85
|
//# sourceMappingURL=streak-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"streak-styled.js","sources":["../../../../src/features/post-game-stats/streak/streak-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport Text from '../../ui/text/text';\nimport {
|
|
1
|
+
{"version":3,"file":"streak-styled.js","sources":["../../../../src/features/post-game-stats/streak/streak-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport Text from '../../ui/text/text';\nimport { STREAK_CONTAINER_HEIGHT, STREAK_TOP_GREEN_SEGMENT_HEIGHT } from './constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n 0%{\n opacity: 0;\n }\n 100%{\n opacity: 1;\n }\n`;\n\nconst fadeOut = keyframes`\n 0%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n`;\n\nexport const Streak = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n`;\n\nexport const SVGImgContainer = styled.div`\n position: absolute;\n border-radius: ${Math.ceil((GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING) / 2)}px;\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n z-index: 0;\n`;\n\nexport const StreakLottieView = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 2;\n`;\nexport const StreakValueWrapper = styled.div<{\n $duration: number;\n $animationType: 'fadein' | 'fadeout';\n}>`\n position: absolute;\n top: ${STREAK_TOP_GREEN_SEGMENT_HEIGHT}px;\n z-index: 2;\n height: ${STREAK_CONTAINER_HEIGHT}px;\n animation: ${({ $animationType, $duration }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards\n `};\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const StreakValueContainer = styled.div<{\n $translate: boolean;\n $translateDuration: number;\n}>`\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: ${STREAK_CONTAINER_HEIGHT * 2}px;\n transition: transform ${({ $translateDuration }) => `${$translateDuration}ms linear`};\n transform: ${({ $translate }) =>\n $translate ? `translateY(-${STREAK_CONTAINER_HEIGHT}px)` : 'translateY(0)'};\n`;\n\nexport const StreakValue = styled(Text)`\n font-size: 123px;\n line-height: 123px;\n text-align: center;\n height: ${STREAK_CONTAINER_HEIGHT}px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const TextWrapper = styled.div<{\n $duration: number;\n $delay: number;\n $animationType: 'fadein' | 'fadeout';\n}>`\n z-index: 2;\n opacity: 0;\n animation: ${({ $animationType, $duration, $delay }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n `};\n transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Streak","styled","GAME_LAUNCHER_SIZE","SVGImgContainer","GAME_LAUNCHER_ASSET_PADDING","StreakLottieView","StreakValueWrapper","STREAK_TOP_GREEN_SEGMENT_HEIGHT","STREAK_CONTAINER_HEIGHT","$animationType","$duration","css","StreakValueContainer","$translateDuration","$translate","StreakValue","Text","TextWrapper","$delay"],"mappings":";;;;;AAOA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAASC,EAAO;AAAA,YACjBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAkBF,EAAO;AAAA;AAAA,mBAEnB,KAAK,MAAMC,IAAqBE,KAA+B,CAAC,CAAC;AAAA,YACxEF,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA,GAI9CC,IAAmBJ,EAAO;AAAA,YAC3BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAI9CE,IAAqBL,EAAO;AAAA;AAAA,SAKhCM,CAA+B;AAAA;AAAA,YAE5BC,CAAuB;AAAA,eACpB,CAAC,EAAE,gBAAAC,GAAgB,WAAAC,EAAA,MAAgBC;AAAA,MAC5CF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS;AAAA,GAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,GAOUE,IAAuBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ/BO,IAA0B,CAAC;AAAA,0BACb,CAAC,EAAE,oBAAAK,EAAyB,MAAA,GAAGA,CAAkB,WAAW;AAAA,eACvE,CAAC,EAAE,YAAAC,EAAW,MACzBA,IAAa,eAAeN,CAAuB,QAAQ,eAAe;AAAA,GAGjEO,IAAcd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA,YAI1BR,CAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,GAOtBS,IAAchB,EAAO;AAAA;AAAA;AAAA,eAOnB,CAAC,EAAE,gBAAAQ,GAAgB,WAAAC,GAAW,QAAAQ,QAAaP;AAAA,MACpDF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS,MAAMQ,CAAM;AAAA,GAC1E;AAAA,2BACyBhB,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}
|