added leaderboard (#53)

Former-commit-id: cca018d7af153dbeab6689f48293ee58a8c871fe

4 files changed, 224 insertions, 18 deletions

diff --git a/frontend/src/components/pages/summary.css b/frontend/src/components/pages/summary.css
index a0f2f5d..6ac56eb 100644
--- a/frontend/src/components/pages/summary.css
+++ b/frontend/src/components/pages/summary.css
@@ -65,7 +65,7 @@
 #section3{
     margin: 40px 0 0 0;
 
-    display: grid; 
+    display: none; 
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }
@@ -73,7 +73,7 @@
 #category{
     display: grid;
     height: 350px;
-    border-radius: 30px;
+    border-radius: 24px;
     overflow: hidden;
     
 }
@@ -121,7 +121,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
 #history{
     min-width: 560px;
     background-color: #202232;
-    border-radius: 30px;
+    border-radius: 24px;
 
 }
 
@@ -162,8 +162,8 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
     cursor: pointer;
     transition: background-color .1s;
 }
-#history>span>button:nth-child(1){border-radius: 0 0 0 30px;}
-#history>span>button:nth-child(2){border-radius: 0 0 30px 0;}
+#history>span>button:nth-child(1){border-radius: 0 0 0 24px;}
+#history>span>button:nth-child(2){border-radius: 0 0 24px 0;}
 
 #graph{
     display: grid;
@@ -239,7 +239,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
 /* Section 4: Difficulty + count */
 
 #section4{
-    display: grid;
+    display: none;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin: 40px 0 0 0;
@@ -252,7 +252,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
     text-align: center;
     cursor: default;
 
-    border-radius: 20px;
+    border-radius: 24px;
     display: grid;
     grid-template-rows: 20px 40px 40px;
 }
@@ -273,7 +273,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
 }
 
 .difficulty-rating{
-    border-radius: 20px;
+    border-radius: 24px;
     width: 40px; height: 3px;
     background-color: #2b2e46;
 }
@@ -302,7 +302,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
     margin: 4px;
     float:right; 
     border: 0;
-    border-radius: 20px;
+    border-radius: 24px;
     width: 608px;    height: 342px;
 }
 
@@ -315,6 +315,126 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
 #description-text>b{font-size: inherit;}
 #description-text>a{font-size: inherit;color: #3c91e6;}
 
