14 files changed, 279 insertions, 279 deletions

diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 925118d..c89d9ea 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 
-import '@css/Dialog.css';
+import "@css/Dialog.css";
 
 interface ConfirmDialogProps {
   title: string;
diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx
index 994cd8e..7aa8901 100644
--- a/frontend/src/components/Discussions.tsx
+++ b/frontend/src/components/Discussions.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
+import React from "react";
 
 import {
   MapDiscussion,
   MapDiscussions,
   MapDiscussionsDetail,
-} from '@customTypes/Map';
-import { MapDiscussionContent } from '@customTypes/Content';
-import { time_ago } from '@utils/Time';
-import { API } from '@api/Api';
-import '@css/Maps.css';
-import { Link } from 'react-router-dom';
-import useConfirm from '@hooks/UseConfirm';
+} from "@customTypes/Map";
+import { MapDiscussionContent } from "@customTypes/Content";
+import { time_ago } from "@utils/Time";
+import { API } from "@api/Api";
+import "@css/Maps.css";
+import { Link } from "react-router-dom";
+import useConfirm from "@hooks/UseConfirm";
 
 interface DiscussionsProps {
   token?: string;
@@ -32,17 +32,17 @@ const Discussions: React.FC<DiscussionsProps> = ({
   const [discussionThread, setDiscussionThread] = React.useState<
     MapDiscussion | undefined
   >(undefined);
-  const [discussionSearch, setDiscussionSearch] = React.useState<string>('');
+  const [discussionSearch, setDiscussionSearch] = React.useState<string>("");
 
   const [createDiscussion, setCreateDiscussion] =
     React.useState<boolean>(false);
   const [createDiscussionContent, setCreateDiscussionContent] =
     React.useState<MapDiscussionContent>({
-      title: '',
-      content: '',
+      title: "",
+      content: "",
     });
   const [createDiscussionCommentContent, setCreateDiscussionCommentContent] =
-    React.useState<string>('');
+    React.useState<string>("");
 
   const _open_map_discussion = async (discussion_id: number) => {
     const mapDiscussion = await API.get_map_discussion(mapID, discussion_id);
@@ -72,7 +72,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
   const _delete_map_discussion = async (discussion: MapDiscussionsDetail) => {
     if (
       await confirm(
-        'Delete Map Discussion',
+        "Delete Map Discussion",
         `Are you sure you want to remove post: ${discussion.title}?`
       )
     ) {
@@ -90,7 +90,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
         <input
           type="text"
           value={discussionSearch}
-          placeholder={'Search for posts...'}
+          placeholder={"Search for posts..."}
           onChange={e => setDiscussionSearch(e.target.value)}
         />
         <div>
@@ -104,7 +104,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
           <div id="discussion-create">
             <span>Create Post</span>
             <button onClick={() => setCreateDiscussion(false)}>X</button>
-            <div style={{ gridColumn: '1 / span 2' }}>
+            <div style={{ gridColumn: "1 / span 2" }}>
               <input
                 id="discussion-create-title"
                 placeholder="Title..."
@@ -126,7 +126,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
                 }
               />
             </div>
-            <div style={{ placeItems: 'end', gridColumn: '1 / span 2' }}>
+            <div style={{ placeItems: "end", gridColumn: "1 / span 2" }}>
               <button
                 id="discussion-create-button"
                 onClick={() => _create_map_discussion()}
@@ -157,8 +157,8 @@ const Discussions: React.FC<DiscussionsProps> = ({
                   {time_ago(
                     new Date(
                       discussionThread.discussion.created_at
-                        .replace('T', ' ')
-                        .replace('Z', '')
+                        .replace("T", " ")
+                        .replace("Z", "")
                     )
                   )}
                 </span>
@@ -180,7 +180,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
                           <span>
                             {time_ago(
                               new Date(
-                                e.date.replace('T', ' ').replace('Z', '')
+                                e.date.replace("T", " ").replace("Z", "")
                               )
                             )}
                           </span>
@@ -188,15 +188,15 @@ const Discussions: React.FC<DiscussionsProps> = ({
                         </div>
                       </>
                     ))
-                : ''}
+                : ""}
             </div>
             <div id="discussion-send">
               <input
                 type="text"
                 value={createDiscussionCommentContent}
-                placeholder={'Message'}
+                placeholder={"Message"}
                 onKeyDown={e =>
-                  e.key === 'Enter' &&
+                  e.key === "Enter" &&
                   _create_map_discussion_comment(discussionThread.discussion.id)
                 }
                 onChange={e =>
@@ -206,11 +206,11 @@ const Discussions: React.FC<DiscussionsProps> = ({
               <div>
                 <button
                   onClick={() => {
-                    if (createDiscussionCommentContent !== '') {
+                    if (createDiscussionCommentContent !== "") {
                       _create_map_discussion_comment(
                         discussionThread.discussion.id
                       );
-                      setCreateDiscussionCommentContent('');
+                      setCreateDiscussionCommentContent("");
                     }
                   }}
                 >
@@ -248,10 +248,10 @@ const Discussions: React.FC<DiscussionsProps> = ({
                       <b>{e.creator.user_name}:</b> {e.content}
                     </span>
                     <span>
-                      Last Updated:{' '}
+                      Last Updated:{" "}
                       {time_ago(
                         new Date(
-                          e.updated_at.replace('T', ' ').replace('Z', '')
+                          e.updated_at.replace("T", " ").replace("Z", "")
                         )
                       )}
                     </span>
@@ -260,7 +260,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
               ))}
           </>
         ) : (
-          <span style={{ textAlign: 'center', display: 'block' }}>
+          <span style={{ textAlign: "center", display: "block" }}>
             No Discussions...
           </span>
         )
diff --git a/frontend/src/components/GameCategory.tsx b/frontend/src/components/GameCategory.tsx
index b13be48..2bb6d42 100644
--- a/frontend/src/components/GameCategory.tsx
+++ b/frontend/src/components/GameCategory.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
 
-import { Game, GameCategoryPortals } from '@customTypes/Game';
-import '@css/Games.css';
+import { Game, GameCategoryPortals } from "@customTypes/Game";
+import "@css/Games.css";
 
 interface GameCategoryProps {
   game: Game;
@@ -13,7 +13,7 @@ const GameCategory: React.FC<GameCategoryProps> = ({ cat, game }) => {
   return (
     <Link
       className="games-page-item-body-item"
-      to={'/games/' + game.id + '?cat=' + cat.category.id}
+      to={"/games/" + game.id + "?cat=" + cat.category.id}
     >
       <div>
         <span className="games-page-item-body-item-title">
diff --git a/frontend/src/components/GameEntry.tsx b/frontend/src/components/GameEntry.tsx
index b58bbdd..04c3483 100644
--- a/frontend/src/components/GameEntry.tsx
+++ b/frontend/src/components/GameEntry.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
 
-import { Game, GameCategoryPortals } from '@customTypes/Game';
-import '@css/Games.css';
+import { Game, GameCategoryPortals } from "@customTypes/Game";
+import "@css/Games.css";
 
-import GameCategory from '@components/GameCategory';
+import GameCategory from "@components/GameCategory";
 
 interface GameEntryProps {
   game: Game;
@@ -18,7 +18,7 @@ const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
   }, [game.category_portals]);
 
   return (
-    <Link to={'/games/' + game.id}>
+    <Link to={"/games/" + game.id}>
       <div className="games-page-item">
         <div className="games-page-item-header">
           <div
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index 801f331..b388aba 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,12 +1,12 @@
-import React, { useCallback } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import React, { useCallback } from "react";
+import { Link, useNavigate } from "react-router-dom";
 
-import { DownloadIcon, ThreedotIcon } from '@images/Images';
-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 { DownloadIcon, ThreedotIcon } from "@images/Images";
+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";
 
 interface LeaderboardsProps {
   mapID: string;
@@ -35,7 +35,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
   if (!data) {
     return (
       <section id="section6" className="summary2">
-        <h1 style={{ textAlign: 'center' }}>
+        <h1 style={{ textAlign: "center" }}>
           Map is not available for competitive boards.
         </h1>
       </section>
@@ -45,7 +45,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
   if (data.records.length === 0) {
     return (
       <section id="section6" className="summary2">
-        <h1 style={{ textAlign: 'center' }}>No records found.</h1>
+        <h1 style={{ textAlign: "center" }}>No records found.</h1>
       </section>
     );
   }
@@ -58,8 +58,8 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
           id="leaderboard-top"
           style={
             data.map.is_coop
-              ? { gridTemplateColumns: '7.5% 40% 7.5% 15% 15% 15%' }
-              : { gridTemplateColumns: '7.5% 30% 10% 20% 17.5% 15%' }
+              ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" }
+              : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }
           }
         >
           <span>Place</span>
@@ -87,8 +87,8 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
               >
                 <i
                   className="triangle"
-                  style={{ position: 'relative', left: '-5px' }}
-                ></i>{' '}
+                  style={{ position: "relative", left: "-5px" }}
+                ></i>{" "}
               </button>
               <span>
                 {data.pagination.current_page}/{data.pagination.total_pages}
@@ -103,11 +103,11 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
                 <i
                   className="triangle"
                   style={{
-                    position: 'relative',
-                    left: '5px',
-                    transform: 'rotate(180deg)',
+                    position: "relative",
+                    left: "5px",
+                    transform: "rotate(180deg)",
                   }}
-                ></i>{' '}
+                ></i>{" "}
               </button>
             </div>
           </div>
@@ -120,33 +120,33 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
               key={index}
               style={
                 data.map.is_coop
-                  ? { gridTemplateColumns: '3% 4.5% 40% 4% 3.5% 15% 15% 14.5%' }
-                  : { gridTemplateColumns: '3% 4.5% 30% 4% 6% 20% 17% 15%' }
+                  ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" }
+                  : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" }
               }
             >
               <span>{r.placement}</span>
               <span> </span>
-              {r.kind === 'multiplayer' ? (
+              {r.kind === "multiplayer" ? (
                 <div>
                   <Link to={`/users/${r.host.steam_id}`}>
                     <span>
-                      <img src={r.host.avatar_link} alt="" /> &nbsp;{' '}
+                      <img src={r.host.avatar_link} alt="" /> &nbsp;{" "}
                       {r.host.user_name}
                     </span>
                   </Link>
                   <Link to={`/users/${r.partner.steam_id}`}>
                     <span>
-                      <img src={r.partner.avatar_link} alt="" /> &nbsp;{' '}
+                      <img src={r.partner.avatar_link} alt="" /> &nbsp;{" "}
                       {r.partner.user_name}
                     </span>
                   </Link>
                 </div>
               ) : (
-                r.kind === 'singleplayer' && (
+                r.kind === "singleplayer" && (
                   <div>
                     <Link to={`/users/${r.user.steam_id}`}>
                       <span>
-                        <img src={r.user.avatar_link} alt="" /> &nbsp;{' '}
+                        <img src={r.user.avatar_link} alt="" /> &nbsp;{" "}
                         {r.user.user_name}
                       </span>
                     </Link>
@@ -158,25 +158,25 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
               <span> </span>
               <span
                 className="hover-popup"
-                popup-text={r.score_time + ' ticks'}
+                popup-text={r.score_time + " ticks"}
               >
                 {ticks_to_time(r.score_time)}
               </span>
               <span
                 className="hover-popup"
-                popup-text={r.record_date.replace('T', ' ').split('.')[0]}
+                popup-text={r.record_date.replace("T", " ").split(".")[0]}
               >
                 {time_ago(
-                  new Date(r.record_date.replace('T', ' ').replace('Z', ''))
+                  new Date(r.record_date.replace("T", " ").replace("Z", ""))
                 )}
               </span>
 
-              {r.kind === 'multiplayer' ? (
+              {r.kind === "multiplayer" ? (
                 <span>
                   <button
                     onClick={() => {
                       message(
-                        'Demo Information',
+                        "Demo Information",
                         `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`
                       );
                     }}
@@ -193,7 +193,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
                       alt="download"
                       style={{
                         filter:
-                          'hue-rotate(160deg) contrast(60%) saturate(1000%)',
+                          "hue-rotate(160deg) contrast(60%) saturate(1000%)",
                       }}
                     />
                   </button>
@@ -207,17 +207,17 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
                       alt="download"
                       style={{
                         filter:
-                          'hue-rotate(300deg) contrast(60%) saturate(1000%)',
+                          "hue-rotate(300deg) contrast(60%) saturate(1000%)",
                       }}
                     />
                   </button>
                 </span>
               ) : (
-                r.kind === 'singleplayer' && (
+                r.kind === "singleplayer" && (
                   <span>
                     <button
                       onClick={() => {
-                        message('Demo Information', `Demo ID: ${r.demo_id}`);
+                        message("Demo Information", `Demo ID: ${r.demo_id}`);
                       }}
                     >
                       <img src={ThreedotIcon} alt="demo_id" />
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index 093e406..1858c48 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
 
-import { ExitIcon, UserIcon, LoginIcon } from '@images/Images';
-import { UserProfile } from '@customTypes/Profile';
-import { API } from '@api/Api';
-import '@css/Login.css';
+import { ExitIcon, UserIcon, LoginIcon } from "@images/Images";
+import { UserProfile } from "@customTypes/Profile";
+import { API } from "@api/Api";
+import "@css/Login.css";
 
 interface LoginProps {
   setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -16,14 +16,14 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
   const navigate = useNavigate();
 
   const _login = () => {
-    window.location.href = '/api/v1/login';
+    window.location.href = "/api/v1/login";
   };
 
   const _logout = () => {
     setProfile(undefined);
     setToken(undefined);
     API.delete_token();
-    navigate('/');
+    navigate("/");
   };
 
   return (
diff --git a/frontend/src/components/MapEntry.tsx b/frontend/src/components/MapEntry.tsx
index f1dee5b..985e806 100644
--- a/frontend/src/components/MapEntry.tsx
+++ b/frontend/src/components/MapEntry.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
 
 const MapEntry: React.FC = () => {
   return <div></div>;
diff --git a/frontend/src/components/MessageDialog.tsx b/frontend/src/components/MessageDialog.tsx
index b739ebc..fcf4d8d 100644
--- a/frontend/src/components/MessageDialog.tsx
+++ b/frontend/src/components/MessageDialog.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 
-import '@css/Dialog.css';
+import "@css/Dialog.css";
 
 interface MessageDialogProps {
   title: string;
diff --git a/frontend/src/components/MessageDialogLoad.tsx b/frontend/src/components/MessageDialogLoad.tsx
index acea27d..64cdd29 100644
--- a/frontend/src/components/MessageDialogLoad.tsx
+++ b/frontend/src/components/MessageDialogLoad.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 
-import '@css/Dialog.css';
+import "@css/Dialog.css";
 
 interface MessageDialogLoadProps {
   title: string;
@@ -18,7 +18,7 @@ const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({
           <span>{title}</span>
         </div>
         <div className="dialog-element dialog-description">
-          <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <div style={{ display: "flex", justifyContent: "center" }}>
             <span className="loader"></span>
           </div>
         </div>
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx
index 140d6a3..618d1a7 100644
--- a/frontend/src/components/ModMenu.tsx
+++ b/frontend/src/components/ModMenu.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import { useNavigate } from 'react-router-dom';
+import React from "react";
+import ReactMarkdown from "react-markdown";
+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 useConfirm from '@hooks/UseConfirm';
+import { MapSummary } from "@customTypes/Map";
+import { ModMenuContent } from "@customTypes/Content";
+import { API } from "@api/Api";
+import "@css/ModMenu.css";
+import useConfirm from "@hooks/UseConfirm";
 
 interface ModMenuProps {
   token?: string;
@@ -28,16 +28,16 @@ const ModMenu: React.FC<ModMenuProps> = ({
 
   const [routeContent, setRouteContent] = React.useState<ModMenuContent>({
     id: 0,
-    name: '',
+    name: "",
     score: 0,
-    date: '',
-    showcase: '',
-    description: 'No description available.',
+    date: "",
+    showcase: "",
+    description: "No description available.",
     category_id: 1,
   });
 
-  const [image, setImage] = React.useState<string>('');
-  const [md, setMd] = React.useState<string>('');
+  const [image, setImage] = React.useState<string>("");
+  const [md, setMd] = React.useState<string>("");
 
   const navigate = useNavigate();
 
@@ -47,7 +47,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
     return new Promise(resolve => {
       reader.onload = () => {
         const img = new Image();
-        if (typeof reader.result === 'string') {
+        if (typeof reader.result === "string") {
           img.src = reader.result;
           img.onload = () => {
             let { width, height } = img;
@@ -59,10 +59,10 @@ const ModMenu: React.FC<ModMenuProps> = ({
               width *= 320 / height;
               height = 320;
             }
-            const canvas = document.createElement('canvas');
+            const canvas = document.createElement("canvas");
             canvas.width = width;
             canvas.height = height;
-            canvas.getContext('2d')!.drawImage(img, 0, 0, width, height);
+            canvas.getContext("2d")!.drawImage(img, 0, 0, width, height);
             resolve(canvas.toDataURL(file.type, 0.6));
           };
         }
@@ -73,8 +73,8 @@ const ModMenu: React.FC<ModMenuProps> = ({
   const _edit_map_summary_image = async () => {
     if (
       await confirm(
-        'Edit Map Summary Image',
-        'Are you sure you want to submit this to the database?'
+        "Edit Map Summary Image",
+        "Are you sure you want to submit this to the database?"
       )
     ) {
       if (token) {
@@ -82,7 +82,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
         if (success) {
           navigate(0);
         } else {
-          alert('Error. Check logs.');
+          alert("Error. Check logs.");
         }
       }
     }
@@ -91,17 +91,17 @@ const ModMenu: React.FC<ModMenuProps> = ({
   const _edit_map_summary_route = async () => {
     if (
       await confirm(
-        'Edit Map Summary Route',
-        'Are you sure you want to submit this to the database?'
+        "Edit Map Summary Route",
+        "Are you sure you want to submit this to the database?"
       )
     ) {
       if (token) {
-        routeContent.date += 'T00:00:00Z';
+        routeContent.date += "T00:00:00Z";
         const success = await API.put_map_summary(token, mapID, routeContent);
         if (success) {
           navigate(0);
         } else {
-          alert('Error. Check logs.');
+          alert("Error. Check logs.");
         }
       }
     }
@@ -110,17 +110,17 @@ const ModMenu: React.FC<ModMenuProps> = ({
   const _create_map_summary_route = async () => {
     if (
       await confirm(
-        'Create Map Summary Route',
-        'Are you sure you want to submit this to the database?'
+        "Create Map Summary Route",
+        "Are you sure you want to submit this to the database?"
       )
     ) {
       if (token) {
-        routeContent.date += 'T00:00:00Z';
+        routeContent.date += "T00:00:00Z";
         const success = await API.post_map_summary(token, mapID, routeContent);
         if (success) {
           navigate(0);
         } else {
-          alert('Error. Check logs.');
+          alert("Error. Check logs.");
         }
       }
     }
@@ -129,7 +129,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
   const _delete_map_summary_route = async () => {
     if (
       await confirm(
-        'Delete Map Summary Route',
+        "Delete Map Summary Route",
         `Are you sure you want to submit this to the database?\n
       ${data.summary.routes[selectedRun].category.name}\n${data.summary.routes[selectedRun].history.score_count} portals\n${data.summary.routes[selectedRun].history.runner_name}`
       )
@@ -143,7 +143,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
         if (success) {
           navigate(0);
         } else {
-          alert('Error. Check logs.');
+          alert("Error. Check logs.");
         }
       }
     }
@@ -154,14 +154,14 @@ const ModMenu: React.FC<ModMenuProps> = ({
       // add route
       setRouteContent({
         id: 0,
-        name: '',
+        name: "",
         score: 0,
-        date: '',
-        showcase: '',
-        description: 'No description available.',
+        date: "",
+        showcase: "",
+        description: "No description available.",
         category_id: 1,
       });
-      setMd('No description available.');
+      setMd("No description available.");
     }
     if (menu === 2) {
       // edit route
@@ -169,7 +169,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
         id: data.summary.routes[selectedRun].route_id,
         name: data.summary.routes[selectedRun].history.runner_name,
         score: data.summary.routes[selectedRun].history.score_count,
-        date: data.summary.routes[selectedRun].history.date.split('T')[0],
+        date: data.summary.routes[selectedRun].history.date.split("T")[0],
         showcase: data.summary.routes[selectedRun].showcase,
         description: data.summary.routes[selectedRun].description,
         category_id: data.summary.routes[selectedRun].category.id,
@@ -179,20 +179,20 @@ const ModMenu: React.FC<ModMenuProps> = ({
   }, [menu, data.summary.routes, selectedRun]);
 
   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(-68%)")
+        : (modview.style.transform = "translateY(0%)");
     }
 
     const modview_block = document.querySelector(
-      '#modview_block'
+      "#modview_block"
     ) as HTMLElement;
     if (modview_block) {
       showButton
-        ? (modview_block.style.display = 'none')
-        : (modview_block.style.display = 'block');
+        ? (modview_block.style.display = "none")
+        : (modview_block.style.display = "block");
     }
   }, [showButton]);
 
@@ -322,7 +322,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
               </div>
               <div
                 id="modview-route-description"
-                style={{ height: '180px', gridColumn: '1 / span 5' }}
+                style={{ height: "180px", gridColumn: "1 / span 5" }}
               >
                 <span>Description:</span>
                 <textarea
@@ -337,7 +337,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 />
               </div>
               <button
-                style={{ gridColumn: '2 / span 3', height: '40px' }}
+                style={{ gridColumn: "2 / span 3", height: "40px" }}
                 onClick={_edit_map_summary_route}
               >
                 Apply
@@ -391,8 +391,8 @@ const ModMenu: React.FC<ModMenuProps> = ({
                   <option value="2" key="2">
                     No SLA
                   </option>
-                  {data.map.game_name === 'Portal 2 - Cooperative' ? (
-                    ''
+                  {data.map.game_name === "Portal 2 - Cooperative" ? (
+                    ""
                   ) : (
                     <option value="3" key="3">
                       Inbounds SLA
@@ -457,7 +457,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
               </div>
               <div
                 id="modview-route-description"
-                style={{ height: '180px', gridColumn: '1 / span 5' }}
+                style={{ height: "180px", gridColumn: "1 / span 5" }}
               >
                 <span>Description:</span>
                 <textarea
@@ -472,7 +472,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 />
               </div>
               <button
-                style={{ gridColumn: '2 / span 3', height: '40px' }}
+                style={{ gridColumn: "2 / span 3", height: "40px" }}
                 onClick={_create_map_summary_route}
               >
                 Apply
diff --git a/frontend/src/components/RankingEntry.tsx b/frontend/src/components/RankingEntry.tsx
index f45ca35..f28eabf 100644
--- a/frontend/src/components/RankingEntry.tsx
+++ b/frontend/src/components/RankingEntry.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { RankingType, SteamRankingType } from '@customTypes/Ranking';
+import React from "react";
+import { Link } from "react-router-dom";
+import { RankingType, SteamRankingType } from "@customTypes/Ranking";
 
 enum RankingCategories {
   rankings_overall,
@@ -14,7 +14,7 @@ interface RankingEntryProps {
 }
 
 const RankingEntry: React.FC<RankingEntryProps> = prop => {
-  if ('placement' in prop.curRankingData) {
+  if ("placement" in prop.curRankingData) {
     return (
       <div className="leaderboard-entry">
         <span>{prop.curRankingData.placement}</span>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 8216cff..b55d56b 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import React, { useCallback } from "react";
+import { Link, useLocation } from "react-router-dom";
 
 import {
   BookIcon,
@@ -10,12 +10,12 @@ import {
   PortalIcon,
   SearchIcon,
   UploadIcon,
-} from '@images/Images';
-import Login from '@components/Login';
-import { UserProfile } from '@customTypes/Profile';
-import { Search } from '@customTypes/Search';
-import { API } from '@api/Api';
-import '@css/Sidebar.css';
+} from "@images/Images";
+import Login from "@components/Login";
+import { UserProfile } from "@customTypes/Profile";
+import { Search } from "@customTypes/Search";
+import { API } from "@api/Api";
+import "@css/Sidebar.css";
 
 interface SidebarProps {
   setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -41,81 +41,81 @@ const Sidebar: React.FC<SidebarProps> = ({
 
   const _handle_sidebar_hide = useCallback(() => {
     var btn = document.querySelectorAll(
-      'button.sidebar-button'
+      "button.sidebar-button"
     ) as NodeListOf<HTMLElement>;
     const span = document.querySelectorAll(
-      'button.sidebar-button>span'
+      "button.sidebar-button>span"
     ) as NodeListOf<HTMLElement>;
-    const side = document.querySelector('#sidebar-list') as HTMLElement;
-    const searchbar = document.querySelector('#searchbar') as HTMLInputElement;
+    const side = document.querySelector("#sidebar-list") as HTMLElement;
+    const searchbar = document.querySelector("#searchbar") as HTMLInputElement;
     const uploadRunBtn = document.querySelector(
-      '#upload-run'
+      "#upload-run"
     ) as HTMLInputElement;
     const uploadRunSpan = document.querySelector(
-      '#upload-run>span'
+      "#upload-run>span"
     ) as HTMLInputElement;
 
     if (isSidebarOpen) {
       if (profile) {
         const login = document.querySelectorAll(
-          '.login>button'
+          ".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';
+          uploadRunSpan.style.opacity = "1";
         }, 100);
       }
       setSidebarOpen(false);
-      side.style.width = '320px';
+      side.style.width = "320px";
       btn.forEach((e, i) => {
-        e.style.width = '310px';
-        e.style.padding = '0.4em 0 0 11px';
+        e.style.width = "310px";
+        e.style.padding = "0.4em 0 0 11px";
         setTimeout(() => {
-          span[i].style.opacity = '1';
+          span[i].style.opacity = "1";
         }, 100);
       });
-      side.style.zIndex = '2';
+      side.style.zIndex = "2";
     } else {
       if (profile) {
         const login = document.querySelectorAll(
-          '.login>button'
+          ".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';
+      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);
     }
   }, [isSidebarOpen, profile]);
 
   const handle_sidebar_click = useCallback(
     (clicked_sidebar_idx: number) => {
-      const btn = document.querySelectorAll('button.sidebar-button');
+      const btn = document.querySelectorAll("button.sidebar-button");
       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[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[clicked_sidebar_idx].classList.add("sidebar-button-selected");
+      btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected");
     },
     [isSidebarOpen, _handle_sidebar_hide]
   );
@@ -134,20 +134,20 @@ const Sidebar: React.FC<SidebarProps> = ({
   };
 
   React.useEffect(() => {
-    if (path === '/') {
+    if (path === "/") {
       handle_sidebar_click(1);
-    } else if (path.includes('games')) {
+    } else if (path.includes("games")) {
       handle_sidebar_click(2);
-    } else if (path.includes('rankings')) {
+    } 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')) {
+    else if (path.includes("profile")) {
       handle_sidebar_click(4);
-    } else if (path.includes('rules')) {
+    } else if (path.includes("rules")) {
       handle_sidebar_click(5);
-    } else if (path.includes('about')) {
+    } else if (path.includes("about")) {
       handle_sidebar_click(6);
     }
   }, [path, handle_sidebar_click]);
@@ -156,9 +156,9 @@ const Sidebar: React.FC<SidebarProps> = ({
     <div id="sidebar">
       <Link to="/" tabIndex={-1}>
         <div id="logo">
-          {' '}
+          {" "}
           {/* logo */}
-          <img src={LogoIcon} alt="" height={'80px'} />
+          <img src={LogoIcon} alt="" height={"80px"} />
           <div id="logo-text">
             <span>
               <b>PORTAL 2</b>
@@ -169,10 +169,10 @@ const Sidebar: React.FC<SidebarProps> = ({
         </div>
       </Link>
       <div id="sidebar-list">
-        {' '}
+        {" "}
         {/* List */}
         <div id="sidebar-toplist">
-          {' '}
+          {" "}
           {/* Top */}
           <button
             className="sidebar-button"
diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 9f39506..61e52d4 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
+import React from "react";
+import ReactMarkdown from "react-markdown";
 
-import { MapSummary } from '@customTypes/Map';
-import '@css/Maps.css';
+import { MapSummary } from "@customTypes/Map";
+import "@css/Maps.css";
 
 interface SummaryProps {
   selectedRun: number;
@@ -20,9 +20,9 @@ const Summary: React.FC<SummaryProps> = ({
 
   const _select_run = React.useCallback(
     (idx: number, category_id: number) => {
-      let r = document.querySelectorAll('button.record');
-      r.forEach(e => ((e as HTMLElement).style.backgroundColor = '#2b2e46'));
-      (r[idx] as HTMLElement).style.backgroundColor = '#161723';
+      let r = document.querySelectorAll("button.record");
+      r.forEach(e => ((e as HTMLElement).style.backgroundColor = "#2b2e46"));
+      (r[idx] as HTMLElement).style.backgroundColor = "#161723";
 
       if (data && data.summary.routes.length !== 0) {
         idx += data.summary.routes.filter(
@@ -42,9 +42,9 @@ const Summary: React.FC<SummaryProps> = ({
   }
 
   const _category_change = React.useCallback(() => {
-    const btn = document.querySelectorAll('#section3 #category span button');
+    const btn = document.querySelectorAll("#section3 #category span button");
     btn.forEach(e => {
-      (e as HTMLElement).style.backgroundColor = '#2b2e46';
+      (e as HTMLElement).style.backgroundColor = "#2b2e46";
     });
     // heavenly father forgive me for i have sinned. TODO: fix this bullshit with dynamic categories
     const idx =
@@ -53,18 +53,18 @@ const Summary: React.FC<SummaryProps> = ({
         : data.map.is_coop
           ? selectedCategory - 3
           : selectedCategory - 1;
-    (btn[idx] as HTMLElement).style.backgroundColor = '#202232';
+    (btn[idx] as HTMLElement).style.backgroundColor = "#202232";
   }, [selectedCategory, data.map.is_coop]);
 
   const _history_change = React.useCallback(() => {
-    const btn = document.querySelectorAll('#section3 #history span button');
+    const btn = document.querySelectorAll("#section3 #history span button");
     btn.forEach(e => {
-      (e as HTMLElement).style.backgroundColor = '#2b2e46';
+      (e as HTMLElement).style.backgroundColor = "#2b2e46";
     });
     (historySelected
       ? (btn[1] as HTMLElement)
       : (btn[0] as HTMLElement)
-    ).style.backgroundColor = '#202232';
+    ).style.backgroundColor = "#202232";
   }, [historySelected]);
 
   React.useEffect(() => {
@@ -85,7 +85,7 @@ const Summary: React.FC<SummaryProps> = ({
       <section id="section3" className="summary1">
         <div
           id="category"
-          style={data.map.image === '' ? { backgroundColor: '#202232' } : {}}
+          style={data.map.image === "" ? { backgroundColor: "#202232" } : {}}
         >
           <img src={data.map.image} alt="" id="category-image"></img>
           <p>
@@ -97,7 +97,7 @@ const Summary: React.FC<SummaryProps> = ({
               : ` portals`}
           </p>
           {data.map.is_coop ? ( // TODO: make this part dynamic
-            <span style={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
+            <span style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
               <button onClick={() => setSelectedCategory(1)}>CM</button>
               <button onClick={() => setSelectedCategory(4)}>Any%</button>
               <button onClick={() => setSelectedCategory(5)}>
@@ -105,7 +105,7 @@ const Summary: React.FC<SummaryProps> = ({
               </button>
             </span>
           ) : (
-            <span style={{ gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
+            <span style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr" }}>
               <button onClick={() => setSelectedCategory(1)}>CM</button>
               <button onClick={() => setSelectedCategory(2)}>NoSLA</button>
               <button onClick={() => setSelectedCategory(3)}>
@@ -117,7 +117,7 @@ const Summary: React.FC<SummaryProps> = ({
         </div>
 
         <div id="history">
-          <div style={{ display: historySelected ? 'none' : 'block' }}>
+          <div style={{ display: historySelected ? "none" : "block" }}>
             {data.summary.routes.filter(e => e.category.id === selectedCategory)
               .length === 0 ? (
               <h5>There are no records for this map.</h5>
@@ -142,8 +142,8 @@ const Summary: React.FC<SummaryProps> = ({
                       >
                         <span>
                           {new Date(r.history.date).toLocaleDateString(
-                            'en-US',
-                            { month: 'long', day: 'numeric', year: 'numeric' }
+                            "en-US",
+                            { month: "long", day: "numeric", year: "numeric" }
                           )}
                         </span>
                         <span>{r.history.score_count}</span>
@@ -155,7 +155,7 @@ const Summary: React.FC<SummaryProps> = ({
             )}
           </div>
 
-          <div style={{ display: historySelected ? 'block' : 'none' }}>
+          <div style={{ display: historySelected ? "block" : "none" }}>
             {data.summary.routes.filter(e => e.category.id === selectedCategory)
               .length === 0 ? (
               <h5>There are no records for this map.</h5>
@@ -178,25 +178,25 @@ const Summary: React.FC<SummaryProps> = ({
           <span>Difficulty</span>
           {data.summary.routes[selectedRun].rating === 0 && <span>N/A</span>}
           {data.summary.routes[selectedRun].rating === 1 && (
-            <span style={{ color: 'lime' }}>Very easy</span>
+            <span style={{ color: "lime" }}>Very easy</span>
           )}
           {data.summary.routes[selectedRun].rating === 2 && (
-            <span style={{ color: 'green' }}>Easy</span>
+            <span style={{ color: "green" }}>Easy</span>
           )}
           {data.summary.routes[selectedRun].rating === 3 && (
-            <span style={{ color: 'yellow' }}>Medium</span>
+            <span style={{ color: "yellow" }}>Medium</span>
           )}
           {data.summary.routes[selectedRun].rating === 4 && (
-            <span style={{ color: 'orange' }}>Hard</span>
+            <span style={{ color: "orange" }}>Hard</span>
           )}
           {data.summary.routes[selectedRun].rating === 5 && (
-            <span style={{ color: 'red' }}>Very hard</span>
+            <span style={{ color: "red" }}>Very hard</span>
           )}
           <div>
             {data.summary.routes[selectedRun].rating === 1 ? (
               <div
                 className="difficulty-rating"
-                style={{ backgroundColor: 'lime' }}
+                style={{ backgroundColor: "lime" }}
               ></div>
             ) : (
               <div className="difficulty-rating"></div>
@@ -204,7 +204,7 @@ const Summary: React.FC<SummaryProps> = ({
             {data.summary.routes[selectedRun].rating === 2 ? (
               <div
                 className="difficulty-rating"
-                style={{ backgroundColor: 'green' }}
+                style={{ backgroundColor: "green" }}
               ></div>
             ) : (
               <div className="difficulty-rating"></div>
@@ -212,7 +212,7 @@ const Summary: React.FC<SummaryProps> = ({
             {data.summary.routes[selectedRun].rating === 3 ? (
               <div
                 className="difficulty-rating"
-                style={{ backgroundColor: 'yellow' }}
+                style={{ backgroundColor: "yellow" }}
               ></div>
             ) : (
               <div className="difficulty-rating"></div>
@@ -220,7 +220,7 @@ const Summary: React.FC<SummaryProps> = ({
             {data.summary.routes[selectedRun].rating === 4 ? (
               <div
                 className="difficulty-rating"
-                style={{ backgroundColor: 'orange' }}
+                style={{ backgroundColor: "orange" }}
               ></div>
             ) : (
               <div className="difficulty-rating"></div>
@@ -228,7 +228,7 @@ const Summary: React.FC<SummaryProps> = ({
             {data.summary.routes[selectedRun].rating === 5 ? (
               <div
                 className="difficulty-rating"
-                style={{ backgroundColor: 'red' }}
+                style={{ backgroundColor: "red" }}
               ></div>
             ) : (
               <div className="difficulty-rating"></div>
@@ -243,18 +243,18 @@ const Summary: React.FC<SummaryProps> = ({
 
       <section id="section5" className="summary1">
         <div id="description">
-          {data.summary.routes[selectedRun].showcase !== '' ? (
+          {data.summary.routes[selectedRun].showcase !== "" ? (
             <iframe
               title="Showcase video"
               src={
-                'https://www.youtube.com/embed/' +
+                "https://www.youtube.com/embed/" +
                 _get_youtube_id(data.summary.routes[selectedRun].showcase)
               }
             >
-              {' '}
+              {" "}
             </iframe>
           ) : (
-            ''
+            ""
           )}
           <h3>Route Description</h3>
           <span id="description-text">
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index 5bad80f..d5eabcd 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
-import { UploadRunContent } from '@customTypes/Content';
-import { ScoreboardTempUpdate, SourceDemoParser, NetMessages } from '@nekz/sdp';
-
-import '@css/UploadRunDialog.css';
-import { Game } from '@customTypes/Game';
-import { API } from '@api/Api';
-import { useNavigate } from 'react-router-dom';
-import useMessage from '@hooks/UseMessage';
-import useConfirm from '@hooks/UseConfirm';
-import useMessageLoad from '@hooks/UseMessageLoad';
-import { MapNames } from '@customTypes/MapNames';
+import React from "react";
+import { UploadRunContent } from "@customTypes/Content";
+import { ScoreboardTempUpdate, SourceDemoParser, NetMessages } from "@nekz/sdp";
+
+import "@css/UploadRunDialog.css";
+import { Game } from "@customTypes/Game";
+import { API } from "@api/Api";
+import { useNavigate } from "react-router-dom";
+import useMessage from "@hooks/UseMessage";
+import useConfirm from "@hooks/UseConfirm";
+import useMessageLoad from "@hooks/UseMessageLoad";
+import { MapNames } from "@customTypes/MapNames";
 
 interface UploadRunDialogProps {
   token?: string;
@@ -38,7 +38,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
     });
 
   const [selectedGameID, setSelectedGameID] = React.useState<number>(0);
-  const [selectedGameName, setSelectedGameName] = React.useState<string>('');
+  const [selectedGameName, setSelectedGameName] = React.useState<string>("");
 
   // dropdowns
   const [dropdown1Vis, setDropdown1Vis] = React.useState<boolean>(false);
@@ -102,7 +102,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
       setDropdown1Vis(!dropdown1Vis);
     } else if (dropdown === 2) {
       setDropdown2Vis(!dropdown2Vis);
-      document.querySelector('#dropdown2')?.scrollTo(0, 0);
+      document.querySelector("#dropdown2")?.scrollTo(0, 0);
     }
   };
 
@@ -133,15 +133,15 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
     if (token) {
       if (games[selectedGameID].is_coop) {
         if (uploadRunContent.host_demo === null) {
-          await message('Error', 'You must select a host demo to upload.');
+          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.');
+          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.');
+          await message("Error", "You must select a demo to upload.");
           return;
         }
       }
@@ -157,7 +157,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
 
       if (!scoreboard) {
         await message(
-          'Error',
+          "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;
@@ -165,22 +165,22 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
 
       if (!demo.mapName || !MapNames[demo.mapName]) {
         await message(
-          'Error',
-          'Error while processing demo: Invalid map name.'
+          "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.'
+          "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.'
+          "Error",
+          "Error while processing demo: Invalid singleplayer demo in cooperative submission."
         );
         return;
       }
@@ -189,7 +189,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
         scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {};
 
       const userConfirmed = await confirm(
-        'Upload Record',
+        "Upload Record",
         `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?`
       );
 
@@ -197,21 +197,21 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
         return;
       }
 
-      messageLoad('Uploading...');
+      messageLoad("Uploading...");
       const [success, response] = await API.post_record(
         token,
         uploadRunContent,
         MapNames[demo.mapName]
       );
       messageLoadClose();
-      await message('Upload Record', response);
+      await message("Upload Record", response);
       if (success) {
         setUploadRunContent({
           host_demo: null,
           partner_demo: null,
         });
         onClose(success);
-        navigate('/profile');
+        navigate("/profile");
       }
     }
   };
@@ -220,7 +220,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
     if (open) {
       setDragHighlightPartner(false);
       setDragHighlight(false);
-      _handle_game_select('1', 'Portal 2 - Singleplayer'); // a different approach?.
+      _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?.
     }
   }, [open]);
 
@@ -236,35 +236,35 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
           <div id="upload-run-menu-add">
             <div id="upload-run-route-category">
               <div
-                style={{ padding: '15px 0px' }}
+                style={{ padding: "15px 0px" }}
                 className="upload-run-dropdown-container upload-run-item"
               >
-                <h3 style={{ margin: '0px 0px' }}>Select Game</h3>
+                <h3 style={{ margin: "0px 0px" }}>Select Game</h3>
                 <div
                   onClick={() => _handle_dropdowns(1)}
                   style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    cursor: 'pointer',
-                    justifyContent: 'space-between',
-                    margin: '10px 0px',
+                    display: "flex",
+                    alignItems: "center",
+                    cursor: "pointer",
+                    justifyContent: "space-between",
+                    margin: "10px 0px",
                   }}
                 >
                   <div className="dropdown-cur">{selectedGameName}</div>
                   <i
                     style={{
-                      rotate: '-90deg',
-                      transform: 'translate(-5px, 10px)',
+                      rotate: "-90deg",
+                      transform: "translate(-5px, 10px)",
                     }}
                     className="triangle"
                   ></i>
                 </div>
                 <div
-                  style={{ top: '110px' }}
+                  style={{ top: "110px" }}
                   className={
                     dropdown1Vis
-                      ? 'upload-run-dropdown'
-                      : 'upload-run-dropdown hidden'
+                      ? "upload-run-dropdown"
+                      : "upload-run-dropdown hidden"
                   }
                 >
                   {games.map(game => (
@@ -284,7 +284,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
               {!loading && (
                 <>
                   <div>
-                    <h3 style={{ margin: '10px 0px' }}>Host Demo</h3>
+                    <h3 style={{ margin: "10px 0px" }}>Host Demo</h3>
                     <div
                       onClick={() => {
                         _handle_file_click(true);
@@ -298,7 +298,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                       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' : ''}`}
+                      className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}
                     >
                       <input
                         ref={fileInputRef}
@@ -316,7 +316,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                           <div>
                             <span
                               style={{
-                                fontFamily: 'BarlowSemiCondensed-Regular',
+                                fontFamily: "BarlowSemiCondensed-Regular",
                               }}
                             >
                               Or click here
@@ -324,9 +324,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                             <br />
                             <button
                               style={{
-                                borderRadius: '24px',
-                                padding: '5px 8px',
-                                margin: '5px 0px',
+                                borderRadius: "24px",
+                                padding: "5px 8px",
+                                margin: "5px 0px",
                               }}
                             >
                               Upload
@@ -342,7 +342,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                     {games[selectedGameID].is_coop && (
                       <>
                         <div>
-                          <h3 style={{ margin: '10px 0px' }}>Partner Demo</h3>
+                          <h3 style={{ margin: "10px 0px" }}>Partner Demo</h3>
                           <div
                             onClick={() => {
                               _handle_file_click(false);
@@ -356,7 +356,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                             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' : ''}`}
+                            className={`upload-run-drag-area ${dragHightlightPartner ? "upload-run-drag-area-highlight-partner" : ""} ${uploadRunContent.partner_demo ? "upload-run-drag-area-hidden" : ""}`}
                           >
                             <input
                               ref={fileInputRefPartner}
@@ -367,14 +367,14 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                               onChange={e =>
                                 _handle_file_change(e.target.files, false)
                               }
-                            />{' '}
+                            />{" "}
                             {!uploadRunContent.partner_demo ? (
                               <div>
                                 <span>Drag and drop</span>
                                 <div>
                                   <span
                                     style={{
-                                      fontFamily: 'BarlowSemiCondensed-Regular',
+                                      fontFamily: "BarlowSemiCondensed-Regular",
                                     }}
                                   >
                                     Or click here
@@ -382,9 +382,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                                   <br />
                                   <button
                                     style={{
-                                      borderRadius: '24px',
-                                      padding: '5px 8px',
-                                      margin: '5px 0px',
+                                      borderRadius: "24px",
+                                      padding: "5px 8px",
+                                      margin: "5px 0px",
                                     }}
                                   >
                                     Upload