fix: make sure weather direction to animate the shortest path

Author: tariknz

src/frontend/components/Weather/Weather.tsx

@@ -7,6 +7,7 @@ import { WeatherTrackRubbered } from './WeatherTrackRubbered/WeatherTrackRubbere
 import { WindDirection } from './WindDirection/WindDirection';
 import { useTrackRubberedState } from './hooks/useTrackRubberedState';
 import { useWeatherSettings } from './hooks/useWeatherSettings';
+import { useTelemetryValue } from '@irdashies/context';
 
 export const Weather = () => {
   const [parent] = useAutoAnimate();
@@ -16,6 +17,7 @@ export const Weather = () => {
   const relativeWindDirection =  (weather.windDirection ?? 0) - (weather.windYaw ?? 0);
   const trackRubbered = useTrackRubberedState();
   const settings = useWeatherSettings();
+  const unit = useTelemetryValue('DisplayUnits');
 
   return (
     <div
@@ -28,7 +30,7 @@ export const Weather = () => {
       <div className="flex flex-col p-2 w-full rounded-sm gap-2">
         <WeatherTemp title="Track" value={trackTemp.trackTemp} />
         <WeatherTemp title="Air" value={trackTemp.airTemp} />
-        <WindDirection speedMs={windSpeed} direction={relativeWindDirection} />
+        <WindDirection speedMs={windSpeed} direction={relativeWindDirection} metric={unit === 1} />
         <WeatherTrackWetness trackMoisture={weather.trackMoisture} />
         <WeatherTrackRubbered trackRubbered={trackRubbered} />
       </div>

src/frontend/components/Weather/WindDirection/WindDirection.tsx

@@ -1,14 +1,44 @@
-import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { WindIcon } from '@phosphor-icons/react';
+import { useRef, useEffect, useState } from 'react';
 
 export interface WindDirectionProps {
   speedMs?: number;
   direction?: number;
+  metric?: boolean;
 }
 
-export const WindDirection = ({ speedMs, direction }: WindDirectionProps) => {
-  const speed = speedMs !== undefined ? speedMs * (18 / 5) : undefined;
-  const [parent] = useAutoAnimate();
+export const WindDirection = ({
+  speedMs,
+  direction,
+  metric = true,
+}: WindDirectionProps) => {
+  // Convert m/s to user's preferred unit
+  const speed =
+    speedMs !== undefined
+      ? speedMs * (metric ? 3.6 : 2.23694) // km/h or mph
+      : undefined;
+
+  const [normalizedAngle, setNormalizedAngle] = useState<number>(0);
+  const prevAngleRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (direction === undefined) return;
+
+    const currentAngle = direction;
+    const prevAngle = prevAngleRef.current;
+
+    // Calculate the shortest path difference
+    let diff = currentAngle - prevAngle;
+
+    // Normalize to [-π, π] range
+    while (diff > Math.PI) diff -= 2 * Math.PI;
+    while (diff < -Math.PI) diff += 2 * Math.PI;
+
+    // Update the normalized angle
+    setNormalizedAngle((prev) => prev + diff);
+    prevAngleRef.current = currentAngle;
+  }, [direction]);
+
   return (
     <div className="bg-slate-800/70 p-2 rounded-sm">
       <div className="flex flex-row gap-x-2 items-center text-sm mb-3">
@@ -17,21 +47,20 @@ export const WindDirection = ({ speedMs, direction }: WindDirectionProps) => {
       </div>
       <div
         id="wind"
-        ref={parent}
         className="flex aspect-square relative w-full max-w-[120px] mx-auto"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 60 60"
           className="absolute stroke-current stroke-[3] w-full h-full box-border fill-none origin-center transform-gpu transition-transform duration-1000 ease-out"
           style={{
-            rotate: `calc(${direction ?? 0} * 1rad + 0.5turn)`,
+            rotate: `calc(${normalizedAngle} * 1rad + 0.5turn)`,
           }}
         >
           <path d="M48 8A28 28 90 0158 30c0 15.464-12.536 28-28 28S2 45.464 2 30A28 28 90 0112 8M22 9 30 1l8 8" />
         </svg>
         <div className="absolute w-full h-full flex justify-center items-center text-[32px]">
-          {speed !== undefined ? speed.toFixed(1) : '-'}
+          {speed !== undefined ? Math.round(speed) : '-'}
         </div>
       </div>
     </div>