add xstate for game process

[ReDBrother]

Пришло время формализовать в конечных автоматах игровой процесс. Для этого начали построение стейт машины для игрового процесса (gameMachine): Дока xstate (react): https://xstate.js.org/docs/recipes/react.html

Cостояния:

• preview // Показываем превью, в то время как загружаются данные игрового процесса

• active // Сражение происходит полным ходом

• game_over // Сражение завершилось

• (bonus) stored // Доступна только история игровой сессии.

• [x] Внедрить стейт машину, отвечающую за игровой процесс, в RootContainer.

• [x] Подписаться на события, которые приходят по вебсокетам.

• [x] Переделать в компонентах рендеринг визуального представления, по условиям, которые теперь должны зависеть от стейта машины, а не стейта стора (Ориентируйтесь по RootContainer и найдите всех его child компоненты): - preview - active - game_over - (bonus) stored

• [x] По событию user:check_complete должны появляться нотификации (NotificationsHandler.jsx). Что в нём отрисовано зависит от того, кто открыл текующую страницу. Это может быть зритель или соперник, которым мы не сообщаем о результатах чужой проверки решения, и сам игрок, запустивший проверку, которому мы о них и сообщаем. Для этого наша машина должна содержать дополнительную информацию в своём контексте.

• [x] Так же, для каждого ключевого события мы хотим звуковое сопровождения. Нужно учитывать кому пришло это событие (Вам как зрителю, и вам как игроку). Еще учитывайте, что играют в игру двое и события могут быть завязаны на конкретного игрока.

• [x] Убрать все лишние флаги. Отрефакторить компоненты.

• [x] Для состояния игры waiting_opponent нужно завести отдельное состояние (по анналогии с preview), которая по присоединению противника, будет переключаться в состояние active. (Нужно найти эвент среди подписанных на gameChannel, который это событие обрабатывает)

• [ ] На уровне стейт машины отвечающая за основной игровой процесс, нужно заложить еще одну стейт машину, отвечающую за соединение с сервером. https://xstate.js.org/docs/guides/parallel.html. На этапе установления сокетного соединения внутри функции init, у нас есть возможность передать коллбеки объекту socket, что позволит нам в случае потери сигнала сообщить пользователю о проблеме. Это может быть как и плановые работы на сервере, так и отсутствие доступа к сети.

• [ ] Cистема рематчей так же нуждается в параллельной стейт машине.

Помимо всего прочего, у нас сложная логика текстовых редакторов. Для них тоже потребуются отдельные стейт машины (editorMachine):

Cостояния:

• idle

• ~typing // В данный момент код решения редактируют~

• checking // В данный момент происходит проверка решения

• ban // Заблокирован после проверки на читерство.

• (bonus) history // В этом состоянии мы транслируем игровую историю, паралельно с активной игрой или уже давно завершенной.

• [x] Внедрить стейт машины, c описаными выше состояниями, для каждого редактора (Скорее всего компонент Editor.jsx)

• [x] Он так же должен содержать все настройки редактора и управлять ими в зависимости от текущего состояния

• [x] Найти способ привязать обе стейта машины к состоянию и событиям основной (Они должны коммуницировать через отправку сообщений).

• [ ] (bonus) (бек еще не готов) Хотим в будущем иметь возможность замены игрока или бота другим. Это событие должно переопределить все доступы, которые должны будут содержаться в контексте editorMachine.

• [ ] По возможности оптимизировать все побочные эффекты (actions) и эффекты от самих переходов, которые порождают перерендер компонентов (Вместо cеттеров использовать рефы или формировать стейт с помощью текущего состояние всех стейт машин)

Разработка ведется в ветке ~game-state-machines~ master

[vtm9]

Созвон в пятницу вечером

[enmalafeev]

cool, bro