feat: add an aura animation from under finger

src/components/CreateProfilePage/index.tsx

@@ -1,10 +1,12 @@
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'
 import { useTranslation } from 'react-i18next'
 import ProcessFlow from "./ProcessFlow"
 import routes from "../../routes"
 import styles from './styles.module.css'
+import { useSelector } from "react-redux"
+import { selectors } from "../../store"
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
@@ -12,6 +14,25 @@ function CreateProfilePage(): JSX.Element {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [progress, setProgress] = useState(0)
+  const auraCoordinates = useSelector(selectors.selectAuraCoordinates)
+  const progressbarRef = useRef<HTMLDivElement>(null);
+  const pageRef = useRef<HTMLDivElement>(null);
+  const [auraCoordinatesCounted, setAuraCoordinatesCounted] = useState({
+    x: auraCoordinates.X - 125,
+    y: auraCoordinates.Y - 125
+  })
+
+  useEffect(() => {
+    setTimeout(() => {
+      setAuraCoordinatesCounted(
+        {
+          x: (progressbarRef?.current?.offsetLeft || 0) + (pageRef?.current?.parentElement?.parentElement?.offsetLeft || 0),
+          y: (progressbarRef?.current?.offsetTop || 0) + 50
+        }
+      )
+    }, 1000);
+  }, [progressbarRef])
+  
   const processItems = [
     { task: () => sleep(3300).then(() => setProgress(23)), label: t('money_energy') },
     { task: () => sleep(2550).then(() => setProgress(48)), label: t('sexual_energy') },
@@ -24,9 +45,9 @@ function CreateProfilePage(): JSX.Element {
     .then(() => navigate(routes.client.attention()))
 
   return (
-    <section className={`${styles.page} page`}>
-      <div className={styles.progressbar}>
-        <div className={styles.aura}></div>
+    <section className={`${styles.page} page`} ref={pageRef}>
+      <div className={styles.progressbar} ref={progressbarRef}>
+        <div style={{ top: `${auraCoordinatesCounted.y}px`, left: `${auraCoordinatesCounted.x}px` }} className={styles.aura}></div>
         <CircularProgressbar
           value={progress}
           text={`${progress}%`}

src/components/CreateProfilePage/styles.module.css

@@ -19,11 +19,14 @@
 }
 
 .aura {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  max-width: 250px;
+  max-height: 250px;
+  transition: top 3s, left 3s;
 
   background-image: url("/goosebumps-aura.png");
   background-size: 130%;
@@ -60,7 +63,7 @@
 }
 
 .circular-progressbar {
-  animation: appearance-progressbar 3s;
+  animation: appearance-progressbar 4s;
 }
 
 

src/components/FreePeriodInfoPage/index.tsx

@@ -3,11 +3,28 @@ import { useTranslation } from 'react-i18next'
 import Title from '../Title'
 import routes from '../../routes'
 import styles from './styles.module.css'
+import { useCallback } from 'react'
+import { useDispatch } from 'react-redux'
+import { actions } from '../../store'
 
 function FreePeriodInfoPage(): JSX.Element {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const handleNext = () => navigate(routes.client.createProfile())
+  const dispatch = useDispatch()
+  const updateCoordinates = useCallback((X: number, Y: number) => {
+    dispatch(actions.aura.update({
+      coordinates: {
+        X,
+        Y
+      }
+    }))
+  }, [dispatch])
+  const handleNext = (e: any) => {
+    const X = e.clientX || Math.round(e.touches[0].clientX)
+    const Y = e.clientY || Math.round(e.touches[0].clientY)
+    updateCoordinates(X, Y)
+    navigate(routes.client.createProfile())
+  }
 
   return (
     <section className={`${styles.page} page`} onMouseDown={handleNext} onTouchStart={handleNext}>

src/store/aura.ts

@@ -0,0 +1,38 @@
+import { createSlice, createSelector } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+interface IAura {
+    coordinates: {
+        X: number
+        Y: number
+    }
+}
+
+const initialState: IAura = {
+  coordinates: {
+    X: 0,
+    Y: 0
+  }
+}
+
+const auraSlice = createSlice({
+  name: 'aura',
+  initialState,
+  reducers: {
+    update(state, action: PayloadAction<Partial<IAura>>) {
+        if (action.payload.coordinates?.X) {
+            return { ...state, ...action.payload }
+        } else {
+            return state
+        }
+    },
+  },
+  extraReducers: (builder) => builder.addCase('reset', () => initialState),
+})
+
+export const { actions } = auraSlice
+export const selectAuraCoordinates = createSelector(
+  (state: { aura: IAura }) => state.aura.coordinates,
+  (aura) => aura
+)
+export default auraSlice.reducer