import React, { useState, useContext, createContext, useRef, useEffect, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; // --- TYPES --- type ReaderProgress = { [key: number]: number; }; type Reader = { id: number; name: string; avatar: string; ageRange: 'kids' | 'teens' | 'adults'; joinedChallengeIds: number[]; progress: ReaderProgress; }; type Book = { id: number; readerId: number; title: string; author?: string; status: 'reading' | 'finished' | 'to-read'; challengeId?: number | null; progressMinutes: number; }; // --- MOCK DATA --- const translations = { en: { appTitle: "Georges River Reads", logReading: "Log Reading", challenges: "Challenges", badges: "Badges", events: "Events", profile: "Profile", home: "Home", currentReader: "Current Reader", switchReader: "Switch Reader", activeChallenge: "Your Active Challenge", activeChallenges: "Your Active Challenges", logYourReading: "Log Your Reading", minutesRead: "Minutes Read", save: "Save", cancel: "Cancel", availableChallenges: "Available Challenges", upcomingEvents: "Upcoming Events", familyMembers: "Family Members", accountSettings: "Account Settings", goal: "Goal", progress: "Progress", addReader: "Add Reader", newReaderName: "New Reader's Name", chooseAvatar: "Choose an Avatar", explorer: "Explorer", explorerPassport: "Georges River Explorer Passport", scanNewCode: "Scan New QR Code", readyToScan: "Ready to Scan", simulateScanAt: "Simulate Scan at {libraryName}", forChildren: "For Children (Ages 4-10)", forTeens: "For Teens (Ages 11-18)", forAdults: "For Adults", generalChallenges: "General Challenges", books: "books", mins: "mins", ageRange: "Age range", ageKids: "Kids (Ages 0-13)", ageTeens: "Teens (Ages 13-18)", ageAdults: "Adults", joinChallenge: "Join Challenge", joined: "Joined", noActiveChallenge: "No Active Challenge", browseChallengesPrompt: "Browse the challenges page to start a new adventure!", manageChallenge: "Manage", whosJoining: "Who is joining this challenge?", applyToChallenge: "Apply to which challenge(s)?", pleaseSelectOneChallenge: "Please select at least one challenge to log your reading for.", noBadges: "No Badges Earned Yet!", noBadgesPrompt: "Complete a challenge to see your first badge here.", challengeBadges: "Challenge Badges", bookClub: "Book Club", virtualBookClub: "Spring Book Clubs", thisMonthsPick: "Spring Book Clubs", bookClubDescription: "Read along with us! Join our online discussion to share your thoughts and connect with fellow readers from the Georges River community.", joinTheDiscussion: "Join the Discussion", bookOfTheMonth: "Book of the Month", recommended: "Recommended", forKids: "For Kids", findAtLibrary: "Find at Library", // New translations for logging flow title: "Title", authorOptional: "Author (optional)", next: "Next", back: "Back", loggingFor: "Logging for:", // New translations for "Currently Reading" feature whatWillYouReadNext: "What will you read next? Tap the '+' to start a new book!", addANewBook: "Add a New Book", linkToChallenge: "Link to a Challenge", startReading: "Start Reading", logTime: "Log Time", imFinished: "I'm Finished", howManyMinutes: "How many minutes did you read today?", congratulations: "Congratulations!", markAsFinished: "Mark '{bookTitle}' as finished?", yesImFinished: "Yes, I'm Finished!", notYet: "Not Yet", currentlyReading: "Currently Reading", linkedTo: "Linked to:", startNewBook: "Start a New Book", completedBooks: "Completed Books", noCompletedBooks: "No Completed Books Yet!", noCompletedBooksPrompt: "Finish a book to add it to your collection.", noJoinedChallenges: "No Joined Challenges Yet!", noJoinedChallengesPrompt: "You can start a book without a challenge, or go to the Challenges page to join one.", // Login page translations welcome: "Welcome Back!", loginPrompt: "Please sign in to continue.", email: "Email Address", password: "Password", login: "Login", logout: "Logout", invalidCredentials: "Invalid email or password. Please try again.", }, zh: { appTitle: "乔治河阅读", logReading: "记录阅读", challenges: "挑战", badges: "徽章", events: "活动", profile: "个人资料", home: "主页", currentReader: "当前读者", switchReader: "切换读者", activeChallenge: "您的当前挑战", activeChallenges: "您的当前挑战", logYourReading: "记录您的阅读", minutesRead: "阅读分钟", save: "保存", cancel: "取消", availableChallenges: "可参与的挑战", upcomingEvents: "近期活动", familyMembers: "家庭成员", accountSettings: "账户设置", goal: "目标", progress: "进度", addReader: "添加读者", newReaderName: "新读者姓名", chooseAvatar: "选择头像", explorer: "探索", explorerPassport: "乔治河探索者护照", scanNewCode: "扫描新二维码", readyToScan: "准备扫描", simulateScanAt: "模拟在 {libraryName} 扫描", forChildren: "儿童挑战 (4-10岁)", forTeens: "青少年挑战 (11-18岁)", forAdults: "成人挑战", generalChallenges: "通用挑战", books: "书籍", mins: "分钟", ageRange: "年龄范围", ageKids: "儿童 (0-13岁)", ageTeens: "青少年 (13-18岁)", ageAdults: "成人", joinChallenge: "加入挑战", joined: "已加入", noActiveChallenge: "没有进行中的挑战", browseChallengesPrompt: "浏览挑战页面，开始新的冒险吧！", manageChallenge: "管理", whosJoining: "谁要参加这个挑战？", applyToChallenge: "应用于挑战", pleaseSelectOneChallenge: "请至少选择一个挑战来记录您的阅读时间。", noBadges: "尚未获得徽章！", noBadgesPrompt: "完成一个挑战，在这里查看你的第一个徽章。", challengeBadges: "挑战徽章", bookClub: "读书俱乐部", virtualBookClub: "春季读书俱乐部", thisMonthsPick: "春季读书俱乐部", bookClubDescription: "与我们一起阅读！加入我们的在线讨论，分享您的想法，并与乔治河社区的其他读者联系。", joinTheDiscussion: "加入讨论", bookOfTheMonth: "本月之书", recommended: "推荐", forKids: "儿童推荐", findAtLibrary: "在图书馆查找", // New translations for logging flow title: "书名", authorOptional: "作者（选填）", next: "下一步", back: "返回", loggingFor: "记录:", // New translations for "Currently Reading" feature whatWillYouReadNext: "接下来要读什么？点击“+”开始一本新书！", addANewBook: "添加新书", linkToChallenge: "关联一个挑战", startReading: "开始阅读", logTime: "记录时间", imFinished: "我读完了", howManyMinutes: "今天你读了多少分钟？", congratulations: "恭喜！", markAsFinished: "确定将《{bookTitle}》标记为已读完吗？", yesImFinished: "是的，我读完了！", notYet: "还没", currentlyReading: "正在阅读", linkedTo: "关联于:", startNewBook: "开始一本新书", completedBooks: "已完成的书籍", noCompletedBooks: "还没有完成的书！", noCompletedBooksPrompt: "完成一本书，将其添加到您的收藏中。", noJoinedChallenges: "尚未加入任何挑战！", noJoinedChallengesPrompt: "您可以直接开始阅读，或前往“挑战”页面加入一个新挑战。", // Login page translations welcome: "欢迎回来！", loginPrompt: "请登录以继续。", email: "电子邮件地址", password: "密码", login: "登录", logout: "登出", invalidCredentials: "电子邮件或密码无效。请再试一次。", }, }; const initialReaders: Reader[] = [ { id: 1, name: 'Dad', avatar: '👨‍🦰', ageRange: 'adults', joinedChallengeIds: [1, 15], progress: { 1: 120, 15: 1 } }, { id: 2, name: 'Maya', avatar: '👧', ageRange: 'kids', joinedChallengeIds: [4, 7, 14], progress: { 4: 12, 7: 1, 14: 1 } }, { id: 3, name: 'Leo', avatar: '👦', ageRange: 'kids', joinedChallengeIds: [5], progress: { 5: 4 } }, ]; const initialBooks: Book[] = [ { id: 1, readerId: 1, title: 'Journey to the West', author: 'Wu Cheng\'en', status: 'reading', challengeId: 1, progressMinutes: 120 }, { id: 2, readerId: 2, title: 'The Peasant Prince', author: 'Li Cunxin', status: 'reading', challengeId: 4, progressMinutes: 30 }, { id: 3, readerId: 2, title: 'I am a Dragon', author: 'Ying Chang Compestine', status: 'finished', challengeId: 4, progressMinutes: 60 }, { id: 4, readerId: 3, title: 'Bilingual Bookworm Stories', author: 'Author', status: 'reading', challengeId: 5, progressMinutes: 0 }, ]; const initialChallenges = [ // General Challenges { id: 1, title: 'Summer Reading Quest', description: 'Read for 10 hours this summer.', goal: 600, badge: '🏆', unit: 'mins', category: 'general' }, { id: 2, title: 'Around the World', description: 'Read books from 5 different countries.', goal: 5, badge: '🌍', unit: 'books', category: 'general' }, { id: 3, title: 'Fantasy Fanatic', description: 'Finish 3 fantasy novels.', goal: 3, badge: '🧙‍♂️', unit: 'books', category: 'general' }, // Children Challenges { id: 4, title: 'The Great Zodiac Race', description: 'Read 12 books over the year, one for each animal of the Chinese zodiac.', goal: 12, badge: '🐲', unit: 'books', category: 'children' }, { id: 5, title: 'Bilingual Bookworm', description: 'Read 5 picture books in English and 5 in Mandarin or Cantonese.', goal: 10, badge: '🐛', unit: 'books', category: 'children' }, { id: 6, title: 'Dumpling Discovery', description: 'Read a book that features cooking or a delicious meal.', goal: 1, badge: '🥟', unit: 'books', category: 'children' }, { id: 7, title: 'My First Legend', description: 'Read a book that tells a classic Chinese legend, like the story of Mulan or the Weaving Girl.', goal: 1, badge: '📜', unit: 'books', category: 'children' }, // Teen Challenges { id: 8, title: 'Three Kingdoms Strategist', description: 'Read a book (fiction or non-fiction) about the Three Kingdoms period.', goal: 1, badge: '⚔️', unit: 'books', category: 'teens' }, { id: 9, title: 'Asian-Australian Voices', description: 'Read two books by prominent Asian-Australian authors.', goal: 2, badge: '🇦🇺', unit: 'books', category: 'teens' }, { id: 10, title: 'Silk Road Traveller', description: 'Read a book (fiction or non-fiction) about the Silk Road.', goal: 1, badge: '🐫', unit: 'books', category: 'teens' }, { id: 11, title: 'Future Shock', description: 'Read a Chinese science-fiction novel.', goal: 1, badge: '🚀', unit: 'books', category: 'teens' }, { id: 12, title: 'Dynasty Dive', description: 'Pick one Chinese dynasty and read one historical fiction book set within it.', goal: 1, badge: '🏯', unit: 'books', category: 'teens' }, { id: 13, title: 'Poetry & Power', description: 'Read a collection of classical Chinese poetry.', goal: 1, badge: '✒️', unit: 'books', category: 'teens' }, { id: 14, title: 'Taste of Home', description: 'Read a book where food plays a central role in the story\'s culture and family connections.', goal: 1, badge: '🍜', unit: 'books', category: 'teens' }, // Adult Challenges { id: 15, title: 'The Four Classics Challenge', description: 'Read the Four Great Classical Novels of China.', goal: 4, badge: '📚', unit: 'books', category: 'adults', isBookOfTheMonth: true }, { id: 16, title: 'Modern Literary Masters', description: 'Read a book by modern Chinese authors, like Mo Yan or Yu Hua.', goal: 1, badge: '✍️', unit: 'books', category: 'adults' }, { id: 17, title: 'Generational Journey', description: 'Read a family saga that spans multiple generations.', goal: 1, badge: '👨‍👩‍👧‍👦', unit: 'books', category: 'adults' }, { id: 18, title: 'Philosophical Pathways', description: 'Read a book about the core teachings of Taoism or Confucianism.', goal: 1, badge: '☯️', unit: 'books', category: 'adults' }, { id: 19, title: 'Non-Fiction Navigator', description: 'Read an in-depth non-fiction book about a specific period in Chinese history.', goal: 1, badge: '📖', unit: 'books', category: 'adults' }, { id: 20, title: 'Culinary Heritage', description: 'Read a memoir or biography where food and family recipes are central to the story.', goal: 1, badge: '🍲', unit: 'books', category: 'adults' }, { id: 21, title: 'Cross-Cultural Connection', description: 'Read a book by a Western author set in China and one by a Chinese author set in a Western country.', goal: 2, badge: '🤝', unit: 'books', category: 'adults' }, ]; const events = [ { id: 1, title: 'Bilingual Story Time', location: 'Hurstville Library', date: 'Sat, Aug 30 @ 10:00 AM' }, { id: 2, title: 'Author Visit: Sarah Chen', location: 'Kogarah Library', date: 'Tue, Sep 2 @ 6:00 PM' }, { id: 3, title: 'Library Craft Corner', location: 'Oatley Library', date: 'Fri, Sep 5 @ 3:30 PM' }, ]; const libraries = [ { id: 1, name: 'Hurstville Library', location: 'Hurstville', qrCodeValue: 'GR_HURSTVILLE_2025' }, { id: 3, name: 'Oatley Library', location: 'Oatley', qrCodeValue: 'GR_OATLEY_2025' }, { id: 4, name: 'Penshurst Library', location: 'Penshurst', qrCodeValue: 'GR_PENSHURST_2025' }, { id: 5, name: 'South Hurstville Library', location: 'S. Hurstville', qrCodeValue: 'GR_SOUTH_HURSTVILLE_2025' }, { id: 6, name: 'Clive James Library, Kogarah', location: 'Kogarah', qrCodeValue: 'GR_CLIVE_JAMES_2025' }, ]; const recommendations = { kids: [ { id: 1, title: 'The Peasant Prince', author: 'Li Cunxin', description: 'The inspiring story of a young boy from rural China who becomes a world-famous ballet dancer. Based on the author\'s own life.', emoji: '🕺' }, { id: 2, title: 'I am a Dragon', author: 'Ying Chang Compestine', description: 'A fun and vibrant story celebrating the Chinese New Year and the traditions of the zodiac animals.', emoji: '🐲' }, { id: 3, title: 'Whose Dumplings?', author: 'Gillian Sze', description: 'A heartwarming tale about a young girl who tries to figure out which family in her apartment building is making her favorite dumplings.', emoji: '🥟' }, ], teens: [ { id: 4, title: 'The Surprising Power of a Good Dumpling', author: 'Wai Chim', description: 'A moving story about a Chinese-Australian teen who has to care for her mother struggling with mental illness, while navigating school, friends, and her family\'s restaurant.', emoji: '❤️' }, { id: 5, title: 'Tiger Daughter', author: 'Rebecca Lim', description: 'An award-winning novel about the friendship between two Chinese-Australian teens and their struggle against family expectations and cultural pressures.', emoji: '🐅' }, { id: 6, title: 'Iron Widow', author: 'Xiran Jay Zhao', description: 'A sci-fi reimagining of Chinese history featuring giant mechs, fierce female pilots, and a challenge to patriarchal traditions.', emoji: '🤖' }, ], adults: [ { id: 7, title: 'Wild Swans: Three Daughters of China', author: 'Jung Chang', description: 'A powerful and epic historical account of three generations of women in China, from the last emperor to the era of Mao.', emoji: '🦢' }, { id: 8, title: 'Balzac and the Little Chinese Seamstress', author: 'Dai Sijie', description: 'A beautiful novel about two city boys sent for "re-education" in a remote mountain village during the Cultural Revolution, and how their discovery of a suitcase full of forbidden Western novels changes their lives.', emoji: '🎻' }, { id: 9, title: 'The Fortunes', author: 'Peter Ho Davies', description: 'A sweeping novel that examines 150 years of Chinese-American history through the lives of four distinct characters.', emoji: '📜' }, ], }; const bookClubs = [ { id: 1, name: "History Buffs Book Club", currentBook: "Wild Swans: Three Daughters of China", author: "Jung Chang", description: "Explore pivotal moments in history through compelling non-fiction and historical fiction.", emoji: '📜', joinLink: 'https://www.facebook.com/GeorgesRiverLibraries/' }, { id: 2, name: "Modern Fiction Circle", currentBook: "The Surprising Power of a Good Dumpling", author: "Wai Chim", description: "Discuss contemporary novels and discover new voices in the literary world.", emoji: '🥟', joinLink: 'https://www.facebook.com/GeorgesRiverLibraries/' }, { id: 3, name: "Young Adult Fantasy Fans", currentBook: "Iron Widow", author: "Xiran Jay Zhao", description: "Dive into magical realms, epic quests, and imaginative storytelling for teens and adults alike.", emoji: '🤖', joinLink: 'https://www.facebook.com/GeorgesRiverLibraries/' } ]; // --- CONTEXT FOR STATE MANAGEMENT --- const AppContext = createContext(null); const AppProvider = (props) => { const [isAuthenticated, setIsAuthenticated] = useState(false); const [currentReader, setCurrentReader] = useState(initialReaders[0]); const [activePage, setActivePage] = useState('home'); const [language, setLanguage] = useState('en'); const [isAddReaderModalOpen, setIsAddReaderModalOpen] = useState(false); const [readers, setReaders] = useState(initialReaders); const [challenges, setChallenges] = useState(initialChallenges); const [collectedStamps, setCollectedStamps] = useState([]); const [isExplorerScannerModalOpen, setIsExplorerScannerModalOpen] = useState(false); const [isJoinChallengeModalOpen, setIsJoinChallengeModalOpen] = useState(false); const [managingChallengeId, setManagingChallengeId] = useState(null); const [books, setBooks] = useState(initialBooks); const [isStartReadingFlowActive, setIsStartReadingFlowActive] = useState(false); const t = translations[language]; const login = (email, password) => { // This is a mock login. In a real app, you'd make an API call. if (email.toLowerCase() === 'family@georgesriver.nsw.gov.au' && password === 'password123') { setIsAuthenticated(true); return true; } return false; }; const logout = () => { setIsAuthenticated(false); // Optionally reset state to initial values if needed setCurrentReader(initialReaders[0]); setActivePage('home'); }; const addReader = (name: string, avatar: string, ageRange: 'kids' | 'teens' | 'adults') => { const newReader: Reader = { id: Date.now(), // simple unique id name, avatar, ageRange, joinedChallengeIds: [], progress: {}, }; setReaders([...readers, newReader]); }; const updateChallengeParticipants = (challengeId, participatingReaderIds) => { setReaders(prevReaders => { const newReaders = prevReaders.map(reader => { const hasJoined = reader.joinedChallengeIds.includes(challengeId); const shouldJoin = participatingReaderIds.includes(reader.id); if (shouldJoin && !hasJoined) { return { ...reader, joinedChallengeIds: [...reader.joinedChallengeIds, challengeId] }; } else if (!shouldJoin && hasJoined) { return { ...reader, joinedChallengeIds: reader.joinedChallengeIds.filter(id => id !== challengeId) }; } return reader; }); const updatedCurrentReader = newReaders.find(r => r.id === currentReader.id); if (updatedCurrentReader) { setCurrentReader(updatedCurrentReader); } return newReaders; }); }; const updateChallengeProgress = (challengeId, value) => { let updatedReader; setReaders(prevReaders => prevReaders.map(reader => { if (reader.id === currentReader.id && reader.joinedChallengeIds.includes(challengeId)) { const challenge = challenges.find(c => c.id === challengeId); if (!challenge) return reader; const currentProgress = reader.progress?.[challengeId] || 0; const newProgress = currentProgress + value; updatedReader = { ...reader, progress: { ...reader.progress, [challengeId]: Math.min(newProgress, challenge.goal), }, }; return updatedReader; } return reader; }) ); if (updatedReader) { setCurrentReader(updatedReader); } }; const startReading = (bookDetails, challengeId) => { const newBook: Book = { id: Date.now(), readerId: currentReader.id, title: bookDetails.title, author: bookDetails.author, status: 'reading', challengeId, progressMinutes: 0, }; setBooks(prevBooks => [...prevBooks, newBook]); // Auto-join the challenge if one is selected and the reader hasn't joined it yet if (challengeId && !currentReader.joinedChallengeIds.includes(challengeId)) { setReaders(prevReaders => { const newReaders = prevReaders.map(reader => { if (reader.id === currentReader.id) { return { ...reader, joinedChallengeIds: [...reader.joinedChallengeIds, challengeId] }; } return reader; }); // Also update the currentReader in context to keep it in sync const updatedCurrentReader = newReaders.find(r => r.id === currentReader.id); if (updatedCurrentReader) { setCurrentReader(updatedCurrentReader); } return newReaders; }); } }; const logProgress = (bookId, minutes) => { let bookToUpdate; setBooks(prevBooks => prevBooks.map(book => { if (book.id === bookId) { bookToUpdate = { ...book, progressMinutes: book.progressMinutes + minutes, }; return bookToUpdate; } return book; }) ); if (bookToUpdate?.challengeId) { const challenge = challenges.find(c => c.id === bookToUpdate.challengeId); if (challenge && challenge.unit === 'mins') { updateChallengeProgress(bookToUpdate.challengeId, minutes); } } }; const finishBook = (bookId) => { let finishedBook; setBooks(prevBooks => prevBooks.map(book => { if (book.id === bookId) { finishedBook = { ...book, status: 'finished' }; return finishedBook; } return book; }) ); if (finishedBook?.challengeId) { const challenge = challenges.find(c => c.id === finishedBook.challengeId); if (challenge && challenge.unit === 'books') { updateChallengeProgress(finishedBook.challengeId, 1); } } }; const collectStamp = (qrCodeValue) => { setCollectedStamps(prevStamps => { if (prevStamps.includes(qrCodeValue)) { return prevStamps; } return [...prevStamps, qrCodeValue]; }); }; const value = { isAuthenticated, login, logout, currentReader, setCurrentReader, activePage, setActivePage, language, setLanguage, isAddReaderModalOpen, setIsAddReaderModalOpen, readers, addReader, challenges, events, libraries, collectedStamps, collectStamp, isExplorerScannerModalOpen, setIsExplorerScannerModalOpen, isJoinChallengeModalOpen, setIsJoinChallengeModalOpen, managingChallengeId, setManagingChallengeId, updateChallengeParticipants, books, startReading, logProgress, finishBook, isStartReadingFlowActive, setIsStartReadingFlowActive, t, // translations }; return {props.children}; }; const useAppContext = () => useContext(AppContext); // --- REUSABLE COMPONENTS --- const Header = () => { const { t, language, setLanguage } = useAppContext(); const logoUrl = 'https://georgesriver.spydus.com/api/maintenance/1.0/imagebrowser/image?blobName=a31cf63f-7e24-41d5-b1f8-c206bde45ce6.png'; return (
Georges River Council Logo

{t.appTitle}

); }; const HomeIcon = ({ className }) => ( ); const ChallengesIcon = ({ className }) => ( ); const BadgesIcon = ({ className }) => ( ); const RecommendedIcon = ({ className }) => ( ); const BookClubIcon = ({ className }) => ( ); const EventsIcon = ({ className }) => ( ); const ProfileIcon = ({ className }) => ( ); const ClockIcon = ({ className }) => ( ); const OpenBookIcon = ({ className }) => ( ); const BottomNav = () => { const { activePage, setActivePage, t } = useAppContext(); const navItems = [ { id: 'home', label: t.home, icon: HomeIcon }, { id: 'challenges', label: t.challenges, icon: ChallengesIcon }, { id: 'badges', label: t.badges, icon: BadgesIcon }, { id: 'recommended', label: t.recommended, icon: RecommendedIcon }, { id: 'bookclub', label: t.bookClub, icon: BookClubIcon }, { id: 'events', label: t.events, icon: EventsIcon }, { id: 'profile', label: t.profile, icon: ProfileIcon }, ]; return (
{navItems.map(item => { const IconComponent = item.icon; return ( ); })}
); }; const ReaderSelector = () => { const { currentReader, setCurrentReader, readers, t } = useAppContext(); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const selectReader = (reader) => { setCurrentReader(reader); setIsDropdownOpen(false); }; return (

{t.currentReader}

{isDropdownOpen && (
{readers.map(reader => ( ))}
)}
); }; const ChallengeCard = ({ challenge, isJoined = false, onManage = () => {}, showJoinButton = false, progress = 0, isBookOfTheMonth = false, totalMinutes, totalBooks }) => { const { t } = useAppContext(); const percentage = challenge.goal > 0 ? Math.min(100, Math.round((progress / challenge.goal) * 100)) : 0; const unitLabel = challenge.unit === 'books' ? t.books : t.mins; return (
{isBookOfTheMonth && (
{t.bookOfTheMonth}
)}
{challenge.badge}

{challenge.title}

{challenge.description}

{totalMinutes} {t.mins}
{totalBooks} {t.books}
{t.goal}: {challenge.goal} {unitLabel}
{showJoinButton && ( )}
); }; const EventCard = (props) => { const { event } = props; return (

{event.title}

{event.location}

{event.date}

); }; const AddReaderModal = () => { const { isAddReaderModalOpen, setIsAddReaderModalOpen, addReader, t } = useAppContext(); const [name, setName] = useState(''); const [selectedAvatar, setSelectedAvatar] = useState('😀'); const [ageRange, setAgeRange] = useState<'kids' | 'teens' | 'adults'>('kids'); const avatars = ['😀', '👧', '👦', '👩‍🦰', '👨‍🦰', '👵', '👴', '🐶', '🐱', '🦄', '🤖']; if (!isAddReaderModalOpen) return null; const handleSubmit = (e) => { e.preventDefault(); if (name.trim() && selectedAvatar) { addReader(name.trim(), selectedAvatar, ageRange); setName(''); setSelectedAvatar('😀'); setAgeRange('kids'); setIsAddReaderModalOpen(false); } }; return (

{t.addReader}

setName(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-accent focus:border-accent sm:text-sm" placeholder="e.g., Grandma" required />

{t.chooseAvatar}

{avatars.map(avatar => ( ))}
); }; const ExplorerScannerModal = () => { const { isExplorerScannerModalOpen, setIsExplorerScannerModalOpen, collectStamp, libraries, t } = useAppContext(); if (!isExplorerScannerModalOpen) return null; const handleScan = (qrCodeValue) => { collectStamp(qrCodeValue); setIsExplorerScannerModalOpen(false); }; return (

{t.readyToScan}

{libraries.map(library => ( ))}
); }; const JoinChallengeModal = () => { const { isJoinChallengeModalOpen, setIsJoinChallengeModalOpen, managingChallengeId, setManagingChallengeId, readers, challenges, updateChallengeParticipants, t } = useAppContext(); const [selectedReaderIds, setSelectedReaderIds] = useState([]); const challenge = challenges.find(c => c.id === managingChallengeId); useEffect(() => { if (challenge) { const participatingIds = readers .filter(r => r.joinedChallengeIds.includes(challenge.id)) .map(r => r.id); setSelectedReaderIds(participatingIds); } else { setSelectedReaderIds([]); } }, [challenge, readers, isJoinChallengeModalOpen]); if (!isJoinChallengeModalOpen || !challenge) return null; const handleToggleReader = (readerId) => { setSelectedReaderIds(prevIds => prevIds.includes(readerId) ? prevIds.filter(id => id !== readerId) : [...prevIds, readerId] ); }; const handleSave = () => { updateChallengeParticipants(managingChallengeId, selectedReaderIds); handleClose(); }; const handleClose = () => { setIsJoinChallengeModalOpen(false); setManagingChallengeId(null); }; return (

{challenge.title}

{t.whosJoining}

{readers.map(reader => { const isSelected = selectedReaderIds.includes(reader.id); return (
handleToggleReader(reader.id)} onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') handleToggleReader(reader.id)}} className={`flex items-center gap-4 p-3 rounded-lg cursor-pointer transition-colors ${isSelected ? 'bg-accent text-white' : 'bg-lighter hover:bg-light'}`} role="checkbox" aria-checked={isSelected} tabIndex={0} >
{isSelected && }
{reader.avatar} {reader.name}
) })}
); }; // --- NEW BOOK MANAGEMENT COMPONENTS --- const LogTimeModal = ({ book, onSave, onClose, t }) => { const minutesInputRef = useRef(null); const handleSubmit = (e) => { e.preventDefault(); const minutes = parseInt(minutesInputRef.current.value, 10); if (!isNaN(minutes) && minutes > 0) { onSave(minutes); } }; return (

