monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-20 15:26:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

moved timer progress into a module #495

Browse source
This commit is contained in:
Miodec 2021-03-18 03:23:47 +00:00
parent 9b68c32f40
commit 6fb0991ecf
5 changed files with 209 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
gulpfile.js
View file

@ -117,6 +117,7 @@ const refactoredSrc = [
"./src/js/test/caps-warning.js",
"./src/js/test/live-acc.js",
"./src/js/test/test-leaderboards.js",
"./src/js/test/timer-progress.js",
];
//legacy files

1
src/js/global-dependencies.js
View file

@ -46,3 +46,4 @@ import * as LiveWpm from "./live-wpm";
import * as CapsWarning from "./caps-warning";
import * as LiveAcc from "./live-acc";
import * as TestLeaderboards from "./test-leaderboards";
import * as TimerProgress from "./timer-progress";

201
src/js/script.js
View file

@ -907,193 +907,6 @@ function highlightBadWord(index, showError) {
$($("#words .word")[index]).addClass("error");
}
function showTimer() {
let op = Config.showTimerProgress ? Config.timerOpacity : 0;
if (Config.mode != "zen" && Config.timerStyle === "bar") {
$("#timerWrapper").stop(true, true).removeClass("hidden").animate(
{
opacity: op,
},
125
);
} else if (Config.timerStyle === "text") {
$("#timerNumber")
.stop(true, true)
.removeClass("hidden")
.css("opacity", 0)
.animate(
{
opacity: op,
},
125
);
} else if (Config.mode == "zen" || Config.timerStyle === "mini") {
if (op > 0) {
$("#miniTimerAndLiveWpm .time")
.stop(true, true)
.removeClass("hidden")
.animate(
{
opacity: op,
},
125
);
}
}
}
function hideTimer() {
$("#timerWrapper").stop(true, true).animate(
{
opacity: 0,
},
125
);
$("#miniTimerAndLiveWpm .time")
.stop(true, true)
.animate(
{
opacity: 0,
},
125,
() => {
$("#miniTimerAndLiveWpm .time").addClass("hidden");
}
);
$("#timerNumber").stop(true, true).animate(
{
opacity: 0,
},
125
);
}
function restartTimer() {
if (Config.timerStyle === "bar") {
if (Config.mode === "time") {
$("#timer").stop(true, true).animate(
{
width: "100vw",
},
0
);
} else if (Config.mode === "words" || Config.mode === "custom") {
$("#timer").stop(true, true).animate(
{
width: "0vw",
},
0
);
}
}
}
function updateTimer() {
if (!Config.showTimerProgress) return;
if (
Config.mode === "time" ||
(Config.mode === "custom" && CustomText.isTimeRandom)
) {
let maxtime = Config.time;
if (Config.mode === "custom" && CustomText.isTimeRandom) {
maxtime = CustomText.time;
}
if (Config.timerStyle === "bar") {
let percent = 100 - ((time + 1) / maxtime) * 100;
$("#timer")
.stop(true, true)
.animate(
{
width: percent + "vw",
},
1000,
"linear"
);
} else if (Config.timerStyle === "text") {
let displayTime = Misc.secondsToString(maxtime - time);
if (maxtime === 0) {
displayTime = Misc.secondsToString(time);
}
$("#timerNumber").html("<div>" + displayTime + "</div>");
} else if (Config.timerStyle === "mini") {
let displayTime = Misc.secondsToString(maxtime - time);
if (maxtime === 0) {
displayTime = Misc.secondsToString(time);
}
$("#miniTimerAndLiveWpm .time").html(displayTime);
}
} else if (
Config.mode === "words" ||
Config.mode === "custom" ||
Config.mode === "quote"
) {
if (Config.timerStyle === "bar") {
let outof = wordsList.length;
if (Config.mode === "words") {
outof = Config.words;
}
if (Config.mode === "custom") {
if (CustomText.isWordRandom) {
outof = CustomText.word;
} else {
outof = CustomText.text.length;
}
}
let percent = Math.floor(((currentWordIndex + 1) / outof) * 100);
$("#timer")
.stop(true, true)
.animate(
{
width: percent + "vw",
},
250
);
} else if (Config.timerStyle === "text") {
let outof = wordsList.length;
if (Config.mode === "words") {
outof = Config.words;
}
if (Config.mode === "custom") {
if (CustomText.isWordRandom) {
outof = CustomText.word;
} else {
outof = CustomText.text.length;
}
}
if (outof === 0) {
$("#timerNumber").html("<div>" + `${inputHistory.length}` + "</div>");
} else {
$("#timerNumber").html(
"<div>" + `${inputHistory.length}/${outof}` + "</div>"
);
}
} else if (Config.timerStyle === "mini") {
let outof = wordsList.length;
if (Config.mode === "words") {
outof = Config.words;
}
if (Config.mode === "custom") {
if (CustomText.isWordRandom) {
outof = CustomText.word;
} else {
outof = CustomText.text.length;
}
}
if (Config.words === 0) {
$("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}`);
} else {
$("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}/${outof}`);
}
}
} else if (Config.mode == "zen") {
if (Config.timerStyle === "text") {
$("#timerNumber").html("<div>" + `${inputHistory.length}` + "</div>");
} else {
$("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}`);
}
}
}
function countChars() {
let correctWordChars = 0;
let correctChars = 0;
@ -1263,7 +1076,7 @@ function showResult(difficultyFailed = false) {
LiveWpm.hide();
hideCrown();
LiveAcc.hide();
hideTimer();
TimerProgress.hide();
Keymap.hide();
let stats = calculateStats();
if (stats === undefined) {
@ -2083,12 +1896,12 @@ function startTest() {
testActive = true;
TestStats.setStart(performance.now());
TestStats.resetKeypressTimings();
restartTimer();
showTimer();
TimerProgress.restart();
TimerProgress.show();
$("#liveWpm").text("0");
LiveWpm.show();
LiveAcc.show();
updateTimer();
TimerProgress.update(time, wordsList, currentWordIndex, inputHistory);
clearTimeout(timer);
if (activeFunbox === "memory") {
@ -2112,7 +1925,7 @@ function startTest() {
Config.mode === "time" ||
(Config.mode === "custom" && CustomText.isTimeRandom)
) {
updateTimer();
TimerProgress.update(time, wordsList, currentWordIndex, inputHistory);
}
let wpmAndRaw = liveWpmAndRaw();
LiveWpm.update(wpmAndRaw.wpm, wpmAndRaw.raw);
@ -2298,7 +2111,7 @@ function restartTest(withSameWordset = false, nosave = false, event) {
testActive = false;
LiveWpm.hide();
LiveAcc.hide();
hideTimer();
TimerProgress.hide();
bailout = false;
paceCaret = null;
if (paceCaret !== null) clearTimeout(paceCaret.timeout);
@ -4156,7 +3969,7 @@ function handleSpace(event, isEnter) {
Config.mode === "quote" ||
Config.mode === "zen"
) {
updateTimer();
TimerProgress.update(time, wordsList, currentWordIndex, inputHistory);
}
if (
Config.mode == "time" ||

190
src/js/test/timer-progress.js Normal file
View file

@ -0,0 +1,190 @@
import Config from "./config";
import * as CustomText from "./custom-text";
import * as Misc from "./misc";
export function show() {
let op = Config.showTimerProgress ? Config.timerOpacity : 0;
if (Config.mode != "zen" && Config.timerStyle === "bar") {
$("#timerWrapper").stop(true, true).removeClass("hidden").animate(
{
opacity: op,
},
125
);
} else if (Config.timerStyle === "text") {
$("#timerNumber")
.stop(true, true)
.removeClass("hidden")
.css("opacity", 0)
.animate(
{
opacity: op,
},
125
);
} else if (Config.mode == "zen" || Config.timerStyle === "mini") {
if (op > 0) {
$("#miniTimerAndLiveWpm .time")
.stop(true, true)
.removeClass("hidden")
.animate(
{
opacity: op,
},
125
);
}
}
}
export function hide() {
$("#timerWrapper").stop(true, true).animate(
{
opacity: 0,
},
125
);
$("#miniTimerAndLiveWpm .time")
.stop(true, true)
.animate(
{
opacity: 0,
},
125,
() => {
$("#miniTimerAndLiveWpm .time").addClass("hidden");
}
);
$("#timerNumber").stop(true, true).animate(
{
opacity: 0,
},
125
);
}
export function restart() {
if (Config.timerStyle === "bar") {
if (Config.mode === "time") {
$("#timer").stop(true, true).animate(
{
width: "100vw",
},
0
);
} else if (Config.mode === "words" || Config.mode === "custom") {
$("#timer").stop(true, true).animate(
{
width: "0vw",
},
0
);
}
}
}
//TODO remove the parameters once they are inside a module
export function update(time, wordsList, currentWordIndex, inputHistory) {
if (
Config.mode === "time" ||
(Config.mode === "custom" && CustomText.isTimeRandom)
) {
let maxtime = Config.time;
if (Config.mode === "custom" && CustomText.isTimeRandom) {
maxtime = CustomText.time;
}
if (Config.timerStyle === "bar") {
let percent = 100 - ((time + 1) / maxtime) * 100;
$("#timer")
.stop(true, true)
.animate(
{
width: percent + "vw",
},
1000,
"linear"
);
} else if (Config.timerStyle === "text") {
let displayTime = Misc.secondsToString(maxtime - time);
if (maxtime === 0) {
displayTime = Misc.secondsToString(time);
}
$("#timerNumber").html("<div>" + displayTime + "</div>");
} else if (Config.timerStyle === "mini") {
let displayTime = Misc.secondsToString(maxtime - time);
if (maxtime === 0) {
displayTime = Misc.secondsToString(time);
}
$("#miniTimerAndLiveWpm .time").html(displayTime);
}
} else if (
Config.mode === "words" ||
Config.mode === "custom" ||
Config.mode === "quote"
) {
if (Config.timerStyle === "bar") {
let outof = wordsList.length;
if (Config.mode === "words") {
outof = Config.words;
}
if (Config.mode === "custom") {
if (CustomText.isWordRandom) {
outof = CustomText.word;
} else {
outof = CustomText.text.length;
}
}
let percent = Math.floor(((currentWordIndex + 1) / outof) * 100);
$("#timer")
.stop(true, true)
.animate(
{
width: percent + "vw",
},
250
);
} else if (Config.timerStyle === "text") {
let outof = wordsList.length;
if (Config.mode === "words") {
outof = Config.words;
}
if (Config.mode === "custom") {
if (CustomText.isWordRandom) {
outof = CustomText.word;
} else {
outof = CustomText.text.length;
}
}
if (outof === 0) {
$("#timerNumber").html("<div>" + `${inputHistory.length}` + "</div>");
} else {
$("#timerNumber").html(
"<div>" + `${inputHistory.length}/${outof}` + "</div>"
);
}
} else if (Config.timerStyle === "mini") {
let outof = wordsList.length;
if (Config.mode === "words") {
outof = Config.words;
}
if (Config.mode === "custom") {
if (CustomText.isWordRandom) {
outof = CustomText.word;
} else {
outof = CustomText.text.length;
}
}
if (Config.words === 0) {
$("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}`);
} else {
$("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}/${outof}`);
}
}
} else if (Config.mode == "zen") {
if (Config.timerStyle === "text") {
$("#timerNumber").html("<div>" + `${inputHistory.length}` + "</div>");
} else {
$("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}`);
}
}
}

10
src/js/userconfig.js
View file

@ -573,11 +573,21 @@ function setShowTimerProgress(timer, nosave) {
timer = false;
}
ConfigSet.showTimerProgress(timer);
if (Config.showTimerProgress) {
TimerProgress.show();
} else {
TimerProgress.hide();
}
if (!nosave) saveConfigToCookie();
}
function toggleShowTimerProgress() {
ConfigSet.showTimerProgress(!Config.showTimerProgress);
if (Config.showTimerProgress) {
TimerProgress.show();
} else {
TimerProgress.hide();
}
saveConfigToCookie();
}