@dxos/plugin-chess 0.8.4-main.f9ba587 → 0.8.4-main.fffef41

package/src/components/Chessboard.tsx

@@ -0,0 +1,177 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, {
+  type PropsWithChildren,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { addEventListener } from '@dxos/async';
+import { type ThemedClassName } from '@dxos/react-ui';
+import {
+  ChessModel,
+  Gameboard,
+  type GameboardRootProps,
+  Chessboard as NaturalChessboard,
+  type ChessboardProps as NaturalChessboardProps,
+  getRawPgn,
+  useGameboardContext,
+} from '@dxos/react-ui-gameboard';
+import { useSoundEffect } from '@dxos/react-ui-sfx';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type Chess } from '../types';
+
+import { Info, type InfoProps } from './Info';
+
+export interface ChessboardController {
+  setMoveNumber(index: number): void;
+}
+
+export class ExtendedChessModel extends ChessModel {
+  constructor(readonly object: Chess.Game) {
+    super();
+  }
+}
+
+//
+// Root
+//
+
+type RootProps = PropsWithChildren<{
+  game: Chess.Game;
+}>;
+
+const Root = forwardRef<ChessboardController, RootProps>(({ game, children }, forwardedRef) => {
+  const model = useMemo(() => new ExtendedChessModel(game), []);
+  const click = useSoundEffect('Click');
+
+  // Controller.
+  useImperativeHandle(forwardedRef, () => {
+    return {
+      setMoveNumber: (index) => model.setMoveIndex(index),
+    };
+  }, [model]);
+
+  // External change.
+  // NOTE: Warning if user has not interacted with the board.
+  useEffect(() => {
+    if (model.pgn !== getRawPgn(game.pgn ?? '')) {
+      const silent = model.pgn === '*';
+      model.update(game.pgn);
+      if (!silent) {
+        void click.play();
+      }
+    }
+  }, [game.pgn]);
+
+  // Move.
+  const handleDrop = useCallback<NonNullable<GameboardRootProps<ChessModel>['onDrop']>>(
+    (move) => {
+      if (!model.makeMove(move)) {
+        return false;
+      }
+
+      void click.play();
+      game.pgn = model.pgn;
+      return true;
+    },
+    [model],
+  );
+
+  return (
+    <Gameboard.Root model={model} onDrop={handleDrop}>
+      {children}
+    </Gameboard.Root>
+  );
+});
+
+//
+// Content
+//
+
+type Role = 'card--popover' | 'card--intrinsic' | 'card--extrinsic';
+
+type ContentProps = ThemedClassName<PropsWithChildren<{ role?: Role }>>;
+
+const Content = ({ classNames, children, role }: ContentProps) => {
+  return (
+    <Gameboard.Content
+      classNames={mx(classNames, role === 'card--popover' && 'size-container popover-square')}
+      grow={!role || role === 'card--extrinsic'}
+      contain={!role || role === 'card--extrinsic' || role === 'card--popover'}
+    >
+      {children}
+    </Gameboard.Content>
+  );
+};
+
+//
+// Board
+//
+
+type BoardProps = NaturalChessboardProps;
+
+const Board = (props: BoardProps) => {
+  const { model } = useGameboardContext<ChessModel>(Board.displayName);
+
+  // Keyboard navigation.
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    // Participate in keyboard navigation (set tabIndex={0})
+    ref.current.setAttribute('data-arrow-keys', 'all');
+
+    return addEventListener(ref.current, 'keydown', (ev) => {
+      switch (ev.key) {
+        case 'ArrowUp':
+          model.setMoveIndex(0);
+          break;
+        case 'ArrowDown':
+          model.setMoveIndex(model.game.history().length);
+          break;
+        case 'ArrowLeft':
+          if (model.moveIndex.value > 0) {
+            model.setMoveIndex(model.moveIndex.value - 1);
+          }
+          break;
+        case 'ArrowRight':
+          if (model.moveIndex.value < model.game.history().length) {
+            model.setMoveIndex(model.moveIndex.value + 1);
+          }
+          break;
+      }
+    });
+  }, [model]);
+
+  return <NaturalChessboard ref={ref} {...props} />;
+};
+
+Board.displayName = 'Chessboard.Board';
+
+//
+// Chessboard
+//
+
+export const Chessboard = {
+  Root: Root,
+  Content: Content,
+  Board: Board,
+  Info: Info,
+};
+
+export type {
+  RootProps as ChessboardRootProps,
+  ContentProps as ChessboardContentProps,
+  BoardProps as ChessboardBoardProps,
+  InfoProps as ChessboardInfoProps,
+};

