@cuemath/leap 2.8.36-link.0 → 2.8.36-tables-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/illustrations/illustrations.js +0 -2
- package/dist/assets/illustrations/illustrations.js.map +1 -1
- package/dist/assets/lottie/lottie.js +7 -0
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/card-container/card-container-styled.js +53 -0
- package/dist/features/circle-games/game-launcher/comps/card-container/card-container-styled.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/card-container/card-container.js +24 -0
- package/dist/features/circle-games/game-launcher/comps/card-container/card-container.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/card-container/constants.js +7 -0
- package/dist/features/circle-games/game-launcher/comps/card-container/constants.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/constants.js +6 -6
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/constants.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.js +29 -73
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js +87 -85
- package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/constants.js +20 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/constants.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js +24 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js +54 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js +11 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js +16 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js +161 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js.map +1 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +225 -0
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -0
- package/dist/features/circle-games/game-launcher/dal/use-get-circle-home-details-dal/use-get-circle-home-details-dal.js +25 -15
- package/dist/features/circle-games/game-launcher/dal/use-get-circle-home-details-dal/use-get-circle-home-details-dal.js.map +1 -1
- package/dist/features/circle-games/game-launcher/game-launcher.js +108 -65
- package/dist/features/circle-games/game-launcher/game-launcher.js.map +1 -1
- package/dist/features/circle-games/games/web-view/enums/project-type-enum.js +1 -1
- package/dist/features/circle-games/games/web-view/enums/project-type-enum.js.map +1 -1
- package/dist/features/circle-games/games/web-view/web-view-types.js.map +1 -1
- package/dist/features/circle-games/games/web-view/web-view.js +69 -82
- package/dist/features/circle-games/games/web-view/web-view.js.map +1 -1
- package/dist/features/post-game-stats/accuracy/accuracy-styled.js +17 -16
- package/dist/features/post-game-stats/accuracy/accuracy-styled.js.map +1 -1
- package/dist/features/post-game-stats/clock/clock-styled.js +11 -10
- package/dist/features/post-game-stats/clock/clock-styled.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 +86 -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 +163 -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/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 +25 -24
- package/dist/features/post-game-stats/points/points.js.map +1 -1
- package/dist/features/post-game-stats/post-game-stats-styled.js +1 -1
- package/dist/features/post-game-stats/post-game-stats-styled.js.map +1 -1
- package/dist/features/post-game-stats/streak/streak-styled.js +18 -17
- package/dist/features/post-game-stats/streak/streak-styled.js.map +1 -1
- package/dist/features/trial-session/comps/trial-circle-game/constants.js.map +1 -1
- package/dist/features/trial-session/comps/trial-circle-game/trial-circle-game.js.map +1 -1
- package/dist/index.d.ts +93 -141
- package/dist/index.js +206 -211
- package/dist/static/advance-mode-segment-lottie.51ff6707.json +1 -0
- package/dist/static/infinite-button-bg.5909225e.json +1 -0
- package/dist/static/infinite-button-symbol.aa31350c.json +1 -0
- package/dist/static/random-mode-segment-lottie.79cf1c07.json +1 -0
- package/dist/static/sequence-mode-segment-lottie.11ac49e9.json +1 -0
- package/dist/static/table-mode-reveal.b44a82c3.json +1 -0
- package/dist/static/target-achieved-text.053bd142.json +2830 -0
- package/package.json +3 -2
- package/dist/assets/sounds/sounds.js +0 -7
- package/dist/assets/sounds/sounds.js.map +0 -1
- package/dist/features/circle-games/games/web-view/enums/project-ids-enum.js +0 -14
- package/dist/features/circle-games/games/web-view/enums/project-ids-enum.js.map +0 -1
- package/dist/features/talk-meter/helper.js +0 -11
- package/dist/features/talk-meter/helper.js.map +0 -1
- package/dist/features/talk-meter/hooks/use-talk-meter.js +0 -112
- package/dist/features/talk-meter/hooks/use-talk-meter.js.map +0 -1
- package/dist/features/talk-meter/ripple/index.js +0 -62
- package/dist/features/talk-meter/ripple/index.js.map +0 -1
- package/dist/features/talk-meter/talk-meter-styled.js +0 -84
- package/dist/features/talk-meter/talk-meter-styled.js.map +0 -1
- package/dist/features/talk-meter/talk-meter-view/talk-meter-view-styled.js +0 -22
- package/dist/features/talk-meter/talk-meter-view/talk-meter-view-styled.js.map +0 -1
- package/dist/features/talk-meter/talk-meter-view/talk-meter-view.js +0 -89
- package/dist/features/talk-meter/talk-meter-view/talk-meter-view.js.map +0 -1
- package/dist/features/talk-meter/talk-meter.js +0 -71
- package/dist/features/talk-meter/talk-meter.js.map +0 -1
- package/dist/static/female-avatar.b8cd1012.svg +0 -1
- package/dist/static/male-avatar.2febc9eb.svg +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"game-launcher.js","sources":["../../../../src/features/circle-games/game-launcher/game-launcher.tsx"],"sourcesContent":["import type { IGameLauncherProps } from './game-launcher-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { memo, 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 { Carousel } from './comps/carousel/carousel';\nimport {\n GAME_LAUNCHER_ASSET_PADDING,\n GAME_LAUNCHER_SIZE,\n} from './comps/segmented-game-card/constants';\nimport { SegmentedGameCard } from './comps/segmented-game-card/segmented-game-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\n const { playSwipSound } = useCircleSounds();\n\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 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: () =>\n lesson.status === 'completed'\n ? undefined\n : onSegmentClick(lesson, ProjectType.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: () => onSegmentClick(game, ProjectType.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: () => onSegmentClick(puzzle, ProjectType.PUZZLE),\n }))}\n />,\n ];\n }\n\n return itemTypes;\n }, [data, gameRefs, lessonRefs, onSegmentClick, puzzleRefs]);\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","playSwipSound","useCircleSounds","gameRefs","lessonRefs","puzzleRefs","startJourney","carouselNextBtnRef","isJourneyInProgress","useGameLauncherJourney","items","useMemo","itemTypes","jsx","SegmentedGameCard","lesson","ProjectType","game","puzzle","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 />,\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":"project-type-enum.js","sources":["../../../../../../src/features/circle-games/games/web-view/enums/project-type-enum.ts"],"sourcesContent":["export enum ProjectType {\n GAME = 'game',\n PUZZLE = 'puzzle',\n LESSON = 'lesson',\n}\n"],"names":["ProjectType"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,SAAS,
|
1
|
+
{"version":3,"file":"project-type-enum.js","sources":["../../../../../../src/features/circle-games/games/web-view/enums/project-type-enum.ts"],"sourcesContent":["export enum ProjectType {\n GAME = 'game',\n PUZZLE = 'puzzle',\n LESSON = 'lesson',\n TABLE = 'table',\n}\n"],"names":["ProjectType"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;"}
|
@@ -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 {
|
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,115 +1,102 @@
|
|
1
|
-
import { jsx as
|
2
|
-
import { forwardRef as
|
3
|
-
import { useUIContext as
|
1
|
+
import { jsx as P } from "react/jsx-runtime";
|
2
|
+
import { forwardRef as G, useRef as W, useMemo as _, useCallback as T, useImperativeHandle as V, useEffect as $ } from "react";
|
3
|
+
import { useUIContext as B } from "../../../ui/context/context.js";
|
4
4
|
import { ALLOWED_ORIGIN as N } from "./constants.js";
|
5
|
-
import { ProjectType as
|
6
|
-
import { WebViewEvent as
|
7
|
-
const
|
5
|
+
import { ProjectType as s } from "./enums/project-type-enum.js";
|
6
|
+
import { WebViewEvent as o } from "./enums/web-view-events-enum.js";
|
7
|
+
const F = G((C, I) => {
|
8
8
|
const {
|
9
|
-
baseUrl:
|
10
|
-
projectDetails:
|
11
|
-
playerDetails:
|
9
|
+
baseUrl: L,
|
10
|
+
projectDetails: y,
|
11
|
+
playerDetails: v,
|
12
12
|
onGameLoad: a,
|
13
|
-
onGamePlayFinish:
|
14
|
-
handleInfoMessage:
|
15
|
-
onBack:
|
16
|
-
parentDomain:
|
17
|
-
...
|
18
|
-
} = C, l = W(null),
|
19
|
-
let
|
20
|
-
const { onEvent:
|
21
|
-
|
22
|
-
const m =
|
23
|
-
const {
|
24
|
-
enableCloseButton: r = !0,
|
25
|
-
enablePlayerTurnIndicators: s = !1,
|
26
|
-
enableSync: t = !1,
|
27
|
-
joinByRoomId: E = ""
|
28
|
-
} = o;
|
13
|
+
onGamePlayFinish: p,
|
14
|
+
handleInfoMessage: c,
|
15
|
+
onBack: f,
|
16
|
+
parentDomain: w,
|
17
|
+
...R
|
18
|
+
} = C, l = W(null), D = _(() => v, [v]), t = _(() => y, [y]);
|
19
|
+
let A = "";
|
20
|
+
const { onEvent: O } = B();
|
21
|
+
t.projectType === s.LESSON && (A = t.miniGameIdentifier);
|
22
|
+
const m = T(() => {
|
23
|
+
const { enableCloseButton: n = !0 } = t;
|
29
24
|
let e = {
|
30
|
-
|
31
|
-
enableCloseButton: r,
|
32
|
-
enablePlayerTurnIndicators: s,
|
33
|
-
enableSync: t
|
25
|
+
enableCloseButton: n
|
34
26
|
};
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
e
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
return e;
|
53
|
-
}, [o]), d = A(() => {
|
54
|
-
var s, t;
|
55
|
-
const r = m();
|
56
|
-
(t = (s = l.current) == null ? void 0 : s.contentWindow) == null || t.postMessage(
|
27
|
+
return t.projectType === s.GAME && (e = {
|
28
|
+
...e,
|
29
|
+
...t
|
30
|
+
}), t.projectType === s.PUZZLE && (e = {
|
31
|
+
...e,
|
32
|
+
...t
|
33
|
+
}), t.projectType === s.LESSON && (e = {
|
34
|
+
...e,
|
35
|
+
...t
|
36
|
+
}), t.projectType === s.TABLE && (e = {
|
37
|
+
...e,
|
38
|
+
...t
|
39
|
+
}), e;
|
40
|
+
}, [t]), E = T(() => {
|
41
|
+
var e, r;
|
42
|
+
const n = m();
|
43
|
+
(r = (e = l.current) == null ? void 0 : e.contentWindow) == null || r.postMessage(
|
57
44
|
JSON.stringify({
|
58
|
-
event:
|
59
|
-
payload:
|
45
|
+
event: o.GAME_DATA,
|
46
|
+
payload: n
|
60
47
|
}),
|
61
48
|
N
|
62
49
|
);
|
63
|
-
}, [m]),
|
64
|
-
var
|
65
|
-
const
|
66
|
-
(
|
50
|
+
}, [m]), g = T(() => {
|
51
|
+
var e, r;
|
52
|
+
const n = m();
|
53
|
+
(r = (e = l.current) == null ? void 0 : e.contentWindow) == null || r.postMessage(
|
67
54
|
JSON.stringify({
|
68
|
-
event:
|
55
|
+
event: o.SET_CONFIG,
|
69
56
|
payload: {
|
70
|
-
user:
|
71
|
-
projectConfig:
|
72
|
-
parentDomain:
|
57
|
+
user: D,
|
58
|
+
projectConfig: n,
|
59
|
+
parentDomain: w
|
73
60
|
}
|
74
61
|
}),
|
75
62
|
N
|
76
63
|
);
|
77
|
-
}, [
|
78
|
-
return
|
79
|
-
const
|
80
|
-
var
|
81
|
-
const
|
82
|
-
if (
|
83
|
-
const { pattern:
|
84
|
-
(
|
64
|
+
}, [D, m, w]);
|
65
|
+
return V(I, () => l.current, []), $(() => {
|
66
|
+
const n = (e) => {
|
67
|
+
var j, S;
|
68
|
+
const r = e.data, b = typeof r == "string" ? JSON.parse(r) : r, { event: i, payload: d = null } = b;
|
69
|
+
if (i === o.VIBRATE) {
|
70
|
+
const { pattern: u } = d;
|
71
|
+
(S = (j = window.navigator).vibrate) == null || S.call(j, u);
|
85
72
|
}
|
86
|
-
if (
|
87
|
-
const { eventName:
|
88
|
-
|
73
|
+
if (i === o.GAME_BACK && (f == null || f()), i === o.HIDE_LOADER && (a == null || a()), i === o.LOAD_DATA_FROM_APP && (E == null || E()), i === o.GET_CONFIG && g(), i === o.UPDATE_STATS && (p == null || p(d)), i === o.SHOW_SNACKBAR && (c == null || c(d)), i === o.TRACK_EVENT) {
|
74
|
+
const { eventName: u, properties: M } = d;
|
75
|
+
O(u, M);
|
89
76
|
}
|
90
77
|
};
|
91
|
-
return window.addEventListener("message",
|
92
|
-
window.removeEventListener("message",
|
78
|
+
return window.addEventListener("message", n), () => {
|
79
|
+
window.removeEventListener("message", n);
|
93
80
|
};
|
94
81
|
}, [
|
82
|
+
c,
|
95
83
|
f,
|
96
84
|
p,
|
97
|
-
c,
|
98
85
|
a,
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
]), /* @__PURE__ */
|
86
|
+
g,
|
87
|
+
E,
|
88
|
+
O
|
89
|
+
]), /* @__PURE__ */ P(
|
103
90
|
"iframe",
|
104
91
|
{
|
105
|
-
...
|
92
|
+
...R,
|
106
93
|
ref: l,
|
107
|
-
src: `${
|
94
|
+
src: `${L}/play-game/${t.projectId}/${t.variant}${A ? `/${A}` : ""}?version=2`,
|
108
95
|
allow: "autoplay"
|
109
96
|
}
|
110
97
|
);
|
111
98
|
});
|
112
99
|
export {
|
113
|
-
|
100
|
+
F as WebView
|
114
101
|
};
|
115
102
|
//# sourceMappingURL=web-view.js.map
|
@@ -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 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 { 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 {
|
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 { 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 window.navigator.vibrate?.(pattern);\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 return (\n <iframe\n {...rest}\n ref={webViewRef}\n src={`${baseUrl}/play-game/${memoizedProjectDetails.projectId}/${\n memoizedProjectDetails.variant\n }${miniGameIdentifier ? `/${miniGameIdentifier}` : ''}?version=2`}\n allow=\"autoplay\"\n />\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","jsx"],"mappings":"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"}
|
@@ -1,20 +1,21 @@
|
|
1
|
-
import o, { keyframes as
|
2
|
-
import { GAME_LAUNCHER_SIZE as t
|
3
|
-
|
1
|
+
import o, { keyframes as r, css as s } from "styled-components";
|
2
|
+
import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
3
|
+
import { GAME_LAUNCHER_ASSET_PADDING as a } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
|
4
|
+
const p = 50 * 84 / 100, c = r`
|
4
5
|
0%{
|
5
6
|
opacity: 0;
|
6
7
|
}
|
7
8
|
100%{
|
8
9
|
opacity: 1;
|
9
10
|
}
|
10
|
-
`, d =
|
11
|
+
`, d = r`
|
11
12
|
0%{
|
12
13
|
opacity: 1;
|
13
14
|
}
|
14
15
|
100%{
|
15
16
|
opacity: 0;
|
16
17
|
}
|
17
|
-
`,
|
18
|
+
`, m = o.div`
|
18
19
|
height: ${t}px;
|
19
20
|
width: ${t}px;
|
20
21
|
background: transparent;
|
@@ -28,40 +29,40 @@ const p = 50 * 84 / 100, c = s`
|
|
28
29
|
position: absolute;
|
29
30
|
flex: 1;
|
30
31
|
z-index: 1;
|
31
|
-
`,
|
32
|
+
`, y = o.div`
|
32
33
|
height: ${t + a}px;
|
33
34
|
width: ${t + a}px;
|
34
35
|
position: absolute;
|
35
36
|
z-index: 2;
|
36
37
|
transform: ${({ $translateX: e = 0, $translateY: i = 0, $rotate: n = 0 }) => `translateX(${e}px) translateY(${i}px) rotate(${n}deg)`};
|
37
|
-
`,
|
38
|
+
`, A = o.div`
|
38
39
|
height: 100%;
|
39
40
|
width: 100%;
|
40
|
-
`,
|
41
|
+
`, h = o.div`
|
41
42
|
z-index: 2;
|
42
43
|
opacity: 0;
|
43
44
|
position: absolute;
|
44
|
-
animation: ${({ $animationType: e, $duration: i, $delay: n }) =>
|
45
|
+
animation: ${({ $animationType: e, $duration: i, $delay: n }) => s`
|
45
46
|
${e === "fadein" ? c : d} ${i}ms ${n}ms ease forwards
|
46
47
|
`};
|
47
48
|
transform: translateY(${(t + p) * 84 / 200 + 25}px);
|
48
|
-
`,
|
49
|
+
`, u = o.div`
|
49
50
|
position: absolute;
|
50
51
|
z-index: 20;
|
51
52
|
display: flex;
|
52
53
|
flex-direction: row;
|
53
54
|
align-items: flex-end;
|
54
55
|
|
55
|
-
${({ $animationType: e, $duration: i }) => e && i &&
|
56
|
+
${({ $animationType: e, $duration: i }) => e && i && s`
|
56
57
|
animation: ${e === "fadein" ? c : d} ${i}ms linear forwards;
|
57
58
|
`}
|
58
59
|
`;
|
59
60
|
export {
|
60
|
-
|
61
|
+
m as Accuracy,
|
61
62
|
$ as AccuracyMeterLottie,
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
63
|
+
A as AccuracyNeedleLottie,
|
64
|
+
y as AnimatedAccuracyNeedleContainer,
|
65
|
+
u as PercentTextWrapper,
|
66
|
+
h as TextWrapper
|
66
67
|
};
|
67
68
|
//# sourceMappingURL=accuracy-styled.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"accuracy-styled.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport {
|
1
|
+
{"version":3,"file":"accuracy-styled.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n 0%{\n opacity: 0;\n }\n 100%{\n opacity: 1;\n }\n`;\n\nconst fadeOut = keyframes`\n 0%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n`;\n\nexport const Accuracy = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const AccuracyMeterLottie = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n flex: 1;\n z-index: 1;\n`;\n\nexport const AnimatedAccuracyNeedleContainer = styled.div<{\n $translateX?: number;\n $translateY?: number;\n $rotate?: number;\n}>`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 2;\n transform: ${({ $translateX = 0, $translateY = 0, $rotate = 0 }) =>\n `translateX(${$translateX}px) translateY(${$translateY}px) rotate(${$rotate}deg)`};\n`;\n\nexport const AccuracyNeedleLottie = styled.div`\n height: 100%;\n width: 100%;\n`;\n\nexport const TextWrapper = styled.div<{\n $duration: number;\n $delay: number;\n $animationType: 'fadein' | 'fadeout';\n}>`\n z-index: 2;\n opacity: 0;\n position: absolute;\n animation: ${({ $animationType, $duration, $delay }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n `};\n transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n\nexport const PercentTextWrapper = styled.div<{\n $animationType?: 'fadein' | 'fadeout';\n $duration?: number;\n}>`\n position: absolute;\n z-index: 20;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n\n ${({ $animationType, $duration }) =>\n $animationType &&\n $duration &&\n css`\n animation: ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards;\n `}\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Accuracy","styled","GAME_LAUNCHER_SIZE","AccuracyMeterLottie","GAME_LAUNCHER_ASSET_PADDING","AnimatedAccuracyNeedleContainer","$translateX","$translateY","$rotate","AccuracyNeedleLottie","TextWrapper","$animationType","$duration","$delay","css","PercentTextWrapper"],"mappings":";;;AAKA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAAWC,EAAO;AAAA,YACnBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAsBF,EAAO;AAAA,YAC9BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA;AAAA,GAM9CC,IAAkCJ,EAAO;AAAA,YAK1CC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,eAG5C,CAAC,EAAE,aAAAE,IAAc,GAAG,aAAAC,IAAc,GAAG,SAAAC,IAAU,EAAE,MAC5D,cAAcF,CAAW,kBAAkBC,CAAW,cAAcC,CAAO,MAAM;AAAA,GAGxEC,IAAuBR,EAAO;AAAA;AAAA;AAAA,GAK9BS,IAAcT,EAAO;AAAA;AAAA;AAAA;AAAA,eAQnB,CAAC,EAAE,gBAAAU,GAAgB,WAAAC,GAAW,QAAAC,QAAaC;AAAA,MACpDH,MAAmB,WAAWd,IAASE,CAAO,IAAIa,CAAS,MAAMC,CAAM;AAAA,GAC1E;AAAA,2BACyBX,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA,GAGlEmB,IAAqBd,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUrC,CAAC,EAAE,gBAAAU,GAAgB,WAAAC,EAAU,MAC7BD,KACAC,KACAE;AAAA,mBACeH,MAAmB,WAAWd,IAASE,CAAO,IAAIa,CAAS;AAAA,KACzE;AAAA;"}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import o, { keyframes as e, css as p } from "styled-components";
|
2
|
-
import { GAME_LAUNCHER_SIZE as t
|
3
|
-
|
2
|
+
import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
3
|
+
import { GAME_LAUNCHER_ASSET_PADDING as i } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
|
4
|
+
const r = 50 * 84 / 100, c = e`
|
4
5
|
0%{
|
5
6
|
opacity: 0;
|
6
7
|
}
|
@@ -14,7 +15,7 @@ const c = 50 * 84 / 100, r = e`
|
|
14
15
|
100%{
|
15
16
|
opacity: 0;
|
16
17
|
}
|
17
|
-
`,
|
18
|
+
`, f = o.div`
|
18
19
|
height: ${t}px;
|
19
20
|
width: ${t}px;
|
20
21
|
background: transparent;
|
@@ -27,24 +28,24 @@ const c = 50 * 84 / 100, r = e`
|
|
27
28
|
width: ${t + i}px;
|
28
29
|
position: absolute;
|
29
30
|
z-index: 1;
|
30
|
-
`,
|
31
|
+
`, h = o.div`
|
31
32
|
height: ${t + i}px;
|
32
33
|
width: ${t + i}px;
|
33
34
|
position: absolute;
|
34
35
|
z-index: 2;
|
35
|
-
`,
|
36
|
+
`, y = o.div`
|
36
37
|
z-index: 2;
|
37
38
|
opacity: 0;
|
38
39
|
position: absolute;
|
39
40
|
animation: ${({ $animationType: n, $duration: s, $delay: a }) => p`
|
40
|
-
${n === "fadein" ?
|
41
|
+
${n === "fadein" ? c : d} ${s}ms ${a}ms ease forwards
|
41
42
|
`};
|
42
|
-
transform: translateY(${(t +
|
43
|
+
transform: translateY(${(t + r) * 84 / 200 + 25}px);
|
43
44
|
`;
|
44
45
|
export {
|
45
|
-
|
46
|
+
f as Clock,
|
46
47
|
$ as ClockLottie,
|
47
|
-
|
48
|
-
|
48
|
+
h as ClockTimeSpentLottie,
|
49
|
+
y as TextWrapper
|
49
50
|
};
|
50
51
|
//# sourceMappingURL=clock-styled.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"clock-styled.js","sources":["../../../../src/features/post-game-stats/clock/clock-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport {
|
1
|
+
{"version":3,"file":"clock-styled.js","sources":["../../../../src/features/post-game-stats/clock/clock-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n 0%{\n opacity: 0;\n }\n 100%{\n opacity: 1;\n }\n`;\n\nconst fadeOut = keyframes`\n 0%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n`;\n\nexport const Clock = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const ClockLottie = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 1;\n`;\n\nexport const ClockTimeSpentLottie = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 2;\n`;\n\nexport const TextWrapper = styled.div<{\n $duration: number;\n $delay: number;\n $animationType: 'fadein' | 'fadeout';\n}>`\n z-index: 2;\n opacity: 0;\n position: absolute;\n animation: ${({ $animationType, $duration, $delay }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n `};\n transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Clock","styled","GAME_LAUNCHER_SIZE","ClockLottie","GAME_LAUNCHER_ASSET_PADDING","ClockTimeSpentLottie","TextWrapper","$animationType","$duration","$delay","css"],"mappings":";;;AAKA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAAQC,EAAO;AAAA,YAChBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAcF,EAAO;AAAA,YACtBC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAK9CC,IAAuBJ,EAAO;AAAA,YAC/BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAK9CE,IAAcL,EAAO;AAAA;AAAA;AAAA;AAAA,eAQnB,CAAC,EAAE,gBAAAM,GAAgB,WAAAC,GAAW,QAAAC,QAAaC;AAAA,MACpDH,MAAmB,WAAWV,IAASE,CAAO,IAAIS,CAAS,MAAMC,CAAM;AAAA,GAC1E;AAAA,2BACyBP,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}
|
@@ -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;"}
|