chore/frontend: semicolon linting (#287)

28 files changed, 211 insertions, 171 deletions

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e7f225c..6ed103e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -52,8 +52,8 @@ const App: React.FC = () => {
       setIsModerator(false);
     } else {
       setProfile({} as UserProfile); // placeholder before we call actual user profile
-      _set_profile(get_user_id_from_token(token))
-      const modStatus = get_user_mod_from_token(token)
+      _set_profile(get_user_id_from_token(token));
+      const modStatus = get_user_mod_from_token(token);
       if (modStatus) {
         setIsModerator(true);
       } else {
@@ -65,6 +65,46 @@ const App: React.FC = () => {
   React.useEffect(() => {
     _fetch_token();
     _fetch_games();
+    if (import.meta.env.DEV) {
+      setProfile({
+        profile: true,
+        steam_id: "76561234567890123",
+        user_name: "test",
+        avatar_link: "",
+        country_code: "XD",
+        titles: [],
+        links: {
+          "p2sr": "",
+          "steam": "",
+          "twitch": "",
+          "youtube": "",
+        },
+        rankings: {
+          "cooperative": {
+            "completion_count": 0,
+            "completion_total": 0,
+            "rank": 0,
+          },
+          "singleplayer": {
+            "completion_count": 0,
+            "completion_total": 0,
+            "rank": 0,
+          },
+          "overall": {
+            "completion_count": 0,
+            "completion_total": 0,
+            "rank": 0,
+          },
+        },
+        records: [],
+        pagination: {
+          "current_page": 0,
+          "page_size": 0,
+          "total_pages": 0,
+          "total_records": 0,
+        },
+      } as UserProfile);
+    };
   }, []);
 
   return (
diff --git a/frontend/src/api/Api.ts b/frontend/src/api/Api.ts
index 19ece86..dd5076a 100644
--- a/frontend/src/api/Api.ts
+++ b/frontend/src/api/Api.ts
@@ -51,7 +51,7 @@ export const API = {
 
 const BASE_API_URL: string = import.meta.env.DEV
   ? "https://lp.portal2.sr/api/v1/"
-  : "/api/v1/"
+  : "/api/v1/";
 
 export function url(path: string): string {
   return BASE_API_URL + path;
diff --git a/frontend/src/api/Auth.ts b/frontend/src/api/Auth.ts
index 56e0f6a..426bea5 100644
--- a/frontend/src/api/Auth.ts
+++ b/frontend/src/api/Auth.ts
@@ -2,7 +2,7 @@ import axios from "axios";
 import { url } from "@api/Api";
 
 export const get_token = async (): Promise<string | undefined> => {
-  const response = await axios.get(url("token"))
+  const response = await axios.get(url("token"));
   if (!response.data.success) {
     return undefined;
   }
diff --git a/frontend/src/api/Games.ts b/frontend/src/api/Games.ts
index 98c65e7..a66902d 100644
--- a/frontend/src/api/Games.ts
+++ b/frontend/src/api/Games.ts
@@ -6,14 +6,14 @@ import { Map } from "@customTypes/Map";
 import { Search } from "@customTypes/Search";
 
 export const get_games = async (): Promise<Game[]> => {
-  const response = await axios.get(url("games"))
+  const response = await axios.get(url("games"));
   return response.data.data;
 };
 
 export const get_chapters = async (chapter_id: string): Promise<GameChapter> => {
   const response = await axios.get(url(`chapters/${chapter_id}`));
   return response.data.data;
-}
+};
 
 export const get_games_chapters = async (game_id: string): Promise<GamesChapters> => {
   const response = await axios.get(url(`games/${game_id}`));
@@ -21,11 +21,11 @@ export const get_games_chapters = async (game_id: string): Promise<GamesChapters
 };
 
 export const get_game_maps = async (game_id: string): Promise<Map[]> => {
-  const response = await axios.get(url(`games/${game_id}/maps`))
+  const response = await axios.get(url(`games/${game_id}/maps`));
   return response.data.data.maps;
 };
 
 export const get_search = async (q: string): Promise<Search> => {
-  const response = await axios.get(url(`search?q=${q}`))
+  const response = await axios.get(url(`search?q=${q}`));
   return response.data.data;
 };
diff --git a/frontend/src/api/Maps.ts b/frontend/src/api/Maps.ts
index 8d29f84..7cbd70c 100644
--- a/frontend/src/api/Maps.ts
+++ b/frontend/src/api/Maps.ts
@@ -4,7 +4,7 @@ import { MapDiscussionContent, UploadRunContent } from "@customTypes/Content";
 import { MapSummary, MapLeaderboard, MapDiscussions, MapDiscussion } from "@customTypes/Map";
 
 export const get_map_summary = async (map_id: string): Promise<MapSummary> => {
-  const response = await axios.get(url(`maps/${map_id}/summary`))
+  const response = await axios.get(url(`maps/${map_id}/summary`));
   return response.data.data;
 };
 
@@ -94,7 +94,7 @@ export const post_record = async (token: string, run: UploadRunContent, map_id:
     });
     return [response.data.success, response.data.message];
   }
-}
+};
 
 export const delete_map_record = async (token: string, map_id: number, record_id: number): Promise<boolean> => {
   const response = await axios.delete(url(`maps/${map_id}/record/${record_id}`), {
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index d8784d2..dbfbc62 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import "@css/Dialog.css"
+import "@css/Dialog.css";
 
 interface ConfirmDialogProps {
     title: string;
@@ -25,7 +25,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = ({ title, subtitle, onConfir
         </div>
       </div>
     </div>
-  )
+  );
 };
 
 export default ConfirmDialog;
diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx
index 0c37355..51cf06a 100644
--- a/frontend/src/components/Discussions.tsx
+++ b/frontend/src/components/Discussions.tsx
@@ -4,7 +4,7 @@ import { MapDiscussion, MapDiscussions, MapDiscussionsDetail } from "@customType
 import { MapDiscussionContent } from "@customTypes/Content";
 import { time_ago } from "@utils/Time";
 import { API } from "@api/Api";
-import "@css/Maps.css"
+import "@css/Maps.css";
 import { Link } from "react-router-dom";
 import useConfirm from "@hooks/UseConfirm";
 
diff --git a/frontend/src/components/GameCategory.tsx b/frontend/src/components/GameCategory.tsx
index 0d76d3e..79bb3fa 100644
--- a/frontend/src/components/GameCategory.tsx
+++ b/frontend/src/components/GameCategory.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 import { Game, GameCategoryPortals } from "@customTypes/Game";
-import "@css/Games.css"
+import "@css/Games.css";
 
 interface GameCategoryProps {
     game: Game;
@@ -18,7 +18,7 @@ const GameCategory: React.FC<GameCategoryProps> = ({cat, game}) => {
         <span className='games-page-item-body-item-num'>{cat.portal_count}</span>
       </div>
     </Link>
-  )
-}
+  );
+};
 
 export default GameCategory;
diff --git a/frontend/src/components/GameEntry.tsx b/frontend/src/components/GameEntry.tsx
index 454efb1..deeb0ed 100644
--- a/frontend/src/components/GameEntry.tsx
+++ b/frontend/src/components/GameEntry.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 import { Game, GameCategoryPortals } from "@customTypes/Game";
-import "@css/Games.css"
+import "@css/Games.css";
 
 import GameCategory from "@components/GameCategory";
 
@@ -25,7 +25,7 @@ const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
       </div>
       <div id={game.id as any as string} className='games-page-item-body'>
         {catInfo.map((cat, index) => {
-          return <GameCategory cat={cat} game={game} key={index}></GameCategory>
+          return <GameCategory cat={cat} game={game} key={index}></GameCategory>;
         })}
       </div>
     </div></Link>
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index 1a4aa48..073c21b 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -6,7 +6,7 @@ import { MapLeaderboard } from "@customTypes/Map";
 import { ticks_to_time, time_ago } from "@utils/Time";
 import { API } from "@api/Api";
 import useMessage from "@hooks/UseMessage";
-import "@css/Maps.css"
+import "@css/Maps.css";
 
 interface LeaderboardsProps {
   mapID: string;
@@ -26,7 +26,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
 
   React.useEffect(() => {
     _fetch_map_leaderboards();
-  }, [pageNumber, navigate])
+  }, [pageNumber, navigate]);
 
   if (!data) {
     return (
@@ -103,14 +103,14 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
 
               {r.kind === "multiplayer" ? (
                 <span>
-                  <button onClick={() => { message("Demo Information", `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                  <button onClick={() => { message("Demo Information", `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`); }}><img src={ThreedotIcon} alt="demo_id" /></button>
                   <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.partner_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(160deg) contrast(60%) saturate(1000%)" }} /></button>
                   <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.host_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(300deg) contrast(60%) saturate(1000%)" }} /></button>
                 </span>
               ) : r.kind === "singleplayer" && (
 
                 <span>
-                  <button onClick={() => { message("Demo Information", `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>
               )}
diff --git a/frontend/src/components/MapEntry.tsx b/frontend/src/components/MapEntry.tsx
index 88137d8..5c58401 100644
--- a/frontend/src/components/MapEntry.tsx
+++ b/frontend/src/components/MapEntry.tsx
@@ -6,7 +6,7 @@ const MapEntry: React.FC = () => {
     <div>
 
     </div>
-  )
-}
+  );
+};
 
 export default MapEntry;
diff --git a/frontend/src/components/MessageDialog.tsx b/frontend/src/components/MessageDialog.tsx
index ae95f8d..e731c73 100644
--- a/frontend/src/components/MessageDialog.tsx
+++ b/frontend/src/components/MessageDialog.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import "@css/Dialog.css"
+import "@css/Dialog.css";
 
 interface MessageDialogProps {
     title: string;
@@ -23,7 +23,7 @@ const MessageDialog: React.FC<MessageDialogProps> = ({ title, subtitle, onClose
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default MessageDialog;
diff --git a/frontend/src/components/MessageDialogLoad.tsx b/frontend/src/components/MessageDialogLoad.tsx
index 000a2ab..b3726fb 100644
--- a/frontend/src/components/MessageDialogLoad.tsx
+++ b/frontend/src/components/MessageDialogLoad.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import "@css/Dialog.css"
+import "@css/Dialog.css";
 
 interface MessageDialogLoadProps {
     title: string;    
@@ -23,7 +23,7 @@ const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({ title, onClose })
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default MessageDialogLoad;
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx
index 19ce0ce..e7ef25c 100644
--- a/frontend/src/components/ModMenu.tsx
+++ b/frontend/src/components/ModMenu.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { MapSummary } from "@customTypes/Map";
 import { ModMenuContent } from "@customTypes/Content";
 import { API } from "@api/Api";
-import "@css/ModMenu.css"
+import "@css/ModMenu.css";
 import useConfirm from "@hooks/UseConfirm";
 
 interface ModMenuProps {
@@ -73,7 +73,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.")
+          alert("Error. Check logs.");
         }
       }
     }
@@ -87,7 +87,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.")
+          alert("Error. Check logs.");
         }
       }
     }
@@ -101,7 +101,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.")
+          alert("Error. Check logs.");
         }
       }
     }
@@ -115,7 +115,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.")
+          alert("Error. Check logs.");
         }
       }
     }
