@cuemath/leap 2.9.7 → 2.9.9-as1

package/dist/features/chapters-v2/utils/node-card-utils.js

@@ -0,0 +1,177 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import I from "../../../assets/line-icons/icons/alarm.js";
+import f from "../../../assets/line-icons/icons/bulb2.js";
+import T from "../../../assets/line-icons/icons/check2.js";
+import u from "../../../assets/line-icons/icons/dart.js";
+import R from "../../../assets/line-icons/icons/exclamation.js";
+import A from "../../../assets/line-icons/icons/lock2.js";
+import h from "../../../assets/line-icons/icons/play2.js";
+import $ from "../../../assets/line-icons/icons/puzzle.js";
+import g from "../../../assets/line-icons/icons/recap.js";
+import D from "../../../assets/line-icons/icons/status.js";
+import C from "../../../assets/line-icons/icons/testtube.js";
+import { LOTTIE as t } from "../../../assets/lottie/lottie.js";
+import S from "../../ui/layout/flex-view.js";
+import a from "../../ui/arrow-tooltip/arrow-tooltip.js";
+import d from "../../ui/text/text.js";
+import { InProgressIconWrapper as l } from "../comps/node-card/node-card-styled.js";
+import E from "../comps/tag/tag.js";
+const P = 60 * 60 * 24, b = ["NOT_STARTED", "IN_PROGRESS"], O = (o) => {
+  if (!o)
+    return { isOverdue: !1, daysText: "", differenceInDays: 0 };
+  const i = Math.floor(Date.now() / 1e3), c = o - i, n = Math.ceil(c / P), s = n < 0, r = n > 0 ? `${Math.abs(n)}D` : "";
+  return { isOverdue: s, daysText: r, differenceInDays: n };
+}, B = (o, i, c, n) => {
+  const { isOverdue: s, daysText: r, differenceInDays: m } = O(n);
+  if (s && b.includes(o))
+    return {
+      icon: /* @__PURE__ */ e(
+        a,
+        {
+          renderAs: "primary",
+          position: "bottom",
+          tooltipItem: "Complete now",
+          zIndex: 10,
+          hidden: !i,
+          parentWidth: "fit-content",
+          children: /* @__PURE__ */ e(S, { $background: "RED", $borderRadius: 16, $gapX: 0.24, $gutterX: 0.5, children: /* @__PURE__ */ e(d, { $renderAs: "ac4-black", $color: "WHITE", children: "OVERDUE" }) })
+        }
+      ),
+      top: -10,
+      right: -10
+    };
+  switch (o) {
+    case "NOT_STARTED":
+      return {
+        icon: /* @__PURE__ */ e(
+          a,
+          {
+            renderAs: "primary",
+            position: "bottom",
+            tooltipItem: m > 1 ? `${m} days left` : "Complete it today",
+            zIndex: 10,
+            hidden: !i,
+            children: /* @__PURE__ */ e(
+              l,
+              {
+                $flexDirection: "row",
+                $alignItems: "center",
+                $justifyContent: "center",
+                $borderRadius: 16,
+                $paddingRight: 6,
+                $paddingLeft: 6,
+                children: r && /* @__PURE__ */ e(d, { $renderAs: "ub3-bold", $color: "WHITE", children: r })
+              }
+            )
+          }
+        ),
+        top: 0,
+        right: 0
+      };
+    case "LOCKED":
+      return {
+        icon: /* @__PURE__ */ e(A, { width: 32, height: 32 }),
+        top: -12,
+        right: -12
+      };
+    case "IN_PROGRESS":
+      return {
+        icon: /* @__PURE__ */ p(
+          l,
+          {
+            $flexDirection: "row",
+            $alignItems: "center",
+            $justifyContent: "center",
+            $borderRadius: 16,
+            $paddingRight: 0,
+            $paddingLeft: r ? 6 : 0,
+            children: [
+              r && /* @__PURE__ */ e(d, { $renderAs: "ub3-bold", $color: "WHITE", children: r }),
+              /* @__PURE__ */ e(D, {})
+            ]
+          }
+        )
+      };
+    case "COMPLETED":
+      return {
+        icon: /* @__PURE__ */ e(
+          E,
+          {
+            Icon: T,
+            label: typeof c == "number" ? `${c}%` : void 0
+          }
+        ),
+        top: -10,
+        right: -10
+      };
+    case "WAIT_FOR_REVIEW":
+      return {
+        icon: /* @__PURE__ */ e(
+          a,
+          {
+            renderAs: "primary",
+            position: "bottom",
+            tooltipItem: i ? "Waiting for teacher to review" : "Needs your review",
+            zIndex: 10,
+            children: /* @__PURE__ */ e(E, { Icon: R })
+          }
+        ),
+        top: -10,
+        right: -10
+      };
+    default:
+      return {
+        icon: void 0
+      };
+  }
+}, X = (o) => {
+  switch (o) {
+    case "LEARNING":
+      return {
+        lottie: t.LEARN,
+        icon: f
+      };
+    case "RECAP":
+      return {
+        lottie: t.RECAP,
+        icon: g
+      };
+    case "DYNAMIC":
+    case "ASSESSMENT":
+    case "CHAPTER_ASSESSMENT":
+      return {
+        lottie: t.TEST,
+        icon: I
+      };
+    case "PRACTICE":
+    case "EXTRA_PRACTICE":
+    case "TARGET_PRACTICE":
+    case "MASTERY":
+      return {
+        lottie: t.PRACTICE,
+        icon: u
+      };
+    case "PUZZLE_EASY":
+    case "PUZZLE_MEDIUM":
+    case "PUZZLE_HARD":
+      return {
+        lottie: t.PUZZLE,
+        icon: $
+      };
+    case "VIDEO":
+      return {
+        lottie: t.VIDEO,
+        icon: h
+      };
+    default:
+      return {
+        lottie: t.PROJECT,
+        icon: C
+      };
+  }
+};
+export {
+  X as getNodeCardBasedIcon,
+  B as getNodeStateBasedTagInfo
+};
+//# sourceMappingURL=node-card-utils.js.map

