From 06d74188bf35cc97eba1670df758d934001248a6 Mon Sep 17 00:00:00 2001
From: unknown <bartnikjack@gmail.com>
Date: Wed, 20 May 2020 00:11:57 +0100
Subject: [PATCH 1/7] added advanced filters to the results page

---
 public/css/style.scss |  43 ++++-
 public/index.html     |  91 +++++++--
 public/js/account.js  | 419 +++++++++++++++++++++++-------------------
 3 files changed, 346 insertions(+), 207 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index df4569306..fcad69f07 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -941,7 +941,7 @@ key {
   }
   .triplegroup{
     display: grid;
-    grid-template-columns: 1fr 1fr 2fr;
+    grid-template-columns: 1fr 1fr 1fr;
     gap: 1rem;
   }
   .group{
@@ -969,6 +969,47 @@ key {
   }
 }
 
+.pageAccount{
+  .group.filterButtons{
+    gap: 1rem;
+    display: grid;
+    .buttonsAndTitle{
+      display: grid;
+      gap: .25rem;
+      color: var(--sub-color);
+      line-height: 1rem;
+      font-size: 1rem;
+    }
+    .buttons{
+      display: grid;
+      grid-auto-flow: column;
+      gap: 1rem;
+      .button{
+        background: rgba(0,0,0,.1);
+        color: var(--sub-color);
+        text-align: center;
+        padding: .5rem;
+        border-radius: var(--roundness);
+        cursor: pointer;
+        transition: .25s;
+        -webkit-user-select: none;
+        &.active{
+          background: var(--sub-color);
+          color: var(--bg-color);
+        }
+        &:hover{
+          color: var(--sub-color);
+          background: var(--main-color);
+        }
+      }
+      &.languages{
+        grid-template-columns: repeat(4,1fr);
+        grid-auto-flow: unset;
+      }
+    }
+  }
+}
+
 
 
 * {
diff --git a/public/index.html b/public/index.html
index b58eaaf03..23ab1b23e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -277,38 +277,94 @@
       <div class="page pageAccount hidden">
         <div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
         <div class="content hidden">
-          <div class="group">
+          <div class="group filterButtons">
+            <div class="buttonsAndTitle">
+              <div class="title">filters</div>
+              <div class="buttons globalFilters">
+                <div class="button" filter="all">all</div>
+                <div class="button" filter="none">none</div>
+              </div>
+            </div>
+            <div class="buttonsAndTitle">
+              <div class="title">mode</div>
+              <div class="buttons modeFilters">
+                <div class="button" filter="words">words</div>
+                <div class="button" filter="time">time</div>
+                <div class="button" filter="custom">custom</div>
+              </div>
+            </div>
+            <div class="buttonsAndTitle">
+              <div class="title">words</div>
+              <div class="buttons wordsFilter">
+                <div class="button" filter="10">10</div>
+                <div class="button" filter="25">25</div>
+                <div class="button" filter="50">50</div>
+                <div class="button" filter="100">100</div>
+                <div class="button" filter="200">200</div>
+              </div>
+            </div>
+            <div class="buttonsAndTitle">
+              <div class="title">time</div>
+              <div class="buttons timeFilter">
+                <div class="button" filter="15">15</div>
+                <div class="button" filter="30">30</div>
+                <div class="button" filter="60">60</div>
+                <div class="button" filter="120">120</div>
+              </div>
+            </div>
+            <div class="buttonsAndTitle">
+              <div class="title">punctuation</div>
+              <div class="buttons punctuationFilter">
+                <div class="button" filter="puncOn">on</div>
+                <div class="button" filter="puncOff">off</div>
+              </div>
+            </div>
+            <div class="buttonsAndTitle">
+              <div class="title">language</div>
+              <div class="buttons languages">
+
+              </div>
+            </div>
+          </div>
+          <div class="group chart">
             <div class="title"></div>
             <div class="chart">
               <canvas id="resultHistoryChart"></canvas>
             </div>
           </div>
-          <div class="triplegroup">
+          <div class="triplegroup stats">
             <div class="group highestWpm">
               <div class="title">highest wpm</div>
-              <div class="val">1</div>
+              <div class="val">-</div>
               <div class="mode"></div>
             </div>
-            <div class="group testsTaken">
-              <div class="title">tests taken</div>
-              <div class="val">1</div>
-            </div>
-            <div class="group favouriteTest">
-              <div class="title">favourite test</div>
-              <div class="val">words 10</div>
-            </div>
             <div class="group averageWpm">
               <div class="title">average wpm</div>
-              <div class="val">1</div>
+              <div class="val">-</div>
             </div>
-            <div class="group testCompletion">
-              <div class="title">test completion</div>
+            <div class="group averageWpm10">
+              <div class="title">average wpm<br>(last 10 tests)</div>
+              <div class="val">-</div>
+            </div>
+            <div class="group testsStarted">
+              <div class="title">tests started</div>
+              <div class="val">-</div>
+            </div>
+            <div class="group testsCompleted">
+              <div class="title">tests completed</div>
               <div class="val">-</div>
             </div>
             <div class="group avgRestart">
-              <div class="title">avg restarts per completed test</div>
+              <div class="title">avg restarts<br>per completed test</div>
               <div class="val">-</div>
             </div>
+            <!-- <div class="group favouriteTest">
+              <div class="title">favourite test</div>
+              <div class="val">words 10</div>
+            </div> -->
+            
+            
+            
           </div>
           <div class="group history">
             <!-- <div class="title">result history</div> -->
@@ -320,6 +376,8 @@
                   <td>correct<br>chars</td>
                   <td>incorrect<br>chars</td>
                   <td>mode</td>
+                  <td>punctuation</td>
+                  <td>language</td>
                   <td>date</td>
                 </tr>
               </thead>
@@ -370,8 +428,9 @@
 <script src="js/db.js"></script>
 <script src="js/commandline.js"></script>
 <script src="js/settings.js"></script>
+<script src="js/account.js"></script>
 <script src="js/userconfig.js"></script>
 <script src="js/script.js"></script>
-<script src="js/account.js"></script>
+
 
 </html>
\ No newline at end of file
diff --git a/public/js/account.js b/public/js/account.js
index ce9c9ed33..cf69c0e84 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -127,11 +127,12 @@ firebase.auth().onAuthStateChanged(function(user) {
 });
 
 var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), {
+  animationSteps: 60,
   type: 'line',
   data: {
     datasets: [
       {
-        label: "words 10",
+        label: "wpm",
         fill: false,
         data: [],
         borderColor: '#f44336',
@@ -142,120 +143,57 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), {
         //   width: 1
         // }
       },
-      {
-        label: "words 25",
-        fill: false,
-        data: [],
-        borderColor: '#FF5722',
-        borderWidth: 2,
-        // trendlineLinear: {
-        //   style: "rgba(255,87,34,.25)",
-        //   lineStyle: "solid",
-        //   width: 1
-        // }
-      },
-      {
-        label: "words 50",
-        fill: false,
-        data: [],
-        borderColor: '#FF9800',
-        borderWidth: 2,
-        // trendlineLinear: {
-        //   style: "rgba(255,152,0,.25)",
-        //   lineStyle: "solid",
-        //   width: 1
-        // }
-      },
-      {
-        label: "words 100",
-        fill: false,
-        data: [],
-        borderColor: '#FFC107',
-        borderWidth: 2,
-        // trendlineLinear: {
-        //   style: "rgba(255,193,7,.25)",
-        //   lineStyle: "solid",
-        //   width: 1
-        // }
-      },
-      {
-        label: "words 200",
-        fill: false,
-        data: [],
-        borderColor: '#FFEB3B',
-        borderWidth: 2,
-        // trendlineLinear: {
-        //   style: "rgba(255,235,59,.25)",
-        //   lineStyle: "solid",
-        //   width: 1
-        // }
-      },
-      {
-        label: "time 15",
-        fill: false,
-        data: [],
-        borderColor: '#3F51B5',
-        borderWidth: 2,
-        // trendlineLinear: {
-        //   style: "rgba(63,81,181,.25)",
-        //   lineStyle: "solid",
-        //   width: 1
-        // }
-      },
-      {
-        label: "time 30",
-        fill: false,
-        data: [],
-        borderColor: '#2196F3',
-        borderWidth: 2,
-        // trendlineLinear: {
-        //   style: "rgba(33,150,243,.25)",
-        //   lineStyle: "solid",
-        //   width: 1
-        // }
-      },
-      {
-        label: "time 60",
-        fill: false,
-        data: [],
-        borderColor: '#03A9F4',
-        borderWidth: 2,
-        // trendlineLinear: {
-        //   style: "rgba(3,169,244,.25)",
-        //   lineStyle: "solid",
-        //   width: 1
-        // }
-      },
-      {
-        label: "time 120",
-        fill: false,
-        data: [],
-        borderColor: '#00BCD4',
-        borderWidth: 2,
-        // trendlineLinear: {
-        //   style: "rgba(0,188,212,.25)",
-        //   lineStyle: "solid",
-        //   width: 1
-        // }
-      },
-      {
-        label: "custom",
-        fill: false,
-        data: [],
-        borderColor: '#4CAF50',
-        borderWidth: 2,
-        // trendlineLinear: {
-        //   style: "rgba(76,175,80,.25)",
-        //   lineStyle: "solid",
-        //   width: 1
-        // }
-      }
     ],
   },
   options: {
     tooltips: {
+      // Disable the on-canvas tooltip
+      enabled: true,
       titleFontFamily: "Roboto Mono",
-      bodyFontFamily: "Roboto Mono"
+      bodyFontFamily: "Roboto Mono",
+      intersect: false,
+      custom: function(tooltip) {
+        if (!tooltip) return;
+        // disable displaying the color box;
+        tooltip.displayColors = false;
+      }, 
+      callbacks : { // HERE YOU CUSTOMIZE THE LABELS
+        title: function(){
+          return;
+        },
+        beforeLabel : function(tooltipItem, data) {
+          let resultData = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+          let label = `${data.datasets[tooltipItem.datasetIndex].label}: ${tooltipItem.yLabel}`
+          + '\n' +
+          `acc: ${resultData.acc}`
+          + '\n\n' +
+          `mode: ${resultData.mode} `;
+        
+          if(resultData.mode == "time"){
+            label += resultData.mode2;
+          }else if(resultData.mode == "words"){
+            label += resultData.mode2;
+          }
+
+          label += '\n' +
+          `punctuation: ${resultData.punctuation}`
+          + '\n' +
+          `language: ${resultData.language}`
+          + '\n\n' +
+          `date: ${moment(resultData.timestamp).format('DD MMM YYYY HH:mm')}`;
+        
+          return label;
+        },
+        label : function(tooltipItem, data) {
+            return;
+        },
+        afterLabel : function(tooltipItem, data) {
+          return;
+        },
+      }
+    },
+    animation: {
+      duration: 2500
     },
     legend: {
       display: true,
@@ -280,9 +218,6 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), {
           fontFamily: "Roboto Mono"
         },
         type: 'time',
-        time: {
-          tooltipFormat:'DD MMM YYYY HH:mm'
-        },
         bounds: 'ticks',
         distribution: 'series',
         display: false,
@@ -306,38 +241,144 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), {
   }
 });
 
