@cuemath/leap 2.8.34-beta.0 → 2.8.35-aa0

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

@@ -1,4 +1,4 @@
-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.AUTH_USER_DATA = "AUTH_USER_DATA", A.GAME_DATA = "GAME_DATA", A.APP_STATE = "APP_STATE", A.START_GAME = "START_GAME", A.SET_CONFIG = "SET_CONFIG", A))(T || {});
+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
 };

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

@@ -1 +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  AUTH_USER_DATA = 'AUTH_USER_DATA',\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,iBAAiB,kBACjBA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,aAAa,cACbA,EAAA,aAAa,cAhBHA,IAAAA,KAAA,CAAA,CAAA;"}
+{"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/web-view-types.js.map

@@ -1 +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 {\n  GameId,\n  PuzzleId,\n  LessonId,\n  MiniGameId,\n  WebViewEvent,\n  ProjectOutcome,\n  ProjectType,\n} from './enums';\nimport type { WEBVIEW_ANALYTICS_EVENTS } from './web-view-analytics-events';\nimport type { IframeHTMLAttributes } from 'react';\n\nexport type TProject = GameId | PuzzleId | LessonId;\n\nexport interface IPlayer {\n  id: string;\n  username: string;\n  grade?: string;\n  avatar?: IAvatarLayer[] | null;\n  playerType: TUserTypes;\n}\n\ninterface IBaseWebGameProps<T> {\n  projectId: T;\n  variant: string;\n  projectType: ProjectType;\n  joinByRoomId?: string;\n  enableSync?: boolean; // applicable for all except multiplayer games\n  enablePlayerTurnIndicators?: boolean;\n  enableCloseButton?: boolean;\n}\n\nexport interface IMultiplayerWebGameProps extends IBaseWebGameProps<GameId> {}\n\nexport interface IPuzzleWebGameProps extends IBaseWebGameProps<PuzzleId> {\n  question: string;\n  askHintPermission?: boolean;\n}\n\nexport interface ILessonWebGameProps extends IBaseWebGameProps<LessonId> {\n  miniGameIdentifier: MiniGameId;\n  sessionId: string;\n  targetQuestions: 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}\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: IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\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":"AAmDY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA;"}
+{"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 {\n  GameId,\n  PuzzleId,\n  LessonId,\n  MiniGameId,\n  WebViewEvent,\n  ProjectOutcome,\n  ProjectType,\n} from './enums';\nimport type { WEBVIEW_ANALYTICS_EVENTS } from './web-view-analytics-events';\nimport type { IframeHTMLAttributes } from 'react';\n\nexport type TProject = GameId | PuzzleId | LessonId;\n\nexport interface IPlayer {\n  id: string;\n  username: string;\n  grade?: string;\n  avatar?: IAvatarLayer[] | null;\n  playerType: TUserTypes;\n}\n\ninterface IBaseWebGameProps<T> {\n  projectId: T;\n  variant: string;\n  projectType: ProjectType;\n  joinByRoomId?: string;\n  enableSync?: boolean; // applicable for all except multiplayer games\n  enablePlayerTurnIndicators?: boolean;\n  enableCloseButton?: boolean;\n}\n\nexport interface IMultiplayerWebGameProps extends IBaseWebGameProps<GameId> {}\n\nexport interface IPuzzleWebGameProps extends IBaseWebGameProps<PuzzleId> {\n  question: string;\n  askHintPermission?: boolean;\n}\n\nexport interface ILessonWebGameProps extends IBaseWebGameProps<LessonId> {\n  miniGameIdentifier: MiniGameId;\n  sessionId: string;\n  targetQuestions: 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}\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  parentDomain: string;\n  projectDetails: IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\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":"AAmDY,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

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

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

@@ -1 +1 @@
-{"version":3,"file":"web-view.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view.tsx"],"sourcesContent":["import type {\n  IInfoMessage,\n  ILessonWebGameProps,\n  IMessageProps,\n  IMultiplayerWebGameProps,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n  IVibrationPattern,\n  IWebViewProps,\n} from './web-view-types';\nimport type { ForwardedRef } from 'react';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { useUIContext } from '../../../ui/context/context';\nimport { ALLOWED_ORIGIN } from './constants';\nimport { ProjectType, WebViewEvent } from './enums';\n\nexport const WebView = forwardRef((props: IWebViewProps, ref: ForwardedRef<HTMLIFrameElement>) => {\n  const {\n    baseUrl,\n    projectDetails,\n    playerDetails,\n    onGameLoad,\n    onGamePlayFinish,\n    handleInfoMessage,\n    onBack,\n    ...rest\n  } = props;\n  const webViewRef = useRef<HTMLIFrameElement>(null);\n  const memoizedPlayerDetails = useMemo(() => playerDetails, [playerDetails]);\n  const memoizedProjectDetails = useMemo(() => projectDetails, [projectDetails]);\n\n  let miniGameIdentifier = '';\n  const { onEvent: trackEvent } = useUIContext();\n\n  if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n    miniGameIdentifier = (memoizedProjectDetails as ILessonWebGameProps).miniGameIdentifier;\n  }\n\n  const getProjectDetails = useCallback(() => {\n    const {\n      enableCloseButton = true,\n      enablePlayerTurnIndicators = false,\n      enableSync = false,\n      joinByRoomId = '',\n    } = memoizedProjectDetails;\n\n    let payload = {\n      joinByRoomId,\n      enableCloseButton,\n      enablePlayerTurnIndicators,\n      enableSync,\n    } as IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\n\n    if (memoizedProjectDetails.projectType === ProjectType.PUZZLE) {\n      const details = memoizedProjectDetails as IPuzzleWebGameProps;\n\n      payload = {\n        ...payload,\n        question: details.question,\n        askHintPermission: details.askHintPermission,\n      } as IPuzzleWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n      const details = memoizedProjectDetails as ILessonWebGameProps;\n\n      payload = {\n        ...payload,\n        miniGameIdentifier: details.miniGameIdentifier,\n        sessionId: details.sessionId,\n        targetQuestions: details.targetQuestions,\n      } as ILessonWebGameProps;\n    }\n\n    return payload;\n  }, [memoizedProjectDetails]);\n\n  const sendGamesData = useCallback(() => {\n    const payload = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.GAME_DATA,\n        payload,\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [getProjectDetails]);\n\n  const setConfig = useCallback(() => {\n    const projectConfig = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.SET_CONFIG,\n        payload: {\n          user: memoizedPlayerDetails,\n          projectConfig,\n        },\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [memoizedPlayerDetails, getProjectDetails]);\n\n  useImperativeHandle(ref, () => webViewRef.current as HTMLIFrameElement, []);\n\n  useEffect(() => {\n    const handleMessage = (e: MessageEvent) => {\n      const data: string = e.data;\n      const parsedData = typeof data === 'string' ? JSON.parse(data) : (data as IMessageProps);\n\n      const { event, payload = null } = parsedData;\n\n      if (event === WebViewEvent.VIBRATE) {\n        const { pattern } = payload as IVibrationPattern;\n\n        window.navigator.vibrate?.(pattern);\n      }\n\n      if (event === WebViewEvent.GAME_BACK) {\n        onBack?.();\n      }\n\n      if (event === WebViewEvent.HIDE_LOADER) {\n        onGameLoad?.();\n      }\n\n      if (event === WebViewEvent.LOAD_DATA_FROM_APP) {\n        sendGamesData?.();\n      }\n\n      if (event === WebViewEvent.GET_CONFIG) {\n        setConfig();\n      }\n\n      if (event === WebViewEvent.UPDATE_STATS) {\n        onGamePlayFinish?.(payload as IPlayerStats);\n      }\n\n      if (event === WebViewEvent.SHOW_SNACKBAR) {\n        handleInfoMessage?.(payload as IInfoMessage);\n      }\n\n      if (event === WebViewEvent.TRACK_EVENT) {\n        const { eventName, properties } = payload;\n\n        trackEvent(eventName, properties);\n      }\n    };\n\n    window.addEventListener('message', handleMessage);\n\n    return () => {\n      window.removeEventListener('message', handleMessage);\n    };\n  }, [\n    handleInfoMessage,\n    onBack,\n    onGamePlayFinish,\n    onGameLoad,\n    setConfig,\n    sendGamesData,\n    trackEvent,\n  ]);\n\n  return (\n    <iframe\n      {...rest}\n      ref={webViewRef}\n      src={`${baseUrl}/play-game/${memoizedProjectDetails.projectId}/${\n        memoizedProjectDetails.variant\n      }${miniGameIdentifier ? `/${miniGameIdentifier}` : ''}?version=2`}\n      allow=\"autoplay\"\n    />\n  );\n});\n"],"names":["WebView","forwardRef","props","ref","baseUrl","projectDetails","playerDetails","onGameLoad","onGamePlayFinish","handleInfoMessage","onBack","rest","webViewRef","useRef","memoizedPlayerDetails","useMemo","memoizedProjectDetails","miniGameIdentifier","trackEvent","useUIContext","ProjectType","getProjectDetails","useCallback","enableCloseButton","enablePlayerTurnIndicators","enableSync","joinByRoomId","payload","details","sendGamesData","_b","_a","WebViewEvent","ALLOWED_ORIGIN","setConfig","projectConfig","useImperativeHandle","useEffect","handleMessage","e","data","parsedData","event","pattern","eventName","properties","jsx"],"mappings":";;;;;;AAkBO,MAAMA,IAAUC,EAAW,CAACC,GAAsBC,MAAyC;AAC1F,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAT,GACEU,IAAaC,EAA0B,IAAI,GAC3CC,IAAwBC,EAAQ,MAAMT,GAAe,CAACA,CAAa,CAAC,GACpEU,IAAyBD,EAAQ,MAAMV,GAAgB,CAACA,CAAc,CAAC;AAE7E,MAAIY,IAAqB;AACzB,QAAM,EAAE,SAASC,EAAW,IAAIC,EAAa;AAEzC,EAAAH,EAAuB,gBAAgBI,EAAY,WACrDH,IAAsBD,EAA+C;AAGjE,QAAAK,IAAoBC,EAAY,MAAM;AACpC,UAAA;AAAA,MACJ,mBAAAC,IAAoB;AAAA,MACpB,4BAAAC,IAA6B;AAAA,MAC7B,YAAAC,IAAa;AAAA,MACb,cAAAC,IAAe;AAAA,IACb,IAAAV;AAEJ,QAAIW,IAAU;AAAA,MACZ,cAAAD;AAAA,MACA,mBAAAH;AAAA,MACA,4BAAAC;AAAA,MACA,YAAAC;AAAA,IAAA;AAGE,QAAAT,EAAuB,gBAAgBI,EAAY,QAAQ;AAC7D,YAAMQ,IAAUZ;AAEN,MAAAW,IAAA;AAAA,QACR,GAAGA;AAAA,QACH,UAAUC,EAAQ;AAAA,QAClB,mBAAmBA,EAAQ;AAAA,MAAA;AAAA,IAE/B;AAEI,QAAAZ,EAAuB,gBAAgBI,EAAY,QAAQ;AAC7D,YAAMQ,IAAUZ;AAEN,MAAAW,IAAA;AAAA,QACR,GAAGA;AAAA,QACH,oBAAoBC,EAAQ;AAAA,QAC5B,WAAWA,EAAQ;AAAA,QACnB,iBAAiBA,EAAQ;AAAA,MAAA;AAAA,IAE7B;AAEO,WAAAD;AAAA,EAAA,GACN,CAACX,CAAsB,CAAC,GAErBa,IAAgBP,EAAY,MAAM;;AACtC,UAAMK,IAAUN;AAEhB,KAAAS,KAAAC,IAAAnB,EAAW,YAAX,gBAAAmB,EAAoB,kBAApB,QAAAD,EAAmC;AAAA,MACjC,KAAK,UAAU;AAAA,QACb,OAAOE,EAAa;AAAA,QACpB,SAAAL;AAAA,MAAA,CACD;AAAA,MACDM;AAAA;AAAA,EACF,GACC,CAACZ,CAAiB,CAAC,GAEhBa,IAAYZ,EAAY,MAAM;;AAClC,UAAMa,IAAgBd;AAEtB,KAAAS,KAAAC,IAAAnB,EAAW,YAAX,gBAAAmB,EAAoB,kBAApB,QAAAD,EAAmC;AAAA,MACjC,KAAK,UAAU;AAAA,QACb,OAAOE,EAAa;AAAA,QACpB,SAAS;AAAA,UACP,MAAMlB;AAAA,UACN,eAAAqB;AAAA,QACF;AAAA,MAAA,CACD;AAAA,MACDF;AAAA;AAAA,EACF,GACC,CAACnB,GAAuBO,CAAiB,CAAC;AAE7C,SAAAe,EAAoBjC,GAAK,MAAMS,EAAW,SAA8B,CAAE,CAAA,GAE1EyB,EAAU,MAAM;AACR,UAAAC,IAAgB,CAACC,MAAoB;;AACzC,YAAMC,IAAeD,EAAE,MACjBE,IAAa,OAAOD,KAAS,WAAW,KAAK,MAAMA,CAAI,IAAKA,GAE5D,EAAE,OAAAE,GAAO,SAAAf,IAAU,KAAA,IAASc;AAE9B,UAAAC,MAAUV,EAAa,SAAS;AAC5B,cAAA,EAAE,SAAAW,EAAY,IAAAhB;AAEb,SAAAG,KAAAC,IAAA,OAAA,WAAU,YAAV,QAAAD,EAAA,KAAAC,GAAoBY;AAAA,MAC7B;AA0BI,UAxBAD,MAAUV,EAAa,cAChBtB,KAAA,QAAAA,MAGPgC,MAAUV,EAAa,gBACZzB,KAAA,QAAAA,MAGXmC,MAAUV,EAAa,uBACTH,KAAA,QAAAA,MAGda,MAAUV,EAAa,cACfE,KAGRQ,MAAUV,EAAa,iBACzBxB,KAAA,QAAAA,EAAmBmB,KAGjBe,MAAUV,EAAa,kBACzBvB,KAAA,QAAAA,EAAoBkB,KAGlBe,MAAUV,EAAa,aAAa;AAChC,cAAA,EAAE,WAAAY,GAAW,YAAAC,EAAe,IAAAlB;AAElC,QAAAT,EAAW0B,GAAWC,CAAU;AAAA,MAClC;AAAA,IAAA;AAGK,kBAAA,iBAAiB,WAAWP,CAAa,GAEzC,MAAM;AACJ,aAAA,oBAAoB,WAAWA,CAAa;AAAA,IAAA;AAAA,EACrD,GACC;AAAA,IACD7B;AAAA,IACAC;AAAA,IACAF;AAAA,IACAD;AAAA,IACA2B;AAAA,IACAL;AAAA,IACAX;AAAA,EAAA,CACD,GAGC,gBAAA4B;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGnC;AAAA,MACJ,KAAKC;AAAA,MACL,KAAK,GAAGR,CAAO,cAAcY,EAAuB,SAAS,IAC3DA,EAAuB,OACzB,GAAGC,IAAqB,IAAIA,CAAkB,KAAK,EAAE;AAAA,MACrD,OAAM;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;"}
+{"version":3,"file":"web-view.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view.tsx"],"sourcesContent":["import type {\n  IInfoMessage,\n  ILessonWebGameProps,\n  IMessageProps,\n  IMultiplayerWebGameProps,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n  IVibrationPattern,\n  IWebViewProps,\n} from './web-view-types';\nimport type { ForwardedRef } from 'react';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { useUIContext } from '../../../ui/context/context';\nimport { ALLOWED_ORIGIN } from './constants';\nimport { ProjectType, WebViewEvent } from './enums';\n\nexport const WebView = forwardRef((props: IWebViewProps, ref: ForwardedRef<HTMLIFrameElement>) => {\n  const {\n    baseUrl,\n    projectDetails,\n    playerDetails,\n    onGameLoad,\n    onGamePlayFinish,\n    handleInfoMessage,\n    onBack,\n    parentDomain,\n    ...rest\n  } = props;\n  const webViewRef = useRef<HTMLIFrameElement>(null);\n  const memoizedPlayerDetails = useMemo(() => playerDetails, [playerDetails]);\n  const memoizedProjectDetails = useMemo(() => projectDetails, [projectDetails]);\n\n  let miniGameIdentifier = '';\n  const { onEvent: trackEvent } = useUIContext();\n\n  if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n    miniGameIdentifier = (memoizedProjectDetails as ILessonWebGameProps).miniGameIdentifier;\n  }\n\n  const getProjectDetails = useCallback(() => {\n    const {\n      enableCloseButton = true,\n      enablePlayerTurnIndicators = false,\n      enableSync = false,\n      joinByRoomId = '',\n    } = memoizedProjectDetails;\n\n    let payload = {\n      joinByRoomId,\n      enableCloseButton,\n      enablePlayerTurnIndicators,\n      enableSync,\n    } as IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\n\n    if (memoizedProjectDetails.projectType === ProjectType.PUZZLE) {\n      const details = memoizedProjectDetails as IPuzzleWebGameProps;\n\n      payload = {\n        ...payload,\n        question: details.question,\n        askHintPermission: details.askHintPermission,\n      } as IPuzzleWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n      const details = memoizedProjectDetails as ILessonWebGameProps;\n\n      payload = {\n        ...payload,\n        miniGameIdentifier: details.miniGameIdentifier,\n        sessionId: details.sessionId,\n        targetQuestions: details.targetQuestions,\n      } as ILessonWebGameProps;\n    }\n\n    return payload;\n  }, [memoizedProjectDetails]);\n\n  const sendGamesData = useCallback(() => {\n    const payload = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.GAME_DATA,\n        payload,\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [getProjectDetails]);\n\n  const setConfig = useCallback(() => {\n    const projectConfig = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.SET_CONFIG,\n        payload: {\n          user: memoizedPlayerDetails,\n          projectConfig,\n          parentDomain,\n        },\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [memoizedPlayerDetails, getProjectDetails, parentDomain]);\n\n  useImperativeHandle(ref, () => webViewRef.current as HTMLIFrameElement, []);\n\n  useEffect(() => {\n    const handleMessage = (e: MessageEvent) => {\n      const data: string = e.data;\n      const parsedData = typeof data === 'string' ? JSON.parse(data) : (data as IMessageProps);\n\n      const { event, payload = null } = parsedData;\n\n      if (event === WebViewEvent.VIBRATE) {\n        const { pattern } = payload as IVibrationPattern;\n\n        window.navigator.vibrate?.(pattern);\n      }\n\n      if (event === WebViewEvent.GAME_BACK) {\n        onBack?.();\n      }\n\n      if (event === WebViewEvent.HIDE_LOADER) {\n        onGameLoad?.();\n      }\n\n      if (event === WebViewEvent.LOAD_DATA_FROM_APP) {\n        sendGamesData?.();\n      }\n\n      if (event === WebViewEvent.GET_CONFIG) {\n        setConfig();\n      }\n\n      if (event === WebViewEvent.UPDATE_STATS) {\n        onGamePlayFinish?.(payload as IPlayerStats);\n      }\n\n      if (event === WebViewEvent.SHOW_SNACKBAR) {\n        handleInfoMessage?.(payload as IInfoMessage);\n      }\n\n      if (event === WebViewEvent.TRACK_EVENT) {\n        const { eventName, properties } = payload;\n\n        trackEvent(eventName, properties);\n      }\n    };\n\n    window.addEventListener('message', handleMessage);\n\n    return () => {\n      window.removeEventListener('message', handleMessage);\n    };\n  }, [\n    handleInfoMessage,\n    onBack,\n    onGamePlayFinish,\n    onGameLoad,\n    setConfig,\n    sendGamesData,\n    trackEvent,\n  ]);\n\n  return (\n    <iframe\n      {...rest}\n      ref={webViewRef}\n      src={`${baseUrl}/play-game/${memoizedProjectDetails.projectId}/${\n        memoizedProjectDetails.variant\n      }${miniGameIdentifier ? `/${miniGameIdentifier}` : ''}?version=2`}\n      allow=\"autoplay\"\n    />\n  );\n});\n"],"names":["WebView","forwardRef","props","ref","baseUrl","projectDetails","playerDetails","onGameLoad","onGamePlayFinish","handleInfoMessage","onBack","parentDomain","rest","webViewRef","useRef","memoizedPlayerDetails","useMemo","memoizedProjectDetails","miniGameIdentifier","trackEvent","useUIContext","ProjectType","getProjectDetails","useCallback","enableCloseButton","enablePlayerTurnIndicators","enableSync","joinByRoomId","payload","details","sendGamesData","_b","_a","WebViewEvent","ALLOWED_ORIGIN","setConfig","projectConfig","useImperativeHandle","useEffect","handleMessage","e","data","parsedData","event","pattern","eventName","properties","jsx"],"mappings":"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"}

package/dist/features/cue-canvas/cue-canvas-core.js.map

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-core.js","sources":["../../../src/features/cue-canvas/cue-canvas-core.ts"],"sourcesContent":["import '../../library/polypad';\nimport type { TUserTypes } from '../ui/types';\nimport type {\n  IActionData,\n  TCueCanvasChangeData,\n  TCueCanvasTool,\n  TPublish,\n  TSubscribe,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport { getReverseMap, getToolAndSubtool, removeMask } from './cue-canvas-helpers';\n\ndeclare global {\n  interface Window {\n    Polypad: IPolypad;\n  }\n}\nexport class CueCanvasCore {\n  private polycanvas: IPolyPadInstance | undefined;\n  private publish?: TPublish;\n  private height: number;\n  private onUpdateHeight: (height: number) => void;\n  private userId: string;\n  private responseId: string;\n  private userType: TUserTypes;\n\n  constructor(\n    onPublish: TPublish,\n    onSubscribe: TSubscribe,\n    onUpdateHeight: (height: number) => void,\n    height: number,\n    userId: string,\n    responseId: string,\n    userType: TUserTypes,\n  ) {\n    this.onUpdateHeight = onUpdateHeight;\n    this.height = height;\n    this.userId = userId;\n    this.responseId = responseId;\n    this.publish = onPublish;\n    this.userType = userType;\n    onSubscribe(this.responseId, this.update);\n  }\n\n  async create({ canvasElementRef, canvasConfig, canvasSetting, initialData }: ICreateOptions) {\n    if (!canvasElementRef.current) {\n      throw new Error('PolyCanvas: Div Element Not found for canvas');\n    }\n    this.polycanvas = await window.Polypad.create(canvasElementRef.current, {\n      initial: {\n        options: canvasConfig,\n      },\n      ...canvasSetting,\n    });\n\n    removeMask(canvasElementRef);\n    this.polycanvas.on('change', this.onChange);\n    if (initialData) {\n      this.update(initialData);\n    }\n  }\n\n  resetViewPort = () => {\n    if (this.polycanvas) {\n      this.polycanvas.resetViewport();\n    }\n  };\n\n  onChange = (e: unknown) => {\n    const data = e as TCueCanvasChangeData;\n    const payload = Object.fromEntries(data.entries());\n\n    if (this.publish) {\n      this.publish({\n        eventName: 'cue_canvas_changed',\n        eventPayload: {\n          data: payload,\n          height: this.height,\n          userId: this.userId,\n          responseId: this.responseId,\n        },\n      });\n    }\n  };\n\n  undo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.undo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    const undoData = getReverseMap(data);\n\n    this.onChange(undoData);\n  };\n\n  redo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.redo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    this.onChange(data);\n  };\n\n  setTool = (tool: TCueCanvasTool) => {\n    if (this.polycanvas) {\n      const [currTool, currSubTool] = getToolAndSubtool(tool);\n\n      switch (currTool) {\n        case 'undo':\n          this.undo();\n          break;\n        case 'redo':\n          this.redo();\n          break;\n        default:\n          this.polycanvas.setTool(currTool, currSubTool);\n      }\n    }\n  };\n\n  updateCanvas = ({ data, userId }: IActionData) => {\n    const canEditStroke = this.userType === 'TEACHER' || userId === this.userId;\n\n    Object.entries(data).forEach(([key, value]) => {\n      if (!value[0] && value[1]) {\n        this.polycanvas?.add({ ...value[1], cannotEdit: !canEditStroke }, key);\n      } else if (value[0] && !value[1]) {\n        this.polycanvas?.delete(key);\n      } else {\n        // This is the case for tile edit (rotate, flip, slice etc)\n        // this.polycanvas?.update(key, { ...value[1] });\n      }\n    });\n  };\n  /**\n   * The `update` method is called in two cases:\n   * 1. When receiving initial data to update the canvas content.\n   * 2. When receiving strokes from other peers to update the canvas content.\n   * Each item can contain multiple actions, which are applied to the canvas.\n   *\n   * The method checks if the payload is an array or a single object.\n   * If it's an array, it iterates over each item and updates the canvas accordingly.\n   * If it's a single object, it directly updates the canvas.\n   *\n   * Additionally, if the payload contains a height greater than the current height of the canvas, the `updateHeight` method is called to update the canvas height.\n   */\n  update = (payload: IActionData | IActionData[]) => {\n    if (Array.isArray(payload)) {\n      const heights = payload.map(data => data.height);\n      const maxHeight = Math.max(...heights);\n\n      if (maxHeight > this.height) {\n        this.updateHeight(maxHeight);\n      }\n      payload.forEach(item => this.updateCanvas(item));\n    } else {\n      if (payload.height > this.height) {\n        this.updateHeight(payload.height);\n      }\n      this.updateCanvas(payload);\n    }\n  };\n\n  setColor = (color: string) => {\n    if (this.polycanvas) {\n      this.polycanvas.setColor(color);\n    }\n  };\n\n  updateHeight = (height: number) => {\n    this.height = height;\n    this.onUpdateHeight(height);\n  };\n\n  destroy = () => {\n    if (this.polycanvas) {\n      this.polycanvas.off('change', this.onChange);\n      this.polycanvas.destroy();\n      this.polycanvas = undefined;\n    }\n  };\n}\n"],"names":["CueCanvasCore","onPublish","onSubscribe","onUpdateHeight","height","userId","responseId","userType","__publicField","e","payload","data","undoData","getReverseMap","tool","currTool","currSubTool","getToolAndSubtool","canEditStroke","key","value","_a","_b","heights","maxHeight","item","color","canvasElementRef","canvasConfig","canvasSetting","initialData","removeMask"],"mappings":"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"}
+{"version":3,"file":"cue-canvas-core.js","sources":["../../../src/features/cue-canvas/cue-canvas-core.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n  IActionData,\n  TCueCanvasChangeData,\n  TCueCanvasTool,\n  TPublish,\n  TSubscribe,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport { getReverseMap, getToolAndSubtool, removeMask } from './cue-canvas-helpers';\n\ndeclare global {\n  interface Window {\n    Polypad: IPolypad;\n  }\n}\nexport class CueCanvasCore {\n  private polycanvas: IPolyPadInstance | undefined;\n  private publish?: TPublish;\n  private height: number;\n  private onUpdateHeight: (height: number) => void;\n  private userId: string;\n  private responseId: string;\n  private userType: TUserTypes;\n\n  constructor(\n    onPublish: TPublish,\n    onSubscribe: TSubscribe,\n    onUpdateHeight: (height: number) => void,\n    height: number,\n    userId: string,\n    responseId: string,\n    userType: TUserTypes,\n  ) {\n    this.onUpdateHeight = onUpdateHeight;\n    this.height = height;\n    this.userId = userId;\n    this.responseId = responseId;\n    this.publish = onPublish;\n    this.userType = userType;\n    onSubscribe(this.responseId, this.update);\n  }\n\n  async create({ canvasElementRef, canvasConfig, canvasSetting, initialData }: ICreateOptions) {\n    if (!canvasElementRef.current) {\n      throw new Error('PolyCanvas: Div Element Not found for canvas');\n    }\n    this.polycanvas = await window.Polypad.create(canvasElementRef.current, {\n      initial: {\n        options: canvasConfig,\n      },\n      ...canvasSetting,\n    });\n\n    removeMask(canvasElementRef);\n    this.polycanvas.on('change', this.onChange);\n    if (initialData) {\n      this.update(initialData);\n    }\n  }\n\n  resetViewPort = () => {\n    if (this.polycanvas) {\n      this.polycanvas.resetViewport();\n    }\n  };\n\n  onChange = (e: unknown) => {\n    const data = e as TCueCanvasChangeData;\n    const payload = Object.fromEntries(data.entries());\n\n    if (this.publish) {\n      this.publish({\n        eventName: 'cue_canvas_changed',\n        eventPayload: {\n          data: payload,\n          height: this.height,\n          userId: this.userId,\n          responseId: this.responseId,\n        },\n      });\n    }\n  };\n\n  undo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.undo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    const undoData = getReverseMap(data);\n\n    this.onChange(undoData);\n  };\n\n  redo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.redo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    this.onChange(data);\n  };\n\n  setTool = (tool: TCueCanvasTool) => {\n    if (this.polycanvas) {\n      const [currTool, currSubTool] = getToolAndSubtool(tool);\n\n      switch (currTool) {\n        case 'undo':\n          this.undo();\n          break;\n        case 'redo':\n          this.redo();\n          break;\n        default:\n          this.polycanvas.setTool(currTool, currSubTool);\n      }\n    }\n  };\n\n  updateCanvas = ({ data, userId }: IActionData) => {\n    const canEditStroke = this.userType === 'TEACHER' || userId === this.userId;\n\n    Object.entries(data).forEach(([key, value]) => {\n      if (!value[0] && value[1]) {\n        this.polycanvas?.add({ ...value[1], cannotEdit: !canEditStroke }, key);\n      } else if (value[0] && !value[1]) {\n        this.polycanvas?.delete(key);\n      } else {\n        // This is the case for tile edit (rotate, flip, slice etc)\n        // this.polycanvas?.update(key, { ...value[1] });\n      }\n    });\n  };\n  /**\n   * The `update` method is called in two cases:\n   * 1. When receiving initial data to update the canvas content.\n   * 2. When receiving strokes from other peers to update the canvas content.\n   * Each item can contain multiple actions, which are applied to the canvas.\n   *\n   * The method checks if the payload is an array or a single object.\n   * If it's an array, it iterates over each item and updates the canvas accordingly.\n   * If it's a single object, it directly updates the canvas.\n   *\n   * Additionally, if the payload contains a height greater than the current height of the canvas, the `updateHeight` method is called to update the canvas height.\n   */\n  update = (payload: IActionData | IActionData[]) => {\n    if (Array.isArray(payload)) {\n      const heights = payload.map(data => data.height);\n      const maxHeight = Math.max(...heights);\n\n      if (maxHeight > this.height) {\n        this.updateHeight(maxHeight);\n      }\n      payload.forEach(item => this.updateCanvas(item));\n    } else {\n      if (payload.height > this.height) {\n        this.updateHeight(payload.height);\n      }\n      this.updateCanvas(payload);\n    }\n  };\n\n  setColor = (color: string) => {\n    if (this.polycanvas) {\n      this.polycanvas.setColor(color);\n    }\n  };\n\n  updateHeight = (height: number) => {\n    this.height = height;\n    this.onUpdateHeight(height);\n  };\n\n  destroy = () => {\n    if (this.polycanvas) {\n      this.polycanvas.off('change', this.onChange);\n      this.polycanvas.destroy();\n      this.polycanvas = undefined;\n    }\n  };\n}\n"],"names":["CueCanvasCore","onPublish","onSubscribe","onUpdateHeight","height","userId","responseId","userType","__publicField","e","payload","data","undoData","getReverseMap","tool","currTool","currSubTool","getToolAndSubtool","canEditStroke","key","value","_a","_b","heights","maxHeight","item","color","canvasElementRef","canvasConfig","canvasSetting","initialData","removeMask"],"mappings":"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"}

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js

@@ -1,65 +1,74 @@
-import { useMessageBrokerChannel as B } from "@cuemath/cue-message-broker";
-import { useState as j, useRef as D, useMemo as q, useCallback as p } from "react";
-const w = (f, g) => {
-  const [C, k] = j(
-    {}
-  ), c = D({}), m = q(
+import { useMessageBrokerChannel as q } from "@cuemath/cue-message-broker";
+import { useState as x, useRef as w, useMemo as E, useCallback as h } from "react";
+const I = (c) => ({
+  userId: c.userId,
+  data: c.data,
+  height: c.height,
+  responseId: c.responseId
+}), F = (c, f, g) => {
+  const [d, m] = x(
+    () => {
+      var o, r;
+      const n = {};
+      if (!g) return n;
+      for (const { message: a } of g) {
+        const e = (o = a.payload) == null ? void 0 : o.eventPayload, s = e == null ? void 0 : e.responseId;
+        if (!(e != null && e.responseId)) continue;
+        const t = I(e);
+        s && n[s] ? (r = n[s]) == null || r.push(t) : n[s] = [t];
+      }
+      return n;
+    }
+  ), u = w({}), b = E(
     () => ({
-      channelId: f,
+      channelId: c,
       ttl: 0,
-      logger: g
+      logger: f
     }),
-    [f, g]
-  ), I = p((a, n) => {
-    c.current = { ...c.current, [a]: n };
-  }, []), S = p(
-    (a, n) => {
-      const t = {};
-      a.forEach((i) => {
-        var d;
-        const { payload: r } = i.message, { eventPayload: s } = r, e = s == null ? void 0 : s.responseId, u = s == null ? void 0 : s.data, h = s == null ? void 0 : s.userId, l = s == null ? void 0 : s.height, b = c.current[e];
-        !n && b ? b({
-          data: u,
-          height: l,
-          userId: h,
-          responseId: e
-        }) : e && t[e] ? (d = t[e]) == null || d.push({
-          userId: h,
-          data: u,
-          height: l,
-          responseId: e
-        }) : t[e] = [
-          {
-            userId: h,
-            data: u,
-            height: l,
-            responseId: e
-          }
-        ];
-      }), Object.keys(t).length > 0 && k(n ? t : (i) => {
-        const r = { ...i };
-        return Object.keys(t).forEach((s) => {
-          var e;
-          s && r[s] ? (e = r[s]) == null || e.push(...t[s] ?? []) : r[s] = t[s] ?? [];
-        }), r;
+    [c, f]
+  ), S = h((n, o) => {
+    u.current = { ...u.current, [n]: o };
+  }, []), C = h(
+    (n, o) => {
+      const r = {};
+      n.forEach((a) => {
+        var p;
+        const { payload: e } = a.message, { eventPayload: s } = e, t = s == null ? void 0 : s.responseId, R = s == null ? void 0 : s.data, B = s == null ? void 0 : s.userId, j = s == null ? void 0 : s.height, l = u.current[t];
+        if (!o && l)
+          l({
+            data: R,
+            height: j,
+            userId: B,
+            responseId: t
+          });
+        else {
+          const k = I(s);
+          t && r[t] ? (p = r[t]) == null || p.push(k) : r[t] = [k];
+        }
+      }), Object.keys(r).length > 0 && m((a) => {
+        const e = { ...a };
+        return Object.keys(r).forEach((s) => {
+          var t;
+          s && e[s] ? (t = e[s]) == null || t.push(...r[s] ?? []) : e[s] = r[s] ?? [];
+        }), e;
       });
     },
     []
-  ), { publish: M, channelStatus: O, channel: o } = B({
-    channelOptions: m,
-    consumerFn: S
-  }), R = p(() => {
-    o && o.destroyChannel();
-  }, [o]);
+  ), { publish: D, channelStatus: M, channel: i } = q({
+    channelOptions: b,
+    consumerFn: C
+  }), O = h(() => {
+    i && i.destroyChannel();
+  }, [i]);
   return {
-    publishStrokes: M,
-    channelStatus: O,
-    closeChannel: R,
-    initialStrokesData: C,
-    registerCallback: I
+    publishStrokes: D,
+    channelStatus: M,
+    closeChannel: O,
+    initialStrokesData: d,
+    registerCallback: S
   };
-}, F = w;
+}, $ = F;
 export {
-  F as default
+  $ as default
 };
 //# sourceMappingURL=use-canvas-sync-broker.js.map

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type { IActionData, TCueCanvasChangeDataObject } from '../types/cue-canvas';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\ninterface IMessage {\n  eventName: string;\n  eventPayload: {\n    responseId: string;\n    data: TCueCanvasChangeDataObject;\n    userId: string;\n    height: number;\n  };\n}\n\nconst useCanvasSyncBroker = (\n  channelId: string,\n  logEvent: (type: string, payload?: Record<string, unknown>) => void,\n) => {\n  const [initialStrokesData, setInitialStrokesData] = useState<Record<string, Array<IActionData>>>(\n    {},\n  );\n  const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: 0,\n      logger: logEvent,\n    }),\n    [channelId, logEvent],\n  );\n\n  const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n    callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n  }, []);\n\n  const onMessageReceive = useCallback(\n    (messages: Array<IChannelMessage>, initialData?: boolean) => {\n      const strokesPerWidgetMap: Record<string, Array<IActionData>> = {};\n\n      messages.forEach(message => {\n        const { payload } = message.message;\n        const { eventPayload } = payload as IMessage;\n        const qrId = eventPayload?.responseId as string;\n        const strokes = eventPayload?.data;\n        const userId = eventPayload?.userId;\n        const canvasHeight = eventPayload?.height;\n        const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n        if (!initialData && widgetOnReceiveCallback) {\n          widgetOnReceiveCallback({\n            data: strokes,\n            height: canvasHeight,\n            userId,\n            responseId: qrId,\n          });\n        } else {\n          if (qrId && strokesPerWidgetMap[qrId]) {\n            strokesPerWidgetMap[qrId]?.push({\n              userId,\n              data: strokes,\n              height: canvasHeight,\n              responseId: qrId,\n            });\n          } else {\n            strokesPerWidgetMap[qrId] = [\n              {\n                userId,\n                data: strokes,\n                height: canvasHeight,\n                responseId: qrId,\n              },\n            ];\n          }\n        }\n      });\n\n      if (Object.keys(strokesPerWidgetMap).length > 0) {\n        if (initialData) {\n          setInitialStrokesData(strokesPerWidgetMap);\n        } else {\n          setInitialStrokesData(prevData => {\n            const currentData = { ...prevData };\n\n            Object.keys(strokesPerWidgetMap).forEach(key => {\n              if (key && currentData[key]) {\n                currentData[key]?.push(...(strokesPerWidgetMap[key] ?? []));\n              } else {\n                currentData[key] = strokesPerWidgetMap[key] ?? [];\n              }\n            });\n\n            return currentData;\n          });\n        }\n      }\n    },\n    [],\n  );\n\n  const { publish, channelStatus, channel } = useMessageBrokerChannel({\n    channelOptions,\n    consumerFn: onMessageReceive,\n  });\n\n  const closeChannel = useCallback(() => {\n    if (channel) {\n      channel.destroyChannel();\n    }\n  }, [channel]);\n\n  return {\n    publishStrokes: publish,\n    channelStatus,\n    closeChannel,\n    initialStrokesData,\n    registerCallback,\n  };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["useCanvasSyncBroker","channelId","logEvent","initialStrokesData","setInitialStrokesData","useState","callbacksMapRef","useRef","channelOptions","useMemo","registerCallback","useCallback","qrId","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","message","payload","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","_a","prevData","currentData","key","publish","channelStatus","channel","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":";;AAeA,MAAMA,IAAsB,CAC1BC,GACAC,MACG;AACG,QAAA,CAACC,GAAoBC,CAAqB,IAAIC;AAAA,IAClD,CAAC;AAAA,EAAA,GAEGC,IAAkBC,EAAoD,CAAA,CAAE,GAExEC,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,WAAAR;AAAA,MACA,KAAK;AAAA,MACL,QAAQC;AAAA,IAAA;AAAA,IAEV,CAACD,GAAWC,CAAQ;AAAA,EAAA,GAGhBQ,IAAmBC,EAAY,CAACC,GAAcC,MAAoC;AACtE,IAAAP,EAAA,UAAU,EAAE,GAAGA,EAAgB,SAAS,CAACM,CAAI,GAAGC;EAClE,GAAG,CAAE,CAAA,GAECC,IAAmBH;AAAA,IACvB,CAACI,GAAkCC,MAA0B;AAC3D,YAAMC,IAA0D,CAAA;AAEhE,MAAAF,EAAS,QAAQ,CAAWG,MAAA;;AACpB,cAAA,EAAE,SAAAC,EAAQ,IAAID,EAAQ,SACtB,EAAE,cAAAE,EAAiB,IAAAD,GACnBP,IAAOQ,KAAA,gBAAAA,EAAc,YACrBC,IAAUD,KAAA,gBAAAA,EAAc,MACxBE,IAASF,KAAA,gBAAAA,EAAc,QACvBG,IAAeH,KAAA,gBAAAA,EAAc,QAC7BI,IAA0BlB,EAAgB,QAAQM,CAAI;AAExD,QAAA,CAACI,KAAeQ,IACMA,EAAA;AAAA,UACtB,MAAMH;AAAA,UACN,QAAQE;AAAA,UACR,QAAAD;AAAA,UACA,YAAYV;AAAA,QAAA,CACb,IAEGA,KAAQK,EAAoBL,CAAI,KACda,IAAAR,EAAAL,CAAI,MAAJ,QAAAa,EAAO,KAAK;AAAA,UAC9B,QAAAH;AAAA,UACA,MAAMD;AAAA,UACN,QAAQE;AAAA,UACR,YAAYX;AAAA,QAAA,KAGdK,EAAoBL,CAAI,IAAI;AAAA,UAC1B;AAAA,YACE,QAAAU;AAAA,YACA,MAAMD;AAAA,YACN,QAAQE;AAAA,YACR,YAAYX;AAAA,UACd;AAAA,QAAA;AAAA,MAGN,CACD,GAEG,OAAO,KAAKK,CAAmB,EAAE,SAAS,KAE1Cb,EADEY,IACoBC,IAEA,CAAYS,MAAA;AAC1B,cAAAC,IAAc,EAAE,GAAGD;AAEzB,sBAAO,KAAKT,CAAmB,EAAE,QAAQ,CAAOW,MAAA;;AAC1C,UAAAA,KAAOD,EAAYC,CAAG,KACZH,IAAAE,EAAAC,CAAG,MAAH,QAAAH,EAAM,KAAK,GAAIR,EAAoBW,CAAG,KAAK,CAAA,KAEvDD,EAAYC,CAAG,IAAIX,EAAoBW,CAAG,KAAK,CAAA;AAAA,QACjD,CACD,GAEMD;AAAA,MAAA,CAbgC;AAAA,IAiB/C;AAAA,IACA,CAAC;AAAA,EAAA,GAGG,EAAE,SAAAE,GAAS,eAAAC,GAAe,SAAAC,EAAA,IAAYC,EAAwB;AAAA,IAClE,gBAAAxB;AAAA,IACA,YAAYM;AAAA,EAAA,CACb,GAEKmB,IAAetB,EAAY,MAAM;AACrC,IAAIoB,KACFA,EAAQ,eAAe;AAAA,EACzB,GACC,CAACA,CAAO,CAAC;AAEL,SAAA;AAAA,IACL,gBAAgBF;AAAA,IAChB,eAAAC;AAAA,IACA,cAAAG;AAAA,IACA,oBAAA9B;AAAA,IACA,kBAAAO;AAAA,EAAA;AAEJ,GAEAwB,IAAelC;"}
+{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type { IActionData, TCueCanvasChangeDataObject } from '../types/cue-canvas';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\ninterface IMessage {\n  eventName: string;\n  eventPayload: {\n    responseId: string;\n    data: TCueCanvasChangeDataObject;\n    userId: string;\n    height: number;\n  };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n  userId: payload.userId,\n  data: payload.data,\n  height: payload.height,\n  responseId: payload.responseId,\n});\n\nconst useCanvasSyncBroker = (\n  channelId: string,\n  logEvent: (type: string, payload?: Record<string, unknown>) => void,\n  initialCanvasData?: Array<IChannelMessage>,\n) => {\n  const [initialStrokesData, setInitialStrokesData] = useState<Record<string, IActionData[]>>(\n    () => {\n      const map: Record<string, IActionData[]> = {};\n\n      if (!initialCanvasData) return map;\n\n      for (const { message } of initialCanvasData) {\n        const payload = (message.payload as IMessage)?.eventPayload;\n        const qrId = payload?.responseId;\n\n        if (!payload?.responseId) continue;\n\n        const strokeData = extractStrokeData(payload);\n\n        if (qrId && map[qrId]) {\n          map[qrId]?.push(strokeData);\n        } else {\n          map[qrId] = [strokeData];\n        }\n      }\n\n      return map;\n    },\n  );\n  const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: 0,\n      logger: logEvent,\n    }),\n    [channelId, logEvent],\n  );\n\n  const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n    callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n  }, []);\n\n  const onMessageReceive = useCallback(\n    (messages: Array<IChannelMessage>, initialData?: boolean) => {\n      const strokesPerWidgetMap: Record<string, Array<IActionData>> = {};\n\n      messages.forEach(message => {\n        const { payload } = message.message;\n        const { eventPayload } = payload as IMessage;\n        const qrId = eventPayload?.responseId as string;\n        const strokes = eventPayload?.data;\n        const userId = eventPayload?.userId;\n        const canvasHeight = eventPayload?.height;\n        const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n        if (!initialData && widgetOnReceiveCallback) {\n          widgetOnReceiveCallback({\n            data: strokes,\n            height: canvasHeight,\n            userId,\n            responseId: qrId,\n          });\n        } else {\n          const strokeData = extractStrokeData(eventPayload);\n\n          if (qrId && strokesPerWidgetMap[qrId]) {\n            strokesPerWidgetMap[qrId]?.push(strokeData);\n          } else {\n            strokesPerWidgetMap[qrId] = [strokeData];\n          }\n        }\n      });\n\n      if (Object.keys(strokesPerWidgetMap).length > 0) {\n        setInitialStrokesData(prevData => {\n          const currentData = { ...prevData };\n\n          Object.keys(strokesPerWidgetMap).forEach(key => {\n            if (key && currentData[key]) {\n              currentData[key]?.push(...(strokesPerWidgetMap[key] ?? []));\n            } else {\n              currentData[key] = strokesPerWidgetMap[key] ?? [];\n            }\n          });\n\n          return currentData;\n        });\n      }\n    },\n    [],\n  );\n\n  const { publish, channelStatus, channel } = useMessageBrokerChannel({\n    channelOptions,\n    consumerFn: onMessageReceive,\n  });\n\n  const closeChannel = useCallback(() => {\n    if (channel) {\n      channel.destroyChannel();\n    }\n  }, [channel]);\n\n  return {\n    publishStrokes: publish,\n    channelStatus,\n    closeChannel,\n    initialStrokesData,\n    registerCallback,\n  };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","useCanvasSyncBroker","channelId","logEvent","initialCanvasData","initialStrokesData","setInitialStrokesData","useState","map","message","_a","qrId","strokeData","_b","callbacksMapRef","useRef","channelOptions","useMemo","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","prevData","currentData","key","publish","channelStatus","channel","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":"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"}

