Merge branch 'master' of https://github.com/Miodec/monkeytype

.prettierignore

@@ -1,10 +1,10 @@
 *.min.js
 layouts.js
-english_quotes.json
+quotes/english.json
 chartjs-plugin-*.js
 sound/*
 node_modules
 css/balloon.css
 css/fa.css
 css/style.min.css
-_list.json
+_list.json

functions/index.js

@@ -1,9 +1,11 @@
 const functions = require("firebase-functions");
 const admin = require("firebase-admin");
 let key = "./serviceAccountKey.json";
+let origin = "http://localhost:5000";
 
 if (process.env.GCLOUD_PROJECT === "monkey-type") {
   key = "./serviceAccountKey_live.json";
+  origin = "https://monkeytype.com";
 }
 
 var serviceAccount = require(key);
@@ -133,14 +135,36 @@ exports.clearName = functions.auth.user().onDelete((user) => {
   db.collection("users").doc(user.uid).delete();
 });
 
-exports.checkNameAvailability = functions.https.onCall(
+exports.checkNameAvailability = functions.https.onRequest(
   async (request, response) => {
+    response.set("Access-Control-Allow-Origin", origin);
+    if (request.method === "OPTIONS") {
+      // Send response to OPTIONS requests
+      response.set("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
+      response.set(
+        "Access-Control-Allow-Headers",
+        "Authorization,Content-Type"
+      );
+      response.set("Access-Control-Max-Age", "3600");
+      response.status(204).send("");
+      return;
+    }
+    request = request.body.data;
+
     // 1 - available
     // -1 - unavailable (taken)
     // -2 - not valid name
     // -999 - unknown error
     try {
-      if (!isUsernameValid(request.name)) return -2;
+      if (!isUsernameValid(request.name)) {
+        response.status(200).send({
+          data: {
+            resultCode: -2,
+            message: "Username is not valid",
+          },
+        });
+        return;
+      }
 
       let takendata = await db
         .collection("takenNames")
@@ -150,9 +174,21 @@ exports.checkNameAvailability = functions.https.onCall(
       takendata = takendata.data();
 
       if (takendata !== undefined && takendata.taken) {
-        return -1;
+        response.status(200).send({
+          data: {
+            resultCode: -1,
+            message: "Username is taken",
+          },
+        });
+        return;
       } else {
-        return 1;
+        response.status(200).send({
+          data: {
+            resultCode: 1,
+            message: "Username is available",
+          },
+        });
+        return;
       }
 
       // return getAllNames().then((data) => {
@@ -167,8 +203,17 @@ exports.checkNameAvailability = functions.https.onCall(
       //   return available;
       // });
     } catch (e) {
-      console.log(e.message);
-      return -999;
+      console.error(
+        `Error while checking name availability for ${request.name}:` +
+          e.message
+      );
+      response.status(200).send({
+        data: {
+          resultCode: -999,
+          message: "Unexpected error: " + e,
+        },
+      });
+      return;
     }
   }
 );
@@ -588,14 +633,14 @@ function validateResult(result) {
 }
 
 exports.requestTest = functions.https.onRequest((request, response) => {
-  response.set("Access-Control-Allow-Origin", "*");
+  response.set("Access-Control-Allow-Origin", origin);
   response.set("Access-Control-Allow-Headers", "*");
   response.set("Access-Control-Allow-Credentials", "true");
   response.status(200).send({ data: "test" });
 });
 
 exports.getPatreons = functions.https.onRequest(async (request, response) => {
-  response.set("Access-Control-Allow-Origin", "*");
+  response.set("Access-Control-Allow-Origin", origin);
   response.set("Access-Control-Allow-Headers", "*");
   response.set("Access-Control-Allow-Credentials", "true");
   if (request.method === "OPTIONS") {
@@ -629,7 +674,7 @@ exports.getPatreons = functions.https.onRequest(async (request, response) => {
 });
 
 exports.verifyUser = functions.https.onRequest(async (request, response) => {
-  response.set("Access-Control-Allow-Origin", "*");
+  response.set("Access-Control-Allow-Origin", origin);
   response.set("Access-Control-Allow-Headers", "*");
   response.set("Access-Control-Allow-Credentials", "true");
   if (request.method === "OPTIONS") {
@@ -1002,7 +1047,7 @@ async function incrementTimeSpentTyping(uid, res, userData) {
 }
 
 exports.testCompleted = functions.https.onRequest(async (request, response) => {
-  response.set("Access-Control-Allow-Origin", "*");
+  response.set("Access-Control-Allow-Origin", origin);
   if (request.method === "OPTIONS") {
     // Send response to OPTIONS requests
     response.set("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
@@ -1055,7 +1100,13 @@ exports.testCompleted = functions.https.onRequest(async (request, response) => {
       return;
     }
 
-    if (obj.wpm <= 0 || obj.wpm > 350 || obj.acc < 50 || obj.acc > 100) {
+    if (
+      obj.wpm <= 0 ||
+      obj.wpm > 350 ||
+      obj.acc < 50 ||
+      obj.acc > 100 ||
+      obj.consistency > 100
+    ) {
       response.status(200).send({ data: { resultCode: -1 } });
       return;
     }
@@ -1426,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 };
   }
 });
 
@@ -1456,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 };
   }
 });
 
@@ -1522,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 };
   }
 });
 
@@ -1984,7 +2035,7 @@ class Leaderboard {
 //   });
 
 exports.unlinkDiscord = functions.https.onRequest((request, response) => {
-  response.set("Access-Control-Allow-Origin", "*");
+  response.set("Access-Control-Allow-Origin", origin);
   if (request.method === "OPTIONS") {
     // Send response to OPTIONS requests
     response.set("Access-Control-Allow-Methods", "POST, GET, OPTIONS");

gulpfile.js

@@ -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

src/js/account.js

@@ -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,27 +59,27 @@ 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;
   }
 
   CloudFunctions.namecheck({ name: nname }).then((d) => {
-    if (d.data === -1) {
-      Misc.showNotification("Name unavailable", 3000);
+    if (d.data.resultCode === -1) {
+      Notifications.add("Name unavailable", -1);
       $(".pageLogin .preloader").addClass("hidden");
       $(".pageLogin .register .button").removeClass("disabled");
       return;
-    } else if (d.data === -2) {
-      Misc.showNotification(
+    } else if (d.data.resultCode === -2) {
+      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");
       return;
-    } else if (d.data === 1) {
+    } else if (d.data.resultCode === 1) {
       firebase
         .auth()
         .createUserWithEmailAndPassword(email, password)
@@ -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,10 +164,14 @@ 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 {
+      Notifications.add(
+        "Something went wrong when checking name: " + d.data.message,
+        -1
+      );
     }
   });
 }
@@ -173,7 +181,7 @@ function signOut() {
     .auth()
     .signOut()
     .then(function () {
-      Misc.showNotification("Signed out", 2000);
+      Notifications.add("Signed out", 0, 2);
       clearGlobalStats();
       hideAccountSettingsSection();
       updateAccountLoginButton();
@@ -181,7 +189,7 @@ function signOut() {
       db_setSnapshot(null);
     })
     .catch(function (error) {
-      Misc.showNotification(error.message, 5000);
+      Notifications.add(error.message, -1);
     });
 }
 
@@ -221,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);
         }
       });
     }
@@ -237,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;
     }
@@ -366,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);
@@ -1004,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);
@@ -1851,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);
@@ -2206,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) => {
@@ -2224,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);
     }
   }
 }
@@ -2326,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;
@@ -2377,7 +2387,7 @@ $("#resultEditTagsPanel .confirmButton").click((f) => {
         );
       }
     } else {
-      Misc.showNotification("Error updating tags", 3000);
+      Notifications.add("Error updating tags: " + r.data.message, -1);
     }
   });
 });
@@ -2425,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);
       });
   }
 });

src/js/commandline.js

@@ -1,11 +1,15 @@
 function canBailOut() {
   return (
     (config.mode === "custom" &&
-      customTextIsRandom &&
-      customTextWordCount >= 5000) ||
+      customText.isWordRandom &&
+      customText.word >= 5000) ||
     (config.mode === "custom" &&
-      !customTextIsRandom &&
-      customText.length >= 5000) ||
+      !customText.isWordRandom &&
+      !customText.isTimeRandom &&
+      customText.text.length >= 5000) ||
+    (config.mode === "custom" &&
+      customText.isTimeRandom &&
+      customText.time >= 3600) ||
     (config.mode === "words" && config.words >= 5000) ||
     config.words === 0 ||
     (config.mode === "time" && (config.time >= 3600 || config.time === 0))
@@ -880,7 +884,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 +892,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 +900,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);
       },
     },
   ],

src/js/exports.js

@@ -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;

src/js/global-dependencies.js

@@ -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";

src/js/leaderboards.js

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

src/js/notification-center.js

@@ -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()
+  );
+}

src/js/settings.js

@@ -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();

src/js/simple-popups.js

@@ -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]")}`);

src/js/userconfig.js

@@ -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) => {

src/sass/style.scss

@@ -415,6 +415,13 @@ a:hover {
       justify-items: left;
     }
 
+    .randomInputFields {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      text-align: center;
+      align-items: center;
+    }
+
     .check {
       span {
         display: block;
@@ -697,6 +704,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%;

static/index.html

@@ -49,6 +49,9 @@
 
   <body>
     <div id="backgroundLoader" style="display: none"></div>
+    <div id="notificationCenter">
+      <div class="history"></div>
+    </div>
     <div
       class="nameChangeMessage"
       style="
@@ -107,10 +110,17 @@
               generated.
             </span>
           </label>
-          <label class="wordcount">
-            Word count
-            <input type="number" value="1" min="1" max="10000" />
-          </label>
+          <div class="randomInputFields hidden">
+            <label class="wordcount">
+              Word count
+              <input type="number" value="" min="1" max="10000" />
+            </label>
+            <div style="color: var(--sub-color)">or</div>
+            <label class="time">
+              Time
+              <input type="number" value="" min="1" max="10000" />
+            </label>
+          </div>
           <label class="typographyCheck">
             <input type="checkbox" checked />
             <div class="customTextTypographyCheckbox"></div>

static/languages/_list.json

@@ -28,6 +28,7 @@
   ,"polish_2k"
   ,"czech"
   ,"czech_1k"
+  ,"czech_10k"
   ,"slovak"
   ,"dutch"
   ,"filipino"

static/themes/stealth.css

@@ -1,12 +1,17 @@
-:root{
-        --bg-color: #010203;
-        --main-color: #383e42;
-        --caret-color: #e25303;
-        --sub-color: #5e676e;
-        --text-color: #383e42;
-        --error-color: #e25303;
-        --error-extra-color: #73280c;
-        --colorful-error-color: #e25303;
-        --colorful-error-extra-color: #73280c;
-}       
-#menu .icon-button:nth-child(4){color:#e25303}
+:root {
+  --bg-color: #010203;
+  --main-color: #383e42;
+  --caret-color: #e25303;
+  --sub-color: #5e676e;
+  --text-color: #383e42;
+  --error-color: #e25303;
+  --error-extra-color: #73280c;
+  --colorful-error-color: #e25303;
+  --colorful-error-extra-color: #73280c;
+}
+#menu .icon-button:nth-child(4) {
+  color: #e25303;
+}
+#timerNumber {
+  color: #5e676e;
+}