Утилита(графический пользовательский интерфейс) для создания сценариев игры
Директория в которой находятся компоненты
- App - Корневой компонент игры
- ChosenGame - Компонент выбора игры, тут находится список всех доступных игр. При выборе игры в стейт менеджер отправляется темплейт степа для этой игры.
- CustomEvents - У каждой игры есть ивенты которые делятся на простые и сложные по структуре. Простые описываются в react json schema form, а сложные являются компонентами и они находятся в этой директории.
- DataTransferPanel - Компонент управления данными. Тут находятся хэндлеры для скачивания, загрузки, сохранения и удаления состояния приложения.
- EventBoard - Компонент отображающий ноды и эджи которыми они связаны. Это доска на которой ивенты связываются в цепочку. Создана с использованием React flow библиотеки, где нода - элемент на доске, а эдж - нить которой ноды связываются между собой.
- EventBoardContainer - Компонент обертка для списка ивентов и доски.
- EventItem - Компонент ивента, используется для его отображения
- EventList - Компонент списка ивентов, отображает все ивенты выбранной игры
- EventSettings - Компонент обертка для настройки ивента. Находит нужную ноду в редюсере и по ее id находит нужную схему для ивента.
- Game - Компонент верстки для списка степов и доски ивентов.
- ModalWindow - Компонент модального окна, используется для верстки и отображения компонентов настройки ивента и барабана.
- Node - Компонент ноды, содержит слушатели событий для отображения превью барабана и открытия модального окна.
- NodePreview - Компонент превью, отображается при наведении на ноду и показывает финальное состояние барабана после того как ивент модифицировал поле.
- Playground - Компонент отображающий входное состояние барабана для этого ивента.
- Reels - Компонент верстки барабана.
- StepList - Компонент списка степов, отображает все созданные степы. Можно добавлять новые, удалять и выбирать степы
- DraggableStep - Компонент степа с DND, позволяет менять степы местами
- StepSettingsTab - Компонент настройки степа.
- SymbolTab - Компонент отображающий картинки всех символов в выбранной игре.
- UI - Эта директория содержит переиспользуемые кастомные компоненты для верстки по типу Input, Select...
Тут содержится конфигурация для каждой игры. Для добавления новой игры нужно добавить пути до картинок символов, схему json формы для простых по структуре ивентов или написать кастомный реакт компонент для сложных, шаблон степа и добавить игру в конфиг.
- commonSchemas - Схемы для простых ивентов, создаются с помощью rjsf библиотеки.
- customSchemas - Схемы кастомных компонентов.
- ImgPaths - Пути до картинок символов для каждой игры
- StepTemplates - Шаблоны степов для каждой игры
- Actions - Константы экшенов для редакса
- Config - Содержит массив всех игр доступных в утилите
- Templates - Содержит переиспользуемые в приложении шаблоны объектов.
Тут содержится все что связанно с скачиванием степов/состояния приложения и загрузкой состояния в приложение.
- download - Функции для экспорта данных из приложения
- upload - Функции для импорта данных в приложение.
Кастомные хуки, в основном нужны для редакса
Интерфейсы используемые в утилите
Экшены и редюсеры редакса.
В приложении используется 2 редюсера: основной mainReducer, который хранит актуальное состояние степов и где проводятся все манипуляции с ними. Так же там находится вся информация о нодах(который представляют собой ивенты) и эджах(которые представляют собой связь между нодами). Второй редюсер reelStateReducer содержит всю информацию о состоянии барабана для каждой ноды.
Стейт всего приложения сохраняется в SessionStorage. Так же можно сохранять его в localStorage, загружать сохраненное туда состояние и очищать слот сохранения состояния.