+
+/* Section 6: leaderboards */
+#section6{
+    margin: 40px 0 20px 0;
+    min-height: 600px;
+    background-color: #202232;
+
+    border-radius: 24px;
+    padding: 10px 10px 0 10px;
+
+}
+#leaderboard-top>span{
+    display: flex;
+    place-items: flex-end;
+}
+
+
+#section6>hr{border: 1px solid #2b2e46;margin: 8px 20px 0px 20px;}
+#leaderboard-top{
+    display: grid;
+    grid-template-columns: 7.5% 25% 7.5% 25% 20% 15%;
+    font-size: 20px;
+    height: 34px;
+    padding-left: 60px;
+    margin: 0 20px 0 20px;
+}
+#page-number{
+    display: flex;
+    width: auto;
+    flex-direction: row-reverse;
+}
+#page-number>div{
+width: 100px;   
+place-items: center;
+display: grid;
+grid-template-columns: 1fr 1fr 1fr;
+text-align: center;
+}
+#page-number>div>button{
+    width: 30px;
+    height: 30px;
+    background-color: #202232;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+}
+
+.leaderboard-record{
+    margin: 10px 20px 0px 20px;
+    height: 44px; width: calc(100% - 40px);
+    width: auto;
+
+    color: inherit;
+    border-radius: 40px;
+    text-align: left;
+    padding: 0 0 0 60px;
+    font-size: 20px;
+    font-family: inherit;
+    
+    
+    grid-template-columns: 3% 4.5% 25% 4% 3.5% 25% 20% 15%;
+    display: grid;
+
+    border: 0;
+    transition: background-color .1s;
+    background-color: #2b2e46;
+}
+
+.leaderboard-record>span:nth-child(1){display: grid;}
+.leaderboard-record>span:nth-child(4){display: grid;}
+.leaderboard-record>span:last-child{flex-direction: row-reverse;}
+.leaderboard-record>span{
+    display: flex;
+    place-items: center;
+    height: 44px;
+}
+.leaderboard-record>span>img{
+    height: 36px;
+    border-radius: 50px;
+    padding: 0;
+    scale: .95;
+}
+.leaderboard-record>span>button{
+    background-color: #0000;
+    border: 0;
+    cursor: pointer;
+    transition: opacity 0.1s;
+}
+
+.hover-popup {
+    position: relative;
+  }
+  
+  .hover-popup::after {
+    content: attr(popup-text);
+    position: absolute;
+    /* top: 0%; */
+    /* left: 80%; */
+    /* transform: translateX(-100%); */
+    /* padding: 5px; */
+    background-color: #2b2e46;
+    /* border: 1px solid #161723; */
+    border-radius: 8px;
+    visibility: hidden;
+    opacity: 0;
+    /* transition: visibility 0s, opacity 0.3s ease; */
+  }
+  
+  .hover-popup:hover::after {
+    visibility: visible;
+    opacity: 1;
+  }
+
+.leaderboard-record:last-child{margin: 10px 20px 10px 20px;}
+
+
+
+
+
+
 .triangle{
     display: inline-block;
         width: 8px;     height: 0;
diff --git a/frontend/src/components/pages/summary.js b/frontend/src/components/pages/summary.js
index 276389f..deb5fd2 100644
--- a/frontend/src/components/pages/summary.js
+++ b/frontend/src/components/pages/summary.js
@@ -7,6 +7,8 @@ import "./summary.css";
 import img4 from "../../imgs/4.png"
 import img5 from "../../imgs/5.png"
 import img6 from "../../imgs/6.png"
+import img12 from "../../imgs/12.png"
+import img13 from "../../imgs/13.png"
 import Modview from "./summary_modview.js"
 
 export default function Summary(prop) {
@@ -28,7 +30,15 @@ const fakedata={} //for debug
         // eslint-disable-next-line
     }, []);
 