+Object.keys(words).forEach(language => {
+  $(".pageAccount .content .filterButtons .buttons.languages")
+  .append(`<div class="button" filter="${language}">${language.replace('_',' ')}</div>`); 
+})
+
+let activeFilters = [];
+toggleFilterButton('all');
+
+function toggleFilterButton(filter){
+  const element = $(`.pageAccount .content .filterButtons .button[filter=${filter}]`);
+  if(element.hasClass('active')){
+    //disable that filter
+    
+    if(filter == 'all' || filter == 'none'){
+      return;
+    }else if(filter == "words"){
+      $.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
+        let f = $(obj).attr('filter')
+        disableFilterButton(f)
+      })
+    }else if(filter == "time"){
+      $.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
+        let f = $(obj).attr('filter')
+        disableFilterButton(f)
+      })
+    }
+    disableFilterButton(filter);
+    disableFilterButton('all'); 
+    
+  }else{
+    //enable that filter
+    disableFilterButton('none');
+    
+    if(filter == 'all'){
+      $.each($(`.pageAccount .content .filterButtons .button`),(index,obj)=>{
+        let f = $(obj).attr('filter');
+        if(f != 'none'){
+          enableFilterButton(f);
+        }
+      })
+    }else if(filter == 'none'){
+      disableFilterButton('all');
+      $.each($(`.pageAccount .content .filterButtons .button`),(index,obj)=>{
+        let f = $(obj).attr('filter');
+        if(f != 'none'){
+          disableFilterButton(f);
+        }
+      })
+    }else if(filter == "words"){
+      $.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
+        let f = $(obj).attr('filter');
+        enableFilterButton(f);
+      })
+    }else if(filter == "time"){
+      $.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
+        let f = $(obj).attr('filter');
+        enableFilterButton(f);
+      })
+    }else if(['10','25','50','100','200'].includes(filter)){
+      enableFilterButton('words');
+    }else if(['15','30','60','120'].includes(filter)){
+      enableFilterButton('time');
+    }
+
+    enableFilterButton(filter);
+  }
+  updateActiveFilters();
+}
+
+function disableFilterButton(filter){
+  const element = $(`.pageAccount .content .filterButtons .button[filter=${filter}]`);
+  element.removeClass('active');
+}
+
+function enableFilterButton(filter){
+  const element = $(`.pageAccount .content .filterButtons .button[filter=${filter}]`);
+  element.addClass('active');
+}
+
+function updateActiveFilters(){
+  activeFilters = [];
+  $.each($(".pageAccount .filterButtons .button"),(i,obj)=>{
+    if($(obj).hasClass('active')){
+      activeFilters.push($(obj).attr('filter'));
+    }
+  })
+  refreshAccountPage();
+}
+
 
 function refreshAccountPage() {
 
   function cont(){
     
-    let testModes = {
-      words10: [],
-      words25: [],
-      words50: [],
-      words100: [],
-      words200: [],
-      time15: [],
-      time30: [],
-      time60: [],
-      time120: [],
-      custom: []
-    }
+    let chartData = [];
     
     let topWpm = 0;
     let topMode = '';
     let testRestarts = 0;
     let totalWpm = 0;
+    let testCount = 0;
 
-    let testCount = dbSnapshot.length;
+    let wpmLast10total = 0;
+    let wpmLast10count = 0;
     $(".pageAccount .history table tbody").empty();
     dbSnapshot.forEach(result => {
+      
+      //apply filters
+      if(!activeFilters.includes(result.mode)){
+        return
+      }
+      if(!activeFilters.includes(String(result.mode2))){
+        return
+      }
+      if(!activeFilters.includes(result.language)){
+        return
+      }
+      let puncfilter = "puncOff";
+      if(result.punctuation){
+        puncfilter = "puncOn";
+      }
+      if(!activeFilters.includes(puncfilter)){
+        return
+      }
+
+      if(wpmLast10count < 10){
+        wpmLast10count++;
+        wpmLast10total += result.wpm;
+      }
+      testCount++;
+
+
       if (result.restartCount != undefined) {
         testRestarts += result.restartCount;
       }
       let withpunc = '';
       if (result.punctuation) {
-        withpunc = ', with punctuation';
+        withpunc = 'on';
       }
       $(".pageAccount .history table tbody").append(`
       <tr>
@@ -345,96 +386,87 @@ function refreshAccountPage() {
       <td>${result.acc}%</td>
       <td>${result.correctChars}</td>
       <td>${result.incorrectChars}</td>
-      <td>${result.mode} ${result.mode2}${withpunc}</td>
+      <td>${result.mode} ${result.mode2}</td>
+      <td>${withpunc}</td>
+      <td>${result.language.replace('_',' ')}</td>
       <td>${moment(result.timestamp).format('DD MMM YYYY HH:mm')}</td>
       </tr>`)
-      if (result.mode == "words" && result.mode2 == 10) {
-        testModes.words10.push({ x: result.timestamp, y: result.wpm });
-      }
-      if (result.mode == "words" && result.mode2 == 25) {
-        testModes.words25.push({ x: result.timestamp, y: result.wpm });
-      }
-      if (result.mode == "words" && result.mode2 == 50) {
-        testModes.words50.push({ x: result.timestamp, y: result.wpm });
-      }
-      if (result.mode == "words" && result.mode2 == 100) {
-        testModes.words100.push({ x: result.timestamp, y: result.wpm });
-      }
-      if (result.mode == "words" && result.mode2 == 200) {
-        testModes.words200.push({ x: result.timestamp, y: result.wpm });
-      }
-      if (result.mode == "time" && result.mode2 == 15) {
-        testModes.time15.push({ x: result.timestamp, y: result.wpm });
-      }
-      if (result.mode == "time" && result.mode2 == 30) {
-        testModes.time30.push({ x: result.timestamp, y: result.wpm });
-      }
-      if (result.mode == "time" && result.mode2 == 60) {
-        testModes.time60.push({ x: result.timestamp, y: result.wpm });
-      }
-      if (result.mode == "time" && result.mode2 == 120) {
-        testModes.time120.push({ x: result.timestamp, y: result.wpm });
-      }
-      if (result.mode == "custom") {
-        testModes.custom.push({ x: result.timestamp, y: result.wpm });
-      }
+      chartData.push({
+        x: result.timestamp,
+        y: result.wpm,
+        acc: result.acc,
+        mode: result.mode,
+        mode2: result.mode2,
+        punctuation: result.punctuation,
+        language: result.language,
+        timestamp: result.timestamp
+      });
 
       if (result.wpm > topWpm) {
-        let puncsctring = result.punctuation ? ",<br>with punctuation" : "";
         topWpm = result.wpm;
-        topMode = result.mode + " " + result.mode2 + puncsctring;
       }
 
       totalWpm += result.wpm;
     })
+    ////////
 
+    let totalWpm10 = 0;
+
+    let mainColor = getComputedStyle(document.body).getPropertyValue('--main-color').replace(' ', '');
     let subColor = getComputedStyle(document.body).getPropertyValue('--sub-color').replace(' ','');
   
     resultHistoryChart.options.scales.xAxes[0].ticks.minor.fontColor = subColor;
     resultHistoryChart.options.scales.yAxes[0].ticks.minor.fontColor = subColor;
+    resultHistoryChart.data.datasets[0].borderColor = mainColor;
     resultHistoryChart.options.legend.labels.fontColor = subColor;
 
-    resultHistoryChart.data.datasets[0].data = testModes.words10;
-    resultHistoryChart.data.datasets[1].data = testModes.words25;
-    resultHistoryChart.data.datasets[2].data = testModes.words50;
-    resultHistoryChart.data.datasets[3].data = testModes.words100;
-    resultHistoryChart.data.datasets[4].data = testModes.words200;
-    resultHistoryChart.data.datasets[5].data = testModes.time15;
-    resultHistoryChart.data.datasets[6].data = testModes.time30;
-    resultHistoryChart.data.datasets[7].data = testModes.time60;
-    resultHistoryChart.data.datasets[8].data = testModes.time120;
-    resultHistoryChart.data.datasets[9].data = testModes.custom;
+    resultHistoryChart.data.datasets[0].data = chartData;
 
     $(".pageAccount .highestWpm .val").text(topWpm);
     $(".pageAccount .averageWpm .val").text(Math.round(totalWpm/testCount));
-    $(".pageAccount .highestWpm .mode").html(topMode);
+    $(".pageAccount .averageWpm10 .val").text(Math.round(wpmLast10total/wpmLast10count));
+    // $(".pageAccount .highestWpm .mode").html(topMode);
     $(".pageAccount .testsTaken .val").text(testCount);
 
-    $(".pageAccount .testCompletion .val").text(
-      Math.floor((testCount / (testCount + testRestarts) * 100)) + "%"
+    $(".pageAccount .testsStarted .val").text(
+      `${testCount + testRestarts}`
+    );
+
+    $(".pageAccount .testsCompleted .val").text(
+      `${testCount}(${Math.floor((testCount / (testCount + testRestarts) * 100))}%)`
     );
 
     $(".pageAccount .avgRestart .val").text(
-      ((testCount + testRestarts) / testCount).toFixed(1)
+      ((testRestarts) / testCount).toFixed(1)
     );
 
-    let favMode = testModes.words10;
-    let favModeName = 'words10';
-    $.each(testModes, (key, mode) => {
-      if (mode.length > favMode.length) {
-        favMode = mode;
-        favModeName = key;
-      }
-    })
-    if (favModeName == 'words10' && testModes.words10.length == 0) {
-      //new user  
-      $(".pageAccount .favouriteTest .val").text(`-`);
-    } else {
-      $(".pageAccount .favouriteTest .val").text(`${favModeName} (${Math.floor((favMode.length/testCount) * 100)}%)`);
-    }
+    // if(testCount == 0){
+    //   $('.pageAccount .group.chart').fadeOut(125);
+    //   $('.pageAccount .triplegroup.stats').fadeOut(125);
+    //   $('.pageAccount .group.history').fadeOut(125);
+    // }else{
+    //   $('.pageAccount .group.chart').fadeIn(125);
+    //   $('.pageAccount .triplegroup.stats').fadeIn(125);
+    //   $('.pageAccount .group.history').fadeIn(125);
+    // }
+
+    // let favMode = testModes.words10;
+    // let favModeName = 'words10';
+    // $.each(testModes, (key, mode) => {
+    //   if (mode.length > favMode.length) {
+    //     favMode = mode;
+    //     favModeName = key;
+    //   }
+    // })
+    // if (favModeName == 'words10' && testModes.words10.length == 0) {
+    //   //new user  
+    //   $(".pageAccount .favouriteTest .val").text(`-`);
+    // } else {
+    //   $(".pageAccount .favouriteTest .val").text(`${favModeName} (${Math.floor((favMode.length/testCount) * 100)}%)`);
+    // }
 
     
-    resultHistoryChart.update({ duration: 0 });
+    resultHistoryChart.update();
     
     swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250);
   }
@@ -442,10 +474,17 @@ function refreshAccountPage() {
   if (dbSnapshot == null) {
     // console.log('no db snap');
     db_getUserResults().then(data => {
+      if(!data) return;
+      dbSnapshot = data;
       cont();
     })
   } else {
     // console.log('using db snap');
     cont();
   }
-}
\ No newline at end of file
+}
+
+$('.pageAccount .filterButtons').click('.button',e =>{
+  const filter = $(e.target).attr('filter');
+  toggleFilterButton(filter);
+})
\ No newline at end of file

