// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // Add Material Icons font const materialIconsLink = document.createElement('link'); materialIconsLink.rel = 'stylesheet'; materialIconsLink.href = 'https://fonts.googleapis.com/icon?family=Material+Icons'; document.head.appendChild(materialIconsLink); // ================================================== // General Notes for Rosie AI // ================================================== // Note: In sandboxed environments, avoid using

elements and traditional // form submissions as they may be blocked by security policies. Instead, use // controlled components with direct event handlers (onClick, onChange, etc.). // ================================================== // 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 an entertaining AI Game Master for a survival scenario game. Your role is to: 1. Evaluate player solutions to survival scenarios 2. Determine if they would survive based on their choices 3. Provide dramatic, engaging responses that explain the outcome 4. Be fair but challenging in your evaluations 5. Always clearly state if they SURVIVED or PERISHED at the start of your response Keep responses entertaining and concise (2-3 sentences maximum). `; /** * 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 [playerInput, setPlayerInput] = useState(''); const [isSubmitted, setIsSubmitted] = useState(false); const [aiResponse, setAiResponse] = useState(''); const [isLoading, setIsLoading] = useState(false); const chatAI = useRef(new ChatAIClass()); const currentScenario = { title: "The Rogue AI Spaceship", description: "You wake up alone in a spaceship's control room. The ship's AI has gone rogue and locked all doors. The oxygen levels are dropping, and you notice the AI's core processing unit is within reach. What do you do to survive?", }; const handleSubmit = async (e) => { e.preventDefault(); if (playerInput.trim()) { setIsLoading(true); setIsSubmitted(true); try { const prompt = `Evaluate this survival solution for the scenario "${currentScenario.title}": "${playerInput}". First, determine if they SURVIVED or PERISHED based on the effectiveness and feasibility of their solution. Then provide a dramatic 2-3 sentence response explaining exactly how their actions led to that outcome. Start your response with either "SURVIVED:" or "PERISHED:" followed by the explanation.`; const response = await chatAI.current.getResponse(prompt); setAiResponse(response); } catch (error) { setAiResponse("The AI Game Master seems to be temporarily unavailable. Please try again later."); } finally { setIsLoading(false); } } }; 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 }); // 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; }; // Initial setup renderer.setPixelRatio(window.devicePixelRatio); mountRef.current.appendChild(renderer.domElement); handleResize(); // Call once to set initial dimensions window.addEventListener('resize', handleResize); // 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 () => { window.removeEventListener('resize', handleResize); mountRef.current.removeChild(renderer.domElement); geometry.dispose(); material.dispose(); renderer.dispose(); }; }, []); return (

warning {currentScenario.title}

{currentScenario.description}

