@dxos/react-ui-gameboard 0.8.4-main.b97322e → 0.8.4-main.dedc0f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-gameboard",
-  "version": "0.8.4-main.b97322e",
+  "version": "0.8.4-main.dedc0f3",
   "description": "Game board.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -9,6 +9,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -27,13 +28,14 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.9.0",
-    "chess.js": "^1.0.0",
+    "@radix-ui/react-context": "1.1.1",
+    "chess.js": "^1.4.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/debug": "0.8.4-main.b97322e",
-    "@dxos/invariant": "0.8.4-main.b97322e",
-    "@dxos/node-std": "0.8.4-main.b97322e",
-    "@dxos/log": "0.8.4-main.b97322e",
-    "@dxos/util": "0.8.4-main.b97322e"
+    "@dxos/debug": "0.8.4-main.dedc0f3",
+    "@dxos/invariant": "0.8.4-main.dedc0f3",
+    "@dxos/log": "0.8.4-main.dedc0f3",
+    "@dxos/node-std": "0.8.4-main.dedc0f3",
+    "@dxos/util": "0.8.4-main.dedc0f3"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
@@ -43,16 +45,16 @@
     "lodash.defaultsdeep": "^4.6.1",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/storybook-utils": "0.8.4-main.b97322e"
+    "vite": "7.1.1",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
+    "@dxos/storybook-utils": "0.8.4-main.dedc0f3"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
   },
   "publishConfig": {
     "access": "public"

package/src/{Chessboard → components/Chessboard}/Chessboard.stories.tsx

@@ -4,29 +4,30 @@
 
 import '@dxos-theme';
 
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 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';
 
-import { Chessboard, type ChessboardProps } from './Chessboard';
+import { Gameboard, type GameboardRootProps, type Move, type Player } from '../Gameboard';
+
 import { ChessModel } from './chess';
-import { Gameboard, type GameboardRootProps, type Player, type Move } from '../Gameboard';
+import { Chessboard, type ChessboardProps } from './Chessboard';
 
-type RenderProps = Pick<ChessboardProps, 'orientation' | 'showLabels' | 'debug'> & {
-  fen: string;
+type DefaultStoryProps = Pick<ChessboardProps, 'orientation' | 'showLabels' | 'debug'> & {
+  pgn?: string;
 };
 
-const DefaultStory = ({ fen, orientation: _orientation, ...props }: RenderProps) => {
-  const model = useMemo(() => new ChessModel(fen), [fen]);
+const DefaultStory = ({ orientation: _orientation, pgn, ...props }: DefaultStoryProps) => {
+  const model = useMemo(() => new ChessModel(pgn), [pgn]);
   const [orientation, setOrientation] = useState<Player | undefined>(_orientation);
 
-  const handleDrop = useCallback<NonNullable<GameboardRootProps['onDrop']>>(
+  const handleDrop = useCallback<NonNullable<GameboardRootProps<ChessModel>['onDrop']>>(
     (move: Move) => {
-      log.info('handleDrop', { move });
-      return model.makeMove(move);
+      const result = model.makeMove(move);
+      console.log(model.pgn);
+      return result;
     },
     [model],
   );
@@ -34,7 +35,7 @@ const DefaultStory = ({ fen, orientation: _orientation, ...props }: RenderProps)
   return (
     <div className='flex flex-col grow gap-2 overflow-hidden'>
       <Toolbar.Root>
-        <Button onClick={() => model.initialize()}>Reset</Button>
+        <Button onClick={() => model.update()}>Reset</Button>
         <Button onClick={() => model.makeRandomMove()}>Move</Button>
         <div className='grow'></div>
         <Button
@@ -44,7 +45,7 @@ const DefaultStory = ({ fen, orientation: _orientation, ...props }: RenderProps)
         </Button>
       </Toolbar.Root>
       <Gameboard.Root model={model} onDrop={handleDrop}>
-        <Gameboard.Content>
+        <Gameboard.Content grow contain>
           <Chessboard orientation={orientation} {...props} />
         </Gameboard.Content>
       </Gameboard.Root>
@@ -52,7 +53,7 @@ const DefaultStory = ({ fen, orientation: _orientation, ...props }: RenderProps)
   );
 };
 
-const Grid = (props: RenderProps) => {
+const GridStory = () => {
   const models = useMemo(() => Array.from({ length: 9 }).map(() => new ChessModel()), []);
   useEffect(() => {
     const i = setInterval(() => {
@@ -77,34 +78,34 @@ const Grid = (props: RenderProps) => {
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta = {
   title: 'ui/react-ui-gameboard/Chessboard',
   component: Chessboard,
   render: DefaultStory,
   decorators: [withTheme, withLayout({ fullscreen: true, classNames: '' })],
-};
+} satisfies Meta<typeof Chessboard>;
 
 export default meta;
 
-type Story = StoryObj<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
 export const Promotion: Story = {
   args: {
-    fen: '4k3/7P/8/8/8/8/1p6/4K3 w - - 0 1',
+    pgn: '1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. c3 Nf6 5. d4 exd4 6. cxd4 Bb4+ 7. Nc3 d5 8. exd5 Nxd5 9. O-O Be6 10. Qb3 Na5 11. Qa4+ c6 12. Bxd5 Bxc3 13. Bxe6 fxe6 14. d5 Qg5 15. dxe6 Kf8 16. e7+ Kg8 *',
   },
 };
 
 export const Debug: Story = {
   args: {
-    debug: true,
-    showLabels: true,
+    pgn: '1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. c3 Nf6 5. d4 exd4 6. cxd4 Bb4+ 7. Nc3 d5 8. exd5 Nxd5 9. O-O Be6 10. Qb3 Na5 11. Qa4+ c6 12. Bxd5 Bxc3 13. Bxe6 fxe6 *',
     orientation: 'black',
-    fen: 'q3k1nr/1pp1nQpp/3p4/1P2p3/4P3/B1PP1b2/B5PP/5K2 b k - 0 17',
+    showLabels: true,
+    debug: true,
   },
 };
 
-export const Nine: Story = {
-  render: Grid,
+export const Grid = {
+  render: GridStory,
 };

package/src/{Chessboard → components/Chessboard}/Chessboard.tsx

@@ -2,26 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type PropsWithChildren, useRef, useMemo, useEffect, useState, memo } from 'react';
+import React, { type PropsWithChildren, forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-import { type ThemedClassName, useTrackProps } from '@dxos/react-ui';
+import { type ThemedClassName, useForwardedRef, 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 DOMRectBounds,
+  Gameboard,
   type Location,
   type PieceRecord,
   type Player,
-  Piece,
-  Square,
   getRelativeBounds,
   locationToString,
-  useBoardContext,
+  useGameboardContext,
 } from '../Gameboard';
 
+import { type ChessModel, type ChessPiece, ChessPieces, boardStyles, getSquareColor, locationToPos } from './chess';
+
 export type ChessboardProps = ThemedClassName<
   PropsWithChildren<{
     orientation?: Player;
@@ -35,13 +35,15 @@ export type ChessboardProps = ThemedClassName<
 /**
  * Chessboard layout.
  */
-export const Chessboard = memo(
-  ({ orientation, showLabels, debug, rows = 8, cols = 8, classNames }: ChessboardProps) => {
+const ChessboardComponent = forwardRef<HTMLDivElement, ChessboardProps>(
+  ({ classNames, orientation, showLabels, debug, rows = 8, cols = 8 }, forwardedRef) => {
     useTrackProps({ orientation, showLabels, debug }, Chessboard.displayName, false);
-    const { ref: containerRef, width, height } = useResizeDetector({ refreshRate: 200 });
-    const { model, promoting, onPromotion } = useBoardContext();
+    const targetRef = useForwardedRef(forwardedRef);
+    const { width, height } = useResizeDetector({ targetRef, refreshRate: 200 });
+    const { model, promoting, onPromotion } = useGameboardContext<ChessModel>(Chessboard.displayName!);
 
-    const locations = useMemo<Location[]>(() => {
+    // Board squares.
+    const squares = useMemo<Location[]>(() => {
       return Array.from({ length: rows }, (_, i) => (orientation === 'black' ? i : rows - 1 - i)).flatMap((row) =>
         Array.from({ length: cols }).map((_, col) => [row, col] as Location),
       );
@@ -49,7 +51,7 @@ export const Chessboard = memo(
 
     // Use DOM grid layout to position squares.
     const layout = useMemo(() => {
-      return locations.map((location) => {
+      return squares.map((location) => {
         return (
           <div
             key={locationToString(location)}
@@ -59,14 +61,14 @@ export const Chessboard = memo(
           />
         );
       });
-    }, [locations]);
+    }, [squares]);
 
     // Build map of square locations to bounds.
     const [grid, setGrid] = useState<Record<string, DOMRectBounds>>({});
     const gridRef = useRef<HTMLDivElement>(null);
     useEffect(() => {
       setGrid(
-        locations.reduce(
+        squares.reduce(
           (acc, location) => {
             const square = getSquareLocation(gridRef.current!, location)!;
             const bounds = getRelativeBounds(gridRef.current!, square);
@@ -75,7 +77,7 @@ export const Chessboard = memo(
           {} as Record<string, DOMRectBounds>,
         ),
       );
-    }, [locations, width, height]);
+    }, [squares, width, height]);
 
     // Get the bounds of each square and piece.
     const positions = useMemo<{ piece: PieceRecord; bounds: DOMRectBounds }[]>(() => {
@@ -96,13 +98,15 @@ export const Chessboard = memo(
     }, [grid, model?.pieces.value, promoting]);
 
     return (
-      <div ref={containerRef} className={mx('relative', classNames)}>
+      <div ref={targetRef} tabIndex={0} className={mx('relative outline-none', classNames)}>
+        {/* DOM Layout. */}
         <div ref={gridRef} className='grid grid-rows-8 grid-cols-8 aspect-square select-none'>
           {layout}
         </div>
+        {/* Squares. */}
         <div>
-          {locations.map((location) => (
-            <Square
+          {squares.map((location) => (
+            <Gameboard.Square
               key={locationToString(location)}
               location={location}
               label={showLabels ? locationToPos(location) : undefined}
@@ -111,9 +115,10 @@ export const Chessboard = memo(
             />
           ))}
         </div>
+        {/* Pieces. */}
         <div className={mx(promoting && 'opacity-50')}>
           {positions.map(({ bounds, piece }) => (
-            <Piece
+            <Gameboard.Piece
               key={piece.id}
               piece={piece}
               bounds={bounds}
@@ -123,32 +128,29 @@ export const Chessboard = memo(
             />
           ))}
         </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>
+        {/* Promotion selector. */}
+        {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>
     );
   },
 );
 
-Chessboard.displayName = 'Chessboard';
+ChessboardComponent.displayName = 'Chessboard';
 
-const getSquareLocation = (container: HTMLElement, location: Location): HTMLElement | null => {
-  return container.querySelector(`[data-location="${locationToString(location)}"]`);
-};
+export const Chessboard = memo(ChessboardComponent);
 
 const PromotionSelector = ({
   grid,
@@ -176,19 +178,22 @@ const PromotionSelector = ({
     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>
+        <Gameboard.Piece
+          key={piece.id}
+          classNames={mx('border-2 border-neutral-700 rounded-full', boardStyles.promotion)}
+          piece={piece}
+          bounds={bounds}
+          Component={ChessPieces[piece.type as ChessPiece]}
+          onClick={() => handleSelect(piece)}
+        />
       ))}
-    </div>
+    </>
   );
 };
+
+const getSquareLocation = (container: HTMLElement, location: Location): HTMLElement | null => {
+  return container.querySelector(`[data-location="${locationToString(location)}"]`);
+};

package/src/components/Chessboard/chess.test.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Chess as ChessJS } from 'chess.js';
+import { describe, it } from 'vitest';
+
+import { createPieceMap } from './chess';
+
+describe('ChessModel', () => {
+  it('should update pieces', ({ expect }) => {
+    const chess = new ChessJS();
+    chess.loadPgn(
+      '1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. c3 Nf6 5. d4 exd4 6. cxd4 Bb4+ 7. Nc3 d5 8. exd5 Nxd5 9. O-O Be6 10. Qb3 Na5 11. Qa4+ c6 12. Bxd5 Bxc3 13. Bxe6 fxe6 *',
+    );
+    const pieces = createPieceMap(chess);
+    expect(pieces).to.exist;
+  });
+});