tidy up

Author: tariknz

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

@@ -8,8 +8,10 @@ export default {
     classColor: {
       options: [undefined, 0xffda59, 0x33ceff, 0xff5888, 0xae6bff, 0xffffff],
       control: { type: 'select' },
-      description: 'Background color for the component'
-    }
+    },
+    percent: {
+      control: { type: 'range', min: 0, max: 100 },
+    },
   }
 } as Meta<typeof FasterCarsFromBehindDisplay>;
 

src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.tsx

@@ -4,7 +4,7 @@ import { useFasterCarsSettings } from './hooks/useFasterCarsSettings';
 import { getTailwindStyle } from '@irdashies/utils/colors';
 
 export interface FasterCarsFromBehindProps {
-  name?: string | null;
+  name?: string;
   distance?: number;
   percent?: number;
   classColor?: number;
@@ -30,24 +30,23 @@ export const FasterCarsFromBehindDisplay = ({
   percent,
   classColor,
 }: FasterCarsFromBehindProps) => {
-  const hidden = name === null || name == undefined ? 'hidden' : '';
+  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 ${hidden}`}>
+    <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 inset-0 rounded-sm ${background} ${animate}`}
-        style={{ zIndex: -1 }}
-      ></div>
-      <div
-        className={`absolute bottom-0 left-0 rounded-b-sm bg-white h-1 flex-none transition-all`}
+        className={`absolute bottom-0 left-0 rounded-b-sm bg-white h-1 flex-none`}
         style={{
-          width: `${percent}%`,
+          width: `${percent ?? 0}%`,
           backgroundColor: `rgb(${red}%, ${green}%, 0%)`,
         }}
       ></div>

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

@@ -29,7 +29,7 @@ export const useCarBehind = ({
     carBehind?.carClass?.relativeSpeed <= myCar?.carClass?.relativeSpeed ||
     carBehind?.delta < threshold
   ) {
-    return { name: null, distance: 0, classColor: undefined, percent: 0 };
+    return { name: undefined, distance: 0, classColor: undefined, percent: 0 };
   }
 
   return fasterCarFromBehind;