feat(onboarding): интерактивный онбординг-флоу by Themezv · Pull Request #611 · MemeBattle/monorepo

Themezv · 2026-06-13T20:01:27Z

Onboarding

Что внутри

FSM / slice / listeners в features/onboarding
Страницы и пошаговые описания в pages/onboarding
Все свойства шага (слои, подсветки, тексты, вид описания) — в одном stepConfig.ts
Регистрация reducer и listener, маршрут /onboarding (+ фикс опечатки OBBOARDING→ONBOARDING)
Удаление устаревшего listenerModdleware.ts
Зависимость @fsmoothy/core

Сценарий

Вступительные шаги по кнопке «далее» → интерактивная выкладка карт → свободная игра с перелистыванием колоды → ходы соперника зелёными картами → раунд заканчивается, когда колода ligretto полностью опустела
Пока в ряду есть свободный слот, карту из колоды ligretto можно выложить туда (опциональный ход)

Тесты

Юнит-тесты FSM: src/features/onboarding/model/fsm.spec.ts (pnpm test:ci)
E2e полного прохождения без бэкенда: pnpm exec playwright test onboarding — vite поднимается сам (webServer), /auth/me стабится, приложение остаётся за авторизацией
Команды для агентов/разработчиков: apps/ligretto-frontend/AGENTS.md

🤖 Generated with Claude Code

