@cuemath/leap 3.2.2 → 3.2.3-pdb-0.2

package/dist/features/puzzles/comps/puzzle-card.js

@@ -1,35 +1,58 @@
-import { jsx as h } from "react/jsx-runtime";
-import { memo as p } from "react";
-import { PuzzleWrapper as s } from "./puzzle-card-styled.js";
-const c = p(
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { memo as f, useCallback as $ } from "react";
+import g from "../../ui/image/image.js";
+import z from "../../ui/layout/flex-view.js";
+import u from "../../ui/lottie-animation/lottie-animation.js";
+import { getPuzzleStickerLottie as d } from "../utils/puzzle-feedback-celebration.js";
+import { PuzzleWrapper as x, Title as L, StickerWrapper as S } from "./puzzle-card-styled.js";
+const j = {
+  autoplay: !1,
+  loop: !1,
+  renderer: "canvas"
+}, W = f(
   ({
-    children: e,
-    imageHue: t,
-    onAnimationEnd: r,
-    animationPhase: o,
-    width: i,
-    widthX: m,
-    height: n,
-    heightX: $,
-    backgroundColor: a
-  }) => /* @__PURE__ */ h(
-    s,
-    {
-      $animationPhase: o,
-      onAnimationEnd: r,
-      $width: i,
-      $height: n,
-      $widthX: m,
-      $heightX: $,
-      $alignItems: "center",
-      $justifyContent: "center",
-      $imageHue: t,
-      $background: a ?? `${t}_6`,
-      children: e
-    }
-  )
+    imageHue: o,
+    imageUrl: m,
+    title: h,
+    height: s = "100%",
+    width: a = "100%",
+    onCardClick: t,
+    userNodeId: i,
+    rewards: r
+  }) => {
+    const { sticker: n } = (r == null ? void 0 : r[0]) || {}, l = n ? d(n) : void 0, p = $(() => {
+      i && (t == null || t(i));
+    }, [t, i]);
+    return /* @__PURE__ */ c(
+      x,
+      {
+        $width: a,
+        $height: s,
+        $justifyContent: "center",
+        $alignItems: "center",
+        $imageHue: o,
+        $background: `${o}_2`,
+        onClick: p,
+        children: [
+          /* @__PURE__ */ c(z, { $justifyContent: "center", $alignItems: "center", $flexGap: 12, children: [
+            /* @__PURE__ */ e(g, { src: m ?? "", width: 68, height: 68, withLoader: !1, alt: "Puzzle" }),
+            /* @__PURE__ */ e(L, { $renderAs: "ab3", $align: "center", $width: "80%", children: h })
+          ] }),
+          l && /* @__PURE__ */ e(S, { $widthX: 2.5, $heightX: 2.5, children: /* @__PURE__ */ e(
+            u,
+            {
+              width: 40,
+              height: 40,
+              src: l,
+              settings: j
+            }
+          ) })
+        ]
+      }
+    );
+  }
 );
 export {
-  c as default
+  W as default
 };
 //# sourceMappingURL=puzzle-card.js.map

