import React, { useContext, useState, useEffect, useRef } from 'react'; import { GameContext } from 'GameContext'; import { Canvas } from '@react-three/fiber'; import { Physics, RigidBody, CuboidCollider } from '@react-three/rapier'; // Added CuboidCollider import { Image, Plane } from '@react-three/drei'; // Added Plane import * as THREE from 'three'; // Import THREE for vector operations etc. import PhysicsSprite from 'PhysicsSprite'; // Import the new component import GameNotice from 'GameNotice'; import ConfirmDialog from 'ConfirmDialog'; import SoundMatchUpGame from 'SoundMatchUpGame'; import StressDetectiveGame from 'StressDetectiveGame'; import UnlinkGame from 'UnlinkGame'; import PhantomLettersGame from 'PhantomLettersGame'; // Import the Phantom Letters game component import ToneItRightGame from 'ToneItRightGame'; // Import the Tone It Right! game component import InstructionNoticeModal from 'InstructionNoticeModal'; // Import the new modal // SurpriseNoticeModal import removed const GameHub = () => { const { currentGame, setCurrentGame, score, setScore, catMood, petCat, getCatEmotion, badges, checkForBadge, setBadges, playAudio } = useContext(GameContext); // Added playAudio // Sprites state will be managed differently, maybe inside the physics component const [showMainMenu, setShowMainMenu] = useState(true); const [showSymbolsModal, setShowSymbolsModal] = useState(false); const [isLoading, setIsLoading] = useState(true); // New loading state const [notification, setNotification] = useState(null); const [instructionNotice, setInstructionNotice] = useState(null); // State for instruction notice const [isSpriteSandboxActive, setIsSpriteSandboxActive] = useState(false); // New state for surprise feature const [activeSprites, setActiveSprites] = useState([]); // State to hold sprites for the sandbox const nextSpriteId = useRef(0); // To ensure unique keys for new sprites const [isCooldownActive, setIsCooldownActive] = useState(false); // For sprite adding cooldown const [cooldownTimeLeft, setCooldownTimeLeft] = useState(0); // For sprite adding cooldown // showSurpriseNotice state removed const allAvailableSpriteImages = [ // Renamed for clarity { url: 'https://rosebud.ai/assets/image_0.png?Zn0o', baseId: 0 }, { url: 'https://rosebud.ai/assets/image_1.png?9n8Y', baseId: 1 }, { url: 'https://rosebud.ai/assets/image_2.png?cpZO', baseId: 2 }, { url: 'https://rosebud.ai/assets/image_3.png?JkQi', baseId: 3 }, { url: 'https://rosebud.ai/assets/image_4.png?eA2S', baseId: 4 }, { url: 'https://rosebud.ai/assets/image_5.png?6lXQ', baseId: 5 }, ]; // Physics world constants const RAPIER_SCALE = 20; // How many pixels approximate one physics world unit const SPRITE_PHYSICS_SCALE = 0.15; // Slightly larger sprites // Helper to get initial *on-screen* physics position and scale const getInitialSpriteProps = (index, viewport) => { // Calculate bounds slightly inside the viewport const maxX = viewport.width / 2 * 0.8; // Use 80% of half-width const maxY = viewport.height / 2 * 0.8; // Use 80% of half-height // Generate random position within these bounds const randX = (Math.random() - 0.5) * 2 * maxX; // Range: -maxX to +maxX const randY = (Math.random() - 0.5) * 2 * maxY; // Range: -maxY to +maxY // Generate random scale with more variety (e.g., between 50% and 180% of base size) const minScaleFactor = 0.5; // Lowered for smaller sprites const maxScaleFactor = 1.8; // Increased for larger sprites const randomScaleFactor = minScaleFactor + Math.random() * (maxScaleFactor - minScaleFactor); const scale = SPRITE_PHYSICS_SCALE * randomScaleFactor; return { position: [randX, randY, 0], // Z is always 0 scale: scale }; }; // Render Game Selection UI const renderGameSelector = () => { const allBadgesCollected = Object.values(badges).every(hasBadge => hasBadge); return (

