added market placeCards

app/src/components/ui/ModuleToggle.tsx

@@ -6,17 +6,20 @@ import {
   SimulationIcon,
   VisualizationIcon,
 } from "../icons/ExportModuleIcons";
-import { usePlayButtonStore } from "../../store/usePlayButtonStore";
+import useToggleStore from "../../store/useUIToggleStore";
 
 const ModuleToggle: React.FC = () => {
   const { activeModule, setActiveModule } = useModuleStore();
-  const { isPlaying, setIsPlaying } = usePlayButtonStore();
+  const { setToggleUI } = useToggleStore();
 
   return (
     <div className="module-toggle-container">
       <div
         className={`module-list ${activeModule === "builder" && "active"}`}
-        onClick={() => setActiveModule("builder")}
+        onClick={() => {
+          setActiveModule("builder");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <BuilderIcon isActive={activeModule === "builder"} />
@@ -25,7 +28,10 @@ const ModuleToggle: React.FC = () => {
       </div>
       <div
         className={`module-list ${activeModule === "simulation" && "active"}`}
-        onClick={() => setActiveModule("simulation")}
+        onClick={() => {
+          setActiveModule("simulation");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <SimulationIcon isActive={activeModule === "simulation"} />
@@ -36,7 +42,10 @@ const ModuleToggle: React.FC = () => {
         className={`module-list ${
           activeModule === "visualization" && "active"
         }`}
-        onClick={() => setActiveModule("visualization")}
+        onClick={() => {
+          setActiveModule("visualization");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <VisualizationIcon isActive={activeModule === "visualization"} />
@@ -45,7 +54,10 @@ const ModuleToggle: React.FC = () => {
       </div>
       <div
         className={`module-list ${activeModule === "market" && "active"}`}
-        onClick={() => setActiveModule("market")}
+        onClick={() => {
+          setActiveModule("market");
+          setToggleUI(false);
+        }}
       >
         <div className="icon">
           <CartIcon isActive={activeModule === "market"} />

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -5,6 +5,7 @@ import AddButtons from "./AddButtons";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
+import useModuleStore from "../../../store/useModuleStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -60,6 +61,7 @@ const RealTimeVisulization: React.FC = () => {
   });
 
   const { isPlaying } = usePlayButtonStore();
+  const { activeModule } = useModuleStore();
 
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   useEffect(() => {
@@ -73,36 +75,48 @@ const RealTimeVisulization: React.FC = () => {
     <div
       ref={containerRef}
       id="real-time-vis-canvas"
-      className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
+      className="realTime-viz canvas"
       style={{
-        height: isPlaying ? "100vh" : "",
-        left: isPlaying ? "0%" : "",
+        height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+        width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+        left: isPlaying || activeModule !== "visualization" ? "0%" : "",
       }}
     >
       <div
         className="scene-container"
-        style={{ height: "100%", width: "100%" }}
+        style={{
+          height: "100%",
+          width: "100%",
+          borderRadius:
+            isPlaying || activeModule !== "visualization" ? "" : "6px",
+        }}
       >
         <Scene />
       </div>
-      {!isPlaying && (
-        <AddButtons
-          hiddenPanels={hiddenPanels}
-          setHiddenPanels={setHiddenPanels}
-          selectedZone={selectedZone}
-          setSelectedZone={setSelectedZone}
-        />
+      {activeModule === "visualization" && (
+        <>
+          <DisplayZone
+            zonesData={zonesData}
+            selectedZone={selectedZone}
+            setSelectedZone={setSelectedZone}
+          />
+
+          {!isPlaying && (
+            <AddButtons
+              hiddenPanels={hiddenPanels}
+              setHiddenPanels={setHiddenPanels}
+              selectedZone={selectedZone}
+              setSelectedZone={setSelectedZone}
+            />
+          )}
+
+          <Panel
+            selectedZone={selectedZone}
+            setSelectedZone={setSelectedZone}
+            hiddenPanels={hiddenPanels}
+          />
+        </>
       )}
-      <DisplayZone
-        zonesData={zonesData}
-        selectedZone={selectedZone}
-        setSelectedZone={setSelectedZone}
-      />
-      <Panel
-        selectedZone={selectedZone}
-        hiddenPanels={hiddenPanels}
-        setSelectedZone={setSelectedZone}
-      />{" "}
     </div>
   );
 };