refactor: port to typescript

72 files changed, 4268 insertions, 3549 deletions

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 65e35de..3b732f0 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,3 +1,20 @@
+main {

+    overflow: auto;

+    overflow-x: hidden;

+    position: relative;

+

+    width: calc(100% - 380px); 

+    height: 100vh;

+    left: 350px;

+

+    padding-right: 30px;

+

+    font-size: 40px;

+    font-family: BarlowSemiCondensed-Regular;

+    color: #cdcfdf;

+

+}

+

 body {

     overflow: hidden;

     background-color: #141520;

diff --git a/frontend/src/App.js b/frontend/src/App.js
deleted file mode 100644
index d96fa88..0000000
--- a/frontend/src/App.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';

-import { BrowserRouter, Routes, Route} from "react-router-dom";

-

-import Sidebar from "./components/sidebar.js"

-import Main from "./components/main.js"

-import "./App.css";

-

-import Summary from "./components/pages/summary.js"

-import Profile from "./components/pages/profile.js"

-import About from './components/pages/about.js';

-import Games from "./components/pages/games.js";

-import Maplist from './components/pages/maplist.js';

-import Home from "./components/pages/maplist.js";

-import Homepage from './components/pages/home.js';

-

-

-export default function App() {

-    const [token, setToken] = React.useState(null);

-    const [mod,setMod] = React.useState(false)

-    React.useEffect(()=>{

-        if(token!==null){

-            setMod(JSON.parse(atob(token.split(".")[1])).mod)

-        }

-    },[token])

-

-    return (

-        <>

-        <BrowserRouter>

-        <Sidebar token={token} setToken={setToken}/>

-        <Routes>

-            <Route index element={<Homepage token={token} mod={mod} setToken={setToken}/>}></Route>

-            <Route path="/news" element={<Main text="News"/>}></Route>

-            <Route path="/records" element={<Main text="Records"/>}></Route>

-            <Route path="/leaderboards" element={<Main text="Leaderboards"/>}></Route>

-            <Route path="/discussions" element={<Main text="Discussion"/>}></Route>

-            <Route path="/scorelog" element={<Main text="Score logs"/>}></Route>

-            <Route path="/profile" element={<Profile token={token}/>}></Route>

-            <Route path="/users/*" element={<Profile/>}></Route>

-            <Route path="/rules" element={<Main text="Rules"/>}></Route>

-            <Route path="/about" element={<About/>}></Route>

-            <Route path="/maps/*" element={<Summary token={token} mod={mod}/>}></Route>

-            <Route path="/games" element={<Games/>}></Route>

-            <Route path="/games/*" element={<Maplist token={token} mod={mod} />}></Route>

-            <Route path="*" element={<Main text="404 Page not found"/>}></Route>

-        </Routes>

-        </BrowserRouter>

-        </>

-    )

-}
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 0000000..555ce4c
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Routes, Route } from "react-router-dom";
+
+import { UserProfile } from './types/Profile';
+import Sidebar from './components/Sidebar';
+import "./App.css";
+
+import Profile from './pages/Profile';
+import Games from './pages/Games';
+import Maps from './pages/Maps';
+import User from './pages/User';
+
+
+const App: React.FC = () => {
+  const [token, setToken] = React.useState<string | undefined>(undefined);
+  const [profile, setProfile] = React.useState<UserProfile | undefined>(undefined);
+  const [isModerator, setIsModerator] = React.useState<boolean>(true);
+
+  // React.useEffect(() => {
+  //   if (token) {
+  //     setIsModerator(JSON.parse(atob(token.split(".")[1])).mod)
+  //   }
+  // }, [token]);
+
+  return (
+    <>
+      <Sidebar setToken={setToken} profile={profile} setProfile={setProfile} />
+      <Routes>
+        <Route path="/" element={<div>yo</div>} />
+        <Route path="/profile" element={<Profile profile={profile!} />} />
+        <Route path="/users/*" element={<User />} />
+        <Route path="/games" element={<Games />} />
+        <Route path="/maps/*" element={<Maps isModerator={isModerator} />} />
+        <Route path="*" element={"404"} />
+      </Routes>
+    </>
+  );
+};
+
+export default App;
diff --git a/frontend/src/api/Api.tsx b/frontend/src/api/Api.tsx
new file mode 100644
index 0000000..9e45bc4
--- /dev/null
+++ b/frontend/src/api/Api.tsx
@@ -0,0 +1,157 @@
+import axios from 'axios';
+
+import { Game } from '../types/Game';
+import { MapDiscussion, MapDiscussions, MapLeaderboard, MapSummary } from '../types/Map';
+import { MapDiscussionCommentContent, MapDiscussionContent, ModMenuContent } from '../types/Content';
+import { Search } from '../types/Search';
+import { UserProfile } from '../types/Profile';
+
+// add new api call function entries here
+// example usage: API.get_games();
+export const API = {
+  user_logout: () => user_logout(),
+
+  get_user: (user_id: string) => get_user(user_id),
+  get_games: () => get_games(),
+  get_search: (q: string) => get_search(q),
+  get_map_summary: (map_id: string) => get_map_summary(map_id),
+  get_map_leaderboard: (map_id: string) => get_map_leaderboard(map_id),
+  get_map_discussions: (map_id: string) => get_map_discussions(map_id),
+  get_map_discussion: (map_id: string, discussion_id: number) => get_map_discussion(map_id, discussion_id),
+
+  post_map_summary: (map_id: string, content: ModMenuContent) => post_map_summary(map_id, content),
+  post_map_discussion: (map_id: string, content: MapDiscussionContent) => post_map_discussion(map_id, content),
+  post_map_discussion_comment: (map_id: string, discussion_id: number, content: MapDiscussionCommentContent) => post_map_discussion_comment(map_id, discussion_id, content),
+
+  put_map_image: (map_id: string, image: string) => put_map_image(map_id, image),
+  put_map_summary: (map_id: string, content: ModMenuContent) => put_map_summary(map_id, content),
+
+  delete_map_summary: (map_id: string, route_id: number) => delete_map_summary(map_id, route_id),
+  delete_map_discussion: (map_id: string, discussion_id: number) => delete_map_discussion(map_id, discussion_id),
+};
+
+const BASE_API_URL: string = "https://lp.ardapektezol.com/api/v1/"
+
+function url(path: string): string {
+  return BASE_API_URL + path;
+}
+
+// USER
+
+const user_logout = async () => {
+  await axios.delete(url("token"));
+};
+
+const get_user = async (user_id: string): Promise<UserProfile> => {
+  const response = await axios.get(url(`users/${user_id}`))
+  return response.data.data;
+};
+
+
+// GAMES
+
+const get_games = async (): Promise<Game[]> => {
+  const response = await axios.get(url("games"))
+  return response.data.data;
+};
+
+// SEARCH
+
+const get_search = async (q: string): Promise<Search> => {
+  const response = await axios.get(url(`search?q=${q}`))
+  return response.data.data;
+};
+
+// MAP SUMMARY
+
+const put_map_image = async (map_id: string, image: string): Promise<boolean> => {
+  const response = await axios.put(url(`maps/${map_id}/image`), {
+    "image": image,
+  });
+  return response.data.success;
+};
+
+const get_map_summary = async (map_id: string): Promise<MapSummary> => {
+  const response = await axios.get(url(`maps/${map_id}/summary`))
+  return response.data.data;
+};
+
+const post_map_summary = async (map_id: string, content: ModMenuContent): Promise<boolean> => {
+  const response = await axios.post(url(`maps/${map_id}/summary`), {
+    "user_name": content.name,
+    "score_count": content.score,
+    "record_date": content.date,
+    "showcase": content.showcase,
+    "description": content.description,
+  });
+  return response.data.success;
+};
+
+const put_map_summary = async (map_id: string, content: ModMenuContent): Promise<boolean> => {
+  const response = await axios.put(url(`maps/${map_id}/summary`), {
+    "route_id": content.id,
+    "user_name": content.name,
+    "score_count": content.score,
+    "record_date": content.date,
+    "showcase": content.showcase,
+    "description": content.description,
+  });
+  return response.data.success;
+};
+
+const delete_map_summary = async (map_id: string, route_id: number): Promise<boolean> => {
+  const response = await axios.delete(url(`maps/${map_id}/summary`), {
+    data: {
+      "route_id": route_id,
+    }
+  });
+  return response.data.success;
+};
+
+// MAP LEADERBOARDS
+
+const get_map_leaderboard = async (map_id: string): Promise<MapLeaderboard | undefined> => {
+  const response = await axios.get(url(`maps/${map_id}/leaderboards`))
+  if (!response.data.success) {
+    return undefined;
+  }
+  return response.data.data;
+};
+
+// MAP DISCUSSIONS
+
+const get_map_discussions = async (map_id: string): Promise<MapDiscussions | undefined> => {
+  const response = await axios.get(url(`maps/${map_id}/discussions`));
+  if (!response.data.data.discussions) {
+    return undefined;
+  }
+  return response.data.data;
+};
+
+const get_map_discussion = async (map_id: string, discussion_id: number): Promise<MapDiscussion | undefined> => {
+  const response = await axios.get(url(`maps/${map_id}/discussions/${discussion_id}`));
+  if (!response.data.data.discussion) {
+    return undefined;
+  }
+  return response.data.data;
+};
+
+const post_map_discussion = async (map_id: string, content: MapDiscussionContent): Promise<boolean> => {
+  const response = await axios.post(url(`maps/${map_id}/discussions`), {
+    "title": content.title,
+    "content": content.content,
+  });
+  return response.data.success;
+};
+
+const post_map_discussion_comment = async (map_id: string, discussion_id: number, content: MapDiscussionCommentContent): Promise<boolean> => {
+  const response = await axios.post(url(`maps/${map_id}/discussions/${discussion_id}`), {
+    "comment": content.comment,
+  });
+  return response.data.success;
+};
+
+const delete_map_discussion = async (map_id: string, discussion_id: number): Promise<boolean> => {
+  const response = await axios.delete(url(`maps/${map_id}/discussions/${discussion_id}`));
+  return response.data.success;
+};
diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx
new file mode 100644
index 0000000..1cd3523
--- /dev/null
+++ b/frontend/src/components/Discussions.tsx
@@ -0,0 +1,151 @@
+import React from 'react';
+
+import { MapDiscussion, MapDiscussions, MapDiscussionsDetail } from '../types/Map';
+import { MapDiscussionCommentContent, MapDiscussionContent } from '../types/Content';
+import { time_ago } from '../utils/Time';
+import { API } from '../api/Api';
+import "../css/Maps.css"
+
+interface DiscussionsProps {
+  data?: MapDiscussions;
+  isModerator: boolean;
+  mapID: string;
+  onRefresh: () => void;
+}
+
+const Discussions: React.FC<DiscussionsProps> = ({ data, isModerator, mapID, onRefresh }) => {
+
+  const [discussionThread, setDiscussionThread] = React.useState<MapDiscussion | undefined>(undefined);
+  const [discussionSearch, setDiscussionSearch] = React.useState<string>("");
+
+  const [createDiscussion, setCreateDiscussion] = React.useState<boolean>(false);
+  const [createDiscussionContent, setCreateDiscussionContent] = React.useState<MapDiscussionContent>({
+    title: "",
+    content: "",
+  });
+  const [createDiscussionCommentContent, setCreateDiscussionCommentContent] = React.useState<MapDiscussionCommentContent>({
+    comment: "",
+  });
+
+  const _open_map_discussion = async (discussion_id: number) => {
+    const mapDiscussion = await API.get_map_discussion(mapID, discussion_id);
+    setDiscussionThread(mapDiscussion);
+  };
+
+  const _create_map_discussion = async () => {
+    await API.post_map_discussion(mapID, createDiscussionContent);
+    setCreateDiscussion(false);
+    onRefresh();
+  };
+
+  const _create_map_discussion_comment = async (discussion_id: number) => {
+    await API.post_map_discussion_comment(mapID, discussion_id, createDiscussionCommentContent);
+    await _open_map_discussion(discussion_id);
+  };
+
+  const _delete_map_discussion = async (discussion: MapDiscussionsDetail) => {
+    if (window.confirm(`Are you sure you want to remove post: ${discussion.title}?`)) {
+      await API.delete_map_discussion(mapID, discussion.id);
+      onRefresh();
+    }
+  };
+
+  return (
+    <section id='section7' className='summary3'>
+      <div id='discussion-search'>
+        <input type="text" value={discussionSearch} placeholder={"Search for posts..."} onChange={(e) => setDiscussionSearch(e.target.value)} />
+        <div><button onClick={() => setCreateDiscussion(true)}>New Post</button></div>
+      </div>
+
+      { // janky ternary operators here, could divide them to more components?
+        createDiscussion ?
+          (
+            <div id='discussion-create'>
+              <span>Create Post</span>
+              <button onClick={() => setCreateDiscussion(false)}>X</button>
+              <div style={{ gridColumn: "1 / span 2" }}>
+                <input id='discussion-create-title' placeholder='Title...' onChange={(e) => setCreateDiscussionContent({
+                  ...createDiscussionContent,
+                  title: e.target.value,
+                })} />
+                <input id='discussion-create-content' placeholder='Enter the comment...' onChange={(e) => setCreateDiscussionContent({
+                  ...createDiscussionContent,
+                  title: e.target.value,
+                })} />
+              </div>
+              <div style={{ placeItems: "end", gridColumn: "1 / span 2" }}>
+                <button id='discussion-create-button' onClick={() => _create_map_discussion()}>Post</button>
+              </div>
+            </div>
+          )
+          :
+          discussionThread ?
+            (
+              <div id='discussion-thread'>
+                <div>
+                  <span>{discussionThread.discussion.title}</span>
+                  <button onClick={() => setDiscussionThread(undefined)}>X</button>
+                </div>
+
+                <div>
+                  <img src={discussionThread.discussion.creator.avatar_link} alt="" />
+                  <div>
+                    <span>{discussionThread.discussion.creator.user_name}</span>
+                    <span>{time_ago(new Date(discussionThread.discussion.created_at.replace("T", " ").replace("Z", "")))}</span>
+                    <span>{discussionThread.discussion.content}</span>
+                  </div>
+                  {discussionThread.discussion.comments ?
+                    discussionThread.discussion.comments.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+                      .map(e => (
+                        <>
+                          <img src={e.user.avatar_link} alt="" />
+                          <div>
+                            <span>{e.user.user_name}</span>
+                            <span>{time_ago(new Date(e.date.replace("T", " ").replace("Z", "")))}</span>
+                            <span>{e.comment}</span>
+                          </div>
+                        </>
+                      )) : ""
+                  }
+                </div>
+                <div id='discussion-send'>
+                  <input type="text" placeholder={"Message"} onKeyDown={(e) => e.key === "Enter" && _create_map_discussion_comment(discussionThread.discussion.id)} onChange={(e) => setCreateDiscussionCommentContent({
+                    ...createDiscussionContent,
+                    comment: e.target.value,
+                  })} />
+                  <div><button onClick={() => _create_map_discussion_comment(discussionThread.discussion.id)}>Send</button></div>
+                </div>
+
+              </div>
+            )
+            :
+            (
+              data ?
+                (<>
+                  {data.discussions.filter(f => f.title.includes(discussionSearch)).sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
+                    .map((e, i) => (
+                      <div id='discussion-post'>
+                        <button key={e.id} onClick={() => _open_map_discussion(e.id)}>
+                          <span>{e.title}</span>
+                          {isModerator ?
+                            <button onClick={(m) => {
+                              m.stopPropagation();
+                              _delete_map_discussion(e);
+                            }}>Delete Post</button>
+                            : <span></span>
+                          }
+                          <span><b>{e.creator.user_name}:</b> {e.content}</span>
+                          <span>Last Updated: {time_ago(new Date(e.updated_at.replace("T", " ").replace("Z", "")))}</span>
+                        </button>
+                      </div>
+                    ))}
+                </>)
+                :
+                (<span style={{ textAlign: "center", display: "block" }}>No Discussions...</span>)
+            )
+      }
+    </section>
+  );
+};
+
+export default Discussions;
diff --git a/frontend/src/components/GameEntry.tsx b/frontend/src/components/GameEntry.tsx
new file mode 100644
index 0000000..8e58ce9
--- /dev/null
+++ b/frontend/src/components/GameEntry.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+
+import { Game } from '../types/Game';
+import "../css/Games.css"
+
+interface GameEntryProps {
+  game: Game;
+}
+
+const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
+
+  React.useEffect(() => {
+    game.category_portals.forEach(catInfo => {
+      const itemBody = document.createElement("div");
+      const itemTitle = document.createElement("span");
+      const spacing = document.createElement("br");
+      const itemNum = document.createElement("span");
+
+      itemTitle.innerText = catInfo.category.name;
+      itemNum.innerText = catInfo.portal_count as any as string;
+      itemTitle.classList.add("games-page-item-body-item-title");
+      itemNum.classList.add("games-page-item-body-item-num");
+      itemBody.appendChild(itemTitle);
+      itemBody.appendChild(spacing);
+      itemBody.appendChild(itemNum);
+      itemBody.className = "games-page-item-body-item";
+
+      // itemBody.innerHTML = `
+      //             <span className='games-page-item-body-item-title'>${catInfo.category.name}</span><br />
+      //             <span className='games-page-item-body-item-num'>${catInfo.portal_count}</span>`
+
+      document.getElementById(`${game.id}`)!.appendChild(itemBody);
+    });
+  }, []);
+
+  return (
+    <Link to={"/games/" + game.id}><div className='games-page-item'>
+      <div className='games-page-item-header'>
+        <div style={{ backgroundImage: `url(${game.image})` }} className='games-page-item-header-img'></div>
+        <span><b>{game.name}</b></span>
+      </div>
+      <div id={game.id as any as string} className='games-page-item-body'>
+      </div>
+    </div></Link>
+  );
+};
+
+export default GameEntry;
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
new file mode 100644
index 0000000..badff37
--- /dev/null
+++ b/frontend/src/components/Leaderboards.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+
+import { DownloadIcon, ThreedotIcon } from '../images/Images';
+import { MapLeaderboard } from '../types/Map';
+import { ticks_to_time, time_ago } from '../utils/Time';
+import "../css/Maps.css"
+
+interface LeaderboardsProps {
+  data?: MapLeaderboard;
+}
+
+const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
+
+  const [pageNumber, setPageNumber] = React.useState<number>(1);
+
+  if (!data) {
+    return (
+      <section id='section6' className='summary2'>
+        <h1 style={{ textAlign: "center" }}>Map is not available for competitive boards.</h1>
+      </section>
+    );
+  };
+
+  if (data.records.length === 0) {
+    return (
+      <section id='section6' className='summary2'>
+        <h1 style={{ textAlign: "center" }}>No records found.</h1>
+      </section>
+    );
+  };
+
+  return (
+    <section id='section6' className='summary2'>
+
+      <div id='leaderboard-top'
+        style={data.map.is_coop ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" } : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }}
+      >
+        <span>Place</span>
+
+        {data.map.is_coop ? (
+          <div id='runner'>
+            <span>Host</span>
+            <span>Partner</span>
+          </div>
+        ) : (
+          <span>Runner</span>
+        )}
+
+        <span>Portals</span>
+        <span>Time</span>
+        <span>Date</span>
+        <div id='page-number'>
+          <div>
+
+            <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
+            ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
+            <span>{data.pagination.current_page}/{data.pagination.total_pages}</span>
+            <button onClick={() => pageNumber === data.pagination.total_pages ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
+            ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+          </div>
+        </div>
+      </div>
+      <hr />
+      <div id='leaderboard-records'>
+        {data.records.map((r, index) => (
+          <span className='leaderboard-record' key={index}
+            style={data.map.is_coop ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" } : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" }}
+          >
+            <span>{r.placement}</span>
+            <span> </span>
+            {r.kind === "multiplayer" ? (
+              <div>
+                <span><img src={r.host.avatar_link} alt='' /> &nbsp; {r.host.user_name}</span>
+                <span><img src={r.partner.avatar_link} alt='' /> &nbsp; {r.partner.user_name}</span>
+              </div>
+            ) : (
+              <div><span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span></div>
+            )}
+
+            <span>{r.score_count}</span>
+            <span> </span>
+            <span className='hover-popup' popup-text={(r.score_time) + " ticks"}>{ticks_to_time(r.score_time)}</span>
+            <span className='hover-popup' popup-text={r.record_date.replace("T", ' ').split(".")[0]}>{time_ago(new Date(r.record_date.replace("T", " ").replace("Z", "")))}</span>
+
+            {r.kind === "multiplayer" ? (
+              <span>
+                <button onClick={() => { window.alert(`Host demo ID: ${r.host_demo_id} \nParnter demo ID: ${r.partner_demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                <button onClick={() => window.location.href = `https://lp.ardapektezol.com/api/v1/demos?uuid=${r.partner_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(160deg) contrast(60%) saturate(1000%)" }} /></button>
+                <button onClick={() => window.location.href = `https://lp.ardapektezol.com/api/v1/demos?uuid=${r.host_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(300deg) contrast(60%) saturate(1000%)" }} /></button>
+              </span>
+            ) : (
+
+              <span>
+                <button onClick={() => { window.alert(`Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                <button onClick={() => window.location.href = `https://lp.ardapektezol.com/api/v1/demos?uuid=${r.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+              </span>
+            )}
+          </span>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Leaderboards;
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
new file mode 100644
index 0000000..adfa718
--- /dev/null
+++ b/frontend/src/components/Login.tsx
@@ -0,0 +1,1931 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+import { ExitIcon, UserIcon, LoginIcon } from '../images/Images';
+import { UserProfile } from '../types/Profile';
+import { API } from '../api/Api';
+import "../css/Login.css";
+
+interface LoginProps {
+  token?: string;
+  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
+  profile?: UserProfile;
+  setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
+};
+
+const Login: React.FC<LoginProps> = ({ token, setToken, profile, setProfile }) => {
+
+  const navigate = useNavigate();
+
+  const _logout = () => {
+    setProfile(undefined);
+    setToken(undefined);
+    API.user_logout();
+    navigate("/");
+  }
+
+  return (
+    <>
+      {profile
+        ?
+        (
+          <>
+            <Link to="/profile" tabIndex={-1} className='login'>
+              <button className='sidebar-button'>
+                <img src={profile.avatar_link} alt="" />
+                <span>{profile.user_name}</span>
+              </button>
+              <button className='sidebar-button' onClick={_logout}>
+                <img src={ExitIcon} alt="" /><span></span>
+              </button>
+            </Link>
+          </>
+        )
+        :
+        (
+          <Link to="/api/v1/login" tabIndex={-1} className='login' >
+            <button className='sidebar-button' onClick={() => {
+              setProfile({
+                "profile": true,
+                "steam_id": "76561198131629989",
+                "user_name": "BiSaXa",
+                "avatar_link": "https://avatars.steamstatic.com/fa7f64c79b247c8a80cafbd6dd8033b98cc1153c_full.jpg",
+                "country_code": "TR",
+                "titles": [
+                  {
+                    "name": "Admin",
+                    "color": "ce6000"
+                  },
+                  {
+                    "name": "Moderator",
+                    "color": "4a8b00"
+                  }
+                ],
+                "links": {
+                  "p2sr": "-",
+                  "steam": "-",
+                  "youtube": "-",
+                  "twitch": "-"
+                },
+                "rankings": {
+                  "overall": {
+                    "rank": 1,
+                    "completion_count": 4,
+                    "completion_total": 105
+                  },
+                  "singleplayer": {
+                    "rank": 1,
+                    "completion_count": 3,
+                    "completion_total": 57
+                  },
+                  "cooperative": {
+                    "rank": 1,
+                    "completion_count": 1,
+                    "completion_total": 48
+                  }
+                },
+                "records": [
+                  {
+                    "game_id": 1,
+                    "category_id": 1,
+                    "map_id": 3,
+                    "map_name": "Portal Gun",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 350,
+                        "demo_id": "e9ec0b83-7b95-4fa9-b974-2245fb79d5ca",
+                        "score_count": 0,
+                        "score_time": 3968,
+                        "date": "2023-09-23T14:57:35.430781Z"
+                      },
+                      {
+                        "record_id": 282,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 1,
+                    "map_id": 4,
+                    "map_name": "Smooth Jazz",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 283,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 1,
+                    "map_id": 5,
+                    "map_name": "Cube Momentum",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 284,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 1,
+                    "map_id": 6,
+                    "map_name": "Future Starter",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 351,
+                        "demo_id": "d5ee2227-e195-4e8d-bd1d-746b17538df7",
+                        "score_count": 2,
+                        "score_time": 71378,
+                        "date": "2023-09-23T15:11:16.579757Z"
+                      },
+                      {
+                        "record_id": 285,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 1,
+                    "map_id": 7,
+                    "map_name": "Secret Panel",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 352,
+                        "demo_id": "64ca612d-4586-40df-9cf3-850c270b5592",
+                        "score_count": 0,
+                        "score_time": 10943,
+                        "date": "2023-09-23T15:19:15.413596Z"
+                      },
+                      {
+                        "record_id": 286,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 1,
+                    "map_id": 9,
+                    "map_name": "Incinerator",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 287,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 2,
+                    "map_id": 10,
+                    "map_name": "Laser Intro",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 288,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 2,
+                    "map_id": 11,
+                    "map_name": "Laser Stairs",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 289,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 2,
+                    "map_id": 12,
+                    "map_name": "Dual Lasers",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 290,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 2,
+                    "map_id": 13,
+                    "map_name": "Laser Over Goo",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 291,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 2,
+                    "map_id": 14,
+                    "map_name": "Catapult Intro",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 338,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 2,
+                    "map_id": 15,
+                    "map_name": "Trust Fling",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 292,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 2,
+                    "map_id": 16,
+                    "map_name": "Pit Flings",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 293,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 2,
+                    "map_id": 17,
+                    "map_name": "Fizzler Intro",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 294,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 3,
+                    "map_id": 18,
+                    "map_name": "Ceiling Catapult",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 295,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 3,
+                    "map_id": 19,
+                    "map_name": "Ricochet",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 296,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 3,
+                    "map_id": 20,
+                    "map_name": "Bridge Intro",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 297,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 3,
+                    "map_id": 21,
+                    "map_name": "Bridge The Gap",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 298,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 3,
+                    "map_id": 22,
+                    "map_name": "Turret Intro",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 299,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 3,
+                    "map_id": 23,
+                    "map_name": "Laser Relays",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 300,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 3,
+                    "map_id": 24,
+                    "map_name": "Turret Blocker",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 301,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 3,
+                    "map_id": 25,
+                    "map_name": "Laser vs Turret",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 302,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 3,
+                    "map_id": 26,
+                    "map_name": "Pull The Rug",
+                    "map_wr_count": 0,
+                    "placement": 2,
+                    "scores": [
+                      {
+                        "record_id": 303,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 4,
+                    "map_id": 27,
+                    "map_name": "Column Blocker",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 304,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 4,
+                    "map_id": 28,
+                    "map_name": "Laser Chaining",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 305,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 4,
+                    "map_id": 29,
+                    "map_name": "Triple Laser",
+                    "map_wr_count": 0,
+                    "placement": 2,
+                    "scores": [
+                      {
+                        "record_id": 337,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 4,
+                    "map_id": 30,
+                    "map_name": "Jail Break",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 306,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 4,
+                    "map_id": 31,
+                    "map_name": "Escape",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 307,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 5,
+                    "map_id": 32,
+                    "map_name": "Turret Factory",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 308,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 5,
+                    "map_id": 33,
+                    "map_name": "Turret Sabotage",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 309,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 5,
+                    "map_id": 34,
+                    "map_name": "Neurotoxin Sabotage",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 310,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 5,
+                    "map_id": 35,
+                    "map_name": "Core",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 311,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 6,
+                    "map_id": 36,
+                    "map_name": "Underground",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 353,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 6,
+                    "map_id": 37,
+                    "map_name": "Cave Johnson",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 313,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 6,
+                    "map_id": 38,
+                    "map_name": "Repulsion Intro",
+                    "map_wr_count": 0,
+                    "placement": 2,
+                    "scores": [
+                      {
+                        "record_id": 314,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 6,
+                    "map_id": 39,
+                    "map_name": "Bomb Flings",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 315,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 6,
+                    "map_id": 40,
+                    "map_name": "Crazy Box",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 316,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 6,
+                    "map_id": 41,
+                    "map_name": "PotatOS",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 317,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 7,
+                    "map_id": 42,
+                    "map_name": "Propulsion Intro",
+                    "map_wr_count": 0,
+                    "placement": 2,
+                    "scores": [
+                      {
+                        "record_id": 362,
+                        "demo_id": "51453c2b-79a4-4fab-81bf-442cbbc997d6",
+                        "score_count": 3,
+                        "score_time": 856,
+                        "date": "2023-11-06T15:45:52.867581Z"
+                      },
+                      {
+                        "record_id": 318,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 7,
+                    "map_id": 43,
+                    "map_name": "Propulsion Flings",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 319,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 7,
+                    "map_id": 44,
+                    "map_name": "Conversion Intro",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 320,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 7,
+                    "map_id": 45,
+                    "map_name": "Three Gels",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 321,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 46,
+                    "map_name": "Test",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 322,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 47,
+                    "map_name": "Funnel Intro",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 323,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 48,
+                    "map_name": "Ceiling Button",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 324,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 49,
+                    "map_name": "Wall Button",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 325,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 50,
+                    "map_name": "Polarity",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 326,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 51,
+                    "map_name": "Funnel Catch",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 327,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 52,
+                    "map_name": "Stop The Box",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 328,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 53,
+                    "map_name": "Laser Catapult",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 329,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 54,
+                    "map_name": "Laser Platform",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 330,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 55,
+                    "map_name": "Propulsion Catch",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 331,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 8,
+                    "map_id": 56,
+                    "map_name": "Repulsion Polarity",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 332,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 9,
+                    "map_id": 57,
+                    "map_name": "Finale 1",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 333,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 9,
+                    "map_id": 58,
+                    "map_name": "Finale 2",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 334,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 9,
+                    "map_id": 59,
+                    "map_name": "Finale 3",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 335,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 1,
+                    "category_id": 9,
+                    "map_id": 60,
+                    "map_name": "Finale 4",
+                    "map_wr_count": 1,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 336,
+                        "demo_id": "27b3a03e-56a3-4df3-b9bf-448fc0cbf1e7",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:09:11.602056Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 11,
+                    "map_id": 63,
+                    "map_name": "Doors",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 5,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 11,
+                    "map_id": 64,
+                    "map_name": "Buttons",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 6,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 11,
+                    "map_id": 65,
+                    "map_name": "Lasers",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 7,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 11,
+                    "map_id": 66,
+                    "map_name": "Rat Maze",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 8,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 11,
+                    "map_id": 67,
+                    "map_name": "Laser Crusher",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 9,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 11,
+                    "map_id": 68,
+                    "map_name": "Behind The Scenes",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 10,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 12,
+                    "map_id": 69,
+                    "map_name": "Flings",
+                    "map_wr_count": 4,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 11,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 12,
+                    "map_id": 70,
+                    "map_name": "Infinifling",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 12,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 12,
+                    "map_id": 71,
+                    "map_name": "Team Retrieval",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 13,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 12,
+                    "map_id": 72,
+                    "map_name": "Vertical Flings",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 14,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 12,
+                    "map_id": 73,
+                    "map_name": "Catapults",
+                    "map_wr_count": 4,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 15,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 12,
+                    "map_id": 74,
+                    "map_name": "Multifling",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 16,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 12,
+                    "map_id": 75,
+                    "map_name": "Fling Crushers",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 17,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 12,
+                    "map_id": 76,
+                    "map_name": "Industrial Fan",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 18,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 13,
+                    "map_id": 77,
+                    "map_name": "Cooperative Bridges",
+                    "map_wr_count": 3,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 19,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 13,
+                    "map_id": 78,
+                    "map_name": "Bridge Swap",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 20,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 13,
+                    "map_id": 79,
+                    "map_name": "Fling Block",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 4,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 0,
+                        "score_time": 43368,
+                        "date": "2023-08-30T13:16:56.91335Z"
+                      },
+                      {
+                        "record_id": 21,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 13,
+                    "map_id": 80,
+                    "map_name": "Catapult Block",
+                    "map_wr_count": 4,
+                    "placement": 2,
+                    "scores": [
+                      {
+                        "record_id": 22,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 13,
+                    "map_id": 81,
+                    "map_name": "Bridge Fling",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 23,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 13,
+                    "map_id": 82,
+                    "map_name": "Turret Walls",
+                    "map_wr_count": 4,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 24,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 13,
+                    "map_id": 83,
+                    "map_name": "Turret Assasin",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 25,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 13,
+                    "map_id": 84,
+                    "map_name": "Bridge Testing",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 26,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 14,
+                    "map_id": 85,
+                    "map_name": "Cooperative Funnels",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 27,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 14,
+                    "map_id": 86,
+                    "map_name": "Funnel Drill",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 28,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 14,
+                    "map_id": 87,
+                    "map_name": "Funnel Catch",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 29,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 14,
+                    "map_id": 88,
+                    "map_name": "Funnel Laser",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 30,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 14,
+                    "map_id": 89,
+                    "map_name": "Cooperative Polarity",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 31,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 14,
+                    "map_id": 90,
+                    "map_name": "Funnel Hop",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 32,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 14,
+                    "map_id": 91,
+                    "map_name": "Advanced Polarity",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 33,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 14,
+                    "map_id": 92,
+                    "map_name": "Funnel Maze",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 34,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 14,
+                    "map_id": 93,
+                    "map_name": "Turret Warehouse",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 35,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 15,
+                    "map_id": 94,
+                    "map_name": "Repulsion Jumps",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 36,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 15,
+                    "map_id": 95,
+                    "map_name": "Double Bounce",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 37,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 15,
+                    "map_id": 96,
+                    "map_name": "Bridge Repulsion",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 38,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 15,
+                    "map_id": 97,
+                    "map_name": "Wall Repulsion",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 39,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 15,
+                    "map_id": 98,
+                    "map_name": "Propulsion Crushers",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 40,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 15,
+                    "map_id": 99,
+                    "map_name": "Turret Ninja",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 41,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 15,
+                    "map_id": 100,
+                    "map_name": "Propulsion Retrieval",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 42,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 15,
+                    "map_id": 101,
+                    "map_name": "Vault Entrance",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 43,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 16,
+                    "map_id": 102,
+                    "map_name": "Separation",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 44,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 16,
+                    "map_id": 103,
+                    "map_name": "Triple Axis",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 45,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 16,
+                    "map_id": 104,
+                    "map_name": "Catapult Catch",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 46,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 16,
+                    "map_id": 105,
+                    "map_name": "Bridge Gels",
+                    "map_wr_count": 2,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 47,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 16,
+                    "map_id": 106,
+                    "map_name": "Maintenance",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 48,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 16,
+                    "map_id": 107,
+                    "map_name": "Bridge Catch",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 49,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 16,
+                    "map_id": 108,
+                    "map_name": "Double Lift",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 50,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 16,
+                    "map_id": 109,
+                    "map_name": "Gel Maze",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 51,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  },
+                  {
+                    "game_id": 2,
+                    "category_id": 16,
+                    "map_id": 110,
+                    "map_name": "Crazier Box",
+                    "map_wr_count": 0,
+                    "placement": 1,
+                    "scores": [
+                      {
+                        "record_id": 52,
+                        "demo_id": "b8d6adc2-d8b7-41e4-8faf-63f246d910cd",
+                        "score_count": 31,
+                        "score_time": 9999,
+                        "date": "2023-09-03T19:12:05.958456Z"
+                      }
+                    ]
+                  }
+                ],
+                "pagination": {
+                  "total_records": 0,
+                  "total_pages": 0,
+                  "current_page": 0,
+                  "page_size": 0
+                }
+
+              }
+
+              )
+            }}>
+              <img src={UserIcon} alt="" />
+              <span>
+                <img src={LoginIcon} alt="Sign in through Steam" />
+              </span>
+            </button>
+          </Link>
+        )}
+    </>
+  );
+};
+
+export default Login;
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx
new file mode 100644
index 0000000..1fe4239
--- /dev/null
+++ b/frontend/src/components/ModMenu.tsx
@@ -0,0 +1,324 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { MapSummary } from '../types/Map';
+import { ModMenuContent } from '../types/Content';
+import { API } from '../api/Api';
+import "../css/ModMenu.css"
+
+interface ModMenuProps {
+  data: MapSummary;
+  selectedRun: number;
+  mapID: string;
+}
+
+const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => {
+
+  const [menu, setMenu] = React.useState<number>(0);
+  const [showButton, setShowButton] = React.useState(1)
+
+  const [routeContent, setRouteContent] = React.useState<ModMenuContent>({
+    id: 0,
+    name: "",
+    score: 0,
+    date: "",
+    showcase: "",
+    description: "No description available.",
+    category_id: 1,
+  });
+
+  const [image, setImage] = React.useState<string>("");
+  const [md, setMd] = React.useState<string>("");
+
+  function compressImage(file: File): Promise<string> {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    return new Promise(resolve => {
+      reader.onload = () => {
+        const img = new Image();
+        if (typeof reader.result === "string") {
+          img.src = reader.result;
+          img.onload = () => {
+            let { width, height } = img;
+            if (width > 550) {
+              height *= 550 / width;
+              width = 550;
+            }
+            if (height > 320) {
+              width *= 320 / height;
+              height = 320;
+            }
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            canvas.getContext('2d')!.drawImage(img, 0, 0, width, height);
+            resolve(canvas.toDataURL(file.type, 0.6));
+          };
+        }
+      };
+    });
+  };
+
+  const _edit_map_summary_image = async () => {
+    if (window.confirm("Are you sure you want to submit this to the database?")) {
+      await API.put_map_image(mapID, image);
+    }
+  };
+
+  const _edit_map_summary_route = async () => {
+    if (window.confirm("Are you sure you want to submit this to the database?")) {
+      await API.put_map_summary(mapID, routeContent);
+    }
+  };
+
+  const _create_map_summary_route = async () => {
+    if (window.confirm("Are you sure you want to submit this to the database?")) {
+      await API.post_map_summary(mapID, routeContent);
+    }
+  };
+
+  const _delete_map_summary_route = async () => {
+    if (window.confirm(`Are you sure you want to delete this run from the database?
+      ${data.summary.routes[selectedRun].category.name}    ${data.summary.routes[selectedRun].history.score_count} portals    ${data.summary.routes[selectedRun].history.runner_name}`)) {
+      await API.delete_map_summary(mapID, data.summary.routes[selectedRun].route_id);
+    }
+  };
+
+  React.useEffect(() => {
+    if (menu === 3) { // add route
+      setRouteContent({
+        id: 0,
+        name: "",
+        score: 0,
+        date: "",
+        showcase: "",
+        description: "No description available.",
+        category_id: 1,
+      });
+      setMd("No description available.");
+    }
+    if (menu === 2) { // edit route
+      setRouteContent({
+        id: data.summary.routes[selectedRun].route_id,
+        name: data.summary.routes[selectedRun].history.runner_name,
+        score: data.summary.routes[selectedRun].history.score_count,
+        date: data.summary.routes[selectedRun].history.date.split("T")[0],
+        showcase: data.summary.routes[selectedRun].showcase,
+        description: data.summary.routes[selectedRun].description,
+        category_id: data.summary.routes[selectedRun].category.id,
+      });
+      setMd(data.summary.routes[selectedRun].description);
+    }
+  }, [menu]);
+
+  React.useEffect(() => {
+    const modview = document.querySelector("div#modview") as HTMLElement
+    if (modview) {
+      showButton ? modview.style.transform = "translateY(-68%)"
+        : modview.style.transform = "translateY(0%)"
+    }
+
+    const modview_block = document.querySelector("#modview_block") as HTMLElement
+    if (modview_block) {
+      showButton === 1 ? modview_block.style.display = "none" : modview_block.style.display = "block"// eslint-disable-next-line 
+    }
+  }, [showButton])
+
+  return (
+    <div id="modview_bdlock">
+
+      <div id='modview'>
+        <div>
+          <button onClick={() => setMenu(1)}>Edit Image</button>
+          <button onClick={() => setMenu(2)}>Edit Selected Route</button>
+          <button onClick={() => setMenu(3)}>Add New Route</button>
+          <button onClick={() => _delete_map_summary_route()}>Delete Selected Route</button>
+        </div>
+        <div>
+          {showButton ? (
+            <button onClick={() => setShowButton(0)}>Show</button>
+          ) : (
+            <button onClick={() => { setShowButton(1); setMenu(0) }}>Hide</button>
+          )}
+        </div>
+      </div>
+
+      <div id='modview-menu'>
+        { // Edit Image
+          menu === 1 && (
+            <div id='modview-menu-image'>
+              <div>
+                <span>Current Image:</span>
+                <img src={data.map.image} alt="missing" />
+              </div>
+
+              <div>
+                <span>New Image:
+                  <input type="file" accept='image/*' onChange={e => {
+                    if (e.target.files) {
+                      compressImage(e.target.files[0])
+                        .then(d => setImage(d))
+                    }
+                  }
+                  } /></span>
+                {image ? (<button onClick={() => _edit_map_summary_image()}>upload</button>) : <span></span>}
+                <img src={image} alt="" id='modview-menu-image-file' />
+
+              </div>
+            </div>
+          )
+        }
+
+        { // Edit Route
+          menu === 2 && (
+            <div id='modview-menu-edit'>
+              <div id='modview-route-id'>
+                <span>Route ID:</span>
+                <input type="number" value={routeContent.id} disabled />
+              </div>
+              <div id='modview-route-name'>
+                <span>Runner Name:</span>
+                <input type="text" value={routeContent.name} onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    name: e.target.value,
+                  });
+                }} />
+              </div>
+              <div id='modview-route-score'>
+                <span>Score:</span>
+                <input type="number" value={routeContent.score} onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    score: parseInt(e.target.value),
+                  });
+                }} />
+              </div>
+              <div id='modview-route-date'>
+                <span>Date:</span>
+                <input type="date" value={routeContent.date} onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    date: e.target.value,
+                  });
+                }} />
+              </div>
+              <div id='modview-route-showcase'>
+                <span>Showcase Video:</span>
+                <input type="text" value={routeContent.showcase} onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    showcase: e.target.value,
+                  });
+                }} />
+              </div>
+              <div id='modview-route-description' style={{ height: "180px", gridColumn: "1 / span 5" }}>
+                <span>Description:</span>
+                <textarea value={routeContent.description} onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    description: e.target.value,
+                  });
+                  setMd(routeContent.description);
+                }} />
+              </div>
+              <button style={{ gridColumn: "2 / span 3", height: "40px" }} onClick={_edit_map_summary_route}>Apply</button>
+
+              <div id='modview-md'>
+                <span>Markdown Preview</span>
+                <span><a href="https://commonmark.org/help/" rel="noreferrer" target='_blank'>Documentation</a></span>
+                <span><a href="https://remarkjs.github.io/react-markdown/" rel="noreferrer" target='_blank'>Demo</a></span>
+                <p>
+                  <ReactMarkdown>{md}
+                  </ReactMarkdown>
+                </p>
+              </div>
+            </div>
+          )
+        }
+
+        { // Add Route
+          menu === 3 && (
+            <div id='modview-menu-add'>
+              <div id='modview-route-category'>
+                <span>Category:</span>
+                <select onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    category_id: parseInt(e.target.value),
+                  });
+                }}>
+                  <option value="1" key="1">CM</option>
+                  <option value="2" key="2">No SLA</option>
+                  {data.map.game_name === "Portal 2 - Cooperative" ? "" : (
+                    <option value="3" key="3">Inbounds SLA</option>)}
+                  <option value="4" key="4">Any%</option>
+                </select>
+              </div>
+              <div id='modview-route-name'>
+                <span>Runner Name:</span>
+                <input type="text" value={routeContent.name} onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    name: e.target.value,
+                  });
+                }} />
+              </div>
+              <div id='modview-route-score'>
+                <span>Score:</span>
+                <input type="number" value={routeContent.score} onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    score: parseInt(e.target.value),
+                  });
+                }} />
+              </div>
+              <div id='modview-route-date'>
+                <span>Date:</span>
+                <input type="date" value={routeContent.date} onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    date: e.target.value,
+                  });
+                }} />
+              </div>
+              <div id='modview-route-showcase'>
+                <span>Showcase Video:</span>
+                <input type="text" value={routeContent.showcase} onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    showcase: e.target.value,
+                  });
+                }} />
+              </div>
+              <div id='modview-route-description' style={{ height: "180px", gridColumn: "1 / span 5" }}>
+                <span>Description:</span>
+                <textarea value={routeContent.description} onChange={(e) => {
+                  setRouteContent({
+                    ...routeContent,
+                    description: e.target.value,
+                  });
+                  setMd(routeContent.description);
+                }} />
+              </div>
+              <button style={{ gridColumn: "2 / span 3", height: "40px" }} onClick={_create_map_summary_route}>Apply</button>
+
+              <div id='modview-md'>
+                <span>Markdown preview</span>
+                <span><a href="https://commonmark.org/help/" rel="noreferrer" target='_blank'>documentation</a></span>
+                <span><a href="https://remarkjs.github.io/react-markdown/" rel="noreferrer" target='_blank'>demo</a></span>
+                <p>
+                  <ReactMarkdown>{md}
+                  </ReactMarkdown>
+                </p>
+              </div>
+            </div>
+          )
+        }
+      </div>
+
+    </div>
+  );
+};
+
+export default ModMenu;
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
new file mode 100644
index 0000000..a8834b6
--- /dev/null
+++ b/frontend/src/components/Sidebar.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, NewsIcon, PortalIcon, SearchIcon, TableIcon } from '../images/Images';
+import Login from './Login';
+import { UserProfile } from '../types/Profile';
+import { Search } from '../types/Search';
+import { API } from '../api/Api';
+import "../css/Sidebar.css";
+
+interface SidebarProps {
+  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
+  profile?: UserProfile;
+  setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
+};
+
+const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile }) => {
+
+  const [searchData, setSearchData] = React.useState<Search | undefined>(undefined);
+  const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false);
+  const [isSidebarOpen, setSidebarOpen] = React.useState<boolean>(true);
+
+  const location = useLocation();
+  const path = location.pathname;
+
+  const handle_sidebar_click = (clicked_sidebar_idx: number) => {
+    const btn = document.querySelectorAll("button.sidebar-button");
+    if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide() }
+    // clusterfuck
+    btn.forEach((e, i) => {
+      btn[i].classList.remove("sidebar-button-selected")
+      btn[i].classList.add("sidebar-button-deselected")
+    })
+    btn[clicked_sidebar_idx].classList.add("sidebar-button-selected")
+    btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected")
+  };
+
+  const _handle_sidebar_hide = () => {
+    var btn = document.querySelectorAll("button.sidebar-button") as NodeListOf<HTMLElement>
+    const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf<HTMLElement>
+    const side = document.querySelector("#sidebar-list") as HTMLElement;
+    const searchbar = document.querySelector("#searchbar") as HTMLInputElement;
+
+    if (isSidebarOpen) {
+      if (profile) {
+        const login = document.querySelectorAll(".login>button")[1] as HTMLElement;
+        login.style.opacity = "1"
+      }
+      setSidebarOpen(false);
+      side.style.width = "320px"
+      btn.forEach((e, i) => {
+        e.style.width = "310px"
+        e.style.padding = "0.4em 0 0 11px"
+        setTimeout(() => {
+          span[i].style.opacity = "1"
+        }, 100)
+      })
+      side.style.zIndex = "2"
+    } else {
+      if (profile) {
+        const login = document.querySelectorAll(".login>button")[1] as HTMLElement;
+        login.style.opacity = "0"
+      }
+      setSidebarOpen(true)
+      side.style.width = "40px";
+      searchbar.focus();
+      btn.forEach((e, i) => {
+        e.style.width = "40px"
+        e.style.padding = "0.4em 0 0 5px"
+        span[i].style.opacity = "0"
+      })
+      setTimeout(() => {
+        side.style.zIndex = "0"
+      }, 300);
+    }
+  };
+
+  const _handle_sidebar_lock = () => {
+    if (!isSidebarLocked) {
+      _handle_sidebar_hide()
+      setIsSidebarLocked(true);
+      setTimeout(() => setIsSidebarLocked(false), 300);
+    }
+  };
+
+  const _handle_search_change = async (q: string) => {
+    const searchResponse = await API.get_search(q);
+    setSearchData(searchResponse);
+  };
+
+  React.useEffect(() => {
+    if (path === "/") { handle_sidebar_click(1) }
+    else if (path.includes("news")) { handle_sidebar_click(2) }
+    else if (path.includes("games")) { handle_sidebar_click(3) }
+    else if (path.includes("leaderboards")) { handle_sidebar_click(4) }
+    else if (path.includes("scorelog")) { handle_sidebar_click(5) }
+    else if (path.includes("profile")) { handle_sidebar_click(6) }
+    else if (path.includes("rules")) { handle_sidebar_click(8) }
+    else if (path.includes("about")) { handle_sidebar_click(9) }
+  }, [path]);
+
+  return (
+    <div id='sidebar'>
+      <Link to="/" tabIndex={-1}>
+        <div id='logo'> {/* logo */}
+          <img src={LogoIcon} alt="" height={"80px"} />
+          <div id='logo-text'>
+            <span><b>PORTAL 2</b></span><br />
+            <span>Least Portals</span>
+          </div>
+        </div>
+      </Link>
+      <div id='sidebar-list'> {/* List */}
+        <div id='sidebar-toplist'> {/* Top */}
+
+          <button className='sidebar-button' onClick={() => _handle_sidebar_lock()}><img src={SearchIcon} alt="" /><span>Search</span></button>
+
+          <span></span>
+
+          <Link to="/" tabIndex={-1}>
+            <button className='sidebar-button'><img src={HomeIcon} alt="homepage" /><span>Home&nbsp;Page</span></button>
+          </Link>
+
+          <Link to="/news" tabIndex={-1}>
+            <button className='sidebar-button'><img src={NewsIcon} alt="news" /><span>News</span></button>
+          </Link>
+
+          <Link to="/games" tabIndex={-1}>
+            <button className='sidebar-button'><img src={PortalIcon} alt="games" /><span>Games</span></button>
+          </Link>
+
+          <Link to="/leaderboards" tabIndex={-1}>
+            <button className='sidebar-button'><img src={FlagIcon} alt="leaderboards" /><span>Leaderboards</span></button>
+          </Link>
+
+          <Link to="/scorelog" tabIndex={-1}>
+            <button className='sidebar-button'><img src={TableIcon} alt="scorelogs" /><span>Score&nbsp;Logs</span></button>
+          </Link>
+        </div>
+        <div id='sidebar-bottomlist'>
+          <span></span>
+
+          <Login setToken={setToken} profile={profile} setProfile={setProfile} />
+
+          <Link to="/rules" tabIndex={-1}>
+            <button className='sidebar-button'><img src={BookIcon} alt="leaderboardrules" /><span>Leaderboard&nbsp;Rules</span></button>
+          </Link>
+
+          <Link to="/about" tabIndex={-1}>
+            <button className='sidebar-button'><img src={HelpIcon} alt="aboutp2lp" /><span>About&nbsp;P2LP</span></button>
+          </Link>
+        </div>
+      </div>
+      <div>
+        <input type="text" id='searchbar' placeholder='Search for map or a player...' onChange={(e) => _handle_search_change(e.target.value)} />
+
+        <div id='search-data'>
+
+          {searchData?.maps.map((q, index) => (
+            <Link to={`/maps/${q.id}`} className='search-map' key={index}>
+              <span>{q.game}</span>
+              <span>{q.chapter}</span>
+              <span>{q.map}</span>
+            </Link>
+          ))}
+          {searchData?.players.map((q, index) =>
+          (
+            <Link to={
+              profile && q.steam_id === profile.steam_id ? `/profile` :
+                `/users/${q.steam_id}`
+            } className='search-player' key={index}>
+              <img src={q.avatar_link} alt='pfp'></img>
+              <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
+            </Link>
+          ))}
+
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;
diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
new file mode 100644
index 0000000..b8f0087
--- /dev/null
+++ b/frontend/src/components/Summary.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { MapSummary } from '../types/Map';
+import "../css/Maps.css"
+
+interface SummaryProps {
+  selectedRun: number
+  setSelectedRun: (x: number) => void;
+  data: MapSummary;
+}
+
+const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data }) => {
+
+  const [selectedCategory, setSelectedCategory] = React.useState<number>(1);
+  const [historySelected, setHistorySelected] = React.useState<boolean>(false);
+
+  function _select_run(x: number, y: number) {
+    let r = document.querySelectorAll("button.record");
+    r.forEach(e => (e as HTMLElement).style.backgroundColor = "#2b2e46");
+    (r[x] as HTMLElement).style.backgroundColor = "#161723"
+
+
+    if (data && data.summary.routes.length !== 0 && data.summary.routes.length !== 0) {
+      if (y === 2) { x += data.summary.routes.filter(e => e.category.id < 2).length }
+      if (y === 3) { x += data.summary.routes.filter(e => e.category.id < 3).length }
+      if (y === 4) { x += data.summary.routes.filter(e => e.category.id < 4).length }
+      setSelectedRun(x);
+    }
+  }
+
+  function _get_youtube_id(url: string): string {
+    const urlArray = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+    return (urlArray[2] !== undefined) ? urlArray[2].split(/[^0-9a-z_]/i)[0] : urlArray[0];
+  };
+
+  function _category_change() {
+    const btn = document.querySelectorAll("#section3 #category span button");
+    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+    (btn[selectedCategory - 1] as HTMLElement).style.backgroundColor = "#202232";
+  };
+
+  function _history_change() {
+    const btn = document.querySelectorAll("#section3 #history span button");
+    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+    (historySelected ? btn[1] as HTMLElement : btn[0] as HTMLElement).style.backgroundColor = "#202232";
+  };
+
+  React.useEffect(() => {
+   _history_change();
+  }, [historySelected]);
+
+  React.useEffect(() => {
+    _category_change();
+  }, [selectedCategory]);
+
+  React.useEffect(() => {
+    _select_run(0, selectedCategory);
+  }, []);
+
+  return (
+    <>
+      <section id='section3' className='summary1'>
+        <div id='category'
+          style={data.map.image === "" ? { backgroundColor: "#202232" } : {}}>
+          <img src={data.map.image} alt="" id='category-image'></img>
+          <p><span className='portal-count'>{data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].history.score_count}</span>
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].history.score_count === 1 ? ` portal` : ` portals`}</p>
+          <span>
+            <button onClick={() => setSelectedCategory(1)}>CM</button>
+            <button onClick={() => setSelectedCategory(2)}>NoSLA</button>
+            {data.map.is_coop ? <button onClick={() => setSelectedCategory(3)}>SLA</button>
+              : <button onClick={() => setSelectedCategory(3)}>Inbounds SLA</button>}
+            <button onClick={() => setSelectedCategory(4)}>Any%</button>
+          </span>
+
+        </div>
+
+        <div id='history'>
+
+          <div style={{ display: historySelected ? "none" : "block" }}>
+            {data.summary.routes.filter(e => e.category.id === selectedCategory).length === 0 ? <h5>There are no records for this map.</h5> :
+              <>
+                <div className='record-top'>
+                  <span>Date</span>
+                  <span>Record</span>
+                  <span>First completion</span>
+                </div>
+                <hr />
+                <div id='records'>
+
+                  {data.summary.routes
+                    .sort((a, b) => a.history.score_count - b.history.score_count)
+                    .filter(e => e.category.id === selectedCategory)
+                    .map((r, index) => (
+                      <button className='record' key={index} onClick={() => {
+                        _select_run(index, r.category.id);
+                      }}>
+                        <span>{new Date(r.history.date).toLocaleDateString(
+                          "en-US", { month: 'long', day: 'numeric', year: 'numeric' }
+                        )}</span>
+                        <span>{r.history.score_count}</span>
+                        <span>{r.history.runner_name}</span>
+                      </button>
+                    ))}
+                </div>
+              </>
+            }
+          </div>
+
+          <div style={{ display: historySelected ? "block" : "none" }}>
+            {data.summary.routes.filter(e => e.category.id === selectedCategory).length === 0 ? <h5>There are no records for this map.</h5> :
+              <div id='graph'>
+                {/* <div>{graph(1)}</div>
+                <div>{graph(2)}</div>
+                <div>{graph(3)}</div> */}
+              </div>
+            }
+          </div>
+          <span>
+            <button onClick={() => setHistorySelected(false)}>List</button>
+            <button onClick={() => setHistorySelected(true)}>Graph</button>
+          </span>
+        </div>
+
+
+      </section>
+      <section id='section4' className='summary1'>
+        <div id='difficulty'>
+          <span>Difficulty</span>
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 0 ? (<span>N/A</span>) : null}
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 1 ? (<span style={{ color: "lime" }}>Very easy</span>) : null}
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 2 ? (<span style={{ color: "green" }}>Easy</span>) : null}
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 3 ? (<span style={{ color: "yellow" }}>Medium</span>) : null}
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 4 ? (<span style={{ color: "orange" }}>Hard</span>) : null}
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 5 ? (<span style={{ color: "red" }}>Very hard</span>) : null}
+          <div>
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 1 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 3 ? (<div className='difficulty-rating' style={{ backgroundColor: "yellow" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "orange" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 5 ? (<div className='difficulty-rating' style={{ backgroundColor: "red" }}></div>) : (<div className='difficulty-rating'></div>)}
+          </div>
+        </div>
+        <div id='count'>
+          <span>Completion count</span>
+          <div>{selectedCategory === 1 ? data.summary.routes[selectedRun].completion_count : "N/A"}</div>
+        </div>
+      </section>
+
+      <section id='section5' className='summary1'>
+        <div id='description'>
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].showcase !== "" ?
+            <iframe title='Showcase video' src={"https://www.youtube.com/embed/" + _get_youtube_id(data.summary.routes[selectedRun].showcase)}> </iframe>
+            : ""}
+          <h3>Route description</h3>
+          <span id='description-text'>
+            <ReactMarkdown>
+              {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].description}
+            </ReactMarkdown>
+          </span>
+        </div>
+      </section>
+
+    </>
+  );
+};
+
+export default Summary;
diff --git a/frontend/src/components/login.js b/frontend/src/components/login.js
deleted file mode 100644
index f86ad44..0000000
--- a/frontend/src/components/login.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import { Link } from "react-router-dom";
-
-import "./login.css";
-import img1 from "../imgs/login.png"
-import img2 from "../imgs/10.png"
-import img3 from "../imgs/11.png"
-
-
-export default function Login(prop) {
-const {setToken,profile,setProfile} = prop
-function login() {
-    window.location.href="https://lp.ardapektezol.com/api/v1/login"
-}
-function logout() {
-    setIsLoggedIn(false)
-    setProfile(null)
-    setToken(null)
-    fetch(`https://lp.ardapektezol.com/api/v1/token`,{'method':'DELETE'})
-    .then(r=>window.location.href="/")
-}
-const [isLoggedIn, setIsLoggedIn] = React.useState(false);
-React.useEffect(() => {
-    fetch(`https://lp.ardapektezol.com/api/v1/token`)
-    .then(r => r.json())
-    .then(d => {
-        if (d.data != null) {
-            setToken(d.data.token)
-        }
-    })
-    }, []);
-
-
-React.useEffect(() => {
-    if(profile!==null){setIsLoggedIn(true)}
-    }, [profile]);
-
-return (
-    <>
-    {isLoggedIn ? (
-    <Link to="/profile" tabIndex={-1} className='login'>
-        <button className='sidebar-button'>
-            <img src={profile.avatar_link} alt="" />
-            <span>{profile.user_name}</span>
-        </button>
-        <button className='sidebar-button' onClick={logout}><img src={img3} alt="" /><span></span></button>
-    </Link>
-    ) : (
-    <Link tabIndex={-1} className='login' >
-        <button className='sidebar-button' onClick={login}>
-            <img src={img2} alt="" />
-            <span><img src={img1} alt="Sign in through Steam" /></span>
-        </button>
-        <button className='sidebar-button' disabled><span></span></button>
-    </Link>
-    )}
-     </>   
-        )
-}
-
-
diff --git a/frontend/src/components/main.css b/frontend/src/components/main.css
deleted file mode 100644
index 48e6379..0000000
--- a/frontend/src/components/main.css
+++ /dev/null
@@ -1,17 +0,0 @@
-
-main {
-    overflow: auto;
-    overflow-x: hidden;
-    position: relative;
-
-    width: calc(100% - 380px); 
-    height: 100vh;
-    left: 350px;
-
-    padding-right: 30px;
-
-    font-size: 40px;
-    font-family: BarlowSemiCondensed-Regular;
-    color: #cdcfdf;
-
-}
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
deleted file mode 100644
index b359105..0000000
--- a/frontend/src/components/main.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-import "../App.css"
-import "./main.css";
-import { Link } from 'react-router-dom';
-
-export default function Main(props) {
-
-
-return (
-    <main>
-        <h1>{props.text}</h1>
-    </main>
-        )
-}
-
-
diff --git a/frontend/src/components/news.css b/frontend/src/components/news.css
deleted file mode 100644
index 102e9ba..0000000
--- a/frontend/src/components/news.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.news-container {
-    background-color: #2A2D40;
-    border-radius: 24px;
-    font-size: 18px;
-    overflow: hidden;
-    margin-bottom: 10px;
-}
-
-.news-title {
-    padding: 20px;
-    font-family: BarlowSemiCondensed-SemiBold;
-    font-size: 22px;
-}
-
-.news-description-div {
-    margin: 0px 20px;
-    padding: 8px 0px;
-}
-
-.news-title-header {
-    background-color: #2B2E46;
-    padding: 10px 0px;
-}
-
-.news-container>span {
-    font-size: 18px;
-    font-family: BarlowSemiCondensed-Regular;
-    line-height: 0px;
-}
\ No newline at end of file
diff --git a/frontend/src/components/news.js b/frontend/src/components/news.js
deleted file mode 100644
index 93e6be0..0000000
--- a/frontend/src/components/news.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useLocation, Link } from "react-router-dom";
-
-import "./news.css"
-
-export default function News({newsInfo}) {
-    // const { token } = prop
-    const [news, setNews] = React.useState(null);
-    const location = useLocation();
-
-    return (
-        <div className='news-container'>
-            <div className='news-title-header'>
-                <span className='news-title'>{newsInfo.title}</span>
-            </div>
-            <div className='news-description-div'>
-                <span className='description'>{newsInfo.short_description}</span>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/frontend/src/components/pages/about.css b/frontend/src/components/pages/about.css
deleted file mode 100644
index 0dec300..0000000
--- a/frontend/src/components/pages/about.css
+++ /dev/null
@@ -1,17 +0,0 @@
-
-#about {
-    overflow: auto;
-    overflow-x: hidden;
-    position: relative;
-
-    width: calc(100% - 380px); 
-    height: 100vh;
-    left: 350px;
-
-    padding-right: 30px;
-
-    font-size: 40px;
-    font-family: BarlowSemiCondensed-Regular;
-    color: #cdcfdf;
-
-}
diff --git a/frontend/src/components/pages/about.js b/frontend/src/components/pages/about.js
deleted file mode 100644
index 11b065d..0000000
--- a/frontend/src/components/pages/about.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
-
-import "./about.css";
-
-export default function About() {
-    const [aboutText, setAboutText] = useState('');
-
-    useEffect(() => {
-        const fetchReadme = async () => {
-            try {
-                const response = await fetch(
-                    'https://raw.githubusercontent.com/pektezol/leastportalshub/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">
-            <ReactMarkdown>{aboutText}</ReactMarkdown>
-        </div>
-    );
-};
diff --git a/frontend/src/components/pages/game.js b/frontend/src/components/pages/game.js
deleted file mode 100644
index 301e035..0000000
--- a/frontend/src/components/pages/game.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useLocation, Link } from "react-router-dom";
-
-import "./games.css"
-
-export default function GameEntry({ gameInfo }) {
-    const [gameEntry, setGameEntry] = React.useState(null);
-    const location = useLocation();
-
-    const gameInfoCats = gameInfo.category_portals;
-
-    useEffect(() => {
-        gameInfoCats.forEach(catInfo => {
-            const itemBody = document.createElement("div");
-            const itemTitle = document.createElement("span");
-            const spacing = document.createElement("br");
-            const itemNum = document.createElement("span");
-
-            itemTitle.innerText = catInfo.category.name;
-            itemNum.innerText = catInfo.portal_count;
-            itemTitle.classList.add("games-page-item-body-item-title");
-            itemNum.classList.add("games-page-item-body-item-num");
-            itemBody.appendChild(itemTitle);
-            itemBody.appendChild(spacing);
-            itemBody.appendChild(itemNum);
-            itemBody.className = "games-page-item-body-item";
-    
-            // itemBody.innerHTML = `
-            //             <span className='games-page-item-body-item-title'>${catInfo.category.name}</span><br />
-            //             <span className='games-page-item-body-item-num'>${catInfo.portal_count}</span>`
-    
-            document.getElementById(`${gameInfo.id}`).appendChild(itemBody);
-        });
-    })
-
-    return (
-        <Link to={"/games/" + gameInfo.id}><div className='games-page-item'>
-            <div className='games-page-item-header'>
-                <div style={{backgroundImage: `url(${gameInfo.image})`}} className='games-page-item-header-img'></div>
-                <span><b>{gameInfo.name}</b></span>
-            </div>
-            <div id={gameInfo.id} className='games-page-item-body'>
-            </div>
-        </div></Link>
-    )
-}
diff --git a/frontend/src/components/pages/games.js b/frontend/src/components/pages/games.js
deleted file mode 100644
index 75b5e44..0000000
--- a/frontend/src/components/pages/games.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useLocation, Link } from "react-router-dom";
-
-import "./games.css"
-import GameEntry from './game';
-
-export default function Games(prop) {
-    const { token } = prop;
-    const [games, setGames] = useState([]);
-    const location = useLocation();
-
-    useEffect(() => {
-        document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
-            game.innerHTML = "";
-        })
-
-        const fetchGames = async () => {
-            try {
-                const response = await fetch("https://lp.ardapektezol.com/api/v1/games", {
-                    headers: {
-                        'Authorization': token
-                    }
-                });
-
-                const data = await response.json();
-                setGames(data.data);
-                pageLoad();
-            } catch (err) {
-                console.error("Error fetching games:", err);
-            }
-        };
-
-        fetchGames();
-
-        function pageLoad() {
-            const loaders = document.querySelectorAll(".loader");
-            loaders.forEach((loader) => {
-                loader.style.display = "none";
-            });
-        }
-    }, [token]);
-
-    return (
-        <div className='games-page'>
-            <section className='games-page-header'>
-                <span><b>Games list</b></span>
-            </section>
-
-            <section>
-                <div className='games-page-content'>
-                    <div className='games-page-item-content'>
-                        <div className='loader loader-game'></div>
-                        <div className='loader loader-game'></div>
-                        {games.map((game, index) => (
-                            <GameEntry gameInfo={game} key={index} />
-                        ))}
-                    </div>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/frontend/src/components/pages/home.css b/frontend/src/components/pages/home.css
deleted file mode 100644
index e5a8eab..0000000
--- a/frontend/src/components/pages/home.css
+++ /dev/null
@@ -1,92 +0,0 @@
-* {
-    scrollbar-width: thin;
-}
-
-.homepage-panel {
-    background-color: #202232;
-    margin: 10px 10px;
-    padding: 10px;
-    border-radius: 24px;
-    overflow: hidden;
-    flex: 1 1 100%;
-    align-items: stretch;
-    width: 100%;
-}
-
-.homepage-panel-title-div {
-    background-color: #2B2E46;
-    width: fit-content;
-    padding: 5px 18px;
-    border-radius: 200px;
-    font-family: BarlowSemiCondensed-SemiBold;
-    font-size: 32px;
-    margin-bottom: 10px;
-}
-
-.stats-div {
-    background-color: #2B2E46;
-    border-radius: 24px;
-    text-align: center;
-    display: grid;
-    padding: 10px 0px;
-    width: 100%;
-}
-
-.stats-div span {
-    font-family: BarlowSemiCondensed-Regular;
-    font-size: 18px;
-}
-
-.stats-div span>b {
-    font-family: BarlowSemiCondensed-SemiBold;
-    font-size: 42px;
-}
-
-.record-title div {
-    --padding: 20px;
-    width: calc(100% - calc(var(--padding * 2)));
-    height: 32px;
-    border-radius: 200px;
-    font-size: 18px;
-    display: grid;
-    grid-template-columns: calc(20% - 3.6px) calc(25% - 4.5px) calc(15% - 2.7px) calc(15% - 2.7px) calc(25% - 4.5px);
-    text-align: center;
-    padding: 0px var(--padding);
-    vertical-align: middle;
-    align-items: center;
-    font-family: BarlowSemiCondensed-SemiBold;
-}
-
-.record-title::after {
-    content: "";
-    display: flex;
-    width: 100%;
-    height: 3px;
-    background-color: #2B2E46;
-    margin-bottom: 5px;
-}
-
-.recommended-map-img {
-    width: 250px;
-    border-radius: 19px;
-    margin-bottom: 0;
-    /* border: 7px solid #2B2E46; */
-    background-size: cover;
-    background-position-x: 50%;
-}
-
-.difficulty-bar-home {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 20% 20% 20% 20% 20%;
-    align-items: center;
-    margin: 0px;
-    margin-top: 7px;
-}
-
-.difficulty-point {
-    background: #2B2E46;
-    height: 4px;
-    margin: 5px;
-    border-radius: 10px;
-}
diff --git a/frontend/src/components/pages/home.js b/frontend/src/components/pages/home.js
deleted file mode 100644
index 0a46bec..0000000
--- a/frontend/src/components/pages/home.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import "./home.css"
-import News from '../news';
-import Record from '../record';
-
-export default function Homepage({ token }) {
-    const [profile, setProfile] = useState(null);
-
-//     useEffect(() => {
-
-//         if (!token) {
-//             return;
-//         }
-
-//         async function home() {
-
-//             const profileResponse = await fetch(`https://lp.ardapektezol.com/api/v1/profile`, {
-//                 headers: {
-//                     Authorization: token
-//                 }
-//             })
-
-//             const profileData = await profileResponse.json();
-
-//             setProfile(profileData);
-
-//             const gamesResponse = await fetch("https://lp.ardapektezol.com/api/v1/games", {
-//                 headers: {
-//                     Authorization: token
-//                 }
-//             });
-
-//             const gamesData = await gamesResponse.json();
-
-//             const recommendedMapImg = document.querySelector("#recommendedMapImg");
-
-//             recommendedMapImg.style.backgroundImage = `url(${gamesData.data[0].image})`
-
-//             const column1 = document.querySelector("#column1");
-//             const column2 = document.querySelector("#column2");
-
-//             column2.style.height = column1.clientHeight + "px";
-
-//             const panels = document.querySelectorAll(".homepage-panel");
-//             panels.forEach(e => {
-//                 // this is cuz react is silly
-//                 if (e.innerHTML.includes('<div class="homepage-panel-title-div">')) {
-//                     return
-//                 }
-//                 const title = e.getAttribute("title");
-
-//                 const titleDiv = document.createElement("div");
-//                 const titleSpan = document.createElement("span");
-
-//                 titleDiv.classList.add("homepage-panel-title-div")
-
-//                 titleSpan.innerText = title
-
-//                 titleDiv.appendChild(titleSpan)
-//                 e.insertBefore(titleDiv, e.firstChild)
-//             });
-//     }
-//     try {
-//         home();
-//     } catch (e) {
-//         console.log("error while setting up home page:", e);
-//     }
-
-// }, [token]);
-
-const newsList = [
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-    {
-        "title": "Portal Saved on Container Ride",
-        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
-    },
-]
-
-return (
-    <main>
-        <section style={{ userSelect: "none", display: "flex" }}>
-            <h1 style={{ marginTop: "53.6px", fontSize: "80px", marginBottom: "15px" }}>Home</h1>
-            {profile ?
-                <div style={{ textAlign: "right", width: "100%", marginTop: "20px" }}>
-                    <span style={{ fontSize: "25px" }}>Welcome back,</span><br />
-
-                    <span><b style={{ fontSize: "80px", transform: "translateY(-20px)", display: "block" }}>Wolfboy248</b></span>
-                </div>
-                : null}
-        </section>
-
-        <div style={{ display: "grid", gridTemplateColumns: "calc(50%) calc(50%)" }}>
-            <div id='column1' style={{ display: "flex", alignItems: "self-start", flexWrap: "wrap", alignContent: "start" }}>
-                {/* Column 1 */}
-                {profile ?
-                    <section title="Your Profile" className='homepage-panel'>
-                        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px" }}>
-                            <div className='stats-div'>
-                                <span>Overall rank</span><br />
-                                <span><b>{profile.rankings.overall.rank > 0 ? "#" + profile.rankings.overall.rank : "No rank"}</b></span>
-                            </div>
-                            <div className='stats-div'>
-                                <span>Singleplayer</span><br />
-                                <span style={{ fontSize: "22px" }}><b>{profile.rankings.singleplayer.rank > 0 ? "#" + profile.rankings.singleplayer.rank : "No rank"}</b>&nbsp;{profile.rankings.singleplayer.rank > 0 ? "(" + profile.rankings.singleplayer.completion_count + "/" + profile.rankings.singleplayer.completion_total + ")" : ""}</span>
-                            </div>
-                            <div className='stats-div'>
-                                <span>Cooperative rank</span><br />
-                                <span style={{ fontSize: "22px" }}><b>{profile.rankings.cooperative.rank > 0 ? "#" + profile.rankings.cooperative.rank : "No rank"}</b>&nbsp;{profile.rankings.cooperative.rank > 0 ? "(" + profile.rankings.cooperative.completion_count + "/" + profile.rankings.cooperative.completion_total + ")" : ""}</span>
-                            </div>
-                        </div>
-                    </section>
-                    : null}
-                {profile ?
-                    <section title="What's Next?" className='homepage-panel'>
-                        <div style={{ display: "flex" }}>
-                            <div className='recommended-map-img' id="recommendedMapImg"></div>
-                            <div style={{ marginLeft: "12px", display: "block", width: "100%" }}>
-                                <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "32px", width: "100%", display: "block" }}>Container Ride</span>
-                                <span style={{ fontSize: "20px", display: "block" }}>Your Record: 4 portals</span>
-                                <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "36px", width: "100%", display: "block" }}>World Record: 2 portals</span>
-                                <div className='difficulty-bar-home'>
-                                    <div className='difficulty-point' style={{ backgroundColor: "#51C355" }}></div>
-                                    <div className='difficulty-point'></div>
-                                    <div className='difficulty-point'></div>
-                                    <div className='difficulty-point'></div>
-                                    <div className='difficulty-point'></div>
-                                </div>
-                            </div>
-                        </div>
-                    </section>
-                    : null}
-                <section title="Newest Records" className='homepage-panel' style={{ height: profile ? "250px" : "960px" }}>
-                    <div className='record-title'>
-                        <div>
-                            <span>Place</span>
-                            <span style={{ textAlign: "left" }}>Runner</span>
-                            <span>Portals</span>
-                            <span>Time</span>
-                            <span>Date</span>
-                        </div>
-                    </div>
-                    <div style={{ overflowY: "scroll", height: "calc(100% - 90px)", paddingRight: "10px" }}>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                    </div>
-                </section>
-            </div>
-            {/* Column 2 */}
-            <div id='column2' style={{ display: "flex", alignItems: "stretch", height: "1000px" }}>
-                <section title="News" className='homepage-panel'>
-                    <div id='newsContent' style={{ display: "block", width: "100%", overflowY: "scroll", height: "calc(100% - 50px)" }}>
-                        {newsList.map((newsList, index) => (
-                            <News newsInfo={newsList} key={index}></News>
-                        ))}
-                    </div>
-                </section>
-            </div>
-        </div>
-
-
-
-    </main>
-)
-}
\ No newline at end of file
diff --git a/frontend/src/components/pages/maplist.css b/frontend/src/components/pages/maplist.css
deleted file mode 100644
index b56aacc..0000000
--- a/frontend/src/components/pages/maplist.css
+++ /dev/null
@@ -1,403 +0,0 @@
-.maplist-page {
-    position: relative;
-    left: 350px;
-    height: 100vh;
-    color: #cdcfdf;
-    width: calc(100% - 380px);
-    font-family: BarlowSemiCondensed-Regular;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    padding-right: 30px;
-}
-
-a {
-    color: inherit;
-    width: fit-content;
-}
-
-.maplist-page-content {
-    position: absolute;
-    left: 0px;
-    width: calc(100% - 50px);
-}
-
-.maplist-page-header {
-    margin-top: 33px;
-    display: grid;
-    margin-bottom: 10px;
-}
-
-.nav-btn {
-    height: 40px;
-    background-color: #2b2e46;
-    color: inherit;
-    font-size: 18px;
-    font-family: inherit;
-    border: none;
-    border-radius: 20px;
-    transition: background-color .1s;
-    cursor: default;
-    width: fit-content;
-}
-
-.nav-btn>span {
-    padding: 0 8px 0 8px;
-}
-
-.nav-btn:hover {
-    background-color: #202232;
-    cursor: pointer;
-}
-
-.game {
-    width: 100%;
-    height: 192px;
-    /* background: #202232; */
-    border-radius: 24px;
-    overflow: hidden;
-}
-
-.game-header {
-    width: 100%;
-    height: 144px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-}
-
-.game-header-text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-}
-
-.game-img {
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    filter: blur(4px);
-}
-
-.game-header-text>span {
-    font-size: 42px;
-    font-weight: 500;
-    margin: 5px;
-}
-
-.game-header-text span>b {
-    font-size: 96px;
-    font-weight: 600;
-}
-
-.game-nav {
-    display: flex;
-    height: 48px;
-}
-
-.game-nav-btn {
-    width: 100%;
-    height: 100%;
-    border: none;
-    border-radius: 0px;
-    color: inherit;
-    font-family: inherit;
-    font-size: 22px;
-    background: #2B2E46;
-    transition: background-color .1s;
-    margin: 0 1px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.game-nav-btn:hover {
-    cursor: pointer;
-}
-
-.selected {
-    background-color: #202232;
-}
-
-.gameview-nav {
-    margin-top: 20px;
-    display: flex;
-    height: 56px;
-    border-radius: 24px;
-    overflow: hidden;
-    gap: 0.06em;
-    /* background-color: #202232; */
-}
-
-.maplist {
-    width: 100%;
-    margin-top: 20px;
-    margin-bottom: 40px;
-}
-
-.chapter-name {
-    font-size: 30px;
-}
-
-.chapter-page-div {
-    display: flex;
-    justify-content: right;
-    transform: translateY(-30px);
-}
-
-.chapter-page-div button {
-    background-color: #00000000;
-    border: 0;
-    cursor: pointer;
-    height: 30px;
-    padding: 0;
-    width: 30px;
-}
-
-.chapter-page-div span {
-    color: #cdcfdf;
-    font-family: BarlowSemiCondensed-Regular;
-    font-size: 20px;
-}
-
-.maplist-maps {
-    display: grid;
-    grid-template-columns: 25% 25% 25% 25%;
-    margin-top: 10px;
-    transform: translateY(-30px);
-}
-
-.maplist-item {
-    background: #202232;
-    border-radius: 24px;
-    overflow: hidden;
-    margin: 10px 10px;
-    /* padding: 10px 15px; */
-    cursor: pointer;
-    user-select: none;
-}
-
-.loader-map {
-    border-radius: 24px;
-    overflow: hidden;
-    margin: 10px 10px;
-    /* padding: 10px 15px; */
-    user-select: none;
-    width: calc(100% - 20px);
-    height: calc(223px);
-}
-
-.maplist-img-div {
-    height: 150px;
-    overflow: hidden;
-}
-
-.maplist-img {
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    filter: blur(4px);
-    opacity: 0.7;
-}
-
-.maplist-portalcount-div {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    height: 100%;
-    transform: translateY(-100%);
-    overflow: hidden;
-}
-
-.maplist-title {
-    font-size: 22px;
-    text-align: center;
-    width: 100%;
-    display: inherit;
-    padding: 5px 0px;
-    color: #CDCFDF;
-}
-
-.maplist-portals {
-    margin-left: 5px;
-    font-size: 32px;
-}
-
-.difficulty-div {
-    display: flex;
-    padding: 7px 10px;
-}
-
-.difficulty-label {
-    font-size: 18px;
-}
-
-.difficulty-bar {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 20% 20% 20% 20% 20%;
-    align-items: center;
-    margin: 5px;
-}
-
-.difficulty-point {
-    background: #2B2E46;
-    height: 3px;
-    margin: 5px;
-    border-radius: 10px;
-}
-
-.stats {
-    margin-top: 30px;
-}
-
-.portalcount-over-time-div {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-color: #202232;
-    border-radius: 20px;
-}
-
-.graph-title {
-    width: 100%;
-    display: inherit;
-    font-size: 24px;
-    margin-top: 5px;
-    text-align: center;
-    font-family: BarlowSemiCondensed-SemiBold;
-    padding-top: 7px;
-}
-
-.portalcount-graph {
-    height: calc(100% - 30px);
-    width: calc(100% - 80px);
-}
-
-.chart {
-    height: calc(100% - 80px);
-    width: 100%;
-    position: relative;
-    padding: 0px 0px;
-    scrollbar-width: thin;
-}
-
-.line-chart {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    border-bottom: 2px solid #2B2E46;
-}
-
-.data-point {
-    background-color: #202232;
-    border: 4px solid #006FDE;
-    border-radius: 50%;
-    height: 6px;
-    position: absolute;
-    width: 6px;
-    bottom: calc(var(--y) - 4.5px);
-    left: calc(var(--x) - 6.5px);
-    transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
-    z-index: 1;
-    animation: point_intro 0.2s cubic-bezier(0.075, 0.82, 0.165, 1.8);
-    animation-fill-mode: backwards;
-}
-
-.data-point:hover, .data-point-active {
-    background-color: #006FDE;
-    box-shadow: 0px 0px 10px #006FDE;
-}
-
-.line-segment {
-    background-color: #006FDE;
-    bottom: var(--y);
-    height: 4px;
-    left: var(--x);
-    position: absolute;
-    transform: rotate(calc(var(--angle) * -1deg));
-    width: calc(var(--hypotenuse) * 1px);
-    transform-origin: left bottom;
-    border-radius: 20px;
-    z-index: 1;
-    animation: line_intro 0.05s cubic-bezier(0, 1, 0.31, 0.96);
-    animation-fill-mode: backwards;
-}
-
-#dataPointInfo {
-    position: absolute;
-    width: 400px;
-    height: 85px;
-    background: #202232;
-    box-shadow: 0px 4px 16px 0px #00000080;
-    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-    z-index: 1000;
-    opacity: 0;
-    left: auto;
-    border-radius: 20px;
-    padding: 15px 7px;
-}
-
-.section-header {
-    display: flex;
-    text-align: center;
-    font-family: BarlowSemiCondensed-SemiBold;
-    font-size: 18px;
-    height: 40%;
-    justify-content: space-evenly;
-    align-items: center;
-}
-
-.section-header span, .section-data span {
-    flex: 1;
-}
-
-.divider {
-    width: 100%;
-    height: 2px;
-    background-color: #2B2E46;
-    display: flex;
-    margin: 5px 0px 8px 0px;
-}
-
-.section-data {
-    display: flex;
-    grid-template-columns: 25% 25% 25% 25%;
-    text-align: center;
-    background-color: #2B2E46;
-    height: 52%;
-    border-radius: 200px;
-    align-items: center;
-    justify-content: space-evenly;
-    flex-grow: 1;
-    font-family: BarlowSemiCondensed-Regular;
-    font-size: 18px;
-    padding: 0px 5px;
-}
-
-@keyframes line_intro {
-    0% {
-        width: 0;
-    }
-    100% {
-        width: calc(var(--hypotenuse) * 1px);
-    }
-}
-
-@keyframes point_intro {
-    0% {
-        opacity: 0;
-        width: 0;
-        height: 0;
-        transform: translate(3px, -3px);
-    }
-    100% {
-        width: 6px;
-        height: 6px;
-        transform: translate(0px, 0px);
-        opacity: 1;
-    }
-}
diff --git a/frontend/src/components/pages/maplist.js b/frontend/src/components/pages/maplist.js
deleted file mode 100644
index a5c6c19..0000000
--- a/frontend/src/components/pages/maplist.js
+++ /dev/null
@@ -1,890 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useLocation, Link } from "react-router-dom";
-import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
-
-import "./maplist.css"
-import img5 from "../../imgs/5.png"
-import img6 from "../../imgs/6.png"
-
-export default function Maplist(prop) {
-    const { token, setToken } = prop
-    const scrollRef = useRef(null)
-    const [games, setGames] = React.useState(null);
-    const [hasOpenedStatistics, setHasOpenedStatistics] = React.useState(false);
-    const [totalPortals, setTotalPortals] = React.useState(0);
-    const [loading, setLoading] = React.useState(true)
-    const location = useLocation();
-
-    const [gameTitle, setGameTitle] = React.useState("");
-    const [catPortalCount, setCatPortalCount] = React.useState(0);
-    let minPage;
-    let maxPage;
-    let currentPage;
-    let add = 0;
-    let gameState;
-    let catState = 0;
-    async function detectGame() {
-        const response = await fetch("https://lp.ardapektezol.com/api/v1/games", {
-            headers: {
-                'Authorization': token
-            }
-        });
-
-        const data = await response.json();
-
-        const url = new URL(window.location.href)
-
-        const params = new URLSearchParams(url.search)
-        gameState = parseFloat(location.pathname.split("/")[2])
-
-        if (gameState == 1) {
-            setGameTitle(data.data[0].name);
-
-            maxPage = 9;
-            minPage = 1;
-            createCategories(1);
-        } else if (gameState == 2) {
-            setGameTitle(data.data[1].name);
-
-            maxPage = 16;
-            minPage = 10;
-            add = 10
-            createCategories(2);
-        }
-
-        let chapterParam = params.get("chapter")
-
-        currentPage = minPage;
-
-        if (chapterParam) {
-            currentPage = +chapterParam + add
-        }
-
-        changePage(currentPage);
-
-        // if (!loading) {
-
-        //     document.querySelector("#catPortalCount").innerText = data.data[gameState - 1].category_portals[0].portal_count;
-
-        // }
-
-        setCatPortalCount(data.data[gameState - 1].category_portals[0].portal_count);
-
-        // if (chapterParam) {
-        //     document.querySelector("#pageNumbers").innerText = `${chapterParam - minPage + 1}/${maxPage - minPage + 1}`
-        // }
-    }
-
-    function changeMaplistOrStatistics(index, name) {
-        const maplistBtns = document.querySelectorAll("#maplistBtn");
-        maplistBtns.forEach((btn, i) => {
-            if (i == index) {
-                btn.className = "game-nav-btn selected"
-
-                if (name == "maplist") {
-                    document.querySelector(".stats").style.display = "none";
-                    document.querySelector(".maplist").style.display = "block";
-                    document.querySelector(".maplist").setAttribute("currentTab", "maplist");
-                } else {
-                    document.querySelector(".stats").style.display = "block";
-                    document.querySelector(".maplist").style.display = "none";
-
-                    document.querySelector(".maplist-page").scrollTo({ top: 372, behavior: "smooth" })
-                    document.querySelector(".maplist").setAttribute("currentTab", "stats");
-                    setHasOpenedStatistics(true);
-                }
-            } else {
-                btn.className = "game-nav-btn";
-            }
-        });
-    }
-
-    async function createCategories(gameID) {
-        const response = await fetch("https://lp.ardapektezol.com/api/v1/games", {
-            headers: {
-                'Authorization': token
-            }
-        });
-
-        const data = await response.json();
-        let categoriesArr = data.data[gameID - 1].category_portals;
-
-        if (document.querySelector(".maplist-maps") == null) {
-            return;
-        }
-        const gameNav = document.querySelector(".game-nav");
-        gameNav.innerHTML = "";
-        categoriesArr.forEach((category) => {
-            createCategory(category);
-        });
-
-        setLoading(false);
-    }
-
-    let categoryNum = 0;
-    function createCategory(category) {
-        const gameNav = document.querySelector(".game-nav");
-
-        categoryNum++;
-        const gameNavBtn = document.createElement("button");
-        if (categoryNum == 1) {
-            gameNavBtn.className = "game-nav-btn selected";
-        } else {
-            gameNavBtn.className = "game-nav-btn";
-        }
-        gameNavBtn.id = "catBtn"
-        gameNavBtn.innerText = category.category.name;
-
-        gameNavBtn.addEventListener("click", (e) => {
-            changeCategory(category, e);
-            changePage(currentPage);
-        })
-
-        gameNav.appendChild(gameNavBtn);
-    }
-
-    async function changeCategory(category, btn) {
-        const navBtns = document.querySelectorAll("#catBtn");
-        navBtns.forEach((btns) => {
-            btns.classList.remove("selected");
-        });
-
-        btn.srcElement.classList.add("selected");
-        const response = await fetch("https://lp.ardapektezol.com/api/v1/games", {
-            headers: {
-                'Authorization': token
-            }
-        });
-
-        const data = await response.json();
-        catState = category.category.id - 1;
-        // console.log(catState)
-        document.querySelector("#catPortalCount").innerText = category.portal_count;
-    }
-
-    async function changePage(page) {
-        const pageNumbers = document.querySelector("#pageNumbers");
-
-        pageNumbers.innerText = `${currentPage - minPage + 1}/${maxPage - minPage + 1}`;
-
-        const maplistMaps = document.querySelector(".maplist-maps");
-        maplistMaps.innerHTML = "";
-        for (let index = 0; index < 8; index++) {
-            const loadingAnimation = document.createElement("div");
-            loadingAnimation.classList.add("loader");
-            loadingAnimation.classList.add("loader-map")
-            maplistMaps.appendChild(loadingAnimation);
-        }
-        const data = await fetchMaps(page);
-        const maps = data.data.maps;
-        const name = data.data.chapter.name;
-
-        let chapterName = "Chapter";
-        const chapterNumberOld = name.split(" - ")[0];
-        let chapterNumber1 = chapterNumberOld.split("Chapter ")[1];
-        if (chapterNumber1 == undefined) {
-            chapterName = "Course"
-            chapterNumber1 = chapterNumberOld.split("Course ")[1];
-        }
-        const chapterNumber = chapterNumber1.toString().padStart(2, "0");
-        const chapterTitle = name.split(" - ")[1];
-
-        if (document.querySelector(".maplist-maps") == null) {
-            return;
-        }
-        const chapterNumberElement = document.querySelector(".chapter-num")
-        const chapterTitleElement = document.querySelector(".chapter-name")
-        chapterNumberElement.innerText = chapterName + " " + chapterNumber;
-        chapterTitleElement.innerText = chapterTitle;
-
-        maplistMaps.innerHTML = "";
-        maps.forEach(map => {
-            let portalCount;
-            if (map.category_portals[catState] != undefined) {
-                portalCount = map.category_portals[catState].portal_count;
-            } else {
-                portalCount = map.category_portals[0].portal_count;
-            }
-            addMap(map.name, portalCount, map.image, map.difficulty + 1, map.id);
-        });
-
-        const url = new URL(window.location.href)
-
-        const params = new URLSearchParams(url.search)
-
-        let chapterParam = params.get("chapter")
-
-        try {
-            const response = await fetch("https://lp.ardapektezol.com/api/v1/games", {
-                headers: {
-                    'Authorization': token
-                }
-            });
-
-            const data = await response.json();
-
-            const gameImg = document.querySelector(".game-img");
-
-            gameImg.style.backgroundImage = `url(${data.data[0].image})`;
-
-            // const mapImg = document.querySelectorAll(".maplist-img");
-            // mapImg.forEach((map) => {
-            //     map.style.backgroundImage = `url(${data.data[0].image})`;
-            // });
-
-        } catch (error) {
-            console.log("error fetching games:", error);
-        }
-
-        asignDifficulties();
-    }
-
-    async function addMap(mapName, mapPortalCount, mapImage, difficulty, mapID) {
-        // jesus christ
-        const maplistItem = document.createElement("div");
-        const maplistTitle = document.createElement("span");
-        const maplistImgDiv = document.createElement("div");
-        const maplistImg = document.createElement("div");
-        const maplistPortalcountDiv = document.createElement("div");
-        const maplistPortalcount = document.createElement("span");
-        const b = document.createElement("b");
-        const maplistPortalcountPortals = document.createElement("span");
-        const difficultyDiv = document.createElement("div");
-        const difficultyLabel = document.createElement("span");
-        const difficultyBar = document.createElement("div");
-        const difficultyPoint1 = document.createElement("div");
-        const difficultyPoint2 = document.createElement("div");
-        const difficultyPoint3 = document.createElement("div");
-        const difficultyPoint4 = document.createElement("div");
-        const difficultyPoint5 = document.createElement("div");
-
-        maplistItem.className = "maplist-item";
-        maplistTitle.className = "maplist-title";
-        maplistImgDiv.className = "maplist-img-div";
-        maplistImg.className = "maplist-img";
-        maplistPortalcountDiv.className = "maplist-portalcount-div";
-        maplistPortalcount.className = "maplist-portalcount";
-        maplistPortalcountPortals.className = "maplist-portals";
-        difficultyDiv.className = "difficulty-div";
-        difficultyLabel.className = "difficulty-label";
-        difficultyBar.className = "difficulty-bar";
-        difficultyPoint1.className = "difficulty-point";
-        difficultyPoint2.className = "difficulty-point";
-        difficultyPoint3.className = "difficulty-point";
-        difficultyPoint4.className = "difficulty-point";
-        difficultyPoint5.className = "difficulty-point";
-
-
-        maplistTitle.innerText = mapName;
-        difficultyLabel.innerText = "Difficulty: "
-        maplistPortalcountPortals.innerText = "portals"
-        b.innerText = mapPortalCount;
-        maplistImg.style.backgroundImage = `url(${mapImage})`;
-        difficultyBar.setAttribute("difficulty", difficulty)
-        maplistItem.setAttribute("id", mapID)
-        maplistItem.addEventListener("click", () => {
-            console.log(mapID)
-            window.location.href = "/maps/" + mapID
-        })
-
-        // appends
-        // maplist item
-        maplistItem.appendChild(maplistTitle);
-        maplistImgDiv.appendChild(maplistImg);
-        maplistImgDiv.appendChild(maplistPortalcountDiv);
-        maplistPortalcountDiv.appendChild(maplistPortalcount);
-        maplistPortalcount.appendChild(b);
-        maplistPortalcountDiv.appendChild(maplistPortalcountPortals);
-        maplistItem.appendChild(maplistImgDiv);
-        maplistItem.appendChild(difficultyDiv);
-        difficultyDiv.appendChild(difficultyLabel);
-        difficultyDiv.appendChild(difficultyBar);
-        difficultyBar.appendChild(difficultyPoint1);
-        difficultyBar.appendChild(difficultyPoint2);
-        difficultyBar.appendChild(difficultyPoint3);
-        difficultyBar.appendChild(difficultyPoint4);
-        difficultyBar.appendChild(difficultyPoint5);
-
-        // display in place
-        const maplistMaps = document.querySelector(".maplist-maps");
-        maplistMaps.appendChild(maplistItem);
-    }
-
-    async function fetchMaps(chapterID) {
-        try {
-            const response = await fetch(`https://lp.ardapektezol.com/api/v1/chapters/${chapterID}`, {
-                headers: {
-                    'Authorization': token
-                }
-            });
-
-            const data = await response.json();
-            return data;
-        } catch (err) {
-            console.log(err)
-        }
-    }
-
-    // difficulty stuff
-    function asignDifficulties() {
-        const difficulties = document.querySelectorAll(".difficulty-bar");
-        difficulties.forEach((difficultyElement) => {
-            let difficulty = difficultyElement.getAttribute("difficulty");
-            if (difficulty == "1") {
-                difficultyElement.childNodes[0].style.backgroundColor = "#51C355";
-            } else if (difficulty == "2") {
-                difficultyElement.childNodes[0].style.backgroundColor = "#8AC93A";
-                difficultyElement.childNodes[1].style.backgroundColor = "#8AC93A";
-            } else if (difficulty == "3") {
-                difficultyElement.childNodes[0].style.backgroundColor = "#8AC93A";
-                difficultyElement.childNodes[1].style.backgroundColor = "#8AC93A";
-                difficultyElement.childNodes[2].style.backgroundColor = "#8AC93A";
-            } else if (difficulty == "4") {
-                difficultyElement.childNodes[0].style.backgroundColor = "#C35F51";
-                difficultyElement.childNodes[1].style.backgroundColor = "#C35F51";
-                difficultyElement.childNodes[2].style.backgroundColor = "#C35F51";
-                difficultyElement.childNodes[3].style.backgroundColor = "#C35F51";
-            } else if (difficulty == "5") {
-                difficultyElement.childNodes[0].style.backgroundColor = "#C35F51";
-                difficultyElement.childNodes[1].style.backgroundColor = "#C35F51";
-                difficultyElement.childNodes[2].style.backgroundColor = "#C35F51";
-                difficultyElement.childNodes[3].style.backgroundColor = "#C35F51";
-                difficultyElement.childNodes[4].style.backgroundColor = "#C35F51";
-            }
-        });
-    }
-
-    const divRef = useRef(null);
-
-    React.useEffect(() => {
-
-        const lineChart = document.querySelector(".line-chart")
-        let tempTotalPortals = 0
-        fetch("https://lp.ardapektezol.com/api/v1/games/1/maps", {
-            headers: {
-                'Authorization': token
-            }
-        })
-            .then(r => r.json())
-            .then(d => {
-                d.data.maps.forEach((map, i) => {
-                    tempTotalPortals += map.portal_count
-                })
-            })
-            .then(() => {
-                setTotalPortals(tempTotalPortals)
-            })
-        async function createGraph() {
-            console.log(totalPortals)
-            // max
-            let items = [
-                {
-                    record: "100",
-                    date: new Date(2011, 4, 4),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "98",
-                    date: new Date(2012, 6, 4),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "94",
-                    date: new Date(2013, 0, 1),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "90",
-                    date: new Date(2014, 0, 1),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "88",
-                    date: new Date(2015, 6, 14),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "84",
-                    date: new Date(2016, 8, 19),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "82",
-                    date: new Date(2017, 3, 20),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "81",
-                    date: new Date(2018, 2, 25),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "80",
-                    date: new Date(2019, 3, 4),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "78",
-                    date: new Date(2020, 11, 21),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "77",
-                    date: new Date(2021, 10, 25),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "76",
-                    date: new Date(2022, 4, 17),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "75",
-                    date: new Date(2023, 9, 31),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-                {
-                    record: "74",
-                    date: new Date(2024, 4, 4),
-                    map: "Container Ride",
-                    first: "tiny zach"
-                },
-            ]
-
-            function calculatePosition(date, startDate, endDate, maxWidth) {
-                const totalMilliseconds = endDate - startDate + 10000000000;
-                const millisecondsFromStart = date - startDate + 5000000000;
-                return (millisecondsFromStart / totalMilliseconds) * maxWidth
-            }
-
-            const minDate = items.reduce((min, dp) => dp.date < min ? dp.date : min, items[0].date)
-            const maxDate = items.reduce((max, dp) => dp.date > max ? dp.date : max, items[0].date)
-
-            const graph_width = document.querySelector(".portalcount-over-time-div").clientWidth
-            // console.log(graph_width)
-
-            const uniqueYears = new Set()
-            items.forEach(dp => uniqueYears.add(dp.date.getFullYear()))
-            let minYear = Infinity;
-            let maxYear = -Infinity;
-
-            items.forEach(dp => {
-                const year = dp.date.getFullYear();
-                minYear = Math.min(minYear, year);
-                maxYear = Math.max(maxYear, year);
-            });
-
-            // Add missing years to the set
-            for (let year = minYear; year <= maxYear; year++) {
-                uniqueYears.add(year);
-            }
-            const uniqueYearsArr = Array.from(uniqueYears)
-
-            items = items.map(dp => ({
-                record: dp.record,
-                date: dp.date,
-                x: calculatePosition(dp.date, minDate, maxDate, lineChart.clientWidth),
-                map: dp.map,
-                first: dp.first
-            }))
-
-            const yearInterval = lineChart.clientWidth / uniqueYears.size
-            for (let index = 1; index < (uniqueYears.size); index++) {
-                const placeholderlmao = document.createElement("div")
-                const yearSpan = document.createElement("span")
-                yearSpan.style.position = "absolute"
-                placeholderlmao.style.height = "100%"
-                placeholderlmao.style.width = "2px"
-                placeholderlmao.style.backgroundColor = "#00000080"
-                placeholderlmao.style.position = `absolute`
-                const thing = calculatePosition(new Date(uniqueYearsArr[index], 0, 0), minDate, maxDate, lineChart.clientWidth)
-                placeholderlmao.style.left = `${thing}px`
-                yearSpan.style.left = `${thing}px`
-                yearSpan.style.bottom = "-34px"
-                yearSpan.innerText = uniqueYearsArr[index]
-                yearSpan.style.fontFamily = "BarlowSemiCondensed-Regular"
-                yearSpan.style.fontSize = "22px"
-                yearSpan.style.opacity = "0.8"
-                lineChart.appendChild(yearSpan)
-
-            }
-
-            let maxPortals;
-            let minPortals;
-            let precision;
-            let multiplier = 1;
-            for (let index = 0; index < items.length; index++) {
-                precision = Math.floor((items[0].record - items[items.length - 1].record))
-                if (precision > 20) {
-                    precision = 20
-                }
-                minPortals = Math.floor((items[items.length - 1].record) / 10) * 10
-                if (index == 0) {
-                    maxPortals = items[index].record - minPortals
-                }
-            }
-            function calculateMultiplier(value) {
-                while (value > precision) {
-                    multiplier += 1;
-                    value -= precision;
-                }
-            }
-            calculateMultiplier(items[0].record);
-            // if (items[0].record > 10) {
-            //     multiplier = 2;
-            // }
-
-            // Original cubic bezier control points
-            const P0 = { x: 0, y: 0 };
-            const P1 = { x: 0.26, y: 1 };
-            const P2 = { x: 0.74, y: 1 };
-            const P3 = { x: 1, y: 0 };
-
-            function calculateIntermediateControlPoints(t, P0, P1, P2, P3) {
-                const x = (1 - t) ** 3 * P0.x +
-                    3 * (1 - t) ** 2 * t * P1.x +
-                    3 * (1 - t) * t ** 2 * P2.x +
-                    t ** 3 * P3.x;
-
-                const y = (1 - t) ** 3 * P0.y +
-                    3 * (1 - t) ** 2 * t * P1.y +
-                    3 * (1 - t) * t ** 2 * P2.y +
-                    t ** 3 * P3.y;
-
-                return { x, y };
-            }
-
-
-            let delay = 0;
-            for (let index = 0; index < items.length; index++) {
-                let chart_height = 340;
-                const item = items[index];
-                delay += 0.05;
-                // console.log(lineChart.clientWidth)
-
-                // maxPortals++;
-                // maxPortals++;
-
-                let point_height = (chart_height / maxPortals)
-
-                for (let index = 0; index < (maxPortals / multiplier); index++) {
-                    // console.log((index + 1) * multiplier)
-                    let current_portal_count = (index + 1);
-
-                    const placeholderDiv = document.createElement("div")
-                    const numPortalsText = document.createElement("span")
-                    const numPortalsTextBottom = document.createElement("span")
-                    numPortalsText.innerText = (current_portal_count * multiplier) + minPortals
-                    numPortalsTextBottom.innerText = minPortals
-                    placeholderDiv.style.position = "absolute"
-                    numPortalsText.style.position = "absolute"
-                    numPortalsTextBottom.style.position = "absolute"
-                    numPortalsText.style.left = "-37px"
-                    numPortalsText.style.opacity = "0.2"
-                    numPortalsTextBottom.style.opacity = "0.2"
-                    numPortalsText.style.fontFamily = "BarlowSemiCondensed-Regular"
-                    numPortalsTextBottom.style.fontFamily = "BarlowSemiCondensed-Regular"
-                    numPortalsText.style.fontSize = "22px"
-                    numPortalsTextBottom.style.left = "-37px"
-                    numPortalsTextBottom.style.fontSize = "22px"
-                    numPortalsTextBottom.style.fontWeight = "400"
-                    numPortalsText.style.color = "#CDCFDF"
-                    numPortalsTextBottom.style.color = "#CDCFDF"
-                    numPortalsText.style.fontFamily = "inherit"
-                    numPortalsTextBottom.style.fontFamily = "inherit"
-                    numPortalsText.style.textAlign = "right"
-                    numPortalsTextBottom.style.textAlign = "right"
-                    numPortalsText.style.width = "30px"
-                    numPortalsTextBottom.style.width = "30px"
-                    placeholderDiv.style.bottom = `${(point_height * current_portal_count * multiplier) - 2}px`
-                    numPortalsText.style.bottom = `${(point_height * current_portal_count * multiplier) - 2 - 9}px`
-                    numPortalsTextBottom.style.bottom = `${0 - 2 - 8}px`
-                    placeholderDiv.id = placeholderDiv.style.bottom
-                    placeholderDiv.style.width = "100%"
-                    placeholderDiv.style.height = "2px"
-                    placeholderDiv.style.backgroundColor = "#2B2E46"
-                    placeholderDiv.style.zIndex = "0"
-
-                    if (index == 0) {
-                        lineChart.appendChild(numPortalsTextBottom)
-                    }
-                    lineChart.appendChild(numPortalsText)
-                    lineChart.appendChild(placeholderDiv)
-                }
-
-                const li = document.createElement("li");
-                const lineSeg = document.createElement("div");
-                const dataPoint = document.createElement("div");
-
-                li.style = `--y: ${point_height * (item.record - minPortals) - 3}px; --x: ${item.x}px`;
-                lineSeg.className = "line-segment";
-                dataPoint.className = "data-point";
-
-                if (items[index + 1] !== undefined) {
-                    const hypotenuse = Math.sqrt(
-                        Math.pow(items[index + 1].x - items[index].x, 2) +
-                        Math.pow((point_height * items[index + 1].record) - point_height * item.record, 2)
-                    );
-                    const angle = Math.asin(
-                        ((point_height * item.record) - (point_height * items[index + 1].record)) / hypotenuse
-                    );
-
-                    lineSeg.style = `--hypotenuse: ${hypotenuse}; --angle: ${angle * (-180 / Math.PI)}`;
-                    const t0 = index / items.length;
-                    const t1 = (index + 1) / items.length
-
-                    const P0t0 = calculateIntermediateControlPoints(t0, P0, P1, P2, P3);
-                    const P1t1 = calculateIntermediateControlPoints(t1, P0, P1, P2, P3);
-                    const bezierStyle = `cubic-bezier(${P0t0.x.toFixed(3)}, ${P0t0.y.toFixed(3)}, ${P1t1.x.toFixed(3)}, ${P1t1.y.toFixed(3)})`
-                    lineSeg.style.animationTimingFunction = bezierStyle
-                    lineSeg.style.animationDelay = delay + "s"
-                }
-                dataPoint.style.animationDelay = delay + "s"
-
-                let isHoveringOverData = true;
-                let isDataActive = false;
-                document.querySelector("#dataPointInfo").style.left = item.x + "px";
-                document.querySelector("#dataPointInfo").style.bottom = (point_height * item.record - 3) + "px";
-                dataPoint.addEventListener("mouseenter", (e) => {
-                    isDataActive = true;
-                    isHoveringOverData = true;
-                    const dataPoints = document.querySelectorAll(".data-point")
-                    dataPoints.forEach(point => {
-                        point.classList.remove("data-point-active")
-                    });
-                    dataPoint.classList.add("data-point-active")
-                    document.querySelector("#dataPointRecord").innerText = item.record;
-                    document.querySelector("#dataPointMap").innerText = item.map;
-                    document.querySelector("#dataPointDate").innerText = item.date.toLocaleDateString("en-GB");
-                    document.querySelector("#dataPointFirst").innerText = item.first;
-                    if ((lineChart.clientWidth - 400) < item.x) {
-                        document.querySelector("#dataPointInfo").style.left = item.x - 400 + "px";
-                    } else {
-                        document.querySelector("#dataPointInfo").style.left = item.x + "px";
-                    }
-                    if ((lineChart.clientHeight - 115) < (point_height * (item.record - minPortals) - 3)) {
-                        document.querySelector("#dataPointInfo").style.bottom = (point_height * (item.record - minPortals) - 3) - 115 + "px";
-                    } else {
-                        document.querySelector("#dataPointInfo").style.bottom = (point_height * (item.record - minPortals) - 3) + "px";
-                    }
-                    document.querySelector("#dataPointInfo").style.opacity = "1";
-                    document.querySelector("#dataPointInfo").style.zIndex = "10";
-                });
-                document.querySelector("#dataPointInfo").addEventListener("mouseenter", (e) => {
-                    isHoveringOverData = true;
-                })
-                document.querySelector("#dataPointInfo").addEventListener("mouseleave", (e) => {
-                    isHoveringOverData = false;
-                })
-                document.addEventListener("mousedown", () => {
-                    if (!isHoveringOverData) {
-                        isDataActive = false
-                        dataPoint.classList.remove("data-point-active")
-                        document.querySelector("#dataPointInfo").style.opacity = "0";
-                        document.querySelector("#dataPointInfo").style.zIndex = "0";
-                    }
-                })
-                dataPoint.addEventListener("mouseenter", (e) => {
-                    isHoveringOverData = false;
-                })
-                document.querySelector(".chart").addEventListener("mouseleave", () => {
-                    isDataActive = false
-                    // fuck you
-                    isHoveringOverData = true;
-                    dataPoint.classList.remove("data-point-active")
-                    document.querySelector("#dataPointInfo").style.opacity = "0";
-                    document.querySelector("#dataPointInfo").style.zIndex = "0";
-                })
-
-                li.appendChild(lineSeg);
-                li.appendChild(dataPoint);
-                lineChart.appendChild(li);
-            }
-        }
-
-        async function fetchGames() {
-            try {
-                const response = await fetch("https://lp.ardapektezol.com/api/v1/games", {
-                    headers: {
-                        'Authorization': token
-                    }
-                });
-
-                const data = await response.json();
-
-                const gameImg = document.querySelector(".game-img");
-
-                gameImg.style.backgroundImage = `url(${data.data[0].image})`;
-
-                // const mapImg = document.querySelectorAll(".maplist-img");
-                // mapImg.forEach((map) => {
-                //     map.style.backgroundImage = `url(${data.data[0].image})`;
-                // });
-
-            } catch (error) {
-                console.log("error fetching games:", error);
-            }
-        }
-
-        detectGame();
-
-        const maplistImg = document.querySelector("#maplistImg");
-        maplistImg.src = img5;
-        const statisticsImg = document.querySelector("#statisticsImg");
-        statisticsImg.src = img6;
-
-        fetchGames();
-
-        const handleResize = (entries) => {
-            for (let entry of entries) {
-                if (hasOpenedStatistics) {
-                    lineChart.innerHTML = ""
-                    createGraph()
-                }
-                if (document.querySelector(".maplist").getAttribute("currentTab") == "stats") {
-                    document.querySelector(".stats").style.display = "block"
-                } else {
-                    document.querySelector(".stats").style.display = "none"
-                }
-            }
-        };
-
-        const resizeObserver = new ResizeObserver(handleResize);
-
-        // if (scrollRef.current) {
-        //     //hi
-        //     if (new URLSearchParams(new URL(window.location.href).search).get("chapter")) {
-        //         setTimeout(() => {
-        //             scrollRef.current.scrollIntoView({ behavior: "smooth", block: "start" })
-        //         }, 200);
-        //     }
-
-        // }
-
-        if (divRef.current) {
-            resizeObserver.observe(divRef.current);
-        }
-
-        return () => {
-            if (divRef.current) {
-                resizeObserver.unobserve(divRef.current);
-            }
-            resizeObserver.disconnect();
-        };
-
-
-    })
-    return (
-        <div ref={divRef} className='maplist-page'>
-            <div className='maplist-page-content'>
-                <section className='maplist-page-header'>
-                    <Link to='/games'><button className='nav-btn'>
-                        <i className='triangle'></i>
-                        <span>Games list</span>
-                    </button></Link>
-                    {!loading ?
-                        <span><b id='gameTitle'>{gameTitle}</b></span>
-                        :
-                        <span><b id='gameTitle' className='loader-text'>LOADINGLOADING</b></span>}
-                </section>
-
-                <div className='game'>
-                    {!loading ?
-                        <div className='game-header'>
-                            <div className='game-img'></div>
-                            <div className='game-header-text'>
-                                <span><b id='catPortalCount'>{catPortalCount}</b></span>
-                                <span>portals</span>
-                            </div>
-                        </div>
-                        : <div className='game-header loader'>
-                            <div className='game-img'></div>
-                            <div className='game-header-text'>
-                                <span className='loader-text'><b id='catPortalCount'>00</b></span>
-                                <span className='loader-text'>portals</span>
-                            </div>
-                        </div>}
-                    {!loading ?
-                        <div className='game-nav'>
-                        </div>
-                        : <div className='game-nav loader'>
-                        </div>}
-                </div>
-
-                <div className='gameview-nav'>
-                    <button id='maplistBtn' onClick={() => { changeMaplistOrStatistics(0, "maplist") }} className='game-nav-btn selected'>
-                        <img id='maplistImg' />
-                        <span>Map List</span>
-                    </button>
-                    <button id='maplistBtn' onClick={() => changeMaplistOrStatistics(1, "stats")} className='game-nav-btn'>
-                        <img id='statisticsImg' />
-                        <span>Statistics</span>
-                    </button>
-                </div>
-
-                <div ref={scrollRef} className='maplist'>
-                    <div className='chapter'>
-                        <span className='chapter-num'>undefined</span><br />
-                        <span className='chapter-name'>undefined</span>
-
-                        <div className='chapter-page-div'>
-                            <button id='pageChanger' onClick={() => { currentPage--; currentPage < minPage ? currentPage = minPage : changePage(currentPage); }}>
-                                <i className='triangle'></i>
-                            </button>
-                            <span id='pageNumbers'>0/0</span>
-                            <button id='pageChanger' onClick={() => { currentPage++; currentPage > maxPage ? currentPage = maxPage : changePage(currentPage); }}>
-                                <i style={{ transform: "rotate(180deg)" }} className='triangle'></i>
-                            </button>
-                        </div>
-
-                        <div className='maplist-maps'>
-                        </div>
-                    </div>
-                </div>
-
-                <div style={{ display: "block" }} className='stats'>
-                    <div className='portalcount-over-time-div'>
-                        <span className='graph-title'>Portal count over time</span><br />
-
-                        <div className='portalcount-graph'>
-                            <figure className='chart'>
-                                <div style={{ display: "block" }}></div>
-                                <div id="dataPointInfo">
-                                    <div className='section-header'>
-                                        <span className='header-title'>Date</span>
-                                        <span className='header-title'>Map</span>
-                                        <span className='header-title'>Record</span>
-                                        <span className='header-title'>First completion</span>
-                                    </div>
-                                    <div className='divider'></div>
-                                    <div className='section-data'>
-                                        <span id='dataPointDate'></span>
-                                        <span id='dataPointMap'></span>
-                                        <span id='dataPointRecord'></span>
-                                        <span id='dataPointFirst'>Hello</span>
-                                    </div>
-                                </div>
-                                <ul className='line-chart'>
-
-                                </ul>
-                            </figure>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/frontend/src/components/pages/profile.js b/frontend/src/components/pages/profile.js
deleted file mode 100644
index 7c45320..0000000
--- a/frontend/src/components/pages/profile.js
+++ /dev/null
@@ -1,382 +0,0 @@
-import React from 'react';
-import { useLocation }  from "react-router-dom";
-
-import img4 from "../../imgs/4.png"
-import img5 from "../../imgs/5.png"
-import img12 from "../../imgs/12.png"
-import img13 from "../../imgs/13.png"
-import img14 from "../../imgs/14.png"
-import img15 from "../../imgs/15.png"
-import img16 from "../../imgs/16.png"
-import img17 from "../../imgs/17.png"
-import img18 from "../../imgs/18.png"
-import img19 from "../../imgs/19.png"
-import "./profile.css";
-
-export default function Profile(props) {
-const {token} = props
-
-
-const location = useLocation()
-
-
-const [profileData, setProfileData] = React.useState(null)
-React.useEffect(()=>{
-    setProfileData(null)
-    setChapterData(null)
-    setMaps(null)
-    setPageNumber(1)
-
-    if(location.pathname==="/profile"){
-            fetch(`https://lp.ardapektezol.com/api/v1/${location.pathname}`,{
-                headers: {
-                    'Authorization': token
-                }})
-                .then(r=>r.json())
-                .then(d=>{
-                    setProfileData(d.data)
-                    setPageMax(Math.ceil(d.data.records.length/20))
-                })
-        }else{
-            fetch(`https://lp.ardapektezol.com/api/v1/${location.pathname}`)
-                .then(r=>r.json())
-                .then(d=>{
-                    setProfileData(d.data)
-                    setPageMax(Math.ceil(d.data.records.length/20))
-                })
-            }
-},[location.pathname])
-
-
-
-const [game,setGame] = React.useState(0)
-const [gameData,setGameData] = React.useState(null)
-const [chapter,setChapter] = React.useState("0")
-const [chapterData,setChapterData] = React.useState(null)
-const [maps,setMaps] = React.useState(null)
-
-React.useEffect(()=>{
-    fetch("https://lp.ardapektezol.com/api/v1/games")
-    .then(r=>r.json())
-    .then(d=>{
-        setGameData(d.data)
-        setGame(0)
-    })
-
-},[location])
-
-React.useEffect(()=>{
-    if(game!==null && game!= 0){
-        fetch(`https://lp.ardapektezol.com/api/v1/games/${game}`)
-        .then(r=>r.json())
-        .then(d=>{
-            setChapterData(d.data)
-            setChapter("0")
-            document.querySelector('#select-chapter').value=0
-        })
-
-    } else if (game!==null && game==0 && profileData!== null){
-        setPageMax(Math.ceil(profileData.records.length/20))
-        setPageNumber(1)
-    }
-
-},[game,location])
-
-React.useEffect(()=>{
-    if(chapter!==null){
-        if(chapter==0){
-            setMaps(null)
-            fetch(`https://lp.ardapektezol.com/api/v1/games/${game}/maps`)
-            .then(r=>r.json())
-            .then(d=>{
-                setMaps(d.data.maps);
-                setPageMax(Math.ceil(d.data.maps.length/20))
-                setPageNumber(1)
-                })
-        }else{
-            setMaps(null)
-            fetch(`https://lp.ardapektezol.com/api/v1/chapters/${chapter}`)
-            .then(r=>r.json())
-            .then(d=>{
-                setMaps(d.data.maps);
-                setPageMax(Math.ceil(d.data.maps.length/20))
-                setPageNumber(1)
-                })
-            
-        }
-    }
-},[chapter,chapterData])
-
-
-
-const [pageNumber, setPageNumber] = React.useState(1); 
-const [pageMax, setPageMax] = React.useState(0); 
-const [navState, setNavState] = React.useState(0); // eslint-disable-next-line
-React.useEffect(() => {NavClick();}, [[],navState]);
-function NavClick() {
-    if(profileData!==null){
-    const btn = document.querySelectorAll("#section2 button");
-    btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"});
-    btn[navState].style.backgroundColor = "#202232";
-
-    document.querySelectorAll("section").forEach((e,i)=>i>=2?e.style.display="none":"")
-    if(navState === 0){document.querySelectorAll(".profile1").forEach((e) => {e.style.display = "block"});}
-    if(navState === 1){document.querySelectorAll(".profile2").forEach((e) => {e.style.display = "block"});}
-}
-}
-function UpdateProfile(){
-    fetch(`https://lp.ardapektezol.com/api/v1/profile`,{
-      method: 'POST',
-      headers: {Authorization: token}
-    }).then(r=>r.json())
-    .then(d=>d.success?window.alert("profile updated"):window.alert(`Error: ${d.message}`))
-}
-
-function TimeAgo(date) {
-    const seconds = Math.floor((new Date() - date) / 1000);
-  
-    let interval = Math.floor(seconds / 31536000);
-    if (interval > 1) {return interval + ' years ago';}
-  
-    interval = Math.floor(seconds / 2592000);
-    if (interval > 1) {return interval + ' months ago';}
-  
-    interval = Math.floor(seconds / 86400);
-    if (interval > 1) {return interval + ' days ago';}
-  
-    interval = Math.floor(seconds / 3600);
-    if (interval > 1) {return interval + ' hours ago';}
-  
-    interval = Math.floor(seconds / 60);
-    if (interval > 1) {return interval + ' minutes ago';}
-  
-    if(seconds < 10) return 'just now';
-  
-    return Math.floor(seconds) + ' seconds ago';
-  };
-
-function TicksToTime(ticks) {
-
-    let seconds = Math.floor(ticks/60)
-    let minutes = Math.floor(seconds/60)
-    let hours = Math.floor(minutes/60)
-
-    let milliseconds = Math.floor((ticks%60)*1000/60)
-    seconds = seconds % 60;
-    minutes = minutes % 60;
-
-  return `${hours===0?"":hours+":"}${minutes===0?"":hours>0?minutes.toString().padStart(2, '0')+":":(minutes+":")}${minutes>0?seconds.toString().padStart(2, '0'):seconds}.${milliseconds.toString().padStart(3, '0')} (${ticks})`;
-}
-
-
-if(profileData!==null){
-return (
-    <main>
-        <section id='section1' className='profile'>
-
-            {profileData.profile?(
-                <div id='profile-image' onClick={()=>UpdateProfile()}>
-                    <img src={profileData.avatar_link} alt=""></img>
-                    <span>Refresh</span>
-                </div>
-                ):(
-                <div>
-                    <img src={profileData.avatar_link} alt=""></img>
-                </div>
-                )}
-
-            <div id='profile-top'>
-                <div>
-                    <div>{profileData.user_name}</div>
-                    <div>
-                        {profileData.country_code==="XX"?"":<img src={`https://flagcdn.com/w80/${profileData.country_code.toLowerCase()}.jpg`} alt={profileData.country_code} />}
-                    </div>
-                    <div>
-                    {profileData.titles.map(e=>(
-                        <span className="titles" style={{backgroundColor:`#${e.color}`}}>
-                            {e.name}
-                        </span>
-                    ))}
-                    </div>
-                </div>
-                <div>
-                    {profileData.links.p2sr==="-"?"":<a href={profileData.links.p2sr}><img src={img17} alt="Steam" /></a>}
-                    {profileData.links.p2sr==="-"?"":<a href={profileData.links.p2sr}><img src={img15} alt="Twitch" /></a>}
-                    {profileData.links.p2sr==="-"?"":<a href={profileData.links.p2sr}><img src={img16} alt="Youtube" /></a>}
-                    {profileData.links.p2sr==="-"?"":<a href={profileData.links.p2sr}><img src={img4} alt="P2SR" style={{padding:"0"}} /></a>}
-                </div>
-
-            </div>
-            <div id='profile-bottom'>
-                <div>
-                    <span>Overall</span>
-                    <span>{profileData.rankings.overall.rank===0?"N/A ":"#"+profileData.rankings.overall.rank+" "} 
-                        <span>({profileData.rankings.overall.completion_count}/{profileData.rankings.overall.completion_total})</span>
-                    </span>
-                </div>
-                <div>
-                    <span>Singleplayer</span>
-                    <span>{profileData.rankings.singleplayer.rank===0?"N/A ":"#"+profileData.rankings.singleplayer.rank+" "} 
-                        <span>({profileData.rankings.singleplayer.completion_count}/{profileData.rankings.singleplayer.completion_total})</span>
-                    </span>
-                </div>                
-                <div>
-                    <span>Cooperative</span>
-                    <span>{profileData.rankings.cooperative.rank===0?"N/A ":"#"+profileData.rankings.cooperative.rank+" "} 
-                        <span>({profileData.rankings.cooperative.completion_count}/{profileData.rankings.cooperative.completion_total})</span>
-                    </span>
-                </div>
-            </div>
-        </section>
-
-
-        <section id='section2' className='profile'>
-            <button onClick={()=>setNavState(0)}><img src={img5} alt="" />&nbsp;Player Records</button>
-            <button onClick={()=>setNavState(1)}><img src={img14} alt="" />&nbsp;Statistics</button>
-        </section>
-
-
-
-
-
-        <section id='section3' className='profile1'>
-            <div id='profileboard-nav'>
-                {gameData===null?<select>error</select>:
-
-                    <select id='select-game' 
-                    onChange={()=>setGame(document.querySelector('#select-game').value)}>
-                        <option value={0} key={0}>All Scores</option>
-                    {gameData.map((e,i)=>(
-                        <option value={e.id} key={i+1}>{e.name}</option>
-                        ))}</select>
-                    }
-                
-                {game==0? 
-                <select disabled>
-                    <option>All Scores</option>
-                </select>
-                :chapterData===null?<select></select>:
-                    
-                    <select id='select-chapter'
-                    onChange={()=>setChapter(document.querySelector('#select-chapter').value)}>
-                    <option value="0" key="0">All</option>
-                    {chapterData.chapters.filter(e=>e.is_disabled===false).map((e,i)=>(
-                        <option value={e.id} key={i+1}>{e.name}</option>
-                        ))}</select>
-                    }
-            </div>
-            <div id='profileboard-top'>
-                <span><span>Map Name</span><img src={img19} alt="" /></span>
-                <span style={{justifyContent:'center'}}><span>Portals</span><img src={img19} alt="" /></span>
-                <span style={{justifyContent:'center'}}><span>WRΔ </span><img src={img19} alt="" /></span>
-                <span style={{justifyContent:'center'}}><span>Time</span><img src={img19} alt="" /></span>
-                <span> </span>
-                <span><span>Rank</span><img src={img19} alt="" /></span>
-                <span><span>Date</span><img src={img19} alt="" /></span>
-                <div id='page-number'>
-                    <div>
-                        <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
-                        ><i className='triangle' style={{position:'relative',left:'-5px',}}></i> </button>
-                        <span>{pageNumber}/{pageMax}</span>
-                        <button onClick={() => pageNumber === pageMax? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
-                        ><i className='triangle' style={{position:'relative',left:'5px',transform:'rotate(180deg)'}}></i> </button>
-                    </div>
-                </div>
-            </div>
-            <hr/>
-            <div id='profileboard-records'>
-
-            {game == 0 && profileData !== null
-  ?   (
-    
-    profileData.records.sort((a,b)=>a.map_id - b.map_id)
-    .map((r, index) => (
-        
-        Math.ceil((index+1)/20)===pageNumber ? (
-    <button className="profileboard-record" key={index}>
-    {r.scores.map((e,i)=>(<>
-    {i!==0?<hr style={{gridColumn:"1 / span 8"}}/>:""}
-    
-      <span>{r.map_name}</span>
-        
-      <span style={{ display: "grid" }}>{e.score_count}</span>
-
-      <span style={{ display: "grid" }}>{e.score_count-r.map_wr_count}</span>
-      <span style={{ display: "grid" }}>{TicksToTime(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" }}>
-
-        <button onClick={()=>{window.alert(`Demo ID: ${e.demo_id}`)}}><img src={img13} alt="demo_id" /></button>
-        <button onClick={()=>window.location.href=`https://lp.ardapektezol.com/api/v1/demos?uuid=${e.demo_id}`}><img src={img12} alt="download" /></button>
-          {i===0&&r.scores.length>1?<button onClick={()=>
-            {
-                document.querySelectorAll(".profileboard-record")[index%20].style.height==="44px"||
-                document.querySelectorAll(".profileboard-record")[index%20].style.height===""?
-                document.querySelectorAll(".profileboard-record")[index%20].style.height=`${r.scores.length*46}px`:
-                document.querySelectorAll(".profileboard-record")[index%20].style.height="44px"
-            }
-          }><img src={img18} alt="history" /></button>:""}
-
-      </span>
-      </>))}
-
-    </button>
-        ) : ""
-  ))) : maps !== null  ? 
- 
-   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 = profileData.records.find((e) => e.map_id === r.id);
-      return record === undefined ? (
-        <button className="profileboard-record" key={index} style={{backgroundColor:"#1b1b20"}}>
-          <span>{r.name}</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>
-        </button>
-      ) : (
-          <button className="profileboard-record" key={index}>
-          {record.scores.map((e,i)=>(<>
-                {i!==0?<hr style={{gridColumn:"1 / span 8"}}/>:""}
-          <span>{r.name}</span>
-          <span style={{ display: "grid" }}>{record.scores[i].score_count}</span>
-          <span style={{ display: "grid" }}>{record.scores[i].score_count-record.map_wr_count}</span>
-          <span style={{ display: "grid" }}>{TicksToTime(record.scores[i].score_time)}</span>
-          <span> </span>
-          {i===0?<span>#{record.placement}</span>:<span> </span>}
-          <span>{record.scores[i].date.split("T")[0]}</span>
-          <span style={{ flexDirection: "row-reverse" }}>
-
-            <button onClick={()=>{window.alert(`Demo ID: ${e.demo_id}`)}}><img src={img13} alt="demo_id" /></button>
-            <button onClick={()=>window.location.href=`https://lp.ardapektezol.com/api/v1/demos?uuid=${e.demo_id}`}><img src={img12} alt="download" /></button>
-              {i===0&&record.scores.length>1?<button onClick={()=>
-                {
-                    document.querySelectorAll(".profileboard-record")[index%20].style.height==="44px"||
-                    document.querySelectorAll(".profileboard-record")[index%20].style.height===""?
-                    document.querySelectorAll(".profileboard-record")[index%20].style.height=`${record.scores.length*46}px`:
-                    document.querySelectorAll(".profileboard-record")[index%20].style.height="44px"
-                }
-              }><img src={img18} alt="history" /></button>:""}
-
-            </span>
-            </>))}
-        </button>
-
-      )
-      }else{return null}
-    }):(<>{console.warn(maps)}</>)}
-            </div>
-        </section>
-
-    </main>
-)}
-}
-    
-
diff --git a/frontend/src/components/pages/summary.js b/frontend/src/components/pages/summary.js
deleted file mode 100644
index d276408..0000000
--- a/frontend/src/components/pages/summary.js
+++ /dev/null
@@ -1,650 +0,0 @@
-import React, { useEffect } from 'react';
-import { useLocation, Link }  from "react-router-dom";
-import ReactMarkdown from 'react-markdown'
-
-import "./summary.css";
-
-import img4 from "../../imgs/4.png"
-import img5 from "../../imgs/5.png"
-import img6 from "../../imgs/6.png"
-import img12 from "../../imgs/12.png"
-import img13 from "../../imgs/13.png"
-import Modview from "./summary_modview.js"
-
-export default function Summary(prop) {
-const {token,mod} = prop
-const fakedata={} //for debug   
-
-    const location = useLocation()
-
-    //fetching data
-    const [data, setData] = React.useState(null);
-    React.useEffect(() => {
-    setData(null)
-    setDiscussionThread(null)
-    setCreatePostState(0)
-    setSelectedRun(0)
-    setCatState(1)
-        fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/summary`)
-        .then(r => r.json())
-        .then(d => {
-            if(Object.keys(fakedata).length!==0){setData(fakedata)} 
-            else{setData(d.data)}
-            if(d.data.summary.routes.length===0){d.data.summary.routes[0]={"category": "","history": {"score_count": 0,},"rating": 0,"description": "","showcase": ""}} 
-        })
-        // eslint-disable-next-line
-    }, [location.pathname]);
-
-    const [pageNumber, setPageNumber] = React.useState(1);
-    const [lbData, setLbData] = React.useState(null);
-    React.useEffect(() => {
-        fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/leaderboards?page=${pageNumber}`)
-        .then(r => r.json())
-        .then(d => setLbData(d))
-        // eslint-disable-next-line
-    }, [pageNumber,location.pathname]);
-
-    const [discussions,setDiscussions] = React.useState(null)
-    function fetchDiscussions() {
-        fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions`)
-        .then(r=>r.json())
-        .then(d=>setDiscussions(d.data.discussions))
-    }
-    
-    React.useEffect(()=>{
-        fetchDiscussions()
-    },[location.pathname])
-
-
-
-const [discussionThread,setDiscussionThread] = React.useState(null)
-function openDiscussion(x){
-    fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions/${x}`)
-    .then(r=>r.json())
-    .then(d=>setDiscussionThread(d.data.discussion)) 
-}
-const [discussionSearch, setDiscussionSearch] = React.useState("")
-
-
-
-
-const [navState, setNavState] = React.useState(0); // eslint-disable-next-line
-React.useEffect(() => {NavClick();}, [[],navState]);
-
-function NavClick() {
-    if(data!==null){
-    const btn = document.querySelectorAll("#section2 button.nav-button");
-    btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"});
-    btn[navState].style.backgroundColor = "#202232";
-
-    document.querySelectorAll("section").forEach((e,i)=>i>=2?e.style.display="none":"")
-    if(navState === 0){document.querySelectorAll(".summary1").forEach((e) => {e.style.display = "grid"});}
-    if(navState === 1){document.querySelectorAll(".summary2").forEach((e) => {e.style.display = "block"});}
-    if(navState === 2){document.querySelectorAll(".summary3").forEach((e) => {e.style.display = "block"});}
-}}
-
-
-const [catState, setCatState] = React.useState(1); // eslint-disable-next-line
-React.useEffect(() => {CatClick();}, [[],catState]);
-
-function CatClick() {
-    if(data!==null){
-    const btn = document.querySelectorAll("#section3 #category span button");
-    btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"});
-    btn[catState-1].style.backgroundColor = "#202232";
-}}
-React.useEffect(()=>{
-    if(data!==null && data.summary.routes.filter(e=>e.category.id===catState).length!==0){
-        selectRun(0,catState)} // eslint-disable-next-line
-},[catState,data])
-
-
-const [hisState, setHisState] = React.useState(0); // eslint-disable-next-line
-React.useEffect(() => {HisClick();}, [[],hisState]);
-
-function HisClick() {
-    if(data!==null){
-    const btn = document.querySelectorAll("#section3 #history span button");
-    btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"});
-    btn[hisState].style.backgroundColor = "#202232";
-    
-}}
-
-const [selectedRun,setSelectedRun] = React.useState(0)
-
-function selectRun(x,y){
-    let r = document.querySelectorAll("button.record")
-    r.forEach(e=>e.style.backgroundColor="#2b2e46")
-    r[x].style.backgroundColor="#161723"
-
-
-    if(data!==null && data.summary.routes.length!==0 && data.summary.routes.length!==0){
-    if(y===2){x+=data.summary.routes.filter(e=>e.category.id<2).length}
-    if(y===3){x+=data.summary.routes.filter(e=>e.category.id<3).length}
-    if(y===4){x+=data.summary.routes.filter(e=>e.category.id<4).length}
-    setSelectedRun(x)
-    }
-}
-
-function graph(state) {
-    // this is such a mess
-    let graph = data.summary.routes.filter(e=>e.category.id===catState)
-    let graph_score = []
-    data.summary.routes.filter(e=>e.category.id===catState).forEach(e=>graph_score.push(e.history.score_count))
-    let graph_dates = []
-    data.summary.routes.filter(e=>e.category.id===catState).forEach(e=>graph_dates.push(e.history.date.split("T")[0]))
-    let graph_max = graph[graph.length-1].history.score_count
-    let graph_numbers = []
-    for (let i=graph_max;i>=0;i--){
-        graph_numbers[i]=i
-    }
-
-    switch (state) {
-        case 1: //numbers
-            return graph_numbers
-            .reverse().map(e=>(
-                graph_score.includes(e) || e===0 ?
-                <span>{e}<br/></span>
-                :
-                <span><br/></span>
-                ))
-        case 2: // graph
-        let g = 0
-        let h = 0
-        return  graph_numbers.map((e,j)=>(
-            <tr id={'graph_row-'+(graph_max-j)}
-            data-graph={ graph_score.includes(graph_max-j) ? g++ : 0}
-            data-graph2={h=0}
-            
-            >
-                {
-                    graph_score.map((e,i)=>(                    
-                    <>
-                        <td className='graph_ver'
-                        data-graph={ h++ }
-                        style={{outline: 
-                             g===h-1 ? 
-                             "1px solid #2b2e46" : g>=h ? "1px dashed white" : "0" }}
-                        ></td>
-                        
-                        {g===h && graph_score.includes(graph_max-j) ? 
-                        <button className='graph-button'
-                        onClick={()=>{
-                            selectRun(graph_dates.length-(i-1),catState);
-                            }}
-                        style={{left: `calc(100% / ${graph_dates.length} * ${h-1})`}}
-                        ></button> 
-                        : ""}
-                        
-                        <td className='graph_hor' id={'graph_table-'+i++}
-                        style={{
-                            outline: 
-                            graph_score.includes(graph_max-j) ? 
-                            g>=h ? 
-                            g-1>=h ? "1px dashed #2b2e46" : "1px solid white" : "0"  
-                            : "0"}}
-                        ></td>
-
-                        
-
-                        <td className='graph_hor' id={'graph_table-'+i++}
-                        style={{outline: 
-                            graph_score.includes(graph_max-j) ?
-                            g>=h ? 
-                            g-1>=h ? "1px dashed #2b2e46" : "1px solid white" : "0"  
-                            : "0"}}
-                        ></td>
-
-                    </>
-                    ))
-                    
-                }
-                
-            </tr>
-        )) 
-
-        case 3: // dates
-                return graph_dates
-                .reverse().map(e=>(
-                    <span>{e}</span>
-                    ))
-            default:
-                break;
-
-    }
-       
-}
-
-const [vid,setVid] = React.useState("")
-React.useEffect(()=>{
-    if(data!==null){
-        let showcase = data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].showcase
-        showcase.length>6 ? setVid("https://www.youtube.com/embed/"+YouTubeGetID(showcase))
-        : setVid("")
-    } // eslint-disable-next-line 
-},[[],selectedRun])
-
-function YouTubeGetID(url){
-    url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
-    return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_]/i)[0] : url[0];
- }
-
-function TimeAgo(date) {
-    // const seconds = Math.floor((new Date() - date) / 1000);
-    
-    const seconds = Math.floor(((new Date(new Date() - (date.getTimezoneOffset()*-60000))) - date) / 1000);
-    
-    let interval = Math.floor(seconds / 31536000);
-    if (interval === 1) {return interval + ' year ago';}
-    if (interval > 1) {return interval + ' years ago';}
-  
-    interval = Math.floor(seconds / 2592000);
-    if (interval === 1) {return interval + ' month ago';}
-    if (interval > 1) {return interval + ' months ago';}
-  
-    interval = Math.floor(seconds / 86400);
-    if (interval === 1) {return interval + ' day ago';}
-    if (interval > 1) {return interval + ' days ago';}
-  
-    interval = Math.floor(seconds / 3600);
-    if (interval === 1) {return interval + ' hour ago';}
-    if (interval > 1) {return interval + ' hours ago';}
-  
-    interval = Math.floor(seconds / 60);
-    if (interval === 1) {return interval + ' minute ago';}
-    if (interval > 1) {return interval + ' minutes ago';}
-  
-    if(seconds < 10) return 'just now';
-  
-    return Math.floor(seconds) + ' seconds ago';
-  };
-
-function TicksToTime(ticks) {
-
-    let seconds = Math.floor(ticks/60)
-    let minutes = Math.floor(seconds/60)
-    let hours = Math.floor(minutes/60)
-
-    let milliseconds = Math.floor((ticks%60)*1000/60)
-    seconds = seconds % 60;
-    minutes = minutes % 60;
-
-  return `${hours===0?"":hours+":"}${minutes===0?"":hours>0?minutes.toString().padStart(2, '0')+":":(minutes+":")}${minutes>0?seconds.toString().padStart(2, '0'):seconds}.${milliseconds.toString().padStart(3, '0')} (${ticks})`;
-}
-
-function PostComment() {
-
-    fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions/${discussionThread.id}`,{
-    method:"POST",
-    headers:{authorization:token},
-    body:JSON.stringify({"comment":document.querySelector("#discussion-send>input").value})
-})
-.then(r=>r.json())
-.then(d=>{
-    document.querySelector("#discussion-send>input").value=""
-    openDiscussion(discussionThread.id)
-})
-}
-
-
-const [createPostState,setCreatePostState] = React.useState(0)
-function CreatePost() {
-
-    fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions`,{
-        method:"POST",
-        headers:{authorization:token},
-        body:JSON.stringify({"title":document.querySelector("#discussion-create-title").value,"content":document.querySelector("#discussion-create-content").value})
-    })
-    .then(r=>r.json())
-    .then(d=>{
-        setCreatePostState(0)
-        fetchDiscussions()
-    })
-}
-
-function DeletePost(post) {
-if(window.confirm(`Are you sure you want to remove post: ${post.title}?`)){
-    console.log("deleted",post.id)
-    fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions/${post.id}`,{
-        method:"DELETE",
-        headers:{authorization:token},
-    })
-    .then(r=>r.json())
-    .then(d=>{
-        fetchDiscussions()
-    })
-}
-}
-
-
-if(data!==null){
-    console.log(data)
-    
-let current_chapter = data.map.chapter_name
-let isCoop = false;
-if (data.map.game_name == "Portal 2 - Cooperative") {
-    isCoop = true
-}
-
-current_chapter = data.map.chapter_name.split(" ")
-// current_chapter = current_chapter.split("-")
-current_chapter = current_chapter[1]
-
-return (
-    <>
-        {token!==null?mod===true?<Modview selectedRun={selectedRun} data={data} token={token}/>:"":""}
-
-        <div id='background-image'>
-            <img src={data.map.image} alt="" />
-        </div>
-    <main>
-        <section id='section1' className='summary1'>
-            <div>
-                <Link to="/games"><button className='nav-button' style={{borderRadius: "20px 0px 0px 20px"}}><i className='triangle'></i><span>Games list</span></button></Link>
-                <Link to={`/games/${!data.map.is_coop ? "1" : "2"}?chapter=${current_chapter}`}><button className='nav-button' style={{borderRadius: "0px 20px 20px 0px", marginLeft: "2px"}}><i className='triangle'></i><span>{data.map.chapter_name}</span></button></Link>
-                <br/><span><b>{data.map.map_name}</b></span>
-            </div>
-
-
-        </section>
-
-        <section id='section2' className='summary1'>
-                <button className='nav-button' onClick={()=>setNavState(0)}><img src={img4} alt="" /><span>Summary</span></button>
-                <button className='nav-button' onClick={()=>setNavState(1)}><img src={img5} alt="" /><span>Leaderboards</span></button>
-                <button className='nav-button' onClick={()=>setNavState(2)}><img src={img6} alt="" /><span>Discussions</span></button>
-        </section>
-        <section id='section3' className='summary1'>
-            <div id='category'
-            style={data.map.image===""?{backgroundColor:"#202232"}:{}}>
-                <img src={data.map.image} alt="" id='category-image'></img>
-                <p><span className='portal-count'>{data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].history.score_count}</span>
-                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].history.score_count === 1 ? ` portal` : ` portals` }</p>
-                <span>
-                    <button onClick={()=>setCatState(1)}>CM</button>
-                    <button onClick={()=>setCatState(2)}>NoSLA</button>
-                    {data.map.is_coop?<button onClick={()=>setCatState(3)}>SLA</button>
-                    :<button onClick={()=>setCatState(3)}>Inbounds SLA</button>}
-                    <button onClick={()=>setCatState(4)}>Any%</button>
-                </span>
-
-            </div>
-            
-            <div id='history'>
-
-                <div style={{display: hisState ? "none" : "block"}}>
-                {data.summary.routes.filter(e=>e.category.id===catState).length===0 ? <h5>There are no records for this map.</h5> : 
-                    <>
-                    <div className='record-top'>
-                        <span>Date</span>
-                        <span>Record</span>
-                        <span>First completion</span>
-                    </div>
-                    <hr/>
-                    <div id='records'>
-
-                    {data.summary.routes
-                    .sort((a, b) => a.history.score_count - b.history.score_count)
-                    .filter(e=>e.category.id===catState)
-                    .map((r, index) => (
-                        <button className='record' key={index} onClick={()=>{
-                            selectRun(index,r.category.id);
-                            }}>
-                            <span>{ new Date(r.history.date).toLocaleDateString(
-                                "en-US", { month: 'long', day: 'numeric', year: 'numeric' }
-                            )}</span>
-                            <span>{r.history.score_count}</span>
-                            <span>{r.history.runner_name}</span>
-                        </button>
-                    ))}
-                    </div>
-                    </>
-                    }
-                    </div>
-
-                    <div style={{display: hisState ? "block" : "none"}}>
-                        {data.summary.routes.filter(e=>e.category.id===catState).length===0 ? <h5>There are no records for this map.</h5> : 
-                        <div id='graph'>
-                            <div>{graph(1)}</div>
-                            <div>{graph(2)}</div>
-                            <div>{graph(3)}</div>
-                        </div>
-                            }
-                    </div> 
-                    <span>
-                        <button onClick={()=>setHisState(0)}>List</button>
-                        <button onClick={()=>setHisState(1)}>Graph</button>
-                    </span>
-                </div>
-                
-                
-        </section>
-        <section id='section4' className='summary1'>
-        <div id='difficulty'>
-                <span>Difficulty</span>
-                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 0 ? (<span>N/A</span>):null}
-                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 1 ? (<span style={{color:"lime"}}>Very easy</span>):null}
-                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 2 ? (<span style={{color:"green"}}>Easy</span>):null}
-                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 3 ? (<span style={{color:"yellow"}}>Medium</span>):null}
-                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 4 ? (<span style={{color:"orange"}}>Hard</span>):null}
-                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 5 ? (<span style={{color:"red"}}>Very hard</span>):null}
-                <div>
-                    {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 1 ? (<div className='difficulty-rating' style={{backgroundColor:"lime"}}></div>) : (<div className='difficulty-rating'></div>)}
-                    {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 2 ? (<div className='difficulty-rating' style={{backgroundColor:"green"}}></div>) : (<div className='difficulty-rating'></div>)}
-                    {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 3 ? (<div className='difficulty-rating' style={{backgroundColor:"yellow"}}></div>) : (<div className='difficulty-rating'></div>)}
-                    {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 4 ? (<div className='difficulty-rating' style={{backgroundColor:"orange"}}></div>) : (<div className='difficulty-rating'></div>)}
-                    {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 5 ? (<div className='difficulty-rating' style={{backgroundColor:"red"}}></div>) : (<div className='difficulty-rating'></div>)}
-                </div>
-            </div>
-            <div id='count'>
-                <span>Completion count</span>
-                <div>{catState===1?data.summary.routes[selectedRun].completion_count:"N/A"}</div>
-            </div>
-        </section>
-
-        <section id='section5' className='summary1'>
-            <div id='description'>
-                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].showcase!=="" ?
-                <iframe title='Showcase video' src={vid}> </iframe>
-                : ""}
-                <h3>Route description</h3>
-                <span id='description-text'>
-                    <ReactMarkdown>
-                        {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].description}
-                    </ReactMarkdown>
-                </span>
-            </div>    
-        </section>
-
-        {/* Leaderboards */}
-
-        {lbData===null?"":lbData.success===false?(
-            <section id='section6' className='summary2'>
-                <h1 style={{textAlign:"center"}}>Map is not available for competitive boards.</h1>
-            </section>
-        ):lbData.data.records.length===0?(
-            <section id='section6' className='summary2'>
-            <h1 style={{textAlign:"center"}}>No records found.</h1>
-        </section>
-        ):(
-        <section id='section6' className='summary2'>
-            
-            <div id='leaderboard-top'
-            style={lbData.data.map.is_coop?{gridTemplateColumns:"7.5% 40% 7.5% 15% 15% 15%"}:{gridTemplateColumns:"7.5% 30% 10% 20% 17.5% 15%"}}
-            >
-                <span>Place</span>
-                
-                {lbData.data.map.is_coop?(
-                    <div id='runner'>
-                        <span>Host</span>
-                        <span>Partner</span>
-                    </div>
-                ):(
-                    <span>Runner</span>
-                )}
-                
-                <span>Portals</span>
-                <span>Time</span>
-                <span>Date</span>
-                <div id='page-number'>
-                    <div>
-
-                    <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
-                    ><i className='triangle' style={{position:'relative',left:'-5px',}}></i> </button>
-                    <span>{lbData.data.pagination.current_page}/{lbData.data.pagination.total_pages}</span>
-                    <button onClick={() => pageNumber === lbData.data.pagination.total_pages ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
-                    ><i className='triangle' style={{position:'relative',left:'5px',transform:'rotate(180deg)'}}></i> </button>
-                    </div>
-                </div>
-            </div>
-            <hr/>
-            <div id='leaderboard-records'>
-            {lbData.data.records.map((r, index) => (
-                    <span className='leaderboard-record' key={index} 
-                    style={lbData.data.map.is_coop?{gridTemplateColumns:"3% 4.5% 40% 4% 3.5% 15% 15% 14.5%"}:{gridTemplateColumns:"3% 4.5% 30% 4% 6% 20% 17% 15%"}}
-                    >
-                        <span>{r.placement}</span>
-                        <span> </span>
-                        {lbData.data.map.is_coop?(
-                        <div>
-                            <span><img src={r.host.avatar_link} alt='' /> &nbsp; {r.host.user_name}</span>
-                            <span><img src={r.partner.avatar_link} alt='' /> &nbsp; {r.partner.user_name}</span>
-                        </div>
-                        ):(
-                        <div><span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span></div>
-                        )}
-                        
-                        <span>{r.score_count}</span>
-                        <span> </span>
-                        <span>{TicksToTime(r.score_time)}</span>
-                        <span className='hover-popup' popup-text={r.record_date.replace("T",' ').split(".")[0]}>{ TimeAgo(new Date(r.record_date.replace("T"," ").replace("Z",""))) }</span>
-                        
-                        {lbData.data.map.is_coop?(
-                        <span>
-                            <button onClick={()=>{window.alert(`Host demo ID: ${r.host_demo_id} \nParnter demo ID: ${r.partner_demo_id}`)}}><img src={img13} alt="demo_id" /></button>
-                            <button onClick={()=>window.location.href=`https://lp.ardapektezol.com/api/v1/demos?uuid=${r.partner_demo_id}`}><img src={img12} alt="download" style={{filter:"hue-rotate(160deg) contrast(60%) saturate(1000%)"}}/></button>
-                            <button onClick={()=>window.location.href=`https://lp.ardapektezol.com/api/v1/demos?uuid=${r.host_demo_id}`}><img src={img12} alt="download" style={{filter:"hue-rotate(300deg) contrast(60%) saturate(1000%)"}}/></button>
-                        </span>
-                        ):(
-
-                        <span>
-                            <button onClick={()=>{window.alert(`Demo ID: ${r.demo_id}`)}}><img src={img13} alt="demo_id" /></button>
-                            <button onClick={()=>window.location.href=`https://lp.ardapektezol.com/api/v1/demos?uuid=${r.demo_id}`}><img src={img12} alt="download" /></button>
-                        </span>
-                            )}
-                    </span>
-                    ))}
-            </div>
-        </section>
-        )}
-
-
-        {/* Discussions */}
-        <section id='section7' className='summary3'>
-      
-    {discussionThread === null ? (
-        createPostState === 0 ? (
-        discussions !== null ? (
-        // Main screen
-        <>
-        <div id='discussion-search'> 
-            <input type="text" value={discussionSearch} placeholder={"Search for posts..."} onChange={()=>setDiscussionSearch(document.querySelector("#discussion-search>input").value)} />
-            <div><button onClick={()=>setCreatePostState(1)}>New Post</button></div>
-        </div>      
-        {discussions.filter(f=>f.title.includes(discussionSearch)).sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at))
-        .map((e, i) => (
-            <div id='discussion-post'>
-
-            <button key={e.id} onClick={() => openDiscussion(e.id)}>
-                <span>{e.title}</span>
-                
-                {token!==null?e.creator.steam_id===JSON.parse(atob(token.split(".")[1])).sub?
-                    <button onClick={()=>DeletePost(e)}>Delete Post</button>
-                    :<span></span>:<span></span>}
-                <span><b>{e.creator.user_name}:</b> {e.content}</span>
-                <span>last updated: {TimeAgo(new Date(e.updated_at.replace("T"," ").replace("Z","")))}</span>
-            </button>
-            </div>
-        ))}
-      </>
-            ):(   
-
-            // Main screen (no posts)
-    <>
-    <div id='discussion-search'> 
-        <input type="text" value={discussionSearch} placeholder={"Search for posts..."} onChange={()=>setDiscussionSearch(document.querySelector("#discussion-search>input").value)} />
-        <div><button onClick={()=>setCreatePostState(1)}>New Post</button></div>
-    </div> 
-    <span style={{textAlign:"center",display:"block"}}>no discussions</span>
-</>
-            )
-    ):(
-    // Creating post 
-    <div id='discussion-create'>
-        <span>Create post</span>
-        <button onClick={()=>setCreatePostState(0)}>X</button>
-        <div style={{gridColumn:"1 / span 2"}}>
-            <input id='discussion-create-title' placeholder='Title...'></input>
-            <input id='discussion-create-content' placeholder='Enter the comment...' ></input>
-        </div>
-        <div style={{placeItems:"end",gridColumn:"1 / span 2"}}>
-        <button id='discussion-create-button' onClick={()=>CreatePost()}>Post</button>
-        </div>
-            
-    </div>
-
-    )):(
-    // Post screen
-    <div id='discussion-thread'>
-        <div>
-        <span>{discussionThread.title}</span>
-        <button onClick={()=>setDiscussionThread(null)}>X</button>
-        </div>
-
-        <div>
-            <img src={discussionThread.creator.avatar_link} alt="" />
-            <div>
-                <span>{discussionThread.creator.user_name}</span>
-                <span>{TimeAgo(new Date(discussionThread.created_at.replace("T"," ").replace("Z","")))}</span>
-                <span>{discussionThread.content}</span>
-            </div>
-            {discussionThread.comments!==null?
-            discussionThread.comments.sort((a, b) => new Date(a.date) - new Date(b.date))
-            .map(e=>(
-              <>
-                <img src={e.user.avatar_link} alt="" />
-                <div>
-                    <span>{e.user.user_name}</span>
-                    <span>{TimeAgo(new Date(e.date.replace("T"," ").replace("Z","")))}</span>
-                    <span>{e.comment}</span>
-                </div>
-              </>
-
-            )):""}
-                    
-
-        </div>
-        <div id='discussion-send'>
-            <input type="text" placeholder={"Message"} onKeyDown={(e)=>e.key==="Enter"?PostComment():""}/>
-            <div><button onClick={()=>PostComment()}>Send</button></div>
-        </div>
-
-    </div>
-    
-    
-    )}
-
-        </section>
-
-    </main>
-    </>
-    )
-}else{
-    return (
-        <main></main>
-    )
-}
-
-
-}
-
-
diff --git a/frontend/src/components/pages/summary_modview.js b/frontend/src/components/pages/summary_modview.js
deleted file mode 100644
index 3541c48..0000000
--- a/frontend/src/components/pages/summary_modview.js
+++ /dev/null
@@ -1,254 +0,0 @@
-import React from 'react';
-import { useLocation }  from "react-router-dom";
-import ReactMarkdown from 'react-markdown'
-
-import "./summary_modview.css";
-
-
-export default function Modview(prop) {
-const {selectedRun,data,token} = prop
-
-const [menu,setMenu] = React.useState(0)
-React.useEffect(()=>{
-if(menu===3){ // add
-    document.querySelector("#modview-route-name>input").value=""
-    document.querySelector("#modview-route-score>input").value=""
-    document.querySelector("#modview-route-date>input").value=""
-    document.querySelector("#modview-route-showcase>input").value=""
-    document.querySelector("#modview-route-description>textarea").value=""
-    }
-if(menu===2){ // edit
-    document.querySelector("#modview-route-id>input").value=data.summary.routes[selectedRun].route_id
-    document.querySelector("#modview-route-name>input").value=data.summary.routes[selectedRun].history.runner_name
-    document.querySelector("#modview-route-score>input").value=data.summary.routes[selectedRun].history.score_count
-    document.querySelector("#modview-route-date>input").value=data.summary.routes[selectedRun].history.date.split("T")[0]
-    document.querySelector("#modview-route-showcase>input").value=data.summary.routes[selectedRun].showcase
-    document.querySelector("#modview-route-description>textarea").value=data.summary.routes[selectedRun].description
-}   // eslint-disable-next-line 
-},[menu])
-
-function compressImage(file) {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    return new Promise(resolve => {
-      reader.onload = () => {
-        const img = new Image();
-        img.src = reader.result;
-        img.onload = () => {
-          let {width, height} = img;
-          if (width > 550) {
-            height *= 550 / width;
-            width = 550;
-          }
-          if (height > 320) {
-            width *= 320 / height;
-            height = 320;
-          }
-          const canvas = document.createElement('canvas');
-          canvas.width = width;
-          canvas.height = height;
-          canvas.getContext('2d').drawImage(img, 0, 0, width, height);
-          resolve(canvas.toDataURL(file.type, 0.6));
-        };
-      };
-    });
-}
-const [image,setImage] = React.useState(null)
-function uploadImage(){
-    if(window.confirm("Are you sure you want to submit this to the database?")){
-    fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/image`,{
-        method: 'PUT',
-        headers: {Authorization: token},
-        body: JSON.stringify({"image": image})
-    }).then(r=>window.location.reload())
-    }
-}
-const location = useLocation()
-function editRoute(){
-if(window.confirm("Are you sure you want to submit this to the database?")){
-    let payload = {
-        "description": document.querySelector("#modview-route-description>textarea").value===""?"No description available.":document.querySelector("#modview-route-description>textarea").value,
-        "record_date": document.querySelector("#modview-route-date>input").value+"T00:00:00Z",
-        "route_id": parseInt(document.querySelector("#modview-route-id>input").value),
-        "score_count": parseInt(document.querySelector("#modview-route-score>input").value),
-        "showcase": document.querySelector("#modview-route-showcase>input").value,
-        "user_name": document.querySelector("#modview-route-name>input").value
-      }
-      fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{
-        method: 'PUT',
-        headers: {Authorization: token},
-        body: JSON.stringify(payload)
-      }).then(r=>window.location.reload())
-    }
-}
-
-
-function addRoute(){
-    if(window.confirm("Are you sure you want to submit this to the database?")){
-    let payload = {
-        "category_id": parseInt(document.querySelector("#modview-route-category>select").value),
-        "description": document.querySelector("#modview-route-description>textarea").value===""?"No description available.":document.querySelector("#modview-route-description>textarea").value,
-        "record_date": document.querySelector("#modview-route-date>input").value+"T00:00:00Z",
-        "score_count": parseInt(document.querySelector("#modview-route-score>input").value),
-        "showcase": document.querySelector("#modview-route-showcase>input").value,
-        "user_name": document.querySelector("#modview-route-name>input").value
-      }
-      fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{
-        method: 'POST',
-        headers: {Authorization: token},
-        body: JSON.stringify(payload)
-        }).then(r=>window.location.reload())
-    }
-}
-
-function deleteRoute(){
-if(data.summary.routes[0].category==='')
-{window.alert("no run selected")}else{
-if(window.confirm(`Are you sure you want to delete this run from the database?
-${data.summary.routes[selectedRun].category.name}    ${data.summary.routes[selectedRun].history.score_count} portals    ${data.summary.routes[selectedRun].history.runner_name}`)===true){
-    console.log("deleted:",selectedRun)
-    fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{
-        method: 'DELETE',
-        headers: {Authorization: token},
-        body: JSON.stringify({"route_id":data.summary.routes[selectedRun].route_id})
-      }).then(r=>window.location.reload())
-}}
-
-}
-
-const [showButton, setShowButton] = React.useState(1)
-const modview = document.querySelector("div#modview")
-React.useEffect(()=>{
-    if(modview!==null){
-        showButton ? modview.style.transform="translateY(-68%)"
-        : modview.style.transform="translateY(0%)"
-    }
-    let modview_block = document.querySelector("#modview_block")
-    showButton===1?modview_block.style.display="none":modview_block.style.display="block"// eslint-disable-next-line 
-},[showButton])
-
-const [md,setMd] = React.useState("")
-
-return (
-    <>
-    <div id="modview_block"></div>
-        <div id='modview'>
-            <div>
-                <button onClick={()=>setMenu(1)}>edit image</button>
-                <button onClick={            
-                data.summary.routes[0].category===''?()=>window.alert("no run selected"):()=>setMenu(2)}>edit selected route</button>
-                <button onClick={()=>setMenu(3)}>add new route</button>
-                <button onClick={()=>deleteRoute()}>delete selected route</button>
-            </div>
-            <div>
-                 {showButton ?(
-                    <button onClick={()=>setShowButton(0)}>Show</button>
-                ) : (
-                    <button onClick={()=>{setShowButton(1);setMenu(0)}}>Hide</button>
-                )} 
-            </div>
-        </div>
-        {menu!==0? (
-        <div id='modview-menu'>
-        {menu===1? ( 
-            // image
-            <div id='modview-menu-image'>
-                <div>
-                    <span>current image:</span>
-                    <img src={data.map.image} alt="missing" />
-                </div>
-
-                <div>
-                    <span>new image:
-                    <input type="file" accept='image/*' onChange={e=>
-                            compressImage(e.target.files[0])
-                            .then(d=>setImage(d))
-                    }/></span>
-                    {image!==null?(<button onClick={()=>uploadImage()}>upload</button>):<span></span>}
-                    <img src={image} alt="" id='modview-menu-image-file'/>
-                    
-                </div>
-            </div>
-        ):menu===2?(
-            // edit route
-            <div id='modview-menu-edit'>
-                <div id='modview-route-id'>
-                    <span>route id:</span>
-                    <input type="number"  disabled/>
-                </div>
-                <div id='modview-route-name'>
-                    <span>runner name:</span>
-                    <input type="text"/>
-                </div>
-                <div id='modview-route-score'>
-                    <span>score:</span>
-                    <input type="number"/>
-                </div>
-                <div id='modview-route-date'>
-                    <span>date:</span>
-                    <input type="date"/>
-                </div>
-                <div id='modview-route-showcase'>
-                    <span>showcase video:</span>
-                    <input type="text"/>
-                </div>
-                <div id='modview-route-description' style={{height:"180px",gridColumn:"1 / span 5"}}>
-                    <span>description:</span>
-                    <textarea onChange={()=>setMd(document.querySelector("#modview-route-description>textarea").value)}></textarea>
-                </div>
-                <button style={{gridColumn:"2 / span 3",height:"40px"}} onClick={editRoute}>Apply</button>
-            </div>
-        ):menu===3?(
-            // add route
-            <div id='modview-menu-add'>
-                <div id='modview-route-category'>
-                    <span>category:</span>
-                    <select>
-                        <option value="1" key="1">CM</option>
-                        <option value="2" key="2">No SLA</option>
-                        {data.map.game_name==="Portal 2 - Cooperative"?"":(
-                        <option value="3" key="3">Inbounds SLA</option>)}
-                        <option value="4" key="4">Any%</option>
-                    </select>
-                </div>
-                <div id='modview-route-name'>
-                    <span>runner name:</span>
-                    <input type="text" />
-                </div>
-                <div id='modview-route-score'>
-                    <span>score:</span>
-                    <input type="number" />
-                </div>
-                <div id='modview-route-date'>
-                    <span>date:</span>
-                    <input type="date" />
-                </div>
-                <div id='modview-route-showcase'>
-                    <span>showcase video:</span>
-                    <input type="text" />
-                </div>
-                <div id='modview-route-description' style={{height:"180px",gridColumn:"1 / span 5"}}>
-                    <span>description:</span>
-                    <textarea defaultValue={"No description available."} onChange={()=>setMd(document.querySelector("#modview-route-description>textarea").value)}></textarea>
-                </div>
-                <button style={{gridColumn:"2 / span 3",height:"40px"}} onClick={addRoute}>Apply</button>
-            </div>
-        ):("error")}
-
-            {menu!==1?(
-            <div id='modview-md'>
-                <span>Markdown preview</span> 
-                <span><a href="https://commonmark.org/help/" rel="noreferrer" target='_blank'>documentation</a></span> 
-                <span><a href="https://remarkjs.github.io/react-markdown/" rel="noreferrer" target='_blank'>demo</a></span> 
-                    <p>
-                    <ReactMarkdown>{md}
-                    </ReactMarkdown>
-                    </p>
-            </div>
-            ):""}
-        </div>):""}
-        
-    </>
-)
-}
-
diff --git a/frontend/src/components/record.css b/frontend/src/components/record.css
deleted file mode 100644
index 60d47ee..0000000
--- a/frontend/src/components/record.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.record-container {
-    --padding: 20px;
-    width: calc(100% - calc(var(--padding * 2)));
-    height: 42px;
-    background-color: #2B2E46;
-    border-radius: 200px;
-    font-size: 18px;
-    display: grid;
-    grid-template-columns: 20% 25% 15% 15% 25%;
-    text-align: center;
-    padding: 0px var(--padding);
-    vertical-align: middle;
-    align-items: center;
-    margin-bottom: 6px;
-}
\ No newline at end of file
diff --git a/frontend/src/components/record.js b/frontend/src/components/record.js
deleted file mode 100644
index 80e084d..0000000
--- a/frontend/src/components/record.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useLocation, Link } from "react-router-dom";
-
-import "./record.css"
-
-export default function Record({ name, place, portals, time, date }) {
-    // const {token} = prop;
-    const [record, setRecord] = useState(null);
-    const location = useLocation();
-
-    // useEffect(() => {
-    //     console.log(name, place, portals, time, date);
-    // })
-
-    function timeSince() {
-        const now = new Date();
-        const dateNew = new Date(date);
-      
-        const secondsPast = Math.floor((now - dateNew) / 1000);
-      
-        if (secondsPast < 60) {
-          return `${secondsPast} seconds ago`;
-        }
-        if (secondsPast < 3600) {
-          const minutes = Math.floor(secondsPast / 60);
-          return `${minutes} minutes ago`;
-        }
-        if (secondsPast < 86400) {
-          const hours = Math.floor(secondsPast / 3600);
-          return `${hours} hours ago`;
-        }
-        if (secondsPast < 2592000) {
-          const days = Math.floor(secondsPast / 86400);
-          return `${days} days ago`;
-        }
-        if (secondsPast < 31536000) {
-          const months = Math.floor(secondsPast / 2592000);
-          return `${months} months ago`;
-        }
-        const years = Math.floor(secondsPast / 31536000);
-        return `${years} years ago`;
-      }
-
-    return(
-        <div className='record-container'>
-            <span>{place}</span>
-            <div style={{display: "flex", alignItems: "center"}}>
-                <img style={{height: "40px", borderRadius: "200px"}} src="https://avatars.steamstatic.com/32d110951da2339d8b8d8419bc945d9a2b150b2a_full.jpg"></img>
-                <span style={{paddingLeft: "5px", fontFamily: "BarlowSemiCondensed-SemiBold"}}>{name}</span>
-            </div>
-            <span style={{fontFamily: "BarlowCondensed-Bold", color: "#D980FF"}}>{portals}</span>
-            <span>{time}</span>
-            <span>{timeSince()}</span>
-        </div>
-    )
-}
diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
deleted file mode 100644
index 1ca17e6..0000000
--- a/frontend/src/components/sidebar.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, { useEffect } from 'react';

-import { Link, useLocation } from "react-router-dom";

-

-import "../App.css"

-import "./sidebar.css";

-import logo from "../imgs/logo.png"

-import img1 from "../imgs/1.png"

-import img2 from "../imgs/2.png"

-import img3 from "../imgs/3.png"

-import img4 from "../imgs/4.png"

-import img5 from "../imgs/5.png"

-import img6 from "../imgs/6.png"

-import img7 from "../imgs/7.png"

-import img8 from "../imgs/8.png"

-import img9 from "../imgs/9.png"

-import Login from "./login.js"

-

-export default function Sidebar(prop) {

-const {token,setToken} = prop

-const [profile, setProfile] = React.useState(null);

-

-React.useEffect(() => {

-    fetch(`https://lp.ardapektezol.com/api/v1/profile`,{

-        headers: {

-                        'Content-Type': 'application/json',

-            Authorization: token

-        }})

-    .then(r => r.json())

-    .then(d => setProfile(d.data))

-    }, [token]);