package/src/components/ChessboardArticle.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useRef, useState } from 'react';
+
+import { Toolbar, useTranslation } from '@dxos/react-ui';
+import { type Player } from '@dxos/react-ui-gameboard';
+import { StackItem } from '@dxos/react-ui-stack';
+import { mx } from '@dxos/react-ui-theme';
+
+import { meta } from '../meta';
+import { type Chess } from '../types';
+
+import { Chessboard, type ChessboardController, type ChessboardInfoProps } from './Chessboard';
+
+export const ChessboardArticle = ({ game, role }: { game: Chess.Game; role?: string }) => {
+  const { t } = useTranslation(meta.id);
+  const [orientation, setOrientation] = useState<Player>('white');
+  const [open, setOpen] = useState(true);
+  const controller = useRef<ChessboardController>(null);
+
+  // TODO(burdon): Keyboard handler.
+  const handleSelect = useCallback<NonNullable<ChessboardInfoProps['onSelect']>>((index) => {
+    controller.current?.setMoveNumber(index);
+  }, []);
+
+  return (
+    <StackItem.Content toolbar classNames='@container'>
+      <Chessboard.Root game={game} ref={controller}>
+        <Toolbar.Root>
+          <Toolbar.IconButton
+            icon='ph--info--regular'
+            iconOnly
+            label={t('toggle info button')}
+            disabled={open}
+            classNames={mx('invisible @3xl:visible')}
+            onClick={() => setOpen((open) => !open)}
+          />
+        </Toolbar.Root>
+        <div
+          className={mx(
+            'grid bs-full is-full gap-2',
+            open && '@3xl:grid-cols-[1fr_320px]',
+            role === 'section' && 'aspect-square',
+            role === 'section' && open && '@3xl:aspect-auto',
+          )}
+        >
+          <Chessboard.Content>
+            <Chessboard.Board classNames='m-4 rounded-sm overflow-hidden' orientation={orientation} />
+          </Chessboard.Content>
+          {open && (
+            <div className='hidden @3xl:flex flex-col p-8 justify-center items-center overflow-hidden'>
+              <Chessboard.Info
+                orientation={orientation}
+                min={8}
+                max={8}
+                onOrientationChange={setOrientation}
+                onClose={() => setOpen(false)}
+                onSelect={handleSelect}
+              />
+            </div>
+          )}
+        </div>
+      </Chessboard.Root>
+    </StackItem.Content>
+  );
+};

package/src/components/ChessboardContainer.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { getSpace } from '@dxos/react-client/echo';
+
+import { type Chess } from '../types';
+
+import { Chessboard } from './Chessboard';
+import { ChessboardArticle } from './ChessboardArticle';
+
+export type ChessboardContainerProps = {
+  game: Chess.Game;
+  role?: string;
+};
+
+export const ChessboardContainer = ({ game, role }: ChessboardContainerProps) => {
+  const space = getSpace(game);
+  if (!space) {
+    return null;
+  }
+
+  switch (role) {
+    case 'card--popover':
+    case 'card--intrinsic':
+    case 'card--extrinsic': {
+      return (
+        <Chessboard.Root game={game}>
+          <Chessboard.Content role={role}>
+            <Chessboard.Board />
+          </Chessboard.Content>
+        </Chessboard.Root>
+      );
+    }
+
+    default: {
+      return <ChessboardArticle game={game} role={role} />;
+    }
+  }
+};
+
+export default ChessboardContainer;

package/src/components/Info.tsx

