# dead4w/kriegsspiel_frontend architecture

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

- Interactive diagram: https://gitdiagram.com/dead4w/kriegsspiel_frontend
- Repository: https://github.com/dead4w/kriegsspiel_frontend

## Overview

Kriegspiel Frontend is a Vue tactical-wargame client. Its main workflow is navigating to or creating a room, joining a match, issuing orders and viewing the evolving battlefield; the client also provides account, chat, administration, and resource-pack editing features. The map engine supports 2D and 3D rendering, input, and game-state logic. The tree and excerpts establish the major subsystems, but most component-to-engine wiring was not sampled, so uncertain links are omitted.

Main entry points: [`src/components/gameUI.vue`](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/components/gameUI.vue) (Game UI), [`src/engine/world/world.ts`](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/world/world.ts) (World State), [`src/router/index.ts`](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/router/index.ts) (Router and Auth), [`src/engine/orchestrators/renderOrchestrator.ts`](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/orchestrators/renderOrchestrator.ts) (Render Orchestrator)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["Vue App<br/>[App.vue]"]
  node_router["Router and Auth<br/>[index.ts]"]
  node_home["Home and Room Views"]
  node_account["Account and Profile<br/>[ProfileView.vue]"]
end

subgraph group_rooms["Rooms and Match"]
  node_api["HTTP API Client<br/>[client.ts]"]
  node_socket["Realtime Socket<br/>[socket.ts]"]
  node_room["Room Experience<br/>[Game.vue]"]
  node_gameui["Game UI<br/>[gameUI.vue]"]
  node_chat["Chat and Battle Log<br/>[KringChat.vue]"]
  node_admin["Room Administration<br/>[AdminTool.vue]"]
end

subgraph group_simulation["Game Simulation"]
  node_orders["Order Planning"]
  node_commands["Unit Commands<br/>[index.ts]"]
  node_units["Units and Triggers"]
  node_world["World State<br/>[world.ts]"]
end

subgraph group_engine["Battlefield Engine"]
  node_input["Map Input<br/>[index.ts]"]
  node_render["Render Orchestrator"]
  node_render2d["2D Renderer<br/>[index.ts]"]
  node_render3d["3D Renderer<br/>[index.ts]"]
end

subgraph group_packs["Settings and Packs"]
  node_packeditor["Resource Pack Editor"]
  node_packlogic["Resource Pack Rules"]
  node_settings[("Client Settings")]
end

node_player(("Player"))
node_server["Game Backend"]

node_player -->|"opens"| node_app
node_app -->|"displays routes"| node_router
node_router -->|"selects view"| node_home
node_router -->|"checks auth"| node_api
node_api -->|"HTTP requests"| node_server
node_socket -->|"realtime messages"| node_server
node_player -->|"joins match"| node_room
node_room -->|"presents match"| node_gameui
node_player -->|"uses controls"| node_gameui
node_gameui -->|"shows chat"| node_chat
node_gameui -->|"offers admin tools"| node_admin
node_player -->|"plans orders"| node_orders
node_orders -->|"applies orders"| node_commands
node_commands -->|"updates units"| node_units
node_units -->|"updates state"| node_world
node_input -->|"changes world"| node_world
node_render -->|"creates 2D renderer"| node_render2d
node_render -->|"creates 3D renderer"| node_render3d
node_world -->|"supplies scene state"| node_render
node_player -->|"edits pack"| node_packeditor
node_packeditor -->|"configures rules"| node_packlogic
node_settings -->|"emits setting changes"| node_world

