@cuemath/leap 3.1.43 → 3.1.44-akm-6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,7 +8,7 @@ const n = o.div`
8
8
  background: ${({ theme: i }) => i.colors.BLACK_1};
9
9
  position: relative;
10
10
  width: inherit;
11
- `, d = o.div`
11
+ `, s = o.div`
12
12
  height: ${t}px;
13
13
  padding-top: ${(window.ReactNativeTopInset || 0) + 24}px;
14
14
  width: 100%;
@@ -16,7 +16,7 @@ const n = o.div`
16
16
  backdrop-filter: blur(40px);
17
17
  position: relative;
18
18
  flex-shrink: 0;
19
- `, s = o.div`
19
+ `, a = o.div`
20
20
  position: absolute;
21
21
  right: 16px;
22
22
  top: ${(window.ReactNativeTopInset || 0) + 22}px;
@@ -25,14 +25,16 @@ const n = o.div`
25
25
  background: ${({ theme: i }) => i.colors.BLACK_4};
26
26
  cursor: pointer;
27
27
  }
28
- `, a = o.div`
28
+ `, d = o.div`
29
29
  display: flex;
30
30
  flex-direction: column;
31
31
  /* overflow: hidden; */
32
32
  flex-grow: 1;
33
33
  position: relative;
34
- `, p = o.div`
35
- width: 100%;
34
+ `, l = o.div`
35
+ display: flex;
36
+ justify-content: center;
37
+ align-items: center;
36
38
  position: absolute;
37
39
  top: 0;
38
40
  left: 0;
@@ -40,34 +42,44 @@ const n = o.div`
40
42
  right: 0;
41
43
  & video {
42
44
  height: 100%;
43
- width: 100%;
45
+ width: auto;
44
46
  }
45
- `, l = o.div`
47
+ `, p = o.div`
46
48
  height: 40px;
47
- width: 100%;
48
49
  position: relative;
49
50
  display: flex;
50
- `, h = o.div`
51
+ margin: 0 auto;
52
+ `, c = o.div`
51
53
  height: 2px;
52
54
  position: relative;
53
55
  width: 100%;
54
56
  z-index: 1;
55
- `, c = o.div`
57
+ `, h = o.div`
56
58
  height: inherit;
57
59
  background: ${({ theme: i }) => i.colors.WHITE};
58
60
  position: absolute;
59
61
  z-index: 2;
60
62
  width: ${({ $width: i }) => i || 0}%;
61
63
  transition: width 0.4s linear;
