@dxos/react-ui-gameboard 0.8.3 → 0.8.4-main.1068cf700f

package/package.json

@@ -1,55 +1,63 @@
 {
   "name": "@dxos/react-ui-gameboard",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1068cf700f",
   "description": "Game board.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "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"
     }
   },
   "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {}
+  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@radix-ui/react-context": "1.1.1",
     "chess.js": "^1.0.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/debug": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/node-std": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/debug": "0.8.4-main.1068cf700f",
+    "@dxos/invariant": "0.8.4-main.1068cf700f",
+    "@dxos/node-std": "0.8.4-main.1068cf700f",
+    "@dxos/util": "0.8.4-main.1068cf700f",
+    "@dxos/log": "0.8.4-main.1068cf700f"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
     "lodash.defaultsdeep": "^4.6.1",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "7.1.9",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/storybook-utils": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
   },
   "publishConfig": {
     "access": "public"
@@ -57,7 +65,7 @@
   "scripts": {
     "gen:pieces": "pnpm gen:pieces:chess",
     "gen:pieces:chess": "pnpm gen:pieces:chess:alpha && pnpm gen:pieces:chess:cburnett",
-    "gen:pieces:chess:alpha": "pnpm svgr --typescript --filename-case=camel --out-dir ./src/gen/pieces/chess/alpha ./assets/pieces/chess/alpha",
-    "gen:pieces:chess:cburnett": "pnpm svgr --typescript --filename-case=camel --out-dir ./src/gen/pieces/chess/cburnett ./assets/pieces/chess/cburnett"
+    "gen:pieces:chess:alpha": "pnpm svgr --typescript --filename-case=camel --out-dir ./src/gen/pieces/chess/alpha ./assets/pieces/chess/alpha > /dev/null",
+    "gen:pieces:chess:cburnett": "pnpm svgr --typescript --filename-case=camel --out-dir ./src/gen/pieces/chess/cburnett ./assets/pieces/chess/cburnett > /dev/null"
   }
 }

