@cuemath/leap 3.2.18-mb → 3.2.19-beta-0.1

package/dist/features/puzzles/puzzle-container/puzzle-container-view.js

@@ -0,0 +1,55 @@
+import { jsxs as i, Fragment as $, jsx as e } from "react/jsx-runtime";
+import { memo as d } from "react";
+import m from "../../ui/buttons/clickable/clickable.js";
+import u from "../../ui/image/image.js";
+import t from "../../ui/text/text.js";
+import { PuzzleContent as g, AssignedTag as h, PuzzleButton as p } from "./puzzle-container-styled.js";
+const k = d(
+  ({ handleOnPuzzleClick: l, imageUrl: o, title: c, handleAssign: a, assigned: r, assigning: n, analyticsProps: s }) => /* @__PURE__ */ i($, { children: [
+    /* @__PURE__ */ i(
+      g,
+      {
+        $justifyContent: "center",
+        $alignItems: "center",
+        onClick: l,
+        title: "Click to preview",
+        $flexGapX: 1.5,
+        $assigned: r,
+        $gutterX: 1,
+        children: [
+          /* @__PURE__ */ e(u, { width: 136, height: 136, src: o, withLoader: !1, alt: "Puzzle" }),
+          /* @__PURE__ */ e(t, { $renderAs: "h4", $align: "center", children: c }),
+          r && /* @__PURE__ */ e(h, { $gap: 4, $gutter: 8, $background: "BLACK_1", children: /* @__PURE__ */ e(t, { $renderAs: "ac4", $color: "WHITE_1", children: "Assigned" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      m,
+      {
+        onClick: a,
+        label: "",
+        analyticsLabel: "puzzle_assigned",
+        disabled: r || n,
+        analyticsProps: s,
+        children: /* @__PURE__ */ e(
+          p,
+          {
+            $background: "BLACK_1",
+            $widthX: 15.75,
+            $alignItems: "center",
+            $justifyContent: "center",
+            $gapX: 0.75,
+            $gutterX: 1,
+            $assigned: r,
+            $assigning: n,
+            children: /* @__PURE__ */ e(t, { $renderAs: "ub1-bold", $color: r ? "BLACK_T_38" : "WHITE_1", children: r ? "Discuss in next class" : "Assign" })
+          }
+        )
+      }
+    )
+  ] })
+);
+export {
+  k as default
+};
+//# sourceMappingURL=puzzle-container-view.js.map

package/dist/features/puzzles/puzzle-container/puzzle-container-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-container-view.js","sources":["../../../../src/features/puzzles/puzzle-container/puzzle-container-view.tsx"],"sourcesContent":["import type { IPuzzleContainerViewProps } from './puzzle-container-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport Image from '../../ui/image/image';\nimport Text from '../../ui/text/text';\nimport * as Styled from './puzzle-container-styled';\n\nconst PuzzleContainerView: FC<IPuzzleContainerViewProps> = memo(\n  ({ handleOnPuzzleClick, imageUrl, title, handleAssign, assigned, assigning, analyticsProps }) => {\n    return (\n      <>\n        <Styled.PuzzleContent\n          $justifyContent=\"center\"\n          $alignItems=\"center\"\n          onClick={handleOnPuzzleClick}\n          title=\"Click to preview\"\n          $flexGapX={1.5}\n          $assigned={assigned}\n          $gutterX={1}\n        >\n          <Image width={136} height={136} src={imageUrl} withLoader={false} alt=\"Puzzle\" />\n          <Text $renderAs=\"h4\" $align=\"center\">\n            {title}\n          </Text>\n\n          {assigned && (\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          )}\n        </Styled.PuzzleContent>\n\n        <Clickable\n          onClick={handleAssign}\n          label=\"\"\n          analyticsLabel=\"puzzle_assigned\"\n          disabled={assigned || assigning}\n          analyticsProps={analyticsProps}\n        >\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            $assigned={assigned}\n            $assigning={assigning}\n          >\n            <Text $renderAs=\"ub1-bold\" $color={assigned ? 'BLACK_T_38' : 'WHITE_1'}>\n              {assigned ? 'Discuss in next class' : 'Assign'}\n            </Text>\n          </Styled.PuzzleButton>\n        </Clickable>\n      </>\n    );\n  },\n);\n\nexport default PuzzleContainerView;\n"],"names":["PuzzleContainerView","memo","handleOnPuzzleClick","imageUrl","title","handleAssign","assigned","assigning","analyticsProps","jsxs","Fragment","Styled.PuzzleContent","jsx","Image","Text","Styled.AssignedTag","Clickable","Styled.PuzzleButton"],"mappings":";;;;;;AAUA,MAAMA,IAAqDC;AAAA,EACzD,CAAC,EAAE,qBAAAC,GAAqB,UAAAC,GAAU,OAAAC,GAAO,cAAAC,GAAc,UAAAC,GAAU,WAAAC,GAAW,gBAAAC,QAGtE,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,SAAST;AAAA,QACT,OAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAWI;AAAA,QACX,UAAU;AAAA,QAEV,UAAA;AAAA,UAAC,gBAAAM,EAAAC,GAAA,EAAM,OAAO,KAAK,QAAQ,KAAK,KAAKV,GAAU,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,4BAC9EW,GAAK,EAAA,WAAU,MAAK,QAAO,UACzB,UACHV,GAAA;AAAA,UAECE,KACE,gBAAAM,EAAAG,GAAA,EAAmB,MAAM,GAAG,SAAS,GAAG,aAAY,WACnD,4BAACD,GAAK,EAAA,WAAU,OAAM,QAAO,WAAU,qBAEvC,CAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IAEA,gBAAAF;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAASX;AAAA,QACT,OAAM;AAAA,QACN,gBAAe;AAAA,QACf,UAAUC,KAAYC;AAAA,QACtB,gBAAAC;AAAA,QAEA,UAAA,gBAAAI;AAAA,UAACK;AAAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,SAAS;AAAA,YACT,aAAY;AAAA,YACZ,iBAAgB;AAAA,YAChB,OAAO;AAAA,YACP,UAAU;AAAA,YACV,WAAWX;AAAA,YACX,YAAYC;AAAA,YAEZ,UAAA,gBAAAK,EAACE,GAAK,EAAA,WAAU,YAAW,QAAQR,IAAW,eAAe,WAC1D,UAAWA,IAAA,0BAA0B,SACxC,CAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAGN;"}

package/dist/features/puzzles/puzzle-container/puzzle-container.js

@@ -1,127 +1,120 @@
-import { jsx as i, jsxs as l, Fragment as w } from "react/jsx-runtime";
-import { memo as X, useState as z, useRef as j, useEffect as C, useCallback as c } from "react";
-import L from "../../../assets/line-icons/icons/check2.js";
-import O from "../../ui/image/image.js";
-import r from "../../ui/text/text.js";
-import { usePostPuzzleToAssign as B } from "../api/puzzle-assign.js";
-import D from "../comps/puzzle-card.js";
-import { PuzzleContainer as W, PuzzleContent as G, AssignedTag as K, PuzzleButton as S, PuzzleText as U, CheckMarkIcon as H } from "./puzzle-container-styled.js";
-const N = 1500, M = X(
+import { jsx as n, jsxs as T } from "react/jsx-runtime";
+import { memo as Z, useState as j, useRef as k, useMemo as u, useEffect as O, useCallback as m } from "react";
+import U from "../../ui/layout/flex-view.js";
+import v from "../../ui/lottie-animation/lottie-animation.js";
+import { usePostPuzzleToAssign as y } from "../api/puzzle-assign.js";
+import { PUZZLE_ASSIGN_ANIMATION as c } from "../constants/puzzle-container.js";
+import { getPuzzleCardLottie as D } from "../utils/puzzle-pattern.js";
+import { PuzzleContainer as E, PuzzleAssignedWrapper as G, PuzzleContentWrapper as M } from "./puzzle-container-styled.js";
+import S from "./puzzle-container-view.js";
+const W = {
+  loop: !1,
+  renderer: "svg",
+  autoPlay: !1
+}, X = Z(
   ({
-    userType: A,
-    triggerReveal: o = !1,
-    onFullyHidden: s,
-    onPuzzleClick: d,
-    puzzleData: p,
-    courseStream: g,
-    studentId: u
+    triggerReveal: l = !1,
+    onFullyHidden: o,
+    onPuzzleClick: f,
+    puzzleData: $,
+    courseStream: z,
+    studentId: p
   }) => {
     const {
-      image_hue: m,
-      image_url: b,
-      assigned: e,
-      title: I,
-      id: h
-    } = p, [n, t] = z("hidden"), [f, P] = z(!1), a = j(null), { post: $, isProcessing: k } = B({
-      onComplete: (x) => {
-        x ? t("visible") : n === "visible" && t("assigning");
+      image_hue: i,
+      image_url: g,
+      assigned: s,
+      title: d,
+      id: P,
+      node_id: A,
+      student_elo_rating: h,
+      current_elo_rating: _
+    } = $, [I, a] = j(s), r = k(null), w = u(() => D(i), [i]), R = u(
+      () => ({
+        node_id: A,
+        node_type: "PUZZLE_CARD",
+        student_elo_rating: h,
+        current_elo_rating: _
+      }),
+      [A, h, _]
+    ), { post: C, isProcessing: b } = y({
+      onComplete: (e) => {
+        var t;
+        e ? a(!0) : ((t = r.current) == null || t.playSegments(c.REVEAL_ASSIGNED, !1), a(!1));
       }
     });
-    C(() => {
-      e || (o ? f ? t("assigned") : n === "hidden" && t("movingIn") : n !== "hidden" && n !== "movingOut" && t("movingOut"));
-    }, [o, f, e]), C(() => (n === "assigned" && !e && (a.current = setTimeout(() => {
-      t("movingOut");
-    }, N)), () => {
-      a.current && clearTimeout(a.current);
-    }), [n, e]);
-    const T = c(() => {
-      switch (n) {
-        case "movingIn":
-          t("revealing");
-          break;
-        case "revealing":
-          t("visible");
-          break;
-        case "assigning":
-          t("assigned"), P(!0);
-          break;
-        case "movingOut":
-          t("hidden"), s == null || s();
-          break;
-      }
-    }, [n, s]), v = c(() => {
-      e || $(
+    O(() => {
+      var e, t;
+      s || (l ? (e = r.current) == null || e.playSegments(c.REVEAL, !0) : ((t = r.current) == null || t.stop(), a(!1)));
+    }, [s, l]);
+    const x = m(() => {
+      s || C(
         {
-          puzzle_id: h
+          puzzle_id: P
         },
         {
-          studentId: u,
-          courseStream: g
+          studentId: p,
+          courseStream: z
         }
       );
-    }, [g, e, $, h, u]), _ = c(() => {
-      d();
-    }, [d]), E = () => n === "visible" || e ? /* @__PURE__ */ l(w, { children: [
-      /* @__PURE__ */ l(
-        G,
+    }, [z, s, C, P, p]), L = m(() => {
+      f();
+    }, [f]), V = m(() => {
+      var e;
+      (e = r.current) == null || e.playSegments(c.REVEAL, !0);
+    }, []), N = u(
+      () => ({
+        name: "enterFrame",
+        callback: (e) => {
+          const { currentTime: t } = e;
+          t === 49 && a(!0), t === 101 && (o == null || o());
+        }
+      }),
+      [o]
+    );
+    return l ? s ? /* @__PURE__ */ n(E, { $justifyContent: "center", children: /* @__PURE__ */ n(
+      G,
+      {
+        $imageHue: i,
+        $background: `${i}_2`,
+        $widthX: 15.9375,
+        children: /* @__PURE__ */ n(
+          S,
+          {
+            imageUrl: g,
+            handleOnPuzzleClick: L,
+            title: d,
+            assigned: !0
+          }
+        )
+      }
+    ) }) : /* @__PURE__ */ n(E, { children: /* @__PURE__ */ T(U, { $heightX: 26, children: [
+      /* @__PURE__ */ n(
+        v,
         {
-          $justifyContent: "center",
-          $alignItems: "center",
-          $width: "100%",
-          $height: "100%",
-          onClick: _,
-          title: "Click to preview",
-          $flexGapX: 1.5,
-          children: [
-            /* @__PURE__ */ i(O, { width: 136, height: 136, src: b, withLoader: !1, alt: "Puzzle" }),
-            /* @__PURE__ */ i(r, { $renderAs: "h4", children: I }),
-            e && /* @__PURE__ */ i(K, { $gap: 4, $gutter: 8, $background: "BLACK_1", children: /* @__PURE__ */ i(r, { $renderAs: "ac4", $color: "WHITE_1", children: "Assigned" }) })
-          ]
+          src: w,
+          ref: r,
+          settings: W,
+          onRender: V,
+          eventListener: N,
+          animateOnIntersect: !0
         }
       ),
-      A === "TEACHER" && /* @__PURE__ */ i(
+      /* @__PURE__ */ n(M, { $visible: I, $position: "absolute", children: /* @__PURE__ */ n(
         S,
         {
-          $background: "BLACK_1",
-          $widthX: 15.75,
-          $alignItems: "center",
-          $justifyContent: "center",
-          $gapX: 0.75,
-          $gutterX: 1,
-          onClick: v,
-          $disabled: e || k,
-          children: /* @__PURE__ */ i(r, { $renderAs: "ub1-bold", $color: e ? "BLACK_T_38" : "WHITE_1", children: e ? "Discuss in next class" : "Assign" })
+          imageUrl: g,
+          title: d,
+          handleOnPuzzleClick: L,
+          handleAssign: x,
+          assigning: b,
+          analyticsProps: R
         }
-      )
-    ] }) : n === "assigned" ? /* @__PURE__ */ l(U, { $alignItems: "center", $justifyContent: "center", $flexGap: 8, children: [
-      /* @__PURE__ */ i(
-        H,
-        {
-          $widthX: 2.5,
-          $heightX: 2.5,
-          $background: "WHITE",
-          $alignItems: "center",
-          $justifyContent: "center",
-          children: /* @__PURE__ */ i(L, {})
-        }
-      ),
-      /* @__PURE__ */ i(r, { $renderAs: "ab1-bold", $align: "center", $color: "WHITE", children: "Puzzle assigned" })
-    ] }) : null;
-    return n === "hidden" && !o ? null : /* @__PURE__ */ i(W, { children: /* @__PURE__ */ i(
-      D,
-      {
-        animationPhase: e ? void 0 : n,
-        onAnimationEnd: T,
-        imageHue: m ?? "BLUE",
-        heightX: 19,
-        widthX: 15.75,
-        backgroundColor: e ? `${m}_2` : void 0,
-        children: E()
-      }
-    ) });
+      ) })
+    ] }) }) : null;
   }
-), F = M;
+), te = X;
 export {
-  F as default
+  te as default
 };
 //# sourceMappingURL=puzzle-container.js.map

package/dist/features/puzzles/puzzle-container/puzzle-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-container.js","sources":["../../../../src/features/puzzles/puzzle-container/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 { usePostPuzzleToAssign } from '../api/puzzle-assign';\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  ({\n    userType,\n    triggerReveal = false,\n    onFullyHidden,\n    onPuzzleClick,\n    puzzleData,\n    courseStream,\n    studentId,\n  }) => {\n    const {\n      image_hue: imageHue,\n      image_url: imageUrl,\n      assigned: externalAssigned,\n      title,\n      id: puzzleId,\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    const { post: postPuzzleToAssign, isProcessing } = usePostPuzzleToAssign({\n      onComplete: (error: string | null) => {\n        if (error) {\n          // Handle error (e.g., show a notification)\n          setAnimationPhase('visible'); // Reset to visible if assignment fails\n        } else {\n          if (animationPhase === 'visible') {\n            setAnimationPhase('assigning');\n          }\n        }\n      },\n    });\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    const handleAssign = useCallback(() => {\n      if (externalAssigned) return; // Do nothing if already assigned\n\n      postPuzzleToAssign(\n        {\n          puzzle_id: puzzleId,\n        },\n        {\n          studentId,\n          courseStream,\n        },\n      );\n    }, [courseStream, externalAssigned, postPuzzleToAssign, puzzleId, studentId]);\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              {externalAssigned && (\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              )}\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 || isProcessing}\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","courseStream","studentId","imageHue","imageUrl","externalAssigned","title","puzzleId","animationPhase","setAnimationPhase","useState","isAssigned","setIsAssigned","assignedTimer","useRef","postPuzzleToAssign","isProcessing","usePostPuzzleToAssign","error","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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"}
+{"version":3,"file":"puzzle-container.js","sources":["../../../../src/features/puzzles/puzzle-container/puzzle-container.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\nimport type { IPuzzleCardContainerProps } from './puzzle-container-types';\nimport type { AnimationEventName, BMEnterFrameEvent } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport { useState, useCallback, useEffect, useRef, memo, useMemo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { usePostPuzzleToAssign } from '../api/puzzle-assign';\nimport { PUZZLE_ASSIGN_ANIMATION } from '../constants/puzzle-container';\nimport { getPuzzleCardLottie } from '../utils/puzzle-pattern';\nimport * as Styled from './puzzle-container-styled';\nimport PuzzleAssigned from './puzzle-container-view';\n\nconst modeRevealAnimationSettings = {\n  loop: false,\n  renderer: 'svg',\n  autoPlay: false,\n};\n\nconst PuzzleCardContainer: FC<IPuzzleCardContainerProps> = memo(\n  ({\n    triggerReveal = false,\n    onFullyHidden,\n    onPuzzleClick,\n    puzzleData,\n    courseStream,\n    studentId,\n  }) => {\n    const {\n      image_hue: imageHue,\n      image_url: imageUrl,\n      assigned: externalAssigned,\n      title,\n      id: puzzleId,\n      node_id: nodeId,\n      student_elo_rating,\n      current_elo_rating,\n    } = puzzleData;\n\n    const [showPuzzleInfo, setShowPuzzleInfo] = useState(externalAssigned);\n\n    const assignLottieRef = useRef<ILottieAnimationRef | null>(null);\n    const puzzleLottieSrc = useMemo(() => getPuzzleCardLottie(imageHue), [imageHue]);\n\n    const analyticsProps = useMemo(\n      () => ({\n        node_id: nodeId,\n        node_type: 'PUZZLE_CARD',\n        student_elo_rating,\n        current_elo_rating,\n      }),\n      [nodeId, student_elo_rating, current_elo_rating],\n    );\n\n    const { post: postPuzzleToAssign, isProcessing } = usePostPuzzleToAssign({\n      onComplete: (error: string | null) => {\n        if (error) {\n          // Handle error (e.g., show a notification)\n          setShowPuzzleInfo(true);\n        } else {\n          assignLottieRef.current?.playSegments(PUZZLE_ASSIGN_ANIMATION.REVEAL_ASSIGNED, false);\n\n          setShowPuzzleInfo(false);\n        }\n      },\n    });\n\n    useEffect(() => {\n      if (!externalAssigned) {\n        if (triggerReveal) {\n          assignLottieRef.current?.playSegments(PUZZLE_ASSIGN_ANIMATION.REVEAL, true);\n        } else {\n          assignLottieRef.current?.stop();\n          setShowPuzzleInfo(false);\n        }\n      }\n    }, [externalAssigned, triggerReveal]);\n\n    const handleAssign = useCallback(() => {\n      if (externalAssigned) return;\n\n      postPuzzleToAssign(\n        {\n          puzzle_id: puzzleId,\n        },\n        {\n          studentId,\n          courseStream,\n        },\n      );\n    }, [courseStream, externalAssigned, postPuzzleToAssign, puzzleId, studentId]);\n\n    const handleOnPuzzleClick = useCallback(() => {\n      onPuzzleClick();\n    }, [onPuzzleClick]);\n\n    const showPuzzleLottie = useCallback(() => {\n      assignLottieRef.current?.playSegments(PUZZLE_ASSIGN_ANIMATION.REVEAL, true);\n    }, []);\n\n    const onAnimationFinish = useMemo(\n      () => ({\n        name: 'enterFrame' as AnimationEventName,\n        callback: (event: BMEnterFrameEvent) => {\n          const { currentTime } = event;\n\n          if (currentTime === 49) {\n            setShowPuzzleInfo(true);\n          }\n\n          if (currentTime === 101) {\n            onFullyHidden?.();\n          }\n        },\n      }),\n      [onFullyHidden],\n    );\n\n    if (!triggerReveal) {\n      return null;\n    }\n\n    if (externalAssigned) {\n      return (\n        <Styled.PuzzleContainer $justifyContent=\"center\">\n          <Styled.PuzzleAssignedWrapper\n            $imageHue={imageHue}\n            $background={`${imageHue}_2`}\n            $widthX={15.9375}\n          >\n            <PuzzleAssigned\n              imageUrl={imageUrl}\n              handleOnPuzzleClick={handleOnPuzzleClick}\n              title={title}\n              assigned\n            />\n          </Styled.PuzzleAssignedWrapper>\n        </Styled.PuzzleContainer>\n      );\n    }\n\n    return (\n      <Styled.PuzzleContainer>\n        <FlexView $heightX={26}>\n          <LottieAnimation\n            src={puzzleLottieSrc}\n            ref={assignLottieRef}\n            settings={modeRevealAnimationSettings}\n            onRender={showPuzzleLottie}\n            eventListener={onAnimationFinish}\n            animateOnIntersect\n          />\n\n          <Styled.PuzzleContentWrapper $visible={showPuzzleInfo} $position=\"absolute\">\n            <PuzzleAssigned\n              imageUrl={imageUrl}\n              title={title}\n              handleOnPuzzleClick={handleOnPuzzleClick}\n              handleAssign={handleAssign}\n              assigning={isProcessing}\n              analyticsProps={analyticsProps}\n            />\n          </Styled.PuzzleContentWrapper>\n        </FlexView>\n      </Styled.PuzzleContainer>\n    );\n  },\n);\n\nexport default PuzzleCardContainer;\n"],"names":["modeRevealAnimationSettings","PuzzleCardContainer","memo","triggerReveal","onFullyHidden","onPuzzleClick","puzzleData","courseStream","studentId","imageHue","imageUrl","externalAssigned","title","puzzleId","nodeId","student_elo_rating","current_elo_rating","showPuzzleInfo","setShowPuzzleInfo","useState","assignLottieRef","useRef","puzzleLottieSrc","useMemo","getPuzzleCardLottie","analyticsProps","postPuzzleToAssign","isProcessing","usePostPuzzleToAssign","error","_a","PUZZLE_ASSIGN_ANIMATION","useEffect","_b","handleAssign","useCallback","handleOnPuzzleClick","showPuzzleLottie","onAnimationFinish","event","currentTime","jsx","Styled.PuzzleContainer","Styled.PuzzleAssignedWrapper","PuzzleAssigned","jsxs","FlexView","LottieAnimation","Styled.PuzzleContentWrapper","PuzzleCardContainer$1"],"mappings":";;;;;;;;;AAeA,MAAMA,IAA8B;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,GAEMC,IAAqDC;AAAA,EACzD,CAAC;AAAA,IACC,eAAAC,IAAgB;AAAA,IAChB,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,MACI;AACE,UAAA;AAAA,MACJ,WAAWC;AAAA,MACX,WAAWC;AAAA,MACX,UAAUC;AAAA,MACV,OAAAC;AAAA,MACA,IAAIC;AAAA,MACJ,SAASC;AAAA,MACT,oBAAAC;AAAA,MACA,oBAAAC;AAAA,IACE,IAAAV,GAEE,CAACW,GAAgBC,CAAiB,IAAIC,EAASR,CAAgB,GAE/DS,IAAkBC,EAAmC,IAAI,GACzDC,IAAkBC,EAAQ,MAAMC,EAAoBf,CAAQ,GAAG,CAACA,CAAQ,CAAC,GAEzEgB,IAAiBF;AAAA,MACrB,OAAO;AAAA,QACL,SAAST;AAAA,QACT,WAAW;AAAA,QACX,oBAAAC;AAAA,QACA,oBAAAC;AAAA,MAAA;AAAA,MAEF,CAACF,GAAQC,GAAoBC,CAAkB;AAAA,IAAA,GAG3C,EAAE,MAAMU,GAAoB,cAAAC,EAAA,IAAiBC,EAAsB;AAAA,MACvE,YAAY,CAACC,MAAyB;;AACpC,QAAIA,IAEFX,EAAkB,EAAI,MAEtBY,IAAAV,EAAgB,YAAhB,QAAAU,EAAyB,aAAaC,EAAwB,iBAAiB,KAE/Eb,EAAkB,EAAK;AAAA,MAE3B;AAAA,IAAA,CACD;AAED,IAAAc,EAAU,MAAM;;AACd,MAAKrB,MACCR,KACF2B,IAAAV,EAAgB,YAAhB,QAAAU,EAAyB,aAAaC,EAAwB,QAAQ,QAEtEE,IAAAb,EAAgB,YAAhB,QAAAa,EAAyB,QACzBf,EAAkB,EAAK;AAAA,IAE3B,GACC,CAACP,GAAkBR,CAAa,CAAC;AAE9B,UAAA+B,IAAeC,EAAY,MAAM;AACrC,MAAIxB,KAEJe;AAAA,QACE;AAAA,UACE,WAAWb;AAAA,QACb;AAAA,QACA;AAAA,UACE,WAAAL;AAAA,UACA,cAAAD;AAAA,QACF;AAAA,MAAA;AAAA,IACF,GACC,CAACA,GAAcI,GAAkBe,GAAoBb,GAAUL,CAAS,CAAC,GAEtE4B,IAAsBD,EAAY,MAAM;AAC9B,MAAA9B;IAAA,GACb,CAACA,CAAa,CAAC,GAEZgC,IAAmBF,EAAY,MAAM;;AACzC,OAAAL,IAAAV,EAAgB,YAAhB,QAAAU,EAAyB,aAAaC,EAAwB,QAAQ;AAAA,IACxE,GAAG,CAAE,CAAA,GAECO,IAAoBf;AAAA,MACxB,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU,CAACgB,MAA6B;AAChC,gBAAA,EAAE,aAAAC,EAAgB,IAAAD;AAExB,UAAIC,MAAgB,MAClBtB,EAAkB,EAAI,GAGpBsB,MAAgB,QACFpC,KAAA,QAAAA;AAAA,QAEpB;AAAA,MAAA;AAAA,MAEF,CAACA,CAAa;AAAA,IAAA;AAGhB,WAAKD,IAIDQ,IAEC,gBAAA8B,EAAAC,GAAA,EAAuB,iBAAgB,UACtC,UAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,WAAWlC;AAAA,QACX,aAAa,GAAGA,CAAQ;AAAA,QACxB,SAAS;AAAA,QAET,UAAA,gBAAAgC;AAAA,UAACG;AAAAA,UAAA;AAAA,YACC,UAAAlC;AAAA,YACA,qBAAA0B;AAAA,YACA,OAAAxB;AAAA,YACA,UAAQ;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAEJ,EAAA,CAAA,sBAKD8B,GAAA,EACC,UAAC,gBAAAG,EAAAC,GAAA,EAAS,UAAU,IAClB,UAAA;AAAA,MAAA,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,KAAKzB;AAAA,UACL,KAAKF;AAAA,UACL,UAAUpB;AAAA,UACV,UAAUqC;AAAA,UACV,eAAeC;AAAA,UACf,oBAAkB;AAAA,QAAA;AAAA,MACpB;AAAA,wBAECU,GAAA,EAA4B,UAAU/B,GAAgB,WAAU,YAC/D,UAAA,gBAAAwB;AAAA,QAACG;AAAAA,QAAA;AAAA,UACC,UAAAlC;AAAA,UACA,OAAAE;AAAA,UACA,qBAAAwB;AAAA,UACA,cAAAF;AAAA,UACA,WAAWP;AAAA,UACX,gBAAAF;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA,EACF,CAAA,EACF,CAAA,IA7CO;AAAA,EA+CX;AACF,GAEAwB,KAAehD;"}

package/dist/features/puzzles/puzzle-dashboard/puzzle-dashboard-styled.js

@@ -0,0 +1,37 @@
+import o from "styled-components";
+import { ILLUSTRATIONS as t } from "../../../assets/illustrations/illustrations.js";
+import e from "../../../assets/line-icons/icons/puzzle2.js";
+import p from "../../ui/layout/flex-view.js";
+const s = o(p)``, l = o(p)`
+  background-image: url(${t.PUZZLE_DASHBOARD_BANNER});
+  background-size: cover;
+`, d = o(p)`
+  position: absolute;
+  top: 16px;
+  left: 16px;
+`, m = o(p)`
+  position: sticky;
+  top: 16px;
+  z-index: 5;
+`, u = o.div`
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(5, 1fr);
+  column-gap: 24px;
+  row-gap: 40px;
+  padding: 0 37px;
+`, x = o(e)`
+  path {
+    stroke: ${({ theme: r }) => r.colors.BLACK_T_60};
+    opacity: 0.38;
+  }
+`;
+export {
+  d as BackIconContainer,
+  m as BackIconWrapper,
+  l as BannerWrapper,
+  u as ContentWrapper,
+  s as PuzzleDashboardWrapper,
+  x as StyledPuzzleIcon
+};
+//# sourceMappingURL=puzzle-dashboard-styled.js.map

package/dist/features/puzzles/puzzle-dashboard/puzzle-dashboard-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-dashboard-styled.js","sources":["../../../../src/features/puzzles/puzzle-dashboard/puzzle-dashboard-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport PuzzleIcon2 from '../../../assets/line-icons/icons/puzzle2';\nimport FlexView from '../../ui/layout/flex-view';\n\nconst PuzzleDashboardWrapper = styled(FlexView)``;\n\nconst BannerWrapper = styled(FlexView)`\n  background-image: url(${ILLUSTRATIONS.PUZZLE_DASHBOARD_BANNER});\n  background-size: cover;\n`;\n\nconst BackIconContainer = styled(FlexView)`\n  position: absolute;\n  top: 16px;\n  left: 16px;\n`;\n\nconst BackIconWrapper = styled(FlexView)`\n  position: sticky;\n  top: 16px;\n  z-index: 5;\n`;\n\nconst ContentWrapper = styled.div`\n  display: grid;\n  width: 100%;\n  grid-template-columns: repeat(5, 1fr);\n  column-gap: 24px;\n  row-gap: 40px;\n  padding: 0 37px;\n`;\n\nconst StyledPuzzleIcon = styled(PuzzleIcon2)`\n  path {\n    stroke: ${({ theme }) => theme.colors.BLACK_T_60};\n    opacity: 0.38;\n  }\n`;\n\nexport {\n  PuzzleDashboardWrapper,\n  BannerWrapper,\n  BackIconContainer,\n  BackIconWrapper,\n  ContentWrapper,\n  StyledPuzzleIcon,\n};\n"],"names":["PuzzleDashboardWrapper","styled","FlexView","BannerWrapper","ILLUSTRATIONS","BackIconContainer","BackIconWrapper","ContentWrapper","StyledPuzzleIcon","PuzzleIcon2","theme"],"mappings":";;;;AAMM,MAAAA,IAAyBC,EAAOC,CAAQ,KAExCC,IAAgBF,EAAOC,CAAQ;AAAA,0BACXE,EAAc,uBAAuB;AAAA;AAAA,GAIzDC,IAAoBJ,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMnCI,IAAkBL,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMjCK,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASxBO,IAAmBP,EAAOQ,CAAW;AAAA;AAAA,cAE7B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;"}

package/dist/features/puzzles/puzzle-dashboard/puzzle-dashboard.js

@@ -0,0 +1,110 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useCallback as w, useEffect as P } from "react";
+import _ from "../../../assets/line-icons/icons/back2.js";
+import x from "../../ui/buttons/button/button.js";
+import y from "../../ui/buttons/icon-button/icon-button.js";
+import t from "../../ui/layout/flex-view.js";
+import A from "../../ui/loader/app-loader/app-loader.js";
+import i from "../../ui/text/text.js";
+import { useGetPuzzles as I } from "../api/puzzle-dashboard.js";
+import X from "../comps/puzzle-card.js";
+import { PuzzleDashboardWrapper as j, BannerWrapper as B, BackIconContainer as k, BackIconWrapper as T, StyledPuzzleIcon as v, ContentWrapper as S } from "./puzzle-dashboard-styled.js";
+const W = ({ studentId: o, onBackCLick: s, onCardClick: d }) => {
+  const {
+    get: c,
+    data: r,
+    isProcessing: h,
+    isProcessingFailed: m
+  } = I(), l = (r == null ? void 0 : r.length) || 0, a = w(() => {
+    c(o, void 0, {
+      courseStream: "MATH"
+    });
+  }, [c, o]);
+  return P(() => {
+    a();
+  }, [a]), h ? /* @__PURE__ */ e(A, { height: "100vh" }) : m ? /* @__PURE__ */ n(t, { $flexGapX: 1.5, $height: "100vh", $justifyContent: "center", $alignItems: "center", children: [
+    /* @__PURE__ */ e(i, { $renderAs: "h6", children: "Oops! Something went wrong. Please try again later." }),
+    /* @__PURE__ */ e(
+      x,
+      {
+        widthX: 14,
+        size: "small",
+        shape: "square",
+        renderAs: "primary",
+        label: "Try again",
+        onClick: a
+      }
+    )
+  ] }) : /* @__PURE__ */ n(
+    j,
+    {
+      $alignItems: "center",
+      $flexGapX: l === 0 ? 10 : 2.5,
+      $position: "relative",
+      children: [
+        /* @__PURE__ */ n(B, { $widthX: 50, $heightX: 10.5, $justifyContent: "center", children: [
+          /* @__PURE__ */ n(i, { $renderAs: "ah3-bold", $alignSelf: "center", children: [
+            l,
+            " Puzzles Solved"
+          ] }),
+          s && /* @__PURE__ */ e(k, { $height: "100%", children: /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(
+            y,
+            {
+              Icon: _,
+              size: "xsmall",
+              renderAs: "secondary",
+              analyticsLabel: "puzzle_back",
+              onClick: s
+            }
+          ) }) })
+        ] }),
+        l === 0 ? /* @__PURE__ */ n(t, { $flexGapX: 1, $justifyContent: "center", children: [
+          /* @__PURE__ */ e(
+            t,
+            {
+              $flexDirection: "row",
+              $alignItems: "center",
+              $justifyContent: "center",
+              $width: "100%",
+              children: /* @__PURE__ */ e(t, { $widthX: 3.5, $heightX: 3.5, $background: "WHITE_4", children: /* @__PURE__ */ e(v, { width: 56, height: 56 }) })
+            }
+          ),
+          /* @__PURE__ */ n(t, { $justifyContent: "center", children: [
+            /* @__PURE__ */ e(i, { $renderAs: "ab2-bold", $color: "BLACK_T_60", $align: "center", children: "No puzzle assigned yet!" }),
+            /* @__PURE__ */ e(i, { $renderAs: "ab2-bold", $color: "BLACK_T_60", children: "Hang tight — your tutor will share one soon! 🎉🧩" })
+          ] })
+        ] }) : /* @__PURE__ */ e(S, { children: r == null ? void 0 : r.map((u) => {
+          const {
+            id: p,
+            image_hue: $,
+            image_url: g,
+            title: f,
+            user_node_id: z,
+            rewards: b,
+            node_id: C
+          } = u;
+          return /* @__PURE__ */ e(
+            X,
+            {
+              imageHue: $,
+              imageUrl: g,
+              title: f,
+              width: 126,
+              height: 152,
+              onCardClick: d,
+              userNodeId: z,
+              rewards: b,
+              nodeId: C,
+              studentId: o
+            },
+            p
+          );
+        }) })
+      ]
+    }
+  );
+}, U = W;
+export {
+  U as default
+};
+//# sourceMappingURL=puzzle-dashboard.js.map

package/dist/features/puzzles/puzzle-dashboard/puzzle-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-dashboard.js","sources":["../../../../src/features/puzzles/puzzle-dashboard/puzzle-dashboard.tsx"],"sourcesContent":["import type { IPuzzleDashboardProps } from './puzzle-dashboard-types';\n\nimport { useCallback, useEffect, type FC } from 'react';\n\nimport Back2Icon from '../../../assets/line-icons/icons/back2';\nimport Button from '../../ui/buttons/button/button';\nimport IconButton from '../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../ui/layout/flex-view';\nimport AppLoader from '../../ui/loader/app-loader/app-loader';\nimport Text from '../../ui/text/text';\nimport { useGetPuzzles } from '../api/puzzle-dashboard';\nimport PuzzleCard from '../comps/puzzle-card';\nimport * as Styled from './puzzle-dashboard-styled';\n\nconst PuzzleDashboard: FC<IPuzzleDashboardProps> = ({ studentId, onBackCLick, onCardClick }) => {\n  const {\n    get: getPuzzles,\n    data: puzzleHistoryData,\n    isProcessing,\n    isProcessingFailed,\n  } = useGetPuzzles();\n\n  const puzzleCount = puzzleHistoryData?.length || 0;\n\n  const fetchPuzzles = useCallback(() => {\n    getPuzzles(studentId, undefined, {\n      courseStream: 'MATH',\n    });\n  }, [getPuzzles, studentId]);\n\n  useEffect(() => {\n    fetchPuzzles();\n  }, [fetchPuzzles]);\n\n  if (isProcessing) {\n    return <AppLoader height=\"100vh\" />;\n  }\n\n  if (isProcessingFailed) {\n    return (\n      <FlexView $flexGapX={1.5} $height=\"100vh\" $justifyContent=\"center\" $alignItems=\"center\">\n        <Text $renderAs=\"h6\">Oops! Something went wrong. Please try again later.</Text>\n        <Button\n          widthX={14}\n          size=\"small\"\n          shape=\"square\"\n          renderAs=\"primary\"\n          label=\"Try again\"\n          onClick={fetchPuzzles}\n        />\n      </FlexView>\n    );\n  }\n\n  return (\n    <Styled.PuzzleDashboardWrapper\n      $alignItems=\"center\"\n      $flexGapX={puzzleCount === 0 ? 10 : 2.5}\n      $position=\"relative\"\n    >\n      <Styled.BannerWrapper $widthX={50} $heightX={10.5} $justifyContent=\"center\">\n        <Text $renderAs=\"ah3-bold\" $alignSelf=\"center\">\n          {puzzleCount} Puzzles Solved\n        </Text>\n\n        {onBackCLick && (\n          <Styled.BackIconContainer $height=\"100%\">\n            <Styled.BackIconWrapper>\n              <IconButton\n                Icon={Back2Icon}\n                size=\"xsmall\"\n                renderAs=\"secondary\"\n                analyticsLabel=\"puzzle_back\"\n                onClick={onBackCLick}\n              />\n            </Styled.BackIconWrapper>\n          </Styled.BackIconContainer>\n        )}\n      </Styled.BannerWrapper>\n\n      {puzzleCount === 0 ? (\n        <FlexView $flexGapX={1} $justifyContent=\"center\">\n          <FlexView\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n            $width=\"100%\"\n          >\n            <FlexView $widthX={3.5} $heightX={3.5} $background=\"WHITE_4\">\n              <Styled.StyledPuzzleIcon width={56} height={56} />\n            </FlexView>\n          </FlexView>\n\n          <FlexView $justifyContent=\"center\">\n            <Text $renderAs=\"ab2-bold\" $color=\"BLACK_T_60\" $align=\"center\">\n              No puzzle assigned yet!\n            </Text>\n            <Text $renderAs=\"ab2-bold\" $color=\"BLACK_T_60\">\n              Hang tight — your tutor will share one soon! 🎉🧩\n            </Text>\n          </FlexView>\n        </FlexView>\n      ) : (\n        <Styled.ContentWrapper>\n          {puzzleHistoryData?.map(item => {\n            const {\n              id,\n              image_hue: imageHue,\n              image_url: imageUrl,\n              title,\n              user_node_id: userNodeId,\n              rewards,\n              node_id: nodeId,\n            } = item;\n\n            return (\n              <PuzzleCard\n                key={id}\n                imageHue={imageHue}\n                imageUrl={imageUrl}\n                title={title}\n                width={126}\n                height={152}\n                onCardClick={onCardClick}\n                userNodeId={userNodeId}\n                rewards={rewards}\n                nodeId={nodeId}\n                studentId={studentId}\n              />\n            );\n          })}\n        </Styled.ContentWrapper>\n      )}\n    </Styled.PuzzleDashboardWrapper>\n  );\n};\n\nexport default PuzzleDashboard;\n"],"names":["PuzzleDashboard","studentId","onBackCLick","onCardClick","getPuzzles","puzzleHistoryData","isProcessing","isProcessingFailed","useGetPuzzles","puzzleCount","fetchPuzzles","useCallback","useEffect","jsx","AppLoader","jsxs","FlexView","Text","Button","Styled.PuzzleDashboardWrapper","Styled.BannerWrapper","Styled.BackIconContainer","Styled.BackIconWrapper","IconButton","Back2Icon","Styled.StyledPuzzleIcon","Styled.ContentWrapper","item","id","imageHue","imageUrl","title","userNodeId","rewards","nodeId","PuzzleCard","PuzzleDashboard$1"],"mappings":"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"}

package/dist/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.js

@@ -46,7 +46,7 @@ const v = {
       _,
       {
         $width: "80%",
-        $renderAs: "ah3",
+        $renderAs: "ah4",
         $color: "WHITE_1",
         $align: "center",
         $show: h,

package/dist/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-feedback-celebration.js","sources":["../../../../src/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.tsx"],"sourcesContent":["import type { IPuzzleFeedbackCelebration } from './puzzle-feedback-celebration-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport IconButton from '../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport useModalActions from '../../ui/modals/use-modal-actions';\nimport useModalParams from '../../ui/modals/use-modal-params';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-feedback-celebration-styled';\n\nconst puzzleStickerLottieSettings = {\n  autoplay: true,\n  loop: true,\n  renderer: 'canvas',\n};\n\nconst PuzzleFeedbackCelebration: FC = () => {\n  const { closeModal } = useModalActions();\n  const { feedbackComments, rewards, onCloseModal } = useModalParams<IPuzzleFeedbackCelebration>();\n\n  const [showHeader, setShowHeader] = useState(false);\n  const [showLottie, setShowLottie] = useState(false);\n  const [showText, setShowText] = useState(false);\n  const [showButton, setShowButton] = useState(false);\n\n  const { sticker } = rewards[0] || {};\n\n  const stickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n  const handleCloseModal = useCallback(() => {\n    onCloseModal?.();\n    closeModal();\n  }, [closeModal, onCloseModal]);\n\n  useEffect(() => {\n    // Sequence: Header -> Lottie -> Text -> Button\n    const headerTimer = setTimeout(() => {\n      setShowHeader(true);\n    }, 100);\n\n    const lottieTimer = setTimeout(() => {\n      setShowLottie(true);\n    }, 400);\n\n    const textTimer = setTimeout(() => {\n      setShowText(true);\n    }, 1000);\n\n    const buttonTimer = setTimeout(() => {\n      setShowButton(true);\n    }, 1500);\n\n    // Close modal after 4000ms\n    const closeModalTimer = setTimeout(() => {\n      handleCloseModal();\n    }, 5500);\n\n    return () => {\n      clearTimeout(headerTimer);\n      clearTimeout(lottieTimer);\n      clearTimeout(textTimer);\n      clearTimeout(buttonTimer);\n      clearTimeout(closeModalTimer);\n    };\n  }, [handleCloseModal]);\n\n  return (\n    <FlexView $justifyContent=\"center\" $alignItems=\"center\" $width=\"100%\">\n      <Styled.PuzzleFeedbackModalWrapper $flexGapX={2.5} $widthX={33.5} $alignItems=\"center\">\n        <Styled.ShimmerText $renderAs=\"ac2-black\" $show={showHeader}>\n          Puzzle Reviewed\n        </Styled.ShimmerText>\n\n        <Styled.LottieContainer $widthX={12.5} $heightX={12.5} $show={showLottie}>\n          {stickerLottie && (\n            <LottieAnimation\n              width={200}\n              height={200}\n              src={stickerLottie}\n              settings={puzzleStickerLottieSettings}\n            />\n          )}\n        </Styled.LottieContainer>\n\n        <Styled.FeedbackText\n          $width=\"80%\"\n          $renderAs=\"ah3\"\n          $color=\"WHITE_1\"\n          $align=\"center\"\n          $show={showText}\n        >\n          {feedbackComments}\n        </Styled.FeedbackText>\n\n        <Styled.CloseButtonWrapper $show={showButton}>\n          <IconButton\n            renderAs=\"secondary\"\n            Icon={CrossIcon}\n            size=\"small\"\n            analyticsLabel=\"close_puzzle_feedback_modal\"\n            onClick={handleCloseModal}\n          />\n        </Styled.CloseButtonWrapper>\n      </Styled.PuzzleFeedbackModalWrapper>\n    </FlexView>\n  );\n};\n\nexport default PuzzleFeedbackCelebration;\n"],"names":["puzzleStickerLottieSettings","PuzzleFeedbackCelebration","closeModal","useModalActions","feedbackComments","rewards","onCloseModal","useModalParams","showHeader","setShowHeader","useState","showLottie","setShowLottie","showText","setShowText","showButton","setShowButton","sticker","stickerLottie","getPuzzleStickerLottie","handleCloseModal","useCallback","useEffect","headerTimer","lottieTimer","textTimer","buttonTimer","closeModalTimer","FlexView","jsxs","Styled.PuzzleFeedbackModalWrapper","jsx","Styled.ShimmerText","Styled.LottieContainer","LottieAnimation","Styled.FeedbackText","Styled.CloseButtonWrapper","IconButton","CrossIcon","PuzzleFeedbackCelebration$1"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAA8B;AAAA,EAClC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAgC,MAAM;AACpC,QAAA,EAAE,YAAAC,MAAeC,KACjB,EAAE,kBAAAC,GAAkB,SAAAC,GAAS,cAAAC,MAAiBC,EAA2C,GAEzF,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAUC,CAAW,IAAIJ,EAAS,EAAK,GACxC,CAACK,GAAYC,CAAa,IAAIN,EAAS,EAAK,GAE5C,EAAE,SAAAO,EAAQ,IAAIZ,EAAQ,CAAC,KAAK,CAAA,GAE5Ba,IAAgBD,IAAUE,EAAuBF,CAAO,IAAI,QAE5DG,IAAmBC,EAAY,MAAM;AAC1B,IAAAf,KAAA,QAAAA,KACJJ;EAAA,GACV,CAACA,GAAYI,CAAY,CAAC;AAE7B,SAAAgB,EAAU,MAAM;AAER,UAAAC,IAAc,WAAW,MAAM;AACnC,MAAAd,EAAc,EAAI;AAAA,OACjB,GAAG,GAEAe,IAAc,WAAW,MAAM;AACnC,MAAAZ,EAAc,EAAI;AAAA,OACjB,GAAG,GAEAa,IAAY,WAAW,MAAM;AACjC,MAAAX,EAAY,EAAI;AAAA,OACf,GAAI,GAEDY,IAAc,WAAW,MAAM;AACnC,MAAAV,EAAc,EAAI;AAAA,OACjB,IAAI,GAGDW,IAAkB,WAAW,MAAM;AACtB,MAAAP;OAChB,IAAI;AAEP,WAAO,MAAM;AACX,mBAAaG,CAAW,GACxB,aAAaC,CAAW,GACxB,aAAaC,CAAS,GACtB,aAAaC,CAAW,GACxB,aAAaC,CAAe;AAAA,IAAA;AAAA,EAC9B,GACC,CAACP,CAAgB,CAAC,qBAGlBQ,GAAS,EAAA,iBAAgB,UAAS,aAAY,UAAS,QAAO,QAC7D,UAAC,gBAAAC,EAAAC,GAAA,EAAkC,WAAW,KAAK,SAAS,MAAM,aAAY,UAC5E,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAmB,WAAU,aAAY,OAAOxB,GAAY,UAE7D,mBAAA;AAAA,IAEA,gBAAAuB,EAACE,GAAA,EAAuB,SAAS,MAAM,UAAU,MAAM,OAAOtB,GAC3D,UACCO,KAAA,gBAAAa;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,KAAKhB;AAAA,QACL,UAAUlB;AAAA,MAAA;AAAA,IAAA,GAGhB;AAAA,IAEA,gBAAA+B;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAO;AAAA,QACP,OAAOtB;AAAA,QAEN,UAAAT;AAAA,MAAA;AAAA,IACH;AAAA,IAEC,gBAAA2B,EAAAK,GAAA,EAA0B,OAAOrB,GAChC,UAAA,gBAAAgB;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAMC;AAAA,QACN,MAAK;AAAA,QACL,gBAAe;AAAA,QACf,SAASlB;AAAA,MAAA;AAAA,IAAA,GAEb;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEAmB,IAAetC;"}
+{"version":3,"file":"puzzle-feedback-celebration.js","sources":["../../../../src/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.tsx"],"sourcesContent":["import type { IPuzzleFeedbackCelebration } from './puzzle-feedback-celebration-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport IconButton from '../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport useModalActions from '../../ui/modals/use-modal-actions';\nimport useModalParams from '../../ui/modals/use-modal-params';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-feedback-celebration-styled';\n\nconst puzzleStickerLottieSettings = {\n  autoplay: true,\n  loop: true,\n  renderer: 'canvas',\n};\n\nconst PuzzleFeedbackCelebration: FC = () => {\n  const { closeModal } = useModalActions();\n  const { feedbackComments, rewards, onCloseModal } = useModalParams<IPuzzleFeedbackCelebration>();\n\n  const [showHeader, setShowHeader] = useState(false);\n  const [showLottie, setShowLottie] = useState(false);\n  const [showText, setShowText] = useState(false);\n  const [showButton, setShowButton] = useState(false);\n\n  const { sticker } = rewards[0] || {};\n\n  const stickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n  const handleCloseModal = useCallback(() => {\n    onCloseModal?.();\n    closeModal();\n  }, [closeModal, onCloseModal]);\n\n  useEffect(() => {\n    // Sequence: Header -> Lottie -> Text -> Button\n    const headerTimer = setTimeout(() => {\n      setShowHeader(true);\n    }, 100);\n\n    const lottieTimer = setTimeout(() => {\n      setShowLottie(true);\n    }, 400);\n\n    const textTimer = setTimeout(() => {\n      setShowText(true);\n    }, 1000);\n\n    const buttonTimer = setTimeout(() => {\n      setShowButton(true);\n    }, 1500);\n\n    // Close modal after 4000ms\n    const closeModalTimer = setTimeout(() => {\n      handleCloseModal();\n    }, 5500);\n\n    return () => {\n      clearTimeout(headerTimer);\n      clearTimeout(lottieTimer);\n      clearTimeout(textTimer);\n      clearTimeout(buttonTimer);\n      clearTimeout(closeModalTimer);\n    };\n  }, [handleCloseModal]);\n\n  return (\n    <FlexView $justifyContent=\"center\" $alignItems=\"center\" $width=\"100%\">\n      <Styled.PuzzleFeedbackModalWrapper $flexGapX={2.5} $widthX={33.5} $alignItems=\"center\">\n        <Styled.ShimmerText $renderAs=\"ac2-black\" $show={showHeader}>\n          Puzzle Reviewed\n        </Styled.ShimmerText>\n\n        <Styled.LottieContainer $widthX={12.5} $heightX={12.5} $show={showLottie}>\n          {stickerLottie && (\n            <LottieAnimation\n              width={200}\n              height={200}\n              src={stickerLottie}\n              settings={puzzleStickerLottieSettings}\n            />\n          )}\n        </Styled.LottieContainer>\n\n        <Styled.FeedbackText\n          $width=\"80%\"\n          $renderAs=\"ah4\"\n          $color=\"WHITE_1\"\n          $align=\"center\"\n          $show={showText}\n        >\n          {feedbackComments}\n        </Styled.FeedbackText>\n\n        <Styled.CloseButtonWrapper $show={showButton}>\n          <IconButton\n            renderAs=\"secondary\"\n            Icon={CrossIcon}\n            size=\"small\"\n            analyticsLabel=\"close_puzzle_feedback_modal\"\n            onClick={handleCloseModal}\n          />\n        </Styled.CloseButtonWrapper>\n      </Styled.PuzzleFeedbackModalWrapper>\n    </FlexView>\n  );\n};\n\nexport default PuzzleFeedbackCelebration;\n"],"names":["puzzleStickerLottieSettings","PuzzleFeedbackCelebration","closeModal","useModalActions","feedbackComments","rewards","onCloseModal","useModalParams","showHeader","setShowHeader","useState","showLottie","setShowLottie","showText","setShowText","showButton","setShowButton","sticker","stickerLottie","getPuzzleStickerLottie","handleCloseModal","useCallback","useEffect","headerTimer","lottieTimer","textTimer","buttonTimer","closeModalTimer","FlexView","jsxs","Styled.PuzzleFeedbackModalWrapper","jsx","Styled.ShimmerText","Styled.LottieContainer","LottieAnimation","Styled.FeedbackText","Styled.CloseButtonWrapper","IconButton","CrossIcon","PuzzleFeedbackCelebration$1"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAA8B;AAAA,EAClC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAgC,MAAM;AACpC,QAAA,EAAE,YAAAC,MAAeC,KACjB,EAAE,kBAAAC,GAAkB,SAAAC,GAAS,cAAAC,MAAiBC,EAA2C,GAEzF,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAUC,CAAW,IAAIJ,EAAS,EAAK,GACxC,CAACK,GAAYC,CAAa,IAAIN,EAAS,EAAK,GAE5C,EAAE,SAAAO,EAAQ,IAAIZ,EAAQ,CAAC,KAAK,CAAA,GAE5Ba,IAAgBD,IAAUE,EAAuBF,CAAO,IAAI,QAE5DG,IAAmBC,EAAY,MAAM;AAC1B,IAAAf,KAAA,QAAAA,KACJJ;EAAA,GACV,CAACA,GAAYI,CAAY,CAAC;AAE7B,SAAAgB,EAAU,MAAM;AAER,UAAAC,IAAc,WAAW,MAAM;AACnC,MAAAd,EAAc,EAAI;AAAA,OACjB,GAAG,GAEAe,IAAc,WAAW,MAAM;AACnC,MAAAZ,EAAc,EAAI;AAAA,OACjB,GAAG,GAEAa,IAAY,WAAW,MAAM;AACjC,MAAAX,EAAY,EAAI;AAAA,OACf,GAAI,GAEDY,IAAc,WAAW,MAAM;AACnC,MAAAV,EAAc,EAAI;AAAA,OACjB,IAAI,GAGDW,IAAkB,WAAW,MAAM;AACtB,MAAAP;OAChB,IAAI;AAEP,WAAO,MAAM;AACX,mBAAaG,CAAW,GACxB,aAAaC,CAAW,GACxB,aAAaC,CAAS,GACtB,aAAaC,CAAW,GACxB,aAAaC,CAAe;AAAA,IAAA;AAAA,EAC9B,GACC,CAACP,CAAgB,CAAC,qBAGlBQ,GAAS,EAAA,iBAAgB,UAAS,aAAY,UAAS,QAAO,QAC7D,UAAC,gBAAAC,EAAAC,GAAA,EAAkC,WAAW,KAAK,SAAS,MAAM,aAAY,UAC5E,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAmB,WAAU,aAAY,OAAOxB,GAAY,UAE7D,mBAAA;AAAA,IAEA,gBAAAuB,EAACE,GAAA,EAAuB,SAAS,MAAM,UAAU,MAAM,OAAOtB,GAC3D,UACCO,KAAA,gBAAAa;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,KAAKhB;AAAA,QACL,UAAUlB;AAAA,MAAA;AAAA,IAAA,GAGhB;AAAA,IAEA,gBAAA+B;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAO;AAAA,QACP,OAAOtB;AAAA,QAEN,UAAAT;AAAA,MAAA;AAAA,IACH;AAAA,IAEC,gBAAA2B,EAAAK,GAAA,EAA0B,OAAOrB,GAChC,UAAA,gBAAAgB;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAMC;AAAA,QACN,MAAK;AAAA,QACL,gBAAe;AAAA,QACf,SAASlB;AAAA,MAAA;AAAA,IAAA,GAEb;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEAmB,IAAetC;"}

package/dist/features/puzzles/utils/puzzle-pattern.js

@@ -1,25 +1,40 @@
-import { ILLUSTRATIONS as P } from "../../../assets/illustrations/illustrations.js";
+import { ILLUSTRATIONS as r } from "../../../assets/illustrations/illustrations.js";
+import { LOTTIE as E } from "../../../assets/lottie/lottie.js";
 const {
-  PUZZLE_PATTERN_BLUE: r,
-  PUZZLE_PATTERN_GREEN: e,
-  PUZZLE_PATTERN_ORANGE: t,
-  PUZZLE_PATTERN_PURPLE: L,
-  PUZZLE_PATTERN_YELLOW: R
-} = P, N = (E) => {
-  switch (E) {
+  PUZZLE_PATTERN_BLUE: e,
+  PUZZLE_PATTERN_GREEN: t,
+  PUZZLE_PATTERN_ORANGE: P,
+  PUZZLE_PATTERN_PURPLE: T,
+  PUZZLE_PATTERN_YELLOW: Z
+} = r, U = (L) => {
+  switch (L) {
     case "YELLOW":
-      return R;
+      return Z;
     case "GREEN":
+      return t;
+    case "ORANGE":
+      return P;
+    case "PURPLE":
+      return T;
+    default:
       return e;
+  }
+}, O = (L) => {
+  switch (L) {
+    case "YELLOW":
+      return E.PUZZLE_YELLOW_LOTTIE;
+    case "GREEN":
+      return E.PUZZLE_GREEN_LOTTIE;
     case "ORANGE":
-      return t;
+      return E.PUZZLE_ORANGE_LOTTIE;
     case "PURPLE":
-      return L;
+      return E.PUZZLE_PURPLE_LOTTIE;
     default:
-      return r;
+      return E.PUZZLE_BLUE_LOTTIE;
   }
 };
 export {
-  N as getPuzzleCardPattern
+  O as getPuzzleCardLottie,
+  U as getPuzzleCardPattern
 };
 //# sourceMappingURL=puzzle-pattern.js.map

package/dist/features/puzzles/utils/puzzle-pattern.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-pattern.js","sources":["../../../../src/features/puzzles/utils/puzzle-pattern.ts"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\n\nconst {\n  PUZZLE_PATTERN_BLUE,\n  PUZZLE_PATTERN_GREEN,\n  PUZZLE_PATTERN_ORANGE,\n  PUZZLE_PATTERN_PURPLE,\n  PUZZLE_PATTERN_YELLOW,\n} = ILLUSTRATIONS;\n\nconst getPuzzleCardPattern = (imageHue: THueNames) => {\n  switch (imageHue) {\n    case 'YELLOW':\n      return PUZZLE_PATTERN_YELLOW;\n    case 'GREEN':\n      return PUZZLE_PATTERN_GREEN;\n    case 'ORANGE':\n      return PUZZLE_PATTERN_ORANGE;\n    case 'PURPLE':\n      return PUZZLE_PATTERN_PURPLE;\n\n    default:\n      return PUZZLE_PATTERN_BLUE;\n  }\n};\n\nexport { getPuzzleCardPattern };\n"],"names":["PUZZLE_PATTERN_BLUE","PUZZLE_PATTERN_GREEN","PUZZLE_PATTERN_ORANGE","PUZZLE_PATTERN_PURPLE","PUZZLE_PATTERN_YELLOW","ILLUSTRATIONS","getPuzzleCardPattern","imageHue"],"mappings":";AAIA,MAAM;AAAA,EACJ,qBAAAA;AAAA,EACA,sBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AACF,IAAIC,GAEEC,IAAuB,CAACC,MAAwB;AACpD,UAAQA,GAAU;AAAA,IAChB,KAAK;AACI,aAAAH;AAAA,IACT,KAAK;AACI,aAAAH;AAAA,IACT,KAAK;AACI,aAAAC;AAAA,IACT,KAAK;AACI,aAAAC;AAAA,IAET;AACS,aAAAH;AAAA,EACX;AACF;"}
+{"version":3,"file":"puzzle-pattern.js","sources":["../../../../src/features/puzzles/utils/puzzle-pattern.ts"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport { LOTTIE } from '../../../assets/lottie/lottie';\n\nconst {\n  PUZZLE_PATTERN_BLUE,\n  PUZZLE_PATTERN_GREEN,\n  PUZZLE_PATTERN_ORANGE,\n  PUZZLE_PATTERN_PURPLE,\n  PUZZLE_PATTERN_YELLOW,\n} = ILLUSTRATIONS;\n\nconst getPuzzleCardPattern = (imageHue: THueNames) => {\n  switch (imageHue) {\n    case 'YELLOW':\n      return PUZZLE_PATTERN_YELLOW;\n    case 'GREEN':\n      return PUZZLE_PATTERN_GREEN;\n    case 'ORANGE':\n      return PUZZLE_PATTERN_ORANGE;\n    case 'PURPLE':\n      return PUZZLE_PATTERN_PURPLE;\n\n    default:\n      return PUZZLE_PATTERN_BLUE;\n  }\n};\n\nconst getPuzzleCardLottie = (imageHue: THueNames) => {\n  switch (imageHue) {\n    case 'YELLOW':\n      return LOTTIE.PUZZLE_YELLOW_LOTTIE;\n    case 'GREEN':\n      return LOTTIE.PUZZLE_GREEN_LOTTIE;\n    case 'ORANGE':\n      return LOTTIE.PUZZLE_ORANGE_LOTTIE;\n    case 'PURPLE':\n      return LOTTIE.PUZZLE_PURPLE_LOTTIE;\n\n    default:\n      return LOTTIE.PUZZLE_BLUE_LOTTIE;\n  }\n};\n\nexport { getPuzzleCardPattern, getPuzzleCardLottie };\n"],"names":["PUZZLE_PATTERN_BLUE","PUZZLE_PATTERN_GREEN","PUZZLE_PATTERN_ORANGE","PUZZLE_PATTERN_PURPLE","PUZZLE_PATTERN_YELLOW","ILLUSTRATIONS","getPuzzleCardPattern","imageHue","getPuzzleCardLottie","LOTTIE"],"mappings":";;AAKA,MAAM;AAAA,EACJ,qBAAAA;AAAA,EACA,sBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AACF,IAAIC,GAEEC,IAAuB,CAACC,MAAwB;AACpD,UAAQA,GAAU;AAAA,IAChB,KAAK;AACI,aAAAH;AAAA,IACT,KAAK;AACI,aAAAH;AAAA,IACT,KAAK;AACI,aAAAC;AAAA,IACT,KAAK;AACI,aAAAC;AAAA,IAET;AACS,aAAAH;AAAA,EACX;AACF,GAEMQ,IAAsB,CAACD,MAAwB;AACnD,UAAQA,GAAU;AAAA,IAChB,KAAK;AACH,aAAOE,EAAO;AAAA,IAChB,KAAK;AACH,aAAOA,EAAO;AAAA,IAChB,KAAK;AACH,aAAOA,EAAO;AAAA,IAChB,KAAK;AACH,aAAOA,EAAO;AAAA,IAEhB;AACE,aAAOA,EAAO;AAAA,EAClB;AACF;"}