@connectorvol/chess-widgets 6.4.0 → 6.5.0

package/dist/constants/editable-board-settings.d.ts

@@ -5,7 +5,7 @@ import { Draggable, PieceInputMode } from "@connectorvol/chessboard";
 export declare const DEFAULT_EDITABLE_BOARD_SETTINGS: {
     autoQueenPromotion: false;
     isResizable: true;
-    isDisplayCoordinate: boolean;
+    showBoardCoordinates: false;
     orientation: "w";
     boardSize: number;
     draggable: Draggable.BOTH;

package/dist/constants/editable-board-settings.js

@@ -6,7 +6,7 @@ import { Color } from "@connectorvol/shared";
 export const DEFAULT_EDITABLE_BOARD_SETTINGS = {
     autoQueenPromotion: false,
     isResizable: true,
-    isDisplayCoordinate: false,
+    showBoardCoordinates: false,
     orientation: Color.WHITE,
     boardSize: 38,
     draggable: Draggable.BOTH,

package/dist/game-analyzer/GameAnalyzer.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { TGameAnalyzerProps } from "./types.js";
+
+  import { Chessboard, DEFAULT_BOARD_SETTINGS } from "@connectorvol/chessboard";
+  import { TreeViewer, TreeViewerPanelManager } from "@connectorvol/tree";
+  import { Game } from "./gameAnalyzer.svelte.js";
+  import { untrack } from "svelte";
+
+  let {
+    pgn,
+    onChangePGN,
+    boardTheme,
+    boardAppearanceSettings,
+    editMode = true,
+    class: className,
+  }: TGameAnalyzerProps = $props();
+
+  
+  let game = $derived(new Game(
+    untrack(() => pgn),
+      {
+        ...DEFAULT_BOARD_SETTINGS,
+        ...boardAppearanceSettings,
+        boardSize: "auto",
+      },
+      "chess",
+      boardTheme,
+    ))
+
+  // $effect(() => {
+  //   if (pgn !== internalPgn) {
+  //     internalPgn = pgn;
+  //     game.loadPgn(pgn);
+  //   }
+  // });
+
+  function handleChangeDirty(_setIsDirty: (value: boolean) => void) {
+    console.log('handleChangeDirty')
+    const exported = game.exportPgn();
+    onChangePGN?.(exported);
+  }
+  
+</script>
+
+<div class={["mx-4 lg:container lg:mx-auto gap-4", className]}>
+  <div class="flex justify-center relative lg:gap-4 flex-col lg:flex-row">
+    <div class="lg:w-2/5">
+      <Chessboard facade={game.chessboard} />
+    </div>
+
+
+    <div class="lg:w-3/5 flex lg:flex-col flex-col-reverse h-full">
+      <div class="h-full">
+        <TreeViewer
+          className="h-[calc(100dvh-8rem)]"
+          chessTree={game.chessTree}
+          onSelectNode={game.onSelectNode}
+          onDeleteVariant={game.onDeleteVariant}
+          setChessFen={game.setChessFen}
+          setChessboardFen={game.setChessboardFen}
+          pieceSet={game.chessboard.chessSet}
+          {editMode}
+          onChangeDirty={handleChangeDirty}
+        />
+      </div>
+
+      <TreeViewerPanelManager
+        className="flex w-full justify-center select-none col-span-1 my-4"
+        chessTree={game.chessTree}
+        setChessFen={game.setChessFen}
+        setChessboardFen={game.setChessboardFen}
+      />
+    </div>
+  </div>
+</div>

package/dist/game-analyzer/GameAnalyzer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TGameAnalyzerProps } from "./types.js";
+declare const GameAnalyzer: import("svelte").Component<TGameAnalyzerProps, {}, "">;
+type GameAnalyzer = ReturnType<typeof GameAnalyzer>;
+export default GameAnalyzer;

package/dist/game-analyzer/gameAnalyzer.svelte.js

@@ -0,0 +1,124 @@
+import { Color, calculatePly, generateId } from "@connectorvol/shared";
+import { CHESSBOARD_THEMES, createBoardApi, DEFAULT_BOARD_SETTINGS, Draggable, syncMoveEvaluationNagBadge, } from "@connectorvol/chessboard";
+import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+import { transformPgnToChessNode, createPgnFromTree } from "@connectorvol/tree";
+import { ChessTree } from "@connectorvol/tree";
+import { saveNodeMarkers } from "./utils.js";
+export class Game {
+    chess;
+    chessboard;
+    chessTree;
+    previousNode;
+    boardSettings;
+    variant;
+    boardTheme;
+    constructor(pgn, chessBoardSettings = DEFAULT_BOARD_SETTINGS, variant = "chess", boardTheme) {
+        this.boardSettings = chessBoardSettings;
+        this.variant = variant;
+        this.boardTheme = boardTheme ?? CHESSBOARD_THEMES.blue;
+        const { rootNode, initialFen: position } = transformPgnToChessNode(pgn);
+        this.chessTree = new ChessTree(rootNode);
+        this.chess = new PgnOps(position, variant);
+        this.chessboard = createBoardApi({
+            fen: this.chess.fen(),
+            settings: {
+                ...this.boardSettings,
+                draggable: this.chess.turn() === Color.WHITE ? Draggable.WHITE : Draggable.BLACK,
+            },
+            theme: this.boardTheme,
+        });
+        this.chessboard.setActions(this.buildActions());
+        this.previousNode = this.chessTree.currentNode;
+        $effect(() => {
+            const markerService = this.chessboard.getBoard().markerService;
+            void markerService.totalMarkerCount;
+            const changed = saveNodeMarkers(this.chessboard, this.chessTree.currentNode);
+            if (changed) {
+                this.chessTree.mutationVersion++;
+            }
+        });
+    }
+    buildActions() {
+        return {
+            game: {
+                possibleMovesOnSquare: (square) => this.chess.moves(square),
+                beforePieceMoveSan: (san) => {
+                    const move = this.chess.makeSanMove(san);
+                    const fen = this.chess.fen();
+                    const { halfMoves, fullMoves } = calculatePly(fen);
+                    saveNodeMarkers(this.chessboard, this.chessTree.currentNode);
+                    this.chessTree.addNodeToCurrent({
+                        id: generateId(),
+                        children: [],
+                        data: { fen, san, ply: halfMoves, fullMoves, lastMove: move },
+                    });
+                    return { move, fen, turn: this.chess.turn() };
+                },
+                afterPieceMoveSan: () => {
+                    syncMoveEvaluationNagBadge(this.chessboard, this.chessTree.currentNode.data);
+                    this.chessboard.setNodeMarkers(this.chessTree.currentNode.data.parsedFirstComment?.shapes);
+                },
+                beforePieceMove: (from, to, promotion) => {
+                    const { san, ply, fullMoves, move: lastMove } = this.chess.makeMove({
+                        from,
+                        to,
+                        promotion,
+                    });
+                    const fen = this.chess.fen();
+                    saveNodeMarkers(this.chessboard, this.chessTree.currentNode);
+                    this.chessTree.addNodeToCurrent({
+                        id: generateId(),
+                        children: [],
+                        data: { fen, san, ply, fullMoves, lastMove },
+                    });
+                    return fen;
+                },
+                afterPieceMove: () => {
+                    this.chessboard.draggable =
+                        this.chess.turn() === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
+                    syncMoveEvaluationNagBadge(this.chessboard, this.chessTree.currentNode.data);
+                    this.chessboard.setNodeMarkers(this.chessTree.currentNode.data.parsedFirstComment?.shapes);
+                },
+            },
+        };
+    }
+    /** Перезагружает партию из нового PGN. */
+    loadPgn(pgn) {
+        const { rootNode, initialFen: position } = transformPgnToChessNode(pgn);
+        this.chessTree.replaceRootTree(rootNode);
+        this.chess = new PgnOps(position, this.variant);
+        this.chessboard.fen = this.chess.fen();
+        this.syncGameState();
+    }
+    /** Экспортирует текущее дерево в строку PGN. */
+    exportPgn() {
+        return createPgnFromTree(this.chessTree.rootNode);
+    }
+    onSelectNode = () => {
+        saveNodeMarkers(this.chessboard, this.previousNode);
+        this.chess.setFen(this.chessTree.currentNode.data.fen);
+        this.syncGameState();
+    };
+    onDeleteVariant = () => {
+        saveNodeMarkers(this.chessboard, this.previousNode);
+        this.chess.setFen(this.chessTree.currentNode.data.fen);
+        this.syncGameState();
+    };
+    setChessFen = (fen) => {
+        this.chess.setFen(fen);
+    };
+    setChessboardFen = (animationTime = 0) => {
+        saveNodeMarkers(this.chessboard, this.previousNode);
+        this.chessboard.animationTime = animationTime;
+        this.syncGameState();
+    };
+    syncGameState() {
+        this.chessboard.fen = this.chess.fen();
+        this.chessboard.addLastMove(this.chessTree.currentNode.data.lastMove ?? null);
+        syncMoveEvaluationNagBadge(this.chessboard, this.chessTree.currentNode.data);
+        this.chessboard.setNodeMarkers(this.chessTree.currentNode.data.parsedFirstComment?.shapes);
+        this.chessboard.draggable =
+            this.chess.turn() === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
+        this.previousNode = this.chessTree.currentNode;
+    }
+}

package/dist/game-analyzer/types.d.ts

@@ -0,0 +1,35 @@
+import type { ChessboardTheme } from "@connectorvol/chessboard";
+import type { ChessBoardSettings } from "@connectorvol/chessboard";
+/**
+ * Представляет тип визуальных настроек шахматной доски для анализатора партии.
+ */
+export type TChessboardAppearanceSettings = Omit<Partial<ChessBoardSettings>, "boardSize" | "orientation" | "draggable">;
+/**
+ * Представляет свойства компонента анализатора партии.
+ */
+export interface TGameAnalyzerProps {
+    /**
+     * Возвращает PGN партии.
+     */
+    pgn: string;
+    /**
+     * Возвращает колбэк при изменении дерева ходов (добавление/удаление ходов, комментариев, маркеров).
+     */
+    onChangePGN?: (pgn: string) => void;
+    /**
+     * Возвращает тему оформления шахматной доски (по умолчанию синяя).
+     */
+    boardTheme?: ChessboardTheme;
+    /**
+     * Возвращает дополнительные визуальные настройки шахматной доски (кроме `boardSize`, `orientation`, `draggable`).
+     */
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
+    /**
+     * Возвращает признак режима правки дерева (по умолчанию `true`).
+     */
+    editMode?: boolean;
+    /**
+     * Возвращает дополнительные классы Tailwind для корневого контейнера.
+     */
+    class?: string;
+}

package/dist/game-analyzer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/game-analyzer/utils.d.ts

@@ -0,0 +1,5 @@
+import type { BoardApi } from "@connectorvol/chessboard";
+import type { ChessTreeNode } from "@connectorvol/tree";
+/** Сохраняет текущие маркеры доски в комментарий узла дерева (в формате PGN [%cal/%csl]).
+ *  Возвращает true, если комментарий был изменён. */
+export declare function saveNodeMarkers(boardApi: BoardApi, node: ChessTreeNode): boolean;

package/dist/game-analyzer/utils.js

@@ -0,0 +1,53 @@
+import { parseComment, makeComment, } from "@connectorvol/chessops/pgn";
+const HEX_TO_COMMENT_COLOR = {
+    "#ff0000": "red",
+    "#00ff00": "green",
+    "#008000": "green",
+    "#0000ff": "blue",
+    "#ffff00": "yellow",
+};
+function hexToCommentColor(hex) {
+    return HEX_TO_COMMENT_COLOR[hex.toLowerCase()] ?? "green";
+}
+function shapeKey(s) {
+    return `${s.color}:${s.from}:${s.to}`;
+}
+function shapesEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    const setA = new Set(a.map(shapeKey));
+    return b.every((s) => setA.has(shapeKey(s)));
+}
+/** Сохраняет текущие маркеры доски в комментарий узла дерева (в формате PGN [%cal/%csl]).
+ *  Возвращает true, если комментарий был изменён. */
+export function saveNodeMarkers(boardApi, node) {
+    const shapes = boardApi.getNodeMarkers();
+    const rawFirst = node.data.comments?.[0];
+    const base = rawFirst ? parseComment(rawFirst) : { text: "", shapes: [] };
+    const newShapes = shapes.map((s) => ({
+        color: hexToCommentColor(s.color ?? "#ff0000"),
+        from: s.from,
+        to: s.to,
+    }));
+    if (shapesEqual(newShapes, base.shapes))
+        return false;
+    const newComment = makeComment({ ...base, shapes: newShapes });
+    if (newComment === rawFirst)
+        return false;
+    if (newComment === "") {
+        if (rawFirst === undefined)
+            return false;
+        const tail = node.data.comments?.slice(1);
+        if (tail?.length) {
+            node.data.comments = tail;
+        }
+        else {
+            node.data.comments = undefined;
+        }
+        node.data.parsedFirstComment = null;
+        return true;
+    }
+    node.data.comments = [newComment, ...(node.data.comments?.slice(1) ?? [])];
+    node.data.parsedFirstComment = parseComment(newComment);
+    return true;
+}

