# 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. ⏳ Добавить социальные функции и облачное хранилище