@dxos/react-ui-gameboard 0.8.3 → 0.8.4-main.1da679c

package/src/components/Chessboard/chess.ts

@@ -0,0 +1,322 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ReadonlySignal, signal } from '@preact/signals-core';
+import { Chess as ChessJS } from 'chess.js';
+import { type FC, type SVGProps } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+
+import * as Alpha from '../../gen/pieces/chess/alpha';
+import {
+  type GameboardModel,
+  type Location,
+  type Move,
+  type PieceMap,
+  type PieceType,
+  type Player,
+  locationToString,
+} from '../Gameboard';
+
+export type ChessPiece = 'BK' | 'BQ' | 'BR' | 'BB' | 'BN' | 'BP' | 'WK' | 'WQ' | 'WR' | 'WB' | 'WN' | 'WP';
+
+export const ChessPieces: Record<ChessPiece, FC<SVGProps<SVGSVGElement>>> = Alpha;
+
+export const posToLocation = (pos: string): Location => {
+  const col = pos.charCodeAt(0) - 'a'.charCodeAt(0);
+  const row = parseInt(pos[1]) - 1;
+  return [row, col];
+};
+
+export const locationToPos = ([row, col]: Location): string => {
+  return String.fromCharCode(col + 'a'.charCodeAt(0)) + (row + 1);
+};
+
+export const getRawPgn = (pgn: string) => {
+  return pgn.replace(/\[.*?\]/g, '').trim();
+};
+
+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',
+  },
+  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',
+  },
+};
+
+export const boardStyles = styles.original;
+
+export const getSquareColor = ([row, col]: Location) => {
+  return (col + row) % 2 === 0 ? boardStyles.black : boardStyles.white;
+};
+
+export const createChess = (pgn?: string): ChessJS => {
+  const chess = new ChessJS();
+  if (pgn) {
+    try {
+      chess.loadPgn(pgn);
+    } catch {
+      log.warn(pgn);
+    }
+  }
+
+  return chess;
+};
+
+/**
+ * Chess model.
+ */
+export class ChessModel implements GameboardModel<ChessPiece> {
+  private readonly _chess = new ChessJS();
+  private readonly _pieces = signal<PieceMap<ChessPiece>>({});
+  private readonly _moveIndex = signal(0);
+
+  constructor(pgn?: string) {
+    this.update(pgn);
+  }
+
+  get readonly(): boolean {
+    return this._moveIndex.value !== this._chess.history().length;
+  }
+
+  get turn(): Player {
+    return this._chess.turn() === 'w' ? 'white' : 'black';
+  }
+
+  get game(): ChessJS {
+    return this._chess;
+  }
+
+  get pieces(): ReadonlySignal<PieceMap<ChessPiece>> {
+    return this._pieces;
+  }
+
+  get moveIndex(): ReadonlySignal<number> {
+    return this._moveIndex;
+  }
+
+  get fen() {
+    return this._chess.fen();
+  }
+
+  /**
+   * PGN with headers.
+   *
+   * [Event "?"]
+   * [Site "?"]
+   * [Date "2025.08.05"]
+   * [Round "?"]
+   * [White "?"]
+   * [Black "?"]
+   * [Result "*"]
+   */
+  // TODO(burdon): Update headers.
+  get pgn(): string {
+    return getRawPgn(this._chess.pgn());
+  }
+
+  setMoveIndex(index: number) {
+    const temp = new ChessJS();
+    const history = this._chess.history({ verbose: true });
+    for (let i = 0; i < index && i < history.length; i++) {
+      temp.move(history[i]);
+    }
+    this._updateBoard(temp);
+  }
+
+  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._updateBoard(this._chess);
+  }
+
+  isValidMove(move: Move): boolean {
+    return tryMove(new ChessJS(this._chess.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 = tryMove(this._chess, move);
+    if (!game) {
+      return false;
+    }
+
+    this._updateBoard(this._chess);
+    return true;
+  }
+
+  makeRandomMove(): boolean {
+    const moves = this._chess.moves();
+    if (!moves.length) {
+      return false;
+    }
+
+    const move = moves[Math.floor(Math.random() * moves.length)];
+    this._chess.move(move);
+
+    this._updateBoard(this._chess);
+    return true;
+  }
+
+  /**
+   * Update pieces preserving identity.
+   */
+  private _updateBoard(chess: ChessJS): void {
+    this._pieces.value = createPieceMap(chess);
+    this._moveIndex.value = chess.history().length;
+  }
+}
+
+/**
+ * Attempt move.
+ */
+const tryMove = (chess: ChessJS, move: Move): ChessJS | null => {
+  const from = locationToPos(move.from);
+  const to = locationToPos(move.to);
+  try {
+    const promotion = move.promotion ? move.promotion[1].toLowerCase() : 'q';
+    chess.move({ from, to, promotion }, { strict: false });
+    return chess;
+  } catch {
+    return null;
+  }
+};
+
+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;
+};
+
+/**
+ * Starting from a new game, assign piece IDs based on their starting position.
+ * Then iterate through the history of the provided game and update the piece map.
+ */
+export const createPieceMap = (chess: ChessJS): PieceMap<ChessPiece> => {
+  const temp = new ChessJS();
+  let pieces = _createPieceMap(temp);
+  const history = chess.history({ verbose: true });
+  for (let i = 0; i < history.length; i++) {
+    const move = history[i];
+    temp.move(move);
+    pieces = _diffPieces(pieces, _createPieceMap(temp));
+    const test = new Set();
+    Object.values(pieces).forEach((piece) => {
+      invariant(!test.has(piece.id), 'Duplicate: ' + piece.id);
+      test.add(piece.id);
+    });
+  }
+
+  return pieces;
+};
+
+/**
+ * Create a map of pieces from the board positions; assign each piece the ID of the current square.
+ */
+const _createPieceMap = (chess: ChessJS): PieceMap<ChessPiece> => {
+  const pieces: PieceMap<ChessPiece> = {};
+  chess.board().flatMap((row) =>
+    row.forEach((record) => {
+      if (!record) {
+        return;
+      }
+
+      const { square, type, color } = record;
+      const pieceType = `${color.toUpperCase()}${type.toUpperCase()}` as ChessPiece;
+      const location = posToLocation(square);
+      pieces[locationToString(location)] = {
+        id: `${square}-${pieceType}`,
+        type: pieceType,
+        side: color === 'w' ? 'white' : 'black',
+        location,
+      };
+    }),
+  );
+
+  return pieces;
+};
+
+/**
+ * Preserve the original piece objects (and IDs).
+ */
+const _diffPieces = <T extends PieceType>(before: PieceMap<T>, after: PieceMap<T>): PieceMap<T> => {
+  const difference: { added: PieceMap; removed: PieceMap } = {
+    removed: {},
+    added: {},
+  };
+
+  // Removed.
+  (Object.keys(before) as Array<keyof typeof before>).forEach((square) => {
+    if (after[square]?.type !== before[square]?.type) {
+      difference.removed[square] = before[square];
+    }
+  });
+
+  // Added.
+  (Object.keys(after) as Array<keyof typeof after>).forEach((square) => {
+    if (before[square]?.type !== after[square]?.type) {
+      difference.added[square] = after[square];
+    } else {
+      after[square] = before[square];
+    }
+  });
+
+  // Preserve IDs.
+  for (const piece of Object.values(difference.added)) {
+    const previous = Object.values(difference.removed).find((p) => p.type === piece.type);
+    if (previous) {
+      piece.id = previous.id;
+    }
+  }
+
+  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,140 @@
+//
+// 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;
+  moveNumber?: number;
+  onDrop?: (move: Move) => boolean;
+}>;
+
+/**
+ * Generic board container.
+ */
+const GameboardRoot = <M extends GameboardModel>({ children, model, moveNumber, 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,
+};

package/src/{Board → components/Gameboard}/Piece.tsx

@@ -3,34 +3,32 @@
 //
 
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-// import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
 import { centerUnderPointer } from '@atlaskit/pragmatic-drag-and-drop/element/center-under-pointer';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
-import React, { useState, useRef, useEffect, type FC, type SVGProps, memo } from 'react';
+import React, { type FC, type SVGProps, memo, useEffect, useRef, useState } from 'react';
 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 { type ThemedClassName, useDynamicRef, useTrackProps } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { useBoardContext } from './context';
-import { isEqualLocation, isLocation, type Location, type PieceRecord, type Player } from './types';
+import { useGameboardContext } from './Gameboard';
+import { type Location, type PieceRecord, type Player, isEqualLocation, isLocation } from './types';
 import { type DOMRectBounds } from './util';
 
 export type PieceProps = ThemedClassName<{
+  Component: FC<SVGProps<SVGSVGElement>>;
   piece: PieceRecord;
   bounds: DOMRectBounds;
   label?: string;
   orientation?: Player;
-  Component: FC<SVGProps<SVGSVGElement>>;
+  onClick?: () => void;
 }>;
 
-export const Piece = memo(({ classNames, piece, orientation, bounds, label, Component }: PieceProps) => {
-  useTrackProps({ classNames, piece, orientation, bounds, label, Component }, Piece.displayName, false);
-  const { model } = useBoardContext();
-
-  const { dragging: isDragging, promoting } = useBoardContext();
+export const Piece = memo(({ classNames, Component, piece, orientation, bounds, label, onClick }: PieceProps) => {
+  useTrackProps({ classNames, Component, piece, orientation, bounds, label }, Piece.displayName, false);
+  const { model, dragging: isDragging, promoting } = useGameboardContext(Piece.displayName!);
   const promotingRef = useDynamicRef(promoting);
   const [dragging, setDragging] = useState(false);
   const [preview, setPreview] = useState<HTMLElement>();
@@ -40,20 +38,20 @@ export const Piece = memo(({ classNames, piece, orientation, bounds, label, Comp
 
   const ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
+    if (!model) {
+      return;
+    }
+
     const el = ref.current;
     invariant(el);
 
     return draggable({
       element: el,
       getInitialData: () => ({ piece }),
-      onGenerateDragPreview: ({ nativeSetDragImage, location, source }) => {
+      onGenerateDragPreview: ({ nativeSetDragImage, source }) => {
         log('onGenerateDragPreview', { source: source.data });
         setCustomNativeDragPreview({
           getOffset: centerUnderPointer,
-          // getOffset: preserveOffsetOnSource({
-          //   element: source.element,
-          //   input: location.current.input,
-          // }),
           render: ({ container }) => {
             setPreview(container);
             const { width, height } = el.getBoundingClientRect();
@@ -66,12 +64,17 @@ export const Piece = memo(({ classNames, piece, orientation, bounds, label, Comp
           nativeSetDragImage,
         });
       },
-      canDrag: () => !promotingRef.current && model?.turn === piece.side,
+      canDrag: () => !promotingRef.current && !model.readonly && model.turn === piece.side,
       onDragStart: () => setDragging(true),
       onDrop: ({ location: { current } }) => {
-        const location = current.dropTargets[0].data.location;
-        if (isLocation(location)) {
-          setCurrent((current) => ({ ...current, location }));
+        // TODO(burdon): Create wrapper function to catch errors.
+        try {
+          const location = current.dropTargets[0]?.data.location;
+          if (isLocation(location)) {
+            setCurrent((current) => ({ ...current, location }));
+          }
+        } catch {
+          // Ignore.
         }
 
         setDragging(false);
@@ -88,7 +91,7 @@ export const Piece = memo(({ classNames, piece, orientation, bounds, label, Comp
 
       // Check if piece moved.
       if (!current.location || !isEqualLocation(current.location, piece.location)) {
-        ref.current.style.transition = 'top 400ms ease-out, left 400ms ease-out';
+        ref.current.style.transition = 'top 250ms ease-out, left 250ms ease-out';
         ref.current.style.top = bounds.top + 'px';
         ref.current.style.left = bounds.left + 'px';
         setCurrent({ location: piece.location, bounds });
@@ -112,10 +115,10 @@ export const Piece = memo(({ classNames, piece, orientation, bounds, label, Comp
         className={mx(
           'absolute',
           classNames,
-          // orientation === 'black' && '_rotate-180',
           dragging && 'opacity-20', // Must not unmount component while dragging.
           isDragging && 'pointer-events-none', // Don't block the square's drop target.
         )}
+        onClick={onClick}
       >
         <Component className='grow' />
         {label && <div className='absolute inset-1 text-xs text-black'>{label}</div>}

package/src/{Board → components/Gameboard}/Square.tsx

@@ -3,15 +3,15 @@
 //
 
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import React, { useRef, useState, useEffect, memo } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { useBoardContext } from './context';
-import { isPiece, type Location } from './types';
+import { useGameboardContext } from './Gameboard';
+import { type Location, isPiece } from './types';
 import { type DOMRectBounds } from './util';
 
 type HoveredState = 'idle' | 'validMove' | 'invalidMove';
@@ -25,7 +25,7 @@ export type SquareProps = ThemedClassName<{
 export const Square = memo(({ location, bounds, label, classNames }: SquareProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const [state, setState] = useState<HoveredState>('idle');
-  const { model } = useBoardContext();
+  const { model } = useGameboardContext(Square.displayName!);
 
   useEffect(() => {
     const el = ref.current;

package/src/components/Gameboard/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './types';
+export * from './util';
+
+export * from './Gameboard';

package/src/{Board → components/Gameboard}/types.ts

@@ -4,6 +4,7 @@
 
 import { type ReadonlySignal } from '@preact/signals-core';
 
+// TODO(burdon): Don't make this assumption.
 export type Player = 'black' | 'white';
 
 export type Location = [number, number];
@@ -50,8 +51,10 @@ export const isEqualLocation = (l1: Location, l2: Location): boolean => l1[0] ==
 /**
  * Generic board model.
  */
-export interface BoardModel<T extends PieceType = PieceType> {
+export interface GameboardModel<T extends PieceType = PieceType> {
+  readonly: boolean;
   turn: Player;
+  /** @reactive */
   pieces: ReadonlySignal<PieceMap<T>>;
   isValidMove: (move: Move) => boolean;
   canPromote?: (move: Move) => boolean;

package/src/components/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Gameboard';
+export * from './Chessboard';

package/src/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './Board';
-export * from './Chessboard';
+export * from './components';