refactor: Implement hidePlayer state in ControlsPlayer and SimulationPlayer for better UI control

app/src/components/layout/controls/ControlsPlayer.tsx

@@ -10,6 +10,7 @@ const ControlsPlayer = () => {
   const { setIsPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
   const [walkMode, setWalkMode] = useState(false);
+  const [hidePlayer, setHidePlayer] = useState(false);
 
   const changeCamMode = () => {
     setWalkMode(!walkMode);
@@ -17,12 +18,15 @@ const ControlsPlayer = () => {
   };
   return (
     <div className="controls-player-container">
+      {!hidePlayer && (
         <div className="controls-left">
           <PlayIcon />
           <div className="label">Running {activeModule}...</div>
         </div>
+      )}
 
       <div className="controls-right">
+        {!hidePlayer && (
           <div className="walkMode-wrapper">
             <WalkIcon />
             <InputToggle
@@ -32,22 +36,29 @@ const ControlsPlayer = () => {
               onClick={changeCamMode}
             />
           </div>
+        )}
         <button
           id="controls-player-play-button"
-          className="btn-wrapper"
+          className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
           onClick={() => setIsPlaying(false)}
         >
           <div className="icon">
             <ExitIcon />
           </div>
-          Exit
+          {!hidePlayer && "Exit"}
         </button>
-        <div className="btn-wrapper">
+        <button
+          className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
+          id="hide-btn"
+          onClick={() => {
+            setHidePlayer(!hidePlayer);
+          }}
+        >
           <div className="icon">
             <EyeCloseIcon />
           </div>
-          Hide
+          {!hidePlayer && "Hide"}
-        </div>
+        </button>
       </div>
     </div>
   );

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -11,6 +11,7 @@ import {
   DailyProductionIcon,
   EndIcon,
   ExpandIcon,
+  EyeCloseIcon,
   HourlySimulationIcon,
   InfoIcon,
   MonthlyROI,
@@ -30,6 +31,7 @@ const SimulationPlayer: React.FC = () => {
   const sliderRef = useRef<HTMLDivElement>(null);
   const [expand, setExpand] = useState(true);
   const [playSimulation, setPlaySimulation] = useState(false);
+  const [hidePlayer, setHidePlayer] = useState(false);
 
   const { speed, setSpeed } = useAnimationPlaySpeed();
   const { setIsPlaying } = usePlayButtonStore();
@@ -161,10 +163,10 @@ const SimulationPlayer: React.FC = () => {
 
   return (
     <>
-      <div className="simulation-player-wrapper">
+      <div className={`simulation-player-wrapper${hidePlayer ? " hide" : ""}`}>
         <div className={`simulation-player-container ${expand ? "open" : ""}`}>
           <div className="controls-container">
-            {subModule === "analysis" && (
+            {!hidePlayer && subModule === "analysis" && (
               <div className="production-details">
                 {/* hourlySimulation */}
                 <div className="hourly-wrapper production-wrapper">
@@ -213,7 +215,7 @@ const SimulationPlayer: React.FC = () => {
                 </div>
               </div>
             )}
-            {subModule !== "analysis" && (
+            {!hidePlayer && subModule !== "analysis" && (
               <div className="header">
                 <InfoIcon />
                 {playSimulation
@@ -222,6 +224,7 @@ const SimulationPlayer: React.FC = () => {
               </div>
             )}
             <div className="controls-wrapper">
+              {!hidePlayer && (
                 <button
                   id="simulation-reset-button"
                   className="simulation-button-container"
@@ -232,6 +235,8 @@ const SimulationPlayer: React.FC = () => {
                   <ResetIcon />
                   Reset
                 </button>
+              )}
+              {!hidePlayer && (
                 <button
                   id="simulation-play-button"
                   className="simulation-button-container"
@@ -242,6 +247,7 @@ const SimulationPlayer: React.FC = () => {
                   <PlayStopIcon />
                   {playSimulation ? "Play" : "Stop"}
                 </button>
+              )}
               <button
                 id="simulation-reset-button"
                 className="simulation-button-container"
@@ -250,7 +256,17 @@ const SimulationPlayer: React.FC = () => {
                 }}
               >
                 <ExitIcon />
-                Exit
+                {!hidePlayer && "Exit"}
+              </button>
+              <button
+                id="simulation-reset-button"
+                className="simulation-button-container"
+                onClick={() => {
+                  setHidePlayer(!hidePlayer);
+                }}
+              >
+                <EyeCloseIcon />
+                {!hidePlayer && "Hide"}
               </button>
               {subModule === "analysis" && (
                 <button
@@ -263,6 +279,7 @@ const SimulationPlayer: React.FC = () => {
               )}
             </div>
           </div>
+          {!hidePlayer && (
             <div className="progresser-wrapper">
               <div className="time-displayer">
                 <div className="start-time-wrappper">
@@ -356,7 +373,8 @@ const SimulationPlayer: React.FC = () => {
                 </div>
               </div>
             </div>
-          {subModule === "analysis" && (
+          )}
+          {!hidePlayer && subModule === "analysis" && (
             <div className="processDisplayer">
               <div className="start-displayer timmer">00:00</div>
               <div className="end-displayer timmer">24:00</div>

app/src/styles/components/simulation/simulation.scss

@@ -8,7 +8,16 @@
   z-index: 2;
   transform: translate(-50%, 0);
   width: 70vw;
-
+  transition: all 0.3s;
+  &.hide {
+    width: fit-content;
+    .simulation-player-container
+      .controls-container
+      .simulation-button-container {
+      width: 32px;
+      height: 24px;
+    }
+  }
   .simulation-player-container {
     background: var(--background-color);
     padding: 7px;
@@ -90,11 +99,12 @@
         @include flex-center;
         gap: 2px;
         padding: 4px 8px;
-        min-width: 64px;
+        width: 64px;
         background: var(--background-color);
         border-radius: #{$border-radius-extra-large};
         height: fit-content;
         cursor: pointer;
+        transition: all 0.2s;
 
         &:hover {
           outline: 1px solid var(--border-color);
@@ -357,7 +367,7 @@
   @include flex-center;
   justify-content: space-between;
   position: fixed;
-  bottom: 40px;
+  bottom: 32px;
   left: 50%;
   transform: translate(-50%, 0);
   color: var(--accent-color);
@@ -394,21 +404,23 @@
     }
 
     .btn-wrapper {
-      display: flex;
+      @include flex-center;
-      justify-content: center;
-      align-items: center;
       gap: 2px;
       padding: 4px 8px;
-      min-width: 64px;
+      width: 64px;
       background: var(--background-color);
       border-radius: 20px;
       height: fit-content;
       cursor: pointer;
-      transition: color .2s;
+      transition: all 0.2s;
+      outline: 1px solid transparent;
       &:hover {
         outline: 1px solid var(--border-color);
         color: var(--accent-color);
       }
+      &.hide{
+        width: 32px;
+      }
       .icon {
         width: 16px;
         height: 16px;

app/src/styles/pages/realTimeViz.scss

@@ -22,7 +22,6 @@
 
   .floating {
     // width: calc(var(--realTimeViz-container-width) * 0.2px);
-
     // transform: scale(min(1, calc(var(--realTimeViz-container-width) / 1000)));
 
     min-width: 230px;
@@ -63,7 +62,6 @@
     left: 50%;
     gap: 6px;
     border-radius: #{$border-radius-medium};
-
     overflow: auto;
     max-width: calc(100% - 500px);
     z-index: 3;
@@ -71,6 +69,10 @@
     pointer-events: all;
     transition: all 0.3s linear;
 
+    &.bottom{
+      bottom: var(--bottomWidth);
+    }
+
     &::-webkit-scrollbar {
       display: none;
     }
@@ -118,7 +120,10 @@
   }
 
   .zone-container.visualization-playing {
-    bottom: 70px;
+    bottom: 74px;
+    &.bottom{
+      bottom: var(--bottomWidth);
+    }
   }
 
   .zone-wrapper.bottom {