diff --git a/public/css/style.scss b/public/css/style.scss index adc793ee8..df4569306 100644 --- 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 index 7e24bb3cd..4c623301c 100644 --- a/public/index.html +++ b/public/index.html @@ -231,6 +231,16 @@
Shows the keybind tips at the bottom of the page.
show
hide
+
+

font size

+
Change the font size of the test words
+
+
1
+
1.25
+
1.5
+
2
+
+

languages

diff --git a/public/js/commandline.js b/public/js/commandline.js index f13fa7947..bfcaf7da5 100644 --- 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 index 8d20efba0..6d703e48e 100644 --- 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(); }) \ No newline at end of file diff --git a/public/js/userconfig.js b/public/js/userconfig.js index cf75971d6..1e0367f07 100644 --- 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(); +} \ No newline at end of file