monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-04 20:47:54 +08:00
Code Issues Projects Releases Packages Wiki Activity

update 1

Browse source 
- added graph of wpm over time
- changed the layout
- added coming soon page
This commit is contained in:
Jack 2020-05-09 18:39:23 +01:00
parent b88c4083db
commit 80fe02c03b
11 changed files with 1362 additions and 664 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/.vscode/tasks.json → .vscode/tasks.json vendored
View file

@ -7,7 +7,7 @@
{
"label": "Sass Compile",
"type": "shell",
"command": "node-sass style.scss style.css",
"command": "node-sass public/css/style.scss public/css/style.css",
"group": "build"
}
]

18
firebase.json
View file

@ -9,12 +9,16 @@
"**/.*",
"**/node_modules/**"
],
"rewrites": [ {
"source": "**",
"destination": "/index.html"
},{
"source": "!/@(js|css)/**",
"destination": "/index.html"
} ]
"redirects": [{
"source": "/",
"destination": "/app",
"type": 301
}],
"rewrites": [{
"source": "/**",
"destination": "/app"
}],
"cleanUrls": true,
"trailingSlash": false
}
}

216
public/app.html Normal file
View file

@ -0,0 +1,216 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="css/style.css">
</head>
<body>
<div id="commandLineWrapper" class="hidden">
<div id="commandLine">
<input type="text" class="input" placeholder="Command">
<div class="separator hidden"></div>
<div class="listTitle">Title</div>
<div class="suggestions">
</div>
</div>
</div>
<div id="timerWrapper">
<div id="timer"></div>
</div>
<div id="resultScreenshot" class="">
<div class="stats">
<div class="group">
<div class="top">wpm</div>
<div class="bottom">100</div>
</div>
<div class="group">
<div class="top">key</div>
<div class="bottom">100/2</div>
</div>
<div class="group">
<div class="top">acc</div>
<div class="bottom">100%</div>
</div>
</div>
<div class="logo">
<!-- <div class="top">monkey-see</div> -->
<div class="bottom">monkey-type.com</div>
</div>
</div>
<div id="centerContent" class="hidden">
<div id="top">
<div class="logo">
<div class="top">monkey-see</div>
<div class="bottom">monkey-type</sup></div>
</div>
<div id="menu">
<div class="button" tabindex="2" href="/">
<div class="icon">
<i class="fas fa-fw fa-keyboard"></i>
</div>
<div class="text">
Test
</div>
</div>
<div class="button" tabindex="2" href="/about">
<div class="icon">
<i class="fas fa-fw fa-info"></i>
</div>
<div class="text">
About
</div>
</div>
<div class="button" tabindex="2" href="/settings">
<div class="icon">
<i class="fas fa-fw fa-cog"></i>
</div>
<div class="text">
Settings
</div>
</div>
<div class="button" tabindex="2" href="/account">
<div class="icon">
<i class="fas fa-fw fa-user"></i>
</div>
<div class="text">
Login
</div>
</div>
</div>
<div class="config">
<div class="group punctuationMode">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="button toggleButton active" tabindex="2">punctuation</div>
</div>
</div>
<div class="group mode">
<!-- <div class="title">mode</div> -->
<div class="buttons">
<div class="button" mode="time">time</div>
<div class="button active" mode="words">words</div>
<div class="button" mode="custom">custom</div>
</div>
</div>
<div class="group wordCount">
<!-- <div class="title">words</div> -->
<div class="buttons">
<div class="button" wordCount="10">10</div>
<div class="button" wordCount="25">25</div>
<div class="button active" wordCount="50">50</div>
<div class="button" wordCount="100">100</div>
<div class="button" wordCount="200">200</div>
</div>
</div>
<div class="group time hidden">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="button" timeConfig="15">15</div>
<div class="button active" timeConfig="30">30</div>
<div class="button" timeConfig="60">60</div>
<div class="button" timeConfig="120">120</div>
</div>
</div>
<div class="group customText hidden">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="button">change</div>
</div>
</div>
</div>
</div>
<div id="middle">
<div class="page pageTest">
<div id="caret" class="hidden"></div>
<div id="words" class=""></div>
<input id="wordsInput" class="" tabindex="0"></input>
<div id="result" class="hidden">
<div class="stats">
<!-- <div class="info">words 10<br>punctuation</div> -->
<div class="group info">
<div class="top">test type</div>
<div class="bottom">100</div>
</div>
<div class="group wpm">
<div class="top">wpm</div>
<div class="bottom">100</div>
</div>
<div class="group acc">
<div class="top">acc</div>
<div class="bottom">100%</div>
</div>
<div class="group key">
<div class="top">key</div>
<div class="bottom">100/1</div>
</div>
</div>
<div class="chart">
<div class="title">wpm over time</div>
<canvas id="wpmChart"></canvas>
</div>
</div>
<div id="restartTestButton" class="" tabindex="0"><i class="fas fa-redo-alt"></i></div>
</div>
<div class="page pageAbout hidden">
this is the about page
</div>
<div class="page pageAccount hidden">
<div class="register">
register
<input type="text" placeholder="name">
<input type="text" placeholder="email">
<input type="text" placeholder="password">
</div>
<div class="login">
login
<input type="text" placeholder="email">
<input type="text" placeholder="password">
</div>
</div>
</div>
<div id="bottom">
<key>tab</key> and <key>enter</key> / <key>space</key> - restart test<br>
<key>esc</key> - command line
<br><br>
Created by <a href="https://www.reddit.com/message/compose?to=Miodec">Miodec</a>
</div>
</div>
</body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.14.3/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.14.3/firebase-analytics.js"></script>
<script src="/__/firebase/7.14.3/firebase-auth.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="js/words.js"></script>
<script src="js/script.js"></script>
<script src="js/account.js"></script>
<script>
</script>
</html>

553
public/css/style.css
View file

