feat: coop leaderboards (#53)

Former-commit-id: ce710d4fc8821850c64777d90405bd4ad717961d

2 files changed, 65 insertions, 13 deletions

diff --git a/frontend/src/components/pages/summary.css b/frontend/src/components/pages/summary.css
index 6ac56eb..51f8515 100644
--- a/frontend/src/components/pages/summary.css
+++ b/frontend/src/components/pages/summary.css
@@ -326,21 +326,28 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
     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;
 }
+#leaderboard-top>span{
+    
+    display: flex;
+    place-items: flex-end;
+}
+
+#runner{
+    display: grid;
+    grid-template-columns: 50% 50%;
+    align-items: end;
+}
+
 #page-number{
     display: flex;
     width: auto;
@@ -374,8 +381,7 @@ text-align: center;
     font-size: 20px;
     font-family: inherit;
     
-    
-    grid-template-columns: 3% 4.5% 25% 4% 3.5% 25% 20% 15%;
+    grid-template-columns: 3% 4.5% 40% 4% 3.5% 15% 15% 15%;
     display: grid;
 
     border: 0;
@@ -391,12 +397,24 @@ text-align: center;
     place-items: center;
     height: 44px;
 }
-.leaderboard-record>span>img{
+
+.leaderboard-record>div>span>img{
     height: 36px;
     border-radius: 50px;
     padding: 0;
     scale: .95;
 }
+.leaderboard-record>div{
+    display: grid;
+    grid-template-columns: 50% 50%;
+    place-items: left;
+}
+.leaderboard-record>div>span{
+    display: flex;
+    place-items: center;
+    height: 44px;
+}
+
 .leaderboard-record>span>button{
     background-color: #0000;
     border: 0;
diff --git a/frontend/src/components/pages/summary.js b/frontend/src/components/pages/summary.js
index dde2243..4fc30a8 100644
--- a/frontend/src/components/pages/summary.js
+++ b/frontend/src/components/pages/summary.js
@@ -225,6 +225,19 @@ function TimeAgo(date) {
     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(data!==null){
 return (
     <>
@@ -362,9 +375,20 @@ return (
         ):(
         <section id='section6' className='summary2'>
             
-            <div id='leaderboard-top'>
+            <div id='leaderboard-top'
+            style={lbData.data.map.is_coop?{gridTemplateColumns:"7.5% 40% 7.5% 15% 15% 15%"}:{gridTemplateColumns:"7.5% 30% 10% 20% 17.5% 15%"}}
+            >
                 <span>Place</span>
-                <span>Runner</span>
+                
+                {lbData.data.map.is_coop?(
+                    <div id='runner'>
+                        <span>Host</span>
+                        <span>Partner</span>
+                    </div>
+                ):(
+                    <span>Runner</span>
+                )}
+                
                 <span>Portals</span>
                 <span>Time</span>
                 <span>Date</span>
@@ -382,13 +406,23 @@ return (
             <hr/>
             <div id='leaderboard-records'>
             {lbData.data.records.map((r, index) => (
-                    <span className='leaderboard-record' key={index} >
+                    <span className='leaderboard-record' key={index} 
+                    style={lbData.data.map.is_coop?{gridTemplateColumns:"3% 4.5% 40% 4% 3.5% 15% 15% 14.5%"}:{gridTemplateColumns:"3% 4.5% 30% 4% 6% 20% 17% 15%"}}
+                    >
                         <span>{r.placement}</span>
                         <span> </span>
-                        <span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span>
+                        {lbData.data.map.is_coop?(
+                        <div>
+                            <span><img src={r.host.avatar_link} alt='' /> &nbsp; {r.host.user_name}</span>
+                            <span><img src={r.partner.avatar_link} alt='' /> &nbsp; {r.partner.user_name}</span>
+                        </div>
+                        ):(
+                        <div><span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span></div>
+                        )}
+                        
                         <span>{r.score_count}</span>
                         <span> </span>
-                        <span>{r.score_time}</span>
+                        <span>{TicksToTime(r.score_time)}</span>
                         <span className='hover-popup' popup-text={r.record_date.replace("T",' ').split(".")[0]}>{ TimeAgo(new Date(r.record_date.replace("T"," ").replace("Z",""))) }</span>
                         <span>
                             <button onClick={()=>{window.alert(r.demo_id)}}><img src={img13} alt="demo_id" /></button>