@@ -149,17 +149,17 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
   }, [menu]);
 
   React.useEffect(() => {
-    const modview = document.querySelector("div#modview") as HTMLElement
+    const modview = document.querySelector("div#modview") as HTMLElement;
     if (modview) {
       showButton ? modview.style.transform = "translateY(-68%)"
-        : modview.style.transform = "translateY(0%)"
+        : modview.style.transform = "translateY(0%)";
     }
 
-    const modview_block = document.querySelector("#modview_block") as HTMLElement
+    const modview_block = document.querySelector("#modview_block") as HTMLElement;
     if (modview_block) {
-      showButton ? modview_block.style.display = "none" : modview_block.style.display = "block"
+      showButton ? modview_block.style.display = "none" : modview_block.style.display = "block";
     }
-  }, [showButton])
+  }, [showButton]);
 
   return (
     <>
diff --git a/frontend/src/components/RankingEntry.tsx b/frontend/src/components/RankingEntry.tsx
index 9ad9e1c..8db753a 100644
--- a/frontend/src/components/RankingEntry.tsx
+++ b/frontend/src/components/RankingEntry.tsx
@@ -26,7 +26,7 @@ const RankingEntry: React.FC<RankingEntryProps> = (prop) => {
         </div>
         <span>{prop.curRankingData.total_score}</span>
       </div>
-    )
+    );
   } else {
     return (
       <div className='leaderboard-entry'>
@@ -39,8 +39,8 @@ const RankingEntry: React.FC<RankingEntryProps> = (prop) => {
         </div>
         <span>{prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_score : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_score : prop.curRankingData.overall_score}</span>
       </div>
-    )
+    );
   }
