Feature/faster cars from behind (#15)

Co-authored-by: Tobias Mueller <[email protected]>
Co-authored-by: Tarik Alani <[email protected]>
Co-authored-by: Tarik Alani <[email protected]>

Author: 3 people

package-lock.json

@@ -3426,7 +3426,7 @@
         "CarClassPowerAdjust": "0.000 %",
         "CarClassDryTireSetLimit": "0 %",
         "CarClassColor": 16767577,
-        "CarClassEstLapTime": 113.6302,
+        "CarClassEstLapTime": 126.6302,
         "IRating": 1367,
         "LicLevel": 15,
         "LicSubLevel": 375,

src/app/bridge/iracingSdk/mock-data/session.json

@@ -3426,7 +3426,7 @@
         "CarClassPowerAdjust": "0.000 %",
         "CarClassDryTireSetLimit": "0 %",
         "CarClassColor": 16767577,
-        "CarClassEstLapTime": 113.6302,
+        "CarClassEstLapTime": 126.6302,
         "IRating": 1367,
         "LicLevel": 15,
         "LicSubLevel": 375,

src/app/irsdk/node/utils/mock-data/session.json

@@ -69,5 +69,15 @@ export const defaultDashboard: DashboardLayout = {
         height: 330,
       },
     },
+    {
+      id: 'fastercarsfrombehind',
+      enabled: false,
+      layout: {
+        x: 700,
+        y: 200,
+        width: 400,
+        height: 40,
+      },
+    }
   ],
 };

src/app/storage/defaultDashboard.ts

@@ -14,6 +14,7 @@ import { Settings } from './components/Settings/Settings';
 import { Relative } from './components/Standings/Relative';
 import { Weather } from './components/Weather';
 import { TrackMap } from './components/TrackMap/TrackMap';
+import { FasterCarsFromBehind } from './components/FasterCarsFromBehind/FasterCarsFromBehind';
 import { EditMode } from './components/EditMode/EditMode';
 
 // TODO: type this better, right now the config comes from settings
@@ -25,6 +26,7 @@ const WIDGET_MAP: Record<string, (config: any) => React.JSX.Element> = {
   settings: Settings,
   map: TrackMap,
   weather: Weather,
+  fastercarsfrombehind: FasterCarsFromBehind,
 };
 
 const AppRoutes = () => {

src/frontend/App.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FasterCarsFromBehind } from './FasterCarsFromBehind';
+import { TelemetryDecorator } from '../../../../.storybook/telemetryDecorator';
+import { DynamicTelemetrySelector } from '../Standings/DynamicTelemetrySelector';
+import { useState } from 'react';
+
+export default {
+  component: FasterCarsFromBehind,
+  parameters: {
+    controls: {
+      exclude: ['telemetryPath'],
+    }
+  }
+} as Meta<typeof FasterCarsFromBehind>;
+
+type Story = StoryObj<typeof FasterCarsFromBehind>;
+
+export const Primary: Story = {
+  decorators: [TelemetryDecorator()],
+};
+
+export const DynamicTelemetry: Story = {
+  decorators: [(Story, context) => {
+    const [selectedPath, setSelectedPath] = useState('/test-data/1745291694179');
+    
+    return (
+      <>
+        <DynamicTelemetrySelector
+          onPathChange={setSelectedPath}
+          initialPath={selectedPath}
+        />
+        {TelemetryDecorator(selectedPath)(Story, context)}
+      </>
+    );
+  }],
+};

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

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { useCarBehind } from './hooks/useCarBehind';
+
+export const FasterCarsFromBehind = () => {
+  const carBehind = useCarBehind();
+  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>
+  );
+};

src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.tsx

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { useDriverRelatives } from '../../Standings/hooks/useDriverRelatives';
+import { getTailwindStyle } from '../../../utils/colors';
+
+export const useCarBehind = () => {
+  const drivers = useDriverRelatives({ buffer: 1 });
+  const carBehind = drivers[2];
+  const myCar = drivers[1];  
+  
+  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 < -3) return {name: null, distance: 0, background: null, percent: 0};
+  return FasterCarFromBehind;
+};

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

@@ -3426,7 +3426,7 @@
         "CarClassPowerAdjust": "0.000 %",
         "CarClassDryTireSetLimit": "0 %",
         "CarClassColor": 16767577,
-        "CarClassEstLapTime": 113.6302,
+        "CarClassEstLapTime": 126.6302,
         "IRating": 1367,
         "LicLevel": 15,
         "LicSubLevel": 375,