@cuemath/leap 3.0.11-akm-5 → 3.0.11-akm-7
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.
|
@@ -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 a, STREAK_CONTAINER_TOP_OFFSET as x } from "./constants.js";
|
|
6
6
|
const m = 50 * 84 / 100, p = r`
|
|
7
7
|
0%{
|
|
8
8
|
opacity: 0;
|
|
@@ -38,11 +38,11 @@ const m = 50 * 84 / 100, p = r`
|
|
|
38
38
|
z-index: 2;
|
|
39
39
|
`, _ = i.div`
|
|
40
40
|
position: absolute;
|
|
41
|
-
top: ${
|
|
41
|
+
top: ${a}px;
|
|
42
42
|
z-index: 2;
|
|
43
|
-
height: ${t -
|
|
44
|
-
animation: ${({ $animationType: e, $duration:
|
|
45
|
-
${e === "fadein" ? p : l} ${
|
|
43
|
+
height: ${t - a - x}px;
|
|
44
|
+
animation: ${({ $animationType: e, $duration: o }) => s`
|
|
45
|
+
${e === "fadein" ? p : l} ${o}ms linear forwards
|
|
46
46
|
`};
|
|
47
47
|
overflow: hidden;
|
|
48
48
|
display: flex;
|
|
@@ -53,14 +53,14 @@ 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: ${t * 2}px;
|
|
57
|
+
transition: transform ${({ $translateDuration: e }) => `${e}ms linear`};
|
|
58
|
+
transform: ${({ $translate: e }) => e ? `translateY(-${t}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: ${t}px;
|
|
64
64
|
flex-shrink: 0;
|
|
65
65
|
display: flex;
|
|
66
66
|
align-items: center;
|
|
@@ -68,8 +68,8 @@ const m = 50 * 84 / 100, p = r`
|
|
|
68
68
|
`, k = i.div`
|
|
69
69
|
z-index: 2;
|
|
70
70
|
opacity: 0;
|
|
71
|
-
animation: ${({ $animationType: e, $duration:
|
|
72
|
-
${e === "fadein" ? p : l} ${
|
|
71
|
+
animation: ${({ $animationType: e, $duration: o, $delay: d }) => s`
|
|
72
|
+
${e === "fadein" ? p : l} ${o}ms ${d}ms ease forwards
|
|
73
73
|
`};
|
|
74
74
|
transform: translateY(${(t + m) * 84 / 200 + 25}px);
|
|
75
75
|
`;
|
|
@@ -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 { STREAK_CONTAINER_TOP_OFFSET, 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`;\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: ${GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT - STREAK_CONTAINER_TOP_OFFSET}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: ${
|
|
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_TOP_OFFSET, 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`;\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: ${GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT - STREAK_CONTAINER_TOP_OFFSET}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: ${GAME_LAUNCHER_SIZE * 2}px;\n transition: transform ${({ $translateDuration }) => `${$translateDuration}ms linear`};\n transform: ${({ $translate }) =>\n $translate ? `translateY(-${GAME_LAUNCHER_SIZE}px)` : 'translateY(0)'};\n`;\n\nexport const StreakValue = styled(Text)`\n font-size: 123px;\n line-height: 123px;\n text-align: center;\n height: ${GAME_LAUNCHER_SIZE}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_TOP_OFFSET","$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,GAK9CE,IAAqBL,EAAO;AAAA;AAAA,SAKhCM,CAA+B;AAAA;AAAA,YAE5BL,IAAqBK,IAAkCC,CAA2B;AAAA,eAC/E,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/BC,IAAqB,CAAC;AAAA,0BACR,CAAC,EAAE,oBAAAW,EAAyB,MAAA,GAAGA,CAAkB,WAAW;AAAA,eACvE,CAAC,EAAE,YAAAC,EAAW,MACzBA,IAAa,eAAeZ,CAAkB,QAAQ,eAAe;AAAA,GAG5Da,IAAcd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA,YAI1Bd,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,GAOjBe,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;"}
|