@connectorvol/chess-widgets 1.0.0 → 1.2.0

package/dist/puzzle-creation/PuzzleCreationWizard.svelte

@@ -1,247 +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 { DEFAULT_EDITABLE_BOARD_SETTINGS } from "../constants/editable-board-settings.js";
-  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,
-    createBoardApi,
-    DEFAULT_BOARD_SETTINGS,
-    Draggable,
-    type IChessBoardActions,
-  } from "@connectorvol/chessboard";
-  import { calculatePly, Color, Square } from "@connectorvol/shared";
-
-  const {
-    onPuzzleCreated,
-    fen: fenProp,
-    boardTheme,
-    boardAppearanceSettings,
-  }: TPuzzleCreationWizardProps = $props();
-
-  /**
-   * Представляет нормализацию входного FEN из пропса (пустая строка трактуется как отсутствие значения).
-   */
-  function wizardSeedFen(prop: string | undefined): string | undefined {
-    const t = prop?.trim();
-    return t ? t : undefined;
-  }
-
-  /**
-   * Представляет извлечение признака стороны, имеющей ход, из полной строки FEN.
-   */
-  function sideToMoveFromFullFen(fullFen: string): Color {
-    const token = fullFen.trim().split(/\s+/)[1];
-    return token === "b" ? Color.BLACK : Color.WHITE;
-  }
-
-  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 fen;
-      },
-      afterPieceMove: () => {
-        const side = chess.turn();
-        chessboard.draggable =
-          side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
-      },
-    },
-  };
-
-  /**
-   * Представляет сборку доски для шага построения линии: позиция и ориентация по стороне хода в FEN.
-   */
-  function createMainChessboard(fullFen: string) {
-    const side = sideToMoveFromFullFen(fullFen);
-    const {
-      boardSize: _boardSize,
-      orientation: _orientation,
-      draggable: _draggable,
-      ...appearanceSettings
-    } = (boardAppearanceSettings ?? {}) as Record<string, unknown> & {
-      boardSize?: unknown;
-      orientation?: unknown;
-      draggable?: unknown;
+        return { move, fen, turn: chess.turn() };
     };
-    return createBoardApi({
-      fen: fullFen,
-      settings: {
-        ...DEFAULT_BOARD_SETTINGS,
-        ...(appearanceSettings as typeof DEFAULT_BOARD_SETTINGS),
-        boardSize: DEFAULT_EDITABLE_BOARD_SETTINGS.boardSize,
-        isResizable: false,
-        orientation: side,
-        draggable: side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK,
-      },
-      actions,
-      theme: boardTheme ?? CHESSBOARD_THEMES.blue,
-    });
-  }
-
-  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 = "";
+
+    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 = "";
+        });
     });
-  });
-
-  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>