@dxos/react-ui-gameboard 0.8.4-main.84f28bd → 0.8.4-main.8baae0fced

package/dist/types/src/Board/Container.d.ts

@@ -1,14 +0,0 @@
-import React, { type CSSProperties, type PropsWithChildren } from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-export type ContainerProps = ThemedClassName<PropsWithChildren<{
-    style?: CSSProperties;
-}>>;
-/**
- * Container centers the board.
- */
-export declare const Container: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<{
-    style?: CSSProperties;
-}>, "className"> & {
-    classNames?: import("@dxos/react-ui-types").ClassNameValue;
-} & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Container.d.ts.map

package/dist/types/src/Board/Container.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/Board/Container.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAc,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,cAAc,GAAG,eAAe,CAC1C,iBAAiB,CAAC;IAChB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC,CACH,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS;YAPV,aAAa;;;wCAavB,CAAC"}

package/dist/types/src/Board/Piece.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Piece.d.ts","sourceRoot":"","sources":["../../../../src/Board/Piece.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAA+B,KAAK,EAAE,EAAE,KAAK,QAAQ,EAAQ,MAAM,OAAO,CAAC;AAKzF,OAAO,EAAgC,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAA8C,KAAK,WAAW,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AACpG,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,MAAM,UAAU,GAAG,eAAe,CAAC;IACvC,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;CACxC,CAAC,CAAC;AAEH,eAAO,MAAM,KAAK,2FAAuE,UAAU,uBAwGjG,CAAC"}

package/dist/types/src/Board/Square.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Square.d.ts","sourceRoot":"","sources":["../../../../src/Board/Square.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI5C,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;IACxC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,MAAM,sEAAkD,WAAW,uBA+C9E,CAAC"}

package/dist/types/src/Board/context.d.ts

@@ -1,10 +0,0 @@
-import { type PieceRecord, type BoardModel, type Move } from './types';
-export type BoardContextType = {
-    model?: BoardModel;
-    dragging?: boolean;
-    promoting?: PieceRecord;
-    onPromotion: (move: Move) => void;
-};
-export declare const BoardContext: import("react").Context<BoardContextType | undefined>;
-export declare const useBoardContext: () => BoardContextType;
-//# sourceMappingURL=context.d.ts.map

package/dist/types/src/Board/context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/Board/context.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,YAAY,uDAAyD,CAAC;AAEnF,eAAO,MAAM,eAAe,wBAE3B,CAAC"}

package/dist/types/src/Board/index.d.ts

@@ -1,8 +0,0 @@
-export * from './context';
-export * from './types';
-export * from './util';
-export * from './Board';
-export * from './Container';
-export * from './Square';
-export * from './Piece';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/Board/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Board/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AAEvB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/dist/types/src/Board/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Board/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAExC,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC;AAE/B,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,IAAI;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AAEvF,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,QAAQ,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,UAAU,QAAQ,KAAG,MAA4B,CAAC;AACnF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,QAAkD,CAAC;AAGlG,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,WAMtB,CAAC;AAG7B,eAAO,MAAM,UAAU,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,QACwC,CAAC;AAE9F,eAAO,MAAM,eAAe,GAAI,IAAI,QAAQ,EAAE,IAAI,QAAQ,KAAG,OAA6C,CAAC;AAE3G;;GAEG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACrC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;CACtC"}

package/dist/types/src/Board/util.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/Board/util.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE/E,eAAO,MAAM,iBAAiB,GAAI,WAAW,WAAW,EAAE,SAAS,WAAW,KAAG,aAShF,CAAC"}

package/dist/types/src/Chessboard/Chessboard.d.ts

@@ -1,14 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type Player } from '../Board';
-export type ChessboardProps = PropsWithChildren<{
-    orientation?: Player;
-    showLabels?: boolean;
-    debug?: boolean;
-    rows?: number;
-    cols?: number;
-}>;
-/**
- * Chessboard layout.
- */
-export declare const Chessboard: React.MemoExoticComponent<({ orientation, showLabels, debug, rows, cols }: ChessboardProps) => React.JSX.Element>;
-//# sourceMappingURL=Chessboard.d.ts.map

