// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // Supabase configuration const SUPABASE_URL = 'https://dlyouagjiafjyzhwfdnl.supabase.co'; const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRseW91YWdqaWFmanl6aHdmZG5sIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mzg4ODM5MDUsImV4cCI6MjA1NDQ1OTkwNX0.71P3mtT-SG11oFizdHS1Mv1brcB7vM8QrvdXY_smSAw'; // Initialize Supabase client async function initSupabase() { const { createClient } = await import('https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm'); // Define a custom fetch wrapper that adds a custom header. const customFetch = async (input, init = {}) => { // Merge any existing headers with a custom header. init.headers = { ...init.headers, 'x-custom-user-agent': 'StoryWeaver/1.0' // you can choose any value here }; return fetch(input, init); }; // Create the Supabase client using the custom fetch return createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { fetch: customFetch }); } // ================================================== // 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 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 [isDarkMode, setIsDarkMode] = useState(false); const [loadPin, setLoadPin] = useState(''); const [isLoadingStory, setIsLoadingStory] = useState(false); const [loadError, setLoadError] = useState(null); const [supabase, setSupabase] = useState(null); const [storyPin, setStoryPin] = useState(null); const [isSharing, setIsSharing] = useState(false); const [shareError, setShareError] = useState(null); // Initialize Supabase client useEffect(() => { const setupSupabase = async () => { try { const client = await initSupabase(); setSupabase(client); } catch (error) { console.error('Failed to initialize Supabase:', error); } }; setupSupabase(); }, []); const saveStory = async (finalStoryContent) => { if (!supabase) return null; setIsSharing(true); setShareError(null); try { const { data, error } = await supabase .from('stories') .insert({ theme, content: contributions.map(c => c.text).join(' '), final_story: finalStoryContent, status: 'completed' }) .select('pin') .single(); if (error) throw error; setStoryPin(data.pin); return data.pin; } catch (error) { console.error('Error saving story:', error); setShareError('Failed to save story. Please try again.'); return null; } finally { setIsSharing(false); } }; const loadStoryByPin = async (pin) => { if (!supabase) return null; try { const { data, error } = await supabase .from('stories') .select('*') .eq('pin', pin) .eq('status', 'completed') .single(); if (error) throw error; return data; } catch (error) { console.error('Error loading story:', error); return null; } }; const [theme, setTheme] = useState(''); const [storyStarted, setStoryStarted] = useState(false); const [story, setStory] = useState(''); const [storyOptions, setStoryOptions] = useState([]); const [contributions, setContributions] = useState([]); const [isLoadingOptions, setIsLoadingOptions] = useState(false); const [pendingOptions, setPendingOptions] = useState([]); const [customInput, setCustomInput] = useState(''); const [isFinishing, setIsFinishing] = useState(false); const [finalStory, setFinalStory] = useState(''); const [themes, setThemes] = useState([ "A Journey to Mars", "The Secret of the Lost City", "Life in Ancient Egypt" ]); const [customTheme, setCustomTheme] = useState(''); const [isGeneratingThemes, setIsGeneratingThemes] = useState(false); const generateNewThemes = useCallback(async () => { setIsGeneratingThemes(true); try { const chatAI = new ChatAIClass(); const prompt = `Generate 3 creative and engaging story themes. Rules: - Each theme should be 3-7 words - Make themes diverse and imaginative - Themes should appeal to various interests - Format as array of strings Example format: ["Theme One Here", "Theme Two Here", "Theme Three Here"]`; const response = await chatAI.getResponse(prompt); try { const newThemes = JSON.parse(response); if (Array.isArray(newThemes) && newThemes.length === 3) { setThemes(newThemes); } } catch (e) { console.error('Failed to parse themes:', e); } } catch (error) { console.error('Error generating themes:', error); } finally { setIsGeneratingThemes(false); } }, []); const handleThemeSelect = useCallback(async (selectedTheme) => { setTheme(selectedTheme); setStoryStarted(true); setIsLoadingOptions(true); try { const chatAI = new ChatAIClass(); const prompt = `Generate 3 unique and engaging opening sentences for a story with the theme: "${selectedTheme}" Rules: - Each opening should be distinct and creative - Keep each opening between 15-25 words - Set different tones (e.g., mysterious, exciting, thoughtful) - Make them engaging and hook the reader - Format as array of strings Example format: ["First opening sentence here.", "Second opening sentence here.", "Third opening sentence here."]`; const response = await chatAI.getResponse(prompt); let openings; try { openings = JSON.parse(response); } catch (e) { console.error('Failed to parse openings:', e); openings = [ `In a world where ${selectedTheme} was just the beginning, an extraordinary journey was about to unfold.`, `Nobody expected ${selectedTheme} to change everything, but that's exactly what happened on that fateful day.`, `The story of ${selectedTheme} began like many others, yet something felt distinctly different this time.` ]; } setStoryStarted(true); setStoryOptions(openings); } catch (error) { console.error('Error weaving story openings:', error); const fallbackOpenings = [ `In a world where ${selectedTheme} was just the beginning, an extraordinary journey was about to unfold.`, `Nobody expected ${selectedTheme} to change everything, but that's exactly what happened on that fateful day.`, `The story of ${selectedTheme} began like many others, yet something felt distinctly different this time.` ]; setStoryStarted(true); setStoryOptions(fallbackOpenings); } finally { setIsLoadingOptions(false); } }, []); const generateStoryOptions = useCallback(async () => { if (!theme) return; // Ensure theme is available try { const chatAI = new ChatAIClass(); const currentStory = contributions.length > 0 ? contributions.map(c => c.text).join(' ') : `Theme: ${theme}`; const prompt = `Based on this story with theme "${theme}" and current content: "${currentStory}" Generate exactly 3 possible story continuations that align with the theme. Rules: - Each continuation must be a single clear sentence - Make each option distinct and interesting - Keep each option between 10-20 words - Use natural, clear language - Format the response as a simple array of 3 strings Example format: ["First story option here.", "Second story option here.", "Third story option here."]`; const response = await chatAI.getResponse(prompt); // Clean up the response and attempt to parse it const cleanResponse = response.replace(/[\r\n]/g, ' ').trim(); let options; try { // Try to parse as JSON first options = JSON.parse(cleanResponse); } catch (e) { // If JSON parsing fails, try to extract options using regex const matches = cleanResponse.match(/"([^"]+)"/g) || []; options = matches .map(match => match.replace(/"/g, '').trim()) .filter(option => option.length > 0) .slice(0, 3); // If we still don't have valid options, create fallback options if (!options.length) { options = [ "The adventurers discovered something unexpected in their path.", "A mysterious figure appeared from the shadows.", "The team faced a challenging decision ahead." ]; } } // Ensure we always have exactly 3 options while (options.length < 3) { options.push("The story continued in an unexpected way..."); } setPendingOptions(options.slice(0, 3)); setStoryOptions(options.slice(0, 3)); } catch (error) { console.error('Error weaving story options:', error); setStoryOptions([ "The story took an unexpected turn...", "Suddenly, something unusual happened...", "The adventure continued in a new direction..." ]); } finally { setIsLoadingOptions(false); } }, [contributions]); const finalizeStory = useCallback(async () => { setIsFinishing(true); setShareError(null); try { const chatAI = new ChatAIClass(); const currentStory = contributions.map(c => c.text).join(' '); // First pass: Generate the initial segment (around 500 characters) const initialPrompt = `Here is a story with theme "${theme}" that needs to be started: "${currentStory}" Create the beginning of a polished story (around 500 characters). Required elements: 1. Set up the story's atmosphere and tone 2. Introduce key characters or situation 3. Begin developing the theme of "${theme}" 4. Use rich but concise language 5. Create an engaging opening Format with proper spacing between paragraphs. Return only the story segment without any explanations.`; let finalizedStory = await chatAI.getResponse(initialPrompt); finalizedStory = finalizedStory.trim(); // Second pass: Generate the middle segment (around 1000 characters) const middlePrompt = `Continue this story with theme "${theme}". Current content: "${finalizedStory}" Create the middle portion of the story (around 1000 characters). Required elements: 1. Build upon the established opening 2. Develop the plot and characters further 3. Create dramatic tension 4. Include meaningful story progression 5. Maintain consistent style with the opening Format with proper spacing between paragraphs. Return only the new story segment without any explanations.`; const middleSegment = await chatAI.getResponse(middlePrompt); finalizedStory += '\n\n' + middleSegment.trim(); // Final pass: Generate the ending (around 500 characters) const endingPrompt = `Complete this story with theme "${theme}". Current content: "${finalizedStory}" Create a satisfying ending (around 500 characters). Required elements: 1. Resolve the main plot points 2. Provide emotional satisfaction 3. Tie back to the theme 4. Create a sense of completion 5. Match the style of previous segments Format with proper spacing between paragraphs. Return only the ending segment without any explanations.`; const endingSegment = await chatAI.getResponse(endingPrompt); finalizedStory += '\n\n' + endingSegment.trim(); // Clean up the final story finalizedStory = finalizedStory .replace(/^\s*[-_*]\s*/gm, '') // Remove any markdown-style list markers .replace(/\n{3,}/g, '\n\n') // Replace excessive newlines with double newlines .replace(/\s+$/gm, '') // Remove trailing whitespace from each line .trim(); // Save the completed story and get the pin let pin = null; if (supabase) { pin = await saveStory(finalizedStory); } setFinalStory(finalizedStory); // Trigger star explosion effect after story is finalized if (window.triggerStarExplosion) { window.triggerStarExplosion(); } if (pin) { setStoryPin(pin); } } catch (error) { console.error('Error finalizing story:', error); // Create a basic conclusion if AI fails const currentStory = contributions.map(c => c.text).join(' '); setFinalStory(`${currentStory} And so, the story came to its natural conclusion, leaving its mark on all those involved.`); } finally { setIsFinishing(false); } }, [contributions]); const handleOptionSelect = useCallback(async (selectedOption) => { setIsLoadingOptions(true); setStoryOptions([]); // Clear current options immediately // Update contributions first const newContribution = { text: selectedOption, id: Date.now() }; setContributions(prev => [...prev, newContribution]); // Generate new options immediately after updating contributions try { const chatAI = new ChatAIClass(); const currentStory = [...contributions, newContribution].map(c => c.text).join(' '); const prompt = `Based on this story with theme "${theme}" and current content: "${currentStory}" Generate exactly 3 possible story continuations that align with the theme. Rules: - Each continuation must be a single clear sentence - Make each option distinct and interesting - Keep each option between 10-20 words - Use natural, clear language - Format the response as a simple array of 3 strings Example format: ["First story option here.", "Second story option here.", "Third story option here."]`; const response = await chatAI.getResponse(prompt); // Clean up the response and attempt to parse it const cleanResponse = response.replace(/[\r\n]/g, ' ').trim(); let options; try { // Try to parse as JSON first options = JSON.parse(cleanResponse); } catch (e) { // If JSON parsing fails, try to extract options using regex const matches = cleanResponse.match(/"([^"]+)"/g) || []; options = matches .map(match => match.replace(/"/g, '').trim()) .filter(option => option.length > 0) .slice(0, 3); // If we still don't have valid options, create fallback options if (!options.length) { options = [ "The adventurers discovered something unexpected in their path.", "A mysterious figure appeared from the shadows.", "The team faced a challenging decision ahead." ]; } } // Ensure we always have exactly 3 options while (options.length < 3) { options.push("The story continued in an unexpected way..."); } setStoryOptions(options.slice(0, 3)); } catch (error) { console.error('Failed to generate new options:', error); setStoryOptions([ "The story took an unexpected turn...", "Suddenly, something unusual happened...", "The adventure continued in a new direction..." ]); } finally { setIsLoadingOptions(false); } }, [generateStoryOptions]); // Remove the useEffect as we now handle initial story generation in handleThemeSelect useEffect(() => { // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); // Create a round particle texture that will be shared by all particle systems const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 32; canvas.height = 32; const gradient = ctx.createRadialGradient(16, 16, 0, 16, 16, 16); gradient.addColorStop(0, 'rgba(255,255,255,1)'); gradient.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 32, 32); const texture = new THREE.CanvasTexture(canvas); // Create explosion stars group const explosionGroup = new THREE.Group(); scene.add(explosionGroup); // Function to create time travel particles const createExplosionParticles = () => { const particleCount = 2000; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const velocities = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3); const sizes = new Float32Array(particleCount); const timeOffsets = new Float32Array(particleCount); for (let i = 0; i < particleCount * 3; i += 3) { const particleIndex = i / 3; // Create a tunnel-like formation const radius = Math.random() * 5; const length = (Math.random() - 0.5) * 20; const angle = Math.random() * Math.PI * 2; positions[i] = Math.cos(angle) * radius; positions[i + 1] = Math.sin(angle) * radius; positions[i + 2] = length; // Spiral motion velocities const speed = 3 + Math.random() * 5; velocities[i] = Math.cos(angle) * speed * 0.5; velocities[i + 1] = Math.sin(angle) * speed * 0.5; velocities[i + 2] = (length > 0 ? -1 : 1) * speed * 2; // Time travel color scheme (blue to purple to white) const colorPhase = Math.random(); if (colorPhase < 0.2) { // Cyan to Blue colors[i] = 0.1 + Math.random() * 0.2; // R (low) colors[i + 1] = 0.7 + Math.random() * 0.3; // G (high) colors[i + 2] = 1.0; // B (full) } else if (colorPhase < 0.4) { // Purple to Pink colors[i] = 0.8 + Math.random() * 0.2; // R (high) colors[i + 1] = 0.2 + Math.random() * 0.2; // G (low) colors[i + 2] = 0.8 + Math.random() * 0.2; // B (high) } else if (colorPhase < 0.6) { // Yellow to Orange colors[i] = 1.0; // R (full) colors[i + 1] = 0.7 + Math.random() * 0.3; // G (high) colors[i + 2] = 0.1 + Math.random() * 0.2; // B (low) } else if (colorPhase < 0.8) { // Green to Teal colors[i] = 0.1 + Math.random() * 0.2; // R (low) colors[i + 1] = 0.8 + Math.random() * 0.2; // G (high) colors[i + 2] = 0.4 + Math.random() * 0.3; // B (medium) } else { // White with slight color tint colors[i] = 0.9 + Math.random() * 0.1; // R (very bright) colors[i + 1] = 0.9 + Math.random() * 0.1; // G (very bright) colors[i + 2] = 0.9 + Math.random() * 0.1; // B (very bright) } // Varying particle sizes for depth effect sizes[particleIndex] = 0.5 + Math.random() * 1.5; // Random time offsets for animation timeOffsets[particleIndex] = Math.random() * Math.PI * 2; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('velocity', new THREE.BufferAttribute(velocities, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); geometry.setAttribute('timeOffset', new THREE.BufferAttribute(timeOffsets, 1)); // Create a round particle texture const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 32; canvas.height = 32; const gradient = ctx.createRadialGradient(16, 16, 0, 16, 16, 16); gradient.addColorStop(0, 'rgba(255,255,255,1)'); gradient.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 32, 32); const texture = new THREE.CanvasTexture(canvas); const material = new THREE.PointsMaterial({ size: 1.5, transparent: true, opacity: 1, vertexColors: true, blending: THREE.AdditiveBlending, sizeAttenuation: true, depthWrite: false, fog: true, map: texture, alphaMap: texture, alphaTest: 0.001 }); const particles = new THREE.Points(geometry, material); explosionGroup.add(particles); return particles; }; // Function to trigger explosion animation const triggerExplosion = () => { const particles = createExplosionParticles(); const positions = particles.geometry.attributes.position.array; const velocities = particles.geometry.attributes.velocity.array; let frame = 0; const animateExplosion = () => { frame++; const time = frame * 0.016; // Convert frames to approximate seconds const positions = particles.geometry.attributes.position.array; const velocities = particles.geometry.attributes.velocity.array; const timeOffsets = particles.geometry.attributes.timeOffset.array; const sizes = particles.geometry.attributes.size.array; for (let i = 0; i < positions.length; i += 3) { const particleIndex = i / 3; const timeOffset = timeOffsets[particleIndex]; // Spiral motion const spiralFactor = Math.sin(time + timeOffset) * 0.3; positions[i] += velocities[i] * 0.08 + spiralFactor; positions[i + 1] += velocities[i + 1] * 0.08 + spiralFactor; positions[i + 2] += velocities[i + 2] * 0.08; // Pulsating size effect sizes[particleIndex] = (1 + Math.sin(time * 3 + timeOffset) * 0.5) * (2 + Math.random()); } particles.geometry.attributes.position.needsUpdate = true; particles.geometry.attributes.size.needsUpdate = true; // Fade out with a longer duration // Slower fade out with longer duration particles.material.opacity = Math.max(0, 1 - (frame / 480) * 0.8); if (frame < 480) { requestAnimationFrame(animateExplosion); } else { explosionGroup.remove(particles); particles.geometry.dispose(); particles.material.dispose(); } }; animateExplosion(); }; // Create stars // Create multiple star groups with different colors const createStarField = (color, count, size, opacityRange) => { const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(count * 3); const opacities = new Float32Array(count); const scales = new Float32Array(count); const twinkleOffsets = new Float32Array(count); const colors = new Float32Array(count * 3); const colorVariations = { white: new THREE.Color(0xFFFFFF), blue: new THREE.Color(0x4299e1), yellow: new THREE.Color(0xecc94b), orange: new THREE.Color(0xed8936), red: new THREE.Color(0xf56565) }; for (let i = 0; i < count * 3; i += 3) { const particleIndex = i / 3; // Position with depth variation positions[i] = (Math.random() - 0.5) * 2000; // x positions[i + 1] = (Math.random() - 0.5) * 2000; // y positions[i + 2] = (Math.random() - 0.5) * 3000; // z increased depth // Random color variation let starColor; const colorRoll = Math.random(); if (colorRoll < 0.6) { starColor = colorVariations.white; } else if (colorRoll < 0.75) { starColor = colorVariations.blue; } else if (colorRoll < 0.85) { starColor = colorVariations.yellow; } else if (colorRoll < 0.95) { starColor = colorVariations.orange; } else { starColor = colorVariations.red; } colors[i] = starColor.r; colors[i + 1] = starColor.g; colors[i + 2] = starColor.b; // Size and opacity variations scales[particleIndex] = (0.5 + Math.random() * 1.5) * size; opacities[particleIndex] = Math.random() * (opacityRange[1] - opacityRange[0]) + opacityRange[0]; // Twinkling effect offset twinkleOffsets[particleIndex] = Math.random() * Math.PI * 2; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('opacity', new THREE.BufferAttribute(opacities, 1)); geometry.setAttribute('scale', new THREE.BufferAttribute(scales, 1)); geometry.setAttribute('twinkleOffset', new THREE.BufferAttribute(twinkleOffsets, 1)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); // Reuse the same round particle texture for all star fields const material = new THREE.PointsMaterial({ color: color, size: size, transparent: true, opacity: 1, sizeAttenuation: true, blending: THREE.AdditiveBlending, map: texture, alphaMap: texture, alphaTest: 0.001 }); return new THREE.Points(geometry, material); }; // Create different colored star fields with increased counts const whiteStars = createStarField(0xFFFFFF, 2000, 2, [0.5, 0.8]); const blueStars = createStarField(0x4299e1, 800, 3, [0.3, 0.6]); const purpleStars = createStarField(0x9f7aea, 600, 2.5, [0.4, 0.7]); const yellowStars = createStarField(0xecc94b, 400, 2.8, [0.3, 0.5]); scene.add(whiteStars, blueStars, purpleStars, yellowStars); // Add extra white stars in background const starsGeometry = new THREE.BufferGeometry(); const starsMaterial = new THREE.PointsMaterial({ color: 0xFFFFFF, size: 1, transparent: true, opacity: 0.3, sizeAttenuation: true, blending: THREE.AdditiveBlending, map: texture, alphaMap: texture, alphaTest: 0.001 }); // Generate random star positions const starsCount = 2000; const starsPositions = new Float32Array(starsCount * 3); for (let i = 0; i < starsCount * 3; i += 3) { starsPositions[i] = (Math.random() - 0.5) * 2000; // x starsPositions[i + 1] = (Math.random() - 0.5) * 2000; // y starsPositions[i + 2] = (Math.random() - 0.5) * 2000; // z } starsGeometry.setAttribute('position', new THREE.BufferAttribute(starsPositions, 3)); const stars = new THREE.Points(starsGeometry, starsMaterial); scene.add(stars); // 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); camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); const time = Date.now() * 0.001; // Update star fields with twinkling effect [whiteStars, blueStars, purpleStars, yellowStars].forEach(starField => { const opacities = starField.geometry.attributes.opacity; const scales = starField.geometry.attributes.scale; const twinkleOffsets = starField.geometry.attributes.twinkleOffset; for (let i = 0; i < opacities.count; i++) { // Twinkling effect const twinkle = Math.sin(time * 2 + twinkleOffsets.array[i]) * 0.3 + 0.7; opacities.array[i] *= twinkle; scales.array[i] = starField.geometry.attributes.scale.array[i] * (0.8 + twinkle * 0.4); } opacities.needsUpdate = true; scales.needsUpdate = true; // Rotate and move stars starField.rotation.x += 0.0001; starField.rotation.y += 0.0002; starField.position.z += 0.5; // Create parallax effect based on z-position const zPos = starField.position.z; starField.material.opacity = Math.min(1, Math.max(0, (2000 - Math.abs(zPos)) / 2000)); }); // Reset positions when too close if (whiteStars.position.z > 1000) whiteStars.position.z = -1000; if (blueStars.position.z > 1000) blueStars.position.z = -1000; if (purpleStars.position.z > 1000) purpleStars.position.z = -1000; if (yellowStars.position.z > 1000) yellowStars.position.z = -1000; renderer.render(scene, camera); }; animate(); // Expose the triggerExplosion function to the window window.triggerStarExplosion = triggerExplosion; // Cleanup return () => { window.triggerStarExplosion = undefined; window.removeEventListener('resize', handleResize); if (mountRef.current && renderer) { try { if (mountRef.current.contains(renderer.domElement)) { mountRef.current.removeChild(renderer.domElement); } // Dispose of shared resources texture.dispose(); renderer.dispose(); } catch (error) { console.error('Cleanup error:', error); } } }; }, []); return (

