// 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('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 [cardData, setCardData] = useState(null); const [newCardData, setNewCardData] = useState(null); const [isLoading, setIsLoading] = useState(false); const [cardFact, setCardFact] = useState(''); const chatAI = useRef(new ChatAIClass()); const fetchNewCard = async () => { setIsLoading(true); try { const response = await fetch('https://deckofcardsapi.com/api/deck/new/draw/?count=1'); const data = await response.json(); const newCard = data.cards[0]; // Load the image first await new Promise((resolve, reject) => { const img = new Image(); img.onload = resolve; img.onerror = reject; img.src = newCard.image; }); // Get the fact await getCardFact(newCard); // Only update the card data after everything is loaded setCardData(newCard); } catch (error) { console.error('Error fetching card:', error); } setIsLoading(false); }; const getCardFact = async (card) => { if (!card) return ''; try { const prompt = `Give me a single interesting and concise historical, mystical, or cultural fact about the ${card.value} of ${card.suit}. Keep it to one or two sentences and make it engaging. Focus on fortune telling, playing card history, or cultural symbolism. Don't start with phrases like "Did you know" or "Interesting fact".`; const fact = await chatAI.current.getResponse(prompt); setCardFact(fact); } catch (error) { console.error('Error getting AI fact:', error); setCardFact('This card holds ancient secrets waiting to be revealed...'); } }; useEffect(() => { fetchNewCard(); }, []); 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 }); // Add lighting const ambientLight = new THREE.AmbientLight(0xffffff, 1.0); // Increased intensity scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); // Increased intensity directionalLight.position.set(2, 2, 5); // Adjusted position for better illumination scene.add(directionalLight); // Add point lights for better card illumination const pointLight1 = new THREE.PointLight(0xffffff, 1.0); pointLight1.position.set(-3, 3, 5); scene.add(pointLight1); const pointLight2 = new THREE.PointLight(0xffffff, 1.0); pointLight2.position.set(3, -3, 5); scene.add(pointLight2); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Create card group first const cardGroup = new THREE.Group(); cardGroup.position.x = 0; // Ensure x position is centered scene.add(cardGroup); // Set initial size const updateSize = () => { const width = window.innerWidth; const height = window.innerHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer renderer.setSize(width, height); // Adjust card position based on screen size if (width < 768) { // Mobile devices camera.position.z = 9; // Move camera back further for smaller screens if (cardGroup) { cardGroup.scale.set(0.8, 0.8, 0.8); // Scale down card for mobile cardGroup.position.y = 1.5; // Move card up on mobile cardGroup.position.x = 0; // Ensure x position is centered } } else { camera.position.z = 7; // Move camera back further for desktop if (cardGroup) { cardGroup.scale.set(1, 1, 1); // Original scale for desktop cardGroup.position.y = 2; // Move card up on desktop cardGroup.position.x = 0; // Ensure x position is centered } } }; // Add window resize listener window.addEventListener('resize', updateSize); updateSize(); // Initial size setup // Create cube // Create card geometry with thickness const cardWidth = 3; const cardHeight = 4; const cardThickness = 0.05; // Card components will be added to the existing cardGroup // Create geometries for all card faces const frontBackGeometry = new THREE.PlaneGeometry(cardWidth, cardHeight); const sideGeometry = new THREE.PlaneGeometry(cardThickness, cardHeight); const topBottomGeometry = new THREE.PlaneGeometry(cardWidth, cardThickness); const textureLoader = new THREE.TextureLoader(); // Create materials const cardFrontMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.FrontSide, metalness: 0.1, roughness: 0.2, emissive: 0x111111, // Slight emission to ensure visibility emissiveIntensity: 0.1 }); // Create back material with card back texture const cardBackMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.FrontSide, map: textureLoader.load('https://deckofcardsapi.com/static/img/back.png'), metalness: 0.1, roughness: 0.2, emissive: 0x111111, emissiveIntensity: 0.1 }); const edgeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.FrontSide, metalness: 0.1, roughness: 0.3, emissive: 0x111111, emissiveIntensity: 0.05 }); // Create card faces const frontFace = new THREE.Mesh(frontBackGeometry, cardFrontMaterial); frontFace.position.z = cardThickness / 2; const backFace = new THREE.Mesh(frontBackGeometry, cardBackMaterial); backFace.position.z = -cardThickness / 2; backFace.rotation.y = Math.PI; // Create edges const leftEdge = new THREE.Mesh(sideGeometry, edgeMaterial); leftEdge.position.x = -cardWidth / 2; leftEdge.rotation.y = Math.PI / 2; const rightEdge = new THREE.Mesh(sideGeometry, edgeMaterial); rightEdge.position.x = cardWidth / 2; rightEdge.rotation.y = -Math.PI / 2; const topEdge = new THREE.Mesh(topBottomGeometry, edgeMaterial); topEdge.position.y = cardHeight / 2; topEdge.rotation.x = -Math.PI / 2; const bottomEdge = new THREE.Mesh(topBottomGeometry, edgeMaterial); bottomEdge.position.y = -cardHeight / 2; bottomEdge.rotation.x = Math.PI / 2; // Add all components to card group cardGroup.add(frontFace, backFace, leftEdge, rightEdge, topEdge, bottomEdge); scene.add(cardGroup); // Update texture when cardData changes if (cardData?.image) { // Load texture immediately since we know the image is ready textureLoader.load(cardData.image, (texture) => { texture.encoding = THREE.sRGBEncoding; texture.flipY = true; // Flip the texture correctly cardFrontMaterial.map = texture; cardFrontMaterial.needsUpdate = true; }); } camera.position.z = 7; // Animation const animate = () => { requestAnimationFrame(animate); // Smooth card rotation with slight wobble if (cardGroup) { cardGroup.rotation.y += 0.005; // Adjust the wobble to be less pronounced cardGroup.rotation.z = Math.sin(Date.now() * 0.001) * 0.05; // Add slight tilt for better 3D effect cardGroup.rotation.x = Math.sin(Date.now() * 0.0005) * 0.05; } renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', updateSize); mountRef.current?.removeChild(renderer.domElement); frontBackGeometry.dispose(); sideGeometry.dispose(); topBottomGeometry.dispose(); cardFrontMaterial.dispose(); cardBackMaterial.dispose(); edgeMaterial.dispose(); renderer.dispose(); }; }, [cardData]); // Add cardData as a dependency return (

{cardData ? `${cardData.value} of ${cardData.suit}` : 'Loading...'}

{cardFact || 'Loading fact...'}

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