Phonetics Fun!

{allBadgesCollected && (

🎉 Congratulations! 🎉

You've collected all the trophies and mastered the Phonetic Frenzy!
We'd love to hear your thoughts. Please take a moment to fill out our quick survey:

Take the Survey!

)}

{allBadgesCollected ? "You can still replay any game:" : "Choose a game to practice your phonetics skills:"}

{gameOptions.map(game => ( handleGameSelect(game.id)} hasBadge={badges[game.id]} isSmall={allBadgesCollected} // Pass down a prop to indicate small size /> ))}

); }; // Render Main Menu UI (Centered) const renderMainMenu = () => { const allBadgesCollected = Object.values(badges).every(hasBadge => hasBadge); let currentSurpriseButtonText; if (isSpriteSandboxActive && isCooldownActive) { currentSurpriseButtonText = `Cooldown: ${cooldownTimeLeft}s`; } else if (isSpriteSandboxActive) { currentSurpriseButtonText = `✨ Add a Sprite! ✨`; // Removed count } else if (allBadgesCollected) { currentSurpriseButtonText = "🎉 Activate Sprite Sandbox! 🎉"; } else { currentSurpriseButtonText = "❓ Locked Feature ❓"; } const surpriseButtonAction = () => { if (!allBadgesCollected) { setNotification({ message: 'Collect all 5 trophies to unlock this!', variant: 'info', duration: 3000 }); return; } if (isSpriteSandboxActive && isCooldownActive) { return; // Do nothing if cooldown is active } if (!isSpriteSandboxActive) { setIsSpriteSandboxActive(true); setActiveSprites([]); nextSpriteId.current = 0; setNotification({ message: 'Sprite Sandbox Activated.', variant: 'success', duration: 3000 }); // Simplified message } else { // isSpriteSandboxActive is true, and not in cooldown const viewport = { width: window.innerWidth / RAPIER_SCALE, height: window.innerHeight / RAPIER_SCALE }; const countToAdd = 10; let effectivelyAddedCount = 0; let cooldownTriggeredThisAction = false; setActiveSprites(prevSprites => { const spritesToAddArray = []; for (let i = 0; i < countToAdd; i++) { const randomImageIndex = Math.floor(Math.random() * allAvailableSpriteImages.length); const baseSpriteData = allAvailableSpriteImages[randomImageIndex]; const finalIndexForProps = prevSprites.length + i; const { position, scale: newSpriteInitialScale } = getInitialSpriteProps(finalIndexForProps, viewport); spritesToAddArray.push({ ...baseSpriteData, id: nextSpriteId.current++, initialPosition: position, initialScale: newSpriteInitialScale, isFadingOut: false, }); } effectivelyAddedCount = spritesToAddArray.length; let updatedSprites = [...prevSprites, ...spritesToAddArray]; let currentActiveNonFadingCount = updatedSprites.filter(s => !s.isFadingOut).length; let actualMarkedFadingThisIteration = 0; // New logic: if count reaches 100, mark 60 random non-fading sprites if (currentActiveNonFadingCount >= 100) { const numToFade = 60; let nonFadingSpritesIndices = []; updatedSprites.forEach((sprite, index) => { if (!sprite.isFadingOut) { nonFadingSpritesIndices.push(index); } }); // Shuffle the indices of non-fading sprites for (let i = nonFadingSpritesIndices.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [nonFadingSpritesIndices[i], nonFadingSpritesIndices[j]] = [nonFadingSpritesIndices[j], nonFadingSpritesIndices[i]]; } // Mark the first 'numToFade' of these shuffled sprites for fading let markedCount = 0; for (let i = 0; i < nonFadingSpritesIndices.length && markedCount < numToFade; i++) { const spriteIndexToMark = nonFadingSpritesIndices[i]; if (!updatedSprites[spriteIndexToMark].isFadingOut) { // Double check, though it should be non-fading updatedSprites[spriteIndexToMark] = { ...updatedSprites[spriteIndexToMark], isFadingOut: true }; actualMarkedFadingThisIteration++; markedCount++; } } if (actualMarkedFadingThisIteration > 0) { cooldownTriggeredThisAction = true; } } return updatedSprites; }); // Check if cooldown should be triggered based on the state *after* adding sprites // and potentially marking some for fading. // The activeSprites state has been updated by now. // The cooldownTriggeredThisAction is now set if sprites were actually marked for fading. // No need for the additional check on finalNonFadingCount related to the 190 threshold, // as the primary condition is now hitting 100 and successfully marking sprites for fade. // The notification will reflect this. if (cooldownTriggeredThisAction) { // Check if cooldown is already active; if so, don't reset its timer or notification // unless specifically intended (which it's not here). // The main purpose is to show the notification *if it's not already showing due to cooldown*. if (!isCooldownActive) { setIsCooldownActive(true); setCooldownTimeLeft(10); setNotification({ message: `Sprite limit (100) hit! Fading 60 sprites. Cooldown for ${10}s.`, variant: 'warning', duration: 4000 // Slightly longer for more info }); } } else if (effectivelyAddedCount > 0) { // If no cooldown was triggered (e.g., limit not hit), but sprites were added. // The button count already shows the new total, so an explicit message might be optional. // Keeping this block for potential future use if a "X sprites added" notification is desired again. } } }; return (

