From 359b6edec9c412ad34b9f7c357212bb8d79ebe09 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Fri, 3 Jul 2020 20:31:23 +0100
Subject: [PATCH] added leaderboard display on the result screen

---
 public/css/style.scss | 21 ++++++++++++++++++++-
 public/index.html     |  4 ++++
 public/js/script.js   | 21 +++++++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 7837dc9b0..6144feb5d 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -170,6 +170,8 @@ a:hover {
 
   #leaderboards {
     width: 75vw;
+    max-height: calc(100vh - 5rem);
+    overflow-y: scroll;
     background: var(--bg-color);
     border-radius: var(--roundness);
     padding: 2rem;
@@ -885,7 +887,8 @@ key {
       "wpm key"
       "raw time"
       "source source"
-      "testType infoAndTags";
+      "testType infoAndTags"
+      "leaderboards leaderboards";
 
     .group {
       .top {
@@ -917,6 +920,22 @@ key {
       }
     }
 
+    .leaderboards {
+      align-self: baseline;
+      grid-area: leaderboards;
+      color: var(--sub-color);
+
+      .top {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+
+      .bottom {
+        font-size: 1rem;
+        line-height: 1rem;
+      }
+    }
+
     .source {
       align-self: baseline;
       grid-area: source;
diff --git a/public/index.html b/public/index.html
index 4dd02e56f..3540659ad 100644
--- a/public/index.html
+++ b/public/index.html
@@ -299,6 +299,10 @@
                 <div class="bottom">-</div>
               </div>
             </div>
+            <div class="group leaderboards">
+              <div class="top">leaderboards</div>
+              <div class="bottom">-</div>
+            </div>
           </div>
           <div class="chart">
             <!-- <div class="title">wpm over time</div> -->
diff --git a/public/js/script.js b/public/js/script.js
index 19ad539ac..d352dec36 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -1072,6 +1072,7 @@ function showResult(difficultyFailed = false) {
               );
               wpmOverTimeChart.update({ duration: 0 });
             }
+            $("#result .stats .leaderboards .bottom").html("checking...");
             testCompleted({
               uid: firebase.auth().currentUser.uid,
               obj: completedEvent,
@@ -1089,6 +1090,26 @@ function showResult(difficultyFailed = false) {
                 } catch (e) {
                   console.log("Analytics unavailable");
                 }
+                if (e.data.leaderboard === null) {
+                  $("#result .stats .leaderboards .bottom").html("not found");
+                } else if (e.data.leaderboard === -1) {
+                  $("#result .stats .leaderboards .bottom").html(
+                    "not qualified"
+                  );
+                } else if (e.data.leaderboard >= 0) {
+                  let pos = e.data.leaderboard + 1;
+                  let numend = "th";
+                  if (pos === 1) {
+                    numend = "st";
+                  } else if (pos === 2) {
+                    numend = "nd";
+                  } else if (pos === 3) {
+                    numend = "rd";
+                  }
+                  $("#result .stats .leaderboards .bottom").html(
+                    `${e.data.leaderboard}${numend} place`
+                  );
+                }
                 if (e.data.resultCode === 2) {
                   //new pb
                   if (!localPb) {