-}
+};
 
 export default RankingEntry;
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 0a7efa8..8e2573c 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -28,19 +28,19 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
 
   const handle_sidebar_click = (clicked_sidebar_idx: number) => {
     const btn = document.querySelectorAll("button.sidebar-button");
-    if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide() }
+    if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide(); }
     // clusterfuck
     btn.forEach((e, i) => {
-      btn[i].classList.remove("sidebar-button-selected")
-      btn[i].classList.add("sidebar-button-deselected")
-    })
-    btn[clicked_sidebar_idx].classList.add("sidebar-button-selected")
-    btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected")
+      btn[i].classList.remove("sidebar-button-selected");
+      btn[i].classList.add("sidebar-button-deselected");
+    });
+    btn[clicked_sidebar_idx].classList.add("sidebar-button-selected");
+    btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected");
   };
 
   const _handle_sidebar_hide = () => {
-    const btn = document.querySelectorAll("button.sidebar-button") as NodeListOf<HTMLElement>
-    const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf<HTMLElement>
+    const btn = document.querySelectorAll("button.sidebar-button") as NodeListOf<HTMLElement>;
+    const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf<HTMLElement>;
     const side = document.querySelector("#sidebar-list") as HTMLElement;
     const searchbar = document.querySelector("#searchbar") as HTMLInputElement;
     const uploadRunBtn = document.querySelector("#upload-run") as HTMLInputElement;
@@ -49,42 +49,42 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
     if (isSidebarOpen) {
       if (profile) {
         const login = document.querySelectorAll(".login>button")[1] as HTMLElement;
-        login.style.opacity = "1"
-        uploadRunBtn.style.width = "310px"
-        uploadRunBtn.style.padding = "0.4em 0 0 11px"
-        uploadRunSpan.style.opacity = "0"
+        login.style.opacity = "1";
+        uploadRunBtn.style.width = "310px";
+        uploadRunBtn.style.padding = "0.4em 0 0 11px";
+        uploadRunSpan.style.opacity = "0";
         setTimeout(() => {
-          uploadRunSpan.style.opacity = "1"
-        }, 100)
+          uploadRunSpan.style.opacity = "1";
+        }, 100);
       }
       setSidebarOpen(false);
