mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-03-06 11:47:24 +08:00
added settings page
This commit is contained in:
Jack
parent
d5956dabad
commit
d337c98650
5 changed files with 223 additions and 3 deletions
|
|
@ -28,6 +28,7 @@ body {
|
|||
background: var(--bg-color);
|
||||
font-family: "Roboto Mono";
|
||||
color: var(--main-color);
|
||||
transition: .25s;
|
||||
}
|
||||
|
||||
html { overflow-y: scroll; }
|
||||
|
|
@ -140,6 +141,7 @@ a:hover {
|
|||
display: none;
|
||||
position: absolute;
|
||||
width: min-content;
|
||||
width: -moz-min-content;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
|
|
@ -329,7 +331,7 @@ a:hover {
|
|||
line-height: 2.3rem;
|
||||
font-size: 2.3rem;
|
||||
/* text-align: center; */
|
||||
transition: 0.5s;
|
||||
transition: 0.25s;
|
||||
padding: 0 5px;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
|
|
@ -362,6 +364,7 @@ a:hover {
|
|||
grid-auto-flow: row;
|
||||
grid-gap: 0.2rem;
|
||||
width: min-content;
|
||||
width: -moz-min-content;
|
||||
transition: 0.25s;
|
||||
/* margin-bottom: 0.1rem; */
|
||||
grid-column: 3/4;
|
||||
|
|
@ -421,6 +424,7 @@ a:hover {
|
|||
grid-auto-flow: column;
|
||||
grid-gap: 1rem;
|
||||
width: min-content;
|
||||
width: -moz-min-content;
|
||||
transition: 0.25s;
|
||||
grid-column: 3/4;
|
||||
grid-row: 1/2;
|
||||
|
|
@ -729,6 +733,70 @@ key {
|
|||
}
|
||||
}
|
||||
|
||||
.pageSettings{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
.tip{
|
||||
color: var(--sub-color);
|
||||
}
|
||||
.section{
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
h1{
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
color: var(--sub-color);
|
||||
margin: 0;
|
||||
}
|
||||
.button{
|
||||
color: var(--sub-color);
|
||||
cursor: pointer;
|
||||
transition: .25s;
|
||||
padding: .2rem .5rem;
|
||||
border-radius: var(--roundness);
|
||||
&:hover{
|
||||
color: var(--main-color);
|
||||
}
|
||||
&.active{
|
||||
color: var(--main-color);
|
||||
}
|
||||
&:focus{
|
||||
background: var(--sub-color);
|
||||
color: var(--bg-color);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.buttons{
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 1rem;
|
||||
width: min-content;
|
||||
width: -moz-min-content;
|
||||
}
|
||||
.themes{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
// gap: 1rem;
|
||||
.theme{
|
||||
// padding: 1rem 2rem;
|
||||
text-align: center;
|
||||
color: var(--sub-color);
|
||||
transition: .25s;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: var(--main-color);
|
||||
}
|
||||
&.active{
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pageAccount{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
|
|
|||
|
|
@ -199,7 +199,39 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="page pageSettings hidden">
|
||||
|
||||
<div class="tip" style="grid-column: 1/3;">tip: You can also change all these settings quickly using the command line (<key>esc</key>)</div>
|
||||
<div class="section smoothCaret" section="">
|
||||
<h1>smooth caret</h1>
|
||||
<div class="text">The caret will move smoothly between letters and words.</div>
|
||||
<div class="buttons"><div class="button on" tabindex="0">on</div><div class="button off" tabindex="0">off</div></div>
|
||||
</div>
|
||||
<div class="section quickTab">
|
||||
<h1>quick tab mode</h1>
|
||||
<div class="text">Press <key>tab</key> to quickly restart the test. This function disables tab navigation on some parts of the website.</div>
|
||||
<div class="buttons"><div class="button on" tabindex="0">on</div><div class="button off" tabindex="0">off</div></div>
|
||||
</div>
|
||||
<div class="section liveWpm">
|
||||
<h1>live wpm</h1>
|
||||
<div class="text">Displays a live WPM speed during the test. Updates once every second.</div>
|
||||
<div class="buttons"><div class="button on" tabindex="0">on</div><div class="button off" tabindex="0">off</div></div>
|
||||
</div>
|
||||
<div class="section keyTips">
|
||||
<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>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>
|
||||
<div class="page pageLogin hidden">
|
||||
<div class="preloader hidden"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
|
||||
|
|
@ -304,6 +336,7 @@
|
|||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -606,7 +606,8 @@ function changePage(page) {
|
|||
swapElements(activePage, $(".page.pageAbout"), 250);
|
||||
history.pushState('about', null, 'about');
|
||||
$('.config').css('opacity', 0);
|
||||
} else if (page == "settings") {
|
||||
} else if (page == "settings") {
|
||||
updateSettingsPage()
|
||||
$(".page.pageSettings").addClass('active');
|
||||
swapElements(activePage, $(".page.pageSettings"), 250);
|
||||
history.pushState('settings', null, 'settings');
|
||||
|
|
|
|||
113
public/js/settings.js
Normal file
113
public/js/settings.js
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
function updateSettingsPage(){
|
||||
|
||||
let themesEl = $(".pageSettings .section .themes").empty();
|
||||
|
||||
$.getJSON("themes/list.json", function(data) {
|
||||
commandsThemes.list = [];
|
||||
data.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>`);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
setSettingsButton('smoothCaret', config.smoothCaret);
|
||||
setSettingsButton('quickTab', config.quickTab);
|
||||
setSettingsButton('liveWpm', config.showLiveWpm);
|
||||
setSettingsButton('keyTips', config.showKeyTips);
|
||||
|
||||
if (config.showKeyTips) {
|
||||
$(".pageSettings .tip").removeClass('hidden');
|
||||
} else {
|
||||
$(".pageSettings .tip").addClass('hidden');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function setSettingsButton(buttonSection,tf) {
|
||||
if (tf) {
|
||||
$(".pageSettings .section."+buttonSection+" .buttons .button.on").addClass('active');
|
||||
$(".pageSettings .section."+buttonSection+" .buttons .button.off").removeClass('active');
|
||||
} else {
|
||||
$(".pageSettings .section."+buttonSection+" .buttons .button.off").addClass('active');
|
||||
$(".pageSettings .section."+buttonSection+" .buttons .button.on").removeClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//smooth caret
|
||||
$(".pageSettings .section.smoothCaret .buttons .button.on").click(e => {
|
||||
setSmoothCaret(true);
|
||||
showNotification('Smooth caret on', 1000);
|
||||
setSettingsButton('smoothCaret', config.smoothCaret);
|
||||
})
|
||||
$(".pageSettings .section.smoothCaret .buttons .button.off").click(e => {
|
||||
setSmoothCaret(false);
|
||||
showNotification('Smooth caret off', 1000);
|
||||
setSettingsButton('smoothCaret', config.smoothCaret);
|
||||
})
|
||||
|
||||
//quick tab
|
||||
$(".pageSettings .section.quickTab .buttons .button.on").click(e => {
|
||||
setQuickTabMode(true);
|
||||
showNotification('Quick tab on', 1000);
|
||||
setSettingsButton('quickTab', config.quickTab);
|
||||
})
|
||||
$(".pageSettings .section.quickTab .buttons .button.off").click(e => {
|
||||
setQuickTabMode(false);
|
||||
showNotification('Quick tab off', 1000);
|
||||
setSettingsButton('quickTab', config.quickTab);
|
||||
})
|
||||
|
||||
//live wpm
|
||||
$(".pageSettings .section.liveWpm .buttons .button.on").click(e => {
|
||||
config.showLiveWpm = true;
|
||||
showNotification('Live WPM on', 1000);
|
||||
setSettingsButton('liveWpm', config.showLiveWpm);
|
||||
})
|
||||
$(".pageSettings .section.liveWpm .buttons .button.off").click(e => {
|
||||
config.showLiveWpm = false;
|
||||
showNotification('Live WPM off', 1000);
|
||||
setSettingsButton('liveWpm', config.showLiveWpm);
|
||||
})
|
||||
|
||||
//keytips
|
||||
$(".pageSettings .section.keyTips .buttons .button.on").click(e => {
|
||||
setKeyTips(true);
|
||||
showNotification('Key tips on', 1000);
|
||||
setSettingsButton('keyTips', config.showKeyTips);
|
||||
if (config.showKeyTips) {
|
||||
$(".pageSettings .tip").removeClass('hidden');
|
||||
} else {
|
||||
$(".pageSettings .tip").addClass('hidden');
|
||||
}
|
||||
})
|
||||
$(".pageSettings .section.keyTips .buttons .button.off").click(e => {
|
||||
setKeyTips(false);
|
||||
showNotification('Key tips off', 1000);
|
||||
setSettingsButton('keyTips', config.showKeyTips);
|
||||
if (config.showKeyTips) {
|
||||
$(".pageSettings .tip").removeClass('hidden');
|
||||
} else {
|
||||
$(".pageSettings .tip").addClass('hidden');
|
||||
}
|
||||
})
|
||||
|
||||
$(document).on("mouseover",".pageSettings .section .themes .theme", (e) => {
|
||||
let theme = $(e.currentTarget).attr('theme');
|
||||
previewTheme(theme);
|
||||
})
|
||||
|
||||
$(document).on("click",".pageSettings .section .themes .theme", (e) => {
|
||||
let theme = $(e.currentTarget).attr('theme');
|
||||
setTheme(theme);
|
||||
})
|
||||
|
||||
$(document).on("mouseleave",".pageSettings .section .themes", (e) => {
|
||||
setTheme(config.theme);
|
||||
})
|
||||
|
|
@ -55,6 +55,11 @@ function toggleKeyTips() {
|
|||
}
|
||||
|
||||
//caret
|
||||
function setSmoothCaret(mode) {
|
||||
config.smoothCaret = mode;
|
||||
saveConfigToCookie();
|
||||
}
|
||||
|
||||
function toggleSmoothCaret() {
|
||||
config.smoothCaret = !config.smoothCaret;
|
||||
saveConfigToCookie();
|
||||
|
|
|
|||
Loading…
Reference in a new issue