From 1ee324ad4cd870b0f319e25feff011427cd9007a Mon Sep 17 00:00:00 2001 From: CyberSphinxxx Date: Mon, 7 Oct 2024 17:29:45 +0800 Subject: [PATCH] Disable typing before level selection and after challenge completion --- scripts.js | 72 +++++++++++++++++++++++++++++++----------------------- styles.css | 2 +- 2 files changed, 43 insertions(+), 31 deletions(-) diff --git a/scripts.js b/scripts.js index c7d0887..f5aab4a 100644 --- a/scripts.js +++ b/scripts.js @@ -6,42 +6,47 @@ const resetButton = document.getElementById('resetButton'); const words = { easy: [ - 'apple', 'banana', 'cat', 'dog', 'elephant', + 'apple', 'banana', 'cat', 'dog', 'elephant', 'fish', 'grape', 'hat', 'igloo', 'juice', 'ham', 'orange', 'lemon', 'pencil', 'kite', 'robot', 'sun', 'tree', 'cup', 'book', 'egg', 'vase', 'wolf', 'stone', 'jet', 'door' ], medium: [ - 'cucumber', 'tomato', 'computer', 'internet', - 'keyboard', 'mouse', 'window', 'software', + 'cucumber', 'tomato', 'computer', 'internet', + 'keyboard', 'mouse', 'window', 'software', 'programming', 'algorithm', 'bicycle', 'mountain', 'library', 'umbrella', 'calculator', 'elephant', 'sunflower', 'chocolate', 'engineer', 'parachute' ], hard: [ - 'extraordinary', 'communication', 'development', - 'unbelievable', 'conventional', 'mathematics', - 'revolutionary', 'understanding', 'experimental', + 'extraordinary', 'communication', 'development', + 'unbelievable', 'conventional', 'mathematics', + 'revolutionary', 'understanding', 'experimental', 'comprehension', 'implementation', 'circumference', 'interpretation', 'architecture', 'sophistication', - 'psychology', 'philosophy', 'institutional', + 'psychology', 'philosophy', 'institutional', 'transformation', 'infrastructure' ], impossible: [ - 'incomprehensibilities', 'overcompensating', - 'disproportionately', 'electroencephalography', - 'interdisciplinary', 'microarchitecture', - 'counterproductive', 'disestablishmentarianism', + 'incomprehensibilities', 'overcompensating', + 'disproportionately', 'electroencephalography', + 'interdisciplinary', 'microarchitecture', + 'counterproductive', 'disestablishmentarianism', 'psychophysiological', 'electromagnetism', 'antidisestablishmentarianism', 'uncharacteristically', 'subterraneanly', 'unconstitutionally', 'misunderstanding', - 'internationalization', 'hypercholesterolemia', + 'internationalization', 'hypercholesterolemia', 'deinstitutionalization', 'thermodynamically' ] }; let originalText = 'Choose a Level to Start Playing'; // Set default text let startTime; // Variable to store the start time +let typingComplete = false; // Track whether the user has completed typing +let levelChosen = false; // Track if a level is chosen + +// Initially disable the input field +userInput.disabled = true; // Create a WPM display element const wpmDisplay = document.createElement('p'); @@ -55,11 +60,9 @@ function getRandomWords(level) { // Shuffle the words array const shuffledWords = levelWords.sort(() => 0.5 - Math.random()); - - // Get the first 'numberOfWords' from the shuffled array - const randomWords = shuffledWords.slice(0, numberOfWords).join(' '); - return randomWords; + // Get the first 'numberOfWords' from the shuffled array + return shuffledWords.slice(0, numberOfWords).join(' '); } // Function to update the displayed text based on user input @@ -69,8 +72,8 @@ function updateText(inputText) { for (let i = 0; i < originalText.length; i++) { if (i < currentIndex) { - formattedText += inputText[i] === originalText[i] - ? `${originalText[i]}` + formattedText += inputText[i] === originalText[i] + ? `${originalText[i]}` : `${originalText[i]}`; } @@ -85,9 +88,12 @@ function updateText(inputText) { targetText.innerHTML = formattedText; } -// Function to check if user has completed typing the text and calculate WPM +// Function to check if the user has completed typing the text and calculate WPM function checkCompletion(inputText) { if (inputText === originalText) { + typingComplete = true; // Mark typing as complete + userInput.disabled = true; // Disable input field after completion + congratulations.classList.remove('hidden'); resetButton.classList.remove('hidden'); @@ -113,6 +119,10 @@ document.querySelectorAll('.level').forEach(level => { level.addEventListener('click', (e) => { const selectedLevel = e.target.getAttribute('data-level'); updateLevel(selectedLevel); + userInput.disabled = false; // Enable the input field when a level is selected + userInput.focus(); // Focus on the input field + levelChosen = true; // Mark that a level has been chosen + typingComplete = false; // Reset typing completion status }); }); @@ -135,14 +145,18 @@ function updateLevel(level) { // Event listener for text input userInput.addEventListener('input', () => { - const inputText = userInput.value; - updateText(inputText); - checkCompletion(inputText); + if (!typingComplete && levelChosen) { // Only allow typing if a level is chosen and typing is not complete + const inputText = userInput.value; + updateText(inputText); + checkCompletion(inputText); + } }); // Function to focus on input when the container is clicked function focusInput() { - userInput.focus(); + if (levelChosen && !typingComplete) { + userInput.focus(); + } } // Hide instruction when input is focused @@ -169,11 +183,9 @@ window.addEventListener('blur', () => { // Reset button event listener resetButton.addEventListener('click', () => { - userInput.value = ''; - targetText.innerHTML = originalText; // Reset to the current level's text - congratulations.classList.add('hidden'); - resetButton.classList.add('hidden'); - clickInstruction.style.display = 'block'; - wpmDisplay.textContent = ''; // Clear WPM display on reset - userInput.focus(); + const selectedLevel = document.querySelector('.level[data-selected="true"]').getAttribute('data-level'); + updateLevel(selectedLevel); + userInput.disabled = true; // Disable input until the user selects a new level + levelChosen = false; // Reset levelChosen flag + typingComplete = false; // Reset typing completion status }); diff --git a/styles.css b/styles.css index 75e7ee3..0d55091 100644 --- a/styles.css +++ b/styles.css @@ -95,7 +95,7 @@ button { } #targetText { - font-size: 2rem; + font-size: 1.9rem; margin-bottom: 10px; letter-spacing: 2px; color: var(--text-color);