added an option to increase the test words font size

monkeytypegame · May 18, 2020 · 96476a0 · 96476a0
1 parent f8eeef9
commit 96476a0
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 4 deletions.
diff --git a/public/css/style.scss b/public/css/style.scss
@@ -306,6 +306,21 @@ a:hover {
   // transition: 0.05s;
 }
 
+#caret.size125{
+  height: 2rem;
+  width: 2px;
+}
+
+#caret.size15{
+  height: 2.25rem;
+  width: 3px;
+}
+
+#caret.size2{
+  height: 3rem;
+  width: 4px;
+}
+
 @keyframes caretFlash {
   0% {
     background: transparent;
@@ -700,12 +715,31 @@ key {
 }
 
 .word {
-  margin: 5px 5px;
+  margin: .25rem;
   color: var(--sub-color);
   display: flex;
   // transition: 0.25s;
   /*   margin-bottom: 1px; */
   border-bottom: 2px solid transparent;
+  line-height: 1rem;
+}
+
+#words.size125 .word{
+  line-height: 1.25rem;
+  font-size: 1.25rem;
+  margin: .31rem;
+}
+
+#words.size15 .word{
+  line-height: 1.5rem;
+  font-size: 1.5rem;
+  margin: .37rem;
+}
+
+#words.size2 .word{
+  line-height: 2rem;
+  font-size: 2rem;
+  margin: .5rem;
 }
 
 .word.error {
@@ -726,8 +760,8 @@ key {
 
 .word letter {
   // transition: .1s;
-  height: 1rem;
-  line-height: 1rem;
+  // height: 1rem;
+  // line-height: 1rem;
   /* margin: 0 1px; */
 }
 

diff --git a/public/index.html b/public/index.html
@@ -231,6 +231,16 @@ <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 fontSize">
+          <h1>font size</h1>
+          <div class="text">Change the font size of the test words</div>
+          <div class="buttons">
+            <div class="button" fontsize="1" tabindex="0">1</div>
+            <div class="button" fontsize="125" tabindex="0">1.25</div>
+            <div class="button" fontsize="15" tabindex="0">1.5</div>
+            <div class="button" fontsize="2" tabindex="0">2</div>
+          </div>
+        </div>
         <div class="section" style="grid-column: 1/3;">
           <h1>languages</h1>
           <div class="languages">

diff --git a/public/js/commandline.js b/public/js/commandline.js
@@ -60,6 +60,15 @@ let commands = {
                 showCommandLine();
             }
         },
+        {
+            id: "changeFontSize",
+            display: "Change font size...",
+            subgroup: true,
+            exec: () => {
+                currentCommands = commandsFontSize;
+                showCommandLine();
+            }
+        },
         {
             id: "changeMode",
             display: "Change mode...",
@@ -242,6 +251,40 @@ let commandsTimeConfig = {
     ]
 };
 
+let commandsFontSize = {
+    title: "Change font size...",
+    list: [
+        {
+            id: "changeFontSize1",
+            display: "1x",
+            exec: () => {
+                changeFontSize(1)
+            }
+        },
+        {
+            id: "changeFontSize125",
+            display: "1.25x",
+            exec: () => {
+                changeFontSize(125)
+            }
+        },
+        {
+            id: "changeFontSize15",
+            display: "1.5x",
+            exec: () => {
+                changeFontSize(15)
+            }
+        },
+        {
+            id: "changeFontSize2",
+            display: "2x",
+            exec: () => {
+                changeFontSize(2)
+            }
+        }
+    ]
+};
+
 let themesList;
 
 $.getJSON("themes/list.json", function(data) {

diff --git a/public/js/settings.js b/public/js/settings.js
@@ -17,6 +17,7 @@ function updateSettingsPage(){
 
     setActiveThemeButton();
     setActiveLanguageButton();
+    setActiveFontSizeButton();
 
     if (config.showKeyTips) {
         $(".pageSettings .tip").removeClass('hidden');
@@ -32,6 +33,11 @@ function setActiveThemeButton() {
     $(`.pageSettings .section .themes .theme[theme=${config.theme}]`).addClass('active');
 }
 
+function setActiveFontSizeButton() {
+    $(`.pageSettings .section.fontSize .buttons .button`).removeClass('active');
+    $(`.pageSettings .section.fontSize .buttons .button[fontsize=`+config.fontSize+`]`).addClass('active');
+}
+
 function setActiveLanguageButton() {
     $(`.pageSettings .section .languages .language`).removeClass('active');
     $(`.pageSettings .section .languages .language[language=${config.language}]`).addClass('active'); 
@@ -126,6 +132,15 @@ $(document).on("mouseleave",".pageSettings .section .themes", (e) => {
 $(document).on("click",".pageSettings .section .languages .language", (e) => {
     let language = $(e.currentTarget).attr('language');
     changeLanguage(language);
+    showNotification('Language changed', 1000);
     restartTest();
     setActiveLanguageButton();
+})
+
+//fontsize
+$(document).on("click",".pageSettings .section.fontSize .button", (e) => {
+    let fontSize = $(e.currentTarget).attr('fontsize');
+    changeFontSize(fontSize);
+    showNotification('Font size changed', 1000);
+    setActiveFontSizeButton();
 })
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
@@ -8,7 +8,8 @@ let config = {
     words: 50,
     time: 30,
     mode: "words",
-    language: "english"
+    language: "english",
+    fontSize: 1
 }
 
 //cookies
@@ -31,6 +32,7 @@ function loadConfigFromCookie() {
         changeWordCount(newConfig.words);
         changeMode(newConfig.mode);
         changeLanguage(newConfig.language);
+        changeFontSize(newConfig.fontSize);
         config = newConfig;
         restartTest();
     }
@@ -154,3 +156,29 @@ function changeLanguage(language) {
     });
     saveConfigToCookie();
 }
+
+function changeFontSize(fontSize) {
+    if (fontSize == null || fontSize == undefined) {
+        fontSize = 1;
+    }
+    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');
+    }
+    updateCaretPosition();
+    saveConfigToCookie();
+}