refactor: port to typescript

4 files changed, 788 insertions, 0 deletions

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;