From 5f2dcecab3e06fe3794950fdbc2e8347197b421c Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Fri, 3 Jul 2020 19:30:05 +0100
Subject: [PATCH] added leaderboards skeleton

---
 public/css/style.scss     |  85 +++++++++++++
 public/index.html         | 249 ++++++++++++++++++++++++++++++++++++++
 public/js/leaderboards.js |  36 ++++++
 public/js/script.js       |   8 +-
 4 files changed, 376 insertions(+), 2 deletions(-)
 create mode 100644 public/js/leaderboards.js

diff --git a/public/css/style.scss b/public/css/style.scss
index 7d91543dd..300550c1a 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -154,6 +154,91 @@ a:hover {
   }
 }
 
+#leaderboardsWrapper {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+
+  #leaderboards {
+    width: 75vw;
+    background: var(--bg-color);
+    border-radius: var(--roundness);
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    grid-template-rows: auto auto 1fr;
+    grid-template-areas: "title buttons"
+      "tables tables";
+    grid-template-columns: 1fr 1fr;
+
+    .mainTitle {
+      font-size: 3rem;
+      line-height: 3rem;
+      grid-area: title;
+    }
+
+    .title {
+      font-size: 2rem;
+      line-height: 2rem;
+    }
+
+    .tables {
+      grid-area: tables;
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: 1fr 1fr;
+
+      table {
+        width: 100%;
+        border-spacing: 0;
+        border-collapse: collapse;
+
+        td {
+          padding: .25rem .5rem;
+        }
+
+        thead {
+          color: var(--sub-color);
+          font-size: .75rem;
+        }
+
+        tbody {
+          color: var(--text-color);
+
+          tr:nth-child(odd) td {
+            background: rgba(0, 0, 0, .1);
+          }
+        }
+      }
+    }
+
+    .buttons {
+      grid-area: buttons;
+      display: -ms-grid;
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: 1fr 1fr;
+      align-self: center;
+
+      .buttonGroup {
+        display: grid;
+        grid-auto-flow: column;
+        gap: 1rem;
+
+      }
+    }
+  }
+}
+
+
 #tagsWrapper {
   width: 100%;
   height: 100%;
diff --git a/public/index.html b/public/index.html
index ce9cb2aa8..4a503cc26 100644
--- a/public/index.html
+++ b/public/index.html
@@ -52,6 +52,249 @@
       <div class="button confirmButton"><i class="fas fa-check"></i></div>
     </div>
   </div>
+  <div id="leaderboardsWrapper">
+    <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>
+        <div class="buttonGroup">
+          <div class="button">10</div>
+          <div class="button active">100</div>
+        </div>
+        <div class="buttonGroup hidden">
+          <div class="button">15</div>
+          <div class="button">60</div>
+        </div>
+      </div>
+      <div class="tables">
+        <div class="titleAndTable">
+          <div class="title">
+            Overall
+          </div>
+          <table>
+            <thead>
+              <tr>
+                <td>#</td>
+                <td>name</td>
+                <td>wpm</td>
+                <td>raw</td>
+                <td>acc</td>
+                <td>test</td>
+                <td>date</td>
+              </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)
+          </div>
+          <table>
+            <thead>
+              <tr>
+                <td>#</td>
+                <td>name</td>
+                <td>wpm</td>
+                <td>raw</td>
+                <td>acc</td>
+                <td>test</td>
+                <td>date</td>
+              </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>
+    </div>
+  </div>
   <div id="versionHistoryWrapper" class="hidden">
     <div id="versionHistory">
       <div class="tip">Click anywhere to dismiss</div>
@@ -97,6 +340,11 @@
             <i class="fas fa-fw fa-keyboard"></i>
           </div>
         </div>
+        <div class="icon-button leaderboards" tabindex="2" onclick="this.blur();">
+          <div class="icon">
+            <i class="fas fa-fw fa-list-ol"></i>
+          </div>
+        </div>
         <div class="icon-button" tabindex="2" href="/about" onclick="this.blur();">
           <div class="icon">
             <i class="fas fa-fw fa-info"></i>
@@ -832,6 +1080,7 @@
 <script src="js/db.js?v=25"></script>
 <script src="js/userconfig.js?v=25"></script>
 <script src="js/commandline.js?v=25"></script>
+<script src="js/leaderboards.js?v=25"></script>
 <script src="js/settings.js?v=25"></script>
 <script src="js/account.js?v=25"></script>
 <script src="js/script.js?v=25"></script>
diff --git a/public/js/leaderboards.js b/public/js/leaderboards.js
new file mode 100644
index 000000000..df8d7b7c5
--- /dev/null
+++ b/public/js/leaderboards.js
@@ -0,0 +1,36 @@
+function showLeaderboards() {
+  if ($("#leaderboardsWrapper").hasClass("hidden")) {
+    $("#leaderboardsWrapper")
+      .stop(true, true)
+      .css("opacity", 0)
+      .removeClass("hidden")
+      .animate(
+        {
+          opacity: 1,
+        },
+        125
+      );
+  }
+}
+
+function hideLeaderboards() {
+  $("#leaderboardsWrapper")
+    .stop(true, true)
+    .css("opacity", 1)
+    .animate(
+      {
+        opacity: 0,
+      },
+      100,
+      () => {
+        $("#leaderboardsWrapper").addClass("hidden");
+      }
+    );
+  focusWords();
+}
+
+$("#leaderboardsWrapper").click((e) => {
+  if ($(e.target).attr("id") === "leaderboardsWrapper") {
+    hideLeaderboards();
+  }
+});
diff --git a/public/js/script.js b/public/js/script.js
index a834cd12f..19ad539ac 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -1979,8 +1979,12 @@ $(document).on("click", "#top .config .mode .text-button", (e) => {
 
 $(document).on("click", "#top #menu .icon-button", (e) => {
   if ($(e.currentTarget).hasClass("discord")) return;
-  href = $(e.currentTarget).attr("href");
-  changePage(href.replace("/", ""));
+  if ($(e.currentTarget).hasClass("leaderboards")) {
+    showLeaderboards();
+  } else {
+    href = $(e.currentTarget).attr("href");
+    changePage(href.replace("/", ""));
+  }
 });
 
 $(window).on("popstate", (e) => {