diff --git a/package-lock.json b/package-lock.json index d95d770..e842055 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "irdashies", - "version": "0.0.10", + "version": "0.0.12", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "irdashies", - "version": "0.0.10", + "version": "0.0.12", "license": "MIT", "dependencies": { "@formkit/auto-animate": "^0.8.2", diff --git a/src/app/bridge/iracingSdk/mock-data/session.json b/src/app/bridge/iracingSdk/mock-data/session.json index 615512c..ff7c555 100644 --- a/src/app/bridge/iracingSdk/mock-data/session.json +++ b/src/app/bridge/iracingSdk/mock-data/session.json @@ -3426,7 +3426,7 @@ "CarClassPowerAdjust": "0.000 %", "CarClassDryTireSetLimit": "0 %", "CarClassColor": 16767577, - "CarClassEstLapTime": 113.6302, + "CarClassEstLapTime": 126.6302, "IRating": 1367, "LicLevel": 15, "LicSubLevel": 375, diff --git a/src/app/irsdk/node/utils/mock-data/session.json b/src/app/irsdk/node/utils/mock-data/session.json index 615512c..ff7c555 100644 --- a/src/app/irsdk/node/utils/mock-data/session.json +++ b/src/app/irsdk/node/utils/mock-data/session.json @@ -3426,7 +3426,7 @@ "CarClassPowerAdjust": "0.000 %", "CarClassDryTireSetLimit": "0 %", "CarClassColor": 16767577, - "CarClassEstLapTime": 113.6302, + "CarClassEstLapTime": 126.6302, "IRating": 1367, "LicLevel": 15, "LicSubLevel": 375, diff --git a/src/app/storage/defaultDashboard.ts b/src/app/storage/defaultDashboard.ts index f620ac5..f4c8057 100644 --- a/src/app/storage/defaultDashboard.ts +++ b/src/app/storage/defaultDashboard.ts @@ -69,5 +69,15 @@ export const defaultDashboard: DashboardLayout = { height: 330, }, }, + { + id: 'fastercarsfrombehind', + enabled: false, + layout: { + x: 700, + y: 200, + width: 400, + height: 40, + }, + } ], }; diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx index 36e668e..a685990 100644 --- a/src/frontend/App.tsx +++ b/src/frontend/App.tsx @@ -14,6 +14,7 @@ import { Settings } from './components/Settings/Settings'; import { Relative } from './components/Standings/Relative'; import { Weather } from './components/Weather'; import { TrackMap } from './components/TrackMap/TrackMap'; +import { FasterCarsFromBehind } from './components/FasterCarsFromBehind/FasterCarsFromBehind'; import { EditMode } from './components/EditMode/EditMode'; // TODO: type this better, right now the config comes from settings @@ -25,6 +26,7 @@ const WIDGET_MAP: Record React.JSX.Element> = { settings: Settings, map: TrackMap, weather: Weather, + fastercarsfrombehind: FasterCarsFromBehind, }; const AppRoutes = () => { diff --git a/src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.stories.tsx b/src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.stories.tsx new file mode 100644 index 0000000..c70f212 --- /dev/null +++ b/src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.stories.tsx @@ -0,0 +1,36 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { FasterCarsFromBehind } from './FasterCarsFromBehind'; +import { TelemetryDecorator } from '../../../../.storybook/telemetryDecorator'; +import { DynamicTelemetrySelector } from '../Standings/DynamicTelemetrySelector'; +import { useState } from 'react'; + +export default { + component: FasterCarsFromBehind, + parameters: { + controls: { + exclude: ['telemetryPath'], + } + } +} as Meta; + +type Story = StoryObj; + +export const Primary: Story = { + decorators: [TelemetryDecorator()], +}; + +export const DynamicTelemetry: Story = { + decorators: [(Story, context) => { + const [selectedPath, setSelectedPath] = useState('/test-data/1745291694179'); + + return ( + <> + + {TelemetryDecorator(selectedPath)(Story, context)} + + ); + }], +}; \ No newline at end of file diff --git a/src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.tsx b/src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.tsx new file mode 100644 index 0000000..5d041f9 --- /dev/null +++ b/src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.tsx @@ -0,0 +1,30 @@ +import { useMemo } from 'react'; +import { useAutoAnimate } from '@formkit/auto-animate/react'; +import { useCarBehind } from './hooks/useCarBehind'; + +export const FasterCarsFromBehind = () => { + const carBehind = useCarBehind(); + const [parent] = useAutoAnimate(); + + const layout = useMemo(() => { + const hidden = carBehind.name === null || carBehind.name == undefined ? 'hidden' : ''; + const animate = carBehind.distance > -0.3 ? 'animate-pulse' : ''; + const red = carBehind.percent; + const green = 100 - carBehind.percent; + + return { hidden, animate, red, green }; + }, [ + carBehind.name, + carBehind.distance, + carBehind.percent + ]); + + return ( +
+
{carBehind.name}
+
{carBehind.distance}
+
+
+ ); +}; diff --git a/src/frontend/components/FasterCarsFromBehind/hooks/useCarBehind.tsx b/src/frontend/components/FasterCarsFromBehind/hooks/useCarBehind.tsx new file mode 100644 index 0000000..e09dc5c --- /dev/null +++ b/src/frontend/components/FasterCarsFromBehind/hooks/useCarBehind.tsx @@ -0,0 +1,20 @@ +import { useMemo } from 'react'; +import { useDriverRelatives } from '../../Standings/hooks/useDriverRelatives'; +import { getTailwindStyle } from '../../../utils/colors'; + +export const useCarBehind = () => { + const drivers = useDriverRelatives({ buffer: 1 }); + const carBehind = drivers[2]; + const myCar = drivers[1]; + + const background = getTailwindStyle(carBehind?.carClass?.color).classHeader; + + const FasterCarFromBehind = useMemo(() => { + const percent = parseInt((100 - (Math.abs(carBehind?.delta) / 3 * 100)).toFixed(0)); + + return { name: carBehind?.driver?.name, distance: parseFloat(carBehind?.delta.toFixed(1)), background: background, percent : percent }; + }, [carBehind?.delta, carBehind?.driver?.name, background]); + + if(carBehind?.carClass?.relativeSpeed <= myCar?.carClass?.relativeSpeed || carBehind?.delta < -3) return {name: null, distance: 0, background: null, percent: 0}; + return FasterCarFromBehind; +}; diff --git a/test-data/1733030013074/session.json b/test-data/1733030013074/session.json index 615512c..ff7c555 100644 --- a/test-data/1733030013074/session.json +++ b/test-data/1733030013074/session.json @@ -3426,7 +3426,7 @@ "CarClassPowerAdjust": "0.000 %", "CarClassDryTireSetLimit": "0 %", "CarClassColor": 16767577, - "CarClassEstLapTime": 113.6302, + "CarClassEstLapTime": 126.6302, "IRating": 1367, "LicLevel": 15, "LicSubLevel": 375,