feat: hide FasterCarsFromBehind during Lone Qualify (#44)

Co-authored-by: Copilot <[email protected]>

Author: tariknz

src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.stories.tsx

@@ -1,18 +1,32 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { FasterCarsFromBehind } from './FasterCarsFromBehind';
+import {  FasterCarsFromBehind, FasterCarsFromBehindDisplay } from './FasterCarsFromBehind';
 import { TelemetryDecorator } from '@irdashies/storybook';
 
 export default {
-  component: FasterCarsFromBehind,
-  parameters: {
-    controls: {
-      exclude: ['telemetryPath'],
-    }
+  component: FasterCarsFromBehindDisplay,
+  argTypes: {
+    classColor: {
+      options: [undefined, 0xffda59, 0x33ceff, 0xff5888, 0xae6bff, 0xffffff],
+      control: { type: 'select' },
+    },
+    percent: {
+      control: { type: 'range', min: 0, max: 100 },
+    },
   }
-} as Meta<typeof FasterCarsFromBehind>;
+} as Meta<typeof FasterCarsFromBehindDisplay>;
 
-type Story = StoryObj<typeof FasterCarsFromBehind>;
+type Story = StoryObj<typeof FasterCarsFromBehindDisplay>;
 
 export const Primary: Story = {
+  render: () => <FasterCarsFromBehind />,
   decorators: [TelemetryDecorator('/test-data/1747384033336')],
 };
+
+export const Display: Story = {
+  args: {
+    name: 'Tom Wilson',
+    distance: -1.0,
+    percent: 50,
+    classColor: 0xffda59,
+  },
+};

src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.tsx

@@ -1,32 +1,55 @@
-import { useMemo } from 'react';
-import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { useCarBehind } from './hooks/useCarBehind';
-import { useFasterCarsSettings } from './hooks/useFasterCarsSettings';
-
-export const FasterCarsFromBehind = () => {
-  const settings = useFasterCarsSettings();
-  const carBehind = useCarBehind({distanceThreshold: settings?.distanceThreshold });
-  const [parent] = useAutoAnimate();
-
-  const layout = useMemo(() => {
-    const hidden = carBehind.name === null || carBehind.name == undefined ? 'hidden' : '';  
-    const animate = carBehind.distance > -0.3 ? 'animate-pulse' : '';
-    const red = carBehind.percent;
-    const green = 100 - carBehind.percent;
-
-    return { hidden, animate, red, green };
-  }, [
-    carBehind.name,
-    carBehind.distance,
-    carBehind.percent
-  ]);
-
-  return (
-    <div className={`w-full flex justify-between rounded-sm p-1 pb-2 font-bold relative ${layout.hidden} ${layout.animate} ${carBehind.background}`}
-		     ref={parent}>
-      <div className="rounded-sm bg-gray-700 p-1">{carBehind.name}</div>
-	    <div className="rounded-sm bg-gray-700 p-1">{carBehind.distance}</div>
-	    <div className={`absolute bottom-0 left-0 rounded-b-sm bg-white h-1 flex-none`} style={{width: carBehind.percent+'%', backgroundColor: `rgb(${layout.red}%, ${layout.green}%, 0%)`}}></div>
-    </div>
-  );
-};
+import { useCurrentSessionType } from '@irdashies/context';
+import { useCarBehind } from './hooks/useCarBehind';
+import { useFasterCarsSettings } from './hooks/useFasterCarsSettings';
+import { getTailwindStyle } from '@irdashies/utils/colors';
+
+export interface FasterCarsFromBehindProps {
+  name?: string;
+  distance?: number;
+  percent?: number;
+  classColor?: number;
+}
+
+export const FasterCarsFromBehind = () => {
+  const settings = useFasterCarsSettings();
+  const sessionType = useCurrentSessionType();
+  const carBehind = useCarBehind({
+    distanceThreshold: settings?.distanceThreshold,
+  });
+
+  if (sessionType === 'Lone Qualify') {
+    return null;
+  }
+
+  return <FasterCarsFromBehindDisplay {...carBehind} />;
+};
+
+export const FasterCarsFromBehindDisplay = ({
+  name,
+  distance,
+  percent,
+  classColor,
+}: FasterCarsFromBehindProps) => {
+  if (!name) {
+    return null;
+  }
+
+  const animate = distance && distance > -0.3 ? 'animate-pulse' : '';
+  const red = percent || 0;
+  const green = 100 - (percent || 0);
+  const background = getTailwindStyle(classColor).classHeader;
+
+  return (
+    <div className={`w-full flex justify-between rounded-sm p-1 pb-2 font-bold relative ${background} ${animate}`}>
+      <div className="rounded-sm bg-gray-700 p-1">{name}</div>
+      <div className="rounded-sm bg-gray-700 p-1">{distance}</div>
+      <div
+        className={`absolute bottom-0 left-0 rounded-b-sm bg-white h-1 flex-none`}
+        style={{
+          width: `${percent ?? 0}%`,
+          backgroundColor: `rgb(${red}%, ${green}%, 0%)`,
+        }}
+      ></div>
+    </div>
+  );
+};

src/frontend/components/FasterCarsFromBehind/hooks/useCarBehind.tsx

@@ -1,21 +1,36 @@
 import { useMemo } from 'react';
 import { useDriverRelatives } from '../../Standings/hooks/useDriverRelatives';
-import { getTailwindStyle } from '@irdashies/utils/colors';
 
-export const useCarBehind = ({ distanceThreshold }:{ distanceThreshold?: number }) => {
+export const useCarBehind = ({
+  distanceThreshold,
+}: {
+  distanceThreshold?: number;
+}) => {
   const drivers = useDriverRelatives({ buffer: 1 });
   const carBehind = drivers[2];
-  const myCar = drivers[1];  
+  const myCar = drivers[1];
   const threshold = distanceThreshold ?? -3;
-  
-  const background = getTailwindStyle(carBehind?.carClass?.color).classHeader;
-  
-  const FasterCarFromBehind = useMemo(() => {
-    const percent = parseInt((100 - (Math.abs(carBehind?.delta) / 3 * 100)).toFixed(0));
-    
-    return { name: carBehind?.driver?.name, distance: parseFloat(carBehind?.delta.toFixed(1)), background: background, percent : percent };
-  }, [carBehind?.delta, carBehind?.driver?.name, background]);
-  
-  if(carBehind?.carClass?.relativeSpeed <= myCar?.carClass?.relativeSpeed || carBehind?.delta < threshold) return {name: null, distance: 0, background: null, percent: 0};
-  return FasterCarFromBehind;
+  const classColor = carBehind?.carClass?.color;
+
+  const fasterCarFromBehind = useMemo(() => {
+    const percent = parseInt(
+      (100 - (Math.abs(carBehind?.delta ?? 0) / 3) * 100).toFixed(0)
+    );
+
+    return {
+      name: carBehind?.driver?.name,
+      distance: parseFloat(carBehind?.delta?.toFixed(1) ?? '0'),
+      classColor,
+      percent: percent,
+    };
+  }, [carBehind?.delta, carBehind?.driver?.name, classColor]);
+
+  if (
+    carBehind?.carClass?.relativeSpeed <= myCar?.carClass?.relativeSpeed ||
+    carBehind?.delta < threshold
+  ) {
+    return { name: undefined, distance: 0, classColor: undefined, percent: 0 };
+  }
+
+  return fasterCarFromBehind;
 };