64
+ `, g = o.div`
65
+ position: absolute;
66
+ top: 0;
67
+ left: 0;
68
+ right: 0;
69
+ bottom: 0;
70
+ cursor: pointer;
71
+ z-index: 3;
72
+ height: 30px;
62
73
  `;
63
74
  export {
64
- a as GameTutorialContainer,
65
- d as GameTutorialHeader,
75
+ d as GameTutorialContainer,
76
+ s as GameTutorialHeader,
66
77
  n as GameTutorialWrapper,
67
- s as HeaderIconContainer,
68
- p as VideoContainer,
69
- c as VideoProgress,
70
- h as VideoProgressContainer,
71
- l as VideoProgressWrapper
78
+ a as HeaderIconContainer,
79
+ g as SeekableArea,
80
+ l as VideoContainer,
81
+ h as VideoProgress,
82
+ c as VideoProgressContainer,
83
+ p as VideoProgressWrapper
72
84
  };
73
85
  //# sourceMappingURL=tutorial-styled.js.map
@@ -1 +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;"}
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 display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n & video {\n height: 100%;\n width: auto;\n }\n`;\n\nexport const VideoProgressWrapper = styled.div`\n height: 40px;\n position: relative;\n display: flex;\n margin: 0 auto;\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`;\nexport const SeekableArea = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n cursor: pointer;\n z-index: 3;\n height: 30px;\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer","VideoProgressWrapper","VideoProgressContainer","VideoProgress","$width","SeekableArea"],"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;AAAA;AAAA,GAexBO,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,GAGzBC,IAAeX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
@@ -1,48 +1,77 @@
1
- import { jsxs as c, jsx as e } from "react/jsx-runtime";
2
- import { useState as b, useRef as T, useCallback as I } from "react";
3
- import $ from "../../../../assets/line-icons/icons/cross.js";
4
- import a from "../../../ui/text/text.js";
5
- import { getTheme as x } from "../../../ui/theme/get-theme.js";
6
- import { InfoBar as C } from "../../comps/info-bar/info-bar.js";
7
- import { GameTutorialWrapper as P, GameTutorialHeader as V, HeaderIconContainer as E, GameTutorialContainer as H, VideoContainer as W, VideoProgressWrapper as v, VideoProgressContainer as A, VideoProgress as G } from "./tutorial-styled.js";
8
- const L = ({
9
- src: l,
10
- title: o,
11
- onCross: t,
12
- showProgress: m = !0,
13
- onTutorialPlayedOnce: r,
14
- isJourneyActive: u
1
+ import { jsxs as f, jsx as r } from "react/jsx-runtime";
2
+ import { useRef as g, useState as a, useCallback as A } from "react";
3
+ import D from "../../../../assets/line-icons/icons/cross.js";
4
+ import I from "../../../ui/text/text.js";
5
+ import { getTheme as H } from "../../../ui/theme/get-theme.js";
6
+ import { InfoBar as S } from "../../comps/info-bar/info-bar.js";
7
+ import { GameTutorialWrapper as U, GameTutorialHeader as G, HeaderIconContainer as j, GameTutorialContainer as y, VideoContainer as B, VideoProgressWrapper as X, VideoProgressContainer as _, VideoProgress as q, SeekableArea as z } from "./tutorial-styled.js";
8
+ const ee = ({
9
+ src: L,
10
+ title: d,
11
+ onCross: u,
12
+ showProgress: x = !0,
13
+ onTutorialPlayedOnce: c,
14
+ isJourneyActive: W
15
15
  }) => {
16
- const [i, p] = b(0), n = T(!1), { device: f } = x(), h = f === "mobile" ? "ab3-bold" : "ab2-bold", g = I(
17
- (s) => {
18
- const d = (s.target.currentTime || 0) / (s.target.duration || 1) * 100;
19
- d >= 90 && !n.current && (n.current = !0, r == null || r()), p(d);
16
+ const i = g(null), w = g(!1), l = g(null), [v, m] = a(0), [h, $] = a(0), [T, b] = a(!1), [M, k] = a(null), { device: C } = H(), P = C === "mobile" ? "ab3-bold" : "ab2-bold", R = A(
17
+ (e) => {
18
+ if (!T) {
19
+ const o = e.target.currentTime || 0, t = e.target.duration || 1, n = o / t * 100;
20
+ n >= 90 && !w.current && (w.current = !0, c == null || c()), m(n), $(t);
21
+ }
20
22
  },
21
- [r]
22
- );
23
- return /* @__PURE__ */ c(P, { children: [
24
- (o || t) && /* @__PURE__ */ c(V, { children: [
25
- o && /* @__PURE__ */ e(a, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: o }),
26
- t && /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e($, { color: "#fff", onClick: t }) })
23
+ [c, T]
24
+ ), E = (e) => {
25
+ const o = l.current;
26
+ if (!o) return 0;
27
+ const t = o.getBoundingClientRect(), n = "clientX" in e ? e.clientX : 0;
28
+ return Math.max(0, Math.min(1, (n - t.left) / t.width));
29
+ }, V = () => {
30
+ if (!i.current || h === 0 || !l.current) return;
31
+ const e = i.current;
32
+ e.pause(), b(!0);
33
+ const o = (n) => {
34
+ const s = E(n), p = s * h;
35
+ e.currentTime = p, m(s * 100);
36
+ }, t = (n) => {
37
+ const s = E(n), p = s * h;
38
+ e.currentTime = p, m(s * 100), b(!1), e.play(), window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", t);
39
+ };
40
+ window.addEventListener("mousemove", o), window.addEventListener("mouseup", t);
41
+ };
42
+ return /* @__PURE__ */ f(U, { children: [
43
+ (d || u) && /* @__PURE__ */ f(G, { children: [
44
+ d && /* @__PURE__ */ r(I, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: d }),
45
+ u && /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(D, { color: "#fff", onClick: u }) })
27
46
  ] }),
28
- u && /* @__PURE__ */ e(C, { hue: "PURPLE", children: /* @__PURE__ */ e(a, { $renderAs: h, $color: "WHITE_T_87", $align: "center", children: "Understanding the rules is always helpful before you begin." }) }),
29
- /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(
47
+ W && /* @__PURE__ */ r(S, { hue: "PURPLE", children: /* @__PURE__ */ r(I, { $renderAs: P, $color: "WHITE_T_87", $align: "center", children: "Understanding the rules is always helpful before you begin." }) }),
48
+ /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r(
30
49
  "video",
31
50
  {
51
+ ref: i,
32
52
  loop: !0,
53
+ onLoadedMetadata: () => {
54
+ if (i.current) {
55
+ const e = i.current.clientWidth;
56
+ k(e);
57
+ }
58
+ },
33
59
  autoPlay: !0,
34
60
  muted: !0,
35
- src: l,
36
- onTimeUpdate: g,
61
+ src: L,
62
+ onTimeUpdate: R,
37
63
  disablePictureInPicture: !0,
38
64
  itemType: "video/mp4",
39
65
  playsInline: !0
40
66
  }
41
67
  ) }) }),
42
- m && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(A, { children: i > 0 && /* @__PURE__ */ e(G, { $width: i }) }) })
68
+ x && M != null && /* @__PURE__ */ r(X, { style: { width: M }, children: /* @__PURE__ */ f(_, { children: [
69
+ v > 0 && /* @__PURE__ */ r(q, { $width: v }),
70
+ /* @__PURE__ */ r(z, { onMouseDown: V, ref: l })
71
+ ] }) })
43
72
  ] });