package/dist/index.d.ts

@@ -12,3 +12,5 @@ export { default as EditFen } from "./position-editor/EditFen.svelte";
 export { default as EditMove } from "./position-editor/EditMove.svelte";
 export { default as EditPanel } from "./position-editor/EditPanel.svelte";
 export { Fen, type Castling } from "./position-editor/fen.svelte.js";
+export { default as GameAnalyzer } from "./game-analyzer/GameAnalyzer.svelte";
+export type { TGameAnalyzerProps } from "./game-analyzer/types.js";

package/dist/index.js

@@ -8,3 +8,4 @@ export { default as EditFen } from "./position-editor/EditFen.svelte";
 export { default as EditMove } from "./position-editor/EditMove.svelte";
 export { default as EditPanel } from "./position-editor/EditPanel.svelte";
 export { Fen } from "./position-editor/fen.svelte.js";
+export { default as GameAnalyzer } from "./game-analyzer/GameAnalyzer.svelte";

package/dist/puzzle-creation/PuzzleBoardTreeViewerPane.svelte

@@ -5,7 +5,6 @@
   import { Chessboard } from "@connectorvol/chessboard";
   import type { ChessTree } from "@connectorvol/tree";
   import { TreeViewer } from "@connectorvol/tree";
-  import { DEFAULT_PIECE_SET } from "@connectorvol/shared";
 
   import { cn } from "../utils.js";
 
