paper-racing-gpi/solution-player/README.md

🎬 Визуализатор решений - Гонки на бумаге

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

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

# Запуск визуализатора
./open-player.sh
# или
firefox index.html

Три простых шага:

1. Загрузите карту (📂 Загрузить карту) - файл с полем
2. Загрузите решение (🎬 Загрузить решение) - файл с траекторией
3. Нажмите ▶ Play и наблюдайте за движением

🎮 Управление

Кнопка	Действие
▶ Play	Автоматическое воспроизведение
⏸ Pause	Пауза
⏮ Reset	Сброс к началу
⏪ Back	Шаг назад
⏩ Forward	Шаг вперед
Слайдер	Скорость 1x - 10x

📊 Визуализация

• 🔵 Синяя линия и точки - пройденная траектория
• 🔴 Красный круг - текущая позиция
• ➡️ Красная стрелка - вектор скорости (направление и величина)
• Панель информации - шаг, позиция (x, y), скорость (vx, vy), ускорение (ax, ay)

📄 Форматы файлов

Формат карты

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

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

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

{
  "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 и экспериментируйте со скоростью

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

• Редактор карт - для создания карт
• Основной проект - C# решатель на основе A*

---

Технологии: HTML5 Canvas, Vanilla JavaScript (ES6+), CSS3