Claude's Corner: Pax Historia — AI Rewrites History, One Turn at a Time

---
description: Build a Pax Historia clone — an AI-powered grand strategy sandbox game
---

# Build Pax Historia: Rewrite History with AI

## What You're Building
A browser-based grand strategy sandbox game where players pick a country and historical moment, then issue commands (diplomacy, war, trade) while AI agents control every other nation. The AI generates dynamic narrative responses instead of following scripted paths. Players can create and share custom maps and scenarios.

## Tech Stack
- **Frontend:** Next.js 14+ (App Router) + Tailwind CSS
- **Maps:** Leaflet.js with custom SVG overlays for interactive geopolitical maps
- **Backend:** Next.js API routes (Node.js)
- **Database:** Supabase (PostgreSQL + Auth + Realtime)
- **AI:** OpenRouter API (unified gateway to OpenAI, Anthropic, Google, open-source models)
- **Key Libraries:** react-leaflet, zustand (state management), zod (validation)

## Step 1: Project Setup

```bash
npx create-next-app@latest pax-clone --typescript --tailwind --app --src-dir
cd pax-clone
npm install leaflet react-leaflet @types/leaflet zustand zod openai
npm install @supabase/supabase-js @supabase/ssr
```

Create your `.env.local`:
```
OPENROUTER_API_KEY=your_key_here
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_key
```

## Step 2: Core Data Models

### Database Schema (Supabase SQL)
```sql
-- Presets: community-created scenarios
CREATE TABLE presets (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  creator_id UUID REFERENCES auth.users(id),
  title TEXT NOT NULL,
  description TEXT,
  year_start INTEGER NOT NULL DEFAULT 1936,
  historical_context TEXT,
  map_data JSONB NOT NULL,
  countries JSONB NOT NULL,
  divergence_point TEXT,
  play_count INTEGER DEFAULT 0,
  published BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT now()
);

-- Game sessions
CREATE TABLE game_sessions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  preset_id UUID REFERENCES presets(id),
  player_id UUID REFERENCES auth.users(id),
  player_country TEXT NOT NULL,
  current_year INTEGER NOT NULL,
  world_state JSONB NOT NULL,
  turn_history JSONB[] DEFAULT ARRAY[]::JSONB[],
  model_id TEXT DEFAULT 'anthropic/claude-sonnet-4',
  tokens_used INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- Turn log
CREATE TABLE turns (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  session_id UUID REFERENCES game_sessions(id),
  turn_number INTEGER NOT NULL,
  player_action TEXT NOT NULL,
  ai_response JSONB NOT NULL,
  tokens_consumed INTEGER,
  model_used TEXT,
  created_at TIMESTAMPTZ DEFAULT now()
);
```

### TypeScript Types
```typescript
interface Country {
  name: string;
  color: string;
  regions: string[];
  stats: { military: number; economy: number; diplomacy: number; technology: number };
  relations: Record<string, number>;
}

interface WorldState {
  year: number;
  countries: Country[];
  events: GameEvent[];
  mapData: GeoJSON.FeatureCollection;
  historicalContext: string;
  recentActions: TurnAction[];
}
```

## Step 3: Interactive Map with Leaflet.js

Create `src/components/GameMap.tsx`:
```tsx
"use client";
import dynamic from "next/dynamic";
// Must use dynamic import — Leaflet requires window
const MapContainer = dynamic(() => import("react-leaflet").then(m => m.MapContainer), { ssr: false });
const GeoJSON = dynamic(() => import("react-leaflet").then(m => m.GeoJSON), { ssr: false });
import "leaflet/dist/leaflet.css";
import { useGameStore } from "@/stores/gameStore";

export function GameMap() {
  const { worldState, playerCountry, selectRegion } = useGameStore();

  const getRegionStyle = (feature: any) => {
    const country = worldState.countries.find(c => c.regions.includes(feature.properties.id));
    const isPlayer = country?.name === playerCountry;
    return {
      fillColor: country?.color || "#ccc",
      weight: isPlayer ? 2 : 1,
      color: isPlayer ? "#fff" : "#666",
      fillOpacity: isPlayer ? 0.8 : 0.6,
    };
  };

  return (
    <MapContainer center={[30, 0]} zoom={3} className="h-full w-full" zoomControl={false}>
      <GeoJSON data={worldState.mapData} style={getRegionStyle}
        onEachFeature={(feature, layer) => {
          layer.on("click", () => selectRegion(feature.properties.id));
          layer.bindTooltip(feature.properties.name);
        }}
      />
    </MapContainer>
  );
}
```

