# Pixel Team Games 🕹️

Учебный проект команды. **Цель — не сами игры**, а тренировка: как заливать код на
GitHub, работать в ветках, делать Pull Request'ы и не убивать друг другу работу — на
примере сайта с коллекцией маленьких пиксель-артовых игр, куда каждый может
добавить свою.

Новый в проекте? Начните с [ONBOARDING.md](ONBOARDING.md) — быстрый гайд на 5 минут.

## Что уже есть

```
.
├── index.html           # хаб — список игр, рендерится из games.js
├── games.js             # реестр игр для главной страницы
├── theme.css             # тема сайта (лендинг), отдельно от игр
├── GAMES.md              # как добавить свою игру
├── ONBOARDING.md          # быстрый старт для нового участника (+ его Claude Code)
├── shared/                # общий мини-движок для игр (loop/input/canvas хелперы)
├── games/
│   └── collect-coins/     # первая игра — пример структуры
├── templates/             # варианты дизайна лендинга на выбор (см. ниже)
├── CLAUDE.md              # правила проекта для Claude Code
├── .claude/
│   ├── agents/            # 4 агента для разработки (см. ниже)
│   └── skills/            # 3 скилла-справочника (см. ниже)
└── README.md
```

Сайт — это чистые HTML/CSS/JS, без сборки и npm. Ставить ничего не нужно.

### Как добавить свою игру

Каждая игра — своя папка в `games/<slug>/`, изолированная от остальных (меньше
шансов на git-конфликт). Пошагово — в [GAMES.md](GAMES.md).

### Варианты дизайна на выбор

В `templates/` лежат готовые макеты лендинга в разной пиксельной стилистике —
можно открыть каждый в браузере и подсмотреть идеи или взять другой за основу для
`theme.css`. Сейчас применён стиль `templates/06-pastel-soft`, но это не финальное
решение — сменить можно в любой момент, не трогая игры.

## Как запустить

Просто открыть `index.html` в браузере (двойной клик или через VS Code —
расширение "Live Server" удобнее, потому что само перезагружает страницу при
изменениях). Со страницы-хаба — переход в любую игру из списка.

## Публикация сайта (GitHub Pages + свой домен)

Сайт статический, поэтому хостится бесплатно на **GitHub Pages** прямо из этого
репозитория — сборка не нужна.

### 1. Включить GitHub Pages

На GitHub: **Settings → Pages → Build and deployment → Source: Deploy from a
branch → Branch: `main` / `(root)` → Save.**

### 2. Подключить домен `izzzo108.one`

В репозитории уже лежит файл [`CNAME`](CNAME) с доменом — GitHub Pages подхватит
его сам после включения Pages. Останется настроить DNS у регистратора домена:

| Тип | Хост | Значение |
|---|---|---|
| A | `@` | `185.199.108.153` |
| A | `@` | `185.199.109.153` |
| A | `@` | `185.199.110.153` |
| A | `@` | `185.199.111.153` |
| AAAA (опционально, IPv6) | `@` | `2606:50c0:8000::153` |
| AAAA (опционально, IPv6) | `@` | `2606:50c0:8001::153` |
| AAAA (опционально, IPv6) | `@` | `2606:50c0:8002::153` |
| AAAA (опционально, IPv6) | `@` | `2606:50c0:8003::153` |

После этого в **Settings → Pages → Custom domain** ввести `izzzo108.one` и
сохранить — GitHub проверит DNS (может занять от пары минут до нескольких часов)
и выпустит бесплатный HTTPS-сертификат. Когда появится галочка **Enforce HTTPS** —
включить её.

Сайт будет доступен на `https://izzzo108.one`.

---

## Как пользоваться агентами Claude Code

В `.claude/agents/` и `.claude/skills/` лежит **минимальный** набор, взятый и
адаптированный из открытого проекта
[Everything Claude Code](https://github.com/affaan-m/everything-claude-code) (MIT,
там же лежал полный набор — 60+ агентов и 270+ скиллов; мы взяли только то, что
реально нужно для маленького сайта, чтобы не раздувать контекст и не тратить лишние
токены на каждый запрос).

Агенты и скиллы работают в Claude Code / Claude в VS Code автоматически — Claude сам
решает, когда их подключить, но их можно и попросить явно.

### Агенты (`.claude/agents/`)

Агент — это отдельный "специалист", которого можно вызвать на конкретную под-задачу
(у него своя роль и фокус, он не тащит в себя весь контекст текущего диалога).