-      side.style.width = "320px"
+      side.style.width = "320px";
       btn.forEach((e, i) => {
-        e.style.width = (window.innerWidth > 1024) ? "310px" : "265px"
-        e.style.padding = "0.4em 0 0 11px"
+        e.style.width = (window.innerWidth > 1024) ? "310px" : "265px";
+        e.style.padding = "0.4em 0 0 11px";
         setTimeout(() => {
-          span[i].style.opacity = "1"
-        }, 100)
+          span[i].style.opacity = "1";
+        }, 100);
       });
-      side.style.zIndex = "2"
+      side.style.zIndex = "2";
     } else {
       if (profile) {
         const login = document.querySelectorAll(".login>button")[1] as HTMLElement;
-        login.style.opacity = "0"
-        uploadRunBtn.style.width = "40px"
-        uploadRunBtn.style.padding = "0.4em 0 0 5px"
-        uploadRunSpan.style.opacity = "0"
+        login.style.opacity = "0";
+        uploadRunBtn.style.width = "40px";
+        uploadRunBtn.style.padding = "0.4em 0 0 5px";
+        uploadRunSpan.style.opacity = "0";
       }
       setSidebarOpen(true);
       side.style.width = "40px";
       searchbar.focus();
       btn.forEach((e, i) => {
-        e.style.width = "40px"
-        e.style.padding = "0.4em 0 0 5px"
-        span[i].style.opacity = "0"
-      })
+        e.style.width = "40px";
+        e.style.padding = "0.4em 0 0 5px";
+        span[i].style.opacity = "0";
+      });
       setTimeout(() => {
-        side.style.zIndex = "0"
+        side.style.zIndex = "0";
       }, 300);
     }
   };
@@ -94,7 +94,7 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
       setIsMobileSearchOpen(!isMobileSearchOpen);
     } else {
       if (!isSidebarLocked) {
-        _handle_sidebar_hide()
+        _handle_sidebar_hide();
         setIsSidebarLocked(true);
         setTimeout(() => setIsSidebarLocked(false), 300);
       }
@@ -124,14 +124,14 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
   };
 
   React.useEffect(() => {
-    if (path === "/") { handle_sidebar_click(1) }
-    else if (path.includes("games")) { handle_sidebar_click(2) }
-    else if (path.includes("rankings")) { handle_sidebar_click(3) }
+    if (path === "/") { handle_sidebar_click(1); }
+    else if (path.includes("games")) { handle_sidebar_click(2); }
+    else if (path.includes("rankings")) { handle_sidebar_click(3); }
     // else if (path.includes("news")) { handle_sidebar_click(4) }
     // else if (path.includes("scorelog")) { handle_sidebar_click(5) }
-    else if (path.includes("profile")) { handle_sidebar_click(4) }
-    else if (path.includes("rules")) { handle_sidebar_click(5) }
-    else if (path.includes("about")) { handle_sidebar_click(6) }
+    else if (path.includes("profile")) { handle_sidebar_click(4); }
+    else if (path.includes("rules")) { handle_sidebar_click(5); }
+    else if (path.includes("about")) { handle_sidebar_click(6); }
   }, [path]);
 
   return (
@@ -225,15 +225,15 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
               </Link>
             ))}
             {searchData?.players.map((q, index) =>
-            (
-              <Link to={
-                profile && q.steam_id === profile.steam_id ? "/profile" :
-                  `/users/${q.steam_id}`
-              } className='search-player' key={index} onClick={_close_mobile_search_and_menu}>
-                <img src={q.avatar_link} alt='pfp'></img>
-                <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
-              </Link>
-            ))}
+              (
+                <Link to={
+                  profile && q.steam_id === profile.steam_id ? "/profile" :
+                    `/users/${q.steam_id}`
+                } className='search-player' key={index} onClick={_close_mobile_search_and_menu}>
+                  <img src={q.avatar_link} alt='pfp'></img>
+                  <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
+                </Link>
+              ))}
 
           </div>
         </div>
diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 922960b..ee50ce8 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 
 import { MapSummary } from "@customTypes/Map";
-import "@css/Maps.css"
+import "@css/Maps.css";
 
 interface SummaryProps {
   selectedRun: number
@@ -18,11 +18,11 @@ const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data })
   function _select_run(idx: number, category_id: number) {
     const r = document.querySelectorAll("button.record");
     r.forEach(e => (e as HTMLElement).style.backgroundColor = "#2b2e46");
-    (r[idx] as HTMLElement).style.backgroundColor = "#161723"
+    (r[idx] as HTMLElement).style.backgroundColor = "#161723";
 
 
     if (data && data.summary.routes.length !== 0) {
-      idx += data.summary.routes.filter(e => e.category.id < category_id).length // lethimcook
+      idx += data.summary.routes.filter(e => e.category.id < category_id).length; // lethimcook
       setSelectedRun(idx);
     }
   };
@@ -34,7 +34,7 @@ const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data })
 
   function _category_change() {
     const btn = document.querySelectorAll("#section3 #category span button");
-    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46"; });
     // heavenly father forgive me for i have sinned. TODO: fix this bullshit with dynamic categories
     const idx = selectedCategory === 1 ? 0 : data.map.is_coop ? selectedCategory - 3 : selectedCategory - 1;
     (btn[idx] as HTMLElement).style.backgroundColor = "#202232";
@@ -42,7 +42,7 @@ const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data })
 
   function _history_change() {
     const btn = document.querySelectorAll("#section3 #history span button");
-    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46"; });
     (historySelected ? btn[1] as HTMLElement : btn[0] as HTMLElement).style.backgroundColor = "#202232";
   };
 
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index dd609a1..445fe7c 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -52,7 +52,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     } else {
       fileInputRefPartner.current?.click();
     }
-  }
+  };
 
   const _handle_drag_over = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
     e.preventDefault();
@@ -62,7 +62,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     } else {
       setDragHighlightPartner(true);
     }
-  }
+  };
 
   const _handle_drag_leave = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
     e.preventDefault();
@@ -72,7 +72,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     } else {
       setDragHighlightPartner(false);
     }
-  }
+  };
 
   const _handle_drop = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
     e.preventDefault();
@@ -80,7 +80,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     setDragHighlight(true);
 
     _handle_file_change(e.dataTransfer.files, host);
-  }
+  };
 
   const _handle_dropdowns = (dropdown: number) => {
     setDropdown1Vis(false);
@@ -91,7 +91,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
       setDropdown2Vis(!dropdown2Vis);
       document.querySelector("#dropdown2")?.scrollTo(0, 0);
     }
-  }
+  };
 
   const _handle_game_select = async (game_id: string, game_name: string) => {
     setLoading(true);
@@ -120,16 +120,16 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     if (token) {
       if (games[selectedGameID].is_coop) {
         if (uploadRunContent.host_demo === null) {
-          await message("Error", "You must select a host demo to upload.")
-          return
+          await message("Error", "You must select a host demo to upload.");
+          return;
         } else if (uploadRunContent.partner_demo === null) {
-          await message("Error", "You must select a partner demo to upload.")
-          return
+          await message("Error", "You must select a partner demo to upload.");
+          return;
         }
       } else {
         if (uploadRunContent.host_demo === null) {
-          await message("Error", "You must select a demo to upload.")
-          return
+          await message("Error", "You must select a demo to upload.");
+          return;
         }
       }
       const demo = SourceDemoParser.default()
@@ -137,24 +137,24 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
         .parse(await uploadRunContent.host_demo.arrayBuffer());
       const scoreboard = demo.findPacket<NetMessages.SvcUserMessage>((msg) => {
         return msg instanceof NetMessages.SvcUserMessage && msg.userMessage instanceof ScoreboardTempUpdate;
-      })
+      });
 
       if (!scoreboard) {
-        await message("Error", "Error while processing demo: Unable to get scoreboard result. Either there is a demo that is corrupt or haven't been recorded in challenge mode.")
-        return
+        await message("Error", "Error while processing demo: Unable to get scoreboard result. Either there is a demo that is corrupt or haven't been recorded in challenge mode.");
+        return;
       }
 
       if (!demo.mapName || !MapNames[demo.mapName]) {
-        await message("Error", "Error while processing demo: Invalid map name.")
-        return
+        await message("Error", "Error while processing demo: Invalid map name.");
+        return;
       }
 
       if (selectedGameID === 0 && MapNames[demo.mapName] > 60) {
-        await message("Error", "Error while processing demo: Invalid cooperative demo in singleplayer submission.")
-        return
+        await message("Error", "Error while processing demo: Invalid cooperative demo in singleplayer submission.");
+        return;
       } else if (selectedGameID === 1 && MapNames[demo.mapName] <= 60) {
-        await message("Error", "Error while processing demo: Invalid singleplayer demo in cooperative submission.")
-        return
+        await message("Error", "Error while processing demo: Invalid singleplayer demo in cooperative submission.");
+        return;
       }
 
       const { portalScore, timeScore } = scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {};
