# План создания многопользовательской изометрической игры

## Технический стек

| Слой | Технология |
|------|------------|
| Backend | Python 3.10+ + Flask + Flask-SocketIO |
| Frontend | HTML5 Canvas + Vanilla JavaScript + CSS3 |
| Сеть | Socket.IO (WebSocket с fallback) |
| Сервер | Development server (порт 5000) |
| Хранение | JSON файлы (карты, конфиги) |

## Финальная архитектура

```
isogame/
├── app.py                    # Точка входа: Flask + SocketIO
├── requirements.txt          # flask, flask-socketio, python-socketio
├── server/
│   ├── __init__.py
│   ├── game_state.py         # GameState: игроки, мир, тик
│   ├── player_manager.py     # PlayerManager: join/leave/update
│   ├── map_manager.py        # MapManager: load/save/validate
│   ├── events.py             # SocketIO event handlers
│   └── world.py              # World: коллизии, тайлы, объекты
├── static/
│   ├── js/
│   │   ├── game.js           # GameLoop: init, update, render
│   │   ├── iso.js            # IsoMath: grid↔screen conversion
│   │   ├── renderer.js       # Renderer: draw tiles, entities
│   │   ├── input.js          # InputHandler: keyboard, mouse
│   │   ├── camera.js         # Camera: follow, bounds, zoom
│   │   ├── entities.js       # Entity, Player, NPC classes
│   │   ├── network.js        # NetworkManager: socket.io client
│   │   └── hud.js            # HUD: hp bar, chat, minimap
│   ├── css/
│   │   └── style.css         # Full-screen canvas + overlay UI
│   └── assets/
│       └── sprites/          # Procedural or loaded sprites
├── maps/
│   └── default.json          # Default map data
└── templates/
    └── index.html            # Main page with canvas
```

---

## Этап 1: Базовая инфраструктура

### 1.1 Flask сервер
- Создать `app.py` с Flask приложением
- Настроить раздачу static файлов и templates
- Запуск на порту 5000
- Создать `templates/index.html` с canvas на весь экран
- Создать `requirements.txt`

### 1.2 HTML5 Canvas
- Canvas элемент на весь экран (viewport)
- Обработка resize окна
- Базовый context 2d

### 1.3 Изометрическая проекция
- Реализовать `iso.js`:
  - `gridToScreen(gx, gy)` — конвертация координат сетки в экранные
  - `screenToGrid(sx, sy)` — обратная конвертация
- TILE_W = 64, TILE_H = 32 (соотношение 2:1)

### 1.4 Отрисовка изометрической сетки
- Массив карты (2D array с типами тайлов)
- Цикл отрисовки: для каждого тайла → ромб на canvas
- Цвета по типу тайла (grass=зелёный, water=синий, wall=серый)
- Порядок отрисовки: сверху‑вниз, слева‑направо (correct z-order)

**Результат этапа:** Видна изометрическая карта с цветными тайлами.

---

## Этап 2: Один игрок (single-player)

### 2.1 Игрок на карте
- Спрайт игрока (пока — цветной ромб/квадрат)
- Позиция в координатах сетки (grid_x, grid_y)
- Отрисовка поверх тайлов в правильном z-order

### 2.2 Управление (WASD / стрелки)
- `input.js`: отслеживание нажатых клавиш
- Движение по 4 направлениям (up/down/left/right)
- Плавное перемещение (не телепортация)
- Направление взгляда (direction)

### 2.3 Игровой цикл
- `requestAnimationFrame` loop
- `update(deltaTime)` — логика
- `render()` — отрисовка
- Фиксированный timestep для логики

### 2.4 Система коллизий
- Проверка проходимости тайла перед движением
- Тайлы WATER, WALL, TREE — непроходимые
- Блокировка движения за границы карты

### 2.5 Камера
- Камера следует за игроком
- `camera.js`: смещение viewport
- Ограничение камеры границами карты
- Плавное следование (lerp)

### 2.6 Анимация
- Спрайт-кадры для каждого направления
- Анимация ходьбы (2-4 кадра)
- Состояния: idle, walking

**Результат этапа:** Игрок ходит по карте с анимацией, камера следует, коллизии работают.

---

## Этап 3: Мультиплеер (Socket.IO)

### 3.1 Подключение Socket.IO
- Добавить `flask-socketio` в бэкенд
- Добавить `socket.io client` в фронтенд
- Обработчики `connect` / `disconnect`

