feat/frontend: switch to vite, update node to v22 (#281)

8 files changed, 289 insertions, 289 deletions

diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index a8b7826..e4abdf4 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -1,40 +1,40 @@
-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'
-                );
-                if (!response.ok) {
-                    throw new Error('Failed to fetch README');
-                }
-                const readmeText = await response.text();
-                setAboutText(readmeText);
-            } catch (error) {
-                console.error('Error fetching README:', error);
-            }
-        };
-        fetchReadme();
-    }, []);
+  React.useEffect(() => {
+    const fetchReadme = async () => {
+      try {
+        const response = await fetch(
+          "https://raw.githubusercontent.com/pektezol/lphub/main/README.md"
+        );
+        if (!response.ok) {
+          throw new Error("Failed to fetch README");
+        }
+        const readmeText = await response.text();
+        setAboutText(readmeText);
+      } catch (error) {
+        console.error("Error fetching README:", error);
+      }
+    };
+    fetchReadme();
+  }, []);
 
 
-    return (
-        <div id="about">
-            <Helmet>
-                <title>LPHUB | About</title>
-            </Helmet>
-            <ReactMarkdown>{aboutText}</ReactMarkdown>
-        </div>
-    );
+  return (
+    <div id="about">
+      <Helmet>
+        <title>LPHUB | About</title>
+      </Helmet>
+      <ReactMarkdown>{aboutText}</ReactMarkdown>
+    </div>
+  );
 };
 
 export default About;
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index 15cc891..909ea20 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -1,46 +1,46 @@
-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 GameEntry from "@components/GameEntry";
+import { Game } from "@customTypes/Game";
 import "@css/Maps.css"
 
 interface GamesProps {
-    games: Game[];
+  games: Game[];
 }
 
 const Games: React.FC<GamesProps> = ({ games }) => {
 
-    const _page_load = () => {
-        const loaders = document.querySelectorAll(".loader");
-        loaders.forEach((loader) => {
-            (loader as HTMLElement).style.display = "none";
-        });
-    }
+  const _page_load = () => {
+    const loaders = document.querySelectorAll(".loader");
+    loaders.forEach((loader) => {
+      (loader as HTMLElement).style.display = "none";
+    });
+  }
 
-    React.useEffect(() => {
-        document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
-            game.innerHTML = "";
-        });
-        _page_load();
-    }, []);
+  React.useEffect(() => {
+    document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
+      game.innerHTML = "";
+    });
+    _page_load();
+  }, []);
 
