Skip to content

Commit 4ad4831

Browse files
tariknzCopilot
tariknz
and
Copilot
authored
feat: add wheel styles (#56)
Co-authored-by: Copilot <[email protected]>
1 parent fcc6dba commit 4ad4831

File tree

18 files changed

+972
-29
lines changed

18 files changed

+972
-29
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
"irating",
77
"irdashies"
88
],
9-
"svg.preview.background": "black",
9+
"svg.preview.background": "transparent",
1010
"eslint.useFlatConfig": true
1111
}

‎src/frontend/components/Input/InputContainer/InputContainer.stories.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ const RandomTraces = () => {
6666
},
6767
steer: {
6868
enabled: true,
69+
config: {
70+
style: 'formula',
71+
color: 'light',
72+
},
6973
},
7074
}}
7175
/>

‎src/frontend/components/Input/InputContainer/InputContainer.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,13 @@ export const InputContainer = ({
4646
settings={settings?.gear}
4747
/>
4848
)}
49-
{(settings?.steer?.enabled ?? true) && <InputSteer angleRad={steer} />}
49+
{(settings?.steer?.enabled ?? true) && (
50+
<InputSteer
51+
angleRad={steer}
52+
wheelStyle={settings?.steer?.config?.style}
53+
wheelColor={settings?.steer?.config?.color}
54+
/>
55+
)}
5056
</div>
5157
);
5258
};

‎src/frontend/components/Input/InputSteer/InputSteer.stories.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,39 @@ export const Primary: Story = {
2222
angleRad: 0,
2323
},
2424
};
25+
26+
export const AllWheels: Story = {
27+
args: {
28+
angleRad: 0,
29+
},
30+
render: ({ angleRad }) => {
31+
const wheelStyles = ['default', 'formula', 'lmp', 'nascar', 'ushape'] as const;
32+
const colors = ['light', 'dark'] as const;
33+
34+
return (
35+
<div className="p-8 space-y-8">
36+
{colors.map((color) => (
37+
<div key={color} className="space-y-4">
38+
<h3 className="text-xl font-semibold capitalize">
39+
{color} Mode
40+
</h3>
41+
<div className="grid grid-cols-5 gap-4">
42+
{wheelStyles.map((style) => (
43+
<div key={style} className="text-center space-y-2">
44+
<div className="capitalize text-sm font-medium">{style}</div>
45+
<div className="flex justify-center">
46+
<InputSteer
47+
angleRad={angleRad}
48+
wheelStyle={style}
49+
wheelColor={color}
50+
/>
51+
</div>
52+
</div>
53+
))}
54+
</div>
55+
</div>
56+
))}
57+
</div>
58+
);
59+
},
60+
};

‎src/frontend/components/Input/InputSteer/InputSteer.tsx‎

Lines changed: 60 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,68 @@
1+
import {
2+
DefaultB,
3+
DefaultW,
4+
FormulaB,
5+
FormulaW,
6+
LmpB,
7+
LmpW,
8+
NascarB,
9+
NascarW,
10+
UshapeB,
11+
UshapeW,
12+
} from './wheels';
13+
14+
export type WheelStyle = 'formula' | 'lmp' | 'nascar' | 'ushape' | 'default';
15+
16+
const wheelComponentMap = {
17+
default: {
18+
dark: DefaultB,
19+
light: DefaultW,
20+
},
21+
formula: {
22+
dark: FormulaB,
23+
light: FormulaW,
24+
},
25+
lmp: {
26+
dark: LmpB,
27+
light: LmpW,
28+
},
29+
nascar: {
30+
dark: NascarB,
31+
light: NascarW,
32+
},
33+
ushape: {
34+
dark: UshapeB,
35+
light: UshapeW,
36+
},
37+
};
38+
139
export interface InputSteerProps {
240
angleRad?: number;
41+
wheelStyle?: WheelStyle;
42+
wheelColor?: 'dark' | 'light';
343
}
444

