Skip to content

Commit

Permalink
🔤 Improvements to alphabet stats and display
Browse files Browse the repository at this point in the history
  • Loading branch information
@wiki-Bird
wiki-Bird committed Aug 18, 2023
1 parent 8ddb99a commit c692221
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 97 deletions.
8 changes: 4 additions & 4 deletions alphabet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,17 +55,17 @@
<div class="typeArea">
<div class="cursorLine">︳</div>
<input type="text" class="hiddenInput no-copy-paste">
<div class="words unselectable"></div>
<div class="words unselectable alphabet"></div>
</div>
</div>
<div class="endStats">
<div class="statsBlock">
<div class="topBanner">
<div class="bigStat">
<div class="bigNum highlight">105</div>
<div class="statLabel">words per minute</div>
<div class="bigNum highlight timeStat">30</div>
<div class="statLabel">seconds</div>
</div>
<div class="bigText">That's faster than <span class="percent highlight">99%</span> of people!</div>
<div class="bigText"><span class="percent">Nice work!</span></div>
</div>
<div class="bottomStats"></div>
<div class="buttons">
Expand Down
4 changes: 0 additions & 4 deletions scripts/loadwords.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,6 @@ function getLines() {
let divRect = div.getBoundingClientRect();
let divRightPosition = divRect.right;

// console.log(div)
// console.log("divRightPosition: " + divRightPosition)
// console.log("rightmostPosition: " + rightmostPosition)

if (i === 0) { // first row
lines[currentRow] = [div];
rightmostPosition = divRightPosition;
Expand Down
3 changes: 0 additions & 3 deletions scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ document.addEventListener("DOMContentLoaded", function() {
}
}
else {
// console.log(getLines(document.querySelector(".words").childNodes[0]));
if (document.fonts) {
document.fonts.ready.then(function() {
pageLines = getLines();
Expand Down Expand Up @@ -90,8 +89,6 @@ document.addEventListener("DOMContentLoaded", function() {

// click into text box on page load
document.querySelector(".hiddenInput").focus();


}
});

Expand Down
172 changes: 92 additions & 80 deletions scripts/typing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,8 +329,7 @@ function endRound() {
clearInterval(timerInterval);

// make .endStats visible

document.querySelector(".contained").style.opacity = "0.2";
document.querySelector(".contained").style.opacity = "0.1";
document.querySelector(".endStats").style.display = "block";
// wait 1 second
setTimeout(function() {
Expand All @@ -343,12 +342,41 @@ function endRound() {
wpm = Math.round(wordsWritten / ((timerCount + parseInt(timerStart)) / 60))|| "0";
accuracy = Math.round(((wordsWritten - incorrectWords) / wordsWritten) * 100) || 0;
errors = incorrectWords || 0;
if (wpm > pb && wpm < 500 && wpm != "Infinity" && accuracy < 70) {
pb = wpm;
localStorage.setItem("pb", pb);

let stats;
if (!document.querySelector(".timeStat")) {
if (wpm > pb && wpm < 500 && wpm != "Infinity" && accuracy < 70) {
pb = wpm;
localStorage.setItem("pb", pb);
}

stats = {"accuracy":accuracy + "%", "words":wordsWritten, "errors":errors, "time taken":(timerCount + parseInt(timerStart)) + "s", "pb":pb};
}
else {

let allWords = document.querySelectorAll(".word");
let lettersWritten = 0;
let letterErrors = 0;
for (let word of allWords) {
console.log(word);
let letters = word.querySelectorAll("letter");
for (let letter of letters) {
lettersWritten++;
if (letter.classList.contains("incorrect")) letterErrors++;
}
}

let timePb = localStorage.getItem("timePb") || 9999;
let curTime = timerCount + parseInt(timerStart);

if (curTime < timePb && curTime > 0 && accuracy < 70) {
timePb = curTime;
localStorage.setItem("timePb", timePb);
}

let stats = {"accuracy":accuracy + "%", "words":wordsWritten, "errors":errors, "time taken":(timerCount + parseInt(timerStart)) + "s", "pb":pb};
let accuracyLetters = Math.round(((lettersWritten - letterErrors) / lettersWritten) * 100) || 0;
stats = {"accuracy":accuracyLetters + "%", "errors":letterErrors, "pb":timePb + "s"};
}
for (let stat in stats) {
let statDiv = document.createElement("div");
statDiv.classList.add("stat");
Expand All @@ -363,83 +391,67 @@ function endRound() {
bottomStats.appendChild(statDiv);
}

// if not infinity
if (wpm == "Infinity") {
wpm = "0";
}
document.querySelector(".bigNum").innerHTML = wpm;
let percent = "0%";

console.log(wpm)
// convert to number
let wpm2 = Number(wpm);



if (wpm2 <= 24) {
percent = "<5%";
} else if (wpm2 < 27) {
percent = "5%";
} else if (wpm2 < 30) {
percent = "10%";
} else if (wpm2 < 32) {
percent = "15%";
} else if (wpm2 < 35) {
percent = "20%";
} else if (wpm2 < 37) {
percent = "25%";
} else if (wpm2 < 39) {
percent = "30%";
} else if (wpm2 < 41) {
percent = "35%";
} else if (wpm2 < 44) {
percent = "40%";
} else if (wpm2 < 46) {
percent = "45%";
} else if (wpm2 < 48) {
percent = "50%";
} else if (wpm2 < 51) {
percent = "55%";
} else if (wpm2 < 54) {
percent = "60%";
} else if (wpm2 < 57) {
percent = "65%";
} else if (wpm2 < 61) {
percent = "70%";
} else if (wpm2 < 65) {
percent = "75%";
} else if (wpm2 < 71) {
percent = "80%";
} else if (wpm2 < 77) {
percent = "85%";
} else if (wpm2 < 81) {
percent = "90%";
} else if (wpm2 < 89) {
percent = "93%";
} else if (wpm2 < 94) {
percent = "96%";
} else if (wpm2 < 100) {
percent = "97%";
} else if (wpm2 < 105) {
percent = "98%";
} else if (wpm2 < 107) {
percent = "99%";
} else if (wpm2 < 112) {
percent = "99.2%";
} else if (wpm2 < 115) {
percent = "99.4%";
} else if (wpm2 < 119) {
percent = "99.6%";
} else if (wpm2 < 123) {
percent = "99.7%";
} else if (wpm2 < 127) {
percent = "99.8%";
} else if (wpm2 >= 127) {
percent = "99.9%";
if (!document.querySelector(".timeStat")) {
// if not infinity
if (wpm == "Infinity") wpm = "0";
document.querySelector(".bigNum").innerHTML = wpm;

let percent = "0%";
console.log(wpm)
// convert to number
let wpm2 = Number(wpm);

const thresholds = [
{ limit: 24, value: "<5%" },
{ limit: 27, value: "5%" },
{ limit: 30, value: "10%" },
{ limit: 32, value: "15%" },
{ limit: 35, value: "20%" },
{ limit: 37, value: "25%" },
{ limit: 39, value: "30%" },
{ limit: 41, value: "35%" },
{ limit: 44, value: "40%" },
{ limit: 46, value: "45%" },
{ limit: 48, value: "50%" },
{ limit: 51, value: "55%" },
{ limit: 54, value: "60%" },
{ limit: 57, value: "65%" },
{ limit: 61, value: "70%" },
{ limit: 65, value: "75%" },
{ limit: 71, value: "80%" },
{ limit: 77, value: "85%" },
{ limit: 81, value: "90%" },
{ limit: 89, value: "93%" },
{ limit: 94, value: "96%" },
{ limit: 100, value: "97%" },
{ limit: 105, value: "98%" },
{ limit: 107, value: "99%" },
{ limit: 112, value: "99.2%" },
{ limit: 115, value: "99.4%" },
{ limit: 119, value: "99.6%" },
{ limit: 123, value: "99.7%" },
{ limit: 127, value: "99.8%" },
{ limit: Infinity, value: "99.9%" }
];

for (let threshold of thresholds) {
if (wpm2 < threshold.limit) {
percent = threshold.value;
break;
}
}
} else {
document.querySelector(".bigNum").innerHTML = (timerCount + parseInt(timerStart));
if (timerCount + parseInt(timerStart) < 3) {
percent = "Amazing work! That's really fast.";
} else if (timerCount + parseInt(timerStart) < 7) {
percent = "Good work! That's pretty fast.";
} else {
percent = "Nice work. Want to try again?";
}
}

document.querySelector(".percent").innerHTML = percent;

}

function share() {
Expand Down
19 changes: 13 additions & 6 deletions styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,18 +364,25 @@ label {
}

.blurText {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 1!important;
filter: blur(0px)!important;

position: absolute;
top: 50%;
transform: translate(-5%, -50%);

z-index: 2;
font-size: 1.7rem;
text-shadow: 0px 0px 5px #00000038;
/* center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in-out;

/* click through this div */
pointer-events: none;
}

.alphabet {
height: auto!important;
}

0 comments on commit c692221

Please sign in to comment.