{!storyStarted ? ( <>

Story Weaver

Create your own unique adventure by choosing a theme below

setCustomTheme(e.target.value)} placeholder="Enter your own theme..." style={{ flex: 1, padding: '1rem 1.25rem', fontSize: '1rem', backgroundColor: '#2d3748', border: '1px solid #4a5568', borderRadius: '16px', color: '#e2e8f0', outline: 'none', transition: 'all 0.3s ease', maxWidth: '500px', width: '100%', boxSizing: 'border-box', '&::placeholder': { color: '#718096' }, '@media (max-width: 640px)': { maxWidth: '100%', fontSize: '1rem', padding: '1rem', }, }} onKeyPress={(e) => { if (e.key === 'Enter' && customTheme.trim()) { handleThemeSelect(customTheme); setCustomTheme(''); } }} />

or choose a theme

{themes.map((themeOption) => ( ))}

Have a story PIN?

{ setLoadPin(e.target.value.toUpperCase()); setLoadError(null); }} placeholder="Enter PIN" maxLength={6} style={{ flex: '0 0 auto', padding: '0.5rem', fontSize: '0.8rem', width: '90px', maxWidth: '90px', height: '1.5rem', backgroundColor: '#2d3748', border: '1px solid rgba(74, 85, 104, 0.6)', borderRadius: '16px', outline: 'none', transition: 'all 0.3s ease', color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.25em', textAlign: 'center', boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.1)', '@media (max-width: 480px)': { width: '120px', maxWidth: '120px', fontSize: '0.9rem', padding: '0.625rem 0.875rem', margin: '0 auto' } }} />