-

-// Locks search button for 300ms before it can be clicked again, prevents spam

-const [isLocked, setIsLocked] = React.useState(false);

-function HandleLock(arg) {

-if (!isLocked) {

-    setIsLocked(true);

-        setTimeout(() => setIsLocked(false), 300);

-    SidebarHide(arg)

-    }

-}

-

-

-// The menu button

-const [sidebar, setSidebar] = React.useState();

-

-// Clicked buttons

-function SidebarClick(x){

-const btn = document.querySelectorAll("button.sidebar-button");

-

-if(sidebar===1){setSidebar(0);SidebarHide()}

-

-// clusterfuck

-btn.forEach((e,i) =>{

-    btn[i].classList.remove("sidebar-button-selected")

-    btn[i].classList.add("sidebar-button-deselected")

-}) 

-btn[x].classList.add("sidebar-button-selected")

-btn[x].classList.remove("sidebar-button-deselected")

-

-}

-

-function SidebarHide(){

-const btn   = document.querySelectorAll("button.sidebar-button")

-const span  = document.querySelectorAll("button.sidebar-button>span");

-const side  = document.querySelector("#sidebar-list");

-const login = document.querySelectorAll(".login>button")[1];

-const searchbar = document.querySelector("#searchbar");

-

-if(sidebar===1){

-    setSidebar(0)

-    side.style.width="320px"

-    btn.forEach((e, i) =>{

-        e.style.width="310px"

-        e.style.padding = "0.4em 0 0 11px"

-        setTimeout(() => {

-            span[i].style.opacity="1"

-            login.style.opacity="1"

-

-        }, 100)

-    })

-    side.style.zIndex="2"

-} else {

-    side.style.width="40px";

-    searchbar.focus();

-    setSearch(searchbar.value)

-    setSidebar(1)

-    btn.forEach((e,i) =>{

-        e.style.width="40px"

-        e.style.padding = "0.4em 0 0 5px"

-        span[i].style.opacity="0"

-    }) 

-    login.style.opacity="0"

-    setTimeout(() => {

-        side.style.zIndex="0"

-    }, 300);

-    }    

-}