package/dist/features/chapters-v2/utils/node-card-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-card-utils.js","sources":["../../../../src/features/chapters-v2/utils/node-card-utils.tsx"],"sourcesContent":["import type { INodeDataProps } from '../comps/node-card/node-card-types';\n\nimport AlarmIcon from '../../../assets/line-icons/icons/alarm';\nimport Bulb2Icon from '../../../assets/line-icons/icons/bulb2';\nimport Check2Icon from '../../../assets/line-icons/icons/check2';\nimport DartIcon from '../../../assets/line-icons/icons/dart';\nimport ExclamationIcon from '../../../assets/line-icons/icons/exclamation';\nimport Lock2Icon from '../../../assets/line-icons/icons/lock2';\nimport Play2Icon from '../../../assets/line-icons/icons/play2';\nimport PuzzleIcon from '../../../assets/line-icons/icons/puzzle';\nimport RecapIcon from '../../../assets/line-icons/icons/recap';\nimport StatusIcon from '../../../assets/line-icons/icons/status';\nimport TestTubeIcon from '../../../assets/line-icons/icons/testtube';\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport FlexView from '../..//ui/layout/flex-view';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport Text from '../../ui/text/text';\nimport { InProgressIconWrapper } from '../comps/node-card/node-card-styled';\nimport Tag from '../comps/tag/tag';\n\ninterface DueDateInfo {\n  isOverdue: boolean;\n  daysText: string;\n  differenceInDays: number;\n}\n\nconst SECONDS_PER_DAY = 60 * 60 * 24;\nconst OVERDUE_TAG_STATES: INodeDataProps['state'][] = ['NOT_STARTED', 'IN_PROGRESS'];\n\nconst calculateDueDateInfo = (dueDateTs?: number | null): DueDateInfo => {\n  if (!dueDateTs) {\n    return { isOverdue: false, daysText: '', differenceInDays: 0 };\n  }\n\n  const currentTimestamp = Math.floor(Date.now() / 1000);\n  const differenceInSeconds = dueDateTs - currentTimestamp;\n  const differenceInDays = Math.ceil(differenceInSeconds / SECONDS_PER_DAY);\n\n  const isOverdue = differenceInDays < 0;\n\n  const daysText = differenceInDays > 0 ? `${Math.abs(differenceInDays)}D` : '';\n\n  return { isOverdue, daysText, differenceInDays };\n};\n\nconst getNodeStateBasedTagInfo = (\n  nodeState: INodeDataProps['state'],\n  isStudent: boolean,\n  accuracy?: number | null,\n  dueDateTs?: number | null,\n) => {\n  const { isOverdue, daysText, differenceInDays } = calculateDueDateInfo(dueDateTs);\n\n  if (isOverdue && OVERDUE_TAG_STATES.includes(nodeState)) {\n    return {\n      icon: (\n        <ArrowTooltip\n          renderAs=\"primary\"\n          position=\"bottom\"\n          tooltipItem=\"Complete now\"\n          zIndex={10}\n          hidden={!isStudent}\n          parentWidth=\"fit-content\"\n        >\n          <FlexView $background=\"RED\" $borderRadius={16} $gapX={0.24} $gutterX={0.5}>\n            <Text $renderAs=\"ac4-black\" $color=\"WHITE\">\n              OVERDUE\n            </Text>\n          </FlexView>\n        </ArrowTooltip>\n      ),\n      top: -10,\n      right: -10,\n    };\n  }\n\n  switch (nodeState) {\n    case 'NOT_STARTED':\n      return {\n        icon: (\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={\n              differenceInDays > 1 ? `${differenceInDays} days left` : 'Complete it today'\n            }\n            zIndex={10}\n            hidden={!isStudent}\n          >\n            <InProgressIconWrapper\n              $flexDirection=\"row\"\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n              $borderRadius={16}\n              $paddingRight={6}\n              $paddingLeft={6}\n            >\n              {daysText && (\n                <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n                  {daysText}\n                </Text>\n              )}\n            </InProgressIconWrapper>\n          </ArrowTooltip>\n        ),\n        top: 0,\n        right: 0,\n      };\n    case 'LOCKED':\n      return {\n        icon: <Lock2Icon width={32} height={32} />,\n        top: -12,\n        right: -12,\n      };\n    case 'IN_PROGRESS':\n      return {\n        icon: (\n          <InProgressIconWrapper\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n            $borderRadius={16}\n            $paddingRight={0}\n            $paddingLeft={daysText ? 6 : 0}\n          >\n            {daysText && (\n              <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n                {daysText}\n              </Text>\n            )}\n            <StatusIcon />\n          </InProgressIconWrapper>\n        ),\n      };\n    case 'COMPLETED':\n      return {\n        icon: (\n          <Tag\n            Icon={Check2Icon}\n            label={typeof accuracy === 'number' ? `${accuracy}%` : undefined}\n          />\n        ),\n        top: -10,\n        right: -10,\n      };\n    case 'WAIT_FOR_REVIEW':\n      return {\n        icon: (\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={isStudent ? 'Waiting for teacher to review' : 'Needs your review'}\n            zIndex={10}\n          >\n            <Tag Icon={ExclamationIcon} />\n          </ArrowTooltip>\n        ),\n        top: -10,\n        right: -10,\n      };\n\n    default:\n      return {\n        icon: undefined,\n      };\n  }\n};\n\nconst getNodeCardBasedIcon = (nodeType: INodeDataProps['node_type']) => {\n  switch (nodeType) {\n    case 'LEARNING':\n      return {\n        lottie: LOTTIE.LEARN,\n        icon: Bulb2Icon,\n      };\n    case 'RECAP':\n      return {\n        lottie: LOTTIE.RECAP,\n        icon: RecapIcon,\n      };\n    case 'DYNAMIC':\n    case 'ASSESSMENT':\n    case 'CHAPTER_ASSESSMENT':\n      return {\n        lottie: LOTTIE.TEST,\n        icon: AlarmIcon,\n      };\n    case 'PRACTICE':\n    case 'EXTRA_PRACTICE':\n    case 'TARGET_PRACTICE':\n    case 'MASTERY':\n      return {\n        lottie: LOTTIE.PRACTICE,\n        icon: DartIcon,\n      };\n    case 'PUZZLE_EASY':\n    case 'PUZZLE_MEDIUM':\n    case 'PUZZLE_HARD':\n      return {\n        lottie: LOTTIE.PUZZLE,\n        icon: PuzzleIcon,\n      };\n    case 'VIDEO':\n      return {\n        lottie: LOTTIE.VIDEO,\n        icon: Play2Icon,\n      };\n    default:\n      return {\n        lottie: LOTTIE.PROJECT,\n        icon: TestTubeIcon,\n      };\n  }\n};\n\nexport { getNodeStateBasedTagInfo, getNodeCardBasedIcon };\n"],"names":["SECONDS_PER_DAY","OVERDUE_TAG_STATES","calculateDueDateInfo","dueDateTs","currentTimestamp","differenceInSeconds","differenceInDays","isOverdue","daysText","getNodeStateBasedTagInfo","nodeState","isStudent","accuracy","jsx","ArrowTooltip","FlexView","Text","InProgressIconWrapper","Lock2Icon","jsxs","StatusIcon","Tag","Check2Icon","ExclamationIcon","getNodeCardBasedIcon","nodeType","LOTTIE","Bulb2Icon","RecapIcon","AlarmIcon","DartIcon","PuzzleIcon","Play2Icon","TestTubeIcon"],"mappings":"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"}

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

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

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

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

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

@@ -10,7 +10,7 @@ const n = o.div`
   width: inherit;
 `, d = o.div`
   height: ${t}px;
-  padding-top: ${(window.ReactNativeTopInset || 0) + 24}px;
+  padding-top: 24px;
   width: 100%;
   background: ${({ theme: i }) => i.colors.WHITE_T_03};
   backdrop-filter: blur(40px);
@@ -19,7 +19,7 @@ const n = o.div`
 `, s = o.div`
   position: absolute;
   right: 16px;
-  top: ${(window.ReactNativeTopInset || 0) + 22}px;
+  top: 22px;
   z-index: 1;
   &:hover {
     background: ${({ theme: i }) => i.colors.BLACK_4};
@@ -31,7 +31,7 @@ const n = o.div`
   /* overflow: hidden; */
   flex-grow: 1;
   position: relative;
-`, p = o.div`
+`, l = o.div`
   width: 100%;
   position: absolute;
   top: 0;
@@ -42,7 +42,7 @@ const n = o.div`
     width: 100%;
     height: 100%;
   }
-`, l = o.div`
+`, p = o.div`
   height: 40px;
   width: 100%;
   position: relative;
@@ -65,9 +65,9 @@ export {
   d as GameTutorialHeader,
   n as GameTutorialWrapper,
   s as HeaderIconContainer,
-  p as VideoContainer,
+  l as VideoContainer,
   c as VideoProgress,
   h as VideoProgressContainer,
-  l as VideoProgressWrapper
+  p as VideoProgressWrapper
 };
 //# sourceMappingURL=tutorial-styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tutorial-styled.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { HEADER_HEIGHT } from './constants';\n\nexport const GameTutorialWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 250px;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  position: relative;\n  width: inherit;\n`;\n\nexport const GameTutorialHeader = styled.div`\n  height: ${HEADER_HEIGHT}px;\n  padding-top: ${(window.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    width: 100%;\n    height: 100%;\n  }\n`;\n\nexport const VideoProgressWrapper = styled.div`\n  height: 40px;\n  width: 100%;\n  position: relative;\n  display: flex;\n`;\n\nexport const VideoProgressContainer = styled.div`\n  height: 2px;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const VideoProgress = styled.div<{ $width: number }>`\n  height: inherit;\n  background: ${({ theme }) => theme.colors.WHITE};\n  position: absolute;\n  z-index: 2;\n  width: ${({ $width }) => $width || 0}%;\n  transition: width 0.4s linear;\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer","VideoProgressWrapper","VideoProgressContainer","VideoProgress","$width"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKtCC,IAAqBF,EAAO;AAAA,YAC7BG,CAAa;AAAA,kBACP,OAAO,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;"}
+{"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: 24px;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.WHITE_T_03};\n  backdrop-filter: blur(40px);\n  position: relative;\n  flex-shrink: 0;\n`;\n\nexport const HeaderIconContainer = styled.div`\n  position: absolute;\n  right: 16px;\n  top: 22px;\n  z-index: 1;\n  &:hover {\n    background: ${({ theme }) => theme.colors.BLACK_4};\n    cursor: pointer;\n  }\n`;\n\nexport const GameTutorialContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* overflow: hidden; */\n  flex-grow: 1;\n  position: relative;\n`;\n\nexport const VideoContainer = styled.div`\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  & video {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nexport const VideoProgressWrapper = styled.div`\n  height: 40px;\n  width: 100%;\n  position: relative;\n  display: flex;\n`;\n\nexport const VideoProgressContainer = styled.div`\n  height: 2px;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const VideoProgress = styled.div<{ $width: number }>`\n  height: inherit;\n  background: ${({ theme }) => theme.colors.WHITE};\n  position: absolute;\n  z-index: 2;\n  width: ${({ $width }) => $width || 0}%;\n  transition: width 0.4s linear;\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer","VideoProgressWrapper","VideoProgressContainer","VideoProgress","$width"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKtCC,IAAqBF,EAAO;AAAA,YAC7BG,CAAa;AAAA;AAAA;AAAA,gBAGT,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAsBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMxB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKxCI,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ/BM,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/web-view/web-view.js

@@ -1,30 +1,28 @@
-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 { jsx as P } from "react/jsx-runtime";
+import { forwardRef as V, useRef as G, useMemo as R, useCallback as v, useImperativeHandle as $, 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 { ALLOWED_ORIGIN as C } 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 Z = V((I, b) => {
   const {
-    baseUrl: g,
-    projectDetails: y,
-    playerDetails: E,
+    baseUrl: y,
+    projectDetails: T,
+    playerDetails: w,
     onGameLoad: a,
     onGamePlayFinish: c,
     handleInfoMessage: p,
     onBack: f,
-    parentDomain: N,
-    ...V
-  } = L, m = G(null), O = _(() => E, [E]), t = _(() => y, [y]);
+    parentDomain: g,
+    ...L
+  } = I, l = G(null), N = R(() => w, [w]), t = R(() => T, [T]);
   let A = "";
-  const { onEvent: S } = J();
+  const { onEvent: O } = J();
   t.projectType === s.LESSON && (A = t.miniGameIdentifier);
-  const l = T(() => {
-    const { enableCloseButton: r = !0 } = t;
+  const m = v(() => {
+    const { enableCloseButton: i = !0 } = t;
     let e = {
-      enableCloseButton: r
+      enableCloseButton: i
     };
     return t.projectType === s.GAME && (e = {
       ...e,
@@ -39,65 +37,60 @@ const X = P((L, M) => {
       ...e,
       ...t
     }), e;
-  }, [t]), d = T(() => {
-    var e, i;
-    const r = l();
-    (i = (e = m.current) == null ? void 0 : e.contentWindow) == null || i.postMessage(
+  }, [t]), d = v(() => {
+    var e, r;
+    const i = m();
+    (r = (e = l.current) == null ? void 0 : e.contentWindow) == null || r.postMessage(
       JSON.stringify({
         event: o.GAME_DATA,
-        payload: r
+        payload: i
       }),
-      b
+      C
     );
-  }, [l]), j = T(() => {
-    var e, i;
-    const r = l();
-    (i = (e = m.current) == null ? void 0 : e.contentWindow) == null || i.postMessage(
+  }, [m]), D = v(() => {
+    var e, r;
+    const i = m();
+    (r = (e = l.current) == null ? void 0 : e.contentWindow) == null || r.postMessage(
       JSON.stringify({
         event: o.SET_CONFIG,
         payload: {
-          user: O,
-          projectConfig: r,
-          parentDomain: N
+          user: N,
+          projectConfig: i,
+          parentDomain: g
         }
       }),
-      b
+      C
     );
-  }, [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;
+  }, [N, m, g]);
+  $(b, () => l.current, []), B(() => {
+    const i = (e) => {
+      var j, _;
+      const r = e.data, S = typeof r == "string" ? JSON.parse(r) : r, { event: n, payload: E = null } = S;
       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);
+        const { pattern: u } = E;
+        window.ReactNativeWebView ? window.ReactNativeWebView.postMessage(JSON.stringify(S)) : (_ = (j = window.navigator).vibrate) == null || _.call(j, 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, $);
+      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 && D(), n === o.UPDATE_STATS && (c == null || c(E)), n === o.SHOW_SNACKBAR && (p == null || p(E)), n === o.TRACK_EVENT) {
+        const { eventName: u, properties: W } = E;
+        O(u, W);
       }
     };
-    return window.addEventListener("message", r), () => {
-      window.removeEventListener("message", r);
+    return window.addEventListener("message", i), () => {
+      window.removeEventListener("message", i);
     };
   }, [
     p,
     f,
     c,
     a,
-    j,
+    D,
     d,
-    S
+    O
   ]);
-  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 })
-  ] });
+  const M = w.isAdmin ? y : `${y}/play-game/${t.projectId}/${t.variant}${A ? `/${A}` : ""}`;
+  return /* @__PURE__ */ P("iframe", { ...L, ref: l, src: `${M}?version=2`, allow: "autoplay" });
 });
 export {
-  X as WebView
+  Z 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  ITableWebGameProps,\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 FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\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 { enableCloseButton = true } = memoizedProjectDetails;\n\n    let payload = {\n      enableCloseButton,\n    } as IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\n\n    if (memoizedProjectDetails.projectType === ProjectType.GAME) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as IMultiplayerWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.PUZZLE) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as IPuzzleWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as ILessonWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.TABLE) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as ITableWebGameProps;\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        if (window.ReactNativeWebView) {\n          window.ReactNativeWebView.postMessage(JSON.stringify(parsedData));\n        } else {\n          window.navigator.vibrate?.(pattern);\n        }\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  const url = playerDetails.isAdmin\n    ? baseUrl\n    : `${baseUrl}/play-game/${memoizedProjectDetails.projectId}/${memoizedProjectDetails.variant}${\n        miniGameIdentifier ? `/${miniGameIdentifier}` : ''\n      }`;\n\n  return (\n    <FlexView $height=\"100%\" $width=\"100%\">\n      <Separator height={window.ReactNativeTopInset || 0} />\n      <iframe {...rest} ref={webViewRef} src={`${url}?version=2`} allow=\"autoplay\" />;\n      <Separator height={window.ReactNativeBottomInset || 0} />\n    </FlexView>\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","payload","sendGamesData","_b","_a","WebViewEvent","ALLOWED_ORIGIN","setConfig","projectConfig","useImperativeHandle","useEffect","handleMessage","data","parsedData","event","pattern","eventName","properties","url","jsxs","FlexView","jsx","Separator"],"mappings":";;;;;;;;AAqBO,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,cAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAV,GACEW,IAAaC,EAA0B,IAAI,GAC3CC,IAAwBC,EAAQ,MAAMV,GAAe,CAACA,CAAa,CAAC,GACpEW,IAAyBD,EAAQ,MAAMX,GAAgB,CAACA,CAAc,CAAC;AAE7E,MAAIa,IAAqB;AACzB,QAAM,EAAE,SAASC,EAAW,IAAIC,EAAa;AAEzC,EAAAH,EAAuB,gBAAgBI,EAAY,WACrDH,IAAsBD,EAA+C;AAGjE,QAAAK,IAAoBC,EAAY,MAAM;AACpC,UAAA,EAAE,mBAAAC,IAAoB,GAAS,IAAAP;AAErC,QAAIQ,IAAU;AAAA,MACZ,mBAAAD;AAAA,IAAA;AAGE,WAAAP,EAAuB,gBAAgBI,EAAY,SAC3CI,IAAA;AAAA,MACR,GAAGA;AAAA,MACH,GAAGR;AAAA,IAAA,IAIHA,EAAuB,gBAAgBI,EAAY,WAC3CI,IAAA;AAAA,MACR,GAAGA;AAAA,MACH,GAAGR;AAAA,IAAA,IAIHA,EAAuB,gBAAgBI,EAAY,WAC3CI,IAAA;AAAA,MACR,GAAGA;AAAA,MACH,GAAGR;AAAA,IAAA,IAIHA,EAAuB,gBAAgBI,EAAY,UAC3CI,IAAA;AAAA,MACR,GAAGA;AAAA,MACH,GAAGR;AAAA,IAAA,IAIAQ;AAAA,EAAA,GACN,CAACR,CAAsB,CAAC,GAErBS,IAAgBH,EAAY,MAAM;;AACtC,UAAME,IAAUH;AAEhB,KAAAK,KAAAC,IAAAf,EAAW,YAAX,gBAAAe,EAAoB,kBAApB,QAAAD,EAAmC;AAAA,MACjC,KAAK,UAAU;AAAA,QACb,OAAOE,EAAa;AAAA,QACpB,SAAAJ;AAAA,MAAA,CACD;AAAA,MACDK;AAAA;AAAA,EACF,GACC,CAACR,CAAiB,CAAC,GAEhBS,IAAYR,EAAY,MAAM;;AAClC,UAAMS,IAAgBV;AAEtB,KAAAK,KAAAC,IAAAf,EAAW,YAAX,gBAAAe,EAAoB,kBAApB,QAAAD,EAAmC;AAAA,MACjC,KAAK,UAAU;AAAA,QACb,OAAOE,EAAa;AAAA,QACpB,SAAS;AAAA,UACP,MAAMd;AAAA,UACN,eAAAiB;AAAA,UACA,cAAArB;AAAA,QACF;AAAA,MAAA,CACD;AAAA,MACDmB;AAAA;AAAA,EAED,GAAA,CAACf,GAAuBO,GAAmBX,CAAY,CAAC;AAE3D,EAAAsB,EAAoB9B,GAAK,MAAMU,EAAW,SAA8B,CAAE,CAAA,GAE1EqB,EAAU,MAAM;AACR,UAAAC,IAAgB,CAAC,MAAoB;;AACzC,YAAMC,IAAe,EAAE,MACjBC,IAAa,OAAOD,KAAS,WAAW,KAAK,MAAMA,CAAI,IAAKA,GAE5D,EAAE,OAAAE,GAAO,SAAAb,IAAU,KAAA,IAASY;AAE9B,UAAAC,MAAUT,EAAa,SAAS;AAC5B,cAAA,EAAE,SAAAU,EAAY,IAAAd;AAEpB,QAAI,OAAO,qBACT,OAAO,mBAAmB,YAAY,KAAK,UAAUY,CAAU,CAAC,KAEzDV,KAAAC,IAAA,OAAA,WAAU,YAAV,QAAAD,EAAA,KAAAC,GAAoBW;AAAA,MAE/B;AA0BI,UAxBAD,MAAUT,EAAa,cAChBnB,KAAA,QAAAA,MAGP4B,MAAUT,EAAa,gBACZtB,KAAA,QAAAA,MAGX+B,MAAUT,EAAa,uBACTH,KAAA,QAAAA,MAGdY,MAAUT,EAAa,cACfE,KAGRO,MAAUT,EAAa,iBACzBrB,KAAA,QAAAA,EAAmBiB,KAGjBa,MAAUT,EAAa,kBACzBpB,KAAA,QAAAA,EAAoBgB,KAGlBa,MAAUT,EAAa,aAAa;AAChC,cAAA,EAAE,WAAAW,GAAW,YAAAC,EAAe,IAAAhB;AAElC,QAAAN,EAAWqB,GAAWC,CAAU;AAAA,MAClC;AAAA,IAAA;AAGK,kBAAA,iBAAiB,WAAWN,CAAa,GAEzC,MAAM;AACJ,aAAA,oBAAoB,WAAWA,CAAa;AAAA,IAAA;AAAA,EACrD,GACC;AAAA,IACD1B;AAAA,IACAC;AAAA,IACAF;AAAA,IACAD;AAAA,IACAwB;AAAA,IACAL;AAAA,IACAP;AAAA,EAAA,CACD;AAED,QAAMuB,IAAMpC,EAAc,UACtBF,IACA,GAAGA,CAAO,cAAca,EAAuB,SAAS,IAAIA,EAAuB,OAAO,GACxFC,IAAqB,IAAIA,CAAkB,KAAK,EAClD;AAEJ,SACG,gBAAAyB,EAAAC,GAAA,EAAS,SAAQ,QAAO,QAAO,QAC9B,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAU,EAAA,QAAQ,OAAO,uBAAuB,GAAG;AAAA,IACpD,gBAAAD,EAAC,UAAQ,EAAA,GAAGjC,GAAM,KAAKC,GAAY,KAAK,GAAG6B,CAAG,cAAc,OAAM,WAAW,CAAA;AAAA,IAAE;AAAA,IAC9E,gBAAAG,EAAAC,GAAA,EAAU,QAAQ,OAAO,0BAA0B,GAAG;AAAA,EACzD,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"web-view.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view.tsx"],"sourcesContent":["declare global {\n  interface IReactNativeWebview {\n    postMessage: (data: string) => void;\n  }\n\n  interface Window {\n    ReactNativeWebView?: IReactNativeWebview;\n  }\n}\n\nimport type {\n  IInfoMessage,\n  ILessonWebGameProps,\n  IMessageProps,\n  IMultiplayerWebGameProps,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n  ITableWebGameProps,\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 { enableCloseButton = true } = memoizedProjectDetails;\n\n    let payload = {\n      enableCloseButton,\n    } as IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\n\n    if (memoizedProjectDetails.projectType === ProjectType.GAME) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as IMultiplayerWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.PUZZLE) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as IPuzzleWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as ILessonWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.TABLE) {\n      payload = {\n        ...payload,\n        ...memoizedProjectDetails,\n      } as ITableWebGameProps;\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        if (window.ReactNativeWebView) {\n          window.ReactNativeWebView.postMessage(JSON.stringify(parsedData));\n        } else {\n          window.navigator.vibrate?.(pattern);\n        }\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  const url = playerDetails.isAdmin\n    ? baseUrl\n    : `${baseUrl}/play-game/${memoizedProjectDetails.projectId}/${memoizedProjectDetails.variant}${\n        miniGameIdentifier ? `/${miniGameIdentifier}` : ''\n      }`;\n\n  return <iframe {...rest} ref={webViewRef} src={`${url}?version=2`} allow=\"autoplay\" />;\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","payload","sendGamesData","_b","_a","WebViewEvent","ALLOWED_ORIGIN","setConfig","projectConfig","useImperativeHandle","useEffect","handleMessage","data","parsedData","event","pattern","eventName","properties","url","jsx"],"mappings":"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"}

