@cuemath/leap 3.0.6-rj-1 → 3.0.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.
|
@@ -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
|
|
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,47 +1,48 @@
|
|
|
1
|
-
import { jsxs as c, jsx as
|
|
2
|
-
import { useState as
|
|
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
3
|
import $ from "../../../../assets/line-icons/icons/cross.js";
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
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,
|
|
9
10
|
title: o,
|
|
10
11
|
onCross: t,
|
|
11
12
|
showProgress: m = !0,
|
|
12
|
-
onTutorialPlayedOnce:
|
|
13
|
-
isJourneyActive:
|
|
13
|
+
onTutorialPlayedOnce: r,
|
|
14
|
+
isJourneyActive: u
|
|
14
15
|
}) => {
|
|
15
|
-
const [
|
|
16
|
-
(
|
|
17
|
-
const d = (
|
|
18
|
-
d >= 90 && !
|
|
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);
|
|
19
20
|
},
|
|
20
|
-
[
|
|
21
|
+
[r]
|
|
21
22
|
);
|
|
22
|
-
return /* @__PURE__ */ c(
|
|
23
|
-
(o || t) && /* @__PURE__ */ c(
|
|
24
|
-
o && /* @__PURE__ */
|
|
25
|
-
t && /* @__PURE__ */
|
|
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 }) })
|
|
26
27
|
] }),
|
|
27
|
-
|
|
28
|
-
/* @__PURE__ */
|
|
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(
|
|
29
30
|
"video",
|
|
30
31
|
{
|
|
31
32
|
loop: !0,
|
|
32
33
|
autoPlay: !0,
|
|
33
34
|
muted: !0,
|
|
34
|
-
src:
|
|
35
|
-
onTimeUpdate:
|
|
35
|
+
src: l,
|
|
36
|
+
onTimeUpdate: g,
|
|
36
37
|
disablePictureInPicture: !0,
|
|
37
38
|
itemType: "video/mp4",
|
|
38
39
|
playsInline: !0
|
|
39
40
|
}
|
|
40
41
|
) }) }),
|
|
41
|
-
m && /* @__PURE__ */
|
|
42
|
+
m && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(A, { children: i > 0 && /* @__PURE__ */ e(G, { $width: i }) }) })
|
|
42
43
|
] });
|
|
43
44
|
};
|
|
44
45
|
export {
|
|
45
|
-
|
|
46
|
+
L as Tutorial
|
|
46
47
|
};
|
|
47
48
|
//# 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 { 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 {isJourneyActive && (\n <InfoBar hue=\"PURPLE\">\n <Text $renderAs
|
|
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;"}
|