@connectorvol/chess-widgets 1.0.0 → 1.1.0

package/dist/puzzle-creation/StepPreview.svelte

@@ -1,53 +1,21 @@
 <script lang="ts">
-  import type {
-    ChessboardTheme,
-    IChessBoardActions,
-  } from "@connectorvol/chessboard";
-  import type { Square } from "@connectorvol/shared";
+  import type { ChessboardTheme } from "@connectorvol/chessboard";
 
-  import {
-    Chessboard,
-    CHESSBOARD_THEMES,
-    createBoardApi,
-    DEFAULT_BOARD_SETTINGS,
-    Draggable,
-  } from "@connectorvol/chessboard";
-  import {
-    ChessTree,
-    TreeViewer,
-    transformPgnToChessNode,
-  } from "@connectorvol/tree";
   import { Popover } from "bits-ui";
   import { buttonVariants } from "../button-variants.js";
   import { cn } from "../utils.js";
 
-  import { untrack } from "svelte";
-  import { INITIAL_FEN } from "@connectorvol/chessops/fen";
-  import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
-  import { Color, DEFAULT_PIECE_SET, type Move } from "@connectorvol/shared";
+  import { Color } from "@connectorvol/shared";
 
-  import {
-    createEmptyTreeFromFen,
-    type PuzzleData,
-  } from "../puzzle/puzzleData.js";
-  import {
-    puzzlePreviewClassifySolverMove,
-    puzzlePreviewDupSubtreeUnderStudentCursor,
-    puzzlePreviewIsSolvedPosition,
-    puzzlePreviewSideToMoveFromFen,
-    puzzlePreviewNodeAtPath,
-    type TSolverMoveOutcome,
-  } from "../puzzle/puzzleStepPreviewSolver.js";
+  import type { PuzzleData } from "../puzzle/puzzleData.js";
   import {
     puzzlePartsFromFullPgn,
     type TPuzzleCreatedPayload,
   } from "../puzzle/puzzleCreatedPayload.js";
+  import { PREVIEW_WRONG_NO_VARIANT_MESSAGE } from "../puzzle/puzzlePreviewConstants.js";
+  import PuzzlePgnBoardTreeEditor from "./PuzzlePgnBoardTreeEditor.svelte";
   import type { TChessboardAppearanceSettings } from "./types.js";
 
-  /** Сообщение «нет такого продолжения» показывается только через кнопку «!» в шапке (как на шаге 2). */
-  const PREVIEW_WRONG_NO_VARIANT_MESSAGE =
-    "Такого продолжения нет среди вариантов задачи.";
-
   interface Props {
     /** Возвращает данные задачи (стартовый FEN и главная линия SAN для совместимости). */
     puzzleData: PuzzleData;
@@ -73,366 +41,8 @@
       : Color.WHITE,
   );
 
-  let cursorPath = $state<number[]>([]);
-  let solved = $state(false);
   let wrongFeedback = $state<string | null>(null);
