arm ui added

app/src/modules/simulation/roboticArm/roboticArm.tsx

@@ -2,9 +2,17 @@ import { useEffect } from "react";
 import RoboticArmInstances from "./instances/roboticArmInstances";
 import { useArmBotStore } from "../../../store/simulation/useArmBotStore";
 import { useFloorItems } from "../../../store/store";
+import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import { useEventsStore } from "../../../store/simulation/useEventsStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import ArmBotUI from "../ui/arm/armBotUI";
 
 function RoboticArm() {
     const { armBots, addArmBot, removeArmBot } = useArmBotStore();
+    const { addEvent } = useEventsStore();
+    const { selectedEventSphere } = useSelectedEventSphere();
+    const { selectedEventData } = useSelectedEventData();
+    const { isPlaying } = usePlayButtonStore();
     const { floorItems } = useFloorItems();
     const armBotStatusSample: RoboticArmEventSchema[] = [
         {
@@ -156,12 +164,18 @@ function RoboticArm() {
     }, []);
 
     useEffect(() => {
-        
-    }, [armBots]);
+
+        console.log('isPlaying: ', isPlaying);
+        console.log('selectedEventData: ', selectedEventData);
+        console.log('selectedEventSphere: ', selectedEventSphere);
+    }, [selectedEventData, selectedEventSphere, isPlaying]);
 
     return (
         <>
             <RoboticArmInstances />
+            {selectedEventSphere && selectedEventData?.data.type === "roboticArm" && !isPlaying &&
+                < ArmBotUI />
+            }
         </>
     );
 }