@cuemath/leap 2.8.52-link.2 → 2.8.52

package/dist/features/milestone/start/milestone-start.js.map

@@ -1 +1 @@
-{"version":3,"file":"milestone-start.js","sources":["../../../../src/features/milestone/start/milestone-start.tsx"],"sourcesContent":["import type { IMilestoneStartProps } from './milestone-start-types';\n\nimport { capitalize } from 'humanize-plus';\nimport React, { memo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Button from '../../ui/buttons/button/button';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\n\nconst MilestoneStart: React.FC<IMilestoneStartProps> = memo(\n  ({ userType, studentName = '', handleOnClick }) => {\n    const { PUZZLE_STUDENT } = ILLUSTRATIONS;\n    const isTeacher = userType === 'TEACHER';\n    const height = isTeacher ? '100%' : 'calc(100vh - 56px)';\n\n    return (\n      <FlexView $alignItems=\"center\" $height={height} $justifyContent=\"center\">\n        <FlexView\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n          $widthX={40}\n          $gapX={2.125}\n          $gutterX={5.3125}\n          $background=\"YELLOW_1\"\n          $borderColor=\"WHITE_5\"\n          $flexGapX={1.5}\n        >\n          {isTeacher ? (\n            <Text $renderAs=\"h4\" $align=\"center\">\n              Create {capitalize(studentName)}'s learning plan by adding their first goal.\n            </Text>\n          ) : (\n            <Text $renderAs=\"h4\" $widthX={28.125} $align=\"center\">\n              Waiting for your teacher to create your personalized learning plan...\n            </Text>\n          )}\n\n          <Image\n            withLoader={false}\n            src={PUZZLE_STUDENT}\n            width={240}\n            height={100}\n            alt=\"goal-planner\"\n          />\n\n          {isTeacher && <Button renderAs=\"secondary\" label=\"Add a Goal\" onClick={handleOnClick} />}\n        </FlexView>\n      </FlexView>\n    );\n  },\n);\n\nexport default MilestoneStart;\n"],"names":["MilestoneStart","memo","userType","studentName","handleOnClick","PUZZLE_STUDENT","ILLUSTRATIONS","isTeacher","FlexView","jsxs","Text","capitalize","jsx","Image","Button","MilestoneStart$1"],"mappings":";;;;;;;;AAWA,MAAMA,IAAiDC;AAAA,EACrD,CAAC,EAAE,UAAAC,GAAU,aAAAC,IAAc,IAAI,eAAAC,QAAoB;AAC3C,UAAA,EAAE,gBAAAC,EAAmB,IAAAC,GACrBC,IAAYL,MAAa;AAG/B,6BACGM,GAAS,EAAA,aAAY,UAAS,SAHlBD,IAAY,SAAS,sBAGc,iBAAgB,UAC9D,UAAA,gBAAAE;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,WAAW;AAAA,QAEV,UAAA;AAAA,UAAAD,IACE,gBAAAE,EAAAC,GAAA,EAAK,WAAU,MAAK,QAAO,UAAS,UAAA;AAAA,YAAA;AAAA,YAC3BC,EAAAA,WAAWR,CAAW;AAAA,YAAE;AAAA,UAClC,EAAA,CAAA,sBAECO,GAAK,EAAA,WAAU,MAAK,SAAS,QAAQ,QAAO,UAAS,UAEtD,wEAAA,CAAA;AAAA,UAGF,gBAAAE;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,KAAKR;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAI;AAAA,YAAA;AAAA,UACN;AAAA,UAECE,uBAAcO,GAAO,EAAA,UAAS,aAAY,OAAM,cAAa,SAASV,GAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAE1F,EAAA,CAAA;AAAA,EAEJ;AACF,GAEAW,IAAef;"}
+{"version":3,"file":"milestone-start.js","sources":["../../../../src/features/milestone/start/milestone-start.tsx"],"sourcesContent":["import type { IMilestoneStartProps } from './milestone-start-types';\n\nimport { capitalize } from 'humanize-plus';\nimport React, { memo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Button from '../../ui/buttons/button/button';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\n\nconst MilestoneStart: React.FC<IMilestoneStartProps> = memo(\n  ({ userType, studentName = '', handleOnClick }) => {\n    const { PUZZLE_STUDENT } = ILLUSTRATIONS;\n    const isTeacher = userType === 'TEACHER';\n    const height = isTeacher ? '100%' : 'calc(100vh - 56px)';\n\n    return (\n      <FlexView $alignItems=\"center\" $height={height} $justifyContent=\"center\">\n        <FlexView\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n          $widthX={40}\n          $gapX={2.125}\n          $gutterX={5.3125}\n          $background=\"YELLOW_1\"\n          $borderColor=\"WHITE_5\"\n          $flexGapX={1.5}\n        >\n          {isTeacher ? (\n            <Text $renderAs=\"h4\" $align=\"center\">\n              Create {capitalize(studentName)}'s learning plan by adding their first goal.\n            </Text>\n          ) : (\n            <Text $renderAs=\"h4\" $widthX={28.125} $align=\"center\">\n              Waiting for your teacher to create your personalized learning plan...\n            </Text>\n          )}\n\n          <Image\n            withLoader={false}\n            src={PUZZLE_STUDENT}\n            width={240}\n            height={100}\n            alt=\"goal-planner\"\n          />\n\n          {isTeacher && <Button renderAs=\"secondary\" label=\"Add a Goal\" onClick={handleOnClick} />}\n        </FlexView>\n      </FlexView>\n    );\n  },\n);\n\nexport default MilestoneStart;\n"],"names":["MilestoneStart","memo","userType","studentName","handleOnClick","PUZZLE_STUDENT","ILLUSTRATIONS","isTeacher","FlexView","jsxs","Text","capitalize","jsx","Image","Button"],"mappings":";;;;;;;;AAWA,MAAMA,IAAiDC;AAAA,EACrD,CAAC,EAAE,UAAAC,GAAU,aAAAC,IAAc,IAAI,eAAAC,QAAoB;AAC3C,UAAA,EAAE,gBAAAC,MAAmBC,GACrBC,IAAYL,MAAa;AAG/B,6BACGM,GAAS,EAAA,aAAY,UAAS,SAHlBD,IAAY,SAAS,sBAGc,iBAAgB,UAC9D,UAAA,gBAAAE;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,WAAW;AAAA,QAEV,UAAA;AAAA,UAAAD,IACE,gBAAAE,EAAAC,GAAA,EAAK,WAAU,MAAK,QAAO,UAAS,UAAA;AAAA,YAAA;AAAA,YAC3BC,EAAAA,WAAWR,CAAW;AAAA,YAAE;AAAA,UAClC,EAAA,CAAA,sBAECO,GAAK,EAAA,WAAU,MAAK,SAAS,QAAQ,QAAO,UAAS,UAEtD,wEAAA,CAAA;AAAA,UAGF,gBAAAE;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,KAAKR;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAI;AAAA,YAAA;AAAA,UACN;AAAA,UAECE,uBAAcO,GAAO,EAAA,UAAS,aAAY,OAAM,cAAa,SAASV,EAAe,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE1F;AAAA,EAAA;AAGN;"}

package/dist/features/pointer-sync/hooks/use-pointer-sync.js

