diff --git a/public/.vscode/tasks.json b/.vscode/tasks.json
similarity index 79%
rename from public/.vscode/tasks.json
rename to .vscode/tasks.json
index 9d9c1e283..8fcfe54bf 100644
--- a/public/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -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"
}
]
diff --git a/firebase.json b/firebase.json
index ca95d97b4..bb5ca81d6 100644
--- a/firebase.json
+++ b/firebase.json
@@ -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
}
}
diff --git a/public/app.html b/public/app.html
new file mode 100644
index 000000000..8db368a4c
--- /dev/null
+++ b/public/app.html
@@ -0,0 +1,216 @@
+
+
+
+
+
+
+
+
monkey-see
+
monkey-type
+
+
+
+
+
+
+
+
+
+
+
+ this is the about page
+
+
+
+
+
tab and
enter /
space - restart test
+
esc - command line
+
+ Created by
Miodec
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
index 228cec476..afa3a30e4 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -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 */
\ No newline at end of file
diff --git a/public/css/style.css.map b/public/css/style.css.map
new file mode 100644
index 000000000..4fb6dcb5b
--- /dev/null
+++ b/public/css/style.css.map
@@ -0,0 +1,9 @@
+{
+ "version": 3,
+ "mappings": "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",
+ "sources": [
+ "style.scss"
+ ],
+ "names": [],
+ "file": "style.css"
+}
\ No newline at end of file
diff --git a/public/css/style.scss b/public/css/style.scss
index 99ec62c4c..7ed9038ce 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -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 {
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 3e0dcbb90..000000000
--- a/public/index.html
+++ /dev/null
@@ -1,164 +0,0 @@
-
-
-
-
-
-
-
-
-
monkey-see
-
monkey-type
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Hey, im optimising the website for keyboard only use, so from now to restart the test press
tab and then
enter /
space (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
-
- Created by
Miodec
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/public/js/account.js b/public/js/account.js
new file mode 100644
index 000000000..259d98931
--- /dev/null
+++ b/public/js/account.js
@@ -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.
+ // ...
+ }
+ });
+
+
diff --git a/public/js/script.js b/public/js/script.js
index 3cd1ff4d9..c8405a06a 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -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(" " + 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(" " + 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("