monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-20 07:16:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

added themes support

Browse source 
support for hover functions on the command line
fixed wpmovertime chart styling
This commit is contained in:
Jack 2020-05-11 16:29:18 +01:00
parent bf9a912847
commit 45d8556c1a
18 changed files with 279 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
public/app.html
View file

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monkey Type</title>
<script src="https://kit.fontawesome.com/f3f87d89b4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="themes/light.css" id="currentTheme">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.png">
</head>
@ -231,7 +232,7 @@
<key>tab</key> and <key>enter</key> / <key>space</key> - restart test<br>
<key>esc</key> - command line
</div>
Created by <a href="https://www.reddit.com/message/compose?to=Miodec">Miodec</a>
Created by <a tabindex="0" href="https://www.reddit.com/message/compose?to=Miodec">Miodec</a>
</div>
</div>

62
public/css/style.css
View file

@ -1,20 +1,32 @@
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
:root {
--main-color: #eee;
--sub-color: #444;
--bg-color: #111;
--caret-color: #fff;
--active-word-color: #444;
--roundness: 0.25rem;
--roundness: .25rem;
}
::-webkit-input-placeholder {
color: var(--sub-color);
opacity: 1;
/* Firefox */
}
:-ms-input-placeholder {
color: var(--sub-color);
opacity: 1;
/* Firefox */
}
::-ms-input-placeholder {
color: var(--sub-color);
opacity: 1;
/* Firefox */
}
::placeholder {
color: var(--sub-color);
opacity: 1;
/* Firefox */
}
/*
:root {
--main-color: #111;
--sub-color: #444;
--sub2-color: #444;
--bg-color: #fff;
} */
body {
margin: 0;
padding: 2rem 2rem 0 2rem;
@ -101,9 +113,13 @@ a:hover {
color: var(--sub-color);
}
#commandLineWrapper #commandLine .suggestions .entry:last-child {
border-radius: 0 0 var(--roundness) var(--roundness);
}
#commandLineWrapper #commandLine .suggestions .entry.active {
color: var(--main-color);
background: rgba(0, 0, 0, 0.5);
color: var(--bg-color);
background: var(--main-color);
}
#resultScreenshot {
@ -274,6 +290,14 @@ a:hover {
-webkit-transition: 0.25s;
transition: 0.25s;
padding: 0.5rem;
border-radius: var(--roundness);
}
#menu .button:focus {
background: var(--sub-color);
color: var(--main-color);
border: none;
outline: none;
}
#menu .button .icon {
@ -676,7 +700,7 @@ key {
}
#restartTestButton:focus {
background: #0d0d0d;
background: var(--sub-color);
}
.word {
@ -694,7 +718,7 @@ key {
.word.error {
/* margin-bottom: 1px; */
border-bottom: 2px solid #da3333;
text-shadow: 1px 0px 0px var(--bg-color), 2px 0px 0px var(--bg-color), -1px 0px 0px var(--bg-color), -2px 0px 0px var(--bg-color), 0px 1px 0px var(--bg-color), 1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color);
text-shadow: 1px 0px 0px var(--bg-color), -1px 0px 0px var(--bg-color), 0px 1px 0px var(--bg-color), 1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color);
}
.word.active {
@ -702,8 +726,6 @@ key {
}
.word letter {
-webkit-transition: .1s;
transition: .1s;
height: 1rem;
line-height: 1rem;
/* margin: 0 1px; */
@ -782,7 +804,7 @@ key {
}
.pageAccount table tbody tr:nth-child(odd) td {
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.1);
}
* {

2
public/css/style.css.map
View file

File diff suppressed because one or more lines are too long

65
public/css/style.scss
View file

@ -1,20 +1,12 @@
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
:root {
--main-color: #eee;
--sub-color: #444;
--bg-color: #111;
--caret-color: #fff;
--active-word-color: #444;
--roundness: 0.25rem;
:root{
--roundness: .25rem;
}
::placeholder{
color: var(--sub-color);
opacity: 1; /* Firefox */
}
/*
:root {
--main-color: #111;
--sub-color: #444;
--sub2-color: #444;
--bg-color: #fff;
} */
body {
margin: 0;
@ -82,9 +74,12 @@ a:hover {
font-size: 0.75rem;
line-height: 0.75rem;
color: var(--sub-color);
&:last-child{
border-radius: 0 0 var(--roundness) var(--roundness);
}
&.active {
color: var(--main-color);
background: rgba(0, 0, 0, 0.5);
color: var(--bg-color);
background: var(--main-color);
}
}
}
@ -225,15 +220,22 @@ a:hover {
width: fit-content;
width: -moz-fit-content;
/* transition: 0.25s; */
.button{
display: grid;
grid-auto-flow: column;
align-content: center;
transition: 0.25s;
padding: 0.5rem;
border-radius: var(--roundness);
&:focus{
background: var(--sub-color);
color: var(--main-color);
border: none;
outline: none;
}
}
}
#menu .button {
display: grid;
grid-auto-flow: column;
align-content: center;
transition: 0.25s;
padding: 0.5rem;
}
#menu .button .icon {
display: grid;
@ -558,7 +560,7 @@ key {
outline: none;
}
&:focus {
background: #0d0d0d;
background: var(--sub-color);
}
}
@ -574,8 +576,13 @@ key {
.word.error {
/* margin-bottom: 1px; */
border-bottom: 2px solid #da3333;
text-shadow: 1px 0px 0px var(--bg-color), 2px 0px 0px var(--bg-color), -1px 0px 0px var(--bg-color),
-2px 0px 0px var(--bg-color), 0px 1px 0px var(--bg-color), 1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color);
text-shadow: 1px 0px 0px var(--bg-color),
// 2px 0px 0px var(--bg-color),
-1px 0px 0px var(--bg-color),
// -2px 0px 0px var(--bg-color),
0px 1px 0px var(--bg-color),
1px 1px 0px var(--bg-color),
-1px 1px 0px var(--bg-color);
}
.word.active {
@ -583,7 +590,7 @@ key {
}
.word letter {
transition: .1s;
// transition: .1s;
height: 1rem;
line-height: 1rem;
/* margin: 0 1px; */
@ -647,7 +654,7 @@ key {
font-size: .75rem;
}
tbody tr:nth-child(odd) td{
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.1);
}
}
}