-    return (
-        <div className='games-page'>
-            <Helmet>
-                <title>LPHUB | Games</title>
-            </Helmet>
-            <section>
-                <div className='games-page-content'>
-                    <div className='games-page-item-content'>
-                        {games.map((game, index) => (
-                            <GameEntry game={game} key={index} />
-                        ))}
-                    </div>
-                </div>
-            </section>
+  return (
+    <div className='games-page'>
+      <Helmet>
+        <title>LPHUB | Games</title>
+      </Helmet>
+      <section>
+        <div className='games-page-content'>
+          <div className='games-page-item-content'>
+            {games.map((game, index) => (
+              <GameEntry game={game} key={index} />
+            ))}
+          </div>
         </div>
-    );
+      </section>
+    </div>
+  );
 };
 
 export default Games;
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 4f46af5..3f30d9a 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -1,22 +1,22 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
+import React from "react";
+import { Helmet } from "react-helmet";
 
 const Homepage: React.FC = () => {
 
-    return (
-        <main>
-            <Helmet>
-                <title>LPHUB | Homepage</title>
-            </Helmet>
-            <section>
-                <p />
-                <h1>Welcome to Least Portals Hub!</h1>
-                <p>At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.</p>
-                <p>The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.</p>
-                <p>By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.</p>
-            </section>
-        </main>
-    );
+  return (
+    <main>
+      <Helmet>
+        <title>LPHUB | Homepage</title>
+      </Helmet>
+      <section>
+        <p />
+        <h1>Welcome to Least Portals Hub!</h1>
+        <p>At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.</p>
+        <p>The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.</p>
+        <p>By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.</p>
+      </section>
+    </main>
+  );
 };
 
 export default Homepage;
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index fb13563..8bb5b32 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -1,14 +1,14 @@
-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 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 {
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 48233bf..e7b8325 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
-
-import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from '@images/Images';
-import { UserProfile } from '@customTypes/Profile';
-import { Game, GameChapters } from '@customTypes/Game';
-import { Map } from '@customTypes/Map';
-import { ticks_to_time } from '@utils/Time';
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet";
+
+import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from "@images/Images";
+import { 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 { API } from "@api/Api";
+import useConfirm from "@hooks/UseConfirm";
+import useMessage from "@hooks/UseMessage";
 import useMessageLoad from "@hooks/UseMessageLoad";
 
 interface ProfileProps {
@@ -193,9 +193,9 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
 
               <select id='select-game'
                 onChange={() => {
-                  setGame((document.querySelector('#select-game') as HTMLInputElement).value);
+                  setGame((document.querySelector("#select-game") as HTMLInputElement).value);
                   setChapter("0");
-                  const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+                  const chapterSelect = document.querySelector("#select-chapter") as HTMLSelectElement;
                   if (chapterSelect) {
                     chapterSelect.value = "0";
                   }
@@ -213,7 +213,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
               : chapterData === null ? <select></select> :
 
                 <select id='select-chapter'
-                  onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
+                  onChange={() => setChapter((document.querySelector("#select-chapter") as HTMLInputElement).value)}>
                   <option value="0" key="0">All Chapters</option>
                   {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
                     <option value={e.id} key={i + 1}>{e.name}</option>
@@ -222,9 +222,9 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
           </div>
           <div id='profileboard-top'>
             <span><span>Map Name</span><img src={SortIcon} alt="" /></span>
-            <span style={{ justifyContent: 'center' }}><span>Portals</span><img src={SortIcon} alt="" /></span>
-            <span style={{ justifyContent: 'center' }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
-            <span style={{ justifyContent: 'center' }}><span>Time</span><img src={SortIcon} alt="" /></span>
+            <span style={{ justifyContent: "center" }}><span>Portals</span><img src={SortIcon} alt="" /></span>
+            <span style={{ justifyContent: "center" }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
+            <span style={{ justifyContent: "center" }}><span>Time</span><img src={SortIcon} alt="" /></span>
             <span> </span>
             <span><span>Rank</span><img src={SortIcon} alt="" /></span>
             <span><span>Date</span><img src={SortIcon} alt="" /></span>
@@ -239,7 +239,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
                     });
                   }
                 }}
-                ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
+                ><i className='triangle' style={{ position: "relative", left: "-5px", }}></i> </button>
                 <span>{pageNumber}/{pageMax}</span>
                 <button onClick={() => {
                   if (pageNumber !== pageMax) {
@@ -250,7 +250,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
                     });
                   }
                 }}
-                ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+                ><i className='triangle' style={{ position: "relative", left: "5px", transform: "rotate(180deg)" }}></i> </button>
               </div>
             </div>
           </div>
@@ -272,7 +272,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
 
                           <span style={{ display: "grid" }}>{e.score_count}</span>
 
-                          <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : `-`}</span>
+                          <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : "-"}</span>
                           <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
                           <span> </span>
                           {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
@@ -300,7 +300,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
                 maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
                   .map((r, index) => {
                     if (Math.ceil((index + 1) / 20) === pageNumber) {
-                      let record = profile.records.find((e) => e.map_id === r.id);
+                      const record = profile.records.find((e) => e.map_id === r.id);
                       return record === undefined ? (
                         <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}>
                           <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
@@ -318,7 +318,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
                             {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
                             <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
                             <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
-                            <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : `-`}</span>
+                            <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : "-"}</span>
                             <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
                             <span> </span>
                             {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 71aa427..12dcab4 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -8,140 +8,140 @@ import { API } from "@api/Api";
 import "@css/Rankings.css";
 
 const Rankings: React.FC = () => {
-    const [leaderboardData, setLeaderboardData] = React.useState<Ranking | SteamRanking>();
-    const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] | SteamRankingType[]>();
-    enum LeaderboardTypes {
-        official,
-        unofficial
+  const [leaderboardData, setLeaderboardData] = React.useState<Ranking | SteamRanking>();
+  const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] | SteamRankingType[]>();
+  enum LeaderboardTypes {
+    official,
+    unofficial
+  }
+  const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+
+  const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
+
+  enum RankingCategories {
+    rankings_overall,
+    rankings_multiplayer,
+    rankings_singleplayer
+  }
+  const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
+  const [load, setLoad] = React.useState<boolean>(false);
+
+  const _fetch_rankings = async () => {
+    setLeaderboardLoad(false);
+    const rankings = await API.get_official_rankings();
+    setLeaderboardData(rankings);
+    if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+      setCurrentLeaderboard(rankings.rankings_singleplayer)
+    } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
+      setCurrentLeaderboard(rankings.rankings_multiplayer)
+    } else {
+      setCurrentLeaderboard(rankings.rankings_overall)
     }
-    const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
-
-    const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
-
-    enum RankingCategories {
-        rankings_overall,
-        rankings_multiplayer,
-        rankings_singleplayer
+    setLoad(true);
+    setLeaderboardLoad(true);
+  }
+
+  const __dev_fetch_unofficial_rankings = async () => {
+    try {
+      setLeaderboardLoad(false);
+      const rankings = await API.get_unofficial_rankings();
+      setLeaderboardData(rankings);
+      if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+        // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
+        setCurrentLeaderboard(rankings.rankings_singleplayer)
+      } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
+        setCurrentLeaderboard(rankings.rankings_multiplayer)
+      } else {
+        setCurrentLeaderboard(rankings.rankings_overall)
+      }
+      setLeaderboardLoad(true);
+    } catch (e) {
+      console.log(e)
     }
-    const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
-    const [load, setLoad] = React.useState<boolean>(false);
-
-    const _fetch_rankings = async () => {
-        setLeaderboardLoad(false);
-        const rankings = await API.get_official_rankings();
-        setLeaderboardData(rankings);
-        if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
-            setCurrentLeaderboard(rankings.rankings_singleplayer)
-        } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-            setCurrentLeaderboard(rankings.rankings_multiplayer)
-        } else {
-            setCurrentLeaderboard(rankings.rankings_overall)
-        }
-        setLoad(true);
-        setLeaderboardLoad(true);
+  }
+
+  const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
+    if (ranking_cat == RankingCategories.rankings_singleplayer) {
+      setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
+    } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
+      setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
+    } else {
+      setCurrentLeaderboard(leaderboardData!.rankings_overall);
     }
 