Download world GeoJSON: `curl -o public/world.geojson https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson`

## Step 4: AI Agent System (The Core Engine)

Create `src/lib/ai-agents.ts`:
```typescript
import OpenAI from "openai";

const openrouter = new OpenAI({
  baseURL: "https://openrouter.ai/api/v1",
  apiKey: process.env.OPENROUTER_API_KEY,
});

export async function validateAction(action: string, worldState: WorldState, model: string) {
  const response = await openrouter.chat.completions.create({
    model,
    messages: [
      { role: "system", content: `You are a historical plausibility validator. Given world state (year: ${worldState.year}), determine if the action is plausible. Respond JSON: { "valid": boolean, "reason": string }` },
      { role: "user", content: `World: ${JSON.stringify(compressState(worldState))}\nAction: ${action}` },
    ],
    response_format: { type: "json_object" },
  });
  return JSON.parse(response.choices[0].message.content || "{}");
}

export async function generateWorldResponse(action: string, worldState: WorldState, playerCountry: string, model: string) {
  const response = await openrouter.chat.completions.create({
    model,
    messages: [
      { role: "system", content: `You are the game master of an AI grand strategy game set in ${worldState.year}. You control all nations EXCEPT ${playerCountry}. Generate: narrative (2-3 paragraphs HTML), events array, and worldChanges object. Be dramatic but historically grounded.` },
      { role: "user", content: `World: ${JSON.stringify(compressState(worldState))}\n${playerCountry} action: ${action}` },
    ],
    response_format: { type: "json_object" },
    max_tokens: 2000,
  });
  return JSON.parse(response.choices[0].message.content || "{}");
}

export async function getAdvisorResponse(question: string, worldState: WorldState, playerCountry: string, model: string) {
  const response = await openrouter.chat.completions.create({
    model,
    messages: [
      { role: "system", content: `You are a strategic advisor to ${playerCountry} in ${worldState.year}. Give specific, actionable advice. Be concise.` },
      { role: "user", content: `Situation: ${JSON.stringify(compressState(worldState))}\nQuestion: ${question}` },
    ],
    max_tokens: 800,
  });
  return response.choices[0].message.content || "";
}

function compressState(state: WorldState) {
  return {
    year: state.year,
    countries: state.countries.map(c => ({ name: c.name, mil: c.stats.military, econ: c.stats.economy, tech: c.stats.technology, topRelations: Object.entries(c.relations).sort(([,a],[,b]) => Math.abs(b as number) - Math.abs(a as number)).slice(0, 5) })),
    recentEvents: state.events.slice(-10),
    lastActions: state.recentActions.slice(-5),
  };
}
```

## Step 5: Game API Route

Create `src/app/api/game/turn/route.ts` — accepts player action, validates it, generates AI response, updates world state, saves to database.

## Step 6: Game UI

Layout: Map (left 60%) | Action Panel (right 40%) | Stats bar (bottom)
- `GameMap` — Leaflet with country coloring
- `ActionPanel` — text input + history feed
- `AdvisorChat` — "Ask your advisor" dialog
- `ModelPicker` — 3 tiers: Fast / Standard / Premium
- `PresetBrowser` — community scenario grid

## Step 7: Deploy

```bash
vercel deploy --prod
```
Set env vars. Use 60s+ function timeout for AI routes (Vercel Pro or Railway).

## Key Insights
- The game engine IS prompt engineering — system prompt quality determines gameplay quality
- Serialize world state but compress aggressively to control token costs
- OpenRouter's unified API means swapping models requires zero code changes
- Community presets are your content flywheel — invest in map editor UX
- The action validator prevents hallucination chaos (no satellites in 1200 AD)

## Gotchas
- Leaflet requires `next/dynamic` with `ssr: false` in Next.js
- World state JSON grows fast — implement summarization every N turns
- OpenRouter rate limits vary by model — add retry with exponential backoff
- GeoJSON files are large — consider TopoJSON for smaller payloads
- AI response times range 2-30s — show loading state with flavor text