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