// App.jsx import React, { useState, useEffect, useRef } from 'react'; import ReactDOM from 'react-dom/client'; class Comment { constructor(id, content, createdAt, userId, parentId = null) { this.id = id; this.content = content; this.createdAt = createdAt; this.userId = userId; this.parentId = parentId; } static fromJSON(json) { return new Comment( json.id, json.content, json.createdAt, json.user.id, json.parentId ); } toJSON() { return { id: this.id, content: this.content, userId: this.userId, createdAt: this.createdAt, parentId: this.parentId }; } getUser() { // Get user directly from USERS object by ID return USERS[this.userId] || null; } } class User { constructor(id, name, image) { this.id = id; this.name = name; this.image = image; } isCurrentUser() { return this.id === CURRENT_USER.id; } getAvatarAlt() { return `${this.name}'s avatar`; } static findById(userId) { return USERS[userId] || null; } } // Global users store let USERS = {}; let CURRENT_USER = null; // Initialize application state const init = async () => { console.log('🚀 Initializing application...'); try { // Check if we should clear stored user if (APP_SETTINGS.controlVariables.clearStoredUser) { console.log('🧹 Clearing stored user as requested by clearStoredUser control'); localStorage.removeItem('userId'); } // First fetch all users const usersData = await usersService.fetchUsers(); console.log('👥 Fetched users:', Object.keys(usersData).length); USERS = usersData; // Check localStorage for stored userId const storedUserId = localStorage.getItem('userId'); console.log('🔍 Checking stored userId:', storedUserId); if (storedUserId && USERS[storedUserId]) { // Valid user found CURRENT_USER = USERS[storedUserId]; console.log('✅ Restored CURRENT_USER:', CURRENT_USER.name); return VIEW_STATES.COMMENTS; } else { // No valid user found console.log('❌ No valid user found'); localStorage.removeItem('userId'); return VIEW_STATES.USER_FORM; } } catch (error) { console.error('❌ Initialization error:', error); localStorage.removeItem('userId'); return VIEW_STATES.USER_FORM; } }; // View States const VIEW_STATES = { COMMENTS: 'comments', USER_FORM: 'user_form', LOADING: 'loading' }; // Convert API data to Comment objects const formatTimestamp = (timestamp) => { if (!timestamp) return 'Just now'; const date = new Date(timestamp); const now = new Date(); const diffInSeconds = Math.floor((now - date) / 1000); // Return "Just now" for very recent or future timestamps if (diffInSeconds < 0 || diffInSeconds < 60) { return 'Just now'; } if (diffInSeconds < 60) { return 'Just now'; } else if (diffInSeconds < 3600) { const minutes = Math.floor(diffInSeconds / 60); return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`; } else if (diffInSeconds < 86400) { const hours = Math.floor(diffInSeconds / 3600); return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`; } else if (diffInSeconds < 604800) { const days = Math.floor(diffInSeconds / 86400); return `${days} ${days === 1 ? 'day' : 'days'} ago`; } else if (diffInSeconds < 2419200) { const weeks = Math.floor(diffInSeconds / 604800); return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`; } else { const months = Math.floor(diffInSeconds / 2419200); return `${months} ${months === 1 ? 'month' : 'months'} ago`; } }; const createCommentFromAPI = (data) => { return new Comment( data.id, data.content, formatTimestamp(data.created_at), data.user_id, data.parent_id ); }; // Styles const styles = ` .form-input.error { border-color: #ed6368; background-color: #fff0f0; } .error-message { color: #ed6368; font-size: 0.875rem; margin-top: 0.5rem; font-weight: 500; } /* User Form Styles */ .user-form-container { padding: 2rem; background-color: #ffffff; border-radius: 10px; width: 100%; height: 100%; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; } .user-form-title { color: #334253; font-size: 1.5rem; font-weight: 500; margin-bottom: 1.5rem; text-align: center; } .form-group { margin-bottom: 1.5rem; } .form-label { display: block; color: #334253; font-weight: 500; margin-bottom: 0.5rem; } .form-input { width: 100%; padding: 0.75rem; border: 1px solid #eaecf1; border-radius: 8px; font-size: 1rem; color: #67727e; background-color: #f5f6fa; box-sizing: border-box; } .form-input:focus { outline: none; border-color: #5457b6; background-color: #ffffff; } .submit-button { width: 100%; padding: 0.75rem; background-color: #5457b6; color: #ffffff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; } .submit-button:hover { background-color: #4447a6; } .submit-button:disabled { background-color: #67727e; cursor: not-allowed; } /* Comment Styles */ .comment-edit-textarea { width: 100%; min-height: 96px; padding: 0.75rem; border: 1px solid #eaecf1; border-radius: 8px; resize: vertical; font-family: inherit; font-size: 1rem; line-height: 1.5; color: #67727e; background-color: #f5f6fa; margin-bottom: 1rem; box-sizing: border-box; } .comment-edit-textarea:focus { outline: none; border-color: #5457b6; background-color: #ffffff; } .edit-button { background-color: #5457b6; color: #ffffff; border: none; border-radius: 4px; padding: 0.5rem 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem; } .edit-button:hover { background-color: #4447a6; } .update-button { background-color: #5457b6; color: #ffffff; border: none; border-radius: 4px; padding: 0.5rem 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem; } .update-button:hover { background-color: #4447a6; } .comment-footer { display: flex; justify-content: flex-end; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eaecf1; background-color: transparent; } .comment-actions { display: flex; gap: 1rem; align-items: center; } .delete-button { background-color: #ed6368; color: #ffffff; border: none; border-radius: 4px; padding: 0.5rem 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem; } .delete-button:hover { background-color: #ff7277; } .popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .popup-content { background-color: #ffffff; padding: 1.5rem; border-radius: 8px; width: 90%; max-width: 400px; } .popup-title { color: #334253; font-size: 1.25rem; font-weight: 500; margin-bottom: 1rem; } .popup-message { color: #67727e; margin-bottom: 1.5rem; line-height: 1.5; } .popup-buttons { display: flex; gap: 1rem; } .popup-button { flex: 1; padding: 0.75rem; border: none; border-radius: 8px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; } .cancel-button { background-color: #67727e; color: #ffffff; } .cancel-button:hover { background-color: #5c6671; } .confirm-delete-button { background-color: #ed6368; color: #ffffff; } .confirm-delete-button:hover { background-color: #ff7277; } .comments-container { padding: 1rem; background-color: #f5f6fa; flex: 1; overflow-y: auto; scrollbar-gutter: stable; border-top-left-radius: 10px; border-top-right-radius: 10px; } .comment-form { position: sticky; bottom: 0; left: 0; right: 0; background-color: #ffffff; padding: 1rem; border-radius: 8px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); } .comment-form-content { display: flex; gap: 1rem; align-items: flex-start; } .comment-textarea { flex: 1; min-height: 96px; padding: 0.75rem; border: 1px solid #eaecf1; border-radius: 8px; resize: none; font-family: inherit; font-size: 1rem; line-height: 1.5; } .comment-textarea:focus { outline: none; border-color: #5457b6; } .send-button { background-color: #5457b6; color: #ffffff; border: none; border-radius: 8px; padding: 0.75rem 1.5rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; } .send-button:hover { background-color: #4447a6; } .comment-container { background-color: #ffffff; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.25rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .comment-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .username { font-weight: 500; color: #334253; } .timestamp { color: #67727e; } .comment-content { color: #67727e; line-height: 1.5; } .user-badge { background-color: #5457b6; color: #ffffff; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; margin-left: 8px; } .root-container { width: 100vw; height: 100vh; background-color: #ffffff; 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/bg-main.png?Xrrp); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.95; } .content-container { width: 420px; position: relative; display: flex; flex-direction: column; z-index: 2; min-height: 85vh; max-height: 85vh; padding: 0; background-color: #ffffff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); box-sizing: border-box; } `; // Insert styles into document // Insert styles into document const styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); // Application Settings const APP_SETTINGS = { controlVariables: { clearStoredUser: false // Control variable to clear stored user on boot }, api: { baseUrl: 'https://comments-fullstack-086de3332804.herokuapp.com/api' } }; // CommentsService - Handles all comment-related API operations class UsersService { constructor(baseUrl) { this.baseUrl = baseUrl; this.endpoints = { users: '/users', user: (id) => `/users/${id}` }; } async makeApiRequest({ endpoint, method = 'GET', data = null, operation = 'API call' }) { const url = `${APP_SETTINGS.api.baseUrl}${endpoint}`; console.log(`🚀 ${operation} request:`, { url, method, data: data || undefined }); try { const options = { method, headers: { 'Content-Type': 'application/json', }, ...(data && { body: JSON.stringify(data) }) }; const response = await fetch(url, options); const responseStatus = response.status; const responseStatusText = response.statusText; if (!response.ok) { throw new Error(`Failed to ${operation}: ${responseStatus} ${responseStatusText}`); } const responseData = await response.json(); return responseData; } catch (error) { console.error(`❌ Error during ${operation}:`, error); throw error; } } async fetchUsers() { const data = await this.makeApiRequest({ endpoint: this.endpoints.users, method: 'GET', operation: 'fetch users' }); const usersObj = {}; data.forEach(userData => { usersObj[userData.id] = new User(userData.id, userData.name, userData.image); }); return usersObj; } } class CommentsService { constructor(baseUrl, usersService) { this.baseUrl = baseUrl; this.endpoints = { comments: '/comments', comment: (id) => `/comments/${id}` }; this.usersService = usersService; } async makeApiRequest({ endpoint, method = 'GET', data = null, operation = 'API call' }) { const url = `${APP_SETTINGS.api.baseUrl}${endpoint}`; console.log(`🚀 ${operation} request:`, JSON.stringify({ url, method, data: data || undefined }, null, 2)); try { const options = { method, headers: { 'Content-Type': 'application/json', }, ...(data && { body: JSON.stringify(data) }) }; const response = await fetch(url, options); const responseStatus = response.status; const responseStatusText = response.statusText; const contentType = response.headers.get('content-type'); console.log('📥 Received response headers:', JSON.stringify({ status: responseStatus, statusText: responseStatusText, contentType, headers: Object.fromEntries(response.headers.entries()) }, null, 2)); if (!response.ok) { throw new Error(`Failed to ${operation}: ${responseStatus} ${responseStatusText}`); } // Skip JSON parsing for 204 No Content responses (typical for DELETE) if (responseStatus === 204) { console.log(`✅ ${operation} completed successfully (no content)`); return null; } const responseData = await response.json(); console.log(`✅ ${operation} completed successfully:`, JSON.stringify({ endpoint, method, requestData: data || 'No request body', responseData: responseData }, null, 2)); return responseData; } catch (error) { console.error(`❌ Error during ${operation}:`, { message: error.message, error }); throw error; } } async fetchUsers() { const data = await this.makeApiRequest({ endpoint: this.endpoints.users, method: 'GET', operation: 'fetch users' }); // Convert the array of users into an object indexed by user ID const usersObj = {}; data.forEach(userData => { usersObj[userData.id] = new User(userData.id, userData.name, userData.image); }); return usersObj; } async fetchComments() { const data = await this.makeApiRequest({ endpoint: this.endpoints.comments, method: 'GET', operation: 'fetch comments' }); return data.map(createCommentFromAPI); } async createComment(content, userId) { const requestData = { content: content.trim(), userId: userId }; const data = await this.makeApiRequest({ endpoint: this.endpoints.comments, method: 'POST', data: requestData, operation: 'create comment' }); return new Comment( data.id, data.content, 'Just now', userId ); } async updateComment(commentId, newContent) { const updatedData = { content: newContent, created_at: new Date().toISOString() }; const response = await this.makeApiRequest({ endpoint: this.endpoints.comment(commentId), method: 'PUT', data: updatedData, operation: 'update comment' }); return { content: response.content, createdAt: formatTimestamp(response.createdAt) }; } async deleteComment(commentId) { await this.makeApiRequest({ endpoint: this.endpoints.comment(commentId), method: 'DELETE', operation: 'delete comment' }); } } // Initialize Services const usersService = new UsersService( APP_SETTINGS.api.baseUrl ); const commentsService = new CommentsService( APP_SETTINGS.api.baseUrl, usersService ); // ================================================== // 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); */ 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 DeleteConfirmationPopup = ({ onClose, onConfirm }) => { return (

