> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yuvrajverma.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Game Configuration

> Complete guide to adding custom game hosting pages to Latch with pricing, regions, and features

<Callout icon="link-horizontal" color="#2fbe1f">**Configuration Files:** `config/games/*.ts`</Callout>

<Info>
  **Feature Icons?** Check the [Icons Guide](../help/icons) for adding icons to game features and specifications.
</Info>

## Overview

Add unlimited game hosting pages to your Latch site. Each game gets its own page with:

* **Unique pricing** per region and billing period
* **Manual pricing** (exact prices) or **Auto pricing** (base + multipliers)
* **Multiple regions** with custom pricing
* **Flexible billing**: hourly, daily, weekly, monthly, quarterly, semi-annual, annual, lifetime
* **Hero sections** with stats, features, and FAQs
* **Unique purchase URLs** for every region/period combination

All configs live in: `config/games/`

## Quick Start

<Steps>
  <Step title="Copy the template">
    ```bash theme={null}
    cd config/games
    cp _template.ts rust.ts
    ```
  </Step>

  <Step title="Fill in the details">
    Open `rust.ts` and replace placeholders:

    ```typescript theme={null}
    // ===========================================
    // MINIMAL GAME TEMPLATE - BARE MINIMUM!
    // ===========================================
    // This is the absolute minimum needed to create a game page.
    // Copy this file, fill in the blanks, and you're done!

    import type { GameConfig } from "./types";

    export const YOUR_GAME_NAMEConfig: GameConfig = {
    // ===== BASIC INFO =====
    id: "YOUR_GAME_ID",                          // Example: "rust"
    name: "YOUR_GAME_NAME",                      // Example: "Rust"
    slug: "YOUR_GAME_SLUG",                      // Example: "rust"
    tagline: "YOUR TAGLINE",
    description: "YOUR DESCRIPTION",

    // ===== IMAGES =====
    logo: "/assets/games/hytale_logo.webp",//sample image
    heroImage: "/assets/hero_home.png", //sample image
    heroLogo: "default",

    // ===== HERO =====
    heroTitle: "YOUR_GAME_NAME hosting built to",
    heroHighlight: "perform",                    // This word gets highlighted
    heroSubtitle: "Your subtitle here",

    stats: [
    { label: "Uptime", value: "99.9%" },
    ],

    // ===== LOCATIONS =====
    regions: [
    {
      id: "us-east",
      name: "United States - East",
      location: "New York",
      flag: "https://hatscripts.github.io/circle-flags/flags/us.svg",
    },
    ],

    // ===== BILLING =====
    billingPeriods: [
    { id: "monthly", label: "Monthly" },
    ],

    // ===== SPECS =====
    planSpecs: [
    { id: "ram", label: "RAM", icon: "MemoryStick" },
    ],

    // ===== PLANS =====
    plans: [
    {
      id: "starter",
      name: "Starter",
      usp: "4GB",
      
      specs: {
        ram: "4GB",
      },
      
      pricing: {
        mode: "manual",
        prices: {
          "us-east": {
            monthly: 9.99,
          },
        }
      },
      
      features: [
        "DDoS Protection",
        "24/7 Support",
      ],
      
      purchaseUrls: {
        "us-east": {
          monthly: "https://billing.latch.gg/cart.php?a=add&pid=YOUR_PID",
        },
      },
    },
    ],

    // ===== FEATURES =====
    features: [
    {
      icon: "Zap",
      title: "Instant Setup",
      description: "Your server deploys in under 60 seconds",
      color: "yellow"
    },
    ],

    // ===== FAQS =====
    faqs: [
    {
      question: "How long does setup take?",
      answer: "Your server is deployed within 60 seconds."
    },
    ],
    };
    ```
  </Step>

  <Step title="Register the game">
    Add to `config/games/index.ts`:

    ```typescript theme={null}
    import { minecraftConfig } from "./minecraft";
    import { rustConfig } from "./rust";

    export const allGames: GamesCollection = {
      minecraft: minecraftConfig,
      rust: rustConfig,  // Add this
    };
    ```
  </Step>

  <Step title="Test it">
    ```bash theme={null}
    npm run dev
    ```

    Visit: [http://localhost:3000/games/rust](http://localhost:3000/games/rust)
  </Step>
</Steps>

***

## Configuration Reference

### Basic Info

```typescript theme={null}
{
  id: "minecraft",              // Unique identifier
  name: "Minecraft",            // Display name
  slug: "minecraft",            // URL slug (/games/minecraft)
  tagline: "Minecraft Hosting", // Short tagline
  description: "Premium Minecraft hosting with mod support",
}
```

### Images

```typescript theme={null}
{
  logo: "https://example.com/minecraft.png",
  heroImage: "https://example.com/hero.jpg",
}
```

**Tip**: Use full URLs or paths from `public/` folder like `/assets/games/minecraft.png`

### Hero Section

The hero is the top banner section of your game page.

```typescript theme={null}
{
  heroTitle: "Minecraft hosting built to",
  heroHighlight: "perform",      // This word gets highlighted in brand color
  heroSubtitle: "Low-latency servers with full mod support",
  heroLogo: "default",           // "default" = use game logo, custom URL, or false to hide
  
  stats: [
    { label: "Uptime", value: "99.9%" },
    { label: "Servers", value: "15K+" },
    { label: "Support", value: "24/7" },
  ],
}
```

### Regions

Server locations where your game servers can be hosted:

```typescript theme={null}
regions: [
  {
    id: "us-east",              // Used in pricing (must be unique)
    name: "United States - East",
    location: "New York",
    flag: "https://hatscripts.github.io/circle-flags/flags/us.svg",
  },
  {
    id: "eu-central",
    name: "Europe - Central",
    location: "Frankfurt",
    flag: "https://hatscripts.github.io/circle-flags/flags/de.svg",
  },
],
```

**Flags**: Get free SVG flags from [hatscripts circle flags](https://hatscripts.github.io/circle-flags/)

**Important**: The `id` is used in your pricing, so make sure they match exactly!

### Billing Periods

Define how often customers can pay. **This is an array of objects, NOT just strings!**

**Simple monthly + annual:**

```typescript theme={null}
billingPeriods: [
  {
    id: "monthly",
    label: "Monthly",
  },
  {
    id: "annual",
    label: "Annual",
    badge: "SAVE 15%",
  },
],
```

**With quarterly:**

```typescript theme={null}
billingPeriods: [
  { id: "monthly", label: "Monthly" },
  { id: "quarterly", label: "3 Months", badge: "7% OFF" },
  { id: "annual", label: "Annual", badge: "SAVE 15%" },
],
```

**With lifetime option:**

```typescript theme={null}
billingPeriods: [
  { id: "monthly", label: "Monthly" },
  { id: "lifetime", label: "Lifetime", badge: "PAY ONCE" },
],
```

**Flexible hourly/daily billing:**

```typescript theme={null}
billingPeriods: [
  { id: "hourly", label: "Hourly" },
  { id: "daily", label: "Daily" },
  { id: "weekly", label: "Weekly" },
  { id: "monthly", label: "Monthly" },
],
```

**Available period IDs**: hourly, daily, weekly, monthly, quarterly, semi-annual, annual, lifetime

### Plan Specs

Define the specification columns shown for ALL your plans:

```typescript theme={null}
planSpecs: [
  { id: "ram", label: "RAM", icon: "MemoryStick" },
  { id: "cpu", label: "CPU", icon: "Cpu" },
  { id: "storage", label: "Storage", icon: "HardDrive" },
],
```

**Important**: The `id` field must match the keys you use in each plan's `specs` object!

**Icons**: Browse Lucide icons at [lucide.dev](https://lucide.dev) - use PascalCase like MemoryStick, Cpu, HardDrive, Users, Database

***

## Plans & Pricing

Choose between manual pricing (exact prices per region) or auto pricing (base price + multipliers):

<Tabs>
  <Tab title="Manual Pricing" icon="hand">
    Define exact prices for each region and period:

    ```typescript theme={null}
    plans: [
      {
        id: "dirt",
        name: "Dirt",
        description: "Perfect for playing with friends",
        popular: false,
        usp: "2GB",  // Badge shown in card
        badge: "NEW",  // Optional diagonal badge
        
        // Specs (keys MUST match planSpecs IDs)
        specs: {
          ram: "2GB DDR4",
          cpu: "2 Cores",
          storage: "10GB NVMe",
        },
        
        // Features included in this plan
        features: [
          "Vanilla & Modded Support",
          "DDoS Protection",
          "Instant Setup",
          "Daily Backups",
          "Full FTP Access",
        ],
        
        // Manual pricing
        pricing: {
          mode: "manual",
          prices: {
            "us-east": {
              monthly: 2.99,
              quarterly: 2.78,
              annual: 2.54,
              lifetime: 89.99,
            },
            "us-west": {
              monthly: 3.49,
              quarterly: 3.25,
              annual: 2.97,
              lifetime: 99.99,
            },
            "eu-central": {
              monthly: 2.79,
              quarterly: 2.60,
              annual: 2.37,
              lifetime: 84.99,
            },
          },
        },
        
        // Purchase URLs (MUST match every region + period combination!)
        purchaseUrls: {
          "us-east": {
            monthly: "https://billing.latch.gg/cart.php?a=add&pid=801",
            quarterly: "https://billing.latch.gg/cart.php?a=add&pid=802",
            annual: "https://billing.latch.gg/cart.php?a=add&pid=803",
            lifetime: "https://billing.latch.gg/cart.php?a=add&pid=804",
          },
          "us-west": {
            monthly: "https://billing.latch.gg/cart.php?a=add&pid=805",
            quarterly: "https://billing.latch.gg/cart.php?a=add&pid=806",
            annual: "https://billing.latch.gg/cart.php?a=add&pid=807",
            lifetime: "https://billing.latch.gg/cart.php?a=add&pid=808",
          },
          "eu-central": {
            monthly: "https://billing.latch.gg/cart.php?a=add&pid=809",
            quarterly: "https://billing.latch.gg/cart.php?a=add&pid=810",
            annual: "https://billing.latch.gg/cart.php?a=add&pid=811",
            lifetime: "https://billing.latch.gg/cart.php?a=add&pid=812",
          },
        },
      },
    ],
    ```

    **Critical**:

    * Prices are **plain numbers** (2.99, not "2.99" or `{amount: "2.99"}`)
    * Every region/period combo needs a price
    * Every region/period combo needs a purchaseUrl
    * Region IDs must match `regions` array
  </Tab>

  <Tab title="Auto Pricing" icon="calculator">
    Calculate prices using base price + multipliers:

    ```typescript theme={null}
    {
      id: "starter",
      name: "Starter",
      description: "Perfect for small communities",
      usp: "4GB",
      
      specs: {
        ram: "4GB DDR4",
        cpu: "2 Cores",
        storage: "25GB NVMe",
      },
      
      features: [
        "DDoS Protection",
        "Instant Setup (< 60s)",
        "24/7 Support",
        "Daily Backups",
        "Full FTP Access",
      ],
      
      // Auto pricing
      pricing: {
        mode: "auto",
        basePrice: 3.99,  // Base monthly price
        
        regionMultipliers: {
          "us-east": 1.0,     // 3.99 × 1.0 = $3.99
          "us-west": 1.1,     // 3.99 × 1.1 = $4.39
          "eu-central": 0.95, // 3.99 × 0.95 = $3.79
          "singapore": 1.2,   // 3.99 × 1.2 = $4.79
        },
        
        periodMultipliers: {
          monthly: 1.0,        // 1x base
          quarterly: 0.95,     // 5% off
          "semi-annual": 0.90, // 10% off
          annual: 0.80,        // 20% off
        },
      },
      
      // Still need purchase URLs for every combo!
      purchaseUrls: {
        "us-east": {
          monthly: "https://billing.latch.gg/cart.php?a=add&pid=101",
          quarterly: "https://billing.latch.gg/cart.php?a=add&pid=102",
          "semi-annual": "https://billing.latch.gg/cart.php?a=add&pid=103",
          annual: "https://billing.latch.gg/cart.php?a=add&pid=104",
        },
        // ... repeat for all regions
      },
    }
    ```

    **Formula**:

    ```
    Final Price = basePrice × regionMultiplier × periodMultiplier
    ```

    **Example**:

    * US East Monthly: `3.99 × 1.0 × 1.0 = $3.99`
    * EU Central Monthly: `3.99 × 0.95 × 1.0 = $3.79`
    * US West Annual: `3.99 × 1.1 × 0.80 = $3.51`
  </Tab>
</Tabs>

### Popular Badge

```typescript theme={null}
popular: true,  // Shows "Most Popular" badge
```

Use on 1 plan (usually middle tier) to highlight it.

***

## Features

Game-specific features grid:

```typescript theme={null}
features: [
  {
    icon: "Package",
    title: "One-Click Modpacks",
    description: "Install FTB, CurseForge, and ATM modpacks instantly",
    color: "blue",  // Optional: yellow, green, blue, purple, cyan, orange, brand
  },
  {
    icon: "Shield",
    title: "DDoS Protection",
    description: "Enterprise-grade protection included with all plans",
    color: "green",
  },
  {
    icon: "Database",
    title: "Automatic Backups",
    description: "Hourly backups with one-click restore",
    color: "purple",
  },
  {
    icon: "Terminal",
    title: "Console Access",
    description: "Full access to server console and real-time logs",
  },
],
```

**Icons**: Lucide icons (Package, Shield, Database, Terminal, Zap, Users, etc.)

***

## FAQs

```typescript theme={null}
faqs: [
  {
    question: "Can I install mods and plugins?",
    answer: "Yes! We support all major mod loaders including Forge, Fabric, Bukkit, Spigot, and Paper."
  },
  {
    question: "Do you provide DDoS protection?",
    answer: "Absolutely! All servers include enterprise-grade DDoS protection at no extra cost."
  },
  {
    question: "How do backups work?",
    answer: "We automatically backup your server every hour. You can restore from any backup with one click."
  },
],
```

***

## Real Examples

### Minecraft (Manual + Lifetime)

From `Latch/config/games/minecraft.ts`:

```typescript theme={null}
billingPeriods: [
  { id: "monthly", label: "Monthly" },
  { id: "quarterly", label: "3 Months", badge: "7% OFF" },
  { id: "annual", label: "Annual", badge: "SAVE 15%" },
  { id: "lifetime", label: "Lifetime", badge: "PAY ONCE" },
],

plans: [
  {
    id: "dirt",
    name: "Dirt",
    description: "Perfect for playing with friends",
    usp: "2GB",
    
    specs: {
      ram: "2GB",
      cpu: "2 Cores",
      storage: "10GB NVMe",
    },
    
    features: [
      "Vanilla & Modded Support",
      "DDoS Protection",
      "Instant Setup",
      "Daily Backups",
      "Full FTP Access",
    ],
    
    pricing: {
      mode: "manual",
      prices: {
        "us-east": {
          monthly: 2.99,
          quarterly: 2.78,
          annual: 2.54,
          lifetime: 89.99,
        },
        // ... more regions
      },
    },
    
    purchaseUrls: {
      "us-east": {
        monthly: "https://billing.latch.gg/cart.php?a=add&pid=801",
        quarterly: "https://billing.latch.gg/cart.php?a=add&pid=802",
        annual: "https://billing.latch.gg/cart.php?a=add&pid=803",
        lifetime: "https://billing.latch.gg/cart.php?a=add&pid=804",
      },
      // ... more regions
    },
  },
],
```

### Hytale (Auto Pricing)

From `Latch/config/games/hytale.ts`:

```typescript theme={null}
pricing: {
  mode: "auto",
  basePrice: 3.99,
  
  regionMultipliers: {
    "us-east": 1.0,
    "us-west": 1.1,
    "eu-central": 0.95,
    "singapore": 1.2,
  },
  
  periodMultipliers: {
    monthly: 1.0,
    quarterly: 0.95,
    "semi-annual": 0.90,
    annual: 0.80,
  },
},
```

### FiveM (Hourly Billing)

From `Latch/config/games/fivem.ts`:

```typescript theme={null}
billingPeriods: [
  { id: "hourly", label: "Hourly" },
  { id: "daily", label: "Daily" },
  { id: "weekly", label: "Weekly" },
  { id: "monthly", label: "Monthly" },
  { id: "annual", label: "Annual" },
],

pricing: {
  mode: "manual",
  prices: {
    "us-east": {
      hourly: 0.15,
      daily: 1.99,
      weekly: 9.99,
      monthly: 29.99,
      annual: 299.99,
    },
  },
},
```

***

## Best Practices

### Pricing

1. **3-4 plans maximum** - Too many = overwhelming
2. **Mark 1 as popular** - Guide users to best option
3. **Show discounts** - Use badge: "SAVE 15%"
4. **Price by region** - Europe/Asia often cost more

### Regions

1. **Start with 3-5 regions** - Expand later
2. **Use descriptive names** - "US East" not "us-east-1"
3. **Include location** - "New York" helps users choose

### Billing Periods

1. **Monthly + Annual** - Good starting point
2. **Hourly/Daily** - For test servers
3. **Lifetime** - Premium option for loyal customers

### Plans

1. **Clear progression** - Each tier should add value
2. **Descriptive names** - "Starter/Pro/Ultimate" > "Plan A/B/C"
3. **USP badges** - Show key spec (4GB, 8GB, etc.)

***

## Troubleshooting

### Pricing not showing

**Check**:

* Prices are numbers, not strings: `monthly: 9.99` not `"9.99"`
* Every region has prices for all billing periods
* Region IDs match exactly (case-sensitive)

### Purchase URLs missing

**Fix**:

* Every region/period combo needs a purchaseUrl
* URLs must match billing period IDs exactly
* Check for typos: `"semi-annual"` not `"semiannual"`

### TypeScript errors

```
Property 'annual' does not exist...
```

**Solution**: If you define a billing period, ALL regions must have that price:

```typescript theme={null}
billingPeriods: [
  { id: "monthly", label: "Monthly" },
  { id: "annual", label: "Annual" },  // Added this
],

prices: {
  "us-east": {
    monthly: 9.99,
    annual: 99.99,  // Must add this too!
  },
}
```

### Images not loading

**Check**:

* Use full URLs: `https://example.com/logo.png`
* Or use relative paths from `public`: `/assets/games/minecraft.png`
* Case-sensitive: `Minecraft.png` ≠ `minecraft.png`

***

## Complete Example

Full working config:

```typescript theme={null}
import type { GameConfig } from "./types";

export const minecraftConfig: GameConfig = {
  // Basic info
  id: "minecraft",
  name: "Minecraft",
  slug: "minecraft",
  tagline: "Minecraft Hosting",
  description: "Premium Minecraft hosting with mod support",
  
  // Images
  logo: "https://static.wikia.nocookie.net/logopedia/images/f/f9/Minecraft_Bedrock_icon.svg/",
  heroImage: "https://www.hdwallpapers.in/download/minecraft_background_hd_minecraft-HD.jpg",
  heroTitle: "Minecraft hosting built to",
  heroHighlight: "create",
  heroSubtitle: "Low-latency Minecraft servers with full mod support",
  heroLogo: "default",
  
  stats: [
    { label: "Uptime", value: "99.9%" },
    { label: "Active Servers", value: "15K+" },
    { label: "Support", value: "24/7" },
  ],
  
  // Regions
  regions: [
    {
      id: "us-east",
      name: "United States - East",
      location: "New York",
      flag: "https://hatscripts.github.io/circle-flags/flags/us.svg",
    },
    {
      id: "eu-central",
      name: "Europe - Central",
      location: "Frankfurt",
      flag: "https://hatscripts.github.io/circle-flags/flags/de.svg",
    },
  ],
  
  // Billing periods (array of objects!)
  billingPeriods: [
    { id: "monthly", label: "Monthly" },
    { id: "annual", label: "Annual", badge: "SAVE 15%" },
    { id: "lifetime", label: "Lifetime", badge: "PAY ONCE" },
  ],
  
  // Plan specs
  planSpecs: [
    { id: "ram", label: "RAM", icon: "MemoryStick" },
    { id: "cpu", label: "CPU", icon: "Cpu" },
    { id: "storage", label: "Storage", icon: "HardDrive" },
  ],
  
  // Plans
  plans: [
    {
      id: "dirt",
      name: "Dirt",
      description: "Perfect for playing with friends",
      usp: "2GB",
      popular: false,
      
      specs: {
        ram: "2GB",
        cpu: "2 Cores",
        storage: "10GB NVMe",
      },
      
      features: [
        "Vanilla & Modded Support",
        "DDoS Protection",
        "Instant Setup",
        "Daily Backups",
        "Full FTP Access",
      ],
      
      pricing: {
        mode: "manual",
        prices: {
          "us-east": {
            monthly: 2.99,
            annual: 29.99,
            lifetime: 89.99,
          },
          "eu-central": {
            monthly: 2.79,
            annual: 27.99,
            lifetime: 84.99,
          },
        },
      },
      
      purchaseUrls: {
        "us-east": {
          monthly: "https://billing.latch.gg/cart.php?a=add&pid=801",
          annual: "https://billing.latch.gg/cart.php?a=add&pid=802",
          lifetime: "https://billing.latch.gg/cart.php?a=add&pid=803",
        },
        "eu-central": {
          monthly: "https://billing.latch.gg/cart.php?a=add&pid=809",
          annual: "https://billing.latch.gg/cart.php?a=add&pid=810",
          lifetime: "https://billing.latch.gg/cart.php?a=add&pid=811",
        },
      },
    },
    
    {
      id: "gold",
      name: "Gold",
      description: "Perfect for communities",
      usp: "8GB",
      popular: true,  // Highlighted
      
      specs: {
        ram: "8GB",
        cpu: "4 Cores",
        storage: "50GB NVMe",
      },
      
      features: [
        "Everything in Dirt",
        "Priority Support",
        "Hourly Backups",
        "MySQL Database",
        "Custom Domain",
      ],
      
      pricing: {
        mode: "manual",
        prices: {
          "us-east": {
            monthly: 9.99,
            annual: 99.99,
            lifetime: 299.99,
          },
          "eu-central": {
            monthly: 9.49,
            annual: 94.99,
            lifetime: 284.99,
          },
        },
      },
      
      purchaseUrls: {
        "us-east": {
          monthly: "https://billing.latch.gg/cart.php?a=add&pid=1001",
          annual: "https://billing.latch.gg/cart.php?a=add&pid=1002",
          lifetime: "https://billing.latch.gg/cart.php?a=add&pid=1003",
        },
        "eu-central": {
          monthly: "https://billing.latch.gg/cart.php?a=add&pid=1009",
          annual: "https://billing.latch.gg/cart.php?a=add&pid=1010",
          lifetime: "https://billing.latch.gg/cart.php?a=add&pid=1011",
        },
      },
    },
  ],
  
  // Features
  features: [
    {
      icon: "Package",
      title: "One-Click Modpacks",
      description: "Install FTB, CurseForge, and ATM modpacks instantly",
      color: "blue",
    },
    {
      icon: "Shield",
      title: "DDoS Protection",
      description: "Enterprise-grade protection on all servers",
      color: "green",
    },
    {
      icon: "Database",
      title: "Automatic Backups",
      description: "Hourly backups with one-click restore",
      color: "purple",
    },
  ],
  
  // FAQs
  faqs: [
    {
      question: "Can I install mods?",
      answer: "Yes! Full support for Forge, Fabric, Bukkit, Spigot, and Paper."
    },
    {
      question: "Do you provide DDoS protection?",
      answer: "All servers include enterprise-grade DDoS protection at no extra cost."
    },
  ],
};
```