-
-  /** Высота блока с шахматной доской (px), чтобы выровнять высоту TreeViewer по доске на lg. */
-  let chessboardBlockHeight = $state(0);
-
-  let wrongRevealTimer: ReturnType<typeof setTimeout> | null = null;
-  let advanceLineTimer: ReturnType<typeof setTimeout> | null = null;
-
-  let previewChess = new PgnOps(INITIAL_FEN, "chess");
-
-  const studentPreviewTree = new ChessTree(createEmptyTreeFromFen(INITIAL_FEN));
-
-  let solutionPreviewTree = $state<ChessTree | null>(null);
-
-  /**
-   * Представляет синхронизацию доступности перетаскивания фигур с очередью хода и состоянием «решено».
-   */
-  function syncBoardDragFromChessTurn(): void {
-    chessboard.draggable = solved
-      ? Draggable.NONE
-      : previewChess.turn() === solverColor
-        ? solverColor === Color.WHITE
-          ? Draggable.WHITE
-          : Draggable.BLACK
-        : Draggable.NONE;
-  }
-
-  /**
-   * Представляет добавление (если отсутствует) пути в TreeViewer ученика без очистки уже пройденных линий.
-   */
-  function ensureStudentPreviewTreeHasPath(path: number[]): void {
-    const solution = solutionPreviewTree;
-    if (!solution) return;
-
-    studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
-
-    let src = solution.rootNode.moves;
-    for (const idx of path) {
-      const next = src.children[idx];
-      studentPreviewTree.addNodeToCurrent({
-        id: "",
-        children: [],
-        data: { ...next.data },
-      });
-      src = next;
-    }
-  }
-
-  /**
-   * Представляет обработку ошибочного хода с показом неверной ветки или сообщения без варианта.
-   */
-  function handleWrongOutcome(outcome: TSolverMoveOutcome): void {
-    const solution = solutionPreviewTree;
-    if (!solution) return;
-
-    if (wrongRevealTimer !== null) {
-      clearTimeout(wrongRevealTimer);
-      wrongRevealTimer = null;
-    }
-    if (advanceLineTimer !== null) {
-      clearTimeout(advanceLineTimer);
-      advanceLineTimer = null;
-    }
-
-    if (outcome.kind === "wrong_marked_variant") {
-      wrongFeedback =
-        "Неверно. Открываю введённый вариант в дереве, ход отменён.";
-      // Ход на доске не применяется (мы возвращаем undefined), но в TreeViewer
-      // добавляем ветку неверного ответа, чтобы её можно было изучить.
-      ensureStudentPreviewTreeHasPath(cursorPath);
-      puzzlePreviewDupSubtreeUnderStudentCursor(
-        studentPreviewTree,
-        outcome.wrongBranchRoot,
-      );
-      return;
-    }
-
-    wrongFeedback = PREVIEW_WRONG_NO_VARIANT_MESSAGE;
-  }
-
-  /**
-   * Представляет установку позиции и дерева по пути из корня.
-   */
-  function setStateFromPath(path: number[]): void {
-    const solution = solutionPreviewTree;
-    if (!solution) return;
-
-    previewChess.setFen(props.puzzleData.initialFen);
-    let node = solution.rootNode.moves;
-    for (const idx of path) {
-      const child = node.children[idx]!;
-      previewChess.makeSanMove(child.data.san);
-      node = child;
-    }
-
-    cursorPath = path;
-    ensureStudentPreviewTreeHasPath(cursorPath);
-    chessboard.fen = previewChess.fen();
-    syncBoardDragFromChessTurn();
-  }
-
-  /**
-   * Представляет автоматический ход соперника по основной линии (первый вариант), если сейчас ход соперника.
-   * Возвращает новый путь.
-   */
-  function applyOpponentMainLineMove(pathAfterSolver: number[]): number[] {
-    const solution = solutionPreviewTree;
-    if (!solution) return pathAfterSolver;
-
-    if (puzzlePreviewSideToMoveFromFen(previewChess.fen()) === solverColor) {
-      return pathAfterSolver;
-    }
-
-    const node = puzzlePreviewNodeAtPath(
-      solution.rootNode.moves,
-      pathAfterSolver,
-    );
-    if (node.children.length === 0) return pathAfterSolver;
-
-    previewChess.makeSanMove(node.children[0]!.data.san);
-    return [...pathAfterSolver, 0];
-  }
-
-  /**
-   * Представляет поиск следующей линии по развилкам соперника (DFS: чем глубже развилка — тем раньше возврат).
-   */
-  function findNextOpponentLine(path: number[]): number[] | null {
-    const solution = solutionPreviewTree;
-    if (!solution) return null;
-
-    let node = solution.rootNode.moves;
-    for (let depth = 0; depth <= path.length; depth++) {
-      // depth === path.length соответствует текущей позиции (узел node)
-      const sideToMove = puzzlePreviewSideToMoveFromFen(node.data.fen);
-      const isOpponentToMove = sideToMove !== solverColor;
-      const isFork = node.children.length > 1;
-
-      if (isOpponentToMove && isFork && depth < path.length) {
-        const chosenIdx = path[depth]!;
-        if (chosenIdx < node.children.length - 1) {
-          // кандидат на "следующую линию" с этого форка
-          // но продолжаем вниз, чтобы взять самый глубокий
-        }
-      }
-
-      if (depth === path.length) break;
-      node = node.children[path[depth]!]!;
-    }
-
-    // Второй проход: выбираем самый глубокий форк соперника, где есть непройденные ответы.
-    node = solution.rootNode.moves;
-    let bestForkDepth: number | null = null;
-    let bestNextIdx = 0;
-    for (let depth = 0; depth < path.length; depth++) {
-      const sideToMove = puzzlePreviewSideToMoveFromFen(node.data.fen);
-      const isOpponentToMove = sideToMove !== solverColor;
-      if (isOpponentToMove && node.children.length > 1) {
-        const chosenIdx = path[depth]!;
-        if (chosenIdx < node.children.length - 1) {
-          bestForkDepth = depth;
-          bestNextIdx = chosenIdx + 1;
-        }
-      }
-      node = node.children[path[depth]!]!;
-    }
-
-    if (bestForkDepth === null) return null;
-    return [...path.slice(0, bestForkDepth), bestNextIdx];
-  }
-
-  /**
-   * Представляет переход на следующую линию (следующий ответ соперника), если она есть.
-   */
-  function maybeAdvanceToNextOpponentLine(): boolean {
-    const nextBase = findNextOpponentLine(cursorPath);
-    if (!nextBase) return false;
-
-    solved = false;
-    wrongFeedback = null;
-
-    // После выбора нового ответа соперника нужно довести позицию до актуальной точки:
-    // ставим состояние на basePath (до хода соперника), затем делаем выбранный ход соперника (он уже в пути).
-    setStateFromPath(nextBase);
-    return true;
-  }
-
-  /**
-   * Представляет попытку применить SAN хода решателя с автответами соперника по дереву.
-   */
-  function tryApplySolverSan(san: string): Move | undefined {
-    const solution = solutionPreviewTree;
-    if (!solution || solved) return undefined;
-
-    const cursorNode = puzzlePreviewNodeAtPath(
-      solution.rootNode.moves,
-      cursorPath,
-    );
-
-    const outcome = puzzlePreviewClassifySolverMove(
-      cursorNode,
-      previewChess.fen(),
-      san,
-      solverColor,
-    );
-
-    if (outcome.kind !== "correct") {
-      handleWrongOutcome(outcome);
-      return undefined;
-    }
-
-    try {
-      let path = [...cursorPath, outcome.childIndex];
-      const moveRecord = previewChess.makeSanMove(san);
-      path = applyOpponentMainLineMove(path);
-      setStateFromPath(path);
-
-      const leaf = puzzlePreviewNodeAtPath(solution.rootNode.moves, cursorPath);
-      if (puzzlePreviewIsSolvedPosition(previewChess, leaf, solverColor)) {
-        solved = true;
-        if (advanceLineTimer !== null) {
-          clearTimeout(advanceLineTimer);
-          advanceLineTimer = null;
-        }
-        advanceLineTimer = setTimeout(() => {
-          // Если есть ещё линии по развилкам соперника — переключаемся на следующую.
-          if (maybeAdvanceToNextOpponentLine()) {
-            // продолжаем в режиме решения
-          }
-          advanceLineTimer = null;
-        }, 250);
-      }
-
-      wrongFeedback = null;
-      syncBoardDragFromChessTurn();
-
-      return moveRecord;
-    } catch {
-      wrongFeedback = "Ход недопустим в этой позиции.";
-      return undefined;
-    }
-  }
-
-  const actions: IChessBoardActions = {
-    game: {
-      possibleMovesOnSquare: (square: Square) => previewChess.moves(square),
-      beforePieceMoveSan(san: string) {
-        const move = tryApplySolverSan(san);
-        if (!move) return undefined;
-        return {
-          move,
-          fen: previewChess.fen(),
-          turn: previewChess.turn(),
-        };
-      },
-      afterPieceMoveSan: () => {
-        syncBoardDragFromChessTurn();
-      },
-      beforePieceMove: (from, to, promotion) => {
-        const san = previewChess.getSanForMove({ from, to, promotion });
-        const move = tryApplySolverSan(san);
-        if (!move) return "";
-        return previewChess.fen();
-      },
-      afterPieceMove: () => {
-        syncBoardDragFromChessTurn();
-      },
-    },
-  };
-
-  let chessboard = $derived(
-    createBoardApi({
-      fen: INITIAL_FEN,
-      settings: {
-        ...DEFAULT_BOARD_SETTINGS,
-        ...(props.boardAppearanceSettings ?? {}),
-        boardSize: 38,
-        isResizable: false,
-        orientation: Color.WHITE,
-        draggable: Draggable.WHITE,
-      },
-      actions,
-      theme: props.boardTheme ?? CHESSBOARD_THEMES.blue,
-    }),
-  );
-
-  $effect(() => {
-    const pgn = props.solutionPgn;
-    const initialFen = props.puzzleData.initialFen;
-    const orientation = solverColor;
-
-    if (!pgn.trim()) {
-      untrack(() => {
-        solutionPreviewTree = null;
-        previewChess.setFen(initialFen);
-        studentPreviewTree.replaceRootTree(createEmptyTreeFromFen(initialFen));
-        studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
-        chessboard.fen = initialFen;
-        chessboard.orientation = orientation;
-        syncBoardDragFromChessTurn();
-      });
-      return () => {
-        if (wrongRevealTimer !== null) {
-          clearTimeout(wrongRevealTimer);
-          wrongRevealTimer = null;
-        }
-        if (advanceLineTimer !== null) {
-          clearTimeout(advanceLineTimer);
-          advanceLineTimer = null;
-        }
-      };
-    }
-
-    untrack(() => {
-      const { rootNode } = transformPgnToChessNode(pgn);
-      solutionPreviewTree = new ChessTree(rootNode);
-
-      cursorPath = [];
-      solved = false;
-      wrongFeedback = null;
-      previewChess.setFen(initialFen);
-      studentPreviewTree.replaceRootTree(createEmptyTreeFromFen(initialFen));
-      studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
-      chessboard.fen = initialFen;
-      chessboard.orientation = orientation;
-      syncBoardDragFromChessTurn();
-    });
-
-    return () => {
-      if (wrongRevealTimer !== null) {
-        clearTimeout(wrongRevealTimer);
-        wrongRevealTimer = null;
-      }
-      if (advanceLineTimer !== null) {
-        clearTimeout(advanceLineTimer);
-        advanceLineTimer = null;
-      }
-    };
-  });
-
-  /**
-   * Представляет заглушку синхронизации движка при выборе узла в дереве превью (доска решается отдельно).
-   */
-  function noopChessFen(_fen: string): void {}
-
-  /**
-   * Представляет заглушку обновления доски TreeViewer на шаге превью.
-   */
-  function noopChessboardFen(_animationTime?: number): void {}
-
-  /**
-   * Представляет пустые колбэки навигации TreeViewer без побочных эффектов.
-   */
-  function noopOnSelectNode(): void {}
-
-  /**
-   * Представляет пустой колбэк после удаления варианта в TreeViewer.
-   */
-  function noopOnDeleteVariant(): void {}
+  let solved = $state(false);
 </script>
 
 <div class="flex flex-col gap-3 pt-2 pb-0">