From 5192dd6c2a31c5dcafdf67efb3d27a62cb72a18b Mon Sep 17 00:00:00 2001
From: unknown <bartnikjack@gmail.com>
Date: Wed, 20 May 2020 15:17:47 +0100
Subject: [PATCH 2/7] made the punctuation filters always show at least one

---
 public/js/account.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/js/account.js b/public/js/account.js
index cf69c0e84..e79630e1f 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -266,6 +266,10 @@ function toggleFilterButton(filter){
         let f = $(obj).attr('filter')
         disableFilterButton(f)
       })
+    }else if(filter == "puncOff"){
+      enableFilterButton("puncOn");
+    }else if(filter == "puncOn"){
+      enableFilterButton("puncOff");
     }
     disableFilterButton(filter);
     disableFilterButton('all'); 

From 7dc0bf37afe09ea620769a5d64c6c5a2ecc4be55 Mon Sep 17 00:00:00 2001
From: unknown <bartnikjack@gmail.com>
Date: Wed, 20 May 2020 22:40:28 +0100
Subject: [PATCH 3/7] swapped the colors around in the serika theme

---
 public/themes/serika.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/themes/serika.css b/public/themes/serika.css
index 3b2a97155..e074914d1 100644
--- a/public/themes/serika.css
+++ b/public/themes/serika.css
@@ -1,6 +1,6 @@
 :root {
-    --bg-color: #e2b714;
-    --main-color: #323437;
-    --caret-color: #323437;
-    --sub-color: #d1d0c5;
+    --main-color: #e2b714;
+    --caret-color: #e2b714;
+    --sub-color: #323437;
+    --bg-color: #e1e1e3;
 }
