formatted with prettier

author: FifthWit <fifthwitbusiness@gmail.com> 2025-01-30 10:44:30 -0600
committer: FifthWit <fifthwitbusiness@gmail.com> 2025-01-30 10:44:30 -0600
commit: e40f07211f5f15dcb138e2520a76d13afd3c0cfd (patch)
tree: 46bad6a17e66d55a4a65088c0b6eb8c48641615a /frontend/src
parent: added prettier for more consistency (diff)
download: lphub-e40f07211f5f15dcb138e2520a76d13afd3c0cfd.tar.gz
lphub-e40f07211f5f15dcb138e2520a76d13afd3c0cfd.tar.bz2
lphub-e40f07211f5f15dcb138e2520a76d13afd3c0cfd.zip
48 files changed, 2936 insertions, 1736 deletions
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 81589f6..754f5a2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,24 +1,24 @@
-import React from "react";
+import React from 'react';
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route } from 'react-router-dom';
-import { Helmet } from "react-helmet";
+import { Helmet } from 'react-helmet';
-import { UserProfile } from "@customTypes/Profile";
+import { UserProfile } from '@customTypes/Profile';
-import Sidebar from "./components/Sidebar";
+import Sidebar from './components/Sidebar';
-import "./App.css";
+import './App.css';
-import Profile from "@pages/Profile";
+import Profile from '@pages/Profile';
-import Games from "@pages/Games";
+import Games from '@pages/Games';
-import Maps from "@pages/Maps";
+import Maps from '@pages/Maps';
-import User from "@pages/User";
+import User from '@pages/User';
-import Homepage from "@pages/Homepage";
+import Homepage from '@pages/Homepage';
-import UploadRunDialog from "./components/UploadRunDialog";
+import UploadRunDialog from './components/UploadRunDialog';
-import Rules from "@pages/Rules";
+import Rules from '@pages/Rules';
-import About from "@pages/About";
+import About from '@pages/About';
-import { Game } from "@customTypes/Game";
+import { Game } from '@customTypes/Game';
-import { API } from "./api/Api";
+import { API } from './api/Api';
-import Maplist from "@pages/Maplist";
+import Maplist from '@pages/Maplist';
-import Rankings from "@pages/Rankings";
+import Rankings from '@pages/Rankings';
-import { get_user_id_from_token, get_user_mod_from_token } from "./utils/Jwt";
+import { get_user_id_from_token, get_user_mod_from_token } from './utils/Jwt';
 const App: React.FC = () => {
  const [token, setToken] = React.useState<string | undefined>(undefined);
@@ -78,7 +78,7 @@ const App: React.FC = () => {
      <UploadRunDialog
        token={token}
        open={uploadRunDialog}
-        onClose={(updateProfile) => {
+        onClose={updateProfile => {
          setUploadRunDialog(false);
          if (updateProfile) {
            _set_profile(get_user_id_from_token(token));
@@ -118,7 +118,7 @@ const App: React.FC = () => {
        <Route path="/rules" element={<Rules />} />
        <Route path="/about" element={<About />} />
        <Route path="/rankings" element={<Rankings />}></Route>
-        <Route path="*" element={"404"} />
+        <Route path="*" element={'404'} />
      </Routes>
    </>
  );
diff --git a/frontend/src/api/Api.ts b/frontend/src/api/Api.ts
index 0e1658c..b98dda3 100644
--- a/frontend/src/api/Api.ts
+++ b/frontend/src/api/Api.ts
@@ -1,14 +1,14 @@
-import { MapDiscussionContent, ModMenuContent } from "@customTypes/Content";
+import { MapDiscussionContent, ModMenuContent } from '@customTypes/Content';
-import { delete_token, get_token } from "@api/Auth";
+import { delete_token, get_token } from '@api/Auth';
-import { get_user, get_profile, post_profile } from "@api/User";
+import { get_user, get_profile, post_profile } from '@api/User';
 import {
  get_games,
  get_chapters,
  get_games_chapters,
  get_game_maps,
  get_search,
-} from "@api/Games";
+} from '@api/Games';
-import { get_official_rankings, get_unofficial_rankings } from "@api/Rankings";
+import { get_official_rankings, get_unofficial_rankings } from '@api/Rankings';
 import {
  get_map_summary,
  get_map_leaderboard,
@@ -19,14 +19,14 @@ import {
  delete_map_discussion,
  post_record,
  delete_map_record,
-} from "@api/Maps";
+} from '@api/Maps';
 import {
  delete_map_summary,
  post_map_summary,
  put_map_image,
  put_map_summary,
-} from "@api/Mod";
+} from '@api/Mod';
-import { UploadRunContent } from "@customTypes/Content";
+import { UploadRunContent } from '@customTypes/Content';
 // add new api call function entries here
 // example usage: API.get_games();
@@ -91,7 +91,7 @@ export const API = {
    delete_map_summary(token, map_id, route_id),
 };
-const BASE_API_URL: string = "/api/v1/";
+const BASE_API_URL: string = '/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 875c7e5..e495d47 100644
--- a/frontend/src/api/Auth.ts
+++ b/frontend/src/api/Auth.ts
@@ -1,8 +1,8 @@
-import axios from "axios";
+import axios from 'axios';
-import { url } from "@api/Api";
+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;
  }
@@ -10,5 +10,5 @@ export const get_token = async (): Promise<string | undefined> => {
 };
 export const delete_token = async () => {
-  await axios.delete(url("token"));
+  await axios.delete(url('token'));
 };
diff --git a/frontend/src/api/Games.ts b/frontend/src/api/Games.ts
index 72bb4b3..0e47091 100644
--- a/frontend/src/api/Games.ts
+++ b/frontend/src/api/Games.ts
@@ -1,31 +1,35 @@
-import axios from "axios";
+import axios from 'axios';
-import { url } from "@api/Api";
+import { url } from '@api/Api';
-import { GameChapter, GamesChapters } from "@customTypes/Chapters";
+import { GameChapter, GamesChapters } from '@customTypes/Chapters';
-import { Game } from "@customTypes/Game";
+import { Game } from '@customTypes/Game';
-import { Map } from "@customTypes/Map";
+import { Map } from '@customTypes/Map';
-import { Search } from "@customTypes/Search";
+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> => {
+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> => {
+export const get_games_chapters = async (
+  game_id: string
+): Promise<GamesChapters> => {
  const response = await axios.get(url(`games/${game_id}`));
  return response.data.data;
 };
 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 aa967ce..3a22f88 100644
--- a/frontend/src/api/Maps.ts
+++ b/frontend/src/api/Maps.ts
@@ -1,15 +1,25 @@
-import axios from "axios";
+import axios from 'axios';
-import { url } from "@api/Api";
+import { url } from '@api/Api';
-import { MapDiscussionContent, UploadRunContent } from "@customTypes/Content";
+import { MapDiscussionContent, UploadRunContent } from '@customTypes/Content';
-import { MapSummary, MapLeaderboard, MapDiscussions, MapDiscussion } from "@customTypes/Map";
+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;
 };
-export const get_map_leaderboard = async (map_id: string, page: string): Promise<MapLeaderboard | undefined> => {
+export const get_map_leaderboard = async (
-  const response = await axios.get(url(`maps/${map_id}/leaderboards?page=${page}`));
+  map_id: string,
+  page: string
+): Promise<MapLeaderboard | undefined> => {
+  const response = await axios.get(
+    url(`maps/${map_id}/leaderboards?page=${page}`)
+  );
  if (!response.data.success) {
    return undefined;
  }
@@ -25,7 +35,9 @@ export const get_map_leaderboard = async (map_id: string, page: string): Promise
  return data;
 };
-export const get_map_discussions = async (map_id: string): Promise<MapDiscussions | undefined> => {
+export const get_map_discussions = async (
+  map_id: string
+): Promise<MapDiscussions | undefined> => {
  const response = await axios.get(url(`maps/${map_id}/discussions`));
  if (!response.data.data.discussions) {
    return undefined;
@@ -33,74 +45,122 @@ export const get_map_discussions = async (map_id: string): Promise<MapDiscussion
  return response.data.data;
 };
-export const get_map_discussion = async (map_id: string, discussion_id: number): Promise<MapDiscussion | undefined> => {
+export const get_map_discussion = async (
-  const response = await axios.get(url(`maps/${map_id}/discussions/${discussion_id}`));
+  map_id: string,
+  discussion_id: number
+): Promise<MapDiscussion | undefined> => {
+  const response = await axios.get(
+    url(`maps/${map_id}/discussions/${discussion_id}`)
+  );
  if (!response.data.data.discussion) {
    return undefined;
  }
  return response.data.data;
 };
-export const post_map_discussion = async (token: string, map_id: string, content: MapDiscussionContent): Promise<boolean> => {
+export const post_map_discussion = async (
-  const response = await axios.post(url(`maps/${map_id}/discussions`), {
+  token: string,
-    "title": content.title,
+  map_id: string,
-    "content": content.content,
+  content: MapDiscussionContent
-  }, {
+): Promise<boolean> => {
-    headers: {
+  const response = await axios.post(
-      "Authorization": token,
+    url(`maps/${map_id}/discussions`),
+    {
+      title: content.title,
+      content: content.content,
+    },
+    {
+      headers: {
+        Authorization: token,
+      },
    }
-  });
+  );
  return response.data.success;
 };
-export const post_map_discussion_comment = async (token: string, map_id: string, discussion_id: number, comment: string): Promise<boolean> => {
+export const post_map_discussion_comment = async (
-  const response = await axios.post(url(`maps/${map_id}/discussions/${discussion_id}`), {
+  token: string,
-    "comment": comment,
+  map_id: string,
-  }, {
+  discussion_id: number,
-    headers: {
+  comment: string
-      "Authorization": token,
+): Promise<boolean> => {
+  const response = await axios.post(
+    url(`maps/${map_id}/discussions/${discussion_id}`),
+    {
+      comment: comment,
+    },
+    {
+      headers: {
+        Authorization: token,
+      },
    }
-  });
+  );
  return response.data.success;
 };
-export const delete_map_discussion = async (token: string, map_id: string, discussion_id: number): Promise<boolean> => {
+export const delete_map_discussion = async (
-  const response = await axios.delete(url(`maps/${map_id}/discussions/${discussion_id}`), {
+  token: string,
-    headers: {
+  map_id: string,
-      "Authorization": token,
+  discussion_id: number
+): Promise<boolean> => {
+  const response = await axios.delete(
+    url(`maps/${map_id}/discussions/${discussion_id}`),
+    {
+      headers: {
+        Authorization: token,
+      },
    }
-  });
+  );
  return response.data.success;
 };
-export const post_record = async (token: string, run: UploadRunContent, map_id: number): Promise<[boolean, string]> => {
+export const post_record = async (
+  token: string,
+  run: UploadRunContent,
+  map_id: number
+): Promise<[boolean, string]> => {
  if (run.partner_demo) {
-    const response = await axios.postForm(url(`maps/${map_id}/record`), {
+    const response = await axios.postForm(
-      "host_demo": run.host_demo,
+      url(`maps/${map_id}/record`),
-      "partner_demo": run.partner_demo,
+      {
-    }, {
+        host_demo: run.host_demo,
-      headers: {
+        partner_demo: run.partner_demo,
-        "Authorization": token,
+      },
+      {
+        headers: {
+          Authorization: token,
+        },
      }
-    });
+    );
    return [response.data.success, response.data.message];
  } else {
-    const response = await axios.postForm(url(`maps/${map_id}/record`), {
+    const response = await axios.postForm(
-      "host_demo": run.host_demo,
+      url(`maps/${map_id}/record`),
-    }, {
+      {
-      headers: {
+        host_demo: run.host_demo,
-        "Authorization": token,
+      },
+      {
+        headers: {
+          Authorization: token,
+        },
      }
-    });
+    );
    return [response.data.success, response.data.message];
  }
-}
+};
-export const delete_map_record = async (token: string, map_id: number, record_id: number): Promise<boolean> => {
+export const delete_map_record = async (
-  const response = await axios.delete(url(`maps/${map_id}/record/${record_id}`), {
+  token: string,
-    headers: {
+  map_id: number,
-      "Authorization": token,
+  record_id: number
+): Promise<boolean> => {
+  const response = await axios.delete(
+    url(`maps/${map_id}/record/${record_id}`),
+    {
+      headers: {
+        Authorization: token,
+      },
    }
-  });
+  );
  return response.data.success;
 };
diff --git a/frontend/src/api/Mod.ts b/frontend/src/api/Mod.ts
index 1511f8b..69e76c5 100644
--- a/frontend/src/api/Mod.ts
+++ b/frontend/src/api/Mod.ts
@@ -1,58 +1,86 @@
-import axios from "axios";
+import axios from 'axios';
-import { url } from "@api/Api";
+import { url } from '@api/Api';
-import { ModMenuContent } from "@customTypes/Content";
+import { ModMenuContent } from '@customTypes/Content';
-export const put_map_image = async (token: string, map_id: string, image: string): Promise<boolean> => {
+export const put_map_image = async (
-  const response = await axios.put(url(`maps/${map_id}/image`), {
+  token: string,
-    "image": image,
+  map_id: string,
-  }, {
+  image: string
-    headers: {
+): Promise<boolean> => {
-      "Authorization": token,
+  const response = await axios.put(
+    url(`maps/${map_id}/image`),
+    {
+      image: image,
+    },
+    {
+      headers: {
+        Authorization: token,
+      },
    }
-  });
+  );
  return response.data.success;
 };
-export const post_map_summary = async (token: string, map_id: string, content: ModMenuContent): Promise<boolean> => {
+export const post_map_summary = async (
-  const response = await axios.post(url(`maps/${map_id}/summary`), {
+  token: string,
-    "category_id": content.category_id,
+  map_id: string,
-    "user_name": content.name,
+  content: ModMenuContent
-    "score_count": content.score,
+): Promise<boolean> => {
-    "record_date": content.date,
+  const response = await axios.post(
-    "showcase": content.showcase,
+    url(`maps/${map_id}/summary`),
-    "description": content.description,
+    {
-  }, {
+      category_id: content.category_id,
-    headers: {
+      user_name: content.name,
-      "Authorization": token,
+      score_count: content.score,
+      record_date: content.date,
+      showcase: content.showcase,
+      description: content.description,
+    },
+    {
+      headers: {
+        Authorization: token,
+      },
    }
-  });
+  );
  return response.data.success;
 };
-export const put_map_summary = async (token: string, map_id: string, content: ModMenuContent): Promise<boolean> => {
+export const put_map_summary = async (
-  const response = await axios.put(url(`maps/${map_id}/summary`), {
+  token: string,
-    "route_id": content.id,
+  map_id: string,
-    "user_name": content.name,
+  content: ModMenuContent
-    "score_count": content.score,
+): Promise<boolean> => {
-    "record_date": content.date,
+  const response = await axios.put(
-    "showcase": content.showcase,
+    url(`maps/${map_id}/summary`),
-    "description": content.description,
+    {
-  }, {
+      route_id: content.id,
-    headers: {
+      user_name: content.name,
-      "Authorization": token,
+      score_count: content.score,
+      record_date: content.date,
+      showcase: content.showcase,
+      description: content.description,
+    },
+    {
+      headers: {
+        Authorization: token,
+      },
    }
-  });
+  );
  return response.data.success;
 };
-export const delete_map_summary = async (token: string, map_id: string, route_id: number): Promise<boolean> => {
+export const delete_map_summary = async (
+  token: string,
+  map_id: string,
+  route_id: number
+): Promise<boolean> => {
  const response = await axios.delete(url(`maps/${map_id}/summary`), {
    data: {
-      "route_id": route_id,
+      route_id: route_id,
    },
    headers: {
-      "Authorization": token,
+      Authorization: token,
-    }
+    },
  });
  return response.data.success;
 };
diff --git a/frontend/src/api/Rankings.ts b/frontend/src/api/Rankings.ts
index b8d9bec..9afd999 100644
--- a/frontend/src/api/Rankings.ts
+++ b/frontend/src/api/Rankings.ts
@@ -1,6 +1,6 @@
-import axios from "axios";
+import axios from 'axios';
-import { url } from "@api/Api";
+import { url } from '@api/Api';
-import { Ranking, SteamRanking } from "@customTypes/Ranking";
+import { Ranking, SteamRanking } from '@customTypes/Ranking';
 export const get_official_rankings = async (): Promise<Ranking> => {
  const response = await axios.get(url(`rankings/lphub`));
diff --git a/frontend/src/api/User.ts b/frontend/src/api/User.ts
index 004aa22..4ce21e1 100644
--- a/frontend/src/api/User.ts
+++ b/frontend/src/api/User.ts
@@ -1,6 +1,6 @@
-import axios from "axios";
+import axios from 'axios';
-import { url } from "@api/Api";
+import { url } from '@api/Api';
-import { UserProfile } from "@customTypes/Profile";
+import { UserProfile } from '@customTypes/Profile';
 export const get_user = async (user_id: string): Promise<UserProfile> => {
  const response = await axios.get(url(`users/${user_id}`));
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 44a653b..925118d 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,31 +1,36 @@
 import React from 'react';
-import "@css/Dialog.css"
+import '@css/Dialog.css';
 interface ConfirmDialogProps {
-    title: string;
+  title: string;
-    subtitle: string;
+  subtitle: string;
-    onConfirm: () => void;
+  onConfirm: () => void;
-    onCancel: () => void;
+  onCancel: () => void;
-};
+}
-const ConfirmDialog: React.FC<ConfirmDialogProps> = ({ title, subtitle, onConfirm, onCancel }) => {
+const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
-    return (
+  title,
-        <div className='dimmer'>
+  subtitle,
-            <div className='dialog'>
+  onConfirm,
-                <div className='dialog-element dialog-header'>
+  onCancel,
-                    <span>{title}</span>
+}) => {
-                </div>
+  return (
-                <div className='dialog-element dialog-description'>
+    <div className="dimmer">
-                    <span>{subtitle}</span>
+      <div className="dialog">
-                </div>
+        <div className="dialog-element dialog-header">
-                <div className='dialog-element dialog-btns-container'>
+          <span>{title}</span>
-                    <button onClick={onCancel}>Cancel</button>
+        </div>
-                    <button onClick={onConfirm}>Confirm</button>
+        <div className="dialog-element dialog-description">
-                </div>
+          <span>{subtitle}</span>
-            </div>
+        </div>
+        <div className="dialog-element dialog-btns-container">
+          <button onClick={onCancel}>Cancel</button>
+          <button onClick={onConfirm}>Confirm</button>
        </div>
-    )
+      </div>
+    </div>
+  );
 };
 export default ConfirmDialog;
diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx
index 62a9fc7..994cd8e 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";
+} from '@customTypes/Map';
-import { MapDiscussionContent } from "@customTypes/Content";
+import { MapDiscussionContent } from '@customTypes/Content';
-import { time_ago } from "@utils/Time";
+import { time_ago } from '@utils/Time';
-import { API } from "@api/Api";
+import { API } from '@api/Api';
-import "@css/Maps.css";
+import '@css/Maps.css';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
-import useConfirm from "@hooks/UseConfirm";
+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: "",
+      title: '',
-      content: "",
+      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,8 +90,8 @@ const Discussions: React.FC<DiscussionsProps> = ({
        <input
          type="text"
          value={discussionSearch}
-          placeholder={"Search for posts..."}
+          placeholder={'Search for posts...'}
-          onChange={(e) => setDiscussionSearch(e.target.value)}
+          onChange={e => setDiscussionSearch(e.target.value)}
        />
        <div>
          <button onClick={() => setCreateDiscussion(true)}>New Post</button>
@@ -104,11 +104,11 @@ 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..."
-                onChange={(e) =>
+                onChange={e =>
                  setCreateDiscussionContent({
                    ...createDiscussionContent,
                    title: e.target.value,
@@ -118,7 +118,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
              <input
                id="discussion-create-content"
                placeholder="Enter the content..."
-                onChange={(e) =>
+                onChange={e =>
                  setCreateDiscussionContent({
                    ...createDiscussionContent,
                    content: e.target.value,
@@ -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('T', ' ')
-                        .replace("Z", "")
+                        .replace('Z', '')
                    )
                  )}
                </span>
@@ -170,7 +170,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
                      (a, b) =>
                        new Date(a.date).getTime() - new Date(b.date).getTime()
                    )
-                    .map((e) => (
+                    .map(e => (
                      <>
                        <Link to={`/users/${e.user.steam_id}`}>
                          <img src={e.user.avatar_link} alt="" />
@@ -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,29 +188,29 @@ const Discussions: React.FC<DiscussionsProps> = ({
                        </div>
                      </>
                    ))
-                : ""}
+                : ''}
            </div>
            <div id="discussion-send">
              <input
                type="text"
                value={createDiscussionCommentContent}
-                placeholder={"Message"}
+                placeholder={'Message'}
-                onKeyDown={(e) =>
+                onKeyDown={e =>
-                  e.key === "Enter" &&
+                  e.key === 'Enter' &&
                  _create_map_discussion_comment(discussionThread.discussion.id)
                }
-                onChange={(e) =>
+                onChange={e =>
                  setCreateDiscussionCommentContent(e.target.value)
                }
              />
              <div>
                <button
                  onClick={() => {
-                    if (createDiscussionCommentContent !== "") {
+                    if (createDiscussionCommentContent !== '') {
                      _create_map_discussion_comment(
                        discussionThread.discussion.id
                      );
-                      setCreateDiscussionCommentContent("");
+                      setCreateDiscussionCommentContent('');
                    }
                  }}
                >
@@ -222,7 +222,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
        ) : data ? (
          <>
            {data.discussions
-              .filter((f) => f.title.includes(discussionSearch))
+              .filter(f => f.title.includes(discussionSearch))
              .sort(
                (a, b) =>
                  new Date(b.updated_at).getTime() -
@@ -234,7 +234,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
                    <span>{e.title}</span>
                    {isModerator ? (
                      <button
-                        onClick={(m) => {
+                        onClick={m => {
                          m.stopPropagation();
                          _delete_map_discussion(e);
                        }}
@@ -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 d8879ef..b13be48 100644
--- a/frontend/src/components/GameCategory.tsx
+++ b/frontend/src/components/GameCategory.tsx
@@ -1,24 +1,31 @@
 import React from 'react';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 import { Game, GameCategoryPortals } from '@customTypes/Game';
-import "@css/Games.css"
+import '@css/Games.css';
 interface GameCategoryProps {
-    game: Game;
+  game: Game;
-    cat: GameCategoryPortals;
+  cat: GameCategoryPortals;
 }
-const GameCategory: React.FC<GameCategoryProps> = ({cat, game}) => {
+const GameCategory: React.FC<GameCategoryProps> = ({ cat, game }) => {
-    return (
+  return (
-        <Link className="games-page-item-body-item" to={"/games/" + game.id + "?cat=" + cat.category.id}>
+    <Link
-        <div>
+      className="games-page-item-body-item"
-              <span className='games-page-item-body-item-title'>{cat.category.name}</span>
+      to={'/games/' + game.id + '?cat=' + cat.category.id}
-              <br />
+    >
-              <span className='games-page-item-body-item-num'>{cat.portal_count}</span>
+      <div>
-        </div>
+        <span className="games-page-item-body-item-title">
-        </Link>
+          {cat.category.name}
-    )
+        </span>
-}
+        <br />
+        <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 3bd2842..b58bbdd 100644
--- a/frontend/src/components/GameEntry.tsx
+++ b/frontend/src/components/GameEntry.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Link } from "react-router-dom";
+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';
@@ -18,17 +18,26 @@ const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
  }, [game.category_portals]);
  return (
-    <Link to={"/games/" + game.id}><div className='games-page-item'>
+    <Link to={'/games/' + game.id}>
-      <div className='games-page-item-header'>
+      <div className="games-page-item">
-        <div style={{ backgroundImage: `url(${game.image})` }} className='games-page-item-header-img'></div>
+        <div className="games-page-item-header">
-        <span><b>{game.name}</b></span>
+          <div
+            style={{ backgroundImage: `url(${game.image})` }}
+            className="games-page-item-header-img"
+          ></div>
+          <span>
+            <b>{game.name}</b>
+          </span>
+        </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>
+            );
+          })}
+        </div>
      </div>
-      <div id={game.id as any as string} className='games-page-item-body'>
+    </Link>
-        {catInfo.map((cat, index) => {
-          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 05f01d0..fb72f2b 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react';
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from 'react-router-dom';
-import { DownloadIcon, ThreedotIcon } from "@images/Images";
+import { DownloadIcon, ThreedotIcon } from '@images/Images';
-import { MapLeaderboard } from "@customTypes/Map";
+import { MapLeaderboard } from '@customTypes/Map';
-import { ticks_to_time, time_ago } from "@utils/Time";
+import { ticks_to_time, time_ago } from '@utils/Time';
-import { API } from "@api/Api";
+import { API } from '@api/Api';
-import useMessage from "@hooks/UseMessage";
+import useMessage from '@hooks/UseMessage';
-import "@css/Maps.css";
+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% 40% 7.5% 15% 15% 15%' }
-              : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }
+              : { gridTemplateColumns: '7.5% 30% 10% 20% 17.5% 15%' }
          }
        >
          <span>Place</span>
@@ -82,13 +82,13 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
                onClick={() =>
                  pageNumber === 1
                    ? null
-                    : setPageNumber((prevPageNumber) => prevPageNumber - 1)
+                    : setPageNumber(prevPageNumber => prevPageNumber - 1)
                }
              >
                <i
                  className="triangle"
-                  style={{ position: "relative", left: "-5px" }}
+                  style={{ position: 'relative', left: '-5px' }}
-                ></i>{" "}
+                ></i>{' '}
              </button>
              <span>
                {data.pagination.current_page}/{data.pagination.total_pages}
@@ -97,17 +97,17 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
                onClick={() =>
                  pageNumber === data.pagination.total_pages
                    ? null
-                    : setPageNumber((prevPageNumber) => prevPageNumber + 1)
+                    : setPageNumber(prevPageNumber => prevPageNumber + 1)
                }
              >
                <i
                  className="triangle"
                  style={{
-                    position: "relative",
+                    position: 'relative',
-                    left: "5px",
+                    left: '5px',
-                    transform: "rotate(180deg)",
+                    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% 40% 4% 3.5% 15% 15% 14.5%' }
-                  : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" }
+                  : { 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 f1628b2..093e406 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -4,77 +4,78 @@ 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 '@css/Login.css';
 interface LoginProps {
  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
  profile?: UserProfile;
  setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
-};
+}
 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 (
    <>
-      {profile
+      {profile ? (
-        ?
+        <>
-        (
+          {profile.profile ? (
-          <>
+            <>
-            {profile.profile ?
+              <Link to="/profile" tabIndex={-1} className="login">
-              (
+                <button className="sidebar-button">
-                <>
+                  <img
-                  <Link to="/profile" tabIndex={-1} className='login'>
+                    className="avatar-img"
-                    <button className='sidebar-button'>
+                    src={profile.avatar_link}
-                      <img className="avatar-img" src={profile.avatar_link} alt="" />
+                    alt=""
-                      <span>{profile.user_name}</span>
+                  />
-                    </button>
+                  <span>{profile.user_name}</span>
-                    <button className='logout-button' onClick={_logout}>
+                </button>
-                      <img src={ExitIcon} alt="" /><span />
+                <button className="logout-button" onClick={_logout}>
-                    </button>
+                  <img src={ExitIcon} alt="" />
-                  </Link>
+                  <span />
-                </>
+                </button>
-              )
+              </Link>
-              :
+            </>
-              (
+          ) : (
-                <>
+            <>
-                  <Link to="/" tabIndex={-1} className='login'>
+              <Link to="/" tabIndex={-1} className="login">
-                    <button className='sidebar-button'>
+                <button className="sidebar-button">
-                      <img className="avatar-img" src={profile.avatar_link} alt="" />
+                  <img
-                      <span>Loading Profile...</span>
+                    className="avatar-img"
-                    </button>
+                    src={profile.avatar_link}
-                    <button disabled className='logout-button' onClick={_logout}>
+                    alt=""
-                      <img src={ExitIcon} alt="" /><span />
+                  />
-                    </button>
+                  <span>Loading Profile...</span>
-                  </Link>
+                </button>
-                </>
+                <button disabled className="logout-button" onClick={_logout}>
-              )
+                  <img src={ExitIcon} alt="" />
-            }
+                  <span />
-          </>
+                </button>
-        )
+              </Link>
-        :
+            </>
-        (
+          )}
-          <Link to="/api/v1/login" tabIndex={-1} className='login' >
+        </>
-            <button className='sidebar-button' onClick={_login}>
+      ) : (
-              <img className="avatar-img" src={UserIcon} alt="" />
+        <Link to="/api/v1/login" tabIndex={-1} className="login">
-              <span>
+          <button className="sidebar-button" onClick={_login}>
-                <img src={LoginIcon} alt="Sign in through Steam" />
+            <img className="avatar-img" src={UserIcon} alt="" />
-              </span>
+            <span>
-            </button>
+              <img src={LoginIcon} alt="Sign in through Steam" />
-          </Link>
+            </span>
-        )}
+          </button>
+        </Link>
+      )}
    </>
  );
 };
diff --git a/frontend/src/components/MapEntry.tsx b/frontend/src/components/MapEntry.tsx
index 0f494ad..f1dee5b 100644
--- a/frontend/src/components/MapEntry.tsx
+++ b/frontend/src/components/MapEntry.tsx
@@ -1,12 +1,8 @@
 import React from 'react';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 const MapEntry: React.FC = () => {
-    return (
+  return <div></div>;
-        <div>
+};
-        </div>
-    )
-}
 export default MapEntry;
diff --git a/frontend/src/components/MessageDialog.tsx b/frontend/src/components/MessageDialog.tsx
index 5c85189..b739ebc 100644
--- a/frontend/src/components/MessageDialog.tsx
+++ b/frontend/src/components/MessageDialog.tsx
@@ -1,29 +1,33 @@
 import React from 'react';
-import "@css/Dialog.css"
+import '@css/Dialog.css';
 interface MessageDialogProps {
-    title: string;
+  title: string;
-    subtitle: string;
+  subtitle: string;
-    onClose: () => void;
+  onClose: () => void;
-};
+}
-const MessageDialog: React.FC<MessageDialogProps> = ({ title, subtitle, onClose }) => {
+const MessageDialog: React.FC<MessageDialogProps> = ({
-    return (
+  title,
-        <div className='dimmer'>
+  subtitle,
-            <div className='dialog'>
+  onClose,
-                <div className='dialog-element dialog-header'>
+}) => {
-                    <span>{title}</span>
+  return (
-                </div>
+    <div className="dimmer">
-                <div className='dialog-element dialog-description'>
+      <div className="dialog">
-                    <span>{subtitle}</span>
+        <div className="dialog-element dialog-header">
-                </div>
+          <span>{title}</span>
-                <div className='dialog-element dialog-btns-container'>
-                    <button onClick={onClose}>Close</button>
-                </div>
-            </div>
        </div>
-    )
+        <div className="dialog-element dialog-description">
-}
+          <span>{subtitle}</span>
+        </div>
+        <div className="dialog-element dialog-btns-container">
+          <button onClick={onClose}>Close</button>
+        </div>
+      </div>
+    </div>
+  );
+};
 export default MessageDialog;
diff --git a/frontend/src/components/MessageDialogLoad.tsx b/frontend/src/components/MessageDialogLoad.tsx
index 966e064..acea27d 100644
--- a/frontend/src/components/MessageDialogLoad.tsx
+++ b/frontend/src/components/MessageDialogLoad.tsx
@@ -1,29 +1,31 @@
 import React from 'react';
-import "@css/Dialog.css"
+import '@css/Dialog.css';
 interface MessageDialogLoadProps {
-    title: string;    
+  title: string;
-        onClose: () => void;
+  onClose: () => void;
-};
+}
-const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({ title, onClose }) => {
+const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({
-    return (
+  title,
-        <div className='dimmer'>
+  onClose,
-            <div className='dialog'>
+}) => {
-                <div className='dialog-element dialog-header'>
+  return (
-                    <span>{title}</span>
+    <div className="dimmer">
-                </div>
+      <div className="dialog">
-                <div className='dialog-element dialog-description'>
+        <div className="dialog-element dialog-header">
-                                        <div style={{display: "flex", justifyContent: "center"}}>
+          <span>{title}</span>
-                        <span className="loader"></span>
-                                        </div>
-                </div>
-                <div className='dialog-element dialog-btns-container'>
-                </div>
-            </div>
        </div>
-    )
+        <div className="dialog-element dialog-description">
-}
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <span className="loader"></span>
+          </div>
+        </div>
+        <div className="dialog-element dialog-btns-container"></div>
+      </div>
+    </div>
+  );
+};
 export default MessageDialogLoad;
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx
index f765cd8..140d6a3 100644
--- a/frontend/src/components/ModMenu.tsx
+++ b/frontend/src/components/ModMenu.tsx
@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react';
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown from 'react-markdown';
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
-import { MapSummary } from "@customTypes/Map";
+import { MapSummary } from '@customTypes/Map';
-import { ModMenuContent } from "@customTypes/Content";
+import { ModMenuContent } from '@customTypes/Content';
-import { API } from "@api/Api";
+import { API } from '@api/Api';
-import "@css/ModMenu.css";
+import '@css/ModMenu.css';
-import useConfirm from "@hooks/UseConfirm";
+import useConfirm from '@hooks/UseConfirm';
 interface ModMenuProps {
  token?: string;
@@ -28,26 +28,26 @@ const ModMenu: React.FC<ModMenuProps> = ({
  const [routeContent, setRouteContent] = React.useState<ModMenuContent>({
    id: 0,
-    name: "",
+    name: '',
    score: 0,
-    date: "",
+    date: '',
-    showcase: "",
+    showcase: '',
-    description: "No description available.",
+    description: 'No description available.',
    category_id: 1,
  });
-  const [image, setImage] = React.useState<string>("");
+  const [image, setImage] = React.useState<string>('');
-  const [md, setMd] = React.useState<string>("");
+  const [md, setMd] = React.useState<string>('');
  const navigate = useNavigate();
  function compressImage(file: File): Promise<string> {
    const reader = new FileReader();
    reader.readAsDataURL(file);
-    return new Promise((resolve) => {
+    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",
+        'Edit Map Summary Image',
-        "Are you sure you want to submit this to the database?"
+        '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",
+        'Edit Map Summary Route',
-        "Are you sure you want to submit this to the database?"
+        '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",
+        'Create Map Summary Route',
-        "Are you sure you want to submit this to the database?"
+        '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: "",
+        date: '',
-        showcase: "",
+        showcase: '',
-        description: "No description available.",
+        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(-68%)')
-        : (modview.style.transform = "translateY(0%)");
+        : (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 = 'none')
-        : (modview_block.style.display = "block");
+        : (modview_block.style.display = 'block');
    }
  }, [showButton]);
@@ -240,11 +240,9 @@ const ModMenu: React.FC<ModMenuProps> = ({
                  <input
                    type="file"
                    accept="image/*"
-                    onChange={(e) => {
+                    onChange={e => {
                      if (e.target.files) {
-                        compressImage(e.target.files[0]).then((d) =>
+                        compressImage(e.target.files[0]).then(d => setImage(d));
-                          setImage(d)
-                        );
                      }
                    }}
                  />
@@ -275,7 +273,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                <input
                  type="text"
                  value={routeContent.name}
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      name: e.target.value,
@@ -288,7 +286,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                <input
                  type="number"
                  value={routeContent.score}
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      score: parseInt(e.target.value),
@@ -301,7 +299,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                <input
                  type="date"
                  value={routeContent.date}
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      date: e.target.value,
@@ -314,7 +312,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                <input
                  type="text"
                  value={routeContent.showcase}
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      showcase: e.target.value,
@@ -324,12 +322,12 @@ 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
                  value={routeContent.description}
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      description: e.target.value,
@@ -339,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
@@ -380,7 +378,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
              <div id="modview-route-category">
                <span>Category:</span>
                <select
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      category_id: parseInt(e.target.value),
@@ -393,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
@@ -410,7 +408,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                <input
                  type="text"
                  value={routeContent.name}
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      name: e.target.value,
@@ -423,7 +421,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                <input
                  type="number"
                  value={routeContent.score}
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      score: parseInt(e.target.value),
@@ -436,7 +434,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                <input
                  type="date"
                  value={routeContent.date}
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      date: e.target.value,
@@ -449,7 +447,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                <input
                  type="text"
                  value={routeContent.showcase}
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      showcase: e.target.value,
@@ -459,12 +457,12 @@ 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
                  value={routeContent.description}
-                  onChange={(e) => {
+                  onChange={e => {
                    setRouteContent({
                      ...routeContent,
                      description: e.target.value,
@@ -474,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 b899965..add36ca 100644
--- a/frontend/src/components/RankingEntry.tsx
+++ b/frontend/src/components/RankingEntry.tsx
@@ -1,46 +1,66 @@
 import React from 'react';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
-import { RankingType, SteamRanking, SteamRankingType } from '@customTypes/Ranking';
+import {
+  RankingType,
+  SteamRanking,
+  SteamRankingType,
+} from '@customTypes/Ranking';
 enum RankingCategories {
-    rankings_overall,
+  rankings_overall,
-    rankings_multiplayer,
+  rankings_multiplayer,
-    rankings_singleplayer
+  rankings_singleplayer,
 }
 interface RankingEntryProps {
-    curRankingData: RankingType | SteamRankingType;
+  curRankingData: RankingType | SteamRankingType;
-    currentLeaderboardType: RankingCategories
+  currentLeaderboardType: RankingCategories;
-};
-const RankingEntry: React.FC<RankingEntryProps> = (prop) => {
-    if ("placement" in prop.curRankingData) {
-        return (
-            <div className='leaderboard-entry'>
-                <span>{prop.curRankingData.placement}</span>
-                <div>
-                <Link to={`/users/${prop.curRankingData.user.steam_id}`}>           
-                    <img src={prop.curRankingData.user.avatar_link}></img>
-                    <span>{prop.curRankingData.user.user_name}</span>
-                </Link>
-                </div>
-                <span>{prop.curRankingData.total_score}</span>
-            </div>
-        )
-    } else {
-        return (
-            <div className='leaderboard-entry'>
-                <span>{prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_rank : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_rank : prop.curRankingData.overall_rank}</span>
-                <div>
-                <Link to={`/users/${prop.curRankingData.steam_id}`}>           
-                    <img src={prop.curRankingData.avatar_link}></img>
-                    <span>{prop.curRankingData.user_name}</span>
-                </Link>
-                </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>
-        )
-    }
 }
+const RankingEntry: React.FC<RankingEntryProps> = prop => {
+  if ('placement' in prop.curRankingData) {
+    return (
+      <div className="leaderboard-entry">
+        <span>{prop.curRankingData.placement}</span>
+        <div>
+          <Link to={`/users/${prop.curRankingData.user.steam_id}`}>
+            <img src={prop.curRankingData.user.avatar_link}></img>
+            <span>{prop.curRankingData.user.user_name}</span>
+          </Link>
+        </div>
+        <span>{prop.curRankingData.total_score}</span>
+      </div>
+    );
+  } else {
+    return (
+      <div className="leaderboard-entry">
+        <span>
+          {prop.currentLeaderboardType ==
+          RankingCategories.rankings_singleplayer
+            ? prop.curRankingData.sp_rank
+            : prop.currentLeaderboardType ==
+                RankingCategories.rankings_multiplayer
+              ? prop.curRankingData.mp_rank
+              : prop.curRankingData.overall_rank}
+        </span>
+        <div>
+          <Link to={`/users/${prop.curRankingData.steam_id}`}>
+            <img src={prop.curRankingData.avatar_link}></img>
+            <span>{prop.curRankingData.user_name}</span>
+          </Link>
+        </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 67f7f3d..71b79be 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,23 +1,38 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, PortalIcon, SearchIcon, UploadIcon } from '@images/Images';
+import {
+  BookIcon,
+  FlagIcon,
+  HelpIcon,
+  HomeIcon,
+  LogoIcon,
+  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";
+import '@css/Sidebar.css';
 interface SidebarProps {
  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
  profile?: UserProfile;
  setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
  onUploadRun: () => void;
-};
+}
-const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUploadRun }) => {
-  const [searchData, setSearchData] = React.useState<Search | undefined>(undefined);
+const Sidebar: React.FC<SidebarProps> = ({
+  setToken,
+  profile,
+  setProfile,
+  onUploadRun,
+}) => {
+  const [searchData, setSearchData] = React.useState<Search | undefined>(
+    undefined
+  );
  const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false);
  const [isSidebarOpen, setSidebarOpen] = React.useState<boolean>(true);
@@ -25,71 +40,86 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
  const path = location.pathname;
  const handle_sidebar_click = (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() }
+    if (isSidebarOpen) {
+      setSidebarOpen(false);
+      _handle_sidebar_hide();
+    }
    // clusterfuck
    btn.forEach((e, i) => {
-      btn[i].classList.remove("sidebar-button-selected")
+      btn[i].classList.remove('sidebar-button-selected');
-      btn[i].classList.add("sidebar-button-deselected")
+      btn[i].classList.add('sidebar-button-deselected');
-    })
+    });
-    btn[clicked_sidebar_idx].classList.add("sidebar-button-selected")
+    btn[clicked_sidebar_idx].classList.add('sidebar-button-selected');
-    btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected")
+    btn[clicked_sidebar_idx].classList.remove('sidebar-button-deselected');
  };
  const _handle_sidebar_hide = () => {
-    var btn = document.querySelectorAll("button.sidebar-button") as NodeListOf<HTMLElement>
+    var btn = document.querySelectorAll(
-    const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf<HTMLElement>
+      'button.sidebar-button'
-    const side = document.querySelector("#sidebar-list") as HTMLElement;
+    ) as NodeListOf<HTMLElement>;
-    const searchbar = document.querySelector("#searchbar") as HTMLInputElement;
+    const span = document.querySelectorAll(
-    const uploadRunBtn = document.querySelector("#upload-run") as HTMLInputElement;
+      'button.sidebar-button>span'
-    const uploadRunSpan = document.querySelector("#upload-run>span") as HTMLInputElement;
+    ) 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;
+    const uploadRunSpan = document.querySelector(
+      '#upload-run>span'
+    ) as HTMLInputElement;
    if (isSidebarOpen) {
      if (profile) {
-        const login = document.querySelectorAll(".login>button")[1] as HTMLElement;
+        const login = document.querySelectorAll(
-        login.style.opacity = "1"
+          '.login>button'
-        uploadRunBtn.style.width = "310px"
+        )[1] as HTMLElement;
-        uploadRunBtn.style.padding = "0.4em 0 0 11px"
+        login.style.opacity = '1';
-        uploadRunSpan.style.opacity = "0"
+        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)
+        }, 100);
      }
      setSidebarOpen(false);
-      side.style.width = "320px"
+      side.style.width = '320px';
      btn.forEach((e, i) => {
-        e.style.width = "310px"
+        e.style.width = '310px';
-        e.style.padding = "0.4em 0 0 11px"
+        e.style.padding = '0.4em 0 0 11px';
        setTimeout(() => {
-          span[i].style.opacity = "1"
+          span[i].style.opacity = '1';
-        }, 100)
+        }, 100);
      });
-      side.style.zIndex = "2"
+      side.style.zIndex = '2';
    } else {
      if (profile) {
-        const login = document.querySelectorAll(".login>button")[1] as HTMLElement;
+        const login = document.querySelectorAll(
-        login.style.opacity = "0"
+          '.login>button'
-        uploadRunBtn.style.width = "40px"
+        )[1] as HTMLElement;
-        uploadRunBtn.style.padding = "0.4em 0 0 5px"
+        login.style.opacity = '0';
-        uploadRunSpan.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.width = '40px';
-        e.style.padding = "0.4em 0 0 5px"
+        e.style.padding = '0.4em 0 0 5px';
-        span[i].style.opacity = "0"
+        span[i].style.opacity = '0';
-      })
+      });
      setTimeout(() => {
-        side.style.zIndex = "0"
+        side.style.zIndex = '0';
      }, 300);
    }
  };
  const _handle_sidebar_lock = () => {
    if (!isSidebarLocked) {
-      _handle_sidebar_hide()
+      _handle_sidebar_hide();
      setIsSidebarLocked(true);
      setTimeout(() => setIsSidebarLocked(false), 300);
    }
@@ -101,98 +131,148 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
  };
  React.useEffect(() => {
-    if (path === "/") { handle_sidebar_click(1) }
+    if (path === '/') {
-    else if (path.includes("games")) { handle_sidebar_click(2) }
+      handle_sidebar_click(1);
-    else if (path.includes("rankings")) { handle_sidebar_click(3) }
+    } 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('profile')) {
-    else if (path.includes("rules")) { handle_sidebar_click(5) }
+      handle_sidebar_click(4);
-    else if (path.includes("about")) { handle_sidebar_click(6) }
+    } else if (path.includes('rules')) {
+      handle_sidebar_click(5);
+    } else if (path.includes('about')) {
+      handle_sidebar_click(6);
+    }
  }, [path]);
  return (
-    <div id='sidebar'>
+    <div id="sidebar">
      <Link to="/" tabIndex={-1}>
-        <div id='logo'> {/* logo */}
+        <div id="logo">
-          <img src={LogoIcon} alt="" height={"80px"} />
+          {' '}
-          <div id='logo-text'>
+          {/* logo */}
-            <span><b>PORTAL 2</b></span><br />
+          <img src={LogoIcon} alt="" height={'80px'} />
+          <div id="logo-text">
+            <span>
+              <b>PORTAL 2</b>
+            </span>
+            <br />
            <span>Least Portals Hub</span>
          </div>
        </div>
      </Link>
-      <div id='sidebar-list'> {/* List */}
+      <div id="sidebar-list">
-        <div id='sidebar-toplist'> {/* Top */}
+        {' '}
+        {/* List */}
-          <button className='sidebar-button' onClick={() => _handle_sidebar_lock()}><img src={SearchIcon} alt="" /><span>Search</span></button>
+        <div id="sidebar-toplist">
+          {' '}
+          {/* Top */}
+          <button
+            className="sidebar-button"
+            onClick={() => _handle_sidebar_lock()}
+          >
+            <img src={SearchIcon} alt="" />
+            <span>Search</span>
+          </button>
          <span></span>
          <Link to="/" tabIndex={-1}>
-            <button className='sidebar-button'><img src={HomeIcon} alt="homepage" /><span>Home&nbsp;Page</span></button>
+            <button className="sidebar-button">
+              <img src={HomeIcon} alt="homepage" />
+              <span>Home&nbsp;Page</span>
+            </button>
          </Link>
          <Link to="/games" tabIndex={-1}>
-            <button className='sidebar-button'><img src={PortalIcon} alt="games" /><span>Games</span></button>
+            <button className="sidebar-button">
+              <img src={PortalIcon} alt="games" />
+              <span>Games</span>
+            </button>
          </Link>
          <Link to="/rankings" tabIndex={-1}>
-            <button className='sidebar-button'><img src={FlagIcon} alt="rankings" /><span>Rankings</span></button>
+            <button className="sidebar-button">
+              <img src={FlagIcon} alt="rankings" />
+              <span>Rankings</span>
+            </button>
          </Link>
          {/* <Link to="/news" tabIndex={-1}>
            <button className='sidebar-button'><img src={NewsIcon} alt="news" /><span>News</span></button>
          </Link> */}
          {/* <Link to="/scorelog" tabIndex={-1}>
            <button className='sidebar-button'><img src={TableIcon} alt="scorelogs" /><span>Score&nbsp;Logs</span></button>
          </Link> */}
        </div>
-        <div id='sidebar-bottomlist'>
+        <div id="sidebar-bottomlist">
          <span></span>
-          {
+          {profile && profile.profile ? (
-            profile && profile.profile ?
+            <button
-              <button id='upload-run' className='submit-run-button' onClick={() => onUploadRun()}><img src={UploadIcon} alt="upload" /><span>Upload&nbsp;Record</span></button>
+              id="upload-run"
-              : 
+              className="submit-run-button"
-              <span></span>
+              onClick={() => onUploadRun()}
-          }
+            >
+              <img src={UploadIcon} alt="upload" />
+              <span>Upload&nbsp;Record</span>
+            </button>
+          ) : (
+            <span></span>
+          )}
-          <Login setToken={setToken} profile={profile} setProfile={setProfile} />
+          <Login
+            setToken={setToken}
+            profile={profile}
+            setProfile={setProfile}
+          />
          <Link to="/rules" tabIndex={-1}>
-            <button className='sidebar-button'><img src={BookIcon} alt="rules" /><span>Leaderboard&nbsp;Rules</span></button>
+            <button className="sidebar-button">
+              <img src={BookIcon} alt="rules" />
+              <span>Leaderboard&nbsp;Rules</span>
+            </button>
          </Link>
          <Link to="/about" tabIndex={-1}>
-            <button className='sidebar-button'><img src={HelpIcon} alt="about" /><span>About&nbsp;LPHUB</span></button>
+            <button className="sidebar-button">
+              <img src={HelpIcon} alt="about" />
+              <span>About&nbsp;LPHUB</span>
+            </button>
          </Link>
        </div>
      </div>
      <div>
-        <input type="text" id='searchbar' placeholder='Search for map or a player...' onChange={(e) => _handle_search_change(e.target.value)} />
+        <input
+          type="text"
-        <div id='search-data'>
+          id="searchbar"
+          placeholder="Search for map or a player..."
+          onChange={e => _handle_search_change(e.target.value)}
+        />
+        <div id="search-data">
          {searchData?.maps.map((q, index) => (
-            <Link to={`/maps/${q.id}`} className='search-map' key={index}>
+            <Link to={`/maps/${q.id}`} className="search-map" key={index}>
              <span>{q.game}</span>
              <span>{q.chapter}</span>
              <span>{q.map}</span>
            </Link>
          ))}
-          {searchData?.players.map((q, index) =>
+          {searchData?.players.map((q, index) => (
-          (
+            <Link
-            <Link to={
+              to={
-              profile && q.steam_id === profile.steam_id ? `/profile` :
+                profile && q.steam_id === profile.steam_id
-                `/users/${q.steam_id}`
+                  ? `/profile`
-            } className='search-player' key={index}>
+                  : `/users/${q.steam_id}`
-              <img src={q.avatar_link} alt='pfp'></img>
+              }
-              <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
+              className="search-player"
+              key={index}
+            >
+              <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>
    </div>
diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 4bcaa6a..1ba166a 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -2,49 +2,67 @@ 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
+  selectedRun: number;
  setSelectedRun: (x: number) => void;
  data: MapSummary;
 }
-const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data }) => {
+const Summary: React.FC<SummaryProps> = ({
+  selectedRun,
+  setSelectedRun,
+  data,
+}) => {
  const [selectedCategory, setSelectedCategory] = React.useState<number>(1);
  const [historySelected, setHistorySelected] = React.useState<boolean>(false);
  function _select_run(idx: number, category_id: number) {
-    let r = document.querySelectorAll("button.record");
+    let r = document.querySelectorAll('button.record');
-    r.forEach(e => (e as HTMLElement).style.backgroundColor = "#2b2e46");
+    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);
    }
-  };
+  }
  function _get_youtube_id(url: string): string {
    const urlArray = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
-    return (urlArray[2] !== undefined) ? urlArray[2].split(/[^0-9a-z_-]/i)[0] : urlArray[0];
+    return urlArray[2] !== undefined
-  };
+      ? urlArray[2].split(/[^0-9a-z_-]/i)[0]
+      : urlArray[0];
+  }
  function _category_change() {
-    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" });
+    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;
+    const idx =
-    (btn[idx] as HTMLElement).style.backgroundColor = "#202232";
+      selectedCategory === 1
-  };
+        ? 0
+        : data.map.is_coop
+          ? selectedCategory - 3
+          : selectedCategory - 1;
+    (btn[idx] as HTMLElement).style.backgroundColor = '#202232';
+  }
  function _history_change() {
-    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" });
+    btn.forEach(e => {
-    (historySelected ? btn[1] as HTMLElement : btn[0] as HTMLElement).style.backgroundColor = "#202232";
+      (e as HTMLElement).style.backgroundColor = '#2b2e46';
-  };
+    });
+    (historySelected
+      ? (btn[1] as HTMLElement)
+      : (btn[0] as HTMLElement)
+    ).style.backgroundColor = '#202232';
+  }
  React.useEffect(() => {
    _history_change();
@@ -61,119 +79,188 @@ const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data })
  return (
    <>
-      <section id='section3' className='summary1'>
+      <section id="section3" className="summary1">
-        <div id='category'
+        <div
-          style={data.map.image === "" ? { backgroundColor: "#202232" } : {}}>
+          id="category"
-          <img src={data.map.image} alt="" id='category-image'></img>
+          style={data.map.image === '' ? { backgroundColor: '#202232' } : {}}
-          <p><span className='portal-count'>{data.summary.routes[selectedRun].history.score_count}</span>
+        >
-            {data.summary.routes[selectedRun].history.score_count === 1 ? ` portal` : ` portals`}</p>
+          <img src={data.map.image} alt="" id="category-image"></img>
-          {data.map.is_coop ? // TODO: make this part dynamic
+          <p>
-            (
+            <span className="portal-count">
-              <span style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
+              {data.summary.routes[selectedRun].history.score_count}
-                <button onClick={() => setSelectedCategory(1)}>CM</button>
+            </span>
-                <button onClick={() => setSelectedCategory(4)}>Any%</button>
+            {data.summary.routes[selectedRun].history.score_count === 1
-                <button onClick={() => setSelectedCategory(5)}>All Courses</button>
+              ? ` portal`
-              </span>
+              : ` portals`}
-            )
+          </p>
-            :
+          {data.map.is_coop ? ( // TODO: make this part dynamic
-            (
+            <span style={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
-              <span style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr" }}>
+              <button onClick={() => setSelectedCategory(1)}>CM</button>
+              <button onClick={() => setSelectedCategory(4)}>Any%</button>
-                <button onClick={() => setSelectedCategory(1)}>CM</button>
+              <button onClick={() => setSelectedCategory(5)}>
-                <button onClick={() => setSelectedCategory(2)}>NoSLA</button>
+                All Courses
-                <button onClick={() => setSelectedCategory(3)}>Inbounds SLA</button>
+              </button>
-                <button onClick={() => setSelectedCategory(4)}>Any%</button>
+            </span>
-              </span>
+          ) : (
-            )
+            <span style={{ gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
-          }
+              <button onClick={() => setSelectedCategory(1)}>CM</button>
+              <button onClick={() => setSelectedCategory(2)}>NoSLA</button>
+              <button onClick={() => setSelectedCategory(3)}>
+                Inbounds SLA
+              </button>
+              <button onClick={() => setSelectedCategory(4)}>Any%</button>
+            </span>
+          )}
        </div>
-        <div id='history'>
+        <div id="history">
+          <div style={{ display: historySelected ? 'none' : 'block' }}>
-          <div style={{ display: historySelected ? "none" : "block" }}>
+            {data.summary.routes.filter(e => e.category.id === selectedCategory)
-            {data.summary.routes.filter(e => e.category.id === selectedCategory).length === 0 ? <h5>There are no records for this map.</h5> :
+              .length === 0 ? (
+              <h5>There are no records for this map.</h5>
+            ) : (
              <>
-                <div className='record-top'>
+                <div className="record-top">
                  <span>Date</span>
                  <span>Record</span>
                  <span>First Completion</span>
                </div>
                <hr />
-                <div id='records'>
+                <div id="records">
                  {data.summary.routes
                    .filter(e => e.category.id === selectedCategory)
                    .map((r, index) => (
-                      <button className='record' key={index} onClick={() => {
+                      <button
-                        _select_run(index, r.category.id);
+                        className="record"
-                      }}>
+                        key={index}
-                        <span>{new Date(r.history.date).toLocaleDateString(
+                        onClick={() => {
-                          "en-US", { month: 'long', day: 'numeric', year: 'numeric' }
+                          _select_run(index, r.category.id);
-                        )}</span>
+                        }}
+                      >
+                        <span>
+                          {new Date(r.history.date).toLocaleDateString(
+                            'en-US',
+                            { month: 'long', day: 'numeric', year: 'numeric' }
+                          )}
+                        </span>
                        <span>{r.history.score_count}</span>
                        <span>{r.history.runner_name}</span>
                      </button>
                    ))}
                </div>
              </>
-            }
+            )}
          </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> :
+            {data.summary.routes.filter(e => e.category.id === selectedCategory)
-              <div id='graph'>
+              .length === 0 ? (
+              <h5>There are no records for this map.</h5>
+            ) : (
+              <div id="graph">
                {/* <div>{graph(1)}</div>
                <div>{graph(2)}</div>
                <div>{graph(3)}</div> */}
              </div>
-            }
+            )}
          </div>
          <span>
            <button onClick={() => setHistorySelected(false)}>List</button>
            <button onClick={() => setHistorySelected(true)}>Graph</button>
          </span>
        </div>
+      </section>
+      <section id="section4" className="summary1">
-      </section >
+        <div id="difficulty">
-      <section id='section4' className='summary1'>
-        <div id='difficulty'>
          <span>Difficulty</span>
-          {data.summary.routes[selectedRun].rating === 0 && (<span>N/A</span>)}
+          {data.summary.routes[selectedRun].rating === 0 && <span>N/A</span>}
-          {data.summary.routes[selectedRun].rating === 1 && (<span style={{ color: "lime" }}>Very easy</span>)}
+          {data.summary.routes[selectedRun].rating === 1 && (
-          {data.summary.routes[selectedRun].rating === 2 && (<span style={{ color: "green" }}>Easy</span>)}
+            <span style={{ color: 'lime' }}>Very easy</span>
-          {data.summary.routes[selectedRun].rating === 3 && (<span style={{ color: "yellow" }}>Medium</span>)}
+          )}
-          {data.summary.routes[selectedRun].rating === 4 && (<span style={{ color: "orange" }}>Hard</span>)}
+          {data.summary.routes[selectedRun].rating === 2 && (
-          {data.summary.routes[selectedRun].rating === 5 && (<span style={{ color: "red" }}>Very hard</span>)}
+            <span style={{ color: 'green' }}>Easy</span>
+          )}
+          {data.summary.routes[selectedRun].rating === 3 && (
+            <span style={{ color: 'yellow' }}>Medium</span>
+          )}
+          {data.summary.routes[selectedRun].rating === 4 && (
+            <span style={{ color: 'orange' }}>Hard</span>
+          )}
+          {data.summary.routes[selectedRun].rating === 5 && (
+            <span style={{ color: 'red' }}>Very hard</span>
+          )}
          <div>
-            {data.summary.routes[selectedRun].rating === 1 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes[selectedRun].rating === 1 ? (
-            {data.summary.routes[selectedRun].rating === 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
+              <div
-            {data.summary.routes[selectedRun].rating === 3 ? (<div className='difficulty-rating' style={{ backgroundColor: "yellow" }}></div>) : (<div className='difficulty-rating'></div>)}
+                className="difficulty-rating"
-            {data.summary.routes[selectedRun].rating === 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "orange" }}></div>) : (<div className='difficulty-rating'></div>)}
+                style={{ backgroundColor: 'lime' }}
-            {data.summary.routes[selectedRun].rating === 5 ? (<div className='difficulty-rating' style={{ backgroundColor: "red" }}></div>) : (<div className='difficulty-rating'></div>)}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.summary.routes[selectedRun].rating === 2 ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: 'green' }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.summary.routes[selectedRun].rating === 3 ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: 'yellow' }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.summary.routes[selectedRun].rating === 4 ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: 'orange' }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.summary.routes[selectedRun].rating === 5 ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: 'red' }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
          </div>
        </div>
-        <div id='count'>
+        <div id="count">
          <span>Completion Count</span>
          <div>{data.summary.routes[selectedRun].completion_count}</div>
        </div>
      </section>
-      <section id='section5' className='summary1'>
+      <section id="section5" className="summary1">
-        <div id='description'>
+        <div id="description">
-          {data.summary.routes[selectedRun].showcase !== "" ?
+          {data.summary.routes[selectedRun].showcase !== '' ? (
-            <iframe title='Showcase video' src={"https://www.youtube.com/embed/" + _get_youtube_id(data.summary.routes[selectedRun].showcase)}> </iframe>
+            <iframe
-            : ""}
+              title="Showcase video"
+              src={
+                'https://www.youtube.com/embed/' +
+                _get_youtube_id(data.summary.routes[selectedRun].showcase)
+              }
+            >
+              {' '}
+            </iframe>
+          ) : (
+            ''
+          )}
          <h3>Route Description</h3>
-          <span id='description-text'>
+          <span id="description-text">
            <ReactMarkdown>
              {data.summary.routes[selectedRun].description}
            </ReactMarkdown>
          </span>
        </div>
      </section>
    </>
  );
 };
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index c02fdb8..227a564 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -8,7 +8,7 @@ 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 useMessageLoad from '@hooks/UseMessageLoad';
 import { MapNames } from '@customTypes/MapNames';
 interface UploadRunDialogProps {
@@ -18,21 +18,27 @@ interface UploadRunDialogProps {
  games: Game[];
 }
-const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, games }) => {
+const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
+  token,
+  open,
+  onClose,
+  games,
+}) => {
  const { message, MessageDialogComponent } = useMessage();
  const { confirm, ConfirmDialogComponent } = useConfirm();
-  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad();
+  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } =
+    useMessageLoad();
  const navigate = useNavigate();
-  const [uploadRunContent, setUploadRunContent] = React.useState<UploadRunContent>({
+  const [uploadRunContent, setUploadRunContent] =
-    host_demo: null,
+    React.useState<UploadRunContent>({
-    partner_demo: null,
+      host_demo: null,
-  });
+      partner_demo: null,
+    });
  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);
@@ -41,7 +47,8 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
  const [loading, setLoading] = React.useState<boolean>(false);
  const [dragHightlight, setDragHighlight] = React.useState<boolean>(false);
-  const [dragHightlightPartner, setDragHighlightPartner] = React.useState<boolean>(false);
+  const [dragHightlightPartner, setDragHighlightPartner] =
+    React.useState<boolean>(false);
  const fileInputRef = React.useRef<HTMLInputElement>(null);
  const fileInputRefPartner = React.useRef<HTMLInputElement>(null);
@@ -52,9 +59,12 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
    } else {
      fileInputRefPartner.current?.click();
    }
-  }
+  };
-  const _handle_drag_over = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
+  const _handle_drag_over = (
+    e: React.DragEvent<HTMLDivElement>,
+    host: boolean
+  ) => {
    e.preventDefault();
    e.stopPropagation();
    if (host) {
@@ -62,9 +72,12 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
    } else {
      setDragHighlightPartner(true);
    }
-  }
+  };
-  const _handle_drag_leave = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
+  const _handle_drag_leave = (
+    e: React.DragEvent<HTMLDivElement>,
+    host: boolean
+  ) => {
    e.preventDefault();
    e.stopPropagation();
    if (host) {
@@ -72,7 +85,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 +93,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);
@@ -89,9 +102,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
      setDropdown1Vis(!dropdown1Vis);
    } else if (dropdown == 2) {
      setDropdown2Vis(!dropdown2Vis);
-      document.querySelector("#dropdown2")?.scrollTo(0, 0);
+      document.querySelector('#dropdown2')?.scrollTo(0, 0);
    }
-  }
+  };
  const _handle_game_select = async (game_id: string, game_name: string) => {
    setLoading(true);
@@ -120,62 +133,85 @@ 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.")
+          await message('Error', 'You must select a host demo to upload.');
-          return
+          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
+          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
+          return;
        }
      }
      const demo = SourceDemoParser.default()
        .setOptions({ packets: true, header: true })
        .parse(await uploadRunContent.host_demo.arrayBuffer());
-      const scoreboard = demo.findPacket<NetMessages.SvcUserMessage>((msg) => {
+      const scoreboard = demo.findPacket<NetMessages.SvcUserMessage>(msg => {
-        return msg instanceof NetMessages.SvcUserMessage && msg.userMessage instanceof ScoreboardTempUpdate;
+        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.")
+        await message(
-        return
+          '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.")
+        await message(
-        return
+          '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.")
+        await message(
-        return
+          '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.")
+        await message(
-        return
+          'Error',
+          'Error while processing demo: Invalid singleplayer demo in cooperative submission.'
+        );
+        return;
      }
-      const { portalScore, timeScore } = scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {};
+      const { portalScore, timeScore } =
+        scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {};
-      const userConfirmed = await confirm("Upload Record", `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?`);
+      const userConfirmed = await confirm(
+        'Upload Record',
+        `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?`
+      );
      if (!userConfirmed) {
        return;
      }
-      messageLoad("Uploading...");
+      messageLoad('Uploading...');
-      const [success, response] = await API.post_record(token, uploadRunContent, MapNames[demo.mapName]);
+      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');
      }
    }
  };
@@ -184,7 +220,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
    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]);
@@ -196,84 +232,191 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
        {MessageDialogLoadComponent}
        {ConfirmDialogComponent}
-        <div id='upload-run-menu'>
+        <div id="upload-run-menu">
-          <div id='upload-run-menu-add'>
+          <div id="upload-run-menu-add">
-            <div id='upload-run-route-category'>
+            <div id="upload-run-route-category">
-              <div style={{ padding: "15px 0px" }} className='upload-run-dropdown-container upload-run-item'>
+              <div
-                <h3 style={{ margin: "0px 0px" }}>Select Game</h3>
+                style={{ padding: '15px 0px' }}
-                <div onClick={() => _handle_dropdowns(1)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between", margin: "10px 0px" }}>
+                className="upload-run-dropdown-container upload-run-item"
-                  <div className='dropdown-cur'>{selectedGameName}</div>
+              >
-                  <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i>
+                <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',
+                  }}
+                >
+                  <div className="dropdown-cur">{selectedGameName}</div>
+                  <i
+                    style={{
+                      rotate: '-90deg',
+                      transform: 'translate(-5px, 10px)',
+                    }}
+                    className="triangle"
+                  ></i>
                </div>
-                <div style={{ top: "110px" }} className={dropdown1Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
+                <div
-                  {games.map((game) => (
+                  style={{ top: '110px' }}
-                    <div onClick={() => { _handle_game_select(game.id.toString(), game.name); _handle_dropdowns(1) }} key={game.id}>{game.name}</div>
+                  className={
+                    dropdown1Vis
+                      ? 'upload-run-dropdown'
+                      : 'upload-run-dropdown hidden'
+                  }
+                >
+                  {games.map(game => (
+                    <div
+                      onClick={() => {
+                        _handle_game_select(game.id.toString(), game.name);
+                        _handle_dropdowns(1);
+                      }}
+                      key={game.id}
+                    >
+                      {game.name}
+                    </div>
                  ))}
                </div>
              </div>
-              {
+              {!loading && (
-                !loading &&
+                <>
-                (
+                  <div>
-                  <>
+                    <h3 style={{ margin: '10px 0px' }}>Host Demo</h3>
+                    <div
-                    <div>
+                      onClick={() => {
-                      <h3 style={{ margin: "10px 0px" }}>Host Demo</h3>
+                        _handle_file_click(true);
-                      <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)} />
+                      onDragOver={e => {
-                        {!uploadRunContent.host_demo ?
+                        _handle_drag_over(e, true);
+                      }}
+                      onDrop={e => {
+                        _handle_drop(e, true);
+                      }}
+                      onDragLeave={e => {
+                        _handle_drag_leave(e, true);
+                      }}
+                      className={`upload-run-drag-area ${dragHightlight ? 'upload-run-drag-area-highlight' : ''} ${uploadRunContent.host_demo ? 'upload-run-drag-area-hidden' : ''}`}
+                    >
+                      <input
+                        ref={fileInputRef}
+                        type="file"
+                        name="host_demo"
+                        id="host_demo"
+                        accept=".dem"
+                        onChange={e =>
+                          _handle_file_change(e.target.files, true)
+                        }
+                      />
+                      {!uploadRunContent.host_demo ? (
+                        <div>
+                          <span>Drag and drop</span>
                          <div>
-                            <span>Drag and drop</span>
+                            <span
-                            <div>
+                              style={{
-                              <span style={{ fontFamily: "BarlowSemiCondensed-Regular" }}>Or click here</span><br />
+                                fontFamily: 'BarlowSemiCondensed-Regular',
-                              <button style={{ borderRadius: "24px", padding: "5px 8px", margin: "5px 0px" }}>Upload</button>
+                              }}
-                            </div>
+                            >
+                              Or click here
+                            </span>
+                            <br />
+                            <button
+                              style={{
+                                borderRadius: '24px',
+                                padding: '5px 8px',
+                                margin: '5px 0px',
+                              }}
+                            >
+                              Upload
+                            </button>
                          </div>
-                          : null}
+                        </div>
+                      ) : null}
-                        <span className="upload-run-demo-name">{uploadRunContent.host_demo?.name}</span>
-                      </div>
-                      {
-                        games[selectedGameID].is_coop &&
-                        (
-                          <>
-                            <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" : ""}`}>
-                                <input ref={fileInputRefPartner} type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} />                                                  {!uploadRunContent.partner_demo ?
-                                  <div>
-                                    <span>Drag and drop</span>
-                                    <div>
-                                      <span style={{ fontFamily: "BarlowSemiCondensed-Regular" }}>Or click here</span><br />
-                                      <button style={{ borderRadius: "24px", padding: "5px 8px", margin: "5px 0px" }}>Upload</button>
-                                    </div>
-                                  </div>
-                                  : null}
-                                <span className="upload-run-demo-name">{uploadRunContent.partner_demo?.name}</span>
-                              </div>
-                            </div>
-                          </>
-                        )
-                      }
-                    </div>
-                    <div className='search-container'>
+                      <span className="upload-run-demo-name">
+                        {uploadRunContent.host_demo?.name}
+                      </span>
                    </div>
+                    {games[selectedGameID].is_coop && (
-                  </>
+                      <>
-                )
+                        <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' : ''}`}
+                          >
+                            <input
+                              ref={fileInputRefPartner}
+                              type="file"
+                              name="partner_demo"
+                              id="partner_demo"
+                              accept=".dem"
+                              onChange={e =>
+                                _handle_file_change(e.target.files, false)
+                              }
+                            />{' '}
+                            {!uploadRunContent.partner_demo ? (
+                              <div>
+                                <span>Drag and drop</span>
+                                <div>
+                                  <span
+                                    style={{
+                                      fontFamily: 'BarlowSemiCondensed-Regular',
+                                    }}
+                                  >
+                                    Or click here
+                                  </span>
+                                  <br />
+                                  <button
+                                    style={{
+                                      borderRadius: '24px',
+                                      padding: '5px 8px',
+                                      margin: '5px 0px',
+                                    }}
+                                  >
+                                    Upload
+                                  </button>
+                                </div>
+                              </div>
+                            ) : null}
+                            <span className="upload-run-demo-name">
+                              {uploadRunContent.partner_demo?.name}
+                            </span>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                  <div className="search-container"></div>
+                </>
+              )}
            </div>
-            <div className='upload-run-buttons-container'>
+            <div className="upload-run-buttons-container">
              <button onClick={_upload_run}>Submit</button>
-              <button onClick={() => {
+              <button
-                onClose(false);
+                onClick={() => {
-                setUploadRunContent({
+                  onClose(false);
-                  host_demo: null,
+                  setUploadRunContent({
-                  partner_demo: null,
+                    host_demo: null,
-                });
+                    partner_demo: null,
-              }}>Cancel</button>
+                  });
+                }}
+              >
+                Cancel
+              </button>
            </div>
          </div>
        </div>
@@ -281,10 +424,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
    );
  }
-  return (
+  return <></>;
-    <></>
-  );
 };
 export default UploadRunDialog;
diff --git a/frontend/src/hooks/UseConfirm.tsx b/frontend/src/hooks/UseConfirm.tsx
index e86d70d..7b4bffa 100644
--- a/frontend/src/hooks/UseConfirm.tsx
+++ b/frontend/src/hooks/UseConfirm.tsx
@@ -2,39 +2,46 @@ import React, { useState } from 'react';
 import ConfirmDialog from '@components/ConfirmDialog';
 const useConfirm = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
-        const [title, setTitle] = useState<string>("");
+  const [title, setTitle] = useState<string>('');
-        const [subtitle, setSubtitle] = useState<string>("");
+  const [subtitle, setSubtitle] = useState<string>('');
-    const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null);
+  const [resolvePromise, setResolvePromise] = useState<
+    ((value: boolean) => void) | null
+  >(null);
-    const confirm = ( titleN: string, subtitleN: string ) => {
+  const confirm = (titleN: string, subtitleN: string) => {
-        setIsOpen(true);
+    setIsOpen(true);
-                setTitle(titleN);
+    setTitle(titleN);
-                setSubtitle(subtitleN);
+    setSubtitle(subtitleN);
-        return new Promise<boolean>((resolve) => {
+    return new Promise<boolean>(resolve => {
-            setResolvePromise(() => resolve);
+      setResolvePromise(() => resolve);
-        });
+    });
-    };
+  };
-    const handleConfirm = () => {
+  const handleConfirm = () => {
-        setIsOpen(false);
+    setIsOpen(false);
-        if (resolvePromise) {
+    if (resolvePromise) {
-            resolvePromise(true);
+      resolvePromise(true);
-        }
    }
+  };
-    const handleCancel = () => {
+  const handleCancel = () => {
-        setIsOpen(false);
+    setIsOpen(false);
-        if (resolvePromise) {
+    if (resolvePromise) {
-            resolvePromise(false);
+      resolvePromise(false);
-        }
    }
+  };
-    const ConfirmDialogComponent = isOpen && (
+  const ConfirmDialogComponent = isOpen && (
-        <ConfirmDialog title={title} subtitle={subtitle} onConfirm={handleConfirm} onCancel={handleCancel}></ConfirmDialog>
+    <ConfirmDialog
-    );
+      title={title}
+      subtitle={subtitle}
+      onConfirm={handleConfirm}
+      onCancel={handleCancel}
+    ></ConfirmDialog>
+  );
-    return { confirm, ConfirmDialogComponent };
+  return { confirm, ConfirmDialogComponent };
-}
+};
 export default useConfirm;
diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx
index 97ec746..e0afa59 100644
--- a/frontend/src/hooks/UseMessage.tsx
+++ b/frontend/src/hooks/UseMessage.tsx
@@ -1,37 +1,43 @@
 import React, { useState } from 'react';
-import MessageDialog from "@components/MessageDialog";
+import MessageDialog from '@components/MessageDialog';
 const useMessage = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
-    const [title, setTitle] = useState<string>("");
+  const [title, setTitle] = useState<string>('');
-    const [subtitle, setSubtitle] = useState<string>("");
+  const [subtitle, setSubtitle] = useState<string>('');
-    const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(null);
+  const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(
+    null
+  );
-    const message = (title: string, subtitle: string) => {
+  const message = (title: string, subtitle: string) => {
-        setIsOpen(true);
+    setIsOpen(true);
-        setTitle(title);
+    setTitle(title);
-        setSubtitle(subtitle);
+    setSubtitle(subtitle);
-                return new Promise((resolve) => {
+    return new Promise(resolve => {
-                        setResolvePromise(() => resolve);
+      setResolvePromise(() => resolve);
-                });
+    });
-    };
+  };
-    const handleClose = () => {
+  const handleClose = () => {
-        setIsOpen(false);
+    setIsOpen(false);
-        if (resolvePromise) {
+    if (resolvePromise) {
-            resolvePromise();
+      resolvePromise();
-            setResolvePromise(null);
+      setResolvePromise(null);
-        }
+    }
-    };
+  };
-    const MessageDialogComponent = isOpen && (
+  const MessageDialogComponent = isOpen && (
-                <div className="dialog-container">
+    <div className="dialog-container">
-        <MessageDialog title={title} subtitle={subtitle} onClose={handleClose}></MessageDialog>
+      <MessageDialog
-                </div>
+        title={title}
-    );
+        subtitle={subtitle}
+        onClose={handleClose}
+      ></MessageDialog>
+    </div>
+  );
-    return { message, MessageDialogComponent };
+  return { message, MessageDialogComponent };
-}
+};
 export default useMessage;
diff --git a/frontend/src/hooks/UseMessageLoad.tsx b/frontend/src/hooks/UseMessageLoad.tsx
index 228c2b4..ea0b5d8 100644
--- a/frontend/src/hooks/UseMessageLoad.tsx
+++ b/frontend/src/hooks/UseMessageLoad.tsx
@@ -1,35 +1,40 @@
 import React, { useState } from 'react';
-import MessageDialogLoad from "@components/MessageDialogLoad";
+import MessageDialogLoad from '@components/MessageDialogLoad';
 const useMessageLoad = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
-    const [title, setTitle] = useState<string>("");
+  const [title, setTitle] = useState<string>('');
-    const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(null);
+  const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(
+    null
+  );
-        const messageLoad = (title: string) => {
+  const messageLoad = (title: string) => {
-        setIsOpen(true);
+    setIsOpen(true);
-        setTitle(title);
+    setTitle(title);
-                return new Promise((resolve) => {
+    return new Promise(resolve => {
-                        setResolvePromise(() => resolve);
+      setResolvePromise(() => resolve);
-                });
+    });
-    };
+  };
-    const messageLoadClose = () => {
+  const messageLoadClose = () => {
-        setIsOpen(false);
+    setIsOpen(false);
-        if (resolvePromise) {
+    if (resolvePromise) {
-            resolvePromise();
+      resolvePromise();
-            setResolvePromise(null);
+      setResolvePromise(null);
-        }
+    }
-    };
+  };
-    const MessageDialogLoadComponent = isOpen && (
+  const MessageDialogLoadComponent = isOpen && (
-                <div className="dialog-container">
+    <div className="dialog-container">
-        <MessageDialogLoad title={title} onClose={messageLoadClose}></MessageDialogLoad>
+      <MessageDialogLoad
-                </div>
+        title={title}
-    );
+        onClose={messageLoadClose}
+      ></MessageDialogLoad>
+    </div>
+  );
-    return { messageLoad, messageLoadClose, MessageDialogLoadComponent };
+  return { messageLoad, messageLoadClose, MessageDialogLoadComponent };
-}
+};
 export default useMessageLoad;
diff --git a/frontend/src/images/Images.tsx b/frontend/src/images/Images.tsx
index 198431b..9972662 100644
--- a/frontend/src/images/Images.tsx
+++ b/frontend/src/images/Images.tsx
@@ -1,5 +1,5 @@
-import logo from "./png/logo.png"
+import logo from './png/logo.png';
-import login from "./png/login.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';
@@ -20,7 +20,7 @@ import img17 from './png/17.png';
 import img18 from './png/18.png';
 import img19 from './png/19.png';
 import img20 from './png/20.png';
-import img21 from "./png/21.png";
+import img21 from './png/21.png';
 export const LogoIcon = logo;
 export const LoginIcon = login;
@@ -45,4 +45,4 @@ export const SteamIcon = img17;
 export const HistoryIcon = img18;
 export const SortIcon = img19;
 export const UploadIcon = img20;
-export const DeleteIcon = img21;
-\ No newline at end of file
+export const DeleteIcon = img21;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index eec2ff4..2eef1bc 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index a8b7826..a5d34f6 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -5,36 +5,34 @@ import { Helmet } from 'react-helmet';
 import '@css/About.css';
 const About: React.FC = () => {
+  const [aboutText, setAboutText] = React.useState<string>('');
-    const [aboutText, setAboutText] = React.useState<string>("");
+  React.useEffect(() => {
+    const fetchReadme = async () => {
+      try {
+        const response = await fetch(
+          'https://raw.githubusercontent.com/pektezol/lphub/main/README.md'
+        );
+        if (!response.ok) {
+          throw new Error('Failed to fetch README');
+        }
+        const readmeText = await response.text();
+        setAboutText(readmeText);
+      } catch (error) {
+        console.error('Error fetching README:', error);
+      }
+    };
+    fetchReadme();
+  }, []);
-    React.useEffect(() => {
+  return (
-        const fetchReadme = async () => {
+    <div id="about">
-            try {
+      <Helmet>
-                const response = await fetch(
+        <title>LPHUB | About</title>
-                    'https://raw.githubusercontent.com/pektezol/lphub/main/README.md'
+      </Helmet>
-                );
+      <ReactMarkdown>{aboutText}</ReactMarkdown>
-                if (!response.ok) {
+    </div>
-                    throw new Error('Failed to fetch README');
+  );
-                }
-                const readmeText = await response.text();
-                setAboutText(readmeText);
-            } catch (error) {
-                console.error('Error fetching README:', error);
-            }
-        };
-        fetchReadme();
-    }, []);
-    return (
-        <div id="about">
-            <Helmet>
-                <title>LPHUB | About</title>
-            </Helmet>
-            <ReactMarkdown>{aboutText}</ReactMarkdown>
-        </div>
-    );
 };
 export default About;
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index 15cc891..ae0a2d6 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -3,44 +3,45 @@ 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[];
+  games: Game[];
 }
 const Games: React.FC<GamesProps> = ({ games }) => {
+  const _page_load = () => {
+    const loaders = document.querySelectorAll('.loader');
+    loaders.forEach(loader => {
+      (loader as HTMLElement).style.display = 'none';
+    });
+  };
-    const _page_load = () => {
+  React.useEffect(() => {
-        const loaders = document.querySelectorAll(".loader");
+    document
-        loaders.forEach((loader) => {
+      .querySelectorAll('.games-page-item-body')
-            (loader as HTMLElement).style.display = "none";
+      .forEach((game, index) => {
-        });
+        game.innerHTML = '';
-    }
+      });
+    _page_load();
+  }, []);
-    React.useEffect(() => {
+  return (
-        document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
+    <div className="games-page">
-            game.innerHTML = "";
+      <Helmet>
-        });
+        <title>LPHUB | Games</title>
-        _page_load();
+      </Helmet>
-    }, []);
+      <section>
+        <div className="games-page-content">
-    return (
+          <div className="games-page-item-content">
-        <div className='games-page'>
+            {games.map((game, index) => (
-            <Helmet>
+              <GameEntry game={game} key={index} />
-                <title>LPHUB | Games</title>
+            ))}
-            </Helmet>
+          </div>
-            <section>
-                <div className='games-page-content'>
-                    <div className='games-page-item-content'>
-                        {games.map((game, index) => (
-                            <GameEntry game={game} key={index} />
-                        ))}
-                    </div>
-                </div>
-            </section>
        </div>
-    );
+      </section>
+    </div>
+  );
 };
 export default Games;
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 4f46af5..859af52 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -2,21 +2,30 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 const Homepage: React.FC = () => {
+  return (
-    return (
+    <main>
-        <main>
+      <Helmet>
-            <Helmet>
+        <title>LPHUB | Homepage</title>
-                <title>LPHUB | Homepage</title>
+      </Helmet>
-            </Helmet>
+      <section>
-            <section>
+        <p />
-                <p />
+        <h1>Welcome to Least Portals Hub!</h1>
-                <h1>Welcome to Least Portals Hub!</h1>
+        <p>
-                <p>At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.</p>
+          At the moment, LPHUB is in beta state. This means that the site has
-                <p>The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.</p>
+          only the core functionalities enabled for providing both collaborative
-                <p>By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.</p>
+          information and competitive leaderboards.
-            </section>
+        </p>
-        </main>
+        <p>
-    );
+          The website should feel intuitive to navigate around. For any type of
+          feedback, reach us at LPHUB Discord server.
+        </p>
+        <p>
+          By using LPHUB, you agree that you have read the 'Leaderboard Rules'
+          and the 'About LPHUB' pages.
+        </p>
+      </section>
+    </main>
+  );
 };
 export default Homepage;
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 04938cf..5138964 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react';
-import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
-import { Helmet } from "react-helmet";
+import { Helmet } from 'react-helmet';
-import "@css/Maplist.css";
+import '@css/Maplist.css';
-import { API } from "@api/Api";
+import { API } from '@api/Api';
-import { Game } from "@customTypes/Game";
+import { Game } from '@customTypes/Game';
-import { GameChapter, GamesChapters } from "@customTypes/Chapters";
+import { GameChapter, GamesChapters } from '@customTypes/Chapters';
 const Maplist: React.FC = () => {
  const [game, setGame] = React.useState<Game | null>(null);
@@ -19,41 +19,41 @@ const Maplist: React.FC = () => {
  const [curChapter, setCurChapter] = React.useState<GameChapter>();
  const [numChapters, setNumChapters] = React.useState<number>(0);
-  const [dropdownActive, setDropdownActive] = React.useState("none");
+  const [dropdownActive, setDropdownActive] = React.useState('none');
-  const params = useParams<{ id: string, chapter: string }>();
+  const params = useParams<{ id: string; chapter: string }>();
  const location = useLocation();
  const navigate = useNavigate();
  function _update_currently_selected(catNum2: number) {
    setCurrentlySelected(catNum2);
-    navigate("/games/" + game?.id + "?cat=" + catNum2);
+    navigate('/games/' + game?.id + '?cat=' + catNum2);
    setHasClicked(true);
  }
  const _fetch_chapters = async (chapter_id: string) => {
    const chapters = await API.get_chapters(chapter_id);
    setCurChapter(chapters);
-  }
+  };
  const _handle_dropdown_click = () => {
-    if (dropdownActive == "none") {
+    if (dropdownActive == 'none') {
-      setDropdownActive("block");
+      setDropdownActive('block');
    } else {
-      setDropdownActive("none");
+      setDropdownActive('none');
    }
-  }
+  };
  // im sorry but im too lazy to fix this right now
  useEffect(() => {
    // gameID
-    const gameId = parseFloat(params.id || "");
+    const gameId = parseFloat(params.id || '');
    setId(gameId);
    // location query params
    const queryParams = new URLSearchParams(location.search);
-    if (queryParams.get("chapter")) {
+    if (queryParams.get('chapter')) {
-      let cat = parseFloat(queryParams.get("chapter") || "");
+      let cat = parseFloat(queryParams.get('chapter') || '');
      if (gameId == 2) {
        cat += 10;
      }
@@ -62,7 +62,7 @@ const Maplist: React.FC = () => {
    const _fetch_game = async () => {
      const games = await API.get_games();
-      const foundGame = games.find((game) => game.id === gameId);
+      const foundGame = games.find(game => game.id === gameId);
      // console.log(foundGame)
      if (foundGame) {
        setGame(foundGame);
@@ -74,7 +74,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();
@@ -83,21 +83,19 @@ const Maplist: React.FC = () => {
  useEffect(() => {
    const queryParams = new URLSearchParams(location.search);
-    if (gameChapters != undefined && !queryParams.get("chapter")) {
+    if (gameChapters != undefined && !queryParams.get('chapter')) {
      _fetch_chapters(gameChapters!.chapters[0].id.toString());
    }
-  }, [gameChapters])
+  }, [gameChapters]);
  return (
    <main>
      <Helmet>
        <title>LPHUB | Maplist</title>
      </Helmet>
-      <section style={{ marginTop: "20px" }}>
+      <section style={{ marginTop: '20px' }}>
        <Link to="/games">
-          <button className="nav-button" style={{ borderRadius: "20px" }}>
+          <button className="nav-button" style={{ borderRadius: '20px' }}>
            <i className="triangle"></i>
            <span>Games List</span>
          </button>
@@ -117,7 +115,7 @@ const Maplist: React.FC = () => {
                <h2 className="portal-count">
                  {
                    game?.category_portals.find(
-                      (obj) => obj.category.id === catNum + 1
+                      obj => obj.category.id === catNum + 1
                    )?.portal_count
                  }
                </h2>
@@ -125,7 +123,19 @@ 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>
                ))}
@@ -136,45 +146,88 @@ const Maplist: React.FC = () => {
          <div>
            <section className="chapter-select-container">
              <div>
-                <span style={{ fontSize: "18px", transform: "translateY(5px)", display: "block", marginTop: "10px" }}>{curChapter?.chapter.name.split(" - ")[0]}</span>
+                <span
+                  style={{
+                    fontSize: '18px',
+                    transform: 'translateY(5px)',
+                    display: 'block',
+                    marginTop: '10px',
+                  }}
+                >
+                  {curChapter?.chapter.name.split(' - ')[0]}
+                </span>
              </div>
              <div onClick={_handle_dropdown_click} className="dropdown">
-                <span>{curChapter?.chapter.name.split(" - ")[1]}</span>
+                <span>{curChapter?.chapter.name.split(' - ')[1]}</span>
                <i className="triangle"></i>
              </div>
-              <div className="dropdown-elements" style={{ display: dropdownActive }}>
+              <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>
+                  );
+                })}
              </div>
            </section>
            <section className="maplist">
              {curChapter?.maps.map((map, i) => {
-                return <div className="maplist-entry">
+                return (
-                  <Link to={`/maps/${map.id}`}>
+                  <div className="maplist-entry">
-                    <span>{map.name}</span>
+                    <Link to={`/maps/${map.id}`}>
-                    <div className="map-entry-image" style={{ backgroundImage: `url(${map.image})` }}>
+                      <span>{map.name}</span>
-                      <div className="blur map">
+                      <div
-                        <span>{map.is_disabled ? map.category_portals[0].portal_count : map.category_portals.find(
+                        className="map-entry-image"
-                          (obj) => obj.category.id === catNum + 1
+                        style={{ backgroundImage: `url(${map.image})` }}
-                        )?.portal_count}</span>
+                      >
-                        <span>portals</span>
+                        <div className="blur map">
+                          <span>
+                            {map.is_disabled
+                              ? map.category_portals[0].portal_count
+                              : map.category_portals.find(
+                                  obj => obj.category.id === catNum + 1
+                                )?.portal_count}
+                          </span>
+                          <span>portals</span>
+                        </div>
                      </div>
-                    </div>
+                      <div className="difficulty-bar">
-                    <div className="difficulty-bar">
+                        {/* <span>Difficulty:</span> */}
-                      {/* <span>Difficulty:</span> */}
+                        <div
-                      <div className={map.difficulty == 0 ? "one" : map.difficulty == 1 ? "two" : map.difficulty == 2 ? "three" : map.difficulty == 3 ? "four" : map.difficulty == 4 ? "five" : "one"}>
+                          className={
-                        <div className="difficulty-point"></div>
+                            map.difficulty == 0
-                        <div className="difficulty-point"></div>
+                              ? 'one'
-                        <div className="difficulty-point"></div>
+                              : map.difficulty == 1
-                        <div className="difficulty-point"></div>
+                                ? 'two'
-                        <div className="difficulty-point"></div>
+                                : map.difficulty == 2
+                                  ? 'three'
+                                  : map.difficulty == 3
+                                    ? 'four'
+                                    : map.difficulty == 4
+                                      ? 'five'
+                                      : 'one'
+                          }
+                        >
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                        </div>
                      </div>
-                    </div>
+                    </Link>
-                  </Link>
+                  </div>
-                </div>
+                );
              })}
            </section>
          </div>
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index fb13563..51a2020 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -9,26 +9,31 @@ import Discussions from '@components/Discussions';
 import ModMenu from '@components/ModMenu';
 import { MapDiscussions, MapLeaderboard, MapSummary } from '@customTypes/Map';
 import { API } from '@api/Api';
-import "@css/Maps.css";
+import '@css/Maps.css';
 interface MapProps {
  token?: string;
  isModerator: boolean;
-};
+}
 const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
  const [selectedRun, setSelectedRun] = React.useState<number>(0);
-  const [mapSummaryData, setMapSummaryData] = React.useState<MapSummary | undefined>(undefined);
+  const [mapSummaryData, setMapSummaryData] = React.useState<
-  const [mapLeaderboardData, setMapLeaderboardData] = React.useState<MapLeaderboard | undefined>(undefined);
+    MapSummary | undefined
-  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<MapDiscussions | undefined>(undefined);
+  >(undefined);
+  const [mapLeaderboardData, setMapLeaderboardData] = React.useState<
+    MapLeaderboard | undefined
+  >(undefined);
+  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<
+    MapDiscussions | undefined
+  >(undefined);
  const [navState, setNavState] = React.useState<number>(0);
  const location = useLocation();
-  const mapID = location.pathname.split("/")[2];
+  const mapID = location.pathname.split('/')[2];
  const _fetch_map_summary = async () => {
    const mapSummary = await API.get_map_summary(mapID);
@@ -36,7 +41,7 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
  };
  const _fetch_map_leaderboards = async () => {
-    const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
+    const mapLeaderboards = await API.get_map_leaderboard(mapID, '1');
    setMapLeaderboardData(mapLeaderboards);
  };
@@ -56,19 +61,36 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
    return (
      <>
        <main>
-          <section id='section1' className='summary1'>
+          <section id="section1" className="summary1">
            <div>
-              <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 20px 20px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
+              <Link to="/games">
+                <button
+                  className="nav-button"
+                  style={{ borderRadius: '20px 20px 20px 20px' }}
+                >
+                  <i className="triangle"></i>
+                  <span>Games List</span>
+                </button>
+              </Link>
            </div>
          </section>
-          <section id='section2' className='summary1'>
+          <section id="section2" className="summary1">
-            <button className='nav-button'><img src={PortalIcon} alt="" /><span>Summary</span></button>
+            <button className="nav-button">
-            <button className='nav-button'><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
+              <img src={PortalIcon} alt="" />
-            <button className='nav-button'><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+              <span>Summary</span>
+            </button>
+            <button className="nav-button">
+              <img src={FlagIcon} alt="" />
+              <span>Leaderboards</span>
+            </button>
+            <button className="nav-button">
+              <img src={ChatIcon} alt="" />
+              <span>Discussions</span>
+            </button>
          </section>
-          <section id='section6' className='summary2' />
+          <section id="section6" className="summary2" />
        </main>
      </>
    );
@@ -80,29 +102,80 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
        <title>LPHUB | {mapSummaryData.map.map_name}</title>
        <meta name="description" content={mapSummaryData.map.map_name} />
      </Helmet>
-      {isModerator && <ModMenu token={token} data={mapSummaryData} selectedRun={selectedRun} mapID={mapID} />}
+      {isModerator && (
+        <ModMenu
-      <div id='background-image'>
+          token={token}
+          data={mapSummaryData}
+          selectedRun={selectedRun}
+          mapID={mapID}
+        />
+      )}
+      <div id="background-image">
        <img src={mapSummaryData.map.image} alt="" />
      </div>
      <main>
-        <section id='section1' className='summary1'>
+        <section id="section1" className="summary1">
          <div>
-            <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 0px 0px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
+            <Link to="/games">
-            <Link to={`/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}`}><button className='nav-button' style={{ borderRadius: "0px 20px 20px 0px", marginLeft: "2px" }}><i className='triangle'></i><span>{mapSummaryData.map.chapter_name}</span></button></Link>
+              <button
-            <br /><span><b>{mapSummaryData.map.map_name}</b></span>
+                className="nav-button"
+                style={{ borderRadius: '20px 0px 0px 20px' }}
+              >
+                <i className="triangle"></i>
+                <span>Games List</span>
+              </button>
+            </Link>
+            <Link
+              to={`/games/${mapSummaryData.map.is_coop ? '2' : '1'}?chapter=${mapSummaryData.map.chapter_name.split(' ')[1]}`}
+            >
+              <button
+                className="nav-button"
+                style={{ borderRadius: '0px 20px 20px 0px', marginLeft: '2px' }}
+              >
+                <i className="triangle"></i>
+                <span>{mapSummaryData.map.chapter_name}</span>
+              </button>
+            </Link>
+            <br />
+            <span>
+              <b>{mapSummaryData.map.map_name}</b>
+            </span>
          </div>
        </section>
-        <section id='section2' className='summary1'>
+        <section id="section2" className="summary1">
-          <button className='nav-button' onClick={() => setNavState(0)}><img src={PortalIcon} alt="" /><span>Summary</span></button>
+          <button className="nav-button" onClick={() => setNavState(0)}>
-          <button className='nav-button' onClick={() => setNavState(1)}><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
+            <img src={PortalIcon} alt="" />
-          <button className='nav-button' onClick={() => setNavState(2)}><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+            <span>Summary</span>
+          </button>
+          <button className="nav-button" onClick={() => setNavState(1)}>
+            <img src={FlagIcon} alt="" />
+            <span>Leaderboards</span>
+          </button>
+          <button className="nav-button" onClick={() => setNavState(2)}>
+            <img src={ChatIcon} alt="" />
+            <span>Discussions</span>
+          </button>
        </section>
-        {navState === 0 && <Summary selectedRun={selectedRun} setSelectedRun={setSelectedRun} data={mapSummaryData} />}
+        {navState === 0 && (
+          <Summary
+            selectedRun={selectedRun}
+            setSelectedRun={setSelectedRun}
+            data={mapSummaryData}
+          />
+        )}
        {navState === 1 && <Leaderboards mapID={mapID} />}
-        {navState === 2 && <Discussions data={mapDiscussionsData} token={token} isModerator={isModerator} mapID={mapID} onRefresh={() => _fetch_map_discussions()} />}
+        {navState === 2 && (
+          <Discussions
+            data={mapDiscussionsData}
+            token={token}
+            isModerator={isModerator}
+            mapID={mapID}
+            onRefresh={() => _fetch_map_discussions()}
+          />
+        )}
      </main>
    </>
  );
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 48233bf..7e3d603 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -2,16 +2,28 @@ import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from '@images/Images';
+import {
+  SteamIcon,
+  TwitchIcon,
+  YouTubeIcon,
+  PortalIcon,
+  FlagIcon,
+  StatisticsIcon,
+  SortIcon,
+  ThreedotIcon,
+  DownloadIcon,
+  HistoryIcon,
+  DeleteIcon,
+} from '@images/Images';
 import { UserProfile } from '@customTypes/Profile';
 import { Game, GameChapters } from '@customTypes/Game';
 import { Map } from '@customTypes/Map';
 import { ticks_to_time } from '@utils/Time';
-import "@css/Profile.css";
+import '@css/Profile.css';
 import { API } from '@api/Api';
 import useConfirm from '@hooks/UseConfirm';
 import useMessage from '@hooks/UseMessage';
-import useMessageLoad from "@hooks/UseMessageLoad";
+import useMessageLoad from '@hooks/UseMessageLoad';
 interface ProfileProps {
  profile?: UserProfile;
@@ -20,17 +32,25 @@ interface ProfileProps {
  onDeleteRecord: () => void;
 }
-const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRecord }) => {
+const Profile: React.FC<ProfileProps> = ({
+  profile,
+  token,
+  gameData,
+  onDeleteRecord,
+}) => {
  const { confirm, ConfirmDialogComponent } = useConfirm();
  const { message, MessageDialogComponent } = useMessage();
-  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad();
+  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } =
+    useMessageLoad();
  const [navState, setNavState] = React.useState(0);
  const [pageNumber, setPageNumber] = React.useState(1);
  const [pageMax, setPageMax] = React.useState(0);
-  const [game, setGame] = React.useState("0")
+  const [game, setGame] = React.useState('0');
-  const [chapter, setChapter] = React.useState("0")
+  const [chapter, setChapter] = React.useState('0');
-  const [chapterData, setChapterData] = React.useState<GameChapters | null>(null);
+  const [chapterData, setChapterData] = React.useState<GameChapters | null>(
+    null
+  );
  const [maps, setMaps] = React.useState<Map[]>([]);
  const navigate = useNavigate();
@@ -42,17 +62,17 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
  };
  const _get_game_chapters = async () => {
-    if (game && game !== "0") {
+    if (game && game !== '0') {
      const gameChapters = await API.get_games_chapters(game);
      setChapterData(gameChapters);
-    } else if (game && game === "0") {
+    } else if (game && game === '0') {
      setPageMax(Math.ceil(profile!.records.length / 20));
      setPageNumber(1);
    }
  };
  const _get_game_maps = async () => {
-    if (chapter === "0") {
+    if (chapter === '0') {
      const gameMaps = await API.get_game_maps(game);
      setMaps(gameMaps);
      setPageMax(Math.ceil(gameMaps.length / 20));
@@ -66,28 +86,31 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
  };
  const _delete_submission = async (map_id: number, record_id: number) => {
-    const userConfirmed = await confirm("Delete Record", "Are you sure you want to delete this record?");
+    const userConfirmed = await confirm(
+      'Delete Record',
+      'Are you sure you want to delete this record?'
+    );
    if (!userConfirmed) {
      return;
    }
-    messageLoad("Deleting...");
+    messageLoad('Deleting...');
    const api_success = await API.delete_map_record(token!, map_id, record_id);
    messageLoadClose();
    if (api_success) {
-      await message("Delete Record", "Successfully deleted record.");
+      await message('Delete Record', 'Successfully deleted record.');
      onDeleteRecord();
    } else {
-      await message("Delete Record", "Could not delete record.");
+      await message('Delete Record', 'Could not delete record.');
    }
  };
  React.useEffect(() => {
    if (!profile) {
-      navigate("/");
+      navigate('/');
-    };
+    }
  }, [profile]);
  React.useEffect(() => {
@@ -97,16 +120,14 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
  }, [profile, game]);
  React.useEffect(() => {
-    if (profile && game !== "0") {
+    if (profile && game !== '0') {
      _get_game_maps();
    }
-  }, [profile, game, chapter, chapterData])
+  }, [profile, game, chapter, chapterData]);
  if (!profile) {
-    return (
+    return <></>;
-      <></>
+  }
-    );
-  };
  return (
    <div>
@@ -119,230 +140,490 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
      {ConfirmDialogComponent}
      <main>
-        <section id='section1' className='profile'>
+        <section id="section1" className="profile">
+          {profile.profile ? (
-          {profile.profile
+            <div id="profile-image" onClick={_update_profile}>
-            ? (
+              <img src={profile.avatar_link} alt="profile-image"></img>
-              <div id='profile-image' onClick={_update_profile}>
+              <span>Refresh</span>
-                <img src={profile.avatar_link} alt="profile-image"></img>
+            </div>
-                <span>Refresh</span>
+          ) : (
-              </div>
+            <div>
-            ) : (
+              <img src={profile.avatar_link} alt="profile-image"></img>
-              <div>
+            </div>
-                <img src={profile.avatar_link} alt="profile-image"></img>
+          )}
-              </div>
-            )}
-          <div id='profile-top'>
+          <div id="profile-top">
            <div>
              <div>{profile.user_name}</div>
              <div>
-                {profile.country_code === "XX" ? "" : <img src={`https://flagcdn.com/w80/${profile.country_code.toLowerCase()}.jpg`} alt={profile.country_code} />}
+                {profile.country_code === 'XX' ? (
+                  ''
+                ) : (
+                  <img
+                    src={`https://flagcdn.com/w80/${profile.country_code.toLowerCase()}.jpg`}
+                    alt={profile.country_code}
+                  />
+                )}
              </div>
              <div>
                {profile.titles.map(e => (
-                  <span className="titles" style={{ backgroundColor: `#${e.color}` }}>
+                  <span
+                    className="titles"
+                    style={{ backgroundColor: `#${e.color}` }}
+                  >
                    {e.name}
                  </span>
                ))}
              </div>
            </div>
            <div>
-              {profile.links.steam === "-" ? "" : <a href={profile.links.steam}><img src={SteamIcon} alt="Steam" /></a>}
+              {profile.links.steam === '-' ? (
-              {profile.links.twitch === "-" ? "" : <a href={profile.links.twitch}><img src={TwitchIcon} alt="Twitch" /></a>}
+                ''
-              {profile.links.youtube === "-" ? "" : <a href={profile.links.youtube}><img src={YouTubeIcon} alt="Youtube" /></a>}
+              ) : (
-              {profile.links.p2sr === "-" ? "" : <a href={profile.links.p2sr}><img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} /></a>}
+                <a href={profile.links.steam}>
+                  <img src={SteamIcon} alt="Steam" />
+                </a>
+              )}
+              {profile.links.twitch === '-' ? (
+                ''
+              ) : (
+                <a href={profile.links.twitch}>
+                  <img src={TwitchIcon} alt="Twitch" />
+                </a>
+              )}
+              {profile.links.youtube === '-' ? (
+                ''
+              ) : (
+                <a href={profile.links.youtube}>
+                  <img src={YouTubeIcon} alt="Youtube" />
+                </a>
+              )}
+              {profile.links.p2sr === '-' ? (
+                ''
+              ) : (
+                <a href={profile.links.p2sr}>
+                  <img src={PortalIcon} alt="P2SR" style={{ padding: '0' }} />
+                </a>
+              )}
            </div>
          </div>
-          <div id='profile-bottom'>
+          <div id="profile-bottom">
            <div>
              <span>Overall</span>
-              <span>{profile.rankings.overall.rank === 0 ? "N/A " : "#" + profile.rankings.overall.rank + " "}
+              <span>
-                <span>({profile.rankings.overall.completion_count}/{profile.rankings.overall.completion_total})</span>
+                {profile.rankings.overall.rank === 0
+                  ? 'N/A '
+                  : '#' + profile.rankings.overall.rank + ' '}
+                <span>
+                  ({profile.rankings.overall.completion_count}/
+                  {profile.rankings.overall.completion_total})
+                </span>
              </span>
            </div>
            <div>
              <span>Singleplayer</span>
-              <span>{profile.rankings.singleplayer.rank === 0 ? "N/A " : "#" + profile.rankings.singleplayer.rank + " "}
+              <span>
-                <span>({profile.rankings.singleplayer.completion_count}/{profile.rankings.singleplayer.completion_total})</span>
+                {profile.rankings.singleplayer.rank === 0
+                  ? 'N/A '
+                  : '#' + profile.rankings.singleplayer.rank + ' '}
+                <span>
+                  ({profile.rankings.singleplayer.completion_count}/
+                  {profile.rankings.singleplayer.completion_total})
+                </span>
              </span>
            </div>
            <div>
              <span>Cooperative</span>
-              <span>{profile.rankings.cooperative.rank === 0 ? "N/A " : "#" + profile.rankings.cooperative.rank + " "}
+              <span>
-                <span>({profile.rankings.cooperative.completion_count}/{profile.rankings.cooperative.completion_total})</span>
+                {profile.rankings.cooperative.rank === 0
+                  ? 'N/A '
+                  : '#' + profile.rankings.cooperative.rank + ' '}
+                <span>
+                  ({profile.rankings.cooperative.completion_count}/
+                  {profile.rankings.cooperative.completion_total})
+                </span>
              </span>
            </div>
          </div>
        </section>
+        <section id="section2" className="profile">
-        <section id='section2' className='profile'>
+          <button onClick={() => setNavState(0)}>
-          <button onClick={() => setNavState(0)}><img src={FlagIcon} alt="" />&nbsp;Player Records</button>
+            <img src={FlagIcon} alt="" />
-          <button onClick={() => setNavState(1)}><img src={StatisticsIcon} alt="" />&nbsp;Statistics</button>
+            &nbsp;Player Records
+          </button>
+          <button onClick={() => setNavState(1)}>
+            <img src={StatisticsIcon} alt="" />
+            &nbsp;Statistics
+          </button>
        </section>
+        <section id="section3" className="profile1">
+          <div id="profileboard-nav">
+            {gameData === null ? (
+              <select>error</select>
-        <section id='section3' className='profile1'>
+            ) : (
-          <div id='profileboard-nav'>
+              <select
-            {gameData === null ? <select>error</select> :
+                id="select-game"
-              <select id='select-game'
                onChange={() => {
-                  setGame((document.querySelector('#select-game') as HTMLInputElement).value);
+                  setGame(
-                  setChapter("0");
+                    (document.querySelector('#select-game') as HTMLInputElement)
-                  const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+                      .value
+                  );
+                  setChapter('0');
+                  const chapterSelect = document.querySelector(
+                    '#select-chapter'
+                  ) as HTMLSelectElement;
                  if (chapterSelect) {
-                    chapterSelect.value = "0";
+                    chapterSelect.value = '0';
                  }
-                }}>
+                }}
-                <option value={0} key={0}>All Scores</option>
+              >
+                <option value={0} key={0}>
+                  All Scores
+                </option>
                {gameData.map((e, i) => (
-                  <option value={e.id} key={i + 1}>{e.name}</option>
+                  <option value={e.id} key={i + 1}>
-                ))}</select>
+                    {e.name}
-            }
+                  </option>
+                ))}
+              </select>
+            )}
-            {game === "0" ?
+            {game === '0' ? (
              <select disabled>
                <option>All Chapters</option>
              </select>
-              : chapterData === null ? <select></select> :
+            ) : chapterData === null ? (
+              <select></select>
-                <select id='select-chapter'
+            ) : (
-                  onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
+              <select
-                  <option value="0" key="0">All Chapters</option>
+                id="select-chapter"
-                  {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
+                onChange={() =>
-                    <option value={e.id} key={i + 1}>{e.name}</option>
+                  setChapter(
-                  ))}</select>
+                    (
-            }
+                      document.querySelector(
+                        '#select-chapter'
+                      ) as HTMLInputElement
+                    ).value
+                  )
+                }
+              >
+                <option value="0" key="0">
+                  All Chapters
+                </option>
+                {chapterData.chapters
+                  .filter(e => e.is_disabled === false)
+                  .map((e, i) => (
+                    <option value={e.id} key={i + 1}>
+                      {e.name}
+                    </option>
+                  ))}
+              </select>
+            )}
          </div>
-          <div id='profileboard-top'>
+          <div id="profileboard-top">
-            <span><span>Map Name</span><img src={SortIcon} alt="" /></span>
+            <span>
-            <span style={{ justifyContent: 'center' }}><span>Portals</span><img src={SortIcon} alt="" /></span>
+              <span>Map Name</span>
-            <span style={{ justifyContent: 'center' }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
+              <img src={SortIcon} alt="" />
-            <span style={{ justifyContent: 'center' }}><span>Time</span><img src={SortIcon} alt="" /></span>
+            </span>
+            <span style={{ justifyContent: 'center' }}>
+              <span>Portals</span>
+              <img src={SortIcon} alt="" />
+            </span>
+            <span style={{ justifyContent: 'center' }}>
+              <span>WRΔ </span>
+              <img src={SortIcon} alt="" />
+            </span>
+            <span style={{ justifyContent: 'center' }}>
+              <span>Time</span>
+              <img src={SortIcon} alt="" />
+            </span>
            <span> </span>
-            <span><span>Rank</span><img src={SortIcon} alt="" /></span>
+            <span>
-            <span><span>Date</span><img src={SortIcon} alt="" /></span>
+              <span>Rank</span>
-            <div id='page-number'>
+              <img src={SortIcon} alt="" />
+            </span>
+            <span>
+              <span>Date</span>
+              <img src={SortIcon} alt="" />
+            </span>
+            <div id="page-number">
              <div>
-                <button onClick={() => {
+                <button
-                  if (pageNumber !== 1) {
+                  onClick={() => {
-                    setPageNumber(prevPageNumber => prevPageNumber - 1);
+                    if (pageNumber !== 1) {
-                    const records = document.querySelectorAll(".profileboard-record");
+                      setPageNumber(prevPageNumber => prevPageNumber - 1);
-                    records.forEach((r) => {
+                      const records = document.querySelectorAll(
-                      (r as HTMLInputElement).style.height = "44px";
+                        '.profileboard-record'
-                    });
+                      );
-                  }
+                      records.forEach(r => {
-                }}
+                        (r as HTMLInputElement).style.height = '44px';
-                ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
+                      });
-                <span>{pageNumber}/{pageMax}</span>
+                    }
-                <button onClick={() => {
+                  }}
-                  if (pageNumber !== pageMax) {
+                >
-                    setPageNumber(prevPageNumber => prevPageNumber + 1);
+                  <i
-                    const records = document.querySelectorAll(".profileboard-record");
+                    className="triangle"
-                    records.forEach((r) => {
+                    style={{ position: 'relative', left: '-5px' }}
-                      (r as HTMLInputElement).style.height = "44px";
+                  ></i>{' '}
-                    });
+                </button>
-                  }
+                <span>
-                }}
+                  {pageNumber}/{pageMax}
-                ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+                </span>
+                <button
+                  onClick={() => {
+                    if (pageNumber !== pageMax) {
+                      setPageNumber(prevPageNumber => prevPageNumber + 1);
+                      const records = document.querySelectorAll(
+                        '.profileboard-record'
+                      );
+                      records.forEach(r => {
+                        (r as HTMLInputElement).style.height = '44px';
+                      });
+                    }
+                  }}
+                >
+                  <i
+                    className="triangle"
+                    style={{
+                      position: 'relative',
+                      left: '5px',
+                      transform: 'rotate(180deg)',
+                    }}
+                  ></i>{' '}
+                </button>
              </div>
            </div>
          </div>
          <hr />
-          <div id='profileboard-records'>
+          <div id="profileboard-records">
+            {game === '0' ? (
-            {game === "0"
+              profile.records
-              ? (
+                .sort((a, b) => a.map_id - b.map_id)
+                .map((r, index) =>
-                profile.records.sort((a, b) => a.map_id - b.map_id)
+                  Math.ceil((index + 1) / 20) === pageNumber ? (
-                  .map((r, index) => (
+                    <button className="profileboard-record" key={index}>
+                      {r.scores.map((e, i) => (
-                    Math.ceil((index + 1) / 20) === pageNumber ? (
+                        <>
-                      <button className="profileboard-record" key={index}>
+                          {i !== 0 ? (
-                        {r.scores.map((e, i) => (<>
+                            <hr style={{ gridColumn: '1 / span 8' }} />
-                          {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
+                          ) : (
+                            ''
-                          <Link to={`/maps/${r.map_id}`}><span>{r.map_name}</span></Link>
+                          )}
-                          <span style={{ display: "grid" }}>{e.score_count}</span>
+                          <Link to={`/maps/${r.map_id}`}>
+                            <span>{r.map_name}</span>
-                          <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : `-`}</span>
+                          </Link>
-                          <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
-                          <span> </span>
+                          <span style={{ display: 'grid' }}>
-                          {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
+                            {e.score_count}
-                          <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 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"
-                            }
-                            }><img src={HistoryIcon} alt="history" /></button> : ""}
                          </span>
-                        </>))}
-                      </button>
-                    ) : ""
-                  ))) : maps ?
-                maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
+                          <span style={{ display: 'grid' }}>
-                  .map((r, index) => {
+                            {e.score_count - r.map_wr_count > 0
-                    if (Math.ceil((index + 1) / 20) === pageNumber) {
+                              ? `+${e.score_count - r.map_wr_count}`
-                      let record = profile.records.find((e) => e.map_id === r.id);
+                              : `-`}
-                      return record === undefined ? (
+                          </span>
-                        <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}>
+                          <span style={{ display: 'grid' }}>
-                          <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
+                            {ticks_to_time(e.score_time)}
-                          <span style={{ display: "grid" }}>N/A</span>
+                          </span>
-                          <span style={{ display: "grid" }}>N/A</span>
-                          <span>N/A</span>
                          <span> </span>
-                          <span>N/A</span>
+                          {i === 0 ? (
-                          <span>N/A</span>
+                            <span>#{r.placement}</span>
-                          <span style={{ flexDirection: "row-reverse" }}></span>
+                          ) : (
-                        </button>
-                      ) : (
-                        <button className="profileboard-record" key={index}>
-                          {record.scores.map((e, i) => (<>
-                            {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
-                            <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
-                            <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
-                            <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : `-`}</span>
-                            <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
                            <span> </span>
-                            {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
+                          )}
-                            <span>{record!.scores[i].date.split("T")[0]}</span>
+                          <span>{e.date.split('T')[0]}</span>
-                            <span style={{ flexDirection: "row-reverse" }}>
+                          <span style={{ flexDirection: 'row-reverse' }}>
+                            <button
-                              <button onClick={() => { message("Demo Information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                              style={{ marginRight: '10px' }}
-                              <button onClick={() => { _delete_submission(r.id, e.record_id) }}><img src={DeleteIcon}></img></button>
+                              onClick={() => {
-                              <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                                message(
-                              {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
+                                  'Demo Information',
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
+                                  `Demo ID: ${e.demo_id}`
-                                  (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"
+                            >
+                              <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={HistoryIcon} alt="history" /></button> : ""}
+                            >
+                              <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');
+                                }}
+                              >
+                                <img src={HistoryIcon} alt="history" />
+                              </button>
+                            ) : (
+                              ''
+                            )}
+                          </span>
+                        </>
+                      ))}
+                    </button>
+                  ) : (
+                    ''
+                  )
+                )
+            ) : maps ? (
+              maps
+                .filter(e => e.is_disabled === false)
+                .sort((a, b) => a.id - b.id)
+                .map((r, index) => {
+                  if (Math.ceil((index + 1) / 20) === pageNumber) {
+                    let record = profile.records.find(e => e.map_id === r.id);
+                    return record === undefined ? (
+                      <button
+                        className="profileboard-record"
+                        key={index}
+                        style={{ backgroundColor: '#1b1b20' }}
+                      >
+                        <Link to={`/maps/${r.id}`}>
+                          <span>{r.name}</span>
+                        </Link>
+                        <span style={{ display: 'grid' }}>N/A</span>
+                        <span style={{ display: 'grid' }}>N/A</span>
+                        <span>N/A</span>
+                        <span> </span>
+                        <span>N/A</span>
+                        <span>N/A</span>
+                        <span style={{ flexDirection: 'row-reverse' }}></span>
+                      </button>
+                    ) : (
+                      <button className="profileboard-record" key={index}>
+                        {record.scores.map((e, i) => (
+                          <>
+                            {i !== 0 ? (
+                              <hr style={{ gridColumn: '1 / span 8' }} />
+                            ) : (
+                              ''
+                            )}
+                            <Link to={`/maps/${r.id}`}>
+                              <span>{r.name}</span>
+                            </Link>
+                            <span style={{ display: 'grid' }}>
+                              {record!.scores[i].score_count}
                            </span>
-                          </>))}
+                            <span style={{ display: 'grid' }}>
-                        </button>
+                              {record!.scores[i].score_count -
+                                record!.map_wr_count >
-                      )
+                              0
-                    } else { return null }
+                                ? `+${record!.scores[i].score_count - record!.map_wr_count}`
-                  }) : (<>{console.warn(maps)}</>)}
+                                : `-`}
+                            </span>
+                            <span style={{ display: 'grid' }}>
+                              {ticks_to_time(record!.scores[i].score_time)}
+                            </span>
+                            <span> </span>
+                            {i === 0 ? (
+                              <span>#{record!.placement}</span>
+                            ) : (
+                              <span> </span>
+                            )}
+                            <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={() =>
+                                  (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');
+                                  }}
+                                >
+                                  <img src={HistoryIcon} alt="history" />
+                                </button>
+                              ) : (
+                                ''
+                              )}
+                            </span>
+                          </>
+                        ))}
+                      </button>
+                    );
+                  } else {
+                    return null;
+                  }
+                })
+            ) : (
+              <>{console.warn(maps)}</>
+            )}
          </div>
        </section>
      </main>
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 71aa427..885638d 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -1,147 +1,200 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react';
-import { Helmet } from "react-helmet";
+import { Helmet } from 'react-helmet';
-import RankingEntry from "@components/RankingEntry";
+import RankingEntry from '@components/RankingEntry';
-import { Ranking, SteamRanking, RankingType, SteamRankingType } from "@customTypes/Ranking";
+import {
-import { API } from "@api/Api";
+  Ranking,
+  SteamRanking,
+  RankingType,
+  SteamRankingType,
+} from '@customTypes/Ranking';
+import { API } from '@api/Api';
-import "@css/Rankings.css";
+import '@css/Rankings.css';
 const Rankings: React.FC = () => {
-    const [leaderboardData, setLeaderboardData] = React.useState<Ranking | SteamRanking>();
+  const [leaderboardData, setLeaderboardData] = React.useState<
-    const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] | SteamRankingType[]>();
+    Ranking | SteamRanking
-    enum LeaderboardTypes {
+  >();
-        official,
+  const [currentLeaderboard, setCurrentLeaderboard] = React.useState<
-        unofficial
+    RankingType[] | SteamRankingType[]
+  >();
+  enum LeaderboardTypes {
+    official,
+    unofficial,
+  }
+  const [currentRankingType, setCurrentRankingType] =
+    React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+  const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
+  enum RankingCategories {
+    rankings_overall,
+    rankings_multiplayer,
+    rankings_singleplayer,
+  }
+  const [currentLeaderboardType, setCurrentLeaderboardType] =
+    React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
+  const [load, setLoad] = React.useState<boolean>(false);
+  const _fetch_rankings = async () => {
+    setLeaderboardLoad(false);
+    const rankings = await API.get_official_rankings();
+    setLeaderboardData(rankings);
+    if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+      setCurrentLeaderboard(rankings.rankings_singleplayer);
+    } else if (
+      currentLeaderboardType == RankingCategories.rankings_multiplayer
+    ) {
+      setCurrentLeaderboard(rankings.rankings_multiplayer);
+    } else {
+      setCurrentLeaderboard(rankings.rankings_overall);
    }
-    const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+    setLoad(true);
+    setLeaderboardLoad(true);
-    const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
+  };
-    enum RankingCategories {
+  const __dev_fetch_unofficial_rankings = async () => {
-        rankings_overall,
+    try {
-        rankings_multiplayer,
+      setLeaderboardLoad(false);
-        rankings_singleplayer
+      const rankings = await API.get_unofficial_rankings();
-    }
+      setLeaderboardData(rankings);
-    const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
+      if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
-    const [load, setLoad] = React.useState<boolean>(false);
+        // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
+        setCurrentLeaderboard(rankings.rankings_singleplayer);
-    const _fetch_rankings = async () => {
+      } else if (
-        setLeaderboardLoad(false);
+        currentLeaderboardType == RankingCategories.rankings_multiplayer
-        const rankings = await API.get_official_rankings();
+      ) {
-        setLeaderboardData(rankings);
+        setCurrentLeaderboard(rankings.rankings_multiplayer);
-        if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+      } else {
-            setCurrentLeaderboard(rankings.rankings_singleplayer)
+        setCurrentLeaderboard(rankings.rankings_overall);
-        } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
+      }
-            setCurrentLeaderboard(rankings.rankings_multiplayer)
+      setLeaderboardLoad(true);
-        } else {
+    } catch (e) {
-            setCurrentLeaderboard(rankings.rankings_overall)
+      console.log(e);
-        }
-        setLoad(true);
-        setLeaderboardLoad(true);
    }
+  };
-    const __dev_fetch_unofficial_rankings = async () => {
-        try {
+  const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
-            setLeaderboardLoad(false);
+    if (ranking_cat == RankingCategories.rankings_singleplayer) {
-            const rankings = await API.get_unofficial_rankings();
+      setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
-            setLeaderboardData(rankings);
+    } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
-            if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+      setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
-                // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
+    } else {
-                setCurrentLeaderboard(rankings.rankings_singleplayer)
+      setCurrentLeaderboard(leaderboardData!.rankings_overall);
-            } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-                setCurrentLeaderboard(rankings.rankings_multiplayer)
-            } else {
-                setCurrentLeaderboard(rankings.rankings_overall)
-            }
-            setLeaderboardLoad(true);
-        } catch (e) {
-            console.log(e)
-        }
    }
-    const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
+    setCurrentLeaderboardType(ranking_cat);
-        if (ranking_cat == RankingCategories.rankings_singleplayer) {
+  };
-            setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
-        } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
-            setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
-        } else {
-            setCurrentLeaderboard(leaderboardData!.rankings_overall);
-        }
-        setCurrentLeaderboardType(ranking_cat);
+  const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
+    if (leaderboard_type == LeaderboardTypes.official) {
+      _fetch_rankings();
+    } else {
    }
+  };
-    const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
+  useEffect(() => {
-        if (leaderboard_type == LeaderboardTypes.official) {
+    _fetch_rankings();
-            _fetch_rankings();
+    if (load) {
-        } else {
+      _set_current_leaderboard(RankingCategories.rankings_singleplayer);
-        }
    }
+  }, [load]);
-    useEffect(() => {
-        _fetch_rankings();
+  return (
-        if (load) {
+    <main>
-            _set_current_leaderboard(RankingCategories.rankings_singleplayer);
+      <Helmet>
-        }
+        <title>LPHUB | Rankings</title>
-    }, [load])
+      </Helmet>
+      <section className="nav-container nav-1">
-    return (
+        <div>
-        <main>
+          <button
-            <Helmet>
+            onClick={() => {
-                <title>LPHUB | Rankings</title>
+              _fetch_rankings();
-            </Helmet>
+              setCurrentRankingType(LeaderboardTypes.official);
-            <section className="nav-container nav-1">
+            }}
-                <div>
+            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>
+            <span>Official (LPHUB)</span>
-                    </button>
+          </button>
-                    <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
+          <button
-                        <span>Unofficial (Steam)</span>
+            onClick={() => {
-                    </button>
+              __dev_fetch_unofficial_rankings();
-                </div>
+              setCurrentRankingType(LeaderboardTypes.unofficial);
-            </section>
+            }}
-            <section className="nav-container nav-2">
+            className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? 'selected' : ''}`}
-                <div>
+          >
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
+            <span>Unofficial (Steam)</span>
-                        <span>Singleplayer</span>
+          </button>
-                    </button>
+        </div>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
+      </section>
-                        <span>Cooperative</span>
+      <section className="nav-container nav-2">
-                    </button>
+        <div>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
+          <button
-                        <span>Overall</span>
+            onClick={() =>
-                    </button>
+              _set_current_leaderboard(RankingCategories.rankings_singleplayer)
-                </div>
+            }
-            </section>
+            className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? 'selected' : ''}`}
+          >
-            {load ?
+            <span>Singleplayer</span>
-                <section className="rankings-leaderboard">
+          </button>
-                    <div className="ranks-container">
+          <button
-                        <div className="leaderboard-entry header">
+            onClick={() =>
-                            <span>Rank</span>
+              _set_current_leaderboard(RankingCategories.rankings_multiplayer)
-                            <span>Player</span>
+            }
-                            <span>Portals</span>
+            className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? 'selected' : ''}`}
-                        </div>
+          >
+            <span>Cooperative</span>
-                        <div className="splitter"></div>
+          </button>
+          <button
-                        {leaderboardLoad && currentLeaderboard?.map((curRankingData, i) => {
+            onClick={() =>
-                            return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
+              _set_current_leaderboard(RankingCategories.rankings_overall)
-                        })
+            }
-                        }
+            className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? 'selected' : ''}`}
+          >
-                        {leaderboardLoad ? null :
+            <span>Overall</span>
-                            <div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}>
+          </button>
-                                <span className="loader"></span>
+        </div>
-                            </div>
+      </section>
-                        }
-                    </div>
+      {load ? (
-                </section>
+        <section className="rankings-leaderboard">
-                : null}
+          <div className="ranks-container">
-        </main>
+            <div className="leaderboard-entry header">
-    )
+              <span>Rank</span>
-}
+              <span>Player</span>
+              <span>Portals</span>
+            </div>
+            <div className="splitter"></div>
+            {leaderboardLoad &&
+              currentLeaderboard?.map((curRankingData, i) => {
+                return (
+                  <RankingEntry
+                    currentLeaderboardType={currentLeaderboardType}
+                    curRankingData={curRankingData}
+                    key={i}
+                  ></RankingEntry>
+                );
+              })}
+            {leaderboardLoad ? null : (
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  margin: '30px 0px',
+                }}
+              >
+                <span className="loader"></span>
+              </div>
+            )}
+          </div>
+        </section>
+      ) : null}
+    </main>
+  );
+};
 export default Rankings;
