split editor

solution-player/README.md

@@ -0,0 +1,94 @@
+# 🎬 Визуализатор решений - Гонки на бумаге
+
+Веб-приложение для визуализации и анимации решений. Работает без сервера, просто откройте в браузере.
+
+## 🚀 Быстрый старт
+
+```bash
+# Запуск визуализатора
+./open-player.sh
+# или
+firefox index.html
+```
+
+**Три простых шага:**
+1. Загрузите карту (📂 Загрузить карту) - файл с полем
+2. Загрузите решение (🎬 Загрузить решение) - файл с траекторией
+3. Нажмите ▶ Play и наблюдайте за движением
+
+## 🎮 Управление
+
+| Кнопка | Действие |
+|--------|----------|
+| ▶ Play | Автоматическое воспроизведение |
+| ⏸ Pause | Пауза |
+| ⏮ Reset | Сброс к началу |
+| ⏪ Back | Шаг назад |
+| ⏩ Forward | Шаг вперед |
+| Слайдер | Скорость 1x - 10x |
+
+## 📊 Визуализация
+
+- 🔵 **Синяя линия и точки** - пройденная траектория
+- 🔴 **Красный круг** - текущая позиция
+- ➡️ **Красная стрелка** - вектор скорости (направление и величина)
+- **Панель информации** - шаг, позиция (x, y), скорость (vx, vy), ускорение (ax, ay)
+
+## 📄 Форматы файлов
+
+### Формат карты
+```json
+{
+  "map": [
+    [5, 0, 0, 1, 0],
+    [0, 1, 0, 1, 0],
+    [0, 0, 2, 2, 4]
+  ]
+}
+```
+
+**Типы ячеек:** 0-Дорога, 1-Камень, 2-Снег, 3-Лёд, 4-Чекпоинт, 5-Старт (обязательно!)
+
+### Формат решения
+```json
+{
+  "solution": [
+    [1, 1],
+    [1, 0],
+    [0, 1]
+  ]
+}
+```
+
+**Структура:** массив векторов ускорения `[[ax, ay], ...]` где `ax`, `ay` - целые числа (обычно от -1 до 1)
+
+### Физика движения
+
+На каждом шаге:
+```
+velocity += acceleration
+position += velocity
+```
+
+**Пример:**
+```
+Шаг 0: pos=(0,0), vel=(0,0)
+Шаг 1: acc=(1,1) → vel=(1,1) → pos=(1,1)
+Шаг 2: acc=(1,0) → vel=(2,1) → pos=(3,2)
+```
+
+## 🎯 Быстрый тест
+
+1. Откройте `./open-player.sh`
+2. Загрузите карту `demo-with-start.json`
+3. Загрузите решение `demo-with-start-solution.json`
+4. Нажмите ▶ Play и экспериментируйте со скоростью
+
+## 🔗 Связанные проекты
+
+- [Редактор карт](../map-editor/) - для создания карт
+- [Основной проект](../README.md) - C# решатель на основе A*
+
+---
+
+**Технологии:** HTML5 Canvas, Vanilla JavaScript (ES6+), CSS3