Index: imaps-frontend/src/pages/Draw/Draw.jsx
===================================================================
--- imaps-frontend/src/pages/Draw/Draw.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/Draw/Draw.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,116 +1,153 @@
-import { useEffect, useState } from "react";
-import { MapBuilder } from "../../scripts/main/MapBuilder.js";
+import { useContext, useEffect, useState } from "react";
 import styles from "./Draw.module.css";
-import RoomModal from "../../components/RoomModal/RoomModal.jsx";
-import SideBar from "../../components/SideBar/SideBar.jsx";
-import EntranceModal from "../../components/EntranceModal/EntranceModal.jsx";
+import RoomModal from "../../components/Modals/RoomModal/RoomModal.jsx";
+import EntranceModal from "../../components/Modals/EntranceModal/EntranceModal.jsx";
 import DrawGuide from "../../components/DrawGuide/DrawGuide.jsx";
-import RoomTypeModal from "../../components/RoomTypeModal/RoomTypeModal.jsx";
-import InfoPinModal from "../../components/InfoPinModal/InfoPinModal.jsx";
+import RoomTypeModal from "../../components/Modals/RoomTypeModal/RoomTypeModal.jsx";
+import InfoPinModal from "../../components/Modals/InfoPinModal/InfoPinModal.jsx";
+import SaveMap from "../../components/SaveMap/SaveMap.jsx";
+import Logo from "../../components/Logo/Logo.jsx";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import Profile from "../../components/Profile/Profile.jsx";
 import HttpService from "../../scripts/net/HttpService.js";
