# shankar-kb/aoe2-team-civ-picker architecture

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

- Interactive diagram: https://gitdiagram.com/shankar-kb/aoe2-team-civ-picker
- Repository: https://github.com/shankar-kb/aoe2-team-civ-picker

## Overview

This is a browser-based Age of Empires II team and civilization picker. Users configure players and civilization/map pools, generate a match, and view team assignments; the app can also display player ratings. The sampled controller shows match rendering, civilization-pool editing, and map-search controls. The README gives only the product name and links, and the source excerpts are partial, so uncertain wiring to the JSON data files and map assets is omitted.

Main entry points: [`script.js`](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js) (Picker controller), [`utils.js`](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/utils.js) (Selection utilities), [`index.html`](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/index.html) (Web page), [`assets/img/icons`](https://github.com/shankar-kb/aoe2-team-civ-picker/tree/main/assets/img/icons) (Civilization icons)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["Picker interface"]
  node_page["Web page<br/>[index.html]"]
  node_controller["Picker controller<br/>[script.js]"]
  node_match["Match display<br/>[script.js]"]
end

subgraph group_selection["Match selection"]
  node_civpool["Civilization pools<br/>[script.js]"]
  node_mappool["Map pools<br/>[script.js]"]
  node_teamselection["Team assignment<br/>[script.js]"]
  node_utilities["Selection utilities<br/>[utils.js]"]
end

subgraph group_resources["App resources"]
  node_civdata["Civilization data<br/>[all-civs.json]"]
  node_playerdata["Player data<br/>[player-data.json]"]
  node_icons["Civilization icons"]
  node_sound["UI sounds"]
end

node_user(("Player"))
node_ratingapi{{"Rating service"}}

node_user -->|"opens"| node_page
node_page -->|"loads"| node_controller
node_user -->|"configures"| node_controller
node_controller -->|"edits"| node_civpool
node_controller -->|"edits"| node_mappool
node_controller -->|"generates"| node_teamselection
node_teamselection -->|"uses selection helpers"| node_utilities
node_controller -->|"builds elements"| node_utilities
node_controller -->|"renders"| node_match
node_match -->|"loads icons"| node_icons
node_controller -->|"plays audio"| node_sound
node_controller -->|"requests ratings"| node_utilities
node_utilities -.->|"fetches ratings"| node_ratingapi

click node_page "https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/index.html"
click node_controller "https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js"
click node_match "https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js"
click node_civpool "https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js"
click node_mappool "https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js"
click node_teamselection "https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js"
click node_utilities "https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/utils.js"
click node_civdata "https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/all-civs.json"
click node_playerdata "https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/player-data.json"
click node_icons "https://github.com/shankar-kb/aoe2-team-civ-picker/tree/main/assets/img/icons"
click node_sound "https://github.com/shankar-kb/aoe2-team-civ-picker/tree/main/assets/sound"

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_page,node_controller,node_match toneBlue
class node_civpool,node_mappool,node_teamselection,node_utilities toneAmber
class node_civdata,node_playerdata,node_icons,node_sound toneMint
class node_user,node_ratingapi toneIndigo
```

## Components

### Picker interface

- [Web page](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/index.html): `index.html`
- [Picker controller](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js): `script.js`
- [Match display](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js): `script.js`

### Match selection

- [Civilization pools](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js): `script.js`
- [Map pools](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js): `script.js`
- [Team assignment](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/script.js): `script.js`
- [Selection utilities](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/utils.js): `utils.js`

### App resources

- [Civilization data](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/all-civs.json): `all-civs.json`
- [Player data](https://github.com/shankar-kb/aoe2-team-civ-picker/blob/main/player-data.json): `player-data.json`
- [Civilization icons](https://github.com/shankar-kb/aoe2-team-civ-picker/tree/main/assets/img/icons): `assets/img/icons`
- [UI sounds](https://github.com/shankar-kb/aoe2-team-civ-picker/tree/main/assets/sound): `assets/sound`

### Other components

- **Player**
- **Rating service**

## Connections

- Player → Web page: opens
- Web page → Picker controller: loads
- Player → Picker controller: configures
- Picker controller → Civilization pools: edits
- Picker controller → Map pools: edits
- Picker controller → Team assignment: generates
- Team assignment → Selection utilities: uses selection helpers
- Picker controller → Selection utilities: builds elements
- Picker controller → Match display: renders
- Match display → Civilization icons: loads icons
- Picker controller → UI sounds: plays audio
- Picker controller → Selection utilities: requests ratings
- Selection utilities → Rating service: fetches ratings