refactor: upload run dialog, useMessage update, added loader spinner

7 files changed, 108 insertions, 33 deletions

diff --git a/frontend/src/App.css b/frontend/src/App.css
index b0445d8..14a9972 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -56,6 +56,26 @@ body {
     }

 }

 

+.loader {

+    width: 48px;

+    height: 48px;

+    border: 5px solid #FFF;

+    border-bottom-color: transparent;

+    border-radius: 50%;

+    display: inline-block;

+    box-sizing: border-box;

+    animation: rotation 1s linear infinite;

+    }

+

+@keyframes rotation {

+    0% {

+        transform: rotate(0deg);

+    }

+    100% {

+        transform: rotate(360deg);

+    }

+}

+

 @font-face {

     font-family: 'BarlowCondensed-Bold';

     src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype');

@@ -74,4 +94,4 @@ body {
 @font-face {

     font-family: 'BarlowSemiCondensed-SemiBold';

     src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype');

-}
\ No newline at end of file
+}

diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index f86aa7b..b9e071c 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { DownloadIcon, ThreedotIcon } from '../images/Images';
 import { MapLeaderboard } from '../types/Map';
 import { ticks_to_time, time_ago } from '../utils/Time';
+import useMessage from "../hooks/UseMessage";
 import "../css/Maps.css"
 
 interface LeaderboardsProps {
@@ -12,6 +13,7 @@ interface LeaderboardsProps {
 
 const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
 
+  const { message, MessageDialogComponent } = useMessage();
   const [pageNumber, setPageNumber] = React.useState<number>(1);
 
   if (!data) {
@@ -31,6 +33,10 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
   };
 
   return (
+  <div>
+        <div style={{position: "absolute", width: "100%", height: "100%", top: "0px", left: "-350px"}}>
+        {MessageDialogComponent}
+        </div>
     <section id='section6' className='summary2'>
 
       <div id='leaderboard-top'
@@ -94,7 +100,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
             ) : r.kind === "singleplayer" && (
 
               <span>
-                <button onClick={() => { window.alert(`Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                <button onClick={() => { message("Demo information", `Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
                 <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
               </span>
             )}
@@ -102,6 +108,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
         ))}
       </div>
     </section>
+        </div>
   );
 };
 
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index a0d23e7..212a792 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -47,22 +47,36 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
   const [loading, setLoading] = React.useState<boolean>(false);
 
   const [dragHightlight, setDragHighlight] = React.useState<boolean>(false);
+  const [dragHightlightPartner, setDragHighlightPartner] = React.useState<boolean>(false);
   const fileInputRef = React.useRef<HTMLInputElement>(null);
-
-  const _handle_file_click = () => {
-        fileInputRef.current?.click();
+  const fileInputRefPartner = React.useRef<HTMLInputElement>(null);
+
+  const _handle_file_click = (host: boolean) => {
+        if (host) {
+          fileInputRef.current?.click();
+        } else {
+          fileInputRefPartner.current?.click();
+        }
   }
 
-  const _handle_drag_over = (e: React.DragEvent<HTMLDivElement>) => {
+  const _handle_drag_over = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
         e.preventDefault();
         e.stopPropagation();
-        setDragHighlight(true);
+        if (host) {
+                setDragHighlight(true);
+        } else {
+                setDragHighlightPartner(true);
+        }
   }
 
-  const _handle_drag_leave = (e: React.DragEvent<HTMLDivElement>) => {
+  const _handle_drag_leave = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
         e.preventDefault();
         e.stopPropagation();
-        setDragHighlight(false);
+        if (host) {
+                setDragHighlight(false);
+        } else {
+                setDragHighlightPartner(false);
+        }
   }
 
   const _handle_drop = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
@@ -70,8 +84,6 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
         e.stopPropagation();
         setDragHighlight(true);
 
-        console.log(e.dataTransfer.files);
-
         _handle_file_change(e.dataTransfer.files, host);
   }
 
