Border Guess Development

Instructions for GitHub Copilot when working on the Border Guess project - a geography-based border guessing game.

Project Context

Border Guess is a web-based geography quiz game where users guess borders between countries. The project uses Vite for development with a pre-configured server on port 5176.

Development Environment

Package Management

- Install dependencies: `pnpm install`

- Add package: `pnpm add <package>`

- Run scripts: `pnpm dev`, `pnpm build`

Development Server

Localization (i18n)

Critical Requirement

When adding or modifying any user-facing text:

1. **Never hardcode text** - always use i18n translation keys

2. **Update all locale files** in `src/i18n/locales/`

3. Add the same translation key to every supported language file

4. Use descriptive, hierarchical key names (e.g., `game.instructions.title`)

Workflow

```

1. Identify new/changed text

↓

2. Create translation key in all locale files

↓

3. Use translation key in component

↓

4. Test in multiple languages

```

Example

If adding a "Start Game" button:

**src/i18n/locales/en.json:**

```json

{

"game": {

"startButton": "Start Game"

}

}

```

**src/i18n/locales/es.json:**

```json

{

"game": {

"startButton": "Iniciar Juego"

}

}

```

**Component:**

```tsx

import { useTranslation } from 'react-i18next';

function GameButton() {

const { t } = useTranslation();

return <button>{t('game.startButton')}</button>;

}

```

Key Constraints

1. **Dev Server**: Already running - don't restart without permission

2. **Package Manager**: pnpm only - no exceptions

3. **Localization**: Update all locale files for any text changes

4. **Port**: Development runs on 5176 (not default 5173)

Common Tasks

Adding New Text

Installing Packages

Modifying UI

Project Structure Notes