| Агент | Файл | Когда использовать | Как позвать |
|---|---|---|---|
| **architect** | `architect.md` | Продумать структуру перед большой фичей (например, "как сделать несколько уровней игры") | *"используй агента architect, чтобы спроектировать систему уровней"* |
| **planner** | `planner.md` | Разбить фичу на понятные шаги перед тем, как писать код | *"пусть planner распишет план для фичи Х"* |
| **code-reviewer** | `code-reviewer.md` | Проверить код после того, как что-то написали, перед коммитом/PR | *"проверь мои изменения агентом code-reviewer"* |
| **code-simplifier** | `code-simplifier.md` | Упростить/причесать код, который стал громоздким, без потери функциональности | *"упрости этот файл через code-simplifier"* |

Обычно достаточно попросить своими словами ("спланируй фичу", "проверь код перед
коммитом") — Claude сам подберёт нужного агента.

### Скиллы (`.claude/skills/`)

Скилл — это справочник/инструкция, которую Claude подгружает по теме, когда она
актуальна (не занимает контекст, пока не нужна).

| Скилл | Папка | Про что |
|---|---|---|
| **git-workflow** | `git-workflow/` | Ветки, коммиты (Conventional Commits), merge vs rebase, конфликты, PR-шаблон |
| **coding-standards** | `coding-standards/` | Базовые правила читаемого и поддерживаемого кода |
| **frontend-design-direction** | `frontend-design-direction/` | Как сделать интерфейс/игру визуально приятной, а не "просто работающей" |

Активируются сами по контексту разговора, отдельно вызывать не нужно.

---

## Как работать с GitHub в команде

Репозиторий проекта: **https://github.com/izzzo108/Team_test**

### 1. Первый раз — подключить эту папку к GitHub

Локальный git ещё не инициализирован. Сделать один раз:

```bash
git init
git branch -M main
git add .
git commit -m "chore: init project scaffold"
git remote add origin https://github.com/izzzo108/Team_test.git
git push -u origin main
```

### 2. Остальным участникам — клонировать проект

```bash
git clone https://github.com/izzzo108/Team_test.git
cd Team_test
```

### 3. Правило: не пушим напрямую в `main`

Мы используем **GitHub Flow** — простую схему для маленьких команд:

```
main (всегда рабочая версия)
  │
  ├── feature/level-2       → Pull Request → merge в main
  ├── feature/enemy-sprite  → Pull Request → merge в main
  └── fix/player-stuck      → Pull Request → merge в main
```

Каждая фича/фикс — своя ветка, а не коммит прямо в `main`.

### 4. Рабочий цикл для одной задачи

```bash
# 1. Обновить main перед стартом
git checkout main
git pull origin main

# 2. Создать ветку под задачу
git checkout -b feature/tractor-road

# 3. Поработать, закоммитить
git add .
git commit -m "feat(tractor-road): добавить новую игру"

# 4. Запушить ветку
git push -u origin feature/название-задачи

# 5. Открыть Pull Request на GitHub (main ← feature/название-задачи)
#    и попросить кого-то из команды посмотреть/апрувнуть
```

После апрува — merge через кнопку на GitHub, ветку можно удалить.

### 5. Название веток и коммитов

- Ветки: `feature/...`, `fix/...`, `docs/...` — коротко и по-английски.
- Коммиты — [Conventional Commits](.claude/skills/git-workflow/SKILL.md):
  `feat: ...`, `fix: ...`, `docs: ...`, `style: ...`, `refactor: ...`, `chore: ...`.

Примеры:
```
feat(tractor-road): добавить новую игру про трактор
feat(collect-coins): добавить прыжок игроку
fix(collect-coins): монетка иногда появлялась под игроком
docs(readme): обновить инструкцию запуска
```

### 6. Если два человека изменили один файл (конфликт)

```bash
git checkout feature/твоя-ветка
git fetch origin
git rebase origin/main   # если ветка ещё не запушена никем другим
# Git покажет конфликтующие файлы — открыть, убрать маркеры <<<<<<< ======= >>>>>>>,
# оставить правильный код, затем:
git add .
git rebase --continue
```

Если ветка уже общая (пушили несколько человек) — используем `git merge main` вместо
`rebase`, чтобы не переписывать чужую историю.

Полный справочник (стратегии веток, semantic versioning, git hooks и т.д.) —
[`.claude/skills/git-workflow/SKILL.md`](.claude/skills/git-workflow/SKILL.md).

---

## Как предлагать и добавлять фичи

1. Накидываете идею (в чате команды/issue на GitHub).
2. Просите Claude ("используй planner") расписать шаги — получаете небольшой план.
3. Делаете ветку, реализуете, просите `code-reviewer` проверить перед PR.
4. Открываете Pull Request, кто-то из команды смотрит и мержит.

## Лицензия / источники

Агенты и скиллы адаптированы из проекта
[Everything Claude Code](https://github.com/affaan-m/everything-claude-code)
(MIT License, © Affaan Mustafa).