# 🚀 Быстрый старт - Веб-инструменты

## Два независимых приложения

### 🗺️ Редактор карт
```bash
cd map-editor
./open-editor.sh
```
**Для чего:** Создание и редактирование карт

### 🎬 Визуализатор решений
```bash
cd solution-player
./open-player.sh
```
**Для чего:** Просмотр анимации решений

---

## 📖 Полный цикл работы

### Шаг 1: Создайте карту
```bash
cd map-editor
./open-editor.sh
```
1. Нарисуйте трассу
2. Добавьте точку старта (S, тип 5)
3. Добавьте чекпоинты (C, тип 4)
4. Нажмите "📥 Экспорт JSON"
5. Сохраните как `my-map.json`

### Шаг 2: Решите карту
```bash
cd ..
dotnet run --project racing-astar.csproj maps/my-map.json
```
Решение сохранится в `solution.json`

### Шаг 3: Визуализируйте
```bash
cd solution-player
./open-player.sh
```
1. Нажмите "📂 Загрузить карту" → выберите `my-map.json`
2. Нажмите "🎬 Загрузить решение" → выберите `solution.json`
3. Нажмите "▶ Play"
4. Наслаждайтесь анимацией!

---

## 🎯 Быстрый тест с примерами

### Вариант 1: Простая карта
```bash
cd solution-player
./open-player.sh
```
1. Загрузите карту: `simple-track.json`
2. Загрузите решение: `example-solution.json`
3. Play!

### Вариант 2: Демо-карта
```bash
cd solution-player
./open-player.sh
```
1. Загрузите карту: `demo-with-start.json`
2. Загрузите решение: `demo-solution.json`
3. Play!

### Вариант 3: Сложная траектория
```bash
cd solution-player
./open-player.sh
```
1. Загрузите карту: `demo-with-start.json`
2. Загрузите решение: `complex-solution.json`
3. Play!

---

## 🎮 Управление визуализатором

- **▶ Play** - автоматическое воспроизведение
- **⏸ Pause** - пауза
- **⏮ Reset** - вернуться к началу
- **⏪ Back** - шаг назад
- **⏩ Forward** - шаг вперед
- **Слайдер** - скорость 1x-10x

---

## 📚 Дополнительная информация

- **WEB-TOOLS.md** - подробное описание инструментов
- **map-editor/README.md** - документация редактора
- **solution-player/README.md** - документация визуализатора
- **SEPARATION-SUMMARY.md** - детали разделения проектов

---

## 💡 Полезные советы

### Для редактора:
- Используйте ЛКМ для рисования
- Удерживайте кнопку мыши для быстрого рисования
- Проверяйте JSON в консоли (F12)

### Для визуализатора:
- Начните с малых скоростей (1x-3x)
- Используйте пошаговый режим для анализа
- Следите за красной стрелкой (вектор скорости)
- Смотрите информацию о каждом шаге внизу

---

## 🔧 Troubleshooting

**Проблема:** Визуализатор не показывает траекторию  
**Решение:** Убедитесь, что на карте есть точка старта (тип 5)

**Проблема:** Траектория выходит за пределы карты  
**Решение:** Проверьте, что решение создано для правильной карты

**Проблема:** Браузер не открывается  
**Решение:** Откройте `index.html` вручную

---

Приятного использования! 🎉