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

reworked the notification system

Browse source
This commit is contained in:
Miodec 2021-01-16 01:12:36 +00:00
parent c5011067bf
commit d2f6a01887
14 changed files with 391 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
functions/index.js
View file

@ -1477,12 +1477,12 @@ exports.addTag = functions.https.onCall((request, response) => {
console.error(
`error while creating tag for user ${request.uid}: ${e.message}`
);
return { resultCode: -999 };
return { resultCode: -999, message: e.message };
});
}
} catch (e) {
console.error(`error adding tag for ${request.uid} - ${e}`);
return { resultCode: -999 };
return { resultCode: -999, message: e.message };
}
});
@ -1507,12 +1507,12 @@ exports.editTag = functions.https.onCall((request, response) => {
console.error(
`error while updating tag for user ${request.uid}: ${e.message}`
);
return { resultCode: -999 };
return { resultCode: -999, message: e.message };
});
}
} catch (e) {
console.error(`error updating tag for ${request.uid} - ${e}`);
return { resultCode: -999 };
return { resultCode: -999, message: e.message };
}
});
@ -1573,7 +1573,7 @@ exports.updateResultTags = functions.https.onCall((request, response) => {
}
} catch (e) {
console.error(`error updating tags by ${request.uid} - ${e}`);
return { resultCode: -999 };
return { resultCode: -999, message: e };
}
});

1
gulpfile.js
View file

@ -93,6 +93,7 @@ const refactoredSrc = [
"./src/js/layouts.js",
"./src/js/monkey.js",
"./src/js/result-filters.js",
"./src/js/notification-center.js",
];
//legacy files

74
src/js/account.js
View file

