added active time with play,pause,reset and based on speed for vehicle

app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx

@@ -11,10 +11,7 @@ import { useProductStore } from '../../../../../store/simulation/useProductStore
 import { useSelectedProduct } from '../../../../../store/simulation/useSimulationStore';
 import { useTriggerHandler } from '../../../triggers/triggerHandler/useTriggerHandler';
 import MaterialAnimator from '../animator/materialAnimator';
-type Timer = {
-    start: number | null;
-    active: boolean;
-};
+
 function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>) {
     const { navMesh } = useNavMesh();
     const { isPlaying } = usePlayButtonStore();
@@ -23,20 +20,33 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
     const { triggerPointActions } = useTriggerHandler();
     const { getActionByUuid, getEventByModelUuid, getTriggerByUuid } = useProductStore();
     const { selectedProduct } = useSelectedProduct();
-    const { vehicles, setVehicleActive, setVehicleState, setVehiclePicking, clearCurrentMaterials, setVehicleLoad, decrementVehicleLoad, removeLastMaterial } = useVehicleStore();
+    const { vehicles, setVehicleActive, setVehicleState, setVehiclePicking, clearCurrentMaterials, setVehicleLoad, decrementVehicleLoad, removeLastMaterial, incrementIdleTime, incrementActiveTime, resetTime } = useVehicleStore();
+
     const [currentPhase, setCurrentPhase] = useState<string>('stationed');
     const [path, setPath] = useState<[number, number, number][]>([]);
     const pauseTimeRef = useRef<number | null>(null);
+    const idleTimeRef = useRef<number>(0);
+    const activeTimeRef = useRef<number>(0);
     const isPausedRef = useRef<boolean>(false);
+    const isSpeedRef = useRef<number>(0);
     let startTime: number;
     let fixedInterval: number;
     const { speed } = useAnimationPlaySpeed();
     const { isPaused } = usePauseButtonStore();
 
+    const previousTimeRef = useRef<number | null>(null); // Tracks the last frame time
+    const isActiveRef = useRef(agvDetail.isActive); // Tracks the previous isActive state
+    const animationFrameIdRef = useRef<number | null>(null); // Tracks the animation frame ID
+
+
     useEffect(() => {
         isPausedRef.current = isPaused;
     }, [isPaused]);
 
+    useEffect(() => {
+        isSpeedRef.current = speed;
+    }, [speed]);
+
     const computePath = useCallback(
         (start: any, end: any) => {
             try {
@@ -54,7 +64,7 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
     );
 
     function vehicleStatus(modelId: string, status: string) {
-        // 
+        // console.log(`${modelId} , ${status}`);
     }
 
     // Function to reset everything
@@ -68,6 +78,14 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
         startTime = 0;
         isPausedRef.current = false;
         pauseTimeRef.current = 0;
+        resetTime(agvDetail.modelUuid)
+        activeTimeRef.current = 0
+        idleTimeRef.current = 0
+        previousTimeRef.current = null
+        if (animationFrameIdRef.current !== null) {
+            cancelAnimationFrame(animationFrameIdRef.current)
+            animationFrameIdRef.current = null
+        }
     }
 
     useEffect(() => {
@@ -115,12 +133,60 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
                     vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
                 }
             }
-        } else {
+        }
+        else {
             reset()
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [vehicles, currentPhase, path, isPlaying]);
 
+
+    function animate(currentTime: number) {
+        if (previousTimeRef.current === null) {
+            previousTimeRef.current = currentTime;
+        }
+
+        const deltaTime = (currentTime - previousTimeRef.current) / 1000;
+        previousTimeRef.current = currentTime;
+
+        if (agvDetail.isActive) {
+            if (!isPausedRef.current) {
+                activeTimeRef.current += deltaTime * isSpeedRef.current;
+            }
+        } else {
+            if (!isPausedRef.current) {
+                idleTimeRef.current += deltaTime * isSpeedRef.current; // Scale idle time by speed
+            }
+        }
+        animationFrameIdRef.current = requestAnimationFrame(animate);
+    }
+
+    useEffect(() => {
+        if (!isPlaying) return
+        if (!agvDetail.isActive) {
+            const roundedActiveTime = Math.round(activeTimeRef.current);
+            // console.log('Final Active Time:', roundedActiveTime, 'seconds');
+            incrementActiveTime(agvDetail.modelUuid, roundedActiveTime);
+            activeTimeRef.current = 0;
+        } else {
+            const roundedIdleTime = Math.round(idleTimeRef.current);
+            // console.log('Final Idle Time:', roundedIdleTime, 'seconds');
+            incrementIdleTime(agvDetail.modelUuid, roundedIdleTime);
+            idleTimeRef.current = 0;
+        }
+
+        if (animationFrameIdRef.current === null) {
+            animationFrameIdRef.current = requestAnimationFrame(animate);
+        }
+
+        return () => {
+            if (animationFrameIdRef.current !== null) {
+                cancelAnimationFrame(animationFrameIdRef.current);
+                animationFrameIdRef.current = null;
+            }
+        };
+    }, [agvDetail]);
+
     function handleCallBack() {
         if (currentPhase === 'stationed-pickup') {
             setCurrentPhase('picking');
@@ -147,9 +213,6 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
         }
     }
 
-
-
-
     function startUnloadingProcess() {
         if (agvDetail.point.action.triggers.length > 0) {
             const trigger = getTriggerByUuid(selectedProduct.productId, agvDetail.point.action.triggers[0].triggerUuid);
@@ -213,7 +276,7 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
         action: VehicleAction
     ) {
         startTime = performance.now();
-        const fixedInterval = ((unLoadDuration / vehicleCurrentLoad) * (1000 / speed));
+        const fixedInterval = ((unLoadDuration / vehicleCurrentLoad) * (1000 / isSpeedRef.current));
 
         const unloadLoop = () => {
             if (isPausedRef.current) {
@@ -295,7 +358,7 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
 
         const elapsedTime = performance.now() - startTime;
         const unLoadDuration = agvDetail.point.action.unLoadDuration;
-        fixedInterval = ((unLoadDuration / agvDetail.currentLoad) * (1000 / speed));
+        fixedInterval = ((unLoadDuration / agvDetail.currentLoad) * (1000 / isSpeedRef.current));
 
         if (elapsedTime >= fixedInterval) {
             let droppedMat = droppedMaterial - 1;
@@ -332,3 +395,9 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
 }
 
 export default VehicleInstance;
+
+
+
+
+
+

app/src/store/simulation/useVehicleStore.ts

@@ -28,6 +28,7 @@ interface VehiclesStore {
     clearCurrentMaterials: (modelUuid: string) => void;
     incrementActiveTime: (modelUuid: string, incrementBy: number) => void;
     incrementIdleTime: (modelUuid: string, incrementBy: number) => void;
+    resetTime: (modelUuid: string) => void;
 
     getVehicleById: (modelUuid: string) => VehicleStatus | undefined;
     getVehiclesByProduct: (productId: string) => VehicleStatus[];
@@ -206,6 +207,16 @@ export const useVehicleStore = create<VehiclesStore>()(
             });
         },
 
+        resetTime: (modelUuid) => {
+            set((state) => {
+                const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
+                if (vehicle) {
+                    vehicle.activeTime = 0;
+                    vehicle.idleTime = 0;
+                }
+            });
+        },
+
         getVehicleById: (modelUuid) => {
             return get().vehicles.find((v) => v.modelUuid === modelUuid);
         },

app/src/styles/components/marketPlace/marketPlace.scss

@@ -312,6 +312,7 @@
     width: 100%;
     height: 100%;
     background: var(--background-color);
+    backdrop-filter: blur(16px);
     display: flex;
     gap: 12px;
     overflow: hidden;