@ -5,7 +5,8 @@
--bg-color: #111;
--caret-color: #fff;
--active-word-color: #444;
--roundness: 0.25rem; }
--roundness: 0.25rem;
}
/*
:root {
@ -20,14 +21,18 @@ body {
height: 100vh;
background: var(--bg-color);
font-family: "Roboto Mono";
color: var(--main-color); }
color: var(--main-color);
}
a {
color: var(--sub-color);
transition: 0.25s; }
-webkit-transition: 0.25s;
transition: 0.25s;
}
a:hover {
color: var(--main-color); }
color: var(--main-color);
}
#commandLineWrapper {
width: 100%;
@ -37,81 +42,122 @@ a:hover {
left: 0;
top: 0;
z-index: 1000;
display: -ms-grid;
display: grid;
justify-content: center;
align-items: start;
padding: 5rem 0; }
#commandLineWrapper #commandLine {
width: 50vw;
background: var(--bg-color);
border-radius: var(--roundness); }
#commandLineWrapper #commandLine input {
background: var(--bg-color);
padding: 1rem;
color: var(--main-color);
border: none;
outline: none;
font-size: 1rem;
font-family: "Roboto Mono";
width: 100%; }
#commandLineWrapper #commandLine .separator {
background: black;
width: 100%;
height: 1px;
margin-bottom: 0.5rem; }
#commandLineWrapper #commandLine .listTitle {
color: var(--main-color);
padding: 0.5rem 1rem;
font-size: 0.75rem;
line-height: 0.75rem; }
#commandLineWrapper #commandLine .suggestions {
display: grid; }
#commandLineWrapper #commandLine .suggestions .entry {
padding: 0.5rem 1rem;
font-size: 0.75rem;
line-height: 0.75rem;
color: var(--sub-color); }
#commandLineWrapper #commandLine .suggestions .entry.active {
color: var(--main-color);
background: rgba(0, 0, 0, 0.5); }
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
padding: 5rem 0;
}
#commandLineWrapper #commandLine {
width: 50vw;
background: var(--bg-color);
border-radius: var(--roundness);
}
#commandLineWrapper #commandLine input {
background: var(--bg-color);
padding: 1rem;
color: var(--main-color);
border: none;
outline: none;
font-size: 1rem;
font-family: "Roboto Mono";
width: 100%;
}
#commandLineWrapper #commandLine .separator {
background: black;
width: 100%;
height: 1px;
margin-bottom: 0.5rem;
}
#commandLineWrapper #commandLine .listTitle {
color: var(--main-color);
padding: 0.5rem 1rem;
font-size: 0.75rem;
line-height: 0.75rem;
}
#commandLineWrapper #commandLine .suggestions {
display: -ms-grid;
display: grid;
}
#commandLineWrapper #commandLine .suggestions .entry {
padding: 0.5rem 1rem;
font-size: 0.75rem;
line-height: 0.75rem;
color: var(--sub-color);
}
#commandLineWrapper #commandLine .suggestions .entry.active {
color: var(--main-color);
background: rgba(0, 0, 0, 0.5);
}
#resultScreenshot {
display: none;
position: absolute;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
white-space: nowrap;
padding: 0.5rem;
border-radius: 0.25rem;
background: var(--bg-color); }
#resultScreenshot .logo .top {
color: var(--sub-color);
font-size: 0.42rem;
line-height: 0.42rem;
margin-bottom: -0.3rem;
margin-left: 0.05rem;
margin: 0.5rem; }
#resultScreenshot .logo .bottom {
font-size: 0.75rem;
line-height: 0.75rem;
color: var(--sub-color);
padding: 0 0.5rem 0.5rem 0.5rem; }
#resultScreenshot .stats {
display: grid;
grid-auto-flow: column;
justify-content: space-between; }
#resultScreenshot .stats .group {
padding: 0.5rem; }
#resultScreenshot .stats .group .top {
color: var(--sub-color);
line-height: 1rem; }
#resultScreenshot .stats .group .bottom {
font-size: 1.5rem;
line-height: 1.5rem; }
background: var(--bg-color);
}
#resultScreenshot .logo .top {
color: var(--sub-color);
font-size: 0.42rem;
line-height: 0.42rem;
margin-bottom: -0.3rem;
margin-left: 0.05rem;
margin: 0.5rem;
}
#resultScreenshot .logo .bottom {
font-size: 0.75rem;
line-height: 0.75rem;
color: var(--sub-color);
padding: 0 0.5rem 0.5rem 0.5rem;
}
#resultScreenshot .stats {
display: -ms-grid;
display: grid;
grid-auto-flow: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#resultScreenshot .stats .group {
padding: 0.5rem;
}
#resultScreenshot .stats .group .top {
color: var(--sub-color);
line-height: 1rem;
}
#resultScreenshot .stats .group .bottom {
font-size: 1.5rem;
line-height: 1.5rem;
}
#timerWrapper {
opacity: 0;
-webkit-transition: 0.25s;
transition: 0.25s;
z-index: -1; }
z-index: -1;
}
#timer {
position: fixed;
@ -123,8 +169,10 @@ a:hover {
background: var(--sub-color);
/* background: #0f0f0f; */
/* background: red; */
-webkit-transition: 1s linear;
transition: 1s linear;
z-index: -1; }
z-index: -1;
}
#liveWpm {
font-size: 10rem;
@ -134,12 +182,15 @@ a:hover {
text-align: center;
z-index: -1;
height: 0;
transition: 0.25s; }
-webkit-transition: 0.25s;
transition: 0.25s;
}
#centerContent {
max-width: 800px;
min-width: 600px;
margin: 0 auto;
display: -ms-grid;
display: grid;
grid-auto-flow: row;
/* grid-template-rows: 2rem auto 1rem; */
@ -147,174 +198,259 @@ a:hover {
gap: 1rem;
/* margin-top: 1rem; */
/* margin-bottom: 1rem; */
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 999;
grid-template-rows: 1fr auto; }
-ms-grid-rows: auto 1fr auto;
grid-template-rows: auto 1fr auto;
}
#caret {
width: 2px;
height: 1.5rem;
background: var(--caret-color);
animation-name: caretFlash;
-webkit-animation-name: caretFlash;
animation-name: caretFlash;
/* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
animation-iteration-count: infinite;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 1s;
animation-duration: 1s;
position: absolute;
transition: 0.05s; }
-webkit-transition: 0.05s;
transition: 0.05s;
}
@-webkit-keyframes caretFlash {
0% {
background: transparent;
}
50% {
background: var(--caret-color);
}
100% {
background: transparent;
}
}
@keyframes caretFlash {
0% {
background: transparent; }
background: transparent;
}
50% {
background: var(--caret-color); }
background: var(--caret-color);
}
100% {
background: transparent; } }
background: transparent;
}
}
#menu {
font-size: 1rem;
line-height: 1rem;
color: var(--sub-color);
display: -ms-grid;
display: grid;
grid-auto-flow: column;
/* gap: 1rem; */
margin-bottom: -0.4rem;
width: -webkit-fit-content;
width: fit-content;
width: -moz-fit-content;
/* transition: 0.25s; */ }
/* transition: 0.25s; */
}
#menu .button {
display: -ms-grid;
display: grid;
grid-auto-flow: column;
align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-transition: 0.25s;
transition: 0.25s;
padding: 0.5rem; }
padding: 0.5rem;
}
#menu .button .icon {
display: -ms-grid;
display: grid;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-items: center;
text-align: center;
width: 1.25rem;
height: 1.25rem; }
height: 1.25rem;
}
#menu .button:hover {
cursor: pointer;
color: var(--main-color); }
color: var(--main-color);
}
#menu .button .text {
width: 0;
overflow: hidden;
/* transition: .25s; */ }
/* transition: .25s; */
}
/* #menu .button:hover .text{
width: auto;
} */
#top.focus #menu {
color: transparent; }
color: transparent;
}
#menu .separator {
width: 2px;
height: 1rem;
background-color: var(--sub-color); }
background-color: var(--sub-color);
}
#top {
line-height: 2.3rem;
font-size: 2.3rem;
/* text-align: center; */
-webkit-transition: 0.5s;
transition: 0.5s;
padding: 0 5px;
display: -ms-grid;
display: grid;
grid-auto-flow: column;
grid-template-columns: auto 1fr auto;
-ms-grid-columns: auto 1fr auto;
grid-template-columns: auto 1fr auto;
margin-bottom: 1rem;
z-index: 2;
align-items: center;
gap: 0.5rem; }
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
}
#top .logo {
margin-bottom: -0.12rem;
white-space: nowrap; }
white-space: nowrap;
}
#top .logo .top {
font-size: 0.65rem;
line-height: 0.65rem;
margin-bottom: -0.4rem;
margin-left: -0.1rem;
color: var(--sub-color); }
color: var(--sub-color);
}
#top .logo .bottom {
margin-left: -0.15rem; }
margin-left: -0.15rem;
}
#top .config {
display: -ms-grid;
display: grid;
grid-auto-flow: row;
grid-gap: 0.2rem;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
-webkit-transition: 0.25s;
transition: 0.25s;
/* margin-bottom: 0.1rem; */
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-column: 3/4;
grid-row: 1/2; }
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1/2;
}
#top .config .group {
transition: 0.25s; }
-webkit-transition: 0.25s;
transition: 0.25s;
}
#top .config .punctuationMode {
margin-bottom: -0.1rem; }
margin-bottom: -0.1rem;
}
#top .config .group .buttons {
font-size: 0.7rem;
line-height: 0.7rem;
display: flex; }
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#top .config .group .buttons .button {
-webkit-transition: 0.25s;
transition: 0.25s;
color: var(--sub-color);
cursor: pointer;
margin-right: 0.25rem; }
margin-right: 0.25rem;
}
#top .config .group .buttons .button:last-child {
margin-right: 0; }
margin-right: 0;
}
#top .config .group .buttons .button:hover {
color: var(--main-color); }
color: var(--main-color);
}
#top .config .group .buttons .button.active:hover {
cursor: default; }
cursor: default;
}
#top .config .group .buttons .toggleButton.active:hover {
cursor: pointer; }
cursor: pointer;
}
#top .config .group .buttons .button.active {
color: var(--main-color); }
color: var(--main-color);
}
#top .config .group .title {
color: var(--sub-color);
font-size: 0.5rem;
line-height: 0.5rem;
margin-bottom: 0.15rem; }
margin-bottom: 0.15rem;
}
#top .result {
display: -ms-grid;
display: grid;
grid-auto-flow: column;
grid-gap: 1rem;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
-webkit-transition: 0.25s;
transition: 0.25s;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-column: 3/4;
grid-row: 1/2; }
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1/2;
}
#top.focus .result {
opacity: 0 !important; }
opacity: 0 !important;
}
#top .result .group .title {
font-size: 0.65rem;
line-height: 0.65rem;
color: var(--sub-color); }
color: var(--sub-color);
}
#top .result .group .val {
font-size: 1.7rem;
line-height: 1.7rem;
color: var(--main-color);
transition: 0.25s; }
-webkit-transition: 0.25s;
transition: 0.25s;
}
#tip {
font-size: 0.75rem;
@ -322,60 +458,147 @@ a:hover {
color: var(--sub-color);
text-align: center;
/* margin-top: 1rem; */
align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-top: 1rem;
opacity: 0;
transition: 0.25s; }
-webkit-transition: 0.25s;
transition: 0.25s;
}
key {
color: var(--bg-color);
background-color: var(--sub-color);
/* font-weight: bold; */
padding: 3px 5px;
margin: 3px 0;
border-radius: 0.1rem;
display: inline-block; }
display: inline-block;
}
#bottom {
text-align: center;
line-height: 1rem;
font-size: 0.75rem;
color: var(--sub-color);
transition: 0.5s; }
-webkit-transition: 0.5s;
transition: 0.5s;
}
#top.focus {
color: var(--sub-color) !important; }
color: var(--sub-color) !important;
}
#top.focus .config {
opacity: 0 !important; }
opacity: 0 !important;
}
#bottom.focus {
opacity: 0 !important; }
opacity: 0 !important;
}
#middle {
/* display:grid; */
/* align-items: center; */
/* justify-content: center; */
z-index: 999; }
z-index: 999;
}
#result {
height: 400px;
display: -ms-grid;
display: grid;
justify-content: center;
align-items: center; }
#result .groups {
display: grid;
grid-auto-flow: column;
gap: 1rem;
width: min-content; }
-ms-grid-columns: auto 1fr;
grid-template-columns: auto 1fr;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#result .group .title {
#result .chart {
height: 100%;
}
#result .chart .title {
color: var(--sub-color);
line-height: 1rem; }
margin-bottom: 1rem;
}
#result .group .val {
#result .stats {
display: -ms-grid;
display: grid;
gap: 1rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
grid-template-areas: "wpm acc" "wpm key" "info info";
}
#result .stats .group .top {
color: var(--sub-color);
font-size: 1rem;
line-height: 1rem;
}
#result .stats .group .bottom {
color: var(--main-color);
font-size: 2rem;
line-height: 2rem; }
line-height: 2rem;
}
#result .stats .info {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: info;
color: var(--sub-color);
}
#result .stats .info .top {
font-size: 1rem;
line-height: 1.25rem;
}
#result .stats .info .bottom {
font-size: 1rem;
line-height: 1rem;
}
#result .stats .wpm {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
grid-area: wpm;
}
#result .stats .wpm .top {
font-size: 3rem;
line-height: 3rem;
}
#result .stats .wpm .bottom {
font-size: 4rem;
line-height: 4rem;
}
#result .stats .acc {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: acc;
}
#result .stats .key {
-ms-grid-row: 2;
-ms-grid-column: 2;
grid-area: key;
}
#wordsInput {
height: 0;
@ -383,67 +606,101 @@ key {
margin: 0;
border: none;
outline: none;
display: block; }
display: block;
}
#words {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
align-content: flex-start;
user-select: none; }
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#restartTestButton {
opacity: 0;
border-radius: var(--roundness);
padding: 1rem 5rem;
width: -webkit-min-content;
width: min-content;
width: -moz-min-content;
color: var(--sub-color);
-webkit-transition: 0.25s;
transition: 0.25s;
margin: 0 auto 0 auto;
cursor: pointer; }
#restartTestButton:hover, #restartTestButton:focus {
color: var(--main-color);
outline: none; }
#restartTestButton:focus {
background: #0d0d0d; }
margin: 1rem auto 0 auto;
cursor: pointer;
}
#restartTestButton:hover, #restartTestButton:focus {
color: var(--main-color);
outline: none;
}
#restartTestButton:focus {
background: #0d0d0d;
}
.word {
margin: 5px 5px;
color: var(--sub-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: 0.25s;
transition: 0.25s;
/* margin-bottom: 1px; */
border-bottom: 2px solid transparent; }
border-bottom: 2px solid transparent;
}
.word.error {
/* margin-bottom: 1px; */
border-bottom: 2px solid #da3333;
text-shadow: 1px 0px 0px #111, 2px 0px 0px #111, -1px 0px 0px #111, -2px 0px 0px #111, 0px 1px 0px #111, 1px 1px 0px #111, -1px 1px 0px #111; }
text-shadow: 1px 0px 0px #111, 2px 0px 0px #111, -1px 0px 0px #111, -2px 0px 0px #111, 0px 1px 0px #111, 1px 1px 0px #111, -1px 1px 0px #111;
}
.word.active {
color: var(--active-word-color); }
color: var(--active-word-color);
}
.word letter {
/* transition: 0.1s; */
height: 1rem;
line-height: 1rem;
/* margin: 0 1px; */ }
/* margin: 0 1px; */
}
.word letter.correct {
color: var(--main-color); }
color: var(--main-color);
}
.word letter.incorrect {
color: #da3333; }
color: #da3333;
}
.word letter.incorrect.extra {
color: #791717; }
color: #791717;
}
.word letter.missing {
opacity: 0.5; }
opacity: 0.5;
}
* {
box-sizing: border-box; }
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.hidden {
display: none !important; }
display: none !important;
}
/*# sourceMappingURL=style.css.map */