\ No newline at end of file

From 2e5d0d23b2c8a5b1acfbce27d040da6d99f81caa Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Wed, 20 May 2020 23:38:57 +0100
Subject: [PATCH 4/7] changed the chart update duration

---
 public/js/account.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/js/account.js b/public/js/account.js
index e79630e1f..329c72afa 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -193,7 +193,7 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), {
       }
     },
     animation: {
-      duration: 2500
+      duration: 250
     },
     legend: {
       display: true,

From c42c779f809efa00e4016a25d4c134aa879dc440 Mon Sep 17 00:00:00 2001
From: unknown <bartnikjack@gmail.com>
Date: Thu, 21 May 2020 16:22:03 +0100
Subject: [PATCH 5/7] selected filters are now saved to the cookie

---
 public/index.html       |  2 +-
 public/js/account.js    | 25 ++++++++++++++++++-------
 public/js/userconfig.js |  6 +++++-
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index 23ab1b23e..17d06a41d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -426,10 +426,10 @@
 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline@0.1.3/src/chartjs-plugin-trendline.min.js"></script>
 <script src="js/words.js"></script>
 <script src="js/db.js"></script>
+<script src="js/userconfig.js"></script>
 <script src="js/commandline.js"></script>
 <script src="js/settings.js"></script>
 <script src="js/account.js"></script>
-<script src="js/userconfig.js"></script>
 <script src="js/script.js"></script>
 
 
diff --git a/public/js/account.js b/public/js/account.js
index e79630e1f..54d4b0f06 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -246,8 +246,17 @@ Object.keys(words).forEach(language => {
   .append(`<div class="button" filter="${language}">${language.replace('_',' ')}</div>`); 
 })
 
-let activeFilters = [];
-toggleFilterButton('all');
+let activeFilters = ["all"];
+
+
+$(document).ready(e =>{
+  activeFilters = config.resultFilters;
+  console.log(activeFilters);
+  activeFilters.forEach(filter => {
+    enableFilterButton(filter);
+  })
+})
+
 
 function toggleFilterButton(filter){
   const element = $(`.pageAccount .content .filterButtons .button[filter=${filter}]`);
@@ -335,6 +344,13 @@ function updateActiveFilters(){
 }
 
 
+$('.pageAccount .filterButtons').click('.button',e =>{
+  const filter = $(e.target).attr('filter');
+  toggleFilterButton(filter);
+  config.resultFilters = activeFilters;
+  saveConfigToCookie();
+})
+
 function refreshAccountPage() {
 
   function cont(){
@@ -487,8 +503,3 @@ function refreshAccountPage() {
     cont();
   }
 }
-
-$('.pageAccount .filterButtons').click('.button',e =>{
-  const filter = $(e.target).attr('filter');
-  toggleFilterButton(filter);
-})
\ No newline at end of file
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index b6092d7d9..8ce475987 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -9,7 +9,8 @@ let config = {
     time: 30,
     mode: "words",
     language: "english",
-    fontSize: 1
+    fontSize: 1,
+    resultFilters: ["all"]
 }
 
 //cookies
@@ -33,6 +34,9 @@ function loadConfigFromCookie() {
         changeMode(newConfig.mode);
         changeLanguage(newConfig.language);
         changeFontSize(newConfig.fontSize);
+        if(newConfig.resultFilters == null || newConfig.resultFilters == undefined){
+            newConfig.resultFilters = ["all"];
+        }
         config = newConfig;
         restartTest();
     }

From 98596fbdf4b9f49a44fa342c39472260afa12bb9 Mon Sep 17 00:00:00 2001
From: unknown <bartnikjack@gmail.com>
Date: Fri, 22 May 2020 02:39:22 +0100
Subject: [PATCH 6/7] missing semicolons

---
 public/js/account.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/js/account.js b/public/js/account.js
index 687ea22f8..1dfad1194 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -370,20 +370,20 @@ function refreshAccountPage() {
       
       //apply filters
       if(!activeFilters.includes(result.mode)){
-        return
+        return;
       }
       if(!activeFilters.includes(String(result.mode2))){
-        return
+        return;
       }
       if(!activeFilters.includes(result.language)){
-        return
+        return;
       }
       let puncfilter = "puncOff";
       if(result.punctuation){
         puncfilter = "puncOn";
       }
       if(!activeFilters.includes(puncfilter)){
-        return
+        return;
       }
 
       if(wpmLast10count < 10){

From d02c2e77ff4d6c36518a507d7c7687f19949c60c Mon Sep 17 00:00:00 2001
From: unknown <bartnikjack@gmail.com>
Date: Sun, 24 May 2020 21:58:13 +0100
Subject: [PATCH 7/7] updated the filter buttons

---
 public/css/style.scss |  19 ++++++-
 public/index.html     |  55 ++++++++++---------
 public/js/account.js  | 122 +++++++++++++++++++++++++-----------------
 3 files changed, 122 insertions(+), 74 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index fcad69f07..efd781479 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -340,7 +340,7 @@ a:hover {
   display: grid;
   grid-auto-flow: column;
   gap: .5rem;
-  margin-bottom: -0.4rem;
+  margin-bottom: -0.4rem; 
   width: fit-content;
   width: -moz-fit-content;
   /*   transition: 0.25s; */
@@ -952,6 +952,20 @@ key {
       font-size: 3rem;
       line-height: 3rem;
     }
+    &.chart{
+      position: relative;
+      .chartPreloader{
+        position: absolute;
+        width: 100%;
+        background: rgba(0,0,0,0.5);
+        height: 100%;
+        display: grid;
+        align-items: center;
+        justify-content: center;
+        font-size: 5rem;
+        text-shadow: 0 0 3rem black;
+      }
+    }
   }
   table{
     border-spacing:0;
@@ -973,7 +987,10 @@ key {
   .group.filterButtons{
     gap: 1rem;
     display: grid;
+    grid-template-columns: 1fr 1fr;
     .buttonsAndTitle{
+      height: fit-content;
+      height: -moz-fit-content;
       display: grid;
       gap: .25rem;
       color: var(--sub-color);
diff --git a/public/index.html b/public/index.html
index 17d06a41d..20beb89dd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -278,7 +278,7 @@
         <div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
         <div class="content hidden">
           <div class="group filterButtons">
-            <div class="buttonsAndTitle">
+            <div class="buttonsAndTitle" style="grid-column:1/3;">
               <div class="title">filters</div>
               <div class="buttons globalFilters">
                 <div class="button" filter="all">all</div>
@@ -288,38 +288,40 @@
             <div class="buttonsAndTitle">
               <div class="title">mode</div>
               <div class="buttons modeFilters">
-                <div class="button" filter="words">words</div>
-                <div class="button" filter="time">time</div>
-                <div class="button" filter="custom">custom</div>
-              </div>
-            </div>
-            <div class="buttonsAndTitle">
-              <div class="title">words</div>
-              <div class="buttons wordsFilter">
-                <div class="button" filter="10">10</div>
-                <div class="button" filter="25">25</div>
-                <div class="button" filter="50">50</div>
-                <div class="button" filter="100">100</div>
-                <div class="button" filter="200">200</div>
-              </div>
-            </div>
-            <div class="buttonsAndTitle">
-              <div class="title">time</div>
-              <div class="buttons timeFilter">
-                <div class="button" filter="15">15</div>
-                <div class="button" filter="30">30</div>
-                <div class="button" filter="60">60</div>
-                <div class="button" filter="120">120</div>
+                <div class="button" filter="mode_words">words</div>
+                <div class="button" filter="mode_time">time</div>
+                <div class="button" filter="mode_custom">custom</div>
               </div>
             </div>
             <div class="buttonsAndTitle">
               <div class="title">punctuation</div>
               <div class="buttons punctuationFilter">
-                <div class="button" filter="puncOn">on</div>
-                <div class="button" filter="puncOff">off</div>
+                <div class="button" filter="punc_on">on</div>
+                <div class="button" filter="punc_off">off</div>
               </div>
             </div>
             <div class="buttonsAndTitle">
+              <div class="title">words</div>
+              <div class="buttons wordsFilter">
+                <div class="button" filter="words_10">10</div>
+                <div class="button" filter="words_25">25</div>
+                <div class="button" filter="words_50">50</div>
+                <div class="button" filter="words_100">100</div>
+                <div class="button" filter="words_200">200</div>
+                <div class="button" filter="words_custom">custom</div>
+              </div>
+            </div>
+            <div class="buttonsAndTitle">
+              <div class="title">time</div>
+              <div class="buttons timeFilter">
+                <div class="button" filter="time_15">15</div>
+                <div class="button" filter="time_30">30</div>
+                <div class="button" filter="time_60">60</div>
+                <div class="button" filter="time_120">120</div>
+                <div class="button" filter="time_custom">custom</div>
+              </div>
+            </div>
+            <div class="buttonsAndTitle" style="grid-column:1/3;">
               <div class="title">language</div>
               <div class="buttons languages">
 
@@ -327,6 +329,9 @@
             </div>
           </div>
           <div class="group chart">
+            <!-- <div class="chartPreloader">
+              <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+            </div> -->
             <div class="title"></div>
             <div class="chart">
               <canvas id="resultHistoryChart"></canvas>
diff --git a/public/js/account.js b/public/js/account.js
index 1dfad1194..7d671710a 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -252,9 +252,13 @@ let activeFilters = ["all"];
 $(document).ready(e =>{
   activeFilters = config.resultFilters;
   console.log(activeFilters);
-  activeFilters.forEach(filter => {
-    enableFilterButton(filter);
-  })
+  if(activeFilters.includes("all")){
+    toggleFilterButton("all")
+  }else{
+    activeFilters.forEach(filter => {
+      toggleFilterButton(filter);
+    })
+  }
 })
 
 
@@ -265,20 +269,20 @@ function toggleFilterButton(filter){
     
     if(filter == 'all' || filter == 'none'){
       return;
-    }else if(filter == "words"){
-      $.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
-        let f = $(obj).attr('filter')
-        disableFilterButton(f)
-      })
-    }else if(filter == "time"){
-      $.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
-        let f = $(obj).attr('filter')
-        disableFilterButton(f)
-      })
-    }else if(filter == "puncOff"){
-      enableFilterButton("puncOn");
-    }else if(filter == "puncOn"){
-      enableFilterButton("puncOff");
+    }else if(filter == "mode_words"){
+      // $.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
+      //   let f = $(obj).attr('filter')
+      //   disableFilterButton(f)
+      // })
+    }else if(filter == "mode_time"){
+      // $.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
+      //   let f = $(obj).attr('filter')
+      //   disableFilterButton(f)
+      // })
+    }else if(filter == "punc_off"){
+      enableFilterButton("punc_on");
+    }else if(filter == "punc_on"){
+      enableFilterButton("punc_off");
     }
     disableFilterButton(filter);
     disableFilterButton('all'); 
@@ -302,21 +306,22 @@ function toggleFilterButton(filter){
           disableFilterButton(f);
         }
       })
-    }else if(filter == "words"){
-      $.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
-        let f = $(obj).attr('filter');
-        enableFilterButton(f);
-      })
-    }else if(filter == "time"){
-      $.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
-        let f = $(obj).attr('filter');
-        enableFilterButton(f);
-      })
-    }else if(['10','25','50','100','200'].includes(filter)){
-      enableFilterButton('words');
-    }else if(['15','30','60','120'].includes(filter)){
-      enableFilterButton('time');
     }
