@connectorvol/chess-widgets 8.0.0 → 9.0.0

package/dist/puzzle-creation/PuzzlePgnBoardTreeEditor.svelte

@@ -12,7 +12,6 @@
   import {
     CHESSBOARD_THEMES,
     createBoardApi,
-    DEFAULT_BOARD_SETTINGS,
     Draggable,
     syncMoveEvaluationNagBadge,
   } from "@connectorvol/chessboard";
@@ -24,29 +23,47 @@
 
   import { INITIAL_FEN } from "@connectorvol/chessops/fen";
   import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
-  import { Color, calculatePly, type Move } from "@connectorvol/shared";
+  import {
+    Color,
+    calculatePly,
+    type Move,
+    PUZZLE_BRANCH_CORRECT_NAG_ID,
+    PUZZLE_BRANCH_WRONG_NAG_ID,
+    isPuzzleBranchNag,
+  } from "@connectorvol/shared";
 
   import { mergePgnWithSetupFen } from "../puzzle/mergePgnWithSetupFen.js";
-  import { createEmptyTreeFromFen } from "../puzzle/puzzleData.js";
-  import { PREVIEW_WRONG_NO_VARIANT_MESSAGE } from "../puzzle/puzzlePreviewConstants.js";
   import {
+    createEmptyTreeFromFen,
+    createStudentPreviewTreeFromFen,
+  } from "../puzzle/puzzleData.js";
+  import { PREVIEW_WRONG_MOVE_REVEAL_MS, PREVIEW_WRONG_NO_VARIANT_MESSAGE } from "../puzzle/puzzlePreviewConstants.js";
+  import { normalizePuzzleTreeMainLine, syncPuzzleBranchNagsOnTree } from "../puzzle/syncPuzzleBranchNags.js";
+  import { applyPlayedSolverNagsAlongPath } from "../puzzle/puzzlePreviewPathNags.js";
+  import {
+    puzzlePreviewAddAdHocWrongMoveToSolutionTree,
     puzzlePreviewClassifySolverMove,
     puzzlePreviewDupSubtreeUnderStudentCursor,
     puzzlePreviewIsSolvedPosition,
     puzzlePreviewNodeAtPath,
+    puzzlePreviewRemapPathAfterReorder,
     puzzlePreviewSideToMoveFromFen,
     type TSolverMoveOutcome,
   } from "../puzzle/puzzleStepPreviewSolver.js";
   import PuzzleBoardTreeViewerPane from "./PuzzleBoardTreeViewerPane.svelte";
   import { cn } from "../utils.js";
   import type { TPuzzlePgnBoardTreeEditorProps } from "./types.js";
