[PR #163] Feature/UI ux power features #187

New issue

Open

opened 2026-05-07 00:19:06 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-07 00:19:06 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/IAmTomShaw/f1-race-replay/pull/163
Author: @yuvidew
Created: 1/11/2026
Status: 🔄 Open

Base: main ← Head: feature/ui-ux-power-features

📝 Commits (2)

2d1aea9 Add layout management, themes, reporting, and theme handling
adec59f Add layout management, themes, reporting, and theme handling

📊 Changes

13 files changed (+1078 additions, -140 deletions)

View changed files

➕ captures/race_frame_20260106_135447.png (+0 -0)
➕ captures/race_frame_20260106_135502.png (+0 -0)
➕ captures/race_frame_20260106_135503.png (+0 -0)
➕ captures/race_frame_20260106_135504.png (+0 -0)
➕ captures/race_frame_20260106_135610.png (+0 -0)
📝 requirements.txt (+2 -1)
➕ resources/layout.json (+20 -0)
➕ resources/themes.json (+100 -0)
📝 src/interfaces/race_replay.py (+208 -33)
➕ src/lib/layout.py (+202 -0)
➕ src/lib/reporting.py (+141 -0)
➕ src/lib/theme.py (+162 -0)
📝 src/ui_components.py (+243 -106)

📄 Description

🚀 Feature: Racer Details Panel on Leaderboard Click

This PR adds a Racer Details section to the F1 race replay project.

🆕 What’s New

When a driver name is clicked in the Leaderboard, a detailed panel is displayed
The panel shows real-time driver information, including:
- Driver code (e.g. HUL)
- Current speed (km/h)
- Gear
- DRS status
- Gap to the car ahead and behind (time & distance)
- Throttle and brake indicators

🎯 Motivation

This feature improves the race analysis and viewing experience by allowing users to:

Quickly inspect individual driver performance
Compare race gaps and telemetry without leaving the replay view
Interact directly with the leaderboard for deeper insights

🖥️ UI Behavior

Clicking a driver in the leaderboard highlights the selection
The racer details panel updates instantly based on the selected driver
The UI is designed to stay lightweight and non-intrusive

🧪 Testing

Tested locally with race replay data
Verified correct updates when switching between different drivers

📸 Preview

Please let me know if you’d like any adjustments or refinements 👍

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/IAmTomShaw/f1-race-replay/pull/163 **Author:** [@yuvidew](https://github.com/yuvidew) **Created:** 1/11/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feature/ui-ux-power-features` --- ### 📝 Commits (2) - [`2d1aea9`](https://github.com/IAmTomShaw/f1-race-replay/commit/2d1aea9841cbec2a03918707605256b1be4219c3) Add layout management, themes, reporting, and theme handling - [`adec59f`](https://github.com/IAmTomShaw/f1-race-replay/commit/adec59f7487962a6ca2e54e59bdf3e8825f6d6ea) Add layout management, themes, reporting, and theme handling ### 📊 Changes **13 files changed** (+1078 additions, -140 deletions) <details> <summary>View changed files</summary> ➕ `captures/race_frame_20260106_135447.png` (+0 -0) ➕ `captures/race_frame_20260106_135502.png` (+0 -0) ➕ `captures/race_frame_20260106_135503.png` (+0 -0) ➕ `captures/race_frame_20260106_135504.png` (+0 -0) ➕ `captures/race_frame_20260106_135610.png` (+0 -0) 📝 `requirements.txt` (+2 -1) ➕ `resources/layout.json` (+20 -0) ➕ `resources/themes.json` (+100 -0) 📝 `src/interfaces/race_replay.py` (+208 -33) ➕ `src/lib/layout.py` (+202 -0) ➕ `src/lib/reporting.py` (+141 -0) ➕ `src/lib/theme.py` (+162 -0) 📝 `src/ui_components.py` (+243 -106) </details> ### 📄 Description ## 🚀 Feature: Racer Details Panel on Leaderboard Click This PR adds a **Racer Details section** to the F1 race replay project. ### 🆕 What’s New - When a driver name is clicked in the **Leaderboard**, a detailed panel is displayed - The panel shows **real-time driver information**, including: - Driver code (e.g. HUL) - Current speed (km/h) - Gear - DRS status - Gap to the car ahead and behind (time & distance) - Throttle and brake indicators ### 🎯 Motivation This feature improves the **race analysis and viewing experience** by allowing users to: - Quickly inspect individual driver performance - Compare race gaps and telemetry without leaving the replay view - Interact directly with the leaderboard for deeper insights ### 🖥️ UI Behavior - Clicking a driver in the leaderboard highlights the selection - The racer details panel updates instantly based on the selected driver - The UI is designed to stay lightweight and non-intrusive ### 🧪 Testing - Tested locally with race replay data - Verified correct updates when switching between different drivers ### 📸 Preview ![Racer Details Panel](attached-screenshot.png) --- Please let me know if you’d like any adjustments or refinements 👍 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>