@cuemath/leap 3.0.7-hg1 → 3.0.7-hg3

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

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

@@ -0,0 +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 { getTheme } from '../../../../ui/theme/get-theme';\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 { device } = getTheme();\n  const isMobile = device === 'mobile';\n  const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\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={tooltipTextRenderAs}>\n                Each table has 3 levels—clear them and earn 3 stars!\n              </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, tooltipTextRenderAs],\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={tooltipTextRenderAs}>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={tooltipTextRenderAs}>\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      tooltipTextRenderAs,\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","device","getTheme","isMobile","tooltipTextRenderAs","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

@@ -0,0 +1,5 @@
+const t = 64 + (window.ReactNativeTopInset || 0);
+export {
+  t as HEADER_HEIGHT
+};
+//# sourceMappingURL=constants.js.map

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

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

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

@@ -0,0 +1,73 @@
+import o from "styled-components";
+import { HEADER_HEIGHT as t } from "./constants.js";
+const n = o.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 250px;
+  background: ${({ theme: i }) => i.colors.BLACK_1};
+  position: relative;
+  width: inherit;
+`, d = o.div`
+  height: ${t}px;
+  padding-top: ${(window.ReactNativeTopInset || 0) + 24}px;
+  width: 100%;
+  background: ${({ theme: i }) => i.colors.WHITE_T_03};
+  backdrop-filter: blur(40px);
+  position: relative;
+  flex-shrink: 0;
+`, s = o.div`
+  position: absolute;
+  right: 16px;
+  top: ${(window.ReactNativeTopInset || 0) + 22}px;
+  z-index: 1;
+  &:hover {
+    background: ${({ theme: i }) => i.colors.BLACK_4};
+    cursor: pointer;
+  }
+`, a = o.div`
+  display: flex;
+  flex-direction: column;
+  /* overflow: hidden; */
+  flex-grow: 1;
+  position: relative;
+`, p = o.div`
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  & video {
+    height: 100%;
+    width: 100%;
+  }
+`, l = o.div`
+  height: 40px;
+  width: 100%;
+  position: relative;
+  display: flex;
+`, h = o.div`
+  height: 2px;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+`, c = o.div`
+  height: inherit;
+  background: ${({ theme: i }) => i.colors.WHITE};
+  position: absolute;
+  z-index: 2;
+  width: ${({ $width: i }) => i || 0}%;
+  transition: width 0.4s linear;
+`;
+export {
+  a as GameTutorialContainer,
+  d as GameTutorialHeader,
+  n as GameTutorialWrapper,
+  s as HeaderIconContainer,
+  p as VideoContainer,
+  c as VideoProgress,
+  h as VideoProgressContainer,
+  l as VideoProgressWrapper
+};
+//# sourceMappingURL=tutorial-styled.js.map

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

@@ -0,0 +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.ReactNativeTopInset || 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.ReactNativeTopInset || 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    height: 100%;\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","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,uBAAuB,KAAK,EAAE;AAAA;AAAA,gBAEvC,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAsBJ,EAAO;AAAA;AAAA;AAAA,UAGhC,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA;AAAA,kBAG7B,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;"}

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

@@ -0,0 +1,48 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { useState as b, useRef as T, useCallback as I } from "react";
+import $ from "../../../../assets/line-icons/icons/cross.js";
+import a from "../../../ui/text/text.js";
+import { getTheme as x } from "../../../ui/theme/get-theme.js";
+import { InfoBar as C } from "../../comps/info-bar/info-bar.js";
+import { GameTutorialWrapper as P, GameTutorialHeader as V, HeaderIconContainer as E, GameTutorialContainer as H, VideoContainer as W, VideoProgressWrapper as v, VideoProgressContainer as A, VideoProgress as G } from "./tutorial-styled.js";
+const L = ({
+  src: l,
+  title: o,
+  onCross: t,
+  showProgress: m = !0,
+  onTutorialPlayedOnce: r,
+  isJourneyActive: u
+}) => {
+  const [i, p] = b(0), n = T(!1), { device: f } = x(), h = f === "mobile" ? "ab3-bold" : "ab2-bold", g = I(
+    (s) => {
+      const d = (s.target.currentTime || 0) / (s.target.duration || 1) * 100;
+      d >= 90 && !n.current && (n.current = !0, r == null || r()), p(d);
+    },
+    [r]
+  );
+  return /* @__PURE__ */ c(P, { children: [
+    (o || t) && /* @__PURE__ */ c(V, { children: [
+      o && /* @__PURE__ */ e(a, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: o }),
+      t && /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e($, { color: "#fff", onClick: t }) })
+    ] }),
+    u && /* @__PURE__ */ e(C, { hue: "PURPLE", children: /* @__PURE__ */ e(a, { $renderAs: h, $color: "WHITE_T_87", $align: "center", children: "Understanding the rules is always helpful before you begin." }) }),
+    /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(
+      "video",
+      {
+        loop: !0,
+        autoPlay: !0,
+        muted: !0,
+        src: l,
+        onTimeUpdate: g,
+        disablePictureInPicture: !0,
+        itemType: "video/mp4",
+        playsInline: !0
+      }
+    ) }) }),
+    m && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(A, { children: i > 0 && /* @__PURE__ */ e(G, { $width: i }) }) })
+  ] });
+};
+export {
+  L as Tutorial
+};
+//# sourceMappingURL=tutorial.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport { getTheme } from '../../../ui/theme/get-theme';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n  src,\n  title,\n  onCross,\n  showProgress = true,\n  onTutorialPlayedOnce,\n  isJourneyActive,\n}: ITutorialProps) => {\n  const [progress, setProgress] = useState(0);\n  const hasVideoEnded = useRef(false);\n\n  const { device } = getTheme();\n  const tooltipTextRenderAs = device === 'mobile' ? 'ab3-bold' : 'ab2-bold';\n\n  const onProgress = useCallback(\n    (e: ChangeEvent<HTMLVideoElement>) => {\n      const p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n      if (p >= 90 && !hasVideoEnded.current) {\n        hasVideoEnded.current = true;\n        onTutorialPlayedOnce?.();\n      }\n\n      setProgress(p);\n    },\n    [onTutorialPlayedOnce],\n  );\n\n  return (\n    <Styled.GameTutorialWrapper>\n      {(title || onCross) && (\n        <Styled.GameTutorialHeader>\n          {title && (\n            <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n              {title}\n            </Text>\n          )}\n          {onCross && (\n            <Styled.HeaderIconContainer>\n              <CrossIcon color=\"#fff\" onClick={onCross} />\n            </Styled.HeaderIconContainer>\n          )}\n        </Styled.GameTutorialHeader>\n      )}\n\n      {isJourneyActive && (\n        <InfoBar hue=\"PURPLE\">\n          <Text $renderAs={tooltipTextRenderAs} $color=\"WHITE_T_87\" $align=\"center\">\n            Understanding the rules is always helpful before you begin.\n          </Text>\n        </InfoBar>\n      )}\n      <Styled.GameTutorialContainer>\n        <Styled.VideoContainer>\n          <video\n            loop={true}\n            autoPlay={true}\n            muted={true}\n            src={src}\n            onTimeUpdate={onProgress}\n            disablePictureInPicture={true}\n            itemType=\"video/mp4\"\n            playsInline\n          />\n        </Styled.VideoContainer>\n      </Styled.GameTutorialContainer>\n\n      {showProgress && (\n        <Styled.VideoProgressWrapper>\n          <Styled.VideoProgressContainer>\n            {progress > 0 && <Styled.VideoProgress $width={progress} />}\n          </Styled.VideoProgressContainer>\n        </Styled.VideoProgressWrapper>\n      )}\n    </Styled.GameTutorialWrapper>\n  );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","progress","setProgress","useState","hasVideoEnded","useRef","device","getTheme","tooltipTextRenderAs","onProgress","useCallback","e","p","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":";;;;;;;AAWO,MAAMA,IAAW,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,sBAAAC;AAAA,EACA,iBAAAC;AACF,MAAsB;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAgBC,EAAO,EAAK,GAE5B,EAAE,QAAAC,MAAWC,KACbC,IAAsBF,MAAW,WAAW,aAAa,YAEzDG,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,KAAMD,EAAE,OAAO,eAAe,MAAMA,EAAE,OAAO,YAAY,KAAM;AAErE,MAAIC,KAAK,MAAM,CAACR,EAAc,YAC5BA,EAAc,UAAU,IACDL,KAAA,QAAAA,MAGzBG,EAAYU,CAAC;AAAA,IACf;AAAA,IACA,CAACb,CAAoB;AAAA,EAAA;AAIrB,SAAA,gBAAAc,EAACC,GAAA,EACG,UAAA;AAAA,KAAAlB,KAASC,MACT,gBAAAgB,EAACE,GAAA,EACE,UAAA;AAAA,MACCnB,KAAA,gBAAAoB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHrB,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAAmB,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAAStB,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGDG,KACC,gBAAAgB,EAACI,GAAQ,EAAA,KAAI,UACX,UAAC,gBAAAJ,EAAAC,GAAA,EAAK,WAAWT,GAAqB,QAAO,cAAa,QAAO,UAAS,wEAE1E,CAAA,GACF;AAAA,sBAEDa,GAAA,EACC,UAAC,gBAAAL,EAAAM,GAAA,EACC,UAAA,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAArB;AAAA,QACA,cAAcc;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAECX,KACE,gBAAAkB,EAAAO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EACE,UAAWvB,IAAA,uBAAMwB,GAAA,EAAqB,QAAQxB,EAAU,CAAA,EAC3D,CAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/features/circle-games/games/web-view/constants.js

@@ -0,0 +1,5 @@
+const o = "*";
+export {
+  o as ALLOWED_ORIGIN
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/circle-games/games/web-view/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../src/features/circle-games/games/web-view/constants.ts"],"sourcesContent":["export const ALLOWED_ORIGIN = '*';\n"],"names":["ALLOWED_ORIGIN"],"mappings":"AAAO,MAAMA,IAAiB;"}

package/dist/features/circle-games/games/web-view/enums/player-type-enum.js

@@ -0,0 +1,5 @@
+var T = /* @__PURE__ */ ((E) => (E.TEACHER = "TEACHER", E.STUDENT = "STUDENT", E))(T || {});
+export {
+  T as PlayerType
+};
+//# sourceMappingURL=player-type-enum.js.map

package/dist/features/circle-games/games/web-view/enums/player-type-enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player-type-enum.js","sources":["../../../../../../src/features/circle-games/games/web-view/enums/player-type-enum.ts"],"sourcesContent":["export enum PlayerType {\n  TEACHER = 'TEACHER',\n  STUDENT = 'STUDENT',\n}\n"],"names":["PlayerType"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WAFAA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/circle-games/games/web-view/enums/project-outcomes-enum.js

@@ -0,0 +1,5 @@
+var n = /* @__PURE__ */ ((E) => (E.WIN = "win", E.LOSE = "lose", E.DRAW = "draw", E.SOLVED = "solved", E.SOLVED_WITH_HINT = "solved_with_hint", E.COMPLETED = "completed", E.IN_PROGRESS = "in_progress", E.NONE = "none", E))(n || {});
+export {
+  n as ProjectOutcome
+};
+//# sourceMappingURL=project-outcomes-enum.js.map

package/dist/features/circle-games/games/web-view/enums/project-outcomes-enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-outcomes-enum.js","sources":["../../../../../../src/features/circle-games/games/web-view/enums/project-outcomes-enum.ts"],"sourcesContent":["export enum ProjectOutcome {\n  WIN = 'win',\n  LOSE = 'lose',\n  DRAW = 'draw',\n  SOLVED = 'solved',\n  SOLVED_WITH_HINT = 'solved_with_hint',\n  COMPLETED = 'completed',\n  IN_PROGRESS = 'in_progress',\n  NONE = 'none',\n}\n"],"names":["ProjectOutcome"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QACPA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,mBAAmB,oBACnBA,EAAA,YAAY,aACZA,EAAA,cAAc,eACdA,EAAA,OAAO,QARGA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/circle-games/games/web-view/enums/project-type-enum.js

@@ -0,0 +1,5 @@
+var a = /* @__PURE__ */ ((E) => (E.GAME = "game", E.PUZZLE = "puzzle", E.LESSON = "lesson", E.TABLE = "table", E))(a || {});
+export {
+  a as ProjectType
+};
+//# sourceMappingURL=project-type-enum.js.map

package/dist/features/circle-games/games/web-view/enums/project-type-enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-type-enum.js","sources":["../../../../../../src/features/circle-games/games/web-view/enums/project-type-enum.ts"],"sourcesContent":["export enum ProjectType {\n  GAME = 'game',\n  PUZZLE = 'puzzle',\n  LESSON = 'lesson',\n  TABLE = 'table',\n}\n"],"names":["ProjectType"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/circle-games/games/web-view/enums/web-view-events-enum.js

@@ -0,0 +1,5 @@
+var T = /* @__PURE__ */ ((A) => (A.VIBRATE = "VIBRATE", A.GAME_BACK = "GAME_BACK", A.HIDE_LOADER = "HIDE_LOADER", A.SHOW_SNACKBAR = "SHOW_SNACKBAR", A.LOAD_DATA_FROM_APP = "LOAD_DATA_FROM_APP", A.UPDATE_STATS = "UPDATE_STATS", A.GET_CONFIG = "GET_CONFIG", A.TRACK_EVENT = "TRACK_EVENT", A.GAME_DATA = "GAME_DATA", A.APP_STATE = "APP_STATE", A.START_GAME = "START_GAME", A.SET_CONFIG = "SET_CONFIG", A))(T || {});
+export {
+  T as WebViewEvent
+};
+//# sourceMappingURL=web-view-events-enum.js.map

package/dist/features/circle-games/games/web-view/enums/web-view-events-enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-view-events-enum.js","sources":["../../../../../../src/features/circle-games/games/web-view/enums/web-view-events-enum.ts"],"sourcesContent":["export enum WebViewEvent {\n  // needs to be subscribed\n  VIBRATE = 'VIBRATE',\n  GAME_BACK = 'GAME_BACK',\n  HIDE_LOADER = 'HIDE_LOADER',\n  SHOW_SNACKBAR = 'SHOW_SNACKBAR',\n  LOAD_DATA_FROM_APP = 'LOAD_DATA_FROM_APP',\n  UPDATE_STATS = 'UPDATE_STATS',\n  GET_CONFIG = 'GET_CONFIG',\n  TRACK_EVENT = 'TRACK_EVENT',\n\n  // sending from app to circle web\n  GAME_DATA = 'GAME_DATA',\n  APP_STATE = 'APP_STATE',\n  START_GAME = 'START_GAME',\n  SET_CONFIG = 'SET_CONFIG',\n}\n"],"names":["WebViewEvent"],"mappings":"AAAY,IAAAA,sBAAAA,OAEVA,EAAA,UAAU,WACVA,EAAA,YAAY,aACZA,EAAA,cAAc,eACdA,EAAA,gBAAgB,iBAChBA,EAAA,qBAAqB,sBACrBA,EAAA,eAAe,gBACfA,EAAA,aAAa,cACbA,EAAA,cAAc,eAGdA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,aAAa,cACbA,EAAA,aAAa,cAfHA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/circle-games/games/web-view/hooks/use-webview-games.js

@@ -0,0 +1,16 @@
+import { useCallback as r } from "react";
+import { ALLOWED_ORIGIN as m } from "../constants.js";
+import { WebViewEvent as n } from "../enums/web-view-events-enum.js";
+const i = ({ webViewRef: e }) => ({ playGame: r(() => {
+  var t, o;
+  (o = (t = e.current) == null ? void 0 : t.contentWindow) == null || o.postMessage(
+    {
+      event: n.START_GAME
+    },
+    m
+  );
+}, [e]) });
+export {
+  i as useWebViewGames
+};
+//# sourceMappingURL=use-webview-games.js.map

package/dist/features/circle-games/games/web-view/hooks/use-webview-games.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-webview-games.js","sources":["../../../../../../src/features/circle-games/games/web-view/hooks/use-webview-games.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\nimport { useCallback } from 'react';\n\nimport { ALLOWED_ORIGIN } from '../constants';\nimport { WebViewEvent } from '../enums';\n\nexport const useWebViewGames = ({ webViewRef }: { webViewRef: RefObject<HTMLIFrameElement> }) => {\n  const playGame = useCallback(() => {\n    webViewRef.current?.contentWindow?.postMessage(\n      {\n        event: WebViewEvent.START_GAME,\n      },\n      ALLOWED_ORIGIN,\n    );\n  }, [webViewRef]);\n\n  return { playGame };\n};\n"],"names":["useWebViewGames","webViewRef","useCallback","_b","_a","WebViewEvent","ALLOWED_ORIGIN"],"mappings":";;;AAOO,MAAMA,IAAkB,CAAC,EAAE,YAAAC,SAUzB,EAAE,UATQC,EAAY,MAAM;;AACjC,GAAAC,KAAAC,IAAAH,EAAW,YAAX,gBAAAG,EAAoB,kBAApB,QAAAD,EAAmC;AAAA,IACjC;AAAA,MACE,OAAOE,EAAa;AAAA,IACtB;AAAA,IACAC;AAAA;AACF,GACC,CAACL,CAAU,CAAC,EAEG;"}

package/dist/features/circle-games/games/web-view/web-view-analytics-events.js

@@ -0,0 +1,11 @@
+import { PLUGINS as t } from "../../../../node_modules/@cuemath/analytics-v2/dist/constants.js";
+const c = {
+  activity_seen: [t.MIXPANEL],
+  activity_matching_completed: [t.MIXPANEL],
+  activity_completed: [t.MIXPANEL],
+  activity_closed: [t.MIXPANEL]
+};
+export {
+  c as WEBVIEW_ANALYTICS_WHITELIST_EVENTS
+};
+//# sourceMappingURL=web-view-analytics-events.js.map

package/dist/features/circle-games/games/web-view/web-view-analytics-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-view-analytics-events.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view-analytics-events.ts"],"sourcesContent":["import { PLUGINS } from '@cuemath/analytics-v2/dist/constants';\n\nexport enum WEBVIEW_ANALYTICS_EVENTS {\n  GAME_ANALYTICS = 'game_analytics',\n  ACTIVITY_SEEN = 'activity_seen',\n  ACTIVITY_COMPLETED = 'activity_completed',\n  ACTIVITY_CLOSED = 'activity_closed',\n  ACTIVITY_MATCHING_COMPLETED = 'activity_matching_completed',\n}\n\nexport const WEBVIEW_ANALYTICS_WHITELIST_EVENTS = {\n  [WEBVIEW_ANALYTICS_EVENTS.ACTIVITY_SEEN]: [PLUGINS.MIXPANEL],\n  [WEBVIEW_ANALYTICS_EVENTS.ACTIVITY_MATCHING_COMPLETED]: [PLUGINS.MIXPANEL],\n  [WEBVIEW_ANALYTICS_EVENTS.ACTIVITY_COMPLETED]: [PLUGINS.MIXPANEL],\n  [WEBVIEW_ANALYTICS_EVENTS.ACTIVITY_CLOSED]: [PLUGINS.MIXPANEL],\n};\n"],"names":["WEBVIEW_ANALYTICS_WHITELIST_EVENTS","PLUGINS"],"mappings":";AAUO,MAAMA,IAAqC;AAAA,EAC/C,eAAyC,CAACC,EAAQ,QAAQ;AAAA,EAC1D,6BAAuD,CAACA,EAAQ,QAAQ;AAAA,EACxE,oBAA8C,CAACA,EAAQ,QAAQ;AAAA,EAC/D,iBAA2C,CAACA,EAAQ,QAAQ;AAC/D;"}

package/dist/features/circle-games/games/web-view/web-view-types.js

@@ -0,0 +1,5 @@
+var c = /* @__PURE__ */ ((u) => (u.DEFAULT = "default", u.SUCCESS = "success", u.FAIL = "fail", u))(c || {});
+export {
+  c as IStatsToAwardErrorCode
+};
+//# sourceMappingURL=web-view-types.js.map

package/dist/features/circle-games/games/web-view/web-view-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-view-types.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view-types.ts"],"sourcesContent":["import type { IAvatarLayer } from '../../../ui/avatar/avatar-types';\nimport type { TUserTypes } from '../../../ui/types';\nimport type { WebViewEvent, ProjectOutcome, ProjectType } from './enums';\nimport type { WEBVIEW_ANALYTICS_EVENTS } from './web-view-analytics-events';\nimport type { IframeHTMLAttributes } from 'react';\n\nexport interface IPlayer {\n  id: string;\n  username: string;\n  grade?: string;\n  avatar?: IAvatarLayer[] | null;\n  playerType: TUserTypes;\n  countryCode: string;\n  isAdmin?: boolean;\n}\n\ninterface ISyncableWebGameProps {\n  joinByRoomId?: string;\n  enableSync?: boolean; // applicable for all except multiplayer games and tables\n}\n\ninterface IBaseWebGameProps {\n  projectId: string;\n  variant: string;\n  projectType: ProjectType;\n  enableCloseButton?: boolean;\n}\n\nexport interface IMultiplayerWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n  enablePlayerTurnIndicators?: boolean;\n}\n\nexport interface IPuzzleWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n  question: string;\n  askHintPermission?: boolean;\n}\n\nexport interface ILessonWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n  miniGameIdentifier: string;\n  sessionId: string;\n  targetQuestions: number;\n}\n\nexport interface ITableWebGameProps extends IBaseWebGameProps {\n  tableNumber: number;\n  infiniteModeHighScore?: number;\n}\n\nexport interface IVibrationPattern {\n  pattern: number[] | number;\n}\n\nexport enum IStatsToAwardErrorCode {\n  DEFAULT = 'default',\n  SUCCESS = 'success',\n  FAIL = 'fail',\n}\n\nexport interface IPlayerStats {\n  points: number;\n  accuracy: number;\n  timeSpent: number;\n  streakDays: number;\n  streakStatusToday: 'pending' | 'completed';\n  errorCode: IStatsToAwardErrorCode;\n  outcome: ProjectOutcome;\n  value: string;\n  starEligibleTime?: number;\n  starEligibleAccuracy?: number;\n  starRewarded?: boolean;\n}\n\nexport interface IInfoMessage {\n  message: string;\n  position: 'top' | 'bottom';\n}\n\nexport interface ITrackEvent {\n  eventName: typeof WEBVIEW_ANALYTICS_EVENTS;\n  properties: Record<string, unknown>;\n}\n\nexport interface IWebViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {\n  baseUrl: string;\n  projectDetails:\n    | IMultiplayerWebGameProps\n    | IPuzzleWebGameProps\n    | ILessonWebGameProps\n    | ITableWebGameProps;\n  parentDomain: string;\n  playerDetails: IPlayer;\n  onBack?: () => void;\n  onGameLoad?: () => void;\n  onGamePlayFinish?: (playerStats: IPlayerStats) => void;\n  handleInfoMessage?: (infoMessage: IInfoMessage) => void;\n}\n\nexport interface IMessageProps {\n  event: `${WebViewEvent}`;\n  payload: IVibrationPattern | IPlayerStats | IInfoMessage | null;\n}\n"],"names":["IStatsToAwardErrorCode"],"mappings":"AAoDY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/circle-games/games/web-view/web-view.js

@@ -0,0 +1,103 @@
+import { jsxs as h, jsx as v } from "react/jsx-runtime";
+import { forwardRef as P, useRef as G, useMemo as _, useCallback as T, useImperativeHandle as x, useEffect as B } from "react";
+import { useUIContext as J } from "../../../ui/context/context.js";
+import U from "../../../ui/layout/flex-view.js";
+import C from "../../../ui/separator/separator.js";
+import { ALLOWED_ORIGIN as b } from "./constants.js";
+import { ProjectType as s } from "./enums/project-type-enum.js";
+import { WebViewEvent as o } from "./enums/web-view-events-enum.js";
+const X = P((L, M) => {
+  const {
+    baseUrl: g,
+    projectDetails: y,
+    playerDetails: E,
+    onGameLoad: a,
+    onGamePlayFinish: c,
+    handleInfoMessage: p,
+    onBack: f,
+    parentDomain: N,
+    ...V
+  } = L, m = G(null), O = _(() => E, [E]), t = _(() => y, [y]);
+  let A = "";
+  const { onEvent: S } = J();
+  t.projectType === s.LESSON && (A = t.miniGameIdentifier);
+  const l = T(() => {
+    const { enableCloseButton: r = !0 } = t;
+    let e = {
+      enableCloseButton: r
+    };
+    return t.projectType === s.GAME && (e = {
+      ...e,
+      ...t
+    }), t.projectType === s.PUZZLE && (e = {
+      ...e,
+      ...t
+    }), t.projectType === s.LESSON && (e = {
+      ...e,
+      ...t
+    }), t.projectType === s.TABLE && (e = {
+      ...e,
+      ...t
+    }), e;
+  }, [t]), d = T(() => {
+    var e, i;
+    const r = l();
+    (i = (e = m.current) == null ? void 0 : e.contentWindow) == null || i.postMessage(
+      JSON.stringify({
+        event: o.GAME_DATA,
+        payload: r
+      }),
+      b
+    );
+  }, [l]), j = T(() => {
+    var e, i;
+    const r = l();
+    (i = (e = m.current) == null ? void 0 : e.contentWindow) == null || i.postMessage(
+      JSON.stringify({
+        event: o.SET_CONFIG,
+        payload: {
+          user: O,
+          projectConfig: r,
+          parentDomain: N
+        }
+      }),
+      b
+    );
+  }, [O, l, N]);
+  x(M, () => m.current, []), B(() => {
+    const r = (e) => {
+      var R, I;
+      const i = e.data, D = typeof i == "string" ? JSON.parse(i) : i, { event: n, payload: w = null } = D;
+      if (n === o.VIBRATE) {
+        const { pattern: u } = w;
+        window.ReactNativeWebView ? window.ReactNativeWebView.postMessage(JSON.stringify(D)) : (I = (R = window.navigator).vibrate) == null || I.call(R, u);
+      }
+      if (n === o.GAME_BACK && (f == null || f()), n === o.HIDE_LOADER && (a == null || a()), n === o.LOAD_DATA_FROM_APP && (d == null || d()), n === o.GET_CONFIG && j(), n === o.UPDATE_STATS && (c == null || c(w)), n === o.SHOW_SNACKBAR && (p == null || p(w)), n === o.TRACK_EVENT) {
+        const { eventName: u, properties: $ } = w;
+        S(u, $);
+      }
+    };
+    return window.addEventListener("message", r), () => {
+      window.removeEventListener("message", r);
+    };
+  }, [
+    p,
+    f,
+    c,
+    a,
+    j,
+    d,
+    S
+  ]);
+  const W = E.isAdmin ? g : `${g}/play-game/${t.projectId}/${t.variant}${A ? `/${A}` : ""}`;
+  return /* @__PURE__ */ h(U, { $height: "100%", $width: "100%", children: [
+    /* @__PURE__ */ v(C, { height: window.ReactNativeTopInset || 0 }),
+    /* @__PURE__ */ v("iframe", { ...V, ref: m, src: `${W}?version=2`, allow: "autoplay" }),
+    ";",
+    /* @__PURE__ */ v(C, { height: window.ReactNativeBottomInset || 0 })
+  ] });
+});
+export {
+  X as WebView
+};
+//# sourceMappingURL=web-view.js.map