Delete comment

Are you sure you want to delete this comment? This will remove the comment and can't be undone.

); }; const CommentContainer = ({ comment, onDelete, onUpdate }) => { const [showDeletePopup, setShowDeletePopup] = useState(false); const [isEditing, setIsEditing] = useState(false); const [editedContent, setEditedContent] = useState(comment.content); const handleDelete = () => { setShowDeletePopup(false); onDelete(comment.id); }; const handleUpdate = () => { onUpdate(comment.id, editedContent); setIsEditing(false); }; return (

{comment.getUser()?.name || 'Unknown User'} {comment.userId === CURRENT_USER.id && ( you )} {comment.createdAt}

{isEditing ? (

setEditedContent(e.target.value)}
          rows={4}
        />
      ) : (
        <p className="comment-content">{comment.content}</p>
      )}
      {comment.getUser()?.isCurrentUser() && (
        <div className="comment-footer">
          <div className="comment-actions">
            {isEditing ? (
              <button 
                className="update-button"
                onClick={handleUpdate}
              >
                Update
              </button>
            ) : (
              <>
                <button 
                  className="edit-button"
                  onClick={() => setIsEditing(true)}
                >
                  Edit
                </button>
                <button 
                  className="delete-button"
                  onClick={() => setShowDeletePopup(true)}
                >
                  Delete
                </button>
              </>
            )}
            {showDeletePopup && (
              <DeleteConfirmationPopup
                onClose={() => setShowDeletePopup(false)}
                onConfirm={handleDelete}
              />
            )}
          </div>
        </div>
      )}
    </div>
  );
};
const CommentForm = ({ onSubmit }) => {
  const [content, setContent] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const handleClick = async () => {
    if (!content.trim() || isSubmitting) return;
    
    setIsSubmitting(true);
    
    try {
      const newComment = await commentsService.createComment(content, CURRENT_USER.id);
      onSubmit(newComment);
      setContent('');
    } catch (error) {
      console.error('❌ Error creating comment:', {
        message: error.message,
        error: error
      });
      // You might want to show an error message to the user here
    } finally {
      console.log('🏁 Request completed. Form submitting state reset.');
      setIsSubmitting(false);
    }
  };
  return (
    <div className="comment-form">
      <div className="comment-form-content">
        <textarea
          className="comment-textarea"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Add a comment..."
        />
        <button 
          type="button" 
          className="send-button"
          onClick={handleClick}
        >
          Send
        </button>
      </div>
    </div>
  );
};
const CommentLoading = () => (
  <div style={{ textAlign: 'center', padding: '2rem' }}>Loading comments...</div>
);
const CommentError = ({ message }) => (
  <div style={{ color: '#ed6368', textAlign: 'center', padding: '2rem' }}>{message}</div>
);
const EmptyComments = () => (
  <div style={{ textAlign: 'center', padding: '2rem' }}>No comments yet</div>
);
const CommentsList = ({ comments, onDelete, onUpdate }) => {
  // Separate root comments and replies
  const rootComments = comments.filter(comment => !comment.parentId);
  const replies = comments.filter(comment => comment.parentId);
  
  // Group replies by parent ID
  const repliesByParent = replies.reduce((acc, reply) => {
    if (!acc[reply.parentId]) {
      acc[reply.parentId] = [];
    }
    acc[reply.parentId].push(reply);
    return acc;
  }, {});
  
  return (
    <>
      {rootComments.map(comment => (
        <div key={comment.id}>
          <CommentContainer 
            comment={comment}
            onDelete={onDelete}
            onUpdate={onUpdate}
          />
          {repliesByParent[comment.id]?.map(reply => (
            <div key={reply.id} style={{ marginLeft: '2rem' }}>
              <CommentContainer 
                comment={reply}
                onDelete={onDelete}
                onUpdate={onUpdate}
              />
            </div>
          ))}
        </div>
      ))}
    </>
  );
};
const CommentsSection = ({ isLoading, error, comments, onDeleteComment, onUpdateComment, containerRef }) => (
  <div className="comments-container" ref={containerRef}>
    {isLoading ? (
      <CommentLoading />
    ) : error ? (
      <CommentError message={error} />
    ) : comments.length === 0 ? (
      <EmptyComments />
    ) : (
      <CommentsList 
        comments={comments}
        onDelete={onDeleteComment}
        onUpdate={onUpdateComment}
      />
    )}
  </div>
);
const CommentsView = () => {
  const [comments, setComments] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const commentsContainerRef = useRef(null);

useEffect(() => {
    const initializeData = async () => {
      try {
        console.log('🔄 Fetching comments...');
        const commentObjects = await commentsService.fetchComments();
        console.log('💬 Received comments:', 
          commentObjects.map(comment => ({
            id: comment.id,
            content: comment.content,
            createdAt: comment.createdAt,
            userId: comment.userId,
            parentId: comment.parentId
          }))
        );
        setComments(commentObjects);
      } catch (err) {
        console.error('Error initializing data:', err);
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };
    initializeData();
  }, []);

return (
    <>
      <CommentsSection
        isLoading={isLoading}
        error={error}
        comments={comments}
        onDeleteComment={handleDeleteComment}
        onUpdateComment={handleUpdateComment}
        containerRef={commentsContainerRef}
      />
      <CommentForm onSubmit={handleNewComment} />
    </>
  );
};
const imageAssets = {
  profilePictures: [
    'https://play.rosebud.ai/assets/avatar-mark-webber.webp?U0qS',
    'https://play.rosebud.ai/assets/avatar-anna-kim.webp?DlUI',
    'https://play.rosebud.ai/assets/avatar-kimberly-smith.webp?AZSq',
    'https://play.rosebud.ai/assets/avatar-rizky-hasanuddin.webp?D6lm',
    'https://play.rosebud.ai/assets/avatar-jacob-thompson.webp?V4SN',
    'https://play.rosebud.ai/assets/avatar-nathan-peterson.webp?yMzk'
  ]
};
const getRandomProfilePicture = () => {
  const randomIndex = Math.floor(Math.random() * imageAssets.profilePictures.length);
  return imageAssets.profilePictures[randomIndex];
};
const UserForm = ({ onUserCreated }) => {
  const [username, setUsername] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  
  const validateUsername = (name) => {
    const trimmedName = name.trim();
    // Check if name exists in USERS object
    const isDuplicate = Object.values(USERS).some(
      user => user.name.trim() === trimmedName
    );
    return isDuplicate ? 'This username is already taken' : '';
  };
  
  const handleSubmit = async () => {
    if (!username || isSubmitting || errorMessage) return;
    
    // Final validation before submission
    const validationError = validateUsername(username);
    if (validationError) {
      setErrorMessage(validationError);
      return;
    }
    
    setIsSubmitting(true);
    
    try {
      const userData = {
        name: username,
        image: getRandomProfilePicture()
      };
      
      const response = await fetch(`${APP_SETTINGS.api.baseUrl}/users`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(userData)
      });
      
      if (!response.ok) {
        throw new Error('Failed to create user');
      }
      
      const newUser = await response.json();
      const user = new User(newUser.id, newUser.name, newUser.image);
      
      // Update global user objects and store in localStorage
      console.log('👤 Creating new user object:', {
        id: user.id,
        name: user.name,
        image: user.image
      });
      USERS[user.id] = user;
      CURRENT_USER = user;
      console.log('✅ CURRENT_USER set:', {
        id: CURRENT_USER.id,
        name: CURRENT_USER.name,
        image: CURRENT_USER.image
      });
      
      // Store the user ID in localStorage
      localStorage.setItem('userId', user.id);
      console.log('💾 User ID stored in localStorage:', user.id);
      
      onUserCreated();
    } catch (error) {
      console.error('Error creating user:', error);
    } finally {
      setIsSubmitting(false);
    }
  };
  return (
    <div className="user-form-container" style={{ 
      maxHeight: '85vh',
      maxWidth: '400px',
      margin: '0 auto',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      width: '100%',
      padding: '2rem'
    }}>
      <h2 className="user-form-title">Create Your Profile</h2>
      <form style={{ width: '100%' }}>
        <div className="form-group">
          <label htmlFor="username" className="form-label">
            Username
          </label>
          <input
            type="text"
            id="username"
            className={`form-input ${errorMessage ? 'error' : ''}`}
            value={username}
            onChange={(e) => {
              const newUsername = e.target.value;
              setUsername(newUsername);
              setErrorMessage(validateUsername(newUsername));
            }}
            placeholder="Enter your username"
            required
          />
          {errorMessage && (
            <div className="error-message">{errorMessage}</div>
          )}
        </div>
        <button
          type="button"
          className="submit-button"
          disabled={isSubmitting || !username || errorMessage}
          onClick={handleSubmit}
          style={{ marginTop: '.5rem' }}
        >
          Create Profile
        </button>
      </form>
    </div>
  );
};
const App = () => {
  const [currentView, setCurrentView] = useState(VIEW_STATES.LOADING);
  
  const handleUserCreated = () => {
    setCurrentView(VIEW_STATES.COMMENTS);
  };
  
  useEffect(() => {
    const initialize = async () => {
      const viewState = await init();
      setCurrentView(viewState);
    };
    
    initialize();
  }, []);
  const renderView = () => {
    switch (currentView) {
      case VIEW_STATES.LOADING:
        return <div>Loading...</div>;
      case VIEW_STATES.COMMENTS:
        return <CommentsView />;
      case VIEW_STATES.USER_FORM:
        return <UserForm onUserCreated={handleUserCreated} />;
      default:
        return <UserForm onUserCreated={handleUserCreated} />;
    }
  };
  return (
    <div className="root-container">
      <div className="background-overlay" />
      <div className="content-container">
        {renderView()}
      </div>
    </div>
  );
};
const container = document.getElementById('renderDiv');
const root = ReactDOM.createRoot(container);
root.render(<App />);</article></body></html>