Skip to content

feat: add an option to display driver names instead of TLAs #271

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
r4ai wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

feat: add an option to display driver names instead of TLAs #271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3254a74
feat: add an option to show driver's last name instaed of tla
r4ai May 24, 2025
fcba995
fix: adjust DriverTag length to fit the driver’s name
r4ai May 24, 2025
5687e2c
fix: fix broken layout in SkeletonDriver
r4ai May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions dash/src/app/dashboard/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@ export default function SettingsPage() {
<p className="text-zinc-500">Show Drivers Mini Sectors</p>
</div>

<div className="flex gap-2">
<Toggle enabled={settings.showDriverLastName} setEnabled={(v) => settings.setShowDriverLastName(v)} />
<p className="text-zinc-500">Show Drivers Last Name</p>
</div>

<h2 className="my-4 text-2xl">Race Control</h2>

<div className="flex gap-2">
Expand Down
36 changes: 16 additions & 20 deletions dash/src/components/dashboard/LeaderBoard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,18 @@ export default function LeaderBoard() {

const showTableHeader = useSettingsStore((state) => state.tableHeaders);

const carMetrics = useSettingsStore((state) => state.carMetrics);

return (
<div className="flex w-fit flex-col gap-0.5">
<div
className="grid w-fit gap-0.5"
style={{
gridTemplateColumns: carMetrics
? "max-content max-content 3.5rem 5.5rem 4rem 5rem 5.5rem auto 10.5rem"
: "max-content max-content 3.5rem 5.5rem 4rem 5rem 5.5rem auto",
gridTemplateRows: "auto",
}}
>
{showTableHeader && <TableHeaders />}

{(!drivers || !driversTiming) &&
Expand Down Expand Up @@ -45,15 +55,8 @@ const TableHeaders = () => {
const carMetrics = useSettingsStore((state) => state.carMetrics);

return (
<div
className="grid items-center gap-2 p-1 px-2 text-sm font-medium text-zinc-500"
style={{
gridTemplateColumns: carMetrics
? "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto 10.5rem"
: "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto",
}}
>
<p>Position</p>
<div className="col-span-full grid grid-cols-subgrid gap-2 p-1 px-2 text-sm font-medium text-zinc-500">
<p className="col-span-2">Position</p>
<p>DRS</p>
<p>Tire</p>
<p>Info</p>
Expand All @@ -71,15 +74,8 @@ const SkeletonDriver = () => {
const animateClass = "h-8 animate-pulse rounded-md bg-zinc-800";

return (
<div
className="grid items-center gap-2 p-1.5"
style={{
gridTemplateColumns: carMetrics
? "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto 10.5rem"
: "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto",
}}
>
<div className={animateClass} style={{ width: "100%" }} />
<div className="col-span-full grid grid-cols-subgrid items-center gap-2 p-1.5">
<div className={clsx(animateClass, "col-span-2 min-w-[5.5rem]")} style={{ width: "100%" }} />

<div className={animateClass} style={{ width: "100%" }} />

Expand All @@ -104,7 +100,7 @@ const SkeletonDriver = () => {
<div className={clsx(animateClass, "h-4!")} />
</div>

<div className="flex w-full gap-1">
<div className="flex w-full min-w-72 gap-1">
{new Array(3).fill(null).map((_, index) => (
<div className="flex w-full flex-col gap-1" key={`skeleton.sector.${index}`}>
<div className={clsx(animateClass, "h-4!")} />
Expand Down
20 changes: 10 additions & 10 deletions dash/src/components/driver/Driver.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,25 +53,25 @@ export default function Driver({ driver, timingDriver, position }: Props) {

const favoriteDriver = useSettingsStore((state) => state.favoriteDrivers.includes(driver.racingNumber));

const showDriverLastName = useSettingsStore((state) => state.showDriverLastName);

return (
<motion.div
layout="position"
className={clsx("flex flex-col gap-1 rounded-lg p-1.5 select-none", {
className={clsx("col-span-full grid grid-cols-subgrid gap-1 rounded-lg p-1.5 select-none", {
"opacity-50": timingDriver.knockedOut || timingDriver.retired || timingDriver.stopped,
"bg-sky-800/30": favoriteDriver,
"bg-violet-800/30": hasFastest,
"bg-red-800/30": sessionPart != undefined && inDangerZone(position, sessionPart),
})}
>
<div
className="grid items-center gap-2"
style={{
gridTemplateColumns: carMetrics
? "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto 10.5rem"
: "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto",
}}
>
<DriverTag className="min-w-full!" short={driver.tla} teamColor={driver.teamColour} position={position} />
<div className="col-span-full grid grid-cols-subgrid items-center gap-2">
<DriverTag
className="col-span-2 min-w-full! grid-cols-subgrid"
short={showDriverLastName ? driver.lastName : driver.tla}
teamColor={driver.teamColour}
position={position}
/>
<DriverDRS
on={carData ? hasDRS(carData[45]) : false}
possible={carData ? possibleDRS(carData[45]) : false}
Expand Down
7 changes: 4 additions & 3 deletions dash/src/components/driver/DriverTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,15 @@ export default function DriverTag({ position, teamColor, short, className }: Pro
<div
id="walkthrough-driver-position"
className={clsx(
"flex w-fit items-center justify-between gap-0.5 rounded-lg bg-zinc-500 px-1 py-1 font-black",
"grid w-fit items-center justify-between gap-0.5 rounded-lg bg-zinc-500 px-1 py-1 font-black",
{ "grid-cols-2": short && position },
className,
)}
style={{ backgroundColor: `#${teamColor}` }}
>
{position && <p className="px-1 text-xl leading-none">{position}</p>}
{position && <p className={clsx("px-1 text-xl leading-none", { "mr-1.5": short })}>{position}</p>}

<div className="flex h-min w-min items-center justify-center rounded-md bg-white px-1">
<div className="flex h-min w-full items-center justify-start rounded-md bg-white px-1">
<p className="font-mono text-zinc-500" style={{ ...(teamColor && { color: `#${teamColor}` }) }}>
{short}
</p>
Expand Down
6 changes: 6 additions & 0 deletions dash/src/stores/useSettingsStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ type SettingsStore = {
showMiniSectors: boolean;
setShowMiniSectors: (showMiniSectors: boolean) => void;

showDriverLastName: boolean;
setShowDriverLastName: (showDriverLastName: boolean) => void;

favoriteDrivers: string[];
setFavoriteDrivers: (favoriteDrivers: string[]) => void;
removeFavoriteDriver: (driver: string) => void;
Expand Down Expand Up @@ -64,6 +67,9 @@ export const useSettingsStore = create<SettingsStore>()(
showMiniSectors: true,
setShowMiniSectors: (showMiniSectors: boolean) => set({ showMiniSectors }),

showDriverLastName: false,
setShowDriverLastName: (showDriverLastName: boolean) => set({ showDriverLastName: showDriverLastName }),

favoriteDrivers: [],
setFavoriteDrivers: (favoriteDrivers: string[]) => set({ favoriteDrivers }),
removeFavoriteDriver: (driver: string) =>
Expand Down