diff --git a/src/js/replay.js b/src/js/replay.js index 5d7a84533..2546835d0 100644 --- a/src/js/replay.js +++ b/src/js/replay.js @@ -29,7 +29,7 @@ function initializeReplayPrompt() { const replayWordsElement = document.getElementById("replayWords"); replayWordsElement.innerHTML = ""; let wordCount = 0; - replayData.forEach((item, i) => { + replayData.forEach((item) => { //trim wordsList for timed tests if (item.action === "backWord") { wordCount--; @@ -53,36 +53,8 @@ function initializeReplayPrompt() { }); } -function startReplayRecording() { - if (!$("#resultReplay").stop(true, true).hasClass("hidden")) { - //hide replay display if user left it open - toggleReplayDisplay(); - } - replayData = []; - replayStartTime = performance.now(); - replayRecording = true; - targetCurPos = 0; - targetWordPos = 0; -} - -function stopReplayRecording() { - replayRecording = false; -} - -function addReplayEvent(action, letter = undefined) { - if (replayRecording === false) { - return; - } - let timeDelta = performance.now() - replayStartTime; - if (action === "incorrectLetter" || action === "correctLetter") { - replayData.push({ action: action, letter: letter, time: timeDelta }); - } else { - replayData.push({ action: action, time: timeDelta }); - } -} - function pauseReplay() { - timeoutList.forEach((item, i) => { + timeoutList.forEach((item) => { clearTimeout(item); }); timeoutList = []; @@ -92,50 +64,6 @@ function pauseReplay() { toggleButton.parentNode.setAttribute("aria-label", "Resume replay"); } -function loadOldReplay() { - let startingIndex = 0; - curPos = 0; - wordPos = 0; - replayData.forEach((item, i) => { - if ( - wordPos < targetWordPos || - (wordPos === targetWordPos && curPos < targetCurPos) - ) { - //quickly display everything up to the target - handleDisplayLogic(item); - startingIndex = i + 1; - } - }); - return startingIndex; -} - -function playReplay() { - curPos = 0; - wordPos = 0; - toggleButton.className = "fas fa-pause"; - toggleButton.parentNode.setAttribute("aria-label", "Pause replay"); - initializeReplayPrompt(); - let startingIndex = loadOldReplay(); - let lastTime = replayData[startingIndex].time; - replayData.forEach((item, i) => { - if (i < startingIndex) return; - timeoutList.push( - setTimeout(() => { - handleDisplayLogic(item); - }, item.time - lastTime) - ); - }); - timeoutList.push( - setTimeout(() => { - //after the replay has finished, this will run - targetCurPos = 0; - targetWordPos = 0; - toggleButton.className = "fas fa-play"; - toggleButton.parentNode.setAttribute("aria-label", "Start replay"); - }, replayData[replayData.length - 1].time - lastTime) - ); -} - function handleDisplayLogic(item) { let activeWord = document.getElementById("replayWords").children[wordPos]; if (item.action === "correctLetter") { @@ -171,7 +99,7 @@ function handleDisplayLogic(item) { } else if (item.action === "clearWord") { let promptWord = document.createElement("div"); let wordArr = wordsList[wordPos].split(""); - wordArr.forEach((letter, i) => { + wordArr.forEach((letter) => { promptWord.innerHTML += `${letter}`; }); activeWord.innerHTML = promptWord.innerHTML; @@ -185,6 +113,23 @@ function handleDisplayLogic(item) { } } +function loadOldReplay() { + let startingIndex = 0; + curPos = 0; + wordPos = 0; + replayData.forEach((item, i) => { + if ( + wordPos < targetWordPos || + (wordPos === targetWordPos && curPos < targetCurPos) + ) { + //quickly display everything up to the target + handleDisplayLogic(item); + startingIndex = i + 1; + } + }); + return startingIndex; +} + function toggleReplayDisplay() { if ($("#resultReplay").stop(true, true).hasClass("hidden")) { initializeReplayPrompt(); @@ -215,6 +160,61 @@ function toggleReplayDisplay() { } } +function startReplayRecording() { + if (!$("#resultReplay").stop(true, true).hasClass("hidden")) { + //hide replay display if user left it open + toggleReplayDisplay(); + } + replayData = []; + replayStartTime = performance.now(); + replayRecording = true; + targetCurPos = 0; + targetWordPos = 0; +} + +function stopReplayRecording() { + replayRecording = false; +} + +function addReplayEvent(action, letter = undefined) { + if (replayRecording === false) { + return; + } + let timeDelta = performance.now() - replayStartTime; + if (action === "incorrectLetter" || action === "correctLetter") { + replayData.push({ action: action, letter: letter, time: timeDelta }); + } else { + replayData.push({ action: action, time: timeDelta }); + } +} + +function playReplay() { + curPos = 0; + wordPos = 0; + toggleButton.className = "fas fa-pause"; + toggleButton.parentNode.setAttribute("aria-label", "Pause replay"); + initializeReplayPrompt(); + let startingIndex = loadOldReplay(); + let lastTime = replayData[startingIndex].time; + replayData.forEach((item, i) => { + if (i < startingIndex) return; + timeoutList.push( + setTimeout(() => { + handleDisplayLogic(item); + }, item.time - lastTime) + ); + }); + timeoutList.push( + setTimeout(() => { + //after the replay has finished, this will run + targetCurPos = 0; + targetWordPos = 0; + toggleButton.className = "fas fa-play"; + toggleButton.parentNode.setAttribute("aria-label", "Start replay"); + }, replayData[replayData.length - 1].time - lastTime) + ); +} + $(".pageTest #playpauseReplayButton").click(async (event) => { if (toggleButton.className === "fas fa-play") { playReplay();