4.2 KiB

Raw Blame History

Game Theme Standardization

Problem

Previously, each game manually specified color, gradient, and borderColor in their manifest. This led to:

Inconsistent appearance across game cards
No guidance on what colors/gradients to use
Easy to choose saturated colors that don't match the pastel style
Duplication and maintenance burden

Solution

Standard theme presets in /src/lib/arcade/game-themes.ts

All games now use predefined color themes that ensure consistent, professional appearance.

Usage

1. Import from the Game SDK

import { defineGame, getGameTheme } from "@/lib/arcade/game-sdk";
import type { GameManifest } from "@/lib/arcade/game-sdk";

2. Use the Theme Spread Operator

const manifest: GameManifest = {
  name: "my-game",
  displayName: "My Awesome Game",
  icon: "🎮",
  description: "A fun game",
  longDescription: "More details...",
  maxPlayers: 4,
  difficulty: "Intermediate",
  chips: ["🎯 Feature 1", "⚡ Feature 2"],
  ...getGameTheme("blue"), // ← Just add this!
  available: true,
};

That's it! The theme automatically provides:

color: 'blue'
gradient: 'linear-gradient(135deg, #dbeafe, #bfdbfe)'
borderColor: 'blue.200'

Available Themes

All themes use Panda CSS's 100-200 color range for soft pastel appearance:

Theme	Color Range	Use Case
`blue`	blue-100 to blue-200	Memory, puzzle games
`purple`	purple-100 to purple-200	Strategic, battle games
`green`	green-100 to green-200	Growth, achievement games
`teal`	teal-100 to teal-200	Creative, sorting games
`indigo`	indigo-100 to indigo-200	Deep thinking games
`pink`	pink-100 to pink-200	Fun, casual games
`orange`	orange-100 to orange-200	Speed, energy games
`yellow`	yellow-100 to yellow-200	Bright, happy games
`red`	red-100 to red-200	Competition, challenge
`gray`	gray-100 to gray-200	Neutral games

Examples

Current Games

// Memory Lightning - blue theme
...getGameTheme('blue')

// Matching Pairs Battle - purple theme
...getGameTheme('purple')

// Card Sorting Challenge - teal theme
...getGameTheme('teal')

// Speed Complement Race - blue theme
...getGameTheme('blue')

Benefits

✅ Consistency - All games have the same professional pastel look ✅ Simple - One line instead of three properties ✅ Maintainable - Update all games by changing the theme definition ✅ Discoverable - TypeScript autocomplete shows available themes ✅ No mistakes - Can't accidentally use wrong color values

Advanced Usage

If you need to inspect or customize a theme:

import { GAME_THEMES } from "@/lib/arcade/game-sdk";
import type { GameTheme } from "@/lib/arcade/game-sdk";

// Access a specific theme
const blueTheme: GameTheme = GAME_THEMES.blue;

// Use it
const manifest: GameManifest = {
  // ... other fields
  ...blueTheme,
  // Or customize:
  color: blueTheme.color,
  gradient: "linear-gradient(135deg, #custom, #values)", // override
  borderColor: blueTheme.borderColor,
};

Adding New Themes

To add a new theme, edit /src/lib/arcade/game-themes.ts:

export const GAME_THEMES = {
  // ... existing themes
  mycolor: {
    color: "mycolor",
    gradient: "linear-gradient(135deg, #lighter, #darker)", // Use Panda CSS 100-200 range
    borderColor: "mycolor.200",
  },
} as const satisfies Record<string, GameTheme>;

Then update the TypeScript type:

export type GameThemeName = keyof typeof GAME_THEMES;

Migration Checklist

When creating a new game:

Import getGameTheme from @/lib/arcade/game-sdk
Use ...getGameTheme('theme-name') in manifest
Remove manual color, gradient, borderColor properties
Choose a theme that matches your game's vibe

Summary

Old way (error-prone, inconsistent):

color: 'teal',
gradient: 'linear-gradient(135deg, #99f6e4, #5eead4)',  // Too saturated!
borderColor: 'teal.200',

New way (simple, consistent):

...getGameTheme('teal')

4.2 KiB Raw Blame History