@cuemath/leap 2.9.5-j11 → 2.9.5-j12

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.
Files changed (21) hide show
  1. package/dist/features/post-game-stats/digital-meter/constants.js +10 -9
  2. package/dist/features/post-game-stats/digital-meter/constants.js.map +1 -1
  3. package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +15 -16
  4. package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +1 -1
  5. package/dist/features/post-game-stats/digital-meter/digital-meter.js +88 -87
  6. package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -1
  7. package/dist/features/post-game-stats/digital-meter/helper.js +3 -13
  8. package/dist/features/post-game-stats/digital-meter/helper.js.map +1 -1
  9. package/dist/features/ui/animated-arc/animated-arc-constants.js +5 -0
  10. package/dist/features/ui/animated-arc/animated-arc-constants.js.map +1 -0
  11. package/dist/features/ui/animated-arc/animated-arc-styled.js +25 -13
  12. package/dist/features/ui/animated-arc/animated-arc-styled.js.map +1 -1
  13. package/dist/features/ui/animated-arc/animated-arc.js +13 -13
  14. package/dist/features/ui/animated-arc/animated-arc.js.map +1 -1
  15. package/package.json +1 -1
  16. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js +0 -17
  17. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map +0 -1
  18. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js +0 -50
  19. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js.map +0 -1
  20. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js +0 -6
  21. package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js.map +0 -1
@@ -1,18 +1,19 @@
1
1
  import { GAME_LAUNCHER_SIZE as _, GAME_LAUNCHER_SIZE_LARGE as A } from "../../circle-games/game-launcher/comps/card-container/constants.js";
2
- import { ARC_Z_INDEX as E } from "./comp/animated-arc/constants.js";
3
- const L = 300, R = 2, I = E + 1, N = I + 1, O = N + 1, t = _ === A ? 16 : 12, D = (_ - R) / 2, c = 3.8, n = 2 / 30, s = 2.37, C = 12 / 30, G = 20 / 30, S = 43 / 30;
2
+ const o = 300, E = 2, L = 150, R = 1, I = R + 1, N = I + 1, t = N + 1, O = _ === A ? 16 : 12, c = (_ - E) / 2, n = 3.8, s = 2 / 30, D = 2.37, C = 12 / 30, G = 20 / 30, S = 43 / 30;
4
3
  export {
5
- D as ARC_RADIUS,
4
+ L as ANIMATED_ARC_START_ANGLE,
5
+ c as ARC_RADIUS,
6
+ R as ARC_Z_INDEX,
6
7
  N as CONTENT_CONTAINER_Z_INDEX,
7
8
  I as LINE_MARKING_Z_INDEX,
8
- O as NUMBER_MARKING_Z_INDEX,
9
+ t as NUMBER_MARKING_Z_INDEX,
9
10
  C as PROGRESS_FILL_DELAY,
10
11
  G as PROGRESS_FILL_DURATION,
11
12
  S as RAINBOW_COLOR_ANIMATION_DURATION,
12
- t as STROKE_WIDTH,
13
- s as TARGET_ACHIEVED_DELAY,
14
- n as TARGET_HELPER_TEXT_APPEAR_DELAY,
15
- c as TOTAL_ANIMATION_DURATION,
16
- L as TOTAL_ARC_AVAILABLE
13
+ O as STROKE_WIDTH,
14
+ D as TARGET_ACHIEVED_DELAY,
15
+ s as TARGET_HELPER_TEXT_APPEAR_DELAY,
16
+ n as TOTAL_ANIMATION_DURATION,
17
+ o as TOTAL_ARC_AVAILABLE
17
18
  };
