System Overview
High-Level Architecture
SynCity is built as a modern web application that bridges the gap between traditional software architecture and game development patterns. The system is divided into two primary distinct layers: the Simulation Layer (Logic) and the Presentation Layer (UI/Rendering).
Architecture Diagram
The following flow describes how data moves through the system during a single game session.
Client (Browser) receives user input (clicks, keyboard).
State Manager processes the input and dispatches an action to the Simulation Engine.
Simulation Engine calculates the result (e.g., pathfinding, transaction deduction).
Global Store updates the state of the city data models.
Renderer detects the state change and repaints the canvas to reflect the new reality.
Separation of Concerns
To ensure performance and maintainability, visual rendering is decoupled from the simulation logic.
Logic Thread: Handles math, AI calculations, and economy. It can run in a Web Worker to prevent UI freezing.
Main Thread: Handles React UI rendering, DOM updates, and user interaction events.
Last updated