Front-End Stack

Core Technologies

The client-side application is built using a robust modern JavaScript stack designed for responsiveness and scalability.

• Framework: Next.js (React) We utilize Next.js for its efficient routing and structure. While the game itself runs on the client, the Next.js framework provides an optimized wrapper for the documentation, login, and dashboard pages.

• Styling: Tailwind CSS Tailwind is used for the Heads-Up Display (HUD) and menus. It allows for rapid styling of buttons, panels, and tooltips without the overhead of heavy CSS files. Its utility-first approach ensures that the UI remains consistent and responsive across different screen sizes.

State Management: Zustand

Standard React state (useState/Context) is insufficient for a high-frequency simulation game due to excessive re-rendering. We use Zustand for state management.

• Why Zustand? It is lightweight and allows for transient updates. We can update the position of an agent 60 times per second without triggering a re-render of the entire React component tree.

• Store Structure: The store is divided into slices (e.g., economySlice, agentSlice, gridSlice) to keep the code modular.

Rendering Engine

The city visualization relies on HTML5 Canvas (or optionally WebGL via Three.js for 3D iterations).

• Canvas API: Used for drawing the isometric grid, buildings, and moving sprites.

• RequestAnimationFrame: The render loop is tied to the browser's refresh rate to ensure smooth visual interpolation.