twitch-panels/plans/PROJECT_PLAN.md

Twitch Panels Creator - Project Plan

MVP (Minimum Viable Product)

Цель MVP

Создать инструмент для быстрого создания нескольких Twitch панелей в едином стиле с разными текстами.

Функциональность MVP

1. Загрузка фонового изображения

• Автоматическая загрузка фонового изображения по умолчанию при старте
• Возможность загрузки собственного фонового изображения
• Обрезка изображения до нужных пропорций

2. Создание панелей

• Ввод текстов для создания отдельных панелей
• Каждый текст создает отдельную панель
• Все панели используют одно фоновое изображение
• Настройки текста применяются ко всем панелям

3. Настройки текста

• Размер шрифта (10-72px)
• Выбор шрифта из списка (Arial, Verdana, Georgia и др.)
• Цвет текста
• Выравнивание (лево, центр, право)
• Боковые отступы
• Вертикальное смещение от центра

4. Управление текстами

• Список всех созданных текстов
• Редактирование текста прямо в списке
• Удаление текста кнопкой "×"
• Автоматическое обновление панелей при изменении текстов
• Автоматическая фильтрация пустых текстов и дубликатов

5. Просмотр панелей

• Единое фоновое изображение в боковой панели (один раз вверху)
• Превью всех созданных панелей с текстом на фоне
• Превью только для просмотра
• Скачивание отдельной панели
• Массовое скачивание всех панелей

6. Экспорт панелей

• Скачивание панелей в формате PNG
• Размер панелей: 320px ширина, настраиваемая высота (по умолчанию 100px)

Workflow работы программы (MVP)

Шаг 1: Запуск приложения

1. Пользователь открывает приложение
2. Автоматически загружается фоновое изображение по умолчанию
3. Пользователь видит экран добавления текстов

Шаг 2: Настройка фона (опционально)

1. Фоновое изображение отображается в боковой панели с кнопкой "Загрузить"
2. Пользователь может загрузить собственное фоновое изображение
3. При необходимости обрезает изображение
4. Фон отображается один раз в боковой панели с правильными размерами (максимальная ширина 320px)
5. Фон применяется ко всем создаваемым панелям
6. Превью панелей показывают финальный результат с текстом на фоне

Шаг 3: Создание и редактирование текстов

1. Пользователь вводит текст для первой панели (например: "links")
2. Нажимает кнопку "Добавить"
3. Текст добавляется в список текстов (пустые тексты и дубликаты автоматически фильтруются)
4. В боковой панели автоматически отображается превью созданной панели
5. Пользователь повторяет процесс для других текстов ("about me", "projects", "memes")
6. Все тексты отображаются в списке ниже поля ввода
7. Каждый текст в списке можно редактировать прямо в поле ввода (дубликаты автоматически фильтруются)
8. Любой текст можно удалить кнопкой "×"
9. При редактировании или удалении текста автоматически обновляется соответствующая панель

Шаг 4: Настройка внешнего вида (опционально)

1. Пользователь настраивает параметры текста:
   • Размер шрифта
   • Шрифт
   • Цвет
   • Выравнивание
   • Отступы
2. Настройки применяются ко всем создаваемым панелям
3. Превью панелей в боковой панели обновляется в реальном времени

Шаг 5: Просмотр панелей

1. В боковой панели отображается фоновое изображение (один раз вверху)
2. Ниже отображаются превью всех созданных панелей
3. Превью панелей показывают финальный результат с текстом на фоне
4. Превью только для просмотра, редактирование происходит в списке текстов

Шаг 6: Экспорт панелей

1. Пользователь скачивает отдельные панели или все сразу
2. Панели сохраняются в формате PNG
3. Готовые панели загружаются в Twitch

Технические требования MVP

Frontend

• ✅ Svelte 5 с runes
• ✅ TypeScript
• ✅ SvelteKit
• ✅ Vite для сборки
• ✅ Адаптер для статического деплоя

Основные компоненты

UI компоненты (Реализованы)

• ✅ AppContainer - главный контейнер приложения
• ✅ AppHeader - заголовок приложения с кнопкой загрузки изображения
• ✅ AppContent - основной контент приложения
• ✅ ImageManager - управление загрузкой и обрезкой изображений
• ✅ TextSection - управление текстами и настройками
• ✅ BackgroundPreview - превью фонового изображения
• ✅ PanelsList - список превью всех созданных панелей
• ✅ Sidebar - боковая панель с превью
• ✅ MainSection - основная секция приложения

