@connectorvol/chess-widgets 1.1.0 → 1.2.0

package/dist/puzzle-creation/PuzzleCreationWizard.svelte

@@ -1,214 +1,212 @@
 <script lang="ts" module>
-  export type { TPuzzleCreationWizardProps } from "./types.js";
+    export type { TPuzzleCreationWizardProps } from "./types.js";
 </script>
 
 <script lang="ts">
-  import { untrack } from "svelte";
-
-  import StepMoves from "./StepMoves.svelte";
-  import StepPosition from "./StepPosition.svelte";
-  import StepPreview from "./StepPreview.svelte";
-  import type { TPuzzleCreationWizardProps } from "./types.js";
-  import {
-    createEmptyTreeFromFen,
-    createInitialPuzzleData,
-    type PuzzleData,
-  } from "../puzzle/puzzleData.js";
-  import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
-  import { ChessTree, createPgnFromTree } from "@connectorvol/tree";
-  import { CHESSBOARD_THEMES, Draggable, type IChessBoardActions } from "@connectorvol/chessboard";
-  import { calculatePly, Color, Square } from "@connectorvol/shared";
-
-  import { createPuzzleLineEditingBoardApi } from "./createPuzzleLineEditingBoard.js";
-
-  const {
-    onPuzzleCreated,
-    fen: fenProp,
-    boardTheme,
-    boardAppearanceSettings,
-  }: TPuzzleCreationWizardProps = $props();
-
-  /**
-   * Представляет нормализацию входного FEN из пропса (пустая строка трактуется как отсутствие значения).
-   */
-  function wizardSeedFen(prop: string | undefined): string | undefined {
-    const t = prop?.trim();
-    return t ? t : undefined;
-  }
-
-  let step = $state<1 | 2 | 3>(1);
-  let puzzleData = $derived<PuzzleData>(
-    createInitialPuzzleData(wizardSeedFen(fenProp)),
-  );
-
-  /** Возвращает PGN дерева решения для превью на шаге 3. */
-  let solutionPgnForPreview = $state("");
-
-  function handleMovesBack() {
-    step = 1;
-  }
-
-  function handleMovesNext(moves: string[]) {
-    puzzleData.moves = moves;
-    solutionPgnForPreview = createPgnFromTree(tree.rootNode);
-    step = 3;
-  }
-
-  function handlePreviewBack() {
-    step = 2;
-  }
-
-  let chess = $derived(new PgnOps(puzzleData.initialFen, "chess"));
-  let tree = $derived(
-    new ChessTree(createEmptyTreeFromFen(puzzleData.initialFen)),
-  );
-  const addMoveToTree = (san: string) => {
-    const move = chess.makeSanMove(san);
-    if (!move) return;
-    const fen = chess.fen();
-    const { halfMoves, fullMoves } = calculatePly(fen);
-    tree.addNodeToCurrent({
-      id: "",
-      children: [],
-      data: {
-        fen,
-        san,
-        ply: halfMoves,
-        fullMoves,
-      },
-    });
-    return { move, fen, turn: chess.turn() };
-  };
-
-  const actions: IChessBoardActions = {
-    game: {
-      possibleMovesOnSquare: (square: Square) => chess.moves(square),
-      beforePieceMoveSan(san: string) {
-        const result = addMoveToTree(san);
-        return result;
-      },
-      afterPieceMoveSan: () => {},
-      beforePieceMove: (from, to, promotion) => {
-        const san = chess.getSanForMove({ from, to, promotion });
-        chess.makeMove({ from, to, promotion });
+    import { untrack } from "svelte";
+
+    import StepMoves from "./StepMoves.svelte";
+    import StepPosition from "./StepPosition.svelte";
+    import StepPreview from "./StepPreview.svelte";
+    import type { TPuzzleCreationWizardProps } from "./types.js";
+    import {
+        createEmptyTreeFromFen,
+        createInitialPuzzleData,
+        type PuzzleData,
+    } from "../puzzle/puzzleData.js";
+    import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+    import { ChessTree, createPgnFromTree } from "@connectorvol/tree";
+    import {
+        CHESSBOARD_THEMES,
+        Draggable,
+        type IChessBoardActions,
+    } from "@connectorvol/chessboard";
+    import { calculatePly, Color, Square } from "@connectorvol/shared";
+
+    import { createPuzzleLineEditingBoardApi } from "./createPuzzleLineEditingBoard.js";
+
+    const {
+        onPuzzleCreated,
+        fen: fenProp,
+        boardTheme,
+        boardAppearanceSettings,
+    }: TPuzzleCreationWizardProps = $props();
+
+    /**
+     * Представляет нормализацию входного FEN из пропса (пустая строка трактуется как отсутствие значения).
+     */
+    function wizardSeedFen(prop: string | undefined): string | undefined {
+        const t = prop?.trim();
+        return t ? t : undefined;
+    }
+
+    let step = $state<1 | 2 | 3>(1);
+    let puzzleData = $state<PuzzleData>(
+        createInitialPuzzleData(wizardSeedFen(fenProp)),
+    );
+
+    /** Возвращает PGN дерева решения для превью на шаге 3. */
+    let solutionPgnForPreview = $state("");
+
+    function handleMovesBack() {
+        step = 1;
+    }
+
+    function handleMovesNext(moves: string[]) {
+        puzzleData.moves = moves;
+        solutionPgnForPreview = createPgnFromTree(tree.rootNode);
+        step = 3;
+    }
+
+    function handlePreviewBack() {
+        step = 2;
+    }
+
+    let chess = $derived(new PgnOps(puzzleData.initialFen, "chess"));
+    let tree = $derived(
+        new ChessTree(createEmptyTreeFromFen(puzzleData.initialFen)),
+    );
+    const addMoveToTree = (san: string) => {
+        const move = chess.makeSanMove(san);
+        if (!move) return;
         const fen = chess.fen();
         const { halfMoves, fullMoves } = calculatePly(fen);
         tree.addNodeToCurrent({
-          id: "",
-          children: [],
-          data: {
-            fen,
-            san,
-            ply: halfMoves,
-            fullMoves,
-          },
+            id: "",
+            children: [],
+            data: {
+                fen,
+                san,
+                ply: halfMoves,
+                fullMoves,
+            },
+        });
+        return { move, fen, turn: chess.turn() };
+    };
+
+    const actions: IChessBoardActions = {
+        game: {
+            possibleMovesOnSquare: (square: Square) => chess.moves(square),
+            beforePieceMoveSan(san: string) {
+                const result = addMoveToTree(san);
+                return result;
+            },
+            afterPieceMoveSan: () => {},
+            beforePieceMove: (from, to, promotion) => {
+                const san = chess.getSanForMove({ from, to, promotion });
+                chess.makeMove({ from, to, promotion });
+                const fen = chess.fen();
+                const { halfMoves, fullMoves } = calculatePly(fen);
+                tree.addNodeToCurrent({
+                    id: "",
+                    children: [],
+                    data: {
+                        fen,
+                        san,
+                        ply: halfMoves,
+                        fullMoves,
+                    },
+                });
+                return fen;
+            },
+            afterPieceMove: () => {
+                const side = chess.turn();
+                chessboard.draggable =
+                    side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
+            },
+        },
+    };
+
+    /**
+     * Представляет сборку доски для шага построения линии: позиция и ориентация по стороне хода в FEN.
+     */
+    function createMainChessboard(fullFen: string) {
+        return createPuzzleLineEditingBoardApi(fullFen, actions, {
+            boardTheme: boardTheme ?? CHESSBOARD_THEMES.blue,
+            boardAppearanceSettings,
+        });
+    }
+
+    let chessboard = $derived(createMainChessboard(puzzleData.initialFen));
+
+    /**
+     * Представляет сброс мастера при смене входного FEN извне (шаг 1 и черновик ходов обнуляются).
+     */
+    $effect(() => {
+        const seed = wizardSeedFen(fenProp);
+        const next = createInitialPuzzleData(seed);
+        untrack(() => {
+            puzzleData = next;
+            step = 1;
+            solutionPgnForPreview = "";
         });
-        return fen;
-      },
-      afterPieceMove: () => {
-        const side = chess.turn();
-        chessboard.draggable =
-          side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
-      },
-    },
-  };
-
-  /**
-   * Представляет сборку доски для шага построения линии: позиция и ориентация по стороне хода в FEN.
-   */
-  function createMainChessboard(fullFen: string) {
-    return createPuzzleLineEditingBoardApi(fullFen, actions, {
-      boardTheme: boardTheme ?? CHESSBOARD_THEMES.blue,
-      boardAppearanceSettings,
-    });
-  }
-
-  let chessboard = $derived(createMainChessboard(puzzleData.initialFen));
-
-  /**
-   * Представляет сброс мастера при смене входного FEN извне (шаг 1 и черновик ходов обнуляются).
-   */
-  $effect(() => {
-    const seed = wizardSeedFen(fenProp);
-    const next = createInitialPuzzleData(seed);
-    untrack(() => {
-      puzzleData = next;
-      chess = new PgnOps(next.initialFen, "chess");
-      tree = new ChessTree(createEmptyTreeFromFen(next.initialFen));
-      chessboard = createMainChessboard(next.initialFen);
-      step = 1;
-      solutionPgnForPreview = "";
     });
-  });
-
-  function handlePositionNext(fen: string) {
-    puzzleData.initialFen = fen;
-    chess = new PgnOps(fen, "chess");
-    tree = new ChessTree(createEmptyTreeFromFen(fen));
-    chessboard = createMainChessboard(fen);
-    step = 2;
-  }
+
+    function handlePositionNext(fen: string) {
+        puzzleData.initialFen = fen;
+        step = 2;
+    }
 </script>
 
 <div class="mx-4 lg:container lg:mx-auto">
-  <div class="flex flex-col gap-4 pt-4 pb-0">
-    <div class="flex items-center gap-2">
-      <span
-        class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
-        class:bg-primary={step >= 1}
-        class:bg-muted={step < 1}
-        class:text-primary-foreground={step >= 1}
-      >
-        1
-      </span>
-      <span class="text-sm">Позиция</span>
-      <span class="h-px flex-1 bg-border"></span>
-      <span
-        class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
-        class:bg-primary={step >= 2}
-        class:bg-muted={step < 2}
-        class:text-primary-foreground={step >= 2}
-      >
-        2
-      </span>
-      <span class="text-sm">Ходы</span>
-      <span class="h-px flex-1 bg-border"></span>
-      <span
-        class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
-        class:bg-primary={step >= 3}
-        class:bg-muted={step < 3}
-        class:text-primary-foreground={step >= 3}
-      >
-        3
-      </span>
-      <span class="text-sm">Превью</span>
+    <div class="flex flex-col gap-4 pt-4 pb-0">
+        <div class="flex items-center gap-2">
+            <span
+                class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
+                class:bg-primary={step >= 1}
+                class:bg-muted={step < 1}
+                class:text-primary-foreground={step >= 1}
+            >
+                1
+            </span>
+            <span class="text-sm">Позиция</span>
+            <span class="h-px flex-1 bg-border"></span>
+            <span
+                class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
+                class:bg-primary={step >= 2}
+                class:bg-muted={step < 2}
+                class:text-primary-foreground={step >= 2}
+            >
+                2
+            </span>
+            <span class="text-sm">Ходы</span>
+            <span class="h-px flex-1 bg-border"></span>
+            <span
+                class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
+                class:bg-primary={step >= 3}
+                class:bg-muted={step < 3}
+                class:text-primary-foreground={step >= 3}
+            >
+                3
+            </span>
+            <span class="text-sm">Превью</span>
+        </div>
+
+        {#if step === 1}
+            <StepPosition
+                initialFen={puzzleData.initialFen}
+                onNext={handlePositionNext}
+                {boardTheme}
+                {boardAppearanceSettings}
+            />
+        {:else if step === 2}
+            <StepMoves
+                {puzzleData}
+                {chess}
+                {tree}
+                {chessboard}
+                onBack={handleMovesBack}
+                onNext={handleMovesNext}
+            />
+        {:else}
+            <StepPreview
+                {puzzleData}
+                solutionPgn={solutionPgnForPreview}
+                onBack={handlePreviewBack}
+                {onPuzzleCreated}
+                {boardTheme}
+                {boardAppearanceSettings}
+            />
+        {/if}
     </div>
-
-    {#if step === 1}
-      <StepPosition
-        initialFen={puzzleData.initialFen}
-        onNext={handlePositionNext}
-        {boardTheme}
-        boardAppearanceSettings={boardAppearanceSettings}
-      />
-    {:else if step === 2}
-      <StepMoves
-        {puzzleData}
-        {chess}
-        {tree}
-        {chessboard}
-        onBack={handleMovesBack}
-        onNext={handleMovesNext}
-      />
-    {:else}
-      <StepPreview
-        {puzzleData}
-        solutionPgn={solutionPgnForPreview}
-        onBack={handlePreviewBack}
-        {onPuzzleCreated}
-        {boardTheme}
-        boardAppearanceSettings={boardAppearanceSettings}
-      />
-    {/if}
-  </div>
 </div>

package/dist/puzzle-creation/PuzzlePgnBoardTreeEditor.svelte

@@ -24,7 +24,7 @@
 
   import { INITIAL_FEN } from "@connectorvol/chessops/fen";
   import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
-  import { Color, type Move } from "@connectorvol/shared";
+  import { Color, calculatePly, type Move } from "@connectorvol/shared";
 
   import { mergePgnWithSetupFen } from "../puzzle/mergePgnWithSetupFen.js";
   import { createEmptyTreeFromFen } from "../puzzle/puzzleData.js";
@@ -81,7 +81,9 @@
   function syncBoardDragFromChessTurn(): void {
     const solver = puzzleSolverColor();
     chessboard.draggable = solved
-      ? Draggable.NONE
+      ? previewChess.turn() === Color.WHITE
+        ? Draggable.WHITE
+        : Draggable.BLACK
       : previewChess.turn() === solver
         ? solver === Color.WHITE
           ? Draggable.WHITE
@@ -101,6 +103,7 @@
     let src = solution.rootNode.moves;
     for (const idx of path) {
       const next = src.children[idx];
+      if (!next) break;
       studentPreviewTree.addNodeToCurrent({
         id: "",
         children: [],
@@ -152,7 +155,8 @@
     previewChess.setFen(layoutInitialFen);
     let node = solution.rootNode.moves;
     for (const idx of path) {
-      const child = node.children[idx]!;
+      const child = node.children[idx];
+      if (!child) break;
       previewChess.makeSanMove(child.data.san);
       node = child;
     }
@@ -178,7 +182,7 @@
       solution.rootNode.moves,
       pathAfterSolver,
     );
-    if (node.children.length === 0) return pathAfterSolver;
+    if (!node || node.children.length === 0) return pathAfterSolver;
 
     previewChess.makeSanMove(node.children[0]!.data.san);
     return [...pathAfterSolver, 0];
@@ -207,7 +211,9 @@
       }
 
       if (depth === path.length) break;
-      node = node.children[path[depth]!]!;
+      const child = node.children[path[depth]!];
+      if (!child) break;
+      node = child;
     }
 
     node = solution.rootNode.moves;
@@ -223,7 +229,9 @@
           bestNextIdx = chosenIdx + 1;
         }
       }
-      node = node.children[path[depth]!]!;
+      const child = node.children[path[depth]!];
+      if (!child) break;
+      node = child;
     }
 
     if (bestForkDepth === null) return null;
@@ -255,6 +263,7 @@
       solution.rootNode.moves,
       cursorPath,
     );
+    if (!cursorNode) return undefined;
 
     const outcome = puzzlePreviewClassifySolverMove(
       cursorNode,
@@ -275,7 +284,7 @@
       setStateFromPath(path);
 
       const leaf = puzzlePreviewNodeAtPath(solution.rootNode.moves, cursorPath);
-      if (puzzlePreviewIsSolvedPosition(previewChess, leaf, puzzleSolverColor())) {
+      if (leaf && puzzlePreviewIsSolvedPosition(previewChess, leaf, puzzleSolverColor())) {
         if (advanceLineTimer !== null) {
           clearTimeout(advanceLineTimer);
           advanceLineTimer = null;
@@ -306,6 +315,31 @@
     game: {
       possibleMovesOnSquare: (square: Square) => previewChess.moves(square),
       beforePieceMoveSan(san: string) {
+        if (solved) {
+          try {
+            const move = previewChess.makeSanMove(san);
+            const fen = previewChess.fen();
+            const { halfMoves, fullMoves } = calculatePly(fen);
+            solutionPreviewTree?.addNodeToCurrent({
+              id: "",
+              children: [],
+              data: {
+                fen,
+                san,
+                ply: halfMoves,
+                fullMoves,
+                lastMove: move,
+              },
+            });
+            return {
+              move,
+              fen,
+              turn: previewChess.turn(),
+            };
+          } catch {
+            return undefined;
+          }
+        }
         const move = tryApplySolverSan(san);
         if (!move) return undefined;
         return {
@@ -318,6 +352,28 @@
         syncBoardDragFromChessTurn();
       },
       beforePieceMove: (from, to, promotion) => {
+        if (solved) {
+          try {
+            const san = previewChess.getSanForMove({ from, to, promotion });
+            const move = previewChess.makeSanMove(san);
+            const fen = previewChess.fen();
+            const { halfMoves, fullMoves } = calculatePly(fen);
+            solutionPreviewTree?.addNodeToCurrent({
+              id: "",
+              children: [],
+              data: {
+                fen,
+                san,
+                ply: halfMoves,
+                fullMoves,
+                lastMove: move,
+              },
+            });
+            return fen;
+          } catch {
+            return "";
+          }
+        }
         const san = previewChess.getSanForMove({ from, to, promotion });
         const move = tryApplySolverSan(san);
         if (!move) return "";
@@ -357,7 +413,8 @@
     if (!solved || !solutionPreviewTree) return;
     const tree = solutionPreviewTree;
     const path = cursorPath;
-    tree.currentNode = puzzlePreviewNodeAtPath(tree.rootNode.moves, path);
+    const target = puzzlePreviewNodeAtPath(tree.rootNode.moves, path);
+    tree.currentNode = target ?? tree.rootNode.moves;
   });
 
   $effect(() => {
@@ -430,6 +487,7 @@
     chessboard.fen = previewChess.fen();
     chessboard.addLastMove(tree.currentNode.data.lastMove ?? null);
     syncMoveEvaluationNagBadge(chessboard, tree.currentNode.data);
+    syncBoardDragFromChessTurn();
   }
 
   /**