Merge remote-tracking branch 'origin/simulation-animation' into simulation

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -1,21 +1,30 @@
 import React, { useState, useRef, useEffect } from "react";
 import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons";
-import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import { useActiveTool } from "../../../store/store";
+import {
+  useAnimationPlaySpeed,
+  usePauseButtonStore,
+  usePlayButtonStore,
+  useResetButtonStore,
+} from "../../../store/usePlayButtonStore";
 
 const SimulationPlayer: React.FC = () => {
-  const [speed, setSpeed] = useState<number>(1);
+  const { speed, setSpeed } = useAnimationPlaySpeed();
   const [playSimulation, setPlaySimulation] = useState(false);
   const { setIsPlaying } = usePlayButtonStore();
   const sliderRef = useRef<HTMLDivElement>(null);
   const isDragging = useRef(false);
   const { setActiveTool } = useActiveTool();
+  const { isPaused, setIsPaused } = usePauseButtonStore();
+  const { isReset, setReset } = useResetButtonStore();
 
   // Button functions
   const handleReset = () => {
+    setReset(true);
     setSpeed(1);
   };
   const handlePlayStop = () => {
+    setIsPaused(!isPaused);
     setPlaySimulation(!playSimulation);
   };
   const handleExit = () => {
@@ -30,7 +39,7 @@ const SimulationPlayer: React.FC = () => {
   };
 
   const calculateHandlePosition = () => {
-    return ((speed - 0.5) / (50 - 0.5)) * 100;
+    return ((speed - 0.5) / (8 - 0.5)) * 100;
   };
 
   const handleMouseDown = () => {
@@ -118,7 +127,7 @@ const SimulationPlayer: React.FC = () => {
               <input
                 type="range"
                 min="0.5"
-                max="50"
+                max="8"
                 step="0.1"
                 value={speed}
                 onChange={handleSpeedChange}
@@ -126,7 +135,7 @@ const SimulationPlayer: React.FC = () => {
               />
             </div>
           </div>
-          <div className="max-value">50x</div>
+          <div className="max-value">8x</div>
         </div>
       </div>
     </div>