@cuemath/leap 3.1.35-beta-0.1 → 3.1.35-beta-0.2
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/puzzles/api/puzzle-assign.js +2 -2
- package/dist/features/puzzles/api/puzzle-assign.js.map +1 -1
- package/dist/features/puzzles/puzzle-container-styled.js +20 -14
- package/dist/features/puzzles/puzzle-container-styled.js.map +1 -1
- package/dist/features/puzzles/puzzle-container.js +50 -50
- package/dist/features/puzzles/puzzle-container.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { createGetAPI as o, createPostAPI as u } from "@cuemath/rest-api";
|
|
2
2
|
import { BASE_URL_V3 as r } from "../../../constants/api.js";
|
|
3
3
|
const { useGet: z, invalidate: l } = o({
|
|
4
|
-
getURL: (s, t, { courseStream: e }) => `${r}/users/${s}/course-
|
|
4
|
+
getURL: (s, t, { courseStream: e }) => `${r}/users/${s}/course-streams/${e}/puzzle/`
|
|
5
5
|
});
|
|
6
6
|
u({
|
|
7
|
-
getURL: (s, { studentId: t, courseStream: e }) => `${r}/users/${t}/course-
|
|
7
|
+
getURL: (s, { studentId: t, courseStream: e }) => `${r}/users/${t}/course-streams/${e}/puzzle/`
|
|
8
8
|
});
|
|
9
9
|
export {
|
|
10
10
|
l as invalidatePuzzleToAssign,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"puzzle-assign.js","sources":["../../../../src/features/puzzles/api/puzzle-assign.ts"],"sourcesContent":["import type { TCourseStream } from '../../milestone/create/milestone-create-types';\nimport type { IPuzzleCardAssignData } from '../puzzle-container-types';\n\nimport { createGetAPI, createPostAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL_V3 } from '../../../constants/api';\n\nconst { useGet: useGetPuzzleToAssign, invalidate: invalidatePuzzleToAssign } = createGetAPI<\n IPuzzleCardAssignData,\n void,\n { courseStream: TCourseStream }\n>({\n getURL: (studentId, _, { courseStream }) =>\n `${BASE_URL_V3}/users/${studentId}/course-
|
|
1
|
+
{"version":3,"file":"puzzle-assign.js","sources":["../../../../src/features/puzzles/api/puzzle-assign.ts"],"sourcesContent":["import type { TCourseStream } from '../../milestone/create/milestone-create-types';\nimport type { IPuzzleCardAssignData } from '../puzzle-container-types';\n\nimport { createGetAPI, createPostAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL_V3 } from '../../../constants/api';\n\nconst { useGet: useGetPuzzleToAssign, invalidate: invalidatePuzzleToAssign } = createGetAPI<\n IPuzzleCardAssignData,\n void,\n { courseStream: TCourseStream }\n>({\n getURL: (studentId, _, { courseStream }) =>\n `${BASE_URL_V3}/users/${studentId}/course-streams/${courseStream}/puzzle/`,\n});\n\nconst { usePost: usePostPuzzleToAssign } = createPostAPI<\n Record<string, unknown>,\n {\n puzzle_id: string;\n action: string;\n },\n {\n studentId: string;\n courseStream: TCourseStream;\n }\n>({\n getURL: (_, { studentId, courseStream }) =>\n `${BASE_URL_V3}/users/${studentId}/course-streams/${courseStream}/puzzle/`,\n});\n\nexport { useGetPuzzleToAssign, usePostPuzzleToAssign, invalidatePuzzleToAssign };\n"],"names":["useGetPuzzleToAssign","invalidatePuzzleToAssign","createGetAPI","studentId","_","courseStream","BASE_URL_V3","createPostAPI"],"mappings":";;AAOA,MAAM,EAAE,QAAQA,GAAsB,YAAYC,EAAA,IAA6BC,EAI7E;AAAA,EACA,QAAQ,CAACC,GAAWC,GAAG,EAAE,cAAAC,EAAA,MACvB,GAAGC,CAAW,UAAUH,CAAS,mBAAmBE,CAAY;AACpE,CAAC;AAE0CE,EAUzC;AAAA,EACA,QAAQ,CAACH,GAAG,EAAE,WAAAD,GAAW,cAAAE,EAAA,MACvB,GAAGC,CAAW,UAAUH,CAAS,mBAAmBE,CAAY;AACpE,CAAC;"}
|
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
import o from "styled-components";
|
|
2
2
|
import t from "../ui/layout/flex-view.js";
|
|
3
|
-
const
|
|
3
|
+
const p = o(t)`
|
|
4
4
|
cursor: pointer;
|
|
5
5
|
|
|
6
6
|
&:hover {
|
|
7
7
|
outline: 2px solid ${({ theme: e }) => e.colors.BLACK_1};
|
|
8
8
|
}
|
|
9
|
-
`,
|
|
9
|
+
`, l = o(t)(({ theme: e, $disabled: i }) => {
|
|
10
10
|
const { colors: r } = e;
|
|
11
11
|
return `
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
12
|
+
position: absolute;
|
|
13
|
+
bottom: -48px;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
z-index: -1;
|
|
16
|
+
|
|
17
|
+
${i && `
|
|
18
|
+
background: ${r.WHITE_4};
|
|
19
|
+
border: 2px solid ${r.WHITE_5};
|
|
20
|
+
border-top: 0;
|
|
21
|
+
`}
|
|
22
|
+
`;
|
|
22
23
|
}), c = o(t)`
|
|
23
24
|
position: relative;
|
|
24
25
|
top: -8px;
|
|
@@ -29,12 +30,17 @@ const l = o(t)`
|
|
|
29
30
|
`, a = o(t)`
|
|
30
31
|
position: relative;
|
|
31
32
|
transition: height 0.3s ease-out;
|
|
33
|
+
`, d = o(t)`
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: 0;
|
|
36
|
+
right: 0;
|
|
32
37
|
`;
|
|
33
38
|
export {
|
|
39
|
+
d as AssignedTag,
|
|
34
40
|
u as CheckMarkIcon,
|
|
35
|
-
|
|
41
|
+
l as PuzzleButton,
|
|
36
42
|
a as PuzzleContainer,
|
|
37
|
-
|
|
43
|
+
p as PuzzleContent,
|
|
38
44
|
c as PuzzleText
|
|
39
45
|
};
|
|
40
46
|
//# sourceMappingURL=puzzle-container-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"puzzle-container-styled.js","sources":["../../../src/features/puzzles/puzzle-container-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../ui/layout/flex-view';\n\nconst PuzzleContent = styled(FlexView)`\n cursor: pointer;\n\n &:hover {\n outline: 2px solid ${({ theme }) => theme.colors.BLACK_1};\n }\n`;\n\ninterface IPuzzleButton {\n $disabled?: boolean;\n}\n\nconst PuzzleButton = styled(FlexView)<IPuzzleButton>(({ theme, $disabled }) => {\n const { colors } = theme;\n\n return `\n
|
|
1
|
+
{"version":3,"file":"puzzle-container-styled.js","sources":["../../../src/features/puzzles/puzzle-container-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../ui/layout/flex-view';\n\nconst PuzzleContent = styled(FlexView)`\n cursor: pointer;\n\n &:hover {\n outline: 2px solid ${({ theme }) => theme.colors.BLACK_1};\n }\n`;\n\ninterface IPuzzleButton {\n $disabled?: boolean;\n}\n\nconst PuzzleButton = styled(FlexView)<IPuzzleButton>(({ theme, $disabled }) => {\n const { colors } = theme;\n\n return `\n position: absolute;\n bottom: -48px;\n cursor: pointer;\n z-index: -1;\n \n ${\n $disabled &&\n `\n background: ${colors.WHITE_4};\n border: 2px solid ${colors.WHITE_5};\n border-top: 0;\n `\n }\n `;\n});\n\nconst PuzzleText = styled(FlexView)`\n position: relative;\n top: -8px;\n height: 100%;\n width: 100%;\n`;\n\nconst CheckMarkIcon = styled(FlexView)`\n border-radius: 50%;\n`;\n\nconst PuzzleContainer = styled(FlexView)`\n position: relative;\n transition: height 0.3s ease-out;\n`;\n\nconst AssignedTag = styled(FlexView)`\n position: absolute;\n top: 0;\n right: 0;\n`;\n\nexport { PuzzleContainer, PuzzleContent, PuzzleButton, PuzzleText, CheckMarkIcon, AssignedTag };\n"],"names":["PuzzleContent","styled","FlexView","theme","PuzzleButton","$disabled","colors","PuzzleText","CheckMarkIcon","PuzzleContainer","AssignedTag"],"mappings":";;AAIM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,yBAIZ,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAQtDC,IAAeH,EAAOC,CAAQ,EAAiB,CAAC,EAAE,OAAAC,GAAO,WAAAE,QAAgB;AACvE,QAAA,EAAE,QAAAC,EAAW,IAAAH;AAEZ,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOHE,KACA;AAAA,oBACcC,EAAO,OAAO;AAAA,0BACRA,EAAO,OAAO;AAAA;AAAA,KAGpC;AAAA;AAEJ,CAAC,GAEKC,IAAaN,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAO5BM,IAAgBP,EAAOC,CAAQ;AAAA;AAAA,GAI/BO,IAAkBR,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKjCQ,IAAcT,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}
|
|
@@ -1,48 +1,46 @@
|
|
|
1
|
-
import { jsx as i, jsxs as
|
|
2
|
-
import { memo as T, useState as u, useRef as v, useEffect as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { PuzzleContainer as
|
|
8
|
-
const
|
|
9
|
-
({ userType:
|
|
1
|
+
import { jsx as i, jsxs as c, Fragment as P } from "react/jsx-runtime";
|
|
2
|
+
import { memo as T, useState as u, useRef as v, useEffect as h, useCallback as m } from "react";
|
|
3
|
+
import E from "../../assets/line-icons/icons/check2.js";
|
|
4
|
+
import _ from "../ui/image/image.js";
|
|
5
|
+
import s from "../ui/text/text.js";
|
|
6
|
+
import x from "./comps/puzzle-card.js";
|
|
7
|
+
import { PuzzleContainer as w, PuzzleContent as X, AssignedTag as j, PuzzleButton as L, PuzzleText as O, CheckMarkIcon as B } from "./puzzle-container-styled.js";
|
|
8
|
+
const D = 1500, S = T(
|
|
9
|
+
({ userType: $, triggerReveal: a = !1, onFullyHidden: r, onPuzzleClick: l, puzzleData: f }) => {
|
|
10
10
|
const {
|
|
11
|
-
image_hue:
|
|
11
|
+
image_hue: d,
|
|
12
12
|
image_url: C,
|
|
13
|
-
assigned:
|
|
14
|
-
title:
|
|
15
|
-
} = f, [e,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
g(() => {
|
|
19
|
-
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
}), [e, t]);
|
|
25
|
-
const I = m(() => {
|
|
13
|
+
assigned: n,
|
|
14
|
+
title: A
|
|
15
|
+
} = f, [e, t] = u("hidden"), [g, z] = u(!1), o = v(null);
|
|
16
|
+
h(() => {
|
|
17
|
+
n || (a ? g ? t("assigned") : e === "hidden" && t("movingIn") : e !== "hidden" && e !== "movingOut" && t("movingOut"));
|
|
18
|
+
}, [a, g, n]), h(() => (e === "assigned" && !n && (o.current = setTimeout(() => {
|
|
19
|
+
t("movingOut");
|
|
20
|
+
}, D)), () => {
|
|
21
|
+
o.current && clearTimeout(o.current);
|
|
22
|
+
}), [e, n]);
|
|
23
|
+
const b = m(() => {
|
|
26
24
|
switch (e) {
|
|
27
25
|
case "movingIn":
|
|
28
|
-
|
|
26
|
+
t("revealing");
|
|
29
27
|
break;
|
|
30
28
|
case "revealing":
|
|
31
|
-
|
|
29
|
+
t("visible");
|
|
32
30
|
break;
|
|
33
31
|
case "assigning":
|
|
34
|
-
|
|
32
|
+
t("assigned"), z(!0);
|
|
35
33
|
break;
|
|
36
34
|
case "movingOut":
|
|
37
|
-
|
|
35
|
+
t("hidden"), r == null || r();
|
|
38
36
|
break;
|
|
39
37
|
}
|
|
40
|
-
}, [e,
|
|
41
|
-
e === "visible" &&
|
|
38
|
+
}, [e, r]), I = () => {
|
|
39
|
+
n || e === "visible" && t("assigning");
|
|
42
40
|
}, k = m(() => {
|
|
43
41
|
l();
|
|
44
|
-
}, [l]), p = () => e === "visible" ? /* @__PURE__ */
|
|
45
|
-
/* @__PURE__ */
|
|
42
|
+
}, [l]), p = () => e === "visible" || n ? /* @__PURE__ */ c(P, { children: [
|
|
43
|
+
/* @__PURE__ */ c(
|
|
46
44
|
X,
|
|
47
45
|
{
|
|
48
46
|
$justifyContent: "center",
|
|
@@ -53,53 +51,55 @@ const B = 1500, D = T(
|
|
|
53
51
|
title: "Click to preview",
|
|
54
52
|
$flexGapX: 1.5,
|
|
55
53
|
children: [
|
|
56
|
-
/* @__PURE__ */ i(
|
|
57
|
-
/* @__PURE__ */ i(
|
|
54
|
+
/* @__PURE__ */ i(_, { width: 136, height: 136, src: C, withLoader: !1, alt: "Puzzle" }),
|
|
55
|
+
/* @__PURE__ */ i(s, { $renderAs: "h4", children: A }),
|
|
56
|
+
/* @__PURE__ */ i(j, { $gap: 4, $gutter: 8, $background: "BLACK_1", children: /* @__PURE__ */ i(s, { $renderAs: "ac4", $color: "WHITE_1", children: "Assigned" }) })
|
|
58
57
|
]
|
|
59
58
|
}
|
|
60
59
|
),
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
$ === "TEACHER" && /* @__PURE__ */ i(
|
|
61
|
+
L,
|
|
63
62
|
{
|
|
64
63
|
$background: "BLACK_1",
|
|
65
|
-
$
|
|
64
|
+
$widthX: 15.75,
|
|
66
65
|
$alignItems: "center",
|
|
67
66
|
$justifyContent: "center",
|
|
68
67
|
$gapX: 0.75,
|
|
69
68
|
$gutterX: 1,
|
|
70
|
-
onClick:
|
|
71
|
-
$disabled:
|
|
72
|
-
children: /* @__PURE__ */ i(
|
|
69
|
+
onClick: I,
|
|
70
|
+
$disabled: n,
|
|
71
|
+
children: /* @__PURE__ */ i(s, { $renderAs: "ub1-bold", $color: n ? "BLACK_T_38" : "WHITE_1", children: n ? "Discuss in next class" : "Assign" })
|
|
73
72
|
}
|
|
74
73
|
)
|
|
75
|
-
] }) : e === "assigned" ? /* @__PURE__ */
|
|
74
|
+
] }) : e === "assigned" ? /* @__PURE__ */ c(O, { $alignItems: "center", $justifyContent: "center", $flexGap: 8, children: [
|
|
76
75
|
/* @__PURE__ */ i(
|
|
77
|
-
|
|
76
|
+
B,
|
|
78
77
|
{
|
|
79
78
|
$widthX: 2.5,
|
|
80
79
|
$heightX: 2.5,
|
|
81
80
|
$background: "WHITE",
|
|
82
81
|
$alignItems: "center",
|
|
83
82
|
$justifyContent: "center",
|
|
84
|
-
children: /* @__PURE__ */ i(
|
|
83
|
+
children: /* @__PURE__ */ i(E, {})
|
|
85
84
|
}
|
|
86
85
|
),
|
|
87
|
-
/* @__PURE__ */ i(
|
|
86
|
+
/* @__PURE__ */ i(s, { $renderAs: "ab1-bold", $align: "center", $color: "WHITE", children: "Puzzle assigned" })
|
|
88
87
|
] }) : null;
|
|
89
|
-
return e === "hidden" && !
|
|
90
|
-
|
|
88
|
+
return e === "hidden" && !a ? null : /* @__PURE__ */ i(w, { children: /* @__PURE__ */ i(
|
|
89
|
+
x,
|
|
91
90
|
{
|
|
92
|
-
animationPhase: e,
|
|
93
|
-
onAnimationEnd:
|
|
94
|
-
imageHue:
|
|
91
|
+
animationPhase: n ? void 0 : e,
|
|
92
|
+
onAnimationEnd: b,
|
|
93
|
+
imageHue: d ?? "BLUE",
|
|
95
94
|
heightX: 19,
|
|
96
95
|
widthX: 15.75,
|
|
96
|
+
backgroundColor: n ? `${d}_2` : void 0,
|
|
97
97
|
children: p()
|
|
98
98
|
}
|
|
99
99
|
) });
|
|
100
100
|
}
|
|
101
|
-
),
|
|
101
|
+
), R = S;
|
|
102
102
|
export {
|
|
103
|
-
|
|
103
|
+
R as default
|
|
104
104
|
};
|
|
105
105
|
//# sourceMappingURL=puzzle-container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"puzzle-container.js","sources":["../../../src/features/puzzles/puzzle-container.tsx"],"sourcesContent":["import type { TPuzzleCardAnimationPhases } from './comps/puzzle-card-types';\nimport type { IPuzzleCardContainerProps } from './puzzle-container-types';\nimport type { FC } from 'react';\n\nimport { useState, useCallback, useEffect, useRef, memo } from 'react';\n\nimport Check2Icon from '../../assets/line-icons/icons/check2';\nimport Image from '../ui/image/image';\nimport Text from '../ui/text/text';\nimport PuzzleCard from './comps/puzzle-card';\nimport * as Styled from './puzzle-container-styled';\n\nconst ASSIGNED_DISPLAY_DURATION = 1500; // ms\n\nconst PuzzleCardContainer: FC<IPuzzleCardContainerProps> = memo(\n ({ userType, triggerReveal = false, onFullyHidden, onPuzzleClick, puzzleData }) => {\n const {\n image_hue: imageHue,\n image_url: imageUrl,\n assigned: externalAssigned,\n title,\n } = puzzleData;\n\n const [animationPhase, setAnimationPhase] = useState<TPuzzleCardAnimationPhases>(
|
|
1
|
+
{"version":3,"file":"puzzle-container.js","sources":["../../../src/features/puzzles/puzzle-container.tsx"],"sourcesContent":["import type { TPuzzleCardAnimationPhases } from './comps/puzzle-card-types';\nimport type { IPuzzleCardContainerProps } from './puzzle-container-types';\nimport type { FC } from 'react';\n\nimport { useState, useCallback, useEffect, useRef, memo } from 'react';\n\nimport Check2Icon from '../../assets/line-icons/icons/check2';\nimport Image from '../ui/image/image';\nimport Text from '../ui/text/text';\nimport PuzzleCard from './comps/puzzle-card';\nimport * as Styled from './puzzle-container-styled';\n\nconst ASSIGNED_DISPLAY_DURATION = 1500; // ms\n\nconst PuzzleCardContainer: FC<IPuzzleCardContainerProps> = memo(\n ({ userType, triggerReveal = false, onFullyHidden, onPuzzleClick, puzzleData }) => {\n const {\n image_hue: imageHue,\n image_url: imageUrl,\n assigned: externalAssigned,\n title,\n } = puzzleData;\n\n const [animationPhase, setAnimationPhase] = useState<TPuzzleCardAnimationPhases>('hidden');\n const [isAssigned, setIsAssigned] = useState(false);\n\n const assignedTimer = useRef<NodeJS.Timeout | null>(null);\n\n // Main trigger to start or hide the card\n useEffect(() => {\n if (!externalAssigned) {\n if (triggerReveal) {\n if (isAssigned) {\n setAnimationPhase('assigned'); // Already assigned, show statically\n } else if (animationPhase === 'hidden') {\n setAnimationPhase('movingIn'); // Start the animation sequence\n }\n } else {\n // If trigger is removed, start hiding (unless already hidden/hiding)\n if (animationPhase !== 'hidden' && animationPhase !== 'movingOut') {\n setAnimationPhase('movingOut');\n }\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [triggerReveal, isAssigned, externalAssigned]);\n\n // Timer to auto-hide after the 'assigned' phase\n useEffect(() => {\n if (animationPhase === 'assigned' && !externalAssigned) {\n assignedTimer.current = setTimeout(() => {\n setAnimationPhase('movingOut');\n }, ASSIGNED_DISPLAY_DURATION);\n }\n\n return () => {\n if (assignedTimer.current) clearTimeout(assignedTimer.current);\n };\n }, [animationPhase, externalAssigned]);\n\n // State machine for animations\n const handleAnimationEnd = useCallback(() => {\n switch (animationPhase) {\n case 'movingIn':\n setAnimationPhase('revealing');\n break;\n case 'revealing':\n setAnimationPhase('visible');\n break;\n case 'assigning':\n setAnimationPhase('assigned');\n setIsAssigned(true);\n break;\n case 'movingOut':\n setAnimationPhase('hidden');\n onFullyHidden?.();\n break;\n default:\n break;\n }\n }, [animationPhase, onFullyHidden]);\n\n // Handler for the \"Assign\" button\n const handleAssign = () => {\n if (externalAssigned) return; // Do nothing if already assigned\n\n if (animationPhase === 'visible') {\n setAnimationPhase('assigning');\n }\n };\n\n const handleOnPuzzleClick = useCallback(() => {\n onPuzzleClick();\n }, [onPuzzleClick]);\n\n // Render content only during specific phases\n const renderContent = () => {\n if (animationPhase === 'visible' || externalAssigned) {\n return (\n <>\n <Styled.PuzzleContent\n $justifyContent=\"center\"\n $alignItems=\"center\"\n $width=\"100%\"\n $height=\"100%\"\n onClick={handleOnPuzzleClick}\n title=\"Click to preview\"\n $flexGapX={1.5}\n >\n <Image width={136} height={136} src={imageUrl} withLoader={false} alt=\"Puzzle\" />\n <Text $renderAs=\"h4\">{title}</Text>\n\n <Styled.AssignedTag $gap={4} $gutter={8} $background=\"BLACK_1\">\n <Text $renderAs=\"ac4\" $color=\"WHITE_1\">\n Assigned\n </Text>\n </Styled.AssignedTag>\n </Styled.PuzzleContent>\n\n {userType === 'TEACHER' && (\n <Styled.PuzzleButton\n $background=\"BLACK_1\"\n $widthX={15.75}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $gapX={0.75}\n $gutterX={1}\n onClick={handleAssign}\n $disabled={externalAssigned}\n >\n <Text $renderAs=\"ub1-bold\" $color={externalAssigned ? 'BLACK_T_38' : 'WHITE_1'}>\n {externalAssigned ? 'Discuss in next class' : 'Assign'}\n </Text>\n </Styled.PuzzleButton>\n )}\n </>\n );\n }\n\n if (animationPhase === 'assigned') {\n return (\n <Styled.PuzzleText $alignItems=\"center\" $justifyContent=\"center\" $flexGap={8}>\n <Styled.CheckMarkIcon\n $widthX={2.5}\n $heightX={2.5}\n $background=\"WHITE\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n <Check2Icon />\n </Styled.CheckMarkIcon>\n\n <Text $renderAs=\"ab1-bold\" $align=\"center\" $color=\"WHITE\">\n Puzzle assigned\n </Text>\n </Styled.PuzzleText>\n );\n }\n\n // No content during animations\n return null;\n };\n\n if (animationPhase === 'hidden' && !triggerReveal) {\n return null;\n }\n\n return (\n <Styled.PuzzleContainer>\n <PuzzleCard\n animationPhase={!externalAssigned ? animationPhase : undefined}\n onAnimationEnd={handleAnimationEnd}\n imageHue={imageHue ?? 'BLUE'}\n heightX={19}\n widthX={15.75}\n backgroundColor={externalAssigned ? `${imageHue}_2` : undefined}\n >\n {renderContent()}\n </PuzzleCard>\n </Styled.PuzzleContainer>\n );\n },\n);\n\nexport default PuzzleCardContainer;\n"],"names":["ASSIGNED_DISPLAY_DURATION","PuzzleCardContainer","memo","userType","triggerReveal","onFullyHidden","onPuzzleClick","puzzleData","imageHue","imageUrl","externalAssigned","title","animationPhase","setAnimationPhase","useState","isAssigned","setIsAssigned","assignedTimer","useRef","useEffect","handleAnimationEnd","useCallback","handleAssign","handleOnPuzzleClick","renderContent","jsxs","Fragment","Styled.PuzzleContent","jsx","Image","Text","Styled.AssignedTag","Styled.PuzzleButton","Styled.PuzzleText","Styled.CheckMarkIcon","Check2Icon","Styled.PuzzleContainer","PuzzleCard","PuzzleCardContainer$1"],"mappings":"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"}
|