7 files changed, 153 insertions, 214 deletions

diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 8e5bb4b..8c1cd48 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -7,7 +7,7 @@ const Homepage: React.FC = () => {
         <main>
             <section>
                 <p/>
-                <h1><img src={PortalIcon} alt="lphub"/>Welcome to Least Portals Hub!</h1>
+                <h1>Welcome to Least Portals Hub!</h1>
                 <p>At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.</p>
                 <p>The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.</p>
                 <p>By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.</p>
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 5d0c852..9526d18 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -64,6 +64,7 @@ const Maplist: React.FC = () => {
       // console.log(foundGame)
       if (foundGame) {
         setGame(foundGame);
+        setLoad(false);
       }
     };
     
@@ -73,9 +74,9 @@ const Maplist: React.FC = () => {
       setNumChapters(games_chapters.chapters.length);
     }
 
+    setLoad(true);
     _fetch_game();
     _fetch_game_chapters();
-    setLoad(true);
   }, []);
 
   useEffect(() => {
@@ -96,7 +97,7 @@ const Maplist: React.FC = () => {
           </button>
         </Link>
       </section>
-      {!load ? (
+      {load ? (
         <div></div>
       ) : (
         <section>
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index 62fc3cc..13ee4d9 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -7,18 +7,16 @@ import Leaderboards from '../components/Leaderboards';
 import Discussions from '../components/Discussions';
 import ModMenu from '../components/ModMenu';
 import { MapDiscussions, MapLeaderboard, MapSummary } from '../types/Map';
-import { UserProfile } from '../types/Profile';
 import { API } from '../api/Api';
 import "../css/Maps.css";
 import Loading from '../components/Loading';
 
 interface MapProps {
-  profile?: UserProfile;
+  token?: string;
   isModerator: boolean;
-  onUploadRun: (mapID: number) => void;
 };
 
-const Maps: React.FC<MapProps> = ({ profile, isModerator, onUploadRun }) => {
+const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
 
   const [selectedRun, setSelectedRun] = React.useState<number>(0);
 
@@ -39,7 +37,8 @@ const Maps: React.FC<MapProps> = ({ profile, isModerator, onUploadRun }) => {
 
   const _fetch_map_leaderboards = async () => {
     const mapLeaderboards = await API.get_map_leaderboard(mapID);
-    console.log(mapLeaderboards?.records[0]);
+    console.log("lbs:")
+    console.log(mapLeaderboards);
     setMapLeaderboardData(mapLeaderboards);
   };
 
@@ -77,7 +76,7 @@ const Maps: React.FC<MapProps> = ({ profile, isModerator, onUploadRun }) => {
 
   return (
     <>
-      {isModerator && <ModMenu data={mapSummaryData} selectedRun={selectedRun} mapID={mapID} />}
+      {isModerator && <ModMenu token={token} data={mapSummaryData} selectedRun={selectedRun} mapID={mapID} />}
 
       <div id='background-image'>
         <img src={mapSummaryData.map.image} alt="" />
@@ -88,7 +87,6 @@ const Maps: React.FC<MapProps> = ({ profile, isModerator, onUploadRun }) => {
             <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.split(" ")[1]}`}><button className='nav-button' style={{ borderRadius: "0px 20px 20px 0px", marginLeft: "2px" }}><i className='triangle'></i><span>{mapSummaryData.map.chapter_name}</span></button></Link>
             <br /><span><b>{mapSummaryData.map.map_name}</b></span>
-            {profile && <button onClick={() => onUploadRun(mapSummaryData.map.id)}>Submit a Run</button>}
           </div>
         </section>
 
@@ -100,7 +98,7 @@ const Maps: React.FC<MapProps> = ({ profile, isModerator, onUploadRun }) => {
 
         {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()} />}
+        {navState === 2 && <Discussions data={mapDiscussionsData} token={token} isModerator={isModerator} mapID={mapID} onRefresh={() => _fetch_map_discussions()} />}
       </main>
     </>
   );
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 8eec23c..e20d930 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { Link, 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';
@@ -7,104 +7,74 @@ import { Game, GameChapters } from '../types/Game';
 import { Map } from '../types/Map';
 import { ticks_to_time } from '../utils/Time';
 import "../css/Profile.css";
+import { API } from '../api/Api';
 
 interface ProfileProps {
   profile?: UserProfile;
+  token?: string;
+  gameData: Game[];
 }
 
-const Profile: React.FC<ProfileProps> = ({ profile }) => {
-
-
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  React.useEffect(() => {
-    if (!profile) {
-      navigate("/");
-    };
-  }, [profile]);
+const Profile: React.FC<ProfileProps> = ({ profile, token, gameData }) => {
 
   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";
+  const navigate = useNavigate();
 
-      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" }); }
+  const _update_profile = () => {
+    if (token) {
+      API.post_profile(token).then(() => navigate(0));
     }
-  }
+  };
 
-  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 _get_game_chapters = async () => {
+    if (game && game !== "0") {
+      const gameChapters = await API.get_games_chapters(game);
+      setChapterData(gameChapters);
+    } else if (game && game === "0") {
+      setPageMax(Math.ceil(profile!.records.length / 20));
+      setPageNumber(1);
+    }
+  };
 
-  React.useEffect(() => {
-    if (profile) {
-      fetch("https://lp.ardapektezol.com/api/v1/games")
-        .then(r => r.json())
-        .then(d => {
-          setGameData(d.data)
-          setGame("0")
-        })
+  const _get_game_maps = async () => {
+    if (chapter === "0") {
+      const gameMaps = await API.get_game_maps(game);
+      setMaps(gameMaps);
+      setPageMax(Math.ceil(gameMaps.length / 20));
+      setPageNumber(1);
+    } else {
+      const gameChapters = await API.get_chapters(chapter);
+      setMaps(gameChapters.maps);
+      setPageMax(Math.ceil(gameChapters.maps.length / 20));
+      setPageNumber(1);
     }
-  }, [profile, location]);
+  };
+
+  React.useEffect(() => {
+    if (!profile) {
+      navigate("/");
+    };
+  }, [profile]);
 
   React.useEffect(() => {
     if (profile) {
-      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)
-      }
+      _get_game_chapters();
     }
-  }, [profile, game, location]);
+  }, [profile, game]);
 
   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)
-          })
-
-      }
+    if (profile && game !== "0") {
+      _get_game_maps();
     }
-  }, [game, chapter, chapterData])
+  }, [profile, game, chapter, chapterData])
 
   if (!profile) {
     return (
@@ -118,7 +88,7 @@ const Profile: React.FC<ProfileProps> = ({ profile }) => {
 
         {profile.profile
           ? (
-            <div id='profile-image' onClick={() => UpdateProfile()}>
+            <div id='profile-image' onClick={_update_profile}>
               <img src={profile.avatar_link} alt="profile-image"></img>
               <span>Refresh</span>
             </div>
@@ -187,7 +157,14 @@ const Profile: React.FC<ProfileProps> = ({ profile }) => {
           {gameData === null ? <select>error</select> :
 
             <select id='select-game'
-              onChange={() => setGame((document.querySelector('#select-game') as HTMLInputElement).value)}>
+              onChange={() => {
+                setGame((document.querySelector('#select-game') as HTMLInputElement).value);
+                setChapter("0");
+                const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+                if (chapterSelect) {
+                  chapterSelect.value = "0";
+                }
+              }}>
               <option value={0} key={0}>All Scores</option>
               {gameData.map((e, i) => (
                 <option value={e.id} key={i + 1}>{e.name}</option>
@@ -240,7 +217,7 @@ const Profile: React.FC<ProfileProps> = ({ profile }) => {
                       {r.scores.map((e, i) => (<>
                         {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
 
-                        <span>{r.map_name}</span>
+                        <Link to={`/maps/${r.map_id}`}><span>{r.map_name}</span></Link>
 
                         <span style={{ display: "grid" }}>{e.score_count}</span>
 
@@ -252,7 +229,7 @@ const Profile: React.FC<ProfileProps> = ({ profile }) => {
                         <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>
+                          <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                           {i === 0 && r.scores.length > 1 ? <button onClick={() => {
                             (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
                               (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
@@ -297,7 +274,7 @@ const Profile: React.FC<ProfileProps> = ({ profile }) => {
                           <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>
+                            <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                             {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
                               (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
                                 (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 6dbf3d3..9280b02 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -22,14 +22,8 @@ const Rankings: React.FC = () => {
     const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
     const [load, setLoad] = React.useState<boolean>(false);
 
-    interface ResponseSTUPID {
-        success: boolean;
-        message: string;
-        data: SteamRanking;
-    }
-
     const _fetch_rankings = async () => {
-        const rankings = await API.get_rankings();
+        const rankings = await API.get_official_rankings();
         setLeaderboardData(rankings);
         if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
             setCurrentLeaderboard(rankings.rankings_singleplayer)
@@ -43,20 +37,15 @@ const Rankings: React.FC = () => {
 
     const __dev_fetch_unofficial_rankings = async () => {
         try {
-            const response = await fetch("/response.json");
-            const result: ResponseSTUPID = await response.json();
-
-            if (result.success) {
-                const unofficialRanking: SteamRanking = result.data;
-                setLeaderboardData(unofficialRanking);
-                if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
-                    // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
-                    setCurrentLeaderboard(unofficialRanking.rankings_singleplayer)
-                } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-                    setCurrentLeaderboard(unofficialRanking.rankings_multiplayer)
-                } else {
-                    setCurrentLeaderboard(unofficialRanking.rankings_overall)
-                }
+            const rankings = await API.get_unofficial_rankings();
+            setLeaderboardData(rankings);
+            if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+                // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
+                setCurrentLeaderboard(rankings.rankings_singleplayer)
+            } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
+                setCurrentLeaderboard(rankings.rankings_multiplayer)
+            } else {
+                setCurrentLeaderboard(rankings.rankings_overall)
             }
         } catch (e) {
             console.log(e)
@@ -79,7 +68,7 @@ const Rankings: React.FC = () => {
         if (leaderboard_type == LeaderboardTypes.official) {
             _fetch_rankings();
         } else {
-            
+
         }
     }
 
@@ -117,23 +106,23 @@ const Rankings: React.FC = () => {
             </section>
 
             {load ?
-            <section className="rankings-leaderboard">
-                <div className="ranks-container">
-                    <div className="leaderboard-entry header">
-                        <span>Rank</span>
-                        <span>Player</span>
-                        <span>Portals</span>
+                <section className="rankings-leaderboard">
+                    <div className="ranks-container">
+                        <div className="leaderboard-entry header">
+                            <span>Rank</span>
+                            <span>Player</span>
+                            <span>Portals</span>
+                        </div>
+
+                        <div className="splitter"></div>
+
+                        {currentLeaderboard?.map((curRankingData, i) => {
+                            return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
+                        })
+                        }
                     </div>
-
-                    <div className="splitter"></div>
-
-                    {currentLeaderboard?.map((curRankingData, i) => {
-                        return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
-                    })
-                    }
-                </div>
-            </section>
-            : null}
+                </section>
+                : null}
         </main>
     )
 }
diff --git a/frontend/src/pages/Rules.tsx b/frontend/src/pages/Rules.tsx
index 516b73c..99fff1f 100644
--- a/frontend/src/pages/Rules.tsx
+++ b/frontend/src/pages/Rules.tsx
@@ -11,7 +11,7 @@ const Rules: React.FC = () => {
         const fetchRules = async () => {
             try {
                 const response = await fetch(
-                    'https://raw.githubusercontent.com/pektezol/leastportalshub/main/README.md'
+                    'https://raw.githubusercontent.com/pektezol/leastportalshub/typescript/RULES.md'
                 );
                 if (!response.ok) {
                     throw new Error('Failed to fetch README');
@@ -21,7 +21,7 @@ const Rules: React.FC = () => {
             } catch (error) {
                 console.error('Error fetching Rules:', error);
             }
-            setRulesText(rulesText)
+            // setRulesText(rulesText)
         };
         fetchRules();
     }, []);
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index 1605ada..e3781a3 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
+import { Link, 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';
@@ -9,8 +9,13 @@ import { API } from '../api/Api';
 import { ticks_to_time } from '../utils/Time';
 import "../css/Profile.css";
 
-const User: React.FC = () => {
-  const location = useLocation();
+interface UserProps {
+  profile?: UserProfile;
+  token?: string;
+  gameData: Game[];
+}
+
+const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
 
   const [user, setUser] = React.useState<UserProfile | undefined>(undefined);
 
@@ -18,91 +23,63 @@ const User: React.FC = () => {
   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 [game, setGame] = React.useState("0");
+  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";
+  const location = useLocation();
+  const navigate = useNavigate();
 
-      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" }); }
+  const _fetch_user = async () => {
+    const userID = location.pathname.split("/")[2];
+    if (token && profile && profile.profile && profile.steam_id === userID) {
+      navigate("/profile");
+      return;
     }
-  }
+    const userData = await API.get_user(userID);
+    setUser(userData);
+  };
 
-  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 _get_game_chapters = async () => {
+    if (game !== "0") {
+      const gameChapters = await API.get_games_chapters(game);
+      setChapterData(gameChapters);
+    } else {
+      setPageMax(Math.ceil(user!.records.length / 20));
+      setPageNumber(1);
+    }
+  };
 
-  const _fetch_user = async () => {
-    const userData = await API.get_user(location.pathname.split("/")[2]);
-    setUser(userData);
+  const _get_game_maps = async () => {
+    if (chapter === "0") {
+      const gameMaps = await API.get_game_maps(game);
+      setMaps(gameMaps);
+      setPageMax(Math.ceil(gameMaps.length / 20));
+      setPageNumber(1);
+    } else {
+      const gameChapters = await API.get_chapters(chapter);
+      setMaps(gameChapters.maps);
+      setPageMax(Math.ceil(gameChapters.maps.length / 20));
+      setPageNumber(1);
+    }
   };
 
   React.useEffect(() => {
-    fetch("https://lp.ardapektezol.com/api/v1/games")
-      .then(r => r.json())
-      .then(d => {
-        setGameData(d.data)
-        setGame("0")
-      })
-
+    _fetch_user();
   }, [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)
-      }
+      _get_game_chapters();
     }
   }, [user, game, location]);
 
   React.useEffect(() => {
-    _fetch_user();
-  }, [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)
-          })
-
-      }
+    if (user && game !== "0") {
+      _get_game_maps();
     }
-  }, [game, chapter, chapterData])
+  }, [user, game, chapter, location])
 
   if (!user) {
     return (
@@ -113,19 +90,9 @@ const User: React.FC = () => {
   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>
+          <img src={user.avatar_link} alt="profile-image"></img>
+        </div>
         <div id='profile-top'>
           <div>
             <div>{user.user_name}</div>
@@ -185,7 +152,14 @@ const User: React.FC = () => {
           {gameData === null ? <select>error</select> :
 
             <select id='select-game'
-              onChange={() => setGame((document.querySelector('#select-game') as HTMLInputElement).value)}>
+              onChange={() => {
+                setGame((document.querySelector('#select-game') as HTMLInputElement).value);
+                setChapter("0");
+                const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+                if (chapterSelect) {
+                  chapterSelect.value = "0";
+                }
+              }}>
               <option value={0} key={0}>All Scores</option>
               {gameData.map((e, i) => (
                 <option value={e.id} key={i + 1}>{e.name}</option>
@@ -238,7 +212,7 @@ const User: React.FC = () => {
                       {r.scores.map((e, i) => (<>
                         {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
 
-                        <span>{r.map_name}</span>
+                        <Link to={`/maps/${r.map_id}`}><span>{r.map_name}</span></Link>
 
                         <span style={{ display: "grid" }}>{e.score_count}</span>
 
@@ -250,7 +224,7 @@ const User: React.FC = () => {
                         <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>
+                          <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                           {i === 0 && r.scores.length > 1 ? <button onClick={() => {
                             (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
                               (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
@@ -295,7 +269,7 @@ const User: React.FC = () => {
                           <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>
+                            <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                             {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
                               (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
                                 (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?