@cuemath/leap 2.9.7-hg8 → 2.9.7-rj-0

package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js

@@ -1,61 +1,62 @@
-import { jsx as r, Fragment as b } from "react/jsx-runtime";
-import { useRef as O, useCallback as A, useEffect as X } from "react";
-import J from "../../../../../assets/line-icons/icons/carat-right.js";
-import { PLATFORM_EVENTS_STUDENT as G } from "../../../../analytics-events/platform-events-student.js";
-import { JOURNEY_ID_STUDENT as K } from "../../../../journey/journey-id/journey-id-student.js";
+import { jsx as r, Fragment as O } from "react/jsx-runtime";
+import { useRef as R, useCallback as C, useEffect as J } from "react";
+import K from "../../../../../assets/line-icons/icons/carat-right.js";
+import { PLATFORM_EVENTS_STUDENT as v } from "../../../../analytics-events/platform-events-student.js";
+import { useBreakpoint as j } from "../../../../hooks/use-breakpoint/use-breakpoint.js";
+import { JOURNEY_ID_STUDENT as Z } from "../../../../journey/journey-id/journey-id-student.js";
 import { IndicatorType as d } from "../../../../journey/use-journey/constants.js";
-import { useJourney as j } from "../../../../journey/use-journey/use-journey.js";
-import Z from "../../../../ui/buttons/icon-button/icon-button.js";
-import { useUIContext as q } from "../../../../ui/context/context.js";
-import R from "../../../../ui/layout/flex-view.js";
+import { useJourney as q } from "../../../../journey/use-journey/use-journey.js";
+import z from "../../../../ui/buttons/icon-button/icon-button.js";
+import { useUIContext as Q } from "../../../../ui/context/context.js";
+import N from "../../../../ui/layout/flex-view.js";
 import m from "../../../../ui/text/text.js";
-import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as v } from "../../../enum/circle-onboarding-steps.js";
-import { useCircleSounds as z } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
-import { TablesCard as M } from "../../comps/tables-card/tables-card.js";
-import { GAME_LAUNCHER_ANALYTICS_EVENTS as Q } from "../../game-launcher-analytics-events.js";
-import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as ee, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as te, START_ANIMATING_CLONED_ELEM as $, TABLE_CARD_INDEX as x, GO_TO_TABLE_LAUNCHER_DURATION_MS as re, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as ne, PUZZLE_CARD_INDEX as oe, SHOW_INITIAL_COACHMARK_AFTER_MS as w, LESSON_CARD_INDEX as ie, SHOW_INITIAL_TOOLTIP_AFTER_MS as le } from "./constants.js";
-import { Indicator as ce } from "./use-table-launcher-journey-styled.js";
-const Oe = ({
+import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as M } from "../../../enum/circle-onboarding-steps.js";
+import { useCircleSounds as ee } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { TablesCard as $ } from "../../comps/tables-card/tables-card.js";
+import { GAME_LAUNCHER_ANALYTICS_EVENTS as te } from "../../game-launcher-analytics-events.js";
+import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as re, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as ne, START_ANIMATING_CLONED_ELEM as x, TABLE_CARD_INDEX as w, GO_TO_TABLE_LAUNCHER_DURATION_MS as oe, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as ie, PUZZLE_CARD_INDEX as le, SHOW_INITIAL_COACHMARK_AFTER_MS as F, LESSON_CARD_INDEX as ce, SHOW_INITIAL_TOOLTIP_AFTER_MS as ae } from "./constants.js";
+import { Indicator as se } from "./use-table-launcher-journey-styled.js";
+const Se = ({
   carouselRefs: a,
-  onTableSegmentClick: N,
-  onJourneyComplete: S
+  onTableSegmentClick: S,
+  onJourneyComplete: P
 }) => {
-  const e = K.CIRCLE_TABLES_INTRO_JOURNEY, t = O(null), p = O(null), T = O([]), { playButtonSound: P } = z(), { nextCoachmark: l, setJourney: C, addCoachmark: u, endJourney: H } = j(), { onEvent: f } = q(), L = A(
+  const e = Z.CIRCLE_TABLES_INTRO_JOURNEY, { isMobile: T } = j(), t = R(null), f = R(null), g = R([]), { playButtonSound: H } = ee(), { nextCoachmark: l, setJourney: L, addCoachmark: u, endJourney: y } = q(), { onEvent: A } = Q(), I = C(
     (n) => {
       var c, o;
-      H(e), n && N(n), f(G.ONBOARDING_STEP_COMPLETED, {
-        step: v.TABLES
-      }), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), S(e);
+      y(e), n && S(n), A(v.ONBOARDING_STEP_COMPLETED, {
+        step: M.TABLES
+      }), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), P(e);
     },
-    [H, e, S, N, f]
-  ), y = A(
+    [y, e, P, S, A]
+  ), D = C(
     (n, c) => {
-      var g, E, h;
-      if (!((g = t.current) != null && g.segmentedCardWrapperRef.current) || !((E = t.current) != null && E.labelRef.current))
+      var E, h, p;
+      if (!((E = t.current) != null && E.segmentedCardWrapperRef.current) || !((h = t.current) != null && h.labelRef.current))
         return;
-      const o = t.current.labelRef.current.getBoundingClientRect(), i = (h = t.current) == null ? void 0 : h.segmentedCardWrapperRef.current.getBoundingClientRect();
+      const o = t.current.labelRef.current.getBoundingClientRect(), i = (p = t.current) == null ? void 0 : p.segmentedCardWrapperRef.current.getBoundingClientRect();
       u(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
         isActive: !1,
         type: d.TOOLTIP,
         elementToHighlight: /* @__PURE__ */ r(
-          M,
+          $,
           {
-            ref: p,
+            ref: f,
             defaultTable: c,
             label: n.label,
             data: n.data,
-            onPress: L,
-            onGoBackFromTableLevel: L
+            onPress: I,
+            onGoBackFromTableLevel: I
           }
         ),
         indicator: {
-          position: "left",
+          position: "top",
           backgroundColor: "YELLOW_4",
           width: 236,
-          tooltipItem: /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
-          tooltipXCoOrdinates: 0,
-          tooltipYCoOrdinates: o.height * 0.35
+          tooltipItem: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
+          tooltipXCoOrdinates: o.width / 2,
+          tooltipYCoOrdinates: 45
         }
       }), u(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
@@ -63,58 +64,58 @@ const Oe = ({
         type: d.NUDGE,
         indicator: {
           nudge: "click",
-          content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
+          content: !T && /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
           nudgePointerX: i.width / 2 + 50,
           nudgePointerY: i.height * 0.4
         },
-        elementToHighlight: /* @__PURE__ */ r(b, {})
-      }), l(e, !1, ee), l(e, !0, te);
+        elementToHighlight: /* @__PURE__ */ r(O, {})
+      }), l(e, !1, re), l(e, !0, ne);
       const s = setTimeout(() => {
         var _;
-        clearTimeout(s), (_ = p.current) == null || _.startLabelAnimation("YELLOW_4");
-      }, $);
-      T.current.push(s);
+        clearTimeout(s), (_ = f.current) == null || _.startLabelAnimation("YELLOW_4");
+      }, x);
+      g.current.push(s);
     },
