How ahron-gutierrez/frontend works
Fluidia is a browser-based fluid-science learning game. Learners enter through the app, explore lessons and story quests, then practice with quizzes, sandboxes, or endless runs; account progress, achievements, and leaderboard features support that learning loop. The graph also preserves the chatbot and avatar/customization capabilities. Routing and several imports are visible in excerpts or the source index; unsampled feature internals are represented at their known entry files, without inferred internal call chains.
Main entry points: App.jsx App router · LaboratoryQuest.jsx Laboratory quest · features Fluid lessons · StoryIntro.jsx Story introduction
Components 34
App and accounts
- App router
src/App.jsx - Accounts
src/data/gameData.js - API client
src/data/api.js
Science learning
- Fluid lessons
src/features - Lesson navigation
src/components/LessonBottomNavigation.jsx - Quiz hub and runs
src/features/quiz - Quiz content
src/features/quiz/quizData.js - Science sandboxes
src/features/sandbox
Story gameplay
- Story introduction
src/pages/StoryIntro.jsx - World map
src/components/FluidiaMap.jsx - Hydrostatic quest
src/pages/QuestHydrostatic.jsx - Plumber quest
src/pages/PlumberHouse.jsx - Laboratory quest
src/pages/LaboratoryQuest.jsx - Buoyancy game
src/components/BuoyancyPlatformer.jsx - Endless challenges
src/features/endless - Challenge generators
src/features/endless/generators.js
Progress and community
- Game state
src/data/gameData.js - Achievements
src/data/achievements.js - Achievement page
src/pages/Achievements.jsx - Leaderboard
src/features/leaderboard/Leaderboard.jsx - Avatar editing
src/components/AvatarEditor.jsx - Chat assistant
src/features/chatbot/ChatBot.jsx - Chat client
src/features/chatbot/chatClient.js
Shared runtime
- Avatar assets
src/data/avatarAssets.js - Animated avatar
src/components/AnimatedAvatar.jsx - Background music
src/components/BgMusic.jsx - Leave confirmation
src/components/ConfirmLeave.jsx - Learning hints
src/components/HintHelper.jsx - Quest summary
src/components/QuestSummary.jsx - Round intro
src/components/RoundIntro.jsx - Water rendering
src/components/PixelWater.jsx - Sprite display
src/components/SpriteSlot.jsx - Pixel effects
src/utils/pixelFx.js
Other components
- Learner
Connections 40
- Learner → App router: opens
src/App.jsx - App router → Story introduction: routes to
src/App.jsx - App router → Hydrostatic quest: routes to
src/App.jsx - App router → Plumber quest: routes to
src/App.jsx - App router → Laboratory quest: routes to
src/App.jsx - App router → Fluid lessons: routes to
src/App.jsx - App router → Quiz hub and runs: routes to
src/App.jsx - App router → Science sandboxes: routes to
src/App.jsx - App router → Endless challenges: routes to
src/App.jsx - App router → Leaderboard: routes to
src/App.jsx - App router → Achievement page: routes to
src/App.jsx - App router → Chat assistant: renders
src/App.jsx - Fluid lessons → Lesson navigation: uses
src/features/02_density/page.jsx - Fluid lessons → Game state: reads
src/features/02_density/page.jsx - Fluid lessons → Background music: uses
src/features/04_archimedes/simulation.jsx - Quiz hub and runs → Quiz content: reads
src/data/achievements.js - Laboratory quest → Buoyancy game: renders
src/pages/LaboratoryQuest.jsx - Laboratory quest → Leave confirmation: renders
src/pages/LaboratoryQuest.jsx - Laboratory quest → Learning hints: renders
src/pages/LaboratoryQuest.jsx - Laboratory quest → Quest summary: renders
src/pages/LaboratoryQuest.jsx - Plumber quest → Learning hints: renders
src/pages/PlumberHouse.jsx - Plumber quest → Quest summary: renders
src/pages/PlumberHouse.jsx - Plumber quest → Game state: reads avatar
src/pages/PlumberHouse.jsx - Buoyancy game → Water rendering: renders
src/components/BuoyancyPlatformer.jsx - Buoyancy game → Sprite display: renders
src/components/BuoyancyPlatformer.jsx - Buoyancy game → Pixel effects: emits effects
src/components/BuoyancyPlatformer.jsx - Story introduction → Game state: reads progress
src/pages/StoryIntro.jsx - Story introduction → Animated avatar: renders
src/pages/StoryIntro.jsx - Story introduction → Sprite display: renders
src/pages/StoryIntro.jsx - Endless challenges → Challenge generators: uses
- Achievements → Game state: reads and writes
src/data/achievements.js - Achievement page → Achievements: uses
- Leaderboard → API client: requests data
src/features/leaderboard/Leaderboard.jsx - Leaderboard → Animated avatar: renders
src/features/leaderboard/Leaderboard.jsx - Accounts → API client: sends requests
src/data/gameData.js - Chat assistant → Chat client: uses
- Chat client → API client: uses
src/features/chatbot/chatClient.js - Learner → API client: authenticates
README.md - Chat client → Learner: streams replies
README.md - Animated avatar → Avatar assets: loads sprites
src/components/AnimatedAvatar.jsx