tariknz · tariknz · Aug 1, 2025 · Jul 31, 2025 · Jul 31, 2025 · Jul 31, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,6 +6,6 @@
     "irating",
     "irdashies"
   ],
-  "svg.preview.background": "black",
+  "svg.preview.background": "transparent",
   "eslint.useFlatConfig": true
 }
diff --git a/src/frontend/components/Input/InputContainer/InputContainer.stories.tsx b/src/frontend/components/Input/InputContainer/InputContainer.stories.tsx
@@ -66,6 +66,10 @@ const RandomTraces = () => {
         },
         steer: {
           enabled: true,
+          config: {
+            style: 'formula',
+            color: 'light',
+          },
         },
       }}
     />

diff --git a/src/frontend/components/Input/InputContainer/InputContainer.tsx b/src/frontend/components/Input/InputContainer/InputContainer.tsx
@@ -46,7 +46,13 @@ export const InputContainer = ({
           settings={settings?.gear}
         />
       )}
-      {(settings?.steer?.enabled ?? true) && <InputSteer angleRad={steer} />}
+      {(settings?.steer?.enabled ?? true) && (
+        <InputSteer
+          angleRad={steer}
+          wheelStyle={settings?.steer?.config?.style}
+          wheelColor={settings?.steer?.config?.color}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/frontend/components/Input/InputSteer/InputSteer.stories.tsx b/src/frontend/components/Input/InputSteer/InputSteer.stories.tsx
@@ -22,3 +22,39 @@ export const Primary: Story = {
     angleRad: 0,
   },
 };
+
+export const AllWheels: Story = {
+  args: {
+    angleRad: 0,
+  },
+  render: ({ angleRad }) => {
+    const wheelStyles = ['default', 'formula', 'lmp', 'nascar', 'ushape'] as const;
+    const colors = ['light', 'dark'] as const;
+
+    return (
+      <div className="p-8 space-y-8">
+        {colors.map((color) => (
+          <div key={color} className="space-y-4">
+            <h3 className="text-xl font-semibold capitalize">
+              {color} Mode
+            </h3>
+            <div className="grid grid-cols-5 gap-4">
+              {wheelStyles.map((style) => (
+                <div key={style} className="text-center space-y-2">
+                  <div className="capitalize text-sm font-medium">{style}</div>
+                  <div className="flex justify-center">
+                    <InputSteer
+                      angleRad={angleRad}
+                      wheelStyle={style}
+                      wheelColor={color}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
diff --git a/src/frontend/components/Input/InputSteer/InputSteer.tsx b/src/frontend/components/Input/InputSteer/InputSteer.tsx
@@ -1,31 +1,68 @@
+import {
+  DefaultB,
+  DefaultW,
+  FormulaB,
+  FormulaW,
+  LmpB,
+  LmpW,
+  NascarB,
+  NascarW,
+  UshapeB,
+  UshapeW,
+} from './wheels';
+
+export type WheelStyle = 'formula' | 'lmp' | 'nascar' | 'ushape' | 'default';
+
+const wheelComponentMap = {
+  default: {
+    dark: DefaultB,
+    light: DefaultW,
+  },
+  formula: {
+    dark: FormulaB,
+    light: FormulaW,
+  },
+  lmp: {
+    dark: LmpB,
+    light: LmpW,
+  },
+  nascar: {
+    dark: NascarB,
+    light: NascarW,
+  },
+  ushape: {
+    dark: UshapeB,
+    light: UshapeW,
+  },
+};
+
 export interface InputSteerProps {
   angleRad?: number;
+  wheelStyle?: WheelStyle;
+  wheelColor?: 'dark' | 'light';
 }
 
-export const InputSteer = ({ angleRad = 0 }: InputSteerProps) => {
+export const InputSteer = ({
+  angleRad = 0,
+  wheelStyle = 'default',
+  wheelColor = 'light',
+}: InputSteerProps) => {
+  const WheelComponent =
+    wheelStyle in wheelComponentMap
+      ? wheelComponentMap[wheelStyle][wheelColor]
+      : wheelComponentMap.default[wheelColor];
+
   return (
-    <div className="w-[120px] fill-white">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlSpace="preserve"
-        width="100%"
-        height="100%"
-        viewBox="-66 33 145 145"
-      >
-        <g
-          style={{
-            transform: `rotate(${angleRad * -1}rad)`,
-            transformBox: 'fill-box',
-            transformOrigin: 'center',
-          }}
-        >
-          <path d="M6.033 32.908a72.196 72.196 0 0 0-72.196 72.196A72.196 72.196 0 0 0 6.033 177.3a72.196 72.196 0 0 0 72.196-72.196A72.196 72.196 0 0 0 6.033 32.908Zm0 12.657A59.538 59.538 0 0 1 64.298 93.54C48.864 89.147 33.41 84.76 6.42 84.51v-.013c-.133 0-.256.005-.388.006-.133 0-.255-.005-.388-.006v.013c-26.99.25-42.444 4.637-57.877 9.03A59.538 59.538 0 0 1 6.033 45.565Zm-28.908 58.126c9.141 2.38 16.78 12.14 22.875 29.501-.808 17.98-1.985 28.342-3.55 30.653a59.538 59.538 0 0 1-49.561-53.73c8.89-2.973 16.97-6.514 30.236-6.424zm57.816 0c13.345-.09 21.44 3.494 30.393 6.477a59.538 59.538 0 0 1-49.708 53.695c-1.57-2.281-2.75-12.651-3.56-30.671 6.093-17.36 13.733-27.122 22.875-29.501z" />
-          <path
-            d="M 0 33.25 A 72 72 0 0 1 12 33.25 L 12 45.8 A 60 60 0 0 0 0 45.8 Z"
-            className='fill-yellow-500'
-          />
-        </g>
-      </svg>
+    <div className="w-[120px] fill-white relative">
+      <WheelComponent
+        style={{
+          width: '100%',
+          height: '100%',
+          transform: `rotate(${angleRad * -1}rad)`,
+          transformBox: 'fill-box',
+          transformOrigin: 'center',
+        }}
+      />
     </div>
   );
 };
diff --git a/src/frontend/components/Input/InputSteer/wheels/DefaultB.tsx b/src/frontend/components/Input/InputSteer/wheels/DefaultB.tsx
@@ -0,0 +1,21 @@
+import { SVGProps } from "react";
+
+export const DefaultB = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    viewBox="-66 33 145 145"
+    {...props}
+  >
+    <g>
+      <path
+        className="fill-black"
+        d="M6.033 32.908a72.196 72.196 0 0 0-72.196 72.196A72.196 72.196 0 0 0 6.033 177.3a72.196 72.196 0 0 0 72.196-72.196A72.196 72.196 0 0 0 6.033 32.908Zm0 12.657A59.538 59.538 0 0 1 64.298 93.54C48.864 89.147 33.41 84.76 6.42 84.51v-.013c-.133 0-.256.005-.388.006-.133 0-.255-.005-.388-.006v.013c-26.99.25-42.444 4.637-57.877 9.03A59.538 59.538 0 0 1 6.033 45.565Zm-28.908 58.126c9.141 2.38 16.78 12.14 22.875 29.501-.808 17.98-1.985 28.342-3.55 30.653a59.538 59.538 0 0 1-49.561-53.73c8.89-2.973 16.97-6.514 30.236-6.424zm57.816 0c13.345-.09 21.44 3.494 30.393 6.477a59.538 59.538 0 0 1-49.708 53.695c-1.57-2.281-2.75-12.651-3.56-30.671 6.093-17.36 13.733-27.122 22.875-29.501z"
+      />
+      <path
+        d="M 0 33.25 A 72 72 0 0 1 12 33.25 L 12 45.8 A 60 60 0 0 0 0 45.8 Z"
+        className="fill-yellow-500"
+      />
+    </g>
+  </svg>
+); 
diff --git a/src/frontend/components/Input/InputSteer/wheels/DefaultW.tsx b/src/frontend/components/Input/InputSteer/wheels/DefaultW.tsx
@@ -0,0 +1,21 @@
+import { SVGProps } from "react";
+
+export const DefaultW = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    viewBox="-66 33 145 145"
+    {...props}
+  >
+    <g>
+      <path
+        className="fill-white"
+        d="M6.033 32.908a72.196 72.196 0 0 0-72.196 72.196A72.196 72.196 0 0 0 6.033 177.3a72.196 72.196 0 0 0 72.196-72.196A72.196 72.196 0 0 0 6.033 32.908Zm0 12.657A59.538 59.538 0 0 1 64.298 93.54C48.864 89.147 33.41 84.76 6.42 84.51v-.013c-.133 0-.256.005-.388.006-.133 0-.255-.005-.388-.006v.013c-26.99.25-42.444 4.637-57.877 9.03A59.538 59.538 0 0 1 6.033 45.565Zm-28.908 58.126c9.141 2.38 16.78 12.14 22.875 29.501-.808 17.98-1.985 28.342-3.55 30.653a59.538 59.538 0 0 1-49.561-53.73c8.89-2.973 16.97-6.514 30.236-6.424zm57.816 0c13.345-.09 21.44 3.494 30.393 6.477a59.538 59.538 0 0 1-49.708 53.695c-1.57-2.281-2.75-12.651-3.56-30.671 6.093-17.36 13.733-27.122 22.875-29.501z"
+      />
+      <path
+        d="M 0 33.25 A 72 72 0 0 1 12 33.25 L 12 45.8 A 60 60 0 0 0 0 45.8 Z"
+        className="fill-yellow-500"
+      />
+    </g>
+  </svg>
+); 
diff --git a/src/frontend/components/Input/InputSteer/wheels/FormulaB.tsx b/src/frontend/components/Input/InputSteer/wheels/FormulaB.tsx
@@ -0,0 +1,70 @@
+import { SVGProps } from "react";
+
+export const FormulaB = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="23.5 -17 232 232"
+    {...props}
+  >
+    <g>
+      <path
+        d="M185.855 406.852c-2.178.127-3.334 1.555-4.379 3.123l-4.92 9.821-1.087.114c-9.385 15.246-25.266 48.182 4.16 104.663.865 1.704 9.609 11.007 20.148-2.385 22.398-6.19 38.793-16.143 77.245-16.143s54.847 9.953 77.246 16.143c10.538 13.392 19.282 4.089 20.148 2.385 29.425-56.481 13.545-89.417 4.16-104.663l-1.087-.114-4.92-9.821c-1.046-1.568-2.202-2.996-4.38-3.123-.726-.042-1.565.06-2.552.35-13.087 4.002-15.474 2.195-39.278 12.015-6.256 7.052-12.476 14.303-19.87 15.017h-58.934c-7.394-.714-13.614-7.965-19.87-15.017-23.804-9.82-26.19-8.013-39.278-12.015-.986-.29-1.826-.392-2.552-.35m8.979 17.933 13.3 4.272c2.82 2.215 3.201 3.558 3.626 4.917l1.129 18.056c-1.053 4.122-.95 2.595-1.37 3.627l-18.62-2.338c-2.939-.704-3.627-2.356-4.836-3.788-.037-7.072-.767-14.49 1.854-20.232 1.881-3.2 3.372-3.67 4.917-4.514m164.376 0c1.545.844 3.036 1.314 4.917 4.514 2.621 5.743 1.892 13.16 1.855 20.232-1.21 1.432-1.898 3.084-4.837 3.788l-18.62 2.338c-.42-1.032-.317.495-1.37-3.627l1.129-18.056c.425-1.359.807-2.702 3.627-4.917zm-165.379 47.55c5.315.395 9.378-.711 16.055 1.318 1.507 1.39 2.991 2.37 4.792 8.746l.959 21.327c-.288 2.585-1.95 3.858-3.715 5.032l-12.1 3.354c-6.28-6.491-9.92-19.191-12.7-33.906 1.452-1.957.417-3.914 6.71-5.87m166.382 0c6.292 1.957 5.257 3.914 6.71 5.87-2.781 14.716-6.42 27.416-12.7 33.907l-12.101-3.354c-1.766-1.174-3.427-2.447-3.714-5.032l.958-21.327c1.801-6.376 3.285-7.355 4.793-8.746 6.676-2.029 10.74-.923 16.054-1.318"
+        style={{
+          display: "inline",
+          fill: "#000",
+          stroke: "none",
+          strokeWidth: ".264583px",
+          strokeLinecap: "butt",
+          strokeLinejoin: "miter",
+          strokeOpacity: 1,
+        }}
+        transform="translate(-137.25 -368.592)"
+      />
+      <path
+        d="M252.633 462.1h1.688l-.317 1.53h-1.689zm-.494 2.377h1.688l-1.306 6.249h-1.689zm3.253 0h1.577l-.253 1.212q.883-1.36 1.913-1.36.364 0 .782.183l-.647 1.383q-.23-.083-.488-.083-.436 0-.889.33-.447.33-.7.883-.253.547-.5 1.741l-.412 1.96h-1.689zm9.25 6.249h-1.6l.14-.677q-.458.441-.905.635-.442.189-1 .189-.971 0-1.578-.66-.6-.664-.6-1.959 0-1.5.848-2.712.847-1.212 2.241-1.212 1.26 0 1.89 1l.676-3.23h1.689zm-3.901-2.542q0 .67.335 1.047.342.377.836.377.459 0 .853-.312.4-.318.636-.965.24-.647.24-1.242 0-.676-.364-1.094-.365-.418-.841-.418-.742 0-1.218.824-.477.824-.477 1.783m7.873-1.936-1.648-.141q.283-.836.983-1.307.706-.47 1.865-.47 1.206 0 1.783.488.577.483.577 1.183 0 .282-.053.6-.047.318-.347 1.671-.248 1.118-.248 1.565 0 .4.142.889h-1.642q-.1-.342-.124-.706-.37.411-.853.635-.482.218-.97.218-.777 0-1.283-.506-.506-.512-.506-1.312 0-.895.553-1.43.559-.536 1.989-.648 1.206-.1 1.612-.24.106-.354.106-.566 0-.27-.218-.453-.218-.182-.647-.182-.453 0-.718.188-.259.183-.353.524m1.606 1.565q-.153.041-.406.077-1.27.152-1.66.447-.276.212-.276.57 0 .295.212.5.212.2.56.2.382 0 .717-.182.341-.188.506-.476.17-.295.3-.912zm2.495 1.165 1.636-.259q.217.518.541.736.324.211.883.211.576 0 .923-.258.242-.177.242-.43 0-.17-.124-.306-.13-.13-.7-.318-1.53-.506-1.895-.8-.57-.459-.57-1.2 0-.742.553-1.277.77-.747 2.289-.747 1.206 0 1.824.44.617.442.782 1.195l-1.56.271q-.123-.341-.4-.512-.376-.23-.905-.23-.53 0-.765.177-.23.177-.23.406 0 .236.236.389.147.094.947.33 1.236.358 1.653.705.589.489.589 1.177 0 .888-.748 1.542-.747.653-2.106.653-1.353 0-2.095-.495-.735-.5-1-1.4m8.632 1.748h-1.689l1.807-8.626h1.688l-.647 3.071q.57-.447 1.065-.641.494-.2 1.06-.2.758 0 1.2.435.44.435.44 1.142 0 .376-.164 1.165l-.765 3.654h-1.689l.783-3.725q.124-.606.124-.777 0-.312-.195-.5-.194-.188-.53-.188-.423 0-.811.294-.506.388-.771.953-.147.312-.388 1.465zm7.45-8.626h1.688l-.318 1.53h-1.689zm-.495 2.377h1.688l-1.306 6.249h-1.688zm8.126 3.648h-4.237q-.006.1-.006.153 0 .624.353 1.006.36.382.871.382.841 0 1.312-.87l1.512.253q-.44.912-1.182 1.37-.736.454-1.654.454-1.259 0-2.047-.795-.789-.8-.789-2.112 0-1.283.712-2.283.971-1.353 2.772-1.353 1.147 0 1.824.712.676.706.676 1.982 0 .612-.117 1.1zm-1.424-1.03q.006-.112.006-.17 0-.695-.312-1.042t-.836-.347-.941.394q-.412.394-.56 1.165zm1.824 1.883 1.636-.259q.217.518.54.736.324.211.883.211.577 0 .924-.258.241-.177.241-.43 0-.17-.123-.306-.13-.13-.7-.318-1.53-.506-1.895-.8-.57-.459-.57-1.2 0-.742.552-1.277.771-.747 2.29-.747 1.206 0 1.823.44.618.442.783 1.195l-1.56.271q-.123-.341-.4-.512-.376-.23-.906-.23t-.764.177q-.23.177-.23.406 0 .236.235.389.147.094.948.33 1.235.358 1.653.705.589.488.589 1.177 0 .888-.748 1.542-.747.653-2.106.653-1.354 0-2.095-.495-.735-.5-1-1.4"
+        aria-label="irdashies"
+        style={{
+          fontStyle: "italic",
+          fontWeight: 700,
+          fontSize: "40px",
+          lineHeight: 1.25,
+          fontFamily: "Arial",
+          whiteSpace: "pre",
+          display: "inline",
+          fill: "#fff",
+          stroke: "none",
+          strokeWidth: ".301262",
+        }}
+        transform="translate(-137.25 -368.592)"
+      />
+      <g style={{ display: "inline", fill: "#280b0b" }}>
+        <path
+          d="M314.845 61.438h-75.646c-1.87 9.73 13.756 7.193 37.823 7.722 24.067-.529 39.693 2.008 37.823-7.722"
+          style={{
+            fill: "#666",
+            stroke: "none",
+            strokeWidth: ".264583px",
+            strokeLinecap: "butt",
+            strokeLinejoin: "miter",
+            strokeOpacity: 1,
+          }}
+          transform="translate(-137.25 .87)"
+        />
+        <g style={{ fill: "#fff" }}>
+          <path
+            d="M279.403 65.566a2.38 2.38 0 0 1-2.38 2.38 2.38 2.38 0 0 1-2.382-2.38 2.38 2.38 0 0 1 2.381-2.381 2.38 2.38 0 0 1 2.381 2.38M295.276 65.566a2.38 2.38 0 0 1-2.381 2.38 2.38 2.38 0 0 1-2.381-2.38 2.38 2.38 0 0 1 2.38-2.381 2.38 2.38 0 0 1 2.382 2.38M263.53 65.566a2.38 2.38 0 0 1-2.38 2.38 2.38 2.38 0 0 1-2.381-2.38 2.38 2.38 0 0 1 2.38-2.381 2.38 2.38 0 0 1 2.381 2.38M271.467 65.566a2.38 2.38 0 0 1-2.381 2.38 2.38 2.38 0 0 1-2.381-2.38 2.38 2.38 0 0 1 2.38-2.381 2.38 2.38 0 0 1 2.382 2.38M255.594 65.566a2.38 2.38 0 0 1-2.38 2.38 2.38 2.38 0 0 1-2.382-2.38 2.38 2.38 0 0 1 2.381-2.381 2.38 2.38 0 0 1 2.381 2.38M247.658 65.566a2.38 2.38 0 0 1-2.381 2.38 2.38 2.38 0 0 1-2.381-2.38 2.38 2.38 0 0 1 2.38-2.381 2.38 2.38 0 0 1 2.382 2.38M287.34 65.566a2.38 2.38 0 0 1-2.382 2.38 2.38 2.38 0 0 1-2.38-2.38 2.38 2.38 0 0 1 2.38-2.381 2.38 2.38 0 0 1 2.381 2.38M303.212 65.566a2.38 2.38 0 0 1-2.381 2.38 2.38 2.38 0 0 1-2.38-2.38 2.38 2.38 0 0 1 2.38-2.381 2.38 2.38 0 0 1 2.38 2.38M311.148 65.566a2.38 2.38 0 0 1-2.38 2.38 2.38 2.38 0 0 1-2.382-2.38 2.38 2.38 0 0 1 2.381-2.381 2.38 2.38 0 0 1 2.381 2.38"
+            transform="translate(-137.25 .341)"
+          />
+        </g>
+      </g>
+      <path
+        d="M229.666 466.486a4.37 4.37 0 0 1-4.37 4.37 4.37 4.37 0 0 1-4.371-4.37 4.37 4.37 0 0 1 4.37-4.37 4.37 4.37 0 0 1 4.371 4.37"
+        transform="translate(-137.25 -368.592)"
+      />
+      <path
+        d="M229.666 466.486a4.37 4.37 0 0 1-4.37 4.37 4.37 4.37 0 0 1-4.371-4.37 4.37 4.37 0 0 1 4.37-4.37 4.37 4.37 0 0 1 4.371 4.37"
+        transform="matrix(-1 0 0 1 416.528 -368.592)"
+      />
+    </g>
+  </svg>
+);