-// Links

-const location = useLocation()

-React.useEffect(()=>{

-    if(location.pathname==="/"){SidebarClick(1)}

-    if(location.pathname.includes("news")){SidebarClick(2)}

-    if(location.pathname.includes("games")){SidebarClick(3)}

-    if(location.pathname.includes("leaderboards")){SidebarClick(4)}

-    if(location.pathname.includes("scorelog")){SidebarClick(5)}

-    if(location.pathname.includes("profile")){SidebarClick(6)}

-    if(location.pathname.includes("rules")){SidebarClick(8)}

-    if(location.pathname.includes("about")){SidebarClick(9)}

-

-    // eslint-disable-next-line react-hooks/exhaustive-deps

-},  [location.pathname])

-

-const [search,setSearch] = React.useState(null)

-const [searchData,setSearchData] = React.useState(null)

-

-React.useEffect(()=>{

-    fetch(`https://lp.ardapektezol.com/api/v1/search?q=${search}`)

-        .then(r=>r.json())

-        .then(d=>setSearchData(d.data))

-

-}, [search])

-

-

-return (

-    <div id='sidebar'>

-        <div id='logo'> {/* logo */}

-            <img src={logo} alt="" height={"80px"}/>

-            <div id='logo-text'>

-                <span><b>PORTAL 2</b></span><br/>

-                <span>Least Portals</span>

-            </div>

-        </div>

-        <div id='sidebar-list'> {/* List */}

-            <div id='sidebar-toplist'> {/* Top */} 

-

-                <button className='sidebar-button' onClick={()=>HandleLock()}><img src={img1} alt="" /><span>Search</span></button>

-

-                <span></span>

-                

-                <Link to="/" tabIndex={-1}>

-                    <button className='sidebar-button'><img src={img2} alt="" /><span>Home&nbsp;Page</span></button>

-                </Link>

-

-                <Link to="/news" tabIndex={-1}>

-                    <button className='sidebar-button'><img src={img3} alt="" /><span>News</span></button>

-                </Link>

-

-                <Link to="/games" tabIndex={-1}>

-                    <button className='sidebar-button'><img src={img4} alt="" /><span>Games</span></button>

-                </Link>

-

-                <Link to="/leaderboards" tabIndex={-1}>

-                    <button className='sidebar-button'><img src={img5} alt="" /><span>Leaderboards</span></button>

-                </Link>

-

-                <Link to="/scorelog" tabIndex={-1}>

-                    <button className='sidebar-button'><img src={img7} alt="" /><span>Score&nbsp;Logs</span></button>

-                </Link>

-            </div>

-            <div id='sidebar-bottomlist'>

-                <span></span>

-

-                <Login setToken={setToken} profile={profile} setProfile={setProfile}/>

-

-                <Link to="/rules" tabIndex={-1}>

-                    <button className='sidebar-button'><img src={img8} alt="" /><span>Leaderboard&nbsp;Rules</span></button>

-                </Link>

-

-                <Link to="/about" tabIndex={-1}>

-                    <button className='sidebar-button'><img src={img9} alt="" /><span>About&nbsp;P2LP</span></button>

-                </Link>

-            </div>

-        </div>

-        <div> 

-            <input type="text" id='searchbar' placeholder='Search for map or a player...' onChange={()=>setSearch(document.querySelector("#searchbar").value)}/>

-

-            <div id='search-data'>

-

-            {searchData!==null?searchData.maps.map((q,index)=>(

-                <Link to={`/maps/${q.id}`} className='search-map' key={index}>

-                    <span>{q.game}</span>

-                    <span>{q.chapter}</span>

-                    <span>{q.map}</span>

-                </Link>

-            )):""}

-            {searchData!==null?searchData.players.map((q,index)=>

-                (

-                <Link to={

-                    profile!==null&&q.steam_id===profile.steam_id?`/profile`:

-                    `/users/${q.steam_id}`

-                    } className='search-player' key={index}>

-                    <img src={q.avatar_link} alt='pfp'></img>

-                    <span style={{fontSize:`${36 - q.user_name.length * 0.8}px`}}>{q.user_name}</span>

-                </Link>

-            )):""}

-

-            </div>            

-        </div>

-    </div>

-        )