package/dist/features/puzzles/comps/puzzle-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-card.js","sources":["../../../../src/features/puzzles/comps/puzzle-card.tsx"],"sourcesContent":["import type { IPuzzleCardProps } from './puzzle-card-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport * as Styled from './puzzle-card-styled';\n\nconst PuzzleCard: FC<IPuzzleCardProps> = memo(\n  ({\n    children,\n    imageHue,\n    onAnimationEnd,\n    animationPhase,\n    width,\n    widthX,\n    height,\n    heightX,\n    backgroundColor,\n  }) => {\n    return (\n      <Styled.PuzzleWrapper\n        $animationPhase={animationPhase}\n        onAnimationEnd={onAnimationEnd}\n        $width={width}\n        $height={height}\n        $widthX={widthX}\n        $heightX={heightX}\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $imageHue={imageHue}\n        $background={backgroundColor ?? `${imageHue}_6`}\n      >\n        {children}\n      </Styled.PuzzleWrapper>\n    );\n  },\n);\n\nexport default PuzzleCard;\n"],"names":["PuzzleCard","memo","children","imageHue","onAnimationEnd","animationPhase","width","widthX","height","heightX","backgroundColor","jsx","Styled.PuzzleWrapper"],"mappings":";;;AAOA,MAAMA,IAAmCC;AAAA,EACvC,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,MAGE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,iBAAiBP;AAAA,MACjB,gBAAAD;AAAA,MACA,QAAQE;AAAA,MACR,SAASE;AAAA,MACT,SAASD;AAAA,MACT,UAAUE;AAAA,MACV,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,WAAWN;AAAA,MACX,aAAaO,KAAmB,GAAGP,CAAQ;AAAA,MAE1C,UAAAD;AAAA,IAAA;AAAA,EAAA;AAIT;"}
+{"version":3,"file":"puzzle-card.js","sources":["../../../../src/features/puzzles/comps/puzzle-card.tsx"],"sourcesContent":["import type { IPuzzleCardProps } from './puzzle-card-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-card-styled';\n\nconst puzzleStickerLottieSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst PuzzleCard: FC<IPuzzleCardProps> = memo(\n  ({\n    imageHue,\n    imageUrl,\n    title,\n    height = '100%',\n    width = '100%',\n    onCardClick,\n    userNodeId,\n    rewards,\n  }) => {\n    const { sticker } = rewards?.[0] || {};\n\n    const puzzleStickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n    const handleCardClick = useCallback(() => {\n      if (userNodeId) {\n        onCardClick?.(userNodeId);\n      }\n    }, [onCardClick, userNodeId]);\n\n    return (\n      <Styled.PuzzleWrapper\n        $width={width}\n        $height={height}\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n        $imageHue={imageHue}\n        $background={`${imageHue}_2`}\n        onClick={handleCardClick}\n      >\n        <FlexView $justifyContent=\"center\" $alignItems=\"center\" $flexGap={12}>\n          <Image src={imageUrl ?? ''} width={68} height={68} withLoader={false} alt=\"Puzzle\" />\n\n          <Styled.Title $renderAs=\"ab3\" $align=\"center\" $width=\"80%\">\n            {title}\n          </Styled.Title>\n        </FlexView>\n\n        {puzzleStickerLottie && (\n          <Styled.StickerWrapper $widthX={2.5} $heightX={2.5}>\n            <LottieAnimation\n              width={40}\n              height={40}\n              src={puzzleStickerLottie}\n              settings={puzzleStickerLottieSettings}\n            />\n          </Styled.StickerWrapper>\n        )}\n      </Styled.PuzzleWrapper>\n    );\n  },\n);\n\nexport default PuzzleCard;\n"],"names":["puzzleStickerLottieSettings","PuzzleCard","memo","imageHue","imageUrl","title","height","width","onCardClick","userNodeId","rewards","sticker","puzzleStickerLottie","getPuzzleStickerLottie","handleCardClick","useCallback","jsxs","Styled.PuzzleWrapper","FlexView","jsx","Image","Styled.Title","Styled.StickerWrapper","LottieAnimation"],"mappings":";;;;;;;AAWA,MAAMA,IAA8B;AAAA,EAClC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAmCC;AAAA,EACvC,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,SAAAC,EAAQ,KAAID,KAAA,gBAAAA,EAAU,OAAM,CAAA,GAE9BE,IAAsBD,IAAUE,EAAuBF,CAAO,IAAI,QAElEG,IAAkBC,EAAY,MAAM;AACxC,MAAIN,MACFD,KAAA,QAAAA,EAAcC;AAAA,IAChB,GACC,CAACD,GAAaC,CAAU,CAAC;AAG1B,WAAA,gBAAAO;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,QAAQV;AAAA,QACR,SAASD;AAAA,QACT,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,WAAWH;AAAA,QACX,aAAa,GAAGA,CAAQ;AAAA,QACxB,SAASW;AAAA,QAET,UAAA;AAAA,UAAA,gBAAAE,EAACE,KAAS,iBAAgB,UAAS,aAAY,UAAS,UAAU,IAChE,UAAA;AAAA,YAAC,gBAAAC,EAAAC,GAAA,EAAM,KAAKhB,KAAY,IAAI,OAAO,IAAI,QAAQ,IAAI,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,YAEnF,gBAAAe,EAACE,GAAA,EAAa,WAAU,OAAM,QAAO,UAAS,QAAO,OAClD,UACHhB,EAAA,CAAA;AAAA,UAAA,GACF;AAAA,UAECO,uBACEU,GAAA,EAAsB,SAAS,KAAK,UAAU,KAC7C,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKX;AAAA,cACL,UAAUZ;AAAA,YAAA;AAAA,UAAA,GAEd;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

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

@@ -0,0 +1,8 @@
+const A = {
+  REVEAL: [0, 50],
+  REVEAL_ASSIGNED: [58, 160]
+};
+export {
+  A as PUZZLE_ASSIGN_ANIMATION
+};
+//# sourceMappingURL=puzzle-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-container.js","sources":["../../../../src/features/puzzles/constants/puzzle-container.ts"],"sourcesContent":["import type { AnimationSegment } from 'lottie-web';\n\nexport const PUZZLE_ASSIGN_ANIMATION = {\n  REVEAL: [0, 50] as AnimationSegment,\n  REVEAL_ASSIGNED: [58, 160] as AnimationSegment,\n};\n"],"names":["PUZZLE_ASSIGN_ANIMATION"],"mappings":"AAEO,MAAMA,IAA0B;AAAA,EACrC,QAAQ,CAAC,GAAG,EAAE;AAAA,EACd,iBAAiB,CAAC,IAAI,GAAG;AAC3B;"}

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

@@ -1,47 +1,77 @@
-import o from "styled-components";
-import t from "../../ui/layout/flex-view.js";
-const p = o(t)`
-  cursor: pointer;
+import e from "styled-components";
+import r from "../../ui/layout/flex-view.js";
+import { getPuzzleCardPattern as s } from "../utils/puzzle-pattern.js";
+const c = e(r)(({ theme: t, $assigned: o }) => {
+  const { colors: i, layout: n } = t;
+  return `
+    cursor: pointer;
+    width: ${n.gutter * 15.9375}px;
+    height: ${n.gutter * 19.125}px;
+    position: relative;
+    left: ${o ? "0" : "50px"};
+    top: ${o ? "0" : "50px"};
 
-  &:hover {
-    outline: 2px solid ${({ theme: e }) => e.colors.BLACK_1};
-  }
-`, l = o(t)(({ theme: e, $disabled: n }) => {
-  const { colors: r } = e;
+    &:hover {
+      outline: 2px solid ${i.BLACK_1};
+    }
+  `;
+}), x = e(r)(({ theme: t, $assigned: o, $assigning: i }) => {
+  const { colors: n, layout: p } = t;
   return `
-    position: absolute;
-    bottom: -48px;
     cursor: pointer;
-    z-index: -1;
+    width: ${p.gutter * 15.9375}px;
+    position: absolute;
+    left: ${o ? "0" : "50px"};
+    bottom: ${o ? "-50px" : "11px"};
     
-    ${n && `
-      background: ${r.WHITE_4};
-      border: 2px solid ${r.WHITE_5};
+    ${(o || i) && `
+      background: ${n.WHITE_4};
+      border: 2px solid ${n.WHITE_5};
       border-top: 0;
       pointer-events: none;
     `}
   `;
-}), c = o(t)`
+});
+e(r)`
   position: relative;
   top: -8px;
   height: 100%;
   width: 100%;
-`, u = o(t)`
+`;
+e(r)`
   border-radius: 50%;
-`, a = o(t)`
+`;
+const d = e(r)`
   position: relative;
   transition: height 0.3s ease-out;
-`, d = o(t)`
+`, g = e(r)`
   position: absolute;
   top: 0;
   right: 0;
+`, h = e(r)(({ $visible: t, theme: o }) => {
+  const { layout: i } = o;
+  return `
+    width: ${i.gutter * 22.1875}px;
+    height: ${i.gutter * 26}px;
+    left: 0;
+    opacity: ${t ? 1 : 0};
+    pointer-events: ${t ? "auto" : "none"};
+    transition: opacity 0.2s ease-out;
+  `;
+}), $ = e(r)`
+  position: relative;
+
+  box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: o }) => t.colors[`${o}_4`]};
+
+  background-image: ${({ $imageHue: t }) => `url(${s(t)})`};
+  background-size: cover;
 `;
 export {
-  d as AssignedTag,
-  u as CheckMarkIcon,
-  l as PuzzleButton,
-  a as PuzzleContainer,
-  p as PuzzleContent,
-  c as PuzzleText
+  g as AssignedTag,
+  $ as PuzzleAssignedWrapper,
+  x as PuzzleButton,
+  d as PuzzleContainer,
+  c as PuzzleContent,
+  h as PuzzleContentWrapper
 };
 //# sourceMappingURL=puzzle-container-styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"puzzle-container-styled.js","sources":["../../../../src/features/puzzles/puzzle-container/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      pointer-events: none;\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;AAAA,KAIpC;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;"}
