You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
3.0 KiB
85 lines
3.0 KiB
// DOM Elements
|
|
const quoteDisplayElement = document.getElementById('quote-display');
|
|
const typedValueElement = document.getElementById('typed-value');
|
|
const messageElement = document.getElementById('message');
|
|
const actionButton = document.getElementById('action-button');
|
|
|
|
// Game Variables
|
|
const quotes = [
|
|
'The quick brown fox jumps over the lazy dog.',
|
|
'Technology is best when it brings people together.',
|
|
'It is not the mountain we conquer but ourselves.',
|
|
'To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.'
|
|
];
|
|
const messages = {
|
|
start: 'Type the quote above...',
|
|
success: (seconds) => `🎉 CONGRATULATIONS! You finished in ${seconds} seconds.`,
|
|
typing: 'Keep going...'
|
|
};
|
|
let words = [];
|
|
let wordIndex = 0;
|
|
let startTime = Date.now();
|
|
|
|
// --- MODIFIED ---: The startGame function
|
|
const startGame = () => {
|
|
const quote = quotes[Math.floor(Math.random() * quotes.length)];
|
|
words = quote.split(' ');
|
|
wordIndex = 0;
|
|
|
|
const spanWords = words.map(word => `<span>${word} </span>`);
|
|
quoteDisplayElement.innerHTML = spanWords.join('');
|
|
quoteDisplayElement.childNodes[0].className = 'highlight';
|
|
|
|
messageElement.textContent = messages.start;
|
|
typedValueElement.value = '';
|
|
typedValueElement.disabled = false;
|
|
typedValueElement.focus();
|
|
|
|
// --- MODIFIED ---: Update the button to be a 'Reset' button
|
|
actionButton.textContent = 'Reset';
|
|
actionButton.className = 'btn-reset';
|
|
|
|
startTime = new Date().getTime();
|
|
};
|
|
|
|
// Main Game Logic
|
|
typedValueElement.addEventListener('input', () => {
|
|
const currentWord = words[wordIndex];
|
|
const typedValue = typedValueElement.value;
|
|
|
|
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
|
// --- THIS IS THE SUCCESS CONDITION BLOCK ---
|
|
const elapsedTime = new Date().getTime() - startTime;
|
|
const seconds = (elapsedTime / 1000).toFixed(2);
|
|
messageElement.textContent = messages.success(seconds);
|
|
|
|
typedValueElement.disabled = true; // Disable input as before
|
|
|
|
// --- MODIFIED ---: Update the button to be a 'Play Again' button
|
|
actionButton.textContent = 'Play Again';
|
|
actionButton.className = 'btn-success';
|
|
actionButton.focus();
|
|
|
|
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
|
|
// Word typed correctly, move to the next word
|
|
typedValueElement.value = '';
|
|
wordIndex++;
|
|
|
|
// Reset highlighting
|
|
Array.from(quoteDisplayElement.childNodes).forEach(child => (child.className = ''));
|
|
quoteDisplayElement.childNodes[wordIndex].className = 'highlight';
|
|
|
|
} else if (currentWord.startsWith(typedValue)) {
|
|
// Correctly typing the current word
|
|
quoteDisplayElement.childNodes[wordIndex].className = 'highlight';
|
|
messageElement.textContent = messages.typing;
|
|
} else {
|
|
// Incorrect typing
|
|
quoteDisplayElement.childNodes[wordIndex].className = 'highlight word-incorrect';
|
|
messageElement.textContent = messages.typing;
|
|
}
|
|
});
|
|
|
|
// --- MODIFIED ---: Event listener for the single action button
|
|
actionButton.addEventListener('click', startGame);
|