@@ -207,7 +207,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                 </div>
                 <div style={{ top: "110px" }} 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 onClick={() => { _handle_game_select(game.id.toString(), game.name); _handle_dropdowns(1); }} key={game.id}>{game.name}</div>
                   ))}
                 </div>
               </div>
@@ -219,7 +219,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
 
                     <div>
                       <h3 style={{ margin: "10px 0px" }}>Host Demo</h3>
-                      <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" : ""}`}>
+                      <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>
@@ -239,7 +239,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                           <>
                             <div>
                               <h3 style={{ margin: "10px 0px" }}>Partner Demo</h3>
-                              <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" : ""}`}>
+                              <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>
diff --git a/frontend/src/hooks/UseConfirm.tsx b/frontend/src/hooks/UseConfirm.tsx
index 593427e..a7e6bef 100644
--- a/frontend/src/hooks/UseConfirm.tsx
+++ b/frontend/src/hooks/UseConfirm.tsx
@@ -21,20 +21,20 @@ const useConfirm = () => {
     if (resolvePromise) {
       resolvePromise(true);
     }
-  }
+  };
 
   const handleCancel = () => {
     setIsOpen(false);
     if (resolvePromise) {
       resolvePromise(false);
     }
-  }
+  };
 
   const ConfirmDialogComponent = isOpen && (
     <ConfirmDialog title={title} subtitle={subtitle} onConfirm={handleConfirm} onCancel={handleCancel}></ConfirmDialog>
   );
 
   return { confirm, ConfirmDialogComponent };
-}
+};
 
 export default useConfirm;
diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx
index 22a5168..a75b688 100644
--- a/frontend/src/hooks/UseMessage.tsx
+++ b/frontend/src/hooks/UseMessage.tsx
@@ -32,6 +32,6 @@ const useMessage = () => {
   );
 
   return { message, MessageDialogComponent };
-}
+};
 
 export default useMessage;
diff --git a/frontend/src/hooks/UseMessageLoad.tsx b/frontend/src/hooks/UseMessageLoad.tsx
index eb42a45..332c2f5 100644
--- a/frontend/src/hooks/UseMessageLoad.tsx
+++ b/frontend/src/hooks/UseMessageLoad.tsx
@@ -30,6 +30,6 @@ const useMessageLoad = () => {
   );
 
   return { messageLoad, messageLoadClose, MessageDialogLoadComponent };
-}
+};
 
 export default useMessageLoad;
diff --git a/frontend/src/images/Images.tsx b/frontend/src/images/Images.tsx
index c4511ef..940e036 100644
--- a/frontend/src/images/Images.tsx
+++ b/frontend/src/images/Images.tsx
@@ -1,5 +1,5 @@
-import logo from "./png/logo.png"
-import login from "./png/login.png"
+import logo from "./png/logo.png";
+import login from "./png/login.png";
 import img1 from "./png/1.png";
 import img2 from "./png/2.png";
 import img3 from "./png/3.png";
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index 909ea20..f4b5463 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -3,7 +3,7 @@ import { Helmet } from "react-helmet";
 
 import GameEntry from "@components/GameEntry";
 import { Game } from "@customTypes/Game";