package/dist/features/trial-session/comps/trial-circle-game/trial-circle-game.js

@@ -3,7 +3,7 @@ import { memo as Q, useRef as X, useState as ee, useMemo as h, useCallback as m,
 import { getTimeStrInFormatHMS as te } from "../../../../helpers/date-time.js";
 import { useWebViewGames as ae } from "../../../circle-games/games/web-view/hooks/use-webview-games.js";
 import { WebView as ie } from "../../../circle-games/games/web-view/web-view.js";
-import b from "../../../ui/layout/flex-view.js";
+import v from "../../../ui/layout/flex-view.js";
 import E from "../../../ui/separator/separator.js";
 import d from "../../../ui/text/text.js";
 import { useTrialSessionContext as oe } from "../../context/use-trial-session-context.js";
@@ -17,7 +17,7 @@ const me = {
   [y.CIRCLE_PUZZLE]: e.PUZZLE,
   [y.CIRCLE_SKILL]: e.LESSON
 }, Pe = Q(() => {
-  const { slideConfig: w, trialGameUrl: j, circleGames: A, formData: k, handleInfoMessage: $, updateSlideConfig: o } = oe(), {
+  const { slideConfig: b, trialGameUrl: j, circleGames: A, formData: k, handleInfoMessage: $, updateSlideConfig: o } = oe(), {
     showCircleGameScreen: g = !0,
     isCircleGamePlayed: u = !1,
     isCirclePuzzleSolved: c = !1,
@@ -25,11 +25,11 @@ const me = {
     accuracyStr: C = "",
     totalTimeTaken: G = 0,
     matchmakingId: f
-  } = k || {}, I = X(null), { playGame: P } = ae({ webViewRef: I }), [T, L] = ee(!0), { header: U, id: M } = w, r = me[M], { circleConfig: O, playerDetails: W } = A, { games: l, puzzles: n, lessons: a } = O ?? {}, _ = h(() => ({
+  } = k || {}, I = X(null), { playGame: P } = ae({ webViewRef: I }), [T, L] = ee(!0), { header: U, id: M } = b, r = me[M], { circleConfig: O, playerDetails: W } = A, { games: l, puzzles: n, lessons: a } = O ?? {}, _ = h(() => ({
     [e.GAME]: u,
     [e.PUZZLE]: c,
     [e.LESSON]: p
-  }), [u, c, p]), Z = h(() => {
+  }), [u, c, p]), w = h(() => {
     const i = {
       [e.GAME]: u ? l.game_card : l.tutorial,
       [e.PUZZLE]: c ? n.game_card : n.tutorial,
@@ -47,12 +47,12 @@ const me = {
     u,
     c,
     p
-  ]), x = h(() => r === e.PUZZLE && c ? "You've solved it!" : "", [r, c]), { circle_username: D, userId: H, grade: N, user_avatar: R, playerType: v } = W ?? {}, z = {
+  ]), x = h(() => r === e.PUZZLE && c ? "You've solved it!" : "", [r, c]), { circle_username: D, userId: H, grade: N, user_avatar: R, playerType: Z } = W ?? {}, z = {
     id: H,
     username: D,
     grade: N,
     avatar: R,
-    playerType: v
+    playerType: Z
   }, F = h(() => {
     const i = {
       joinByRoomId: f,
@@ -107,13 +107,13 @@ const me = {
     },
     [o, r]
   ), J = m(() => C && G ? /* @__PURE__ */ s(K, { children: [
-    /* @__PURE__ */ s(b, { $flexDirection: "row", children: [
+    /* @__PURE__ */ s(v, { $flexDirection: "row", children: [
       /* @__PURE__ */ t(d, { $renderAs: "ab2", $color: "WHITE", children: "Finished in" }),
       /* @__PURE__ */ t(E, { width: 5 }),
       /* @__PURE__ */ t(d, { $renderAs: "ab2-bold", $color: "WHITE", children: te(G) })
     ] }),
     /* @__PURE__ */ t(E, { height: 20 }),
-    /* @__PURE__ */ s(b, { $flexDirection: "row", children: [
+    /* @__PURE__ */ s(v, { $flexDirection: "row", children: [
       /* @__PURE__ */ t(d, { $renderAs: "ab2", $color: "WHITE", children: "Accuracy:" }),
       /* @__PURE__ */ t(E, { width: 5 }),
       /* @__PURE__ */ t(d, { $renderAs: "ab2-bold", $color: "WHITE", children: C })
@@ -128,10 +128,10 @@ const me = {
       g && /* @__PURE__ */ t(se, { children: /* @__PURE__ */ t(
         ne,
         {
-          assetUrl: Z,
-          assetUrlType: Z.endsWith("mp4") ? "video" : "lottie",
+          assetUrl: w,
+          assetUrlType: w.endsWith("mp4") ? "video" : "lottie",
           descriptionHeader: x,
-          playerType: v,
+          playerType: Z,
           isLoading: T,
           isGamePlayed: (r && _[r]) ?? !1,
           onPlay: q,
@@ -151,7 +151,8 @@ const me = {
           onGameLoad: B,
           onBack: V,
           handleInfoMessage: $,
-          onGamePlayFinish: Y
+          onGamePlayFinish: Y,
+          parentDomain: window.location.origin
         },
         f
       )

package/dist/features/trial-session/comps/trial-circle-game/trial-circle-game.js.map

@@ -1 +1 @@
-{"version":3,"file":"trial-circle-game.js","sources":["../../../../../src/features/trial-session/comps/trial-circle-game/trial-circle-game.tsx"],"sourcesContent":["import type { GameId, LessonId, PuzzleId } from '../../../circle-games/games/web-view/enums';\nimport type {\n  ILessonWebGameProps,\n  IMultiplayerWebGameProps,\n  IPlayer,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n} from '../../../circle-games/games/web-view/web-view-types';\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { getTimeStrInFormatHMS } from '../../../../helpers/date-time';\nimport { ProjectType } from '../../../circle-games/games/web-view/enums';\nimport { useWebViewGames } from '../../../circle-games/games/web-view/hooks/use-webview-games';\nimport { WebView } from '../../../circle-games/games/web-view/web-view';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport { TrialPageId } from '../../trial-session-constants';\nimport { TrialCircleGameLaunchScreen } from './trial-circle-game-launch-screen/trial-circle-game-launch-screen';\nimport * as Styled from './trial-circle-game-styled';\n\nconst PROJECT_TYPE_MAP: Partial<Record<TrialPageId, ProjectType>> = {\n  [TrialPageId.CIRCLE_GAME]: ProjectType.GAME,\n  [TrialPageId.CIRCLE_PUZZLE]: ProjectType.PUZZLE,\n  [TrialPageId.CIRCLE_SKILL]: ProjectType.LESSON,\n};\n\nconst TrialCircleGame = memo(() => {\n  const { slideConfig, trialGameUrl, circleGames, formData, handleInfoMessage, updateSlideConfig } =\n    useTrialSessionContext();\n  const {\n    showCircleGameScreen = true,\n    isCircleGamePlayed = false,\n    isCirclePuzzleSolved = false,\n    isCircleSkillCompleted = false,\n    accuracyStr = '',\n    totalTimeTaken = 0,\n    matchmakingId,\n  } = formData || {};\n  const webViewRef = useRef<HTMLIFrameElement>(null);\n  const { playGame } = useWebViewGames({ webViewRef });\n  const [isLoading, setIsLoading] = useState(true);\n\n  const { header, id } = slideConfig;\n  const projectType = PROJECT_TYPE_MAP[id];\n  const { circleConfig, playerDetails } = circleGames;\n  const { games, puzzles, lessons } = circleConfig ?? {};\n\n  const isPlayed = useMemo(() => {\n    const playedStats: Record<ProjectType, boolean> = {\n      [ProjectType.GAME]: isCircleGamePlayed,\n      [ProjectType.PUZZLE]: isCirclePuzzleSolved,\n      [ProjectType.LESSON]: isCircleSkillCompleted,\n    };\n\n    return playedStats;\n  }, [isCircleGamePlayed, isCirclePuzzleSolved, isCircleSkillCompleted]);\n\n  const assetUrl = useMemo(() => {\n    const url: Record<ProjectType, string> = {\n      [ProjectType.GAME]: isCircleGamePlayed ? games.game_card : games.tutorial,\n      [ProjectType.PUZZLE]: isCirclePuzzleSolved ? puzzles.game_card : puzzles.tutorial,\n      [ProjectType.LESSON]: isCircleSkillCompleted ? lessons.game_card : lessons.tutorial,\n    };\n\n    return projectType ? url[projectType] : '';\n  }, [\n    projectType,\n    games.game_card,\n    games.tutorial,\n    puzzles.game_card,\n    puzzles.tutorial,\n    lessons.game_card,\n    lessons.tutorial,\n    isCircleGamePlayed,\n    isCirclePuzzleSolved,\n    isCircleSkillCompleted,\n  ]);\n\n  const descriptionHeader = useMemo(() => {\n    if (projectType === ProjectType.PUZZLE && isCirclePuzzleSolved) {\n      return \"You've solved it!\";\n    }\n\n    return '';\n  }, [projectType, isCirclePuzzleSolved]);\n\n  const { circle_username, userId, grade, user_avatar, playerType } = playerDetails ?? {};\n\n  const playerData: IPlayer = {\n    id: userId,\n    username: circle_username,\n    grade: grade,\n    avatar: user_avatar,\n    playerType,\n  };\n\n  const projectDetails = useMemo(() => {\n    const commonConfig = {\n      joinByRoomId: matchmakingId,\n      enableCloseButton: false,\n      enablePlayerTurnIndicators: true,\n      enableSync: true,\n    };\n\n    if (projectType === ProjectType.GAME) {\n      return {\n        ...commonConfig,\n        projectId: games.project_id as GameId,\n        variant: games.variant,\n        projectType: ProjectType.GAME,\n      } as IMultiplayerWebGameProps;\n    }\n\n    if (projectType === ProjectType.PUZZLE) {\n      return {\n        ...commonConfig,\n        projectId: puzzles.project_id as PuzzleId,\n        variant: puzzles.variant,\n        question: puzzles.question,\n        askHintPermission: false,\n        projectType: ProjectType.PUZZLE,\n      } as IPuzzleWebGameProps;\n    }\n\n    return {\n      ...commonConfig,\n      projectId: lessons.project_id as LessonId,\n      variant: lessons.variant,\n      miniGameIdentifier: lessons.mini_game_identifier,\n      sessionId: lessons.session_id,\n      targetQuestions: lessons.target_questions,\n      projectType: ProjectType.LESSON,\n    } as ILessonWebGameProps;\n\n    // return commonConfig;\n  }, [games, puzzles, lessons, projectType, matchmakingId]);\n\n  const onGameLoad = useCallback(() => {\n    setIsLoading(false);\n  }, []);\n\n  const handleBack = useCallback(() => {\n    setIsLoading(true);\n    if (\n      projectType === ProjectType.GAME ||\n      projectType === ProjectType.PUZZLE ||\n      projectType === ProjectType.LESSON\n    ) {\n      updateSlideConfig({ showCircleGameScreen: true, matchmakingId: uuidv4() });\n    }\n  }, [projectType, updateSlideConfig]);\n\n  const onPlay = useCallback(() => {\n    updateSlideConfig({ showCircleGameScreen: false, accuracyStr: '', totalTimeTaken: 0 });\n  }, [updateSlideConfig]);\n\n  const handleGameFinish = useCallback(\n    (playerStats: IPlayerStats) => {\n      setIsLoading(true);\n      if (projectType === ProjectType.LESSON) {\n        updateSlideConfig({\n          accuracyStr: playerStats.value,\n          totalTimeTaken: playerStats.timeSpent,\n          isCircleSkillCompleted: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      } else if (projectType === ProjectType.GAME) {\n        updateSlideConfig({\n          isCircleGamePlayed: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      } else if (projectType === ProjectType.PUZZLE) {\n        updateSlideConfig({\n          isCirclePuzzleSolved: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      }\n    },\n    [updateSlideConfig, projectType],\n  );\n\n  const getCustEle = useCallback(() => {\n    if (accuracyStr && totalTimeTaken) {\n      return (\n        <>\n          <FlexView $flexDirection=\"row\">\n            <Text $renderAs=\"ab2\" $color=\"WHITE\">\n              Finished in\n            </Text>\n            <Separator width={5} />\n            <Text $renderAs=\"ab2-bold\" $color=\"WHITE\">\n              {getTimeStrInFormatHMS(totalTimeTaken)}\n            </Text>\n          </FlexView>\n          <Separator height={20} />\n          <FlexView $flexDirection=\"row\">\n            <Text $renderAs=\"ab2\" $color=\"WHITE\">\n              Accuracy:\n            </Text>\n            <Separator width={5} />\n            <Text $renderAs=\"ab2-bold\" $color=\"WHITE\">\n              {accuracyStr}\n            </Text>\n          </FlexView>\n        </>\n      );\n    }\n\n    return null;\n  }, [accuracyStr, totalTimeTaken]);\n\n  useEffect(() => {\n    if (!isLoading && !showCircleGameScreen) {\n      playGame();\n    }\n  }, [showCircleGameScreen, playGame, isLoading]);\n\n  return (\n    <Styled.GameContainer>\n      <Separator height={16} />\n      <Text $renderAs=\"ah3-bold\" $color=\"WHITE_T_87\" $align=\"center\" $marginBottom={16}>\n        {header}\n      </Text>\n      <Styled.GameWrapper>\n        {showCircleGameScreen && (\n          <Styled.GameLaunchOverlay>\n            <TrialCircleGameLaunchScreen\n              assetUrl={assetUrl}\n              assetUrlType={assetUrl.endsWith('mp4') ? 'video' : 'lottie'}\n              descriptionHeader={descriptionHeader}\n              playerType={playerType}\n              isLoading={isLoading}\n              isGamePlayed={(projectType && isPlayed[projectType]) ?? false}\n              onPlay={onPlay}\n              custEle={projectType === ProjectType.LESSON ? getCustEle() : undefined}\n              celebrationText={projectType && isPlayed[projectType] ? 'WELL DONE!' : ''}\n            />\n          </Styled.GameLaunchOverlay>\n        )}\n        {matchmakingId && (\n          <WebView\n            key={matchmakingId}\n            ref={webViewRef}\n            height=\"100%\"\n            width=\"100%\"\n            baseUrl={trialGameUrl}\n            playerDetails={playerData}\n            projectDetails={projectDetails}\n            onGameLoad={onGameLoad}\n            onBack={handleBack}\n            handleInfoMessage={handleInfoMessage}\n            onGamePlayFinish={handleGameFinish}\n          />\n        )}\n      </Styled.GameWrapper>\n    </Styled.GameContainer>\n  );\n});\n\nexport default TrialCircleGame;\n"],"names":["PROJECT_TYPE_MAP","TrialPageId","ProjectType","TrialCircleGame","memo","slideConfig","trialGameUrl","circleGames","formData","handleInfoMessage","updateSlideConfig","useTrialSessionContext","showCircleGameScreen","isCircleGamePlayed","isCirclePuzzleSolved","isCircleSkillCompleted","accuracyStr","totalTimeTaken","matchmakingId","webViewRef","useRef","playGame","useWebViewGames","isLoading","setIsLoading","useState","header","id","projectType","circleConfig","playerDetails","games","puzzles","lessons","isPlayed","useMemo","assetUrl","url","descriptionHeader","circle_username","userId","grade","user_avatar","playerType","playerData","projectDetails","commonConfig","onGameLoad","useCallback","handleBack","uuidv4","onPlay","handleGameFinish","playerStats","getCustEle","jsxs","Fragment","FlexView","jsx","Text","Separator","getTimeStrInFormatHMS","useEffect","Styled.GameContainer","Styled.GameWrapper","Styled.GameLaunchOverlay","TrialCircleGameLaunchScreen","WebView"],"mappings":"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"}
+{"version":3,"file":"trial-circle-game.js","sources":["../../../../../src/features/trial-session/comps/trial-circle-game/trial-circle-game.tsx"],"sourcesContent":["import type { GameId, LessonId, PuzzleId } from '../../../circle-games/games/web-view/enums';\nimport type {\n  ILessonWebGameProps,\n  IMultiplayerWebGameProps,\n  IPlayer,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n} from '../../../circle-games/games/web-view/web-view-types';\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { getTimeStrInFormatHMS } from '../../../../helpers/date-time';\nimport { ProjectType } from '../../../circle-games/games/web-view/enums';\nimport { useWebViewGames } from '../../../circle-games/games/web-view/hooks/use-webview-games';\nimport { WebView } from '../../../circle-games/games/web-view/web-view';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport { TrialPageId } from '../../trial-session-constants';\nimport { TrialCircleGameLaunchScreen } from './trial-circle-game-launch-screen/trial-circle-game-launch-screen';\nimport * as Styled from './trial-circle-game-styled';\n\nconst PROJECT_TYPE_MAP: Partial<Record<TrialPageId, ProjectType>> = {\n  [TrialPageId.CIRCLE_GAME]: ProjectType.GAME,\n  [TrialPageId.CIRCLE_PUZZLE]: ProjectType.PUZZLE,\n  [TrialPageId.CIRCLE_SKILL]: ProjectType.LESSON,\n};\n\nconst TrialCircleGame = memo(() => {\n  const { slideConfig, trialGameUrl, circleGames, formData, handleInfoMessage, updateSlideConfig } =\n    useTrialSessionContext();\n  const {\n    showCircleGameScreen = true,\n    isCircleGamePlayed = false,\n    isCirclePuzzleSolved = false,\n    isCircleSkillCompleted = false,\n    accuracyStr = '',\n    totalTimeTaken = 0,\n    matchmakingId,\n  } = formData || {};\n  const webViewRef = useRef<HTMLIFrameElement>(null);\n  const { playGame } = useWebViewGames({ webViewRef });\n  const [isLoading, setIsLoading] = useState(true);\n\n  const { header, id } = slideConfig;\n  const projectType = PROJECT_TYPE_MAP[id];\n  const { circleConfig, playerDetails } = circleGames;\n  const { games, puzzles, lessons } = circleConfig ?? {};\n\n  const isPlayed = useMemo(() => {\n    const playedStats: Record<ProjectType, boolean> = {\n      [ProjectType.GAME]: isCircleGamePlayed,\n      [ProjectType.PUZZLE]: isCirclePuzzleSolved,\n      [ProjectType.LESSON]: isCircleSkillCompleted,\n    };\n\n    return playedStats;\n  }, [isCircleGamePlayed, isCirclePuzzleSolved, isCircleSkillCompleted]);\n\n  const assetUrl = useMemo(() => {\n    const url: Record<ProjectType, string> = {\n      [ProjectType.GAME]: isCircleGamePlayed ? games.game_card : games.tutorial,\n      [ProjectType.PUZZLE]: isCirclePuzzleSolved ? puzzles.game_card : puzzles.tutorial,\n      [ProjectType.LESSON]: isCircleSkillCompleted ? lessons.game_card : lessons.tutorial,\n    };\n\n    return projectType ? url[projectType] : '';\n  }, [\n    projectType,\n    games.game_card,\n    games.tutorial,\n    puzzles.game_card,\n    puzzles.tutorial,\n    lessons.game_card,\n    lessons.tutorial,\n    isCircleGamePlayed,\n    isCirclePuzzleSolved,\n    isCircleSkillCompleted,\n  ]);\n\n  const descriptionHeader = useMemo(() => {\n    if (projectType === ProjectType.PUZZLE && isCirclePuzzleSolved) {\n      return \"You've solved it!\";\n    }\n\n    return '';\n  }, [projectType, isCirclePuzzleSolved]);\n\n  const { circle_username, userId, grade, user_avatar, playerType } = playerDetails ?? {};\n\n  const playerData: IPlayer = {\n    id: userId,\n    username: circle_username,\n    grade: grade,\n    avatar: user_avatar,\n    playerType,\n  };\n\n  const projectDetails = useMemo(() => {\n    const commonConfig = {\n      joinByRoomId: matchmakingId,\n      enableCloseButton: false,\n      enablePlayerTurnIndicators: true,\n      enableSync: true,\n    };\n\n    if (projectType === ProjectType.GAME) {\n      return {\n        ...commonConfig,\n        projectId: games.project_id as GameId,\n        variant: games.variant,\n        projectType: ProjectType.GAME,\n      } as IMultiplayerWebGameProps;\n    }\n\n    if (projectType === ProjectType.PUZZLE) {\n      return {\n        ...commonConfig,\n        projectId: puzzles.project_id as PuzzleId,\n        variant: puzzles.variant,\n        question: puzzles.question,\n        askHintPermission: false,\n        projectType: ProjectType.PUZZLE,\n      } as IPuzzleWebGameProps;\n    }\n\n    return {\n      ...commonConfig,\n      projectId: lessons.project_id as LessonId,\n      variant: lessons.variant,\n      miniGameIdentifier: lessons.mini_game_identifier,\n      sessionId: lessons.session_id,\n      targetQuestions: lessons.target_questions,\n      projectType: ProjectType.LESSON,\n    } as ILessonWebGameProps;\n\n    // return commonConfig;\n  }, [games, puzzles, lessons, projectType, matchmakingId]);\n\n  const onGameLoad = useCallback(() => {\n    setIsLoading(false);\n  }, []);\n\n  const handleBack = useCallback(() => {\n    setIsLoading(true);\n    if (\n      projectType === ProjectType.GAME ||\n      projectType === ProjectType.PUZZLE ||\n      projectType === ProjectType.LESSON\n    ) {\n      updateSlideConfig({ showCircleGameScreen: true, matchmakingId: uuidv4() });\n    }\n  }, [projectType, updateSlideConfig]);\n\n  const onPlay = useCallback(() => {\n    updateSlideConfig({ showCircleGameScreen: false, accuracyStr: '', totalTimeTaken: 0 });\n  }, [updateSlideConfig]);\n\n  const handleGameFinish = useCallback(\n    (playerStats: IPlayerStats) => {\n      setIsLoading(true);\n      if (projectType === ProjectType.LESSON) {\n        updateSlideConfig({\n          accuracyStr: playerStats.value,\n          totalTimeTaken: playerStats.timeSpent,\n          isCircleSkillCompleted: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      } else if (projectType === ProjectType.GAME) {\n        updateSlideConfig({\n          isCircleGamePlayed: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      } else if (projectType === ProjectType.PUZZLE) {\n        updateSlideConfig({\n          isCirclePuzzleSolved: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      }\n    },\n    [updateSlideConfig, projectType],\n  );\n\n  const getCustEle = useCallback(() => {\n    if (accuracyStr && totalTimeTaken) {\n      return (\n        <>\n          <FlexView $flexDirection=\"row\">\n            <Text $renderAs=\"ab2\" $color=\"WHITE\">\n              Finished in\n            </Text>\n            <Separator width={5} />\n            <Text $renderAs=\"ab2-bold\" $color=\"WHITE\">\n              {getTimeStrInFormatHMS(totalTimeTaken)}\n            </Text>\n          </FlexView>\n          <Separator height={20} />\n          <FlexView $flexDirection=\"row\">\n            <Text $renderAs=\"ab2\" $color=\"WHITE\">\n              Accuracy:\n            </Text>\n            <Separator width={5} />\n            <Text $renderAs=\"ab2-bold\" $color=\"WHITE\">\n              {accuracyStr}\n            </Text>\n          </FlexView>\n        </>\n      );\n    }\n\n    return null;\n  }, [accuracyStr, totalTimeTaken]);\n\n  useEffect(() => {\n    if (!isLoading && !showCircleGameScreen) {\n      playGame();\n    }\n  }, [showCircleGameScreen, playGame, isLoading]);\n\n  return (\n    <Styled.GameContainer>\n      <Separator height={16} />\n      <Text $renderAs=\"ah3-bold\" $color=\"WHITE_T_87\" $align=\"center\" $marginBottom={16}>\n        {header}\n      </Text>\n      <Styled.GameWrapper>\n        {showCircleGameScreen && (\n          <Styled.GameLaunchOverlay>\n            <TrialCircleGameLaunchScreen\n              assetUrl={assetUrl}\n              assetUrlType={assetUrl.endsWith('mp4') ? 'video' : 'lottie'}\n              descriptionHeader={descriptionHeader}\n              playerType={playerType}\n              isLoading={isLoading}\n              isGamePlayed={(projectType && isPlayed[projectType]) ?? false}\n              onPlay={onPlay}\n              custEle={projectType === ProjectType.LESSON ? getCustEle() : undefined}\n              celebrationText={projectType && isPlayed[projectType] ? 'WELL DONE!' : ''}\n            />\n          </Styled.GameLaunchOverlay>\n        )}\n        {matchmakingId && (\n          <WebView\n            key={matchmakingId}\n            ref={webViewRef}\n            height=\"100%\"\n            width=\"100%\"\n            baseUrl={trialGameUrl}\n            playerDetails={playerData}\n            projectDetails={projectDetails}\n            onGameLoad={onGameLoad}\n            onBack={handleBack}\n            handleInfoMessage={handleInfoMessage}\n            onGamePlayFinish={handleGameFinish}\n            parentDomain={window.location.origin}\n          />\n        )}\n      </Styled.GameWrapper>\n    </Styled.GameContainer>\n  );\n});\n\nexport default TrialCircleGame;\n"],"names":["PROJECT_TYPE_MAP","TrialPageId","ProjectType","TrialCircleGame","memo","slideConfig","trialGameUrl","circleGames","formData","handleInfoMessage","updateSlideConfig","useTrialSessionContext","showCircleGameScreen","isCircleGamePlayed","isCirclePuzzleSolved","isCircleSkillCompleted","accuracyStr","totalTimeTaken","matchmakingId","webViewRef","useRef","playGame","useWebViewGames","isLoading","setIsLoading","useState","header","id","projectType","circleConfig","playerDetails","games","puzzles","lessons","isPlayed","useMemo","assetUrl","url","descriptionHeader","circle_username","userId","grade","user_avatar","playerType","playerData","projectDetails","commonConfig","onGameLoad","useCallback","handleBack","uuidv4","onPlay","handleGameFinish","playerStats","getCustEle","jsxs","Fragment","FlexView","jsx","Text","Separator","getTimeStrInFormatHMS","useEffect","Styled.GameContainer","Styled.GameWrapper","Styled.GameLaunchOverlay","TrialCircleGameLaunchScreen","WebView"],"mappings":"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"}

package/dist/features/ui/grade-selector/grade-tab.js

@@ -1,27 +1,27 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useCallback as n } from "react";
-import p from "../tab/tab.js";
+import { jsx as m } from "react/jsx-runtime";
+import { useCallback as c } from "react";
+import d from "../tab/tab.js";
 const u = ({
-  renderAs: o = "primary",
-  size: t = "regular",
-  label: a,
+  renderAs: a = "primary",
+  size: o = "regular",
+  label: t,
   selected: i,
-  width: m,
+  width: s,
   onSelect: r,
   grade: e
 }) => {
-  const s = n(() => {
+  const l = c(() => {
     r(e);
   }, [e, r]);
-  return /* @__PURE__ */ l(
-    p,
+  return /* @__PURE__ */ m(
+    d,
     {
-      label: a,
+      label: t,
       $selected: i,
-      $width: m,
-      $renderAs: o,
-      $size: t,
-      onClick: s
+      $width: s,
+      $renderAs: a,
+      $size: o,
+      onClick: l
     }
   );
 };