switched to double quotes

author: FifthWit <fifthwitbusiness@gmail.com> 2025-01-30 13:11:48 -0600
committer: FifthWit <fifthwitbusiness@gmail.com> 2025-01-30 13:11:48 -0600
commit: 81342e2579165ebfdb28c749dc5225141721a419 (patch)
tree: 8e5759c20b92408048fe5ac44f48e2df2a00ab9b /frontend
parent: fixed issues with useCallback (diff)
download: lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.gz
lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.bz2
lphub-81342e2579165ebfdb28c749dc5225141721a419.zip
46 files changed, 691 insertions, 691 deletions
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index 680faf0..30dce81 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -2,7 +2,7 @@
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
-  "singleQuote": true,
+  "singleQuote": false,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4a99625..fbfa59f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,24 +1,24 @@
-import React, { useCallback } from 'react';
+import React, { useCallback } 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);
@@ -119,7 +119,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 b98dda3..0e1658c 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 e495d47..98c6d36 100644
--- a/frontend/src/api/Auth.ts
+++ b/frontend/src/api/Auth.ts
@@ -1,5 +1,5 @@
-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`));
@@ -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 0e47091..b739f80 100644
--- a/frontend/src/api/Games.ts
+++ b/frontend/src/api/Games.ts
@@ -1,9 +1,9 @@
-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`));
diff --git a/frontend/src/api/Maps.ts b/frontend/src/api/Maps.ts
index 3a22f88..2485941 100644
--- a/frontend/src/api/Maps.ts
+++ b/frontend/src/api/Maps.ts
@@ -1,12 +1,12 @@
-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';
+} from "@customTypes/Map";
 export const get_map_summary = async (map_id: string): Promise<MapSummary> => {
  const response = await axios.get(url(`maps/${map_id}/summary`));
@@ -27,9 +27,9 @@ export const get_map_leaderboard = async (
  // map the kind of leaderboard
  data.records = data.records.map((record: any) => {
    if (record.host && record.partner) {
-      return { ...record, kind: 'multiplayer' };
+      return { ...record, kind: "multiplayer" };
    } else {
-      return { ...record, kind: 'singleplayer' };
+      return { ...record, kind: "singleplayer" };
    }
  });
  return data;
diff --git a/frontend/src/api/Mod.ts b/frontend/src/api/Mod.ts
index 69e76c5..d682f1a 100644
--- a/frontend/src/api/Mod.ts
+++ b/frontend/src/api/Mod.ts
@@ -1,6 +1,6 @@
-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,
diff --git a/frontend/src/api/Rankings.ts b/frontend/src/api/Rankings.ts
index 9afd999..b8d9bec 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 4ce21e1..004aa22 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 925118d..c89d9ea 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import '@css/Dialog.css';
+import "@css/Dialog.css";
 interface ConfirmDialogProps {
  title: string;
diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx
index 994cd8e..7aa8901 100644
--- a/frontend/src/components/Discussions.tsx
+++ b/frontend/src/components/Discussions.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
+import React from "react";
 import {
  MapDiscussion,
  MapDiscussions,
  MapDiscussionsDetail,
-} from '@customTypes/Map';
+} 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,7 +90,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
        <input
          type="text"
          value={discussionSearch}
-          placeholder={'Search for posts...'}
+          placeholder={"Search for posts..."}
          onChange={e => setDiscussionSearch(e.target.value)}
        />
        <div>
@@ -104,7 +104,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
          <div id="discussion-create">
            <span>Create Post</span>
            <button onClick={() => setCreateDiscussion(false)}>X</button>
-            <div style={{ gridColumn: '1 / span 2' }}>
+            <div style={{ gridColumn: "1 / span 2" }}>
              <input
                id="discussion-create-title"
                placeholder="Title..."
@@ -126,7 +126,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
                }
              />
            </div>
-            <div style={{ placeItems: 'end', gridColumn: '1 / span 2' }}>
+            <div style={{ placeItems: "end", gridColumn: "1 / span 2" }}>
              <button
                id="discussion-create-button"
                onClick={() => _create_map_discussion()}
@@ -157,8 +157,8 @@ const Discussions: React.FC<DiscussionsProps> = ({
                  {time_ago(
                    new Date(
                      discussionThread.discussion.created_at
-                        .replace('T', ' ')
+                        .replace("T", " ")
-                        .replace('Z', '')
+                        .replace("Z", "")
                    )
                  )}
                </span>
@@ -180,7 +180,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
                          <span>
                            {time_ago(
                              new Date(
-                                e.date.replace('T', ' ').replace('Z', '')
+                                e.date.replace("T", " ").replace("Z", "")
                              )
                            )}
                          </span>
@@ -188,15 +188,15 @@ const Discussions: React.FC<DiscussionsProps> = ({
                        </div>
                      </>
                    ))
-                : ''}
+                : ""}
            </div>
            <div id="discussion-send">
              <input
                type="text"
                value={createDiscussionCommentContent}
-                placeholder={'Message'}
+                placeholder={"Message"}
                onKeyDown={e =>
-                  e.key === 'Enter' &&
+                  e.key === "Enter" &&
                  _create_map_discussion_comment(discussionThread.discussion.id)
                }
                onChange={e =>
@@ -206,11 +206,11 @@ const Discussions: React.FC<DiscussionsProps> = ({
              <div>
                <button
                  onClick={() => {
-                    if (createDiscussionCommentContent !== '') {
+                    if (createDiscussionCommentContent !== "") {
                      _create_map_discussion_comment(
                        discussionThread.discussion.id
                      );
-                      setCreateDiscussionCommentContent('');
+                      setCreateDiscussionCommentContent("");
                    }
                  }}
                >
@@ -248,10 +248,10 @@ const Discussions: React.FC<DiscussionsProps> = ({
                      <b>{e.creator.user_name}:</b> {e.content}
                    </span>
                    <span>
-                      Last Updated:{' '}
+                      Last Updated:{" "}
                      {time_ago(
                        new Date(
-                          e.updated_at.replace('T', ' ').replace('Z', '')
+                          e.updated_at.replace("T", " ").replace("Z", "")
                        )
                      )}
                    </span>
@@ -260,7 +260,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
              ))}
          </>
        ) : (
-          <span style={{ textAlign: 'center', display: 'block' }}>
+          <span style={{ textAlign: "center", display: "block" }}>
            No Discussions...
          </span>
        )
diff --git a/frontend/src/components/GameCategory.tsx b/frontend/src/components/GameCategory.tsx
index b13be48..2bb6d42 100644
--- a/frontend/src/components/GameCategory.tsx
+++ b/frontend/src/components/GameCategory.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { Game, GameCategoryPortals } from '@customTypes/Game';
+import { Game, GameCategoryPortals } from "@customTypes/Game";
-import '@css/Games.css';
+import "@css/Games.css";
 interface GameCategoryProps {
  game: Game;
@@ -13,7 +13,7 @@ const GameCategory: React.FC<GameCategoryProps> = ({ cat, game }) => {
  return (
    <Link
      className="games-page-item-body-item"
-      to={'/games/' + game.id + '?cat=' + cat.category.id}
+      to={"/games/" + game.id + "?cat=" + cat.category.id}
    >
      <div>
        <span className="games-page-item-body-item-title">
diff --git a/frontend/src/components/GameEntry.tsx b/frontend/src/components/GameEntry.tsx
index b58bbdd..04c3483 100644
--- a/frontend/src/components/GameEntry.tsx
+++ b/frontend/src/components/GameEntry.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { Game, GameCategoryPortals } from '@customTypes/Game';
+import { Game, GameCategoryPortals } from "@customTypes/Game";
-import '@css/Games.css';
+import "@css/Games.css";
-import GameCategory from '@components/GameCategory';
+import GameCategory from "@components/GameCategory";
 interface GameEntryProps {
  game: Game;
@@ -18,7 +18,7 @@ const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
  }, [game.category_portals]);
  return (
-    <Link to={'/games/' + game.id}>
+    <Link to={"/games/" + game.id}>
      <div className="games-page-item">
        <div className="games-page-item-header">
          <div
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index 801f331..b388aba 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,12 +1,12 @@
-import React, { useCallback } from 'react';
+import React, { useCallback } 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>
@@ -87,8 +87,8 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
              >
                <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}
@@ -103,11 +103,11 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
                <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 093e406..1858c48 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React from "react";
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from "react-router-dom";
-import { ExitIcon, UserIcon, LoginIcon } from '@images/Images';
+import { ExitIcon, UserIcon, LoginIcon } from "@images/Images";
-import { UserProfile } from '@customTypes/Profile';
+import { UserProfile } from "@customTypes/Profile";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-import '@css/Login.css';
+import "@css/Login.css";
 interface LoginProps {
  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -16,14 +16,14 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
  const navigate = useNavigate();
  const _login = () => {
-    window.location.href = '/api/v1/login';
+    window.location.href = "/api/v1/login";
  };
  const _logout = () => {
    setProfile(undefined);
    setToken(undefined);
    API.delete_token();
-    navigate('/');
+    navigate("/");
  };
  return (
diff --git a/frontend/src/components/MapEntry.tsx b/frontend/src/components/MapEntry.tsx
index f1dee5b..985e806 100644
--- a/frontend/src/components/MapEntry.tsx
+++ b/frontend/src/components/MapEntry.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 const MapEntry: React.FC = () => {
  return <div></div>;
diff --git a/frontend/src/components/MessageDialog.tsx b/frontend/src/components/MessageDialog.tsx
index b739ebc..fcf4d8d 100644
--- a/frontend/src/components/MessageDialog.tsx
+++ b/frontend/src/components/MessageDialog.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import '@css/Dialog.css';
+import "@css/Dialog.css";
 interface MessageDialogProps {
  title: string;
diff --git a/frontend/src/components/MessageDialogLoad.tsx b/frontend/src/components/MessageDialogLoad.tsx
index acea27d..64cdd29 100644
--- a/frontend/src/components/MessageDialogLoad.tsx
+++ b/frontend/src/components/MessageDialogLoad.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import '@css/Dialog.css';
+import "@css/Dialog.css";
 interface MessageDialogLoadProps {
  title: string;
@@ -18,7 +18,7 @@ const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({
          <span>{title}</span>
        </div>
        <div className="dialog-element dialog-description">
-          <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <div style={{ display: "flex", justifyContent: "center" }}>
            <span className="loader"></span>
          </div>
        </div>
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx
index 140d6a3..618d1a7 100644
--- a/frontend/src/components/ModMenu.tsx
+++ b/frontend/src/components/ModMenu.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import 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,16 +28,16 @@ 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();
@@ -47,7 +47,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
    return new Promise(resolve => {
      reader.onload = () => {
        const img = new Image();
-        if (typeof reader.result === 'string') {
+        if (typeof reader.result === "string") {
          img.src = reader.result;
          img.onload = () => {
            let { width, height } = img;
@@ -59,10 +59,10 @@ const ModMenu: React.FC<ModMenuProps> = ({
              width *= 320 / height;
              height = 320;
            }
-            const canvas = document.createElement('canvas');
+            const canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;
-            canvas.getContext('2d')!.drawImage(img, 0, 0, width, height);
+            canvas.getContext("2d")!.drawImage(img, 0, 0, width, height);
            resolve(canvas.toDataURL(file.type, 0.6));
          };
        }
@@ -73,8 +73,8 @@ const ModMenu: React.FC<ModMenuProps> = ({
  const _edit_map_summary_image = async () => {
    if (
      await confirm(
-        'Edit Map Summary Image',
+        "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]);
@@ -322,7 +322,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
              </div>
              <div
                id="modview-route-description"
-                style={{ height: '180px', gridColumn: '1 / span 5' }}
+                style={{ height: "180px", gridColumn: "1 / span 5" }}
              >
                <span>Description:</span>
                <textarea
@@ -337,7 +337,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                />
              </div>
              <button
-                style={{ gridColumn: '2 / span 3', height: '40px' }}
+                style={{ gridColumn: "2 / span 3", height: "40px" }}
                onClick={_edit_map_summary_route}
              >
                Apply
@@ -391,8 +391,8 @@ const ModMenu: React.FC<ModMenuProps> = ({
                  <option value="2" key="2">
                    No SLA
                  </option>
-                  {data.map.game_name === 'Portal 2 - Cooperative' ? (
+                  {data.map.game_name === "Portal 2 - Cooperative" ? (
-                    ''
+                    ""
                  ) : (
                    <option value="3" key="3">
                      Inbounds SLA
@@ -457,7 +457,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
              </div>
              <div
                id="modview-route-description"
-                style={{ height: '180px', gridColumn: '1 / span 5' }}
+                style={{ height: "180px", gridColumn: "1 / span 5" }}
              >
                <span>Description:</span>
                <textarea
@@ -472,7 +472,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                />
              </div>
              <button
-                style={{ gridColumn: '2 / span 3', height: '40px' }}
+                style={{ gridColumn: "2 / span 3", height: "40px" }}
                onClick={_create_map_summary_route}
              >
                Apply
diff --git a/frontend/src/components/RankingEntry.tsx b/frontend/src/components/RankingEntry.tsx
index f45ca35..f28eabf 100644
--- a/frontend/src/components/RankingEntry.tsx
+++ b/frontend/src/components/RankingEntry.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { RankingType, SteamRankingType } from '@customTypes/Ranking';
+import { RankingType, SteamRankingType } from "@customTypes/Ranking";
 enum RankingCategories {
  rankings_overall,
@@ -14,7 +14,7 @@ interface RankingEntryProps {
 }
 const RankingEntry: React.FC<RankingEntryProps> = prop => {
-  if ('placement' in prop.curRankingData) {
+  if ("placement" in prop.curRankingData) {
    return (
      <div className="leaderboard-entry">
        <span>{prop.curRankingData.placement}</span>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 8216cff..b55d56b 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback } from 'react';
+import React, { useCallback } from "react";
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from "react-router-dom";
 import {
  BookIcon,
@@ -10,12 +10,12 @@ import {
  PortalIcon,
  SearchIcon,
  UploadIcon,
-} from '@images/Images';
+} from "@images/Images";
-import Login from '@components/Login';
+import Login from "@components/Login";
-import { UserProfile } from '@customTypes/Profile';
+import { UserProfile } from "@customTypes/Profile";
-import { Search } from '@customTypes/Search';
+import { Search } from "@customTypes/Search";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-import '@css/Sidebar.css';
+import "@css/Sidebar.css";
 interface SidebarProps {
  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -41,81 +41,81 @@ const Sidebar: React.FC<SidebarProps> = ({
  const _handle_sidebar_hide = useCallback(() => {
    var btn = document.querySelectorAll(
-      'button.sidebar-button'
+      "button.sidebar-button"
    ) as NodeListOf<HTMLElement>;
    const span = document.querySelectorAll(
-      'button.sidebar-button>span'
+      "button.sidebar-button>span"
    ) as NodeListOf<HTMLElement>;
-    const side = document.querySelector('#sidebar-list') as HTMLElement;
+    const side = document.querySelector("#sidebar-list") as HTMLElement;
-    const searchbar = document.querySelector('#searchbar') as HTMLInputElement;
+    const searchbar = document.querySelector("#searchbar") as HTMLInputElement;
    const uploadRunBtn = document.querySelector(
-      '#upload-run'
+      "#upload-run"
    ) as HTMLInputElement;
    const uploadRunSpan = document.querySelector(
-      '#upload-run>span'
+      "#upload-run>span"
    ) as HTMLInputElement;
    if (isSidebarOpen) {
      if (profile) {
        const login = document.querySelectorAll(
-          '.login>button'
+          ".login>button"
        )[1] as HTMLElement;
-        login.style.opacity = '1';
+        login.style.opacity = "1";
-        uploadRunBtn.style.width = '310px';
+        uploadRunBtn.style.width = "310px";
-        uploadRunBtn.style.padding = '0.4em 0 0 11px';
+        uploadRunBtn.style.padding = "0.4em 0 0 11px";
-        uploadRunSpan.style.opacity = '0';
+        uploadRunSpan.style.opacity = "0";
        setTimeout(() => {
-          uploadRunSpan.style.opacity = '1';
+          uploadRunSpan.style.opacity = "1";
        }, 100);
      }
      setSidebarOpen(false);
-      side.style.width = '320px';
+      side.style.width = "320px";
      btn.forEach((e, i) => {
-        e.style.width = '310px';
+        e.style.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);
      });
-      side.style.zIndex = '2';
+      side.style.zIndex = "2";
    } else {
      if (profile) {
        const login = document.querySelectorAll(
-          '.login>button'
+          ".login>button"
        )[1] as HTMLElement;
-        login.style.opacity = '0';
+        login.style.opacity = "0";
-        uploadRunBtn.style.width = '40px';
+        uploadRunBtn.style.width = "40px";
-        uploadRunBtn.style.padding = '0.4em 0 0 5px';
+        uploadRunBtn.style.padding = "0.4em 0 0 5px";
-        uploadRunSpan.style.opacity = '0';
+        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);
    }
  }, [isSidebarOpen, profile]);
  const handle_sidebar_click = useCallback(
    (clicked_sidebar_idx: number) => {
-      const btn = document.querySelectorAll('button.sidebar-button');
+      const btn = document.querySelectorAll("button.sidebar-button");
      if (isSidebarOpen) {
        setSidebarOpen(false);
        _handle_sidebar_hide();
      }
      // clusterfuck
      btn.forEach((e, i) => {
-        btn[i].classList.remove('sidebar-button-selected');
+        btn[i].classList.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");
    },
    [isSidebarOpen, _handle_sidebar_hide]
  );
@@ -134,20 +134,20 @@ const Sidebar: React.FC<SidebarProps> = ({
  };
  React.useEffect(() => {
-    if (path === '/') {
+    if (path === "/") {
      handle_sidebar_click(1);
-    } else if (path.includes('games')) {
+    } else if (path.includes("games")) {
      handle_sidebar_click(2);
-    } else if (path.includes('rankings')) {
+    } else if (path.includes("rankings")) {
      handle_sidebar_click(3);
    }
    // else if (path.includes("news")) { handle_sidebar_click(4) }
    // else if (path.includes("scorelog")) { handle_sidebar_click(5) }
-    else if (path.includes('profile')) {
+    else if (path.includes("profile")) {
      handle_sidebar_click(4);
-    } else if (path.includes('rules')) {
+    } else if (path.includes("rules")) {
      handle_sidebar_click(5);
-    } else if (path.includes('about')) {
+    } else if (path.includes("about")) {
      handle_sidebar_click(6);
    }
  }, [path, handle_sidebar_click]);
@@ -156,9 +156,9 @@ const Sidebar: React.FC<SidebarProps> = ({
    <div id="sidebar">
      <Link to="/" tabIndex={-1}>
        <div id="logo">
-          {' '}
+          {" "}
          {/* logo */}
-          <img src={LogoIcon} alt="" height={'80px'} />
+          <img src={LogoIcon} alt="" height={"80px"} />
          <div id="logo-text">
            <span>
              <b>PORTAL 2</b>
@@ -169,10 +169,10 @@ const Sidebar: React.FC<SidebarProps> = ({
        </div>
      </Link>
      <div id="sidebar-list">
-        {' '}
+        {" "}
        {/* List */}
        <div id="sidebar-toplist">
-          {' '}
+          {" "}
          {/* Top */}
          <button
            className="sidebar-button"
diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 9f39506..61e52d4 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from "react-markdown";
-import { MapSummary } from '@customTypes/Map';
+import { MapSummary } from "@customTypes/Map";
-import '@css/Maps.css';
+import "@css/Maps.css";
 interface SummaryProps {
  selectedRun: number;
@@ -20,9 +20,9 @@ const Summary: React.FC<SummaryProps> = ({
  const _select_run = React.useCallback(
    (idx: number, category_id: number) => {
-      let r = document.querySelectorAll('button.record');
+      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(
@@ -42,9 +42,9 @@ const Summary: React.FC<SummaryProps> = ({
  }
  const _category_change = React.useCallback(() => {
-    const btn = document.querySelectorAll('#section3 #category span button');
+    const btn = document.querySelectorAll("#section3 #category span button");
    btn.forEach(e => {
-      (e as HTMLElement).style.backgroundColor = '#2b2e46';
+      (e as HTMLElement).style.backgroundColor = "#2b2e46";
    });
    // heavenly father forgive me for i have sinned. TODO: fix this bullshit with dynamic categories
    const idx =
@@ -53,18 +53,18 @@ const Summary: React.FC<SummaryProps> = ({
        : data.map.is_coop
          ? selectedCategory - 3
          : selectedCategory - 1;
-    (btn[idx] as HTMLElement).style.backgroundColor = '#202232';
+    (btn[idx] as HTMLElement).style.backgroundColor = "#202232";
  }, [selectedCategory, data.map.is_coop]);
  const _history_change = React.useCallback(() => {
-    const btn = document.querySelectorAll('#section3 #history span button');
+    const btn = document.querySelectorAll("#section3 #history span button");
    btn.forEach(e => {
-      (e as HTMLElement).style.backgroundColor = '#2b2e46';
+      (e as HTMLElement).style.backgroundColor = "#2b2e46";
    });
    (historySelected
      ? (btn[1] as HTMLElement)
      : (btn[0] as HTMLElement)
-    ).style.backgroundColor = '#202232';
+    ).style.backgroundColor = "#202232";
  }, [historySelected]);
  React.useEffect(() => {
@@ -85,7 +85,7 @@ const Summary: React.FC<SummaryProps> = ({
      <section id="section3" className="summary1">
        <div
          id="category"
-          style={data.map.image === '' ? { backgroundColor: '#202232' } : {}}
+          style={data.map.image === "" ? { backgroundColor: "#202232" } : {}}
        >
          <img src={data.map.image} alt="" id="category-image"></img>
          <p>
@@ -97,7 +97,7 @@ const Summary: React.FC<SummaryProps> = ({
              : ` portals`}
          </p>
          {data.map.is_coop ? ( // TODO: make this part dynamic
-            <span style={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
+            <span style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
              <button onClick={() => setSelectedCategory(1)}>CM</button>
              <button onClick={() => setSelectedCategory(4)}>Any%</button>
              <button onClick={() => setSelectedCategory(5)}>
@@ -105,7 +105,7 @@ const Summary: React.FC<SummaryProps> = ({
              </button>
            </span>
          ) : (
-            <span style={{ gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
+            <span style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr" }}>
              <button onClick={() => setSelectedCategory(1)}>CM</button>
              <button onClick={() => setSelectedCategory(2)}>NoSLA</button>
              <button onClick={() => setSelectedCategory(3)}>
@@ -117,7 +117,7 @@ const Summary: React.FC<SummaryProps> = ({
        </div>
        <div id="history">
-          <div style={{ display: historySelected ? 'none' : 'block' }}>
+          <div style={{ display: historySelected ? "none" : "block" }}>
            {data.summary.routes.filter(e => e.category.id === selectedCategory)
              .length === 0 ? (
              <h5>There are no records for this map.</h5>
@@ -142,8 +142,8 @@ const Summary: React.FC<SummaryProps> = ({
                      >
                        <span>
                          {new Date(r.history.date).toLocaleDateString(
-                            'en-US',
+                            "en-US",
-                            { month: 'long', day: 'numeric', year: 'numeric' }
+                            { month: "long", day: "numeric", year: "numeric" }
                          )}
                        </span>
                        <span>{r.history.score_count}</span>
@@ -155,7 +155,7 @@ const Summary: React.FC<SummaryProps> = ({
            )}
          </div>
-          <div style={{ display: historySelected ? 'block' : 'none' }}>
+          <div style={{ display: historySelected ? "block" : "none" }}>
            {data.summary.routes.filter(e => e.category.id === selectedCategory)
              .length === 0 ? (
              <h5>There are no records for this map.</h5>
@@ -178,25 +178,25 @@ const Summary: React.FC<SummaryProps> = ({
          <span>Difficulty</span>
          {data.summary.routes[selectedRun].rating === 0 && <span>N/A</span>}
          {data.summary.routes[selectedRun].rating === 1 && (
-            <span style={{ color: 'lime' }}>Very easy</span>
+            <span style={{ color: "lime" }}>Very easy</span>
          )}
          {data.summary.routes[selectedRun].rating === 2 && (
-            <span style={{ color: 'green' }}>Easy</span>
+            <span style={{ color: "green" }}>Easy</span>
          )}
          {data.summary.routes[selectedRun].rating === 3 && (
-            <span style={{ color: 'yellow' }}>Medium</span>
+            <span style={{ color: "yellow" }}>Medium</span>
          )}
          {data.summary.routes[selectedRun].rating === 4 && (
-            <span style={{ color: 'orange' }}>Hard</span>
+            <span style={{ color: "orange" }}>Hard</span>
          )}
          {data.summary.routes[selectedRun].rating === 5 && (
-            <span style={{ color: 'red' }}>Very hard</span>
+            <span style={{ color: "red" }}>Very hard</span>
          )}
          <div>
            {data.summary.routes[selectedRun].rating === 1 ? (
              <div
                className="difficulty-rating"
-                style={{ backgroundColor: 'lime' }}
+                style={{ backgroundColor: "lime" }}
              ></div>
            ) : (
              <div className="difficulty-rating"></div>
@@ -204,7 +204,7 @@ const Summary: React.FC<SummaryProps> = ({
            {data.summary.routes[selectedRun].rating === 2 ? (
              <div
                className="difficulty-rating"
-                style={{ backgroundColor: 'green' }}
+                style={{ backgroundColor: "green" }}
              ></div>
            ) : (
              <div className="difficulty-rating"></div>
@@ -212,7 +212,7 @@ const Summary: React.FC<SummaryProps> = ({
            {data.summary.routes[selectedRun].rating === 3 ? (
              <div
                className="difficulty-rating"
-                style={{ backgroundColor: 'yellow' }}
+                style={{ backgroundColor: "yellow" }}
              ></div>
            ) : (
              <div className="difficulty-rating"></div>
@@ -220,7 +220,7 @@ const Summary: React.FC<SummaryProps> = ({
            {data.summary.routes[selectedRun].rating === 4 ? (
              <div
                className="difficulty-rating"
-                style={{ backgroundColor: 'orange' }}
+                style={{ backgroundColor: "orange" }}
              ></div>
            ) : (
              <div className="difficulty-rating"></div>
@@ -228,7 +228,7 @@ const Summary: React.FC<SummaryProps> = ({
            {data.summary.routes[selectedRun].rating === 5 ? (
              <div
                className="difficulty-rating"
-                style={{ backgroundColor: 'red' }}
+                style={{ backgroundColor: "red" }}
              ></div>
            ) : (
              <div className="difficulty-rating"></div>
@@ -243,18 +243,18 @@ const Summary: React.FC<SummaryProps> = ({
      <section id="section5" className="summary1">
        <div id="description">
-          {data.summary.routes[selectedRun].showcase !== '' ? (
+          {data.summary.routes[selectedRun].showcase !== "" ? (
            <iframe
              title="Showcase video"
              src={
-                'https://www.youtube.com/embed/' +
+                "https://www.youtube.com/embed/" +
                _get_youtube_id(data.summary.routes[selectedRun].showcase)
              }
            >
-              {' '}
+              {" "}
            </iframe>
          ) : (
-            ''
+            ""
          )}
          <h3>Route Description</h3>
          <span id="description-text">
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index 5bad80f..d5eabcd 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import React from "react";
-import { UploadRunContent } from '@customTypes/Content';
+import { UploadRunContent } from "@customTypes/Content";
-import { ScoreboardTempUpdate, SourceDemoParser, NetMessages } from '@nekz/sdp';
+import { ScoreboardTempUpdate, SourceDemoParser, NetMessages } from "@nekz/sdp";
-import '@css/UploadRunDialog.css';
+import "@css/UploadRunDialog.css";
-import { Game } from '@customTypes/Game';
+import { Game } from "@customTypes/Game";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import useMessage from '@hooks/UseMessage';
+import useMessage from "@hooks/UseMessage";
-import useConfirm from '@hooks/UseConfirm';
+import useConfirm from "@hooks/UseConfirm";
-import useMessageLoad from '@hooks/UseMessageLoad';
+import useMessageLoad from "@hooks/UseMessageLoad";
-import { MapNames } from '@customTypes/MapNames';
+import { MapNames } from "@customTypes/MapNames";
 interface UploadRunDialogProps {
  token?: string;
@@ -38,7 +38,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
    });
  const [selectedGameID, setSelectedGameID] = React.useState<number>(0);
-  const [selectedGameName, setSelectedGameName] = React.useState<string>('');
+  const [selectedGameName, setSelectedGameName] = React.useState<string>("");
  // dropdowns
  const [dropdown1Vis, setDropdown1Vis] = React.useState<boolean>(false);
@@ -102,7 +102,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
      setDropdown1Vis(!dropdown1Vis);
    } else if (dropdown === 2) {
      setDropdown2Vis(!dropdown2Vis);
-      document.querySelector('#dropdown2')?.scrollTo(0, 0);
+      document.querySelector("#dropdown2")?.scrollTo(0, 0);
    }
  };
@@ -133,15 +133,15 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
    if (token) {
      if (games[selectedGameID].is_coop) {
        if (uploadRunContent.host_demo === null) {
-          await message('Error', 'You must select a host demo to upload.');
+          await message("Error", "You must select a host demo to upload.");
          return;
        } else if (uploadRunContent.partner_demo === null) {
-          await message('Error', 'You must select a partner demo to upload.');
+          await message("Error", "You must select a partner demo to upload.");
          return;
        }
      } else {
        if (uploadRunContent.host_demo === null) {
-          await message('Error', 'You must select a demo to upload.');
+          await message("Error", "You must select a demo to upload.");
          return;
        }
      }
@@ -157,7 +157,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
      if (!scoreboard) {
        await message(
-          'Error',
+          "Error",
          "Error while processing demo: Unable to get scoreboard result. Either there is a demo that is corrupt or haven't been recorded in challenge mode."
        );
        return;
@@ -165,22 +165,22 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
      if (!demo.mapName || !MapNames[demo.mapName]) {
        await message(
-          'Error',
+          "Error",
-          'Error while processing demo: Invalid map name.'
+          "Error while processing demo: Invalid map name."
        );
        return;
      }
      if (selectedGameID === 0 && MapNames[demo.mapName] > 60) {
        await message(
-          'Error',
+          "Error",
-          'Error while processing demo: Invalid cooperative demo in singleplayer submission.'
+          "Error while processing demo: Invalid cooperative demo in singleplayer submission."
        );
        return;
      } else if (selectedGameID === 1 && MapNames[demo.mapName] <= 60) {
        await message(
-          'Error',
+          "Error",
-          'Error while processing demo: Invalid singleplayer demo in cooperative submission.'
+          "Error while processing demo: Invalid singleplayer demo in cooperative submission."
        );
        return;
      }
@@ -189,7 +189,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
        scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {};
      const userConfirmed = await confirm(
-        'Upload Record',
+        "Upload Record",
        `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?`
      );
@@ -197,21 +197,21 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
        return;
      }
-      messageLoad('Uploading...');
+      messageLoad("Uploading...");
      const [success, response] = await API.post_record(
        token,
        uploadRunContent,
        MapNames[demo.mapName]
      );
      messageLoadClose();
-      await message('Upload Record', response);
+      await message("Upload Record", response);
      if (success) {
        setUploadRunContent({
          host_demo: null,
          partner_demo: null,
        });
        onClose(success);
-        navigate('/profile');
+        navigate("/profile");
      }
    }
  };
@@ -220,7 +220,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
    if (open) {
      setDragHighlightPartner(false);
      setDragHighlight(false);
-      _handle_game_select('1', 'Portal 2 - Singleplayer'); // a different approach?.
+      _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?.
    }
  }, [open]);
@@ -236,35 +236,35 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
          <div id="upload-run-menu-add">
            <div id="upload-run-route-category">
              <div
-                style={{ padding: '15px 0px' }}
+                style={{ padding: "15px 0px" }}
                className="upload-run-dropdown-container upload-run-item"
              >
-                <h3 style={{ margin: '0px 0px' }}>Select Game</h3>
+                <h3 style={{ margin: "0px 0px" }}>Select Game</h3>
                <div
                  onClick={() => _handle_dropdowns(1)}
                  style={{
-                    display: 'flex',
+                    display: "flex",
-                    alignItems: 'center',
+                    alignItems: "center",
-                    cursor: 'pointer',
+                    cursor: "pointer",
-                    justifyContent: 'space-between',
+                    justifyContent: "space-between",
-                    margin: '10px 0px',
+                    margin: "10px 0px",
                  }}
                >
                  <div className="dropdown-cur">{selectedGameName}</div>
                  <i
                    style={{
-                      rotate: '-90deg',
+                      rotate: "-90deg",
-                      transform: 'translate(-5px, 10px)',
+                      transform: "translate(-5px, 10px)",
                    }}
                    className="triangle"
                  ></i>
                </div>
                <div
-                  style={{ top: '110px' }}
+                  style={{ top: "110px" }}
                  className={
                    dropdown1Vis
-                      ? 'upload-run-dropdown'
+                      ? "upload-run-dropdown"
-                      : 'upload-run-dropdown hidden'
+                      : "upload-run-dropdown hidden"
                  }
                >
                  {games.map(game => (
@@ -284,7 +284,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
              {!loading && (
                <>
                  <div>
-                    <h3 style={{ margin: '10px 0px' }}>Host Demo</h3>
+                    <h3 style={{ margin: "10px 0px" }}>Host Demo</h3>
                    <div
                      onClick={() => {
                        _handle_file_click(true);
@@ -298,7 +298,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                      onDragLeave={e => {
                        _handle_drag_leave(e, true);
                      }}
-                      className={`upload-run-drag-area ${dragHightlight ? 'upload-run-drag-area-highlight' : ''} ${uploadRunContent.host_demo ? 'upload-run-drag-area-hidden' : ''}`}
+                      className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}
                    >
                      <input
                        ref={fileInputRef}
@@ -316,7 +316,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                          <div>
                            <span
                              style={{
-                                fontFamily: 'BarlowSemiCondensed-Regular',
+                                fontFamily: "BarlowSemiCondensed-Regular",
                              }}
                            >
                              Or click here
@@ -324,9 +324,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                            <br />
                            <button
                              style={{
-                                borderRadius: '24px',
+                                borderRadius: "24px",
-                                padding: '5px 8px',
+                                padding: "5px 8px",
-                                margin: '5px 0px',
+                                margin: "5px 0px",
                              }}
                            >
                              Upload
@@ -342,7 +342,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                    {games[selectedGameID].is_coop && (
                      <>
                        <div>
-                          <h3 style={{ margin: '10px 0px' }}>Partner Demo</h3>
+                          <h3 style={{ margin: "10px 0px" }}>Partner Demo</h3>
                          <div
                            onClick={() => {
                              _handle_file_click(false);
@@ -356,7 +356,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                            onDragLeave={e => {
                              _handle_drag_leave(e, false);
                            }}
-                            className={`upload-run-drag-area ${dragHightlightPartner ? 'upload-run-drag-area-highlight-partner' : ''} ${uploadRunContent.partner_demo ? 'upload-run-drag-area-hidden' : ''}`}
+                            className={`upload-run-drag-area ${dragHightlightPartner ? "upload-run-drag-area-highlight-partner" : ""} ${uploadRunContent.partner_demo ? "upload-run-drag-area-hidden" : ""}`}
                          >
                            <input
                              ref={fileInputRefPartner}
@@ -367,14 +367,14 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                              onChange={e =>
                                _handle_file_change(e.target.files, false)
                              }
-                            />{' '}
+                            />{" "}
                            {!uploadRunContent.partner_demo ? (
                              <div>
                                <span>Drag and drop</span>
                                <div>
                                  <span
                                    style={{
-                                      fontFamily: 'BarlowSemiCondensed-Regular',
+                                      fontFamily: "BarlowSemiCondensed-Regular",
                                    }}
                                  >
                                    Or click here
@@ -382,9 +382,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
                                  <br />
                                  <button
                                    style={{
-                                      borderRadius: '24px',
+                                      borderRadius: "24px",
-                                      padding: '5px 8px',
+                                      padding: "5px 8px",
-                                      margin: '5px 0px',
+                                      margin: "5px 0px",
                                    }}
                                  >
                                    Upload
diff --git a/frontend/src/hooks/UseConfirm.tsx b/frontend/src/hooks/UseConfirm.tsx
index 7b4bffa..4692d53 100644
--- a/frontend/src/hooks/UseConfirm.tsx
+++ b/frontend/src/hooks/UseConfirm.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import ConfirmDialog from '@components/ConfirmDialog';
+import ConfirmDialog from "@components/ConfirmDialog";
 const useConfirm = () => {
  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);
diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx
index e0afa59..b639fac 100644
--- a/frontend/src/hooks/UseMessage.tsx
+++ b/frontend/src/hooks/UseMessage.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import MessageDialog from '@components/MessageDialog';
+import MessageDialog from "@components/MessageDialog";
 const useMessage = () => {
  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
  );
diff --git a/frontend/src/hooks/UseMessageLoad.tsx b/frontend/src/hooks/UseMessageLoad.tsx
index ea0b5d8..4cbd0f7 100644
--- a/frontend/src/hooks/UseMessageLoad.tsx
+++ b/frontend/src/hooks/UseMessageLoad.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import MessageDialogLoad from '@components/MessageDialogLoad';
+import MessageDialogLoad from "@components/MessageDialogLoad";
 const useMessageLoad = () => {
  const [isOpen, setIsOpen] = useState(false);
-  const [title, setTitle] = useState<string>('');
+  const [title, setTitle] = useState<string>("");
  const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(
    null
  );
diff --git a/frontend/src/images/Images.tsx b/frontend/src/images/Images.tsx
index 9972662..eb12588 100644
--- a/frontend/src/images/Images.tsx
+++ b/frontend/src/images/Images.tsx
@@ -1,26 +1,26 @@
-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 img1 from "./png/1.png";
-import img2 from './png/2.png';
+import img2 from "./png/2.png";
-import img3 from './png/3.png';
+import img3 from "./png/3.png";
-import img4 from './png/4.png';
+import img4 from "./png/4.png";
-import img5 from './png/5.png';
+import img5 from "./png/5.png";
-import img6 from './png/6.png';
+import img6 from "./png/6.png";
-import img7 from './png/7.png';
+import img7 from "./png/7.png";
-import img8 from './png/8.png';
+import img8 from "./png/8.png";
-import img9 from './png/9.png';
+import img9 from "./png/9.png";
-import img10 from './png/10.png';
+import img10 from "./png/10.png";
-import img11 from './png/11.png';
+import img11 from "./png/11.png";
-import img12 from './png/12.png';
+import img12 from "./png/12.png";
-import img13 from './png/13.png';
+import img13 from "./png/13.png";
-import img14 from './png/14.png';
+import img14 from "./png/14.png";
-import img15 from './png/15.png';
+import img15 from "./png/15.png";
-import img16 from './png/16.png';
+import img16 from "./png/16.png";
-import img17 from './png/17.png';
+import img17 from "./png/17.png";
-import img18 from './png/18.png';
+import img18 from "./png/18.png";
-import img19 from './png/19.png';
+import img19 from "./png/19.png";
-import img20 from './png/20.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;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 2eef1bc..13d180c 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from "react-router-dom";
-import App from './App';
+import App from "./App";
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index a5d34f6..5a69bfe 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -1,25 +1,25 @@
-import React from 'react';
+import React from "react";
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from "react-markdown";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
-import '@css/About.css';
+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'
+          "https://raw.githubusercontent.com/pektezol/lphub/main/README.md"
        );
        if (!response.ok) {
-          throw new Error('Failed to fetch README');
+          throw new Error("Failed to fetch README");
        }
        const readmeText = await response.text();
        setAboutText(readmeText);
      } catch (error) {
-        console.error('Error fetching README:', error);
+        console.error("Error fetching README:", error);
      }
    };
    fetchReadme();
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index ae0a2d6..d7dacde 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
-import GameEntry from '@components/GameEntry';
+import GameEntry from "@components/GameEntry";
-import { Game } from '@customTypes/Game';
+import { Game } from "@customTypes/Game";
-import '@css/Maps.css';
+import "@css/Maps.css";
 interface GamesProps {
  games: Game[];
@@ -11,17 +11,17 @@ interface GamesProps {
 const Games: React.FC<GamesProps> = ({ games }) => {
  const _page_load = () => {
-    const loaders = document.querySelectorAll('.loader');
+    const loaders = document.querySelectorAll(".loader");
    loaders.forEach(loader => {
-      (loader as HTMLElement).style.display = 'none';
+      (loader as HTMLElement).style.display = "none";
    });
  };
  React.useEffect(() => {
    document
-      .querySelectorAll('.games-page-item-body')
+      .querySelectorAll(".games-page-item-body")
      .forEach((game, index) => {
-        game.innerHTML = '';
+        game.innerHTML = "";
      });
    _page_load();
  }, []);
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 859af52..f0c5821 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
 const Homepage: React.FC = () => {
  return (
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 372b800..a7242ef 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);
@@ -18,7 +18,7 @@ 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 location = useLocation();
@@ -26,7 +26,7 @@ const Maplist: React.FC = () => {
  function _update_currently_selected(catNum2: number) {
    setCurrentlySelected(catNum2);
-    navigate('/games/' + game?.id + '?cat=' + catNum2);
+    navigate("/games/" + game?.id + "?cat=" + catNum2);
    setHasClicked(true);
  }
@@ -36,23 +36,23 @@ const Maplist: React.FC = () => {
  };
  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;
      }
@@ -82,7 +82,7 @@ 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, location.search]);
@@ -92,9 +92,9 @@ const Maplist: React.FC = () => {
      <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>
@@ -127,8 +127,8 @@ const Maplist: React.FC = () => {
                    className={
                      currentlySelected === cat.category.id ||
                      (cat.category.id - 1 === catNum && !hasClicked)
-                        ? 'game-cat-button selected'
+                        ? "game-cat-button selected"
-                        : 'game-cat-button'
+                        : "game-cat-button"
                    }
                    onClick={() => {
                      setCatNum(cat.category.id - 1);
@@ -147,17 +147,17 @@ const Maplist: React.FC = () => {
              <div>
                <span
                  style={{
-                    fontSize: '18px',
+                    fontSize: "18px",
-                    transform: 'translateY(5px)',
+                    transform: "translateY(5px)",
-                    display: 'block',
+                    display: "block",
-                    marginTop: '10px',
+                    marginTop: "10px",
                  }}
                >
-                  {curChapter?.chapter.name.split(' - ')[0]}
+                  {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
@@ -205,16 +205,16 @@ const Maplist: React.FC = () => {
                        <div
                          className={
                            map.difficulty === 0
-                              ? 'one'
+                              ? "one"
                              : map.difficulty === 1
-                                ? 'two'
+                                ? "two"
                                : map.difficulty === 2
-                                  ? 'three'
+                                  ? "three"
                                  : map.difficulty === 3
-                                    ? 'four'
+                                    ? "four"
                                    : map.difficulty === 4
-                                      ? 'five'
+                                      ? "five"
-                                      : 'one'
+                                      : "one"
                          }
                        >
                          <div className="difficulty-point"></div>
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index 33bd05b..fbdb8f3 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import React from "react";
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from "react-router-dom";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
-import { PortalIcon, FlagIcon, ChatIcon } from '@images/Images';
+import { PortalIcon, FlagIcon, ChatIcon } from "@images/Images";
-import Summary from '@components/Summary';
+import Summary from "@components/Summary";
-import Leaderboards from '@components/Leaderboards';
+import Leaderboards from "@components/Leaderboards";
-import Discussions from '@components/Discussions';
+import Discussions from "@components/Discussions";
-import ModMenu from '@components/ModMenu';
+import ModMenu from "@components/ModMenu";
-import { MapDiscussions, MapLeaderboard, MapSummary } from '@customTypes/Map';
+import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-import '@css/Maps.css';
+import "@css/Maps.css";
 interface MapProps {
  token?: string;
@@ -33,7 +33,7 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
  const location = useLocation();
-  const mapID = location.pathname.split('/')[2];
+  const mapID = location.pathname.split("/")[2];
  const _fetch_map_summary = React.useCallback(async () => {
    const mapSummary = await API.get_map_summary(mapID);
@@ -41,7 +41,7 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
  }, [mapID]);
  const _fetch_map_leaderboards = React.useCallback(async () => {
-    const mapLeaderboards = await API.get_map_leaderboard(mapID, '1');
+    const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
    setMapLeaderboardData(mapLeaderboards);
  }, [mapID]);
@@ -71,7 +71,7 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
              <Link to="/games">
                <button
                  className="nav-button"
-                  style={{ borderRadius: '20px 20px 20px 20px' }}
+                  style={{ borderRadius: "20px 20px 20px 20px" }}
                >
                  <i className="triangle"></i>
                  <span>Games List</span>
@@ -125,18 +125,18 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
            <Link to="/games">
              <button
                className="nav-button"
-                style={{ borderRadius: '20px 0px 0px 20px' }}
+                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]}`}
+              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' }}
+                style={{ borderRadius: "0px 20px 20px 0px", marginLeft: "2px" }}
              >
                <i className="triangle"></i>
                <span>{mapSummaryData.map.chapter_name}</span>
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 8acf746..e2d6000 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from "react-router-dom";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
 import {
  SteamIcon,
@@ -14,16 +14,16 @@ import {
  DownloadIcon,
  HistoryIcon,
  DeleteIcon,
-} from '@images/Images';
+} from "@images/Images";
-import { UserProfile } from '@customTypes/Profile';
+import { UserProfile } from "@customTypes/Profile";
-import { Game, GameChapters } from '@customTypes/Game';
+import { Game, GameChapters } from "@customTypes/Game";
-import { Map } from '@customTypes/Map';
+import { Map } from "@customTypes/Map";
-import { ticks_to_time } from '@utils/Time';
+import { ticks_to_time } from "@utils/Time";
-import '@css/Profile.css';
+import "@css/Profile.css";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-import useConfirm from '@hooks/UseConfirm';
+import useConfirm from "@hooks/UseConfirm";
-import useMessage from '@hooks/UseMessage';
+import useMessage from "@hooks/UseMessage";
-import useMessageLoad from '@hooks/UseMessageLoad';
+import useMessageLoad from "@hooks/UseMessageLoad";
 interface ProfileProps {
  profile?: UserProfile;
@@ -46,8 +46,8 @@ const Profile: React.FC<ProfileProps> = ({
  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
  );
@@ -62,17 +62,17 @@ const Profile: React.FC<ProfileProps> = ({
  };
  const _get_game_chapters = React.useCallback(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);
    }
  }, [game, profile]);
  const _get_game_maps = React.useCallback(async () => {
-    if (chapter === '0') {
+    if (chapter === "0") {
      const gameMaps = await API.get_game_maps(game);
      setMaps(gameMaps);
      setPageMax(Math.ceil(gameMaps.length / 20));
@@ -87,29 +87,29 @@ const Profile: React.FC<ProfileProps> = ({
  const _delete_submission = async (map_id: number, record_id: number) => {
    const userConfirmed = await confirm(
-      'Delete Record',
+      "Delete Record",
-      'Are you sure you want to delete this 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, navigate]);
@@ -120,7 +120,7 @@ const Profile: React.FC<ProfileProps> = ({
  }, [profile, game, _get_game_chapters]);
  React.useEffect(() => {
-    if (profile && game !== '0') {
+    if (profile && game !== "0") {
      _get_game_maps();
    }
  }, [profile, game, chapter, chapterData, _get_game_maps]);
@@ -156,8 +156,8 @@ const Profile: React.FC<ProfileProps> = ({
            <div>
              <div>{profile.user_name}</div>
              <div>
-                {profile.country_code === 'XX' ? (
+                {profile.country_code === "XX" ? (
-                  ''
+                  ""
                ) : (
                  <img
                    src={`https://flagcdn.com/w80/${profile.country_code.toLowerCase()}.jpg`}
@@ -177,32 +177,32 @@ const Profile: React.FC<ProfileProps> = ({
              </div>
            </div>
            <div>
-              {profile.links.steam === '-' ? (
+              {profile.links.steam === "-" ? (
-                ''
+                ""
              ) : (
                <a href={profile.links.steam}>
                  <img src={SteamIcon} alt="Steam" />
                </a>
              )}
-              {profile.links.twitch === '-' ? (
+              {profile.links.twitch === "-" ? (
-                ''
+                ""
              ) : (
                <a href={profile.links.twitch}>
                  <img src={TwitchIcon} alt="Twitch" />
                </a>
              )}
-              {profile.links.youtube === '-' ? (
+              {profile.links.youtube === "-" ? (
-                ''
+                ""
              ) : (
                <a href={profile.links.youtube}>
                  <img src={YouTubeIcon} alt="Youtube" />
                </a>
              )}
-              {profile.links.p2sr === '-' ? (
+              {profile.links.p2sr === "-" ? (
-                ''
+                ""
              ) : (
                <a href={profile.links.p2sr}>
-                  <img src={PortalIcon} alt="P2SR" style={{ padding: '0' }} />
+                  <img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} />
                </a>
              )}
            </div>
@@ -212,8 +212,8 @@ const Profile: React.FC<ProfileProps> = ({
              <span>Overall</span>
              <span>
                {profile.rankings.overall.rank === 0
-                  ? 'N/A '
+                  ? "N/A "
-                  : '#' + profile.rankings.overall.rank + ' '}
+                  : "#" + profile.rankings.overall.rank + " "}
                <span>
                  ({profile.rankings.overall.completion_count}/
                  {profile.rankings.overall.completion_total})
@@ -224,8 +224,8 @@ const Profile: React.FC<ProfileProps> = ({
              <span>Singleplayer</span>
              <span>
                {profile.rankings.singleplayer.rank === 0
-                  ? 'N/A '
+                  ? "N/A "
-                  : '#' + profile.rankings.singleplayer.rank + ' '}
+                  : "#" + profile.rankings.singleplayer.rank + " "}
                <span>
                  ({profile.rankings.singleplayer.completion_count}/
                  {profile.rankings.singleplayer.completion_total})
@@ -236,8 +236,8 @@ const Profile: React.FC<ProfileProps> = ({
              <span>Cooperative</span>
              <span>
                {profile.rankings.cooperative.rank === 0
-                  ? 'N/A '
+                  ? "N/A "
-                  : '#' + profile.rankings.cooperative.rank + ' '}
+                  : "#" + profile.rankings.cooperative.rank + " "}
                <span>
                  ({profile.rankings.cooperative.completion_count}/
                  {profile.rankings.cooperative.completion_total})
@@ -267,15 +267,15 @@ const Profile: React.FC<ProfileProps> = ({
                id="select-game"
                onChange={() => {
                  setGame(
-                    (document.querySelector('#select-game') as HTMLInputElement)
+                    (document.querySelector("#select-game") as HTMLInputElement)
                      .value
                  );
-                  setChapter('0');
+                  setChapter("0");
                  const chapterSelect = document.querySelector(
-                    '#select-chapter'
+                    "#select-chapter"
                  ) as HTMLSelectElement;
                  if (chapterSelect) {
-                    chapterSelect.value = '0';
+                    chapterSelect.value = "0";
                  }
                }}
              >
@@ -290,7 +290,7 @@ const Profile: React.FC<ProfileProps> = ({
              </select>
            )}
-            {game === '0' ? (
+            {game === "0" ? (
              <select disabled>
                <option>All Chapters</option>
              </select>
@@ -303,7 +303,7 @@ const Profile: React.FC<ProfileProps> = ({
                  setChapter(
                    (
                      document.querySelector(
-                        '#select-chapter'
+                        "#select-chapter"
                      ) as HTMLInputElement
                    ).value
                  )
@@ -327,15 +327,15 @@ const Profile: React.FC<ProfileProps> = ({
              <span>Map Name</span>
              <img src={SortIcon} alt="" />
            </span>
-            <span style={{ justifyContent: 'center' }}>
+            <span style={{ justifyContent: "center" }}>
              <span>Portals</span>
              <img src={SortIcon} alt="" />
            </span>
-            <span style={{ justifyContent: 'center' }}>
+            <span style={{ justifyContent: "center" }}>
              <span>WRΔ </span>
              <img src={SortIcon} alt="" />
            </span>
-            <span style={{ justifyContent: 'center' }}>
+            <span style={{ justifyContent: "center" }}>
              <span>Time</span>
              <img src={SortIcon} alt="" />
            </span>
@@ -355,18 +355,18 @@ const Profile: React.FC<ProfileProps> = ({
                    if (pageNumber !== 1) {
                      setPageNumber(prevPageNumber => prevPageNumber - 1);
                      const records = document.querySelectorAll(
-                        '.profileboard-record'
+                        ".profileboard-record"
                      );
                      records.forEach(r => {
-                        (r as HTMLInputElement).style.height = '44px';
+                        (r as HTMLInputElement).style.height = "44px";
                      });
                    }
                  }}
                >
                  <i
                    className="triangle"
-                    style={{ position: 'relative', left: '-5px' }}
+                    style={{ position: "relative", left: "-5px" }}
-                  ></i>{' '}
+                  ></i>{" "}
                </button>
                <span>
                  {pageNumber}/{pageMax}
@@ -376,10 +376,10 @@ const Profile: React.FC<ProfileProps> = ({
                    if (pageNumber !== pageMax) {
                      setPageNumber(prevPageNumber => prevPageNumber + 1);
                      const records = document.querySelectorAll(
-                        '.profileboard-record'
+                        ".profileboard-record"
                      );
                      records.forEach(r => {
-                        (r as HTMLInputElement).style.height = '44px';
+                        (r as HTMLInputElement).style.height = "44px";
                      });
                    }
                  }}
@@ -387,18 +387,18 @@ const Profile: React.FC<ProfileProps> = ({
                  <i
                    className="triangle"
                    style={{
-                      position: 'relative',
+                      position: "relative",
-                      left: '5px',
+                      left: "5px",
-                      transform: 'rotate(180deg)',
+                      transform: "rotate(180deg)",
                    }}
-                  ></i>{' '}
+                  ></i>{" "}
                </button>
              </div>
            </div>
          </div>
          <hr />
          <div id="profileboard-records">
-            {game === '0' ? (
+            {game === "0" ? (
              profile.records
                .sort((a, b) => a.map_id - b.map_id)
                .map((r, index) =>
@@ -407,25 +407,25 @@ const Profile: React.FC<ProfileProps> = ({
                      {r.scores.map((e, i) => (
                        <>
                          {i !== 0 ? (
-                            <hr style={{ gridColumn: '1 / span 8' }} />
+                            <hr style={{ gridColumn: "1 / span 8" }} />
                          ) : (
-                            ''
+                            ""
                          )}
                          <Link to={`/maps/${r.map_id}`}>
                            <span>{r.map_name}</span>
                          </Link>
-                          <span style={{ display: 'grid' }}>
+                          <span style={{ display: "grid" }}>
                            {e.score_count}
                          </span>
-                          <span style={{ display: 'grid' }}>
+                          <span style={{ display: "grid" }}>
                            {e.score_count - r.map_wr_count > 0
                              ? `+${e.score_count - r.map_wr_count}`
                              : `-`}
                          </span>
-                          <span style={{ display: 'grid' }}>
+                          <span style={{ display: "grid" }}>
                            {ticks_to_time(e.score_time)}
                          </span>
                          <span> </span>
@@ -434,13 +434,13 @@ const Profile: React.FC<ProfileProps> = ({
                          ) : (
                            <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
-                              style={{ marginRight: '10px' }}
+                              style={{ marginRight: "10px" }}
                              onClick={() => {
                                message(
-                                  'Demo Information',
+                                  "Demo Information",
                                  `Demo ID: ${e.demo_id}`
                                );
                              }}
@@ -466,38 +466,38 @@ const Profile: React.FC<ProfileProps> = ({
                                onClick={() => {
                                  (
                                    document.querySelectorAll(
-                                      '.profileboard-record'
+                                      ".profileboard-record"
                                    )[index % 20] as HTMLInputElement
-                                  ).style.height === '44px' ||
+                                  ).style.height === "44px" ||
                                  (
                                    document.querySelectorAll(
-                                      '.profileboard-record'
+                                      ".profileboard-record"
                                    )[index % 20] as HTMLInputElement
-                                  ).style.height === ''
+                                  ).style.height === ""
                                    ? ((
                                        document.querySelectorAll(
-                                          '.profileboard-record'
+                                          ".profileboard-record"
                                        )[index % 20] as HTMLInputElement
                                      ).style.height =
                                        `${r.scores.length * 46}px`)
                                    : ((
                                        document.querySelectorAll(
-                                          '.profileboard-record'
+                                          ".profileboard-record"
                                        )[index % 20] as HTMLInputElement
-                                      ).style.height = '44px');
+                                      ).style.height = "44px");
                                }}
                              >
                                <img src={HistoryIcon} alt="history" />
                              </button>
                            ) : (
-                              ''
+                              ""
                            )}
                          </span>
                        </>
                      ))}
                    </button>
                  ) : (
-                    ''
+                    ""
                  )
                )
            ) : maps ? (
@@ -511,42 +511,42 @@ const Profile: React.FC<ProfileProps> = ({
                      <button
                        className="profileboard-record"
                        key={index}
-                        style={{ backgroundColor: '#1b1b20' }}
+                        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 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>
+                        <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' }} />
+                              <hr style={{ gridColumn: "1 / span 8" }} />
                            ) : (
-                              ''
+                              ""
                            )}
                            <Link to={`/maps/${r.id}`}>
                              <span>{r.name}</span>
                            </Link>
-                            <span style={{ display: 'grid' }}>
+                            <span style={{ display: "grid" }}>
                              {record!.scores[i].score_count}
                            </span>
-                            <span style={{ display: 'grid' }}>
+                            <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' }}>
+                            <span style={{ display: "grid" }}>
                              {ticks_to_time(record!.scores[i].score_time)}
                            </span>
                            <span> </span>
@@ -555,12 +555,12 @@ const Profile: React.FC<ProfileProps> = ({
                            ) : (
                              <span> </span>
                            )}
-                            <span>{record!.scores[i].date.split('T')[0]}</span>
+                            <span>{record!.scores[i].date.split("T")[0]}</span>
-                            <span style={{ flexDirection: 'row-reverse' }}>
+                            <span style={{ flexDirection: "row-reverse" }}>
                              <button
                                onClick={() => {
                                  message(
-                                    'Demo Information',
+                                    "Demo Information",
                                    `Demo ID: ${e.demo_id}`
                                  );
                                }}
@@ -586,31 +586,31 @@ const Profile: React.FC<ProfileProps> = ({
                                  onClick={() => {
                                    (
                                      document.querySelectorAll(
-                                        '.profileboard-record'
+                                        ".profileboard-record"
                                      )[index % 20] as HTMLInputElement
-                                    ).style.height === '44px' ||
+                                    ).style.height === "44px" ||
                                    (
                                      document.querySelectorAll(
-                                        '.profileboard-record'
+                                        ".profileboard-record"
                                      )[index % 20] as HTMLInputElement
-                                    ).style.height === ''
+                                    ).style.height === ""
                                      ? ((
                                          document.querySelectorAll(
-                                            '.profileboard-record'
+                                            ".profileboard-record"
                                          )[index % 20] as HTMLInputElement
                                        ).style.height =
                                          `${record!.scores.length * 46}px`)
                                      : ((
                                          document.querySelectorAll(
-                                            '.profileboard-record'
+                                            ".profileboard-record"
                                          )[index % 20] as HTMLInputElement
-                                        ).style.height = '44px');
+                                        ).style.height = "44px");
                                  }}
                                >
                                  <img src={HistoryIcon} alt="history" />
                                </button>
                              ) : (
-                                ''
+                                ""
                              )}
                            </span>
                          </>
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index ab82931..275f9d0 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -1,16 +1,16 @@
-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';
+} from "@customTypes/Ranking";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-import '@css/Rankings.css';
+import "@css/Rankings.css";
 const Rankings: React.FC = () => {
  const [leaderboardData, setLeaderboardData] = React.useState<
@@ -122,7 +122,7 @@ const Rankings: React.FC = () => {
              _fetch_rankings();
              setCurrentRankingType(LeaderboardTypes.official);
            }}
-            className={`nav-1-btn ${currentRankingType === LeaderboardTypes.official ? 'selected' : ''}`}
+            className={`nav-1-btn ${currentRankingType === LeaderboardTypes.official ? "selected" : ""}`}
          >
            <span>Official (LPHUB)</span>
          </button>
@@ -131,7 +131,7 @@ const Rankings: React.FC = () => {
              __dev_fetch_unofficial_rankings();
              setCurrentRankingType(LeaderboardTypes.unofficial);
            }}
-            className={`nav-1-btn ${currentRankingType === LeaderboardTypes.unofficial ? 'selected' : ''}`}
+            className={`nav-1-btn ${currentRankingType === LeaderboardTypes.unofficial ? "selected" : ""}`}
          >
            <span>Unofficial (Steam)</span>
          </button>
@@ -143,7 +143,7 @@ const Rankings: React.FC = () => {
            onClick={() =>
              _set_current_leaderboard(RankingCategories.rankings_singleplayer)
            }
-            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_singleplayer ? 'selected' : ''}`}
+            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_singleplayer ? "selected" : ""}`}
          >
            <span>Singleplayer</span>
          </button>
@@ -151,7 +151,7 @@ const Rankings: React.FC = () => {
            onClick={() =>
              _set_current_leaderboard(RankingCategories.rankings_multiplayer)
            }
-            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_multiplayer ? 'selected' : ''}`}
+            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_multiplayer ? "selected" : ""}`}
          >
            <span>Cooperative</span>
          </button>
@@ -159,7 +159,7 @@ const Rankings: React.FC = () => {
            onClick={() =>
              _set_current_leaderboard(RankingCategories.rankings_overall)
            }
-            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_overall ? 'selected' : ''}`}
+            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_overall ? "selected" : ""}`}
          >
            <span>Overall</span>
          </button>
@@ -191,9 +191,9 @@ const Rankings: React.FC = () => {
            {leaderboardLoad ? null : (
              <div
                style={{
-                  display: 'flex',
+                  display: "flex",
-                  justifyContent: 'center',
+                  justifyContent: "center",
-                  margin: '30px 0px',
+                  margin: "30px 0px",
                }}
              >
                <span className="loader"></span>
diff --git a/frontend/src/pages/Rules.tsx b/frontend/src/pages/Rules.tsx
index 7a774bc..91027a0 100644
--- a/frontend/src/pages/Rules.tsx
+++ b/frontend/src/pages/Rules.tsx
@@ -1,25 +1,25 @@
-import React from 'react';
+import React from "react";
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from "react-markdown";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
-import '@css/Rules.css';
+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'
+          "https://raw.githubusercontent.com/pektezol/lphub/main/RULES.md"
        );
        if (!response.ok) {
-          throw new Error('Failed to fetch README');
+          throw new Error("Failed to fetch README");
        }
        const rulesText = await response.text();
        setRulesText(rulesText);
      } catch (error) {
-        console.error('Error fetching Rules:', error);
+        console.error("Error fetching Rules:", error);
      }
      // setRulesText(rulesText)
    };
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index 29d0041..0198034 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from "react-router-dom";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
 import {
  SteamIcon,
@@ -13,14 +13,14 @@ import {
  ThreedotIcon,
  DownloadIcon,
  HistoryIcon,
-} from '@images/Images';
+} from "@images/Images";
-import { UserProfile } from '@customTypes/Profile';
+import { UserProfile } from "@customTypes/Profile";
-import { Game, GameChapters } from '@customTypes/Game';
+import { Game, GameChapters } from "@customTypes/Game";
-import { Map } from '@customTypes/Map';
+import { Map } from "@customTypes/Map";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-import { ticks_to_time } from '@utils/Time';
+import { ticks_to_time } from "@utils/Time";
-import '@css/Profile.css';
+import "@css/Profile.css";
-import useMessage from '@hooks/UseMessage';
+import useMessage from "@hooks/UseMessage";
 interface UserProps {
  profile?: UserProfile;
@@ -37,8 +37,8 @@ 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
  );
@@ -48,9 +48,9 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  const navigate = useNavigate();
  const _fetch_user = React.useCallback(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);
@@ -58,7 +58,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  }, [location.pathname, token, profile, navigate]);
  const _get_game_chapters = React.useCallback(async () => {
-    if (game !== '0') {
+    if (game !== "0") {
      const gameChapters = await API.get_games_chapters(game);
      setChapterData(gameChapters);
    } else {
@@ -68,7 +68,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  }, [game, user]);
  const _get_game_maps = React.useCallback(async () => {
-    if (chapter === '0') {
+    if (chapter === "0") {
      const gameMaps = await API.get_game_maps(game);
      setMaps(gameMaps);
      setPageMax(Math.ceil(gameMaps.length / 20));
@@ -92,7 +92,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  }, [user, game, location, _get_game_chapters]);
  React.useEffect(() => {
-    if (user && game !== '0') {
+    if (user && game !== "0") {
      _get_game_maps();
    }
  }, [user, game, chapter, location, _get_game_maps]);
@@ -116,8 +116,8 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
          <div>
            <div>{user.user_name}</div>
            <div>
-              {user.country_code === 'XX' ? (
+              {user.country_code === "XX" ? (
-                ''
+                ""
              ) : (
                <img
                  src={`https://flagcdn.com/w80/${user.country_code.toLowerCase()}.jpg`}
@@ -137,32 +137,32 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
            </div>
          </div>
          <div>
-            {user.links.steam === '-' ? (
+            {user.links.steam === "-" ? (
-              ''
+              ""
            ) : (
              <a href={user.links.steam}>
                <img src={SteamIcon} alt="Steam" />
              </a>
            )}
-            {user.links.twitch === '-' ? (
+            {user.links.twitch === "-" ? (
-              ''
+              ""
            ) : (
              <a href={user.links.twitch}>
                <img src={TwitchIcon} alt="Twitch" />
              </a>
            )}
-            {user.links.youtube === '-' ? (
+            {user.links.youtube === "-" ? (
-              ''
+              ""
            ) : (
              <a href={user.links.youtube}>
                <img src={YouTubeIcon} alt="Youtube" />
              </a>
            )}
-            {user.links.p2sr === '-' ? (
+            {user.links.p2sr === "-" ? (
-              ''
+              ""
            ) : (
              <a href={user.links.p2sr}>
-                <img src={PortalIcon} alt="P2SR" style={{ padding: '0' }} />
+                <img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} />
              </a>
            )}
          </div>
@@ -172,8 +172,8 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
            <span>Overall</span>
            <span>
              {user.rankings.overall.rank === 0
-                ? 'N/A '
+                ? "N/A "
-                : '#' + user.rankings.overall.rank + ' '}
+                : "#" + user.rankings.overall.rank + " "}
              <span>
                ({user.rankings.overall.completion_count}/
                {user.rankings.overall.completion_total})
@@ -184,8 +184,8 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
            <span>Singleplayer</span>
            <span>
              {user.rankings.singleplayer.rank === 0
-                ? 'N/A '
+                ? "N/A "
-                : '#' + user.rankings.singleplayer.rank + ' '}
+                : "#" + user.rankings.singleplayer.rank + " "}
              <span>
                ({user.rankings.singleplayer.completion_count}/
                {user.rankings.singleplayer.completion_total})
@@ -196,8 +196,8 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
            <span>Cooperative</span>
            <span>
              {user.rankings.cooperative.rank === 0
-                ? 'N/A '
+                ? "N/A "
-                : '#' + user.rankings.cooperative.rank + ' '}
+                : "#" + user.rankings.cooperative.rank + " "}
              <span>
                ({user.rankings.cooperative.completion_count}/
                {user.rankings.cooperative.completion_total})
@@ -227,15 +227,15 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
              id="select-game"
              onChange={() => {
                setGame(
-                  (document.querySelector('#select-game') as HTMLInputElement)
+                  (document.querySelector("#select-game") as HTMLInputElement)
                    .value
                );
-                setChapter('0');
+                setChapter("0");
                const chapterSelect = document.querySelector(
-                  '#select-chapter'
+                  "#select-chapter"
                ) as HTMLSelectElement;
                if (chapterSelect) {
-                  chapterSelect.value = '0';
+                  chapterSelect.value = "0";
                }
              }}
            >
@@ -250,7 +250,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
            </select>
          )}
-          {game === '0' ? (
+          {game === "0" ? (
            <select disabled>
              <option>All Chapters</option>
            </select>
@@ -263,7 +263,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                setChapter(
                  (
                    document.querySelector(
-                      '#select-chapter'
+                      "#select-chapter"
                    ) as HTMLInputElement
                  ).value
                )
@@ -287,15 +287,15 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
            <span>Map Name</span>
            <img src={SortIcon} alt="" />
          </span>
-          <span style={{ justifyContent: 'center' }}>
+          <span style={{ justifyContent: "center" }}>
            <span>Portals</span>
            <img src={SortIcon} alt="" />
          </span>
-          <span style={{ justifyContent: 'center' }}>
+          <span style={{ justifyContent: "center" }}>
            <span>WRΔ </span>
            <img src={SortIcon} alt="" />
          </span>
-          <span style={{ justifyContent: 'center' }}>
+          <span style={{ justifyContent: "center" }}>
            <span>Time</span>
            <img src={SortIcon} alt="" />
          </span>
@@ -315,18 +315,18 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                  if (pageNumber !== 1) {
                    setPageNumber(prevPageNumber => prevPageNumber - 1);
                    const records = document.querySelectorAll(
-                      '.profileboard-record'
+                      ".profileboard-record"
                    );
                    records.forEach(r => {
-                      (r as HTMLInputElement).style.height = '44px';
+                      (r as HTMLInputElement).style.height = "44px";
                    });
                  }
                }}
              >
                <i
                  className="triangle"
-                  style={{ position: 'relative', left: '-5px' }}
+                  style={{ position: "relative", left: "-5px" }}
-                ></i>{' '}
+                ></i>{" "}
              </button>
              <span>
                {pageNumber}/{pageMax}
@@ -336,10 +336,10 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                  if (pageNumber !== pageMax) {
                    setPageNumber(prevPageNumber => prevPageNumber + 1);
                    const records = document.querySelectorAll(
-                      '.profileboard-record'
+                      ".profileboard-record"
                    );
                    records.forEach(r => {
-                      (r as HTMLInputElement).style.height = '44px';
+                      (r as HTMLInputElement).style.height = "44px";
                    });
                  }
                }}
@@ -347,18 +347,18 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                <i
                  className="triangle"
                  style={{
-                    position: 'relative',
+                    position: "relative",
-                    left: '5px',
+                    left: "5px",
-                    transform: 'rotate(180deg)',
+                    transform: "rotate(180deg)",
                  }}
-                ></i>{' '}
+                ></i>{" "}
              </button>
            </div>
          </div>
        </div>
        <hr />
        <div id="profileboard-records">
-          {game === '0' ? (
+          {game === "0" ? (
            user.records
              .sort((a, b) => a.map_id - b.map_id)
              .map((r, index) =>
@@ -367,33 +367,33 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                    {r.scores.map((e, i) => (
                      <>
                        {i !== 0 ? (
-                          <hr style={{ gridColumn: '1 / span 8' }} />
+                          <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>
+                        <span style={{ display: "grid" }}>{e.score_count}</span>
-                        <span style={{ display: 'grid' }}>
+                        <span style={{ display: "grid" }}>
                          {e.score_count - r.map_wr_count > 0
                            ? `+${e.score_count - r.map_wr_count}`
                            : `-`}
                        </span>
-                        <span style={{ display: 'grid' }}>
+                        <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
                            onClick={() => {
                              message(
-                                'Demo Information',
+                                "Demo Information",
                                `Demo ID: ${e.demo_id}`
                              );
                            }}
@@ -412,38 +412,38 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                              onClick={() => {
                                (
                                  document.querySelectorAll(
-                                    '.profileboard-record'
+                                    ".profileboard-record"
                                  )[index % 20] as HTMLInputElement
-                                ).style.height === '44px' ||
+                                ).style.height === "44px" ||
                                (
                                  document.querySelectorAll(
-                                    '.profileboard-record'
+                                    ".profileboard-record"
                                  )[index % 20] as HTMLInputElement
-                                ).style.height === ''
+                                ).style.height === ""
                                  ? ((
                                      document.querySelectorAll(
-                                        '.profileboard-record'
+                                        ".profileboard-record"
                                      )[index % 20] as HTMLInputElement
                                    ).style.height =
                                      `${r.scores.length * 46}px`)
                                  : ((
                                      document.querySelectorAll(
-                                        '.profileboard-record'
+                                        ".profileboard-record"
                                      )[index % 20] as HTMLInputElement
-                                    ).style.height = '44px');
+                                    ).style.height = "44px");
                              }}
                            >
                              <img src={HistoryIcon} alt="history" />
                            </button>
                          ) : (
-                            ''
+                            ""
                          )}
                        </span>
                      </>
                    ))}
                  </button>
                ) : (
-                  ''
+                  ""
                )
              )
          ) : maps ? (
@@ -457,42 +457,42 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                    <button
                      className="profileboard-record"
                      key={index}
-                      style={{ backgroundColor: '#1b1b20' }}
+                      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 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>
+                      <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' }} />
+                            <hr style={{ gridColumn: "1 / span 8" }} />
                          ) : (
-                            ''
+                            ""
                          )}
                          <Link to={`/maps/${r.id}`}>
                            <span>{r.name}</span>
                          </Link>
-                          <span style={{ display: 'grid' }}>
+                          <span style={{ display: "grid" }}>
                            {record!.scores[i].score_count}
                          </span>
-                          <span style={{ display: 'grid' }}>
+                          <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' }}>
+                          <span style={{ display: "grid" }}>
                            {ticks_to_time(record!.scores[i].score_time)}
                          </span>
                          <span> </span>
@@ -501,12 +501,12 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                          ) : (
                            <span> </span>
                          )}
-                          <span>{record!.scores[i].date.split('T')[0]}</span>
+                          <span>{record!.scores[i].date.split("T")[0]}</span>
-                          <span style={{ flexDirection: 'row-reverse' }}>
+                          <span style={{ flexDirection: "row-reverse" }}>
                            <button
                              onClick={() => {
                                message(
-                                  'Demo Information',
+                                  "Demo Information",
                                  `Demo ID: ${e.demo_id}`
                                );
                              }}
@@ -525,31 +525,31 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                                onClick={() => {
                                  (
                                    document.querySelectorAll(
-                                      '.profileboard-record'
+                                      ".profileboard-record"
                                    )[index % 20] as HTMLInputElement
-                                  ).style.height === '44px' ||
+                                  ).style.height === "44px" ||
                                  (
                                    document.querySelectorAll(
-                                      '.profileboard-record'
+                                      ".profileboard-record"
                                    )[index % 20] as HTMLInputElement
-                                  ).style.height === ''
+                                  ).style.height === ""
                                    ? ((
                                        document.querySelectorAll(
-                                          '.profileboard-record'
+                                          ".profileboard-record"
                                        )[index % 20] as HTMLInputElement
                                      ).style.height =
                                        `${record!.scores.length * 46}px`)
                                    : ((
                                        document.querySelectorAll(
-                                          '.profileboard-record'
+                                          ".profileboard-record"
                                        )[index % 20] as HTMLInputElement
-                                      ).style.height = '44px');
+                                      ).style.height = "44px");
                                }}
                              >
                                <img src={HistoryIcon} alt="history" />
                              </button>
                            ) : (
-                              ''
+                              ""
                            )}
                          </span>
                        </>
diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
index 9bf083a..8265915 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 8924b97..5b494ca 100644
--- a/frontend/src/types/Chapters.ts
+++ b/frontend/src/types/Chapters.ts
@@ -1,5 +1,5 @@
-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;
diff --git a/frontend/src/types/Game.ts b/frontend/src/types/Game.ts
index be2cd73..0e7dc80 100644
--- a/frontend/src/types/Game.ts
+++ b/frontend/src/types/Game.ts
@@ -1,4 +1,4 @@
-import type { Map } from '@customTypes/Map';
+import type { Map } from "@customTypes/Map";
 export interface Game {
  id: number;
diff --git a/frontend/src/types/Map.ts b/frontend/src/types/Map.ts
index 6bc6369..6a42c2a 100644
--- a/frontend/src/types/Map.ts
+++ b/frontend/src/types/Map.ts
@@ -1,6 +1,6 @@
-import type { Category, GameCategoryPortals } from '@customTypes/Game';
+import type { Category, GameCategoryPortals } from "@customTypes/Game";
-import type { Pagination } from '@customTypes/Pagination';
+import type { Pagination } from "@customTypes/Pagination";
-import type { UserShort } from '@customTypes/Profile';
+import type { UserShort } from "@customTypes/Profile";
 export interface Map {
  id: number;
@@ -44,7 +44,7 @@ export interface MapLeaderboard {
 }
 export interface MapLeaderboardRecordSingleplayer {
-  kind: 'singleplayer';
+  kind: "singleplayer";
  placement: number;
  record_id: number;
  score_count: number;
@@ -55,7 +55,7 @@ export interface MapLeaderboardRecordSingleplayer {
 }
 export interface MapLeaderboardRecordMultiplayer {
-  kind: 'multiplayer';
+  kind: "multiplayer";
  placement: number;
  record_id: number;
  score_count: number;
diff --git a/frontend/src/types/Profile.ts b/frontend/src/types/Profile.ts
index 8051ae5..3c83d29 100644
--- a/frontend/src/types/Profile.ts
+++ b/frontend/src/types/Profile.ts
@@ -1,4 +1,4 @@
-import type { Pagination } from '@customTypes/Pagination';
+import type { Pagination } from "@customTypes/Pagination";
 export interface UserShort {
  steam_id: string;
diff --git a/frontend/src/types/Ranking.ts b/frontend/src/types/Ranking.ts
index 06a5ca4..800f4be 100644
--- a/frontend/src/types/Ranking.ts
+++ b/frontend/src/types/Ranking.ts
@@ -1,4 +1,4 @@
-import type { UserShort } from '@customTypes/Profile';
+import type { UserShort } from "@customTypes/Profile";
 export interface RankingType {
  placement: number;
diff --git a/frontend/src/types/Search.ts b/frontend/src/types/Search.ts
index 48b9169..b258ee3 100644
--- a/frontend/src/types/Search.ts
+++ b/frontend/src/types/Search.ts
@@ -1,4 +1,4 @@
-import type { UserShort } from '@customTypes/Profile';
+import type { UserShort } from "@customTypes/Profile";
 export interface Search {
  players: UserShort[];
diff --git a/frontend/src/utils/Jwt.ts b/frontend/src/utils/Jwt.ts
index affcd36..dc6ec92 100644
--- a/frontend/src/utils/Jwt.ts
+++ b/frontend/src/utils/Jwt.ts
@@ -5,20 +5,20 @@ export function get_user_id_from_token(
  if (!token) {
    return undefined;
  }
-  const parts = token.split('.');
+  const parts = token.split(".");
  if (parts.length !== 3) {
    return undefined;
  }
  const base64Url = parts[1];
-  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
  const jsonPayload = decodeURIComponent(
    atob(base64)
-      .split('')
+      .split("")
      .map(function (c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
      })
-      .join('')
+      .join("")
  );
  return JSON.parse(jsonPayload).sub;
 }
@@ -29,20 +29,20 @@ export function get_user_mod_from_token(
  if (!token) {
    return undefined;
  }
-  const parts = token.split('.');
+  const parts = token.split(".");
  if (parts.length !== 3) {
    return undefined;
  }
  const base64Url = parts[1];
-  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
  const jsonPayload = decodeURIComponent(
    atob(base64)
-      .split('')
+      .split("")
      .map(function (c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
      })
-      .join('')
+      .join("")
  );
  return JSON.parse(jsonPayload).mod;
 }
diff --git a/frontend/src/utils/Time.ts b/frontend/src/utils/Time.ts
index 34830b0..8f2c03c 100644
--- a/frontend/src/utils/Time.ts
+++ b/frontend/src/utils/Time.ts
@@ -6,47 +6,47 @@ export function time_ago(date: any) {
  let interval = Math.floor(seconds / 31536000);
  if (interval === 1) {
-    return interval + ' year ago';
+    return interval + " year ago";
  }
  if (interval > 1) {
-    return interval + ' years ago';
+    return interval + " years ago";
  }
  interval = Math.floor(seconds / 2592000);
  if (interval === 1) {
-    return interval + ' month ago';
+    return interval + " month ago";
  }
  if (interval > 1) {
-    return interval + ' months ago';
+    return interval + " months ago";
  }
  interval = Math.floor(seconds / 86400);
  if (interval === 1) {
-    return interval + ' day ago';
+    return interval + " day ago";
  }
  if (interval > 1) {
-    return interval + ' days ago';
+    return interval + " days ago";
  }
  interval = Math.floor(seconds / 3600);
  if (interval === 1) {
-    return interval + ' hour ago';
+    return interval + " hour ago";
  }
  if (interval > 1) {
-    return interval + ' hours ago';
+    return interval + " hours ago";
  }
  interval = Math.floor(seconds / 60);
  if (interval === 1) {
-    return interval + ' minute ago';
+    return interval + " minute ago";
  }
  if (interval > 1) {
-    return interval + ' minutes ago';
+    return interval + " minutes ago";
  }
-  if (seconds < 10) return 'just now';
+  if (seconds < 10) return "just now";
-  return Math.floor(seconds) + ' seconds ago';
+  return Math.floor(seconds) + " seconds ago";
 }
 export function ticks_to_time(ticks: number) {
@@ -58,5 +58,5 @@ export function ticks_to_time(ticks: number) {
  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")}`;
 }
author	FifthWit <fifthwitbusiness@gmail.com>	2025-01-30 13:11:48 -0600
committer	FifthWit <fifthwitbusiness@gmail.com>	2025-01-30 13:11:48 -0600
commit	81342e2579165ebfdb28c749dc5225141721a419 (patch)
tree	8e5759c20b92408048fe5ac44f48e2df2a00ab9b /frontend
parent	fixed issues with useCallback (diff)
download	lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.gz lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.bz2 lphub-81342e2579165ebfdb28c749dc5225141721a419.zip