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

@@ -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.

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 () => {