package/dist/features/circle-games/leaderboard/comps/banner/banner.js

@@ -1,19 +1,19 @@
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { memo as l } from "react";
+import { memo as d } from "react";
 import h from "../../../../ui/lottie-animation/lottie-animation.js";
 import p from "../../../../ui/separator/separator.js";
 import o from "../../../../ui/text/text.js";
 import { BannerContainer as f, CircleLottieView as x, BannerTextContainer as T, CountTextWrapper as C } from "./banner-styled.js";
-const $ = { renderer: "canvas" }, v = l(
+const $ = { renderer: "canvas" }, H = d(
   ({
     primaryText: i,
     secondaryText: t,
-    topInset: e = window.ReactNativeTopInset || 0,
+    topInset: e = 0,
     isLoading: a = !1,
     lottiePath: m,
     bgFromTopPosition: c = 0,
     bgFromRightPosition: s = 0,
-    custEle: d
+    custEle: l
   }) => /* @__PURE__ */ n(f, { topInset: e, children: [
     /* @__PURE__ */ r(
       x,
@@ -30,11 +30,11 @@ const $ = { renderer: "canvas" }, v = l(
         /* @__PURE__ */ r(p, { height: 4 }),
         /* @__PURE__ */ r(o, { $renderAs: "ah4", $color: "WHITE", children: a ? "__" : t })
       ] }),
-      d
+      l
     ] })
   ] })
 );
 export {
-  v as Banner
+  H as Banner
 };
 //# sourceMappingURL=banner.js.map