-import "@css/Maps.css"
+import "@css/Maps.css";
 
 interface GamesProps {
   games: Game[];
@@ -16,7 +16,7 @@ const Games: React.FC<GamesProps> = ({ games }) => {
     loaders.forEach((loader) => {
       (loader as HTMLElement).style.display = "none";
     });
-  }
+  };
 
   React.useEffect(() => {
     document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index bda24cd..dc655ca 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -34,7 +34,7 @@ const Maplist: React.FC = () => {
   const _fetch_chapters = async (chapter_id: string) => {
     const chapters = await API.get_chapters(chapter_id);
     setCurChapter(chapters);
-  }
+  };
 
   const _handle_dropdown_click = () => {
     if (dropdownActive == "none") {
@@ -42,7 +42,7 @@ const Maplist: React.FC = () => {
     } else {
       setDropdownActive("none");
     }
-  }
+  };
 
   // im sorry but im too lazy to fix this right now
   useEffect(() => {
@@ -73,7 +73,7 @@ const Maplist: React.FC = () => {
       const games_chapters = await API.get_games_chapters(gameId.toString());
       setGameChapters(games_chapters);
       setNumChapters(games_chapters.chapters.length);
-    }
+    };
 
     setLoad(true);
     _fetch_game();
@@ -85,7 +85,7 @@ const Maplist: React.FC = () => {
     if (gameChapters != undefined && !queryParams.get("chapter")) {
       _fetch_chapters(gameChapters!.chapters[0].id.toString());
     }
-  }, [gameChapters])
+  }, [gameChapters]);
 
 
 
@@ -124,7 +124,7 @@ const Maplist: React.FC = () => {
               </div>
               <div className="game-header-categories">
                 {game?.category_portals.map((cat, index) => (
-                  <button key={index} className={currentlySelected == cat.category.id || cat.category.id - 1 == catNum && !hasClicked ? "game-cat-button selected" : "game-cat-button"} onClick={() => { setCatNum(cat.category.id - 1); _update_currently_selected(cat.category.id) }}>
+                  <button key={index} className={currentlySelected == cat.category.id || cat.category.id - 1 == catNum && !hasClicked ? "game-cat-button selected" : "game-cat-button"} onClick={() => { setCatNum(cat.category.id - 1); _update_currently_selected(cat.category.id); }}>
                     <span>{cat.category.name}</span>
                   </button>
                 ))}
@@ -143,7 +143,7 @@ const Maplist: React.FC = () => {
               </div>
               <div className="dropdown-elements" style={{ display: dropdownActive }}>
                 {gameChapters?.chapters.map((chapter, i) => {
-                  return <div className="dropdown-element" onClick={() => { _fetch_chapters(chapter.id.toString()); _handle_dropdown_click() }}>{chapter.name}</div>
+                  return <div className="dropdown-element" onClick={() => { _fetch_chapters(chapter.id.toString()); _handle_dropdown_click(); }}>{chapter.name}</div>;
                 })
 
                 }
@@ -173,7 +173,7 @@ const Maplist: React.FC = () => {
                       </div>
                     </div>
                   </Link>
-                </div>
+                </div>;
               })}
             </section>
           </div>
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index e7b8325..8b8ce3e 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -28,8 +28,8 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
   const [pageNumber, setPageNumber] = React.useState(1);
   const [pageMax, setPageMax] = React.useState(0);
 
-  const [game, setGame] = React.useState("0")
-  const [chapter, setChapter] = React.useState("0")
+  const [game, setGame] = React.useState("0");
+  const [chapter, setChapter] = React.useState("0");
   const [chapterData, setChapterData] = React.useState<GameChapters | null>(null);
   const [maps, setMaps] = React.useState<Map[]>([]);
 
@@ -100,7 +100,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
     if (profile && game !== "0") {
       _get_game_maps();
     }
-  }, [profile, game, chapter, chapterData])
+  }, [profile, game, chapter, chapterData]);
 
   if (!profile) {
     return (
@@ -279,14 +279,14 @@ 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={() => { 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 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={() => {
                               (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
                                 (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
                                 (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${r.scores.length * 46}px` :
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px";
                             }
                             }><img src={HistoryIcon} alt="history" /></button> : ""}
 
@@ -325,14 +325,14 @@ 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={() => { 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={() => { 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={() => {
                                 (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
                                   (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
                                   (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${record!.scores.length * 46}px` :
-                                  (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                                  (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px";
                               }
                               }><img src={HistoryIcon} alt="history" /></button> : ""}
 
@@ -340,8 +340,8 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
                           </>))}
                         </button>
 
-                      )
-                    } else { return null }
+                      );
+                    } else { return null; }
                   }) : (<>{console.warn(maps)}</>)}
           </div>
         </section>
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 4a96e26..4693117 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -31,15 +31,15 @@ const Rankings: React.FC = () => {
     const rankings = await API.get_official_rankings();
     setLeaderboardData(rankings);
     if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
-      setCurrentLeaderboard(rankings.rankings_singleplayer)
+      setCurrentLeaderboard(rankings.rankings_singleplayer);
     } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-      setCurrentLeaderboard(rankings.rankings_multiplayer)