-    [u, L, e, l]
-  ), I = A(() => {
+    [u, I, T, e, l]
+  ), b = C(() => {
     var o;
-    P(), (o = a.current) == null || o.goToIndex(x), l(e, !1, re), f(G.ONBOARDING_STEP_VIEWED, {
-      step: v.TABLES
+    H(), (o = a.current) == null || o.goToIndex(w), l(e, !1, oe), A(v.ONBOARDING_STEP_VIEWED, {
+      step: M.TABLES
     });
     const n = setTimeout(() => {
       var i;
       clearTimeout(n), (i = t.current) == null || i.setLabelVisiblity(!1), l(e, !0);
-    }, ne);
-    T.current.push(n);
+    }, ie);
+    g.current.push(n);
     const c = setTimeout(() => {
       var i;
-      clearTimeout(c), (i = p.current) == null || i.startLabelAnimation("YELLOW_4");
-    }, $);
-    T.current.push(c);
-  }, [a, e, l, P, f]), F = A(
+      clearTimeout(c), (i = f.current) == null || i.startLabelAnimation("YELLOW_4");
+    }, x);
+    g.current.push(c);
+  }, [a, e, l, H, A]), V = C(
     (n, c = !1) => {
-      var h, _, D, W, Y, k, B, U;
-      const o = (h = a.current) == null ? void 0 : h.indicatorRefs, i = (_ = a.current) == null ? void 0 : _.nextBtnRef, s = o == null ? void 0 : o[x];
-      if (!((D = t.current) != null && D.segmentedCardWrapperRef.current) || !((W = t.current) != null && W.labelRef.current) || !o || !(i != null && i.current) || !s || !s.current)
+      var p, _, W, k, B, Y, U, G;
+      const o = (p = a.current) == null ? void 0 : p.indicatorRefs, i = (_ = a.current) == null ? void 0 : _.nextBtnRef, s = o == null ? void 0 : o[w];
+      if (!((W = t.current) != null && W.segmentedCardWrapperRef.current) || !((k = t.current) != null && k.labelRef.current) || !o || !(i != null && i.current) || !s || !s.current)
         return;
-      const g = t.current.labelRef.current.getBoundingClientRect(), E = (Y = t.current) == null ? void 0 : Y.segmentedCardWrapperRef.current.getBoundingClientRect();
-      c ? (C(e, [
+      const E = t.current.labelRef.current.getBoundingClientRect(), h = (B = t.current) == null ? void 0 : B.segmentedCardWrapperRef.current.getBoundingClientRect();
+      c ? (L(e, [
         {
           originalElementToHighlightRef: s,
           isActive: !1,
           type: d.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ r(ce, { $isActive: !1 }),
+          elementToHighlight: /* @__PURE__ */ r(se, { $isActive: !1 }),
           indicator: {
             position: "bottom",
             backgroundColor: "YELLOW_4",
             width: 52,
             tooltipItem: /* @__PURE__ */ r(
-              R,
+              N,
               {
                 $position: "absolute",
                 $flexDirection: "row",
                 style: { top: 6, left: 8, cursor: "pointer" },
-                onClick: I,
+                onClick: b,
                 children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "NEW" })
               }
             ),
@@ -131,41 +132,41 @@ const Oe = ({
             content: "",
             nudgePointerY: 20
           },
-          elementToHighlight: /* @__PURE__ */ r(b, {})
+          elementToHighlight: /* @__PURE__ */ r(O, {})
         }
-      ]), (U = a.current) == null || U.goToIndex(ie), l(e, !1, w), l(e, !0, le)) : (C(e, [
+      ]), (G = a.current) == null || G.goToIndex(ce), l(e, !1, F), l(e, !0, ae)) : (L(e, [
         {
-          originalElementToHighlightRef: (k = a.current) == null ? void 0 : k.nextBtnRef,
+          originalElementToHighlightRef: (Y = a.current) == null ? void 0 : Y.nextBtnRef,
           isActive: !1,
           type: d.NUDGE,
           indicator: {
             nudge: "click",
-            content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
+            content: !T && /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
             nudgePointerX: 0,
             nudgePointerY: 0
           },
           elementToHighlight: /* @__PURE__ */ r(
-            Z,
+            z,
             {
               renderAs: "secondary",
-              Icon: J,
-              onClick: I,
-              analyticsLabel: Q.JOURNEY_NEXT_ACTIVITY
+              Icon: K,
+              onClick: b,
+              analyticsLabel: te.JOURNEY_NEXT_ACTIVITY
             }
           )
         }
-      ]), (B = a.current) == null || B.goToIndex(oe), l(e, !1, w)), u(e, {
+      ]), (U = a.current) == null || U.goToIndex(le), l(e, !1, F)), u(e, {
         originalElementToHighlightRef: t.current.labelRef,
         isActive: !1,
         type: d.TOOLTIP,
-        elementToHighlight: /* @__PURE__ */ r(b, {}),
+        elementToHighlight: /* @__PURE__ */ r(O, {}),
         indicator: {
-          position: "right",
+          position: "top",
           backgroundColor: "YELLOW_4",
           width: 264,
-          tooltipItem: /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
-          tooltipXCoOrdinates: g.width + 50,
-          tooltipYCoOrdinates: g.height / 2
+          tooltipItem: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
+          tooltipXCoOrdinates: E.width / 2,
+          tooltipYCoOrdinates: E.height + 10
         }
       }), u(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
@@ -173,19 +174,19 @@ const Oe = ({
         type: d.NUDGE,
         indicator: {
           nudge: "click",
-          content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
-          nudgePointerX: E.width / 2 + 50,
-          nudgePointerY: E.height / 2
+          content: !T && /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
+          nudgePointerX: h.width / 2 + 50,
+          nudgePointerY: h.height / 2
         },
         elementToHighlight: /* @__PURE__ */ r(
-          M,
+          $,
           {
-            ref: p,
+            ref: f,
             label: n.label,
             data: n.data,
             onPress: () => {
             },
-            onPressTableSegment: (V) => y(n, V)
+            onPressTableSegment: (X) => D(n, X)
           }
         )
       });
@@ -193,21 +194,22 @@ const Oe = ({
     [
       u,
       a,
-      I,
-      y,
+      b,
+      D,
+      T,
       e,
       l,
-      C
+      L
     ]
   );
-  return X(() => () => {
-    T.current.forEach((n) => clearTimeout(n)), T.current = [];
+  return J(() => () => {
+    g.current.forEach((n) => clearTimeout(n)), g.current = [];
   }, [e]), {
     tableRef: t,
-    startJourney: F
+    startJourney: V
   };
 };
 export {
-  Oe as useTableLauncherJourney
+  Se as useTableLauncherJourney
 };
 //# sourceMappingURL=use-table-launcher-journey.js.map

package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { ITableCardRef, ITableDetails } from '../../comps/tables-card/tables-card-types';\nimport type {\n  ITableInfo,\n  ITables,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseTableJourneyProps } from './use-table-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n  LESSON_CARD_INDEX,\n  PUZZLE_CARD_INDEX,\n  SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n  SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n  TABLE_CARD_INDEX,\n} from './constants';\nimport {\n  GO_TO_TABLE_LAUNCHER_DURATION_MS,\n  SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n  SHOW_INITIAL_COACHMARK_AFTER_MS,\n  SHOW_INITIAL_TOOLTIP_AFTER_MS,\n  START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport * as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n  carouselRefs,\n  onTableSegmentClick,\n  onJourneyComplete,\n}: IUseTableJourneyProps) => {\n  const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n\n  const originalTableRef = useRef<ITableCardRef>(null);\n  const highlightedTableRef = useRef<ITableCardRef>(null);\n\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, addCoachmark, endJourney } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const handleEndJourney = useCallback(\n    (tableDetails?: ITableDetails) => {\n      endJourney(journeyId);\n      // Only when User clicked on play\n      if (tableDetails) {\n        onTableSegmentClick(tableDetails);\n      }\n      trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n        step: Action.TABLES,\n      });\n\n      // Reset original table card ref label\n      originalTableRef?.current?.setLabelVisiblity(true);\n      originalTableRef?.current?.stopLabelAnimation();\n      onJourneyComplete(journeyId);\n    },\n    [endJourney, journeyId, onJourneyComplete, onTableSegmentClick, trackAnalytics],\n  );\n\n  const handleTableSegmentClick = useCallback(\n    (launcherData: ITables, tableData: ITableInfo) => {\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current\n      ) {\n        return;\n      }\n\n      const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            defaultTable={tableData}\n            label={launcherData.label}\n            data={launcherData.data}\n            onPress={handleEndJourney}\n            onGoBackFromTableLevel={handleEndJourney}\n          />\n        ),\n        indicator: {\n          position: 'left',\n          backgroundColor: 'YELLOW_4',\n          width: 236,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs=\"ab2-bold\">Each table has 3 levels—clear them and earn 3 stars!</Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: 0,\n          tooltipYCoOrdinates: segmentedCardDims.height * 0.35,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              Pick a level\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height * 0.4,\n        } as INudgeProps,\n        elementToHighlight: <></>,\n      });\n\n      nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n      nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n      const startAnimationOnLabelAgain = setTimeout(() => {\n        clearTimeout(startAnimationOnLabelAgain);\n        highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n      }, START_ANIMATING_CLONED_ELEM);\n\n      timerRefs.current.push(startAnimationOnLabelAgain);\n    },\n    [addCoachmark, handleEndJourney, journeyId, nextCoachmark],\n  );\n\n  const goToTableLauncher = useCallback(() => {\n    playButtonSound();\n    carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n    nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n    trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n      step: Action.TABLES,\n    });\n\n    const showNudge = setTimeout(() => {\n      clearTimeout(showNudge);\n      originalTableRef.current?.setLabelVisiblity(false);\n      nextCoachmark(journeyId, true);\n    }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n    timerRefs.current.push(showNudge);\n\n    const animateLabel = setTimeout(() => {\n      clearTimeout(animateLabel);\n      highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n    }, START_ANIMATING_CLONED_ELEM);\n\n    timerRefs.current.push(animateLabel);\n  }, [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackAnalytics]);\n\n  const startJourney = useCallback(\n    (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n      const paginationList = carouselRefs.current?.indicatorRefs;\n      const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n      const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current ||\n        !paginationList ||\n        !carouselNextBtnRef?.current ||\n        !tablePaginationRef ||\n        !tablePaginationRef.current\n      ) {\n        return;\n      }\n\n      const labelDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      // TAKE THE USER TO THE TABLE CARD\n      if (!isTutorialOnboardingDone) {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: (\n                <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                  Click to proceed\n                </Text>\n              ),\n              nudgePointerX: 0,\n              nudgePointerY: 0,\n            } as INudgeProps,\n            elementToHighlight: (\n              <IconButton\n                renderAs=\"secondary\"\n                Icon={CaratRightIcon}\n                onClick={goToTableLauncher}\n                analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n              />\n            ),\n          },\n        ]);\n        carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n      } else {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n            isActive: false,\n            type: IndicatorType.TOOLTIP,\n            elementToHighlight: <S.Indicator $isActive={false} />,\n            indicator: {\n              position: 'bottom',\n              backgroundColor: 'YELLOW_4',\n              width: 52,\n              tooltipItem: (\n                <FlexView\n                  $position=\"absolute\"\n                  $flexDirection=\"row\"\n                  style={{ top: 6, left: 8, cursor: 'pointer' }}\n                  onClick={goToTableLauncher}\n                >\n                  <Text $renderAs=\"ab2-bold\">NEW</Text>\n                </FlexView>\n              ),\n              tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n            } as IArrowTooltipProps,\n          },\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: '',\n              nudgePointerY: 20,\n            } as INudgeProps,\n            elementToHighlight: <></>,\n          },\n        ]);\n        carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n        nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n      }\n\n      // SHOW THE USER SELECT A TABLE\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.labelRef,\n        isActive: false,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: <></>,\n        indicator: {\n          position: 'right',\n          backgroundColor: 'YELLOW_4',\n          width: 264,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs=\"ab2-bold\">\n                Get faster at multiplication! Practice everyday and become a Tables champ.\n              </Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: labelDims.width + 50,\n          tooltipYCoOrdinates: labelDims.height / 2,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              {'Pick a table to start'}\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height / 2,\n        } as INudgeProps,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            label={tablesData.label}\n            data={tablesData.data}\n            onPress={() => {}}\n            onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n          />\n        ),\n      });\n    },\n    [\n      addCoachmark,\n      carouselRefs,\n      goToTableLauncher,\n      handleTableSegmentClick,\n      journeyId,\n      nextCoachmark,\n      setJourney,\n    ],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      timerRefs.current.forEach(timer => clearTimeout(timer));\n      timerRefs.current = [];\n    };\n  }, [journeyId]);\n\n  return {\n    tableRef: originalTableRef,\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","originalTableRef","useRef","highlightedTableRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","S.Indicator","_h","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":"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"}
+{"version":3,"file":"use-table-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { ITableCardRef, ITableDetails } from '../../comps/tables-card/tables-card-types';\nimport type {\n  ITableInfo,\n  ITables,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseTableJourneyProps } from './use-table-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { useBreakpoint } from '../../../../hooks/use-breakpoint/use-breakpoint';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n  LESSON_CARD_INDEX,\n  PUZZLE_CARD_INDEX,\n  SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n  SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n  TABLE_CARD_INDEX,\n} from './constants';\nimport {\n  GO_TO_TABLE_LAUNCHER_DURATION_MS,\n  SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n  SHOW_INITIAL_COACHMARK_AFTER_MS,\n  SHOW_INITIAL_TOOLTIP_AFTER_MS,\n  START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport * as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n  carouselRefs,\n  onTableSegmentClick,\n  onJourneyComplete,\n}: IUseTableJourneyProps) => {\n  const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n  const { isMobile } = useBreakpoint();\n\n  const originalTableRef = useRef<ITableCardRef>(null);\n  const highlightedTableRef = useRef<ITableCardRef>(null);\n\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, addCoachmark, endJourney } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const handleEndJourney = useCallback(\n    (tableDetails?: ITableDetails) => {\n      endJourney(journeyId);\n      // Only when User clicked on play\n      if (tableDetails) {\n        onTableSegmentClick(tableDetails);\n      }\n      trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n        step: Action.TABLES,\n      });\n\n      // Reset original table card ref label\n      originalTableRef?.current?.setLabelVisiblity(true);\n      originalTableRef?.current?.stopLabelAnimation();\n      onJourneyComplete(journeyId);\n    },\n    [endJourney, journeyId, onJourneyComplete, onTableSegmentClick, trackAnalytics],\n  );\n\n  const handleTableSegmentClick = useCallback(\n    (launcherData: ITables, tableData: ITableInfo) => {\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current\n      ) {\n        return;\n      }\n\n      const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            defaultTable={tableData}\n            label={launcherData.label}\n            data={launcherData.data}\n            onPress={handleEndJourney}\n            onGoBackFromTableLevel={handleEndJourney}\n          />\n        ),\n        indicator: {\n          position: 'top',\n          backgroundColor: 'YELLOW_4',\n          width: 236,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs=\"ab2-bold\">Each table has 3 levels—clear them and earn 3 stars!</Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: segmentedCardDims.width / 2,\n          tooltipYCoOrdinates: 45,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: !isMobile && (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              Pick a level\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height * 0.4,\n        } as INudgeProps,\n        elementToHighlight: <></>,\n      });\n\n      nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n      nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n      const startAnimationOnLabelAgain = setTimeout(() => {\n        clearTimeout(startAnimationOnLabelAgain);\n        highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n      }, START_ANIMATING_CLONED_ELEM);\n\n      timerRefs.current.push(startAnimationOnLabelAgain);\n    },\n    [addCoachmark, handleEndJourney, isMobile, journeyId, nextCoachmark],\n  );\n\n  const goToTableLauncher = useCallback(() => {\n    playButtonSound();\n    carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n    nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n    trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n      step: Action.TABLES,\n    });\n\n    const showNudge = setTimeout(() => {\n      clearTimeout(showNudge);\n      originalTableRef.current?.setLabelVisiblity(false);\n      nextCoachmark(journeyId, true);\n    }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n    timerRefs.current.push(showNudge);\n\n    const animateLabel = setTimeout(() => {\n      clearTimeout(animateLabel);\n      highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n    }, START_ANIMATING_CLONED_ELEM);\n\n    timerRefs.current.push(animateLabel);\n  }, [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackAnalytics]);\n\n  const startJourney = useCallback(\n    (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n      const paginationList = carouselRefs.current?.indicatorRefs;\n      const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n      const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current ||\n        !paginationList ||\n        !carouselNextBtnRef?.current ||\n        !tablePaginationRef ||\n        !tablePaginationRef.current\n      ) {\n        return;\n      }\n\n      const labelDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      // TAKE THE USER TO THE TABLE CARD\n      if (!isTutorialOnboardingDone) {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: !isMobile && (\n                <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                  Click to proceed\n                </Text>\n              ),\n              nudgePointerX: 0,\n              nudgePointerY: 0,\n            } as INudgeProps,\n            elementToHighlight: (\n              <IconButton\n                renderAs=\"secondary\"\n                Icon={CaratRightIcon}\n                onClick={goToTableLauncher}\n                analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n              />\n            ),\n          },\n        ]);\n        carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n      } else {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n            isActive: false,\n            type: IndicatorType.TOOLTIP,\n            elementToHighlight: <S.Indicator $isActive={false} />,\n            indicator: {\n              position: 'bottom',\n              backgroundColor: 'YELLOW_4',\n              width: 52,\n              tooltipItem: (\n                <FlexView\n                  $position=\"absolute\"\n                  $flexDirection=\"row\"\n                  style={{ top: 6, left: 8, cursor: 'pointer' }}\n                  onClick={goToTableLauncher}\n                >\n                  <Text $renderAs=\"ab2-bold\">NEW</Text>\n                </FlexView>\n              ),\n              tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n            } as IArrowTooltipProps,\n          },\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: '',\n              nudgePointerY: 20,\n            } as INudgeProps,\n            elementToHighlight: <></>,\n          },\n        ]);\n        carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n        nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n      }\n\n      // SHOW THE USER SELECT A TABLE\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.labelRef,\n        isActive: false,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: <></>,\n        indicator: {\n          position: 'top',\n          backgroundColor: 'YELLOW_4',\n          width: 264,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs=\"ab2-bold\">\n                Get faster at multiplication! Practice everyday and become a Tables champ.\n              </Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: labelDims.width / 2,\n          tooltipYCoOrdinates: labelDims.height + 10,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: !isMobile && (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              {'Pick a table to start'}\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height / 2,\n        } as INudgeProps,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            label={tablesData.label}\n            data={tablesData.data}\n            onPress={() => {}}\n            onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n          />\n        ),\n      });\n    },\n    [\n      addCoachmark,\n      carouselRefs,\n      goToTableLauncher,\n      handleTableSegmentClick,\n      isMobile,\n      journeyId,\n      nextCoachmark,\n      setJourney,\n    ],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      timerRefs.current.forEach(timer => clearTimeout(timer));\n      timerRefs.current = [];\n    };\n  }, [journeyId]);\n\n  return {\n    tableRef: originalTableRef,\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","isMobile","useBreakpoint","originalTableRef","useRef","highlightedTableRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","S.Indicator","_h","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":"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"}

package/dist/features/circle-games/games/tutorial/constants.js

@@ -1,5 +1,6 @@
-const o = 64 + (window.topInset || 0);
+const E = 64, H = 129;
 export {
-  o as HEADER_HEIGHT
+  E as HEADER_HEIGHT,
+  H as JOURNEY_SEPARATOR_HEIGHT
 };
 //# sourceMappingURL=constants.js.map

package/dist/features/circle-games/games/tutorial/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../src/features/circle-games/games/tutorial/constants.ts"],"sourcesContent":["export const HEADER_HEIGHT = 64 + (window.topInset || 0);\n"],"names":["HEADER_HEIGHT"],"mappings":"AAAa,MAAAA,IAAgB,MAAM,OAAO,YAAY;"}
+{"version":3,"file":"constants.js","sources":["../../../../../src/features/circle-games/games/tutorial/constants.ts"],"sourcesContent":["export const HEADER_HEIGHT = 64;\n\nexport const JOURNEY_SEPARATOR_HEIGHT = 129;\n"],"names":["HEADER_HEIGHT","JOURNEY_SEPARATOR_HEIGHT"],"mappings":"AAAO,MAAMA,IAAgB,IAEhBC,IAA2B;"}

package/dist/features/circle-games/games/tutorial/tutorial-styled.js

@@ -1,6 +1,6 @@
 import o from "styled-components";
-import { HEADER_HEIGHT as t } from "./constants.js";
-const n = o.div`
+import { HEADER_HEIGHT as e, JOURNEY_SEPARATOR_HEIGHT as t } from "./constants.js";
+const s = o.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -9,29 +9,29 @@ const n = o.div`
   position: relative;
   width: inherit;
 `, d = o.div`
-  height: ${t}px;
-  padding-top: ${(window.topInset || 0) + 24}px;
+  height: ${e}px;
+  padding-top: 24px;
   width: 100%;
   background: ${({ theme: i }) => i.colors.WHITE_T_03};
   backdrop-filter: blur(40px);
   position: relative;
   flex-shrink: 0;
-`, s = o.div`
+`, a = o.div`
   position: absolute;
   right: 16px;
-  top: ${(window.topInset || 0) + 22}px;
+  top: 22px;
   z-index: 1;
   &:hover {
     background: ${({ theme: i }) => i.colors.BLACK_4};
     cursor: pointer;
   }
-`, p = o.div`
+`, l = o.div`
   display: flex;
   flex-direction: column;
   /* overflow: hidden; */
   flex-grow: 1;
   position: relative;
-`, a = o.div`
+`, p = o.div`
   width: 100%;
   position: absolute;
   top: 0;
@@ -39,20 +39,24 @@ const n = o.div`
   bottom: 0;
   right: 0;
   & video {
+    height: ${({ isJourneyActive: i }) => i ? `calc(100% - ${t}px)` : "100%"};
+    transform: translateY(
+      ${({ isJourneyActive: i }) => i ? `${t}px` : 0}
+    );
+    transition: all 0.2s ease-in-out;
     width: 100%;
-    height: 100%;
   }
-`, l = o.div`
+`, h = o.div`
   height: 40px;
   width: 100%;
   position: relative;
   display: flex;
-`, h = o.div`
+`, c = o.div`
   height: 2px;
   position: relative;
   width: 100%;
   z-index: 1;
-`, c = o.div`
+`, x = o.div`
   height: inherit;
   background: ${({ theme: i }) => i.colors.WHITE};
   position: absolute;
@@ -61,13 +65,13 @@ const n = o.div`
   transition: width 0.4s linear;
 `;
 export {
-  p as GameTutorialContainer,
+  l as GameTutorialContainer,
   d as GameTutorialHeader,
-  n as GameTutorialWrapper,
-  s as HeaderIconContainer,
-  a as VideoContainer,
-  c as VideoProgress,
-  h as VideoProgressContainer,
-  l as VideoProgressWrapper
+  s as GameTutorialWrapper,
+  a as HeaderIconContainer,
+  p as VideoContainer,
+  x as VideoProgress,
+  c as VideoProgressContainer,
+  h as VideoProgressWrapper
 };
 //# sourceMappingURL=tutorial-styled.js.map

package/dist/features/circle-games/games/tutorial/tutorial-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorial-styled.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { HEADER_HEIGHT } from './constants';\n\nexport const GameTutorialWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 250px;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  position: relative;\n  width: inherit;\n`;\n\nexport const GameTutorialHeader = styled.div`\n  height: ${HEADER_HEIGHT}px;\n  padding-top: ${(window.topInset || 0) + 24}px;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.WHITE_T_03};\n  backdrop-filter: blur(40px);\n  position: relative;\n  flex-shrink: 0;\n`;\n\nexport const HeaderIconContainer = styled.div`\n  position: absolute;\n  right: 16px;\n  top: ${(window.topInset || 0) + 22}px;\n  z-index: 1;\n  &:hover {\n    background: ${({ theme }) => theme.colors.BLACK_4};\n    cursor: pointer;\n  }\n`;\n\nexport const GameTutorialContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* overflow: hidden; */\n  flex-grow: 1;\n  position: relative;\n`;\n\nexport const VideoContainer = styled.div`\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  & video {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nexport const VideoProgressWrapper = styled.div`\n  height: 40px;\n  width: 100%;\n  position: relative;\n  display: flex;\n`;\n\nexport const VideoProgressContainer = styled.div`\n  height: 2px;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const VideoProgress = styled.div<{ $width: number }>`\n  height: inherit;\n  background: ${({ theme }) => theme.colors.WHITE};\n  position: absolute;\n  z-index: 2;\n  width: ${({ $width }) => $width || 0}%;\n  transition: width 0.4s linear;\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer","VideoProgressWrapper","VideoProgressContainer","VideoProgress","$width"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKtCC,IAAqBF,EAAO;AAAA,YAC7BG,CAAa;AAAA,kBACP,OAAO,YAAY,KAAK,EAAE;AAAA;AAAA,gBAE5B,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAsBJ,EAAO;AAAA;AAAA;AAAA,UAGhC,OAAO,YAAY,KAAK,EAAE;AAAA;AAAA;AAAA,kBAGlB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKxCI,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ/BM,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAaxBO,IAAuBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BQ,IAAyBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCS,IAAgBT,EAAO;AAAA;AAAA,gBAEpB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,WAGtC,CAAC,EAAE,QAAAS,QAAaA,KAAU,CAAC;AAAA;AAAA;"}
+{"version":3,"file":"tutorial-styled.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { HEADER_HEIGHT, JOURNEY_SEPARATOR_HEIGHT } from './constants';\n\nexport const GameTutorialWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 250px;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  position: relative;\n  width: inherit;\n`;\n\nexport const GameTutorialHeader = styled.div`\n  height: ${HEADER_HEIGHT}px;\n  padding-top: 24px;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.WHITE_T_03};\n  backdrop-filter: blur(40px);\n  position: relative;\n  flex-shrink: 0;\n`;\n\nexport const HeaderIconContainer = styled.div`\n  position: absolute;\n  right: 16px;\n  top: 22px;\n  z-index: 1;\n  &:hover {\n    background: ${({ theme }) => theme.colors.BLACK_4};\n    cursor: pointer;\n  }\n`;\n\nexport const GameTutorialContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* overflow: hidden; */\n  flex-grow: 1;\n  position: relative;\n`;\n\nexport const VideoContainer = styled.div<{ isJourneyActive?: boolean }>`\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  & video {\n    height: ${({ isJourneyActive }) =>\n      isJourneyActive ? `calc(100% - ${JOURNEY_SEPARATOR_HEIGHT}px)` : '100%'};\n    transform: translateY(\n      ${({ isJourneyActive }) => (isJourneyActive ? `${JOURNEY_SEPARATOR_HEIGHT}px` : 0)}\n    );\n    transition: all 0.2s ease-in-out;\n    width: 100%;\n  }\n`;\n\nexport const VideoProgressWrapper = styled.div`\n  height: 40px;\n  width: 100%;\n  position: relative;\n  display: flex;\n`;\n\nexport const VideoProgressContainer = styled.div`\n  height: 2px;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const VideoProgress = styled.div<{ $width: number }>`\n  height: inherit;\n  background: ${({ theme }) => theme.colors.WHITE};\n  position: absolute;\n  z-index: 2;\n  width: ${({ $width }) => $width || 0}%;\n  transition: width 0.4s linear;\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer","isJourneyActive","JOURNEY_SEPARATOR_HEIGHT","VideoProgressWrapper","VideoProgressContainer","VideoProgress","$width"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKtCC,IAAqBF,EAAO;AAAA,YAC7BG,CAAa;AAAA;AAAA;AAAA,gBAGT,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAsBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMxB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKxCI,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ/BM,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQvB,CAAC,EAAE,iBAAAO,EAAgB,MAC3BA,IAAkB,eAAeC,CAAwB,QAAQ,MAAM;AAAA;AAAA,QAErE,CAAC,EAAE,iBAAAD,EAAgB,MAAOA,IAAkB,GAAGC,CAAwB,OAAO,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA,GAO3EC,IAAuBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BU,IAAyBV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCW,IAAgBX,EAAO;AAAA;AAAA,gBAEpB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,WAGtC,CAAC,EAAE,QAAAW,QAAaA,KAAU,CAAC;AAAA;AAAA;"}

package/dist/features/circle-games/games/tutorial/tutorial.js

@@ -1,44 +1,44 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { useState as l, useRef as f, useCallback as h } from "react";
-import g from "../../../../assets/line-icons/icons/cross.js";
-import C from "../../../ui/text/text.js";
-import { GameTutorialWrapper as I, GameTutorialHeader as V, HeaderIconContainer as x, GameTutorialContainer as T, VideoContainer as $, VideoProgressWrapper as G, VideoProgressContainer as H, VideoProgress as P } from "./tutorial-styled.js";
-const E = ({
-  src: d,
-  title: t,
-  onCross: o,
-  showProgress: m = !0,
-  onTutorialPlayedOnce: e
-}) => {
-  const [i, u] = l(0), s = f(!1), p = h(
-    (n) => {
-      const c = (n.target.currentTime || 0) / (n.target.duration || 1) * 100;
-      c >= 90 && !s.current && (s.current = !0, e == null || e()), u(c);
-    },
-    [e]
-  );
-  return /* @__PURE__ */ a(I, { children: [
-    (t || o) && /* @__PURE__ */ a(V, { children: [
-      t && /* @__PURE__ */ r(C, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: t }),
-      o && /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(g, { color: "#fff", onClick: o }) })
-    ] }),
-    /* @__PURE__ */ r(T, { children: /* @__PURE__ */ r($, { children: /* @__PURE__ */ r(
-      "video",
-      {
-        loop: !0,
-        autoPlay: !0,
-        muted: !0,
-        src: d,
-        onTimeUpdate: p,
-        disablePictureInPicture: !0,
-        itemType: "video/mp4",
-        playsInline: !0
-      }
-    ) }) }),
-    m && /* @__PURE__ */ r(G, { children: /* @__PURE__ */ r(H, { children: i > 0 && /* @__PURE__ */ r(P, { $width: i }) }) })
-  ] });
-};
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { forwardRef as I, useState as v, useRef as u, useCallback as C, useImperativeHandle as V } from "react";
+import x from "../../../../assets/line-icons/icons/cross.js";
+import { useJourney as H } from "../../../journey/use-journey/use-journey.js";
+import T from "../../../ui/text/text.js";
+import { GameTutorialWrapper as $, GameTutorialHeader as G, HeaderIconContainer as P, GameTutorialContainer as R, VideoContainer as W, VideoProgressWrapper as b, VideoProgressContainer as j, VideoProgress as k } from "./tutorial-styled.js";
+const q = I(
+  ({ src: m, title: o, onCross: t, showProgress: p = !0, onTutorialPlayedOnce: e }, f) => {
+    const [i, l] = v(0), n = u(!1), s = u(null), { isJourneyActive: h } = H(), g = C(
+      (c) => {
+        const a = (c.target.currentTime || 0) / (c.target.duration || 1) * 100;
+        a >= 90 && !n.current && (n.current = !0, e == null || e()), l(a);
+      },
+      [e]
+    );
+    return V(f, () => ({
+      videoRef: s
+    })), /* @__PURE__ */ d($, { children: [
+      (o || t) && /* @__PURE__ */ d(G, { children: [
+        o && /* @__PURE__ */ r(T, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: o }),
+        t && /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(x, { color: "#fff", onClick: t }) })
+      ] }),
+      /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(W, { isJourneyActive: h, children: /* @__PURE__ */ r(
+        "video",
+        {
+          ref: s,
+          loop: !0,
+          autoPlay: !0,
+          muted: !0,
+          src: m,
+          onTimeUpdate: g,
+          disablePictureInPicture: !0,
+          itemType: "video/mp4",
+          playsInline: !0
+        }
+      ) }) }),
+      p && /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(j, { children: i > 0 && /* @__PURE__ */ r(k, { $width: i }) }) })
+    ] });
+  }
+);
 export {
-  E as Tutorial
+  q as Tutorial
 };
 //# sourceMappingURL=tutorial.js.map