@connectorvol/chess-widgets 1.0.0 → 1.1.0

package/dist/puzzle-creation/PuzzlePgnBoardTreeEditor.svelte

@@ -0,0 +1,487 @@
+<script lang="ts" module>
+  export type {
+    TPuzzlePgnBoardTreeEditorOutcome,
+    TPuzzlePgnBoardTreeEditorProps,
+  } from "./types.js";
+</script>
+
+<script lang="ts">
+  import type { IChessBoardActions } from "@connectorvol/chessboard";
+  import type { Square } from "@connectorvol/shared";
+
+  import {
+    CHESSBOARD_THEMES,
+    createBoardApi,
+    DEFAULT_BOARD_SETTINGS,
+    Draggable,
+    syncMoveEvaluationNagBadge,
+  } from "@connectorvol/chessboard";
+  import {
+    ChessTree,
+    transformPgnToChessNode,
+  } from "@connectorvol/tree";
+  import { untrack } from "svelte";
+
+  import { INITIAL_FEN } from "@connectorvol/chessops/fen";
+  import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+  import { Color, type Move } 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 {
+    puzzlePreviewClassifySolverMove,
+    puzzlePreviewDupSubtreeUnderStudentCursor,
+    puzzlePreviewIsSolvedPosition,
+    puzzlePreviewNodeAtPath,
+    puzzlePreviewSideToMoveFromFen,
+    type TSolverMoveOutcome,
+  } from "../puzzle/puzzleStepPreviewSolver.js";
+  import PuzzleBoardTreeViewerPane from "./PuzzleBoardTreeViewerPane.svelte";
+  import { cn } from "../utils.js";
+  import type { TPuzzlePgnBoardTreeEditorProps } from "./types.js";
+
+  let {
+    pgn = "",
+    fen: fenProp,
+    onOutcome,
+    boardTheme,
+    boardAppearanceSettings,
+    class: className,
+    wrongFeedback = $bindable<string | null>(null),
+    solved = $bindable(false),
+  }: TPuzzlePgnBoardTreeEditorProps = $props();
+
+  /** Корень превью: синхронизируется с эффектом смены PGN/FEN. */
+  let layoutInitialFen = $state(INITIAL_FEN);
+
+  /**
+   * Представляет цвет стороны решателя по текущему корню превью (`layoutInitialFen`).
+   */
+  function puzzleSolverColor(): Color {
+    return layoutInitialFen.trim().split(/\s+/)[1] === "b"
+      ? Color.BLACK
+      : Color.WHITE;
+  }
+
+  let cursorPath = $state<number[]>([]);
+
+  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 {
+    const solver = puzzleSolverColor();
+    chessboard.draggable = solved
+      ? Draggable.NONE
+      : previewChess.turn() === solver
+        ? solver === Color.WHITE
+          ? Draggable.WHITE
+          : Draggable.BLACK
+        : Draggable.NONE;
+  }
+
+  /**
+   * Представляет добавление пути в дерево ученика без очистки уже пройденных линий.
+   */
+  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 =
+        "Неверно. Открываю введённый вариант в дереве, ход отменён.";
+      onOutcome?.("failed");
+      ensureStudentPreviewTreeHasPath(cursorPath);
+      puzzlePreviewDupSubtreeUnderStudentCursor(
+        studentPreviewTree,
+        outcome.wrongBranchRoot,
+      );
+      return;
+    }
+
+    wrongFeedback = PREVIEW_WRONG_NO_VARIANT_MESSAGE;
+    onOutcome?.("failed");
+  }
+
+  /**
+   * Представляет установку позиции и дерева ученика по пути из корня.
+   */
+  function setStateFromPath(path: number[]): void {
+    const solution = solutionPreviewTree;
+    if (!solution) return;
+
+    previewChess.setFen(layoutInitialFen);
+    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()) === puzzleSolverColor()) {
+      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;
+
+    const solver = puzzleSolverColor();
+
+    let node = solution.rootNode.moves;
+    for (let depth = 0; depth <= path.length; depth++) {
+      const sideToMove = puzzlePreviewSideToMoveFromFen(node.data.fen);
+      const isOpponentToMove = sideToMove !== solver;
+      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 !== solver;
+      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;
+
+    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,
+      puzzleSolverColor(),
+    );
+
+    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, puzzleSolverColor())) {
+        if (advanceLineTimer !== null) {
+          clearTimeout(advanceLineTimer);
+          advanceLineTimer = null;
+        }
+        advanceLineTimer = setTimeout(() => {
+          const advanced = maybeAdvanceToNextOpponentLine();
+          if (!advanced) {
+            solved = true;
+            onOutcome?.("solved");
+          }
+          syncBoardDragFromChessTurn();
+          advanceLineTimer = null;
+        }, 250);
+      }
+
+      wrongFeedback = null;
+      syncBoardDragFromChessTurn();
+
+      return moveRecord;
+    } catch {
+      wrongFeedback = "Ход недопустим в этой позиции.";
+      onOutcome?.("failed");
+      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,
+        ...(boardAppearanceSettings ?? {}),
+        boardSize: 38,
+        isResizable: false,
+        orientation: Color.WHITE,
+        draggable: Draggable.WHITE,
+      },
+      actions,
+      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;
+    tree.currentNode = puzzlePreviewNodeAtPath(tree.rootNode.moves, path);
+  });
+
+  $effect(() => {
+    const trimmedPgn = pgn.trim();
+    const rootFen = fenProp?.trim() ? fenProp.trim() : INITIAL_FEN;
+
+    if (!trimmedPgn) {
+      untrack(() => {
+        layoutInitialFen = rootFen;
+        solutionPreviewTree = null;
+        previewChess.setFen(rootFen);
+        studentPreviewTree.replaceRootTree(createEmptyTreeFromFen(rootFen));
+        studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
+        chessboard.fen = rootFen;
+        chessboard.orientation =
+          rootFen.trim().split(/\s+/)[1] === "b"
+            ? Color.BLACK
+            : Color.WHITE;
+        cursorPath = [];
+        solved = false;
+        wrongFeedback = null;
+        syncBoardDragFromChessTurn();
+      });
+      return () => clearTimers();
+    }
+
+    untrack(() => {
+      const fullPgn = mergePgnWithSetupFen(trimmedPgn, rootFen);
+      const { rootNode } = transformPgnToChessNode(fullPgn);
+
+      layoutInitialFen = rootFen;
+      solutionPreviewTree = new ChessTree(rootNode);
+
+      cursorPath = [];
+      solved = false;
+      wrongFeedback = null;
+      previewChess.setFen(rootFen);
+      studentPreviewTree.replaceRootTree(createEmptyTreeFromFen(rootFen));
+      studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
+      chessboard.fen = rootFen;
+      chessboard.orientation =
+        rootFen.trim().split(/\s+/)[1] === "b" ? Color.BLACK : Color.WHITE;
+      syncBoardDragFromChessTurn();
+    });
+
+    return () => clearTimers();
+  });
+
+  /**
+   * Представляет сброс отложенных таймеров превью.
+   */
+  function clearTimers(): void {
+    if (wrongRevealTimer !== null) {
+      clearTimeout(wrongRevealTimer);
+      wrongRevealTimer = null;
+    }
+    if (advanceLineTimer !== null) {
+      clearTimeout(advanceLineTimer);
+      advanceLineTimer = null;
+    }
+  }
+
+  /**
+   * Представляет синхронизацию доски с текущим узлом полного дерева решения (после `solved`).
+   */
+  function syncBoardFromSolutionTreeNode(): void {
+    const tree = solutionPreviewTree;
+    if (!tree || !solved) return;
+    previewChess.setFen(tree.currentNode.data.fen);
+    chessboard.fen = previewChess.fen();
+    chessboard.addLastMove(tree.currentNode.data.lastMove ?? null);
+    syncMoveEvaluationNagBadge(chessboard, tree.currentNode.data);
+  }
+
+  /**
+   * Представляет установку FEN движка при навигации по дереву (только после полного решения превью).
+   */
+  function treeSetChessFen(fen: string): void {
+    if (!solved) return;
+    previewChess.setFen(fen);
+  }
+
+  /**
+   * Представляет обновление UI доски после смены узла в дереве решения.
+   */
+  function treeSetChessboardFen(_animationTime?: number): void {
+    if (!solved) return;
+    syncBoardFromSolutionTreeNode();
+  }
+
+  /**
+   * Представляет реакцию на выбор узла в дереве (клик по ходу после решения).
+   */
+  function treeOnSelectNode(): void {
+    if (!solved) return;
+    syncBoardFromSolutionTreeNode();
+  }
+
+  /**
+   * Представляет синхронизацию доски после операций с вариантами (в режиме просмотра без правки не используется).
+   */
+  function treeOnDeleteVariant(): void {
+    if (!solved) return;
+    syncBoardFromSolutionTreeNode();
+  }
+</script>
+
+<div class={["flex flex-col gap-2", className]}>
+  <PuzzleBoardTreeViewerPane
+    {chessboard}
+    chessTree={treeForViewer}
+    onSelectNode={treeOnSelectNode}
+    onDeleteVariant={treeOnDeleteVariant}
+    setChessFen={treeSetChessFen}
+    setChessboardFen={treeSetChessboardFen}
+    editMode={false}
+    selectable={solved}
+  >
+    {#snippet belowChessboard()}
+      {#if wrongFeedback && wrongFeedback !== PREVIEW_WRONG_NO_VARIANT_MESSAGE}
+        <p class="text-sm font-medium text-amber-600 dark:text-amber-400">
+          {wrongFeedback}
+        </p>
+      {/if}
+    {/snippet}
+  </PuzzleBoardTreeViewerPane>
+</div>

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

@@ -0,0 +1,5 @@
+export type { TPuzzlePgnBoardTreeEditorOutcome, TPuzzlePgnBoardTreeEditorProps, } from "./types.js";
+import type { TPuzzlePgnBoardTreeEditorProps } from "./types.js";
+declare const PuzzlePgnBoardTreeEditor: import("svelte").Component<TPuzzlePgnBoardTreeEditorProps, {}, "solved" | "wrongFeedback">;
+type PuzzlePgnBoardTreeEditor = ReturnType<typeof PuzzlePgnBoardTreeEditor>;
+export default PuzzlePgnBoardTreeEditor;

package/dist/puzzle-creation/StepMoves.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import type { BoardApi } from "@connectorvol/chessboard";
 
-  import { Chessboard, Draggable } from "@connectorvol/chessboard";
-  import { ChessTree, TreeViewer } from "@connectorvol/tree";
-  import { Color, DEFAULT_PIECE_SET } from "@connectorvol/shared";
+  import { Draggable } from "@connectorvol/chessboard";
+  import type { ChessTree } from "@connectorvol/tree";
+
+  import { Color } from "@connectorvol/shared";
   import { Popover } from "bits-ui";
+
   import { buttonVariants } from "../button-variants.js";
+  import PuzzleBoardTreeViewerPane from "./PuzzleBoardTreeViewerPane.svelte";
   import { cn } from "../utils.js";
 
   import type { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
@@ -75,9 +78,6 @@
     return null;
   });
 
-  /** Высота блока с шахматной доской (px) для выравнивания панели TreeViewer по высоте доски на lg. */
-  let chessboardBlockHeight = $state(0);
-
   function handleNext() {
     if (canProceedToNextStep) {
       onNext(mainLine);
@@ -170,40 +170,14 @@
     {/if}
   </div>
 
-  <div
-    class="relative flex min-h-0 flex-col justify-center 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>
-    </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={tree}
-          {onSelectNode}
-          {onDeleteVariant}
-          {setChessFen}
-          {setChessboardFen}
-          pieceSet={DEFAULT_PIECE_SET}
-          className="min-h-0 flex-1 border-x-0 border-t-0"
-          editMode={true}
-        />
-      </div>
-    </div>
-  </div>
+  <PuzzleBoardTreeViewerPane
+    {chessboard}
+    chessTree={tree}
+    {onSelectNode}
+    {onDeleteVariant}
+    {setChessFen}
+    {setChessboardFen}
+  />
 
   <div class="flex justify-between">
     <button

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

@@ -1,5 +1,5 @@
 import type { BoardApi } from "@connectorvol/chessboard";
-import { ChessTree } from "@connectorvol/tree";
+import type { ChessTree } from "@connectorvol/tree";
 import type { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
 import { type PuzzleData } from "../puzzle/puzzleData.js";
 interface Props {

package/dist/puzzle-creation/StepPosition.svelte

@@ -29,15 +29,15 @@
   const props: Props = $props();
 
   /** Настройки доски мастера задачи: фиксированный размер, без ручного resize. */
-  const puzzleStepBoardSettings = {
+  const puzzleStepBoardSettings = $derived({
     ...DEFAULT_EDITABLE_BOARD_SETTINGS,
     ...(props.boardAppearanceSettings ?? {}),
     boardSize: 29,
     isResizable: false,
     editSettings: DEFAULT_EDITABLE_BOARD_SETTINGS.editSettings,
-  };
+  });
 
-  let chessboard = $state(
+  let chessboard = $derived(
     createBoardApi({
       fen: (() => props.initialFen)(),
       settings: puzzleStepBoardSettings,
@@ -46,7 +46,7 @@
   );
 
   /** Один объект Fen на доску: `$derived(new Fen(...))` пересоздавал бы класс при смене orientation и сбрасывал бы «Установить ход». */
-  const fen = new Fen(chessboard);
+  const fen = $derived(new Fen(chessboard));
 
   /**
    * Представляет подстановку полей FEN (ход, рокировка, счётчики) из строки родителя при смене стартовой позиции.