Technical Deep Dive: Building "Botanical Battle"

In this technical blog, we'll explore the architecture and implementation of Botanical Battle , a strategic AI-driven garden simulation built with React 19 , TypeScript , and the Canvas API . The Architecture: A Deterministic Game Engine The core of Botanical Battle is a deterministic game engine that processes actions and returns the next game state. This approach ensures that the simulation is predictable and easy to debug. The Game State Machine The game state is defined by the GameState interface, which includes the grid, water levels, scores, stats, and current turn information. // From /src/types.ts export interface GameState { grid : Cell [][]; water : { A : number ; B : number }; scores : { A : number ; B : number }; stats : GameStats ; turn : number ; maxTurns : number ; currentAgent : ' A ' | ' B ' ; logs : string []; isGameOver : boolean ; agentConfigs : { A : AgentConfig ; B : AgentConfig }; } The processAction function in engine.ts acts as the state transition function. It