click node_app "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/App.vue"
click node_router "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/router/index.ts"
click node_home "https://github.com/dead4w/kriegsspiel_frontend/tree/main/src/views"
click node_account "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/views/ProfileView.vue"
click node_api "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/api/client.ts"
click node_socket "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/api/socket.ts"
click node_room "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/components/room/Game.vue"
click node_gameui "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/components/gameUI.vue"
click node_chat "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/components/KringChat.vue"
click node_admin "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/components/tools/AdminTool.vue"
click node_orders "https://github.com/dead4w/kriegsspiel_frontend/tree/main/src/game/commands"
click node_commands "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/units/commands/index.ts"
click node_units "https://github.com/dead4w/kriegsspiel_frontend/tree/main/src/engine/units"
click node_world "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/world/world.ts"
click node_input "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/2d/input/index.ts"
click node_render "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/orchestrators/renderOrchestrator.ts"
click node_render2d "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/2d/render/index.ts"
click node_render3d "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/3d/render/index.ts"
click node_packeditor "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/views/ResourcePackCreatorView.vue"
click node_packlogic "https://github.com/dead4w/kriegsspiel_frontend/tree/main/src/engine/resourcePack"
click node_settings "https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/enums/clientSettingsKeys.ts"

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_router,node_home,node_account toneBlue
class node_api,node_socket,node_room,node_gameui,node_chat,node_admin toneAmber
class node_orders,node_commands,node_units,node_world toneMint
class node_input,node_render,node_render2d,node_render3d toneRose
class node_packeditor,node_packlogic,node_settings,node_player,node_server toneIndigo
```

## Components

### Application

- [Vue App](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/App.vue): `src/App.vue`
- [Router and Auth](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/router/index.ts): `src/router/index.ts`
- [Home and Room Views](https://github.com/dead4w/kriegsspiel_frontend/tree/main/src/views): `src/views`
- [Account and Profile](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/views/ProfileView.vue): `src/views/ProfileView.vue`

### Rooms and Match

- [HTTP API Client](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/api/client.ts): `src/api/client.ts`
- [Realtime Socket](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/api/socket.ts): `src/api/socket.ts`
- [Room Experience](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/components/room/Game.vue): `src/components/room/Game.vue`
- [Game UI](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/components/gameUI.vue): `src/components/gameUI.vue`
- [Chat and Battle Log](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/components/KringChat.vue): `src/components/KringChat.vue`
- [Room Administration](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/components/tools/AdminTool.vue): `src/components/tools/AdminTool.vue`

### Game Simulation

- [Order Planning](https://github.com/dead4w/kriegsspiel_frontend/tree/main/src/game/commands): `src/game/commands`
- [Unit Commands](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/units/commands/index.ts): `src/engine/units/commands/index.ts`
- [Units and Triggers](https://github.com/dead4w/kriegsspiel_frontend/tree/main/src/engine/units): `src/engine/units`
- [World State](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/world/world.ts): `src/engine/world/world.ts`

### Battlefield Engine

- [Map Input](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/2d/input/index.ts): `src/engine/2d/input/index.ts`
- [Render Orchestrator](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/orchestrators/renderOrchestrator.ts): `src/engine/orchestrators/renderOrchestrator.ts`
- [2D Renderer](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/2d/render/index.ts): `src/engine/2d/render/index.ts`
- [3D Renderer](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/engine/3d/render/index.ts): `src/engine/3d/render/index.ts`

### Settings and Packs

- [Resource Pack Editor](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/views/ResourcePackCreatorView.vue): `src/views/ResourcePackCreatorView.vue`
- [Resource Pack Rules](https://github.com/dead4w/kriegsspiel_frontend/tree/main/src/engine/resourcePack): `src/engine/resourcePack`
- [Client Settings](https://github.com/dead4w/kriegsspiel_frontend/blob/main/src/enums/clientSettingsKeys.ts): `src/enums/clientSettingsKeys.ts`

### Other components

- **Player**
- **Game Backend**

## Connections

- Player → Vue App: opens
- Vue App → Router and Auth: displays routes
- Router and Auth → Home and Room Views: selects view
- Router and Auth → HTTP API Client: checks auth
- HTTP API Client → Game Backend: HTTP requests
- Realtime Socket → Game Backend: realtime messages
- Player → Room Experience: joins match
- Room Experience → Game UI: presents match
- Player → Game UI: uses controls
- Game UI → Chat and Battle Log: shows chat
- Game UI → Room Administration: offers admin tools
- Player → Order Planning: plans orders
- Order Planning → Unit Commands: applies orders
- Unit Commands → Units and Triggers: updates units
- Units and Triggers → World State: updates state
- Map Input → World State: changes world
- Render Orchestrator → 2D Renderer: creates 2D renderer
- Render Orchestrator → 3D Renderer: creates 3D renderer
- World State → Render Orchestrator: supplies scene state
- Player → Resource Pack Editor: edits pack
- Resource Pack Editor → Resource Pack Rules: configures rules
- Client Settings → World State: emits setting changes