added input history display to the results page

public/css/style.scss

@@ -617,7 +617,6 @@ key {
   .loginTip{
     grid-column: 1/3;
     text-align: center;
-    margin-top: 1rem;
     color: var(--sub-color);
   }
   .stats{
@@ -710,6 +709,13 @@ key {
   display: block;
 }
 
+#wordsTitle{
+  color: var(--sub-color);
+  margin-left: .25rem;
+  margin-top: 1rem;
+  display: none;
+}
+
 #words {
   height: fit-content;
   display: flex;
@@ -719,7 +725,7 @@ key {
   user-select: none;
 }
 
-#restartTestButton {
+#restartTestButton, #showWordHistoryButton {
   position: relative;
   opacity: 0;
   border-radius: var(--roundness);
@@ -728,7 +734,7 @@ key {
   width: -moz-min-content;
   color: var(--sub-color);
   transition: 0.25s;
-  margin: 1rem auto 0 auto;
+  margin-top: 1rem;
   cursor: pointer;
   &:hover,
   &:focus {
@@ -740,6 +746,10 @@ key {
   }
 }
 
+#showWordHistoryButton{
+  opacity: 1;
+}
+
 .word {
   margin: .25rem;
   color: var(--sub-color);
@@ -807,6 +817,15 @@ key {
   opacity: 0.5;
 }
 
+.pageTest{
+  .buttons{
+    display: grid;
+    grid-auto-flow: column;
+    gap: 1rem;
+    justify-content: center;
+  }
+}
+
 .pageLogin{
   display: flex;
   grid-auto-flow: column;

public/index.html

@@ -159,8 +159,6 @@
 
       <div class="page pageTest active">
         <div id="caret" class="hidden"></div>
-        <input id="wordsInput" class="" tabindex="0"></input>
-        <div id="words" class=""></div>
         <div id="result" class="hidden">
           <div class="stats">
             <!-- <div class="info">words 10<br>punctuation</div> -->
@@ -197,8 +195,14 @@
           <div class="loginTip">Sign in to save your results</div>
 
         </div>
+        <input id="wordsInput" class="" tabindex="0"></input>
+        <div id="wordsTitle">input history</div>
+        <div id="words" class=""></div>
         <div id="liveWpm">123</div>
-        <div id="restartTestButton" class="" tabindex="0"><i class="fas fa-redo-alt"></i></div>
+        <div class="buttons">
+          <div id="restartTestButton" class="" tabindex="0" onclick="this.blur();"><i class="fas fa-redo-alt"></i></div>
+          <div id="showWordHistoryButton" class="hidden" tabindex="0" onclick="this.blur();"><i class="fas fa-bars"></i></div>
+        </div>
       </div>
       <div class="page pageAbout hidden">
         <div class="section">

public/js/script.js

@@ -16,6 +16,7 @@ let currentKeypressCount = 0;
 let afkDetected = false;
 let errorsPerSecond = [];
 let currentErrorCount = 0;
+let resultVisible = false;
 
 let accuracyStats = {
   correct: 0,
@@ -478,6 +479,12 @@ function showResult() {
   $("#result .stats .key .bottom").text(stats.correctChars + "/" + stats.incorrectChars);
   $("#result .stats .time .bottom").text(roundedToFixed(stats.time,1)+'s');
 
+  setTimeout(function() {
+    $("#showWordHistoryButton").removeClass('hidden').css('opacity',1);
+  }, 125);
+  
+
+
   let mode2 = "";
   if (config.mode == "time") {
     mode2 = config.time;
@@ -598,13 +605,25 @@ function showResult() {
 
 
   wpmOverTimeChart.update({ duration: 0 });
-  swapElements($("#words"),$("#result"),250);
+  swapElements($("#words"),$("#result"),250, () => {
+    resultVisible=true;
+    let remove = false;
+    $.each($('#words .word'),(i,obj)=>{
+      if(remove){
+        $(obj).remove();
+      }else{
+        $(obj).removeClass('hidden');
+        if($(obj).hasClass('active')) remove = true;
+      }
+    });
+  });
 }
 
 function restartTest() {
   clearIntervals();
   time = 0;
   afkDetected = false;
+  resultHistoryChart = false;
   wpmHistory = [];
   setFocus(false);
   hideCaret();
@@ -616,14 +635,30 @@ function restartTest() {
   currentErrorCount = 0;
   currentTestLine = 0;
   let el = null;
-  if($("#words").hasClass('hidden')){
+  if(resultVisible){
     //results are being displayed
     el = $("#result");
-  }else if($("#result").hasClass('hidden')){
+  }else{
     //words are being displayed
     el = $("#words");
   }
 
+  if(resultVisible){
+    $("#words").stop(true, true).animate({
+      opacity: 0
+    }, 125);
+    $("#wordsTitle").stop(true,true).animate({
+      opacity: 0
+    }, 125, ()=>{
+      $("#wordsTitle").slideUp(0);
+    });
+    $("#showWordHistoryButton").stop(true,true).animate({
+      opacity: 0
+    }, 125, ()=>{
+      $("#showWordHistoryButton").addClass('hidden');
+    });
+  }
+
   el.stop(true, true).animate({
     opacity: 0
   }, 125, () => {
@@ -891,6 +926,43 @@ function updateAccountLoginButton() {
   }
 }
 
+function toggleResultWordsDisplay(){
+  if(resultVisible){
+    if($("#words").hasClass('hidden')){
+      //show 
+      $("#wordsTitle").css('opacity',1).removeClass('hidden').slideDown(250);
+
+
+      let newHeight = $("#words").removeClass('hidden').css('height','auto').outerHeight();
+
+      $("#words").css({
+        height: 0,
+        opacity: 0
+      }).animate({
+        height: newHeight,
+        opacity: 1
+      }, 250);
+    }else{
+      //hide
+
+      $("#wordsTitle").slideUp(250);
+
+      let oldHeight = $("#words").outerHeight();
+      $("#words").removeClass('hidden');
+      $("#words").css({
+        opacity: 1,
+        height: oldHeight
+      }).animate({
+        height: 0,
+        opacity: 0
+      }, 250, ()=>{
+        $("#words").addClass('hidden');
+      });
+    }
+  }
+}
+
+
 $(document).on("click", "#top .logo", (e) => {
   changePage('test');
 });
@@ -980,6 +1052,19 @@ $(document.body).on("click", "#restartTestButton", (event) => {
   restartTest();
 });
 
+$(document).on("keypress", "#showWordHistoryButton", (event) => {
+  if (event.keyCode == 32 || event.keyCode == 13) {
+    if (testActive) {
+      restartCount++;
+    }
+    toggleResultWordsDisplay();
+  }
+});
+
+$(document.body).on("click", "#showWordHistoryButton", (event) => {
+  toggleResultWordsDisplay();
+});
+
 $(document.body).on("click", ".version", (event) => {
   $("#versionHistoryWrapper").css('opacity', 0).removeClass('hidden').animate({ opacity: 1 }, 125);
 });
@@ -1057,7 +1142,7 @@ $(document).keypress(function(event) {
           clearIntervals();
           hideCaret();
           testActive = false;
-          showResult(false);
+          showResult();
         }
       }
     }, 1000));