refactor: upload run dialog

2 files changed, 131 insertions, 24 deletions

diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index aa7ab5a..fb146ba 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -24,12 +24,34 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ open, onClose, mapID,
     is_partner_orange: undefined,
   });
 
+  const [currentMap, setCurrentMap] = React.useState<string>("");
+
+  const _set_current_map = (game_name: string) => {
+    setCurrentMap(game_name);
+  }
+
   const [selectedGameID, setSelectedGameID] = React.useState<number>(0);
   const [selectedGameMaps, setSelectedGameMaps] = React.useState<Map[]>([]);
+  const [selectedGameName, setSelectedGameName] = React.useState<string>("");
+
+  // dropdowns
+  const [dropdown1Vis, setDropdown1Vis] = React.useState<boolean>(false);
+  const [dropdown2Vis, setDropdown2Vis] = React.useState<boolean>(false);
 
   const [loading, setLoading] = React.useState<boolean>(false);
 
-  const _handle_game_select = async (game_id: string) => {
+  const _handle_dropdowns = (dropdown: number) => {
+    setDropdown1Vis(false);
+    setDropdown2Vis(false);
+    if (dropdown == 1) {
+      setDropdown1Vis(!dropdown1Vis);
+    } else if (dropdown == 2) {
+      setDropdown2Vis(!dropdown2Vis);
+      document.querySelector("#dropdown2")?.scrollTo(0, 0);
+    }
+  }
+
+  const _handle_game_select = async (game_id: string, game_name: string) => {
     setLoading(true);
     const gameMaps = await API.get_game_maps(game_id);
     setSelectedGameMaps(gameMaps);
@@ -37,13 +59,15 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ open, onClose, mapID,
       ...uploadRunContent,
       map_id: gameMaps[0].id,
     });
+    _set_current_map(gameMaps[0].name);
     setSelectedGameID(parseInt(game_id) - 1);
+    setSelectedGameName(game_name);
     setLoading(false);
   };
 
   React.useEffect(() => {
     if (open) {
-    _handle_game_select("1"); // a different approach?.
+    _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?.
     }
   }, [open]);
 
@@ -54,25 +78,37 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ open, onClose, mapID,
         <div id='upload-run-menu'>
           <div id='upload-run-menu-add'>
             <div id='upload-run-route-category'>
