Sim time gets negative

src/components/events/liveEventsGrpc.tsx

@@ -27,7 +27,11 @@ import { useAppDispatch, useAppSelector } from "../../stores";
 import { updateFromDriverData } from "../../stores/grpc/slices/availableCarsSlice";
 import { updateClassification } from "../../stores/grpc/slices/classificationSlice";
 import { updateEvent, updateTrack } from "../../stores/grpc/slices/eventInfoSlice";
-import { updateRecordstamp, updateSession } from "../../stores/grpc/slices/sessionSlice";
+import {
+  updateRecordstamp,
+  updateRefTimeOfDay,
+  updateSession,
+} from "../../stores/grpc/slices/sessionSlice";
 
 import { CarLaps } from "@buf/mpapenbr_iracelog.community_timostamm-protobuf-ts/iracelog/analysis/v1/car_laps_pb";
 import { CarOccupancy } from "@buf/mpapenbr_iracelog.community_timostamm-protobuf-ts/iracelog/analysis/v1/car_occupancy_pb";
@@ -135,6 +139,7 @@ export const LiveEvents: React.FC = () => {
         stateCount++;
         // console.log(`state msg: ${stateCount}: ${res.toJsonString().length}`);
         dispatch(updateSession({ ...res.session } as Session));
+        dispatch(updateRefTimeOfDay({ ...res.session } as Session));
         dispatch(updateRecordstamp(res.timestamp!.toDate()));
 
         const pureCarJsonObj = res.cars.map((c) => ({ ...c }));

src/components/events/loaderGrpc.tsx

@@ -46,7 +46,11 @@ import { initSnapshotData } from "../../stores/grpc/slices/eventSnapshotData";
 import { loadedMessages } from "../../stores/grpc/slices/messagesSlice";
 import { initialRaceGraph } from "../../stores/grpc/slices/raceGraphSlice";
 import { updateRaceOrder } from "../../stores/grpc/slices/raceOrderSlice";
-import { updateRecordstamp, updateSession } from "../../stores/grpc/slices/sessionSlice";
+import {
+  updateRecordstamp,
+  updateRefTimeOfDay,
+  updateSession,
+} from "../../stores/grpc/slices/sessionSlice";
 import { updateSpeedmap } from "../../stores/grpc/slices/speedmapSlice";
 import {
   updateReplayInfo,
@@ -106,6 +110,7 @@ export const LoaderPageGrpc: React.FC<MyProps> = (props: MyProps) => {
         dispatch(initialRaceGraph(res.analysis?.raceGraph as RaceGraph[]));
         // updates from RaceState
         dispatch(updateSession(res.state?.session as Session));
+        dispatch(updateRefTimeOfDay(res.state?.session as Session));
         const x =
           res.event!.replayInfo!.minTimestamp!.toDate().getTime() -
           res.event!.replayInfo!.minSessionTime * 1000;

src/components/live/util.ts

@@ -181,11 +181,11 @@ export const supportsCarData = (raceloggerVersion: string): boolean => {
 export const hocDisplayTimeByUserSettings =
   (sessionData: SessionState, timeMode: string, formatter?: (d: number) => string) =>
   (d: number): string => {
-    const toAdd = sessionData.session.timeOfDay - sessionData.session.sessionTime;
+    // note: d is always the sessionTime in seconds
     const myFormatter = formatter ?? secAsHHMMSS;
     switch (timeMode) {
       case "sim":
-        return myFormatter(d + toAdd);
+        return myFormatter((d + sessionData.refTimeOfDay) % 86400);
       case "real":
         const ref: Date = sessionData.recordDate;
         // // JS hell when calculating days. In order to use own formatter we need the seconds.

src/stores/grpc/slices/sessionSlice.ts

@@ -9,6 +9,7 @@ const defaultSession = (): Session => {
 interface SessionState {
   session: Session;
   recordDate: Date;
+  refTimeOfDay: number; // calculated time of day of the session start
 }
 const initialState = { session: defaultSession(), recordDate: new Date() } as SessionState;
 
@@ -20,6 +21,13 @@ export const sessionSlice = createSlice({
       state.session = action.payload;
       // state.recordDate = action.payload.timestamp?.toDate()
     },
+    updateRefTimeOfDay(state, action: PayloadAction<Session>) {
+      if (action.payload.sessionTime > action.payload.timeOfDay) {
+        state.refTimeOfDay = action.payload.timeOfDay + 86400 - action.payload.sessionTime;
+      } else {
+        state.refTimeOfDay = action.payload.timeOfDay - action.payload.sessionTime;
+      }
+    },
     updateRecordstamp(state, action: PayloadAction<Date>) {
       state.recordDate = action.payload;
       // state.recordDate = action.payload.timestamp?.toDate()
@@ -30,5 +38,6 @@ export const sessionSlice = createSlice({
   },
 });
 
-export const { updateSession, updateRecordstamp, resetSession } = sessionSlice.actions;
+export const { updateSession, updateRecordstamp, updateRefTimeOfDay, resetSession } =
+  sessionSlice.actions;
 export default sessionSlice.reducer;