Cross & Crescent: The Road to Mansurah, is the only historical simulation that merges the narrative depth of 13th-century chronicles of the Seventh Crusade with modern strategy mechanics.
This immersive game and story is designed to educate through engagement, placing the user in the boots of Jean de Joinville as they manage the logistics, morale, and destiny of King Louis IX’s Seventh Crusade.
The Architectural Vision
The game is built as a Single-Session Immersive Application, utilizing a “Parchment-Stack” UI design. It employs a blend of CSS-filtered textures, SVG mapping, and a Three.js 3D engine to evoke the feeling of a medieval manuscript coming to life.
Core Logic & Systems
1. The Logistics Engine (Resource Management)
The game operates on a daily tick system where every resource is interconnected:
- The Consumption Loop: Rations and Gold are consumed every “Day” based on the size of the host (Knights + Infantry).
- The Edict Matrix: Player decisions (Marching Speed, Rations, Leadership) act as multipliers for the state. For example, selecting “Forced March” increases mileage but applies a multiplicative penalty to Fatigue and Disease, which in turn increases the casualty rate in the next tick.
- The Attrition Variable: Health isn’t just a bar; it’s a dynamic calculation of Disease vs. Morale. High Morale can mitigate physical sickness, while low Morale accelerates desertion.
2. The 3D Dice Fate System
To simulate the “Will of God” central to the crusader mindset, I integrated a Three.js Dice Engine:
- Asynchronous Resolution: When “Advance One Day” is clicked, the 3D dice roll in real-time. The result is captured as a seed for the daily events.
- The Random-Weight Trigger: A low roll triggers a “weighted event” check. The logic checks the current geographic phase (e.g., Delta vs. Cyprus) to select a contextually appropriate disaster or blessing, such as “Greek Fire” in Mansurah or “Scurvy” in the Delta.
3. Spatial Progression (The Map logic)
The SVG map uses a Linear-to-Geographic mapping:
- The Milestone Array: The
PHASESconstant defines coordinates (x, y) and mile-markers. - The Interpolation Logic: The player’s unit doesn’t jump; it uses linear interpolation (
lerp) based onmilesCoveredrelative to the distance between the current and next geographic node. This creates a smooth, persistent sense of travel through the Egyptian delta.
4. The Narrative Generator
I implemented a Context-Aware Chronicle System. Instead of random text, the game pulls from a library of strings partitioned by the current phase of the crusade. This ensures that while in the “Aigues-Mortes” phase, the text reflects the departure from France, transitioning seamlessly into the “Delta” phase where the text shifts to descriptions of heat and reeds.
Technical Robustness
- Responsive Viewport: The game uses a CSS-locking aspect ratio (
16/14) to ensure the parchment UI never breaks on modern widescreen or laptop monitors. - Asset Safety: Every image, including the “Royal Illumination,” has an SVG-fallback
onerrorhandler to prevent broken UI elements if external assets fail to load. - State Integrity: The entire game state is contained in a single
stateobject, allowing for easy expansion into save-states or undo-mechanisms in future iterations.
This project is not just a game; it is a digital historical diorama that bridges the gap between historical data and interactive play.
For teams operating in high-stakes, dynamic industries, CERES offers the keys to our core technological engines. We provide the architectural scaffolding and the heavy lifting, so your team can focus on leading your field.
Our Open-Source Intelligence Systems Span:
- Operations: Infrastructure-class data tools.
- Simulation & Space: Digital twins and orbital governance.
- Energy: Strategic systems for a resource-constrained world.
- Finance: The logic behind modern fintech.
- Media: Cinematic workflows and narrative pipelines.
- Information Technology: High-fidelity data management and analysis.
- Education: Scalable platforms for workforce evolution.
- Innovation: Clinical-grade consumer science.
Every engine in our lattice is available as a fully customizable, white-label product. We don’t just ‘skin’ the UI; we calibrate the logic to match your brand’s DNA and operational flow. Let’s build your application today.