Вспомогательные компоненты (Реализованы)

• ✅ ImageUpload - загрузка изображений (drag-drop, paste, URL)
• ✅ ImageCropper - обрезка изображений с cropperjs
• ✅ TextManager - добавление, редактирование и удаление текстов
• ✅ PanelPreview - превью отдельной панели
• ✅ TextPreview - превью текста
• ✅ ErrorMessage - обработка ошибок

Библиотеки и зависимости

• ✅ cropperjs v2.1.0 - обрезка изображений
• ✅ file-saver v2.0.5 - сохранение файлов
• ✅ jszip v3.10.1 - архивирование (для batch download)
• ✅ uuid - генерация ID
• ✅ @types/* - TypeScript типы

Хранилище данных (Реализовано)

• ✅ panelStore - хранение состояния панелей
• ✅ uiStore - хранение состояния UI (загрузка, ошибки)
• ✅ Локальное хранилище для сохранения панелей

Сервисы (Реализованы)

• ✅ imageService - загрузка и обработка изображений
• ✅ panelService - управление панелями и текстами
• ✅ exportService - экспорт панелей в PNG
• ✅ Локальные и глобальные сервисы

Архитектура

• ✅ Компонентная архитектура с разделением ответственности
• ✅ Сервисный слой для бизнес-логики
• ✅ Сторы для управления состоянием
• ✅ Типизация TypeScript
• ✅ Обработка ошибок и валидация

Будущее развитие (Future Roadmap)

Фаза 2: Расширение функциональности

1. Дополнительные настройки

• Добавление иконок к панелям
• Настройка тени текста
• Градиентный текст
• Несколько текстовых элементов на одной панели
• Настройка прозрачности фона

2. Библиотека шаблонов

• Предустановленные шаблоны панелей
• Возможность сохранения собственных шаблонов
• Категории шаблонов (игры, технологии, искусство и т.д.)

3. Пакетная обработка

• Импорт списка текстов из файла
• Автоматическое создание панелей из списка
• Пакетное переименование панелей

Фаза 3: Социальные функции

1. Облачное хранилище

• Сохранение проектов в облаке
• Синхронизация между устройствами
• История версий

2. Шаринг

• Возможность делиться проектами
• Публичная библиотека панелей
• Рейтинг и отзывы

Метрики успеха MVP

• Время создания одной панели: < 30 секунд
• Время создания набора из 5 панелей: < 2 минут
• Успешное скачивание панелей: 100%
• Положительный фидбек от первых пользователей

Ограничения MVP

• Один фоновый рисунок для всех панелей
• Фон отображается один раз в боковой панели (максимальная ширина 320px)
• Превью панелей показывают финальный результат с текстом на фоне
• Один текстовый элемент на панель
• Фиксированная ширина панели (320px)
• Только экспорт в PNG
• Работа в браузере без сохранения на сервере
• Редактирование текстов происходит в списке, превью только для просмотра

Следующие шаги

Фаза 1: Завершение MVP (Текущая)

1. ✅ Реализовать базовую структуру приложения
2. ✅ Реализовать загрузку и обрезку изображений
3. ✅ Реализовать создание панелей из текстов
4. ✅ Реализовать настройки текста
5. ✅ Реализовать управление текстами (редактирование, удаление)
6. ✅ Реализовать превью панелей (только для просмотра)
7. ✅ Реализовать экспорт панелей
8. ✅ Разделить редактирование текстов и превью панелей
9. 🔄 Реализовать пакетный экспорт (batch download) с JSZip
10. 🔄 Добавить валидацию и обработку ошибок
11. 🔄 Оптимизировать производительность рендеринга
12. ✅ Тестирование и исправление багов - ВСЕ ТЕСТЫ ПРОЙДЕНЫ (43 теста)
13. ⏳ Деплой на GitHub Pages

Фаза 2: Расширенные функции (Будущая)

1. ⏳ Добавить иконки и продвинутые настройки текста
2. ⏳ Создать библиотеку шаблонов
3. ⏳ Реализовать пакетную обработку
4. ⏳ Добавить социальные функции и облачное хранилище