-}

-

-

diff --git a/frontend/src/components/pages/games.css b/frontend/src/css/Games.css
index ec57a71..ec57a71 100644
--- a/frontend/src/components/pages/games.css
+++ b/frontend/src/css/Games.css
diff --git a/frontend/src/components/login.css b/frontend/src/css/Login.css
index b46be10..aa75f98 100644
--- a/frontend/src/components/login.css
+++ b/frontend/src/css/Login.css
@@ -13,7 +13,7 @@ span>img {
 
     padding-left: 10px;
     background-color: #00000000 !important;
-    transition: opacity .1s;
+    /* transition: opacity .1s; */
 }
 
 .login{
diff --git a/frontend/src/components/pages/summary.css b/frontend/src/css/Maps.css
index 8c6ec35..d164d3b 100644
--- a/frontend/src/components/pages/summary.css
+++ b/frontend/src/css/Maps.css
@@ -65,7 +65,7 @@
 #section3{
     margin: 40px 0 0 0;
 
-    display: none; 
+    display: grid; 
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }
@@ -239,7 +239,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
 /* Section 4: Difficulty + count */
 
 #section4{
-    display: none;
+    display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin: 40px 0 0 0;
@@ -424,6 +424,7 @@ text-align: center;
 
 .hover-popup {
     position: relative;
+    display: inline-block;
   }
   
   .hover-popup::after {
@@ -438,8 +439,13 @@ text-align: center;
     border-radius: 8px;
     visibility: hidden;
     opacity: 0;
+    color: #cdcfdf;
     /* transition: visibility 0s, opacity 0.3s ease; */
   }