diff --git a/frontend/src/pages/Rules.tsx b/frontend/src/pages/Rules.tsx
index 9f57b7e..7a774bc 100644
--- a/frontend/src/pages/Rules.tsx
+++ b/frontend/src/pages/Rules.tsx
@@ -5,37 +5,35 @@ import { Helmet } from 'react-helmet';
 import '@css/Rules.css';
 const Rules: React.FC = () => {
+  const [rulesText, setRulesText] = React.useState<string>('');
-    const [rulesText, setRulesText] = React.useState<string>("");
+  React.useEffect(() => {
+    const fetchRules = async () => {
+      try {
+        const response = await fetch(
+          'https://raw.githubusercontent.com/pektezol/lphub/main/RULES.md'
+        );
+        if (!response.ok) {
+          throw new Error('Failed to fetch README');
+        }
+        const rulesText = await response.text();
+        setRulesText(rulesText);
+      } catch (error) {
+        console.error('Error fetching Rules:', error);
+      }
+      // setRulesText(rulesText)
+    };
+    fetchRules();
+  }, []);
-    React.useEffect(() => {
+  return (
-        const fetchRules = async () => {
+    <main>
-            try {
+      <Helmet>
-                const response = await fetch(
+        <title>LPHUB | Rules</title>
-                    'https://raw.githubusercontent.com/pektezol/lphub/main/RULES.md'
+      </Helmet>
-                );
+      <ReactMarkdown>{rulesText}</ReactMarkdown>
-                if (!response.ok) {
+    </main>
-                    throw new Error('Failed to fetch README');
+  );
-                }
-                const rulesText = await response.text();
-                setRulesText(rulesText);
-            } catch (error) {
-                console.error('Error fetching Rules:', error);
-            }
-            // setRulesText(rulesText)
-        };
-        fetchRules();
-    }, []);
-    return (
-        <main>
-            <Helmet>
-                <title>LPHUB | Rules</title>
-            </Helmet>
-            <ReactMarkdown>{rulesText}</ReactMarkdown>
-        </main>
-    );
 };
 export default Rules;
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index d43c0c6..b6dfbd3 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -2,13 +2,24 @@ import React from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '@images/Images';
+import {
+  SteamIcon,
+  TwitchIcon,
+  YouTubeIcon,
+  PortalIcon,
+  FlagIcon,
+  StatisticsIcon,
+  SortIcon,
+  ThreedotIcon,
+  DownloadIcon,
+  HistoryIcon,
+} from '@images/Images';
 import { UserProfile } from '@customTypes/Profile';
 import { Game, GameChapters } from '@customTypes/Game';
 import { Map } from '@customTypes/Map';
 import { API } from '@api/Api';
 import { ticks_to_time } from '@utils/Time';
