# 🌐 Веб-инструменты для "Гонки на бумаге"

В проекте доступны два независимых веб-приложения:

## 🗺️ Редактор карт

**Назначение:** Создание и редактирование карт для игры

**Расположение:** `map-editor/`

**Функции:**
- Рисование карт мышью
- 6 типов ячеек (дорога, камень, снег, лёд, чекпоинт, старт)
- Экспорт/импорт JSON
- Изменение размеров карты
- Валидация данных

**Запуск:**
```bash
cd map-editor
./open-editor.sh
# или просто откройте index.html в браузере
```

**Документация:** [map-editor/README.md](map-editor/README.md)

---

## 🎬 Визуализатор решений

**Назначение:** Анимация и визуализация решений

**Расположение:** `solution-player/`

**Функции:**
- Загрузка карт и решений
- Пошаговое воспроизведение
- Регулировка скорости (1x-10x)
- Навигация вперед/назад
- Отображение векторов скорости
- Детальная информация о каждом шаге

**Запуск:**
```bash
cd solution-player
./open-player.sh
# или просто откройте index.html в браузере
```

**Документация:** [solution-player/README.md](solution-player/README.md)

---

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

### Создание и тестирование карты

1. **Создайте карту:**
   ```bash
   cd map-editor
   ./open-editor.sh
   ```
   - Нарисуйте карту
   - Обязательно добавьте точку старта (тип 5)
   - Экспортируйте в JSON

2. **Решите карту:**
   ```bash
   cd ..
   dotnet run --project racing-astar.csproj maps/your-map.json
   ```

3. **Визуализируйте решение:**
   ```bash
   cd solution-player
   ./open-player.sh
   ```
   - Загрузите карту
   - Загрузите решение
   - Нажмите Play

---

## 📋 Форматы файлов

### Карта (map)

```json
{
  "map": [
    [0, 0, 5],
    [0, 1, 0],
    [4, 0, 0]
  ]
}
```

**Типы ячеек:**
- `0` - Дорога
- `1` - Камень (препятствие)
- `2` - Снег (замедление)
- `3` - Лёд (скольжение)
- `4` - Чекпоинт
- `5` - Старт

### Решение (solution)

```json
{
  "solution": [
    [1, 0],
    [0, 1],
    [-1, 0]
  ]
}
```

**Формат:** массив векторов ускорения `[[ax, ay], ...]`

---

## 🛠️ Технологии

Оба приложения:
- ✅ Работают без сервера
- ✅ Pure HTML/CSS/JavaScript
- ✅ HTML5 Canvas
- ✅ Современный UI/UX
- ✅ Не требуют установки

---

## 📁 Структура проекта

```
racing/
├── map-editor/          # Редактор карт
│   ├── index.html
│   ├── editor.js
│   ├── README.md
│   └── *.json          # Примеры карт
│
├── solution-player/     # Визуализатор решений
│   ├── index.html
│   ├── player.js
│   ├── README.md
│   └── *.json          # Примеры карт и решений
│
└── maps/               # Основная коллекция карт
    └── *.json
```

---

## 🔗 Связь между приложениями

1. **Редактор карт** → создает JSON файлы карт
2. **C# Solver** → принимает карты, генерирует решения
3. **Визуализатор** → отображает карты и решения

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

---

Создано для проекта [Racing](README.md)