{t.logTime}

{book.title}

); }; const FinishBookModal = ({ book, onConfirm, onClose, t }) => { return (

{t.congratulations} 🎉

{t.markAsFinished.replace('{bookTitle}', book.title)}

); }; const CurrentlyReadingCard = ({ book }) => { const { t, challenges, logProgress, finishBook } = useAppContext(); const [activeModal, setActiveModal] = useState<'log' | 'finish' | null>(null); const linkedChallenge = challenges.find(c => c.id === book.challengeId); const handleLogSave = (minutes) => { logProgress(book.id, minutes); setActiveModal(null); }; const handleFinishConfirm = () => { finishBook(book.id); setActiveModal(null); }; const shouldShowProgressBar = linkedChallenge && linkedChallenge.unit === 'mins'; const progressPercentage = shouldShowProgressBar ? Math.min(100, Math.round((book.progressMinutes / linkedChallenge.goal) * 100)) : 0; return ( <>
{book.title.charAt(0)}

{book.title}

{book.author &&

by {book.author}

} {linkedChallenge && (
{linkedChallenge.badge} {t.linkedTo} {linkedChallenge.title}
)} {shouldShowProgressBar && (
{book.progressMinutes} / {linkedChallenge.goal} {t.mins}
)}
{activeModal === 'log' && setActiveModal(null)} t={t} />} {activeModal === 'finish' && setActiveModal(null)} t={t} />} ); }; const CurrentlyReadingShelf = () => { const { t, books, currentReader } = useAppContext(); const currentlyReadingBooks = books.filter(b => b.readerId === currentReader.id && b.status === 'reading'); return (

{t.currentlyReading}

{currentlyReadingBooks.length > 0 ? (
{currentlyReadingBooks.map(book => )}
) : (

📖

{t.whatWillYouReadNext}

)}
); }; const CompletedBooksShelf = () => { const { t, books, currentReader, challenges } = useAppContext(); const completedBooks = books.filter(b => b.readerId === currentReader.id && b.status === 'finished'); return (

{t.completedBooks}

{completedBooks.length > 0 ? (
{completedBooks.map(book => { const linkedChallenge = challenges.find(c => c.id === book.challengeId); return (

{book.title}

{book.author &&

by {book.author}

} {linkedChallenge && (
{linkedChallenge.badge} {linkedChallenge.title}
)}
); })}
) : (

{t.noCompletedBooks}

{t.noCompletedBooksPrompt}

)}
); }; const ManualEntryFormNew = ({ onNext, onCancel, t }) => { const [title, setTitle] = useState(''); const [author, setAuthor] = useState(''); const handleSubmit = (e) => { e.preventDefault(); if (title.trim()) { onNext({ title: title.trim(), author: author.trim() }); } }; return (

{t.startNewBook}

setTitle(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-accent focus:border-accent sm:text-sm text-gray-900" placeholder="e.g., The Very Hungry Caterpillar" required />
setAuthor(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-accent focus:border-accent sm:text-sm text-gray-900" placeholder="e.g., Eric Carle" />
); }; const ChallengeSelector = ({ onStartReading, onBack, t }) => { const { currentReader, challenges } = useAppContext(); const [selectedChallengeId, setSelectedChallengeId] = useState(null); const joinedChallenges = challenges.filter(challenge => currentReader.joinedChallengeIds.includes(challenge.id) ); const renderCheckbox = (isSelected) => (
{isSelected && ( )}
); return (

{t.linkToChallenge}

{joinedChallenges.length > 0 ? (
{joinedChallenges.map(challenge => (
setSelectedChallengeId(challenge.id)} className="flex items-center gap-4 py-2 px-3 rounded-lg cursor-pointer hover:bg-lighter" role="radio" aria-checked={selectedChallengeId === challenge.id} tabIndex={0} onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') setSelectedChallengeId(challenge.id)}} > {renderCheckbox(selectedChallengeId === challenge.id)} {challenge.title}
))}
) : (

{t.noJoinedChallenges}

{t.noJoinedChallengesPrompt}

)}
); }; const StartReadingFlow = () => { const { isStartReadingFlowActive, setIsStartReadingFlowActive, startReading, t } = useAppContext(); const [step, setStep] = useState('details'); // 'details' or 'challenge' const [bookDetails, setBookDetails] = useState({ title: '', author: '' }); const handleNext = (details) => { setBookDetails(details); setStep('challenge'); }; const handleBack = () => { setStep('details'); }; const handleStartReading = (challengeId) => { startReading(bookDetails, challengeId); handleClose(); }; const handleClose = () => { setIsStartReadingFlowActive(false); setTimeout(() => { setStep('details'); setBookDetails({ title: '', author: '' }); }, 300); }; if (!isStartReadingFlowActive) return null; return (
{step === 'details' ? ( ) : ( )}
); }; const FloatingActionButton = () => { const { setIsStartReadingFlowActive, t } = useAppContext(); return ( ); }; // --- PAGE COMPONENTS --- const LoginPage = () => { const { login, t } = useAppContext(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const logoUrl = 'https://georgesriver.spydus.com/api/maintenance/1.0/imagebrowser/image?blobName=a31cf63f-7e24-41d5-b1f8-c206bde45ce6.png'; const handleLogin = (e) => { e.preventDefault(); setError(''); const success = login(email, password); if (!success) { setError(t.invalidCredentials); } }; return (
Georges River Council Logo

{t.welcome}

{t.loginPrompt}

setEmail(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-accent focus:border-accent sm:text-sm" placeholder="family@georgesriver.nsw.gov.au" required />
setPassword(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-accent focus:border-accent sm:text-sm" placeholder="password123" required />
{error &&

{error}

}
); }; const HomePage = () => { return (
); }; const ChallengesPage = () => { const { challenges, t, readers, books, setIsJoinChallengeModalOpen, setManagingChallengeId } = useAppContext(); const handleManageChallenge = (challengeId) => { setManagingChallengeId(challengeId); setIsJoinChallengeModalOpen(true); }; const renderChallengeSection = (title, challengesToRender) => { if (challengesToRender.length === 0) return null; return (

{title}

{challengesToRender.map(challenge => { const participatingReaderIds = readers .filter(r => r.joinedChallengeIds.includes(challenge.id)) .map(r => r.id); const isFamilyJoined = participatingReaderIds.length > 0; const totalProgress = readers .filter(r => participatingReaderIds.includes(r.id)) .reduce((sum, reader) => sum + (reader.progress?.[challenge.id] || 0), 0); // Calculate total minutes and books for this challenge across all participating family members const challengeBooks = books.filter(b => b.challengeId === challenge.id && participatingReaderIds.includes(b.readerId) ); const totalMinutesRead = challengeBooks.reduce((sum, book) => sum + book.progressMinutes, 0); const totalBooksRead = challengeBooks.filter(b => b.status === 'finished').length; return ( handleManageChallenge(challenge.id)} showJoinButton={true} progress={totalProgress} totalMinutes={totalMinutesRead} totalBooks={totalBooksRead} /> ); })}
); }; const generalChallenges = challenges.filter(c => c.category === 'general' || !c.category); const childrenChallenges = challenges.filter(c => c.category === 'children'); const teenChallenges = challenges.filter(c => c.category === 'teens'); const adultChallenges = challenges.filter(c => c.category === 'adults'); return (
{renderChallengeSection(t.generalChallenges, generalChallenges)} {renderChallengeSection(t.forChildren, childrenChallenges)} {renderChallengeSection(t.forTeens, teenChallenges)} {renderChallengeSection(t.forAdults, adultChallenges)}
); }; const CompletedChallengeBadge = ({ challenge, earners }) => { return (
{challenge.badge}

{challenge.title}

{earners && earners.length > 0 && (
{earners.map(reader => (
{reader.avatar}
))}
)}
); }; const Stamp = ({ library, isCollected }) => { const containerClasses = `bg-white p-4 rounded-lg shadow-md flex flex-col items-center text-center gap-2 transform hover:scale-105 transition-all duration-300 h-full`; // Define color palettes based on the theme to make each uncollected stamp unique const palettes = [ { // Palette 1 (Original Teal) building: '#E2F2F2', // lightest roof: '#5DBFC0', // accent base: '#007582', // primary windows: '#9AD3D4', // light door: '#005C68', // primary-dark doorHandle: '#C8E6E6', // lighter }, { // Palette 2 (Secondary Green focus) building: '#E2F2F2', // lightest roof: '#00A5A5', // secondary base: '#005C68', // primary-dark windows: '#C8E6E6', // lighter door: '#007582', // primary doorHandle: '#9AD3D4', // light }, { // Palette 3 (Light Blue/Green) building: '#C8E6E6', // lighter roof: '#9AD3D4', // light base: '#007582', // primary windows: '#E2F2F2', // lightest door: '#00A5A5', // secondary doorHandle: '#FFFFFF', }, { // Palette 4 (Darker base, Accent roof) building: '#C8E6E6', // lighter roof: '#5DBFC0', // accent base: '#005C68', // primary-dark windows: '#E2F2F2', // lightest door: '#007582', // primary doorHandle: '#9AD3D4', // light } ]; // Select a palette based on the library ID to make them slightly different const colors = palettes[library.id % palettes.length]; // Define different building shapes const buildingSvgs = [ // Building 1 (Original A-Frame) ({ colors }) => ( ), // Building 2 (Flat Roof) ({ colors }) => ( ), // Building 3 (Curved Roof) ({ colors }) => ( ), // Building 4 (Classical with Columns) ({ colors }) => ( ), // Building 5 (Two-Story) ({ colors }) => ( ), ]; // Select a building shape based on library ID const BuildingIcon = buildingSvgs[library.id % buildingSvgs.length]; return (
{isCollected ? ( ) : ( )}

{library.name}

); }; const BadgesPage = () => { const { t, challenges, readers, libraries, collectedStamps, setIsExplorerScannerModalOpen } = useAppContext(); const allCompletedBadges = challenges .map(challenge => { const earners = readers.filter(reader => reader.joinedChallengeIds.includes(challenge.id) && (reader.progress?.[challenge.id] || 0) >= challenge.goal ); if (earners.length > 0) { return { challenge, earners }; } return null; }) .filter(Boolean); return (

{t.challengeBadges}

{allCompletedBadges.length > 0 ? (
{allCompletedBadges.map(({ challenge, earners }) => ( ))}
) : (

{t.noBadges}

{t.noBadgesPrompt}

)}

{t.explorerPassport}

{libraries.map(lib => ( ))}
); }; const BookClubCard = ({ club }) => { const { t } = useAppContext(); return (
{club.emoji}

{club.name}

Currently reading: "{club.currentBook}" by {club.author}

{club.description}

); }; const BookClubPage = () => { const { t } = useAppContext(); return (

{t.virtualBookClub}

{bookClubs.map(club => )}
); }; const EventsPage = () => { const { events, t } = useAppContext(); return (

{t.upcomingEvents}

{events.map(event => )}
); }; const ProfilePage = () => { const { readers, t, setIsAddReaderModalOpen, logout } = useAppContext(); const getAgeRangeLabel = (ageRangeKey) => { switch (ageRangeKey) { case 'kids': return t.ageKids; case 'teens': return t.ageTeens; case 'adults': return t.ageAdults; default: return ''; } }; return (

{t.familyMembers}

{readers.map(reader => (
{reader.avatar}
{reader.name} {getAgeRangeLabel(reader.ageRange)}
))}
); }; const BookCard = ({ book }) => { const { t } = useAppContext(); return (
{book.emoji}

{book.title}

by {book.author}

{book.description}

); }; const RecommendedPage = () => { const { t } = useAppContext(); const renderBookSection = (title, books) => { if (!books || books.length === 0) return null; return (

{title}

{books.map(book => )}
); }; return (
{renderBookSection(t.forKids, recommendations.kids)} {renderBookSection(t.forTeens, recommendations.teens)} {renderBookSection(t.forAdults, recommendations.adults)}
); }; // --- MAIN APP COMPONENT --- const App = () => { const { activePage, isAuthenticated } = useAppContext(); const renderPage = () => { switch (activePage) { case 'home': return ; case 'challenges': return ; case 'badges': return ; case 'recommended': return ; case 'bookclub': return ; case 'events': return ; case 'profile': return ; default: return ; } }; if (!isAuthenticated) { return ; } return (
{renderPage()}
{activePage === 'home' && }
); }; const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render( );