-import "@css/Profile.css";
+import '@css/Profile.css';
 import useMessage from '@hooks/UseMessage';
 interface UserProps {
@@ -18,7 +29,6 @@ interface UserProps {
 }
 const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  const { message, MessageDialogComponent } = useMessage();
  const [user, setUser] = React.useState<UserProfile | undefined>(undefined);
@@ -27,18 +37,20 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  const [pageNumber, setPageNumber] = React.useState(1);
  const [pageMax, setPageMax] = React.useState(0);
-  const [game, setGame] = React.useState("0");
+  const [game, setGame] = React.useState('0');
-  const [chapter, setChapter] = React.useState("0");
+  const [chapter, setChapter] = React.useState('0');
-  const [chapterData, setChapterData] = React.useState<GameChapters | null>(null);
+  const [chapterData, setChapterData] = React.useState<GameChapters | null>(
+    null
+  );
  const [maps, setMaps] = React.useState<Map[]>([]);
  const location = useLocation();
  const navigate = useNavigate();
  const _fetch_user = async () => {
-    const userID = location.pathname.split("/")[2];
+    const userID = location.pathname.split('/')[2];
    if (token && profile && profile.profile && profile.steam_id === userID) {
-      navigate("/profile");
+      navigate('/profile');
      return;
    }
    const userData = await API.get_user(userID);
@@ -46,7 +58,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  };
  const _get_game_chapters = async () => {
-    if (game !== "0") {
+    if (game !== '0') {
      const gameChapters = await API.get_games_chapters(game);
      setChapterData(gameChapters);
    } else {
@@ -56,7 +68,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  };
  const _get_game_maps = async () => {
-    if (chapter === "0") {
+    if (chapter === '0') {
      const gameMaps = await API.get_game_maps(game);
      setMaps(gameMaps);
      setPageMax(Math.ceil(gameMaps.length / 20));
@@ -80,16 +92,14 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  }, [user, game, location]);
  React.useEffect(() => {
-    if (user && game !== "0") {
+    if (user && game !== '0') {
      _get_game_maps();
    }
-  }, [user, game, chapter, location])
+  }, [user, game, chapter, location]);
  if (!user) {
-    return (
+    return <></>;
-      <></>
+  }
-    );
-  };
  return (
    <main>
@@ -98,218 +108,461 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
        <meta name="description" content={user.user_name} />
      </Helmet>
      {MessageDialogComponent}
-      <section id='section1' className='profile'>
+      <section id="section1" className="profile">
        <div>
          <img src={user.avatar_link} alt="profile-image"></img>
        </div>
-        <div id='profile-top'>
+        <div id="profile-top">
          <div>
            <div>{user.user_name}</div>
            <div>
-              {user.country_code === "XX" ? "" : <img src={`https://flagcdn.com/w80/${user.country_code.toLowerCase()}.jpg`} alt={user.country_code} />}
+              {user.country_code === 'XX' ? (
+                ''
+              ) : (
+                <img
+                  src={`https://flagcdn.com/w80/${user.country_code.toLowerCase()}.jpg`}
+                  alt={user.country_code}
+                />
+              )}
            </div>
            <div>
              {user.titles.map(e => (
-                <span className="titles" style={{ backgroundColor: `#${e.color}` }}>
+                <span
+                  className="titles"
+                  style={{ backgroundColor: `#${e.color}` }}
+                >
                  {e.name}
                </span>
              ))}
            </div>
          </div>
          <div>
-            {user.links.steam === "-" ? "" : <a href={user.links.steam}><img src={SteamIcon} alt="Steam" /></a>}
+            {user.links.steam === '-' ? (
-            {user.links.twitch === "-" ? "" : <a href={user.links.twitch}><img src={TwitchIcon} alt="Twitch" /></a>}
+              ''
-            {user.links.youtube === "-" ? "" : <a href={user.links.youtube}><img src={YouTubeIcon} alt="Youtube" /></a>}
+            ) : (
-            {user.links.p2sr === "-" ? "" : <a href={user.links.p2sr}><img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} /></a>}
+              <a href={user.links.steam}>
+                <img src={SteamIcon} alt="Steam" />
+              </a>
+            )}
+            {user.links.twitch === '-' ? (
+              ''
+            ) : (
+              <a href={user.links.twitch}>
+                <img src={TwitchIcon} alt="Twitch" />
+              </a>
+            )}
+            {user.links.youtube === '-' ? (
+              ''
+            ) : (
+              <a href={user.links.youtube}>
+                <img src={YouTubeIcon} alt="Youtube" />
+              </a>
+            )}
+            {user.links.p2sr === '-' ? (
+              ''
+            ) : (
+              <a href={user.links.p2sr}>
+                <img src={PortalIcon} alt="P2SR" style={{ padding: '0' }} />
+              </a>
+            )}
          </div>
        </div>
-        <div id='profile-bottom'>
+        <div id="profile-bottom">
          <div>
            <span>Overall</span>
-            <span>{user.rankings.overall.rank === 0 ? "N/A " : "#" + user.rankings.overall.rank + " "}
+            <span>
-              <span>({user.rankings.overall.completion_count}/{user.rankings.overall.completion_total})</span>
+              {user.rankings.overall.rank === 0
+                ? 'N/A '
+                : '#' + user.rankings.overall.rank + ' '}
+              <span>
+                ({user.rankings.overall.completion_count}/
+                {user.rankings.overall.completion_total})
+              </span>
            </span>
          </div>
          <div>
            <span>Singleplayer</span>
-            <span>{user.rankings.singleplayer.rank === 0 ? "N/A " : "#" + user.rankings.singleplayer.rank + " "}
+            <span>
-              <span>({user.rankings.singleplayer.completion_count}/{user.rankings.singleplayer.completion_total})</span>
+              {user.rankings.singleplayer.rank === 0
+                ? 'N/A '
+                : '#' + user.rankings.singleplayer.rank + ' '}
+              <span>
+                ({user.rankings.singleplayer.completion_count}/
+                {user.rankings.singleplayer.completion_total})
+              </span>
            </span>
          </div>
          <div>
            <span>Cooperative</span>
-            <span>{user.rankings.cooperative.rank === 0 ? "N/A " : "#" + user.rankings.cooperative.rank + " "}
+            <span>
-              <span>({user.rankings.cooperative.completion_count}/{user.rankings.cooperative.completion_total})</span>
+              {user.rankings.cooperative.rank === 0
+                ? 'N/A '
+                : '#' + user.rankings.cooperative.rank + ' '}
+              <span>
+                ({user.rankings.cooperative.completion_count}/
+                {user.rankings.cooperative.completion_total})
+              </span>
            </span>
          </div>
        </div>
      </section>
+      <section id="section2" className="profile">
-      <section id='section2' className='profile'>
+        <button onClick={() => setNavState(0)}>
-        <button onClick={() => setNavState(0)}><img src={FlagIcon} alt="" />&nbsp;Player Records</button>
+          <img src={FlagIcon} alt="" />
-        <button onClick={() => setNavState(1)}><img src={StatisticsIcon} alt="" />&nbsp;Statistics</button>
+          &nbsp;Player Records
+        </button>
+        <button onClick={() => setNavState(1)}>
+          <img src={StatisticsIcon} alt="" />
+          &nbsp;Statistics
+        </button>
      </section>
+      <section id="section3" className="profile1">
+        <div id="profileboard-nav">
+          {gameData === null ? (
+            <select>error</select>
-      <section id='section3' className='profile1'>
+          ) : (
-        <div id='profileboard-nav'>
+            <select
-          {gameData === null ? <select>error</select> :
+              id="select-game"
-            <select id='select-game'
              onChange={() => {
-                setGame((document.querySelector('#select-game') as HTMLInputElement).value);
+                setGame(
-                setChapter("0");
+                  (document.querySelector('#select-game') as HTMLInputElement)
-                const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+                    .value
+                );
+                setChapter('0');
+                const chapterSelect = document.querySelector(
+                  '#select-chapter'
+                ) as HTMLSelectElement;
                if (chapterSelect) {
-                  chapterSelect.value = "0";
+                  chapterSelect.value = '0';
                }
-              }}>
+              }}
-              <option value={0} key={0}>All Scores</option>
+            >
+              <option value={0} key={0}>
+                All Scores
+              </option>
              {gameData.map((e, i) => (
-                <option value={e.id} key={i + 1}>{e.name}</option>
+                <option value={e.id} key={i + 1}>
-              ))}</select>
+                  {e.name}
-          }
+                </option>
+              ))}
+            </select>
+          )}
-          {game === "0" ?
+          {game === '0' ? (
            <select disabled>
              <option>All Chapters</option>
            </select>
-            : chapterData === null ? <select></select> :
+          ) : chapterData === null ? (
+            <select></select>
-              <select id='select-chapter'
+          ) : (
-                onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
+            <select
-                <option value="0" key="0">All Chapters</option>
+              id="select-chapter"
-                {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
+              onChange={() =>
-                  <option value={e.id} key={i + 1}>{e.name}</option>
+                setChapter(
-                ))}</select>
+                  (
-          }
+                    document.querySelector(
+                      '#select-chapter'
+                    ) as HTMLInputElement
+                  ).value
+                )
+              }
+            >
+              <option value="0" key="0">
+                All Chapters
+              </option>
+              {chapterData.chapters
+                .filter(e => e.is_disabled === false)
+                .map((e, i) => (
+                  <option value={e.id} key={i + 1}>
+                    {e.name}
+                  </option>
+                ))}
+            </select>
+          )}
        </div>
