more tidy up for weather and added animations

Author: tariknz

src/frontend/components/Weather/Weather.tsx

@@ -8,14 +8,9 @@ import { WindDirection } from './WindDirection/WindDirection';
 export const Weather = () => {
   const [parent] = useAutoAnimate();
   const weather = useTrackWeather();
-  const trackWetnessPct = Math.floor(
-    (Number(weather.trackMoisture?.value?.[0] ?? 0) / 7) * 100
-  );
-
   const trackTemp = useTrackTemperature();
-  const windSpeed = weather.windVelo?.value[0] * (18 / 5);
-  const windDirectionValue =
-    weather.windDirection?.value[0] - weather.windYaw?.value[0];
+  const windSpeed = weather.windVelocity;
+  const relativeWindDirection =  (weather.windDirection ?? 0) - (weather.windYaw ?? 0);
 
   return (
     <div
@@ -25,11 +20,8 @@ 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 speed={windSpeed} direction={windDirectionValue} />
-        <WeatherTrackWetness
-          trackWetnessPct={trackWetnessPct}
-          trackState={weather.trackState}
-        />
+        <WindDirection speedMs={windSpeed} direction={relativeWindDirection} />
+        <WeatherTrackWetness trackMoisture={weather.trackMoisture} />
       </div>
     </div>
   );

src/frontend/components/Weather/WeatherTrackWetness/WeatherTrackWetness.spec.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { WeatherTrackWetness } from './WeatherTrackWetness';
+
+describe('WeatherTrackWetness', () => {
+  it('renders "Unknown" for invalid moisture values', () => {
+    render(<WeatherTrackWetness trackMoisture={8} />);
+    expect(screen.getByText('Unknown')).toBeInTheDocument();
+  });
+
+  it('displays correct wetness states for different moisture levels', () => {
+    const testCases = [
+      { moisture: 1, expected: 'Dry' },
+      { moisture: 2, expected: 'Mostly Dry' },
+      { moisture: 3, expected: 'Very Lightly Wet' },
+      { moisture: 4, expected: 'Lightly Wet' },
+      { moisture: 5, expected: 'Moderately Wet' },
+      { moisture: 6, expected: 'Very Wet' },
+      { moisture: 7, expected: 'Extremely Wet' },
+    ];
+
+    testCases.forEach(({ moisture, expected }) => {
+      const { rerender } = render(<WeatherTrackWetness trackMoisture={moisture} />);
+      expect(screen.getByText(expected)).toBeInTheDocument();
+      rerender(<></>); // Clean up between tests
+    });
+  });
+
+  it('calculates correct wetness percentage', () => {
+    const testCases = [
+      { moisture: 1, expected: '0%' }, // Min wetness = 0%
+      { moisture: 4, expected: '50%' }, // Middle wetness = 50%
+      { moisture: 7, expected: '100%' }, // Max wetness = 100%
+    ];
+
+    testCases.forEach(({ moisture, expected }) => {
+      const { rerender, container } = render(<WeatherTrackWetness trackMoisture={moisture} />);
+      const progressBar = container.querySelector('[style*="width"]');
+      expect(progressBar).toHaveStyle(`width: ${expected}`);
+      rerender(<></>); // Clean up between tests
+    });
+  });
+
+  it('renders Sun and Drop icons', () => {
+    const { container } = render(<WeatherTrackWetness />);
+    // Since Phosphor icons are rendered as SVGs, we can check for their presence
+    expect(container.querySelectorAll('svg')).toHaveLength(2);
+  });
+}); 

src/frontend/components/Weather/WeatherTrackWetness/WeatherTrackWetness.stories.tsx

@@ -9,7 +9,6 @@ type Story = StoryObj<typeof WeatherTrackWetness>;
 
 export const Primary: Story = {
   args: {
-    trackWetnessPct: 5,
-    trackState: 'Dry',
+    trackMoisture: 5,
   },
 };

src/frontend/components/Weather/WeatherTrackWetness/WeatherTrackWetness.tsx

@@ -1,27 +1,54 @@
 import { Drop, Sun } from '@phosphor-icons/react';
 
+// Track wetness constants
+const MIN_WETNESS = 1;
+const MAX_WETNESS = 7; // Extremely Wet
+const DEFAULT_WETNESS = 0;
+const WETNESS_LEVELS: Record<number, string> = {
+  0: '',
+  1: 'Dry',
+  2: 'Mostly Dry',
+  3: 'Very Lightly Wet',
+  4: 'Lightly Wet',
+  5: 'Moderately Wet',
+  6: 'Very Wet',
+  7: 'Extremely Wet',
+};
+
 export interface WeatherTrackWetnessProps {
-  trackWetnessPct: number;
-  trackState: string;
+  trackMoisture?: number;
 }
 
 export const WeatherTrackWetness = ({
-  trackWetnessPct,
-  trackState,
+  trackMoisture,
 }: WeatherTrackWetnessProps) => {
+  // Calculate wetness percentage (0-100%)
+  // Input range is 1-7, so we normalize it to 0-100%
+  const normalizedMoisture = trackMoisture || MIN_WETNESS;
+  const wetnessScale = MAX_WETNESS - MIN_WETNESS;
+  const trackWetnessPct = ((normalizedMoisture - MIN_WETNESS) / wetnessScale) * 100;
+
+  // Get the descriptive state of track wetness
+  const safeTrackMoisture = trackMoisture ?? DEFAULT_WETNESS;
+  const trackState = WETNESS_LEVELS[safeTrackMoisture] ?? 'Unknown';
+
   return (
     <div className="bg-slate-800/70 p-2 rounded-sm">
       <div className="flex items-center flex-row gap-x-1 mt-1">
         <Sun />
         <div className="w-full bg-gray-700 rounded-full h-2.5">
           <div
+            role="progressbar"
+            aria-valuenow={trackWetnessPct}
+            aria-valuemin={0}
+            aria-valuemax={100}
             style={{ width: `${trackWetnessPct}%` }}
-            className="bg-blue-600 h-2.5 rounded-full"
+            className="bg-blue-600 h-2.5 rounded-full transition-all duration-1000 ease-in-out"
           ></div>
         </div>
         <Drop />
       </div>
-      <div className="text-center text-sm mt-1">{trackState ?? 'Unknown'}</div>
+      <div className="text-center text-sm mt-1">{trackState}</div>
     </div>
   );
 };

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

@@ -12,7 +12,7 @@ export default {
         step: 0.1,
       },
     },
