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

Веб-приложение для создания и редактирования карт. Работает без сервера, просто откройте в браузере.

> **Примечание:** Для визуализации решений используйте [Визуализатор решений](../solution-player/).

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

```bash
# Запуск редактора
./open-editor.sh
# или
firefox index.html
```

**Три простых шага:**
1. Установите размеры (5-100), выберите тип ячейки из палитры
2. Рисуйте мышью на карте (обязательно добавьте точку старта)
3. Нажмите "Экспорт JSON" - файл скачается автоматически

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

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

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

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

**Экспорт/Импорт:**
- Экспорт: нажмите "Экспорт JSON" (также выводится в консоль F12)
- Импорт: нажмите "Импорт JSON" и выберите файл

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

## 📄 Формат 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 (типы ячеек)

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

```csharp
using System.Text.Json;

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

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

## 🎯 Файлы проекта

| Файл | Описание |
|------|----------|
| `index.html` | Главная страница редактора |
| `editor.js` | Логика редактора и визуализация |
| `open-editor.sh` | Скрипт для быстрого запуска |
| `demo-with-start.json` | Демонстрационная карта 15×15 |

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

- ✅ Современный интерфейс, работает без сервера
- ✅ Интуитивное рисование мышью
- ✅ Валидация данных при импорте
- ✅ Автоматическое сохранение с именем по размеру
- ✅ HTML5 Canvas, Vanilla JavaScript (ES6+)

## 🔗 Связанные проекты

- [Визуализатор решений](../solution-player/) - анимация решений
- [Основной проект](../README.md) - C# решатель на основе A*

---

**Технологии:** HTML5, CSS3, JavaScript ES6+, Canvas API