adding market place

app/src/components/ui/ModuleToggle.tsx

@@ -6,9 +6,11 @@ import {
   SimulationIcon,
   VisualizationIcon,
 } from "../icons/ExportModuleIcons";
+import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 
 const ModuleToggle: React.FC = () => {
   const { activeModule, setActiveModule } = useModuleStore();
+  const { isPlaying, setIsPlaying } = usePlayButtonStore();
 
   return (
     <div className="module-toggle-container">
@@ -42,9 +44,7 @@ const ModuleToggle: React.FC = () => {
         <div className="module">Visualization</div>
       </div>
       <div
-        className={`module-list ${
-          activeModule === "market" && "active"
-        }`}
+        className={`module-list ${activeModule === "market" && "active"}`}
         onClick={() => setActiveModule("market")}
       >
         <div className="icon">

app/src/components/ui/Tools.tsx

@@ -17,7 +17,12 @@ import { handleSaveTemplate } from "../../modules/visualization/handleSaveTempla
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/useZoneStore";
-import { useAddAction, useDeleteModels, useSelectedWallItem, useToggleView } from "../../store/store";
+import {
+  useAddAction,
+  useDeleteModels,
+  useSelectedWallItem,
+  useToggleView,
+} from "../../store/store";
 
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
@@ -39,7 +44,6 @@ const Tools: React.FC = () => {
   const { setAddAction } = useAddAction();
   const { setSelectedWallItem } = useSelectedWallItem();
 
-
   // Reset activeTool whenever activeModule changes
   useEffect(() => {
     setActiveTool(activeSubTool);
@@ -52,8 +56,7 @@ const Tools: React.FC = () => {
       setDeleteModels(false);
       setAddAction(null);
       setToggleView(true);
-    }
-    else {
+    } else {
       setToggleView(false);
     }
     setToggleThreeD(!toggleThreeD);
@@ -77,187 +80,210 @@ const Tools: React.FC = () => {
   }, []);
 
   return (
-    <div className="tools-container">
-      <div className="drop-down-icons">
-        <div className="activeDropicon">
-          {activeSubTool == "cursor" && (
-            <div
-              className={`tool-button ${activeTool === "cursor" ? "active" : ""
-                }`}
-              onClick={() => {
-                setActiveTool("cursor");
-              }}
-            >
-              <CursorIcon isActive={activeTool === "cursor"} />
-            </div>
-          )}
-          {activeSubTool == "free-hand" && (
-            <div
-              className={`tool-button ${activeTool === "free-hand" ? "active" : ""
-                }`}
-              onClick={() => {
-                setActiveTool("free-hand");
-              }}
-            >
-              <FreeMoveIcon isActive={activeTool === "free-hand"} />
-            </div>
-          )}
-          {activeModule !== "visualization" && (
-            <div
-              className="drop-down-option-button"
-              ref={dropdownRef}
-              onClick={() => {
-                setOpenDrop(!openDrop);
-                console.log(openDrop);
-              }}
-            >
-              <ArrowIcon />
-              {openDrop && (
-                <div className="drop-down-container">
+    <>
+      {!isPlaying ? (
+        <>
+          <div className="tools-container">
+            <div className="drop-down-icons">
+              <div className="activeDropicon">
+                {activeSubTool == "cursor" && (
                   <div
-                    className="option-list"
+                    className={`tool-button ${
+                      activeTool === "cursor" ? "active" : ""
+                    }`}
                     onClick={() => {
-                      setOpenDrop(false);
                       setActiveTool("cursor");
-                      setActiveSubTool("cursor");
                     }}
                   >
-                    <div className="active-option">
-                      {activeSubTool === "cursor" && <TickIcon />}
-                    </div>
-                    <CursorIcon isActive={false} />
-                    <div className="option">Cursor</div>
+                    <CursorIcon isActive={activeTool === "cursor"} />
+                  </div>
+                )}
+                {activeSubTool == "free-hand" && (
+                  <div
+                    className={`tool-button ${
+                      activeTool === "free-hand" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("free-hand");
+                    }}
+                  >
+                    <FreeMoveIcon isActive={activeTool === "free-hand"} />
+                  </div>
+                )}
+                {activeModule !== "visualization" && (
+                  <div
+                    className="drop-down-option-button"
+                    ref={dropdownRef}
+                    onClick={() => {
+                      setOpenDrop(!openDrop);
+                      console.log(openDrop);
+                    }}
+                  >
+                    <ArrowIcon />
+                    {openDrop && (
+                      <div className="drop-down-container">
+                        <div
+                          className="option-list"
+                          onClick={() => {
+                            setOpenDrop(false);
+                            setActiveTool("cursor");
+                            setActiveSubTool("cursor");
+                          }}
+                        >
+                          <div className="active-option">
+                            {activeSubTool === "cursor" && <TickIcon />}
+                          </div>
+                          <CursorIcon isActive={false} />
+                          <div className="option">Cursor</div>
+                        </div>
+                        <div
+                          className="option-list"
+                          onClick={() => {
+                            setOpenDrop(false);
+                            setActiveTool("free-hand");
+                            setActiveSubTool("free-hand");
+                          }}
+                        >
+                          <div className="active-option">
+                            {activeSubTool === "free-hand" && <TickIcon />}
+                          </div>
+                          <FreeMoveIcon isActive={false} />
+                          <div className="option">Free Hand</div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+            {!toggleThreeD && activeModule === "builder" && (
+              <>
+                <div className="split"></div>
+                <div className="draw-tools">
+                  <div
+                    className={`tool-button ${
+                      activeTool === "draw-wall" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("draw-wall");
+                    }}
+                  >
+                    <WallIcon isActive={activeTool === "draw-wall"} />
                   </div>
                   <div
-                    className="option-list"
+                    className={`tool-button ${
+                      activeTool === "draw-zone" ? "active" : ""
+                    }`}
                     onClick={() => {
-                      setOpenDrop(false);
-                      setActiveTool("free-hand");
-                      setActiveSubTool("free-hand");
+                      setActiveTool("draw-zone");
                     }}
                   >
-                    <div className="active-option">
-                      {activeSubTool === "free-hand" && <TickIcon />}
-                    </div>
-                    <FreeMoveIcon isActive={false} />
-                    <div className="option">Free Hand</div>
+                    <ZoneIcon isActive={activeTool === "draw-zone"} />
+                  </div>
+                  <div
+                    className={`tool-button ${
+                      activeTool === "draw-aisle" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("draw-aisle");
+                    }}
+                  >
+                    <AsileIcon isActive={activeTool === "draw-aisle"} />
+                  </div>
+                  <div
+                    className={`tool-button ${
+                      activeTool === "draw-floor" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("draw-floor");
+                    }}
+                  >
+                    <FloorIcon isActive={activeTool === "draw-floor"} />
                   </div>
                 </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-      {!toggleThreeD && activeModule === "builder" && (
-        <>
-          <div className="split"></div>
-          <div className="draw-tools">
-            <div
-              className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
+              </>
+            )}
+            {activeModule === "simulation" && (
+              <>
+                <div className="split"></div>
+                <div className="draw-tools">
+                  <div
+                    className={`tool-button ${
+                      activeTool === "pen" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("pen");
+                    }}
+                  >
+                    <PenIcon isActive={activeTool === "pen"} />
+                  </div>
+                </div>
+              </>
+            )}
+            {activeModule === "visualization" && (
+              <>
+                <div className="split"></div>
+                <div className="draw-tools">
+                  <div
+                    className={`tool-button`}
+                    onClick={() =>
+                      handleSaveTemplate({
+                        addTemplate,
+                        selectedZone,
+                        templates,
+                      })
+                    }
+                  >
+                    <SaveTemplateIcon isActive={false} />
+                  </div>
+                </div>
+              </>
+            )}
+            <div className="split"></div>
+            <div className="general-options">
+              <div
+                className={`tool-button ${
+                  activeTool === "comment" ? "active" : ""
                 }`}
-              onClick={() => {
-                setActiveTool("draw-wall");
-              }}
-            >
-              <WallIcon isActive={activeTool === "draw-wall"} />
-            </div>
-            <div
-              className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
+                onClick={() => {
+                  setActiveTool("comment");
+                }}
+              >
+                <CommentIcon isActive={activeTool === "comment"} />
+              </div>
+              <div
+                className={`tool-button ${
+                  activeTool === "play" ? "active" : ""
                 }`}
-              onClick={() => {
-                setActiveTool("draw-zone");
-              }}
-            >
-              <ZoneIcon isActive={activeTool === "draw-zone"} />
+                onClick={() => {
+                  setIsPlaying(!isPlaying);
+                }}
+              >
+                <PlayIcon isActive={activeTool === "play"} />
+              </div>
             </div>
+            <div className="split"></div>
             <div
-              className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
-                }`}
-              onClick={() => {
-                setActiveTool("draw-aisle");
-              }}
+              className={`toggle-threed-button${
+                toggleThreeD ? " toggled" : ""
+              }`}
+              onClick={toggleSwitch}
             >
-              <AsileIcon isActive={activeTool === "draw-aisle"} />
-            </div>
-            <div
-              className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
-                }`}
-              onClick={() => {
-                setActiveTool("draw-floor");
-              }}
-            >
-              <FloorIcon isActive={activeTool === "draw-floor"} />
+              <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
+                2d
+              </div>
+              <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
+                3d
+              </div>
             </div>
           </div>
         </>
+      ) : (
+        <div className="exitPlay" onClick={() => setIsPlaying(false)}>
+          X
+        </div>
       )}
-      {activeModule === "simulation" && (
-        <>
-          <div className="split"></div>
-          <div className="draw-tools">
-            <div
-              className={`tool-button ${activeTool === "pen" ? "active" : ""}`}
-              onClick={() => {
-                setActiveTool("pen");
-              }}
-            >
-              <PenIcon isActive={activeTool === "pen"} />
-            </div>
-          </div>
-        </>
-      )}
-      {activeModule === "visualization" && (
-        <>
-          <div className="split"></div>
-          <div className="draw-tools">
-            <div
-              className={`tool-button`}
-              onClick={() =>
-                handleSaveTemplate({
-                  addTemplate,
-                  selectedZone,
-                  templates,
-                })
-              }
-            >
-              <SaveTemplateIcon isActive={false} />
-            </div>
-          </div>
-        </>
-      )}
-      <div className="split"></div>
-      <div className="general-options">
-        <div
-          className={`tool-button ${activeTool === "comment" ? "active" : ""}`}
-          onClick={() => {
-            setActiveTool("comment");
-          }}
-        >
-          <CommentIcon isActive={activeTool === "comment"} />
-        </div>
-        <div
-          className={`tool-button ${activeTool === "play" ? "active" : ""}`}
-          onClick={() => {
-            setActiveTool("play");
-            setIsPlaying(!isPlaying);
-          }}
-        >
-          <PlayIcon isActive={activeTool === "play"} />
-        </div>
-      </div>
-      <div className="split"></div>
-      <div
-        className={`toggle-threed-button${toggleThreeD ? " toggled" : ""}`}
-        onClick={toggleSwitch}
-      >
-        <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
-          2d
-        </div>
-        <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
-          3d
-        </div>
-      </div>
-    </div>
+    </>
   );
 };