@cuemath/leap 3.1.36 → 3.1.37-akm-1
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.
|
@@ -1,48 +1,67 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { getTheme as
|
|
6
|
-
import { InfoBar as
|
|
7
|
-
import { GameTutorialWrapper as
|
|
8
|
-
const
|
|
9
|
-
src:
|
|
10
|
-
title:
|
|
11
|
-
onCross:
|
|
12
|
-
showProgress:
|
|
13
|
-
onTutorialPlayedOnce:
|
|
14
|
-
isJourneyActive:
|
|
1
|
+
import { jsxs as b, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as l, useState as p, useCallback as D } from "react";
|
|
3
|
+
import L from "../../../../assets/line-icons/icons/cross.js";
|
|
4
|
+
import E from "../../../ui/text/text.js";
|
|
5
|
+
import { getTheme as V } from "../../../ui/theme/get-theme.js";
|
|
6
|
+
import { InfoBar as H } from "../../comps/info-bar/info-bar.js";
|
|
7
|
+
import { GameTutorialWrapper as U, GameTutorialHeader as W, HeaderIconContainer as k, GameTutorialContainer as A, VideoContainer as G, VideoProgressWrapper as S, VideoProgressContainer as j, VideoProgress as B } from "./tutorial-styled.js";
|
|
8
|
+
const N = ({
|
|
9
|
+
src: I,
|
|
10
|
+
title: c,
|
|
11
|
+
onCross: u,
|
|
12
|
+
showProgress: x = !0,
|
|
13
|
+
onTutorialPlayedOnce: i,
|
|
14
|
+
isJourneyActive: M
|
|
15
15
|
}) => {
|
|
16
|
-
const [
|
|
17
|
-
(
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
const s = l(null), f = l(!1), g = l(null), [h, a] = p(0), [d, $] = p(0), [w, v] = p(!1), { device: C } = V(), P = C === "mobile" ? "ab3-bold" : "ab2-bold", R = D(
|
|
17
|
+
(t) => {
|
|
18
|
+
if (!w) {
|
|
19
|
+
const o = t.target.currentTime || 0, n = t.target.duration || 1, r = o / n * 100;
|
|
20
|
+
r >= 90 && !f.current && (f.current = !0, i == null || i()), a(r), $(n);
|
|
21
|
+
}
|
|
20
22
|
},
|
|
21
|
-
[
|
|
22
|
-
)
|
|
23
|
-
|
|
24
|
-
(o
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
[i, w]
|
|
24
|
+
), T = (t) => {
|
|
25
|
+
const o = g.current;
|
|
26
|
+
if (!o) return 0;
|
|
27
|
+
const n = o.getBoundingClientRect(), r = "clientX" in t ? t.clientX : 0;
|
|
28
|
+
return Math.max(0, Math.min(1, (r - n.left) / n.width));
|
|
29
|
+
};
|
|
30
|
+
return /* @__PURE__ */ b(U, { ref: g, onMouseDown: () => {
|
|
31
|
+
if (!s.current || d === 0) return;
|
|
32
|
+
v(!0);
|
|
33
|
+
const t = (n) => {
|
|
34
|
+
const r = T(n), m = r * d;
|
|
35
|
+
s.current.currentTime = m, a(r * 100);
|
|
36
|
+
}, o = (n) => {
|
|
37
|
+
const r = T(n), m = r * d;
|
|
38
|
+
s.current.currentTime = m, a(r * 100), v(!1), window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", o);
|
|
39
|
+
};
|
|
40
|
+
window.addEventListener("mousemove", t), window.addEventListener("mouseup", o);
|
|
41
|
+
}, children: [
|
|
42
|
+
(c || u) && /* @__PURE__ */ b(W, { children: [
|
|
43
|
+
c && /* @__PURE__ */ e(E, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: c }),
|
|
44
|
+
u && /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(L, { color: "#fff", onClick: u }) })
|
|
27
45
|
] }),
|
|
28
|
-
|
|
29
|
-
/* @__PURE__ */ e(
|
|
46
|
+
M && /* @__PURE__ */ e(H, { hue: "PURPLE", children: /* @__PURE__ */ e(E, { $renderAs: P, $color: "WHITE_T_87", $align: "center", children: "Understanding the rules is always helpful before you begin." }) }),
|
|
47
|
+
/* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
|
|
30
48
|
"video",
|
|
31
49
|
{
|
|
50
|
+
ref: s,
|
|
32
51
|
loop: !0,
|
|
33
52
|
autoPlay: !0,
|
|
34
53
|
muted: !0,
|
|
35
|
-
src:
|
|
36
|
-
onTimeUpdate:
|
|
54
|
+
src: I,
|
|
55
|
+
onTimeUpdate: R,
|
|
37
56
|
disablePictureInPicture: !0,
|
|
38
57
|
itemType: "video/mp4",
|
|
39
58
|
playsInline: !0
|
|
40
59
|
}
|
|
41
60
|
) }) }),
|
|
42
|
-
|
|
61
|
+
x && /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(j, { children: h > 0 && /* @__PURE__ */ e(B, { $width: h }) }) })
|
|
43
62
|
] });
|
|
44
63
|
};
|
|
45
64
|
export {
|
|
46
|
-
|
|
65
|
+
N as Tutorial
|
|
47
66
|
};
|
|
48
67
|
//# 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
|
|
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\n const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n const [progress, setProgress] = useState(0);\n const [duration, setDuration] = useState(0);\n const [isDragging, setIsDragging] = useState(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 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 getSeekPercentageFromScreen = (e: MouseEvent | React.MouseEvent) => {\n const wrapper = wrapperRef.current;\n\n if (!wrapper) return 0;\n\n const rect = wrapper.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 onMouseDown = () => {\n if (!videoRef.current || duration === 0) return;\n\n setIsDragging(true);\n\n const handleMouseMove = (moveEvent: MouseEvent) => {\n const percentage = getSeekPercentageFromScreen(moveEvent);\n const newTime = percentage * duration;\n\n videoRef.current!.currentTime = newTime;\n setProgress(percentage * 100);\n };\n\n const handleMouseUp = (upEvent: MouseEvent) => {\n const percentage = getSeekPercentageFromScreen(upEvent);\n const newTime = percentage * duration;\n\n videoRef.current!.currentTime = newTime;\n setProgress(percentage * 100);\n setIsDragging(false);\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n };\n\n return (\n <Styled.GameTutorialWrapper ref={wrapperRef} onMouseDown={onMouseDown}>\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 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","videoRef","useRef","hasVideoEnded","wrapperRef","progress","setProgress","useState","duration","setDuration","isDragging","setIsDragging","device","getTheme","tooltipTextRenderAs","onProgress","useCallback","e","current","dur","p","getSeekPercentageFromScreen","wrapper","rect","x","Styled.GameTutorialWrapper","handleMouseMove","moveEvent","percentage","newTime","handleMouseUp","upEvent","jsxs","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":"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"}
|