### 3.2 Регистрация игрока
- Событие `join`: клиент отправляет nickname + color
- Сервер создаёт игрока, назначает spawn point
- Событие `init`: сервер отправляет начальное состояние (карта, все игроки, свой id)

### 3.3 Синхронизация позиций
- Клиент отправляет `move` при нажатии клавиш
- Сервер валидирует движение (коллизии, скорость)
- Сервер рассылает `state` всем клиентам (10 раз/сек)
- Состояние: `{players: [{id, x, y, direction, state, frame}]}`

### 3.4 Интерполяция других игроков
- Хранить `prevPosition` и `currentPosition` для каждого игрока
- Интерполировать между тиками сервера

### 3.5 *Новый блок* – Генерация высот и построение горами/впадинами
- **`static/js/heightmap.js`**
  - `generateHeightMap(width, height, seed)` → двумерный массив [0 … `MAX_HEIGHT`]
  - Экспорт `MAX_HEIGHT` из `map.js` и `heightMap = generateHeightMap()`
- **Отрисовка**`
  - `renderer.drawTile(x, y, type, elevation)` – shade‑factor, `adjustColor()`
  - Вода (`TILE_WATER`) оттенок зависит от `MAX_HEIGHT - elevation`
- **Модуль `terrainBuilder.js`**
  - `applyHill(cx, cy, radius, delta)` – увеличивает высоту
  - `applyPit(cx, cy, radius, delta)` – уменьшает, но минимум 0
- **Поддержка сервером**
  - Добавить событие `buildTerrain` через Socket.IO
  - Клиент посылает `{type: ‘hill’|‘pit’, x, y, radius, elevationChange}`
  - Сервер валидирует (нет переполнения), обновляет `heightMap`, затем `socket.emit('terrainUpdate', {heightMap})` всем
- **UI** ‑ кнопки «Гора», «Впадина», «Водоём» → выделяют прямоугольник, отправляют событие
- **Погружённая генерация**: при старте карта генерируется с высотами, которые позже влияют на отрисовку

### 3.4 Client‑side prediction (свой игрок)
- Свой игрок двигается мгновенно на клиенте
- Сервер присылает корректную позицию при рассинхроне
- Мягкая коррекция (не телепортация, а плавное смещение)

### 3.5 Client‑side prediction (свой игрок)
- [другой пункт для clarity]

### 3.6 Join / Leave уведомления
- `player_joined` — показать нового игрока
- `player_left` — убрать игрока с карты
- Визуальные уведомления (toast)

### 3.7 **Новые блоки** – высоты мира
#### 3.7.1 Генерация высотной карты
- `heightMap` – глобальная двумерная матрица, где значение отражает высоту в диапазоне `0 … MAX_HEIGHT`.
- Ключ‑префикс `mapGeneration` использует *simplex‑noise* (можно подключить библиотеку `noisejs`), аналогично реализациям в Transport Tycoon.
- Функции для построения горам/впадин реализованы в `static/js/terrainBuilder.js`:
  ```js
  export function applyHill(map, cx, cy, radius, delta){ … }
  export function applyPit(map, cx, cy, radius, delta){ … }
  ```

#### 3.7.2 Пересчет карты при изменениях высоты
- После `applyHill`/`applyPit` генерируется обновлённый массив `heightMap`.
- На клиенте отрисовка тайлов обновляет цвет/затенение в зависимости от `elevation`.
- Вода теперь рендерится с разной глубиной: чем выше `elevation`, тем «глубже» синий оттенок.
- Стекло и туман/тени реагируют на высоту.

### 3.8 (Optional) Хранение и экспорт карты
- `MapManager.save(map)`, `MapManager.load()`.
- Отправка нового `terrainUpdate` событие всем клиентам.

---

## Этап 4: Контент и интерфейс

### 4.1 Процедурные спрайты
- Рисование тайлов на canvas (без внешних изображений)
- Градиенты для воды, текстуры для травы
- Персонажи: тело + голова + направление взгляда
- Анимационные кадры (ходьба)

### 4.2 Система слоёв
- Слой земли (ground) — трава, вода, песок
- Слой объектов (objects) — деревья, стены
- Слой сущностей (entities) — игроки, NPC
- Правильный z-order: по сумме grid_x + grid_y

### 4.3 Интерактивные объекты
- Клик мышью по тайлу → определение координат
- Подсветка тайла под курсором
- Действия: собрать ресурс, открыть дверь, поднять предмет

### 4.4 HUD
- Полоска здоровья (HP bar) — верхний левый угол
- Координаты игрока — верхний правый угол
- Никнейм над персонажем
- Мини-карта — нижний правый угол

### 4.5 Чат
- Окно чата поверх canvas
- Отправка сообщений через Socket.IO
- Broadcast всем игрокам
- Прокрутка истории
- Команды чата: `/help`, `/teleport x y`

**Результат этапа:** Полноценный интерфейс, чат, интерактивность.

---

## Этап 5: ИИ и геймплей

### 5.1 NPC
- NPC на карте (неигровые персонажи)
- Простой ИИ: патруль по маршруту
- Анимация движения NPC
- Взаимодействие: подойти + кликнуть → диалог

### 5.2 Система диалогов
- Окно диалога при взаимодействии с NPC
- Ветвящиеся диалоги (JSON конфиг)
- Анимация появления текста

### 5.3 Враги
- Враждебные сущности с ИИ
- Поведение: патруль → обнаружение → преследование → атака
- Полоска HP врага
- Урон от врагов игроку

### 5.4 Боевая система
- Атака: клик по врагу в радиусе
- Урон, cooldown
- Визуальный эффект удара
- Смерть и respawn

### 5.5 Инвентарь
- Слоты инвентаря (сетка)
- Подбор предметов с земли
- Использование предметов
- Отображение инвентаря (клавиша I)

**Результат этапа:** Игровой процесс с NPC, врагами, боем и предметами.

---

## Этап 6: Полировка и оптимизация

### 6.1 Оптимизация рендеринга
- Отрисовка только видимых тайлов (culling по камере)
- Dirty rectangles (перерисовка только изменённых областей)
- Предзагрузка и кэширование спрайтов

### 6.2 Система частиц
- Эффекты: шаги, удары, сбор предметов
- Частицы на canvas
- Автоматическое удаление завершённых частиц

### 6.3 Звук
- Web Audio API для звуковых эффектов
- Звуки: шаги, удар, подбор предмета, чат
- Вкл/выкл звука

### 6.4 Сохранение/загрузка
- Сохранение позиции игрока
- Загрузка карты из JSON файла
- Редактор карт (базовый): расстановка тайлов мышью

### 6.5 Обработка ошибок сети
- Переподключение при обрыве
- Индикатор соединения (connected/disconnected/reconnecting)
- Буферизация действий при лагах

### 6.6 Финальная полировка
- Плавные переходы UI
- Экран загрузки
- Настройки (громкость, чувствительность камеры)
- FPS counter для отладки

**Результат этапа:** Готовая, оптимизированная игра.

---

## Сетевая модель

### Серверный тик (10/sec)
```
tick():
  for each player:
    process pending moves
    validate position (collisions, bounds)
    update state

  for each npc/enemy:
    update AI

  broadcast state to all clients