2
public/js/account.js
View file

@ -310,7 +310,7 @@ function refreshAccountPage() {
}
if (result.wpm > topWpm) {
let puncsctring = result.punctuation ? ",<br>with punctuatin" : "";
let puncsctring = result.punctuation ? ",<br>with punctuation" : "";
topWpm = result.wpm;
topMode = result.mode + " " + result.mode2 + puncsctring;
}

78
public/js/commandline.js
View file

@ -1,3 +1,7 @@
function capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
let commands = {
title: "",
list: [
@ -38,6 +42,15 @@ let commands = {
toggleKeyTips();
}
},
{
id: "changeTheme",
display: "Change theme...",
subgroup: true,
exec: () => {
currentCommands = commandsThemes;
showCommandLine();
}
},
{
id: "changeMode",
display: "Change mode...",
@ -68,6 +81,7 @@ let commands = {
]
};
let commandsWordCount = {
title: "Change word count...",
list: [
@ -180,11 +194,53 @@ let commandsTimeConfig = {
]
};
$.getJSON("themes/list.json", function(data) {
commandsThemes.list = [];
data.forEach(theme => {
commandsThemes.list.push({
id: "changeTheme" + capitalizeFirstLetter(theme),
display: theme.replace('_',' '),
hover: () => {
previewTheme(theme);
},
exec: () => {
setTheme(theme);
saveConfigToCookie();
}
})
})
});
let commandsThemes = {
title: "Change theme...",
list: [
{
id: "couldnotload",
display: "Could not load the themes list :("
}
]
};
$("#commandLine input").keyup((e) => {
if (e.keyCode == 38 || e.keyCode == 40) return;
updateSuggestedCommands();
});
$(document).ready(e => {
$(document).keydown((event) => {
//escape
if (event.keyCode == 27) {
if ($("#commandLineWrapper").hasClass("hidden")) {
currentCommands = commands;
showCommandLine();
} else {
hideCommandLine();
setTheme(config.theme);
}
}
})
})
$("#commandLine input").keydown((e) => {
if (e.keyCode == 13) {
@ -205,6 +261,7 @@ $("#commandLine input").keydown((e) => {
//up
let entries = $(".suggestions .entry");
let activenum = -1;
let hoverId;
$.each(entries, (index, obj) => {
if ($(obj).hasClass("active")) activenum = index;
});
@ -212,18 +269,29 @@ $("#commandLine input").keydown((e) => {
entries.removeClass("active");
if (activenum == 0) {
$(entries[entries.length - 1]).addClass("active");
hoverId = $(entries[entries.length - 1]).attr('command');
} else {
$(entries[--activenum]).addClass("active");
hoverId = $(entries[activenum]).attr('command');
}
}
if (e.keyCode == 40) {
entries.removeClass("active");
if (activenum + 1 == entries.length) {
$(entries[0]).addClass("active");
hoverId = $(entries[0]).attr('command');
} else {
$(entries[++activenum]).addClass("active");
hoverId = $(entries[activenum]).attr('command');
}
}
try{
$.each(currentCommands.list, (index, obj) => {
if (obj.id == hoverId) {
obj.hover();
}
});
}catch(e){}
return false;
}
@ -276,7 +344,7 @@ function updateSuggestedCommands() {
let foundcount = 0;
$.each(inputVal, (index2, obj2) => {
if (obj2 == "") return;
let re = new RegExp(obj2, "g");
let re = new RegExp("\\b"+obj2, "g");
let res = obj.display.toLowerCase().match(re);
if (res != null && res.length > 0) {
foundcount++;
@ -314,6 +382,14 @@ function displayFoundCommands() {
let entries = $("#commandLine .suggestions .entry");
if (entries.length > 0) {
$(entries[0]).addClass("active");
try{
$.each(currentCommands.list, (index, obj) => {
if (obj.found) {
obj.hover();
return false;
}
});
}catch(e){}
}
$("#commandLine .listTitle").remove();
// if(currentCommands.title != ''){

38
public/js/script.js
View file

@ -421,6 +421,13 @@ function showResult() {
labels.push(i.toString());
}
let mainColor = getComputedStyle(document.body).getPropertyValue('--main-color').replace(' ', '');
let subColor = getComputedStyle(document.body).getPropertyValue('--sub-color').replace(' ','');
wpmOverTimeChart.options.scales.xAxes[0].ticks.fontColor = subColor;
wpmOverTimeChart.options.scales.yAxes[0].ticks.fontColor = subColor;
wpmOverTimeChart.data.datasets[0].borderColor = mainColor;
wpmOverTimeChart.data.labels = labels;
wpmOverTimeChart.data.datasets[0].data = wpmHistory;
wpmOverTimeChart.update({ duration: 0 });
@ -457,8 +464,8 @@ function restartTest() {
opacity: 1
}, 125, () => {
$("#restartTestButton").css('opacity', 1);
focusWords();
if ($("#commandLineWrapper").hasClass('hidden')) focusWords();
wpmHistory = [];
hideTimer();
@ -473,7 +480,6 @@ function restartTest() {
clearInterval(timer);
timer = null;
time = 0;
focusWords();
// let oldHeight = $("#words").height();
// let newHeight = $("#words")
@ -683,9 +689,6 @@ $("#wordsInput").on("focusout", (event) => {
hideCaret();
});
$(window).resize(() => {
updateCaretPosition();
});
@ -739,15 +742,6 @@ $(document).keypress(function(event) {
//handle keyboard events
$(document).keydown((event) => {
//escape
if (event.keyCode == 27) {
if ($("#commandLineWrapper").hasClass("hidden")) {
currentCommands = commands;
showCommandLine();
} else {
hideCommandLine();
}
}
//tab
if (config.quickTab) {
@ -836,8 +830,9 @@ $(document).keydown((event) => {
}
});
loadConfigFromCookie();
$(document).ready(() => {
loadConfigFromCookie();
restartTest();
if (config.quickTab) {
$("#restartTestButton").remove();
@ -845,16 +840,16 @@ $(document).ready(() => {
$("#centerContent").css("opacity", "0").removeClass("hidden").stop(true, true).animate({ opacity: 1 }, 250);
});
var ctx = $("#wpmChart");
var wpmOverTimeChart = new Chart(ctx, {
let ctx = $("#wpmChart");
let wpmOverTimeChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: "wpm",
data: [],
backgroundColor: 'rgba(255, 255, 255, 0.25',
borderColor: 'rgba(255, 255, 255, 1)',
// backgroundColor: 'rgba(255, 255, 255, 0.25)',
borderColor: 'rgba(125, 125, 125, 1)',
borderWidth: 2
}],
},
@ -878,7 +873,7 @@ var wpmOverTimeChart = new Chart(ctx, {
scales: {
xAxes: [{
ticks: {
fontFamily: "Roboto Mono",
fontFamily: "Roboto Mono"
},
display: true,
scaleLabel: {
@ -891,6 +886,9 @@ var wpmOverTimeChart = new Chart(ctx, {
scaleLabel: {
display: false,
labelString: 'Words per Minute'
},
ticks: {
fontFamily: 'Roboto Mono'
}
}]
}

13
public/js/userconfig.js
View file

@ -1,4 +1,5 @@
let config = {
theme: 'light',
showKeyTips: true,
showLiveWpm: true,
smoothCaret: true,
@ -21,6 +22,7 @@ function loadConfigFromCookie() {
if (newConfig) {
newConfig = JSON.parse(newConfig);
config = newConfig;
setTheme(config.theme);
setQuickTabMode(config.quickTab);
setPunctuation(config.punctuation);
setKeyTips(config.showKeyTips);
@ -110,4 +112,13 @@ function togglePunctuation() {
}
config.punctuation = !config.punctuation;
saveConfigToCookie();
}
}
function previewTheme(name) {
$("#currentTheme").attr("href", `themes/${name}.css`);
}
function setTheme(name) {
config.theme = name;
$("#currentTheme").attr("href", `themes/${name}.css`);
}

11
public/themes/8008.css Normal file
View file

@ -0,0 +1,11 @@
/* Dark Blue: #3c4756
Light Blue: #a2aebd
Pink: #f44c7f */
:root {
--main-color: #f44c7f;
--sub-color: #a2aebd;
--bg-color: #3c4756;
--caret-color: #fff;
--active-word-color: #a2aebd;
}

11
public/themes/bushido.css Normal file
View file

@ -0,0 +1,11 @@
/* yellow #e2b714
dark #323437
light #d1d0c5 */
:root {
--bg-color: #414755;
--main-color: #ec4c56;
--caret-color: #ec4c56;
--sub-color: #ebeaef;
--active-word-color: #ebeaef;
}

7
public/themes/carbon.css Normal file
View file

@ -0,0 +1,7 @@
:root {
--main-color: #ed6b21;
--sub-color: #e3d9c6;
--bg-color: #575d5e;
--caret-color: #e3d9c6;
--active-word-color: #e3d9c6;
}

7
public/themes/dark.css Normal file
View file

@ -0,0 +1,7 @@
:root {
--main-color: #eee;
--sub-color: #444;
--bg-color: #111;
--caret-color: #fff;
--active-word-color: #444;
}

7
public/themes/dots.css Normal file
View file

@ -0,0 +1,7 @@
:root {
--main-color: #fff;
--sub-color: #7f88ab;
--bg-color: #121520;
--caret-color: #fff;
--active-word-color: #7f88ab;
}

7
public/themes/light.css Normal file
View file

@ -0,0 +1,7 @@
:root {
--main-color: #111;
--sub-color: #ccc;
--bg-color: #fff;
--caret-color: #111;
--active-word-color: #ccc;
}

11
public/themes/list.json Normal file
View file

@ -0,0 +1,11 @@
[
"light",
"dark",
"8008",
"carbon",
"dots",
"nautilus",
"serika",
"serika_dark",
"bushido"
]

7
public/themes/nautilus.css Normal file
View file

@ -0,0 +1,7 @@
:root {
--main-color: #eab622;
--sub-color: #1db8a8;
--bg-color: #20304a;
--caret-color: #eab622;
--active-word-color: #1db8a8;
}

11
public/themes/serika.css Normal file
View file

@ -0,0 +1,11 @@
/* yellow #e2b714
dark #323437
light #d1d0c5 */
:root {
--bg-color: #e2b714;
--main-color: #323437;
--caret-color: #323437;
--sub-color: #d1d0c5;
--active-word-color: #d1d0c5;
}

11
public/themes/serika_dark.css Normal file
View file

@ -0,0 +1,11 @@
/* yellow #e2b714
dark #323437
light #d1d0c5 */
:root {
--bg-color: #323437;
--main-color: #e2b714;
--caret-color: #e2b714;
--sub-color: #d1d0c5;
--active-word-color: #d1d0c5;
}