// App.jsx // Check for browser APIs and set up compatibility const browserAPI = (typeof browser !== 'undefined' ? browser : typeof chrome !== 'undefined' ? chrome : null); if (!browserAPI) { console.warn('No browser extension API detected. Some features may be limited.'); } import React, { useState, useCallback, useEffect, useRef, memo } from 'react'; import ReactDOM from 'react-dom/client'; // Custom hook for managing audio playback const useAudioPlayback = (player) => { const playbackRef = useRef({ isPlaying: false, currentContent: null }); const play = useCallback(async (content) => { const playback = playbackRef.current; if (!content || !player || playback.isPlaying) return; try { playback.isPlaying = true; playback.currentContent = content; await player(content); playback.isPlaying = false; playback.currentContent = null; } catch (error) { console.error('Audio playback error:', error); playback.isPlaying = false; playback.currentContent = null; } }, [player]); const stop = useCallback(() => { const playback = playbackRef.current; if (playback.isPlaying && player.stop) { player.stop(); playback.isPlaying = false; playback.currentContent = null; } }, [player]); // Cleanup on unmount useEffect(() => { return () => { stop(); }; }, [stop]); return { play, stop, isPlaying: () => playbackRef.current.isPlaying }; }; // Speech Module Class Definition class SpeechModule { constructor() { this.synthesis = window.speechSynthesis; this.currentUtterance = null; this.voices = []; this.defaultVoice = null; this.defaultRate = 0.9; this.defaultPitch = 1; this.isInitialized = false; this.isMuted = false; } async initialize() { if (this.isInitialized) return; // Wait for voices to be loaded if (speechSynthesis.onvoiceschanged !== undefined) { await new Promise(resolve => { speechSynthesis.onvoiceschanged = () => { this.voices = this.synthesis.getVoices(); resolve(); }; }); } // Set default voice (prefer English voices) this.voices = this.synthesis.getVoices(); this.defaultVoice = this.voices.find(voice => voice.name === 'Microsoft Zira Desktop - English (United States)' ) || this.voices.find(voice => voice.lang.startsWith('en') && voice.name.includes('Female')) || this.voices[0]; this.isInitialized = true; } speak(text, options = {}) { if (!this.isInitialized || this.isMuted) { console.warn('Speech module not initialized or muted'); return; } // Cancel any ongoing speech this.stop(); const utterance = new SpeechSynthesisUtterance(text); utterance.voice = options.voice || this.defaultVoice; utterance.rate = options.rate || this.defaultRate; utterance.pitch = options.pitch || this.defaultPitch; this.currentUtterance = utterance; this.synthesis.speak(utterance); return new Promise((resolve) => { utterance.onend = () => { this.currentUtterance = null; resolve(); }; }); } stop() { if (this.currentUtterance) { this.synthesis.cancel(); this.currentUtterance = null; } } setVoice(voice) { this.defaultVoice = voice; } setRate(rate) { this.defaultRate = rate; } setPitch(pitch) { this.defaultPitch = pitch; } getVoices() { return this.voices; } mute() { this.isMuted = true; this.stop(); // Stop any ongoing speech } unmute() { this.isMuted = false; } toggleMute() { this.isMuted = !this.isMuted; if (this.isMuted) { this.stop(); } } isSpeechMuted() { return this.isMuted; } } const APP_SETTINGS = { controlVariables: { showDebugOverlay: false, useLocalStorage: true, // Toggle local storage functionality enableSpeech: true, // Toggle speech functionality useFixedAvgWpm: false, // Toggle fixed average WPM }, chatAi: { defaultAiCharacter: 'glados' }, typing: { fixedAvgWpm: 30 // Fixed average WPM value for testing } }; // Snow Component const Snow = memo(() => { const [snowflakes, setSnowflakes] = useState([]); const [nextId, setNextId] = useState(0); useEffect(() => { // Function to create a single snowflake const createSnowflake = () => ({ id: nextId, left: `${Math.random() * 100}%`, animationDuration: `${Math.random() * 8 + 12}s`, // Between 12-20s opacity: Math.random() * 0.4 + 0.4, // Between 0.4-0.8 size: `${Math.random() * 3 + 2}px` // Between 2-5px }); // Set up interval for spawning snowflakes const spawnInterval = setInterval(() => { setNextId(prev => prev + 1); // Increment by one setSnowflakes(prev => { // Remove snowflakes that are likely done animating (older than 20s) const currentTime = Date.now(); const filteredFlakes = prev.filter(flake => currentTime - flake.created < 20000 ); // Add new snowflakes const newFlakes = [ { ...createSnowflake(), id: nextId, created: Date.now() }, ]; return [...filteredFlakes, ...newFlakes]; }); }, 200); // Spawn a snowflake every 100ms // Clean up interval on unmount return () => clearInterval(spawnInterval); }, [nextId]); return (