+  import { DEFAULT_BOARD_APPEARANCE_SETTINGS } from "../constants/default-board-appearance-settings.js";
+import { buildPuzzleWizardBoardSettings } from "./buildPuzzleWizardBoardSettings.js";
 
   let {
     pgn = "",
     fen: fenProp,
     onOutcome,
     boardTheme,
-    boardAppearanceSettings,
+    boardAppearanceSettings = DEFAULT_BOARD_APPEARANCE_SETTINGS,
+    boardSize,
+    onResizeAction,
     class: className,
     wrongFeedback = $bindable<string | null>(null),
     solved = $bindable(false),
@@ -66,8 +83,28 @@
 
   let cursorPath = $state<number[]>([]);
 
+  const OPPONENT_MOVE_ANIMATION_MS = 300;
+
   let wrongRevealTimer: ReturnType<typeof setTimeout> | null = null;
   let advanceLineTimer: ReturnType<typeof setTimeout> | null = null;
+  let opponentAutoTimer: ReturnType<typeof setTimeout> | null = null;
+
+  /** Представляет отложенный откат ошибочного хода на доске после показа NAG ✗. */
+  type TPendingWrongMoveReveal = {
+    /** Возвращает классификацию хода решателя. */
+    outcome: TSolverMoveOutcome;
+    /** Возвращает сыгранный SAN. */
+    playedSan: string;
+    /** Возвращает FEN позиции до ошибочного хода. */
+    revertFen: string;
+    /** Возвращает последний ход до ошибочного хода (для подсветки на доске). */
+    revertLastMove: Move | null;
+  };
+
+  let pendingWrongMoveReveal = $state<TPendingWrongMoveReveal | null>(null);
+
+  /** Представляет последний применённый ход решателя до колбэка `afterPieceMove` (drag-and-drop). */
+  let lastSolverMoveForBoard: Move | null = null;
 
   let previewChess = new PgnOps(INITIAL_FEN, "chess");
 
@@ -79,6 +116,11 @@
    * Представляет синхронизацию доступности перетаскивания с очередью хода и состоянием «решено».
    */
   function syncBoardDragFromChessTurn(): void {
+    if (pendingWrongMoveReveal !== null) {
+      chessboard.draggable = Draggable.NONE;
+      return;
+    }
+
     const solver = puzzleSolverColor();
     chessboard.draggable = solved
       ? previewChess.turn() === Color.WHITE
@@ -91,6 +133,137 @@
         : Draggable.NONE;
   }
 
+  /**
+   * Представляет отмену отложенного отката ошибочного хода без записи варианта в дерево.
+   */
+  function dismissPendingWrongMoveReveal(): void {
+    if (wrongRevealTimer !== null) {
+      clearTimeout(wrongRevealTimer);
+      wrongRevealTimer = null;
+    }
+
+    const pending = pendingWrongMoveReveal;
+    if (pending === null) return;
+
+    pendingWrongMoveReveal = null;
+    previewChess.setFen(pending.revertFen);
+    chessboard.fen = pending.revertFen;
+    chessboard.addLastMove(pending.revertLastMove);
+    syncMoveEvaluationNagBadge(chessboard, {
+      nags: undefined,
+      lastMove: pending.revertLastMove,
+    });
+    syncBoardDragFromChessTurn();
+  }
+
+  /**
+   * Представляет досрочное завершение показа ошибочного хода перед следующим ходом решателя.
+   */
+  function cancelPendingWrongMoveReveal(): void {
+    if (pendingWrongMoveReveal === null) return;
+
+    if (wrongRevealTimer !== null) {
+      clearTimeout(wrongRevealTimer);
+      wrongRevealTimer = null;
+    }
+
+    finishWrongMoveReveal();
+  }
+
+  /**
+   * Представляет показ NAG ✗ на доске и отложенный откат ошибочного хода.
+   */
+  function scheduleWrongMoveReveal(wrongMove: Move): void {
+    const pending = pendingWrongMoveReveal;
+    if (pending === null) return;
+
+    syncMoveEvaluationNagBadge(chessboard, {
+      nags: [PUZZLE_BRANCH_WRONG_NAG_ID],
+      lastMove: wrongMove,
+    });
+    syncBoardDragFromChessTurn();
+
+    wrongRevealTimer = setTimeout(() => {
+      wrongRevealTimer = null;
+      finishWrongMoveReveal();
+    }, PREVIEW_WRONG_MOVE_REVEAL_MS);
+  }
+
+  /**
+   * Представляет завершение показа ошибочного хода: запись варианта в дерево и откат позиции на доске.
+   */
+  function finishWrongMoveReveal(): void {
+    const pending = pendingWrongMoveReveal;
+    pendingWrongMoveReveal = null;
+    if (pending === null) return;
+
+    previewChess.setFen(pending.revertFen);
+    handleWrongOutcome(pending.outcome, pending.playedSan);
+
+    chessboard.fen = pending.revertFen;
+    chessboard.addLastMove(pending.revertLastMove);
+    syncMoveEvaluationNagBadge(chessboard, {
+      nags: undefined,
+      lastMove: pending.revertLastMove,
+    });
+    syncBoardDragFromChessTurn();
+  }
+
+  /**
+   * Представляет синхронизацию NAG ✓ на доске после верного хода решателя.
+   */
+  function syncCorrectSolverMoveNagBadge(move: Move): void {
+    syncMoveEvaluationNagBadge(chessboard, {
+      nags: [PUZZLE_BRANCH_CORRECT_NAG_ID],
+      lastMove: move,
+    });
+  }
+
+  /**
+   * Представляет данные узла для бейджа NAG на доске в режиме свободного анализа (без ✓/✗ задачи).
+   */
+  function nodeDataForAnalysisBoardBadge(data: {
+    nags?: number[];
+    lastMove?: Move | null;
+  }): { nags?: number[]; lastMove?: Move | null } {
+    const nags = data.nags?.filter((n) => !isPuzzleBranchNag(n));
+    return {
+      nags: nags && nags.length > 0 ? nags : undefined,
+      lastMove: data.lastMove ?? null,
+    };
+  }
+
+  /**
+   * Представляет синхронизацию бейджей NAG и маркеров доски с текущим узлом дерева решения (свободный анализ).
+   */
+  function syncAnalysisBoardFromCurrentNode(): void {
+    const tree = solutionPreviewTree;
+    if (!tree) return;
+
+    syncMoveEvaluationNagBadge(
+      chessboard,
+      nodeDataForAnalysisBoardBadge(tree.currentNode.data),
+    );
+    chessboard.setNodeMarkers(tree.currentNode.data.parsedFirstComment?.shapes);
+    syncBoardDragFromChessTurn();
+  }
+
+  /**
+   * Представляет обработку UI после применения хода решателя на доске.
+   */
+  function afterSolverMoveOnBoard(move: Move): void {
+    if (pendingWrongMoveReveal !== null) {
+      scheduleWrongMoveReveal(move);
+      return;
+    }
+
+    syncCorrectSolverMoveNagBadge(move);
+    syncBoardDragFromChessTurn();
+    if (!solved) {
+      scheduleOpponentAutoResponse();
+    }
+  }
+
   /**
    * Представляет добавление пути в дерево ученика без очистки уже пройденных линий.
    */
@@ -101,22 +274,106 @@
     studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
 
     let src = solution.rootNode.moves;
+    const solver = puzzleSolverColor();
+
+    applyPlayedSolverNagsAlongPath(solution, path, solver);
+
     for (const idx of path) {
       const next = src.children[idx];
       if (!next) break;
+
+      const studentNags = next.data.nags ? [...next.data.nags] : undefined;
+
+      const existingChild = studentPreviewTree.currentNode.children.find(
+        (c) => c.data.san === next.data.san,
+      );
+      if (existingChild) {
+        existingChild.data.nags = studentNags;
+      }
+
       studentPreviewTree.addNodeToCurrent({
         id: "",
         children: [],
-        data: { ...next.data },
+        data: {
+          ...next.data,
+          nags: studentNags,
+        },
       });
       src = next;
     }
+
+    const solverColor = puzzleSolverColor();
+    normalizePuzzleTreeMainLine(studentPreviewTree.rootNode.moves, solverColor);
+  }
+
+  /**
+   * Представляет нормализацию главной линии и NAG только в дереве решения (PGN).
+   */
+  function normalizeSolutionTree(): void {
+    const solution = solutionPreviewTree;
+    if (!solution) return;
+
+    const solverColor = puzzleSolverColor();
+    if (normalizePuzzleTreeMainLine(solution.rootNode.moves, solverColor)) {
+      solution.mutationVersion++;
+    }
+    cursorPath = puzzlePreviewRemapPathAfterReorder(
+      solution.rootNode.moves,
+      cursorPath,
+    );
+  }
+
+  /**
+   * Представляет синхронизацию дерева ученика с пройденным путём решения (после верного хода).
+   */
+  function syncStudentTreeFromSolutionPath(path: number[]): void {
+    ensureStudentPreviewTreeHasPath(path);
+    studentPreviewTree.forcedNodeId = null;
+    studentPreviewTree.mutationVersion++;
+  }
+
+  /**
+   * Представляет добавление отсутствующего в PGN хода в дерево решения и дерево ученика с NAG ✗.
+   */
+  function addAdHocWrongMoveToTrees(playedSan: string): boolean {
+    const solution = solutionPreviewTree;
+    if (!solution) return false;
+
+    const addedNode = puzzlePreviewAddAdHocWrongMoveToSolutionTree(
+      solution,
+      cursorPath,
+      previewChess.fen(),
+      playedSan,
+    );
+    if (!addedNode) return false;
+
+    normalizeSolutionTree();
+
+    ensureStudentPreviewTreeHasPath(cursorPath);
+    const studentFork = studentPreviewTree.currentNode;
+    studentPreviewTree.addNodeToCurrent({
+      id: "",
+      children: [],
+      data: { ...addedNode.data },
+    });
+    studentPreviewTree.forcedNodeId = studentFork.id;
+    studentPreviewTree.currentNode = studentFork;
+
+    const solverColor = puzzleSolverColor();
+    normalizePuzzleTreeMainLine(studentPreviewTree.rootNode.moves, solverColor);
+
+    studentPreviewTree.mutationVersion++;
+
+    return true;
   }
 
   /**
    * Представляет обработку ошибочного хода в превью.
    */