@ -24,7 +24,7 @@ function signIn() {
changePage("test");
})
.catch(function (error) {
Misc.showNotification(error.message, 5000);
Notifications.add(error.message, -1);
$(".pageLogin .preloader").addClass("hidden");
});
});
@ -41,7 +41,7 @@ function signIn() {
changePage("test");
})
.catch(function (error) {
Misc.showNotification(error.message, 5000);
Notifications.add(error.message, -1);
$(".pageLogin .preloader").addClass("hidden");
});
});
@ -59,7 +59,7 @@ function signUp() {
let passwordVerify = $(".pageLogin .register input")[3].value;
if (password != passwordVerify) {
Misc.showNotification("Passwords do not match", 3000);
Notifications.add("Passwords do not match", 0, 3);
$(".pageLogin .preloader").addClass("hidden");
$(".pageLogin .register .button").removeClass("disabled");
return;
@ -67,14 +67,14 @@ function signUp() {
CloudFunctions.namecheck({ name: nname }).then((d) => {
if (d.data.resultCode === -1) {
Misc.showNotification("Name unavailable", 3000);
Notifications.add("Name unavailable", -1);
$(".pageLogin .preloader").addClass("hidden");
$(".pageLogin .register .button").removeClass("disabled");
return;
} else if (d.data.resultCode === -2) {
Misc.showNotification(
Notifications.add(
"Name cannot contain special characters or contain more than 14 characters. Can include _ . and -",
8000
-1
);
$(".pageLogin .preloader").addClass("hidden");
$(".pageLogin .register .button").removeClass("disabled");
@ -106,7 +106,7 @@ function signUp() {
);
usr.sendEmailVerification();
clearGlobalStats();
Misc.showNotification("Account created", 2000);
Notifications.add("Account created", 1, 3);
$("#menu .icon-button.account .text").text(nname);
try {
firebase.analytics().logEvent("accountCreated", usr.uid);
@ -144,15 +144,19 @@ function signUp() {
.delete()
.then(function () {
// User deleted.
Misc.showNotification(
"An error occured. Account not created.",
2000
Notifications.add(
"Account not created. " + error.message,
-1
);
$(".pageLogin .preloader").addClass("hidden");
})
.catch(function (error) {
// An error happened.
$(".pageLogin .preloader").addClass("hidden");
Notifications.add(
"Something went wrong. " + error.message,
-1
);
console.error(error);
});
});
@ -160,15 +164,13 @@ function signUp() {
.catch(function (error) {
// Handle Errors here.
$(".pageLogin .register .button").removeClass("disabled");
var errorMessage = error.message;
Misc.showNotification(errorMessage, 5000);
Notifications.add(error.message, -1);
$(".pageLogin .preloader").addClass("hidden");
});
} else {
console.error(d.data.message);
Misc.showNotification(
Notifications.add(
"Something went wrong when checking name: " + d.data.message,
5000
-1
);
}
});
@ -179,7 +181,7 @@ function signOut() {
.auth()
.signOut()
.then(function () {
Misc.showNotification("Signed out", 2000);
Notifications.add("Signed out", 0, 2);
clearGlobalStats();
hideAccountSettingsSection();
updateAccountLoginButton();
@ -187,7 +189,7 @@ function signOut() {
db_setSnapshot(null);
})
.catch(function (error) {
Misc.showNotification(error.message, 5000);
Notifications.add(error.message, -1);
});
}
@ -227,13 +229,15 @@ firebase.auth().onAuthStateChanged(function (user) {
$(".pageAccount .group.createdDate").text(text);
if (verifyUserWhenLoggedIn !== null) {
Misc.showNotification("Verifying", 1000);
Notifications.add("Verifying", 0, 3);
verifyUserWhenLoggedIn.uid = user.uid;
CloudFunctions.verifyUser(verifyUserWhenLoggedIn).then((data) => {
Misc.showNotification(data.data.message, 3000);
if (data.data.status === 1) {
Notifications.add(data.data.message, 1);
db_getSnapshot().discordId = data.data.did;
updateDiscordSettingsSection();
} else {
Notifications.add(data.data.message, -1);
}
});
}
@ -243,11 +247,11 @@ firebase.auth().onAuthStateChanged(function (user) {
try {
theme = theme.split(",");
config.customThemeColors = theme;
Misc.showNotification("Custom theme applied.", 1000);
Notifications.add("Custom theme applied.", 1);
} catch (e) {
Misc.showNotification(
Notifications.add(
"Something went wrong. Reverting to default custom colors.",
3000
0
);
config.customThemeColors = defaultConfig.customThemeColors;
}
@ -372,9 +376,9 @@ function getAccountDataAndInit() {
.catch((e) => {
accountIconLoading(false);
console.error(e);
Misc.showNotification(
"Error downloading user data. Refresh to try again. If error persists contact Miodec.",
5000
Notifications.add(
"Error downloading user data - refresh to try again. Client likely could not connect to the backend, if error persists contact Miodec.",
-1
);
$("#top #menu .account .icon").html('<i class="fas fa-fw fa-times"></i>');
$("#top #menu .account").css("opacity", 1);
@ -1010,9 +1014,9 @@ function toggleFilter(group, filter) {
ResultFilters.toggleFilter(group, filter);
ResultFilters.save();
} catch (e) {
Misc.showNotification(
Notifications.add(
"Something went wrong toggling filter. Reverting to defaults",
3000
0
);
console.log("toggling filter error");
console.error(e);
@ -1857,9 +1861,9 @@ function refreshAccountPage() {
filteredResults.push(result);
} catch (e) {
Misc.showNotification(
Notifications.add(
"Something went wrong when filtering. Resetting filters.",
5000
0
);
console.log(result);
console.error(e);
@ -2212,7 +2216,7 @@ function refreshAccountPage() {
swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250);
}
if (db_getSnapshot() === null) {
Misc.showNotification(`Missing account data. Please refresh.`, 5000);
Notifications.add(`Missing account data. Please refresh.`, -1);
$(".pageAccount .preloader").html("Missing account data. Please refresh.");
} else if (db_getSnapshot().results === undefined) {
db_getUserResults().then((d) => {
@ -2230,7 +2234,7 @@ function refreshAccountPage() {
cont();
} catch (e) {
console.error(e);
Misc.showNotification(`Something went wrong: ${e}`, 5000);
Notifications.add(`Something went wrong: ${e}`, -1);
}
}
}
@ -2332,7 +2336,7 @@ $("#resultEditTagsPanel .confirmButton").click((f) => {
}).then((r) => {
hideBackgroundLoader();
if (r.data.resultCode === 1) {
Misc.showNotification("Tags updated.", 3000);
Notifications.add("Tags updated.", 1, 2);
db_getSnapshot().results.forEach((result) => {
if (result.id === resultid) {
result.tags = newtags;
@ -2383,7 +2387,7 @@ $("#resultEditTagsPanel .confirmButton").click((f) => {
);
}
} else {
Misc.showNotification("Error updating tags", 3000);
Notifications.add("Error updating tags: " + r.data.message, -1);
}
});
});
@ -2431,11 +2435,11 @@ $(".pageLogin #forgotPasswordButton").click((e) => {
.sendPasswordResetEmail(email)
.then(function () {
// Email sent.
Misc.showNotification("Email sent", 2000);
Notifications.add("Email sent", 1, 2);
})
.catch(function (error) {
// An error happened.
Misc.showNotification(error.message, 5000);
Notifications.add(error.message, -1);
});
}
});

6
src/js/commandline.js
View file

@ -880,7 +880,7 @@ let commandsEnableAds = {
display: "off",
exec: () => {
setEnableAds("off");
Misc.showNotification("Don't forget to refresh the page!", 3000);
Notifications.add("Don't forget to refresh the page!", 0);
},
},
{
@ -888,7 +888,7 @@ let commandsEnableAds = {
display: "on",
exec: () => {
setEnableAds("on");
Misc.showNotification("Don't forget to refresh the page!", 3000);
Notifications.add("Don't forget to refresh the page!", 0);
},
},
{
@ -896,7 +896,7 @@ let commandsEnableAds = {
display: "Sellout",
exec: () => {
setEnableAds("max");
Misc.showNotification("Don't forget to refresh the page!", 3000);
Notifications.add("Don't forget to refresh the page!", 0);
},
},
],

1
src/js/exports.js
View file

@ -7,3 +7,4 @@ global.sendVerificationEmail = Misc.sendVerificationEmail;
//these exports are just for debugging in the browser
global.snapshot = db_getSnapshot;
global.config = config;
global.addnotif = Notifications.add;

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

@ -25,4 +25,5 @@ import * as Misc from "./misc";
import * as CloudFunctions from "./cloud-functions";
import layouts from "./layouts";
import * as Monkey from "./monkey";
import * as Notifications from "./notification-center";
import * as ResultFilters from "./result-filters";

2
src/js/leaderboards.js
View file

@ -217,7 +217,7 @@ function updateLeaderboards() {
}
})
.catch((e) => {
Misc.showNotification("Something went wrong", 3000);
Notifications.add("Something went wrong", -1);
});
}

131
src/js/notification-center.js Normal file
View file

@ -0,0 +1,131 @@
const notificationHistory = [];
let id = 0;
class Notification {
constructor(message, level, duration, customTitle, customIcon) {
this.message = message;
this.level = level;
if (duration == undefined) {
if (level === -1) {
this.duration = 0;
} else {
this.duration = 3000;
}
} else {
this.duration = duration * 1000;
}
this.customTitle = customTitle;
this.customIcon = customIcon;
this.id = id++;
}
//level
//0 - notice
//1 - good
//-1 - bad
show() {
let cls = "notice";
let icon = `<i class="fas fa-fw fa-exclamation"></i>`;
let title = "Notice";
if (this.level === 1) {
cls = "good";
icon = `<i class="fas fa-fw fa-check"></i>`;
title = "Success";
} else if (this.level === -1) {
cls = "bad";
icon = `<i class="fas fa-fw fa-times"></i>`;
title = "Error";
console.error(this.message);
}
if (this.customTitle != undefined) {
title = this.customTitle;
}
if (this.customIcon != undefined) {
icon = `<i class="fas fa-fw fa-${this.customIcon}"></i>`;
}
// moveCurrentToHistory();
let oldHeight = $("#notificationCenter .history").height();
$("#notificationCenter .history").prepend(`
<div class="notif ${cls}" id=${this.id}>
<div class="icon">${icon}</div>
<div class="message"><div class="title">${title}</div>${this.message}</div>
</div>
`);
let newHeight = $("#notificationCenter .history").height();
$(`#notificationCenter .notif[id='${this.id}']`).remove();
$("#notificationCenter .history")
.css("margin-top", 0)
.animate(
{
marginTop: newHeight - oldHeight,
},
125,
() => {
$("#notificationCenter .history").css("margin-top", 0);
$("#notificationCenter .history").prepend(`
<div class="notif ${cls}" id=${this.id}>
<div class="icon">${icon}</div>
<div class="message"><div class="title">${title}</div>${this.message}</div>
</div>
`);
$(`#notificationCenter .notif[id='${this.id}']`)
.css("opacity", 0)
.animate(
{
opacity: 1,
},
125,
() => {
$(`#notificationCenter .notif[id='${this.id}']`).css(
"opacity",
""
);
}
);
$(`#notificationCenter .notif[id='${this.id}']`).click((e) => {
this.hide();
});
}
);
if (this.duration > 0) {
setTimeout(() => {
this.hide();
}, this.duration + 250);
}
$(`#notificationCenter .notif[id='${this.id}']`).hover((e) => {
$(`#notificationCenter .notif[id='${this.id}']`).toggleClass("hover");
});
}
hide() {
$(`#notificationCenter .notif[id='${this.id}']`)
.css("opacity", 1)
.animate(
{
opacity: 0,
},
125,
() => {
$(`#notificationCenter .notif[id='${this.id}']`).animate(
{
height: 0,
},
125,
() => {
$(`#notificationCenter .notif[id='${this.id}']`).remove();
}
);
}
);
}
}
export function add(message, level, duration, customTitle, customIcon) {
notificationHistory.push(
new Notification(message, level, duration, customTitle, customIcon).show()
);
}

197
src/js/script.js
View file

@ -259,7 +259,7 @@ function copyResultToClipboard() {
])
.then((f) => {
$(".notification").removeClass("hidden");
Misc.showNotification("Copied to clipboard", 1000);
Notifications.add("Copied to clipboard", 1, 2);
$(".pageTest .ssWatermark").addClass("hidden");
$(".pageTest .buttons").removeClass("hidden");
if (firebase.auth().currentUser == null)
@ -268,7 +268,10 @@ function copyResultToClipboard() {
.catch((f) => {
open(URL.createObjectURL(blob));
$(".notification").removeClass("hidden");
Misc.showNotification("Error saving image to clipboard", 2000);
Notifications.add(
"Error saving image to clipboard: " + f.message,
-1
);
$(".pageTest .ssWatermark").addClass("hidden");
$(".pageTest .buttons").removeClass("hidden");
if (firebase.auth().currentUser == null)
@ -277,7 +280,10 @@ function copyResultToClipboard() {
} catch (e) {
open(URL.createObjectURL(blob));
$(".notification").removeClass("hidden");
Misc.showNotification("Error saving image to clipboard", 2000);
Notifications.add(
"Error saving image to clipboard: " + e.message,
-1
);
$(".pageTest .ssWatermark").addClass("hidden");
$(".pageTest .buttons").removeClass("hidden");
if (firebase.auth().currentUser == null)
@ -287,7 +293,7 @@ function copyResultToClipboard() {
});
} catch (e) {
$(".notification").removeClass("hidden");
Misc.showNotification("Error creating image", 2000);
Notifications.add("Error creating image: " + e.message, -1);
$(".pageTest .ssWatermark").addClass("hidden");
$(".pageTest .buttons").removeClass("hidden");
if (firebase.auth().currentUser == null)
@ -297,17 +303,17 @@ function copyResultToClipboard() {
async function activateFunbox(funbox, mode) {
if (testActive || resultVisible) {
Misc.showNotification(
Notifications.add(
"You can only change the funbox before starting a test.",
4000
0
);
return false;
}
if (Misc.getCurrentLanguage().ligatures) {
if (funbox == "choo_choo" || funbox == "earthquake") {
Misc.showNotification(
Notifications.add(
"Current language does not support this funbox mode",
3000
0
);
activateFunbox("none", null);
return;
@ -473,20 +479,20 @@ async function initWords() {
quotes.quotes = [];
} catch (e) {
console.error(e);
Misc.showNotification(
Notifications.add(
`No ${config.language.replace(/_\d*k$/g, "")} quotes found`,
3000
0
);
return;
}
},
error: (e) => {
Misc.showNotification(
Notifications.add(
`Error while loading ${config.language.replace(
/_\d*k$/g,
""
)} quotes: ${e}`,
5000
-1
);
return;
},
@ -1000,26 +1006,6 @@ function showWords() {
updateCaretPosition();
}
$("#restartTestButton, #startTestButton").on("click", function () {
if (activeFunBox === "memory") {
memoryFunboxInterval = clearInterval(memoryFunboxInterval);
memoryFunboxTimer = Math.round(Math.pow(wordsList.length, 1.2));
memoryFunboxInterval = setInterval(() => {
memoryFunboxTimer -= 1;
Misc.showNotification(memoryFunboxTimer);
if (memoryFunboxTimer < 0) {
memoryFunboxInterval = clearInterval(memoryFunboxInterval);
memoryFunboxTimer = null;
$("#wordsWrapper").addClass("hidden");
}
}, 1000);
if (config.keymapMode === "next") {
setKeymapMode("react");
}
}
});
(function (history) {
var pushState = history.pushState;
history.pushState = function (state) {
@ -2081,11 +2067,11 @@ function showResult(difficultyFailed = false) {
if (bailout) afkDetected = false;
if (difficultyFailed) {
Misc.showNotification("Test failed", 2000);
Notifications.add("Test failed", 0);
} else if (afkDetected) {
Misc.showNotification("Test invalid - AFK detected", 2000);
Notifications.add("Test invalid - AFK detected", 0);
} else if (sameWordset) {
Misc.showNotification("Test invalid - repeated", 2000);
Notifications.add("Test invalid - repeated", 0);
} else {
let activeTags = [];
let activeTagsIds = [];
@ -2299,35 +2285,35 @@ function showResult(difficultyFailed = false) {
.then((e) => {
accountIconLoading(false);
if (e.data == null) {
Misc.showNotification(
"Unexpected response from the server.",
4000
Notifications.add(
"Unexpected response from the server: " + e.data,
-1
);
return;
}
if (e.data.resultCode === -1) {
Misc.showNotification("Could not save result", 3000);
Notifications.add("Could not save result", -1);
} else if (e.data.resultCode === -2) {
Misc.showNotification(
Notifications.add(
"Possible bot detected. Result not saved.",
4000
-1
);
} else if (e.data.resultCode === -3) {
Misc.showNotification(
Notifications.add(
"Could not verify keypress stats. Result not saved.",
4000
-1
);
} else if (e.data.resultCode === -4) {
Misc.showNotification(
Notifications.add(
"Result data does not make sense. Result not saved.",
4000
-1
);
} else if (e.data.resultCode === -999) {
console.error("internal error: " + e.data.message);
Misc.showNotification(
Notifications.add(
"Internal error. Result might not be saved. " +
e.data.message,
6000
-1
);
} else if (e.data.resultCode === 1 || e.data.resultCode === 2) {
completedEvent.id = e.data.createdId;
@ -2500,7 +2486,7 @@ function showResult(difficultyFailed = false) {
// }).then((d) => {
// if (d.data.returnCode === 1) {
// } else {
// Misc.showNotification(
// Notifications.add(
// `Error saving lb memory ${d.data.message}`,
// 4000
// );
@ -2552,7 +2538,7 @@ function showResult(difficultyFailed = false) {
} else if (e.data.resultCode === 1) {
hideCrown();
// if (localPb) {
// Misc.showNotification(
// Notifications.add(
// "Local PB data is out of sync! Refresh the page to resync it or contact Miodec on Discord.",
// 15000
// );
@ -2562,7 +2548,7 @@ function showResult(difficultyFailed = false) {
})
.catch((e) => {
console.error(e);
Misc.showNotification("Could not save result. " + e, 5000);
Notifications.add("Could not save result. " + e, -1);
});
});
});
@ -2575,7 +2561,7 @@ function showResult(difficultyFailed = false) {
notSignedInLastResult = completedEvent;
}
} else {
Misc.showNotification("Test invalid", 3000);
Notifications.add("Test invalid", 0);
testInvalid = true;
try {
firebase.analytics().logEvent("testCompletedInvalid", completedEvent);
@ -2776,23 +2762,23 @@ function startTest() {
time == Math.floor(config.time / 3) - 3 ||
time == (config.time / 3) * 2 - 3
) {
Misc.showNotification("3", 1000);
Notifications.add("3", 0, 1);
}
if (
time == Math.floor(config.time / 3) - 2 ||
time == Math.floor(config.time / 3) * 2 - 2
) {
Misc.showNotification("2", 1000);
Notifications.add("2", 0, 1);
}
if (
time == Math.floor(config.time / 3) - 1 ||
time == Math.floor(config.time / 3) * 2 - 1
) {
Misc.showNotification("1", 1000);
Notifications.add("1", 0, 1);
}
if (config.layout !== layouts[index] && layouts[index] !== undefined) {
Misc.showNotification(`--- !!! ${layouts[index]} !!! ---`, 3000);
Notifications.add(`--- !!! ${layouts[index]} !!! ---`, 0);
}
setLayout(layouts[index]);
setKeymapLayout(layouts[index]);
@ -2853,9 +2839,10 @@ function restartTest(withSameWordset = false, nosave = false) {
) {
} else {
if (testActive) {
Misc.showNotification(
Notifications.add(
"Restart disabled for long tests. Use your mouse to confirm.",
4000
0,
4
);
return;
}
@ -2863,7 +2850,7 @@ function restartTest(withSameWordset = false, nosave = false) {
}
if (modeBeforePractise !== null && !withSameWordset) {
Misc.showNotification("Reverting to previous settings.", 1500);
Notifications.add("Reverting to previous settings.", 0);
setMode(modeBeforePractise);
setPunctuation(punctuationBeforePractise);
setNumbers(numbersBeforePractise);
@ -2971,6 +2958,28 @@ function restartTest(withSameWordset = false, nosave = false) {
document.querySelector("#liveWpm").innerHTML = "0";
document.querySelector("#liveAcc").innerHTML = "100%";
if (activeFunBox === "memory") {
memoryFunboxInterval = clearInterval(memoryFunboxInterval);
memoryFunboxTimer = Math.round(Math.pow(wordsList.length, 1.2));
memoryFunboxInterval = setInterval(() => {
memoryFunboxTimer -= 1;
Notifications.add(
memoryFunboxTimer == 0 ? "Times up" : memoryFunboxTimer,
0,
1
);
if (memoryFunboxTimer <= 0) {
memoryFunboxInterval = clearInterval(memoryFunboxInterval);
memoryFunboxTimer = null;
$("#wordsWrapper").addClass("hidden");
}
}, 1000);
if (config.keymapMode === "next") {
setKeymapMode("react");
}
}
let mode2 = "";
if (config.mode === "time") {
mode2 = config.time;
@ -3037,10 +3046,7 @@ function setCustomText() {
customText = customText.replace(/ +/gm, " ");
customText = customText.split(" ");
if (customText.length >= 10000) {
Misc.showNotification(
"Custom text cannot be longer than 10000 words.",
4000
);
Notifications.add("Custom text cannot be longer than 10000 words.", 0);
setMode("time");
customText = "The quick brown fox jumped over the lazy dog".split(" ");
}
@ -3122,7 +3128,7 @@ function changePage(page) {
function setMode(mode, nosave) {
if (mode !== "words" && activeFunBox === "memory") {
Misc.showNotification("Memory funbox can only be used with words mode.");
Notifications.add("Memory funbox can only be used with words mode.", 0);
return;
}
@ -3817,7 +3823,7 @@ function tagsEdit() {
hideBackgroundLoader();
let status = e.data.resultCode;
if (status === 1) {
Misc.showNotification("Tag added", 2000);
Notifications.add("Tag added", 1, 2);
db_getSnapshot().tags.push({
name: inputVal,
id: e.data.id,
@ -3826,9 +3832,9 @@ function tagsEdit() {
updateSettingsPage();
updateFilterTags();
} else if (status === -1) {
Misc.showNotification("Invalid tag name", 3000);
Notifications.add("Invalid tag name", 0);
} else if (status < -1) {
Misc.showNotification("Unknown error", 3000);
Notifications.add("Unknown error: " + e.data.message, -1);
}
});
} else if (action === "edit") {
@ -3841,7 +3847,7 @@ function tagsEdit() {
hideBackgroundLoader();
let status = e.data.resultCode;
if (status === 1) {
Misc.showNotification("Tag updated", 2000);
Notifications.add("Tag updated", 1);
db_getSnapshot().tags.forEach((tag) => {
if (tag.id === tagid) {
tag.name = inputVal;
@ -3851,9 +3857,9 @@ function tagsEdit() {
updateSettingsPage();
updateFilterTags();
} else if (status === -1) {
Misc.showNotification("Invalid tag name", 3000);
Notifications.add("Invalid tag name", 0);
} else if (status < -1) {
Misc.showNotification("Unknown error", 3000);
Notifications.add("Unknown error: " + e.data.message, -1);
}
});
} else if (action === "remove") {
@ -3865,7 +3871,7 @@ function tagsEdit() {
hideBackgroundLoader();
let status = e.data.resultCode;
if (status === 1) {
Misc.showNotification("Tag removed", 2000);
Notifications.add("Tag removed", 1);
db_getSnapshot().tags.forEach((tag, index) => {
if (tag.id === tagid) {
db_getSnapshot().tags.splice(index, 1);
@ -3875,7 +3881,7 @@ function tagsEdit() {
updateSettingsPage();
updateFilterTags();
} else if (status < -1) {
Misc.showNotification("Unknown error", 3000);
Notifications.add("Unknown error: " + e.data.message, -1);
}
});
}
@ -4296,15 +4302,16 @@ function applyMode2Popup() {
manualRestart = true;
restartTest();
if (val >= 1800) {
Misc.showNotification("Stay safe and take breaks!", 3000);
Notifications.add("Stay safe and take breaks!", 0);
} else if (val == 0) {
Misc.showNotification(
Notifications.add(
"Infinite time! Make sure to use Bail Out from the command line to save your result.",
5000
0,
7
);
}
} else {
Misc.showNotification("Custom time must be at least 1", 3000);
Notifications.add("Custom time must be at least 1", 0);
}
} else if (mode == "words") {
if (val !== null && !isNaN(val) && val >= 0) {
@ -4312,15 +4319,16 @@ function applyMode2Popup() {
manualRestart = true;
restartTest();
if (val > 2000) {
Misc.showNotification("Stay safe and take breaks!", 3000);
Notifications.add("Stay safe and take breaks!", 0);
} else if (val == 0) {
Misc.showNotification(
Notifications.add(
"Infinite words! Make sure to use Bail Out from the command line to save your result.",
5000
0,
7
);
}
} else {
Misc.showNotification("Custom word amount must be at least 1", 3000);
Notifications.add("Custom word amount must be at least 1", 0);
}
}
@ -4444,7 +4452,7 @@ $(document).on("keypress", "#restartTestButton", (event) => {
if (resultCalculating) return;
restartTest();
} else {
Misc.showNotification("Quick restart disabled for long tests", 2000);
Notifications.add("Quick restart disabled for long tests", 0);
}
}
});
@ -4488,7 +4496,7 @@ $(document).on("keypress", "#practiseMissedWordsButton", (event) => {
if (Object.keys(missedWords).length > 0) {
initPractiseMissedWords();
} else {
Misc.showNotification("You haven't missed any words.", 2000);
Notifications.add("You haven't missed any words.", 0);
}
}
});
@ -4497,7 +4505,7 @@ $(document.body).on("click", "#practiseMissedWordsButton", () => {
if (Object.keys(missedWords).length > 0) {
initPractiseMissedWords();
} else {
Misc.showNotification("You haven't missed any words.", 2000);
Notifications.add("You haven't missed any words.", 0);
}
});
@ -4818,7 +4826,7 @@ function handleTab(event) {
}
restartTest();
} else {
Misc.showNotification("Quick restart disabled for long tests", 2000);
Notifications.add("Quick restart disabled for long tests", 0);
}
} else {
changePage("test");
@ -4915,7 +4923,7 @@ function handleSpace(event, isEnter) {
let outof = wordsList.length;
index = Math.floor((inputHistory.length + 1) / (outof / 3));
if (config.layout !== layouts[index] && layouts[index] !== undefined) {
Misc.showNotification(`--- !!! ${layouts[index]} !!! ---`, 3000);
Notifications.add(`--- !!! ${layouts[index]} !!! ---`, 0);
}
setLayout(layouts[index]);
setKeymapLayout(layouts[index]);
@ -5394,7 +5402,7 @@ if (firebase.app().options.projectId === "monkey-type-dev-67af4") {
if (window.location.hostname === "localhost") {
window.onerror = function (error) {
Misc.showNotification(error, 3000);
Notifications.add(error, -1);
};
$("#top .logo .top").text("localhost");
$("head title").text($("head title").text() + " (localhost)");
@ -5496,9 +5504,10 @@ $(".merchBanner a").click((event) => {
$(".merchBanner .fas").click((event) => {
$(".merchBanner").remove();
Misc.setCookie("merchbannerclosed", true, 365);
Misc.showNotification(
"Won't remind you anymore :) Thanks for continued support <3",
2500
Notifications.add(
"Won't remind you anymore. Thanks for continued support <3",
0,
5
);
});
@ -5507,9 +5516,9 @@ $(".pageTest #copyWordsListButton").click(async (event) => {
await navigator.clipboard.writeText(
wordsList.slice(0, inputHistory.length).join(" ")
);
Misc.showNotification("Copied to clipboard", 1000);
Notifications.add("Copied to clipboard", 0, 2);
} catch (e) {
Misc.showNotification("Could not copy to clipboard: " + e, 5000);
Notifications.add("Could not copy to clipboard: " + e, -1);
}
});
@ -5585,15 +5594,13 @@ async function setupChallenge(challengeName) {
restartTest(false, true);
notitext = challenge.message;
if (notitext === undefined) {
Misc.showNotification(`Challenge '${challengeName}' loaded.`, 3000);
Notifications.add(`Challenge '${challengeName}' loaded.`, 0);
} else {
Misc.showNotification("Challenge loaded. " + notitext, 5000);
Notifications.add("Challenge loaded. " + notitext, 0);
}
} catch (e) {
Misc.showNotification("Something went wrong: " + e, 5000);
console.log(e);
Notifications.add("Something went wrong: " + e, -1);
}
// Misc.showNotification("Challenge loaded", 2000);
}
let ctx = $("#wpmChart");

32
src/js/settings.js
View file

@ -473,9 +473,10 @@ function hideCustomThemeShare() {
$("#customThemeShareWrapper input").val()
);
} catch (e) {
Misc.showNotification(
Notifications.add(
"Something went wrong. Reverting to default custom colors.",
3000
0,
4
);
config.customThemeColors = defaultConfig.customThemeColors;
}
@ -524,12 +525,12 @@ $("#shareCustomThemeButton").click((e) => {
Misc.objectToQueryString({ customTheme: share });
navigator.clipboard.writeText(url).then(
function () {
Misc.showNotification("URL Copied to clipboard", 2000);
Notifications.add("URL Copied to clipboard", 0);
},
function (err) {
Misc.showNotification(
Notifications.add(
"Something went wrong when copying the URL: " + err,
5000
-1
);
}
);
@ -766,7 +767,7 @@ $(
})
.catch((e) => {
hideBackgroundLoader();
Misc.showNotification("Something went wrong. Error: " + e.message, 4000);
Notifications.add("Something went wrong. Error: " + e.message, -1);
});
});
@ -781,13 +782,10 @@ $(".pageSettings .section.discordIntegration #unlinkDiscordButton").click(
console.log(ret);
if (ret.data.status === 1) {
db_getSnapshot().discordId = null;
Misc.showNotification("Accounts unlinked", 2000);
Notifications.add("Accounts unlinked", 0);
updateDiscordSettingsSection();
} else {
Misc.showNotification(
"Something went wrong: " + ret.data.message,
5000
);
Notifications.add("Something went wrong: " + ret.data.message, -1);
updateDiscordSettingsSection();
}
});
@ -908,7 +906,7 @@ $(".pageSettings .saveCustomThemeButton").click((e) => {
}
);
setCustomThemeColors(save);
Misc.showNotification("Custom theme colors saved", 1000);
Notifications.add("Custom theme colors saved", 0);
});
$(".pageSettings #loadCustomColorsFromPreset").click((e) => {
@ -960,12 +958,12 @@ $("#exportSettingsButton").click((e) => {
let configJSON = JSON.stringify(config);
navigator.clipboard.writeText(configJSON).then(
function () {
Misc.showNotification("JSON Copied to clipboard", 2000);
Notifications.add("JSON Copied to clipboard", 0);
},
function (err) {
Misc.showNotification(
Notifications.add(
"Something went wrong when copying the settings JSON: " + err,
5000
-1
);
}
);
@ -991,9 +989,9 @@ function hideSettingsImport() {
try {
applyConfig(JSON.parse($("#settingsImportWrapper input").val()));
} catch (e) {
Misc.showNotification(
Notifications.add(
"An error occured while importing settings: " + e,
5000
-1
);
}
saveConfigToCookie();

23
src/js/simple-popups.js
View file

@ -150,21 +150,21 @@ simplePopups.updateEmail = new SimplePopup(
}).then((data) => {
hideBackgroundLoader();
if (data.data.resultCode === 1) {
Misc.showNotification("Email updated", 2000);
Notifications.add("Email updated", 0);
setTimeout(() => {
signOut();
}, 1000);
} else if (data.data.resultCode === -1) {
Misc.showNotification("Current email doesn't match", 2000);
Notifications.add("Current email doesn't match", 0);
} else {
Misc.showNotification(
Notifications.add(
"Something went wrong: " + JSON.stringify(data.data),
7000
-1
);
}
});
} catch (e) {
Misc.showNotification("Something went wrong: " + e, 5000);
Notifications.add("Something went wrong: " + e, -1);
}
},
() => {}
@ -192,21 +192,16 @@ simplePopups.clearTagPb = new SimplePopup(
$(
`.pageSettings .section.tags .tagsList .tag[id="${tagid}"] .clearPbButton`
).attr("aria-label", "No PB found");
Misc.showNotification("Tag PB cleared.", 1000);
Notifications.add("Tag PB cleared.", 0);
} else {
console.error(res.data.message);
Misc.showNotification(
"Something went wrong: " + res.data.message,
5000
);
Notifications.add("Something went wrong: " + res.data.message, -1);
}
})
.catch((e) => {
hideBackgroundLoader();
console.error(e);
Misc.showNotification(
Notifications.add(
"Something went wrong while clearing tag pb " + e,
5000
-1
);
});
// console.log(`clearing for ${eval("this.parameters[0]")} ${eval("this.parameters[1]")}`);

9
src/js/userconfig.js
View file

@ -113,7 +113,7 @@ async function saveConfigToDB() {
// accountIconLoading(false);
// if (d.data.returnCode === 1) {
// } else {
// Misc.showNotification(
// Notifications.add(
// `Error saving config to DB! ${d.data.message}`,
// 4000
// );
@ -680,7 +680,7 @@ function setHighlightMode(mode, nosave) {
mode === "word" &&
(activeFunBox === "nospace" || activeFunBox === "read_ahead")
) {
Misc.showNotification("Can't use word highlight with this funbox", 3000);
Notifications.add("Can't use word highlight with this funbox", 0);
return;
}
if (mode == null || mode == undefined) {
@ -1145,7 +1145,7 @@ function randomiseTheme() {
randomList = config.favThemes;
randomTheme = randomList[Math.floor(Math.random() * randomList.length)];
setTheme(randomTheme, true);
Misc.showNotification(randomTheme.replace(/_/g, " "), 1500);
Notifications.add(randomTheme.replace(/_/g, " "), 0);
});
}
@ -1482,8 +1482,7 @@ function setFontSize(fontSize, nosave) {
function applyConfig(configObj) {
if (configObj == null || configObj == undefined) {
Misc.showNotification("Could not apply config", 1000);
console.error("configobj is null or undefined");
Notifications.add("Could not apply config", -1);
return;
}
Object.keys(defaultConfig).forEach((configKey) => {

76
src/sass/style.scss
View file

@ -697,6 +697,82 @@ a:hover {
}
}
#notificationCenter {
width: 350px;
z-index: 99999999;
display: grid;
gap: 1rem;
position: fixed;
right: 1rem;
top: 1rem;
.history {
display: grid;
gap: 1rem;
}
.notif {
.icon {
color: var(--bg-color);
opacity: 0.5;
padding: 1rem 1rem;
align-items: center;
display: grid;
font-size: 1.25rem;
}
.message {
padding: 1rem 1rem 1rem 0;
.title {
color: var(--bg-color);
font-size: 0.75em;
opacity: 0.5;
line-height: 0.75rem;
}
}
position: relative;
background: var(--sub-color);
color: var(--bg-color);
display: grid;
grid-template-columns: min-content auto min-content;
border-radius: var(--roundness);
border-width: 0.25rem;
&.bad {
background-color: var(--error-color);
}
&.good {
background-color: var(--main-color);
}
&:hover {
// opacity: .5;
// box-shadow: 0 0 20px rgba(0,0,0,.25);
cursor: pointer;
&::after {
opacity: 1;
}
}
&::after {
transition: 0.125s;
font-family: "Font Awesome 5 Free";
background: rgba(0, 0, 0, 0.5);
opacity: 0;
font-weight: 900;
content: "\f00d";
position: absolute;
width: 100%;
height: 100%;
color: var(--bg-color);
font-size: 2.5rem;
display: grid;
/* align-self: center; */
align-items: center;
text-align: center;
border-radius: var(--roundness);
}
}
}
#supportMeWrapper {
width: 100%;
height: 100%;

3
static/index.html
View file

@ -49,6 +49,9 @@
<body>
<div id="backgroundLoader" style="display: none"></div>
<div id="notificationCenter">
<div class="history"></div>
</div>
<div
class="nameChangeMessage"
style="