@cuemath/leap 2.8.37 → 2.8.38-hg1
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.
- package/dist/assets/lottie/lottie.js +6 -0
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js +3 -3
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js +29 -35
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star-styled.js +25 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star-styled.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js +57 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.js +27 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star-styled.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js +37 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js +35 -42
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +223 -212
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -1
- package/dist/features/circle-games/game-launcher/game-launcher-analytics-events.js +8 -7
- package/dist/features/circle-games/game-launcher/game-launcher-analytics-events.js.map +1 -1
- package/dist/features/circle-games/game-launcher/game-launcher.js +25 -24
- package/dist/features/circle-games/game-launcher/game-launcher.js.map +1 -1
- package/dist/features/circle-games/games/web-view/web-view-types.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js +17 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js +47 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js +6 -0
- package/dist/features/post-game-stats/digital-meter/comp/animated-arc/constants.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/constants.js +16 -0
- package/dist/features/post-game-stats/digital-meter/constants.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js +87 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter.js +185 -0
- package/dist/features/post-game-stats/digital-meter/digital-meter.js.map +1 -0
- package/dist/features/post-game-stats/digital-meter/helper.js +33 -0
- package/dist/features/post-game-stats/digital-meter/helper.js.map +1 -0
- package/dist/features/post-game-stats/enums/post-game-stats-enum.js +1 -1
- package/dist/features/post-game-stats/enums/post-game-stats-enum.js.map +1 -1
- package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js +29 -0
- package/dist/features/post-game-stats/number-count-animation/number-count-animation-styled.js.map +1 -0
- package/dist/features/post-game-stats/number-count-animation/number-count-animation.js +20 -0
- package/dist/features/post-game-stats/number-count-animation/number-count-animation.js.map +1 -0
- package/dist/features/post-game-stats/points/points.js +15 -10
- package/dist/features/post-game-stats/points/points.js.map +1 -1
- package/dist/features/post-game-stats/post-game-stats.js +83 -61
- package/dist/features/post-game-stats/post-game-stats.js.map +1 -1
- package/dist/index.d.ts +45 -3
- package/dist/index.js +69 -67
- package/dist/index.js.map +1 -1
- package/dist/static/point2.7cec6e24.json +1 -0
- package/dist/static/point3.f96fe7aa.json +1 -0
- package/dist/static/point4.fe04fb83.json +1 -0
- package/dist/static/table-mode-star.b8a1d762.json +1 -0
- package/dist/static/table-segment-star.78e851d6.json +1 -0
- package/dist/static/target-achieved-text.053bd142.json +2830 -0
- package/dist/static/target-achieved-text.10db8475.json +1 -0
- package/package.json +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js +0 -11
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js.map +0 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js +0 -16
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js.map +0 -1
@@ -1,29 +1,29 @@
|
|
1
1
|
import { jsx as i } from "react/jsx-runtime";
|
2
|
-
import { memo as D, useState as
|
2
|
+
import { memo as D, useState as I, useCallback as n, useMemo as h, useEffect as B } from "react";
|
3
3
|
import { LOTTIE as K } from "../../../assets/lottie/lottie.js";
|
4
|
-
import { CircularLoader as
|
5
|
-
import
|
6
|
-
import { useCircleSounds as
|
4
|
+
import { CircularLoader as O } from "../../ui/loader/circular-loader/circular-loader.js";
|
5
|
+
import U from "../../ui/lottie-animation/lottie-animation.js";
|
6
|
+
import { useCircleSounds as Y } from "../hooks/use-circle-sounds/use-circle-sounds.js";
|
7
7
|
import { CircleSoundKey as t } from "../hooks/use-circle-sounds/use-circle-sounds-enums.js";
|
8
|
-
import { GAME_LAUNCHER_SIZE as
|
8
|
+
import { GAME_LAUNCHER_SIZE as H } from "./comps/card-container/constants.js";
|
9
9
|
import { Carousel as z } from "./comps/carousel/carousel.js";
|
10
|
-
import { GAME_LAUNCHER_ASSET_PADDING as
|
10
|
+
import { GAME_LAUNCHER_ASSET_PADDING as J } from "./comps/segmented-game-card/constants.js";
|
11
11
|
import { SegmentedGameCard as f } from "./comps/segmented-game-card/segmented-game-card.js";
|
12
12
|
import { TablesCard as Z } from "./comps/tables-card/tables-card.js";
|
13
13
|
import { GAME_LAUNCHER_ANALYTICS_EVENTS as x } from "./game-launcher-analytics-events.js";
|
14
14
|
import { useGameLauncherJourney as w } from "./use-game-launcher-journey/use-game-launcher-journey.js";
|
15
15
|
import { ProjectType as m } from "../games/web-view/enums/project-type-enum.js";
|
16
|
-
const G =
|
16
|
+
const G = H + J, ne = D(
|
17
17
|
({ onSegmentClick: r, onJourneyComplete: V, journeyId: u, data: e, isLoading: g, defaultIndex: N = 0 }) => {
|
18
|
-
const [R,
|
18
|
+
const [R, M] = I(N), [p] = I(!1), { playSwipSound: c, play: o } = Y(), {
|
19
19
|
gameRefs: a,
|
20
20
|
lessonRefs: C,
|
21
21
|
puzzleRefs: L,
|
22
22
|
startJourney: E,
|
23
|
-
carouselNextBtnRef:
|
24
|
-
isJourneyInProgress:
|
23
|
+
carouselNextBtnRef: b,
|
24
|
+
isJourneyInProgress: A
|
25
25
|
} = w({
|
26
|
-
setCarouselIndex:
|
26
|
+
setCarouselIndex: M,
|
27
27
|
onSegmentClick: r,
|
28
28
|
onJourneyComplete: V
|
29
29
|
}), _ = n(
|
@@ -36,17 +36,17 @@ const G = J + O, ne = D(
|
|
36
36
|
l.status !== "completed" && (o(t.GAME_CARD_CLICK), r(l, m.LESSON));
|
37
37
|
},
|
38
38
|
[r, o]
|
39
|
-
),
|
39
|
+
), T = n(
|
40
40
|
(l) => {
|
41
41
|
o(t.GAME_CARD_CLICK), r(l, m.GAME);
|
42
42
|
},
|
43
43
|
[r, o]
|
44
|
-
),
|
44
|
+
), y = n(
|
45
45
|
(l) => {
|
46
46
|
o(t.GAME_CARD_CLICK), r(l, m.PUZZLE);
|
47
47
|
},
|
48
48
|
[r, o]
|
49
|
-
),
|
49
|
+
), S = h(() => {
|
50
50
|
let l = [];
|
51
51
|
return e && (e.lessons && (l = [
|
52
52
|
...l,
|
@@ -80,7 +80,7 @@ const G = J + O, ne = D(
|
|
80
80
|
card: s.cardLottie,
|
81
81
|
name: s.name,
|
82
82
|
isCompleted: !1,
|
83
|
-
onPress: () =>
|
83
|
+
onPress: () => T(s)
|
84
84
|
}))
|
85
85
|
}
|
86
86
|
),
|
@@ -96,7 +96,7 @@ const G = J + O, ne = D(
|
|
96
96
|
card: s.cardLottie,
|
97
97
|
name: s.name,
|
98
98
|
isCompleted: s.solved,
|
99
|
-
onPress: () =>
|
99
|
+
onPress: () => y(s)
|
100
100
|
}))
|
101
101
|
}
|
102
102
|
)
|
@@ -107,7 +107,8 @@ const G = J + O, ne = D(
|
|
107
107
|
{
|
108
108
|
label: e.tables.label,
|
109
109
|
data: e.tables.data,
|
110
|
-
onPress: _
|
110
|
+
onPress: _,
|
111
|
+
openModesOfTable: e.tables.openModesOfTable
|
111
112
|
}
|
112
113
|
)
|
113
114
|
])), l;
|
@@ -118,13 +119,13 @@ const G = J + O, ne = D(
|
|
118
119
|
L,
|
119
120
|
P,
|
120
121
|
_,
|
121
|
-
I,
|
122
122
|
y,
|
123
|
+
T,
|
123
124
|
p
|
124
125
|
]), v = h(
|
125
126
|
() => [
|
126
127
|
/* @__PURE__ */ i(
|
127
|
-
|
128
|
+
U,
|
128
129
|
{
|
129
130
|
src: K.SLEEPY_BOI,
|
130
131
|
width: G,
|
@@ -135,12 +136,12 @@ const G = J + O, ne = D(
|
|
135
136
|
[]
|
136
137
|
);
|
137
138
|
return B(() => {
|
138
|
-
e != null && e.puzzles && u &&
|
139
|
-
}, [e == null ? void 0 : e.lessons, e == null ? void 0 : e.puzzles,
|
139
|
+
e != null && e.puzzles && u && A && E(e == null ? void 0 : e.puzzles, !!(e != null && e.lessons), u);
|
140
|
+
}, [e == null ? void 0 : e.lessons, e == null ? void 0 : e.puzzles, A, u, E]), g ? /* @__PURE__ */ i(O, {}) : e ? /* @__PURE__ */ i(
|
140
141
|
z,
|
141
142
|
{
|
142
|
-
ref:
|
143
|
-
items:
|
143
|
+
ref: b,
|
144
|
+
items: S,
|
144
145
|
defaultIndex: R,
|
145
146
|
onNext: c,
|
146
147
|
onPrev: c,
|
@@ -154,7 +155,7 @@ const G = J + O, ne = D(
|
|
154
155
|
) : /* @__PURE__ */ i(
|
155
156
|
z,
|
156
157
|
{
|
157
|
-
ref:
|
158
|
+
ref: b,
|
158
159
|
items: v,
|
159
160
|
analyticsNext: {
|
160
161
|
analyticsLabel: ""
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"game-launcher.js","sources":["../../../../src/features/circle-games/game-launcher/game-launcher.tsx"],"sourcesContent":["import type { ITableDetails } from './comps/tables-card/tables-card-types';\nimport type {\n Game,\n Lesson,\n Puzzle,\n} from './dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IGameLauncherProps } from './game-launcher-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { CircularLoader } from '../../ui/loader/circular-loader/circular-loader';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { ProjectType } from '../games/web-view/enums';\nimport { useCircleSounds } from '../hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { GAME_LAUNCHER_SIZE } from './comps/card-container/constants';\nimport { Carousel } from './comps/carousel/carousel';\nimport { GAME_LAUNCHER_ASSET_PADDING } from './comps/segmented-game-card/constants';\nimport { SegmentedGameCard } from './comps/segmented-game-card/segmented-game-card';\nimport { TablesCard } from './comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from './game-launcher-analytics-events';\nimport { useGameLauncherJourney } from './use-game-launcher-journey/use-game-launcher-journey';\n\nconst sleepyBoiDimension = GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING;\n\nexport const GameLauncher: FC<IGameLauncherProps> = memo(\n ({ onSegmentClick, onJourneyComplete, journeyId, data, isLoading, defaultIndex = 0 }) => {\n const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n const [enableTables] = useState(false);\n\n const { playSwipSound, play } = useCircleSounds();\n const {\n gameRefs,\n lessonRefs,\n puzzleRefs,\n startJourney,\n carouselNextBtnRef,\n isJourneyInProgress,\n } = useGameLauncherJourney({\n setCarouselIndex: setCurrentIndex,\n onSegmentClick,\n onJourneyComplete,\n });\n\n const onTableSegmentClick = useCallback(\n (table: ITableDetails) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(table, ProjectType.TABLE);\n },\n [onSegmentClick, play],\n );\n\n const handleLessonSegmentClick = useCallback(\n (lesson: Lesson) => {\n if (lesson.status !== 'completed') {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(lesson, ProjectType.LESSON);\n }\n },\n [onSegmentClick, play],\n );\n\n const handleGameSegmentClick = useCallback(\n (game: Game) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(game, ProjectType.GAME);\n },\n [onSegmentClick, play],\n );\n\n const handlePuzzleSegmentClick = useCallback(\n (puzzle: Puzzle) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(puzzle, ProjectType.PUZZLE);\n },\n [onSegmentClick, play],\n );\n\n const items = useMemo(() => {\n let itemTypes: ReactNode[] = [];\n\n if (data) {\n if (data.lessons) {\n itemTypes = [\n ...itemTypes,\n <SegmentedGameCard\n ref={lessonRefs}\n label={data.lessons.label}\n value={data.lessons.data.filter(lesson => lesson.status === 'completed').length}\n maxValue={data.lessons.data.length}\n initialValue={data.lessons.initialProgressValue}\n data={data?.lessons.data.map(lesson => ({\n card: lesson.cardLottie,\n name: lesson.name,\n isCompleted: lesson.status === 'completed',\n onPress: () => handleLessonSegmentClick(lesson),\n }))}\n />,\n ];\n }\n\n itemTypes = [\n ...itemTypes,\n <SegmentedGameCard\n ref={gameRefs}\n label={data.games.label}\n value={data.games.data.filter(game => game.isPlayed).length}\n maxValue={data.games.data.length}\n initialValue={data.games.initialProgressValue}\n data={data.games.data.map(game => ({\n card: game.cardLottie,\n name: game.name,\n isCompleted: false,\n onPress: () => handleGameSegmentClick(game),\n }))}\n />,\n <SegmentedGameCard\n ref={puzzleRefs}\n label={data.puzzles.label}\n value={data.puzzles.data.filter(puzzle => puzzle.solved).length}\n maxValue={data.puzzles.data.length}\n initialValue={data.puzzles.initialProgressValue}\n data={data.puzzles.data.map(puzzle => ({\n card: puzzle.cardLottie,\n name: puzzle.name,\n isCompleted: puzzle.solved,\n onPress: () => handlePuzzleSegmentClick(puzzle),\n }))}\n />,\n ];\n\n if (data.tables && enableTables) {\n itemTypes = [\n ...itemTypes,\n <TablesCard\n label={data.tables.label}\n data={data.tables.data}\n onPress={onTableSegmentClick}\n />,\n ];\n }\n }\n\n return itemTypes;\n }, [\n data,\n gameRefs,\n lessonRefs,\n puzzleRefs,\n handleLessonSegmentClick,\n onTableSegmentClick,\n handlePuzzleSegmentClick,\n handleGameSegmentClick,\n enableTables,\n ]);\n\n const sleepyBoiItem = useMemo(\n () => [\n <LottieAnimation\n src={LOTTIE.SLEEPY_BOI}\n width={sleepyBoiDimension}\n height={sleepyBoiDimension}\n />,\n ],\n [],\n );\n\n // Start game launcher journey when the data for puzzles is available\n useEffect(() => {\n if (data?.puzzles && journeyId && isJourneyInProgress) {\n startJourney(data?.puzzles, !!data?.lessons, journeyId);\n }\n }, [data?.lessons, data?.puzzles, isJourneyInProgress, journeyId, startJourney]);\n\n if (isLoading) {\n return <CircularLoader />;\n }\n\n if (!data) {\n return (\n <Carousel\n ref={carouselNextBtnRef}\n items={sleepyBoiItem}\n analyticsNext={{\n analyticsLabel: '',\n }}\n analyticsPrev={{\n analyticsLabel: '',\n }}\n />\n );\n }\n\n return (\n <Carousel\n ref={carouselNextBtnRef}\n items={items}\n defaultIndex={currentIndex}\n onNext={playSwipSound}\n onPrev={playSwipSound}\n analyticsNext={{\n analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.NEXT_ACTIVITY,\n }}\n analyticsPrev={{\n analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.PREV_ACTIVITY,\n }}\n />\n );\n },\n);\n"],"names":["sleepyBoiDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GameLauncher","memo","onSegmentClick","onJourneyComplete","journeyId","data","isLoading","defaultIndex","currentIndex","setCurrentIndex","useState","enableTables","playSwipSound","play","useCircleSounds","gameRefs","lessonRefs","puzzleRefs","startJourney","carouselNextBtnRef","isJourneyInProgress","useGameLauncherJourney","onTableSegmentClick","useCallback","table","CircleSoundKey","ProjectType","handleLessonSegmentClick","lesson","handleGameSegmentClick","game","handlePuzzleSegmentClick","puzzle","items","useMemo","itemTypes","jsx","SegmentedGameCard","TablesCard","sleepyBoiItem","LottieAnimation","LOTTIE","useEffect","CircularLoader","Carousel","GAME_LAUNCHER_ANALYTICS_EVENTS"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"game-launcher.js","sources":["../../../../src/features/circle-games/game-launcher/game-launcher.tsx"],"sourcesContent":["import type { ITableDetails } from './comps/tables-card/tables-card-types';\nimport type {\n Game,\n Lesson,\n Puzzle,\n} from './dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IGameLauncherProps } from './game-launcher-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { CircularLoader } from '../../ui/loader/circular-loader/circular-loader';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { ProjectType } from '../games/web-view/enums';\nimport { useCircleSounds } from '../hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { GAME_LAUNCHER_SIZE } from './comps/card-container/constants';\nimport { Carousel } from './comps/carousel/carousel';\nimport { GAME_LAUNCHER_ASSET_PADDING } from './comps/segmented-game-card/constants';\nimport { SegmentedGameCard } from './comps/segmented-game-card/segmented-game-card';\nimport { TablesCard } from './comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from './game-launcher-analytics-events';\nimport { useGameLauncherJourney } from './use-game-launcher-journey/use-game-launcher-journey';\n\nconst sleepyBoiDimension = GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING;\n\nexport const GameLauncher: FC<IGameLauncherProps> = memo(\n ({ onSegmentClick, onJourneyComplete, journeyId, data, isLoading, defaultIndex = 0 }) => {\n const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n const [enableTables] = useState(false);\n\n const { playSwipSound, play } = useCircleSounds();\n const {\n gameRefs,\n lessonRefs,\n puzzleRefs,\n startJourney,\n carouselNextBtnRef,\n isJourneyInProgress,\n } = useGameLauncherJourney({\n setCarouselIndex: setCurrentIndex,\n onSegmentClick,\n onJourneyComplete,\n });\n\n const onTableSegmentClick = useCallback(\n (table: ITableDetails) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(table, ProjectType.TABLE);\n },\n [onSegmentClick, play],\n );\n\n const handleLessonSegmentClick = useCallback(\n (lesson: Lesson) => {\n if (lesson.status !== 'completed') {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(lesson, ProjectType.LESSON);\n }\n },\n [onSegmentClick, play],\n );\n\n const handleGameSegmentClick = useCallback(\n (game: Game) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(game, ProjectType.GAME);\n },\n [onSegmentClick, play],\n );\n\n const handlePuzzleSegmentClick = useCallback(\n (puzzle: Puzzle) => {\n play(CircleSoundKey.GAME_CARD_CLICK);\n onSegmentClick(puzzle, ProjectType.PUZZLE);\n },\n [onSegmentClick, play],\n );\n\n const items = useMemo(() => {\n let itemTypes: ReactNode[] = [];\n\n if (data) {\n if (data.lessons) {\n itemTypes = [\n ...itemTypes,\n <SegmentedGameCard\n ref={lessonRefs}\n label={data.lessons.label}\n value={data.lessons.data.filter(lesson => lesson.status === 'completed').length}\n maxValue={data.lessons.data.length}\n initialValue={data.lessons.initialProgressValue}\n data={data?.lessons.data.map(lesson => ({\n card: lesson.cardLottie,\n name: lesson.name,\n isCompleted: lesson.status === 'completed',\n onPress: () => handleLessonSegmentClick(lesson),\n }))}\n />,\n ];\n }\n\n itemTypes = [\n ...itemTypes,\n <SegmentedGameCard\n ref={gameRefs}\n label={data.games.label}\n value={data.games.data.filter(game => game.isPlayed).length}\n maxValue={data.games.data.length}\n initialValue={data.games.initialProgressValue}\n data={data.games.data.map(game => ({\n card: game.cardLottie,\n name: game.name,\n isCompleted: false,\n onPress: () => handleGameSegmentClick(game),\n }))}\n />,\n <SegmentedGameCard\n ref={puzzleRefs}\n label={data.puzzles.label}\n value={data.puzzles.data.filter(puzzle => puzzle.solved).length}\n maxValue={data.puzzles.data.length}\n initialValue={data.puzzles.initialProgressValue}\n data={data.puzzles.data.map(puzzle => ({\n card: puzzle.cardLottie,\n name: puzzle.name,\n isCompleted: puzzle.solved,\n onPress: () => handlePuzzleSegmentClick(puzzle),\n }))}\n />,\n ];\n\n if (data.tables && enableTables) {\n itemTypes = [\n ...itemTypes,\n <TablesCard\n label={data.tables.label}\n data={data.tables.data}\n onPress={onTableSegmentClick}\n openModesOfTable={data.tables.openModesOfTable}\n />,\n ];\n }\n }\n\n return itemTypes;\n }, [\n data,\n gameRefs,\n lessonRefs,\n puzzleRefs,\n handleLessonSegmentClick,\n onTableSegmentClick,\n handlePuzzleSegmentClick,\n handleGameSegmentClick,\n enableTables,\n ]);\n\n const sleepyBoiItem = useMemo(\n () => [\n <LottieAnimation\n src={LOTTIE.SLEEPY_BOI}\n width={sleepyBoiDimension}\n height={sleepyBoiDimension}\n />,\n ],\n [],\n );\n\n // Start game launcher journey when the data for puzzles is available\n useEffect(() => {\n if (data?.puzzles && journeyId && isJourneyInProgress) {\n startJourney(data?.puzzles, !!data?.lessons, journeyId);\n }\n }, [data?.lessons, data?.puzzles, isJourneyInProgress, journeyId, startJourney]);\n\n if (isLoading) {\n return <CircularLoader />;\n }\n\n if (!data) {\n return (\n <Carousel\n ref={carouselNextBtnRef}\n items={sleepyBoiItem}\n analyticsNext={{\n analyticsLabel: '',\n }}\n analyticsPrev={{\n analyticsLabel: '',\n }}\n />\n );\n }\n\n return (\n <Carousel\n ref={carouselNextBtnRef}\n items={items}\n defaultIndex={currentIndex}\n onNext={playSwipSound}\n onPrev={playSwipSound}\n analyticsNext={{\n analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.NEXT_ACTIVITY,\n }}\n analyticsPrev={{\n analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.PREV_ACTIVITY,\n }}\n />\n );\n },\n);\n"],"names":["sleepyBoiDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GameLauncher","memo","onSegmentClick","onJourneyComplete","journeyId","data","isLoading","defaultIndex","currentIndex","setCurrentIndex","useState","enableTables","playSwipSound","play","useCircleSounds","gameRefs","lessonRefs","puzzleRefs","startJourney","carouselNextBtnRef","isJourneyInProgress","useGameLauncherJourney","onTableSegmentClick","useCallback","table","CircleSoundKey","ProjectType","handleLessonSegmentClick","lesson","handleGameSegmentClick","game","handlePuzzleSegmentClick","puzzle","items","useMemo","itemTypes","jsx","SegmentedGameCard","TablesCard","sleepyBoiItem","LottieAnimation","LOTTIE","useEffect","CircularLoader","Carousel","GAME_LAUNCHER_ANALYTICS_EVENTS"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"web-view-types.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view-types.ts"],"sourcesContent":["import type { IAvatarLayer } from '../../../ui/avatar/avatar-types';\nimport type { TUserTypes } from '../../../ui/types';\nimport type { WebViewEvent, ProjectOutcome, ProjectType } from './enums';\nimport type { WEBVIEW_ANALYTICS_EVENTS } from './web-view-analytics-events';\nimport type { IframeHTMLAttributes } from 'react';\n\nexport interface IPlayer {\n id: string;\n username: string;\n grade?: string;\n avatar?: IAvatarLayer[] | null;\n playerType: TUserTypes;\n}\n\ninterface ISyncableWebGameProps {\n joinByRoomId?: string;\n enableSync?: boolean; // applicable for all except multiplayer games and tables\n}\n\ninterface IBaseWebGameProps {\n projectId: string;\n variant: string;\n projectType: ProjectType;\n enableCloseButton?: boolean;\n}\n\nexport interface IMultiplayerWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n enablePlayerTurnIndicators?: boolean;\n}\n\nexport interface IPuzzleWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n question: string;\n askHintPermission?: boolean;\n}\n\nexport interface ILessonWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n miniGameIdentifier: string;\n sessionId: string;\n targetQuestions: number;\n}\n\nexport interface ITableWebGameProps extends IBaseWebGameProps {\n tableNumber: number;\n infiniteModeHighScore?: number;\n}\n\nexport interface IVibrationPattern {\n pattern: number[] | number;\n}\n\nexport enum IStatsToAwardErrorCode {\n DEFAULT = 'default',\n SUCCESS = 'success',\n FAIL = 'fail',\n}\n\nexport interface IPlayerStats {\n points: number;\n accuracy: number;\n timeSpent: number;\n streakDays: number;\n streakStatusToday: 'pending' | 'completed';\n errorCode: IStatsToAwardErrorCode;\n outcome: ProjectOutcome;\n value: string;\n}\n\nexport interface IInfoMessage {\n message: string;\n position: 'top' | 'bottom';\n}\n\nexport interface ITrackEvent {\n eventName: typeof WEBVIEW_ANALYTICS_EVENTS;\n properties: Record<string, unknown>;\n}\n\nexport interface IWebViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {\n baseUrl: string;\n projectDetails:\n | IMultiplayerWebGameProps\n | IPuzzleWebGameProps\n | ILessonWebGameProps\n | ITableWebGameProps;\n parentDomain: string;\n playerDetails: IPlayer;\n onBack?: () => void;\n onGameLoad?: () => void;\n onGamePlayFinish?: (playerStats: IPlayerStats) => void;\n handleInfoMessage?: (infoMessage: IInfoMessage) => void;\n}\n\nexport interface IMessageProps {\n event: `${WebViewEvent}`;\n payload: IVibrationPattern | IPlayerStats | IInfoMessage | null;\n}\n"],"names":["IStatsToAwardErrorCode"],"mappings":"AAkDY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA;"}
|
1
|
+
{"version":3,"file":"web-view-types.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view-types.ts"],"sourcesContent":["import type { IAvatarLayer } from '../../../ui/avatar/avatar-types';\nimport type { TUserTypes } from '../../../ui/types';\nimport type { WebViewEvent, ProjectOutcome, ProjectType } from './enums';\nimport type { WEBVIEW_ANALYTICS_EVENTS } from './web-view-analytics-events';\nimport type { IframeHTMLAttributes } from 'react';\n\nexport interface IPlayer {\n id: string;\n username: string;\n grade?: string;\n avatar?: IAvatarLayer[] | null;\n playerType: TUserTypes;\n}\n\ninterface ISyncableWebGameProps {\n joinByRoomId?: string;\n enableSync?: boolean; // applicable for all except multiplayer games and tables\n}\n\ninterface IBaseWebGameProps {\n projectId: string;\n variant: string;\n projectType: ProjectType;\n enableCloseButton?: boolean;\n}\n\nexport interface IMultiplayerWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n enablePlayerTurnIndicators?: boolean;\n}\n\nexport interface IPuzzleWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n question: string;\n askHintPermission?: boolean;\n}\n\nexport interface ILessonWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {\n miniGameIdentifier: string;\n sessionId: string;\n targetQuestions: number;\n}\n\nexport interface ITableWebGameProps extends IBaseWebGameProps {\n tableNumber: number;\n infiniteModeHighScore?: number;\n}\n\nexport interface IVibrationPattern {\n pattern: number[] | number;\n}\n\nexport enum IStatsToAwardErrorCode {\n DEFAULT = 'default',\n SUCCESS = 'success',\n FAIL = 'fail',\n}\n\nexport interface IPlayerStats {\n points: number;\n accuracy: number;\n timeSpent: number;\n streakDays: number;\n streakStatusToday: 'pending' | 'completed';\n errorCode: IStatsToAwardErrorCode;\n outcome: ProjectOutcome;\n value: string;\n starEligibleTime?: number;\n starEligibleAccuracy?: number;\n starRewarded?: boolean;\n}\n\nexport interface IInfoMessage {\n message: string;\n position: 'top' | 'bottom';\n}\n\nexport interface ITrackEvent {\n eventName: typeof WEBVIEW_ANALYTICS_EVENTS;\n properties: Record<string, unknown>;\n}\n\nexport interface IWebViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {\n baseUrl: string;\n projectDetails:\n | IMultiplayerWebGameProps\n | IPuzzleWebGameProps\n | ILessonWebGameProps\n | ITableWebGameProps;\n parentDomain: string;\n playerDetails: IPlayer;\n onBack?: () => void;\n onGameLoad?: () => void;\n onGamePlayFinish?: (playerStats: IPlayerStats) => void;\n handleInfoMessage?: (infoMessage: IInfoMessage) => void;\n}\n\nexport interface IMessageProps {\n event: `${WebViewEvent}`;\n payload: IVibrationPattern | IPlayerStats | IInfoMessage | null;\n}\n"],"names":["IStatsToAwardErrorCode"],"mappings":"AAkDY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA;"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import i from "styled-components";
|
2
|
+
import { RAINBOW_COLOR_ANIMATION_DURATION as r } from "../../constants.js";
|
3
|
+
import { rainbowColorAnimation as n } from "../../helper.js";
|
4
|
+
import { ARC_Z_INDEX as s } from "./constants.js";
|
5
|
+
const p = i.svg`
|
6
|
+
position: absolute;
|
7
|
+
z-index: ${s};
|
8
|
+
`, A = i.path`
|
9
|
+
stroke: ${({ theme: o, stroke: t }) => o.colors[t]};
|
10
|
+
animation: ${({ $playRainbowColors: o }) => o ? n : "undefined"}
|
11
|
+
${r}s ease infinite forwards;
|
12
|
+
`;
|
13
|
+
export {
|
14
|
+
A as Path,
|
15
|
+
p as Svg
|
16
|
+
};
|
17
|
+
//# sourceMappingURL=animated-arc-styled.js.map
|
package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"animated-arc-styled.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\n\nimport styled from 'styled-components';\n\nimport { RAINBOW_COLOR_ANIMATION_DURATION } from '../../constants';\nimport { rainbowColorAnimation } from '../../helper';\nimport { ARC_Z_INDEX } from './constants';\n\nexport const Svg = styled.svg`\n position: absolute;\n z-index: ${ARC_Z_INDEX};\n`;\n\nexport const Path = styled.path<{ stroke: TColorNames; $playRainbowColors: boolean }>`\n stroke: ${({ theme, stroke }) => theme.colors[stroke]};\n animation: ${({ $playRainbowColors }) =>\n $playRainbowColors ? rainbowColorAnimation : 'undefined'}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["Svg","styled","ARC_Z_INDEX","Path","theme","stroke","$playRainbowColors","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;AAQO,MAAMA,IAAMC,EAAO;AAAA;AAAA,aAEbC,CAAW;AAAA,GAGXC,IAAOF,EAAO;AAAA,YACf,CAAC,EAAE,OAAAG,GAAO,QAAAC,EAAA,MAAaD,EAAM,OAAOC,CAAM,CAAC;AAAA,eACxC,CAAC,EAAE,oBAAAC,EAAA,MACZA,IAAqBC,IAAwB,WAAW;AAAA,MACxDC,CAAgC;AAAA;"}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
2
|
+
import { useRef as A, useLayoutEffect as $ } from "react";
|
3
|
+
import { describeArc as R } from "../../helper.js";
|
4
|
+
import { Svg as k, Path as w } from "./animated-arc-styled.js";
|
5
|
+
import { ADJUSTED_START_ANGLE as D } from "./constants.js";
|
6
|
+
const x = ({
|
7
|
+
radius: e,
|
8
|
+
strokeWidth: n,
|
9
|
+
color: h,
|
10
|
+
targetAngle: m,
|
11
|
+
startAngle: p = 0,
|
12
|
+
duration: r = 2,
|
13
|
+
mode: o = "draw",
|
14
|
+
delay: s = 0,
|
15
|
+
playRainbowColors: y = !1
|
16
|
+
}) => {
|
17
|
+
const a = A(null), g = -D + p, i = e, u = e - n / 2, c = R(i, i, u, g, m);
|
18
|
+
return $(() => {
|
19
|
+
const t = a.current;
|
20
|
+
if (t) {
|
21
|
+
if (o === "draw") {
|
22
|
+
const f = t.getTotalLength();
|
23
|
+
t.style.strokeDasharray = `${f}`, t.style.strokeDashoffset = `${f}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
|
24
|
+
t.style.transition = `stroke-dashoffset ${r}s linear ${s}s`, t.style.strokeDashoffset = "0";
|
25
|
+
});
|
26
|
+
}
|
27
|
+
o === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
|
28
|
+
t.style.transition = `opacity 0s ease-in-out ${s}s`, t.style.opacity = "1";
|
29
|
+
}));
|
30
|
+
}
|
31
|
+
}, [c, o, r, s]), /* @__PURE__ */ l(k, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ l(
|
32
|
+
w,
|
33
|
+
{
|
34
|
+
ref: a,
|
35
|
+
d: c,
|
36
|
+
fill: "none",
|
37
|
+
stroke: h,
|
38
|
+
strokeWidth: n,
|
39
|
+
strokeLinecap: "butt",
|
40
|
+
$playRainbowColors: y
|
41
|
+
}
|
42
|
+
) });
|
43
|
+
};
|
44
|
+
export {
|
45
|
+
x as AnimatedArc
|
46
|
+
};
|
47
|
+
//# sourceMappingURL=animated-arc.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"animated-arc.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect } from 'react';\n\nimport { describeArc } from '../../helper';\nimport * as Styled from './animated-arc-styled';\nimport { ADJUSTED_START_ANGLE } from './constants';\n\nexport const AnimatedArc: React.FC<IAnimatedArcProps> = ({\n radius,\n strokeWidth,\n color,\n targetAngle,\n startAngle = 0,\n duration = 2,\n mode = 'draw',\n delay = 0,\n playRainbowColors = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const adjustedStartAngle = -ADJUSTED_START_ANGLE + startAngle;\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = describeArc(center, center, arcRadius, adjustedStartAngle, targetAngle);\n\n useLayoutEffect(() => {\n const path = pathRef.current;\n\n if (!path) return;\n\n if (mode === 'draw') {\n const length = path.getTotalLength();\n\n path.style.strokeDasharray = `${length}`;\n path.style.strokeDashoffset = `${length}`;\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n path.style.strokeDashoffset = '0';\n });\n }\n\n if (mode === 'fade') {\n path.style.opacity = '0';\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `opacity 0s ease-in-out ${delay}s`;\n path.style.opacity = '1';\n });\n }\n }, [arcPath, mode, duration, delay]);\n\n return (\n <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n <Styled.Path\n ref={pathRef}\n d={arcPath}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"butt\"\n $playRainbowColors={playRainbowColors}\n />\n </Styled.Svg>\n );\n};\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","playRainbowColors","pathRef","useRef","adjustedStartAngle","ADJUSTED_START_ANGLE","center","arcRadius","arcPath","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path"],"mappings":";;;;;AAQO,MAAMA,IAA2C,CAAC;AAAA,EACvD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,mBAAAC,IAAoB;AACtB,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAAqB,CAACC,IAAuBR,GAC7CS,IAASb,GACTc,IAAYd,IAASC,IAAc,GACnCc,IAAUC,EAAYH,GAAQA,GAAQC,GAAWH,GAAoBR,CAAW;AAEtF,SAAAc,EAAgB,MAAM;AACpB,UAAMC,IAAOT,EAAQ;AAErB,QAAKS,GAEL;AAAA,UAAIZ,MAAS,QAAQ;AACb,cAAAa,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBb,CAAQ,YAAYE,CAAK,KACtEW,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIZ,MAAS,WACXY,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AACrB,QAAAA,EAAA,MAAM,aAAa,0BAA0BX,CAAK,KACvDW,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACH,GAAST,GAAMD,GAAUE,CAAK,CAAC,qBAGhCa,GAAA,EAAW,OAAO,IAAIpB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAqB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,GAAGM;AAAA,MACH,MAAK;AAAA,MACL,QAAQb;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,oBAAoBO;AAAA,IAAA;AAAA,EAExB,EAAA,CAAA;AAEJ;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../../../src/features/post-game-stats/digital-meter/comp/animated-arc/constants.ts"],"sourcesContent":["export const ARC_Z_INDEX = 1;\n\nexport const ADJUSTED_START_ANGLE = 150;\n"],"names":["ARC_Z_INDEX","ADJUSTED_START_ANGLE"],"mappings":"AAAO,MAAMA,IAAc,GAEdC,IAAuB;"}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { ARC_Z_INDEX as _ } from "./comp/animated-arc/constants.js";
|
2
|
+
const I = 300, N = 2, A = _ + 1, E = A + 1, T = E + 1, O = 99 / 30, o = 2 / 30, L = 56 / 30, t = 12 / 30, D = 20 / 30, c = 43 / 30;
|
3
|
+
export {
|
4
|
+
N as BORDER_OFFSET,
|
5
|
+
E as CONTENT_CONTAINER_Z_INDEX,
|
6
|
+
A as LINE_MARKING_Z_INDEX,
|
7
|
+
T as NUMBER_MARKING_Z_INDEX,
|
8
|
+
t as PROGRESS_FILL_DELAY,
|
9
|
+
D as PROGRESS_FILL_DURATION,
|
10
|
+
c as RAINBOW_COLOR_ANIMATION_DURATION,
|
11
|
+
L as TARGET_ACHIEVED_DELAY,
|
12
|
+
o as TARGET_HELPER_TEXT_APPEAR_DELAY,
|
13
|
+
O as TOTAL_ANIMATION_DURATION,
|
14
|
+
I as TOTAL_ARC_AVAILABLE
|
15
|
+
};
|
16
|
+
//# sourceMappingURL=constants.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/digital-meter/constants.ts"],"sourcesContent":["import { ARC_Z_INDEX } from './comp/animated-arc/constants';\n\nexport const TOTAL_ARC_AVAILABLE = 300;\n\nexport const BORDER_OFFSET = 2;\nexport const LINE_MARKING_Z_INDEX = ARC_Z_INDEX + 1;\nexport const CONTENT_CONTAINER_Z_INDEX = LINE_MARKING_Z_INDEX + 1;\nexport const NUMBER_MARKING_Z_INDEX = CONTENT_CONTAINER_Z_INDEX + 1;\n\n// animation details\nexport const TOTAL_ANIMATION_DURATION = 99 / 30; // in 99 frames\nexport const TARGET_HELPER_TEXT_APPEAR_DELAY = 2 / 30; // delay of 2 frames\nexport const TARGET_ACHIEVED_DELAY = 56 / 30; // 56 frames\nexport const PROGRESS_FILL_DELAY = 12 / 30; // delay of 12 frames\nexport const PROGRESS_FILL_DURATION = 20 / 30; // in 20 frames\nexport const RAINBOW_COLOR_ANIMATION_DURATION = 43 / 30; // 43 frames;\n"],"names":["TOTAL_ARC_AVAILABLE","BORDER_OFFSET","LINE_MARKING_Z_INDEX","ARC_Z_INDEX","CONTENT_CONTAINER_Z_INDEX","NUMBER_MARKING_Z_INDEX","TOTAL_ANIMATION_DURATION","TARGET_HELPER_TEXT_APPEAR_DELAY","TARGET_ACHIEVED_DELAY","PROGRESS_FILL_DELAY","PROGRESS_FILL_DURATION","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";AAEO,MAAMA,IAAsB,KAEtBC,IAAgB,GAChBC,IAAuBC,IAAc,GACrCC,IAA4BF,IAAuB,GACnDG,IAAyBD,IAA4B,GAGrDE,IAA2B,KAAK,IAChCC,IAAkC,IAAI,IACtCC,IAAwB,KAAK,IAC7BC,IAAsB,KAAK,IAC3BC,IAAyB,KAAK,IAC9BC,IAAmC,KAAK;"}
|
@@ -0,0 +1,87 @@
|
|
1
|
+
import o, { keyframes as e } from "styled-components";
|
2
|
+
import { GAME_LAUNCHER_SIZE as r, GAME_LAUNCHER_SIZE_LARGE as s } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
3
|
+
import i from "../../ui/text/text.js";
|
4
|
+
import { ADJUSTED_START_ANGLE as n } from "./comp/animated-arc/constants.js";
|
5
|
+
import { CONTENT_CONTAINER_Z_INDEX as l, LINE_MARKING_Z_INDEX as d, NUMBER_MARKING_Z_INDEX as m, TARGET_HELPER_TEXT_APPEAR_DELAY as a, RAINBOW_COLOR_ANIMATION_DURATION as p } from "./constants.js";
|
6
|
+
import { rainbowColorAnimation as f } from "./helper.js";
|
7
|
+
const g = o.div`
|
8
|
+
height: ${r}px;
|
9
|
+
width: ${r}px;
|
10
|
+
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
11
|
+
display: flex;
|
12
|
+
align-items: center;
|
13
|
+
justify-content: center;
|
14
|
+
position: relative;
|
15
|
+
border-radius: 100%;
|
16
|
+
border: 1px solid ${({ theme: t }) => t.colors.WHITE};
|
17
|
+
animation: ${({ $isTargetAchieved: t }) => t ? e`100%{transform: scale(1.02)}` : "unset"}
|
18
|
+
0.133s ease alternate;
|
19
|
+
`, N = o.div`
|
20
|
+
display: flex;
|
21
|
+
justify-content: center;
|
22
|
+
align-items: center;
|
23
|
+
position: absolute;
|
24
|
+
z-index: ${l};
|
25
|
+
height: 92%;
|
26
|
+
width: 92%;
|
27
|
+
border-radius: 100%;
|
28
|
+
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
29
|
+
`, b = o.div`
|
30
|
+
position: relative;
|
31
|
+
flex-grow: 1;
|
32
|
+
bottom: ${r === s ? -8 : -6}px;
|
33
|
+
`;
|
34
|
+
o.div`
|
35
|
+
position: absolute;
|
36
|
+
`;
|
37
|
+
const u = o.div`
|
38
|
+
width: ${r / 2}px;
|
39
|
+
height: 2px;
|
40
|
+
position: absolute;
|
41
|
+
background-color: ${({ theme: t }) => t.colors.BLACK_2};
|
42
|
+
transform-style: preserve-3d;
|
43
|
+
backface-visibility: hidden;
|
44
|
+
transform-origin: left;
|
45
|
+
transform: rotate(${({ $angle: t }) => -240 + t}deg);
|
46
|
+
left: ${r / 2}px;
|
47
|
+
top: ${r / 2}px;
|
48
|
+
z-index: ${d};
|
49
|
+
`, T = o.div`
|
50
|
+
position: absolute;
|
51
|
+
height: ${r - r * 0.0625 - 10}px;
|
52
|
+
transform: rotate(${({ $angle: t }) => -n + t}deg);
|
53
|
+
z-index: ${m};
|
54
|
+
`, h = o.div`
|
55
|
+
transform: rotate(${({ $angle: t }) => n - t}deg);
|
56
|
+
`, C = o.div`
|
57
|
+
position: absolute;
|
58
|
+
top: 0;
|
59
|
+
transform: ${({ top: t }) => `translateY(${t}px)`};
|
60
|
+
`, R = o(i)`
|
61
|
+
animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
|
62
|
+
ease-in-out ${a}s forwards;
|
63
|
+
`, I = o(i)`
|
64
|
+
animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
|
65
|
+
ease ${a}s forwards;
|
66
|
+
`;
|
67
|
+
o.div`
|
68
|
+
height: 100%;
|
69
|
+
width: 100%;
|
70
|
+
`;
|
71
|
+
const v = o(i)`
|
72
|
+
animation: ${({ $isTargetAchieved: t }) => t ? f : "unset"}
|
73
|
+
${p}s ease infinite forwards;
|
74
|
+
`;
|
75
|
+
export {
|
76
|
+
C as BottomAbsoluteView,
|
77
|
+
N as ContentContainer,
|
78
|
+
g as DigitalMeter,
|
79
|
+
R as HelperTextPrimary,
|
80
|
+
I as HelperTextSecondary,
|
81
|
+
u as LineMarking,
|
82
|
+
T as MarkingContainer,
|
83
|
+
h as MarkingText,
|
84
|
+
b as NumberCountContainer,
|
85
|
+
v as RainboxColorText
|
86
|
+
};
|
87
|
+
//# sourceMappingURL=digital-meter-styled.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"digital-meter-styled.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nimport {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport Text from '../../ui/text/text';\nimport { ADJUSTED_START_ANGLE } from './comp/animated-arc/constants';\nimport {\n CONTENT_CONTAINER_Z_INDEX,\n LINE_MARKING_Z_INDEX,\n NUMBER_MARKING_Z_INDEX,\n RAINBOW_COLOR_ANIMATION_DURATION,\n TARGET_HELPER_TEXT_APPEAR_DELAY,\n} from './constants';\nimport { rainbowColorAnimation } from './helper';\n\nexport const DigitalMeter = styled.div<{ $isTargetAchieved: boolean }>`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 100%;\n border: 1px solid ${({ theme }) => theme.colors.WHITE};\n animation: ${({ $isTargetAchieved }) =>\n $isTargetAchieved ? keyframes`100%{transform: scale(1.02)}` : 'unset'}\n 0.133s ease alternate;\n`;\n\nexport const ContentContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n z-index: ${CONTENT_CONTAINER_Z_INDEX};\n height: 92%;\n width: 92%;\n border-radius: 100%;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n`;\n\nexport const NumberCountContainer = styled.div`\n position: relative;\n flex-grow: 1;\n bottom: ${GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? -8 : -6}px;\n`;\n\nexport const AbsoluteView = styled.div`\n position: absolute;\n`;\n\nexport const LineMarking = styled.div<{\n $angle: number;\n}>`\n width: ${GAME_LAUNCHER_SIZE / 2}px;\n height: 2px;\n position: absolute;\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n transform-style: preserve-3d;\n backface-visibility: hidden;\n transform-origin: left;\n transform: rotate(${({ $angle }) => -240 + $angle}deg);\n left: ${GAME_LAUNCHER_SIZE / 2}px;\n top: ${GAME_LAUNCHER_SIZE / 2}px;\n z-index: ${LINE_MARKING_Z_INDEX};\n`;\n\nexport const MarkingContainer = styled.div<{ $angle: number }>`\n position: absolute;\n height: ${GAME_LAUNCHER_SIZE - GAME_LAUNCHER_SIZE * 0.0625 - 10}px;\n transform: rotate(${({ $angle }) => -ADJUSTED_START_ANGLE + $angle}deg);\n z-index: ${NUMBER_MARKING_Z_INDEX};\n`;\n\nexport const MarkingText = styled.div<{ $angle: number }>`\n transform: rotate(${({ $angle }) => ADJUSTED_START_ANGLE - $angle}deg);\n`;\n\nexport const BottomAbsoluteView = styled.div<{ top: number }>`\n position: absolute;\n top: 0;\n transform: ${({ top }) => `translateY(${top}px)`};\n`;\n\nexport const HelperTextPrimary = styled(Text)`\n animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n ease-in-out ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const HelperTextSecondary = styled(Text)`\n animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n ease ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const TargetAchievedTextLottie = styled.div`\n height: 100%;\n width: 100%;\n`;\n\nexport const RainboxColorText = styled(Text)<{ $isTargetAchieved: boolean }>`\n animation: ${({ $isTargetAchieved }) => ($isTargetAchieved ? rainbowColorAnimation : 'unset')}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["DigitalMeter","styled","GAME_LAUNCHER_SIZE","theme","$isTargetAchieved","keyframes","ContentContainer","CONTENT_CONTAINER_Z_INDEX","NumberCountContainer","GAME_LAUNCHER_SIZE_LARGE","LineMarking","$angle","LINE_MARKING_Z_INDEX","MarkingContainer","ADJUSTED_START_ANGLE","NUMBER_MARKING_Z_INDEX","MarkingText","BottomAbsoluteView","top","HelperTextPrimary","Text","TARGET_HELPER_TEXT_APPEAR_DELAY","HelperTextSecondary","RainboxColorText","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;;;AAiBO,MAAMA,IAAeC,EAAO;AAAA,YACvBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA,sBACP,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,eACxC,CAAC,EAAE,mBAAAC,QACZA,IAAoBC,kCAA0C,OAAO;AAAA;AAAA,GAI9DC,IAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAK1BM,CAAyB;AAAA;AAAA;AAAA;AAAA,sBAIhB,CAAC,EAAE,OAAAJ,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,GAG5CK,IAAuBP,EAAO;AAAA;AAAA;AAAA,YAG/BC,MAAuBO,IAA2B,KAAK,EAAE;AAAA;AAGzCR,EAAO;AAAA;AAAA;AAI5B,MAAMS,IAAcT,EAAO;AAAA,WAGvBC,IAAqB,CAAC;AAAA;AAAA;AAAA,sBAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAInC,CAAC,EAAE,QAAAQ,EAAO,MAAM,OAAOA,CAAM;AAAA,UACzCT,IAAqB,CAAC;AAAA,SACvBA,IAAqB,CAAC;AAAA,aAClBU,CAAoB;AAAA,GAGpBC,IAAmBZ,EAAO;AAAA;AAAA,YAE3BC,IAAqBA,IAAqB,SAAS,EAAE;AAAA,sBAC3C,CAAC,EAAE,QAAAS,EAAA,MAAa,CAACG,IAAuBH,CAAM;AAAA,aACvDI,CAAsB;AAAA,GAGtBC,IAAcf,EAAO;AAAA,sBACZ,CAAC,EAAE,QAAAU,QAAaG,IAAuBH,CAAM;AAAA,GAGtDM,IAAqBhB,EAAO;AAAA;AAAA;AAAA,eAG1B,CAAC,EAAE,KAAAiB,EAAU,MAAA,cAAcA,CAAG,KAAK;AAAA,GAGrCC,IAAoBlB,EAAOmB,CAAI;AAAA,eAC7Bf,iEAAyE;AAAA,kBACtEgB,CAA+B;AAAA,GAGpCC,IAAsBrB,EAAOmB,CAAI;AAAA,eAC/Bf,iEAAyE;AAAA,WAC7EgB,CAA+B;AAAA;AAGFpB,EAAO;AAAA;AAAA;AAAA;AAKlC,MAAAsB,IAAmBtB,EAAOmB,CAAI;AAAA,eAC5B,CAAC,EAAE,mBAAAhB,EAAA,MAAyBA,IAAoBoB,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}
|
@@ -0,0 +1,185 @@
|
|
1
|
+
import { jsxs as c, jsx as r, Fragment as E } from "react/jsx-runtime";
|
2
|
+
import { memo as M, useState as O, useEffect as W } from "react";
|
3
|
+
import { LOTTIE as y } from "../../../assets/lottie/lottie.js";
|
4
|
+
import { GAME_LAUNCHER_SIZE as i, GAME_LAUNCHER_SIZE_LARGE as l } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
5
|
+
import _ from "../../ui/layout/flex-view.js";
|
6
|
+
import w from "../../ui/lottie-animation/lottie-animation.js";
|
7
|
+
import $ from "../../ui/separator/separator.js";
|
8
|
+
import L from "../../ui/text/text.js";
|
9
|
+
import { NumberCountAnimation as B } from "../number-count-animation/number-count-animation.js";
|
10
|
+
import { AnimatedArc as f } from "./comp/animated-arc/animated-arc.js";
|
11
|
+
import { TARGET_ACHIEVED_DELAY as b, TOTAL_ARC_AVAILABLE as m, BORDER_OFFSET as g, PROGRESS_FILL_DURATION as s, PROGRESS_FILL_DELAY as I, TOTAL_ANIMATION_DURATION as U } from "./constants.js";
|
12
|
+
import { DigitalMeter as u, ContentContainer as P, NumberCountContainer as j, RainboxColorText as R, LineMarking as k, MarkingContainer as C, MarkingText as D, BottomAbsoluteView as N, HelperTextPrimary as Y, HelperTextSecondary as Z } from "./digital-meter-styled.js";
|
13
|
+
const tr = M(
|
14
|
+
({
|
15
|
+
show: T,
|
16
|
+
value: a,
|
17
|
+
maxValue: n,
|
18
|
+
targetValue: o = 0,
|
19
|
+
displayText: S,
|
20
|
+
progressType: d,
|
21
|
+
helperTextPrimary: G,
|
22
|
+
helperTextSecondary: H,
|
23
|
+
onComplete: p
|
24
|
+
}) => {
|
25
|
+
const [h, F] = O(!1);
|
26
|
+
return W(() => {
|
27
|
+
let t, e;
|
28
|
+
const A = !!(o && a >= o);
|
29
|
+
return T && (A && (t = setTimeout(() => {
|
30
|
+
F(!0);
|
31
|
+
}, b * 1e3)), e = setTimeout(() => {
|
32
|
+
p();
|
33
|
+
}, (A ? U : b) * 1e3)), () => {
|
34
|
+
t && clearTimeout(t), e && clearTimeout(e);
|
35
|
+
};
|
36
|
+
}, [T, a, o, p]), T ? /* @__PURE__ */ c(u, { $isTargetAchieved: h, children: [
|
37
|
+
/* @__PURE__ */ r(
|
38
|
+
f,
|
39
|
+
{
|
40
|
+
targetAngle: m,
|
41
|
+
strokeWidth: i === l ? 16 : 12,
|
42
|
+
color: "BLACK_5",
|
43
|
+
radius: (i - g) / 2,
|
44
|
+
duration: 0
|
45
|
+
}
|
46
|
+
),
|
47
|
+
/* @__PURE__ */ r(P, { children: /* @__PURE__ */ c(_, { $flexDirection: "column", $alignItems: "center", children: [
|
48
|
+
/* @__PURE__ */ c(_, { $flexDirection: "row", $alignItems: "flex-end", children: [
|
49
|
+
/* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(
|
50
|
+
R,
|
51
|
+
{
|
52
|
+
$renderAs: i === l ? "ah1" : "ah2",
|
53
|
+
$color: "GREEN_4",
|
54
|
+
$isTargetAchieved: h,
|
55
|
+
children: /* @__PURE__ */ r(
|
56
|
+
B,
|
57
|
+
{
|
58
|
+
initialValue: 0,
|
59
|
+
targetValue: Math.floor(a),
|
60
|
+
durationInSec: s,
|
61
|
+
delayInSec: I
|
62
|
+
}
|
63
|
+
)
|
64
|
+
}
|
65
|
+
) }),
|
66
|
+
d === "stepper" && /* @__PURE__ */ c(
|
67
|
+
L,
|
68
|
+
{
|
69
|
+
$renderAs: i === l ? "ah4" : "ab1",
|
70
|
+
$color: "WHITE",
|
71
|
+
children: [
|
72
|
+
"/",
|
73
|
+
n
|
74
|
+
]
|
75
|
+
}
|
76
|
+
)
|
77
|
+
] }),
|
78
|
+
/* @__PURE__ */ r($, { height: 8 }),
|
79
|
+
/* @__PURE__ */ r(
|
80
|
+
L,
|
81
|
+
{
|
82
|
+
$renderAs: i === l ? "ac3-black" : "ac4-black",
|
83
|
+
$color: "WHITE_T_60",
|
84
|
+
children: S
|
85
|
+
}
|
86
|
+
)
|
87
|
+
] }) }),
|
88
|
+
d === "stepper" && Array.from({ length: a }, (t, e) => {
|
89
|
+
const A = m / n;
|
90
|
+
return /* @__PURE__ */ r(
|
91
|
+
f,
|
92
|
+
{
|
93
|
+
startAngle: A * e,
|
94
|
+
targetAngle: A,
|
95
|
+
strokeWidth: i === l ? 16 : 12,
|
96
|
+
color: "GREEN_4",
|
97
|
+
radius: (i - g) / 2,
|
98
|
+
mode: "fade",
|
99
|
+
duration: s / n,
|
100
|
+
delay: I + s / n * e,
|
101
|
+
playRainbowColors: h
|
102
|
+
},
|
103
|
+
e
|
104
|
+
);
|
105
|
+
}),
|
106
|
+
d === "stepper" && Array.from({ length: n + 1 }, (t, e) => {
|
107
|
+
const A = m / n;
|
108
|
+
return /* @__PURE__ */ c(E, { children: [
|
109
|
+
/* @__PURE__ */ r(k, { $angle: A * e }, e + "linemarking"),
|
110
|
+
/* @__PURE__ */ r(C, { $angle: A * e, children: /* @__PURE__ */ r(D, { $angle: A * e, children: /* @__PURE__ */ r(
|
111
|
+
R,
|
112
|
+
{
|
113
|
+
$renderAs: i === l ? "ac3-black" : "ac4-black",
|
114
|
+
$isTargetAchieved: e === o && h,
|
115
|
+
$color: o && e === o ? "GREEN_4" : "WHITE_T_60",
|
116
|
+
children: e
|
117
|
+
}
|
118
|
+
) }) }, e)
|
119
|
+
] });
|
120
|
+
}),
|
121
|
+
d === "linear" && /* @__PURE__ */ c(E, { children: [
|
122
|
+
/* @__PURE__ */ r(
|
123
|
+
f,
|
124
|
+
{
|
125
|
+
targetAngle: a * m / n,
|
126
|
+
strokeWidth: i === l ? 16 : 12,
|
127
|
+
color: "GREEN_4",
|
128
|
+
radius: (i - g) / 2,
|
129
|
+
duration: s,
|
130
|
+
delay: I,
|
131
|
+
playRainbowColors: h
|
132
|
+
}
|
133
|
+
),
|
134
|
+
/* @__PURE__ */ c(E, { children: [
|
135
|
+
o && /* @__PURE__ */ r(k, { $angle: o * m / n }),
|
136
|
+
Array.from(/* @__PURE__ */ new Set([0, o, n])).map((t, e) => /* @__PURE__ */ r(
|
137
|
+
C,
|
138
|
+
{
|
139
|
+
$angle: t * m / n,
|
140
|
+
children: /* @__PURE__ */ r(D, { $angle: t * m / n, children: /* @__PURE__ */ r(
|
141
|
+
R,
|
142
|
+
{
|
143
|
+
$renderAs: i === l ? "ac3-black" : "ac4-black",
|
144
|
+
$color: o && t === o ? "GREEN_4" : "WHITE_T_60",
|
145
|
+
$isTargetAchieved: a >= t && h && t === o,
|
146
|
+
children: t
|
147
|
+
}
|
148
|
+
) })
|
149
|
+
},
|
150
|
+
e
|
151
|
+
))
|
152
|
+
] })
|
153
|
+
] }),
|
154
|
+
h && /* @__PURE__ */ r(N, { top: i, children: /* @__PURE__ */ r(w, { src: y.TARGET_ACHIEVED_TEXT }) }),
|
155
|
+
!h && /* @__PURE__ */ c(N, { top: i, children: [
|
156
|
+
/* @__PURE__ */ r($, { height: 25 }),
|
157
|
+
/* @__PURE__ */ c(_, { $flexDirection: "column", $alignItems: "center", children: [
|
158
|
+
/* @__PURE__ */ c(
|
159
|
+
Y,
|
160
|
+
{
|
161
|
+
$renderAs: i === l ? "ac3-black" : "ac4-black",
|
162
|
+
$color: "WHITE_T_60",
|
163
|
+
children: [
|
164
|
+
G,
|
165
|
+
/* @__PURE__ */ r($, { height: i * 0.03 })
|
166
|
+
]
|
167
|
+
}
|
168
|
+
),
|
169
|
+
/* @__PURE__ */ r(
|
170
|
+
Z,
|
171
|
+
{
|
172
|
+
$renderAs: i === l ? "ah4" : "ab1",
|
173
|
+
$color: "WHITE",
|
174
|
+
children: H
|
175
|
+
}
|
176
|
+
)
|
177
|
+
] })
|
178
|
+
] })
|
179
|
+
] }) : null;
|
180
|
+
}
|
181
|
+
);
|
182
|
+
export {
|
183
|
+
tr as DigitalMeter
|
184
|
+
};
|
185
|
+
//# sourceMappingURL=digital-meter.js.map
|