-    const __dev_fetch_unofficial_rankings = async () => {
-        try {
-            setLeaderboardLoad(false);
-            const rankings = await API.get_unofficial_rankings();
-            setLeaderboardData(rankings);
-            if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
-                // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
-                setCurrentLeaderboard(rankings.rankings_singleplayer)
-            } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-                setCurrentLeaderboard(rankings.rankings_multiplayer)
-            } else {
-                setCurrentLeaderboard(rankings.rankings_overall)
-            }
-            setLeaderboardLoad(true);
-        } catch (e) {
-            console.log(e)
-        }
-    }
+    setCurrentLeaderboardType(ranking_cat);
+  }
 
-    const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
-        if (ranking_cat == RankingCategories.rankings_singleplayer) {
-            setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
-        } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
-            setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
-        } else {
-            setCurrentLeaderboard(leaderboardData!.rankings_overall);
-        }
+  const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
+    if (leaderboard_type == LeaderboardTypes.official) {
+      _fetch_rankings();
+    } else {
 
-        setCurrentLeaderboardType(ranking_cat);
     }
+  }
 
-    const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
-        if (leaderboard_type == LeaderboardTypes.official) {
-            _fetch_rankings();
-        } else {
-
-        }
+  useEffect(() => {
+    _fetch_rankings();
+    if (load) {
+      _set_current_leaderboard(RankingCategories.rankings_singleplayer);
     }
+  }, [load])
+
+  return (
+    <main>
+      <Helmet>
+        <title>LPHUB | Rankings</title>
+      </Helmet>
+      <section className="nav-container nav-1">
+        <div>
+          <button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
+            <span>Official (LPHUB)</span>
+          </button>
+          <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
+            <span>Unofficial (Steam)</span>
+          </button>
+        </div>
+      </section>
+      <section className="nav-container nav-2">
+        <div>
+          <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
+            <span>Singleplayer</span>
+          </button>
+          <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
+            <span>Cooperative</span>
+          </button>
+          <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
+            <span>Overall</span>
+          </button>
+        </div>
+      </section>
+
+      {load ?
+        <section className="rankings-leaderboard">
+          <div className="ranks-container">
+            <div className="leaderboard-entry header">
+              <span>Rank</span>
+              <span>Player</span>
+              <span>Portals</span>
+            </div>
+
+            <div className="splitter"></div>
+
+            {leaderboardLoad && currentLeaderboard?.map((curRankingData, i) => {
+              return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
+            })
+            }
 
-    useEffect(() => {
-        _fetch_rankings();
-        if (load) {
-            _set_current_leaderboard(RankingCategories.rankings_singleplayer);
-        }
-    }, [load])
-
-    return (
-        <main>
-            <Helmet>
-                <title>LPHUB | Rankings</title>
-            </Helmet>
-            <section className="nav-container nav-1">
-                <div>
-                    <button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
-                        <span>Official (LPHUB)</span>
-                    </button>
-                    <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
-                        <span>Unofficial (Steam)</span>
-                    </button>
-                </div>
-            </section>
-            <section className="nav-container nav-2">
-                <div>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
-                        <span>Singleplayer</span>
-                    </button>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
-                        <span>Cooperative</span>
-                    </button>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
-                        <span>Overall</span>
-                    </button>
-                </div>
-            </section>
-
-            {load ?
-                <section className="rankings-leaderboard">
-                    <div className="ranks-container">
-                        <div className="leaderboard-entry header">
-                            <span>Rank</span>
-                            <span>Player</span>
-                            <span>Portals</span>
-                        </div>
-
-                        <div className="splitter"></div>
-
-                        {leaderboardLoad && currentLeaderboard?.map((curRankingData, i) => {
-                            return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
-                        })
-                        }
-
-                        {leaderboardLoad ? null :
-                            <div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}>
-                                <span className="loader"></span>
-                            </div>
-                        }
-                    </div>
-                </section>
-                : null}
-        </main>
-    )
+            {leaderboardLoad ? null :
+              <div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}>
+                <span className="loader"></span>
+              </div>
+            }
+          </div>
+        </section>
+        : null}
+    </main>
+  )
 }
 
 export default Rankings;