@@ -0,0 +1,236 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type JSX, type PropsWithChildren, useEffect, useMemo, useRef } from 'react';
+
+import { generateName } from '@dxos/display-name';
+import { type SpaceMember, getSpace, useMembers } from '@dxos/react-client/echo';
+import { Icon, IconButton, Select, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { type Player, useGameboardContext } from '@dxos/react-ui-gameboard';
+import { mx } from '@dxos/react-ui-theme';
+
+import { meta } from '../meta';
+
+import { type ExtendedChessModel } from './Chessboard';
+
+export type InfoProps = ThemedClassName<
+  {
+    orientation?: Player;
+    onOrientationChange?: (orientation: Player) => void;
+    onClose?: () => void;
+  } & Pick<HistoryProps, 'min' | 'max' | 'onSelect'>
+>;
+
+export const Info = ({ classNames, orientation = 'white', onOrientationChange, onClose, ...props }: InfoProps) => {
+  const { t } = useTranslation(meta.id);
+  const { model } = useGameboardContext<ExtendedChessModel>(Info.displayName);
+  const members = useMembers(getSpace(model.object)?.key);
+
+  return (
+    <div
+      className={mx(
+        'grid grid-rows-[min-content_1fr_min-content] is-full min-is-[18rem] p-2 overflow-hidden bg-groupSurface rounded-sm',
+        classNames,
+      )}
+    >
+      <PlayerIndicator
+        model={model}
+        player={orientation === 'white' ? 'black' : 'white'}
+        icon={
+          onClose && (
+            <IconButton icon='ph--x--regular' iconOnly label={t('close info button')} size={4} onClick={onClose} />
+          )
+        }
+      >
+        <PlayerSelector
+          value={model.object.players?.[orientation === 'white' ? 'black' : 'white']}
+          onValueChange={(value) => {
+            model.object.players![orientation === 'white' ? 'black' : 'white'] = value;
+          }}
+          members={members}
+        />
+      </PlayerIndicator>
+
+      <History model={model} {...props} />
+
+      <PlayerIndicator
+        model={model}
+        player={orientation}
+        icon={
+          onOrientationChange && (
+            <IconButton
+              classNames={mx('transition duration-200 ease-linear', orientation === 'white' && 'rotate-180')}
+              icon='ph--arrows-clockwise--regular'
+              iconOnly
+              label={t('flip board button')}
+              size={4}
+              onClick={() => onOrientationChange(orientation === 'white' ? 'black' : 'white')}
+            />
+          )
+        }
+      >
+        <PlayerSelector
+          value={model.object.players?.[orientation]}
+          onValueChange={(value) => {
+            model.object.players![orientation] = value;
+          }}
+          members={members}
+        />
+      </PlayerIndicator>
+    </div>
+  );
+};
+
+Info.displayName = 'Chessboard.Info';
+
+//
+// History
+//
+
+type HistoryProps = ThemedClassName<{
+  model: ExtendedChessModel;
+  min?: number;
+  max?: number;
+  onSelect?: (index: number) => void;
+}>;
+
+const History = ({ classNames, model, min, max, onSelect }: HistoryProps) => {
+  const { t } = useTranslation(meta.id);
+  const label = model.game.isGameOver()
+    ? model.game.isCheckmate()
+      ? t('game.checkmate label')
+      : model.game.isStalemate()
+        ? t('game.stalemate label')
+        : t('game.draw label')
+    : model.game.isCheck()
+      ? t('game.check label')
+      : undefined;
+
+  const history = model.game.history();
+  const moves = useMemo(
+    () =>
+      history.reduce(
+        (acc, move, index) => {
+          if (index % 2 === 0) {
+            acc.push([{ index, move }]);
+          } else {
+            acc[acc.length - 1].push({ index, move });
+          }
+          return acc;
+        },
+        [] as { index: number; move: string }[][],
+      ),
+    [history.length],
+  );
+
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    scrollerRef.current?.scrollTo({ top: scrollerRef.current.scrollHeight });
+  }, [history.length]);
+
+  useEffect(() => {
+    const div = scrollerRef.current?.querySelector(`[data-index="${model.moveIndex.value - 1}"]`);
+    scrollerRef.current?.classList.add('scrollbar-none');
+    div?.scrollIntoView({ behavior: 'smooth' });
+    scrollerRef.current?.classList.remove('scrollbar-none');
+  }, [model.moveIndex.value]);
+
+  return (
+    <div
+      ref={scrollerRef}
+      className={mx('overflow-y-auto', classNames)}
+      style={{
+        minHeight: min === undefined ? 'auto' : `${min * 24}px`,
+        maxHeight: max === undefined ? 'auto' : `${max * 24}px`,
+      }}
+    >
+      {moves.map(([a, b], index) => (
+        <div key={index} className='grid grid-cols-[3rem_1fr_1fr_1rem] gap-2 pis-4 leading-1'>
+          <div className='content-center text-xs text-subdued'>{index + 1}</div>
+          {a && (
+            <div
+              data-index={a.index}
+              className={mx('pis-2 cursor-pointer', a.index === model.moveIndex.value - 1 && 'bg-primary-500')}
+              onClick={() => onSelect?.(a.index + 1)}
+            >
+              {a.move}
+            </div>
+          )}
+          {b && (
+            <div
+              data-index={b.index}
+              className={mx('pis-2 cursor-pointer', b.index === model.moveIndex.value - 1 && 'bg-primary-500')}
+              onClick={() => onSelect?.(b.index + 1)}
+            >
+              {b.move}
+            </div>
+          )}
+        </div>
+      ))}
+      {label && <div className='text-center'>{label}</div>}
+    </div>
+  );
+};
+
+//
+// PlayerIndicator
+//
+
+type PlayerIndicatorProps = PropsWithChildren<{
+  model: ExtendedChessModel;
+  player: Player;
+  icon?: JSX.Element;
+}>;
+
+const PlayerIndicator = ({ children, model, player, icon }: PlayerIndicatorProps) => {
+  const turn = player === (model.game.turn() === 'w' ? 'white' : 'black');
+  return (
+    <div className='grid grid-cols-[2rem_1fr_2rem] gap-2 bs-[--rail-size] pli-1 flex items-center overflow-hidden'>
+      <div className='place-items-center'>
+        <Icon
+          icon={turn ? 'ph--circle--fill' : 'ph--circle--thin'}
+          size={6}
+          classNames={mx(turn && (model.game.isCheckmate() ? 'text-red-500' : 'text-green-500'))}
+        />
+      </div>
+      <div className='truncate overflow-hidden items-center'>{children}</div>
+      {icon}
+    </div>
+  );
+};
+
+//
+// PlayerSelector
+//
+
+type PlayerSelectorProps = {
+  value?: string;
+  onValueChange: (player: string) => void;
+  members: SpaceMember[];
+};
+
+const PlayerSelector = ({ value, onValueChange, members }: PlayerSelectorProps) => {
+  const { t } = useTranslation(meta.id);
+  return (
+    <Select.Root value={value} onValueChange={onValueChange}>
+      <Select.TriggerButton placeholder={t('select player button')} />
+      <Select.Portal>
+        <Select.Content>
+          <Select.Viewport>
+            {members.map((member) => {
+              const memberKey = member.identity.identityKey.toHex();
+              const displayName = member.identity?.profile?.displayName || generateName(memberKey);
+              return (
+                <Select.Option key={memberKey} value={memberKey}>
+                  {displayName}
+                </Select.Option>
+              );
+            })}
+          </Select.Viewport>
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};

package/src/components/index.ts

@@ -4,6 +4,6 @@
 
 import { lazy } from 'react';
 
-export * from './ChessComponent';
+export * from './Chessboard';
 
-export const ChessContainer = lazy(() => import('./ChessContainer'));
+export const ChessboardContainer = lazy(() => import('./ChessboardContainer'));

package/src/functions/create.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { DatabaseService, defineFunction } from '@dxos/functions';
+
+import { Chess } from '../types';
+
+export default defineFunction({
+  key: 'dxos.org/function/chess/create',
+  name: 'Create Chess',
+  description: 'Creates a new chess game.',
+  inputSchema: Schema.Struct({
+    pgn: Schema.optional(
+      Schema.String.annotations({
+        description: 'Portable Game Notation.',
+      }),
+    ),
+    fen: Schema.optional(
+      Schema.String.annotations({
+        description: 'Forsyth-Edwards Notation.',
+      }),
+    ),
+  }),
+  outputSchema: Chess.Game,
+  handler: Effect.fn(function* ({ data: { pgn, fen } }) {
+    return yield* DatabaseService.add(Chess.makeGame({ pgn, fen }));
+  }),
+});

package/src/functions/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { default as create } from './create';
+export { default as move } from './move';
+export { default as play } from './play';

package/src/functions/move.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Chess as ChessJS } from 'chess.js';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { ArtifactId } from '@dxos/assistant';
+import { DatabaseService, defineFunction } from '@dxos/functions';
+
+import { Chess } from '../types';
+
+export default defineFunction({
+  key: 'dxos.org/function/chess/move',
+  name: 'Move',
+  description: 'Makes a move in the given chess game.',
+  inputSchema: Schema.Struct({
+    id: ArtifactId.annotations({
+      description: 'The ID of the chess object.',
+    }),
+    move: Schema.String.annotations({
+      description: 'The move to make in the chess game.',
+      examples: ['e4', 'Bf3'],
+    }),
+  }),
+  outputSchema: Schema.Struct({
+    pgn: Schema.String.annotations({
+      description: 'The PGN of the game after the move was played.',
+    }),
+  }),
+  handler: Effect.fn(function* ({ data: { id, move } }) {
+    const object = yield* DatabaseService.resolve(ArtifactId.toDXN(id), Chess.Game);
+    const chess = new ChessJS();
+    if (object.pgn) {
+      chess.loadPgn(object.pgn);
+    } else if (object.fen) {
+      chess.load(object.fen);
+    }
+
+    chess.move(move, { strict: false });
+    object.pgn = chess.pgn();
+    return { pgn: object.pgn };
+  }),
+});

