Crownfall: Shattered Realms

Crownfall: Shattered Realms is a full-featured 4X (explore, expand, exploit, exterminate) strategy game playable in the browser. Players choose from 6 fantasy factions — each with unique units and abilities — and compete on procedurally generated hex maps through simultaneous turn-based gameplay. The game draws inspiration from the Civilization series while introducing original mechanics like a Royal Council advisor system and an edict-based policy layer.

Combat Demo

Tech Stack

• Server — TypeScript on the HYTOPIA game server framework (Node.js), handling authoritative game state, turn resolution, and action validation
• Client Rendering — Three.js for 3D hex terrain with orthographic camera, PBR materials, shadow mapping, and per-tile terrain deformation (hills, mountains, forests)
• UI — Vanilla HTML/CSS/JavaScript — 22 component files, 21 stylesheets, and 27 script modules bundled into a single file via a custom build script
• Procedural Generation — Multi-octave simplex noise for terrain, biomes, moisture, temperature, and resource placement
• Networking — JSON message passing between client and server with per-player fog-of-war filtering

Core Systems

The game is powered by 14 server-side systems covering the full scope of 4X gameplay:

• Map Generation — Procedural hex maps with multiple styles (continents, pangaea, archipelago) featuring coastline smoothing, biome clustering, balanced spawn placement, and land connectivity guarantees
• Units & Combat — 13 unit types (7 base + 6 faction-unique) with strength-based combat, terrain defense bonuses, melee counterattacks, ranged attacks, fortification, experience, and multi-turn queued movement
• Cities & Production — City founding, population growth, territory expansion, production queues for 12 building types, and tile yield calculations across 6 resource categories (food, production, gold, knowledge, influence, arcana)
• Fog of War — Three-state visibility (unexplored, explored, visible) aggregated from unit and city sight ranges, with explored tiles retaining last-known state
• Research — A Knowledge tree (16 technologies across 4 eras) and a Doctrine tree (16 cultural policies across 4 eras) that unlock new units, buildings, improvements, and abilities
• Royal Council — An original mechanic featuring 6 advisor roles, each with 2 specialization upgrade paths, a seat-slot economy, and 11 active policy edicts — visualized as a round table UI
• Bandits — An NPC faction that spawns camps in unexplored territory and produces hostile units, giving players early-game threats to manage
• Pathfinding — A* on both server (authoritative) and client (preview), with movement cost modifiers for terrain type, roads, and unit traits

Client-Side Rendering

The 3D client features an orthographic top-down camera with smooth zoom and pan, frustum culling, and a LOD system. Terrain tiles use procedural height deformation seeded from the server — flat hexes for grassland, dome-shaped bumps for hills, 3D cone props for mountains, and clustered tree models for forests. Territory borders, selection highlights, movement overlays, and yield icons are rendered as overlays. City and unit nameplates use HTML/CSS elements projected into 3D space each frame.

UI & Polish

The interface spans 22 panels including a resource HUD, minimap, city management, unit actions, full tech/doctrine trees with search and drag-to-scroll, a production picker with building placement mode, and the Royal Council round table. The game includes keyboard shortcuts, sound effects, background music, toast notifications, and mobile touch controls.

Architecture Highlights

The server is structured around a modular system architecture — each game system (combat, movement, visibility, production, etc.) is self-contained with clear boundaries. Game entity definitions (units, buildings, techs, doctrines, factions) are fully config-driven through an entity registry and requirement validator, making the game straightforward to extend with new content. The simultaneous turn system resolves all player actions atomically, with a countdown timer and ready-status tracking.