refactor: upload run dialog

1 files changed, 58 insertions, 19 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>
                   </>
                 )
               }