PHONETIC FRENZY

{/* Add Learn Symbols Button */} {/* Locked/Unlocked Surprise Button */} {!allBadgesCollected && (

Collect all five 🏆 to unlock this feature!

)}

); }; // Handler for selecting a game const handleGameSelect = (gameId) => { const game = gameOptions.find(g => g.id === gameId); if (game && game.instructions) { setInstructionNotice({ gameIdToStart: game.id, gameTitle: game.title, ...game.instructions }); } else { setCurrentGame(gameId); // Directly start game if no instructions } }; const handleStartGameFromNotice = () => { if (instructionNotice && instructionNotice.gameIdToStart) { setCurrentGame(instructionNotice.gameIdToStart); } setInstructionNotice(null); }; const handleSpriteFadeComplete = (spriteId) => { setActiveSprites(prevSprites => prevSprites.filter(s => s.id !== spriteId)); // Optional: Could add a notification here if desired, e.g., "A sprite has vanished!" // For now, silent removal after fade is fine. }; // Check for badge achievement and show notification if needed useEffect(() => { if (currentGame !== 'hub' && score >= 200) { const earnedBadge = checkForBadge(currentGame); // This function returns true if a new badge was earned if (earnedBadge) { // Find the game's title for the notification const game = gameOptions.find(g => g.id === currentGame); // Use game.title for the notification message as it's already formatted nicely const gameNameForNotification = game ? game.title : 'this game'; // Calculate current trophy count. // The `badges` state from context here is from the render *before* the // `setBadges` call in `GameContext` (triggered by `checkForBadge`) has fully propagated. // Since `earnedBadge` is true, we know a new badge was just awarded. const countOfPreviouslyEarnedBadges = Object.values(badges).filter(hasBadge => hasBadge).length; const newTotalTrophyCount = countOfPreviouslyEarnedBadges + 1; setNotification({ message: `You've obtained a trophy from ${gameNameForNotification}. ${newTotalTrophyCount} out of 5 trophies collected!`, variant: 'success', showBadge: true // Continue showing the badge icon in the notice }); } } }, [score, currentGame, checkForBadge]); // Added checkForBadge to dependencies // Simulate loading time useEffect(() => { const timer = setTimeout(() => { setIsLoading(false); }, 1500); // Adjust delay as needed return () => clearTimeout(timer); }, []); // Cooldown timer effect useEffect(() => { if (!isCooldownActive || cooldownTimeLeft <= 0) return; const timerId = setInterval(() => { setCooldownTimeLeft(prevTime => prevTime - 1); }, 1000); return () => clearInterval(timerId); }, [isCooldownActive, cooldownTimeLeft]); useEffect(() => { if (isCooldownActive && cooldownTimeLeft === 0) { setIsCooldownActive(false); setNotification({ message: 'Cooldown finished! You can add sprites again.', variant: 'success', duration: 3000 }); } }, [isCooldownActive, cooldownTimeLeft]); // Effect for surprise notice removed const previousGameRef = useRef(null); // To track if player just finished a game // Conditionally render based on main menu visibility and current game const renderContent = () => { if (isLoading) { // Check loading state first return null; // Don't render anything else while loading } if (showMainMenu) { return renderMainMenu(); // Show main menu after loading } // Leaderboard functionality removed // Main menu dismissed, now check if a game is active or show game selector switch(currentGame) { case 'soundMatchUp': return ; case 'stressDetective': return ; case 'unlink': return ; case 'phantomLetters': return ; case 'toneItRight': return ; case 'hub': // Explicitly handle 'hub' to show game selector return renderGameSelector(); default: // Check if currentGame corresponds to a known game const isValidGameId = gameOptions.some(game => game.id === currentGame); if (isValidGameId) { // If it's a valid game ID but not caught by the cases above (e.g., loading delay), // render null briefly to avoid flashing the selector. // console.warn(`Rendering game: ${currentGame}`); // Optional: for debugging return null; } else { // If it's not 'hub' and not a valid game ID, log error and show selector console.error(`Invalid currentGame state: ${currentGame}. Falling back to game selector.`); return renderGameSelector(); } } }; // Removed old sprite useEffects (movement, collision, mouse interaction) // Physics engine will handle movement and collisions. Interactions will be added later. // Reset all badges function const [showConfirmDialog, setShowConfirmDialog] = useState(false); const handleResetBadges = () => { // Show the confirmation dialog setShowConfirmDialog(true); }; const confirmResetBadges = () => { // Create a new badges object with all values set to false const resetBadges = { soundMatchUp: false, stressDetective: false, unlink: false, phantomLetters: false, toneItRight: false }; // Update badges state in context setBadges(resetBadges); // Save to localStorage localStorage.setItem('phoneticsGameBadges', JSON.stringify(resetBadges)); // Reset game progress for badges const currentProgress = JSON.parse(localStorage.getItem('phoneticsGameProgress') || '{}'); Object.keys(currentProgress).forEach(game => { if (currentProgress[game]) { currentProgress[game].highScore = 0; } }); localStorage.setItem('phoneticsGameProgress', JSON.stringify(currentProgress)); // Close the confirmation dialog setShowConfirmDialog(false); // Show notification setNotification({ message: "All badges have been reset!", variant: 'info', duration: 3000 }); }; return (