-  function handleWrongOutcome(outcome: TSolverMoveOutcome): void {
+  function handleWrongOutcome(
+    outcome: TSolverMoveOutcome,
+    playedSan: string,
+  ): void {
     const solution = solutionPreviewTree;
     if (!solution) return;
 
@@ -128,16 +385,40 @@
       clearTimeout(advanceLineTimer);
       advanceLineTimer = null;
     }
+    if (opponentAutoTimer !== null) {
+      clearTimeout(opponentAutoTimer);
+      opponentAutoTimer = null;
+    }
 
     if (outcome.kind === "wrong_marked_variant") {
       wrongFeedback =
         "Неверно. Открываю введённый вариант в дереве, ход отменён.";
       onOutcome?.("failed");
       ensureStudentPreviewTreeHasPath(cursorPath);
+      const studentFork = studentPreviewTree.currentNode;
       puzzlePreviewDupSubtreeUnderStudentCursor(
         studentPreviewTree,
         outcome.wrongBranchRoot,
       );
+      studentPreviewTree.forcedNodeId = studentFork.id;
+      studentPreviewTree.currentNode = studentFork;
+
+      const solverColor = puzzleSolverColor();
+      normalizePuzzleTreeMainLine(studentPreviewTree.rootNode.moves, solverColor);
+
+      studentPreviewTree.mutationVersion++;
+      normalizeSolutionTree();
+      return;
+    }
+
+    if (outcome.kind === "no_matching_variant") {
+      if (addAdHocWrongMoveToTrees(playedSan)) {
+        wrongFeedback =
+          "Неверно. Ход добавлен в дерево вариантов, позиция на доске отменена.";
+      } else {
+        wrongFeedback = PREVIEW_WRONG_NO_VARIANT_MESSAGE;
+      }
+      onOutcome?.("failed");
       return;
     }
 
@@ -149,6 +430,8 @@
    * Представляет установку позиции и дерева ученика по пути из корня.
    */
   function setStateFromPath(path: number[]): void {
+    dismissPendingWrongMoveReveal();
+
     const solution = solutionPreviewTree;
     if (!solution) return;
 
@@ -162,30 +445,123 @@
     }
 
     cursorPath = path;
-    ensureStudentPreviewTreeHasPath(cursorPath);
+    syncStudentTreeFromSolutionPath(path);
     chessboard.fen = previewChess.fen();
+    const leaf = puzzlePreviewNodeAtPath(solution.rootNode.moves, path);
+    chessboard.addLastMove(leaf?.data.lastMove ?? null);
+    syncMoveEvaluationNagBadge(chessboard, {
+      nags: undefined,
+      lastMove: leaf?.data.lastMove ?? null,
+    });
     syncBoardDragFromChessTurn();
   }
 
   /**
-   * Представляет автоматический ход соперника по главному варианту после хода решателя.
+   * Представляет ответ соперника по главному варианту после хода решателя (без применения к движку).
    */
