@cuemath/leap 3.0.3 → 3.0.4-rj-1

package/dist/features/circle-games/{leaderboard/comps → comps}/info-bar/info-bar-styled.js

@@ -1,5 +1,5 @@
 import r from "styled-components";
-import o from "../../../../ui/layout/flex-view.js";
+import o from "../../../ui/layout/flex-view.js";
 const d = r(o)`
   padding: 16px;
   margin: 16px;

package/dist/features/circle-games/comps/info-bar/info-bar-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-bar-styled.js","sources":["../../../../../src/features/circle-games/comps/info-bar/info-bar-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const InfoBarWrapper = styled(FlexView)`\n  padding: 16px;\n  margin: 16px;\n  border-width: 1px;\n  border-style: solid;\n`;\n"],"names":["InfoBarWrapper","styled","FlexView"],"mappings":";;AAIa,MAAAA,IAAiBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/circle-games/comps/info-bar/info-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-bar.js","sources":["../../../../../src/features/circle-games/comps/info-bar/info-bar.tsx"],"sourcesContent":["import type { TColorNames, THueNames } from '../../../ui/types';\nimport type { IInfoBarProps } from './info-bar-types';\n\nimport { useMemo } from 'react';\n\nimport * as Styled from './info-bar-styled';\n\nconst computeColorsFromHue = (\n  hue: THueNames,\n): { backgroundColor: TColorNames; borderColor: TColorNames } => {\n  return { backgroundColor: `${hue}_6`, borderColor: `${hue}_4` };\n};\n\nexport const InfoBar: React.FC<IInfoBarProps> = ({ children, hue }) => {\n  const { backgroundColor, borderColor } = useMemo(() => computeColorsFromHue(hue), [hue]);\n\n  return (\n    <Styled.InfoBarWrapper $background={backgroundColor} $borderColor={borderColor}>\n      {children}\n    </Styled.InfoBarWrapper>\n  );\n};\n"],"names":["computeColorsFromHue","hue","InfoBar","children","backgroundColor","borderColor","useMemo","jsx","Styled.InfoBarWrapper"],"mappings":";;;AAOA,MAAMA,IAAuB,CAC3BC,OAEO,EAAE,iBAAiB,GAAGA,CAAG,MAAM,aAAa,GAAGA,CAAG,SAG9CC,IAAmC,CAAC,EAAE,UAAAC,GAAU,KAAAF,QAAU;AAC/D,QAAA,EAAE,iBAAAG,GAAiB,aAAAC,EAAA,IAAgBC,EAAQ,MAAMN,EAAqBC,CAAG,GAAG,CAACA,CAAG,CAAC;AAGrF,SAAA,gBAAAM,EAACC,GAAA,EAAsB,aAAaJ,GAAiB,cAAcC,GAChE,UAAAF,EACH,CAAA;AAEJ;"}

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

@@ -39,7 +39,7 @@ const n = o.div`
   bottom: 0;
   right: 0;
   & video {
-    height: 100%;
+    height: ${({ isJourneyActive: i }) => i ? "100%" : "auto"};
     width: 100%;
   }
 `, l = o.div`

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    height: 100%;\n    width: 100%;\n  }\n`;\n\nexport const VideoProgressWrapper = styled.div`\n  height: 40px;\n  width: 100%;\n  position: relative;\n  display: flex;\n`;\n\nexport const VideoProgressContainer = styled.div`\n  height: 2px;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const VideoProgress = styled.div<{ $width: number }>`\n  height: inherit;\n  background: ${({ theme }) => theme.colors.WHITE};\n  position: absolute;\n  z-index: 2;\n  width: ${({ $width }) => $width || 0}%;\n  transition: width 0.4s linear;\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer","VideoProgressWrapper","VideoProgressContainer","VideoProgress","$width"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKtCC,IAAqBF,EAAO;AAAA,YAC7BG,CAAa;AAAA,kBACP,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA,gBAEvC,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAsBJ,EAAO;AAAA;AAAA;AAAA,UAGhC,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA;AAAA,kBAG7B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKxCI,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ/BM,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAaxBO,IAAuBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BQ,IAAyBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCS,IAAgBT,EAAO;AAAA;AAAA,gBAEpB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,WAGtC,CAAC,EAAE,QAAAS,QAAaA,KAAU,CAAC;AAAA;AAAA;"}
+{"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<{ isJourneyActive?: boolean }>`\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  & video {\n    height: ${({ isJourneyActive }) => (isJourneyActive ? '100%' : 'auto')};\n    width: 100%;\n  }\n`;\n\nexport const VideoProgressWrapper = styled.div`\n  height: 40px;\n  width: 100%;\n  position: relative;\n  display: flex;\n`;\n\nexport const VideoProgressContainer = styled.div`\n  height: 2px;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const VideoProgress = styled.div<{ $width: number }>`\n  height: inherit;\n  background: ${({ theme }) => theme.colors.WHITE};\n  position: absolute;\n  z-index: 2;\n  width: ${({ $width }) => $width || 0}%;\n  transition: width 0.4s linear;\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer","isJourneyActive","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,cAQvB,CAAC,EAAE,iBAAAO,EAAA,MAAuBA,IAAkB,SAAS,MAAO;AAAA;AAAA;AAAA,GAK7DC,IAAuBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BS,IAAyBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCU,IAAgBV,EAAO;AAAA;AAAA,gBAEpB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,WAGtC,CAAC,EAAE,QAAAU,QAAaA,KAAU,CAAC;AAAA;AAAA;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n  src,\n  title,\n  onCross,\n  showProgress = true,\n  onTutorialPlayedOnce,\n}: ITutorialProps) => {\n  const [progress, setProgress] = useState(0);\n  const hasVideoEnded = useRef(false);\n\n  const onProgress = useCallback(\n    (e: ChangeEvent<HTMLVideoElement>) => {\n      const p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n      if (p >= 90 && !hasVideoEnded.current) {\n        hasVideoEnded.current = true;\n        onTutorialPlayedOnce?.();\n      }\n\n      setProgress(p);\n    },\n    [onTutorialPlayedOnce],\n  );\n\n  return (\n    <Styled.GameTutorialWrapper>\n      {(title || onCross) && (\n        <Styled.GameTutorialHeader>\n          {title && (\n            <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n              {title}\n            </Text>\n          )}\n          {onCross && (\n            <Styled.HeaderIconContainer>\n              <CrossIcon color=\"#fff\" onClick={onCross} />\n            </Styled.HeaderIconContainer>\n          )}\n        </Styled.GameTutorialHeader>\n      )}\n\n      <Styled.GameTutorialContainer>\n        <Styled.VideoContainer>\n          <video\n            loop={true}\n            autoPlay={true}\n            muted={true}\n            src={src}\n            onTimeUpdate={onProgress}\n            disablePictureInPicture={true}\n            itemType=\"video/mp4\"\n            playsInline\n          />\n        </Styled.VideoContainer>\n      </Styled.GameTutorialContainer>\n\n      {showProgress && (\n        <Styled.VideoProgressWrapper>\n          <Styled.VideoProgressContainer>\n            {progress > 0 && <Styled.VideoProgress $width={progress} />}\n          </Styled.VideoProgressContainer>\n        </Styled.VideoProgressWrapper>\n      )}\n    </Styled.GameTutorialWrapper>\n  );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","progress","setProgress","useState","hasVideoEnded","useRef","onProgress","useCallback","e","p","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":";;;;;AASO,MAAMA,IAAW,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,sBAAAC;AACF,MAAsB;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAgBC,EAAO,EAAK,GAE5BC,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,KAAMD,EAAE,OAAO,eAAe,MAAMA,EAAE,OAAO,YAAY,KAAM;AAErE,MAAIC,KAAK,MAAM,CAACL,EAAc,YAC5BA,EAAc,UAAU,IACDJ,KAAA,QAAAA,MAGzBE,EAAYO,CAAC;AAAA,IACf;AAAA,IACA,CAACT,CAAoB;AAAA,EAAA;AAIrB,SAAA,gBAAAU,EAACC,GAAA,EACG,UAAA;AAAA,KAAAd,KAASC,MACT,gBAAAY,EAACE,GAAA,EACE,UAAA;AAAA,MACCf,KAAA,gBAAAgB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHjB,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAAe,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAASlB,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,sBAGDmB,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EACC,UAAA,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAAjB;AAAA,QACA,cAAcU;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAECP,KACE,gBAAAc,EAAAM,GAAA,EACC,UAAA,gBAAAN,EAACO,GAAA,EACE,UAAWnB,IAAA,uBAAMoB,GAAA,EAAqB,QAAQpB,EAAU,CAAA,EAC3D,CAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n  src,\n  title,\n  onCross,\n  showProgress = true,\n  onTutorialPlayedOnce,\n  isJourneyActive,\n}: ITutorialProps) => {\n  const [progress, setProgress] = useState(0);\n  const hasVideoEnded = useRef(false);\n\n  const onProgress = useCallback(\n    (e: ChangeEvent<HTMLVideoElement>) => {\n      const p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n      if (p >= 90 && !hasVideoEnded.current) {\n        hasVideoEnded.current = true;\n        onTutorialPlayedOnce?.();\n      }\n\n      setProgress(p);\n    },\n    [onTutorialPlayedOnce],\n  );\n\n  return (\n    <Styled.GameTutorialWrapper>\n      {(title || onCross) && (\n        <Styled.GameTutorialHeader>\n          {title && (\n            <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n              {title}\n            </Text>\n          )}\n          {onCross && (\n            <Styled.HeaderIconContainer>\n              <CrossIcon color=\"#fff\" onClick={onCross} />\n            </Styled.HeaderIconContainer>\n          )}\n        </Styled.GameTutorialHeader>\n      )}\n\n      <Styled.GameTutorialContainer>\n        <Styled.VideoContainer isJourneyActive={isJourneyActive}>\n          {isJourneyActive && (\n            <InfoBar hue=\"PURPLE\">\n              <Text $renderAs=\"ab3-bold\" $color=\"WHITE_T_87\" $align=\"center\">\n                Understanding the rules is always helpful before you begin.\n              </Text>\n            </InfoBar>\n          )}\n          <video\n            loop={true}\n            autoPlay={true}\n            muted={true}\n            src={src}\n            onTimeUpdate={onProgress}\n            disablePictureInPicture={true}\n            itemType=\"video/mp4\"\n            playsInline\n          />\n        </Styled.VideoContainer>\n      </Styled.GameTutorialContainer>\n\n      {showProgress && (\n        <Styled.VideoProgressWrapper>\n          <Styled.VideoProgressContainer>\n            {progress > 0 && <Styled.VideoProgress $width={progress} />}\n          </Styled.VideoProgressContainer>\n        </Styled.VideoProgressWrapper>\n      )}\n    </Styled.GameTutorialWrapper>\n  );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","progress","setProgress","useState","hasVideoEnded","useRef","onProgress","useCallback","e","p","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","Styled.GameTutorialContainer","Styled.VideoContainer","InfoBar","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":";;;;;;AAUO,MAAMA,IAAW,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,sBAAAC;AAAA,EACA,iBAAAC;AACF,MAAsB;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAgBC,EAAO,EAAK,GAE5BC,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,KAAMD,EAAE,OAAO,eAAe,MAAMA,EAAE,OAAO,YAAY,KAAM;AAErE,MAAIC,KAAK,MAAM,CAACL,EAAc,YAC5BA,EAAc,UAAU,IACDL,KAAA,QAAAA,MAGzBG,EAAYO,CAAC;AAAA,IACf;AAAA,IACA,CAACV,CAAoB;AAAA,EAAA;AAIrB,SAAA,gBAAAW,EAACC,GAAA,EACG,UAAA;AAAA,KAAAf,KAASC,MACT,gBAAAa,EAACE,GAAA,EACE,UAAA;AAAA,MACChB,KAAA,gBAAAiB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHlB,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAAgB,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAASnB,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAgB,EAACI,GAAA,EACC,4BAACC,GAAA,EAAsB,iBAAAlB,GACpB,UAAA;AAAA,MAAAA,KACE,gBAAAa,EAAAM,GAAA,EAAQ,KAAI,UACX,UAAC,gBAAAN,EAAAC,GAAA,EAAK,WAAU,YAAW,QAAO,cAAa,QAAO,UAAS,wEAE/D,CAAA,GACF;AAAA,MAEF,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU;AAAA,UACV,OAAO;AAAA,UACP,KAAAlB;AAAA,UACA,cAAcW;AAAA,UACd,yBAAyB;AAAA,UACzB,UAAS;AAAA,UACT,aAAW;AAAA,QAAA;AAAA,MACb;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,IAECR,KACE,gBAAAe,EAAAO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EACE,UAAWpB,IAAA,uBAAMqB,GAAA,EAAqB,QAAQrB,EAAU,CAAA,EAC3D,CAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/features/circle-games/leaderboard/comps/streak-reduction-infobar/streak-reduction-infobar.js

@@ -3,8 +3,8 @@ import { useState as u, useCallback as h } from "react";
 import I from "../../../../../assets/line-icons/icons/cross.js";
 import i from "../../../../ui/layout/flex-view.js";
 import o from "../../../../ui/text/text.js";
+import { InfoBar as k } from "../../../comps/info-bar/info-bar.js";
 import { StreakReductionLocalStorageUtil as c } from "../../../utils/streak-reduction-localstorage-util.js";
-import { InfoBar as k } from "../info-bar/info-bar.js";
 import { STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP as a } from "./streak-reduction-infobar-constants.js";
 const T = ({
   startTimestampToday: e,

package/dist/features/circle-games/leaderboard/comps/streak-reduction-infobar/streak-reduction-infobar.js.map

@@ -1 +1 @@
-{"version":3,"file":"streak-reduction-infobar.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/streak-reduction-infobar/streak-reduction-infobar.tsx"],"sourcesContent":["import type { IStreakReductionLeaderboard } from './streak-reduction-infobar-types';\n\nimport { useCallback, useState } from 'react';\n\nimport CrossIcon from '../../../../../assets/line-icons/icons/cross';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { StreakReductionLocalStorageUtil } from '../../../utils/streak-reduction-localstorage-util';\nimport { InfoBar } from '../info-bar/info-bar';\nimport { STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP } from './streak-reduction-infobar-constants';\n\nexport const StreakReductionInfoBar = ({\n  startTimestampToday,\n  streakReduction,\n}: IStreakReductionLeaderboard) => {\n  const [showInfoBar, setShowInfoBar] = useState(\n    StreakReductionLocalStorageUtil.showStreakReduction(\n      STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP,\n      startTimestampToday,\n    ),\n  );\n\n  const hasStreakReduced = streakReduction > 0;\n\n  const onInfoBarClose = useCallback(() => {\n    StreakReductionLocalStorageUtil.markStreakReductionDismissed(\n      STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP,\n      startTimestampToday,\n    );\n    setShowInfoBar(false);\n  }, [startTimestampToday]);\n\n  if (!showInfoBar) {\n    return null;\n  }\n\n  return (\n    <InfoBar\n      children={\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n          <FlexView>\n            {hasStreakReduced ? (\n              <>\n                <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                  Keep building your streak by completing an activity each day.\n                </Text>\n                <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                  For each day missed, your streak reduces by 1.\n                </Text>\n              </>\n            ) : (\n              <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                Streak saved for the day! Come back tomorrow to keep increasing it.\n              </Text>\n            )}\n          </FlexView>\n\n          <CrossIcon cursor={'pointer'} color=\"WHITE\" onClick={onInfoBarClose} />\n        </FlexView>\n      }\n      hue={hasStreakReduced ? 'YELLOW' : 'GREEN'}\n    />\n  );\n};\n"],"names":["StreakReductionInfoBar","startTimestampToday","streakReduction","showInfoBar","setShowInfoBar","useState","StreakReductionLocalStorageUtil","STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP","hasStreakReduced","onInfoBarClose","useCallback","jsx","InfoBar","FlexView","jsxs","Fragment","Text","CrossIcon"],"mappings":";;;;;;;;AAWO,MAAMA,IAAyB,CAAC;AAAA,EACrC,qBAAAC;AAAA,EACA,iBAAAC;AACF,MAAmC;AAC3B,QAAA,CAACC,GAAaC,CAAc,IAAIC;AAAA,IACpCC,EAAgC;AAAA,MAC9BC;AAAA,MACAN;AAAA,IACF;AAAA,EAAA,GAGIO,IAAmBN,IAAkB,GAErCO,IAAiBC,EAAY,MAAM;AACP,IAAAJ,EAAA;AAAA,MAC9BC;AAAA,MACAN;AAAA,IAAA,GAEFG,EAAe,EAAK;AAAA,EAAA,GACnB,CAACH,CAAmB,CAAC;AAExB,SAAKE,IAKH,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGC,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAgB,iBAClE,UAAA;AAAA,QAAC,gBAAAF,EAAAE,GAAA,EACE,cAEG,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,iEAAA;AAAA,4BACCA,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,kDAAA;AAAA,QACF,EAAA,CAAA,sBAECA,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,iFAE1C,EAEJ,CAAA;AAAA,0BAECC,GAAU,EAAA,QAAQ,WAAW,OAAM,SAAQ,SAASR,GAAgB;AAAA,MAAA,GACvE;AAAA,MAEF,KAAKD,IAAmB,WAAW;AAAA,IAAA;AAAA,EAAA,IA3B9B;AA8BX;"}
+{"version":3,"file":"streak-reduction-infobar.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/streak-reduction-infobar/streak-reduction-infobar.tsx"],"sourcesContent":["import type { IStreakReductionLeaderboard } from './streak-reduction-infobar-types';\n\nimport { useCallback, useState } from 'react';\n\nimport CrossIcon from '../../../../../assets/line-icons/icons/cross';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { InfoBar } from '../../../comps/info-bar/info-bar';\nimport { StreakReductionLocalStorageUtil } from '../../../utils/streak-reduction-localstorage-util';\nimport { STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP } from './streak-reduction-infobar-constants';\n\nexport const StreakReductionInfoBar = ({\n  startTimestampToday,\n  streakReduction,\n}: IStreakReductionLeaderboard) => {\n  const [showInfoBar, setShowInfoBar] = useState(\n    StreakReductionLocalStorageUtil.showStreakReduction(\n      STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP,\n      startTimestampToday,\n    ),\n  );\n\n  const hasStreakReduced = streakReduction > 0;\n\n  const onInfoBarClose = useCallback(() => {\n    StreakReductionLocalStorageUtil.markStreakReductionDismissed(\n      STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP,\n      startTimestampToday,\n    );\n    setShowInfoBar(false);\n  }, [startTimestampToday]);\n\n  if (!showInfoBar) {\n    return null;\n  }\n\n  return (\n    <InfoBar\n      children={\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n          <FlexView>\n            {hasStreakReduced ? (\n              <>\n                <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                  Keep building your streak by completing an activity each day.\n                </Text>\n                <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                  For each day missed, your streak reduces by 1.\n                </Text>\n              </>\n            ) : (\n              <Text $renderAs=\"ab2\" $color=\"WHITE_T_87\">\n                Streak saved for the day! Come back tomorrow to keep increasing it.\n              </Text>\n            )}\n          </FlexView>\n\n          <CrossIcon cursor={'pointer'} color=\"WHITE\" onClick={onInfoBarClose} />\n        </FlexView>\n      }\n      hue={hasStreakReduced ? 'YELLOW' : 'GREEN'}\n    />\n  );\n};\n"],"names":["StreakReductionInfoBar","startTimestampToday","streakReduction","showInfoBar","setShowInfoBar","useState","StreakReductionLocalStorageUtil","STREAK_REDUCTION_LEADERBOARD_INFOBAR_TIMESTAMP","hasStreakReduced","onInfoBarClose","useCallback","jsx","InfoBar","FlexView","jsxs","Fragment","Text","CrossIcon"],"mappings":";;;;;;;;AAWO,MAAMA,IAAyB,CAAC;AAAA,EACrC,qBAAAC;AAAA,EACA,iBAAAC;AACF,MAAmC;AAC3B,QAAA,CAACC,GAAaC,CAAc,IAAIC;AAAA,IACpCC,EAAgC;AAAA,MAC9BC;AAAA,MACAN;AAAA,IACF;AAAA,EAAA,GAGIO,IAAmBN,IAAkB,GAErCO,IAAiBC,EAAY,MAAM;AACP,IAAAJ,EAAA;AAAA,MAC9BC;AAAA,MACAN;AAAA,IAAA,GAEFG,EAAe,EAAK;AAAA,EAAA,GACnB,CAACH,CAAmB,CAAC;AAExB,SAAKE,IAKH,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGC,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAgB,iBAClE,UAAA;AAAA,QAAC,gBAAAF,EAAAE,GAAA,EACE,cAEG,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,iEAAA;AAAA,4BACCA,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,kDAAA;AAAA,QACF,EAAA,CAAA,sBAECA,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,iFAE1C,EAEJ,CAAA;AAAA,0BAECC,GAAU,EAAA,QAAQ,WAAW,OAAM,SAAQ,SAASR,GAAgB;AAAA,MAAA,GACvE;AAAA,MAEF,KAAKD,IAAmB,WAAW;AAAA,IAAA;AAAA,EAAA,IA3B9B;AA8BX;"}

package/dist/index.d.ts

@@ -3214,6 +3214,7 @@ export declare interface ITutorialProps {
     onCross?: () => void;
     showProgress?: boolean;
     onTutorialPlayedOnce?: () => void;
+    isJourneyActive?: boolean;
 }
 
 declare interface IUpdateImages {
@@ -5285,7 +5286,7 @@ declare type TUserProgram = {
 
 export declare type TUserTypes = 'TEACHER' | 'STUDENT';
 
-export declare const Tutorial: ({ src, title, onCross, showProgress, onTutorialPlayedOnce, }: ITutorialProps) => JSX_2.Element;
+export declare const Tutorial: ({ src, title, onCross, showProgress, onTutorialPlayedOnce, isJourneyActive, }: ITutorialProps) => JSX_2.Element;
 
 export declare const TutoringIcon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.0.3",
+  "version": "3.0.4-rj-1",
   "type": "module",
   "files": [
     "dist"

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

@@ -1 +0,0 @@
-{"version":3,"file":"info-bar-styled.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/info-bar/info-bar-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const InfoBarWrapper = styled(FlexView)`\n  padding: 16px;\n  margin: 16px;\n  border-width: 1px;\n  border-style: solid;\n`;\n"],"names":["InfoBarWrapper","styled","FlexView"],"mappings":";;AAIa,MAAAA,IAAiBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"info-bar.js","sources":["../../../../../../src/features/circle-games/leaderboard/comps/info-bar/info-bar.tsx"],"sourcesContent":["import type { TColorNames, THueNames } from '../../../../ui/types';\nimport type { IInfoBarProps } from './info-bar-types';\n\nimport { useMemo } from 'react';\n\nimport * as Styled from './info-bar-styled';\n\nconst computeColorsFromHue = (\n  hue: THueNames,\n): { backgroundColor: TColorNames; borderColor: TColorNames } => {\n  return { backgroundColor: `${hue}_6`, borderColor: `${hue}_4` };\n};\n\nexport const InfoBar: React.FC<IInfoBarProps> = ({ children, hue }) => {\n  const { backgroundColor, borderColor } = useMemo(() => computeColorsFromHue(hue), [hue]);\n\n  return (\n    <Styled.InfoBarWrapper $background={backgroundColor} $borderColor={borderColor}>\n      {children}\n    </Styled.InfoBarWrapper>\n  );\n};\n"],"names":["computeColorsFromHue","hue","InfoBar","children","backgroundColor","borderColor","useMemo","jsx","Styled.InfoBarWrapper"],"mappings":";;;AAOA,MAAMA,IAAuB,CAC3BC,OAEO,EAAE,iBAAiB,GAAGA,CAAG,MAAM,aAAa,GAAGA,CAAG,SAG9CC,IAAmC,CAAC,EAAE,UAAAC,GAAU,KAAAF,QAAU;AAC/D,QAAA,EAAE,iBAAAG,GAAiB,aAAAC,EAAA,IAAgBC,EAAQ,MAAMN,EAAqBC,CAAG,GAAG,CAACA,CAAG,CAAC;AAGrF,SAAA,gBAAAM,EAACC,GAAA,EAAsB,aAAaJ,GAAiB,cAAcC,GAChE,UAAAF,EACH,CAAA;AAEJ;"}