export class UIManager { constructor(container, typingManager) { this.container = container; this.typingManager = typingManager; this.zombieManager = null; this.introScreen = null; // Add reference for intro screen this.createUI(); // Delay starting the UI update interval until game starts // this.updateInterval = setInterval(() => this.updateUI(), 100); this.showIntroScreen(); // Show intro screen initially } setZombieManager(zombieManager) { this.zombieManager = zombieManager; } createUI() { // Create UI container this.uiContainer = document.createElement('div'); this.uiContainer.style.position = 'absolute'; // Adjust bottom positioning based on screen height, more space on mobile this.uiContainer.style.bottom = window.innerHeight < 700 ? '30px' : '120px'; this.uiContainer.style.left = '5%'; // Add some side padding this.uiContainer.style.width = '90%'; // Use percentage width this.uiContainer.style.textAlign = 'center'; this.uiContainer.style.color = 'white'; this.uiContainer.style.padding = window.innerWidth < 600 ? '5px' : '10px'; // Reduce padding on small screens this.container.appendChild(this.uiContainer); // // Create previous text element (dimmed) - Commented out, integrated into active display // this.previousText = document.createElement('div'); // this.previousText.style.fontSize = '18px'; // this.previousText.style.color = '#777'; // this.previousText.style.marginBottom = '5px'; // this.uiContainer.appendChild(this.previousText); // Create active word display element (will show prev, current, next) this.activeWordDisplay = document.createElement('div'); // Adjust font size based on screen width this.activeWordDisplay.style.fontSize = window.innerWidth < 600 ? '24px' : '32px'; this.activeWordDisplay.style.fontWeight = 'bold'; this.activeWordDisplay.style.color = '#ffffff'; this.activeWordDisplay.style.margin = '5px 0'; // Reduce margin this.activeWordDisplay.style.fontFamily = 'monospace'; // Use monospace for consistent spacing this.activeWordDisplay.style.letterSpacing = window.innerWidth < 600 ? '1px' : '2px'; // Less spacing on mobile this.activeWordDisplay.style.textShadow = '0 0 4px rgba(255,255,255,0.4)'; // Reduced blur and opacity this.uiContainer.appendChild(this.activeWordDisplay); // // Create upcoming words display (smaller) - Commented out, integrated into active display // this.upcomingWordsDisplay = document.createElement('div'); // this.upcomingWordsDisplay.style.fontSize = '18px'; // this.upcomingWordsDisplay.style.color = '#aaa'; // this.upcomingWordsDisplay.style.marginTop = '5px'; // this.upcomingWordsDisplay.style.fontFamily = 'monospace'; // this.uiContainer.appendChild(this.upcomingWordsDisplay); // Create stats display this.statsDisplay = document.createElement('div'); // Adjust font size for stats display this.statsDisplay.style.fontSize = window.innerWidth < 600 ? '12px' : '14px'; this.statsDisplay.style.color = '#aaa'; this.statsDisplay.style.marginTop = '10px'; // Reduce margin this.uiContainer.appendChild(this.statsDisplay); // Create message display (for victory/game over) this.messageDisplay = document.createElement('div'); this.messageDisplay.style.position = 'absolute'; this.messageDisplay.style.top = '50%'; this.messageDisplay.style.left = '50%'; this.messageDisplay.style.transform = 'translate(-50%, -50%)'; // Adjust message font size this.messageDisplay.style.fontSize = window.innerWidth < 600 ? '28px' : '42px'; this.messageDisplay.style.fontWeight = 'bold'; this.messageDisplay.style.color = '#ffffff'; this.messageDisplay.style.textShadow = '0 0 10px rgba(255,0,0,0.7)'; this.messageDisplay.style.display = 'none'; // Controlled in showMessage this.messageDisplay.style.textAlign = 'center'; // Ensure text is centered this.container.appendChild(this.messageDisplay); // Update UI initially this.updateUI(); // Create hidden input for mobile keyboard focus hack this.hiddenInput = document.createElement('input'); this.hiddenInput.type = 'text'; // Style to make it minimally visible and positioned near the text input area this.hiddenInput.style.position = 'absolute'; this.hiddenInput.style.bottom = '5px'; // Position it just below the main UI container this.hiddenInput.style.left = '50%'; this.hiddenInput.style.transform = 'translateX(-50%)'; this.hiddenInput.style.width = '80%'; // Make it reasonably wide this.hiddenInput.style.height = '20px'; // Give it some height this.hiddenInput.style.fontSize = '1px'; // Keep text tiny if any appears this.hiddenInput.style.border = 'none'; this.hiddenInput.style.background = 'rgba(255, 255, 255, 0.0)'; // Slightly visible background this.hiddenInput.style.color = 'transparent'; // Hide caret/text this.hiddenInput.style.caretColor = 'transparent'; // Hide caret this.hiddenInput.style.outline = 'none'; this.hiddenInput.placeholder = 'Tap here to type'; // Placeholder might help // this.hiddenInput.style.opacity = '0'; // No longer fully transparent // this.hiddenInput.style.pointerEvents = 'none'; // Allow events // this.hiddenInput.style.left = '-9999px'; // Keep it on screen this.hiddenInput.setAttribute('aria-hidden', 'true'); // Hide from screen readers this.hiddenInput.setAttribute('tabindex', '-1'); // Prevent tabbing this.hiddenInput.setAttribute('autocapitalize', 'none'); // Request lowercase keyboard // Add a flag for debugging or specific styling if needed this.hiddenInput.setAttribute('data-role', 'mobile-keyboard-trigger'); this.container.appendChild(this.hiddenInput); // Add event listener for virtual keyboard input this.hiddenInput.addEventListener('input', this.handleMobileInput.bind(this)); this.createIntroScreen(); // Call function to create the intro elements } createIntroScreen() { this.introScreen = document.createElement('div'); this.introScreen.id = 'intro-screen'; this.introScreen.style.position = 'absolute'; this.introScreen.style.top = '0'; this.introScreen.style.left = '0'; this.introScreen.style.width = '100%'; this.introScreen.style.height = '100%'; this.introScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.4)'; // Dark overlay this.introScreen.style.color = '#ff4444'; // Blood red text this.introScreen.style.display = 'flex'; this.introScreen.style.flexDirection = 'column'; this.introScreen.style.justifyContent = 'center'; this.introScreen.style.alignItems = 'center'; this.introScreen.style.textAlign = 'center'; this.introScreen.style.fontFamily = '"Courier New", Courier, monospace'; // Retro font this.introScreen.style.zIndex = '10'; // Ensure it's above other UI const title = document.createElement('h1'); title.textContent = 'ZOMBIE COPYPASTA'; title.style.fontSize = 'clamp(2rem, 8vw, 4rem)'; // Responsive font size title.style.marginBottom = '20px'; title.style.textShadow = '0 0 5px #ff0000, 0 0 10px #ff0000'; // Red glow const instructions = document.createElement('p'); instructions.innerHTML = ` Type words to vanquish the approaching zombies. Accuracy is key...
Each game features a different quote from an iconic movie `; instructions.style.fontSize = 'clamp(1rem, 3vw, 1.5rem)'; instructions.style.lineHeight = '1.6'; instructions.style.color = '#ccc'; // Off-white instructions instructions.style.maxWidth = '80%'; instructions.style.marginBottom = '40px'; this.startButton = document.createElement('button'); this.startButton.id = 'start-button'; this.startButton.textContent = 'START'; this.startButton.style.fontSize = 'clamp(1.5rem, 5vw, 2.5rem)'; this.startButton.style.padding = '15px 30px'; this.startButton.style.backgroundColor = '#440000'; // Dark red this.startButton.style.color = '#ffaaaa'; // Light red text this.startButton.style.border = '2px solid #ff4444'; this.startButton.style.cursor = 'pointer'; this.startButton.style.fontFamily = 'inherit'; this.startButton.style.boxShadow = '0 0 15px #ff0000'; this.startButton.style.transition = 'background-color 0.3s, color 0.3s'; // Hover effect (basic) this.startButton.onmouseover = () => { this.startButton.style.backgroundColor = '#ff4444'; this.startButton.style.color = '#000000'; }; this.startButton.onmouseout = () => { this.startButton.style.backgroundColor = '#440000'; this.startButton.style.color = '#ffaaaa'; }; this.introScreen.appendChild(title); this.introScreen.appendChild(instructions); this.introScreen.appendChild(this.startButton); this.container.appendChild(this.introScreen); } showIntroScreen() { if (this.introScreen) this.introScreen.style.display = 'flex'; // Make sure main UI is hidden initially if (this.uiContainer) this.uiContainer.style.display = 'none'; } hideIntroScreen() { if (this.introScreen) this.introScreen.style.display = 'none'; // Show main UI if (this.uiContainer) this.uiContainer.style.display = 'block'; } updateUI() { // // Update previous text - Commented out // this.previousText.textContent = this.typingManager.getPreviousWords(); // --- Update Active Word Display (Now shows Prev, Current, Next) --- const prevWord = this.typingManager.getNthPreviousWord(1) || ''; const currentWord = this.typingManager.getCurrentWord() || ""; const nextWord1 = this.typingManager.getNextWord(1) || ''; const nextWord2 = this.typingManager.getNextWord(2) || ''; const nextWord3 = this.typingManager.getNextWord(3) || ''; const typedWordSegment = this.typingManager.typedWord.trim(); let mistakeEncountered = false; let currentWordHTML = ''; // Generate HTML for the current word with typing feedback for (let i = 0; i < currentWord.length; i++) { if (i < typedWordSegment.length) { const isCorrect = typedWordSegment[i] === currentWord[i]; if (isCorrect && !mistakeEncountered) { currentWordHTML += `${currentWord[i]}`; // Correctly typed } else { currentWordHTML += `${currentWord[i]}`; // Incorrect mistakeEncountered = true; } } else if (i === typedWordSegment.length && !mistakeEncountered) { currentWordHTML += `${currentWord[i]}`; // Cursor/Next char } else { currentWordHTML += `${currentWord[i]}`; // Untyped rest } } // Add trailing space indicator if needed if (typedWordSegment.length === currentWord.length && !mistakeEncountered && currentWord.length > 0) { // Visual space indicator removed from here } else if (mistakeEncountered) { currentWordHTML += ` `; // Indicate mistake needs correction before space } // Assemble the three-word display const prevWordHTML = `${prevWord} `; // Decreased opacity // Combine the next three words with slightly decreasing opacity const nextWordHTML = ` ${nextWord1} ${nextWord2} ${nextWord3} `; this.activeWordDisplay.innerHTML = `${prevWordHTML}${currentWordHTML || ' '}${nextWordHTML}`; // Combine all parts // // Update Upcoming Words Display - Commented out // const nextWords = this.typingManager.words.slice(this.typingManager.currentWordIndex + 1, this.typingManager.currentWordIndex + 6).join(' '); // this.upcomingWordsDisplay.textContent = nextWords; // Update stats const stats = this.typingManager.getTypingStats(); // const zombieCount = this.zombieManager ? this.zombieManager.getActiveZombieCount() : 'N/A'; // No longer needed this.statsDisplay.textContent = `WPM: ${stats.wpm} | Accuracy: ${stats.accuracy}% | Words remaining: ${stats.wordsRemaining}`; // Removed zombie count } showMessage(message, stats) { // Added stats parameter // Clear previous content this.messageDisplay.innerHTML = ''; // Add the main message text const messageText = document.createElement('div'); messageText.textContent = message; this.messageDisplay.appendChild(messageText); // Set display styles AFTER adding content to ensure centering works this.messageDisplay.style.display = 'flex'; // Use flexbox for centering content this.messageDisplay.style.flexDirection = 'column'; // Stack vertically this.messageDisplay.style.alignItems = 'center'; // Center items horizontally (like the button and stats div) this.messageDisplay.style.background = 'rgb(0,0,0,0.5)'; this.messageDisplay.style.padding = '5px'; // Add restart button const restartButton = document.createElement('button'); restartButton.textContent = '⌨️ play again with a new quote 💬'; restartButton.style.display = 'block'; restartButton.style.background = '#8c0707'; restartButton.style.color = '#FFFFFF'; restartButton.style.margin = '20px auto'; restartButton.style.padding = window.innerWidth < 600 ? '8px 16px' : '10px 20px'; // Smaller button on mobile restartButton.style.fontSize = window.innerWidth < 600 ? '16px' : '18px'; // Smaller font on mobile restartButton.style.cursor = 'pointer'; // Use both touchend (for mobile reliability) and click (for desktop/fallback) const reloadGame = (event) => { event.stopPropagation(); // Prevent triggering the general screen tap window.location.reload(); }; restartButton.addEventListener('touchend', reloadGame); restartButton.addEventListener('click', reloadGame); // Create stats container if stats are provided if (stats) { const statsContainer = document.createElement('div'); statsContainer.style.marginTop = '10px'; // Reduce margin // Adjust stats font size in message statsContainer.style.fontSize = window.innerWidth < 600 ? '16px' : '20px'; statsContainer.style.color = '#ffffff'; statsContainer.style.lineHeight = '1.4'; statsContainer.style.textAlign = 'center'; // Ensure text is centered const wpmText = `WPM: ${stats.wpm}`; const accText = `Accuracy: ${stats.accuracy}%`; // Note: Zombies Defeated needs to be calculated in main.js const zombiesText = `Zombies Defeated: ${stats.zombiesDefeated || 0}`; statsContainer.innerHTML = `${wpmText}
${accText}
${zombiesText}`; // Insert stats before the button // Append the button first this.messageDisplay.appendChild(restartButton); // Now insert stats before the button this.messageDisplay.insertBefore(statsContainer, restartButton); } else { // If no stats, just append the button this.messageDisplay.appendChild(restartButton); } } // Method to focus the hidden input focusHiddenInput() { // Check if it's likely a mobile device before focusing const isMobile = window.innerWidth < 768 && ('ontouchstart' in window || navigator.maxTouchPoints > 0); if (this.hiddenInput && isMobile) { console.log("Focusing hidden input..."); // For debugging // Clear input before focusing to handle potential cached values this.hiddenInput.value = ''; this.hiddenInput.focus(); } } // Handler for the 'input' event on the hidden input handleMobileInput(event) { const inputValue = event.target.value; console.log("Mobile input received:", inputValue); // Debugging if (this.typingManager) { // Pass the raw input value to the typing manager for processing // Pass the raw input value to the typing manager for processing // processMobileInput will return true if the word was completed (ended with space) const wordCompleted = this.typingManager.processMobileInput(inputValue); // IMPORTANT: Clear the input field ONLY after a word is successfully processed if (wordCompleted) { console.log("Word completed via mobile, clearing hidden input."); // Debugging event.target.value = ''; } } } }