@connectorvol/chess-widgets 1.0.0

package/dist/puzzle/puzzleStepPreviewSolver.js

@@ -0,0 +1,87 @@
+import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+import { Color, PUZZLE_BRANCH_WRONG_NAG_ID } from "@connectorvol/shared";
+/**
+ * Представляет извлечение стороны, имеющей ход, из полной строки FEN.
+ */
+export function puzzlePreviewSideToMoveFromFen(fullFen) {
+    const token = fullFen.trim().split(/\s+/)[1];
+    return token === "b" ? Color.BLACK : Color.WHITE;
+}
+/**
+ * Представляет получение узла дерева по пути индексов детей от корня партии.
+ */
+export function puzzlePreviewNodeAtPath(rootMoves, path) {
+    let node = rootMoves;
+    for (const idx of path) {
+        node = node.children[idx];
+    }
+    return node;
+}
+/**
+ * Представляет поиск индекса ребёнка, чей SAN даёт ту же результирующую позицию, что и сыгранный SAN.
+ */
+export function puzzlePreviewFindChildIndexForPlayedSan(cursorFen, children, playedSan) {
+    const playedProbe = new PgnOps(cursorFen, "chess");
+    try {
+        playedProbe.makeSanMove(playedSan);
+    }
+    catch {
+        return -1;
+    }
+    const playedResultFen = playedProbe.fen();
+    for (let i = 0; i < children.length; i++) {
+        const childProbe = new PgnOps(cursorFen, "chess");
+        try {
+            childProbe.makeSanMove(children[i].data.san);
+            if (childProbe.fen() === playedResultFen) {
+                return i;
+            }
+        }
+        catch {
+            continue;
+        }
+    }
+    return -1;
+}
+/**
+ * Представляет классификацию хода решателя на развилке (или на единственном продолжении).
+ */
+export function puzzlePreviewClassifySolverMove(cursorNode, cursorFen, playedSan, solverColor) {
+    const children = cursorNode.children;
+    const idx = puzzlePreviewFindChildIndexForPlayedSan(cursorFen, children, playedSan);
+    if (idx < 0) {
+        return { kind: "no_matching_variant" };
+    }
+    const child = children[idx];
+    const mover = puzzlePreviewSideToMoveFromFen(cursorFen);
+    const isSolverFork = children.length > 1 && mover === solverColor;
+    if (isSolverFork) {
+        const nags = child.data.nags ?? [];
+        if (nags.includes(PUZZLE_BRANCH_WRONG_NAG_ID)) {
+            return { kind: "wrong_marked_variant", wrongBranchRoot: child };
+        }
+    }
+    return { kind: "correct", childIndex: idx };
+}
+/**
+ * Представляет проверку: линия закончилась ключевым ходом решателя (ход соперника, лист дерева).
+ */
+export function puzzlePreviewIsSolvedPosition(previewChess, leafNode, solverColor) {
+    return (leafNode.children.length === 0 &&
+        puzzlePreviewSideToMoveFromFen(previewChess.fen()) !== solverColor);
+}
+/**
+ * Представляет рекурсивное клонирование поддерева варианта под текущим узлом студенческого дерева (новые id обеспечивает ChessTree.addNodeToCurrent).
+ */
+export function puzzlePreviewDupSubtreeUnderStudentCursor(studentTree, sourceNode) {
+    studentTree.addNodeToCurrent({
+        id: "",
+        children: [],
+        data: { ...sourceNode.data },
+    });
+    const anchor = studentTree.currentNode;
+    for (const ch of sourceNode.children) {
+        puzzlePreviewDupSubtreeUnderStudentCursor(studentTree, ch);
+        studentTree.currentNode = anchor;
+    }
+}

package/dist/puzzle-creation/PuzzleCreationWizard.svelte