package/dist/types/src/Chessboard/Chessboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chessboard.d.ts","sourceRoot":"","sources":["../../../../src/Chessboard/Chessboard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAQlG,OAAO,EAIL,KAAK,MAAM,EAKZ,MAAM,UAAU,CAAC;AAGlB,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,6EAAiE,eAAe,uBAyGrG,CAAC"}

package/dist/types/src/Chessboard/Chessboard.stories.d.ts

@@ -1,16 +0,0 @@
-import '@dxos-theme';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { type ChessboardProps } from './Chessboard';
-type RenderProps = Pick<ChessboardProps, 'orientation' | 'showLabels' | 'debug'> & {
-    fen: string;
-};
-declare const DefaultStory: ({ fen, orientation: _orientation, ...props }: RenderProps) => React.JSX.Element;
-declare const meta: Meta<typeof DefaultStory>;
-export default meta;
-type Story = StoryObj<typeof DefaultStory>;
-export declare const Default: Story;
-export declare const Promotion: Story;
-export declare const Debug: Story;
-export declare const Nine: Story;
-//# sourceMappingURL=Chessboard.stories.d.ts.map

package/dist/types/src/Chessboard/Chessboard.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chessboard.stories.d.ts","sourceRoot":"","sources":["../../../../src/Chessboard/Chessboard.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAoD,MAAM,OAAO,CAAC;AAMzE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAIhE,KAAK,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,GAAG,YAAY,GAAG,OAAO,CAAC,GAAG;IACjF,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,8CAA8C,WAAW,sBA6B9E,CAAC;AA2BF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAKnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/types/src/Chessboard/chess.d.ts

@@ -1,40 +0,0 @@
-import { type ReadonlySignal } from '@preact/signals-core';
-import { Chess } from 'chess.js';
-import { type FC, type SVGProps } from 'react';
-import { type Move, type Location, type PieceMap, type PieceType, type BoardModel, type Player } from '../Board';
-export type ChessPiece = 'BK' | 'BQ' | 'BR' | 'BB' | 'BN' | 'BP' | 'WK' | 'WQ' | 'WR' | 'WB' | 'WN' | 'WP';
-export declare const ChessPieces: Record<ChessPiece, FC<SVGProps<SVGSVGElement>>>;
-export declare const posToLocation: (pos: string) => Location;
-export declare const locationToPos: ([row, col]: Location) => string;
-export declare const boardStyles: {
-    black: string;
-    white: string;
-    promotion: string;
-};
-export declare const getSquareColor: ([row, col]: Location) => string;
-/**
- * Chess model.
- */
-export declare class ChessModel implements BoardModel<ChessPiece> {
-    private _game;
-    private readonly _pieces;
-    constructor(fen?: string);
-    get turn(): Player;
-    get pieces(): ReadonlySignal<PieceMap<ChessPiece>>;
-    get game(): Chess;
-    get fen(): string;
-    initialize(fen?: string): void;
-    isValidMove(move: Move): boolean;
-    canPromote(move: Move): boolean;
-    makeMove(move: Move): boolean;
-    makeRandomMove(): boolean;
-    /**
-     * Update pieces preserving identity.
-     */
-    private _update;
-}
-/**
- * Preserve the original piece objects (and IDs).
- */
-export declare const mapPieces: <T extends PieceType>(before: PieceMap<T>, after: PieceMap<T>) => PieceMap<T>;
-//# sourceMappingURL=chess.d.ts.map

