\n \n
\n}\n\nconst RouterApp = (props, railsContext) => {\n return (\n About Our School
\nHello world Component:
\n\n Our school is dedicated to providing a nurturing environment where kids can learn, play, and thrive.\n We believe in a balanced approach to education, combining academic excellence with fun activities.\n
\nActivities
\n- \n SPA navigation:\n
- \n home \n
- \n about \n
- \n services \n
- \n contact \n
Contact Us
\n\n Have questions? Reach out to us at{' '}\n \n info@schoolapp.com\n \n .\n
\nABOUT SECTION
\n \n } />\n\n {loading ? (\n \n ) : (\n 
\n )}\n
\n );\n};\n\nexport default ImageSection;\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport ImageSection from \"./ImageSection\";\n\nconst StoryTellingChat = ({ formToken, onSaveChat, chatId, chatStory }) => {\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [storyParts, setStoryParts] = useState(chatStory?.storyParts || []);\n const [chatStoryId, setChatStoryId] = useState(chatStory?.id || null);\n const [userPrompt, setUserPrompt] = useState(chatStory?.prompt || '');\n const [audioStatus, setAudioStatus] = useState({});\n\n const handleSendStoryPrompt = async (prompt) => {\n setIsSubmitting(true);\n setUserPrompt(prompt);\n try {\n const queryParams = new URLSearchParams({ prompt }).toString();\n\n const response = await axios.post(\n `/api/v1/chats/${chatId}/tell_story?${queryParams}`,\n {},\n {\n headers: {\n \"Authorization\": `Bearer ${formToken}`,\n },\n }\n );\n setChatStoryId(response.data.id);\n const storySegments = response.data.sections;\n setStoryParts(storySegments);\n onSaveChat();\n } catch (error) {\n console.error(\"Error generating story:\", error);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const handleGenerateAudio = async (messageId) => {\n setAudioStatus(prev => ({ ...prev, [messageId]: 'generating' }));\n try {\n const response = await axios.post(\n `/api/v1/chat_story_sections/${messageId}/generate_audio`,\n {},\n {\n headers: {\n \"Authorization\": `Bearer ${formToken}`,\n },\n }\n );\n setAudioStatus(prev => ({ ...prev, [messageId]: 'ready' }));\n // Refresh the story parts to get the updated audio URL\n const updatedStoryParts = storyParts.map(part => \n part.id === messageId ? { ...part, audioUrl: response.data.audio_url } : part\n );\n setStoryParts(updatedStoryParts);\n } catch (error) {\n console.error(\"Error generating audio:\", error);\n setAudioStatus(prev => ({ ...prev, [messageId]: 'error' }));\n }\n };\n\n useEffect(() => {\n if (chatStory) {\n setStoryParts(chatStory.storyParts.map(part => ({\n ...part,\n audioUrl: part.audioUrl || null // Ensure audioUrl is set, even if it's null\n })));\n setChatStoryId(chatStory.id);\n setUserPrompt(chatStory.prompt);\n \n // Set initial audio status for parts with existing audio\n const initialAudioStatus = {};\n chatStory.storyParts.forEach(part => {\n initialAudioStatus[part.id] = part.audioUrl ? 'ready' : 'not_generated';\n });\n setAudioStatus(initialAudioStatus);\n }\n }, [chatStory]);\n\n return (\n \n {!storyParts.length && (\n
\n );\n};\n\nexport default StoryTellingChat;\n","import React, { useState, useRef, useEffect } from \"react\";\nimport { HiOutlinePaperClip } from \"react-icons/hi2\";\nimport { IoMdCloseCircle } from \"react-icons/io\";\nimport { FaArrowAltCircleUp } from \"react-icons/fa\";\n\nconst MessageInput = ({ handleSubmit, input, setInput, handleFileChange, showWork, messageCount = 0, disabled }) => {\n const [filePreview, setFilePreview] = useState(null);\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [isCameraActive, setIsCameraActive] = useState(false);\n const textareaRef = useRef(null);\n const videoRef = useRef(null);\n const canvasRef = useRef(null);\n\n useEffect(() => {\n if (isCameraActive) {\n startCamera();\n }\n }, [isCameraActive]);\n\n const adjustHeight = () => {\n if (textareaRef.current) {\n textareaRef.current.style.height = \"auto\";\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }\n };\n\n useEffect(() => {\n adjustHeight();\n }, [input]);\n\n const handleFileChangeInternal = (file) => {\n if (file) {\n const fileType = file.type;\n if (fileType === \"image/png\" || fileType === \"image/jpeg\") {\n const reader = new FileReader();\n reader.onloadend = () => {\n setFilePreview(reader.result);\n };\n reader.readAsDataURL(file);\n handleFileChange(file);\n setErrorMessage(\"\");\n } else {\n setErrorMessage(\"Only PNG and JPG files are allowed.\");\n }\n }\n };\n\n const startCamera = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n video: {\n facingMode: { ideal: \"environment\" },\n }\n });\n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n videoRef.current.play();\n }\n } catch (error) {\n console.error(\"Error accessing camera:\", error);\n }\n };\n\n const captureImage = () => {\n if (videoRef.current && canvasRef.current) {\n const canvas = canvasRef.current;\n const video = videoRef.current;\n\n const aspectRatio = 8.5 / 11; // 8.5\" x 11\" paper aspect ratio\n canvas.height = video.videoHeight;\n canvas.width = canvas.height * aspectRatio;\n\n const context = canvas.getContext(\"2d\");\n\n const cropWidth = video.videoHeight * aspectRatio;\n const cropX = (video.videoWidth - cropWidth) / 2;\n\n context.drawImage(video, cropX, 0, cropWidth, video.videoHeight, 0, 0, canvas.width, canvas.height);\n\n canvas.toBlob((blob) => {\n const newCapturedFile = new File([blob], \"captured_image.jpg\", {\n type: \"image/jpeg\",\n });\n setFilePreview(URL.createObjectURL(newCapturedFile));\n handleFileChange(newCapturedFile); // Pass the file to the parent component\n });\n\n const stream = video.srcObject;\n const tracks = stream.getTracks();\n tracks.forEach((track) => track.stop());\n setIsCameraActive(false);\n }\n };\n\n const handleKeyDown = (e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit(e);\n setFilePreview(null);\n }\n };\n\n let paperClip = null;\n if (!showWork) {\n paperClip = (\n \n {\n e.preventDefault();\n const prompt = e.target.prompt.value;\n handleSendStoryPrompt(prompt);\n }}\n className=\"w-full bg-white rounded-lg shadow-md p-6\"\n >\n \n \n \n {isSubmitting ? \"Generating Story...\" : \"Submit\"}\n \n \n
\n )}\n\n {storyParts.length > 0 && (\n \n
\n )}\n \n
\n {storyParts.map((part, index) => (\n Original Question:
\n{userPrompt}
\n\n
\n ))}\n {part.content}
\n\n {part.audioUrl ? (\n \n ) : (\n handleGenerateAudio(part.id)}\n className=\"w-full px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition duration-200\"\n disabled={audioStatus[part.id] === 'generating'}\n >\n {audioStatus[part.id] === 'generating' ? 'Generating Audio...' : 'Listen To Audio'}\n \n )}\n
\n \n {isCameraActive && (\n setIsCameraActive(true)}\n className=\"w-full mb-4 py-16 px-4 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center justify-center\"\n >\n {\n handleSubmit(e);\n setFilePreview(null);\n }}\n className={`flex items-center p-2 bg-gray-100 rounded ${\n filePreview ? \"rounded-t-none\" : \"rounded\"\n }`}\n >\n {paperClip}\n handleFileChangeInternal(e.target.files[0])}\n className=\"hidden\"\n />\n {\n setInput(e.target.value);\n adjustHeight();\n }}\n placeholder={disabled ? \"Select a subject to start chatting\" : \"Type your message...\"}\n rows={1}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n />\n \n
\n );\n};\n\nexport default MessageInput;\n","import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport \"katex/dist/katex.min.css\";\nimport { InlineMath, BlockMath } from \"react-katex\";\nimport rehypeRaw from \"rehype-raw\";\nimport remarkMath from \"remark-math\";\nimport rehypeKatex from \"rehype-katex\";\n\nconst UserMessage = ({ message }) => {\n let content = '';\n\n try {\n if (message?.content === null || message?.content === undefined) {\n content = '';\n } else if (typeof message.content === 'object') {\n content = JSON.stringify(message.content);\n } else {\n content = String(message.content);\n }\n } catch (error) {\n console.error('Error processing message content:', error);\n content = '';\n }\n\n return (\n \n \n \n Capture Image\n \n \n
\n )}\n {filePreview && (\n \n
\n )}\n {!isCameraActive && showWork && messageCount < 1 && (\n \n {\n setFilePreview(null);\n handleFileChange(null);\n }}\n className=\"text-sm text-red-500 absolute right-0 top-[-8px] hover:text-red-700 bg-white rounded-full cursor-pointer\"\n >\n
\n \n \n \n
\n \n )}\n {errorMessage && {errorMessage}
}\n \n
\n );\n};\n\nexport default UserMessage;","import React, { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaStar } from 'react-icons/fa';\nimport { HiSpeakerWave, HiOutlineSpeakerWave } from 'react-icons/hi2';\nimport { ImSpinner8 } from 'react-icons/im';\nimport axios from 'axios';\nimport ReactMarkdown from 'react-markdown';\nimport \"katex/dist/katex.min.css\";\nimport { InlineMath, BlockMath } from \"react-katex\";\nimport rehypeRaw from \"rehype-raw\";\nimport remarkMath from \"remark-math\";\nimport rehypeKatex from \"rehype-katex\";\n\nconst CollapsibleSection = ({ title, items, isOpen, toggleOpen, onItemClick, isClickable }) => {\n if (!items || items.length === 0) return null;\n\n // Ensure all items are strings\n const stringItems = items.map(item => typeof item === 'string' ? item : String(item || ''));\n\n return (\n \n {\n try {\n console.log('UserMessage InlineMath props:', props);\n return
\n {message.image_url && (\n {props.value || ''}
;\n }\n }\n }}\n >\n {content}\n \n \n
\n )}\n \n \n {isOpen ?
\n )}\n \n );\n};\n\nconst AssistantMessage = ({ message, onFollowUpClick, formToken }) => {\n const [audioStatus, setAudioStatus] = useState('not_generated');\n const [audioUrl, setAudioUrl] = useState(message.audio_url);\n const [showExamples, setShowExamples] = useState(false);\n const [showEquations, setShowEquations] = useState(false);\n const [showFollowUp, setShowFollowUp] = useState(false);\n\n // Only show audio for language learning chats\n const showAudioButton = message.chat_type === 'language_learning';\n\n // Only show map focus for map explorer chats\n const showMapFocus = message.chat_type === 'map_explorer' && message.map_focus;\n\n const handleGenerateAudio = async () => {\n setAudioStatus('generating');\n try {\n const response = await axios.post(\n `/api/v1/chat_messages/${message.id}/generate_audio`,\n {},\n {\n headers: {\n \"Authorization\": `Bearer ${formToken}`,\n },\n }\n );\n setAudioUrl(response.data.audio_url);\n setAudioStatus('ready');\n } catch (error) {\n console.error(\"Error generating audio:\", error);\n setAudioStatus('error');\n }\n };\n\n const renderContent = (content) => {\n try {\n // Ensure content is a string\n const stringContent = typeof content === 'string' ? content : String(content || '');\n\n // Process content to handle various LaTeX formats\n let processedContent = stringContent.replace(\n /\\\\\\\\(\\(|\\)|\\[|\\])/g, // Match \\\\( \\\\) \\\\[ \\\\]\n (match, bracket) => bracket // Replace with just the bracket\n );\n\n processedContent = processedContent.replace(\n /\\(\\\\([^)]+)\\)/g,\n (match, p1) => `$${p1}$`\n );\n\n processedContent = processedContent.replace(\n /\\\\\\\\\\\\\\\\(\\(|\\))\\\\\\\\([^\\\\]+)\\\\\\\\\\\\\\\\(\\(|\\))/g,\n (match, openBracket, content, closeBracket) => `$${content}$`\n );\n\n console.log('Production Debug - processedContent type:', typeof processedContent);\n console.log('Production Debug - processedContent value:', processedContent);\n\n return (\n \n {stringItems.map((item, index) => (\n isClickable && onItemClick(item)}\n role={isClickable ? \"button\" : \"none\"}\n >\n {isClickable ? (\n item\n ) : (\n
\n ))}\n {typeof content === 'string' ? content : String(content || '')}
;\n }\n };\n\n return (\n\n
\n );\n};\n\nexport default AssistantMessage;\n","import React from \"react\";\nimport UserMessage from \"./UserMessage\";\nimport AssistantMessage from \"./AssistantMessage\";\n\nconst Profile = ({ role, user }) => {\n const avatarSrc =\n role === \"assistant\"\n ? \"/tybee-avatar.jpg\"\n : user?.avatar || \"/fallback-avatar.png\";\n\n return (\n \n setShowExamples(!showExamples)}\n isClickable={false}\n />\n\n setShowEquations(!showEquations)}\n isClickable={false}\n />\n\n setShowFollowUp(!showFollowUp)}\n onItemClick={onFollowUpClick}\n isClickable={true}\n />\n\n {showMapFocus && (\n
\n \n
\n\n \n {message.explanation && (\n
\n {showAudioButton && (\n \n {renderContent(message.explanation)}\n
\n )}\n \n {audioUrl ? (\n \n {audioStatus === 'generating' ? (\n <>\n
\n )}\n \n
\n ) : (\n \n
\n )}\n \n Map focused on: {message.map_focus.latitude}, {message.map_focus.longitude}\n
\n\n
\n );\n};\n","import React from 'react';\n\nconst Spinner = () => (\n \n
\n \n {isUser ? (\n
\n \n ![\"Loading...\"](\"/loading.gif\")
\n
\n);\n\nexport default Spinner;","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst LanguageLearningPrompts = ({ language, mode, onPromptSelect }) => {\n const getPrompts = () => {\n switch (mode.id) {\n case 'conversation':\n return [\n \"Hi! Can we practice having a simple conversation?\",\n \"Could you help me introduce myself?\",\n \"Let's talk about hobbies and interests\",\n ];\n case 'vocabulary':\n return [\n \"Can you teach me some basic words about animals?\",\n \"I'd like to learn words about food and drinks\",\n \"What are some common everyday phrases?\",\n ];\n case 'grammar':\n return [\n \"Can you help me practice present tense?\",\n \"I need help with question words\",\n \"Let's practice basic sentence structure\",\n ];\n case 'pronunciation':\n return [\n \"Can you help me pronounce some basic words?\",\n \"What are the most important sounds in this language?\",\n \"Let's practice saying common phrases\",\n ];\n default:\n return [];\n }\n };\n\n return (\n \n \n
\n );\n};\n\nLanguageLearningPrompts.propTypes = {\n language: PropTypes.shape({\n code: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }).isRequired,\n mode: PropTypes.shape({\n id: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n icon: PropTypes.string.isRequired,\n }).isRequired,\n onPromptSelect: PropTypes.func.isRequired,\n};\n\nexport default LanguageLearningPrompts;\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps/api';\nimport { FaGlobeAmericas } from 'react-icons/fa';\nimport AssistantMessage from './AssistantMessage';\n\nconst World = ({ apiKey, formToken, chat }) => {\n const [map, setMap] = useState(null);\n const [clickedLocation, setClickedLocation] = useState(null);\n const [infoWindowOpen, setInfoWindowOpen] = useState(false);\n const [question, setQuestion] = useState('');\n const [messages, setMessages] = useState(chat?.messages || []);\n const [isLoading, setIsLoading] = useState(false);\n const [suggestions, setSuggestions] = useState([\n \"Tell me about the history of this place\",\n \"What's the local culture like?\",\n \"What are some interesting landmarks here?\",\n \"What's the climate like in this region?\",\n \"What languages do people speak here?\"\n ]);\n\n // Add state for map center\n const [center, setCenter] = useState({\n lat: 20,\n lng: 0\n });\n\n const containerStyle = {\n width: '100%',\n height: '100%',\n position: 'absolute',\n top: 0,\n left: 0\n };\n\n const mapOptions = {\n mapTypeControl: true,\n mapTypeControlOptions: {\n style: window.google?.maps.MapTypeControlStyle.HORIZONTAL_BAR,\n position: window.google?.maps.ControlPosition.TOP_LEFT,\n mapTypeIds: ['roadmap', 'terrain', 'satellite', 'hybrid']\n },\n zoomControl: true,\n zoomControlOptions: {\n position: window.google?.maps.ControlPosition.LEFT_CENTER\n },\n fullscreenControl: true,\n fullscreenControlOptions: {\n position: window.google?.maps.ControlPosition.LEFT_TOP\n },\n streetViewControl: false,\n styles: [\n {\n featureType: \"poi\",\n elementType: \"labels\",\n stylers: [{ visibility: \"off\" }]\n }\n ]\n };\n\n const handleMapClick = (event) => {\n const newLocation = {\n lat: event.latLng.lat(),\n lng: event.latLng.lng()\n };\n setClickedLocation(newLocation);\n setCenter(newLocation); // Update center when clicking\n };\n\n const handleQuestionSubmit = async (e) => {\n e.preventDefault();\n if (!question.trim()) return;\n\n setIsLoading(true);\n setQuestion('');\n \n try {\n const response = await axios.post(`/api/v1/chats/${chat.id}/send_message`, {\n content: question,\n // Only include coordinates if a location was clicked\n ...(clickedLocation && {\n latitude: clickedLocation.lat,\n longitude: clickedLocation.lng\n }),\n authenticity_token: formToken\n });\n\n const message = response.data;\n \n // Update map if location focus is provided\n console.log('message', message);\n if (message.map_focus) {\n const { latitude, longitude, zoom } = message.map_focus;\n const newCenter = {\n lat: parseFloat(latitude),\n lng: parseFloat(longitude)\n };\n \n console.log('Panning to:', { ...newCenter, zoom });\n \n setCenter(newCenter); // Update center state\n setClickedLocation(newCenter); // Update marker\n \n if (map) {\n // Force the map to update its center\n map.panTo(newCenter);\n if (zoom) {\n map.setZoom(parseInt(zoom));\n }\n }\n }\n\n setMessages(prev => [...prev, message]);\n } catch (error) {\n console.error('Error:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleSuggestionClick = (suggestion) => {\n setQuestion(suggestion);\n };\n\n return (\n \n Suggested ways to start:\n
\n\n {getPrompts().map((prompt, index) => (\n onPromptSelect(prompt)}\n className=\"w-full text-left p-3 rounded-lg hover:bg-blue-50 border border-gray-200\n transition-colors duration-200\"\n >\n {prompt}\n \n ))}\n
\n \n {/* Map Section - Takes up remaining space */}\n
\n );\n};\n\nexport default World;\n\n","import React, { useState, useEffect, useRef } from \"react\";\nimport axios from \"axios\";\nimport { Message } from \"./Message\";\nimport Spinner from \"./Spinner\";\n\nconst ParentMemoryChat = ({ chat, formToken, childId, onSaveMemory }) => {\n const [messages, setMessages] = useState(chat.messages || []);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [showMemoryForm, setShowMemoryForm] = useState(false);\n const [memoryData, setMemoryData] = useState(\"\");\n const [memoryType, setMemoryType] = useState(\"anything\");\n const messagesEndRef = useRef(null);\n\n const memoryTypes = [\n { value: \"anything\", label: \"General\" },\n { value: \"math\", label: \"Math\" },\n { value: \"science\", label: \"Science\" },\n { value: \"history\", label: \"History\" },\n { value: \"geography\", label: \"Geography\" },\n { value: \"language_arts\", label: \"Language Arts\" }\n ];\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n const userMessage = {\n role: \"user\",\n content: input\n };\n\n setMessages([...messages, userMessage]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await axios.post(\n `/api/v1/chats/${chat.id}/send_message`,\n {\n content: input,\n child_id: childId\n },\n {\n headers: {\n Authorization: `Bearer ${formToken}`,\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n }\n );\n\n const assistantMessage = {\n role: \"assistant\",\n id: response.data.id,\n content: response.data.content,\n examples: response.data.examples || [],\n follow_up: response.data.follow_up || [],\n };\n\n setMessages((prevMessages) => [...prevMessages, assistantMessage]);\n } catch (error) {\n console.error(\"Error sending message:\", error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleSaveMemoryClick = () => {\n setShowMemoryForm(true);\n // Pre-populate with the last assistant message examples if available\n const lastAssistantMessage = [...messages].reverse().find(m => m.role === \"assistant\");\n if (lastAssistantMessage && lastAssistantMessage.examples && lastAssistantMessage.examples.length > 0) {\n setMemoryData(lastAssistantMessage.examples[0]);\n }\n };\n\n const handleSaveMemory = async () => {\n if (!memoryData.trim()) return;\n\n const result = await onSaveMemory(memoryData, memoryType);\n \n if (result.success) {\n setShowMemoryForm(false);\n setMemoryData(\"\");\n \n // Add a system message confirming the save\n setMessages([\n ...messages, \n {\n role: \"system\",\n content: `Memory saved successfully! This information will help personalize the learning experience.`\n }\n ]);\n } else {\n // Handle error\n console.error(\"Failed to save memory:\", result.errors);\n }\n };\n\n const handleFollowUpClick = (question) => {\n setInput(question);\n };\n\n return (\n \n \n \n {clickedLocation && (\n \n
\n\n {/* Chat Section - Fixed width */}\n \n
\n \n
\n\n {/* Messages */}\n \n
\n World Explorer Chat
\n\n Click anywhere on the map to ask questions about that location!\n
\n\n {messages.map((message, index) => (\n
\n\n {/* Input Section */}\n \n {message.role === 'user' ? (\n
\n ))}\n {isLoading && (\n \n {message.latitude && (\n <>\n
\n ) : (\n Location:
\n\n Lat: {Number(message.latitude).toFixed(4)}, Lng: {Number(message.longitude).toFixed(4)}\n
\n \n )}\n{message.content}
\n\n \n
\n )}\n \n \n
\n \n
\n );\n};\n\nexport default ParentMemoryChat; ","import PropTypes from \"prop-types\";\nimport React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport StoryTellingChat from \"./StoryTellingChat\";\nimport MessageInput from \"./MessageInput\";\nimport { Message } from \"./Message\";\nimport Spinner from \"./Spinner\";\nimport LanguageLearningPrompts from './LanguageLearningPrompts';\nimport World from './World';\nimport ParentMemoryChat from './ParentMemoryChat';\n\nconst Chat = (props) => {\n const [messages, setMessages] = useState(props.chat.messages);\n const [input, setInput] = useState(\"\");\n const [imageFile, setImageFile] = useState(null);\n const [isStorySubmitted, setIsStorySubmitted] = useState(\n props.chat.chatType === \"story_telling\" && !!props.chat.chatStory\n );\n const [isLoading, setIsLoading] = useState(false);\n const [subject, setSubject] = useState(null);\n const [targetLanguage, setTargetLanguage] = useState(null);\n const [learningMode, setLearningMode] = useState(null);\n\n const handleFileChange = (file) => {\n setImageFile(file);\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n\n let uploadedImageURL = null;\n let uploadedImageId = null;\n\n if (imageFile) {\n const formData = new FormData();\n formData.append(\"chat_image[role]\", \"user\");\n formData.append(\"chat_image[image]\", imageFile);\n\n try {\n const response = await axios.post(\n `/chats/${props.chat.id}/chat_images`,\n formData,\n {\n headers: {\n Authorization: `Bearer ${props.formToken}`,\n \"Content-Type\": \"multipart/form-data\",\n Accept: \"application/json\",\n },\n }\n );\n uploadedImageURL = response.data.imageURL;\n uploadedImageId = response.data.imageId;\n } catch (error) {\n console.error(\"Image upload failed:\", error);\n return; // Prevent sending the message if image upload fails\n }\n }\n\n const userMessage = {\n role: \"user\",\n content: input,\n image_url: uploadedImageURL,\n image_id: uploadedImageId,\n };\n\n setMessages([...messages, userMessage]);\n setInput(\"\");\n setImageFile(null);\n setIsLoading(true);\n\n try {\n const response = await axios.post(\n `/api/v1/chats/${props.chat.id}/send_message`,\n {\n content: input,\n image_id: uploadedImageId,\n subject: subject || \"anything\",\n ...(props.chat.chatType === 'language_learning' && {\n language: targetLanguage?.code\n })\n },\n {\n headers: {\n Authorization: `Bearer ${props.formToken}`,\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n }\n );\n\n const assistantMessage = {\n role: \"assistant\",\n id: response.data.id,\n audioUrl: response.data.audio_url,\n explanation: response.data.explanation,\n examples: response.data.examples || [],\n equations: response.data.equations || [],\n follow_up: response.data.follow_up || '',\n map_focus: response.data.map_focus || null,\n };\n\n setMessages((prevMessages) => [...prevMessages, assistantMessage]);\n } catch (error) {\n console.error(\"Error sending message:\", error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const regularSubjects = [\"Math\", \"Science\", \"History\", \"Geography\", \"Language Arts\", \"Anything\"];\n\n const languageModes = [\n { id: 'conversation', label: 'Have a Conversation', icon: '💭' },\n { id: 'vocabulary', label: 'Learn New Words', icon: '📚' },\n { id: 'grammar', label: 'Practice Grammar', icon: '✏️' },\n { id: 'pronunciation', label: 'Pronunciation Help', icon: '🗣️' },\n ];\n\n const languages = [\n { code: 'es', name: 'Spanish' },\n { code: 'fr', name: 'French' },\n { code: 'de', name: 'German' },\n { code: 'it', name: 'Italian' },\n { code: 'pt', name: 'Portuguese' },\n { code: 'nl', name: 'Dutch' },\n ];\n\n const isNewChat = messages.length === 0;\n\n const handleFollowUpClick = (question) => {\n setInput(question);\n };\n\n const handleSaveMemory = async (memoryData, memoryType) => {\n try {\n const response = await axios.post(\n `/user_ai_memories/create_from_chat`,\n {\n memory_data: memoryData,\n memory_type: memoryType,\n user_id: props.childId // This will be passed from the controller\n },\n {\n headers: {\n Authorization: `Bearer ${props.formToken}`,\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n }\n );\n\n return response.data;\n } catch (error) {\n console.error(\"Error saving memory:\", error);\n return { success: false, error: \"Failed to save memory\" };\n }\n };\n\n return (\n \n
\n\n Creating Learning Memories
\n\n Chat with our AI to create personalized learning memories for your child. \n These memories help our tutors provide a more tailored learning experience.\n
\n\n
\n\n {showMemoryForm && (\n \n {messages.map((message, index) => (\n
\n \n
\n )}\n \n \n
\n )}\n\n \n\n Save Learning Memory
\n \n\n \n setMemoryType(e.target.value)}\n className=\"w-full rounded-lg border-gray-300 focus:ring-yellow-500 focus:border-yellow-500\"\n >\n {memoryTypes.map((type) => (\n \n ))}\n \n
\n \n \n \n setMemoryData(e.target.value)}\n rows={4}\n className=\"w-full rounded-lg border-gray-300 focus:ring-yellow-500 focus:border-yellow-500\"\n placeholder=\"Enter the memory details...\"\n />\n
\n \n \n setShowMemoryForm(false)}\n className=\"px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg\"\n >\n Cancel\n \n \n Save Memory\n \n
\n \n \n View All Learning Memories\n \n
\n \n {props.chat.chatType === 'parent_memory' ? (\n
\n );\n};\n\nChat.propTypes = {\n chatKey: PropTypes.number,\n name: PropTypes.string,\n chat: PropTypes.shape({\n id: PropTypes.number.isRequired,\n chatType: PropTypes.string.isRequired,\n messages: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n role: PropTypes.string.isRequired,\n content: PropTypes.string,\n image_url: PropTypes.string,\n })\n ).isRequired,\n chatStory: PropTypes.object,\n }).isRequired\n};\n\nexport default Chat;\n","import PropTypes from \"prop-types\";\nimport React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport StoryTellingChat from \"./StoryTellingChat\";\nimport MessageInput from \"./MessageInput\";\nimport { Message } from \"./Message\";\n\nconst Chat = (props) => {\n const [input, setInput] = useState(\"\");\n const [imageURL, setImageURL] = useState(null);\n const [imageId, setImageId] = useState(null);\n const [eventSource, setEventSource] = useState(null);\n const [isStorySubmitted, setIsStorySubmitted] = useState(\n props.chat.chatType === \"story_telling\" && !!props.chat.chatStory.story\n );\n\n const handleSend = async (e) => {\n e.preventDefault();\n\n const userMessage = {\n role: \"user\",\n content: input,\n image_url: imageURL,\n image_id: imageId,\n };\n\n setMessages([...messages, userMessage]);\n setInput(\"\");\n if (eventSource) {\n eventSource.close();\n }\n\n const queryParams = new URLSearchParams({\n content: input,\n image_id: imageId,\n }).toString();\n const newEventSource = new EventSource(\n `/api/v1/chats/${props.chat.id}/send_message?${queryParams}`\n );\n setEventSource(newEventSource);\n setImageURL(null);\n let assistantMessage = { role: \"assistant\", content: \"\" };\n setMessages((prevMessages) => [...prevMessages, assistantMessage]);\n\n newEventSource.onmessage = (event) => {\n const newContent = event.data;\n setMessages((prevMessages) => {\n const updatedMessages = [...prevMessages];\n const lastMessageIndex = updatedMessages.length - 1;\n\n updatedMessages[lastMessageIndex] = {\n ...assistantMessage,\n content: newContent,\n };\n\n return updatedMessages;\n });\n };\n\n newEventSource.onerror = (error) => {\n console.error(\"EventSource failed:\", error);\n newEventSource.close();\n setEventSource(null);\n };\n };\n\n const handleFileChange = async (e) => {\n const file = e.target.files[0];\n const formData = new FormData();\n formData.append(\"chat_image[role]\", \"user\");\n formData.append(\"chat_image[image]\", file);\n\n try {\n const response = await axios.post(\n `/chats/${props.chat.id}/chat_images`,\n formData,\n {\n headers: {\n Authorization: `Bearer ${props.formToken}`,\n \"Content-Type\": \"multipart/form-data\",\n Accept: \"application/json\",\n },\n }\n );\n setImageURL(response.data.imageURL);\n setImageId(response.data.imageId);\n } catch (error) {\n console.error(\"Image upload failed:\", error);\n }\n };\n\n useEffect(() => {\n return () => {\n if (eventSource) {\n eventSource.close();\n }\n };\n }, [eventSource]);\n\n return (\n \n {isNewChat && props.chat.chatType === 'language_learning' ? (\n setIsStorySubmitted(true)}\n chatId={props.chat.id}\n chatStory={props.chat.chatStory}\n />\n )}\n\n {props.chat.chatType !== 'map_explorer' && !isNewChat && !isStorySubmitted && (\n
\n )}\n \n {!targetLanguage && (\n setInput(prompt)}\n />\n )}\n
\n ) : isNewChat && !isStorySubmitted && props.chat.chatType !== 'language_learning' ? (\n \n
\n )}\n\n {targetLanguage && !learningMode && (\n What language would you like to learn?
\n\n {languages.map((lang) => (\n setTargetLanguage(lang)}\n className=\"p-4 text-lg rounded-lg border-2 hover:border-blue-500 hover:bg-blue-50 transition-colors\n flex items-center justify-center space-x-2\"\n >\n {lang.name}\n \n ))}\n
\n \n
\n )}\n\n {targetLanguage && learningMode && (\n What would you like to do?
\n\n {languageModes.map((mode) => (\n setLearningMode(mode)}\n className=\"p-6 text-lg rounded-lg border-2 hover:border-blue-500 hover:bg-blue-50 transition-colors\n flex items-center justify-center space-x-3\"\n >\n {mode.icon}\n {mode.label}\n \n ))}\n
\n \n
\n ) : null}\n\n Choose a subject:
\n\n {regularSubjects.map((sub) => (\n setSubject(sub)}\n className={`px-4 py-2 rounded ${\n subject === sub\n ? \"bg-blue-500 text-white\"\n : \"bg-gray-200 text-gray-800\"\n }`}\n >\n {sub}\n \n ))}\n
\n \n {isNewChat && !isStorySubmitted ? (\n
\n\n {!props.readOnly &&\n props.chat.chatType !== \"story_telling\" &&\n !isStorySubmitted && (\n \n {props.chat.chatType === 'language_learning'\n ? (!targetLanguage\n ? \"Choose a language to start learning!\"\n : !learningMode\n ? \"Select what you'd like to practice!\"\n : \"Pick a prompt to start chatting or type your own!\")\n : (subject\n ? \"Type your message to start the chat!\"\n : \"Select a subject and start your chat!\")}\n
\n ) : (\n messages.map((message, index) => (\n \n
\n )}\n \n \n Start A New Chat\n \n
\n )}\n \n {props.chat.chatType === \"story_telling\" ? (\n setIsStorySubmitted(true)} \n chatId={props.chat.id}\n chatStory={props.chat.chatStory} \n />\n ) : (\n
\n );\n};\n\nChat.propTypes = {\n chatKey: PropTypes.number,\n name: PropTypes.string,\n chat: PropTypes.shape({\n id: PropTypes.number.isRequired,\n chatType: PropTypes.string.isRequired,\n messages: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n role: PropTypes.string.isRequired,\n content: PropTypes.string.isRequired,\n image_url: PropTypes.string,\n })\n ).isRequired,\n chatStory: PropTypes.shape({\n id: PropTypes.number.isRequired,\n story: PropTypes.string, // It can be null initially\n images: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n role: PropTypes.string,\n imageUrl: PropTypes.string.isRequired,\n imagePrompt: PropTypes.string.isRequired,\n })\n ).isRequired,\n prompt: PropTypes.string.isRequired,\n }),\n }).isRequired,\n};\n\nexport default Chat;\n","import React, { useState } from 'react';\nimport axios from 'axios';\nimport Spinner from './Spinner';\n\nconst ImageCreationComponent = ({ chat, formToken, user }) => {\n const [prompt, setPrompt] = useState('');\n const [style, setStyle] = useState('cartoon');\n const [difficulty, setDifficulty] = useState('beginner');\n const [layout, setLayout] = useState('1:1');\n const [generatedImage, setGeneratedImage] = useState(null);\n const [loading, setLoading] = useState(false);\n const [avatarSet, setAvatarSet] = useState(false);\n const [backgroundSet, setBackgroundSet] = useState(false);\n const [chatImageId, setChatImageId] = useState(null);\n const [isPublic, setIsPublic] = useState(false);\n\n const isColoringPage = chat.chatType === 'coloring_page';\n const isAvatar = chat.chatType === 'avatar_creation';\n\n const createImage = async () => {\n setLoading(true);\n\n try {\n const options = isColoringPage\n ? { difficulty }\n : { style, layout: isAvatar ? '1:1' : layout };\n\n const response = await axios.post(\n `/api/v1/chats/${chat.id}/create_image_from_prompt`,\n {\n message: prompt,\n options,\n },\n {\n headers: {\n Authorization: `Bearer ${formToken}`,\n },\n }\n );\n\n setGeneratedImage(response.data.imageUrl);\n setChatImageId(response.data.id);\n setIsPublic(response.data.public);\n } catch (error) {\n console.error(\"Error creating image:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const setAsAvatar = async () => {\n try {\n const payload = { user: { avatar_id: chatImageId } };\n await axios.patch(\n `/api/v1/users/${user.id}.json`,\n payload,\n {\n headers: {\n Authorization: `Bearer ${formToken}`,\n 'Content-Type': 'application/json',\n },\n }\n );\n setAvatarSet(true);\n } catch (error) {\n console.error(\"Error setting avatar:\", error);\n }\n };\n\n const setAsBackground = async () => {\n try {\n const payload = { user: { background_id: chatImageId } };\n await axios.patch(\n `/api/v1/users/${user.id}.json`,\n payload,\n {\n headers: {\n Authorization: `Bearer ${formToken}`,\n 'Content-Type': 'application/json',\n },\n }\n );\n setBackgroundSet(true);\n } catch (error) {\n console.error(\"Error setting background:\", error);\n }\n };\n\n const toggleShareOnTYB = async () => {\n try {\n const response = await axios.patch(\n `/api/v1/chat_images/${chatImageId}.json`,\n { chat_image: { public: !isPublic } },\n {\n headers: {\n Authorization: `Bearer ${formToken}`,\n 'Content-Type': 'application/json'\n },\n }\n );\n setIsPublic(response.data.chat_image.public);\n } catch (error) {\n console.error(\"Error toggling image visibility:\", error);\n }\n };\n\n const downloadImage = () => {\n const link = document.createElement('a');\n link.href = generatedImage;\n link.download = 'tyb_generated_image.png';\n link.click();\n };\n\n return (\n \n {messages.map((message, messageIndex) => (\n
\n )}\n {!props.readOnly &&\n props.chat.chatType !== \"story_telling\" &&\n !isStorySubmitted ? (\n \n
\n );\n};\n\nexport default ImageCreationComponent;","import { useState, useEffect, useRef } from 'react';\nimport axios from 'axios';\n\nconst useInfiniteImageLoad = (initialImages, totalCount, formToken) => {\n const [images, setImages] = useState(initialImages);\n const [page, setPage] = useState(2);\n const [loading, setLoading] = useState(false);\n const [hasMore, setHasMore] = useState(initialImages.length < totalCount);\n const observerRef = useRef();\n\n useEffect(() => {\n if (observerRef.current) observerRef.current.disconnect();\n\n const observer = new IntersectionObserver(\n (entries) => {\n const entry = entries[0];\n if (entry.isIntersecting && hasMore && !loading) {\n loadMoreImages();\n }\n },\n { threshold: 1.0 }\n );\n\n const target = document.getElementById(\"loading-element\");\n if (target) observer.observe(target);\n\n observerRef.current = observer;\n return () => observer.disconnect();\n }, [hasMore, loading]);\n\n const loadMoreImages = async () => {\n if (loading || !hasMore) return;\n\n setLoading(true);\n try {\n const response = await axios.get(\"/chat_images.json\", {\n params: { page },\n headers: {\n Authorization: `Bearer ${formToken}`,\n },\n });\n\n if (response.data.images.length > 0) {\n setImages((prevImages) => [...prevImages, ...response.data.images]);\n setPage((prevPage) => prevPage + 1);\n }\n\n if (!response.data.next_page || images.length >= totalCount) {\n setHasMore(false);\n }\n } catch (error) {\n console.error(\"Error loading more images:\", error);\n setHasMore(false);\n } finally {\n setLoading(false);\n }\n };\n\n return { images, loading, hasMore };\n};\n\nexport default useInfiniteImageLoad;","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport useInfiniteImageLoad from \"./useInfiniteImageLoad\";\n\nconst ImageGrid = ({ initialImages, totalCount, formToken, user, editType }) => {\n const { images: hookImages, loading, hasMore } = useInfiniteImageLoad(initialImages, totalCount, formToken);\n const [images, setImages] = useState(initialImages);\n\n useEffect(() => {\n setImages(hookImages);\n }, [hookImages]);\n\n const [completedImageId, setCompletedImageId] = useState(null);\n\n const handleSetAsAction = async (imageId) => {\n const payload = editType === 'avatar' ? { user: { avatar_id: imageId } } : { user: { background_id: imageId } };\n\n try {\n const response = await axios.patch(\n `/api/v1/users/${user.id}.json`,\n payload,\n {\n headers: {\n Authorization: `Bearer ${formToken}`,\n 'Content-Type': 'application/json',\n },\n }\n );\n setCompletedImageId(imageId);\n // Update the user object in the parent component if necessary\n } catch (error) {\n console.error(`Error setting ${editType}:`, error);\n }\n };\n\n const handleShareImage = async (imageId) => {\n try {\n const response = await axios.patch(\n `/api/v1/chat_images/${imageId}.json`,\n { chat_image: { public: !images.find(img => img.id === imageId).public } },\n {\n headers: {\n Authorization: `Bearer ${formToken}`,\n 'Content-Type': 'application/json'\n },\n }\n );\n \n // Assuming the response.data contains the updated image object\n const updatedImage = response.data.chat_image;\n // Update the images array, preserving existing data and updating only the changed fields\n setImages(prevImages => prevImages.map(img => \n img.id === updatedImage.id ? updatedImage : img\n ));\n } catch (error) {\n console.error(\"Error toggling image visibility:\", error);\n }\n };\n\n const downloadImage = (imageUrl) => {\n const link = document.createElement('a');\n link.href = imageUrl;\n link.download = 'downloaded_image.png';\n link.click();\n };\n\n return (\n \n {isColoringPage ? 'Create a Coloring Page' : isAvatar ? 'Create Your Avatar' : 'Create Your Image'}\n
\n\n\n {/* Left Column: Image Options or Loading Spinner */}\n
\n \n {loading ? (\n
\n\n {/* Right Column: Display Generated Image or Placeholder */}\n \n
\n ) : !generatedImage ? (\n \n ) : null}\n \n {generatedImage ? (\n
\n \n
\n ) : (\n Generated Image
\n\n \n Download Image\n \n {!isAvatar && (\n \n {backgroundSet ? 'Background Set' : 'Set as Background'}\n \n )}\n {isAvatar && (\n \n {avatarSet ? 'Avatar Set' : 'Set as Avatar'}\n \n )}\n \n {isPublic ? 'Hide Image' : 'Share On TYB'}\n \n
\n \n {loading ? 'Generating your image...' : 'Your image will appear here once generated.'}\n
\n )}\n \n
\n );\n};\n\nexport default ImageGrid;\n","import React, { useState, useCallback, useEffect } from 'react';\nimport axios from 'axios';\nimport { useInView } from 'react-intersection-observer';\n\nconst HeartIcon = ({ filled }) => (\n \n);\n\nconst Lightbox = ({ image, onClose }) => {\n return (\n \n {images.map((image) => (\n
\n {loading && \n \n 
\n \n
\n ))}\n \n handleSetAsAction(image.id)}\n className={`mt-2 px-4 py-2 rounded-lg uppercase ${\n completedImageId === image.id ? 'bg-gray-500 cursor-not-allowed' : 'bg-indigo-500 hover:bg-indigo-600'\n } text-white`}\n disabled={completedImageId === image.id}\n >\n {completedImageId === image.id ? `${editType} set` : `set as ${editType}`}\n \n )}\n {user.id === image.createdUser && image.role === 'assistant' && (\n handleShareImage(image.id)}\n className={`mt-2 mr-2 px-4 py-2 rounded-lg ${\n image.public ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-blue-500 hover:bg-blue-600'\n } text-white`}\n >\n {image.public ? 'Hide Image' : 'Share On TYB'}\n \n )}\n downloadImage(image.imageUrl)}\n className=\"bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 mt-2\"\n >\n Download Image\n \n
\n Created By {image.createdBy}
\n{image.created_at}
\n {editType && (\nLoading more images...
}\n {!hasMore && }\n {hasMore && (\n\n Scroll down for more images...\n
\n )}\n \n
\n );\n};\n\nconst ImagePlaceholder = () => (\n \n);\n\nconst ImageCell = React.memo(({ image, onClick, onHeartToggle, signedIn }) => {\n const [imageLoaded, setImageLoaded] = useState(false);\n\n if (!image) return \n \n
\n \n
\n {image.createdBy}
\n{image.created_at}
\n onClick(image)}>\n setImageLoaded(true)}\n loading=\"lazy\"\n />\n {imageLoaded && (\n
\n );\n});\n\nconst ImageMosaic = ({ initialImages, totalCount, formToken, signedIn }) => {\n const [images, setImages] = useState(initialImages || []);\n const [offset, setOffset] = useState(initialImages ? initialImages.length : 0);\n const [loading, setLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [selectedImage, setSelectedImage] = useState(null);\n\n const { ref, inView } = useInView({\n threshold: 0,\n });\n\n const loadMoreImages = useCallback(async () => {\n if (loading || !hasMore) return;\n\n setLoading(true);\n try {\n const response = await axios.get('/public_images.json', {\n params: { offset: offset, per_page: 12 },\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content\n }\n });\n\n const { chat_images, has_more } = response.data;\n \n if (chat_images && chat_images.length > 0) {\n setImages(prevImages => [...prevImages, ...chat_images]);\n setOffset(prevOffset => prevOffset + chat_images.length);\n setHasMore(has_more);\n } else {\n setHasMore(false);\n }\n } catch (error) {\n console.error('Error loading images:', error);\n setHasMore(false);\n } finally {\n setLoading(false);\n }\n }, [loading, hasMore, offset]);\n\n useEffect(() => {\n if (inView) {\n loadMoreImages();\n }\n }, [inView, loadMoreImages]);\n\n const openLightbox = useCallback((image) => {\n setSelectedImage(image);\n }, []);\n\n const closeLightbox = useCallback(() => {\n setSelectedImage(null);\n }, []);\n\n const handleHeartToggle = useCallback(async (e, imageId) => {\n e.stopPropagation();\n try {\n const response = await axios.post(`/api/v1/chat_images/${imageId}/toggle_like`, {}, {\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content\n }\n });\n if (response.status === 200) {\n const updatedImageData = response.data.chat_image;\n setImages(prevImages => prevImages.map(img => \n img.id === imageId ? { ...img, ...updatedImageData } : img\n ));\n }\n } catch (error) {\n console.error('Error toggling heart:', error);\n }\n }, []);\n\n return (\n \n
\n \n
\n )}\n \n 
\n
\n \n
\n {signedIn && (\n {image.createdBy}
\n{image.created_at}
\n onHeartToggle(e, image.id)}\n >\n
\n )}\n \n {image.likeCount}\n
\n \n
\n );\n};\n\nexport default React.memo(ImageMosaic);","import React, { useState, useEffect } from \"react\";\nimport { Elements } from \"@stripe/react-stripe-js\";\nimport { loadStripe } from \"@stripe/stripe-js\";\n\nconst stripePromise = loadStripe(process.env.STRIPE_PUBLISHABLE_KEY);\n\nconst StripeWrapper = ({ familyId, formToken, initialPriceId }) => {\n const [priceId, setPriceId] = useState(initialPriceId);\n const [clientSecret, setClientSecret] = useState(null);\n\n useEffect(() => {\n async function initializeCheckout() {\n try {\n const promotekitReferral = window.promotekit_referral || null;\n\n const response = await fetch(\"/subscriptions/create.json\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-CSRF-Token\": formToken,\n },\n body: JSON.stringify({\n price_id: priceId,\n family_id: familyId,\n promotekit_referral: promotekitReferral,\n }),\n });\n\n const data = await response.json();\n\n if (data.clientSecret) {\n setClientSecret(data.clientSecret);\n } else {\n console.error(\"No client secret returned from the backend\");\n }\n } catch (error) {\n console.error(\"Error fetching client secret:\", error);\n }\n }\n\n initializeCheckout();\n }, [priceId, familyId, formToken]);\n\n useEffect(() => {\n if (clientSecret && stripePromise) {\n stripePromise.then((stripe) => {\n stripe.initEmbeddedCheckout({\n clientSecret,\n }).then((checkout) => {\n checkout.mount(\"#checkout\");\n }).catch((error) => {\n console.error(\"Error initializing embedded checkout\", error);\n });\n });\n }\n }, [clientSecret]);\n\n const handlePriceChange = (newPriceId) => {\n setPriceId(newPriceId);\n };\n\n return (\n \n {images.map(image => (\n
\n {hasMore && (\n \n {loading ? 'Loading more images...' : 'Scroll down for more images...'}\n
\n )}\n {selectedImage && \n
\n \n {/* Example button for switching price plan */}\n \n\n {/* Example slider for adjusting donation */}\n handlePriceChange(`price_id_based_on_${e.target.value}`)}\n />\n
\n\n \n \n
\n );\n};\n\nWordList.propTypes = {\n wordList: PropTypes.shape({\n id: PropTypes.number.isRequired,\n languageName: PropTypes.string.isRequired,\n words: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n word_text: PropTypes.string.isRequired,\n // ... other word properties ...\n })),\n }).isRequired,\n initialUser: PropTypes.shape({\n wordsRemaining: PropTypes.number.isRequired,\n freemium: PropTypes.bool.isRequired,\n // ... other user properties ...\n }).isRequired,\n};\n\nexport default WordList;\n","import PropTypes from \"prop-types\";\nimport React, { useState, useEffect } from \"react\";\n\nconst specialCharacters = {\n es: ['á', 'é', 'í', 'ó', 'ú', 'ñ', 'ü', '¿', '¡'],\n fr: ['é', 'è', 'ê', 'ë', 'à', 'â', 'ô', 'û', 'ù', 'ï', 'ç'],\n de: ['ä', 'ö', 'ü', 'ß'],\n it: ['à', 'è', 'é', 'ì', 'ò', 'ù'],\n pt: ['á', 'â', 'ã', 'à', 'ç', 'é', 'ê', 'í', 'ó', 'ô', 'õ', 'ú'],\n nl: ['ij', 'á', 'é', 'í', 'ó', 'ú']\n};\n\nconst WordTest = ({ wordList }) => {\n const [words, setWords] = useState(wordList.words || []);\n const [currentWordIndex, setCurrentWordIndex] = useState(0);\n const [userAnswer, setUserAnswer] = useState(\"\");\n const [showResult, setShowResult] = useState(false);\n const [isCorrect, setIsCorrect] = useState(false);\n const [wrongAnswers, setWrongAnswers] = useState([]);\n const [earnedCoins, setEarnedCoins] = useState(0);\n const [hasSubmitted, setHasSubmitted] = useState(false);\n const [showWrongAnswersSummary, setShowWrongAnswersSummary] = useState(false);\n const [correctAnswers, setCorrectAnswers] = useState([]);\n const [retryMode, setRetryMode] = useState(false);\n\n const currentWord = words[currentWordIndex];\n const languageCode = wordList.language.toLowerCase();\n\n const handleSpecialCharacter = (char) => {\n setUserAnswer(prevAnswer => prevAnswer + char);\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (hasSubmitted) return;\n\n const correct = userAnswer.toLowerCase().trim() === currentWord.word_text.toLowerCase().trim();\n setIsCorrect(correct);\n setShowResult(true);\n setHasSubmitted(true);\n\n if (correct) {\n setCorrectAnswers(prev => [...prev, currentWord]);\n try {\n const response = await fetch('/api/v1/user_rewards/add_coin', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]')?.content,\n }\n });\n \n if (response.ok) {\n setEarnedCoins(prev => prev + 1);\n }\n } catch (error) {\n console.error('Error adding coin:', error);\n }\n } else {\n setWrongAnswers(prev => [...prev, {\n word: currentWord,\n userAnswer: userAnswer\n }]);\n }\n };\n\n const nextWord = () => {\n const isLastWord = currentWordIndex === words.length - 1;\n \n if (isLastWord && wrongAnswers.length > 0) {\n setShowWrongAnswersSummary(true);\n } else {\n setCurrentWordIndex((prevIndex) => (prevIndex + 1) % words.length);\n setUserAnswer(\"\");\n setShowResult(false);\n setHasSubmitted(false);\n }\n };\n\n const playAudio = (audioUrl, rate = 1) => {\n const audio = new Audio(audioUrl);\n audio.playbackRate = rate;\n audio.play();\n };\n\n const resetFullTest = () => {\n setWords(wordList.words || []);\n setCurrentWordIndex(0);\n setUserAnswer(\"\");\n setShowResult(false);\n setIsCorrect(false);\n setWrongAnswers([]);\n setCorrectAnswers([]);\n setEarnedCoins(0);\n setHasSubmitted(false);\n setShowWrongAnswersSummary(false);\n setRetryMode(false);\n };\n\n const retryWrongAnswers = () => {\n setWords(wrongAnswers.map(wa => wa.word));\n setCurrentWordIndex(0);\n setUserAnswer(\"\");\n setShowResult(false);\n setIsCorrect(false);\n setWrongAnswers([]);\n setHasSubmitted(false);\n setShowWrongAnswersSummary(false);\n setRetryMode(true);\n };\n\n if (showWrongAnswersSummary) {\n return (\n \n
\n\n {user.wordsRemaining > 0 ? (\n \n ) : (\n Language: {wordList.languageName}
\nYou have reached the maximum number of words for this week. Please upgrade to add more or wait until next week.
\n )}\n \n {user.freemium && (\nWords remaining: {user.wordsRemaining}
\n )}\n\n- \n {words.map((word) => (\n
- \n \n {word.word_text}\n\n\n {word.audioWordUrl && (\n\n\n \n\n )}\n {word.sentence && (\n\n\n
{word.sentence}
\n )}\n {word.audioSentenceUrl && (\n\n \n\n )}\n\n\n \n ))}\n
\n
\n );\n }\n\n return (\n \n
\n Test Complete!
\n\n You got {earnedCoins} out of {retryMode ? wrongAnswers.length : words.length} words correct!\n
\n\n\n
\n\n {wrongAnswers.length > 0 && (\n Words You Got Right:
\n\n {correctAnswers.map((correct, index) => (\n
\n \n playAudio(correct.audioWordUrl)}\n className=\"mt-2 px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600\"\n >\n Listen\n \n
\n ))}\n {correct.word_text}
\nContext: {correct.sentence}
\n\n
\n )}\n\n Words to Review:
\n\n {wrongAnswers.map((wrong, index) => (\n
\n \n playAudio(wrong.word.audioWordUrl)}\n className=\"mt-2 px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600\"\n >\n Listen Again\n \n
\n ))}\n Correct: {wrong.word.word_text}
\nYour answer: {wrong.userAnswer}
\nContext: {wrong.word.sentence}
\n\n \n Retry Incorrect Words\n \n \n Start New Test\n \n
\n \n
\n );\n};\n\nWordTest.propTypes = {\n wordList: PropTypes.shape({\n id: PropTypes.number.isRequired,\n language: PropTypes.string.isRequired,\n words: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n word_text: PropTypes.string.isRequired,\n sentence: PropTypes.string.isRequired,\n audioWordUrl: PropTypes.string.isRequired,\n audioSentenceUrl: PropTypes.string.isRequired,\n })),\n }).isRequired,\n};\n\nexport default WordTest;\n","import React, { useEffect } from 'react';\nimport LogRocket from 'logrocket';\n\nconst LogrocketWrapper = ({ user }) => {\n useEffect(() => {\n if (!window.LogRocketInitialized) {\n LogRocket.init('sgko6z/tyb');\n window.LogRocketInitialized = true;\n }\n \n if (user) {\n LogRocket.identify(user.id, {\n name: user.fullname,\n email: user.email\n });\n }\n }, [user]);\n\n return null;\n};\n\nexport default LogrocketWrapper;\n","import React, { useState, useEffect } from 'react'\n\nconst UsernameValidator = ({ onChange, currentUsername = '' }) => {\n const [username, setUsername] = useState(currentUsername)\n const [status, setStatus] = useState(null)\n const [isChecking, setIsChecking] = useState(false)\n\n useEffect(() => {\n const checkUsername = async () => {\n if (username.length < 3) {\n setStatus({ type: 'warning', message: 'Username must be at least 3 characters' })\n return\n }\n\n setIsChecking(true)\n try {\n const response = await fetch(`/users/check_username?username=${encodeURIComponent(username.toLowerCase())}`)\n const data = await response.json()\n\n if (data.valid) {\n setStatus({ type: 'success', message: 'This username is available! ✨' })\n onChange && onChange(username, true)\n } else {\n setStatus({ type: 'error', message: 'This username is already taken' })\n onChange && onChange(username, false)\n }\n } catch (error) {\n console.error('Error checking username:', error)\n setStatus({ type: 'error', message: 'Error checking username' })\n } finally {\n setIsChecking(false)\n }\n }\n\n const timeoutId = setTimeout(() => {\n if (username) checkUsername()\n }, 500)\n\n return () => clearTimeout(timeoutId)\n }, [username])\n\n const getStatusColor = () => {\n switch (status?.type) {\n case 'success': return 'text-green-600'\n case 'error': return 'text-red-600'\n case 'warning': return 'text-yellow-600'\n default: return ''\n }\n }\n\n return (\n \n
\n\n Language: {wordList.languageName}
\nWord: {currentWordIndex + 1} / {words.length}
\n\n
\n\n \n\n {showResult && (\n \n playAudio(currentWord.audioWordUrl)}\n className=\"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n Say Word\n \n playAudio(currentWord.audioWordUrl, 0.75)}\n className=\"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n Say Word Slowly\n \n
\n \n playAudio(currentWord.audioSentenceUrl)}\n className=\"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n Say Sentence\n \n playAudio(currentWord.audioSentenceUrl, 0.5)}\n className=\"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n Say Sentence Slowly\n \n
\n {currentWord.sentence && (\n \n {currentWord.sentence.replace(new RegExp(currentWord.word_text, 'gi'), '______')}\n
\n )}\n\n \n {currentWordIndex === words.length - 1 ? 'Finish Test' : 'Next Word'}\n \n
\n )}\n \n {isCorrect ? 'Correct!' : `Incorrect. The correct word is: ${currentWord.word_text}`}\n
\n\n setUsername(e.target.value)}\n placeholder=\"e.g., CuriousLearner22, MathWhiz2024\"\n className=\"rounded-lg border-gray-300 focus:ring-yellow-500 focus:border-yellow-500 w-full text-gray-900\"\n />\n {status && (\n
\n )\n}\n\nexport default UsernameValidator","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nconst MemoryForm = (props) => {\n const { memoryTypes, initialMemoryType, initialMemoryData, formAction, formMethod, csrfToken, cancelUrl, childName, isEditing } = props;\n const [memoryType, setMemoryType] = useState(initialMemoryType || memoryTypes[0][1]);\n const [memoryData, setMemoryData] = useState(initialMemoryData || '');\n \n const handleMemoryDataChange = (e) => {\n setMemoryData(e.target.value);\n };\n \n const hints = {\n math: \"Describe your child's relationship with math. Are they struggling with specific concepts like fractions or multiplication? Do they excel at certain areas? What approaches help them understand math better?\",\n science: \"Share your child's interests in science. Do they love space, animals, or experiments? Are there specific topics they're curious about or find challenging?\",\n history: \"Note your child's engagement with history. Are they fascinated by certain time periods or historical figures? Do they connect better with history through stories or visual timelines?\",\n language_arts: \"Describe your child's reading and writing abilities. What types of books do they enjoy? Are there specific grammar or vocabulary areas they find difficult?\",\n learning_style: \"How does your child learn best? Do they prefer visual demonstrations, hands-on activities, or verbal explanations? Do they need frequent breaks or prefer to focus for longer periods?\",\n interests: \"What are your child's hobbies, favorite characters, or topics they get excited about? This helps our AI use relevant examples that will engage them.\",\n strengths: \"What subjects or skills does your child excel at? What makes them proud of themselves?\",\n challenges: \"What areas does your child find difficult? Are there specific learning obstacles we should be aware of?\",\n anything: \"Share anything that would help our AI better understand how your child learns and what engages them. This could include interests, learning preferences, or specific needs.\"\n };\n \n const placeholders = {\n math: `For example: ${childName} struggles with fractions but enjoys geometry. They learn math concepts better when using visual aids and real-world examples.`,\n science: `For example: ${childName} is fascinated by dinosaurs and space exploration. They enjoy hands-on experiments but need help understanding scientific terminology.`,\n history: `For example: ${childName} loves learning about ancient Egypt and the Roman Empire. They remember historical events better when presented as stories about people.`,\n language_arts: `For example: ${childName} enjoys reading adventure books but struggles with writing longer essays. They have a strong vocabulary but need help with grammar.`,\n learning_style: `For example: ${childName} is a visual learner who benefits from diagrams and videos. They need frequent breaks during study sessions and prefer learning in a quiet environment.`,\n interests: `For example: ${childName} loves everything about dinosaurs, especially T-Rex and Triceratops. They also enjoy building with Legos and playing Minecraft.`,\n strengths: `For example: ${childName} has a great memory for facts and details. They're particularly good at mental math and creative storytelling.`,\n challenges: `For example: ${childName} finds it difficult to focus for long periods. They struggle with organizing their thoughts when writing and need extra help with spelling.`,\n anything: `For example: ${childName} loves dinosaurs.`\n };\n \n const questions = {\n math: `How does ${childName} feel about math? What concepts do they enjoy or struggle with?`,\n science: `What scientific topics interest ${childName}? How do they prefer to learn about science?`,\n history: `What historical periods or figures fascinate ${childName}? How do they best engage with history?`,\n language_arts: `What are ${childName}'s reading and writing habits? What types of books or writing activities do they enjoy?`,\n learning_style: `How does ${childName} learn most effectively? What environment or teaching approaches work best?`,\n interests: `What topics, activities, or characters does ${childName} get excited about?`,\n strengths: `What subjects or skills does ${childName} excel at? What makes them feel confident?`,\n challenges: `What areas does ${childName} find challenging? How can we better support their learning?`,\n anything: `What would help our AI better understand ${childName}'s unique learning style and interests?`\n };\n \n const handleMemoryTypeChange = (e) => {\n setMemoryType(e.target.value);\n };\n \n return (\n \n {isChecking ? (\n \n ) : null}\n {status.message}\n
\n )}\n \n
\n Username Info:
\n- \n
- This will be your display name in the learning world and on the leaderboard \n
- You can also use this username to sign in to your account \n
- At least 3 characters long \n
- Can contain letters, numbers, and underscores \n
- Cannot contain spaces or special characters \n
- Will be visible if sharing content \n
\n
\n );\n};\n\nMemoryForm.propTypes = {\n memoryTypes: PropTypes.array.isRequired,\n initialMemoryType: PropTypes.string,\n initialMemoryData: PropTypes.string,\n formAction: PropTypes.string.isRequired,\n formMethod: PropTypes.string.isRequired,\n csrfToken: PropTypes.string.isRequired,\n cancelUrl: PropTypes.string.isRequired,\n childName: PropTypes.string.isRequired,\n isEditing: PropTypes.bool\n};\n\nMemoryForm.defaultProps = {\n isEditing: false,\n initialMemoryData: \"\"\n};\n\nexport default MemoryForm; ","import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\n// Constants\nconst CHARACTER_SIZE = 60;\nconst GEM_SIZE = 30;\nconst ENEMY_SIZE = 40;\n\n// Static images\nconst DEFAULT_AVATAR = new Image();\nDEFAULT_AVATAR.src = '/tybee-circle.png';\n\nconst GEM_IMAGE = new Image();\nGEM_IMAGE.src = '/gem.png';\n\nconst GameCanvas = ({\n canvasSize,\n position,\n isMoving,\n wobbleOffset,\n avatarImage,\n modules,\n activeModule,\n getModulePositions,\n gems,\n collectedGems,\n enemies,\n enemySpeedMultiplier,\n isInvulnerable\n}) => {\n const canvasRef = useRef(null);\n\n // Ensure consistent canvas dimensions\n const canvasWidth = 1200;\n const canvasHeight = 700;\n\n // Calculate current multiplier based on collected gems\n const calculateMultiplier = () => {\n if (collectedGems < 10) return 1;\n return 1 + Math.floor(collectedGems / 10);\n };\n\n // Draw the game world\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const ctx = canvas.getContext('2d');\n if (!ctx) return;\n\n // Set canvas dimensions explicitly\n canvas.width = canvasWidth;\n canvas.height = canvasHeight;\n\n // Clear the canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n // Draw background elements (optional)\n // ...\n\n // Draw modules\n const modulePositions = getModulePositions();\n modulePositions.forEach((modulePos, index) => {\n const isRewardsModule = modulePos.isRewards;\n\n // Skip regular modules if we're past the available modules\n if (!isRewardsModule && index >= modules.length) return;\n\n // Skip rewards module for non-authenticated users\n if (isRewardsModule && !avatarImage) return;\n\n // Draw module platform\n ctx.beginPath();\n ctx.arc(modulePos.x, modulePos.y, isRewardsModule ? 40 : 50, 0, Math.PI * 2);\n\n // Different colors for different modules with gradient\n const colors = [\n ['#4299e1', '#3182ce'], // blue\n ['#48bb78', '#38a169'], // green\n ['#ed8936', '#dd6b20'], // orange\n ['#ed64a6', '#d53f8c'], // pink\n ['#667eea', '#5a67d8'], // indigo\n ['#38b2ac', '#319795'], // teal\n ['#f6e05e', '#d69e2e'] // yellow/gold for rewards\n ];\n\n const colorIndex = isRewardsModule ? 6 : (index % 6);\n\n const gradient = ctx.createRadialGradient(\n modulePos.x, modulePos.y, 10,\n modulePos.x, modulePos.y, isRewardsModule ? 40 : 50\n );\n gradient.addColorStop(0, colors[colorIndex][0]);\n gradient.addColorStop(1, colors[colorIndex][1]);\n\n ctx.fillStyle = gradient;\n ctx.fill();\n\n // Glow effect for active module\n if (activeModule === index) {\n ctx.shadowBlur = 15;\n ctx.shadowColor = colors[colorIndex][0];\n }\n\n ctx.lineWidth = activeModule === index ? 4 : 2;\n ctx.strokeStyle = activeModule === index ? '#ffffff' : 'rgba(255, 255, 255, 0.7)';\n ctx.stroke();\n ctx.shadowBlur = 0;\n\n // Draw module text - simplified, cleaner approach\n ctx.fillStyle = '#ffffff';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n\n if (isRewardsModule) {\n // Draw rewards module label\n ctx.font = 'bold 14px Arial';\n ctx.fillText(\"Rewards\", modulePos.x, modulePos.y);\n\n // Draw a small coin icon\n ctx.font = '16px Arial';\n ctx.fillText(\"🪙\", modulePos.x, modulePos.y - 20);\n } else {\n // Get module title from the modules data\n const moduleTitle = modules[index].title;\n\n // Process the title to fit in the circle\n let displayTitle = moduleTitle;\n\n // If title has multiple words, try to use just the first word if it's too long\n if (moduleTitle.length > 10 && moduleTitle.includes(' ')) {\n const firstWord = moduleTitle.split(' ')[0];\n displayTitle = firstWord.length > 3 ? firstWord : moduleTitle.substring(0, 10);\n }\n // If still too long, truncate\n else if (moduleTitle.length > 10) {\n displayTitle = moduleTitle.substring(0, 8) + '..';\n }\n\n // Draw the module label\n ctx.font = 'bold 16px Arial';\n ctx.fillText(displayTitle, modulePos.x, modulePos.y);\n\n // Add a small icon or indicator for premium modules\n if (modules[index].premium) {\n ctx.font = '12px Arial';\n ctx.fillText('✦', modulePos.x, modulePos.y + 20);\n }\n }\n });\n\n // Draw gems\n gems.forEach(gem => {\n ctx.save();\n ctx.translate(gem.x, gem.y);\n ctx.rotate(gem.rotation);\n\n // Try to draw the jam image\n if (GEM_IMAGE.complete && GEM_IMAGE.naturalHeight !== 0) {\n ctx.drawImage(\n GEM_IMAGE,\n -GEM_SIZE/2,\n -GEM_SIZE/2,\n GEM_SIZE,\n GEM_SIZE\n );\n }\n // Fallback to the original diamond shape if both images fail\n else {\n // Create a diamond/gem shape\n const gemSize = GEM_SIZE / 2;\n ctx.beginPath();\n ctx.moveTo(0, -gemSize);\n ctx.lineTo(gemSize, 0);\n ctx.lineTo(0, gemSize);\n ctx.lineTo(-gemSize, 0);\n ctx.closePath();\n\n // Create a gradient for the gem\n const gemGradient = ctx.createLinearGradient(-gemSize, -gemSize, gemSize, gemSize);\n gemGradient.addColorStop(0, '#9f7aea'); // Purple\n gemGradient.addColorStop(0.5, '#667eea'); // Indigo\n gemGradient.addColorStop(1, '#4299e1'); // Blue\n\n ctx.fillStyle = gemGradient;\n ctx.fill();\n\n // Add a stroke\n ctx.lineWidth = 1;\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';\n ctx.stroke();\n }\n\n // Add a sparkle effect regardless of which rendering method was used\n const sparkleTime = Date.now() / 200;\n if (Math.sin(sparkleTime + gem.id) > 0.7) {\n ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';\n ctx.beginPath();\n ctx.arc(0, 0, 3, 0, Math.PI * 2);\n ctx.fill();\n }\n\n ctx.restore();\n });\n\n // Draw enemies\n enemies.forEach(enemy => {\n if (!enemy.active) return;\n\n ctx.save();\n\n // Draw enemy body\n ctx.beginPath();\n ctx.arc(enemy.x, enemy.y, ENEMY_SIZE/2, 0, Math.PI * 2);\n\n // Create gradient for enemy - color intensity based on speed\n const gradient = ctx.createRadialGradient(\n enemy.x, enemy.y, ENEMY_SIZE/4,\n enemy.x, enemy.y, ENEMY_SIZE/2\n );\n\n // Make enemies glow more intensely as they get faster\n const baseColor = enemy.color;\n const glowIntensity = Math.min(1, (enemySpeedMultiplier - 1) * 2); // 0 to 1 based on speed\n\n // Mix the base color with a brighter color based on speed\n gradient.addColorStop(0, baseColor);\n gradient.addColorStop(1, glowIntensity > 0.3 ? '#ff0000' : '#000');\n\n ctx.fillStyle = gradient;\n ctx.fill();\n\n // Add a glow effect for faster enemies\n if (enemySpeedMultiplier > 1.5) {\n ctx.shadowBlur = 10 * (enemySpeedMultiplier - 1);\n ctx.shadowColor = 'rgba(255, 0, 0, 0.7)';\n ctx.stroke();\n ctx.shadowBlur = 0;\n }\n\n // Draw enemy eyes\n ctx.fillStyle = '#fff';\n\n // Calculate eye positions based on direction to player\n const dx = position.x - enemy.x;\n const dy = position.y - enemy.y;\n const angle = Math.atan2(dy, dx);\n\n const eyeOffsetX = Math.cos(angle) * ENEMY_SIZE/4;\n const eyeOffsetY = Math.sin(angle) * ENEMY_SIZE/4;\n\n // Left eye\n ctx.beginPath();\n ctx.arc(\n enemy.x + eyeOffsetX - Math.sin(angle) * ENEMY_SIZE/5,\n enemy.y + eyeOffsetY + Math.cos(angle) * ENEMY_SIZE/5,\n ENEMY_SIZE/8, 0, Math.PI * 2\n );\n ctx.fill();\n\n // Right eye\n ctx.beginPath();\n ctx.arc(\n enemy.x + eyeOffsetX + Math.sin(angle) * ENEMY_SIZE/5,\n enemy.y + eyeOffsetY - Math.cos(angle) * ENEMY_SIZE/5,\n ENEMY_SIZE/8, 0, Math.PI * 2\n );\n ctx.fill();\n\n ctx.restore();\n });\n\n // Draw character shadow\n const drawX = position.x;\n const drawY = position.y + wobbleOffset;\n\n // Draw oval shadow under character\n ctx.beginPath();\n const shadowWidth = CHARACTER_SIZE/2 * (1 + Math.abs(wobbleOffset/20));\n const shadowHeight = CHARACTER_SIZE/6 * (1 - Math.abs(wobbleOffset/20));\n ctx.ellipse(position.x, position.y + CHARACTER_SIZE/2 - 5, shadowWidth, shadowHeight, 0, 0, Math.PI * 2);\n ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';\n ctx.fill();\n\n // Draw character with invulnerability effect if needed\n if (isInvulnerable) {\n // Flashing shield effect\n const shieldOpacity = 0.3 + Math.sin(Date.now() / 100) * 0.2;\n ctx.beginPath();\n ctx.arc(position.x, position.y, CHARACTER_SIZE/2 + 10, 0, Math.PI * 2);\n ctx.fillStyle = `rgba(100, 149, 237, ${shieldOpacity})`;\n ctx.fill();\n }\n\n // Draw character\n if (avatarImage) {\n // Draw avatar image with circular crop and wobble\n ctx.save();\n ctx.beginPath();\n ctx.arc(drawX, drawY, CHARACTER_SIZE/2, 0, Math.PI * 2);\n ctx.closePath();\n ctx.clip();\n\n ctx.drawImage(\n avatarImage,\n drawX - CHARACTER_SIZE/2,\n drawY - CHARACTER_SIZE/2,\n CHARACTER_SIZE,\n CHARACTER_SIZE\n );\n\n ctx.restore();\n\n // Draw border around avatar\n ctx.beginPath();\n ctx.arc(drawX, drawY, CHARACTER_SIZE/2, 0, Math.PI * 2);\n ctx.lineWidth = 3;\n ctx.strokeStyle = isInvulnerable ? '#4299e1' : '#3867d6';\n ctx.stroke();\n } else {\n // Use the static default avatar if available\n if (DEFAULT_AVATAR.complete && DEFAULT_AVATAR.naturalHeight !== 0) {\n ctx.save();\n ctx.beginPath();\n ctx.arc(drawX, drawY, CHARACTER_SIZE/2, 0, Math.PI * 2);\n ctx.closePath();\n ctx.clip();\n\n ctx.drawImage(\n DEFAULT_AVATAR,\n drawX - CHARACTER_SIZE/2,\n drawY - CHARACTER_SIZE/2,\n CHARACTER_SIZE,\n CHARACTER_SIZE\n );\n\n ctx.restore();\n\n // Draw border around avatar\n ctx.beginPath();\n ctx.arc(drawX, drawY, CHARACTER_SIZE/2, 0, Math.PI * 2);\n ctx.lineWidth = 3;\n ctx.strokeStyle = isInvulnerable ? '#4299e1' : '#3867d6';\n ctx.stroke();\n } else {\n // Fallback to circle if image not loaded\n ctx.beginPath();\n ctx.arc(drawX, drawY, CHARACTER_SIZE/2, 0, Math.PI * 2);\n ctx.fillStyle = isInvulnerable ? '#4299e1' : '#4b7bec';\n ctx.fill();\n ctx.lineWidth = 3;\n ctx.strokeStyle = isInvulnerable ? '#4299e1' : '#3867d6';\n ctx.stroke();\n\n // Draw character face\n ctx.fillStyle = '#ffffff';\n ctx.beginPath();\n ctx.arc(drawX - 10, drawY - 5, 6, 0, Math.PI * 2); // Left eye\n ctx.arc(drawX + 10, drawY - 5, 6, 0, Math.PI * 2); // Right eye\n ctx.fill();\n\n ctx.beginPath();\n ctx.arc(drawX, drawY + 10, 10, 0, Math.PI); // Smile\n ctx.stroke();\n }\n }\n\n // Draw gem counter and multiplier\n ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';\n ctx.fillRect(10, 10, 120, 40);\n\n // Draw gem count\n ctx.fillStyle = '#9f7aea'; // Purple color for gems\n ctx.font = 'bold 20px Arial';\n ctx.textAlign = 'left';\n ctx.textBaseline = 'middle';\n ctx.fillText(`Gems: ${collectedGems}`, 20, 30);\n\n // Draw high score in the middle top\n ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';\n ctx.fillRect(canvas.width/2 - 150, 10, 300, 40);\n\n // Get the high score from localStorage or use current score if higher\n const storedHighScore = parseInt(localStorage.getItem('tyb_high_score') || '0');\n const currentHighScore = Math.max(storedHighScore, collectedGems);\n\n // Update localStorage if we have a new high score\n if (collectedGems > storedHighScore) {\n localStorage.setItem('tyb_high_score', collectedGems.toString());\n }\n\n // Draw trophy icon\n ctx.fillStyle = '#f6e05e'; // Gold color for trophy\n ctx.beginPath();\n const trophyX = canvas.width/2 - 70;\n const trophyY = 30;\n // Trophy cup\n ctx.moveTo(trophyX - 8, trophyY - 8);\n ctx.lineTo(trophyX + 8, trophyY - 8);\n ctx.lineTo(trophyX + 6, trophyY);\n ctx.lineTo(trophyX - 6, trophyY);\n ctx.closePath();\n ctx.fill();\n // Trophy base\n ctx.fillRect(trophyX - 3, trophyY, 6, 8);\n ctx.fillRect(trophyX - 6, trophyY + 8, 12, 2);\n\n // Draw high score text\n ctx.fillStyle = '#f6e05e'; // Gold color for high score\n ctx.font = 'bold 20px Arial';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText(`High Score: ${currentHighScore}`, canvas.width/2 + 30, 30);\n\n // Draw leaderboard button at bottom left\n ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';\n ctx.fillRect(20, canvas.height - 60, 180, 40);\n\n // Draw trophy icon for leaderboard\n ctx.fillStyle = '#f6e05e'; // Gold color for trophy\n ctx.beginPath();\n const leaderboardTrophyX = 40;\n const leaderboardTrophyY = canvas.height - 40;\n // Trophy cup\n ctx.moveTo(leaderboardTrophyX - 8, leaderboardTrophyY - 8);\n ctx.lineTo(leaderboardTrophyX + 8, leaderboardTrophyY - 8);\n ctx.lineTo(leaderboardTrophyX + 6, leaderboardTrophyY);\n ctx.lineTo(leaderboardTrophyX - 6, leaderboardTrophyY);\n ctx.closePath();\n ctx.fill();\n // Trophy base\n ctx.fillRect(leaderboardTrophyX - 3, leaderboardTrophyY, 6, 8);\n ctx.fillRect(leaderboardTrophyX - 6, leaderboardTrophyY + 8, 12, 2);\n\n // Draw leaderboard text\n ctx.fillStyle = '#9f7aea'; // Purple color for leaderboard\n ctx.font = 'bold 16px Arial';\n ctx.textAlign = 'left';\n ctx.textBaseline = 'middle';\n ctx.fillText('View Leaderboard', 60, canvas.height - 40);\n\n // Update click handler for leaderboard\n canvas.onclick = (e) => {\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n\n // Check if click is within the leaderboard button area\n if (x >= 20 && x <= 200 && y >= canvas.height - 60 && y <= canvas.height - 20) {\n window.location.href = '/game_leaderboard';\n }\n };\n\n // Draw multiplier if applicable\n const multiplier = calculateMultiplier();\n if (multiplier > 1) {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';\n ctx.fillRect(140, 10, 140, 40);\n\n ctx.fillStyle = '#f6e05e'; // Gold color for multiplier\n ctx.font = 'bold 20px Arial';\n ctx.textAlign = 'left';\n ctx.textBaseline = 'middle';\n ctx.fillText(`${multiplier}x Coins!`, 150, 30);\n }\n\n }, [canvasSize, position, isMoving, wobbleOffset, avatarImage, modules, activeModule, getModulePositions, gems, collectedGems, enemies, enemySpeedMultiplier, isInvulnerable]);\n\n return (\n \n
\n \n \n What would you like to tell us about {childName}?
\n{questions[memoryType] || questions.anything}
\n\n
\n )}\n \n );\n};\n\nInstructions.propTypes = {\n currentUser: PropTypes.object\n};\n\nexport default Instructions;","import { useState, useEffect, useRef, useCallback } from 'react';\n\n// Constants\nconst SPEED = 5;\nconst CHARACTER_SIZE = 60;\nconst GEM_SIZE = 30;\nconst GEM_SPEED = 2;\nconst GEM_COUNT = 5;\nconst GEM_COLLECTION_DISTANCE = 40;\nconst ENEMY_SIZE = 40;\nconst INITIAL_ENEMY_COUNT = 1; // Start with just one enemy\nconst GEMS_PER_NEW_ENEMY = 5; // Add a new enemy every 5 gems\nconst BASE_ENEMY_SPEED = 1.5;\nconst ENEMY_SPEED_INCREMENT = 0.1; // Speed increase per gem collected\nconst MAX_ENEMY_SPEED = 4.0; // Cap on enemy speed\nconst ENEMY_CATCH_DISTANCE = 50;\nconst ENEMY_RESPAWN_TIME = 3000; // 3 seconds\n\nexport const useGameState = () => {\n const [position, setPosition] = useState({ x: 400, y: 300 });\n const [keys, setKeys] = useState({});\n const [canvasSize, setCanvasSize] = useState({ width: 800, height: 600 });\n const [isMoving, setIsMoving] = useState(false);\n const [wobbleOffset, setWobbleOffset] = useState(0);\n const [gems, setGems] = useState([]);\n const [collectedGems, setCollectedGems] = useState(0);\n const [enemies, setEnemies] = useState([]);\n const [activeEnemyCount, setActiveEnemyCount] = useState(INITIAL_ENEMY_COUNT);\n const [enemySpeedMultiplier, setEnemySpeedMultiplier] = useState(1.0);\n const [isInvulnerable, setIsInvulnerable] = useState(false);\n const lastMoveTimeRef = useRef(0);\n const animationFrameRef = useRef(0);\n\n // Initialize gems and enemies when canvas size changes\n useEffect(() => {\n if (canvasSize.width === 0 || canvasSize.height === 0) return;\n\n // Initialize gems\n const newGems = [];\n for (let i = 0; i < GEM_COUNT; i++) {\n newGems.push({\n id: i,\n x: Math.random() * (canvasSize.width - GEM_SIZE * 2) + GEM_SIZE,\n y: Math.random() * (canvasSize.height - GEM_SIZE * 2) + GEM_SIZE,\n vx: (Math.random() - 0.5) * GEM_SPEED * 2,\n vy: (Math.random() - 0.5) * GEM_SPEED * 2,\n rotation: 0,\n rotationSpeed: (Math.random() * 0.05 + 0.03) * (Math.random() < 0.5 ? -1 : 1) // Faster rotation, random direction\n });\n }\n setGems(newGems);\n\n // Initialize enemies with just the initial count\n const newEnemies = [];\n for (let i = 0; i < INITIAL_ENEMY_COUNT; i++) {\n newEnemies.push(createEnemy(i, canvasSize));\n }\n setEnemies(newEnemies);\n }, [canvasSize]);\n\n // Helper function to create a new enemy\n const createEnemy = (id, canvasSize, isActive = true) => {\n // Place enemies at the edges of the screen\n const edge = Math.floor(Math.random() * 4); // 0: top, 1: right, 2: bottom, 3: left\n let x, y;\n\n switch (edge) {\n case 0: // top\n x = Math.random() * canvasSize.width;\n y = -ENEMY_SIZE;\n break;\n case 1: // right\n x = canvasSize.width + ENEMY_SIZE;\n y = Math.random() * canvasSize.height;\n break;\n case 2: // bottom\n x = Math.random() * canvasSize.width;\n y = canvasSize.height + ENEMY_SIZE;\n break;\n case 3: // left\n x = -ENEMY_SIZE;\n y = Math.random() * canvasSize.height;\n break;\n }\n\n // Generate a color based on the enemy ID\n const colors = ['#e53e3e', '#dd6b20', '#805ad5', '#38a169', '#3182ce', '#d53f8c', '#9f7aea', '#667eea'];\n const colorIndex = id % colors.length;\n\n return {\n id,\n x,\n y,\n baseSpeed: BASE_ENEMY_SPEED * (0.8 + Math.random() * 0.4), // Slight speed variation\n color: colors[colorIndex],\n active: isActive,\n wiggle: Math.random() * Math.PI * 2 // Random starting phase for wiggle\n };\n };\n\n // Update active enemy count based on collected gems\n useEffect(() => {\n const newActiveCount = INITIAL_ENEMY_COUNT + Math.floor(collectedGems / GEMS_PER_NEW_ENEMY);\n\n if (newActiveCount !== activeEnemyCount) {\n setActiveEnemyCount(newActiveCount);\n\n // Check if we need to add more enemies\n setEnemies(prevEnemies => {\n let updatedEnemies = [...prevEnemies];\n\n // If we need more enemies than we currently have, create new ones\n if (newActiveCount > updatedEnemies.length) {\n const enemiesToAdd = newActiveCount - updatedEnemies.length;\n\n for (let i = 0; i < enemiesToAdd; i++) {\n const newEnemyId = updatedEnemies.length;\n updatedEnemies.push(createEnemy(newEnemyId, canvasSize));\n }\n }\n // Otherwise, activate existing inactive enemies\n else {\n updatedEnemies = updatedEnemies.map((enemy, index) => {\n if (index < newActiveCount && !enemy.active && !isInvulnerable) {\n // Reposition at a random edge\n const newEnemy = createEnemy(enemy.id, canvasSize);\n return {\n ...enemy,\n x: newEnemy.x,\n y: newEnemy.y,\n active: true\n };\n }\n return enemy;\n });\n }\n\n return updatedEnemies;\n });\n }\n }, [collectedGems, activeEnemyCount, canvasSize, isInvulnerable]);\n\n // Handle key down event\n const handleKeyDown = useCallback((e) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'w', 'a', 's', 'd'].includes(e.key)) {\n e.preventDefault();\n setKeys((prevKeys) => ({ ...prevKeys, [e.key]: true }));\n setIsMoving(true);\n lastMoveTimeRef.current = Date.now();\n }\n }, []);\n\n // Handle key up event\n const handleKeyUp = useCallback((e) => {\n setKeys((prevKeys) => ({ ...prevKeys, [e.key]: false }));\n\n // Check if any movement keys are still pressed\n setTimeout(() => {\n const anyMovementKeyPressed = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'w', 'a', 's', 'd']\n .some(key => keys[key]);\n\n if (!anyMovementKeyPressed) {\n setIsMoving(false);\n }\n }, 10);\n }, [keys]);\n\n // Handle character movement, gem collection, and enemy movement\n useEffect(() => {\n const gameLoop = setInterval(() => {\n // Update player position\n setPosition((prevPos) => {\n let newX = prevPos.x;\n let newY = prevPos.y;\n let moved = false;\n\n if (keys['ArrowUp'] || keys['w']) {\n newY -= SPEED;\n moved = true;\n }\n if (keys['ArrowDown'] || keys['s']) {\n newY += SPEED;\n moved = true;\n }\n if (keys['ArrowLeft'] || keys['a']) {\n newX -= SPEED;\n moved = true;\n }\n if (keys['ArrowRight'] || keys['d']) {\n newX += SPEED;\n moved = true;\n }\n\n // Update last move time if character moved\n if (moved) {\n lastMoveTimeRef.current = Date.now();\n } else if (Date.now() - lastMoveTimeRef.current > 100) {\n setIsMoving(false);\n }\n\n // Boundary checks\n newX = Math.max(CHARACTER_SIZE/2, Math.min(canvasSize.width - CHARACTER_SIZE/2, newX));\n newY = Math.max(CHARACTER_SIZE/2, Math.min(canvasSize.height - CHARACTER_SIZE/2, newY));\n\n return { x: newX, y: newY };\n });\n\n // Update gems\n setGems(prevGems => {\n let gemsCollected = 0;\n\n const updatedGems = prevGems.map(gem => {\n // Check if player collected this gem\n const dx = position.x - gem.x;\n const dy = position.y - gem.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n\n if (distance < GEM_COLLECTION_DISTANCE) {\n gemsCollected++;\n\n // Increase enemy speed when a gem is collected\n setEnemySpeedMultiplier(prev => {\n const newMultiplier = prev + ENEMY_SPEED_INCREMENT;\n // Cap the speed multiplier to prevent enemies from becoming too fast\n return Math.min(newMultiplier, MAX_ENEMY_SPEED / BASE_ENEMY_SPEED);\n });\n\n // Respawn gem at a random position\n return {\n ...gem,\n x: Math.random() * (canvasSize.width - GEM_SIZE * 2) + GEM_SIZE,\n y: Math.random() * (canvasSize.height - GEM_SIZE * 2) + GEM_SIZE,\n vx: (Math.random() - 0.5) * GEM_SPEED * 2,\n vy: (Math.random() - 0.5) * GEM_SPEED * 2,\n rotation: 0,\n rotationSpeed: (Math.random() * 0.05 + 0.03) * (Math.random() < 0.5 ? -1 : 1) // Faster rotation for respawned gems\n };\n }\n\n // Update gem position\n let newX = gem.x + gem.vx;\n let newY = gem.y + gem.vy;\n let newVx = gem.vx;\n let newVy = gem.vy;\n let newRotation = gem.rotation + gem.rotationSpeed;\n\n // Bounce off walls\n if (newX < GEM_SIZE/2 || newX > canvasSize.width - GEM_SIZE/2) {\n newVx = -newVx;\n newX = Math.max(GEM_SIZE/2, Math.min(canvasSize.width - GEM_SIZE/2, newX));\n }\n if (newY < GEM_SIZE/2 || newY > canvasSize.height - GEM_SIZE/2) {\n newVy = -newVy;\n newY = Math.max(GEM_SIZE/2, Math.min(canvasSize.height - GEM_SIZE/2, newY));\n }\n\n // Add this code to make gems avoid the player\n if (distance < 100 && distance > GEM_COLLECTION_DISTANCE) {\n // Calculate repulsion vector (away from player)\n const repelX = (gem.x - position.x) * 0.01;\n const repelY = (gem.y - position.y) * 0.01;\n\n // Apply repulsion to velocity\n newVx += repelX;\n newVy += repelY;\n\n // Limit max velocity\n const speed = Math.sqrt(newVx * newVx + newVy * newVy);\n if (speed > GEM_SPEED * 2) {\n newVx = (newVx / speed) * GEM_SPEED * 2;\n newVy = (newVy / speed) * GEM_SPEED * 2;\n }\n }\n\n return {\n ...gem,\n x: newX,\n y: newY,\n vx: newVx,\n vy: newVy,\n rotation: newRotation\n };\n });\n\n if (gemsCollected > 0) {\n setCollectedGems(prev => prev + gemsCollected);\n }\n\n return updatedGems;\n });\n\n // Update enemies\n setEnemies(prevEnemies => {\n let playerCaught = false;\n\n const updatedEnemies = prevEnemies.map((enemy, index) => {\n // Skip inactive enemies\n if (!enemy.active) {\n // Check if it's time to respawn\n if (enemy.respawnTime && Date.now() - enemy.respawnTime > ENEMY_RESPAWN_TIME) {\n // Only respawn if this enemy should be active based on current activeEnemyCount\n if (index < activeEnemyCount) {\n // Create a new enemy at a random edge\n const newEnemy = createEnemy(enemy.id, canvasSize);\n return {\n ...enemy,\n x: newEnemy.x,\n y: newEnemy.y,\n active: true,\n respawnTime: null\n };\n }\n }\n return enemy;\n }\n\n // Update enemy position to chase player\n const dx = position.x - enemy.x;\n const dy = position.y - enemy.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n\n // Check if enemy caught player\n if (distance < ENEMY_CATCH_DISTANCE && !isInvulnerable) {\n playerCaught = true;\n }\n\n // Move enemy towards player with some wiggle\n const angle = Math.atan2(dy, dx);\n const wiggleAmount = Math.sin(enemy.wiggle) * 0.2;\n const moveAngle = angle + wiggleAmount;\n\n // Calculate current speed with multiplier\n const currentSpeed = enemy.baseSpeed * enemySpeedMultiplier;\n\n // Update wiggle phase\n const newWiggle = enemy.wiggle + 0.1;\n\n return {\n ...enemy,\n x: enemy.x + Math.cos(moveAngle) * currentSpeed,\n y: enemy.y + Math.sin(moveAngle) * currentSpeed,\n wiggle: newWiggle\n };\n });\n\n // If player was caught, reset gems and make player temporarily invulnerable\n if (playerCaught && !isInvulnerable) {\n // Save high score to localStorage\n const storedHighScore = parseInt(localStorage.getItem('tyb_high_score') || '0');\n if (collectedGems > storedHighScore) {\n localStorage.setItem('tyb_high_score', collectedGems.toString());\n }\n\n // Send gem count to server\n fetch('/api/v1/user_rewards/update_gem_count', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content')\n },\n body: JSON.stringify({ gem_count: collectedGems })\n })\n .then(response => response.json())\n .then(data => {\n console.log('Gem count saved:', data);\n })\n .catch(error => {\n console.error('Error saving gem count:', error);\n });\n\n setCollectedGems(0);\n setIsInvulnerable(true);\n\n // Reset enemy speed multiplier when caught\n setEnemySpeedMultiplier(1.0);\n\n // Reset active enemy count to initial\n setActiveEnemyCount(INITIAL_ENEMY_COUNT);\n\n // Reset enemies to edges\n const resetEnemies = updatedEnemies.map((enemy, index) => ({\n ...enemy,\n active: index < INITIAL_ENEMY_COUNT ? false : false, // Keep only initial enemies, deactivate the rest\n respawnTime: Date.now()\n }));\n\n // Set timeout to remove invulnerability\n setTimeout(() => {\n setIsInvulnerable(false);\n }, 3000);\n\n return resetEnemies;\n }\n\n return updatedEnemies;\n });\n }, 1000 / 60); // 60 FPS\n\n return () => clearInterval(gameLoop);\n }, [keys, position, canvasSize, isInvulnerable, enemySpeedMultiplier, activeEnemyCount]);\n\n // South Park style wobble animation\n useEffect(() => {\n const wobbleAnimation = () => {\n if (isMoving) {\n setWobbleOffset(prev => {\n // Oscillate between -5 and 5\n const newOffset = prev + 0.5;\n return newOffset > 5 ? -5 : newOffset;\n });\n } else {\n // Reset wobble when not moving\n setWobbleOffset(0);\n }\n\n animationFrameRef.current = requestAnimationFrame(wobbleAnimation);\n };\n\n animationFrameRef.current = requestAnimationFrame(wobbleAnimation);\n\n return () => {\n cancelAnimationFrame(animationFrameRef.current);\n };\n }, [isMoving]);\n\n return {\n position,\n setPosition,\n keys,\n setKeys,\n canvasSize,\n setCanvasSize,\n isMoving,\n setIsMoving,\n wobbleOffset,\n gems,\n collectedGems,\n enemies,\n activeEnemyCount,\n enemySpeedMultiplier,\n isInvulnerable,\n handleKeyDown,\n handleKeyUp\n };\n};","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport GameCanvas from './GameCanvas';\nimport Instructions from './Instructions';\nimport { useGameState } from '../hooks/useGameState';\nimport { useModules } from '../hooks/useModules';\nimport { useAvatar } from '../hooks/useAvatar';\n\nconst LearningWorld = ({ modules = [], currentUser, csrfToken }) => {\n const containerRef = useRef(null);\n const [isMobile, setIsMobile] = useState(false);\n\n // Make currentUser available globally for API calls\n useEffect(() => {\n window.currentUser = currentUser;\n }, [currentUser]);\n\n const {\n canvasSize,\n setCanvasSize,\n position,\n setPosition,\n isMoving,\n wobbleOffset,\n keys,\n setKeys,\n handleKeyDown,\n handleKeyUp,\n gems,\n collectedGems,\n enemies,\n enemySpeedMultiplier,\n isInvulnerable\n } = useGameState();\n\n // Check if device is mobile but don't redirect\n useEffect(() => {\n const checkMobile = () => {\n const isMobileDevice = window.innerWidth < 768 ||\n /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\n setIsMobile(isMobileDevice);\n };\n\n checkMobile();\n window.addEventListener('resize', checkMobile);\n return () => window.removeEventListener('resize', checkMobile);\n }, []);\n\n // Make collected gems available to other components\n useEffect(() => {\n window.collectedGems = collectedGems;\n }, [collectedGems]);\n\n const {\n localModules,\n activeModule,\n getModulePositions,\n handleModuleClick\n } = useModules(modules, position, canvasSize, currentUser);\n\n const { avatarImage } = useAvatar(currentUser);\n\n // Update canvas size on mount and window resize\n useEffect(() => {\n const updateCanvasSize = () => {\n if (containerRef.current) {\n // Use a fixed width for consistency between public and authenticated versions\n const width = 1200; // Fixed width for consistency\n const height = 700; // Fixed height for consistency\n setCanvasSize({ width, height });\n setPosition(prev => ({ ...prev, x: width / 2, y: height / 2 }));\n }\n };\n\n setTimeout(updateCanvasSize, 100);\n window.addEventListener('resize', updateCanvasSize);\n return () => window.removeEventListener('resize', updateCanvasSize);\n }, []);\n\n // Set up keyboard listeners\n useEffect(() => {\n window.addEventListener('keydown', handleKeyDown);\n window.addEventListener('keyup', handleKeyUp);\n\n // Add Enter key handler for module activation\n const handleEnterKey = (e) => {\n if (e.key === 'Enter' && activeModule !== null) {\n handleModuleClick();\n }\n };\n\n window.addEventListener('keydown', handleEnterKey);\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n window.removeEventListener('keyup', handleKeyUp);\n window.removeEventListener('keydown', handleEnterKey);\n };\n }, [handleKeyDown, handleKeyUp, activeModule, handleModuleClick]);\n\n // If on mobile, show mobile-optimized version\n if (isMobile) {\n return (\n \n \n Got it!\n \n
\n How to Play
\n\n\n
\n\n \n
\n\n Movement
\nUse the arrow keys or WASD to move your character around the world.
\n\n
\n\n {currentUser ? (\n <>\n Learning Modules
\nMove close to a learning module and press Enter to explore that feature.
\n\n
\n\n Collect Gems
\nCollect the sparkling gems to earn coin multipliers:
\n- \n
- Every 10 gems = 2x coin multiplier \n
- Every 20 gems = 3x coin multiplier \n
- Every 30 gems = 4x coin multiplier \n
- And so on! \n
Start a chat with gems collected to boost your coin rewards!
\n\n
\n \n ) : (\n <>\n Watch Out!
\nAvoid the colored enemies. If they catch you, you'll lose all your collected gems!
\n\n
\n\n Collect Gems
\nCollect the sparkling gems to earn points and compete for a high score!
\n\n
\n\n Watch Out!
\nAvoid the colored enemies. If they catch you, you'll lose all your collected gems!
\n\n
\n \n )}\n Sign Up for More!
\nCreate an account to unlock all learning features and save your progress!
\n\n
\n );\n }\n\n if (!localModules || !Array.isArray(localModules) || localModules.length === 0) {\n return (\n \n );\n }\n\n return (\n \n \n ✓\n \n
\n\n \n setKeys(prev => ({ ...prev, ArrowLeft: true }))}\n onTouchEnd={() => setKeys(prev => ({ ...prev, ArrowLeft: false }))}\n >\n ←\n \n setKeys(prev => ({ ...prev, ArrowUp: true }))}\n onTouchEnd={() => setKeys(prev => ({ ...prev, ArrowUp: false }))}\n >\n ↑\n \n setKeys(prev => ({ ...prev, ArrowRight: true }))}\n onTouchEnd={() => setKeys(prev => ({ ...prev, ArrowRight: false }))}\n >\n →\n \n \n setKeys(prev => ({ ...prev, ArrowDown: true }))}\n onTouchEnd={() => setKeys(prev => ({ ...prev, ArrowDown: false }))}\n >\n ↓\n \n \n
\n \n {currentUser ? (\n \n Switch to Classic View\n \n ) : (\n \n Back to Home\n \n )}\n
\n \n );\n};\n\nLearningWorld.propTypes = {\n modules: PropTypes.array,\n currentUser: PropTypes.object,\n csrfToken: PropTypes.string\n};\n\nexport default LearningWorld;","import { useState, useEffect, useRef } from 'react';\n\nexport const useModules = (modules, position, canvasSize, currentUser) => {\n const [localModules, setLocalModules] = useState([]);\n const [activeModule, setActiveModule] = useState(null);\n const modulesLoaded = useRef(false);\n\n // Try to get modules from debug info if props are empty - only once\n useEffect(() => {\n if (modulesLoaded.current) return;\n\n if (modules && Array.isArray(modules) && modules.length > 0) {\n setLocalModules(modules);\n modulesLoaded.current = true;\n } else {\n console.log(\"Modules array is empty, trying to get data from debug element\");\n const debugElement = document.getElementById('debug-info');\n if (debugElement) {\n try {\n const debugData = JSON.parse(debugElement.textContent);\n console.log(\"Found modules in debug element:\", debugData);\n setLocalModules(debugData);\n modulesLoaded.current = true;\n } catch (e) {\n console.error(\"Error parsing debug data:\", e);\n }\n }\n }\n }, [modules]);\n\n // Calculate module positions based on canvas size\n const getModulePositions = () => {\n if (!localModules || localModules.length === 0) return [];\n\n // Regular learning modules positions\n const positions = [\n { x: canvasSize.width * 0.2, y: canvasSize.height * 0.3 },\n { x: canvasSize.width * 0.5, y: canvasSize.height * 0.2 },\n { x: canvasSize.width * 0.8, y: canvasSize.height * 0.3 },\n { x: canvasSize.width * 0.2, y: canvasSize.height * 0.7 },\n { x: canvasSize.width * 0.5, y: canvasSize.height * 0.8 },\n { x: canvasSize.width * 0.8, y: canvasSize.height * 0.7 },\n ].slice(0, localModules.length);\n\n // Only add rewards module for authenticated users\n if (currentUser) {\n positions.push({ x: canvasSize.width * 0.9, y: canvasSize.height * 0.9, isRewards: true });\n }\n\n return positions;\n };\n\n // Check if near any module\n useEffect(() => {\n if (!localModules || localModules.length === 0) return;\n\n const modulePositions = getModulePositions();\n let nearestModule = null;\n let nearestDistance = Infinity;\n\n modulePositions.forEach((modulePos, index) => {\n const dx = position.x - modulePos.x;\n const dy = position.y - modulePos.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n\n // Use a smaller interaction radius for the rewards module\n const interactionRadius = modulePos.isRewards ? 80 : 100;\n\n if (distance < interactionRadius && distance < nearestDistance) {\n nearestModule = index;\n nearestDistance = distance;\n }\n });\n\n if (nearestModule !== activeModule) {\n setActiveModule(nearestModule);\n }\n }, [position, localModules, canvasSize, activeModule]);\n\n const handleModuleClick = () => {\n if (activeModule !== null && localModules[activeModule]) {\n const module = localModules[activeModule];\n\n // For non-authenticated users, just navigate to the target URL without gem multipliers\n if (!currentUser) {\n window.location.href = module.path;\n return;\n }\n\n // For authenticated users, include gem multipliers\n const gemCount = window.collectedGems || 0;\n const multiplier = Math.max(1, Math.floor(gemCount / 10) + 1);\n\n // Add the multiplier as a URL parameter\n let targetUrl = module.path;\n const separator = targetUrl.includes('?') ? '&' : '?';\n targetUrl = `${targetUrl}${separator}gem_multiplier=${multiplier}&gems=${gemCount}`;\n\n // Navigate to the module with the multiplier\n window.location.href = targetUrl;\n }\n };\n\n return {\n localModules,\n activeModule,\n setActiveModule,\n getModulePositions,\n handleModuleClick\n };\n};","import { useState, useEffect } from 'react';\n\nexport const useAvatar = (currentUser) => {\n const [avatarImage, setAvatarImage] = useState(null);\n\n // Load avatar image\n useEffect(() => {\n console.log(\"Loading avatar image for user:\", currentUser);\n\n // Default avatar path - use a path that definitely exists in your assets\n const defaultAvatarPath = '/tybee-circle.png';\n\n // Function to load avatar from URL\n const loadAvatarFromUrl = (url) => {\n console.log(\"Attempting to load avatar from:\", url);\n const img = new Image();\n img.src = url;\n\n img.onload = () => {\n console.log(\"Avatar image loaded successfully from:\", url);\n setAvatarImage(img);\n };\n\n img.onerror = (error) => {\n console.error(\"Error loading avatar image from:\", url, error);\n loadDefaultAvatar();\n };\n };\n\n // Function to load the default avatar\n const loadDefaultAvatar = () => {\n console.log(\"Loading default avatar from:\", defaultAvatarPath);\n const defaultImg = new Image();\n defaultImg.src = defaultAvatarPath;\n defaultImg.onload = () => {\n console.log(\"Default avatar loaded successfully\");\n setAvatarImage(defaultImg);\n };\n defaultImg.onerror = (error) => {\n console.error(\"Error loading default avatar:\", error);\n };\n };\n\n // Try to get user from debug info if props are empty\n if (!currentUser || typeof currentUser !== 'object') {\n console.log(\"No current user in props, trying to get from debug element\");\n const userDebugElement = document.getElementById('user-debug-info');\n if (userDebugElement) {\n try {\n const userData = JSON.parse(userDebugElement.textContent);\n console.log(\"Found user in debug element:\", userData);\n\n // Check for avatar URL in the parsed user data\n if (userData && userData.avatar) {\n loadAvatarFromUrl(userData.avatar);\n return;\n }\n } catch (e) {\n console.error(\"Error parsing user debug data:\", e);\n }\n }\n loadDefaultAvatar();\n return;\n }\n\n // If we have a user with an avatar, load it\n if (currentUser.avatar) {\n loadAvatarFromUrl(currentUser.avatar);\n } else {\n loadDefaultAvatar();\n }\n }, [currentUser]);\n\n return { avatarImage };\n};\n","// Action Cable provides the framework to deal with WebSockets in Rails.\n// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.\n\nimport { createConsumer } from \"@rails/actioncable\"\n\nexport default createConsumer()","// NOTE: This file is not being used. We're using a custom event system instead.\n// Keeping this file for reference in case we want to switch to Action Cable in the future.\n\nimport consumer from \"./consumer\"\n\n// This file is not needed for our implementation since we're subscribing directly in the React component\n// But we'll create it for completeness\n\n/*\nconsumer.subscriptions.create(\"CoinChannel\", {\n connected() {\n // Called when the subscription is ready for use on the server\n },\n\n disconnected() {\n // Called when the subscription has been terminated by the server\n },\n\n received(data) {\n // Called when there's incoming data on the websocket for this channel\n }\n});\n*/\n\n// Create a subscription for the coin channel\n// This will be used to receive real-time coin updates\nconst createCoinSubscription = (userId) => {\n console.log('Creating coin subscription for userId:', userId);\n\n // Don't create a subscription if userId is missing\n if (!userId) {\n console.warn('Cannot create coin subscription: userId is missing');\n return { unsubscribe: () => {} }; // Return a dummy object with unsubscribe method\n }\n\n // Convert userId to a number if it's not already\n const parsedUserId = typeof userId === 'number' ? userId : parseInt(userId, 10);\n console.log('Parsed userId:', parsedUserId);\n\n try {\n const subscription = consumer.subscriptions.create(\n {\n channel: \"CoinChannel\",\n user_id: parsedUserId\n },\n {\n connected() {\n // Called when the subscription is ready for use on the server\n console.log(\"Connected to CoinChannel for user\", parsedUserId);\n },\n\n disconnected() {\n // Called when the subscription has been terminated by the server\n console.log(\"Disconnected from CoinChannel\");\n },\n\n received(data) {\n // Called when there's incoming data on the websocket for this channel\n console.log(\"Received coin update:\", data);\n if (data && data.coins !== undefined) {\n // Ensure we're working with numbers\n const coins = typeof data.coins === 'number' ? data.coins : parseInt(data.coins, 10);\n const user_id = typeof data.user_id === 'number' ? data.user_id : parseInt(data.user_id, 10);\n\n console.log('Dispatching coin-update event with:', { userId: user_id, coins });\n\n // Dispatch a custom event that the CoinDisplay component can listen for\n document.dispatchEvent(new CustomEvent('coin-update', {\n detail: {\n userId: user_id,\n coins: coins\n }\n }));\n }\n }\n }\n );\n\n console.log('Subscription created successfully');\n return subscription;\n } catch (error) {\n console.error('Error creating subscription:', error);\n return { unsubscribe: () => {} }; // Return a dummy object with unsubscribe method\n }\n};\n\nexport default createCoinSubscription;","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport createCoinSubscription from '../../../channels/coin_channel';\n\nconst CoinDisplay = (props) => {\n // Log the raw props to see what we're getting\n console.log('CoinDisplay raw props:', props);\n\n // Extract props with defaults\n const initialCoins = props.initialCoins !== undefined ? props.initialCoins : 0;\n const userId = props.userId !== undefined ? props.userId : null;\n\n // Convert initialCoins to a number if it's not already\n const parsedInitialCoins = typeof initialCoins === 'number' ? initialCoins : parseInt(initialCoins || '0', 10);\n\n // Use the parsed value for the initial state\n const [coins, setCoins] = useState(parsedInitialCoins);\n const [animating, setAnimating] = useState(false);\n\n // Log the initial values to help with debugging\n useEffect(() => {\n console.log('CoinDisplay initialized with:', {\n initialCoins,\n parsedInitialCoins,\n userId\n });\n }, [initialCoins, userId]);\n\n useEffect(() => {\n // Only subscribe if we have a valid userId\n if (!userId) {\n console.warn('CoinDisplay: No userId provided, skipping subscription');\n return;\n }\n\n console.log('Creating subscription for user:', userId);\n\n // Subscribe to the coin channel for real-time updates\n const subscription = createCoinSubscription(userId);\n\n // Also listen for the custom event (for backward compatibility)\n const handleCoinUpdate = (event) => {\n const { detail } = event;\n console.log('Coin update event received:', event);\n\n if (detail && detail.userId === userId && detail.coins !== undefined) {\n console.log('Coin update matched for user:', detail);\n\n // Animate the coin change\n setAnimating(true);\n setCoins(parseInt(detail.coins, 10));\n\n // Reset animation after a short delay\n setTimeout(() => {\n setAnimating(false);\n }, 1000);\n }\n };\n\n // Add event listener\n document.addEventListener('coin-update', handleCoinUpdate);\n\n // Clean up\n return () => {\n document.removeEventListener('coin-update', handleCoinUpdate);\n if (subscription && typeof subscription.unsubscribe === 'function') {\n subscription.unsubscribe();\n }\n };\n }, [userId]);\n\n return (\n \n ![\"Coin\"](\"/assets/coin.png\")
\n \n {coins}\n \n
\n );\n};\n\nCoinDisplay.propTypes = {\n initialCoins: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n userId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n};\n\nexport default CoinDisplay;","// app/javascript/packs/application.js\nimport ReactOnRails from \"react-on-rails\";\nimport HelloWorld from \"../bundles/HelloWorld/components/HelloWorld\";\nimport HelloWorldApp from \"../startup/HelloWorldApp\";\nimport Chat from \"../bundles/Chat/components/Chat\";\nimport ChatList from \"../bundles/Chat/components/ChatList\";\nimport StoryTellingChat from \"../bundles/Chat/components/StoryTellingChat\";\nimport ImageSection from \"../bundles/Chat/components/ImageSection\";\nimport ImageCreation from \"../bundles/Chat/components/ImageCreation\";\nimport ImageGrid from \"../bundles/Shared/components/ImageGrid\";\nimport ImageMosaic from \"../bundles/Shared/components/ImageMosaic\";\nimport StripeWrapper from \"../bundles/Shared/components/StripeWrapper\";\nimport Spinner from \"../bundles/Chat/components/Spinner\";\nimport UserMessage from \"../bundles/Chat/components/UserMessage\";\nimport AssistantMessage from \"../bundles/Chat/components/AssistantMessage\";\nimport WordList from \"../bundles/Words/components/WordList\";\nimport WordTest from \"../bundles/Words/components/WordTest\";\nimport Listeners from \"./listeners\";\nimport LogrocketWrapper from \"../bundles/Shared/components/LogrocketWrapper\";\nimport UsernameValidator from '../bundles/Shared/components/UsernameValidator'\nimport MemoryForm from \"../bundles/Shared/components/MemoryForm\";\nimport LearningWorld from \"../bundles/LearningWorld/components/LearningWorld\";\nimport CoinDisplay from '../bundles/CoinDisplay/components/CoinDisplay';\n\nReactOnRails.register({\n HelloWorld,\n HelloWorldApp,\n Chat,\n ChatList,\n StoryTellingChat,\n ImageSection,\n ImageCreation,\n ImageGrid,\n ImageMosaic,\n StripeWrapper,\n Spinner,\n WordList,\n WordTest,\n Listeners,\n UserMessage,\n AssistantMessage,\n LogrocketWrapper,\n UsernameValidator,\n MemoryForm,\n LearningWorld,\n CoinDisplay\n});\n","document.addEventListener('DOMContentLoaded', function () {\n const menuIcon = document.getElementById('mobile-menu');\n const menuButton = document.getElementById('mobile-button');\n if (!menuIcon || !menuButton) return;\n menuButton.addEventListener('click', function () {\n menuIcon.classList.toggle('hidden');\n });\n});"],"names":["useCounterStore","create","set","count","add","state","subtract","useChatStore","chat","fetch","async","response","json","props","name","setName","useState","useEffect","React","className","src","avatar_url","alt","login","type","onClick","FaMinus","color","FaPlus","htmlFor","title","id","value","onChange","e","target","Routes","Route","GoBackSection","Link","to","BsArrowLeft","RouterApp","railsContext","BrowserRouter","path","element","HelloWorld","href","ImageSection","imageId","image","formToken","chatId","imageUrl","setImageUrl","loading","setLoading","axios","post","chat_image_id","headers","Authorization","data","error","console","fetchImage","StoryTellingChat","onSaveChat","chatStory","isSubmitting","setIsSubmitting","storyParts","setStoryParts","chatStoryId","setChatStoryId","userPrompt","setUserPrompt","prompt","audioStatus","setAudioStatus","map","part","audioUrl","initialAudioStatus","forEach","length","onSubmit","preventDefault","queryParams","URLSearchParams","toString","storySegments","sections","handleSendStoryPrompt","rows","placeholder","disabled","index","key","content","controls","prev","messageId","updatedStoryParts","audio_url","handleGenerateAudio","MessageInput","handleSubmit","input","setInput","handleFileChange","showWork","messageCount","filePreview","setFilePreview","errorMessage","setErrorMessage","isCameraActive","setIsCameraActive","textareaRef","useRef","videoRef","canvasRef","startCamera","adjustHeight","current","style","height","scrollHeight","stream","navigator","mediaDevices","getUserMedia","video","facingMode","ideal","srcObject","play","paperClip","document","getElementById","click","HiOutlinePaperClip","size","maxWidth","margin","ref","width","playsInline","captureImage","canvas","aspectRatio","videoHeight","context","getContext","cropWidth","cropX","videoWidth","drawImage","toBlob","blob","newCapturedFile","File","URL","createObjectURL","getTracks","track","stop","display","IoMdCloseCircle","xmlns","xmlnsXlink","version","viewBox","xmlSpace","stroke","fill","transform","d","accept","file","fileType","reader","FileReader","onloadend","result","readAsDataURL","handleFileChangeInternal","files","onKeyDown","shiftKey","FaArrowAltCircleUp","UserMessage","message","undefined","JSON","stringify","String","ReactMarkdown","remarkPlugins","remarkMath","rehypePlugins","rehypeKatex","rehypeRaw","components","inlineMath","node","log","InlineMath","math","BlockMath","image_url","CollapsibleSection","items","isOpen","toggleOpen","onItemClick","isClickable","stringItems","item","FaChevronUp","FaChevronDown","FaStar","role","AssistantMessage","onFollowUpClick","setAudioUrl","showExamples","setShowExamples","showEquations","setShowEquations","showFollowUp","setShowFollowUp","showAudioButton","chat_type","showMapFocus","map_focus","explanation","processedContent","replace","match","bracket","p1","openBracket","closeBracket","renderContent","ImSpinner8","HiSpeakerWave","examples","equations","follow_up","latitude","longitude","Profile","user","avatarSrc","avatar","Message","isUser","Spinner","LanguageLearningPrompts","language","mode","onPromptSelect","getPrompts","World","apiKey","setMap","clickedLocation","setClickedLocation","infoWindowOpen","setInfoWindowOpen","question","setQuestion","messages","setMessages","isLoading","setIsLoading","suggestions","setSuggestions","center","setCenter","lat","lng","mapOptions","mapTypeControl","mapTypeControlOptions","window","google","maps","MapTypeControlStyle","HORIZONTAL_BAR","position","ControlPosition","TOP_LEFT","mapTypeIds","zoomControl","zoomControlOptions","LEFT_CENTER","fullscreenControl","fullscreenControlOptions","LEFT_TOP","streetViewControl","styles","featureType","elementType","stylers","visibility","LoadScript","googleMapsApiKey","GoogleMap","mapContainerStyle","zoom","options","event","newLocation","latLng","onLoad","Marker","FaGlobeAmericas","Number","toFixed","trim","authenticity_token","newCenter","parseFloat","panTo","setZoom","parseInt","suggestion","ParentMemoryChat","childId","onSaveMemory","showMemoryForm","setShowMemoryForm","memoryData","setMemoryData","memoryType","setMemoryType","messagesEndRef","scrollToBottom","scrollIntoView","behavior","handleFollowUpClick","label","success","errors","userMessage","child_id","Accept","assistantMessage","prevMessages","handleSaveMemoryClick","lastAssistantMessage","reverse","find","m","imageFile","setImageFile","isStorySubmitted","setIsStorySubmitted","chatType","subject","setSubject","targetLanguage","setTargetLanguage","learningMode","setLearningMode","isNewChat","memory_data","memory_type","user_id","process","code","lang","icon","sub","maxHeight","readOnly","uploadedImageURL","uploadedImageId","formData","FormData","append","imageURL","image_id","setImageURL","setImageId","eventSource","setEventSource","story","close","messageIndex","handleSend","newEventSource","EventSource","onmessage","newContent","updatedMessages","onerror","ImageCreationComponent","setPrompt","setStyle","difficulty","setDifficulty","layout","setLayout","generatedImage","setGeneratedImage","avatarSet","setAvatarSet","backgroundSet","setBackgroundSet","chatImageId","setChatImageId","isPublic","setIsPublic","isColoringPage","isAvatar","public","downloadImage","link","createElement","download","payload","background_id","patch","avatar_id","chat_image","useInfiniteImageLoad","initialImages","totalCount","images","setImages","page","setPage","hasMore","setHasMore","observerRef","disconnect","observer","IntersectionObserver","entries","isIntersecting","loadMoreImages","threshold","observe","get","params","prevImages","prevPage","next_page","ImageGrid","editType","hookImages","completedImageId","setCompletedImageId","chatUrl","createdBy","created_at","handleSetAsAction","createdUser","updatedImage","img","handleShareImage","HeartIcon","filled","strokeLinecap","strokeLinejoin","strokeWidth","Lightbox","onClose","ImagePlaceholder","ImageCell","onHeartToggle","signedIn","imageLoaded","setImageLoaded","creatorAvatarUrl","isLiked","likeCount","ImageMosaic","offset","setOffset","selectedImage","setSelectedImage","inView","useInView","useCallback","per_page","querySelector","chat_images","has_more","prevOffset","openLightbox","closeLightbox","handleHeartToggle","stopPropagation","status","updatedImageData","Array","from","_","stripePromise","loadStripe","StripeWrapper","familyId","initialPriceId","priceId","setPriceId","clientSecret","setClientSecret","promotekitReferral","promotekit_referral","method","body","price_id","family_id","initializeCheckout","then","stripe","initEmbeddedCheckout","checkout","mount","catch","handlePriceChange","newPriceId","Elements","min","max","step","WordList","wordList","initialUser","words","setWords","newWord","setNewWord","setUser","playSlowAudio","rate","audio","Audio","playbackRate","languageName","wordsRemaining","word","addedWord","prevWords","updatedWordListResponse","freemium","word_text","delete","wordId","filter","deleteWord","audioWordUrl","sentence","audioSentenceUrl","specialCharacters","es","fr","de","it","pt","nl","WordTest","currentWordIndex","setCurrentWordIndex","userAnswer","setUserAnswer","showResult","setShowResult","isCorrect","setIsCorrect","wrongAnswers","setWrongAnswers","earnedCoins","setEarnedCoins","hasSubmitted","setHasSubmitted","showWrongAnswersSummary","setShowWrongAnswersSummary","correctAnswers","setCorrectAnswers","retryMode","setRetryMode","currentWord","languageCode","toLowerCase","playAudio","resetFullTest","retryWrongAnswers","wa","correct","wrong","RegExp","ok","char","prevAnswer","handleSpecialCharacter","nextWord","prevIndex","LogrocketWrapper","LogRocketInitialized","LogRocket","fullname","email","UsernameValidator","currentUsername","username","setUsername","setStatus","isChecking","setIsChecking","timeoutId","setTimeout","encodeURIComponent","valid","checkUsername","clearTimeout","getStatusColor","cx","cy","r","MemoryForm","memoryTypes","initialMemoryType","initialMemoryData","formAction","formMethod","csrfToken","cancelUrl","childName","isEditing","hints","science","history","language_arts","learning_style","interests","strengths","challenges","anything","placeholders","questions","action","defaultProps","CHARACTER_SIZE","ENEMY_SIZE","DEFAULT_AVATAR","Image","GEM_IMAGE","GameCanvas","canvasSize","isMoving","wobbleOffset","avatarImage","modules","activeModule","getModulePositions","gems","collectedGems","enemies","enemySpeedMultiplier","isInvulnerable","ctx","clearRect","modulePos","isRewardsModule","isRewards","beginPath","arc","x","y","Math","PI","colors","colorIndex","gradient","createRadialGradient","addColorStop","fillStyle","shadowBlur","shadowColor","lineWidth","strokeStyle","textAlign","textBaseline","font","fillText","moduleTitle","displayTitle","includes","firstWord","split","substring","premium","gem","save","translate","rotate","rotation","complete","naturalHeight","gemSize","GEM_SIZE","moveTo","lineTo","closePath","gemGradient","createLinearGradient","sparkleTime","Date","now","sin","restore","enemy","active","baseColor","glowIntensity","dx","dy","angle","atan2","eyeOffsetX","cos","eyeOffsetY","drawX","drawY","shadowWidth","abs","shadowHeight","ellipse","shieldOpacity","clip","fillRect","storedHighScore","localStorage","getItem","currentHighScore","setItem","trophyX","trophyY","leaderboardTrophyY","leaderboardTrophyX","onclick","rect","getBoundingClientRect","clientX","left","clientY","top","location","multiplier","floor","Instructions","currentUser","showInstructions","setShowInstructions","toggleInstructions","LearningWorld","containerRef","isMobile","setIsMobile","setCanvasSize","setPosition","keys","setKeys","handleKeyDown","handleKeyUp","useGameState","setIsMoving","setWobbleOffset","setGems","setCollectedGems","setEnemies","activeEnemyCount","setActiveEnemyCount","setEnemySpeedMultiplier","setIsInvulnerable","lastMoveTimeRef","animationFrameRef","newGems","i","push","random","vx","vy","rotationSpeed","newEnemies","createEnemy","isActive","baseSpeed","wiggle","newActiveCount","prevEnemies","updatedEnemies","enemiesToAdd","newEnemyId","newEnemy","prevKeys","some","gameLoop","setInterval","prevPos","newX","newY","moved","prevGems","gemsCollected","updatedGems","distance","sqrt","newMultiplier","newVx","newVy","newRotation","speed","GEM_SPEED","playerCaught","respawnTime","moveAngle","currentSpeed","newWiggle","getAttribute","gem_count","resetEnemies","clearInterval","wobbleAnimation","newOffset","requestAnimationFrame","cancelAnimationFrame","checkMobile","isMobileDevice","innerWidth","test","userAgent","addEventListener","removeEventListener","localModules","handleModuleClick","useModules","setLocalModules","setActiveModule","modulesLoaded","isArray","debugElement","debugData","parse","textContent","positions","slice","modulePositions","nearestModule","nearestDistance","Infinity","module","gemCount","targetUrl","separator","setAvatarImage","defaultAvatarPath","loadAvatarFromUrl","url","onload","loadDefaultAvatar","defaultImg","userDebugElement","userData","useAvatar","updateCanvasSize","handleEnterKey","onTouchStart","ArrowLeft","onTouchEnd","ArrowUp","ArrowRight","ArrowDown","createConsumer","userId","warn","unsubscribe","parsedUserId","subscription","consumer","subscriptions","channel","connected","disconnected","received","coins","dispatchEvent","CustomEvent","detail","initialCoins","parsedInitialCoins","setCoins","animating","setAnimating","createCoinSubscription","handleCoinUpdate","ReactOnRails","HelloWorldApp","Chat","ChatList","ImageCreation","Listeners","CoinDisplay","menuIcon","menuButton","classList","toggle"],"sourceRoot":""}\n