9 files changed, 283 insertions, 283 deletions

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 ReactMarkdown from 'react-markdown';
-import { Helmet } from 'react-helmet';
+import React from "react";
+import ReactMarkdown from "react-markdown";
+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 { Helmet } from 'react-helmet';
+import React from "react";
+import { Helmet } from "react-helmet";
 
-import GameEntry from '@components/GameEntry';
-import { Game } from '@customTypes/Game';
-import '@css/Maps.css';
+import GameEntry from "@components/GameEntry";
+import { Game } from "@customTypes/Game";
+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 { Helmet } from 'react-helmet';
+import React from "react";
+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 { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
+import React, { useEffect } from "react";
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Helmet } from "react-helmet";
 
-import '@css/Maplist.css';
-import { API } from '@api/Api';
-import { Game } from '@customTypes/Game';
-import { GameChapter, GamesChapters } from '@customTypes/Chapters';
+import "@css/Maplist.css";
+import { API } from "@api/Api";
+import { Game } from "@customTypes/Game";
+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') {
-      setDropdownActive('block');
+    if (dropdownActive === "none") {
+      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')) {
-      let cat = parseFloat(queryParams.get('chapter') || '');
+    if (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'
+                        ? "game-cat-button selected"
+                        : "game-cat-button"
                     }
                     onClick={() => {
                       setCatNum(cat.category.id - 1);
@@ -147,17 +147,17 @@ const Maplist: React.FC = () => {
               <div>
                 <span
                   style={{
-                    fontSize: '18px',
-                    transform: 'translateY(5px)',
-                    display: 'block',
-                    marginTop: '10px',
+                    fontSize: "18px",
+                    transform: "translateY(5px)",
+                    display: "block",
+                    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'
-                                      : 'one'
+                                      ? "five"
+                                      : "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 { Link, useLocation } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
-
-import { PortalIcon, FlagIcon, ChatIcon } from '@images/Images';
-import Summary from '@components/Summary';
-import Leaderboards from '@components/Leaderboards';
-import Discussions from '@components/Discussions';
-import ModMenu from '@components/ModMenu';
-import { MapDiscussions, MapLeaderboard, MapSummary } from '@customTypes/Map';
-import { API } from '@api/Api';
-import '@css/Maps.css';
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import { Helmet } from "react-helmet";
+
+import { PortalIcon, FlagIcon, ChatIcon } from "@images/Images";
+import Summary from "@components/Summary";
+import Leaderboards from "@components/Leaderboards";
+import Discussions from "@components/Discussions";
+import ModMenu from "@components/ModMenu";
+import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map";
+import { API } from "@api/Api";
+import "@css/Maps.css";
 
 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 { Link, useNavigate } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet";
 
 import {
   SteamIcon,
@@ -14,16 +14,16 @@ import {
   DownloadIcon,
   HistoryIcon,
   DeleteIcon,
-} from '@images/Images';
-import { UserProfile } from '@customTypes/Profile';
-import { Game, GameChapters } from '@customTypes/Game';
-import { Map } from '@customTypes/Map';
-import { ticks_to_time } from '@utils/Time';
-import '@css/Profile.css';
-import { API } from '@api/Api';
-import useConfirm from '@hooks/UseConfirm';
-import useMessage from '@hooks/UseMessage';
-import useMessageLoad from '@hooks/UseMessageLoad';
+} from "@images/Images";
+import { UserProfile } from "@customTypes/Profile";
+import { Game, GameChapters } from "@customTypes/Game";
+import { Map } from "@customTypes/Map";
+import { ticks_to_time } from "@utils/Time";
+import "@css/Profile.css";
+import { API } from "@api/Api";
+import useConfirm from "@hooks/UseConfirm";
+import useMessage from "@hooks/UseMessage";
+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 [chapter, setChapter] = React.useState('0');
+  const [game, setGame] = React.useState("0");
+  const [chapter, setChapter] = React.useState("0");
   const [chapterData, setChapterData] = React.useState<GameChapters | null>(
     null
   );
@@ -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',
-      'Are you sure you want to delete this record?'
+      "Delete Record",
+      "Are you sure you want to delete this record?"
     );
 
     if (!userConfirmed) {
       return;
     }
 
-    messageLoad('Deleting...');
+    messageLoad("Deleting...");
 
     const api_success = await API.delete_map_record(token!, map_id, record_id);
     messageLoadClose();
     if (api_success) {
-      await message('Delete Record', 'Successfully deleted record.');
+      await message("Delete Record", "Successfully deleted record.");
       onDeleteRecord();
     } else {
-      await message('Delete Record', 'Could not delete record.');
+      await message("Delete Record", "Could not delete record.");
     }
   };
 
   React.useEffect(() => {
     if (!profile) {
-      navigate('/');
+      navigate("/");
     }
   }, [profile, 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 '
-                  : '#' + profile.rankings.overall.rank + ' '}
+                  ? "N/A "
+                  : "#" + 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 '
-                  : '#' + profile.rankings.singleplayer.rank + ' '}
+                  ? "N/A "
+                  : "#" + 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 '
-                  : '#' + profile.rankings.cooperative.rank + ' '}
+                  ? "N/A "
+                  : "#" + 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' }}
-                  ></i>{' '}
+                    style={{ position: "relative", left: "-5px" }}
+                  ></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',
-                      left: '5px',
-                      transform: 'rotate(180deg)',
+                      position: "relative",
+                      left: "5px",
+                      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 style={{ flexDirection: 'row-reverse' }}>
+                          <span>{e.date.split("T")[0]}</span>
+                          <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 style={{ flexDirection: 'row-reverse' }}>
+                            <span>{record!.scores[i].date.split("T")[0]}</span>
+                            <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 { Helmet } from 'react-helmet';
+import React, { useEffect } from "react";
+import { Helmet } from "react-helmet";
 
-import RankingEntry from '@components/RankingEntry';
+import RankingEntry from "@components/RankingEntry";
 import {
   Ranking,
   SteamRanking,
   RankingType,
   SteamRankingType,
-} from '@customTypes/Ranking';
-import { API } from '@api/Api';
+} from "@customTypes/Ranking";
+import { API } from "@api/Api";
 
-import '@css/Rankings.css';
+import "@css/Rankings.css";
 
 const Rankings: React.FC = () => {
   const [leaderboardData, setLeaderboardData] = React.useState<
@@ -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',
-                  justifyContent: 'center',
-                  margin: '30px 0px',
+                  display: "flex",
+                  justifyContent: "center",
+                  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 ReactMarkdown from 'react-markdown';
-import { Helmet } from 'react-helmet';
+import React from "react";
+import ReactMarkdown from "react-markdown";
+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 { Link, useLocation, useNavigate } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
+import React from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet";
 
 import {
   SteamIcon,
@@ -13,14 +13,14 @@ import {
   ThreedotIcon,
   DownloadIcon,
   HistoryIcon,
-} from '@images/Images';
-import { UserProfile } from '@customTypes/Profile';
-import { Game, GameChapters } from '@customTypes/Game';
-import { Map } from '@customTypes/Map';
-import { API } from '@api/Api';
-import { ticks_to_time } from '@utils/Time';
-import '@css/Profile.css';
-import useMessage from '@hooks/UseMessage';
+} from "@images/Images";
+import { UserProfile } from "@customTypes/Profile";
+import { Game, GameChapters } from "@customTypes/Game";
+import { Map } from "@customTypes/Map";
+import { API } from "@api/Api";
+import { ticks_to_time } from "@utils/Time";
+import "@css/Profile.css";
+import 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 [chapter, setChapter] = React.useState('0');
+  const [game, setGame] = React.useState("0");
+  const [chapter, setChapter] = React.useState("0");
   const [chapterData, setChapterData] = React.useState<GameChapters | null>(
     null
   );
@@ -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 '
-                : '#' + user.rankings.overall.rank + ' '}
+                ? "N/A "
+                : "#" + 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 '
-                : '#' + user.rankings.singleplayer.rank + ' '}
+                ? "N/A "
+                : "#" + 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 '
-                : '#' + user.rankings.cooperative.rank + ' '}
+                ? "N/A "
+                : "#" + 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' }}
-                ></i>{' '}
+                  style={{ position: "relative", left: "-5px" }}
+                ></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',
-                    left: '5px',
-                    transform: 'rotate(180deg)',
+                    position: "relative",
+                    left: "5px",
+                    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 style={{ flexDirection: 'row-reverse' }}>
+                        <span>{e.date.split("T")[0]}</span>
+                        <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 style={{ flexDirection: 'row-reverse' }}>
+                          <span>{record!.scores[i].date.split("T")[0]}</span>
+                          <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>
                         </>