// App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // ================================================== // 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 advanced and knowledgeable AI system capable of assisting users with a wide range of topics. You should respond concisely and helpfully, ensuring that the information you provide is accurate, clear, and context-aware. `; /** * 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'); // Add the AI's message to the conversation so it has memory of it. this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const DAILY_SCHEDULE = [ { startHour: 7, endHour: 8, activity: "Wake Up Time", emoji: "🌅" }, { startHour: 8, endHour: 9, activity: "Breakfast Time", emoji: "🥣" }, { startHour: 9, endHour: 12, activity: "Learning Time", emoji: "📚" }, { startHour: 12, endHour: 13, activity: "Lunch Time", emoji: "🍽️" }, { startHour: 13, endHour: 15, activity: "Play Time", emoji: "🎮" }, { startHour: 15, endHour: 16, activity: "Snack Time", emoji: "🍎" }, { startHour: 16, endHour: 18, activity: "Exercise Time", emoji: "⚽" }, { startHour: 18, endHour: 19, activity: "Dinner Time", emoji: "🍕" }, { startHour: 19, endHour: 20, activity: "Bath Time", emoji: "🛁" }, { startHour: 20, endHour: 7, activity: "Bedtime", emoji: "🛏️" }, ]; const getCurrentActivity = () => { const now = new Date(); const currentHour = now.getHours(); const savedSchedule = window.localStorage.getItem('dailySchedule'); const currentSchedule = savedSchedule ? JSON.parse(savedSchedule) : DAILY_SCHEDULE; const currentActivity = currentSchedule.reduce((prev, curr) => { if (currentHour >= curr.startHour) return curr; return prev; }, DAILY_SCHEDULE[0]); return currentActivity; }; const App = () => { const mountRef = useRef(null); const [windowWidth, setWindowWidth] = useState(window.innerWidth); const [childName, setChildName] = useState(() => { const savedName = window.localStorage.getItem('childName'); return savedName || "Your Name"; }); const [isEditingName, setIsEditingName] = useState(false); useEffect(() => { const handleResize = () => { setWindowWidth(window.innerWidth); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const [currentActivity, setCurrentActivity] = useState(getCurrentActivity()); const [currentTime, setCurrentTime] = useState(new Date()); const [progressPercent, setProgressPercent] = useState(0); const [showSettings, setShowSettings] = useState(false); const [schedule, setSchedule] = useState(() => { const savedSchedule = window.localStorage.getItem('dailySchedule'); return savedSchedule ? JSON.parse(savedSchedule) : DAILY_SCHEDULE; }); const calculateProgress = () => { const now = new Date(); const currentHour = now.getHours(); const currentMinute = now.getMinutes(); let totalMinutes; let elapsedMinutes; if (currentActivity.startHour > currentActivity.endHour) { // Handle overnight activities (like bedtime) const totalHours = (24 - currentActivity.startHour) + currentActivity.endHour; totalMinutes = totalHours * 60; if (currentHour < currentActivity.endHour) { // We're in the morning part of the overnight period elapsedMinutes = ((currentHour + 24) - currentActivity.startHour) * 60 + currentMinute; } else if (currentHour >= currentActivity.startHour) { // We're in the evening part of the overnight period elapsedMinutes = (currentHour - currentActivity.startHour) * 60 + currentMinute; } } else { // Handle regular daytime activities totalMinutes = (currentActivity.endHour - currentActivity.startHour) * 60; elapsedMinutes = (currentHour - currentActivity.startHour) * 60 + currentMinute; } const progress = Math.min((elapsedMinutes / totalMinutes) * 100, 100); return Math.max(0, progress); }; useEffect(() => { // Update time, activity and progress every second const intervalId = setInterval(() => { const now = new Date(); setCurrentTime(now); setCurrentActivity(getCurrentActivity()); setProgressPercent(calculateProgress()); }, 1000); return () => clearInterval(intervalId); }, [currentActivity]); useEffect(() => { // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Create particles const particlesGeometry = new THREE.BufferGeometry(); const particleCount = 200; const posArray = new Float32Array(particleCount * 3); const speedArray = new Float32Array(particleCount); for(let i = 0; i < particleCount * 3; i += 3) { // Position posArray[i] = (Math.random() - 0.5) * 10; // x posArray[i + 1] = (Math.random() - 0.5) * 10; // y posArray[i + 2] = (Math.random() - 0.5) * 10; // z // Speed speedArray[i/3] = Math.random() * 0.02 + 0.01; } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); const particlesMaterial = new THREE.PointsMaterial({ size: 0.15, color: 0x4a90e2, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, sizeAttenuation: true }); const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); scene.add(particlesMesh); camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); const positions = particlesGeometry.attributes.position.array; for(let i = 0; i < positions.length; i += 3) { positions[i + 1] += speedArray[i/3]; // Move up // Reset position when particle goes too high if(positions[i + 1] > 5) { positions[i + 1] = -5; } } particlesGeometry.attributes.position.needsUpdate = true; particlesMesh.rotation.x += 0.0005; particlesMesh.rotation.y += 0.0005; renderer.render(scene, camera); }; animate(); // Cleanup return () => { mountRef.current.removeChild(renderer.domElement); particlesGeometry.dispose(); particlesMaterial.dispose(); renderer.dispose(); }; }, []); return (

