From 0f8626a58d7a27566cf6dff538b9d0000d2c3f81 Mon Sep 17 00:00:00 2001
From: FCatalan <jfgcatalan@gmail.com>
Date: Fri, 16 May 2025 17:27:16 +0200
Subject: [PATCH] Show track rubbered state in the Weather overlay

---
 src/frontend/components/Weather/Weather.tsx      |  4 ++++
 .../WeatherTrackRubbered.tsx                     | 16 ++++++++++++++++
 .../Weather/hooks/useTrackRubberedState.tsx      | 12 ++++++++++++
 3 files changed, 32 insertions(+)
 create mode 100644 src/frontend/components/Weather/WeatherTrackRubbered/WeatherTrackRubbered.tsx
 create mode 100644 src/frontend/components/Weather/hooks/useTrackRubberedState.tsx

diff --git a/src/frontend/components/Weather/Weather.tsx b/src/frontend/components/Weather/Weather.tsx
index 1aa1e14..7d3adde 100644
--- a/src/frontend/components/Weather/Weather.tsx
+++ b/src/frontend/components/Weather/Weather.tsx
@@ -3,7 +3,9 @@ import { useTrackTemperature } from './hooks/useTrackTemperature';
 import { useTrackWeather } from './hooks/useTrackWeather';
 import { WeatherTemp } from './WeatherTemp/WeatherTemp';
 import { WeatherTrackWetness } from './WeatherTrackWetness/WeatherTrackWetness';
+import { WeatherTrackRubbered } from './WeatherTrackRubbered/WeatherTrackRubbered';
 import { WindDirection } from './WindDirection/WindDirection';
+import { useTrackRubberedState } from './hooks/useTrackRubberedState';
 
 export const Weather = () => {
   const [parent] = useAutoAnimate();
@@ -11,6 +13,7 @@ export const Weather = () => {
   const trackTemp = useTrackTemperature();
   const windSpeed = weather.windVelocity;
   const relativeWindDirection =  (weather.windDirection ?? 0) - (weather.windYaw ?? 0);
+  const trackRubbered = useTrackRubberedState();
 
   return (
     <div
@@ -22,6 +25,7 @@ export const Weather = () => {
         <WeatherTemp title="Air" value={trackTemp.airTemp} />
         <WindDirection speedMs={windSpeed} direction={relativeWindDirection} />
         <WeatherTrackWetness trackMoisture={weather.trackMoisture} />
+        <WeatherTrackRubbered trackRubbered={trackRubbered} />
       </div>
     </div>
   );
diff --git a/src/frontend/components/Weather/WeatherTrackRubbered/WeatherTrackRubbered.tsx b/src/frontend/components/Weather/WeatherTrackRubbered/WeatherTrackRubbered.tsx
new file mode 100644
index 0000000..26deb8c
--- /dev/null
+++ b/src/frontend/components/Weather/WeatherTrackRubbered/WeatherTrackRubbered.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Path } from '@phosphor-icons/react';
+interface Props {
+  trackRubbered: string | undefined;
+}
+
+export const WeatherTrackRubbered: React.FC<Props> = ({ trackRubbered }) => {
+  return (
+    <div className="bg-slate-800/70 p-2 rounded-sm">
+    <div className="flex flex-row items-center gap-6">
+      <span className="text-m text-gray-400 mr-1"><Path /></span>
+      <span className="text-sm">{trackRubbered ?? 'N/A'}</span>
+    </div>
+    </div>
+  );
+};
diff --git a/src/frontend/components/Weather/hooks/useTrackRubberedState.tsx b/src/frontend/components/Weather/hooks/useTrackRubberedState.tsx
new file mode 100644
index 0000000..714e527
--- /dev/null
+++ b/src/frontend/components/Weather/hooks/useTrackRubberedState.tsx
@@ -0,0 +1,12 @@
+import { useSessionStore } from '@irdashies/context';
+import { useStore } from 'zustand';
+
+export const useTrackRubberedState = () => {
+  return useStore(
+    useSessionStore,
+    (state) =>
+      state.session?.SessionInfo?.Sessions?.find(
+        (session) => session.SessionNum === 0
+      )?.SessionTrackRubberState
+  );
+};