// App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // Add Poppins font from Google Fonts const link = document.createElement('link'); link.href = 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'; link.rel = 'stylesheet'; document.head.appendChild(link); // Add global styles const style = document.createElement('style'); style.textContent = ` * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { font-family: 'Poppins', sans-serif; } `; document.head.appendChild(style); // ================================================== // 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 ProductCard = ({ product, onAddToCart }) => { return (

{product.category}
{product.name}
${product.price.toFixed(2)}

); }; const App = () => { const mountRef = useRef(null); const cartRef = useRef(null); const [products, setProducts] = useState([]); const [cart, setCart] = useState({}); const [isCartVisible, setIsCartVisible] = useState(true); const [showOrderConfirmed, setShowOrderConfirmed] = useState(false); const handleConfirmOrder = () => { setShowOrderConfirmed(true); }; const handleStartNewOrder = () => { setShowOrderConfirmed(false); setCart({}); }; const removeFromCart = (productId) => { setCart(prevCart => { const newCart = { ...prevCart }; delete newCart[productId]; return newCart; }); }; const [isMobile, setIsMobile] = useState(window.innerWidth <= 768); const scrollToCart = () => { cartRef.current?.scrollIntoView({ behavior: 'smooth' }); }; useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { setIsCartVisible(entry.isIntersecting); }, { threshold: 0.1, } ); if (cartRef.current) { observer.observe(cartRef.current); } return () => observer.disconnect(); }, []); useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth <= 768); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); useEffect(() => { fetch('https://play.rosebud.ai/assets/product_list_data_v2.json?woU5') .then(response => response.json()) .then(data => { // Add unique IDs to each product based on their names const productsWithIds = data.map(product => ({ ...product, id: product.name.toLowerCase().replace(/\s+/g, '-') })); setProducts(productsWithIds); }) .catch(error => console.error('Error loading products:', error)); }, []); 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 }); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Create cube const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, wireframe: true }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); // Cleanup return () => { mountRef.current.removeChild(renderer.domElement); geometry.dispose(); material.dispose(); renderer.dispose(); }; }, []); const calculateItemTotal = (product, quantity) => { return product ? product.price * quantity : 0; }; const calculateCartTotal = () => { return Object.entries(cart).reduce((total, [productId, item]) => { const product = products.find(p => p.id === productId); return total + calculateItemTotal(product, item.quantity); }, 0); }; return (

Desserts

{products.map((product) => ( { setCart(prevCart => ({ ...prevCart, [product.id]: { name: product.name, quantity: (prevCart[product.id]?.quantity || 0) + 1 } })); }} /> ))}

Shopping Cart

{Object.keys(cart).length === 0 ? (

Your cart is empty

) : ( <> {Object.entries(cart).map(([productId, item]) => { const product = products.find(p => p.id === productId); if (!product) return null; return (

{product.name}

${product.price.toFixed(2)} × {item.quantity}

${calculateItemTotal(product, item.quantity).toFixed(2)}

); })}

Total: ${calculateCartTotal().toFixed(2)}

)}

{showOrderConfirmed && (

Order Confirmed!

{Object.entries(cart).map(([productId, item]) => { const product = products.find(p => p.id === productId); if (!product) return null; return (

{product.name} × {item.quantity} ${calculateItemTotal(product, item.quantity).toFixed(2)}

); })}

Total: ${calculateCartTotal().toFixed(2)}

)} {Object.keys(cart).length > 0 && !isCartVisible && !showOrderConfirmed && (

)}

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