diff --git a/src/js/replay.js b/src/js/replay.js index effab8db2..cc7de1b47 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 + "s"); + }, 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..098d49761 100644 --- a/static/index.html +++ b/static/index.html @@ -1448,6 +1448,7 @@ > +

0s