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

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, { useCallback, useEffect, useState } from "react";
+import React2, { useEffect, useState } from "react";
 import { log } from "@dxos/log";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
@@ -54,30 +54,14 @@ 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: 45,
+          L: 33,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -89,7 +73,7 @@ var Root = ({ children, classNames, model, onDrop }) => {
           location
         }, {
           F: __dxlog_file,
-          L: 49,
+          L: 37,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -102,31 +86,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__ */ React2.createElement(BoardContext.Provider, {
     value: {
       model,
-      dragging,
-      promoting,
-      onPromotion
+      dragging
     }
   }, /* @__PURE__ */ React2.createElement(Container, {
     classNames: mx2("aspect-square", classNames)
@@ -189,8 +161,8 @@ var Square = /* @__PURE__ */ memo(({ location, bounds, label, classNames }) => {
           return;
         }
         if (model?.isValidMove({
-          from: piece.location,
-          to: location,
+          source: piece.location,
+          target: location,
           piece: piece.type
         })) {
           setState("validMove");
@@ -223,7 +195,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 { useDynamicRef, useTrackProps } from "@dxos/react-ui";
+import { 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 }) => {
@@ -236,8 +208,7 @@ var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, lab
     Component
   }, Piece.displayName, false);
   const { model } = useBoardContext();
-  const { dragging: isDragging, promoting } = useBoardContext();
-  const promotingRef = useDynamicRef(promoting);
+  const { dragging: isDragging } = useBoardContext();
   const [dragging, setDragging] = useState3(false);
   const [preview, setPreview] = useState3();
   const [current, setCurrent] = useState3({});
@@ -246,7 +217,7 @@ var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, lab
     const el = ref.current;
     invariant2(el, void 0, {
       F: __dxlog_file3,
-      L: 44,
+      L: 43,
       S: void 0,
       A: [
         "el",
@@ -263,7 +234,7 @@ var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, lab
           source: source.data
         }, {
           F: __dxlog_file3,
-          L: 50,
+          L: 49,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -285,14 +256,15 @@ var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, lab
           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);
@@ -570,47 +542,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 {
     log4("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
     });
@@ -644,11 +602,6 @@ 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) {
@@ -720,7 +673,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)
   });
@@ -731,8 +684,6 @@ 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,
@@ -742,7 +693,7 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
   const { ref: containerRef, width, height } = useResizeDetector({
     refreshRate: 200
   });
-  const { model, promoting, onPromotion } = useBoardContext();
+  const { model } = useBoardContext();
   const locations = useMemo(() => {
     return Array.from({
       length: rows
@@ -788,19 +739,15 @@ 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 {
-        piece,
-        bounds
+        bounds,
+        piece
       };
-    }).filter(isNotFalsy);
+    });
   }, [
     grid,
-    model?.pieces.value,
-    promoting
+    model?.pieces.value
   ]);
   return /* @__PURE__ */ React17.createElement("div", {
     ref: containerRef,
@@ -815,7 +762,7 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
     bounds: grid[locationToString(location)],
     classNames: getSquareColor(location)
   }))), /* @__PURE__ */ React17.createElement("div", {
-    className: mx5(promoting && "opacity-50")
+    className: "grow"
   }, positions.map(({ bounds, piece }) => /* @__PURE__ */ React17.createElement(Piece, {
     key: piece.id,
     piece,
@@ -823,71 +770,20 @@ 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,
@@ -898,6 +794,7 @@ export {
   mapPieces,
   posToLocation,
   stringToLocation,
+  styles,
   useBoardContext
 };
 //# sourceMappingURL=index.mjs.map