package/src/functions/play.ts

@@ -0,0 +1,55 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Chess as ChessJS } from 'chess.js';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { ArtifactId } from '@dxos/assistant';
+import { DatabaseService, defineFunction } from '@dxos/functions';
+
+import { Chess } from '../types';
+
+export default defineFunction({
+  key: 'dxos.org/function/chess/play',
+  name: 'Play',
+  description: 'Uses the chess engine to play the next move.',
+  inputSchema: Schema.Struct({
+    id: ArtifactId.annotations({
+      description: 'The ID of the chess object.',
+    }),
+    side: Schema.optional(Schema.Literal('white', 'black', 'any')).annotations({
+      description: 'The side to play.',
+      defaultValue: 'any',
+    }),
+  }),
+  outputSchema: Schema.Struct({
+    pgn: Schema.String.annotations({
+      description: 'The PGN of the game after the move was played.',
+    }),
+    move: Schema.optional(Schema.String).annotations({
+      description: 'The move that was played.',
+    }),
+  }),
+  handler: Effect.fn(function* ({ data: { id, side = 'any' } }) {
+    const object = yield* DatabaseService.resolve(ArtifactId.toDXN(id), Chess.Game);
+    const chess = new ChessJS();
+    if (object.pgn) {
+      chess.loadPgn(object.pgn);
+    } else if (object.fen) {
+      chess.load(object.fen);
+    }
+
+    if (!(side === 'any' || (chess.turn() === 'w' && side === 'white') || (chess.turn() === 'b' && side === 'black'))) {
+      return { move: undefined, pgn: object.pgn! };
+    }
+
+    const moves = chess.moves();
+    const move = moves[Math.floor(Math.random() * moves.length)];
+
+    chess.move(move, { strict: false });
+    object.pgn = chess.pgn();
+    return { move, pgn: object.pgn };
+  }),
+});

package/src/index.ts

@@ -4,6 +4,8 @@
 
 export * from './capabilities';
 export * from './components';
+export * from './functions';
 export * from './meta';
+export * from './types';
 
 export * from './ChessPlugin';