// App.jsx import React, { useEffect, useRef, useState, useCallback } 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 // ================================================== // Color palette generation functions const generateBaseColor = () => { const h = Math.random(); const s = 0.5 + Math.random() * 0.5; // 0.5-1.0 const l = 0.4 + Math.random() * 0.2; // 0.4-0.6 return [h, s, l]; }; const hslToHex = (h, s, l) => { const a = s * Math.min(l, 1 - l); const f = n => { const k = (n + h * 12) % 12; const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); return Math.round(255 * color).toString(16).padStart(2, '0'); }; return `#${f(0)}${f(8)}${f(4)}`; }; const generatePalette = () => { const [h, s, l] = generateBaseColor(); return [ hslToHex(h, s, l), hslToHex((h + 0.1) % 1, s, l), hslToHex((h + 0.2) % 1, s * 0.9, l), hslToHex((h + 0.3) % 1, s * 0.8, l * 1.1), hslToHex((h + 0.4) % 1, s * 0.7, l * 1.2), ]; }; const ColorBlock = ({ color, index, totalColors }) => { const [copied, setCopied] = useState(false); const [isHovered, setIsHovered] = useState(false); const [isClicked, setIsClicked] = useState(false); const copyToClipboard = async () => { try { await navigator.clipboard.writeText(color); setCopied(true); setIsClicked(true); setTimeout(() => setCopied(false), 1500); setTimeout(() => setIsClicked(false), 300); } catch (err) { console.error('Failed to copy:', err); } }; return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} style={{ backgroundColor: color, height: `${100 / totalColors}%`, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', position: 'relative', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', transform: isHovered ? 'scale(1.08)' : 'scale(1)', }} > {isHovered && (

{copied ? 'Copied!' : color}

)}

); }; const getContrastColor = (hexcolor) => { const r = parseInt(hexcolor.slice(1, 3), 16); const g = parseInt(hexcolor.slice(3, 5), 16); const b = parseInt(hexcolor.slice(5, 7), 16); const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000; return (yiq >= 128) ? '#000000' : '#ffffff'; }; const App = () => { const [colors, setColors] = useState(generatePalette()); const [isHoveringBottom, setIsHoveringBottom] = useState(false); const [isHoveringButton, setIsHoveringButton] = useState(false); const mountRef = useRef(null); const randomizePalette = useCallback(() => { setColors(generatePalette()); }, []); useEffect(() => { if (!mountRef.current) return; // 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(); }; }, []); return (

{colors.map((color, index) => ( { if (index === colors.length - 1) { setIsHoveringBottom(true); } }} onMouseLeave={() => { if (index === colors.length - 1) { setIsHoveringBottom(false); } }} /> ))}

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

Other games like this

About Color Palette Finder