package/src/components/Chessboard/Chessboard.stories.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { RegistryContext } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+import { Button, Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
+
+import { Gameboard, type GameboardRootProps, type Move, type Player } from '../Gameboard';
+
+import { ChessModel } from './chess';
+import { Chessboard, type ChessboardProps } from './Chessboard';
+
+type DefaultStoryProps = Pick<ChessboardProps, 'orientation' | 'showLabels' | 'debug'> & {
+  pgn?: string;
+};
+
+const DefaultStory = ({ orientation: _orientation, pgn, ...props }: DefaultStoryProps) => {
+  const registry = useContext(RegistryContext);
+  const model = useMemo(() => new ChessModel(registry, pgn), [registry, pgn]);
+  const [orientation, setOrientation] = useState<Player | undefined>(_orientation);
+
+  const handleDrop = useCallback<NonNullable<GameboardRootProps<ChessModel>['onDrop']>>(
+    (move: Move) => {
+      const result = model.makeMove(move);
+      console.log(model.pgn);
+      return result;
+    },
+    [model],
+  );
+
+  return (
+    <div className='flex flex-col grow gap-2 overflow-hidden'>
+      <Toolbar.Root>
+        <Button onClick={() => model.update()}>Reset</Button>
+        <Button onClick={() => model.makeRandomMove()}>Move</Button>
+        <div className='grow'></div>
+        <Button
+          onClick={() => setOrientation((orientation) => (!orientation || orientation === 'white' ? 'black' : 'white'))}
+        >
+          Toggle
+        </Button>
+      </Toolbar.Root>
+      <Gameboard.Root model={model} onDrop={handleDrop}>
+        <Gameboard.Content grow contain>
+          <Chessboard orientation={orientation} {...props} />
+        </Gameboard.Content>
+      </Gameboard.Root>
+    </div>
+  );
+};
+
+const GridStory = () => {
+  const registry = useContext(RegistryContext);
+  const models = useMemo(() => Array.from({ length: 9 }).map(() => new ChessModel(registry)), [registry]);
+  useEffect(() => {
+    const i = setInterval(() => {
+      const model = models[Math.floor(Math.random() * models.length)];
+      model.makeRandomMove();
+    }, 100);
+    return () => clearInterval(i);
+  }, []);
+
+  return (
+    <div className='bs-full aspect-square mx-auto'>
+      <div className='grid grid-cols-3 gap-2'>
+        {models.map((model, i) => (
+          <div key={i} className='aspect-square'>
+            <Gameboard.Root model={model}>
+              <Chessboard />
+            </Gameboard.Root>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-gameboard/Chessboard',
+  component: Chessboard,
+  render: DefaultStory,
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'column' })],
+} satisfies Meta<typeof Chessboard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Promotion: Story = {
+  args: {
+    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: {
+    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',
+    showLabels: true,
+    debug: true,
+  },
+};
+
+export const Grid = {
+  render: GridStory,
+};

package/src/components/Chessboard/Chessboard.tsx

@@ -0,0 +1,206 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import React, { type PropsWithChildren, forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import {
+  type DOMRectBounds,
+  Gameboard,
+  type Location,
+  type PieceMap,
+  type PieceRecord,
+  type Player,
+  getRelativeBounds,
+  locationToString,
+  useGameboardContext,
+} from '../Gameboard';
+
+import { type ChessModel, type ChessPiece, ChessPieces, boardStyles, getSquareColor, locationToPos } from './chess';
+
+/** Fallback atom for when model is undefined. */
+const EMPTY_PIECES_ATOM = Atom.make<PieceMap<ChessPiece>>({});
+
+export type ChessboardProps = ThemedClassName<
+  PropsWithChildren<{
+    orientation?: Player;
+    showLabels?: boolean;
+    debug?: boolean;
+    rows?: number;
+    cols?: number;
+  }>
+>;
+
+/**
+ * Chessboard layout.
+ */
+const CHESSBOARD_NAME = 'Chessboard';
+
+const ChessboardComponent = forwardRef<HTMLDivElement, ChessboardProps>(
+  ({ classNames, orientation, showLabels, debug, rows = 8, cols = 8 }, forwardedRef) => {
+    const targetRef = useForwardedRef(forwardedRef);
+    const { width, height } = useResizeDetector({ targetRef, refreshRate: 200 });
+    const { model, promoting, onPromotion } = useGameboardContext<ChessModel>(CHESSBOARD_NAME);
+    const pieces = useAtomValue(model?.pieces ?? EMPTY_PIECES_ATOM);
+
+    // 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),
+      );
+    }, [orientation, rows, cols]);
+
+    // Use DOM grid layout to position squares.
+    const layout = useMemo(() => {
+      return squares.map((location) => {
+        return (
+          <div
+            key={locationToString(location)}
+            {...{
+              ['data-location' as const]: locationToString(location),
+            }}
+          />
+        );
+      });
+    }, [squares]);
+
+    // Build map of square locations to bounds.
+    const [grid, setGrid] = useState<Record<string, DOMRectBounds>>({});
+    const gridRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+      setGrid(
+        squares.reduce(
+          (acc, location) => {
+            const square = getSquareLocation(gridRef.current!, location)!;
+            const bounds = getRelativeBounds(gridRef.current!, square);
+            return { ...acc, [locationToString(location)]: bounds };
+          },
+          {} as Record<string, DOMRectBounds>,
+        ),
+      );
+    }, [squares, width, height]);
+
+    // Get the bounds of each square and piece.
+    const positions = useMemo<{ piece: PieceRecord; bounds: DOMRectBounds }[]>(() => {
+      if (!gridRef.current) {
+        return [];
+      }
+
+      return Object.values(pieces)
+        .map((piece) => {
+          if (piece.id === promoting?.id) {
+            return null;
+          }
+
+          const bounds = grid[locationToString(piece.location)];
+          return { piece, bounds };
+        })
+        .filter(isNonNullable);
+    }, [grid, pieces, promoting]);
+
+    return (
+      <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>
+          {squares.map((location) => (
+            <Gameboard.Square
+              key={locationToString(location)}
+              location={location}
+              label={showLabels ? locationToPos(location) : undefined}
+              bounds={grid[locationToString(location)]}
+              classNames={getSquareColor(location)}
+            />
+          ))}
+        </div>
+        {/* Pieces. */}
+        <div className={mx(promoting && 'opacity-50')}>
+          {positions.map(({ bounds, piece }) => (
+            <Gameboard.Piece
+              key={piece.id}
+              piece={piece}
+              bounds={bounds}
+              label={debug ? piece.id : undefined}
+              orientation={orientation}
+              Component={ChessPieces[piece.type as ChessPiece]}
+            />
+          ))}
+        </div>
+        {/* Promotion selector. */}
+        {promoting && (
+          <PromotionSelector
+            grid={grid}
+            piece={promoting}
+            onSelect={(piece) => {
+              onPromotion({
+                from: Object.values(pieces).find((p) => p.id === promoting.id)!.location,
+                to: piece.location,
+                piece: promoting.type,
+                promotion: piece.type,
+              });
+            }}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+ChessboardComponent.displayName = CHESSBOARD_NAME;
+
+export const Chessboard = memo(ChessboardComponent);
+
+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 });
+  };
+
+  return (
+    <>
+      {positions.map(({ piece, bounds }) => (
+        <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)}
+        />
+      ))}
+    </>
+  );
+};
+
+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;
+  });
+});