9
public/css/style.css.map Normal file
View file

File diff suppressed because one or more lines are too long

84
public/css/style.scss
View file

@ -183,7 +183,7 @@ a:hover {
/* margin-bottom: 1rem; */
align-items: center;
z-index: 999;
grid-template-rows: 1fr auto;
grid-template-rows: auto 1fr auto;
}
#caret {
@ -401,6 +401,7 @@ key {
background-color: var(--sub-color);
/* font-weight: bold; */
padding: 3px 5px;
margin: 3px 0;
border-radius: 0.1rem;
display: inline-block;
}
@ -433,28 +434,72 @@ key {
}
#result {
height: 400px;
display: grid;
// height: 200px;
gap: 1rem;
grid-template-columns: auto 1fr;
justify-content: center;
align-items: center;
.chart{
.title{
color: var(--sub-color);
margin-bottom: 1rem;
}
height: 100%;
}
.stats{
display: grid;
gap: 1rem;
justify-content: center;
align-items: center;
grid-template-areas:
"wpm acc"
"wpm key"
"info info";
.group{
.top{
color: var(--sub-color);
font-size: 1rem;
line-height: 1rem;
}
.bottom{
color: var(--main-color);
font-size: 2rem;
line-height: 2rem;
}
}
.info{
grid-area: info;
color: var(--sub-color);
.top{
font-size: 1rem;
line-height: 1.25rem;
}
.bottom{
font-size: 1rem;
line-height: 1rem;
}
}
.wpm{
grid-area: wpm;
.top{
font-size: 3rem;
line-height: 3rem;
}
.bottom{
font-size: 4rem;
line-height: 4rem;
}
}
.acc{
grid-area: acc;
}
.key{
grid-area: key;
}
}
}
#result .groups {
display: grid;
grid-auto-flow: column;
gap: 1rem;
width: min-content;
}
#result .group .title {
color: var(--sub-color);
line-height: 1rem;
}
#result .group .val {
font-size: 2rem;
line-height: 2rem;
}
#wordsInput {
height: 0;
@ -475,13 +520,14 @@ key {
}
#restartTestButton {
opacity: 0;
border-radius: var(--roundness);
padding: 1rem 5rem;
width: min-content;
width: -moz-min-content;
color: var(--sub-color);
transition: 0.25s;
margin: 0 auto 0 auto;
margin: 1rem auto 0 auto;
cursor: pointer;
&:hover,
&:focus {

164
public/index.html
View file

@ -1,164 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="commandLineWrapper" class="hidden">
<div id="commandLine">
<input type="text" class="input" placeholder="Command">
<div class="separator hidden"></div>
<div class="listTitle">Title</div>
<div class="suggestions">
</div>
</div>
</div>
<div id="timerWrapper">
<div id="timer"></div>
</div>
<div id="resultScreenshot" class="">
<div class="stats">
<div class="group">
<div class="top">wpm</div>
<div class="bottom">100</div>
</div>
<div class="group">
<div class="top">key</div>
<div class="bottom">100/2</div>
</div>
<div class="group">
<div class="top">acc</div>
<div class="bottom">100%</div>
</div>
</div>
<div class="logo">
<!-- <div class="top">monkey-see</div> -->
<div class="bottom">monkey-type.com</div>
</div>
</div>
<div id="centerContent" class="hidden">
<div id="middle">
<div id="top">
<div class="logo">
<div class="top">monkey-see</div>
<div class="bottom">monkey-type</sup></div>
</div>
<div id="menu">
<div class="button" tabindex="2">
<div class="icon">
<i class="fas fa-fw fa-keyboard"></i>
</div>
<div class="text">
Test
</div>
</div>
<div class="button" tabindex="2">
<div class="icon">
<i class="fas fa-fw fa-info"></i>
</div>
<div class="text">
About
</div>
</div>
<div class="button" tabindex="2">
<div class="icon">
<i class="fas fa-fw fa-cog"></i>
</div>
<div class="text">
Settings
</div>
</div>
<div class="button" tabindex="2">
<div class="icon">
<i class="fas fa-fw fa-user"></i>
</div>
<div class="text">
Login
</div>
</div>
</div>
<div class="result hidden">
<div class="group testmode" style="align-self: center">
<div class="title mode1">words</div>
<div class="title mode2">100</div>
<div class="title mode3">100</div>
</div>
<div class="group key">
<div class="title">key</div>
<div class="val">100/1</div>
</div>
<div class="group acc">
<div class="title">acc</div>
<div class="val">95%</div>
</div>
<div class="group wpm">
<div class="title">wpm</div>
<div class="val">100</div>
</div>
</div>
<div class="config">
<div class="group punctuationMode">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="button toggleButton active" tabindex="2">punctuation</div>
</div>
</div>
<div class="group mode">
<!-- <div class="title">mode</div> -->
<div class="buttons">
<div class="button" mode="time">time</div>
<div class="button active" mode="words">words</div>
<div class="button" mode="custom">custom</div>
</div>
</div>
<div class="group wordCount">
<!-- <div class="title">words</div> -->
<div class="buttons">
<div class="button" wordCount="10">10</div>
<div class="button" wordCount="25">25</div>
<div class="button active" wordCount="50">50</div>
<div class="button" wordCount="100">100</div>
<div class="button" wordCount="200">200</div>
</div>
</div>
<div class="group time hidden">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="button" timeConfig="15">15</div>
<div class="button active" timeConfig="30">30</div>
<div class="button" timeConfig="60">60</div>
<div class="button" timeConfig="120">120</div>
</div>
</div>
<div class="group customText hidden">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="button">change</div>
</div>
</div>
</div>
</div>
<div id="caret" class="hidden"></div>
<div id="words" class=""></div>
<input id="wordsInput" class="" tabindex="0"></input>
<div id="restartTestButton" tabindex="0"><i class="fas fa-redo-alt"></i></div>
<!-- <div id="liveWpm" class="">-</div> -->
</div>
<div id="bottom">
Hey, im optimising the website for keyboard only use, so from now to restart the test press <key>tab</key> and then <key>enter</key> / <key>space</key> (also so its simmilar to other typing tests). If some of you really like this quick test restart I guess I could add a setting for it :P
<br><br>
Created by <a href="https://www.reddit.com/message/compose?to=Miodec">Miodec</a>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</html>

55
public/js/account.js Normal file
View file

@ -0,0 +1,55 @@
$(".pageAccount .register input").keyup(e => {
if (e.key == "Enter") {
let name = $(".pageAccount .register input")[0].value;
let email = $(".pageAccount .register input")[1].value;
let password = $(".pageAccount .register input")[2].value;
firebase.auth().createUserWithEmailAndPassword(email, password).then(user => {
// Account has been created here.
let usr = user.user;
usr.updateProfile({
displayName: name
}).then(function() {
// Update successful.
alert('user created');
}).catch(function(error) {
// An error happened.
usr.delete().then(function() {
// User deleted.
alert('cant have this display name');
}).catch(function(error) {
// An error happened.
});
});
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert(errorMessage);
});
}
})
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var isAnonymous = user.isAnonymous;
var uid = user.uid;
var providerData = user.providerData;
console.log('user signed in');
// ...
} else {
// User is signed out.
// ...
}
});

