Fixe speed modifier and refactor a bit

Author: ch1bo

ui/src/components/Sim/SimWrapper.tsx

@@ -4,7 +4,6 @@ import { useSimContext } from "@/contexts/SimContext/context";
 import { FC, useEffect } from "react";
 import { parse } from "yaml";
 import { Coord2D, Node } from "../../../../data/simulation/topology";
-import { useTimelinePlayback } from "@/hooks/useTimelinePlayback";
 import { GraphWrapper } from "../Graph/GraphWrapper";
 import { Scenario } from "./modules/Scenario";
 import { TimelineSlider } from "./modules/TimelineSlider";
@@ -22,9 +21,6 @@ export const SimWrapper: FC = () => {
     dispatch,
   } = useSimContext();
 
-  // Enable timeline playback
-  useTimelinePlayback();
-
   // Load topology if it has changed
   useEffect(() => {
     dispatch({ type: "RESET_TOPOLOGY", payload: topologyPath });

ui/src/components/Sim/modules/Playback.tsx

@@ -1,12 +1,17 @@
 import { useSimContext } from "@/contexts/SimContext/context";
-import { FC, useCallback } from "react";
+import { FC, useCallback, useEffect, useRef } from "react";
 
 export const Playback: FC = () => {
   const {
     state: { events, isPlaying, speedMultiplier, currentTime, maxTime },
     dispatch,
   } = useSimContext();
 
+  // Timeline playback refs
+  const intervalRef = useRef<number | null>(null);
+  const lastUpdateRef = useRef<number>(0);
+  const currentTimeRef = useRef<number>(currentTime);
+
   const handleSpeedChange = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) => {
       const newSpeed = parseFloat(event.target.value);
@@ -32,6 +37,60 @@ export const Playback: FC = () => {
     [dispatch, currentTime, events, maxTime],
   );
 
+  // Timeline playback effect - handles automatic advancement when playing
+  useEffect(() => {
+    if (isPlaying && events.length > 0) {
+      const maxEventTime = events[events.length - 1].time_s;
+
+      // Clear any existing interval
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+
+      // Start playback interval
+      intervalRef.current = window.setInterval(() => {
+        const now = performance.now();
+        // Convert to seconds and apply speed
+        const deltaTime =
+          ((now - lastUpdateRef.current) / 1000) * speedMultiplier;
+        lastUpdateRef.current = now;
+
+        const newTime = Math.min(currentTimeRef.current + deltaTime, maxEventTime);
+        currentTimeRef.current = newTime;
+        
+        dispatch({
+          type: "SET_TIMELINE_TIME",
+          payload: newTime,
+        });
+
+        // Auto-pause at the end
+        if (newTime >= maxEventTime) {
+          dispatch({ type: "SET_TIMELINE_PLAYING", payload: false });
+        }
+      }, 16); // ~60 FPS
+
+      lastUpdateRef.current = performance.now();
+    } else {
+      // Clear interval when paused or no events
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+
+    // Cleanup on unmount
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [isPlaying, events.length, currentTime, speedMultiplier, dispatch]);
+
+  // Keep currentTimeRef in sync when currentTime changes externally (e.g., slider)
+  useEffect(() => {
+    currentTimeRef.current = currentTime;
+    lastUpdateRef.current = performance.now();
+  }, [currentTime]);
 
   const disabled = events.length === 0;
 
@@ -95,6 +154,8 @@ export const Playback: FC = () => {
           onChange={handleSpeedChange}
           disabled={disabled}
         >
+          <option value={0.01}>0.01x</option>
+          <option value={0.1}>0.1x</option>
           <option value={0.25}>0.25x</option>
           <option value={0.5}>0.5x</option>
           <option value={1}>1x</option>