```

### Клиентский тик (60 FPS)
```
gameLoop():
  input.update()
  network.processIncoming()
  entities.update(deltaTime)
  camera.update()
  renderer.render()
```

### Формат сетевого сообщения (state)
```json
{
  "tick": 1234,
  "timestamp": 1700000000,
  "players": [
    {
      "id": "session_id_1",
      "nickname": "Alice",
      "color": "#ff4444",
      "x": 10.5,
      "y": 8.2,
      "hp": 100,
      "max_hp": 100,
      "direction": 1,
      "state": "walking",
      "frame": 2
    }
  ]
}
```

## Приоритет задач
| # | Задача | Статус |
|---|--------|--------|
| 1 | Flask сервер + Canvas | □ |
| 2 | Изометрическая сетка | □ |
| 3 | Один игрок (движение, анимация) | □ |
| 4 | Коллизии | □ |
| 5 | Камера | □ |
| 6 | Socket.IO подключение | □ |
| 7 | Синхронизация игроков | □ |
| 8 | Интерполяция + prediction | □ |
| 9 | Спрайты | □ |
| 10 | HUD + чат | □ |
| 11 | Генерация высот и ландшафта | □ |
| 12 | Строительство гор/впадин | □ |
| 13 | NPC + ИИ | □ |
| 14 | Боевая система | □ |
| 15 | Инвентарь | □ |
| 16 | Оптимизация | □ |
| 17 | Частицы + звук | □ |
| 18 | Сохранение/загрузка | □ |

## Оценка времени
||Ещё одна секция времени может быть добавлена позже.

---

## Примечания
- Все новые блоки добавлены после существующего текста.
- При необходимости можно детализировать отдельные разделы.