@dxos/react-ui-gameboard 0.7.5-main.e9bb01b → 0.7.5-staging.2ff1350

package/dist/lib/browser/index.mjs

@@ -33,7 +33,7 @@ var getRelativeBounds = (container, element) => {
 
 // packages/ui/react-ui-gameboard/src/Board/Board.tsx
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import React2, { useEffect, useState } from "react";
+import React2, { useCallback, useEffect, useState } from "react";
 import { log } from "@dxos/log";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
@@ -54,14 +54,30 @@ var Container = /* @__PURE__ */ forwardRef(({ children, classNames, style }, for
 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] = useState(false);
+  const [promoting, setPromoting] = useState();
+  const onPromotion = useCallback((move) => {
+    log("onPromotion", {
+      move
+    }, {
+      F: __dxlog_file,
+      L: 32,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    setPromoting(void 0);
+    onDrop?.(move);
+  }, []);
   useEffect(() => {
+    if (!model) {
+      return;
+    }
     return monitorForElements({
       onDragStart: ({ source }) => {
         log("onDragStart", {
           source
         }, {
           F: __dxlog_file,
-          L: 33,
+          L: 45,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -73,7 +89,7 @@ var Root = ({ children, classNames, model, onDrop }) => {
           location
         }, {
           F: __dxlog_file,
-          L: 37,
+          L: 49,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -86,19 +102,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__ */ React2.createElement(BoardContext.Provider, {
     value: {
       model,
-      dragging
+      dragging,
+      promoting,
+      onPromotion
     }
   }, /* @__PURE__ */ React2.createElement(Container, {
     classNames: mx2("aspect-square", classNames)
@@ -161,8 +189,8 @@ var Square = /* @__PURE__ */ memo(({ location, bounds, label, classNames }) => {
           return;
         }
         if (model?.isValidMove({
-          source: piece.location,
-          target: location,
+          from: piece.location,
+          to: location,
           piece: piece.type
         })) {
           setState("validMove");
@@ -195,7 +223,7 @@ import React4, { useState as useState3, useRef as useRef2, useEffect as useEffec
 import { createPortal } from "react-dom";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { log as log3 } from "@dxos/log";
-import { useTrackProps } from "@dxos/react-ui";
+import { useDynamicRef, useTrackProps } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-gameboard/src/Board/Piece.tsx";
 var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, label, Component }) => {
@@ -208,7 +236,8 @@ var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, lab
     Component
   }, Piece.displayName, false);
   const { model } = useBoardContext();
-  const { dragging: isDragging } = useBoardContext();
+  const { dragging: isDragging, promoting } = useBoardContext();
+  const promotingRef = useDynamicRef(promoting);
   const [dragging, setDragging] = useState3(false);
   const [preview, setPreview] = useState3();
   const [current, setCurrent] = useState3({});
@@ -217,7 +246,7 @@ var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, lab
     const el = ref.current;
     invariant2(el, void 0, {
       F: __dxlog_file3,
-      L: 43,
+      L: 44,
       S: void 0,
       A: [
         "el",
@@ -234,7 +263,7 @@ var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, lab
           source: source.data
         }, {
           F: __dxlog_file3,
-          L: 49,
+          L: 50,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -256,15 +285,14 @@ var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, lab
           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);
@@ -542,33 +570,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 {
     log4("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
     });
@@ -602,6 +644,11 @@ var ChessModel = class {
   isValidMove(move) {
     return makeMove(new 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) {
@@ -673,7 +720,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)
   });
@@ -684,6 +731,8 @@ var mapPieces = (before, after) => {
 import React17, { useRef as useRef3, useMemo, useEffect as useEffect4, useState as useState4, memo as memo3 } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { useTrackProps as useTrackProps2 } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/react-ui-theme";
+import { isNotFalsy } from "@dxos/util";
 var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows = 8, cols = 8 }) => {
   useTrackProps2({
     orientation,
@@ -693,7 +742,7 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
   const { ref: containerRef, width, height } = useResizeDetector({
     refreshRate: 200
   });
-  const { model } = useBoardContext();
+  const { model, promoting, onPromotion } = useBoardContext();
   const locations = useMemo(() => {
     return Array.from({
       length: rows
@@ -739,15 +788,19 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
       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(isNotFalsy);
   }, [
     grid,
-    model?.pieces.value
+    model?.pieces.value,
+    promoting
   ]);
   return /* @__PURE__ */ React17.createElement("div", {
     ref: containerRef,
@@ -762,7 +815,7 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
     bounds: grid[locationToString(location)],
     classNames: getSquareColor(location)
   }))), /* @__PURE__ */ React17.createElement("div", {
-    className: "grow"
+    className: mx5(promoting && "opacity-50")
   }, positions.map(({ bounds, piece }) => /* @__PURE__ */ React17.createElement(Piece, {
     key: piece.id,
     piece,
@@ -770,20 +823,71 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
     label: debug ? piece.id : void 0,
     orientation,
     Component: ChessPieces[piece.type]
-  }))));
+  }))), /* @__PURE__ */ React17.createElement("div", null, promoting && /* @__PURE__ */ React17.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__ */ React17.createElement("div", null, positions.map(({ piece: piece2, bounds }) => /* @__PURE__ */ React17.createElement("div", {
+    key: piece2.id,
+    style: bounds,
+    onClick: () => handleSelect(piece2)
+  }, /* @__PURE__ */ React17.createElement(Piece, {
+    piece: piece2,
+    bounds,
+    Component: ChessPieces[piece2.type],
+    classNames: mx5("border-2 border-neutral-700 rounded-full", boardStyles.promotion)
+  }))));
+};
 export {
   Board,
   BoardContext,
   ChessModel,
   ChessPieces,
   Chessboard,
+  Container,
   Piece,
   Square,
+  boardStyles,
   getRelativeBounds,
   getSquareColor,
   isEqualLocation,
@@ -794,7 +898,6 @@ export {
   mapPieces,
   posToLocation,
   stringToLocation,
-  styles,
   useBoardContext
 };
 //# sourceMappingURL=index.mjs.map