{loadError && (

{loadError}

)}

) : (

{theme}

{!finalStory && (

{contributions.map((contribution) => (

{contribution.text}

))}

)}

{!finalStory && ( )} {!finalStory && (

{contributions.length === 0 ? 'Choose how to begin:' : 'Choose what happens next:'}

)} {finalStory ? (

Your Completed Story

{finalStory.split('\n\n').map((paragraph, index) => (

{paragraph}

))}

{contributions.length > 0 && (

Your Story Journey

{contributions.map((contribution, index) => (

Story Step {index + 1} {contribution.text}

))}

)} {storyPin && (

Share your story with this pin:

{storyPin}

Others can view your story by entering this pin

)} {shareError && (

{shareError}

)}

) : isLoadingOptions || storyOptions.length === 0 ? (

Weaving story options...

) : (

setCustomInput(e.target.value)}
                      placeholder="Write your own..."
                      rows={3}
                      style={{
                        flex: 1,
                        padding: 'clamp(0.75rem, 1.25vw, 1rem)',
                        fontSize: 'clamp(0.75rem, 1.5vw, 0.85rem)',
                        '@media (max-width: 480px)': {
                          width: '100%',
                          minHeight: '60px',
                        },
                        minHeight: '60px',
                        resize: 'vertical',
                        backgroundColor: '#2d3748',
                        border: '1px solid #4a5568',
                        borderRadius: '16px',
                        outline: 'none',
                        transition: 'all 0.3s ease',
                        color: '#e2e8f0',
                        '&::placeholder': {
                          color: '#718096'
                        },
                      }}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter' && e.ctrlKey && customInput.trim()) {
                          e.preventDefault();
                          handleOptionSelect(customInput);
                          setCustomInput('');
                        }
                      }}
                    />
                    <button
                      onClick={() => {
                        if (customInput.trim()) {
                          handleOptionSelect(customInput);
                          setCustomInput('');
                        }
                      }}
                      disabled={!customInput.trim()}
                      style={{
                        padding: '0.75rem 1.25rem',
                        fontSize: '0.95rem',
                        width: 'auto',
                        background: 'linear-gradient(135deg, #00f2fe 0%, #4facfe 100%)',
                        border: '1px solid rgba(79, 172, 254, 0.4)',
                        borderRadius: '16px',
                        cursor: !customInput.trim() ? 'not-allowed' : 'pointer',
                        transition: 'all 0.3s ease',
                        color: '#ffffff',
                        fontWeight: '600',
                        opacity: !customInput.trim() ? 0.5 : 1,
                        whiteSpace: 'nowrap',
                        boxShadow: `
                          0 0 10px rgba(79, 172, 254, 0.5),
                          0 0 20px rgba(79, 172, 254, 0.3),
                          0 0 30px rgba(79, 172, 254, 0.2),
                          inset 0 0 15px rgba(255, 255, 255, 0.2)
                        `,
                        '&:hover': {
                          background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
                          transform: 'translateY(-1px)',
                          boxShadow: `
                            0 0 15px rgba(79, 172, 254, 0.7),
                            0 0 30px rgba(79, 172, 254, 0.5),
                            0 0 45px rgba(79, 172, 254, 0.3),
                            inset 0 0 20px rgba(255, 255, 255, 0.4)
                          `
                        },
                        '&:active': {
                          transform: 'translateY(1px)',
                          boxShadow: `
                            0 0 5px rgba(79, 172, 254, 0.4),
                            0 0 10px rgba(79, 172, 254, 0.2),
                            0 0 15px rgba(79, 172, 254, 0.1),
                            inset 0 0 10px rgba(255, 255, 255, 0.1)
                          `
                        }
                      }}
                    >
                      Add
                    </button>
                  </div>
                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    borderTop: '2px solid #e2e8f0',
                    paddingTop: '1.5rem',
                    marginBottom: '0.5rem'
                  }}>
                    <p style={{
                      fontSize: '1.2rem',
                      color: '#e2e8f0',
                      marginBottom: '1.5rem',
                      textShadow: '0 2px 4px rgba(0,0,0,0.3)',
                      fontWeight: '600',
                      letterSpacing: '0.02em'
                    }}>
                      Or choose from these suggestions:
                    </p>
                    <button
                      onClick={async () => {
                        setIsLoadingOptions(true);
                        setStoryOptions([]);
                        try {
                          const chatAI = new ChatAIClass();
                          const currentStory = contributions.map(c => c.text).join(' ');
                          
                          const prompt = `Based on this story with theme "${theme}" and current content: "${currentStory}"
                          Generate exactly 3 possible story continuations that align with the theme.
                          Rules:
                          - Each continuation must be a single clear sentence
                          - Make each option distinct and interesting
                          - Keep each option between 10-20 words
                          - Use natural, clear language
                          - Format the response as a simple array of 3 strings
                          
                          Example format:
                          ["First story option here.", "Second story option here.", "Third story option here."]`;
                          
                          const response = await chatAI.getResponse(prompt);
                          
                          // Clean up the response and attempt to parse it
                          const cleanResponse = response.replace(/[\r\n]/g, ' ').trim();
                          let options;
                          
                          try {
                            options = JSON.parse(cleanResponse);
                          } catch (e) {
                            const matches = cleanResponse.match(/"([^"]+)"/g) || [];
                            options = matches
                              .map(match => match.replace(/"/g, '').trim())
                              .filter(option => option.length > 0)
                              .slice(0, 3);
                          }
                          
                          // Ensure we have exactly 3 options
                          while (options.length < 3) {
                            options.push("The story continued in an unexpected way...");
                          }
                          
                          setStoryOptions(options.slice(0, 3));
                        } catch (error) {
                          console.error('Failed to regenerate options:', error);
                          setStoryOptions([
                            "A surprising twist changed everything.",
                            "An unexpected event caught everyone off guard.",
                            "The situation took an interesting turn."
                          ]);
                        } finally {
                          setIsLoadingOptions(false);
                        }
                      }}
                      disabled={isLoadingOptions}
                      style={{
                        padding: '0.75rem 1rem',
                        fontSize: '0.9rem',
                        background: 'linear-gradient(135deg, #4A5568 0%, #2D3748 100%)',
                        border: '1px solid rgba(160, 174, 192, 0.3)',
                        borderRadius: '16px',
                        cursor: isLoadingOptions ? 'not-allowed' : 'pointer',
                        transition: 'all 0.2s ease',
                        color: '#e2e8f0',
                        fontWeight: '500',
                        opacity: isLoadingOptions ? 0.5 : 1,
                        display: 'flex',
                        alignItems: 'center',
                        gap: '0.5rem',
                        boxShadow: `
                          0 0 5px rgba(113, 128, 150, 0.3),
                          0 0 10px rgba(113, 128, 150, 0.2),
                          inset 0 0 8px rgba(255, 255, 255, 0.1)
                        `,
                        '&:hover': {
                          background: 'linear-gradient(135deg, #2D3748 0%, #1A202C 100%)',
                          transform: isLoadingOptions ? 'none' : 'translateY(-1px)',
                          boxShadow: `
                            0 0 8px rgba(113, 128, 150, 0.4),
                            0 0 15px rgba(113, 128, 150, 0.3),
                            inset 0 0 10px rgba(255, 255, 255, 0.2)
                          `
                        },
                        '&:active': {
                          transform: 'translateY(1px)',
                          boxShadow: `
                            0 0 3px rgba(113, 128, 150, 0.3),
                            0 0 8px rgba(113, 128, 150, 0.2),
                            inset 0 0 5px rgba(255, 255, 255, 0.1)
                          `
                        }
                      }}
                    >
                      ↻ More
                    </button>
                  </div>
                  {storyOptions.map((option, index) => (
                    <button
                      key={index}
                      onClick={() => handleOptionSelect(option)}
                      style={{
                        padding: '1rem 1.5rem',
                        fontSize: '1rem',
                        width: '100%',
                        background: 'linear-gradient(135deg, #2D3748 0%, #1A202C 100%)',
                        border: '1px solid rgba(160, 174, 192, 0.3)',
                        borderRadius: '16px',
                        cursor: 'pointer',
                        transition: 'all 0.2s ease',
                        textAlign: 'left',
                        color: '#e2e8f0',
                        fontWeight: '500',
                        boxShadow: `
                          0 0 5px rgba(113, 128, 150, 0.3),
                          0 0 10px rgba(113, 128, 150, 0.2),
                          inset 0 0 8px rgba(255, 255, 255, 0.1)
                        `,
                        '&:hover': {
                          background: 'linear-gradient(135deg, #4A5568 0%, #2D3748 100%)',
                          transform: 'translateY(-1px)',
                          boxShadow: `
                            0 0 8px rgba(113, 128, 150, 0.4),
                            0 0 15px rgba(113, 128, 150, 0.3),
                            inset 0 0 10px rgba(255, 255, 255, 0.2)
                          `
                        },
                        '&:active': {
                          transform: 'translateY(1px)',
                          boxShadow: `
                            0 0 3px rgba(113, 128, 150, 0.3),
                            0 0 8px rgba(113, 128, 150, 0.2),
                            inset 0 0 5px rgba(255, 255, 255, 0.1)
                          `
                        }
                      }}
                    >
                      {option}
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};
const container = document.getElementById('renderDiv');
const root = ReactDOM.createRoot(container);
root.render(<App />);</article></body></html>