# Свои PNG-скины и шляпы

Папка: `public/custom-skins/`

Ты можешь подставить **свои PNG** вместо стандартных текстур змейки и шляп. Файлы кладутся на сервер в эту папку, назначение — в **магазине** (вкладки «Скины» и «Шляпы»).

## Быстрый старт

1. Положи PNG в `public/custom-skins/` (или используй встроенные заглушки — `slot1–3.png`, `hat1–3.png`)
2. Имена файлов — как в таблице ниже (или измени `config.json`)
3. Перезапуск сервера **не обязателен** — достаточно обновить страницу (Ctrl+F5)
4. Открой **Магазин** → выбери «Свой скин» / «Своя шляпа» → **НАДЕТЬ**

Пересоздать стандартные заглушки локально:

```bash
node scripts/generate-custom-skins.js
```

## Слоты для тела (скины)

| ID в игре   | Файл по умолчанию | Название в магазине |
|-------------|-------------------|---------------------|
| `custom_1`  | `slot1.png`       | Свой скин 1         |
| `custom_2`  | `slot2.png`       | Свой скин 2         |
| `custom_3`  | `slot3.png`       | Свой скин 3         |

Текстура рисуется на **каждом сегменте** змейки (голова и тело).

## Слоты для шляп

| ID в игре       | Файл по умолчанию | Название в магазине |
|-----------------|-------------------|---------------------|
| `custom_hat_1`  | `hat1.png`        | Своя шляпа 1        |
| `custom_hat_2`  | `hat2.png`        | Своя шляпа 2        |
| `custom_hat_3`  | `hat3.png`        | Своя шляпа 3        |

Шляпа рисуется **над головой** змейки. Если PNG нет — показывается emoji-заглушка из каталога.

## Рекомендации по картинкам

- **Формат:** PNG с прозрачностью
- **Размер:** 64×64 или 128×128 px (квадрат)
- **Скин тела:** однородная текстура или паттерн, хорошо смотрится при повторе на сегментах
- **Шляпа:** объект «сверху» — шапка, корона, кепка; нижняя часть может быть прозрачной

## config.json

Можно переименовать файлы или добавить слоты (потребуется правка `server.js` → `SHOP_CATALOG`):

```json
{
  "bodySlots": [
    { "id": "custom_1", "name": "Свой скин 1", "file": "slot1.png" }
  ],
  "hatSlots": [
    { "id": "custom_hat_1", "name": "Своя шляпа 1", "file": "hat1.png" }
  ]
}
```

- `id` — должен совпадать с ID в `SHOP_CATALOG` на сервере
- `file` — имя PNG **в этой же папке** (`public/custom-skins/`)

## Деплой на сервер (dastogram.ru)

```bash
# Скопировать PNG на сервер
scp slot1.png hat1.png user@server:/opt/snake-attack/public/custom-skins/

# Или положить файлы вручную в /opt/snake-attack/public/custom-skins/
```

Кастомные слоты **бесплатные** и автоматически доступны всем игрокам в инвентаре.

## Устранение проблем

| Проблема | Решение |
|----------|---------|
| В магазине есть слот, но в игре цвет по умолчанию | Проверь имя файла и путь; открой `/custom-skins/slot1.png` в браузере |
| Шляпа не видна | Файл `hat1.png` существует? Надета ли шляпа в магазине (вкладка «Шляпы»)? |
| Старая картинка после замены | Жёсткое обновление: Ctrl+F5 или смени имя файла в `config.json` |

## Где это в коде

| Часть | Файл |
|-------|------|
| Каталог предметов | `server.js` → `SHOP_CATALOG` |
| Загрузка PNG | `public/js/custom-skins.js` |
| Отрисовка в игре | `public/js/game.js` |
| Превью в профиле | `public/js/profile.js` |