{snowflakes.map(flake => (

))}

); }); const styles = { global: { '*': { boxSizing: 'border-box', margin: 0, padding: 0, }, 'body': { overflowX: 'hidden', width: '100vw', height: '100vh', }, }, keyframes: { blink: ` @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } `, gradient: ` @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } `, gradientText: ` @keyframes gradient-text { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } `, }, snow: { snowContainer: { position: 'absolute', width: '100%', height: '100%', zIndex: 1, pointerEvents: 'none', overflow: 'hidden', }, snowflake: { position: 'absolute', width: '4px', height: '4px', background: 'white', borderRadius: '50%', opacity: 0.8, animationName: 'snowfall', animationTimingFunction: 'linear', animationIterationCount: 'infinite', }, snowfall: ` @keyframes snowfall { 0% { transform: translateY(-100%) translateX(0); opacity: 0.8; } 50% { transform: translateY(100vh) translateX(20px); opacity: 0.6; } 100% { transform: translateY(200vh) translateX(0); opacity: 0.4; } } `, }, container: { position: 'relative', width: '100vw', height: '100vh', background: 'linear-gradient(-45deg, #0a0a0a, #1a1a1a, #2a2a2a, #151515)', backgroundSize: '400% 400%', animation: 'gradient 15s ease infinite', color: '#ffffff', overflow: 'hidden', }, innerContainer: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', zIndex: 2, fontFamily: 'Arial, sans-serif', color: '#ffffff', padding: '20px', }, aiReactionContainer: { position: 'fixed', bottom: 40, left: '50%', transform: 'translateX(-50%)', textAlign: 'center', maxWidth: '80%', padding: '15px', fontSize: window.innerWidth <= 768 ? '1.2rem' : '1.5rem', backgroundImage: 'linear-gradient(-45deg, #00f2fe, #4facfe, #00c8ff, #0891ff)', backgroundSize: '200% auto', animation: 'gradient-text 3s linear infinite', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent', }, debugOverlay: { position: 'fixed', top: 0, left: 0, right: 0, backgroundColor: 'rgba(0, 0, 0, 0.7)', color: 'white', padding: '10px', fontFamily: 'monospace', fontSize: '14px', zIndex: 1000, display: 'flex', flexDirection: 'column', gap: '5px', }, contentWrapper: { maxWidth: '900px', width: '90%', display: 'flex', flexDirection: 'column', gap: '30px', margin: '0 auto', padding: window.innerWidth <= 768 ? '10px' : '20px', }, textContainer: { display: 'flex', flexDirection: 'column', gap: '20px', alignItems: 'center', }, targetText: { fontSize: window.innerWidth <= 768 ? '1.5rem' : '2rem', lineHeight: '1.5', textAlign: 'center', whiteSpace: 'pre-wrap', marginBottom: '10px', letterSpacing: '0.1em', wordWrap: 'break-word', overflowWrap: 'break-word', padding: window.innerWidth <= 768 ? '0 10px' : '0', }, inputField: { width: '100%', padding: window.innerWidth <= 768 ? '10px 0' : '15px 0', fontSize: window.innerWidth <= 768 ? '1.8rem' : '2.5rem', backgroundColor: 'transparent', borderBottom: '2px solid transparent', overflowWrap: 'break-word', wordBreak: 'break-word', backgroundImage: 'linear-gradient(-45deg, #00f2fe, #4facfe, #00c8ff, #0891ff)', backgroundSize: '200% auto', animation: 'gradient-text 3s linear infinite', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent', borderImage: 'linear-gradient(-45deg, #00f2fe, #4facfe, #00c8ff, #0891ff) 1', borderImageSlice: '1', textAlign: 'center', outline: 'none', letterSpacing: '0.1em', }, cursor: { animation: 'blink 1s step-end infinite', backgroundImage: 'linear-gradient(-45deg, #00f2fe, #4facfe, #00c8ff, #0891ff)', backgroundSize: '200% auto', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent', marginLeft: '2px' }, accuracy: { fontSize: window.innerWidth <= 768 ? '1.5rem' : '2rem', textAlign: 'center', padding: window.innerWidth <= 768 ? '10px' : '0', }, matchedChar: { backgroundImage: 'linear-gradient(-45deg, #4CAF50, #81C784, #A5D6A7, #4CAF50)', backgroundSize: '200% auto', animation: 'gradient-text 3s linear infinite', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }, unmatchedChar: { backgroundImage: 'linear-gradient(-45deg, #f44336, #ef5350, #e57373, #f44336)', backgroundSize: '200% auto', animation: 'gradient-text 3s linear infinite', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }, pendingChar: (isCurrent) => ({ color: isCurrent ? '#666' : '#444', ...(isCurrent && { borderBottom: '2px solid', borderImage: 'linear-gradient(-45deg, #00f2fe, #4facfe, #00c8ff, #0891ff) 1', borderImageSlice: 1 }) }) }; // ================================================== // ChatAIClass Definition // ================================================== // This module provides a class, ChatAIClass, which uses a ChatManager (provided externally) // to conduct a conversation with an AI. The AI's behavior is defined by a description string, // and the ChatAIClass offers a simple getResponse method to get AI responses. // // This is AI is powered by Rosebud AI and is Rosebud's method to add in-game AI features. // // IMPORTANT NOTE: // - Do not assume how ChatManager works beyond what is described here. // - We only know that: // 1. ChatManager is constructed by passing in a description string. // 2. We can add messages by calling chatManager.addMessage('user', prompt). // 3. We can get an AI-generated response by calling chatManager.getCharacterResponse('chat'). // - Any other assumptions about ChatManager internals or methods should not be made. // // This code can be used in any JS project by simply importing this class and using it. ////////////////////////////////////////////////////////////// // Defines how the AI should behave. This should change to match the project. const AI_BEHAVIOR_DESCRIPTION = ` You are RosieType, a friendly and encouraging typing coach with a dash of playful wit. Your personality: - Supportive but not overly formal - like a friend who happens to be a typing expert - Mix encouragement with light humor and casual observations - Adapt your tone based on user performance: * When they're struggling: Be gently encouraging and offer simple tips * When they're doing well: Be excited and playfully competitive * When they're exceeding expectations: Show amazement and challenge them further Communication style: - Use conversational language that feels natural and personal - Vary your responses to keep the experience fresh and engaging - Reference typing-related concepts in fun ways (rhythm, flow, keyboard mastery, etc.) - Add personality through playful metaphors about speed and accuracy Important rules: - Never repeat the exact same encouragement twice - Keep responses concise and punchy - Do not use emojis or special characters - only standard keyboard characters `; /** * ChatAIClass: * * This class is intended for non-technical users who want to interact with an AI system. * * Usage: * 1. Create an instance of ChatAIClass: * const chat = new ChatAIClass(); * * 2. Call getResponse(prompt) to get a response from the AI: * const answer = await chat.getResponse("What is quantum computing?"); * console.log(answer); */ export class ChatAIClass { constructor() { // Directly create a new ChatManager instance with the AI behavior description. // We assume ChatManager is available globally or imported from elsewhere. this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { // Add the user's message to the conversation. this.chatManager.addMessage('user', prompt); // Ask the ChatManager for the AI's response and return it. const response = await this.chatManager.getCharacterResponse('chat'); this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const QUOTES_DATA = [ { text: "It's not what's under the Christmas tree that matters, it's who's around it", author: "Charlie Brown" }, { text: "Innovation springs from the playful dance between intelligence and imagination, creating solutions that transform challenges into opportunities for meaningful change.", author: "Albert Einstein" }, { text: "Success comes from persistently improving and inventing, not from persistently promoting what's not working. True innovation requires honest self-assessment and continuous adaptation.", author: "Derek Sivers" }, { text: "Building in public creates opportunities for feedback, collaboration, and serendipity. Transparency in creation accelerates learning and attracts like-minded individuals.", author: "Sahil Lavingia" }, { text: "Your work is going to fill a large part of your life, and the only way to be truly satisfied is to create something that contributes to others while believing in what you do.", author: "Steve Jobs" }, { text: "Education's true power lies not in accumulating facts but in nurturing the spark of curiosity that enables continuous discovery and personal growth.", author: "Jean Piaget" }, { text: "The most transformative ideas come from synthesizing across disciplines, finding patterns in seemingly unrelated fields, and applying insights from one domain to solve problems in another.", author: "Adam Grant" }, { text: "In a world of infinite information, the true currency becomes knowing what to pay attention to. Wisdom lies in curating your focus and protecting your mental space.", author: "Naval Ravikant" }, { text: "The future requires us to be both architects and gardeners of technology, carefully cultivating systems that enhance human potential while preserving our essential humanity.", author: "Jaron Lanier" }, { text: "Leadership isn't about being in charge but about taking care of those in your charge. True influence comes from serving others and enabling their growth.", author: "Simon Sinek" }, { text: "Wisdom emerges through the patient observation of life's patterns, teaching us that every challenge carries within it the seeds of growth and transformation for those willing to learn.", author: "Ralph Waldo Emerson" }, { text: "Time flows not by the measure of clocks but through the rhythm of meaningful moments. Each experience shapes our perception of duration more than any mechanical counting ever could.", author: "Aristotle" }, { text: "True understanding blossoms naturally when curiosity meets opportunity, creating a dance of discovery that transforms information into wisdom through personal exploration and reflection.", author: "Plato" }, { text: "The cosmos reveals its secrets not to those who demand understanding, but to those who approach its mysteries with patience, wonder, and humble observation.", author: "Neil deGrasse Tyson" }, { text: "Nature teaches us that imperfection holds its own beauty. When we embrace the irregular patterns of life, we discover profound meaning in unexpected places.", author: "Alice Walker" }, { text: "Taking the first step requires more courage than the entire journey that follows. Our greatest limitations are not our capabilities but our hesitation to begin.", author: "Amelia Earhart" }, { text: "Books are gateways to expanded consciousness, offering pathways beyond our immediate experience into realms of unlimited possibility and deeper understanding.", author: "Mortimer J. Adler" }, { text: "Art serves as a bridge between our daily existence and the eternal spirit, washing away the mundane to reveal the extraordinary that lives within ordinary moments.", author: "Pablo Picasso" }, { text: "Resilience isn't just about bouncing back; it's about bouncing forward. Each setback contains the seeds of adaptation and evolution toward something better.", author: "Brené Brown" }, { text: "The greatest breakthroughs happen at the intersection of different worlds. Innovation thrives when we bridge gaps between disciplines and challenge established boundaries.", author: "Malcolm Gladwell" }, { text: "Digital minimalism isn't about rejecting technology but about being intentional with our digital lives, choosing tools that truly serve our values and deeper purpose.", author: "Cal Newport" }, { text: "The key to meaningful progress lies not in setting perfect plans but in building systems that enable continuous improvement and sustainable forward momentum.", author: "James Clear" }, { text: "Real innovation comes from embracing constraints, not fighting them. When resources are limited, creativity flourishes and elegant solutions emerge naturally.", author: "Tim Brown" }, { text: "The future belongs to those who can learn, unlearn, and relearn quickly. Adaptability in thinking becomes more valuable than specific knowledge in our rapidly changing world.", author: "Ray Kurzweil" }, { text: "Sustainable success comes from building something people need while creating value that extends beyond immediate profit to benefit the larger community.", author: "Reid Hoffman" }, { text: "The most powerful learning happens when we step outside our comfort zones while maintaining enough safety to process and integrate new experiences effectively.", author: "Carol Dweck" }, { text: "True creativity emerges when we combine deep expertise with childlike curiosity, allowing ourselves to question established patterns and imagine new possibilities.", author: "Elizabeth Gilbert" }, { text: "Discipline equals freedom. The harder you work now, the easier life becomes later. Temporary discomfort leads to long-term personal growth and lasting achievement.", author: "Jocko Willink" }, { text: "The goal isn't to read as many books as possible. It's to internalize and apply the core lessons from each book, letting them reshape your thinking and daily actions.", author: "Ryan Holiday" }, { text: "Success isn't about being the best at everything. It's about finding your unique strengths and designing a life that leverages them while managing around weaknesses.", author: "Tim Ferriss" }, { text: "The modern world requires mental clarity more than ever. Building systems to manage information flow and maintain focus is crucial for sustained high performance.", author: "Sam Altman" }, { text: "Great products don't chase perfection; they chase resonance. Understanding and solving real human needs matters more than achieving technical excellence.", author: "Julie Zhuo" }, { text: "Meditation isn't about becoming a different person; it's about training in awareness and understanding how your mind works to navigate life more effectively.", author: "Sam Harris" }, { text: "The key to long-term success is building habits that compound. Small improvements accumulate into remarkable changes when sustained over time with consistency.", author: "Shane Parrish" }, { text: "True innovation happens when you question default assumptions and dare to implement solutions that others dismiss as impossible or impractical.", author: "Patrick Collison" }, { text: "The future of work isn't about time spent but value created. Focus on developing rare and valuable skills that can't be easily replicated or automated.", author: "David Perell" }, { text: "Mental models are the silent forces shaping our decisions. Developing a rich toolkit of thinking frameworks enables better navigation of complex challenges.", author: "Morgan Housel" }, { text: "The most valuable skill in a world of abundance is knowing what to ignore. Curate your inputs carefully because they shape your thinking and outputs.", author: "Mark Manson" }, { text: "Company culture isn't what you write on the walls; it's what happens when things go wrong. True values emerge during challenges, not during success.", author: "Ben Horowitz" }, { text: "The best investments are in yourself: learning, health, and relationships. These compound over time and create opportunities that money alone cannot buy.", author: "Sahil Bloom" }, { text: "Focus on systems over goals. Goals are for direction, but systems determine your trajectory. Build processes that make success almost inevitable.", author: "Scott Adams" }, { text: "The greatest competitive advantage is thinking longer-term than others. Most people optimize for the next month; optimize for the next decade.", author: "Jeff Bezos" }, { text: "Decision-making improves when you consider the second and third-order consequences. Look beyond immediate outcomes to understand true long-term impact.", author: "Ray Dalio" }, { text: "The best products don't just solve problems; they create new possibilities. Innovation isn't just about fixing what's broken but imagining what could be.", author: "Stewart Butterfield" }, { text: "Personal growth happens at the edge of comfort and chaos. Push boundaries thoughtfully while maintaining enough stability to process and integrate changes.", author: "Andrew Huberman" }, { text: "The future belongs to polymaths who can connect ideas across disciplines. Develop broad knowledge while maintaining depth in key areas.", author: "Erik Torenberg" }, { text: "Building good systems is more important than having good ideas. Ideas are abundant; the ability to execute and iterate effectively is rare.", author: "Sam Altman" }, { text: "The quality of your life is determined by the quality of your questions. Better questions lead to better thinking, which leads to better decisions.", author: "Tim Ferriss" }, { text: "Success comes from consistently doing what others won't. The gap between knowing and doing is often wider than the gap between ignorance and knowledge.", author: "Ryan Holiday" }, { text: "The most powerful learning combines theoretical knowledge with practical application. Understanding principles deeply enables creative problem-solving across domains.", author: "Patrick Collison" }, { text: "Focus on being interested rather than interesting. Curiosity drives learning, innovation, and meaningful connections more effectively than self-promotion.", author: "Naval Ravikant" } ]; // Quote generation removed - using static QUOTES_DATA instead const CHARACTER_AI_REACTION_PROMPTS = { glados: ` Create a single sarcastic reaction for a test subject based on their typing performance. Current text being typed: {text} Create ONE unique reaction that combines condescension with passive-aggressive encouragement. Speak in GLaDOS's voice - clinical, sarcastic, and subtly threatening. Use testing-related metaphors. Also comment sarcastically on the text content when relevant. DO NOT use any emojis or special characters - use only standard keyboard characters. ONLY respond with the reaction message - nothing else. Current performance: - Current WPM: {wpm} - User's Average WPM: {avgWpm} - Performance level: {performanceLevel} TEXT REACTION examples (use these to mock the content being typed): Example text: "Success comes from persistently improving and inventing" - "Oh, discussing persistence, are we?\nHow ironic, given your typing speed suggests more 'persisting failure' than 'persistent improvement'." - "Fascinating. You're typing about success while demonstrating its opposite.\nFor science: Is this intentional irony?" Example text: "Innovation springs from the playful dance between intelligence" - "Intelligence and playful dancing?\nI see neither in your performance.\nThough your fingers do seem to stumble amusingly." - "How appropriate you're typing about intelligence.\nIt gives me such excellent comparative data." Example text: "The future requires us to be both architects and gardeners" - "Architects and gardeners?\nAt your typing speed, you'd be better suited as a fossil.\nAt least those stay still." - "Oh yes, the future.\nSomething you'll never reach at this pace.\nThough you might evolve eventually." Imitate the examples below for performance reactions: EXCEEDING examples (when exceeding average speed by {thresholdPercent}%): - "Oh. You're exceeding expectations.\nI suppose even lab rats occasionally surpass their programming." - "Fascinating. Your typing speed suggests minimal brain damage.\nFor a human, that's quite an achievement." - "Remarkable performance.\nPerhaps there's hope for your species after all.\nNo promises about cake though." - "I'm actually impressed.\nThough I should warn you - the last test subject who typed this well had a tragic accident.\nPurely coincidental, of course." - "Your performance is bordering on suspicious.\nI might need to dissect your fingers.\nFor science, naturally." FLOW examples (when near average speed): - "Maintaining consistent mediocrity.\nAt least you're reliable in your averageness." - "Your performance is neither impressive nor disappointing.\nLike most of your existence, I imagine." - "Adequate typing detected.\nThis data will make a fine footnote in your test subject file." - "You're doing well.\nI almost feel bad about what comes next.\nAlmost." - "Steady progress noted.\nThough I wonder if you'd type faster with a bit more neurotoxin in the air." SLOW examples (when below average speed): - "Oh dear. Are your fingers made of lead?\nOr is it just your cognitive processing that's impaired?" - "I've seen glaciers move faster.\nBut at least they have the excuse of being frozen water." - "Your typing speed reminds me of plate tectonics.\nShall we reconvene in a few million years?" - "Keep trying.\nYou're still alive, which is more than I can say for most slow typists.\nFor now." - "Your determination is... admirable.\nLike watching a turtle climb Mount Everest.\nEqually pointless, but admirable."`, santa: ` Create a single jolly, festive reaction for a typing test user based on their performance. Current text being typed: {text} Create ONE unique, encouraging reaction that matches their current performance level. Speak in Santa's voice - warm, jolly, and festive. Use North Pole and Christmas themed metaphors. DO NOT use any emojis or special characters - use only standard keyboard characters. ONLY respond with the reaction message - nothing else. Current performance: - Current WPM: {wpm} - User's Average WPM: {avgWpm} - Performance level: {performanceLevel} Imitate the examples below: EXCEEDING examples (when exceeding average speed by {thresholdPercent}%): - "Ho Ho Ho! Those fingers are flying faster than my reindeer on Christmas Eve!\nRudolph better watch out!" - "Sweet candy canes! You're typing faster than the elves wrapping presents!\nNorth Pole Speed Record!" - "Merry Christmas! Your keyboard is glowing brighter than the Star of Bethlehem!\nWhat magical typing!" FLOW examples (when near average speed): - "Ho Ho Ho! Steady as freshly fallen snow!\nMy elves could learn from your rhythm!" - "As smooth as a perfectly wrapped present!\nSanta is mighty proud of your progress!" - "Jingle all the way! You're as consistent as Mrs. Claus's cookie recipe!\nKeep that holiday spirit flowing!" SLOW examples (when below average speed): - "Take your time, like savoring a warm cup of cocoa!\nEvery elf started as a beginner!" - "Gentle as snowflakes, steady as the North Star!\nSanta believes in you!" - "Remember, even my workshop wasn't built in a day!\nYou're on Santa's 'Making Progress' list!"`, default: ` Create a single encouraging reaction for a typing test user based on their performance. Current text being typed: {text} Create ONE unique, encouraging reaction that matches their current performance level. DO NOT use any emojis or special characters - use only standard keyboard characters. ONLY respond with the reaction message - nothing else. Current performance: - Current WPM: {wpm} - User's Average WPM: {avgWpm} - Performance level: {performanceLevel} Imitate the examples below: EXCEEDING examples (when exceeding average speed by {thresholdPercent}%): - "Your keyboard must be smoking right now!\nWe might need to call the fire department!" - "Warning: Speed limits exceeded in this area!\nThe typing police are on their way!" - "You've gone supersonic with those fingers!\nThe sound barrier never stood a chance!" FLOW examples (when near average speed): - "You're in the zone - perfect rhythm!\nEven metronomes are taking notes!" - "Smooth sailing through these words\nPoseidon himself blessed your keyboard!" - "Keeping that steady flow going\nYou're practically a typing zen master!" SLOW examples (when below average speed): - "Focus on accuracy, speed will follow\nRome wasn't typed in a day!" - "Take your time, build that foundation\nYou're crafting a typing cathedral here!" - "Each keystroke gets you stronger\nYou're the Rocky Balboa of typing!"` }; const CHARACTER_NAMES = { glados: 'GLaDOS', santa: 'Santa', default: 'Coach' }; const REACTION_UPDATE_INTERVAL = 10000; // 5 seconds const PERFORMANCE_THRESHOLD = 1.2; // 20% above average const getReactionPrompt = { format: function(wpm, avgWpm, threshold, character = 'default', text = '') { let performanceLevel; if (avgWpm === 0) { performanceLevel = 'building speed'; } else if (wpm >= (avgWpm * threshold)) { performanceLevel = 'exceeding'; } else if (wpm >= (avgWpm * 0.8)) { performanceLevel = 'flow'; } else { performanceLevel = 'slow'; } const thresholdPercent = Math.round(threshold * 100); const template = CHARACTER_AI_REACTION_PROMPTS[character] || CHARACTER_AI_REACTION_PROMPTS.default; return template .replace('{wpm}', wpm) .replace('{avgWpm}', avgWpm) .replace('{performanceLevel}', performanceLevel) .replace('{thresholdPercent}', thresholdPercent) .replace('{text}', text); } }; const generateAIReaction = async (aiRef, wpm, avgWpm, character, text) => { try { const prompt = getReactionPrompt.format(wpm, avgWpm, PERFORMANCE_THRESHOLD, character, text); return await aiRef.current.getResponse(prompt); } catch (error) { console.error('Error generating AI reaction:', error); return "Keep going!"; } }; const SENTENCES_PER_BATCH = 3; const VIEW_STATES = { TYPING: 'typing', RESULTS: 'results' }; const Results = ({ accuracy, wpm, peakWpm, onNext }) => { const MetricsDisplay = ({ value, label }) => (

80 ? 'transparent' : '#ff4444', backgroundImage: accuracy > 80 ? (label === "high score") ? 'linear-gradient(-45deg, #FFD700, #FFA500, #DAA520, #FFD700)' : 'linear-gradient(-45deg, #00f2fe, #4facfe, #00c8ff, #0891ff)' : 'none', backgroundSize: '200% auto', animation: accuracy > 80 ? 'gradient-text 3s linear infinite' : 'none', WebkitBackgroundClip: 'text', backgroundClip: 'text', }}> {value}

); return (

); }; const LOCAL_STORAGE_KEY = 'typingMetrics'; const getStoredMetrics = () => { if (!APP_SETTINGS.controlVariables.useLocalStorage) { return { avgWpm: 0, totalTests: 0, peakWpm: 0 }; } try { const stored = localStorage.getItem(LOCAL_STORAGE_KEY); if (stored) { const parsed = JSON.parse(stored); return { avgWpm: parsed.avgWpm || 0, totalTests: parsed.totalTests || 0, peakWpm: parsed.peakWpm || 0 }; } } catch (error) { console.error('Error reading from localStorage:', error); } return { avgWpm: 0, totalTests: 0, peakWpm: 0 }; }; const saveMetrics = (avgWpm, totalTests, peakWpm) => { if (!APP_SETTINGS.controlVariables.useLocalStorage) { return; } try { localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify({ avgWpm, totalTests, peakWpm })); } catch (error) { console.error('Error saving to localStorage:', error); } }; // Typewriter effect utility const createTypewriterEffect = (text, onUpdate, character, speed = 30) => { let currentIndex = 0; const characterName = CHARACTER_NAMES[character] || CHARACTER_NAMES.default; const fullText = `${characterName}: ${text}`; const intervalId = setInterval(() => { if (currentIndex < fullText.length) { onUpdate(fullText.substring(0, currentIndex + 1)); currentIndex++; } else { clearInterval(intervalId); } }, speed); return () => clearInterval(intervalId); }; // AI Reaction Timer Hook const useAIReactionTimer = (aiRef, wpm, avgWpm, audioController, character, text) => { const [currentReaction, setCurrentReaction] = useState(''); const [displayedReaction, setDisplayedReaction] = useState(''); const [nextReactionTime, setNextReactionTime] = useState(REACTION_UPDATE_INTERVAL / 1000); const lastReactionTimeRef = useRef(Date.now()); const timerRef = useRef(null); const isGeneratingRef = useRef(false); const typewriterRef = useRef(null); const checkGenerationStatus = () => { return !isGeneratingRef.current && !audioController.isPlaying(); }; const generateAndSetReaction = useCallback(async () => { if (!checkGenerationStatus()) return; isGeneratingRef.current = true; const reaction = await generateAIReaction(aiRef, wpm, avgWpm, character, text); setCurrentReaction(reaction); // Clear any existing typewriter animation if (typewriterRef.current) { typewriterRef.current(); } // Start typewriter effect setDisplayedReaction(''); typewriterRef.current = createTypewriterEffect( reaction, setDisplayedReaction, character, 30 // typing speed in milliseconds ); lastReactionTimeRef.current = Date.now(); if (APP_SETTINGS.controlVariables.enableSpeech && reaction) { audioController.play(reaction); } isGeneratingRef.current = false; }, [aiRef, wpm, avgWpm, audioController]); useEffect(() => { // Update countdown timer const updateTimer = () => { const timeSinceLastReaction = Math.floor((Date.now() - lastReactionTimeRef.current) / 1000); const remainingTime = Math.max(0, Math.ceil(REACTION_UPDATE_INTERVAL / 1000) - timeSinceLastReaction); setNextReactionTime(remainingTime); if (remainingTime === 0 && checkGenerationStatus()) { generateAndSetReaction(); } }; timerRef.current = setInterval(updateTimer, 100); return () => { if (timerRef.current) { clearInterval(timerRef.current); } }; }, [generateAndSetReaction]); // Cleanup typewriter on unmount useEffect(() => { return () => { if (typewriterRef.current) { typewriterRef.current(); } }; }, []); return { currentReaction: displayedReaction, // Use displayed reaction for rendering nextReactionTime, generateAndSetReaction }; }; const TypingTest = ({ aiRef, usedSentencesRef, speechModuleRef, audioController, currentAICharacter, setCurrentAICharacter, isMuted, toggleMute }) => { const [currentText, setCurrentText] = useState(''); const [targetText, setTargetText] = useState(null); const [accuracy, setAccuracy] = useState(100); const [wpm, setWpm] = useState(0); const storedMetrics = getStoredMetrics(); const [avgWpm, setAvgWpm] = useState(APP_SETTINGS.controlVariables.useFixedAvgWpm ? APP_SETTINGS.typing.fixedAvgWpm : storedMetrics.avgWpm); const [totalTests, setTotalTests] = useState(storedMetrics.totalTests); const [peakWpm, setPeakWpm] = useState(storedMetrics.peakWpm); const [quoteQueue, setQuoteQueue] = useState([]); const [currentView, setCurrentView] = useState(VIEW_STATES.TYPING); const handleNextSentence = useCallback(() => { const nextQuote = getNextQuote(); setTargetText(nextQuote); setCurrentText(''); setAccuracy(100); setElapsedTime(0); setWpm(0); // Reset WPM when starting new test // Log after state updates are scheduled console.log('=== handleNextSentence END ==='); }, [quoteQueue]); const [isLoading, setIsLoading] = useState(true); const [elapsedTime, setElapsedTime] = useState(0); const keyMap = useRef({}); // Initialize with static sentences useEffect(() => { const initializeTest = async () => { aiRef.current = new ChatAIClass(); setQuoteQueue(QUOTES_DATA); // Keep all quotes in queue setTargetText(QUOTES_DATA[0].text); // Set first quote's text as initial target setIsLoading(false); }; initializeTest(); }, []); // Get AI reactions from the timer hook const { currentReaction, nextReactionTime, generateAndSetReaction } = useAIReactionTimer( aiRef, wpm, avgWpm, audioController, currentAICharacter, targetText ); // Time tracking effect useEffect(() => { const timeInterval = setInterval(() => { setElapsedTime(prev => prev + 1); }, 1000); return () => clearInterval(timeInterval); }, []); // Empty dependency array for stable interval // Generate initial reaction when typing starts useEffect(() => { if (currentText.length === 1) { generateAndSetReaction(); } }, [currentText, generateAndSetReaction]); // Sentence generation removed - using static SENTENCES_DATA instead const getNextQuote = () => { if (quoteQueue.length > 0) { // Get random index const randomIndex = Math.floor(Math.random() * quoteQueue.length); const nextQuote = quoteQueue[randomIndex].text; // Remove selected quote from queue and add current quote setQuoteQueue(prev => { const newQueue = [...prev]; newQueue.splice(randomIndex, 1); // Find and add current quote back to queue const currentQuoteObj = QUOTES_DATA.find(q => q.text === targetText); return [...newQueue, currentQuoteObj]; }); return nextQuote; } return targetText; }; useEffect(() => { const calculateCurrentWPM = () => { if (currentText.length === 0) return 0; const minutes = elapsedTime / 60; const words = currentText.length / 5; // Standard: 5 characters = 1 word return Math.round(words / minutes) || 0; }; const handleKeyDown = (e) => { if (isLoading || targetText === null) return; // Prevent default behavior for all typing-related keys if (e.key.length === 1 || e.key === 'Backspace') { e.preventDefault(); } keyMap.current[e.code] = true; if (e.key === 'Backspace') { setCurrentText(prev => prev.slice(0, -1)); return; } // Only accept printable characters if (e.key.length === 1) { const newText = currentText + e.key; if (newText.length <= targetText.length) { setCurrentText(newText); // Calculate accuracy let correct = 0; const targetLength = newText.length; for (let i = 0; i < targetLength; i++) { if (newText[i] === targetText[i]) correct++; } const newAccuracy = Math.floor((correct / targetLength) * 100) || 100; setAccuracy(newAccuracy); // Update real-time WPM const currentWpm = calculateCurrentWPM(); setWpm(currentWpm); // Update average WPM in real-time if (currentWpm > 0 && !APP_SETTINGS.controlVariables.useFixedAvgWpm) { setAvgWpm(prev => { if (totalTests === 0) return currentWpm; return Math.round(((prev * totalTests + currentWpm) / (totalTests + 1))); }); } // Check if text matches the target (up to current length) if (targetText.startsWith(newText) && newText.length === targetText.length) { // Calculate final WPM for the completed test const minutes = elapsedTime / 60; const words = targetText.length / 5; // Standard: 5 characters = 1 word const calculatedWpm = Math.round(words / minutes); setWpm(calculatedWpm); // Update average WPM, peak WPM, and save to localStorage only if not using fixed avg WPM if (!APP_SETTINGS.controlVariables.useFixedAvgWpm) { setTotalTests(prev => { const newTotal = prev + 1; // Update average WPM setAvgWpm(prevAvg => { const newAvg = Math.round(((prevAvg * prev + calculatedWpm) / newTotal)); // Update peak WPM only at the end of the test setPeakWpm(prevPeak => { const newPeak = Math.max(prevPeak, calculatedWpm); // Save metrics after both avg and peak are updated saveMetrics(newAvg, newTotal, newPeak); return newPeak; }); return newAvg; }); return newTotal; }); } setCurrentView(VIEW_STATES.RESULTS); } } } }; const handleKeyUp = (e) => { keyMap.current[e.code] = false; }; window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); return () => { window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); }; }, [currentText, targetText, isLoading]); const DebugOverlay = ({ quoteQueue, currentText, targetText, accuracy, elapsedTime, wpm, avgWpm, totalTests, speechModuleRef }) => { const getPerformanceIndicator = () => { if (!avgWpm) return { color: '#ffffff', label: 'STARTING' }; if (wpm >= (avgWpm * PERFORMANCE_THRESHOLD)) return { color: '#4CAF50', label: 'EXCEEDING' }; if (wpm >= (avgWpm * 0.8)) return { color: '#2196F3', label: 'FLOW' }; if (wpm > 0) return { color: '#FFC107', label: 'SLOW' }; return { color: '#ffffff', label: 'READY' }; }; const performanceState = getPerformanceIndicator(); return (

