Game Configuration

Configuration Files: config/games/*.ts

Feature Icons? Check the Icons Guide for adding icons to game features and specifications.

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

Copy the template

cd config/games
cp _template.ts rust.ts

Fill in the details

Open rust.ts and replace placeholders:

// ===========================================
// 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."
},
],
};

Add to config/games/index.ts:

import { minecraftConfig } from "./minecraft";
import { rustConfig } from "./rust";

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

Test it

npm run dev

Visit: http://localhost:3000/games/rust

Configuration Reference

Basic Info

{
  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

{
  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.

{
  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:

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 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:

billingPeriods: [
  {
    id: "monthly",
    label: "Monthly",
  },
  {
    id: "annual",
    label: "Annual",
    badge: "SAVE 15%",
  },
],

With quarterly:

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

With lifetime option:

billingPeriods: [
  { id: "monthly", label: "Monthly" },
  { id: "lifetime", label: "Lifetime", badge: "PAY ONCE" },
],

Flexible hourly/daily billing:

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:

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 - use PascalCase like MemoryStick, Cpu, HardDrive, Users, Database

Plans & Pricing

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

Manual Pricing
Auto Pricing

Define exact prices for each region and period:

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

Calculate prices using base price + multipliers:

{
  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

Popular Badge

popular: true,  // Shows "Most Popular" badge

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

Features

Game-specific features grid:

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

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:

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:

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:

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

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

Regions

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

Billing Periods

Monthly + Annual - Good starting point
Hourly/Daily - For test servers
Lifetime - Premium option for loyal customers

Plans

Clear progression - Each tier should add value
Descriptive names - “Starter/Pro/Ultimate” > “Plan A/B/C”
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:

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:

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."
    },
  ],
};

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Overview

Quick Start

Configuration Reference

Basic Info

Images

Hero Section

Regions

Billing Periods

Plan Specs

Plans & Pricing

Popular Badge

Features

FAQs

Real Examples

Minecraft (Manual + Lifetime)

Hytale (Auto Pricing)

FiveM (Hourly Billing)

Best Practices

Pricing

Regions

Billing Periods

Plans

Troubleshooting

Pricing not showing

Purchase URLs missing

TypeScript errors

Images not loading

Complete Example

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

​Overview

​Quick Start

​Configuration Reference

​Basic Info

​Images

​Hero Section

​Regions

​Billing Periods

​Plan Specs

​Plans & Pricing

​Popular Badge

​Features

​FAQs

​Real Examples

​Minecraft (Manual + Lifetime)

​Hytale (Auto Pricing)

​FiveM (Hourly Billing)

​Best Practices

​Pricing

​Regions

​Billing Periods

​Plans

​Troubleshooting

​Pricing not showing

​Purchase URLs missing

​TypeScript errors

​Images not loading

​Complete Example

Overview

Quick Start

Configuration Reference

Basic Info

Images

Hero Section

Regions

Billing Periods

Plan Specs

Plans & Pricing

Popular Badge

Features

FAQs

Real Examples

Minecraft (Manual + Lifetime)

Hytale (Auto Pricing)

FiveM (Hourly Billing)

Best Practices

Pricing

Regions

Billing Periods

Plans

Troubleshooting

Pricing not showing

Purchase URLs missing

TypeScript errors

Images not loading

Complete Example