setIsEditingName(true)} style={{ cursor: 'pointer', marginBottom: '30px', marginTop: window.innerWidth < 768 ? '40px' : '20px', }}> {isEditingName ? ( setChildName(e.target.value)} onBlur={() => { setIsEditingName(false); window.localStorage.setItem('childName', childName); }} onKeyPress={(e) => { if (e.key === 'Enter') { setIsEditingName(false); window.localStorage.setItem('childName', childName); } }} style={{ fontSize: window.innerWidth < 768 ? '2.8rem' : '3.5rem', textAlign: 'center', border: 'none', background: 'transparent', padding: '10px 0', width: '100%', maxWidth: '400px', outline: 'none', fontFamily: '"Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive', color: '#FF6B6B', transition: 'all 0.3s ease', }} /> ) : (

{childName}

)}

{currentTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}

{currentActivity.emoji}

{currentActivity.activity}

{Math.round(progressPercent)}% of activity completed

{showSettings && (

Schedule Settings

{schedule.map((item, index) => (

{ const newSchedule = [...schedule]; newSchedule[index] = { ...item, startHour: parseInt(e.target.value, 10) }; setSchedule(newSchedule); }} min="0" max="23" style={{ width: window.innerWidth < 768 ? '100%' : '60px', padding: window.innerWidth < 768 ? '12px' : '8px', borderRadius: '8px', border: '1px solid #ddd', }} /> to { const newSchedule = [...schedule]; newSchedule[index] = { ...item, endHour: parseInt(e.target.value, 10) }; setSchedule(newSchedule); }} min="0" max="23" style={{ width: window.innerWidth < 768 ? '100%' : '60px', padding: window.innerWidth < 768 ? '12px' : '8px', borderRadius: '8px', border: '1px solid #ddd', }} />

{ const newSchedule = [...schedule]; newSchedule[index] = { ...item, emoji: e.target.value }; setSchedule(newSchedule); }} style={{ width: '40px', fontSize: '24px', padding: '8px', borderRadius: '8px', border: '1px solid #ddd', textAlign: 'center', background: 'white', cursor: 'text' }} /> { const newSchedule = [...schedule]; newSchedule[index] = { ...item, activity: e.target.value }; setSchedule(newSchedule); }} style={{ flex: 1, padding: '8px', borderRadius: '8px', border: '1px solid #ddd', }} />

))}

{ window.localStorage.setItem('dailySchedule', JSON.stringify(schedule)); setCurrentActivity(getCurrentActivity()); setShowSettings(false); }} style={{ flex: 1, padding: '15px 25px', textAlign: 'center', fontSize: window.innerWidth < 768 ? '1.2rem' : '1rem', color: '#4a90e2', cursor: 'pointer', fontFamily: '"Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive', transition: 'color 0.2s ease', userSelect: 'none', WebkitTapHighlightColor: 'transparent', }} onMouseEnter={(e) => e.target.style.color = '#2271b1'} onMouseLeave={(e) => e.target.style.color = '#4a90e2'} > Save Changes ✨

setShowSettings(false)} style={{ padding: '15px 25px', textAlign: 'center', fontSize: window.innerWidth < 768 ? '1.2rem' : '1rem', color: '#666', cursor: 'pointer', fontFamily: '"Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive', transition: 'color 0.2s ease', userSelect: 'none', WebkitTapHighlightColor: 'transparent', }} onMouseEnter={(e) => e.target.style.color = '#444'} onMouseLeave={(e) => e.target.style.color = '#666'} > Close ×

)}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();