added language support

Author: Miodec

public/css/style.scss

@@ -795,11 +795,11 @@ key {
       width: min-content;
       width: -moz-min-content;
     }
-    .themes{
+    .themes, .languages{
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       // gap: 1rem;
-      .theme{
+      .theme, .language{
         // padding: 1rem 2rem;
         text-align: center;
         color: var(--sub-color);

public/index.html

@@ -216,16 +216,14 @@ <h1>show key tips</h1>
           <div class="text">Shows the keybind tips at the bottom of the page.</div>
           <div class="buttons"><div class="button on" tabindex="0">show</div><div class="button off" tabindex="0">hide</div></div>
         </div>
+        <div class="section" style="grid-column: 1/3;">
+          <h1>languages</h1>
+          <div class="languages">
+          </div>
+        </div>
         <div class="section" style="grid-column: 1/3;">
           <h1>theme</h1>
           <div class="themes">
-            <div class="theme">light</div>
-            <div class="theme active">dark</div>
-            <div class="theme">light</div>
-            <div class="theme">light</div>
-            <div class="theme">light</div>
-            <div class="theme">light</div>
-            
           </div>
         </div>
       </div>
@@ -330,12 +328,11 @@ <h1>theme</h1>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline@0.1.3/src/chartjs-plugin-trendline.min.js"></script>
-
+<script src="js/words.js"></script>
 <script src="js/db.js"></script>
 <script src="js/commandline.js"></script>
 <script src="js/settings.js"></script>
 <script src="js/userconfig.js"></script>
-<script src="js/words.js"></script>
 <script src="js/script.js"></script>
 <script src="js/account.js"></script>
 

public/js/commandline.js

@@ -51,6 +51,15 @@ let commands = {
                 showCommandLine();
             }
         },
+        {
+            id: "changeLanguage",
+            display: "Change language...",
+            subgroup: true,
+            exec: () => {
+                currentCommands = commandsLanguages;
+                showCommandLine();
+            }
+        },
         {
             id: "changeMode",
             display: "Change mode...",
@@ -263,6 +272,31 @@ let commandsThemes = {
     ]
 };
 
+let commandsLanguages = {
+    title: "Change language...",
+    list: [
+        {
+            id: "couldnotload",
+            display: "Could not load the languages list :("
+        }
+    ]
+};
+
+if (Object.keys(words).length > 0) {
+    commandsLanguages.list = [];
+    Object.keys(words).forEach(language => {
+        commandsLanguages.list.push({
+            id: "changeLanguage" + capitalizeFirstLetter(language),
+            display: language.replace('_', ' '),
+            exec: () => {
+                changeLanguage(language);
+                restartTest();
+                saveConfigToCookie();
+            }
+        })
+    })
+}
+
 $("#commandLine input").keyup((e) => {
     if (e.keyCode == 38 || e.keyCode == 40) return;
     updateSuggestedCommands();

public/js/script.js

@@ -78,18 +78,28 @@ function initWords() {
   inputHistory = [];
   currentInput = "";
 
+  let language = words[config.language];
+
+  if (language == undefined || language == []) {
+    showNotification("Error generating word list", 3000);
+    return;
+  }
+
   if (config.mode == "time" || config.mode == "words") {
 
     let wordsBound = config.mode == "time" ? 50 : config.words;
-    let randomWord = words[Math.floor(Math.random() * words.length)];
-    wordsList.push(randomWord);
+    let randomWord = language[Math.floor(Math.random() * language.length)];
+    while (randomWord.indexOf(' ') > -1) {
+      randomWord = language[Math.floor(Math.random() * language.length)];
+    }
+    wordsList.push(randomWord.toLowerCase());
     for (let i = 1; i < wordsBound; i++) {
-      randomWord = words[Math.floor(Math.random() * words.length)];
+      randomWord = language[Math.floor(Math.random() * language.length)];
       previousWord = wordsList[i - 1];
-      while (randomWord == previousWord && (!config.punctuation && randomWord == "I")) {
-        randomWord = words[Math.floor(Math.random() * words.length)];
+      while (randomWord == previousWord || (!config.punctuation && randomWord == "I") || randomWord.indexOf(' ') > -1) {
+        randomWord = language[Math.floor(Math.random() * language.length)];
       }
-      wordsList.push(randomWord);
+      wordsList.push(randomWord.toLowerCase());
     }
 
   } else if (config.mode == "custom") {
@@ -423,7 +433,8 @@ function showResult() {
     mode: config.mode,
     mode2: mode2,
     punctuation: config.punctuation,
-    timestamp: Date.now()
+    timestamp: Date.now(),
+    language: config.language
   };
   if (stats.wpm > 0 && stats.wpm < 250 && stats.acc > 50 && stats.acc <= 100) {
     if (firebase.auth().currentUser != null) {
@@ -452,15 +463,17 @@ function showResult() {
 
 
   let infoText = "";
-  infoText = config.mode;
 
+
+  infoText += config.mode;
   if (config.mode == "time") {
     infoText += " " + config.time
   } else if (config.mode == "words") {
     infoText += " " + config.words
   }
+  infoText += "<br>" + config.language.replace('_', ' ') ;
   if (config.punctuation) {
-    infoText += " with punctuation"
+    infoText += "<br>with punctuation"
   }
 
   $("#result .stats .info .bottom").html(infoText);

public/js/settings.js

@@ -2,19 +2,21 @@ function updateSettingsPage(){
 
     let themesEl = $(".pageSettings .section .themes").empty();
     themesList.forEach(theme => {
-        if (config.theme == 'theme') {
-            themesEl.append(`<div class="theme active" theme='${theme}'>${theme.replace('_', ' ')}</div>`);     
-        } else {
-            themesEl.append(`<div class="theme" theme='${theme}'>${theme.replace('_', ' ')}</div>`); 
-        }
+        themesEl.append(`<div class="theme" theme='${theme}'>${theme.replace('_', ' ')}</div>`); 
+    })
+
+    let langEl = $(".pageSettings .section .languages").empty();
+    Object.keys(words).forEach(language => {
+        langEl.append(`<div class="language" language='${language}'>${language.replace('_', ' ')}</div>`); 
     })
 
     setSettingsButton('smoothCaret', config.smoothCaret);
     setSettingsButton('quickTab', config.quickTab);
     setSettingsButton('liveWpm', config.showLiveWpm);
     setSettingsButton('keyTips', config.showKeyTips);
-    setActiveThemeButton(config.theme);
 
+    setActiveThemeButton();
+    setActiveLanguageButton();
 
     if (config.showKeyTips) {
         $(".pageSettings .tip").removeClass('hidden');
@@ -25,9 +27,14 @@ function updateSettingsPage(){
 
 }
 
-function setActiveThemeButton(theme) {
-    $(".pageSettings .themes .theme").removeClass('active');
-    $(".pageSettings .themes .theme[theme=" + theme + "]").addClass('active');
+function setActiveThemeButton() {
+    $(`.pageSettings .section .themes .theme`).removeClass('active');
+    $(`.pageSettings .section .themes .theme[theme=${config.theme}]`).addClass('active');
+}
+
+function setActiveLanguageButton() {
+    $(`.pageSettings .section .languages .language`).removeClass('active');
+    $(`.pageSettings .section .languages .language[language=${config.language}]`).addClass('active'); 
 }
 
 function setSettingsButton(buttonSection,tf) {
@@ -99,6 +106,7 @@ $(".pageSettings .section.keyTips .buttons .button.off").click(e => {
     }
 })
 
+//themes
 $(document).on("mouseover",".pageSettings .section .themes .theme", (e) => {
     let theme = $(e.currentTarget).attr('theme');
     previewTheme(theme);
@@ -107,8 +115,17 @@ $(document).on("mouseover",".pageSettings .section .themes .theme", (e) => {
 $(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);
+    restartTest();
+    setActiveLanguageButton();
 })

public/js/userconfig.js

@@ -7,7 +7,8 @@ let config = {
     punctuation: false,
     words: 50,
     time: 30,
-    mode: "words"
+    mode: "words",
+    language: "english"
 }
 
 //cookies
@@ -28,6 +29,7 @@ function loadConfigFromCookie() {
         changeTimeConfig(newConfig.time);
         changeWordCount(newConfig.words);
         changeMode(newConfig.mode);
+        changeLanguage(newConfig.language);
         config = newConfig;
         restartTest();
     }
@@ -140,3 +142,14 @@ function setTheme(name) {
         theme: name
     });
 }
+
+function changeLanguage(language) {
+    if (language == null || language == undefined) {
+        language = "english";
+    }
+    config.language = language;
+    firebase.analytics().logEvent('changedLanguage', {
+        language: language
+    });
+    saveConfigToCookie();
+}