added difficulty setting

fixed a bug where the settings page would be displayed in two columns if key tips are enabled

Author: Miodec

public/index.html

@@ -242,7 +242,18 @@ <h1>support</h1>
         </div>
       </div>
       <div class="page pageSettings hidden">
-        <div class="tip" style="grid-column: 1/3;">tip: You can also change all these settings quickly using the command line (<key>esc</key>)</div>
+        <div class="tip">tip: You can also change all these settings quickly using the command line (<key>esc</key>)</div>
+        <div class="section difficulty">
+          <h1>test difficulty</h1>
+          <div class="text">Normal is the classic type test experience. Expert fails the test if you submit (press space) an incorrect word.
+            Master fails if you press a single incorrect key (meaning you have to achieve 100% accuracy).
+          </div>
+          <div class="buttons">
+            <div class="button" difficulty="normal" tabindex="0" onclick="this.blur();">normal</div>
+            <div class="button" difficulty="expert" tabindex="0" onclick="this.blur();">expert</div>
+            <div class="button" difficulty="master" tabindex="0" onclick="this.blur();">master</div>
+          </div>
+        </div>
         <div class="section smoothCaret" section="">
           <h1>smooth caret</h1>
           <div class="text">The caret will move smoothly between letters and words.</div>

public/js/commandline.js

@@ -49,6 +49,15 @@ let commands = {
                 toggleFreedomMode();
             }
         },
+        {
+            id: "changeDifficulty",
+            display: "Change difficulty...",
+            subgroup: true,
+            exec: () => {
+                currentCommands.push(commandsDifficulty);
+                showCommandLine();
+            }
+        },
         {
             id: "changeTheme",
             display: "Change theme...",
@@ -152,6 +161,33 @@ let commandsSendDevMessage = {
     ]
 }
 
+let commandsDifficulty = {
+    title: "Change difficulty...",
+    list: [
+        {
+            id: "setDifficultyNormal",
+            display: "Normal",
+            exec: () => {
+                setDifficulty('normal');
+            }
+        },
+        {
+            id: "setDifficultyExpert",
+            display: "Expert",
+            exec: () => {
+                setDifficulty('expert');
+            }
+        },
+        {
+            id: "setDifficultyMaster",
+            display: "Master",
+            exec: () => {
+                setDifficulty('master');
+            }
+        }
+    ]
+}
+
 
 let commandsWordCount = {
     title: "Change word count...",

public/js/db.js

@@ -32,12 +32,12 @@ async function db_getUserResults() {
     return ret;
 }
 
-async function db_getUserHighestWpm(mode, mode2, punctuation, language) {
+async function db_getUserHighestWpm(mode, mode2, punctuation, language, difficulty) {
 
     function cont() {   
         let topWpm = 0;
         dbSnapshot.forEach(result => {
-            if (result.mode == mode && result.mode2 == mode2 && result.punctuation == punctuation && result.language == language) {
+            if (result.mode == mode && result.mode2 == mode2 && result.punctuation == punctuation && result.language == language && result.difficulty == difficulty) {
                 if (result.wpm > topWpm) {
                     topWpm = result.wpm;
                 }

public/js/script.js

@@ -252,6 +252,9 @@ function compareInput() {
       ret += '<letter class="correct">' + currentWord[i] + "</letter>";
       // $(letterElems[i]).removeClass('incorrect').addClass('correct');
     } else {
+      if(config.difficulty == "master"){
+        showResult();
+      }
       if (currentWord[i] == undefined) {
         ret +=
           '<letter class="incorrect extra">' + currentInput[i] + "</letter>";
@@ -516,9 +519,9 @@ function showResult() {
       restartCount: restartCount
     };
     restartCount = 0;
-    if (stats.wpm > 0 && stats.wpm < 600 && stats.acc > 50 && stats.acc <= 100) {
+    if (stats.wpm > 0 && stats.wpm < 350 && stats.acc > 50 && stats.acc <= 100) {
       if (firebase.auth().currentUser != null) {
-        db_getUserHighestWpm(config.mode, mode2, config.punctuation, config.language).then(data => {
+        db_getUserHighestWpm(config.mode, mode2, config.punctuation, config.language, config.difficulty).then(data => {
           // console.log(`highest wpm for this mode is ${data}, current is ${stats.wpm}`);
           if (data < stats.wpm) {
             hideCrown();
@@ -570,6 +573,11 @@ function showResult() {
   if (config.punctuation) {
     infoText += "<br>punctuation"
   }
+  if (config.difficulty == "expert") {
+    infoText += "<br>expert";
+  }else if(config.difficulty == "master"){
+    infoText += "<br>master";
+  }
 
   $("#result .stats .info .bottom").html(infoText);
 
@@ -1231,7 +1239,7 @@ $(document).keydown((event) => {
         highlightBadWord();
         currentInput = "";
         currentWordIndex++;
-        if (currentWordIndex == wordsList.length) {
+        if (currentWordIndex == wordsList.length || config.difficulty == "expert") {
           showResult();
           return;
         }

public/js/settings.js

@@ -20,6 +20,7 @@ function updateSettingsPage(){
     setActiveThemeButton();
     setActiveLanguageButton();
     setActiveFontSizeButton();
+    setActiveDifficultyButton();
 
     if (config.showKeyTips) {
         $(".pageSettings .tip").removeClass('hidden');
@@ -40,6 +41,11 @@ function setActiveFontSizeButton() {
     $(`.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'); 
@@ -161,4 +167,12 @@ $(document).on("click",".pageSettings .section.fontSize .button", (e) => {
     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();
 })

public/js/userconfig.js

@@ -11,7 +11,8 @@ let config = {
     language: "english",
     fontSize: 1,
     freedomMode: false,
-    resultFilters: ["all"]
+    resultFilters: ["all"],
+    difficulty: "master",
 }
 
 //cookies
@@ -42,6 +43,7 @@ function loadConfigFromCookie() {
         changeLanguage(newConfig.language,true);
         changeFontSize(newConfig.fontSize,true);
         setFreedomMode(newConfig.freedomMode,true);
+        setDifficulty(newConfig.difficulty,true);
         if(newConfig.resultFilters == null || newConfig.resultFilters == undefined){
             newConfig.resultFilters = ["all"];
         }
@@ -55,7 +57,16 @@ function showTestConfig() {
 
 function hideTestConfig() {
   $("#top .config").css("opacity",0).addClass('hidden');
-    
+}
+
+//difficulty
+function setDifficulty(diff, nosave){
+    if(diff !== "normal" && diff !== "expert" && diff !== "master"){
+        diff = "normal";
+    }
+    config.difficulty = diff;
+    restartTest();
+    if(!nosave) saveConfigToCookie();
 }
 
 //key tips