diff --git a/gameResetFunctionality/game.css b/gameResetFunctionality/game.css new file mode 100644 index 0000000000..784bd165ba --- /dev/null +++ b/gameResetFunctionality/game.css @@ -0,0 +1,82 @@ +body { + background-color: #34495e; + color: #ecf0f1; + font-family: 'Courier New', Courier, monospace; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + text-align: center; + } + .container { + background-color: #2c3e50; + padding: 30px; + border-radius: 10px; + box-shadow: 0 10px 20px rgba(0,0,0,0.2); + width: 80%; + max-width: 700px; + } + h1 { + color: #3498db; + } + #quote-display { + font-size: 1.5rem; + margin-bottom: 20px; + line-height: 1.6; + } + .word-correct { + color: #2ecc71; /* Green for correct */ + } + .word-incorrect { + color: #e74c3c; /* Red for incorrect */ + text-decoration: underline; + } + .highlight { + background-color: #f1c40f; + color: #2c3e50; + border-radius: 4px; + padding: 2px 4px; + } + #typed-value { + width: 100%; + padding: 10px; + font-size: 1.2rem; + border: 2px solid #3498db; + border-radius: 5px; + background-color: #ecf0f1; + color: #2c3e50; + box-sizing: border-box; + } + #typed-value:disabled { + background-color: #95a5a6; + } + #message { + margin-top: 20px; + font-size: 1.2rem; + height: 20px; /* Reserve space to prevent layout shift */ + } + /* --- MODIFIED ---: Style for the main action button */ + #action-button { + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + font-size: 1.2rem; + cursor: pointer; + margin-top: 20px; + transition: background-color 0.3s; + } + /* --- NEW ---: Classes for different button states */ + .btn-start, .btn-success { + background-color: #2ecc71; /* Green for start and success */ + } + .btn-start:hover, .btn-success:hover { + background-color: #27ae60; + } + .btn-reset { + background-color: #e67e22; /* Orange for reset */ + } + .btn-reset:hover { + background-color: #d35400; + } \ No newline at end of file diff --git a/gameResetFunctionality/game.html b/gameResetFunctionality/game.html new file mode 100644 index 0000000000..bd04acc7c7 --- /dev/null +++ b/gameResetFunctionality/game.html @@ -0,0 +1,23 @@ + + + + + + Game + + + +
+

Typing Speed Test

+
Click "Start" to begin.
+ +
+ + + + +
+ + + + \ No newline at end of file diff --git a/gameResetFunctionality/game.js b/gameResetFunctionality/game.js new file mode 100644 index 0000000000..884108b701 --- /dev/null +++ b/gameResetFunctionality/game.js @@ -0,0 +1,84 @@ +// 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 => `${word} `); + 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);