{/* Loading Indicator */} {isLoading && (

Loading Games...

)} {/* Modal for Phonetic Symbols - only render if not loading */} {!isLoading && showSymbolsModal && setShowSymbolsModal(false)} />} {/* Instruction Notice Modal - only render if not loading */} {!isLoading && instructionNotice && ( setInstructionNotice(null)} // Simple close, game won't start onStartGame={handleStartGameFromNotice} /> )} {/* Surprise Notice Modal rendering removed */} {/* Confirmation Dialog - only render if not loading and no other primary modal is up */} {!isLoading && !instructionNotice && ( setShowConfirmDialog(false)} confirmText="Reset Badges" cancelText="Cancel" type="danger" /> )} {/* Notification component - only render if not loading and no other primary modal is up */} {!isLoading && notification && !instructionNotice && (

{/* Changed minWidth to maxWidth and added a percentage width */} setNotification(null)} showBadge={notification.showBadge} />

)} {/* Physics Canvas - renders only when not loading, on hub, and no primary modals active */} {!isLoading && currentGame === 'hub' && !showSymbolsModal && !instructionNotice && (

)} {/* Navigation buttons - only render if not loading */} {!isLoading && !showMainMenu && (

{/* Only show "Back to Games" button if currently in a game */} {currentGame !== 'hub' && ( )} {/* Always show Home button */}

Score: {score}

)} {/* Render the main content - only if not loading */} {/* Apply pointerEvents: none when hub is active to allow canvas interaction, but auto otherwise */} {!isLoading && (

{renderContent()}

)} {/* Reset Badges Button - Only show when not loading, in hub, not main menu, not modal */} {!isLoading && currentGame === 'hub' && !showMainMenu && !showSymbolsModal && (

)}

); }; // Styles for the loading indicator const loadingStyles = { container: { position: 'fixed', // Cover the whole screen top: 0, left: 0, width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(249, 244, 255, 0.95)', // Match main container bg zIndex: 2000, // Ensure it's on top }, spinner: { border: '8px solid #f3f3f3', // Light grey borderTop: '8px solid #6a0dad', // Purple borderRadius: '50%', width: '60px', height: '60px', animation: 'spin 1s linear infinite', }, text: { marginTop: '20px', fontSize: '1.2rem', fontWeight: 'bold', color: '#6a0dad', }, // Keyframes need to be added globally or in a style tag if needed // This example assumes a global style tag exists in main.jsx or similar }; // Ensure spin keyframes are defined (can be added in main.jsx's style tag) /* @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } */ // New component for Phonetic Symbols Modal const PhoneticSymbolsModal = ({ onClose }) => { // Updated helper function to handle various parenthesis placements const formatExample = (symbol, exampleWord, exampleSegment) => { // Regex to find the segment within parentheses: e.g., f(ee)t -> matches 'ee' const match = exampleSegment.match(/$([^)]+)$/); if (!match) { // If no parentheses, just return the word (shouldn't happen with current data) return <>{symbol} – {exampleWord}; } const underlinedPart = match[1]; // e.g., 'g' const fullSegment = match[0]; // e.g., '(g)' // Find the start index of the full segment like '(g)' within the word 'go' const segmentStartIndex = exampleSegment.indexOf(fullSegment); // The actual underlined character starts right after the opening parenthesis // Use the segment string to find the index, then apply it to the word const underlineStartIndexInWord = segmentStartIndex; // Assuming segment is part of word or matches structure if (underlineStartIndexInWord === -1 || underlineStartIndexInWord >= exampleWord.length) { // Fallback: If segment structure doesn't match word exactly, try direct search const directIndex = exampleWord.indexOf(underlinedPart); if (directIndex !== -1) { console.warn(`Using fallback underline method for "${underlinedPart}" in "${exampleWord}"`); const before = exampleWord.substring(0, directIndex); const after = exampleWord.substring(directIndex + underlinedPart.length); return <>{symbol} – {before}{underlinedPart}{after}; } else { console.error(`Cannot find underline target "${underlinedPart}" in "${exampleWord}" using segment "${exampleSegment}"`); return <>{symbol} – {exampleWord}; } } // Construct the output using the calculated start index in the word const before = exampleWord.substring(0, underlineStartIndexInWord); // Get the actual character(s) from the word at the correct position const actualUnderlinedText = exampleWord.substr(underlineStartIndexInWord, underlinedPart.length); const after = exampleWord.substring(underlineStartIndexInWord + underlinedPart.length); return ( <> {symbol} – {before} {actualUnderlinedText} {after} ); }; // Define data structures for symbols const vowels = { monophthongs: [ { symbol: 'iː', word: 'bean', segment: 'b(ea)n' }, { symbol: 'ɪ', word: 'kit', segment: 'k(i)t' }, { symbol: 'uː', word: 'moon', segment: 'm(oo)n' }, { symbol: 'ʊ', word: 'shook', segment: 'sh(oo)k' }, { symbol: 'əː', word: 'sir', segment: 's(ir)' }, { symbol: 'ə', word: 'about', segment: '(a)bout' }, { symbol: 'ɛː', word: 'hair', segment: 'h(air)' }, { symbol: 'ɛ', word: 'met', segment: 'm(e)t' }, { symbol: 'a', word: 'pan', segment: 'p(a)n' }, { symbol: 'ɑː', word: 'card', segment: 'c(ar)d' }, { symbol: 'ʌ', word: 'fun', segment: 'f(u)n' }, { symbol: 'ɔː', word: 'shore', segment: 'sh(o)re' }, { symbol: 'ɒ', word: 'lock', segment: 'l(o)ck' }, ], diphthongs: [ { symbol: 'ɪə', word: 'near', segment: 'n(ea)r' }, { symbol: 'eɪ', word: 'same', segment: 's(a)me' }, { symbol: 'aʊ', word: 'loud', segment: 'l(ou)d' }, { symbol: 'əʊ', word: 'go', segment: 'g(o)' }, { symbol: 'ʌɪ', word: 'hide', segment: 'h(i)de' }, { symbol: 'ɔɪ', word: 'choice', segment: 'ch(oi)ce' }, ] }; const consonants = { plosives: [ { symbol: 'p', word: 'pen', segment: '(p)en' }, { symbol: 'b', word: 'bat', segment: '(b)at' }, { symbol: 't', word: 'top', segment: '(t)op' }, { symbol: 'd', word: 'dog', segment: '(d)og' }, { symbol: 'k', word: 'kite', segment: '(k)ite' }, { symbol: 'g', word: 'go', segment: '(g)o' }, // Ensured 'g' is marked ], fricatives: [ { symbol: 'f', word: 'fish', segment: '(f)ish' }, { symbol: 'v', word: 'van', segment: '(v)an' }, { symbol: 'θ', word: 'think', segment: '(th)ink' }, { symbol: 'ð', word: 'this', segment: '(th)is' }, { symbol: 's', word: 'sun', segment: '(s)un' }, { symbol: 'z', word: 'zoo', segment: '(z)oo' }, { symbol: 'ʃ', word: 'ship', segment: '(sh)ip' }, { symbol: 'ʒ', word: 'measure', segment: 'mea(s)ure' }, { symbol: 'h', word: 'hat', segment: '(h)at' }, ], affricates: [ { symbol: 'tʃ', word: 'chair', segment: '(ch)air' }, { symbol: 'dʒ', word: 'jump', segment: '(j)ump' }, // Ensured 'j' is marked ], nasals: [ { symbol: 'm', word: 'man', segment: '(m)an' }, { symbol: 'n', word: 'nose', segment: '(n)ose' }, { symbol: 'ŋ', word: 'sing', segment: 'si(ng)' }, ], lateral: [ { symbol: 'l', word: 'leg', segment: '(l)eg' }, ], approximants: [ { symbol: 'r', word: 'red', segment: '(r)ed' }, { symbol: 'j', word: 'yes', segment: '(y)es' }, { symbol: 'w', word: 'wet', segment: '(w)et' }, ] }; const boxColors = ['#E3F2FD', '#FFF9C4', '#FCE4EC', '#E8F5E9', '#EDE7F6']; // Light blue, yellow, pink, green, purple return (

