@dxos/react-ui-gameboard 0.8.4-main.c1de068 → 0.8.4-main.fd6878d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-gameboard",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.fd6878d",
   "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.c1de068",
-    "@dxos/invariant": "0.8.4-main.c1de068",
-    "@dxos/log": "0.8.4-main.c1de068",
-    "@dxos/node-std": "0.8.4-main.c1de068",
-    "@dxos/util": "0.8.4-main.c1de068"
+    "@dxos/invariant": "0.8.4-main.fd6878d",
+    "@dxos/debug": "0.8.4-main.fd6878d",
+    "@dxos/log": "0.8.4-main.fd6878d",
+    "@dxos/node-std": "0.8.4-main.fd6878d",
+    "@dxos/util": "0.8.4-main.fd6878d"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
@@ -44,15 +46,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068"
+    "@dxos/react-ui": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
+    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
+    "@dxos/react-ui": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
   },
   "publishConfig": {
     "access": "public"

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

@@ -7,26 +7,27 @@ import '@dxos-theme';
 import type { Meta, 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(() => {
@@ -88,23 +89,23 @@ export default meta;
 
 type Story = StoryObj<typeof DefaultStory>;
 
-export const Default: Story = {};
+export const Default = {} satisfies Story;
 
-export const Promotion: Story = {
+export const Promotion = {
   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 *',
   },
-};
+} satisfies Story;
 
-export const Debug: Story = {
+export const Debug = {
   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,
   },
-};
+} satisfies Story;
 
-export const Nine: Story = {
-  render: Grid,
-};
+export const Grid = {
+  render: GridStory,
+} satisfies Story;

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, { Fragment, type PropsWithChildren, memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import { type ThemedClassName, 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;
@@ -39,7 +39,7 @@ export const Chessboard = memo(
   ({ orientation, showLabels, debug, rows = 8, cols = 8, classNames }: ChessboardProps) => {
     useTrackProps({ orientation, showLabels, debug }, Chessboard.displayName, false);
     const { ref: containerRef, width, height } = useResizeDetector({ refreshRate: 200 });
-    const { model, promoting, onPromotion } = useBoardContext();
+    const { model, promoting, onPromotion } = useGameboardContext<ChessModel>(Chessboard.displayName!);
 
     const locations = useMemo<Location[]>(() => {
       return Array.from({ length: rows }, (_, i) => (orientation === 'black' ? i : rows - 1 - i)).flatMap((row) =>
@@ -102,7 +102,7 @@ export const Chessboard = memo(
         </div>
         <div>
           {locations.map((location) => (
-            <Square
+            <Gameboard.Square
               key={locationToString(location)}
               location={location}
               label={showLabels ? locationToPos(location) : undefined}
@@ -113,7 +113,7 @@ export const Chessboard = memo(
         </div>
         <div className={mx(promoting && 'opacity-50')}>
           {positions.map(({ bounds, piece }) => (
-            <Piece
+            <Gameboard.Piece
               key={piece.id}
               piece={piece}
               bounds={bounds}
@@ -123,22 +123,20 @@ 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>
+        {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>
     );
   },
@@ -176,19 +174,18 @@ 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}
+          piece={piece}
+          bounds={bounds}
+          Component={ChessPieces[piece.type as ChessPiece]}
+          classNames={mx('border-2 border-neutral-700 rounded-full', boardStyles.promotion)}
+          onClick={() => handleSelect(piece)}
+        />
       ))}
-    </div>
+    </>
   );
 };

package/src/{Chessboard → components/Chessboard}/chess.ts

@@ -3,21 +3,21 @@
 //
 
 import { type ReadonlySignal, signal } from '@preact/signals-core';
-import { Chess, validateFen } from 'chess.js';
+import { Chess as ChessJS } from 'chess.js';
 import { type FC, type SVGProps } from 'react';
 
 import { log } from '@dxos/log';
 
+import * as Alpha from '../../gen/pieces/chess/alpha';
 import {
-  type Move,
+  type GameboardModel,
   type Location,
+  type Move,
   type PieceMap,
-  locationToString,
   type PieceType,
-  type GameboardModel,
   type Player,
+  locationToString,
 } from '../Gameboard';
-import * as Alpha from '../gen/pieces/chess/alpha';
 
 export type ChessPiece = 'BK' | 'BQ' | 'BR' | 'BB' | 'BN' | 'BP' | 'WK' | 'WQ' | 'WR' | 'WB' | 'WN' | 'WP';
 
@@ -62,18 +62,30 @@ export const getSquareColor = ([row, col]: Location) => {
   return (col + row) % 2 === 0 ? boardStyles.black : boardStyles.white;
 };
 
+export const createChess = (pgn?: string) => {
+  const chess = new ChessJS();
+  if (pgn) {
+    try {
+      chess.loadPgn(pgn);
+    } catch {
+      log.warn(pgn);
+    }
+  }
+
+  return chess;
+};
+
 /**
  * Attempt move.
  */
-const makeMove = (game: Chess, move: Move): Chess | null => {
+const tryMove = (chess: ChessJS, move: Move): ChessJS | null => {
   const from = locationToPos(move.from);
   const to = locationToPos(move.to);
   try {
-    log('makeMove', { move });
     const promotion = move.promotion ? move.promotion[1].toLowerCase() : 'q';
-    game.move({ from, to, promotion }, { strict: false });
-    return game;
-  } catch (err) {
+    chess.move({ from, to, promotion }, { strict: false });
+    return chess;
+  } catch {
     // Ignore.
     return null;
   }
@@ -83,37 +95,70 @@ const makeMove = (game: Chess, move: Move): Chess | null => {
  * Chess model.
  */
 export class ChessModel implements GameboardModel<ChessPiece> {
-  private _game!: Chess;
+  private readonly _chess = new ChessJS();
   private readonly _pieces = signal<PieceMap<ChessPiece>>({});
 
-  constructor(fen?: string) {
-    this.initialize(fen);
+  constructor(pgn?: string) {
+    this.update(pgn);
   }
 
   get turn(): Player {
-    return this._game.turn() === 'w' ? 'white' : 'black';
+    return this._chess.turn() === 'w' ? 'white' : 'black';
   }
 
   get pieces(): ReadonlySignal<PieceMap<ChessPiece>> {
     return this._pieces;
   }
 
-  get game(): Chess {
-    return this._game;
+  get game(): ChessJS {
+    return this._chess;
+  }
+
+  /**
+   * PGN with headers.
+   *
+   * [Event "?"]
+   * [Site "?"]
+   * [Date "2025.08.05"]
+   * [Round "?"]
+   * [White "?"]
+   * [Black "?"]
+   * [Result "*"]
+   */
+  // TODO(burdon): Update headers.
+  get pgn(): string {
+    return this._chess.pgn();
   }
 
   get fen(): string {
-    return this._game.fen();
+    return this._chess.fen();
   }
 
-  initialize(fen?: string): void {
-    this._pieces.value = {};
-    this._game = new Chess(fen ? (validateFen(fen).ok ? fen : undefined) : undefined);
+  update(pgn = ''): void {
+    const previous = this._chess.history();
+    try {
+      this._chess.loadPgn(pgn);
+      // TODO(burdon): Get from TS.
+      // TODO(burdon): Update if not set.
+      this._chess.setHeader('Date', createDate());
+      this._chess.setHeader('Site', 'dxos.org');
+      // TODO(burdon): Update player keys.
+      // this._chess.setHeader('White', 'White');
+      // this._chess.setHeader('Black', 'Black');
+    } catch {
+      // Ignore.
+    }
+
+    const current = this._chess.history();
+    if (!isValidNextMove(previous, current)) {
+      this._pieces.value = {};
+    }
+
     this._update();
   }
 
   isValidMove(move: Move): boolean {
-    return makeMove(new Chess(this._game.fen()), move) !== null;
+    return tryMove(new ChessJS(this._chess.fen()), move) !== null;
   }
 
   canPromote(move: Move): boolean {
@@ -123,24 +168,23 @@ export class ChessModel implements GameboardModel<ChessPiece> {
   }
 
   makeMove(move: Move): boolean {
-    const game = makeMove(this._game, move);
+    const game = tryMove(this._chess, move);
     if (!game) {
       return false;
     }
 
-    this._game = game;
     this._update();
     return true;
   }
 
   makeRandomMove(): boolean {
-    const moves = this._game.moves();
+    const moves = this._chess.moves();
     if (!moves.length) {
       return false;
     }
 
     const move = moves[Math.floor(Math.random() * moves.length)];
-    this._game.move(move);
+    this._chess.move(move);
     this._update();
     return true;
   }
@@ -150,7 +194,7 @@ export class ChessModel implements GameboardModel<ChessPiece> {
    */
   private _update(): void {
     const pieces: PieceMap<ChessPiece> = {};
-    this._game.board().flatMap((row) =>
+    this._chess.board().flatMap((row) =>
       row.forEach((record) => {
         if (!record) {
           return;
@@ -172,6 +216,20 @@ export class ChessModel implements GameboardModel<ChessPiece> {
   }
 }
 
+const isValidNextMove = (previous: string[], current: string[]) => {
+  if (current.length > previous.length + 1) {
+    return false;
+  }
+
+  for (let i = 0; i < previous.length; i++) {
+    if (previous[i] !== current[i]) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
 /**
  * Preserve the original piece objects (and IDs).
  */
@@ -211,3 +269,5 @@ export const mapPieces = <T extends PieceType>(before: PieceMap<T>, after: Piece
 
   return after;
 };
+
+const createDate = (date = new Date()) => date.toISOString().slice(0, 10).replace(/-/g, '.'); // e.g., "2025.08.05"

package/src/components/Gameboard/Gameboard.tsx

@@ -0,0 +1,139 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, forwardRef, useCallback, useEffect, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { Piece, type PieceProps } from './Piece';
+import { Square, type SquareProps } from './Square';
+import { type GameboardModel, type Move, type PieceRecord, isLocation, isPiece } from './types';
+
+export type GameboardContextValue<M extends GameboardModel> = {
+  model: M;
+  dragging?: boolean; // TODO(burdon): Change to PieceRecord.
+  promoting?: PieceRecord;
+  onPromotion: (move: Move) => void;
+};
+
+const [GameboardContextProvider, useRadixGameboardContext] = createContext<GameboardContextValue<any>>('Gameboard');
+
+const useGameboardContext = <M extends GameboardModel>(consumerName: string): GameboardContextValue<M> => {
+  return useRadixGameboardContext(consumerName);
+};
+
+//
+// Root
+//
+
+type GameboardRootProps<M extends GameboardModel> = PropsWithChildren<{
+  model?: M;
+  onDrop?: (move: Move) => boolean;
+}>;
+
+/**
+ * Generic board container.
+ */
+const GameboardRoot = <M extends GameboardModel>({ children, model, onDrop }: GameboardRootProps<M>) => {
+  const [dragging, setDragging] = useState(false);
+  const [promoting, setPromoting] = useState<PieceRecord | undefined>();
+
+  const handlePromotion = useCallback<GameboardContextValue<M>['onPromotion']>((move) => {
+    log('onPromotion', { move });
+    setPromoting(undefined);
+    onDrop?.(move);
+  }, []);
+
+  useEffect(() => {
+    if (!model) {
+      return;
+    }
+
+    // TODO(burdon): Should target specific container.
+    return monitorForElements({
+      onDragStart: ({ source }) => {
+        log('onDragStart', { source });
+        setDragging(true);
+      },
+      onDrop: ({ source, location }) => {
+        log('onDrop', { source, location });
+        const target = location.current.dropTargets[0];
+        if (!target) {
+          return;
+        }
+
+        const targetLocation = target.data.location;
+        const piece = source.data.piece;
+        if (!isLocation(targetLocation) || !isPiece(piece)) {
+          return;
+        }
+
+        const move: Move = { from: piece.location, to: targetLocation, piece: piece.type };
+        if (model.isValidMove(move)) {
+          if (model.canPromote?.(move)) {
+            setPromoting({ ...piece, location: targetLocation });
+          } else {
+            onDrop?.(move);
+          }
+        }
+
+        setDragging(false);
+      },
+    });
+  }, [model]);
+
+  return (
+    <GameboardContextProvider model={model} dragging={dragging} promoting={promoting} onPromotion={handlePromotion}>
+      {children}
+    </GameboardContextProvider>
+  );
+};
+
+GameboardRoot.displayName = 'Gameboard.Root';
+
+//
+// Content
+//
+
+type GameboardContentProps = ThemedClassName<PropsWithChildren<{ grow?: boolean; contain?: boolean }>>;
+
+const GameboardContent = forwardRef<HTMLDivElement, GameboardContentProps>(
+  ({ children, classNames, grow, contain }, forwardedRef) => {
+    return (
+      <div
+        role='none'
+        className={mx(grow && 'grid is-full bs-full size-container place-content-center', classNames)}
+        ref={forwardedRef}
+      >
+        {contain ? <div className='is-[min(100cqw,100cqh)] bs-[min(100cqw,100cqh)]'>{children}</div> : children}
+      </div>
+    );
+  },
+);
+
+GameboardContent.displayName = 'Gameboard.Content';
+
+//
+// Gameboard
+//
+
+export const Gameboard = {
+  Root: GameboardRoot,
+  Content: GameboardContent,
+  Piece,
+  Square,
+};
+
+export { useGameboardContext };
+
+export type {
+  GameboardRootProps,
+  GameboardContentProps,
+  PieceProps as GameboardPieceProps,
+  SquareProps as GameboardSquareProps,
+};