@connectorvol/chess-widgets 8.0.1 → 9.0.0

package/dist/puzzle-creation/PuzzleCreationWizard.svelte

@@ -1,212 +1,202 @@
 <script lang="ts" module>
-    export type { TPuzzleCreationWizardProps } from "./types.js";
+  export type { TPuzzleCreationWizardProps } from "./types.js";
+  export type {
+    TPuzzleWizardCoreState,
+    TPuzzleWizardState,
+  } from "./puzzleWizardState.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;
+<script lang="ts" generics="S extends TPuzzleWizardCoreState">
+  import type { Snippet } from "svelte";
+
+  import { Wizard } from "@connectorvol/shared";
+  import type { TWizardStep, TWizardStepContext } from "@connectorvol/shared";
+  import StepMoves from "./StepMoves.svelte";
+  import StepPosition from "./StepPosition.svelte";
+  import StepPreview from "./StepPreview.svelte";
+  import type { TPuzzleCreatedPayload } from "../puzzle/puzzleCreatedPayload.js";
+  import type { TPuzzleWizardCoreState } from "./puzzleWizardState.js";
+  import { PUZZLE_WIZARD_CORE_STEPS } from "./puzzleWizardState.js";
+  import { createEmptyTreeFromFen } from "../puzzle/puzzleData.js";
+  import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+  import { ChessTree, createPgnFromTree } from "@connectorvol/tree";
+  import {
+    CHESSBOARD_THEMES,
+    Draggable,
+    type ChessboardTheme,
+    type IChessBoardActions,
+  } from "@connectorvol/chessboard";
+  import { calculatePly, Color, Square } from "@connectorvol/shared";
+
+  import { createPuzzleLineEditingBoardApi } from "./createPuzzleLineEditingBoard.js";
+  import { syncPuzzleBranchNagsOnTree } from "../puzzle/syncPuzzleBranchNags.js";
+  import { DEFAULT_BOARD_APPEARANCE_SETTINGS } from "../constants/default-board-appearance-settings.js";
+  import type { TChessboardAppearanceSettings } from "./types.js";
+
+  interface Props {
+    /** Возвращает общий state визарда (двухсторонняя привязка). */
+    wizardState: S;
+    /** Возвращает колбэк завершения с шага превью без доп. шагов. */
+    onPuzzleCreated: (payload: TPuzzleCreatedPayload) => void;
+    /** Возвращает колбэк завершения с доп. шага (`wizard.done()`). */
+    onDone?: (state: S) => void;
+    /** Возвращает seed FEN для сброса шага визарда при изменении. */
+    fen?: string;
+    /** Возвращает тему оформления шахматной доски. */
+    boardTheme?: ChessboardTheme;
+    /** Возвращает визуальные настройки доски. */
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
+    /** Возвращает дополнительные шаги после превью. */
+    additionalSteps?: readonly TWizardStep[];
+    /** Возвращает snippet дополнительных шагов. */
+    additionalStep?: Snippet<[TWizardStepContext<S>]>;
+  }
+
+  let {
+    wizardState = $bindable(),
+    onPuzzleCreated,
+    onDone,
+    fen: fenProp,
+    boardTheme,
+    boardAppearanceSettings = DEFAULT_BOARD_APPEARANCE_SETTINGS,
+    additionalSteps = [],
+    additionalStep,
+  }: Props = $props();
+
+  const hasAdditionalSteps = $derived(additionalSteps.length > 0);
+  const steps = $derived([...PUZZLE_WIZARD_CORE_STEPS, ...additionalSteps]);
+
+  let chess = $derived(
+    new PgnOps(wizardState.puzzleData.initialFen, "chess"),
+  );
+  let tree = $derived(
+    new ChessTree(createEmptyTreeFromFen(wizardState.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 });
         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 });
-                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 = "";
+          id: "",
+          children: [],
+          data: {
+            fen,
+            san,
+            ply: halfMoves,
+            fullMoves,
+          },
         });
+        return fen;
+      },
+      afterPieceMove: () => {
+        const side = chess.turn();
+        chessboardApi.draggable =
+          side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
+      },
+    },
+  };
+
+  /**
+   * Представляет сборку доски для шага построения линии: позиция и ориентация по стороне хода в FEN.
+   */
+  function createMainChessboard(fullFen: string) {
+    return createPuzzleLineEditingBoardApi(fullFen, actions, {
+      boardTheme: boardTheme ?? CHESSBOARD_THEMES.blue,
+      boardAppearanceSettings,
     });
-
-    function handlePositionNext(fen: string) {
-        puzzleData.initialFen = fen;
-        step = 2;
-    }
+  }
+
+  let chessboard = $derived(
+    createMainChessboard(wizardState.puzzleData.initialFen),
+  );
+  let chessboardApi = $derived(chessboard.api);
+  let chessboardDesign = $derived(chessboard.design);
+
+  /**
+   * Представляет переход со шага построения линии на превью.
+   */
+  function handleMovesNext(moves: string[]) {
+    wizardState.puzzleData.moves = moves;
+    syncPuzzleBranchNagsOnTree(
+      tree,
+      wizardState.puzzleData.initialFen.trim().split(/\s+/)[1] === "b"
+        ? Color.BLACK
+        : Color.WHITE,
+    );
+    wizardState.solutionPgn = createPgnFromTree(tree.rootNode);
+  }
 </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>
