13 files changed, 653 insertions, 27 deletions

diff --git a/frontend/src/App.js b/frontend/src/App.js
index d75636f..93652e6 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -6,6 +6,7 @@ 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';

 

 

@@ -30,7 +31,8 @@ export default function App() {
             <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={<Main text="Profile"/>}></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>

diff --git a/frontend/src/components/login.js b/frontend/src/components/login.js
index 204007f..2b735cb 100644
--- a/frontend/src/components/login.js
+++ b/frontend/src/components/login.js
@@ -8,7 +8,7 @@ import img3 from "../imgs/11.png"
 
 
 export default function Login(prop) {
-const {token,setToken} = prop
+const {setToken,profile,setProfile} = prop
 function login() {
     window.location.href="https://lp.ardapektezol.com/api/v1/login"
 }
@@ -16,26 +16,16 @@ function logout() {
     setIsLoggedIn(false)
     setProfile(null)
     setToken(null)
-    fetch(`/api/v1/token`,{'method':'DELETE'})
+    fetch(`https://lp.ardapektezol.com/api/v1/token`,{'method':'DELETE'})
     .then(r=>window.location.href="/")
 }
 const [isLoggedIn, setIsLoggedIn] = React.useState(false);
 React.useEffect(() => {
-    fetch(`/api/v1/token`)
+    fetch(`https://lp.ardapektezol.com/api/v1/token`)
     .then(r => r.json())
     .then(d => setToken(d.data.token))
     }, []);
 
-const [profile, setProfile] = React.useState(null);
-React.useEffect(() => {
-    fetch(`/api/v1/profile`,{
-        headers: {
-                        'Content-Type': 'application/json',
-            Authorization: token
-        }})
-    .then(r => r.json())
-    .then(d => setProfile(d.data))
-    }, [token]);
 
 React.useEffect(() => {
     if(profile!==null){setIsLoggedIn(true)}
diff --git a/frontend/src/components/pages/profile.css b/frontend/src/components/pages/profile.css
new file mode 100644
index 0000000..677fa9b
--- /dev/null
+++ b/frontend/src/components/pages/profile.css
@@ -0,0 +1,238 @@
+#section1.profile{
+    margin: 20px;
+    background: linear-gradient(0deg, #202232 50%, #2b2e46 50%);
+    border-radius: 24px;
+    height: 200px;
+
+    display: grid;
+    grid-template-columns: 250px 1fr;
+
+}
+#section1.profile>div:first-child{
+    overflow: hidden;
+    border-radius: 100%;
+    display: grid;
+
+    place-items: center;
+
+    margin: 8px 33px 8px 33px;
+    scale: 0.9;
+    grid-row: 1 / 3;
+
+
+}
+#profile-image>img{
+    border-radius: 100%;
+    transition: filter 0.3s;
+    cursor: pointer;
+}
+
+#profile-image>span{
+    z-index: 1;
+    position: absolute;
+    opacity: 0;
+    color:white;
+    transition: opacity 0.3s;
+    cursor: pointer;
+}
+
+#profile-image:hover > img{filter: blur(5px) brightness(60%);z-index: 1;}
+#profile-image:hover > span{opacity: 1;}
+
+#profile-top{
+    height: 100px;
+    display: grid;
+    grid-template-columns: 80% 20%;
+}
+#profile-top>div:nth-child(1)>div>img{
+    margin: 12px;
+    border-radius: 10px;
+}
+
+#profile-top>div:nth-child(1){
+    display: flex;
+    place-items: center;
+    font-size: 50px;
+    font-weight: bold;
+    color: white;
+}
+#profile-top>div:nth-child(1)>div{
+    display: flex;
+    height: 60px;
+}
+span.titles{
+    margin: 12px 12px 12px 0;
+
+    font-size: 18px;
+    font-weight: 100;
+    
+    padding: 6px 20px 0px 20px;
+    border-radius: 10px;
+}
+
+#profile-top>div:nth-child(2){
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    padding-right: 10px;
+}
+#profile-top>div:nth-child(2)>a>img{
+    height: 50px;
+    padding: 0 5px 0 5px; 
+    scale: 0.9;
+    filter: brightness(200%); 
+
+}
+
+
+#profile-bottom{
+    height: 100px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+#profile-bottom>div{
+    margin: 12px;
+    background-color: #2b2e46;
+    border-radius: 20px;
+    display: grid;
+    place-items: center;
+    grid-template-rows: 40% 50%;
+}
+#profile-bottom>div>span:nth-child(1){
+    color: inherit;
+    font-size: 18px;
+}
+#profile-bottom>div>span:nth-child(2){
+    color: white;
+    font-size: 40px;
+}
+#profile-bottom>div>span:nth-child(2)>span{
+    color: white;
+    font-size: 20px;
+}
+/* #section1.profile>div>div{outline: red 1px dashed;} */
+
+
+#section2.profile{
+    margin: 20px;   
+    height: 60px;
+    display: grid;
+    grid-template-columns: 1fr 1fr; 
+}
+#section2.profile>button{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: #2b2e46;
+    border: 0;
+    color: inherit;
+    font-family: inherit;
+    font-size: 24px;
+    cursor: pointer;
+
+    transition: background-color .1s;
+}
+#section2.profile>button:nth-child(1){border-radius: 24px 0 0 24px;}
+#section2.profile>button:nth-child(2){border-radius: 0 24px 24px 0;}
+
+#section3.profile1>hr{border: 1px solid #2b2e46;margin: 8px 20px 0px 20px;}
+#section3.profile1{
+    margin: 20px;
+    display: block;
+    
+    background-color: #202232;
+    border-radius: 24px;
+}
+
+#profileboard-nav{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+#profileboard-nav>select{
+
+    /* appearance: none; */
+    margin: 10px 20px 20px 20px;
+    height: 50px; 
+
+    border-radius: 24px;
+    text-align: center;
+    
+    color: inherit;
+    font-family: inherit;
+    font-size: 24px;
+    border: 0;
+
+    background-color: #2b2e46;
+}
+
+
+#profileboard-top>span>img{height: 20px;scale: .8;}
+#profileboard-top>span>img,#profileboard-top>span>span{cursor: pointer;}
+#profileboard-top{
+    height: 34px;
+    display: grid;
+    font-size: 20px;
+    padding-left: 60px;
+    margin: 0 20px;
+    grid-template-columns: 15% 15% 5% 15% 5% 15% 15% 15%;
+}
+
+#profileboard-top>span{
+    display: flex;
+    place-items: flex-end;
+}
+
+#profileboard-records{
+    padding-bottom: 10px;
+}
+
+.profileboard-record{
+    width: calc(100% - 40px);
+    margin: 10px 20px 0px 20px;
+    height: 44px; 
+
+    border-radius: 20px;
+    padding: 0 0 0 60px;
+    font-size: 20px;
+    
+    color: inherit;
+    font-family: inherit;
+    border: 0;
+    transition: background-color .1s;
+    background-color: #2b2e46;
+    display: grid;
+    grid-template-columns: 15% 15% 5% 15% 5% 15% 15% 15%;
+    overflow: hidden;
+
+    transition: height .2s
+}
+
+/* this right here should be illegal */
+.profileboard-record>span:nth-child(-n+8){filter: brightness(100%);}
+.profileboard-record>span{
+    display: flex;
+    place-items: flex-end;
+    filter: brightness(65%);
+}
+
+.profileboard-record>hr{
+    margin: 0 0 0 -60px;
+    border: 0;
+    height: 2px;
+    background-color: #202232;
+}
+
+.profileboard-record>span:nth-child(4){display: grid;}
+.profileboard-record>span{
+
+    display: flex;
+    place-items: center;
+    height: 44px;
+}
+.profileboard-record>span>button{
+    background-color: #0000;
+    border: 0;
+    cursor: pointer;
+}
diff --git a/frontend/src/components/pages/profile.js b/frontend/src/components/pages/profile.js
new file mode 100644
index 0000000..aa28546
--- /dev/null
+++ b/frontend/src/components/pages/profile.js
@@ -0,0 +1,382 @@
+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(`/api/v1/profile`,{
+      method: 'POST',
+      headers: {Authorization: token}
+    }).then(r=>window.location.reload())
+}
+
+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'>
+
+            {console.log(profileData)}
+            {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>{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.css b/frontend/src/components/pages/summary.css
index 51f8515..47c3f4b 100644
--- a/frontend/src/components/pages/summary.css
+++ b/frontend/src/components/pages/summary.css
@@ -463,11 +463,11 @@ text-align: center;
 
  /* such responsive, very mobile */
 @media screen and (max-width: 1480px) {
-    #section3{grid-template-columns: auto;}
+    #section3.summary1{grid-template-columns: auto;}
     #category{min-width: 608px;}
     #history{min-width: 608px;}
     #description{min-width: 608px;}
-    #section4{min-width: 588px;}
+    #section4.summary1{min-width: 588px;}
     
     #description>iframe{
         padding: 0 0 0 calc(50% - 304px);
@@ -476,19 +476,19 @@ text-align: center;
         align-items: center;
     }
 
-    #section1{
+    #section1.summary1{
         grid-template-columns: auto;
         place-items: center;
         text-align: center;
         
     }
 
-    #section2{
+    #section2.summary1{
         grid-template-columns: auto;
         width: 450px;
         margin: 40px auto 0 auto;
     }
