@dxos/react-ui-gameboard 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/dist/lib/browser/index.mjs

@@ -40,20 +40,12 @@ import React, { memo, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { invariant } from "@dxos/invariant";
 import { log } from "@dxos/log";
-import { useDynamicRef, useTrackProps } from "@dxos/react-ui";
+import { useDynamicRef } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Gameboard/Piece.tsx";
-var Piece = /* @__PURE__ */ memo(({ classNames, Component, piece, orientation, bounds, label, onClick }) => {
+var Piece = /* @__PURE__ */ memo(({ classNames, Component, piece, bounds, label, onClick }) => {
   var _effect = _useSignals();
   try {
-    useTrackProps({
-      classNames,
-      Component,
-      piece,
-      orientation,
-      bounds,
-      label
-    }, Piece.displayName, false);
     const { model, dragging: isDragging, promoting } = useGameboardContext(Piece.displayName);
     const promotingRef = useDynamicRef(promoting);
     const [dragging, setDragging] = useState(false);
@@ -61,10 +53,13 @@ var Piece = /* @__PURE__ */ memo(({ classNames, Component, piece, orientation, b
     const [current, setCurrent] = useState({});
     const ref = useRef(null);
     useEffect(() => {
+      if (!model) {
+        return;
+      }
       const el = ref.current;
       invariant(el, void 0, {
         F: __dxlog_file,
-        L: 42,
+        L: 45,
         S: void 0,
         A: [
           "el",
@@ -81,7 +76,7 @@ var Piece = /* @__PURE__ */ memo(({ classNames, Component, piece, orientation, b
             source: source.data
           }, {
             F: __dxlog_file,
-            L: 48,
+            L: 51,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -99,7 +94,7 @@ var Piece = /* @__PURE__ */ memo(({ classNames, Component, piece, orientation, b
             nativeSetDragImage
           });
         },
-        canDrag: () => !promotingRef.current && model?.turn === piece.side,
+        canDrag: () => !promotingRef.current && !model.readonly && model.turn === piece.side,
         onDragStart: () => setDragging(true),
         onDrop: ({ location: { current: current2 } }) => {
           try {
@@ -125,7 +120,7 @@ var Piece = /* @__PURE__ */ memo(({ classNames, Component, piece, orientation, b
           return;
         }
         if (!current.location || !isEqualLocation(current.location, piece.location)) {
-          ref.current.style.transition = "top 400ms ease-out, left 400ms ease-out";
+          ref.current.style.transition = "top 250ms ease-out, left 250ms ease-out";
           ref.current.style.top = bounds.top + "px";
           ref.current.style.left = bounds.left + "px";
           setCurrent({
@@ -260,7 +255,7 @@ var [GameboardContextProvider, useRadixGameboardContext] = createContext("Gamebo
 var useGameboardContext = (consumerName) => {
   return useRadixGameboardContext(consumerName);
 };
-var GameboardRoot = ({ children, model, onDrop }) => {
+var GameboardRoot = ({ children, model, moveNumber, onDrop }) => {
   var _effect = _useSignals3();
   try {
     const [dragging, setDragging] = useState3(false);
@@ -270,7 +265,7 @@ var GameboardRoot = ({ children, model, onDrop }) => {
         move
       }, {
         F: __dxlog_file3,
-        L: 47,
+        L: 48,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -287,7 +282,7 @@ var GameboardRoot = ({ children, model, onDrop }) => {
             source
           }, {
             F: __dxlog_file3,
-            L: 60,
+            L: 61,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -299,7 +294,7 @@ var GameboardRoot = ({ children, model, onDrop }) => {
             location
           }, {
             F: __dxlog_file3,
-            L: 64,
+            L: 65,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -369,6 +364,7 @@ var Gameboard = {
 // src/components/Chessboard/chess.ts
 import { signal } from "@preact/signals-core";
 import { Chess as ChessJS } from "chess.js";
+import { invariant as invariant3 } from "@dxos/invariant";
 import { log as log4 } from "@dxos/log";
 
 // src/gen/pieces/chess/alpha/index.ts
@@ -675,6 +671,9 @@ var posToLocation = (pos) => {
 var locationToPos = ([row, col]) => {
   return String.fromCharCode(col + "a".charCodeAt(0)) + (row + 1);
 };
+var getRawPgn = (pgn) => {
+  return pgn.replace(/\[.*?\]/g, "").trim();
+};
 var styles = {
   neutral: {
     black: "bg-neutral-50",
@@ -709,7 +708,7 @@ var createChess = (pgn) => {
     } catch {
       log4.warn(pgn, void 0, {
         F: __dxlog_file4,
-        L: 71,
+        L: 76,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -717,37 +716,30 @@ var createChess = (pgn) => {
   }
   return chess;
 };
-var tryMove = (chess, move) => {
-  const from = locationToPos(move.from);
-  const to = locationToPos(move.to);
-  try {
-    const promotion = move.promotion ? move.promotion[1].toLowerCase() : "q";
-    chess.move({
-      from,
-      to,
-      promotion
-    }, {
-      strict: false
-    });
-    return chess;
-  } catch {
-    return null;
-  }
-};
 var ChessModel = class {
   _chess = new ChessJS();
   _pieces = signal({});
+  _moveIndex = signal(0);
   constructor(pgn) {
     this.update(pgn);
   }
+  get readonly() {
+    return this._moveIndex.value !== this._chess.history().length;
+  }
   get turn() {
     return this._chess.turn() === "w" ? "white" : "black";
   }
+  get game() {
+    return this._chess;
+  }
   get pieces() {
     return this._pieces;
   }
-  get game() {
-    return this._chess;
+  get moveIndex() {
+    return this._moveIndex;
+  }
+  get fen() {
+    return this._chess.fen();
   }
   /**
   * PGN with headers.
@@ -762,10 +754,17 @@ var ChessModel = class {
   */
   // TODO(burdon): Update headers.
   get pgn() {
-    return this._chess.pgn();
+    return getRawPgn(this._chess.pgn());
   }
-  get fen() {
-    return this._chess.fen();
+  setMoveIndex(index) {
+    const temp = new ChessJS();
+    const history = this._chess.history({
+      verbose: true
+    });
+    for (let i = 0; i < index && i < history.length; i++) {
+      temp.move(history[i]);
+    }
+    this._updateBoard(temp);
   }
   update(pgn = "") {
     const previous = this._chess.history();
@@ -779,7 +778,7 @@ var ChessModel = class {
     if (!isValidNextMove(previous, current)) {
       this._pieces.value = {};
     }
-    this._update();
+    this._updateBoard(this._chess);
   }
   isValidMove(move) {
     return tryMove(new ChessJS(this._chess.fen()), move) !== null;
@@ -794,7 +793,7 @@ var ChessModel = class {
     if (!game) {
       return false;
     }
-    this._update();
+    this._updateBoard(this._chess);
     return true;
   }
   makeRandomMove() {
@@ -804,29 +803,32 @@ var ChessModel = class {
     }
     const move = moves[Math.floor(Math.random() * moves.length)];
     this._chess.move(move);
-    this._update();
+    this._updateBoard(this._chess);
     return true;
   }
   /**
   * Update pieces preserving identity.
   */
-  _update() {
-    const pieces = {};
-    this._chess.board().flatMap((row) => row.forEach((record) => {
-      if (!record) {
-        return;
-      }
-      const { square, type, color } = record;
-      const pieceType = `${color.toUpperCase()}${type.toUpperCase()}`;
-      const location = posToLocation(square);
-      pieces[locationToString(location)] = {
-        id: `${square}-${pieceType}`,
-        type: pieceType,
-        side: color === "w" ? "white" : "black",
-        location
-      };
-    }));
-    this._pieces.value = mapPieces(this._pieces.value, pieces);
+  _updateBoard(chess) {
+    this._pieces.value = createPieceMap(chess);
+    this._moveIndex.value = chess.history().length;
+  }
+};
+var tryMove = (chess, move) => {
+  const from = locationToPos(move.from);
+  const to = locationToPos(move.to);
+  try {
+    const promotion = move.promotion ? move.promotion[1].toLowerCase() : "q";
+    chess.move({
+      from,
+      to,
+      promotion
+    }, {
+      strict: false
+    });
+    return chess;
+  } catch {
+    return null;
   }
 };
 var isValidNextMove = (previous, current) => {
@@ -840,7 +842,51 @@ var isValidNextMove = (previous, current) => {
   }
   return true;
 };
-var mapPieces = (before, after) => {
+var createPieceMap = (chess) => {
+  const temp = new ChessJS();
+  let pieces = _createPieceMap(temp);
+  const history = chess.history({
+    verbose: true
+  });
+  for (let i = 0; i < history.length; i++) {
+    const move = history[i];
+    temp.move(move);
+    pieces = _diffPieces(pieces, _createPieceMap(temp));
+    const test = /* @__PURE__ */ new Set();
+    Object.values(pieces).forEach((piece) => {
+      invariant3(!test.has(piece.id), "Duplicate: " + piece.id, {
+        F: __dxlog_file4,
+        L: 252,
+        S: void 0,
+        A: [
+          "!test.has(piece.id)",
+          "'Duplicate: ' + piece.id"
+        ]
+      });
+      test.add(piece.id);
+    });
+  }
+  return pieces;
+};
+var _createPieceMap = (chess) => {
+  const pieces = {};
+  chess.board().flatMap((row) => row.forEach((record) => {
+    if (!record) {
+      return;
+    }
+    const { square, type, color } = record;
+    const pieceType = `${color.toUpperCase()}${type.toUpperCase()}`;
+    const location = posToLocation(square);
+    pieces[locationToString(location)] = {
+      id: `${square}-${pieceType}`,
+      type: pieceType,
+      side: color === "w" ? "white" : "black",
+      location
+    };
+  }));
+  return pieces;
+};
+var _diffPieces = (before, after) => {
   const difference = {
     removed: {},
     added: {}
@@ -863,41 +909,27 @@ var mapPieces = (before, after) => {
       piece.id = previous.id;
     }
   }
-  log4("delta", {
-    before: Object.keys(before).length,
-    after: Object.keys(after).length,
-    removed: Object.keys(difference.removed).length,
-    added: Object.keys(difference.added).length
-  }, {
-    F: __dxlog_file4,
-    L: 263,
-    S: void 0,
-    C: (f, a) => f(...a)
-  });
   return after;
 };
 var createDate = (date = /* @__PURE__ */ new Date()) => date.toISOString().slice(0, 10).replace(/-/g, ".");
 
 // src/components/Chessboard/Chessboard.tsx
 import { useSignals as _useSignals16 } from "@preact-signals/safe-react/tracking";
-import React16, { memo as memo3, useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState4 } from "react";
+import React16, { forwardRef as forwardRef2, memo as memo3, useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState4 } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useTrackProps as useTrackProps2 } from "@dxos/react-ui";
+import { useForwardedRef } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/react-ui-theme";
-import { isNotFalsy } from "@dxos/util";
-var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows = 8, cols = 8, classNames }) => {
+import { isNonNullable } from "@dxos/util";
+var ChessboardComponent = /* @__PURE__ */ forwardRef2(({ classNames, orientation, showLabels, debug, rows = 8, cols = 8 }, forwardedRef) => {
   var _effect = _useSignals16();
   try {
-    useTrackProps2({
-      orientation,
-      showLabels,
-      debug
-    }, Chessboard.displayName, false);
-    const { ref: containerRef, width, height } = useResizeDetector({
+    const targetRef = useForwardedRef(forwardedRef);
+    const { width, height } = useResizeDetector({
+      targetRef,
       refreshRate: 200
     });
     const { model, promoting, onPromotion } = useGameboardContext(Chessboard.displayName);
-    const locations = useMemo(() => {
+    const squares = useMemo(() => {
       return Array.from({
         length: rows
       }, (_, i) => orientation === "black" ? i : rows - 1 - i).flatMap((row) => Array.from({
@@ -912,19 +944,19 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
       cols
     ]);
     const layout = useMemo(() => {
-      return locations.map((location) => {
+      return squares.map((location) => {
         return /* @__PURE__ */ React16.createElement("div", {
           key: locationToString(location),
           ["data-location"]: locationToString(location)
         });
       });
     }, [
-      locations
+      squares
     ]);
     const [grid, setGrid] = useState4({});
     const gridRef = useRef3(null);
     useEffect4(() => {
-      setGrid(locations.reduce((acc, location) => {
+      setGrid(squares.reduce((acc, location) => {
         const square = getSquareLocation(gridRef.current, location);
         const bounds = getRelativeBounds(gridRef.current, square);
         return {
@@ -933,7 +965,7 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
         };
       }, {}));
     }, [
-      locations,
+      squares,
       width,
       height
     ]);
@@ -950,19 +982,20 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
           piece,
           bounds
         };
-      }).filter(isNotFalsy);
+      }).filter(isNonNullable);
     }, [
       grid,
       model?.pieces.value,
       promoting
     ]);
     return /* @__PURE__ */ React16.createElement("div", {
-      ref: containerRef,
-      className: mx4("relative", classNames)
+      ref: targetRef,
+      tabIndex: 0,
+      className: mx4("relative outline-none", classNames)
     }, /* @__PURE__ */ React16.createElement("div", {
       ref: gridRef,
       className: "grid grid-rows-8 grid-cols-8 aspect-square select-none"
-    }, layout), /* @__PURE__ */ React16.createElement("div", null, locations.map((location) => /* @__PURE__ */ React16.createElement(Gameboard.Square, {
+    }, layout), /* @__PURE__ */ React16.createElement("div", null, squares.map((location) => /* @__PURE__ */ React16.createElement(Gameboard.Square, {
       key: locationToString(location),
       location,
       label: showLabels ? locationToPos(location) : void 0,
@@ -993,10 +1026,8 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
     _effect.f();
   }
 });
-Chessboard.displayName = "Chessboard";
-var getSquareLocation = (container, location) => {
-  return container.querySelector(`[data-location="${locationToString(location)}"]`);
-};
+ChessboardComponent.displayName = "Chessboard";
+var Chessboard = /* @__PURE__ */ memo3(ChessboardComponent);
 var PromotionSelector = ({ grid, piece, onSelect }) => {
   var _effect = _useSignals16();
   try {
@@ -1028,16 +1059,19 @@ var PromotionSelector = ({ grid, piece, onSelect }) => {
     };
     return /* @__PURE__ */ React16.createElement(React16.Fragment, null, positions.map(({ piece: piece2, bounds }) => /* @__PURE__ */ React16.createElement(Gameboard.Piece, {
       key: piece2.id,
+      classNames: mx4("border-2 border-neutral-700 rounded-full", boardStyles.promotion),
       piece: piece2,
       bounds,
       Component: ChessPieces[piece2.type],
-      classNames: mx4("border-2 border-neutral-700 rounded-full", boardStyles.promotion),
       onClick: () => handleSelect(piece2)
     })));
   } finally {
     _effect.f();
   }
 };
+var getSquareLocation = (container, location) => {
+  return container.querySelector(`[data-location="${locationToString(location)}"]`);
+};
 export {
   ChessModel,
   ChessPieces,
@@ -1045,6 +1079,8 @@ export {
   Gameboard,
   boardStyles,
   createChess,
+  createPieceMap,
+  getRawPgn,
   getRelativeBounds,
   getSquareColor,
   isEqualLocation,
@@ -1052,7 +1088,6 @@ export {
   isPiece,
   locationToPos,
   locationToString,
-  mapPieces,
   posToLocation,
   stringToLocation,
   useGameboardContext