War Territory

Command armies, capture territories, and dominate the battlefield in this turn-based strategy game with WebGL graphics and real-time multiplayer.

Comment

Inspiration

My passion for classic RTS games and desire to use modern web technologies inspired me to build War Territory. From the outset, I designed the server to support real‑time multiplayer, an ELO‑based matchmaking system, a central game engine and persistent sessions. Combined with the ability to run the game locally with AI or pass the turn on a single screen, this foundation motivated me to create a complete strategic experience that combines the excitement of Command & Conquer with the accessibility of a browser game. I wanted players to fight for territory without fear of losing progress thanks to auto‑save and session restoration.

What it does

War Territory is a browser‑based strategy game that offers two modes:

Local mode – the full game runs on the same device; you can pass the turn between players or play against AI.

Online mode – players create or join rooms, chat and fight each other in real time. The matchmaking system uses ELO to pair balanced opponents.

The game supports session restoration. It automatically saves, and after accidentally closing the browser you can return within two hours; the SessionRestoreModal shows information about the last game and allows you to continue. The interface also displays connection indicators; when the network is cut, the player sees a “Reconnecting…” message with an icon and smooth animations. A chat, auto‑saving progress and full game‑state management on the server complete the experience.

How I built it

The game’s code was entirely written in Bolt.new, an AI‑powered builder for websites, web apps and mobile apps. Bolt transforms your ideas into a working product in minutes: you simply describe what you want and Bolt creates it, allowing you to build powerful applications without writing every line of code yourself.

The project consists of two main parts – a frontend in React + TypeScript and a backend in Node.js:

Frontend – the src/ directory includes UI components, hooks, local‑storage utilities and a WebSocket client. I used a custom hook to handle Socket.IO events and auto‑save sessions.

Backend – the server uses Express for the REST API and Socket.IO for real‑time communication. A modular architecture divides code into game logic (GameEngine, GameStateManager), managers (GameManager, SessionManager), services (MatchmakingService, StorageService) and the WebSocket layer. The server also exposes health and metrics endpoints and protects against abuse through rate limiting and circuit breakers.

Supabase – persistent storage for sessions, metrics and stats. Configuration is defined in .env files; depending on STORAGE_PROVIDER I can switch from Supabase to the planned AlgorandStorageProvider. This prepares the project for blockchain integration – player IDs can be wallet addresses, and the data structures fit within the 32 KB limit of Algorand boxes.

Challenges I ran into

During development I encountered several challenges:

Real‑time synchronization – keeping a deterministic game state for many clients required designing a central engine and action validators on the server. Ensuring minimal latency without desynchronization was crucial.

Session restoration – storing game progress and handling reconnections required secure token storage, handling expiration and resolving conflicts when a player tried to return from multiple devices.

Matchmaking and balance – implementing an ELO system and dividing players into rooms required testing algorithms to ensure short wait times and balanced levels.

Storage abstraction – preparing the code for future blockchain storage required clear separation of layers and careful design of storage interfaces.

UX with unstable connections – I needed to inform players about network status and prepare smooth animations to avoid frustration during reconnection.

Accomplishments I'm proud of

A complete game server with REST, WebSocket, health and monitoring.

Session Restore integration in front and back: auto‑saving progress, a user‑friendly modal and automatic clearing after two hours.

A modular architecture – game engine, managers, services and storage abstraction make the project easy to maintain and ready for blockchain migration.

User experience – dynamic connection indicators, chat and the ability to play locally with AI make the game accessible for different types of players.

Preparedness for Algorand – data structures and storage interfaces are designed so that progress can be stored on the blockchain.

What I learned

While building War Territory I explored many areas:

Real‑time game design – I learned to combine WebSockets with a server game engine to ensure consistent state and respond to events in milliseconds.

Supabase and data storage – integrating backend services with the browser, defining migration schemas and managing API keys in .env files.

Design patterns – modularising code, storage abstraction, managers and services helped me keep order even in a complex project.

Advanced session handling – auto‑saving, validation, expiration and restoration taught me how to create a user experience resilient to errors.

Preparing for blockchain – thinking about the limitations of Algorand (32 KB per box) and planning migration to wallet‑based identities taught me to plan for future technologies.

What's next for War Territory

In future iterations I plan:

Integration with Algorand – implement AlgorandStorageProvider, store player profiles and stats on the blockchain and introduce NFT rewards.

UX improvements – add toast notifications on save/restore events, countdown timers for session expiry and analytics on session restoration success.

New maps and modes – expand the engine with complex maps, different climates and cooperative scenarios.

Better AI – improve opponent algorithms in local mode.

Community and open‑source – release the game to a wider community, invite collaboration and organise tournaments.

E‑sport on Algorand – develop an e‑sports ecosystem for War Territory, with tournaments and prize pools settled on the Algorand blockchain.

War Territory combines traditional strategy with modern technologies. With solid architecture, a robust session system and preparation for blockchain integration, there is a strong foundation for future development.

Built With

Share this project:

Updates