Update styles, add marketplace components, and enhance drag-and-drop functionality

app/src/pages/Project.tsx

@@ -16,7 +16,9 @@ import {
   useLoadingProgress,
 } from "../store/store";
 import { useNavigate } from "react-router-dom";
+import { usePlayButtonStore } from "../store/usePlayButtonStore";
 import SimulationUI from "../modules/simulation/simulationUI";
+import MarketPlace from "../modules/market/MarketPlace";
 import LoadingPage from "../components/templates/LoadingPage";
 
 const Project: React.FC = () => {
@@ -46,13 +48,20 @@ const Project: React.FC = () => {
       navigate("/");
     }
   }, []);
+  const { isPlaying } = usePlayButtonStore();
 
   return (
     <div className="project-main">
       {loadingProgress && <LoadingPage progress={loadingProgress} />}
-      <ModuleToggle />
-      <SideBarLeft />
-      <SideBarRight />
+      {!isPlaying && (
+        <>
+          <ModuleToggle />
+          <ModuleToggle />
+          <SideBarLeft />
+          <SideBarRight />
+        </>
+      )}
+      {activeModule === "market" && <MarketPlace />}
       <RealTimeVisulization />
       {activeModule !== "market" && <Tools />}
       {/* <SimulationUI /> */}