package/dist/types/src/Chessboard/chess.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chess.d.ts","sourceRoot":"","sources":["../../../../src/Chessboard/chess.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAU,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAE,KAAK,EAAe,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,EACL,KAAK,IAAI,EACT,KAAK,QAAQ,EACb,KAAK,QAAQ,EAEb,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,MAAM,EACZ,MAAM,UAAU,CAAC;AAGlB,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3G,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAS,CAAC;AAElF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,QAI3C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,YAAY,QAAQ,KAAG,MAEpD,CAAC;AAyBF,eAAO,MAAM,WAAW;;;;CAAkB,CAAC;AAE3C,eAAO,MAAM,cAAc,GAAI,YAAY,QAAQ,WAElD,CAAC;AAmBF;;GAEG;AACH,qBAAa,UAAW,YAAW,UAAU,CAAC,UAAU,CAAC;IACvD,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAoC;gBAEhD,GAAG,CAAC,EAAE,MAAM;IAIxB,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,MAAM,IAAI,cAAc,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAEjD;IAED,IAAI,IAAI,IAAI,KAAK,CAEhB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IAED,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI;IAM9B,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IAIhC,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IAM/B,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IAW7B,cAAc,IAAI,OAAO;IAYzB;;OAEG;IACH,OAAO,CAAC,OAAO;CAsBhB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,SAAS,EAAE,QAAQ,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAG,QAAQ,CAAC,CAAC,CAmClG,CAAC"}

package/dist/types/src/Chessboard/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Chessboard/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AAExB,cAAc,cAAc,CAAC"}

package/src/Board/Board.tsx

@@ -1,86 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import React, { type PropsWithChildren, 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 { Container } from './Container';
-import { BoardContext, type BoardContextType } from './context';
-import { type BoardModel, isLocation, isPiece, type Move, type PieceRecord } from './types';
-
-type RootProps = ThemedClassName<
-  PropsWithChildren<{
-    model?: BoardModel;
-    onDrop?: (move: Move) => boolean;
-  }>
->;
-
-/**
- * Generic board container.
- */
-const Root = ({ children, classNames, model, onDrop }: RootProps) => {
-  const [dragging, setDragging] = useState(false);
-  const [promoting, setPromoting] = useState<PieceRecord | undefined>();
-
-  // Handle promotion.
-  const onPromotion = useCallback<BoardContextType['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.canPromote?.(move)) {
-          setPromoting({ ...piece, location: targetLocation });
-        } else {
-          onDrop?.(move);
-        }
-
-        setDragging(false);
-      },
-    });
-  }, [model]);
-
-  return (
-    <BoardContext.Provider value={{ model, dragging, promoting, onPromotion }}>
-      <Container classNames={mx('aspect-square', classNames)}>{children}</Container>
-    </BoardContext.Provider>
-  );
-};
-
-Root.displayName = 'Board.Root';
-
-export const Board = {
-  Root,
-};
-
-export type { RootProps as BoardRootProps };

package/src/Board/Container.tsx

@@ -1,25 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type CSSProperties, forwardRef, type PropsWithChildren } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-export type ContainerProps = ThemedClassName<
-  PropsWithChildren<{
-    style?: CSSProperties;
-  }>
->;
-
-/**
- * Container centers the board.
- */
-export const Container = forwardRef<HTMLDivElement, ContainerProps>(({ children, classNames, style }, forwardedRef) => {
-  return (
-    <div ref={forwardedRef} style={style} className='flex w-full h-full justify-center overflow-hidden'>
-      <div className={mx('max-w-full max-h-full content-center', classNames)}>{children}</div>
-    </div>
-  );
-});

package/src/Board/context.ts

@@ -1,22 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext, useContext } from 'react';
-
-import { raise } from '@dxos/debug';
-
-import { type PieceRecord, type BoardModel, type Move } from './types';
-
-export type BoardContextType = {
-  model?: BoardModel;
-  dragging?: boolean; // TODO(burdon): Change to PieceRecord.
-  promoting?: PieceRecord;
-  onPromotion: (move: Move) => void;
-};
-
-export const BoardContext = createContext<BoardContextType | undefined>(undefined);
-
-export const useBoardContext = () => {
-  return useContext(BoardContext) ?? raise(new Error('Missing BoardContext'));
-};

package/src/Board/index.ts

@@ -1,12 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './context';
-export * from './types';
-export * from './util';
-
-export * from './Board';
-export * from './Container';
-export * from './Square';
-export * from './Piece';

package/src/Chessboard/Chessboard.stories.tsx

@@ -1,108 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-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 { 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>
-  );
-};