18
19
  //# sourceMappingURL=constants.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/digital-meter/constants.ts"],"sourcesContent":["import {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { ARC_Z_INDEX } from './comp/animated-arc/constants';\n\nexport const TOTAL_ARC_AVAILABLE = 300;\n\nconst BORDER_OFFSET = 2;\n\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;\nexport const STROKE_WIDTH = GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 16 : 12;\nexport const ARC_RADIUS = (GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2;\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","STROKE_WIDTH","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","ARC_RADIUS","TOTAL_ANIMATION_DURATION","TARGET_HELPER_TEXT_APPEAR_DELAY","TARGET_ACHIEVED_DELAY","PROGRESS_FILL_DELAY","PROGRESS_FILL_DURATION","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;AAMO,MAAMA,IAAsB,KAE7BC,IAAgB,GAETC,IAAuBC,IAAc,GACrCC,IAA4BF,IAAuB,GACnDG,IAAyBD,IAA4B,GACrDE,IAAeC,MAAuBC,IAA2B,KAAK,IACtEC,KAAcF,IAAqBN,KAAiB,GAGpDS,IAA2B,KAC3BC,IAAkC,IAAI,IACtCC,IAAwB,MACxBC,IAAsB,KAAK,IAC3BC,IAAyB,KAAK,IAC9BC,IAAmC,KAAK;"}
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/digital-meter/constants.ts"],"sourcesContent":["import {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\n\nexport const TOTAL_ARC_AVAILABLE = 300;\n\nconst BORDER_OFFSET = 2;\n\n//Animated Arc\nexport const ANIMATED_ARC_START_ANGLE = 150;\nexport const ARC_Z_INDEX = 1;\n\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;\nexport const STROKE_WIDTH = GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 16 : 12;\nexport const ARC_RADIUS = (GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2;\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","ANIMATED_ARC_START_ANGLE","ARC_Z_INDEX","LINE_MARKING_Z_INDEX","CONTENT_CONTAINER_Z_INDEX","NUMBER_MARKING_Z_INDEX","STROKE_WIDTH","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","ARC_RADIUS","TOTAL_ANIMATION_DURATION","TARGET_HELPER_TEXT_APPEAR_DELAY","TARGET_ACHIEVED_DELAY","PROGRESS_FILL_DELAY","PROGRESS_FILL_DURATION","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";AAKO,MAAMA,IAAsB,KAE7BC,IAAgB,GAGTC,IAA2B,KAC3BC,IAAc,GAEdC,IAAuBD,IAAc,GACrCE,IAA4BD,IAAuB,GACnDE,IAAyBD,IAA4B,GACrDE,IAAeC,MAAuBC,IAA2B,KAAK,IACtEC,KAAcF,IAAqBP,KAAiB,GAGpDU,IAA2B,KAC3BC,IAAkC,IAAI,IACtCC,IAAwB,MACxBC,IAAsB,KAAK,IAC3BC,IAAyB,KAAK,IAC9BC,IAAmC,KAAK;"}
@@ -1,10 +1,9 @@
1
1
  import o, { keyframes as e } from "styled-components";
2
2
  import { GAME_LAUNCHER_SIZE as r, GAME_LAUNCHER_SIZE_LARGE as s } from "../../circle-games/game-launcher/comps/card-container/constants.js";
3
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";
4
+ import { CONTENT_CONTAINER_Z_INDEX as l, LINE_MARKING_Z_INDEX as d, ANIMATED_ARC_START_ANGLE as n, NUMBER_MARKING_Z_INDEX as m, TARGET_HELPER_TEXT_APPEAR_DELAY as a, RAINBOW_COLOR_ANIMATION_DURATION as p } from "./constants.js";
6
5
  import { rainbowColorAnimation as f } from "./helper.js";
7
- const g = o.div`
6
+ const E = o.div`
8
7
  height: ${r}px;
9
8
  width: ${r}px;
10
9
  background-color: ${({ theme: t }) => t.colors.BLACK_2};
@@ -26,7 +25,7 @@ const g = o.div`
26
25
  width: 92%;
27
26
  border-radius: 100%;
28
27
  background-color: ${({ theme: t }) => t.colors.BLACK_2};
29
- `, b = o.div`
28
+ `, g = o.div`
30
29
  position: relative;
31
30
  flex-grow: 1;
32
31
  bottom: ${r === s ? -8 : -6}px;
@@ -34,7 +33,7 @@ const g = o.div`
34
33
  o.div`
35
34
  position: absolute;
36
35
  `;
37
- const u = o.div`
36
+ const b = o.div`
38
37
  width: ${r / 2}px;
39
38
  height: 2px;
40
39
  position: absolute;
@@ -46,12 +45,12 @@ const u = o.div`
46
45
  left: ${r / 2}px;
47
46
  top: ${r / 2}px;
48
47
  z-index: ${d};
49
- `, T = o.div`
48
+ `, u = o.div`
50
49
  position: absolute;
51
50
  height: ${r - r * 0.0625 - 10}px;
52
51
  transform: rotate(${({ $angle: t }) => -n + t}deg);
53
52
  z-index: ${m};
54
- `, h = o.div`
53
+ `, T = o.div`
55
54
  transform: rotate(${({ $angle: t }) => n - t}deg);
56
55
  `, C = o.div`
57
56
  position: absolute;
@@ -60,7 +59,7 @@ const u = o.div`
60
59
  `, R = o(i)`
61
60
  animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
62
61
  ease-in-out ${a}s forwards;
63
- `, I = o(i)`
62
+ `, h = o(i)`
64
63
  animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
65
64
  ease ${a}s forwards;
66
65
  `;
@@ -68,20 +67,20 @@ o.div`
68
67
  height: 100%;
69
68
  width: 100%;
70
69
  `;
71
- const v = o(i)`
70
+ const I = o(i)`
72
71
  animation: ${({ $isTargetAchieved: t }) => t ? f : "unset"}
73
72
  ${p}s ease infinite forwards;
74
73
  `;
75
74
  export {
76
75
  C as BottomAbsoluteView,
77
76
  N as ContentContainer,
78
- g as DigitalMeter,
77
+ E as DigitalMeter,
79
78
  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
79
+ h as HelperTextSecondary,
80
+ b as LineMarking,
81
+ u as MarkingContainer,
82
+ T as MarkingText,
83
+ g as NumberCountContainer,
84
+ I as RainboxColorText
86
85
  };
87
86
  //# sourceMappingURL=digital-meter-styled.js.map
@@ -1 +1 @@
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
+ {"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 {\n ANIMATED_ARC_START_ANGLE,\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 }) => -ANIMATED_ARC_START_ANGLE + $angle}deg);\n z-index: ${NUMBER_MARKING_Z_INDEX};\n`;\n\nexport const MarkingText = styled.div<{ $angle: number }>`\n transform: rotate(${({ $angle }) => ANIMATED_ARC_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","ANIMATED_ARC_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,IAA2BH,CAAM;AAAA,aAC3DI,CAAsB;AAAA,GAGtBC,IAAcf,EAAO;AAAA,sBACZ,CAAC,EAAE,QAAAU,QAAaG,IAA2BH,CAAM;AAAA,GAG1DM,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,155 +1,156 @@
1
- import { jsxs as n, jsx as r, Fragment as k } from "react/jsx-runtime";
2
- import U, { memo as w, useState as Y, useCallback as B, useEffect as K } from "react";
3
- import { LOTTIE as P } from "../../../assets/lottie/lottie.js";
1
+ import { jsxs as o, jsx as r, Fragment as k } from "react/jsx-runtime";
2
+ import w, { memo as Y, useState as B, useCallback as K, useEffect as P } from "react";
3
+ import { LOTTIE as j } from "../../../assets/lottie/lottie.js";
4
4
  import { GAME_LAUNCHER_SIZE as c, GAME_LAUNCHER_SIZE_LARGE as d } from "../../circle-games/game-launcher/comps/card-container/constants.js";
5
- import { useCircleSounds as j } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
5
+ import { useCircleSounds as Z } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
6
6
  import { CircleSoundKey as m } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
7
- import R from "../../ui/layout/flex-view.js";
8
- import Z from "../../ui/lottie-animation/lottie-animation.js";
9
- import $ from "../../ui/separator/separator.js";
10
- import N from "../../ui/text/text.js";
11
- import { NumberCountAnimation as X } from "../number-count-animation/number-count-animation.js";
12
- import { AnimatedArc as g } from "./comp/animated-arc/animated-arc.js";
13
- import { TARGET_ACHIEVED_DELAY as D, TOTAL_ARC_AVAILABLE as h, STROKE_WIDTH as C, ARC_RADIUS as p, PROGRESS_FILL_DURATION as f, PROGRESS_FILL_DELAY as L, TOTAL_ANIMATION_DURATION as q } from "./constants.js";
14
- import { DigitalMeter as z, ContentContainer as J, NumberCountContainer as Q, RainboxColorText as b, LineMarking as G, MarkingContainer as H, MarkingText as M, BottomAbsoluteView as u, HelperTextPrimary as v, HelperTextSecondary as x } from "./digital-meter-styled.js";
15
- const sr = w(
7
+ import { AnimatedArc as I } from "../../ui/animated-arc/animated-arc.js";
8
+ import $ from "../../ui/layout/flex-view.js";
9
+ import X from "../../ui/lottie-animation/lottie-animation.js";
10
+ import g from "../../ui/separator/separator.js";
11
+ import D from "../../ui/text/text.js";
12
+ import { NumberCountAnimation as q } from "../number-count-animation/number-count-animation.js";
13
+ import { TARGET_ACHIEVED_DELAY as G, TOTAL_ARC_AVAILABLE as h, STROKE_WIDTH as C, ARC_RADIUS as L, ANIMATED_ARC_START_ANGLE as p, PROGRESS_FILL_DURATION as f, PROGRESS_FILL_DELAY as b, TOTAL_ANIMATION_DURATION as z } from "./constants.js";
14
+ import { DigitalMeter as J, ContentContainer as Q, NumberCountContainer as v, RainboxColorText as N, LineMarking as M, MarkingContainer as H, MarkingText as u, BottomAbsoluteView as O, HelperTextPrimary as x, HelperTextSecondary as V } from "./digital-meter-styled.js";
15
+ const Er = Y(
16
16
  ({
17
- show: I,
18
- value: a,
19
- maxValue: o,
17
+ show: R,
18
+ value: T,
19
+ maxValue: n,
20
20
  targetValue: t = 0,
21
- displayText: O,
21
+ displayText: F,
22
22
  progressType: s,
23
- helperTextPrimary: F,
24
- helperTextSecondary: W,
23
+ helperTextPrimary: W,
24
+ helperTextSecondary: y,
25
25
  onComplete: S,
26
- actAsTimer: T
26
+ actAsTimer: a
27
27
  }) => {
28
- const [A, y] = Y(!1), { play: E } = j(), _ = B(
29
- (i) => t ? T ? i <= t : i >= t : !1,
30
- [t, T]
28
+ const [l, U] = B(!1), { play: E } = Z(), _ = K(
29
+ (i) => t ? a ? i <= t : i >= t : !1,
30
+ [t, a]
31
31
  );
32
- return K(() => {
32
+ return P(() => {
33
33
  let i, e;
34
- const l = _(a);
35
- return I && (E(T ? m.TIME_INTRO : m.ACCURACY_INTRO), E(m.METER_FILL), l && (i = setTimeout(() => {
36
- E(T ? m.TIME_TARGET : m.ACCURACY_TARGET), y(!0);
37
- }, D * 1e3)), e = setTimeout(() => {
34
+ const A = _(T);
35
+ return R && (E(a ? m.TIME_INTRO : m.ACCURACY_INTRO), E(m.METER_FILL), A && (i = setTimeout(() => {
36
+ E(a ? m.TIME_TARGET : m.ACCURACY_TARGET), U(!0);
37
+ }, G * 1e3)), e = setTimeout(() => {
38
38
  S();
39
- }, (l ? q : D) * 1e3)), () => {
39
+ }, (A ? z : G) * 1e3)), () => {
40
40
  i && clearTimeout(i), e && clearTimeout(e);
41
41
  };
42
- }, [I, a, S, _, T, E]), I ? /* @__PURE__ */ n(z, { $isTargetAchieved: A, children: [
42
+ }, [R, T, S, _, a, E]), R ? /* @__PURE__ */ o(J, { $isTargetAchieved: l, children: [
43
43
  /* @__PURE__ */ r(
44
- g,
44
+ I,
45
45
  {
46
46
  targetAngle: h,
47
47
  strokeWidth: C,
48
48
  color: "BLACK_5",
49
- radius: p,
49
+ radius: L,
50
50
  duration: 0,
51
- startAngle: -150
51
+ startAngle: -p
52
52
  }
53
53
  ),
54
- /* @__PURE__ */ r(J, { children: /* @__PURE__ */ n(R, { $flexDirection: "column", $alignItems: "center", children: [
55
- /* @__PURE__ */ n(R, { $flexDirection: "row", $alignItems: "flex-end", children: [
56
- /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(
57
- b,
54
+ /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ o($, { $flexDirection: "column", $alignItems: "center", children: [
55
+ /* @__PURE__ */ o($, { $flexDirection: "row", $alignItems: "flex-end", children: [
56
+ /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(
57
+ N,
58
58
  {
59
59
  $renderAs: c === d ? "ah1" : "ah2",
60
60
  $color: "GREEN_4",
61
- $isTargetAchieved: A,
61
+ $isTargetAchieved: l,
62
62
  children: /* @__PURE__ */ r(
63
- X,
63
+ q,
64
64
  {
65
65
  initialValue: 0,
66
- targetValue: Math.floor(a),
66
+ targetValue: Math.floor(T),
67
67
  durationInSec: f,
68
- delayInSec: L
68
+ delayInSec: b
69
69
  }
70
70
  )
71
71
  }
72
72
  ) }),
73
- s === "stepper" && /* @__PURE__ */ n(
74
- N,
73
+ s === "stepper" && /* @__PURE__ */ o(
74
+ D,
75
75
  {
76
76
  $renderAs: c === d ? "ah4" : "ab1",
77
77
  $color: "WHITE",
78
78
  children: [
79
79
  "/",
80
- o
80
+ n
81
81
  ]
82
82
  }
83
83
  )
84
84
  ] }),
85
- /* @__PURE__ */ r($, { height: 8 }),
85
+ /* @__PURE__ */ r(g, { height: 8 }),
86
86
  /* @__PURE__ */ r(
87
- N,
87
+ D,
88
88
  {
89
89
  $renderAs: c === d ? "ac3-black" : "ac4-black",
90
90
  $color: "WHITE_T_60",
91
- children: O
91
+ children: F
92
92
  }
93
93
  )
94
94
  ] }) }),
95
- s === "stepper" && Array.from({ length: a }, (i, e) => {
96
- const l = h / o;
95
+ s === "stepper" && Array.from({ length: T }, (i, e) => {
96
+ const A = h / n;
97
97
  return /* @__PURE__ */ r(
98
- g,
98
+ I,
99
99
  {
100
- startAngle: l * e,
101
- targetAngle: l,
100
+ startAngle: -p + A * e,
101
+ targetAngle: A,
102
102
  strokeWidth: C,
103
103
  color: "GREEN_4",
104
- radius: p,
104
+ radius: L,
105
105
  mode: "fade",
106
- duration: f / o,
107
- delay: L + f / o * e,
108
- playRainbowColors: A
106
+ duration: f / n,
107
+ delay: b + f / n * e,
108
+ showAnimatedRainbowArc: l
109
109
  },
110
110
  e
111
111
  );
112
112
  }),
113
- s === "stepper" && Array.from({ length: o + 1 }, (i, e) => {
114
- const l = h / o;
115
- return /* @__PURE__ */ n(U.Fragment, { children: [
116
- /* @__PURE__ */ r(G, { $angle: l * e }),
117
- /* @__PURE__ */ r(H, { $angle: l * e, children: /* @__PURE__ */ r(M, { $angle: l * e, children: /* @__PURE__ */ r(
118
- b,
113
+ s === "stepper" && Array.from({ length: n + 1 }, (i, e) => {
114
+ const A = h / n;
115
+ return /* @__PURE__ */ o(w.Fragment, { children: [
116
+ /* @__PURE__ */ r(M, { $angle: A * e }),
117
+ /* @__PURE__ */ r(H, { $angle: A * e, children: /* @__PURE__ */ r(u, { $angle: A * e, children: /* @__PURE__ */ r(
118
+ N,
119
119
  {
120
120
  $renderAs: c === d ? "ac3-black" : "ac4-black",
121
121
  $color: t && t === e ? "GREEN_4" : "WHITE_T_60",
122
- $isTargetAchieved: t === e && _(e) && A,
122
+ $isTargetAchieved: t === e && _(e) && l,
123
123
  children: e
124
124
  }
125
125
  ) }) }, e)
126
126
  ] }, e);
127
127
  }),
128
- s === "linear" && /* @__PURE__ */ n(k, { children: [
128
+ s === "linear" && /* @__PURE__ */ o(k, { children: [
129
129
  /* @__PURE__ */ r(
130
- g,
130
+ I,
131
131
  {
132
- targetAngle: a * h / o,
132
+ targetAngle: T * h / n,
133
133
  strokeWidth: C,
134
134
  color: "GREEN_4",
135
- radius: p,
135
+ radius: L,
136
136
  duration: f,
137
- delay: L,
138
- playRainbowColors: A
137
+ delay: b,
138
+ showAnimatedRainbowArc: l,
139
+ startAngle: -p
139
140
  }
140
141
  ),
141
- /* @__PURE__ */ n(k, { children: [
142
- t && /* @__PURE__ */ r(G, { $angle: t * h / o }),
143
- Array.from(/* @__PURE__ */ new Set([0, t, o])).map((i, e) => /* @__PURE__ */ r(
142
+ /* @__PURE__ */ o(k, { children: [
143
+ t && /* @__PURE__ */ r(M, { $angle: t * h / n }),
144
+ Array.from(/* @__PURE__ */ new Set([0, t, n])).map((i, e) => /* @__PURE__ */ r(
144
145
  H,
145
146
  {
146
- $angle: i * h / o,
147
- children: /* @__PURE__ */ r(M, { $angle: i * h / o, children: /* @__PURE__ */ r(
148
- b,
147
+ $angle: i * h / n,
148
+ children: /* @__PURE__ */ r(u, { $angle: i * h / n, children: /* @__PURE__ */ r(
149
+ N,
149
150
  {
150
151
  $renderAs: c === d ? "ac3-black" : "ac4-black",
151
152
  $color: t && t === i ? "GREEN_4" : "WHITE_T_60",
152
- $isTargetAchieved: t === i && A && _(i),
153
+ $isTargetAchieved: t === i && l && _(i),
153
154
  children: i
154
155
  }
155
156
  ) })
@@ -158,27 +159,27 @@ const sr = w(
158
159
  ))
159
160
  ] })
160
161
  ] }),
161
- A && /* @__PURE__ */ r(u, { top: c, children: /* @__PURE__ */ r(Z, { src: P.TARGET_ACHIEVED_TEXT }) }),
162
- !A && /* @__PURE__ */ n(u, { top: c, children: [
163
- /* @__PURE__ */ r($, { height: 25 }),
164
- /* @__PURE__ */ n(R, { $flexDirection: "column", $alignItems: "center", children: [
165
- /* @__PURE__ */ n(
166
- v,
162
+ l && /* @__PURE__ */ r(O, { top: c, children: /* @__PURE__ */ r(X, { src: j.TARGET_ACHIEVED_TEXT }) }),
163
+ !l && /* @__PURE__ */ o(O, { top: c, children: [
164
+ /* @__PURE__ */ r(g, { height: 25 }),
165
+ /* @__PURE__ */ o($, { $flexDirection: "column", $alignItems: "center", children: [
166
+ /* @__PURE__ */ o(
167
+ x,
167
168
  {
168
169
  $renderAs: c === d ? "ac3-black" : "ac4-black",
169
170
  $color: "WHITE_T_60",
170
171
  children: [
171
- F,
172
- /* @__PURE__ */ r($, { height: c * 0.03 })
172
+ W,
173
+ /* @__PURE__ */ r(g, { height: c * 0.03 })
173
174
  ]
174
175
  }
175
176
  ),
176
177
  /* @__PURE__ */ r(
177
- x,
178
+ V,
178
179
  {
179
180
  $renderAs: c === d ? "ah4" : "ab1",
180
181
  $color: "WHITE",
181
- children: W
182
+ children: y
182
183
  }
183
184
  )
184
185
  ] })
@@ -187,6 +188,6 @@ const sr = w(
187
188
  }
188
189
  );
189
190
  export {
190
- sr as DigitalMeter
191
+ Er as DigitalMeter
191
192
  };
192
193
  //# sourceMappingURL=digital-meter.js.map
@@ -1 +1 @@
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 React, { 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 ARC_RADIUS,\n PROGRESS_FILL_DELAY,\n PROGRESS_FILL_DURATION,\n STROKE_WIDTH,\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) return null;\n\n return (\n <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n {/* complete arc area to be filled */}\n <AnimatedArc\n targetAngle={TOTAL_ARC_AVAILABLE}\n strokeWidth={STROKE_WIDTH}\n color=\"BLACK_5\"\n radius={ARC_RADIUS}\n duration={0}\n startAngle={-150}\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={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\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 <React.Fragment key={index}>\n <Styled.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 ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === index ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === index && isTargetValueAchieved(index) && isTargetAchieved\n }\n >\n {index}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n </React.Fragment>\n );\n })}\n\n {/* progress of linear */}\n {progressType === 'linear' && (\n <>\n <AnimatedArc\n targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\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 ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === val ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === 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"],"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","STROKE_WIDTH","ARC_RADIUS","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","React","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","Fragment","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}
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 React, { 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 { AnimatedArc } from '../../ui/animated-arc/animated-arc';\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 {\n ANIMATED_ARC_START_ANGLE,\n ARC_RADIUS,\n PROGRESS_FILL_DELAY,\n PROGRESS_FILL_DURATION,\n STROKE_WIDTH,\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) return null;\n\n return (\n <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n {/* complete arc area to be filled */}\n <AnimatedArc\n targetAngle={TOTAL_ARC_AVAILABLE}\n strokeWidth={STROKE_WIDTH}\n color=\"BLACK_5\"\n radius={ARC_RADIUS}\n duration={0}\n startAngle={-ANIMATED_ARC_START_ANGLE}\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={-ANIMATED_ARC_START_ANGLE + arcLength * index}\n targetAngle={arcLength}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\n mode=\"fade\"\n duration={PROGRESS_FILL_DURATION / maxValue}\n delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n showAnimatedRainbowArc={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 <React.Fragment key={index}>\n <Styled.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 ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === index ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === index && isTargetValueAchieved(index) && isTargetAchieved\n }\n >\n {index}\n </Styled.RainboxColorText>\n </Styled.MarkingText>\n </Styled.MarkingContainer>\n </React.Fragment>\n );\n })}\n\n {/* progress of linear */}\n {progressType === 'linear' && (\n <>\n <AnimatedArc\n targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n strokeWidth={STROKE_WIDTH}\n color=\"GREEN_4\"\n radius={ARC_RADIUS}\n duration={PROGRESS_FILL_DURATION}\n delay={PROGRESS_FILL_DELAY}\n showAnimatedRainbowArc={isTargetAchieved}\n startAngle={-ANIMATED_ARC_START_ANGLE}\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 ? 'ac3-black' : 'ac4-black'\n }\n $color={targetValue && targetValue === val ? 'GREEN_4' : 'WHITE_T_60'}\n $isTargetAchieved={\n targetValue === 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"],"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","STROKE_WIDTH","ARC_RADIUS","ANIMATED_ARC_START_ANGLE","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","React","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","Fragment","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}
@@ -1,14 +1,5 @@
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`
1
+ import { keyframes as o } from "styled-components";
2
+ const r = o`
12
3
  0% {
13
4
  stroke: #FFB700;
14
5
  color: #FFB700;
@@ -27,7 +18,6 @@ const a = (r, F, o, n) => {
27
18
  }
28
19
  `;
29
20
  export {
30
- $ as describeArc,
31
- k as rainbowColorAnimation
21
+ r as rainbowColorAnimation
32
22
  };
33
23
  //# sourceMappingURL=helper.js.map
@@ -1 +1 @@
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
+ {"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":["rainbowColorAnimation","keyframes"],"mappings":";AA0BO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
@@ -0,0 +1,5 @@
1
+ const O = 1.4333333333333333;
2
+ export {
3
+ O as RAINBOW_COLOR_ANIMATION_DURATION
4
+ };
5
+ //# sourceMappingURL=animated-arc-constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animated-arc-constants.js","sources":["../../../../src/features/ui/animated-arc/animated-arc-constants.ts"],"sourcesContent":["export const RAINBOW_COLOR_ANIMATION_DURATION = 43 / 30; // 43 frames;\n"],"names":["RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":"AAAO,MAAMA,IAAmC;"}
@@ -1,21 +1,33 @@
1
- import s, { css as t } from "styled-components";
2
- const n = s.svg`
1
+ import r, { keyframes as e } from "styled-components";
2
+ import { RAINBOW_COLOR_ANIMATION_DURATION as n } from "./animated-arc-constants.js";
3
+ const s = e`
4
+ 0% {
5
+ stroke: #FFB700;
6
+ color: #FFB700;
7
+ }
8
+ 33% {
9
+ stroke: #FF884C;
10
+ color: #FF884C;
11
+ }
12
+ 66% {
13
+ stroke: #FF80F4;
14
+ color: #FF80F4;
15
+ }
16
+ 100% {
17
+ stroke: #33CCFF;
18
+ color: #33CCFF;
19
+ }
20
+ `, a = r.svg`
3
21
  position: absolute;
4
22
  z-index: 1;
5
23
  pointer-events: none;
6
- `, c = s.path`
7
- stroke: ${({ theme: e, stroke: o }) => e.colors[o]};
8
- ${({ $animationConfig: e }) => e ? t`
9
- animation: ${e.keyframes} ${e.duration ?? 2}s
10
- ${e.timingFunction ?? "ease"}
11
- ${e.iterationCount ?? "infinite"}
12
- ${e.fillMode ?? "forwards"};
13
- ` : t`
14
- animation: none;
15
- `}
24
+ `, c = r.path`
25
+ stroke: ${({ theme: o, stroke: t }) => o.colors[t]};
26
+ animation: ${({ $showAnimatedRainbowArc: o }) => o ? s : "undefined"}
27
+ ${n}s ease infinite forwards;
16
28
  `;
17
29
  export {
18
30
  c as Path,
19
- n as Svg
31
+ a as Svg
20
32
  };
21
33
  //# sourceMappingURL=animated-arc-styled.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"animated-arc-styled.js","sources":["../../../../src/features/ui/animated-arc/animated-arc-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../types';\nimport type { TAnimationConfig } from './animated-arc-types';\n\nimport styled, { css } from 'styled-components';\n\nexport const Svg = styled.svg`\n position: absolute;\n z-index: 1;\n pointer-events: none;\n`;\n\nexport const Path = styled.path<{\n stroke: TColorNames;\n $animationConfig?: TAnimationConfig;\n}>`\n stroke: ${({ theme, stroke }) => theme.colors[stroke]};\n ${({ $animationConfig }) =>\n $animationConfig\n ? css`\n animation: ${$animationConfig.keyframes} ${$animationConfig.duration ?? 2}s\n ${$animationConfig.timingFunction ?? 'ease'}\n ${$animationConfig.iterationCount ?? 'infinite'}\n ${$animationConfig.fillMode ?? 'forwards'};\n `\n : css`\n animation: none;\n `}\n`;\n"],"names":["Svg","styled","Path","theme","stroke","$animationConfig","css"],"mappings":";AAKO,MAAMA,IAAMC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAOD,EAAO;AAAA,YAIf,CAAC,EAAE,OAAAE,GAAO,QAAAC,EAAA,MAAaD,EAAM,OAAOC,CAAM,CAAC;AAAA,IACnD,CAAC,EAAE,kBAAAC,QACHA,IACIC;AAAA,uBACeD,EAAiB,SAAS,IAAIA,EAAiB,YAAY,CAAC;AAAA,cACrEA,EAAiB,kBAAkB,MAAM;AAAA,cACzCA,EAAiB,kBAAkB,UAAU;AAAA,cAC7CA,EAAiB,YAAY,UAAU;AAAA,YAE7CC;AAAA;AAAA,SAEC;AAAA;"}
1
+ {"version":3,"file":"animated-arc-styled.js","sources":["../../../../src/features/ui/animated-arc/animated-arc-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../types';\n\nimport styled, { keyframes } from 'styled-components';\n\nimport { RAINBOW_COLOR_ANIMATION_DURATION } from './animated-arc-constants';\n\nconst 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\nexport const Svg = styled.svg`\n position: absolute;\n z-index: 1;\n pointer-events: none;\n`;\n\nexport const Path = styled.path<{ stroke: TColorNames; $showAnimatedRainbowArc: boolean }>`\n stroke: ${({ theme, stroke }) => theme.colors[stroke]};\n animation: ${({ $showAnimatedRainbowArc }) =>\n $showAnimatedRainbowArc ? rainbowColorAnimation : 'undefined'}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["rainbowColorAnimation","keyframes","Svg","styled","Path","theme","stroke","$showAnimatedRainbowArc","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;AAMA,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBjBC,IAAMC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAOD,EAAO;AAAA,YACf,CAAC,EAAE,OAAAE,GAAO,QAAAC,EAAA,MAAaD,EAAM,OAAOC,CAAM,CAAC;AAAA,eACxC,CAAC,EAAE,yBAAAC,EAAA,MACZA,IAA0BP,IAAwB,WAAW;AAAA,MAC7DQ,CAAgC;AAAA;"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as p } from "react/jsx-runtime";
2
- import { useRef as u, useMemo as g, useLayoutEffect as k } from "react";
2
+ import { useRef as u, useMemo as g, useLayoutEffect as w } from "react";
3
3
  import { describeArc as R } from "./animated-arc-helpers.js";
4
- import { Svg as w, Path as x } from "./animated-arc-styled.js";
4
+ import { Svg as k, Path as A } from "./animated-arc-styled.js";
5
5
  const L = ({
6
6
  radius: e,
7
7
  strokeWidth: i,
@@ -9,29 +9,29 @@ const L = ({
9
9
  targetAngle: a,
10
10
  startAngle: c = 0,
11
11
  duration: o = 2,
12
- mode: n = "draw",
13
- delay: s = 0,
14
- animationConfig: $
12
+ mode: s = "draw",
13
+ delay: n = 0,
14
+ showAnimatedRainbowArc: $ = !1
15
15
  }) => {
16
16
  const f = u(null), r = e, h = e - i / 2, l = g(
17
17
  () => R(r, r, h, c, a),
18
18
  [a, c, h, r]
19
19
  );
20
- return k(() => {
20
+ return w(() => {
21
21
  const t = f.current;
22
22
  if (t) {
23
- if (n === "draw") {
23
+ if (s === "draw") {
24
24
  const m = t.getTotalLength();
25
25
  t.style.strokeDasharray = `${m}`, t.style.strokeDashoffset = `${m}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
26
- t.style.transition = `stroke-dashoffset ${o}s linear ${s}s`, t.style.strokeDashoffset = "0";
26
+ t.style.transition = `stroke-dashoffset ${o}s linear ${n}s`, t.style.strokeDashoffset = "0";
27
27
  });
28
28
  }
29
- n === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
30
- t.style.transition = `opacity ${o} ease-in-out ${s}s`, t.style.opacity = "1";
29
+ s === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
30
+ t.style.transition = `opacity ${o} ease-in-out ${n}s`, t.style.opacity = "1";
31
31
  }));
32
32
  }
33
- }, [l, n, o, s]), /* @__PURE__ */ p(w, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ p(
34
- x,
33
+ }, [l, s, o, n]), /* @__PURE__ */ p(k, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ p(
34
+ A,
35
35
  {
36
36
  ref: f,
37
37
  d: l,
@@ -39,7 +39,7 @@ const L = ({
39
39
  stroke: y,
40
40
  strokeWidth: i,
41
41
  strokeLinecap: "butt",
42
- $animationConfig: $
42
+ $showAnimatedRainbowArc: $
43
43
  }
44
44
  ) });
45
45
  };
@@ -1 +1 @@
1
- {"version":3,"file":"animated-arc.js","sources":["../../../../src/features/ui/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect, useMemo } from 'react';\n\nimport { describeArc } from './animated-arc-helpers';\nimport * as Styled from './animated-arc-styled';\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 animationConfig,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = useMemo(\n () => describeArc(center, center, arcRadius, startAngle, targetAngle),\n [targetAngle, startAngle, arcRadius, center],\n );\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 ${duration} 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 $animationConfig={animationConfig}\n />\n </Styled.Svg>\n );\n};\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","animationConfig","pathRef","useRef","center","arcRadius","arcPath","useMemo","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path"],"mappings":";;;;AAOO,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,iBAAAC;AACF,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAASX,GACTY,IAAYZ,IAASC,IAAc,GACnCY,IAAUC;AAAA,IACd,MAAMC,EAAYJ,GAAQA,GAAQC,GAAWR,GAAYD,CAAW;AAAA,IACpE,CAACA,GAAaC,GAAYQ,GAAWD,CAAM;AAAA,EAAA;AAG7C,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAAOR,EAAQ;AAErB,QAAKQ,GAEL;AAAA,UAAIX,MAAS,QAAQ;AACb,cAAAY,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,qBAAqBZ,CAAQ,YAAYE,CAAK,KACtEU,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIX,MAAS,WACXW,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,QAAAA,EAAK,MAAM,aAAa,WAAWZ,CAAQ,gBAAgBE,CAAK,KAChEU,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACJ,GAASP,GAAMD,GAAUE,CAAK,CAAC,qBAGhCY,GAAA,EAAW,OAAO,IAAInB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAoB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKZ;AAAA,MACL,GAAGI;AAAA,MACH,MAAK;AAAA,MACL,QAAQX;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,kBAAkBO;AAAA,IAAA;AAAA,EAEtB,EAAA,CAAA;AAEJ;"}
1
+ {"version":3,"file":"animated-arc.js","sources":["../../../../src/features/ui/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect, useMemo } from 'react';\n\nimport { describeArc } from './animated-arc-helpers';\nimport * as Styled from './animated-arc-styled';\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 showAnimatedRainbowArc = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = useMemo(\n () => describeArc(center, center, arcRadius, startAngle, targetAngle),\n [targetAngle, startAngle, arcRadius, center],\n );\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 ${duration} 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 $showAnimatedRainbowArc={showAnimatedRainbowArc}\n />\n </Styled.Svg>\n );\n};\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","showAnimatedRainbowArc","pathRef","useRef","center","arcRadius","arcPath","useMemo","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path"],"mappings":";;;;AAOO,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,wBAAAC,IAAyB;AAC3B,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAASX,GACTY,IAAYZ,IAASC,IAAc,GACnCY,IAAUC;AAAA,IACd,MAAMC,EAAYJ,GAAQA,GAAQC,GAAWR,GAAYD,CAAW;AAAA,IACpE,CAACA,GAAaC,GAAYQ,GAAWD,CAAM;AAAA,EAAA;AAG7C,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAAOR,EAAQ;AAErB,QAAKQ,GAEL;AAAA,UAAIX,MAAS,QAAQ;AACb,cAAAY,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,qBAAqBZ,CAAQ,YAAYE,CAAK,KACtEU,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIX,MAAS,WACXW,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,QAAAA,EAAK,MAAM,aAAa,WAAWZ,CAAQ,gBAAgBE,CAAK,KAChEU,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACJ,GAASP,GAAMD,GAAUE,CAAK,CAAC,qBAGhCY,GAAA,EAAW,OAAO,IAAInB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAoB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKZ;AAAA,MACL,GAAGI;AAAA,MACH,MAAK;AAAA,MACL,QAAQX;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,yBAAyBO;AAAA,IAAA;AAAA,EAE7B,EAAA,CAAA;AAEJ;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cuemath/leap",
3
- "version": "2.9.5-j11",
3
+ "version": "2.9.5-j12",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"
@@ -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
@@ -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,50 +0,0 @@
1
- import { jsx as y } from "react/jsx-runtime";
2
- import { useRef as A, useMemo as u, useLayoutEffect as R } from "react";
3
- import { describeArc as k } from "../../helper.js";
4
- import { Svg as w, Path as D } from "./animated-arc-styled.js";
5
- import { ADJUSTED_START_ANGLE as L } from "./constants.js";
6
- const B = ({
7
- radius: e,
8
- strokeWidth: r,
9
- color: $,
10
- targetAngle: i,
11
- startAngle: a = 0,
12
- duration: c = 2,
13
- mode: o = "draw",
14
- delay: s = 0,
15
- playRainbowColors: g = !1
16
- }) => {
17
- const f = A(null), l = u(() => -L + a, [a]), n = e, m = e - r / 2, h = u(
18
- () => k(n, n, m, l, i),
19
- [i, l, m, n]
20
- );
21
- return R(() => {
22
- const t = f.current;
23
- if (t) {
24
- if (o === "draw") {
25
- const p = t.getTotalLength();
26
- t.style.strokeDasharray = `${p}`, t.style.strokeDashoffset = `${p}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
27
- t.style.transition = `stroke-dashoffset ${c}s linear ${s}s`, t.style.strokeDashoffset = "0";
28
- });
29
- }
30
- o === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
31
- t.style.transition = `opacity 0s ease-in-out ${s}s`, t.style.opacity = "1";
32
- }));
33
- }
34
- }, [h, o, c, s]), /* @__PURE__ */ y(w, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ y(
35
- D,
36
- {
37
- ref: f,
38
- d: h,
39
- fill: "none",
40
- stroke: $,
41
- strokeWidth: r,
42
- strokeLinecap: "butt",
43
- $playRainbowColors: g
44
- }
45
- ) });
46
- };
47
- export {
48
- B as AnimatedArc
49
- };
50
- //# 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, useMemo } 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 = useMemo(() => -ADJUSTED_START_ANGLE + startAngle, [startAngle]);\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = useMemo(\n () => describeArc(center, center, arcRadius, adjustedStartAngle, targetAngle),\n [targetAngle, adjustedStartAngle, arcRadius, center],\n );\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","useMemo","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,IAAqBC,EAAQ,MAAM,CAACC,IAAuBT,GAAY,CAACA,CAAU,CAAC,GACnFU,IAASd,GACTe,IAAYf,IAASC,IAAc,GACnCe,IAAUJ;AAAA,IACd,MAAMK,EAAYH,GAAQA,GAAQC,GAAWJ,GAAoBR,CAAW;AAAA,IAC5E,CAACA,GAAaQ,GAAoBI,GAAWD,CAAM;AAAA,EAAA;AAGrD,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAOV,EAAQ;AAErB,QAAKU,GAEL;AAAA,UAAIb,MAAS,QAAQ;AACb,cAAAc,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,qBAAqBd,CAAQ,YAAYE,CAAK,KACtEY,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIb,MAAS,WACXa,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AACrB,QAAAA,EAAA,MAAM,aAAa,0BAA0BZ,CAAK,KACvDY,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACH,GAASV,GAAMD,GAAUE,CAAK,CAAC,qBAGhCc,GAAA,EAAW,OAAO,IAAIrB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAsB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKd;AAAA,MACL,GAAGO;AAAA,MACH,MAAK;AAAA,MACL,QAAQd;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,oBAAoBO;AAAA,IAAA;AAAA,EAExB,EAAA,CAAA;AAEJ;"}
@@ -1,6 +0,0 @@
1
- const A = 1, _ = 150;
2
- export {
3
- _ as ADJUSTED_START_ANGLE,
4
- A as ARC_Z_INDEX
5
- };
6
- //# sourceMappingURL=constants.js.map
@@ -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;"}