-
-        {#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>
-</div>
+<Wizard
+  bind:wizardState={wizardState}
+  {steps}
+  resetSignal={fenProp}
+  {onDone}
+>
+  {#snippet children(w)}
+    {#if w.currentStep === 1}
+      <StepPosition
+        initialFen={w.state.puzzleData.initialFen}
+        onNext={(fen) => {
+          w.state.puzzleData.initialFen = fen;
+          w.next();
+        }}
+        {boardTheme}
+        {boardAppearanceSettings}
+      />
+    {:else if w.currentStep === 2}
+      <StepMoves
+        puzzleData={w.state.puzzleData}
+        {chess}
+        {tree}
+        chessboard={chessboardApi}
+        {chessboardDesign}
+        onBack={w.back}
+        onNext={(moves) => {
+          handleMovesNext(moves);
+          w.next();
+        }}
+      />
+    {:else if w.currentStep === 3}
+      <StepPreview
+        puzzleData={w.state.puzzleData}
+        solutionPgn={w.state.solutionPgn}
+        onBack={w.back}
+        onNext={hasAdditionalSteps ? w.next : undefined}
+        onPuzzleCreated={hasAdditionalSteps ? undefined : onPuzzleCreated}
+        {boardTheme}
+        {boardAppearanceSettings}
+      />
+    {:else if additionalStep}
+      {@render additionalStep(w)}
+    {/if}
+  {/snippet}
+</Wizard>

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

@@ -1,5 +1,49 @@
 export type { TPuzzleCreationWizardProps } from "./types.js";
-import type { TPuzzleCreationWizardProps } from "./types.js";
-declare const PuzzleCreationWizard: import("svelte").Component<TPuzzleCreationWizardProps, {}, "">;
-type PuzzleCreationWizard = ReturnType<typeof PuzzleCreationWizard>;
+export type { TPuzzleWizardCoreState, TPuzzleWizardState, } from "./puzzleWizardState.js";
+import type { Snippet } from "svelte";
+import type { TWizardStep, TWizardStepContext } from "@connectorvol/shared";
+import type { TPuzzleCreatedPayload } from "../puzzle/puzzleCreatedPayload.js";
+import type { TPuzzleWizardCoreState } from "./puzzleWizardState.js";
+import { type ChessboardTheme } from "@connectorvol/chessboard";
+import type { TChessboardAppearanceSettings } from "./types.js";
+declare function $$render<S extends TPuzzleWizardCoreState>(): {
+    props: {
+        /** Возвращает общий state визарда (двухсторонняя привязка). */
+        wizardState: S;
+        /** Возвращает колбэк завершения с шага превью без доп. шагов. */
+        onPuzzleCreated: (payload: TPuzzleCreatedPayload) => void;
+        /** Возвращает колбэк завершения с доп. шага (`wizard.done()`). */
+        onDone?: (state: S) => void;
+        /** Возвращает seed FEN для сброса шага визарда при изменении. */
+        fen?: string;
+        /** Возвращает тему оформления шахматной доски. */
+        boardTheme?: ChessboardTheme;
+        /** Возвращает визуальные настройки доски. */
+        boardAppearanceSettings?: TChessboardAppearanceSettings;
+        /** Возвращает дополнительные шаги после превью. */
+        additionalSteps?: readonly TWizardStep[];
+        /** Возвращает snippet дополнительных шагов. */
+        additionalStep?: Snippet<[TWizardStepContext<S>]>;
+    };
+    exports: {};
+    bindings: "wizardState";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S extends TPuzzleWizardCoreState> {
+    props(): ReturnType<typeof $$render<S>>['props'];
+    events(): ReturnType<typeof $$render<S>>['events'];
+    slots(): ReturnType<typeof $$render<S>>['slots'];
+    bindings(): "wizardState";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S extends TPuzzleWizardCoreState>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S>['props']>, ReturnType<__sveltets_Render<S>['events']>, ReturnType<__sveltets_Render<S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S>['bindings']>;
+    } & ReturnType<__sveltets_Render<S>['exports']>;
+    <S extends TPuzzleWizardCoreState>(internal: unknown, props: ReturnType<__sveltets_Render<S>['props']> & {}): ReturnType<__sveltets_Render<S>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PuzzleCreationWizard: $$IsomorphicComponent;
+type PuzzleCreationWizard<S extends TPuzzleWizardCoreState> = InstanceType<typeof PuzzleCreationWizard<S>>;
 export default PuzzleCreationWizard;