added 2d 3d view

app/src/components/ui/Tools.tsx

@@ -78,13 +78,11 @@ const Tools: React.FC = () => {
 
   return (
     <div className="tools-container">
-      {!isPlaying && (
       <div className="drop-down-icons">
         <div className="activeDropicon">
           {activeSubTool == "cursor" && (
             <div
-                className={`tool-button ${
-                  activeTool === "cursor" ? "active" : ""
+              className={`tool-button ${activeTool === "cursor" ? "active" : ""
                 }`}
               onClick={() => {
                 setActiveTool("cursor");
@@ -95,8 +93,7 @@ const Tools: React.FC = () => {
           )}
           {activeSubTool == "free-hand" && (
             <div
-                className={`tool-button ${
-                  activeTool === "free-hand" ? "active" : ""
+              className={`tool-button ${activeTool === "free-hand" ? "active" : ""
                 }`}
               onClick={() => {
                 setActiveTool("free-hand");
@@ -151,7 +148,6 @@ const Tools: React.FC = () => {
           )}
         </div>
       </div>
-      )}
       {!toggleThreeD && activeModule === "builder" && (
         <>
           <div className="split"></div>
@@ -210,7 +206,7 @@ const Tools: React.FC = () => {
           </div>
         </>
       )}
-      {activeModule === "visualization" && !isPlaying && (
+      {activeModule === "visualization" && (
         <>
           <div className="split"></div>
           <div className="draw-tools">
@@ -229,14 +225,10 @@ const Tools: React.FC = () => {
           </div>
         </>
       )}
-      {!isPlaying && (
-        <>
       <div className="split"></div>
       <div className="general-options">
         <div
-              className={`tool-button ${
-                activeTool === "comment" ? "active" : ""
-              }`}
+          className={`tool-button ${activeTool === "comment" ? "active" : ""}`}
           onClick={() => {
             setActiveTool("comment");
           }}
@@ -256,9 +248,7 @@ const Tools: React.FC = () => {
       <div className="split"></div>
       <div
         className={`toggle-threed-button${toggleThreeD ? " toggled" : ""}`}
-            onClick={() => {
-              setToggleThreeD(!toggleThreeD);
-            }}
+        onClick={toggleSwitch}
       >
         <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
           2d
@@ -267,13 +257,6 @@ const Tools: React.FC = () => {
           3d
         </div>
       </div>
-        </>
-      )}
-      {isPlaying && (
-        <div className="exitPlay" onClick={() => setIsPlaying(false)}>
-          X
-        </div>
-      )}
     </div>
   );
 };