// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; import { DragControls } from 'three/examples/jsm/controls/DragControls'; // ================================================== // General Notes for Rosie AI // ================================================== // Note: In sandboxed environments, avoid using

elements and traditional // form submissions as they may be blocked by security policies. Instead, use // controlled components with direct event handlers (onClick, onChange, etc.). // ================================================== // 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('classify'). // - 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('classify'); // 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 App = () => { const mountRef = useRef(null); const [gameState, setGameState] = useState('not-started'); // 'not-started', 'in-progress', 'completed' const [startTime, setStartTime] = useState(null); const [endTime, setEndTime] = useState(null); const [score, setScore] = useState(null); const [circleCount, setCircleCount] = useState(5); const [isOrderChecked, setIsOrderChecked] = useState(false); const circlesRef = useRef([]); const sceneRef = useRef(null); const cameraRef = useRef(null); const rendererRef = useRef(null); const controlsRef = useRef(null); const animationFrameRef = useRef(null); // Generate random circles with different sizes and colors const generateCircles = useCallback((count) => { // Clear existing circles if any if (circlesRef.current.length > 0) { circlesRef.current.forEach(circle => { if (sceneRef.current) { sceneRef.current.remove(circle); if (circle.geometry) circle.geometry.dispose(); if (circle.material) circle.material.dispose(); } }); } const newCircles = []; const colors = [0xff5555, 0x55ff55, 0x5555ff, 0xffff55, 0xff55ff, 0x55ffff]; const baseSize = 0.5; const sizeIncrement = 0.2; const spacing = 1.5; // Create circles with increasing sizes for (let i = 0; i < count; i++) { const size = baseSize + (i * sizeIncrement); const color = colors[i % colors.length]; const geometry = new THREE.CircleGeometry(size, 32); const material = new THREE.MeshBasicMaterial({ color: color, transparent: true, opacity: 0.8, side: THREE.DoubleSide }); const circle = new THREE.Mesh(geometry, material); circle.position.z = 0; // Store original size as property for later comparison circle.userData = { originalSize: size, originalIndex: i }; newCircles.push(circle); } // Shuffle circles randomly const shuffledCircles = [...newCircles]; for (let i = shuffledCircles.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffledCircles[i], shuffledCircles[j]] = [shuffledCircles[j], shuffledCircles[i]]; } // Position circles in a row shuffledCircles.forEach((circle, index) => { const x = (index - (count - 1) / 2) * spacing; circle.position.x = x; if (sceneRef.current) { sceneRef.current.add(circle); } }); circlesRef.current = shuffledCircles; // Set up drag controls if (sceneRef.current && cameraRef.current && rendererRef.current) { if (controlsRef.current) { controlsRef.current.dispose(); } controlsRef.current = new DragControls( shuffledCircles, cameraRef.current, rendererRef.current.domElement ); controlsRef.current.addEventListener('dragstart', (event) => { event.object.material.opacity = 0.5; }); controlsRef.current.addEventListener('dragend', (event) => { event.object.material.opacity = 0.8; checkOrder(); }); controlsRef.current.addEventListener('drag', (event) => { event.object.position.y = 0; // Restrict movement to x-axis only }); } }, []); // Check if circles are in correct order (by size) const checkOrder = useCallback((manualCheck = false) => { if (circlesRef.current.length === 0) return false; if (gameState !== 'in-progress' && !manualCheck) return false; // Sort circles by x position const sortedByPosition = [...circlesRef.current].sort( (a, b) => a.position.x - b.position.x ); // Check if circles are sorted by size (smallest to largest) const isCorrect = sortedByPosition.every((circle, index, array) => { if (index === 0) return true; return circle.userData.originalSize > array[index - 1].userData.originalSize; }); if (isCorrect) { const now = Date.now(); setEndTime(now); setGameState('completed'); // Calculate score based on time taken (lower time = higher score) const timeTaken = (now - startTime) / 1000; // Convert to seconds const baseScore = 1000; const timeDeduction = Math.min(baseScore - 1, Math.floor(timeTaken * 2)); const finalScore = baseScore - timeDeduction; setScore(finalScore); // Highlight all circles in green to indicate correct order sortedByPosition.forEach(circle => { circle.material.color.set(0x00ff00); }); } else if (manualCheck) { // If manually checked but incorrect, highlight in red temporarily setIsOrderChecked(true); sortedByPosition.forEach(circle => { const originalColor = circle.material.color.getHex(); circle.material.color.set(0xff0000); // Reset color after a short delay setTimeout(() => { if (circle.material) { circle.material.color.setHex(originalColor); } }, 500); }); // Reset the checked state after a delay setTimeout(() => { setIsOrderChecked(false); }, 1000); } return isCorrect; }, [gameState, startTime]); // Start a new game const startGame = useCallback(() => { setGameState('in-progress'); setStartTime(Date.now()); setEndTime(null); setScore(null); setIsOrderChecked(false); generateCircles(circleCount); }, [generateCircles, circleCount]); useEffect(() => { // Scene setup const scene = new THREE.Scene(); sceneRef.current = scene; const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); cameraRef.current = camera; const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); rendererRef.current = renderer; // Handle window resizing const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; const pixelRatio = window.devicePixelRatio; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); renderer.setPixelRatio(pixelRatio); // Update camera position camera.position.z = 5; }; // Initial setup renderer.setPixelRatio(window.devicePixelRatio); mountRef.current.appendChild(renderer.domElement); handleResize(); // Call once to set initial dimensions window.addEventListener('resize', handleResize); // Create sorting platform (line) const lineGeometry = new THREE.BoxGeometry(10, 0.05, 0.05); const lineMaterial = new THREE.MeshBasicMaterial({ color: 0x333333 }); const line = new THREE.Mesh(lineGeometry, lineMaterial); line.position.y = -1.5; scene.add(line); camera.position.z = 5; // Animation const animate = () => { animationFrameRef.current = requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', handleResize); if (mountRef.current && renderer.domElement) { mountRef.current.removeChild(renderer.domElement); } // Dispose of geometries and materials lineGeometry.dispose(); lineMaterial.dispose(); circlesRef.current.forEach(circle => { if (circle.geometry) circle.geometry.dispose(); if (circle.material) circle.material.dispose(); }); if (controlsRef.current) { controlsRef.current.dispose(); } if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } renderer.dispose(); }; }, []); // Calculate the time elapsed during game const getElapsedTime = () => { if (gameState === 'not-started') return 0; const endPoint = gameState === 'completed' ? endTime : Date.now(); return ((endPoint - startTime) / 1000).toFixed(1); }; return (

Circle Sorting Game

Arrange the circles from smallest (left) to largest (right).

Number of Circles:

{gameState === 'in-progress' && ( )}

{gameState === 'in-progress' && (

)}

Time: {getElapsedTime()}s

{gameState === 'completed' && (

Score: {score}

)}

{gameState === 'not-started' && (

How to Play

Drag and drop the colored circles to arrange them from smallest to largest, going from left to right. The faster you complete the sorting, the higher your score will be!

Click the "Start Game" button to begin.

)} {gameState === 'completed' && (

Congratulations! 🎉

Good job - all shapes are in the right order by size!

Final Score: {score}

Time: {getElapsedTime()}s

)}

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