mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-03 04:00:41 +08:00
refactored settings page
This commit is contained in:
Jack
parent
0ac761c54c
commit
e3fabe57dc
6 changed files with 239 additions and 606 deletions
|
|
@ -1844,8 +1844,8 @@ key {
|
|||
}
|
||||
|
||||
&.themes,
|
||||
&.languages,
|
||||
&.layouts,
|
||||
&.language,
|
||||
&.layout,
|
||||
&.keymapLayout,
|
||||
&.fontFamily,
|
||||
&.funbox {
|
||||
|
|
|
|||
|
|
@ -1123,12 +1123,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section layouts">
|
||||
<div class="section layout">
|
||||
<h1>layout override</h1>
|
||||
<div class="buttons">
|
||||
</div>
|
||||
</div>
|
||||
<div class="section languages">
|
||||
<div class="section language">
|
||||
<h1>language</h1>
|
||||
<div class="buttons">
|
||||
</div>
|
||||
|
|
@ -1158,10 +1158,10 @@
|
|||
<h1>caret style</h1>
|
||||
<div class="text">Change the style of the caret during the test.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" caret="default" tabindex="0" onclick="this.blur();">|</div>
|
||||
<div class="button" caret="block" tabindex="0" onclick="this.blur();">▮</div>
|
||||
<div class="button" caret="outline" tabindex="0" onclick="this.blur();">▯</div>
|
||||
<div class="button" caret="underline" tabindex="0" onclick="this.blur();">_</div>
|
||||
<div class="button" caretStyle="default" tabindex="0" onclick="this.blur();">|</div>
|
||||
<div class="button" caretStyle="block" tabindex="0" onclick="this.blur();">▮</div>
|
||||
<div class="button" caretStyle="outline" tabindex="0" onclick="this.blur();">▯</div>
|
||||
<div class="button" caretStyle="underline" tabindex="0" onclick="this.blur();">_</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section timerStyle" section="">
|
||||
|
|
@ -1356,7 +1356,7 @@
|
|||
hide elements
|
||||
<i class="fas fa-chevron-down"></i></div>
|
||||
<div class="settingsGroup hideElements">
|
||||
<div class="section liveWpm">
|
||||
<div class="section showLiveWpm">
|
||||
<h1>live wpm</h1>
|
||||
<div class="text">Displays a live WPM speed during the test. Updates once every second.</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -1364,7 +1364,7 @@
|
|||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section timerBar">
|
||||
<div class="section showTimerProgress">
|
||||
<h1>timer/progress</h1>
|
||||
<div class="text">Displays a live timer for timed tests and progress for words/custom tests.</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -1372,7 +1372,7 @@
|
|||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section keyTips">
|
||||
<div class="section showKeyTips">
|
||||
<h1>key tips</h1>
|
||||
<div class="text">Shows the keybind tips at the bottom of the page.</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -1380,14 +1380,6 @@
|
|||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section discordDot">
|
||||
<h1>discord dot</h1>
|
||||
<div class="text">Shows the notification dot on the Discord icon.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">hide</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ let commands = {
|
|||
id: "toggleShowLiveWpm",
|
||||
display: "Toggle live wpm display",
|
||||
exec: () => {
|
||||
config.showLiveWpm = !config.showLiveWpm;
|
||||
toggleShowLiveWpm();
|
||||
saveConfigToCookie();
|
||||
},
|
||||
},
|
||||
|
|
@ -86,7 +86,7 @@ let commands = {
|
|||
id: "toggleTimerBar",
|
||||
display: "Toggle timer display",
|
||||
exec: () => {
|
||||
config.showTimerBar = !config.showTimerBar;
|
||||
toggleShowTimerProgress();
|
||||
saveConfigToCookie();
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -832,7 +832,7 @@ function highlightBadWord(index, showError) {
|
|||
}
|
||||
|
||||
function showTimer() {
|
||||
let op = config.showTimerBar ? config.timerOpacity : 0;
|
||||
let op = config.showTimerProgress ? config.timerOpacity : 0;
|
||||
if (config.timerStyle === "bar") {
|
||||
// let op = 0.25;
|
||||
// if (
|
||||
|
|
@ -933,7 +933,7 @@ function restartTimer() {
|
|||
}
|
||||
|
||||
function updateTimer() {
|
||||
if (!config.showTimerBar) return;
|
||||
if (!config.showTimerProgress) return;
|
||||
if (config.mode === "time") {
|
||||
if (config.timerStyle === "bar") {
|
||||
let percent = 100 - ((time + 1) / config.time) * 100;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,166 @@
|
|||
class SettingsGroup {
|
||||
constructor(
|
||||
configName,
|
||||
toggleFunction,
|
||||
setCallback = null,
|
||||
updateCallback = null
|
||||
) {
|
||||
this.configName = configName;
|
||||
this.configValue = config[configName];
|
||||
if (this.configValue === true || this.configValue === false) {
|
||||
this.onOff = true;
|
||||
} else {
|
||||
this.onOff = false;
|
||||
}
|
||||
this.toggleFunction = toggleFunction;
|
||||
this.setCallback = setCallback;
|
||||
this.updateCallback = updateCallback;
|
||||
|
||||
this.updateButton();
|
||||
|
||||
$(document).on(
|
||||
"click",
|
||||
`.pageSettings .section.${this.configName} .button`,
|
||||
(e) => {
|
||||
if (this.onOff) {
|
||||
if ($(e.currentTarget).hasClass("on")) {
|
||||
this.toggleFunction(true);
|
||||
} else {
|
||||
this.toggleFunction(false);
|
||||
}
|
||||
this.updateButton();
|
||||
if (this.setCallback !== null) this.setCallback();
|
||||
} else {
|
||||
let value = $(e.currentTarget).attr(configName);
|
||||
let params = $(e.currentTarget).attr("params");
|
||||
if (params === undefined) {
|
||||
this.toggleFunction(value);
|
||||
} else {
|
||||
this.toggleFunction(value, ...params);
|
||||
}
|
||||
this.updateButton();
|
||||
if (this.setCallback !== null) this.setCallback();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
updateButton() {
|
||||
this.configValue = config[this.configName];
|
||||
$(`.pageSettings .section.${this.configName} .button`).removeClass(
|
||||
"active"
|
||||
);
|
||||
if (this.onOff) {
|
||||
let onoffstring;
|
||||
if (this.configValue) {
|
||||
onoffstring = "on";
|
||||
} else {
|
||||
onoffstring = "off";
|
||||
}
|
||||
$(
|
||||
`.pageSettings .section.${this.configName} .buttons .button.${onoffstring}`
|
||||
).addClass("active");
|
||||
} else {
|
||||
$(
|
||||
`.pageSettings .section.${this.configName} .button[${this.configName}='${this.configValue}']`
|
||||
).addClass("active");
|
||||
}
|
||||
if (this.updateCallback !== null) this.updateCallback();
|
||||
}
|
||||
}
|
||||
|
||||
let settingsGroups = {};
|
||||
|
||||
settingsGroups.smoothCaret = new SettingsGroup("smoothCaret", setSmoothCaret);
|
||||
settingsGroups.difficulty = new SettingsGroup("difficulty", setDifficulty);
|
||||
settingsGroups.quickTab = new SettingsGroup("quickTab", setQuickTabMode);
|
||||
settingsGroups.showLiveWpm = new SettingsGroup(
|
||||
"showLiveWpm",
|
||||
setShowLiveWpm,
|
||||
() => {
|
||||
settingsGroups.keymapMode.updateButton();
|
||||
}
|
||||
);
|
||||
settingsGroups.showTimerProgress = new SettingsGroup(
|
||||
"showTimerProgress",
|
||||
setShowTimerProgress
|
||||
);
|
||||
settingsGroups.keymapMode = new SettingsGroup(
|
||||
"keymapMode",
|
||||
changeKeymapMode,
|
||||
() => {
|
||||
settingsGroups.showLiveWpm.updateButton();
|
||||
},
|
||||
() => {
|
||||
if (config.keymapMode === "off") {
|
||||
$(".pageSettings .section.keymapLayout").addClass("hidden");
|
||||
} else {
|
||||
$(".pageSettings .section.keymapLayout").removeClass("hidden");
|
||||
}
|
||||
}
|
||||
);
|
||||
settingsGroups.keymapLayout = new SettingsGroup(
|
||||
"keymapLayout",
|
||||
changeKeymapLayout
|
||||
);
|
||||
settingsGroups.quickTab = new SettingsGroup(
|
||||
"showKeyTips",
|
||||
setKeyTips,
|
||||
null,
|
||||
() => {
|
||||
if (config.showKeyTips) {
|
||||
$(".pageSettings .tip").removeClass("hidden");
|
||||
} else {
|
||||
$(".pageSettings .tip").addClass("hidden");
|
||||
}
|
||||
}
|
||||
);
|
||||
settingsGroups.freedomMode = new SettingsGroup(
|
||||
"freedomMode",
|
||||
setFreedomMode,
|
||||
() => {
|
||||
settingsGroups.confidenceMode.updateButton();
|
||||
}
|
||||
);
|
||||
settingsGroups.confidenceMode = new SettingsGroup(
|
||||
"confidenceMode",
|
||||
setConfidenceMode,
|
||||
() => {
|
||||
settingsGroups.freedomMode.updateButton();
|
||||
}
|
||||
);
|
||||
settingsGroups.blindMode = new SettingsGroup("blindMode", setBlindMode);
|
||||
settingsGroups.quickEnd = new SettingsGroup("quickEnd", setQuickEnd);
|
||||
settingsGroups.flipTestColors = new SettingsGroup(
|
||||
"flipTestColors",
|
||||
setFlipTestColors
|
||||
);
|
||||
settingsGroups.colorfulMode = new SettingsGroup(
|
||||
"colorfulMode",
|
||||
setColorfulMode
|
||||
);
|
||||
settingsGroups.randomTheme = new SettingsGroup("randomTheme", setRandomTheme);
|
||||
settingsGroups.stopOnError = new SettingsGroup("stopOnError", setStopOnError);
|
||||
settingsGroups.showAllLines = new SettingsGroup(
|
||||
"showAllLines",
|
||||
setShowAllLines
|
||||
);
|
||||
settingsGroups.smoothLineScroll = new SettingsGroup(
|
||||
"smoothLineScroll",
|
||||
setSmoothLineScroll
|
||||
);
|
||||
settingsGroups.layout = new SettingsGroup("layout", changeLayout);
|
||||
settingsGroups.language = new SettingsGroup("language", changeLanguage);
|
||||
settingsGroups.fontSize = new SettingsGroup("fontSize", changeFontSize);
|
||||
settingsGroups.caretStyle = new SettingsGroup("caretStyle", setCaretStyle);
|
||||
settingsGroups.timerStyle = new SettingsGroup("timerStyle", setTimerStyle);
|
||||
settingsGroups.timerOpacity = new SettingsGroup(
|
||||
"timerOpacity",
|
||||
setTimerOpacity
|
||||
);
|
||||
settingsGroups.timerColor = new SettingsGroup("timerColor", setTimerColor);
|
||||
settingsGroups.fontFamily = new SettingsGroup("fontFamily", setFontFamily);
|
||||
|
||||
function updateSettingsPage() {
|
||||
let themesEl = $(".pageSettings .section.themes .buttons").empty();
|
||||
themesList.forEach((theme) => {
|
||||
|
|
@ -8,7 +171,7 @@ function updateSettingsPage() {
|
|||
);
|
||||
});
|
||||
|
||||
let langEl = $(".pageSettings .section.languages .buttons").empty();
|
||||
let langEl = $(".pageSettings .section.language .buttons").empty();
|
||||
Object.keys(words).forEach((language) => {
|
||||
if (language === "english_10k") return;
|
||||
langEl.append(
|
||||
|
|
@ -24,7 +187,7 @@ function updateSettingsPage() {
|
|||
}
|
||||
});
|
||||
|
||||
let layoutEl = $(".pageSettings .section.layouts .buttons").empty();
|
||||
let layoutEl = $(".pageSettings .section.layout .buttons").empty();
|
||||
Object.keys(layouts).forEach((layout) => {
|
||||
layoutEl.append(
|
||||
`<div class="layout button" layout='${layout}'>${layout.replace(
|
||||
|
|
@ -79,49 +242,16 @@ function updateSettingsPage() {
|
|||
);
|
||||
});
|
||||
|
||||
Object.keys(settingsGroups).forEach((group) => {
|
||||
settingsGroups[group].updateButton();
|
||||
});
|
||||
|
||||
refreshTagsSettingsSection();
|
||||
|
||||
setSettingsButton("smoothCaret", config.smoothCaret);
|
||||
setSettingsButton("quickTab", config.quickTab);
|
||||
setSettingsButton("liveWpm", config.showLiveWpm);
|
||||
setSettingsButton("timerBar", config.showTimerBar);
|
||||
setSettingsButton("keymap-toggle", config.keymap);
|
||||
setSettingsButton("keyTips", config.showKeyTips);
|
||||
setSettingsButton("freedomMode", config.freedomMode);
|
||||
setSettingsButton("blindMode", config.blindMode);
|
||||
setSettingsButton("quickEnd", config.quickEnd);
|
||||
setSettingsButton("flipTestColors", config.flipTestColors);
|
||||
setSettingsButton("discordDot", config.showDiscordDot);
|
||||
setSettingsButton("colorfulMode", config.colorfulMode);
|
||||
setSettingsButton("randomTheme", config.randomTheme);
|
||||
setSettingsButton("stopOnError", config.stopOnError);
|
||||
setSettingsButton("showAllLines", config.showAllLines);
|
||||
setSettingsButton("smoothLineScroll", config.smoothLineScroll);
|
||||
|
||||
setActiveFunboxButton();
|
||||
setActiveLayoutButton();
|
||||
setActiveThemeButton();
|
||||
setActiveLanguageButton();
|
||||
setActiveFontSizeButton();
|
||||
setActiveDifficultyButton();
|
||||
setActiveCaretStyleButton();
|
||||
setActiveTimerStyleButton();
|
||||
setActiveTimerColorButton();
|
||||
setActiveTimerOpacityButton();
|
||||
setActiveThemeTab();
|
||||
setCustomThemeInputs();
|
||||
setActiveConfidenceModeButton();
|
||||
setActiveFontFamilyButton();
|
||||
setActiveKeymapModeButton();
|
||||
setActiveKeymapLayoutButton();
|
||||
|
||||
updateDiscordSettingsSection();
|
||||
|
||||
if (config.showKeyTips) {
|
||||
$(".pageSettings .tip").removeClass("hidden");
|
||||
} else {
|
||||
$(".pageSettings .tip").addClass("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function showCustomThemeShare() {
|
||||
|
|
@ -197,29 +327,29 @@ function refreshTagsSettingsSection() {
|
|||
dbSnapshot.tags.forEach((tag) => {
|
||||
if (tag.active === true) {
|
||||
tagsEl.append(`
|
||||
|
||||
<div class="tag" id="${tag.id}">
|
||||
<div class="active" active="true">
|
||||
<i class="fas fa-check-square"></i>
|
||||
</div>
|
||||
<div class="title">${tag.name}</div>
|
||||
<div class="editButton"><i class="fas fa-pen"></i></div>
|
||||
<div class="removeButton"><i class="fas fa-trash"></i></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tag" id="${tag.id}">
|
||||
<div class="active" active="true">
|
||||
<i class="fas fa-check-square"></i>
|
||||
</div>
|
||||
<div class="title">${tag.name}</div>
|
||||
<div class="editButton"><i class="fas fa-pen"></i></div>
|
||||
<div class="removeButton"><i class="fas fa-trash"></i></div>
|
||||
</div>
|
||||
|
||||
`);
|
||||
} else {
|
||||
tagsEl.append(`
|
||||
|
||||
<div class="tag" id="${tag.id}">
|
||||
<div class="active" active="false">
|
||||
<i class="fas fa-square"></i>
|
||||
</div>
|
||||
<div class="title">${tag.name}</div>
|
||||
<div class="editButton"><i class="fas fa-pen"></i></div>
|
||||
<div class="removeButton"><i class="fas fa-trash"></i></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tag" id="${tag.id}">
|
||||
<div class="active" active="false">
|
||||
<i class="fas fa-square"></i>
|
||||
</div>
|
||||
<div class="title">${tag.name}</div>
|
||||
<div class="editButton"><i class="fas fa-pen"></i></div>
|
||||
<div class="removeButton"><i class="fas fa-trash"></i></div>
|
||||
</div>
|
||||
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
|
@ -259,136 +389,7 @@ function setCustomThemeInputs() {
|
|||
});
|
||||
}
|
||||
|
||||
function setActiveKeymapModeButton() {
|
||||
$(`.pageSettings .section.keymapMode .button`).removeClass("active");
|
||||
$(
|
||||
`.pageSettings .section.keymapMode .button[keymapMode="${config.keymapMode}"]`
|
||||
).addClass("active");
|
||||
if (config.keymapMode === "off") {
|
||||
$(".pageSettings .section.keymapLayout").addClass("hidden");
|
||||
} else {
|
||||
$(".pageSettings .section.keymapLayout").removeClass("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function setActiveKeymapLayoutButton() {
|
||||
$(`.pageSettings .section.keymapLayout .layout`).removeClass("active");
|
||||
$(
|
||||
`.pageSettings .section.keymapLayout .layout[layout=${config.keymapLayout}]`
|
||||
).addClass("active");
|
||||
}
|
||||
|
||||
function setActiveLayoutButton() {
|
||||
$(`.pageSettings .section.layouts .layout`).removeClass("active");
|
||||
$(`.pageSettings .section.layouts .layout[layout=${config.layout}]`).addClass(
|
||||
"active"
|
||||
);
|
||||
}
|
||||
|
||||
function setActiveFontSizeButton() {
|
||||
$(`.pageSettings .section.fontSize .buttons .button`).removeClass("active");
|
||||
$(
|
||||
`.pageSettings .section.fontSize .buttons .button[fontsize=` +
|
||||
config.fontSize +
|
||||
`]`
|
||||
).addClass("active");
|
||||
}
|
||||
|
||||
function setActiveDifficultyButton() {
|
||||
$(`.pageSettings .section.difficulty .buttons .button`).removeClass("active");
|
||||
$(
|
||||
`.pageSettings .section.difficulty .buttons .button[difficulty=` +
|
||||
config.difficulty +
|
||||
`]`
|
||||
).addClass("active");
|
||||
}
|
||||
|
||||
function setActiveLanguageButton() {
|
||||
$(`.pageSettings .section.languages .language`).removeClass("active");
|
||||
$(
|
||||
`.pageSettings .section.languages .language[language=${config.language}]`
|
||||
).addClass("active");
|
||||
}
|
||||
|
||||
function setActiveCaretStyleButton() {
|
||||
$(`.pageSettings .section.caretStyle .buttons .button`).removeClass("active");
|
||||
$(
|
||||
`.pageSettings .section.caretStyle .buttons .button[caret=` +
|
||||
config.caretStyle +
|
||||
`]`
|
||||
).addClass("active");
|
||||
}
|
||||
|
||||
function setActiveTimerStyleButton() {
|
||||
$(`.pageSettings .section.timerStyle .buttons .button`).removeClass("active");
|
||||
$(
|
||||
`.pageSettings .section.timerStyle .buttons .button[timer=` +
|
||||
config.timerStyle +
|
||||
`]`
|
||||
).addClass("active");
|
||||
}
|
||||
|
||||
function setActiveTimerColorButton() {
|
||||
$(`.pageSettings .section.timerColor .buttons .button`).removeClass("active");
|
||||
$(
|
||||
`.pageSettings .section.timerColor .buttons .button[color=` +
|
||||
config.timerColor +
|
||||
`]`
|
||||
).addClass("active");
|
||||
}
|
||||
|
||||
function setActiveTimerOpacityButton() {
|
||||
$(`.pageSettings .section.timerOpacity .buttons .button`).removeClass(
|
||||
"active"
|
||||
);
|
||||
$(
|
||||
`.pageSettings .section.timerOpacity .buttons .button[opacity="` +
|
||||
config.timerOpacity +
|
||||
`"]`
|
||||
).addClass("active");
|
||||
}
|
||||
|
||||
function setSettingsButton(buttonSection, tf) {
|
||||
if (tf) {
|
||||
$(
|
||||
".pageSettings .section." + buttonSection + " .buttons .button.on"
|
||||
).addClass("active");
|
||||
$(
|
||||
".pageSettings .section." + buttonSection + " .buttons .button.off"
|
||||
).removeClass("active");
|
||||
} else {
|
||||
$(
|
||||
".pageSettings .section." + buttonSection + " .buttons .button.off"
|
||||
).addClass("active");
|
||||
$(
|
||||
".pageSettings .section." + buttonSection + " .buttons .button.on"
|
||||
).removeClass("active");
|
||||
}
|
||||
}
|
||||
|
||||
function showActiveTags() {
|
||||
// activeTags = [];
|
||||
// tagsString = "";
|
||||
// $.each($('.pageSettings .section.tags .tagsList .tag'), (index, tag) => {
|
||||
// if($(tag).children('.active').attr('active') === 'true'){
|
||||
// activeTags.push($(tag).attr('id'));
|
||||
// tagsString += $(tag).children('.title').text() + ', ';
|
||||
// }
|
||||
// })
|
||||
// updateTestModesNotice();
|
||||
|
||||
// if($(target).attr('active') === 'true'){
|
||||
// $(target).attr('active','false');
|
||||
// $(target).html('<i class="fas fa-square"></i>')
|
||||
// }else{
|
||||
// $(target).attr('active','true');
|
||||
// $(target).html('<i class="fas fa-check-square"></i>')
|
||||
// }
|
||||
|
||||
// $.each($('.pageSettings .section.tags .tagsList .tag'), (index, tag) => {
|
||||
// let tagid = $(tag).attr('')
|
||||
// })
|
||||
|
||||
dbSnapshot.tags.forEach((tag) => {
|
||||
if (tag.active === true) {
|
||||
$(
|
||||
|
|
@ -472,348 +473,12 @@ function updateDiscordSettingsSection() {
|
|||
}
|
||||
}
|
||||
|
||||
function setActiveConfidenceModeButton() {
|
||||
let cm = config.confidenceMode;
|
||||
$(".pageSettings .section.confidenceMode .buttons .button").removeClass(
|
||||
"active"
|
||||
);
|
||||
$(
|
||||
`.pageSettings .section.confidenceMode .buttons .button[confidenceMode='${cm}']`
|
||||
).addClass("active");
|
||||
if (cm !== "off") {
|
||||
config.freedomMode = false;
|
||||
setSettingsButton("freedomMode", config.freedomMode);
|
||||
}
|
||||
}
|
||||
|
||||
function setActiveFontFamilyButton() {
|
||||
let font = config.fontFamily;
|
||||
$(".pageSettings .section.fontFamily .buttons .button").removeClass("active");
|
||||
$(
|
||||
`.pageSettings .section.fontFamily .buttons .button[fontFamily='${font}']`
|
||||
).addClass("active");
|
||||
}
|
||||
|
||||
//smooth caret
|
||||
$(".pageSettings .section.smoothCaret .buttons .button.on").click((e) => {
|
||||
setSmoothCaret(true);
|
||||
// showNotification('Smooth caret on', 1000);
|
||||
setSettingsButton("smoothCaret", config.smoothCaret);
|
||||
});
|
||||
$(".pageSettings .section.smoothCaret .buttons .button.off").click((e) => {
|
||||
setSmoothCaret(false);
|
||||
// showNotification('Smooth caret off', 1000);
|
||||
setSettingsButton("smoothCaret", config.smoothCaret);
|
||||
});
|
||||
|
||||
//smooth line
|
||||
$(".pageSettings .section.smoothLineScroll .buttons .button.on").click((e) => {
|
||||
setSmoothLineScroll(true);
|
||||
// showNotification('Smooth caret on', 1000);
|
||||
setSettingsButton("smoothLineScroll", config.smoothLineScroll);
|
||||
});
|
||||
$(".pageSettings .section.smoothLineScroll .buttons .button.off").click((e) => {
|
||||
setSmoothLineScroll(false);
|
||||
// showNotification('Smooth caret off', 1000);
|
||||
setSettingsButton("smoothLineScroll", config.smoothLineScroll);
|
||||
});
|
||||
|
||||
//quick tab
|
||||
$(".pageSettings .section.quickTab .buttons .button.on").click((e) => {
|
||||
setQuickTabMode(true);
|
||||
// showNotification('Quick tab on', 1000);
|
||||
setSettingsButton("quickTab", config.quickTab);
|
||||
});
|
||||
$(".pageSettings .section.quickTab .buttons .button.off").click((e) => {
|
||||
setQuickTabMode(false);
|
||||
// showNotification('Quick tab off', 1000);
|
||||
setSettingsButton("quickTab", config.quickTab);
|
||||
});
|
||||
|
||||
//live wpm
|
||||
$(".pageSettings .section.liveWpm .buttons .button.on").click((e) => {
|
||||
config.showLiveWpm = true;
|
||||
saveConfigToCookie();
|
||||
// showNotification('Live WPM on', 1000);
|
||||
setSettingsButton("liveWpm", config.showLiveWpm);
|
||||
});
|
||||
$(".pageSettings .section.liveWpm .buttons .button.off").click((e) => {
|
||||
config.showLiveWpm = false;
|
||||
saveConfigToCookie();
|
||||
// showNotification('Live WPM off', 1000);
|
||||
setSettingsButton("liveWpm", config.showLiveWpm);
|
||||
});
|
||||
|
||||
//timer bar
|
||||
$(".pageSettings .section.timerBar .buttons .button.on").click((e) => {
|
||||
config.showTimerBar = true;
|
||||
saveConfigToCookie();
|
||||
// showNotification('Timer bar on', 1000);
|
||||
setSettingsButton("timerBar", config.showTimerBar);
|
||||
});
|
||||
$(".pageSettings .section.timerBar .buttons .button.off").click((e) => {
|
||||
config.showTimerBar = false;
|
||||
saveConfigToCookie();
|
||||
// showNotification('Timer bar off', 1000);
|
||||
setSettingsButton("timerBar", config.showTimerBar);
|
||||
});
|
||||
|
||||
//keymap
|
||||
$(document).on("click", ".pageSettings .section.keymapMode .button", (e) => {
|
||||
let mode = $(e.currentTarget).attr("keymapMode");
|
||||
changeKeymapMode(mode);
|
||||
restartTest();
|
||||
setActiveKeymapModeButton();
|
||||
setSettingsButton("liveWpm", config.showLiveWpm);
|
||||
});
|
||||
|
||||
//keymap layouts
|
||||
$(document).on("click", ".pageSettings .section.keymapLayout .layout", (e) => {
|
||||
let layout = $(e.currentTarget).attr("layout");
|
||||
changeKeymapLayout(layout);
|
||||
// showNotification('Keymap Layout changed', 1000);
|
||||
restartTest();
|
||||
setActiveKeymapLayoutButton();
|
||||
});
|
||||
|
||||
//freedom mode
|
||||
$(".pageSettings .section.freedomMode .buttons .button.on").click((e) => {
|
||||
setFreedomMode(true);
|
||||
saveConfigToCookie();
|
||||
// showNotification('Freedom mode on', 1000);
|
||||
setSettingsButton("freedomMode", config.freedomMode);
|
||||
config.confidenceMode = "off";
|
||||
setActiveConfidenceModeButton();
|
||||
});
|
||||
$(".pageSettings .section.freedomMode .buttons .button.off").click((e) => {
|
||||
setFreedomMode(false);
|
||||
saveConfigToCookie();
|
||||
// showNotification('Freedom mode off', 1000);
|
||||
setSettingsButton("freedomMode", config.freedomMode);
|
||||
});
|
||||
|
||||
// //max confidence
|
||||
// $(".pageSettings .section.maxConfidence .buttons .button.on").click((e) => {
|
||||
// setMaxConfidence(true);
|
||||
// saveConfigToCookie();
|
||||
// // showNotification('Max confidence on', 1000);
|
||||
// setSettingsButton("freedomMode", config.freedomMode);
|
||||
// setSettingsButton("maxConfidence", config.maxConfidence);
|
||||
// });
|
||||
// $(".pageSettings .section.maxConfidence .buttons .button.off").click((e) => {
|
||||
// setMaxConfidence(false);
|
||||
// saveConfigToCookie();
|
||||
// // showNotification('Max confidence off', 1000);
|
||||
// setSettingsButton("freedomMode", config.freedomMode);
|
||||
// setSettingsButton("maxConfidence", config.maxConfidence);
|
||||
// });
|
||||
|
||||
//confidence
|
||||
$(document).on(
|
||||
"click",
|
||||
".pageSettings .section.confidenceMode .button",
|
||||
(e) => {
|
||||
let confidence = $(e.currentTarget).attr("confidenceMode");
|
||||
setConfidenceMode(confidence);
|
||||
setActiveConfidenceModeButton();
|
||||
}
|
||||
);
|
||||
|
||||
//keytips
|
||||
$(".pageSettings .section.keyTips .buttons .button.on").click((e) => {
|
||||
setKeyTips(true);
|
||||
// showNotification('Key tips on', 1000);
|
||||
setSettingsButton("keyTips", config.showKeyTips);
|
||||
if (config.showKeyTips) {
|
||||
$(".pageSettings .tip").removeClass("hidden");
|
||||
} else {
|
||||
$(".pageSettings .tip").addClass("hidden");
|
||||
}
|
||||
});
|
||||
$(".pageSettings .section.keyTips .buttons .button.off").click((e) => {
|
||||
setKeyTips(false);
|
||||
// showNotification('Key tips off', 1000);
|
||||
setSettingsButton("keyTips", config.showKeyTips);
|
||||
if (config.showKeyTips) {
|
||||
$(".pageSettings .tip").removeClass("hidden");
|
||||
} else {
|
||||
$(".pageSettings .tip").addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
//keytips
|
||||
$(".pageSettings .section.discordDot .buttons .button.on").click((e) => {
|
||||
setDiscordDot(true);
|
||||
setSettingsButton("discordDot", config.showDiscordDot);
|
||||
});
|
||||
$(".pageSettings .section.discordDot .buttons .button.off").click((e) => {
|
||||
setDiscordDot(false);
|
||||
setSettingsButton("discordDot", config.showDiscordDot);
|
||||
});
|
||||
|
||||
//themes
|
||||
// $(document).on("mouseover",".pageSettings .section.themes .theme", (e) => {
|
||||
// let theme = $(e.currentTarget).attr('theme');
|
||||
// previewTheme(theme);
|
||||
// })
|
||||
|
||||
$(document).on("click", ".pageSettings .section.themes .theme", (e) => {
|
||||
let theme = $(e.currentTarget).attr("theme");
|
||||
setTheme(theme);
|
||||
setActiveThemeButton();
|
||||
});
|
||||
|
||||
// $(document).on("mouseleave",".pageSettings .section.themes", (e) => {
|
||||
// setTheme(config.theme);
|
||||
// })
|
||||
|
||||
//languages
|
||||
$(document).on("click", ".pageSettings .section.languages .language", (e) => {
|
||||
let language = $(e.currentTarget).attr("language");
|
||||
changeLanguage(language);
|
||||
// showNotification('Language changed', 1000);
|
||||
restartTest();
|
||||
setActiveLanguageButton();
|
||||
});
|
||||
|
||||
//layouts
|
||||
$(document).on("click", ".pageSettings .section.layouts .layout", (e) => {
|
||||
console.log("clicked");
|
||||
let layout = $(e.currentTarget).attr("layout");
|
||||
changeLayout(layout);
|
||||
// showNotification('Layout changed', 1000);
|
||||
restartTest();
|
||||
setActiveLayoutButton();
|
||||
});
|
||||
|
||||
//fontsize
|
||||
$(document).on("click", ".pageSettings .section.fontSize .button", (e) => {
|
||||
let fontSize = $(e.currentTarget).attr("fontsize");
|
||||
changeFontSize(fontSize);
|
||||
// showNotification('Font size changed', 1000);
|
||||
setActiveFontSizeButton();
|
||||
});
|
||||
|
||||
//difficulty
|
||||
$(document).on("click", ".pageSettings .section.difficulty .button", (e) => {
|
||||
let difficulty = $(e.currentTarget).attr("difficulty");
|
||||
setDifficulty(difficulty);
|
||||
// showNotification('Difficulty changed', 1000);
|
||||
setActiveDifficultyButton();
|
||||
});
|
||||
|
||||
//caret style
|
||||
$(document).on("click", ".pageSettings .section.caretStyle .button", (e) => {
|
||||
let caretStyle = $(e.currentTarget).attr("caret");
|
||||
setCaretStyle(caretStyle);
|
||||
// showNotification('Caret style updated', 1000);
|
||||
setActiveCaretStyleButton();
|
||||
});
|
||||
|
||||
//timer style
|
||||
$(document).on("click", ".pageSettings .section.timerStyle .button", (e) => {
|
||||
let timerStyle = $(e.currentTarget).attr("timer");
|
||||
setTimerStyle(timerStyle);
|
||||
// showNotification('Timer style updated', 1000);
|
||||
setActiveTimerStyleButton();
|
||||
});
|
||||
|
||||
//timer color
|
||||
$(document).on("click", ".pageSettings .section.timerColor .button", (e) => {
|
||||
let color = $(e.currentTarget).attr("color");
|
||||
setTimerColor(color);
|
||||
// showNotification('Timer style updated', 1000);
|
||||
setActiveTimerColorButton();
|
||||
});
|
||||
|
||||
//timer opacity
|
||||
$(document).on("click", ".pageSettings .section.timerOpacity .button", (e) => {
|
||||
let opacity = $(e.currentTarget).attr("opacity");
|
||||
setTimerOpacity(opacity);
|
||||
// showNotification('Timer style updated', 1000);
|
||||
setActiveTimerOpacityButton();
|
||||
});
|
||||
|
||||
//blind mode
|
||||
$(".pageSettings .section.blindMode .buttons .button.on").click((e) => {
|
||||
setBlindMode(true);
|
||||
// showNotification('Blind mode on', 1000);
|
||||
setSettingsButton("blindMode", config.blindMode);
|
||||
});
|
||||
$(".pageSettings .section.blindMode .buttons .button.off").click((e) => {
|
||||
setBlindMode(false);
|
||||
// showNotification('Blind mode off', 1000);
|
||||
setSettingsButton("blindMode", config.blindMode);
|
||||
});
|
||||
|
||||
//blind mode
|
||||
$(".pageSettings .section.quickEnd .buttons .button.on").click((e) => {
|
||||
setQuickEnd(true);
|
||||
// showNotification('Quick end on', 1000);
|
||||
setSettingsButton("quickEnd", config.quickEnd);
|
||||
});
|
||||
$(".pageSettings .section.quickEnd .buttons .button.off").click((e) => {
|
||||
setQuickEnd(false);
|
||||
// showNotification('Quick end off', 1000);
|
||||
setSettingsButton("quickEnd", config.quickEnd);
|
||||
});
|
||||
|
||||
//flip test
|
||||
$(".pageSettings .section.flipTestColors .buttons .button.on").click((e) => {
|
||||
setFlipTestColors(true);
|
||||
// showNotification('Flip test colors on', 1000);
|
||||
setSettingsButton("flipTestColors", config.flipTestColors);
|
||||
});
|
||||
$(".pageSettings .section.flipTestColors .buttons .button.off").click((e) => {
|
||||
setFlipTestColors(false);
|
||||
// showNotification('Flip test colors off', 1000);
|
||||
setSettingsButton("flipTestColors", config.flipTestColors);
|
||||
});
|
||||
|
||||
//extra color
|
||||
$(".pageSettings .section.colorfulMode .buttons .button.on").click((e) => {
|
||||
setColorfulMode(true);
|
||||
// showNotification('Colorful mode on', 1000);
|
||||
setSettingsButton("colorfulMode", config.colorfulMode);
|
||||
});
|
||||
$(".pageSettings .section.colorfulMode .buttons .button.off").click((e) => {
|
||||
setColorfulMode(false);
|
||||
// showNotification('Colorful mode off', 1000);
|
||||
setSettingsButton("colorfulMode", config.colorfulMode);
|
||||
});
|
||||
|
||||
//extra color
|
||||
$(".pageSettings .section.randomTheme .buttons .button.on").click((e) => {
|
||||
setRandomTheme(true);
|
||||
// showNotification('Colorful mode on', 1000);
|
||||
setSettingsButton("randomTheme", config.randomTheme);
|
||||
});
|
||||
$(".pageSettings .section.randomTheme .buttons .button.off").click((e) => {
|
||||
setRandomTheme(false);
|
||||
// showNotification('Colorful mode off', 1000);
|
||||
setSettingsButton("randomTheme", config.randomTheme);
|
||||
});
|
||||
|
||||
//stop on error
|
||||
$(".pageSettings .section.stopOnError .buttons .button.on").click((e) => {
|
||||
setStopOnError(true);
|
||||
setSettingsButton("stopOnError", config.stopOnError);
|
||||
});
|
||||
$(".pageSettings .section.stopOnError .buttons .button.off").click((e) => {
|
||||
setStopOnError(false);
|
||||
setSettingsButton("stopOnError", config.stopOnError);
|
||||
});
|
||||
|
||||
//showAllLines
|
||||
$(".pageSettings .section.showAllLines .buttons .button.on").click((e) => {
|
||||
setShowAllLines(true);
|
||||
setSettingsButton("showAllLines", config.showAllLines);
|
||||
});
|
||||
$(".pageSettings .section.showAllLines .buttons .button.off").click((e) => {
|
||||
setShowAllLines(false);
|
||||
setSettingsButton("showAllLines", config.showAllLines);
|
||||
});
|
||||
|
||||
//discord
|
||||
$(
|
||||
".pageSettings .section.discordIntegration .buttons .generateCodeButton"
|
||||
|
|
@ -842,13 +507,6 @@ $(document).on("click", ".pageSettings .section.funbox .button", (e) => {
|
|||
setActiveFunboxButton();
|
||||
});
|
||||
|
||||
//fontfamily
|
||||
$(document).on("click", ".pageSettings .section.fontFamily .button", (e) => {
|
||||
let font = $(e.currentTarget).attr("fontFamily");
|
||||
setFontFamily(font);
|
||||
setActiveFontFamilyButton();
|
||||
});
|
||||
|
||||
//tags
|
||||
$(document).on(
|
||||
"click",
|
||||
|
|
@ -856,13 +514,6 @@ $(document).on(
|
|||
(e) => {
|
||||
let target = e.currentTarget;
|
||||
let tagid = $(target).parent(".tag").attr("id");
|
||||
// if($(target).attr('active') === 'true'){
|
||||
// $(target).attr('active','false');
|
||||
// $(target).html('<i class="fas fa-square"></i>')
|
||||
// }else{
|
||||
// $(target).attr('active','true');
|
||||
// $(target).html('<i class="fas fa-check-square"></i>')
|
||||
// }
|
||||
toggleTag(tagid);
|
||||
showActiveTags();
|
||||
}
|
||||
|
|
@ -913,8 +564,6 @@ $(".tab").click((e) => {
|
|||
if ($target.attr("tab") == "preset") {
|
||||
setCustomTheme(false);
|
||||
applyCustomThemeColors();
|
||||
// $('[tabContent="custom"]').removeClass("reveal");
|
||||
// $('[tabContent="preset"]').addClass("reveal");
|
||||
swapElements(
|
||||
$('.pageSettings [tabContent="custom"]'),
|
||||
$('.pageSettings [tabContent="preset"]'),
|
||||
|
|
@ -928,9 +577,6 @@ $(".tab").click((e) => {
|
|||
$('.pageSettings [tabContent="custom"]'),
|
||||
250
|
||||
);
|
||||
|
||||
// $('[tabContent="preset"]').removeClass("reveal");
|
||||
// $('[tabContent="custom"]').addClass("reveal");
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -942,12 +588,6 @@ $("[type='color']").on("input", (e) => {
|
|||
document.documentElement.style.setProperty($colorVar, $pickedColor);
|
||||
$("#" + $colorVar).attr("value", $pickedColor);
|
||||
$("[for=" + $colorVar + "]").text($pickedColor);
|
||||
|
||||
// config.customThemeColors[colorVars.indexOf($colorVar)] = $pickedColor
|
||||
});
|
||||
|
||||
$(".colorPicker").on("change", (e) => {
|
||||
// Save a color once picked
|
||||
});
|
||||
|
||||
$(".pageSettings .saveCustomThemeButton").click((e) => {
|
||||
|
|
@ -968,9 +608,6 @@ $(".pageSettings .sectionGroupTitle").click((e) => {
|
|||
.stop(true, true)
|
||||
.slideToggle(250)
|
||||
.toggleClass("slideup");
|
||||
// $(`.pageSettings .sectionGroupTitle[group=${group}] .fas`).toggleClass(
|
||||
// "rotate"
|
||||
// );
|
||||
if ($(`.pageSettings .settingsGroup.${group}`).hasClass("slideup")) {
|
||||
$(`.pageSettings .sectionGroupTitle[group=${group}] .fas`)
|
||||
.stop(true, true)
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ let defaultConfig = {
|
|||
],
|
||||
showKeyTips: true,
|
||||
showLiveWpm: false,
|
||||
showTimerBar: true,
|
||||
showTimerProgress: true,
|
||||
smoothCaret: true,
|
||||
quickTab: false,
|
||||
punctuation: false,
|
||||
|
|
@ -31,7 +31,6 @@ let defaultConfig = {
|
|||
caretStyle: "default",
|
||||
flipTestColors: false,
|
||||
layout: "default",
|
||||
showDiscordDot: true,
|
||||
confidenceMode: "off",
|
||||
timerStyle: "bar",
|
||||
colorfulMode: true,
|
||||
|
|
@ -134,7 +133,6 @@ function applyConfig(configObj) {
|
|||
setBlindMode(configObj.blindMode, true);
|
||||
setQuickEnd(configObj.quickEnd, true);
|
||||
setFlipTestColors(configObj.flipTestColors, true);
|
||||
setDiscordDot(configObj.hideDiscordDot, true);
|
||||
setColorfulMode(configObj.colorfulMode, true);
|
||||
setConfidenceMode(configObj.confidenceMode, true);
|
||||
setTimerStyle(configObj.timerStyle, true);
|
||||
|
|
@ -144,6 +142,8 @@ function applyConfig(configObj) {
|
|||
changeKeymapLayout(configObj.keymapLayout, true);
|
||||
setFontFamily(configObj.fontFamily, true);
|
||||
setSmoothLineScroll(configObj.smoothLineScroll, true);
|
||||
setShowLiveWpm(configObj.showLiveWpm, true);
|
||||
setShowTimerProgress(configObj.showTimerProgress, true);
|
||||
if (
|
||||
configObj.resultFilters == null ||
|
||||
configObj.resultFilters == undefined
|
||||
|
|
@ -192,34 +192,6 @@ function setDifficulty(diff, nosave) {
|
|||
if (!nosave) saveConfigToCookie();
|
||||
}
|
||||
|
||||
//blind mode
|
||||
function toggleDiscordDot() {
|
||||
dot = !config.showDiscordDot;
|
||||
if (dot == undefined) {
|
||||
dot = false;
|
||||
}
|
||||
config.showDiscordDot = dot;
|
||||
if (!dot) {
|
||||
$("#menu .discord").addClass("dotHidden");
|
||||
} else {
|
||||
$("#menu .discord").removeClass("dotHidden");
|
||||
}
|
||||
saveConfigToCookie();
|
||||
}
|
||||
|
||||
function setDiscordDot(dot, nosave) {
|
||||
if (dot == undefined) {
|
||||
dot = false;
|
||||
}
|
||||
config.showDiscordDot = dot;
|
||||
if (!dot) {
|
||||
$("#menu .discord").addClass("dotHidden");
|
||||
} else {
|
||||
$("#menu .discord").removeClass("dotHidden");
|
||||
}
|
||||
if (!nosave) saveConfigToCookie();
|
||||
}
|
||||
|
||||
//blind mode
|
||||
function toggleBlindMode() {
|
||||
blind = !config.blindMode;
|
||||
|
|
@ -352,6 +324,38 @@ function setCaretStyle(caretStyle, nosave) {
|
|||
if (!nosave) saveConfigToCookie();
|
||||
}
|
||||
|
||||
function setShowTimerProgress(timer, nosave) {
|
||||
if (timer == null || timer == undefined) {
|
||||
timer = false;
|
||||
}
|
||||
config.showTimerProgress = timer;
|
||||
if (!nosave) saveConfigToCookie();
|
||||
}
|
||||
|
||||
function toggleShowTimerProgress() {
|
||||
config.showTimerProgress = !config.showTimerProgress;
|
||||
saveConfigToCookie();
|
||||
}
|
||||
|
||||
function setShowLiveWpm(live, nosave) {
|
||||
if (live == null || live == undefined) {
|
||||
live = false;
|
||||
}
|
||||
config.showLiveWpm = live;
|
||||
if (config.keymapMode !== "off") {
|
||||
config.keymapMode = "off";
|
||||
}
|
||||
if (!nosave) saveConfigToCookie();
|
||||
}
|
||||
|
||||
function toggleShowLiveWpm() {
|
||||
config.showLiveWpm = !config.showLiveWpm;
|
||||
if (config.keymapMode !== "off") {
|
||||
config.keymapMode = "off";
|
||||
}
|
||||
saveConfigToCookie();
|
||||
}
|
||||
|
||||
function setTimerStyle(style, nosave) {
|
||||
if (style == null || style == undefined) {
|
||||
style = "bar";
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue