From 3c0947d0d94605683e90b204da1199e5256994b7 Mon Sep 17 00:00:00 2001
From: lukew3 <lukew25073@gmail.com>
Date: Thu, 13 May 2021 20:23:48 -0400
Subject: [PATCH 1/2] Added replay stopwatch

---
 src/js/replay.js    | 16 ++++++++++++++++
 src/sass/style.scss |  5 +++++
 static/index.html   |  1 +
 3 files changed, 22 insertions(+)

diff --git a/src/js/replay.js b/src/js/replay.js
index effab8db2..b04a1cd98 100644
--- a/src/js/replay.js
+++ b/src/js/replay.js
@@ -18,6 +18,7 @@ let curPos = 0;
 let targetWordPos = 0;
 let targetCurPos = 0;
 let timeoutList = [];
+let stopwatchList = [];
 const toggleButton = document.getElementById("playpauseReplayButton")
   .children[0];
 
@@ -58,6 +59,10 @@ export function pauseReplay() {
     clearTimeout(item);
   });
   timeoutList = [];
+  stopwatchList.forEach((item) => {
+    clearTimeout(item);
+  });
+  stopwatchList = [];
   targetCurPos = curPos;
   targetWordPos = wordPos;
   toggleButton.className = "fas fa-play";
@@ -196,6 +201,17 @@ function playReplay() {
   initializeReplayPrompt();
   let startingIndex = loadOldReplay();
   let lastTime = replayData[startingIndex].time;
+  let swTime = Math.round(lastTime / 1000); //starting time
+  const swEndTime = Math.round(replayData[replayData.length - 1].time / 1000);
+  while (swTime <= swEndTime) {
+    const time = swTime;
+    stopwatchList.push(
+      setTimeout(() => {
+        $("#replayStopwatch").text(time);
+      }, time * 1000 - lastTime)
+    );
+    swTime++;
+  }
   replayData.forEach((item, i) => {
     if (i < startingIndex) return;
     timeoutList.push(
diff --git a/src/sass/style.scss b/src/sass/style.scss
index 0a65a9e74..93a5f8516 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -2301,6 +2301,11 @@ key {
   cursor: pointer;
 }
 
+#replayStopwatch {
+  color: var(--main-color);
+  display: inline-block;
+}
+
 #restartTestButton {
   margin: 0 auto;
   margin-top: 1rem;
diff --git a/static/index.html b/static/index.html
index 10018c57d..887c1f0da 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1448,6 +1448,7 @@
                   >
                     <i class="fas fa-play"></i>
                   </span>
+                  <p id="replayStopwatch">0</p>
                 </div>
                 <div id="wordsWrapper">
                   <div id="replayWords" class="words"></div>

From 1e85dd887836b06cb0ec1bfa9ec708b87b839222 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Fri, 14 May 2021 14:42:38 +0100
Subject: [PATCH 2/2] added 's' to the timer string

---
 src/js/replay.js  | 2 +-
 static/index.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/replay.js b/src/js/replay.js
index b04a1cd98..cc7de1b47 100644
--- a/src/js/replay.js
+++ b/src/js/replay.js
@@ -207,7 +207,7 @@ function playReplay() {
     const time = swTime;
     stopwatchList.push(
       setTimeout(() => {
-        $("#replayStopwatch").text(time);
+        $("#replayStopwatch").text(time + "s");
       }, time * 1000 - lastTime)
     );
     swTime++;
diff --git a/static/index.html b/static/index.html
index 887c1f0da..098d49761 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1448,7 +1448,7 @@
                   >
                     <i class="fas fa-play"></i>
                   </span>
-                  <p id="replayStopwatch">0</p>
+                  <p id="replayStopwatch">0s</p>
                 </div>
                 <div id="wordsWrapper">
                   <div id="replayWords" class="words"></div>