added popup to view all personal bests

gulpfile.js

@@ -129,6 +129,7 @@ const refactoredSrc = [
   "./src/js/elements/new-version-notification.js",
 
   "./src/js/popups/custom-text-popup.js",
+  "./src/js/popups/pb-tables-popup.js",
   "./src/js/popups/quote-search-popup.js",
   "./src/js/popups/rate-quote-popup.js",
   "./src/js/popups/version-popup.js",

src/js/global-dependencies.js

@@ -22,6 +22,7 @@ import "./import-settings-popup";
 import "./input-controller";
 import "./ready";
 import "./about-page";
+import "./pb-tables-popup";
 import * as Account from "./account";
 import * as TestStats from "./test-stats";
 import * as Replay from "./replay";

src/js/popups/pb-tables-popup.js

@@ -0,0 +1,100 @@
+import * as DB from "./db";
+
+function update(mode) {
+  $("#pbTablesPopup table tbody").empty();
+  $("#pbTablesPopup table thead td[0]").text(mode);
+
+  let allmode2 = DB.getSnapshot().personalBests[mode];
+
+  if (!allmode2) return;
+
+  let list = [];
+  Object.keys(allmode2).forEach(function (key) {
+    let pbs = allmode2[key];
+    pbs = pbs.sort(function (a, b) {
+      return b.wpm - a.wpm;
+      // if (a.difficulty === b.difficulty) {
+      //   return (a.language < b.language ? -1 : 1);
+      // }
+      // return (a.difficulty < b.difficulty ? -1 : 1)
+    });
+    pbs.forEach(function (pb) {
+      pb.mode2 = key;
+      list.push(pb);
+    });
+  });
+
+  let mode2memory;
+
+  list.forEach((pb) => {
+    $("#pbTablesPopup table tbody").append(`
+      <tr>
+        <td>${mode2memory === pb.mode2 ? "" : pb.mode2}</td>
+        <td>
+          ${pb.wpm}
+          <br />
+          <span class="sub">${pb.acc}%</span>
+        </td>
+        <td>
+          ${pb.raw}
+          <br />
+          <span class="sub">${pb.consistency}%</span>
+        </td>
+        <td>${pb.difficulty}</td>
+        <td>${pb.language.replace(/_/g, " ")}</td>
+        <td>${pb.punctuation ? '<i class="fas fa-check"></i>' : ""}</td>
+        <td>${pb.lazyMode ? '<i class="fas fa-check"></i>' : ""}</td>
+        <td>${moment(pb.timestamp).format(
+          "DD MMM YYYY"
+        )}<br><div class='sub'>${moment(pb.timestamp).format("HH:mm")}</td>
+      </tr>
+    `);
+    mode2memory = pb.mode2;
+  });
+}
+
+function show(mode) {
+  if ($("#pbTablesPopupWrapper").hasClass("hidden")) {
+    update(mode);
+
+    $("#pbTablesPopup .title").text(`All ${mode} personal bests`);
+
+    $("#pbTablesPopupWrapper")
+      .stop(true, true)
+      .css("opacity", 0)
+      .removeClass("hidden")
+      .animate({ opacity: 1 }, 100);
+  }
+}
+
+function hide() {
+  if (!$("#pbTablesPopupWrapper").hasClass("hidden")) {
+    $("#pbTablesPopupWrapper")
+      .stop(true, true)
+      .css("opacity", 1)
+      .animate(
+        {
+          opacity: 0,
+        },
+        100,
+        () => {
+          $("#pbTablesPopupWrapper").addClass("hidden");
+          $("#pbTablesPopup table tbody").empty();
+        }
+      );
+  }
+}
+
+$("#pbTablesPopupWrapper").click((e) => {
+  if ($(e.target).attr("id") === "pbTablesPopupWrapper") {
+    hide();
+  }
+});
+
+$(".pageAccount .button.showAllTimePbs").click(() => {
+  show("time");
+});
+
+$(".pageAccount .button.showAllWordsPbs").click(() => {
+  show("words");
+});

src/sass/style.scss

@@ -887,7 +887,8 @@ label.checkbox {
 
 #customWordAmountPopupWrapper,
 #customTestDurationPopupWrapper,
-#practiseWordsPopupWrapper {
+#practiseWordsPopupWrapper,
+#pbTablesPopupWrapper {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.75);
@@ -902,7 +903,8 @@ label.checkbox {
 
   #customWordAmountPopup,
   #customTestDurationPopup,
-  #practiseWordsPopup {
+  #practiseWordsPopup,
+  #pbTablesPopup {
     background: var(--bg-color);
     border-radius: var(--roundness);
     padding: 2rem;
@@ -934,6 +936,58 @@ label.checkbox {
   }
 }
 
+#pbTablesPopupWrapper #pbTablesPopup {
+  .title {
+    color: var(--text-color);
+  }
+  min-width: 50rem;
+  max-height: calc(100vh - 10rem);
+  overflow-y: scroll;
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    color: var(--text-color);
+
+    td {
+      padding: 0.5rem 0.5rem;
+    }
+
+    thead {
+      color: var(--sub-color);
+      font-size: 0.75rem;
+    }
+
+    tbody tr:nth-child(odd) td {
+      background: rgba(0, 0, 0, 0.1);
+    }
+
+    td.infoIcons span {
+      margin: 0 0.1rem;
+    }
+    .miniResultChartButton {
+      opacity: 0.25;
+      transition: 0.25s;
+      cursor: pointer;
+      &:hover {
+        opacity: 1;
+      }
+    }
+    .sub {
+      opacity: 0.5;
+    }
+    td {
+      text-align: right;
+    }
+    td:nth-child(6),
+    td:nth-child(7) {
+      text-align: center;
+    }
+    tbody td:nth-child(1) {
+      font-size: 1.5rem;
+    }
+  }
+}
+
 #customThemeShareWrapper {
   width: 100%;
   height: 100%;
@@ -3505,6 +3559,11 @@ key {
     }
   }
 
+  .showAllTimePbs,
+  .showAllWordsPbs {
+    margin-top: 1rem;
+  }
+
   .topFilters .buttons {
     display: flex;
     justify-content: space-evenly;

static/index.html

@@ -128,6 +128,35 @@
       <div id="simplePopup" popupId=""></div>
     </div>
 
+    <div id="pbTablesPopupWrapper" class="hidden">
+      <div id="pbTablesPopup">
+        <!-- <div class="title">All words personal bests</div> -->
+        <table>
+          <thead>
+            <tr>
+              <td width="1%">words</td>
+              <td>
+                wpm
+                <br />
+                <span class="sub">accuracy</span>
+              </td>
+              <td>
+                raw
+                <br />
+                <span class="sub">consistency</span>
+              </td>
+              <td>difficulty</td>
+              <td>language</td>
+              <td>punctuation</td>
+              <td>lazy mode</td>
+              <td>date</td>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    </div>
+
     <div id="practiseWordsPopupWrapper" class="hidden">
       <div id="practiseWordsPopup" action="">
         <div class="title">Practice words</div>
@@ -3858,6 +3887,7 @@
                         </tr>
                       </tbody>
                     </table>
+                    <div class="button showAllTimePbs">show all</div>
                   </div>
                   <div class="titleAndTable wordsPbTable">
                     <table width="100%">
@@ -3904,6 +3934,7 @@
                         </tr>
                       </tbody>
                     </table>
+                    <div class="button showAllWordsPbs">show all</div>
                   </div>
                 </div>
               </div>