@@ -523,48 +133,14 @@
     {/if}
   </div>
 
-  <div
-    class="flex min-h-0 flex-col justify-center gap-4 lg:flex-row lg:items-start lg:gap-4"
-  >
-    <div class="flex w-full max-w-[38rem] shrink-0 flex-col gap-2">
-      <div class="w-full shrink-0" bind:clientHeight={chessboardBlockHeight}>
-        <Chessboard facade={chessboard} />
-      </div>
-      {#if wrongFeedback && wrongFeedback !== PREVIEW_WRONG_NO_VARIANT_MESSAGE}
-        <p class="text-sm font-medium text-amber-600 dark:text-amber-400">
-          {wrongFeedback}
-        </p>
-      {/if}
-    </div>
-
-    <div class="flex min-h-0 w-full flex-1 flex-col gap-2 lg:min-w-0">
-      <div
-        class={cn(
-          "flex min-w-0 flex-col overflow-hidden rounded-md border border-border",
-          chessboardBlockHeight > 0
-            ? "min-h-0 shrink-0"
-            : "min-h-[12rem] max-h-[min(65vh,36rem)]",
-        )}
-        style:height={chessboardBlockHeight > 0
-          ? `${chessboardBlockHeight}px`
-          : undefined}
-      >
-        <TreeViewer
-          chessTree={solved && solutionPreviewTree
-            ? solutionPreviewTree
-            : studentPreviewTree}
-          onSelectNode={noopOnSelectNode}
-          onDeleteVariant={noopOnDeleteVariant}
-          setChessFen={noopChessFen}
-          setChessboardFen={noopChessboardFen}
-          pieceSet={DEFAULT_PIECE_SET}
-          className="min-h-0 flex-1 border-x-0 border-t-0"
-          editMode={false}
-          selectable={false}
-        />
-      </div>
-    </div>
-  </div>
+  <PuzzlePgnBoardTreeEditor
+    bind:wrongFeedback
+    bind:solved
+    pgn={props.solutionPgn}
+    fen={props.puzzleData.initialFen}
+    boardTheme={props.boardTheme}
+    boardAppearanceSettings={props.boardAppearanceSettings}
+  />
 
   <div class="flex justify-between gap-2">
     <button

package/dist/puzzle-creation/StepPreview.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ChessboardTheme } from "@connectorvol/chessboard";
-import { type PuzzleData } from "../puzzle/puzzleData.js";
+import type { PuzzleData } from "../puzzle/puzzleData.js";
 import { type TPuzzleCreatedPayload } from "../puzzle/puzzleCreatedPayload.js";
 import type { TChessboardAppearanceSettings } from "./types.js";
 interface Props {

package/dist/puzzle-creation/createPuzzleLineEditingBoard.d.ts

@@ -0,0 +1,16 @@
+import type { ChessboardTheme } from "@connectorvol/chessboard";
+import { type IChessBoardActions } from "@connectorvol/chessboard";
+import { Color } from "@connectorvol/shared";
+import type { TChessboardAppearanceSettings } from "./types.js";
+/**
+ * Представляет определение стороны хода по полному FEN.
+ */
+export declare function sideToMoveFromFullFen(fullFen: string): Color;
+/**
+ * Представляет создание API доски для интерактивного построения линии (как в мастере задач):
+ * ориентация и перетаскивание по стороне хода, фиксированный размер доски.
+ */
+export declare function createPuzzleLineEditingBoardApi(fullFen: string, actions: IChessBoardActions, opts?: {
+    boardTheme?: ChessboardTheme;
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
+}): import("@connectorvol/chessboard").BoardApi;

package/dist/puzzle-creation/createPuzzleLineEditingBoard.js

@@ -0,0 +1,31 @@
+import { CHESSBOARD_THEMES, createBoardApi, DEFAULT_BOARD_SETTINGS, Draggable, } from "@connectorvol/chessboard";
+import { Color } from "@connectorvol/shared";
+import { DEFAULT_EDITABLE_BOARD_SETTINGS } from "../constants/editable-board-settings.js";
+/**
+ * Представляет определение стороны хода по полному FEN.
+ */
+export function sideToMoveFromFullFen(fullFen) {
+    const token = fullFen.trim().split(/\s+/)[1];
+    return token === "b" ? Color.BLACK : Color.WHITE;
+}
+/**
+ * Представляет создание API доски для интерактивного построения линии (как в мастере задач):
+ * ориентация и перетаскивание по стороне хода, фиксированный размер доски.
+ */
+export function createPuzzleLineEditingBoardApi(fullFen, actions, opts = {}) {
+    const side = sideToMoveFromFullFen(fullFen);
+    const { boardSize: _boardSize, orientation: _orientation, draggable: _draggable, ...appearanceSettings } = (opts.boardAppearanceSettings ?? {});
+    return createBoardApi({
+        fen: fullFen,
+        settings: {
+            ...DEFAULT_BOARD_SETTINGS,
+            ...appearanceSettings,
+            boardSize: DEFAULT_EDITABLE_BOARD_SETTINGS.boardSize,
+            isResizable: false,
+            orientation: side,
+            draggable: side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK,
+        },
+        actions,
+        theme: opts.boardTheme ?? CHESSBOARD_THEMES.blue,
+    });
+}

package/dist/puzzle-creation/types.d.ts

@@ -4,6 +4,48 @@ import type { ChessBoardSettings, ChessboardTheme } from "@connectorvol/chessboa
  * Представляет тип визуальных настроек шахматной доски для мастера создания задачи.
  */
 export type TChessboardAppearanceSettings = Omit<Partial<ChessBoardSettings>, "boardSize" | "orientation" | "draggable">;
+/**
+ * Представляет исход решения или ошибки в превью задачи для колбэка `onOutcome`.
+ */
+export type TPuzzlePgnBoardTreeEditorOutcome = "solved" | "failed";
+/**
+ * Представляет свойства компонента превью «до решения видно только пройденные ходы»:
+ * доска для решателя и TreeViewer без режима правки (как шаг 3 мастера создания задачи).
+ */
+export interface TPuzzlePgnBoardTreeEditorProps {
+    /**
+     * Возвращает полный FEN стартовой позиции задачи (обязателен для согласованности с деревом; если не задан — начальная позиция классических шахмат).
+     */
+    fen?: string;
+    /**
+     * Возвращает текст партии: только ходы или полный PGN; заголовки внутри строки при сборке дерева игнорируются в пользу пропа `fen`.
+     */
+    pgn?: string;
+    /**
+     * Возвращает колбэк при ошибке хода (`failed`) или когда пройдены все обязательные линии превью по развилкам соперника (`solved`), как кнопка «Готово» на шаге 3 мастера.
+     */
+    onOutcome?: (result: TPuzzlePgnBoardTreeEditorOutcome) => void;
+    /**
+     * Возвращает текст ошибки превью для подписи под доской или индикатора «!» у родителя (двухсторонняя привязка).
+     */
+    wrongFeedback?: string | null;
+    /**
+     * Возвращает признак «все линии превью пройдены» — полное дерево решения на экране, как перед «Готово» в мастере (двухсторонняя привязка).
+     */
+    solved?: boolean;
+    /**
+     * Возвращает тему оформления шахматной доски (по умолчанию `CHESSBOARD_THEMES.blue`).
+     */
+    boardTheme?: ChessboardTheme;
+    /**
+     * Возвращает дополнительные визуальные настройки шахматной доски (кроме `boardSize`, `orientation`, `draggable`).
+     */
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
+    /**
+     * Возвращает дополнительные классы Tailwind для корневого контейнера раскладки.
+     */
+    class?: string;
+}
 /**
  * Представляет свойства компонента мастера создания шахматной задачи.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectorvol/chess-widgets",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -40,10 +40,10 @@
     "test": ""
   },
   "dependencies": {
-    "@connectorvol/chessboard": "2.2.0",
-    "@connectorvol/chessops": "2.0.3",
-    "@connectorvol/shared": "2.1.2",
-    "@connectorvol/tree": "3.0.0",
+    "@connectorvol/chessboard": "4.0.0",
+    "@connectorvol/chessops": "3.0.0",
+    "@connectorvol/shared": "4.0.0",
+    "@connectorvol/tree": "4.0.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "3.3.1",
     "tailwind-variants": "3.1.1"
@@ -51,6 +51,7 @@
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "4.5.1",
     "@lucide/svelte": "^0.553.0",
+    "bits-ui": "2.16.4",
     "@sveltejs/adapter-static": "3.0.10",
     "@sveltejs/kit": "2.48.0",
     "@sveltejs/package": "2.4.0",