-import SaveMap from "../../components/SaveMap/SaveMap.jsx";
-import logo from "../../assets/logo_icon.png";
-import MapTemplateSelector from "../../components/MapTemplateSelector/LoadMap.jsx";
-import KeymapPanel from "../../components/KeyMappingsGuidePanel/KeymapPanel.jsx";
-import { Link } from "react-router-dom";
+import StairsModal from "../../components/Modals/StairsModal/StairsModal.jsx";
+import useMapLoader from "./Hooks/useMapLoader.js";
+import {FloorSelector} from "./FloorSelector.jsx";
+import {useRoomTypesLoader} from "./Hooks/useRoomTypesLoader.js";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import config from "../../scripts/net/netconfig.js";
+import ShapeRegistry from "../../scripts/util/ShapeRegistry.js";
 
 function Draw() {
-  const [selectedFloor, setSelectedFloor] = useState(1);
-  const [app, setApp] = useState(null);
+  const { mapName } = useParams();
+  const { username } = useAppContext();
+
   const [isPopupVisible, setIsPopupVisible] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("Error");
+  const [hasError, setHasError] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const[roomTypes,setRoomTypes] = useState([]);
+
+  const {app,floors,saveFloor,setFloors} = useMapLoader(mapName,username,searchParams,setSearchParams)
+  const {addRoomType} = useRoomTypesLoader(setRoomTypes,mapName,username);
+
+  const addFloorHandler = async (newFloorNum) => {
+    const httpService = new HttpService();
+    httpService.setAuthenticated();
+
+    const payload = {
+      num: newFloorNum,
+      mapName: mapName,
+    };
+
+    try {
+      await httpService.put(`${config.floors.add}`, payload);
+      console.log(`Added floor ${newFloorNum}`);
+      setFloors((prevFloors) => [...prevFloors, { num: newFloorNum }]);
+    } catch (error) {
+      console.error("Error adding floor:", error);
+    }
+  };
+
+  const deleteFloorHandler = async (floorNum) => {
+    if(floorNum === 0) return
+
+    const httpService = new HttpService();
+    httpService.setAuthenticated();
+
+    try {
+      await httpService.delete(`${config.floors.delete}?floorNum=${floorNum}&mapName=${mapName}`);
+      setFloors((prevFloors) => prevFloors.filter(f => f.num !== floorNum))
+
+      const currFloor = searchParams.get("floor");
+      if(currFloor == floorNum){
+        setSearchParams({floor:"0"},{replace:true})
+      }
+      console.log(`Deleted floor ${floorNum}`);
+    } catch (error) {
+      console.error("Error deleting floor:", error);
+    }
+  };
+
   useEffect(() => {
-    const app = new MapBuilder("container");
-    setApp(app);
-    // fpsCounterLoop();
+    return () => {
+      ShapeRegistry.clear();
+    }
   }, []);
 
-  const handleFloorChange = (event) => {
-    setSelectedFloor(event.target.value);
-    console.log(`Floor changed to: ${event.target.value}`);
-  };
 
-  const handleRenderClick = () => {
-    setIsPopupVisible(true);
+  const handleSaveClick = async () => {
+    saveFloor().then(r => {
+     floors.forEach(flr => {
+       setIsPopupVisible(true);
+       setTimeout(() => {
+         setIsPopupVisible(false);},
+           3000);
+       console.log("floor after save: " + JSON.stringify(flr))
+     })
+    });
 
-    setTimeout(() => {
-      setIsPopupVisible(false);
-    }, 3000);
-  };
 
-  const handleSaveClick = async (mapName) => {
-    const resp = await app.saveMap(mapName);
-  };
-  const handleLoadMapClick = (data) => {
-    app.deserializeMap(data);
   };
 
   return (
     <div className={styles.wrapper} id="wrapper">
-      <SideBar></SideBar>
+      {/* <SideBar></SideBar> */}
+      <Logo></Logo>
       <div id="container" className={styles.cont}></div>
       <div className={styles.panel}>
-        <Link to="/">
-          <img src={logo} alt="Finki Logo" className={styles.logo} />
+        <div className={styles.topPanelH}>
+          <Profile position="inline"></Profile>
+        </div>
+        <Link to={`/myMaps/${mapName}/View`} className={styles.titleLink}>
+          <h1 className={styles.title}>{mapName}</h1>
         </Link>
-        <h1 className={styles.title}>Map Builder</h1>
-        {/* <div id="fpscont" className={styles.fpscounter}>
-          <p id="fpsCounter"></p>
-        </div> */}
         <div className={styles.guideWrapper}>
-          <DrawGuide />
+          <DrawGuide/>
         </div>
-
-        {/* <div className={styles.floorSelector}>
-          <label htmlFor="floorSelect">Select Floor:</label>
-          <select
-            id="floorSelect"
-            value={selectedFloor}
-            onChange={handleFloorChange}
-            className={styles.floorDropdown}
-          >
-            <option value={1}>1st Floor</option>
-            <option value={2}>2nd Floor</option>
-            <option value={3}>3rd Floor</option>
-            <option value={4}>4th Floor</option>
-          </select>
-        </div> */}
-        {/* <h2 className={styles.paragraph}>Objects:</h2> */}
+        <hr/>
+        <br/>
+        {/* {<h2 className={styles.paragraph}>Objects:</h2>} */}
         <ul className={styles.shapeOptions} id="shapeOptions">
           <li data-info="Entrance" className={`${styles.shapeOption} ${styles.entrance}`}></li>
           <li data-info="Wall" className={`${styles.shapeOption} ${styles.wall}`} id="wall"></li>
           <li data-info="Room" className={`${styles.shapeOption} ${styles.room}`} id="room"></li>
+          <li data-info="Stairs" className={`${styles.shapeOption} ${styles.stairs}`} id="stairs"></li>
         </ul>
-        <br />
-        <RoomTypeModal map={app}></RoomTypeModal>
+        <RoomTypeModal map={app} roomTypes={roomTypes} addRoomTypeDB={addRoomType}></RoomTypeModal>
+        <br/>
+        <hr/>
+        <br/>
+        <FloorSelector floorConfig={{
+          floors,searchParams,
+          setSearchParams,addFloorHandler,
+          deleteFloorHandler
+        }}></FloorSelector>
 
-        <div id="render" className={styles.buttonContainer}>
-          <button
-            id="render-button"
-            type="button"
-            className={styles.renderButton}
-            onClick={handleRenderClick}
-          >
-            Render
-          </button>
-        </div>
+        <br/>
+
+        <hr/>
+        <br/>
+        {hasError && <p style={{color: "red", textAlign: "center"}}>{errorMessage}</p>}
         <div className={styles.templateCont}>
           <SaveMap submitHandler={handleSaveClick}></SaveMap>
-          <MapTemplateSelector loadHandler={handleLoadMapClick}></MapTemplateSelector>
         </div>
 
         <div className={styles.hide}>
-          <RoomModal map={app}></RoomModal>
+          <RoomModal map={app} roomTypes={roomTypes}></RoomModal>
           <EntranceModal map={app}></EntranceModal>
           <InfoPinModal map={app}></InfoPinModal>
+          <StairsModal map={app}></StairsModal>
         </div>
       </div>
 
       {isPopupVisible && (
-        <div className={styles.popup}>
-          <div className={styles.popupContent}>
-            <h2>Map Rendered!</h2>
-            <p>Your map has been successfully rendered.</p>
+          <div className={styles.popup}>
+            <div className={styles.popupContent}>
+              <h2>Map Saved!</h2>
+              <p>Your map has been successfully saved.</p>
+            </div>
           </div>
-        </div>
       )}
     </div>
