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

package/src/Chessboard/Chessboard.stories.tsx

@@ -1,108 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import type { Meta, StoryObj } from '@storybook/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';
-
-import { Chessboard, type ChessboardProps } from './Chessboard';
-import { ChessModel } from './chess';
-import { Board, type BoardRootProps, type Player, type Move } from '../Board';
-
-type RenderProps = Pick<ChessboardProps, 'orientation' | 'showLabels' | 'debug'> & {
-  fen: string;
-};
-
-const DefaultStory = ({ 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) => {
-      log.info('handleDrop', { move });
-      return model.makeMove(move);
-    },
-    [model],
-  );
-
-  return (
-    <div className='flex flex-col grow gap-2 overflow-hidden'>
-      <Toolbar.Root>
-        <Button onClick={() => model.initialize()}>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>
-      <Board.Root model={model} onDrop={handleDrop}>
-        <Chessboard orientation={orientation} {...props} />
-      </Board.Root>
-    </div>
-  );
-};
-
-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 DefaultStory> = {
-  title: 'ui/react-ui-gameboard/Chessboard',
-  component: Chessboard,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: '' })],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DefaultStory>;
-
-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,
-    showLabels: true,
-    orientation: 'black',
-    fen: 'q3k1nr/1pp1nQpp/3p4/1P2p3/4P3/B1PP1b2/B5PP/5K2 b k - 0 17',
-  },
-};
-
-export const Nine: Story = {
-  render: Grid,
-};

package/src/Chessboard/Chessboard.tsx

@@ -1,190 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren, useRef, useMemo, useEffect, useState, memo } from 'react';
-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 { boardStyles, type ChessPiece, ChessPieces, getSquareColor, locationToPos } from './chess';
-import {
-  type DOMRectBounds,
-  type Location,
-  type PieceRecord,
-  type Player,
-  Piece,
-  Square,
-  getRelativeBounds,
-  locationToString,
-} from '../Board';
-import { useBoardContext } from '../Board';
-
-export type ChessboardProps = PropsWithChildren<{
-  orientation?: Player;
-  showLabels?: boolean;
-  debug?: boolean;
-  rows?: number;
-  cols?: number;
-}>;
-
-/**
- * Chessboard layout.
- */
-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, promoting, onPromotion } = useBoardContext();
-
-  const locations = 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 locations.map((location) => {
-      return (
-        <div
-          key={locationToString(location)}
-          {...{
-            ['data-location' as const]: locationToString(location),
-          }}
-        />
-      );
-    });
-  }, [locations]);
-
-  // Build map of square locations to bounds.
-  const [grid, setGrid] = useState<Record<string, DOMRectBounds>>({});
-  const gridRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    setGrid(
-      locations.reduce(
-        (acc, location) => {
-          const square = getSquareLocation(gridRef.current!, location)!;
-          const bounds = getRelativeBounds(gridRef.current!, square);
-          return { ...acc, [locationToString(location)]: bounds };
-        },
-        {} as Record<string, DOMRectBounds>,
-      ),
-    );
-  }, [locations, width, height]);
-
-  // Get the bounds of each square and piece.
-  const positions = useMemo<{ piece: PieceRecord; bounds: DOMRectBounds }[]>(() => {
-    if (!gridRef.current) {
-      return [];
-    }
-
-    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'>
-      <div ref={gridRef} className='grid grid-rows-8 grid-cols-8 aspect-square select-none'>
-        {layout}
-      </div>
-      <div>
-        {locations.map((location) => (
-          <Square
-            key={locationToString(location)}
-            location={location}
-            label={showLabels ? locationToPos(location) : undefined}
-            bounds={grid[locationToString(location)]}
-            classNames={getSquareColor(location)}
-          />
-        ))}
-      </div>
-      <div className={mx(promoting && 'opacity-50')}>
-        {positions.map(({ bounds, piece }) => (
-          <Piece
-            key={piece.id}
-            piece={piece}
-            bounds={bounds}
-            label={debug ? piece.id : undefined}
-            orientation={orientation}
-            Component={ChessPieces[piece.type as ChessPiece]}
-          />
-        ))}
-      </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>
-  );
-});
-
-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

@@ -1,213 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type ReadonlySignal, signal } from '@preact/signals-core';
-import { Chess, validateFen } from 'chess.js';
-import { type FC, type SVGProps } from 'react';
-
-import { log } from '@dxos/log';
-
-import {
-  type Move,
-  type Location,
-  type PieceMap,
-  locationToString,
-  type PieceType,
-  type BoardModel,
-  type Player,
-} from '../Board';
-import * as Alpha from '../gen/pieces/chess/alpha';
-
-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);
-};
-
-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;
-};
-
-/**
- * Attempt move.
- */
-const makeMove = (game: Chess, move: Move): Chess | 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) {
-    // Ignore.
-    return null;
-  }
-};
-
-/**
- * Chess model.
- */
-export class ChessModel implements BoardModel<ChessPiece> {
-  private _game!: Chess;
-  private readonly _pieces = signal<PieceMap<ChessPiece>>({});
-
-  constructor(fen?: string) {
-    this.initialize(fen);
-  }
-
-  get turn(): Player {
-    return this._game.turn() === 'w' ? 'white' : 'black';
-  }
-
-  get pieces(): ReadonlySignal<PieceMap<ChessPiece>> {
-    return this._pieces;
-  }
-
-  get game(): Chess {
-    return this._game;
-  }
-
-  get fen(): string {
-    return this._game.fen();
-  }
-
-  initialize(fen?: string): void {
-    this._pieces.value = {};
-    this._game = new Chess(fen ? (validateFen(fen).ok ? fen : undefined) : undefined);
-    this._update();
-  }
-
-  isValidMove(move: Move): boolean {
-    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) {
-      return false;
-    }
-
-    this._game = game;
-    this._update();
-    return true;
-  }
-
-  makeRandomMove(): boolean {
-    const moves = this._game.moves();
-    if (!moves.length) {
-      return false;
-    }
-
-    const move = moves[Math.floor(Math.random() * moves.length)];
-    this._game.move(move);
-    this._update();
-    return true;
-  }
-
-  /**
-   * Update pieces preserving identity.
-   */
-  private _update(): void {
-    const pieces: PieceMap<ChessPiece> = {};
-    this._game.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,
-        };
-      }),
-    );
-
-    this._pieces.value = mapPieces(this._pieces.value, pieces);
-  }
-}
-
-/**
- * Preserve the original piece objects (and IDs).
- */
-export const mapPieces = <T extends PieceType>(before: PieceMap<T>, after: PieceMap<T>): PieceMap<T> => {
-  const difference: { added: PieceMap; removed: PieceMap } = {
-    removed: {},
-    added: {},
-  };
-
-  (Object.keys(before) as Array<keyof typeof before>).forEach((square) => {
-    if (after[square]?.type !== before[square]?.type) {
-      difference.removed[square] = before[square];
-    }
-  });
-
-  (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];
-    }
-  });
-
-  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;
-    }
-  }
-
-  log('delta', {
-    before: Object.keys(before).length,
-    after: Object.keys(after).length,
-    removed: Object.keys(difference.removed).length,
-    added: Object.keys(difference.added).length,
-  });
-
-  return after;
-};