+      setCurrentLeaderboard(rankings.rankings_multiplayer);
     } else {
-      setCurrentLeaderboard(rankings.rankings_overall)
+      setCurrentLeaderboard(rankings.rankings_overall);
     }
     setLoad(true);
     setLeaderboardLoad(true);
-  }
+  };
 
   const __dev_fetch_unofficial_rankings = async () => {
     try {
@@ -47,17 +47,17 @@ const Rankings: React.FC = () => {
       const rankings = await API.get_unofficial_rankings();
       setLeaderboardData(rankings);
       if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
-        setCurrentLeaderboard(rankings.rankings_singleplayer)
+        setCurrentLeaderboard(rankings.rankings_singleplayer);
       } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-        setCurrentLeaderboard(rankings.rankings_multiplayer)
+        setCurrentLeaderboard(rankings.rankings_multiplayer);
       } else {
-        setCurrentLeaderboard(rankings.rankings_overall)
+        setCurrentLeaderboard(rankings.rankings_overall);
       }
       setLeaderboardLoad(true);
     } catch (e) {
-      console.log(e)
+      console.log(e);
     }
-  }
+  };
 
   const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
     if (ranking_cat == RankingCategories.rankings_singleplayer) {
@@ -69,7 +69,7 @@ const Rankings: React.FC = () => {
     }
 
     setCurrentLeaderboardType(ranking_cat);
-  }
+  };
 
   const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
     if (leaderboard_type == LeaderboardTypes.official) {
@@ -77,14 +77,14 @@ const Rankings: React.FC = () => {
     } else {
 
     }
-  }
+  };
 
   useEffect(() => {
     _fetch_rankings();
     if (load) {
       _set_current_leaderboard(RankingCategories.rankings_singleplayer);
     }
-  }, [load])
+  }, [load]);
 
   return (
     <main>
@@ -93,10 +93,10 @@ const Rankings: React.FC = () => {
       </Helmet>
       <section className="nav-container nav-1">
         <div>
-          <button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
+          <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(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
+          <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial); }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
             <span>Unofficial (Steam)</span>
           </button>
         </div>
@@ -127,7 +127,7 @@ const Rankings: React.FC = () => {
             <div className="splitter"></div>
 
             {leaderboardLoad && currentLeaderboard?.map((curRankingData, i) => {
-              return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
+              return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>;
             })
             }
 
@@ -140,7 +140,7 @@ const Rankings: React.FC = () => {
         </section>
         : null}
     </main>
-  )
-}
+  );
+};
 
 export default Rankings;
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index 33be1f0..236d5f9 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -83,7 +83,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
     if (user && game !== "0") {
       _get_game_maps();
     }
-  }, [user, game, chapter, location])
+  }, [user, game, chapter, location]);
 
   if (!user) {
     return (
@@ -248,13 +248,13 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                         <span>{e.date.split("T")[0]}</span>
                         <span style={{ flexDirection: "row-reverse" }}>
 
-                          <button onClick={() => { message("Demo Information", `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={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                           {i === 0 && r.scores.length > 1 ? <button onClick={() => {
                             (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
                               (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
                               (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${r.scores.length * 46}px` :
-                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px";
                           }
                           }><img src={HistoryIcon} alt="history" /></button> : ""}
 
@@ -293,13 +293,13 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                           <span>{record!.scores[i].date.split("T")[0]}</span>
                           <span style={{ flexDirection: "row-reverse" }}>
 
-                            <button onClick={() => { message("Demo Information", `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={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                             {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
                               (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
                                 (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
                                 (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${record!.scores.length * 46}px` :
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px";
                             }
                             }><img src={HistoryIcon} alt="history" /></button> : ""}
 
@@ -307,8 +307,8 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                         </>))}
                       </button>
 
-                    )
-                  } else { return null }
+                    );
+                  } else { return null; }
                 }) : (<>{console.warn(maps)}</>)}
         </div>
       </section>
diff --git a/frontend/src/utils/Time.ts b/frontend/src/utils/Time.ts
index 9844e0c..5e3d99b 100644
--- a/frontend/src/utils/Time.ts
+++ b/frontend/src/utils/Time.ts
@@ -30,11 +30,11 @@ export function time_ago(date: Date) {
 };
 
 export function ticks_to_time(ticks: number) {
-  let seconds = Math.floor(ticks / 60)
-  let minutes = Math.floor(seconds / 60)
-  const hours = Math.floor(minutes / 60)
+  let seconds = Math.floor(ticks / 60);
+  let minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
 
-  const milliseconds = Math.floor((ticks % 60) * 1000 / 60)
+  const milliseconds = Math.floor((ticks % 60) * 1000 / 60);
   seconds = seconds % 60;
   minutes = minutes % 60;