From 57fa54e77daa7b8e817d8a7e998a243b7a0caf4b Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 16 Oct 2026 16:05:34 +0300
Subject: [PATCH] fix(frontend): animate the lesson moves

The pit animator sends the same board model, changed, at every step, so
React skipped the lesson page's updates and only the first step showed.
Each update now gets a new model.
---
 AGENTS.md                               | 2 ++
 apps/frontend/src/routes/LessonPage.tsx | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index bcd1915..5bdd33d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -114,6 +114,8 @@ which helps to check what the server holds.
   (`theme/themes.ts`) are passed to core's `ThemeManager`, which the mobile app uses with its own default themes.
 - Styles that need container queries (`@container`, `cqw`), such as the board's, are plain `.css` files imported by the
   component; styled-jsx 5.0 does not handle them. `BoardView` fills its container and stands upright below 600 px.
+- `PitAnimator` sends the same `BoardViewModel` object, changed, at every animation step. Put a new object (or a new
+  id in its own state, as `GamePage` does) into React state, or React skips the update and only the first step shows.
 - The rules, lessons and move explanations live in `packages/core/src/tutorial`; their boards after a move come from
   the engine (`getMoveOutcome`). After a rule change, run core's tests: they fail if a lesson no longer works, and
   the rule texts in `en.ts`/`tr.ts` may need updating.
diff --git a/apps/frontend/src/routes/LessonPage.tsx b/apps/frontend/src/routes/LessonPage.tsx
index bb26d92..dff950d 100644
--- a/apps/frontend/src/routes/LessonPage.tsx
+++ b/apps/frontend/src/routes/LessonPage.tsx
@@ -63,9 +63,9 @@ const LessonPage: FunctionComponent<{ context: Context, theme: Theme }> = ({ con
 
     useEffect(() => {
         hideTutorialBanner(context.storage);
+        // The animator sends the same model, changed, at every step; a new one makes React draw each step.
         animator.current = new PitAnimator(context.themeManager, (model) => {
-            model.id = v4();
-            setBoardViewModel(model);
+            setBoardViewModel(new BoardViewModel(v4(), model.pits));
         });
         start();
         return () => {