diff --git a/frontend/src/pages/Rules.tsx b/frontend/src/pages/Rules.tsx
index 9f57b7e..a07c0c1 100644
--- a/frontend/src/pages/Rules.tsx
+++ b/frontend/src/pages/Rules.tsx
@@ -1,41 +1,41 @@
-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'
-                );
-                if (!response.ok) {
-                    throw new Error('Failed to fetch README');
-                }
-                const rulesText = await response.text();
-                setRulesText(rulesText);
-            } catch (error) {
-                console.error('Error fetching Rules:', error);
-            }
-            // setRulesText(rulesText)
-        };
-        fetchRules();
-    }, []);
+  React.useEffect(() => {
+    const fetchRules = async () => {
+      try {
+        const response = await fetch(
+          "https://raw.githubusercontent.com/pektezol/lphub/main/RULES.md"
+        );
+        if (!response.ok) {
+          throw new Error("Failed to fetch README");
+        }
+        const rulesText = await response.text();
+        setRulesText(rulesText);
+      } catch (error) {
+        console.error("Error fetching Rules:", error);
+      }
+      // setRulesText(rulesText)
+    };
+    fetchRules();
+  }, []);
 
 
-    return (
-        <main>
-            <Helmet>
-                <title>LPHUB | Rules</title>
-            </Helmet>
-            <ReactMarkdown>{rulesText}</ReactMarkdown>
-        </main>
-    );
+  return (
+    <main>
+      <Helmet>
+        <title>LPHUB | Rules</title>
+      </Helmet>
+      <ReactMarkdown>{rulesText}</ReactMarkdown>
+    </main>
+  );
 };
 
 export default Rules;
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index d43c0c6..33be1f0 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
-
-import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '@images/Images';
-import { 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 React from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet";
+
+import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from "@images/Images";
+import { 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';
+import useMessage from "@hooks/UseMessage";
 
 interface UserProps {
   profile?: UserProfile;
@@ -162,9 +162,9 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
 
             <select id='select-game'
               onChange={() => {
-                setGame((document.querySelector('#select-game') as HTMLInputElement).value);
+                setGame((document.querySelector("#select-game") as HTMLInputElement).value);
                 setChapter("0");
-                const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+                const chapterSelect = document.querySelector("#select-chapter") as HTMLSelectElement;
                 if (chapterSelect) {
                   chapterSelect.value = "0";
                 }
@@ -182,7 +182,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
             : chapterData === null ? <select></select> :
 
               <select id='select-chapter'
-                onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
+                onChange={() => setChapter((document.querySelector("#select-chapter") as HTMLInputElement).value)}>
                 <option value="0" key="0">All Chapters</option>
                 {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
                   <option value={e.id} key={i + 1}>{e.name}</option>
@@ -191,9 +191,9 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
         </div>
         <div id='profileboard-top'>
           <span><span>Map Name</span><img src={SortIcon} alt="" /></span>
-          <span style={{ justifyContent: 'center' }}><span>Portals</span><img src={SortIcon} alt="" /></span>
-          <span style={{ justifyContent: 'center' }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
-          <span style={{ justifyContent: 'center' }}><span>Time</span><img src={SortIcon} alt="" /></span>
+          <span style={{ justifyContent: "center" }}><span>Portals</span><img src={SortIcon} alt="" /></span>
+          <span style={{ justifyContent: "center" }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
+          <span style={{ justifyContent: "center" }}><span>Time</span><img src={SortIcon} alt="" /></span>
           <span> </span>
           <span><span>Rank</span><img src={SortIcon} alt="" /></span>
           <span><span>Date</span><img src={SortIcon} alt="" /></span>
@@ -208,7 +208,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                   });
                 }
               }}
-              ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
+              ><i className='triangle' style={{ position: "relative", left: "-5px", }}></i> </button>
               <span>{pageNumber}/{pageMax}</span>
               <button onClick={() => {
                 if (pageNumber !== pageMax) {
@@ -219,7 +219,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                   });
                 }
               }}
-              ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+              ><i className='triangle' style={{ position: "relative", left: "5px", transform: "rotate(180deg)" }}></i> </button>
             </div>
           </div>
         </div>
@@ -241,7 +241,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
 
                         <span style={{ display: "grid" }}>{e.score_count}</span>
 
-                        <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : `-`}</span>
+                        <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : "-"}</span>
                         <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
                         <span> </span>
                         {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
@@ -268,7 +268,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
               maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
                 .map((r, index) => {
                   if (Math.ceil((index + 1) / 20) === pageNumber) {
-                    let record = user.records.find((e) => e.map_id === r.id);
+                    const record = user.records.find((e) => e.map_id === r.id);
                     return record === undefined ? (
                       <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}>
                         <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
@@ -286,7 +286,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                           {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
                           <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
                           <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
-                          <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : `-`}</span>
+                          <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : "-"}</span>
                           <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
                           <span> </span>
                           {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}