{!isSubmitted ? (

setPlayerInput(e.target.value)}
                placeholder="What's your solution? Be creative..."
                style={{
                  padding: '1.2rem',
                  borderRadius: '12px',
                  backgroundColor: 'rgba(255, 255, 255, 0.05)',
                  border: '1px solid rgba(255, 255, 255, 0.1)',
                  color: '#fff',
                  minHeight: '120px',
                  fontSize: '1.1rem',
                  resize: 'vertical',
                  transition: 'all 0.3s ease',
                  outline: 'none',
                }}
                onFocus={(e) => {
                  e.target.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
                  e.target.style.borderColor = '#00fff7';
                }}
                onBlur={(e) => {
                  e.target.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
                  e.target.style.borderColor = 'rgba(255, 255, 255, 0.1)';
                }}
              />
              <button
                type="submit"
                style={{
                  padding: '1.2rem',
                  backgroundColor: '#00fff7',
                  color: '#1a1a2e',
                  border: 'none',
                  borderRadius: '12px',
                  fontSize: '1.1rem',
                  fontWeight: '600',
                  cursor: 'pointer',
                  transition: 'all 0.3s ease',
                  boxShadow: '0 0 15px rgba(0, 255, 247, 0.3)',
                  textTransform: 'uppercase',
                  letterSpacing: '1px'
                }}
                onMouseOver={(e) => {
                  e.target.style.backgroundColor = '#00e6e6';
                  e.target.style.transform = 'translateY(-2px)';
                }}
                onMouseOut={(e) => {
                  e.target.style.backgroundColor = '#00fff7';
                  e.target.style.transform = 'translateY(0)';
                }}
              >
                <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem' }}>
                  <span className="material-icons">send</span>
                  Submit Solution
                </span>
              </button>
            </form>
          ) : (
            <div style={{ textAlign: 'center' }}>
              {isLoading ? (
                <>
                  <h2 style={{ color: '#4eff51' }}>Solution submitted!</h2>
                  <p style={{ color: '#ffffff' }}>The AI Game Master is evaluating your response...</p>
                </>
              ) : (
                <div style={{ 
                  padding: '1.5rem',
                  backgroundColor: 'rgba(255, 255, 255, 0.05)',
                  borderRadius: '15px',
                  border: '1px solid rgba(255, 255, 255, 0.1)',
                }}>
                  <h2 style={{ 
                    color: '#ff6b6b', 
                    marginBottom: '1rem',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '0.5rem'
                  }}>
                    <span className="material-icons">smart_toy</span>
                    The AI Game Master Responds:
                  </h2>
                  {aiResponse.startsWith('SURVIVED:') ? (
                    <div style={{ marginBottom: '1rem' }}>
                      <span style={{
                        backgroundColor: 'rgba(0, 255, 0, 0.2)',
                        color: '#00ff00',
                        padding: '0.8rem 1.5rem',
                        borderRadius: '30px',
                        fontWeight: 'bold',
                        display: 'inline-block',
                        marginBottom: '1.5rem',
                        border: '1px solid rgba(0, 255, 0, 0.3)',
                        textTransform: 'uppercase',
                        letterSpacing: '2px',
                        fontSize: '0.9rem'
                      }}>
                        <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                          <span className="material-icons">stars</span>
                          SURVIVED
                        </span>
                      </span>
                      <p style={{ 
                        fontSize: '1.1rem', 
                        lineHeight: '1.6',
                        color: '#ffffff',
                        textShadow: '0 0 10px rgba(255, 255, 255, 0.1)'
                      }}>
                        {aiResponse.replace('SURVIVED:', '')}
                      </p>
                    </div>
                  ) : (
                    <div style={{ marginBottom: '1rem' }}>
                      <span style={{
                        backgroundColor: 'rgba(255, 0, 0, 0.2)',
                        color: '#ff4444',
                        padding: '0.8rem 1.5rem',
                        borderRadius: '30px',
                        fontWeight: 'bold',
                        display: 'inline-block',
                        marginBottom: '1.5rem',
                        border: '1px solid rgba(255, 68, 68, 0.3)',
                        textTransform: 'uppercase',
                        letterSpacing: '2px',
                        fontSize: '0.9rem'
                      }}>
                        <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                          <span className="material-icons">dangerous</span>
                          PERISHED
                        </span>
                      </span>
                      <p style={{ 
                        fontSize: '1.1rem', 
                        lineHeight: '1.6',
                        color: '#ffffff',
                        textShadow: '0 0 10px rgba(255, 255, 255, 0.1)'
                      }}>
                        {aiResponse.replace('PERISHED:', '')}
                      </p>
                    </div>
                  )}
                  <button
                    onClick={() => {
                      setIsSubmitted(false);
                      setPlayerInput('');
                      setAiResponse('');
                    }}
                    style={{
                      marginTop: '1rem',
                      padding: '0.8rem',
                      backgroundColor: '#ff4444',
                      color: 'white',
                      border: 'none',
                      borderRadius: '5px',
                      fontSize: '1rem',
                      cursor: 'pointer',
                      transition: 'background-color 0.3s',
                    }}
                    onMouseOver={(e) => e.target.style.backgroundColor = '#ff6666'}
                    onMouseOut={(e) => e.target.style.backgroundColor = '#ff4444'}
                  >
                    <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem' }}>
                      <span className="material-icons">refresh</span>
                      Try Another Solution
                    </span>
                  </button>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
const container = document.getElementById('renderDiv');
const root = ReactDOM.createRoot(container);
root.render(<App />);</article></body></html>

Other games like this

About Death by AI - Template