monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-05 05:17:51 +08:00
Code Issues Projects Releases Packages Wiki Activity

added animations to test config menu

Browse source
This commit is contained in:
Miodec 2022-01-01 17:48:04 +01:00
parent 10e456bf9d
commit ec04272e99
4 changed files with 125 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/js/config.js
View file

@ -21,6 +21,7 @@ import LayoutList from "./layouts";
import * as ChallengeContoller from "./challenge-controller";
import * as TTS from "./tts";
import * as MobileTestConfig from "./mobile-test-config.js";
import * as TestConfig from "./test-config.js";
export let localStorageConfig = null;
export let dbConfigLoaded = false;
@ -227,29 +228,9 @@ export function setMode(mode, nosave) {
Notifications.add("Memory funbox can only be used with words mode.", 0);
return;
}
let previous = config.mode;
config.mode = mode;
$("#top .config .mode .text-button").removeClass("active");
$("#top .config .mode .text-button[mode='" + mode + "']").addClass("active");
if (config.mode == "time") {
$("#top .config .wordCount").addClass("hidden");
$("#top .config .time").removeClass("hidden");
$("#top .config .customText").addClass("hidden");
$("#top .config .punctuationMode").removeClass("disabled");
$("#top .config .numbersMode").removeClass("disabled");
$("#top .config .punctuationMode").removeClass("hidden");
$("#top .config .numbersMode").removeClass("hidden");
$("#top .config .quoteLength").addClass("hidden");
} else if (config.mode == "words") {
$("#top .config .wordCount").removeClass("hidden");
$("#top .config .time").addClass("hidden");
$("#top .config .customText").addClass("hidden");
$("#top .config .punctuationMode").removeClass("disabled");
$("#top .config .numbersMode").removeClass("disabled");
$("#top .config .punctuationMode").removeClass("hidden");
$("#top .config .numbersMode").removeClass("hidden");
$("#top .config .quoteLength").addClass("hidden");
} else if (config.mode == "custom") {
if (config.mode == "custom") {
if (
config.funbox === "58008" ||
config.funbox === "gibberish" ||
@ -258,40 +239,17 @@ export function setMode(mode, nosave) {
Funbox.setActive("none");
TestUI.updateModesNotice();
}
$("#top .config .wordCount").addClass("hidden");
$("#top .config .time").addClass("hidden");
$("#top .config .customText").removeClass("hidden");
$("#top .config .punctuationMode").removeClass("disabled");
$("#top .config .numbersMode").removeClass("disabled");
$("#top .config .punctuationMode").removeClass("hidden");
$("#top .config .numbersMode").removeClass("hidden");
$("#top .config .quoteLength").addClass("hidden");
setPunctuation(false, true);
setNumbers(false, true);
} else if (config.mode == "quote") {
setPunctuation(false, true);
setNumbers(false, true);
$("#top .config .wordCount").addClass("hidden");
$("#top .config .time").addClass("hidden");
$("#top .config .customText").addClass("hidden");
$("#top .config .punctuationMode").addClass("disabled");
$("#top .config .numbersMode").addClass("disabled");
$("#top .config .punctuationMode").removeClass("hidden");
$("#top .config .numbersMode").removeClass("hidden");
$("#result .stats .source").removeClass("hidden");
$("#top .config .quoteLength").removeClass("hidden");
} else if (config.mode == "zen") {
$("#top .config .wordCount").addClass("hidden");
$("#top .config .time").addClass("hidden");
$("#top .config .customText").addClass("hidden");
$("#top .config .punctuationMode").addClass("hidden");
$("#top .config .numbersMode").addClass("hidden");
$("#top .config .quoteLength").addClass("hidden");
if (config.paceCaret != "off") {
Notifications.add(`Pace caret will not work with zen mode.`, 0);
}
// setPaceCaret("off", true);
}
TestConfig.update(previous, config.mode);
MobileTestConfig.update();
ChallengeContoller.clearActive();
if (!nosave) saveToLocalStorage();

119
src/js/test/test-config.js
View file

@ -5,6 +5,7 @@ import * as ManualRestart from "./manual-restart-tracker";
import * as TestLogic from "./test-logic";
import * as QuoteSearchPopup from "./quote-search-popup";
import * as CustomTextPopup from "./custom-text-popup";
import * as UI from "./ui";
// export function show() {
// $("#top .config").removeClass("hidden").css("opacity", 1);
@ -42,6 +43,124 @@ export function hide() {
);
}
export function update(previous, current) {
$("#top .config .mode .text-button").removeClass("active");
$("#top .config .mode .text-button[mode='" + current + "']").addClass(
"active"
);
if (current == "time") {
// $("#top .config .wordCount").addClass("hidden");
// $("#top .config .time").removeClass("hidden");
// $("#top .config .customText").addClass("hidden");
$("#top .config .punctuationMode").removeClass("disabled");
$("#top .config .numbersMode").removeClass("disabled");
// $("#top .config .puncAndNum").removeClass("disabled");
// $("#top .config .punctuationMode").removeClass("hidden");
// $("#top .config .numbersMode").removeClass("hidden");
// $("#top .config .quoteLength").addClass("hidden");
} else if (current == "words") {
// $("#top .config .wordCount").removeClass("hidden");
// $("#top .config .time").addClass("hidden");
// $("#top .config .customText").addClass("hidden");
$("#top .config .punctuationMode").removeClass("disabled");
$("#top .config .numbersMode").removeClass("disabled");
// $("#top .config .puncAndNum").removeClass("disabled");
// $("#top .config .punctuationMode").removeClass("hidden");
// $("#top .config .numbersMode").removeClass("hidden");
// $("#top .config .quoteLength").addClass("hidden");
} else if (current == "custom") {
// $("#top .config .wordCount").addClass("hidden");
// $("#top .config .time").addClass("hidden");
// $("#top .config .customText").removeClass("hidden");
$("#top .config .punctuationMode").removeClass("disabled");
$("#top .config .numbersMode").removeClass("disabled");
// $("#top .config .puncAndNum").removeClass("disabled");
// $("#top .config .punctuationMode").removeClass("hidden");
// $("#top .config .numbersMode").removeClass("hidden");
// $("#top .config .quoteLength").addClass("hidden");
} else if (current == "quote") {
// $("#top .config .wordCount").addClass("hidden");
// $("#top .config .time").addClass("hidden");
// $("#top .config .customText").addClass("hidden");
$("#top .config .punctuationMode").addClass("disabled");
$("#top .config .numbersMode").addClass("disabled");
// $("#top .config .puncAndNum").addClass("disabled");
// $("#top .config .punctuationMode").removeClass("hidden");
// $("#top .config .numbersMode").removeClass("hidden");
// $("#result .stats .source").removeClass("hidden");
// $("#top .config .quoteLength").removeClass("hidden");
} else if (current == "zen") {
// $("#top .config .wordCount").addClass("hidden");
// $("#top .config .time").addClass("hidden");
// $("#top .config .customText").addClass("hidden");
// $("#top .config .punctuationMode").addClass("hidden");
// $("#top .config .numbersMode").addClass("hidden");
// $("#top .config .quoteLength").addClass("hidden");
}
let submenu = {
time: "time",
words: "wordCount",
custom: "customText",
quote: "quoteLength",
zen: "",
};
let animTime = 250;
if (current == "zen") {
$(`#top .config .${submenu[previous]}`).animate(
{
opacity: 0,
},
animTime / 2,
() => {
$(`#top .config .${submenu[previous]}`).addClass("hidden");
}
);
$(`#top .config .puncAndNum`).animate(
{
opacity: 0,
},
animTime / 2,
() => {
$(`#top .config .puncAndNum`).addClass("invisible");
}
);
return;
}
if (previous == "zen") {
setTimeout(() => {
$(`#top .config .${submenu[current]}`).removeClass("hidden");
$(`#top .config .${submenu[current]}`)
.css({ opacity: 0 })
.animate(
{
opacity: 1,
},
animTime / 2
);
$(`#top .config .puncAndNum`).removeClass("invisible");
$(`#top .config .puncAndNum`)
.css({ opacity: 0 })
.animate(
{
opacity: 1,
},
animTime / 2
);
}, animTime / 2);
return;
}
UI.swapElements(
$("#top .config ." + submenu[previous]),
$("#top .config ." + submenu[current]),
animTime
);
}
$(document).on("click", "#top .config .wordCount .text-button", (e) => {
const wrd = $(e.currentTarget).attr("wordCount");
if (wrd == "custom") {

2
src/sass/nav.scss
View file

@ -146,7 +146,7 @@
justify-items: self-end;
.group {
transition: 0.25s;
// transition: 0.25s;
.title {
color: var(--sub-color);

1
static/index.html
View file

@ -943,6 +943,7 @@
</div>
<div class="desktopConfig">
<div
class="puncAndNum"
style="
display: grid;
grid-auto-flow: column;