+{"version":3,"file":"puzzle-container-styled.js","sources":["../../../../src/features/puzzles/puzzle-container/puzzle-container-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\ninterface IPuzzleProps {\n  $assigned?: boolean;\n  $assigning?: boolean;\n}\n\nconst PuzzleContent = styled(FlexView)<IPuzzleProps>(({ theme, $assigned }) => {\n  const { colors, layout } = theme;\n\n  return `\n    cursor: pointer;\n    width: ${layout.gutter * 15.9375}px;\n    height: ${layout.gutter * 19.125}px;\n    position: relative;\n    left: ${$assigned ? '0' : '50px'};\n    top: ${$assigned ? '0' : '50px'};\n\n    &:hover {\n      outline: 2px solid ${colors.BLACK_1};\n    }\n  `;\n});\n\nconst PuzzleButton = styled(FlexView)<IPuzzleProps>(({ theme, $assigned, $assigning }) => {\n  const { colors, layout } = theme;\n\n  return `\n    cursor: pointer;\n    width: ${layout.gutter * 15.9375}px;\n    position: absolute;\n    left: ${$assigned ? '0' : '50px'};\n    bottom: ${$assigned ? '-50px' : '11px'};\n    \n    ${\n      ($assigned || $assigning) &&\n      `\n      background: ${colors.WHITE_4};\n      border: 2px solid ${colors.WHITE_5};\n      border-top: 0;\n      pointer-events: none;\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\ninterface IPuzzleContentWrapper {\n  $visible?: boolean;\n}\n\nconst PuzzleContentWrapper = styled(FlexView)<IPuzzleContentWrapper>(({ $visible, theme }) => {\n  const { layout } = theme;\n\n  return `\n    width: ${layout.gutter * 22.1875}px;\n    height: ${layout.gutter * 26}px;\n    left: 0;\n    opacity: ${$visible ? 1 : 0};\n    pointer-events: ${$visible ? 'auto' : 'none'};\n    transition: opacity 0.2s ease-out;\n  `;\n});\n\nconst PuzzleAssignedWrapper = styled(FlexView)<{ $imageHue: THueNames }>`\n  position: relative;\n\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n\n  background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n  background-size: cover;\n`;\n\nexport {\n  PuzzleContainer,\n  PuzzleContentWrapper,\n  PuzzleContent,\n  PuzzleButton,\n  PuzzleText,\n  CheckMarkIcon,\n  AssignedTag,\n  PuzzleAssignedWrapper,\n};\n"],"names":["PuzzleContent","styled","FlexView","theme","$assigned","colors","layout","PuzzleButton","$assigning","PuzzleContainer","AssignedTag","PuzzleContentWrapper","$visible","PuzzleAssignedWrapper","$imageHue","getPuzzleCardPattern"],"mappings":";;;AAYM,MAAAA,IAAgBC,EAAOC,CAAQ,EAAgB,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgB;AACvE,QAAA,EAAE,QAAAC,GAAQ,QAAAC,EAAW,IAAAH;AAEpB,SAAA;AAAA;AAAA,aAEIG,EAAO,SAAS,OAAO;AAAA,cACtBA,EAAO,SAAS,MAAM;AAAA;AAAA,YAExBF,IAAY,MAAM,MAAM;AAAA,WACzBA,IAAY,MAAM,MAAM;AAAA;AAAA;AAAA,2BAGRC,EAAO,OAAO;AAAA;AAAA;AAGzC,CAAC,GAEKE,IAAeN,EAAOC,CAAQ,EAAgB,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,YAAAI,QAAiB;AAClF,QAAA,EAAE,QAAAH,GAAQ,QAAAC,EAAW,IAAAH;AAEpB,SAAA;AAAA;AAAA,aAEIG,EAAO,SAAS,OAAO;AAAA;AAAA,YAExBF,IAAY,MAAM,MAAM;AAAA,cACtBA,IAAY,UAAU,MAAM;AAAA;AAAA,OAGnCA,KAAaI,MACd;AAAA,oBACcH,EAAO,OAAO;AAAA,0BACRA,EAAO,OAAO;AAAA;AAAA;AAAA,KAIpC;AAAA;AAEJ,CAAC;AAEkBJ,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOZD,EAAOC,CAAQ;AAAA;AAAA;AAI/B,MAAAO,IAAkBR,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKjCQ,IAAcT,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAU7BS,IAAuBV,EAAOC,CAAQ,EAAyB,CAAC,EAAE,UAAAU,GAAU,OAAAT,QAAY;AACtF,QAAA,EAAE,QAAAG,EAAW,IAAAH;AAEZ,SAAA;AAAA,aACIG,EAAO,SAAS,OAAO;AAAA,cACtBA,EAAO,SAAS,EAAE;AAAA;AAAA,eAEjBM,IAAW,IAAI,CAAC;AAAA,sBACTA,IAAW,SAAS,MAAM;AAAA;AAAA;AAGhD,CAAC,GAEKC,IAAwBZ,EAAOC,CAAQ;AAAA;AAAA;AAAA,sCAGP,CAAC,EAAE,OAAAC,GAAO,WAAAW,QAAgBX,EAAM,OAAO,GAAGW,CAAS,IAAI,CAAC;AAAA;AAAA,sBAExE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;"}

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