-    speed: {
+    speedMs: {
       control: {
         type: 'range',
         min: 0,
@@ -28,6 +28,6 @@ type Story = StoryObj<typeof WindDirection>;
 export const Primary: Story = {
   args: {
     direction: 0,
-    speed: 0,
+    speedMs: 0,
   },
 };

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

@@ -2,11 +2,12 @@ import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { Wind } from '@phosphor-icons/react';
 
 export interface WindDirectionProps {
-  speed: number;
-  direction: number;
+  speedMs?: number;
+  direction?: number;
 }
 
-export const WindDirection = ({ speed, direction }: WindDirectionProps) => {
+export const WindDirection = ({ speedMs, direction }: WindDirectionProps) => {
+  const speed = speedMs !== undefined ? speedMs * (18 / 5) : undefined;
   const [parent] = useAutoAnimate();
   return (
     <div className="bg-slate-800/70 p-2 rounded-sm">
@@ -22,15 +23,15 @@ export const WindDirection = ({ speed, direction }: WindDirectionProps) => {
         <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"
+          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} * 1rad + 0.5turn)`,
+            rotate: `calc(${direction ?? 0} * 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.toFixed()}
+          {speed !== undefined ? speed.toFixed(1) : '-'}
         </div>
       </div>
     </div>

src/frontend/components/Weather/hooks/useTrackWeather.spec.tsx

@@ -1,5 +1,4 @@
-import { useTelemetry } from '@irdashies/context';
-import { TelemetryVar } from '@irdashies/types';
+import { useTelemetry, useTelemetryValue } from '@irdashies/context';
 import { renderHook } from '@testing-library/react';
 import { describe, beforeEach, vi, it, expect } from 'vitest';
 import { useTrackWeather } from './useTrackWeather';
@@ -11,35 +10,24 @@ describe('useTrackWeather', () => {
     vi.resetAllMocks();
   });
 
-  const mockTelemetryVar = (value: number[]): TelemetryVar<number[]> => ({
-    value,
-    name: 'Mock',
-    description: 'Mock telemetry variable',
-    unit: '',
-    countAsTime: false,
-    length: value.length,
-    varType: 0,
-  });
-
   it('should return track weather data from telemetry values', () => {
-    vi.mocked(useTelemetry).mockImplementation((key) => {
+    vi.mocked(useTelemetryValue).mockImplementation((key) => {
       const mockValues = {
-        TrackWetness: mockTelemetryVar([2]),
-        YawNorth: mockTelemetryVar([45]),
-        WindDir: mockTelemetryVar([270]),
-        WindVel: mockTelemetryVar([8.3]),
+        TrackWetness: 2,
+        YawNorth: 45,
+        WindDir: 270,
+        WindVel: 8.3,
       };
       return mockValues[key as keyof typeof mockValues];
     });
 
     const { result } = renderHook(() => useTrackWeather());
 
     expect(result.current).toEqual({
-      trackState: 'Mostly Dry',
-      trackMoisture: mockTelemetryVar([2]),
-      windDirection: mockTelemetryVar([270]),
-      windVelo: mockTelemetryVar([8.3]),
-      windYaw: mockTelemetryVar([45]),
+      trackMoisture: 2,
+      windDirection: 270,
+      windVelocity: 8.3,
+      windYaw: 45,
     });
   });
 
@@ -51,34 +39,10 @@ describe('useTrackWeather', () => {
     const { result } = renderHook(() => useTrackWeather());
 
     expect(result.current).toEqual({
-      trackState: '',
       trackMoisture: undefined,
       windDirection: undefined,
-      windVelo: undefined,
+      windVelocity: undefined,
       windYaw: undefined,
     });
   });
-
-  it('should return correct track state for different wetness levels', () => {
-    const testCases = [
-      { wetness: 0, expected: '' },
-      { wetness: 1, expected: 'Dry' },
-      { wetness: 2, expected: 'Mostly Dry' },
-      { wetness: 3, expected: 'Very Lightly Wet' },
-      { wetness: 4, expected: 'Lightly Wet' },
-      { wetness: 5, expected: 'Moderately Wet' },
-      { wetness: 6, expected: 'Very Wet' },
-      { wetness: 7, expected: 'Extremely Wet' },
-      { wetness: 8, expected: '' }, // Invalid wetness level
-    ];
-
-    testCases.forEach(({ wetness, expected }) => {
-      vi.mocked(useTelemetry).mockImplementation((key) => {
-        return key === 'TrackWetness' ? mockTelemetryVar([wetness]) : mockTelemetryVar([0]);
-      });
-
-      const { result } = renderHook(() => useTrackWeather());
-      expect(result.current.trackState).toBe(expected);
-    });
-  });
 });

src/frontend/components/Weather/hooks/useTrackWeather.tsx

@@ -1,26 +1,15 @@
-import { useTelemetry } from '@irdashies/context';
-import { useMemo } from 'react';
-
-const wetnessLevels: Record<number, string> = {
-  0: '',
-  1: 'Dry',
-  2: 'Mostly Dry',
-  3: 'Very Lightly Wet',
-  4: 'Lightly Wet',
-  5: 'Moderately Wet',
-  6: 'Very Wet',
-  7: 'Extremely Wet',
-};
+import { useTelemetryValue } from '@irdashies/context';
 
 export const useTrackWeather = () => {
-  const trackMoisture = useTelemetry('TrackWetness');
-  const windYaw = useTelemetry('YawNorth');
-  const windDirection = useTelemetry('WindDir');
-  const windVelo = useTelemetry('WindVel');
-  const trackState = useMemo(() => {
-    const wetnessLevel = trackMoisture?.value[0] ?? '';
-    return wetnessLevels[wetnessLevel] ?? '';
-  }, [trackMoisture?.value]);
+  const trackMoisture = useTelemetryValue('TrackWetness');
+  const windYaw = useTelemetryValue('YawNorth');
+  const windDirection = useTelemetryValue('WindDir');
+  const windVelocity = useTelemetryValue('WindVel');
 
-  return { trackState, trackMoisture, windDirection, windVelo, windYaw };
+  return {
+    trackMoisture,
+    windDirection,
+    windVelocity,
+    windYaw,
+  };
 };