Паттерн State Machine (Конечный автомат), туториал: игра «Угадай число» с помощью xState Во фронтенде для реализации конечных автоматов есть библиотека xState. Автор библиотеки из Microsoft, и она появилась, чтобы было проще поддерживать редактор workflows в Azure. На самом деле такое случается сплошь и рядом, когда появляется некая развесистая система, в которой могут разобраться только её авторы, так как её сложно объять умом целиком. И если есть общая диаграмма работы, то больше шансов, что незнакомый с системой человек сможет быстрее понять. Библиотека помимо программного API предоставляет генератор блок-схемы работы системы. Блок-схема интерактивная, её можно запустить и визуально изучить переходы между состояниями. В целом, можно действовать и наоборот: начать с создания визуальной схемы в редакторе и уже из неё сгенерировать код State Machine, который затем скорректировать в текстовом редакторе. Кроме того, для VS Code есть визуализация кода State Machine, то есть в любой момент времени есть «живая документация», которая показывает, как работает автомат. Что ещё интересного есть в xState: между состояниями могут быть guards (условия), которые в зависимости от результата поведут в одну сторону или в другую в автомате есть своё собственное хранилище состояния, где можно хранить параметры системы, считывать их или изменять (например, можно хранить сообщение для пользователя или счётчик действий) автомат может принимать параметры из внешнего мира и как-то на них реагировать В этом туториале мы разберём, как работает State Machine в xState на примере создания игры «Угадай число от 1 до 10». В начале игры система генерирует случайное число от 1 до 10. Пользователь начинает игру, и у него есть 3 попытки угадать число, вводя ответ в текстовое поле. При каждой попытке система даёт подсказку, больше ли загаданное число или меньше введённого пользователем. Если число угадано, то показывается поздравление. Если нет спустя 3 попытки – показывается экран с сообщением, что попытки закончились и даётся правильный ответ. Блок-схема работы системы: В автомате есть 4 состояния: idle – игра не начата playing – игра в процессе success – игра выиграна failure – игра проиграна Кроме того, автомат хранит во внутреннем состоянии параметры: number – загаданное системой число attempts – попытки пользователя message – сообщение для пользователя о состоянии игры Для перехода из состояния idle в playing вызывается событие START. В процессе игры, когда пользователь пытается угадать число вызывается событие GUESS. После каждой попытки система уменьшает число оставшихся попыток на 1. Также система сравнивает пользовательское число с загаданным числом: если числа совпадают, то происходит переход в состояние success. Если количество оставшихся попыток стало равно 0, то система переходит в состояние failure. В каждом состоянии для пользователя формируется сообщение в message. Начать
