@dxos/react-ui-gameboard 0.7.5-main.ff8607b → 0.7.5-staging.b81e783

package/dist/lib/node/index.cjs

@@ -33,8 +33,10 @@ __export(node_exports, {
   ChessModel: () => ChessModel,
   ChessPieces: () => ChessPieces,
   Chessboard: () => Chessboard,
+  Container: () => Container,
   Piece: () => Piece,
   Square: () => Square,
+  boardStyles: () => boardStyles,
   getRelativeBounds: () => getRelativeBounds,
   getSquareColor: () => getSquareColor,
   isEqualLocation: () => isEqualLocation,
@@ -45,7 +47,6 @@ __export(node_exports, {
   mapPieces: () => mapPieces,
   posToLocation: () => posToLocation,
   stringToLocation: () => stringToLocation,
-  styles: () => styles,
   useBoardContext: () => useBoardContext
 });
 module.exports = __toCommonJS(node_exports);
@@ -89,6 +90,8 @@ var React16 = __toESM(require("react"));
 var import_react6 = __toESM(require("react"));
 var import_react_resize_detector = require("react-resize-detector");
 var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_theme5 = require("@dxos/react-ui-theme");
+var import_util = require("@dxos/util");
 var __defProp2 = Object.defineProperty;
 var __export2 = (target, all) => {
   for (var name in all)
@@ -125,14 +128,30 @@ var Container = /* @__PURE__ */ (0, import_react3.forwardRef)(({ children, class
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-gameboard/src/Board/Board.tsx";
 var Root = ({ children, classNames, model, onDrop }) => {
   const [dragging, setDragging] = (0, import_react2.useState)(false);
+  const [promoting, setPromoting] = (0, import_react2.useState)();
+  const onPromotion = (0, import_react2.useCallback)((move) => {
+    (0, import_log.log)("onPromotion", {
+      move
+    }, {
+      F: __dxlog_file,
+      L: 32,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    setPromoting(void 0);
+    onDrop?.(move);
+  }, []);
   (0, import_react2.useEffect)(() => {
+    if (!model) {
+      return;
+    }
     return (0, import_adapter.monitorForElements)({
       onDragStart: ({ source }) => {
         (0, import_log.log)("onDragStart", {
           source
         }, {
           F: __dxlog_file,
-          L: 33,
+          L: 45,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -144,7 +163,7 @@ var Root = ({ children, classNames, model, onDrop }) => {
           location
         }, {
           F: __dxlog_file,
-          L: 37,
+          L: 49,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -157,19 +176,31 @@ var Root = ({ children, classNames, model, onDrop }) => {
         if (!isLocation(targetLocation) || !isPiece(piece)) {
           return;
         }
-        onDrop?.({
-          source: piece.location,
-          target: targetLocation,
+        const move = {
+          from: piece.location,
+          to: targetLocation,
           piece: piece.type
-        });
+        };
+        if (model.canPromote?.(move)) {
+          setPromoting({
+            ...piece,
+            location: targetLocation
+          });
+        } else {
+          onDrop?.(move);
+        }
         setDragging(false);
       }
     });
-  }, []);
+  }, [
+    model
+  ]);
   return /* @__PURE__ */ import_react2.default.createElement(BoardContext.Provider, {
     value: {
       model,
-      dragging
+      dragging,
+      promoting,
+      onPromotion
     }
   }, /* @__PURE__ */ import_react2.default.createElement(Container, {
     classNames: (0, import_react_ui_theme.mx)("aspect-square", classNames)
@@ -225,8 +256,8 @@ var Square = /* @__PURE__ */ (0, import_react4.memo)(({ location, bounds, label,
           return;
         }
         if (model?.isValidMove({
-          source: piece.location,
-          target: location,
+          from: piece.location,
+          to: location,
           piece: piece.type
         })) {
           setState("validMove");
@@ -261,7 +292,8 @@ var Piece = /* @__PURE__ */ (0, import_react5.memo)(({ classNames, piece, orient
     Component
   }, Piece.displayName, false);
   const { model } = useBoardContext();
-  const { dragging: isDragging } = useBoardContext();
+  const { dragging: isDragging, promoting } = useBoardContext();
+  const promotingRef = (0, import_react_ui.useDynamicRef)(promoting);
   const [dragging, setDragging] = (0, import_react5.useState)(false);
   const [preview, setPreview] = (0, import_react5.useState)();
   const [current, setCurrent] = (0, import_react5.useState)({});
@@ -270,7 +302,7 @@ var Piece = /* @__PURE__ */ (0, import_react5.memo)(({ classNames, piece, orient
     const el = ref.current;
     (0, import_invariant2.invariant)(el, void 0, {
       F: __dxlog_file3,
-      L: 43,
+      L: 44,
       S: void 0,
       A: [
         "el",
@@ -287,7 +319,7 @@ var Piece = /* @__PURE__ */ (0, import_react5.memo)(({ classNames, piece, orient
           source: source.data
         }, {
           F: __dxlog_file3,
-          L: 49,
+          L: 50,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -309,15 +341,14 @@ var Piece = /* @__PURE__ */ (0, import_react5.memo)(({ classNames, piece, orient
           nativeSetDragImage
         });
       },
-      canDrag: () => model?.turn === piece.side,
+      canDrag: () => !promotingRef.current && model?.turn === piece.side,
       onDragStart: () => setDragging(true),
-      onDrop: ({ location }) => {
-        const drop = location.current.dropTargets[0].data;
-        const loc = drop.location;
-        if (isLocation(loc)) {
-          setCurrent((current2) => ({
-            ...current2,
-            location: loc
+      onDrop: ({ location: { current: current2 } }) => {
+        const location = current2.dropTargets[0].data.location;
+        if (isLocation(location)) {
+          setCurrent((current3) => ({
+            ...current3,
+            location
           }));
         }
         setDragging(false);
@@ -550,33 +581,47 @@ var locationToPos = ([row, col]) => {
 };
 var styles = {
   neutral: {
+    black: "bg-neutral-50",
     white: "bg-neutral-200",
-    black: "bg-neutral-50"
+    promotion: "bg-neutral-200 hover:bg-neutral-300 opacity-70 hover:opacity-100"
+  },
+  original: {
+    black: "bg-[#6C95B9]",
+    white: "bg-[#CCD3DB]",
+    promotion: "duration-500 bg-[#CCD3DB] opacity-70 hover:opacity-100"
   },
   blue: {
-    white: "bg-[#ccd3db]",
-    black: "bg-[#6c95b9]"
+    black: "bg-[#608BC1]",
+    white: "bg-[#CBDCEB]",
+    promotion: "duration-500 bg-[#CBDCEB] opacity-70 hover:opacity-100"
+  },
+  green: {
+    black: "bg-[#8EB486]",
+    white: "bg-[#FDF7F4]",
+    promotion: "duration-500 bg-[#FDF7F4] opacity-70 hover:opacity-100"
   }
 };
+var boardStyles = styles.original;
 var getSquareColor = ([row, col]) => {
-  return (col + row) % 2 === 0 ? styles.blue.white : styles.blue.black;
+  return (col + row) % 2 === 0 ? boardStyles.white : boardStyles.black;
 };
-var makeMove = (game, { source, target }) => {
-  const s = locationToPos(source);
-  const t = locationToPos(target);
+var makeMove = (game, move) => {
+  const from = locationToPos(move.from);
+  const to = locationToPos(move.to);
   try {
     (0, import_log4.log)("makeMove", {
-      s,
-      t
+      move
     }, {
       F: __dxlog_file4,
-      L: 58,
+      L: 72,
       S: void 0,
       C: (f, a) => f(...a)
     });
+    const promotion = move.promotion ? move.promotion[1].toLowerCase() : "q";
     game.move({
-      from: s,
-      to: t
+      from,
+      to,
+      promotion
     }, {
       strict: false
     });
@@ -610,6 +655,11 @@ var ChessModel = class {
   isValidMove(move) {
     return makeMove(new import_chess.Chess(this._game.fen()), move) !== null;
   }
+  canPromote(move) {
+    const isPawnMove = move.piece === "BP" || move.piece === "WP";
+    const isToLastRank = move.to[0] === 0 || move.to[0] === 7;
+    return isPawnMove && isToLastRank;
+  }
   makeMove(move) {
     const game = makeMove(this._game, move);
     if (!game) {
@@ -681,7 +731,7 @@ var mapPieces = (before, after) => {
     added: Object.keys(difference.added).length
   }, {
     F: __dxlog_file4,
-    L: 184,
+    L: 205,
     S: void 0,
     C: (f, a) => f(...a)
   });
@@ -696,7 +746,7 @@ var Chessboard = /* @__PURE__ */ (0, import_react6.memo)(({ orientation, showLab
   const { ref: containerRef, width, height } = (0, import_react_resize_detector.useResizeDetector)({
     refreshRate: 200
   });
-  const { model } = useBoardContext();
+  const { model, promoting, onPromotion } = useBoardContext();
   const locations = (0, import_react6.useMemo)(() => {
     return Array.from({
       length: rows
@@ -742,15 +792,19 @@ var Chessboard = /* @__PURE__ */ (0, import_react6.memo)(({ orientation, showLab
       return [];
     }
     return Object.values(model?.pieces.value ?? {}).map((piece) => {
+      if (piece.id === promoting?.id) {
+        return null;
+      }
       const bounds = grid[locationToString(piece.location)];
       return {
-        bounds,
-        piece
+        piece,
+        bounds
       };
-    });
+    }).filter(import_util.isNotFalsy);
   }, [
     grid,
-    model?.pieces.value
+    model?.pieces.value,
+    promoting
   ]);
   return /* @__PURE__ */ import_react6.default.createElement("div", {
     ref: containerRef,
@@ -765,7 +819,7 @@ var Chessboard = /* @__PURE__ */ (0, import_react6.memo)(({ orientation, showLab
     bounds: grid[locationToString(location)],
     classNames: getSquareColor(location)
   }))), /* @__PURE__ */ import_react6.default.createElement("div", {
-    className: "grow"
+    className: (0, import_react_ui_theme5.mx)(promoting && "opacity-50")
   }, positions.map(({ bounds, piece }) => /* @__PURE__ */ import_react6.default.createElement(Piece, {
     key: piece.id,
     piece,
@@ -773,12 +827,61 @@ var Chessboard = /* @__PURE__ */ (0, import_react6.memo)(({ orientation, showLab
     label: debug ? piece.id : void 0,
     orientation,
     Component: ChessPieces[piece.type]
-  }))));
+  }))), /* @__PURE__ */ import_react6.default.createElement("div", null, promoting && /* @__PURE__ */ import_react6.default.createElement(PromotionSelector, {
+    grid,
+    piece: promoting,
+    onSelect: (piece) => {
+      onPromotion({
+        from: Object.values(model.pieces.value).find((p) => p.id === promoting.id).location,
+        to: piece.location,
+        piece: promoting.type,
+        promotion: piece.type
+      });
+    }
+  })));
 });
 Chessboard.displayName = "Chessboard";
 var getSquareLocation = (container, location) => {
   return container.querySelector(`[data-location="${locationToString(location)}"]`);
 };
+var PromotionSelector = ({ grid, piece, onSelect }) => {
+  const positions = [
+    "Q",
+    "N",
+    "R",
+    "B"
+  ].map((pieceType, i) => {
+    const location = [
+      piece.location[0] + (piece.location[0] === 0 ? i : -i),
+      piece.location[1]
+    ];
+    return {
+      piece: {
+        id: `promotion-${pieceType}`,
+        type: (piece.side === "black" ? "B" : "W") + pieceType,
+        side: piece.side,
+        location
+      },
+      bounds: grid[locationToString(location)]
+    };
+  });
+  const handleSelect = (selected) => {
+    onSelect({
+      ...piece,
+      type: selected.type
+    });
+  };
+  return /* @__PURE__ */ import_react6.default.createElement("div", null, positions.map(({ piece: piece2, bounds }) => /* @__PURE__ */ import_react6.default.createElement("div", {
+    key: piece2.id,
+    style: bounds,
+    onClick: () => handleSelect(piece2)
+  }, /* @__PURE__ */ import_react6.default.createElement(Piece, {
+    piece: piece2,
+    bounds,
+    Component: ChessPieces[piece2.type],
+    classNames: (0, import_react_ui_theme5.mx)("border-2 border-neutral-700 rounded-full", boardStyles.promotion)
+  }))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Board,
@@ -786,8 +889,10 @@ var getSquareLocation = (container, location) => {
   ChessModel,
   ChessPieces,
   Chessboard,
+  Container,
   Piece,
   Square,
+  boardStyles,
   getRelativeBounds,
   getSquareColor,
   isEqualLocation,
@@ -798,7 +903,6 @@ var getSquareLocation = (container, location) => {
   mapPieces,
   posToLocation,
   stringToLocation,
-  styles,
   useBoardContext
 });
 //# sourceMappingURL=index.cjs.map