# danhladeia/ef-verso architecture

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

- Interactive diagram: https://gitdiagram.com/danhladeia/ef-verso
- Repository: https://github.com/danhladeia/ef-verso

## Overview

EF Verso is a browser-based 3D active-city learning game. The player enters through the main scene, creates or customizes a student, explores a modeled city, and can engage missions and sports minigames whose progress/rewards are persisted locally. README and excerpts establish the city, avatar, basketball, football, volleyball, and shared reward workflows; additional listed product modules are retained where their role is evident, but unsampled wiring is not asserted.

Main entry points: [`src/main.js`](https://github.com/danhladeia/ef-verso/blob/main/src/main.js) (Game Scene), [`src/student-character.js`](https://github.com/danhladeia/ef-verso/blob/main/src/student-character.js) (Student Character), [`src/hoops-match.js`](https://github.com/danhladeia/ef-verso/blob/main/src/hoops-match.js) (Basketball Match), [`src/soccer-match.js`](https://github.com/danhladeia/ef-verso/blob/main/src/soccer-match.js) (Football Match)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Game Runtime"]
  node_main["Game Scene<br/>[main.js]"]
end

subgraph group_city["City Exploration"]
  node_world["City World<br/>[city-world.js]"]
  node_layout["City Layout<br/>[city-layout.js]"]
  node_navigation["Navigation<br/>[navigation.js]"]
  node_flight["Flight<br/>[flight.js]"]
  node_adventure["Adventure<br/>[adventure.js]"]
  node_traffic["Traffic<br/>[traffic.js]"]
  node_travel["Travel<br/>[travel.js]"]
  node_sky["Sky<br/>[sky.js]"]
  node_crowd["City Crowd<br/>[crowd.js]"]
end

subgraph group_avatar["Student Identity"]
  node_character["Student Character"]
  node_customizer["Wardrobe<br/>[customizer.js]"]
  node_thumbnails["Wardrobe Thumbnails"]
end

subgraph group_activities["Learning Activities"]
  node_onboarding["Onboarding<br/>[onboarding.js]"]
  node_mission["Basketball Mission<br/>[mission.js]"]
  node_theory["Theory<br/>[theory.js]"]
end

subgraph group_sports["Sports Games"]
  node_hoops["Basketball Match<br/>[hoops-match.js]"]
  node_hoopssim["Basketball Simulation<br/>[hoops-sim.js]"]
  node_hoopsbots["Basketball Bots<br/>[hoops-bots.js]"]
  node_soccer["Football Match<br/>[soccer-match.js]"]
  node_soccersim["Football Simulation<br/>[soccer-sim.js]"]
  node_soccerbots["Football Bots<br/>[soccer-bots.js]"]
  node_volley["Volleyball Match<br/>[volley-match.js]"]
  node_volleysim["Volleyball Simulation<br/>[volley-sim.js]"]
  node_volleybots["Volleyball Bots<br/>[volley-bots.js]"]
  node_skate["Skate Match<br/>[skate-match.js]"]
  node_skatesim["Skate Simulation<br/>[skate-sim.js]"]
  node_skaters["Skaters<br/>[skaters.js]"]
end

subgraph group_persistence["Progress State"]
  node_quests["Counter Missions<br/>[quests.js]"]
  node_cloud["Cloud Save<br/>[cloud-save.js]"]
  node_wallet[("Reward Wallet<br/>[quests.js]")]
end

node_player(("Player"))

node_player -->|"starts"| node_main
node_main -->|"builds"| node_world
node_world -->|"reads roads"| node_layout
node_main -->|"creates"| node_navigation
node_main -->|"creates"| node_flight
node_main -->|"creates"| node_adventure
node_main -->|"creates"| node_traffic
node_main -->|"creates"| node_travel
node_main -->|"creates"| node_sky
node_main -->|"creates"| node_character
node_main -->|"creates"| node_customizer
node_customizer -->|"configures"| node_character
node_customizer -->|"renders previews"| node_thumbnails
node_main -->|"creates"| node_onboarding
node_main -->|"creates"| node_mission
node_main -->|"creates"| node_theory
node_main -.->|"creates"| node_crowd
node_crowd -->|"uses"| node_character
node_mission -->|"creates"| node_character
node_mission -.->|"awards"| node_wallet
node_main -->|"creates"| node_hoops
node_hoops -->|"steps"| node_hoopssim
node_hoops -->|"gets inputs"| node_hoopsbots
node_hoopsbots -->|"reads state"| node_hoopssim
node_hoops -->|"creates players"| node_character
node_main -.->|"creates"| node_soccer
node_soccer -->|"steps"| node_soccersim
node_soccer -->|"gets inputs"| node_soccerbots
node_soccerbots -.->|"reads state"| node_soccersim
node_soccer -->|"creates players"| node_character
node_main -.->|"creates"| node_volley
node_volley -->|"steps"| node_volleysim
node_volley -->|"gets inputs"| node_volleybots
node_volley -->|"creates players"| node_character
node_main -.->|"creates"| node_skate
node_skate -.->|"uses simulation"| node_skatesim
node_main -.->|"creates"| node_skaters
node_hoops -->|"creates missions"| node_quests
node_soccer -->|"creates missions"| node_quests
node_volley -->|"creates missions"| node_quests
node_quests -->|"persists rewards"| node_wallet
node_main -.->|"initializes"| node_cloud

click node_main "https://github.com/danhladeia/ef-verso/blob/main/src/main.js"
click node_world "https://github.com/danhladeia/ef-verso/blob/main/src/city-world.js"
click node_layout "https://github.com/danhladeia/ef-verso/blob/main/src/city-layout.js"
click node_navigation "https://github.com/danhladeia/ef-verso/blob/main/src/navigation.js"
click node_flight "https://github.com/danhladeia/ef-verso/blob/main/src/flight.js"
click node_adventure "https://github.com/danhladeia/ef-verso/blob/main/src/adventure.js"
click node_traffic "https://github.com/danhladeia/ef-verso/blob/main/src/traffic.js"
click node_travel "https://github.com/danhladeia/ef-verso/blob/main/src/travel.js"
click node_sky "https://github.com/danhladeia/ef-verso/blob/main/src/sky.js"
click node_character "https://github.com/danhladeia/ef-verso/blob/main/src/student-character.js"
click node_customizer "https://github.com/danhladeia/ef-verso/blob/main/src/customizer.js"
click node_thumbnails "https://github.com/danhladeia/ef-verso/blob/main/src/wardrobe-thumbnails.js"
click node_onboarding "https://github.com/danhladeia/ef-verso/blob/main/src/onboarding.js"
click node_mission "https://github.com/danhladeia/ef-verso/blob/main/src/mission.js"
click node_theory "https://github.com/danhladeia/ef-verso/blob/main/src/theory.js"
click node_quests "https://github.com/danhladeia/ef-verso/blob/main/src/quests.js"
click node_cloud "https://github.com/danhladeia/ef-verso/blob/main/src/cloud-save.js"
click node_crowd "https://github.com/danhladeia/ef-verso/blob/main/src/crowd.js"
click node_hoops "https://github.com/danhladeia/ef-verso/blob/main/src/hoops-match.js"
click node_hoopssim "https://github.com/danhladeia/ef-verso/blob/main/src/hoops-sim.js"
click node_hoopsbots "https://github.com/danhladeia/ef-verso/blob/main/src/hoops-bots.js"
click node_soccer "https://github.com/danhladeia/ef-verso/blob/main/src/soccer-match.js"
click node_soccersim "https://github.com/danhladeia/ef-verso/blob/main/src/soccer-sim.js"
click node_soccerbots "https://github.com/danhladeia/ef-verso/blob/main/src/soccer-bots.js"
click node_volley "https://github.com/danhladeia/ef-verso/blob/main/src/volley-match.js"
click node_volleysim "https://github.com/danhladeia/ef-verso/blob/main/src/volley-sim.js"
click node_volleybots "https://github.com/danhladeia/ef-verso/blob/main/src/volley-bots.js"
click node_skate "https://github.com/danhladeia/ef-verso/blob/main/src/skate-match.js"
click node_skatesim "https://github.com/danhladeia/ef-verso/blob/main/src/skate-sim.js"
click node_skaters "https://github.com/danhladeia/ef-verso/blob/main/src/skaters.js"
click node_wallet "https://github.com/danhladeia/ef-verso/blob/main/src/quests.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_main toneBlue
class node_world,node_layout,node_navigation,node_flight,node_adventure,node_traffic,node_travel,node_sky,node_crowd toneAmber
class node_character,node_customizer,node_thumbnails toneMint
class node_onboarding,node_mission,node_theory toneRose
class node_hoops,node_hoopssim,node_hoopsbots,node_soccer,node_soccersim,node_soccerbots,node_volley,node_volleysim,node_volleybots,node_skate,node_skatesim,node_skaters,node_player toneIndigo
class node_quests,node_cloud,node_wallet toneTeal
```

## Components

### Game Runtime

- [Game Scene](https://github.com/danhladeia/ef-verso/blob/main/src/main.js): `src/main.js`

### City Exploration

- [City World](https://github.com/danhladeia/ef-verso/blob/main/src/city-world.js): `src/city-world.js`
- [City Layout](https://github.com/danhladeia/ef-verso/blob/main/src/city-layout.js): `src/city-layout.js`
- [Navigation](https://github.com/danhladeia/ef-verso/blob/main/src/navigation.js): `src/navigation.js`
- [Flight](https://github.com/danhladeia/ef-verso/blob/main/src/flight.js): `src/flight.js`
- [Adventure](https://github.com/danhladeia/ef-verso/blob/main/src/adventure.js): `src/adventure.js`
- [Traffic](https://github.com/danhladeia/ef-verso/blob/main/src/traffic.js): `src/traffic.js`
- [Travel](https://github.com/danhladeia/ef-verso/blob/main/src/travel.js): `src/travel.js`
- [Sky](https://github.com/danhladeia/ef-verso/blob/main/src/sky.js): `src/sky.js`
- [City Crowd](https://github.com/danhladeia/ef-verso/blob/main/src/crowd.js): `src/crowd.js`

### Student Identity

- [Student Character](https://github.com/danhladeia/ef-verso/blob/main/src/student-character.js): `src/student-character.js`
- [Wardrobe](https://github.com/danhladeia/ef-verso/blob/main/src/customizer.js): `src/customizer.js`
- [Wardrobe Thumbnails](https://github.com/danhladeia/ef-verso/blob/main/src/wardrobe-thumbnails.js): `src/wardrobe-thumbnails.js`

### Learning Activities

- [Onboarding](https://github.com/danhladeia/ef-verso/blob/main/src/onboarding.js): `src/onboarding.js`
- [Basketball Mission](https://github.com/danhladeia/ef-verso/blob/main/src/mission.js): `src/mission.js`
- [Theory](https://github.com/danhladeia/ef-verso/blob/main/src/theory.js): `src/theory.js`

### Sports Games

- [Basketball Match](https://github.com/danhladeia/ef-verso/blob/main/src/hoops-match.js): `src/hoops-match.js`
- [Basketball Simulation](https://github.com/danhladeia/ef-verso/blob/main/src/hoops-sim.js): `src/hoops-sim.js`
- [Basketball Bots](https://github.com/danhladeia/ef-verso/blob/main/src/hoops-bots.js): `src/hoops-bots.js`
- [Football Match](https://github.com/danhladeia/ef-verso/blob/main/src/soccer-match.js): `src/soccer-match.js`
- [Football Simulation](https://github.com/danhladeia/ef-verso/blob/main/src/soccer-sim.js): `src/soccer-sim.js`
- [Football Bots](https://github.com/danhladeia/ef-verso/blob/main/src/soccer-bots.js): `src/soccer-bots.js`
- [Volleyball Match](https://github.com/danhladeia/ef-verso/blob/main/src/volley-match.js): `src/volley-match.js`
- [Volleyball Simulation](https://github.com/danhladeia/ef-verso/blob/main/src/volley-sim.js): `src/volley-sim.js`
- [Volleyball Bots](https://github.com/danhladeia/ef-verso/blob/main/src/volley-bots.js): `src/volley-bots.js`
- [Skate Match](https://github.com/danhladeia/ef-verso/blob/main/src/skate-match.js): `src/skate-match.js`
- [Skate Simulation](https://github.com/danhladeia/ef-verso/blob/main/src/skate-sim.js): `src/skate-sim.js`
- [Skaters](https://github.com/danhladeia/ef-verso/blob/main/src/skaters.js): `src/skaters.js`

### Progress State

- [Counter Missions](https://github.com/danhladeia/ef-verso/blob/main/src/quests.js): `src/quests.js`
- [Cloud Save](https://github.com/danhladeia/ef-verso/blob/main/src/cloud-save.js): `src/cloud-save.js`
- [Reward Wallet](https://github.com/danhladeia/ef-verso/blob/main/src/quests.js): `src/quests.js`

### Other components

- **Player**

## Connections

- Player → Game Scene: starts (evidence: `src/main.js`)
- Game Scene → City World: builds (evidence: `src/main.js`)
- City World → City Layout: reads roads (evidence: `src/city-world.js`)
- Game Scene → Navigation: creates (evidence: `src/main.js`)
- Game Scene → Flight: creates (evidence: `src/main.js`)
- Game Scene → Adventure: creates (evidence: `src/main.js`)
- Game Scene → Traffic: creates (evidence: `src/main.js`)
- Game Scene → Travel: creates (evidence: `src/main.js`)
- Game Scene → Sky: creates (evidence: `src/main.js`)
- Game Scene → Student Character: creates (evidence: `src/main.js`)
- Game Scene → Wardrobe: creates (evidence: `src/main.js`)
- Wardrobe → Student Character: configures (evidence: `src/customizer.js`)
- Wardrobe → Wardrobe Thumbnails: renders previews (evidence: `src/customizer.js`)
- Game Scene → Onboarding: creates (evidence: `src/main.js`)
- Game Scene → Basketball Mission: creates (evidence: `src/main.js`)
- Game Scene → Theory: creates (evidence: `src/main.js`)
- Game Scene → City Crowd: creates (evidence: `src/main.js`)
- City Crowd → Student Character: uses (evidence: `src/crowd.js`)
- Basketball Mission → Student Character: creates (evidence: `src/mission.js`)
- Basketball Mission → Reward Wallet: awards
- Game Scene → Basketball Match: creates (evidence: `src/main.js`)
- Basketball Match → Basketball Simulation: steps (evidence: `src/hoops-match.js`)
- Basketball Match → Basketball Bots: gets inputs (evidence: `src/hoops-match.js`)
- Basketball Bots → Basketball Simulation: reads state (evidence: `src/hoops-bots.js`)
- Basketball Match → Student Character: creates players (evidence: `src/hoops-match.js`)
- Game Scene → Football Match: creates (evidence: `src/main.js`)
- Football Match → Football Simulation: steps (evidence: `src/soccer-match.js`)
- Football Match → Football Bots: gets inputs (evidence: `src/soccer-match.js`)
- Football Bots → Football Simulation: reads state
- Football Match → Student Character: creates players (evidence: `src/soccer-match.js`)
- Game Scene → Volleyball Match: creates (evidence: `src/main.js`)
- Volleyball Match → Volleyball Simulation: steps (evidence: `src/volley-match.js`)
- Volleyball Match → Volleyball Bots: gets inputs (evidence: `src/volley-match.js`)
- Volleyball Match → Student Character: creates players (evidence: `src/volley-match.js`)
- Game Scene → Skate Match: creates (evidence: `src/main.js`)
- Skate Match → Skate Simulation: uses simulation
- Game Scene → Skaters: creates (evidence: `src/main.js`)
- Basketball Match → Counter Missions: creates missions (evidence: `src/hoops-match.js`)
- Football Match → Counter Missions: creates missions (evidence: `src/soccer-match.js`)
- Volleyball Match → Counter Missions: creates missions (evidence: `src/volley-match.js`)
- Counter Missions → Reward Wallet: persists rewards (evidence: `src/quests.js`)
- Game Scene → Cloud Save: initializes (evidence: `src/main.js`)