Продолжаю настройку окружения. В этой статье я расскажу об архитектуре проекта, которую я разработал и буду использовать в дальнейшем. В папке src я храню все свои компоненты и скрипты. Также в этой папке есть несколько подпапок: assets содержит подключаемые файлы, такие как изображения и звуки; components включает игровые компоненты; router содержит компонент для маршрутизации между сценами; scene хранит конкретные сцены игры, например, меню или игровую сцену; store содержит данные, которые передаются между различными сценами, и я выбрал для этого проекта библиотеку zustand, которая показалась мне простой и удобной.
Теперь рассмотрим файлы подробнее. Сначала запрос поступает в main.jsx,
затем он переходит в App.jsx,
где мы подключаем наш Router.jsx,
отвечающий за определение сцены, которую нужно показать пользователю. Здесь мы также подключаем наш store, хранящий информацию о текущей открытой сцене и, возможно, другую информацию в будущем. Пока я храню весь store в одном файле, но в будущем планирую разделить его на отдельные файлы.
Вернёмся к маршрутизации. Сейчас, когда сцен немного, это выглядит нормально, но я опасаюсь, что при увеличении количества сцен это станет громоздким, поэтому я думаю сделать маршрутизатор более элегантным. Далее, после определения сцены, мы отображаем нужную сцену на экране пользователя. Можно также рассмотреть файл Menu.jsx,
где реализована отрисовка меню и изменение значения в store по клику, что приводит к отображению другой сцены.