@@ -0,0 +1,247 @@
+<script lang="ts" module>
+  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 });
+        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) {
+    const side = sideToMoveFromFullFen(fullFen);
+    const {
+      boardSize: _boardSize,
+      orientation: _orientation,
+      draggable: _draggable,
+      ...appearanceSettings
+    } = (boardAppearanceSettings ?? {}) as Record<string, unknown> & {
+      boardSize?: unknown;
+      orientation?: unknown;
+      draggable?: unknown;
+    };
+    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 = "";
+    });
+  });
+
+  function handlePositionNext(fen: string) {
+    puzzleData.initialFen = fen;
+    chess = new PgnOps(fen, "chess");
+    tree = new ChessTree(createEmptyTreeFromFen(fen));
+    chessboard = createMainChessboard(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>
+
+    {#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/PuzzleCreationWizard.svelte.d.ts

@@ -0,0 +1,5 @@
+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 default PuzzleCreationWizard;

package/dist/puzzle-creation/StepMoves.svelte

@@ -0,0 +1,225 @@
+<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 { Popover } from "bits-ui";
+  import { buttonVariants } from "../button-variants.js";
+  import { cn } from "../utils.js";
+
+  import type { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+  import {
+    getMainLineFromTree,
+    type PuzzleData,
+  } from "../puzzle/puzzleData.js";
+  import { validatePuzzleSolverForkAnnotations } from "../puzzle/puzzleSolverForkAnnotations.js";
+
+  interface Props {
+    puzzleData: PuzzleData;
+    onBack: () => void;
+    onNext: (moves: string[]) => void;
+    chess: PgnOps;
+    tree: ChessTree;
+    chessboard: BoardApi;
+  }
+
+  const { puzzleData, onBack, onNext, chess, tree, chessboard }: Props =
+    $props();
+
+  const initialTurn = $derived(
+    puzzleData.initialFen.trim().split(/\s+/)[1] === "b"
+      ? Color.BLACK
+      : Color.WHITE,
+  );
+
+  const mainLine = $derived(getMainLineFromTree(tree.rootNode));
+
+  function setChessFen(fen: string) {
+    chess.setFen(fen);
+  }
+
+  function setChessboardFen(_animationTime?: number) {
+    chessboard.fen = chess.fen();
+    const side = chess.turn();
+    chessboard.draggable =
+      side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
+  }
+
+  function onSelectNode() {
+    setChessFen(tree.currentNode.data.fen);
+    setChessboardFen();
+  }
+
+  function onDeleteVariant() {
+    setChessFen(tree.currentNode.data.fen);
+    setChessboardFen();
+  }
+
+  const canGoNext = $derived(mainLine.length >= 1 && mainLine.length % 2 === 1);
+
+  const solverForkAnnotations = $derived(
+    validatePuzzleSolverForkAnnotations(tree, initialTurn),
+  );
+
+  const canProceedToNextStep = $derived(canGoNext && solverForkAnnotations.ok);
+
+  /** Текст предупреждения по шагу для кнопки «!» (если пусто — предупреждений нет). */
+  const stepIssueMessage = $derived.by(() => {
+    if (!canGoNext && mainLine.length > 0) {
+      return `Последний ход должна сделать сторона, которая начинала. Добавьте ещё один ход за ${initialTurn === Color.WHITE ? "белых" : "чёрных"}.`;
+    }
+    if (canGoNext && !solverForkAnnotations.ok) {
+      return solverForkAnnotations.reason;
+    }
+    return null;
+  });
+
+  /** Высота блока с шахматной доской (px) для выравнивания панели TreeViewer по высоте доски на lg. */
+  let chessboardBlockHeight = $state(0);
+
+  function handleNext() {
+    if (canProceedToNextStep) {
+      onNext(mainLine);
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-3 pt-2 pb-0">
+  <div class="flex flex-wrap items-center gap-2">
+    <h2 class="text-xl font-semibold">Шаг 2: Построение линии решения</h2>
+    <Popover.Root>
+      <Popover.Trigger type="button">
+        {#snippet child({ props })}
+          <button
+            {...props}
+            type="button"
+            class={cn(
+              buttonVariants({ variant: "outline", size: "icon-sm" }),
+              "size-7 shrink-0 rounded-full text-sm font-semibold",
+            )}
+            aria-label="Справка: построение линии решения"
+          >
+            ?
+          </button>
+        {/snippet}
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          side="bottom"
+          align="start"
+          sideOffset={8}
+          class={cn(
+            "bg-popover text-popover-foreground border-border z-50 max-h-[min(70vh,32rem)] w-[min(calc(100vw-2rem),28rem)] overflow-y-auto rounded-lg border p-4 text-sm shadow-md outline-none",
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          )}
+        >
+          <p class="text-muted-foreground leading-relaxed">
+            Делайте ходы за обе стороны. Последний ход должна сделать сторона,
+            которая начинала игру (ключевой ход). В дереве можно выбирать ходы,
+            добавлять комментарии и символы оценки в режиме правки. Если от
+            позиции решателя есть несколько вариантов хода, у каждого обязательно
+            отметьте ✓ или ✗ в блоке «Задача (развилка)» под деревом (эти метки
+            только для ходов из развилки, не для единственного продолжения).
+            После ✓ главный вариант нужно довести до позиции, где последним
+            походил решатель. Если несколько ответов соперника ведут из одной
+            позиции, каждая такая линия должна заканчиваться ходом решателя (это не
+            требуется внутри продолжения после хода решателя с меткой ✗
+            «неверное решение»). Ниже по этой линии метки ✓ и ✗ не ставятся.
+          </p>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+    {#if stepIssueMessage}
+      <Popover.Root>
+        <Popover.Trigger type="button">
+          {#snippet child({ props })}
+            <button
+              {...props}
+              type="button"
+              class={cn(
+                buttonVariants({ variant: "outline", size: "icon-sm" }),
+                "size-7 shrink-0 rounded-full border-amber-600/60 text-sm font-semibold text-amber-600 dark:border-amber-400/60 dark:text-amber-400",
+              )}
+              aria-label="Предупреждение по условиям шага"
+            >
+              !
+            </button>
+          {/snippet}
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            side="bottom"
+            align="start"
+            sideOffset={8}
+            class={cn(
+              "bg-popover text-popover-foreground border-border z-50 max-h-[min(70vh,32rem)] w-[min(calc(100vw-2rem),28rem)] overflow-y-auto rounded-lg border p-4 text-sm shadow-md outline-none",
+              "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+              "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+            )}
+          >
+            <p
+              class="leading-relaxed text-amber-700 dark:text-amber-400"
+            >
+              {stepIssueMessage}
+            </p>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    {/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>
+
+  <div class="flex justify-between">
+    <button
+      type="button"
+      class={cn(buttonVariants({ variant: "outline" }))}
+      onclick={onBack}
+    >
+      Назад
+    </button>
+    <button
+      type="button"
+      class={cn(buttonVariants({ variant: "default" }))}
+      onclick={handleNext}
+      disabled={!canProceedToNextStep}
+    >
+      Далее
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+import type { BoardApi } from "@connectorvol/chessboard";
+import { ChessTree } from "@connectorvol/tree";
+import type { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+import { type PuzzleData } from "../puzzle/puzzleData.js";
+interface Props {
+    puzzleData: PuzzleData;
+    onBack: () => void;
+    onNext: (moves: string[]) => void;
+    chess: PgnOps;
+    tree: ChessTree;
+    chessboard: BoardApi;
+}
+declare const StepMoves: import("svelte").Component<Props, {}, "">;
+type StepMoves = ReturnType<typeof StepMoves>;
+export default StepMoves;