-
+    const [pageNumber, setPageNumber] = React.useState(1);
+    const [lbData, setLbData] = React.useState(null);
+    React.useEffect(() => {
+        fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/leaderboards?page=${pageNumber}`)
+        .then(r => r.json())
+        .then(d => setLbData(d))
+        console.log(lbData)
+        // eslint-disable-next-line
+    }, [pageNumber]);
 
 
 
@@ -40,6 +50,11 @@ function NavClick() {
     const btn = document.querySelectorAll("#section2 button.nav-button");
     btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"});
     btn[navState].style.backgroundColor = "#202232";
+
+    document.querySelectorAll("section").forEach((e,i)=>i>=2?e.style.display="none":"")
+    if(navState === 0){document.querySelectorAll(".summary1").forEach((e) => {e.style.display = "grid"});}
+    if(navState === 1){document.querySelectorAll(".summary2").forEach((e) => {e.style.display = "block"});}
+    if(navState === 2){document.querySelectorAll(".summary3").forEach((e) => {e.style.display = "block"});}
 }}
 
 
@@ -108,7 +123,6 @@ function graph(state) {
                 <span><br/></span>
                 ))
         case 2: // graph
-        let i = 1
         let g = 0
         let h = 0
         return  graph_numbers.map((e,j)=>(
@@ -123,11 +137,11 @@ function graph(state) {
                         <td className='graph_ver'
                         data-graph={ h++ }
                         style={{outline: 
-                             g==h-1 ? 
+                             g===h-1 ? 
                              "1px solid #2b2e46" : g>=h ? "1px dashed white" : "0" }}
                         ></td>
                         
-                        {g==h && graph_score.includes(graph_max-j) ? 
+                        {g===h && graph_score.includes(graph_max-j) ? 
                         <button className='graph-button'
                         onClick={()=>{
                             selectRun(graph_dates.length-(i-1),catState);
@@ -189,6 +203,29 @@ function YouTubeGetID(url){
     return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_]/i)[0] : url[0];
  }
 
+function TimeAgo(date) {
+    const seconds = Math.floor((new Date() - date) / 1000);
+  
+    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';
+  };
+
 if(data!==null){
 return (
     <>
@@ -213,8 +250,7 @@ return (
                 <button className='nav-button' onClick={()=>setNavState(1)}><img src={img5} alt="" /><span>Leaderboards</span></button>
                 <button className='nav-button' onClick={()=>setNavState(2)}><img src={img6} alt="" /><span>Discussions</span></button>
         </section>
-
-        <section id='section3'>
+        <section id='section3' className='summary1'>
             <div id='category'
             style={data.map.image===""?{backgroundColor:"#202232"}:{}}>
                 <img src={data.map.image} alt="" id='category-image'></img>
@@ -279,7 +315,7 @@ return (
                 
                 
         </section>
-        <section id='section4'>
+        <section id='section4' className='summary1'>
         <div id='difficulty'>
                 <span>Difficulty</span>
                 {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 0 ? (<span style={{color:"lime"}}>Very easy</span>):null}
@@ -301,7 +337,7 @@ return (
             </div>
         </section>
 
-        <section id='section5'>
+        <section id='section5' className='summary1'>
             <div id='description'>
                 {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].showcase!=="" ?
                 <iframe title='Showcase video' src={vid}> </iframe>
@@ -312,9 +348,59 @@ return (
                         {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].description}
                     </ReactMarkdown>
                 </span>
-            </div>
+            </div>    
+        </section>
+
+        {lbData===null?(
+            <section id='section6' className='summary2'>
+                <h1 style={{textAlign:"center"}}>Map is not available for competitive boards.</h1>
+            </section>
+        ):lbData.data.records.length===0?(
+            <section id='section6' className='summary2'>
+            <h1 style={{textAlign:"center"}}>No records found.</h1>
+        </section>
+        ):(
+        <section id='section6' className='summary2'>
             
+            <div id='leaderboard-top'>
+                <span>Place</span>
+                <span>Runner</span>
+                <span>Portals</span>
+                <span>Time</span>
+                <span>Date</span>
+                <div id='page-number'>
+                    <div>
+
+                    <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
+                    ><i className='triangle' style={{position:'relative',left:'-5px',}}></i> </button>
+                    <span>{lbData.data.pagination.current_page}/{lbData.data.pagination.total_pages}</span>
+                    <button onClick={() => pageNumber === lbData.data.pagination.total_pages ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
+                    ><i className='triangle' style={{position:'relative',left:'5px',transform:'rotate(180deg)'}}></i> </button>
+                    </div>
+                </div>
+            </div>
+            <hr/>
+            <div id='leaderboard-records'>
+            {lbData.data.records.map((r, index) => (
+                    <span className='leaderboard-record' key={index} >
+                        <span>{r.placement}</span>
+                        <span> </span>
+                        <span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span>
+                        <span>{r.score_count}</span>
+                        <span> </span>
+                        <span>{r.score_time}</span>
+                        <span className='hover-popup' popup-text={r.record_date.replace("T",' ').split(".")[0]}>{ TimeAgo(new Date(r.record_date.replace("T"," ").replace("Z",""))) }</span>
+                        <span>
+                            <button onClick={()=>{window.alert(r.demo_id)}}><img src={img13} alt="demo_id" /></button>
+                            <button onClick={()=>window.location.href=`https://lp.ardapektezol.com/api/v1/demos?uuid=${r.demo_id}`}><img src={img12} alt="download" /></button>
+                        </span>
+                    </span>
+                    ))}
+                    {console.log(lbData.data.records.length)}
+            </div>
         </section>
+        )}
+
     </main>
     </>
     )
diff --git a/frontend/src/imgs/12.png b/frontend/src/imgs/12.png
new file mode 100644
index 0000000..abb7717
--- /dev/null
+++ b/frontend/src/imgs/12.png
diff --git a/frontend/src/imgs/13.png b/frontend/src/imgs/13.png
new file mode 100644
index 0000000..28a67c5
--- /dev/null
+++ b/frontend/src/imgs/13.png