# 🗺️ Редактор карт для "Гонки на бумаге"

Веб-приложение для создания и редактирования карт для игры "Гонки на бумаге".

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

Просто откройте `index.html` в браузере. Никаких зависимостей или установки не требуется!

```bash
# Из папки map-editor
firefox index.html
# или
chrome index.html
# или просто откройте файл двойным кликом
```

## 📖 Инструкция

### Типы ячеек

| Тип | Код | Описание | Цвет |
|-----|-----|----------|------|
| Дорога | 0 | Обычная дорога | Светло-серый |
| Камень | 1 | Препятствие (непроходимо) | Тёмно-серый |
| Снег | 2 | Замедление движения | Голубой |
| Лёд | 3 | Скользкая поверхность | Светло-голубой |
| Чекпоинт | 4 | Контрольная точка | Жёлтый с "C" |
| Старт | 5 | Точка старта | Зелёный с "S" |

### Использование

1. **Изменение размеров:**
   - Укажите ширину и высоту карты (5-100)
   - Нажмите "Применить"
   - Существующие данные сохранятся при изменении размера

2. **Рисование:**
   - Выберите тип ячейки из палитры
   - Кликните на ячейку для изменения типа
   - Удерживайте кнопку мыши для рисования

3. **Экспорт:**
   - Нажмите "Экспорт JSON"
   - Файл автоматически скачается
   - JSON также выводится в консоль браузера (F12)

4. **Импорт:**
   - Нажмите "Импорт JSON"
   - Выберите JSON файл
   - Карта загрузится автоматически

5. **Визуализация решения:**
   - Убедитесь, что на карте есть точка старта (тип 5)
   - Нажмите "Загрузить решение"
   - Выберите JSON файл с решением
   - Используйте кнопки управления:
     - ▶ Play - автоматическое воспроизведение
     - ⏸ Pause - пауза
     - ⏮ Reset - сброс к началу
     - ⏭ Step - шаг вперед
   - Регулируйте скорость воспроизведения (1x - 10x)

## 📄 Формат JSON

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

### Структура карты:
- `map` - двумерный массив целых чисел (int[][])
- Каждая строка массива = строка карты
- Каждый элемент = тип ячейки (0-5)
- Первая строка = верхняя строка карты
- Первый элемент в строке = левая ячейка

## 🎬 Формат решения

Решение представляет собой JSON файл с массивом векторов ускорений:

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

### Структура решения:
- `solution` - массив векторов ускорения [[ax, ay], ...]
- Каждый элемент - вектор ускорения [ax, ay]
- ax, ay - целые числа (обычно от -1 до 1)
- Применяются последовательно от точки старта

### Физика движения:
1. Начальная позиция - ячейка с типом 5 (старт)
2. Начальная скорость = (0, 0)
3. На каждом шаге:
   - velocity += acceleration
   - position += velocity

### Пример:
```
Шаг 0: pos=(0,0), vel=(0,0), acc=(0,0)
Шаг 1: acc=(1,1) → vel=(1,1) → pos=(1,1)
Шаг 2: acc=(1,0) → vel=(2,1) → pos=(3,2)
Шаг 3: acc=(0,1) → vel=(2,2) → pos=(5,4)
```

### Визуализация показывает:
- 🔵 Синяя линия - пройденная траектория
- 🔴 Красный круг - текущая позиция
- ➡️ Красная стрелка - направление и скорость движения
- Информацию о шаге, позиции, скорости и ускорении

## 🎨 Особенности

### Редактор карт:
- ✅ Современный красивый интерфейс
- ✅ Интуитивное рисование мышью
- ✅ Валидация данных при импорте
- ✅ Автоматическое сохранение с именем по размеру
- ✅ Вывод JSON в консоль для быстрого копирования
- ✅ Адаптивный дизайн
- ✅ Сохранение данных при изменении размера
- ✅ 6 типов ячеек (дорога, камень, снег, лёд, чекпоинт, старт)

### Визуализация решений:
- ✅ Пошаговое воспроизведение траектории
- ✅ Регулируемая скорость воспроизведения (1x - 10x)
- ✅ Отображение вектора скорости в реальном времени
- ✅ Информация о позиции, скорости и ускорении на каждом шаге
- ✅ Плавная анимация движения
- ✅ Визуализация пройденного пути
- ✅ Управление: Play, Pause, Reset, Step

### Технологии:
- ✅ Работает без сервера (pure HTML/JS/CSS)
- ✅ HTML5 Canvas для отрисовки
- ✅ Vanilla JavaScript (ES6+)
- ✅ FileReader API для импорта
- ✅ Blob API для экспорта

## 💡 Советы

### Работа с картами:
- Используйте консоль браузера (F12) для просмотра экспортированного JSON
- При импорте проверяются все значения ячеек (только 0-5)
- Все строки карты должны иметь одинаковую длину
- Максимальный размер карты: 100×100
- Минимальный размер карты: 5×5
- Рекомендуется устанавливать одну точку старта (5) на карте

### Работа с визуализацией:
- Сначала создайте или загрузите карту с точкой старта
- Решение загружайте из отдельного JSON файла
- Используйте Step для детального анализа каждого шага
- Регулируйте скорость для комфортного просмотра
- Красная стрелка показывает направление и скорость движения
- Точка старта должна совпадать с началом траектории решения
- Примеры решений: `example-solution.json`, `complex-solution.json`

## 🔗 Интеграция с игрой

Экспортированный JSON можно использовать в C# коде:

```csharp
using System.Text.Json;

var json = File.ReadAllText("racing-map-15x15.json");
var mapData = JsonSerializer.Deserialize<MapData>(json);
int[][] map = mapData.map;

// Использование карты
for (int y = 0; y < map.Length; y++)
{
    for (int x = 0; x < map[y].Length; x++)
    {
        int cellType = map[y][x];
        // обработка...
    }
}

public class MapData
{
    public int[][] map { get; set; }
}
```

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

- HTML5 Canvas
- Vanilla JavaScript (ES6+)
- CSS3 с градиентами и анимациями
- FileReader API для импорта
- Blob API для экспорта

## 📝 Файлы примеров

### Карты:
- `simple-track.json` - Простая трасса 10×10
- `demo-with-start.json` - Демонстрационная карта 15×15
- `example-maps.json` - Коллекция различных карт

### Решения:
- `example-solution.json` - Простое решение на 10 шагов
- `complex-solution.json` - Сложное решение на 20 шагов

## 🎯 Быстрый старт с визуализацией

1. Откройте редактор:
   ```bash
   ./open-editor.sh
   # или просто откройте index.html в браузере
   ```

2. Загрузите карту с примером:
   - Нажмите "Импорт JSON"
   - Выберите `demo-with-start.json`

3. Загрузите решение:
   - Нажмите "Загрузить решение"
   - Выберите `example-solution.json`

4. Запустите визуализацию:
   - Нажмите ▶ Play
   - Наблюдайте за движением
   - Экспериментируйте со скоростью и пошаговым режимом

## 🔧 Создание собственного решения

Пример структуры файла решения:

```json
{
  "solution": [
    [1, 0],   // ускорение вправо
    [1, 0],   // еще ускорение вправо (скорость нарастает)
    [0, 1],   // ускорение вниз
    [-1, 0],  // торможение по X
    [0, 0]    // без ускорения (движение по инерции)
  ]
}
```

---

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