monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-11-10 17:04:49 +08:00
Code Issues Projects Releases Packages Wiki Activity

added an option to increase the test words font size

Browse source
This commit is contained in:
Jack 2020-05-18 22:45:14 +01:00
parent f8eeef9d2d
commit 96476a08a2
5 changed files with 134 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
public/css/style.scss
View file

@ -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; */
}

10
public/index.html
View file

@ -231,6 +231,16 @@
<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">

43
public/js/commandline.js
View file

@ -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) {

15
public/js/settings.js
View file

@ -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();
})

30
public/js/userconfig.js
View file

@ -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();
}