44
73
  };
45
74
  export {
46
- L as Tutorial
75
+ ee as Tutorial
47
76
  };
48
77
  //# sourceMappingURL=tutorial.js.map
@@ -1 +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 { getTheme } from '../../../ui/theme/get-theme';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n src,\n title,\n onCross,\n showProgress = true,\n onTutorialPlayedOnce,\n isJourneyActive,\n}: ITutorialProps) => {\n const [progress, setProgress] = useState(0);\n const hasVideoEnded = useRef(false);\n\n const { device } = getTheme();\n const tooltipTextRenderAs = device === 'mobile' ? 'ab3-bold' : 'ab2-bold';\n\n const onProgress = useCallback(\n (e: ChangeEvent<HTMLVideoElement>) => {\n const p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n if (p >= 90 && !hasVideoEnded.current) {\n hasVideoEnded.current = true;\n onTutorialPlayedOnce?.();\n }\n\n setProgress(p);\n },\n [onTutorialPlayedOnce],\n );\n\n return (\n <Styled.GameTutorialWrapper>\n {(title || onCross) && (\n <Styled.GameTutorialHeader>\n {title && (\n <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n {title}\n </Text>\n )}\n {onCross && (\n <Styled.HeaderIconContainer>\n <CrossIcon color=\"#fff\" onClick={onCross} />\n </Styled.HeaderIconContainer>\n )}\n </Styled.GameTutorialHeader>\n )}\n\n {isJourneyActive && (\n <InfoBar hue=\"PURPLE\">\n <Text $renderAs={tooltipTextRenderAs} $color=\"WHITE_T_87\" $align=\"center\">\n Understanding the rules is always helpful before you begin.\n </Text>\n </InfoBar>\n )}\n <Styled.GameTutorialContainer>\n <Styled.VideoContainer>\n <video\n loop={true}\n autoPlay={true}\n muted={true}\n src={src}\n onTimeUpdate={onProgress}\n disablePictureInPicture={true}\n itemType=\"video/mp4\"\n playsInline\n />\n </Styled.VideoContainer>\n </Styled.GameTutorialContainer>\n\n {showProgress && (\n <Styled.VideoProgressWrapper>\n <Styled.VideoProgressContainer>\n {progress > 0 && <Styled.VideoProgress $width={progress} />}\n </Styled.VideoProgressContainer>\n </Styled.VideoProgressWrapper>\n )}\n </Styled.GameTutorialWrapper>\n );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","progress","setProgress","useState","hasVideoEnded","useRef","device","getTheme","tooltipTextRenderAs","onProgress","useCallback","e","p","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":";;;;;;;AAWO,MAAMA,IAAW,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,sBAAAC;AAAA,EACA,iBAAAC;AACF,MAAsB;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAgBC,EAAO,EAAK,GAE5B,EAAE,QAAAC,MAAWC,KACbC,IAAsBF,MAAW,WAAW,aAAa,YAEzDG,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,KAAMD,EAAE,OAAO,eAAe,MAAMA,EAAE,OAAO,YAAY,KAAM;AAErE,MAAIC,KAAK,MAAM,CAACR,EAAc,YAC5BA,EAAc,UAAU,IACDL,KAAA,QAAAA,MAGzBG,EAAYU,CAAC;AAAA,IACf;AAAA,IACA,CAACb,CAAoB;AAAA,EAAA;AAIrB,SAAA,gBAAAc,EAACC,GAAA,EACG,UAAA;AAAA,KAAAlB,KAASC,MACT,gBAAAgB,EAACE,GAAA,EACE,UAAA;AAAA,MACCnB,KAAA,gBAAAoB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHrB,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAAmB,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAAStB,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGDG,KACC,gBAAAgB,EAACI,GAAQ,EAAA,KAAI,UACX,UAAC,gBAAAJ,EAAAC,GAAA,EAAK,WAAWT,GAAqB,QAAO,cAAa,QAAO,UAAS,wEAE1E,CAAA,GACF;AAAA,sBAEDa,GAAA,EACC,UAAC,gBAAAL,EAAAM,GAAA,EACC,UAAA,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAArB;AAAA,QACA,cAAcc;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAECX,KACE,gBAAAkB,EAAAO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EACE,UAAWvB,IAAA,uBAAMwB,GAAA,EAAqB,QAAQxB,EAAU,CAAA,EAC3D,CAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
1
+ {"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport { getTheme } from '../../../ui/theme/get-theme';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n src,\n title,\n onCross,\n showProgress = true,\n onTutorialPlayedOnce,\n isJourneyActive,\n}: ITutorialProps) => {\n const videoRef = useRef<HTMLVideoElement | null>(null);\n const hasVideoEnded = useRef(false);\n const seekAreaRef = useRef<HTMLDivElement | null>(null);\n\n const [progress, setProgress] = useState(0);\n const [duration, setDuration] = useState(0);\n const [isDragging, setIsDragging] = useState(false);\n const [videoWidth, setVideoWidth] = useState<number | null>(null);\n\n const { device } = getTheme();\n const tooltipTextRenderAs = device === 'mobile' ? 'ab3-bold' : 'ab2-bold';\n\n const onProgress = useCallback(\n (e: ChangeEvent<HTMLVideoElement>) => {\n if (!isDragging) {\n const current = e.target.currentTime || 0;\n const dur = e.target.duration || 1;\n const p = (current / dur) * 100;\n\n if (p >= 90 && !hasVideoEnded.current) {\n hasVideoEnded.current = true;\n onTutorialPlayedOnce?.();\n }\n\n setProgress(p);\n setDuration(dur);\n }\n },\n [onTutorialPlayedOnce, isDragging],\n );\n\n const getSeekPercentage = (e: MouseEvent | React.MouseEvent) => {\n const area = seekAreaRef.current;\n\n if (!area) return 0;\n\n const rect = area.getBoundingClientRect();\n const x = 'clientX' in e ? e.clientX : 0;\n\n return Math.max(0, Math.min(1, (x - rect.left) / rect.width));\n };\n\n const onSeekMouseDown = () => {\n if (!videoRef.current || duration === 0 || !seekAreaRef.current) return;\n\n const video = videoRef.current; // Pause video during drag\n\n video.pause();\n setIsDragging(true);\n\n const handleMouseMove = (e: MouseEvent) => {\n const percentage = getSeekPercentage(e);\n const newTime = percentage * duration;\n\n video.currentTime = newTime;\n setProgress(percentage * 100);\n };\n\n const handleMouseUp = (e: MouseEvent) => {\n const percentage = getSeekPercentage(e);\n const newTime = percentage * duration;\n\n video.currentTime = newTime;\n setProgress(percentage * 100);\n setIsDragging(false);\n\n video.play();\n\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n };\n const handleLoadedMetadata = () => {\n if (videoRef.current) {\n const width = videoRef.current.clientWidth;\n\n setVideoWidth(width);\n }\n };\n\n return (\n <Styled.GameTutorialWrapper>\n {(title || onCross) && (\n <Styled.GameTutorialHeader>\n {title && (\n <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n {title}\n </Text>\n )}\n {onCross && (\n <Styled.HeaderIconContainer>\n <CrossIcon color=\"#fff\" onClick={onCross} />\n </Styled.HeaderIconContainer>\n )}\n </Styled.GameTutorialHeader>\n )}\n\n {isJourneyActive && (\n <InfoBar hue=\"PURPLE\">\n <Text $renderAs={tooltipTextRenderAs} $color=\"WHITE_T_87\" $align=\"center\">\n Understanding the rules is always helpful before you begin.\n </Text>\n </InfoBar>\n )}\n\n <Styled.GameTutorialContainer>\n <Styled.VideoContainer>\n <video\n ref={videoRef}\n loop={true}\n onLoadedMetadata={handleLoadedMetadata}\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 && videoWidth != null && (\n <Styled.VideoProgressWrapper style={{ width: videoWidth }}>\n <Styled.VideoProgressContainer>\n {progress > 0 && <Styled.VideoProgress $width={progress} />}\n <Styled.SeekableArea onMouseDown={onSeekMouseDown} ref={seekAreaRef} />\n </Styled.VideoProgressContainer>\n </Styled.VideoProgressWrapper>\n )}\n </Styled.GameTutorialWrapper>\n );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","videoRef","useRef","hasVideoEnded","seekAreaRef","progress","setProgress","useState","duration","setDuration","isDragging","setIsDragging","videoWidth","setVideoWidth","device","getTheme","tooltipTextRenderAs","onProgress","useCallback","current","dur","p","getSeekPercentage","area","rect","x","onSeekMouseDown","video","handleMouseMove","e","percentage","newTime","handleMouseUp","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","width","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress","Styled.SeekableArea"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cuemath/leap",
3
- "version": "3.1.43",
3
+ "version": "3.1.44-akm-6",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"