@connectorvol/chess-widgets 1.0.0

package/dist/puzzle-creation/StepPosition.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+
+  import {
+    Chessboard,
+    CHESSBOARD_THEMES,
+    createBoardApi,
+    type ChessboardTheme,
+  } from "@connectorvol/chessboard";
+
+  import { DEFAULT_EDITABLE_BOARD_SETTINGS } from "../constants/editable-board-settings.js";
+  import EditFen from "../position-editor/EditFen.svelte";
+  import EditMove from "../position-editor/EditMove.svelte";
+  import EditPanel from "../position-editor/EditPanel.svelte";
+  import { Fen } from "../position-editor/fen.svelte.js";
+  import { Popover } from "bits-ui";
+  import { buttonVariants } from "../button-variants.js";
+  import { cn } from "../utils.js";
+  import { Color } from "@connectorvol/shared";
+  import type { TChessboardAppearanceSettings } from "./types.js";
+
+  interface Props {
+    initialFen: string;
+    onNext: (fen: string) => void;
+    boardTheme?: ChessboardTheme;
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
+  }
+
+  const props: Props = $props();
+
+  /** Настройки доски мастера задачи: фиксированный размер, без ручного resize. */
+  const puzzleStepBoardSettings = {
+    ...DEFAULT_EDITABLE_BOARD_SETTINGS,
+    ...(props.boardAppearanceSettings ?? {}),
+    boardSize: 29,
+    isResizable: false,
+    editSettings: DEFAULT_EDITABLE_BOARD_SETTINGS.editSettings,
+  };
+
+  let chessboard = $state(
+    createBoardApi({
+      fen: (() => props.initialFen)(),
+      settings: puzzleStepBoardSettings,
+      theme: props.boardTheme ?? CHESSBOARD_THEMES.blue,
+    }),
+  );
+
+  /** Один объект Fen на доску: `$derived(new Fen(...))` пересоздавал бы класс при смене orientation и сбрасывал бы «Установить ход». */
+  const fen = new Fen(chessboard);
+
+  /**
+   * Представляет подстановку полей FEN (ход, рокировка, счётчики) из строки родителя при смене стартовой позиции.
+   */
+  $effect(() => {
+    const src = props.initialFen;
+    untrack(() => {
+      try {
+        fen.fullFen = src;
+      } catch {
+        /* некорректная строка FEN — оставляем текущее состояние Fen */
+      }
+    });
+  });
+
+  $effect(() => {
+    const sideToMove = fen.move;
+    const targetOrientation = sideToMove === "w" ? Color.WHITE : Color.BLACK;
+    if (chessboard.orientation !== targetOrientation) {
+      chessboard.orientation = targetOrientation;
+    }
+  });
+
+  function handleNext() {
+    props.onNext(fen.fullFen);
+  }
+</script>
+
+<div class="flex flex-col gap-3 pt-2 pb-0">
+  <div class="flex w-full flex-wrap items-center gap-2">
+    <h2 class="text-xl font-semibold">Шаг 1: Создание позиции</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>
+  </div>
+
+  <div class="flex flex-col md:flex-row gap-3">
+    <div class="flex w-full max-w-full flex-col justify-center gap-2">
+      {#snippet boardRow()}
+        <div
+          class="flex w-full max-w-full flex-col gap-3 md:flex-row md:items-start items-center"
+        >
+          <!-- Явная ширина: при родителе с w-fit/min-content BoardContainer даёт min(100%, Nrem), и 100% может схлопнуться до нуля. -->
+          <div
+            class="shrink-0 max-w-full"
+            style="width: {puzzleStepBoardSettings.boardSize}rem; max-width: 100%;"
+          >
+            <Chessboard facade={chessboard} />
+          </div>
+          <div
+            class="hidden min-w-0 flex-1 flex-col gap-3 md:flex md:min-w-[280px]"
+          >
+            <EditFen {fen} api={chessboard} constrainToBoardWidth={false} />
+            <div class="space-y-2">
+              <label
+                for="puzzle-start-fullmove-md"
+                class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Номер хода в записи партии
+              </label>
+              <input
+                id="puzzle-start-fullmove-md"
+                type="number"
+                min="1"
+                class={cn(
+                  "border-input bg-background ring-offset-background shadow-xs flex h-9 w-full rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] md:text-sm",
+                  "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+                )}
+                value={fen.fullmove}
+                oninput={(e) => {
+                  const n = Number.parseInt(e.currentTarget.value, 10);
+                  if (!Number.isFinite(n) || n < 1) return;
+                  fen.fullmove = n;
+                }}
+              />
+            </div>
+            <EditMove {fen} api={chessboard} />
+          </div>
+        </div>
+      {/snippet}
+      <!-- Без {#if} по fen.move: иначе при смене стороны размонтируется boardRow/EditMove и bind у select ломается до следующего взаимодействия. -->
+      <div class={fen.move === "w" ? "order-1" : "order-3"}>
+        <EditPanel api={chessboard} color="b" />
+      </div>
+      <div class="order-2">{@render boardRow()}</div>
+      <div class={fen.move === "w" ? "order-3" : "order-1"}>
+        <EditPanel api={chessboard} color="w" />
+      </div>
+      <div class="md:hidden flex w-full flex-col gap-3">
+        <EditFen {fen} api={chessboard} constrainToBoardWidth={false} />
+        <div class="space-y-2">
+          <label
+            for="puzzle-start-fullmove-mobile"
+            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            Номер хода в записи партии
+          </label>
+          <input
+            id="puzzle-start-fullmove-mobile"
+            type="number"
+            min="1"
+            class={cn(
+              "border-input bg-background ring-offset-background shadow-xs flex h-9 w-full rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] md:text-sm",
+              "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            )}
+            value={fen.fullmove}
+            oninput={(e) => {
+              const n = Number.parseInt(e.currentTarget.value, 10);
+              if (!Number.isFinite(n) || n < 1) return;
+              fen.fullmove = n;
+            }}
+          />
+        </div>
+        <EditMove {fen} api={chessboard} />
+      </div>
+    </div>
+  </div>
+
+  <div class="flex justify-end">
+    <button
+      type="button"
+      class={cn(buttonVariants({ variant: "default" }))}
+      onclick={handleNext}
+    >
+      Далее
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+import { type ChessboardTheme } from "@connectorvol/chessboard";
+import type { TChessboardAppearanceSettings } from "./types.js";
+interface Props {
+    initialFen: string;
+    onNext: (fen: string) => void;
+    boardTheme?: ChessboardTheme;
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
+}
+declare const StepPosition: import("svelte").Component<Props, {}, "">;
+type StepPosition = ReturnType<typeof StepPosition>;
+export default StepPosition;