-              <span>Select Game</span>
-              <select onChange={(e) => _handle_game_select(e.target.value)}>
-                {games.map((game) => (
-                  <option key={game.id} value={game.id}>{game.name}</option>
-                ))}
-              </select>
+              <div style={{padding: "15px 0px"}} className='upload-run-dropdown-container'>
+                <h1 style={{paddingBottom: "14px"}}>Select Game</h1>
+                <div onClick={() => _handle_dropdowns(1)} style={{display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between"}}>
+                  <div className='dropdown-cur'>{selectedGameName}</div>
+                  <i style={{rotate: "-90deg", transform: "translate(-5px, 10px)"}} className="triangle"></i>
+                </div>
+                <div className={dropdown1Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
+                  {games.map((game) => (
+                    <div onClick={() => {_handle_game_select(game.id.toString(), game.name); _handle_dropdowns(1)}} key={game.id}>{game.name}</div>
+                  ))}
+                </div>
+              </div>
               {
                 !loading &&
                 (
                   <>
-                    <span>Select Map</span>
-                    <select onChange={(e) => setUploadRunContent({
-                      ...uploadRunContent,
-                      map_id: parseInt(e.target.value),
-                    })}>
-                      {selectedGameMaps && selectedGameMaps.map((gameMap) => (
-                        <option key={gameMap.id} value={gameMap.id}>{gameMap.name}</option>
-                      ))}
-                    </select>
+                  <div className='upload-run-map-container' style={{paddingBottom: "10px"}}>
+                    <div style={{padding: "15px 0px"}}>
+                      <h1 style={{paddingBottom: "14px"}}>Select Map</h1>
+                      <div onClick={() => _handle_dropdowns(2)} style={{display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between"}}>
+                        <span style={{userSelect: "none"}}>{currentMap}</span>
+                        <i style={{rotate: "-90deg", transform: "translate(-5px, 10px)"}} className="triangle"></i>
+                      </div>
+                    </div>
+                    <div>
+                      <div id='dropdown2' className={dropdown2Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
+                        {selectedGameMaps && selectedGameMaps.map((gameMap) => (
+                          <div onClick={() => { setUploadRunContent({...uploadRunContent, map_id: parseInt(gameMap.name)}); _set_current_map(gameMap.name); _handle_dropdowns(2); }} key={gameMap.id}>{gameMap.name}</div>
+                        ))}
+                      </div>
+                    </div>
                     <span>Host Demo</span>
                     <input type="file" name="host_demo" id="host_demo" accept=".dem" />
                     {
@@ -84,8 +120,11 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ open, onClose, mapID,
                         </>
                       )
                     }
-                    <button onClick={() => onClose()}>Submit</button>
-                    <button onClick={() => onClose()}>Cancel</button>
+                    <div className='upload-run-buttons-container'>
+                      <button onClick={() => onClose()}>Submit</button>
+                      <button onClick={() => onClose()}>Cancel</button>
+                    </div>
+                  </div>
                   </>
                 )
               }
diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css
index 60f0a28..e85f206 100644
--- a/frontend/src/css/UploadRunDialog.css
+++ b/frontend/src/css/UploadRunDialog.css
@@ -8,13 +8,13 @@ div#upload-run{
     transform: translateY(-68%);
 }
 
-
 #upload-run-menu{
     position: absolute;
     left: calc(50% + 160px); top: 130px;
     transform: translateX(-50%);
     background-color: #2b2e46;
     z-index: 2; color: white;
+    font-family: BarlowSemicondensed-SemiBold;
 }
 
 #upload-run-menu-add,
@@ -23,16 +23,13 @@ div#upload-run{
     outline: 8px solid #2b2e46;
     border-radius: 20px;
     font-size: 40px;
-    display: grid;
-    grid-template-columns: 20% 20% 20% 20% 20%;
 }
 
 #upload-run-menu-add>div,
 #upload-run-menu-edit>div{
     display: grid;
-    margin: 20px;
-    width: 200px;
     font-size: 20px;
+    padding: 0px 15px;
 }
 
 #upload-run-block{
@@ -45,3 +42,74 @@ div#upload-run{
     z-index: 2;
     cursor: no-drop;
 }
+
+.upload-run-dropdown-container .dropdown-cur {
+    user-select: none;
+    cursor: pointer;
+}
+
+.upload-run-dropdown {
+    position: absolute;
+    user-select: none;
+    cursor: pointer;
+    z-index: 1000;
+    background-color: #222538;
+    border-radius: 10px;
+    overflow: hidden;
+    animation: dropdown-in 0.2s ease;
+    max-height: 300px;
+    overflow-y: scroll;
+    width: calc(100% - 30px);
+}
+
+.upload-run-dropdown div {
+    padding: 8px;
+}
+
+.upload-run-dropdown div:hover {
+    background-color: #414669;
+}
+
+.upload-run-dropdown.hidden {
+    display: none;
+}
+
+@keyframes dropdown-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+button, input {
+    background-color: #2b2e46;
+    border: none;
+    font-family: BarlowSemiCondensed-Regular;
+    color: #CDCFDF;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 5px 0px;
+    transition: all 0.2s ease;
+}
+
+button:hover {
+    background-color: #222538;
+    border-radius: 32px;
+}
+
+.upload-run-map-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.upload-run-buttons-container {
+    display: flex;
+    margin-top: 10px;
+}
+.upload-run-buttons-container button {
+    width: 100%;
+}
+