-  function applyOpponentMainLineMove(pathAfterSolver: number[]): number[] {
+  function getOpponentMainLineReply(
+    pathAfterSolver: number[],
+  ): { san: string; path: number[] } | null {
     const solution = solutionPreviewTree;
-    if (!solution) return pathAfterSolver;
+    if (!solution) return null;
 
     if (puzzlePreviewSideToMoveFromFen(previewChess.fen()) === puzzleSolverColor()) {
-      return pathAfterSolver;
+      return null;
     }
 
     const node = puzzlePreviewNodeAtPath(
       solution.rootNode.moves,
       pathAfterSolver,
     );
-    if (!node || node.children.length === 0) return pathAfterSolver;
+    if (!node || node.children.length === 0) return null;
+
+    return {
+      san: node.children[0]!.data.san,
+      path: [...pathAfterSolver, 0],
+    };
+  }
+
+  /**
+   * Представляет проверку конца линии и переход к следующему варианту ответа соперника.
+   */
+  function checkSolvedAndMaybeAdvance(): void {
+    const solution = solutionPreviewTree;
+    if (!solution) return;
+
+    const leaf = puzzlePreviewNodeAtPath(solution.rootNode.moves, cursorPath);
+    if (
+      leaf &&
+      puzzlePreviewIsSolvedPosition(previewChess, leaf, puzzleSolverColor())
+    ) {
+      if (advanceLineTimer !== null) {
+        clearTimeout(advanceLineTimer);
+        advanceLineTimer = null;
+      }
+      advanceLineTimer = setTimeout(() => {
+        const advanced = maybeAdvanceToNextOpponentLine();
+        if (!advanced) {
+          const target = puzzlePreviewNodeAtPath(
+            solution.rootNode.moves,
+            cursorPath,
+          );
+          solution.currentNode = target ?? solution.rootNode.moves;
+          solved = true;
+          onOutcome?.("solved");
+          syncBoardFromSolutionTreeNode();
+        }
+        syncBoardDragFromChessTurn();
+        advanceLineTimer = null;
+      }, 250);
+    }
+  }
+
+  /**
+   * Представляет анимированный автоматический ход соперника после хода решателя.
+   */
+  function playOpponentAutoResponse(pathAfterSolver: number[]): void {
+    const reply = getOpponentMainLineReply(pathAfterSolver);
+    if (!reply) {
+      checkSolvedAndMaybeAdvance();
+      return;
+    }
+
+    let opponentMove: Move;
+    try {
+      opponentMove = previewChess.makeSanMove(reply.san);
+    } catch {
+      return;
+    }
+
+    cursorPath = reply.path;
+    syncStudentTreeFromSolutionPath(cursorPath);
+
+    chessboard.animationTime = OPPONENT_MOVE_ANIMATION_MS;
+    chessboard.fen = previewChess.fen();
+    chessboard.addLastMove(opponentMove);
+    syncMoveEvaluationNagBadge(chessboard, {
+      nags: undefined,
+      lastMove: opponentMove,
+    });
+    syncBoardDragFromChessTurn();
+
+    checkSolvedAndMaybeAdvance();
+  }
+
+  /**
+   * Представляет отложенный автоматический ответ соперника после анимации хода решателя.
+   */
+  function scheduleOpponentAutoResponse(): void {
+    if (opponentAutoTimer !== null) {
+      clearTimeout(opponentAutoTimer);
+      opponentAutoTimer = null;
+    }
 
-    previewChess.makeSanMove(node.children[0]!.data.san);
-    return [...pathAfterSolver, 0];
+    const pathAfterSolver = [...cursorPath];
+    const delayMs = chessboard.animationTime || OPPONENT_MOVE_ANIMATION_MS;
+    opponentAutoTimer = setTimeout(() => {
+      playOpponentAutoResponse(pathAfterSolver);
+      opponentAutoTimer = null;
+    }, delayMs);
   }
 
   /**
@@ -259,6 +635,8 @@
     const solution = solutionPreviewTree;
     if (!solution || solved) return undefined;
 
+    cancelPendingWrongMoveReveal();
+
     const cursorNode = puzzlePreviewNodeAtPath(
       solution.rootNode.moves,
       cursorPath,
@@ -273,34 +651,34 @@
     );
 
     if (outcome.kind !== "correct") {
-      handleWrongOutcome(outcome);
-      return undefined;
+      const revertFen = previewChess.fen();
+      const revertLastMove = cursorNode.data.lastMove ?? null;
+      try {
+        const wrongMove = previewChess.makeSanMove(san);
+        pendingWrongMoveReveal = {
+          outcome,
+          playedSan: san,
+          revertFen,
+          revertLastMove,
+        };
+        lastSolverMoveForBoard = wrongMove;
+        return wrongMove;
+      } catch {
+        pendingWrongMoveReveal = null;
+        wrongFeedback = "Ход недопустим в этой позиции.";
+        onOutcome?.("failed");
+        return undefined;
+      }
     }
 
     try {
-      let path = [...cursorPath, outcome.childIndex];
+      const pathAfterSolver = [...cursorPath, outcome.childIndex];
       const moveRecord = previewChess.makeSanMove(san);
-      path = applyOpponentMainLineMove(path);
-      setStateFromPath(path);
-
-      const leaf = puzzlePreviewNodeAtPath(solution.rootNode.moves, cursorPath);
-      if (leaf && puzzlePreviewIsSolvedPosition(previewChess, leaf, puzzleSolverColor())) {
-        if (advanceLineTimer !== null) {
-          clearTimeout(advanceLineTimer);
-          advanceLineTimer = null;
-        }
-        advanceLineTimer = setTimeout(() => {
-          const advanced = maybeAdvanceToNextOpponentLine();
-          if (!advanced) {
-            solved = true;
-            onOutcome?.("solved");
-          }
-          syncBoardDragFromChessTurn();
-          advanceLineTimer = null;
-        }, 250);
-      }
+      cursorPath = pathAfterSolver;
+      syncStudentTreeFromSolutionPath(pathAfterSolver);
 
       wrongFeedback = null;
+      lastSolverMoveForBoard = moveRecord;
       syncBoardDragFromChessTurn();
 
       return moveRecord;
@@ -348,8 +726,13 @@
           turn: previewChess.turn(),
         };
       },
-      afterPieceMoveSan: () => {
-        syncBoardDragFromChessTurn();
+      afterPieceMoveSan: (move) => {
+        lastSolverMoveForBoard = null;
+        if (solved) {
+          syncAnalysisBoardFromCurrentNode();
+          return;
+        }
+        afterSolverMoveOnBoard(move);
       },
       beforePieceMove: (from, to, promotion) => {
         if (solved) {
@@ -380,43 +763,46 @@
         return previewChess.fen();
       },
       afterPieceMove: () => {
+        if (solved) {
+          lastSolverMoveForBoard = null;
+          syncAnalysisBoardFromCurrentNode();
+          return;
+        }
+        const move = lastSolverMoveForBoard;
+        lastSolverMoveForBoard = null;
+        if (move) {
+          afterSolverMoveOnBoard(move);
+          return;
+        }
         syncBoardDragFromChessTurn();
       },
     },
   };
 
-  let chessboard = $derived(
-    createBoardApi({
+  let chessboard = $derived.by(() => {
+    const merged = buildPuzzleWizardBoardSettings(boardAppearanceSettings);
+    return createBoardApi({
       fen: INITIAL_FEN,
-      settings: {
-        ...DEFAULT_BOARD_SETTINGS,
-        ...(boardAppearanceSettings ?? {}),
-        boardSize: 38,
-        isResizable: false,
-        orientation: Color.WHITE,
-        draggable: Draggable.WHITE,
+      playSettings:
+        boardSize !== undefined
+          ? { ...merged.play, boardSize }
+          : merged.play,
+      actions: {
+        ...actions,
+        onResizeAction,
       },
-      actions,
-      theme: boardTheme ?? CHESSBOARD_THEMES.blue,
-    }),
-  );
+    });
+  });
+
+  const chessboardDesign = $derived({
+    ...buildPuzzleWizardBoardSettings(boardAppearanceSettings).design,
+    theme: boardTheme ?? CHESSBOARD_THEMES.blue,
+  });
 
   const treeForViewer = $derived(
     solved && solutionPreviewTree ? solutionPreviewTree : studentPreviewTree,
   );
 
-  /**
-   * Представляет синхронизацию выбранного узла в полном дереве решения с пройденной линией при переходе в режим просмотра (`solved`).
-   * Без этого после switch с `studentPreviewTree` у `solutionPreviewTree` остаётся `currentNode` у корня и подсветка в TreeViewer неверна.
-   */
-  $effect(() => {
-    if (!solved || !solutionPreviewTree) return;
-    const tree = solutionPreviewTree;
-    const path = cursorPath;
-    const target = puzzlePreviewNodeAtPath(tree.rootNode.moves, path);
-    tree.currentNode = target ?? tree.rootNode.moves;
-  });
-
   $effect(() => {
     const trimmedPgn = pgn.trim();
     const rootFen = fenProp?.trim() ? fenProp.trim() : INITIAL_FEN;
@@ -433,6 +819,10 @@
           rootFen.trim().split(/\s+/)[1] === "b"
             ? Color.BLACK
             : Color.WHITE;
+        syncMoveEvaluationNagBadge(chessboard, {
+          nags: undefined,
+          lastMove: null,
+        });
         cursorPath = [];
         solved = false;
         wrongFeedback = null;
@@ -446,17 +836,28 @@
       const { rootNode } = transformPgnToChessNode(fullPgn);
 
       layoutInitialFen = rootFen;
-      solutionPreviewTree = new ChessTree(rootNode);
+      const solutionTree = new ChessTree(rootNode);
+      syncPuzzleBranchNagsOnTree(
+        solutionTree,
+        rootFen.trim().split(/\s+/)[1] === "b" ? Color.BLACK : Color.WHITE,
+      );
+      solutionPreviewTree = solutionTree;
 
       cursorPath = [];
       solved = false;
       wrongFeedback = null;
       previewChess.setFen(rootFen);
-      studentPreviewTree.replaceRootTree(createEmptyTreeFromFen(rootFen));
+      studentPreviewTree.replaceRootTree(
+        createStudentPreviewTreeFromFen(rootFen, rootNode.comments),
+      );
       studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
       chessboard.fen = rootFen;
       chessboard.orientation =
         rootFen.trim().split(/\s+/)[1] === "b" ? Color.BLACK : Color.WHITE;
+      syncMoveEvaluationNagBadge(chessboard, {
+        nags: undefined,
+        lastMove: null,
+      });
       syncBoardDragFromChessTurn();
     });
 
@@ -467,14 +868,15 @@
    * Представляет сброс отложенных таймеров превью.
    */
   function clearTimers(): void {
-    if (wrongRevealTimer !== null) {
-      clearTimeout(wrongRevealTimer);
-      wrongRevealTimer = null;
-    }
+    dismissPendingWrongMoveReveal();
     if (advanceLineTimer !== null) {
       clearTimeout(advanceLineTimer);
       advanceLineTimer = null;
     }
+    if (opponentAutoTimer !== null) {
+      clearTimeout(opponentAutoTimer);
+      opponentAutoTimer = null;
+    }
   }
 
   /**
@@ -483,11 +885,17 @@
   function syncBoardFromSolutionTreeNode(): void {
     const tree = solutionPreviewTree;
     if (!tree || !solved) return;
-    previewChess.setFen(tree.currentNode.data.fen);
+
+    const node = tree.currentNode;
+
+    previewChess.setFen(node.data.fen);
     chessboard.fen = previewChess.fen();
-    chessboard.addLastMove(tree.currentNode.data.lastMove ?? null);
-    syncMoveEvaluationNagBadge(chessboard, tree.currentNode.data);
-    chessboard.setNodeMarkers(tree.currentNode.data.parsedFirstComment?.shapes);
+    chessboard.addLastMove(node.data.lastMove ?? null);
+    syncMoveEvaluationNagBadge(
+      chessboard,
+      nodeDataForAnalysisBoardBadge(node.data),
+    );
+    chessboard.setNodeMarkers(node.data.parsedFirstComment?.shapes);
     syncBoardDragFromChessTurn();
   }
 
@@ -502,7 +910,7 @@
   /**
    * Представляет обновление UI доски после смены узла в дереве решения.
    */
-  function treeSetChessboardFen(_animationTime?: number): void {
+  function treeSetChessboardFen(_animationTime: number | undefined): void {
     if (!solved) return;
     syncBoardFromSolutionTreeNode();
   }
@@ -524,9 +932,10 @@
   }
 </script>
 
-<div class={["flex flex-col gap-2", className]}>
+<div class={cn("flex w-full flex-col gap-2", className)}>
   <PuzzleBoardTreeViewerPane
     {chessboard}
+    {chessboardDesign}
     chessTree={treeForViewer}
     onSelectNode={treeOnSelectNode}
     onDeleteVariant={treeOnDeleteVariant}