+
+  .hover-popup:hover {
+    color: transparent;
+  }
   
   .hover-popup:hover::after {
     visibility: visible;
diff --git a/frontend/src/components/pages/summary_modview.css b/frontend/src/css/ModMenu.css
index c6d3d8d..c6d3d8d 100644
--- a/frontend/src/components/pages/summary_modview.css
+++ b/frontend/src/css/ModMenu.css
diff --git a/frontend/src/components/pages/profile.css b/frontend/src/css/Profile.css
index 4944ade..4944ade 100644
--- a/frontend/src/components/pages/profile.css
+++ b/frontend/src/css/Profile.css
diff --git a/frontend/src/components/sidebar.css b/frontend/src/css/Sidebar.css
index 34ede80..34ede80 100644
--- a/frontend/src/components/sidebar.css
+++ b/frontend/src/css/Sidebar.css
diff --git a/frontend/src/images/Images.tsx b/frontend/src/images/Images.tsx
new file mode 100644
index 0000000..d2f6dfb
--- /dev/null
+++ b/frontend/src/images/Images.tsx
@@ -0,0 +1,44 @@
+import logo from "./png/logo.png"
+import login from "./png/login.png"
+import img1 from './png/1.png';
+import img2 from './png/2.png';
+import img3 from './png/3.png';
+import img4 from './png/4.png';
+import img5 from './png/5.png';
+import img6 from './png/6.png';
+import img7 from './png/7.png';
+import img8 from './png/8.png';
+import img9 from './png/9.png';
+import img10 from './png/10.png';
+import img11 from './png/11.png';
+import img12 from './png/12.png';
+import img13 from './png/13.png';
+import img14 from './png/14.png';
+import img15 from './png/15.png';
+import img16 from './png/16.png';
+import img17 from './png/17.png';
+import img18 from './png/18.png';
+import img19 from './png/19.png';
+
+export const LogoIcon = logo;
+export const LoginIcon = login;
+
+export const SearchIcon = img1;
+export const HomeIcon = img2;
+export const NewsIcon = img3;
+export const PortalIcon = img4;
+export const FlagIcon = img5;
+export const ChatIcon = img6;
+export const TableIcon = img7;
+export const BookIcon = img8;
+export const HelpIcon = img9;
+export const UserIcon = img10;
+export const ExitIcon = img11;
+export const DownloadIcon = img12;
+export const ThreedotIcon = img13;
+export const StatisticsIcon = img14;
+export const TwitchIcon = img15;
+export const YouTubeIcon = img16;
+export const SteamIcon = img17;
+export const HistoryIcon = img18;
+export const SortIcon = img19;
\ No newline at end of file
diff --git a/frontend/src/imgs/1.png b/frontend/src/images/png/1.png
index ea59d2f..ea59d2f 100644
--- a/frontend/src/imgs/1.png
+++ b/frontend/src/images/png/1.png
diff --git a/frontend/src/imgs/10.png b/frontend/src/images/png/10.png
index d4b0863..d4b0863 100644
--- a/frontend/src/imgs/10.png
+++ b/frontend/src/images/png/10.png
diff --git a/frontend/src/imgs/11.png b/frontend/src/images/png/11.png
index b493059..b493059 100644
--- a/frontend/src/imgs/11.png
+++ b/frontend/src/images/png/11.png
diff --git a/frontend/src/imgs/12.png b/frontend/src/images/png/12.png
index abb7717..abb7717 100644
--- a/frontend/src/imgs/12.png
+++ b/frontend/src/images/png/12.png
diff --git a/frontend/src/imgs/13.png b/frontend/src/images/png/13.png
index 28a67c5..28a67c5 100644
--- a/frontend/src/imgs/13.png
+++ b/frontend/src/images/png/13.png
diff --git a/frontend/src/imgs/14.png b/frontend/src/images/png/14.png
index 7be6359..7be6359 100644
--- a/frontend/src/imgs/14.png
+++ b/frontend/src/images/png/14.png
diff --git a/frontend/src/imgs/15.png b/frontend/src/images/png/15.png
index e5ae8aa..e5ae8aa 100644
--- a/frontend/src/imgs/15.png
+++ b/frontend/src/images/png/15.png
diff --git a/frontend/src/imgs/16.png b/frontend/src/images/png/16.png
index bf3ae0c..bf3ae0c 100644
--- a/frontend/src/imgs/16.png
+++ b/frontend/src/images/png/16.png
diff --git a/frontend/src/imgs/17.png b/frontend/src/images/png/17.png
index 85e39f0..85e39f0 100644
--- a/frontend/src/imgs/17.png
+++ b/frontend/src/images/png/17.png
diff --git a/frontend/src/imgs/18.png b/frontend/src/images/png/18.png
index 048cda9..048cda9 100644
--- a/frontend/src/imgs/18.png
+++ b/frontend/src/images/png/18.png
diff --git a/frontend/src/imgs/19.png b/frontend/src/images/png/19.png
index 0d97d16..0d97d16 100644
--- a/frontend/src/imgs/19.png
+++ b/frontend/src/images/png/19.png
diff --git a/frontend/src/imgs/2.png b/frontend/src/images/png/2.png
index b8d108e..b8d108e 100644
--- a/frontend/src/imgs/2.png
+++ b/frontend/src/images/png/2.png
diff --git a/frontend/src/imgs/3.png b/frontend/src/images/png/3.png
index cfda6a4..cfda6a4 100644
--- a/frontend/src/imgs/3.png
+++ b/frontend/src/images/png/3.png
diff --git a/frontend/src/imgs/4.png b/frontend/src/images/png/4.png
index bbc01c4..bbc01c4 100644
--- a/frontend/src/imgs/4.png
+++ b/frontend/src/images/png/4.png
diff --git a/frontend/src/imgs/5.png b/frontend/src/images/png/5.png
index b63d2c3..b63d2c3 100644
--- a/frontend/src/imgs/5.png
+++ b/frontend/src/images/png/5.png
diff --git a/frontend/src/imgs/6.png b/frontend/src/images/png/6.png
index 6ced542..6ced542 100644
--- a/frontend/src/imgs/6.png
+++ b/frontend/src/images/png/6.png
diff --git a/frontend/src/imgs/7.png b/frontend/src/images/png/7.png
index c20bcf4..c20bcf4 100644
--- a/frontend/src/imgs/7.png
+++ b/frontend/src/images/png/7.png
diff --git a/frontend/src/imgs/8.png b/frontend/src/images/png/8.png
index d640522..d640522 100644
--- a/frontend/src/imgs/8.png
+++ b/frontend/src/images/png/8.png
diff --git a/frontend/src/imgs/9.png b/frontend/src/images/png/9.png
index 3cd602a..3cd602a 100644
--- a/frontend/src/imgs/9.png
+++ b/frontend/src/images/png/9.png
diff --git a/frontend/src/imgs/login.png b/frontend/src/images/png/login.png
index 6456c21..6456c21 100644
--- a/frontend/src/imgs/login.png
+++ b/frontend/src/images/png/login.png
diff --git a/frontend/src/imgs/logo.png b/frontend/src/images/png/logo.png
index 774d55a..774d55a 100644
--- a/frontend/src/imgs/logo.png
+++ b/frontend/src/images/png/logo.png
diff --git a/frontend/src/index.js b/frontend/src/index.js
deleted file mode 100644
index f648298..0000000
--- a/frontend/src/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-    <App/>
-);
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
new file mode 100644
index 0000000..eec2ff4
--- /dev/null
+++ b/frontend/src/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from "react-router-dom";
+
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
new file mode 100644
index 0000000..e4b33e5
--- /dev/null
+++ b/frontend/src/pages/Games.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import GameEntry from '../components/GameEntry';
+import { Game } from '../types/Game';
+import { API } from '../api/Api';
+import "../css/Maps.css"
+
+const Games: React.FC = () => {
+    const [games, setGames] = React.useState<Game[]>([]);
+
+    const _fetch_games = async () => {
+      const games = await API.get_games();
+      setGames(games);
+    };
+
+    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 = "";
+        });
+
+        _fetch_games();
+        _page_load();
+    }, []);
+
+    return (
+        <div className='games-page'>
+            <section className='games-page-header'>
+                <span><b>Games list</b></span>
+            </section>
+
+            <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/Maps.tsx b/frontend/src/pages/Maps.tsx
new file mode 100644
index 0000000..707d865
--- /dev/null
+++ b/frontend/src/pages/Maps.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+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 '../types/Map';
+import { API } from '../api/Api';
+import "../css/Maps.css";
+
+interface MapProps {
+  isModerator: boolean;
+};
+
+const Maps: React.FC<MapProps> = ({ isModerator }) => {
+
+  const [selectedRun, setSelectedRun] = React.useState<number>(0);
+
+  const [mapSummaryData, setMapSummaryData] = React.useState<MapSummary | undefined>(undefined);
+  const [mapLeaderboardData, setMapLeaderboardData] = React.useState<MapLeaderboard | undefined>(undefined);
+  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<MapDiscussions | undefined>(undefined)
+
+
+  const [navState, setNavState] = React.useState<number>(0);
+
+  const location = useLocation();
+
+  const mapID = location.pathname.split("/")[2];
+
+  const _fetch_map_summary = async () => {
+    const mapSummary = await API.get_map_summary(mapID);
+    setMapSummaryData(mapSummary);
+  };
+
+  const _fetch_map_leaderboards = async () => {
+    const mapLeaderboards = await API.get_map_leaderboard(mapID);
+    setMapLeaderboardData(mapLeaderboards);
+  };
+
+  const _fetch_map_discussions = async () => {
+    const mapDiscussions = await API.get_map_discussions(mapID);
+    setMapDiscussionsData(mapDiscussions);
+  };
+
+  React.useEffect(() => {
+    _fetch_map_summary();
+    _fetch_map_leaderboards();
+    _fetch_map_discussions();
+  }, []);
+
+  if (!mapSummaryData) {
+    return (
+      <></>
+    );
+  }
+
+  return (
+    <>
+      {isModerator && <ModMenu data={mapSummaryData} selectedRun={selectedRun} mapID={mapID} />}
+
+      <div id='background-image'>
+        <img src={mapSummaryData.map.image} alt="" />
+      </div>
+      <main>
+        <section id='section1' className='summary1'>
+          <div>
+            <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 0px 0px 20px" }}><i className='triangle'></i><span>Games list</span></button></Link>
+            <Link to={`/games/${!mapSummaryData.map.is_coop ? "1" : "2"}?chapter=${mapSummaryData.map.chapter_name}`}><button className='nav-button' style={{ borderRadius: "0px 20px 20px 0px", marginLeft: "2px" }}><i className='triangle'></i><span>{mapSummaryData.map.chapter_name}</span></button></Link>
+            <br /><span><b>{mapSummaryData.map.map_name}</b></span>
+          </div>
+
+
+        </section>
+
+        <section id='section2' className='summary1'>
+          <button className='nav-button' onClick={() => setNavState(0)}><img src={PortalIcon} alt="" /><span>Summary</span></button>
+          <button className='nav-button' onClick={() => setNavState(1)}><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
+          <button className='nav-button' onClick={() => setNavState(2)}><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+        </section>
+
+        {navState === 0 && <Summary selectedRun={selectedRun} setSelectedRun={setSelectedRun} data={mapSummaryData} />}
+        {navState === 1 && <Leaderboards data={mapLeaderboardData} />}
+        {navState === 2 && <Discussions data={mapDiscussionsData} isModerator={isModerator} mapID={mapID} onRefresh={() => _fetch_map_discussions()} />}
+      </main>
+    </>
+  );
+};
+
+export default Maps;
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
new file mode 100644
index 0000000..8654a03
--- /dev/null
+++ b/frontend/src/pages/Profile.tsx
@@ -0,0 +1,326 @@
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '../images/Images';
+import { UserProfile } from '../types/Profile';
+import { Game, GameChapters } from '../types/Game';
+import { Map } from '../types/Map';
+import "../css/Profile.css";
+
+interface ProfileProps {
+  profile: UserProfile;
+}
+
+const Profile: React.FC<ProfileProps> = ({ profile }) => {
+
+
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    if (!profile) {
+      navigate("/");
+    };
+  }, [profile]);
+
+  const [navState, setNavState] = React.useState(0);
+  const [pageNumber, setPageNumber] = React.useState(1);
+  const [pageMax, setPageMax] = React.useState(0);
+
+  const [game, setGame] = React.useState("0")
+  const [gameData, setGameData] = React.useState<Game[]>([]);
+  const [chapter, setChapter] = React.useState("0")
+  const [chapterData, setChapterData] = React.useState<GameChapters | null>(null);
+  const [maps, setMaps] = React.useState<Map[]>([]);
+
+  function NavClick() {
+    if (profile) {
+      const btn = document.querySelectorAll("#section2 button");
+      btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+      (btn[navState] as HTMLElement).style.backgroundColor = "#202232";
+
+      document.querySelectorAll("section").forEach((e, i) => i >= 2 ? e.style.display = "none" : "")
+      if (navState === 0) { document.querySelectorAll(".profile1").forEach((e) => { (e as HTMLElement).style.display = "block" }); }
+      if (navState === 1) { document.querySelectorAll(".profile2").forEach((e) => { (e as HTMLElement).style.display = "block" }); }
+    }
+  }
+
+  function UpdateProfile() {
+    fetch(`https://lp.ardapektezol.com/api/v1/profile`, {
+      method: 'POST',
+      headers: { Authorization: "" }
+    }).then(r => r.json())
+      .then(d => d.success ? window.alert("profile updated") : window.alert(`Error: ${d.message}`))
+  }
+
+  function TicksToTime(ticks: number) {
+
+    let seconds = Math.floor(ticks / 60)
+    let minutes = Math.floor(seconds / 60)
+    let hours = Math.floor(minutes / 60)
+
+    let milliseconds = Math.floor((ticks % 60) * 1000 / 60)
+    seconds = seconds % 60;
+    minutes = minutes % 60;
+
+    return `${hours === 0 ? "" : hours + ":"}${minutes === 0 ? "" : hours > 0 ? minutes.toString().padStart(2, '0') + ":" : (minutes + ":")}${minutes > 0 ? seconds.toString().padStart(2, '0') : seconds}.${milliseconds.toString().padStart(3, '0')} (${ticks})`;
+  }
+
+  React.useEffect(() => {
+    fetch("https://lp.ardapektezol.com/api/v1/games")
+      .then(r => r.json())
+      .then(d => {
+        setGameData(d.data)
+        setGame("0")
+      })
+
+  }, [location]);
+
+  React.useEffect(() => {
+    if (game && game !== "0") {
+      fetch(`https://lp.ardapektezol.com/api/v1/games/${game}`)
+        .then(r => r.json())
+        .then(d => {
+          setChapterData(d.data)
+          setChapter("0");
+          // (document.querySelector('#select-chapter') as HTMLInputElement).value = "0"
+        })
+
+    } else if (game && game === "0") {
+      setPageMax(Math.ceil(profile.records.length / 20))
+      setPageNumber(1)
+    }
+
+  }, [game, location]);
+
+  React.useEffect(() => {
+    if (game !== "0") {
+      if (chapter === "0") {
+        fetch(`https://lp.ardapektezol.com/api/v1/games/${game}/maps`)
+          .then(r => r.json())
+          .then(d => {
+            setMaps(d.data.maps);
+            setPageMax(Math.ceil(d.data.maps.length / 20))
+            setPageNumber(1)
+          })
+      } else {
+        fetch(`https://lp.ardapektezol.com/api/v1/chapters/${chapter}`)
+          .then(r => r.json())
+          .then(d => {
+            setMaps(d.data.maps);
+            setPageMax(Math.ceil(d.data.maps.length / 20))
+            setPageNumber(1)
+          })
+
+      }
+    }
+  }, [game, chapter, chapterData])
+
+  return (
+    <main>
+      <section id='section1' className='profile'>
+
+        {profile.profile
+          ? (
+            <div id='profile-image' onClick={() => UpdateProfile()}>
+              <img src={profile.avatar_link} alt="profile-image"></img>
+              <span>Refresh</span>
+            </div>
+          ) : (
+            <div>
+              <img src={profile.avatar_link} alt="profile-image"></img>
+            </div>
+          )}
+
+        <div id='profile-top'>
+          <div>
+            <div>{profile.user_name}</div>
+            <div>
+              {profile.country_code === "XX" ? "" : <img src={`https://flagcdn.com/w80/${profile.country_code.toLowerCase()}.jpg`} alt={profile.country_code} />}
+            </div>
+            <div>
+              {profile.titles.map(e => (
+                <span className="titles" style={{ backgroundColor: `#${e.color}` }}>
+                  {e.name}
+                </span>
+              ))}
+            </div>
+          </div>
+          <div>
+            {profile.links.steam === "-" ? "" : <a href={profile.links.steam}><img src={SteamIcon} alt="Steam" /></a>}
+            {profile.links.twitch === "-" ? "" : <a href={profile.links.twitch}><img src={TwitchIcon} alt="Twitch" /></a>}
+            {profile.links.youtube === "-" ? "" : <a href={profile.links.youtube}><img src={YouTubeIcon} alt="Youtube" /></a>}
+            {profile.links.p2sr === "-" ? "" : <a href={profile.links.p2sr}><img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} /></a>}
+          </div>
+
+        </div>
+        <div id='profile-bottom'>
+          <div>
+            <span>Overall</span>
+            <span>{profile.rankings.overall.rank === 0 ? "N/A " : "#" + profile.rankings.overall.rank + " "}
+              <span>({profile.rankings.overall.completion_count}/{profile.rankings.overall.completion_total})</span>
+            </span>
+          </div>
+          <div>
+            <span>Singleplayer</span>
+            <span>{profile.rankings.singleplayer.rank === 0 ? "N/A " : "#" + profile.rankings.singleplayer.rank + " "}
+              <span>({profile.rankings.singleplayer.completion_count}/{profile.rankings.singleplayer.completion_total})</span>
+            </span>
+          </div>
+          <div>
+            <span>Cooperative</span>
+            <span>{profile.rankings.cooperative.rank === 0 ? "N/A " : "#" + profile.rankings.cooperative.rank + " "}
+              <span>({profile.rankings.cooperative.completion_count}/{profile.rankings.cooperative.completion_total})</span>
+            </span>
+          </div>
+        </div>
+      </section>
+
+
+      <section id='section2' className='profile'>
+        <button onClick={() => setNavState(0)}><img src={FlagIcon} alt="" />&nbsp;Player Records</button>
+        <button onClick={() => setNavState(1)}><img src={StatisticsIcon} alt="" />&nbsp;Statistics</button>
+      </section>
+
+
+
+
+
+      <section id='section3' className='profile1'>
+        <div id='profileboard-nav'>
+          {gameData === null ? <select>error</select> :
+
+            <select id='select-game'
+              onChange={() => setGame((document.querySelector('#select-game') as HTMLInputElement).value)}>
+              <option value={0} key={0}>All Scores</option>
+              {gameData.map((e, i) => (
+                <option value={e.id} key={i + 1}>{e.name}</option>
+              ))}</select>
+          }
+
+          {game === "0" ?
+            <select disabled>
+              <option>All Scores</option>
+            </select>
+            : chapterData === null ? <select></select> :
+
+              <select id='select-chapter'
+                onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
+                <option value="0" key="0">All</option>
+                {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
+                  <option value={e.id} key={i + 1}>{e.name}</option>
+                ))}</select>
+          }
+        </div>
+        <div id='profileboard-top'>
+          <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> </span>
+          <span><span>Rank</span><img src={SortIcon} alt="" /></span>
+          <span><span>Date</span><img src={SortIcon} alt="" /></span>
+          <div id='page-number'>
+            <div>
+              <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
+              ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
+              <span>{pageNumber}/{pageMax}</span>
+              <button onClick={() => pageNumber === pageMax ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
+              ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+            </div>
+          </div>
+        </div>
+        <hr />
+        <div id='profileboard-records'>
+
+          {game === "0"
+            ? (
+
+              profile.records.sort((a, b) => a.map_id - b.map_id)
+                .map((r, index) => (
+
+                  Math.ceil((index + 1) / 20) === pageNumber ? (
+                    <button className="profileboard-record" key={index}>
+                      {r.scores.map((e, i) => (<>
+                        {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
+
+                        <span>{r.map_name}</span>
+
+                        <span style={{ display: "grid" }}>{e.score_count}</span>
+
+                        <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count}</span>
+                        <span style={{ display: "grid" }}>{TicksToTime(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" }}>
+
+                          <button onClick={() => { window.alert(`Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                          <button onClick={() => window.location.href = `https://lp.ardapektezol.com/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                          {i === 0 && r.scores.length > 1 ? <button onClick={() => {
+                            (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
+                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
+                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${r.scores.length * 46}px` :
+                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                          }
+                          }><img src={HistoryIcon} alt="history" /></button> : ""}
+
+                        </span>
+                      </>))}
+
+                    </button>
+                  ) : ""
+                ))) : maps ?
+
+              maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
+                .map((r, index) => {
+                  if (Math.ceil((index + 1) / 20) === pageNumber) {
+                    let record = profile.records.find((e) => e.map_id === r.id);
+                    return record === undefined ? (
+                      <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}>
+                        <span>{r.name}</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>
+                      </button>
+                    ) : (
+                      <button className="profileboard-record" key={index}>
+                        {record.scores.map((e, i) => (<>
+                          {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
+                          <span>{r.name}</span>
+                          <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
+                          <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count}</span>
+                          <span style={{ display: "grid" }}>{TicksToTime(record!.scores[i].score_time)}</span>
+                          <span> </span>
+                          {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
+                          <span>{record!.scores[i].date.split("T")[0]}</span>
+                          <span style={{ flexDirection: "row-reverse" }}>
+
+                            <button onClick={() => { window.alert(`Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                            <button onClick={() => window.location.href = `https://lp.ardapektezol.com/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                            {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
+                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
+                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
+                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${record!.scores.length * 46}px` :
+                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                            }
+                            }><img src={HistoryIcon} alt="history" /></button> : ""}
+
+                          </span>
+                        </>))}
+                      </button>
+
+                    )
+                  } else { return null }
+                }) : (<>{console.warn(maps)}</>)}
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default Profile;
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
new file mode 100644
index 0000000..1f6d8d0
--- /dev/null
+++ b/frontend/src/pages/User.tsx
@@ -0,0 +1,320 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '../images/Images';
+import { UserProfile } from '../types/Profile';
+import { Game, GameChapters } from '../types/Game';
+import { Map } from '../types/Map';
+import { API } from '../api/Api';
+import { ticks_to_time } from '../utils/Time';
+import "../css/Profile.css";
+
+const User: React.FC = () => {
+  const location = useLocation();
+
+  const [user, setUser] = React.useState<UserProfile | undefined>(undefined);
+
+  const [navState, setNavState] = React.useState(0);
+  const [pageNumber, setPageNumber] = React.useState(1);
+  const [pageMax, setPageMax] = React.useState(0);
+
+  const [game, setGame] = React.useState("0")
+  const [gameData, setGameData] = React.useState<Game[]>([]);
+  const [chapter, setChapter] = React.useState("0")
+  const [chapterData, setChapterData] = React.useState<GameChapters | null>(null);
+  const [maps, setMaps] = React.useState<Map[]>([]);
+
+  function NavClick() {
+    if (user) {
+      const btn = document.querySelectorAll("#section2 button");
+      btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+      (btn[navState] as HTMLElement).style.backgroundColor = "#202232";
+
+      document.querySelectorAll("section").forEach((e, i) => i >= 2 ? e.style.display = "none" : "")
+      if (navState === 0) { document.querySelectorAll(".profile1").forEach((e) => { (e as HTMLElement).style.display = "block" }); }
+      if (navState === 1) { document.querySelectorAll(".profile2").forEach((e) => { (e as HTMLElement).style.display = "block" }); }
+    }
+  }
+
+  function UpdateProfile() {
+    fetch(`https://lp.ardapektezol.com/api/v1/profile`, {
+      method: 'POST',
+      headers: { Authorization: "" }
+    }).then(r => r.json())
+      .then(d => d.success ? window.alert("profile updated") : window.alert(`Error: ${d.message}`))
+  }
+
+  const _fetch_user = async () => {
+    const userData = await API.get_user(location.pathname.split("/")[2]);
+    setUser(userData);
+  };
+
+  React.useEffect(() => {
+    fetch("https://lp.ardapektezol.com/api/v1/games")
+      .then(r => r.json())
+      .then(d => {
+        setGameData(d.data)
+        setGame("0")
+      })
+
+  }, [location]);
+
+  React.useEffect(() => {
+    if (user) {
+      if (game && game !== "0") {
+        fetch(`https://lp.ardapektezol.com/api/v1/games/${game}`)
+          .then(r => r.json())
+          .then(d => {
+            setChapterData(d.data)
+            setChapter("0");
+            // (document.querySelector('#select-chapter') as HTMLInputElement).value = "0"
+          })
+  
+      } else if (game && game === "0") {
+        setPageMax(Math.ceil(user.records.length / 20))
+        setPageNumber(1)
+      }
+    }
+  }, [user, game, location]);
+
+  React.useEffect(() => {
+    _fetch_user();
+  }, []);
+
+  React.useEffect(() => {
+    if (game !== "0") {
+      if (chapter === "0") {
+        fetch(`https://lp.ardapektezol.com/api/v1/games/${game}/maps`)
+          .then(r => r.json())
+          .then(d => {
+            setMaps(d.data.maps);
+            setPageMax(Math.ceil(d.data.maps.length / 20))
+            setPageNumber(1)
+          })
+      } else {
+        fetch(`https://lp.ardapektezol.com/api/v1/chapters/${chapter}`)
+          .then(r => r.json())
+          .then(d => {
+            setMaps(d.data.maps);
+            setPageMax(Math.ceil(d.data.maps.length / 20))
+            setPageNumber(1)
+          })
+
+      }
+    }
+  }, [game, chapter, chapterData])
+
+  if (!user) {
+    return (
+      <></>
+    );
+  };
+
+  return (
+    <main>
+      <section id='section1' className='profile'>
+
+        {user.profile
+          ? (
+            <div id='profile-image' onClick={() => UpdateProfile()}>
+              <img src={user.avatar_link} alt="profile-image"></img>
+              <span>Refresh</span>
+            </div>
+          ) : (
+            <div>
+              <img src={user.avatar_link} alt="profile-image"></img>
+            </div>
+          )}
+
+        <div id='profile-top'>
+          <div>
+            <div>{user.user_name}</div>
+            <div>
+              {user.country_code === "XX" ? "" : <img src={`https://flagcdn.com/w80/${user.country_code.toLowerCase()}.jpg`} alt={user.country_code} />}
+            </div>
+            <div>
+              {user.titles.map(e => (
+                <span className="titles" style={{ backgroundColor: `#${e.color}` }}>
+                  {e.name}
+                </span>
+              ))}
+            </div>
+          </div>
+          <div>
+            {user.links.steam === "-" ? "" : <a href={user.links.steam}><img src={SteamIcon} alt="Steam" /></a>}
+            {user.links.twitch === "-" ? "" : <a href={user.links.twitch}><img src={TwitchIcon} alt="Twitch" /></a>}
+            {user.links.youtube === "-" ? "" : <a href={user.links.youtube}><img src={YouTubeIcon} alt="Youtube" /></a>}
+            {user.links.p2sr === "-" ? "" : <a href={user.links.p2sr}><img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} /></a>}
+          </div>
+
+        </div>
+        <div id='profile-bottom'>
+          <div>
+            <span>Overall</span>
+            <span>{user.rankings.overall.rank === 0 ? "N/A " : "#" + user.rankings.overall.rank + " "}
+              <span>({user.rankings.overall.completion_count}/{user.rankings.overall.completion_total})</span>
+            </span>
+          </div>
+          <div>
+            <span>Singleplayer</span>
+            <span>{user.rankings.singleplayer.rank === 0 ? "N/A " : "#" + user.rankings.singleplayer.rank + " "}
+              <span>({user.rankings.singleplayer.completion_count}/{user.rankings.singleplayer.completion_total})</span>
+            </span>
+          </div>
+          <div>
+            <span>Cooperative</span>
+            <span>{user.rankings.cooperative.rank === 0 ? "N/A " : "#" + user.rankings.cooperative.rank + " "}
+              <span>({user.rankings.cooperative.completion_count}/{user.rankings.cooperative.completion_total})</span>
+            </span>
+          </div>
+        </div>
+      </section>
+
+
+      <section id='section2' className='profile'>
+        <button onClick={() => setNavState(0)}><img src={FlagIcon} alt="" />&nbsp;Player Records</button>
+        <button onClick={() => setNavState(1)}><img src={StatisticsIcon} alt="" />&nbsp;Statistics</button>
+      </section>
+
+
+
+
+
+      <section id='section3' className='profile1'>
+        <div id='profileboard-nav'>
+          {gameData === null ? <select>error</select> :
+
+            <select id='select-game'
+              onChange={() => setGame((document.querySelector('#select-game') as HTMLInputElement).value)}>
+              <option value={0} key={0}>All Scores</option>
+              {gameData.map((e, i) => (
+                <option value={e.id} key={i + 1}>{e.name}</option>
+              ))}</select>
+          }
+
+          {game === "0" ?
+            <select disabled>
+              <option>All Scores</option>
+            </select>
+            : chapterData === null ? <select></select> :
+
+              <select id='select-chapter'
+                onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
+                <option value="0" key="0">All</option>
+                {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
+                  <option value={e.id} key={i + 1}>{e.name}</option>
+                ))}</select>
+          }
+        </div>
+        <div id='profileboard-top'>
+          <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> </span>
+          <span><span>Rank</span><img src={SortIcon} alt="" /></span>
+          <span><span>Date</span><img src={SortIcon} alt="" /></span>
+          <div id='page-number'>
+            <div>
+              <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
+              ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
+              <span>{pageNumber}/{pageMax}</span>
+              <button onClick={() => pageNumber === pageMax ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
+              ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+            </div>
+          </div>
+        </div>
+        <hr />
+        <div id='profileboard-records'>
+
+          {game === "0"
+            ? (
+
+              user.records.sort((a, b) => a.map_id - b.map_id)
+                .map((r, index) => (
+
+                  Math.ceil((index + 1) / 20) === pageNumber ? (
+                    <button className="profileboard-record" key={index}>
+                      {r.scores.map((e, i) => (<>
+                        {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
+
+                        <span>{r.map_name}</span>
+
+                        <span style={{ display: "grid" }}>{e.score_count}</span>
+
+                        <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count}</span>
+                        <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
+                        <span> </span>
+                        {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
+                        <span>{e.date.split("T")[0]}</span>
+                        <span style={{ flexDirection: "row-reverse" }}>
+
+                          <button onClick={() => { window.alert(`Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                          <button onClick={() => window.location.href = `https://lp.ardapektezol.com/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                          {i === 0 && r.scores.length > 1 ? <button onClick={() => {
+                            (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
+                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
+                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${r.scores.length * 46}px` :
+                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                          }
+                          }><img src={HistoryIcon} alt="history" /></button> : ""}
+
+                        </span>
+                      </>))}
+
+                    </button>
+                  ) : ""
+                ))) : maps ?
+
+              maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
+                .map((r, index) => {
+                  if (Math.ceil((index + 1) / 20) === pageNumber) {
+                    let record = user.records.find((e) => e.map_id === r.id);
+                    return record === undefined ? (
+                      <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}>
+                        <span>{r.name}</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>
+                      </button>
+                    ) : (
+                      <button className="profileboard-record" key={index}>
+                        {record.scores.map((e, i) => (<>
+                          {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
+                          <span>{r.name}</span>
+                          <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
+                          <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count}</span>
+                          <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
+                          <span> </span>
+                          {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
+                          <span>{record!.scores[i].date.split("T")[0]}</span>
+                          <span style={{ flexDirection: "row-reverse" }}>
+
+                            <button onClick={() => { window.alert(`Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                            <button onClick={() => window.location.href = `https://lp.ardapektezol.com/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                            {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
+                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
+                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
+                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${record!.scores.length * 46}px` :
+                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                            }
+                            }><img src={HistoryIcon} alt="history" /></button> : ""}
+
+                          </span>
+                        </>))}
+                      </button>
+
+                    )
+                  } else { return null }
+                }) : (<>{console.warn(maps)}</>)}
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default User;
diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
new file mode 100644
index 0000000..8265915
--- /dev/null
+++ b/frontend/src/react-app-env.d.ts
@@ -0,0 +1,2 @@
+declare module "*.png";
+declare module "*.css";
diff --git a/frontend/src/types/Content.tsx b/frontend/src/types/Content.tsx
new file mode 100644
index 0000000..e593505
--- /dev/null
+++ b/frontend/src/types/Content.tsx
@@ -0,0 +1,18 @@
+export interface ModMenuContent {
+  id: number;
+  name: string;
+  score: number;
+  date: string;
+  showcase: string;
+  description: string;
+  category_id: number;
+};
+
+export interface MapDiscussionContent {
+  title: string;
+  content: string;
+};
+
+export interface MapDiscussionCommentContent {
+  comment: string;
+};
diff --git a/frontend/src/types/Game.tsx b/frontend/src/types/Game.tsx
new file mode 100644
index 0000000..eb435f6
--- /dev/null
+++ b/frontend/src/types/Game.tsx
@@ -0,0 +1,37 @@
+import { Map } from './Map';
+
+
+export interface Game {
+  id: number;
+  name: string;
+  image: string;
+  is_coop: boolean;
+  category_portals: GameCategoryPortals[];
+};
+
+export interface GameChapters {
+  game: Game;
+  chapters: Chapter[];
+};
+
+export interface GameMaps {
+  game: Game;
+  maps: Map[];
+};
+
+export interface Category {
+  id: number;
+  name: string;
+};
+
+interface Chapter {
+  id: number;
+  name: string;
+  image: string;
+  is_disabled: boolean;
+};
+
+export interface GameCategoryPortals {
+  category: Category;
+  portal_count: number;
+};
diff --git a/frontend/src/types/Map.tsx b/frontend/src/types/Map.tsx
new file mode 100644
index 0000000..4a6b60e
--- /dev/null
+++ b/frontend/src/types/Map.tsx
@@ -0,0 +1,103 @@
+import { Category, GameCategoryPortals } from './Game';
+import { Pagination } from './Pagination';
+import { UserShort } from './Profile';
+
+export interface Map {
+  id: number;
+  name: string;
+  image: string;
+  is_disabled: boolean;
+  difficulty: number;
+  category_portals: GameCategoryPortals[];
+};
+
+export interface MapDiscussion {
+  discussion: MapDiscussionsDetail;
+};
+
+export interface MapDiscussions {
+  discussions: MapDiscussionsDetail[];
+};
+
+export interface MapDiscussionsDetail {
+  id: number;
+  title: string;
+  content: string;
+  creator: UserShort;
+  comments: MapDiscussionDetailComment[];
+  created_at: string;
+  updated_at: string;
+};
+
+interface MapDiscussionDetailComment {
+  comment: string;
+  date: string;
+  user: UserShort;
+};
+
+export interface MapLeaderboard {
+  map: MapSummaryMap;
+  records: MapLeaderboardRecordSingleplayer[] | MapLeaderboardRecordMultiplayer[];
+  pagination: Pagination;
+};
+
+export interface MapLeaderboardRecordSingleplayer {
+  kind: "singleplayer";
+  placement: number;
+  record_id: number;
+  score_count: number;
+  score_time: number;
+  user: UserShort;
+  demo_id: string;
+  record_date: string;
+};
+
+export interface MapLeaderboardRecordMultiplayer {
+  kind: "multiplayer";
+  placement: number;
+  record_id: number;
+  score_count: number;
+  score_time: number;
+  host: UserShort;
+  partner: UserShort;
+  host_demo_id: string;
+  partner_demo_id: string;
+  record_date: string;
+};
+
+
+export interface MapSummary {
+  map: MapSummaryMap;
+  summary: MapSummaryDetails;
+};
+
+interface MapSummaryMap {
+  id: number;
+  image: string;
+  chapter_name: string;
+  game_name: string;
+  map_name: string;
+  is_coop: boolean;
+  is_disabled: boolean;
+};
+
+interface MapSummaryDetails {
+  routes: MapSummaryDetailsRoute[];
+};
+
+interface MapSummaryDetailsRoute {
+  route_id: number;
+  category: Category;
+  history: MapSummaryDetailsRouteHistory;
+  rating: number;
+  completion_count: number;
+  description: string;
+  showcase: string;
+};
+
+interface MapSummaryDetailsRouteHistory {
+  runner_name: string;
+  score_count: number;
+  date: string;
+};
+
diff --git a/frontend/src/types/Pagination.tsx b/frontend/src/types/Pagination.tsx
new file mode 100644
index 0000000..ccff04b
--- /dev/null
+++ b/frontend/src/types/Pagination.tsx
@@ -0,0 +1,6 @@
+export interface Pagination {
+  total_records: number;
+  total_pages: number;
+  current_page: number;
+  page_size: number;
+};
diff --git a/frontend/src/types/Profile.tsx b/frontend/src/types/Profile.tsx
new file mode 100644
index 0000000..2bb037c
--- /dev/null
+++ b/frontend/src/types/Profile.tsx
@@ -0,0 +1,63 @@
+import { Pagination } from "./Pagination";
+
+export interface UserShort {
+  steam_id: string;
+  user_name: string;
+  avatar_link: string;
+};
+
+export interface UserProfile {
+  profile: boolean;
+  steam_id: string;
+  user_name: string;
+  avatar_link: string;
+  country_code: string;
+  titles: UserProfileTitles[];
+  links: UserProfileLinks;
+  rankings: UserProfileRankings;
+  records: UserProfileRecords[];
+  pagination: Pagination;
+};
+
+interface UserProfileTitles {
+  name: string;
+  color: string;
+};
+
+interface UserProfileLinks {
+  p2sr: string;
+  steam: string;
+  youtube: string;
+  twitch: string;
+};
+
+interface UserProfileRankings {
+  overall: UserProfileRankingsDetail;
+  singleplayer: UserProfileRankingsDetail;
+  cooperative: UserProfileRankingsDetail;
+};
+
+interface UserProfileRecords {
+  game_id: number;
+  category_id: number;
+  map_id: number;
+  map_name: string;
+  map_wr_count: number;
+  placement: number;
+  scores: UserProfileRecordsScores[]
+};
+
+interface UserProfileRecordsScores {
+  record_id: number;
+  demo_id: string;
+  score_count: number;
+  score_time: number;
+  date: string;
+};
+
+interface UserProfileRankingsDetail {
+  rank: number;
+  completion_count: number;
+  completion_total: number;
+};
+
diff --git a/frontend/src/types/Search.tsx b/frontend/src/types/Search.tsx
new file mode 100644
index 0000000..766311a
--- /dev/null
+++ b/frontend/src/types/Search.tsx
@@ -0,0 +1,13 @@
+import { UserShort } from "./Profile";
+
+export interface Search {
+  players: UserShort[];
+  maps: SearchMap[];
+};
+
+interface SearchMap {
+  id: number;
+  game: string;
+  chapter: string;
+  map: string;
+};
diff --git a/frontend/src/utils/Time.tsx b/frontend/src/utils/Time.tsx
new file mode 100644
index 0000000..b83a7ed
--- /dev/null
+++ b/frontend/src/utils/Time.tsx
@@ -0,0 +1,42 @@
+export function time_ago(date: any) {
+  const now = new Date().getTime();
+  
+  const localDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000));
+  const seconds = Math.floor((now - localDate.getTime()) / 1000);    
+
+  let interval = Math.floor(seconds / 31536000);
+  if (interval === 1) {return interval + ' year ago';}
+  if (interval > 1) {return interval + ' years ago';}
+
+  interval = Math.floor(seconds / 2592000);
+  if (interval === 1) {return interval + ' month ago';}
+  if (interval > 1) {return interval + ' months ago';}
+
+  interval = Math.floor(seconds / 86400);
+  if (interval === 1) {return interval + ' day ago';}
+  if (interval > 1) {return interval + ' days ago';}
+
+  interval = Math.floor(seconds / 3600);
+  if (interval === 1) {return interval + ' hour ago';}
+  if (interval > 1) {return interval + ' hours ago';}
+
+  interval = Math.floor(seconds / 60);
+  if (interval === 1) {return interval + ' minute ago';}
+  if (interval > 1) {return interval + ' minutes ago';}
+
+  if(seconds < 10) return 'just now';
+
+  return Math.floor(seconds) + ' seconds ago';
+};
+
+export function ticks_to_time(ticks: number) {
+  let seconds = Math.floor(ticks / 60)
+  let minutes = Math.floor(seconds / 60)
+  let hours = Math.floor(minutes / 60)
+
+  let milliseconds = Math.floor((ticks % 60) * 1000 / 60)
+  seconds = seconds % 60;
+  minutes = minutes % 60;
+
+  return `${hours === 0 ? "" : hours + ":"}${minutes === 0 ? "" : hours > 0 ? minutes.toString().padStart(2, '0') + ":" : (minutes + ":")}${minutes > 0 ? seconds.toString().padStart(2, '0') : seconds}.${milliseconds.toString().padStart(3, '0')}`;
+};
\ No newline at end of file