package/dist/features/circle-games/leaderboard/comps/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner.tsx"],"sourcesContent":["import type { IBannerProps } from './banner-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './banner-styled';\n\nconst animationSettings = { renderer: 'canvas' };\n\nexport const Banner: FC<IBannerProps> = memo(\n  ({\n    primaryText,\n    secondaryText,\n    topInset = window.ReactNativeTopInset || 0,\n    isLoading = false,\n    lottiePath,\n    bgFromTopPosition = 0,\n    bgFromRightPosition = 0,\n    custEle,\n  }) => (\n    <Styled.BannerContainer topInset={topInset}>\n      <Styled.CircleLottieView\n        topInset={topInset}\n        bgFromTopPosition={bgFromTopPosition}\n        bgFromRightPosition={bgFromRightPosition}\n      >\n        <LottieAnimation src={lottiePath} settings={animationSettings} />\n      </Styled.CircleLottieView>\n\n      <Styled.BannerTextContainer>\n        <Styled.CountTextWrapper topInset={topInset}>\n          <Text $renderAs=\"ac4\" $color=\"WHITE\">\n            {primaryText}\n          </Text>\n          <Separator height={4} />\n          <Text $renderAs=\"ah4\" $color=\"WHITE\">\n            {isLoading ? '__' : secondaryText}\n          </Text>\n        </Styled.CountTextWrapper>\n\n        {custEle}\n      </Styled.BannerTextContainer>\n    </Styled.BannerContainer>\n  ),\n);\n"],"names":["animationSettings","Banner","memo","primaryText","secondaryText","topInset","isLoading","lottiePath","bgFromTopPosition","bgFromRightPosition","custEle","jsxs","Styled.BannerContainer","jsx","Styled.CircleLottieView","LottieAnimation","Styled.BannerTextContainer","Styled.CountTextWrapper","Text","Separator"],"mappings":";;;;;;AAUA,MAAMA,IAAoB,EAAE,UAAU,YAEzBC,IAA2BC;AAAA,EACtC,CAAC;AAAA,IACC,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC,IAAW,OAAO,uBAAuB;AAAA,IACzC,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,qBAAAC,IAAsB;AAAA,IACtB,SAAAC;AAAA,EAEA,MAAA,gBAAAC,EAACC,GAAA,EAAuB,UAAAP,GACtB,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,UAAAT;AAAA,QACA,mBAAAG;AAAA,QACA,qBAAAC;AAAA,QAEA,UAAC,gBAAAI,EAAAE,GAAA,EAAgB,KAAKR,GAAY,UAAUP,GAAmB;AAAA,MAAA;AAAA,IACjE;AAAA,IAEA,gBAAAW,EAACK,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAL,EAAAM,GAAA,EAAwB,UAAAZ,GACvB,UAAA;AAAA,QAAA,gBAAAQ,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UACHf,GAAA;AAAA,QACA,gBAAAU,EAACM,GAAU,EAAA,QAAQ,EAAG,CAAA;AAAA,QACtB,gBAAAN,EAACK,KAAK,WAAU,OAAM,QAAO,SAC1B,UAAAZ,IAAY,OAAOF,EACtB,CAAA;AAAA,MAAA,GACF;AAAA,MAECM;AAAA,IAAA,GACH;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"banner.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/banner/banner.tsx"],"sourcesContent":["import type { IBannerProps } from './banner-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './banner-styled';\n\nconst animationSettings = { renderer: 'canvas' };\n\nexport const Banner: FC<IBannerProps> = memo(\n  ({\n    primaryText,\n    secondaryText,\n    topInset = 0,\n    isLoading = false,\n    lottiePath,\n    bgFromTopPosition = 0,\n    bgFromRightPosition = 0,\n    custEle,\n  }) => (\n    <Styled.BannerContainer topInset={topInset}>\n      <Styled.CircleLottieView\n        topInset={topInset}\n        bgFromTopPosition={bgFromTopPosition}\n        bgFromRightPosition={bgFromRightPosition}\n      >\n        <LottieAnimation src={lottiePath} settings={animationSettings} />\n      </Styled.CircleLottieView>\n\n      <Styled.BannerTextContainer>\n        <Styled.CountTextWrapper topInset={topInset}>\n          <Text $renderAs=\"ac4\" $color=\"WHITE\">\n            {primaryText}\n          </Text>\n          <Separator height={4} />\n          <Text $renderAs=\"ah4\" $color=\"WHITE\">\n            {isLoading ? '__' : secondaryText}\n          </Text>\n        </Styled.CountTextWrapper>\n\n        {custEle}\n      </Styled.BannerTextContainer>\n    </Styled.BannerContainer>\n  ),\n);\n"],"names":["animationSettings","Banner","memo","primaryText","secondaryText","topInset","isLoading","lottiePath","bgFromTopPosition","bgFromRightPosition","custEle","jsxs","Styled.BannerContainer","jsx","Styled.CircleLottieView","LottieAnimation","Styled.BannerTextContainer","Styled.CountTextWrapper","Text","Separator"],"mappings":";;;;;;AAUA,MAAMA,IAAoB,EAAE,UAAU,YAEzBC,IAA2BC;AAAA,EACtC,CAAC;AAAA,IACC,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,qBAAAC,IAAsB;AAAA,IACtB,SAAAC;AAAA,EAEA,MAAA,gBAAAC,EAACC,GAAA,EAAuB,UAAAP,GACtB,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,UAAAT;AAAA,QACA,mBAAAG;AAAA,QACA,qBAAAC;AAAA,QAEA,UAAC,gBAAAI,EAAAE,GAAA,EAAgB,KAAKR,GAAY,UAAUP,GAAmB;AAAA,MAAA;AAAA,IACjE;AAAA,IAEA,gBAAAW,EAACK,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAL,EAAAM,GAAA,EAAwB,UAAAZ,GACvB,UAAA;AAAA,QAAA,gBAAAQ,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UACHf,GAAA;AAAA,QACA,gBAAAU,EAACM,GAAU,EAAA,QAAQ,EAAG,CAAA;AAAA,QACtB,gBAAAN,EAACK,KAAK,WAAU,OAAM,QAAO,SAC1B,UAAAZ,IAAY,OAAOF,EACtB,CAAA;AAAA,MAAA,GACF;AAAA,MAECM;AAAA,IAAA,GACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/features/circle-games/leaderboard/comps/navigation-button/navigation-button-styled.js

@@ -7,7 +7,7 @@ const i = o.div`
   left: ${({ align: t = "left" }) => t === "left" ? "20px" : "unset"};
   right: ${({ align: t = "left" }) => t === "right" ? "20px" : "unset"};
   z-index: 10;
-  bottom: ${(window.ReactNativeBottomInset || 0) + 50}px;
+  bottom: 50px;
 `;
 export {
   n as ExtendedIconButton,

package/dist/features/circle-games/leaderboard/comps/navigation-button/navigation-button-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-button-styled.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/navigation-button/navigation-button-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const NavigationActionWrapper = styled.div`\n  position: relative;\n  width: 100%;\n`;\n\nexport const ExtendedIconButton = styled.div<{ align?: 'left' | 'right' }>`\n  position: absolute;\n  left: ${({ align = 'left' }) => (align === 'left' ? '20px' : 'unset')};\n  right: ${({ align = 'left' }) => (align === 'right' ? '20px' : 'unset')};\n  z-index: 10;\n  bottom: ${(window.ReactNativeBottomInset || 0) + 50}px;\n`;\n"],"names":["NavigationActionWrapper","styled","ExtendedIconButton","align"],"mappings":";AAEO,MAAMA,IAA0BC,EAAO;AAAA;AAAA;AAAA,GAKjCC,IAAqBD,EAAO;AAAA;AAAA,UAE/B,CAAC,EAAE,OAAAE,IAAQ,OAAA,MAAcA,MAAU,SAAS,SAAS,OAAQ;AAAA,WAC5D,CAAC,EAAE,OAAAA,IAAQ,OAAA,MAAcA,MAAU,UAAU,SAAS,OAAQ;AAAA;AAAA,aAE5D,OAAO,0BAA0B,KAAK,EAAE;AAAA;"}
+{"version":3,"file":"navigation-button-styled.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/navigation-button/navigation-button-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const NavigationActionWrapper = styled.div`\n  position: relative;\n  width: 100%;\n`;\n\nexport const ExtendedIconButton = styled.div<{ align?: 'left' | 'right' }>`\n  position: absolute;\n  left: ${({ align = 'left' }) => (align === 'left' ? '20px' : 'unset')};\n  right: ${({ align = 'left' }) => (align === 'right' ? '20px' : 'unset')};\n  z-index: 10;\n  bottom: 50px;\n`;\n"],"names":["NavigationActionWrapper","styled","ExtendedIconButton","align"],"mappings":";AAEO,MAAMA,IAA0BC,EAAO;AAAA;AAAA;AAAA,GAKjCC,IAAqBD,EAAO;AAAA;AAAA,UAE/B,CAAC,EAAE,OAAAE,IAAQ,OAAA,MAAcA,MAAU,SAAS,SAAS,OAAQ;AAAA,WAC5D,CAAC,EAAE,OAAAA,IAAQ,OAAA,MAAcA,MAAU,UAAU,SAAS,OAAQ;AAAA;AAAA;AAAA;"}

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

@@ -25,7 +25,7 @@ const s = t.div`
   width: 100%;
   flex: 1;
   height: 100%;
-  padding-top: ${(window.ReactNativeTopInset || 0) + n}px;
+  padding-top: ${n}px;
   padding-bottom: ${i}px;
 `, m = t.div`
   position: absolute;

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

@@ -1 +1 @@
-{"version":3,"file":"leaderboard-styled.js","sources":["../../../../src/features/circle-games/leaderboard/leaderboard-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ARC_BUTTON_BOTTOM_OFFSET } from '../../ui/arc-button/constants';\nimport FlexView from '../../ui/layout/flex-view';\nimport { BANNER_HEIGHT } from './comps/banner/constants';\n\nexport const Leaderboard = styled.div`\n  flex-direction: column;\n  overflow: hidden;\n  height: 100vh;\n  max-height: 100%;\n  position: relative;\n`;\n\nexport const LeaderboardContainer = styled.div`\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  height: 100%;\n  position: relative;\n  width: 100%;\n`;\n\nexport const BannerWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 10;\n`;\n\nexport const ItemsWrapper = styled.div`\n  background: transparent;\n  position: absolute;\n  overflow: auto;\n  width: 100%;\n  flex: 1;\n  height: 100%;\n  padding-top: ${(window.ReactNativeTopInset || 0) + BANNER_HEIGHT}px;\n  padding-bottom: ${ARC_BUTTON_BOTTOM_OFFSET}px;\n`;\n\nexport const TournamentBannerCustContainer = styled.div`\n  position: absolute;\n  display: flex;\n  top: 5px;\n  right: -2px;\n  width: 200px;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const ActionButtonWrapper = styled.div`\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n`;\n\nexport const TrophyWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  width: 150%;\n  height: 150%;\n`;\n\nexport const Banner = styled.div`\n  background: ${({ theme }) => theme.colors.YELLOW_6};\n  min-height: 32px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const InfoContainer = styled(FlexView)`\n  padding: 16px;\n`;\n"],"names":["Leaderboard","styled","LeaderboardContainer","theme","BannerWrapper","ItemsWrapper","BANNER_HEIGHT","ARC_BUTTON_BOTTOM_OFFSET","TournamentBannerCustContainer","ActionButtonWrapper","TrophyWrapper","Banner","FlexView"],"mappings":";;;;AAMO,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQrBC,IAAuBD,EAAO;AAAA,gBAC3B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,GAMtCC,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOvBI,IAAeJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOjB,OAAO,uBAAuB,KAAKK,CAAa;AAAA,oBAC9CC,CAAwB;AAAA,GAG/BC,IAAgCP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWvCQ,IAAsBR,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BS,IAAgBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOvBU,IAASV,EAAO;AAAA,gBACb,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvBF,EAAOW,CAAQ;AAAA;AAAA;"}
+{"version":3,"file":"leaderboard-styled.js","sources":["../../../../src/features/circle-games/leaderboard/leaderboard-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ARC_BUTTON_BOTTOM_OFFSET } from '../../ui/arc-button/constants';\nimport FlexView from '../../ui/layout/flex-view';\nimport { BANNER_HEIGHT } from './comps/banner/constants';\n\nexport const Leaderboard = styled.div`\n  flex-direction: column;\n  overflow: hidden;\n  height: 100vh;\n  max-height: 100%;\n  position: relative;\n`;\n\nexport const LeaderboardContainer = styled.div`\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  height: 100%;\n  position: relative;\n  width: 100%;\n`;\n\nexport const BannerWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 10;\n`;\n\nexport const ItemsWrapper = styled.div<{ topInset: number }>`\n  background: transparent;\n  position: absolute;\n  overflow: auto;\n  width: 100%;\n  flex: 1;\n  height: 100%;\n  padding-top: ${BANNER_HEIGHT}px;\n  padding-bottom: ${ARC_BUTTON_BOTTOM_OFFSET}px;\n`;\n\nexport const TournamentBannerCustContainer = styled.div`\n  position: absolute;\n  display: flex;\n  top: 5px;\n  right: -2px;\n  width: 200px;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const ActionButtonWrapper = styled.div`\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n`;\n\nexport const TrophyWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  width: 150%;\n  height: 150%;\n`;\n\nexport const Banner = styled.div`\n  background: ${({ theme }) => theme.colors.YELLOW_6};\n  min-height: 32px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const InfoContainer = styled(FlexView)`\n  padding: 16px;\n`;\n"],"names":["Leaderboard","styled","LeaderboardContainer","theme","BannerWrapper","ItemsWrapper","BANNER_HEIGHT","ARC_BUTTON_BOTTOM_OFFSET","TournamentBannerCustContainer","ActionButtonWrapper","TrophyWrapper","Banner","FlexView"],"mappings":";;;;AAMO,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQrBC,IAAuBD,EAAO;AAAA,gBAC3B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,GAMtCC,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOvBI,IAAeJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOlBK,CAAa;AAAA,oBACVC,CAAwB;AAAA,GAG/BC,IAAgCP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWvCQ,IAAsBR,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BS,IAAgBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOvBU,IAASV,EAAO;AAAA,gBACb,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvBF,EAAOW,CAAQ;AAAA;AAAA;"}

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

@@ -1,5 +1,5 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { useState as p, useEffect as K } from "react";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { useState as a, useEffect as K } from "react";
 import { ILLUSTRATIONS as w } from "../../../assets/illustrations/illustrations.js";
 import { LOTTIE as d } from "../../../assets/lottie/lottie.js";
 import { CircularLoader as U } from "../../ui/loader/circular-loader/circular-loader.js";
@@ -39,12 +39,12 @@ const L = {
   streakInfo: l
 }) => {
   var y, A, R, S, B, C, x, P;
-  const [i, I] = p(
+  const [i, I] = a(
     o.findIndex((t) => u === t.type)
-  ), [n, k] = p(((y = m == null ? void 0 : m[u]) == null ? void 0 : y.leaderboardPlayers) || []), [h, N] = p({
+  ), [n, k] = a(((y = m == null ? void 0 : m[u]) == null ? void 0 : y.leaderboardPlayers) || []), [h, N] = a({
     current: 0,
     end: 0
-  }), [O, f] = V(0), [c, Y] = p(!1), F = (A = n == null ? void 0 : n[0]) == null ? void 0 : A.points, $ = ((R = n == null ? void 0 : n[0]) == null ? void 0 : R.streakDays) || 0, { playButtonSound: _ } = q(), j = () => {
+  }), [O, f] = V(0), [c, Y] = a(!1), F = (A = n == null ? void 0 : n[0]) == null ? void 0 : A.points, $ = ((R = n == null ? void 0 : n[0]) == null ? void 0 : R.streakDays) || 0, { playButtonSound: _ } = q(), j = () => {
     _(), I((t) => t - 1 < 0 ? o.length - 1 : t - 1);
   }, v = () => {
     _(), I((t) => t + 1 === o.length ? 0 : t + 1);
@@ -61,8 +61,8 @@ const L = {
         end: s.endTimestamp
       }), s.currentTimestamp > s.endTimestamp && (g.splice(10), Y(!0))), k([...g]);
     }
-  }, [i, m]), /* @__PURE__ */ e(X, { children: /* @__PURE__ */ a(Z, { children: [
-    /* @__PURE__ */ a(D, { children: [
+  }, [i, m]), /* @__PURE__ */ e(X, { children: /* @__PURE__ */ p(Z, { children: [
+    /* @__PURE__ */ p(D, { children: [
       ((S = o[i]) == null ? void 0 : S.type) === r.BI_WEEKLY && /* @__PURE__ */ e(
         E,
         {
@@ -70,7 +70,7 @@ const L = {
           bgFromTopPosition: -120,
           bgFromRightPosition: -110,
           primaryText: c ? /* @__PURE__ */ e("span", { children: "New Tournament" }) : /* @__PURE__ */ e("span", { children: "Tournament" }),
-          secondaryText: c ? /* @__PURE__ */ e("span", { children: "Starts Soon" }) : /* @__PURE__ */ a("span", { children: [
+          secondaryText: c ? /* @__PURE__ */ e("span", { children: "Starts Soon" }) : /* @__PURE__ */ p("span", { children: [
             " ",
             /* @__PURE__ */ e(
               Q,
@@ -110,7 +110,7 @@ const L = {
       )
     ] }),
     T && /* @__PURE__ */ e(U, {}),
-    !T && n && /* @__PURE__ */ a(te, { children: [
+    !T && n && /* @__PURE__ */ p(te, { topInset: 0, children: [
       ((x = o[i]) == null ? void 0 : x.type) === r.ALL_TIME_STREAK && /* @__PURE__ */ e(
         J,
         {