115 lines
3.6 KiB
JavaScript
115 lines
3.6 KiB
JavaScript
const words = ["apple", "banana", "cherry", "dragon", "elephant", "fish", "grape", "house", "ink", "jungle"];
|
|
let currentWord = "";
|
|
let score = 0;
|
|
let typedWords = 0;
|
|
let missed = 0;
|
|
let totalTyped = 0;
|
|
let startTime = Date.now();
|
|
let wordStartTime = Date.now();
|
|
|
|
const wordDisplay = document.getElementById("word-display");
|
|
const wordInput = document.getElementById("word-input");
|
|
const scoreDisplay = document.getElementById("score");
|
|
const accuracyDisplay = document.getElementById("accuracy");
|
|
const timerDisplay = document.getElementById("timer");
|
|
const tipBox = document.getElementById("rsi-tip");
|
|
const stretchPopup = document.getElementById("stretch-popup");
|
|
const sessionTimerText = document.getElementById("session-timer");
|
|
const highScoreDisplay = document.getElementById("high-score");
|
|
const darkModeToggle = document.getElementById("dark-mode-toggle");
|
|
|
|
const tips = [
|
|
"💡 Keep your wrists straight while typing.",
|
|
"🪑 Sit with your back supported.",
|
|
"👁 Adjust your screen to eye level.",
|
|
"💧 Take a short water break.",
|
|
"🧍♂️ Stand and stretch for a moment."
|
|
];
|
|
|
|
let highScore = localStorage.getItem("typingHighScore") || 0;
|
|
highScoreDisplay.textContent = `🏆 Highest Score: ${highScore}`;
|
|
|
|
function generateWord() {
|
|
currentWord = words[Math.floor(Math.random() * words.length)];
|
|
wordDisplay.textContent = currentWord;
|
|
wordInput.value = "";
|
|
wordStartTime = Date.now();
|
|
}
|
|
|
|
function updateScore() {
|
|
scoreDisplay.textContent = `Score: ${score}`;
|
|
const accuracy = totalTyped === 0 ? 100 : Math.round((score / totalTyped) * 100);
|
|
accuracyDisplay.textContent = `Accuracy: ${accuracy}%`;
|
|
}
|
|
|
|
function updateTimer() {
|
|
const now = Date.now();
|
|
const seconds = Math.floor((now - startTime) / 1000);
|
|
const mins = Math.floor(seconds / 60);
|
|
const secs = seconds % 60;
|
|
timerDisplay.textContent = `Time: ${mins}:${secs.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
function gameOver() {
|
|
if (score > highScore) {
|
|
localStorage.setItem("typingHighScore", score);
|
|
alert(`New High Score: ${score}! 🎉`);
|
|
} else {
|
|
alert("Game Over! You missed 3 words.");
|
|
}
|
|
location.reload();
|
|
}
|
|
|
|
wordInput.addEventListener("input", () => {
|
|
if (wordInput.value.trim() === currentWord) {
|
|
score++;
|
|
typedWords++;
|
|
totalTyped++;
|
|
generateWord();
|
|
updateScore();
|
|
|
|
if (typedWords % 10 === 0) {
|
|
stretchPopup.textContent = "🧘♀️ Time to stretch your fingers or roll your shoulders!";
|
|
document.getElementById("stretch-gif").style.display = "block";
|
|
setTimeout(() => {
|
|
stretchPopup.textContent = "";
|
|
document.getElementById("stretch-gif").style.display = "none";
|
|
}, 5000);
|
|
}
|
|
}
|
|
});
|
|
|
|
wordInput.addEventListener("blur", () => wordInput.focus());
|
|
|
|
setInterval(() => {
|
|
const timeSinceWordShown = Date.now() - wordStartTime;
|
|
if (timeSinceWordShown >= 8000 && wordInput.value.trim() === "") {
|
|
missed++;
|
|
totalTyped++;
|
|
if (missed >= 3) gameOver();
|
|
generateWord();
|
|
updateScore();
|
|
}
|
|
}, 1000);
|
|
|
|
let tipIndex = 0;
|
|
setInterval(() => {
|
|
tipBox.textContent = tips[tipIndex];
|
|
tipIndex = (tipIndex + 1) % tips.length;
|
|
}, 30000);
|
|
|
|
setInterval(updateTimer, 1000);
|
|
|
|
setInterval(() => {
|
|
const minutes = Math.floor((Date.now() - startTime) / 60000);
|
|
sessionTimerText.textContent = `You've been typing for ${minutes} minute${minutes !== 1 ? 's' : ''}.`;
|
|
}, 10000);
|
|
|
|
darkModeToggle.addEventListener("click", () => {
|
|
document.body.classList.toggle("dark-mode");
|
|
});
|
|
|
|
generateWord();
|
|
updateScore();
|
|
updateTimer();
|