Сама фича поверх подготовительных компонентов (#609) и общих UI-примитивов (#610): - FSM/slice/listeners в features/onboarding - страницы и пошаговые описания в pages/onboarding - регистрация reducer/listener, маршрут /onboarding (+ фикс опечатки OBBOARDING→ONBOARDING), удаление устаревшего listenerModdleware.ts - зависимости @fsmoothy/core, @fsmoothy/graphviz - доки onboarding_spec Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-06-28T14:08:15Z

Storybook

📚 Preview Storybook
🔍 Chromatic build

StepanDyubin · 2026-06-29T19:35:58Z

+const cycledInfoHooks = {
+  guard: (ctx: OnboardingContext) => ctx.data.stack.length === 0 && !ctx.data.isCycledInfoShown,
+  onLeave: (ctx: OnboardingContext) => {
+    ctx.data.isCycledInfoShown = true


Что это?

StepanDyubin · 2026-06-29T19:38:33Z

+
+export const initialState: OnboardingState = {
+  step: OnboardingStep.Opponents,
+  game: {


Это чем-то отличается от того что в fsm?
https://github.com/MemeBattle/monorepo/pull/611/changes#diff-88b925f11645026078a1ecf0a2377fe8ece8db30273a6d36074b8948237b13dfR71

StepanDyubin · 2026-06-29T19:40:49Z

+}
+
+interface CardDescriptionProps {
+  index: 0 | 1


Какой-то странный дизайн компонента получается.
Может в него просто text пробрасывать, а не брать один из 2х захардкоженных?

StepanDyubin · 2026-06-29T19:41:54Z

+
+const TEXT_BY_STEP: Partial<Record<OnboardingStep, string>> = {
+  [OnboardingStep.GameStartedCycledInfo]: 'Карты в стеке закончились — они перелистаются заново',
+  [OnboardingStep.OpponentTurnCycledInfo]: 'Карты в стеке закончились — они перелистаются заново',


Тут так же, я бы предложил в компонент только text пробрасывать

StepanDyubin · 2026-06-29T19:42:58Z

+const TEXT_BY_STEP: Partial<Record<OnboardingStep, string>> = {
+  [OnboardingStep.Ligretto]: 'Это твоя колода ligretto',
+  [OnboardingStep.LigrettoCard]:
+    'Карты из колоды ligretto нужно выкладывать на свободное место в ряду. Раунд закончится, как только первый из игроков выложит все карты из колоды ligretto.',
+  [OnboardingStep.LigrettoAvailableCard]: 'Освободилось место в ряду. Выкладывай из колоды ligretto',
+}
+
+const TOP_ANCHORED_STEPS = new Set<OnboardingStep>([OnboardingStep.LigrettoCard])


И вот это вынести из компонентов

StepanDyubin · 2026-06-29T19:43:25Z

+import { useOnboardingContainerRef } from '../targets'
+import { useTargetRelativePosition } from '#shared/lib/hooks/useTargetRelativePosition'
+
+const TEXT_BY_STEP: Partial<Record<OnboardingStep, string>> = {


StepanDyubin · 2026-06-29T19:50:08Z

+const DISABLED_LIGRETTO_STEPS = new Set<OnboardingStep>([
+  OnboardingStep.Opponents,
+  OnboardingStep.Playground,
+  OnboardingStep.Cards,
+  OnboardingStep.Stack,
+  OnboardingStep.Row,
+  OnboardingStep.Ligretto,
+  OnboardingStep.FirstCard,
+  OnboardingStep.StackCard,
+  OnboardingStep.StackUnavailableCard,
+  OnboardingStep.StackAvailableCard,
+  OnboardingStep.RowAvailableCard,
+  OnboardingStep.GameStarted,
+  OnboardingStep.GameStartedCycledInfo,
+])
+
+const STACK_DESCRIPTION_STEPS = new Set<OnboardingStep>([
+  OnboardingStep.Stack,
+  OnboardingStep.StackCard,
+  OnboardingStep.StackUnavailableCard,
+  OnboardingStep.StackAvailableCard,
+])
+
+const PLAYER_ROW_DESCRIPTION_STEPS = new Set<OnboardingStep>([OnboardingStep.Row])
+
+const LIGRETTO_DESCRIPTION_STEPS = new Set<OnboardingStep>([
+  OnboardingStep.Ligretto,
+  OnboardingStep.LigrettoCard,
+  OnboardingStep.LigrettoAvailableCard,
+])
+
+const CENTERED_DESCRIPTION_STEPS = new Set<OnboardingStep>([OnboardingStep.GameStartedCycledInfo, OnboardingStep.OpponentTurnCycledInfo])


Такой подход, когда каждое свойство step'a в отдельном месте хранится, получается сложным.

Я бы предложил собрать все эти переменные в одну типа

const GameStartedStep = { isDescriptionCentered: false, hiddenOverlay: true, describeStack: false, ... } satisfies StepConfig;

Ревью: - fsm: удалено мёртвое поле stack, guard циклической подсказки проверяет реальную пустоту открытой колоды, колода перелистывается заново - slice: initialState строится из createOnboardingGame() вместо дублирующейся захардкоженной копии - все свойства шага собраны в один StepConfig (stepConfig.ts), тексты вынесены из description-компонентов и передаются через props, общая разметка пузыря — в DescriptionBubble, Layer работает от конфига Сценарий: - продлён финал: соперник отвечает зелёной двойкой на прокрутку колоды, игрок выкладывает зелёную тройку из ряда, раунд заканчивается только когда колода ligretto полностью опустела - карту из колоды ligretto можно положить в свободный слот ряда на шагах opponentTurn и opponentTurnSecondCard (опциональный ход) - подсказка о перелистывании привязана к колоде в руке, а не к центру - экран результатов: текст поздравления внутри панели, без стрелки Тесты и инфраструктура: - юнит-тесты FSM (happy path, циклическая подсказка, зелёная цепочка, опциональные ходы, results только при пустой колоде) - e2e полного прохождения онбординга без бэкенда: webServer в playwright config, стаб /auth/me, data-test-id хуки и page object - listener онбординга завершается при уходе с роута и не дублируется - AGENTS.md с командами тестирования (CLAUDE.md — симлинк) - удалена неиспользуемая зависимость @fsmoothy/graphviz Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Themezv · 2026-07-19T20:46:07Z

Обновил PR по замечаниям ревью:

fsm.ts «Что это?» (stack) — поле было мёртвым (никогда не заполнялось, guard всегда true). Удалено; guard циклической подсказки теперь проверяет пустоту stackOpenDeck, колода перелистывается заново.
slice.ts дублирует fsm — да, и с расхождениями. initialState теперь строится из createOnboardingGame(), экспортируемой из fsm.
Разрозненные Set-ы / захардкоженные тексты / «зачем Layer» — все свойства шага собраны в stepConfig.ts (один объект на шаг, как предлагалось). Description-компоненты принимают text через props, общая разметка — в DescriptionBubble. Layer (поднимает зону над Overlay) работает от raisedLayers конфига, добавлен док-комментарий.

Сверх ревью: продлён финальный сценарий (зелёная цепочка 1→2→3, раунд кончается при пустой колоде ligretto), опциональные ходы ligretto→ряд, фикс listener-а (завершение при уходе с роута), юнит-тесты FSM и e2e полного прохождения без бэкенда (pnpm exec playwright test onboarding).

…rver reuseExistingServer: true — playwright сам проверяет доступность приложения по url/порту и переиспользует уже запущенный сервер (например, поднятый в CI), а команду запускает только если никто не отвечает. Проверка по переменной CI ломала e2e-джобу: CI поднимает фронтенд сам, и порт 5173 уже занят. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Themezv · 2026-07-23T12:34:43Z

+    })
+  }, [game.players, results])
+
+  if (step !== OnboardingStep.Result) {


Удалить. За отрисовку или нет должен отвечать родительский компонент

Themezv · 2026-07-23T12:35:23Z

+    navigate(routes.HOME)
+  }, [navigate])
+
+  const players = useMemo(() => {


Это reselect селектор. Нужно сделать из этого селектор.

Themezv · 2026-07-23T12:38:40Z

+ * The onboarding flow itself needs no backend, but the whole app is gated by
+ * authorization. Stub the auth endpoint so the test runs without a backend.
+ */
+const stubAuth = async (page: Page) => {


Стаб надо будет удалить.

Themezv · 2026-07-23T12:39:39Z

+
+## Conventions
+
+- Code comments and agent docs (this file) — English only. UI copy — Russian.


Это поднять в корневой Agents.md
Пункт про UI copy убрать.

Themezv · 2026-07-23T12:40:09Z

+- `pnpm exec playwright test onboarding` — onboarding e2e. **No backend required**: playwright starts the vite dev server itself (`webServer` in `playwright.config.ts`) and reuses one already running on :5173; the auth request (`/auth/me`) is stubbed by the test via `page.route`.
+- `pnpm e2e:start` — all e2e; `e2e/tests/game.spec.ts` requires running backends (core + gameplay) and fails without them — for an isolated frontend check run only `onboarding`.
+
+Lint/format — from the repo root: `pnpm lint:check`, `pnpm fmt:check`.


Поднять в корневой

Themezv had a problem deploying to storybook-pr June 13, 2026 20:01 — with GitHub Actions Failure

Themezv and others added 2 commits June 28, 2026 00:17

fix descriptions

0390aad

Themezv force-pushed the feat/onboarding-flow branch from 1a52a9c to 0390aad Compare June 28, 2026 14:03

Themezv deployed to storybook-pr June 28, 2026 14:03 — with GitHub Actions View deployment

Themezv requested review from StepanDyubin and bondiano June 28, 2026 14:06

fix descriptions

8f1e093

Themezv requested a deployment to storybook-pr June 28, 2026 14:07 — with GitHub Actions Waiting

fix linter

5d0efd8

Themezv requested a deployment to storybook-pr June 28, 2026 14:25 — with GitHub Actions Waiting

fix linter

65da86a

Themezv deployed to storybook-pr June 28, 2026 14:27 — with GitHub Actions View deployment

StepanDyubin requested changes Jun 29, 2026

View reviewed changes

Themezv requested a deployment to storybook-pr July 19, 2026 20:45 — with GitHub Actions Waiting

Themezv requested a deployment to storybook-pr July 19, 2026 21:11 — with GitHub Actions Waiting

Themezv requested a review from StepanDyubin July 19, 2026 21:12

Themezv commented Jul 23, 2026

View reviewed changes


		## Conventions

		- Code comments and agent docs (this file) — English only. UI copy — Russian.

Uh oh!

Conversation

Themezv commented Jun 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Что внутри

Сценарий

Тесты

Uh oh!

github-actions Bot commented Jun 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Storybook

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Themezv commented Jul 19, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Themezv Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Themezv commented Jun 13, 2026 •

edited

Loading

github-actions Bot commented Jun 28, 2026 •

edited

Loading

Themezv Jul 23, 2026 •

edited

Loading