Added toogle for hide and show the car number

Author: FerGabPereira

src/app/storage/defaultDashboard.ts

@@ -19,6 +19,7 @@ export const defaultDashboard: DashboardLayout = {
         fastestTime: { enabled: true },
         backgroundOpacity: { value: 0 },
         countryFlags: { enabled: true },
+        carNumber: { enabled: true },
       },
     },
     {
@@ -64,6 +65,7 @@ export const defaultDashboard: DashboardLayout = {
         buffer: 3,
         backgroundOpacity: { value: 0 },
         countryFlags: { enabled: true },
+        carNumber: { enabled: true },
       },
     },
     {

src/frontend/components/Settings/sections/RelativeSettings.tsx

@@ -10,6 +10,7 @@ const defaultConfig: RelativeWidgetSettings['config'] = {
   buffer: 3,
   background: { opacity: 0 },
   countryFlags: { enabled: true },
+  carNumber: { enabled: true },
 };
 
 const migrateConfig = (savedConfig: unknown): RelativeWidgetSettings['config'] => {
@@ -19,6 +20,7 @@ const migrateConfig = (savedConfig: unknown): RelativeWidgetSettings['config'] =
     buffer: (config.buffer as { value?: number })?.value ?? 3,
     background: { opacity: (config.background as { opacity?: number })?.opacity ?? 0 },
     countryFlags: { enabled: (config.countryFlags as { enabled?: boolean })?.enabled ?? true },
+    carNumber: { enabled: (config.carNumber as { enabled?: boolean })?.enabled ?? true },
   };
 };
 
@@ -87,6 +89,15 @@ export const RelativeSettings = () => {
               </span>
             </div>
           </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-slate-300">Show Car Number</span>
+            <ToggleSwitch
+              enabled={settings.config.carNumber.enabled}
+              onToggle={(enabled) =>
+                handleConfigChange({ carNumber: { enabled } })
+              }
+            />
+          </div>
           <div className="flex items-center justify-between">
             <span className="text-sm text-slate-300">Show Country Flags</span>
             <ToggleSwitch

src/frontend/components/Settings/sections/StandingsSettings.tsx

@@ -14,6 +14,7 @@ const defaultConfig: StandingsWidgetSettings['config'] = {
   fastestTime: { enabled: true },
   background: { opacity: 0 },
   countryFlags: { enabled: true },
+  carNumber: { enabled: true },
   driverStandings: {
     buffer: 3,
     numNonClassDrivers: 3,
@@ -50,6 +51,9 @@ const migrateConfig = (
     countryFlags: {
       enabled: (config.countryFlags as { enabled?: boolean })?.enabled ?? true,
     },
+    carNumber: {
+      enabled: (config.carNumber as { enabled?: boolean })?.enabled ?? true,
+    },
     driverStandings: {
       buffer:
         (config.driverStandings as { buffer?: number })?.buffer ??
@@ -142,6 +146,15 @@ export const StandingsSettings = () => {
                   }
                 />
               </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-slate-300">Show Car Number</span>
+                <ToggleSwitch
+                  enabled={settings.config.carNumber.enabled}
+                  onToggle={(enabled) =>
+                    handleConfigChange({ carNumber: { enabled } })
+                  }
+                />
+              </div>    
               <div className="flex items-center justify-between">
                 <span className="text-sm text-slate-300">Show Country Flags</span>
                 <ToggleSwitch

src/frontend/components/Settings/types.ts

@@ -12,6 +12,7 @@ export interface StandingsWidgetSettings extends BaseWidgetSettings {
     fastestTime: { enabled: boolean };
     background: { opacity: number };
     countryFlags: { enabled: boolean };
+    carNumber: { enabled: boolean };
     driverStandings: {
       buffer: number;
       numNonClassDrivers: number;
@@ -26,6 +27,7 @@ export interface RelativeWidgetSettings extends BaseWidgetSettings {
     buffer: number;
     background: { opacity: number };
     countryFlags: { enabled: boolean };
+    carNumber: { enabled: boolean };
   };
 }
 

src/frontend/components/Standings/Relative.tsx

@@ -48,9 +48,9 @@ export const Relative = () => {
     return (
       <DriverInfoRow
         key={result.carIdx}
-        carIdx={result.carIdx}
+        carIdx={ result.carIdx}
         classColor={result.carClass.color}
-        carNumber={result.driver?.carNum || ''}
+        carNumber={config?.carNumber?.enabled ?? true ? result.driver?.carNum || '' : undefined}
         name={result.driver?.name || ''}
         isPlayer={result.isPlayer}
         hasFastestTime={result.hasFastestTime}

src/frontend/components/Standings/Standings.tsx

@@ -41,7 +41,7 @@ export const Standings = () => {
                   key={result.carIdx}
                   carIdx={result.carIdx}
                   classColor={result.carClass.color}
-                  carNumber={result.driver?.carNum || ''}
+                  carNumber={settings?.carNumber?.enabled ?? true ? result.driver?.carNum || '' : undefined}
                   name={result.driver?.name || ''}
                   isPlayer={result.isPlayer}
                   hasFastestTime={result.hasFastestTime}

src/frontend/components/Standings/components/DriverInfoRow/DriverInfoRow.tsx

@@ -8,7 +8,7 @@ import { CountryFlag } from '../CountryFlag/CountryFlag';
 interface DriverRowInfoProps {
   carIdx: number;
   classColor: number;
-  carNumber: string;
+  carNumber?: string;
   name: string;
   isPlayer: boolean;
   hasFastestTime: boolean;
@@ -69,11 +69,11 @@ export const DriverInfoRow = ({
       >
         {position}
       </td>
-      <td
-        className={`${getTailwindStyle(classColor).driverIcon} text-white border-l-4 text-right px-1 w-10`}
-      >
-        #{carNumber}
-      </td>
+      {carNumber && (
+        <td className={`${getTailwindStyle(classColor).driverIcon} text-white border-l-4 text-right px-1 w-10`}>
+          #{carNumber}
+        </td>
+      )}
       <td className={`px-2 py-0.5 w-full`}>
         <div className="flex justify-between align-center items-center">
           <div className="flex items-center">