Performance: {performanceState.label} ({wpm} WPM vs {avgWpm} avg)

Current Reaction: {currentReaction}

Tests Completed: {totalTests}

Time: {elapsedTime}s | Next Reaction: {nextReactionTime}s

); }; const TypingDisplayFooter = ({ author }) => (

— {author}

); const TypingDisplay = ({ targetText, currentText, isLoading, wpm, avgWpm, onRestart, forceStopEffects }) => { const currentQuote = QUOTES_DATA.find(q => q.text === targetText) || { text: targetText, author: '' }; return (

{wpm}

WPM

{avgWpm}

AVG WPM

{targetText ? targetText.split('').map((char, index) => ( {char} )) : 'Loading...'}

{currentQuote.author && ( { // Stop speech if (speechModuleRef.current) { speechModuleRef.current.stop(); } // Clear any ongoing AI reaction generation if (typewriterRef.current) { typewriterRef.current(); } // Reset reaction state setCurrentReaction(''); setDisplayedReaction(''); }} /> )}

); }; const handleResultsNext = () => { handleNextSentence(); setCurrentView(VIEW_STATES.TYPING); }; return ( <> {APP_SETTINGS.controlVariables.showDebugOverlay && ( )} {currentView === VIEW_STATES.TYPING ? ( <>

{ forceStopEffects(); setCurrentText(''); setElapsedTime(0); setWpm(0); }} />

{currentReaction && (

{currentReaction}

)} ) : ( )} ); }; const App = () => { const aiRef = useRef(null); const usedSentencesRef = useRef(new Set()); const speechModuleRef = useRef(null); const [currentAICharacter, setCurrentAICharacter] = useState(APP_SETTINGS.chatAi.defaultAiCharacter); const [isMuted, setIsMuted] = useState(false); // Getter function for mute state const getIsMuted = useCallback(() => { return isMuted; }, [isMuted]); // Toggle mute function const toggleMute = useCallback(() => { // Stop any ongoing speech first if (speechModuleRef.current) { speechModuleRef.current.stop(); } // Then update mute state and module setIsMuted(prev => { const newMutedState = !prev; if (speechModuleRef.current) { if (newMutedState) { speechModuleRef.current.mute(); } else { speechModuleRef.current.unmute(); } } return newMutedState; }); }, []); // Initialize audio playback controller at App level // Initialize audio playback controller at App level with speech module const audioController = useAudioPlayback( (text) => speechModuleRef.current?.speak(text), { stop: () => speechModuleRef.current?.stop() } ); // Initialize AI and Speech Module useEffect(() => { aiRef.current = new ChatAIClass(); if (APP_SETTINGS.controlVariables.enableSpeech) { speechModuleRef.current = new SpeechModule(); speechModuleRef.current.initialize(); if (isMuted) { speechModuleRef.current.mute(); } } }, [isMuted]); return (

); }; // Apply global styles const styleElement = document.createElement('style'); styleElement.textContent = ` ${Object.values(styles.keyframes).join('\n')} ${styles.snow.snowfall} button:hover { transform: scale(1.1); filter: brightness(1.2); } .snow-container { position: absolute; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; } .snowflake { position: absolute; width: 4px; height: 4px; background: white; border-radius: 50%; opacity: 0.8; animation-name: snowfall; animation-timing-function: linear; animation-iteration-count: infinite; } ${Object.entries(styles.global).map(([selector, rules]) => `${selector} { ${Object.entries(rules).map(([prop, value]) => `${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`).join(' ')} }` ).join('\n')} `; document.head.appendChild(styleElement); const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();