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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-gameboard",
-  "version": "0.7.5-labs.e27f9b9",
+  "version": "0.7.5-main.e9bb01b",
   "description": "Game board.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -24,11 +24,11 @@
     "@preact/signals-core": "^1.6.0",
     "chess.js": "^1.0.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/debug": "0.7.5-labs.e27f9b9",
-    "@dxos/invariant": "0.7.5-labs.e27f9b9",
-    "@dxos/log": "0.7.5-labs.e27f9b9",
-    "@dxos/util": "0.7.5-labs.e27f9b9",
-    "@dxos/node-std": "0.7.5-labs.e27f9b9"
+    "@dxos/invariant": "0.7.5-main.e9bb01b",
+    "@dxos/log": "0.7.5-main.e9bb01b",
+    "@dxos/util": "0.7.5-main.e9bb01b",
+    "@dxos/node-std": "0.7.5-main.e9bb01b",
+    "@dxos/debug": "0.7.5-main.e9bb01b"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
@@ -39,15 +39,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-theme": "0.7.5-labs.e27f9b9",
-    "@dxos/storybook-utils": "0.7.5-labs.e27f9b9"
+    "@dxos/react-ui": "0.7.5-main.e9bb01b",
+    "@dxos/storybook-utils": "0.7.5-main.e9bb01b",
+    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-theme": "0.7.5-labs.e27f9b9"
+    "@dxos/react-ui": "0.7.5-main.e9bb01b",
+    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b"
   },
   "publishConfig": {
     "access": "public"

package/src/Board/Board.tsx

@@ -3,15 +3,15 @@
 //
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import React, { type PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import React, { type PropsWithChildren, useEffect, useState } from 'react';
 
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { Container } from './Container';
-import { BoardContext, type BoardContextType } from './context';
-import { type BoardModel, isLocation, isPiece, type Move, type PieceRecord } from './types';
+import { BoardContext } from './context';
+import { type BoardModel, isLocation, isPiece, type Move } from './types';
 
 type RootProps = ThemedClassName<
   PropsWithChildren<{
@@ -25,20 +25,8 @@ type RootProps = ThemedClassName<
  */
 const Root = ({ children, classNames, model, onDrop }: RootProps) => {
   const [dragging, setDragging] = useState(false);
-  const [promoting, setPromoting] = useState<PieceRecord | undefined>();
-
-  // Handle promotion.
-  const onPromotion = useCallback<BoardContextType['onPromotion']>((move) => {
-    log('onPromotion', { move });
-    setPromoting(undefined);
-    onDrop?.(move);
-  }, []);
 
   useEffect(() => {
-    if (!model) {
-      return;
-    }
-
     // TODO(burdon): Should target specific container.
     return monitorForElements({
       onDragStart: ({ source }) => {
@@ -58,20 +46,14 @@ const Root = ({ children, classNames, model, onDrop }: RootProps) => {
           return;
         }
 
-        const move: Move = { from: piece.location, to: targetLocation, piece: piece.type };
-        if (model.canPromote?.(move)) {
-          setPromoting({ ...piece, location: targetLocation });
-        } else {
-          onDrop?.(move);
-        }
-
+        onDrop?.({ source: piece.location, target: targetLocation, piece: piece.type });
         setDragging(false);
       },
     });
-  }, [model]);
+  }, []);
 
   return (
-    <BoardContext.Provider value={{ model, dragging, promoting, onPromotion }}>
+    <BoardContext.Provider value={{ model, dragging }}>
       <Container classNames={mx('aspect-square', classNames)}>{children}</Container>
     </BoardContext.Provider>
   );

package/src/Board/Piece.tsx

@@ -11,7 +11,7 @@ import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { useDynamicRef, useTrackProps, type ThemedClassName } from '@dxos/react-ui';
+import { useTrackProps, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useBoardContext } from './context';
@@ -30,8 +30,7 @@ export const Piece = memo(({ classNames, piece, orientation, bounds, label, Comp
   useTrackProps({ classNames, piece, orientation, bounds, label, Component }, Piece.displayName, false);
   const { model } = useBoardContext();
 
-  const { dragging: isDragging, promoting } = useBoardContext();
-  const promotingRef = useDynamicRef(promoting);
+  const { dragging: isDragging } = useBoardContext();
   const [dragging, setDragging] = useState(false);
   const [preview, setPreview] = useState<HTMLElement>();
 
@@ -66,20 +65,20 @@ export const Piece = memo(({ classNames, piece, orientation, bounds, label, Comp
           nativeSetDragImage,
         });
       },
-      canDrag: () => !promotingRef.current && model?.turn === piece.side,
+      canDrag: () => model?.turn === piece.side,
       onDragStart: () => setDragging(true),
-      onDrop: ({ location: { current } }) => {
-        const location = current.dropTargets[0].data.location;
-        if (isLocation(location)) {
-          setCurrent((current) => ({ ...current, location }));
+      onDrop: ({ location }) => {
+        const drop = location.current.dropTargets[0].data;
+        const loc = drop.location;
+        if (isLocation(loc)) {
+          setCurrent((current) => ({ ...current, location: loc }));
         }
-
         setDragging(false);
       },
     });
   }, [model, piece]);
 
-  // Must update position independently of render cycle (otherwise animation is interrupted).
+  // Update position independently of render cycle (otherwise animation is interrupted).
   useEffect(() => {
     requestAnimationFrame(() => {
       if (!ref.current || !bounds) {

package/src/Board/Square.tsx

@@ -45,7 +45,7 @@ export const Square = memo(({ location, bounds, label, classNames }: SquareProps
           return;
         }
 
-        if (model?.isValidMove({ from: piece.location, to: location, piece: piece.type })) {
+        if (model?.isValidMove({ source: piece.location, target: location, piece: piece.type })) {
           setState('validMove');
         } else {
           setState('invalidMove');

package/src/Board/context.ts

@@ -6,16 +6,9 @@ import { createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { type PieceRecord, type BoardModel, type Move } from './types';
+import { type BoardModel } from './types';
 
-export type BoardContextType = {
-  model?: BoardModel;
-  dragging?: boolean; // TODO(burdon): Change to PieceRecord.
-  promoting?: PieceRecord;
-  onPromotion: (move: Move) => void;
-};
-
-export const BoardContext = createContext<BoardContextType | undefined>(undefined);
+export const BoardContext = createContext<{ model?: BoardModel; dragging: boolean } | undefined>(undefined);
 
 export const useBoardContext = () => {
   return useContext(BoardContext) ?? raise(new Error('Missing BoardContext'));

package/src/Board/index.ts

@@ -7,6 +7,5 @@ export * from './types';
 export * from './util';
 
 export * from './Board';
-export * from './Container';
 export * from './Square';
 export * from './Piece';

package/src/Board/types.ts

@@ -23,8 +23,8 @@ export type PieceRecord<T extends PieceType = PieceType> = {
 export type PieceMap<T extends PieceType = PieceType> = Record<string, PieceRecord<T>>;
 
 export type Move = {
-  from: Location;
-  to: Location;
+  source: Location;
+  target: Location;
   piece: PieceType;
   promotion?: PieceType;
 };
@@ -47,12 +47,8 @@ export const isLocation = (token: unknown): token is Location =>
 
 export const isEqualLocation = (l1: Location, l2: Location): boolean => l1[0] === l2[0] && l1[1] === l2[1];
 
-/**
- * Generic board model.
- */
 export interface BoardModel<T extends PieceType = PieceType> {
   turn: Player;
   pieces: ReadonlySignal<PieceMap<T>>;
   isValidMove: (move: Move) => boolean;
-  canPromote?: (move: Move) => boolean;
 }

package/src/Chessboard/Chessboard.stories.tsx

@@ -5,9 +5,8 @@
 import '@dxos-theme';
 
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { log } from '@dxos/log';
 import { Button, Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -23,13 +22,7 @@ const Render = ({ fen, orientation: _orientation, ...props }: RenderProps) => {
   const model = useMemo(() => new ChessModel(fen), [fen]);
   const [orientation, setOrientation] = useState<Player | undefined>(_orientation);
 
-  const handleDrop = useCallback<NonNullable<BoardRootProps['onDrop']>>(
-    (move: Move) => {
-      log.info('handleDrop', { move });
-      return model.makeMove(move);
-    },
-    [model],
-  );
+  const handleDrop = useCallback<NonNullable<BoardRootProps['onDrop']>>((move: Move) => model.makeMove(move), [model]);
 
   return (
     <div className='flex flex-col grow gap-2 overflow-hidden'>
@@ -50,36 +43,11 @@ const Render = ({ fen, orientation: _orientation, ...props }: RenderProps) => {
   );
 };
 
-const Grid = (props: RenderProps) => {
-  const models = useMemo(() => Array.from({ length: 9 }).map(() => new ChessModel()), []);
-  useEffect(() => {
-    const i = setInterval(() => {
-      const model = models[Math.floor(Math.random() * models.length)];
-      model.makeRandomMove();
-    }, 100);
-    return () => clearInterval(i);
-  }, []);
-
-  return (
-    <div className='h-full aspect-square mx-auto'>
-      <div className='grid grid-cols-3 gap-2'>
-        {models.map((model, i) => (
-          <div key={i} className='aspect-square'>
-            <Board.Root model={model}>
-              <Chessboard />
-            </Board.Root>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
 const meta: Meta<typeof Render> = {
   title: 'ui/react-ui-gameboard/Chessboard',
   component: Chessboard,
   render: Render,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: '' })],
+  decorators: [withTheme, withLayout({ fullscreen: true })],
 };
 
 export default meta;
@@ -88,12 +56,6 @@ type Story = StoryObj<typeof Render>;
 
 export const Default: Story = {};
 
-export const Promotion: Story = {
-  args: {
-    fen: '4k3/7P/8/8/8/8/1p6/4K3 w - - 0 1',
-  },
-};
-
 export const Debug: Story = {
   args: {
     debug: true,
@@ -102,7 +64,3 @@ export const Debug: Story = {
     fen: 'q3k1nr/1pp1nQpp/3p4/1P2p3/4P3/B1PP1b2/B5PP/5K2 b k - 0 17',
   },
 };
-
-export const Nine: Story = {
-  render: Grid,
-};

package/src/Chessboard/Chessboard.tsx

@@ -6,10 +6,8 @@ import React, { type PropsWithChildren, useRef, useMemo, useEffect, useState, me
 import { useResizeDetector } from 'react-resize-detector';
 
 import { useTrackProps } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { isNotFalsy } from '@dxos/util';
 
-import { boardStyles, type ChessPiece, ChessPieces, getSquareColor, locationToPos } from './chess';
+import { type ChessPiece, ChessPieces, getSquareColor, locationToPos } from './chess';
 import {
   type DOMRectBounds,
   type Location,
@@ -36,7 +34,7 @@ export type ChessboardProps = PropsWithChildren<{
 export const Chessboard = memo(({ orientation, showLabels, debug, rows = 8, cols = 8 }: ChessboardProps) => {
   useTrackProps({ orientation, showLabels, debug }, Chessboard.displayName, false);
   const { ref: containerRef, width, height } = useResizeDetector({ refreshRate: 200 });
-  const { model, promoting, onPromotion } = useBoardContext();
+  const { model } = useBoardContext();
 
   const locations = useMemo<Location[]>(() => {
     return Array.from({ length: rows }, (_, i) => (orientation === 'black' ? i : rows - 1 - i)).flatMap((row) =>
@@ -75,22 +73,16 @@ export const Chessboard = memo(({ orientation, showLabels, debug, rows = 8, cols
   }, [locations, width, height]);
 
   // Get the bounds of each square and piece.
-  const positions = useMemo<{ piece: PieceRecord; bounds: DOMRectBounds }[]>(() => {
+  const positions = useMemo<{ bounds: DOMRectBounds; piece: PieceRecord }[]>(() => {
     if (!gridRef.current) {
       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 };
-      })
-      .filter(isNotFalsy);
-  }, [grid, model?.pieces.value, promoting]);
+    return Object.values(model?.pieces.value ?? {}).map((piece) => {
+      const bounds = grid[locationToString(piece.location)];
+      return { bounds, piece };
+    });
+  }, [grid, model?.pieces.value]);
 
   return (
     <div ref={containerRef} className='relative'>
@@ -108,7 +100,7 @@ export const Chessboard = memo(({ orientation, showLabels, debug, rows = 8, cols
           />
         ))}
       </div>
-      <div className={mx(promoting && 'opacity-50')}>
+      <div className='grow'>
         {positions.map(({ bounds, piece }) => (
           <Piece
             key={piece.id}
@@ -120,22 +112,6 @@ export const Chessboard = memo(({ orientation, showLabels, debug, rows = 8, cols
           />
         ))}
       </div>
-      <div>
-        {promoting && (
-          <PromotionSelector
-            grid={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,
-              });
-            }}
-          />
-        )}
-      </div>
     </div>
   );
 });
@@ -145,46 +121,3 @@ Chessboard.displayName = 'Chessboard';
 const getSquareLocation = (container: HTMLElement, location: Location): HTMLElement | null => {
   return container.querySelector(`[data-location="${locationToString(location)}"]`);
 };
-
-const PromotionSelector = ({
-  grid,
-  piece,
-  onSelect,
-}: {
-  grid: Record<string, DOMRectBounds>;
-  piece: PieceRecord;
-  onSelect: (piece: PieceRecord) => void;
-}) => {
-  const positions = ['Q', 'N', 'R', 'B'].map((pieceType, i) => {
-    const location = [piece.location[0] + (piece.location[0] === 0 ? i : -i), piece.location[1]] as Location;
-    return {
-      piece: {
-        id: `promotion-${pieceType}`,
-        type: (piece.side === 'black' ? 'B' : 'W') + pieceType,
-        side: piece.side,
-        location,
-      },
-      bounds: grid[locationToString(location)],
-    };
-  });
-
-  const handleSelect = (selected: PieceRecord) => {
-    onSelect({ ...piece, type: selected.type });
-  };
-
-  // TODO(burdon): Circle.
-  return (
-    <div>
-      {positions.map(({ piece, bounds }) => (
-        <div key={piece.id} style={bounds} onClick={() => handleSelect(piece)}>
-          <Piece
-            piece={piece}
-            bounds={bounds}
-            Component={ChessPieces[piece.type as ChessPiece]}
-            classNames={mx('border-2 border-neutral-700 rounded-full', boardStyles.promotion)}
-          />
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/Chessboard/chess.ts

@@ -33,45 +33,30 @@ export const locationToPos = ([row, col]: Location): string => {
   return String.fromCharCode(col + 'a'.charCodeAt(0)) + (row + 1);
 };
 
-const styles = {
+export const 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]',
   },
 };
 
-export const boardStyles = styles.original;
-
 export const getSquareColor = ([row, col]: Location) => {
-  return (col + row) % 2 === 0 ? boardStyles.white : boardStyles.black;
+  return (col + row) % 2 === 0 ? styles.blue.white : styles.blue.black;
 };
 
 /**
  * Attempt move.
  */
-const makeMove = (game: Chess, move: Move): Chess | null => {
-  const from = locationToPos(move.from);
-  const to = locationToPos(move.to);
+const makeMove = (game: Chess, { source, target }: Move): Chess | null => {
+  const s = locationToPos(source);
+  const t = locationToPos(target);
   try {
-    log('makeMove', { move });
-    const promotion = move.promotion ? move.promotion[1].toLowerCase() : 'q';
-    game.move({ from, to, promotion }, { strict: false });
+    log('makeMove', { s, t });
+    game.move({ from: s, to: t }, { strict: false });
     return game;
   } catch (err) {
     // Ignore.
@@ -116,12 +101,6 @@ export class ChessModel implements BoardModel<ChessPiece> {
     return makeMove(new Chess(this._game.fen()), move) !== null;
   }
 
-  canPromote(move: Move): boolean {
-    const isPawnMove = move.piece === 'BP' || move.piece === 'WP';
-    const isToLastRank = move.to[0] === 0 || move.to[0] === 7;
-    return isPawnMove && isToLastRank;
-  }
-
   makeMove(move: Move): boolean {
     const game = makeMove(this._game, move);
     if (!game) {