# wenkais196-gabriel/t-city architecture

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

- Interactive diagram: https://gitdiagram.com/wenkais196-gabriel/t-city
- Repository: https://github.com/wenkais196-gabriel/t-city

## Overview

T-CityLite is a FiveM role-play server resource collection, with QBCore-style gameplay interfaces and a custom phone. The main player journey spans character selection, in-world status and interaction, then inventory and city services such as banking, fueling, and communication. The tree and excerpts chiefly show NUI/front-end code; server-side gameplay and persistence wiring are not included, so those connections are left out rather than inferred.

Main entry points: [`T-CityLite.base/resources/[custom]/custom-phone/web/src/App.svelte`](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/App.svelte) (Custom Phone), [`T-CityLite.base/resources/[qb]/qb-banking/web/src/App.svelte`](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-banking/web/src/App.svelte) (Banking UI), [`T-CityLite.base/resources/[qb]/qb-multicharacter/html/app.js`](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-multicharacter/html/app.js) (Character Selection), [`T-CityLite.base/resources/[qb]/qb-target/html/js/app.js`](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-target/html/js/app.js) (Target Menu)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_onboarding["Player Onboarding"]
  node_multichar["Character Selection<br/>[app.js]"]
end

subgraph group_interface["Player Interface"]
  node_hud["Player HUD<br/>[app.js]"]
  node_scoreboard["Scoreboard<br/>[app.js]"]
end

subgraph group_interaction["World Interaction"]
  node_target["Target Menu<br/>[app.js]"]
  node_inventory["Inventory<br/>[app.js]"]
  node_doorlock["Door Lock UI<br/>[app.js]"]
  node_fuel["Fuel UI<br/>[app.js]"]
end

subgraph group_services["City Services"]
  node_qbphone["QBCore Phone<br/>[app.js]"]
  node_customphone["Custom Phone<br/>[App.svelte]"]
  node_phoneevents["Phone NUI Bridge<br/>[nui.ts]"]
  node_phonestore["Phone State<br/>[phone.ts]"]
  node_phoneshell["Phone Shell<br/>[PhoneShell.svelte]"]
  node_phoneapps["Phone Apps<br/>[Banking.svelte]"]
  node_banking["Banking UI<br/>[App.svelte]"]
  node_bankviews["Bank Views"]
end

node_player(("Player"))
node_game{{"FiveM Runtime"}}

node_player -->|"selects character"| node_multichar
node_multichar -->|"sends NUI callbacks"| node_game
node_game -->|"sends UI events"| node_multichar
node_player -->|"views status"| node_hud
node_game -->|"sends HUD updates"| node_hud
node_game -->|"sends setup data"| node_scoreboard
node_player -->|"selects target"| node_target
node_target -->|"posts selection"| node_game
node_player -->|"manages items"| node_inventory
node_inventory -->|"posts inventory actions"| node_game
node_game -->|"sends door state"| node_doorlock
node_player -->|"sets refuel amount"| node_fuel
node_fuel -->|"posts refuel request"| node_game
node_player -->|"uses phone"| node_qbphone
node_qbphone -->|"requests phone data"| node_game
node_player -->|"opens phone"| node_customphone
node_customphone -->|"registers NUI events"| node_phoneevents
node_customphone -->|"loads phone data"| node_phonestore
node_customphone -->|"renders shell"| node_phoneshell
node_customphone -->|"renders app screens"| node_phoneapps
node_player -->|"uses bank or ATM"| node_banking
node_banking -->|"renders bank screen"| node_bankviews
node_banking -->|"posts NUI actions"| node_game