655
public/js/script.js
View file

@ -1,227 +1,24 @@
var words = [
"the",
"be",
"of",
"and",
"a",
"to",
"in",
"he",
"have",
"it",
"that",
"for",
"they",
"I",
"with",
"as",
"not",
"on",
"she",
"at",
"by",
"this",
"we",
"you",
"do",
"but",
"from",
"or",
"which",
"one",
"would",
"all",
"will",
"there",
"say",
"who",
"make",
"when",
"can",
"more",
"if",
"no",
"man",
"out",
"other",
"so",
"what",
"time",
"up",
"go",
"about",
"than",
"into",
"could",
"state",
"only",
"new",
"year",
"some",
"take",
"come",
"these",
"know",
"see",
"use",
"get",
"like",
"then",
"first",
"any",
"work",
"now",
"may",
"such",
"give",
"over",
"think",
"most",
"even",
"find",
"day",
"also",
"after",
"way",
"many",
"must",
"look",
"before",
"great",
"back",
"through",
"long",
"where",
"much",
"should",
"well",
"people",
"down",
"own",
"just",
"because",
"good",
"each",
"those",
"feel",
"seem",
"how",
"high",
"too",
"place",
"little",
"world",
"very",
"still",
"nation",
"hand",
"old",
"life",
"tell",
"write",
"become",
"here",
"show",
"house",
"both",
"between",
"need",
"mean",
"call",
"develop",
"under",
"last",
"right",
"move",
"thing",
"general",
"school",
"never",
"same",
"another",
"begin",
"while",
"number",
"part",
"turn",
"real",
"leave",
"might",
"want",
"point",
"form",
"off",
"child",
"few",
"small",
"since",
"against",
"ask",
"late",
"home",
"interest",
"large",
"person",
"end",
"open",
"public",
"follow",
"during",
"present",
"without",
"again",
"hold",
"govern",
"around",
"possible",
"head",
"consider",
"word",
"program",
"problem",
"however",
"lead",
"system",
"set",
"order",
"eye",
"plan",
"run",
"keep",
"face",
"fact",
"group",
"play",
"stand",
"increase",
"early",
"course",
"change",
"help",
"line"
];
let wordsList = [];
let currentWordIndex = 0;
let inputHistory = [];
let currentInput = "";
let wordsConfig = 100;
let timeConfig = 30;
let time = timeConfig;
let time = 0;
let timer = null;
let testActive = false;
let testMode = "words";
let testStart, testEnd;
let missedChars = 0;
// let focus = false;
let punctuationMode = true;
let wpmHistory = [];
let customText = "The quick brown fox jumped over the lazy dog";
let customText = "The quick brown fox jumps over the lazy dog";
function test() {
$("#resultScreenshot").removeClass("hidden");
html2canvas($("#resultScreenshot"), {
onclone: function (clonedDoc) {
onclone: function(clonedDoc) {
clonedDoc.getElementById("resultScreenshot").style.display = "block";
}
}).then((canvas) => {
@ -439,6 +236,7 @@ function hideCaret() {
}
function showCaret() {
updateCaretPosition();
$("#caret").removeClass("hidden");
startCaretAnimation();
}
@ -518,22 +316,16 @@ function calculateStats() {
avgWordLen = totalChars / inputHistory.length;
// console.log(avgWordLen);
avgWordLen = 5;
let testSeconds = (testEnd - testStart) / 1000;
let wpm = 0;
if (testMode == "time") {
wpm = (correctChars * (60 / timeConfig)) / avgWordLen;
} else if (testMode == "words" || testMode == "custom") {
wpm = (correctChars * (60 / testSeconds)) / avgWordLen;
}
wpm = calculateWpm();
// let acc = (correctChars / totalChars) * 100;
let acc = ((totalChars - missedChars) / totalChars) * 100;
let key = correctChars + "/" + (totalChars - correctChars);
return { wpm: Math.round(wpm), acc: acc, key: key };
return { wpm: wpm, acc: acc, key: key };
}
function liveWPM() {
function calculateWpm() {
let testNow = Date.now();
let testSeconds = Math.round((testNow - testStart) / 1000);
let testSeconds = (testNow - testStart) / 1000;
let correctChars = 0;
for (let i = 0; i < inputHistory.length; i++) {
for (let c = 0; c < wordsList[i].length; c++) {
@ -541,27 +333,33 @@ function liveWPM() {
if (inputHistory[i][c] == wordsList[i][c]) {
correctChars++;
}
} catch (err) {}
} catch (err) { }
}
correctChars++;
}
wpm = (correctChars * (60 / testSeconds)) / 5;
if (wpm > 0) {
if ($("#liveWpm").css("opacity") == 0) {
$("#liveWpm").css("opacity", 0.25);
}
if (wpm < 100) {
$("#liveWpm").html("&nbsp;" + Math.round(wpm).toString());
$("#liveWpm").css("margin-left", "-3rem");
} else {
$("#liveWpm").text(Math.round(wpm));
$("#liveWpm").css("margin-left", 0);
}
}
return Math.round(wpm);
}
function liveWPM() {
wpm = calculateWpm();
// if (wpm > 0) {
// if ($("#liveWpm").css("opacity") == 0) {
// $("#liveWpm").css("opacity", 0.25);
// }
// if (wpm < 100) {
// $("#liveWpm").html("&nbsp;" + Math.round(wpm).toString());
// $("#liveWpm").css("margin-left", "-3rem");
// } else {
// $("#liveWpm").text(Math.round(wpm));
// $("#liveWpm").css("margin-left", 0);
// }
// }
}
function showResult() {
testEnd = Date.now();
testActive = false;
let stats = calculateStats();
$("#top .result .wpm .val").text(stats.wpm);
$("#top .result .acc .val").text(Math.round(stats.acc) + "%");
@ -577,7 +375,6 @@ function showResult() {
} else {
$("#top .result .testmode .mode3").text("");
}
testActive = false;
$("#top .config").addClass("hidden");
$("#top .result")
.removeClass("hidden")
@ -610,78 +407,200 @@ function showResult() {
// },
// 250
// );
console.log(wpmHistory);
}
var ctx = $("#wpmChart");
var wpmHistoryChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: "wpm",
data: [],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
],
borderWidth: 1
}],
},
options: {
legend: {
display: false,
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Seconds'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Words per Minute'
}
}]
}
}
});
function showResult2() {
testEnd = Date.now();
let stats = calculateStats();
clearInterval(timer);
timer = null;
$("#result .stats .wpm .bottom").text(stats.wpm);
$("#result .stats .acc .bottom").text(Math.round(stats.acc) + "%");
$("#result .stats .key .bottom").text(stats.key);
let infoText = "";
infoText = testMode;
if (testMode == "time") {
infoText += " "+timeConfig
} else if (testMode == "words") {
infoText += " "+wordsConfig
}
if (punctuationMode) {
infoText += " with punctuation"
}
$("#result .stats .info .bottom").html(infoText);
testActive = false;
setFocus(false);
hideCaret();
let labels = [];
for (let i = 1; i <= wpmHistory.length; i++){
labels.push(i);
}
wpmHistoryChart.data.labels = labels;
wpmHistoryChart.data.datasets[0].data = wpmHistory;
wpmHistoryChart.update({ duration: 0 });
$("#words").animate({
opacity: 0
}, 125, () => {
$("#words").addClass('hidden');
$("#result").css('opacity', 0).removeClass('hidden');
$("#result").animate({
opacity: 1
}, 125);
})
// $("#words").addClass("hidden");
// $("#result").removeClass('hidden');
}
function updateTimer() {
liveWPM();
let percent = ((time - 1) / timeConfig) * 100;
let percent = ((time + 1) / timeConfig) * 100;
$("#timer")
.stop(true, true)
.css("width", 100 - percent + "vw");
.css("width", percent + "vw");
}
function restartTest() {
let oldHeight = $("#words").height();
let resultShown = !$("#top .result").hasClass("hidden");
$("#top .result")
.css("opacity", "1")
.css("transition", "none")
.stop(true, true)
.animate({ opacity: 0 }, 250, () => {
$("#top .result").addClass("hidden").css("transition", "0.25s");
if (testActive || resultShown) {
$("#top .config")
.css("opacity", "0")
.removeClass("hidden")
.css("transition", "none")
.stop(true, true)
.animate({ opacity: 1 }, 250, () => {
$("#top .config").css("transition", "0.25s");
});
}
});
let fadetime = 125;
setFocus(false);
$("#liveWpm").css("opacity", 0);
$("#wordsInput").focus();
initWords();
if ($("#words").hasClass("hidden")) fadetime = 125;
$("#words").animate({ opacity: 0 }, 125);
$("#result").animate({
opacity: 0
}, 125, () => {
initWords();
$("#result").addClass('hidden');
$("#words").css('opacity', 0).removeClass('hidden');
$("#words").animate({
opacity: 1
}, 125, () => {
$("#restartTestButton").css('opacity',1);
focusWords();
// $("#top .result")
// .css("opacity", "1")
// .css("transition", "none")
// .stop(true, true)
// .animate({ opacity: 0 }, 250, () => {
// $("#top .result").addClass("hidden").css("transition", "0.25s");
// if (testActive || resultShown) {
// $("#top .config")
// .css("opacity", "0")
// .removeClass("hidden")
// .css("transition", "none")
// .stop(true, true)
// .animate({ opacity: 1 }, 250, () => {
// $("#top .config").css("transition", "0.25s");
// });
// }
// });
testActive = false;
startCaretAnimation();
if (testMode == "time") {
hideTimer();
setTimeout(function () {
$("#timer")
.css("transition", "none")
.css("width", "0vw")
.animate({ top: 0 }, 0, () => {
$("#timer").css("transition", "1s linear");
});
}, 250);
clearInterval(timer);
timer = null;
time = timeConfig;
}
let newHeight = $("#words")
.css("height", "fit-content")
.css("height", "-moz-fit-content")
.height();
if (testMode == "words" || testMode == "custom") {
$("#words")
.stop(true, true)
.css("height", oldHeight)
.animate({ height: newHeight }, 250, () => {
$("#words")
.css("height", "fit-content")
.css("height", "-moz-fit-content");
updateCaretPosition();
wpmHistory = [];
hideTimer();
setTimeout(function() {
$("#timer")
.css("transition", "none")
.css("width", "0vw")
.animate({ top: 0 }, 0, () => {
$("#timer").css("transition", "1s linear");
});
} else if (testMode == "time") {
$("#words")
.stop(true, true)
.css("height", oldHeight)
.animate({ height: 78 }, 250, () => {
updateCaretPosition();
});
}
}, 250);
clearInterval(timer);
timer = null;
time = 0;
focusWords();
// let oldHeight = $("#words").height();
// let newHeight = $("#words")
// .css("height", "fit-content")
// .css("height", "-moz-fit-content")
// .height();
// if (testMode == "words" || testMode == "custom") {
// $("#words")
// .stop(true, true)
// .css("height", oldHeight)
// .animate({ height: newHeight }, 250, () => {
// $("#words")
// .css("height", "fit-content")
// .css("height", "-moz-fit-content");
// $("#wordsInput").focus();
// updateCaretPosition();
// });
// } else if (testMode == "time") {
// $("#words")
// .stop(true, true)
// .css("height", oldHeight)
// .animate({ height: 78 }, 250, () => {
// $("#wordsInput").focus();
// updateCaretPosition();
// });
// }
});
})
}
function changeCustomText() {
@ -692,7 +611,7 @@ function changeCustomText() {
function timesUp() {
hideCaret();
testActive = false;
showResult();
showResult2();
}
function compareInput() {
@ -723,7 +642,7 @@ function compareInput() {
if (currentWord == currentInput && currentWordIndex == wordsList.length - 1) {
inputHistory.push(currentInput);
currentInput = "";
showResult();
showResult2();
}
$(".word.active").html(ret);
// liveWPM()
@ -731,15 +650,15 @@ function compareInput() {
$(document).ready(() => {
$("#centerContent").css("opacity", "0").removeClass("hidden");
initWords();
// initWords();
$("#centerContent")
.stop(true, true)
.animate({ opacity: 1 }, 250, () => {
updateCaretPosition();
});
$("#words").click((e) => {
$("#wordsInput").focus();
});
togglePunctuation();
changeWordCount(10);
restartTest();
});
$(document).on("click", "#top .config .wordCount .button", (e) => {
@ -776,8 +695,17 @@ $(document).on("click", "#top .config .customText .button", (e) => {
$(document).on("click", "#top .config .punctuationMode .button", (e) => {
togglePunctuation();
restartTest();
});
$("#words").click((e) => {
focusWords();
});
function focusWords() {
$("#wordsInput").focus();
}
function togglePunctuation() {
if (punctuationMode) {
$("#top .config .punctuationMode .button").removeClass("active");
@ -785,15 +713,48 @@ function togglePunctuation() {
$("#top .config .punctuationMode .button").addClass("active");
}
punctuationMode = !punctuationMode;
restartTest();
}
$(document).on("click", "#top .config .mode .button", (e) => {
if ($(e.currentTarget).hasClass("active")) return;
mode = e.currentTarget.innerHTML;
changeMode(mode);
restartTest();
});
$(document).on("click", "#top #menu .button", (e) => {
href = $(e.currentTarget).attr('href');
history.pushState(href, null, href);
changePage(href.replace('/', ''));
})
$(window).on('popstate', (e) => {
if (e.originalEvent.state == "") {
// show test
changePage('test')
} else if (e.originalEvent.state == "about") {
// show about
changePage("about");
} else if (e.originalEvent.state == "account") {
changePage("account")
}
})
function changePage(page) {
$(".page").addClass('hidden');
$("#wordsInput").focusout();
if (page == "test" || page == "") {
$(".page.pageTest").removeClass('hidden');
focusWords();
} else if (page == "about") {
$(".page.pageAbout").removeClass('hidden');
} else if (page == "account") {
$(".page.pageAccount").removeClass('hidden');
}
}
function changeMode(mode) {
testMode = mode;
$("#top .config .mode .button").removeClass("active");
@ -814,13 +775,11 @@ function changeMode(mode) {
$("#top .config .customText").removeClass("hidden");
$("#top .config .punctuationMode").addClass("hidden");
}
restartTest();
}
$("#restartTestButton").keypress((event) => {
if (event.keyCode == 32 || event.keyCode == 13) {
restartTest();
$("#wordsInput").focus();
}
});
@ -842,7 +801,9 @@ $("#wordsInput").on("focusout", (event) => {
hideCaret();
});
$(document).keypress(function (event) {
$(document).keypress(function(event) {
if (!$("#wordsInput").is(":focus")) return;
if (event["keyCode"] == 13) return;
if (event["keyCode"] == 32) return;
@ -852,16 +813,20 @@ $(document).keypress(function (event) {
testStart = Date.now();
if (testMode == "time") {
showTimer();
}
updateTimer();
timer = setInterval(function() {
time++;
updateTimer();
timer = setInterval(function () {
time--;
updateTimer();
if (time == 0) {
let wpm = calculateWpm();
wpmHistory.push(wpm);
if (testMode == "time") {
if (time == timeConfig) {
clearInterval(timer);
timesUp();
}
}, 1000);
}
}
}, 1000);
} else {
if (!testActive) return;
}
@ -883,7 +848,7 @@ $(window).resize(() => {
updateCaretPosition();
});
$(document).mousemove(function (event) {
$(document).mousemove(function(event) {
setFocus(false);
});
@ -906,7 +871,7 @@ $(document).keydown((event) => {
if (currentInput == "" && inputHistory.length > 0) {
if (
inputHistory[currentWordIndex - 1] ==
wordsList[currentWordIndex - 1] ||
wordsList[currentWordIndex - 1] ||
$($(".word")[currentWordIndex - 1]).hasClass("hidden")
) {
return;
@ -965,7 +930,7 @@ $(document).keydown((event) => {
currentInput = "";
currentWordIndex++;
if (currentWordIndex == wordsList.length) {
showResult();
showResult2();
return;
}
updateActiveElement();
@ -984,7 +949,10 @@ let commands = {
{
id: "togglePunctuation",
display: "Toggle punctuation",
exec: () => togglePunctuation()
exec: () => {
togglePunctuation();
restartTest();
}
},
{
id: "changeMode",
@ -1022,27 +990,42 @@ let commandsWordCount = {
{
id: "changeWordCount10",
display: "10",
exec: () => changeWordCount("10")
exec: () => {
changeWordCount("10");
restartTest();
}
},
{
id: "changeWordCount25",
display: "25",
exec: () => changeWordCount("25")
exec: () => {
changeWordCount("25");
restartTest();
}
},
{
id: "changeWordCount50",
display: "50",
exec: () => changeWordCount("50")
exec: () => {
changeWordCount("50");
restartTest();
}
},
{
id: "changeWordCount100",
display: "100",
exec: () => changeWordCount("100")
exec: () => {
changeWordCount("100");
restartTest();
}
},
{
id: "changeWordCount200",
display: "200",
exec: () => changeWordCount("200")
exec: () => {
changeWordCount("200");
restartTest();
}
}
]
};
@ -1052,17 +1035,26 @@ let commandsMode = {
{
id: "changeModeTime",
display: "time",
exec: () => changeMode("time")
exec: () => {
changeMode("time");
restartTest();
}
},
{
id: "changeModeWords",
display: "words",
exec: () => changeMode("words")
exec: () => {
changeMode("words");
restartTest();
}
},
{
id: "changeModeCustom",
display: "custom",
exec: () => changeMode("custom")
exec: () => {
changeMode("custom");
restartTest();
}
}
]
};
@ -1072,22 +1064,34 @@ let commandsTimeConfig = {
{
id: "changeTimeConfig15",
display: "15",
exec: () => changeTimeConfig("15")
exec: () => {
changeTimeConfig("15");
restartTest();
}
},
{
id: "changeTimeConfig30",
display: "30",
exec: () => changeTimeConfig("30")
exec: () => {
changeTimeConfig("30");
restartTest();
}
},
{
id: "changeTimeConfig60",
display: "60",
exec: () => changeTimeConfig("60")
exec: () => {
changeTimeConfig("60");
restartTest();
}
},
{
id: "changeTimeConfig120",
display: "120",
exec: () => changeTimeConfig("120")
exec: () => {
changeTimeConfig("120");
restartTest();
}
}
]
};
@ -1155,7 +1159,7 @@ function hideCommandLine() {
$("#commandLineWrapper").addClass("hidden");
}
);
$("#wordsInput").focus();
focusWords();
}
function showCommandLine() {
@ -1231,3 +1235,4 @@ function displayFoundCommands() {
// $("#commandLine .suggestions").before("<div class='listTitle'>"+currentCommands.title+"</div>");
// }
}

202
public/js/words.js Normal file
View file

@ -0,0 +1,202 @@
var words = [
"the",
"be",
"of",
"and",
"a",
"to",
"in",
"he",
"have",
"it",
"that",
"for",
"they",
"I",
"with",
"as",
"not",
"on",
"she",
"at",
"by",
"this",
"we",
"you",
"do",
"but",
"from",
"or",
"which",
"one",
"would",
"all",
"will",
"there",
"say",
"who",
"make",
"when",
"can",
"more",
"if",
"no",
"man",
"out",
"other",
"so",
"what",
"time",
"up",
"go",
"about",
"than",
"into",
"could",
"state",
"only",
"new",
"year",
"some",
"take",
"come",
"these",
"know",
"see",
"use",
"get",
"like",
"then",
"first",
"any",
"work",
"now",
"may",
"such",
"give",
"over",
"think",
"most",
"even",
"find",
"day",
"also",
"after",
"way",
"many",
"must",
"look",
"before",
"great",
"back",
"through",
"long",
"where",
"much",
"should",
"well",
"people",
"down",
"own",
"just",
"because",
"good",
"each",
"those",
"feel",
"seem",
"how",
"high",
"too",
"place",
"little",
"world",
"very",
"still",
"nation",
"hand",
"old",
"life",
"tell",
"write",
"become",
"here",
"show",
"house",
"both",
"between",
"need",
"mean",
"call",
"develop",
"under",
"last",
"right",
"move",
"thing",
"general",
"school",
"never",
"same",
"another",
"begin",
"while",
"number",
"part",
"turn",
"real",
"leave",
"might",
"want",
"point",
"form",
"off",
"child",
"few",
"small",
"since",
"against",
"ask",
"late",
"home",
"interest",
"large",
"person",
"end",
"open",
"public",
"follow",
"during",
"present",
"without",
"again",
"hold",
"govern",
"around",
"possible",
"head",
"consider",
"word",
"program",
"problem",
"however",
"lead",
"system",
"set",
"order",
"eye",
"plan",
"run",
"keep",
"face",
"fact",
"group",
"play",
"stand",
"increase",
"early",
"course",
"change",
"help",
"line"
];

68
public/soon2.html Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monkey Type - Coming Soon!</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
<style>
*{
font-family: "Roboto Mono";
color: var(--main-color);
}
:root {
--main-color: #eee;
--sub-color: #444;
--bg-color: #111;
--caret-color: #fff;
--active-word-color: #444;
--roundness: 0.25rem;
}
body{
background-color: var(--bg-color);
width: 100vw;
height: 100vh;
display: grid;
align-content: center;
justify-content: center;
padding: 0;
margin: 0;
}
.grid{
display: grid;
gap: 1rem;
}
.logo {
margin-bottom: -0.12rem;
white-space: nowrap;
}
.logo .top {
font-size: 0.65rem;
line-height: 0.65rem;
margin-bottom: -0.4rem;
margin-left: -0.1rem;
color: var(--sub-color);
}
.logo .bottom {
margin-left: -0.15rem;
font-size: 2.3rem;
line-height: 2.3rem;
}
.soon{
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<div class="logo">
<div class="top">monkey-see</div>
<div class="bottom">monkey-type</div>
</div>
<div class="soon">Coming very soon...</div>
</div>
</body>
</html>