5-
export const InputSteer = ({ angleRad = 0 }: InputSteerProps) => {
45+
export const InputSteer = ({
46+
angleRad = 0,
47+
wheelStyle = 'default',
48+
wheelColor = 'light',
49+
}: InputSteerProps) => {
50+
const WheelComponent =
51+
wheelStyle in wheelComponentMap
52+
? wheelComponentMap[wheelStyle][wheelColor]
53+
: wheelComponentMap.default[wheelColor];
54+
655
return (
7-
<div className="w-[120px] fill-white">
8-
<svg
9-
xmlns="http://www.w3.org/2000/svg"
10-
xmlSpace="preserve"
11-
width="100%"
12-
height="100%"
13-
viewBox="-66 33 145 145"
14-
>
15-
<g
16-
style={{
17-
transform: `rotate(${angleRad * -1}rad)`,
18-
transformBox: 'fill-box',
19-
transformOrigin: 'center',
20-
}}
21-
>
22-
<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" />
23-
<path
24-
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"
25-
className='fill-yellow-500'
26-
/>
27-
</g>
28-
</svg>
56+
<div className="w-[120px] fill-white relative">
57+
<WheelComponent
58+
style={{
59+
width: '100%',
60+
height: '100%',
61+
transform: `rotate(${angleRad * -1}rad)`,
62+
transformBox: 'fill-box',
63+
transformOrigin: 'center',
64+
}}
65+
/>
2966
</div>
3067
);
3168
};

‎src/frontend/components/Input/InputSteer/wheels/DefaultB.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { SVGProps } from "react";
2+
3+
export const DefaultB = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
xmlSpace="preserve"
7+
viewBox="-66 33 145 145"
8+
{...props}
9+
>
10+
<g>
11+
<path
12+
className="fill-black"
13+
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"
14+
/>
15+
<path
16+
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"
17+
className="fill-yellow-500"
18+
/>
19+
</g>
20+
</svg>
21+
);

‎src/frontend/components/Input/InputSteer/wheels/DefaultW.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { SVGProps } from "react";
2+
3+
export const DefaultW = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
xmlSpace="preserve"
7+
viewBox="-66 33 145 145"
8+
{...props}
9+
>
10+
<g>
11+
<path
12+
className="fill-white"
13+
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"
14+
/>
15+
<path
16+
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"
17+
className="fill-yellow-500"
18+
/>
19+
</g>
20+
</svg>
21+
);

‎src/frontend/components/Input/InputSteer/wheels/FormulaB.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { SVGProps } from "react";
2+
3+
export const FormulaB = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
viewBox="23.5 -17 232 232"
7+
{...props}
8+
>
9+
<g>
10+
<path
11+
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"
12+
style={{
13+
display: "inline",
14+
fill: "#000",
15+
stroke: "none",
16+
strokeWidth: ".264583px",
17+
strokeLinecap: "butt",
18+
strokeLinejoin: "miter",
19+
strokeOpacity: 1,
20+
}}
21+
transform="translate(-137.25 -368.592)"
22+
/>
23+
<path
24+
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"
25+
aria-label="irdashies"
26+
style={{
27+
fontStyle: "italic",
28+
fontWeight: 700,
29+
fontSize: "40px",
30+
lineHeight: 1.25,
31+
fontFamily: "Arial",
32+
whiteSpace: "pre",
33+
display: "inline",
34+
fill: "#fff",
35+
stroke: "none",
36+
strokeWidth: ".301262",
37+
}}
38+
transform="translate(-137.25 -368.592)"
39+
/>
40+
<g style={{ display: "inline", fill: "#280b0b" }}>
41+
<path
42+
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"
43+
style={{
44+
fill: "#666",
45+
stroke: "none",
46+
strokeWidth: ".264583px",
47+
strokeLinecap: "butt",
48+
strokeLinejoin: "miter",
49+
strokeOpacity: 1,
50+
}}
51+
transform="translate(-137.25 .87)"
52+
/>
53+
<g style={{ fill: "#fff" }}>
54+
<path
55+
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"
56+
transform="translate(-137.25 .341)"
57+
/>
58+
</g>
59+
</g>
60+
<path
61+
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"
62+
transform="translate(-137.25 -368.592)"
63+
/>
64+
<path
65+
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"
66+
transform="matrix(-1 0 0 1 416.528 -368.592)"
67+
/>
68+
</g>
69+
</svg>
70+
);

0 commit comments

Comments
 (0)