From 80fe02c03b98020e8303be258fea44c97fdb66e4 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 9 May 2020 18:39:23 +0100 Subject: [PATCH] update 1 - added graph of wpm over time - changed the layout - added coming soon page --- {public/.vscode => .vscode}/tasks.json | 2 +- firebase.json | 18 +- public/app.html | 216 ++++++++ public/css/style.css | 553 +++++++++++++++------ public/css/style.css.map | 9 + public/css/style.scss | 84 +++- public/index.html | 164 ------- public/js/account.js | 55 +++ public/js/script.js | 655 +++++++++++++------------ public/js/words.js | 202 ++++++++ public/soon2.html | 68 +++ 11 files changed, 1362 insertions(+), 664 deletions(-) rename {public/.vscode => .vscode}/tasks.json (79%) create mode 100644 public/app.html create mode 100644 public/css/style.css.map delete mode 100644 public/index.html create mode 100644 public/js/account.js create mode 100644 public/js/words.js create mode 100644 public/soon2.html 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 Type + + + + + + +
+
+
+
+
+
+
wpm
+
100
+
+
+
key
+
100/2
+
+
+
acc
+
100%
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + \ 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 @@ - - - - - - Document - - - - -
-
-
-
-
-
-
wpm
-
100
-
-
-
key
-
100/2
-
-
-
acc
-
100%
-
-
- -
- - - - - \ 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("
"+currentCommands.title+"
"); // } } + diff --git a/public/js/words.js b/public/js/words.js new file mode 100644 index 000000000..22572a2e2 --- /dev/null +++ b/public/js/words.js @@ -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" + ]; \ No newline at end of file diff --git a/public/soon2.html b/public/soon2.html new file mode 100644 index 000000000..d98a0dc95 --- /dev/null +++ b/public/soon2.html @@ -0,0 +1,68 @@ + + + + + + Monkey Type - Coming Soon! + + + + +
+ +
Coming very soon...
+
+ + \ No newline at end of file