click node_multichar "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-multicharacter/html/app.js"
click node_hud "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-hud/html/app.js"
click node_scoreboard "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-scoreboard/html/app.js"
click node_target "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-target/html/js/app.js"
click node_inventory "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-inventory/html/app.js"
click node_doorlock "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-doorlock/html/app.js"
click node_fuel "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-fuel/html/app.js"
click node_qbphone "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-phone/html/js/app.js"
click node_customphone "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/App.svelte"
click node_phoneevents "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/utils/nui.ts"
click node_phonestore "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/stores/phone.ts"
click node_phoneshell "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/components/PhoneShell.svelte"
click node_phoneapps "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/apps/Banking.svelte"
click node_banking "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-banking/web/src/App.svelte"
click node_bankviews "https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-banking/web/src/components/BankDashboard.svelte"

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_multichar toneBlue
class node_hud,node_scoreboard toneAmber
class node_target,node_inventory,node_doorlock,node_fuel toneMint
class node_qbphone,node_customphone,node_phoneevents,node_phonestore,node_phoneshell,node_phoneapps,node_banking,node_bankviews toneRose
class node_player,node_game toneIndigo
```

## Components

### Player Onboarding

- [Character Selection](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-multicharacter/html/app.js): `T-CityLite.base/resources/[qb]/qb-multicharacter/html/app.js`

### Player Interface

- [Player HUD](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-hud/html/app.js): `T-CityLite.base/resources/[qb]/qb-hud/html/app.js`
- [Scoreboard](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-scoreboard/html/app.js): `T-CityLite.base/resources/[qb]/qb-scoreboard/html/app.js`

### World Interaction

- [Target Menu](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-target/html/js/app.js): `T-CityLite.base/resources/[qb]/qb-target/html/js/app.js`
- [Inventory](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-inventory/html/app.js): `T-CityLite.base/resources/[qb]/qb-inventory/html/app.js`
- [Door Lock UI](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-doorlock/html/app.js): `T-CityLite.base/resources/[qb]/qb-doorlock/html/app.js`
- [Fuel UI](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-fuel/html/app.js): `T-CityLite.base/resources/[qb]/qb-fuel/html/app.js`

### City Services

- [QBCore Phone](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-phone/html/js/app.js): `T-CityLite.base/resources/[qb]/qb-phone/html/js/app.js`
- [Custom Phone](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/App.svelte): `T-CityLite.base/resources/[custom]/custom-phone/web/src/App.svelte`
- [Phone NUI Bridge](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/utils/nui.ts): `T-CityLite.base/resources/[custom]/custom-phone/web/src/utils/nui.ts`
- [Phone State](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/stores/phone.ts): `T-CityLite.base/resources/[custom]/custom-phone/web/src/stores/phone.ts`
- [Phone Shell](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/components/PhoneShell.svelte): `T-CityLite.base/resources/[custom]/custom-phone/web/src/components/PhoneShell.svelte`
- [Phone Apps](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bcustom%5D/custom-phone/web/src/apps/Banking.svelte): `T-CityLite.base/resources/[custom]/custom-phone/web/src/apps/Banking.svelte`
- [Banking UI](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-banking/web/src/App.svelte): `T-CityLite.base/resources/[qb]/qb-banking/web/src/App.svelte`
- [Bank Views](https://github.com/wenkais196-gabriel/t-city/blob/master/T-CityLite.base/resources/%5Bqb%5D/qb-banking/web/src/components/BankDashboard.svelte): `T-CityLite.base/resources/[qb]/qb-banking/web/src/components/BankDashboard.svelte`

### Other components

- **Player**
- **FiveM Runtime**

## Connections

- Player → Character Selection: selects character
- Character Selection → FiveM Runtime: sends NUI callbacks
- FiveM Runtime → Character Selection: sends UI events
- Player → Player HUD: views status
- FiveM Runtime → Player HUD: sends HUD updates
- FiveM Runtime → Scoreboard: sends setup data
- Player → Target Menu: selects target
- Target Menu → FiveM Runtime: posts selection
- Player → Inventory: manages items
- Inventory → FiveM Runtime: posts inventory actions
- FiveM Runtime → Door Lock UI: sends door state
- Player → Fuel UI: sets refuel amount
- Fuel UI → FiveM Runtime: posts refuel request
- Player → QBCore Phone: uses phone
- QBCore Phone → FiveM Runtime: requests phone data
- Player → Custom Phone: opens phone
- Custom Phone → Phone NUI Bridge: registers NUI events
- Custom Phone → Phone State: loads phone data
- Custom Phone → Phone Shell: renders shell
- Custom Phone → Phone Apps: renders app screens
- Player → Banking UI: uses bank or ATM
- Banking UI → Bank Views: renders bank screen
- Banking UI → FiveM Runtime: posts NUI actions