e.stopPropagation()}>

Phonetic Symbols (IPA)

{/* Vowels Section */} {/* Vowels Section */}

Vowels

Monophthongs

Single, pure vowel sounds that stay constant.

{vowels.monophthongs.map((item, index) => (

{formatExample(item.symbol, item.word, item.segment)}

))}

Diphthongs

Complex vowel sounds that glide from one vowel to another.

{vowels.diphthongs.map((item, index) => (

{formatExample(item.symbol, item.word, item.segment)}

))}

{/* Consonants Section */}

Consonants

{Object.entries(consonants).map(([categoryKey, items], categoryIndex) => { const categoryInfo = { plosives: "Sounds produced by blocking then releasing airflow", fricatives: "Consonants made by forcing air through a narrow space, causing friction.", affricates: "Sounds that begin as plosives and release as fricatives.", nasals: "Sounds made by airflow through the nose", lateral: "Air flows around the sides of the tongue", approximants: "Sounds made with little obstruction of airflow" }; return (

0 ? '20px' : '0'}}> {categoryKey.charAt(0).toUpperCase() + categoryKey.slice(1)}

{categoryInfo[categoryKey]}

{items.map((item, index) => (

{formatExample(item.symbol, item.word, item.segment)}

))}

); })}

); }; // Styles for the modal const modalStyles = { overlay: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0, 0, 0, 0.6)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 1100, // Ensure modal is above other content }, content: { backgroundColor: '#fff', padding: '30px', borderRadius: '10px', width: '90%', maxWidth: '600px', maxHeight: '85vh', overflowY: 'auto', position: 'relative', boxShadow: '0 5px 15px rgba(0,0,0,0.3)', fontFamily: 'inherit', }, closeButton: { position: 'absolute', top: '10px', right: '10px', background: 'none', border: 'none', fontSize: '24px', fontWeight: 'bold', cursor: 'pointer', color: '#888', }, title: { textAlign: 'center', color: '#6a0dad', marginBottom: '25px', marginTop: '0', fontFamily: "'Luckiest Guy', cursive", fontSize: 'clamp(1.8rem, 5vw, 2.2rem)', }, section: { marginBottom: '20px', }, sectionTitle: { color: '#333', borderBottom: '2px solid #eee', paddingBottom: '5px', marginBottom: '15px', fontSize: 'clamp(1.2rem, 4vw, 1.4rem)', }, subCategoryTitle: { // Style for sub-category titles like Monophthongs color: '#555', fontSize: 'clamp(1rem, 3.5vw, 1.2rem)', marginTop: '10px', // Space above sub-category title marginBottom: '5px', fontWeight: '600', }, categoryDescription: { // Style for category descriptions fontSize: 'clamp(0.85rem, 2.5vw, 0.95rem)', color: '#666', marginBottom: '15px', fontStyle: 'italic', lineHeight: '1.4' }, gridContainer: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(110px, 1fr))', // Reduced min width for better mobile fit gap: '10px', // Slightly reduce gap padding: '0', }, symbolBox: { padding: '12px', borderRadius: '8px', // backgroundColor is set inline fontSize: 'clamp(0.9rem, 3vw, 1rem)', color: '#333', textAlign: 'left', boxShadow: '0 2px 4px rgba(0,0,0,0.05)', lineHeight: '1.5', fontFamily: 'Arial, sans-serif', }, symbol: { fontWeight: 'bold', fontFamily: 'Arial, sans-serif', color: '#555', marginRight: '5px', display: 'inline-block', minWidth: '30px', textAlign: 'center' // Center the symbol itself }, }; const GameCard = ({ title, description, color, onClick, hasBadge, isSmall }) => { const cardWidth = isSmall ? 'clamp(65px, 13vw, 95px)' : 'clamp(100px, 22vw, 180px)'; // Adjusted min for non-small const cardHeight = isSmall ? 'clamp(65px, 13vw, 95px)' : 'clamp(100px, 22vw, 180px)'; // Adjusted min for non-small const padding = isSmall ? 'clamp(4px, 1.2vw, 8px)' : 'clamp(10px, 2.5vw, 15px)'; // Adjusted vw for non-small padding const titleFontSize = isSmall ? 'clamp(0.55rem, 2vw, 0.8rem)' : 'clamp(0.8rem, 3.5vw, 1.1rem)'; // Slightly adjusted non-small title const descFontSize = isSmall ? 'clamp(0.45rem, 1.5vw, 0.65rem)' : 'clamp(0.65rem, 2.5vw, 0.85rem)'; // Slightly adjusted non-small desc const badgeSize = isSmall ? '18px' : '30px'; // Further reduced badge size const badgeFontSize = isSmall ? '9px' : '16px'; // Further reduced badge font size const badgePosition = isSmall ? '-5px' : '-10px'; // Adjust badge position for even smaller cards return (

