mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-14 17:46:00 +08:00
Merge pull request #1410 from lukew3/master
hide replay on screenshot, gave better name to screenshot button
This commit is contained in:
Jack
GitHub
commit
2c6c4548a8
4 changed files with 101 additions and 109 deletions
152
src/js/replay.js
152
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) => {
|
||||
export function pauseReplay() {
|
||||
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>${letter}</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();
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import * as Commandline from "./commandline";
|
|||
import * as OutOfFocus from "./out-of-focus";
|
||||
import * as ManualRestart from "./manual-restart-tracker";
|
||||
import * as PractiseMissed from "./practise-missed";
|
||||
import * as Replay from "./replay";
|
||||
|
||||
export let currentWordElementIndex = 0;
|
||||
export let resultVisible = false;
|
||||
|
|
@ -183,7 +184,23 @@ export function colorful(tc) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
export function screenshot() {
|
||||
function revertScreenshot() {
|
||||
$("#notificationCenter").removeClass("hidden");
|
||||
$("#commandLineMobileButton").removeClass("hidden");
|
||||
$(".pageTest .ssWatermark").addClass("hidden");
|
||||
$(".pageTest .buttons").removeClass("hidden");
|
||||
if (revealReplay) $("#resultReplay").removeClass("hidden");
|
||||
if (firebase.auth().currentUser == null)
|
||||
$(".pageTest .loginTip").removeClass("hidden");
|
||||
}
|
||||
let revealReplay = false;
|
||||
if (!$("#resultReplay").hasClass('hidden')) {
|
||||
revealReplay = true;
|
||||
Replay.pauseReplay()
|
||||
}
|
||||
$("#resultReplay").addClass("hidden");
|
||||
$(".pageTest .ssWatermark").removeClass("hidden");
|
||||
$(".pageTest .buttons").addClass("hidden");
|
||||
let src = $("#middle");
|
||||
|
|
@ -206,12 +223,7 @@ export function screenshot() {
|
|||
try {
|
||||
if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
|
||||
open(URL.createObjectURL(blob));
|
||||
$("#notificationCenter").removeClass("hidden");
|
||||
$("#commandLineMobileButton").removeClass("hidden");
|
||||
$(".pageTest .ssWatermark").addClass("hidden");
|
||||
$(".pageTest .buttons").removeClass("hidden");
|
||||
if (firebase.auth().currentUser == null)
|
||||
$(".pageTest .loginTip").removeClass("hidden");
|
||||
revertScreenshot();
|
||||
} else {
|
||||
navigator.clipboard
|
||||
.write([
|
||||
|
|
@ -223,45 +235,25 @@ export function screenshot() {
|
|||
),
|
||||
])
|
||||
.then(() => {
|
||||
$("#notificationCenter").removeClass("hidden");
|
||||
$("#commandLineMobileButton").removeClass("hidden");
|
||||
Notifications.add("Copied to clipboard", 1, 2);
|
||||
$(".pageTest .ssWatermark").addClass("hidden");
|
||||
$(".pageTest .buttons").removeClass("hidden");
|
||||
if (firebase.auth().currentUser == null)
|
||||
$(".pageTest .loginTip").removeClass("hidden");
|
||||
revertScreenshot();
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
$("#notificationCenter").removeClass("hidden");
|
||||
$("#commandLineMobileButton").removeClass("hidden");
|
||||
Notifications.add(
|
||||
"Error saving image to clipboard: " + e.message,
|
||||
-1
|
||||
);
|
||||
$(".pageTest .ssWatermark").addClass("hidden");
|
||||
$(".pageTest .buttons").removeClass("hidden");
|
||||
if (firebase.auth().currentUser == null)
|
||||
$(".pageTest .loginTip").removeClass("hidden");
|
||||
revertScreenshot();
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
$("#notificationCenter").removeClass("hidden");
|
||||
$("#commandLineMobileButton").removeClass("hidden");
|
||||
Notifications.add("Error creating image: " + e.message, -1);
|
||||
$(".pageTest .ssWatermark").addClass("hidden");
|
||||
$(".pageTest .buttons").removeClass("hidden");
|
||||
if (firebase.auth().currentUser == null)
|
||||
$(".pageTest .loginTip").removeClass("hidden");
|
||||
revertScreenshot();
|
||||
}
|
||||
setTimeout(() => {
|
||||
$("#notificationCenter").removeClass("hidden");
|
||||
$("#commandLineMobileButton").removeClass("hidden");
|
||||
$(".pageTest .ssWatermark").addClass("hidden");
|
||||
$(".pageTest .buttons").removeClass("hidden");
|
||||
if (firebase.auth().currentUser == null)
|
||||
$(".pageTest .loginTip").removeClass("hidden");
|
||||
revertScreenshot();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
|
|
@ -781,7 +773,7 @@ export function highlightBadWord(index, showError) {
|
|||
$($("#words .word")[index]).addClass("error");
|
||||
}
|
||||
|
||||
$(document.body).on("click", "#copyResultToClipboardButton", () => {
|
||||
$(document.body).on("click", "#saveScreenshotButton", () => {
|
||||
screenshot();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2272,7 +2272,7 @@ key {
|
|||
|
||||
#restartTestButton,
|
||||
#showWordHistoryButton,
|
||||
#copyResultToClipboardButton,
|
||||
#saveScreenshotButton,
|
||||
#restartTestButtonWithSameWordset,
|
||||
#nextTestButton,
|
||||
#practiseMissedWordsButton,
|
||||
|
|
|
|||
|
|
@ -1505,7 +1505,7 @@
|
|||
<i class="fas fa-fw fa-backward"></i>
|
||||
</div>
|
||||
<div
|
||||
id="copyResultToClipboardButton"
|
||||
id="saveScreenshotButton"
|
||||
aria-label="Save screenshot"
|
||||
data-balloon-pos="down"
|
||||
tabindex="0"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue