Skip to content

Commit 24a2ff1

Browse files
duckRabbitPyduckRabbitPy
committed
add timer
1 parent 9abfb46 commit 24a2ff1

File tree

12 files changed

+222
-11
lines changed

12 files changed

+222
-11
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"dependencies": {
3+
"typescript": "^4.5.4"
4+
}
5+
}

‎public/.DS_Store‎

0 Bytes
Binary file not shown.

‎public/Media/.DS_Store‎

6 KB
Binary file not shown.

‎public/Media/TS type logo.png‎

78.1 KB
Loading

‎public/Media/wrongSound.mp3‎

11.6 KB
Binary file not shown.

‎public/app.js‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,18 @@ let ul = document.querySelector("ul");
33
let frontOfStackElem = ul.firstElementChild;
44
const keySound = document.querySelector("#key_sound");
55
const wrongSound = document.querySelector("#wrong_sound");
6+
const statDisplay = document.querySelector("#stats");
7+
const timer = new Timer();
8+
let timerStarted = false;
9+
const snippets = {
10+
test: ["hello my name is oli", "const", "="],
11+
functions: [
12+
`const capitalize = (str: string = "", lowerRest = false): string =>
13+
str.slice(0, 1).toUpperCase() +
14+
(lowerRest ? str.slice(1).toLowerCase() : str.slice(1));`,
15+
`const compact = (arr: any[]) => arr.filter(Boolean);`,
16+
],
17+
};
618
nextSet();
719
document.addEventListener("keydown", (event) => {
820
let currPress = event.key;
@@ -21,15 +33,18 @@ document.addEventListener("keydown", (event) => {
2133
frontOfStackElem = moveToNext(frontOfStackElem);
2234
return;
2335
}
24-
else if (currPress !== "Shift" && frontOfStackElem !== null) {
36+
else if (currPress !== "Shift" &&
37+
currPress !== "Meta" &&
38+
currPress !== "Alt" &&
39+
frontOfStackElem !== null) {
2540
//incorrect key
2641
isCorrect(frontOfStackElem, false);
2742
return;
2843
}
2944
});
3045
function nextSet() {
3146
clearList();
32-
const snippet = `const wrongSound = document.querySelector("#wrong_sound") as HTMLAudioElement;`;
47+
const snippet = snippets.functions[1];
3348
const itemsArr = snippet.split("");
3449
populateList(itemsArr);
3550
frontOfStackElem = ul.firstElementChild;
@@ -67,9 +82,14 @@ function isCorrect(frontOfStackElem, correct) {
6782
wrongSound.play();
6883
frontOfStackElem.classList.add("incorrect");
6984
}
85+
if (timerStarted === false) {
86+
timer.start();
87+
timerStarted = true;
88+
}
7089
}
7190
function moveToNext(frontOfStackElem) {
7291
if (frontOfStackElem.nextElementSibling === null) {
92+
getStats();
7393
frontOfStackElem = nextSet();
7494
return frontOfStackElem;
7595
}
@@ -93,3 +113,12 @@ function convertSpecial(currPress) {
93113
return currPress;
94114
}
95115
}
116+
function getStats() {
117+
const secondsExpired = Math.ceil(timer.getTime() / 1000);
118+
let chars = snippets.functions[1].length;
119+
const speed = chars / secondsExpired;
120+
statDisplay.innerHTML = `${(speed / 5) * 60} words a minute!!`;
121+
timer.stop();
122+
timer.reset();
123+
timerStarted = false;
124+
}

‎public/index.html‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,21 @@
88
<link rel="stylesheet" href="./styles.css" />
99
</head>
1010
<body>
11-
<pre>
12-
<ul>
13-
</ul>
14-
</pre>
11+
<main>
12+
<header>
13+
<h1>Touch-Typed!</h1>
14+
<img src="Media/TS type logo.png" />
15+
</header>
16+
17+
<pre>
18+
<ul>
19+
</ul>
20+
</pre>
21+
<p id="stats"></p>
22+
</main>
1523
<audio id="key_sound" src="Media/keySound.m4a"></audio>
1624
<audio id="wrong_sound" src="Media/wrongSound.mp3"></audio>
17-
25+
<script src="timer.js"></script>
1826
<script src="app.js"></script>
1927
</body>
2028
</html>

‎public/styles.css‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,27 @@
11
body {
2-
background-color: rgb(49, 42, 89);
2+
font-family: monospace;
3+
background-color: #2f74c0;
4+
}
5+
6+
main {
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
11+
header {
12+
display: flex;
13+
flex-direction: row;
14+
justify-content: space-between;
15+
}
16+
17+
h1 {
18+
margin: 1rem;
19+
color: white;
20+
font-size: 60px;
21+
}
22+
23+
img {
24+
max-height: 200px;
325
}
426

527
ul {
@@ -20,3 +42,8 @@ ul > li {
2042
.incorrect {
2143
color: rgb(247, 93, 76);
2244
}
45+
46+
#stats {
47+
font-size: x-large;
48+
color: aqua;
49+
}

‎public/timer.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use strict";
2+
class Timer {
3+
constructor() {
4+
this.isRunning = false;
5+
this.startTime = 0;
6+
this.overallTime = 0;
7+
}
8+
_getTimeElapsedSinceLastStart() {
9+
if (!this.startTime) {
10+
return 0;
11+
}
12+
return Date.now() - this.startTime;
13+
}
14+
start() {
15+
if (this.isRunning) {
16+
return console.error("Timer is already running");
17+
}
18+
this.isRunning = true;
19+
this.startTime = Date.now();
20+
}
21+
stop() {
22+
if (!this.isRunning) {
23+
return console.error("Timer is already stopped");
24+
}
25+
this.isRunning = false;
26+
this.overallTime = this.overallTime + this._getTimeElapsedSinceLastStart();
27+
}
28+
reset() {
29+
this.overallTime = 0;
30+
if (this.isRunning) {
31+
this.startTime = Date.now();
32+
return;
33+
}
34+
this.startTime = 0;
35+
}
36+
getTime() {
37+
if (!this.startTime) {
38+
return 0;
39+
}
40+
if (this.isRunning) {
41+
return this.overallTime + this._getTimeElapsedSinceLastStart();
42+
}
43+
return this.overallTime;
44+
}
45+
}

0 commit comments

Comments
 (0)