{ e.currentTarget.style.transform = 'scale(1.05)'; e.currentTarget.style.boxShadow = '0 8px 16px rgba(0,0,0,0.2)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)'; }} >

{title}

{description}

{hasBadge && (

🏆

)}

); }; // Removed level property from gameOptions const gameOptions = [ { id: 'soundMatchUp', title: 'Sound Match-Up', description: 'Match sounds to letters', color: '#90EE90', // Light Green displayName: 'Sound Match-Up Master', icon: '🏆', instructions: { goal: 'Choose the correct sound or letter to complete the word you hear.', howToPlay: [ 'Listen to the audio clip.', 'Fill in the blank by selecting the correct vowel or consonant.' ], trophyNote: 'Collect 200 points to obtain a trophy! 🏆' } }, { id: 'stressDetective', title: 'Stress Detective', description: 'Find the stressed syllable', color: '#A5D6A7', // Medium Green displayName: 'Stress Master', icon: '🏆', instructions: { goal: 'Identify the correct stressed syllable in a word.', howToPlay: [ 'Read or listen to a word.', 'Choose the syllable you think is stressed.' ], trophyNote: 'Collect 200 points to obtain a trophy! 🏆' } }, { id: 'unlink', title: 'Unlink!', description: 'Separate joined words', color: '#FFD54F', // Light Yellow/Orange displayName: 'Word Separator', icon: '🏆', instructions: { goal: 'Break down connected speech into its correct full form.', howToPlay: [ 'Observe the reduced phrase.', 'Hold and drag the correct expanded version into the box.', 'Read the hint for some context!' ], trophyNote: 'Collect 200 points to obtain a trophy! 🏆' } }, { id: 'phantomLetters', title: 'Phantom Letters', description: 'Identify silent letters', color: '#FFB74D', // Medium Yellow/Orange displayName: 'Silent Letter Expert', icon: '🏆', instructions: { goal: 'Spot and eliminate silent letters in tricky words.', howToPlay: [ 'Look at the word provided.', 'Click the silent (phantom) letter in the word, then press Submit.' ], trophyNote: 'Collect 200 points to obtain a trophy! 🏆' } }, { id: 'toneItRight', title: 'Tone It Right!', description: 'Match intonation contours', color: '#E57373', // Light Red displayName: 'Intonation Master', icon: '🏆', instructions: { goal: 'Choose the sentence that matches the right tone and intention.', howToPlay: [ 'Read a dialogue prompt.', 'Pick one of three responses, each with a different tone.', 'Your choice affects how the conversation continues—choose wisely!', 'There are 5 different endings (≖ ͜ʖ≖)' ], trophyNote: 'Collect 200 points to obtain a trophy! 🏆' } }, ]; const buttonStyle = { padding: '8px 15px', backgroundColor: '#6a0dad', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', fontWeight: 'bold', transition: 'transform 0.1s ease', pointerEvents: 'auto' // Ensure buttons are always clickable }; // Helper functions for cat mood UI (kept as is) const getMoodColor = (happiness) => { if (happiness >= 80) return '#4CAF50'; // Happy - green if (happiness >= 50) return '#8BC34A'; // Content - light green if (happiness >= 30) return '#FFC107'; // Neutral - yellow if (happiness >= 15) return '#FF9800'; // Unhappy - orange return '#F44336'; // Sad - red }; const getMoodEmoji = (happiness) => { if (happiness >= 80) return '😸'; // Very happy if (happiness >= 60) return '😺'; // Happy if (happiness >= 40) return '😐'; // Neutral if (happiness >= 20) return '😿'; // Sad return '🙀'; // Very sad }; // Leaderboard rendering function removed // Styles for the congratulatory notice const congratsNoticeStyles = { container: { backgroundColor: '#E3F2FD', // Light blue, matching symbol box border: '2px solid #90CAF9', // Slightly darker blue border borderRadius: '10px', padding: '20px', margin: '20px auto', maxWidth: '550px', textAlign: 'center', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', pointerEvents: 'auto', // Ensure links are clickable }, title: { fontFamily: "'Luckiest Guy', cursive", fontSize: 'clamp(1.8rem, 5vw, 2.2rem)', color: '#1E88E5', // Vibrant blue margin: '0 0 15px 0', }, text: { fontSize: 'clamp(0.95rem, 3vw, 1.1rem)', color: '#333', lineHeight: '1.6', marginBottom: '20px', }, surveyLink: { display: 'inline-block', padding: '12px 25px', backgroundColor: '#4CAF50', // Green, matching buttons color: 'white', textDecoration: 'none', borderRadius: '8px', fontWeight: 'bold', fontSize: 'clamp(1rem, 3.5vw, 1.15rem)', transition: 'transform 0.2s ease, background-color 0.2s ease', } }; export default GameHub;