import React, { useState, useRef, useEffect, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; const LOCAL_DATA = [ { "title": "Snowglobe", "thumbnail": "https://m.media-amazon.com/images/M/MV5BZDk3OGNiZWUtNjdiOS00ZmI3LWE4YzctNDQzODE4ODQ2NzM1L2ltYWdlXkEyXkFqcGdeQXVyNTM3MDMyMDQ@._V1_UY209_CR8,0,140,209_AL_.jpg", "year": 2007, "category": "Movie", "rating": "TV-PG", "isBookmarked": false, "isTrending": false }, ] // MoviesService Class Definition class MoviesService { constructor() { this.settings = APP_SETTINGS; this.localData = LOCAL_DATA; } async getMoviesFromAPI() { try { console.log('Fetching movie data from API...'); const apiUrl = `${this.settings.api.baseUrl}${this.settings.api.endpoints.movies}`; const response = await fetch(apiUrl); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const rawMovies = await response.json(); // Map API response to the required movie structure return rawMovies.map(movie => ({ title: movie.title, thumbnail: movie.thumbnail || '', year: movie.year, category: movie.category, rating: movie.rating, isBookmarked: movie.is_bookmarked, isTrending: movie.is_trending })); } catch (error) { console.error('Error fetching movies from API:', { message: error.message, stack: error.stack, type: error.constructor.name }); throw error; // Re-throw to be handled by caller } } async fetchFromAPI() { return this.getMoviesFromAPI(); } async fetchFromJSON() { console.log('Fetching movie data from JSON file...'); const response = await fetch(this.settings.api.rosebudDataUrl); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); return response.json(); } logResponseStructure(data) { console.log('API Response Structure:', { dataType: typeof data, isArray: Array.isArray(data), length: Array.isArray(data) ? data.length : 'N/A', sampleEntry: Array.isArray(data) && data.length > 0 ? data[0] : 'No entries', keys: Array.isArray(data) && data.length > 0 ? Object.keys(data[0]) : 'No keys' }); console.log('Full API Response:', data); } async loadMoviesData() { console.log('Starting loadMoviesData function...'); try { const url = this.settings.controlVariables.useApiData ? this.settings.api.remoteUrl : this.settings.api.localUrl; console.log(`Fetching movie data from: ${url}`); const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); this.logResponseStructure(data); return data; } catch (error) { console.error('Error loading movies data:', { error: error.message, stack: error.stack, type: error.constructor.name }); console.log('Falling back to hardcoded data'); return this.localData; } } loadBookmarks() { try { const bookmarks = localStorage.getItem(this.settings.storage.bookmarksKey); return bookmarks ? JSON.parse(bookmarks) : {}; } catch (error) { console.error('Error loading bookmarks from storage:', error); return {}; } } saveBookmarks(bookmarks) { try { localStorage.setItem(this.settings.storage.bookmarksKey, JSON.stringify(bookmarks)); } catch (error) { console.error('Error saving bookmarks to storage:', error); } } } // App Settings const APP_SETTINGS = { controlVariables: { useApiData: false, // Toggle between API and local data sources useTrendingSection: false, // Toggle trending section visibility }, storage: { bookmarksKey: 'movieBookmarks' }, api: { remoteUrl: 'https://movies-fullstack-8fb485ae1b64.herokuapp.com/api/movies', localUrl: 'https://play.rosebud.ai/assets/app_data.json?1GOv' } }; // Create MoviesService instance const moviesService = new MoviesService(); // Styles const styles = ` .header { width: 100%; box-sizing: border-box; } .search-section { width: 100%; box-sizing: border-box; padding: 1rem 2rem; } .search-container { display: flex; align-items: center; width: 100%; box-sizing: border-box; background: rgba(94, 42, 42, 0.3); border-radius: 8px; padding: 0.75rem 1rem; } .search-icon { color: #ffffff; margin-right: 0.5rem; opacity: 0.7; } .search-input { background: none; border: none; color: #ffffff; font-size: 1rem; padding: 0.5rem; width: 100%; outline: none; } .search-input::placeholder { color: rgba(255,255,255,0.5); } /* Trending Section Styles */ .trending-section { padding: 1.5rem; position: relative; } .trending-header { color: #ffffff; font-size: 1.5rem; margin: 0 0 1.5rem 0; } .trending-container { overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding-bottom: 1rem; margin-bottom: 1rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ &::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ } } .trending-nav-button { position: absolute; top: 55%; transform: translateY(-50%); background: rgba(94, 42, 42, 0.9); border: 2px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; z-index: 10; transition: all 0.3s ease; } .trending-nav-button:hover { background: rgba(94, 42, 42, 1); border-color: rgba(255, 255, 255, 0.4); color: white; } .trending-nav-button.prev { left: 0.5rem; } .trending-nav-button.next { right: 0.5rem; } .trending-nav-button:disabled { opacity: 0; cursor: default; pointer-events: none; } .trending-movie-card { display: inline-block; width: 300px; margin-right: 1rem; margin-left: 1rem; white-space: normal; vertical-align: top; background-color: #3B0D0D; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; position: relative; } .trending-movie-card:hover { transform: translateY(-5px); } .trending-thumbnail { width: 100%; aspect-ratio: 0.7/1; object-fit: contain; display: block; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .trending-details { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(94, 42, 42, 0.95), rgba(94, 42, 42, 0.7) 80%, rgba(94, 42, 42, 0)); backdrop-filter: blur(2px); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .trending-info-row { display: flex; gap: 0.5rem; color: rgba(255,255,255,0.5); font-size: 0.875rem; margin-bottom: 0.5rem; } .trending-title { color: #ffffff; font-size: 1.25rem; font-weight: bold; margin: 0; } .home-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 1rem; padding-right: 0.75rem; scroll-behavior: smooth; } /* Custom Scrollbar Styles */ .home-content::-webkit-scrollbar { width: 8px; } .home-content::-webkit-scrollbar-track { background: rgba(47, 22, 22, 0.8); border-radius: 4px; } .home-content::-webkit-scrollbar-thumb { background: rgba(127, 82, 82, 0.8); border-radius: 4px; transition: background-color 0.3s ease; } .home-content::-webkit-scrollbar-thumb:hover { background: rgba(170, 115, 115, 0.9); } /* Firefox Scrollbar Styles */ .home-content { scrollbar-width: thin; scrollbar-color: rgba(127, 82, 82, 0.8) rgba(47, 22, 22, 0.8); } .root-container { width: 100vw; height: 100vh; background-color: #1A0505; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; color: #000000; position: relative; overflow: hidden; } .background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-image: url('https://play.rosebud.ai/assets/istockphoto-1449108324-612x612.jpg?H62R'); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.75; filter: blur(1px); } .content-container { width: 420px; position: relative; z-index: 2; height: 85vh; background-color: #2D0A0A; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; } .navbar { width: 100%; box-sizing: border-box; padding: 1rem; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); } .nav-button { background: none; border: none; color: #ffffff; font-size: 1.5rem; cursor: pointer; padding: 0.5rem 1rem; border-radius: 5px; transition: background-color 0.3s ease; margin: 0 0.5rem; } .nav-button:hover { background-color: rgba(255,255,255,0.1); } .nav-button.active { background-color: rgba(255,255,255,0.2); font-weight: bold; } .movies-section { padding: 1.5rem; } .movies-header { color: #ffffff; font-size: 1.5rem; margin: 0 0 1.5rem 0; } .movies-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .movie-card { background-color: #3B0D0D; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; position: relative; } .bookmark-button { position: absolute; top: 0.75rem; right: 0.75rem; width: 32px; height: 32px; border-radius: 50%; background: rgba(16, 20, 30, 0.5); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: white; transition: color 0.3s ease, transform 0.2s ease; padding-bottom: 2px; } .bookmark-button:hover { transform: scale(1.1); } .bookmark-button.active { color: #FFD700; } .movie-card:hover { transform: translateY(-5px); } .movie-thumbnail { width: 100%; aspect-ratio: 0.7/1; object-fit: contain; display: block; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .movie-details { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(94, 42, 42, 0.95), rgba(94, 42, 42, 0.7) 80%, rgba(94, 42, 42, 0)); backdrop-filter: blur(2px); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .movie-info-row { display: flex; gap: 0.5rem; color: rgba(255,255,255,0.5); font-size: 0.875rem; margin-bottom: 0.5rem; } .movie-title { color: #ffffff; font-size: 1.25rem; font-weight: bold; margin: 0; } /* Snow Animation */ .snow-container { position: absolute; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; } .snowflake { position: absolute; width: 4px; height: 4px; background: white; border-radius: 50%; opacity: 0.8; animation-name: snowfall; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes snowfall { 0% { transform: translateY(-100%) translateX(0); opacity: 0.8; } 50% { transform: translateY(100vh) translateX(20px); opacity: 0.6; } 100% { transform: translateY(200vh) translateX(0); opacity: 0.4; } } `; // Insert styles into document const styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); // ================================================== // 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. // ////////////////////////////////////////////////////////////// // 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); */ // Movie Class Definition class MovieClass { constructor(movieData) { this.title = movieData.title; this.thumbnail = movieData.thumbnail || ''; this.year = movieData.year; this.category = movieData.category; this.rating = movieData.rating; this.isBookmarked = movieData.isBookmarked; this.isTrending = movieData.isTrending; } // Method to toggle bookmark status toggleBookmark() { this.isBookmarked = !this.isBookmarked; return this.isBookmarked; } // Method to get appropriate thumbnail based on trending status getThumbnail() { return this.thumbnail; } // Method to get formatted display info getDisplayInfo() { return { title: this.title, year: this.year, category: this.category, rating: this.rating, isBookmarked: this.isBookmarked, isTrending: this.isTrending }; } } 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 Snow = () => { const [snowflakes, setSnowflakes] = useState([]); const [nextId, setNextId] = useState(0); useEffect(() => { // Function to create a single snowflake const createSnowflake = () => ({ id: nextId, left: `${Math.random() * 100}%`, animationDuration: `${Math.random() * 8 + 12}s`, // Between 12-20s opacity: Math.random() * 0.4 + 0.4, // Between 0.4-0.8 size: `${Math.random() * 3 + 2}px` // Between 2-5px }); // Set up interval for spawning snowflakes const spawnInterval = setInterval(() => { setNextId(prev => prev + 1); // Increment by one setSnowflakes(prev => { // Remove snowflakes that are likely done animating (older than 20s) const currentTime = Date.now(); const filteredFlakes = prev.filter(flake => currentTime - flake.created < 20000 ); // Add new snowflakes const newFlakes = [ { ...createSnowflake(), id: nextId, created: Date.now() }, ]; return [...filteredFlakes, ...newFlakes]; }); }, 100); // Spawn two snowflakes every 200ms // Clean up interval on unmount return () => clearInterval(spawnInterval); }, [nextId]); return (

{snowflakes.map(flake => (

))}

); }; const Background = () => ( <>

); const SearchBar = ({ onSearch, currentPage, searchInput, setSearchInput }) => { const handleInputChange = (e) => { const newValue = e.target.value; setSearchInput(newValue); onSearch(newValue); }; return (

🔍

); }; const Navbar = ({ onReset, currentPage, onPageChange }) => ( ); const MovieCard = ({ movie, handleBookmarkToggle }) => { const handleBookmarkClick = (e) => { e.preventDefault(); handleBookmarkToggle(movie); }; return (

{movie.year} • {movie.category} • {movie.rating}

{movie.title}

); }; const TrendingMovieCard = ({ movie, handleBookmarkToggle }) => { const handleBookmarkClick = (e) => { e.preventDefault(); handleBookmarkToggle(movie); }; return (

{movie.year} • {movie.category} • {movie.rating}

{movie.title}

); }; const TrendingSection = ({ movies, handleBookmarkToggle }) => { const containerRef = useRef(null); const [currentIndex, setCurrentIndex] = useState(0); const seen = new Set(); const trendingMovies = movies.filter(movie => { if (movie.isTrending && movie.category === 'Movie') { if (seen.has(movie.title)) { return false; } seen.add(movie.title); return true; } return false; }); const [visibleCount, setVisibleCount] = useState(1); useEffect(() => { const updateVisibleCount = () => { if (containerRef.current) { const containerWidth = containerRef.current.clientWidth; const cardElement = containerRef.current.children[0]; if (cardElement) { const cardStyle = window.getComputedStyle(cardElement); const cardWidth = cardElement.offsetWidth + parseInt(cardStyle.marginLeft) + parseInt(cardStyle.marginRight); setVisibleCount(Math.floor(containerWidth / cardWidth)); } } }; updateVisibleCount(); window.addEventListener('resize', updateVisibleCount); return () => window.removeEventListener('resize', updateVisibleCount); }, []); const scrollTo = (direction) => { if (containerRef.current) { const container = containerRef.current; const cards = container.children; if (cards.length === 0) return; const cardElement = cards[0]; const cardStyle = window.getComputedStyle(cardElement); const cardWidth = cardElement.offsetWidth + parseInt(cardStyle.marginLeft) + parseInt(cardStyle.marginRight); let newIndex; if (direction === 'next') { newIndex = Math.min(currentIndex + 1, trendingMovies.length - visibleCount); } else { newIndex = Math.max(currentIndex - 1, 0); } container.scrollTo({ left: newIndex * cardWidth, behavior: 'smooth' }); setCurrentIndex(newIndex); } }; const canScrollPrev = currentIndex > 0; const canScrollNext = currentIndex < trendingMovies.length - visibleCount; return (

{ if (containerRef.current) { const cardElement = containerRef.current.children[0]; if (cardElement) { const cardStyle = window.getComputedStyle(cardElement); const cardWidth = cardElement.offsetWidth + parseInt(cardStyle.marginLeft) + parseInt(cardStyle.marginRight); const newIndex = Math.round(e.target.scrollLeft / cardWidth); setCurrentIndex(newIndex); } } }} > {trendingMovies.map((movie, index) => ( ))}

); }; const MoviesGrid = ({ movies, handleBookmarkToggle }) => (

{movies.map((movie) => ( ))}

); const MoviesHeader = ({ title }) => (

{title}

); const MoviesSection = ({ movies, handleBookmarkToggle, showHeader = true }) => (

{showHeader && } { const seen = new Set(); return movies.filter(movie => { if (movie.category === 'Movie' && !movie.isTrending) { if (seen.has(movie.title)) { return false; } seen.add(movie.title); return true; } return false; }); })()} handleBookmarkToggle={handleBookmarkToggle} />

); const Header = ({ onSearch, onReset, currentPage, onPageChange, searchInput, setSearchInput }) => { return (

{ onReset(); setSearchInput(''); }} currentPage={currentPage} onPageChange={(page) => { onPageChange(page); setSearchInput(''); onSearch(''); }} />

); }; const ContentContainer = ({ movies, handleBookmarkToggle }) => { const [searchResults, setSearchResults] = useState(null); const [currentPage, setCurrentPage] = useState('home'); const [searchInput, setSearchInput] = useState(''); const handleSearch = (searchText) => { const trimmedText = searchText.trim(); if (!trimmedText) { setSearchResults(null); return; } const seen = new Set(); const filteredMovies = movies.filter(movie => { if (movie.title.toLowerCase().includes(trimmedText.toLowerCase()) && (currentPage !== 'favorites' || movie.isBookmarked)) { if (seen.has(movie.title)) { return false; } seen.add(movie.title); return true; } return false; }); setSearchResults({ text: trimmedText, movies: filteredMovies }); }; return (

setSearchResults(null)} onSearch={handleSearch} currentPage={currentPage} onPageChange={setCurrentPage} searchInput={searchInput} setSearchInput={setSearchInput} /> {searchResults ? (

) : currentPage === 'favorites' ? ( { const seen = new Set(); return movies.filter(movie => { if (movie.isBookmarked) { if (seen.has(movie.title)) { return false; } seen.add(movie.title); return true; } return false; }); })()} handleBookmarkToggle={handleBookmarkToggle} /> ) : ( )}

); }; class HomeContent extends React.Component { render() { const { movies, handleBookmarkToggle } = this.props; return (

{APP_SETTINGS.controlVariables.useTrendingSection && ( )}

); } } class FavoritesContent extends React.Component { render() { const { movies, handleBookmarkToggle, searchResults } = this.props; return (

{searchResults && }

); } } // Initialize movie instances const initializeMovies = async () => { const moviesData = await moviesService.loadMoviesData(); const savedBookmarks = moviesService.loadBookmarks(); return moviesData.map(movieData => { // Check if this movie was bookmarked const movieInstance = new MovieClass(movieData); if (savedBookmarks[movieData.title]) { movieInstance.isBookmarked = true; } return movieInstance; }); }; const App = () => { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); const handleBookmarkToggle = (movieToToggle) => { const newBookmarkState = movieToToggle.toggleBookmark(); // Update local storage with new bookmark state const currentBookmarks = moviesService.loadBookmarks(); if (newBookmarkState) { currentBookmarks[movieToToggle.title] = true; } else { delete currentBookmarks[movieToToggle.title]; } moviesService.saveBookmarks(currentBookmarks); setMovies(prevMovies => [...prevMovies]); // Trigger re-render with same instances }; useEffect(() => { const loadMovies = async () => { const initializedMovies = await initializeMovies(); setMovies(initializedMovies); setIsLoading(false); }; loadMovies(); }, [setMovies]); if (isLoading) { return (

); } return (

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