@dxos/react-ui-gameboard 0.7.5-labs.e27f9b9 → 0.7.5-main.e9bb01b

package/dist/lib/node/index.cjs

@@ -33,10 +33,8 @@ __export(node_exports, {
   ChessModel: () => ChessModel,
   ChessPieces: () => ChessPieces,
   Chessboard: () => Chessboard,
-  Container: () => Container,
   Piece: () => Piece,
   Square: () => Square,
-  boardStyles: () => boardStyles,
   getRelativeBounds: () => getRelativeBounds,
   getSquareColor: () => getSquareColor,
   isEqualLocation: () => isEqualLocation,
@@ -47,6 +45,7 @@ __export(node_exports, {
   mapPieces: () => mapPieces,
   posToLocation: () => posToLocation,
   stringToLocation: () => stringToLocation,
+  styles: () => styles,
   useBoardContext: () => useBoardContext
 });
 module.exports = __toCommonJS(node_exports);
@@ -90,8 +89,6 @@ 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)
@@ -128,30 +125,14 @@ 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: 45,
+          L: 33,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -163,7 +144,7 @@ var Root = ({ children, classNames, model, onDrop }) => {
           location
         }, {
           F: __dxlog_file,
-          L: 49,
+          L: 37,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -176,31 +157,19 @@ var Root = ({ children, classNames, model, onDrop }) => {
         if (!isLocation(targetLocation) || !isPiece(piece)) {
           return;
         }
-        const move = {
-          from: piece.location,
-          to: targetLocation,
+        onDrop?.({
+          source: piece.location,
+          target: 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,
-      promoting,
-      onPromotion
+      dragging
     }
   }, /* @__PURE__ */ import_react2.default.createElement(Container, {
     classNames: (0, import_react_ui_theme.mx)("aspect-square", classNames)
@@ -256,8 +225,8 @@ var Square = /* @__PURE__ */ (0, import_react4.memo)(({ location, bounds, label,
           return;
         }
         if (model?.isValidMove({
-          from: piece.location,
-          to: location,
+          source: piece.location,
+          target: location,
           piece: piece.type
         })) {
           setState("validMove");
@@ -292,8 +261,7 @@ var Piece = /* @__PURE__ */ (0, import_react5.memo)(({ classNames, piece, orient
     Component
   }, Piece.displayName, false);
   const { model } = useBoardContext();
-  const { dragging: isDragging, promoting } = useBoardContext();
-  const promotingRef = (0, import_react_ui.useDynamicRef)(promoting);
+  const { dragging: isDragging } = useBoardContext();
   const [dragging, setDragging] = (0, import_react5.useState)(false);
   const [preview, setPreview] = (0, import_react5.useState)();
   const [current, setCurrent] = (0, import_react5.useState)({});
@@ -302,7 +270,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: 44,
+      L: 43,
       S: void 0,
       A: [
         "el",
@@ -319,7 +287,7 @@ var Piece = /* @__PURE__ */ (0, import_react5.memo)(({ classNames, piece, orient
           source: source.data
         }, {
           F: __dxlog_file3,
-          L: 50,
+          L: 49,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -341,14 +309,15 @@ var Piece = /* @__PURE__ */ (0, import_react5.memo)(({ classNames, piece, orient
           nativeSetDragImage
         });
       },
-      canDrag: () => !promotingRef.current && model?.turn === piece.side,
+      canDrag: () => model?.turn === piece.side,
       onDragStart: () => setDragging(true),
-      onDrop: ({ location: { current: current2 } }) => {
-        const location = current2.dropTargets[0].data.location;
-        if (isLocation(location)) {
-          setCurrent((current3) => ({
-            ...current3,
-            location
+      onDrop: ({ location }) => {
+        const drop = location.current.dropTargets[0].data;
+        const loc = drop.location;
+        if (isLocation(loc)) {
+          setCurrent((current2) => ({
+            ...current2,
+            location: loc
           }));
         }
         setDragging(false);
@@ -581,47 +550,33 @@ var locationToPos = ([row, col]) => {
 };
 var styles = {
   neutral: {
-    black: "bg-neutral-50",
     white: "bg-neutral-200",
-    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"
+    black: "bg-neutral-50"
   },
   blue: {
-    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"
+    white: "bg-[#ccd3db]",
+    black: "bg-[#6c95b9]"
   }
 };
-var boardStyles = styles.original;
 var getSquareColor = ([row, col]) => {
-  return (col + row) % 2 === 0 ? boardStyles.white : boardStyles.black;
+  return (col + row) % 2 === 0 ? styles.blue.white : styles.blue.black;
 };
-var makeMove = (game, move) => {
-  const from = locationToPos(move.from);
-  const to = locationToPos(move.to);
+var makeMove = (game, { source, target }) => {
+  const s = locationToPos(source);
+  const t = locationToPos(target);
   try {
     (0, import_log4.log)("makeMove", {
-      move
+      s,
+      t
     }, {
       F: __dxlog_file4,
-      L: 72,
+      L: 58,
       S: void 0,
       C: (f, a) => f(...a)
     });
-    const promotion = move.promotion ? move.promotion[1].toLowerCase() : "q";
     game.move({
-      from,
-      to,
-      promotion
+      from: s,
+      to: t
     }, {
       strict: false
     });
@@ -655,11 +610,6 @@ 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) {
@@ -731,7 +681,7 @@ var mapPieces = (before, after) => {
     added: Object.keys(difference.added).length
   }, {
     F: __dxlog_file4,
-    L: 205,
+    L: 184,
     S: void 0,
     C: (f, a) => f(...a)
   });
@@ -746,7 +696,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, promoting, onPromotion } = useBoardContext();
+  const { model } = useBoardContext();
   const locations = (0, import_react6.useMemo)(() => {
     return Array.from({
       length: rows
@@ -792,19 +742,15 @@ 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 {
-        piece,
-        bounds
+        bounds,
+        piece
       };
-    }).filter(import_util.isNotFalsy);
+    });
   }, [
     grid,
-    model?.pieces.value,
-    promoting
+    model?.pieces.value
   ]);
   return /* @__PURE__ */ import_react6.default.createElement("div", {
     ref: containerRef,
@@ -819,7 +765,7 @@ var Chessboard = /* @__PURE__ */ (0, import_react6.memo)(({ orientation, showLab
     bounds: grid[locationToString(location)],
     classNames: getSquareColor(location)
   }))), /* @__PURE__ */ import_react6.default.createElement("div", {
-    className: (0, import_react_ui_theme5.mx)(promoting && "opacity-50")
+    className: "grow"
   }, positions.map(({ bounds, piece }) => /* @__PURE__ */ import_react6.default.createElement(Piece, {
     key: piece.id,
     piece,
@@ -827,61 +773,12 @@ 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,
@@ -889,10 +786,8 @@ var PromotionSelector = ({ grid, piece, onSelect }) => {
   ChessModel,
   ChessPieces,
   Chessboard,
-  Container,
   Piece,
   Square,
-  boardStyles,
   getRelativeBounds,
   getSquareColor,
   isEqualLocation,
@@ -903,6 +798,7 @@ var PromotionSelector = ({ grid, piece, onSelect }) => {
   mapPieces,
   posToLocation,
   stringToLocation,
+  styles,
   useBoardContext
 });
 //# sourceMappingURL=index.cjs.map