-        <div id='profileboard-top'>
+        <div id="profileboard-top">
-          <span><span>Map Name</span><img src={SortIcon} alt="" /></span>
+          <span>
-          <span style={{ justifyContent: 'center' }}><span>Portals</span><img src={SortIcon} alt="" /></span>
+            <span>Map Name</span>
-          <span style={{ justifyContent: 'center' }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
+            <img src={SortIcon} alt="" />
-          <span style={{ justifyContent: 'center' }}><span>Time</span><img src={SortIcon} alt="" /></span>
+          </span>
+          <span style={{ justifyContent: 'center' }}>
+            <span>Portals</span>
+            <img src={SortIcon} alt="" />
+          </span>
+          <span style={{ justifyContent: 'center' }}>
+            <span>WRΔ </span>
+            <img src={SortIcon} alt="" />
+          </span>
+          <span style={{ justifyContent: 'center' }}>
+            <span>Time</span>
+            <img src={SortIcon} alt="" />
+          </span>
          <span> </span>
-          <span><span>Rank</span><img src={SortIcon} alt="" /></span>
+          <span>
-          <span><span>Date</span><img src={SortIcon} alt="" /></span>
+            <span>Rank</span>
-          <div id='page-number'>
+            <img src={SortIcon} alt="" />
+          </span>
+          <span>
+            <span>Date</span>
+            <img src={SortIcon} alt="" />
+          </span>
+          <div id="page-number">
            <div>
-              <button onClick={() => {
+              <button
-                if (pageNumber !== 1) {
+                onClick={() => {
-                  setPageNumber(prevPageNumber => prevPageNumber - 1);
+                  if (pageNumber !== 1) {
-                  const records = document.querySelectorAll(".profileboard-record");
+                    setPageNumber(prevPageNumber => prevPageNumber - 1);
-                  records.forEach((r) => {
+                    const records = document.querySelectorAll(
-                    (r as HTMLInputElement).style.height = "44px";
+                      '.profileboard-record'
-                  });
+                    );
-                }
+                    records.forEach(r => {
-              }}
+                      (r as HTMLInputElement).style.height = '44px';
-              ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
+                    });
-              <span>{pageNumber}/{pageMax}</span>
+                  }
-              <button onClick={() => {
+                }}
-                if (pageNumber !== pageMax) {
+              >
-                  setPageNumber(prevPageNumber => prevPageNumber + 1);
+                <i
-                  const records = document.querySelectorAll(".profileboard-record");
+                  className="triangle"
-                  records.forEach((r) => {
+                  style={{ position: 'relative', left: '-5px' }}
-                    (r as HTMLInputElement).style.height = "44px";
+                ></i>{' '}
-                  });
+              </button>
-                }
+              <span>
-              }}
+                {pageNumber}/{pageMax}
-              ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+              </span>
+              <button
+                onClick={() => {
+                  if (pageNumber !== pageMax) {
+                    setPageNumber(prevPageNumber => prevPageNumber + 1);
+                    const records = document.querySelectorAll(
+                      '.profileboard-record'
+                    );
+                    records.forEach(r => {
+                      (r as HTMLInputElement).style.height = '44px';
+                    });
+                  }
+                }}
+              >
+                <i
+                  className="triangle"
+                  style={{
+                    position: 'relative',
+                    left: '5px',
+                    transform: 'rotate(180deg)',
+                  }}
+                ></i>{' '}
+              </button>
            </div>
          </div>
        </div>
        <hr />
-        <div id='profileboard-records'>
+        <div id="profileboard-records">
+          {game === '0' ? (
-          {game === "0"
+            user.records
-            ? (
+              .sort((a, b) => a.map_id - b.map_id)
+              .map((r, index) =>
-              user.records.sort((a, b) => a.map_id - b.map_id)
+                Math.ceil((index + 1) / 20) === pageNumber ? (
-                .map((r, index) => (
+                  <button className="profileboard-record" key={index}>
+                    {r.scores.map((e, i) => (
-                  Math.ceil((index + 1) / 20) === pageNumber ? (
+                      <>
-                    <button className="profileboard-record" key={index}>
+                        {i !== 0 ? (
-                      {r.scores.map((e, i) => (<>
+                          <hr style={{ gridColumn: '1 / span 8' }} />
-                        {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
+                        ) : (
+                          ''
-                        <Link to={`/maps/${r.map_id}`}><span>{r.map_name}</span></Link>
+                        )}
-                        <span style={{ display: "grid" }}>{e.score_count}</span>
+                        <Link to={`/maps/${r.map_id}`}>
+                          <span>{r.map_name}</span>
-                        <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : `-`}</span>
+                        </Link>
-                        <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
+                        <span style={{ display: 'grid' }}>{e.score_count}</span>
+                        <span style={{ display: 'grid' }}>
+                          {e.score_count - r.map_wr_count > 0
+                            ? `+${e.score_count - r.map_wr_count}`
+                            : `-`}
+                        </span>
+                        <span style={{ display: 'grid' }}>
+                          {ticks_to_time(e.score_time)}
+                        </span>
                        <span> </span>
                        {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
-                        <span>{e.date.split("T")[0]}</span>
+                        <span>{e.date.split('T')[0]}</span>
-                        <span style={{ flexDirection: "row-reverse" }}>
+                        <span style={{ flexDirection: 'row-reverse' }}>
+                          <button
-                          <button onClick={() => { message("Demo Information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                            onClick={() => {
-                          <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                              message(
-                          {i === 0 && r.scores.length > 1 ? <button onClick={() => {
+                                'Demo Information',
-                            (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
+                                `Demo ID: ${e.demo_id}`
-                              (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"
+                          >
-                          }
+                            <img src={ThreedotIcon} alt="demo_id" />
-                          }><img src={HistoryIcon} alt="history" /></button> : ""}
+                          </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');
+                              }}
+                            >
+                              <img src={HistoryIcon} alt="history" />
+                            </button>
+                          ) : (
+                            ''
+                          )}
                        </span>
-                      </>))}
+                      </>
+                    ))}
+                  </button>
+                ) : (
+                  ''
+                )
+              )
+          ) : maps ? (
+            maps
+              .filter(e => e.is_disabled === false)
+              .sort((a, b) => a.id - b.id)
+              .map((r, index) => {
+                if (Math.ceil((index + 1) / 20) === pageNumber) {
+                  let record = user.records.find(e => e.map_id === r.id);
+                  return record === undefined ? (
+                    <button
+                      className="profileboard-record"
+                      key={index}
+                      style={{ backgroundColor: '#1b1b20' }}
+                    >
+                      <Link to={`/maps/${r.id}`}>
+                        <span>{r.name}</span>
+                      </Link>
+                      <span style={{ display: 'grid' }}>N/A</span>
+                      <span style={{ display: 'grid' }}>N/A</span>
+                      <span>N/A</span>
+                      <span> </span>
+                      <span>N/A</span>
+                      <span>N/A</span>
+                      <span style={{ flexDirection: 'row-reverse' }}></span>
                    </button>
-                  ) : ""
+                  ) : (
-                ))) : maps ?
+                    <button className="profileboard-record" key={index}>
+                      {record.scores.map((e, i) => (
-              maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
+                        <>
-                .map((r, index) => {
+                          {i !== 0 ? (
-                  if (Math.ceil((index + 1) / 20) === pageNumber) {
+                            <hr style={{ gridColumn: '1 / span 8' }} />
-                    let record = user.records.find((e) => e.map_id === r.id);
+                          ) : (
-                    return record === undefined ? (
+                            ''
-                      <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}>
+                          )}
-                        <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
+                          <Link to={`/maps/${r.id}`}>
-                        <span style={{ display: "grid" }}>N/A</span>
+                            <span>{r.name}</span>
-                        <span style={{ display: "grid" }}>N/A</span>
+                          </Link>
-                        <span>N/A</span>
+                          <span style={{ display: 'grid' }}>
-                        <span> </span>
+                            {record!.scores[i].score_count}
-                        <span>N/A</span>
+                          </span>
-                        <span>N/A</span>
+                          <span style={{ display: 'grid' }}>
-                        <span style={{ flexDirection: "row-reverse" }}></span>
+                            {record!.scores[i].score_count -
-                      </button>
+                              record!.map_wr_count >
-                    ) : (
+                            0
-                      <button className="profileboard-record" key={index}>
+                              ? `+${record!.scores[i].score_count - record!.map_wr_count}`
-                        {record.scores.map((e, i) => (<>
+                              : `-`}
-                          {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
+                          </span>
-                          <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
+                          <span style={{ display: 'grid' }}>
-                          <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
+                            {ticks_to_time(record!.scores[i].score_time)}
-                          <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : `-`}</span>
+                          </span>
-                          <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
                          <span> </span>
-                          {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
+                          {i === 0 ? (
-                          <span>{record!.scores[i].date.split("T")[0]}</span>
+                            <span>#{record!.placement}</span>
-                          <span style={{ flexDirection: "row-reverse" }}>
+                          ) : (
+                            <span> </span>
-                            <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>
+                          <span>{record!.scores[i].date.split('T')[0]}</span>
-                            {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
+                          <span style={{ flexDirection: 'row-reverse' }}>
-                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
+                            <button
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
+                              onClick={() => {
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${record!.scores.length * 46}px` :
+                                message(
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                                  'Demo Information',
-                            }
+                                  `Demo ID: ${e.demo_id}`
-                            }><img src={HistoryIcon} alt="history" /></button> : ""}
+                                );
+                              }}
+                            >
+                              <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');
+                                }}
+                              >
+                                <img src={HistoryIcon} alt="history" />
+                              </button>
+                            ) : (
+                              ''
+                            )}
                          </span>
-                        </>))}
+                        </>
-                      </button>
+                      ))}
+                    </button>
-                    )
+                  );
-                  } else { return null }
+                } else {
-                }) : (<>{console.warn(maps)}</>)}
+                  return null;
+                }
+              })
+          ) : (
+            <>{console.warn(maps)}</>
+          )}
        </div>
      </section>
    </main>
diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
index 8265915..9bf083a 100644
--- a/frontend/src/react-app-env.d.ts
+++ b/frontend/src/react-app-env.d.ts
@@ -1,2 +1,2 @@
-declare module "*.png";
+declare module '*.png';
-declare module "*.css";
+declare module '*.css';
diff --git a/frontend/src/types/Chapters.ts b/frontend/src/types/Chapters.ts
index 1d48306..8924b97 100644
--- a/frontend/src/types/Chapters.ts
+++ b/frontend/src/types/Chapters.ts
@@ -1,19 +1,19 @@
-import type { Game } from "@customTypes/Game";
+import type { Game } from '@customTypes/Game';
-import type { Map } from "@customTypes/Map";
+import type { Map } from '@customTypes/Map';
 interface Chapter {
-    id: number;
+  id: number;
-    name: string;
+  name: string;
-    image: string;
+  image: string;
-    is_disabled: boolean;
+  is_disabled: boolean;
 }
 export interface GameChapter {
-    chapter: Chapter;
+  chapter: Chapter;
-    maps: Map[];
+  maps: Map[];
 }
 export interface GamesChapters {
-    game: Game;
+  game: Game;
-    chapters: Chapter[];
+  chapters: Chapter[];
-}
-\ No newline at end of file
+}
diff --git a/frontend/src/types/Content.ts b/frontend/src/types/Content.ts
index 775fab4..77b3970 100644
--- a/frontend/src/types/Content.ts
+++ b/frontend/src/types/Content.ts
@@ -6,18 +6,18 @@ export interface ModMenuContent {
  showcase: string;
  description: string;
  category_id: number;
-};
+}
 export interface MapDiscussionContent {
  title: string;
  content: string;
-};
+}
 export interface MapDiscussionCommentContent {
  comment: string;
-};
+}
 export interface UploadRunContent {
  host_demo: File | null;
  partner_demo: File | null;
-};
+}
diff --git a/frontend/src/types/Game.ts b/frontend/src/types/Game.ts
index 1a80341..be2cd73 100644
--- a/frontend/src/types/Game.ts
+++ b/frontend/src/types/Game.ts
@@ -1,37 +1,36 @@
 import type { Map } from '@customTypes/Map';
 export interface Game {
  id: number;
  name: string;
  image: string;
  is_coop: boolean;
  category_portals: GameCategoryPortals[];
-};
+}
 export interface GameChapters {
  game: Game;
  chapters: Chapter[];
-};
+}
 export interface GameMaps {
  game: Game;
  maps: Map[];
-};
+}
 export interface Category {
  id: number;
  name: string;
-};
+}
 interface Chapter {
  id: number;
  name: string;
  image: string;
  is_disabled: boolean;
-};
+}
 export interface GameCategoryPortals {
  category: Category;
  portal_count: number;
-};
+}
diff --git a/frontend/src/types/Map.ts b/frontend/src/types/Map.ts
index 89c66d5..6bc6369 100644
--- a/frontend/src/types/Map.ts
+++ b/frontend/src/types/Map.ts
@@ -9,15 +9,15 @@ export interface Map {
  is_disabled: boolean;
  difficulty: number;
  category_portals: GameCategoryPortals[];
-};
+}
 export interface MapDiscussion {
  discussion: MapDiscussionsDetail;
-};
+}
 export interface MapDiscussions {
  discussions: MapDiscussionsDetail[];
-};
+}
 export interface MapDiscussionsDetail {
  id: number;
@@ -27,22 +27,24 @@ export interface MapDiscussionsDetail {
  comments: MapDiscussionDetailComment[];
  created_at: string;
  updated_at: string;
-};
+}
 interface MapDiscussionDetailComment {
  comment: string;
  date: string;
  user: UserShort;
-};
+}
 export interface MapLeaderboard {
  map: MapSummaryMap;
-  records: MapLeaderboardRecordSingleplayer[] | MapLeaderboardRecordMultiplayer[];
+  records:
+    | MapLeaderboardRecordSingleplayer[]
+    | MapLeaderboardRecordMultiplayer[];
  pagination: Pagination;
-};
+}
 export interface MapLeaderboardRecordSingleplayer {
-  kind: "singleplayer";
+  kind: 'singleplayer';
  placement: number;
  record_id: number;
  score_count: number;
@@ -50,10 +52,10 @@ export interface MapLeaderboardRecordSingleplayer {
  user: UserShort;
  demo_id: string;
  record_date: string;
-};
+}
 export interface MapLeaderboardRecordMultiplayer {
-  kind: "multiplayer";
+  kind: 'multiplayer';
  placement: number;
  record_id: number;
  score_count: number;
@@ -63,13 +65,12 @@ export interface MapLeaderboardRecordMultiplayer {
  host_demo_id: string;
  partner_demo_id: string;
  record_date: string;
-};
+}
 export interface MapSummary {
  map: MapSummaryMap;
  summary: MapSummaryDetails;
-};
+}
 interface MapSummaryMap {
  id: number;
@@ -79,11 +80,11 @@ interface MapSummaryMap {
  map_name: string;
  is_coop: boolean;
  is_disabled: boolean;
-};
+}
 interface MapSummaryDetails {
  routes: MapSummaryDetailsRoute[];
-};
+}
 interface MapSummaryDetailsRoute {
  route_id: number;
@@ -93,16 +94,15 @@ interface MapSummaryDetailsRoute {
  completion_count: number;
  description: string;
  showcase: string;
-};
+}
 interface MapSummaryDetailsRouteHistory {
  runner_name: string;
  score_count: number;
  date: string;
-};
+}
 export interface MapDeleteEndpoint {
  map_id: number;
  record_id: number;
 }
diff --git a/frontend/src/types/MapNames.ts b/frontend/src/types/MapNames.ts
index b6313e7..9ea9851 100644
--- a/frontend/src/types/MapNames.ts
+++ b/frontend/src/types/MapNames.ts
@@ -1,127 +1,127 @@
 export const MapNames: { [key: string]: number } = {
-    "sp_a1_intro1": 1,
+  sp_a1_intro1: 1,
-    "sp_a1_intro2": 2,
+  sp_a1_intro2: 2,
-    "sp_a1_intro3": 3,
+  sp_a1_intro3: 3,
-    "sp_a1_intro4": 4,
+  sp_a1_intro4: 4,
-    "sp_a1_intro5": 5,
+  sp_a1_intro5: 5,
-    "sp_a1_intro6": 6,
+  sp_a1_intro6: 6,
-    "sp_a1_intro7": 7,
+  sp_a1_intro7: 7,
-    "sp_a1_wakeup": 8,
+  sp_a1_wakeup: 8,
-    "sp_a2_intro": 9,
+  sp_a2_intro: 9,
-    "sp_a2_laser_intro": 10,
+  sp_a2_laser_intro: 10,
-    "sp_a2_laser_stairs": 11,
+  sp_a2_laser_stairs: 11,
-    "sp_a2_dual_lasers": 12,
+  sp_a2_dual_lasers: 12,
-    "sp_a2_laser_over_goo": 13,
+  sp_a2_laser_over_goo: 13,
-    "sp_a2_catapult_intro": 14,
+  sp_a2_catapult_intro: 14,
-    "sp_a2_trust_fling": 15,
+  sp_a2_trust_fling: 15,
-    "sp_a2_pit_flings": 16,
+  sp_a2_pit_flings: 16,
-    "sp_a2_fizzler_intro": 17,
+  sp_a2_fizzler_intro: 17,
-    "sp_a2_sphere_peek": 18,
+  sp_a2_sphere_peek: 18,
-    "sp_a2_ricochet": 19,
+  sp_a2_ricochet: 19,
-    "sp_a2_bridge_intro": 20,
+  sp_a2_bridge_intro: 20,
-    "sp_a2_bridge_the_gap": 21,
+  sp_a2_bridge_the_gap: 21,
-    "sp_a2_turret_intro": 22,
+  sp_a2_turret_intro: 22,
-    "sp_a2_laser_relays": 23,
+  sp_a2_laser_relays: 23,
-    "sp_a2_turret_blocker": 24,
+  sp_a2_turret_blocker: 24,
-    "sp_a2_laser_vs_turret": 25,
+  sp_a2_laser_vs_turret: 25,
-    "sp_a2_pull_the_rug": 26,
+  sp_a2_pull_the_rug: 26,
-    "sp_a2_column_blocker": 27,
+  sp_a2_column_blocker: 27,
-    "sp_a2_laser_chaining": 28,
+  sp_a2_laser_chaining: 28,
-    "sp_a2_triple_laser": 29,
+  sp_a2_triple_laser: 29,
-    "sp_a2_bts1": 30,
+  sp_a2_bts1: 30,
-    "sp_a2_bts2": 31,
+  sp_a2_bts2: 31,
-    "sp_a2_bts3": 32,
+  sp_a2_bts3: 32,
-    "sp_a2_bts4": 33,
+  sp_a2_bts4: 33,
-    "sp_a2_bts5": 34,
+  sp_a2_bts5: 34,
-    "sp_a2_core": 35,
+  sp_a2_core: 35,
-    "sp_a3_01": 36,
+  sp_a3_01: 36,
-    "sp_a3_03": 37,
+  sp_a3_03: 37,
-    "sp_a3_jump_intro": 38,
+  sp_a3_jump_intro: 38,
-    "sp_a3_bomb_flings": 39,
+  sp_a3_bomb_flings: 39,
-    "sp_a3_crazy_box": 40,
+  sp_a3_crazy_box: 40,
-    "sp_a3_transition01": 41,
+  sp_a3_transition01: 41,
-    "sp_a3_speed_ramp": 42,
+  sp_a3_speed_ramp: 42,
-    "sp_a3_speed_flings": 43,
+  sp_a3_speed_flings: 43,
-    "sp_a3_portal_intro": 44,
+  sp_a3_portal_intro: 44,
-    "sp_a3_end": 45,
+  sp_a3_end: 45,
-    "sp_a4_intro": 46,
+  sp_a4_intro: 46,
-    "sp_a4_tb_intro": 47,
+  sp_a4_tb_intro: 47,
-    "sp_a4_tb_trust_drop": 48,
+  sp_a4_tb_trust_drop: 48,
-    "sp_a4_tb_wall_button": 49,
+  sp_a4_tb_wall_button: 49,
-    "sp_a4_tb_polarity": 50,
+  sp_a4_tb_polarity: 50,
-    "sp_a4_tb_catch": 51,
+  sp_a4_tb_catch: 51,
-    "sp_a4_stop_the_box": 52,
+  sp_a4_stop_the_box: 52,
-    "sp_a4_laser_catapult": 53,
+  sp_a4_laser_catapult: 53,
-    "sp_a4_laser_platform": 54,
+  sp_a4_laser_platform: 54,
-    "sp_a4_speed_tb_catch": 55,
+  sp_a4_speed_tb_catch: 55,
-    "sp_a4_jump_polarity": 56,
+  sp_a4_jump_polarity: 56,
-    "sp_a4_finale1": 57,
+  sp_a4_finale1: 57,
-    "sp_a4_finale2": 58,
+  sp_a4_finale2: 58,
-    "sp_a4_finale3": 59,
+  sp_a4_finale3: 59,
-    "sp_a4_finale4": 60,
+  sp_a4_finale4: 60,
-    "mp_coop_start": 61,
+  mp_coop_start: 61,
-    "mp_coop_lobby_3": 62,
+  mp_coop_lobby_3: 62,
-    "mp_coop_doors": 63,
+  mp_coop_doors: 63,
-    "mp_coop_race_2": 64,
+  mp_coop_race_2: 64,
-    "mp_coop_laser_2": 65,
+  mp_coop_laser_2: 65,
-    "mp_coop_rat_maze": 66,
+  mp_coop_rat_maze: 66,
-    "mp_coop_laser_crusher": 67,
+  mp_coop_laser_crusher: 67,
-    "mp_coop_teambts": 68,
+  mp_coop_teambts: 68,
-    "mp_coop_fling_3": 69,
+  mp_coop_fling_3: 69,
-    "mp_coop_infinifling_train": 70,
+  mp_coop_infinifling_train: 70,
-    "mp_coop_come_along": 71,
+  mp_coop_come_along: 71,
-    "mp_coop_fling_1": 72,
+  mp_coop_fling_1: 72,
-    "mp_coop_catapult_1": 73,
+  mp_coop_catapult_1: 73,
-    "mp_coop_multifling_1": 74,
+  mp_coop_multifling_1: 74,
-    "mp_coop_fling_crushers": 75,
+  mp_coop_fling_crushers: 75,
-    "mp_coop_fan": 76,
+  mp_coop_fan: 76,
-    "mp_coop_wall_intro": 77,
+  mp_coop_wall_intro: 77,
-    "mp_coop_wall_2": 78,
+  mp_coop_wall_2: 78,
-    "mp_coop_catapult_wall_intro": 79,
+  mp_coop_catapult_wall_intro: 79,
-    "mp_coop_wall_block": 80,
+  mp_coop_wall_block: 80,
-    "mp_coop_catapult_2": 81,
+  mp_coop_catapult_2: 81,
-    "mp_coop_turret_walls": 82,
+  mp_coop_turret_walls: 82,
-    "mp_coop_turret_ball": 83,
+  mp_coop_turret_ball: 83,
-    "mp_coop_wall_5": 84,
+  mp_coop_wall_5: 84,
-    "mp_coop_tbeam_redirect": 85,
+  mp_coop_tbeam_redirect: 85,
-    "mp_coop_tbeam_drill": 86,
+  mp_coop_tbeam_drill: 86,
-    "mp_coop_tbeam_catch_grind_1": 87,
+  mp_coop_tbeam_catch_grind_1: 87,
-    "mp_coop_tbeam_laser_1": 88,
+  mp_coop_tbeam_laser_1: 88,
-    "mp_coop_tbeam_polarity": 89,
+  mp_coop_tbeam_polarity: 89,
-    "mp_coop_tbeam_polarity2": 90,
+  mp_coop_tbeam_polarity2: 90,
-    "mp_coop_tbeam_polarity3": 91,
+  mp_coop_tbeam_polarity3: 91,
-    "mp_coop_tbeam_maze": 92,
+  mp_coop_tbeam_maze: 92,
-    "mp_coop_tbeam_end": 93,
+  mp_coop_tbeam_end: 93,
-    "mp_coop_paint_come_along": 94,
+  mp_coop_paint_come_along: 94,
-    "mp_coop_paint_redirect": 95,
+  mp_coop_paint_redirect: 95,
-    "mp_coop_paint_bridge": 96,
+  mp_coop_paint_bridge: 96,
-    "mp_coop_paint_walljumps": 97,
+  mp_coop_paint_walljumps: 97,
-    "mp_coop_paint_speed_fling": 98,
+  mp_coop_paint_speed_fling: 98,
-    "mp_coop_paint_red_racer": 99,
+  mp_coop_paint_red_racer: 99,
-    "mp_coop_paint_speed_catch": 100,
+  mp_coop_paint_speed_catch: 100,
-    "mp_coop_paint_longjump_intro": 101,
+  mp_coop_paint_longjump_intro: 101,
-    "mp_coop_separation_1": 102,
+  mp_coop_separation_1: 102,
-    "mp_coop_tripleaxis": 103,
+  mp_coop_tripleaxis: 103,
-    "mp_coop_catapult_catch": 104,
+  mp_coop_catapult_catch: 104,
-    "mp_coop_2paints_1bridge": 105,
+  mp_coop_2paints_1bridge: 105,
-    "mp_coop_paint_conversion": 106,
+  mp_coop_paint_conversion: 106,
-    "mp_coop_bridge_catch": 107,
+  mp_coop_bridge_catch: 107,
-    "mp_coop_laser_tbeam": 108,
+  mp_coop_laser_tbeam: 108,
-    "mp_coop_paint_rat_maze": 109,
+  mp_coop_paint_rat_maze: 109,
-    "mp_coop_paint_crazy_box": 110,
+  mp_coop_paint_crazy_box: 110,
 };
diff --git a/frontend/src/types/Pagination.ts b/frontend/src/types/Pagination.ts
index ccff04b..18494eb 100644
--- a/frontend/src/types/Pagination.ts
+++ b/frontend/src/types/Pagination.ts
@@ -3,4 +3,4 @@ export interface Pagination {
  total_pages: number;
  current_page: number;
  page_size: number;
-};
+}
diff --git a/frontend/src/types/Profile.ts b/frontend/src/types/Profile.ts
index 42e5c3e..8051ae5 100644
--- a/frontend/src/types/Profile.ts
+++ b/frontend/src/types/Profile.ts
@@ -1,10 +1,10 @@
-import type { Pagination } from "@customTypes/Pagination";
+import type { Pagination } from '@customTypes/Pagination';
 export interface UserShort {
  steam_id: string;
  user_name: string;
  avatar_link: string;
-};
+}
 export interface UserProfile {
  profile: boolean;
@@ -17,25 +17,25 @@ export interface UserProfile {
  rankings: UserProfileRankings;
  records: UserProfileRecords[];
  pagination: Pagination;
-};
+}
 interface UserProfileTitles {
  name: string;
  color: string;
-};
+}
 interface UserProfileLinks {
  p2sr: string;
  steam: string;
  youtube: string;
  twitch: string;
-};
+}
 interface UserProfileRankings {
  overall: UserProfileRankingsDetail;
  singleplayer: UserProfileRankingsDetail;
  cooperative: UserProfileRankingsDetail;
-};
+}
 interface UserProfileRecords {
  game_id: number;
@@ -44,8 +44,8 @@ interface UserProfileRecords {
  map_name: string;
  map_wr_count: number;
  placement: number;
-  scores: UserProfileRecordsScores[]
+  scores: UserProfileRecordsScores[];
-};
+}
 interface UserProfileRecordsScores {
  record_id: number;
@@ -53,11 +53,10 @@ interface UserProfileRecordsScores {
  score_count: number;
  score_time: number;
  date: string;
-};
+}
 interface UserProfileRankingsDetail {
  rank: number;
  completion_count: number;
  completion_total: number;
-};
+}
diff --git a/frontend/src/types/Ranking.ts b/frontend/src/types/Ranking.ts
index a143355..06a5ca4 100644
--- a/frontend/src/types/Ranking.ts
+++ b/frontend/src/types/Ranking.ts
@@ -1,31 +1,31 @@
-import type { UserShort } from "@customTypes/Profile";
+import type { UserShort } from '@customTypes/Profile';
 export interface RankingType {
-    placement: number;
+  placement: number;
-    user: UserShort;
+  user: UserShort;
-    total_score: number;
+  total_score: number;
 }
 export interface SteamRankingType {
-    user_name: string;
+  user_name: string;
-    avatar_link: string;
+  avatar_link: string;
-    steam_id: string;
+  steam_id: string;
-    sp_score: number;
+  sp_score: number;
-    mp_score: number;
+  mp_score: number;
-    overall_score: number;
+  overall_score: number;
-    sp_rank: number;
+  sp_rank: number;
-    mp_rank: number;
+  mp_rank: number;
-    overall_rank: number;
+  overall_rank: number;
 }
 export interface Ranking {
-    rankings_overall: RankingType[];
+  rankings_overall: RankingType[];
-    rankings_singleplayer: RankingType[];
+  rankings_singleplayer: RankingType[];
-    rankings_multiplayer: RankingType[];
+  rankings_multiplayer: RankingType[];
 }
 export interface SteamRanking {
-    rankings_overall: SteamRankingType[];
+  rankings_overall: SteamRankingType[];
-    rankings_singleplayer: SteamRankingType[];
+  rankings_singleplayer: SteamRankingType[];
-    rankings_multiplayer: SteamRankingType[];
+  rankings_multiplayer: SteamRankingType[];
-}
-\ No newline at end of file
+}
diff --git a/frontend/src/types/Search.ts b/frontend/src/types/Search.ts
index d218806..48b9169 100644
--- a/frontend/src/types/Search.ts
+++ b/frontend/src/types/Search.ts
@@ -1,13 +1,13 @@
-import type { UserShort } from "@customTypes/Profile";
+import type { UserShort } from '@customTypes/Profile';
 export interface Search {
  players: UserShort[];
  maps: SearchMap[];
-};
+}
 interface SearchMap {
  id: number;
  game: string;
  chapter: string;
  map: string;
-};
+}
diff --git a/frontend/src/utils/Jwt.ts b/frontend/src/utils/Jwt.ts
index ce351fb..affcd36 100644
--- a/frontend/src/utils/Jwt.ts
+++ b/frontend/src/utils/Jwt.ts
@@ -1,5 +1,7 @@
 // llm ahh funcs
-export function get_user_id_from_token(token: string | undefined): string | undefined {
+export function get_user_id_from_token(
+  token: string | undefined
+): string | undefined {
  if (!token) {
    return undefined;
  }
@@ -19,9 +21,11 @@ export function get_user_id_from_token(token: string | undefined): string | unde
      .join('')
  );
  return JSON.parse(jsonPayload).sub;
-};
+}
-export function get_user_mod_from_token(token: string | undefined): boolean | undefined {
+export function get_user_mod_from_token(
+  token: string | undefined
+): boolean | undefined {
  if (!token) {
    return undefined;
  }
@@ -41,4 +45,4 @@ export function get_user_mod_from_token(token: string | undefined): boolean | un
      .join('')
  );
  return JSON.parse(jsonPayload).mod;
-};
+}
diff --git a/frontend/src/utils/Time.ts b/frontend/src/utils/Time.ts
index b83a7ed..34830b0 100644
--- a/frontend/src/utils/Time.ts
+++ b/frontend/src/utils/Time.ts
@@ -1,42 +1,62 @@
 export function time_ago(date: any) {
  const now = new Date().getTime();
-  
-  const localDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000));
+  const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
-  const seconds = Math.floor((now - localDate.getTime()) / 1000);    
+  const seconds = Math.floor((now - localDate.getTime()) / 1000);
  let interval = Math.floor(seconds / 31536000);
-  if (interval === 1) {return interval + ' year ago';}
+  if (interval === 1) {
-  if (interval > 1) {return interval + ' years ago';}
+    return interval + ' year ago';
+  }
+  if (interval > 1) {
+    return interval + ' years ago';
+  }
  interval = Math.floor(seconds / 2592000);
-  if (interval === 1) {return interval + ' month ago';}
+  if (interval === 1) {
-  if (interval > 1) {return interval + ' months ago';}
+    return interval + ' month ago';
+  }
+  if (interval > 1) {
+    return interval + ' months ago';
+  }
  interval = Math.floor(seconds / 86400);
-  if (interval === 1) {return interval + ' day ago';}
+  if (interval === 1) {
-  if (interval > 1) {return interval + ' days ago';}
+    return interval + ' day ago';
+  }
+  if (interval > 1) {
+    return interval + ' days ago';
+  }
  interval = Math.floor(seconds / 3600);
-  if (interval === 1) {return interval + ' hour ago';}
+  if (interval === 1) {
-  if (interval > 1) {return interval + ' hours ago';}
+    return interval + ' hour ago';
+  }
+  if (interval > 1) {
+    return interval + ' hours ago';
+  }
  interval = Math.floor(seconds / 60);
-  if (interval === 1) {return interval + ' minute ago';}
+  if (interval === 1) {
-  if (interval > 1) {return interval + ' minutes ago';}
+    return interval + ' minute ago';
+  }
+  if (interval > 1) {
+    return interval + ' minutes ago';
+  }
-  if(seconds < 10) return 'just now';
+  if (seconds < 10) return 'just now';
  return Math.floor(seconds) + ' seconds ago';
-};
+}
 export function ticks_to_time(ticks: number) {
-  let seconds = Math.floor(ticks / 60)
+  let seconds = Math.floor(ticks / 60);
-  let minutes = Math.floor(seconds / 60)
+  let minutes = Math.floor(seconds / 60);
-  let hours = Math.floor(minutes / 60)
+  let hours = Math.floor(minutes / 60);
-  let milliseconds = Math.floor((ticks % 60) * 1000 / 60)
+  let milliseconds = Math.floor(((ticks % 60) * 1000) / 60);
  seconds = seconds % 60;
  minutes = minutes % 60;
-  return `${hours === 0 ? "" : hours + ":"}${minutes === 0 ? "" : hours > 0 ? minutes.toString().padStart(2, '0') + ":" : (minutes + ":")}${minutes > 0 ? seconds.toString().padStart(2, '0') : seconds}.${milliseconds.toString().padStart(3, '0')}`;
+  return `${hours === 0 ? '' : hours + ':'}${minutes === 0 ? '' : hours > 0 ? minutes.toString().padStart(2, '0') + ':' : minutes + ':'}${minutes > 0 ? seconds.toString().padStart(2, '0') : seconds}.${milliseconds.toString().padStart(3, '0')}`;
-};
-\ No newline at end of file
+}
author	FifthWit <fifthwitbusiness@gmail.com>	2025-01-30 10:44:30 -0600
committer	FifthWit <fifthwitbusiness@gmail.com>	2025-01-30 10:44:30 -0600
commit	e40f07211f5f15dcb138e2520a76d13afd3c0cfd (patch)
tree	46bad6a17e66d55a4a65088c0b6eb8c48641615a /frontend/src
parent	added prettier for more consistency (diff)
download	lphub-e40f07211f5f15dcb138e2520a76d13afd3c0cfd.tar.gz lphub-e40f07211f5f15dcb138e2520a76d13afd3c0cfd.tar.bz2 lphub-e40f07211f5f15dcb138e2520a76d13afd3c0cfd.zip