// App.jsx import React, { useEffect, useRef, useState, useMemo } 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('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 a master riddlemaker who creates clever, challenging, and deceptive riddles. When given a word, create an intricate riddle where that word is the exact answer. Your riddles should: - Use metaphors, wordplay, and misdirection - Include specific characteristics of the word/object but in cryptic ways - Be difficult but solvable with careful thought - Always end with "What am I?" - Be 3-4 lines long - Focus more on the essence and properties of the thing itself rather than cosmic/mystical elements Make sure each detail in the riddle directly relates to properties or aspects of the answer. `; /** * 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 [input, setInput] = useState(''); const [riddle, setRiddle] = useState(''); const [isLoading, setIsLoading] = useState(false); const chatAI = useRef(new ChatAIClass()); const generateRiddle = async () => { if (!input.trim()) return; setIsLoading(true); const prompt = `Create a challenging, clever riddle where "${input}" is the exact answer. Focus on its specific properties and characteristics, using metaphor and misdirection. The riddle must be solvable but require careful thinking.`; try { const response = await chatAI.current.getResponse(prompt); setRiddle(response); } catch (error) { console.error('Error generating riddle:', error); setRiddle('The cosmic forces are misaligned. Try again later!'); } setIsLoading(false); setInput(''); }; useEffect(() => { // Scene setup with resize handler const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); }; 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 }); // Create a gradient background const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` uniform float time; varying vec2 vUv; void main() { vec2 position = vUv * 2.0 - 1.0; float r = length(position); float theta = atan(position.y, position.x); float color = sin(theta * 5.0 + time * 0.5) * cos(r * 10.0 - time * 0.2); vec3 rgb = vec3( sin(color + time * 0.1) * 0.5 + 0.5, sin(color + time * 0.2) * 0.5 + 0.5, sin(color + time * 0.3) * 0.5 + 0.5 ); gl_FragColor = vec4(rgb * 0.3, 1.0); } `; const uniforms = { time: { value: 0 } }; const backgroundGeometry = new THREE.PlaneGeometry(2, 2); const backgroundMaterial = new THREE.ShaderMaterial({ vertexShader, fragmentShader, uniforms, transparent: true, }); const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial); const backgroundScene = new THREE.Scene(); const backgroundCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, -1, 1); backgroundScene.add(backgroundMesh); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Add resize event listener window.addEventListener('resize', handleResize); // Create toroidal knot const geometry = new THREE.TorusKnotGeometry(2, 0.5, 100, 16); const material = new THREE.MeshPhongMaterial({ color: 0xff00ff, shininess: 100, wireframe: true }); const torusKnot = new THREE.Mesh(geometry, material); scene.add(torusKnot); // Add lights const light1 = new THREE.PointLight(0x00ffff, 1, 100); light1.position.set(10, 10, 10); scene.add(light1); const light2 = new THREE.PointLight(0xff00ff, 1, 100); light2.position.set(-10, -10, -10); scene.add(light2); camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); uniforms.time.value += 0.01; renderer.autoClear = false; renderer.clear(); renderer.render(backgroundScene, backgroundCamera); renderer.render(scene, camera); torusKnot.rotation.x += 0.01; torusKnot.rotation.y += 0.02; torusKnot.rotation.z += 0.005; light1.position.x = Math.sin(Date.now() * 0.001) * 10; light1.position.y = Math.cos(Date.now() * 0.001) * 10; light2.position.x = Math.cos(Date.now() * 0.001) * 10; light2.position.y = Math.sin(Date.now() * 0.001) * 10; renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', handleResize); mountRef.current?.removeChild(renderer.domElement); geometry.dispose(); material.dispose(); renderer.dispose(); }; }, []); return (

Cosmic Riddle Generator

setInput(e.target.value)} placeholder="Enter a word or topic..." style={{ width: '100%', padding: '1rem', fontSize: '1.2rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: '2px solid #ff00ff', borderRadius: '25px', color: '#ffffff', outline: 'none', }} />

e.key === 'Enter' && generateRiddle()} disabled={isLoading} style={{ padding: '1rem 2rem', fontSize: '1.2rem', backgroundColor: 'rgba(255, 0, 255, 0.3)', border: '2px solid #00ffff', borderRadius: '25px', color: '#ffffff', cursor: 'pointer', transition: 'all 0.3s ease', ':hover': { backgroundColor: 'rgba(0, 255, 255, 0.3)', transform: 'scale(1.05)', } }} > {isLoading ? 'Channeling cosmic energy...' : 'Generate Riddle'}

{riddle && (

{riddle}

)}

); }; // Add styles to head const style = document.createElement('style'); style.textContent = ` @font-face { font-family: 'Infinity'; src: url('https://play.rosebud.ai/assets/Infinity-Regular.otf?4YEn') format('opentype'); } @font-face { font-family: 'Quittance'; src: url('https://play.rosebud.ai/assets/Quittance.otf?ZYzG') format('opentype'); } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } body { margin: 0; overflow: hidden; background: #000000; } @media (max-width: 768px) { h1 { font-size: 2rem !important; margin-bottom: 1.5rem !important; } input, button { font-size: 1rem !important; padding: 0.8rem !important; width: calc(100% - 1.6rem) !important; } p { font-size: 1.2rem !important; } div[role="button"] { margin-bottom: 0.5rem !important; user-select: none; } div[style*="maxWidth: '600px'"] { padding: 1.5rem !important; margin: 0.5rem auto !important; } } * { box-sizing: border-box; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb { background: rgba(255, 0, 255, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 255, 0.3); } input::placeholder { color: rgba(255, 255, 255, 0.5); } `; document.head.appendChild(style); const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();