@@ -102,7 +114,6 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
   };
 
   const _handle_file_change = async (files: FileList | null, host: boolean) => {
-  console.log(files);
     if (files) {
       if (host) {
         setUploadRunContent({
@@ -155,13 +166,16 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
 
       const [ success, response ] = await API.post_record(token, uploadRunContent);
       await message("Upload Record", response);
-      console.log("weweew")
       onClose(success);
+          navigate("/profile");
     }
   };
 
   React.useEffect(() => {
     if (open) {
+
+          setDragHighlightPartner(false);
+          setDragHighlight(false);
       _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?.
     }
   }, [open]);
@@ -208,14 +222,14 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                         </div>
                       </div>
                       <span>Host Demo</span>
-                                          <div onClick={_handle_file_click} onDragOver={(e) => {_handle_drag_over(e)}} onDrop={(e) => {_handle_drop(e, true)}} onDragLeave={(e) => {_handle_drag_leave(e)}} className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}>
+                                          <div onClick={() => {_handle_file_click(true)}} onDragOver={(e) => {_handle_drag_over(e, true)}} onDrop={(e) => {_handle_drop(e, true)}} onDragLeave={(e) => {_handle_drag_leave(e, true)}} className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}>
                         <input ref={fileInputRef} type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, true)} />
                                                 {!uploadRunContent.host_demo ? 
                                                 <div>
                                                 <span>Drag and drop</span>
                                                 <div>
-                                                        <span>Or click here</span>
-                                                        <button>Upload</button>
+                                                        <span style={{fontFamily: "BarlowSemiCondensed-Regular"}}>Or click here</span><br/>
+                                                        <button style={{borderRadius: "24px", padding: "5px 8px", margin: "5px 0px"}}>Upload</button>
                                                 </div>
                                                 </div>
                                                 : null}
@@ -227,7 +241,19 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                         (
                           <>
                             <span>Partner Demo</span>
-                            <input type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} />
+                                                        <div onClick={() => {_handle_file_click(false)}} onDragOver={(e) => {_handle_drag_over(e, false)}} onDrop={(e) => {_handle_drop(e, false)}} onDragLeave={(e) => {_handle_drag_leave(e, false)}} className={`upload-run-drag-area ${dragHightlightPartner ? "upload-run-drag-area-highlight-partner" : ""} ${uploadRunContent.partner_demo ? "upload-run-drag-area-hidden" : ""}`}>
+                            <input ref={fileInputRefPartner} type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} />                                              {!uploadRunContent.partner_demo ? 
+                                                        <div>
+                                                        <span>Drag and drop</span>
+                                                        <div>
+                                                                <span>Or click here</span><br/>
+                                                                <button>Upload</button>
+                                                        </div>
+                                                        </div>
+                                                        : null}
+
+                                                        <span>{uploadRunContent.partner_demo?.name}</span>
+                                                        </div>
                           </>
                         )
                       }
diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css
index c783d2a..737409e 100644
--- a/frontend/src/css/UploadRunDialog.css
+++ b/frontend/src/css/UploadRunDialog.css
@@ -23,6 +23,7 @@ div#upload-run{
     outline: 8px solid #2b2e46;
     border-radius: 20px;
     font-size: 40px;
+        width: 400px;
 }
 
 #upload-run-menu-add>div,
@@ -115,7 +116,7 @@ button:hover {
     width: 100%;
 }
 
-#host_demo {
+#host_demo, #partner_demo {
         background-color: rgba(0, 0, 0, 0);
         display: none;
 }
