
7 Wonders: Duel
Built a digital version of the popular 2-player board game 7 Wonders: Duel using React and TypeScript.
Tech Stack
Project Overview: 7 Wonders Duel Online
7 Wonders Duel Online is a digital adaptation of the acclaimed two-player board game by Antoine Bauza and Bruno Cathala inspired by its boardgamearena.com version. Known for its perfect blend of strategy, resource management, and civilizational development, 7 Wonders Duel condenses the epic scope of building ancient civilizations into intense 30-minute duels between two players.
The game features three distinct victory paths: military supremacy (advancing your armies to the opponent's capital), scientific dominance (collecting six different scientific symbols), or achieving the highest civilization score through careful city planning and wonder construction. This multi-layered victory system creates fascinating strategic tension where players must balance immediate tactical gains against long-term civilization building.
Built with TypeScript, React, and a custom game engine, this implementation prioritizes rule fidelity, deterministic gameplay, and smooth online multiplayer experience through real-time synchronization.
Motivation: The Challenge of Complex Game State
After successfully building Meticto, I was eager to tackle something significantly more complex. 7 Wonders Duel presented the perfect challenge: a beloved board game with intricate rules, multiple interconnected systems, and a reputation for being one of the best two-player strategy games ever designed.
The appeal wasn't just in the complexity – it was in the specific type of complexity. Unlike chess or Go, where the rules are simple but the possibility space is vast, 7 Wonders Duel has numerous subsystems that interact in carefully designed ways: resource production chains, military advancement, scientific discoveries, wonder construction, and economic management. Each system feeds into the others, creating emergent strategic depth.
I was particularly drawn to the deterministic aspects of the game. While card layouts involve shuffling, once the game begins, every decision is pure strategy with perfect information. This made it an ideal candidate for building a robust game engine that could guarantee consistent, fair gameplay online.
The Journey: From Rules Engine to Interactive Experience
The development followed a methodical approach, starting with the invisible foundation and building up to the user experience:
Phase 1: Rules Engine & Game Logic
I began by implementing the core game engine in TypeScript, treating the official rulebook as the ultimate specification. This meant building systems for:
- Resource production and trading mechanics
- Military conflict resolution
- Scientific symbol collection and progress tokens
- Wonder construction with varied effects
- Chain building (free construction through prerequisites)
- The complex end-game scoring system
The challenge here wasn't just implementing individual rules, but ensuring they interacted correctly. For example, the Urbanism progress token grants bonus coins only when structures are built "for free via chain" – not free through other means like wonder effects.
Phase 2: Deterministic Card Management
7 Wonders Duel's card layout system is beautiful and surprisingly simple when broken down into a grid system. Each age has a specific pyramid structure where some cards start face-down and are revealed only when the cards covering them are taken. Implementing this required:
- A flexible card masking system for different age layouts
- Proper handling of card covering/revealing mechanics
- Seeded random number generation for reproducible games
- Guild card integration (3 random guilds added to Age III)
Phase 3: Victory Condition Monitoring
With three distinct victory paths, the engine needed constant monitoring:
- Military Victory: Tracking conflict pawn movement and instant win conditions
- Scientific Victory: Monitoring unique symbol collection (6 different symbols triggers instant win)
- Civilization Victory: Complex end-game scoring with proper tie-breaking rules
Phase 4: Real-time Multiplayer Integration
Building on lessons learned from Meticto, I implemented:
- Server-authoritative game state management
- Real-time move validation and synchronization
- Extensive testing with Vitest to ensure rule fidelity
Technical Challenges & Solutions
Complex State Synchronization
Unlike Meticto's relatively simple game state, 7 Wonders Duel has numerous interconnected elements that must stay synchronized:
- Player civilizations (structures, wonders, tokens, resources)
- Card pyramid state (revealed/hidden, available/taken)
- Military track position
- Available progress tokens
- Trade prices affected by various structures
Solution: Implemented a comprehensive state serialization system with validation checkpoints. The server maintains the authoritative state while clients receive complete state snapshots after each action, ensuring consistency.
Resource Calculation Engine
The game's resource system is deceptively complex. Players produce resources through brown/grey structures, but flexible resources (like Forum providing any good) and trade modifiers (like Stone Reserve reducing stone costs) create intricate calculation challenges.
Solution: Built a dedicated resource resolver that aggregates all production sources, applies cost modifiers, and determines the minimum coin cost for any given structure. This resolver handles edge cases like the interaction between flexible resources and trade discounts.
Progress Token Effects
Progress tokens provide ongoing benefits, but some have "future-only" restrictions. For example, Strategy gives +1 military to red cards built after acquiring the token, not retroactively.
Solution: Implemented a temporal effect system that tracks when tokens were acquired and applies their benefits only to applicable future actions.
Deterministic Randomness
For competitive integrity, games with the same seed must produce identical results regardless of when or where they're played.
Solution: Used a seeded PRNG (seedrandom) for all randomization (card shuffling, guild selection) while keeping all other game logic purely deterministic. This enables replay analysis and ensures fair competitive play.
Key Features Implemented
Core Game Engine
- Complete implementation of base game rules (Ages I-III)
- All 12 wonders with their unique effects
- Full progress token system (10 base game tokens)
- Accurate resource production and trading
- Military conflict resolution
- Scientific discovery mechanics
- Proper end-game scoring with tie-breakers
Multiplayer Infrastructure
- Real-time game synchronization via WebSockets
- Server-authoritative move validation
- Spectator mode
- Room management (create/join games)