@cuemath/leap 3.0.11-akm → 3.0.11-akm-3
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,100 +1,133 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { useUIContext as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { ALLOWED_ORIGIN as
|
|
7
|
-
import { ProjectType as
|
|
1
|
+
import { jsxs as V, jsx as y } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as $, useRef as P, useMemo as R, useCallback as A, useImperativeHandle as G, useEffect as x } from "react";
|
|
3
|
+
import { useUIContext as B } from "../../../ui/context/context.js";
|
|
4
|
+
import J from "../../../ui/layout/flex-view.js";
|
|
5
|
+
import I from "../../../ui/separator/separator.js";
|
|
6
|
+
import { ALLOWED_ORIGIN as _ } from "./constants.js";
|
|
7
|
+
import { ProjectType as a } from "./enums/project-type-enum.js";
|
|
8
8
|
import { WebViewEvent as o } from "./enums/web-view-events-enum.js";
|
|
9
|
-
const X =
|
|
9
|
+
const X = $((h, C) => {
|
|
10
10
|
const {
|
|
11
|
-
baseUrl:
|
|
12
|
-
projectDetails:
|
|
11
|
+
baseUrl: b,
|
|
12
|
+
projectDetails: T,
|
|
13
13
|
playerDetails: E,
|
|
14
|
-
onGameLoad:
|
|
14
|
+
onGameLoad: n,
|
|
15
15
|
onGamePlayFinish: c,
|
|
16
16
|
handleInfoMessage: p,
|
|
17
17
|
onBack: f,
|
|
18
|
-
parentDomain:
|
|
19
|
-
...
|
|
20
|
-
} =
|
|
21
|
-
let
|
|
22
|
-
const { onEvent:
|
|
23
|
-
t.projectType ===
|
|
24
|
-
const l =
|
|
25
|
-
const { enableCloseButton:
|
|
18
|
+
parentDomain: g,
|
|
19
|
+
...W
|
|
20
|
+
} = h, m = P(null), N = R(() => E, [E]), t = R(() => T, [T]);
|
|
21
|
+
let u = "";
|
|
22
|
+
const { onEvent: j } = B();
|
|
23
|
+
t.projectType === a.LESSON && (u = t.miniGameIdentifier);
|
|
24
|
+
const l = A(() => {
|
|
25
|
+
const { enableCloseButton: i = !0 } = t;
|
|
26
26
|
let e = {
|
|
27
|
-
enableCloseButton:
|
|
27
|
+
enableCloseButton: i
|
|
28
28
|
};
|
|
29
|
-
return t.projectType ===
|
|
29
|
+
return t.projectType === a.GAME && (e = {
|
|
30
30
|
...e,
|
|
31
31
|
...t
|
|
32
|
-
}), t.projectType ===
|
|
32
|
+
}), t.projectType === a.PUZZLE && (e = {
|
|
33
33
|
...e,
|
|
34
34
|
...t
|
|
35
|
-
}), t.projectType ===
|
|
35
|
+
}), t.projectType === a.LESSON && (e = {
|
|
36
36
|
...e,
|
|
37
37
|
...t
|
|
38
|
-
}), t.projectType ===
|
|
38
|
+
}), t.projectType === a.TABLE && (e = {
|
|
39
39
|
...e,
|
|
40
40
|
...t
|
|
41
41
|
}), e;
|
|
42
|
-
}, [t]),
|
|
43
|
-
var e,
|
|
44
|
-
const
|
|
45
|
-
(
|
|
42
|
+
}, [t]), w = A(() => {
|
|
43
|
+
var e, r;
|
|
44
|
+
const i = l();
|
|
45
|
+
(r = (e = m.current) == null ? void 0 : e.contentWindow) == null || r.postMessage(
|
|
46
46
|
JSON.stringify({
|
|
47
47
|
event: o.GAME_DATA,
|
|
48
|
-
payload:
|
|
48
|
+
payload: i
|
|
49
49
|
}),
|
|
50
|
-
|
|
50
|
+
_
|
|
51
51
|
);
|
|
52
|
-
}, [l]),
|
|
53
|
-
var e,
|
|
54
|
-
const
|
|
55
|
-
(
|
|
52
|
+
}, [l]), O = A(() => {
|
|
53
|
+
var e, r;
|
|
54
|
+
const i = l();
|
|
55
|
+
(r = (e = m.current) == null ? void 0 : e.contentWindow) == null || r.postMessage(
|
|
56
56
|
JSON.stringify({
|
|
57
57
|
event: o.SET_CONFIG,
|
|
58
58
|
payload: {
|
|
59
|
-
user:
|
|
60
|
-
projectConfig:
|
|
61
|
-
parentDomain:
|
|
59
|
+
user: N,
|
|
60
|
+
projectConfig: i,
|
|
61
|
+
parentDomain: g
|
|
62
62
|
}
|
|
63
63
|
}),
|
|
64
|
-
|
|
64
|
+
_
|
|
65
65
|
);
|
|
66
|
-
}, [
|
|
67
|
-
|
|
68
|
-
const
|
|
69
|
-
var
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
66
|
+
}, [N, l, g]);
|
|
67
|
+
G(C, () => m.current, []), x(() => {
|
|
68
|
+
const i = (e) => {
|
|
69
|
+
var S, D;
|
|
70
|
+
const r = e.data;
|
|
71
|
+
let s;
|
|
72
|
+
if (typeof r == "string" && (r.trim().startsWith("{") || r.trim().startsWith("[")))
|
|
73
|
+
try {
|
|
74
|
+
s = JSON.parse(r);
|
|
75
|
+
} catch {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
else typeof r == "object" && "event" in r && (s = r);
|
|
79
|
+
if (!s || typeof s != "object" || !("event" in s))
|
|
80
|
+
return;
|
|
81
|
+
const { event: L, payload: d = null } = s;
|
|
82
|
+
switch (L) {
|
|
83
|
+
case o.VIBRATE: {
|
|
84
|
+
const { pattern: v } = d;
|
|
85
|
+
window.ReactNativeWebView ? window.ReactNativeWebView.postMessage(JSON.stringify(s)) : (D = (S = window.navigator).vibrate) == null || D.call(S, v);
|
|
86
|
+
break;
|
|
87
|
+
}
|
|
88
|
+
case o.GAME_BACK:
|
|
89
|
+
f == null || f();
|
|
90
|
+
break;
|
|
91
|
+
case o.HIDE_LOADER:
|
|
92
|
+
n == null || n();
|
|
93
|
+
break;
|
|
94
|
+
case o.LOAD_DATA_FROM_APP:
|
|
95
|
+
w == null || w();
|
|
96
|
+
break;
|
|
97
|
+
case o.GET_CONFIG:
|
|
98
|
+
O();
|
|
99
|
+
break;
|
|
100
|
+
case o.UPDATE_STATS:
|
|
101
|
+
c == null || c(d);
|
|
102
|
+
break;
|
|
103
|
+
case o.SHOW_SNACKBAR:
|
|
104
|
+
p == null || p(d);
|
|
105
|
+
break;
|
|
106
|
+
case o.TRACK_EVENT: {
|
|
107
|
+
const { eventName: v, properties: M } = d;
|
|
108
|
+
j(v, M);
|
|
109
|
+
break;
|
|
110
|
+
}
|
|
78
111
|
}
|
|
79
112
|
};
|
|
80
|
-
return window.addEventListener("message",
|
|
81
|
-
window.removeEventListener("message",
|
|
113
|
+
return window.addEventListener("message", i), () => {
|
|
114
|
+
window.removeEventListener("message", i);
|
|
82
115
|
};
|
|
83
116
|
}, [
|
|
84
117
|
p,
|
|
85
118
|
f,
|
|
86
119
|
c,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
120
|
+
n,
|
|
121
|
+
O,
|
|
122
|
+
w,
|
|
123
|
+
j
|
|
91
124
|
]);
|
|
92
|
-
const
|
|
93
|
-
return /* @__PURE__ */
|
|
94
|
-
/* @__PURE__ */
|
|
95
|
-
/* @__PURE__ */
|
|
125
|
+
const k = E.isAdmin ? b : `${b}/play-game/${t.projectId}/${t.variant}${u ? `/${u}` : ""}`;
|
|
126
|
+
return /* @__PURE__ */ V(J, { $height: "100%", $width: "100%", children: [
|
|
127
|
+
/* @__PURE__ */ y(I, { height: window.ReactNativeTopInset || 0 }),
|
|
128
|
+
/* @__PURE__ */ y("iframe", { ...W, ref: m, src: `${k}?version=2`, allow: "autoplay" }),
|
|
96
129
|
";",
|
|
97
|
-
/* @__PURE__ */
|
|
130
|
+
/* @__PURE__ */ y(I, { height: window.ReactNativeBottomInset || 0 })
|
|
98
131
|
] });
|
|
99
132
|
});
|
|
100
133
|
export {
|
|
@@ -1 +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":"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"}
|
|
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 = e.data;\n let parsedData;\n\n if (\n typeof data === 'string' &&\n (data.trim().startsWith('{') || data.trim().startsWith('['))\n ) {\n try {\n // Still need to guard against parse errors here\n parsedData = JSON.parse(data);\n } catch {\n // Do nothing — malformed JSON, ignore\n return;\n }\n } else if (typeof data === 'object' && 'event' in data) {\n parsedData = data as IMessageProps;\n }\n\n if (!parsedData || typeof parsedData !== 'object' || !('event' in parsedData)) {\n return; // Not a valid message we care about\n }\n\n const { event, payload = null } = parsedData;\n\n switch (event) {\n case 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 break;\n }\n\n case WebViewEvent.GAME_BACK:\n onBack?.();\n break;\n\n case WebViewEvent.HIDE_LOADER:\n onGameLoad?.();\n break;\n\n case WebViewEvent.LOAD_DATA_FROM_APP:\n sendGamesData?.();\n break;\n\n case WebViewEvent.GET_CONFIG:\n setConfig();\n break;\n\n case WebViewEvent.UPDATE_STATS:\n onGamePlayFinish?.(payload as IPlayerStats);\n break;\n\n case WebViewEvent.SHOW_SNACKBAR:\n handleInfoMessage?.(payload as IInfoMessage);\n break;\n\n case WebViewEvent.TRACK_EVENT: {\n const { eventName, properties } = payload;\n\n trackEvent(eventName, properties);\n break;\n }\n\n default:\n // Unknown event — no-op\n break;\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":"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"}
|
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
import { jsxs as K, jsx as
|
|
2
|
-
import
|
|
3
|
-
import { memo as g, useState as h, useRef as o, useCallback as
|
|
4
|
-
import { LOTTIE as
|
|
1
|
+
import { jsxs as K, jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import I from "lottie-web";
|
|
3
|
+
import { memo as g, useState as h, useRef as o, useCallback as T, useEffect as j } from "react";
|
|
4
|
+
import { LOTTIE as k } from "../../../assets/lottie/lottie.js";
|
|
5
5
|
import { useCircleSounds as x } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
|
|
6
|
-
import { CircleSoundKey as
|
|
7
|
-
import { delay as
|
|
6
|
+
import { CircleSoundKey as R } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
|
|
7
|
+
import { delay as D } from "../../utils/utils.js";
|
|
8
8
|
import { Clock as U, ClockLottie as $, ClockTimeSpentLottie as w, TextWrapper as X } from "./clock-styled.js";
|
|
9
9
|
import { getClockTimeSpentFramesToPlay as Y } from "./clock-util.js";
|
|
10
10
|
import { CLOCK_TIME_SPENT_FPS as H, CLOCK as N, CLOCK_INFRAME_LOTTIE_TO_PLAY as W, TIME_LOTTIE_TO_PLAY_IN as b, TEXT_DISAPPEAR_DURATION as q, TEXT_APPEAR_DURATION as z, TIME_SHOWN_HOLD_TIME as B, TEXT_DISAPPEAR_DELAY as G } from "./constants.js";
|
|
11
|
-
const
|
|
12
|
-
const { play: c } = x(), [
|
|
13
|
-
var
|
|
14
|
-
const r = Y(
|
|
15
|
-
r && (
|
|
16
|
-
}, [
|
|
17
|
-
var r,
|
|
18
|
-
await
|
|
19
|
-
var
|
|
20
|
-
|
|
11
|
+
const it = g(({ show: s, onComplete: i, timeInMs: f, helperText: p }) => {
|
|
12
|
+
const { play: c } = x(), [L, F] = h(!1), m = o(!1), l = o(0), d = o(null), E = o(null), a = o(), n = o(), _ = T(() => {
|
|
13
|
+
var t, e;
|
|
14
|
+
const r = Y(f);
|
|
15
|
+
r && (l.current = r, (t = n.current) == null || t.setSpeed(r / H), (e = n.current) == null || e.playSegments([0, r], !0), m.current = !0);
|
|
16
|
+
}, [f]), S = T(async () => {
|
|
17
|
+
var r, t;
|
|
18
|
+
await D(B), (r = n.current) == null || r.playSegments([l.current, 0], !0), await D(G), F(!0), m.current && ((t = n.current) == null || t.addEventListener("complete", () => {
|
|
19
|
+
var e;
|
|
20
|
+
c(R.CLOCK_OUT), (e = a.current) == null || e.playSegments(N.OUT_FRAMES, !0);
|
|
21
21
|
}));
|
|
22
|
-
}, [
|
|
22
|
+
}, [l, c]), A = T(() => {
|
|
23
23
|
i == null || i();
|
|
24
24
|
}, [i]);
|
|
25
25
|
return j(() => {
|
|
26
|
-
if (
|
|
26
|
+
if (s)
|
|
27
27
|
return (async () => {
|
|
28
|
-
var C, y
|
|
29
|
-
const [
|
|
30
|
-
fetch(
|
|
31
|
-
fetch(
|
|
32
|
-
]), [
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
var O, C, y;
|
|
29
|
+
const [t, e] = await Promise.all([
|
|
30
|
+
fetch(k.TOTAL_TIME),
|
|
31
|
+
fetch(k.TOTAL_TIME_SPENT)
|
|
32
|
+
]), [M, v] = await Promise.all([
|
|
33
|
+
t.json(),
|
|
34
|
+
e.json()
|
|
35
35
|
]);
|
|
36
|
-
a.current =
|
|
36
|
+
a.current = I.loadAnimation({
|
|
37
37
|
container: d.current,
|
|
38
|
-
animationData:
|
|
38
|
+
animationData: M,
|
|
39
39
|
autoplay: !1,
|
|
40
40
|
loop: !1,
|
|
41
41
|
renderer: "canvas"
|
|
42
|
-
}), n.current =
|
|
43
|
-
container:
|
|
44
|
-
animationData:
|
|
42
|
+
}), n.current = I.loadAnimation({
|
|
43
|
+
container: E.current,
|
|
44
|
+
animationData: v,
|
|
45
45
|
autoplay: !1,
|
|
46
46
|
loop: !1,
|
|
47
47
|
renderer: "canvas"
|
|
48
|
-
}), c(
|
|
49
|
-
|
|
50
|
-
}), (
|
|
51
|
-
var
|
|
52
|
-
(
|
|
48
|
+
}), c(R.CLOCK_IN), (O = a.current) == null || O.playSegments(N.IN_FRAMES, !0), (C = a.current) == null || C.addEventListener("complete", () => {
|
|
49
|
+
m.current ? A() : _();
|
|
50
|
+
}), (y = n.current) == null || y.addEventListener("complete", () => {
|
|
51
|
+
var P;
|
|
52
|
+
(P = n.current) == null || P.removeEventListener("complete"), S();
|
|
53
53
|
});
|
|
54
54
|
})(), () => {
|
|
55
|
-
var
|
|
56
|
-
(
|
|
55
|
+
var t, e;
|
|
56
|
+
(t = a.current) == null || t.destroy(), (e = n.current) == null || e.destroy();
|
|
57
57
|
};
|
|
58
|
-
}, [
|
|
59
|
-
/* @__PURE__ */
|
|
60
|
-
/* @__PURE__ */
|
|
61
|
-
|
|
58
|
+
}, [s, _, A, S, c]), s ? /* @__PURE__ */ K(U, { children: [
|
|
59
|
+
/* @__PURE__ */ u($, { ref: d }),
|
|
60
|
+
/* @__PURE__ */ u(w, { ref: E }),
|
|
61
|
+
p && /* @__PURE__ */ u(
|
|
62
62
|
X,
|
|
63
63
|
{
|
|
64
64
|
$delay: W + b,
|
|
65
|
-
$animationType:
|
|
66
|
-
$duration:
|
|
67
|
-
children:
|
|
65
|
+
$animationType: L ? "fadeout" : "fadein",
|
|
66
|
+
$duration: L ? q : z,
|
|
67
|
+
children: p
|
|
68
68
|
}
|
|
69
69
|
)
|
|
70
70
|
] }) : null;
|
|
71
71
|
});
|
|
72
72
|
export {
|
|
73
|
-
|
|
73
|
+
it as Clock
|
|
74
74
|
};
|
|
75
75
|
//# sourceMappingURL=clock.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clock.js","sources":["../../../../src/features/post-game-stats/clock/clock.tsx"],"sourcesContent":["import type { IClockProps } from './clock-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { delay } from '../../utils/utils';\nimport * as Styled from './clock-styled';\nimport { getClockTimeSpentFramesToPlay } from './clock-util';\nimport {\n CLOCK,\n CLOCK_TIME_SPENT_FPS,\n TIME_SHOWN_HOLD_TIME,\n TEXT_APPEAR_DURATION,\n TEXT_DISAPPEAR_DELAY,\n TEXT_DISAPPEAR_DURATION,\n CLOCK_INFRAME_LOTTIE_TO_PLAY,\n TIME_LOTTIE_TO_PLAY_IN,\n} from './constants';\n\nexport const Clock: FC<IClockProps> = memo(({ show, onComplete, timeInMs, helperText }) => {\n const { play } = useCircleSounds();\n const [fadeOut, setFadeOut] = useState(false);\n const isClockTimeSpentShown = useRef(false);\n const framesToPlay = useRef(0);\n\n const clockLottieContainerRef = useRef<HTMLDivElement>(null);\n const clockTimeSpentLottieContainerRef = useRef<HTMLDivElement>(null);\n const clockLottieAnimationRef = useRef<AnimationItem>();\n const clockTimeSpentLottieAnimationRef = useRef<AnimationItem>();\n\n const setClockTimeSpentFrames = useCallback(() => {\n const frames = getClockTimeSpentFramesToPlay(timeInMs);\n\n if (frames) {\n framesToPlay.current = frames;\n // Speed adjustment\n clockTimeSpentLottieAnimationRef.current?.setSpeed(frames / CLOCK_TIME_SPENT_FPS);\n clockTimeSpentLottieAnimationRef.current?.playSegments([0, frames], true);\n isClockTimeSpentShown.current = true;\n }\n }, [timeInMs]);\n\n const onClockTimeSpentExitAnimationFinished = useCallback(async () => {\n await delay(TIME_SHOWN_HOLD_TIME);\n\n // Reverse play time spent animation\n clockTimeSpentLottieAnimationRef.current?.playSegments([framesToPlay.current, 0], true);\n\n await delay(TEXT_DISAPPEAR_DELAY);\n setFadeOut(true);\n\n if (isClockTimeSpentShown.current) {\n clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n
|
|
1
|
+
{"version":3,"file":"clock.js","sources":["../../../../src/features/post-game-stats/clock/clock.tsx"],"sourcesContent":["import type { IClockProps } from './clock-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { delay } from '../../utils/utils';\nimport * as Styled from './clock-styled';\nimport { getClockTimeSpentFramesToPlay } from './clock-util';\nimport {\n CLOCK,\n CLOCK_TIME_SPENT_FPS,\n TIME_SHOWN_HOLD_TIME,\n TEXT_APPEAR_DURATION,\n TEXT_DISAPPEAR_DELAY,\n TEXT_DISAPPEAR_DURATION,\n CLOCK_INFRAME_LOTTIE_TO_PLAY,\n TIME_LOTTIE_TO_PLAY_IN,\n} from './constants';\n\nexport const Clock: FC<IClockProps> = memo(({ show, onComplete, timeInMs, helperText }) => {\n const { play } = useCircleSounds();\n const [fadeOut, setFadeOut] = useState(false);\n const isClockTimeSpentShown = useRef(false);\n const framesToPlay = useRef(0);\n\n const clockLottieContainerRef = useRef<HTMLDivElement>(null);\n const clockTimeSpentLottieContainerRef = useRef<HTMLDivElement>(null);\n const clockLottieAnimationRef = useRef<AnimationItem>();\n const clockTimeSpentLottieAnimationRef = useRef<AnimationItem>();\n\n const setClockTimeSpentFrames = useCallback(() => {\n const frames = getClockTimeSpentFramesToPlay(timeInMs);\n\n if (frames) {\n framesToPlay.current = frames;\n // Speed adjustment\n clockTimeSpentLottieAnimationRef.current?.setSpeed(frames / CLOCK_TIME_SPENT_FPS);\n clockTimeSpentLottieAnimationRef.current?.playSegments([0, frames], true);\n isClockTimeSpentShown.current = true;\n }\n }, [timeInMs]);\n\n const onClockTimeSpentExitAnimationFinished = useCallback(async () => {\n await delay(TIME_SHOWN_HOLD_TIME);\n\n // Reverse play time spent animation\n clockTimeSpentLottieAnimationRef.current?.playSegments([framesToPlay.current, 0], true);\n\n await delay(TEXT_DISAPPEAR_DELAY);\n setFadeOut(true);\n\n if (isClockTimeSpentShown.current) {\n clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n play(CircleSoundKey.CLOCK_OUT);\n clockLottieAnimationRef.current?.playSegments(CLOCK.OUT_FRAMES, true);\n });\n }\n }, [framesToPlay, play]);\n\n const onAnimationEnd = useCallback(() => {\n onComplete?.();\n }, [onComplete]);\n\n // Play entry animation\n useEffect(() => {\n if (show) {\n const loadAnimations = async () => {\n const [timeLottiePath, timeSpentLottiePath] = await Promise.all([\n fetch(LOTTIE.TOTAL_TIME),\n fetch(LOTTIE.TOTAL_TIME_SPENT),\n ]);\n const [timeLottieData, timeSpentLottieData] = await Promise.all([\n timeLottiePath.json(),\n timeSpentLottiePath.json(),\n ]);\n\n // Clock Lottie\n clockLottieAnimationRef.current = Lottie.loadAnimation({\n container: clockLottieContainerRef.current as Element,\n animationData: timeLottieData,\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n });\n\n // Clock Time Spent Lottie\n clockTimeSpentLottieAnimationRef.current = Lottie.loadAnimation({\n container: clockTimeSpentLottieContainerRef.current as Element,\n animationData: timeSpentLottieData,\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n });\n\n // Play clock in animation sounds and lottie\n play(CircleSoundKey.CLOCK_IN);\n clockLottieAnimationRef.current?.playSegments(CLOCK.IN_FRAMES, true);\n\n clockLottieAnimationRef.current?.addEventListener('complete', () => {\n if (!isClockTimeSpentShown.current) {\n setClockTimeSpentFrames();\n } else {\n onAnimationEnd();\n }\n });\n\n // Setup event listener for time spent animation\n clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n clockTimeSpentLottieAnimationRef.current?.removeEventListener('complete');\n onClockTimeSpentExitAnimationFinished();\n });\n };\n\n loadAnimations();\n\n return () => {\n clockLottieAnimationRef.current?.destroy();\n clockTimeSpentLottieAnimationRef.current?.destroy();\n };\n }\n }, [show, setClockTimeSpentFrames, onAnimationEnd, onClockTimeSpentExitAnimationFinished, play]);\n\n if (show) {\n return (\n <Styled.Clock>\n <Styled.ClockLottie ref={clockLottieContainerRef} />\n <Styled.ClockTimeSpentLottie ref={clockTimeSpentLottieContainerRef} />\n {helperText && (\n <Styled.TextWrapper\n $delay={CLOCK_INFRAME_LOTTIE_TO_PLAY + TIME_LOTTIE_TO_PLAY_IN}\n $animationType={fadeOut ? 'fadeout' : 'fadein'}\n $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n >\n {helperText}\n </Styled.TextWrapper>\n )}\n </Styled.Clock>\n );\n }\n\n return null;\n});\n"],"names":["Clock","memo","show","onComplete","timeInMs","helperText","play","useCircleSounds","fadeOut","setFadeOut","useState","isClockTimeSpentShown","useRef","framesToPlay","clockLottieContainerRef","clockTimeSpentLottieContainerRef","clockLottieAnimationRef","clockTimeSpentLottieAnimationRef","setClockTimeSpentFrames","useCallback","frames","getClockTimeSpentFramesToPlay","_a","CLOCK_TIME_SPENT_FPS","_b","onClockTimeSpentExitAnimationFinished","delay","TIME_SHOWN_HOLD_TIME","TEXT_DISAPPEAR_DELAY","CircleSoundKey","CLOCK","onAnimationEnd","useEffect","timeLottiePath","timeSpentLottiePath","LOTTIE","timeLottieData","timeSpentLottieData","Lottie","_c","jsxs","Styled.Clock","jsx","Styled.ClockLottie","Styled.ClockTimeSpentLottie","Styled.TextWrapper","CLOCK_INFRAME_LOTTIE_TO_PLAY","TIME_LOTTIE_TO_PLAY_IN","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION"],"mappings":"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"}
|