@@ -0,0 +1,45 @@
+import { jsxs as n, Fragment as $, jsx as e } from "react/jsx-runtime";
+import { memo as a } from "react";
+import d from "../../ui/image/image.js";
+import r from "../../ui/text/text.js";
+import { PuzzleContent as g, AssignedTag as m, PuzzleButton as u } from "./puzzle-container-styled.js";
+const z = a(
+  ({ handleOnPuzzleClick: i, imageUrl: o, title: l, handleAssign: c, assigned: t, assigning: s }) => /* @__PURE__ */ n($, { children: [
+    /* @__PURE__ */ n(
+      g,
+      {
+        $justifyContent: "center",
+        $alignItems: "center",
+        onClick: i,
+        title: "Click to preview",
+        $flexGapX: 1.5,
+        $assigned: t,
+        $gutterX: 1,
+        children: [
+          /* @__PURE__ */ e(d, { width: 136, height: 136, src: o, withLoader: !1, alt: "Puzzle" }),
+          /* @__PURE__ */ e(r, { $renderAs: "h4", $align: "center", children: l }),
+          t && /* @__PURE__ */ e(m, { $gap: 4, $gutter: 8, $background: "BLACK_1", children: /* @__PURE__ */ e(r, { $renderAs: "ac4", $color: "WHITE_1", children: "Assigned" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      u,
+      {
+        $background: "BLACK_1",
+        $widthX: 15.75,
+        $alignItems: "center",
+        $justifyContent: "center",
+        $gapX: 0.75,
+        $gutterX: 1,
+        onClick: c,
+        $assigned: t,
+        $assigning: s,
+        children: /* @__PURE__ */ e(r, { $renderAs: "ub1-bold", $color: t ? "BLACK_T_38" : "WHITE_1", children: t ? "Discuss in next class" : "Assign" })
+      }
+    )
+  ] })
+);
+export {
+  z 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 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 }) => {\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        <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          $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      </>\n    );\n  },\n);\n\nexport default PuzzleContainerView;\n"],"names":["PuzzleContainerView","memo","handleOnPuzzleClick","imageUrl","title","handleAssign","assigned","assigning","jsxs","Fragment","Styled.PuzzleContent","jsx","Image","Text","Styled.AssignedTag","Styled.PuzzleButton"],"mappings":";;;;;AASA,MAAMA,IAAqDC;AAAA,EACzD,CAAC,EAAE,qBAAAC,GAAqB,UAAAC,GAAU,OAAAC,GAAO,cAAAC,GAAc,UAAAC,GAAU,WAAAC,QAG3D,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,SAASR;AAAA,QACT,OAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAWI;AAAA,QACX,UAAU;AAAA,QAEV,UAAA;AAAA,UAAC,gBAAAK,EAAAC,GAAA,EAAM,OAAO,KAAK,QAAQ,KAAK,KAAKT,GAAU,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,4BAC9EU,GAAK,EAAA,WAAU,MAAK,QAAO,UACzB,UACHT,GAAA;AAAA,UAECE,KACE,gBAAAK,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;AAAAA,MAAA;AAAA,QACC,aAAY;AAAA,QACZ,SAAS;AAAA,QACT,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,UAAU;AAAA,QACV,SAASV;AAAA,QACT,WAAWC;AAAA,QACX,YAAYC;AAAA,QAEZ,UAAA,gBAAAI,EAACE,GAAK,EAAA,WAAU,YAAW,QAAQP,IAAW,eAAe,WAC1D,UAAWA,IAAA,0BAA0B,SACxC,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAGN;"}

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

@@ -1,127 +1,109 @@
-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 x } from "react/jsx-runtime";
+import { memo as R, useState as V, useRef as N, useMemo as C, useEffect as T, useCallback as u } from "react";
+import j from "../../ui/layout/flex-view.js";
+import k from "../../ui/lottie-animation/lottie-animation.js";
+import { usePostPuzzleToAssign as O } from "../api/puzzle-assign.js";
+import { PUZZLE_ASSIGN_ANIMATION as m } from "../constants/puzzle-container.js";
+import { getPuzzleCardLottie as v } from "../utils/puzzle-pattern.js";
+import { PuzzleContainer as L, PuzzleAssignedWrapper as G, PuzzleContentWrapper as M } from "./puzzle-container-styled.js";
+import S from "./puzzle-container-view.js";
+const U = {
+  loop: !1,
+  renderer: "svg",
+  autoPlay: !1
+}, W = R(
   ({
-    userType: A,
-    triggerReveal: o = !1,
-    onFullyHidden: s,
-    onPuzzleClick: d,
-    puzzleData: p,
-    courseStream: g,
-    studentId: u
+    triggerReveal: l = !1,
+    onFullyHidden: i,
+    onPuzzleClick: c,
+    puzzleData: E,
+    courseStream: f,
+    studentId: z
   }) => {
     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: o,
+      image_url: p,
+      assigned: s,
+      title: g,
+      id: P
+    } = E, [$, a] = V(s), r = N(null), I = C(() => v(o), [o]), { post: h, isProcessing: _ } = O({
+      onComplete: (e) => {
+        var t;
+        e ? a(!0) : ((t = r.current) == null || t.playSegments(m.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 || $(
+    T(() => {
+      var e, t;
+      s || (l ? (e = r.current) == null || e.playSegments(m.REVEAL, !0) : ((t = r.current) == null || t.stop(), a(!1)));
+    }, [s, l]);
+    const A = u(() => {
+      s || h(
         {
-          puzzle_id: h
+          puzzle_id: P
         },
         {
-          studentId: u,
-          courseStream: g
+          studentId: z,
+          courseStream: f
         }
       );
-    }, [g, e, $, h, u]), _ = c(() => {
-      d();
-    }, [d]), E = () => n === "visible" || e ? /* @__PURE__ */ l(w, { children: [
-      /* @__PURE__ */ l(
-        G,
+    }, [f, s, h, P, z]), d = u(() => {
+      c();
+    }, [c]), w = u(() => {
+      var e;
+      (e = r.current) == null || e.playSegments(m.REVEAL, !0);
+    }, []), b = C(
+      () => ({
+        name: "enterFrame",
+        callback: (e) => {
+          const { currentTime: t } = e;
+          t === 49 && a(!0), t === 101 && (i == null || i());
+        }
+      }),
+      [i]
+    );
+    return l ? s ? /* @__PURE__ */ n(L, { $justifyContent: "center", children: /* @__PURE__ */ n(
+      G,
+      {
+        $imageHue: o,
+        $background: `${o}_2`,
+        $widthX: 15.9375,
+        children: /* @__PURE__ */ n(
+          S,
+          {
+            imageUrl: p,
+            title: g,
+            handleOnPuzzleClick: d,
+            handleAssign: A,
+            assigned: !0
+          }
+        )
+      }
+    ) }) : /* @__PURE__ */ n(L, { children: /* @__PURE__ */ x(j, { $heightX: 26, children: [
+      /* @__PURE__ */ n(
+        k,
         {
-          $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: I,
+          ref: r,
+          settings: U,
+          onRender: w,
+          eventListener: b,
+          animateOnIntersect: !0
         }
       ),
-      A === "TEACHER" && /* @__PURE__ */ i(
+      /* @__PURE__ */ n(M, { $visible: $, $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: p,
+          title: g,
+          handleOnPuzzleClick: d,
+          handleAssign: A,
+          assigning: _
         }
-      )
-    ] }) : 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;
+), Y = W;
 export {
-  F as default
+  Y 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    } = 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 { 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              title={title}\n              handleOnPuzzleClick={handleOnPuzzleClick}\n              handleAssign={handleAssign}\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            />\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","showPuzzleInfo","setShowPuzzleInfo","useState","assignLottieRef","useRef","puzzleLottieSrc","useMemo","getPuzzleCardLottie","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":"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"}

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

@@ -0,0 +1,30 @@
+import o from "styled-components";
+import { ILLUSTRATIONS as r } from "../../../assets/illustrations/illustrations.js";
+import p from "../../ui/layout/flex-view.js";
+const a = o(p)``, i = o(p)`
+  background-image: url(${r.PUZZLE_DASHBOARD_BANNER});
+  background-size: cover;
+`, c = o(p)`
+  position: absolute;
+  top: 16px;
+  left: 16px;
+`, s = o(p)`
+  position: sticky;
+  top: 16px;
+  z-index: 5;
+`, d = o.div`
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(5, 1fr);
+  column-gap: 24px;
+  row-gap: 40px;
+  padding: 0 37px;
+`;
+export {
+  c as BackIconContainer,
+  s as BackIconWrapper,
+  i as BannerWrapper,
+  d as ContentWrapper,
+  a as PuzzleDashboardWrapper
+};
+//# 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 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\nexport {\n  PuzzleDashboardWrapper,\n  BannerWrapper,\n  BackIconContainer,\n  BackIconWrapper,\n  ContentWrapper,\n};\n"],"names":["PuzzleDashboardWrapper","styled","FlexView","BannerWrapper","ILLUSTRATIONS","BackIconContainer","BackIconWrapper","ContentWrapper"],"mappings":";;;AAKM,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;"}