# nonlimit-1408/balance-it.github.io architecture

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

- Interactive diagram: https://gitdiagram.com/nonlimit-1408/balance-it.github.io
- Repository: https://github.com/nonlimit-1408/balance-it.github.io

## Overview

BalanceIt is a bilingual university-life game: players choose a language, proceed through introductory screens, customize an avatar, make event choices that affect life stats, and view a final result. The excerpts confirm the opening page transitions, avatar compositing, event-driven gameplay, and result rendering, but do not show all page-to-page transitions or how gameplay state is saved. Audio and settings are shared browser features; their connections to pages are included only where shown.

Main entry points: [`sound.js`](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/sound.js) (Audio manager), [`page-3/script.js`](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-3/script.js) (Avatar builder), [`page-4/script.js`](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-4/script.js) (Daily events), [`page-6/script.js`](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-6/script.js) (Result summary)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_onboarding["Onboarding"]
  node_language["Language entry<br/>[script.js]"]
  node_home["Home screen<br/>[script.js]"]
  node_story["Story and rules<br/>[script.js]"]
end

subgraph group_gameplay["Gameplay"]
  node_avatar["Avatar builder<br/>[script.js]"]
  node_avatar_art["Avatar artwork<br/>[asset-hair.js]"]
  node_daily_game["Daily events<br/>[script.js]"]
  node_event_data["Event definitions<br/>[database.js]"]
end

subgraph group_results["Results"]
  node_loading["Result loading<br/>[script.js]"]
  node_result_screen["Result summary<br/>[script.js]"]
  node_result_data["Result profiles<br/>[database.js]"]
end

subgraph group_shared["Shared features"]
  node_settings["Settings panel<br/>[settings.js]"]
  node_audio["Audio manager<br/>[sound.js]"]
  node_browser_storage[("Browser storage")]
end

node_player(("Player"))

node_player -->|"chooses language"| node_language
node_language -->|"navigates to"| node_home
node_player -->|"starts game"| node_home
node_home -->|"navigates to"| node_story
node_player -->|"customizes avatar"| node_avatar
node_avatar -->|"composites artwork"| node_avatar_art
node_avatar -->|"saves avatar"| node_browser_storage
node_player -->|"makes choices"| node_daily_game
node_daily_game -->|"reads events"| node_event_data
node_player -->|"views outcome"| node_result_screen
node_result_screen -->|"reads profiles"| node_result_data
node_result_screen -->|"reads saved state"| node_browser_storage
node_player -->|"adjusts settings"| node_settings
node_settings -->|"stores preferences"| node_browser_storage
node_settings -->|"sets volume"| node_audio
node_story -->|"plays effects"| node_audio
node_avatar -->|"plays effects"| node_audio
node_daily_game -->|"plays effects"| node_audio
node_loading -->|"plays effects"| node_audio

click node_language "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-0/script.js"
click node_home "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-1/script.js"
click node_story "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-2/script.js"
click node_avatar "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-3/script.js"
click node_avatar_art "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-3/asset-hair.js"
click node_daily_game "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-4/script.js"
click node_event_data "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-4/database.js"
click node_loading "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-5/script.js"
click node_result_screen "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-6/script.js"
click node_result_data "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-6/database.js"
click node_settings "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/settings.js"
click node_audio "https://github.com/nonlimit-1408/balance-it.github.io/blob/main/sound.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_language,node_home,node_story toneBlue
class node_avatar,node_avatar_art,node_daily_game,node_event_data toneAmber
class node_loading,node_result_screen,node_result_data toneMint
class node_settings,node_audio,node_browser_storage toneRose
class node_player toneIndigo
```

## Components

### Onboarding

- [Language entry](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-0/script.js): `page-0/script.js`
- [Home screen](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-1/script.js): `page-1/script.js`
- [Story and rules](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-2/script.js): `page-2/script.js`

### Gameplay

- [Avatar builder](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-3/script.js): `page-3/script.js`
- [Avatar artwork](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-3/asset-hair.js): `page-3/asset-hair.js`
- [Daily events](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-4/script.js): `page-4/script.js`
- [Event definitions](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-4/database.js): `page-4/database.js`

### Results

- [Result loading](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-5/script.js): `page-5/script.js`
- [Result summary](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-6/script.js): `page-6/script.js`
- [Result profiles](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/page-6/database.js): `page-6/database.js`

### Shared features

- [Settings panel](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/settings.js): `settings.js`
- [Audio manager](https://github.com/nonlimit-1408/balance-it.github.io/blob/main/sound.js): `sound.js`
- **Browser storage**

### Other components

- **Player**

## Connections

- Player → Language entry: chooses language (evidence: `page-0/script.js`)
- Language entry → Home screen: navigates to (evidence: `page-0/script.js`)
- Player → Home screen: starts game (evidence: `page-1/script.js`)
- Home screen → Story and rules: navigates to (evidence: `page-1/script.js`)
- Player → Avatar builder: customizes avatar (evidence: `page-3/script.js`)
- Avatar builder → Avatar artwork: composites artwork (evidence: `page-3/script.js`)
- Avatar builder → Browser storage: saves avatar (evidence: `page-3/script.js`)
- Player → Daily events: makes choices (evidence: `page-4/script.js`)
- Daily events → Event definitions: reads events (evidence: `page-4/script.js`)
- Player → Result summary: views outcome (evidence: `page-6/script.js`)
- Result summary → Result profiles: reads profiles (evidence: `page-6/script.js`)
- Result summary → Browser storage: reads saved state (evidence: `page-6/script.js`)
- Player → Settings panel: adjusts settings (evidence: `settings.js`)
- Settings panel → Browser storage: stores preferences (evidence: `settings.js`)
- Settings panel → Audio manager: sets volume (evidence: `settings.js`)
- Story and rules → Audio manager: plays effects (evidence: `page-2/script.js`)
- Avatar builder → Audio manager: plays effects (evidence: `page-3/script.js`)
- Daily events → Audio manager: plays effects (evidence: `page-4/script.js`)
- Result loading → Audio manager: plays effects (evidence: `page-5/script.js`)