+    // else if(filter == "mode_words"){
+    //   $.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
+    //     let f = $(obj).attr('filter');
+    //     enableFilterButton(f);
+    //   })
+    // }else if(filter == "mode_time"){
+    //   $.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
+    //     let f = $(obj).attr('filter');
+    //     enableFilterButton(f);
+    //   })
+    // }else if(['10','25','50','100','200'].includes(filter)){
+    //   enableFilterButton('words');
+    // }else if(['15','30','60','120'].includes(filter)){
+    //   enableFilterButton('time');
+    // }
 
     enableFilterButton(filter);
   }
@@ -344,6 +349,19 @@ function updateActiveFilters(){
 }
 
 
+function showChartPreloader(){
+  $(".pageAccount .group.chart .preloader").stop(true,true).animate({
+    opacity: 1
+  },125);
+}
+
+function hideChartPreloader(){
+  $(".pageAccount .group.chart .preloader").stop(true,true).animate({
+    opacity: 0
+  },125);
+}
+
+
 $('.pageAccount .filterButtons').click('.button',e =>{
   const filter = $(e.target).attr('filter');
   toggleFilterButton(filter);
@@ -367,24 +385,30 @@ function refreshAccountPage() {
     let wpmLast10count = 0;
     $(".pageAccount .history table tbody").empty();
     dbSnapshot.forEach(result => {
-      
+      // console.log(result);
       //apply filters
-      if(!activeFilters.includes(result.mode)){
-        return;
+      if(!activeFilters.includes("mode_"+result.mode)) return;
+      if(result.mode == "time"){
+        let timefilter = "time_custom";
+        if([15,30,60,120].includes(parseInt(result.mode2))){
+          timefilter = "time_"+result.mode2;
+        }
+        if(!activeFilters.includes(timefilter)) return;
+      }else if(result.mode == "words"){
+        let wordfilter = "words_custom";
+        if([10,25,50,100,200].includes(parseInt(result.mode2))){
+          wordfilter = "words_"+result.mode2;
+        }
+        if(!activeFilters.includes(wordfilter)) return;
       }
-      if(!activeFilters.includes(String(result.mode2))){
-        return;
-      }
-      if(!activeFilters.includes(result.language)){
-        return;
-      }
-      let puncfilter = "puncOff";
+
+      if(!activeFilters.includes(result.language)) return;
+
+      let puncfilter = "punc_off";
       if(result.punctuation){
-        puncfilter = "puncOn";
-      }
-      if(!activeFilters.includes(puncfilter)){
-        return;
+        puncfilter = "punc_on";
       }
+      if(!activeFilters.includes(puncfilter)) return;
 
       if(wpmLast10count < 10){
         wpmLast10count++;
@@ -408,7 +432,7 @@ function refreshAccountPage() {
       <td>${result.incorrectChars}</td>
       <td>${result.mode} ${result.mode2}</td>
       <td>${withpunc}</td>
-      <td>${result.language.replace('_',' ')}</td>
+      <td>${result.language.replace('_','<br>')}</td>
       <td>${moment(result.timestamp).format('DD MMM YYYY HH:mm')}</td>
       </tr>`)
       chartData.push({
@@ -423,7 +447,9 @@ function refreshAccountPage() {
       });
 
       if (result.wpm > topWpm) {
+        let puncsctring = result.punctuation ? ",<br>with punctuation" : "";
         topWpm = result.wpm;
+        topMode = result.mode + " " + result.mode2 + puncsctring;
       }
 
       totalWpm += result.wpm;
@@ -445,7 +471,7 @@ function refreshAccountPage() {
     $(".pageAccount .highestWpm .val").text(topWpm);
     $(".pageAccount .averageWpm .val").text(Math.round(totalWpm/testCount));
     $(".pageAccount .averageWpm10 .val").text(Math.round(wpmLast10total/wpmLast10count));
-    // $(".pageAccount .highestWpm .mode").html(topMode);
+    $(".pageAccount .highestWpm .mode").html(topMode);
     $(".pageAccount .testsTaken .val").text(testCount);
 
     $(".pageAccount .testsStarted .val").text(
@@ -486,7 +512,7 @@ function refreshAccountPage() {
     // }
 
     
-    resultHistoryChart.update();
+    resultHistoryChart.update({duration: 0});
     
     swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250);
   }