// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; ////////////////////////////////////////////////////////////// // 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); */ // Game constants and utility functions can go here // ================================================== // Main App Component with Three.js Scene // ================================================== const App = () => { const resetGame = () => { setPlayers([]); setCurrentName(''); setIsRegistering(true); setGameState('setup'); setPlayerAssignments([]); setTimeLeft(10); setCurrentPlayerIndex(0); setPlayerAnswers([]); setSelectedColor(null); }; const [players, setPlayers] = useState([]); const [currentName, setCurrentName] = useState(''); const [isRegistering, setIsRegistering] = useState(true); const [gameState, setGameState] = useState('setup'); // setup, memorize, countdown, recall const [playerAssignments, setPlayerAssignments] = useState([]); const [timeLeft, setTimeLeft] = useState(10); const [currentPlayerIndex, setCurrentPlayerIndex] = useState(0); const [playerAnswers, setPlayerAnswers] = useState([]); const mountRef = useRef(null); const handleAddPlayer = (e) => { e.preventDefault(); if (currentName.trim()) { setPlayers([...players, currentName.trim()]); setCurrentName(''); } }; const generateRandomColor = () => { const colors = ['#FF0000', '#FFA500', '#FFFF00', '#008000', '#0000FF', '#800080']; return colors[Math.floor(Math.random() * colors.length)]; }; const generateRandomNumber = () => { return Math.floor(Math.random() * 9) + 1; }; const handleStartGame = () => { if (players.length > 0) { setIsRegistering(false); const assignments = players.map(player => ({ name: player, color: generateRandomColor(), number: generateRandomNumber() })); setPlayerAssignments(assignments); setGameState('memorize'); setTimeLeft(120); } }; const [selectedColor, setSelectedColor] = useState(null); const [selectedNumber, setSelectedNumber] = useState(null); const handleColorSelect = (color) => { setSelectedColor(color); }; const handleNumberSelect = (number) => { setSelectedNumber(number); }; const handlePlayerRecall = () => { const currentAssignment = playerAssignments[currentPlayerIndex]; setPlayerAnswers(prev => [...prev, { name: currentAssignment.name, correct: selectedColor === currentAssignment.color && selectedNumber === currentAssignment.number }]); // Reset selections for next player setSelectedColor(null); setSelectedNumber(null); if (currentPlayerIndex < players.length - 1) { setCurrentPlayerIndex(prev => prev + 1); } else { setGameState('results'); } }; useEffect(() => { // Scene setup // Create and configure scene const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf0f0f0); // Create and configure camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5; // Create and configure renderer const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xf0f0f0, 1); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 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 to maintain cube visibility camera.position.z = 5; }; // Clean up existing canvas and append new one while (mountRef.current.firstChild) { mountRef.current.removeChild(mountRef.current.firstChild); } mountRef.current.appendChild(renderer.domElement); // Ensure canvas is visible renderer.domElement.style.display = 'block'; renderer.domElement.style.width = '100%'; renderer.domElement.style.height = '100%'; handleResize(); // Call once to set initial dimensions window.addEventListener('resize', handleResize); // Add lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); const pointLight = new THREE.PointLight(0xffffff, 1); pointLight.position.set(5, 5, 5); scene.add(ambientLight); scene.add(pointLight); camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); // Proper cleanup return () => { window.removeEventListener('resize', handleResize); // Dispose of Three.js objects scene.remove(ambientLight); scene.remove(pointLight); // Clean up renderer if (renderer) { renderer.dispose(); if (mountRef.current && renderer.domElement) { mountRef.current.removeChild(renderer.domElement); } } // Clear the scene while(scene.children.length > 0){ scene.remove(scene.children[0]); } }; }, []); return (

{isRegistering ? (

Memory Test

setCurrentName(e.target.value)} placeholder="Enter player name" style={{ padding: '10px', borderRadius: '5px', border: '1px solid #ccc', fontSize: '16px', }} /> {players.length > 0 && (

Players:

{players.map((player, index) => (

{player}

))}

)} {players.length > 0 && ( )}

) : (

{gameState === 'memorize' && (

Remember Your Color and Number!

Players: Take a good look at your color and number. In two minutes you will be asked to remember them!

{playerAssignments.map((assignment, index) => (

{assignment.name}

{assignment.number}

))}

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

Counting Down!

{`${Math.floor(timeLeft / 60)}:${(timeLeft % 60).toString().padStart(2, '0')}`}

Focus and remember your color and number...

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

{playerAssignments[currentPlayerIndex].name}'s Turn

{[ { color: '#FF0000', name: 'Red' }, { color: '#FFA500', name: 'Orange' }, { color: '#FFFF00', name: 'Yellow' }, { color: '#008000', name: 'Green' }, { color: '#0000FF', name: 'Blue' }, { color: '#800080', name: 'Purple' } ].map((colorOption) => (

{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((number) => ( ))}

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

Results

{playerAnswers.map((result, index) => (

{result.name}: {result.correct ? 'Correct!' : 'Incorrect'}

))}

)}

); }; // Try to get renderDiv first, fallback to root if not found const container = document.getElementById('renderDiv') || document.getElementById('root'); if (!container) { // Create a div if neither exists const div = document.createElement('div'); div.id = 'renderDiv'; document.body.appendChild(div); } const root = ReactDOM.createRoot(container || document.getElementById('renderDiv')); root.render();