@@ -1,23 +1,23 @@
-import { useRemotePeers as a, useAVActions as b, useAVMessage as d } from "@cuemath/av";
-import { useRef as l, useCallback as t, useMemo as P } from "react";
-const R = ({
+import { useRemotePeers as S, useAVActions as b, useAVMessage as d } from "@cuemath/av";
+import { useRef as l, useCallback as n, useMemo as R } from "react";
+const A = ({
   userType: c,
   targetUserId: O
 }) => {
   var N;
-  const r = c === "STUDENT" ? "STUDENT_MOUSE_POINTER_POSITION_CHANGED" : "TEACHER_MOUSE_POINTER_POSITION_CHANGED", _ = c === "STUDENT" ? "TEACHER_MOUSE_POINTER_POSITION_CHANGED" : "STUDENT_MOUSE_POINTER_POSITION_CHANGED", s = (N = a().find(
+  const r = c === "STUDENT" ? "STUDENT_MOUSE_POINTER_POSITION_CHANGED" : "TEACHER_MOUSE_POINTER_POSITION_CHANGED", _ = c === "STUDENT" ? "TEACHER_MOUSE_POINTER_POSITION_CHANGED" : "STUDENT_MOUSE_POINTER_POSITION_CHANGED", s = (N = S().find(
     (e) => c === "STUDENT" ? e.userType === "teacher" : e.userId === O
-  )) == null ? void 0 : N.id, { sendMessage: u } = b(), n = l({}), i = t((e, o) => {
-    n.current = { ...n.current, [e]: o };
-  }, []), E = t(
+  )) == null ? void 0 : N.id, { sendMessage: u } = b(), t = l({}), i = n((e, o) => {
+    t.current = { ...t.current, [e]: o };
+  }, []), E = n(
     (e) => {
       s && u(r, e, s);
     },
     [s, r, u]
-  ), I = t((e, o) => {
-    const T = o.id, M = n.current[T];
+  ), I = n((e, o) => {
+    const T = o.id, M = t.current[T];
     T && M && M(o);
-  }, []), S = P(() => s ? {
+  }, []), a = R(() => s ? {
     publishMouseMove: E,
     susbcribeMouseMove: i
   } : {
@@ -27,9 +27,9 @@ const R = ({
   return d({
     type: _,
     onMessage: I
-  }), S;
-}, D = R;
+  }), a;
+};
 export {
-  D as default
+  A as default
 };
 //# sourceMappingURL=use-pointer-sync.js.map

package/dist/features/pointer-sync/hooks/use-pointer-sync.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-pointer-sync.js","sources":["../../../../src/features/pointer-sync/hooks/use-pointer-sync.ts"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { IPointerData } from '../pointer-types';\n\nimport { useAVActions, useAVMessage, useRemotePeers } from '@cuemath/av';\nimport { useCallback, useMemo, useRef } from 'react';\n\ninterface IusePointerSyncProps {\n  userType: TUserTypes;\n  targetUserId?: string;\n}\n\ninterface IusePointerSyncMethods {\n  publishMouseMove?: (data: IPointerData) => void;\n  susbcribeMouseMove?: (qrId: string, cb: (data: IPointerData) => void) => void;\n}\n\nconst usePointerSync = ({\n  userType,\n  targetUserId,\n}: IusePointerSyncProps): IusePointerSyncMethods => {\n  const publishName =\n    userType === 'STUDENT'\n      ? 'STUDENT_MOUSE_POINTER_POSITION_CHANGED'\n      : 'TEACHER_MOUSE_POINTER_POSITION_CHANGED';\n  const subscribeName =\n    userType === 'STUDENT'\n      ? 'TEACHER_MOUSE_POINTER_POSITION_CHANGED'\n      : 'STUDENT_MOUSE_POINTER_POSITION_CHANGED';\n\n  const peers = useRemotePeers();\n  const peerId = peers.find(p =>\n    userType === 'STUDENT' ? p.userType === 'teacher' : p.userId === targetUserId,\n  )?.id;\n\n  const { sendMessage } = useAVActions();\n  const callbacksMapRef = useRef<Record<string, (data: IPointerData) => void>>({});\n\n  const susbcribeMouseMove = useCallback((id: string, cb: (data: IPointerData) => void) => {\n    callbacksMapRef.current = { ...callbacksMapRef.current, [id]: cb };\n  }, []);\n\n  const publishMouseMove = useCallback(\n    (data: IPointerData) => {\n      if (peerId) {\n        sendMessage(publishName, data, peerId);\n      }\n    },\n    [peerId, publishName, sendMessage],\n  );\n\n  const onReceive = useCallback((_: string, data: IPointerData) => {\n    const qrId = data.id;\n    const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n    if (qrId && widgetOnReceiveCallback) {\n      widgetOnReceiveCallback(data);\n    }\n  }, []);\n\n  const memoizedValue = useMemo(() => {\n    return peerId\n      ? {\n          publishMouseMove,\n          susbcribeMouseMove,\n        }\n      : {\n          publishMouseMove: undefined,\n          susbcribeMouseMove: undefined,\n        };\n  }, [peerId, publishMouseMove, susbcribeMouseMove]);\n\n  useAVMessage<IPointerData>({\n    type: subscribeName,\n    onMessage: onReceive,\n  });\n\n  return memoizedValue;\n};\n\nexport default usePointerSync;\n"],"names":["usePointerSync","userType","targetUserId","publishName","subscribeName","peerId","_a","useRemotePeers","p","sendMessage","useAVActions","callbacksMapRef","useRef","susbcribeMouseMove","useCallback","id","cb","publishMouseMove","data","onReceive","_","qrId","widgetOnReceiveCallback","memoizedValue","useMemo","useAVMessage","usePointerSync$1"],"mappings":";;AAgBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,UAAAC;AAAA,EACA,cAAAC;AACF,MAAoD;;AAC5C,QAAAC,IACJF,MAAa,YACT,2CACA,0CACAG,IACJH,MAAa,YACT,2CACA,0CAGAI,KAASC,IADDC,IACO;AAAA,IAAK,OACxBN,MAAa,YAAYO,EAAE,aAAa,YAAYA,EAAE,WAAWN;AAAA,EAChE,MAFY,gBAAAI,EAEZ,IAEG,EAAE,aAAAG,MAAgBC,KAClBC,IAAkBC,EAAqD,CAAA,CAAE,GAEzEC,IAAqBC,EAAY,CAACC,GAAYC,MAAqC;AACvE,IAAAL,EAAA,UAAU,EAAE,GAAGA,EAAgB,SAAS,CAACI,CAAE,GAAGC;EAChE,GAAG,CAAE,CAAA,GAECC,IAAmBH;AAAA,IACvB,CAACI,MAAuB;AACtB,MAAIb,KACUI,EAAAN,GAAae,GAAMb,CAAM;AAAA,IAEzC;AAAA,IACA,CAACA,GAAQF,GAAaM,CAAW;AAAA,EAAA,GAG7BU,IAAYL,EAAY,CAACM,GAAWF,MAAuB;AAC/D,UAAMG,IAAOH,EAAK,IACZI,IAA0BX,EAAgB,QAAQU,CAAI;AAE5D,IAAIA,KAAQC,KACVA,EAAwBJ,CAAI;AAAA,EAEhC,GAAG,CAAE,CAAA,GAECK,IAAgBC,EAAQ,MACrBnB,IACH;AAAA,IACE,kBAAAY;AAAA,IACA,oBAAAJ;AAAA,EAAA,IAEF;AAAA,IACE,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,EAAA,GAEzB,CAACR,GAAQY,GAAkBJ,CAAkB,CAAC;AAEtB,SAAAY,EAAA;AAAA,IACzB,MAAMrB;AAAA,IACN,WAAWe;AAAA,EAAA,CACZ,GAEMI;AACT,GAEAG,IAAe1B;"}
+{"version":3,"file":"use-pointer-sync.js","sources":["../../../../src/features/pointer-sync/hooks/use-pointer-sync.ts"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { IPointerData } from '../pointer-types';\n\nimport { useAVActions, useAVMessage, useRemotePeers } from '@cuemath/av';\nimport { useCallback, useMemo, useRef } from 'react';\n\ninterface IusePointerSyncProps {\n  userType: TUserTypes;\n  targetUserId?: string;\n}\n\ninterface IusePointerSyncMethods {\n  publishMouseMove?: (data: IPointerData) => void;\n  susbcribeMouseMove?: (qrId: string, cb: (data: IPointerData) => void) => void;\n}\n\nconst usePointerSync = ({\n  userType,\n  targetUserId,\n}: IusePointerSyncProps): IusePointerSyncMethods => {\n  const publishName =\n    userType === 'STUDENT'\n      ? 'STUDENT_MOUSE_POINTER_POSITION_CHANGED'\n      : 'TEACHER_MOUSE_POINTER_POSITION_CHANGED';\n  const subscribeName =\n    userType === 'STUDENT'\n      ? 'TEACHER_MOUSE_POINTER_POSITION_CHANGED'\n      : 'STUDENT_MOUSE_POINTER_POSITION_CHANGED';\n\n  const peers = useRemotePeers();\n  const peerId = peers.find(p =>\n    userType === 'STUDENT' ? p.userType === 'teacher' : p.userId === targetUserId,\n  )?.id;\n\n  const { sendMessage } = useAVActions();\n  const callbacksMapRef = useRef<Record<string, (data: IPointerData) => void>>({});\n\n  const susbcribeMouseMove = useCallback((id: string, cb: (data: IPointerData) => void) => {\n    callbacksMapRef.current = { ...callbacksMapRef.current, [id]: cb };\n  }, []);\n\n  const publishMouseMove = useCallback(\n    (data: IPointerData) => {\n      if (peerId) {\n        sendMessage(publishName, data, peerId);\n      }\n    },\n    [peerId, publishName, sendMessage],\n  );\n\n  const onReceive = useCallback((_: string, data: IPointerData) => {\n    const qrId = data.id;\n    const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n    if (qrId && widgetOnReceiveCallback) {\n      widgetOnReceiveCallback(data);\n    }\n  }, []);\n\n  const memoizedValue = useMemo(() => {\n    return peerId\n      ? {\n          publishMouseMove,\n          susbcribeMouseMove,\n        }\n      : {\n          publishMouseMove: undefined,\n          susbcribeMouseMove: undefined,\n        };\n  }, [peerId, publishMouseMove, susbcribeMouseMove]);\n\n  useAVMessage<IPointerData>({\n    type: subscribeName,\n    onMessage: onReceive,\n  });\n\n  return memoizedValue;\n};\n\nexport default usePointerSync;\n"],"names":["usePointerSync","userType","targetUserId","publishName","subscribeName","peerId","_a","useRemotePeers","p","sendMessage","useAVActions","callbacksMapRef","useRef","susbcribeMouseMove","useCallback","id","cb","publishMouseMove","data","onReceive","_","qrId","widgetOnReceiveCallback","memoizedValue","useMemo","useAVMessage"],"mappings":";;AAgBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,UAAAC;AAAA,EACA,cAAAC;AACF,MAAoD;;AAC5C,QAAAC,IACJF,MAAa,YACT,2CACA,0CACAG,IACJH,MAAa,YACT,2CACA,0CAGAI,KAASC,IADDC,EAAe,EACR;AAAA,IAAK,OACxBN,MAAa,YAAYO,EAAE,aAAa,YAAYA,EAAE,WAAWN;AAAA,EAAA,MADpD,gBAAAI,EAEZ,IAEG,EAAE,aAAAG,EAAY,IAAIC,EAAa,GAC/BC,IAAkBC,EAAqD,EAAE,GAEzEC,IAAqBC,EAAY,CAACC,GAAYC,MAAqC;AACvE,IAAAL,EAAA,UAAU,EAAE,GAAGA,EAAgB,SAAS,CAACI,CAAE,GAAGC,EAAG;AAAA,EACnE,GAAG,EAAE,GAECC,IAAmBH;AAAA,IACvB,CAACI,MAAuB;AACtB,MAAIb,KACUI,EAAAN,GAAae,GAAMb,CAAM;AAAA,IAEzC;AAAA,IACA,CAACA,GAAQF,GAAaM,CAAW;AAAA,EACnC,GAEMU,IAAYL,EAAY,CAACM,GAAWF,MAAuB;AAC/D,UAAMG,IAAOH,EAAK,IACZI,IAA0BX,EAAgB,QAAQU,CAAI;AAE5D,IAAIA,KAAQC,KACVA,EAAwBJ,CAAI;AAAA,EAEhC,GAAG,EAAE,GAECK,IAAgBC,EAAQ,MACrBnB,IACH;AAAA,IACE,kBAAAY;AAAA,IACA,oBAAAJ;AAAA,EAAA,IAEF;AAAA,IACE,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,EACtB,GACH,CAACR,GAAQY,GAAkBJ,CAAkB,CAAC;AAEtB,SAAAY,EAAA;AAAA,IACzB,MAAMrB;AAAA,IACN,WAAWe;AAAA,EAAA,CACZ,GAEMI;AACT;"}

package/dist/features/pointer-sync/pointer.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
-import $ from "../../node_modules/lodash.throttle/index.js";
-import { memo as g, useRef as v, useCallback as p, useEffect as d } from "react";
+import g from "../../node_modules/lodash.throttle/index.js";
+import { memo as v, useRef as $, useCallback as p, useEffect as d } from "react";
 import C from "styled-components";
 import M from "../../assets/line-icons/icons/pointer.js";
 import L from "../ui/layout/flex-view.js";
@@ -13,8 +13,8 @@ const B = C(L)(
   z-index: ${t.zIndex.CANVAS_SCRIBBLING};
   display: none;
 `
-), E = g(({ containerRef: t, onPublish: m, onSubscribe: l, responseId: n }) => {
-  const r = v(null), h = p(
+), A = v(({ containerRef: t, onPublish: m, onSubscribe: l, responseId: n }) => {
+  const r = $(null), h = p(
     (e) => {
       const { clientX: o, clientY: i } = e;
       if (t.current) {
@@ -23,7 +23,7 @@ const B = C(L)(
       }
     },
     [t, n, m]
-  ), s = $(h, 1e3 / 6), f = p(
+  ), s = g(h, 1e3 / 6), f = p(
     (e) => {
       var o, i;
       if (t.current && r.current && e) {
@@ -51,8 +51,8 @@ const B = C(L)(
       children: /* @__PURE__ */ a(M, {})
     }
   );
-}), I = E;
+});
 export {
-  I as default
+  A as default
 };
 //# sourceMappingURL=pointer.js.map

package/dist/features/pointer-sync/pointer.js.map

@@ -1 +1 @@
-{"version":3,"file":"pointer.js","sources":["../../../src/features/pointer-sync/pointer.tsx"],"sourcesContent":["import type { IPointerData, IPointerProps } from './pointer-types';\n\nimport throttle from 'lodash.throttle';\nimport { memo, useCallback, useEffect, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport PointerIcon from '../../assets/line-icons/icons/pointer';\nimport FlexView from '../ui/layout/flex-view';\n\nconst StyledPointerWrapper = styled(FlexView)(\n  ({ theme }) => `\n  top: '50%';\n  left: '50%';\n  transform: translate(-50%, -50%);\n  transition: transform ${1000 / 6}ms ease-in-out;\n  z-index: ${theme.zIndex.CANVAS_SCRIBBLING};\n  display: none;\n`,\n);\nconst Pointer = memo(({ containerRef, onPublish, onSubscribe, responseId }: IPointerProps) => {\n  const peerPointerRef = useRef<HTMLDivElement | null>(null);\n\n  const handleMouseMove = useCallback(\n    (event: MouseEvent) => {\n      const { clientX, clientY } = event;\n\n      if (containerRef.current) {\n        const rect = containerRef.current.getBoundingClientRect();\n\n        const data = { x: clientX - rect.left, y: clientY - rect.top, id: responseId };\n\n        onPublish(data);\n      }\n    },\n    [containerRef, responseId, onPublish],\n  );\n\n  const onMouseMove = throttle(handleMouseMove, 1000 / 6);\n\n  const updateLocation = useCallback(\n    (data: IPointerData) => {\n      if (containerRef.current && peerPointerRef.current && data) {\n        const { width: containerWidth, height: containerHeight } =\n          containerRef.current.getBoundingClientRect();\n        // 16 is the height and width of the pointer icon\n        const currentX = Math.min(data.x, containerWidth - 16) - peerPointerRef.current?.offsetLeft;\n        const currentY = Math.min(data.y, containerHeight - 16) - peerPointerRef.current?.offsetTop;\n\n        if (peerPointerRef.current) {\n          peerPointerRef.current.style.transform = `translate(${currentX}px, ${currentY}px)`;\n          peerPointerRef.current.style.display = 'block';\n        }\n      }\n    },\n    [containerRef],\n  );\n\n  useEffect(() => {\n    if (peerPointerRef.current) {\n      onSubscribe(responseId, updateLocation);\n    }\n  }, [responseId, onSubscribe, updateLocation]);\n\n  useEffect(() => {\n    const containerElement = containerRef.current;\n\n    if (containerElement) {\n      containerElement.addEventListener('mousemove', onMouseMove);\n\n      return () => {\n        containerElement.removeEventListener('mousemove', onMouseMove);\n      };\n    }\n  }, [containerRef, onMouseMove]);\n\n  return (\n    <StyledPointerWrapper\n      ref={peerPointerRef}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $position=\"absolute\"\n    >\n      <PointerIcon />\n    </StyledPointerWrapper>\n  );\n});\n\nexport default Pointer;\n"],"names":["StyledPointerWrapper","styled","FlexView","theme","Pointer","memo","containerRef","onPublish","onSubscribe","responseId","peerPointerRef","useRef","handleMouseMove","useCallback","event","clientX","clientY","rect","data","onMouseMove","throttle","updateLocation","containerWidth","containerHeight","currentX","_a","currentY","_b","useEffect","containerElement","jsx","PointerIcon","Pointer$1"],"mappings":";;;;;;AASA,MAAMA,IAAuBC,EAAOC,CAAQ;AAAA,EAC1C,CAAC,EAAE,OAAAC,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA,0BAIS,MAAO,CAAC;AAAA,aACrBA,EAAM,OAAO,iBAAiB;AAAA;AAAA;AAG3C,GACMC,IAAUC,EAAK,CAAC,EAAE,cAAAC,GAAc,WAAAC,GAAW,aAAAC,GAAa,YAAAC,QAAgC;AACtF,QAAAC,IAAiBC,EAA8B,IAAI,GAEnDC,IAAkBC;AAAA,IACtB,CAACC,MAAsB;AACf,YAAA,EAAE,SAAAC,GAAS,SAAAC,EAAY,IAAAF;AAE7B,UAAIR,EAAa,SAAS;AAClB,cAAAW,IAAOX,EAAa,QAAQ,sBAAsB,GAElDY,IAAO,EAAE,GAAGH,IAAUE,EAAK,MAAM,GAAGD,IAAUC,EAAK,KAAK,IAAIR,EAAW;AAE7E,QAAAF,EAAUW,CAAI;AAAA,MAChB;AAAA,IACF;AAAA,IACA,CAACZ,GAAcG,GAAYF,CAAS;AAAA,EAAA,GAGhCY,IAAcC,EAASR,GAAiB,MAAO,CAAC,GAEhDS,IAAiBR;AAAA,IACrB,CAACK,MAAuB;;AACtB,UAAIZ,EAAa,WAAWI,EAAe,WAAWQ,GAAM;AACpD,cAAA,EAAE,OAAOI,GAAgB,QAAQC,MACrCjB,EAAa,QAAQ,yBAEjBkB,IAAW,KAAK,IAAIN,EAAK,GAAGI,IAAiB,EAAE,MAAIG,IAAAf,EAAe,YAAf,gBAAAe,EAAwB,aAC3EC,IAAW,KAAK,IAAIR,EAAK,GAAGK,IAAkB,EAAE,MAAII,IAAAjB,EAAe,YAAf,gBAAAiB,EAAwB;AAElF,QAAIjB,EAAe,YACjBA,EAAe,QAAQ,MAAM,YAAY,aAAac,CAAQ,OAAOE,CAAQ,OAC9DhB,EAAA,QAAQ,MAAM,UAAU;AAAA,MAE3C;AAAA,IACF;AAAA,IACA,CAACJ,CAAY;AAAA,EAAA;AAGf,SAAAsB,EAAU,MAAM;AACd,IAAIlB,EAAe,WACjBF,EAAYC,GAAYY,CAAc;AAAA,EAEvC,GAAA,CAACZ,GAAYD,GAAaa,CAAc,CAAC,GAE5CO,EAAU,MAAM;AACd,UAAMC,IAAmBvB,EAAa;AAEtC,QAAIuB;AACe,aAAAA,EAAA,iBAAiB,aAAaV,CAAW,GAEnD,MAAM;AACM,QAAAU,EAAA,oBAAoB,aAAaV,CAAW;AAAA,MAAA;AAAA,EAEjE,GACC,CAACb,GAAca,CAAW,CAAC,GAG5B,gBAAAW;AAAA,IAAC9B;AAAA,IAAA;AAAA,MACC,KAAKU;AAAA,MACL,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,WAAU;AAAA,MAEV,4BAACqB,GAAY,EAAA;AAAA,IAAA;AAAA,EAAA;AAGnB,CAAC,GAEDC,IAAe5B;"}
+{"version":3,"file":"pointer.js","sources":["../../../src/features/pointer-sync/pointer.tsx"],"sourcesContent":["import type { IPointerData, IPointerProps } from './pointer-types';\n\nimport throttle from 'lodash.throttle';\nimport { memo, useCallback, useEffect, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport PointerIcon from '../../assets/line-icons/icons/pointer';\nimport FlexView from '../ui/layout/flex-view';\n\nconst StyledPointerWrapper = styled(FlexView)(\n  ({ theme }) => `\n  top: '50%';\n  left: '50%';\n  transform: translate(-50%, -50%);\n  transition: transform ${1000 / 6}ms ease-in-out;\n  z-index: ${theme.zIndex.CANVAS_SCRIBBLING};\n  display: none;\n`,\n);\nconst Pointer = memo(({ containerRef, onPublish, onSubscribe, responseId }: IPointerProps) => {\n  const peerPointerRef = useRef<HTMLDivElement | null>(null);\n\n  const handleMouseMove = useCallback(\n    (event: MouseEvent) => {\n      const { clientX, clientY } = event;\n\n      if (containerRef.current) {\n        const rect = containerRef.current.getBoundingClientRect();\n\n        const data = { x: clientX - rect.left, y: clientY - rect.top, id: responseId };\n\n        onPublish(data);\n      }\n    },\n    [containerRef, responseId, onPublish],\n  );\n\n  const onMouseMove = throttle(handleMouseMove, 1000 / 6);\n\n  const updateLocation = useCallback(\n    (data: IPointerData) => {\n      if (containerRef.current && peerPointerRef.current && data) {\n        const { width: containerWidth, height: containerHeight } =\n          containerRef.current.getBoundingClientRect();\n        // 16 is the height and width of the pointer icon\n        const currentX = Math.min(data.x, containerWidth - 16) - peerPointerRef.current?.offsetLeft;\n        const currentY = Math.min(data.y, containerHeight - 16) - peerPointerRef.current?.offsetTop;\n\n        if (peerPointerRef.current) {\n          peerPointerRef.current.style.transform = `translate(${currentX}px, ${currentY}px)`;\n          peerPointerRef.current.style.display = 'block';\n        }\n      }\n    },\n    [containerRef],\n  );\n\n  useEffect(() => {\n    if (peerPointerRef.current) {\n      onSubscribe(responseId, updateLocation);\n    }\n  }, [responseId, onSubscribe, updateLocation]);\n\n  useEffect(() => {\n    const containerElement = containerRef.current;\n\n    if (containerElement) {\n      containerElement.addEventListener('mousemove', onMouseMove);\n\n      return () => {\n        containerElement.removeEventListener('mousemove', onMouseMove);\n      };\n    }\n  }, [containerRef, onMouseMove]);\n\n  return (\n    <StyledPointerWrapper\n      ref={peerPointerRef}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $position=\"absolute\"\n    >\n      <PointerIcon />\n    </StyledPointerWrapper>\n  );\n});\n\nexport default Pointer;\n"],"names":["StyledPointerWrapper","styled","FlexView","theme","Pointer","memo","containerRef","onPublish","onSubscribe","responseId","peerPointerRef","useRef","handleMouseMove","useCallback","event","clientX","clientY","rect","data","onMouseMove","throttle","updateLocation","containerWidth","containerHeight","currentX","_a","currentY","_b","useEffect","containerElement","jsx","PointerIcon"],"mappings":";;;;;;AASA,MAAMA,IAAuBC,EAAOC,CAAQ;AAAA,EAC1C,CAAC,EAAE,OAAAC,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA,0BAIS,MAAO,CAAC;AAAA,aACrBA,EAAM,OAAO,iBAAiB;AAAA;AAAA;AAG3C,GACMC,IAAUC,EAAK,CAAC,EAAE,cAAAC,GAAc,WAAAC,GAAW,aAAAC,GAAa,YAAAC,QAAgC;AACtF,QAAAC,IAAiBC,EAA8B,IAAI,GAEnDC,IAAkBC;AAAA,IACtB,CAACC,MAAsB;AACf,YAAA,EAAE,SAAAC,GAAS,SAAAC,EAAA,IAAYF;AAE7B,UAAIR,EAAa,SAAS;AAClB,cAAAW,IAAOX,EAAa,QAAQ,sBAAsB,GAElDY,IAAO,EAAE,GAAGH,IAAUE,EAAK,MAAM,GAAGD,IAAUC,EAAK,KAAK,IAAIR,EAAW;AAE7E,QAAAF,EAAUW,CAAI;AAAA,MAAA;AAAA,IAElB;AAAA,IACA,CAACZ,GAAcG,GAAYF,CAAS;AAAA,EACtC,GAEMY,IAAcC,EAASR,GAAiB,MAAO,CAAC,GAEhDS,IAAiBR;AAAA,IACrB,CAACK,MAAuB;;AACtB,UAAIZ,EAAa,WAAWI,EAAe,WAAWQ,GAAM;AACpD,cAAA,EAAE,OAAOI,GAAgB,QAAQC,MACrCjB,EAAa,QAAQ,sBAAsB,GAEvCkB,IAAW,KAAK,IAAIN,EAAK,GAAGI,IAAiB,EAAE,MAAIG,IAAAf,EAAe,YAAf,gBAAAe,EAAwB,aAC3EC,IAAW,KAAK,IAAIR,EAAK,GAAGK,IAAkB,EAAE,MAAII,IAAAjB,EAAe,YAAf,gBAAAiB,EAAwB;AAElF,QAAIjB,EAAe,YACjBA,EAAe,QAAQ,MAAM,YAAY,aAAac,CAAQ,OAAOE,CAAQ,OAC9DhB,EAAA,QAAQ,MAAM,UAAU;AAAA,MACzC;AAAA,IAEJ;AAAA,IACA,CAACJ,CAAY;AAAA,EACf;AAEA,SAAAsB,EAAU,MAAM;AACd,IAAIlB,EAAe,WACjBF,EAAYC,GAAYY,CAAc;AAAA,EAEvC,GAAA,CAACZ,GAAYD,GAAaa,CAAc,CAAC,GAE5CO,EAAU,MAAM;AACd,UAAMC,IAAmBvB,EAAa;AAEtC,QAAIuB;AACe,aAAAA,EAAA,iBAAiB,aAAaV,CAAW,GAEnD,MAAM;AACM,QAAAU,EAAA,oBAAoB,aAAaV,CAAW;AAAA,MAC/D;AAAA,EACF,GACC,CAACb,GAAca,CAAW,CAAC,GAG5B,gBAAAW;AAAA,IAAC9B;AAAA,IAAA;AAAA,MACC,KAAKU;AAAA,MACL,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,WAAU;AAAA,MAEV,4BAACqB,GAAY,CAAA,CAAA;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;"}

package/dist/features/post-game-stats/accuracy/accuracy-styled.js

@@ -1,14 +1,14 @@
-import o, { keyframes as r, css as s } from "styled-components";
+import o, { css as r, keyframes as s } from "styled-components";
 import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
 import { GAME_LAUNCHER_ASSET_PADDING as a } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
-const p = 50 * 84 / 100, c = r`
+const p = 50 * 84 / 100, c = s`
   0%{
     opacity: 0;
   }
   100%{
     opacity: 1;
   }
-`, d = r`
+`, d = s`
   0%{
     opacity: 1;
   }
@@ -42,7 +42,7 @@ const p = 50 * 84 / 100, c = r`
   z-index: 2;
   opacity: 0;
   position: absolute;
-  animation: ${({ $animationType: e, $duration: i, $delay: n }) => s`
+  animation: ${({ $animationType: e, $duration: i, $delay: n }) => r`
     ${e === "fadein" ? c : d} ${i}ms ${n}ms ease forwards
   `};
   transform: translateY(${(t + p) * 84 / 200 + 25}px);
@@ -53,7 +53,7 @@ const p = 50 * 84 / 100, c = r`
   flex-direction: row;
   align-items: flex-end;
 
-  ${({ $animationType: e, $duration: i }) => e && i && s`
+  ${({ $animationType: e, $duration: i }) => e && i && r`
       animation: ${e === "fadein" ? c : d} ${i}ms linear forwards;
     `}
 `;

package/dist/features/post-game-stats/accuracy/accuracy-styled.js.map

@@ -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 { 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;"}
+{"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,EAAa,MAAAC;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;"}

package/dist/features/post-game-stats/accuracy/accuracy-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"accuracy-utils.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-utils.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\nimport { NEEDLE } from './constants';\n\nexport const useAnimatedValue = (start: number, end: number, duration: number) => {\n  const [value, setValue] = useState(start);\n  const requestRef = useRef<number | null>(null);\n  const startTimeRef = useRef<number | null>(null);\n\n  const animate = (timestamp: number) => {\n    if (!startTimeRef.current) startTimeRef.current = timestamp;\n\n    const elapsedTime = timestamp - startTimeRef.current;\n    const progress = Math.min(elapsedTime / duration, 1); // Normalize to 0 - 1\n    const newValue = start + (end - start) * progress;\n\n    setValue(newValue);\n\n    if (progress < 1) {\n      requestRef.current = requestAnimationFrame(animate);\n    }\n  };\n\n  useEffect(() => {\n    requestRef.current = requestAnimationFrame(animate);\n\n    return () => {\n      if (requestRef.current) cancelAnimationFrame(requestRef.current);\n    };\n  });\n\n  return value;\n};\n\nexport const getAccuracyFramesToPlay = (accuracy: number) => {\n  // 100% = 100 frames\n  // 1% = 1 fame\n  const totalFrames = NEEDLE.PERCENT_FRAME[1] - NEEDLE.PERCENT_FRAME[0];\n  const framesPerPercent = totalFrames / 100;\n\n  const framesToPlay = Math.min(Math.ceil(framesPerPercent * accuracy), totalFrames);\n  const initialFrames = NEEDLE.IN_FRAMES[1] - NEEDLE.IN_FRAMES[0];\n\n  return initialFrames + framesToPlay;\n};\n"],"names":["useAnimatedValue","start","end","duration","value","setValue","useState","requestRef","useRef","startTimeRef","animate","timestamp","elapsedTime","progress","newValue","useEffect","getAccuracyFramesToPlay","accuracy","totalFrames","NEEDLE","framesPerPercent","framesToPlay"],"mappings":";;AAIO,MAAMA,IAAmB,CAACC,GAAeC,GAAaC,MAAqB;AAChF,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASL,CAAK,GAClCM,IAAaC,EAAsB,IAAI,GACvCC,IAAeD,EAAsB,IAAI,GAEzCE,IAAU,CAACC,MAAsB;AACrC,IAAKF,EAAa,YAASA,EAAa,UAAUE;AAE5C,UAAAC,IAAcD,IAAYF,EAAa,SACvCI,IAAW,KAAK,IAAID,IAAcT,GAAU,CAAC,GAC7CW,IAAWb,KAASC,IAAMD,KAASY;AAEzC,IAAAR,EAASS,CAAQ,GAEbD,IAAW,MACFN,EAAA,UAAU,sBAAsBG,CAAO;AAAA,EACpD;AAGF,SAAAK,EAAU,OACGR,EAAA,UAAU,sBAAsBG,CAAO,GAE3C,MAAM;AACX,IAAIH,EAAW,WAA8B,qBAAAA,EAAW,OAAO;AAAA,EAAA,EAElE,GAEMH;AACT,GAEaY,IAA0B,CAACC,MAAqB;AAG3D,QAAMC,IAAcC,EAAO,cAAc,CAAC,IAAIA,EAAO,cAAc,CAAC,GAC9DC,IAAmBF,IAAc,KAEjCG,IAAe,KAAK,IAAI,KAAK,KAAKD,IAAmBH,CAAQ,GAAGC,CAAW;AAGjF,SAFsBC,EAAO,UAAU,CAAC,IAAIA,EAAO,UAAU,CAAC,IAEvCE;AACzB;"}
+{"version":3,"file":"accuracy-utils.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-utils.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\nimport { NEEDLE } from './constants';\n\nexport const useAnimatedValue = (start: number, end: number, duration: number) => {\n  const [value, setValue] = useState(start);\n  const requestRef = useRef<number | null>(null);\n  const startTimeRef = useRef<number | null>(null);\n\n  const animate = (timestamp: number) => {\n    if (!startTimeRef.current) startTimeRef.current = timestamp;\n\n    const elapsedTime = timestamp - startTimeRef.current;\n    const progress = Math.min(elapsedTime / duration, 1); // Normalize to 0 - 1\n    const newValue = start + (end - start) * progress;\n\n    setValue(newValue);\n\n    if (progress < 1) {\n      requestRef.current = requestAnimationFrame(animate);\n    }\n  };\n\n  useEffect(() => {\n    requestRef.current = requestAnimationFrame(animate);\n\n    return () => {\n      if (requestRef.current) cancelAnimationFrame(requestRef.current);\n    };\n  });\n\n  return value;\n};\n\nexport const getAccuracyFramesToPlay = (accuracy: number) => {\n  // 100% = 100 frames\n  // 1% = 1 fame\n  const totalFrames = NEEDLE.PERCENT_FRAME[1] - NEEDLE.PERCENT_FRAME[0];\n  const framesPerPercent = totalFrames / 100;\n\n  const framesToPlay = Math.min(Math.ceil(framesPerPercent * accuracy), totalFrames);\n  const initialFrames = NEEDLE.IN_FRAMES[1] - NEEDLE.IN_FRAMES[0];\n\n  return initialFrames + framesToPlay;\n};\n"],"names":["useAnimatedValue","start","end","duration","value","setValue","useState","requestRef","useRef","startTimeRef","animate","timestamp","elapsedTime","progress","newValue","useEffect","getAccuracyFramesToPlay","accuracy","totalFrames","NEEDLE","framesPerPercent","framesToPlay"],"mappings":";;AAIO,MAAMA,IAAmB,CAACC,GAAeC,GAAaC,MAAqB;AAChF,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASL,CAAK,GAClCM,IAAaC,EAAsB,IAAI,GACvCC,IAAeD,EAAsB,IAAI,GAEzCE,IAAU,CAACC,MAAsB;AACrC,IAAKF,EAAa,YAASA,EAAa,UAAUE;AAE5C,UAAAC,IAAcD,IAAYF,EAAa,SACvCI,IAAW,KAAK,IAAID,IAAcT,GAAU,CAAC,GAC7CW,IAAWb,KAASC,IAAMD,KAASY;AAEzC,IAAAR,EAASS,CAAQ,GAEbD,IAAW,MACFN,EAAA,UAAU,sBAAsBG,CAAO;AAAA,EAEtD;AAEA,SAAAK,EAAU,OACGR,EAAA,UAAU,sBAAsBG,CAAO,GAE3C,MAAM;AACX,IAAIH,EAAW,WAA8B,qBAAAA,EAAW,OAAO;AAAA,EACjE,EACD,GAEMH;AACT,GAEaY,IAA0B,CAACC,MAAqB;AAG3D,QAAMC,IAAcC,EAAO,cAAc,CAAC,IAAIA,EAAO,cAAc,CAAC,GAC9DC,IAAmBF,IAAc,KAEjCG,IAAe,KAAK,IAAI,KAAK,KAAKD,IAAmBH,CAAQ,GAAGC,CAAW;AAGjF,SAFsBC,EAAO,UAAU,CAAC,IAAIA,EAAO,UAAU,CAAC,IAEvCE;AACzB;"}

package/dist/features/post-game-stats/accuracy/accuracy.js

@@ -8,9 +8,9 @@ import { delay as s } from "../../utils/utils.js";
 import { AnimatedPercentTextInput as H } from "./accuracy-comps.js";
 import { Accuracy as K, AccuracyMeterLottie as q, AnimatedAccuracyNeedleContainer as z, AccuracyNeedleLottie as B, TextWrapper as G, PercentTextWrapper as J } from "./accuracy-styled.js";
 import { getAccuracyFramesToPlay as Q } from "./accuracy-utils.js";
-import { NEEDLE_HOLD_TIME as C, METER as O, TEXT_DISAPPEAR_DELAY as V, TEXT_DISAPPEAR_DURATION as Z, TEXT_APPEAR_DURATION as ee, NEEDLE as F, NEEDLE_LOTTIE_FPS as U } from "./constants.js";
+import { NEEDLE_HOLD_TIME as C, METER as O, TEXT_DISAPPEAR_DELAY as V, TEXT_DISAPPEAR_DURATION as Z, TEXT_APPEAR_DURATION as ee, NEEDLE_LOTTIE_FPS as F, NEEDLE as U } from "./constants.js";
 const Ae = X(({ show: u, onComplete: n, accuracy: l, helperText: E }) => {
-  const { play: c } = k(), y = a(null), p = a(null), o = a(), r = a(), [g, w] = d(!0), [m, T] = d(!1), [R, x] = d(!1), $ = a(0), _ = (F.IN_FRAMES[1] - F.IN_FRAMES[0]) / U * 1e3, S = W(async () => {
+  const { play: c } = k(), y = a(null), p = a(null), o = a(), r = a(), [g, w] = d(!0), [m, T] = d(!1), [R, x] = d(!1), $ = a(0), _ = (U.IN_FRAMES[1] - U.IN_FRAMES[0]) / F * 1e3, S = W(async () => {
     var A;
     try {
       await s(C), w(!1), T(!1), c(h.ACCURACY_OUT), (A = o.current) == null || A.playSegments(O.OUT_FRAMES, !0), await s(V), x(!0), n == null || n();
@@ -44,7 +44,7 @@ const Ae = X(({ show: u, onComplete: n, accuracy: l, helperText: E }) => {
         }), c(h.ACCURACY_IN), (L = o.current) == null || L.playSegments(O.IN_FRAMES, !0), s(_).then(() => {
           var D, P, N;
           const f = Q(l);
-          $.current = f, (D = r.current) == null || D.setSpeed(f / U), (P = r.current) == null || P.playSegments([0, f], !0), T(!0), (N = r.current) == null || N.addEventListener("complete", () => {
+          $.current = f, (D = r.current) == null || D.setSpeed(f / F), (P = r.current) == null || P.playSegments([0, f], !0), T(!0), (N = r.current) == null || N.addEventListener("complete", () => {
             s(C).then(() => S());
           });
         });

package/dist/features/post-game-stats/accuracy/accuracy.js.map

@@ -1 +1 @@
-{"version":3,"file":"accuracy.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy.tsx"],"sourcesContent":["import type { IAccuracyProps } from './accuracy-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useEffect, useRef, useState, useCallback } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { delay } from '../../utils/utils';\nimport { AnimatedPercentTextInput } from './accuracy-comps';\nimport * as Styled from './accuracy-styled';\nimport { getAccuracyFramesToPlay } from './accuracy-utils';\nimport {\n  METER,\n  NEEDLE,\n  NEEDLE_HOLD_TIME,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n  NEEDLE_LOTTIE_FPS,\n} from './constants';\n\nexport const Accuracy: FC<IAccuracyProps> = memo(({ show, onComplete, accuracy, helperText }) => {\n  const { play } = useCircleSounds();\n  const accuracyMeterRef = useRef<HTMLDivElement>(null);\n  const accuracyNeedleRef = useRef<HTMLDivElement>(null);\n  const accuracyMeterAnimationRef = useRef<AnimationItem>();\n  const accuracyNeedleAnimationRef = useRef<AnimationItem>();\n\n  const [showAccuracy, setShowAccuracy] = useState(true);\n  const [showPercent, setShowPercent] = useState(false);\n  const [fadeOut, setFadeOut] = useState(false);\n  const needleFramesToPlay = useRef(0);\n\n  const percentStartAnimationDelayInMs =\n    ((NEEDLE.IN_FRAMES[1] - NEEDLE.IN_FRAMES[0]) / NEEDLE_LOTTIE_FPS) * 1000;\n\n  const playExitAnimation = useCallback(async () => {\n    try {\n      await delay(NEEDLE_HOLD_TIME);\n      setShowAccuracy(false);\n      setShowPercent(false);\n      play(CircleSoundKey.ACCURACY_OUT);\n      accuracyMeterAnimationRef.current?.playSegments(METER.OUT_FRAMES, true);\n      await delay(TEXT_DISAPPEAR_DELAY);\n      setFadeOut(true);\n      onComplete?.();\n    } catch (err) {\n      /* eslint-disable no-console */\n      console.log(err);\n    }\n  }, [onComplete, play]);\n\n  useEffect(() => {\n    if (show) {\n      const loadAnimations = async () => {\n        const [meterLottie, needleLottie] = await Promise.all([\n          fetch(LOTTIE.ACCURACY_METER),\n          fetch(LOTTIE.ACCURACY_NEEDLE),\n        ]);\n        const [meterLottieData, needleLottieData] = await Promise.all([\n          meterLottie.json(),\n          needleLottie.json(),\n        ]);\n\n        accuracyMeterAnimationRef.current = Lottie.loadAnimation({\n          container: accuracyMeterRef.current as Element,\n          animationData: meterLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'svg',\n        });\n\n        accuracyNeedleAnimationRef.current = Lottie.loadAnimation({\n          container: accuracyNeedleRef.current as Element,\n          animationData: needleLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'svg',\n        });\n\n        play(CircleSoundKey.ACCURACY_IN);\n        accuracyMeterAnimationRef.current?.playSegments(METER.IN_FRAMES, true);\n\n        delay(percentStartAnimationDelayInMs).then(() => {\n          const frames = getAccuracyFramesToPlay(accuracy);\n\n          needleFramesToPlay.current = frames;\n          accuracyNeedleAnimationRef.current?.setSpeed(frames / NEEDLE_LOTTIE_FPS);\n          accuracyNeedleAnimationRef.current?.playSegments([0, frames], true);\n          setShowPercent(true);\n\n          accuracyNeedleAnimationRef.current?.addEventListener('complete', () => {\n            delay(NEEDLE_HOLD_TIME).then(() => playExitAnimation());\n          });\n        });\n      };\n\n      loadAnimations();\n\n      return () => {\n        accuracyMeterAnimationRef.current?.destroy();\n        accuracyNeedleAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, accuracy, percentStartAnimationDelayInMs, playExitAnimation, play]);\n\n  if (show) {\n    return (\n      <Styled.Accuracy>\n        <Styled.AccuracyMeterLottie ref={accuracyMeterRef} />\n        {showAccuracy && (\n          <Styled.AnimatedAccuracyNeedleContainer>\n            <Styled.AccuracyNeedleLottie ref={accuracyNeedleRef} />\n          </Styled.AnimatedAccuracyNeedleContainer>\n        )}\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={1000}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n        {showPercent && (\n          <Styled.PercentTextWrapper\n            $animationType={showPercent ? 'fadein' : 'fadeout'}\n            $duration={showPercent ? 200 : 200}\n          >\n            <AnimatedPercentTextInput accuracy={Math.round(accuracy)} time={1000} />\n          </Styled.PercentTextWrapper>\n        )}\n      </Styled.Accuracy>\n    );\n  }\n\n  return null;\n});\n"],"names":["Accuracy","memo","show","onComplete","accuracy","helperText","play","useCircleSounds","accuracyMeterRef","useRef","accuracyNeedleRef","accuracyMeterAnimationRef","accuracyNeedleAnimationRef","showAccuracy","setShowAccuracy","useState","showPercent","setShowPercent","fadeOut","setFadeOut","needleFramesToPlay","percentStartAnimationDelayInMs","NEEDLE","NEEDLE_LOTTIE_FPS","playExitAnimation","useCallback","delay","NEEDLE_HOLD_TIME","CircleSoundKey","_a","METER","TEXT_DISAPPEAR_DELAY","err","useEffect","meterLottie","needleLottie","LOTTIE","meterLottieData","needleLottieData","Lottie","frames","getAccuracyFramesToPlay","_b","_c","jsxs","Styled.Accuracy","jsx","Styled.AccuracyMeterLottie","Styled.AnimatedAccuracyNeedleContainer","Styled.AccuracyNeedleLottie","Styled.TextWrapper","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION","Styled.PercentTextWrapper","AnimatedPercentTextInput"],"mappings":"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"}
+{"version":3,"file":"accuracy.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy.tsx"],"sourcesContent":["import type { IAccuracyProps } from './accuracy-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useEffect, useRef, useState, useCallback } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { delay } from '../../utils/utils';\nimport { AnimatedPercentTextInput } from './accuracy-comps';\nimport * as Styled from './accuracy-styled';\nimport { getAccuracyFramesToPlay } from './accuracy-utils';\nimport {\n  METER,\n  NEEDLE,\n  NEEDLE_HOLD_TIME,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n  NEEDLE_LOTTIE_FPS,\n} from './constants';\n\nexport const Accuracy: FC<IAccuracyProps> = memo(({ show, onComplete, accuracy, helperText }) => {\n  const { play } = useCircleSounds();\n  const accuracyMeterRef = useRef<HTMLDivElement>(null);\n  const accuracyNeedleRef = useRef<HTMLDivElement>(null);\n  const accuracyMeterAnimationRef = useRef<AnimationItem>();\n  const accuracyNeedleAnimationRef = useRef<AnimationItem>();\n\n  const [showAccuracy, setShowAccuracy] = useState(true);\n  const [showPercent, setShowPercent] = useState(false);\n  const [fadeOut, setFadeOut] = useState(false);\n  const needleFramesToPlay = useRef(0);\n\n  const percentStartAnimationDelayInMs =\n    ((NEEDLE.IN_FRAMES[1] - NEEDLE.IN_FRAMES[0]) / NEEDLE_LOTTIE_FPS) * 1000;\n\n  const playExitAnimation = useCallback(async () => {\n    try {\n      await delay(NEEDLE_HOLD_TIME);\n      setShowAccuracy(false);\n      setShowPercent(false);\n      play(CircleSoundKey.ACCURACY_OUT);\n      accuracyMeterAnimationRef.current?.playSegments(METER.OUT_FRAMES, true);\n      await delay(TEXT_DISAPPEAR_DELAY);\n      setFadeOut(true);\n      onComplete?.();\n    } catch (err) {\n      /* eslint-disable no-console */\n      console.log(err);\n    }\n  }, [onComplete, play]);\n\n  useEffect(() => {\n    if (show) {\n      const loadAnimations = async () => {\n        const [meterLottie, needleLottie] = await Promise.all([\n          fetch(LOTTIE.ACCURACY_METER),\n          fetch(LOTTIE.ACCURACY_NEEDLE),\n        ]);\n        const [meterLottieData, needleLottieData] = await Promise.all([\n          meterLottie.json(),\n          needleLottie.json(),\n        ]);\n\n        accuracyMeterAnimationRef.current = Lottie.loadAnimation({\n          container: accuracyMeterRef.current as Element,\n          animationData: meterLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'svg',\n        });\n\n        accuracyNeedleAnimationRef.current = Lottie.loadAnimation({\n          container: accuracyNeedleRef.current as Element,\n          animationData: needleLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'svg',\n        });\n\n        play(CircleSoundKey.ACCURACY_IN);\n        accuracyMeterAnimationRef.current?.playSegments(METER.IN_FRAMES, true);\n\n        delay(percentStartAnimationDelayInMs).then(() => {\n          const frames = getAccuracyFramesToPlay(accuracy);\n\n          needleFramesToPlay.current = frames;\n          accuracyNeedleAnimationRef.current?.setSpeed(frames / NEEDLE_LOTTIE_FPS);\n          accuracyNeedleAnimationRef.current?.playSegments([0, frames], true);\n          setShowPercent(true);\n\n          accuracyNeedleAnimationRef.current?.addEventListener('complete', () => {\n            delay(NEEDLE_HOLD_TIME).then(() => playExitAnimation());\n          });\n        });\n      };\n\n      loadAnimations();\n\n      return () => {\n        accuracyMeterAnimationRef.current?.destroy();\n        accuracyNeedleAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, accuracy, percentStartAnimationDelayInMs, playExitAnimation, play]);\n\n  if (show) {\n    return (\n      <Styled.Accuracy>\n        <Styled.AccuracyMeterLottie ref={accuracyMeterRef} />\n        {showAccuracy && (\n          <Styled.AnimatedAccuracyNeedleContainer>\n            <Styled.AccuracyNeedleLottie ref={accuracyNeedleRef} />\n          </Styled.AnimatedAccuracyNeedleContainer>\n        )}\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={1000}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n        {showPercent && (\n          <Styled.PercentTextWrapper\n            $animationType={showPercent ? 'fadein' : 'fadeout'}\n            $duration={showPercent ? 200 : 200}\n          >\n            <AnimatedPercentTextInput accuracy={Math.round(accuracy)} time={1000} />\n          </Styled.PercentTextWrapper>\n        )}\n      </Styled.Accuracy>\n    );\n  }\n\n  return null;\n});\n"],"names":["Accuracy","memo","show","onComplete","accuracy","helperText","play","useCircleSounds","accuracyMeterRef","useRef","accuracyNeedleRef","accuracyMeterAnimationRef","accuracyNeedleAnimationRef","showAccuracy","setShowAccuracy","useState","showPercent","setShowPercent","fadeOut","setFadeOut","needleFramesToPlay","percentStartAnimationDelayInMs","NEEDLE","NEEDLE_LOTTIE_FPS","playExitAnimation","useCallback","delay","NEEDLE_HOLD_TIME","CircleSoundKey","_a","METER","TEXT_DISAPPEAR_DELAY","err","useEffect","meterLottie","needleLottie","LOTTIE","meterLottieData","needleLottieData","Lottie","frames","getAccuracyFramesToPlay","_b","_c","jsxs","Styled.Accuracy","jsx","Styled.AccuracyMeterLottie","Styled.AnimatedAccuracyNeedleContainer","Styled.AccuracyNeedleLottie","Styled.TextWrapper","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION","Styled.PercentTextWrapper","AnimatedPercentTextInput"],"mappings":"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"}

package/dist/features/post-game-stats/clock/clock-styled.js

@@ -1,4 +1,4 @@
-import o, { keyframes as e, css as p } from "styled-components";
+import o, { css as p, keyframes as e } from "styled-components";
 import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
 import { GAME_LAUNCHER_ASSET_PADDING as i } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
 const r = 50 * 84 / 100, c = e`

package/dist/features/post-game-stats/clock/clock-styled.js.map

@@ -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 { 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;"}
+{"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,EAAa,MAAAC;AAAA,MACpDH,MAAmB,WAAWV,IAASE,CAAO,IAAIS,CAAS,MAAMC,CAAM;AAAA,GAC1E;AAAA,2BACyBP,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}

package/dist/features/post-game-stats/clock/clock.js

@@ -7,7 +7,7 @@ import { CircleSoundKey as R } from "../../circle-games/hooks/use-circle-sounds/
 import { delay as D } from "../../utils/utils.js";
 import { Clock as U, ClockLottie as $, ClockTimeSpentLottie as w, TextWrapper as X } from "./clock-styled.js";
 import { getClockTimeSpentFramesToPlay as Y } from "./clock-util.js";
-import { CLOCK_TIME_SPENT_FPS as H, CLOCK as N, CLOCK_INFRAME_LOTTIE_TO_PLAY as W, TIME_LOTTIE_TO_PLAY_IN as b, TEXT_DISAPPEAR_DURATION as q, TEXT_APPEAR_DURATION as z, TIME_SHOWN_HOLD_TIME as B, TEXT_DISAPPEAR_DELAY as G } from "./constants.js";
+import { CLOCK_TIME_SPENT_FPS as H, CLOCK as N, TEXT_DISAPPEAR_DURATION as W, TEXT_APPEAR_DURATION as b, CLOCK_INFRAME_LOTTIE_TO_PLAY as q, TIME_LOTTIE_TO_PLAY_IN as z, TIME_SHOWN_HOLD_TIME as B, TEXT_DISAPPEAR_DELAY as G } from "./constants.js";
 const it = g(({ show: s, onComplete: i, timeInMs: f, helperText: p }) => {
   const { play: c } = x(), [L, F] = h(!1), m = o(!1), l = o(0), d = o(null), E = o(null), a = o(), n = o(), _ = T(() => {
     var t, e;
@@ -61,9 +61,9 @@ const it = g(({ show: s, onComplete: i, timeInMs: f, helperText: p }) => {
     p && /* @__PURE__ */ u(
       X,
       {
-        $delay: W + b,
+        $delay: q + z,
         $animationType: L ? "fadeout" : "fadein",
-        $duration: L ? q : z,
+        $duration: L ? W : b,
         children: p
       }
     )

package/dist/features/post-game-stats/clock/clock.js.map

@@ -1 +1 @@
-{"version":3,"file":"clock.js","sources":["../../../../src/features/post-game-stats/clock/clock.tsx"],"sourcesContent":["import type { IClockProps } from './clock-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { delay } from '../../utils/utils';\nimport * as Styled from './clock-styled';\nimport { getClockTimeSpentFramesToPlay } from './clock-util';\nimport {\n  CLOCK,\n  CLOCK_TIME_SPENT_FPS,\n  TIME_SHOWN_HOLD_TIME,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n  CLOCK_INFRAME_LOTTIE_TO_PLAY,\n  TIME_LOTTIE_TO_PLAY_IN,\n} from './constants';\n\nexport const Clock: FC<IClockProps> = memo(({ show, onComplete, timeInMs, helperText }) => {\n  const { play } = useCircleSounds();\n  const [fadeOut, setFadeOut] = useState(false);\n  const isClockTimeSpentShown = useRef(false);\n  const framesToPlay = useRef(0);\n\n  const clockLottieContainerRef = useRef<HTMLDivElement>(null);\n  const clockTimeSpentLottieContainerRef = useRef<HTMLDivElement>(null);\n  const clockLottieAnimationRef = useRef<AnimationItem>();\n  const clockTimeSpentLottieAnimationRef = useRef<AnimationItem>();\n\n  const setClockTimeSpentFrames = useCallback(() => {\n    const frames = getClockTimeSpentFramesToPlay(timeInMs);\n\n    if (frames) {\n      framesToPlay.current = frames;\n      // Speed adjustment\n      clockTimeSpentLottieAnimationRef.current?.setSpeed(frames / CLOCK_TIME_SPENT_FPS);\n      clockTimeSpentLottieAnimationRef.current?.playSegments([0, frames], true);\n      isClockTimeSpentShown.current = true;\n    }\n  }, [timeInMs]);\n\n  const onClockTimeSpentExitAnimationFinished = useCallback(async () => {\n    await delay(TIME_SHOWN_HOLD_TIME);\n\n    // Reverse play time spent animation\n    clockTimeSpentLottieAnimationRef.current?.playSegments([framesToPlay.current, 0], true);\n\n    await delay(TEXT_DISAPPEAR_DELAY);\n    setFadeOut(true);\n\n    if (isClockTimeSpentShown.current) {\n      clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n        play(CircleSoundKey.CLOCK_OUT);\n        clockLottieAnimationRef.current?.playSegments(CLOCK.OUT_FRAMES, true);\n      });\n    }\n  }, [framesToPlay, play]);\n\n  const onAnimationEnd = useCallback(() => {\n    onComplete?.();\n  }, [onComplete]);\n\n  // Play entry animation\n  useEffect(() => {\n    if (show) {\n      const loadAnimations = async () => {\n        const [timeLottiePath, timeSpentLottiePath] = await Promise.all([\n          fetch(LOTTIE.TOTAL_TIME),\n          fetch(LOTTIE.TOTAL_TIME_SPENT),\n        ]);\n        const [timeLottieData, timeSpentLottieData] = await Promise.all([\n          timeLottiePath.json(),\n          timeSpentLottiePath.json(),\n        ]);\n\n        // Clock Lottie\n        clockLottieAnimationRef.current = Lottie.loadAnimation({\n          container: clockLottieContainerRef.current as Element,\n          animationData: timeLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        // Clock Time Spent Lottie\n        clockTimeSpentLottieAnimationRef.current = Lottie.loadAnimation({\n          container: clockTimeSpentLottieContainerRef.current as Element,\n          animationData: timeSpentLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        // Play clock in animation sounds and lottie\n        play(CircleSoundKey.CLOCK_IN);\n        clockLottieAnimationRef.current?.playSegments(CLOCK.IN_FRAMES, true);\n\n        clockLottieAnimationRef.current?.addEventListener('complete', () => {\n          if (!isClockTimeSpentShown.current) {\n            setClockTimeSpentFrames();\n          } else {\n            onAnimationEnd();\n          }\n        });\n\n        // Setup event listener for time spent animation\n        clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n          clockTimeSpentLottieAnimationRef.current?.removeEventListener('complete');\n          onClockTimeSpentExitAnimationFinished();\n        });\n      };\n\n      loadAnimations();\n\n      return () => {\n        clockLottieAnimationRef.current?.destroy();\n        clockTimeSpentLottieAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, setClockTimeSpentFrames, onAnimationEnd, onClockTimeSpentExitAnimationFinished, play]);\n\n  if (show) {\n    return (\n      <Styled.Clock>\n        <Styled.ClockLottie ref={clockLottieContainerRef} />\n        <Styled.ClockTimeSpentLottie ref={clockTimeSpentLottieContainerRef} />\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={CLOCK_INFRAME_LOTTIE_TO_PLAY + TIME_LOTTIE_TO_PLAY_IN}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n      </Styled.Clock>\n    );\n  }\n\n  return null;\n});\n"],"names":["Clock","memo","show","onComplete","timeInMs","helperText","play","useCircleSounds","fadeOut","setFadeOut","useState","isClockTimeSpentShown","useRef","framesToPlay","clockLottieContainerRef","clockTimeSpentLottieContainerRef","clockLottieAnimationRef","clockTimeSpentLottieAnimationRef","setClockTimeSpentFrames","useCallback","frames","getClockTimeSpentFramesToPlay","_a","CLOCK_TIME_SPENT_FPS","_b","onClockTimeSpentExitAnimationFinished","delay","TIME_SHOWN_HOLD_TIME","TEXT_DISAPPEAR_DELAY","CircleSoundKey","CLOCK","onAnimationEnd","useEffect","timeLottiePath","timeSpentLottiePath","LOTTIE","timeLottieData","timeSpentLottieData","Lottie","_c","jsxs","Styled.Clock","jsx","Styled.ClockLottie","Styled.ClockTimeSpentLottie","Styled.TextWrapper","CLOCK_INFRAME_LOTTIE_TO_PLAY","TIME_LOTTIE_TO_PLAY_IN","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION"],"mappings":"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"}
+{"version":3,"file":"clock.js","sources":["../../../../src/features/post-game-stats/clock/clock.tsx"],"sourcesContent":["import type { IClockProps } from './clock-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { delay } from '../../utils/utils';\nimport * as Styled from './clock-styled';\nimport { getClockTimeSpentFramesToPlay } from './clock-util';\nimport {\n  CLOCK,\n  CLOCK_TIME_SPENT_FPS,\n  TIME_SHOWN_HOLD_TIME,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n  CLOCK_INFRAME_LOTTIE_TO_PLAY,\n  TIME_LOTTIE_TO_PLAY_IN,\n} from './constants';\n\nexport const Clock: FC<IClockProps> = memo(({ show, onComplete, timeInMs, helperText }) => {\n  const { play } = useCircleSounds();\n  const [fadeOut, setFadeOut] = useState(false);\n  const isClockTimeSpentShown = useRef(false);\n  const framesToPlay = useRef(0);\n\n  const clockLottieContainerRef = useRef<HTMLDivElement>(null);\n  const clockTimeSpentLottieContainerRef = useRef<HTMLDivElement>(null);\n  const clockLottieAnimationRef = useRef<AnimationItem>();\n  const clockTimeSpentLottieAnimationRef = useRef<AnimationItem>();\n\n  const setClockTimeSpentFrames = useCallback(() => {\n    const frames = getClockTimeSpentFramesToPlay(timeInMs);\n\n    if (frames) {\n      framesToPlay.current = frames;\n      // Speed adjustment\n      clockTimeSpentLottieAnimationRef.current?.setSpeed(frames / CLOCK_TIME_SPENT_FPS);\n      clockTimeSpentLottieAnimationRef.current?.playSegments([0, frames], true);\n      isClockTimeSpentShown.current = true;\n    }\n  }, [timeInMs]);\n\n  const onClockTimeSpentExitAnimationFinished = useCallback(async () => {\n    await delay(TIME_SHOWN_HOLD_TIME);\n\n    // Reverse play time spent animation\n    clockTimeSpentLottieAnimationRef.current?.playSegments([framesToPlay.current, 0], true);\n\n    await delay(TEXT_DISAPPEAR_DELAY);\n    setFadeOut(true);\n\n    if (isClockTimeSpentShown.current) {\n      clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n        play(CircleSoundKey.CLOCK_OUT);\n        clockLottieAnimationRef.current?.playSegments(CLOCK.OUT_FRAMES, true);\n      });\n    }\n  }, [framesToPlay, play]);\n\n  const onAnimationEnd = useCallback(() => {\n    onComplete?.();\n  }, [onComplete]);\n\n  // Play entry animation\n  useEffect(() => {\n    if (show) {\n      const loadAnimations = async () => {\n        const [timeLottiePath, timeSpentLottiePath] = await Promise.all([\n          fetch(LOTTIE.TOTAL_TIME),\n          fetch(LOTTIE.TOTAL_TIME_SPENT),\n        ]);\n        const [timeLottieData, timeSpentLottieData] = await Promise.all([\n          timeLottiePath.json(),\n          timeSpentLottiePath.json(),\n        ]);\n\n        // Clock Lottie\n        clockLottieAnimationRef.current = Lottie.loadAnimation({\n          container: clockLottieContainerRef.current as Element,\n          animationData: timeLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        // Clock Time Spent Lottie\n        clockTimeSpentLottieAnimationRef.current = Lottie.loadAnimation({\n          container: clockTimeSpentLottieContainerRef.current as Element,\n          animationData: timeSpentLottieData,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        // Play clock in animation sounds and lottie\n        play(CircleSoundKey.CLOCK_IN);\n        clockLottieAnimationRef.current?.playSegments(CLOCK.IN_FRAMES, true);\n\n        clockLottieAnimationRef.current?.addEventListener('complete', () => {\n          if (!isClockTimeSpentShown.current) {\n            setClockTimeSpentFrames();\n          } else {\n            onAnimationEnd();\n          }\n        });\n\n        // Setup event listener for time spent animation\n        clockTimeSpentLottieAnimationRef.current?.addEventListener('complete', () => {\n          clockTimeSpentLottieAnimationRef.current?.removeEventListener('complete');\n          onClockTimeSpentExitAnimationFinished();\n        });\n      };\n\n      loadAnimations();\n\n      return () => {\n        clockLottieAnimationRef.current?.destroy();\n        clockTimeSpentLottieAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, setClockTimeSpentFrames, onAnimationEnd, onClockTimeSpentExitAnimationFinished, play]);\n\n  if (show) {\n    return (\n      <Styled.Clock>\n        <Styled.ClockLottie ref={clockLottieContainerRef} />\n        <Styled.ClockTimeSpentLottie ref={clockTimeSpentLottieContainerRef} />\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={CLOCK_INFRAME_LOTTIE_TO_PLAY + TIME_LOTTIE_TO_PLAY_IN}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n      </Styled.Clock>\n    );\n  }\n\n  return null;\n});\n"],"names":["Clock","memo","show","onComplete","timeInMs","helperText","play","useCircleSounds","fadeOut","setFadeOut","useState","isClockTimeSpentShown","useRef","framesToPlay","clockLottieContainerRef","clockTimeSpentLottieContainerRef","clockLottieAnimationRef","clockTimeSpentLottieAnimationRef","setClockTimeSpentFrames","useCallback","frames","getClockTimeSpentFramesToPlay","_a","CLOCK_TIME_SPENT_FPS","_b","onClockTimeSpentExitAnimationFinished","delay","TIME_SHOWN_HOLD_TIME","TEXT_DISAPPEAR_DELAY","CircleSoundKey","CLOCK","onAnimationEnd","useEffect","timeLottiePath","timeSpentLottiePath","LOTTIE","timeLottieData","timeSpentLottieData","Lottie","_c","jsxs","Styled.Clock","jsx","Styled.ClockLottie","Styled.ClockTimeSpentLottie","Styled.TextWrapper","CLOCK_INFRAME_LOTTIE_TO_PLAY","TIME_LOTTIE_TO_PLAY_IN","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION"],"mappings":"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"}

package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js

@@ -1,9 +1,8 @@
 import { jsx as y } from "react/jsx-runtime";
-import { useRef as A, useMemo as u, useLayoutEffect as R } from "react";
-import { describeArc as k } from "../../helper.js";
-import { Svg as w, Path as D } from "./animated-arc-styled.js";
-import { ADJUSTED_START_ANGLE as L } from "./constants.js";
-const B = ({
+import { useRef as R, useMemo as u, useLayoutEffect as k } from "react";
+import { describeArc as w } from "../../helper.js";
+import { Svg as A, Path as b } from "./animated-arc-styled.js";
+const D = ({
   radius: e,
   strokeWidth: r,
   color: $,
@@ -14,11 +13,11 @@ const B = ({
   delay: s = 0,
   playRainbowColors: g = !1
 }) => {
-  const f = A(null), l = u(() => -L + a, [a]), n = e, m = e - r / 2, h = u(
-    () => k(n, n, m, l, i),
-    [i, l, m, n]
+  const f = R(null), l = u(() => -150 + a, [a]), n = e, h = e - r / 2, m = u(
+    () => w(n, n, h, l, i),
+    [i, l, h, n]
   );
-  return R(() => {
+  return k(() => {
     const t = f.current;
     if (t) {
       if (o === "draw") {
@@ -31,11 +30,11 @@ const B = ({
         t.style.transition = `opacity 0s ease-in-out ${s}s`, t.style.opacity = "1";
       }));
     }
-  }, [h, o, c, s]), /* @__PURE__ */ y(w, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ y(
-    D,
+  }, [m, o, c, s]), /* @__PURE__ */ y(A, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ y(
+    b,
     {
       ref: f,
-      d: h,
+      d: m,
       fill: "none",
       stroke: $,
       strokeWidth: r,
@@ -45,6 +44,6 @@ const B = ({
   ) });
 };
 export {
-  B as AnimatedArc
+  D as AnimatedArc
 };
 //# sourceMappingURL=animated-arc.js.map

package/dist/features/post-game-stats/digital-meter/comp/animated-arc/animated-arc.js.map

@@ -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, useMemo } 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 = useMemo(() => -ADJUSTED_START_ANGLE + startAngle, [startAngle]);\n  const center = radius;\n  const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n  const arcPath = useMemo(\n    () => describeArc(center, center, arcRadius, adjustedStartAngle, targetAngle),\n    [targetAngle, adjustedStartAngle, arcRadius, center],\n  );\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","useMemo","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,IAAqBC,EAAQ,MAAM,CAACC,IAAuBT,GAAY,CAACA,CAAU,CAAC,GACnFU,IAASd,GACTe,IAAYf,IAASC,IAAc,GACnCe,IAAUJ;AAAA,IACd,MAAMK,EAAYH,GAAQA,GAAQC,GAAWJ,GAAoBR,CAAW;AAAA,IAC5E,CAACA,GAAaQ,GAAoBI,GAAWD,CAAM;AAAA,EAAA;AAGrD,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAOV,EAAQ;AAErB,QAAKU,GAEL;AAAA,UAAIb,MAAS,QAAQ;AACb,cAAAc,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,qBAAqBd,CAAQ,YAAYE,CAAK,KACtEY,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIb,MAAS,WACXa,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AACrB,QAAAA,EAAA,MAAM,aAAa,0BAA0BZ,CAAK,KACvDY,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACH,GAASV,GAAMD,GAAUE,CAAK,CAAC,qBAGhCc,GAAA,EAAW,OAAO,IAAIrB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAsB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKd;AAAA,MACL,GAAGO;AAAA,MACH,MAAK;AAAA,MACL,QAAQd;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,oBAAoBO;AAAA,IAAA;AAAA,EAExB,EAAA,CAAA;AAEJ;"}
+{"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, useMemo } 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 = useMemo(() => -ADJUSTED_START_ANGLE + startAngle, [startAngle]);\n  const center = radius;\n  const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n  const arcPath = useMemo(\n    () => describeArc(center, center, arcRadius, adjustedStartAngle, targetAngle),\n    [targetAngle, adjustedStartAngle, arcRadius, center],\n  );\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","useMemo","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,IAAqBC,EAAQ,MAAM,OAAwBR,GAAY,CAACA,CAAU,CAAC,GACnFS,IAASb,GACTc,IAAYd,IAASC,IAAc,GACnCc,IAAUH;AAAA,IACd,MAAMI,EAAYH,GAAQA,GAAQC,GAAWH,GAAoBR,CAAW;AAAA,IAC5E,CAACA,GAAaQ,GAAoBG,GAAWD,CAAM;AAAA,EACrD;AAEA,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAOT,EAAQ;AAErB,QAAKS,GAEL;AAAA,UAAIZ,MAAS,QAAQ;AACb,cAAAa,IAASD,EAAK,eAAe;AAE9B,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,MAAA;AAGH,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,EAAA,GAExB;AAEJ;"}

package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js

@@ -1,8 +1,8 @@
 import o, { keyframes as e } from "styled-components";
-import { GAME_LAUNCHER_SIZE as r, GAME_LAUNCHER_SIZE_LARGE as s } from "../../circle-games/game-launcher/comps/card-container/constants.js";
+import { GAME_LAUNCHER_SIZE as r, GAME_LAUNCHER_SIZE_LARGE as a } from "../../circle-games/game-launcher/comps/card-container/constants.js";
 import i from "../../ui/text/text.js";
-import { ADJUSTED_START_ANGLE as n } from "./comp/animated-arc/constants.js";
-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";
+import { ADJUSTED_START_ANGLE as s } from "./comp/animated-arc/constants.js";
+import { CONTENT_CONTAINER_Z_INDEX as l, RAINBOW_COLOR_ANIMATION_DURATION as d, LINE_MARKING_Z_INDEX as m, NUMBER_MARKING_Z_INDEX as p, TARGET_HELPER_TEXT_APPEAR_DELAY as n } from "./constants.js";
 import { rainbowColorAnimation as f } from "./helper.js";
 const g = o.div`
   height: ${r}px;
@@ -29,7 +29,7 @@ const g = o.div`
 `, b = o.div`
   position: relative;
   flex-grow: 1;
-  bottom: ${r === s ? -8 : -6}px;
+  bottom: ${r === a ? -8 : -6}px;
 `;
 o.div`
   position: absolute;
@@ -45,24 +45,24 @@ const u = o.div`
   transform: rotate(${({ $angle: t }) => -240 + t}deg);
   left: ${r / 2}px;
   top: ${r / 2}px;
-  z-index: ${d};
+  z-index: ${m};
 `, T = o.div`
   position: absolute;
   height: ${r - r * 0.0625 - 10}px;
-  transform: rotate(${({ $angle: t }) => -n + t}deg);
-  z-index: ${m};
+  transform: rotate(${({ $angle: t }) => -150 + t}deg);
+  z-index: ${p};
 `, h = o.div`
-  transform: rotate(${({ $angle: t }) => n - t}deg);
+  transform: rotate(${({ $angle: t }) => s - t}deg);
 `, C = o.div`
   position: absolute;
   top: 0;
   transform: ${({ top: t }) => `translateY(${t}px)`};
 `, R = o(i)`
   animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
-    ease-in-out ${a}s forwards;
+    ease-in-out ${n}s forwards;
 `, I = o(i)`
   animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
-    ease ${a}s forwards;
+    ease ${n}s forwards;
 `;
 o.div`
   height: 100%;
@@ -70,7 +70,7 @@ o.div`
 `;
 const v = o(i)`
   animation: ${({ $isTargetAchieved: t }) => t ? f : "unset"}
-    ${p}s ease infinite forwards;
+    ${d}s ease infinite forwards;
 `;
 export {
   C as BottomAbsoluteView,

package/dist/features/post-game-stats/digital-meter/digital-meter-styled.js.map

@@ -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;"}
+{"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","NUMBER_MARKING_Z_INDEX","MarkingText","ADJUSTED_START_ANGLE","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,EACZ,MAAAA,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,QAAa,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,QAAa,OAAwBA,CAAM;AAAA,aACvDG,CAAsB;AAAA,GAGtBC,IAAcd,EAAO;AAAA,sBACZ,CAAC,EAAE,QAAAU,QAAaK,IAAuBL,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;"}