split editor

2025-10-20 21:07:28 +05:00
parent 023ccd03d8
commit 88643415aa
34 changed files with 3796 additions and 1184 deletions
--- a/map-editor/README.md
+++ b/map-editor/README.md
@@ -1,64 +1,47 @@
 # 🗺️ Редактор карт для "Гонки на бумаге"

-Веб-приложение для создания и редактирования карт для игры "Гонки на бумаге".
+Веб-приложение для создания и редактирования карт. Работает без сервера, просто откройте в браузере.
+
+> **Примечание:** Для визуализации решений используйте [Визуализатор решений](../solution-player/).

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

-Просто откройте `index.html` в браузере. Никаких зависимостей или установки не требуется!
-
 ```bash
-# Из папки map-editor
-firefox index.html
+# Запуск редактора
+./open-editor.sh
 # или
-chrome index.html
-# или просто откройте файл двойным кликом
+firefox index.html
 ```

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

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

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

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

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

-2. **Рисование:**
-   - Выберите тип ячейки из палитры
-   - Кликните на ячейку для изменения типа
-   - Удерживайте кнопку мыши для рисования
+**Экспорт/Импорт:**
+- Экспорт: нажмите "Экспорт JSON" (также выводится в консоль F12)
+- Импорт: нажмите "Импорт JSON" и выберите файл

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

 ## 📄 Формат JSON

@@ -74,106 +57,13 @@ chrome index.html
 }
 ```

-### Структура карты:
+**Структура:**
 - `map` - двумерный массив целых чисел (int[][])
- Каждая строка массива = строка карты
- Каждый элемент = тип ячейки (0-5)
 - Первая строка = верхняя строка карты
 - Первый элемент в строке = левая ячейка
+- Значения: 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# коде:
+## 🔗 Интеграция с C#

 ```csharp
 using System.Text.Json;
@@ -182,79 +72,34 @@ 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 для экспорта
+| Файл | Описание |
+|------|----------|
+| `index.html` | Главная страница редактора |
+| `editor.js` | Логика редактора и визуализация |
+| `open-editor.sh` | Скрипт для быстрого запуска |
+| `demo-with-start.json` | Демонстрационная карта 15×15 |

-## 📝 Файлы примеров
+## 🎨 Особенности

-### Карты:
- `simple-track.json` - Простая трасса 10×10
- `demo-with-start.json` - Демонстрационная карта 15×15
- `example-maps.json` - Коллекция различных карт
+- ✅ Современный интерфейс, работает без сервера
+- ✅ Интуитивное рисование мышью
+- ✅ Валидация данных при импорте
+- ✅ Автоматическое сохранение с именем по размеру
+- ✅ HTML5 Canvas, Vanilla JavaScript (ES6+)

-### Решения:
- `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]    // без ускорения (движение по инерции)
-  ]
-}
-```
+- [Визуализатор решений](../solution-player/) - анимация решений
+- [Основной проект](../README.md) - C# решатель на основе A*

 ---

-Создано для проекта [Racing](../README.md)
-
+**Технологии:** HTML5, CSS3, JavaScript ES6+, Canvas API