@@ -67,6 +66,10 @@
     class: className,
     belowChessboard,
   }: Props = $props();
+
+  const hasBoardCoordinatesWithoutBorder = $derived(
+    chessboard.showBoardCoordinates && !chessboard.border,
+  );
 </script>
 
 <div
@@ -79,19 +82,22 @@
     class="order-2 flex min-h-48 w-full flex-1 flex-col gap-2 lg:order-2 lg:min-h-0 lg:min-w-0"
   >
     <div
-      class="flex min-h-28 min-w-0 flex-1 flex-col overflow-hidden rounded-md border border-border lg:min-h-0"
+      class={cn(
+        "flex min-h-28 min-w-0 flex-1 flex-col overflow-hidden rounded-md border border-border lg:min-h-0",
+        hasBoardCoordinatesWithoutBorder && "mb-4",
+      )}
     >
       <TreeViewer
-        chessTree={chessTree}
-        {onSelectNode}
-        {onDeleteVariant}
-        {setChessFen}
-        {setChessboardFen}
-        pieceSet={DEFAULT_PIECE_SET}
-        className="min-h-0 flex-1 border-x-0 border-t-0"
-        {editMode}
-        {selectable}
-      />
+      chessTree={chessTree}
+      {onSelectNode}
+      {onDeleteVariant}
+      {setChessFen}
+      {setChessboardFen}
+      pieceSet={chessboard.chessSet}
+      className="min-h-0 flex-1 border-x-0 border-t-0"
+      {editMode}
+      {selectable}
+    />
     </div>
   </div>
 

package/dist/puzzle-creation/PuzzleCreationWizard.svelte

@@ -41,7 +41,7 @@
     }
 
     let step = $state<1 | 2 | 3>(1);
-    let puzzleData = $state<PuzzleData>(
+    let puzzleData = $derived<PuzzleData>(
         createInitialPuzzleData(wizardSeedFen(fenProp)),
     );
 

package/dist/puzzle-creation/PuzzlePgnBoardTreeEditor.svelte

@@ -487,6 +487,7 @@
     chessboard.fen = previewChess.fen();
     chessboard.addLastMove(tree.currentNode.data.lastMove ?? null);
     syncMoveEvaluationNagBadge(chessboard, tree.currentNode.data);
+    chessboard.setNodeMarkers(tree.currentNode.data.parsedFirstComment?.shapes);
     syncBoardDragFromChessTurn();
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectorvol/chess-widgets",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "private": false,
   "publishConfig": {
     "access": "public"