From 5ba48995992cb6e3c144957dff67186a87bdbbc4 Mon Sep 17 00:00:00 2001
From: Everton Correia <1169768+evertonstz@users.noreply.github.com>
Date: Thu, 21 Mar 2024 16:46:13 -0300
Subject: [PATCH] Add parallax animation in device screen (#34)

* initial commit
---
 .../AddDeviceFooter/AddDeviceFooter.tsx       |   9 +-
 .../AddDeviceFooter/SerialInput.tsx           |  14 +-
 .../PaxPairingSvg/ParallaxComponent.tsx       | 151 ++++++++++++++++++
 .../Graphics/PaxPairingSvg/PaxPairing.tsx     |  61 ++++---
 .../Graphics/PaxPairingSvg/PulsatingLight.tsx |  22 ++-
 .../PaxPairingSvg/Svg/Pax3DeviceSvg.tsx       |  10 +-
 .../MainContent/NoSelectedDevice.tsx          |  15 +-
 src/components/Modal/Modal.tsx                |  10 +-
 src/hooks/index.ts                            |   1 +
 src/hooks/useIsMobile.tsx                     |  15 ++
 10 files changed, 259 insertions(+), 49 deletions(-)
 create mode 100644 src/components/Graphics/PaxPairingSvg/ParallaxComponent.tsx
 create mode 100644 src/hooks/useIsMobile.tsx

diff --git a/src/components/AddDeviceFooter/AddDeviceFooter.tsx b/src/components/AddDeviceFooter/AddDeviceFooter.tsx
index 9da87d9..8a77307 100644
--- a/src/components/AddDeviceFooter/AddDeviceFooter.tsx
+++ b/src/components/AddDeviceFooter/AddDeviceFooter.tsx
@@ -10,6 +10,11 @@ import SerialInput from './SerialInput';
 const SERIAL_SIZE = 8;
 const INPUT_PLACEHOLDER = `Insert ${SERIAL_SIZE} digits serial`;
 
+interface Props {
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+
 const buildOptions = (devices: Pax.lib.Devices[]) => {
   return devices.map(device => {
     return { value: device, label: device };
@@ -23,7 +28,7 @@ const addNewDeviceButtonDisabled = (serialInput: string | undefined) => {
   return false;
 };
 
-const AddDeviceFooter = () => {
+const AddDeviceFooter = (props: Props) => {
   const defaultDevice = SUPPORTED_DEVICES[0];
   const [serialInput, setSerialInput] = useState<string | undefined>(undefined);
   const [deviceValue, setDeviceValue] =
@@ -56,6 +61,8 @@ const AddDeviceFooter = () => {
             value={serialInput}
             onValueChange={setSerialInput}
             placeholder={INPUT_PLACEHOLDER}
+            onFocus={props.onFocus}
+            onBlur={props.onBlur}
           />
         </div>
         <Button
diff --git a/src/components/AddDeviceFooter/SerialInput.tsx b/src/components/AddDeviceFooter/SerialInput.tsx
index 84bd118..9d1307e 100644
--- a/src/components/AddDeviceFooter/SerialInput.tsx
+++ b/src/components/AddDeviceFooter/SerialInput.tsx
@@ -5,8 +5,11 @@ interface Props {
   onValueChange?: (input: string) => void;
   max?: number;
   placeholder?: string;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }
-const SerialInput = ({ value, onValueChange, max, placeholder }: Props) => {
+const SerialInput = (props: Props) => {
+  const { value, onValueChange, max, placeholder, onFocus, onBlur } = props;
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!onValueChange) {
       return;
@@ -31,6 +34,8 @@ const SerialInput = ({ value, onValueChange, max, placeholder }: Props) => {
         onChange={e => handleChange(e)}
         value={value}
         placeholder={placeholder}
+        onFocus={onFocus}
+        onBlur={onBlur}
       />
       <div className="absolute inset-y-0 right-0 mr-[1px] flex items-center">
         <p
@@ -42,13 +47,6 @@ const SerialInput = ({ value, onValueChange, max, placeholder }: Props) => {
         </p>
       </div>
     </div>
-    //     <Input
-    //       className={`rounded-none focus-visible:border-neutral-400 focus-visible:ring-0
-    //   focus-visible:ring-offset-0 dark:focus-visible:border-neutral-600`}
-    //       onChange={e => handleChange(e)}
-    //       value={value}
-    //       placeholder={placeholder}
-    //     />
   );
 };
 export default SerialInput;
diff --git a/src/components/Graphics/PaxPairingSvg/ParallaxComponent.tsx b/src/components/Graphics/PaxPairingSvg/ParallaxComponent.tsx
new file mode 100644
index 0000000..e344bb4
--- /dev/null
+++ b/src/components/Graphics/PaxPairingSvg/ParallaxComponent.tsx
@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+
+interface ParallaxComponentProps {
+  children: React.ReactNode;
+  multiplier?: number;
+}
+
+interface MouseCoordnates {
+  x: {
+    current: number;
+    max: number;
+    min: number;
+    perc: number;
+  };
+  y: {
+    current: number;
+    max: number;
+    min: number;
+    perc: number;
+  };
+}
+
+const mouseCoordnatesInitialValue: MouseCoordnates = {
+  x: {
+    current: 0,
+    max: 0,
+    min: 0,
+    perc: 0,
+  },
+  y: {
+    current: 0,
+    max: 0,
+    min: 0,
+    perc: 0,
+  },
+};
+
+/**
+ * Calculate the y-coordinate in a two-dimensional coordinate system based on the given
+ * x-coordinate and a percentage between initial and final x-coordinates.
+ *
+ * @param {Object} coordinates - An object containing initial and final x and y coordinates
+ * @param {number} coordinates.x.initial - The initial x-coordinate
+ * @param {number} coordinates.x.final - The final x-coordinate
+ * @param {number} coordinates.y.initial - The initial y-coordinate
+ * @param {number} coordinates.y.final - The final y-coordinate
+ * @param {number} currentPercentage - The percentage between initial and final x-coordinates
+ * @return {number} The calculated y-coordinate
+ */
+const centerCoordinateSystem = (
+  coordinates: {
+    x: { initial: number; final: number };
+    y: { initial: number; final: number };
+  },
+  currentPercentage: number,
+) => {
+  const m =
+    (coordinates.y.final - coordinates.y.initial) /
+    (coordinates.x.final - coordinates.x.initial);
+  const y =
+    m * (currentPercentage - coordinates.x.initial) + coordinates.y.initial;
+  return y;
+};
+
+/**
+ * Translate the current percentage to center coordinate system.
+ *
+ * @param {number} currentPercentage - the current percentage value to be translated
+ * @return {number} the calculated value in the center coordinate system
+ */
+const translate = (currentPercentage: number) => {
+  if (currentPercentage > 0.5) {
+    // 0.51 to 1
+    const calculated = centerCoordinateSystem(
+      {
+        x: {
+          initial: 0.51,
+          final: 1,
+        },
+        y: {
+          initial: 0,
+          final: 1,
+        },
+      },
+      currentPercentage,
+    );
+
+    return calculated;
+  } else {
+    // 0 to 0.5
+    const calculated = centerCoordinateSystem(
+      {
+        x: {
+          initial: 0,
+          final: 0.5,
+        },
+        y: {
+          initial: -1,
+          final: 0,
+        },
+      },
+      currentPercentage,
+    );
+    return calculated;
+  }
+};
+
+const ParallaxComponent = (props: ParallaxComponentProps) => {
+  const { children, multiplier = 10 } = props;
+  const [mouseCoord, setMouseCoord] = useState<MouseCoordnates>(
+    mouseCoordnatesInitialValue,
+  );
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      setMouseCoord({
+        x: {
+          current: event.clientX,
+          max: window.innerWidth - 1,
+          min: 0,
+          perc: event.clientX / window.innerWidth,
+        },
+        y: {
+          current: event.clientY,
+          max: window.innerHeight - 1,
+          min: 0,
+          perc: event.clientY / window.innerHeight,
+        },
+      });
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+
+  const parallaxStyle: React.CSSProperties = {
+    transform: `translate(${-translate(mouseCoord.x.perc) * multiplier}px, 
+    ${-translate(mouseCoord.y.perc) * multiplier}px)`,
+  };
+
+  return (
+    <div className="h-full w-full" style={parallaxStyle}>
+      {children}
+    </div>
+  );
+};
+
+export default ParallaxComponent;
diff --git a/src/components/Graphics/PaxPairingSvg/PaxPairing.tsx b/src/components/Graphics/PaxPairingSvg/PaxPairing.tsx
index aebe7af..6b721a9 100644
--- a/src/components/Graphics/PaxPairingSvg/PaxPairing.tsx
+++ b/src/components/Graphics/PaxPairingSvg/PaxPairing.tsx
@@ -1,34 +1,49 @@
+import ParallaxComponent from './ParallaxComponent';
 import PulsatingLight from './PulsatingLight';
 import Pax3DeviceSvg from './Svg/Pax3DeviceSvg';
 
-const PaxPairing = () => {
+interface Props {
+  parallax?: boolean;
+  pulsatingLightSpeed?: 'slow' | 'normal' | 'fast';
+}
+
+const PaxPairing = (props: Props) => {
   const svgFillColor = '#666666';
   const lightColor = '#00FFFF';
 
+  const renderWithParallax = (
+    multiplier: number,
+    children: React.ReactNode,
+    parallax?: boolean,
+  ) => {
+    if (!parallax) {
+      return children;
+    }
+
+    return (
+      <ParallaxComponent multiplier={multiplier}>{children}</ParallaxComponent>
+    );
+  };
+
   return (
-    <div
-      style={{
-        position: 'relative',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <div
-        style={{
-          position: 'absolute',
-          top: 60,
-        }}
-      >
-        <PulsatingLight radius={'5px'} color={lightColor} />
+    <div className="relative flex h-72 items-center justify-center">
+      <div className="absolute top-14"></div>
+      {renderWithParallax(
+        7,
+        <Pax3DeviceSvg fillColor={svgFillColor} showShadow />,
+        props.parallax,
+      )}
+      <div className="absolute top-12">
+        {renderWithParallax(
+          10,
+          <PulsatingLight
+            radius={'5px'}
+            color={lightColor}
+            speed={props.pulsatingLightSpeed}
+          />,
+          props.parallax,
+        )}
       </div>
-      <Pax3DeviceSvg
-        fillColor={svgFillColor}
-        showShadow
-        style={{
-          width: '50%',
-        }}
-      />
     </div>
   );
 };
diff --git a/src/components/Graphics/PaxPairingSvg/PulsatingLight.tsx b/src/components/Graphics/PaxPairingSvg/PulsatingLight.tsx
index 33b2ef0..75e69dc 100644
--- a/src/components/Graphics/PaxPairingSvg/PulsatingLight.tsx
+++ b/src/components/Graphics/PaxPairingSvg/PulsatingLight.tsx
@@ -3,16 +3,30 @@ import React, { useEffect, useState } from 'react';
 interface PulsatingLightProps {
   radius?: string;
   color: string;
+  speed?: 'slow' | 'normal' | 'fast';
 }
 
-const PulsatingLight = ({ radius, color }: PulsatingLightProps) => {
+const PulsatingLight = (props: PulsatingLightProps) => {
+  const { speed = 'normal', color, radius } = props;
   const [isBloomed, setIsBloomed] = useState(false);
+  const getSpeed = (speed: 'fast' | 'normal' | 'slow') => {
+    switch (speed) {
+      case 'fast':
+        return 0.5;
+      case 'slow':
+        return 1.5;
+      default:
+        return 1;
+    }
+  };
+  const speedInSeconds = getSpeed(speed);
+
   useEffect(() => {
     const interval = setInterval(() => {
       setIsBloomed(prevState => !prevState);
-    }, 1000);
+    }, speedInSeconds * 1000);
     return () => clearInterval(interval);
-  }, []);
+  }, [speedInSeconds]);
 
   const animationStyle: React.CSSProperties = {
     width: radius ? radius : '100px',
@@ -20,7 +34,7 @@ const PulsatingLight = ({ radius, color }: PulsatingLightProps) => {
     borderRadius: '50%',
     backgroundColor: color,
     boxShadow: isBloomed ? `0 0 50px 10px ${color}` : 'none',
-    transition: 'box-shadow 1s ease-in-out',
+    transition: `box-shadow ${speedInSeconds}s ease-in-out`,
   };
 
   const buildCircle = (x: string, y: string) => {
diff --git a/src/components/Graphics/PaxPairingSvg/Svg/Pax3DeviceSvg.tsx b/src/components/Graphics/PaxPairingSvg/Svg/Pax3DeviceSvg.tsx
index 50534e2..1b1cdf2 100644
--- a/src/components/Graphics/PaxPairingSvg/Svg/Pax3DeviceSvg.tsx
+++ b/src/components/Graphics/PaxPairingSvg/Svg/Pax3DeviceSvg.tsx
@@ -4,17 +4,15 @@ interface Pax3DeviceSvgProps {
   showShadow?: boolean;
 }
 
-const Pax3DeviceSvg = ({
-  fillColor,
-  style,
-  showShadow,
-}: Pax3DeviceSvgProps) => {
+const Pax3DeviceSvg = (props: Pax3DeviceSvgProps) => {
+  const { fillColor, style, showShadow } = props;
   return (
     <svg
+      id="pax3device"
       viewBox="0 0 339 675"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      style={{ width: '100%', display: 'block', ...style }}
+      style={{ display: 'block', width: '100%', height: '100%', ...style }}
     >
       <rect width="100%" height="100%" />
       <path
diff --git a/src/components/MainContent/NoSelectedDevice.tsx b/src/components/MainContent/NoSelectedDevice.tsx
index 0784a0e..352214d 100644
--- a/src/components/MainContent/NoSelectedDevice.tsx
+++ b/src/components/MainContent/NoSelectedDevice.tsx
@@ -1,11 +1,22 @@
+import { useIsMobile } from '@/hooks';
+import { useState } from 'react';
+
 import AddDeviceFooter from '../AddDeviceFooter';
 import { PaxPairing } from '../Graphics';
 
 export const NoSelectedDevice = () => {
+  const isMobile = useIsMobile();
+  const [isInputOnFocus, setIsInputOnFocus] = useState(false);
   return (
     <div className="mx-auto flex flex-col gap-6 self-center">
-      <PaxPairing />
-      <AddDeviceFooter />
+      <PaxPairing
+        parallax={!isMobile}
+        pulsatingLightSpeed={isInputOnFocus ? 'fast' : 'slow'}
+      />
+      <AddDeviceFooter
+        onFocus={() => setIsInputOnFocus(true)}
+        onBlur={() => setIsInputOnFocus(false)}
+      />
     </div>
   );
 };
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 6a6ee33..837e5dc 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { useWindowSize } from '@uidotdev/usehooks';
+import { useIsMobile } from '@/hooks';
 
 import {
   Dialog,
@@ -23,11 +23,11 @@ export interface ModalProps {
   children?: React.ReactNode;
 }
 
-const Modal = ({ title, open, onOpenChange, footer, children }: ModalProps) => {
-  const { width } = useWindowSize();
-  const isSmallScreen = !width ? false : width < 768;
+const Modal = (props: ModalProps) => {
+  const { title, open, onOpenChange, footer, children } = props;
+  const isMobile = useIsMobile();
 
-  if (isSmallScreen) {
+  if (isMobile) {
     return (
       <Drawer open={open} onOpenChange={onOpenChange} shouldScaleBackground>
         <DrawerContent>
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 7f1d45e..61a8188 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from './useDevicesLocalStorage';
 export * from './usePaxBluetoothServices';
+export { default as useIsMobile } from './useIsMobile';
diff --git a/src/hooks/useIsMobile.tsx b/src/hooks/useIsMobile.tsx
new file mode 100644
index 0000000..540c596
--- /dev/null
+++ b/src/hooks/useIsMobile.tsx
@@ -0,0 +1,15 @@
+import { useWindowSize } from '@uidotdev/usehooks';
+
+/**
+ * Custom hook to check if the current screen width is smaller than a specified breakpoint.
+ *
+ * @param {number} breakpoint - The breakpoint value to compare the screen width against.
+ * @return {boolean} Returns true if the screen width is smaller than the specified breakpoint,
+ * false otherwise.
+ */
+const useIsMobile = (breakpoint = 768) => {
+  const { width } = useWindowSize();
+  const isSmallScreen = !width ? false : width < breakpoint;
+  return isSmallScreen;
+};
+export default useIsMobile;