From 208a36e84ad08baece0721cbe3539e12f6680a87 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Fri, 3 Jul 2020 20:10:40 +0100
Subject: [PATCH] leaderboard now pull data from db

---
 public/css/style.scss     |   1 +
 public/index.html         | 211 +++-----------------------------------
 public/js/leaderboards.js |  85 ++++++++++++++-
 3 files changed, 102 insertions(+), 195 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 300550c1a..7837dc9b0 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -135,6 +135,7 @@ a:hover {
   animation-iteration-count: infinite;
   animation-duration: 2s;
   animation-timing-function: cubic-bezier(0.38, 0.16, 0.57, 0.82);
+  z-index: 9999;
 }
 
 @keyframes loader {
diff --git a/public/index.html b/public/index.html
index 4a503cc26..4dd02e56f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -52,31 +52,31 @@
       <div class="button confirmButton"><i class="fas fa-check"></i></div>
     </div>
   </div>
-  <div id="leaderboardsWrapper">
+  <div id="leaderboardsWrapper" class="hidden">
     <div id="leaderboards">
       <div class="mainTitle">
         Leaderboards
       </div>
       <div class="buttons">
-        <div class="buttonGroup">
-          <div class="button active">words</div>
-          <div class="button">time</div>
+        <div class="buttonGroup leaderboardMode">
+          <div class="button active" mode="words">words</div>
+          <div class="button" mode="time">time</div>
         </div>
-        <div class="buttonGroup">
-          <div class="button">10</div>
-          <div class="button active">100</div>
+        <div class="buttonGroup leaderboardWords">
+          <div class="button active" words="10">10</div>
+          <div class="button" words="100">100</div>
         </div>
-        <div class="buttonGroup hidden">
-          <div class="button">15</div>
-          <div class="button">60</div>
+        <div class="buttonGroup leaderboardTime hidden">
+          <div class="button" time="15">15</div>
+          <div class="button" time="60">60</div>
         </div>
       </div>
       <div class="tables">
         <div class="titleAndTable">
           <div class="title">
-            Overall
+            Global
           </div>
-          <table>
+          <table class="global">
             <thead>
               <tr>
                 <td>#</td>
@@ -89,102 +89,13 @@
               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
+
             </tbody>
           </table>
         </div>
         <div class="titleAndTable">
           <div class="title">
-            Daily (30-05-2020)
+            Daily
           </div>
           <table>
             <thead>
@@ -199,98 +110,10 @@
               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
-              <tr>
-                <td>1</td>
-                <td>jack</td>
-                <td>100</td>
-                <td>110</td>
-                <td>95</td>
-                <td>words10</td>
-                <td>now</td>
-              </tr>
             </tbody>
           </table>
+          soon
+
         </div>
       </div>
     </div>
@@ -342,7 +165,7 @@
         </div>
         <div class="icon-button leaderboards" tabindex="2" onclick="this.blur();">
           <div class="icon">
-            <i class="fas fa-fw fa-list-ol"></i>
+            <i class="fas fa-fw fa-crown"></i>
           </div>
         </div>
         <div class="icon-button" tabindex="2" href="/about" onclick="this.blur();">
diff --git a/public/js/leaderboards.js b/public/js/leaderboards.js
index df8d7b7c5..8f1c77fe7 100644
--- a/public/js/leaderboards.js
+++ b/public/js/leaderboards.js
@@ -1,3 +1,9 @@
+let currentLeaderboard = {
+  mode: "words",
+  words: "10",
+  time: "15",
+};
+
 function showLeaderboards() {
   if ($("#leaderboardsWrapper").hasClass("hidden")) {
     $("#leaderboardsWrapper")
@@ -8,7 +14,10 @@ function showLeaderboards() {
         {
           opacity: 1,
         },
-        125
+        125,
+        () => {
+          updateLeaderboards();
+        }
       );
   }
 }
@@ -29,8 +38,82 @@ function hideLeaderboards() {
   focusWords();
 }
 
+function updateLeaderboards() {
+  $("#leaderboardsWrapper .leaderboardMode .button").removeClass("active");
+  $(
+    `#leaderboardsWrapper .leaderboardMode .button[mode=${currentLeaderboard.mode}]`
+  ).addClass("active");
+
+  $("#leaderboardsWrapper .leaderboardWords .button").removeClass("active");
+  $(
+    `#leaderboardsWrapper .leaderboardWords .button[words=${currentLeaderboard.words}]`
+  ).addClass("active");
+
+  $("#leaderboardsWrapper .leaderboardTime .button").removeClass("active");
+  $(
+    `#leaderboardsWrapper .leaderboardTime .button[time=${currentLeaderboard.time}]`
+  ).addClass("active");
+
+  if (currentLeaderboard.mode === "time") {
+    $("#leaderboardsWrapper .leaderboardWords").addClass("hidden");
+    $("#leaderboardsWrapper .leaderboardTime").removeClass("hidden");
+  } else if (currentLeaderboard.mode === "words") {
+    $("#leaderboardsWrapper .leaderboardWords").removeClass("hidden");
+    $("#leaderboardsWrapper .leaderboardTime").addClass("hidden");
+  }
+
+  let mode2;
+  if (currentLeaderboard.mode === "words") {
+    mode2 = currentLeaderboard.words;
+  } else if (currentLeaderboard.mode === "time") {
+    mode2 = currentLeaderboard.time;
+  }
+
+  showBackgroundLoader();
+  firebase
+    .functions()
+    .httpsCallable("getLeaderboard")({
+      mode: currentLeaderboard.mode,
+      mode2: mode2,
+      type: "global",
+    })
+    .then((data) => {
+      console.log(data);
+      hideBackgroundLoader();
+      $("#leaderboardsWrapper table.global tbody").empty();
+      data.data.board.forEach((entry, index) => {
+        $("#leaderboardsWrapper table.global tbody").append(`
+        <tr>
+        <td>${index + 1}</td>
+        <td>${entry.name}</td>
+        <td>${entry.wpm}</td>
+        <td>${entry.raw}</td>
+        <td>${entry.acc}</td>
+        <td>${entry.mode} ${entry.mode2}</td>
+        <td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
+      </tr>
+      `);
+      });
+    });
+}
+
 $("#leaderboardsWrapper").click((e) => {
   if ($(e.target).attr("id") === "leaderboardsWrapper") {
     hideLeaderboards();
   }
 });
+
+$("#leaderboardsWrapper .leaderboardMode .button").click((e) => {
+  currentLeaderboard.mode = $(e.target).attr("mode");
+  updateLeaderboards();
+});
+
+$("#leaderboardsWrapper .leaderboardWords .button").click((e) => {
+  currentLeaderboard.words = $(e.target).attr("words");
+  updateLeaderboards();
+});
+
+$("#leaderboardsWrapper .leaderboardTime .button").click((e) => {
+  currentLeaderboard.time = $(e.target).attr("time");
+  updateLeaderboards();
+});