-    #section2>.nav-button:nth-child(1){border-radius: 30px 30px 0 0;}
-    #section2>.nav-button:nth-child(2){border-radius: 0;}
-    #section2>.nav-button:nth-child(3){border-radius: 0 0 30px 30px;}
+    #section2.summary1>.nav-button:nth-child(1){border-radius: 30px 30px 0 0;}
+    #section2.summary1>.nav-button:nth-child(2){border-radius: 0;}
+    #section2.summary1>.nav-button:nth-child(3){border-radius: 0 0 30px 30px;}
 }
\ No newline at end of file
diff --git a/frontend/src/components/pages/summary.js b/frontend/src/components/pages/summary.js
index c03d7b9..7c72c48 100644
--- a/frontend/src/components/pages/summary.js
+++ b/frontend/src/components/pages/summary.js
@@ -20,6 +20,7 @@ const fakedata={} //for debug
     //fetching data
     const [data, setData] = React.useState(null);
     React.useEffect(() => {
+    setData(null)
         fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/summary`)
         .then(r => r.json())
         .then(d => {
@@ -37,7 +38,7 @@ const fakedata={} //for debug
         .then(r => r.json())
         .then(d => setLbData(d))
         // eslint-disable-next-line
-    }, [pageNumber]);
+    }, [pageNumber,location.pathname]);
 
 
 
@@ -247,7 +248,7 @@ return (
             <img src={data.map.image} alt="" />
         </div>
     <main>
-        <section id='section1'>
+        <section id='section1' className='summary1'>
             <div>
                 <button className='nav-button'><i className='triangle'></i><span>{data.map.game_name}</span></button>
                 <button className='nav-button'><i className='triangle'></i><span>{data.map.chapter_name}</span></button>
@@ -257,7 +258,7 @@ return (
 
         </section>
 
-        <section id='section2'>
+        <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>
diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
index d9b8012..e587c3c 100644
--- a/frontend/src/components/sidebar.js
+++ b/frontend/src/components/sidebar.js
@@ -17,6 +17,17 @@ 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);

@@ -147,7 +158,7 @@ return (
             <div id='sidebar-bottomlist'>

                 <span></span>

 

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

+                <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>

@@ -172,11 +183,13 @@ return (
             )):""}

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

                 (

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

+                <Link to={

+                    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>            

diff --git a/frontend/src/imgs/14.png b/frontend/src/imgs/14.png
new file mode 100644
index 0000000..7be6359
--- /dev/null
+++ b/frontend/src/imgs/14.png
diff --git a/frontend/src/imgs/15.png b/frontend/src/imgs/15.png
new file mode 100644
index 0000000..e5ae8aa
--- /dev/null
+++ b/frontend/src/imgs/15.png
diff --git a/frontend/src/imgs/16.png b/frontend/src/imgs/16.png
new file mode 100644
index 0000000..bf3ae0c
--- /dev/null
+++ b/frontend/src/imgs/16.png
diff --git a/frontend/src/imgs/17.png b/frontend/src/imgs/17.png
new file mode 100644
index 0000000..85e39f0
--- /dev/null
+++ b/frontend/src/imgs/17.png
diff --git a/frontend/src/imgs/18.png b/frontend/src/imgs/18.png
new file mode 100644
index 0000000..048cda9
--- /dev/null
+++ b/frontend/src/imgs/18.png
diff --git a/frontend/src/imgs/19.png b/frontend/src/imgs/19.png
new file mode 100644
index 0000000..0d97d16
--- /dev/null
+++ b/frontend/src/imgs/19.png