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

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 = {
-  source: Location;
-  target: Location;
+  from: Location;
+  to: Location;
   piece: PieceType;
   promotion?: PieceType;
 };
@@ -47,8 +47,12 @@ 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,8 +5,9 @@
 import '@dxos-theme';
 
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { log } from '@dxos/log';
 import { Button, Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -22,7 +23,13 @@ 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) => model.makeMove(move), [model]);
+  const handleDrop = useCallback<NonNullable<BoardRootProps['onDrop']>>(
+    (move: Move) => {
+      log.info('handleDrop', { move });
+      return model.makeMove(move);
+    },
+    [model],
+  );
 
   return (
     <div className='flex flex-col grow gap-2 overflow-hidden'>
@@ -43,11 +50,36 @@ 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 })],
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: '' })],
 };
 
 export default meta;
@@ -56,6 +88,12 @@ 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,
@@ -64,3 +102,7 @@ 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,8 +6,10 @@ 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 { type ChessPiece, ChessPieces, getSquareColor, locationToPos } from './chess';
+import { boardStyles, type ChessPiece, ChessPieces, getSquareColor, locationToPos } from './chess';
 import {
   type DOMRectBounds,
   type Location,
@@ -34,7 +36,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 } = useBoardContext();
+  const { model, promoting, onPromotion } = useBoardContext();
 
   const locations = useMemo<Location[]>(() => {
     return Array.from({ length: rows }, (_, i) => (orientation === 'black' ? i : rows - 1 - i)).flatMap((row) =>
@@ -73,16 +75,22 @@ export const Chessboard = memo(({ orientation, showLabels, debug, rows = 8, cols
   }, [locations, width, height]);
 
   // Get the bounds of each square and piece.
-  const positions = useMemo<{ bounds: DOMRectBounds; piece: PieceRecord }[]>(() => {
+  const positions = useMemo<{ piece: PieceRecord; bounds: DOMRectBounds }[]>(() => {
     if (!gridRef.current) {
       return [];
     }
 
-    return Object.values(model?.pieces.value ?? {}).map((piece) => {
-      const bounds = grid[locationToString(piece.location)];
-      return { bounds, piece };
-    });
-  }, [grid, model?.pieces.value]);
+    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 (
     <div ref={containerRef} className='relative'>
@@ -100,7 +108,7 @@ export const Chessboard = memo(({ orientation, showLabels, debug, rows = 8, cols
           />
         ))}
       </div>
-      <div className='grow'>
+      <div className={mx(promoting && 'opacity-50')}>
         {positions.map(({ bounds, piece }) => (
           <Piece
             key={piece.id}
@@ -112,6 +120,22 @@ 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>
   );
 });
@@ -121,3 +145,46 @@ 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,30 +33,45 @@ export const locationToPos = ([row, col]: Location): string => {
   return String.fromCharCode(col + 'a'.charCodeAt(0)) + (row + 1);
 };
 
-export const styles = {
+const styles = {
   neutral: {
-    white: 'bg-neutral-200',
     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',
   },
   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',
   },
 };
 
+export const boardStyles = styles.original;
+
 export const getSquareColor = ([row, col]: Location) => {
-  return (col + row) % 2 === 0 ? styles.blue.white : styles.blue.black;
+  return (col + row) % 2 === 0 ? boardStyles.white : boardStyles.black;
 };
 
 /**
  * Attempt move.
  */
-const makeMove = (game: Chess, { source, target }: Move): Chess | null => {
-  const s = locationToPos(source);
-  const t = locationToPos(target);
+const makeMove = (game: Chess, move: Move): Chess | null => {
+  const from = locationToPos(move.from);
+  const to = locationToPos(move.to);
   try {
-    log('makeMove', { s, t });
-    game.move({ from: s, to: t }, { strict: false });
+    log('makeMove', { move });
+    const promotion = move.promotion ? move.promotion[1].toLowerCase() : 'q';
+    game.move({ from, to, promotion }, { strict: false });
     return game;
   } catch (err) {
     // Ignore.
@@ -101,6 +116,12 @@ 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) {