mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-22 00:06:16 +08:00
585 lines
16 KiB
JavaScript
585 lines
16 KiB
JavaScript
let defaultConfig = {
|
|
theme: 'serika_dark',
|
|
customTheme: 'false',
|
|
customThemeColors: ['#323437','#e2b714','#e2b714','#646669','#d1d0c5','#ca4754','#7e2a33','#ca4754','#7e2a33'],
|
|
showKeyTips: true,
|
|
showLiveWpm: false,
|
|
showTimerBar: true,
|
|
smoothCaret: true,
|
|
quickTab: false,
|
|
punctuation: false,
|
|
words: 50,
|
|
time: 60,
|
|
mode: "time",
|
|
language: "english",
|
|
fontSize: 1,
|
|
freedomMode: false,
|
|
resultFilters: ["all"],
|
|
difficulty: "normal",
|
|
blindMode: false,
|
|
quickEnd: false,
|
|
caretStyle: "default",
|
|
flipTestColors: false,
|
|
layout:"default",
|
|
showDiscordDot: true,
|
|
maxConfidence: false,
|
|
timerStyle: "bar",
|
|
colorfulMode: true
|
|
}
|
|
|
|
let cookieConfig = null;
|
|
|
|
let config = defaultConfig;
|
|
|
|
//cookies
|
|
function saveConfigToCookie() {
|
|
let d = new Date();
|
|
d.setFullYear(d.getFullYear() + 1);
|
|
$.cookie("config", null);
|
|
$.cookie("config", JSON.stringify(config), {
|
|
expires: d,
|
|
path: '/'
|
|
});
|
|
restartCount = 0;
|
|
saveConfigToDB();
|
|
}
|
|
|
|
function saveConfigToDB(){
|
|
if(firebase.auth().currentUser !== null){
|
|
// showNotification('saving config to db',1000);
|
|
accountIconLoading(true);
|
|
saveConfig({uid:firebase.auth().currentUser.uid,obj:config}).then(d => {
|
|
accountIconLoading(false);
|
|
if(d.data === 1){
|
|
// showNotification('config saved to db',1000);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
function saveActiveTagsToCookie(){
|
|
|
|
let tags = [];
|
|
|
|
try{
|
|
dbSnapshot.tags.forEach(tag => {
|
|
if(tag.active === true){
|
|
tags.push(tag.id);
|
|
}
|
|
})
|
|
let d = new Date();
|
|
d.setFullYear(d.getFullYear() + 1);
|
|
$.cookie("activeTags", null);
|
|
$.cookie("activeTags", JSON.stringify(tags), {
|
|
expires: d,
|
|
path: '/'
|
|
});
|
|
}catch(e){
|
|
|
|
}
|
|
}
|
|
|
|
function loadConfigFromCookie() {
|
|
let newConfig = $.cookie('config');
|
|
if(newConfig !== undefined){
|
|
newConfig = JSON.parse(newConfig);
|
|
|
|
applyConfig(newConfig);
|
|
cookieConfig = newConfig;
|
|
saveConfigToCookie();
|
|
}
|
|
}
|
|
|
|
|
|
function applyConfig(configObj){
|
|
if (configObj && configObj != null && configObj != "null") {
|
|
setTheme(configObj.theme,true);
|
|
setCustomTheme(configObj.customTheme,true);
|
|
setCustomThemeColors(configObj.customThemeColors,true);
|
|
setQuickTabMode(configObj.quickTab,true);
|
|
setPunctuation(configObj.punctuation,true);
|
|
setKeyTips(configObj.showKeyTips,true);
|
|
changeTimeConfig(configObj.time,true);
|
|
changeWordCount(configObj.words,true);
|
|
changeMode(configObj.mode,true);
|
|
changeLanguage(configObj.language,true);
|
|
changeLayout(configObj.layout, true);
|
|
changeFontSize(configObj.fontSize,true);
|
|
setFreedomMode(configObj.freedomMode,true);
|
|
setCaretStyle(configObj.caretStyle,true);
|
|
setDifficulty(configObj.difficulty,true);
|
|
setBlindMode(configObj.blindMode,true);
|
|
setQuickEnd(configObj.quickEnd,true);
|
|
setFlipTestColors(configObj.flipTestColors,true);
|
|
setDiscordDot(configObj.hideDiscordDot,true);
|
|
setColorfulMode(configObj.colorfulMode,true);
|
|
setMaxConfidence(configObj.maxConfidence,true);
|
|
setTimerStyle(configObj.timerStyle,true);
|
|
if(configObj.resultFilters == null || configObj.resultFilters == undefined){
|
|
configObj.resultFilters = ["all"];
|
|
}
|
|
config = configObj;
|
|
}
|
|
Object.keys(defaultConfig).forEach(configKey => {
|
|
if(config[configKey] == undefined){
|
|
config[configKey] = defaultConfig[configKey];
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
function loadActiveTagsFromCookie(){
|
|
let newTags = $.cookie('activeTags');
|
|
if(newTags !== undefined){
|
|
newTags = JSON.parse(newTags);
|
|
newTags.forEach(ntag => {
|
|
toggleTag(ntag, true);
|
|
})
|
|
saveActiveTagsToCookie();
|
|
}
|
|
}
|
|
|
|
function showTestConfig() {
|
|
$("#top .config").removeClass('hidden').css("opacity",1);
|
|
}
|
|
|
|
function hideTestConfig() {
|
|
$("#top .config").css("opacity",0).addClass('hidden');
|
|
}
|
|
|
|
//difficulty
|
|
function setDifficulty(diff, nosave){
|
|
if((diff !== "normal" && diff !== "expert" && diff !== "master") || diff == undefined){
|
|
diff = "normal";
|
|
}
|
|
config.difficulty = diff;
|
|
restartTest();
|
|
updateTestModesNotice();
|
|
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;
|
|
if(blind == undefined){
|
|
blind = false;
|
|
}
|
|
config.blindMode = blind;
|
|
updateTestModesNotice();
|
|
saveConfigToCookie();
|
|
}
|
|
|
|
function setBlindMode(blind, nosave){
|
|
if(blind == undefined){
|
|
blind = false;
|
|
}
|
|
config.blindMode = blind;
|
|
updateTestModesNotice();
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
//quickend
|
|
function toggleQuickEnd(){
|
|
qe = !config.quickEnd;
|
|
if(qe == undefined){
|
|
qe = false;
|
|
}
|
|
config.quickEnd = qe;
|
|
saveConfigToCookie();
|
|
}
|
|
|
|
function setQuickEnd(qe, nosave){
|
|
if(qe == undefined){
|
|
qe = false;
|
|
}
|
|
config.quickEnd = qe;
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
|
|
//flip colors
|
|
function setFlipTestColors(flip,nosave){
|
|
if(flip == undefined){
|
|
flip = false;
|
|
}
|
|
config.flipTestColors = flip;
|
|
flipTestColors(flip);
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function toggleFlipTestColors(){
|
|
config.flipTestColors = !config.flipTestColors;
|
|
flipTestColors(config.flipTestColors);
|
|
saveConfigToCookie();
|
|
}
|
|
|
|
//extra color
|
|
function setColorfulMode(extra,nosave){
|
|
if(extra == undefined){
|
|
extra = false;
|
|
}
|
|
config.colorfulMode = extra;
|
|
applyColorfulMode(extra);
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function toggleColorfulMode(){
|
|
config.colorfulMode = !config.colorfulMode;
|
|
applyColorfulMode(config.colorfulMode);
|
|
saveConfigToCookie();
|
|
}
|
|
|
|
function setCaretStyle(caretStyle, nosave) {
|
|
if (caretStyle == null || caretStyle == undefined) {
|
|
caretStyle = 'default';
|
|
}
|
|
config.caretStyle = caretStyle;
|
|
$("#caret").removeClass('default');
|
|
$("#caret").removeClass('underline');
|
|
$("#caret").removeClass('outline');
|
|
$("#caret").removeClass('block');
|
|
|
|
if (caretStyle == 'default') {
|
|
$("#caret").addClass('default');
|
|
} else if (caretStyle == 'block') {
|
|
$("#caret").addClass('block');
|
|
} else if (caretStyle == 'outline') {
|
|
$("#caret").addClass('outline');
|
|
} else if (caretStyle == 'underline') {
|
|
$("#caret").addClass('underline');
|
|
}
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
|
|
function setTimerStyle(style, nosave) {
|
|
if (style == null || style == undefined) {
|
|
style = 'bar';
|
|
}
|
|
config.timerStyle = style;
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
//key tips
|
|
function setKeyTips(keyTips, nosave) {
|
|
config.showKeyTips = keyTips;
|
|
if (config.showKeyTips) {
|
|
$("#bottom .keyTips").removeClass("hidden");
|
|
} else {
|
|
$("#bottom .keyTips").addClass("hidden");
|
|
}
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function toggleKeyTips() {
|
|
config.showKeyTips = !config.showKeyTips;
|
|
if (config.showKeyTips) {
|
|
$("#bottom .keyTips").removeClass("hidden");
|
|
} else {
|
|
$("#bottom .keyTips").addClass("hidden");
|
|
}
|
|
saveConfigToCookie();
|
|
}
|
|
|
|
//mode
|
|
function changeTimeConfig(time, nosave) {
|
|
time = parseInt(time);
|
|
changeMode("time",nosave);
|
|
config.time = time;
|
|
$("#top .config .time .button").removeClass("active");
|
|
if(![15,30,60,120].includes(time)){
|
|
time = "custom";
|
|
}
|
|
$("#top .config .time .button[timeConfig='" + time + "']").addClass("active");
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function changeWordCount(wordCount, nosave) {
|
|
wordCount = parseInt(wordCount);
|
|
changeMode("words", nosave);
|
|
config.words = wordCount;
|
|
$("#top .config .wordCount .button").removeClass("active");
|
|
if(![10,25,50,100,200].includes(wordCount)){
|
|
wordCount = "custom";
|
|
}
|
|
$("#top .config .wordCount .button[wordCount='" + wordCount + "']").addClass(
|
|
"active"
|
|
);
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
//caret
|
|
function setSmoothCaret(mode,nosave) {
|
|
config.smoothCaret = mode;
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function toggleSmoothCaret() {
|
|
config.smoothCaret = !config.smoothCaret;
|
|
saveConfigToCookie();
|
|
}
|
|
|
|
//quick tab
|
|
function setQuickTabMode(mode, nosave) {
|
|
config.quickTab = mode;
|
|
if (!config.quickTab) {
|
|
// $(".pageTest").append('<div id="restartTestButton" class="" tabindex="0"><i class="fas fa-redo-alt"></i></div>');
|
|
$("#restartTestButton").removeClass('hidden');
|
|
$("#restartTestButton").css("opacity", 1);
|
|
$("#bottom .keyTips").html(`<key>tab</key> and <key>enter</key> / <key>space</key> - restart test<br>
|
|
<key>esc</key> - command line`);
|
|
|
|
} else {
|
|
// $("#restartTestButton").remove();
|
|
$("#restartTestButton").addClass('hidden');
|
|
$("#bottom .keyTips").html(`<key>tab</key> - restart test<br>
|
|
<key>esc</key> - command line`);
|
|
}
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function toggleQuickTabMode() {
|
|
config.quickTab = !config.quickTab;
|
|
if (!config.quickTab) {
|
|
// $(".pageTest").append('<div id="restartTestButton" class="" tabindex="0"><i class="fas fa-redo-alt"></i></div>');
|
|
$("#restartTestButton").removeClass('hidden');
|
|
$("#restartTestButton").css("opacity", 1);
|
|
$("#bottom .keyTips").html(`<key>tab</key> and <key>enter</key> / <key>space</key> - restart test<br>
|
|
<key>esc</key> - command line`);
|
|
|
|
} else {
|
|
// $("#restartTestButton").remove();
|
|
$("#restartTestButton").addClass('hidden');
|
|
$("#bottom .keyTips").html(`<key>tab</key> - restart test<br>
|
|
<key>esc</key> - command line`);
|
|
}
|
|
saveConfigToCookie();
|
|
}
|
|
|
|
//punctuation
|
|
function setPunctuation(punc, nosave) {
|
|
config.punctuation = punc;
|
|
if (!config.punctuation) {
|
|
$("#top .config .punctuationMode .button").removeClass("active");
|
|
} else {
|
|
$("#top .config .punctuationMode .button").addClass("active");
|
|
}
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function togglePunctuation() {
|
|
if (config.punctuation) {
|
|
$("#top .config .punctuationMode .button").removeClass("active");
|
|
} else {
|
|
$("#top .config .punctuationMode .button").addClass("active");
|
|
}
|
|
config.punctuation = !config.punctuation;
|
|
saveConfigToCookie();
|
|
}
|
|
|
|
//freedom
|
|
function setFreedomMode(freedom, nosave) {
|
|
if(freedom === null){
|
|
freedom = false;
|
|
}
|
|
config.freedomMode = freedom;
|
|
if(config.freedomMode && config.maxConfidence){
|
|
config.maxConfidence = false;
|
|
}
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function toggleFreedomMode() {
|
|
config.freedomMode = !config.freedomMode;
|
|
if(config.freedomMode && config.maxConfidence){
|
|
config.maxConfidence = false;
|
|
}
|
|
saveConfigToCookie();
|
|
}
|
|
|
|
//max confidence
|
|
function toggleMaxConfidence(){
|
|
// console.log(config.maxConfidence)
|
|
mc = !config.maxConfidence;
|
|
if(mc == undefined){
|
|
mc = false;
|
|
}
|
|
config.maxConfidence = mc;
|
|
if(config.freedomMode && config.maxConfidence){
|
|
config.freedomMode = false;
|
|
}
|
|
// console.log(config.maxConfidence);
|
|
saveConfigToCookie();
|
|
}
|
|
|
|
function setMaxConfidence(mc, nosave){
|
|
if(mc == undefined){
|
|
mc = false;
|
|
}
|
|
config.maxConfidence = mc;
|
|
if(config.freedomMode && config.maxConfidence){
|
|
config.freedomMode = false;
|
|
}
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function previewTheme(name) {
|
|
$("#currentTheme").attr("href", `themes/${name}.css`);
|
|
}
|
|
|
|
function setTheme(name,nosave) {
|
|
config.theme = name;
|
|
$("#currentTheme").attr("href", `themes/${name}.css`);
|
|
setTimeout(() => {
|
|
updateFavicon(32,14);
|
|
}, 500);
|
|
try{
|
|
firebase.analytics().logEvent('changedTheme', {
|
|
theme: name
|
|
});
|
|
}catch(e){
|
|
console.log("Analytics unavailable");
|
|
}
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function setCustomTheme(boolean) {
|
|
config.customTheme = boolean;
|
|
setCustomThemeColors(config.customThemeColors);
|
|
}
|
|
|
|
function setCustomThemeColors(array, nosave) {
|
|
array = config.customThemeColors;
|
|
|
|
if(config.customTheme === true) {
|
|
colorVars.forEach((e, index) => {
|
|
document.documentElement.style.setProperty(e, array[index])
|
|
});
|
|
} else {
|
|
colorVars.forEach(e => {
|
|
document.documentElement.style.setProperty(e, '')
|
|
})
|
|
}
|
|
|
|
setTimeout(() => {
|
|
updateFavicon(32,14);
|
|
}, 500);
|
|
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function updateFavicon(size, curveSize) {
|
|
let maincolor, bgcolor;
|
|
|
|
bgcolor = getComputedStyle(document.body).getPropertyValue('--bg-color').replace(' ','');
|
|
maincolor = getComputedStyle(document.body).getPropertyValue('--main-color').replace(' ','');
|
|
|
|
if (bgcolor == maincolor) {
|
|
bgcolor = "#111";
|
|
maincolor = "#eee";
|
|
}
|
|
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
let ctx = canvas.getContext('2d');
|
|
ctx.beginPath();
|
|
ctx.moveTo(0,curveSize);
|
|
//top left
|
|
ctx.quadraticCurveTo(0, 0, curveSize, 0);
|
|
ctx.lineTo(size-curveSize,0);
|
|
//top right
|
|
ctx.quadraticCurveTo(size, 0, size, curveSize);
|
|
ctx.lineTo(size,size-curveSize);
|
|
ctx.quadraticCurveTo(size, size, size-curveSize, size);
|
|
ctx.lineTo(curveSize,size);
|
|
ctx.quadraticCurveTo(0, size, 0, size - curveSize);
|
|
ctx.fillStyle = bgcolor;
|
|
ctx.fill();
|
|
ctx.font = "900 "+ size/2*1.2 + "px Roboto Mono";
|
|
ctx.textAlign = "center";
|
|
ctx.fillStyle = maincolor;
|
|
ctx.fillText("mt", size/2+(size/32), size/3*2.1);
|
|
// document.body.appendChild(canvas);
|
|
$("#favicon").attr('href',canvas.toDataURL('image/png'));
|
|
}
|
|
|
|
function changeLanguage(language, nosave) {
|
|
if (language == null || language == undefined) {
|
|
language = "english";
|
|
}
|
|
config.language = language;
|
|
try{
|
|
firebase.analytics().logEvent('changedLanguage', {
|
|
language: language
|
|
});
|
|
}catch(e){
|
|
console.log("Analytics unavailable");
|
|
}
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function changeLayout(layout, nosave){
|
|
if (layout == null || layout == undefined){
|
|
layout = "qwerty"
|
|
}
|
|
config.layout = layout;
|
|
if(!nosave) saveConfigToCookie();
|
|
}
|
|
|
|
function changeFontSize(fontSize, nosave) {
|
|
if (fontSize == null || fontSize == undefined) {
|
|
fontSize = 1;
|
|
}
|
|
// $("#words").stop(true, true).animate({ opacity: 0 }, 125, e => {
|
|
config.fontSize = fontSize;
|
|
$("#words").removeClass('size125');
|
|
$("#caret").removeClass('size125');
|
|
$("#words").removeClass('size15');
|
|
$("#caret").removeClass('size15');
|
|
$("#words").removeClass('size2');
|
|
$("#caret").removeClass('size2');
|
|
|
|
if (fontSize == 125) {
|
|
$("#words").addClass('size125');
|
|
$("#caret").addClass('size125');
|
|
} else if (fontSize == 15) {
|
|
$("#words").addClass('size15');
|
|
$("#caret").addClass('size15');
|
|
} else if (fontSize == 2) {
|
|
$("#words").addClass('size2');
|
|
$("#caret").addClass('size2');
|
|
}
|
|
if(!nosave) saveConfigToCookie();
|
|
// restartTest();
|
|
// });
|
|
}
|