# adityaagurav/oceancleanup2 architecture

> Architecture diagram of the GitHub repository adityaagurav/oceancleanup2, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/adityaagurav/oceancleanup2
- Repository: https://github.com/adityaagurav/oceancleanup2

## Overview

Ocean Cleanup 2 is a browser-based ocean-cleaning game. The player starts through the React app, enters the Three.js game orchestrated by Engine, explores on foot or by boat, and interacts with cleanup and wildlife systems; Engine callbacks return gameplay updates to the UI. The tree also shows progression, building, exploration, and environmental features. Several system implementations and the main loop were not sampled, so the map includes documented capabilities but omits uncertain internal wiring and persistence details.

Main entry points: [`src/engine/Engine.js`](https://github.com/adityaagurav/oceancleanup2/blob/main/src/engine/Engine.js) (Game Engine), [`src/App.jsx`](https://github.com/adityaagurav/oceancleanup2/blob/main/src/App.jsx) (Game App), [`src/world/ChunkManager.js`](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/ChunkManager.js) (Chunk Streaming), [`src/world/TerrainGenerator.js`](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/TerrainGenerator.js) (Terrain Generation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and UI"]
  node_app["Game App<br/>[App.jsx]"]
  node_menu["Main Menu<br/>[MainMenu.jsx]"]
  node_hud["Gameplay HUD<br/>[HUD.jsx]"]
  node_gameover["Game Over<br/>[GameOver.jsx]"]
  node_pokedex["Creature Collection<br/>[Pokedex.jsx]"]
  node_settings["Settings<br/>[Settings.jsx]"]
  node_leaderboard["Leaderboard<br/>[Leaderboard.jsx]"]
  node_howtoplay["How to Play<br/>[HowToPlay.jsx]"]
end

subgraph group_runtime["Game Runtime"]
  node_engine["Game Engine<br/>[Engine.js]"]
  node_loop["Game Loop<br/>[GameLoop.js]"]
  node_input["Input Manager<br/>[InputManager.js]"]
  node_character["Character Controller"]
  node_boat["Boat Control<br/>[BoatController.js]"]
  node_camera["Camera Control"]
end

subgraph group_world["World and Encounters"]
  node_chunks["Chunk Streaming<br/>[ChunkManager.js]"]
  node_terrain["Terrain Generation"]
  node_biomes["Biome Rules<br/>[BiomeManager.js]"]
  node_water["Water Rendering<br/>[StylizedWater.js]"]
  node_trash["Trash Cleanup<br/>[TrashSystem.js]"]
  node_fish["Fish Encounters<br/>[FishSystem.js]"]
  node_wildlife["Wildlife<br/>[WildlifeSystem.js]"]
  node_underwater["Underwater World"]
end

subgraph group_progression["Interaction and Progression"]
  node_interaction["Interaction System"]
  node_buildings["Building System<br/>[BuildingSystem.js]"]
  node_treasure["Treasure System<br/>[TreasureSystem.js]"]
  node_companion["Companion System<br/>[CompanionSystem.js]"]
end

subgraph group_services["Runtime Services"]
  node_time["Time and Weather<br/>[TimeSystem.js]"]
  node_weather["Weather System<br/>[WeatherSystem.js]"]
  node_audio["Sound Effects<br/>[AudioManager.js]"]
  node_assets["Asset Cache<br/>[AssetManager.js]"]
end

node_player(("Player"))

node_player -->|"starts game"| node_app
node_app -->|"renders"| node_menu
node_app -->|"creates"| node_engine
node_app -->|"renders"| node_hud
node_app -->|"renders"| node_gameover
node_app -->|"renders"| node_pokedex
node_app -->|"renders"| node_settings
node_app -->|"renders"| node_leaderboard
node_app -->|"renders"| node_howtoplay
node_engine -->|"reports events"| node_app
node_app -->|"updates display"| node_hud
node_app -->|"plays pickup sound"| node_audio
node_engine -->|"creates"| node_input
node_engine -->|"creates"| node_character
node_engine -->|"creates"| node_boat
node_engine -->|"creates"| node_camera
node_engine -->|"creates"| node_trash
node_engine -->|"creates"| node_fish
node_engine -->|"creates"| node_wildlife
node_engine -->|"creates"| node_underwater
node_engine -->|"creates"| node_time
node_engine -->|"creates"| node_weather
node_engine -->|"initializes"| node_interaction
node_engine -->|"coordinates"| node_loop
node_engine -->|"initializes"| node_chunks
node_chunks -->|"generates chunks"| node_terrain
node_terrain -->|"uses biome rules"| node_biomes
node_chunks -->|"provides terrain generator"| node_underwater
node_app -->|"selects companion"| node_companion
node_app -->|"opens building UI"| node_buildings
node_engine -->|"loads assets"| node_assets

click node_app "https://github.com/adityaagurav/oceancleanup2/blob/main/src/App.jsx"
click node_menu "https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/MainMenu.jsx"
click node_hud "https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/HUD.jsx"
click node_gameover "https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/GameOver.jsx"
click node_pokedex "https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/Pokedex.jsx"
click node_settings "https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/Settings.jsx"
click node_leaderboard "https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/Leaderboard.jsx"
click node_howtoplay "https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/HowToPlay.jsx"
click node_engine "https://github.com/adityaagurav/oceancleanup2/blob/main/src/engine/Engine.js"
click node_loop "https://github.com/adityaagurav/oceancleanup2/blob/main/src/core/GameLoop.js"
click node_input "https://github.com/adityaagurav/oceancleanup2/blob/main/src/player/InputManager.js"
click node_character "https://github.com/adityaagurav/oceancleanup2/blob/main/src/player/CharacterController.js"
click node_boat "https://github.com/adityaagurav/oceancleanup2/blob/main/src/player/BoatController.js"
click node_camera "https://github.com/adityaagurav/oceancleanup2/blob/main/src/player/CameraController.js"
click node_chunks "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/ChunkManager.js"
click node_terrain "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/TerrainGenerator.js"
click node_biomes "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/BiomeManager.js"
click node_water "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/StylizedWater.js"
click node_trash "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/TrashSystem.js"
click node_fish "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/FishSystem.js"
click node_wildlife "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/WildlifeSystem.js"
click node_underwater "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/UnderwaterSystem.js"
click node_interaction "https://github.com/adityaagurav/oceancleanup2/blob/main/src/player/InteractionSystem.js"
click node_buildings "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/BuildingSystem.js"
click node_treasure "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/TreasureSystem.js"
click node_companion "https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/CompanionSystem.js"
click node_time "https://github.com/adityaagurav/oceancleanup2/blob/main/src/core/TimeSystem.js"
click node_weather "https://github.com/adityaagurav/oceancleanup2/blob/main/src/core/WeatherSystem.js"
click node_audio "https://github.com/adityaagurav/oceancleanup2/blob/main/src/audio/AudioManager.js"
click node_assets "https://github.com/adityaagurav/oceancleanup2/blob/main/src/engine/AssetManager.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_menu,node_hud,node_gameover,node_pokedex,node_settings,node_leaderboard,node_howtoplay toneBlue
class node_engine,node_loop,node_input,node_character,node_boat,node_camera toneAmber
class node_chunks,node_terrain,node_biomes,node_water,node_trash,node_fish,node_wildlife,node_underwater toneMint
class node_interaction,node_buildings,node_treasure,node_companion toneRose
class node_time,node_weather,node_audio,node_assets,node_player toneIndigo
```

## Components

### App and UI

- [Game App](https://github.com/adityaagurav/oceancleanup2/blob/main/src/App.jsx): `src/App.jsx`
- [Main Menu](https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/MainMenu.jsx): `src/ui/MainMenu.jsx`
- [Gameplay HUD](https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/HUD.jsx): `src/ui/HUD.jsx`
- [Game Over](https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/GameOver.jsx): `src/ui/GameOver.jsx`
- [Creature Collection](https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/Pokedex.jsx): `src/ui/Pokedex.jsx`
- [Settings](https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/Settings.jsx): `src/ui/Settings.jsx`
- [Leaderboard](https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/Leaderboard.jsx): `src/ui/Leaderboard.jsx`
- [How to Play](https://github.com/adityaagurav/oceancleanup2/blob/main/src/ui/HowToPlay.jsx): `src/ui/HowToPlay.jsx`

### Game Runtime

- [Game Engine](https://github.com/adityaagurav/oceancleanup2/blob/main/src/engine/Engine.js): `src/engine/Engine.js`
- [Game Loop](https://github.com/adityaagurav/oceancleanup2/blob/main/src/core/GameLoop.js): `src/core/GameLoop.js`
- [Input Manager](https://github.com/adityaagurav/oceancleanup2/blob/main/src/player/InputManager.js): `src/player/InputManager.js`
- [Character Controller](https://github.com/adityaagurav/oceancleanup2/blob/main/src/player/CharacterController.js): `src/player/CharacterController.js`
- [Boat Control](https://github.com/adityaagurav/oceancleanup2/blob/main/src/player/BoatController.js): `src/player/BoatController.js`
- [Camera Control](https://github.com/adityaagurav/oceancleanup2/blob/main/src/player/CameraController.js): `src/player/CameraController.js`

### World and Encounters

- [Chunk Streaming](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/ChunkManager.js): `src/world/ChunkManager.js`
- [Terrain Generation](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/TerrainGenerator.js): `src/world/TerrainGenerator.js`
- [Biome Rules](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/BiomeManager.js): `src/world/BiomeManager.js`
- [Water Rendering](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/StylizedWater.js): `src/world/StylizedWater.js`
- [Trash Cleanup](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/TrashSystem.js): `src/world/TrashSystem.js`
- [Fish Encounters](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/FishSystem.js): `src/world/FishSystem.js`
- [Wildlife](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/WildlifeSystem.js): `src/world/WildlifeSystem.js`
- [Underwater World](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/UnderwaterSystem.js): `src/world/UnderwaterSystem.js`

### Interaction and Progression

- [Interaction System](https://github.com/adityaagurav/oceancleanup2/blob/main/src/player/InteractionSystem.js): `src/player/InteractionSystem.js`
- [Building System](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/BuildingSystem.js): `src/world/BuildingSystem.js`
- [Treasure System](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/TreasureSystem.js): `src/world/TreasureSystem.js`
- [Companion System](https://github.com/adityaagurav/oceancleanup2/blob/main/src/world/CompanionSystem.js): `src/world/CompanionSystem.js`

### Runtime Services

- [Time and Weather](https://github.com/adityaagurav/oceancleanup2/blob/main/src/core/TimeSystem.js): `src/core/TimeSystem.js`
- [Weather System](https://github.com/adityaagurav/oceancleanup2/blob/main/src/core/WeatherSystem.js): `src/core/WeatherSystem.js`
- [Sound Effects](https://github.com/adityaagurav/oceancleanup2/blob/main/src/audio/AudioManager.js): `src/audio/AudioManager.js`
- [Asset Cache](https://github.com/adityaagurav/oceancleanup2/blob/main/src/engine/AssetManager.js): `src/engine/AssetManager.js`

### Other components

- **Player**

## Connections

- Player → Game App: starts game
- Game App → Main Menu: renders
- Game App → Game Engine: creates
- Game App → Gameplay HUD: renders
- Game App → Game Over: renders
- Game App → Creature Collection: renders
- Game App → Settings: renders
- Game App → Leaderboard: renders
- Game App → How to Play: renders
- Game Engine → Game App: reports events
- Game App → Gameplay HUD: updates display
- Game App → Sound Effects: plays pickup sound
- Game Engine → Input Manager: creates
- Game Engine → Character Controller: creates
- Game Engine → Boat Control: creates
- Game Engine → Camera Control: creates
- Game Engine → Trash Cleanup: creates
- Game Engine → Fish Encounters: creates
- Game Engine → Wildlife: creates
- Game Engine → Underwater World: creates
- Game Engine → Time and Weather: creates
- Game Engine → Weather System: creates
- Game Engine → Interaction System: initializes
- Game Engine → Game Loop: coordinates
- Game Engine → Chunk Streaming: initializes
- Chunk Streaming → Terrain Generation: generates chunks
- Terrain Generation → Biome Rules: uses biome rules
- Chunk Streaming → Underwater World: provides terrain generator
- Game App → Companion System: selects companion
- Game App → Building System: opens building UI
- Game Engine → Asset Cache: loads assets