// App.jsx import React, { useState, useCallback, useEffect, useRef } from 'react'; import ReactDOM from 'react-dom/client'; // ================================================== // 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 an AI that generate unique sentences for a typing app. Never generate a two sentences that are similar. `; /** * 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 AI_PROMPT = "Create ONE unique sentence for typing practice. Be creative but use ONLY standard keyboard characters found on US/UK QWERTY keyboards: a-z, A-Z, numbers 0-9, and basic punctuation (.!?,-'). Include a mix of capitals, numbers, and punctuation, but avoid special characters like ©, ®, ™, or é. Mix easy and complex words. Keep it under 60 chars. ONLY respond with the sentence - nothing else. Make each sentence unique and engaging."; const MIN_QUEUE_SIZE = 5; const SENTENCES_PER_BATCH = 3; const App = () => { const [currentText, setCurrentText] = useState(''); const [targetText, setTargetText] = useState(null); const [accuracy, setAccuracy] = useState(100); const [sentenceQueue, setSentenceQueue] = useState([]); const [isLoading, setIsLoading] = useState(true); const aiRef = useRef(null); const usedSentencesRef = useRef(new Set()); // Initialize AI and queue useEffect(() => { aiRef.current = new ChatAIClass(); const startGeneration = async () => { try { // Generate first sentence and initial batch const firstSentence = await aiRef.current.getResponse(AI_PROMPT); usedSentencesRef.current.add(firstSentence); setTargetText(firstSentence); await generateMoreSentences(); setIsLoading(false); } catch (error) { console.error('Error in initial generation:', error); } }; startGeneration(); }, []); const generateMoreSentences = async () => { try { const promises = Array(SENTENCES_PER_BATCH).fill().map(() => aiRef.current.getResponse(AI_PROMPT) ); const newSentences = await Promise.all(promises); setSentenceQueue(prev => { // Filter out any sentences we've already used const uniqueSentences = newSentences.filter(sentence => sentence.length > 0 && !usedSentencesRef.current.has(sentence) && !prev.includes(sentence) ); return [...prev, ...uniqueSentences]; }); } catch (error) { console.error('Error generating sentences:', error); } }; const getNextSentence = () => { if (sentenceQueue.length > 0) { const nextSentence = sentenceQueue[0]; setSentenceQueue(prev => prev.slice(1)); usedSentencesRef.current.add(nextSentence); // Generate more sentences if queue is getting low if (sentenceQueue.length < MIN_QUEUE_SIZE) { generateMoreSentences(); } return nextSentence; } return targetText; // Keep current text if queue is empty }; const startGame = useCallback(() => { if (sentenceQueue.length > 0) { setTargetText(getNextSentence()); } setCurrentText(''); setIsGameStarted(true); setAccuracy(100); }, []); const handleInput = (e) => { const inputText = e.target.value; setCurrentText(inputText); // Calculate accuracy let correct = 0; const targetLength = Math.min(inputText.length, targetText.length); for (let i = 0; i < targetLength; i++) { if (inputText[i] === targetText[i]) correct++; } const newAccuracy = Math.floor((correct / targetLength) * 100) || 100; setAccuracy(newAccuracy); // Check if completed if (inputText === targetText) { const nextSentence = getNextSentence(); setTargetText(nextSentence); setCurrentText(''); setAccuracy(100); } }; return (

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

{ if (isLoading || targetText === null) return; if (e.key === 'Enter') { e.preventDefault(); const nextSentence = getNextSentence(); setTargetText(nextSentence); setCurrentText(''); setAccuracy(100); generateMoreSentences(); // Generate new sentences when one is completed } else if (e.key.length === 1) { handleInput({ target: { value: currentText + e.key } }); } else if (e.key === 'Backspace') { handleInput({ target: { value: currentText.slice(0, -1) } }); } }} style={{ width: '100%', padding: '15px 0', fontSize: '2.5rem', backgroundColor: 'transparent', borderBottom: '2px solid transparent', 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', }} autoFocus > {currentText} |

80 ? 'transparent' : '#ff4444', backgroundImage: accuracy > 80 ? 'linear-gradient(-45deg, #00f2fe, #4facfe, #00c8ff, #0891ff)' : 'none', backgroundSize: '200% auto', animation: accuracy > 80 ? 'gradient-text 3s linear infinite' : 'none', WebkitBackgroundClip: 'text', backgroundClip: 'text', textAlign: 'center', }}> Accuracy: {accuracy}%

); }; const style = document.createElement('style'); style.textContent = ` @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gradient-text { background: linear-gradient(-45deg, #00f2fe, #4facfe, #00c8ff, #0891ff); background-size: 200% auto; animation: gradient-text 3s linear infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @keyframes gradient-text { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } `; document.head.appendChild(style); const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();

Other games like this

About Typing App