@@ -123,18 +124,19 @@ button:hover {
 .upload-run-drag-area {
         border: 2px dashed grey;
         border-radius: 10px;
-        height: 200px;
+        height: 150px;
         cursor: pointer;
-        width: 300px;
+        width: 360px;
         transition: all 0.2s ease;
         text-align: center;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        margin: 20px 0px;
 }
 
-.upload-run-drag-area-highlight {
+.upload-run-drag-area-highlight, .upload-run-drag-area-highlight-partner {
         border: 2px dashed white;
 }
 
diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx
index 602cf65..9bfb713 100644
--- a/frontend/src/hooks/UseMessage.tsx
+++ b/frontend/src/hooks/UseMessage.tsx
@@ -29,6 +29,10 @@ const useMessage = () => {
         <MessageDialog title={title} subtitle={subtitle} onClose={handleClose}></MessageDialog>
     );
 
+        const getDialogComponent = () => {
+                return MessageDialogComponent;
+        };
+
     return { message, MessageDialogComponent };
 }
 
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 5d1c75d..3dba3ae 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -103,10 +103,12 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
   };
 
   return (
-    <main>
-      {ConfirmDialogComponent}
-      {MessageDialogComponent}
-      <section id='section1' className='profile'>
+        <div>
+        {MessageDialogComponent}
+    {ConfirmDialogComponent}
+
+    <main>      
+        <section id='section1' className='profile'>
 
         {profile.profile
           ? (
@@ -266,7 +268,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
                         <span>{e.date.split("T")[0]}</span>
                         <span style={{ flexDirection: "row-reverse" }}>
 
-                          <button style={{ marginRight: "10px" }} onClick={() => { window.alert(`Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                          <button style={{ marginRight: "10px" }} onClick={() => { message("Demo information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
                           <button onClick={() => { _delete_submission(r.map_id, e.record_id) }}><img src={DeleteIcon}></img></button>
                           <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                           {i === 0 && r.scores.length > 1 ? <button onClick={() => {
@@ -312,7 +314,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
                           <span>{record!.scores[i].date.split("T")[0]}</span>
                           <span style={{ flexDirection: "row-reverse" }}>
 
-                            <button onClick={() => { window.alert(`Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                            <button onClick={() => { message("Demo information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
                             <button onClick={() => { _delete_submission(r.id, e.record_id) }}><img src={DeleteIcon}></img></button>
                             <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                             {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
@@ -333,6 +335,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
         </div>
       </section>
     </main>
+        </div>
   );
 };
 
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 9280b02..1830815 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -13,6 +13,9 @@ const Rankings: React.FC = () => {
         official,
         unofficial
     }
+        const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+
+        const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
 
     enum RankingCategories {
         rankings_overall,
@@ -23,6 +26,7 @@ const Rankings: React.FC = () => {
     const [load, setLoad] = React.useState<boolean>(false);
 
     const _fetch_rankings = async () => {
+                setLeaderboardLoad(false);
         const rankings = await API.get_official_rankings();
         setLeaderboardData(rankings);
         if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
@@ -33,10 +37,12 @@ const Rankings: React.FC = () => {
             setCurrentLeaderboard(rankings.rankings_overall)
         }
         setLoad(true);
+                setLeaderboardLoad(true);
     }
 
     const __dev_fetch_unofficial_rankings = async () => {
         try {
+                        setLeaderboardLoad(false);
             const rankings = await API.get_unofficial_rankings();
             setLeaderboardData(rankings);
             if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
@@ -47,6 +53,7 @@ const Rankings: React.FC = () => {
             } else {
                 setCurrentLeaderboard(rankings.rankings_overall)
             }
+                        setLeaderboardLoad(true);
         } catch (e) {
             console.log(e)
         }
@@ -83,23 +90,23 @@ const Rankings: React.FC = () => {
         <main>
             <section className="nav-container nav-1">
                 <div>
-                    <button onClick={() => _fetch_rankings()} className="nav-1-btn">
+                    <button onClick={() => {_fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official)}} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
                         <span>Official (LPHUB)</span>
                     </button>
-                    <button onClick={() => __dev_fetch_unofficial_rankings()} className="nav-1-btn">
+                    <button onClick={() => {__dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial)}} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
                         <span>Unofficial (Steam)</span>
                     </button>
                 </div>
             </section>
             <section className="nav-container nav-2">
                 <div>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className="nav-2-btn">
+                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
                         <span>Singleplayer</span>
                     </button>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className="nav-2-btn">
+                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
                         <span>Cooperative</span>
                     </button>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className="nav-2-btn">
+                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
                         <span>Overall</span>
                     </button>
                 </div>
@@ -116,10 +123,16 @@ const Rankings: React.FC = () => {
 
                         <div className="splitter"></div>
 
-                        {currentLeaderboard?.map((curRankingData, i) => {
+                        {leaderboardLoad && currentLeaderboard?.map((curRankingData, i) => {
                             return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
                         })
                         }
+
+                                                {leaderboardLoad ? null :
+                                                        <div style={{display: "flex", justifyContent: "center", margin: "30px 0px"}}>
+                                                        <span className="loader"></span>
+                                                        </div>
+                                                }
                     </div>
                 </section>
                 : null}